/* =========================================================
   Teacher Nicky — landing page
   Sistema de cor: laranja = voz do aluno e a ação
                   roxo    = voz da Nicky (professora)
   ========================================================= */

:root{
  --laranja:      #ff8232;
  --laranja-esc:  #e8641a;   /* hover / texto sobre claro */
  --roxo:         #d429ff;
  --roxo-esc:     #a015c4;   /* contraste de texto */
  --grafite:      #545454;
  --tinta:        #3b3540;

  --papel:        #ffffff;
  --polpa:        #fff6f0;   /* fundo morno derivado do laranja */
  --lilas:        #f9f1ff;   /* fundo derivado do roxo */
  --linha:        #ece6e2;

  --raio:         22px;
  --raio-bolha:   22px 22px 22px 6px;  /* canto de balão: a assinatura */
  --sombra:       0 1px 2px rgba(59,53,64,.05), 0 12px 28px -18px rgba(59,53,64,.35);

  --wrap:         1120px;
  --secao:        clamp(4.5rem, 9vw, 7.5rem);

  --altura-topo:  75px;      /* min-height da .topbar__inner + a borda */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* Alvos de âncora param abaixo do header, que é sticky e cobriria o título.
   #topo fica de fora: ele já está no começo do documento. */
main[id],
section[id]{ scroll-margin-top:calc(var(--altura-topo) + 1rem); }

body{
  margin:0;
  background:var(--papel);
  color:var(--grafite);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.brand__text strong,.preco__valor{
  font-family:"Montserrat",-apple-system,"Segoe UI",sans-serif;
  font-weight:800;
  color:var(--tinta);
  letter-spacing:-.02em;
  line-height:1.12;
  margin:0;
  text-wrap:balance;   /* evita palavra órfã sozinha na última linha */
}

h1{ font-size:clamp(2.1rem,4.1vw,3.15rem); line-height:1.08; }
h2{ font-size:clamp(1.75rem,3.6vw,2.6rem); }
h3{ font-size:1.15rem; letter-spacing:-.01em; line-height:1.3; }
p{ margin:0; }
b{ font-weight:600; color:var(--tinta); }
img{ max-width:100%; display:block; }

a{ color:var(--laranja-esc); }

:focus-visible{
  outline:3px solid var(--roxo);
  outline-offset:3px;
  border-radius:6px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--tinta); color:#fff; padding:.75rem 1.25rem;
  text-decoration:none; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }

/* ---------- estrutura ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2rem); }
.wrap--estreito{ max-width:780px; }

.section{ padding-block:var(--secao); }
.section--polpa{ background:var(--polpa); }
.section--lilas{ background:var(--lilas); }

.head{ margin-bottom:clamp(2.25rem,4vw,3.25rem); }
.head h2{ max-width:20ch; }

/* a tese da seção: duas frases espelhadas, cada uma balanceada por conta própria */
.head h2.tese{ max-width:22ch; }
.head h2.tese span{ display:block; }
.head h2.tese span + span{ color:var(--laranja-esc); }
.head h2 + .lead{ margin-top:1.1rem; }
.head .lead{ max-width:62ch; }

/* Cabeçalho com a foto da Nicky na coluna da direita — só "Sobre o curso" usa.
   O enquadramento é o canto de balão de --raio-bolha, o mesmo das falas dela
   no hero e de todo card da página: a foto entra como a maior fala da
   professora, não como um retrato solto. */
.head--foto{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(15rem,30%,21rem);
  gap:clamp(2rem,4vw,3.25rem);
  align-items:center;
}
.head__foto{
  display:block; width:100%; height:auto;
  justify-self:end;   /* encosta na direita, no prumo da grade de cards abaixo */
  border-radius:var(--raio-bolha);
  border:1px solid var(--linha);
  box-shadow:var(--sombra);
}

.eyebrow{
  font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--roxo-esc);
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:1rem;
}
.eyebrow::before{
  content:""; width:9px; height:9px; flex:none;
  background:var(--roxo); border-radius:50% 50% 50% 2px;  /* mini balão */
}

.lead{ font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--grafite); text-wrap:pretty; }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  gap:.5rem;
  padding:.95rem 1.5rem;
  background:var(--laranja); color:#fff;
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:.98rem; letter-spacing:-.01em;
  line-height:1.25;
  text-decoration:none; border:2px solid var(--laranja); border-radius:100px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  box-shadow:0 10px 22px -14px rgba(232,100,26,.9);
}
.btn:hover{ background:var(--laranja-esc); border-color:var(--laranja-esc); transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--ghost{ background:transparent; color:var(--tinta); border-color:var(--linha); box-shadow:none; }
.btn--ghost:hover{ background:#fff; border-color:var(--laranja); color:var(--laranja-esc); }

.btn--roxo{ background:var(--roxo); border-color:var(--roxo); box-shadow:0 10px 22px -14px rgba(160,21,196,.9); }
.btn--roxo:hover{ background:var(--roxo-esc); border-color:var(--roxo-esc); }

.btn--sm{ padding:.6rem 1.15rem; font-size:.875rem; white-space:nowrap; }

/* rótulo curto do botão do topo em telas estreitas */
.so-estreito{ display:none; }
.btn--lg{ padding:1.15rem 2.1rem; font-size:1.05rem; }
.btn--full{ width:100%; }

.actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }

/* ---------- topo ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.topbar.is-preso{ border-bottom-color:var(--linha); box-shadow:0 6px 18px -16px rgba(59,53,64,.6); }

.topbar__inner{ display:flex; align-items:center; gap:1.5rem; min-height:74px; }

.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; margin-right:auto; }
.brand img{ border-radius:12px; }
.brand--foto img{ border-radius:50%; object-fit:cover; }
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__text strong{ font-size:1rem; color:var(--laranja-esc); white-space:nowrap; }
.brand__text em{ font-style:normal; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--roxo-esc); }

.topnav{ display:flex; gap:1.6rem; }
.topnav a{
  color:var(--grafite); text-decoration:none; font-size:.94rem; font-weight:500;
  padding-block:.25rem; border-bottom:2px solid transparent;
}
.topnav a:hover{ color:var(--tinta); border-bottom-color:var(--laranja); }

/* ---------- hero ---------- */
.hero{ padding-top:clamp(2.5rem,4.5vw,3.5rem); }
.hero__grid{ display:grid; grid-template-columns:1.22fr .9fr; gap:clamp(2.5rem,4vw,3.25rem); align-items:center; }

.hero h1 + .lead{ margin-top:1.35rem; max-width:44ch; }

.mark{ position:relative; white-space:nowrap; color:inherit; }
.mark::after{
  content:""; position:absolute; left:-.04em; right:-.04em; bottom:.02em; height:.28em;
  background:var(--laranja); opacity:.28; border-radius:100px; z-index:-1;
}

.facts{
  list-style:none; margin:2.25rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  font-size:.9rem; color:var(--grafite);
}
.facts li{ display:flex; align-items:center; gap:.5rem; }
.facts li::before{
  content:""; width:6px; height:6px; flex:none;
  background:var(--roxo); border-radius:50%;
}

/* ---------- assinatura: trecho de aula ---------- */
.chat{
  margin:0;
  background:var(--polpa);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:clamp(1.25rem,2.5vw,1.75rem);
  box-shadow:var(--sombra);
}
.chat__head{
  display:flex; align-items:center; gap:.55rem;
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grafite);
  padding-bottom:1.1rem; margin-bottom:1.1rem;
  border-bottom:1px solid var(--linha);
}
.chat__dot{ width:8px; height:8px; border-radius:50%; background:var(--laranja); flex:none; }

.chat__thread{ display:flex; flex-direction:column; gap:.7rem; min-height:270px; }

.msg{
  --bolha:#fff;
  position:relative;
  max-width:88%;
  padding:.7rem 1rem .8rem;
  background:var(--bolha);
  border-radius:18px;
  font-size:.95rem; line-height:1.55;
}
/* escondida só quando o JS roda: sem JS, a mensagem já nasce visível
   em vez de ficar presa em opacity:0 para sempre */
.js .msg{ opacity:0; transform:translateY(10px) scale(.98); transition:opacity .38s ease, transform .38s cubic-bezier(.2,.7,.3,1); }
.msg.is-visivel{ opacity:1; transform:none; }

.msg__who{
  display:block;
  font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:.2rem; opacity:.75;
}

.msg--nicky{
  align-self:flex-start;
  background:#fff; color:var(--grafite);
  border:1px solid var(--linha);
  border-bottom-left-radius:5px;
}
.msg--nicky .msg__who{ color:var(--roxo-esc); }

.msg--aluno{
  align-self:flex-end;
  background:var(--laranja); color:#fff;
  border:1px solid var(--laranja);
  border-bottom-right-radius:5px;
}
.msg--aluno .msg__who{ color:#fff; opacity:.85; }
.msg--aluno b{ color:#fff; }

/* Indicador de digitação: sobrepõe a própria bolha, já no tamanho final.
   Assim os "..." não empurram o resto da página para baixo. */
.digitando{
  position:absolute; inset:0;
  display:flex; gap:5px; align-items:center;
  padding-inline:1rem;
  background:#fff;
  border-radius:inherit;
}
.digitando span{
  width:7px; height:7px; border-radius:50%; background:var(--roxo); opacity:.35;
  animation:pulsa 1.1s infinite ease-in-out;
}
.digitando span:nth-child(2){ animation-delay:.18s; }
.digitando span:nth-child(3){ animation-delay:.36s; }
@keyframes pulsa{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

.chat__foot{
  margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--linha);
  font-size:.85rem; color:var(--grafite);
}

/* ---------- trechos de aula gravados ---------- */
.clipes{
  margin:0;
  background:var(--polpa);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:clamp(1.25rem,2.5vw,1.75rem);
  box-shadow:var(--sombra);
}
.clipes__head{
  display:flex; align-items:center; gap:.55rem;
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grafite);
  padding-bottom:1.1rem; margin-bottom:1.1rem;
  border-bottom:1px solid var(--linha);
}
.clipes__dot{ width:8px; height:8px; border-radius:50%; background:var(--laranja); flex:none; }

.clipes__nav{ justify-content:center; margin-top:1.1rem; }

.clipes__foot{
  margin-top:1.1rem;
  font-size:.86rem; color:var(--grafite); text-align:center;
}

.pontos{ display:flex; gap:0; }
.ponto{
  box-sizing:content-box;   /* padding vira área de toque, não infla o pontinho */
  width:9px; height:9px; padding:7.5px;
  background:var(--linha); background-clip:content-box; border:none; border-radius:50%;
  cursor:pointer;
  transition:background-color .18s ease, width .18s ease;
}
.ponto[aria-selected="true"]{ background:var(--laranja); width:26px; border-radius:100px; }

/* ---------- player do trecho de aula ----------
   Controles próprios, escritos aqui, porque o controls nativo é uma barra
   cinza diferente em cada navegador — e ela apareceria justo no bloco que
   dá o tom da página. A barra some enquanto o vídeo roda e volta no hover,
   no foco de teclado ou com o vídeo pausado. */
.palco{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:var(--tinta);
  line-height:0;              /* tira a folga de baseline embaixo do vídeo */
}
.palco__video{
  display:block; width:100%;
  max-height:min(58vh,440px);
  object-fit:contain;
  background:var(--tinta);
  cursor:pointer;
}

/* Selo de "ativar som": o autoplay dos navegadores só existe mudo, então
   o convite para ligar o som precisa ser a coisa mais visível do player. */
.palco__som{
  position:absolute; top:.7rem; right:.7rem;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.48rem .85rem .48rem .68rem;
  border:none; border-radius:100px;
  background:var(--laranja); color:#fff;
  font-family:inherit; font-size:.8rem; font-weight:600; line-height:1.2;
  cursor:pointer;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.65);
  transition:background-color .18s ease, transform .18s ease;
}
.palco__som:hover{ background:var(--laranja-esc); transform:translateY(-1px); }
.palco__som[hidden]{ display:none; }
.palco__som svg{ width:17px; height:17px; flex:none; }
/* aro pulsando: puxa o olho para o som sem mexer no layout */
.palco__som::after{
  content:""; position:absolute; inset:0;
  border:2px solid var(--laranja); border-radius:inherit;
  animation:aro 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes aro{
  0%{ opacity:.65; transform:scale(1); }
  70%,100%{ opacity:0; transform:scale(1.28); }
}
@media (prefers-reduced-motion:reduce){ .palco__som::after{ animation:none; } }

/* Botão central: só aparece com o vídeo parado, para o estado ficar óbvio
   à distância, sem precisar procurar a barra de baixo. */
.palco__centro{
  position:absolute; inset:0; margin:auto;
  width:64px; height:64px; padding:0;
  display:grid; place-items:center;
  border:none; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--tinta);
  cursor:pointer;
  opacity:0; visibility:hidden; transform:scale(.88);
  transition:opacity .2s ease, transform .2s ease, visibility .2s, background-color .18s ease;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.8);
}
.palco__centro svg{ width:24px; height:24px; margin-left:3px; }
.palco.is-pausado .palco__centro{ opacity:1; visibility:visible; transform:none; }
.palco.is-pausado .palco__centro:hover{ background:#fff; transform:scale(1.06); }

.palco__barra{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:.35rem;
  padding:2.2rem .6rem .55rem;
  line-height:1.2;
  background:linear-gradient(to top, rgba(30,26,33,.88), rgba(30,26,33,0));
  opacity:0; transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease;
}
.palco:hover .palco__barra,
.palco:focus-within .palco__barra,
.palco.is-pausado .palco__barra{ opacity:1; transform:none; }
/* sem cursor não existe hover: no toque a barra fica sempre visível */
@media (hover:none){ .palco__barra{ opacity:1; transform:none; } }

.palco__btn{
  flex:none; display:grid; place-items:center;
  width:34px; height:34px; padding:0;
  border:none; border-radius:50%;
  background:transparent; color:#fff;
  cursor:pointer;
  transition:background-color .18s ease;
}
.palco__btn:hover{ background:rgba(255,255,255,.18); }
.palco__btn svg{ width:19px; height:19px; }

.palco__tempo{
  flex:none; padding:0 .3rem;
  font-size:.76rem; font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.85);
}

/* A trilha é um input range de verdade: o navegador já entrega arrastar,
   setas do teclado e leitura por leitor de tela — só a pintura é nossa.
   --p é a fração já percorrida, atualizada pelo script a cada timeupdate. */
.palco__trilha{
  -webkit-appearance:none; appearance:none;
  flex:1 1 auto; min-width:40px; height:16px; margin:0;
  background:transparent; cursor:pointer;
}
.palco__trilha::-webkit-slider-runnable-track{
  height:4px; border-radius:100px;
  background:linear-gradient(to right,
    var(--laranja) var(--p,0%), rgba(255,255,255,.32) var(--p,0%));
}
.palco__trilha::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:12px; height:12px; margin-top:-4px;
  border:none; border-radius:50%; background:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,.45);
}
.palco__trilha::-moz-range-track{
  height:4px; border-radius:100px; background:rgba(255,255,255,.32);
}
.palco__trilha::-moz-range-progress{
  height:4px; border-radius:100px; background:var(--laranja);
}
.palco__trilha::-moz-range-thumb{
  width:12px; height:12px; border:none; border-radius:50%; background:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,.45);
}

/* Tela estreita: o selo encolhe para não tomar um terço do video. */
@media (max-width:480px){
  .palco__som{ top:.5rem; right:.5rem; padding:.4rem .7rem .4rem .55rem; font-size:.74rem; }
  .palco__som svg{ width:15px; height:15px; }
  .palco__centro{ width:54px; height:54px; }
  .palco__centro svg{ width:20px; height:20px; }
  .palco__barra{ gap:.15rem; padding:1.9rem .4rem .45rem; }
  .palco__tempo{ font-size:.7rem; padding:0 .15rem; }
}

.palco:fullscreen{ border-radius:0; background:#000; display:grid; place-items:center; }
.palco:fullscreen .palco__video{ max-height:100vh; height:100%; }

/* ---------- depoimento dentro do card de "Para quem é" ---------- */
/* O depoimento vem logo depois da descrição, sem margin-top:auto. Encostá-lo
   na base do card fazia sentido quando ele era texto de altura parecida; com
   o print, cujas alturas variam muito (uma conversa de 8 linhas ao lado de
   uma de 2), a folga da linha ia toda para o meio do card mais curto e abria
   um vão entre a descrição e a divisória. Assim os prints começam todos na
   mesma altura e a sobra fica no rodapé, onde não chama atenção. */
.depo{
  margin:1.5rem 0 0; padding-top:1.15rem;
  border-top:1px solid var(--linha);
}

.depo__fala{
  font-size:.94rem; line-height:1.6;
  color:var(--tinta); text-wrap:pretty;
}

.depo__rodape{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .75rem;
  margin-top:.7rem;
}

.depo__quem{
  font-size:.85rem; font-weight:600; color:var(--roxo-esc);
}

/* o print da conversa aparece dentro do card e amplia no clique.
   fundo escuro: os prints são de tema escuro e a moldura acompanha, para não
   piscar uma borda branca em volta enquanto a imagem entra. */
/* sozinho no bloco (o caso normal) o print encosta no padding do .depo;
   a margem só existe para separá-lo da fala de reserva. */
.depo__print:first-child{ margin-top:0; }
.depo__print{
  position:relative; display:block; margin-top:.9rem;
  overflow:hidden; border-radius:14px;
  border:1px solid #2a2a2a; background:#111;
  transition:transform .2s ease, box-shadow .2s ease;
}
.depo__print:hover{ transform:translateY(-2px); box-shadow:var(--sombra); }
.depo__print img{ display:block; width:100%; height:auto; }

/* ---------- galeria de materiais ---------- */
.materiais{ margin-top:clamp(2.5rem,4vw,3.25rem); }

.materiais__titulo{ text-align:center; font-size:clamp(1.15rem,2vw,1.4rem); }

/* Duas colunas, e não quantas couberem: os materiais vêm em formatos
   diferentes (página de PDF em pé, slide de aula deitado) e em pares. Com
   duas por linha os dois de mesmo formato caem lado a lado, as alturas
   batem e as legendas alinham — sem cortar nem encaixotar nada.
   Ao trocar a lista em MATERIAIS (assets/script.js), mantenha os formatos
   iguais em sequência para as linhas continuarem casando. */
.materiais__faixa{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1rem,2.5vw,1.75rem);
  max-width:860px; margin:1.75rem auto 0;
  align-items:start;
}

.material{ margin:0; }
.material__link{
  position:relative; display:block; overflow:hidden;
  background:var(--papel);
  border:1px solid #ebdcf3; border-radius:14px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.material__link:hover{ transform:translateY(-3px); box-shadow:var(--sombra); }
.material__link img{ display:block; width:100%; height:auto; }

.material__titulo{
  margin-top:.7rem; text-align:center;
  font-size:.88rem; color:var(--grafite);
}

/* lupa nas duas galerias: o que se vê no card é uma miniatura, e o selo
   avisa que existe tamanho de leitura a um clique. */
.depo__print::after,
.material__link::after{
  content:""; position:absolute; top:.5rem; right:.5rem;
  width:28px; height:28px; border-radius:50%;
  background:rgba(30,24,34,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.4 15.4 20.5 20.5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/15px no-repeat;
  transition:background-color .2s ease, transform .2s ease;
}
.depo__print:hover::after,
.material__link:hover::after{ background-color:var(--roxo-esc); transform:scale(1.08); }

/* ---------- visualizador de imagem (o <dialog> criado no script) ---------- */
.visor{
  position:fixed; inset:0;
  width:100%; max-width:100%; height:100%; max-height:100%;
  margin:0; padding:clamp(1rem,4vw,2.75rem);
  border:none;
  /* o escuro vem do próprio dialog, não só do ::backdrop: assim a página
     de trás fica coberta mesmo onde o backdrop não é pintado. */
  background:rgba(30,24,34,.88);
  overflow:auto; overscroll-behavior:contain;
}
.visor::backdrop{ background:rgba(30,24,34,.88); }
.visor[open]{ animation:visor-entra .18s ease both; }
@keyframes visor-entra{ from{ opacity:0; } to{ opacity:1; } }

.visor__fig{
  display:grid; place-content:center; gap:1rem;
  min-height:100%; margin:0;
}
.visor__img{
  width:auto; height:auto;
  max-width:min(1180px,100%); max-height:80vh;
  margin-inline:auto;
  border-radius:16px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
}
.visor__legenda{
  text-align:center; font-size:.92rem; color:#f4eef8;
}

.visor__fechar{
  position:fixed; top:.9rem; right:.9rem; z-index:1;
  width:44px; height:44px; padding:0;
  border:none; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b3540' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/18px no-repeat;
  transition:transform .2s ease, background-color .2s ease;
}
.visor__fechar:hover{ transform:scale(1.06); background-color:#fff; }

/* ---------- grades e cards ---------- */
.grid{ display:grid; gap:1.25rem; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

/* "Para quem é" é a única grade que carrega imagem dentro do card: os prints
   de conversa são bem largos e, em quatro colunas, saem como um filete
   ilegível. Duas colunas dobram a largura do card e a conversa já se lê na
   página — o clique continua abrindo em tamanho cheio.
   align-items:start é por causa do print também: as conversas têm alturas
   bem diferentes (8 linhas ao lado de 2), e esticar os dois cards da linha
   pela mesma altura sobrava um vão vazio no card mais curto. Cada card fica
   do tamanho do que tem dentro. */
#para-quem .grid--4{ grid-template-columns:repeat(2,1fr); align-items:start; }

.card{
  display:flex; flex-direction:column;
  background:var(--papel);
  border:1px solid var(--linha);
  border-radius:var(--raio-bolha);
  padding:clamp(1.5rem,2.4vw,1.9rem);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--sombra); border-color:#e0d7d1; }
.card h3 + p{ margin-top:.7rem; }
.card p{ font-size:.98rem; }

.ico{
  display:grid; place-items:center;
  width:46px; height:46px; margin-bottom:1.15rem;
  border-radius:14px 14px 14px 4px;
  background:var(--polpa); color:var(--laranja-esc);
}
.ico--roxo{ background:var(--lilas); color:var(--roxo-esc); }
.ico svg{ width:23px; height:23px; }

/* ---------- linhas da metodologia ---------- */
.rows{ display:flex; flex-direction:column; }
.row{
  display:grid; grid-template-columns:minmax(0,26ch) 1fr; gap:1rem 3rem;
  padding-block:1.75rem;
  border-top:1px solid #ebdcf3;
}
.row:last-child{ border-bottom:1px solid #ebdcf3; }
.row p{ font-size:1.02rem; }

/* ---------- cta de seção ---------- */
.cta-secao{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem;
  margin-top:clamp(2.25rem,4vw,3rem);
}

/* ---------- planos ---------- */
.planos{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; align-items:start; }

.plano{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--papel);
  border:1px solid var(--linha);
  border-radius:var(--raio-bolha);
  padding:clamp(1.75rem,3vw,2.4rem);
}
.plano--destaque{
  border:2px solid var(--laranja);
  box-shadow:0 24px 50px -34px rgba(232,100,26,.75);
}

.tag{
  position:absolute; top:-.9rem; left:clamp(1.75rem,3vw,2.4rem);
  background:var(--roxo); color:#fff;
  font-family:"Montserrat",sans-serif; font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.4rem .85rem; border-radius:100px;
}

.plano__nome{ font-size:1.45rem; }
.plano__carga{
  margin-top:.3rem;
  font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--laranja-esc);
}
.plano__para{ margin-top:1.1rem; font-size:.98rem; }

.plano__itens{
  list-style:none; margin:1.5rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:.75rem;
  font-size:.96rem;
}
.plano__itens li{ display:flex; gap:.7rem; align-items:flex-start; }
.plano__itens li::before{
  content:""; flex:none; width:18px; height:18px; margin-top:.25rem;
  border-radius:50%;
  background:var(--polpa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8641a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}

.preco{
  margin:1.9rem 0 1.4rem; padding-top:1.4rem;
  border-top:1px dashed var(--linha);
  display:flex; align-items:baseline; gap:.4rem;
}
.preco__valor{ font-size:2.5rem; color:var(--laranja-esc); }
.preco__ciclo{ font-size:.95rem; color:var(--grafite); }

.plano .btn{ margin-top:auto; }

.faixa{
  margin-top:1.5rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
  background:var(--lilas);
  border:1px solid #f0e0f8;
  border-radius:var(--raio-bolha);
  padding:clamp(1.5rem,2.6vw,2rem);
}
.faixa h3 + p{ margin-top:.4rem; font-size:.98rem; }

/* ---------- faq ---------- */
.faq{
  background:var(--papel);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  overflow:hidden;
}
.faq details + details{ border-top:1px solid var(--linha); }

.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.35rem clamp(1.25rem,2.5vw,1.75rem);
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:1.02rem; color:var(--tinta);
  cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; flex:none; width:22px; height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a015c4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:transform .22s ease;
}
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq summary:hover{ color:var(--laranja-esc); }
.faq details > p{
  padding:0 clamp(1.25rem,2.5vw,1.75rem) 1.5rem;
  font-size:.99rem; max-width:62ch;
}

.cta-final{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  text-align:center;
  background:var(--papel);
  border:1px solid var(--linha);
  border-radius:var(--raio-bolha);
  padding:clamp(2rem,4vw,3.25rem);
}
.cta-final h2{ font-size:clamp(1.5rem,3vw,2.1rem); max-width:22ch; margin-inline:auto; }
.cta-final p{ margin-top:1rem; }
.cta-final .btn{ margin-top:2rem; }

/* ---------- rodapé ---------- */
.rodape{ border-top:1px solid var(--linha); padding-block:2.5rem; }
.rodape__inner{ display:flex; align-items:center; flex-wrap:wrap; gap:1.25rem; }
.rodape__nota{ font-size:.9rem; margin-right:auto; }

.rodape__base{ margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--linha); }
.credito{ font-size:.82rem; color:var(--grafite); text-align:center; }
.credito a{
  display:inline-flex; align-items:center; gap:.25rem;
  color:var(--tinta); font-weight:600; text-decoration:none;
  border-bottom:1px solid var(--laranja); padding-bottom:1px;
  transition:color .2s ease, border-color .2s ease;
}
.credito a:hover{ color:var(--laranja-esc); border-bottom-color:var(--roxo); }
.credito svg{ width:12px; height:12px; opacity:.7; }

/* ---------- whatsapp flutuante ---------- */
.flutuante{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:40;
  width:56px; height:56px; display:grid; place-items:center;
  background:#25d366; color:#fff;
  border-radius:50%;
  box-shadow:0 12px 28px -10px rgba(37,211,102,.8);
  transition:transform .2s ease;
}
.flutuante:hover{ transform:scale(1.07); }
.flutuante svg{ width:30px; height:30px; }

/* ---------- revelação no scroll ---------- */
/* escondida só quando o JS roda: sem JS (ou com JS quebrado), a
   seção já nasce visível em vez de ficar presa em opacity:0 */
.js .reveal{ opacity:0; transform:translateY(14px); }
.reveal.is-visivel{
  opacity:1; transform:none;
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero h1 + .lead{ max-width:none; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .grid--3{ grid-template-columns:1fr; }
  .topnav{ display:none; }

  /* empilhado, a foto vem depois do texto e para de crescer: em tela cheia
     ela empurraria os três cards para fora da primeira dobra */
  .head--foto{ grid-template-columns:1fr; }
  .head__foto{ justify-self:start; max-width:17rem; }
}

@media (max-width:760px){
  /* uma coluna já aqui: o print largo precisa da largura inteira da tela */
  #para-quem .grid--4{ grid-template-columns:1fr; }
  .materiais__faixa{ grid-template-columns:1fr; max-width:440px; }
  .planos{ grid-template-columns:1fr; }
  .plano--destaque{ order:-1; }
  .row{ grid-template-columns:1fr; gap:.6rem; }
  .faixa{ flex-direction:column; align-items:flex-start; }
  .faixa .btn{ width:100%; }
}

@media (max-width:560px){
  body{ font-size:1rem; }

  :root{ --altura-topo:65px; }   /* acompanha o min-height reduzido abaixo */
  .topbar__inner{ min-height:64px; gap:1rem; }
  .brand img{ width:38px; height:38px; }
  .brand__text strong{ font-size:.94rem; }
  .brand__text em{ display:none; }
  .so-largo{ display:none; }
  .so-estreito{ display:inline; }

  .grid--4{ grid-template-columns:1fr; }
  .actions{ flex-direction:column; align-items:stretch; }
  .actions .btn{ width:100%; }
  .msg{ max-width:94%; }
  .rodape__inner{ flex-direction:column; align-items:flex-start; }
  .rodape__nota{ margin-right:0; }
  .rodape{ padding-bottom:5.5rem; }  /* espaço para o whatsapp flutuante */
  .credito{ text-align:left; }
  .flutuante{ width:52px; height:52px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal,.js .msg{ opacity:1; transform:none; }
}

@media print{
  .topbar,.flutuante{ display:none; }
  .js .reveal,.js .msg{ opacity:1; transform:none; }
}