:root{
  --sala:#EEF1F3;
  --branco:#FFFFFF;
  --tinta:#131C24;
  --aco:#5A6874;
  --linha:#D3DCE2;
  --linha-forte:#B4C1CA;
  --azul:#2E5FA3;
  --azul-claro:#E7EEF8;
  --roxo:#65409B;
  --roxo-claro:#EFE9F7;
  --ouro:#9A6E12;
  --verde:#1F7A5C;
  --alerta:#A3341F;
  --alerta-claro:#FBEDEA;
  --r:3px;

  /* superfícies e tipos, o que os temas trocam */
  --superficie:#FFFFFF;
  --superficie2:#FBFCFD;
  --painel:#131C24;          /* painel de resultado e gaveta escura */
  --painel-txt:#FFFFFF;
  --painel-fraco:#8FA2B0;
  --painel-linha:rgba(255,255,255,.14);
  --figura:#FFFFFF;
  --marca:#131C24;           /* cor do que representa a marca */
  --promo:#9A6E12;           /* o dourado das promoções */
  --promo-forte:#E4B95E;
  --promo-txt:#6B5210;
  --promo-bg:#FEFAF0;
  --promo-bg2:#FDF6E3;
  --promo-borda:#E2D3A8;
  --promo-borda2:#E7D9B4;
  --promo-trilho:#EDDFBA;
  --acao:#2E5FA3;            /* botões e links */
  --acao-forte:#26518E;
  --acao-claro:#E7EEF8;
  --sel:#65409B;             /* o que está selecionado no seletor */
  --sel-claro:#EFE9F7;
  --fonte:'Archivo',system-ui,sans-serif;
  --fonte-titulo:'Archivo',system-ui,sans-serif;
  --peso-titulo:700;
  --tracking-titulo:-.035em;
  --caixa-titulo:none;
  --raio-cartao:3px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  background:var(--sala); color:var(--tinta);
  font-family:var(--fonte); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-ligatures:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:var(--azul)}
:focus-visible{outline:2px solid var(--roxo);outline-offset:2px}
.env{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- faixa legal ---------- */
.faixa{background:var(--marca);color:color-mix(in srgb,var(--painel-txt) 72%,transparent);font-size:12.5px;padding:7px 0;letter-spacing:.01em}
.faixa strong{color:#fff;font-weight:600}

/* ---------- cabeçalho ---------- */
header{background:var(--superficie);border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:40}
.topo{display:flex;align-items:center;gap:22px;height:66px}
.marca{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--tinta)}
.marca img{height:20px;width:auto;display:block}
.gav-titulo{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600}
.gav-logo{height:22px;width:22px;border-radius:5px;display:block}
.rodape-logo{height:18px;width:auto;margin-bottom:10px;filter:brightness(0) invert(1)}
.marca b{font-family:var(--fonte-titulo);font-size:23px;font-weight:var(--peso-titulo);letter-spacing:-.025em}
.marca span{font-size:11.5px;color:var(--aco);font-weight:500}
.busca{flex:1;position:relative;max-width:430px}
.busca input{width:100%;height:39px;padding:0 12px 0 36px;border:1px solid var(--linha-forte);border-radius:var(--r);background:var(--sala)}
.busca input:focus{background:var(--superficie);border-color:var(--acao);outline:none}
.busca svg{position:absolute;left:11px;top:11px;stroke:var(--aco)}
.sug{position:absolute;top:43px;left:0;right:0;background:var(--superficie);border:1px solid var(--linha-forte);border-radius:var(--r);box-shadow:0 8px 24px rgba(19,28,36,.13);max-height:330px;overflow:auto;z-index:50}
.sug:empty{display:none}
.sug button{display:flex;width:100%;gap:11px;padding:9px 12px;text-align:left;align-items:center;border-bottom:1px solid var(--sala)}
.sug button:hover,.sug button:focus{background:var(--acao-claro)}
.sug .cod{font-size:12.5px;color:var(--acao);font-weight:700;min-width:52px}
.acoes{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn{border:1px solid var(--linha-forte);border-radius:var(--r);padding:8px 14px;font-weight:500;font-size:14px;background:var(--superficie)}
.btn:hover{border-color:var(--tinta)}
.btn-p{background:var(--acao);border-color:var(--acao);color:#fff}
.btn-p:hover{background:var(--acao-forte);border-color:var(--acao-forte)}
.btn-p:disabled{background:var(--linha-forte);border-color:var(--linha-forte);cursor:not-allowed}
.btn-carrinho{position:relative}
.bolha{position:absolute;top:-6px;right:-6px;background:var(--sel);color:#fff;font-size:11px;font-weight:700;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px}

/* ---------- seletor de medida (o herói) ---------- */
.herói{background:var(--branco);border-bottom:1px solid var(--linha);padding:34px 0 38px}
.chapeu{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;align-items:end}
.herói h1{font-family:var(--fonte-titulo);font-size:40px;font-weight:var(--peso-titulo);letter-spacing:var(--tracking-titulo);line-height:1.05;text-transform:var(--caixa-titulo)}
.herói .sub{color:var(--aco);font-size:15.5px;line-height:1.55;max-width:46ch;padding-bottom:4px}
.herói .sub b{color:var(--tinta);font-weight:600}
.familias{display:flex;flex-wrap:wrap;gap:5px;margin-top:16px}
.famsel{display:none;margin-top:20px}
.famsel span{display:block;font-size:12.5px;font-weight:600;color:var(--aco);margin-bottom:5px}
.famsel select{width:100%;height:46px;padding:0 12px;border:1px solid var(--linha-forte);border-radius:var(--r);background:var(--superficie);font-size:15.5px;font-weight:600}
.fampill{border:1px solid var(--linha-forte);background:#fff;border-radius:var(--r);padding:6px 12px;font-size:13px;font-weight:500;color:var(--aco)}
.fampill:hover{border-color:var(--tinta);color:var(--tinta)}
.fampill[aria-pressed="true"]{background:var(--marca);border-color:var(--marca);color:#fff;font-weight:600}
.seletor{display:flex;margin-top:10px;border:1px solid var(--linha-forte);border-radius:var(--raio-cartao);background:var(--superficie);overflow:hidden;min-height:186px}
.eixos{display:flex;flex:1 1 auto;min-width:0}
.col{padding:15px 16px;border-right:1px solid var(--linha);flex:1 1 0;min-width:0}
.col.col-conexao{flex:1 1 0;max-width:260px}
.col.col-diam{flex:1.3 1 0}
.col.col-comp{flex:1.7 1 0}
.eixos .col:last-child{border-right:1px solid var(--linha-forte)}
.col h2{font-size:12.5px;font-weight:600;color:var(--aco);margin-bottom:12px}
.col h2 em{font-style:normal;color:var(--linha-forte);font-weight:400}

.linhas{display:flex;flex-wrap:wrap;gap:6px}
.opc{border:1px solid var(--linha-forte);border-radius:var(--r);padding:7px 11px;font-size:13.5px;font-weight:500;background:var(--superficie);line-height:1.2}
.opc:hover:not(:disabled){border-color:var(--acao);color:var(--acao)}
.opc[aria-pressed="true"]{background:var(--sel);border-color:var(--sel);color:#fff}
.opc:disabled{opacity:.32;cursor:not-allowed}
.opc small{display:block;font-size:10.5px;font-weight:400;opacity:.72}

/* diâmetros como círculos proporcionais */
.discos{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 18px;row-gap:22px}
.disco{flex:0 0 auto}
.disco{display:flex;flex-direction:column;align-items:center;gap:6px}
.disco i{display:block;border-radius:50%;border:2px solid var(--aco);background:var(--sala);transition:none}
.disco span{font-size:12px;font-weight:600;color:var(--aco)}
.disco:hover:not(:disabled) i{border-color:var(--acao)}
.disco[aria-pressed="true"] i{background:var(--sel);border-color:var(--sel)}
.disco[aria-pressed="true"] span{color:var(--sel)}
.disco:disabled{opacity:.28;cursor:not-allowed}

/* comprimentos como barras proporcionais */
.reguas{display:flex;flex-wrap:wrap;align-items:flex-end;gap:11px 16px;row-gap:22px}
.regua{flex:0 0 auto}
.regua{display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:flex-end}
.regua i{display:block;width:14px;border-radius:1px;background:var(--aco);opacity:.42}
.regua span{font-size:11.5px;font-weight:600;color:var(--aco)}
.regua:hover:not(:disabled) i{background:var(--acao);opacity:1}
.regua[aria-pressed="true"] i{background:var(--sel);opacity:1}
.regua[aria-pressed="true"] span{color:var(--sel)}
.regua:disabled{opacity:.28;cursor:not-allowed}

/* painel de resultado */
.resultado{background:var(--painel);color:var(--painel-txt);padding:18px;display:flex;flex-direction:column;flex:0 0 278px}
.resultado .vazio{color:#8A9AA8;font-size:13.5px;margin-top:auto;margin-bottom:auto}
.res-cod{font-size:32px;font-weight:700;letter-spacing:.01em;line-height:1}
.res-nome{font-size:14.5px;margin-top:9px;color:#D3DEE6;line-height:1.35}
.res-preco{margin-top:auto;padding-top:14px;font-size:23px;font-weight:700;line-height:1.15}
.res-preco s{display:block;font-size:14px;font-weight:500;color:var(--painel-fraco);text-decoration-thickness:1.5px}
.res-preco em{font-style:normal;font-size:12px;font-weight:500;color:var(--promo-forte);display:block;margin-top:3px;line-height:1.35}
.res-estoque{font-size:12.5px;margin-top:7px;display:flex;align-items:center;gap:6px;color:#9FE8CB}
.res-estoque.zero{color:#F0A99A}
.res-estoque i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block}
.leques{display:flex;align-items:flex-end;gap:6px;flex-wrap:wrap}
.leque{display:flex;flex-direction:column;align-items:center;gap:5px}
.ang{width:44px;height:46px;overflow:visible}
.ang line{stroke:var(--aco);stroke-width:3;stroke-linecap:round;opacity:.6}
.ang line.ref{stroke-width:1;stroke-dasharray:2 3;opacity:.35}
.ang .arc{fill:none;stroke:var(--aco);stroke-width:1;opacity:.35}
.leque span{font-size:11.5px;font-weight:600;color:var(--aco)}
.leque:hover .ang line{stroke:var(--acao);opacity:1}
.leque[aria-pressed="true"] .ang line{stroke:var(--sel);opacity:1}
.leque[aria-pressed="true"] .ang line.ref,.leque[aria-pressed="true"] .ang .arc{stroke:var(--sel);opacity:.5}
.leque[aria-pressed="true"] span{color:var(--sel)}
.res-ficha{font-size:12px;color:var(--painel-fraco);margin-top:7px;line-height:1.4}
.res-figura{background:var(--figura);border-radius:var(--r);height:136px;display:flex;align-items:center;justify-content:center;gap:6px;padding:5px 8px;margin-bottom:12px;overflow:hidden}
.figura-esc{flex:0 0 auto;border-left:1px solid #E9EEF1;padding-left:6px;display:grid;place-items:center}
.peca-svg{height:124px;width:auto;display:block}
.peca-foto{flex:1 1 auto;min-width:0;max-height:126px;object-fit:contain;mix-blend-mode:multiply}
.peca-svg .peca{fill:#C6D2DA;stroke:#5A6874;stroke-width:1.1;stroke-linejoin:round}
.peca-svg .peca.alt{fill:#E4EAEE}
.peca-svg .rosca{fill:none;stroke:#8B9AA6;stroke-width:.85}
.peca-svg .chao{stroke:#B4C1CA;stroke-width:1;stroke-dasharray:3 3}
.peca-svg .eixo{stroke:#8B9AA6;stroke-width:.9;stroke-dasharray:2 2.5}
.peca-svg .cot{fill:#5A6874;font-size:10px;font-family:'JetBrains Mono',monospace;font-weight:700}
.vazio .conta{display:inline-block;margin-top:8px;color:#7C8D9B;font-size:12px}
.vazio b{color:#E4EDF3;font-weight:600}
.resultado .btn{margin-top:12px;width:100%}
/* ---------- pacotes ---------- */
.pacotes{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap;align-items:stretch}
.pac{border:1px solid var(--promo-borda);background:var(--promo-bg);border-radius:var(--r);padding:9px 13px;display:flex;flex-direction:column;justify-content:center;min-width:150px}
.pac.combo{border-color:var(--linha-forte);background:var(--acao-claro)}
.pac b{font-size:19px;font-weight:700;color:var(--promo);letter-spacing:-.02em;line-height:1.1}
.pac.combo b{color:var(--acao)}
.pac span{font-size:13px;font-weight:600;margin-top:1px}
.pac em{font-style:normal;font-size:11.5px;color:var(--aco);margin-top:2px}
.pac-nota{flex:1 1 220px;align-self:center;font-size:12.5px;color:var(--aco);line-height:1.45;max-width:44ch}
.res-selo{margin-top:9px;background:color-mix(in srgb,var(--promo-forte) 16%,transparent);border:1px solid color-mix(in srgb,var(--promo-forte) 42%,transparent);color:var(--promo-forte);font-size:11.5px;padding:5px 8px;border-radius:var(--r);line-height:1.35}
.res-selo.aviso{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:#C6D3DC}
.res-escada{margin-top:9px;display:flex;flex-wrap:wrap;gap:4px}
.res-escada span{font-size:11.5px;font-weight:700;color:#9FB0BC;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:3px 7px;line-height:1.2}
.res-escada span.on{color:var(--painel);background:var(--promo-forte);border-color:var(--promo-forte)}
.res-escada span.on i{color:#6B5210}
.res-escada i{font-style:normal;display:block;font-size:10px;font-weight:500;color:#7E8E9A}
.res-figura.escura{background:#0E1116}
.res-figura.escura .peca-foto{mix-blend-mode:normal}
.pag{display:flex;align-items:center;gap:6px;margin-bottom:11px;flex-wrap:wrap}
.pag > span{font-size:12.5px;font-weight:600;color:var(--aco);margin-right:2px}
.pag-op{border:1px solid var(--linha-forte);background:var(--superficie);border-radius:var(--r);padding:6px 11px;font-size:13px;font-weight:500}
.pag-op em{font-style:normal;font-weight:700;color:var(--promo)}
.pag-op[aria-pressed="true"]{border-color:var(--marca);background:var(--marca);color:#fff}
.pag-op[aria-pressed="true"] em{color:var(--promo-forte)}
.li .pr s{color:var(--aco)}
.li .pr b.promo{color:var(--promo)}
.li.sem{border-color:#E8B4A8;background:#FDF4F1}
.li-sem{font-size:12px;color:var(--alerta);font-weight:600;margin-top:4px;line-height:1.35}
.li-lim{font-size:12px;color:var(--promo-txt);margin-top:4px;line-height:1.35}
.qtd button:disabled{opacity:.3;cursor:not-allowed}
.bloqueio{background:var(--alerta-claro);border:1px solid #E8B4A8;color:#8C2313;font-size:12.5px;
  padding:9px 11px;border-radius:var(--r);margin-top:11px;line-height:1.4}
.cel.esgotado{color:var(--linha-forte);cursor:not-allowed}
.cel.esgotado:hover{background:none}
.pac-sug{display:flex;align-items:center;gap:9px;justify-content:space-between;font-size:12.5px;color:var(--promo-txt);margin-top:9px;line-height:1.4}
.pac-sug .btn{padding:5px 11px;font-size:12.5px;white-space:nowrap}
.int-avisos{padding:9px 12px;background:#FEFAF0;border-top:1px solid var(--linha);font-size:12px;color:#6B5210;line-height:1.45}
.int-avisos div + div{margin-top:4px}
.marca-novo{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--aco);line-height:1.4;margin-top:2px}
.marca-novo input{width:16px;height:16px;margin-top:1px;flex:0 0 auto}

/* bloco do carrinho */
.pacote{border:1px solid var(--promo-borda);background:var(--promo-bg);border-radius:var(--r);padding:11px 13px;margin-bottom:12px}
.pacote.on{border-color:var(--promo);background:var(--promo-bg2)}
.pac-topo{font-size:11.5px;font-weight:700;color:var(--promo);margin-bottom:8px}
.pac-linha{display:flex;gap:10px;align-items:flex-start;margin-bottom:7px}
.pac-linha b:first-child{font-size:19px;font-weight:700;color:var(--promo);line-height:1.05;min-width:38px}
.pac-linha.combo b:first-child{color:var(--acao)}
.pac-linha span{font-size:13px;line-height:1.4}
.pac-linha em{display:block;font-style:normal;font-size:11.5px;color:var(--aco);margin-top:1px}
.pac-total{border-top:1px solid var(--promo-borda2);margin-top:8px;padding-top:8px;font-size:13.5px;color:#6B5210}
.pac-total b{font-weight:700;color:var(--tinta)}
.pac-preco{border-top:1px solid var(--promo-borda2);margin-top:9px;padding-top:9px;font-size:13px}
.pac-preco > div{display:flex;justify-content:space-between;align-items:baseline;padding:2px 0;color:var(--aco)}
.pac-preco s{color:var(--aco)}
.pac-preco .real b{font-size:17px;font-weight:700;color:var(--tinta)}
.pac-preco .unit{display:block;margin-top:7px;padding-top:7px;border-top:1px dashed var(--promo-borda2)}
.pac-preco .unit > span{font-size:14.5px;color:var(--tinta)}
.pac-preco .unit b{font-weight:700}
.pac-preco .unit em{display:block;font-style:normal;font-size:12px;margin-top:1px}
.pac-preco .unit em b{color:var(--promo);font-weight:700}
.pac-falta{font-size:12.5px;line-height:1.45;color:var(--promo-txt);margin-top:8px}
.pac-falta b{font-weight:700}
.barra{height:5px;background:var(--promo-trilho);border-radius:3px;overflow:hidden;margin-bottom:6px}
.barra i{display:block;height:100%;background:var(--promo);border-radius:3px}
.somas .poupou{color:var(--promo);font-weight:600}

.aviso-regra{background:var(--acao-claro);border-left:3px solid var(--acao);color:var(--acao-forte);font-size:12.5px;padding:8px 11px;margin-top:10px;border-radius:0 var(--r) var(--r) 0}

/* ---------- catálogo ---------- */
main{padding:30px 0 60px}
.abas{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--linha-forte);margin-bottom:22px}
.aba{padding:9px 15px;font-size:14px;font-weight:500;color:var(--aco);border-bottom:2px solid transparent;margin-bottom:-1px}
.aba:hover{color:var(--tinta)}
.aba[aria-selected="true"]{color:var(--tinta);font-weight:600;border-bottom-color:var(--sel)}
.bloco{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-cartao);margin-bottom:16px;overflow:hidden}
.bloco > h3{font-size:16px;font-weight:600;padding:13px 18px;border-bottom:1px solid var(--linha);letter-spacing:-.01em}
.bloco > h3 small{display:block;font-size:12.5px;font-weight:400;color:var(--aco);margin-top:3px}
.rolagem{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:0;text-align:center;border-bottom:1px solid var(--sala);border-right:1px solid var(--sala)}
th{background:var(--superficie2);font-weight:600;color:var(--aco);font-size:12.5px;padding:8px 6px;white-space:nowrap}
th:first-child,td:first-child{text-align:left;padding-left:18px;font-weight:600;white-space:nowrap;background:var(--superficie2)}
td:first-child{padding-top:6px;padding-bottom:6px;color:var(--aco)}
.cel{display:block;width:100%;padding:9px 8px;font-size:13px;font-weight:600;color:var(--acao);line-height:1.25}
.cel:hover{background:var(--acao-claro)}
.cel small{display:block;font-size:11px;font-weight:400;color:var(--aco);line-height:1.3}
.cel small s{color:var(--linha-forte);text-decoration-thickness:1px}
.cel small b{color:var(--promo);font-weight:700}
.cel small i{font-style:normal;color:var(--promo);font-weight:600}
.cel small.sob{color:var(--linha-forte)}
.item .pr small{font-size:12px}
.item .pr s{color:var(--linha-forte)}
.item .pr b{color:var(--promo)}
.item .pr i{font-style:normal;color:var(--promo);font-weight:600}
.sug-pr{font-size:12px;color:var(--aco);text-align:right;white-space:nowrap}
.sug-pr s{color:var(--linha-forte)}
.sug-pr b{color:var(--promo)}
.sug-pr i{font-style:normal;color:var(--promo);font-weight:600}
.cel.no{color:var(--linha-forte);cursor:default;font-weight:400}
.cel.no:hover{background:none}
.lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:0}
.item{padding:11px 14px;border-right:1px solid var(--sala);border-bottom:1px solid var(--sala);text-align:left;display:flex;gap:11px;align-items:flex-start}
.item:hover{background:var(--acao-claro)}
.item .cd{font-size:12.5px;font-weight:700;color:var(--acao);min-width:48px;padding-top:1px}
.item .nm{font-size:13.5px;line-height:1.3}
.item .pr{font-size:12px;color:var(--aco);margin-top:2px}

/* ---------- gaveta do carrinho ---------- */
.veu{position:fixed;inset:0;background:rgba(19,28,36,.45);z-index:60;opacity:0;pointer-events:none;transition:opacity .18s}
.veu.on{opacity:1;pointer-events:auto}
.gaveta{position:fixed;top:0;right:0;bottom:0;width:min(452px,100%);background:var(--sala);z-index:61;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease}
.gaveta.on{transform:none}
.gav-topo{flex:0 0 auto;background:var(--superficie);border-bottom:1px solid var(--linha);padding:16px 20px;display:flex;align-items:center;justify-content:space-between}
.gav-topo h2{font-size:17px;font-weight:600}
html.trava,html.trava body{overflow:hidden;height:100%;overscroll-behavior:none}
.gav-rolagem{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.gav-corpo{padding:14px 20px}
.gav-pe{background:var(--superficie);border-top:1px solid var(--linha);padding:16px 20px}
.gav-vazio{text-align:center;color:var(--aco);padding:48px 20px;font-size:14px}
.li{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r);padding:11px 13px;margin-bottom:8px;display:flex;gap:11px;align-items:flex-start}
.li .cd{font-size:12.5px;font-weight:700;color:var(--acao);min-width:48px}
.li .nm{font-size:13.5px;line-height:1.3;flex:1}
.li .pr{font-size:12.5px;color:var(--aco);margin-top:3px}
.qtd{display:flex;align-items:center;border:1px solid var(--linha-forte);border-radius:var(--r);overflow:hidden}
.qtd button{width:26px;height:27px;font-size:15px;color:var(--aco);line-height:1}
.qtd button:hover{background:var(--sala);color:var(--tinta)}
.qtd span{min-width:28px;text-align:center;font-size:13.5px;font-weight:600}
.lixo{color:var(--aco);font-size:12px;margin-top:5px;text-decoration:underline}
.lixo:hover{color:var(--alerta)}
.somas{font-size:14px}
.somas div{display:flex;justify-content:space-between;padding:3px 0;color:var(--aco)}
.somas .tot{color:var(--tinta);font-weight:700;font-size:18px;border-top:1px solid var(--linha);margin-top:7px;padding-top:9px}
.cep{margin-bottom:9px}
.cep input{width:100%;height:40px;padding:0 12px;border:1px solid var(--linha-forte);border-radius:var(--r);font-size:15px;letter-spacing:.04em}
.cep input:focus{border-color:var(--acao);outline:none}
.entrega{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r);padding:10px 12px;margin-bottom:11px}
.entrega.parcial{color:var(--aco);font-size:12.5px;display:block}
.ent-l b{font-size:17px;font-weight:700;display:block;line-height:1.15}
.ent-l span{font-size:12px;color:var(--aco)}
.ent-d{font-size:12px;color:var(--aco);text-align:right;line-height:1.45;white-space:nowrap}
.nota-uf{font-size:12px;color:var(--aco);background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r);padding:9px 11px;margin-bottom:11px;line-height:1.45}
.nota-uf b{color:var(--tinta)}

/* ---------- modais ---------- */
.modal{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(19,28,36,.5)}
.modal.on{display:flex}
.cx{background:var(--superficie);border-radius:var(--r);width:min(560px,100%);max-height:88vh;overflow-y:auto}
.cx-topo{padding:18px 22px;border-bottom:1px solid var(--linha);display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.cx-topo h2{font-size:18px;font-weight:600;letter-spacing:-.01em}
.cx-topo p{font-size:13.5px;color:var(--aco);margin-top:4px;line-height:1.45}
.cx-corpo{padding:20px 22px}
.cx-pe{padding:0 22px 20px;display:flex;gap:9px;justify-content:flex-end}
.cx-pe.pe-duplo{justify-content:space-between;align-items:center;flex-wrap:wrap}
.cx-pe.pe-duplo span{display:flex;gap:9px}
.campo{margin-bottom:13px}
.campo label{display:block;font-size:12.5px;font-weight:600;color:var(--aco);margin-bottom:4px}
.campo input,.campo select{width:100%;height:38px;padding:0 11px;border:1px solid var(--linha-forte);border-radius:var(--r);background:var(--superficie)}
.campo input:focus,.campo select:focus{border-color:var(--acao);outline:none}
.dupla{display:grid;grid-template-columns:1fr 110px;gap:11px}
.erro{color:var(--alerta);font-size:12.5px;margin-top:5px}
.ok-cro{background:#EAF6F1;border:1px solid #A8D9C6;color:#125C43;font-size:13px;padding:10px 12px;border-radius:var(--r);margin-bottom:14px}
/* espelho interno */
.interno{margin-top:16px;border:1px solid var(--tinta);border-radius:var(--r);overflow:hidden}
.int-topo{background:var(--tinta);color:#E4B95E;font-size:11.5px;font-weight:700;padding:7px 12px}
.int-tab{width:100%;font-size:13px;border-collapse:collapse}
.int-tab td{padding:7px 12px;border-bottom:1px solid var(--sala);text-align:left}
.int-tab td:last-child{text-align:right;font-weight:600;white-space:nowrap}
.int-tab td em{font-style:normal;font-size:11px;color:var(--aco)}
.int-tab .int-tot td{font-weight:700;background:#FBFCFD;border-top:1px solid var(--linha-forte);font-size:14.5px}
.int-res{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;background:#FBFCFD;border-bottom:1px solid var(--linha)}
.int-res span{font-size:11.5px;background:#fff;border:1px solid var(--linha-forte);border-radius:20px;padding:3px 10px;color:var(--aco)}
.int-json{border-radius:0;max-height:200px}
pre.json{background:var(--tinta);color:#C9E3F5;font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.55;padding:14px;border-radius:var(--r);overflow-x:auto;max-height:340px}

/* ---------- rodapé ---------- */
footer{background:var(--marca);color:#9CACB8;padding:38px 0 30px;font-size:13px;line-height:1.6}
.rod-grade{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px}
footer h4{color:#fff;font-size:13px;font-weight:600;margin-bottom:10px}
footer a{color:#9CACB8;text-decoration:none;display:block;padding:2px 0}
footer a:hover{color:#fff}
.legal{border-top:1px solid #2A3742;margin-top:28px;padding-top:18px;font-size:12px;color:#7A8B98}
.legal b{color:#B8C6D0;font-weight:600}
.rt{margin-top:7px}

/* ---------- aviso de demonstração ---------- */
.demo{position:fixed;left:16px;bottom:16px;z-index:55;background:#FFF6D9;border:1px solid #E0C86A;color:#6B5210;font-size:12px;padding:9px 12px;border-radius:var(--r);max-width:290px;line-height:1.45;box-shadow:0 4px 14px rgba(19,28,36,.16)}
.demo button{float:right;margin-left:9px;color:#6B5210;font-weight:700}


/* ============================================================
   TEMAS — paleta real do educacubo.com
   creme #f0e6d3 · vermelho #a92326 · vinho #7c1a1a
   gradiente #3d0808→#5c1010→#7c1a1a · dourado #c8962a
   texto #111111 · Montserrat
   ============================================================ */

/* ---------- A · Vinho sobre creme ---------- */
[data-tema="creme"]{
  --sala:#F0E6D3; --superficie:#FFFDF8; --superficie2:#FAF4E8;
  --tinta:#111111; --aco:#6E6255; --linha:#E1D4BC; --linha-forte:#C9B896;
  --marca:#7C1A1A; --painel:#7C1A1A; --painel-txt:#FFF6E8; --painel-fraco:#D8B8A6;
  --painel-linha:rgba(255,255,255,.18); --figura:#FFFDF8;
  --promo:#9B7010; --promo-forte:#E7C067; --promo-txt:#6B5210;
  --promo-bg:#FBF2DC; --promo-bg2:#F7E9C6; --promo-borda:#E0CB9A;
  --promo-borda2:#E6D5AC; --promo-trilho:#E6D5AC;
  --acao:#A92326; --acao-forte:#8C1B1E; --acao-claro:#F7E5E2;
  --sel:#7C1A1A; --sel-claro:#F3E3DF;
  --fonte:'Montserrat',system-ui,sans-serif;
  --fonte-titulo:'Montserrat',system-ui,sans-serif;
  --peso-titulo:800; --tracking-titulo:-.03em; --raio-cartao:6px;
}
[data-tema="creme"] .herói{background:var(--superficie);border-bottom:1px solid var(--linha)}
[data-tema="creme"] header{border-bottom:1px solid var(--linha)}
[data-tema="creme"] .btn-p{border-radius:5px}

/* ---------- B · Campanha, escuro como os cartazes ---------- */
[data-tema="campanha"]{
  --sala:#12080A; --superficie:#1D1013; --superficie2:#241417;
  --tinta:#F6EDE4; --aco:#A08C86; --linha:#33201F; --linha-forte:#4A2B29;
  --marca:#3D0808; --painel:#0C0405; --painel-txt:#FFF6E8; --painel-fraco:#A08C86;
  --painel-linha:rgba(255,255,255,.12); --figura:#FFFFFF;
  --promo:#C8962A; --promo-forte:#EBC46B; --promo-txt:#E7C878;
  --promo-bg:#241713; --promo-bg2:#2E1C14; --promo-borda:#5A3D18;
  --promo-borda2:#4A3316; --promo-trilho:#3E2A14;
  --acao:#A92326; --acao-forte:#C42D30; --acao-claro:#2A1315;
  --sel:#C8962A; --sel-claro:#2A1E10;
  --fonte:'Montserrat',system-ui,sans-serif;
  --fonte-titulo:'Montserrat',system-ui,sans-serif;
  --peso-titulo:800; --tracking-titulo:-.02em; --raio-cartao:6px;
}
[data-tema="campanha"] .herói{background:linear-gradient(140deg,#3D0808 0%,#5C1010 48%,#7C1A1A 100%);border-bottom:none}
[data-tema="campanha"] header{background:#0C0405;border-bottom:1px solid var(--linha)}
[data-tema="campanha"] .busca input{background:#1D1013;border-color:#4A2B29;color:#F6EDE4}
[data-tema="campanha"] .fampill,[data-tema="campanha"] .opc,
[data-tema="campanha"] .pag-op,[data-tema="campanha"] .btn{color:#D8C4BC;background:#1D1013;border-color:#4A2B29}
[data-tema="campanha"] .fampill:hover,[data-tema="campanha"] .opc:hover:not(:disabled),
[data-tema="campanha"] .btn:hover{color:#FFF6E8;border-color:#8A5A50}
[data-tema="campanha"] .opc[aria-pressed="true"],
[data-tema="campanha"] .fampill[aria-pressed="true"],
[data-tema="campanha"] .pag-op[aria-pressed="true"]{color:#12080A;background:var(--promo);border-color:var(--promo)}
[data-tema="campanha"] .btn-p{color:#fff;background:var(--acao);border-color:var(--acao)}
[data-tema="campanha"] .faixa{background:#5C1010}
[data-tema="campanha"] .aba{color:#A08C86}
[data-tema="campanha"] .aba[aria-selected="true"]{color:#FFF6E8}
[data-tema="campanha"] .pac.combo{background:#241417;border-color:#4A2B29}
[data-tema="campanha"] .pac.combo b{color:#E07A5F}
[data-tema="campanha"] .pac-nota,[data-tema="campanha"] .herói .sub{color:#D6BFB6}
[data-tema="campanha"] .herói .sub b{color:#FFF6E8}
[data-tema="campanha"] .col h2{color:#B49E92}
[data-tema="campanha"] .regua i,[data-tema="campanha"] .ang line{stroke:#8A7268}
[data-tema="campanha"] .regua i{background:#8A7268}
[data-tema="campanha"] .disco span,[data-tema="campanha"] .regua span,
[data-tema="campanha"] .leque span{color:#B49E92}
[data-tema="campanha"] .disco i{background:#241417;border-color:#6E5A4A}
[data-tema="campanha"] th{color:#B49E92}
[data-tema="campanha"] .cel small s,[data-tema="campanha"] .cel.no{color:#6B564E}
[data-tema="campanha"] .gav-corpo{background:#12080A}
[data-tema="campanha"] .veu{background:rgba(0,0,0,.62)}
[data-tema="campanha"] .peca-foto{mix-blend-mode:normal}

/* ---------- C · Clínico com sotaque vinho ---------- */
[data-tema="clinico"]{
  --sala:#F4F2EE; --superficie:#FFFFFF; --superficie2:#FAF8F5;
  --tinta:#111111; --aco:#6B6660; --linha:#E4E0D8; --linha-forte:#CFC9BE;
  --marca:#111111; --painel:#1A1412; --painel-txt:#FFFFFF; --painel-fraco:#9C918A;
  --figura:#FFFFFF;
  --promo:#9B7010; --promo-forte:#D9AE4E; --promo-txt:#6B5210;
  --promo-bg:#FDF8EC; --promo-bg2:#FAF0D8; --promo-borda:#E6D8B4;
  --promo-borda2:#EADEC0; --promo-trilho:#EDE2C6;
  --acao:#A92326; --acao-forte:#8C1B1E; --acao-claro:#FAEDEB;
  --sel:#A92326; --sel-claro:#FAEDEB;
  --fonte:'Montserrat',system-ui,sans-serif;
  --fonte-titulo:'Montserrat',system-ui,sans-serif;
  --peso-titulo:700; --tracking-titulo:-.025em; --raio-cartao:3px;
}
[data-tema="clinico"] .herói h1{font-size:36px}

/* ---------- D · Editorial dividido ---------- */
[data-tema="editorial"]{
  --sala:#EFE7DA; --superficie:#FFFFFF; --superficie2:#F8F3EA;
  --tinta:#111111; --aco:#6E6558; --linha:#E0D6C4; --linha-forte:#C6B9A2;
  --marca:#3D0808; --painel:#3D0808; --painel-txt:#FBF1E4; --painel-fraco:#C4A79A;
  --figura:#FFFFFF;
  --promo:#8C6410; --promo-forte:#E7C067; --promo-txt:#5E4610;
  --promo-bg:#FFFFFF; --promo-bg2:#FBF3E1; --promo-borda:#D9C79E;
  --promo-borda2:#E3D5B4; --promo-trilho:#E3D5B4;
  --acao:#7C1A1A; --acao-forte:#5C1010; --acao-claro:#F6E9E4;
  --sel:#C8962A; --sel-claro:#FBF1DC;
  --fonte:'Montserrat',system-ui,sans-serif;
  --fonte-titulo:'Montserrat',system-ui,sans-serif;
  --peso-titulo:800; --tracking-titulo:-.045em; --caixa-titulo:uppercase; --raio-cartao:0px;
}
[data-tema="editorial"] .herói{background:var(--superficie);border-bottom:2px solid #3D0808}
[data-tema="editorial"] .herói h1{font-size:34px;line-height:1.02}
[data-tema="editorial"] .seletor,[data-tema="editorial"] .bloco,
[data-tema="editorial"] .pac,[data-tema="editorial"] .pacote{border-radius:0}
[data-tema="editorial"] .btn,[data-tema="editorial"] .opc,
[data-tema="editorial"] .fampill,[data-tema="editorial"] .pag-op{border-radius:0}
[data-tema="editorial"] .fampill[aria-pressed="true"]{background:#3D0808;border-color:#3D0808}
[data-tema="editorial"] .opc[aria-pressed="true"]{color:#3D0808}
[data-tema="editorial"] .aba[aria-selected="true"]{border-bottom-width:3px}
[data-tema="editorial"] .res-selo{border-radius:0}

/* ---------- ativação de cadastro ---------- */
.cx-ativ{width:min(520px,100%)}
.tr{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
.tr span{font-size:11px;font-weight:600;color:var(--aco);background:var(--sala);
  border-radius:20px;padding:4px 10px;white-space:nowrap}
.tr span.agora{background:var(--marca);color:#fff}
.tr span.ok{background:var(--acao-claro);color:var(--acao)}
.ficha{background:var(--sala);border-radius:var(--r);padding:11px 13px;margin-bottom:15px}
.ficha > div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:3px 0}
.ficha span{font-size:12.5px;color:var(--aco)}
.ficha b{font-size:14px;font-weight:600;text-align:right}
.antes{font-size:11.5px;color:var(--aco);margin-top:4px;line-height:1.4}
.antes.vazio{color:var(--alerta)}
.dica{font-size:12.5px;color:var(--aco);line-height:1.45;margin-top:12px}
.grande{font-size:20px;letter-spacing:.22em;text-align:center}
.grande.cod{letter-spacing:.36em}
.aviso-box{background:var(--promo-bg);border:1px solid var(--promo-borda);color:var(--promo-txt);
  font-size:12.5px;line-height:1.5;padding:10px 12px;border-radius:var(--r);margin-bottom:14px}
.demo-cod{background:#EEF2F6;border:1px dashed #B9C7D4;color:#3E5A72;font-size:12px;
  padding:9px 11px;border-radius:var(--r);margin-top:11px;line-height:1.45}
.forca{display:flex;align-items:center;gap:4px;margin-top:7px}
.forca i{flex:1;height:4px;border-radius:2px;background:var(--linha-forte)}
.forca span{font-size:11.5px;color:var(--aco);margin-left:6px;min-width:66px}
.forca.f1 i:nth-child(-n+1),.forca.f2 i:nth-child(-n+2){background:#C9922B}
.forca.f3 i:nth-child(-n+3),.forca.f4 i{background:#1F7A5C}
.forca.f1 span{color:#A3341F}

/* ---------- painel de dados ---------- */
.dd-placar{display:flex;gap:10px;padding:16px 18px 4px;flex-wrap:wrap}
.dd-c{flex:1 1 220px;border:1px solid #DCE3E8;background:#fff;border-radius:4px;padding:10px 14px}
.dd-c.on{border-color:#A8D9C6;background:#F3FAF7}
.dd-c b{display:block;font-size:14px;margin-bottom:3px}
.dd-ok{font-size:12px;color:#187A57}
.dd-vazio{font-size:12px;color:#8C9AA6}
.dd-c em{display:block;font-style:normal;font-size:11.5px;color:#5A6874;margin-top:3px}
.dd-abas{margin:14px 18px 0}
.dd-corpo{margin:0 18px;background:#fff;border:1px solid #DCE3E8;border-radius:4px;padding:16px 18px}
.dd-p{font-size:13.5px;line-height:1.55;color:#3E4A55;margin-bottom:12px;max-width:78ch}
.dd-cab{font-size:12px;color:#5A6874;margin-bottom:6px;margin-top:12px}
.dd-cab code{background:#EEF2F6;border-radius:3px;padding:1px 5px;font-family:'JetBrains Mono',monospace;font-size:11.5px}
.dd-corpo textarea{width:100%;height:190px;font-family:'JetBrains Mono',monospace;font-size:12px;
  border:1px solid #C5D0D8;border-radius:4px;padding:10px;resize:vertical;line-height:1.5}
.dd-corpo textarea.menor{height:120px}
.dd-acoes{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.dd-acoes.esq{justify-content:flex-start;margin-bottom:4px}
.dd-div{display:flex;align-items:center;gap:9px;font-size:13px;color:#3E4A55;margin-top:12px}
.dd-div select{height:34px;border:1px solid #C5D0D8;border-radius:4px;padding:0 8px;background:#fff}
.dd-ret{margin:14px 18px;padding:13px 15px;border-radius:4px;font-size:13.5px;line-height:1.55}
.dd-ret.bom{background:#EAF6F1;border:1px solid #A8D9C6;color:#125C43}
.dd-ret.ruim{background:#FBEDEA;border:1px solid #E8B4A8;color:#8C2313}
.dd-ret ul{margin:7px 0 0 18px}
.dd-ret li{margin-bottom:3px}

/* ---------- painel de conferência ---------- */
.conferencia{position:fixed;inset:0;z-index:95;background:#F4F6F7;overflow-y:auto;padding:0 0 40px;display:none;font-family:'Archivo',system-ui,sans-serif}
.conferencia.on{display:block}
.cf-topo{position:sticky;top:0;z-index:2;background:#131C24;color:#fff;display:flex;align-items:center;gap:12px;padding:12px 18px}
.cf-topo b{font-size:16px}
.cf-topo span{font-size:12.5px;color:#9CACB8;margin-right:auto}
.cf-topo .btn{background:none;border-color:rgba(255,255,255,.3);color:#fff}
.cf-topo .btn:hover{border-color:#fff}
.cf-placar{display:flex;gap:10px;padding:16px 18px 6px}
.cf-p{border-radius:4px;padding:9px 16px;min-width:130px;border:1px solid}
.cf-p b{display:block;font-size:24px;font-weight:700;line-height:1.1}
.cf-p span{font-size:12px}
.cf-p.grave{background:#FBEDEA;border-color:#E8B4A8;color:#8C2313}
.cf-p.atencao{background:#FDF6E3;border-color:#E2D3A8;color:#6B5210}
.cf-p.pendente{background:#EEF2F6;border-color:#CBD8E2;color:#3E5A72}
.cf-p.confirmado{background:#EAF6F1;border-color:#A8D9C6;color:#125C43}
.cf-a.confirmado .cf-r{color:#187A57}
.cf-p.zero{opacity:.45}
.cf-lista{margin:10px 18px 0;background:#fff;border:1px solid #DCE3E8;border-radius:4px;max-height:280px;overflow-y:auto}
.cf-a{display:flex;gap:12px;padding:8px 13px;border-bottom:1px solid #F0F3F5;font-size:13px;line-height:1.4}
.cf-r{font-weight:700;min-width:190px;flex:0 0 auto}
.cf-a.grave .cf-r{color:#A3341F}
.cf-a.atencao .cf-r{color:#9A6E12}
.cf-a.pendente .cf-r{color:#3E5A72}
.cf-d{color:#4A5964}
.cf-ok{margin:10px 18px;background:#EAF6F1;border:1px solid #A8D9C6;color:#125C43;padding:12px 14px;border-radius:4px;font-size:14px}
.cf-filtros{display:flex;gap:8px;align-items:center;padding:16px 18px 8px}
.cf-filtros input{flex:1;max-width:420px;height:36px;padding:0 11px;border:1px solid #C5D0D8;border-radius:4px}
.cf-filtros select{height:36px;padding:0 9px;border:1px solid #C5D0D8;border-radius:4px;background:#fff}
.cf-filtros span{font-size:12.5px;color:#5A6874}
.cf-tab{margin:0 18px;background:#fff;border:1px solid #DCE3E8;border-radius:4px;overflow:auto;max-height:52vh}
.cf-tab table{width:100%;border-collapse:collapse;font-size:12.5px}
.cf-tab th{position:sticky;top:0;background:#EDF1F4;text-align:left;padding:8px 9px;font-size:11.5px;white-space:nowrap;border-bottom:1px solid #DCE3E8}
.cf-tab td{padding:6px 9px;border-bottom:1px solid #F2F5F7;text-align:left;white-space:nowrap}
.cf-tab td:nth-child(3){white-space:normal;min-width:230px}
.cf-tab tr.prov{background:#FFFBEC}
.cf-mais,.cf-nota{padding:10px 18px;font-size:12px;color:#5A6874}


@media(max-width:1000px){
  .seletor{flex-direction:column}
  .eixos{flex-wrap:wrap}
  .col{flex:1 1 46%;border-bottom:1px solid var(--linha)}
  .resultado{flex:1 1 auto}
  .rod-grade{grid-template-columns:1fr 1fr}
  .chapeu{grid-template-columns:1fr;gap:12px;align-items:start}
  .herói h1{font-size:33px}
  .herói .sub{max-width:60ch;padding-bottom:0}
}
@media(max-width:660px){
  .topo{height:auto;padding:11px 0;flex-wrap:wrap;gap:10px}
  .marca b{font-size:20px}
  .marca span{display:none}
  .busca{order:3;max-width:none;flex-basis:100%}
  .acoes{gap:6px}
  .acoes .btn{padding:8px 11px;font-size:13.5px}
  /* wrap numa coluna quebra em COLUNAS laterais e estoura a largura;
     no celular os eixos empilham de verdade */
  .eixos{flex-direction:column;flex-wrap:nowrap}
  .col{flex:0 0 auto;width:100%;padding:13px 16px}
  /* diâmetro e comprimento quebram em linha (igual ao desktop) — o celular
     só precisa de menos gap para caber mais por linha */
  .discos,.reguas{gap:12px 14px;row-gap:18px}
  .leques{overflow-x:auto;padding-bottom:3px;flex-wrap:nowrap}
  .leques::-webkit-scrollbar{display:none}
  /* no celular a faixa de pacotes rola de lado: em pilha ela empurrava
     o seletor para fora da primeira tela, que é o que o cliente veio usar */
  .pacotes{flex-wrap:nowrap;overflow-x:auto;margin:16px -14px 0;padding:0 14px 2px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .pacotes::-webkit-scrollbar{display:none}
  .pac{flex:0 0 auto;min-width:158px;scroll-snap-align:start}
  .pac-nota{display:none}
  .familias{display:none}
  .famsel{display:block}
  .seletor{margin-top:12px}
  .herói .sub{font-size:14px}
  .herói{padding:24px 0 28px}
  .herói h1{font-size:26px;letter-spacing:-.03em}
  .herói .sub{font-size:14.5px}
  .rod-grade{grid-template-columns:1fr;gap:24px}
  .demo{left:10px;right:10px;max-width:none;bottom:10px}
  .gaveta{width:100%}
  th:first-child,td:first-child{padding-left:12px}
  .env{padding:0 14px}
  .lista{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}