/* =============================================================================
   Chankeo · landing (chankeoapp.com)

   Folha separada de propósito. O theme.css é o sistema visual do APP — tokens,
   cartões, HUD, trilhos — e já passa de três mil linhas; a landing usa os mesmos
   tokens mas precisa de outra coisa: respiro largo, tipografia grande e um
   desenho que funcione numa tela de 1600px sem virar um app esticado. Misturar
   as duas faria cada ajuste de marketing arriscar uma tela do app.

   Carrega DEPOIS do theme.css e não redefine nenhum token: cor, contorno,
   sombra e raio vêm todos de lá, e por isso a landing acompanha o modo escuro
   sem uma linha a mais.
   ========================================================================== */

/* Cinto e suspensório: o theme.css monta a casca do app no telefone e algumas
   regras dele pegam elementos genéricos. A landing declara aqui que nada disso
   vale para ela — se amanhã outra regra solta aparecer lá, esta página não
   trava de novo. */
.lp-body,
.lp-body main{
  overflow:visible;overscroll-behavior:auto;height:auto;max-height:none;
  min-height:0;flex:none;display:block;
}
.lp-body main{padding:0}

.lp-body{
  background:var(--bg);color:var(--ink);
  /* a textura de papel do app, mais discreta aqui: a página é longa */
  background-image:radial-gradient(var(--ink-line) .5px, transparent .5px);
  background-size:26px 26px;
}
.lp-body .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* O atalho de acessibilidade ficava fora da tela por "top:-60px". No iPhone,
   com a barra do Safari recolhendo e a janela visual deslizando, ele reaparecia
   no alto da página. Recortado a zero, ele não tem como vazar — e continua
   inteiro para quem chega nele pelo teclado. */
.lp-body .skip{
  position:fixed;top:0;left:0;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);z-index:40;background:var(--gold);color:var(--on-gold);
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-sm);font-weight:800;
}
.lp-body .skip:focus,.lp-body .skip:focus-visible{
  width:auto;height:auto;clip-path:none;overflow:visible;
  top:10px;left:10px;padding:10px 14px;
}

/* ------------------------------------------------------------------ topo */
/* A barra de cima é OPACA de propósito.
   Com fundo translúcido + backdrop-filter, o Safari do iPhone deixa rastro nas
   quinas enquanto a página rola — o "vazamento" no canto de cima. Fundo cheio
   resolve, custa nada e some com o artefato em qualquer navegador.
   O isolation+transform cria a camada própria da barra, para ela não se misturar
   com o que passa por baixo. */
.lp-topo{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px clamp(16px,4vw,54px);
  background:var(--bg);
  border-bottom:var(--bw) solid var(--ink-line);
  isolation:isolate;transform:translateZ(0);
}
.lp-marca{flex:0 0 auto}
.lp-nav{display:flex;gap:20px;margin-left:auto;font-size:14px;font-weight:700}
.lp-nav a{color:var(--ink-2);padding:6px 0;border-bottom:3px solid transparent}
.lp-nav a:hover{color:var(--ink);border-bottom-color:var(--brand)}
.lp-topo-acoes{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.lp-tema{width:40px;height:40px;flex:0 0 auto}

/* ------------------------------------------------------------------ capa -*/
.lp-capa{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,5vw,64px);align-items:center;
  max-width:1180px;margin:0 auto;padding:clamp(34px,7vw,84px) clamp(16px,4vw,54px);
}
.lp-capa h1{
  font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(38px,6.4vw,68px);line-height:1.04;letter-spacing:-2.6px;
  margin:8px 0 18px;
}
.lp-capa .eyebrow{color:var(--brand-ink)}
.lp-lead{font-size:clamp(16px,1.9vw,19px);line-height:1.6;color:var(--ink-2);max-width:56ch;margin:0 0 24px}
.lp-lead b{color:var(--ink)}
.lp-capa-acoes{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.lp-cta{font-size:16px;padding:15px 26px}

.lp-lojas{display:flex;gap:12px;flex-wrap:wrap}
.lp-loja{
  display:flex;align-items:center;gap:10px;
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);
  padding:9px 15px;background:var(--surface);box-shadow:var(--pop-sm);
}
.lp-loja svg{width:22px;height:22px;flex:0 0 auto}
.lp-loja b{display:block;font-size:14px;line-height:1.15}
.lp-loja small{display:block;font-size:11px;color:var(--ink-2);font-weight:700;letter-spacing:.04em}
.lp-loja.is-breve{opacity:.72}
.lp-nota-loja{font-size:12.5px;color:var(--ink-2);margin:12px 0 0;max-width:46ch;line-height:1.55}

.lp-capa-arte{position:relative;justify-self:center}
.lp-capa-arte img{display:block;width:100%;max-width:420px;height:auto;
  filter:drop-shadow(6px 10px 0 rgba(0,0,0,.12))}
.lp-balao{
  position:absolute;top:6%;left:-6%;
  background:var(--gold);color:var(--on-gold);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-pill);box-shadow:var(--pop-sm);
  padding:8px 18px;font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:22px;letter-spacing:-.5px;transform:rotate(-7deg);
}

/* ---------------------------------------------------------------- seções -*/
.lp-secao{max-width:1180px;margin:0 auto;padding:clamp(40px,7vw,86px) clamp(16px,4vw,54px)}
.lp-secao-topo{max-width:64ch;margin-bottom:clamp(24px,4vw,42px)}
.lp-secao-topo .eyebrow{color:var(--brand-ink);display:block;margin-bottom:8px}
.lp-secao h2{
  font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(27px,3.9vw,42px);line-height:1.12;letter-spacing:-1.6px;margin:0;
}
.lp-secao-lead{font-size:16px;line-height:1.62;color:var(--ink-2);margin:14px 0 0;max-width:58ch}

/* A faixa escura quebra a página e separa "o que é" de "como é".
   As cores dela são fixas, não tokens: --ink inverte com o tema, e uma faixa
   que se propunha escura viraria uma tarja creme no modo escuro. Aqui ela é
   escura nos dois, só um tom mais fundo quando a página já está escura. */
.lp-secao-escura{
  --faixa:#2E2B24; --faixa-tinta:#F5E9CF; --faixa-tinta-2:#CDBFA0;
  --faixa-caixa:#3B372E; --faixa-borda:#514B3F;
  max-width:none;background:var(--faixa);color:var(--faixa-tinta);
  border-block:var(--bw) solid var(--ink-line);
}
:root[data-theme="dark"] .lp-secao-escura{--faixa:#17140F;--faixa-caixa:#26221B;--faixa-borda:#3A3428}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .lp-secao-escura{--faixa:#17140F;--faixa-caixa:#26221B;--faixa-borda:#3A3428}
}
.lp-secao-escura>*{max-width:1180px;margin-inline:auto}
.lp-secao-escura h2,.lp-secao-escura h3{color:var(--faixa-tinta)}
.lp-secao-escura .eyebrow{color:var(--gold)}
.lp-secao-escura .lp-secao-lead{color:var(--faixa-tinta-2)}

/* ---------------------------------------------------------------- método -*/
.lp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px}
.lp-card{
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  box-shadow:var(--pop);padding:22px;
}
.lp-card-ico{
  display:grid;place-items:center;width:52px;height:52px;margin-bottom:14px;
  background:var(--gold);color:var(--on-gold);
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);box-shadow:var(--pop-sm);
}
.lp-card:nth-child(2) .lp-card-ico{background:var(--teal);color:var(--on-brand)}
.lp-card:nth-child(3) .lp-card-ico{background:var(--olive);color:var(--on-brand)}
.lp-card-ico svg{width:26px;height:26px}
.lp-card h3{font-size:21px;line-height:1.24;letter-spacing:-.6px;margin:0 0 10px}
.lp-card p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 10px}
.lp-card p b{color:var(--ink)}
.lp-exemplo{
  font-size:13px;line-height:1.6;color:var(--ink-2);background:var(--surface-2);
  border-left:4px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:10px 12px;margin:0;
}
.lp-curva{display:block;width:100%;height:auto;margin:4px 0 6px}
.lp-curva-linha{fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.lp-curva-ponto{fill:var(--teal);stroke:var(--ink-line);stroke-width:2}
.lp-curva-base{stroke:var(--ink-line);stroke-width:2;opacity:.25}
.lp-legenda{font-size:12px;color:var(--ink-2);margin:0 0 10px}

/* ------------------------------------------------------- o ciclo do método */
/* Quatro passos em fila, com seta entre eles no desktop e empilhados no
   telefone. A seta é ::after em vez de um caractere no HTML: assim ela some
   sozinha quando a fila quebra, sem sobrar um "→" solto no fim da linha. */
.lp-ciclo{
  list-style:none;margin:0 0 6px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;
}
.lp-ciclo li{
  position:relative;background:var(--surface);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-lg);box-shadow:var(--pop-sm);padding:18px 16px 16px;
}
.lp-ciclo li::after{
  content:'';position:absolute;top:50%;right:-13px;width:14px;height:14px;
  border-top:3px solid var(--ink-line);border-right:3px solid var(--ink-line);
  transform:translateY(-50%) rotate(45deg);opacity:.45;
}
.lp-ciclo li:last-child::after{display:none}
.lp-ciclo-n{
  position:absolute;top:-13px;left:16px;width:28px;height:28px;border-radius:50%;
  background:var(--brand);color:var(--on-brand);border:var(--bw) solid var(--ink-line);
  display:grid;place-items:center;font-weight:800;font-size:14px;
}
.lp-ciclo-ico{display:block;width:30px;height:30px;color:var(--brand-ink);margin:6px 0 10px}
.lp-ciclo-ico svg{width:100%;height:100%}
.lp-ciclo b{display:block;font-size:16px;line-height:1.25;margin-bottom:5px}
.lp-ciclo small{font-size:13px;line-height:1.5;color:var(--ink-2)}
.lp-ciclo-nota{margin:0 0 4px;text-align:left}

.lp-subtitulo{
  font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(20px,2.4vw,26px);letter-spacing:-.9px;margin:30px 0 16px;
}

/* ------------------------------------------------------------- as técnicas */
.lp-metodos{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:16px}
.lp-metodo{
  position:relative;background:var(--surface);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-lg);box-shadow:var(--pop);padding:20px;
  display:flex;flex-direction:column;
}
.lp-metodo .eyebrow{color:var(--ink-2);display:block;font-size:10.5px;margin-bottom:4px}
.lp-metodo h4{
  font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:21px;line-height:1.2;letter-spacing:-.7px;margin:0 0 10px;
}
.lp-metodo-ico{
  display:grid;place-items:center;width:46px;height:46px;margin-bottom:12px;
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);box-shadow:var(--pop-sm);
  background:var(--gold);color:var(--on-gold);
}
.lp-metodo-ico svg{width:24px;height:24px}
.lp-metodo[data-tom="brand"] .lp-metodo-ico{background:var(--brand);color:var(--on-brand)}
.lp-metodo[data-tom="teal"]  .lp-metodo-ico{background:var(--teal);color:var(--on-brand)}
.lp-metodo[data-tom="olive"] .lp-metodo-ico{background:var(--olive);color:var(--on-brand)}
.lp-metodo-oque{font-size:14.5px;line-height:1.58;color:var(--ink);margin:0 0 12px}
.lp-metodo-porque,.lp-metodo-onde{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0 0 10px}
.lp-metodo-porque b,.lp-metodo-onde b{color:var(--ink)}
.lp-metodo-porque{
  background:var(--surface-2);border-left:4px solid var(--gold);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:11px 13px;
}
.lp-metodo[data-tom="teal"]  .lp-metodo-porque{border-left-color:var(--teal)}
.lp-metodo[data-tom="olive"] .lp-metodo-porque{border-left-color:var(--olive)}
.lp-metodo[data-tom="brand"] .lp-metodo-porque{border-left-color:var(--brand)}
.lp-metodo-onde{margin-bottom:12px}
.lp-metodo-fonte{
  font-size:11.5px;line-height:1.5;color:var(--ink-2);margin:auto 0 0;
  padding-top:11px;border-top:2px solid var(--ink-line);
}
.lp-metodo-rodape{max-width:64ch;margin-top:22px}

/* ----------------------------------------------------------------- jogos -*/
.lp-jogos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;
}
.lp-jogo{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:'ico nome' 'ico desc' 'tec tec';
  gap:1px 12px;align-items:center;
  background:var(--faixa-caixa);border:2px solid var(--faixa-borda);
  border-radius:var(--r-md);padding:13px 15px;
}
.lp-jogo-tecnica{
  grid-area:tec;justify-self:start;margin-top:9px;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold);border:2px solid var(--faixa-borda);border-radius:var(--r-pill);
  padding:3px 9px;
}
.lp-jogo-ico{grid-area:ico;display:grid;place-items:center;width:38px;height:38px;
  border-radius:var(--r-sm);background:var(--gold);color:var(--on-gold)}
.lp-jogo-ico svg{width:20px;height:20px}
.lp-jogo b{grid-area:nome;font-size:15px;line-height:1.2}
.lp-jogo small{grid-area:desc;font-size:12px;line-height:1.4;color:var(--faixa-tinta-2)}

.lp-duelo{
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:26px;
  background:var(--brand);color:var(--on-brand);
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  padding:22px clamp(18px,3vw,30px);box-shadow:var(--pop);
}
.lp-duelo img{flex:0 0 auto;width:132px;height:auto}
.lp-duelo>div{flex:1 1 300px;min-width:0}
/* sobre tijolo, oliva e petróleo a tinta é sempre o creme — regra da casa,
   e a mostarda aqui ficava em 2,6:1 */
.lp-duelo .eyebrow{color:var(--on-brand)}
.lp-secao-escura .lp-duelo h3{color:var(--on-brand);font-size:25px;letter-spacing:-.9px;margin:6px 0 8px}
.lp-duelo p{font-size:15px;line-height:1.58;margin:0;color:var(--on-brand)}
.lp-duelo p b{color:var(--on-brand)}

/* --------------------------------------------------------------- brújula -*/
.lp-brujula{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:start}
.lp-brujula-esq{display:grid;gap:14px;min-width:0}

.lp-radar-caixa{
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  box-shadow:var(--pop);padding:18px 16px 14px;
}
.lp-radar{display:block;width:100%;height:auto;max-width:340px;margin:0 auto;overflow:visible}
.lp-radar-teia{fill:none;stroke:var(--ink-line);stroke-width:1.5;opacity:.2}
.lp-radar-eixo{stroke:var(--ink-line);stroke-width:1.5;opacity:.2}
.lp-radar-area{fill:var(--brand);fill-opacity:.24;stroke:var(--brand);stroke-width:2.5;stroke-linejoin:round}
.lp-radar-ponto{fill:var(--brand);stroke:var(--surface);stroke-width:1.5}
.lp-radar-rotulo{fill:var(--ink-2);font-size:10.5px;font-weight:800;letter-spacing:.02em}
.lp-radar-caixa .lp-legenda{text-align:center;margin:8px 0 0}
.lp-eixos{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.lp-eixos li{
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);
  padding:13px 16px;box-shadow:var(--pop-sm);
}
.lp-eixos b{display:block;font-size:15.5px;line-height:1.2;margin-bottom:3px}
.lp-eixos small{font-size:12.5px;color:var(--ink-2);line-height:1.5}

.lp-lab{
  background:var(--teal);color:var(--on-brand);
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--pop);
}
.lp-lab .eyebrow{color:var(--on-brand)}
.lp-lab h3{color:var(--on-brand);font-size:24px;line-height:1.22;letter-spacing:-.9px;margin:8px 0 12px}
.lp-lab p{font-size:14.5px;line-height:1.6;margin:0 0 14px;color:var(--on-brand)}
.lp-medida{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0;
  background:#15607B;border-radius:var(--r-md);padding:14px 16px;
}
.lp-medida b{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:42px;line-height:1;letter-spacing:-2px;color:var(--on-brand)}
.lp-medida span{font-size:20px;font-weight:800}
.lp-medida small{flex:1 0 100%;font-size:12.5px;line-height:1.5;margin-top:6px;color:var(--on-brand)}

/* ------------------------------------------------------------------ beta -*/
.lp-beta{max-width:none;background:var(--gold-soft);border-block:var(--bw) solid var(--ink-line)}
.lp-beta-caixa{
  max-width:940px;margin:0 auto;display:flex;gap:26px;align-items:center;flex-wrap:wrap;
}
.lp-beta-caixa img{flex:0 0 auto;width:128px;height:auto}
.lp-beta-texto{flex:1 1 320px;min-width:0}
.lp-beta-texto .eyebrow{color:var(--brand-ink)}
.lp-beta h2{font-size:clamp(25px,3.4vw,36px);margin:6px 0 10px}
.lp-beta p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 16px;max-width:56ch}

.lp-form{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.lp-form input[type=email]{
  flex:1 1 230px;min-width:0;font-size:16px;padding:13px 16px;
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink);box-shadow:var(--pop-sm);
}
.lp-form .button{flex:0 0 auto}
/* o campo-isca sai da tela sem display:none — robô ignora o que está escondido
   assim, e leitor de tela não anuncia porque o rótulo é aria-hidden */
.lp-isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lp-form-aviso{font-size:14px;line-height:1.55;margin:12px 0 0;font-weight:700}
.lp-form-aviso:empty{display:none}
.lp-form-aviso.is-ok{color:var(--olive-ink)}
.lp-form-aviso.is-erro{color:var(--brand-ink)}
.lp-form-nota{font-size:12.5px;color:var(--ink-2);margin:10px 0 0}

/* ---------------------------------------------------------------- rodapé -*/
.lp-rodape{
  border-top:var(--bw) solid var(--ink-line);background:var(--surface);
  display:flex;gap:24px;flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding:26px clamp(16px,4vw,54px);
}
.lp-rodape p{font-size:13px;color:var(--ink-2);margin:6px 0 0}
.lp-rodape nav{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;font-weight:700}
.lp-rodape nav a{color:var(--ink-2)}
.lp-rodape nav a:hover{color:var(--brand-ink)}
.lp-rodape small{font-size:12px;color:var(--ink-3)}

/* ------------------------------------------------------------- telefone --*/
@media (max-width:860px){
  .lp-capa{grid-template-columns:1fr;text-align:left}
  .lp-capa-arte{order:-1;max-width:260px;justify-self:start}
  .lp-balao{font-size:18px;padding:6px 14px}
  .lp-nav{display:none}
  .lp-topo{gap:10px}
  .lp-duelo img{width:104px}
  .lp-beta-caixa img{width:96px}
}
@media (max-width:520px){
  .lp-capa h1{letter-spacing:-1.6px}
  .lp-capa-acoes .button{flex:1 1 auto;justify-content:center}
  .lp-form .button{flex:1 1 auto;justify-content:center}
  .lp-rodape{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ==========================================================================
   Animações, insígnias e a seção do DELE
   --------------------------------------------------------------------------
   A regra das animações: elas entram só depois que o JavaScript confirma que
   pode animar. Enquanto a classe tem-anima não estiver no <html>, todo mundo
   está visível — quem desligou movimento no sistema, quem tem navegador sem
   IntersectionObserver e quem simplesmente ficou sem JS veem a página inteira,
   parada. É o contrário do padrão comum de esconder por CSS e torcer para o
   script rodar.
   ========================================================================== */

.tem-anima [data-anima]{
  opacity:0;transform:translateY(18px);
  transition:opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i, 0) * 55ms);
}
.tem-anima [data-anima].is-visivel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .tem-anima [data-anima]{opacity:1;transform:none;transition:none}
}

/* micro-reações ao toque e ao ponteiro */
.lp-card,.lp-metodo,.lp-insignia,.lp-eixos li,.lp-radar-caixa{transition:transform .18s ease, box-shadow .18s ease}
.lp-card:hover,.lp-metodo:hover,.lp-eixos li:hover{transform:translate(-2px,-2px)}
.lp-jogo{transition:transform .16s ease, background .16s ease}
.lp-jogo:hover{transform:translateY(-2px);background:var(--faixa-borda)}
.lp-cta{transition:transform .16s ease}
.lp-cta:hover{transform:translateY(-2px)}
.lp-capa-arte.is-acenando img{animation:lp-acena .9s ease-in-out}
@keyframes lp-acena{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(-3deg)}
  60%{transform:rotate(2.5deg)}
}
@media (prefers-reduced-motion:reduce){
  .lp-capa-arte.is-acenando img{animation:none}
  .lp-card:hover,.lp-metodo:hover,.lp-eixos li:hover,.lp-jogo:hover,.lp-cta:hover{transform:none}
}

/* -------- insígnias -------- */
.lp-insignias{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
}
@media (max-width:900px){.lp-insignias{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lp-insignia{
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  box-shadow:var(--pop-sm);padding:16px 12px 13px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.lp-insignia img{display:block;width:84px;height:84px;object-fit:contain;margin-bottom:6px;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.14));transition:transform .2s ease}
.lp-insignia:hover img{transform:scale(1.07) rotate(-3deg)}
.lp-insignia b{font-size:14.5px;line-height:1.2}
.lp-insignia small{font-size:12px;color:var(--ink-2);line-height:1.4}
.lp-insignia-degraus{
  margin-top:7px;font-size:11px;font-weight:800;letter-spacing:.05em;
  background:var(--gold-soft);color:var(--gold-ink);
  border:2px solid var(--ink-line);border-radius:var(--r-pill);padding:2px 10px;
}
@media (prefers-reduced-motion:reduce){.lp-insignia:hover img{transform:none}}

/* -------- o duelo com dois avatares -------- */
.lp-duelo>.lp-duelo-versus{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.lp-duelo-versus img{
  width:76px;height:76px;border-radius:50%;object-fit:cover;
  border:var(--bw) solid var(--ink-line);background:var(--surface);box-shadow:var(--pop-sm);
}
.lp-duelo-versus span{
  font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:18px;letter-spacing:-.5px;color:var(--on-gold);
  background:var(--gold);border:var(--bw) solid var(--ink-line);border-radius:999px;
  padding:4px 10px;line-height:1;box-shadow:var(--pop-sm);
}

/* -------- DELE -------- */
.lp-dele{max-width:none;background:var(--teal-soft);border-block:var(--bw) solid var(--ink-line)}
.lp-dele-caixa{max-width:940px;margin:0 auto;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.lp-dele-arte{flex:0 0 auto;width:124px;height:124px;object-fit:contain;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.14))}
.lp-dele-caixa>div{flex:1 1 320px;min-width:0}
.lp-dele .eyebrow{color:var(--teal-ink)}
.lp-dele h2{font-size:clamp(24px,3.2vw,34px);margin:6px 0 10px}
.lp-dele p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 14px;max-width:58ch}
.lp-dele-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lp-dele-lista li{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5;color:var(--ink)}
.lp-dele-lista svg{width:20px;height:20px;flex:0 0 auto;color:var(--teal-ink);margin-top:1px}

@media (max-width:520px){
  .lp-insignias{grid-template-columns:1fr 1fr}
  .lp-insignia img{width:68px;height:68px}
  .lp-duelo-versus img{width:60px;height:60px}
  .lp-dele-arte{width:96px;height:96px}
}

/* ==========================================================================
   v53 · mais desenhos na landing e a Brújula equilibrada
   ========================================================================== */
/* a turma em volta do Don Cervantes, na capa */
.lp-capa-arte .lp-turma{position:absolute;left:-4%;bottom:6%;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.lp-capa-arte .lp-turma-item{display:flex;align-items:center;gap:8px;transform:rotate(-2deg)}
.lp-capa-arte .lp-turma-item:nth-child(2){margin-left:34px;transform:rotate(2deg)}
.lp-capa-arte .lp-turma-item:nth-child(3){margin-left:10px}
.lp-capa-arte .lp-turma img{width:64px;height:64px;max-width:none;border-radius:50%;border:var(--bw) solid var(--ink-line);
  box-shadow:var(--pop-sm);background:var(--surface);filter:none;animation:lp-flutua 5s ease-in-out infinite}
.lp-capa-arte .lp-turma-item:nth-child(2) img{animation-delay:-1.6s}
.lp-capa-arte .lp-turma-item:nth-child(3) img{animation-delay:-3.2s}
.lp-turma-fala{background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-pill);box-shadow:var(--pop-sm);
  padding:5px 12px;font-family:var(--font-display);font-variation-settings:var(--wonk);font-size:15px;white-space:nowrap;color:var(--ink)}
@keyframes lp-flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* o Cervantes ao lado do título da seção */
.lp-secao{position:relative}
.lp-secao-arte{position:absolute;top:clamp(34px,6vw,70px);right:clamp(16px,5vw,64px);width:clamp(120px,15vw,200px);height:auto;
  filter:drop-shadow(5px 8px 0 rgba(0,0,0,.12));pointer-events:none}

/* o ciclo ganha um desenho por etapa */
.lp-ciclo li{position:relative}
.lp-ciclo-arte{position:absolute;right:10px;top:-26px;width:62px;height:auto;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.12))}

/* Brújula: radar e laboratório lado a lado, do mesmo tamanho; os sete eixos embaixo, em grade */
.lp-brujula{align-items:stretch}
.lp-brujula-esq,.lp-brujula-esq>.lp-radar-caixa{height:100%}
.lp-radar-caixa{display:flex;flex-direction:column;justify-content:center}
.lp-lab{display:flex;flex-direction:column;position:relative;overflow:hidden}
.lp-lab .lp-medida{margin-top:auto}
.lp-lab-arte{display:block;width:clamp(96px,11vw,140px);height:auto;margin:18px 0 -6px auto;filter:drop-shadow(4px 6px 0 rgba(0,0,0,.18))}
.lp-eixos-grade{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:22px}
.lp-eixos-grade li{display:flex;align-items:center;gap:12px;padding:12px 14px}
.lp-eixos-grade li img{width:56px;height:auto;flex-shrink:0;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.10))}
.lp-eixos-grade li span{min-width:0}

@media (max-width:980px){ .lp-secao-arte{display:none} }
@media (max-width:860px){
  .lp-capa-arte .lp-turma{left:auto;right:-58%;bottom:4%}
  .lp-capa-arte .lp-turma img{width:48px;height:48px}
  .lp-turma-fala{font-size:13px;padding:4px 10px}
  .lp-ciclo-arte{width:50px;top:-18px}
}
@media (max-width:520px){ .lp-capa-arte .lp-turma{display:none} }
@media (prefers-reduced-motion:reduce){ .lp-capa-arte .lp-turma img{animation:none} }
/* os eixos agora vivem fora do grid, então o h3 de subtítulo abre espaço */
#brujula .lp-subtitulo{margin-top:34px}
.lp-lab-arte{align-self:flex-end}
/* perguntas frequentes */
.lp-faq{display:grid;gap:12px;max-width:880px}
.lp-faq-item{background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:18px;box-shadow:var(--pop-sm);padding:0 20px}
.lp-faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}
.lp-faq-item summary::-webkit-details-marker{display:none}
.lp-faq-item summary::after{content:"+";font-family:var(--font-display);font-size:26px;line-height:1;color:var(--brand);transition:transform .2s}
.lp-faq-item[open] summary::after{transform:rotate(45deg)}
.lp-faq-item summary h3{margin:0;font-size:18px;line-height:1.3;letter-spacing:-.3px}
.lp-faq-item p{margin:0 0 18px;font-size:15px;line-height:1.65;color:var(--ink-2)}
.lp-brujula .lp-radar{max-width:440px}
.lp-eixos-grade .lp-eixo-destaque{background:var(--brand);border-color:var(--ink-line)}
.lp-eixos-grade .lp-eixo-destaque b,.lp-eixos-grade .lp-eixo-destaque small{color:var(--on-brand)}