/* App (PWA) · IDV da LP v10 (sálvia, creme, preto, pêssego; Anton + DM Sans + Caveat), DECISOES 10/10.
   Componentes no vocabulário da skill oficial do shadcn (.claude/skills/shadcn), portados para CSS puro: gtm/app-mvp.md, seções 5.1 a 5.3.
   Regras: cor só por papel (nada de hex solto nas telas), espaçamento por gap, uma escala de camadas (--z-*), estados de status por badge/token.
   Microinterações copiadas do CSS do kinetics (gtm/referencias-lp/kinetics): Squish Button, Toggle Pills, Toast Overshoot, Elastic Progress,
   Stagger Entrance, Success Check, Error Shake, Shimmer Skeleton. Página de referência viva: /app/ds.html */

/* ---------- 1. tokens ---------- */
:root{
  /* paleta (os mesmos valores da LP v10, com o contraste de 4,5:1 das regras de 10/10 no fim de lp-v10.css) */
  --papel:#F3EFE6; --papel-2:#E8E5DA; --cartao:#FBF9F4;
  --tinta:#1B1B1B; --tinta-2:#55554B; --suave:#66645B;
  --marca:#F2B394; --marca-suave:#F7E3D6; --lilas:#DCE6D2; --coral:#8FAE8B; --menta:#C9DBC4; --salvia-e:#4A6A47;
  --certo:#4F8A55; --errado:#C9543E;

  /* papéis (shadcn) */
  --background:var(--papel); --foreground:var(--tinta);
  --card:var(--cartao); --card-foreground:var(--tinta);
  --primary:var(--tinta); --primary-foreground:var(--papel);
  --secondary:var(--lilas); --secondary-foreground:var(--salvia-e);
  --accent:var(--marca); --accent-foreground:var(--tinta);
  --muted:var(--papel-2); --muted-foreground:var(--suave);
  /* acerto e erro: a cor cheia (#4F8A55, #C9543E) dá 3,6:1 no creme; em texto vai a versão escura (5,9:1) */
  --success:var(--certo); --success-text:#3B6B40; --success-soft:#E3EEDF;
  --destructive:var(--errado); --destructive-text:#A3412D; --destructive-soft:#F6E0D9;
  --border:rgba(27,27,27,.13); --border-forte:rgba(27,27,27,.28); --ring:var(--tinta);
  --chart-1:var(--salvia-e); --chart-2:var(--coral); --chart-3:var(--menta); --chart-4:var(--marca);
  /* superfície escura (raio-x, agenda, Passe, dica, toast) e texto sobre ela: no modo noturno continuam escuras, não viram bloco claro */
  --escuro:var(--tinta); --sobre-escuro:var(--papel); --tinta-fixa:#1B1B1B; --salvia-texto:var(--salvia-e); --salvia-borda:var(--salvia-e);
  --vidro:rgba(251,249,244,.96); --vidro-papel:rgba(243,239,230,.92);

  /* tipografia */
  --display:"Anton","Impact",sans-serif; --texto:"DM Sans",system-ui,-apple-system,sans-serif; --mao:"Caveat",cursive;
  --serif-prova:var(--texto); /* o caderno usa a mesma DM Sans da LP (revisor-visual: Georgia era uma 4ª fonte) */

  /* forma */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --sombra:0 1px 2px rgba(27,27,27,.05),0 10px 30px -18px rgba(27,27,27,.35);
  --sombra-alta:0 -10px 40px -12px rgba(27,27,27,.35);
  --g:16px; --alvo:48px; --barra-abas:68px;

  /* camadas: uma escala só */
  --z-topo:10; --z-barra:20; --z-sobre:50; --z-toast:60;

  /* movimento (kinetics) */
  --mola:cubic-bezier(.34,1.56,.64,1); --sai:cubic-bezier(.16,1,.3,1); --pulo:cubic-bezier(.18,1.25,.4,1);
}

/* ---------- 2. base ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
body{margin:0;background:var(--background);color:var(--foreground);font:400 16px/1.5 var(--texto);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input,select,textarea{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
p{margin:0}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:var(--r-sm)}
h1,h2,h3,h4{margin:0;font-weight:700}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* tipos */
.disp,h1.disp{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1;text-wrap:balance}
h1{font:400 clamp(38px,10.5vw,52px)/1.08 var(--display);text-transform:uppercase;letter-spacing:.005em;text-wrap:balance}
h2,h3,.card-title,.drawer-title{text-wrap:balance}
h2{font-size:20px;line-height:1.25;letter-spacing:-.01em}
h3{font-size:17px;line-height:1.3;letter-spacing:-.01em}
.lead{font-size:17px;line-height:1.5;color:var(--tinta-2)}
.suave{color:var(--muted-foreground)}
.pequeno{font-size:14px;line-height:1.45}
.micro{font-size:12.5px;line-height:1.35}
.mao{font:400 24px/1.05 var(--mao);color:var(--tinta)}
mark{background:linear-gradient(transparent 12%,var(--marca) 12%,var(--marca) 88%,transparent 88%);color:inherit;padding:0 .1em}
.num{font-variant-numeric:tabular-nums}

/* ---------- 3. moldura ---------- */
.topo{position:sticky;top:0;z-index:var(--z-topo);display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:60px;padding:0 var(--g);background:var(--vidro-papel);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border)}
.marca{display:inline-flex;align-items:center;min-height:44px;gap:.06em;font:400 24px/1 var(--display);text-transform:uppercase;text-decoration:none;letter-spacing:.01em}
.marca .bolinha{width:.72em;height:.72em;border-radius:50%;background:var(--tinta);box-shadow:0 0 0 .09em var(--papel),0 0 0 .17em var(--tinta);margin-left:.08em}
.wrap{max-width:600px;margin:0 auto;padding:20px var(--g) calc(40px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}
.com-abas .wrap{padding-bottom:calc(var(--barra-abas) + 32px + env(safe-area-inset-bottom))}
.pilha{display:flex;flex-direction:column;gap:12px}
.pilha-8{display:flex;flex-direction:column;gap:8px}
.linha{display:flex;gap:10px;align-items:center}
.linha-btn{display:flex;flex-wrap:wrap;gap:10px}
.linha-btn>*{flex:1}
.cab{display:flex;flex-direction:column;gap:8px}
.secao-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:8px}
.secao-t h2{font:400 26px/1 var(--display);text-transform:uppercase}
.rodape{font-size:12.5px;color:var(--muted-foreground);text-align:center;margin-top:16px}

/* ---------- 4. botão (Button: default, secondary, outline, ghost, link, destructive, accent) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--alvo);padding:0 22px;border-radius:var(--r-pill);
  font:700 16px/1.15 var(--texto);text-decoration:none;text-align:center;border:2px solid var(--primary);background:var(--primary);color:var(--primary-foreground);
  width:100%;white-space:nowrap;transition:transform .5s var(--mola),background .2s,opacity .2s}
.btn:active{transform:scale(.96);transition:transform .08s ease-out}
.btn[data-v="outline"],.btn.claro{background:transparent;color:var(--foreground)}
.btn[data-v="secondary"]{background:var(--secondary);border-color:var(--secondary);color:var(--foreground)}
.btn[data-v="accent"],.btn.ouro{background:var(--accent);border-color:var(--tinta);color:var(--accent-foreground)}
.btn[data-v="ghost"]{background:transparent;border-color:transparent;color:var(--foreground)}
.btn[data-v="destructive"]{background:transparent;border-color:var(--destructive);color:var(--destructive-text)}
.btn[data-v="link"],button.link{display:inline;min-height:0;padding:0;border:0;background:none;width:auto;color:var(--tinta-2);text-decoration:underline;text-underline-offset:3px;font-weight:600;font-size:inherit}
.btn[data-size="sm"],.btn.pequeno{min-height:40px;padding:0 16px;font-size:14px;width:auto}
.btn[data-size="lg"]{min-height:56px;font-size:17px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn svg{width:20px;height:20px;flex:0 0 20px}
.btn .bol{width:20px;height:20px;border-radius:50%;background:var(--accent);box-shadow:inset 0 0 0 2px var(--tinta);flex:0 0 20px}
.btn[data-v="accent"] .bol,.btn.ouro .bol{background:var(--tinta);box-shadow:none}
.spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:gira .7s linear infinite;flex:0 0 18px}
@keyframes gira{to{transform:rotate(360deg)}}
.icone-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--alvo);height:var(--alvo);border-radius:var(--r-pill);font-size:24px;line-height:1;color:var(--tinta-2);flex:0 0 var(--alvo)}
.icone-btn:active{background:var(--muted)}

/* ---------- 5. card (Card > Header [Title, Description] / Content / Footer) ---------- */
.card,.cartao{background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sombra);
  padding:20px;display:flex;flex-direction:column;gap:14px}
.card-header{display:flex;flex-direction:column;gap:4px}
.card-title{font-size:18px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.card-desc{font-size:14.5px;line-height:1.45;color:var(--muted-foreground)}
.card-content{display:flex;flex-direction:column;gap:10px}
.card-footer{display:flex;flex-direction:column;gap:8px}
.card[data-v="escuro"]{background:var(--escuro);color:var(--sobre-escuro);border-color:var(--escuro)}
.card[data-v="escuro"] .card-desc{color:rgba(243,239,230,.75)}
.card[data-v="salvia"]{background:var(--secondary);border-color:transparent;box-shadow:none}
.card[data-v="pessego"]{background:var(--marca-suave);border-color:transparent;box-shadow:none}
.card[data-v="destaque"],.destaque-ouro{border:2px solid var(--tinta)}
.card[data-v="plano"]{background:transparent;box-shadow:none}

/* ---------- 6. badge (default, secondary, outline, success, destructive, accent) ---------- */
.badge,.chip{display:inline-flex;align-items:center;gap:6px;width:fit-content;font:700 12.5px/1 var(--texto);padding:6px 10px;border-radius:var(--r-pill);
  background:var(--primary);color:var(--primary-foreground);white-space:nowrap}
.badge[data-v="secondary"],.chip.verde{background:var(--secondary);color:var(--secondary-foreground)}
.badge[data-v="outline"],.chip.cinza{background:transparent;color:var(--tinta-2);box-shadow:inset 0 0 0 1px var(--border-forte)}
.badge[data-v="success"]{background:var(--success-soft);color:var(--success-text)}
.badge[data-v="destructive"]{background:var(--destructive-soft);color:var(--destructive-text)}
.badge[data-v="accent"],.chip{background:var(--accent);color:var(--accent-foreground)}
.badge[data-v="muted"]{background:var(--muted);color:var(--tinta-2)}
.etiqueta{display:block;width:fit-content;font:700 13px/1 var(--texto);padding:8px 12px;border-radius:6px;background:var(--lilas);color:var(--tinta);transform:rotate(-3deg)}
.etiqueta[data-v="salvia"]{background:var(--lilas)}

/* ---------- 7. alert (Alert > Title / Description) ---------- */
.alert{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;padding:14px 16px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--border)}
.alert>.ic{grid-row:span 2;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--texto);background:var(--tinta);color:var(--papel)}
.alert-title{font-weight:700;font-size:15px;line-height:1.35}
.alert-desc{font-size:14px;line-height:1.45;color:var(--tinta-2);grid-column:2}
.alert-desc a{font-weight:700}
.alert[data-v="success"]{background:var(--success-soft);border-color:transparent}
.alert[data-v="success"]>.ic{background:var(--success)}
.alert[data-v="destructive"]{background:var(--destructive-soft);border-color:transparent}
.alert[data-v="destructive"]>.ic{background:var(--destructive)}
.alert[data-v="accent"]{background:var(--marca-suave);border-color:transparent}

/* ---------- 8. empty (Empty > Media / Title / Description / Content) ---------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:32px 20px;border:1.5px dashed var(--border-forte);border-radius:var(--r-xl)}
.empty-media{width:52px;height:52px;border-radius:50%;background:var(--muted);display:flex;align-items:center;justify-content:center;font:400 26px/1 var(--display)}
.empty-title{font-weight:700;font-size:17px}
.empty-desc{font-size:14.5px;color:var(--muted-foreground);max-width:32ch}
.empty .btn{width:auto}

/* ---------- 9. skeleton e separator ---------- */
.skeleton{border-radius:var(--r-md);background:linear-gradient(90deg,var(--muted) 0%,var(--card) 20%,var(--muted) 40%);background-size:280% 100%;animation:shimmer 1.5s linear infinite;min-height:14px}
@keyframes shimmer{0%{background-position:140% 0}100%{background-position:-140% 0}}
.sep{height:1px;background:var(--border);border:0;margin:0;width:100%}
.sep[data-o="v"]{width:1px;height:auto;align-self:stretch}

/* ---------- 10. toggle group (2 a 7 opções; single = radiogroup, multiple = aria-pressed) ---------- */
.toggle-group{display:flex;flex-direction:column;gap:10px}
.toggle-group[data-cols="2"]{display:grid;grid-template-columns:1fr 1fr}
.toggle{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:14px 16px;text-align:left;
  background:var(--card);border:1.5px solid var(--border-forte);border-radius:var(--r-lg);font-weight:600;font-size:16px;line-height:1.3;
  transition:transform .5s var(--mola),background .25s ease,border-color .25s ease}
.toggle:active{transform:scale(.98);transition:transform .08s ease-out}
.toggle .bola{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:2px solid var(--tinta);display:flex;align-items:center;justify-content:center;transition:background .2s}
.toggle[data-multi] .bola{border-radius:6px}
.toggle[aria-checked="true"],.toggle[aria-pressed="true"]{background:var(--secondary);border-color:var(--tinta);transform:scale(1.015)}
.toggle[aria-checked="true"] .bola,.toggle[aria-pressed="true"] .bola{background:var(--tinta)}
.toggle[aria-checked="true"] .bola::after,.toggle[aria-pressed="true"] .bola::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--papel)}
.toggle[data-multi][aria-pressed="true"] .bola::after{width:10px;height:6px;border-radius:0;background:none;border:2.5px solid var(--papel);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.toggle-group[data-cols="2"] .toggle{min-height:54px;padding:12px;font-size:14.5px}
.toggle-group[data-cols="2"] .toggle .bola{display:none}
/* filtros e segmentos (variante compacta, em linha) */
.segmentos{display:flex;gap:8px;flex-wrap:wrap}
.seg{min-height:40px;padding:0 14px;border-radius:var(--r-pill);border:1.5px solid var(--border-forte);font-weight:700;font-size:14px;background:var(--card);transition:transform .5s var(--mola),background .2s}
.seg[aria-pressed="true"],.seg[aria-checked="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--papel);transform:scale(1.04)}
.seg:active{transform:scale(.95);transition:transform .08s ease-out}

/* ---------- 11. drawer (painel de baixo; sempre com título) e alert dialog ---------- */
.drawer,.folha{position:fixed;inset:0;z-index:var(--z-sobre);display:flex;align-items:flex-end;justify-content:center;background:rgba(27,27,27,.5);animation:aparece .2s ease both}
.drawer-c,.folha .painel{position:relative;background:var(--card);width:100%;max-width:600px;max-height:88dvh;overflow:auto;overscroll-behavior:contain;
  border-radius:28px 28px 0 0;padding:10px 20px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;box-shadow:var(--sombra-alta);animation:sobe .45s var(--sai) both}
.drawer-c::before,.folha .painel::before{content:"";align-self:center;width:44px;height:5px;border-radius:9px;background:var(--border-forte);flex:0 0 5px;margin-bottom:4px}
.drawer-title,.folha .painel>h3{font-size:20px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.drawer-desc{font-size:15px;color:var(--tinta-2)}
.drawer-footer,.folha .painel>.linha-btn{position:sticky;bottom:calc(-20px - env(safe-area-inset-bottom));display:flex;gap:10px;padding:10px 0 calc(4px + env(safe-area-inset-bottom));margin-top:4px;background:var(--card)}
.drawer-footer>*{flex:1}
.drawer[data-v="alerta"] .drawer-c{border-top:4px solid var(--destructive)}
@keyframes aparece{from{opacity:0}}
@keyframes sobe{from{transform:translateY(100%)}}
@media (min-width:720px){.drawer,.folha{align-items:center}.drawer-c,.folha .painel{border-radius:28px;max-width:520px}.drawer-c::before,.folha .painel::before{display:none}}

/* ---------- 12. progress ---------- */
.progress{height:8px;border-radius:var(--r-pill);background:var(--muted);overflow:hidden}
.progress>i{display:block;height:100%;border-radius:var(--r-pill);background:var(--tinta);transition:width .9s var(--sai)}
.progress[data-v="accent"]>i{background:var(--accent)}
.progress[data-v="salvia"]>i{background:var(--salvia-e)}
.progress[data-size="lg"]{height:12px}

/* ---------- 13. tabs (TabsList > TabsTrigger) e barra de abas do app ---------- */
.tabs-list{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--muted)}
.tabs-trigger{min-height:38px;padding:0 16px;border-radius:var(--r-pill);font-weight:700;font-size:14px;color:var(--tinta-2);transition:background .3s var(--sai),color .2s}
.tabs-trigger[aria-selected="true"]{background:var(--card);color:var(--tinta);box-shadow:0 1px 3px rgba(27,27,27,.12)}
.abas{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-barra);background:var(--vidro);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--border);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.abas-l{max-width:600px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.aba{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:var(--r-md);text-decoration:none;font:700 12px/1 var(--texto);color:var(--suave)}
.aba svg{width:24px;height:24px}
.aba[aria-current="page"]{color:var(--tinta)}
.aba[aria-current="page"] .aba-i{background:var(--secondary)}
.aba-i{display:flex;align-items:center;justify-content:center;width:52px;height:30px;border-radius:var(--r-pill);transition:background .3s var(--sai)}

/* ---------- 14. carousel (setas + pontos + bordas que esmaecem; nunca "arraste para o lado") ---------- */
.carousel{position:relative;display:flex;flex-direction:column;gap:12px}
.carousel-vp{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px var(--g) 6px;margin:0 calc(-1 * var(--g));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--g),#000 calc(100% - var(--g)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--g),#000 calc(100% - var(--g)),transparent 100%)}
.carousel-vp::-webkit-scrollbar{display:none}
.carousel-vp{scroll-padding-inline:var(--g)}
.carousel-vp>*{flex:0 0 82%;scroll-snap-align:start}
.carousel-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.carousel-dots{display:flex;gap:6px}
.carousel-dots i{width:8px;height:8px;border-radius:var(--r-pill);background:var(--border-forte);transition:width .4s var(--mola),background .2s}
.carousel-dots i[aria-current="true"]{width:22px;background:var(--tinta)}
.carousel-setas{display:flex;gap:8px}
.carousel-setas button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--tinta);font-size:20px;display:flex;align-items:center;justify-content:center;background:var(--card)}
.carousel-setas button:disabled{opacity:.3}

/* ---------- 15. accordion ---------- */
.accordion{border-top:1px solid var(--border)}
.accordion:last-child{border-bottom:1px solid var(--border)}
.accordion summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:var(--alvo);padding:12px 0;font-weight:700;cursor:pointer}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";font:400 24px/1 var(--texto);transition:transform .3s var(--mola)}
.accordion[open] summary::after{transform:rotate(45deg)}
.accordion .acc-c{padding:0 0 14px;font-size:15px;color:var(--tinta-2);display:flex;flex-direction:column;gap:8px}

/* ---------- 16. toast (um por vez) ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:var(--z-toast);transform:translate(-50%,0);max-width:min(92vw,480px);
  background:var(--escuro);color:var(--sobre-escuro);padding:14px 18px;border-radius:var(--r-lg);font-weight:600;font-size:15px;box-shadow:var(--sombra);animation:toast-in .55s var(--pulo) both}
.com-abas~.toast,body.tem-abas .toast{bottom:calc(var(--barra-abas) + 16px + env(safe-area-inset-bottom))}
@keyframes toast-in{from{transform:translate(-50%,140%) scale(.9);opacity:0}}

/* ---------- 17. movimento de entrada e feedback (kinetics) ---------- */
.entra{animation:entra .45s var(--sai) both}
@keyframes entra{from{opacity:0;transform:translateY(14px)}}
/* entrada da tela inteira só com opacidade: transform no <main> prenderia as barras fixas (nav da prova, botão fixo da oferta) dentro dele */
.surge{animation:surge .3s ease both}
@keyframes surge{from{opacity:0}}
.escalona>*{animation:entra .45s var(--sai) both}
.escalona>*:nth-child(2){animation-delay:.07s}.escalona>*:nth-child(3){animation-delay:.14s}.escalona>*:nth-child(4){animation-delay:.21s}
.escalona>*:nth-child(5){animation-delay:.28s}.escalona>*:nth-child(6){animation-delay:.35s}.escalona>*:nth-child(n+7){animation-delay:.42s}
.treme{animation:treme .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes treme{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.check-svg .anel{fill:none;stroke:var(--border-forte);stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;transition:stroke-dashoffset .5s cubic-bezier(.65,0,.35,1)}
.check-svg .tique{fill:none;stroke:var(--papel);stroke-width:4;stroke-linecap:round;stroke-dasharray:32;stroke-dashoffset:32;transition:stroke-dashoffset .3s ease-out .4s}
.check-svg.feito .anel{stroke:var(--salvia-e);stroke-dashoffset:0}
.check-svg.feito .tique{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}

/* ======================================================================
   TELAS
   ====================================================================== */

/* ---------- onboarding (quiz web2app) ---------- */
.onb{min-height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto;padding:0 var(--g)}
.onb-topo{display:flex;align-items:center;gap:8px;height:60px}
.onb-topo .progress{flex:1}
.onb-topo .passo{font:700 12.5px/1 var(--texto);color:var(--suave);min-width:34px;text-align:right}
.onb-corpo{flex:1;display:flex;flex-direction:column;gap:18px;padding:12px 0 24px}
.onb-corpo h1{font-size:clamp(34px,9.6vw,46px);line-height:1.12}
.onb-pe{position:sticky;bottom:0;display:flex;flex-direction:column;gap:8px;padding:14px 0 calc(16px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--papel) 75%,transparent)}
.pe-nota{text-align:center;font-size:13px;color:var(--muted-foreground)}
/* reação, no lugar de um "personagem": balão da marca */
.reacao{display:flex;gap:10px;align-items:flex-start;animation:entra .35s var(--sai) both}
.reacao .av{flex:0 0 32px;height:32px;border-radius:50%;background:var(--tinta);display:flex;align-items:center;justify-content:center}
.reacao .av i{width:12px;height:12px;border-radius:50%;background:var(--accent)}
.reacao .balao{background:var(--card);border:1px solid var(--border);border-radius:4px 18px 18px 18px;padding:12px 14px;font-size:15.5px;line-height:1.45;box-shadow:var(--sombra)}
.digitando{display:inline-flex;gap:4px;padding:4px 0}
.digitando i{width:7px;height:7px;border-radius:50%;background:var(--tinta);opacity:.3;animation:pisca 1s infinite}
.digitando i:nth-child(2){animation-delay:.15s}.digitando i:nth-child(3){animation-delay:.3s}
@keyframes pisca{50%{opacity:1}}
/* abertura */
.abre{position:relative;display:flex;flex-direction:column;gap:18px;padding-top:8px}
.abre .selo{position:absolute;right:-6px;top:-4px;width:92px;height:92px;border-radius:50%;background:var(--lilas);display:flex;align-items:center;justify-content:center}
.abre .selo b{width:72px;height:66px;background:var(--coral);border-radius:46% 54% 42% 58%/55% 45% 55% 45%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font:400 34px/.9 var(--display);color:var(--cartao);transform:rotate(-6deg)}
.abre .selo small{font:700 12px/1 var(--texto);color:var(--tinta)}
.abre h1{padding-right:0}
.passos-abre{display:flex;flex-direction:column;gap:0;counter-reset:p}
.passos-abre li{list-style:none;display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--border)}
.passos-abre li::before{counter-increment:p;content:counter(p);width:28px;height:28px;border-radius:50%;background:var(--tinta);color:var(--papel);font:700 13px/28px var(--texto);text-align:center}
.passos-abre b{display:block}
.passos-abre span{font-size:14px;color:var(--tinta-2)}
.passos-abre{margin:0;padding:0}
/* montando */
.montando{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.montando li{display:flex;align-items:center;gap:12px;padding:12px 0;color:var(--muted-foreground);font-weight:600;transition:color .3s}
.montando li .check-svg{width:28px;height:28px;flex:0 0 28px}
.montando li .check-svg circle.fundo{fill:transparent;stroke:var(--border-forte);stroke-width:3;transition:fill .3s .3s}
.montando li.ok{color:var(--tinta)}
.montando li.ok .check-svg circle.fundo{fill:var(--salvia-e)}
.dica{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:var(--r-xl);background:var(--escuro);color:var(--sobre-escuro)}
.dica .etiqueta{margin-bottom:4px}
.dica p{font-size:16px;line-height:1.5}
/* plano */
.curva{position:relative;padding:18px 16px 12px;border-radius:var(--r-xl);background:var(--card);border:1px solid var(--border)}
.curva svg{width:100%;height:auto;overflow:visible}
.curva .eixo{display:flex;justify-content:space-between;font:700 12px/1 var(--texto);color:var(--suave);margin-top:8px}
.curva .mao{position:absolute;left:18px;top:14px;max-width:170px;transform:rotate(-4deg);font-size:22px;line-height:1}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.vs>div::before{content:"";width:24px;height:24px;background:currentColor;-webkit-mask:var(--ic) center/24px no-repeat;mask:var(--ic) center/24px no-repeat}
.vs>div:first-child{--ic:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.6%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M6 6l12 12M18 6 6 18%27/%3E%3C/svg%3E")}
.vs>div:first-child::before{background:var(--destructive-text)}
.vs>.com{--ic:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12.5 10 17.5 19 7%27/%3E%3C/svg%3E")}
.vs>.com::before{background:var(--salvia-e)}
.vs>div{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--r-lg);background:var(--muted);font-size:14px;line-height:1.45}
.vs>div b{font-size:15px}
.vs>.com{background:var(--secondary);box-shadow:inset 0 0 0 2px var(--salvia-e)}
.plano-l{display:flex;flex-direction:column}
.plano-l>div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--border);font-size:15px}
.plano-l>div:first-child{border-top:0;padding-top:0}
.plano-l b{font-size:14px}

/* ---------- início ---------- */
.contagem{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;padding:18px 20px;border-radius:var(--r-xl);background:var(--salvia-e);color:var(--sobre-escuro)}
.contagem b{font:400 56px/.9 var(--display);grid-row:span 2}
.contagem small{font-size:13px;opacity:.85;line-height:1.35}
.contagem strong{font-size:16px;line-height:1.25}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opcao{position:relative;display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;padding:16px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--border);
  text-decoration:none;min-height:104px;transition:transform .5s var(--mola)}
.opcao:active{transform:scale(.97);transition:transform .08s ease-out}
.opcao h3{font-size:16px;padding-right:28px}
.opcao p{font-size:13.5px;color:var(--muted-foreground);line-height:1.4}
.opcao .cadeado{position:absolute;top:12px;right:12px;width:22px;height:22px;color:var(--suave)}
.opcao[data-trancado]{background:var(--muted);box-shadow:none;border-color:transparent}
.pilha-8>.opcao{min-height:0}
.opcao[data-trancado] h3{color:var(--tinta-2)}
.timer-estudo{gap:12px}
.te-topo{display:flex;align-items:center;justify-content:space-between;gap:12px}
.te-topo>div{display:flex;flex-direction:column;gap:4px}
.timer-estudo b{font:400 32px/1 var(--display);font-variant-numeric:tabular-nums}

/* ---------- prova (caderno modo FGV) ---------- */
.barra-prova{position:sticky;top:0;z-index:var(--z-barra);display:flex;align-items:center;gap:10px;height:56px;padding:0 var(--g);background:var(--salvia-e);color:var(--sobre-escuro)}
.barra-prova .tempo{font:400 22px/1 var(--display);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.barra-prova .tempo.alerta{color:var(--marca)}
.barra-prova .prog{flex:1;font-size:13.5px;font-weight:700;opacity:.9}
.barra-prova button{min-height:38px;padding:0 14px;border-radius:var(--r-pill);border:1.5px solid rgba(243,239,230,.55);font-size:13.5px;font-weight:700;color:var(--sobre-escuro)}
.caderno{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:20px 16px;box-shadow:var(--sombra)}
.caderno .num{display:flex;align-items:center;justify-content:space-between;gap:10px}
.caderno .num b{font:400 30px/1 var(--display)}
.fonte-q{font-size:12.5px;color:var(--muted-foreground);font-weight:600;line-height:1.35}
.enunciado{display:flex;flex-direction:column;gap:10px}
.enunciado p{font-family:var(--serif-prova);font-size:17px;line-height:1.6}
.alt-linha{display:flex;align-items:center;gap:6px}
.alt-linha .alt{flex:1}
.alt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:12px;border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--card);transition:transform .5s var(--mola),background .2s,border-color .2s}
.alt:active{transform:scale(.985);transition:transform .08s ease-out}
.alt .letra{flex:0 0 30px;height:30px;border-radius:50%;border:2px solid var(--tinta);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;transition:background .2s,transform .5s var(--mola)}
.alt .txt{flex:1;font-family:var(--serif-prova);font-size:16px;line-height:1.5;padding-top:2px}
/* marcada = neutra (fundador, 12/10: verde parecia "acertou"); certa e errada só na correção, depois de entregar */
.alt.sel{border-color:var(--tinta);background:var(--papel-2);box-shadow:inset 0 0 0 1px var(--tinta)}
.alt.sel .letra{background:var(--tinta);border-color:var(--tinta);color:var(--papel);transform:scale(1.08)}
.alt.riscada .txt{text-decoration:line-through;opacity:.45}
.alt.certa{border-color:var(--success);background:var(--success-soft)}
.alt.certa .letra{background:var(--success);border-color:var(--success);color:#fff}
.alt.errada{border-color:var(--destructive);background:var(--destructive-soft)}
.alt.errada .letra{background:var(--destructive);border-color:var(--destructive);color:#fff}
.alt-linha{position:relative}
.alt-linha .alt .txt{padding-right:34px}
.riscar{position:absolute;top:6px;right:6px;width:40px;height:40px;border-radius:50%;color:var(--suave);font-size:15px;display:flex;align-items:center;justify-content:center}
.riscar.on{background:var(--destructive-soft);color:var(--destructive-text)}
.acoes-q{display:flex;gap:8px}
.marcar{min-height:40px;padding:0 14px;border-radius:var(--r-pill);border:1.5px solid var(--border-forte);font-weight:700;font-size:14px}
.marcar.on{background:var(--accent);border-color:var(--accent)}
.nav-prova{position:fixed;bottom:0;left:0;right:0;z-index:var(--z-barra);display:flex;gap:10px;padding:10px var(--g) calc(10px + env(safe-area-inset-bottom));background:var(--vidro);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--border)}
.nav-prova .btn{flex:1}
.prova-wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.dica-prova{font-size:13px;color:var(--muted-foreground);text-align:center}
/* folha de respostas: bolinhas de verdade */
.bolinhas{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:8px}
.bolinha{position:relative;aspect-ratio:1;min-width:0;border-radius:50%;border:1.5px solid var(--border-forte);font:700 12px/1 var(--texto);display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--tinta)}
.bolinha.resp{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.bolinha.flag{box-shadow:0 0 0 3px var(--accent)}
.bolinha.atual{outline:2px solid var(--salvia-e);outline-offset:3px}
.bolinha.certa{background:var(--success);border-color:var(--success);color:#fff}
.bolinha.errada{background:var(--destructive);border-color:var(--destructive);color:#fff}
.leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--tinta-2)}
.leg span{display:inline-flex;align-items:center;gap:6px}
.leg i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--border-forte)}
.leg i.f{background:var(--tinta);border-color:var(--tinta)}
.leg i.r{box-shadow:0 0 0 2px var(--accent)}

/* ---------- resultado e raio-x ---------- */
.placar{align-items:center;text-align:center;gap:8px}
.placar .nota{font:400 104px/.9 var(--display);letter-spacing:-.01em}
.placar .de{font:400 36px/1 var(--display);color:var(--suave)}
.veredito{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:var(--r-pill);font-weight:700;font-size:15px}
.veredito.passou{background:var(--success-soft);color:var(--success-text)}
.veredito.nao{background:var(--destructive-soft);color:var(--destructive-text)}
.veredito.neutro{background:var(--secondary);color:var(--secondary-foreground)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.trio>div{display:flex;flex-direction:column;gap:2px;padding:12px 6px;border-radius:var(--r-md);background:var(--muted)}
.trio b{font:400 28px/1 var(--display)}
.trio span{font-size:12.5px;color:var(--tinta-2);font-weight:600}
.disc{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center}
.disc>span{font-size:14.5px;font-weight:600}
.disc>b{font-variant-numeric:tabular-nums}
.trilho{grid-column:1/-1;height:10px;border-radius:var(--r-pill);background:var(--muted);overflow:hidden}
.trilho i{display:block;height:100%;border-radius:var(--r-pill);background:var(--tinta);transition:width .9s var(--sai)}
.trilho i.baixo{background:var(--accent)}
.trilho i.medio{background:var(--coral)}
/* raio-x do mini: cartão "postável" (o mesmo desenho do cartão de story gerado em canvas) */
.raiox{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:20px 20px;border-radius:var(--r-xl);background:var(--escuro);color:var(--sobre-escuro)}
.raiox .topo-r{display:flex;justify-content:space-between;align-items:center;font:700 12.5px/1 var(--texto);opacity:.8}
.raiox .nota{font:400 96px/.85 var(--display)}
.raiox .nota small{font-size:40px;opacity:.6}
.raiox .frase{font:400 30px/1 var(--mao);color:var(--marca);transform:rotate(-2deg);width:fit-content}
.raiox .linha-b{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.raiox .linha-b i{aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(243,239,230,.4)}
.raiox .linha-b i.c{background:var(--coral);border-color:var(--coral)}
.raiox .linha-b i.e{background:var(--errado);border-color:var(--errado)}
.raiox .leg{color:rgba(243,239,230,.8);font-size:12.5px}
.raiox .leg i{border-color:rgba(243,239,230,.45)}
.raiox .leg i.c{background:var(--coral);border-color:var(--coral)}
.raiox .leg i.e{background:var(--errado);border-color:var(--errado)}
.raiox .materias .badge{background:transparent;color:var(--sobre-escuro);box-shadow:inset 0 0 0 1.5px rgba(243,239,230,.45)}
.raiox .metricas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.raiox .metricas div{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:var(--r-md);background:rgba(243,239,230,.08)}
.raiox .metricas b{font:400 26px/1 var(--display)}
.raiox .metricas span{font-size:12.5px;opacity:.8;line-height:1.3}
.raiox .forma{display:none}
.raiox>*{position:relative}
.materias{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- oferta e paywall ---------- */
.oferta-topo{display:flex;flex-direction:column;gap:10px}
.leva-l{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.leva-l li{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--border);font-size:15px;line-height:1.4}
.leva-l li:first-child{border-top:0}
.leva-l li::before{content:"✓";width:24px;height:24px;border-radius:50%;background:var(--secondary);color:var(--secondary-foreground);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}
.preco-o{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.preco-o .valor{font:400 60px/.9 var(--display)}
.preco-o s{font-size:16px;color:var(--suave)}
.garantia-c{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start}
.garantia-c .selo{width:56px;height:56px;border-radius:50%;background:var(--tinta);color:var(--papel);display:flex;flex-direction:column;align-items:center;justify-content:center;font:400 22px/.9 var(--display)}
.garantia-c .selo small{font:700 12px/1 var(--texto);text-transform:uppercase;letter-spacing:.04em}
.garantia-c[data-v="salvia"] .selo{background:var(--salvia-e)}
.exemplo{font-size:14px;line-height:1.45;padding:10px 12px;border-radius:var(--r-md);background:var(--muted);color:var(--tinta-2)}
.lote{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:var(--r-lg);background:var(--marca-suave);font-size:15px;line-height:1.45}
/* cartões de planos (planos.js, os mesmos da LP) */
.planos{display:flex;flex-direction:column;gap:12px}
.plano{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:22px 20px;box-shadow:var(--sombra)}
.plano.destaque{border:2px solid var(--tinta)}
.plano .tag{align-self:flex-start;font:700 12.5px/1 var(--texto);padding:7px 10px;border-radius:var(--r-pill);background:var(--accent);color:var(--tinta)}
.plano .tag.cinza{background:var(--muted);color:var(--tinta-2)}
.plano h3{font-size:20px}
.plano .valor{font:400 56px/.9 var(--display)}
.plano .como{font-size:14px;color:var(--muted-foreground)}
.leva{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.leva li{position:relative;padding:9px 0 9px 32px;font-size:15px;border-top:1px solid var(--border)}
.leva li::before{position:absolute;left:0;top:9px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.leva li.sim::before{content:"✓";background:var(--secondary);color:var(--secondary-foreground)}
.leva li.nao{color:var(--suave);text-decoration:line-through}
.leva li.nao::before{content:"✕";background:var(--muted);color:var(--suave)}
.garantia-linha{font-size:14px;line-height:1.5;padding:14px 16px;border-radius:var(--r-lg);background:var(--secondary)}
.mensal-recolhido summary{list-style:none;cursor:pointer;min-height:var(--alvo);display:flex;align-items:center;font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.mensal-recolhido summary::-webkit-details-marker{display:none}
.mensal-recolhido .plano{margin-top:8px}
.aceite{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;padding:14px;border-radius:var(--r-md);background:var(--background);border:1.5px solid var(--border)}
.aceite input{width:22px;height:22px;margin:0;flex:0 0 22px;accent-color:var(--tinta)}
.aceite.pisca{border-color:var(--destructive);box-shadow:0 0 0 3px var(--destructive-soft);animation:treme .45s cubic-bezier(.36,.07,.19,.97) both}
.erro-aceite{color:var(--destructive-text);font-size:14px;font-weight:700}

/* ---------- revisão e comentário ---------- */
.comentario{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:var(--r-lg);background:var(--secondary);font-size:15px;line-height:1.55}
.comentario.revisao{background:var(--muted)}
.comentario .fonte{font-size:13.5px}
.comentario>:empty{display:none}
.comentario blockquote{margin:4px 0 0;padding-left:12px;border-left:3px solid var(--border-forte);font-size:14px;font-style:italic}

/* ---------- banco ---------- */
.filtros{display:flex;flex-direction:column;gap:10px}
.filtro{display:flex;flex-direction:column;gap:4px}
.filtro small{font-size:12.5px;color:var(--muted-foreground);font-weight:700}
select{min-height:var(--alvo);padding:0 40px 0 14px;border-radius:var(--r-md);border:1.5px solid var(--border-forte);width:100%;appearance:none;-webkit-appearance:none;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%231B1B1B%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E") right 14px center/16px no-repeat}
.lista-q{display:flex;flex-direction:column;gap:8px}
.item-q{display:flex;gap:12px;align-items:center;min-height:60px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card);text-align:left;width:100%;text-decoration:none;transition:transform .5s var(--mola)}
.item-q:active{transform:scale(.985);transition:transform .08s ease-out}
.item-q .n{font:400 20px/1 var(--display);min-width:40px}
.item-q .t2{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.item-q .t{font-size:14.5px;line-height:1.4;color:var(--tinta-2)}
.item-q .fonte-curta{font-size:12px;color:var(--muted-foreground);font-weight:700}
.ponto{width:12px;height:12px;border-radius:50%;background:var(--muted);box-shadow:inset 0 0 0 1.5px var(--border-forte);flex:0 0 12px}
.ponto.c{background:var(--success);box-shadow:none}.ponto.e{background:var(--destructive);box-shadow:none}
.vazio{text-align:center;padding:24px;color:var(--muted-foreground)}

/* computador: a coluna do app centralizada, com respiro */
@media (min-width:720px){
  .wrap{padding-top:32px;gap:20px}
  .grade.tres{grid-template-columns:repeat(3,1fr)}
}

/* página do design system (/app/ds.html) */
.ds-sec{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--border)}
.ds-sec>h2{font:400 26px/1 var(--display);text-transform:uppercase}
.ds-cores{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ds-cor{display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.3}
.ds-cor i{height:56px;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--border)}
.ds-linha{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.abas.estatica{position:static;border:1px solid var(--border);border-radius:var(--r-lg)}
/* botão fixo da oferta: aparece enquanto nenhum botão de plano está na tela (o botão principal nunca fica "tarde") */
.barra-cta{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-barra);padding:10px var(--g) calc(10px + env(safe-area-inset-bottom));background:var(--vidro-papel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--border);transition:transform .45s var(--sai)}
.barra-cta>div{max-width:568px;margin:0 auto}
.barra-cta[data-oculta]{transform:translateY(110%);visibility:hidden;transition:transform .45s var(--sai),visibility 0s .45s}
.tem-barra-cta .wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.oferta-cab{gap:14px}
.oferta-cab h1{font-size:clamp(32px,8.6vw,44px)}
.oferta-cab .lead{font-size:16px}
.raiox .materias .badge{font-size:12px;padding:6px 9px}
.prova-prog{position:sticky;top:56px;z-index:var(--z-barra);height:4px;border-radius:0;background:rgba(74,106,71,.25)}
.prova-prog>i{border-radius:0;background:var(--accent)}
.barra-prova .prog{white-space:nowrap}
.caderno .pilha-8{gap:8px}
.cadeado-i{width:22px;height:22px;color:var(--suave);flex:0 0 22px}
.item-q>span[aria-hidden] svg,.item-q .cadeado-i svg{width:20px;height:20px}
.filtros{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.filtros .segmentos{grid-column:1/-1}
@media (max-width:479px){.filtros{grid-template-columns:1fr}}
.plano .nota-preco{font-size:14px;line-height:1.45;padding:10px 12px;border-radius:var(--r-md);background:var(--marca-suave)}

/* computador (revisor-visual, portão 10/10): barras fixas na largura da coluna, abas flutuantes, botão fixo some (o do cartão já aparece) */
@media (min-width:720px){
  .nav-prova,.barra-prova{padding-left:max(var(--g),calc((100% - 568px)/2));padding-right:max(var(--g),calc((100% - 568px)/2))}
  .abas{left:50%;right:auto;bottom:16px;width:min(600px,calc(100% - 32px));transform:translateX(-50%);border:1px solid var(--border);border-radius:var(--r-xl);padding:6px 8px;box-shadow:var(--sombra)}
  .com-abas .wrap{padding-bottom:120px}
  .onb:not(.longo){padding-top:40px;padding-bottom:40px}
  .abre h1{max-width:none;padding-right:0}
  .plano-l>div{grid-template-columns:170px 1fr}
  .curva svg{max-height:200px}
}
/* portão 10/10 (revisores visual e jornada) */
button.link,.btn[data-v="link"]{display:inline-flex;align-items:center;min-height:44px}
.seg{display:inline-flex;align-items:center;gap:6px}
.seg-ic{width:16px;height:16px;flex:0 0 16px;color:var(--suave)}
.seg-ic svg{width:16px;height:16px}
.barra-prova #sair-prova{border-color:transparent;padding:0 10px;opacity:.85}
/* abertura: prévia do raio-x */
.previa-raiox{gap:10px;padding:18px}
.previa-raiox .nota{font-size:72px}
.previa-raiox .linha-b i{border-style:dashed}
/* oferta: prévia do que é pago */
.carousel-vp>.previa{flex:0 0 78%;padding:14px;gap:12px;margin:0}
.previa-tela{border-radius:var(--r-lg);background:var(--background);padding:12px;min-height:150px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.previa figcaption{display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.4}
.previa figcaption span{color:var(--muted-foreground)}
.mini-caderno{padding:10px;gap:6px;box-shadow:none}
.mini-caderno .num b{font-size:20px}
.mini-caderno .alt{padding:8px;gap:8px}
.mini-caderno .alt .letra{flex-basis:24px;height:24px;font-size:12px}
.mini-caderno .alt .txt{font-size:13px;padding-right:0}
.mini-bolinhas{grid-template-columns:repeat(8,1fr);gap:6px}
.mini-bolinhas .bolinha{border-width:1.3px}
.previa .disc>span{font-size:13px}
.previa .trilho{height:8px}
.item-q .n small{font-size:12px}
@media (min-width:720px){.carousel-vp>.previa{flex-basis:46%}}
.carousel-nav[hidden]{display:none}
.mensal-recolhido summary{font-weight:600;text-decoration:none;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:var(--r-lg);border:1.5px solid var(--border)}
.mensal-recolhido summary::after{content:"+";font:400 22px/1 var(--texto)}
.mensal-recolhido[open] summary::after{content:"–"}
.garantia-linha{display:flex;flex-direction:column;gap:8px}
.garantia-linha p{margin:0}

/* telas curtas do onboarding: os botões logo abaixo do conteúdo, sem vão (revisor-visual A1/A2); o plano (.longo) mantém o botão fixo */
.onb:not(.longo){min-height:auto}
.onb:not(.longo) .onb-corpo{flex:0;padding-bottom:8px}
.onb:not(.longo) .onb-pe{position:static;background:none;padding-top:8px}
.nota-mensal{display:block;font-weight:400;font-size:14px;color:var(--muted-foreground);margin-top:2px}
@media (max-width:480px){
  .caderno{padding:16px 12px}
  .alt{padding:10px;gap:10px}
  .alt .letra{flex-basis:26px;height:26px;font-size:13px}
  .alt-linha .alt .txt{padding-right:24px}
  .riscar{width:32px;height:32px;top:4px;right:4px}
  .riscar::after{content:"";position:absolute;inset:-6px}
}
.garantia-linha a,.rodape a,.exemplo a{display:inline-block;padding:12px 4px;margin:-12px -4px}
.alt{scroll-margin-top:76px}
/* portão r3: plano no computador com o pé como barra sólida (o conteúdo passa por baixo sem aparecer); curva no tamanho do texto; quiz centrado na tela */
.onb.longo .onb-pe{background:var(--papel);border-top:1px solid var(--border);margin:0 calc(-1 * var(--g));padding-left:var(--g);padding-right:var(--g)}
@media (min-width:720px){.curva svg{max-width:420px;margin:0 auto}}
.onb:not(.longo){min-height:100dvh}
.onb:not(.longo) .onb-corpo{margin-top:auto}
.onb:not(.longo) .onb-pe{margin-bottom:auto}
.onb-depois{padding:8px 0 32px}
/* computador com tela alta: o pé do plano no fluxo e sem o botão fixo da oferta/raio-x (o do cartão já aparece);
   notebook baixo (até 859 px de altura, ex.: 1024x768, 1280x800) mantém o pé e o botão fixos, para o botão principal estar na 1ª tela */
@media (min-width:720px) and (min-height:860px){
  .onb.longo .onb-pe{position:static;border-top:0;background:none;margin:0;padding-left:0;padding-right:0}
  .barra-cta{display:none}
  .tem-barra-cta .wrap{padding-bottom:40px}
}
@media (min-width:720px){.abas.estatica{position:static;transform:none;left:auto;right:auto;bottom:auto;width:auto;box-shadow:none}}
@media (min-width:720px){.curva .eixo,.curva>p{max-width:420px;margin-left:auto;margin-right:auto}}
/* oferta: garantias em 1 ou 2 linhas (fundador, 10/10); a condição inteira está nos termos e em "Ver as regras" */
.paywall.curto .garantia-linha{display:none}
.garantias-curtas{display:flex;flex-direction:column;gap:10px}
.garantias-curtas p{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;font-size:14.5px;line-height:1.45}
.garantias-curtas .ic{width:28px;height:28px;border-radius:50%;background:var(--salvia-e);color:var(--sobre-escuro);display:flex;align-items:center;justify-content:center;font:400 15px/1 var(--display)}
.garantias-curtas a{font-weight:700;display:inline-block;padding:12px 4px;margin:-12px -4px}
/* raio-x: em branco é vazada e clara, como no story */
.raiox .linha-b i{border:2px solid rgba(243,239,230,.75)}
.raiox .leg i{background:transparent;border:2px solid rgba(243,239,230,.75)}
.previa-raiox .linha-b i{border:2px dashed rgba(243,239,230,.55)}

.restam{display:inline-block;background:var(--accent);border-radius:999px;padding:2px 10px;white-space:nowrap;font-weight:700}
/* portão r5: respiro depois do botão do plano; dias da agenda numa linha */
.onb-depois{display:flex;flex-direction:column;gap:18px}
.segmentos.dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.segmentos.dias .seg{padding:0;justify-content:center;font-size:13.5px;min-width:0}
#ag-prim{text-wrap:pretty}
.lead,.ajuda-ag,.card-desc{text-wrap:pretty}

/* logo De Letra (direção 1): o SVG do nome; área livre e largura mínima de 80 px (GUIA.md) */
.logo-nome{display:inline-flex;align-items:center;min-height:44px;padding:4px 0;text-decoration:none}
.logo-nome img{display:block;height:30px;width:auto}
.raiox .linha-b{max-width:420px}

/* portão do logo (larguras novas): topo alinhado à coluna no computador, carrossel esmaecendo na borda, cartões do plano da mesma altura, abertura sem vão no tablet */
@media (min-width:720px){
  .topo{padding-left:max(var(--g),calc((100% - 568px)/2));padding-right:max(var(--g),calc((100% - 568px)/2))}
  .carousel-vp{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--g),#000 calc(100% - 52px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--g),#000 calc(100% - 52px),transparent 100%)}
  .onb:not(.longo){min-height:auto}
  .onb:not(.longo) .onb-corpo{margin-top:16px}
}
.vs{align-items:stretch}
.raiox .metricas span{text-wrap:pretty}
/* abertura: o conteúdo logo abaixo do logo (o centramento vertical fica para as perguntas do quiz) */
.onb.onb-abre{min-height:auto}
.onb.onb-abre .onb-corpo{margin-top:8px}
.story-img{display:block;width:100%;max-width:260px;margin:0 auto;border-radius:16px;box-shadow:var(--sombra);-webkit-touch-callout:default;user-select:auto}
/* plano (fundador, iPhone 11/10): uma tela só, sem pé fixo; rotina em grade; agenda num cartão escuro com o "dl" e a passada de marca-texto */
.plano-onb .onb-corpo{gap:14px;padding-bottom:32px}
.plano-onb h1{font-size:clamp(32px,8.8vw,44px)}
.curva-baixa{padding:14px 14px 10px}
.curva-baixa .eixo{gap:8px}
.curva-baixa .eixo span:nth-child(2){color:var(--tinta-2);font-weight:600;text-align:center}
.curva-baixa .mao{font-size:19px;max-width:150px;top:10px}
/* colunas do plano (12/10): uma por semana, sobem com mola em sequência; a última é o dia da prova (padrão .pv-* da LP) */
.plano-cols{padding:16px 14px 10px}
.pc-cols{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:clamp(3px,1.2vw,6px);height:clamp(110px,28vw,150px);align-items:end}
.pc-c{height:100%;display:flex;align-items:flex-end}
.pc-c i{display:block;width:100%;height:var(--h);border-radius:6px 6px 3px 3px;background:var(--tinta);transform:scaleY(.18);transform-origin:bottom;opacity:.35;
  transition:transform .7s var(--pulo) calc(var(--k) * 45ms),opacity .3s ease calc(var(--k) * 45ms)}
.plano-cols.on .pc-c i{transform:scaleY(1);opacity:1}
.pc-c.fim i{background:var(--accent);box-shadow:inset 0 0 0 2px var(--tinta)}
.plano-cols .eixo{gap:8px}
.plano-cols .eixo span:nth-child(2){color:var(--tinta-2);font-weight:600;text-align:center}
.pc-num{font:inherit;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.pc-c i{transition:none}}
.rotina{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rotina>div{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--border)}
.rotina b{font-size:15px;line-height:1.25}
.rotina span{font-size:13px;line-height:1.35;color:var(--muted-foreground)}
.agenda-dl{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:18px;border-radius:var(--r-xl);background:var(--escuro);color:var(--sobre-escuro)}
.agenda-dl img{border-radius:12px}
.agenda-dl h2{font-size:18px;line-height:1.3}
.agenda-dl p{font-size:14.5px;line-height:1.45;color:rgba(243,239,230,.82)}
.agenda-dl .btn{width:auto;justify-self:start;align-self:flex-start;border-color:var(--marca)}
/* a passada de marca-texto do De Letra (o gesto da marca): uma faixa inclinada atrás da palavra */
.passada{background:linear-gradient(transparent 22%,var(--marca) 22%,var(--marca) 90%,transparent 90%);color:var(--tinta);padding:0 .15em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (min-width:720px){.plano-onb{padding-top:32px}}
.onb.plano-onb{min-height:auto}.onb.plano-onb .onb-corpo{margin-top:0;flex:0}
/* entrada em cascata mais curta: a tela não fica meio vazia enquanto os blocos aparecem */
.escalona>*{animation-duration:.3s}
.escalona>*:nth-child(2){animation-delay:.04s}.escalona>*:nth-child(3){animation-delay:.08s}.escalona>*:nth-child(4){animation-delay:.12s}
.escalona>*:nth-child(5){animation-delay:.16s}.escalona>*:nth-child(n+6){animation-delay:.2s}
/* paybar da oferta (padrão do 7 Dias): preço, riscado, etiqueta de fundador, uma âncora, a garantia, um botão */
.paybar{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:var(--r-xl);background:var(--marca-suave);border:2px solid var(--tinta)}
.pb-preco{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pb-agora{font:400 60px/.95 var(--display)}
.pb-antes{font:400 28px/1 var(--display);color:var(--suave);text-decoration-thickness:3px}
.pb-tag{align-self:flex-start;font:700 13px/1 var(--texto);padding:7px 12px;border-radius:999px;background:var(--tinta);color:var(--papel)}
.pb-ancora{font-weight:700;font-size:16px;line-height:1.4}
.pb-garantia{font-size:14px;line-height:1.45;color:var(--tinta-2)}
.pb-garantia>b{text-wrap:balance}
.pb-garantia a{font-weight:700;display:inline-block;padding:12px 4px;margin:-12px -4px}
.paybar .btn{margin-top:4px}
.pb-conta{font-size:13px;color:var(--tinta-2);margin-top:-4px}
/* portão iPhone (revisor-visual) e conselho oferta-app-paybar */
.paybar{background:var(--card)}
.pb-garantia{display:grid;grid-template-columns:22px 1fr;gap:4px 10px;color:var(--tinta);font-size:14.5px}
.pb-garantia::before{content:"";grid-row:span 2;width:22px;height:22px;margin-top:1px;background:var(--salvia-e);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z%27/%3E%3C/svg%3E") center/22px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z%27/%3E%3C/svg%3E") center/22px no-repeat}
.pb-garantia>span{color:var(--tinta-2);font-size:13.5px}
#ag-prim{background:var(--papel);border:1px solid var(--border);border-radius:12px;padding:10px 12px;color:var(--tinta);font-weight:600;font-size:14px}
#ag-fechar{margin-top:-6px}
@media (max-width:480px){
  .agenda-dl{grid-template-columns:40px 1fr;gap:12px}
  .agenda-dl img{width:40px;height:40px}
  .agenda-dl>.pilha-8{display:contents}
  .agenda-dl h2{align-self:center}
  .agenda-dl p,.agenda-dl .btn{grid-column:1/-1}
}
.pb-depois{font:600 14px/1 var(--texto);color:var(--suave)}
.drawer-footer:has(#ag-google){flex-direction:column-reverse}

/* jornada iPhone (11/10): o mensal aberto em três linhas, num cartão */
.mensal-corpo{display:grid;gap:12px;margin-top:8px;padding:14px 16px;border-radius:var(--r-lg);background:var(--card,#FBF9F4);border:1.5px solid var(--border)}
.mensal-fatos{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:14.5px;line-height:1.4;color:var(--tinta)}
.mensal-fatos li{padding-left:16px;position:relative}
.mensal-fatos li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--tinta-2)}
.mini-caderno .num small{font-size:12px;margin-right:auto;margin-left:4px}
.agenda-dl .btn.ja{background:transparent;color:var(--sobre-escuro);border-color:rgba(243,239,230,.55);height:auto;min-height:var(--alvo);flex-direction:column;align-items:center;gap:2px;padding:10px 20px;text-align:center}
.agenda-dl .btn.ja span{white-space:nowrap}
.agenda-dl .btn.ja small{font-weight:500;font-size:13px;opacity:.85;white-space:nowrap}
/* quiz: campo do primeiro nome */
.campo-nome input{width:100%;min-height:56px;padding:0 16px;border-radius:var(--r-lg);border:1.5px solid var(--border-forte);background:var(--card);font:500 18px/1.2 var(--texto);color:var(--tinta)}
.campo-nome input:focus{outline:3px solid var(--ring,var(--salvia-e));outline-offset:2px}
/* oferta Y (fundador, 11/10): pílula da turma, preço, como, economia, garantia com escudo, botão, 7 dias */
.paybar-y .pb-tag{white-space:normal;line-height:1.35;border-radius:12px;font-size:12.5px;padding:7px 12px}
.pb-como{font-size:14.5px;color:var(--tinta-2);margin-top:-2px}
.pb-economia{font-size:15px;line-height:1.4;color:var(--tinta)}
.pb-economia b{background:linear-gradient(transparent 22%,var(--marca) 22%,var(--marca) 90%,transparent 90%);padding:0 .12em}
.pb-garantia-y{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:14px;line-height:1.45;color:var(--tinta-2)}
.pb-garantia-y .escudo{color:var(--salvia-texto);margin-top:1px}
.pb-garantia-y b{color:var(--tinta)}
.pb-garantia-y a{font-weight:700;color:var(--tinta);display:inline-block;padding:12px 4px;margin:-12px -4px}
.pb-sete{font-size:13.5px;color:var(--tinta-2);text-align:center}
.sem-quebra{white-space:nowrap}
.sem-quebra a{display:inline}
/* revisor visual lote 2 r2: pílula em grupos que não quebram (o "·" some quando o grupo desce de linha no celular); cartões do carrossel sem vão */
.pb-g{white-space:nowrap}
@media (max-width:520px){.paybar-y .pb-tag{display:flex;flex-direction:column;gap:2px}.paybar-y .pb-sep{display:none}}
.carousel-vp{align-items:flex-start}
.agenda-dl .btn.ja-antes{background:transparent;color:var(--sobre-escuro);border-color:var(--marca)}
/* "Montando seu plano" (fundador, 11/10, print a ~520 px: logo no topo, buraco e o título no meio): conteúdo logo abaixo do logo, em qualquer largura */
.onb.onb-montando{min-height:auto}
.onb.onb-montando .onb-corpo{margin-top:8px;flex:0}
.dica{min-width:0;max-width:100%;box-sizing:border-box}
.dica p{overflow-wrap:anywhere}
/* oferta Z (fundador, 11/10): os dois cartões da LP (lp-v10.css, .duas/.op), um botão, garantia e 7 dias; o Mês a mês num link */
.paybar-z{display:flex;flex-direction:column;gap:12px}
.duas{display:grid;grid-template-columns:1fr 1.2fr;gap:12px;align-items:stretch}
.op{border-radius:20px;padding:20px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.op h3{margin:0;font:700 15px/1.2 var(--texto);text-transform:none}
.op .valor{font:400 clamp(30px,8vw,44px)/1 var(--display);white-space:nowrap}
.op .valor small{font:700 14px/1 var(--texto);margin-left:2px}
.op .como{margin:0;font-size:13px;line-height:1.35}
.op-mensal{background:var(--cartao);color:var(--tinta-2);border:1.5px solid var(--border);align-self:stretch;justify-content:center}
.op-unico{background:var(--escuro);color:var(--sobre-escuro);padding-top:16px}
.op-unico .valor{font-size:clamp(46px,13vw,68px)}
.op-unico .como{color:#d9d3c7}
.op .selo{align-self:flex-start;background:var(--marca);color:var(--tinta);font:700 12px/1.2 var(--texto);border-radius:999px;padding:5px 10px;margin-bottom:4px}
.op .vs{margin:6px 0 0;background:var(--lilas);color:var(--tinta);border-radius:10px;padding:8px 10px;font-weight:700;font-size:14px;line-height:1.25}
.turma-linha{margin:2px 0 0;font-size:14px;text-align:center;color:var(--tinta)}
.garantias-z{display:flex;gap:10px;margin:0;font-size:14px;line-height:1.45;color:var(--tinta-2)}
.garantias-z .escudo{flex:none;color:var(--salvia-texto)}
.garantias-z b{color:var(--tinta)}
.garantias-z a{font-weight:700;color:var(--tinta);display:inline-block;padding:12px 4px;margin:-12px -4px}
.paybar-z .link-mensal{font-size:14.5px;text-decoration:underline;text-underline-offset:3px;min-height:var(--alvo)}
@media (min-width:560px){.op .valor{font-size:clamp(34px,6vw,44px)}.op-unico .valor{font-size:clamp(46px,9vw,64px)}}
@media (max-width:399px){.duas{gap:8px}.op{padding:16px 12px}.op .vs{font-size:13px}}
/* oferta Z com o que a pessoa leva (fundador, 11/10: "dois planos que só mudam no preço não rola"): as listas ✓/✕ da LP; no celular, um embaixo do outro, o Passe primeiro */
.op-mensal{justify-content:flex-start;padding-top:56px}
.leva-z{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid rgba(127,127,127,.25);display:grid;gap:9px;font-size:14px;line-height:1.35}
.leva-z li{position:relative;padding-left:22px}
.leva-z li::before{position:absolute;left:0;top:0;font-weight:700}
.leva-z li.sim::before{content:"✓";color:var(--salvia-texto)}
.leva-z li.nao::before{content:"✕";color:var(--errado)}
.op-mensal .leva-z li.nao{color:var(--suave)}
.op-unico .leva-z li.sim::before{color:#9fd39a}
.op-unico .leva-z{color:#F3EFE6}
@media (max-width:519px){.duas{grid-template-columns:1fr}.op-unico{order:-1}.op-mensal{padding-top:20px}.op .valor{font-size:40px}.op-unico .valor{font-size:64px}}
/* revisor visual, oferta Z: .vs colidia com o comparativo do app (.vs grid de 2 colunas); texto sem palavra sozinha; cartões lado a lado só com espaço */
.op .vs{display:block}
.turma-linha,.pb-sete,.garantias-z span,.leva-z li,.op .como{text-wrap:pretty}
@media (max-width:599px){.duas{grid-template-columns:1fr}.op-unico{order:-1}.op-mensal{padding-top:20px}}
@media (min-width:600px){.op-mensal{align-self:start}}
.z-dois{margin:0;font-size:15px;line-height:1.45;color:var(--tinta);text-wrap:pretty}
@media (min-width:600px){.z-dois{display:none}}
.pb-sete a{font-weight:700;color:var(--tinta);white-space:nowrap;display:inline-block;padding:10px 2px;margin:-10px -2px}
/* âncora simples (fundador, 11/10): o Mês a mês somado até a prova, riscado, acima do R$ 147 (calculado em Planos.oferta; igual à LP) */
.op .riscado{margin:4px 0 -2px;font-size:14px;color:#cfc8bb}
.op .riscado s{font:400 22px/1 var(--display);color:#cfc8bb;text-decoration-color:#F3EFE6;text-decoration-thickness:2px;margin-right:4px}
/* revisor-jornada (oferta Z): no celular o cartão do Mês a mês fica abaixo da dobra; a barra fixa mostra que ele existe */
.barra-cta .barra-mensal{display:block;margin:6px auto 0;background:none;border:0;padding:6px 8px;font:600 13.5px/1.2 var(--texto);color:var(--tinta-2);text-decoration:underline;text-underline-offset:3px;min-height:32px}
/* carrossel: cartões da mesma altura; a sobra vai para a área da tela de exemplo, não para baixo do texto */
#car-leva .carousel-vp{align-items:stretch}
#car-leva .previa{display:flex;flex-direction:column}
#car-leva .previa .previa-tela{flex:1}
/* pôr na tela inicial (fundador, 11/10): botão que faz o caminho; camada com seta encostada no lugar do toque.
   Classes próprias (ci-*): ".topo" é o cabeçalho do app e encolhia a camada (revisor visual, 11/10) */
.alert.instalar .instalar-acoes{grid-column:1/-1;display:flex;gap:8px;margin-top:8px}
.alert.instalar .instalar-acoes .btn{flex:1 1 0;white-space:nowrap;min-width:0}
.camada-inst{position:fixed;inset:0;z-index:1000;background:rgba(27,27,27,.78);display:flex;flex-direction:column;align-items:center;padding:20px var(--g)}
.camada-inst.ci-baixo{justify-content:flex-end;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.camada-inst.ci-topo{justify-content:flex-start;padding-top:calc(84px + env(safe-area-inset-top))}
.ci-cartao{width:100%;max-width:420px;background:var(--papel);color:var(--tinta);border-radius:var(--r-xl);padding:20px;display:flex;flex-direction:column;gap:12px}
.ci-titulo{font:400 24px/1.1 var(--display)}
.ci-passos{margin:0;padding-left:22px;display:grid;gap:10px;font-size:15.5px;line-height:1.45;text-wrap:pretty}
.ci-passos .ci-ic{display:inline-block;margin:0 2px;vertical-align:-4px;color:var(--salvia-texto)}
/* a seta encosta na borda: embaixo, no centro (barra do Safari); em cima, no canto direito (menu ••• / ⋮) */
.ci-seta{position:absolute;color:var(--marca);animation:ci-pula 1s ease-in-out infinite}
.ci-baixo .ci-seta{left:50%;bottom:calc(6px + env(safe-area-inset-bottom));margin-left:-20px}
.ci-topo .ci-seta{right:14px;top:calc(4px + env(safe-area-inset-top));transform:rotate(180deg);animation-name:ci-pula-cima}
@keyframes ci-pula{50%{transform:translateY(8px)}}
@keyframes ci-pula-cima{0%,100%{transform:rotate(180deg)}50%{transform:rotate(180deg) translateY(8px)}}
@media (prefers-reduced-motion:reduce){.ci-seta{animation:none}}
/* revisor visual r2: com a camada aberta, o botão do cabeçalho some (a seta de cima caía em cima do "Assinar"); iOS 26: seta embaixo à direita */
body:has(.camada-inst) .topo .btn{visibility:hidden}
.ci-baixo.ci-direita .ci-seta{left:auto;right:18px;margin-left:0}


/* visor da prova (fundador, 11/10): todas as questões numa faixa no topo, para pular e voltar; some a barra de progresso */
.visor{position:sticky;top:56px;z-index:var(--z-barra);display:flex;gap:6px;overflow-x:auto;padding:8px var(--g);background:var(--papel);border-bottom:1px solid var(--border);scrollbar-width:none;scroll-padding:0 40%}
.visor::-webkit-scrollbar{display:none}
.visor .bolinha{flex:1 0 28px;max-width:40px;height:36px;aspect-ratio:auto;font-size:12.5px;background:var(--card);cursor:pointer}
.visor .bolinha.resp{background:var(--tinta);color:var(--papel)}
.visor .bolinha.atual{outline:2.5px solid var(--salvia-e);outline-offset:2px}
@media (min-width:600px){.visor{padding-left:max(var(--g),calc((100% - 568px)/2));padding-right:max(var(--g),calc((100% - 568px)/2))}}
.bolinhas.brancas{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
.bolinha.branca{border:2px dashed var(--destructive);color:var(--destructive);background:var(--card);cursor:pointer}
#correcao:not(:empty){margin-top:14px}
/* quiz (sócio, 11/10: "não sabia onde clicar"): no celular o Continuar fica sempre no pé, no polegar */
@media (max-width:719px){
  .onb.onb-quiz:not(.longo){min-height:100dvh}
  .onb.onb-quiz:not(.longo) .onb-pe{position:sticky;bottom:0;margin-top:auto;margin-bottom:0;background:var(--papel);padding-top:12px}
}

/* grátis × pago (fundador, 11/10): aviso no topo de toda tela com algo pago, chips de matéria e de Exame com cadeado e peso N/80 */
.aviso-pago{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-lg);background:var(--marca-suave);border:1px solid var(--marca)}
.aviso-pago p{flex:1;margin:0;font:600 14px/1.35 var(--texto);color:var(--tinta)}
.aviso-pago .ap-ic{display:inline-flex;width:20px;height:20px;flex:0 0 20px;color:var(--tinta)}
.aviso-pago .ap-ic svg{width:20px;height:20px}
.aviso-pago .btn{flex:0 0 auto}
.peso{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:var(--r-pill);background:var(--secondary);color:var(--secondary-foreground);font:700 12px/1.2 var(--texto);font-variant-numeric:tabular-nums;vertical-align:1px}
.filtros-chips{display:flex;flex-direction:column;gap:8px}
.fc-rot{font:700 12px/1 var(--texto);color:var(--suave);text-transform:uppercase;letter-spacing:.04em}
.chips-rol{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin:0 calc(-1 * var(--g));padding-left:var(--g);padding-right:var(--g);scrollbar-width:none}
.chips-rol::-webkit-scrollbar{display:none}
.chip-f{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:var(--r-pill);border:1.5px solid var(--border-forte);background:var(--card);font:700 14px/1 var(--texto);color:var(--tinta);cursor:pointer;white-space:nowrap}
.chip-f[aria-checked="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.chip-f[aria-checked="true"] .peso{background:var(--papel);color:var(--tinta)}
.chip-f svg{width:15px;height:15px}
.chip-f.trancado,.seg.trancado{background:var(--muted,#ECE7DC);color:var(--tinta-2);border-style:dashed}
.chip-f.trancado[aria-checked="true"]{background:var(--muted,#ECE7DC);color:var(--tinta-2);border-color:var(--border-forte)}
@media (min-width:600px){.chips-rol{flex-wrap:wrap;overflow:visible;margin:0;padding-left:2px;padding-right:2px}}
/* portão r2 (lote do sócio) */
.riscar:disabled{visibility:hidden}
.corr-cab{padding:10px 12px;border-radius:var(--r-md);font:700 15px/1.3 var(--texto);margin-bottom:8px}
.corr-cab.ok{background:var(--success-soft);color:var(--tinta);border:1.5px solid var(--success)}
.corr-cab.erro{background:var(--destructive-soft);color:var(--tinta);border:1.5px solid var(--destructive)}
.visor{gap:3px;padding:8px 12px}
.visor .bolinha{flex:0 0 32px;width:32px;height:32px;max-width:none;aspect-ratio:1;border-radius:50%}
.visor .bolinha.certa{background:var(--success);border-color:var(--success);color:#fff}
.visor .bolinha.errada{background:var(--destructive);border-color:var(--destructive);color:#fff}
@media (min-width:720px){.curva .eixo{max-width:420px;margin-left:auto;margin-right:auto}}
.previa-raiox .linha-b,.raiox .linha-b{justify-content:space-between}
.drawer-footer:has(#confirma-entrega){flex-direction:column}
.previa-raiox .linha-b{max-width:none}
/* botões com mais cor (fundador, 12/10: "os botões tão muito preto, tem que colocar verde, mais cor, contraste"): o padrão vira o verde
   da marca (sálvia escuro, creme por cima: contraste 5,3:1, acima do 4,5 do WCAG AA); o contorno fica verde; o pêssego (accent) segue para a ação principal da venda */
.btn:not([data-v]),.btn[data-v="default"]{background:var(--salvia-e);border-color:var(--salvia-texto);color:var(--sobre-escuro)}
.btn[data-v="outline"],.btn.claro{border-color:var(--salvia-texto);color:var(--salvia-texto)}
.bolinha.resp,.visor .bolinha.resp{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
/* Treinar: linha curta embaixo das opções trancadas (sócio, 12/10: "esse texto tá confuso") */
.nota-trancado{display:flex;align-items:center;gap:6px;margin:4px 0 0}
.nota-trancado .cadeado{display:inline-flex;width:16px;height:16px;color:var(--suave);flex:none}
.nota-trancado .cadeado svg{width:16px;height:16px}

/* conta (sócio, 12/10): Minhas provas e documentos abrem no lugar; timer com meta e semana */
.prova-d,.doc-d{border-radius:var(--r-lg)}
.prova-d>summary,.doc-d>summary{list-style:none;cursor:pointer}
.prova-d>summary::-webkit-details-marker,.doc-d>summary::-webkit-details-marker{display:none}
.seta-d{display:inline-flex;margin-left:auto;transition:transform .2s var(--sai)}
.seta-d svg{width:18px;height:18px}
details[open]>summary .seta-d{transform:rotate(90deg)}
.resumo-p,.doc-corpo{display:flex;flex-direction:column;gap:10px;padding:12px 16px 16px;margin-top:-6px;background:var(--card);border:1px solid var(--border);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg)}
details[open]>summary.item-q{border-bottom-left-radius:0;border-bottom-right-radius:0}
.resumo-disc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.resumo-disc li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--border);font-size:14.5px}
.resumo-disc b{font-variant-numeric:tabular-nums}
.resumo-p .btn{align-self:flex-start}
.doc-corpo{font-size:14.5px;line-height:1.55}
.doc-corpo h2{font-size:16px;margin-top:6px}
.doc-corpo p,.doc-corpo ul{margin:0}
.te-meta{display:flex;flex-direction:column;gap:6px}
.te-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;height:84px;align-items:end}
.te-dias span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%}
.te-dias em{flex:1;display:flex;align-items:flex-end;justify-content:center;width:100%}
.te-dias i{display:block;width:100%;max-width:28px;min-height:2px;border-radius:6px 6px 2px 2px;background:var(--menta)}
.te-dias .bateu i{background:var(--salvia-e)}
.te-dias small{font:700 11.5px/1 var(--texto);color:var(--suave);text-transform:capitalize}
.te-dias .hoje small{color:var(--tinta)}

/* caderno de correção (fundador, 12/10): o padrão .corr da questão de exemplo da LP (lp-v10.css), com os tokens do app */
.corr{display:grid;gap:12px;margin-top:6px}
.corr>*{animation:corr-in .45s var(--sai) both}
.corr>:nth-child(2){animation-delay:.06s}.corr>:nth-child(3){animation-delay:.12s}.corr>:nth-child(4){animation-delay:.18s}.corr>:nth-child(5){animation-delay:.24s}.corr>:nth-child(n+6){animation-delay:.3s}
@keyframes corr-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.corr>*{animation:none}}
.corr-placar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.corr-chip{display:inline-block;white-space:nowrap;padding:8px 14px;border-radius:var(--r-pill);font:700 15px/1 var(--texto);border:2px solid currentColor}
.corr-chip b{font:800 16px/1 var(--texto)}
.corr-chip.ok{color:var(--success-text);background:var(--success-soft)}
.corr-chip.nok{color:var(--destructive-text);background:var(--destructive-soft)}
.corr-chip.neutro{color:var(--tinta-2);background:var(--muted);border-color:var(--border-forte)}
.corr-bloco{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.corr-bloco h4{margin:0;font:700 14px/1.2 var(--texto);color:var(--salvia-texto)}
.corr-bloco p{margin:0;font-size:16.5px;line-height:1.55}
.corr-bloco .lei{display:flex;flex-direction:column;gap:4px}
.corr-bloco .lei .fonte{font:600 12.5px/1.35 var(--texto);color:var(--suave)}
.corr-bloco blockquote{margin:0;padding:10px 12px;border-left:3px solid var(--salvia-e);background:var(--papel);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:15px;line-height:1.5}
.corr-bloco.atencao{border-color:var(--accent);background:var(--marca-suave)}
.corr-outras>summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:28px}
.corr-outras>summary::-webkit-details-marker{display:none}
.corr-outras>summary h4::after{content:" +";color:var(--suave)}
.corr-outras[open]>summary h4::after{content:" −"}
.corr-peso{margin:0;font-size:14.5px;color:var(--tinta-2)}
/* trancada no grátis: barras borradas (nenhum texto da correção vai ao HTML) + cadeado + CTA */
.corr-trava{position:relative;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--card);overflow:hidden;min-height:220px}
.corr-borrado{display:flex;flex-direction:column;gap:12px;padding:20px 18px;filter:blur(5px);opacity:.75}
.corr-borrado i{display:block;height:12px;border-radius:6px;background:var(--border-forte)}
.corr-borrado i.curta{width:60%}
.corr-trava-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;text-align:center;background:color-mix(in srgb,var(--card) 55%,transparent)}
.corr-trava-c .ap-ic{display:inline-flex;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;background:var(--marca-suave);color:var(--tinta)}
.corr-trava-c .ap-ic svg{width:20px;height:20px}
.corr-trava-c p{font-size:15px;line-height:1.45;max-width:34ch}
.corr-trava-c .btn{width:auto}
.cab-caderno{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.cab-caderno .micro svg{display:inline;width:13px;height:13px;vertical-align:-2px}
.visor.visor-rev{position:static;margin:0 calc(-1 * var(--g));border:0;background:none;padding-top:2px}
.visor-rev .bolinha{text-decoration:none}
.visor-rev .bolinha.branca{border-style:dashed;border-color:var(--destructive);color:var(--destructive-text)}
.visor-rev .bolinha.atual{outline:2.5px solid var(--tinta);outline-offset:2px}
.visor-rev .bolinha.tranca::after{content:"";position:absolute;right:-3px;top:-3px;width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid var(--papel)}

/* Fase 1 (fundador, 12/10): avatar, liga da semana com robôs identificados, medalhas */
.avatar{display:block;flex:none}
.liga-ini .liga-pilha{display:flex;flex:none}
.liga-ini .liga-pilha svg+svg{margin-left:-10px}
.liga-ini .t b{font-weight:800}
.liga-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.liga-lista li{display:grid;grid-template-columns:34px 44px 1fr auto;align-items:center;gap:10px;padding:8px 14px 8px 10px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card)}
.liga-lista .pos{font:400 22px/1 var(--display);text-align:center;color:var(--suave)}
.liga-lista .podio .pos{color:var(--salvia-texto)}
.liga-lista .nome{font-weight:700;font-size:15px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.liga-lista .pts{font:400 24px/1 var(--display);font-variant-numeric:tabular-nums}
.liga-lista li.voce{border:2px solid var(--salvia-e);background:var(--success-soft)}
.avatar-card{flex-direction:row!important;align-items:center;gap:16px}
.avatar-card .linha-btn{margin-top:4px;justify-content:flex-start}
.avatar-card .linha-btn .btn{width:auto}
.medalhas{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.medalha{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:var(--r-lg);border:1px dashed var(--border-forte);background:var(--papel);color:var(--suave)}
.medalha b{font-size:14px;color:var(--tinta-2)}
.medalha small{font-size:12.5px;line-height:1.35}
.medalha .selo-m{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--border-forte);font:400 16px/1 var(--display)}
.medalha .selo-m svg{width:18px;height:18px}
.medalha.ok{border:1px solid var(--border);border-style:solid;background:var(--card);color:var(--tinta-2)}
.medalha.ok b{color:var(--tinta)}
.medalha.ok .selo-m{background:var(--marca);border-color:var(--tinta);color:var(--tinta);box-shadow:0 3px 0 var(--tinta)}
/* editor de avatar: prévia presa embaixo do topo, abas por parte, peças em ladrilhos (12/10) */
.av-fixo{position:sticky;top:60px;z-index:5;margin:0 calc(-1 * var(--g));padding:10px var(--g) 0;background:var(--papel);border-bottom:1px solid var(--border)}
.av-palco{display:flex;align-items:center;gap:16px}
.av-palco #av-palco{flex:none;line-height:0;filter:drop-shadow(0 4px 0 var(--tinta))}
.av-palco .avatar{animation:av-pula .45s var(--mola)}
@keyframes av-pula{0%{transform:scale(.9) rotate(-4deg)}60%{transform:scale(1.04) rotate(1deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.av-palco .avatar{animation:none}}
.av-palco-t{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.av-palco-t h1{font-size:28px;line-height:1}
.av-palco-t .btn{width:auto;gap:6px}
.av-palco-t .btn svg{width:18px;height:18px}
.av-abas{display:flex;gap:6px;overflow-x:auto;padding:12px 0 10px;scrollbar-width:none}
.av-abas::-webkit-scrollbar{display:none}
.av-aba{flex:none;min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--border-forte);background:var(--card);font:700 14px/1 var(--texto, inherit);color:var(--tinta-2)}
.av-aba[aria-selected="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.av-painel{display:flex;flex-direction:column;gap:18px;padding-top:6px;min-height:340px}
.av-apelido{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px}
.av-apelido input{min-height:48px;padding:0 14px;border-radius:var(--r-md);border:1.5px solid var(--border-forte);background:var(--card);font-size:16px}
.av-grupo{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.av-grupo legend{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);padding:0;margin-bottom:8px}
.av-ops{display:flex;flex-wrap:wrap;gap:10px}
.av-op{position:relative;line-height:0;transition:transform .3s var(--mola)}
.av-op:active{transform:scale(.92)}
.av-op.peca{padding:4px;border-radius:18px;border:2px solid var(--border);background:var(--card)}
.av-op.peca .avatar{border-radius:14px}
.av-op.peca[aria-pressed="true"]{border-color:var(--tinta);box-shadow:0 3px 0 var(--tinta);transform:translateY(-2px)}
.av-op.cor{padding:3px;border-radius:50%;border:2px solid transparent}
.av-op.cor i{display:block;width:40px;height:40px;border-radius:50%;border:2px solid var(--tinta)}
.av-op.cor[aria-pressed="true"]{border-color:var(--tinta);box-shadow:0 0 0 3px var(--marca)}
.av-op[aria-pressed="true"]::after{content:"";position:absolute;right:-5px;top:-5px;width:20px;height:20px;border-radius:50%;background:var(--marca) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1B1B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center/13px no-repeat;border:2px solid var(--tinta)}
.av-pe{position:sticky;bottom:calc(var(--barra-abas) + 8px);padding-top:8px}
/* paleta C (fundador, 12/10): cartão do Passe e barra de oferta em verde escuro, preço creme, secundários verde-claro, ✓ pêssego (igual à LP) */
.op-unico{background:#3E5E3B}
.op-unico .como,.op-unico .riscado{color:#dfe8db}
.op-unico .valor{color:#F3EFE6}
.op-unico .leva-z li.sim::before{color:#F2B394}
.paybar,.paybar.paybar-y{background:#3E5E3B;border-color:#1B1B1B;color:#F3EFE6}
.paybar .pb-agora{color:#F3EFE6}
.paybar .pb-antes,.paybar .pb-depois,.paybar .pb-como,.paybar .pb-conta,.paybar .pb-economia,.paybar .pb-garantia>span,.paybar .pb-garantia-y{color:#dfe8db}
.paybar .pb-ancora,.paybar .pb-garantia,.paybar .pb-garantia>b{color:#F3EFE6}
.paybar .pb-garantia::before{background:#F2B394}
.paybar .pb-garantia-y svg{color:#F2B394}
.paybar a:not(.btn),.paybar .pb-sete,.paybar .pb-sete a{color:#F3EFE6}
.paybar .pb-tag{background:#F2B394;color:#1B1B1B}
.paybar .btn[data-v="outline"],.paybar .btn.claro{border-color:#F3EFE6;color:#F3EFE6}
/* e-mail antes do minissimulado (fundador, 12/10): 10 bolinhas que entram com mola (kinetics: stagger) + campo + aviso em destaque colado no botão */
.lead-tela{display:flex;flex-direction:column;gap:16px;max-width:520px;margin:0 auto;width:100%}
.lead-bols{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:8px}
.lead-bols i{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:50%;border:2px solid var(--tinta);background:var(--card);font:700 12px/1 var(--texto);font-style:normal;animation:lead-pop .5s var(--mola) both;animation-delay:calc(var(--k) * 45ms)}
@keyframes lead-pop{from{opacity:0;transform:translateY(10px) scale(.6)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lead-bols i{animation:none}}
.lead-form{gap:10px}
.lead-form label{font-weight:700;font-size:15px}
.lead-form input{min-height:52px;padding:0 16px;border-radius:var(--r-md);border:2px solid var(--tinta);background:var(--card);font-size:17px}
.lead-form input[aria-invalid="true"]{border-color:var(--destructive)}
.lead-erro{color:var(--destructive-text);font-weight:700;font-size:14.5px}
.aviso-lead{font-size:14px;line-height:1.5;color:var(--tinta);background:var(--marca-suave);border-radius:var(--r-md);padding:10px 12px}
.aviso-lead a{font-weight:700;color:var(--tinta)}

/* barra de abas mais profissional (fundador, 12/10): indicador único que desliza com mola, ícone mais forte na aba atual, toque com squish */
.abas{background:var(--vidro);border-top:1px solid var(--border);box-shadow:0 -6px 24px -18px rgba(27,27,27,.35)}
.abas-l{position:relative;--i:0}
.aba-ind{position:absolute;top:4px;left:0;width:calc((100% - 12px) / 4);height:32px;display:flex;justify-content:center;pointer-events:none;transform:translateX(calc(var(--i) * (100% + 4px)));transition:transform .55s var(--mola)}
.aba-ind::before{content:"";width:56px;height:32px;border-radius:var(--r-pill);background:var(--salvia-e)}
.aba{position:relative;z-index:1;gap:5px;min-height:56px;font:600 11.5px/1 var(--texto);letter-spacing:.01em;transition:transform .35s var(--mola),color .2s}
.aba:active{transform:scale(.92)}
.aba .aba-i{width:56px;height:32px;background:none!important}
.aba[aria-current="page"]{color:var(--tinta)}
.aba[aria-current="page"] .aba-i{color:var(--sobre-escuro)}
.aba[aria-current="page"] .aba-i svg{stroke-width:2.4}
.aba-av{display:block;width:28px;height:28px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.5px var(--border-forte);transition:box-shadow .3s var(--sai)}
.aba-av svg{width:100%;height:100%;stroke-width:inherit}
.aba[aria-current="page"] .aba-av{box-shadow:0 0 0 2px var(--sobre-escuro)}
.aba[aria-current="page"] .aba-t{font-weight:800}
@media (prefers-reduced-motion:reduce){.aba-ind{transition:none}}
@media (min-width:720px){.pc-cols{max-width:420px;margin:0 auto}}

/* ---------- modo noturno (Lorenzo, 12/10: "estuda de noite, página branca na cara") ----------
   Padrão: claro (a IDV aprovada). Na Conta: Claro, Escuro ou Automático (segue o celular). <html data-tema="escuro|auto">.
   As superfícies escuras (raio-x, agenda, Passe) continuam escuras; o que é pêssego leva texto preto fixo. */
:root[data-tema="escuro"]{
  --papel:#151613; --papel-2:#23241F; --cartao:#1C1D1A;
  --tinta:#EDE8DD; --tinta-2:#C4BFB2; --suave:#A8A497;
  --marca-suave:#3A2A21; --lilas:#263023; --menta:#33452F;
  --secondary-foreground:#AFCBA9; --accent-foreground:#1B1B1B;
  --success-text:#86C48C; --success-soft:#1E2D1F; --destructive-text:#EE9480; --destructive-soft:#3A231D;
  --border:rgba(237,232,221,.14); --border-forte:rgba(237,232,221,.32);
  --sombra:0 1px 2px rgba(0,0,0,.3),0 10px 30px -18px rgba(0,0,0,.75); --sombra-alta:0 -10px 40px -12px rgba(0,0,0,.75);
  --escuro:#272924; --sobre-escuro:#F3EFE6; --salvia-texto:#A3C59D; --salvia-borda:#6F9669;
  --vidro:rgba(28,29,26,.94); --vidro-papel:rgba(21,22,19,.92);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){:root[data-tema="auto"]{
  --papel:#151613; --papel-2:#23241F; --cartao:#1C1D1A;
  --tinta:#EDE8DD; --tinta-2:#C4BFB2; --suave:#A8A497;
  --marca-suave:#3A2A21; --lilas:#263023; --menta:#33452F;
  --secondary-foreground:#AFCBA9; --accent-foreground:#1B1B1B;
  --success-text:#86C48C; --success-soft:#1E2D1F; --destructive-text:#EE9480; --destructive-soft:#3A231D;
  --border:rgba(237,232,221,.14); --border-forte:rgba(237,232,221,.32);
  --sombra:0 1px 2px rgba(0,0,0,.3),0 10px 30px -18px rgba(0,0,0,.75); --sombra-alta:0 -10px 40px -12px rgba(0,0,0,.75);
  --escuro:#272924; --sobre-escuro:#F3EFE6; --salvia-texto:#A3C59D; --salvia-borda:#6F9669;
  --vidro:rgba(28,29,26,.94); --vidro-papel:rgba(21,22,19,.92);
  color-scheme:dark;
}}
[data-tema="escuro"] mark,[data-tema="escuro"] .plano .tag,[data-tema="escuro"] .restam,[data-tema="escuro"] .passada,[data-tema="escuro"] .pb-economia b,[data-tema="escuro"] .op .selo,[data-tema="escuro"] .medalha.ok .selo-m{color:var(--tinta-fixa)}
[data-tema="escuro"] .raiox,[data-tema="escuro"] .agenda-dl,[data-tema="escuro"] .dica,[data-tema="escuro"] .card[data-v="escuro"],[data-tema="escuro"] .toast{box-shadow:inset 0 0 0 1px var(--border)}
@media (prefers-color-scheme:dark){
[data-tema="auto"] mark,[data-tema="auto"] .plano .tag,[data-tema="auto"] .restam,[data-tema="auto"] .passada,[data-tema="auto"] .pb-economia b,[data-tema="auto"] .op .selo,[data-tema="auto"] .medalha.ok .selo-m{color:var(--tinta-fixa)}
[data-tema="auto"] .raiox,[data-tema="auto"] .agenda-dl,[data-tema="auto"] .dica,[data-tema="auto"] .card[data-v="escuro"],[data-tema="auto"] .toast{box-shadow:inset 0 0 0 1px var(--border)}
}
[data-tema="escuro"] .logo-nome img{content:url(/icons/deletra-nome-escuro.svg)}
@media (prefers-color-scheme:dark){[data-tema="auto"] .logo-nome img{content:url(/icons/deletra-nome-escuro.svg)}}
.corr-trava-c .btn{white-space:normal;height:auto;min-height:var(--alvo);padding:12px 20px;line-height:1.2;text-wrap:balance}
.liga-sub{flex-basis:100%;font:500 12.5px/1.3 var(--texto);color:var(--muted-foreground)}
/* revisor de jornada r3 (12/10): toast com largura do texto (left:50% encolhia para meia tela); indicador das abas não passa da borda */
.toast{width:max-content}
.abas-l{overflow:hidden}
/* ---------- comunidade no início (12/10): Liga Letrada, pódio, medalhas ---------- */
.comunidade{display:flex;flex-direction:column;gap:14px;padding:18px 16px 16px;border-radius:var(--r-xl);background:var(--secondary);border:1.5px solid var(--salvia-borda)}
.com-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.com-cab small{font:600 12.5px/1.2 var(--texto);color:var(--muted-foreground)}
.liga-marca{display:inline-flex;align-items:baseline;gap:.18em;margin:0;font:400 28px/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.liga-marca em{font:600 30px/1 var(--mao);text-transform:none;font-style:normal;color:var(--tinta-fixa);padding:0 .14em;
  background:linear-gradient(transparent 18%,var(--marca) 18%,var(--marca) 92%,transparent 92%);transform:rotate(-2deg);display:inline-block}
.podio-ini{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:8px;text-decoration:none;color:inherit}
.pod{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.pod svg{border-radius:50%}
.pod-nome{font:700 13px/1.2 var(--texto);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod-col{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding-top:6px;border-radius:10px 10px 4px 4px;
  background:var(--card);border:1.5px solid var(--tinta);transform-origin:bottom;animation:pod-sobe .7s var(--pulo) both}
.pod-col b{font:400 22px/1 var(--display)}
.pod-col small{font:700 11.5px/1.3 var(--texto);color:var(--muted-foreground)}
.pod.p1 .pod-col{height:78px;background:var(--marca);color:var(--tinta-fixa);animation-delay:.12s}
.pod.p1 .pod-col small{color:var(--tinta-fixa)}
.pod.p2 .pod-col{height:58px;animation-delay:.05s}
.pod.p3 .pod-col{height:44px;animation-delay:.2s}
.pod.voce .pod-nome{color:var(--salvia-texto)}
@keyframes pod-sobe{from{transform:scaleY(.2);opacity:.3}to{transform:scaleY(1);opacity:1}}
.com-falta{font-size:15px;line-height:1.45}
.com-feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.com-feed li{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;font-size:14px;line-height:1.35}
.com-feed small{font-size:12px;color:var(--muted-foreground);white-space:nowrap}
.com-med{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--border);text-decoration:none;color:inherit}
.com-med-l{display:flex}
.com-med-l i{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 11.5px/1 var(--texto);font-style:normal;
  background:var(--marca);color:var(--tinta-fixa);border:1.5px solid var(--tinta);box-shadow:0 2px 0 var(--tinta)}
.com-med-l i+i{margin-left:-8px}
.com-med-l i.vazia{background:var(--muted);color:var(--muted-foreground);box-shadow:none;border-style:dashed}
.com-med-l i.vazia svg{width:16px;height:16px}
.com-med-t{display:flex;flex-direction:column;gap:5px;min-width:0}
.com-med-t small{font-size:12.5px;line-height:1.3;color:var(--tinta-2)}
.com-med-t .progress{height:8px}
@media (prefers-reduced-motion:reduce){.pod-col{animation:none}}
.pod-col .ord{font:700 13px/1 var(--texto);vertical-align:top;margin-left:1px}
.comunidade .linha-btn{flex-wrap:wrap}
.comunidade .linha-btn .btn{flex:1 1 auto}
/* Marca-texto de Ouro, Prata e Bronze (troféu da Liga Letrada, fundador 12/10) */
.pod-tro{width:34px;height:34px;margin:-26px 0 2px}
.pod-col{overflow:visible}
.liga-heroi{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.liga-heroi img{width:112px;height:112px;animation:tro-in .8s var(--pulo) both}
.liga-marca-g{font-size:44px}.liga-marca-g em{font-size:46px}
@keyframes tro-in{from{transform:rotate(-20deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
.premios{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.premio{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--border);text-align:center}
.premio.p1{background:var(--marca-suave);border-color:var(--marca)}
.premio b{font:400 22px/1 var(--display)}
.premio small{font:600 12px/1.25 var(--texto);color:var(--tinta-2)}
.pos-tro{width:34px;height:34px;flex:none}
.estante{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 10px 10px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--border);border-bottom:6px solid var(--tinta)}
.est{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.est img{filter:grayscale(1);opacity:.35}
.est.ok img{filter:none;opacity:1}
.est b{font:400 22px/1 var(--display)}
.est small{font:600 12px/1.25 var(--texto);color:var(--tinta-2)}
@media (prefers-reduced-motion:reduce){.liga-heroi img{animation:none}}
.pod-tro{width:30px;height:30px;margin:2px 0 0}
.pod.p1 .pod-col{height:96px}.pod.p2 .pod-col{height:80px}.pod.p3 .pod-col{height:68px}
.premio .ord{font:700 13px/1 var(--texto);vertical-align:top}
.pod.p3 .pod-col{height:76px}.pod.p2 .pod-col{height:84px}.pod.p1 .pod-col{height:100px}
/* barra fixa com 5 abas (Liga no meio, 12/10) */
.abas-l{grid-template-columns:repeat(var(--n,4),1fr)}
.aba-ind{width:calc((100% - (var(--n,4) - 1) * 4px) / var(--n,4))}
.aba-liga[aria-current="page"] .aba-t{color:var(--salvia-texto)}

/* ---------- Liga Letrada: centro da comunidade (12/10, rodada 5 da marca) ---------- */
.liga-logo{display:inline-flex;line-height:0}
.liga-logo img{height:64px;width:auto}
.liga-logo .escuro{display:none}
[data-tema="escuro"] .liga-logo .claro{display:none}[data-tema="escuro"] .liga-logo .escuro{display:block}
@media (prefers-color-scheme:dark){[data-tema="auto"] .liga-logo .claro{display:none}[data-tema="auto"] .liga-logo .escuro{display:block}}
.liga-logo-p img{height:40px}
.com-cab h2{margin:0}
.trofeu{display:block;flex:none}
.liga-topo{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.liga-quando{font:700 12.5px/1 var(--texto);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground)}
.liga-voce{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:var(--r-lg);background:var(--card);border:2px solid var(--tinta);box-shadow:0 4px 0 var(--tinta)}
.lv-av{line-height:0}
.lv-pos{font:600 15px/1 var(--texto);color:var(--tinta-2)}
.lv-pos b{font:400 40px/1 var(--display);color:var(--tinta);margin-right:4px}
.lv-pos .ord{font:700 16px/1 var(--texto);vertical-align:top}
.lv-t p{margin-top:4px}
.lv-edit{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--tinta-2)}
.lv-edit svg{width:20px;height:20px}
/* pódio grande: ouro no meio, mais alto, com coroa e brilho */
.podio-g{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:end;gap:8px;padding-top:18px}
.pg{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.pg-av{position:relative;line-height:0}
.pg-av .avatar{border-radius:50%}
.pg.p1 .pg-av .avatar{box-shadow:0 0 0 4px #F2C14E,0 0 26px rgba(242,193,78,.75)}
.pg.p2 .pg-av .avatar{box-shadow:0 0 0 4px #C9CFD4}
.pg.p3 .pg-av .avatar{box-shadow:0 0 0 4px #D99063}
.pg-coroa{position:absolute;left:50%;top:-22px;width:34px;height:24px;transform:translateX(-50%) rotate(-8deg);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M3 25 L5 5 L13 14 L20 2 L27 14 L35 5 L37 25 Z' fill='%23F2C14E' stroke='%231B1B1B' stroke-width='2.6' stroke-linejoin='round'/%3E%3Ccircle cx='20' cy='19' r='2.6' fill='%23E07A8B' stroke='%231B1B1B' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;animation:coroa 2.8s ease-in-out infinite;z-index:1}
@keyframes coroa{0%,100%{transform:translateX(-50%) rotate(-8deg) translateY(0)}50%{transform:translateX(-50%) rotate(-4deg) translateY(-3px)}}
.pg-nome{font:700 14px/1.2 var(--texto);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:6px}
.pg-pts{font:600 12.5px/1 var(--texto);color:var(--muted-foreground)}
.pg-col{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:6px;padding-top:10px;border:2px solid var(--tinta);border-bottom:0;border-radius:14px 14px 0 0;transform-origin:bottom;animation:pg-sobe .7s var(--pulo,cubic-bezier(.3,1.4,.5,1)) both}
.pg-col b{font:400 30px/1 var(--display);color:var(--tinta-fixa)}
.pg-col .ord{font:700 14px/1 var(--texto);vertical-align:top}
.pg.p1 .pg-col{height:150px;background:linear-gradient(180deg,#FFE9A8,#F2C14E 45%,#C98F22);animation-delay:.25s}
.pg.p2 .pg-col{height:118px;background:linear-gradient(180deg,#FFFFFF,#DCE0E3 45%,#A2AAB1);animation-delay:.1s}
.pg.p3 .pg-col{height:96px;background:linear-gradient(180deg,#FAD4B8,#D99063 45%,#A25E37);animation-delay:.4s}
.pg-luz{position:absolute;inset:0;overflow:hidden;border-radius:12px 12px 0 0;pointer-events:none}
.pg.p1 .pg-luz::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);transform:translateX(-120%);animation:brilho 3.2s 1s ease-in-out infinite}
@keyframes pg-sobe{from{transform:scaleY(.2);opacity:0}to{transform:none;opacity:1}}
@keyframes brilho{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}
.pg.voce .pg-nome{color:var(--salvia-texto)}
/* ranking: 1º, 2º e 3º com cor de metal, barra lateral e troféu */
.liga-lista li.podio{position:relative;border:2px solid var(--tinta);overflow:hidden}
.liga-lista li.podio::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px}
.liga-lista li.m-ouro{background:linear-gradient(90deg,#FFF3CC,var(--card) 70%)}.liga-lista li.m-ouro::before{background:#F2C14E}
.liga-lista li.m-prata{background:linear-gradient(90deg,#EEF1F3,var(--card) 70%)}.liga-lista li.m-prata::before{background:#A2AAB1}
.liga-lista li.m-bronze{background:linear-gradient(90deg,#FBE1CF,var(--card) 70%)}.liga-lista li.m-bronze::before{background:#D99063}
.liga-lista li.m-ouro{box-shadow:0 3px 0 var(--tinta)}
.liga-lista li.podio .nome,.liga-lista li.podio .pts{color:var(--tinta-fixa)}
.liga-lista li.podio .liga-sub{color:#55554B}
.pos-m{display:flex;justify-content:center}
.liga-lista li.podio.voce{border-color:var(--salvia-e)}
/* carteirinha */
.carteira{--rx:0deg;--ry:0deg;--hx:30%;position:relative;display:flex;flex-direction:column;gap:12px;padding:0 0 14px;border-radius:22px;background:var(--papel-fixo,#F3EFE6);color:#1B1B1B;border:2.5px solid #1B1B1B;box-shadow:0 6px 0 #1B1B1B;overflow:hidden;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease-out}
.ct-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:#4A6A47;color:#F3EFE6;border-bottom:2.5px solid #1B1B1B}
.ct-marca{font:400 22px/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.ct-tipo{font:800 11.5px/1 var(--texto);letter-spacing:.12em;text-transform:uppercase}
.ct-corpo{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:0 16px}
.ct-av{line-height:0;border-radius:50%;background:var(--av-fundo)}
.ct-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.ct-id small{font:700 11.5px/1.2 var(--texto);letter-spacing:.06em;text-transform:uppercase;color:#4A6A47}
.ct-nome{font:400 32px/1 var(--display);text-transform:uppercase;overflow-wrap:anywhere}
.ct-frase{font:600 22px/1.05 var(--mao);color:#3E5E3B;margin-top:4px}
.ct-dados{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 16px;padding-top:10px;border-top:1.5px dashed rgba(27,27,27,.25)}
.ct-dados div{display:flex;flex-direction:column;gap:2px}
.ct-dados dt{font:700 10.5px/1.2 var(--texto);letter-spacing:.08em;text-transform:uppercase;color:#6B6A60}
.ct-dados dd{margin:0;font:400 24px/1 var(--display)}
.ct-dados dd small{font:600 12px/1 var(--texto);color:#6B6A60}
.ct-pe{display:flex;justify-content:space-between;gap:8px;padding:0 16px;font:700 11.5px/1 var(--texto);letter-spacing:.04em;color:#6B6A60}
.ct-holo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(242,179,148,.35) 42%,rgba(201,219,196,.45) 50%,rgba(185,167,217,.35) 58%,transparent 70%);background-size:250% 100%;background-position:var(--hx) 0;mix-blend-mode:multiply;animation:holo 6s ease-in-out infinite}
@keyframes holo{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.ct-mini{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit}
.ct-mini-cta{display:inline-flex;align-items:center;gap:4px;align-self:flex-end;font:700 14px/1 var(--texto);color:var(--salvia-texto)}
.ct-mini-cta svg{width:16px;height:16px}
.ct-palco{padding:4px 2px 6px}
.ct-aviso{text-align:center}
.frases{display:flex;flex-wrap:wrap;gap:8px}
.frase{min-height:40px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--border-forte);background:var(--card);font:600 14px/1.25 var(--texto);color:var(--tinta-2);text-align:left}
.frase[aria-checked="true"]{background:var(--marca);border-color:var(--tinta);color:var(--tinta-fixa);box-shadow:0 2px 0 var(--tinta)}
/* convite */
.convite-c{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:16px;border-radius:var(--r-lg);background:var(--marca-suave);border:2px solid var(--tinta)}
.convite-c h3{font:400 24px/1.05 var(--display);text-transform:uppercase;color:var(--tinta-fixa)}
.convite-c .pequeno{color:#55554B}
.convite-c .btn{width:auto;align-self:flex-start;gap:6px}
.conv-ic{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--marca);border:2px solid var(--tinta);color:var(--tinta-fixa)}
.conv-ic svg{width:24px;height:24px}
.btn svg{flex:none}
.linha-btn .btn[data-convite] svg,.drawer-footer .btn svg{width:18px;height:18px;margin-right:6px}
.conv-link input{width:100%;min-height:48px;padding:0 12px;border-radius:var(--r-md);border:1.5px solid var(--border-forte);background:var(--papel);font-size:14px}
/* medalhas desenhadas */
.medalhas-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.med-b{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 12px;border-radius:var(--r-lg);border:1.5px solid var(--border);background:var(--card);transition:transform .3s var(--mola)}
.med-b:active{transform:scale(.95)}
.med-b b{font:700 12.5px/1.2 var(--texto);text-align:center;color:var(--muted-foreground)}
.med-b.ok b{color:var(--tinta)}
.med-b:not(.ok) .med-svg{opacity:.75}
.med-svg{display:block;overflow:visible}
.med-brilho{animation:med-brilho 3.6s ease-in-out infinite}
@keyframes med-brilho{0%{transform:translateX(0) rotate(24deg)}45%,100%{transform:translateX(150px) rotate(24deg)}}
.med-b.ok .med-svg{filter:drop-shadow(0 3px 0 rgba(27,27,27,.25))}
.med-palco{position:relative;display:flex;justify-content:center;padding:10px 0 4px;perspective:600px}
.med-palco .med-svg{animation:med-entra 1.1s cubic-bezier(.2,.9,.3,1.2) both;transform-origin:50% 60%}
@keyframes med-entra{0%{transform:scale(.3) rotateY(-540deg);opacity:0}65%{transform:scale(1.08) rotateY(12deg);opacity:1}100%{transform:none}}
.med-txt{text-align:center}
.med-prog{display:flex;flex-direction:column;gap:8px}
.confete{position:absolute;inset:0;pointer-events:none;overflow:visible}
.confete i{position:absolute;left:50%;top:45%;width:8px;height:12px;border-radius:2px;background:var(--c,#F2B394);opacity:0;animation:confete 1.4s .5s ease-out forwards}
.confete i:nth-child(3n){--c:#F2C14E}.confete i:nth-child(3n+1){--c:#4A6A47}.confete i:nth-child(4n){--c:#B9A7D9}
.confete i{--ang:calc(var(--k) * 25.7deg)}
@keyframes confete{0%{opacity:1;transform:rotate(var(--ang)) translateY(0) rotate(0)}100%{opacity:0;transform:rotate(var(--ang)) translateY(-150px) rotate(320deg)}}
/* itens de status no editor de avatar */
.av-op.travado .avatar{filter:grayscale(1);opacity:.45}
.av-cad{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--tinta)}
.av-cad svg{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--card);box-sizing:content-box;border:1.5px solid var(--tinta)}
.av-op.status:not(.travado){border-color:#E3B341;background:linear-gradient(160deg,#FFF6D6,var(--card))}
@media (prefers-reduced-motion:reduce){.pg-col,.pg-coroa,x-nada,.ct-holo,.med-brilho,.med-palco .med-svg,.confete i{animation:none}.confete{display:none}.carteira{transform:none}}
.ct-dados .ord{font:700 13px/1 var(--texto);vertical-align:top}
/* nome no topo do editor (fundador, 12/10: "o nome lá em cima") */
.av-palco-t{flex:1}
.av-palco-t .av-apelido{width:100%;gap:4px;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-foreground)}
.av-palco-t .av-apelido input{min-height:44px;font:400 22px/1 var(--display);letter-spacing:.01em;text-transform:none;color:var(--tinta)}
/* níveis da carteirinha */
.carteira.nv-caloura .ct-topo{background:#8F8B80}.carteira.nv-caloura .ct-holo{opacity:.35}
.carteira.nv-bronze .ct-topo{background:linear-gradient(120deg,#FAD4B8,#D99063 50%,#A25E37);color:#1B1B1B}
.carteira.nv-prata .ct-topo{background:linear-gradient(120deg,#FFFFFF,#DCE0E3 50%,#A2AAB1);color:#1B1B1B}
.carteira.nv-ouro .ct-topo{background:linear-gradient(120deg,#FFF1BF,#F2C14E 50%,#C98F22);color:#1B1B1B}
.carteira.nv-ouro{box-shadow:0 6px 0 #1B1B1B,0 0 0 3px #F2C14E inset}
.carteira.nv-lenda{background:#1B1B1B;color:#F3EFE6}
.carteira.nv-lenda .ct-topo{background:linear-gradient(110deg,#F2B394,#F7D774,#C9DBC4,#B9A7D9,#F2B394);background-size:300% 100%;animation:holo 5s linear infinite;color:#1B1B1B}
.carteira.nv-lenda .ct-frase,.carteira.nv-lenda .ct-id small{color:#F7D774}
.carteira.nv-lenda .ct-dados dt,.carteira.nv-lenda .ct-pe,.carteira.nv-lenda .ct-dados dd small{color:#BDB8AC}
.carteira.nv-lenda .ct-holo{mix-blend-mode:overlay;opacity:.7}
.niveis{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:var(--r-lg);background:var(--card);border:1.5px solid var(--border)}
.nv-cab{display:flex;flex-direction:column;gap:2px}
.nv-cab b{font:400 24px/1 var(--display);text-transform:uppercase}
.nv-trilha{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.nv-p{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;opacity:.45}
.nv-p.ok{opacity:1}
.nv-p i{width:30px;height:20px;border-radius:5px;border:2px solid var(--tinta);background:#8F8B80}
.nv-p.nv-letrada i{background:#4A6A47}.nv-p.nv-bronze i{background:#D99063}.nv-p.nv-prata i{background:#DCE0E3}.nv-p.nv-ouro i{background:#F2C14E}
.nv-p.nv-lenda i{background:linear-gradient(110deg,#F2B394,#F7D774,#C9DBC4,#B9A7D9)}
.nv-p.atual i{box-shadow:0 0 0 3px var(--marca)}
.nv-p span{font:700 11.5px/1.15 var(--texto)}
.nv-p small{font:600 10.5px/1.1 var(--texto);color:var(--muted-foreground)}
.niveis .btn[data-v="link"]{align-self:flex-start;gap:4px}
.niveis .btn svg{width:16px;height:16px}
/* raio-x de quem está na Liga */
.liga-lista li[data-rx]{cursor:pointer;transition:transform .2s var(--mola)}
.liga-lista li[data-rx]:active{transform:scale(.98)}
.rx-cab{display:flex;align-items:center;gap:12px}
.rx-cab>span{display:flex;flex-direction:column;gap:2px}
.rx-cab small{font:500 13px/1.3 var(--texto);color:var(--muted-foreground)}
.rx-titulo{font:600 24px/1.1 var(--mao);color:var(--salvia-texto)}
.rx-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rx-chip{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-md);border:2px solid var(--tinta)}
.rx-chip.forte{background:var(--success-soft)}.rx-chip.fraco{background:var(--marca-suave)}
.rx-chip small{font:700 11px/1 var(--texto);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
.rx-chip b{font:700 15px/1.2 var(--texto);color:var(--tinta-fixa)}
.rx-chip i{font:400 22px/1 var(--display);font-style:normal;color:var(--tinta-fixa)}
.rx-barras{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.rx-barras li{display:grid;grid-template-columns:1fr 90px 40px;gap:8px;align-items:center;font-size:13.5px}
.rx-b{height:8px;border-radius:99px;background:var(--muted);overflow:hidden}
.rx-b i{display:block;height:100%;border-radius:99px;background:var(--salvia-e);transform-origin:left;animation:rx-enche .8s var(--mola) both}
.rx-barras li:last-child .rx-b i,.rx-barras li:nth-last-child(2) .rx-b i{background:var(--marca)}
.rx-barras b{font:400 16px/1 var(--display);text-align:right}
@keyframes rx-enche{from{transform:scaleX(0)}}
.av-acoes{display:flex;flex-wrap:wrap;gap:6px}
.av-acoes .btn{width:auto;gap:6px}.av-acoes .btn svg{width:18px;height:18px}

/* logo De Letra no cartão: o marca-texto do "letra" muda com o nível */
.ct-logo{display:block;width:84px;height:28px}
.carteira{--ct-de:#F3EFE6;--ct-marca:#2F4A2D;--ct-letra:#F3EFE6}
.carteira.nv-caloura{--ct-de:#F3EFE6;--ct-marca:#6B6A60;--ct-letra:#F3EFE6}
.carteira.nv-bronze{--ct-de:#1B1B1B;--ct-marca:#FAD4B8;--ct-letra:#1B1B1B}
.carteira.nv-prata{--ct-de:#1B1B1B;--ct-marca:#FFFFFF;--ct-letra:#1B1B1B}
.carteira.nv-ouro{--ct-de:#1B1B1B;--ct-marca:#FFF6D6;--ct-letra:#1B1B1B}
.carteira.nv-lenda{--ct-de:#1B1B1B;--ct-marca:#F7D774;--ct-letra:#1B1B1B}
/* frase da carteirinha: a dela em destaque, sugestões do perfil, todas escondidas */
.frase-box{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--r-lg);background:var(--card);border:1.5px solid var(--border)}
.fb-oi{font:700 15px/1.3 var(--texto)}
.fb-atual{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--marca-suave);border:2px solid var(--tinta)}
.fb-atual p{font:600 25px/1.05 var(--mao);color:var(--tinta-fixa)}
.fb-atual .btn{width:auto;flex:none;gap:6px}.fb-atual .btn svg{width:18px;height:18px}
.fb-rot{font:700 11.5px/1 var(--texto);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground)}
.frase-box .frase{min-height:36px;padding:6px 12px;font-size:13.5px}
.fb-todas summary{cursor:pointer;font:700 14px/1 var(--texto);color:var(--salvia-texto);padding:8px 0;list-style:none}
.fb-todas summary::-webkit-details-marker{display:none}
.fb-todas summary::after{content:" ▾"}
.fb-todas[open] summary::after{content:" ▴"}
.niveis .linha-btn{justify-content:flex-start}.niveis .linha-btn .btn{width:auto}
/* carteirinha no início (fundador, 12/10) */
.com-ct{display:block;text-decoration:none;color:inherit}
.com-ct .carteira{transform:rotate(-1.2deg)}

/* indicação: contador e próximo prêmio */
.conv-meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.conv-n{font:600 14px/1.2 var(--texto);color:var(--tinta-fixa)}.conv-n b{font:400 24px/1 var(--display);margin-right:2px}
.conv-proximo{font:700 12.5px/1.2 var(--texto);color:#3E5E3B}
.genero{border:0;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.genero legend{font-weight:700;font-size:14px;padding:0;margin-bottom:8px}

/* Liga: atalhos no topo (fundador, 12/10: "um mapa melhor para conectar uma coisa na outra") */
.liga-atalhos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.liga-atalhos a,.liga-atalhos button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:var(--r-md);background:var(--card);border:1.5px solid var(--border);font:700 12px/1.1 var(--texto);color:var(--tinta);text-decoration:none}
.liga-atalhos svg{width:22px;height:22px;color:var(--salvia-texto)}
.liga-atalhos a:active,.liga-atalhos button:active{transform:scale(.96)}
#liga-ranking{scroll-margin-top:72px}
.med-resumo{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-lg);background:var(--card);border:2px solid var(--tinta);box-shadow:0 3px 0 var(--tinta);text-decoration:none;color:inherit}
.med-resumo-l{display:flex}.med-resumo-l svg+svg{margin-left:-14px}
.med-resumo-l .med-svg{animation:med-balanca 3.2s ease-in-out infinite;transform-origin:50% 0}
.med-resumo-l .med-svg:nth-child(2){animation-delay:.4s}.med-resumo-l .med-svg:nth-child(3){animation-delay:.8s}.med-resumo-l .med-svg:nth-child(4){animation-delay:1.2s}
.med-resumo-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.med-resumo-t b{font:400 20px/1 var(--display);text-transform:uppercase}
.med-resumo-t small{font-size:13px;line-height:1.3;color:var(--tinta-2)}
.med-resumo>span:last-child svg{width:20px;height:20px}
/* tela de medalhas */
.med-nivel{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:baseline}
.med-nivel b{font:400 28px/1 var(--display)}.med-nivel span{font:600 14px/1.2 var(--texto);color:var(--tinta-2)}
.med-nivel .progress{grid-column:1/-1}
.med-prox{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px;border-radius:var(--r-lg);background:var(--marca-suave);border:2px solid var(--tinta)}
.med-prox small{font:700 11.5px/1 var(--texto);letter-spacing:.06em;text-transform:uppercase;color:#3E5E3B}
.med-prox b{font:400 22px/1.05 var(--display);text-transform:uppercase;color:var(--tinta-fixa)}
.med-prox .pequeno{color:#55554B}.med-prox .btn{width:auto;align-self:flex-start}
.mp-svg .med-svg{animation:med-balanca 2.6s ease-in-out infinite;transform-origin:50% 0}
.med-dica{text-align:center}
.med-b .med-svg{animation:med-balanca 3.4s var(--d,0s) ease-in-out infinite;transform-origin:50% 0}
@keyframes med-balanca{0%,100%{transform:rotate(0)}25%{transform:rotate(4deg)}75%{transform:rotate(-4deg)}}
.med-b.prox{border:2px solid var(--tinta);box-shadow:0 0 0 3px var(--marca);animation:prox-pulsa 2s ease-in-out infinite}
@keyframes prox-pulsa{0%,100%{box-shadow:0 0 0 3px var(--marca)}50%{box-shadow:0 0 0 6px var(--marca-suave)}}
.med-mini{width:70%;height:5px;border-radius:99px;background:var(--muted);overflow:hidden}.med-mini i{display:block;height:100%;background:var(--salvia-e)}
.med-b small{font:600 11px/1 var(--texto);color:var(--muted-foreground)}
@media (prefers-reduced-motion:reduce){.med-b .med-svg,.mp-svg .med-svg,.med-resumo-l .med-svg,.med-b.prox{animation:none}}

.ct-btns{flex-direction:column}.ct-btns .btn{width:100%}
.fb-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}.fb-cab .btn{width:auto;flex:none;gap:6px}.fb-cab .btn svg{width:18px;height:18px}
.liga-voce .lv-treinar{grid-column:1/-1;width:100%;gap:8px}.liga-voce .lv-treinar svg{width:20px;height:20px}
.cam-video{display:block;width:100%;max-height:52vh;object-fit:cover;border-radius:var(--r-md);border:2px solid var(--tinta);background:#000;transform:scaleX(-1);margin:4px 0 8px}

/* pílula das abas na cor da carteirinha do nível (12/10); gradiente na horizontal, como a faixa da carteirinha */
.abas[data-nv=caloura] .aba-ind::before{background:#8F8B80}
.abas[data-nv=letrada] .aba-ind::before{background:#4A6A47}
.abas[data-nv=bronze] .aba-ind::before{background:linear-gradient(90deg,#FAD4B8,#D99063 50%,#A25E37)}
.abas[data-nv=prata] .aba-ind::before{background:linear-gradient(90deg,#FFFFFF,#DCE0E3 50%,#A2AAB1);box-shadow:inset 0 0 0 1.5px #A2AAB1}
.abas[data-nv=ouro] .aba-ind::before{background:linear-gradient(90deg,#FFF1BF,#F2C14E 50%,#C98F22)}
.abas[data-nv=lenda] .aba-ind::before{background:linear-gradient(90deg,#F2B394,#F7D774,#C9DBC4,#B9A7D9,#F2B394);background-size:300% 100%;animation:holo 5s linear infinite;box-shadow:inset 0 0 0 1.5px #1B1B1B}
.abas:is([data-nv=bronze],[data-nv=prata],[data-nv=ouro],[data-nv=lenda]) .aba[aria-current="page"] .aba-i{color:#1B1B1B}
.abas:is([data-nv=caloura],[data-nv=letrada]) .aba[aria-current="page"] .aba-i{color:#F3EFE6}
@media (prefers-reduced-motion:reduce){.abas[data-nv=lenda] .aba-ind::before{animation:none}}
.pg[data-rx]{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s var(--mola)}.pg[data-rx]:active{transform:scale(.96)}.pg[data-rx]:focus-visible{outline:3px solid var(--foco,#4A6A47);outline-offset:4px;border-radius:14px}
.rx-ct{margin:2px 0 14px}.rx-ct .carteira{box-shadow:0 4px 0 #1B1B1B}
.fora,.fora *,.fora ::before,.fora ::after{animation-play-state:paused!important}
.rx-b{position:relative;overflow:visible}.rx-b i{border-radius:99px}
.rx-barras li.top{font-weight:700}.rx-barras li.top .rx-b{height:10px}.rx-barras li.top .rx-b i{background:var(--tinta)}
.rx-barras li:not(.top):not(.baixo){color:var(--texto-suave,inherit)}
.rx-barras li.baixo .rx-b i{background:var(--marca)}
.rx-barras li:last-child .rx-b i,.rx-barras li:nth-last-child(2) .rx-b i{background:var(--salvia-e)}
.rx-barras li.top .rx-b i{background:var(--tinta)}.rx-barras li.baixo .rx-b i{background:var(--marca)}
.rx-selo{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:99px;font:700 10.5px/1.5 var(--texto);background:var(--tinta);color:var(--papel);vertical-align:1px}
.rx-selo.baixo{background:var(--marca);color:#1B1B1B}
.rx-eu{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;border-radius:2px;background:#E2563B;box-shadow:0 0 0 1.5px var(--card)}
.rx-leg{margin:6px 0 8px}.rx-eu-leg{display:inline-block;width:3px;height:11px;border-radius:2px;background:#E2563B;vertical-align:-1px}
/* níveis conquistados viram botão: troca a carteirinha para o print de cada nível */
.nv-b{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;padding:4px 0;border-radius:8px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nv-b:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
.nv-b:active i{transform:scale(.92)}
.nv-p.atual .nv-b{background:color-mix(in srgb,var(--marca) 35%,transparent)}
.nv-dica{margin:6px 0 0;text-align:center}
/* revisor-visual r5 (Rodada, vale no banco e na revisão): selo sem ponto pendurado no celular; "Entender a fundo +" fechado sem vão embaixo */
@media (max-width:559px){.corr-selo b,.corr-selo span{display:block}}
@media (min-width:560px){.corr-selo b::after{content:" ·"}}
.corr-outras:not([open]){gap:0;padding-top:0;padding-bottom:0}
.corr-outras>summary{min-height:48px}

/* medalha nova no resultado: selo logo abaixo do placar, no lugar do toast que cobria o botão de compra (portão 15/10) */
.selo-medalha{margin:-4px 0 4px;text-align:center}