/* =========================================================================
   Camada 3: seções.
   A arquitetura é a do site no ar, na ordem publicada. Cada seção resolve
   inteira em 1366 x 768.
   ========================================================================= */

.secao {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--superficie); color: var(--texto);
  /* --topo é a linha em que todo cabeçalho de seção pousa. */
  --topo: clamp(2.25rem, 5.5vh, 4rem);
  padding-block: var(--topo) clamp(3rem, 7vh, 5.5rem);
}
.secao > .leito, .secao > .portas { position: relative; z-index: 2; }
/* A costura de fio dourado saiu em 16/09. Ela disparava por adjacência de
   `data-base` e acertava 3 das 7 junções — as seções sem `data-base` (portas,
   faixa, chamada final) nunca a recebiam. O resultado era junção costurada e
   junção seca em ordem aleatória, que foi exatamente o que o Marcos leu como
   "parece colado, não foi personalizado".
   No lugar dela vale a regra: a junção nasce do que está dos dois lados.
   cor → cor é corte seco; cor → foto full-bleed, a foto sangra para dentro
   da cor; foto → cor, a cor sobe por baixo da foto. */

/* O grão vive aqui: no campo de cor, atrás de tudo. Nunca sobre a foto. */
.secao[data-base]::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url(../img/grao.png); background-size: 300px;
  opacity: .5; mix-blend-mode: overlay;
}
.secao--cena { min-height: 100svh; display: grid; align-content: center; }
/* As portas são full-bleed e fecham a seção: nada de respiro embaixo. */


/* Cabeçalho de seção: sobrelinha, título, uma frase de apoio. Tudo na mesma
   coluna e no mesmo alinhamento — o apoio solto na direita era o que
   quebrava a harmonia. */
.cabeca { display: grid; gap: .7rem; max-width: 46ch; margin-bottom: clamp(1.25rem, 3.5vh, 2.5rem); }
.cabeca .lead { max-width: 62ch; }
.cabeca--centro { margin-inline: auto; text-align: center; justify-items: center; }
/* Versão enxuta: título menor e apoio colado, para sobrar tela para a foto. */
.cabeca--enxuta { gap: .45rem; margin-bottom: clamp(1rem, 2.2vh, 1.5rem); max-width: 60ch; }
.cabeca--centro .marcador::after { display: none; }

/* =========================== 1. HERO ==================================== */
/* A oclusão morreu em 16/09. Ela cortava o título com uma segunda cópia da
   foto recortada na crista da cobertura, e produzia duas composições
   diferentes: recorte no desktop, nenhum recorte no retrato. O Marcos viu
   isso como "às vezes cortado, às vezes assim" — e era isso mesmo.
   O que fica é o que ele descreveu: o texto permanece na tela, sobe conforme
   a página rola, e a foto amplia. Uma composição só, em toda largura.
   Empilhamento: foto 0 · véu 1 · título 2 · ação 4. */
.hero { position: relative; height: 130vh; background: var(--breu); }
.hero__palco { position: sticky; top: 0; height: 100svh; overflow: clip; }

.hero__foto { position: absolute; inset: -7% 0; will-change: transform; z-index: 0; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Sem a camada de recorte, o contraste do título vem todo daqui — e vem igual
   no desktop e no retrato, que antes tinham véus diferentes. */
.hero__veu {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1,6,14,.68) 0%, rgba(1,6,14,.34) 30%, transparent 52%),
    linear-gradient(0deg, rgba(1,6,14,.66) 0%, transparent 38%),
    radial-gradient(76% 58% at 50% 44%, transparent 30%, rgba(1,6,14,.5) 100%);
}

/* Tudo se apoia na vertical que atravessa o sol e o centro do anel. */
.hero__camada {
  position: absolute; inset: 0;
  display: grid; justify-items: center; text-align: center;
  pointer-events: none;
}
.hero__camada > * { pointer-events: auto; }

/* O título ganhou corpo: sem a oclusão para dar drama, o peso tem de vir do
   tamanho. A primeira linha subiu de 2.2rem para 3rem e a segunda de 6rem
   para 7.6rem, e o bloco subiu na tela para caber as duas com folga. */
.hero__titulo {
  z-index: 2; align-content: center; padding-bottom: clamp(3rem, 9vh, 6rem);
  display: grid; gap: .15rem;
}
.hero__titulo .um {
  font-size: clamp(1.35rem, 3vw, 3rem); color: var(--v-100);
  text-shadow: 0 2px 26px rgba(1,6,14,.75);
}
.hero__titulo .dois {
  font-size: clamp(2.9rem, 7.6vw, 7.6rem); color: var(--amarelo); line-height: .92;
  text-shadow: 0 4px 40px rgba(1,6,14,.6);
}
/* A frase e uma so, mas quebra em lugares diferentes conforme a tela. Na
   larga ela cabe inteira numa linha e ganha presenca pela largura; na estreita
   partir em "O Maracana," / "voce vive." libera o dobro de corpo, porque cada
   metade passa a disputar sozinha a largura da tela. Sem isso o titulo ficava
   pequeno no celular so para caber inteiro. */
@media (min-width: 761px) {
  .hero__titulo .dois .linha { display: inline-block; vertical-align: top; }
}

/* A ação desce para o rodapé do hero: CTA ancorado na base, e nada mais além
   da dica de rolagem. A régua saiu — era um fio no meio do caminho. */
.hero__acao {
  /* O botao e a dica de rolagem dividem a MESMA linha de base. Eles estavam
     em alturas diferentes (93px contra 59px), e era esse desencontro que o
     olho lia como torto: dois elementos soltos no rodape, nenhum deles
     alinhado com o outro. */
  z-index: 4; align-content: end;
  --pe-hero: clamp(2.25rem, 6vh, 4rem);
  padding-bottom: var(--pe-hero);
  display: grid; justify-items: center;
}
.hero__linha-acao { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }

/* Dica de rolagem. Passou por três versões: fio de 1px (não dizia nada), seta
   num anel amarelo (virou uma segunda ação disputando com o CTA), e esta.
   A regra que saiu daí e vale para a página inteira:
     ação primária  = seta em recipiente CHEIO, amarelo. Uma por tela.
     controle       = seta em recipiente VAZADO, neutro.
     indicação      = seta SEM recipiente, neutra, fora do eixo do CTA.
   Esta é indicação: não é clicável, então não pode ter recipiente nem a cor
   que a página reservou para comprar. Sai do centro e desce para a calha. */
.hero__rolagem {
  position: absolute; left: var(--calha); bottom: var(--pe-hero);
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  color: var(--v-60); font-size: 1.05rem; line-height: 1;
  animation: respiro 2.4s ease-in-out infinite;
}
/* Um fio curto acima da seta: dá direção sem virar objeto. */
.hero__rolagem::before {
  content: ''; width: 1px; height: 2.25rem;
  background: linear-gradient(180deg, transparent, var(--v-40));
}
.hero__rolagem span { transform: translateY(.1rem); }
@keyframes respiro {
  0%, 100% { transform: translateY(0);     opacity: .55; }
  50%      { transform: translateY(.4rem); opacity: .95; }
}
@media (prefers-reduced-motion: reduce) { .hero__rolagem { animation: none; } }

@media (max-width: 760px) {
  /* O retrato agora é a mesma composição, só mais curta: mesmo véu, mesmo
     empilhamento, CTA no mesmo rodapé. */
  .hero { height: 125vh; }
  .hero__titulo { padding-bottom: clamp(2rem, 7vh, 4rem); gap: .35rem; }
  /* Escala propria do retrato: o titulo passa a ser medido pela largura da
     tela, nao pelo piso do clamp do desktop. Em 390px sai de 46px para 51px
     com duas linhas, que e o dobro de presenca em area. */
  /* A frase passa a ser medida pela largura da tela. Com duas linhas sobrou
     muito campo livre no retrato, e o titulo continuava no corpo de antes: a
     composicao nao acompanhava o espaco que ela mesma abriu. A linha longa
     ("O Maracana,") agora encosta na calha dos dois lados. */
  .hero__titulo .um { font-size: clamp(1.15rem, 5.4vw, 2rem); }
  .hero__titulo .dois { font-size: clamp(3.4rem, 16.5vw, 6rem); line-height: .86; }
  .hero__titulo { padding-inline: var(--calha); }
  .hero__linha-acao { flex-direction: column; gap: var(--e2); }
}

/* =================== 2. AS DUAS PORTAS ================================== */
/* O cabeçalho vive DENTRO da mesma grade das portas, ocupando as duas colunas,
   com o mesmo recuo lateral do bloco da esquerda e sobre o mesmo campo de cor.
   Antes ele era uma tarja separada por cima e não parecia pertencer à seção. */
.experiencias { padding: 0; background: var(--breu); --topo: clamp(2.25rem, 5.5vh, 4rem); }
.portas { display: grid; grid-template-columns: 1fr 1fr; }
.portas__cabeca {
  grid-column: 1 / -1; display: grid; gap: .6rem;
  padding: var(--topo) var(--calha) clamp(1.25rem, 3vh, 2rem);
}
.porta {
  position: relative; display: grid; grid-template-rows: minmax(40svh, 1fr) auto;
  min-height: 74svh; overflow: clip; isolation: isolate;
}
.porta__fundo { position: absolute; inset: 0; z-index: -1; }
.porta__fundo img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.5s var(--mola); }
.porta:hover .porta__fundo img, .porta:focus-within .porta__fundo img { scale: 1.06; }
.porta__bloco {
  grid-row: 2; display: grid; gap: .7rem; align-content: start; background: var(--tom);
  padding: clamp(1.1rem, 2.2vh, 1.6rem) var(--calha) clamp(3.5rem, 6vh, 4.25rem);
}
/* O bloco da direita recua pela borda externa, e não pela calha da página. */
.porta--experience .porta__bloco { padding-inline: clamp(1.25rem, 2.6vw, 2.25rem) var(--calha); }
.porta--tour { --tom: var(--tom-tour); --acento: var(--amarelo); }
.porta--experience {
  --tom: var(--amarelo); --acento: var(--azul);
  --texto: var(--tinta); --texto-calmo: rgba(6,16,31,.82);
  --texto-tenue: rgba(6,16,31,.72); --fio: rgba(6,16,31,.32);
}
.porta--experience .porta__bloco { color: var(--tinta); }
.porta--experience .botao { --cor-fundo: var(--azul); --cor-texto: #fff; }
.porta__titulo { font-size: clamp(1.7rem, 2.9vw, 2.7rem); }
/* O rótulo do preço usava a entreletra de .4em do rótulo de seção e ficava
   largo demais para o espaço, roubando a composição do bloco. Aqui ele é
   informação de apoio, não voz de marca: entreletra curta e corpo menor. */
.porta__preco { display: flex; align-items: baseline; gap: .55rem; }
.porta__preco .rotulo {
  font-family: var(--face-corpo); font-weight: 600; letter-spacing: .06em;
  font-size: .68rem; text-transform: uppercase;
}
/* O cartão inteiro é clicável. Não dá para esticar o proprio botao: ele e
   `position: relative` com `overflow: clip`, entao o ::after dele fica preso
   dentro da pilula. A sobreposicao e um link proprio, invisivel, fora da
   ordem de tabulacao e escondido de leitor de tela — quem navega por teclado
   ou leitor usa o botao de verdade, que continua sendo o unico link anunciado. */
.porta__alvo { position: absolute; inset: 0; z-index: 5; }
/* O botao real fica acima da sobreposicao para manter hover e foco proprios. */
.porta__bloco .botao { position: relative; z-index: 6; }
.porta__preco b { font-family: var(--face-display); font-weight: 800; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1; }
@media (max-width: 860px) {
  .portas { grid-template-columns: 1fr; }
  .porta { min-height: 62svh; grid-template-rows: minmax(22svh, 1fr) auto; }
  .porta__bloco, .porta--experience .porta__bloco { padding-inline: var(--calha); }
  /* Os dois blocos tem de terminar igual. Duas coisas quebravam isso: o ultimo
     cartao ganhava um respiro extra embaixo (sobra de quando ele fechava a
     pagina), e as descricoes tem numero de linhas diferente. O respiro extra
     saiu, e a descricao passa a reservar tres linhas nos dois, que e o maior
     dos dois casos. Nenhum texto se perde: o espaco e reservado, nao cortado. */
  .porta__bloco { padding-bottom: clamp(1.75rem, 5.5vw, 2.5rem); }
  .porta__bloco .corpo { min-height: calc(3 * 1.55em); }
}

/* =============== 3. PILARES — split assimétrico ========================= */
/* Refeito em 16/09. A foto deixou de ser um objeto redondo flutuando sobre
   um campo de anéis e passou a ser metade da seção, sangrando em três bordas.
   O papel de estrutura é do corte reto entre foto e painel — por isso não há
   grafismo aqui, nem moldura, nem sombra, nem canto arredondado.
   Referência de geometria: BitcoinOS e Dropbox (Mobbin, 16/09). */
/* Meio a meio, igual à seção das duas portas. O 7/5 alinhava em coluna, mas
   ficava desigual ao lado de uma seção simétrica — e harmonia entre seções
   vizinhas ganha de pureza de grade. */
.pilares {
  touch-action: pan-y;
  padding: 0; min-height: 76svh; align-content: stretch;
  display: grid; grid-template-columns: 1fr 1fr;
}
.pilares__foto { position: relative; overflow: clip; background: var(--breu); }
.pilares__foto { --sentido: 1; }
.pilares__foto figure {
  position: absolute; inset: 0;
  animation: entrar-de-lado .75s var(--mola) both;
}
/* A troca era um corte seco: a figura antiga sumia e a nova aparecia no
   lugar. Agora ela entra do lado para onde a passagem foi, que e o que faz o
   gesto de arrastar ter resposta visual. */
@keyframes entrar-de-lado {
  from { opacity: 0; transform: translateX(calc(var(--sentido, 1) * 7%)); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pilares__foto figure { animation: none; }
}
.pilares__foto figure[hidden] { display: none; }
.pilares__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Deriva lenta: a cena respira sem que nada se mexa na tela. */
.pilares__foto img { scale: 1.03; transition: scale 10s linear; }
.pilares__foto.deriva img { scale: 1.1; }
/* Era `align-content: start` com `min-height: 100svh`: o conteúdo terminava no
   meio e sobrava um vazio preto embaixo, sem nada que o justificasse. Agora o
   painel distribui a altura da foto entre cabeçalho, lista e controles — a
   coluna de texto passa a ter a mesma altura da imagem, por construção. */
.pilares__painel {
  display: grid; align-content: space-between; gap: var(--e3);
  padding: var(--topo) var(--calha) var(--topo) clamp(1.5rem, 3.5vw, 3rem);
  background: var(--breu);
}
.pilares__controles { padding-top: var(--e2); }
/* O título cabia em três linhas curtas e parecia grande demais para o espaço.
   Com a coluna em metade da seção, ele cabe em duas e volta à escala dos
   outros títulos de seção. */
.pilares__painel .cabeca { margin-bottom: 0; max-width: 30ch; }
.pilares__painel .cabeca h2 { font-size: clamp(1.9rem, 3.1vw, 2.9rem); }
.pilares__painel .marcador::after { display: none; }
.pilares__lista { display: grid; }
/* Item inativo cai por cor, não por tamanho: a lista continua escaneável. */
.pilar {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .8rem;
  text-align: left; cursor: pointer; padding: .8rem 0;
  border-top: 1px solid var(--v-10); color: var(--v-40);
  transition: color .45s;
}
.pilar:last-child { border-bottom: 1px solid var(--v-10); }
.pilar:hover { color: var(--v-60); }
.pilar[aria-current="true"] { color: var(--v-100); }
/* Número pequeno e neutro: quando a foto é a estrela, ele não compete. */
.pilar__n { grid-row: 1; font-family: var(--face-display); font-weight: 400; font-size: .8rem; letter-spacing: .2em; padding-top: .3em; }
.pilar h3 { grid-row: 1; grid-column: 2; font-family: var(--face-display); font-weight: 700; font-size: clamp(1.2rem, 1.8vw, 1.6rem); text-transform: uppercase; line-height: 1; }
.pilar p { grid-row: 2; grid-column: 2; font-size: var(--t-corpo); color: currentColor; opacity: .74; }
.pilar[aria-current="true"] h3 { color: var(--amarelo); }


@media (max-width: 960px) {
  .pilares { grid-template-columns: 1fr; }
  .pilares__foto { min-height: 46svh; }
  .pilares__painel { padding: var(--e4) var(--calha); }
}

/* =================== 4. ADICIONAIS ====================================== */
.adicionais { padding-block: var(--topo) clamp(4.5rem, 8vh, 5.5rem); }
.adicionais .campo-camada { opacity: .75; }
/* No celular o campo de elipses e desenhado num quadro muito mais estreito, e
   as linhas caiam abaixo do limiar de percepcao: o fundo lia como liso. Aqui
   ele ganha peso e um pouco de escala, que e o pedido do cliente de "textura
   pra nao ficar um fundo liso". */
@media (max-width: 860px) { .campo-camada, .adicionais .campo-camada { opacity: 1; } }
.trilho { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); }
@media (max-width: 860px) {
  /* O trilho vai de ponta a ponta da tela. Antes ele nascia dentro do leito e
     morria na calha, e o cartao seguinte aparecia cortado por uma borda
     invisivel em vez de sair pela lateral — lia como defeito, nao como
     "tem mais coisa aqui".
     A sangria e feita desfazendo a calha do leito com margem negativa, e
     devolvendo o recuo por dentro: `scroll-padding-inline` alinha o encaixe
     na mesma coluna dos titulos, e o `::after` garante respiro depois do
     ultimo cartao, que `padding-inline-end` sozinho nao da em trilho que
     rola. */
  .adicionais .leito { padding-inline: 0; }
  .adicionais .cabeca, .adicionais .controles { padding-inline: var(--calha); }
  .trilho { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none;
            overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
            padding-bottom: var(--e2); padding-inline-start: var(--calha);
            scroll-padding-inline-start: var(--calha);
            overscroll-behavior-x: contain; }
  .trilho > * { scroll-snap-align: start; }
  .trilho::after { content: ''; width: var(--calha); }
  .trilho::-webkit-scrollbar { display: none; }
}

/* =================== 5. FAIXA DE MARCA ================================== */
/* Era `align-items: start` com `min-height`: a caixa ficava mais alta que o
   texto e toda a sobra caía embaixo. Não era padding — o padding até tinha
   MAIS espaço em cima (81px contra 61px em 1366x768). Agora centraliza e o
   padding é simétrico, e a regra vale para toda faixa de foto full-bleed com
   texto por cima, o que inclui a chamada final.
   Faixa e chamada final são as duas peças de "voz da marca": foto inteira,
   texto centralizado. O conteúdo que prova produto fica na calha. */
.faixa {
  position: relative; min-height: 44svh; display: grid; align-items: center;
  text-align: center; overflow: clip;
  --topo: clamp(2.5rem, 6vh, 4rem);
  padding-block: var(--topo);
}
/* O título estava pequeno para a escala da faixa e a seção alta demais: o
   corpo cresceu e a caixa encolheu, que é o que traz a harmonia de volta.
   A última linha vai no amarelo da marca — é o fecho da frase. */
.faixa h2 { font-size: clamp(2.1rem, 5vw, 4.6rem); line-height: .95; }
.faixa .acento { color: var(--amarelo); }
.faixa__foto { position: absolute; inset: 0; z-index: 0; }
.faixa__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Com o texto no centro, o escurecimento deixa de ser lateral e vira radial:
   o gradiente de 90deg existia para proteger texto encostado na esquerda. */
.faixa__foto::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 62% at 50% 50%, rgba(1,6,14,.42), rgba(1,6,14,.88) 96%);
}
.faixa .leito { position: relative; z-index: 2; }
.faixa h2 { max-width: 20ch; margin-inline: auto; }

/* =================== 6. DEPOIMENTOS ===================================== */
/* O amarelo toma a tela, a foto vira trama de impresso e a avaliação ganha
   cara de avaliação: aspa como artwork, fio e assinatura com monograma. */
/* `align-items: start` deixava a coluna de texto terminar no meio da altura da
   foto, e sobrava um bloco de amarelo morto embaixo dela. As duas colunas
   agora esticam e a de texto distribui o conteúdo: o rodapé dela (passagem e
   link do Google) pousa na mesma linha do pé da foto. */
.vozes__grade {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1.5rem,4vw,4rem); align-items: stretch;
}
.vozes__grade > .revelar:first-child { display: grid; align-content: space-between; }
/* Trama fina sobre o campo de cor: o mesmo vocabulário do meio-tom da foto. */
.vozes::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(6,16,31,.14) 1px, transparent 1.5px);
  background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(120% 90% at 8% 0%, #000 10%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 8% 0%, #000 10%, transparent 72%);
}

.vozes__palco { position: relative; display: grid; --sentido: 1; touch-action: pan-y; }
.voz {
  grid-area: 1 / 1; display: grid; gap: var(--e2); align-content: start;
  opacity: 0; translate: calc(var(--sentido, 1) * 2.5rem) 0; visibility: hidden;
  transition: opacity .5s var(--seco), translate .6s var(--mola), visibility .5s;
}
.voz[aria-current="true"] { opacity: 1; translate: 0 0; visibility: visible; }

/* A aspa gráfica saiu em 16/09. Ela era um `content: 'C'` herdado de um teste
   e, em vez de uma aspa, desenhava a letra atrás do texto: lia como defeito.
   A avaliação se sustenta pelo próprio texto e pelas aspas da citação. */
.voz blockquote {
  position: relative; padding-top: .25rem;
  font-family: var(--face-display); font-weight: 700;
  font-size: clamp(1.3rem, 2.3vw, 2.1rem); line-height: 1.08;
  text-transform: uppercase; text-wrap: balance;
}
.voz figcaption { display: flex; align-items: center; gap: .7rem; padding-top: var(--e2); border-top: 1px solid var(--fio); }
/* O avatar com a inicial também saiu. Não há foto de quem avaliou, e um
   círculo com uma letra é a marca visual de que a foto está faltando: chama
   atenção para a ausência em vez de resolvê-la. A assinatura fica só com o
   nome e a procedência. */
.voz__quem { display: grid; gap: .1rem; }
.voz__quem b { font-family: var(--face-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; }
.voz cite { font-style: normal; }

/* O `max-height: 60svh` limitava o quadrado e deixava uma faixa de amarelo
   sobrando à direita da coluna — o olho lê isso como desalinhado, não como
   respiro. A foto agora ocupa a coluna inteira. */
.vozes .foto { aspect-ratio: 1 / 1; background: var(--amarelo); }
.vozes .foto img { mix-blend-mode: multiply; }
.vozes .foto::after {
  content: ''; position: absolute; inset: 0; mix-blend-mode: screen; opacity: .3;
  background-image: radial-gradient(var(--amarelo) 1px, transparent 1.6px);
  background-size: 6px 6px;
}
@media (max-width: 860px) { .vozes__grade { grid-template-columns: 1fr; } .vozes .foto { aspect-ratio: 3 / 2; } }

/* =================== 7. PLANEJE ========================================= */
/* Depois de cinco telas escuras, o creme é o respiro e o maior contraste. */

.planeje__grade { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.5rem,3vw,3rem); align-items: start; }
.planeje__mapa { aspect-ratio: 4 / 3; background: #ddd9cc; overflow: clip; }
.planeje__mapa iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.04); }
.dados { display: grid; gap: var(--e3); }
.dados > div { display: grid; gap: .25rem; padding-top: var(--e2); border-top: 1px solid var(--fio); }
.dados dt { font-family: var(--face-display); font-weight: 700; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; }
.dados dd { font-size: var(--t-corpo); color: var(--texto-calmo); }
@media (max-width: 860px) { .planeje__grade { grid-template-columns: 1fr; } }

/* =================== 8. CHAMADA FINAL =================================== */
/* Era 92svh com o texto branco sobre a foto quase limpa no centro: seção
   grande demais e contraste fraco. A imagem fica (decisão do Marcos), mas a
   caixa encolhe para a altura da faixa de marca — as duas peças de voz agora
   se comportam igual — e o véu fecha bastante mais no miolo. */
.final { min-height: 46svh; display: grid; align-items: center; text-align: center; overflow: clip; }
.final__foto { position: absolute; inset: 0; z-index: 0; }
.final__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.final__foto::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 62% at 50% 50%, rgba(1,6,14,.62), rgba(1,6,14,.93) 96%); }
.final__miolo { position: relative; z-index: 2; display: grid; gap: var(--e3); justify-items: center; }

/* =================== RODAPÉ ============================================= */
.rodape { background: var(--breu); padding-block: var(--e5) var(--e3); position: relative; z-index: 2; }
.rodape__grade { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr)); gap: var(--e4) var(--e3); }
.rodape h4 { font-family: var(--face-display); font-weight: 600; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: var(--v-40); margin-bottom: var(--e2); }
.rodape li + li { margin-top: .45rem; }
.rodape a:hover { color: var(--amarelo); }
.rodape__base { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); justify-content: space-between; margin-top: var(--e5); padding-top: var(--e2); border-top: 1px solid var(--v-10); }
@media (max-width: 860px) { .rodape__grade { grid-template-columns: 1fr 1fr; } }

/* ============ PÁGINA DE PRODUTO ========================================= */
.produto { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(1.5rem,3vw,4rem); align-items: start; }
.compra {
  position: sticky; top: var(--e3); display: grid; gap: .8rem;
  padding: var(--e3); background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--v-20); backdrop-filter: blur(10px);
}
.compra__preco { display: flex; align-items: baseline; gap: .4rem; }
.compra__preco b { font-family: var(--face-display); font-weight: 800; font-size: 2.4rem; line-height: 1; }
.compra__linha { display: flex; justify-content: space-between; gap: var(--e2); padding-block: .5rem; border-top: 1px solid var(--v-10); font-size: var(--t-nano); }
.compra label { display: block; }
.compra input, .compra select {
  width: 100%; padding: .75rem .85rem; font: inherit; color: var(--texto);
  background: rgba(255,255,255,.07); border: 1px solid var(--v-20);
}
.roteiro { display: grid; counter-reset: passo; }
.roteiro li {
  counter-increment: passo; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: var(--e2);
  align-items: center; padding: var(--e2) 0; border-top: 1px solid var(--fio);
}
.roteiro li::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--face-display); font-weight: 700; font-size: 1.4rem; color: var(--acento); line-height: 1;
}
.roteiro h3 { font-family: var(--face-display); font-weight: 700; font-size: 1.2rem; text-transform: uppercase; line-height: 1.05; }
.roteiro .foto { width: 108px; aspect-ratio: 3/2; }
.perguntas details { border-top: 1px solid var(--fio); }
.perguntas summary {
  display: flex; justify-content: space-between; gap: var(--e2); align-items: center;
  padding: var(--e2) 0; cursor: pointer; list-style: none;
  font-family: var(--face-display); font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: '+'; font-size: 1.3rem; line-height: 1; color: var(--acento); }
.perguntas details[open] summary::after { content: '–'; }
.perguntas p { padding-bottom: var(--e2); color: var(--texto-calmo); max-width: 62ch; }
@media (max-width: 1000px) {
  .produto { grid-template-columns: 1fr; }
  .compra { position: static; }
  .roteiro li { grid-template-columns: auto minmax(0,1fr); }
  .roteiro .foto { display: none; }
}

.mosaico { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0,1fr)); gap: 5px; aspect-ratio: 16/7; }
.mosaico > *:first-child { grid-row: span 2; }
.mosaico .foto { width: 100%; height: 100%; cursor: zoom-in; }
@media (max-width: 700px) { .mosaico { grid-template-columns: 1fr 1fr; aspect-ratio: 4/3; } .mosaico > *:first-child { grid-column: span 2; grid-row: auto; } }