/* Hub da Família · v6 (22/10/2026)
   Carrega DEPOIS do CSS de cada página. Só sobrescreve: paleta nova, fontes do próprio domínio,
   alvos de toque de 44 px, o sheet de tela cheia (celular) / modal (desktop) e a barra fixa.
   Para desfazer a paleta inteira basta tirar o <link href="/v6.css"> (o resto do layout é o da v5). */
/* v6.1: os dois arquivos são variáveis (eixo wght: Fredoka 300–700, Nunito 200–1000).
   Uma regra por família com a faixa inteira: 400/500/600/700/800 usam o peso real, sem negrito sintetizado. */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fontes/fredoka-latin.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url(/fontes/nunito-latin.woff2) format('woff2')}

/* Paleta: vermelho (CTA), azul (marca), azul-noite (texto), amarelo (destaque, nunca texto), creme/branco.
   Layout sempre claro (o Matheus prefere): o tema escuro da v5 fica desligado. */
:root:root:root{
  color-scheme:light;
  --red:#D7263D; --red-d:#B01E31; --red-s:#FFE5E8;
  --hub:#1E5BD8; --hub-s:#E8F0FF;
  --noite:#0F2A5C; --soft:#41557A; --sol:#FFC62E; --sol-s:#FFF3C4; --creme:#FFFBF2; --ok:#1B7F4B;
  --bg:#FFFBF2; --surface:#FFFFFF; --alt:#FFF3C4;
  --fg:#0F2A5C; --fg-soft:#41557A; --head:#0F2A5C; --ink:#0F2A5C;
  --accent:#1E5BD8; --on-accent:#FFFFFF;
  --blue:#1E5BD8; --blue-s:#E8F0FF; --blue-t:#1E5BD8;
  --yellow:#FFC62E; --yellow-s:#FFF3C4; --yellow-t:#0F2A5C;
  --coral:#D7263D; --coral-s:#FFE5E8; --coral-t:#B01E31;
  /* verde e lilás decorativos saem: viram a família "Aprender" (azul) */
  --green:#1E5BD8; --green-s:#E8F0FF; --green-t:#1E5BD8;
  --lilac:#1E5BD8; --lilac-s:#E8F0FF; --lilac-t:#1E5BD8;
  --good:#1B7F4B; --good-bg:#FFFFFF; --bad:#B01E31; --bad-bg:#FFE5E8;
  --line:rgba(15,42,92,.14); --shadow:rgba(15,42,92,.20);
  --band:#0F2A5C; --on-band:#FFFBF2; --on-band-soft:#E8F0FF;
  --guide:#8A9BBA;
  --display:'Fredoka',system-ui,sans-serif; --body:'Nunito',system-ui,sans-serif;
}
/* 3 famílias: Música (vermelho claro), Fé (amarelo claro), Aprender (azul claro) */
.c-coral,.c-red{--c:#D7263D;--cs:#FFE5E8;--ct:#B01E31;--con:#FFFFFF}
.c-yellow{--c:#FFC62E;--cs:#FFF3C4;--ct:#0F2A5C;--con:#0F2A5C}
.c-blue,.c-green,.c-lilac{--c:#1E5BD8;--cs:#E8F0FF;--ct:#1E5BD8;--con:#FFFFFF}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
.hero h1 .w1{color:#1E5BD8} .hero h1 .w2{color:#D7263D}

/* Botões: um vermelho por tela (ação principal); secundário com contorno azul; amarelo nunca é botão */
.btn{background:#D7263D;color:#fff;box-shadow:0 5px 0 #B01E31;min-height:48px}
.btn:hover{box-shadow:0 7px 0 #B01E31}.btn:active{box-shadow:0 1px 0 #B01E31}
.btn.yellow,.btn.sec{background:#fff;color:#1E5BD8;box-shadow:inset 0 0 0 2px #1E5BD8}
.btn.yellow:hover,.btn.sec:hover,.btn.yellow:active,.btn.sec:active{box-shadow:inset 0 0 0 2px #1E5BD8}
.add,.card .go{background:#fff;color:#1E5BD8;box-shadow:inset 0 0 0 2px #1E5BD8;min-height:44px;display:inline-flex;align-items:center}
.add[aria-pressed="true"]{background:#E8F0FF;color:#0F2A5C;box-shadow:inset 0 0 0 2px #1E5BD8}
.card .ico,.sample-ico,.num,.tipo .ti{color:var(--con,#fff)}
.cart-btn,.cart-link{background:#fff;color:#0F2A5C;box-shadow:inset 0 0 0 2px var(--line);min-height:44px;display:inline-flex;align-items:center}
.cart-btn .n,.cart-link .n{background:#1E5BD8;color:#fff}
.back{min-height:44px;display:inline-flex;align-items:center}
.chip{min-height:44px}
.chip[aria-pressed="true"]{background:#0F2A5C;border-color:#0F2A5C;color:#fff}
.idade-kit .chip[aria-pressed="true"]{background:#0F2A5C;border-color:#0F2A5C;color:#fff}
.idade-kit .chip{min-height:44px}
.idades .chip{min-width:52px;min-height:48px}
.nav a{min-height:44px;display:inline-flex;align-items:center}
.lnk{min-height:44px}
.pill{background:#FFF3C4;color:#0F2A5C}
.trust .pill{background:#FFC62E;color:#0F2A5C}
.steps3 li.on span,.pbar i{background:#1E5BD8;color:#fff}
.steps3 li.done span{background:#1B7F4B;color:#fff}
.steps3{flex-wrap:wrap} .steps3 li{min-width:0}
.opt.ok{background:#fff;border-color:#1B7F4B;color:#1B7F4B}
.p5{min-height:64px}
.p5-go{background:#1E5BD8;color:#fff;min-height:32px;display:inline-flex;align-items:center}
.p5.c-coral .p5-go{background:#D7263D}
.p5-t em{color:#B01E31}
.foot a{display:inline-block;min-height:24px}
.multi{background:#E8F0FF;color:#0F2A5C}
.line button,.acts button,.acts a{min-height:44px;padding:0 6px;display:inline-flex;align-items:center}
.check{min-height:44px;align-items:center}
.check input{width:22px;height:22px;margin-top:0}
.leads{background:#E8F0FF}
.quiz{background:#E8F0FF}
.quiz .pill{background:#1E5BD8;color:#fff}
.player .pill{color:var(--con,#fff)}
.playb{background:#0F2A5C;color:#fff}
.disc img{background:#FFC62E}
.selo-hub{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:#0F2A5C;background:#fff;padding:5px 12px 5px 6px;border-radius:999px;box-shadow:0 2px 0 var(--line)}
.selo-hub svg{width:24px;height:24px}

/* Faixa de prévia (só aparece fora de hubdafamilia.com.br) */
.previa-faixa{position:sticky;top:0;z-index:60;margin-inline:-16px;background:#0F2A5C;color:#fff;font-weight:800;font-size:.85rem;text-align:center;padding:8px 12px;line-height:1.3}
.previa-faixa b{color:#FFC62E}

/* ---------- Sheet único (produto, carrinho, checkout e /musica) ---------- */
html.hs-lock,html.hs-lock body{overflow:hidden}
dialog.hsheet{border:0;padding:0;margin:0;background:transparent;color:var(--fg);max-width:none;max-height:none;overflow:visible}
dialog.hsheet::backdrop{background:rgba(15,42,92,.55)}
.hs-in{display:flex;flex-direction:column;background:#FFFBF2;overflow:hidden}
.hs-head{flex:none;padding:10px 20px 12px;position:relative;background:#FFFBF2;border-bottom:1px solid var(--line)}
.hs-grab{width:44px;height:5px;border-radius:9px;background:rgba(15,42,92,.18);margin:0 auto 8px}
.hs-top{display:flex;align-items:center;gap:12px}
.hs-head h2{flex:1;min-width:0;font-size:1.3rem;line-height:1.2;color:#0F2A5C}
.hs-x{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:#fff;color:#0F2A5C;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.hs-x:focus-visible{outline:3px solid #1E5BD8;outline-offset:2px}
.hs-passo{margin-top:8px;font-weight:800;font-size:.9rem;color:#41557A}
.hs-bar{margin-top:8px;height:8px;border-radius:9px;background:#E8F0FF;overflow:hidden}
.hs-bar i{display:block;height:100%;width:0;background:#1E5BD8;border-radius:9px;transition:width .3s}
.hs-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:18px 20px 24px;display:grid;gap:18px;align-content:start}
.hs-foot{flex:none;display:flex;align-items:center;gap:14px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(15,42,92,.06)}
.hs-tot{flex:none;display:grid;line-height:1.15}
.hs-tot small{font-size:.85rem;color:#41557A;font-weight:800}
.hs-tot b{font-family:var(--display);font-weight:700;font-size:1.3rem;color:#0F2A5C;white-space:nowrap}
.hs-cta{flex:1;min-height:54px;font-size:1.1rem;padding:12px 16px}
.hs-cta[disabled]{opacity:.55;cursor:not-allowed}
.hs-view[hidden]{display:none!important}
.hs-view{display:grid;gap:16px}
.hs-sec{justify-self:center}
.hs-nota{font-size:.85rem;color:#41557A}
/* celular: tela cheia que sobe de baixo */
@media (max-width:719.98px){
  dialog.hsheet{position:fixed;inset:auto 0 0 0;width:100%;height:calc(100dvh - 16px);height:calc(100vh - 16px);height:calc(100dvh - 16px)}
  dialog.hsheet[open]{animation:hsUp .26s ease-out}
  .hs-in{height:100%;border-radius:24px 24px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.25)}
}
@keyframes hsUp{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){dialog.hsheet[open]{animation:none}}
/* desktop: o modal continua, centralizado */
@media (min-width:720px){
  dialog.hsheet{position:fixed;inset:0;margin:auto;width:min(560px,calc(100vw - 48px));height:min(760px,calc(100vh - 48px))}
  .hs-in{height:100%;border-radius:28px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
  .hs-grab{display:none}
}
/* campos dentro do sheet */
.hs-body .field input,.hs-body .field select,.hs-body .field textarea{font-size:16px;min-height:48px}
.temas{display:flex;flex-wrap:wrap;gap:8px}
.temas .chip{font-size:.98rem;padding:8px 16px;text-align:left;line-height:1.2}
.temas .chip[aria-pressed="true"]{background:#FFF3C4;border-color:#FFC62E;color:#0F2A5C;box-shadow:inset 0 0 0 1px #FFC62E}
.temas .chip.mais{border-style:dashed}
details.opc{background:#E8F0FF;border-radius:16px}
details.opc>summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;font-weight:800;color:#1E5BD8}
details.opc>summary::-webkit-details-marker{display:none}
details.opc>summary::after{content:"›";font-size:1.4rem;transition:transform .2s}
details.opc[open]>summary::after{transform:rotate(90deg)}
details.opc .opc-in{padding:4px 16px 16px;display:grid;gap:16px}
.pagto-pix{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:12px 14px;font-weight:800}
.pagto-pix svg{width:26px;height:26px;flex:none}
.resumo-ck{background:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 3px 0 var(--line)}
.resumo-ck ul{margin:6px 0 0;padding-left:18px}
.resumo-ck li{margin:2px 0}
.cpf-motivo{font-size:.85rem;color:#41557A;margin-top:-2px}
.previa-aviso{background:#FFF3C4;border:2px dashed #FFC62E;color:#0F2A5C;border-radius:14px;padding:10px 14px;font-weight:800;font-size:.9rem}
/* páginas de produto: topo com CTA que abre o sheet */
.prod-hero{display:grid;gap:14px;padding-block:6px 8px}
.prod-hero .btn{width:100%}
@media (min-width:720px){.prod-hero .btn{width:auto;justify-self:start}}
.amostra{border-radius:18px;overflow:hidden;box-shadow:0 4px 0 var(--line);background:#fff}
.amostra img{display:block;width:100%;height:auto}

/* v6 · alvos de toque ≥44px também nos links de rodapé, logo e índice dos termos */
.foot a,.toc a,a.back{display:inline-flex;align-items:center;min-height:44px}
a.brand{min-height:44px;display:inline-flex;align-items:center}
.p5{min-height:56px}
.p5 .p5-t b{display:block}
label.check{min-height:44px;align-items:flex-start}
label.check input[type=checkbox]{width:26px;height:26px;flex:0 0 26px;margin-top:2px;accent-color:#1E5BD8}
@media (max-width:719px){.hs-head h2{font-size:1.12rem}}
h3>a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- v6.1 ---------- */
/* campos e botões herdam a fonte da página (antes caíam na fonte padrão do sistema, Arial) */
button,input,select,textarea{font-family:inherit}
dialog.hsheet{font-family:var(--body)}
/* checkboxes e rádios na cor da marca */
input[type=checkbox],input[type=radio]{accent-color:#1E5BD8}
/* teclado aberto no celular: o rodapé fixo sai da frente e o sheet acompanha a área visível */
dialog.hsheet.hs-teclado .hs-foot{display:none}
dialog.hsheet.hs-teclado .hs-passo,dialog.hsheet.hs-teclado .hs-bar,dialog.hsheet.hs-teclado .hs-grab{display:none}
@media (max-width:719.98px){
  dialog.hsheet.hs-teclado{height:var(--hs-vh,100dvh);inset:0 0 auto 0;animation:none}
  dialog.hsheet.hs-teclado .hs-in{border-radius:0}
  dialog.hsheet.hs-teclado .hs-body{padding-bottom:40vh}
}
/* erro embaixo de cada campo */
.err-campo{margin:6px 0 0;color:var(--bad,#B3261E);font-weight:700;font-size:.9rem}
.field.inval input,.field.inval select,.field.inval textarea{outline:2px solid var(--bad,#B3261E);outline-offset:2px;border-radius:14px}
label.check.inval{outline:2px solid var(--bad,#B3261E);outline-offset:4px;border-radius:12px}
/* "Ver ou mudar o carrinho" e outros botões-link: a home não carrega o hub.css, então o estilo vem daqui (antes aparecia como botão cinza em Arial) */
.lnk{border:0;background:transparent;color:var(--fg-soft);font-weight:800;font-family:var(--body);font-size:.95rem;text-decoration:underline;cursor:pointer;padding:12px}