/* Maré Mansa — o site depois do tour.
 *
 * A GRAMÁTICA
 * -----------
 * Vem da direção PLANOS do site da Angular Partners, traduzida para a
 * identidade do Maré Mansa (serifada fina, mono nos rótulos, verde-mar,
 * areia e dourado). Cinco leis:
 *
 *   1. A imagem ocupa a tela e é o assunto, não o fundo.
 *   2. A informação pousa NAS MARGENS, nunca no meio e nunca em caixa.
 *   3. Dois pontos de ancoragem afastados — âncora à esquerda, conteúdo à
 *      direita — com a imagem respirando entre eles.
 *   4. Nenhuma superfície: o que separa é espaço e filete.
 *   5. O movimento é revelação. Nada entra de lugar nenhum.
 *
 * Entre os planos escuros entram seções EDITORIAIS em areia clara — o
 * respiro que o site da Angular dá com o manifesto e as soluções. É onde
 * cabe o conteúdo denso (as plantas), com a foto em moldura deslocada.
 *
 * O CORTE
 * -------
 * Um plano não é empurrado pelo seguinte: fica preso, escurece e recua 3%
 * enquanto o próximo sobe por cima. site.js publica em --saida (0 a 1) o
 * quanto o próximo já cobriu; o resto é calc() aqui. O mesmo gesto vale
 * para a passagem do tour ao site: o último frame recua e escurece
 * (--saida-tour, em :root) enquanto o primeiro plano sobe.
 */

:root{
  --veu:6,20,18;                       /* o verde mais fundo, em rgb, para os véus */
  --filete:rgba(232,221,201,.26);
  --areia-clara:#F2ECE0;               /* fundo das seções editoriais */
  --tinta:#0E2E2A;                     /* texto sobre areia */
  --tinta-fraca:#4D5E59;
  --filete-areia:rgba(14,46,42,.16);
  --dourado-escuro:#8C701C;            /* o dourado que passa em contraste sobre areia */
  --ease:cubic-bezier(.16,1,.3,1);
  --margem:clamp(1.5rem,3.2vw,3.5rem);
}

/* Margem única: o conteúdo encosta nos cantos, como no hero. */
.margem{width:100%;padding-inline:var(--margem)}

/* ══ A PASSAGEM DO TOUR AO SITE ═════════════════════
   O palco (canvas fixo) é o plano que sai: recua e escurece conforme o
   site sobe por cima. As legendas e o elevador vão junto. */
#palco{transform:scale(calc(1 - var(--saida-tour,0) * .03));transform-origin:50% 50%}
#palco::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--mar);opacity:calc(var(--saida-tour,0) * .82);
}
#legendas,#elevador,#progresso{opacity:calc(1 - var(--saida-tour,0) * 2.2)}
#selo{opacity:calc(.5 - var(--saida-tour,0) * 1.2)}

/* ══ BARRA DO SITE ══════════════════════════════════
   Fixa, discreta, só existe depois do tour. Um nome e dois botões. */
#barra{
  position:fixed;inset:0 0 auto 0;z-index:7;
  padding-block:clamp(1.1rem,2.2vw,1.8rem);
  opacity:calc(var(--saida-tour,0) * 1.6 - .6);
  pointer-events:none;
}
#barra.visivel{pointer-events:auto}
#barra .margem{display:flex;align-items:center;justify-content:space-between;gap:1rem}
#barra .marca{
  font-family:var(--titulo);font-weight:300;font-size:clamp(1.15rem,1.5vw,1.45rem);
  letter-spacing:.1em;color:var(--branco);transition:color .5s;
}
#barra .acoes{display:flex;align-items:center;gap:clamp(.5rem,1.2vw,.9rem)}
.btn-linha{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.68rem 1.05rem;border:1px solid rgba(232,221,201,.32);
  background:rgba(6,20,18,.32);color:var(--areia);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;
  transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease);
}
.btn-linha:hover{background:var(--areia);border-color:var(--areia);color:var(--mar)}
.btn-linha .traco{display:block;width:14px;height:1px;background:currentColor}
/* Sobre as seções claras a barra inverte, como o site da Angular troca a
   logo quando o manifesto passa por baixo dela. */
#barra.sobre-claro .marca{color:var(--tinta)}
#barra.sobre-claro .btn-linha{border-color:rgba(14,46,42,.32);background:rgba(242,236,224,.5);color:var(--tinta)}
#barra.sobre-claro .btn-linha:hover{background:var(--tinta);border-color:var(--tinta);color:var(--areia-clara)}
@media (max-width:600px){#barra .btn-linha .longo{display:none}}

/* ══ O PLANO ════════════════════════════════════════ */
.plano{
  position:sticky;top:0;height:100dvh;overflow:hidden;z-index:1;
  display:grid;align-content:end;color:var(--areia);
  --saida:0;
}
.plano__media{
  position:absolute;inset:0;z-index:0;background:var(--mar);
  transform:scale(calc(1 - var(--saida) * .03));transition:transform .1s linear;
  /* camada própria: a escala do corte muda a cada quadro, e sem isto o
     navegador rasterizava a imagem inteira de novo a cada mudança */
  will-change:transform;
}
.plano__media img{width:100%;height:100%;object-fit:cover;display:block}
/* cenas empilhadas, para os planos que trocam de imagem */
.plano__media .cena{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.plano__media .cena.ativa{opacity:1}
/* O véu: uma diagonal que desce para a esquerda, preservando o lado de onde
   vem a luz; um apoio no topo para a barra; e um apoio na base, regulado
   por plano, para o texto da direita não cair na parte clara. */
.plano__veu{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top right,rgba(var(--veu),.94) 0%,rgba(var(--veu),.72) 26%,rgba(var(--veu),.2) 58%,rgba(var(--veu),.08) 100%),
    linear-gradient(to bottom,rgba(var(--veu),.58) 0%,rgba(var(--veu),0) 26%),
    linear-gradient(to top,rgba(var(--veu),var(--base-1,.88)) 0%,rgba(var(--veu),var(--base-2,.58)) 17%,rgba(var(--veu),var(--base-3,.16)) 34%,rgba(var(--veu),0) 46%);
}
/* O que faz o corte: o plano que sai escurece até quase fechar. */
.plano__saida{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--mar);opacity:calc(var(--saida) * .82);
}
.plano__faixa{
  position:relative;z-index:3;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,5vw,5.5rem);align-items:end;
  padding-bottom:clamp(2.75rem,5vw,4.5rem);
}
.ancora{display:grid;justify-items:start;gap:clamp(.9rem,1.8vw,1.4rem)}
.ancora .olho{margin:0}
.conteudo{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media (max-width:1000px){
  .plano__faixa{grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,4vw,2.5rem)}
}

/* ══ TIPOGRAFIA DOS PLANOS ══════════════════════════ */
.p-titulo{
  font-family:var(--titulo);font-weight:300;
  font-size:clamp(2.2rem,4.4vw,4rem);line-height:1.02;letter-spacing:.005em;
  color:var(--branco);max-width:min(16ch,100%);margin:0;text-wrap:balance;
}
.p-lead{font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.6;color:var(--areia);max-width:min(44ch,100%);margin:0}
.p-nota{font-size:.875rem;line-height:1.6;color:var(--areia-fraca);max-width:min(50ch,100%);margin:0}

/* ---------- Colunas: o conteúdo denso sem nenhuma caixa ----------
   Filete em cima, espaço entre. O filete cresce da esquerda quando o
   plano entra, escalonado por --filete-delay. */
.colunas{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:clamp(1.1rem,2.2vw,2.25rem)}
.coluna{display:grid;gap:.45rem;align-content:start;padding-top:.95rem;position:relative}
.coluna::before,.regua li::before{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;background:var(--filete);
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease);transition-delay:var(--filete-delay,0ms);
}
.is-in .coluna::before,.is-in .regua li::before{transform:scaleX(1)}
.coluna__k{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dourado)}
.coluna__t{font-family:var(--titulo);font-weight:300;font-size:clamp(1.3rem,1.7vw,1.7rem);line-height:1.15;color:var(--branco)}
.coluna__d{font-size:.84rem;line-height:1.55;color:var(--areia-fraca)}
@media (max-width:1000px){.colunas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.colunas{grid-template-columns:minmax(0,1fr);gap:.9rem}}

/* ---------- Itens que trocam a imagem do plano ---------- */
.itens{display:grid;gap:.15rem;margin:.2rem 0 0;padding:0;list-style:none}
.item{
  display:flex;align-items:center;background:none;border:0;padding:.3rem 0;
  font:inherit;font-size:.95rem;color:var(--areia-fraca);text-align:left;cursor:pointer;
  transition:color .4s var(--ease);
}
.item::before{
  content:'';display:block;width:0;height:1px;margin-right:0;background:var(--dourado);
  transition:width .5s var(--ease),margin-right .5s var(--ease);
}
.item:hover,.item:focus-visible{color:var(--branco);outline:none}
.item[aria-pressed="true"]{color:var(--branco)}
.item[aria-pressed="true"]::before{width:16px;margin-right:.6rem}
/* a linha que cresce sob o ambiente ativo enquanto as imagens passam
   sozinhas: diz que vai mudar, e quando */
.item{position:relative}
.item::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--dourado);opacity:0;transform:scaleX(0);transform-origin:left;
}
.plano.gira .item[aria-pressed="true"]::after{opacity:.75;animation:avanca 4.5s linear forwards}
@keyframes avanca{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.plano.gira .item[aria-pressed="true"]::after{animation:none;opacity:0}}

/* A legenda da cena ativa, dentro da âncora: nível, nome e uma linha. */
.cena-legenda{
  display:grid;gap:.3rem;padding-top:.9rem;position:relative;
  max-width:min(44ch,100%);min-height:5.4rem;margin:0;
}
.cena-legenda::before{
  content:'';position:absolute;inset:0 0 auto 0;height:1px;background:var(--dourado);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .3s;
}
.is-in .cena-legenda::before{transform:scaleX(1)}
.cena-legenda i{font-style:normal;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dourado)}
.cena-legenda b{font-family:var(--titulo);font-weight:300;font-size:1.6rem;line-height:1.1;color:var(--branco)}
.cena-legenda span{font-size:.875rem;line-height:1.5;color:var(--areia-fraca)}

/* ---------- Régua: valores curtos em linha ---------- */
.regua{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,2rem);list-style:none;margin:0;padding:0}
.regua li{position:relative;padding-top:.9rem;display:grid;gap:.3rem}
.regua b{
  font-family:var(--titulo);font-weight:300;font-size:clamp(1.6rem,2.3vw,2.2rem);
  line-height:1;color:var(--branco);font-variant-numeric:tabular-nums;
}
.regua span{font-size:.82rem;line-height:1.4;color:var(--areia-fraca)}
@media (max-width:700px){.regua{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Dados soltos sobre a imagem: a assinatura do hero ---------- */
.dados{display:grid;gap:clamp(1.25rem,2.2vw,2rem)}
.dado{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start}
.dado__marca{display:block;width:18px;height:1px;background:var(--dourado);margin-top:1rem}
.dado__valor{
  display:block;font-family:var(--titulo);font-weight:300;
  font-size:clamp(1.9rem,2.5vw,2.5rem);line-height:1;color:var(--branco);
  font-variant-numeric:tabular-nums;
}
.dado__label{
  display:block;margin-top:.45rem;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--areia-fraca);
}

/* ---------- Botões ---------- */
.botao{
  display:inline-block;padding:.95rem 1.8rem;border:1px solid var(--dourado);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dourado);background:rgba(6,20,18,.18);
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.botao:hover{background:var(--dourado);color:var(--mar)}
.botao:active,.btn-linha:active{transform:translateY(1px)}
/* O ímã: o invólucro é o que se move, para não brigar com a transição de
   entrada do botão. */
.ima{display:inline-block;will-change:transform}

/* ══ ONDE A INFORMAÇÃO POUSA ════════════════════════
   A base é a posição natural, mas planos seguidos pousando embaixo viram
   um só. Modificadores dão altura e lado diferentes sem quebrar a lei. */

/* --alto: âncora na base, conteúdo na meia altura da TELA à direita.
   A disposição do hero. */
.plano--alto{align-content:stretch}
.plano--alto .plano__faixa{align-items:end;padding-top:8rem}
.plano--alto .conteudo{align-self:center;justify-self:end;max-width:23rem}
.plano--alto .plano__veu::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to left,rgba(var(--veu),.62) 0%,rgba(var(--veu),.34) 14%,rgba(var(--veu),.08) 30%,rgba(var(--veu),0) 44%);
}
@media (max-width:1000px){.plano--alto .conteudo{justify-self:stretch;max-width:none}}

/* --meio: o bloco inteiro na meia altura, encostado à esquerda. O apoio
   sobe para a faixa central e some nas pontas. */
.plano--meio{align-content:center;--base-1:.42;--base-2:.18;--base-3:.04}
.plano--meio .plano__faixa{padding-top:8rem;padding-bottom:2rem;align-items:start}
.plano--meio .plano__veu::after,.plano--unico .plano__veu::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(var(--veu),0) 8%,rgba(var(--veu),.5) 28%,rgba(var(--veu),.66) 50%,rgba(var(--veu),.46) 72%,rgba(var(--veu),0) 92%);
}

/* --espelho: os lados trocam, e o véu vira junto. */
.plano--espelho .plano__veu{transform:scaleX(-1)}
.plano--espelho .plano__faixa{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.plano--espelho .ancora{order:2;justify-items:end}
.plano--espelho .conteudo{order:1}
@media (max-width:1000px){
  .plano--espelho .plano__faixa{grid-template-columns:minmax(0,1fr)}
  .plano--espelho .ancora{order:0;justify-items:start}
  .plano--espelho .conteudo{order:1}
}

/* ══ AS PORTAS ══════════════════════════════════════
   Duas metades, cada uma com a sua imagem e o texto na base. Mais baixa que
   a tela, então não é sticky: rola por cima do plano de abertura. */
.portas{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  min-height:clamp(300px,44vh,470px);gap:1px;
  background:var(--filete);border-top:1px solid var(--filete);
}
.porta{position:relative;overflow:hidden;display:grid;align-content:end;color:var(--areia);isolation:isolate}
.porta__media{position:absolute;inset:0;z-index:0;transition:transform 1.4s var(--ease)}
.porta__media img{width:100%;height:100%;object-fit:cover;display:block;background:var(--mar)}
.porta:hover .porta__media{transform:scale(1.045)}
.porta__veu{
  position:absolute;inset:0;z-index:1;transition:opacity .9s var(--ease);
  background:linear-gradient(to top,rgba(var(--veu),.93) 0%,rgba(var(--veu),.66) 26%,rgba(var(--veu),.22) 52%,rgba(var(--veu),.34) 100%);
}
.porta:hover .porta__veu{opacity:.82}
.porta__texto{position:relative;z-index:2;display:grid;justify-items:start;gap:.7rem;padding:clamp(1.75rem,3.5vw,3rem)}
.porta__k{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dourado)}
.porta__nome{font-family:var(--titulo);font-weight:300;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1;color:var(--branco)}
.porta__d{font-size:.95rem;line-height:1.55;color:var(--areia);max-width:min(38ch,100%)}
.porta__cta{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:.35rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dourado);
}
.porta__cta::after{content:'';display:block;width:22px;height:1px;background:currentColor;transition:width .6s var(--ease)}
.porta:hover .porta__cta::after{width:46px}
@media (max-width:860px){
  .portas{grid-template-columns:minmax(0,1fr)}
  .porta{min-height:min(300px,46vh)}
}

/* ══ SEÇÕES EDITORIAIS ══════════════════════════════
   Areia clara, serifada e filete. Depois de telas de imagem, o que falta é
   conteúdo que se leia parado. */
.editorial{
  position:relative;z-index:2;
  background:var(--areia-clara);color:var(--tinta);
  padding-block:clamp(3.5rem,7vw,6rem);
}
.editorial .olho{color:var(--dourado-escuro);margin:0}
.editorial__cabeca{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,5rem);align-items:end;
  padding-bottom:clamp(1.75rem,3.5vw,2.75rem);border-bottom:1px solid var(--filete-areia);
}
.editorial__cabeca h2{
  font-family:var(--titulo);font-weight:300;
  font-size:clamp(2.3rem,4.8vw,4.4rem);line-height:1;color:var(--tinta);
  max-width:16ch;margin:1.2rem 0 0;text-wrap:balance;
}
.editorial__cabeca h2 em{font-style:italic;color:var(--dourado-escuro)}
.editorial__cabeca p{
  font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.6;color:var(--tinta-fraca);
  max-width:44ch;margin:0;
}
@media (max-width:900px){.editorial__cabeca{grid-template-columns:minmax(0,1fr)}}

/* A fila: a foto de um lado, o corpo empilhado do outro — índice, nome, uma
   linha, a ficha de números e os ambientes. As fotos trocam de lado a cada
   fila. Duas colunas, e não três: com três, cada coluna tinha pouco conteúdo
   e a fila virava ar em volta da foto. */
.fila{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(2rem,4.5vw,4.5rem);align-items:center;
  padding-block:clamp(1.75rem,3vw,2.5rem);border-bottom:1px solid var(--filete-areia);
}
.fila:nth-of-type(even){grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.fila:nth-of-type(even) .fila__foto{order:2}
.fila__corpo{display:grid;gap:.85rem;justify-items:start;align-content:center}
.fila__indice{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;color:var(--dourado-escuro)}
.fila__nome{
  font-family:var(--titulo);font-weight:300;
  font-size:clamp(2rem,3.4vw,3.2rem);line-height:1;color:var(--tinta);margin:0;
}
.fila__desc{font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.6;color:var(--tinta);margin:0;max-width:44ch}
/* a ficha: três números em serifada, rótulos em mono */
.fila__ficha{
  display:flex;flex-wrap:wrap;gap:1rem clamp(1.5rem,3.5vw,3.5rem);
  list-style:none;margin:.5rem 0 0;padding:0;
}
.fila__ficha li{display:grid;gap:.3rem}
.fila__ficha b{font-family:var(--titulo);font-weight:300;font-size:clamp(1.5rem,2.1vw,2.1rem);line-height:1;color:var(--tinta);font-variant-numeric:tabular-nums}
.fila__ficha span{font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-fraca)}
.fila__lista{
  display:flex;flex-wrap:wrap;gap:.45rem 1.4rem;margin:.5rem 0 0;padding:1rem 0 0;
  border-top:1px solid var(--filete-areia);list-style:none;font-size:.84rem;color:var(--tinta-fraca);
  width:100%;
}
.fila__lista li::before{content:'';display:inline-block;width:10px;height:1px;background:var(--dourado-escuro);vertical-align:middle;margin-right:.5rem}
@media (max-width:900px){
  .fila,.fila:nth-of-type(even){grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .fila .fila__foto,.fila:nth-of-type(even) .fila__foto{order:0}
}

/* A moldura deslocada: um filete a um passo da foto. */
.moldura{position:relative;margin:0}
.moldura::before{
  content:'';position:absolute;top:-.85rem;left:-.85rem;width:100%;height:100%;
  border:1px solid rgba(14,46,42,.3);pointer-events:none;
}
.moldura img{position:relative;display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--mar)}
.moldura--alta img{aspect-ratio:3/2}
.moldura figcaption{display:flex;align-items:baseline;gap:.75rem;margin-top:.9rem;font-size:.78rem;color:var(--tinta-fraca)}
.moldura figcaption::before{content:'';flex:none;width:1.4rem;height:1px;background:var(--tinta-fraca);transform:translateY(-.3em)}

/* Colunas sobre areia: o mesmo material, nas cores da tinta. */
.editorial .coluna::before{background:var(--filete-areia)}
.editorial .coluna__k{color:var(--dourado-escuro)}
.editorial .coluna__t{color:var(--tinta)}
.editorial .coluna__d{color:var(--tinta-fraca);font-size:.9rem;line-height:1.6}

/* Investimento: foto à esquerda, duas colunas à direita. */
.investe{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;padding-top:clamp(2rem,3.5vw,3rem);
}
.investe .colunas{gap:clamp(1.5rem,3vw,3rem)}
.investe .coluna{gap:.7rem;padding-top:1.2rem}
.investe .fila__lista{font-size:.86rem}

/* ---------- O simulador ----------
   Controles à esquerda, o resultado à direita. Nenhuma caixa: filetes,
   serifada nos números, mono nos rótulos — o mesmo material do resto. */
.simulador{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:start;
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--filete-areia);
}
.simulador__controles{display:grid;gap:1.1rem;justify-items:start}
.simulador__controles h3{
  font-family:var(--titulo);font-weight:300;font-size:clamp(2rem,3.6vw,3.2rem);
  line-height:1;color:var(--tinta);margin:0;
}
.simulador__controles h3 em{font-style:italic;color:var(--dourado-escuro)}
.sim__nota{font-size:.95rem;line-height:1.6;color:var(--tinta-fraca);margin:0;max-width:44ch}
.sim__tipos{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:.4rem}
.sim__tipo{
  background:none;border:0;padding:.5rem 0;cursor:pointer;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tinta-fraca);position:relative;transition:color .35s;
}
.sim__tipo::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--dourado-escuro);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.sim__tipo:hover{color:var(--tinta)}
.sim__tipo[aria-pressed="true"]{color:var(--tinta)}
.sim__tipo[aria-pressed="true"]::after{transform:scaleX(1)}
.sim__campo{display:grid;gap:.5rem;width:100%;max-width:30rem;padding-top:1rem;border-top:1px solid var(--filete-areia)}
.sim__campo label{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.sim__campo label span{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-fraca)}
.sim__campo label b{font-family:var(--titulo);font-weight:300;font-size:1.5rem;line-height:1;color:var(--tinta);font-variant-numeric:tabular-nums}
.sim__campo input[type=range]{width:100%;margin:.2rem 0;accent-color:var(--dourado-escuro);cursor:pointer}
.sim__campo small{font-size:.76rem;color:var(--tinta-fraca)}
#sim-diaria-faixa,#sim-entrada{transition:opacity .18s ease}
.simulador__resultado{display:grid;gap:1.4rem;align-content:start}
.sim__k{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dourado-escuro);margin-bottom:.5rem}
.sim__valor b{display:block;font-family:var(--titulo);font-weight:300;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1;color:var(--tinta);font-variant-numeric:tabular-nums}
.sim__valor small{display:block;margin-top:.5rem;font-size:.8rem;line-height:1.5;color:var(--tinta-fraca);max-width:44ch}
.sim__renda{padding-top:1.2rem;border-top:1px solid var(--filete-areia)}
.sim__renda b{display:block;font-family:var(--titulo);font-weight:300;font-size:clamp(3rem,5.5vw,5rem);line-height:.95;color:var(--tinta);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sim__taxas{display:flex;flex-wrap:wrap;gap:1rem clamp(1.5rem,3.5vw,3.5rem);list-style:none;margin:0;padding:0}
.sim__taxas li{display:grid;gap:.3rem}
.sim__taxas b{font-family:var(--titulo);font-weight:300;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1;color:var(--dourado-escuro);font-variant-numeric:tabular-nums}
.sim__taxas span{font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-fraca)}
.sim__conta{list-style:none;margin:0;padding:0;max-width:26rem}
.sim__conta li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-top:1px solid var(--filete-areia);font-size:.9rem;color:var(--tinta-fraca)}
.sim__conta b{font-weight:400;color:var(--tinta);font-variant-numeric:tabular-nums;white-space:nowrap}
.sim__aviso{margin:0;font-size:.74rem;line-height:1.6;color:var(--tinta-fraca);max-width:52ch}
@media (max-width:900px){.simulador{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.investe{grid-template-columns:minmax(0,1fr)}}

/* ══ O FECHO ════════════════════════════════════════
   O rodapé é uma superfície só: a fachada, escurecida até virar fundo,
   sustenta a chamada final, o mapa do site e o aviso. */
.fecho{position:relative;z-index:3;isolation:isolate;overflow:hidden;background:var(--mar);color:var(--areia)}
.fecho__fundo{position:absolute;inset:0;z-index:-1}
.fecho__fundo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.55;filter:saturate(.7)}
.fecho__fundo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--mar) 0%,rgba(14,46,42,.52) 16%,rgba(14,46,42,.58) 34%,rgba(14,46,42,.84) 56%,rgba(14,46,42,.93) 78%,rgba(14,46,42,.9) 100%);
}
.fecho__chamada{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,5rem);align-items:end;
  padding-block:clamp(4rem,8vw,7rem) clamp(2.5rem,5vw,4rem);
}
.fecho__chamada .p-titulo{font-size:clamp(2.4rem,5vw,4.6rem);max-width:14ch}
.fecho__contato{display:grid;gap:1.1rem;justify-items:start}
.fecho__contato .grande{
  font-family:var(--titulo);font-weight:300;font-size:clamp(1.4rem,2vw,1.9rem);line-height:1.2;
  color:var(--branco);border-bottom:1px solid rgba(232,221,201,.3);padding-bottom:.15rem;
  transition:color .45s,border-color .45s;
}
.fecho__contato .grande:hover{color:var(--dourado);border-color:var(--dourado)}
.fecho__contato .meio{font-size:.9rem;color:var(--areia-fraca)}
.fecho__contato .meio a:hover{color:var(--branco)}
.fecho__mapa{
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,auto));
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
  padding-block:clamp(2rem,4vw,3rem);border-top:1px solid var(--filete);
}
.fecho__marca{font-family:var(--titulo);font-weight:300;font-size:1.9rem;letter-spacing:.06em;color:var(--branco);line-height:1}
.fecho__marca + p{margin:.9rem 0 0;font-size:.875rem;line-height:1.6;color:var(--areia-fraca);max-width:30ch}
.fecho__col{display:grid;gap:.55rem;align-content:start;font-size:.875rem}
.fecho__col h4{
  font-family:var(--mono);font-weight:400;font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dourado);margin:0 0 .4rem;
}
.fecho__col a,.fecho__col button{
  background:none;border:0;padding:0;font:inherit;color:var(--areia);cursor:pointer;
  text-align:left;transition:color .4s;
}
.fecho__col a:hover,.fecho__col button:hover{color:var(--dourado)}
.fecho__aviso{
  display:grid;grid-template-columns:12rem minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);
  margin-top:clamp(1rem,2vw,2rem);padding:clamp(1.6rem,3vw,2.5rem);
  border:1px solid var(--filete);background:rgba(232,221,201,.03);
}
.fecho__aviso h5{font-family:var(--mono);font-weight:400;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dourado);margin:0}
.fecho__aviso .selo{margin:1rem 0 0;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.8;color:var(--areia-fraca)}
.fecho__aviso p{margin:0 0 .8rem;font-size:.8rem;line-height:1.75;color:var(--areia-fraca)}
.fecho__aviso p:last-child{margin:0}
.fecho__aviso strong{font-weight:400;color:var(--areia)}
.fecho__base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;
  padding-block:1.6rem 2rem;margin-top:clamp(1.5rem,3vw,2.5rem);border-top:1px solid var(--filete);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--areia-fraca);
}
@media (max-width:900px){
  .fecho__chamada,.fecho__aviso{grid-template-columns:minmax(0,1fr)}
  .fecho__mapa{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ══ MOVIMENTO ══════════════════════════════════════
   O título sobe por trás de uma linha, como legenda de filme; o resto ganha
   um deslocamento de 12px e opacidade. Nada mais. */
/* O título sobe por trás da própria linha de base: o elemento corta, o span
   interno se move. É transform, e não clip-path, de propósito — transform
   anima no compositor e continua liso enquanto a thread principal decodifica
   as imagens dos planos; clip-path espera a thread e chega atrasado. A folga
   embaixo é para o corte não comer os descendentes. */
[data-sobe]{overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
[data-sobe]>span{display:block;transform:translateY(112%);transition:transform 1.15s var(--ease);transition-delay:var(--atraso,0ms);will-change:transform}
.is-in [data-sobe]>span{transform:none}
[data-entra]{opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--atraso,0ms)}
.is-in [data-entra]{opacity:1;transform:none}

/* Quem pede menos movimento recebe tudo revelado e os planos empilhados. */
@media (prefers-reduced-motion:reduce){
  [data-sobe]>span,.is-in [data-sobe]>span{transform:none;transition:none}
  [data-entra],.is-in [data-entra]{opacity:1;transform:none;transition:none}
  .coluna::before,.regua li::before,.cena-legenda::before{transform:scaleX(1)}
  .plano{position:relative}
  .plano__media{transform:none}
  .plano__saida{display:none}
  #palco{transform:none}
}
body.reduzido .plano{position:relative}
body.reduzido .plano__saida{display:none}
body.reduzido #barra{opacity:1;pointer-events:auto}

/* ══ CELULAR ════════════════════════════════════════
   Um plano preso só funciona se cabe na tela, e no celular o conteúdo da
   estrutura (doze ambientes) não cabe. Então os planos soltam: crescem com
   o conteúdo e rolam um atrás do outro. O corte fica para o desktop; a
   passagem do tour ao site continua igual. */
@media (max-width:620px){
  .plano{position:relative;height:auto;min-height:100dvh}
  .plano__saida{display:none}
  .plano__media{transform:none}
  .plano__faixa{padding-bottom:2.75rem}
  .plano--alto .plano__faixa,.plano--meio .plano__faixa{padding-top:6.5rem}
  .plano--meio .colunas{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.25rem}
  .item{font-size:.9rem;padding:.25rem 0}
  #barra .marca{white-space:nowrap;font-size:1.1rem;letter-spacing:.08em}
  #barra .acoes{gap:.4rem}
  .btn-linha{white-space:nowrap;padding:.6rem .8rem;font-size:.56rem;letter-spacing:.14em}
}