/* Armonización con la identidad HeartTrends LATAM.
   Solo variables de color: la lógica clínica de la calculadora no se toca.
   Verde, ámbar y rojo se conservan: son semántica de riesgo, no marca. */
:root {
  --azul: #116DFF;            /* acción principal → azul Clínica Rivera */
  --azul-osc: #0A1B33;        /* profundidad → azul HeartTrends */
  --acento: #116DFF;
  --fondo: #FAF8F4;
  --tinta: #17253C;
}

/* Tema oscuro manual: la calculadora acompaña al resto del sitio */
:root[data-theme="dark"] {
  --fondo: #0F2038;
  --blanco: #172B4C;
  --tinta: #F2F5FA;
  --gris: #9FB0C7;
  --linea: rgba(255,255,255,.16);
  --azul: #4D94FF;
  --azul-osc: #F2F5FA;
}

/* ══════════════════════════════════════════════════════════════════════
   Homogeneidad de tono y legibilidad
   Regla: un solo tono por tema. Sin degradados que mezclen el naranja de
   marca con azules heredados. Los colores y los botones se conservan;
   lo que se retira es la mezcla.
   ══════════════════════════════════════════════════════════════════════ */

/* Fondo plano: se retiran el radial y el degradado superpuestos */
body {
  background: var(--fondo) !important;
  background-attachment: scroll !important;
}

/* Botón principal: color de marca sólido, sin degradado a azul */
.btn-primary {
  background: var(--azul) !important;
  box-shadow: 0 6px 16px -8px color-mix(in oklab, var(--azul) 70%, transparent) !important;
}
.btn-primary:hover {
  background: color-mix(in oklab, var(--azul) 88%, #000) !important;
  box-shadow: 0 8px 20px -8px color-mix(in oklab, var(--azul) 75%, transparent) !important;
}

/* Sello de marca y barra de probabilidad: mismo criterio.
   Acotado a .brand: el encabezado del sitio también usa la clase .logo y
   este fondo lo pintaba de naranja (colisión detectada por el Dr. 10-ago). */
.brand .logo { background: var(--azul) !important; }
.prob-bar.band-strong { background: var(--azul) !important; }

/* Caja del fundamento científico: el blanco estaba fijo, y en tema oscuro
   dejaba texto claro sobre fondo blanco. Ahora sigue al tema. */
.foundation {
  background: var(--blanco) !important;
  border-color: var(--linea) !important;
}
.foundation summary {
  color: var(--tinta) !important;
  font-weight: 600;
}
.foundation summary::before { content: "" !important; }
.foundation p { color: var(--gris) !important; }

/* Texto de entrada: más fino y con más aire para leerse de corrido */
.hint {
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--gris);
}
.hint strong { font-weight: 600; color: var(--tinta); }

/* ══════════════════════════════════════════════════════════════════════
   Tema oscuro completo
   La hoja original fija cerca de cuarenta fondos claros en hexadecimal.
   Al oscurecer solo las variables, esos componentes quedaban con texto
   claro sobre fondo claro. Aquí se remapean por familias, sin tocar la
   lógica clínica ni la semántica de riesgo (verde, ámbar, rojo se
   conservan como tinte, porque significan algo).
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --sup-1: #172B4C;   /* superficie base   */
  --sup-2: #1E3559;   /* elevada / hover   */
  --sup-3: #26406B;   /* activa / elegida  */
}

/* — Superficies neutras — */
:root[data-theme="dark"] .option-btn,
:root[data-theme="dark"] .cat-btn,
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .exam-panel,
:root[data-theme="dark"] .result-summary,
:root[data-theme="dark"] .rec-card,
:root[data-theme="dark"] .text-field,
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .lang-toggle,
:root[data-theme="dark"] .prob-meta {
  background: var(--sup-1) !important;
  color: var(--tinta) !important;
  border-color: var(--linea) !important;
}
:root[data-theme="dark"] .option-btn:hover,
:root[data-theme="dark"] .cat-btn:hover,
:root[data-theme="dark"] .btn-secondary:hover {
  background: var(--sup-2) !important;
}
:root[data-theme="dark"] .option-btn.selected,
:root[data-theme="dark"] .option-check.selected,
:root[data-theme="dark"] .option-btn.selected:hover,
:root[data-theme="dark"] .option-btn:active,
:root[data-theme="dark"] .ver {
  background: var(--sup-3) !important;
  color: var(--tinta) !important;
  border-color: color-mix(in oklab, var(--azul) 55%, transparent) !important;
}

/* — Barras y pistas de progreso — */
:root[data-theme="dark"] .prob-track,
:root[data-theme="dark"] .m-track,
:root[data-theme="dark"] .prob-band.band-low,
:root[data-theme="dark"] .prob-band.band-mid,
:root[data-theme="dark"] .prob-band.band-strong {
  background: var(--sup-2) !important;
  color: var(--tinta) !important;
}

/* — Casilla de verificación: fondo blanco fijo, ahora hueca con borde — */
:root[data-theme="dark"] .option-check::before {
  background: transparent !important;
  border-color: var(--gris) !important;
}

/* — Semántica de riesgo: se conserva el color, se ajusta la intensidad — */
:root[data-theme="dark"] .sem-verde,
:root[data-theme="dark"] .option-btn.yn-yes.selected { background: rgba(31,157,107,.22) !important; color: var(--tinta) !important; }
:root[data-theme="dark"] .sem-amarillo { background: rgba(224,168,45,.22) !important; color: var(--tinta) !important; }
:root[data-theme="dark"] .sem-rojo,
:root[data-theme="dark"] .allergy-alert,
:root[data-theme="dark"] .rec-card.rec-priority,
:root[data-theme="dark"] .option-btn.yn-no.selected { background: rgba(214,69,69,.22) !important; color: var(--tinta) !important; }
:root[data-theme="dark"] .verdict.sem-rojo,
:root[data-theme="dark"] .verdict.sem-amarillo { color: var(--tinta) !important; }

/* — EL RESULTADO NO SE APAGA DE NOCHE (orden del Dr., 10-ago) —
   La tarjeta del riesgo conserva su semáforo VIVO también en modo oscuro:
   amarillo BRILLANTE para riesgo intermedio, verde y rojo con la misma
   energía. La tinta dentro de la tarjeta vuelve a ser oscura para leerse
   sobre el color encendido. */
:root[data-theme="dark"] .risk-hero.sem-verde {
  background: linear-gradient(160deg, #86EFB8 0%, #C6F7DD 55%, #EEFCF4 100%) !important;
}
:root[data-theme="dark"] .risk-hero.sem-amarillo {
  background: linear-gradient(160deg, #FFD400 0%, #FFC845 50%, #FFE08A 100%) !important;
}
:root[data-theme="dark"] .risk-hero.sem-rojo {
  background: linear-gradient(160deg, #FF8A7E 0%, #FFB3AB 55%, #FFD3CE 100%) !important;
}
:root[data-theme="dark"] .risk-hero .risk-kicker { color: #4A3A10 !important; }
:root[data-theme="dark"] .risk-hero .risk-num { color: var(--sem-fuerte) !important; }
:root[data-theme="dark"] .risk-hero .verdict,
:root[data-theme="dark"] .risk-hero .verdict.sem-amarillo,
:root[data-theme="dark"] .risk-hero .verdict.sem-rojo,
:root[data-theme="dark"] .risk-hero p { color: #16212E !important; }

/* — La tira de pasos, elegante también de noche (orden del Dr., 10-ago):
   nada de franja blanca pegada; superficie del tema, números legibles. — */
:root[data-theme="dark"] .progreso {
  background: linear-gradient(180deg, var(--fondo) 78%, transparent) !important;
}
:root[data-theme="dark"] .step { color: #9DB8DF !important; }
:root[data-theme="dark"] .prog-paso { border-top-color: var(--linea); }
:root[data-theme="dark"] .prog-paso .prog-n {
  background: var(--sup-1); border-color: var(--linea); color: var(--tinta);
}
:root[data-theme="dark"] .prog-paso .prog-t { color: #8FA5C4; }
:root[data-theme="dark"] .prog-paso.actual { border-top-color: var(--acento); }
:root[data-theme="dark"] .prog-paso.actual .prog-n {
  background: var(--sup-2); border-color: var(--acento); color: var(--acento);
}
:root[data-theme="dark"] .prog-paso.actual .prog-t { color: var(--tinta); }
:root[data-theme="dark"] .prog-paso.hecho .prog-n {
  background: var(--acento); border-color: var(--acento); color: #fff;
}

/* — Aviso — */
:root[data-theme="dark"] .disclaimer {
  background: rgba(224,168,45,.14) !important;
  color: var(--tinta) !important;
  border-color: rgba(224,168,45,.30) !important;
}

/* — Tarjeta principal y fundamento — */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .foundation { background: var(--sup-1) !important; }


/* ══════════════════════════════════════════════════════════════════════
   Semántica de respuesta: el color pesa antes que la palabra
   Lo adverso lleva marco rojo; lo favorable, marco verde. Se asigna por
   SIGNIFICADO de la respuesta, no por su posición: en "¿Fuma?" el "Sí"
   es lo adverso, y en "¿Tiene el colesterol?" el "Sí" es lo favorable.
   Nada queda neutro.
   ══════════════════════════════════════════════════════════════════════ */
.option-btn.opt-bien, .option-btn.yn-yes {
  border: 1.5px solid var(--verde);
  background: var(--blanco);
  color: color-mix(in oklab, var(--verde) 78%, #000);
  box-shadow: none;
}
.option-btn.opt-bien:hover, .option-btn.yn-yes:hover {
  background: color-mix(in oklab, var(--verde) 10%, var(--blanco));
  border-color: var(--verde);
}
.option-btn.opt-bien.selected, .option-btn.yn-yes.selected {
  background: color-mix(in oklab, var(--verde) 18%, var(--blanco));
  border-color: var(--verde);
  box-shadow: inset 0 0 0 1px var(--verde);
}

.option-btn.opt-mal, .option-btn.yn-no {
  border: 1.5px solid var(--rojo);
  background: var(--blanco);
  color: color-mix(in oklab, var(--rojo) 82%, #000);
  box-shadow: none;
}
.option-btn.opt-mal:hover, .option-btn.yn-no:hover {
  background: color-mix(in oklab, var(--rojo) 10%, var(--blanco));
  border-color: var(--rojo);
}
.option-btn.opt-mal.selected, .option-btn.yn-no.selected {
  background: color-mix(in oklab, var(--rojo) 18%, var(--blanco));
  border-color: var(--rojo);
  box-shadow: inset 0 0 0 1px var(--rojo);
}

/* En oscuro el marco manda y el texto se aclara para mantener contraste */
:root[data-theme="dark"] .option-btn.opt-bien,
:root[data-theme="dark"] .option-btn.yn-yes {
  background: var(--sup-1) !important;
  border-color: var(--verde) !important;
  color: color-mix(in oklab, var(--verde) 55%, #FFF) !important;
}
:root[data-theme="dark"] .option-btn.opt-bien.selected,
:root[data-theme="dark"] .option-btn.yn-yes.selected {
  background: rgba(31,157,107,.26) !important;
  color: #EAF7F0 !important;
}
:root[data-theme="dark"] .option-btn.opt-mal,
:root[data-theme="dark"] .option-btn.yn-no {
  background: var(--sup-1) !important;
  border-color: var(--rojo) !important;
  color: color-mix(in oklab, var(--rojo) 50%, #FFF) !important;
}
:root[data-theme="dark"] .option-btn.opt-mal.selected,
:root[data-theme="dark"] .option-btn.yn-no.selected {
  background: rgba(224,68,63,.26) !important;
  color: #FDECEB !important;
}

/* Campo obligatorio sin llenar: se señala y se lleva al usuario hasta él */
.campo-falta,
.campo-falta.text-field {
  border-color: var(--rojo) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--rojo) 22%, transparent) !important;
}
.options.campo-falta {
  border: 0 !important;
  box-shadow: none !important;
  outline: 2px solid var(--rojo);
  outline-offset: 4px;
  border-radius: 12px;
}
.error { font-weight: 500; }

/* — Presión por rango: cuadrícula 2x2 con su color y su unidad.
     "No la sé" ocupa el ancho completo debajo. — */
.rangos-pas {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px !important;
  margin-top: 8px;
}
.rangos-pas .rango-pas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  padding: 13px 10px;
  min-height: 64px;
}
.rangos-pas .rango-pas strong { font-size: 14px; font-weight: 700; line-height: 1.25; }
.rangos-pas .rango-pas span { font-size: 12.5px; font-weight: 500; opacity: .85; }
.rangos-pas .opt-nose { grid-column: 1 / -1; min-height: 48px; flex-direction: row; gap: 8px; }

/* "No la sé": neutro a propósito — no es un estado clínico, es la
   invitación a medirse. Hereda el tono de superficie, no un color. */
.option-btn.opt-nose {
  border: 1.5px dashed var(--gris);
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: none;
}
.option-btn.opt-nose:hover { border-color: var(--tinta); background: var(--blanco); }
.option-btn.opt-nose.selected {
  border-style: solid;
  border-color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--tinta);
  background: color-mix(in oklab, var(--gris) 14%, var(--blanco));
}
:root[data-theme="dark"] .option-btn.opt-nose {
  background: var(--sup-1) !important;
  border-color: var(--gris) !important;
  color: var(--tinta) !important;
}
:root[data-theme="dark"] .option-btn.opt-nose.selected {
  background: var(--sup-3) !important;
  border-color: var(--tinta) !important;
}

.option-btn.opt-medio {
  border: 1.5px solid var(--ambar);
  background: var(--blanco);
  color: color-mix(in oklab, var(--ambar) 80%, #000);
  box-shadow: none;
}
.option-btn.opt-medio:hover {
  background: color-mix(in oklab, var(--ambar) 10%, var(--blanco));
  border-color: var(--ambar);
}
.option-btn.opt-medio.selected {
  background: color-mix(in oklab, var(--ambar) 18%, var(--blanco));
  border-color: var(--ambar);
  box-shadow: inset 0 0 0 1px var(--ambar);
}
:root[data-theme="dark"] .option-btn.opt-medio {
  background: var(--sup-1) !important;
  border-color: var(--ambar) !important;
  color: color-mix(in oklab, var(--ambar) 55%, #FFF) !important;
}
:root[data-theme="dark"] .option-btn.opt-medio.selected {
  background: rgba(224,149,27,.26) !important;
  color: #FBF1DF !important;
}

/* Aviso de dato estimado en el resultado */
.nota-estimada {
  margin-top: 12px;
  padding: 11px 14px;
  border-left: 3px solid var(--ambar);
  background: color-mix(in oklab, var(--ambar) 12%, var(--blanco));
  border-radius: 0 10px 10px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--tinta);
}
:root[data-theme="dark"] .nota-estimada { background: rgba(224,149,27,.16); }

/* El botón secundario quedaba casi invisible sobre la tarjeta oscura */
:root[data-theme="dark"] .btn-secondary {
  border: 1px solid var(--linea) !important;
  color: var(--tinta) !important;
}
:root[data-theme="dark"] .btn-secondary:hover { border-color: var(--gris) !important; }

/* — Botones de compartir: icono SVG alineado con el texto — */
.share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.share-btn .ico, .verdict .ico { width: 17px; height: 17px; flex: 0 0 auto; }
#cta-wa .ico { width: 18px; height: 18px; }

/* En oscuro el icono de la recomendación hereda un color legible */
:root[data-theme="dark"] .rec-card .rec-ico { color: var(--tinta); }

/* Botón Copiar: heredaba el naranja de --azul y en oscuro el texto se
   fundía. Blanco explícito en ambos temas. */
.share-doc { color: #fff !important; }
:root[data-theme="dark"] .share-doc { background: var(--azul) !important; color: #10233F !important; }
:root[data-theme="dark"] .share-wa { background: #25d366 !important; color: #073a17 !important; }
:root[data-theme="dark"] .share-pdf { background: var(--sup-3) !important; color: var(--tinta) !important; }

/* Cuarto nivel de la escala AHA: hipertensión etapa 1, naranja entre el
   ámbar de "elevada" y el rojo de "etapa 2" */
.option-btn.opt-alto {
  border: 1.5px solid #E06A1B;
  background: var(--blanco);
  color: color-mix(in oklab, #E06A1B 82%, #000);
  box-shadow: none;
}
.option-btn.opt-alto:hover {
  background: color-mix(in oklab, #E06A1B 10%, var(--blanco));
  border-color: #E06A1B;
}
.option-btn.opt-alto.selected {
  background: color-mix(in oklab, #E06A1B 18%, var(--blanco));
  border-color: #E06A1B;
  box-shadow: inset 0 0 0 1px #E06A1B;
}
:root[data-theme="dark"] .option-btn.opt-alto {
  background: var(--sup-1) !important;
  border-color: #E06A1B !important;
  color: color-mix(in oklab, #E06A1B 52%, #FFF) !important;
}
:root[data-theme="dark"] .option-btn.opt-alto.selected {
  background: rgba(224,106,27,.26) !important;
  color: #FBEBDD !important;
}

/* ══════════════════════════════════════════════════════════════════════
   Barra de avance del cuestionario
   La persona siempre sabe en qué paso está. Los pasos ya recorridos son
   botones: retroceder es libre y no pierde nada. Avanzar es con Continuar.
   ══════════════════════════════════════════════════════════════════════ */
.progreso {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  padding: 0;
}
.prog-paso {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 2px 9px;
  background: transparent;
  border: 0;
  border-top: 3px solid var(--linea);
  cursor: default;
  font-family: inherit;
}
.prog-paso .prog-n {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1.5px solid var(--linea);
  color: var(--gris);
  font-size: 11.5px; font-weight: 700;
  background: var(--blanco);
}
.prog-paso .prog-t { font-size: 10.5px; font-weight: 600; color: var(--gris); letter-spacing: .01em; }
.prog-paso.actual { border-top-color: var(--acento); }
.prog-paso.actual .prog-n { border-color: var(--acento); color: var(--acento); }
.prog-paso.actual .prog-t { color: var(--tinta); }
.prog-paso.hecho { border-top-color: color-mix(in oklab, var(--acento) 55%, var(--linea)); cursor: pointer; }
.prog-paso.hecho .prog-n {
  background: var(--acento); border-color: var(--acento); color: #fff;
}
/* palomita en los pasos completados */
.prog-paso.hecho .prog-n::before {
  content: ""; width: 6px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.prog-paso.hecho:hover .prog-t { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 430px) { .prog-paso .prog-t { font-size: 9px; } }

/* ══════════════════════════════════════════════════════════════════════
   Barra del sitio: desde la calculadora siempre se puede volver
   ══════════════════════════════════════════════════════════════════════ */
.barra-sitio {
  position: sticky; top: 0; z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px clamp(18px, 4vw, 28px);
  font-size: 13.5px;
  background: color-mix(in oklab, var(--fondo) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.barra-sitio a { text-decoration: none; }
.bs-logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--tinta); font-size: 14.5px;
  letter-spacing: -0.01em;
}
.bs-logo svg { width: 20px; height: 20px; color: var(--acento); }
.bs-logo em { font-style: normal; color: var(--acento); font-weight: 500; }
.bs-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.bs-nav a:not(.bs-wa) {
  color: var(--gris); font-weight: 500;
  padding: 7px 12px; border-radius: 999px;
  transition: color .15s, background .15s;
}
.bs-nav a:not(.bs-wa):hover { color: var(--tinta); background: color-mix(in oklab, var(--gris) 14%, transparent); }
.bs-wa {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 6px; padding: 8px 16px;
  background: var(--acento); color: #fff !important;
  border-radius: 999px; font-weight: 600;
  white-space: nowrap;
  transition: background .15s;
}
.bs-wa:hover { background: color-mix(in oklab, var(--acento) 88%, #000); }
.bs-wa svg { width: 15px; height: 15px; }
@media (max-width: 520px) {
  .bs-nav a.bs-extra { display: none; }
  .barra-sitio { gap: 10px; }
}

/* Encuadre móvil de la barra superior (auditoría 8-ago) */
@media (max-width: 430px) {
  .bs-wa .bs-wa-txt { display: none; }
  .bs-wa { padding: 8px 10px; margin-left: 2px; }
  .bs-nav a:not(.bs-wa) { padding: 7px 9px; }
  .barra-sitio { gap: 8px; }
}

/* Apartado: la evaluación por niveles (Instrucción Maestra, ago-2026) */
.niveles { max-width: 620px; margin: 26px auto 0; padding: 0 4px; }
.niveles__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acento); }
.niveles__t { font-size: 22px; margin-top: 6px; color: var(--tinta); }
.niveles__intro { margin-top: 8px; color: var(--gris); font-size: 14.5px; line-height: 1.55; }
.nivel { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--linea); border-left: 3px solid var(--acento); border-radius: 12px; }
.nivel__cab { display: flex; align-items: center; gap: 10px; }
.nivel__n { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px;
  background: color-mix(in oklab, var(--acento) 14%, transparent); color: var(--acento); font-weight: 700; }
.nivel h3 { font-size: 15.5px; color: var(--tinta); margin: 0; }
.nivel p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--gris); }
.nivel--ht { border-left-color: #D92B2B; }
.nivel--ht .nivel__n { background: color-mix(in oklab, #D92B2B 14%, transparent); color: #D92B2B; }
.niveles__nota { margin-top: 14px; font-size: 13px; color: var(--gris); font-style: italic; }

/* :focus-within: el campo entero se enciende (8-ago) */
.campo:focus-within label, .q:focus-within legend { color: var(--acento); }
.campo:focus-within input, .campo:focus-within select {
  border-color: var(--acento);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--acento) 15%, transparent);
}

/* Cartas de niveles que rotan (patrón perlas, 8-ago) */
.niveles__mesa { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 14px; margin-top: 18px; }
.ncarta { perspective: 1200px; cursor: pointer; }
.ncarta__inner { position: relative; height: 24rem; transition: transform .55s cubic-bezier(.2,.7,.3,1); transform-style: preserve-3d; }
.ncarta.volteada .ncarta__inner { transform: rotateY(180deg); }
.ncarta__lado { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid var(--linea); border-radius: 16px; padding: 18px; display: flex; flex-direction: column;
  background: var(--fondo, #fff); transition: visibility 0s .27s; }
.ncarta__dorso { transform: rotateY(180deg); }
.ncarta:not(.volteada) .ncarta__dorso { visibility: hidden; }
.ncarta.volteada .ncarta__frente { visibility: hidden; }
.ncarta--n1 .ncarta__lado { border-top: 4px solid var(--acento); }
.ncarta--n2 .ncarta__lado { border-top: 4px solid #116DFF; }
.ncarta--n3 .ncarta__lado { border-top: 4px solid #0E7A3D; }
.ncarta--ht .ncarta__lado { border-top: 4px solid #D92B2B; }
.ncarta__num { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px;
  background: color-mix(in oklab, var(--acento) 14%, transparent); color: var(--acento);
  font-weight: 700; font-size: 18px; }
.ncarta--ht .ncarta__num { background: color-mix(in oklab, #D92B2B 14%, transparent); color: #D92B2B; }
.ncarta__frente h3 { margin: 12px 0 0; font-size: 17px; color: var(--tinta); }
.ncarta__frente p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--gris); }
.ncarta__pista { margin-top: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--acento); }
.ncarta__pista--pie { margin-top: 8px; color: var(--gris); }
.ncarta__scroll { overflow-y: auto; min-height: 0; flex: 1; padding-right: 4px; }
.ncarta__scroll h4 { margin: 10px 0 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.ncarta__scroll h4:first-child { margin-top: 0; }
.ncarta__scroll p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--gris); }
.ncarta__wa { display: inline-flex; align-items: center; margin-top: 8px; padding: 7px 14px;
  border-radius: 999px; background: #0E7A3D; color: #fff !important; font-size: 12.5px;
  font-weight: 600; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .ncarta__inner { transition: none; } }

/* Homogeneidad tipográfica con el sitio + detalles vivos (8-ago noche) */
.bs-nav a:not(.bs-wa) { border: 1px solid var(--linea); display: inline-flex; align-items: center; gap: 6px; }
.bs-ico { width: 16px; height: 16px; opacity: .8; }
.latido { width: 1.25em; height: 1.25em; vertical-align: -0.22em; display: inline-block;
  animation: latidoClasico 1s ease-in-out infinite; transform-origin: center; }
@keyframes latidoClasico { 0%,100% { transform: scale(1); } 14% { transform: scale(1.18); }
  28% { transform: scale(1); } 42% { transform: scale(1.12); } 60% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .latido { animation: none; } }
.niveles__intro, .q, .app p { font-size: 16px; line-height: 1.65; }
.niveles__t { font-size: 24px; }
.nivel p, .ncarta__scroll p { font-size: 14px; }
.disclaimer, .foundation { font-size: 14px; }
.niv-teaser { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center;
  border: 1px solid var(--linea); border-radius: 16px; padding: 18px; overflow: hidden; }
.niv-teaser__foto { margin: 0; border-radius: 12px; overflow: hidden; }
.niv-teaser__foto img { width: 100%; height: 100%; object-fit: cover; display: block;
  animation: fotoRespira 9s ease-in-out infinite alternate; }
@keyframes fotoRespira { from { transform: scale(1); } to { transform: scale(1.06); } }
.niv-teaser__btn { display: inline-block; }
@media (max-width: 560px) { .niv-teaser { grid-template-columns: 1fr; } .niv-teaser__foto { max-height: 160px; } }
@media (prefers-reduced-motion: reduce) { .niv-teaser__foto img { animation: none; } }

/* WhatsApp verde también aquí + textos más grandes (8-ago noche) */
.bs-wa { background: #0E7A3D !important; }
.bs-wa:hover { background: #0B6332 !important; }
.niveles__intro, .app p, .q { font-size: 17px; }
.calc-cierre__caja p { font-size: 16px; }
.nivel p, .ncarta__scroll p { font-size: 15px; }
.disclaimer, .foundation { font-size: 14.5px; }
.foundation summary { font-size: 15.5px; }
/* En teléfonos angostos los iconos de la barra ceden el espacio al texto */
@media (max-width: 500px) {
  .bs-nav a:not(.bs-wa) .bs-ico { display: none; }
  .bs-nav a:not(.bs-wa) { padding: 7px 8px; }
  .barra-sitio { gap: 6px; }
}
/* El ocultamiento móvil manda sobre el display de los iconos (fix cascada) */
@media (max-width: 520px) { .bs-nav a.bs-extra { display: none !important; } }

/* ══════════════════════════════════════════════════════════════════════
   Revisión del Dr. en su iPhone (12-ago-2026)
   1) Nada se ve "premarcado": el foco fantasma del navegador pintaba un
      aro naranja sobre el primer factor al entrar al paso.
   2) Casillas con marco de luz VERDE antes de marcar; al marcar un factor
      de riesgo el marco se torna ROJO; «Ninguno de los anteriores» se
      queda VERDE también marcado.
   3) Los cuatro botones de compartir con marco de luz; el del cardiólogo
      en rojo con el corazón latiendo; Copiar y Descargar con icono vivo.
   4) «Reservar mi HeartTrends por WhatsApp» lleva el marco más grande y
      más veloz de la página: la persona acaba de terminar su cálculo.
   ══════════════════════════════════════════════════════════════════════ */

/* 1 — foco fantasma fuera de las casillas (el estado lo dice el marco;
   los campos obligatorios sin llenar siguen señalándose con .campo-falta) */
#cv-root .option-btn:focus, #cv-root .option-btn:focus-visible { outline: none !important; }
/* En pantallas táctiles el hover se queda "pegado" tras el toque anterior
   y pintaba el primer factor como premarcado (borde naranja + fondo azulado).
   Sin puntero fino no hay hover que valga: el estado lo dan .selected y el
   marco de luz. */
@media (hover: none) {
  #cv-root .option-check:hover:not(.selected) {
    border-color: var(--linea) !important;
    background: var(--blanco) !important;
  }
}

/* 2 — marco de luz de las casillas: verde en reposo, rojo al marcar */
.option-check { position: relative; isolation: isolate; }
.option-check::after {
  content: ""; position: absolute; inset: 0; padding: 2px;
  border-radius: inherit; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--rn-giro),
      transparent 0deg 200deg,
      color-mix(in oklab, var(--verde, #1F9D6B) 45%, transparent) 268deg,
      var(--verde, #1F9D6B) 305deg,
      color-mix(in oklab, var(--verde, #1F9D6B) 45%, transparent) 332deg,
      transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--verde, #1F9D6B) 40%, transparent));
  animation: rnGira 3.4s linear infinite;
}
.option-check.selected::after {
  background: conic-gradient(from var(--rn-giro),
      transparent 0deg 200deg,
      color-mix(in oklab, var(--rojo, #D6452D) 45%, transparent) 268deg,
      var(--rojo, #D6452D) 305deg,
      color-mix(in oklab, var(--rojo, #D6452D) 45%, transparent) 332deg,
      transparent 360deg);
  filter: drop-shadow(0 0 5px color-mix(in oklab, var(--rojo, #D6452D) 45%, transparent));
}
/* «Ninguno de los anteriores»: marcarlo es la buena noticia — verde */
.option-check.opt-ninguno.selected::after {
  background: conic-gradient(from var(--rn-giro),
      transparent 0deg 200deg,
      color-mix(in oklab, var(--verde, #1F9D6B) 50%, transparent) 268deg,
      var(--verde, #1F9D6B) 305deg,
      color-mix(in oklab, var(--verde, #1F9D6B) 50%, transparent) 332deg,
      transparent 360deg);
  filter: drop-shadow(0 0 5px color-mix(in oklab, var(--verde, #1F9D6B) 50%, transparent));
}
.option-check.opt-ninguno.selected {
  border-color: var(--verde, #1F9D6B) !important;
  box-shadow: inset 0 0 0 1px var(--verde, #1F9D6B) !important;
}

/* 3 — el botón del cardiólogo: rojo, con el corazón latiendo */
.share-cardio { background: #D92B2B !important; color: #fff !important; font-weight: 800 !important; }
.share-cardio:hover { background: #BC2424 !important; }
.share-cardio svg { fill: #fff !important; color: #fff !important; }
.share-cardio::after { filter: drop-shadow(0 0 6px rgba(255,255,255,.85)); }
:root[data-theme="dark"] .share-cardio { background: #E04440 !important; color: #fff !important; }
.ico-latido { animation: latidoClasico 1s ease-in-out infinite; transform-origin: center; }

/* 3b — Copiar y Descargar: icono vivo */
.share-doc .ico { animation: icoPulso 2.2s ease-in-out infinite; transform-origin: center; }
.share-pdf .ico { animation: icoBaja 1.8s ease-in-out infinite; }
@keyframes icoPulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes icoBaja { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* 4 — la reserva es el botón más llamativo de la página: marco más
   grueso, giro más veloz y un aura que respira. Serio, pero imposible
   de no ver. */
.rec-card .rec-cta::after {
  padding: 3.5px;
  animation-duration: 1.5s;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.95));
}
.rec-card .rec-cta {
  animation: ctaAura 1.5s ease-out infinite;
}
@keyframes ctaAura {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); }
  100% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
}

/* La cuenta del paso, legible también de noche */
:root[data-theme="dark"] .prog-cuenta { color: #8FA5C4 !important; }

/* Movimiento reducido: todo quieto, los colores siguen hablando */
@media (prefers-reduced-motion: reduce) {
  .option-check::after { animation: none; }
  .ico-latido, .share-doc .ico, .share-pdf .ico { animation: none; }
  .rec-card .rec-cta { animation: none; }
  .rec-card .rec-cta::after { animation: none; }
}