/* Calculadora de IMC — TotalPep Colombia
   Página informativa independiente. No recomienda productos ni sustituye valoración médica. */

.imc-hero{ background:linear-gradient(180deg,var(--ink) 0%, var(--steel) 100%); padding:56px 0 64px; }
.imc-hero .wrap{ max-width:760px; }
.imc-hero h1{ color:#fff; font-size:32px; line-height:1.15; margin:16px 0 14px; }
.imc-hero p{ color:#C9D8E5; font-size:16px; }

.imc-main{ padding:48px 0 80px; }
.imc-main .wrap{ max-width:760px; }

.imc-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px; margin-bottom:28px; }

.imc-fields{ display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:6px; }
@media (min-width:560px){ .imc-fields{ grid-template-columns:repeat(3,1fr); } }

.imc-field label{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--text-soft); margin-bottom:8px; }
.imc-field input{
  width:100%; padding:13px 14px; border-radius:9px; border:1.5px solid var(--line);
  font-family:var(--sans); font-size:16px; color:var(--ink); background:var(--cloud);
}
.imc-field input:focus{ outline:none; border-color:var(--signal); background:#fff; }
.imc-field span.unit{ font-family:var(--mono); font-size:11px; color:var(--text-soft); margin-left:6px; }

.imc-actions{ margin-top:24px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.imc-actions .btn{ white-space:normal; text-align:center; }
@media (max-width:479px){
  .imc-actions{ flex-direction:column; }
  .imc-actions .btn{ width:100%; }
}
.imc-error{ color:var(--amber-deep); font-size:13.5px; margin-top:14px; display:none; }
.imc-error.show{ display:block; }

.imc-minor-note{
  display:none; margin-top:18px; background:var(--tint); border-radius:10px; padding:16px 18px;
  font-size:13.5px; color:var(--steel); line-height:1.6;
}
.imc-minor-note.show{ display:block; }

@keyframes imcFadeIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes imcPop{ 0%{ transform:scale(.88); } 55%{ transform:scale(1.08); } 100%{ transform:scale(1); } }

.imc-result{ display:none; }
.imc-result.show{ display:block; animation:imcFadeIn .45s ease both; }

/* Tarjeta hero — lo primero que ve la persona: grado + kilos de más, en grande */
.imc-hero-card{
  border-radius:var(--radius); padding:36px 32px; margin-bottom:20px; text-align:center;
  background:var(--green); color:#fff;
}
.imc-hero-card.zone-bajo,
.imc-hero-card.zone-sano,
.imc-hero-card.zone-sobrepeso,
.imc-hero-card.zone-obesidad1,
.imc-hero-card.zone-obesidad2,
.imc-hero-card.zone-obesidad3{ background:#3E93D4; color:#fff; }

.imc-hero-eyebrow{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.85; margin-bottom:14px; }

.imc-hero-imc{ font-family:var(--serif-display); font-size:72px; font-weight:700; line-height:1; margin-bottom:14px; animation:imcPop .5s ease; }
@media (min-width:560px){ .imc-hero-imc{ font-size:88px; } }

.imc-hero-classification-line{ font-family:var(--sans); font-size:17px; margin-bottom:16px; }
.imc-hero-classification-line b{
  display:inline-block; font-family:var(--serif-display); font-size:21px; font-weight:700;
  background:#fff; color:var(--ink); padding:5px 16px; border-radius:999px; margin-top:6px;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.3);
}
.imc-hero-caveat{ font-family:var(--sans); font-size:12.5px; font-style:italic; opacity:.85; max-width:420px; margin:0 auto; line-height:1.5; }

/* Fila "Diferencia de peso" — el dato que más debe resaltar dentro de Detalles */
.imc-diff-block{
  background:var(--amber); border-radius:14px; padding:24px 26px; margin-bottom:22px;
  text-align:center; box-shadow:0 14px 30px -14px rgba(193,105,31,.55);
  transform-origin:center; animation:imcSpring 5s ease-in-out infinite;
}
.imc-diff-block.hide{ display:none; }

@keyframes imcSpring{
  0%, 82%{ transform:scale(1) rotate(0deg); }
  86%{ transform:scale(1.05) rotate(-2deg); }
  89%{ transform:scale(0.97) rotate(2deg); }
  92.5%{ transform:scale(1.03) rotate(-1.2deg); }
  96%{ transform:scale(0.99) rotate(0.6deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce){
  .imc-diff-block{ animation:none; }
}
.imc-diff-block.zone-bajo,
.imc-diff-block.zone-sano,
.imc-diff-block.zone-sobrepeso,
.imc-diff-block.zone-obesidad1,
.imc-diff-block.zone-obesidad2,
.imc-diff-block.zone-obesidad3{ background:#145C93; box-shadow:0 14px 30px -14px rgba(20,92,147,.55); }
.imc-diff-block .imc-stat-label{
  display:block; font-family:var(--mono); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.06em; color:#fff; opacity:.9; margin-bottom:8px;
}
.imc-diff-num{ display:block; font-family:var(--serif-display); font-size:44px; font-weight:700; color:#fff; line-height:1; animation:imcPop .5s ease; }
.imc-diff-sub{ display:block; font-size:13px; color:#fff; opacity:.92; margin-top:6px; }

/* Píldoras de dato — reemplazan al texto plano */
.imc-pill{
  display:inline-block; padding:6px 14px; border-radius:999px; font-family:var(--sans);
  font-weight:700; font-size:13px; color:#fff; margin-top:10px;
}

.imc-stat-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:20px; }
@media (min-width:560px){ .imc-stat-grid{ grid-template-columns:1fr 1fr; } }
.imc-stat-block{ background:var(--cloud); border-radius:12px; padding:20px 22px; }
.imc-stat-block .imc-stat-label{
  display:block; font-family:var(--mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.03em; color:var(--text-soft); margin-bottom:10px;
}
.imc-stat-block .imc-stat-num{ display:block; font-family:var(--serif-display); font-size:24px; color:var(--ink); }

/* Escala completa como bloques de color, no como barra */
.imc-scale-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:24px; }
@media (min-width:420px){ .imc-scale-grid{ grid-template-columns:repeat(3,1fr); } }
.imc-scale-block{
  border-radius:10px; padding:14px 8px; text-align:center; color:#fff;
  transition:transform .15s ease, box-shadow .15s ease;
}
.imc-scale-block b{ display:block; font-size:12.5px; font-weight:700; line-height:1.25; margin-bottom:4px; }
.imc-scale-block span{ display:block; font-family:var(--mono); font-size:10px; opacity:.9; }
.imc-scale-block.active{
  transform:scale(1.07); box-shadow:0 10px 24px -8px rgba(10,36,64,.4);
  outline:3px solid var(--ink); outline-offset:2px; animation:imcPop .5s ease;
}

.imc-details{ margin-bottom:4px; }
.imc-details summary{
  font-family:var(--sans); font-weight:600; font-size:14.5px; color:var(--steel);
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; padding:4px 0 18px;
}
.imc-details summary::-webkit-details-marker{ display:none; }
.imc-details summary .icon{ width:16px; height:16px; transition:transform .2s ease; }
.imc-details[open] summary .icon{ transform:rotate(180deg); }
.imc-details-body{ padding-top:4px; }

.imc-explain{ font-size:14.5px; color:var(--text-soft); line-height:1.65; margin-top:20px; margin-bottom:0; }

.imc-disclaimer{
  background:var(--tint); border:1px solid var(--line); border-radius:10px; padding:16px 18px;
  font-size:12.5px; color:var(--steel); line-height:1.6; margin-top:20px;
}

.imc-explain,
.imc-disclaimer,
.wa-section p.hint{
  text-align:justify; text-align-last:left;
  hyphens:auto; -webkit-hyphens:auto;
}
@media (max-width:479px){
  .imc-explain,
  .imc-disclaimer,
  .wa-section p.hint{ text-align:left; hyphens:none; -webkit-hyphens:none; }
}

.wa-section{ border-top:1px solid var(--line); padding-top:24px; }
.wa-section h4{ font-size:16px; margin-bottom:8px; }
.wa-section p.hint{ font-size:13px; color:var(--text-soft); margin-bottom:14px; }
.wa-textarea{
  width:100%; min-height:170px; border:1.5px solid var(--line); border-radius:10px;
  padding:14px 16px; font-family:var(--sans); font-size:14px; color:var(--text); line-height:1.6;
  resize:vertical; background:var(--cloud);
}
.wa-textarea:focus{ outline:none; border-color:var(--signal); background:#fff; }