/* ============================================================
   imc.css — CSS da calculadora de IMC (página pública)
   drpetrus.top · carregar após base.css
   ============================================================ */

:root{
  --az:#1e4152;
  --ci:#01a9ce;
  --ci2:#6D7073;
  --ro:#40295e;
  --ve:#3c825c;
  --bg:#f2f5f7;
  --bd:#d6e0e6;
  --sh:0 2px 20px rgba(30,65,82,.09);
  --shh:0 8px 40px rgba(30,65,82,.18);
  --r:12px;
  --tr:.3s cubic-bezier(.4,0,.2,1);
}
html{scroll-behavior:smooth}
body{font-family:Montserrat,sans-serif;background:var(--bg);color:var(--az);font-size:15px;min-height:100vh;display:flex;flex-direction:column}

/* HEADER */
.hdr{background:var(--az);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 16px rgba(0,0,0,.18)}
.hdr-logo{height:40px;width:auto;border-radius:8px;cursor:pointer;transition:opacity var(--tr)}
.hdr-logo:hover{opacity:.85}
.hdr-title{color:#fff;font-size:13px;font-weight:600;letter-spacing:.06em;opacity:.85}
.hdr-back{color:rgba(255,255,255,.7);font-size:12px;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:6px;letter-spacing:.05em;transition:color var(--tr)}
.hdr-back:hover{color:var(--ci)}

/* MAIN */
main{flex:1;display:flex;flex-direction:column;align-items:center;padding:40px 20px 60px}
.card{background:#fff;border-radius:16px;box-shadow:var(--shh);width:100%;max-width:600px;overflow:hidden}

/* DESCRIÇÃO */
.desc{padding:32px 36px 24px;border-bottom:1px solid var(--bd)}
.desc-tag{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ci);margin-bottom:8px}
.desc h1{font-size:22px;font-weight:900;color:var(--az);margin-bottom:10px;line-height:1.25}
.desc h1 span{color:var(--ci)}
.desc p{font-size:13px;color:var(--ci2);line-height:1.75}
.desc-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(1,169,206,.08);border:1px solid rgba(1,169,206,.2);color:var(--ci);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-top:12px}

/* FORM */
.form-area{padding:28px 36px}
.age-toggle{display:flex;gap:0;margin-bottom:22px;border-radius:8px;overflow:hidden;border:1.5px solid var(--bd)}
.age-toggle button{flex:1;padding:10px;border:none;background:transparent;font-family:Montserrat,sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ci2);cursor:pointer;transition:all var(--tr)}
.age-toggle button.active{background:var(--az);color:#fff}

.inputs-row{display:grid;gap:14px;margin-bottom:18px}
.inputs-row.adult{grid-template-columns:1fr 1fr}
.inputs-row.pediatric{grid-template-columns:1fr 1fr}
.inputs-row.pediatric-full{grid-template-columns:1fr 1fr 1fr}

.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ci2)}
.fg input,.fg select{width:100%;padding:11px 13px;border:1.5px solid var(--bd);border-radius:8px;font-family:Montserrat,sans-serif;font-size:14px;color:var(--az);background:var(--bg);outline:none;transition:border-color .2s}
.fg input:focus,.fg select:focus{border-color:var(--ci);background:#fff}
.fg .unit{font-size:11px;color:var(--ci2);font-weight:600;margin-top:2px}

/* Idoso toggle (oculto por padrão, aparece quando adulto >65) */
.idoso-info{display:none;font-size:11px;color:var(--ci);background:rgba(1,169,206,.07);border:1px solid rgba(1,169,206,.2);border-radius:8px;padding:8px 12px;margin-bottom:14px;line-height:1.6}

.btn-calc{width:100%;padding:15px;background:var(--ci);border:none;border-radius:8px;font-family:Montserrat,sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;cursor:pointer;transition:all var(--tr);display:flex;align-items:center;justify-content:center;gap:8px}
.btn-calc:hover{background:#019ab8;transform:translateY(-1px);box-shadow:0 6px 20px rgba(1,169,206,.35)}
.btn-calc:active{transform:none}

/* RESULTADO */
.result-area{display:none;border-top:1px solid var(--bd);padding:28px 36px}

.imc-display{text-align:center;margin-bottom:24px}
.imc-value{font-size:64px;font-weight:900;color:var(--az);line-height:1;letter-spacing:-2px}
.imc-label{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ci2);margin-top:4px}
.imc-zscore{font-size:13px;font-weight:600;color:var(--ci2);margin-top:6px;display:none}

/* Barra de categorias */
.imc-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-bottom:20px;border-radius:8px;overflow:hidden}
.imc-bar-seg{padding:6px 4px;text-align:center;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.9);transition:all var(--tr);opacity:.5}
.imc-bar-seg.active{opacity:1;transform:scaleY(1.08);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.seg-bp{background:#3b82f6}
.seg-n{background:var(--ve)}
.seg-sp{background:#f59e0b}
.seg-ob1{background:#f97316}
.seg-ob2{background:#ef4444}

/* Interpretação */
.interp-box{border-radius:12px;padding:22px;margin-bottom:20px;border:1px solid transparent}
.interp-box.bp{background:rgba(59,130,246,.06);border-color:rgba(59,130,246,.2)}
.interp-box.n{background:rgba(60,130,92,.06);border-color:rgba(60,130,92,.2)}
.interp-box.sp{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.2)}
.interp-box.ob1{background:rgba(249,115,22,.06);border-color:rgba(249,115,22,.2)}
.interp-box.ob2{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.2)}

.interp-title{font-size:15px;font-weight:900;margin-bottom:8px}
.interp-box.bp .interp-title{color:#3b82f6}
.interp-box.n .interp-title{color:var(--ve)}
.interp-box.sp .interp-title{color:#d97706}
.interp-box.ob1 .interp-title{color:#ea580c}
.interp-box.ob2 .interp-title{color:#dc2626}

.interp-text{font-size:13px;color:var(--ci2);line-height:1.75}
.interp-cta{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.btn-wa{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;background:#25d366;color:#fff;border-radius:8px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:all var(--tr);width:fit-content}
.btn-wa:hover{background:#1fb855;transform:translateY(-1px)}
.btn-contact{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;background:var(--az);color:#fff;border-radius:8px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:all var(--tr);width:fit-content}
.btn-contact:hover{background:#163240;transform:translateY(-1px)}

.btn-recalc{width:100%;padding:12px;background:transparent;border:1.5px solid var(--bd);border-radius:8px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ci2);cursor:pointer;transition:all var(--tr);margin-top:4px}
.btn-recalc:hover{border-color:var(--ci);color:var(--ci)}

/* TABELA REFERÊNCIA */
.ref-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px}
.ref-table th{background:var(--bg);padding:7px 10px;text-align:left;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ci2);border-bottom:1px solid var(--bd)}
.ref-table td{padding:7px 10px;border-bottom:1px solid var(--bg);color:var(--az)}
.ref-table tr.highlight td{font-weight:700}
.ref-table tr.highlight.bp td{color:#3b82f6;background:rgba(59,130,246,.04)}
.ref-table tr.highlight.n td{color:var(--ve);background:rgba(60,130,92,.04)}
.ref-table tr.highlight.sp td{color:#d97706;background:rgba(245,158,11,.04)}
.ref-table tr.highlight.ob1 td{color:#ea580c;background:rgba(249,115,22,.04)}
.ref-table tr.highlight.ob2 td{color:#dc2626;background:rgba(239,68,68,.04)}

/* DISCLAIMER */
.disclaimer{background:var(--az);color:rgba(255,255,255,.55);font-size:11px;line-height:1.7;padding:20px 36px;text-align:center}
.disclaimer strong{color:rgba(255,255,255,.8)}
.disclaimer a{color:var(--ci);text-decoration:none}

/* FOOTER */
footer{background:#162e3c;color:rgba(255,255,255,.35);font-size:11px;text-align:center;padding:14px 20px}
footer a{color:rgba(255,255,255,.5);text-decoration:none}

/* RESPONSIVO */
@media(max-width:600px){
  .desc,.form-area,.result-area{padding:22px 20px}
  .inputs-row.adult,.inputs-row.pediatric,.inputs-row.pediatric-full{grid-template-columns:1fr 1fr}
  .imc-value{font-size:48px}
  .hdr-title{display:none}
}
@media(max-width:380px){
  .inputs-row.pediatric-full{grid-template-columns:1fr 1fr}
}

/* ANIMAÇÃO */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.result-area.visible{animation:fadeUp .4s ease both}