/* ═══════════════════════════════════════════════════════════════
   FAROL — sites para saúde

   A página é desenhada de dia. A noite é um VÉU por cima que o
   farol levanta conforme você desce. Véu uniforme comprime o
   contraste mas nunca o inverte — foi por isso que abandonei a
   ideia de interpolar fundo e texto em direções opostas: no meio
   do caminho os dois se cruzavam e o texto sumia.

   Descer é o que acende. O ponteiro é bônus, nunca requisito.
   Só transform e opacity animam.
   ═══════════════════════════════════════════════════════════════ */

@property --rx { syntax:'<length-percentage>'; inherits:true; initial-value:0%; }
@property --ry { syntax:'<length-percentage>'; inherits:true; initial-value:0%; }

:root{
  /* ── dia: o desenho de base ── */
  --fundo:   #F6F8F5;
  --cartao:  #FFFFFF;
  --tinta:   #0C221A;
  --tinta2:  #5C6F65;
  --borda:   #E3E9E4;
  --acento:  #157A56;

  /* ── noite: abertura, banda escura e o véu ── */
  --n-fundo: #0A2419;
  --n-topo:  #061810;
  --n-tinta: #EAF3ED;
  --n-tinta2:#9FC4B2;
  --n-borda: #17402F;

  --verde-viva:#1E9B6E;
  --ambar:     #F2C544;
  --lampada:   #FFE9A8;

  --disp: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --txt:  'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;

  --e:   cubic-bezier(.22,1,.32,1);
  --pad: clamp(20px, 4.4vw, 68px);
  --max: 1240px;

  --flash: 0;   /* pulso do feixe da abertura */
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--fundo);
  color:var(--tinta);
  font-family:var(--txt);
  font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
a{ color:inherit; text-decoration:none }
img,svg{ display:block; max-width:100% }
:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; border-radius:8px }
::selection{ background:var(--ambar); color:#0C221A }

.env{ width:100%; max-width:var(--max); margin-inline:auto }
.env.estreito{ max-width:900px }

.pular{
  position:absolute; left:-9999px; z-index:400;
  background:var(--ambar); color:#0C221A;
  padding:14px 24px; border-radius:12px; font-weight:700;
}
.pular:focus{ left:var(--pad); top:14px }

/* ═══════════ O VÉU DA NOITE ═══════════
   Cobre tudo o que vem depois da abertura. O JS baixa a opacidade
   conforme você rola: é o farol clareando a página. */
/* #dia (z-index 1) fica ABAIXO da abertura (z-index 2), então o véu pode ser
   fixo do tamanho da viewport — uma camada barata — sem nunca cobrir o herói. */
#dia{ position:relative; z-index:1 }

/* O véu tem 200vh e desliza para baixo: a borda escura fica exatamente na
   posição Y da viewport que o JS empurra. Assim o topo — o que você está
   lendo — já está limpo, e o escuro recua à sua frente. Clarear tudo por
   igual comprimia o contraste do texto suave até 2,8:1 no meio do caminho.
   Só transform: a camada nunca repinta. */
#noite{
  position:fixed; left:0; right:0; top:-100vh; height:200vh;
  z-index:60; pointer-events:none;
  background:linear-gradient(180deg,
      rgba(10,36,25,0)    0%,
      rgba(10,36,25,0)   44%,
      rgba(242,197,68,.10) 47.5%,   /* a luz na borda que recua */
      rgba(10,36,25,.90) 49%,
      var(--n-fundo)     50%,
      var(--n-fundo)    100%);
  transform:translate3d(0,0,0);     /* o JS empurra daqui até 100vh */
  will-change:transform;
}

/* ─────────────── tipografia ─────────────── */
h1,h2,h3{ font-family:var(--disp); margin:0 }

/* <w> é cada palavra separada pelo JS para entrar sozinha. Elemento
   desconhecido nasce inline, e transform não se aplica a inline — sem este
   inline-block a coreografia inteira seria ignorada em silêncio. */
/* sem will-change aqui: são ~317 palavras na página, e promover 317 camadas
   é o oposto de otimizar. O Motion liga e desliga o will-change sozinho
   durante cada animação. */
w{ display:inline-block }

.disp{
  font-weight:800;
  font-size:clamp(29px, 3.7vw, 46px);
  line-height:1.06; letter-spacing:-.026em;
  margin:0 0 clamp(16px,2vw,22px);
}
.rotulo{
  font-size:12px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--tinta2);
  margin:0 0 clamp(14px,1.8vw,20px);
}
.rotulo b{ color:var(--acento) }
.conduz{
  color:var(--tinta2); max-width:56ch;
  font-size:clamp(16px,1.5vw,18px);
  margin:0 0 clamp(38px,4.6vw,58px);
}

/* ─────────────── botões ─────────────── */
.bt{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:0 26px; border-radius:13px;
  font-family:var(--disp);
  font-size:15.5px; font-weight:700; letter-spacing:-.008em;
  border:1.5px solid var(--borda); color:var(--tinta);
  background:transparent; cursor:pointer;
  transition:border-color .25s var(--e), color .25s var(--e),
             background-color .25s var(--e), transform .25s var(--e),
             box-shadow .25s var(--e);
}
.bt:hover{ transform:translateY(-2px); border-color:var(--acento); color:var(--acento) }
.bt .seta{ transition:transform .25s var(--e) }
.bt:hover .seta{ transform:translateX(3px) }
.bt.cheio{ background:var(--acento); border-color:var(--acento); color:#fff }
.bt.cheio:hover{
  background:var(--verde-viva); border-color:var(--verde-viva); color:#fff;
  box-shadow:0 14px 34px -14px rgba(30,155,110,.6);
}
/* no escuro o botão principal é a própria luz da lâmpada */
.escura .bt.cheio{ background:var(--ambar); border-color:var(--ambar); color:#231A00 }
.escura .bt.cheio:hover{
  background:#FFD75E; border-color:#FFD75E; color:#231A00;
  box-shadow:0 14px 36px -12px rgba(242,197,68,.5);
}
.escura .bt:not(.cheio){ border-color:rgba(234,243,237,.24); color:var(--n-tinta) }
.escura .bt:not(.cheio):hover{ border-color:var(--ambar); color:var(--ambar) }

.bt-min{ min-height:42px; padding:0 18px; font-size:14.5px; border-radius:11px }
.botoes{ display:flex; flex-wrap:wrap; gap:12px }

/* ─────────────── nav ─────────────── */
/* solto sobre a abertura: tinta clara. colado no topo: fundo claro, tinta escura. */
#nav{
  position:fixed; inset:0 0 auto 0; z-index:120;
  display:flex; align-items:center; gap:clamp(14px,2.2vw,30px);
  padding:15px var(--pad);
  font-size:15px; font-weight:600;
  color:var(--n-tinta);
  background-color:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .4s var(--e), border-color .4s var(--e), color .4s var(--e);
}
#nav .marca{ display:flex; align-items:center; gap:9px; margin-right:auto; color:inherit }
/* corpo claro + lâmpada âmbar: preenchido todo de âmbar o símbolo
   vira um borrão e perde a leitura de farol */
#nav .marca svg{ width:16px; height:21px; fill:var(--n-tinta) }
#nav .marca .bulbo{ fill:var(--ambar) }
#nav .marca b{ font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:-.02em }
#nav .lk{
  position:relative; color:var(--n-tinta2); font-weight:600;
  transition:color .25s var(--e);
}
#nav .lk:hover{ color:var(--ambar) }
/* o traço que marca em que seção você está — cresce do centro */
#nav .lk::after{
  content:''; position:absolute; left:0; right:0; bottom:-5px; height:2px;
  border-radius:2px; background:currentColor;
  transform:scaleX(0); transform-origin:50%;
  transition:transform .4s var(--e);
}
#nav .lk.atual{ color:var(--ambar) }
#nav .lk.atual::after{ transform:scaleX(1) }
#nav.solido .lk.atual{ color:var(--acento) }

#nav.solido{
  color:var(--tinta);
  background-color:rgba(246,248,245,.9);
  border-bottom-color:var(--borda);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
#nav.solido .marca svg{ fill:var(--acento) }
#nav.solido .marca .bulbo{ fill:var(--ambar) }
#nav.solido .lk{ color:var(--tinta2) }
#nav.solido .lk:hover{ color:var(--acento) }
#nav.solido .bt.cheio{ background:var(--acento); border-color:var(--acento); color:#fff }

@media (max-width:1120px){ .some{ display:none } }
@media (max-width:900px){ .oculta{ display:none } }

/* ═══════════════ ABERTURA (a noite) ═══════════════ */
#abertura{
  position:relative; z-index:2;
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(104px,13vw,150px) var(--pad) clamp(80px,9vw,110px);
  overflow:clip; isolation:isolate;
  background:var(--n-fundo);
  color:var(--n-tinta);
}
#mar{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block }
.bruma{
  position:absolute; inset:auto 0 0 0; height:38%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,36,25,0), rgba(10,36,25,.9) 70%, var(--n-fundo));
}
.abertura-grade{
  position:relative; z-index:3;
  width:100%; max-width:var(--max); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.44fr);
  align-items:center; gap:clamp(24px,4vw,52px);
}
.etiqueta{
  display:flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ambar); margin:0 0 clamp(20px,2.4vw,28px);
}
.pisca{
  width:7px; height:7px; border-radius:50%; flex:none; background:var(--lampada);
  box-shadow:0 0 calc(7px + var(--flash) * 18px) calc(1px + var(--flash) * 3px) rgba(255,233,168,.85);
  opacity:calc(.55 + var(--flash) * .45);
}
.titulo{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(37px, 5vw, 64px);
  line-height:1.03; letter-spacing:-.032em;
  margin:0 0 clamp(20px,2.4vw,28px);
  max-width:15ch;
}
.titulo .linha{ display:block; overflow:hidden }
.titulo .linha > span{
  display:block;
  background-image:
    linear-gradient(100deg, transparent 43%, rgba(255,240,196,.92) 50%, transparent 57%),
    linear-gradient(var(--n-tinta), var(--n-tinta));
  background-size:300% 100%, 100% 100%;
  background-position:var(--glint,-60%) 0, 0 0;
  background-repeat:no-repeat;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .titulo .linha > span{ -webkit-background-clip:text; background-clip:text; color:transparent }
}
.titulo .pergunta > span{
  color:var(--ambar);
  background-image:
    linear-gradient(100deg, transparent 43%, rgba(255,246,214,.95) 50%, transparent 57%),
    linear-gradient(var(--ambar), var(--ambar));
  background-size:300% 100%, 100% 100%;
  background-position:var(--glint,-60%) 0, 0 0;
}
.entrada{
  color:var(--n-tinta2); max-width:46ch;
  font-size:clamp(16px,1.5vw,18px);
  margin:0 0 clamp(26px,3vw,36px);
}
.selo{ margin:clamp(20px,2.4vw,28px) 0 0; font-size:13.5px; color:var(--n-tinta2); font-weight:500 }

/* placar da abertura: fatos verificáveis, não números de enfeite */
.placar{
  list-style:none; display:flex; flex-wrap:wrap;
  gap:clamp(18px,2.6vw,38px);
  margin:clamp(22px,2.8vw,34px) 0 0; padding:0;
}
.placar li{ display:flex; align-items:baseline; gap:7px }
.placar b{
  font-family:var(--disp); font-weight:800;
  /* corpo menor que a versão com números: agora são palavras, e a 32px
     três itens já não cabiam numa linha só */
  font-size:clamp(16px,1.7vw,20px); letter-spacing:-.02em;
  color:var(--ambar); line-height:1.1; white-space:nowrap;
}
.placar span{ font-size:13px; color:var(--n-tinta2); font-weight:600 }

/* o seletor era a melhor interação da página e passava despercebido */
.controles-dica{
  margin:0 0 6px; font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ambar);
  display:flex; align-items:center; gap:7px;
}
.controles-dica::after{
  content:''; width:22px; height:1px; background:currentColor; opacity:.5;
}

/* ═══════════ A LUZ QUE SEGUE O PONTEIRO ═══════════
   Só acende sobre as seções escuras — sobre fundo claro luz não aparece,
   e insistir só deixaria uma mancha amarela. */
#lanterna{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .45s var(--e);
  background:radial-gradient(320px circle at var(--lx,50%) var(--ly,50%),
      rgba(255,231,166,.10), rgba(255,214,120,.045) 42%, transparent 70%);
}
#lanterna.on{ opacity:1 }
.selo span{ color:var(--n-borda); padding:0 8px }

.abertura-farol{ display:flex; justify-content:center; align-items:center; pointer-events:none }
#torre{
  width:clamp(112px, 13.5vw, 186px); height:auto;
  filter:drop-shadow(0 0 calc(12px + var(--flash) * 42px) rgba(255,220,140, calc(.22 + var(--flash) * .48)));
}
#bulbo{ opacity:calc(.72 + var(--flash) * .28) }

/* fica no fluxo do texto: preso ao rodapé da abertura ele caía abaixo da
   dobra sempre que o conteúdo passava da altura da viewport */
.dica{
  display:flex; align-items:center; gap:9px;
  margin:10px 0 0;
  font-size:12px; letter-spacing:.05em;
  color:var(--n-tinta2); font-weight:600; opacity:.8;
}
.dica i{
  width:14px; height:14px; flex:none; border-radius:50%;
  border:1.5px solid currentColor; position:relative;
}
.dica i::after{
  content:''; position:absolute; left:50%; top:3px;
  width:4px; height:4px; margin-left:-2px; border-radius:50%;
  background:var(--ambar);
}
@media (max-width:860px){
  .abertura-grade{ grid-template-columns:1fr }
  .abertura-farol{ justify-content:flex-start; order:-1; margin-bottom:8px }
  .dica{ display:none }
}

/* botão de movimento: só aparece quando há o que decidir */
.chave-mov{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:14px; padding:11px 17px; border-radius:12px; cursor:pointer;
  background:rgba(242,197,68,.10);
  border:1px solid rgba(242,197,68,.34);
  color:var(--ambar);
  font-family:var(--disp); font-size:13.5px; font-weight:700;
  transition:background-color .25s var(--e), border-color .25s var(--e);
}
.chave-mov:hover{ background:rgba(242,197,68,.18); border-color:var(--ambar) }
.chave-mov::before{
  content:''; width:9px; height:9px; border-radius:50%; flex:none;
  background:currentColor;
}
@media (pointer: coarse){ .chave-mov{ padding:14px 18px } }

/* ═══════════════ FAIXAS ═══════════════ */
.faixa{
  position:relative;
  padding:clamp(72px,9vw,132px) var(--pad);
  background:var(--fundo); color:var(--tinta);
}
.faixa + .faixa{ border-top:1px solid var(--borda) }

/* banda escura de propósito — contraste desenhado, não "apagado" */
.faixa.escura{
  background:var(--n-fundo); color:var(--n-tinta);
  --tinta:var(--n-tinta); --tinta2:var(--n-tinta2);
  --borda:var(--n-borda); --cartao:#0E3325; --acento:var(--ambar);
  border-top:0;
}

/* a sala ganha profundidade: inclina de leve ao passar */
#tese .env{ perspective:1200px }

/* ── A SALA ESCURA ──
   Três batidas em vez de dois parágrafos. A luz desce pelo fio e acende
   uma de cada vez conforme você rola. Acendeu, fica aceso. */
.sala{
  list-style:none; margin:0 0 clamp(26px,3.2vw,38px);
  padding:clamp(26px,3.4vw,44px);
  background:var(--n-fundo); color:var(--n-tinta);
  border-radius:20px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:clamp(18px,2.3vw,30px);
  box-shadow:0 26px 60px -34px rgba(9,32,22,.55);
}
.sala::before{             /* o fio por onde a luz desce */
  content:''; position:absolute;
  left:calc(clamp(26px,3.4vw,44px) + 9px);
  top:clamp(34px,4vw,54px); bottom:clamp(34px,4vw,54px);
  width:2px; background:rgba(234,243,237,.07);
}
.batida{ display:flex; align-items:flex-start; gap:17px; position:relative }
.batida i{
  width:20px; height:20px; flex:none; margin-top:.22em;
  border-radius:50%; background:#0E3325;
  box-shadow:inset 0 0 0 1px rgba(234,243,237,.13);
  transition:background-color .65s var(--e), box-shadow .65s var(--e);
}
.batida p{
  margin:0; font-family:var(--disp); font-weight:700;
  font-size:clamp(19px,2.4vw,30px); line-height:1.2; letter-spacing:-.022em;
  color:rgba(234,243,237,.17);
  transition:color .75s var(--e);
}
.batida.acesa i{
  background:var(--lampada);
  box-shadow:0 0 22px 5px rgba(255,220,140,.42), inset 0 0 0 1px rgba(255,244,214,.9);
}
.batida.acesa p{ color:var(--n-tinta) }
.batida:last-child.acesa p{ color:var(--ambar) }   /* a conclusão é a virada */

/* ═══════════ ANTES / DEPOIS ═══════════
   O visitante puxa o divisor. À esquerda o que existe hoje para quem não
   tem site; à direita um site de verdade, carregando ao vivo. */
.comparador{ margin:clamp(26px,3.4vw,42px) 0 clamp(30px,3.8vw,46px) }
.cp-quadro{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  border-radius:18px; border:1px solid var(--borda);
  background:#0A2419; cursor:ew-resize; user-select:none;
  --corte:46%;
  box-shadow:0 26px 60px -38px rgba(9,32,22,.5);
}
.cp-antes{ position:absolute; inset:0; display:grid; place-items:center; padding:6%;
  background:linear-gradient(160deg,#123024,#0A2419) }
.cp-nada{ text-align:center; max-width:30ch; color:var(--n-tinta2) }
.cp-lupa{
  display:block; width:34px; height:34px; margin:0 auto 14px; border-radius:50%;
  border:2px solid rgba(159,196,178,.4); position:relative;
}
.cp-lupa::after{ content:''; position:absolute; right:-9px; bottom:-6px;
  width:14px; height:2px; border-radius:2px; background:rgba(159,196,178,.4);
  transform:rotate(45deg) }
.cp-nada b{ display:block; font-family:var(--disp); font-size:clamp(17px,2vw,23px);
  color:var(--n-tinta); margin-bottom:8px }
.cp-nada small{ font-size:13px; line-height:1.55 }

.cp-depois{ position:absolute; inset:0; overflow:hidden;
  clip-path:inset(0 calc(100% - var(--corte)) 0 0); background:#fff }
.cp-viva{ position:absolute; top:0; left:0; width:1440px; height:900px; border:0;
  transform-origin:top left; transform:scale(var(--cz,.42)); pointer-events:none;
  opacity:0; transition:opacity .8s var(--e) }
.cp-viva.pronta{ opacity:1 }

.cp-alca{ position:absolute; top:0; bottom:0; left:var(--corte);
  width:44px; margin-left:-22px; cursor:ew-resize;
  display:grid; place-items:center }
.cp-alca::before{ content:''; position:absolute; top:0; bottom:0; width:2px;
  background:var(--ambar); box-shadow:0 0 16px 2px rgba(242,197,68,.5) }
.cp-alca i{
  position:relative; width:38px; height:38px; border-radius:50%;
  background:var(--ambar); box-shadow:0 6px 20px -6px rgba(0,0,0,.5);
}
.cp-alca i::before, .cp-alca i::after{
  content:''; position:absolute; top:50%; width:0; height:0;
  border-block:5px solid transparent;
}
.cp-alca i::before{ left:9px; border-right:6px solid #231A00; transform:translateY(-50%) }
.cp-alca i::after{ right:9px; border-left:6px solid #231A00; transform:translateY(-50%) }
.cp-alca:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; border-radius:12px }

.cp-legenda{ display:flex; justify-content:space-between; margin:12px 2px 0;
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta2) }
.cp-legenda span:nth-child(2){ color:var(--acento) }

.arremate{
  margin:0; font-family:var(--disp); font-weight:700;
  font-size:clamp(18px,2vw,24px); line-height:1.32; letter-spacing:-.02em;
  color:var(--tinta); max-width:36ch;
}

.sobe{ opacity:1 }
.js .sobe{
  opacity:0; transform:translate3d(0,24px,0);
  transition:opacity .8s var(--e), transform .8s var(--e);
  transition-delay:calc(var(--i,0) * 75ms);
}
.js .sobe.acesa{ opacity:1; transform:none }

/* ═══════════════ OS PALCOS ═══════════════
   Seção escura de ponta a ponta. É o único lugar da página onde o feixe
   do farol tem superfície: sobre fundo claro a luz simplesmente não
   aparece, por mais opacidade que se dê a ela. */
.palcos{
  position:relative;
  padding:clamp(72px,9vw,130px) 0 clamp(80px,10vw,150px);
  background:var(--n-fundo); color:var(--n-tinta);
  --tinta:var(--n-tinta); --tinta2:var(--n-tinta2);
  --borda:var(--n-borda); --acento:var(--ambar);
  overflow:clip;
}
.palcos-topo{ padding-inline:var(--pad); margin-bottom:clamp(40px,5vw,76px) }
.lista-palcos{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:clamp(80px,10vw,160px);
  /* a profundidade que faz a página ler como vídeo em vez de layout:
     os cartões giram em 3D conforme sobem */
  perspective:1500px;
  perspective-origin:50% 42%;
}

/* cada projeto é um palco: o nome enorme atrás, a tela grande por cima */
.palco{
  position:relative;
  padding-inline:var(--pad);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,.42fr);
  grid-template-areas:'quadro ficha';
  align-items:center;
  gap:clamp(24px,3.4vw,56px);
  /* width:100% é obrigatório: como .lista-palcos é flex, o margin-inline:auto
     sozinho absorve o espaço livre e encolhe o palco até o conteúdo. */
  width:100%; max-width:var(--max); margin-inline:auto;
}
.palco:nth-child(even){ grid-template-columns:minmax(240px,.42fr) minmax(0,1fr); grid-template-areas:'ficha quadro' }

/* o nome em tipo gigante, atrás da moldura — a profundidade vem daí */
.palco-nome{
  position:absolute; z-index:0;
  left:var(--pad); top:calc(50% - .52em);
  margin:0; pointer-events:none;
  font-family:var(--disp); font-weight:900;
  font-size:clamp(64px, 13vw, 190px);
  line-height:.86; letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px rgba(159,196,178,.20);
  white-space:nowrap;
  transform:translate3d(0, var(--nome-y, 0px), 0);
}
.palco:nth-child(even) .palco-nome{ left:auto; right:var(--pad) }

.palco-quadro{
  grid-area:quadro; position:relative; z-index:2;
  transform-style:preserve-3d;
}
/* cada letra do nome gigante entra por conta própria, escalonada */
.palco-nome span{ display:inline-block; transform-origin:50% 100% }
.palco-ficha{ grid-area:ficha; position:relative; z-index:2 }

/* o seletor computador / celular */
.controles{
  display:inline-flex; gap:3px; margin-bottom:14px;
  padding:3px; border-radius:12px;
  background:rgba(234,243,237,.05);
  border:1px solid rgba(234,243,237,.09);
}
.chave{
  border:0; border-radius:9px; cursor:pointer;
  padding:8px 15px;
  font-family:var(--disp); font-size:13.5px; font-weight:700;
  color:var(--n-tinta2); background:transparent;
  transition:color .22s var(--e), background-color .22s var(--e);
}
.chave:hover{ color:var(--n-tinta) }
.chave.ativa{ background:var(--ambar); color:#231A00 }

/* a moldura muda de proporção — é o site se refazendo, não uma foto trocada */
.moldura{
  position:relative;
  border-radius:16px; overflow:hidden;
  background:#04140D;
  border:1px solid rgba(234,243,237,.11);
  box-shadow:0 40px 90px -44px rgba(0,0,0,.9);
  transition:max-width .55s var(--e), border-color .7s var(--e), box-shadow .7s var(--e);
  margin-inline:auto;
}
.moldura[data-vista="desktop"]{ max-width:100%; border-radius:16px }
.moldura[data-vista="celular"]{ max-width:min(300px, 72vw); border-radius:26px }
.moldura.acesa{
  border-color:rgba(255,233,168,.4);
  box-shadow:0 40px 100px -40px rgba(0,0,0,.9), 0 0 80px -24px rgba(242,197,68,.42);
}

.tela{
  position:relative; overflow:hidden; isolation:isolate;
  /* Fundo de PAINEL, não quase-preto. Enquanto o site de dentro não carrega,
     é isto que aparece — antes era #04140D e o cartão virava um buraco preto
     na página. */
  background:linear-gradient(160deg, #16382A, #0E2A1E 60%, #0C2419);
  /* Padrões que já mostram o site: furo aberto e véu leve. Com --rx:0% o véu
     cobria tudo sem abertura nenhuma, e qualquer cartão que o relógio ainda
     não tivesse tocado ficava preto. */
  --rx:78%; --ry:92%; --mx:50%; --my:50%; --escuro:.20;
}
.moldura[data-vista="desktop"] .tela{ aspect-ratio:16/10 }
.moldura[data-vista="celular"] .tela{ aspect-ratio:390/844 }

.viva{
  position:absolute; top:0; left:0; border:0;
  transform-origin:top left; transform:scale(var(--z,.42));
  pointer-events:none; opacity:0; transition:opacity .8s var(--e);
}
.moldura[data-vista="desktop"] .viva{ width:1440px; height:900px }
.moldura[data-vista="celular"] .viva{ width:390px; height:844px }
.viva.pronta{ opacity:1 }
/* clarão suave enquanto o site não chegou; some quando ele chega */
.tela::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, rgba(234,243,237,.07), transparent 70%);
  transition:opacity .6s var(--e);
}
.tela:has(.viva.pronta)::before{ opacity:0 }

.veu{
  position:absolute; inset:0; z-index:3;
  background:rgba(4,18,11,var(--escuro));
  -webkit-mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--mx) var(--my),
      transparent 0%, transparent 42%, #000 100%);
  mask-image:radial-gradient(ellipse var(--rx) var(--ry) at var(--mx) var(--my),
      transparent 0%, transparent 42%, #000 100%);
}
/* O halo foi removido: era mix-blend-mode:screen por cima do site, ou seja,
   luz pintada em cima da imagem. O cartao acende porque o veu SAI, nunca
   porque alguma coisa clareia por cima dele. */
/* cartão de reserva: fica acima do iframe, para cobrir a página de erro
   branca que o navegador desenha quando a prévia é bloqueada */
.reserva{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; padding:9%; text-align:center;
  background:linear-gradient(160deg,#16382A,#0E2A1E 60%,#0C2419);
}
.reserva-marca{
  width:30px; height:30px; margin-bottom:3px; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, var(--lampada), rgba(242,197,68,.15) 60%, transparent 72%);
}
.reserva b{
  font-family:var(--disp); font-weight:800; color:var(--n-tinta);
  font-size:clamp(16px,2vw,21px); letter-spacing:-.02em; line-height:1.15;
}
.reserva-dom{ font-size:12.5px; font-weight:700; color:var(--ambar) }
.reserva-nota{
  font-size:12px; line-height:1.5; color:var(--n-tinta2); max-width:30ch;
}
/* sem prévia, o véu e o facho não têm o que revelar */
.sem-previa .veu{ display:none }

.pega{ position:absolute; inset:0; z-index:5; cursor:crosshair; background:transparent }
.pega:focus-visible{ outline-offset:-4px }

/* a ficha do projeto */
.palco-ficha h3{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(21px,2.3vw,30px); line-height:1.1; letter-spacing:-.024em;
  margin:0 0 10px; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
}
.marca-area{
  display:inline-block;
  font-family:var(--txt); font-size:11.5px; font-weight:700; letter-spacing:.02em;
  padding:5px 11px; border-radius:999px;
  background:rgba(242,197,68,.14); color:var(--ambar);
}
.area{ margin:0 0 6px; font-weight:600; font-size:15px; color:var(--n-tinta) }
.onde{ margin:0 0 14px; font-size:12.5px; font-weight:600; color:var(--n-tinta2) }
.onde span{ opacity:.45; padding:0 5px }
.nota{ margin:0 0 18px; color:var(--n-tinta2); font-size:15px; max-width:40ch }
.ir{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--disp); font-weight:700; font-size:15px;
  color:var(--ambar); padding-bottom:4px;
  border-bottom:1.5px solid rgba(242,197,68,.32);
  transition:gap .25s var(--e), border-color .25s var(--e);
}
.ir:hover{ gap:12px; border-bottom-color:var(--ambar) }
.ir span{ font-size:13px }

@media (max-width:900px){
  .palco, .palco:nth-child(even){
    grid-template-columns:1fr; grid-template-areas:'quadro' 'ficha';
  }
  .palco-nome{ position:static; font-size:clamp(44px,13vw,72px); margin-bottom:14px; white-space:normal }
}

/* ═══════════════ O APLICATIVO — simulação navegável ═══════════════
   Interface reconstruída dentro do site: sem backend, sem marca do cliente e
   com paciente fictício. Fica dentro de uma seção escura, então o "aparelho"
   claro no meio funciona como o objeto iluminado da página. */
.app-palco{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(28px,4vw,64px); align-items:center;
  margin-top:clamp(26px,3.4vw,44px);
}

.fone{
  width:clamp(258px, 27vw, 312px);
  aspect-ratio:300/640;
  border-radius:42px; padding:9px;
  background:linear-gradient(160deg,#243F33,#0B1F16);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.85), inset 0 0 0 1px rgba(234,243,237,.10);
  flex:none;
}
.fone-vidro{
  height:100%; border-radius:34px; overflow:hidden;
  background:#F5F7F6; color:#14231C;
  display:flex; flex-direction:column;
  font-family:var(--txt);
}
.fone-topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 18px 3px; font-size:11.5px; font-weight:700; color:#14231C;
}
.fone-topo i{ width:44px; height:5px; border-radius:3px; background:#14231C; opacity:.18 }

.app-cabeca{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 16px 12px;
}
.app-quem{ display:flex; align-items:center; gap:9px }
.app-avatar{
  width:32px; height:32px; border-radius:50%; flex:none;
  background:#157A56; color:#fff;
  display:grid; place-items:center;
  font-family:var(--disp); font-weight:800; font-size:14px;
}
.app-quem b{ display:block; font-family:var(--disp); font-size:14.5px; font-weight:800; line-height:1.2 }
.app-quem small{ display:block; font-size:11px; color:#6B7C73 }
.app-selo{
  font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  padding:4px 8px; border-radius:999px;
  background:#FDF0CE; color:#7A5A05; white-space:nowrap;
}

.app-corpo{ flex:1; overflow:hidden; padding:0 14px 12px; position:relative }
.app-aba{ display:flex; flex-direction:column; gap:9px }
.app-aba[hidden]{ display:none !important }

.app-cartao{
  background:#fff; border:1px solid #E6EAE7; border-radius:14px;
  padding:13px 14px;
}
.app-rot{ margin:0; font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#6B7C73 }
.app-num{ margin:5px 0 0; font-family:var(--disp); font-weight:800;
  font-size:29px; line-height:1; letter-spacing:-.03em }
.app-num small{ font-size:14px; font-weight:700; color:#6B7C73 }
.app-mid{ margin:4px 0 0; font-family:var(--disp); font-weight:800; font-size:18px }
.app-mid small{ font-size:11px; color:#6B7C73 }
.app-delta{ margin:6px 0 0; font-size:11.5px; font-weight:700; color:#6B7C73 }
.app-delta.baixa{ color:#157A56 }
.app-destaque{ background:linear-gradient(150deg,#EAF5EF,#fff 70%) }
.app-duplo{ display:grid; grid-template-columns:1fr 1fr; gap:12px }

.app-grafico{ width:100%; height:auto; margin-top:8px; display:block }
.app-grafico .area{ fill:rgba(21,122,86,.12); stroke:none }
.app-grafico .linha{ fill:none; stroke:#157A56; stroke-width:2.5;
  stroke-linecap:round; stroke-linejoin:round }
.app-grafico .ponta{ fill:#157A56; stroke:#fff; stroke-width:2.5 }

.app-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px;
  background:#E6EAE7; border:1px solid #E6EAE7; border-radius:14px; overflow:hidden }
.app-lista li{ display:flex; justify-content:space-between; align-items:center;
  background:#fff; padding:11px 14px; font-size:12.5px; color:#6B7C73 }
.app-lista b{ font-family:var(--disp); font-size:13.5px; color:#14231C }

.app-medidas{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px;
  background:#E6EAE7; border:1px solid #E6EAE7; border-radius:14px; overflow:hidden }
.app-medidas li{ display:grid; grid-template-columns:1fr auto 34px; align-items:center;
  gap:8px; background:#fff; padding:11px 14px; font-size:12.5px; color:#6B7C73 }
.app-medidas b{ font-family:var(--disp); font-size:13.5px; color:#14231C }
.app-medidas i{ font-style:normal; font-size:11.5px; font-weight:800; text-align:right; color:#9AA8A0 }
.app-medidas i.baixa{ color:#157A56 }
.app-medidas li{ grid-template-columns:1fr auto 30px auto }
.app-mini{ display:flex; gap:4px }
.app-mini button{
  width:24px; height:24px; border-radius:7px; cursor:pointer;
  border:1px solid #DCE4DF; background:#fff; color:#14231C;
  font-size:14px; line-height:1; display:grid; place-items:center;
  transition:background-color .2s var(--e), color .2s var(--e);
}
.app-mini button:hover{ background:#EFF4F1; color:#157A56; border-color:#157A56 }

.app-agua{ display:flex; align-items:center; gap:14px }
.app-anel{ width:74px; height:74px; flex:none; transform:rotate(-90deg) }
.app-anel circle{ fill:none; stroke-width:9; stroke-linecap:round }
.app-anel .trilho{ stroke:#E6EAE7 }
.app-anel .cheio{ stroke:#157A56; stroke-dasharray:264; stroke-dashoffset:74 }
.app-copos{ display:grid; grid-template-columns:repeat(8,1fr); gap:5px }
.copo{
  aspect-ratio:3/4; border-radius:5px; cursor:pointer;
  border:1.5px solid #CBD7D0; background:#fff; padding:0;
  transition:background-color .25s var(--e), border-color .25s var(--e), transform .25s var(--e);
}
.copo:hover{ transform:translateY(-2px) }
.copo.cheio{ background:#157A56; border-color:#157A56 }

.app-fotos{ display:grid; grid-template-columns:1fr 1fr; gap:9px }
.app-fotos figure{ margin:0 }
.app-vazia{
  aspect-ratio:3/4; border-radius:11px;
  background:repeating-linear-gradient(135deg,#EDF1EE,#EDF1EE 7px,#F5F7F6 7px,#F5F7F6 14px);
  border:1px solid #E6EAE7;
}
.app-fotos figcaption{ margin-top:5px; font-size:11px; font-weight:700; color:#6B7C73 }
.app-nota{ margin:2px 0 0; font-size:11px; line-height:1.5; color:#6B7C73 }

.app-abas{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid #E6EAE7; background:#fff;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
}
.app-toque{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:0; cursor:pointer; padding:6px 2px;
  font-family:var(--txt); font-size:10px; font-weight:700; color:#8C9A93;
  transition:color .25s var(--e);
}
.app-toque svg{ width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.app-toque:hover{ color:#14231C }
.app-toque.ativa{ color:#157A56 }

/* ── controles: é o que faz o app parecer do visitante ── */
.app-nomes{ min-width:0 }
.app-nome{
  display:block; width:100%; max-width:130px;
  font-family:var(--disp); font-size:14.5px; font-weight:800; line-height:1.2;
  color:#14231C; background:transparent;
  border:0; border-bottom:1px dashed #C2D0C8; padding:0 0 1px;
  border-radius:0;
}
.app-nome:focus{ outline:none; border-bottom-color:#157A56 }
.app-nomes small{ display:block; font-size:10px; color:#8C9A93; margin-top:2px }

.app-passo{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:9px;
}
.app-passo b{ font-family:var(--disp); font-size:16px; font-weight:800 }
.app-passo button{
  width:34px; height:34px; flex:none; border-radius:10px; cursor:pointer;
  border:1px solid #DCE4DF; background:#fff; color:#14231C;
  font-size:19px; font-weight:700; line-height:1;
  display:grid; place-items:center;
  transition:background-color .2s var(--e), border-color .2s var(--e), transform .12s var(--e);
}
.app-passo button:hover{ background:#EFF4F1; border-color:#157A56; color:#157A56 }
.app-passo button:active{ transform:scale(.92) }

.app-acao{
  width:100%; margin-top:10px; padding:11px; border-radius:11px; cursor:pointer;
  border:0; background:#157A56; color:#fff;
  font-family:var(--disp); font-size:13.5px; font-weight:800;
  transition:background-color .22s var(--e), transform .12s var(--e);
}
.app-acao:hover{ background:#1B916A }
.app-acao:active{ transform:scale(.98) }
.app-acao.feito{ background:#0F5F43 }

.app-lado .bt{ margin-bottom:18px }

.app-lado h3{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(19px,2.1vw,25px); letter-spacing:-.022em; margin:0 0 16px;
}
.app-pontos{ list-style:none; margin:0 0 22px; padding:0; display:flex;
  flex-direction:column; gap:13px }
.app-pontos li{ position:relative; padding-left:26px; color:var(--n-tinta2);
  font-size:15px; line-height:1.55; max-width:46ch }
.app-pontos li::before{
  content:''; position:absolute; left:2px; top:.62em;
  width:8px; height:8px; border-radius:50%; background:var(--ambar);
}
.app-aviso{
  margin:0; padding:13px 15px; border-radius:12px;
  background:rgba(234,243,237,.05); border:1px solid var(--n-borda);
  font-size:12.5px; line-height:1.6; color:var(--n-tinta2); max-width:46ch;
}

@media (max-width:880px){
  .app-palco{ grid-template-columns:1fr; justify-items:center }
  .app-lado{ justify-self:stretch }
}

/* ═══════════════ MÉTODO — a trilha ═══════════════
   Quatro estações numa linha; clicar move o preenchimento e troca a folha.
   Substituiu o acordeão vertical, que era estrutura de FAQ, não de percurso. */
.trilha{ position:relative; margin-top:clamp(30px,3.6vw,44px) }

.trilha-fio{
  position:absolute; left:0; right:0; top:14px; height:2px;
  background:var(--borda); border-radius:2px; overflow:hidden;
}
.trilha-fio i{
  position:absolute; inset:0; display:block; border-radius:2px;
  background:linear-gradient(90deg, var(--acento), var(--ambar));
  transform:scaleX(var(--andado, .125)); transform-origin:left;
  transition:transform .55s var(--e);
}

.estacoes{
  position:relative; display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(8px,1.2vw,18px);
  margin-bottom:clamp(26px,3vw,38px);
}
.estacao{
  background:none; border:0; cursor:pointer; text-align:left;
  padding:0; color:var(--tinta2);
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  transition:color .3s var(--e);
}
.estacao-ponto{
  width:14px; height:14px; border-radius:50%;
  background:var(--fundo);
  box-shadow:inset 0 0 0 2px var(--borda);
  margin-left:8px;   /* alinha o centro do ponto com o fio */
  transition:box-shadow .35s var(--e), background-color .35s var(--e),
             transform .35s var(--e);
}
.estacao-num{
  font-family:var(--disp); font-size:11.5px; font-weight:800;
  letter-spacing:.14em; color:var(--tinta2);
  transition:color .3s var(--e);
}
.estacao-nome{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(15px,1.7vw,20px); letter-spacing:-.02em; line-height:1.15;
  color:var(--tinta2); transition:color .3s var(--e);
}
.estacao:hover .estacao-nome{ color:var(--tinta) }
.estacao:hover .estacao-ponto{ box-shadow:inset 0 0 0 2px var(--acento) }

.estacao.ativa .estacao-ponto{
  background:var(--ambar);
  box-shadow:inset 0 0 0 2px var(--ambar), 0 0 18px 4px rgba(242,197,68,.45);
  transform:scale(1.18);
}
.estacao.ativa .estacao-num{ color:var(--acento) }
.estacao.ativa .estacao-nome{ color:var(--tinta) }
/* estações já percorridas ficam marcadas, não apagadas */
.estacao.andada .estacao-ponto{ background:var(--acento); box-shadow:inset 0 0 0 2px var(--acento) }

.painel{ position:relative }
.folha{
  border:1px solid var(--borda); border-radius:18px;
  background:var(--cartao);
  padding:clamp(24px,3.2vw,44px);
  box-shadow:0 20px 50px -34px rgba(9,32,22,.3);
}
.folha[hidden]{ display:none !important }   /* !important porque
   .palco-item .folha{display:grid} vem depois com a mesma especificidade e
   ressuscitava as folhas escondidas, empilhando as seis de uma vez */
.folha-marca{
  margin:0 0 10px; font-size:11.5px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--acento);
}
.folha h3{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(23px,2.7vw,34px); letter-spacing:-.024em; line-height:1.1;
  margin:0 0 14px;
}
.folha-txt{
  margin:0; color:var(--tinta2);
  font-size:clamp(15.5px,1.5vw,17.5px); line-height:1.62; max-width:60ch;
}

@media (max-width:700px){
  .estacoes{ grid-template-columns:repeat(2,1fr); row-gap:22px }
  .trilha-fio{ display:none }
}

/* ═══════════════ O QUE VEM JUNTO — o explorador ═══════════════
   Menu de seis à esquerda, painel com desenho à direita. Era uma grade de
   marcadores; virou algo em que dá para navegar. */
.explorador{
  display:grid; grid-template-columns:minmax(210px,.34fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,38px);
  align-items:start;
  margin-top:clamp(24px,3vw,38px);
}
.explorador .menu{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px }
.explorador .item{
  width:100%; display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:12px;
  background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--disp); font-weight:700;
  font-size:clamp(14.5px,1.45vw,16px); letter-spacing:-.014em;
  color:var(--tinta2);
  transition:background-color .3s var(--e), color .3s var(--e);
}
.explorador .item:hover{ background:color-mix(in oklab, var(--borda), transparent 45%); color:var(--tinta) }
.item-luz{
  width:9px; height:9px; flex:none; border-radius:50%;
  background:var(--borda);
  transition:background-color .35s var(--e), box-shadow .35s var(--e);
}
.explorador .item.ativa{ background:var(--cartao); color:var(--tinta); box-shadow:0 8px 24px -18px rgba(9,32,22,.5) }
.explorador .item.ativa .item-luz{
  background:var(--ambar); box-shadow:0 0 16px 4px rgba(242,197,68,.45);
}

.palco-item{ position:relative }
.palco-item .folha{ display:grid; gap:clamp(16px,2vw,26px) }
.arte{
  width:clamp(56px,6vw,76px); height:clamp(56px,6vw,76px);
  border-radius:16px;
  background:color-mix(in oklab, var(--acento), transparent 90%);
  display:grid; place-items:center;
}
.arte svg{
  width:58%; height:58%;
  fill:none; stroke:var(--acento); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
}

@media (max-width:760px){
  .explorador{ grid-template-columns:1fr }
  .explorador .menu{
    flex-direction:row; overflow-x:auto; gap:6px;
    padding-bottom:6px; scrollbar-width:none;
  }
  .explorador .menu::-webkit-scrollbar{ display:none }
  .explorador .item{ white-space:nowrap }
}

/* ═══════════════ A PROVA ═══════════════
   Cole o endereço do seu site e ele carrega aqui, no escuro, com o farol
   acendendo em cima. É a tese da página aplicada ao site de quem está lendo. */
.visualmente-oculto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.prova{
  display:flex; flex-wrap:wrap; gap:10px;
  max-width:600px; margin:0 auto clamp(14px,1.8vw,20px);
}
.prova input{
  flex:1 1 260px; min-height:52px;
  padding:0 18px; border-radius:13px;
  font-family:var(--txt); font-size:16px;
  color:var(--n-tinta);
  background:rgba(234,243,237,.06);
  border:1.5px solid rgba(234,243,237,.16);
  transition:border-color .25s var(--e), background-color .25s var(--e);
}
.prova input::placeholder{ color:rgba(159,196,178,.6) }
.prova input:focus{
  outline:none; border-color:var(--ambar);
  background:rgba(234,243,237,.09);
}
.prova-aviso{
  min-height:1.4em; margin:0 auto clamp(22px,2.6vw,32px);
  font-size:13.5px; color:var(--n-tinta2); max-width:56ch;
}
.prova-aviso.erro{ color:#FFB4A8 }
.prova-moldura{
  max-width:min(760px, 100%); margin:0 auto clamp(30px,4vw,48px);
  text-align:left;
}

/* ═══════════════ CONTATO ═══════════════ */
#contato{ text-align:center }
#contato .conduz{ margin-inline:auto }
#contato .botoes{ justify-content:center }
.ressalva{
  margin:clamp(26px,3.4vw,38px) auto 0;
  font-size:13.5px; line-height:1.7; color:var(--tinta2); max-width:50ch;
}

/* ═══════════════ RODAPÉ ═══════════════ */
footer{
  border-top:1px solid var(--borda);
  padding:clamp(30px,4vw,44px) var(--pad);
  background:var(--fundo); color:var(--tinta2);
}
.rodape{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,2.6vw,32px) }
.rodape-marca{ display:flex; align-items:center; gap:10px; margin-right:auto }
.rodape-marca svg{ width:18px; height:24px; fill:var(--acento); flex:none }
.rodape-marca .bulbo{ fill:var(--ambar) }
.rodape-marca b{ display:block; font-family:var(--disp); font-weight:800; font-size:17px; color:var(--tinta) }
.rodape-marca span{ font-size:13px }
.rodape-links{ display:flex; gap:clamp(14px,2.2vw,26px); font-size:14.5px; font-weight:600 }
.rodape-links a:hover{ color:var(--acento) }
.credito{ width:100%; margin:0; font-size:12.5px; padding-top:18px; border-top:1px solid var(--borda) }

/* ═══════════════ A BALIZA — o farol fixo no canto ═══════════════
   Entra quando a noite acaba. O ângulo do feixe segue o scroll:
   descer é o que varre a página. */
#baliza{
  position:fixed; z-index:110;
  /* à direita: o canto esquerdo é da dica da abertura */
  right:clamp(16px,2.2vw,28px); bottom:clamp(16px,2.2vw,28px);
  width:92px; height:92px;
  pointer-events:none;
  opacity:var(--baliza-op, 0);
  transform:translate3d(0, calc((1 - var(--baliza-op,0)) * 16px), 0);
}
@media (max-width:700px){ #baliza{ width:70px; height:70px } }

/* anel: quanto da página você já percorreu */
#baliza .anel{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg) }
#baliza .anel circle{ fill:none; stroke-width:3; stroke-linecap:round }
#baliza .anel .trilha{ stroke:rgba(21,122,86,.16) }
#baliza .anel .marca{
  stroke:var(--ambar);
  stroke-dasharray:289.03;                                  /* 2π × 46 */
  stroke-dashoffset:calc(289.03 * (1 - var(--progresso,0)));
}

/* O FACHO é o canvas #facho, desenhado com composição aditiva.
   A versão em CSS (gradiente + clip-path + blur num div) não aparecia
   em tela nenhuma; canvas aditivo sobre fundo escuro aparece sempre. */
/* z-index 1: dentro de #dia, isso deixa o facho ACIMA do fundo da seção e
   ABAIXO de .palco-quadro (z-index 2). É o que faz a luz parar na borda do
   cartão em vez de passar por cima dele. A moldura e a ficha ocluem o feixe;
   a baliza (z 110, fora de #dia) continua na frente, como fonte da luz. */
#facho{
  position:fixed; inset:0; z-index:1;
  width:100%; height:100%;
  pointer-events:none;
}

/* o disco é a noite particular do farol */
#baliza .disco{
  position:absolute; inset:9px;
  border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 30%, #0E3325, var(--n-topo));
  box-shadow:0 8px 22px -10px rgba(6,24,16,.6), inset 0 0 0 1px rgba(234,243,237,.07);
}
#baliza .feixe{
  position:absolute; left:50%; top:31%;
  width:120px; height:52px;
  transform-origin:0 50%;
  /* mesmo ângulo do facho: a luz do disco continua para fora sem desencontro */
  transform:rotate(var(--facho-ang, 180deg));
  background:linear-gradient(90deg,
      rgba(255,232,168,.85) 0%, rgba(250,205,95,.34) 38%, rgba(242,197,68,0) 100%);
  clip-path:polygon(0 42%, 100% 0, 100% 100%, 0 58%);
  filter:blur(3.5px);
  opacity:calc(.5 + var(--baliza-pulso,0) * .5);
}
#baliza .torre{ position:absolute; inset:14% 0 0; width:100%; height:86% }
#baliza .torre .corpo{ fill:#1E9B6E }
#baliza .torre .bulbo{
  fill:var(--lampada);
  filter:drop-shadow(0 0 calc(3px + var(--baliza-pulso,0) * 9px) rgba(255,220,140,.95));
}

/* ═══════════════ MOVIMENTO REDUZIDO ═══════════════
   A noite já nasce levantada, o farol para de girar. Nada some. */
/* Quem manda aqui é a classe .quieto no <html>, posta pelo JS, e não a media
   query direto. Antes este bloco desligava tudo por conta própria e passava
   por cima da escolha do visitante: ligar a animação no botão não adiantava,
   porque o CSS continuava zerando as transições. */
html.quieto{ scroll-behavior:auto }
.quieto *, .quieto *::before, .quieto *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
}
.quieto #noite{ transform:translate3d(0,100vh,0) !important }
.quieto .sobe{ opacity:1 !important; transform:none !important }
.quieto .titulo .linha > span{ background-position:-60% 0, 0 0 }
.quieto .palco-nome{ transform:none !important }

/* ═══════════════════════════════════════════════════════════════
   CELULAR
   Tudo daqui para baixo vale só em tela pequena ou ponteiro grosso.
   Nada aqui altera o que já existe no computador.
   ═══════════════════════════════════════════════════════════════ */

/* ── alvos de toque ──
   O dedo não tem a precisão do ponteiro. Abaixo de 44px o erro de toque
   dispara, e a pessoa culpa o site, não o próprio dedo. */
@media (pointer: coarse){
  #nav .lk{ padding:11px 4px }
  #nav .marca{ padding:8px 0 }
  .chave{ padding:12px 16px; font-size:14px }
  .ir{ padding:11px 0 }
  .rodape-links a{ padding:10px 0 }
  .app-passo button{ width:44px; height:44px; font-size:21px }
  .app-mini button{ width:36px; height:36px }
  .app-acao{ padding:14px }
  .app-nome{ padding:8px 0; font-size:16px }   /* 16px evita o zoom do iOS */
  .copo{ min-height:42px }
  .app-toque{ padding:10px 2px }
  .cp-alca{ width:64px; margin-left:-32px }
  .cp-alca i{ width:46px; height:46px }
}

/* ── o comparador precisa do dedo sem roubar a rolagem ── */
@media (pointer: coarse){
  .cp-quadro{ touch-action:pan-y }   /* arrasta na horizontal, rola na vertical */
  .cp-alca{ touch-action:none }      /* na alça, o arrasto é só nosso */
}

@media (max-width:760px){
  /* ── a prévia do projeto ──
     Site de 1440px em 334px dá 23% de escala: ilegível. No celular a
     moldura ocupa quase toda a largura e o JS já entra na vista de
     telefone, onde o site aparece perto do tamanho real. */
  .moldura[data-vista="celular"]{ max-width:min(340px, 92vw) }

  /* ── o menu do explorador rola de lado; sem sinal disso ninguém desliza ── */
  .explorador .menu{
    position:relative;
    -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);
    mask-image:linear-gradient(90deg,#000 82%,transparent);
  }
  .explorador .item{ padding:13px 15px }
}

@media (max-width:560px){
  /* ── o app ──
     Desenhar a moldura de um celular DENTRO de um celular é redundante e
     come 30% da largura. No telefone o app ocupa a tela inteira do cartão,
     que é como ele é de verdade. */
  .fone{
    width:100%; padding:0; aspect-ratio:auto;
    border-radius:22px;
    box-shadow:0 26px 52px -32px rgba(0,0,0,.75);
  }
  .fone-vidro{ border-radius:22px; height:auto }
  .fone-topo{ display:none }          /* barra de status falsa dentro de um celular real */
  .app-corpo{ padding:0 14px 14px }
  .app-num{ font-size:26px }

  /* a faixa da abertura empilha em duas colunas em vez de virar lista longa */
  .placar{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px }

  /* a baliza encolhe para não brigar com o conteúdo */
  #baliza{ width:56px; height:56px; right:12px; bottom:12px }
}

/* últimos alvos que ficaram entre 36 e 43px: no dedo, 3px faltando ainda erra */
@media (pointer: coarse){
  .bt-min{ min-height:46px }
  .chave{ padding:14px 16px }
  .app-nome{ padding:13px 0 }
  .app-toque{ padding:12px 2px }
  .explorador .item{ padding:15px }
  .rodape-links a{ padding:12px 0 }
}