/* ════════════════════════════════════════════════════════════════════
   home.css — Salud & Ciencia
   Estilos exclusivos de la sección HERO — hub de entrada (home v3):
   tarjetas de entrada + interpretador embebido (#interpretador).
   Nada de este archivo se usa fuera de esa sección de la home.
   Depende de las variables definidas en style.css (:root) y de
   componentes compartidos de tool.css (tool-calculator-wrap,
   back-to-hub, tool-disclaimer, calc-ctas, calc-resultado y demás
   bloques del "informe" de resultado, btn-primary/btn-outline).
   ════════════════════════════════════════════════════════════════════ */

/* ─── HERO shell ──────────────────────────────────────────────────── */
.hero { background: #fff; overflow: hidden; border-bottom: 1px solid var(--border); }
.hero-inner--single { grid-template-columns: 1fr; min-height: auto; }
.hero-inner { max-width: 1200px; margin: 0 auto; display: grid; }
.hero-inner--single .hero-content { padding: 52px 24px; }
.hero-content--full { max-width: 1000px; margin: 0 auto; }
.hero-content h1 { font-size: 2.3rem; font-weight: 800; line-height: 1.18; color: var(--text); }
.hero-content h1 .accent { color: var(--teal); display: block; font-size: 1.45rem; font-weight: 700; margin-top: 8px; }

@media (max-width: 480px) {
  .hero-inner--single .hero-content { padding: 40px 20px 32px; }
}

/* ─── Eyebrow badge ───────────────────────────────────────────────── */
.interp-eyebrow-badge {
  display: inline-block; background: var(--teal-bg); color: var(--teal);
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}

/* ─── Hub cards row ───────────────────────────────────────────────── */
.hub-row { display: grid; gap: 16px; margin: 22px 0 22px; }
.hub-row--primary { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .hub-row--primary { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .hub-row--primary { grid-template-columns: 1fr; } }

.hub-card {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 16px; padding: 22px 22px 52px;
  text-decoration: none; color: inherit;
  box-shadow: inset 0 3px 0 0 transparent, 0 2px 10px rgba(15,23,42,.05);
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.hub-card:hover { transform: translateY(-2px); }
.hub-card:active { transform: translateY(0); }

.hub-card--acc-blue   { box-shadow: inset 0 3px 0 0 var(--teal), 0 2px 10px rgba(15,23,42,.05); }
.hub-card--acc-green  { box-shadow: inset 0 3px 0 0 var(--green), 0 2px 10px rgba(15,23,42,.05); }
.hub-card--acc-orange { box-shadow: inset 0 3px 0 0 var(--orange), 0 2px 10px rgba(15,23,42,.05); }

.hub-card--acc-blue:hover   { box-shadow: inset 0 3px 0 0 var(--teal), 0 10px 26px rgba(15,23,42,.10); }
.hub-card--acc-green:hover  { box-shadow: inset 0 3px 0 0 var(--green), 0 10px 26px rgba(15,23,42,.10); }
.hub-card--acc-orange:hover { box-shadow: inset 0 3px 0 0 var(--orange), 0 10px 26px rgba(15,23,42,.10); }

.hub-card--selected.hub-card--acc-blue   { box-shadow: inset 0 3px 0 0 var(--teal), 0 0 0 2px var(--teal), 0 10px 26px rgba(15,23,42,.10); }
.hub-card--selected.hub-card--acc-green  { box-shadow: inset 0 3px 0 0 var(--green), 0 0 0 2px var(--green), 0 10px 26px rgba(15,23,42,.10); }
.hub-card--selected.hub-card--acc-orange { box-shadow: inset 0 3px 0 0 var(--orange), 0 0 0 2px var(--orange), 0 10px 26px rgba(15,23,42,.10); }

.hub-card-icon {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.hub-card-icon svg { width: 22px; height: 22px; fill: none; stroke-width: 2; }
.hub-card-icon--blue    { background: var(--teal-bg); }
.hub-card-icon--blue svg    { stroke: var(--teal); }
.hub-card-icon--green   { background: #eafbf0; }
.hub-card-icon--green svg   { stroke: var(--green); }
.hub-card-icon--orange  { background: #fff2e8; }
.hub-card-icon--orange svg  { stroke: var(--orange); }

.hub-card-body h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 6px; line-height: 1.3; }
.hub-card-body p { font-size: .82rem; color: var(--text-muted); line-height: 1.5; margin: 0; }

.hub-card-arrow {
  position: absolute; right: 20px; bottom: 20px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border); color: var(--text-light);
  transition: background .2s, color .2s, border-color .2s;
}
.hub-card-arrow svg { width: 15px; height: 15px; }
.hub-card--acc-blue .hub-card-arrow   { border-color: var(--teal); color: var(--teal); }
.hub-card--acc-green .hub-card-arrow  { border-color: var(--green); color: var(--green); }
.hub-card--acc-orange .hub-card-arrow { border-color: var(--orange); color: var(--orange); }
.hub-card--acc-blue:hover .hub-card-arrow   { background: var(--teal); color: var(--white); }
.hub-card--acc-green:hover .hub-card-arrow  { background: var(--green); color: var(--white); }
.hub-card--acc-orange:hover .hub-card-arrow { background: var(--orange); color: var(--white); }

/* ─── Trust box (debajo de las tarjetas, siempre visible) ─────────── */
.interp-trust-box {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 24px; border-radius: 16px;
  background: var(--teal-bg);
}
.interp-trust-icon {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.65); color: var(--teal);
}
.interp-trust-icon svg { width: 22px; height: 22px; }
.interp-trust-text { flex: 1; min-width: 0; }
.interp-trust-text strong { display: block; font-size: .92rem; color: var(--text); margin-bottom: 4px; }
.interp-trust-text p { font-size: .82rem; color: var(--text-muted); line-height: 1.55; margin: 0; }
.interp-trust-illustration { flex-shrink: 0; color: var(--teal); opacity: .55; display: none; }
.interp-trust-illustration svg { width: 56px; height: 56px; }
@media (min-width: 640px) { .interp-trust-illustration { display: block; } }

/* ─── Panel del interpretador ──────────────────────────────────────
   El contenedor .tool-calculator-wrap viene de tool.css (tarjeta
   blanca con sombra); aquí solo controlamos su posición dentro del
   hero y la variable de color de acento que heredan sus hijos.       */
.interpretador-wrap { margin: 28px 0 4px; --stepper-accent: var(--teal); }

/* ─── Stepper numerado con color de acento ─────────────────────────── */
.interp-stepper { display: flex; align-items: center; margin: 0 0 26px; }
.interp-stepv2 { display: flex; align-items: center; gap: 8px; }
.interp-stepv2-circle {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
  border: 2px solid var(--border); color: var(--text-light); background: var(--white);
  transition: background .2s, border-color .2s, color .2s;
}
.interp-stepv2-label { font-size: .8rem; color: var(--text-light); white-space: nowrap; }
.interp-stepv2--active .interp-stepv2-circle { border-color: var(--stepper-accent); background: var(--stepper-accent); color: var(--white); }
.interp-stepv2--active .interp-stepv2-label { color: var(--text); font-weight: 700; }
.interp-stepv2--done .interp-stepv2-circle { border-color: var(--stepper-accent); background: var(--stepper-accent); color: var(--white); }
.interp-stepv2--done .interp-stepv2-label { color: var(--stepper-accent); }
.interp-stepv2-line { flex: 1; height: 2px; background: var(--border); margin: 0 10px; min-width: 20px; }
.interp-stepv2-line.done { background: var(--stepper-accent); }
@media (max-width: 560px) { .interp-stepv2-label { display: none; } }

/* ─── Paso visible / oculto ─────────────────────────────────────── */
.interp-step { display: none; }
.interp-step.visible { display: block; animation: interpFade .2s ease; }
@keyframes interpFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Encabezado dinámico de cada paso ─────────────────────────────── */
.interp-step-heading { margin-bottom: 22px; }
.interp-step-heading h2 { font-size: 1.25rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.interp-step-heading p { font-size: .86rem; color: var(--text-muted); margin: 0; }

/* ─── Paso 1a: grilla de categorías ─────────────────────────────────── */
.interp-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .interp-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .interp-cat-grid { grid-template-columns: 1fr; } }

/* ─── Paso 1b: grilla plana de parámetros individuales ──────────────── */
.interp-param-grid-flat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 900px) { .interp-param-grid-flat { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .interp-param-grid-flat { grid-template-columns: 1fr; } }

/* Tarjeta de opción (categoría o parámetro) reutilizada en ambas grillas */
.interp-opt-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 14px 16px; text-decoration: none; color: inherit;
  transition: box-shadow .2s, border-color .2s, transform .15s;
}
.interp-opt-card:hover { border-color: var(--stepper-accent); box-shadow: 0 6px 18px rgba(15,23,42,.08); transform: translateY(-1px); }
.interp-opt-icon {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-bg); color: var(--stepper-accent);
}
.interp-opt-icon svg { width: 20px; height: 20px; }
.interp-opt-body { flex: 1; min-width: 0; }
.interp-opt-body h3 { font-size: .9rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.interp-opt-body p { font-size: .76rem; color: var(--text-muted); margin: 0; line-height: 1.4; }
.interp-opt-arrow { flex-shrink: 0; color: var(--text-light); display: flex; }
.interp-opt-arrow svg { width: 16px; height: 16px; }
.interp-opt-card:hover .interp-opt-arrow { color: var(--stepper-accent); }

.interp-opt-card--flat { padding: 16px; }
.interp-opt-card--flat .interp-opt-body h3 { font-size: .86rem; }

/* ─── Paso 2: captura de valores ───────────────────────────────────── */
.interp-sexo-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 22px; font-size: .84rem; font-weight: 600; color: var(--text);
}
.interp-seg { display: inline-flex; border: 2px solid var(--stepper-accent); border-radius: 999px; overflow: hidden; }
.interp-seg button { font-family: inherit; border: 0; background: var(--white); color: var(--stepper-accent); padding: 7px 16px; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.interp-seg button.active { background: var(--stepper-accent); color: var(--white); }

.interp-captura-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
}
@media (max-width: 640px) { .interp-captura-form { grid-template-columns: 1fr; } }

.interp-field-box {
  position: relative;
  border: 1.5px solid var(--border); border-radius: 14px;
  padding: 14px 16px 12px;
  background: var(--white);
}
.interp-field-icon {
  position: absolute; top: 12px; right: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-bg); color: var(--stepper-accent);
}
.interp-field-icon svg { width: 14px; height: 14px; }
.interp-field-box label { display: block; font-size: .88rem; font-weight: 700; color: var(--text); padding-right: 34px; }
.interp-field-box small { display: block; font-size: .74rem; color: var(--text-muted); margin-top: 2px; margin-bottom: 8px; }
.interp-input-group { display: flex; align-items: center; }
.interp-input-group input[type=number] {
  width: 100%; border: none; border-bottom: 2px solid var(--stepper-accent);
  outline: none; font-family: inherit;
  font-size: 1.5rem; font-weight: 700; color: var(--text);
  padding: 2px 2px 6px; background: transparent;
}
.interp-input-group input[type=number]::placeholder { color: var(--text-light); font-weight: 400; }

.interp-ayuno-note {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 10px 14px; border-radius: 10px;
  background: var(--bg-light); color: var(--text-muted); font-size: .8rem;
}
.interp-ayuno-note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-light); }

.interp-btn-interpretar {
  width: 100%; justify-content: center;
  font-size: 1.02rem; padding: 16px 28px; margin-top: 22px;
  background: var(--stepper-accent); border-color: var(--stepper-accent);
  box-shadow: 0 8px 22px rgba(15,23,42,.16);
}
.interp-btn-interpretar:hover { filter: brightness(.92); }
.interp-btn-interpretar:disabled { filter: none; cursor: default; }

/* ─── Paso 3: resultado ─────────────────────────────────────────────
   Reutiliza los bloques .calc-resultado / .calc-* del "informe" que
   ya existen en tool.css; aquí solo se agregan los específicos del
   interpretador (semáforo de 4 niveles y resumen global).             */
.status-elevated { background: #ffedd8; color: #c2410c; }
.calc-consultar--normal   { background: #dcfce7; color: #15803d; }
.calc-consultar--limit    { background: #fef9c3; color: #a16207; }
.calc-consultar--elevated { background: #ffedd8; color: #c2410c; }
.calc-consultar--high     { background: #fee2e2; color: #b91c1c; }

.interp-resumen {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 24px; margin-bottom: 24px; border-radius: 16px;
  border: 1.5px solid var(--border);
}
.interp-resumen-icon {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.6);
}
.interp-resumen-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.interp-resumen h3 { font-size: 1.15rem; margin: 0 0 3px; }
.interp-resumen p { font-size: .85rem; margin: 0; }

/* ─── Artículos relacionados al final del resultado ────────────────── */
.interp-articulos { margin-bottom: 22px; }
.interp-group-label { font-size: .78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.interp-articulos-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.interp-related-item {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px;
  text-decoration: none; color: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.interp-related-item:hover { border-color: var(--stepper-accent); box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.interp-related-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--stepper-accent); }
.interp-related-body { min-width: 0; }
.interp-related-body strong { display: block; font-size: .86rem; font-weight: 700; color: var(--text); }
.interp-related-body span { display: block; font-size: .78rem; color: var(--text-muted); margin-top: 2px; }