/* Verão que Lute 2026 · LP LONGA — só as seções próprias dela.
   Hero, frase, faixa, AUGE, jeito Crew, ingresso, portal, modal, botões e topo vêm de vql.css.
   Direção do miolo (15/10, refs Awakened + Harmoni, land-book): canvas claro e arejado, fotos soltas com
   cantos arredondados (nunca dentro de bloco de cor), cartões brancos com linha fina, cor só nos detalhes
   (ícone, palavra, botão, linha), títulos com respiro. O KV entra na marca-texto manteiga, na ferrugem
   dos títulos e nas estrelinhas. */
.longa mark{background:var(--manteiga);color:var(--ferrugem);padding:.02em .22em;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.longa u{text-underline-offset:.14em;text-decoration-thickness:.06em}
.longa s{text-decoration-thickness:.08em}
.miolo{max-width:1120px;margin-inline:auto;padding-inline:20px}
.miolo-estreito{max-width:820px}
.t-ferr{color:var(--ferrugem);font-weight:800;letter-spacing:-.025em;line-height:1.08;font-size:clamp(27px,3.8vw,48px);text-wrap:balance}
.rotulo-ferr{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ferrugem)}
.destaque{font-weight:700;font-size:clamp(17px,1.45vw,20px);line-height:1.5;color:var(--tinta)}
.longa .corpo{color:var(--tinta-2)}
.longa .corpo strong{color:var(--tinta);font-weight:700}
.longa .data{color:var(--tinta-2)}
.cta-bloco{display:grid;gap:12px;justify-items:start;margin-top:14px}
.cta-bloco.centro{justify-items:center;text-align:center;margin-top:36px}
.faixa-areia{background:var(--areia)}
.foto{margin:0;border-radius:26px;overflow:hidden;background:var(--areia)}

/* reveal ao entrar na tela (longa.js), escalonado por --i */
.js .longa [data-revela]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js .longa [data-revela].on{opacity:1;transform:none}

/* 2. CONVOCADA: título completo do doc, a estrelinha do KV no lugar do sol */
.auge-longa .titulo-kv{font-size:clamp(34px,5.9vw,82px)}
.auge-longa .titulo-kv .sol{display:inline-block;width:.5em;height:.5em;vertical-align:.08em;margin-right:.16em;animation:lv-brilha 3.6s ease-in-out infinite}

/* INGRESSO: na Longa o texto ganha o "Topa…?!" e o BORA */
.vip-topa{font-size:clamp(20px,1.8vw,26px);line-height:1.2;max-width:22em;text-wrap:balance;margin:4px 0 -6px}

/* ================= 3. PLANO + linha do tempo ================= */
.plano{padding:clamp(56px,8vw,112px) 0 clamp(64px,8vw,110px)}
.plano-cab{display:grid;gap:16px;justify-items:center;text-align:center;max-width:760px}
.plano-tit{display:grid;gap:12px;justify-items:center}
.plano-tit .grito{font-size:clamp(50px,8vw,104px);letter-spacing:-.04em;line-height:.92}
.plano-tit mark{font-size:clamp(20px,2.3vw,32px);letter-spacing:-.02em}
.spoiler{margin-top:18px;display:grid;gap:6px;justify-items:center;font-size:clamp(13px,1.2vw,16px);letter-spacing:.2em;text-transform:uppercase;line-height:1.4;font-weight:700;color:var(--ferrugem)}
.spoiler em{font-weight:600;letter-spacing:.02em;text-transform:none;font-size:1.15em;color:var(--tinta-2);font-style:normal}
.tempo{list-style:none;margin:40px auto 0;padding:0 20px;max-width:1000px;position:relative;display:grid;gap:38px}
.tempo::before{content:"";position:absolute;top:10px;bottom:10px;left:calc(20px + 21px);width:1.5px;background:var(--linha)}
.tempo .tempo-fill{position:absolute;top:10px;bottom:10px;left:calc(20px + 21px);width:1.5px;background:var(--ferrugem);transform:scaleY(var(--fill,0));transform-origin:top;will-change:transform}
.etapa{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px 18px;align-items:start}
.etapa-n{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--branco);border:1.5px solid var(--linha);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ferrugem);font-variant-numeric:tabular-nums;transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
.etapa.aceso .etapa-n{background:var(--ferrugem);border-color:var(--ferrugem);color:var(--manteiga);transform:scale(1.06)}
.etapa-foto{grid-column:2;margin:0;width:min(100%,320px);aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:var(--areia)}
.etapa-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform 1.2s var(--ease)}
.etapa-txt{grid-column:2;display:grid;gap:10px;align-self:center}
.etapa-txt h3{font-size:clamp(18px,1.7vw,24px);font-weight:800;letter-spacing:-.015em;line-height:1.25}
.etapa-txt p{font-size:clamp(15px,1.2vw,18px);line-height:1.6;color:var(--tinta-2);max-width:48ch}
.etapa-txt p strong{color:var(--tinta)}
.etapa-seta{position:absolute;left:14px;bottom:-30px;width:16px;text-align:center;font-size:15px;font-weight:700;line-height:1;color:var(--ferrugem);background:var(--branco);padding:3px 0;z-index:1}
.comeco{margin-top:60px;display:grid;gap:14px;justify-items:center;text-align:center}
.comeco-tit{font-size:clamp(24px,3vw,40px)}

/* ================= 4. CONTAGEM REGRESSIVA ================= */
.meses{padding:clamp(64px,8vw,112px) 0;overflow-x:clip}
.meses-grade{display:grid;gap:36px}
.meses-texto{display:grid;gap:14px}
.meses-tit{font-size:clamp(26px,3.6vw,46px);text-transform:uppercase;letter-spacing:-.02em}
.tese{position:relative;font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.03em;max-width:20ch;margin:10px 0;color:var(--tinta)}
.tese::before{content:"";position:absolute;inset:-30% -14%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(255,214,175,.5),rgba(255,214,175,0) 66%)}
.pergunta{font-weight:700;color:var(--ferrugem)}
.meses-fotos{position:relative;width:min(100%,420px)}
.foto-alta{margin:0;aspect-ratio:4/5;border-radius:26px;overflow:hidden;background:var(--areia)}
.foto-alta img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.foto-mini{position:absolute;right:-14px;bottom:-22px;width:34%;aspect-ratio:1;margin:0;border-radius:18px;overflow:hidden;border:5px solid var(--areia);background:var(--branco)}
.foto-mini img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}

/* ================= 5. DORES + MAS AGORA ================= */
.dores{padding:clamp(64px,8vw,112px) 0 clamp(64px,8vw,112px)}
.dores-grade{display:grid;gap:32px}
.dores-foto{margin:0;aspect-ratio:4/5;border-radius:26px;overflow:hidden;background:var(--areia);width:min(100%,460px)}
.dores-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.dores-texto{display:grid;gap:16px;align-content:start}
.dores-sub{font-size:clamp(18px,1.8vw,24px);font-weight:600;line-height:1.35;color:var(--tinta-2)}
.dores-lista{list-style:none;margin:8px 0 0;padding:0;display:grid;border-top:1.5px solid var(--linha)}
.dor{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;padding:18px 0;border-bottom:1.5px solid var(--linha)}
.dor p{position:relative;display:inline-block;font-size:clamp(16px,1.3vw,19px);line-height:1.45;color:var(--tinta);transition:color .5s var(--ease)}
.dor.riscada p{color:var(--tinta-2)}
.risco{position:absolute;left:-.1em;right:-.1em;top:52%;height:.1em;border-radius:3px;background:var(--ferrugem);transform:scaleX(var(--r,0));transform-origin:left;will-change:transform}
.icone{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--pessego);color:var(--ferrugem);transition:opacity .5s var(--ease)}
.dor.riscada .icone{opacity:.5}
.icone svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.virada{margin-top:clamp(56px,7vw,88px);display:grid;gap:14px;justify-items:center;text-align:center;max-width:720px}
.virada-estrela{width:28px;height:auto;animation:lv-brilha 3.6s ease-in-out infinite;margin-bottom:4px}
.virada-tit{font-size:clamp(26px,3.4vw,44px)}
.bora{font-weight:700;color:var(--ferrugem)}

/* ================= 6. SE ANTES… / AGORA… em cartões ================= */
.funciona{padding:clamp(64px,8vw,112px) 0}
.funciona-grade{display:grid;gap:30px}
.funciona-texto{display:grid;gap:14px;align-content:start}
.pares{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.par{display:grid;gap:10px;padding:20px 22px;border-radius:22px;background:var(--branco);box-shadow:inset 0 0 0 1.5px var(--linha)}
.mini{display:block;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:6px}
.mini-ferr{color:var(--ferrugem)}
.antes{color:var(--tinta-2);font-size:15px;line-height:1.5}
.agora{color:var(--tinta);font-weight:700;font-size:16px;line-height:1.45}
.par-seta{display:none;color:var(--ferrugem);font-size:22px;font-weight:700;line-height:1;align-self:center;justify-self:center}

/* ================= 7. VERBOS: gigantes, acendem um por um ================= */
.verbos{padding:clamp(64px,8vw,112px) 0 clamp(48px,6vw,88px)}
.verbos-cab{display:grid;gap:14px;justify-items:center;text-align:center;max-width:720px}
.quando{font-size:clamp(18px,2vw,26px);line-height:1.35;color:var(--tinta)}
.quando strong{color:var(--ferrugem)}
.verbos-preso{display:grid;gap:28px;padding:36px 20px 0;max-width:1120px;margin-inline:auto}
.verbo{display:grid;gap:8px}
/* tamanho sempre medido pela palavra mais larga (EXPERIMENTAR ≈ 8,6 em com o marca-texto): nunca invade o texto */
.verbo-nome{font-size:clamp(28px,9vw,52px);line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--ferrugem);white-space:nowrap}
.verbo-txt{font-size:clamp(17px,1.6vw,23px);line-height:1.45;color:var(--tinta);max-width:40ch}

/* ================= 8. METAS: fotos soltas, título embaixo ================= */
.metas{padding:clamp(48px,6vw,88px) 0 clamp(72px,9vw,120px)}
.metas-cab{display:grid;justify-items:center;text-align:center;margin-bottom:28px}
.metas-filme{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.metas-filme::-webkit-scrollbar{display:none}
.metas-trilho{list-style:none;margin:0;padding:4px 20px 10px;display:flex;gap:16px;width:max-content}
.meta{width:min(70vw,280px);scroll-snap-align:start;display:grid;gap:8px;justify-items:center;text-align:center}
.meta figure{width:100%;margin:0 0 6px;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:var(--areia)}
.meta img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .9s var(--ease)}
.meta h3{font-size:clamp(15px,1.3vw,18px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ferrugem)}
.meta p{font-size:clamp(14px,1.1vw,16px);line-height:1.45;color:var(--tinta-2);max-width:24ch}
.metas-fecho{display:grid;gap:12px;justify-items:center;text-align:center;max-width:62ch;margin:36px auto 0}
.nao-importa{font-size:clamp(22px,2.6vw,34px);letter-spacing:-.02em;color:var(--ferrugem)}

/* 9. PORTAL com o formulário dentro do convite */
.convite-form{width:min(580px,100%);gap:12px;max-height:calc(100svh - 24px);overflow:auto}
.convite-form .convite-logo{width:110px}
.convite-form .modal-tit{font-size:clamp(21px,2.2vw,27px)}
.convite-form .modal-sub{margin-bottom:0}
.convite-form .form{text-align:left;width:100%}
.convite-corpo{width:100%}

/* 10. GABI: foto solta + texto */
.gabi{padding:clamp(64px,8vw,112px) 0}
.gabi-grade{display:grid;gap:30px}
.gabi-foto{margin:0;width:min(100%,440px);aspect-ratio:4/5;border-radius:26px;overflow:hidden;background:var(--branco)}
.gabi-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.gabi-texto{display:grid;gap:14px;align-content:center}
.gabi-nome{font-size:clamp(30px,4vw,52px)}

/* 11. FAQ */
.faq{padding:clamp(64px,8vw,112px) 0 clamp(72px,10vw,120px)}
.faq .miolo{display:grid;gap:18px}
.faq-lista{display:grid;gap:10px}
.faq-item{border:1.5px solid var(--linha);border-radius:18px;background:var(--branco);overflow:hidden}
.faq-h{margin:0}
.faq-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;padding:18px 20px;background:none;border:0;cursor:pointer;font:700 clamp(16px,1.3vw,19px)/1.35 var(--fonte);color:var(--tinta);transition:background-color .2s var(--ease)}
.faq-btn:focus-visible{outline-offset:-3px;border-radius:18px}
.faq-mais{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--pessego)}
.faq-mais::before,.faq-mais::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--ferrugem);transform:translate(-50%,-50%);transition:transform .3s var(--ease)}
.faq-mais::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-btn[aria-expanded="true"] .faq-mais::after{transform:translate(-50%,-50%) rotate(0)}
.faq-corpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.faq-corpo.aberto{grid-template-rows:1fr}
.faq-in{overflow:hidden;min-height:0}
.faq-in p{padding:0 20px 20px;font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:var(--tinta-2)}
.faq-in p strong{color:var(--tinta)}

/* rodapé com o último convite */
.rodape-longa{gap:18px;padding-top:40px}
.rodape-longa .data{margin-top:-6px}

@media (hover:hover) and (pointer:fine){
  .meta:hover img{transform:scale(1.05)}
  .faq-btn:hover{background:var(--areia)}
}
@media (min-width:760px){
  .tempo{gap:56px;padding:0}
  .tempo::before,.tempo .tempo-fill{left:50%;transform-origin:top;margin-left:-.75px}
  .tempo .tempo-fill{transform:scaleY(var(--fill,0))}
  .etapa{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);gap:0 28px;align-items:center}
  .etapa-n{grid-column:2;grid-row:1;justify-self:center}
  .etapa-foto{grid-column:1;grid-row:1;justify-self:end;width:min(100%,300px)}
  .etapa-txt{grid-column:3;grid-row:1}
  .etapa:nth-child(even) .etapa-foto{grid-column:3;justify-self:start}
  .etapa:nth-child(even) .etapa-txt{grid-column:1;justify-self:end;text-align:right}
  .etapa:nth-child(even) .etapa-txt p{margin-left:auto}
  .etapa-seta{left:50%;margin-left:-8px;bottom:-42px}
  .meses-grade{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px;align-items:center}
  .meses-fotos{justify-self:end}
  .dores-grade{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
  .dores-foto{position:sticky;top:calc(var(--topo-h) + 28px)}
  .funciona-grade{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
  .funciona-texto{position:sticky;top:calc(var(--topo-h) + 28px)}
  .par{grid-template-columns:minmax(0,1fr) 40px minmax(0,1.15fr);gap:18px;align-items:center;padding:22px 26px}
  .par-seta{display:block}
  .verbos-cena{height:300vh}
  .verbos-preso{position:sticky;top:var(--topo-h);height:calc(100vh - var(--topo-h));grid-template-columns:max-content minmax(240px,1fr);align-content:center;row-gap:clamp(8px,1.6vh,18px);column-gap:clamp(32px,4vw,56px);padding:0 48px;max-width:1280px}
  .verbo{display:contents}
  .verbo-nome{font-size:clamp(34px,4.6vw,72px);color:rgba(164,76,44,.18);transition:color .45s var(--ease)}
  .verbo-nome mark{background:transparent;color:inherit;transition:background-color .45s var(--ease),color .45s var(--ease)}
  .verbo.ativo .verbo-nome{color:var(--ferrugem)}
  .verbo.ativo .verbo-nome mark{background:var(--manteiga)}
  .verbo-txt{align-self:center;opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .55s var(--ease)}
  .verbo.ativo .verbo-txt{opacity:1;transform:none}
  .metas-filme{overflow:visible;scroll-snap-type:none}
  .metas-trilho{width:auto;max-width:1120px;margin-inline:auto;padding:0 20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
  .meta{width:auto;scroll-snap-align:none}
  .gabi-grade{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:center}
}
@media (min-width:960px){
  .convite-form{padding:30px 44px 26px}
}
@media (prefers-reduced-motion:reduce){
  .js .longa [data-revela]{opacity:1;transform:none;transition:none}
  .tempo .tempo-fill{transform:none}.etapa .etapa-n{background:var(--ferrugem);border-color:var(--ferrugem);color:var(--manteiga)}
  .risco{transform:scaleX(1)}
  .verbo-nome{color:var(--ferrugem)}.verbo-nome mark{background:var(--manteiga);color:var(--ferrugem)}.verbo-txt{opacity:1;transform:none}
  .verbos-cena{height:auto}.verbos-preso{position:static;height:auto}
  .faq-corpo{transition:none}
}