/*
 * Estrutura visual oficial e comum a todas as páginas do site principal.
 * Ordem tipográfica: título (Quicksand), impacto (Anton), texto (Quicksand).
 */
.page-v3 {
  --visual-blue: #1099d8;
  --visual-blue-soft: #6db8db;
  --visual-yellow: #f3e523;
  --visual-yellow-soft: #ede581;
  --visual-black: #000000;
}

/* Filete institucional: sempre contrasta com a cor principal do card. */
.page-v3 .architecture-hero-card,
.page-v3 .page-hero-card,
.page-v3 .architecture-zig-card,
.page-v3 .architecture-cta-card,
.page-v3 .cta-panel,
.page-v3 .project-row,
.page-v3 .person-row,
.page-v3 .graduation-item,
.page-v3 .photo-split,
.page-v3 .donate-guide-row,
.page-v3 .info-card,
.page-v3 .form-card {
  position: relative;
  overflow: hidden;
}

.page-v3 .architecture-hero-card,
.page-v3 .page-hero-card,
.page-v3 .architecture-zig-blue,
.page-v3 .architecture-zig-card:nth-child(even),
.page-v3 .project-row:nth-child(even),
.page-v3 .person-row:nth-child(even),
.page-v3 .graduation-item:nth-child(even),
.page-v3 .photo-split:nth-child(even),
.page-v3 .donate-guide-row:nth-child(even),
.page-v3 .info-card:nth-child(even) {
  --card-filet-color: var(--visual-yellow);
}

.page-v3 .architecture-zig-yellow,
.page-v3 .architecture-zig-card:nth-child(odd),
.page-v3 .architecture-cta-card,
.page-v3 .cta-panel,
.page-v3 .project-row:nth-child(odd),
.page-v3 .person-row:nth-child(odd),
.page-v3 .graduation-item:nth-child(odd),
.page-v3 .photo-split:nth-child(odd),
.page-v3 .donate-guide-row:nth-child(odd),
.page-v3 .info-card:nth-child(odd),
.page-v3 .form-card {
  --card-filet-color: var(--visual-blue);
}

/* As classes de cor prevalecem sobre a posição do card no zigue-zague. */
.page-v3 .architecture-zig-card.architecture-zig-yellow {
  --card-filet-color: var(--visual-blue);
}

.page-v3 .architecture-zig-card.architecture-zig-blue {
  --card-filet-color: var(--visual-yellow);
}

.page-v3 .architecture-hero-card::before,
.page-v3 .page-hero-card::before,
.page-v3 .architecture-zig-card::before,
.page-v3 .architecture-cta-card::before,
.page-v3 .cta-panel::before,
.page-v3 .project-row::before,
.page-v3 .person-row::before,
.page-v3 .graduation-item::before,
.page-v3 .photo-split::before,
.page-v3 .donate-guide-row::before,
.page-v3 .info-card::before,
.page-v3 .form-card::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: 6;
  display: block;
  height: var(--card-filet-size);
  background: var(--card-filet-color);
  content: "";
  pointer-events: none;
}

/* Títulos limpos: nenhuma barra, traço ou ornamento ao lado do texto. */
.page-v3 .eyebrow::before,
.page-v3 .architecture-eyebrow::before {
  display: none;
  content: none;
}

/* Hero */
.page-v3 .page-hero::after,
.page-v3 .architecture-hero::after {
  background: linear-gradient(90deg, rgb(0 0 0 / 52%), rgb(0 0 0 / 16%) 62%, rgb(0 0 0 / 30%));
}

.page-v3 .page-hero-card,
.page-v3 .architecture-hero-card {
  overflow: hidden;
  background: rgb(16 153 216 / 85%);
  color: var(--visual-black);
}

.page-v3 .page-hero h1,
.page-v3 .architecture-hero h1 {
  color: var(--visual-black);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1.05;
  text-transform: uppercase;
  -webkit-text-stroke: 0;
}

/* Título curto do Hero */
.page-v3 .page-hero-card > .eyebrow,
.page-v3 .architecture-hero-copy > .architecture-eyebrow {
  color: var(--visual-black);
  font-family: var(--font-body);
  font-size: clamp(.82rem, .76rem + .25vw, 1rem);
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.15;
  text-transform: uppercase;
}

/* Frase de impacto do Hero */
.page-v3 .page-hero-card > .eyebrow + h1,
.page-v3 .architecture-hero-copy > .architecture-eyebrow + h1 {
  max-width: 15ch;
  color: var(--visual-black);
  font-family: var(--font-title);
  font-size: clamp(3rem, 7vw, 5.4rem);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: .98;
  text-transform: uppercase;
}

.page-home .architecture-hero h1.architecture-eyebrow {
  max-width: none;
  color: var(--visual-black);
  font-family: var(--font-body);
  font-size: clamp(.95rem, 1.4vw, 1.2rem);
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.page-home .architecture-hero .architecture-impact {
  max-width: 13ch;
  color: var(--visual-black);
  font-family: var(--font-title);
  font-size: clamp(3rem, 7vw, 5.4rem);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: .98;
  text-transform: uppercase;
}

.page-home .architecture-hero .architecture-text {
  max-width: 38rem;
  color: var(--visual-black);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
}

.page-v3 .page-hero-card > p:first-of-type,
.page-v3 .architecture-hero-copy > p:first-of-type {
  color: var(--visual-black);
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: .025em;
  line-height: 1.1;
  text-transform: uppercase;
}

.page-v3 .page-hero-card > p:not(:first-of-type),
.page-v3 .architecture-hero-copy > p:not(:first-of-type) {
  color: var(--visual-black);
  font-family: var(--font-body);
  text-transform: none;
}

.page-v3 .page-hero-card > p,
.page-v3 .architecture-hero-copy > p:last-of-type {
  font-size: clamp(.92rem, .88rem + .2vw, 1.05rem);
  line-height: 1.6;
}

/* Heroes internos legados usam h1 + p: h1 é o título e p é o impacto. */
.page-v3 .page-hero-card > h1:first-child {
  max-width: none;
  font-family: var(--font-body);
  font-size: clamp(.82rem, .76rem + .25vw, 1rem);
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.15;
  text-transform: uppercase;
}

.page-v3 .page-hero-card > h1:first-child + p {
  max-width: 15ch;
  font-family: var(--font-title);
  font-size: clamp(3rem, 7vw, 5.4rem);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: .98;
  text-transform: uppercase;
}

/* Imagens com tratamento de overlay coerente. */
.page-v3 .architecture-hero-media img,
.page-v3 .architecture-zig-media img,
.page-v3 .project-row-media img,
.page-v3 img.project-row-media,
.page-v3 .photo-split-media img,
.page-v3 .graduation-photo img,
.page-v3 .person-photo img {
  filter: brightness(.76) saturate(.9);
}

/* Cards ímpares e pares */
.page-v3 .architecture-zig-card:nth-of-type(odd),
.page-v3 .project-row:nth-child(odd),
.page-v3 .graduation-item:nth-child(odd),
.page-v3 .photo-split:nth-child(odd),
.page-v3 .info-card:nth-child(odd),
.page-v3 .donate-guide-row:nth-child(odd) {
  background: var(--visual-yellow-soft);
}

.page-v3 .architecture-zig-card:nth-of-type(even),
.page-v3 .project-row:nth-child(even),
.page-v3 .graduation-item:nth-child(even),
.page-v3 .photo-split:nth-child(even),
.page-v3 .info-card:nth-child(even),
.page-v3 .donate-guide-row:nth-child(even) {
  background: var(--visual-blue-soft);
}

.page-v3 .project-row:nth-child(odd) .project-row-copy,
.page-v3 .graduation-item:nth-child(odd) .graduation-copy,
.page-v3 .photo-split:nth-child(odd) .photo-split-content {
  background: var(--visual-yellow-soft);
}

.page-v3 .project-row:nth-child(even) .project-row-copy,
.page-v3 .graduation-item:nth-child(even) .graduation-copy,
.page-v3 .photo-split:nth-child(even) .photo-split-content {
  background: var(--visual-blue-soft);
}

/* Título dos cards */
.page-v3 .architecture-zig-copy .architecture-eyebrow,
.page-v3 .project-row-copy > .eyebrow,
.page-v3 .project-row-copy h2,
.page-v3 .photo-split-content h2,
.page-v3 .info-card h2,
.page-v3 .info-card > .eyebrow,
.page-v3 .timeline-year,
.page-v3 .person-copy h2,
.page-v3 .donate-guide-row h2 {
  color: var(--visual-black);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(.82rem, .76rem + .25vw, 1rem);
  letter-spacing: .035em;
  line-height: 1.15;
  text-transform: uppercase;
}

/* Frase de impacto dos cards */
.page-v3 .architecture-zig-copy h3,
.page-v3 .project-row-copy h3,
.page-v3 .photo-split-content h3,
.page-v3 .info-card h3,
.page-v3 .graduation-copy h3,
.page-v3 .person-copy h3,
.page-v3 .donate-guide-row h3 {
  color: var(--visual-black);
  font-family: var(--font-title);
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 4rem);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.02;
  text-transform: uppercase;
  -webkit-text-stroke: 0;
}

/* Alguns cards funcionais usam h2 como impacto por hierarquia semântica. */
.page-v3 .architecture-zig-copy > h2,
.page-v3 .project-row-copy > .eyebrow + h2,
.page-v3 .photo-split-content > .eyebrow + h2,
.page-v3 .info-card > .eyebrow + h2,
.page-v3 .donate-guide-row .eyebrow + h2 {
  max-width: 15ch;
  color: var(--visual-black);
  font-family: var(--font-title);
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 4rem);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.02;
  text-transform: uppercase;
}

/* Texto dos cards */
.page-v3 .architecture-zig-copy p,
.page-v3 .project-row-copy p,
.page-v3 .photo-split-content p,
.page-v3 .info-card p,
.page-v3 .graduation-copy p,
.page-v3 .person-copy p,
.page-v3 .donate-guide-row p {
  color: var(--visual-black);
  font-family: var(--font-body);
  font-size: clamp(.92rem, .88rem + .2vw, 1.05rem);
  line-height: 1.6;
  text-transform: none;
}

/* Botões: regra comum e cores por posição. */
.page-v3 .button,
.page-v3 .architecture-button {
  color: var(--visual-black);
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.page-v3 .page-hero .button,
.page-v3 .architecture-hero .architecture-button {
  background: var(--visual-yellow);
  color: var(--visual-black);
}

.page-v3 .architecture-zig-card:nth-of-type(odd) .architecture-button,
.page-v3 .project-row:nth-child(odd) .button,
.page-v3 .graduation-item:nth-child(odd) .button,
.page-v3 .photo-split:nth-child(odd) .button,
.page-v3 .info-card:nth-child(odd) .button,
.page-v3 .form-card .button {
  background: var(--visual-blue);
  color: var(--visual-black);
}

.page-v3 .architecture-zig-card:nth-of-type(even) .architecture-button,
.page-v3 .project-row:nth-child(even) .button,
.page-v3 .graduation-item:nth-child(even) .button,
.page-v3 .photo-split:nth-child(even) .button,
.page-v3 .info-card:nth-child(even) .button {
  background: var(--visual-yellow);
  color: var(--visual-black);
}

/* CTA */
.page-v3 .architecture-cta-card,
.page-v3 .cta-panel,
.page-v3 .cta-panel-yellow {
  overflow: hidden;
  background: var(--visual-yellow);
  color: var(--visual-black);
}

.page-v3 .architecture-cta-card h2,
.page-v3 .cta-panel h2 {
  color: var(--visual-black);
  font-family: var(--font-title);
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 4rem);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.02;
  text-transform: uppercase;
  -webkit-text-stroke: 0;
}

.page-v3 .architecture-cta-card .architecture-eyebrow,
.page-v3 .cta-panel > .eyebrow,
.page-v3 .cta-panel > div > .eyebrow {
  color: var(--visual-black);
  font-family: var(--font-body);
  font-size: clamp(.82rem, .76rem + .25vw, 1rem);
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.15;
  text-transform: uppercase;
}

.page-v3 .architecture-cta-card h3,
.page-v3 .cta-panel h3 {
  color: var(--visual-black);
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.page-v3 .architecture-cta-card p,
.page-v3 .cta-panel p {
  color: var(--visual-black);
  font-family: var(--font-body);
  font-size: clamp(.92rem, .88rem + .2vw, 1.05rem);
  line-height: 1.6;
}

.page-v3 .architecture-cta-card .button,
.page-v3 .architecture-cta-card .architecture-button,
.page-v3 .cta-panel .button {
  border: 0;
  background: var(--visual-blue);
  color: var(--visual-black);
}

/* CTA da Home: título curto em Quicksand e impacto principal em Anton. */
.page-home .architecture-cta-card::before {
  display: none;
  content: none;
}

.page-home .architecture-cta-card h2 {
  color: var(--visual-black);
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.02;
  text-transform: uppercase;
}

/* O formulário é o card ímpar da página Contato. */
.page-contact .form-card {
  background: var(--visual-yellow-soft);
}

.page-contact .form-card h2 {
  color: var(--visual-black);
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
}

.page-contact .form-card p,
.page-contact .form-card label {
  color: var(--visual-black);
  font-family: var(--font-body);
}

@media (prefers-reduced-motion: reduce) {
  .page-v3 .button,
  .page-v3 .architecture-button {
    transition: none;
  }
}

/*
 * Páginas unificadas: a Home é o gabarito dimensional.
 * Só conteúdo, imagem e quantidade de cards podem variar.
 */
.page-unified main {
  background: #c5c5c5;
}

.page-unified main .container,
.page-unified .architecture-shell {
  width: min(calc(100% - 2rem), 76rem);
  max-width: 76rem;
  margin-inline: auto;
}

.page-unified .page-hero {
  min-height: clamp(42rem, 78vh, 52rem);
  padding-block: clamp(5rem, 9vw, 8rem);
  align-items: center;
  background: #000;
}

.page-unified .page-hero .container {
  display: flex;
  align-items: center;
}

.page-unified .page-hero-card {
  width: min(100%, 43rem);
  padding: clamp(3.5rem, 7vw, 5.25rem) clamp(1.5rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 3.75rem);
  border-radius: 2rem;
}

.page-unified .page-hero-card::before {
  background: var(--visual-yellow);
}

.page-unified main > .section:not(.architecture-cta-section),
.page-unified main > .donate-guide,
.page-unified .architecture-zigzag {
  padding-block: clamp(4rem, 8vw, 7rem);
  background: #c5c5c5;
}

.page-unified .projects-list .container,
.page-unified .people-list,
.page-unified .graduation-timeline,
.page-unified .donate-guide {
  display: grid;
  width: min(calc(100% - 2rem), 76rem);
  max-width: 76rem;
  margin-inline: auto;
  gap: 2rem;
}

.page-unified .project-row,
.page-unified .person-row,
.page-unified .graduation-item,
.page-unified .photo-split,
.page-unified .donate-guide-row,
.page-unified .info-card {
  position: relative;
  display: grid;
  min-height: 31rem;
  margin: 0;
  border: 0;
  border-radius: 2rem;
  box-shadow: 0 1.2rem 2.5rem rgb(15 35 48 / 13%);
  overflow: hidden;
}

.page-unified .project-row::before,
.page-unified .person-row::before,
.page-unified .graduation-item::before,
.page-unified .photo-split::before,
.page-unified .donate-guide-row::before,
.page-unified .info-card::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  height: .3rem;
  background: var(--visual-blue);
  content: "";
}

.page-unified .project-row:nth-child(even)::before,
.page-unified .person-row:nth-child(even)::before,
.page-unified .graduation-item:nth-child(even)::before,
.page-unified .photo-split:nth-child(even)::before,
.page-unified .donate-guide-row:nth-child(even)::before,
.page-unified .info-card:nth-child(even)::before {
  background: var(--visual-yellow);
}

.page-unified .graduation-connector,
.page-unified .graduation-timeline::before {
  display: none;
}

.page-unified .project-row-media,
.page-unified img.project-row-media,
.page-unified .person-photo,
.page-unified .graduation-photo,
.page-unified .photo-split-media {
  min-height: 22rem;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.page-unified .project-row-media img,
.page-unified img.project-row-media,
.page-unified .person-photo img,
.page-unified .graduation-photo img,
.page-unified .photo-split-media img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  border-radius: 0;
  object-fit: cover;
}

.page-unified .project-row-copy,
.page-unified .person-copy,
.page-unified .graduation-copy,
.page-unified .photo-split-content,
.page-unified .donate-guide-row > div:first-child {
  display: grid;
  padding: clamp(2rem, 5vw, 4rem);
  align-content: center;
  justify-items: start;
  gap: 1rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.page-unified .architecture-cta-section,
.page-unified main > .section:has(.cta-panel),
.page-unified .final-donate {
  padding-block: clamp(4rem, 8vw, 6.5rem);
  background: #7c7c7c;
}

.page-unified .architecture-cta-card,
.page-unified .cta-panel {
  width: 100%;
  border-radius: 2rem;
  background: var(--visual-yellow);
}

.page-unified .architecture-cta-card::before,
.page-unified .cta-panel::before {
  background: var(--visual-blue);
}

.page-unified .contact-zig-card {
  min-height: 44rem;
}

.page-unified .contact-zig-card .architecture-zig-copy {
  align-content: start;
}

.page-unified .contact-zig-card form {
  width: 100%;
}

@media (min-width: 52rem) {
  .page-unified .project-row,
  .page-unified .person-row,
  .page-unified .graduation-item,
  .page-unified .photo-split {
    grid-template-columns: 40% 60%;
  }

  .page-unified .project-row-reverse,
  .page-unified .person-row-reverse,
  .page-unified .graduation-reverse,
  .page-unified .photo-split-reverse {
    grid-template-columns: 60% 40%;
  }

  .page-unified .project-row-reverse .project-row-media,
  .page-unified .project-row-reverse > img,
  .page-unified .person-row-reverse .person-photo,
  .page-unified .graduation-reverse .graduation-photo,
  .page-unified .photo-split-reverse .photo-split-media {
    grid-column: 2;
    grid-row: 1;
    order: 0;
  }

  .page-unified .project-row-reverse .project-row-copy,
  .page-unified .person-row-reverse .person-copy,
  .page-unified .graduation-reverse .graduation-copy,
  .page-unified .photo-split-reverse .photo-split-content {
    grid-column: 1;
    grid-row: 1;
  }
}

@media (max-width: 51.999rem) {
  .page-unified .project-row,
  .page-unified .person-row,
  .page-unified .graduation-item,
  .page-unified .photo-split,
  .page-unified .architecture-zig-card,
  .page-unified .architecture-cta-card {
    border-radius: 1.35rem;
  }
}

/* Garante o filete depois de todas as regras legadas de cada página. */
.page-v3 .architecture-hero-card::before,
.page-v3 .page-hero-card::before,
.page-v3 .architecture-zig-card::before,
.page-v3 .architecture-cta-card::before,
.page-v3 .cta-panel::before,
.page-v3 .project-row::before,
.page-v3 .person-row::before,
.page-v3 .graduation-item::before,
.page-v3 .photo-split::before,
.page-v3 .donate-guide-row::before,
.page-v3 .info-card::before,
.page-v3 .form-card::before {
  display: block;
  height: var(--card-filet-size);
  background: var(--card-filet-color);
  content: "";
}

/* Hero usa a mesma escala tipográfica dos cards e do CTA. */
.page-v3 .architecture-hero-copy > .architecture-eyebrow,
.page-home .architecture-hero h1.architecture-eyebrow {
  max-width: none;
  font-family: var(--font-body);
  font-size: clamp(.82rem, .76rem + .25vw, 1rem);
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.15;
}

.page-v3 .architecture-hero-copy > p.architecture-impact,
.page-home .architecture-hero .architecture-impact {
  max-width: 15ch;
  font-family: var(--font-title);
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 4rem);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.02;
  text-transform: uppercase;
}

.page-v3 .architecture-hero-copy > .architecture-text,
.page-home .architecture-hero .architecture-text {
  max-width: 38rem;
  font-family: var(--font-body);
  font-size: clamp(.92rem, .88rem + .2vw, 1.05rem);
  font-weight: 400;
  line-height: 1.6;
  text-transform: none;
}

/* Os polos são conteúdo aberto sobre o fundo cinza, não um card. */
.page-projects .project-locations {
  display: grid;
  width: min(100%, 62rem);
  margin: clamp(2rem, 5vw, 4rem) auto;
  gap: 1.35rem;
  color: var(--visual-black);
  text-align: center;
}

.page-projects .project-locations p {
  margin: 0;
  color: var(--visual-black);
  font-family: var(--font-body);
  font-size: clamp(.92rem, .88rem + .2vw, 1.05rem);
  line-height: 1.55;
}

.page-projects .project-locations strong {
  display: inline-block;
  margin-bottom: .2rem;
  font-weight: 700;
}

.page-projects .project-locations a {
  color: var(--visual-black);
  text-decoration-thickness: .1em;
  text-underline-offset: .18em;
}

.page-projects .project-locations a:hover,
.page-projects .project-locations a:focus-visible {
  color: var(--visual-blue);
}
