/* xGAIA: os componentes, tirados do portal do Storma (80 Storma/Site/estilo.css). Todas as cores vêm dos tokens. */
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--body);font:400 16px/1.55 var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--ink)}a:hover{color:var(--coral-forte)}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
h1,h2,h3,p{margin:0}

/* a marca */
.marca{font:700 24px/1 var(--font-sans);letter-spacing:-.4px;color:var(--ink);text-decoration:none}
.marca:hover{color:var(--ink)}
.marca b{color:var(--coral-texto);font-weight:700}
.marca i{font-style:normal;font-weight:200;letter-spacing:0;color:var(--muted)}

/* a barra de cima */
.topo{border-bottom:1px solid var(--hairline-soft);background:var(--canvas)}
.topo-in{max-width:var(--largura-conteudo);margin:0 auto;padding:12px 16px;min-height:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.nav{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.nav a{padding:8px 14px;border-radius:var(--radius-controlo);font:500 14px var(--font-sans);color:var(--muted);text-decoration:none}
.nav a[aria-current=page]{background:var(--card);color:var(--ink)}

/* blocos de texto */
.largura{max-width:var(--largura-conteudo);margin:0 auto;padding:0 16px}
.banda{padding:var(--space-16) 0}
.banda-suave{background:var(--soft);border-top:1px solid var(--hairline-soft);padding:var(--space-16) 0}
.rotulo{font:500 12px/1.4 var(--font-sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.h1{margin:14px 0 0;color:var(--ink);font:500 clamp(40px,5.6vw,64px)/1.05 var(--font-serif);letter-spacing:-1.5px;text-wrap:balance}
.h1 em{color:var(--coral-texto)}
.h1m{margin:14px 0 0;color:var(--ink);font:500 clamp(36px,4.6vw,52px)/1.08 var(--font-serif);letter-spacing:-1.2px;text-wrap:balance}
.h2{margin:10px 0 0;color:var(--ink);font:500 36px/1.15 var(--font-serif);letter-spacing:-.5px}
.h3{margin:6px 0 0;color:var(--ink);font:500 28px/1.2 var(--font-serif);letter-spacing:-.3px}
.destaque{font:500 18px/1.45 var(--font-sans);color:var(--body-strong)}
.nota{font-size:14px;color:var(--muted)}
.ligacao{color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:4px}

/* pílulas */
.pilula{display:inline-block;background:var(--card);color:var(--ink);border-radius:var(--radius-pilula);padding:4px 12px;font:500 13px/1.5 var(--font-sans);text-decoration:none}
.pilula.mono{font:500 13px/1.5 var(--font-mono)}
.pilula.coral{background:var(--coral-fundo);color:var(--on-coral);font:500 12px/1.4 var(--font-sans);letter-spacing:1.5px;text-transform:uppercase}

/* botões */
.botao{height:var(--controlo-altura);padding:0 20px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-controlo);border:1px solid var(--hairline);background:var(--campo);color:var(--ink);font:500 14px var(--font-sans);text-decoration:none;cursor:pointer;white-space:nowrap}
.botao:hover{background:var(--soft);color:var(--ink)}
.botao.coral{border:0;background:var(--coral-fundo);color:var(--on-coral)}
.botao.coral:hover{color:var(--on-coral);background:var(--coral-fundo-forte)}
.botao[disabled],.botao.coral[disabled]{background:var(--hairline);color:var(--muted);cursor:not-allowed;border:0}
.botao.mini{height:var(--controlo-mini);padding:0 12px;border-radius:var(--radius-pilula);font-size:13px}
.seta-dia{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--hairline);border-radius:var(--radius-seta);background:var(--campo);color:var(--ink);font:500 20px/1 var(--font-sans);cursor:pointer}
.seta-dia:hover:not([disabled]){background:var(--soft)}
.seta-dia[disabled]{opacity:.35;cursor:not-allowed}

/* campos */
.form{background:var(--card);border-radius:var(--radius-cartao);padding:var(--space-5);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:14px;align-items:end}
.campo{display:grid;gap:6px;min-width:0}
.campo input{height:var(--controlo-altura);width:100%;border:1px solid var(--hairline);border-radius:var(--radius-controlo);background:var(--campo);color:var(--ink);padding:0 14px;font:400 16px var(--font-sans)}
.campo input.mono{font:500 15px var(--font-mono)}
.campo input::placeholder{color:var(--muted);opacity:1}
.campo input:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 3px rgba(204,120,92,.15)}
.segmentos{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:var(--controlo-altura);border:1px solid var(--hairline);border-radius:var(--radius-controlo);background:var(--campo);overflow:hidden}
.segmentos label{position:relative;display:grid;cursor:pointer}
.segmentos label+label{border-left:1px solid var(--hairline)}
.segmentos input{position:absolute;opacity:0;width:1px;height:1px}
.segmentos span{display:grid;place-items:center;font:500 15px var(--font-mono);color:var(--muted)}
.segmentos label:hover span{color:var(--ink);background:var(--soft)}
.segmentos input:checked+span{background:var(--coral-fundo);color:var(--on-coral)}
.segmentos input:focus-visible+span{outline:2px solid var(--coral);outline-offset:-3px}

/* o visto: escolhe uma linha entre várias */
.visto{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--muted-soft);background:transparent;color:var(--on-coral);font:700 13px/1 var(--font-sans);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.visto:hover{border-color:var(--coral)}
.visto[aria-pressed=true]{background:var(--coral-fundo);border-color:var(--coral-fundo)}

/* tabelas */
.tabela-caixa{overflow-x:auto;background:var(--tabela-fundo);border:1px solid var(--hairline);border-radius:var(--radius-cartao);box-shadow:var(--sombra-painel);scrollbar-width:thin;scrollbar-color:transparent transparent}
.tabela-caixa.a-rolar,.tabela-caixa:hover{scrollbar-color:var(--p-tenue) transparent}
.tabela{width:100%;border-collapse:collapse;font-size:14px}
.tabela th,.tabela td{padding:12px;text-align:right}
.tabela thead th{color:var(--muted);font:500 12px/1.4 var(--font-sans);background:var(--soft)}
.tabela tbody tr{border-top:1px solid var(--hairline-soft);font:500 14px var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.tabela tbody th{text-align:left;padding-left:20px;font:500 14px var(--font-sans);color:var(--ink)}
.tabela th:first-child{text-align:left;padding-left:20px}
.tabela tbody th a{text-decoration:none}.tabela tbody th a:hover{text-decoration:underline}
.tabela .sd{color:var(--muted)}
.tabela .foco{background:rgba(204,120,92,.09);box-shadow:inset 1px 0 rgba(204,120,92,.35),inset -1px 0 rgba(204,120,92,.35)}
.tabela thead th.foco{color:var(--coral-texto);font-weight:700}
.tabela tr.ref>th,.tabela tr.ref>td{background:rgba(204,120,92,.09)}
.tabela tr.ref>td.foco{background:rgba(204,120,92,.24);font-weight:700}
.etiqueta-linha{margin-left:10px;font:400 12px/1.35 var(--font-sans);color:var(--muted)}
.etiqueta-linha.ref{color:var(--coral-texto-forte)}

/* o painel: o cartão do produto, com os números */
.painel{background:var(--painel);color:var(--p-texto);border:1px solid var(--painel-linha);border-radius:var(--radius-painel);padding:var(--space-8);display:grid;gap:var(--space-5);min-width:0;box-shadow:var(--sombra-painel)}
.painel .rotulo{color:var(--p-suave)}
.painel .nota{color:var(--p-suave);font-size:13px}
.grelha-n{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--space-3)}
.n-cartao{background:var(--painel-2);border-radius:var(--radius-cartao);padding:var(--space-4);min-width:0}
.n-cartao .r{font:500 12px/1.4 var(--font-sans);color:var(--p-suave)}
.n-cartao .v{margin-top:4px;font:600 26px/1.2 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--p-texto)}
.n-cartao .v.g{font-size:34px;line-height:1.15}
.n-cartao .v small{font:500 13px var(--font-mono);color:var(--p-suave)}

/* avisos e rodapé */
.aviso{background:var(--soft);border:1px solid var(--hairline);border-radius:var(--radius-cartao);padding:12px 16px;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.rodape{background:var(--rodape);color:var(--muted);padding:56px 0;font-size:14px}
.rodape b{font:700 24px/1 var(--font-sans);letter-spacing:-.4px;color:var(--p-texto)}

/* a ficha que aparece ao passar o rato */
.ficha{max-width:380px;padding:12px 14px;border-radius:10px;background:var(--dica-fundo);border:1px solid var(--dica-linha);box-shadow:var(--sombra-dica);font:400 13px/1.35 var(--font-sans);color:var(--p-texto)}
.ficha .ficha-t{display:block;margin-bottom:8px;color:var(--ficha-t);font:600 14px/1.3 var(--font-sans)}
.ficha dl{display:grid;grid-template-columns:auto 1fr;gap:5px 18px;margin:0}
.ficha dt{color:var(--p-suave)}.ficha dd{margin:0}

/* o documento: sempre no modo claro, uma coluna de leitura */
.documento{max-width:760px;margin:0 auto;padding:48px 40px;background:var(--canvas);color:var(--body)}
.documento .cabecalho{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--hairline)}
.documento .cabecalho span{font:500 13px var(--font-mono);color:var(--muted)}
.documento h1{margin:28px 0 0;color:var(--ink);font:500 40px/1.1 var(--font-serif);letter-spacing:-1px;text-wrap:balance}
.documento h2{margin:32px 0 0;color:var(--ink);font:500 28px/1.2 var(--font-serif);letter-spacing:-.3px}
.documento p{margin:12px 0 0;max-width:65ch}
.documento .tabela-caixa{margin-top:18px;box-shadow:none}
.documento .pe{margin-top:36px;padding-top:12px;border-top:1px solid var(--hairline);font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:16px}

@media (max-width:640px){.painel{padding:var(--space-5)}.documento{padding:32px 16px}.h2{font-size:30px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}