/* =========================================================
   WheyProtein · Calculadora de Proteína — CSS
   v2.0.0 · Mediahouse Digital

   Convertido do protótipo calculadora-proteina.html. Tudo
   escopado em .wpm-prot: nenhum :root, nenhum seletor de
   elemento nu, nenhum reset global, nenhum hexadecimal de
   cor, nenhuma chamada de fonte externa.

   §12: o escopo é .wpm-prot e a raiz que o JS conhece —
   .wpm-calc-prot — é elemento INTERNO dele. Regra de raiz
   sempre como descendente legítimo.

   §2: nenhum pixel de largura de página. O protótipo tinha
   .wrap{max-width:600px} e .wrap-larga{max-width:760px};
   quem decide a coluna agora é o --fer-col do slot.

   TOKENS SUBSTITUÍDOS: --mono → --corpo com tabular-nums;
   --vinho-06/--vinho-10 → --claro/--claro2; o rosa sobre
   vinho → --claro2; os cinzas à mão → --linha/--linha2.
   ========================================================= */

.wpm-prot{
  --tom:var(--fer2);
  --tom-forte:var(--fer3);
  --tom-claro:var(--fer);
  --num:var(--corpo);
  --sombra-leve:0 6px 18px rgba(46,45,50,.06);
  color:var(--tinta);
  font-family:var(--corpo);
}
.wpm-prot *{box-sizing:border-box}

/* ---------- ABAS ---------- */
.wpm-prot .wpm-abas{display:flex; gap:2px; border-bottom:1px solid var(--linha); margin:0 0 24px}
.wpm-prot .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-prot .wpm-aba:hover{color:var(--tinta)}
.wpm-prot .wpm-aba[aria-selected="true"]{color:var(--tom); border-bottom-color:var(--tom)}
.wpm-prot .wpm-aba:focus-visible{outline:2px solid var(--tom); outline-offset:2px}
.wpm-prot .wpm-tela{display:none}
.wpm-prot .wpm-tela.wpm-on{display:block}

/* ---------- RAIZ E CARTÃO ---------- */
.wpm-prot .wpm-calc-prot{margin:0 auto}

/* ---------- OS PASSOS DO FUNIL ----------
   UMA tela por vez. Sem esta regra o funil inteiro aparece empilhado:
   o JS alterna a classe wpm-on, mas quem esconde o resto é o CSS. */
.wpm-prot .wpm-passo{display:none}
.wpm-prot .wpm-passo.wpm-on{display:block}
.wpm-prot .wpm-card{background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--r); box-shadow:var(--sombra-leve); padding:26px 24px}

/* ---------- TIPOGRAFIA INTERNA ---------- */
.wpm-prot .wpm-kicker{font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.09em; color:var(--tom); margin:0 0 8px}
.wpm-prot .wpm-tit{font-family:var(--display); font-weight:700; font-size:23px;
  line-height:1.2; color:var(--tinta); margin:0 0 6px}
.wpm-prot .wpm-lead{font-size:16px; color:var(--tinta2); line-height:1.6; margin:0 0 22px}
.wpm-prot .wpm-sub{font-size:14px; color:var(--tinta2); line-height:1.55; margin:0 0 22px}
.wpm-prot h3{font-family:var(--display); font-weight:700; font-size:19px;
  color:var(--tom); margin:0 0 8px}
.wpm-prot p{margin:0 0 10px; line-height:1.6; font-size:15px; color:var(--tinta)}

/* ---------- PROGRESSO ---------- */
.wpm-prot .wpm-prog{height:4px; background:var(--linha); border-radius:100px;
  overflow:hidden; margin:0 0 22px}
.wpm-prot .wpm-prog i{display:block; height:100%; width:0; background:var(--tom);
  transition:width .45s ease}

/* ---------- OPÇÕES E BOTÕES ---------- */
.wpm-prot .wpm-opt{width:100%; text-align:left; border:1px solid var(--linha);
  border-radius:var(--r); padding:14px 16px; margin:0 0 9px; font-family:var(--corpo);
  font-size:15px; font-weight:500; color:var(--tinta); background:var(--papel);
  cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease}
.wpm-prot .wpm-opt:hover{border-color:var(--linha2)}
.wpm-prot .wpm-opt:focus-visible{outline:2px solid var(--tom); outline-offset:2px}
.wpm-prot .wpm-opt.wpm-sel{border-color:var(--tom); background:var(--claro); color:var(--tom)}
.wpm-prot .wpm-check{display:none; flex:0 0 auto; margin-left:10px; line-height:0}
.wpm-prot .wpm-opt.wpm-sel .wpm-check{display:inline-flex}
.wpm-prot .wpm-btn{width:100%; border:0; border-radius:var(--r); padding:14px;
  font-family:var(--corpo); font-size:15px; font-weight:600; color:var(--papel);
  background:var(--tom); cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:8px; transition:background-color .15s ease}
.wpm-prot .wpm-btn:hover{background:var(--tom-forte)}
.wpm-prot .wpm-btn:disabled{background:var(--linha2); color:var(--tinta2); cursor:not-allowed}
.wpm-prot .wpm-btn:focus-visible{outline:2px solid var(--tom); outline-offset:2px}
.wpm-prot .wpm-btn-sec{background:transparent; color:var(--tom); border:1px solid var(--linha)}
.wpm-prot .wpm-btn-sec:hover{background:var(--gesso)}
.wpm-prot .wpm-voltar{margin:16px 0 0; background:none; border:0; font-family:var(--corpo);
  font-size:13.5px; color:var(--tinta2); cursor:pointer}
.wpm-prot .wpm-voltar:hover{color:var(--tinta)}

/* ---------- CAMPO ---------- */
.wpm-prot .wpm-field{position:relative; margin:0 0 22px}
/* rótulo lido por leitor de tela; a unidade visível fica dentro do campo */
.wpm-prot .wpm-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.wpm-prot .wpm-unid{position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:var(--tinta2); font-family:var(--corpo); font-size:14px; pointer-events:none}
.wpm-prot .wpm-campo{width:100%; border:1px solid var(--linha); border-radius:var(--r);
  padding:14px 16px; font-family:var(--num); font-variant-numeric:tabular-nums;
  font-size:19px; font-weight:500; color:var(--tinta); background:var(--papel);
  outline:none; -moz-appearance:textfield}
.wpm-prot .wpm-campo::-webkit-outer-spin-button,
.wpm-prot .wpm-campo::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.wpm-prot .wpm-campo:focus{border-color:var(--tom); box-shadow:0 0 0 3px var(--claro2)}
.wpm-prot .wpm-err{color:var(--vinho); font-size:13px; margin:8px 0 0; min-height:1em}

/* ---------- CAIXAS ---------- */
.wpm-prot .wpm-box{border-radius:var(--r); padding:15px 16px; margin:0 0 15px;
  font-size:12.5px; line-height:1.55}
.wpm-prot .wpm-box-papel{background:var(--papel); border:1px solid var(--linha); color:var(--tinta2)}
.wpm-prot .wpm-box-destaque{background:var(--claro); border:1px solid var(--claro2); color:var(--tinta)}
.wpm-prot .wpm-box strong{color:var(--tinta)}
.wpm-prot .wpm-fund-tit{font-size:12px; font-weight:700; color:var(--tinta); margin:0 0 3px}
.wpm-prot .wpm-fund-txt{font-size:11.5px; color:var(--tinta2); line-height:1.5; margin:0}

/* ---------- RESULTADO ---------- */
.wpm-prot .wpm-res{background:var(--tom); border-radius:var(--r); padding:26px;
  text-align:center; margin:14px 0 16px}
.wpm-prot .wpm-res .wpm-lbl{font-size:10.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.09em; color:var(--claro2); margin:0 0 6px}
.wpm-prot .wpm-res .wpm-big{font-family:var(--num); font-variant-numeric:tabular-nums;
  font-weight:700; font-size:42px; line-height:1; color:var(--papel); margin:0}
.wpm-prot .wpm-res .wpm-big span{font-size:18px; font-weight:500}
.wpm-prot .wpm-res .wpm-ctx{font-size:12.5px; color:var(--claro2); margin:9px 0 0}

/* ---------- TABELA DE ALIMENTOS ---------- */
.wpm-prot .wpm-sectitle{font-size:13px; font-weight:600; color:var(--tinta); margin:0 0 9px}
.wpm-prot .wpm-tbl{border:1px solid var(--linha); border-radius:var(--r);
  overflow:hidden; margin:0 0 8px}
.wpm-prot table{width:100%; border-collapse:collapse; text-align:left}
.wpm-prot thead tr{background:var(--chumbo); color:var(--gesso); font-size:10px;
  text-transform:uppercase; letter-spacing:.05em}
.wpm-prot th{padding:9px 12px; font-weight:600}
.wpm-prot th.wpm-r{text-align:right}
.wpm-prot tbody td{padding:8px 12px; font-size:13px; color:var(--tinta);
  border-top:1px solid var(--linha)}
.wpm-prot tbody tr:nth-child(even){background:var(--gesso)}
.wpm-prot td.wpm-porc{font-family:var(--num); font-variant-numeric:tabular-nums;
  font-size:11.5px; color:var(--tinta2); white-space:nowrap}
.wpm-prot td.wpm-r{text-align:right}
.wpm-prot .wpm-chip{display:inline-block; border-radius:4px; padding:2px 8px;
  font-family:var(--num); font-variant-numeric:tabular-nums; font-size:12.5px;
  font-weight:700; background:var(--claro); color:var(--tom); white-space:nowrap}
.wpm-prot .wpm-fine{font-size:11px; color:var(--tinta2); line-height:1.5; margin:0 0 15px}

/* ---------- ENCAMINHAMENTO ---------- */
.wpm-prot .wpm-enc{border-left:3px solid var(--castanho); padding-left:16px; margin:0 0 16px}
.wpm-prot .wpm-enc p{font-size:15px; color:var(--tinta); line-height:1.55; margin:0 0 11px}
.wpm-prot .wpm-cta{background:var(--papel); border:1px solid var(--linha)}

/* ---------- COMO FUNCIONA ---------- */
.wpm-prot .wpm-como{max-width:720px; margin:0 auto}
.wpm-prot .wpm-como p{font-size:14.5px; color:var(--tinta2); line-height:1.6; margin:0 0 10px}
.wpm-prot .wpm-como h3{margin:22px 0 6px}
.wpm-prot .wpm-como ul{margin:0 0 10px; padding-left:20px}
.wpm-prot .wpm-como li{font-size:14px; color:var(--tinta2); line-height:1.55; margin:4px 0}
.wpm-prot .wpm-como strong{color:var(--tinta)}

/* ---------- MOVIMENTO ---------- */
@media (prefers-reduced-motion:reduce){
  .wpm-prot .wpm-prog i{transition:none}
  .wpm-prot .wpm-opt{transition:none}
  .wpm-prot .wpm-btn{transition:none}
}

/* ---------- TELAS ESTREITAS ---------- */
@media (max-width:480px){
  .wpm-prot .wpm-res{padding:20px}
  .wpm-prot .wpm-res .wpm-big{font-size:34px}
  .wpm-prot tbody td{padding:7px 9px; font-size:12.5px}
}