/* =========================================================
   WheyProtein · Calculadoras — kit de CSS

   O kit visual das sete calculadoras do portal. Elas são a mesma
   ferramenta com outra conta dentro: no protótipo, o CSS das sete
   era byte a byte idêntico. Aqui ele existe UMA vez.

   TUDO escopado em .wpm-calc, que vive dentro do .wpm-fer da
   página. Nenhum :root, nenhum seletor de elemento nu, nenhuma
   largura de página, nenhuma fonte própria, nenhum hex.

   As cores, o raio e as fontes vêm do modelo de página Ferramenta
   (PADRAO_FERRAMENTAS §3 e §11.2). Aqui só se usa o apelido curto.

   Números em Inter com tabular-nums: o portal não hospeda fonte
   monoespaçada, e a decisão sobre JetBrains Mono continua aberta
   (HANDOFF_FERRAMENTAS §5.1). Com tabular-nums os dígitos ficam
   com a mesma largura, que é o que a leitura de número pede.
   ========================================================= */

.wpm-calc{
  /* Apelidos do modelo Ferramenta, com fallback ao preset do theme.json
     para a ferramenta não ficar invisível numa página sem tpl-ferramenta.css. */
  --tom:var(--fer2, var(--wp--preset--color--fer-2));
  --tom-forte:var(--fer3, var(--wp--preset--color--fer-3));
  --tom-claro:var(--fer, var(--wp--preset--color--fer));
  --num:var(--corpo);
  /* A LARGURA NÃO MORA AQUI. Quem decide a coluna da ferramenta é a página,
     na variável --fer-col do slot (PADRAO_FERRAMENTAS §2: nenhuma largura de
     página vinda de plugin). Assim a ferramenta e a assinatura embaixo dela
     ficam na mesma coluna, sem o plugin saber da assinatura. */
  color:var(--tinta);
  font-family:var(--corpo);
}
.wpm-calc *{box-sizing:border-box}

/* ---------- ABAS ---------- */
.wpm-calc .wpm-abas{display:flex; gap:2px; border-bottom:1px solid var(--linha); margin-bottom:24px}
.wpm-calc .wpm-aba{flex:0 0 auto; background:none; border:0; border-bottom:2px solid transparent;
  color:var(--tinta2); padding:9px 14px 10px; font-family:var(--corpo); font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap}
.wpm-calc .wpm-aba:hover{color:var(--tinta)}
.wpm-calc .wpm-aba[aria-selected="true"]{color:var(--tom); border-bottom-color:var(--tom)}
.wpm-calc .wpm-aba:focus-visible{outline:2px solid var(--tom); outline-offset:2px}
.wpm-calc .wpm-tela{display:none}
.wpm-calc .wpm-tela.wpm-on{display:block}

/* ---------- CARTÃO ---------- */
.wpm-calc .wpm-card{background:var(--papel); border:1px solid var(--linha); border-top:3px solid var(--tom-claro);
  border-radius:var(--r); padding:24px}
.wpm-calc h3{font-family:var(--display); font-weight:700; font-size:19px; color:var(--tom); margin:0 0 8px}
.wpm-calc p{margin:0 0 10px; line-height:1.6; font-size:15px; color:var(--tinta)}

/* ---------- ONBOARDING EM SLIDES ---------- */
.wpm-calc .wpm-slide{display:none}
.wpm-calc .wpm-slide.wpm-on{display:block}
.wpm-calc .wpm-formula{background:var(--gesso); border:1px solid var(--linha); border-radius:var(--r);
  padding:14px 16px; margin:12px 0; font-family:var(--num); font-variant-numeric:tabular-nums;
  font-size:14px; text-align:center; line-height:1.7}
.wpm-calc .wpm-formula b{color:var(--tom)}
.wpm-calc .wpm-dots{display:flex; gap:6px; justify-content:center; margin:18px 0 14px}
.wpm-calc .wpm-dots span{width:7px; height:7px; border-radius:100px; background:var(--linha)}
.wpm-calc .wpm-dots span.wpm-on{background:var(--tom)}
.wpm-calc .wpm-nav{display:flex; gap:10px; align-items:center}

/* ---------- BOTÕES ---------- */
.wpm-calc .wpm-btn{font-family:var(--corpo); font-weight:600; font-size:15px; border-radius:var(--r);
  padding:12px 18px; cursor:pointer; border:0; transition:background .16s ease}
.wpm-calc .wpm-btn:focus-visible{outline:2px solid var(--tom); outline-offset:2px}
.wpm-calc .wpm-btn.wpm-prim{background:var(--tom); color:var(--papel); flex:1}
.wpm-calc .wpm-btn.wpm-prim:hover{background:var(--tom-forte)}
.wpm-calc .wpm-btn.wpm-prim:disabled{background:var(--linha2); color:var(--tinta2); cursor:not-allowed}
.wpm-calc .wpm-btn.wpm-ghost{background:transparent; color:var(--tom); border:1.5px solid var(--linha)}
.wpm-calc .wpm-btn.wpm-ghost:hover{background:var(--gesso)}
.wpm-calc .wpm-btn.wpm-start{background:var(--tom-claro); color:var(--papel); flex:1; padding:14px 18px}
.wpm-calc .wpm-btn.wpm-start:hover{background:var(--tom)}
.wpm-calc .wpm-pular{display:block; margin:12px auto 0; background:none; border:0; color:var(--tinta2);
  font-family:var(--corpo); font-size:13px; text-decoration:underline; cursor:pointer}
.wpm-calc .wpm-pular:focus-visible{outline:2px solid var(--tom); outline-offset:2px}

/* ---------- CAMPOS ---------- */
.wpm-calc .wpm-q{display:block; font-family:var(--display); font-weight:700; font-size:19px;
  margin:22px 0 4px; color:var(--tinta)}
.wpm-calc .wpm-q:first-child{margin-top:0}
.wpm-calc .wpm-dica{font-size:13px; color:var(--tinta2); margin-bottom:12px}
.wpm-calc .wpm-duo{display:flex; gap:12px; flex-wrap:wrap}
.wpm-calc .wpm-duo .wpm-campo{flex:1; min-width:150px}
.wpm-calc .wpm-campo{margin-bottom:6px}
.wpm-calc .wpm-campo input{width:100%; padding:12px 14px; font-family:var(--num);
  font-variant-numeric:tabular-nums; font-size:17px; border:1px solid var(--linha2);
  border-radius:var(--r); background:var(--papel); color:var(--tinta); outline:none;
  -moz-appearance:textfield; appearance:textfield}
.wpm-calc .wpm-campo input::-webkit-outer-spin-button,
.wpm-calc .wpm-campo input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.wpm-calc .wpm-campo input.wpm-txt{font-size:15px; font-variant-numeric:normal}
.wpm-calc .wpm-campo input:focus-visible{border-color:var(--tom); outline:2px solid var(--tom); outline-offset:1px}
.wpm-calc .wpm-uni{font-size:12px; color:var(--tinta2); margin-top:5px}
.wpm-calc .wpm-acao{margin-top:24px}
.wpm-calc .wpm-err{color:var(--tom); font-size:13px; margin:8px 0 0; min-height:1em}

/* ---------- RESULTADO ---------- */
.wpm-calc .wpm-hero{background:var(--tom); border-radius:var(--r); padding:20px; margin-bottom:12px; text-align:center}
.wpm-calc .wpm-hero .wpm-rot{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--heronclaro); margin-bottom:5px}
.wpm-calc .wpm-hero .wpm-big{font-family:var(--num); font-variant-numeric:tabular-nums; font-weight:700;
  font-size:40px; line-height:1; color:var(--papel)}
.wpm-calc .wpm-hero .wpm-big small{font-size:17px; font-weight:500}
.wpm-calc .wpm-hero .wpm-faixa{font-size:12.5px; color:var(--heronclaro); margin:8px 0 0}
.wpm-calc .wpm-conta{background:var(--gesso); border:1px solid var(--linha); border-radius:var(--r);
  padding:13px 15px; margin-bottom:14px; font-family:var(--num); font-variant-numeric:tabular-nums;
  font-size:13.5px; text-align:center; line-height:1.7}
.wpm-calc .wpm-conta .wpm-lbl{font-family:var(--corpo); font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--tinta2); margin-bottom:6px}
.wpm-calc .wpm-conta b{color:var(--tom)}
.wpm-calc .wpm-leitura h4{font-family:var(--corpo); font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--tinta2); margin:16px 0 8px}
.wpm-calc .wpm-item{display:flex; gap:10px; padding:11px 0; border-top:1px solid var(--linha);
  font-size:14px; line-height:1.55}
.wpm-calc .wpm-item:first-of-type{border-top:none}
.wpm-calc .wpm-item .wpm-mk{flex:0 0 auto; width:8px; height:8px; border-radius:50%; margin-top:7px;
  background:var(--castanho)}
.wpm-calc .wpm-item.wpm-calmo .wpm-mk{background:var(--sage)}
.wpm-calc .wpm-item.wpm-at .wpm-mk{background:var(--castanho)}
.wpm-calc .wpm-item.wpm-forte .wpm-mk{background:var(--vinho)}
.wpm-calc .wpm-refazer{background:transparent; color:var(--tom); border:1.5px solid var(--linha);
  width:100%; margin-top:10px; border-radius:var(--r); padding:12px; cursor:pointer;
  font-family:var(--corpo); font-weight:600; font-size:15px}
.wpm-calc .wpm-refazer:hover{background:var(--gesso)}

/* ---------- LEITURA EM SLIDES, DEPOIS DO RESULTADO ---------- */
.wpm-calc .wpm-pos{margin-top:16px; border:1px solid var(--linha); border-radius:var(--r);
  background:var(--papel); overflow:hidden}
.wpm-calc .wpm-pos-topo{background:var(--gesso); border-bottom:1px solid var(--linha); padding:11px 16px;
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta2)}
.wpm-calc .wpm-pos-corpo{padding:16px}
.wpm-calc .wpm-pslide{display:none}
.wpm-calc .wpm-pslide.wpm-on{display:block}
.wpm-calc .wpm-pslide .wpm-pt{font-family:var(--display); font-weight:700; font-size:18px;
  color:var(--tom); margin-bottom:6px}
.wpm-calc .wpm-cen{display:inline-block; font-size:12px; font-weight:600; border-radius:100px;
  padding:3px 11px; margin-bottom:9px}
.wpm-calc .wpm-cen.wpm-ok{background:var(--sageclaro); color:var(--sage)}
.wpm-calc .wpm-cen.wpm-mid{background:var(--areia); color:var(--castanho)}
.wpm-calc .wpm-cen.wpm-low{background:var(--claro); color:var(--vinho)}
.wpm-calc .wpm-pos-nav{display:flex; align-items:center; gap:10px; padding:0 16px 16px}
.wpm-calc .wpm-pdots{display:flex; gap:6px; flex:1}
.wpm-calc .wpm-pdots span{width:7px; height:7px; border-radius:100px; background:var(--linha)}
.wpm-calc .wpm-pdots span.wpm-on{background:var(--tom)}
.wpm-calc .wpm-pos-nav button{background:transparent; border:1.5px solid var(--linha); border-radius:var(--r);
  padding:8px 14px; font-family:var(--corpo); font-weight:600; font-size:13.5px; color:var(--tom); cursor:pointer}
.wpm-calc .wpm-pos-nav button:disabled{opacity:.4; cursor:default}

/* ---------- TELA DE SALVAGUARDA ---------- */
.wpm-calc .wpm-salvaguarda{margin:12px 0 0; font-size:12px; color:var(--tinta2); font-style:italic;
  line-height:1.5}

/* ---------- ABA "COMO FUNCIONA" ---------- */
.wpm-calc .wpm-como p{font-size:14.5px; color:var(--tinta2); line-height:1.6; margin-bottom:10px}
.wpm-calc .wpm-como h3{margin:22px 0 6px}
.wpm-calc .wpm-como ul{margin:0 0 10px; padding-left:18px}
.wpm-calc .wpm-como li{font-size:14px; color:var(--tinta2); line-height:1.55; margin:4px 0}
.wpm-calc .wpm-como .wpm-num{font-family:var(--num); font-variant-numeric:tabular-nums;
  background:var(--gesso); color:var(--tom); padding:1px 6px; border-radius:var(--r)}

@media (prefers-reduced-motion:reduce){
  .wpm-calc *{transition:none !important}
}

/* ---------- ESCOLHA EM BOTÕES ---------- */
.wpm-calc .wpm-opts{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px}
.wpm-calc .wpm-opt{border:1px solid var(--linha); background:var(--papel); border-radius:var(--r);
  padding:11px 16px; font-family:var(--corpo); font-size:14px; font-weight:500; color:var(--tinta);
  cursor:pointer; transition:border-color .16s ease, background .16s ease, color .16s ease}
.wpm-calc .wpm-opt:hover{border-color:var(--linha2)}
.wpm-calc .wpm-opt:focus-visible{outline:2px solid var(--tom); outline-offset:2px}
.wpm-calc .wpm-opt[aria-pressed="true"]{border-color:var(--tom); background:var(--gesso); color:var(--tom)}

/* ---------- GRUPO QUE APARECE CONFORME A ESCOLHA ---------- */
.wpm-calc .wpm-oculto{display:none}

/* ---------- NOTA DE MÉTODO E AVISO DE CAMINHO SEM SAÍDA ---------- */
.wpm-calc .wpm-metodo-nota{background:var(--gesso); border:1px solid var(--linha); border-radius:var(--r);
  padding:10px 13px; font-size:12.5px; color:var(--tinta2); line-height:1.5; margin:14px 0 4px}
.wpm-calc .wpm-aviso-box{background:var(--areia); border:1px solid var(--areia-b); border-radius:var(--r);
  padding:14px 16px; font-size:14px; color:var(--tinta); line-height:1.6; margin:14px 0 4px}

/* ---------- ESCOLHA MÚLTIPLA EM PÍLULAS ---------- */
.wpm-calc .wpm-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px}
.wpm-calc .wpm-chip{border:1px solid var(--linha); background:var(--papel); border-radius:100px;
  padding:9px 15px; font-family:var(--corpo); font-size:14px; font-weight:500; color:var(--tinta);
  cursor:pointer; transition:border-color .16s ease, background .16s ease, color .16s ease}
.wpm-calc .wpm-chip:hover{border-color:var(--linha2)}
.wpm-calc .wpm-chip:focus-visible{outline:2px solid var(--tom); outline-offset:2px}
.wpm-calc .wpm-chip[aria-pressed="true"]{border-color:var(--tom); background:var(--gesso); color:var(--tom)}

/* ---------- LINK DE APOIO ---------- */
.wpm-calc .wpm-mini-link{background:none; border:0; color:var(--tom); font-family:var(--corpo);
  font-size:12.5px; text-decoration:underline; cursor:pointer; padding:0; margin:2px 0 8px}
.wpm-calc .wpm-mini-link:focus-visible{outline:2px solid var(--tom); outline-offset:2px}

/* ---------- O QUE FAZER AGORA ---------- */
.wpm-calc .wpm-fazer{margin-top:14px; background:var(--areia); border:1px solid var(--areia-b);
  border-radius:var(--r); padding:13px 15px; font-size:14px; line-height:1.6; color:var(--tinta)}

/* ---------- ITEM COM ETIQUETA DE GRUPO (guia de adoçantes) ---------- */
.wpm-calc .wpm-item .wpm-grupo{display:inline-block; margin-left:8px; font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; color:var(--tinta2); border:1px solid var(--linha);
  border-radius:100px; padding:2px 9px; vertical-align:middle}
.wpm-calc .wpm-item.wpm-neutro .wpm-mk{background:var(--castanho)}


/* =========================================================
   MODO QUESTIONÁRIO — uma pergunta por tela
   Usado pelo checklist do whey perfeito, que junta numa
   passada as leituras que as outras fazem separadas.
   ========================================================= */
.wpm-calc .wpm-wiz-marca{margin-bottom:16px}
.wpm-calc .wpm-wiz-marca .wpm-rot{font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--tinta2); margin-bottom:6px}
.wpm-calc .wpm-wiz-marca input{width:100%; padding:9px 12px; font-family:var(--corpo); font-size:14px;
  border:1px solid var(--linha); border-radius:var(--r); background:var(--papel); color:var(--tinta); outline:none}
.wpm-calc .wpm-wiz-marca input:focus-visible{border-color:var(--tom); outline:2px solid var(--tom); outline-offset:1px}

.wpm-calc .wpm-prog{display:flex; gap:5px; margin-bottom:8px}
.wpm-calc .wpm-prog span{flex:1; height:5px; background:var(--linha); border-radius:100px; transition:background .25s ease}
.wpm-calc .wpm-prog span.wpm-feito{background:var(--tom)}
.wpm-calc .wpm-cont{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tinta2); margin-bottom:18px}

.wpm-calc .wpm-passo{display:none}
.wpm-calc .wpm-passo.wpm-on{display:block}
.wpm-calc .wpm-eyebrow{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color:var(--castanho); margin-bottom:6px}
.wpm-calc .wpm-tit{font-family:var(--display); font-weight:700; font-size:23px; color:var(--tom);
  margin-bottom:8px; line-height:1.2}
.wpm-calc .wpm-regra{display:inline-block; font-size:12px; font-weight:600; color:var(--sage);
  background:var(--sageclaro); border-radius:100px; padding:3px 11px; margin-bottom:14px}
.wpm-calc .wpm-nota{margin-top:16px; background:var(--areia); border:1px solid var(--areia-b);
  border-radius:var(--r); padding:11px 14px; font-size:13px; color:var(--castanho); line-height:1.55}
.wpm-calc .wpm-wiz-nav{display:flex; gap:10px; margin-top:20px}
.wpm-calc .wpm-wiz-nav .wpm-prox{flex:1}

/* ---------- VEREDITO E CHECKLIST ---------- */
.wpm-calc .wpm-veredito{border-radius:var(--r); overflow:hidden; border:1px solid var(--linha); margin-bottom:14px}
.wpm-calc .wpm-ver-faixa{padding:20px; color:var(--papel); text-align:center; background:var(--tom)}
.wpm-calc .wpm-veredito.wpm-otimo .wpm-ver-faixa{background:var(--sage)}
.wpm-calc .wpm-ver-faixa .wpm-rot{font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; opacity:.85; margin-bottom:5px}
.wpm-calc .wpm-ver-faixa .wpm-big{font-family:var(--num); font-variant-numeric:tabular-nums;
  font-weight:700; font-size:40px; line-height:1}
.wpm-calc .wpm-ver-faixa .wpm-big small{font-size:18px; font-weight:500}
.wpm-calc .wpm-ver-faixa .wpm-frase{font-size:13px; opacity:.92; margin:8px 0 0}

.wpm-calc .wpm-sub{font-family:var(--corpo); font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--tinta2); margin:16px 0 8px}
.wpm-calc .wpm-chk{display:flex; gap:11px; padding:13px 0; border-top:1px solid var(--linha)}
.wpm-calc .wpm-chk:first-child{border-top:none}
.wpm-calc .wpm-chk .wpm-ico{flex:0 0 auto; width:22px; height:22px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--papel); margin-top:1px}
.wpm-calc .wpm-chk.wpm-ok-chk .wpm-ico{background:var(--sage)}
.wpm-calc .wpm-chk.wpm-no .wpm-ico{background:var(--vinho)}
.wpm-calc .wpm-chk.wpm-dun .wpm-ico{background:var(--linha2); color:var(--tinta2)}
.wpm-calc .wpm-chk-body{flex:1}
.wpm-calc .wpm-chk-linha{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.wpm-calc .wpm-chk-linha b{color:var(--tinta); font-size:14px}
.wpm-calc .wpm-chk-linha .wpm-crit{color:var(--tinta2); font-size:12px}
.wpm-calc .wpm-chk-linha .wpm-val{font-family:var(--num); font-variant-numeric:tabular-nums;
  font-size:13px; color:var(--tinta); white-space:nowrap}
.wpm-calc .wpm-chk-exp{font-size:12.5px; color:var(--tinta2); line-height:1.5; margin:4px 0 0}

/* ---------- ANTES DE FECHAR A COMPRA ---------- */
.wpm-calc .wpm-extra-wrap{margin-top:20px}
.wpm-calc .wpm-extra-tit{font-family:var(--display); font-weight:700; font-size:17px; color:var(--tom); margin-bottom:4px}
.wpm-calc .wpm-extra-sub{font-size:12.5px; color:var(--tinta2); margin-bottom:12px}
.wpm-calc .wpm-extra{background:var(--papel); border:1px solid var(--linha); border-left:3px solid var(--linha2);
  border-radius:var(--r); padding:13px 15px; margin-bottom:10px}
.wpm-calc .wpm-extra.wpm-alerta{border-left-color:var(--vinho); background:var(--claro)}
.wpm-calc .wpm-extra h5{font-family:var(--display); font-weight:700; font-size:15px; color:var(--tinta); margin:0 0 5px}
.wpm-calc .wpm-extra p{font-size:13px; color:var(--tinta2); line-height:1.6; margin:0}