/* ============================================================
   LP Núcleo Ser Plural — consulta inicial infantil
   Direção: "agenda escolar". O bilhete da escola é o elemento
   gráfico, e é o mesmo gancho da headline.

   PALETA — origem de cada cor
   O logo é o único ativo de marca real (símbolo de quebra-cabeça
   + PLURAL com uma cor por letra). O site atual usa teal do
   preset Hostinger Horizons, que NÃO é decisão de marca e foi
   descartado. O azul dominante vem do Instagram (@nucleoserplural),
   que usa #0078F0 em quase metade dos posts — escolhido para dar
   congruência entre o criativo do anúncio e a página.
   Tons de texto e do CTA são derivados escurecidos, porque as
   cores puras do logo reprovam em contraste WCAG.

   TIPOGRAFIA — a marca não define fonte (o site não carrega
   nenhuma webfont; o logo é lettering desenhado)
   Baloo 2   títulos   equivalente mais fiel ao lettering pesado
                       e geométrico do logo
   Literata  corpo     serifa desenhada para leitura longa em tela
   Caveat    bilhetes  manuscrita, só dentro do bilhete
   ============================================================ */

:root{
  /* marca */
  --azul:#0078F0;        /* cor de marca (Instagram): blocos e elementos */
  --azul-faixa:#0A6BD4;  /* faixa com texto pequeno: #0078F0 dá só 4.25 com branco (reprova AA) */
  --azul-ui:#0A54A8;     /* azul acessível p/ texto e links — 7.07 s/ papel */
  --tinta:#0A2C57;       /* texto principal — 13.32 s/ papel */
  --tinta-2:#4A5B72;     /* texto secundário */
  --coral:#D63420;       /* CTA, derivado do coral do logo — branco em cima 4.80 */
  --coral-esc:#B22A18;   /* hover do CTA */
  --grifo:#F8EC2E;       /* marca-texto (amarelo do logo) — tinta em cima 10.03 */

  /* superfícies */
  --papel:#FBFAF7;
  --papel-2:#F2EFE6;     /* papel mais quente, seção 2 */
  --branco:#FFFFFF;
  --pauta:#D9E4F2;       /* linha de pauta do bilhete */
  --borda:#E4DFD2;

  /* detalhe (só nos bilhetes) */
  --verde:#5BBA51;
  --azul-claro:#38AAE1;
  --roxo:#862B6E;

  --display:'Baloo 2', system-ui, sans-serif;
  --corpo:'Literata', Georgia, serif;
  --mao:'Caveat', 'Segoe Script', cursive;

  --wrap:1180px;
  --r:14px;

  --sombra-papel:0 1px 2px rgba(10,44,87,.06), 0 14px 30px -18px rgba(10,44,87,.28);
  --sombra-cta:0 10px 24px -12px rgba(214,52,32,.85);
}

*{box-sizing:border-box;}

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* textura de papel: ruído sutil, sem imagem externa */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

.wrap{width:min(100% - 2.4rem, var(--wrap)); margin-inline:auto; position:relative; z-index:1;}

p{margin:0 0 1.05em;}
strong{font-weight:600;}

/* ---------- botão ---------- */
.btn{
  display:inline-block;
  font-family:var(--display);
  font-size:1.06rem;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.005em;
  color:#fff;
  background:var(--coral);
  border:0; border-radius:var(--r);
  padding:1.02rem 1.9rem;
  text-decoration:none;
  box-shadow:var(--sombra-cta);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover{
  background:var(--coral-esc);
  transform:translateY(-2px);
  box-shadow:0 14px 30px -12px rgba(214,52,32,.9);
}
.btn:active{transform:translateY(0);}
.btn:focus-visible{outline:3px solid var(--azul); outline-offset:3px;}

/* ---------- grifo de marca-texto ---------- */
.grifo{
  /* marca-texto: altura e posição em em, ancoradas na tipografia,
     para o grifo atravessar a palavra em vez de sublinhar */
  background-image:linear-gradient(var(--grifo), var(--grifo));
  background-size:100% .74em;
  background-position:0 .30em;
  background-repeat:no-repeat;
  padding:0 .12em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ============================================================
   HERO — Type Hero
   ============================================================ */
.hero{
  position:relative;
  padding:1.5rem 0 0;
  background:var(--papel);
}

.hero__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding-bottom:2.2rem;
}
.hero__logo{width:auto; height:52px;}
.hero__meta{
  font-family:var(--display);
  font-size:.78rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-2);
}

.hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.4rem;
  padding-bottom:3rem;
}

.hero__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.95rem, 4.1vw, 2.78rem);
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--tinta);
  margin:0 0 1.1rem;
  max-width:21ch;
  text-wrap:balance;
}

.hero__sub{
  font-size:clamp(1rem, 2.4vw, 1.16rem);
  line-height:1.58;
  color:var(--tinta-2);
  max-width:52ch;
  margin-bottom:1.7rem;
}

.hero__cta{width:100%; text-align:center;}

.hero__micro{
  font-size:.9rem;
  color:var(--tinta-2);
  margin:.85rem 0 1.3rem;
  max-width:46ch;
}

/* ---------- selo do Google ---------- */
.selo{
  display:inline-flex; align-items:center; gap:.55rem; min-height:44px;
  text-decoration:none;
  color:var(--tinta);
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:999px;
  padding:.42rem .95rem .42rem .8rem;
  box-shadow:0 1px 2px rgba(10,44,87,.05);
  transition:border-color .18s ease, transform .18s ease;
}
.selo:hover{border-color:var(--azul); transform:translateY(-1px);}
.selo{padding-block:.6rem;}
.selo__estrelas{color:#F2A322; font-size:.9rem; letter-spacing:.06em;}
.selo__txt{font-size:.86rem; color:var(--tinta-2);}
.selo__txt strong{color:var(--tinta); font-weight:600;}

/* ============================================================
   BILHETE — elemento gráfico do conceito
   ============================================================ */
.bilhete{
  position:relative;
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:6px;
  padding:1.5rem 1.5rem 1.4rem 2.7rem;
  box-shadow:var(--sombra-papel);
  /* pauta de caderno, alinhada ao line-height do texto manuscrito (28px) */
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0 27px,
    var(--pauta) 27px 28px
  );
  background-position:0 1.9rem;
}
/* furos de fichário */
.bilhete::before{
  content:"";
  position:absolute; left:.85rem; top:1.3rem; bottom:1.3rem; width:9px;
  background-image:radial-gradient(circle at 50% 12px, var(--papel-2) 4.5px, transparent 5px);
  background-size:9px 34px;
  opacity:.9;
}

.bilhete__data{
  display:block;
  font-family:var(--mao);
  font-size:1.05rem;
  color:var(--azul-ui);
  margin-bottom:.15rem;
}
.bilhete__txt{
  font-family:var(--mao);
  font-size:1.34rem;
  line-height:28px;   /* casa com o passo da pauta */
  color:var(--tinta);
  margin:0 0 .55rem;
}
.bilhete__assin{
  display:block;
  font-family:var(--corpo);
  font-size:.76rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--tinta-2);
}

.bilhete--hero{
  rotate:-1.6deg;
  max-width:24rem;
}

/* ============================================================
   FAIXA DE CREDIBILIDADE (fecha o hero, usa o azul de marca)
   ============================================================ */
.credband{
  background:var(--azul-faixa);
  color:#fff;
  position:relative; z-index:1;
}
.credband__in{
  display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.1rem;
  padding:.95rem 0;
  font-size:.86rem;
  line-height:1.4;
}
.credband strong{font-weight:600;}
.credband__sep{
  width:4px; height:4px; border-radius:50%;
  background:rgba(255,255,255,.55);
  flex:0 0 auto;
}

/* ============================================================
   SEÇÃO 2 — A CENA (Collage)
   ============================================================ */
.cena{
  background:var(--papel-2);
  padding:4rem 0 4.4rem;
  position:relative;
}

.cena__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;
}

.h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.75rem, 4.6vw, 2.7rem);
  line-height:1.14;
  letter-spacing:-.012em;
  color:var(--tinta);
  margin:0 0 .9rem;
  max-width:18ch;
}

.lead{
  font-size:clamp(1.05rem, 2.4vw, 1.2rem);
  color:var(--tinta);
  font-weight:600;
  max-width:40ch;
  margin-bottom:1.6rem;
}

.cena__texto p{max-width:56ch; color:var(--tinta-2);}

.cena__fecho{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.15rem, 2.8vw, 1.45rem);
  line-height:1.35;
  color:var(--tinta);
  margin-top:1.9rem;
  padding-left:1.1rem;
  border-left:4px solid var(--azul);
}

/* ---------- pilha de bilhetes ---------- */
.cena__pilha{
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}
.cena__pilha .bilhete{max-width:23rem;}
.cena__pilha .bilhete__txt{font-size:1.3rem;}

/* rotate como propriedade independente: o AOS escreve em transform
   e apagaria a rotação se ela morasse lá */
.bilhete--a{rotate:-1.8deg;}
.bilhete--b{rotate:1.4deg;}
.bilhete--c{rotate:-.9deg;}
.bilhete--d{rotate:1.9deg;}

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width:900px){
  body{font-size:18px;}

  .hero{padding-top:2rem;}
  .hero__logo{height:66px;}
  .hero__bar{padding-bottom:3.4rem;}

  .hero__grid{
    grid-template-columns:1.35fr .65fr;
    gap:3rem;
    align-items:center;
    padding-bottom:4.2rem;
  }
  .hero__title{max-width:15ch;}
  .hero__cta{width:auto;}
  .hero__micro{margin-top:1rem;}

  /* o bilhete acompanha o eixo do texto e avança um pouco pra fora da coluna */
  .bilhete--hero{rotate:-2.2deg; transform:translateX(1.2rem); max-width:26rem;}
  .bilhete--hero .bilhete__txt{font-size:1.46rem; line-height:31px;}
  .bilhete--hero{background-position:0 2rem;}

  .cena{padding:5.6rem 0 6rem;}
  .cena__grid{
    grid-template-columns:1.1fr .9fr;
    gap:4.5rem;
    align-items:start;
  }

  /* colagem: os bilhetes se sobrepõem no desktop */
  .cena__pilha{
    position:sticky; top:3rem;
    display:block;
    padding-top:1rem;
  }
  .cena__pilha .bilhete{position:relative;}
  .bilhete--a{margin-left:0;    z-index:4;}
  .bilhete--b{margin:-1.1rem 0 0 3.2rem; z-index:3;}
  .bilhete--c{margin:-1.1rem 0 0 .6rem;  z-index:2;}
  .bilhete--d{margin:-1.1rem 0 0 4rem;   z-index:1;}
}

@media (max-width:899px){
  /* o bilhete decorativo vem SEMPRE depois do CTA no mobile */
  .hero__bilhete{margin-top:.4rem;}
  /* os separadores quebram para linha própria no wrap e viram sujeira */
  .credband__sep{display:none;}
  .credband__in{flex-direction:column; align-items:flex-start; gap:.42rem;}
  .bilhete--hero{max-width:100%;}
  .bilhete__txt{font-size:1.28rem;}
  .credband__in{font-size:.8rem; padding:.85rem 0;}
  .cena{padding:3.2rem 0 3.6rem;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
  [data-aos]{opacity:1 !important; transform:none !important;}
}

/* ============================================================
   UTILITÁRIOS COMPARTILHADOS (seções 3 a 10)
   ============================================================ */
.wrap--narrow{width:min(100% - 2.4rem, 820px);}
.wrap--faq{width:min(100% - 2.4rem, 780px);}
.wrap--prova{width:min(100% - 2.4rem, 720px);}
.wrap--fim{width:min(100% - 2.4rem, 760px);}

.h2--inv{color:#fff;}
.lead--inv{color:rgba(255,255,255,.92);}

.destaque{
  font-weight:600; color:var(--tinta);
  background-image:linear-gradient(var(--grifo), var(--grifo));
  background-size:100% .68em; background-position:0 .34em; background-repeat:no-repeat;
  padding:0 .1em;
}

/* citação em bloco (seção 4) */
.citacao{
  margin:2.4rem 0 2rem; padding:.2rem 0 .2rem 1.2rem;
  border-left:4px solid var(--coral);
}
.citacao__txt{
  font-family:var(--mao); font-size:1.5rem; line-height:1.35;
  color:var(--tinta); margin:0 0 .45rem;
}
.citacao__aut{
  font-family:var(--corpo); font-size:.8rem; font-style:normal;
  text-transform:uppercase; letter-spacing:.08em; color:var(--tinta-2);
}

/* ============================================================
   SEÇÃO 3 — Split Assimétrico + Bleed Right + Counter
   ============================================================ */
.espera{background:var(--papel); padding:3.2rem 0 3.6rem; position:relative; overflow-x:clip;}
.espera__grid{display:grid; grid-template-columns:1fr; gap:2.2rem;}
.espera__texto p{max-width:56ch; color:var(--tinta-2);}
.espera__foto{margin:0;}
.espera__foto img{
  width:100%; height:260px; object-fit:cover; display:block;
  border-radius:14px; box-shadow:var(--sombra-papel);
}

.dados{
  display:grid; grid-template-columns:1fr; gap:1.5rem;
  margin:2.1rem 0 1.8rem; padding:1.5rem 0;
  border-top:1px solid var(--borda); border-bottom:1px solid var(--borda);
}
.dado__num{
  display:block; font-family:var(--display); font-weight:700;
  font-size:2.4rem; line-height:1.05; color:var(--azul);
  font-variant-numeric:tabular-nums;
}
.dado__rot{display:block; font-size:.9rem; color:var(--tinta-2); margin:.25rem 0 .4rem; max-width:34ch;}
.dado__fonte{
  display:inline-block; font-size:.78rem; color:var(--tinta-2); opacity:.85;
  text-decoration:none; padding:.75rem 0; line-height:1.2;
  min-height:44px; display:inline-flex; align-items:center;
}
.dado__fonte span{border-bottom:1px dotted currentColor; padding-bottom:1px;}
.dado__fonte:hover{opacity:1; color:var(--azul-ui);}
.dado__fonte:focus-visible{outline:3px solid var(--azul); outline-offset:3px;}

/* ============================================================
   SEÇÃO 4 — Broken Grid + Diagonal Divider + Draw SVG
   ============================================================ */
.mecanismo{
  background:var(--papel-2); position:relative;
  padding:4.4rem 0 3.6rem; margin-top:-1px;
  clip-path:polygon(0 2.5rem, 100% 0, 100% 100%, 0 100%);
}
.mecanismo p{max-width:60ch; color:var(--tinta-2);}
.mecanismo .lead{color:var(--tinta);}

.diagrama{
  display:grid; grid-template-columns:1fr; gap:2rem;
  margin:2.4rem 0 2.2rem;
}
.diagrama__lado{
  background:var(--branco); border:1px solid var(--borda); border-radius:14px;
  padding:1.3rem 1.1rem 1.1rem; text-align:center;
}
.diagrama__tit{
  display:block; font-family:var(--display); font-weight:700;
  font-size:1rem; color:var(--tinta); margin-bottom:.5rem;
}
.diagrama__svg{width:100%; max-width:250px; height:auto; display:block; margin:0 auto;}
.diagrama__leg{
  display:block; font-size:.72rem; line-height:1.45; color:var(--tinta-2);
  margin-top:.6rem; max-width:30ch; margin-inline:auto;
}
/* lado esquerdo: sem verificação */
.diagrama__svg .alvos circle{fill:none; stroke:var(--borda); stroke-width:2;}
.diagrama__svg .alvo-ativo{fill:none; stroke:var(--tinta-2); stroke-width:2.5;}
.diagrama__svg .seta-off{stroke:var(--tinta-2); stroke-width:2.5; stroke-linecap:round;}
/* lado direito: rastreio completo */
.diagrama__svg--on .seta{
  stroke:var(--azul); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:120; stroke-dashoffset:120;
}
.diagrama__svg--on.is-draw .seta{animation:draw .42s ease-out forwards;}
.diagrama__svg--on.is-draw .seta:nth-of-type(1){animation-delay:.00s}
.diagrama__svg--on.is-draw .seta:nth-of-type(2){animation-delay:.09s}
.diagrama__svg--on.is-draw .seta:nth-of-type(3){animation-delay:.18s}
.diagrama__svg--on.is-draw .seta:nth-of-type(4){animation-delay:.27s}
.diagrama__svg--on.is-draw .seta:nth-of-type(5){animation-delay:.36s}
.diagrama__svg--on.is-draw .seta:nth-of-type(6){animation-delay:.45s}
@keyframes draw{to{stroke-dashoffset:0}}
.diagrama__svg--on circle{stroke:none;}
.diagrama__svg--on .a1{fill:#EF4939}.diagrama__svg--on .a2{fill:#38AAE1}
.diagrama__svg--on .a3{fill:#F8EC2E}.diagrama__svg--on .a4{fill:#5BBA51}
.diagrama__svg--on .a5{fill:#302F5F}.diagrama__svg--on .a6{fill:#862B6E}
.diagrama__svg--on .a7{fill:var(--azul)}

/* faixa divisória */
.faixa-lapis{line-height:0; background:var(--papel-2);}
.faixa-lapis img{
  width:100%; height:130px; object-fit:cover; object-position:center 35%; display:block;
}

/* ============================================================
   SEÇÃO 5 — Scroll Storytelling + Sticky
   ============================================================ */
.passos{background:var(--papel); padding:3.2rem 0 3.6rem;}
.passos__h2{margin-bottom:.6rem;}
.passos__grid{display:grid; grid-template-columns:1fr; gap:1.6rem; margin-top:2rem;}
.passos__midia{display:none;}
.passos__lista{list-style:none; margin:0; padding:0; display:grid; gap:1.4rem;}

.passo{position:relative; padding:1.4rem 0 0;}
.passo__n{
  display:block; position:relative; z-index:0;
  font-family:var(--display); font-weight:700; font-size:3.5rem;
  color:var(--azul); opacity:.22; line-height:.78;
  margin:0 0 -.45rem -.2rem; pointer-events:none;
}
.passo__t{
  position:relative; z-index:1;
  font-family:var(--display); font-weight:700; font-size:1.35rem; line-height:1.25;
  color:var(--tinta); margin:0 0 .5rem;
}
.passo p{position:relative; z-index:1; color:var(--tinta-2); max-width:58ch; margin:0;}
.passo__foto{margin:.9rem 0 0;}
.passo__foto img{width:100%; height:240px; object-fit:cover; border-radius:18px; display:block; box-shadow:var(--sombra-papel);}

.passo--destaque{
  background:var(--branco); border:1px solid var(--borda); border-radius:14px;
  padding:1.6rem; overflow:hidden; margin-top:.6rem;
}
.passo--destaque .passo__n{margin-bottom:-.35rem;}
.passo__faixa{
  position:absolute; inset:0 0 auto 0; height:4px; display:block;
  background:linear-gradient(90deg,
    #EF4939 0 16.66%, #38AAE1 16.66% 33.33%, #F8EC2E 33.33% 50%,
    #5BBA51 50% 66.66%, #302F5F 66.66% 83.33%, #862B6E 83.33% 100%);
}
.passos__cta{margin-top:2.2rem;}

/* mídia sticky do desktop */
.midia{opacity:0; transition:opacity .4s ease; position:absolute; inset:0;}
.midia.is-on{opacity:1;}
.midia img{width:100%; height:100%; object-fit:cover; border-radius:18px; box-shadow:var(--sombra-papel);}
.bilhete--passo{max-width:100%;}
.bilhete--azul .bilhete__data{color:var(--coral);}

/* ============================================================
   SEÇÃO 6 — Editorial + Nested Frames + Text Reveal
   ============================================================ */
.autoridade{background:var(--papel-2); padding:3.2rem 0 3.6rem;}
.autoridade__grid{display:grid; grid-template-columns:1fr; gap:2.2rem; margin-top:1.8rem;}
.autoridade__voz p{color:var(--tinta-2); max-width:52ch;}

.credencial__wrap{position:relative; padding:0 14px 14px 0;}
.credencial__wrap::after{
  content:""; position:absolute; inset:14px 0 0 14px;
  background:var(--azul); border-radius:16px; z-index:0;
}
.credencial{
  position:relative; z-index:1;
  background:var(--branco); border:1px solid var(--borda); border-radius:16px;
  padding:1.9rem 1.7rem 1.6rem; box-shadow:var(--sombra-papel);
  overflow:hidden; transition:rotate .26s ease, translate .26s ease;
}
.credencial__faixa{
  position:absolute; inset:0 0 auto 0; height:6px; display:block;
  background:linear-gradient(90deg,
    #EF4939 0 16.66%, #38AAE1 16.66% 33.33%, #F8EC2E 33.33% 50%,
    #5BBA51 50% 66.66%, #302F5F 66.66% 83.33%, #862B6E 83.33% 100%);
}
.credencial__rot{
  display:block; font-family:var(--corpo); font-weight:600; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); margin-bottom:.5rem;
}
.credencial__nome{
  font-family:var(--display); font-weight:700; font-size:1.9rem; line-height:1.1;
  color:var(--tinta); margin:0 0 .2rem;
}
.credencial__tit{font-size:.95rem; color:var(--tinta-2); margin:0 0 1rem;}
.credencial__hr{border:0; border-top:1px dashed var(--borda); margin:0 0 1rem;}
.credencial__crp{
  display:inline-block; font-weight:600; font-size:1.05rem; color:var(--azul-ui);
  background:var(--branco); border:1.5px solid var(--azul-ui); border-radius:999px;
  padding:.35rem .9rem; margin:0 0 1.1rem;
}
.credencial__anos{
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
  margin:0; padding-top:.2rem;
}
.credencial__anos strong{
  font-family:var(--display); font-weight:700; font-size:2.1rem; line-height:1;
  color:var(--azul);
}
.credencial__anos span{font-size:.9rem; color:var(--tinta-2); max-width:18ch;}

.voz{position:relative; margin:0 0 1.6rem; padding:0;}
.voz__aspas{
  position:absolute; top:-1.6rem; left:-.5rem; z-index:0;
  font-family:var(--display); font-size:5rem; line-height:1;
  color:var(--grifo); opacity:.55; pointer-events:none;
}
.voz__txt{
  position:relative; z-index:1; margin:0 0 .6rem;
  font-family:var(--mao); font-size:1.6rem; line-height:1.4; color:var(--tinta); max-width:24ch;
}
.voz__txt span{display:block; overflow:hidden;}
.js-reveal span{clip-path:inset(100% 0 0 0);}
.js-reveal.is-on span{animation:reveal .52s ease-out forwards;}
.js-reveal.is-on span:nth-child(1){animation-delay:0s}
.js-reveal.is-on span:nth-child(2){animation-delay:.11s}
.js-reveal.is-on span:nth-child(3){animation-delay:.22s}
.js-reveal.is-on span:nth-child(4){animation-delay:.33s}
@keyframes reveal{to{clip-path:inset(0 0 0 0)}}
.voz__aut{
  font-family:var(--corpo); font-style:normal; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--tinta-2);
}

.equipe__tit{
  font-weight:600; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-2); margin:2.4rem 0 .8rem;
}
.equipe{
  list-style:none; margin:0 0 2rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.equipe li{
  background:var(--branco); border:1px solid var(--borda); border-radius:999px;
  font-size:.82rem; color:var(--tinta-2); padding:.35rem .85rem; white-space:nowrap;
}
.autoridade__foto{margin:0 0 2rem;}
.autoridade__foto img{
  width:100%; height:190px; object-fit:cover; border-radius:16px; display:block;
  box-shadow:var(--sombra-papel);
}
.autoridade__foto figcaption{font-size:.78rem; color:var(--tinta-2); margin-top:.55rem;}

/* ============================================================
   SEÇÃO 7 — Isolated Element + Scale In + High Contrast
   ============================================================ */
.prova{background:var(--azul-faixa); padding:3.6rem 0 4rem; text-align:center;}
.prova .h2{margin-inline:auto; max-width:20ch;}
.prova .lead{margin-inline:auto; max-width:44ch;}
.prova__txt{margin:1.8rem auto 1.6rem; max-width:56ch;}
.prova__txt p{color:rgba(255,255,255,.94); font-size:1.1rem;}

.nota{
  background:var(--branco); border-radius:20px; padding:2rem 1.5rem;
  margin:2rem auto 0; max-width:520px;
  box-shadow:0 18px 44px -20px rgba(10,44,87,.55);
  transform:scale(.96); opacity:0; transition:transform .5s ease-out, opacity .5s ease-out;
}
.nota.is-on{transform:scale(1); opacity:1;}
.nota__num{
  font-family:var(--display); font-weight:700; font-size:4.5rem; line-height:1;
  color:var(--tinta); margin:0;
}
.nota__estrelas{color:#F2A322; font-size:1.4rem; letter-spacing:.1em; margin:.3rem 0 .2rem;}
.nota__qtd{font-size:1rem; color:var(--tinta-2); margin:0;}
.nota__hr{border:0; border-top:1px solid var(--borda); margin:1.4rem 0 1rem;}
.nota__sub{
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-2); margin:0 0 .8rem;
}
.nuvem{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center;
}
.nuvem li{
  background:var(--papel-2); border-radius:999px; padding:.3rem .75rem;
  font-size:.85rem; color:var(--tinta);
}
.nuvem sup{font-size:.65rem; color:var(--azul-ui); margin-left:.15rem; font-weight:600;}

.btn--ghost{
  background:transparent; border:1.5px solid #fff; color:#fff; box-shadow:none;
  font-size:.95rem; padding:.85rem 1.5rem;
}
.btn--ghost:hover{background:rgba(255,255,255,.12); border-color:#fff; box-shadow:none; transform:translateY(-2px);}
.btn--ghost:focus-visible{outline:3px solid #fff; outline-offset:3px;}

/* ============================================================
   SEÇÃO 8 — Framed Content + Overlay + Stagger
   ============================================================ */
.naofaz{position:relative; padding:3.2rem 0 3.6rem; overflow:hidden; background:var(--papel);}
.naofaz__bg{position:absolute; inset:0; z-index:0;}
.naofaz__bg img{width:100%; height:100%; object-fit:cover; object-position:center;}
.naofaz__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(251,250,247,.62) 0%, rgba(251,250,247,.95) 42%, rgba(251,250,247,.99) 100%);
}
.naofaz__in{position:relative; z-index:1;}
.naofaz .lead{max-width:46ch;}
.naofaz__cards{display:grid; gap:1rem; margin:2rem 0 2.2rem; max-width:620px;}
.ncard{
  background:var(--branco); border:1px solid var(--borda); border-radius:12px;
  padding:1.5rem 1.5rem 1.5rem 3.6rem; position:relative;
  box-shadow:0 1px 2px rgba(10,44,87,.05);
}
.ncard__mk{
  position:absolute; left:1.1rem; top:1.6rem;
  width:28px; height:28px; border-radius:50%;
  background:var(--papel-2); display:grid; place-items:center;
}
.ncard__mk::before{content:""; width:12px; height:2.5px; background:var(--coral); border-radius:2px;}
.ncard h3{
  font-family:var(--display); font-weight:700; font-size:1.08rem; line-height:1.3;
  color:var(--tinta); margin:0 0 .5rem;
}
.ncard p{color:var(--tinta-2); margin:0; font-size:.98rem;}

.prazo{
  background:var(--papel-2); border-left:4px solid var(--azul);
  border-radius:0 12px 12px 0; padding:1.4rem 1.5rem; max-width:620px;
}
.prazo__intro{font-size:.9rem; color:var(--tinta-2); margin:0 0 .7rem;}
.prazo__quote{margin:0 0 .9rem; padding:0;}
.prazo__quote p{
  font-family:var(--mao); font-size:1.45rem; line-height:1.4; color:var(--tinta); margin:0;
}
.prazo__fecho{font-size:.95rem; color:var(--tinta-2); margin:0;}

/* ============================================================
   SEÇÃO 9 — Accordion
   ============================================================ */
.faq{background:var(--papel); padding:3.2rem 0 3.6rem;}
.faq__lista{margin-top:1.6rem;}
.fq{border-bottom:1px solid var(--borda);}
.fq summary{
  list-style:none; cursor:pointer; position:relative;
  font-family:var(--display); font-weight:700; font-size:1.08rem; line-height:1.35;
  color:var(--tinta); padding:.95rem 2.5rem .95rem 0;
  min-height:44px; display:flex; align-items:center;
}
.fq summary::-webkit-details-marker{display:none;}
.fq summary:focus-visible{outline:3px solid var(--azul); outline-offset:3px; border-radius:4px;}
.fq summary::before,
.fq summary::after{
  content:""; position:absolute; right:.35rem; top:50%;
  background:var(--azul); border-radius:2px; transition:transform .26s ease;
}
.fq summary::before{width:16px; height:2px; margin-top:-1px;}
.fq summary::after{width:2px; height:16px; margin-top:-8px; right:.78rem;}
.fq[open] summary::after{transform:rotate(90deg);}
.fq__c{display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease;}
.fq[open] .fq__c{grid-template-rows:1fr;}
.fq__c > div{overflow:hidden;}
.fq__c p{color:var(--tinta-2); max-width:64ch; margin:0 0 1.1rem; font-size:.98rem;}
.faq__cta{margin-top:2.2rem;}

/* ============================================================
   SEÇÃO 10 — Hero Dominante + Breathe
   ============================================================ */
.fim{
  background:var(--papel-2); position:relative; overflow:hidden;
  padding:4rem 0; text-align:center;
}
.fim__bilhete{
  position:absolute; inset:0; display:grid; place-items:center;
  z-index:0; pointer-events:none; opacity:.16;
}
.fim__bilhete .bilhete{
  rotate:-3deg; scale:1.6; max-width:20rem; box-shadow:none;
  border-color:transparent; background-image:none;
}
.fim__bilhete .bilhete::before{display:none;}
.fim__bilhete .bilhete__txt{margin:0; text-align:center;}
.wrap--fim{position:relative; z-index:1;}
.fim__h2{margin-inline:auto; max-width:20ch;}
.fim .lead{margin-inline:auto; max-width:40ch;}
.fim p{color:var(--tinta-2); margin-inline:auto; max-width:56ch;}
.fim__bordao{
  font-family:var(--mao); font-size:1.9rem; color:var(--azul-ui);
  margin:1.8rem auto .2rem;
}
.fim__micro{font-size:.88rem; color:var(--tinta-2); margin-top:.9rem;}
.btn--breathe{animation:breathe 2.8s ease-in-out infinite;}
.btn--breathe:hover{animation-play-state:paused;}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape{background:var(--tinta); color:rgba(255,255,255,.85); padding:2.6rem 0;}
.rodape__in{display:grid; gap:1.4rem;}
.rodape__logo{width:180px; height:auto; filter:brightness(0) invert(1); opacity:.92;}
.rodape__dados p{margin:0 0 .35rem; font-size:.85rem; line-height:1.55;}
.rodape__dados strong{color:#fff;}
.rodape__dados a{color:#fff; text-decoration:underline; text-underline-offset:3px;
  display:inline-flex; align-items:center; min-height:44px; padding:.7rem 0;}
.rodape__dados a:focus-visible{outline:2px solid #fff; outline-offset:3px;}

/* ============================================================
   CTA FLUTUANTE — sempre centralizado
   ============================================================ */
.float{
  position:fixed; left:0; right:0; bottom:1rem; z-index:60;
  width:fit-content; max-width:calc(100% - 1.6rem); margin-inline:auto;
  transform:translateY(140%); opacity:0;
  transition:transform .3s ease, opacity .3s ease;
}
.float.is-on{transform:translateY(0); opacity:1;}
.float .btn{
  font-size:.95rem; padding:.9rem 1.4rem; text-align:center;
  box-shadow:0 12px 30px -10px rgba(214,52,32,.95);
}

/* alvo de toque mínimo */
.btn, .fq summary{min-height:44px;}

/* ============================================================
   BREAKPOINTS DAS SEÇÕES 3 A 10
   ============================================================ */
@media (min-width:900px){
  .espera{padding:5.6rem 0 6rem;}
  .espera__grid{grid-template-columns:.62fr .38fr; gap:4rem; align-items:center;}
  .espera__foto{margin-right:calc(50% - 50vw);}
  .espera__foto img{height:520px; border-radius:14px 0 0 14px;}
  .dados{grid-template-columns:1fr 1fr; gap:0;}
  .dados .dado + .dado{border-left:2px solid var(--pauta); padding-left:2rem;}
  .dado__num{font-size:3.2rem;}

  .mecanismo{padding:6.4rem 0 5.6rem; clip-path:polygon(0 2.5rem, 100% 0, 100% 100%, 0 100%);}
  .diagrama{grid-template-columns:1fr 1fr; gap:2.5rem;}

  .faixa-lapis img{height:200px;}

  .passos{padding:5.6rem 0 6rem;}
  .passos__grid{grid-template-columns:.45fr .55fr; gap:3.5rem; align-items:start;}
  .passos__midia{
    display:block; position:sticky; top:6rem;
    aspect-ratio:4/5; border-radius:18px; overflow:hidden;
  }
  .passo{min-height:70vh; display:flex; flex-direction:column; justify-content:center; padding:2rem 0;}
  .passo__foto{display:none;}
  .passo--destaque{min-height:auto; padding:1.6rem; justify-content:flex-start;}

  .autoridade{padding:5.6rem 0 6rem;}
  .autoridade__grid{grid-template-columns:.46fr .54fr; gap:3.5rem; align-items:start;}
  .credencial{rotate:-1.2deg;}
  .credencial:hover{rotate:0deg; translate:0 -3px;}
  .voz__txt{font-size:2.1rem;}
  .autoridade__foto img{height:300px;}

  .prova{padding:6rem 0;}
  .naofaz{padding:5.6rem 0 6rem;}
  .naofaz__bg img{object-position:left center;}
  .naofaz__bg::after{
    background:linear-gradient(90deg, rgba(251,250,247,.97) 0%, rgba(251,250,247,.93) 55%, rgba(251,250,247,.60) 100%);
  }
  .naofaz__cards{gap:1.1rem;}

  .faq{padding:5.6rem 0 6rem;}
  .fq summary{font-size:1.15rem; padding:1.15rem 2.5rem 1.15rem 0;}

  .fim{padding:6rem 0; min-height:78vh; display:grid; align-content:center;}

  .rodape__in{grid-template-columns:auto 1fr; gap:3rem; align-items:start;}
}

@media (min-width:1100px){
  .espera__foto img{height:560px;}
}

/* mobile: foto de cada passo aparece inline */
@media (max-width:899px){
  .passo__foto{display:block;}
  .fim__bilhete .bilhete{scale:1.15;}
  .equipe{overflow-x:auto; flex-wrap:nowrap; scroll-snap-type:x proximity; padding-bottom:.4rem;}
  .equipe li{scroll-snap-align:start;}
  .credencial{rotate:0deg;}
  .fq summary{padding:.85rem 2.3rem .85rem 0;}
}

@media (prefers-reduced-motion:reduce){
  .btn--breathe{animation:none;}
  .nota{transform:none; opacity:1;}
  .js-reveal span{clip-path:none;}
  .diagrama__svg--on .seta{stroke-dashoffset:0;}
  .float{transition:none;}
}

/* ============================================================
   PRINTS DAS AVALIAÇÕES DO GOOGLE
   Os prints vêm do Google em tema escuro. Em vez de forçá-los no
   papel claro (onde ficariam como remendo) ou de clareá-los (o que
   seria adulterar prova), ganham um berço escuro onde a cor de
   origem faz sentido.

   Legibilidade: o print tem 676px de largura e o texto dele, ~13px.
   Num card de 315px o texto cai para 6px e vira decoração. Por isso
   o desktop usa UMA coluna larga, onde o print aparece quase em
   tamanho natural, e o mobile abre em tela cheia ao toque.
   ============================================================ */
.gprova{margin:2.4rem 0 2rem;}
.gprova__rot{
  font-family:var(--corpo); font-weight:600;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
  margin:0 0 .9rem; text-align:center;
}
.gprova__lista{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.9rem;
}
.gprova__item{
  display:block; width:100%; padding:0;
  border:0; background:none; cursor:zoom-in;
  border-radius:12px;
}
.gprova__item:focus-visible{outline:3px solid #fff; outline-offset:3px;}
.gprova__item img{
  display:block; width:100%; height:auto;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 28px -14px rgba(0,0,0,.7);
}
.gprova__zoom{
  display:block; margin:.4rem 0 0;
  font-size:.72rem; color:rgba(255,255,255,.72);
  text-align:center;
}
.gprova__fonte{
  margin:1rem 0 0;
  font-size:.78rem; line-height:1.45;
  color:rgba(255,255,255,.78); text-align:center;
}
.gprova__fonte a{color:#fff; text-underline-offset:3px;}

/* lightbox: o print em tamanho natural, com rolagem se precisar */
.gzoom{
  width:min(100% - 1.2rem, 780px);
  max-height:92dvh;
  margin:auto; padding:0; border:0;
  border-radius:14px; background:transparent;
  overflow:visible;
}
.gzoom::backdrop{background:rgba(0,0,0,.82);}
.gzoom__box{
  overflow:auto; border-radius:14px; max-height:82dvh;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
/* Largura fixa maior que a tela do celular, e o box rola. Com
   width:100% a imagem voltaria ao tamanho do card e o "ampliar" não
   ampliaria nada, que foi o primeiro erro desta implementação. */
.gzoom img{
  display:block; width:760px; max-width:none; height:auto;
  border-radius:14px;
}
.gzoom__x{
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  width:100%; min-height:48px; margin-top:.6rem;
  border:0; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff;
  font-family:var(--corpo); font-size:.9rem;
}
.gzoom__x:hover{background:rgba(255,255,255,.24);}
.gzoom__x:focus-visible{outline:3px solid #fff; outline-offset:2px;}

@media (min-width:900px){
  .gprova{margin:3rem 0 2.4rem;}
  /* uma coluna: com duas, o print volta a ficar ilegível */
  .gprova__lista{gap:1.1rem;}
  .gprova__item{cursor:default;}
  .gprova__zoom{display:none;}
}