/* ============================================================
   CARTADA JURÍDICA - CSS base compartilhado pelas 4 landings
   Layout, tipografia e componentes. Toda cor de marca vem de
   CSS variables (--marca, --btn, --solida, --faixa…), definidas
   por página. Trocar de tema = trocar 8 tokens.
   Neutros e contraste verificados em WCAG 2.1 AA (dia + madrugada).
   ============================================================ */

/* ---- Neutros compartilhados - "dia" ---- */
:root {
  --fundo: #FAF3E8;
  --superficie: #FFFBF4;
  --superficie-2: #F3E7D3;
  --borda: #E6D5BC;
  --tinta: #33261A;
  --tinta-2: #6B5842;
  --acerto: #256B42;
  --erro: #A93F36;
  --acerto-suave: #DDEEDF;
  --erro-suave: #F6DFD8;
  --carta-vermelho: #C0392B;
  --sombra-carta: 0 10px 24px rgba(58, 38, 10, 0.14);
}

/* ---- "Modo madrugada" - preto institucional da OAB (Pantone 419C) ----
   Neutros; a cor de marca vem da página. ---- */
[data-tema="madrugada"] {
  --fundo: #141516;
  --superficie: #1E1F21;
  --superficie-2: #292A2D;
  --borda: #3B3D41;
  --tinta: #F4F4F2;
  --tinta-2: #B7B9BD;
  --acerto: #6FC793;
  --erro: #EE8F84;
  --acerto-suave: #17301F;
  --erro-suave: #351B18;
  --carta-vermelho: #EE8F84;
  --sombra-carta: 0 10px 24px rgba(0, 0, 0, 0.55);
}

/* ---- Reset leve ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }
body {
  font-family: Inter, system-ui, sans-serif;
  /* trama de miudezas jurídicas no site inteiro, como papel de parede */
  background: var(--trama-fundo) repeat, var(--fundo);
  background-size: 210px 210px, auto;
  color: var(--tinta);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
  transition: background-color .3s ease, color .3s ease;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--marca-700); text-decoration: none; }
a:hover { color: var(--marca-700); text-decoration: underline; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---- Foco de teclado visível ---- */
a:focus-visible, button:focus-visible, summary:focus-visible,
.btn:focus-visible, .btn-ghost:focus-visible, .btn-outline:focus-visible,
.btn-invert:focus-visible, .pill:focus-visible, .nav-link:focus-visible,
.theme-toggle:focus-visible, .store-badge:focus-visible {
  outline: 3px solid var(--marca-700); outline-offset: 3px; border-radius: inherit;
}
/* Skip link - só aparece ao focar */
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--solida); color: #FFFBF4; padding: 10px 18px; border-radius: 999px;
  font-weight: 700; font-size: 14px; transition: top .18s ease;
}
.skip:focus-visible { top: 16px; text-decoration: none; }

/* ---- Utilitários ---- */
.wrap { max-width: 1160px; margin: 0 auto; }
.display { font-family: Nunito, system-ui, sans-serif; }
.eyebrow {
  font-size: 13px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--marca-700);
}
.h2 {
  font-family: Nunito, sans-serif; font-weight: 900;
  font-size: clamp(30px, 3.6vw, 42px); margin: 0; line-height: 1.12;
}
.lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--tinta-2); }
.section { max-width: 1160px; margin: 0 auto; padding: 64px 24px; }
.section-head { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.section-head.center { align-self: center; text-align: center; margin: 0 auto; }

/* ---- Botões ---- */
.btn, .btn-ghost, .btn-outline, .btn-invert, .pill {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer; border: none;
  transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}
.btn:hover, .btn-invert:hover, .pill:hover { text-decoration: none; }
.btn {
  background: var(--btn); color: var(--btn-tinta);
  padding: 16px 32px; border-radius: 999px; font-weight: 800; font-size: 17px;
  font-family: Nunito, sans-serif;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--btn), transparent 62%);
}
.btn:hover { transform: translateY(-2px); }
.btn-ghost {
  padding: 16px 24px; border-radius: 999px; font-weight: 700; font-size: 15px;
  border: 2px solid var(--borda); color: var(--tinta); background: transparent;
}
.btn-ghost:hover { border-color: var(--marca-700); text-decoration: none; }
.btn-outline {
  text-align: center; border: 2px solid var(--borda); border-radius: 999px;
  padding: 14px 24px; font-weight: 800; font-size: 15px; color: var(--tinta);
  background: transparent; width: 100%;
}
.btn-outline:hover { border-color: var(--marca-700); text-decoration: none; }
.btn-invert {
  background: #FFFBF4; color: var(--solida);
  padding: 16px 34px; border-radius: 999px; font-weight: 800; font-size: 17px;
  font-family: Nunito, sans-serif;
  box-shadow: 0 10px 24px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.7) inset;
}
.btn-invert:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,0.34), 0 1px 0 rgba(255,255,255,0.7) inset; }
.pill {
  background: var(--btn); color: var(--btn-tinta);
  padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 14px;
  box-shadow: var(--sombra-carta);
}
.pill:hover { filter: brightness(1.05); }
.pill { white-space: nowrap; }
.pill .rot-curto { display: none; }   /* rótulo curto entra só no mobile */

/* ---- Nav ---- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; max-width: 1160px; margin: 0 auto; padding: 20px 24px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--tinta); }
.brand:hover { text-decoration: none; color: var(--tinta); }
/* o logo traz o próprio letreiro, ilegível nesse tamanho: ele entra como
   emblema e o nome fica ao lado, em texto de verdade */
.brand-logo { width: 46px; height: auto; flex: 0 0 auto; transition: transform .25s ease; }
.brand:hover .brand-logo { transform: rotate(-6deg) scale(1.06); }
.brand-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; background: var(--solida);
  color: #FFFBF4; font-family: Nunito, sans-serif; font-weight: 900; font-size: 19px;
  transform: rotate(-6deg); box-shadow: var(--sombra-carta);
}
.brand-name { font-family: Nunito, sans-serif; font-weight: 900; font-size: 20px; }
.nav-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-size: 14px; font-weight: 600; color: var(--tinta); }
.nav-link:hover { color: var(--marca-700); }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
  background: var(--superficie-2); border: 1px solid var(--borda);
  color: var(--tinta); font-size: 16px; line-height: 1; transition: filter .18s ease;
}
.theme-toggle:hover { filter: brightness(1.05); }

/* ---- Hero ---- */
.hero {
  max-width: 1160px; margin: 0 auto; padding: 40px 24px 72px;
  display: flex; gap: 48px; align-items: center; flex-wrap: wrap;
}
.hero-copy { flex: 1 1 440px; display: flex; flex-direction: column; gap: 22px; min-width: 300px; }
.chip {
  align-self: flex-start; background: var(--superficie-2); border: 1px solid var(--borda);
  color: var(--tinta-2); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px;
}
.h1 {
  font-family: Nunito, sans-serif; font-weight: 900;
  font-size: clamp(40px, 5.4vw, 64px); line-height: 1.06; margin: 0;
}
.hero-lead {
  margin: 0; font-size: 18px; line-height: 1.6; color: var(--tinta-2); max-width: 520px;
}
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.fineprint { font-size: 13px; color: var(--tinta-2); }
.store-row { display: flex; gap: 12px; flex-wrap: wrap; }
.store-badge {
  display: inline-flex; align-items: center; gap: 10px; background: #221E1B;
  color: #FFFBF4; border-radius: 12px; padding: 9px 18px; transition: filter .18s ease;
}
.store-badge:hover { filter: brightness(1.15); text-decoration: none; }
.store-badge small { font-size: 10px; opacity: .8; }
.store-badge b { font-size: 15px; font-weight: 700; }
.store-badge .stack { display: flex; flex-direction: column; line-height: 1.15; color: #FFFBF4; }

/* ---- Hero: arte (cartas flutuantes + celular + mascote) ---- */
.hero-art {
  flex: 1 1 420px; min-width: 320px; position: relative;
  display: flex; align-items: flex-end; justify-content: center; min-height: 600px;
}
/* Cartas flutuantes ao lado do celular (à direita, sem cobrir a tela) */
.float {
  position: absolute; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 14px; box-shadow: var(--sombra-carta); z-index: 4;
  transform: rotate(var(--rot, 0deg)); animation: flutua 7s ease-in-out infinite;
}
/* As três empilham na coluna da direita e precisam terminar antes de onde o
   mascote começa, senão o cartão de baixo cai em cima da cabeça dele. */
.float.quote { top: 0; right: 0; --rot: 6deg; padding: 14px 16px; max-width: 188px; }
.float.streak { top: 128px; right: 16px; --rot: -5deg; animation-duration: 6s; animation-delay: .8s;
  padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
.float.win { top: 204px; right: 2px; --rot: 5deg; animation-duration: 8s; animation-delay: 1.5s;
  padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.quote-law { font-family: Lora, serif; font-style: italic; font-size: 13.5px; line-height: 1.5; color: var(--marca-700); }
.quote-src { display: block; margin-top: 6px; font-size: 11px; color: var(--tinta-2); font-weight: 600; }
.streak strong { font-family: Nunito, sans-serif; font-size: 16px; font-weight: 900; }
.streak small { font-size: 11px; color: var(--tinta-2); }
.win-label { font-size: 11px; font-weight: 700; color: var(--marca-700); letter-spacing: .06em; text-transform: uppercase; }
.win-ok { font-size: 13px; font-weight: 600; color: var(--acerto); }
@keyframes flutua {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-10px) rotate(var(--rot, 0deg)); }
}
@media (prefers-reduced-motion: reduce) { .float { animation: none; } }

/* Aparelho no padrão iPhone: banda de titânio escovado, moldura preta fina
   e uniforme, cantos com raio contínuo e os botões onde eles ficam de
   verdade (ação e volume à esquerda, lateral à direita). */
.phone {
  width: 258px; flex: 0 0 auto; z-index: 3; position: relative; border-radius: 50px;
  background: linear-gradient(148deg,
    #e9eaec 0%, #a8abb0 9%, #6f7277 22%, #4b4e53 36%,
    #9ea1a6 52%, #5d6065 68%, #cbcdd1 86%, #7c7f84 100%);
  padding: 3px;
  box-shadow: 0 34px 70px rgba(30, 22, 8, .42), 0 6px 18px rgba(30, 22, 8, .28),
              inset 0 0 0 .5px rgba(255, 255, 255, .55);
}
.phone .btn-side {
  position: absolute; border-radius: 1.5px;
  background: linear-gradient(180deg, #c2c4c8, #83868b 40%, #6c6f74);
}
.phone .b1 { left: -2px; top: 98px;  width: 3px; height: 24px; }   /* botão de ação */
.phone .b2 { left: -2px; top: 140px; width: 3px; height: 42px; }   /* volume + */
.phone .b3 { left: -2px; top: 192px; width: 3px; height: 42px; }   /* volume - */
.phone .b4 { right: -2px; top: 152px; width: 3px; height: 66px; }  /* lateral */
.phone-bezel { background: #060708; border-radius: 47px; padding: 9px; }
/* altura travada: as questões da demo têm textos de tamanhos diferentes e
   sem isso o aparelho encolhe e cresce a cada troca */
/* raio encaixado: 50 do aparelho - 3 de banda - 9 de moldura = 38 na tela */
.phone-screen { background: var(--fundo); border-radius: 38px; overflow: hidden; display: flex; flex-direction: column; position: relative; min-height: 496px; }
.status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 19px 5px; font-size: 11px; font-weight: 600; color: var(--tinta);
}
.status .time { font-variant-numeric: tabular-nums; letter-spacing: .01em; font-weight: 700; }
/* Dynamic Island: 125x36pt na tela de 393pt, na mesma proporção aqui */
.notch {
  position: absolute; left: 50%; top: 7px; transform: translateX(-50%);
  width: 76px; height: 22px; border-radius: 999px; background: #000;
}
.notch::after {
  content: ""; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #2b3340, #0b0d10 62%);
}
.status .icons { display: inline-flex; align-items: center; gap: 4px; }
.phone-body { padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.prova-card {
  background: var(--solida); color: #FFFBF4; border-radius: 12px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.prova-card small { font-size: 10px; opacity: .85; font-weight: 600; }
.prova-card b { font-family: Nunito, sans-serif; font-weight: 900; font-size: 16px; }
.q-meta { display: flex; justify-content: space-between; align-items: center; }
.q-meta .n { font-size: 11px; font-weight: 700; color: var(--tinta-2); }
.q-meta .xp { font-size: 11px; font-weight: 800; color: var(--marca-700); }
.progress { height: 6px; background: var(--superficie-2); border-radius: 99px; overflow: hidden; }
.progress > i { display: block; width: 70%; height: 100%; background: var(--marca); border-radius: 99px; }
.q-card {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px; box-shadow: 0 6px 14px rgba(58,38,10,0.08);
  flex: 1 1 auto;   /* absorve a diferença de texto entre as questões */
}
.q-tag { font-size: 10px; font-weight: 700; color: var(--marca-700); letter-spacing: .05em; }
.q-text { font-size: 12px; line-height: 1.45; font-weight: 500; }
.q-opts { display: flex; flex-direction: column; gap: 6px; }
.q-opt { border: 1.5px solid var(--borda); border-radius: 9px; padding: 7px 10px; font-size: 11px; color: var(--tinta-2); }
.q-opt.ok { border-color: var(--acerto); background: var(--acerto-suave); font-weight: 700; color: var(--acerto); }
.q-foot { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 0; }
.q-foot .seq { font-size: 10px; font-weight: 700; color: var(--acerto); }
.q-foot .next { background: var(--btn); color: var(--btn-tinta); font-size: 11px; font-weight: 800; border-radius: 99px; padding: 6px 14px; }
.home-ind { display: flex; justify-content: center; padding: 6px 0 7px; }
.home-ind > span { width: 84px; height: 4px; border-radius: 99px; background: var(--tinta); opacity: .3; }
.hero-mascot { width: 250px; flex: 0 0 auto; margin-left: -26px; margin-bottom: 4px; z-index: 2; position: relative; }

/* ---- Faixa de prova social ---- */
/* Faixa: cor sólida, com a trama jurídica por cima */
.band { background: var(--trama-clara) repeat, var(--faixa); background-size: 210px 210px, auto; }
.band-inner {
  max-width: 1160px; margin: 0 auto; padding: 28px 24px; display: flex; gap: 32px;
  justify-content: space-between; flex-wrap: wrap;
}
/* colunas iguais: um selo tem texto bem mais longo que os outros e, com
   largura por conteúdo, ele empurrava o quarto selo pra uma segunda linha */
.band-stat { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 150px; }
.band-stat strong { font-family: Nunito, sans-serif; font-weight: 900; font-size: 28px; color: #FFFBF4; }
.band-stat span { font-size: 13px; color: var(--faixa-sub); }

/* ---- Recursos (cards de carta) ---- */
.features { padding: 88px 24px 40px; display: flex; flex-direction: column; gap: 40px; }
/* 3 em cima, 3 embaixo; cartas mais finas (proporção de baralho) */
.features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 236px)); justify-content: center; gap: 26px; }
@media (max-width: 820px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 260px)); } }
@media (max-width: 540px) { .features-grid { grid-template-columns: minmax(0, 320px); } }
/* Carta com duas faces: frente com o conteúdo, verso com o tecido da marca.
   O verso só aparece durante a virada; sem JS a frente já está para cima. */
.features-grid { perspective: 1600px; }
.feature-card {
  position: relative; border-radius: 16px; box-shadow: var(--sombra-carta);
  transform-style: preserve-3d; transform: rotate(var(--rot, 0deg));
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover { transform: rotate(0deg) translateY(-5px); box-shadow: 0 20px 42px color-mix(in srgb, var(--solida), transparent 80%); }
.carta-frente, .carta-verso {
  border-radius: inherit; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* height 100%: as descrições têm tamanhos diferentes e, sem isso, a carta
   mais curta ficava alguns pixels menor que a vizinha na mesma linha */
.carta-frente {
  position: relative; background: var(--superficie); border: 1px solid var(--borda);
  padding: 30px 20px; min-height: 340px; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.carta-frente::before {
  content: ""; position: absolute; inset: 9px; border: 1.5px solid var(--borda);
  border-radius: 10px; pointer-events: none; opacity: .6;
}
.carta-verso {
  position: absolute; inset: 0; transform: rotateY(180deg);
  background:
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(255,251,244,.07) 7px 14px),
    repeating-linear-gradient(-45deg, transparent 0 7px, rgba(255,251,244,.07) 7px 14px),
    var(--solida);
  border: 1px solid var(--solida);
  display: flex; align-items: center; justify-content: center;
}
.carta-verso::before {
  content: ""; position: absolute; inset: 9px; border-radius: 10px;
  border: 1.5px solid rgba(255,251,244,.28);
}
/* mesmo emblema da carta de voltar ao topo: todo verso da página usa o trevo */
.carta-verso::after {
  content: "♣"; font-family: Georgia, serif; font-size: 46px;
  color: rgba(255,251,244,.32); line-height: 1;
}
.feature-suit {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%);
  font-size: 150px; line-height: 1; z-index: 0; opacity: .05; pointer-events: none;
  font-family: Georgia, serif;
}
.pip { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; line-height: .95; }
.pip.tl { top: 16px; left: 18px; }
.pip.br { bottom: 16px; right: 18px; transform: rotate(180deg); }
.pip b { font-family: Georgia, serif; font-weight: 700; font-size: 17px; }
.pip span { font-size: 15px; margin-top: 1px; }
.feature-ico {
  position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: 50%; background: var(--superficie-2);
  border: 1px solid var(--borda); display: flex; align-items: center; justify-content: center;
}
.feature-title { position: relative; z-index: 1; font-family: Nunito, sans-serif; font-weight: 800; font-size: 18px; margin: 2px 8px 0; text-align: center; }
.feature-desc { position: relative; z-index: 1; margin: 0 10px; font-size: 14px; line-height: 1.5; color: var(--tinta-2); text-align: center; }

/* ---- Como funciona ---- */
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px; }
.step {
  background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 18px;
  padding: 28px; display: flex; flex-direction: column; gap: 10px;
}
.step-num { font-family: Nunito, sans-serif; font-weight: 900; font-size: 40px; color: var(--marca-700); }
.step h3 { font-family: Nunito, sans-serif; font-weight: 800; font-size: 20px; margin: 0; }
.step p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tinta-2); }

/* ---- Tutor de IA ---- */
.split { display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.split.reverse { flex-wrap: wrap-reverse; }
.split-copy { flex: 1 1 400px; display: flex; flex-direction: column; gap: 16px; min-width: 300px; }
.split-lead { margin: 0; font-size: 17px; line-height: 1.65; color: var(--tinta-2); max-width: 480px; }
.checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; color: var(--tinta); }
.checklist li::before { content: "✓"; color: var(--acerto); font-weight: 800; }
.chat {
  flex: 1 1 380px; min-width: 300px; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 20px; box-shadow: var(--sombra-carta); overflow: hidden;
}
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--borda); background: var(--superficie-2); }
.avatar-ring { width: 40px; height: 40px; border-radius: 999px; overflow: hidden; background: var(--fundo); border: 2px solid var(--marca); display: inline-flex; flex: 0 0 auto; }
.chat-head b { font-family: Nunito, sans-serif; font-size: 15px; font-weight: 800; }
.chat-head .on { font-size: 12px; color: var(--acerto); font-weight: 600; }
/* altura reservada: as respostas do loop têm tamanhos diferentes e sem isso
   o bloco do chat cresce e encolhe a cada volta */
.chat-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 268px; }

/* ---- Conversa animada ----
   Só esconde as bolhas depois que o script assume (.anima). Sem JS, ou com
   os timers estrangulados, a conversa aparece inteira em vez de sumir. */
.chat-body.anima [data-chat-user],
.chat-body.anima [data-chat-bot],
.chat-body.anima [data-chat-chips] {
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.3,1);
}
.chat-body.anima [data-chat-user] { transform: translateY(8px) translateX(10px); }
.chat-body.anima [data-chat-user].on,
.chat-body.anima [data-chat-bot].on,
.chat-body.anima [data-chat-chips].on { opacity: 1; transform: none; }
.chat-body [data-chat-bot] { min-height: 44px; }
/* pontinhos de "digitando" */
.digitando { display: none; align-items: center; gap: 4px; height: 18px; }
.digitando.on { display: inline-flex; }
.digitando i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-2);
  animation: pontinho 1.1s ease-in-out infinite;
}
.digitando i:nth-child(2) { animation-delay: .16s; }
.digitando i:nth-child(3) { animation-delay: .32s; }
@keyframes pontinho {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-body [data-chat-user],
  .chat-body [data-chat-bot],
  .chat-body [data-chat-chips] { opacity: 1; transform: none; transition: none; }
  .digitando i { animation: none; }
}
.bubble-user { align-self: flex-end; max-width: 85%; background: var(--solida); color: #FFFBF4; border-radius: 16px 16px 4px 16px; padding: 11px 14px; font-size: 14px; line-height: 1.5; }
.bubble-bot { align-self: flex-start; max-width: 88%; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 16px 16px 16px 4px; padding: 11px 14px; font-size: 14px; line-height: 1.55; }
.quick-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-outline { border: 1.5px solid var(--marca-700); color: var(--marca-700); font-size: 13px; font-weight: 700; border-radius: 999px; padding: 7px 14px; }
.chip-muted { border: 1.5px solid var(--borda); color: var(--tinta-2); font-size: 13px; font-weight: 600; border-radius: 999px; padding: 7px 14px; }

/* ---- Gamificação ---- */
.game-art { flex: 1 1 380px; min-width: 300px; position: relative; display: flex; flex-direction: column; gap: 18px; }
.game-mascot { position: relative; align-self: center; width: min(340px, 86%); }
.badge-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.trophy { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 12px 18px; box-shadow: var(--sombra-carta); display: flex; flex-direction: column; align-items: center; }
.trophy strong { font-family: Nunito, sans-serif; font-weight: 900; font-size: 22px; }
.trophy span { font-size: 12px; color: var(--tinta-2); }
/* ---- Aulas em Reels: feed vertical dentro do mesmo iPhone do hero ---- */
.reels { flex: 1 1 340px; min-width: 280px; display: flex; justify-content: center; }
/* a tela do aparelho vira o vídeo: preta, com a barra de status e o
   indicador de home por cima. O --tinta local deixa os ícones da barra
   brancos, como num vídeo em tela cheia */
.phone-reels .phone-screen { background: #101012; --tinta: #FFFBF4; }
.phone-reels .status, .phone-reels .home-ind { position: relative; z-index: 4; }
.phone-reels .home-ind { margin-top: auto; }
.reels-tela { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.reels-slides { position: absolute; inset: 0; }
/* Cada aula é um vídeo diferente, então cada uma tem seu próprio fundo:
   sem isso a passagem some, porque só o texto se mexeria. */
.reel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 9px; padding: 52px 74px 46px 24px;
  color: #FFFBF4;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, transparent 26%,
                                      transparent 48%, rgba(0,0,0,.62) 100%),
              var(--reel-fundo, #5E1C1C);
  /* a aula espera ACIMA da tela e desce quando entra: passar pra próxima é
     um deslize pra baixo. Sem transição no estado de espera, senão a que
     acabou de sair voltaria pro topo cruzando a tela na frente da atual. */
  transform: translateY(-100%);
  transition: none;
}
.reel.on   { transform: none; }
.reel.saiu { transform: translateY(100%); }
.reel.on, .reel.saiu { transition: transform .58s cubic-bezier(.22,.75,.3,1); }
.reel:nth-child(4n+1) { --reel-fundo: #5E1C1C; }
.reel:nth-child(4n+2) { --reel-fundo: #232D46; }
.reel:nth-child(4n+3) { --reel-fundo: #842929; }
.reel:nth-child(4n+4) { --reel-fundo: #24382C; }
.reel-materia {
  align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; background: rgba(255,251,244,.16); color: #FFFBF4;
  border: 1px solid rgba(255,251,244,.3); border-radius: 999px; padding: 5px 11px;
}
.reel-titulo { font-family: Nunito, sans-serif; font-weight: 900; font-size: 21px; line-height: 1.15; margin: 0; }
.reel-gancho { margin: 0; font-size: 14.5px; line-height: 1.5; color: #F0DCDA; }
.reel-gancho b { color: #FFFBF4; }
.reel-dur { font-size: 12px; color: #E0B7B4; font-variant-numeric: tabular-nums; }
/* coluna de ações, como no feed */
.reels-acoes {
  position: absolute; right: 12px; bottom: 42px; z-index: 3;
  display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.reels-acao {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 19px; color: #FFFBF4; line-height: 1;
}
.reels-acao small { font-size: 9.5px; color: rgba(255,251,244,.75); font-weight: 600; }
/* seta de deslizar: mostra pra que lado a próxima aula vem */
.reels-desliza {
  position: absolute; left: 50%; bottom: 14px; z-index: 3;
  width: 22px; height: 22px; margin-left: -11px;
  display: flex; align-items: center; justify-content: center;
  animation: desce 1.9s ease-in-out infinite;
}
.reels-desliza > i {
  width: 11px; height: 11px; display: block;
  border-right: 2px solid rgba(255, 251, 244, .8);
  border-bottom: 2px solid rgba(255, 251, 244, .8);
  transform: rotate(45deg) translate(-2px, -2px);
}
@keyframes desce {
  0%, 100% { transform: translateY(-3px); opacity: .55; }
  50%      { transform: translateY(3px);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .reel.on, .reel.saiu { transition: none; }
  .reels-desliza { animation: none; opacity: .8; }
}
@media (max-width: 720px) {
  /* a tela agora é a do aparelho (absoluta, inset 0): quem define largura
     é o .phone, não mais a .reels-tela */
  .reel { padding: 48px 66px 42px 20px; }
  .reel-titulo { font-size: 19px; }
}

/* ---- Matérias: chips clicáveis + resumo ---- */
/* seção de largura cheia: são 18 chips, e numa coluna estreita eles viravam
   uma parede de texto */
.materias-bloco { max-width: 880px; margin: 26px auto 0; }
.materias { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.materias-bloco .materias { justify-content: center; }
.materia {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: var(--superficie-2); border: 1px solid var(--borda);
  color: var(--tinta-2); border-radius: 999px; padding: 8px 14px;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.materia:hover { border-color: var(--marca-700); color: var(--marca-700); transform: translateY(-1px); }
.materia.on {
  background: var(--btn); border-color: var(--btn); color: var(--btn-tinta);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--btn), transparent 68%);
}
/* altura reservada: os resumos têm tamanhos diferentes e sem isso o bloco
   pula a cada troca */
.materia-resumo {
  margin-top: 14px; padding: 16px 18px; min-height: 136px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-left: 3px solid var(--marca); border-radius: 12px;
}
.materia-resumo strong {
  display: block; font-family: Nunito, sans-serif; font-weight: 800;
  font-size: 16px; margin-bottom: 5px; color: var(--marca-700);
}
.materia-resumo p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tinta-2); }
.materia-resumo.troca { animation: entraResumo .32s cubic-bezier(.2,.8,.3,1); }
@keyframes entraResumo {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .materia-resumo.troca { animation: none; }
  .materia:hover { transform: none; }
}

.leagues { display: flex; gap: 10px; flex-wrap: wrap; }
.league { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.league.on { background: var(--btn); border-color: var(--btn); color: var(--btn-tinta); font-weight: 800; }

/* número que não pode partir no meio ao quebrar linha (CNPJ, protocolo) */
.nao-quebra { white-space: nowrap; }

/* ---- Missão: a narrativa da marca, entre os selos e os recursos ---- */
.missao { max-width: 1160px; margin: 0 auto; padding: 46px 24px 6px; }
.missao-inner {
  max-width: 760px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.missao-frase {
  margin: 0; font-family: Nunito, sans-serif; font-weight: 900;
  font-size: clamp(26px, 3.4vw, 38px); line-height: 1.18; color: var(--tinta);
}
.missao-fio { margin: 0; font-size: 17px; line-height: 1.6; color: var(--tinta-2); max-width: 560px; }

/* ---- Frases da marca: alternam sozinhas antes do fechamento ---- */
.slogans { max-width: 1160px; margin: 0 auto; padding: 6px 24px 40px; }
.slogans-inner {
  max-width: 860px; margin: 0 auto; padding: 30px 22px;
  border-top: 1px dashed var(--borda); border-bottom: 1px dashed var(--borda);
}
/* todas as frases na MESMA célula do grid: o bloco passa a ter a altura da
   frase mais alta e para de pular a cada troca, sem altura chutada */
.slogans-palco { display: grid; }
.slogan {
  grid-area: 1 / 1; margin: 0; text-align: center;
  display: flex; align-items: center; justify-content: center;
  font-family: Nunito, sans-serif; font-weight: 900;
  font-size: clamp(19px, 2.4vw, 28px); line-height: 1.3; color: var(--marca-700);
  opacity: 0; transform: translateY(7px);
  transition: opacity .45s ease, transform .45s ease;
}
.slogan.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .slogan { transition: none; }
}

/* ---- Planos ---- */
.plans { padding: 72px 24px; display: flex; flex-direction: column; gap: 40px; }
.plans-grid { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; align-items: stretch; }
.plan { flex: 0 1 360px; min-width: 290px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 22px; padding: 32px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--sombra-carta); }
.plan h3 { font-family: Nunito, sans-serif; font-weight: 800; font-size: 22px; margin: 0; display: flex; align-items: center; gap: 10px; }
.price { display: flex; align-items: baseline; gap: 6px; }
.price b { font-family: Nunito, sans-serif; font-weight: 900; font-size: 42px; }
.price span { font-size: 14px; color: var(--tinta-2); }
.plan-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.plan-list li { display: flex; gap: 10px; font-size: 15px; }
.plan-list li::before { content: "✓"; color: var(--acerto); font-weight: 800; }
.plan.pro { flex: 0 1 380px; border: 2.5px solid var(--marca); position: relative; box-shadow: 0 18px 40px color-mix(in srgb, var(--marca), transparent 74%); }
.plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--solida); color: #FFFBF4; font-size: 12px; font-weight: 800; letter-spacing: .08em; border-radius: 999px; padding: 6px 16px; white-space: nowrap; }
.plan h3 .suits { font-size: 13px; color: var(--marca-700); }

/* ---- Depoimentos ---- */
.quotes-band { background: var(--trama-fundo) repeat, var(--superficie-2); background-size: 210px 210px, auto; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.quotes-inner { max-width: 1160px; margin: 0 auto; padding: 72px 24px; display: flex; flex-direction: column; gap: 36px; }
.quotes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 24px; }
.quote-card { margin: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--sombra-carta); }
.stars { color: #E6A934; font-size: 16px; letter-spacing: 2px; }
.quote-text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--tinta); }
.quote-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote-avatar { width: 40px; height: 40px; border-radius: 999px; color: #FFFBF4; display: inline-flex; align-items: center; justify-content: center; font-family: Nunito, sans-serif; font-weight: 800; font-size: 15px; flex: 0 0 auto; }
.quote-foot .who { display: flex; flex-direction: column; }
.quote-foot .who strong { font-size: 14px; }
.quote-foot .who span { font-size: 12.5px; color: var(--acerto); font-weight: 700; }

/* ---- FAQ ---- */
.faq { max-width: 800px; margin: 0 auto; padding: 80px 24px; display: flex; flex-direction: column; gap: 28px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 18px 22px; }
.faq-item > summary { cursor: pointer; list-style: none; font-family: Nunito, sans-serif; font-weight: 800; font-size: 16.5px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-plus { color: var(--marca-700); font-size: 20px; flex: 0 0 auto; transition: transform .2s ease; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-item p { margin: 12px 0 4px; font-size: 15px; line-height: 1.65; color: var(--tinta-2); }

/* ---- CTA final ---- */
.final-cta { max-width: 1160px; margin: 0 auto; padding: 16px 24px 88px; }
.cta-box {
  background: var(--trama-clara) repeat, var(--solida);
  background-size: 210px 210px, auto;
  border-radius: 26px; padding: 56px 40px; display: flex; gap: 32px;
  align-items: center; flex-wrap: wrap; position: relative; overflow: hidden;
}
.cta-wm { position: absolute; color: rgba(255,251,244,0.07); font-family: Georgia, serif; pointer-events: none; }
.cta-wm.a { top: -30px; right: 8%; font-size: 150px; transform: rotate(14deg); }
.cta-wm.b { bottom: -46px; left: 38%; font-size: 130px; color: rgba(255,251,244,0.06); transform: rotate(-10deg); }
.cta-mascot { width: 215px; flex: 0 0 auto; align-self: center; position: relative; }
.cta-copy { flex: 1 1 380px; display: flex; flex-direction: column; gap: 18px; min-width: 280px; position: relative; }
.cta-copy h2 { font-family: Nunito, sans-serif; font-weight: 900; font-size: clamp(30px, 3.8vw, 44px); margin: 0; line-height: 1.12; color: #FFFBF4; }
.cta-copy p { margin: 0; font-size: 17px; line-height: 1.6; color: #EBD8CE; max-width: 480px; }
.cta-copy .fine { font-size: 13px; color: #EBD8CE; }

/* ---- Rodapé ---- */
.footer { border-top: 1px solid var(--borda); background: var(--trama-fundo) repeat, var(--superficie); background-size: 210px 210px, auto; }
.footer-inner { max-width: 1160px; margin: 0 auto; padding: 36px 24px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.footer-brand { display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
/* Texto do rodapé justificado. A hifenização entra junto: numa coluna de
   340px, justificar sem hífen abre rios de espaço no meio das linhas.
   O <html> já declara lang="pt-BR", que é o que o navegador usa pra hifenizar. */
.footer-brand .tag { font-size: 13.5px; color: var(--tinta-2); text-align: justify; hyphens: auto; }
.footer-brand .legal { font-size: 12px; color: var(--tinta-2); line-height: 1.5; text-align: justify; hyphens: auto; }
.footer-copy { text-align: justify; }
.footer-logo { width: 42px; height: auto; flex: 0 0 auto; }
.footer-cols { display: flex; gap: 40px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col strong { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.footer-col a { font-size: 14px; }
.footer-copy { max-width: 1160px; margin: 0 auto; padding: 0 24px 28px; font-size: 12px; color: var(--tinta-2); }

/* ---- Mascotes (arte enviada: still webp + loop webp) ---- */
.mascote-pic { display: block; }
.mascote-img { width: 100%; height: auto; display: block; }
.hero-mascot .mascote-img,
.game-mascot .mascote-img,
.cta-mascot .mascote-img { filter: drop-shadow(0 18px 22px rgba(58, 38, 10, .22)); }
[data-tema="madrugada"] .hero-mascot .mascote-img,
[data-tema="madrugada"] .game-mascot .mascote-img,
[data-tema="madrugada"] .cta-mascot .mascote-img { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .5)); }
/* hero: poster embaixo, vídeo com alpha por cima quando estiver pronto */
.hero-mascot-wrap { position: relative; display: block; }
.hero-mascot-wrap .mascote-img { position: relative; z-index: 0; }
.mascote-video {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  object-fit: contain; opacity: 0; transition: opacity .45s ease;
  pointer-events: none; background: transparent;
}
.mascote-video.pronto { opacity: 1; }
.hero-mascot-wrap:has(.mascote-video.pronto) .mascote-img { opacity: 0; }

/* avatar do tutor: dá zoom na cabeça. A arte é retrato, então `cover` sozinho
   quase não corta e o mascote apareceria inteiro e minúsculo. O transform-origin
   acompanha o object-position pra o zoom cair no rosto. */
.avatar-ring .mascote-pic { width: 100%; height: 100%; overflow: hidden; border-radius: inherit; }
.avatar-ring .mascote-img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 22%; transform: scale(2.5); transform-origin: 50% 22%;
}

/* ---- Demo do app rodando dentro do celular ---- */
.phone-body { position: relative; }
.q-opt { transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease; }
.q-opt.mira { border-color: var(--marca); background: color-mix(in srgb, var(--marca), transparent 90%); transform: translateX(2px); }
.q-card { transition: opacity .32s ease, transform .32s ease; }
.demo-troca .q-card { opacity: 0; transform: translateY(-8px) rotate(-1.5deg); }
.q-meta .xp { font-variant-numeric: tabular-nums; }
.xp-pop {
  position: absolute; right: 16px; bottom: 44px; z-index: 4; pointer-events: none;
  font-family: Nunito, sans-serif; font-weight: 900; font-size: 15px; color: var(--acerto);
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .5s cubic-bezier(.2,.8,.3,1);
}
.xp-pop.sobe { opacity: 1; transform: translateY(-16px); }
.q-foot .next { transition: transform .25s ease, box-shadow .25s ease; }
.q-foot .next.pulsa { transform: scale(1.06); box-shadow: 0 6px 16px color-mix(in srgb, var(--btn), transparent 55%); }
.progress > i { transition: width .7s cubic-bezier(.3,.8,.3,1); }

/* ---- Animação de entrada (revela ao rolar) ---- */
.rise { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1); }
.rise.vis { opacity: 1; transform: none; }
.rise[data-d="1"] { transition-delay: .08s; }
.rise[data-d="2"] { transition-delay: .16s; }
.rise[data-d="3"] { transition-delay: .24s; }
.rise[data-d="4"] { transition-delay: .32s; }
.rise[data-d="5"] { transition-delay: .40s; }

/* barra de progresso do mockup preenche ao aparecer */
.progress > i { width: 0; transition: width 1.4s cubic-bezier(.3,.8,.3,1) .3s; }
.progress.vis > i { width: 70%; }

/* barra de navegação: a faixa ocupa a largura toda, o conteúdo fica centrado.
   Ao rolar ela sai de cena; quem traz de volta é a carta do canto. */
.nav-bar {
  position: sticky; top: 0; z-index: 30; background: transparent;
  transition: background .25s ease, box-shadow .25s ease, transform .35s cubic-bezier(.3,.7,.3,1);
}
.nav-bar.stuck { background: var(--fundo); box-shadow: 0 4px 18px color-mix(in srgb, var(--solida), transparent 86%); }
.nav-bar.escondido { transform: translateY(-100%); box-shadow: none; }
@supports (backdrop-filter: blur(1px)) {
  .nav-bar.stuck { background: color-mix(in srgb, var(--fundo), transparent 3%); backdrop-filter: saturate(1.5) blur(14px); }
}

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .progress > i { width: 70%; transition: none; }
}

/* ---- Bloco "em breve nas plataformas" (o app ainda não lançou) ---- */
.lojas-bloco { align-items: center; text-align: center; gap: 28px; }
.lojas-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.store-badge.grande { padding: 14px 26px; border-radius: 14px; }
.store-badge.grande small { font-size: 11px; }
.store-badge.grande b { font-size: 17px; }
.eyebrow .ponto { margin-right: 8px; }

/* selo de "em desenvolvimento" no hero */
.ponto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--marca); margin-right: 8px;
  display: inline-block; flex: 0 0 auto; animation: pulsando 2.2s ease-in-out infinite;
}
@keyframes pulsando { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ponto { animation: none; } }
.chip { display: inline-flex; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; justify-content: center; }

/* lojas ainda não disponíveis: informa, não convida a clicar */
.store-badge.breve { cursor: default; opacity: .78; }
.store-badge.breve:hover { filter: none; }

/* ---- Lista VIP (oferta de desconto, estilo cupom) ---- */
.lista { max-width: 1160px; margin: 0 auto; padding: 16px 24px 40px; }
.lista-card {
  position: relative; max-width: 680px; margin: 0 auto; text-align: center;
  background: var(--superficie); border: 2px dashed var(--marca); border-radius: 22px;
  padding: 40px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: var(--sombra-carta);
}
.lista-badge {
  display: inline-flex; align-items: center; gap: 6px; background: var(--btn); color: var(--btn-tinta);
  font-family: Nunito, sans-serif; font-weight: 900; font-size: 15px; padding: 8px 16px;
  border-radius: 999px; box-shadow: 0 8px 20px color-mix(in srgb, var(--btn), transparent 66%);
}
.lista-card h2 { margin: 4px 0 0; }
.lista-card .lead { max-width: 520px; }
/* o que a pessoa ganha ao entrar, em vez de só um parágrafo */
.lista-ganhos {
  margin: 2px 0 4px; padding: 0; list-style: none; text-align: left;
  display: flex; flex-direction: column; gap: 9px; max-width: 420px;
}
.lista-ganhos li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--tinta); }
.lista-ganhos li::before {
  content: "✓"; color: var(--acerto); font-weight: 800; flex: 0 0 auto;
}
.lista-rotulo {
  display: block; text-align: left; font-size: 13px; font-weight: 700;
  color: var(--tinta-2); margin-bottom: 6px;
}
.lista-linha { display: flex; gap: 10px; flex-wrap: wrap; }
.lista-form { width: 100%; max-width: 480px; margin-top: 6px; }
/* Campo em forma de bolsa de canguru: abertura reta em cima, fundo bem
   arredondado e uma sombra interna que dá profundidade de bolso.
   O flex-basis fica em auto: com 200px, ao virar coluna no mobile ele
   passava a valer como ALTURA e o campo virava um retângulo gigante. */
/* base 0 e não auto: com basis auto o Chrome resolve a largura desse wrapper
   pelo max-content do input e o botão quebrava pra linha de baixo */
.campo-email { position: relative; flex: 1 1 0; min-width: 0; display: flex; }
/* a mochila fica fixa dentro do campo, antes do placeholder, e continua
   visível depois que a pessoa começa a digitar */
.campo-emoji {
  position: absolute; left: 17px; top: 0; bottom: 2px; z-index: 1;
  display: flex; align-items: center; font-size: 17px; line-height: 1;
  pointer-events: none;
}
/* sem width:100% aqui: o input é filho flex do .campo-email e cresce dentro
   dele. Com a porcentagem, a base do wrapper inflava e o botão quebrava
   pra linha de baixo. */
.lista-linha input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 15px;
  padding: 15px 20px 17px 46px;
  border: 1.5px solid var(--borda);
  border-top: 2px solid color-mix(in srgb, var(--marca), transparent 40%);
  border-radius: 14px 14px 46px 46px / 14px 14px 32px 32px;
  background: var(--fundo); color: var(--tinta);
  box-shadow: inset 0 7px 12px -8px rgba(0, 0, 0, .22);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lista-linha input::placeholder { color: var(--tinta-2); }
.lista-linha input:focus-visible {
  outline: 3px solid var(--marca-700); outline-offset: 2px;
  border-color: var(--marca-700);
  box-shadow: inset 0 7px 14px -8px rgba(0, 0, 0, .28);
}
.lista-linha input[aria-invalid="true"] { border-color: var(--erro); background: var(--erro-suave); }
.lista-linha .btn { flex: 0 0 auto; }
.lista-ok { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.lista-ok strong { font-family: Nunito, sans-serif; font-weight: 900; font-size: 20px; color: var(--acerto); }
.lista-ok p { margin: 0; font-size: 15px; max-width: 480px; }
.lista-cupom {
  display: inline-block; font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: 14px;
  background: var(--superficie-2); border: 1px dashed var(--marca-700); color: var(--marca-700);
  padding: 3px 10px; border-radius: 8px; letter-spacing: .06em;
}

/* ---- Responsivo ---- */
/* Fora do layout desktop de 2 colunas o hero empilha; o leque de cartas
   (decorativo, atrás do celular) some pra não brigar com o mockup. */
@media (max-width: 960px) {
  /* precisa repetir as classes: .float.streak e .float.win declaram display
     no estado normal e ganhariam de um .float sozinho por especificidade */
  .float, .float.quote, .float.streak, .float.win { display: none; }
}
@media (max-width: 860px) {
  .hero { padding: 24px 20px 48px; gap: 32px; }
  .section, .plans, .features { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   MOBILE
   A nav vira uma linha só, o hero vira uma composição em pé com
   o mascote espiando ao lado do celular, os botões ocupam a
   largura toda e uma barra fixa embaixo segura a conversão.
   ============================================================ */
@media (max-width: 720px) {
  /* nada de min-width forçando overflow em telas estreitas */
  .hero-copy, .split-copy, .chat, .game-art, .hero-art { min-width: 0; }
  .hero-art { min-height: 0; }

  /* ---- nav numa linha só: marca, tema, ação ---- */
  .nav { flex-wrap: nowrap; align-items: center; gap: 10px; padding: 10px 16px; }
  .nav-link { display: none; }              /* as seções já aparecem no corpo */
  .nav-links { gap: 8px; margin-left: auto; flex-wrap: nowrap; }
  .brand-badge { width: 34px; height: 34px; font-size: 17px; }
  .brand-name { font-size: 16.5px; letter-spacing: -0.01em; white-space: nowrap; }
  .pill .rot-longo { display: none; }
  .pill .rot-curto { display: inline; }
  .theme-toggle { width: 40px; height: 40px; font-size: 15px; }
  .pill { padding: 10px 15px; font-size: 13px; box-shadow: none; }
  /* sólido: blur pode falhar e deixar o conteúdo passar por trás */
  .nav-bar.stuck { background: var(--fundo); backdrop-filter: none; }

  /* ---- hero ---- */
  .hero { padding: 14px 20px 28px; gap: 22px; }
  .chip { font-size: 12px; padding: 6px 12px; line-height: 1.35; }
  .h1 { font-size: clamp(33px, 9.4vw, 44px); line-height: 1.05; }
  .hero-lead { font-size: 16.5px; }
  .cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .cta-row .btn, .cta-row .btn-ghost, .cta-row .btn-invert { width: 100%; }
  .fineprint { text-align: center; }
  .store-row { gap: 10px; }
  .store-row .store-badge { flex: 1 1 0; justify-content: center; padding: 10px 8px; }

  /* composição: celular ao centro com um brilho da marca atrás,
     e o mascote espiando no canto, como no desktop */
  .hero-art { position: relative; justify-content: center; padding: 8px 0 0; }
  .hero-art::before {
    content: ""; position: absolute; z-index: 0; inset: auto;
    width: 78vw; height: 78vw; left: 50%; top: 46%; transform: translate(-50%, -50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--marca), transparent 78%) 0%, transparent 68%);
    pointer-events: none;
  }
  /* o aparelho encolhe: moldura e raios acompanham pra não engordar a borda */
  .phone { width: min(232px, 66vw); border-radius: 46px; }
  .phone-bezel { border-radius: 43px; padding: 8px; }
  .phone-screen { border-radius: 35px; }
  .notch { width: 68px; height: 20px; top: 6px; }
  .notch::after { width: 8px; height: 8px; right: 5px; }
  .hero-mascot {
    position: absolute; right: -10px; bottom: 0; z-index: 3;
    width: min(148px, 41vw); margin: 0;
  }

  /* ---- ritmo das seções ---- */
  .section { padding-top: 44px; padding-bottom: 44px; }
  .features { padding-top: 48px; }
  .h2 { font-size: clamp(26px, 7.4vw, 34px); }
  .section-head { gap: 10px; }
  .split { gap: 28px; }

  /* ---- cartas ---- */
  .features-grid { gap: 18px; }
  .carta-frente { min-height: 300px; padding: 26px 18px; }

  /* ---- faixa ---- */
  .band-inner { padding: 26px 20px; gap: 22px; }
  .band-stat { min-width: 0; flex: 1 1 44%; }
  .band-stat strong { font-size: 22px; }
  .band-stat span { font-size: 12.5px; }

  /* ---- gamificação e tutor ---- */
  .game-mascot { width: min(260px, 66%); }
  .badge-row { gap: 10px; }
  .trophy { padding: 10px 14px; }
  .trophy strong { font-size: 19px; }
  .chat-body { padding: 16px; min-height: 0; }

  /* ---- whitelist ---- */
  .lista { padding: 8px 20px 32px; }
  .lista-card { padding: 30px 20px; border-radius: 20px; }
  .lista-ganhos { width: 100%; }
  .lista-ganhos li { font-size: 14.5px; }
  .lista-linha { flex-direction: column; }
  /* em coluna o flex-basis passa a valer como ALTURA: zera a participação
     dele aqui pra o campo nunca virar um retângulo gigante */
  .lista-linha .campo-email, .lista-linha .btn { width: 100%; flex: 0 0 auto; }

  /* ---- lojas e CTA final ---- */
  .lojas-row { width: 100%; gap: 10px; }
  .lojas-row .store-badge { flex: 1 1 0; justify-content: center; padding: 12px 8px; }
  .store-badge.grande b { font-size: 15px; }
  .cta-box { padding: 34px 22px; text-align: center; justify-content: center; }
  .cta-mascot { width: min(190px, 52vw); }
  .cta-copy { align-items: center; }
  .cta-copy p { text-align: center; }

  /* ---- faq e rodapé ---- */
  .faq { padding: 44px 20px; }
  .faq-item { padding: 16px 18px; }
  .faq-item > summary { font-size: 15.5px; }
  .footer-inner { gap: 28px; padding: 30px 20px; }
  .footer-cols { gap: 28px; width: 100%; }

  /* espaço pra barra fixa não cobrir o rodapé */
  body { padding-bottom: 76px; }

  /* a carta sobe pra não bater na barra fixa de conversão */
  .carta-topo { right: 14px; bottom: 84px; width: 50px; height: 70px; }
  .carta-topo::after { font-size: 21px; }
  .carta-topo-dica { display: none; }
}

/* ---- Aviso de cookies (LGPD) ----
   Entra por baixo, sem cobrir a tela. "Recusar" tem o mesmo peso visual que
   "Aceitar": consentimento precisa ser livre. */
.cookies {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 18px;
  padding: 18px 22px; box-shadow: 0 18px 44px color-mix(in srgb, var(--solida), transparent 74%);
  opacity: 0; transform: translateY(18px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.3,1);
}
.cookies.on { opacity: 1; transform: none; }
.cookies-texto { flex: 1 1 320px; min-width: 0; }
.cookies-texto strong { display: block; font-family: Nunito, sans-serif; font-weight: 800; font-size: 15.5px; margin-bottom: 3px; }
.cookies-texto p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tinta-2); }
.cookies-acoes { display: flex; gap: 10px; flex: 0 0 auto; }
.cookies-acoes .btn,
.cookies-acoes .btn-ghost { padding: 11px 22px; font-size: 14.5px; }
@media (max-width: 720px) {
  .cookies { left: 10px; right: 10px; bottom: 10px; padding: 16px 18px; gap: 14px; }
  .cookies-acoes { width: 100%; }
  .cookies-acoes .btn, .cookies-acoes .btn-ghost { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) { .cookies { transition: opacity .2s ease; transform: none; } }

/* ---- Carta virada no canto: volta ao topo ----
   Entra quando o header sai. Ao passar o mouse ela se endireita e levanta,
   como uma carta que você vai virar. */
.carta-topo {
  position: fixed; right: 22px; bottom: 22px; z-index: 45;
  width: 62px; height: 86px; padding: 0; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--solida), #fff 12%);
  border-radius: 10px; background: var(--solida);
  display: grid; place-items: center;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--solida), transparent 62%);
  opacity: 0; transform: translateY(18px) rotate(-8deg) scale(.94);
  pointer-events: none;
  transition: opacity .3s ease, transform .38s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease;
}
.carta-topo.on { opacity: 1; transform: rotate(-6deg); pointer-events: auto; }
.carta-topo.on:hover,
.carta-topo.on:focus-visible { transform: rotate(0deg) translateY(-5px); box-shadow: 0 16px 32px color-mix(in srgb, var(--solida), transparent 50%); }
/* o verso, com o mesmo tecido das cartas de recurso */
.carta-topo-face {
  position: absolute; inset: 5px; border-radius: 6px;
  border: 1.5px solid rgba(255, 251, 244, .3);
  background:
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,251,244,.09) 6px 12px),
    repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255,251,244,.09) 6px 12px);
}
.carta-topo::after {
  content: "♣"; font-family: Georgia, serif; font-size: 26px; line-height: 1;
  color: rgba(255, 251, 244, .55); position: relative; z-index: 1;
  transition: transform .3s ease;
}
.carta-topo.on:hover::after { transform: translateY(-2px) scale(1.08); }
/* rótulo discreto que aparece no hover */
.carta-topo-dica {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  font-size: 12px; font-weight: 700; color: var(--tinta-2); white-space: nowrap;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.carta-topo.on:hover .carta-topo-dica,
.carta-topo.on:focus-visible .carta-topo-dica { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .carta-topo { transition: opacity .2s ease; }
  .carta-topo.on { transform: rotate(-6deg); }
}

/* ---- barra fixa de conversão (só mobile) ---- */
.barra-fixa { display: none; }
@media (max-width: 720px) {
  .barra-fixa {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--fundo), transparent 4%);
    border-top: 1px solid var(--borda);
    box-shadow: 0 -8px 24px color-mix(in srgb, var(--solida), transparent 88%);
    transform: translateY(110%); transition: transform .35s cubic-bezier(.2,.8,.3,1);
  }
  .barra-fixa.on { transform: none; }
  .barra-fixa .texto { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .barra-fixa .texto b { font-family: Nunito, sans-serif; font-size: 14px; font-weight: 900; }
  .barra-fixa .texto small { font-size: 11.5px; color: var(--tinta-2); }
  .barra-fixa .btn { flex: 0 0 auto; padding: 13px 20px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .barra-fixa { transition: none; }
}

/* telas bem estreitas */
@media (max-width: 380px) {
  .brand-name { font-size: 15px; }
  .pill { padding: 9px 12px; font-size: 12.5px; }
  .h1 { font-size: 31px; }
  .band-stat { flex: 1 1 100%; }
}