/* Maré Mansa — identidade do empreendimento.
   Verde-mar profundo, areia, dourado. Serif de traço fino nos títulos,
   como no book da BSA. */

:root{
  --mar:#0E2E2A;          /* verde-mar profundo, fundo dominante */
  --mar-2:#143A35;
  --mar-3:#1B4A43;
  --areia:#E8DDC9;        /* creme da tipografia */
  --areia-fraca:#B9AE9B;
  --dourado:#C9A227;
  --dourado-fraco:rgba(201,162,39,.22);
  --linha:rgba(232,221,201,.14);
  --branco:#FBF8F2;

  --titulo:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --corpo:"Jost","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --pad:clamp(1.25rem,4vw,4rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--mar);color:var(--areia);
  font-family:var(--corpo);font-weight:300;
  font-size:clamp(15px,.4vw + 14px,17px);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--dourado-fraco);color:var(--branco)}
h1,h2,h3{font-family:var(--titulo);font-weight:300;letter-spacing:.01em;margin:0}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}

/* ══ PALCO DO TOUR ══════════════════════════════════ */
#palco{position:fixed;inset:0;z-index:0;background:var(--mar)}
#tela{display:block;width:100%;height:100%}

/* fita de vinheta: dá peso aos cantos sem escurecer o centro */
#palco::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 52%,rgba(6,20,18,.42) 100%);
}

/* ══ TEXTO SOBRE O TOUR ═════════════════════════════ */
/* Todos os blocos ocupam a mesma posição; o motor controla a opacidade de
   cada um conforme o frame. Nenhum deles interrompe a rolagem. */
/* width, não max-width: todos os filhos são absolutos, então o container não
   tem conteúdo em fluxo para medir. Com max-width ele encolhia a zero e o
   `width:100%` das legendas virava zero — o texto quebrava a cada palavra. */
#legendas{
  position:fixed;left:var(--pad);bottom:clamp(3.5rem,9vh,6rem);
  z-index:3;width:min(46ch,58vw);pointer-events:none;
}
.legenda{
  position:absolute;left:0;bottom:0;width:100%;
  opacity:0;visibility:hidden;
  transition:opacity .18s linear,transform .18s linear;
  will-change:opacity,transform;
}
.legenda .kicker{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dourado);display:block;margin-bottom:.9rem;
}
.legenda h2{
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.04;color:var(--branco);
  margin:0 0 .7rem;text-shadow:0 2px 30px rgba(6,20,18,.55);
}
.legenda p{
  margin:0;font-size:clamp(.95rem,1.1vw,1.08rem);color:var(--areia);
  max-width:42ch;text-shadow:0 1px 16px rgba(6,20,18,.65);
}

/* ══ CARTELA DE ABERTURA ════════════════════════════ */
/* A animação é o nome se fechando: letter-spacing de .5em para .1em com o
   desfoque saindo junto, em 2,2s. O resto entra escalonado em volta dela. */
#cartela{
  position:fixed;inset:0;z-index:20;display:grid;place-items:center;
  pointer-events:none;text-align:center;will-change:opacity,transform,filter;
}
/* escurece o edifício atrás sem apagá-lo */
#cartela::before{
  content:'';position:absolute;inset:0;transition:opacity 1.6s ease;
  background:radial-gradient(ellipse 80% 70% at center,
    rgba(8,26,23,.80) 0%,rgba(8,26,23,.89) 55%,rgba(8,26,23,.95) 100%);
}
#cartela.clareia::before{opacity:.86}
#cartela .tc{position:relative;padding:0 1.5rem}

#cartela .tc-pre{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--dourado);margin:0 0 1.6rem;
  opacity:0;transform:translateY(10px);
  transition:opacity 1s ease .25s,transform 1s ease .25s;
}
#cartela .tc-nome{
  font-family:var(--titulo);font-weight:300;font-size:clamp(3rem,11vw,8rem);line-height:.92;
  margin:0;color:var(--branco);
  text-shadow:0 2px 40px rgba(6,20,18,.9),0 1px 3px rgba(6,20,18,.6);
  letter-spacing:.5em;opacity:0;filter:blur(14px);transform:scale(1.04);
  transition:letter-spacing 2.2s cubic-bezier(.16,.8,.24,1) .5s,
             opacity 1.8s ease .5s,
             filter 1.8s ease .5s,
             transform 2.2s cubic-bezier(.16,.8,.24,1) .5s;
}
#cartela .tc-linha{
  width:0;height:1px;background:var(--dourado);margin:2rem auto 1.4rem;
  transition:width 1.4s cubic-bezier(.16,.8,.24,1) 1.5s;
}
#cartela .tc-sub{
  font-family:var(--titulo);font-weight:300;font-style:italic;
  font-size:clamp(.95rem,2vw,1.35rem);color:var(--areia);margin:0;
  opacity:0;transition:opacity 1.2s ease 1.7s;
}
#cartela.dentro .tc-pre{opacity:1;transform:none}
#cartela.dentro .tc-nome{opacity:1;filter:blur(0);letter-spacing:.1em;transform:scale(1)}
#cartela.dentro .tc-linha{width:min(150px,32vw)}
#cartela.dentro .tc-sub{opacity:1}

/* A barra fica dentro da cartela, onde depois aparece "role para entrar" */
#carregando{
  position:fixed;left:50%;bottom:2.2rem;transform:translateX(-50%);z-index:22;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  transition:opacity .6s ease,visibility .6s;
}
#carregando.pronto{opacity:0;visibility:hidden}
#carregando .trilho{
  width:min(30vw,190px);height:1px;position:relative;
  background:rgba(232,221,201,.16);
}
#carregando .trilho i{
  position:absolute;inset:0 auto 0 0;width:0;background:var(--dourado);
  transition:width .4s cubic-bezier(.3,.8,.4,1);
}
#carregando span i{font-style:normal}
#carregando span{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--areia-fraca);font-variant-numeric:tabular-nums;
}

/* ══ ELEVADOR ═══════════════════════════════════════ */
#elevador{
  position:fixed;right:var(--pad);top:50%;transform:translateY(-50%);
  z-index:4;display:flex;flex-direction:column;gap:.1rem;
}
#elevador button{
  display:flex;align-items:center;gap:.7rem;justify-content:flex-end;
  background:none;border:0;padding:.42rem 0;cursor:pointer;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--areia-fraca);opacity:.55;transition:opacity .3s,color .3s;
}
#elevador button:hover,#elevador button:focus-visible{opacity:1;color:var(--branco);outline:none}
#elevador button .traco{display:block;width:18px;height:1px;background:currentColor;transition:width .3s}
#elevador button:hover .traco{width:30px}
#elevador button[aria-current="true"]{opacity:1;color:var(--dourado)}
#elevador button[aria-current="true"] .traco{width:34px;background:var(--dourado)}

/* ══ PROGRESSO E SELO ═══════════════════════════════ */
#progresso{
  position:fixed;left:0;top:0;height:2px;z-index:5;
  background:var(--dourado);width:0;transition:width .1s linear;
}
#selo{
  position:fixed;right:var(--pad);bottom:1.2rem;z-index:4;
  font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--areia-fraca);opacity:.5;pointer-events:none;
}
#dica{
  position:fixed;left:50%;bottom:1.8rem;transform:translateX(-50%);z-index:4;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--areia-fraca);opacity:.6;transition:opacity .6s;
}
#dica.off{opacity:0}
#dica::after{
  content:'';display:block;width:1px;height:22px;margin:.7rem auto 0;
  background:linear-gradient(var(--areia-fraca),transparent);
  animation:desce 2.4s ease-in-out infinite;
}
@keyframes desce{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:.8;transform:translateY(5px)}}

/* aviso discreto quando a rede não acompanha */
#buffer{
  position:fixed;left:var(--pad);top:1.4rem;z-index:5;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--areia-fraca);opacity:0;transition:opacity .4s;
}
#buffer.on{opacity:.65}

/* ══ FIM DO TOUR / SITE ═════════════════════════════ */
#depois{
  position:relative;z-index:6;background:var(--mar);
  /* Valor de partida apenas. O motor sobrescreve com a altura real do
     percurso (reservarPercurso) — o tour tem milhares de px, não uma tela.
     Sem isso o site desliza por cima da animação desde a primeira rolagem. */
  margin-top:100vh;
  border-top:1px solid var(--linha);
}
/* padding-block, nunca `padding: X 0`: estas regras vêm depois de .wrap com a
   mesma especificidade, e os elementos carregam as duas classes. O `0` lateral
   apagava o var(--pad) do .wrap e o texto encostava na borda. No desktop não
   aparecia porque o max-width:1240px centralizado já deixa folga; abaixo disso
   — celular, janela estreita — encostava. */
.secao{padding-block:clamp(4rem,10vh,8rem);border-bottom:1px solid var(--linha)}
.olho{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dourado);margin:0 0 1.2rem;
}
.secao h2{font-size:clamp(1.9rem,4vw,3rem);line-height:1.1;color:var(--branco);margin-bottom:1rem;max-width:20ch}
.secao .intro{max-width:56ch;color:var(--areia-fraca);margin:0 0 2.6rem}

.grade{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha)}
.grade.tipos{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.grade.lazer{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cartao{background:var(--mar);padding:1.6rem 1.5rem;transition:background .35s}
.cartao:hover{background:var(--mar-2)}
.cartao h3{font-size:1.5rem;color:var(--branco);margin-bottom:.2rem}
.cartao .area{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--dourado);display:block;margin-bottom:.9rem}
.cartao p{margin:0;font-size:.9rem;color:var(--areia-fraca);line-height:1.55}
.cartao ul{margin:.9rem 0 0;padding-left:1rem;font-size:.84rem;color:var(--areia-fraca)}
.cartao li{margin-bottom:.24rem}
.cartao .onde{
  display:block;margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--linha);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--areia-fraca);
}

.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--linha);border:1px solid var(--linha)}
.num{background:var(--mar);padding:1.5rem}
.num b{display:block;font-family:var(--titulo);font-size:2.6rem;line-height:1;color:var(--branco);font-weight:300}
.num span{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--areia-fraca)}

.distancias{width:100%;border-collapse:collapse;font-size:.92rem}
.distancias td{padding:.75rem 0;border-bottom:1px solid var(--linha);color:var(--areia-fraca)}
.distancias td:first-child{color:var(--areia)}
.distancias td:last-child{text-align:right;font-family:var(--mono);font-size:.8rem;color:var(--dourado);white-space:nowrap}

.cta{text-align:center;padding-block:clamp(5rem,12vh,9rem);background:var(--mar-2)}
.cta h2{font-size:clamp(2rem,5vw,3.4rem);margin:0 auto 2rem;max-width:16ch}
.botao{
  display:inline-block;padding:1rem 2.6rem;border:1px solid var(--dourado);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dourado);transition:background .35s,color .35s;
}
.botao:hover{background:var(--dourado);color:var(--mar)}

.rodape{padding-block:3rem 4rem;font-size:.78rem;color:var(--areia-fraca)}
.rodape p{margin:0 0 .5rem}
.legal{font-size:.68rem;opacity:.6;max-width:74ch;margin-top:1.4rem;line-height:1.6}

/* ══ MOVIMENTO REDUZIDO ═════════════════════════════ */
body.reduzido #palco,body.reduzido #elevador,body.reduzido #dica,body.reduzido #legendas,
body.reduzido #progresso,body.reduzido #cartela,body.reduzido #carregando{display:none}
/* Se a cartela aparecer com movimento reduzido ligado, o nome entra por fade
   puro — sem o fechamento das letras nem o desfoque. */
@media (prefers-reduced-motion:reduce){
  #cartela .tc-nome{
    transition:opacity .4s;letter-spacing:.1em;filter:none;transform:none;
  }
  #cartela .tc-pre,#cartela .tc-linha,#cartela .tc-sub{transition:opacity .4s}
}
body.reduzido #depois{margin-top:0}
#estatico{display:none}
body.reduzido #estatico{display:block}
#estatico .parada{border-bottom:1px solid var(--linha);padding:clamp(2.5rem,6vh,5rem) 0}
#estatico img{width:100%;height:auto;display:block;margin-bottom:1.8rem}

@media (max-width:760px){
  #elevador{display:none}
  /* left + right + width:auto = o navegador calcula a largura disponível */
  #legendas{width:auto;right:var(--pad);bottom:4.5rem}
  /* O selo mede 184px e a dica 126px. Lado a lado numa tela de 410px eles se
     cruzam, e a linha animada da dica cai justamente sobre o texto do selo.
     Empilhados, cada um fica com a faixa inteira. */
  #selo{left:50%;right:auto;transform:translateX(-50%);bottom:1rem;text-align:center}
  #dica{bottom:3rem}
}

/* ══ DIAGNÓSTICO ════════════════════════════════════
   Só aparece com ?bruto= ou ?hud=1 na URL. Não faz parte do site. */
#hud{
  position:fixed;right:.7rem;top:.7rem;z-index:21;
  display:grid;grid-template-columns:auto auto;gap:.06rem .9rem;
  background:rgba(6,20,18,.84);border:1px solid var(--linha);padding:.6rem .75rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;
  pointer-events:none;
}
#hud span{display:contents}
#hud i{font-style:normal;color:var(--areia-fraca);text-transform:uppercase;letter-spacing:.12em}
#hud b{font-weight:400;color:var(--branco);text-align:right}
@media (max-width:760px){
  #hud{right:.4rem;top:.4rem;font-size:.5rem;gap:.02rem .6rem;padding:.45rem .55rem}
}