/* =====================================================================
   Sistema de design do Quarks: loja (loja.quarksedu.com.br) e, depois, o Portal Quarks.
   Só tema claro (decisão 32). Roxo é a marca; fundos escuros em roxo-noite (o Quarks não usa azul-marinho);
   amarelo só em destaque (comprar, preço, selo). Traço redondo, como os nós do símbolo.
   ===================================================================== */
@font-face { font-family:"Bricolage Grotesque"; src:url(/assets/fontes/BricolageGrotesque-500.woff2) format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Bricolage Grotesque"; src:url(/assets/fontes/BricolageGrotesque-700.woff2) format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Bricolage Grotesque"; src:url(/assets/fontes/BricolageGrotesque-800.woff2) format("woff2"); font-weight:800; font-display:swap; }
@font-face { font-family:"Figtree"; src:url(/assets/fontes/Figtree-400.woff2) format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Figtree"; src:url(/assets/fontes/Figtree-500.woff2) format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Figtree"; src:url(/assets/fontes/Figtree-600.woff2) format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Figtree"; src:url(/assets/fontes/Figtree-700.woff2) format("woff2"); font-weight:700; font-display:swap; }

:root{
  /* cores da marca */
  --roxo:#6551D1; --roxo-forte:#4F3DB8; --noite:#3A1D73; --noite-2:#4B258D; --carvao:#292B2C; --amarelo:#FFD10C;
  /* apoio */
  --amarelo-claro:#FFF4C2; --lilas:#F3F1FC; --lilas-2:#E6E1FA; --linha:#DCD7F0; --cinza:#5D5B6E; --cinza-claro:#8B88A3;
  --branco:#FFFFFF; --ok:#1F8A5B; --erro:#C2412D; --vivo:#E5484D;
  /* tipografia */
  --titulo:"Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --texto:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* formas */
  --r-p:14px; --r-m:20px; --r-g:28px; --r-gg:40px; --pilula:999px;
  --sombra:0 24px 48px -28px rgba(58,29,115,.45);
  --sombra-leve:0 1px 0 var(--linha);
  --largura:1200px; --gutter:clamp(16px,4vw,40px);
  color-scheme:light;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }
body{ margin:0; background:var(--branco); color:var(--carvao); font-family:var(--texto); font-size:17px; line-height:1.55; }
img,video,svg{ display:block; max-width:100%; }
img,video{ height:auto; }
h1,h2,h3,h4{ font-family:var(--titulo); color:var(--noite); line-height:1.05; margin:0; text-wrap:balance; }
p{ margin:0; }
a{ color:var(--roxo); }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--roxo); outline-offset:3px; border-radius:8px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wrap{ max-width:var(--largura); margin:0 auto; padding-inline:var(--gutter); }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* ---------- títulos de seção ---------- */
.sec{ padding-block:clamp(56px,8vw,96px); }
.sec-tit{ font-size:clamp(32px,4.4vw,52px); font-weight:800; letter-spacing:-.02em; }
.sec-sub{ font-size:clamp(17px,1.6vw,19px); color:var(--cinza); max-width:60ch; margin-top:14px; }
.sec-cab{ display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,44px); }

/* ---------- botões ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:var(--pilula); padding:14px 26px; min-height:48px;
  font-family:var(--texto); font-weight:700; font-size:16px; line-height:1.1; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .15s, transform .15s, box-shadow .15s; }
.btn:active{ transform:translateY(1px); }
.btn-comprar{ background:var(--amarelo); color:var(--noite); box-shadow:0 6px 18px -8px rgba(255,209,12,.9); }
.btn-comprar:hover{ background:#FFDA3D; }
.btn-roxo{ background:var(--roxo); color:#fff; }
.btn-roxo:hover{ background:var(--roxo-forte); }
.btn-claro{ background:#fff; color:var(--noite); box-shadow:inset 0 0 0 2px var(--linha); }
.btn-claro:hover{ box-shadow:inset 0 0 0 2px var(--roxo); }
.btn-vazado{ background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.4); }
.btn-vazado:hover{ box-shadow:inset 0 0 0 2px #fff; }
.btn-ok{ background:var(--ok); color:#fff; }
.btn-peq{ padding:10px 18px; min-height:42px; font-size:15px; }
.btn[disabled]{ opacity:.6; cursor:wait; }
.link{ font-weight:700; color:var(--roxo); text-decoration:none; }
.link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- pílulas e seletor de prova ---------- */
.provas{ display:flex; flex-wrap:wrap; gap:8px; }
.prova{ border:0; border-radius:var(--pilula); padding:9px 18px; min-height:42px; font-weight:700; font-size:15px; cursor:pointer;
  background:#fff; color:var(--noite); box-shadow:inset 0 0 0 1.5px var(--linha); }
.prova[aria-pressed="true"]{ background:var(--noite); color:#fff; box-shadow:0 0 0 3px var(--amarelo); }
.no-escuro .prova{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); }
.no-escuro .prova[aria-pressed="true"]{ background:#fff; color:var(--noite); box-shadow:0 0 0 3px var(--amarelo); }
.pilula{ display:inline-flex; align-items:center; gap:6px; border-radius:var(--pilula); padding:4px 12px; font-size:13px; font-weight:700; background:var(--lilas); color:var(--noite); }
.pilula.am{ background:var(--amarelo); }
.pilula.vivo{ background:var(--vivo); color:#fff; }
.pilula.vivo::before{ content:""; width:7px; height:7px; border-radius:50%; background:#fff; }
.preco{ font-family:var(--titulo); font-weight:800; color:var(--noite); font-size:24px; line-height:1.1; font-variant-numeric:tabular-nums; }
.preco small{ display:block; font-family:var(--texto); font-weight:500; font-size:13px; color:var(--cinza); margin-top:3px; }
.preco .sem{ font-size:18px; color:var(--cinza); font-weight:700; }

/* ---------- cabeçalho ---------- */
.topo{ position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--linha); }
.topo .wrap{ display:flex; align-items:center; gap:28px; height:72px; }
.topo .marca img{ height:30px; width:auto; }
.topo nav{ display:flex; gap:6px; margin-left:auto; }
.topo nav a{ color:var(--noite); text-decoration:none; font-weight:600; font-size:16px; padding:9px 14px; border-radius:var(--pilula); }
.topo nav a:hover{ background:var(--lilas); }
.topo nav a[aria-current="page"]{ background:var(--lilas-2); }
.topo .acoes{ display:flex; gap:10px; align-items:center; }
.entrar{ color:var(--noite); text-decoration:none; font-weight:700; font-size:15px; padding:9px 16px; border-radius:var(--pilula); box-shadow:inset 0 0 0 1.5px var(--linha); white-space:nowrap; }
.entrar:hover{ box-shadow:inset 0 0 0 1.5px var(--roxo); }
.btn-kit{ position:relative; border:0; width:46px; height:46px; border-radius:50%; background:var(--lilas-2); color:var(--noite); display:grid; place-items:center; cursor:pointer; }
.btn-kit .cont{ position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; border-radius:var(--pilula); padding:0 5px; background:var(--amarelo); color:var(--noite); font-size:12px; font-weight:800; display:none; place-items:center; }
.btn-kit .cont.on{ display:grid; }
.hamb{ display:none; border:0; width:46px; height:46px; border-radius:50%; background:var(--lilas); cursor:pointer; place-items:center; }
.hamb i{ display:block; width:18px; height:2px; background:var(--noite); border-radius:2px; box-shadow:0 6px 0 var(--noite),0 -6px 0 var(--noite); }
@media (max-width:900px){
  .topo .wrap{ height:64px; gap:12px; }
  .topo .marca img{ height:24px; }
  .topo nav{ display:none; position:absolute; left:0; right:0; top:64px; background:#fff; border-bottom:1px solid var(--linha); padding:10px var(--gutter) 18px; flex-direction:column; gap:2px; }
  .topo nav.aberto{ display:flex; }
  .topo nav a{ padding:13px 14px; font-size:17px; }
  .topo .acoes{ margin-left:auto; }
  .entrar{ display:none; }
  .topo nav .entrar-m{ display:block; }
  .hamb{ display:grid; }
}
.topo nav .entrar-m{ display:none; color:var(--roxo); }

/* ---------- herói escuro (home) ---------- */
.heroi-escuro{ background:var(--noite); color:#fff; position:relative; overflow:hidden; }
.heroi-escuro h1{ color:#fff; }
.orbitas{ position:absolute; pointer-events:none; border-radius:50%; border:2px solid rgba(255,255,255,.07); box-shadow:0 0 0 clamp(60px,9vw,120px) rgba(255,255,255,.025), 0 0 0 clamp(120px,18vw,240px) rgba(255,255,255,.02); }

/* ---------- cartões de produto (prateleira) ---------- */
.prateleira{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.produto{ background:#fff; color:var(--carvao); border-radius:var(--r-g); padding:20px 20px 24px; display:grid; gap:14px; align-content:start; box-shadow:var(--sombra); }
.produto .vit{ position:relative; border-radius:var(--r-m); overflow:hidden; aspect-ratio:4/3; display:grid; place-items:center; }
.produto .vit .pilula{ position:absolute; top:14px; left:14px; z-index:2; }
.produto h3{ font-size:30px; font-weight:800; letter-spacing:-.01em; }
.produto p{ color:var(--cinza); font-size:16px; }
.produto .compra{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1.5px solid var(--linha); padding-top:16px; margin-top:auto; }
.produto .compra .bts{ display:flex; gap:8px; }
@media (max-width:980px){
  .prateleira{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; margin-inline:calc(var(--gutter) * -1); padding:4px var(--gutter) 24px; scrollbar-width:none; }
  .prateleira::-webkit-scrollbar{ display:none; }
  .produto{ flex:0 0 min(82vw,340px); scroll-snap-align:center; }
  .produto h3{ font-size:26px; }
}

/* leque de capas */
.leque{ position:relative; width:78%; height:86%; }
.leque img{ position:absolute; bottom:4%; width:46%; border-radius:6px; box-shadow:0 18px 30px -14px rgba(0,0,0,.55); }
.leque img:nth-child(1){ left:2%; transform:rotate(-11deg); }
.leque img:nth-child(2){ left:27%; z-index:2; bottom:9%; }
.leque img:nth-child(3){ left:52%; transform:rotate(11deg); }

/* ---------- números ---------- */
.numeros{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; }
.numero{ padding:8px 24px; border-left:2px solid var(--linha); }
.numero:first-child{ border-left:0; padding-left:0; }
.numero b{ display:block; font-family:var(--titulo); font-weight:800; font-size:clamp(40px,5vw,60px); line-height:1; color:var(--roxo); letter-spacing:-.02em; }
.numero span{ display:block; color:var(--cinza); margin-top:8px; font-size:16px; }
@media (max-width:760px){ .numeros{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 0; } .numero:nth-child(3){ border-left:0; padding-left:0; } }

/* ---------- kit por prova ---------- */
.kit-prova{ background:var(--lilas); border-radius:var(--r-gg); padding:clamp(22px,4vw,48px); display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:clamp(24px,4vw,44px); align-items:start; }
.kit-itens{ display:grid; gap:12px; margin-top:24px; }
.kit-item{ background:#fff; border-radius:var(--r-m); padding:16px 18px; display:grid; grid-template-columns:auto 72px minmax(0,1fr) auto; gap:16px; align-items:center; }
.kit-item .marca-ck{ width:30px; height:30px; border-radius:50%; border:2px solid var(--linha); background:#fff; display:grid; place-items:center; cursor:pointer; padding:0; }
.kit-item .marca-ck[aria-pressed="true"]{ background:var(--roxo); border-color:var(--roxo); }
.kit-item .marca-ck[aria-pressed="true"]::after{ content:""; width:11px; height:6px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg) translate(1px,-1px); }
.kit-item .mini{ width:72px; height:72px; border-radius:16px; overflow:hidden; background:var(--lilas); display:grid; place-items:center; }
.kit-item .mini img{ width:100%; height:100%; object-fit:cover; object-position:left top; }
.kit-item .mini.capa img{ width:50px; height:auto; object-fit:contain; border-radius:3px; box-shadow:0 6px 12px -6px rgba(0,0,0,.4); }
.kit-item b{ display:block; color:var(--noite); font-size:18px; }
.kit-item .det{ font-size:15px; color:var(--cinza); }
.kit-item .extra{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; align-items:center; }
.fmt{ border:0; border-radius:var(--pilula); padding:5px 12px; font-size:13px; font-weight:700; cursor:pointer; background:#fff; color:var(--noite); box-shadow:inset 0 0 0 1.5px var(--linha); }
.fmt[aria-pressed="true"]{ background:var(--noite); color:#fff; box-shadow:none; }
.kit-item .preco{ font-size:19px; text-align:right; }
.resumo{ background:var(--noite); color:#fff; border-radius:var(--r-g); padding:26px; display:grid; gap:14px; position:sticky; top:96px; }
.resumo h3{ color:#fff; font-size:24px; }
.resumo .linha{ display:flex; justify-content:space-between; gap:12px; font-size:15px; color:#D6D1F5; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.12); }
.resumo .linha span:last-child{ white-space:nowrap; }
.resumo .tot{ display:flex; justify-content:space-between; align-items:end; gap:12px; }
.resumo .tot .preco{ color:var(--amarelo); font-size:26px; text-align:right; }
.resumo .tot .preco small{ color:#CFCAF0; }
.resumo .seg{ font-size:13px; color:#CFCAF0; }
.resumo .vazio{ color:#CFCAF0; font-size:15px; }
@media (max-width:980px){
  .kit-prova{ grid-template-columns:minmax(0,1fr); }
  .resumo{ position:static; }
}
@media (max-width:560px){
  .kit-item{ grid-template-columns:auto 56px minmax(0,1fr); gap:12px; padding:14px; }
  .kit-item .mini{ width:56px; height:56px; }
  .kit-item .preco{ grid-column:2 / -1; text-align:left; font-size:17px; }
}

/* ---------- blocos de conteúdo ---------- */
.duas{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,72px); align-items:center; }
@media (max-width:900px){ .duas{ grid-template-columns:minmax(0,1fr); } }
.pontos{ display:grid; gap:16px; margin-top:24px; padding:0; list-style:none; }
.pontos li{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:14px; }
.pontos li::before{ content:""; width:22px; height:22px; border-radius:50%; background:var(--amarelo); box-shadow:inset 0 0 0 6px var(--amarelo-claro); margin-top:3px; }
.pontos b{ display:block; color:var(--noite); font-size:18px; }
.pontos span{ color:var(--cinza); }
.cartao{ background:#fff; border-radius:var(--r-g); box-shadow:inset 0 0 0 1.5px var(--linha); padding:24px; }
.fundo-lilas{ background:var(--lilas); }
.fundo-noite{ background:var(--noite); color:#fff; }
.fundo-noite h2,.fundo-noite h3{ color:#fff; }
.fundo-noite .sec-sub{ color:#D3CEF3; }
.foto-moldura{ border-radius:var(--r-g); overflow:hidden; box-shadow:var(--sombra); background:#fff; }
.passos{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; padding:0; margin:0; list-style:none; counter-reset:p; }
.passos li{ counter-increment:p; background:#fff; border-radius:var(--r-m); padding:22px; box-shadow:inset 0 0 0 1.5px var(--linha); }
.passos li::before{ content:counter(p); display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--roxo); color:#fff; font-family:var(--titulo); font-weight:800; font-size:18px; margin-bottom:14px; }
.passos b{ display:block; color:var(--noite); font-size:19px; margin-bottom:6px; font-family:var(--titulo); }
.passos span{ color:var(--cinza); font-size:16px; }
@media (max-width:900px){ .passos{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .passos{ grid-template-columns:minmax(0,1fr); } }

/* dúvidas */
.duvidas{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,6vw,72px); }
@media (max-width:900px){ .duvidas{ grid-template-columns:minmax(0,1fr); } }
.duvidas details{ border-bottom:1.5px solid var(--linha); }
.duvidas summary{ list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative; font-weight:700; font-size:18px; color:var(--noite); }
.duvidas summary::-webkit-details-marker{ display:none; }
.duvidas summary::after{ content:""; position:absolute; right:6px; top:50%; width:26px; height:26px; margin-top:-13px; border-radius:50%; background:var(--lilas) no-repeat center/12px 12px;
  background-image:linear-gradient(var(--roxo),var(--roxo)),linear-gradient(var(--roxo),var(--roxo)); background-size:12px 2px,2px 12px; transition:transform .2s; }
.duvidas details[open] summary::after{ background-size:12px 2px,0 0; }
.duvidas details p{ padding:0 0 22px; color:var(--cinza); max-width:65ch; }
.zap{ display:inline-flex; align-items:center; gap:10px; margin-top:22px; font-weight:700; color:var(--noite); background:var(--lilas); border-radius:var(--pilula); padding:12px 20px; text-decoration:none; }
.zap svg{ width:22px; height:22px; color:#1FA855; }

/* chamada final */
.chamada{ background:var(--roxo); color:#fff; border-radius:var(--r-gg); padding:clamp(28px,5vw,56px); display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; position:relative; overflow:hidden; }
.chamada h2{ color:#fff; font-size:clamp(28px,3.6vw,42px); font-weight:800; max-width:20ch; }
.chamada p{ color:#E6E2FB; margin-top:10px; max-width:52ch; }
.chamada .bts{ display:flex; gap:12px; flex-wrap:wrap; position:relative; }

/* rodapé */
.rodape{ background:var(--noite); color:#CFCAF0; padding-block:56px 32px; margin-top:clamp(56px,8vw,96px); font-size:15px; }
.rodape .grade{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:32px; }
.rodape img{ height:28px; width:auto; margin-bottom:14px; }
.rodape h4{ font-family:var(--texto); color:#fff; font-size:15px; margin-bottom:12px; }
.rodape ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.rodape a{ color:#CFCAF0; text-decoration:none; }
.rodape a:hover{ color:#fff; }
.rodape .fim{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:22px; font-size:14px; }
@media (max-width:820px){ .rodape .grade{ grid-template-columns:repeat(2,minmax(0,1fr)); } .rodape .grade > div:first-child{ grid-column:1 / -1; } }

/* ---------- carrinho (gaveta), barra inferior e aviso ---------- */
.veu{ position:fixed; inset:0; background:rgba(58,29,115,.45); opacity:0; pointer-events:none; transition:opacity .2s; z-index:60; }
.veu.on{ opacity:1; pointer-events:auto; }
.gaveta{ position:fixed; top:0; right:0; bottom:0; width:min(520px,100%); background:#fff; z-index:61; display:grid; grid-template-rows:auto 1fr auto; transform:translateX(102%); transition:transform .25s ease; box-shadow:-20px 0 50px -30px rgba(58,29,115,.6); }
.gaveta.on{ transform:none; }
.gav-topo{ display:flex; justify-content:space-between; align-items:center; padding:calc(18px + env(safe-area-inset-top,0px)) 22px 16px; border-bottom:1px solid var(--linha); }
.gav-topo strong{ font-family:var(--titulo); font-size:24px; color:var(--noite); }
.fechar{ border:0; width:42px; height:42px; border-radius:50%; background:var(--lilas); font-size:24px; line-height:1; cursor:pointer; color:var(--noite); }
.gav-corpo{ overflow-y:auto; padding:18px 22px; display:grid; gap:14px; align-content:start; overscroll-behavior:contain; }
.gav-rodape{ border-top:1px solid var(--linha); padding:16px 22px calc(18px + env(safe-area-inset-bottom,0px)); display:grid; gap:10px; background:#fff; }
.item{ display:grid; grid-template-columns:58px minmax(0,1fr) auto; gap:14px; align-items:start; padding-bottom:14px; border-bottom:1px solid var(--linha); }
.item .mini{ width:58px; height:80px; border-radius:6px; overflow:hidden; background:var(--lilas); display:grid; place-items:center; }
.item .mini img{ width:100%; height:100%; object-fit:cover; }
.item .mini.lab img{ object-position:left top; }
.item .mini .ini{ font-family:var(--titulo); font-weight:800; color:var(--roxo); font-size:18px; }
.item .tag{ display:block; font-size:12px; font-weight:700; color:var(--roxo); margin-bottom:2px; }
.item b{ display:block; color:var(--noite); line-height:1.25; }
.item .sub{ display:block; font-size:14px; color:var(--cinza); }
.item .dir{ display:grid; justify-items:end; gap:6px; }
.item .dir .preco{ font-size:17px; }
.item select{ margin-top:8px; font:inherit; font-size:14px; padding:6px 10px; border-radius:10px; border:1.5px solid var(--linha); background:#fff; color:var(--noite); }
.mini-link{ border:0; background:none; padding:0; color:var(--roxo); font-weight:700; font-size:14px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.remover{ border:0; background:none; padding:0; color:var(--cinza); font-size:13px; cursor:pointer; text-decoration:underline; }
.gav-dica{ background:var(--amarelo-claro); border-radius:var(--r-p); padding:12px 14px; font-size:15px; display:grid; gap:8px; }
.gav-vazio{ text-align:center; padding:40px 10px; display:grid; gap:16px; justify-items:center; color:var(--cinza); }
.form-ped{ display:grid; gap:16px; margin-top:6px; }
.form-ped fieldset{ border:0; padding:0; margin:0; display:grid; gap:12px; }
.form-ped legend{ font-family:var(--titulo); font-weight:700; font-size:19px; color:var(--noite); margin-bottom:10px; }
.grade-campos{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.grade-campos .c6{ grid-column:span 6; } .grade-campos .c4{ grid-column:span 4; } .grade-campos .c3{ grid-column:span 3; } .grade-campos .c2{ grid-column:span 2; }
@media (max-width:480px){ .grade-campos .c3,.grade-campos .c4,.grade-campos .c2{ grid-column:span 6; } }
.campo{ display:grid; gap:5px; font-size:14px; font-weight:600; color:var(--noite); }
.campo input,.campo textarea,.campo select{ font:inherit; font-size:16px; font-weight:500; color:var(--carvao); padding:12px 14px; border-radius:12px; border:1.5px solid var(--linha); background:#fff; width:100%; min-width:0; }
.campo input:focus,.campo textarea:focus{ border-color:var(--roxo); outline:none; box-shadow:0 0 0 3px var(--lilas-2); }
.campo .ajuda{ font-weight:500; color:var(--cinza); font-size:13px; }
.inv,.campo .inv{ border-color:var(--erro)!important; }
.opcao{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; padding:12px 14px; border-radius:var(--r-p); border:1.5px solid var(--linha); cursor:pointer; }
.opcao:has(input:checked){ border-color:var(--roxo); background:var(--lilas); }
.opcao input{ accent-color:var(--roxo); width:18px; height:18px; margin-top:2px; }
.opcao small{ display:block; color:var(--cinza); font-size:13px; }
.aceite{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; font-size:14px; color:var(--cinza); }
.aceite input{ accent-color:var(--roxo); width:18px; height:18px; margin-top:2px; }
.erros{ background:#FDECEA; color:var(--erro); border-radius:var(--r-p); padding:12px 14px; font-size:15px; font-weight:600; }
.erros ul{ margin:6px 0 0; padding-left:18px; font-weight:500; }
.aviso-gav{ font-size:14px; color:var(--cinza); }
.linhas-total{ display:grid; gap:6px; font-size:15px; }
.linhas-total div{ display:flex; justify-content:space-between; gap:10px; }
.linhas-total .desc{ color:var(--ok); font-weight:700; }
.linhas-total .total{ font-family:var(--titulo); font-size:22px; color:var(--noite); font-weight:800; }
.cupom-form{ display:flex; gap:8px; }
.cupom-form input{ flex:1; min-width:0; font:inherit; padding:10px 14px; border-radius:var(--pilula); border:1.5px dashed var(--linha); text-transform:uppercase; }
.cupom-ok{ display:flex; justify-content:space-between; gap:10px; background:#E8F5EE; color:var(--ok); border-radius:var(--r-p); padding:10px 14px; font-size:14px; }
.cupom-erro{ color:var(--erro); font-size:14px; }
.nota{ font-size:13px; color:var(--cinza); }
.barra{ position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:50; background:var(--noite); color:#fff; border-radius:var(--r-m); padding:12px 12px 12px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  box-shadow:0 20px 40px -18px rgba(58,29,115,.8); transform:translateY(150%); visibility:hidden; transition:transform .25s, visibility .25s; max-width:640px; margin-inline:auto; }
.barra.on{ transform:none; visibility:visible; }
.barra b{ display:block; color:var(--amarelo); font-family:var(--titulo); font-size:19px; }
.barra span{ font-size:13px; color:#CFCAF0; }
body.com-barra{ padding-bottom:96px; }
.toast{ visibility:hidden; position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,30px); opacity:0; pointer-events:none; z-index:70; background:var(--carvao); color:#fff; border-radius:var(--pilula); padding:10px 10px 10px 18px; display:flex; gap:12px; align-items:center; font-size:15px; width:max-content; max-width:calc(100% - 32px); transition:opacity .2s, transform .2s; }
.toast.on{ visibility:visible; opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.toast button{ border:0; background:var(--amarelo); color:var(--noite); font-weight:700; border-radius:var(--pilula); padding:8px 14px; cursor:pointer; white-space:nowrap; }
.whats-flutua{ position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:45; width:56px; height:56px; border-radius:50%; background:#1FA855; display:grid; place-items:center; box-shadow:0 12px 26px -12px rgba(0,0,0,.5); }
.whats-flutua svg{ width:28px; height:28px; color:#fff; }
body.com-barra .whats-flutua{ bottom:calc(96px + env(safe-area-inset-bottom,0px)); }

/* capa simples quando a imagem não existe */
.capa-sem{ width:100%; height:100%; background:var(--roxo); color:#fff; display:grid; place-items:center; font-family:var(--titulo); font-weight:800; font-size:14px; text-align:center; padding:6px; }

/* aviso de prévia (catálogo de reserva) */
.previa-aviso{ background:var(--amarelo-claro); color:var(--noite); font-size:14px; text-align:center; padding:8px 16px; }
[hidden]{ display:none!important; }
@media (max-width:560px){
  .kit-prova{ padding:22px 12px; border-radius:var(--r-g); }
  .numero b{ font-size:38px; white-space:nowrap; }
  .prova{ padding:8px 14px; font-size:14px; }
}
.pacote .preco .sem,.combo.todo .preco .sem,.resumo .preco .sem{ color:#CFCAF0; }
.gaveta:not(.on){ box-shadow:none; visibility:hidden; transition:transform .25s ease, visibility 0s .25s; } /* fechada fora da tela: sem sombra na borda direita */

/* ---------- visor: páginas da apostila em tela cheia, com zoom ---------- */
.visor-aberto, .visor-aberto body{ overflow:hidden; }
.visor{ position:fixed; inset:0; z-index:200; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:#17143A; color:#fff; animation:visorEntra .2s ease-out; }
@keyframes visorEntra{ from{ opacity:0; } to{ opacity:1; } }
.visor-topo{ display:flex; align-items:center; gap:12px; padding:12px clamp(12px,3vw,24px); }
.visor-tit{ flex:1; min-width:0; display:grid; line-height:1.25; }
.visor-tit b{ font-family:var(--titulo); font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.visor-tit span{ font-size:14px; color:rgba(255,255,255,.72); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.visor button{ font:inherit; color:inherit; cursor:pointer; }
.visor-zoom{ display:flex; align-items:center; background:rgba(255,255,255,.1); border-radius:var(--pilula); padding:3px; }
.visor-zoom button{ display:grid; place-items:center; min-width:40px; height:40px; border:0; background:none; border-radius:var(--pilula); }
.visor-zoom .visor-pct{ min-width:58px; font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; }
.visor-zoom button:hover, .visor-fechar:hover{ background:rgba(255,255,255,.16); }
.visor-fechar{ display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.1); }
.visor button:focus-visible{ outline:3px solid var(--amarelo); outline-offset:2px; }
.visor-palco{ position:relative; overflow:hidden; touch-action:none; cursor:zoom-in; outline:0; overscroll-behavior:contain; }
.visor.ampliado .visor-palco{ cursor:grab; }
.visor.arrastando .visor-palco{ cursor:grabbing; }
.visor-folha{ display:flex; align-items:center; justify-content:center; width:max-content; height:max-content; min-width:100%; min-height:100%; padding:12px; box-sizing:border-box; }
.visor-folha img{ display:block; max-width:none; background:#fff; border-radius:6px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6); user-select:none; -webkit-user-drag:none; }
.visor-dica{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); margin:0; padding:6px 14px; border-radius:var(--pilula); background:rgba(0,0,0,.55); font-size:13px; white-space:nowrap; pointer-events:none; animation:visorDica 4s forwards; }
@keyframes visorDica{ 0%,70%{ opacity:1; } 100%{ opacity:0; } }
.visor.ampliado .visor-dica{ display:none; }
.visor-seta{ position:absolute; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:52px; height:52px; border:0; border-radius:50%; background:#fff; color:var(--noite) !important; box-shadow:0 10px 30px -8px rgba(0,0,0,.5); transition:transform .15s, opacity .2s; }
.visor-seta:hover{ transform:translateY(-50%) scale(1.06); }
.visor-seta.esq{ left:clamp(8px,2vw,24px); } .visor-seta.dir{ right:clamp(8px,2vw,24px); }
.visor.ampliado .visor-seta{ opacity:.35; } .visor.ampliado .visor-seta:hover{ opacity:1; }
.visor.uma .visor-seta, .visor.uma .visor-minis{ display:none; }
.visor-minis{ display:flex; gap:10px; overflow-x:auto; padding:10px clamp(12px,3vw,24px) 14px; justify-content:safe center; scrollbar-width:thin; }
.visor-minis button{ flex:0 0 auto; padding:0; border:2px solid transparent; border-radius:6px; background:none; opacity:.55; transition:opacity .15s, border-color .15s; }
.visor-minis button:hover{ opacity:.9; }
.visor-minis button.on{ opacity:1; border-color:var(--amarelo); }
.visor-minis img{ display:block; width:46px; height:65px; object-fit:cover; border-radius:4px; background:#fff; }
@media (max-width:640px){
  .visor-topo{ padding:8px 10px; gap:8px; }
  .visor-tit b{ font-size:15px; } .visor-tit span{ font-size:12.5px; }
  .visor-zoom button{ min-width:36px; height:36px; } .visor-zoom .visor-pct{ min-width:48px; }
  .visor-fechar{ width:40px; height:40px; }
  .visor-seta{ width:42px; height:42px; top:auto; bottom:calc(84px + env(safe-area-inset-bottom)); transform:none; opacity:.92; } .visor-seta:hover{ transform:none; }
  .visor-folha{ padding:6px; }
  .visor-minis{ padding:8px 10px calc(12px + env(safe-area-inset-bottom)); }
  .visor-minis img{ width:36px; height:51px; }
}
@media (prefers-reduced-motion:reduce){ .visor, .visor-dica{ animation:none; } }