/* =====================================================================
   DESBULLYNIZAÇÃO® — sistema visual
   =====================================================================
   A ideia que organiza tudo: quem carrega a marca são os personagens,
   não o logotipo. Por isso o site é escuro — como uma sala de projeção —
   e as imagens ocupam a tela inteira. O logotipo aparece pequeno, no
   topo e no rodapé, como assinatura.

   Três camadas de cor:
     · o breu     (#08151b)  o fundo de quase tudo
     · a areia    (#f0c078)  vem do logotipo. É o único sinal de ação
     · a atmosfera            cada personagem tem a sua, aplicada por
                              variável em cada painel

   As seções institucionais (livros, escolas, famílias…) usam o modo
   claro, que entra depois da narrativa: primeiro sentir, depois entender.
   ===================================================================== */

@font-face{font-family:P;src:url(../fontes/Poppins-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:P;src:url(../fontes/Poppins-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:L;src:url(../fontes/Lora-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:L;src:url(../fontes/Lora-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:L;src:url(../fontes/Lora-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --breu:#08151b; --breu-2:#0d1f27; --breu-3:#14303a;
  --areia:#f0c078; --areia-cl:#f8ddb4; --areia-esc:#8a5a12;
  --papel:#ffffff; --creme:#f6f3ec; --tinta:#131c22; --tinta-cl:#55616a;
  --linha:#e3ded4; --linha-esc:rgba(255,255,255,.14);
  --claro:#e9eef0; --claro-2:#9fb2ba;
  --ok:#14713c;

  /* atmosfera padrão — cada painel de personagem sobrescreve */
  --atm:#14303a; --luz:#f0c078;

  --max:1180px; --texto:68ch;
  --r:14px;
  --lento:cubic-bezier(.16,.84,.32,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--breu)}
body{margin:0;background:var(--breu);color:var(--claro);
  font-family:P,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;-webkit-text-size-adjust:100%;
  overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--areia)}
h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-.022em;font-weight:700}
p{margin:0 0 18px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.estreito{max-width:760px}
.pular{position:absolute;left:-9999px}
.pular:focus{left:14px;top:12px;z-index:300;background:var(--areia);
  color:var(--breu);padding:12px 18px;border-radius:10px;font-weight:700;width:auto}
:focus-visible{outline:3px solid var(--areia);outline-offset:3px;border-radius:4px}

/* ---------------------------------------------------------- tipografia */
.display{font-size:clamp(44px,9.4vw,132px);line-height:.94;letter-spacing:-.042em;
  font-weight:700;text-wrap:balance}
.display em{font-style:normal;color:var(--luz)}
.titulo{font-size:clamp(30px,5.2vw,62px);line-height:1.02;letter-spacing:-.032em;
  font-weight:700;text-wrap:balance}
.sub-titulo{font-size:clamp(23px,3.2vw,36px);line-height:1.12;letter-spacing:-.024em;
  font-weight:700}
.olho{font-family:P;font-size:11.5px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--luz);margin:0 0 18px;display:block}
.lede{font-size:clamp(17px,1.7vw,21px);line-height:1.55;color:var(--claro-2);
  max-width:44ch}
.corpo{font-size:17px;color:var(--claro-2);max-width:60ch}
.corpo b,.corpo strong{color:#fff;font-weight:700}
/* a voz do personagem — é sempre serifada e sempre em itálico */
.fala{font-family:L,Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(26px,4.4vw,58px);line-height:1.2;letter-spacing:-.015em;
  color:#fff;text-wrap:balance}
.miudo{font-size:13px;color:#7d919b;letter-spacing:.01em}

/* ------------------------------------------------------------- cabeçalho */
header.topo{position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .4s var(--lento),backdrop-filter .4s,border-color .4s}
header.topo::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,21,27,.72),rgba(8,21,27,0));
  transition:opacity .4s;pointer-events:none}
header.topo.fixa{background:rgba(8,21,27,.86);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--linha-esc)}
header.topo.fixa::before{opacity:0}
header.topo .wrap{position:relative;display:flex;align-items:center;gap:18px;height:72px}
/* A assinatura do topo é tipográfica, não o logotipo pictórico: aquele é um
   letreiro de display e vira borrão abaixo de uns 40px de altura. Aqui ele
   precisa ser discreto — então vira palavra, com um ponto de areia. */
.assinatura{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto;
  color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;transition:opacity .2s;opacity:.94}
.assinatura:hover{opacity:1}
.assinatura i{width:7px;height:7px;border-radius:50%;background:var(--areia);
  display:block;flex:0 0 auto}
.assinatura b{font-weight:700}
.assinatura sup{font-size:.62em;letter-spacing:0;top:-.5em;position:relative}
@media(max-width:420px){.assinatura{font-size:11px;letter-spacing:.12em}}
header.topo nav{margin-left:auto;display:flex;gap:clamp(16px,1.7vw,26px);align-items:center}
header.topo nav .bt{flex:0 0 auto;white-space:nowrap;padding:12px 20px;font-size:14px}
header.topo nav a{font-size:14px;color:#c3d0d6;text-decoration:none;letter-spacing:.01em;
  position:relative;padding:5px 0;white-space:nowrap;flex:0 0 auto}
header.topo nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--areia);transition:right .3s var(--lento)}
header.topo nav a:hover::after,header.topo nav a[aria-current=page]::after{right:0}
header.topo nav a[aria-current=page]{color:#fff}
.abrir{display:none;margin-left:auto;background:rgba(255,255,255,.07);
  border:1px solid var(--linha-esc);border-radius:11px;width:46px;height:46px;
  cursor:pointer;color:#fff;align-items:center;justify-content:center}
.abrir svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
@media(max-width:1000px){
  header.topo nav{position:fixed;inset:72px 0 auto 0;background:rgba(8,21,27,.98);
    backdrop-filter:blur(18px);flex-direction:column;align-items:stretch;gap:0;
    padding:8px clamp(20px,4vw,44px) 26px;display:none;
    max-height:calc(100dvh - 72px);overflow:auto;border-bottom:1px solid var(--linha-esc)}
  header.topo nav.on{display:flex}
  header.topo nav a{padding:17px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:19px}
  header.topo nav a::after{display:none}
  header.topo nav .bt{margin-top:20px;border-bottom:0}
  .abrir{display:flex}
}

/* ---------------------------------------------------------------- botões */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--areia);color:var(--breu)!important;font-weight:700;font-size:15px;
  font-family:P;padding:15px 26px;border-radius:999px;text-decoration:none;border:0;
  cursor:pointer;letter-spacing:.005em;
  transition:transform .2s var(--lento),background .2s,box-shadow .3s}
.bt:hover{background:#fff;transform:translateY(-2px);box-shadow:0 12px 34px rgba(240,192,120,.22)}
.bt:active{transform:translateY(0)}
.bt.g{font-size:16.5px;padding:19px 34px}
.bt.bloco{width:100%}
.bt.fantasma{background:transparent;color:#fff!important;
  border:1px solid rgba(255,255,255,.32);box-shadow:none}
.bt.fantasma:hover{background:rgba(255,255,255,.1);border-color:#fff}
.bt.escuro{background:var(--breu);color:#fff!important}
.bt.escuro:hover{background:var(--breu-3)}
.bt.contorno{background:transparent;color:var(--tinta)!important;
  border:1px solid var(--linha);box-shadow:none}
.bt.contorno:hover{background:var(--creme);border-color:var(--tinta-cl)}
.bt.zap{background:#25d366;color:#06331a!important}
.bt.zap:hover{background:#1fbb59}
.bt svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.botoes{display:flex;flex-wrap:wrap;gap:13px;align-items:center}

/* ================================================================ ABERTURA
   O primeiro contato. Imagem monumental, tipografia por cima,
   quase nenhum texto. */
.abertura{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--breu);isolation:isolate}
.abertura .figura{position:absolute;inset:0;z-index:0;overflow:hidden}
/* quando a abertura usa a CENA inteira (e não o recorte), a imagem cobre
   a tela como um plano de cinema, com o foco onde está o rosto */
.abertura .figura.cheia img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--foco,50% 40%);filter:none;right:auto;bottom:auto}
.abertura .figura img{position:absolute;right:var(--fig-r,-9%);bottom:var(--fig-b,0);
  height:var(--fig-h,104%);width:auto;max-width:none;object-fit:contain;
  transform-origin:bottom right;filter:drop-shadow(0 40px 90px rgba(0,0,0,.7))}
/* O véu. É ele que permite a tipografia passar por cima da figura sem
   disputar: à esquerda o personagem vira silhueta, à direita fica inteiro. */
.abertura::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg, rgba(8,21,27,.97) 0%, rgba(8,21,27,.93) 26%,
      rgba(8,21,27,.74) 44%, rgba(8,21,27,.24) 66%, transparent 88%),
    linear-gradient(180deg, rgba(8,21,27,.72) 0%, transparent 20%,
      transparent 46%, rgba(8,21,27,.62) 78%, rgba(8,21,27,.92) 100%)}
.abertura.curta{min-height:min(78svh,760px)}
/* A abertura tem de caber numa tela — inclusive num notebook de 720px de
   altura. Por isso a tipografia é limitada pela ALTURA da janela, e não só
   pela largura: em tela baixa ela encolhe sozinha em vez de empurrar os
   botões para fora do campo de visão. */
.abertura .wrap{position:relative;z-index:2;padding-top:clamp(96px,13vh,124px);
  padding-bottom:clamp(34px,6.5vh,84px);width:100%}
.abertura .wrap > *{max-width:min(64%,760px)}
.abertura h1{font-size:clamp(33px,min(4.9vw,7.2vh),68px);line-height:.99;
  letter-spacing:-.036em;margin:0 0 clamp(14px,2.4vh,26px)}
.abertura .fala{font-size:clamp(20px,min(2.6vw,3.9vh),36px);
  margin:0 0 clamp(10px,1.8vh,20px)}
.abertura .lede{font-size:clamp(15px,min(1.45vw,2.1vh),19px);
  margin:0 0 clamp(16px,2.6vh,30px)}
.abertura .olho{margin-bottom:clamp(8px,1.5vh,16px)}
@media(max-width:1100px){.abertura .wrap > *{max-width:min(72%,640px)}}
@media(max-width:900px){.abertura .wrap > *{max-width:none}}
.abertura .fala{margin:0 0 22px}
.abertura h1{margin:0 0 26px}
.abertura .lede{margin:0 0 30px}
.abertura .creditos{margin-top:clamp(14px,2.4vh,32px);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.abertura .creditos b{color:#fff;font-size:13.5px;font-weight:700;letter-spacing:.02em}
.abertura .creditos span{font-size:13px;color:#7d919b}
@media(max-width:900px){
  .abertura{min-height:100svh;align-items:flex-end}
  .abertura .figura img{right:var(--fig-r-mob,-18%);height:var(--fig-h-mob,66%);
    bottom:auto;top:9%}
  .abertura::after{background:
    linear-gradient(180deg, rgba(8,21,27,.8) 0%, rgba(8,21,27,.16) 19%,
      rgba(8,21,27,.74) 42%, rgba(8,21,27,.95) 60%, var(--breu) 82%)}
  .abertura .wrap{padding-top:96px}
  .abertura .fala,.abertura h1{max-width:none}
}
/* o convite a descer */
.descer{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#7d919b;
  text-decoration:none}
.descer i{display:block;width:1px;height:38px;background:linear-gradient(var(--areia),transparent);
  animation:desce 2.4s var(--lento) infinite}
@keyframes desce{0%{transform:scaleY(.2);transform-origin:top;opacity:0}
  40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}}
@media(max-width:900px){.descer{display:none}}

/* =============================================================== SILÊNCIO
   Uma tela quase vazia. Serve de respiro entre dois impactos. */
.silencio{padding:clamp(96px,20vh,220px) 0;text-align:center;background:var(--breu)}
.silencio .fala{margin:0 auto;max-width:20ch}
.silencio .miudo{margin-top:30px}

/* ================================================================= PAINEL
   A unidade da narrativa: uma cena ocupando a tela inteira, texto por cima. */
.painel{position:relative;min-height:92svh;display:flex;align-items:center;
  overflow:hidden;isolation:isolate;background:var(--atm)}
.painel .cena{position:absolute;inset:0;z-index:0}
.painel .cena img{width:100%;height:100%;object-fit:cover;object-position:var(--foco,center)}
.painel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--atm) 94%,black) 0%,
    color-mix(in srgb,var(--atm) 78%,black) 34%,
    rgba(0,0,0,.18) 68%, transparent 100%)}
.painel.direita::after{background:linear-gradient(260deg,
    color-mix(in srgb,var(--atm) 94%,black) 0%,
    color-mix(in srgb,var(--atm) 78%,black) 34%,
    rgba(0,0,0,.18) 68%, transparent 100%)}
.painel .wrap{position:relative;z-index:2;padding-top:clamp(70px,10vh,120px);
  padding-bottom:clamp(70px,10vh,120px);width:100%}
.painel .conteudo{max-width:min(48ch,52%)}
.painel.direita .conteudo{margin-left:auto}
@media(max-width:900px){
  .painel{min-height:auto}
  .painel .cena{position:relative;height:58svh}
  .painel::after{background:linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,.25) 34%,
    color-mix(in srgb,var(--atm) 84%,black) 62%,
    color-mix(in srgb,var(--atm) 96%,black) 100%)}
  .painel .wrap{margin-top:-16svh;padding-top:0;padding-bottom:64px}
  .painel .conteudo{max-width:none}
}

/* ---------------------------------------- painel com personagem recortado */
.recorte-painel{position:relative;background:var(--atm);overflow:hidden;isolation:isolate;
  padding:clamp(70px,12vh,140px) 0}
.recorte-painel .grade{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,5vw,70px);align-items:center;position:relative;z-index:2}
.recorte-painel.espelho .grade{grid-template-columns:.98fr 1.02fr}
.recorte-painel.espelho .texto{order:2}
.recorte-painel .figura{position:relative;justify-self:center}
.recorte-painel .figura img{max-height:min(74svh,660px);width:auto;
  filter:drop-shadow(0 44px 80px rgba(0,0,0,.55))}
/* o nome gigante atrás da figura — tipografia como cenário */
.recorte-painel .fundo-nome{position:absolute;z-index:0;left:50%;top:50%;
  transform:translate(-50%,-50%);font-size:clamp(90px,17vw,300px);font-weight:700;
  letter-spacing:-.05em;line-height:.8;white-space:nowrap;pointer-events:none;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--luz) 34%,transparent);
  opacity:.55}
@media(max-width:900px){
  .recorte-painel .grade,.recorte-painel.espelho .grade{grid-template-columns:1fr;gap:26px}
  .recorte-painel.espelho .texto{order:0}
  .recorte-painel .figura img{max-height:52svh;margin:0 auto}
  .recorte-painel .fundo-nome{font-size:clamp(70px,26vw,180px);opacity:.4}
}

/* ============================================================ O ELENCO
   Sete fatias verticais. A que está sob o cursor abre; as outras cedem
   espaço. Sem cards, sem grid previsível. */
.elenco{display:flex;width:100%;height:clamp(420px,72svh,760px);overflow:hidden;
  background:var(--breu);border-top:1px solid var(--linha-esc);
  border-bottom:1px solid var(--linha-esc)}
.fatia{position:relative;flex:1 1 0;min-width:0;overflow:hidden;text-decoration:none;
  border-right:1px solid rgba(255,255,255,.09);display:block;
  transition:flex-grow .6s var(--lento);background:var(--atm)}
.fatia:last-child{border-right:0}
.fatia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--foco,50% 22%);
  filter:grayscale(.72) contrast(1.06) brightness(.62);
  transform:scale(1.06);transition:filter .6s var(--lento),transform .8s var(--lento)}
.fatia::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 32%,
    color-mix(in srgb,var(--atm) 72%,black) 76%, color-mix(in srgb,var(--atm) 94%,black) 100%);
  transition:opacity .5s}
.fatia .rotulo{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:22px 18px;display:flex;flex-direction:column;gap:7px}
.fatia .nome{font-size:15px;font-weight:700;color:#fff;line-height:1.14;letter-spacing:-.01em}
.fatia .tipo{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--luz);
  opacity:0;transform:translateY(6px);transition:.45s var(--lento)}
.fatia .voz{font-family:L,Georgia,serif;font-style:italic;font-size:17px;color:#fff;
  opacity:0;max-height:0;overflow:hidden;transition:.5s var(--lento)}
.elenco:hover .fatia{flex-grow:.72}
.fatia:hover,.fatia:focus-visible{flex-grow:2.9}
.fatia:hover img,.fatia:focus-visible img{filter:grayscale(0) contrast(1.02) brightness(.86);
  transform:scale(1)}
.fatia:hover .tipo,.fatia:focus-visible .tipo{opacity:1;transform:none}
.fatia:hover .voz,.fatia:focus-visible .voz{opacity:1;max-height:120px;margin-top:4px}
@media(hover:none),(max-width:900px){
  .elenco{height:auto;flex-wrap:wrap}
  .fatia{flex:1 1 50%;height:44svh;border-bottom:1px solid rgba(255,255,255,.09)}
  .fatia:nth-child(7){flex-basis:100%;height:38svh}
  .fatia img{filter:grayscale(.3) brightness(.72);transform:none}
  .fatia .tipo{opacity:1;transform:none}
  .elenco:hover .fatia,.fatia:hover{flex-grow:1}
}

/* ================================================================= PALCO
   A página de personagens. Um por vez, em escala grande, com o
   ambiente mudando de cor a cada troca. */
/* O palco ocupa uma tela inteira: entra-se nele como quem entra num
   ambiente, e a cor do ambiente muda a cada personagem. */
.palco{position:relative;background:var(--atm);overflow:hidden;isolation:isolate;
  transition:background .7s var(--lento);min-height:100svh;display:flex;
  flex-direction:column;justify-content:center;
  padding:clamp(92px,12vh,124px) 0 clamp(16px,3vh,34px)}
.palco .wrap{width:100%}
.palco .fundo{position:absolute;inset:0;z-index:0;opacity:.34;
  background:radial-gradient(70% 60% at 72% 30%,var(--luz),transparent 70%);
  transition:opacity .7s,background .7s var(--lento)}
.palco .painel-ativo{position:relative;z-index:2;display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.palco .figura{position:relative;justify-self:center;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:14px}
.palco .figura img{max-height:min(66svh,620px);width:auto;
  filter:drop-shadow(0 40px 74px rgba(0,0,0,.6))}
.palco .figura img.cena-cheia{border-radius:var(--r);width:100%;height:auto;
  max-height:min(58svh,540px);object-fit:cover;object-position:var(--foco,50% 40%)}
/* a legenda da cena: existe porque em algumas artes quem aparece em primeiro
   plano é quem SOFRE, e isso não pode ficar ambíguo */
.palco .legenda{font-size:12.5px;color:#9db0b8;font-style:italic;font-family:L,serif;
  text-align:center;max-width:38ch;margin:0}
.palco .texto{padding-bottom:0}
.painel .nome-perso,.recorte-painel .nome-perso{font-size:clamp(28px,4vw,52px);
  line-height:1;letter-spacing:-.032em;margin:0 0 16px;color:#fff}
.palco .nome{font-size:clamp(31px,min(4.4vw,6.4vh),62px);line-height:.98;
  letter-spacing:-.036em;margin:0 0 12px;color:#fff}
.palco .fala{font-size:clamp(19px,min(2.4vw,3.4vh),31px);margin:0 0 clamp(14px,2.2vh,22px);
  color:var(--luz)}
.palco .corpo{font-size:16px}
.palco .corpo{color:#cddade;max-width:46ch}
/* a régua narrativa: comportamento → conflito → consequência → saída */
.regua{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:0}
.regua li{position:relative;padding:clamp(11px,1.5vh,15px) 0 clamp(11px,1.5vh,15px) 26px;
  border-top:1px solid rgba(255,255,255,.13);font-size:14.8px;color:#cddade;line-height:1.5}
.regua li:last-child{border-bottom:1px solid rgba(255,255,255,.13)}
.regua li::before{content:"";position:absolute;left:2px;top:calc(clamp(11px,1.5vh,15px) + 7px);
  width:7px;height:7px;
  border-radius:50%;background:var(--luz)}
.regua li b{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--luz);margin:0 0 5px;font-weight:700}
.regua li:last-child b{color:#fff}
.regua li:last-child::before{background:#fff}
/* a fita de seleção */
.fita{position:relative;z-index:2;display:flex;gap:10px;overflow-x:auto;
  padding:clamp(18px,3vh,30px) 0 6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fita::-webkit-scrollbar{display:none}
.fita button{flex:0 0 auto;width:96px;padding:0;border:0;background:none;cursor:pointer;
  text-align:left;opacity:.5;transition:opacity .3s}
.fita button .mini{width:96px;height:96px;border-radius:12px;overflow:hidden;
  border:2px solid transparent;transition:border-color .3s,transform .3s var(--lento)}
.fita button img{width:100%;height:100%;object-fit:cover;object-position:var(--foco,50% 22%);
  filter:grayscale(.6) brightness(.8);transition:filter .3s}
.fita button span{display:block;font-size:11.5px;color:#cddade;margin-top:8px;
  line-height:1.25;font-family:P;min-height:2.5em}
.fita button:hover,.fita button:focus-visible{opacity:.85}
.fita button[aria-selected=true]{opacity:1}
.fita button[aria-selected=true] .mini{border-color:var(--luz);transform:translateY(-3px)}
.fita button[aria-selected=true] img{filter:none}
@media(max-width:900px){
  .palco{min-height:0;padding-top:96px}
  .palco .painel-ativo{grid-template-columns:1fr;gap:22px}
  .palco .figura img{max-height:42svh;margin:0 auto}
  .palco .figura img.cena-cheia{max-height:34svh}
  .fita button,.fita button .mini{width:74px}
  .fita button .mini{height:74px}
}
/* O padrão é a versão em SEQUÊNCIA: é ela que aparece sem JavaScript, se o
   arquivo não carregar, e é ela que os buscadores leem. O palco interativo
   só entra quando o site.js confirma que rodou (classe .js-ok). */
.palco-interativo{display:none}
.js-ok .palco-interativo{display:block}
.js-ok .palco-lista{display:none}

/* ============================================================ MODO CLARO
   A parte institucional: entra depois da narrativa, e muda de tom
   de propósito. Aqui a informação é objetiva. */
.claro{background:var(--papel);color:var(--tinta)}
.claro.creme{background:var(--creme)}
.claro h1,.claro h2,.claro h3{color:var(--breu)}
.claro .olho{color:var(--areia-esc)}
.claro .lede,.claro .corpo{color:var(--tinta-cl)}
.claro .corpo b{color:var(--breu)}
.claro a{color:var(--areia-esc)}
.claro .miudo{color:#6c7780}
.claro .fala{color:var(--breu)}
section{padding:clamp(64px,10vh,110px) 0}
section.rente{padding:0}
.cab{margin:0 0 clamp(34px,5vh,56px);max-width:52ch}
.cab.centro{margin-left:auto;margin-right:auto;text-align:center}
.cab h2{margin:0 0 16px}
.cab p{margin:0}
/* Cabeçalho editorial: o título ocupa a esquerda e a entrada de texto
   desce alinhada à base, à direita. Evita a meia-tela vazia sem intenção. */
.cab.duplo{max-width:none;display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(22px,4vw,64px);align-items:end}
.cab.duplo .olho{grid-column:1/-1;margin-bottom:4px}
.cab.duplo h2{margin:0;max-width:18ch}
.cab.duplo p{max-width:46ch;padding-bottom:6px}
@media(max-width:900px){
  .cab.duplo{grid-template-columns:1fr;gap:16px;align-items:start}
  .cab.duplo h2{max-width:none}
}

/* dois blocos lado a lado — viram um só no celular */
.duo-final{display:grid}
@media(max-width:880px){
  .duo-final{grid-template-columns:1fr!important;gap:34px!important}
}

/* o texto centrado do silêncio */
.silencio .lede,.silencio .miudo{margin-left:auto;margin-right:auto}
.silencio .olho{text-align:center}

/* ------------------------------------------------------------- listas */
.lista{margin:0;padding:0;list-style:none}
.lista li{position:relative;padding:0 0 0 28px;margin:0 0 14px;font-size:16px;
  line-height:1.6;color:var(--claro-2)}
.claro .lista li{color:var(--tinta-cl)}
.lista li::before{content:"";position:absolute;left:3px;top:9px;width:8px;height:8px;
  border-radius:50%;background:var(--areia)}
.claro .lista li::before{background:var(--areia-esc);opacity:.55}
.lista li b{color:#fff}
.claro .lista li b{color:var(--breu)}

/* --------------------------------------------------------- portas/ofertas
   Sem caixa e sem borda: só uma régua, o título e a linha de texto. */
.portas{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.porta{position:relative;padding:30px 26px 30px 0;border-top:1px solid var(--linha);
  text-decoration:none;display:block;transition:padding-left .3s var(--lento)}
.claro .porta:hover{padding-left:12px}
.porta h3{font-size:20px;margin:0 0 9px;color:var(--breu);letter-spacing:-.02em}
.porta p{font-size:14.8px;color:var(--tinta-cl);margin:0;line-height:1.58}
.porta .ir{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:13.5px;
  font-weight:700;color:var(--areia-esc)}
.porta .ir svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--lento)}
.porta:hover .ir svg{transform:translateX(4px)}
@media(min-width:700px){.portas{gap:0 clamp(26px,4vw,54px)}}

/* --------------------------------------------------------------- passos */
.passos{display:grid;gap:clamp(24px,3vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:p}
.passo{position:relative;padding-top:22px;border-top:2px solid var(--areia)}
.passo b{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--areia-esc);margin:0 0 10px}
.claro .passo b{color:var(--areia-esc)}
.passo h3{font-size:19px;margin:0 0 8px;letter-spacing:-.02em}
.passo p{font-size:14.8px;color:var(--tinta-cl);margin:0;line-height:1.58}
section:not(.claro) .passo p{color:var(--claro-2)}
section:not(.claro) .passo b{color:var(--areia)}

/* --------------------------------------------------------------- livros */
.estante{display:grid;gap:0}
.titulo-linha{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,40px);
  align-items:baseline;padding:26px 0;border-top:1px solid var(--linha);
  transition:background .3s}
.titulo-linha:last-child{border-bottom:1px solid var(--linha)}
.titulo-linha .fase{font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;padding-top:6px}
.fase.pronto{color:var(--ok)}
.fase.fila{color:#756338}
.titulo-linha h3{font-size:clamp(19px,2.3vw,27px);letter-spacing:-.024em;margin:0 0 8px;
  color:var(--breu)}
.titulo-linha p{font-size:14.8px;color:var(--tinta-cl);margin:0;max-width:56ch;line-height:1.58}
.titulo-linha .acao{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media(max-width:820px){
  .titulo-linha{grid-template-columns:1fr;gap:14px}
  .titulo-linha .fase{padding-top:0}
}

/* ------------------------------------------------------------ formulário */
.form-card{background:rgba(255,255,255,.05);border:1px solid var(--linha-esc);
  border-radius:var(--r);padding:clamp(24px,3vw,32px)}
.claro .form-card{background:var(--papel);border-color:var(--linha);
  box-shadow:0 18px 50px rgba(11,32,40,.09)}
.form-card h3{font-size:22px;margin:0 0 8px;letter-spacing:-.024em}
.form-card .p{font-size:14px;color:var(--claro-2);margin:0 0 20px;line-height:1.55}
.claro .form-card .p{color:var(--tinta-cl)}
.campo{margin:0 0 14px}
.campo label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--claro-2);margin:0 0 6px}
.claro .campo label{color:var(--tinta-cl)}
.campo input,.campo select,.campo textarea{width:100%;padding:14px 15px;
  border:1px solid rgba(255,255,255,.18);border-radius:11px;font:inherit;font-size:15.5px;
  color:#fff;background:rgba(255,255,255,.05);font-family:P}
.claro .campo input,.claro .campo select,.claro .campo textarea{
  border-color:var(--linha);color:var(--tinta);background:#fff}
.campo textarea{min-height:112px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;
  border-color:var(--areia);box-shadow:0 0 0 3px rgba(240,192,120,.22)}
.campo input[aria-invalid=true]{border-color:#e06a6a}
.campo select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2355616a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:12.8px;color:var(--claro-2);
  line-height:1.5;margin:8px 0 18px;cursor:pointer}
.claro .consent{color:var(--tinta-cl)}
.consent input{margin-top:2px;width:22px;height:22px;accent-color:var(--areia);
  flex:0 0 auto;cursor:pointer}
.hp{position:absolute;left:-9999px;opacity:0;height:0}
.nota{font-size:11.8px;color:#7d919b;text-align:center;margin:14px 0 0;line-height:1.5}
.claro .nota{color:#6c7780}
.erro{background:rgba(224,106,106,.14);color:#ffb4b4;border-radius:10px;padding:11px 13px;
  font-size:13.5px;margin:0 0 14px;display:none}
.claro .erro{background:#fdecec;color:#a11b1b}
.ok-box{display:none;text-align:center;padding:12px 0 4px}
.ok-box .ck{width:56px;height:56px;border-radius:50%;background:rgba(240,192,120,.16);
  color:var(--areia);display:grid;place-items:center;margin:0 auto 16px}
.claro .ok-box .ck{background:#e6f6ec;color:var(--ok)}
.ok-box .ck svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.ok-box h3{margin:0 0 8px}
.ok-box p{font-size:14.5px;color:var(--claro-2);margin:0 0 20px}
.claro .ok-box p{color:var(--tinta-cl)}
.ok-box .baixas{display:grid;gap:10px}

/* -------------------------------------------------------------- perguntas */
details{border-top:1px solid var(--linha);padding:22px 0}
details:last-of-type{border-bottom:1px solid var(--linha)}
details summary{cursor:pointer;font-weight:700;font-size:17.5px;color:var(--breu);
  list-style:none;display:flex;gap:16px;align-items:flex-start;letter-spacing:-.015em}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";margin-left:auto;flex:0 0 auto;width:13px;height:13px;
  margin-top:6px;border-right:2px solid var(--areia-esc);border-bottom:2px solid var(--areia-esc);
  transform:rotate(45deg);transition:transform .3s var(--lento)}
details[open] summary::after{transform:rotate(-135deg)}
details p{margin:14px 0 0;font-size:15.5px;color:var(--tinta-cl);line-height:1.66;max-width:70ch}

/* ------------------------------------------------------------- tabela */
.rolar{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabela{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.tabela th,.tabela td{text-align:left;padding:16px 18px 16px 0;
  border-bottom:1px solid var(--linha);vertical-align:top}
.tabela th{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--areia-esc);font-weight:700}
.claro .tabela td{color:var(--tinta-cl)}
.tabela td b{color:var(--breu)}
.aviso{background:var(--creme);border-left:3px solid var(--areia);border-radius:0 10px 10px 0;
  padding:20px 22px;font-size:14.5px;color:#5c4a2a;line-height:1.62;max-width:78ch}
.aviso b{color:#3d3018}

/* --------------------------------------------------------------- citação */
.citacao{border-left:2px solid var(--areia);padding:6px 0 6px 26px;margin:0;
  max-width:34ch}
.citacao p{font-family:L,Georgia,serif;font-size:clamp(19px,2.2vw,26px);line-height:1.4;
  color:#fff;margin:0 0 12px}
.claro .citacao p{color:var(--breu)}
.citacao cite{font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--areia-esc)}
section:not(.claro) .citacao cite{color:var(--areia)}

/* --------------------------------------------------------------- números */
.nums{display:grid;gap:clamp(20px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.num b{display:block;font-size:clamp(36px,5vw,58px);font-weight:700;letter-spacing:-.04em;
  line-height:1;color:var(--areia)}
.claro .num b{color:var(--breu)}
.num span{font-size:13.5px;color:var(--claro-2);display:block;margin-top:8px;line-height:1.4}
.claro .num span{color:var(--tinta-cl)}

/* ---------------------------------------------------------- chamada final */
.chamada{position:relative;background:var(--breu-2);overflow:hidden;isolation:isolate;
  padding:clamp(74px,13vh,140px) 0}
.chamada .cena-fundo{position:absolute;inset:0;z-index:0}
.chamada .cena-fundo img{width:100%;height:100%;object-fit:cover;
  object-position:var(--foco,50% 30%)}
.chamada::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(97deg, rgba(8,21,27,.97) 0%, rgba(8,21,27,.92) 34%,
    rgba(8,21,27,.68) 58%, rgba(8,21,27,.34) 82%, rgba(8,21,27,.22) 100%)}
.chamada .titulo,.chamada .lede,.chamada .botoes{max-width:min(58%,640px)}
@media(max-width:900px){
  .chamada::after{background:linear-gradient(180deg, rgba(8,21,27,.42) 0%,
    rgba(8,21,27,.82) 42%, rgba(8,21,27,.96) 72%)}
  .chamada .titulo,.chamada .lede,.chamada .botoes{max-width:none}
  .chamada{padding-top:clamp(140px,26vh,240px)}
}
.chamada .wrap{position:relative;z-index:2}
.chamada .titulo{max-width:18ch;margin:0 0 20px}
.chamada .lede{margin:0 0 32px}

/* ------------------------------------------------------------ autor */
.autor{display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,3vw,38px);
  align-items:start}
.autor .marca-autor{width:96px;height:96px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(150deg,var(--areia),#c98f3c);display:grid;place-items:center;
  font-weight:700;font-size:32px;color:var(--breu);letter-spacing:-.02em}
@media(max-width:640px){.autor{grid-template-columns:1fr}}

/* ------------------------------------------------------------ redes */
.redes-linha{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rede{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--linha-esc);color:#c3d0d6;transition:.2s var(--lento);
  text-decoration:none;background:transparent}
.rede:hover{border-color:var(--areia);color:var(--areia);transform:translateY(-2px)}
.claro .rede{border-color:var(--linha);color:var(--tinta-cl)}
.claro .rede:hover{border-color:var(--areia-esc);color:var(--areia-esc)}
.rede svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------- rodapé */
footer{background:var(--breu);color:#8095a0;padding:clamp(56px,8vh,80px) 0 36px;
  font-size:14px;border-top:1px solid var(--linha-esc)}
footer a{color:#c3d0d6;text-decoration:none}
footer a:hover{color:var(--areia)}
footer .cols{display:grid;gap:clamp(26px,4vw,44px);
  grid-template-columns:2.15fr 1fr 1fr 1.2fr;margin:0 0 44px}
@media(max-width:860px){footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer .cols{grid-template-columns:1fr}}
footer b{color:#fff;display:block;margin:0 0 14px;font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase}
footer ul{margin:0;padding:0;list-style:none}
footer li{margin:0 0 10px}
footer .logo-rodape{height:34px;width:auto;margin:0 0 20px;opacity:.9}
footer .fim{border-top:1px solid var(--linha-esc);padding-top:24px;font-size:12.5px;
  color:#71858f;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}

/* ============================================================= MOVIMENTO
   Entradas ligadas ao scroll.

   Repare no ".anima" na frente de tudo: essa classe é posta pelo próprio
   navegador, e RETIRADA sozinha depois de 2,5 s se o site.js não tiver
   rodado. Sem isso, um JavaScript que não carrega deixaria o site inteiro
   invisível — que é exatamente o tipo de falha silenciosa que ninguém
   descobre a tempo. Sem JavaScript, nada aqui se aplica: o texto nasce
   visível. */
.anima [data-entra]{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--lento),transform .9s var(--lento)}
.anima [data-entra].dentro{opacity:1;transform:none}
.anima [data-entra="lado"]{transform:translateX(-32px)}
.anima [data-entra="lado"].dentro{transform:none}
.anima [data-entra="escala"]{transform:scale(.965);opacity:0}
.anima [data-entra="escala"].dentro{transform:none;opacity:1}
[data-atraso="1"]{transition-delay:.1s}
[data-atraso="2"]{transition-delay:.2s}
[data-atraso="3"]{transition-delay:.32s}
[data-atraso="4"]{transition-delay:.44s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .anima [data-entra]{opacity:1!important;transform:none!important}
  .descer i{display:none}
}

@media print{
  header.topo,footer,.chamada,.form-card,.elenco,.descer{display:none}
  body{background:#fff;color:#000;font-size:12pt}
  .painel .cena,.abertura .figura{position:relative;height:auto}
}