/* "A Tiempo" — hoja de estilos del prototipo.
   Tokens y patrones de componente tomados literalmente de brand/brandboard.html,
   sin introducir colores nuevos (regla de marca: "sin rosado, sin azul de
   aseguradora, sin rojo puro"). */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --verde: #0E7C66;
  --tinta: #0B1F1A;
  --ambar: #F2A93B;
  --coral: #E4572E;
  --salvia: #7FA99B;
  --papel: #F7F5F0;
  --piedra: #DCD9D2;
  --gris-texto: #5c6b66;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: Inter, "Segoe UI", sans-serif;
  line-height: 1.5;
}

h1, h2, h3 { font-family: "Instrument Sans", Inter, sans-serif; letter-spacing: -0.02em; margin: 0; }

a { color: var(--verde); }

.envoltura { max-width: 720px; margin: 0 auto; padding: 0 20px 80px; }
.envoltura-ancha { max-width: 980px; margin: 0 auto; padding: 0 20px 80px; }

/* ---------- Encabezado / logo / navegación ---------- */
.encabezado {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 0; position: sticky; top: 0; z-index: 30; background: var(--papel);
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); flex: none; }
.marca .nombre { font-family: "Instrument Sans", sans-serif; font-weight: 700; font-size: 22px; }

/* Enlaces centrales (Prevención / Cómo funciona / Estadísticas / FAQ) */
.nav-principal { display: flex; align-items: center; gap: 28px; flex: 1; justify-content: center; }
.nav-principal a {
  text-decoration: none; color: var(--tinta); font-size: 14.5px; font-weight: 600;
  white-space: nowrap;
}
.nav-principal a:hover { color: var(--verde); }
.nav-acciones { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-cta { padding: 10px 20px; border-radius: 999px; font-size: 14.5px; }
.nav-toggle {
  display: none; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1.5px solid var(--piedra); border-radius: 10px; background: #fff; color: var(--tinta);
  cursor: pointer; flex: none;
}

@media (max-width: 860px) {
  .nav-principal {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: flex-start; gap: 2px; background: #fff; border: 1px solid var(--piedra);
    border-radius: 14px; padding: 10px; margin-top: 8px; box-shadow: 0 12px 28px rgba(11,31,26,.12);
  }
  .nav-principal.abierto { display: flex; }
  .nav-principal a { width: 100%; padding: 10px 12px; border-radius: 8px; }
  .nav-principal a:hover { background: var(--papel); }
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }
}

/* ---------- Hero ---------- */
.hero { padding: 40px 0 24px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; }
.hero-badge {
  display: inline-flex; align-items: center; background: rgba(14,124,102,.08); color: var(--verde);
  font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px; margin-bottom: 14px;
}
.hero h1 { font-size: 42px; font-weight: 700; line-height: 1.12; max-width: 20ch; }
.hero p.subtitulo { font-size: 18px; color: var(--gris-texto); max-width: 62ch; margin: 18px 0 28px; }
.hero-caption { font-size: 13px; color: var(--gris-texto); margin: 10px 0 0; }
.hero-visual { position: relative; }
.hero-visual img { width: 100%; height: auto; aspect-ratio: 1100 / 802; object-fit: cover; display: block; border-radius: 24px; }
.hero-visual-quote {
  position: absolute; left: 20px; right: 20px; bottom: 20px; margin: 0;
  background: rgba(11,31,26,.82); color: #fff; font-size: 15px; font-style: italic; font-weight: 500;
  padding: 14px 18px; border-radius: 12px; line-height: 1.35;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 480px; margin: 0 auto 8px; }
}

.stats-fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 4px; }
.stat-card { border: 1px solid var(--piedra); border-radius: 12px; padding: 16px 14px; text-align: center; background: #fff; }
.stat-num { font-size: 26px; font-weight: 700; color: var(--verde); }
.stat-num span { font-size: 14px; font-weight: 400; color: var(--gris-texto); margin: 0 4px; }
.stat-bar { height: 6px; border-radius: 999px; background: var(--piedra); margin-top: 12px; overflow: hidden; }
.stat-bar + .stat-bar { margin-top: 5px; }
.stat-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--verde); }
.stat-bar.metastasico { height: 4px; }
.stat-bar.metastasico > span { background: var(--coral); }
.stat-label { font-size: 13px; color: var(--gris-texto); margin-top: 8px; }
@media (max-width: 640px) { .stats-fila { grid-template-columns: 1fr; } }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--verde);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 26px;
  border-radius: 10px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.btn.sec { background: transparent; color: var(--verde); border: 1.5px solid var(--verde); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.grande { padding: 18px 32px; font-size: 18px; }

/* ---------- Iconos de línea minimalistas ---------- */
.ico { flex-shrink: 0; vertical-align: -3px; }

/* ---------- Tarjetas genéricas ---------- */
.card { background: #fff; border: 1px solid var(--piedra); border-radius: 14px; padding: 24px; }

.pasos { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin: 32px 0; }
.paso { background: #fff; border: 1px solid var(--piedra); border-radius: 14px; padding: 20px; }
.paso .num { color: var(--verde); font-weight: 700; font-family: "Instrument Sans", sans-serif; font-size: 22px; }
.paso h3 { font-size: 16px; margin: 8px 0 6px; }
.paso p { font-size: 14px; color: var(--gris-texto); margin: 0; }

@media (max-width: 720px) { .pasos { grid-template-columns: 1fr; } }

/* ---------- Tarjetas de fundadores ("Quiénes están detrás") ---------- */
.fundadores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.fundador-card {
  display: flex; gap: 14px; background: #fff; border: 1px solid var(--piedra);
  border-radius: 14px; padding: 18px;
}
.fundador-foto {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--verde), var(--salvia));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 18px; font-family: "Instrument Sans", sans-serif;
}
/* Los avatares con iniciales son un placeholder: reemplazar .fundador-foto por
   <img> en cuanto se tengan las fotos reales de Miguel y Rodrigo. */
.fundador-info h4 { margin: 0 0 6px; font-size: 15.5px; }
.fundador-info p { margin: 0 0 8px; font-size: 13.5px; color: var(--gris-texto); line-height: 1.5; }
.fundador-linkedin {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--verde); text-decoration: none;
}
.fundador-linkedin:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .fundadores { grid-template-columns: 1fr; }
}

/* ---------- Sección secundaria (fondo tinta) ---------- */
h2.rotulo {
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  color: var(--verde); margin: 56px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--piedra);
}

/* ---------- Mosaico de temas SEO (landing) ---------- */
.mosaico { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tema {
  background: #fff; border: 1px solid var(--piedra); border-radius: 12px; padding: 18px;
  text-decoration: none; color: var(--tinta); display: block;
}
.tema:hover { border-color: var(--verde); }
.tema .etiqueta { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--salvia); font-weight: 600; }
.tema h3 { font-size: 16px; margin: 6px 0 4px; }
.tema p { font-size: 13px; color: var(--gris-texto); margin: 0; }
@media (max-width: 640px) { .mosaico { grid-template-columns: 1fr; } }

/* ---------- Preguntas frecuentes (acordeón, ruta alternativa a microartículos) ---------- */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: #fff; border: 1px solid var(--piedra); border-radius: 12px; padding: 4px 18px;
}
.faq-item summary {
  cursor: pointer; padding: 14px 0; font-size: 15px; font-weight: 600; color: var(--tinta);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; color: var(--verde); font-size: 20px; font-weight: 400; flex: none; line-height: 1;
}
.faq-item[open] summary::after { content: '–'; }
.faq-item[open] summary { border-bottom: 1px solid var(--piedra); }
.faq-item .faq-respuesta { font-size: 14px; color: var(--gris-texto); margin: 0; padding: 12px 0 16px; }
.faq-item .faq-respuesta a { font-weight: 600; white-space: nowrap; }

/* ---------- Sello de confianza ---------- */
.sello {
  display: inline-flex; gap: 10px; align-items: center; border: 1px solid var(--piedra);
  background: #fff; border-radius: 999px; padding: 8px 16px 8px 10px; font-size: 12px; color: var(--gris-texto);
  flex-wrap: wrap;
}

/* ---------- L3: "antes de empezar" compacto, justo antes del CTA ---------- */
.antes-de-empezar-mini { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 18px; }
.antes-de-empezar-mini span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gris-texto); }
.antes-de-empezar-mini svg { flex: none; color: var(--verde); }

/* ---------- L6: recordarme más tarde ---------- */
.recordarme-mas-tarde { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.recordarme-mas-tarde span { font-size: 13px; color: var(--gris-texto); }
.btn.chico { padding: 8px 14px; font-size: 13px; }

/* ---------- Popup "¿Qué voy a recibir?" (landing) ---------- */
.btn-info-reporte {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  color: var(--verde); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
  padding: 8px 10px; text-decoration: underline; text-underline-offset: 3px; border-radius: 8px;
}
.btn-info-reporte:hover { background: rgba(14,124,102,.08); }
.btn-info-reporte svg { flex: none; }

.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(11,31,26,.55); z-index: 200;
  align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.abierto { display: flex; }
.modal-caja {
  background: #fff; border-radius: 16px; padding: 28px 26px; max-width: 480px; width: 100%;
  max-height: 86vh; overflow-y: auto; position: relative; box-shadow: 0 20px 50px rgba(11,31,26,.25);
  animation: aparecer .2s ease;
}
.modal-cerrar {
  position: absolute; top: 12px; right: 12px; background: none; border: none; cursor: pointer;
  color: var(--gris-texto); font-size: 18px; line-height: 1; padding: 8px; border-radius: 8px;
}
.modal-cerrar:hover { background: var(--papel); color: var(--tinta); }
.modal-caja h2 { font-size: 20px; margin: 0 0 4px; padding-right: 26px; }
.modal-caja > p.modal-sub { font-size: 14px; color: var(--gris-texto); margin: 0 0 18px; }
.modal-bloque {
  display: flex; gap: 12px; align-items: flex-start; background: var(--papel); border: 1px solid var(--piedra);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; font-size: 14px;
}
.modal-bloque-num {
  flex: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1.5px solid var(--piedra);
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; color: var(--gris-texto);
}
/* Mismos colores que .b1-.b4 en resultado.js, para que se reconozca el reporte real */
.mb-pedir { border-left: 4px solid var(--ambar); }
.mb-senales { border-left: 4px solid var(--verde); }
.mb-conversa { border-left: 4px dashed var(--verde); }
.mb-notoca { background: #EFEFE9; border-left: 4px solid var(--salvia); }

/* ---------- Animación de "procesando" al final del cuestionario ---------- */
/* Q2/L3 (patrón "stand by"): mismo formato y mismo texto que el popup
   "¿Qué voy a recibir?" (.modal-bloque + .modal-bloque-num + colores .mb-*)
   — así la persona ve una sola explicación consistente. Cada bloque nace
   atenuado y se resalta (opacidad + numeración en verde) a medida que "se
   arma", dando sensación de progreso real en vez de un botón congelado. */
.procesando-overlay {
  display: none; position: fixed; inset: 0; background: var(--papel); z-index: 300;
  align-items: center; justify-content: center; padding: 24px;
}
.procesando-overlay.activo { display: flex; }
.procesando-caja { max-width: 440px; width: 100%; text-align: center; }
.procesando-spinner {
  width: 34px; height: 34px; border: 3px solid var(--piedra); border-top-color: var(--verde);
  border-radius: 50%; margin: 0 auto 22px; animation: girar .9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.procesando-caja h2 { font-size: 19px; margin-bottom: 6px; }
.procesando-caja > p.procesando-sub { font-size: 13.5px; color: var(--gris-texto); margin: 0 0 24px; }
.procesando-lista { display: flex; flex-direction: column; text-align: left; }
.procesando-lista .modal-bloque.procesando-item {
  margin-bottom: 10px; opacity: .4; transform: translateY(4px);
  transition: opacity .4s ease, transform .4s ease;
}
.procesando-lista .modal-bloque.procesando-item.activo { opacity: 1; transform: translateY(0); }
.procesando-item .modal-bloque-num { transition: background .3s ease, border-color .3s ease, color .3s ease; }
.procesando-item.activo .modal-bloque-num { background: var(--verde); border-color: var(--verde); color: #fff; }

/* ---------- L2: iconos de señales de alarma más buscadas ---------- */
.senales-iconos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.senal-icono-item {
  background: #fff; border: 1px solid var(--piedra); border-radius: 12px; padding: 16px 10px;
  text-decoration: none; color: var(--tinta); display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 8px;
}
.senal-icono-item:hover { border-color: var(--verde); }
.senal-icono-item img { width: 56px; height: 56px; }
.senal-icono-item span { font-size: 13px; font-weight: 600; }
@media (max-width: 640px) { .senales-iconos { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Encuesta ---------- */
/* Q1: barra de progreso sticky con texto "Paso X de Y" + tiempo restante,
   siempre visible al hacer scroll dentro del cuestionario. */
.barra-progreso-sticky {
  position: sticky; top: 0; z-index: 20; background: var(--papel);
  padding: 12px 0 6px; margin: 0 0 12px;
}
.barra-progreso-info {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 600; color: var(--gris-texto); margin-bottom: 6px;
}
.barra-progreso-info #tiempoRestante { font-weight: 500; color: var(--salvia); }
.barra-progreso { height: 6px; background: var(--piedra); border-radius: 999px; overflow: hidden; margin: 0; }
.barra-progreso > div { height: 100%; background: var(--verde); transition: width .25s ease; }

/* Q5: aviso de privacidad visible desde el primer paso (no solo al final). */
.aviso-privacidad-inicio {
  display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5;
  color: var(--gris-texto); background: #fff; border: 1px solid var(--piedra); border-radius: 10px;
  padding: 10px 12px; margin: 0 0 22px;
}
.aviso-privacidad-inicio svg { flex: 0 0 auto; margin-top: 2px; color: var(--verde); }

/* Q2: microfeedback en tiempo real tras cada respuesta (toast breve, calmado). */
.microfeedback {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  background: var(--tinta); color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 60;
}
.microfeedback.visible { opacity: 1; transform: translate(-50%, 0); }

.paso-encuesta { display: none; }
.paso-encuesta.activo { display: block; animation: aparecer .2s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }

.pregunta { margin-bottom: 28px; }
.pregunta label.etiqueta-pregunta { display: block; font-size: 18px; font-weight: 600; margin-bottom: 10px; font-family: "Instrument Sans", sans-serif; }
.pregunta .ayuda { font-size: 13px; color: var(--gris-texto); margin: -4px 0 10px; }

input[type=text], input[type=number], input[type=tel], select {
  width: 100%; font-size: 16px; padding: 12px 14px; border: 1px solid var(--piedra); border-radius: 10px;
  font-family: inherit; background: #fff; color: var(--tinta);
}

.opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.opcion {
  border: 1.5px solid var(--piedra); border-radius: 10px; padding: 12px 16px; cursor: pointer; font-size: 15px;
  background: #fff; user-select: none;
}
.opcion.seleccionada { border-color: var(--verde); background: rgba(14,124,102,.08); font-weight: 600; }
.opcion.alarma.seleccionada { border-color: var(--coral); background: rgba(228,87,46,.08); }

.checklist { display: flex; flex-direction: column; gap: 8px; }
.check-item { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--piedra); border-radius: 10px; padding: 12px 14px; cursor: pointer; }
.check-item input { margin-top: 3px; }
.check-item.marcado { border-color: var(--coral); background: rgba(228,87,46,.06); }
/* L1: inline de umbral bajo cada señal de alarma (ej. "cuánto peso, en cuánto tiempo"),
   mismo look que .checker-umbral (articulo.js) pero en bloque, debajo del nombre. */
.check-item .senal-detalle { display: block; margin-top: 3px; font-weight: 400; }

/* Beta gate: toggle discreto para activar la escalera de respaldo financiero
   (paso 1), visualmente distinto de una pregunta normal de la encuesta. */
.beta-toggle {
  font-size: 12.5px; color: var(--gris-texto); background: var(--papel);
  border: 1px dashed var(--piedra); border-radius: 10px; padding: 10px 12px; margin: 0 0 22px;
}
.beta-toggle input { margin-top: 2px; }

.navegacion-encuesta { display: flex; justify-content: space-between; margin-top: 36px; }

/* L3: el consentimiento de procesamiento de datos de salud es obligatorio (Ley 8968) —
   se distingue del texto opcional de abajo con borde sólido verde + badge, en vez de
   compartir el mismo estilo neutro de .aviso-consentimiento. */
.consentimiento-requerido {
  font-size: 13px; color: var(--tinta); background: rgba(14,124,102,.06);
  border: 1.5px solid var(--verde); border-radius: 10px; padding: 14px 16px; margin: 14px 0;
}
.badge-requerido, .badge-opcional {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
}
.badge-requerido { background: var(--verde); color: #fff; }
.badge-opcional { background: var(--piedra); color: var(--gris-texto); }

.aviso-consentimiento { font-size: 13px; color: var(--gris-texto); background: #fff; border: 1px dashed var(--piedra); border-radius: 10px; padding: 14px; margin: 14px 0; }

/* ---------- Bandera roja ---------- */
.flag { background: #fff; border: 1px solid var(--piedra); border-left: 4px solid var(--coral); border-radius: 12px; padding: 24px; }
.flag h3 { color: var(--coral); font-size: 22px; }
.flag ul { padding-left: 20px; }
.frase-ejemplo { background: var(--papel); border: 1px dashed var(--piedra); border-radius: 10px; padding: 14px; font-size: 15px; margin: 10px 0; }

/* ---------- Bloques de resultado (4 bloques) ---------- */
.bloque { border-radius: 14px; padding: 22px; margin-bottom: 20px; }
.b1 { background: #fff; border: 1px solid var(--piedra); border-left: 4px solid var(--ambar); box-shadow: 0 4px 14px rgba(11,31,26,.07); }
.b2 { background: #fff; border: 1px solid var(--piedra); border-left: 4px solid var(--verde); }
.b3 { background: #fff; border: 1px solid var(--piedra); border-left: 4px dashed var(--verde); }
.b4 { background: #EFEFE9; border: 1px solid var(--piedra); border-left: 4px solid var(--salvia); }

.b1 .btitle { color: #9a6a10; }
.b2 .btitle { color: var(--verde); }
.b3 .btitle { color: var(--verde); }
.b4 .btitle { color: #5d7d71; }
.btitle { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }

.item { font-size: 16px; font-weight: 500; padding: 12px 0; border-bottom: 1px solid var(--piedra); }
.item:last-child { border-bottom: none; }
.item .meta { font-size: 13px; color: var(--gris-texto); font-weight: 400; margin-top: 4px; }
.item .num-clave { font-weight: 600; font-variant-numeric: tabular-nums; }
.item-cuerpo { flex: 1 1 auto; min-width: 0; }

/* R1: insignia de grado de evidencia (A-D, I) junto al título. */
.badge-grado {
  display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--color-grado, #444); border: 1.3px solid var(--color-grado, #444); border-radius: 20px;
  padding: 1px 8px; vertical-align: middle; cursor: pointer;
}
/* R3: aviso de normalización cuando la recomendación viene solo por antecedente familiar. */
.nota-normalizacion {
  margin-top: 6px; font-size: 12.5px; color: #1d5f4a; background: rgba(14,124,102,.08);
  border-radius: 8px; padding: 7px 10px; display: flex; align-items: flex-start; gap: 6px;
}
@media print { .nota-normalizacion { display: none !important; } }

/* Jerarquía visual: en "Pedí esto esta semana" cada examen lleva un número
   grande y de color — el bloque que exige acción domina visualmente sobre
   los demás, en vez de pesar todos igual. */
.b1 { counter-reset: pedido; }
.b1 .item { display: flex; gap: 14px; align-items: flex-start; counter-increment: pedido; }
.b1 .item::before {
  content: counter(pedido); flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ambar); color: #442c00; font-weight: 700; font-family: "Instrument Sans", sans-serif;
  display: flex; align-items: center; justify-content: center; font-size: 14px; margin-top: 1px;
}

.capa2, .capa3 { display: none; font-size: 14px; color: var(--gris-texto); margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--piedra); }
.capa2.abierta, .capa3.abierta { display: block; }
.btn-capa { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--verde); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; font-family: inherit; }

.fuente-cita { font-size: 12px; color: #8a9691; margin-top: 8px; }
.fuente-cita a { color: #8a9691; text-decoration: underline; }

/* ---------- Ruta CCSS (ahora fusionada dentro de cada tarjeta de examen) ---------- */
.ruta-inline { }
.ruta-card .espera, .capa2 .espera { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ruta-card .espera.revision, .capa2 .espera.revision { color: var(--gris-texto); font-weight: 500; font-style: italic; }

/* ---------- Escalera financiera ---------- */
.escalera-nivel { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.escalera-nivel .punto { width: 14px; height: 14px; border-radius: 50%; background: var(--piedra); flex-shrink: 0; }
.escalera-nivel.actual .punto { background: var(--tinta); }
.escalera-nivel.sugerido .punto { background: var(--verde); }
.advertencias-lista { font-size: 13px; color: var(--gris-texto); }
.advertencias-lista li { margin-bottom: 6px; }

/* ---------- Índice de navegación (chips pegajosos con scroll-spy) ---------- */
.indice-nav {
  display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  position: sticky; top: var(--header-alto, 69px); z-index: 15; background: var(--papel);
  padding: 12px 0; margin: 0 0 18px; border-bottom: 1px solid var(--piedra);
  scrollbar-width: none; -ms-overflow-style: none;
}
/* Los bloques a los que apunta el índice deben dejar aire debajo del header +
   el propio índice (ambos sticky) para que scrollIntoView/anclas no los
   escondan detrás de la barra pegajosa. */
#resumen, [id^="bloque-"] { scroll-margin-top: var(--sticky-alto, 130px); }
.indice-nav::-webkit-scrollbar { display: none; }
/* Doble pista de que hay más chips a la derecha: degradado + flechita fija,
   porque el degradado solo (mask-image) puede pasar desapercibido — el bug
   reportado era justo que el corte se veía "roto" en vez de "deslizable". */
.indice-nav.desborda {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
}
.indice-nav.desborda::after {
  content: '›'; position: absolute; right: 2px; top: 8px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: #fff; border: 1px solid var(--piedra); color: var(--gris-texto); font-weight: 700;
  pointer-events: none;
}
.indice-nav a {
  display: inline-flex; align-items: center; gap: 5px;
  flex: 0 0 auto; text-decoration: none; color: var(--gris-texto); font-size: 12.5px; font-weight: 600;
  padding: 7px 11px; border-radius: 999px; border: 1px solid var(--piedra); background: #fff; white-space: nowrap;
  border-left-width: 3px;
}
/* Color de cada chip = color de su bloque en el reporte (mismo código que
   .mb-pedir/.mb-senales/.mb-conversa/.mb-notoca), tanto en reposo como activo,
   para que el menú anticipe visualmente lo que va a mostrar cada sección. */
.indice-nav a.chip-pedir { border-left-color: var(--ambar); }
.indice-nav a.chip-senales { border-left-color: var(--verde); }
.indice-nav a.chip-conversa { border-left-color: var(--verde); border-left-style: dashed; }
.indice-nav a.chip-notoca { border-left-color: var(--salvia); }
.indice-nav a.chip-respaldo { border-left-color: var(--coral); }
.indice-nav a.activo { color: #fff; background: var(--verde); border-color: var(--verde); }
.indice-nav a.chip-resumen.activo { background: var(--tinta); border-color: var(--tinta); }
.indice-nav a.chip-pedir.activo { background: var(--ambar); border-color: var(--ambar); color: #4a3208; }
.indice-nav a.chip-senales.activo { background: var(--verde); border-color: var(--verde); }
.indice-nav a.chip-conversa.activo { background: var(--verde); border-color: #fff; border-left-color: #fff; }
.indice-nav a.chip-notoca.activo { background: var(--salvia); border-color: var(--salvia); color: #12241d; }
.indice-nav a.chip-respaldo.activo { background: var(--coral); border-color: var(--coral); }
@media (max-width: 400px) {
  .indice-nav a { padding: 6px 9px; font-size: 12px; }
}
/* En pantallas angostas, mejor 2-3 filas completas que un scroll horizontal
   con chips cortados (reporte de usuario): se ve toda la navegación de un
   vistazo, sin necesidad de deslizar ni de la pista de degradado/flecha. */
@media (max-width: 640px) {
  .indice-nav {
    flex-wrap: wrap; row-gap: 6px; overflow-x: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  .indice-nav.desborda::after { display: none; }
}

/* ---------- Resumen ejecutivo ---------- */
.resumen-ejecutivo {
  background: #fff; border: 1px solid var(--piedra); border-left: 4px solid var(--tinta);
  border-radius: 12px; padding: 16px 20px; margin: 0 0 18px; font-size: 15px;
}
.resumen-ejecutivo p { margin: 0; }
.resumen-ejecutivo strong { color: var(--verde); }

/* ---------- Enlaces a microartículos (tráfico bidireccional con el blog SEO) ---------- */
.enlace-articulo { margin-top: 10px; }
.enlace-articulo a {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 13px; font-weight: 600;
  color: var(--verde); background: rgba(14,124,102,.07); border: 1px solid rgba(14,124,102,.25);
  padding: 7px 12px; border-radius: 8px;
}
.enlace-articulo a:hover { background: rgba(14,124,102,.14); }

/* ---------- Glosario en línea (EBAIS, USPSTF, grado A-D, etc.) ---------- */
.term { border-bottom: 1.5px dotted var(--verde); cursor: help; font-weight: 600; }
.term-popover {
  position: fixed; max-width: 280px; background: var(--tinta); color: #fff; font-size: 13px; line-height: 1.45;
  padding: 12px 14px; border-radius: 10px; z-index: 50; box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* ---------- Consentimiento comercial / lead ---------- */
.formulario-lead { display: none; }
.formulario-lead.abierto { display: block; }

/* ---------- Tarjeta para compartir ---------- */
.share { background: var(--verde); color: #fff; border-radius: 16px; padding: 28px; max-width: 320px; }
.share .big { font-family: "Instrument Sans", sans-serif; font-size: 26px; font-weight: 700; line-height: 1.18; letter-spacing: -.02em; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--piedra); margin-top: 60px; padding-top: 24px; font-size: 13px; color: var(--gris-texto); }

/* ---------- Microartículo (articulo.html / articulo.js) ---------- */
.hub-badge {
  display: inline-flex; align-items: center; background: rgba(14,124,102,.1); color: var(--verde);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 6px 12px; border-radius: 999px;
}
.articulo-deck { color: var(--gris-texto); font-size: 16px; margin: 10px 0 0; max-width: 62ch; }

.articulo-hero-img {
  display: block; width: 100%; max-width: 280px; height: auto;
  margin: 22px 0 6px; background: #fff; border: 1px solid var(--piedra);
  border-radius: 14px; padding: 10px;
}
@media print {
  .articulo-hero-img { max-width: 160px; }
}
.respuesta-directa {
  font-size: 18px; font-weight: 500; line-height: 1.5; background: #fff; border: 1px solid var(--piedra);
  border-left: 4px solid var(--verde); border-radius: 12px; padding: 18px 20px; margin: 24px 0;
}
/* M2: tarjeta combinada "causas comunes primero, alarma después" en artículos
   de Señales de alarma (ver extraerRespuestaDirecta en articulo.js). */
.respuesta-directa--con-contexto { padding: 0; overflow: hidden; }
.respuesta-directa--con-contexto .rd-fila { margin: 0; padding: 16px 20px; font-size: 16.5px; font-weight: 400; }
.respuesta-directa--con-contexto .rd-benigno { border-left: 4px solid var(--verde); border-bottom: 1px solid var(--piedra); }
.respuesta-directa--con-contexto .rd-alarma { border-left: 4px solid var(--ambar); font-weight: 500; }
.rd-rotulo { display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 6px; }
.rd-rotulo--calma { color: #1d7a4c; }
.rd-rotulo--alerta { color: #9a6a10; }
.bloque-card { background: #fff; border: 1px solid var(--piedra); border-radius: 12px; padding: 18px 20px; margin: 0 0 14px; }
.bloque-card p { margin: 0 0 8px; }
.bloque-card p:last-child { margin-bottom: 0; }
.bloque-card .bloque-titulo { font-weight: 700; margin-bottom: 4px; }
.bloque-card .bloque-nota { font-size: 12.5px; color: var(--gris-texto); font-style: italic; }
.bloque-card.zona { border-left: 4px solid var(--ambar); background: rgba(242,169,59,.06); }
.bloque-card.no-toca { border-left: 4px solid var(--salvia); background: rgba(127,169,155,.08); }
.bloque-card.fuente { background: var(--papel); font-size: 13px; color: var(--gris-texto); }
.cta-articulo { background: var(--verde); color: #fff; border-radius: 14px; padding: 22px 24px; margin: 28px 0; }
.cta-articulo p { margin: 0 0 12px; font-size: 15px; }
.cta-articulo .btn { background: #fff; color: var(--verde); }
.relacionados-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.relacionados-lista a {
  display: block; text-decoration: none; color: var(--tinta); font-weight: 600; font-size: 14.5px;
  background: #fff; border: 1px solid var(--piedra); border-radius: 10px; padding: 12px 14px;
}
.relacionados-lista a:hover { border-color: var(--verde); color: var(--verde); }
.fuentes-lista { list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--gris-texto); }
.fuentes-lista li { margin-bottom: 6px; }
.fuentes-lista a { color: var(--verde); }

/* Checker de señales relacionadas (clusters educativos, ej. síntomas B) */
.checker-card { border-left: 4px solid var(--ambar); background: rgba(242,169,59,.05); }
.checker-intro { font-size: 14px; }
.checker-lista { list-style: none; padding: 0; margin: 10px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.checker-lista li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.checker-lista label { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14.5px; }
.checker-lista input[type="checkbox"] { accent-color: var(--verde); width: 16px; height: 16px; flex: none; }
/* M1: icono reconocible por señal (patrón Know Your Lemons) junto al texto. */
.checker-icono { flex: none; width: 22px; height: 22px; object-fit: contain; }
.checker-icono--generico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--ambar); }
@media print { .checker-icono { display: none; } }
.checker-umbral { font-size: 12px; color: var(--gris-texto); font-style: italic; }
.checker-guia { font-size: 12.5px; color: var(--verde); white-space: nowrap; }
.checker-alerta { margin-top: 14px; border: 1px solid var(--ambar); border-left: 4px solid var(--ambar); background: rgba(242,169,59,.13); border-radius: 10px; padding: 14px 16px; }
.checker-alerta p { margin: 0 0 10px; font-size: 14px; }
.checker-alerta-titulo { font-weight: 700; color: #9a6a10; }
.checker-siguiente-paso { font-size: 13.5px; }
.checker-alerta .btn { font-size: 13.5px; padding: 9px 16px; }
.checker-privacidad { margin: 12px 0 0; font-size: 12px; color: var(--gris-texto); font-style: italic; }
@media print { .checker-senales { display: none !important; } }

/* ---------- Acciones rápidas (resultado) ---------- */
.acciones-rapidas { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.accion-btn {
  display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--piedra);
  border-radius: 10px; padding: 11px 16px; font-size: 14px; font-weight: 600; color: var(--tinta);
  cursor: pointer; font-family: inherit; text-decoration: none; min-height: 44px;
}
.accion-btn:hover { border-color: var(--verde); color: var(--verde); }
.acciones-nota { font-size: 12px; color: #8a9691; margin: 0 0 20px; }

/* ---------- Banner "retomar calendario" ---------- */
.banner-retomar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--piedra); border-left: 4px solid var(--verde);
  border-radius: 12px; padding: 16px 18px; margin: 0 0 28px; font-size: 14px;
}
.banner-retomar a.btn { padding: 10px 18px; font-size: 14px; }

/* ---------- Barra de acciones fija en móvil ---------- */
@media (max-width: 640px) {
  /* Antes: 3 botones apilados a todo el ancho ocupaban ~180px fijos abajo,
     tapando buena parte de la lectura en pantallas chicas (reporte de
     usuario). Ahora es una barra compacta tipo "tab bar" — ícono + etiqueta
     chiquita en una sola fila — igual de accesible pero mucho más baja. */
  .acciones-rapidas.fija-movil {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--papel);
    margin: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--piedra); box-shadow: 0 -6px 14px rgba(11,31,26,.06);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  }
  .acciones-rapidas.fija-movil .accion-btn {
    flex-direction: column; gap: 3px; padding: 6px 2px; min-height: 0;
    border: none; background: none; border-radius: 8px;
    font-size: 10.5px; font-weight: 600; line-height: 1.15; text-align: center;
  }
  .acciones-rapidas.fija-movil .accion-btn:active,
  .acciones-rapidas.fija-movil .accion-btn:hover { background: rgba(14,124,102,.08); color: var(--verde); }
  .acciones-rapidas.fija-movil .accion-btn svg { width: 18px; height: 18px; }
  .envoltura { padding-bottom: 76px; }
}

/* ---------- Impresión / descarga en PDF ----------
   Dos perfiles de impresión, decididos por edad (ver activarAccionesRapidas()
   en resultado.js, que agrega la clase al <body> antes de imprimir):
   - .perfil-print-menor40: contenido típicamente más corto (menos tamizajes
     aplican todavía) -> se compacta con fuentes/paddings chicos para caber
     en 1 página en el caso típico.
   - .perfil-print-40mas: más tamizajes aplican (normalmente varias páginas
     de contenido real) -> se prioriza la LEGIBILIDAD (texto más grande)
     sobre el número de páginas. El contenido fluye de forma continua y
     compacta (sin saltos de página forzados) para no desperdiciar papel;
     solo se evita cortar un examen/nivel individual a la mitad.
   Las secciones de marketing/CTA (tarjeta para compartir en redes, formulario
   de contacto con un asesor) se ocultan del PDF: son para la pantalla, no
   para un documento que la persona va a imprimir o llevar al médico. */
@media print {
  /* size: letter fija el tamaño de papel para que "Guardar como PDF" sea
     predecible — el ajuste automático de escala en resultado.js
     (activarAjusteEscalaImpresion) asume estas MISMAS medidas (Letter,
     márgenes 12mm/24mm) para calcular cuánto encoger el contenido y que
     quepa en 1 o 2 páginas exactas. Si cambiás esto, actualizá también
     esas constantes en resultado.js. */
  @page { size: letter; margin: 12mm 10mm; }
  .encabezado a.btn, .acciones-rapidas, #btnCopiar, #zonaLead, .pie,
  .btn-capa, .banner-retomar, #btnEmpezarDeNuevo, .indice-nav, .enlace-articulo,
  .resumen-ejecutivo,
  #seccion-compartir, #seccion-asesor { display: none !important; }
  .capa2, .capa3 { display: block !important; }
  .term { border-bottom: none; font-weight: inherit; }
  body { background: #fff; }
  .envoltura, .envoltura-ancha { padding: 0; max-width: none; }
  h1 { margin: 0 0 4px; }
  h2.rotulo { margin: 16px 0 8px; break-after: avoid; }

  /* IMPORTANTE: el "unbreakable" va en la UNIDAD MÍNIMA (cada examen/ítem,
     cada nivel de la escalera), nunca en el contenedor .bloque que agrupa
     varios ítems. Poner break-inside:avoid en .bloque fuerza TODO el grupo
     (que casi siempre mide más que una página) a empezar en página nueva y
     aun así lo corta igual, dejando páginas casi en blanco en cascada. */
  .bloque, .card, .ruta-card { box-shadow: none !important; }
  .item, .escalera-nivel, .flag { break-inside: avoid; }
  .btitle { break-after: avoid; margin-bottom: 10px; }
  .bloque { padding: 16px 18px; margin-bottom: 10px; }
  .item { padding: 10px 0; }

  /* ---- Perfil menor de 40: aspira a 1 página (texto compacto) ---- */
  body.perfil-print-menor40 { font-size: 12px; }
  body.perfil-print-menor40 h1 { font-size: 20px; }
  body.perfil-print-menor40 h2.rotulo { font-size: 11px; margin: 10px 0 5px; }
  body.perfil-print-menor40 .bloque { padding: 10px 12px; margin-bottom: 6px; border-radius: 8px; }
  body.perfil-print-menor40 .item { padding: 4px 0; font-size: 12px; }
  body.perfil-print-menor40 .item .meta { font-size: 10.5px; margin-top: 2px; }
  body.perfil-print-menor40 .btitle { font-size: 10.5px; margin-bottom: 5px; }
  body.perfil-print-menor40 .b1 .item::before { width: 18px; height: 18px; font-size: 10px; }
  body.perfil-print-menor40 .card { padding: 10px 12px; }
  body.perfil-print-menor40 .escalera-nivel { padding: 4px 0; gap: 10px; }
  body.perfil-print-menor40 .advertencias-lista { font-size: 10.5px; }
  body.perfil-print-menor40 .fuente-cita { font-size: 10px; }

  /* ---- Perfil 40+: texto grande y legible (prioriza legibilidad sobre cantidad de páginas) ---- */
  body.perfil-print-40mas { font-size: 15px; line-height: 1.42; }
  body.perfil-print-40mas h1 { font-size: 26px; }
  body.perfil-print-40mas h2.rotulo { font-size: 14px; }
  body.perfil-print-40mas .btitle { font-size: 13px; }
  body.perfil-print-40mas .item { font-size: 16px; padding: 10px 0; }
  body.perfil-print-40mas .item .meta { font-size: 13.5px; }
  body.perfil-print-40mas .capa2, body.perfil-print-40mas .capa3 { font-size: 13.5px; }
  body.perfil-print-40mas .b1 .item::before { width: 30px; height: 30px; font-size: 14px; }
  body.perfil-print-40mas .escalera-nivel .espera,
  body.perfil-print-40mas .capa2 .espera { font-size: 16px; }
  body.perfil-print-40mas .advertencias-lista { font-size: 13px; }
  /* No se fuerza un salto de página antes de la escalera de respaldo: la
     cantidad de tamizajes/señales aplicables varía mucho según el perfil
     (puede ser 1 página o pueden ser 4), así que forzar un salto fijo aquí
     dejaba páginas enteras casi en blanco. Mejor dejar que el contenido
     fluya y se empaque de forma continua; .item/.escalera-nivel ya evitan
     que un examen o nivel individual quede cortado a la mitad. */
}