/* =============================================================================
   SISTEMA DE DISEÑO — Dr. Juan Carlos Galvis
   Oncología de radiación · Cáncer de próstata · Bogotá, Colombia

   v2 — Paleta azul + rojo del logo (aprobada por el doctor, ago-2026).
   Sustituye a la v1 (teal + ámbar).

   Reglas de uso:
   - Los componentes NUNCA usan valores en crudo. Solo tokens semánticos.
   - Los tokens primitivos (--blue-*, --red-*, --n-*) no se usan en UI.
   - El modo oscuro intercambia SOLO tokens semánticos, jamás primitivos.

   Ver DESIGN.md para el porqué de cada decisión.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   1. TOKENS PRIMITIVOS
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Azul: color dominante ──
     Tono tomado del azul institucional de MD Anderson (#3361AD), donde se
     formó el doctor. A diferencia del teal anterior, --blue-500 ya alcanza
     5.79:1 sobre blanco: el color de marca es legible por sí mismo. */
  --blue-50:  #F4F5F9;
  --blue-100: #DEE5F0;
  --blue-200: #B6C8E5;
  --blue-300: #83A4DA;
  --blue-400: #5481CC;
  --blue-500: #3564B3;  /* 5.79:1 — AA */
  --blue-600: #2C5394;  /* 7.58:1 — AAA */
  --blue-700: #25467C;
  --blue-800: #1F3B68;
  --blue-900: #182D51;
  --blue-950: #101E35;

  /* ── Rojo: color de acción ──
     No es un rojo inventado: es el tono del tachón del logo, muestreado
     del PNG original (#BE3B36). Así el logo deja de ser un cuerpo extraño
     y pasa a ser el origen de la paleta. */
  --red-50:  #F9F4F4;
  --red-100: #F0DEDE;
  --red-200: #E5B7B5;
  --red-300: #DB8582;
  --red-400: #CE5752;
  --red-500: #B53833;
  --red-600: #952E2A;  /* 7.77:1 — AAA, blanco encima 7.77:1 */
  --red-700: #7D2724;
  --red-800: #69211E;
  --red-900: #511917;
  --red-950: #36110F;

  /* Rojo exacto del logo. Bloqueado: no se ajusta ni se "corrige". */
  --logo-red: #BE3B36;

  /* ── Neutros cálidos ──
     Se conservan de la v1, y ahora importan más: azul + gris azulado da el
     máximo efecto hospital. El toque cálido lo compensa. */
  --n-50:  #FAFAF8;
  --n-100: #F3F3F0;
  --n-200: #E6E5E1;
  --n-300: #D2D1CB;
  --n-400: #A8A79F;
  --n-450: #8C8B84;  /* borde de control — 3.42:1 sobre blanco */
  --n-500: #6E6E66;  /* texto sutil — 4.92:1 sobre --bg */
  --n-600: #5C5B54;
  --n-700: #45443E;
  --n-800: #2F2E2A;
  --n-900: #1E1D1A;
  --n-950: #121110;

  /* ── Funcionales ──
     El error NO puede ser el rojo de marca: si el CTA es rojo, un error rojo
     pierde toda su señal. Este carmesí tira a magenta, distinto en tono del
     rojo ladrillo del logo, y además los errores siempre llevan icono y van
     pegados al campo. La diferencia no se juega solo al color. */
  --crimson-500: #8E1B32;
  --crimson-100: #FBE9EE;
  --green-500:   #0F6B33;
  --green-100:   #DCF2E4;

  /* ── Marca de terceros (bloqueados, no tocar) ── */
  --brand-whatsapp:       #25D366;
  --brand-whatsapp-hover: #1CB955;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. TOKENS SEMÁNTICOS — Modo claro
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Superficies */
  --bg:            var(--n-50);
  --bg-subtle:     var(--n-100);
  --bg-sunken:     var(--n-200);
  --surface:       #FFFFFF;
  --surface-raised:#FFFFFF;
  --bg-inverse:    var(--blue-950);
  --bg-brand:      var(--blue-700);
  --bg-brand-soft: var(--blue-50);
  --bg-accent-soft:var(--red-50);
  /* El pie es oscuro en ambos temas — a diferencia de --bg-inverse, que por
     definición se invierte y en modo oscuro dejaría texto claro sobre claro. */
  --bg-footer:     var(--blue-950);
  --fg-on-footer:  var(--blue-100);

  /* Texto */
  --fg:            var(--n-900);
  --fg-muted:      var(--n-600);
  --fg-subtle:     var(--n-500);
  --fg-on-brand:   #FFFFFF;
  --fg-on-accent:  #FFFFFF;
  --fg-inverse:    var(--n-50);
  --fg-brand:      var(--blue-600);
  --fg-accent:     var(--red-600);

  /* Bordes
     --border y --border-strong son decorativos (separan tarjetas, filas).
     WCAG no les exige 3:1. --border-input sí lo cumple: ahí el borde es
     lo único que le dice al usuario dónde escribir. */
  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --border-input:  var(--n-450);
  --border-brand:  var(--blue-600);
  --border-focus:  var(--blue-600);

  /* Interacción — el rojo es la acción, el azul es la marca */
  --action:            var(--red-600);
  --action-hover:      var(--red-700);
  --action-active:     var(--red-800);
  --action-secondary:       var(--blue-700);
  --action-secondary-hover: var(--blue-800);

  /* Estados */
  --success:     var(--green-500);
  --success-bg:  var(--green-100);
  --danger:      var(--crimson-500);
  --danger-bg:   var(--crimson-100);
  --info:        var(--blue-600);
  --info-bg:     var(--blue-50);
}

/* ─────────────────────────────────────────────────────────────────────────
   3. TOKENS SEMÁNTICOS — Modo oscuro
   Arquitectura lista, pero ver DESIGN.md: no se recomienda activar el
   selector en el lanzamiento inicial.
   ───────────────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] {
  --bg:            var(--n-950);
  --bg-subtle:     var(--n-900);
  --bg-sunken:     #0B0A0A;
  --surface:       var(--n-900);
  --surface-raised:var(--n-800);
  --bg-inverse:    var(--n-50);
  --bg-brand:      var(--blue-900);
  --bg-brand-soft: #16263E;
  --bg-accent-soft:#2E1310;

  --fg:            var(--n-50);
  --fg-muted:      var(--n-400);
  --fg-subtle:     var(--n-500);
  --fg-on-brand:   #FFFFFF;
  --fg-on-accent:  var(--n-950);
  --fg-inverse:    var(--n-900);
  --fg-brand:      var(--blue-300);
  --fg-accent:     var(--red-300);

  --border:        var(--n-800);
  --border-strong: var(--n-700);
  --border-input:  var(--n-500);
  --border-brand:  var(--blue-400);
  --border-focus:  var(--blue-300);

  --action:            var(--red-300);
  --action-hover:      var(--red-200);
  --action-active:     var(--red-100);
  --action-secondary:       var(--blue-300);
  --action-secondary-hover: var(--blue-200);

  --success-bg: #0C2B18;
  --danger-bg:  #2C0E17;
  --info-bg:    #12233C;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. TIPOGRAFÍA
   Base de 18px, no 16px. No es preferencia estética: la audiencia tiene
   entre 50 y 75 años y muchos leen en móvil sin lentes a mano.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --font-display: 'Newsreader', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans:    'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Cascadia Mono', monospace;

  /* Escala fluida: 380px → 1280px de viewport */
  --text-xs:   clamp(0.8125rem, 0.786rem + 0.11vw, 0.875rem);   /* 13 → 14 */
  --text-sm:   clamp(0.9375rem, 0.911rem + 0.11vw, 1rem);       /* 15 → 16 */
  --text-base: clamp(1.125rem, 1.072rem + 0.22vw, 1.25rem);     /* 18 → 20 */
  --text-lg:   clamp(1.25rem, 1.171rem + 0.33vw, 1.4375rem);    /* 20 → 23 */
  --text-xl:   clamp(1.5rem, 1.368rem + 0.56vw, 1.8125rem);     /* 24 → 29 */
  --text-2xl:  clamp(1.8125rem, 1.628rem + 0.78vw, 2.25rem);    /* 29 → 36 */
  --text-3xl:  clamp(2.125rem, 1.835rem + 1.22vw, 2.8125rem);   /* 34 → 45 */
  --text-4xl:  clamp(2.625rem, 2.256rem + 1.56vw, 3.5rem);      /* 42 → 56 */
  --text-5xl:  clamp(3rem, 2.367rem + 2.67vw, 4.5rem);          /* 48 → 72 */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;   /* por defecto en prosa: ojos mayores */

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-widest: 0.12em;

  /* Medida de lectura — 62ch, no 75ch. Líneas más cortas = menos pérdida
     de renglón, que es el error de lectura más común pasados los 60. */
  --measure:       62ch;
  --measure-short: 46ch;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. ESPACIADO, FORMA, ELEVACIÓN, MOVIMIENTO
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Ritmo vertical de secciones */
  --section-y:       clamp(3.5rem, 2rem + 6vw, 7rem);
  --section-y-tight: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);

  --radius-none: 0;
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* Sombras teñidas de azul, no de negro puro: se integran con el fondo
     cálido en vez de ensuciarlo de gris. */
  --shadow-xs: 0 1px 2px rgb(24 45 81 / 0.06);
  --shadow-sm: 0 1px 3px rgb(24 45 81 / 0.08), 0 1px 2px rgb(24 45 81 / 0.05);
  --shadow-md: 0 4px 10px -2px rgb(24 45 81 / 0.10), 0 2px 4px -2px rgb(24 45 81 / 0.06);
  --shadow-lg: 0 12px 20px -6px rgb(24 45 81 / 0.12), 0 4px 8px -4px rgb(24 45 81 / 0.07);
  --shadow-xl: 0 24px 40px -12px rgb(24 45 81 / 0.16), 0 8px 16px -8px rgb(24 45 81 / 0.08);

  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  --duration-fast:   120ms;
  --duration-normal: 220ms;
  --duration-slow:   380ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Contenedores */
  --container:      75rem;   /* 1200px */
  --container-prose:44rem;   /* 704px  */
  --container-wide: 87.5rem; /* 1400px */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* Área mínima de toque. 48px, no 44px: temblor y artritis son reales
     en esta audiencia. */
  --touch-min: 48px;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. BASE
   ───────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-20);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); font-family: var(--font-sans); font-weight: var(--fw-semibold); }

p { margin: 0 0 var(--space-5); max-width: var(--measure); text-wrap: pretty; }

a {
  color: var(--fg-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover { color: var(--action-secondary-hover); text-decoration-thickness: 2px; }

img, svg, video { max-width: 100%; height: auto; display: block; }

/* El navegador le pone «margin: 1em 40px» a <figure>. Sin anularlo, una
   imagen queda 80px más estrecha que el texto que la rodea — muy visible en
   móvil, donde son 80 de 335. */
figure { margin: 0; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-12) 0; }

::selection { background: var(--blue-200); color: var(--blue-950); }

/* Foco visible y consistente en todo elemento interactivo */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100vh;
  z-index: var(--z-tooltip);
  background: var(--bg-brand);
  color: var(--fg-on-brand);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: var(--fw-semibold);
}
.skip-link:focus { top: var(--space-4); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   7. LAYOUT
   ───────────────────────────────────────────────────────────────────────── */

.container       { width: 100%; max-width: var(--container);      margin-inline: auto; padding-inline: var(--gutter); }
.container--prose{ max-width: var(--container-prose); }
.container--wide { max-width: var(--container-wide); }

.section       { padding-block: var(--section-y); }
.section--tight{ padding-block: var(--section-y-tight); }
.section--soft { background: var(--bg-subtle); }
.section--brand{ background: var(--bg-brand); color: var(--fg-on-brand); }
.section--brand h1, .section--brand h2, .section--brand h3 { color: var(--fg-on-brand); }

.stack > * + * { margin-top: var(--space-5); }
.stack-lg > * + * { margin-top: var(--space-8); }

.grid { display: grid; gap: var(--space-6); }
@media (min-width: 48rem)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem)  { .grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 48rem) and (max-width: 63.99rem) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }

.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ─────────────────────────────────────────────────────────────────────────
   8. COMPONENTES — Botones
   ───────────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-default),
              border-color   var(--duration-normal) var(--ease-default),
              color          var(--duration-normal) var(--ease-default),
              transform      var(--duration-fast)   var(--ease-default),
              box-shadow     var(--duration-normal) var(--ease-default);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none;
}

.btn--primary {
  background: var(--action);
  color: var(--fg-on-accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover:not(:disabled) { background: var(--action-hover); box-shadow: var(--shadow-md); color: var(--fg-on-accent); }
.btn--primary:active:not(:disabled){ background: var(--action-active); }

.btn--secondary {
  background: var(--action-secondary);
  color: var(--fg-on-brand);
}
.btn--secondary:hover:not(:disabled) { background: var(--action-secondary-hover); color: var(--fg-on-brand); }

.btn--outline {
  background: transparent;
  color: var(--fg-brand);
  border-color: var(--border-brand);
}
.btn--outline:hover:not(:disabled) { background: var(--bg-brand-soft); color: var(--fg-brand); }

.btn--ghost {
  background: transparent;
  color: var(--fg-brand);
  padding-inline: var(--space-3);
}
.btn--ghost:hover:not(:disabled) { background: var(--bg-brand-soft); }

.btn--whatsapp {
  background: var(--brand-whatsapp);
  color: #06301A;
  font-weight: var(--fw-bold);
}
.btn--whatsapp:hover:not(:disabled) { background: var(--brand-whatsapp-hover); color: #06301A; }

.btn--sm { min-height: 40px; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn--lg { min-height: 60px; padding: var(--space-4) var(--space-10); font-size: var(--text-lg); }
.btn--block { display: flex; width: 100%; }

/* ── Relieve y destello al pasar el ratón ──
   Dos gestos que se suman: el botón sube 2px con la sombra un escalón más
   alta —se siente físico, como una tecla— y un reflejo cruza la superficie
   una sola vez. El reflejo es la parte vistosa y por eso va contenido: 28%
   de blanco, en diagonal, 620ms y no se repite mientras el ratón siga encima.

   Solo con puntero real (@media hover). En una pantalla táctil el :hover se
   queda pegado después del toque, y un botón que se queda brillando parece
   un error, no un detalle. */
@media (hover: hover) {
  /* overflow oculta el reflejo fuera del botón; el borde redondeado lo
     recorta solo. El foco del teclado usa outline, que no se recorta. */
  .btn { position: relative; overflow: hidden; }
  .btn::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg,
                transparent 38%, rgb(255 255 255 / 0.28) 50%, transparent 62%);
    transform: translateX(-130%);
    /* La ida se anima; la vuelta es instantánea y ocurre fuera de cuadro,
       así el reflejo nunca se ve retroceder. */
    transition: transform 0s;
  }
  .btn:hover:not(:disabled)::after {
    transform: translateX(130%);
    transition: transform 620ms var(--ease-out);
  }
  .btn:hover:not(:disabled)  { transform: translateY(-2px); }
  .btn:active:not(:disabled) { transform: translateY(0); }

  .btn--primary:hover:not(:disabled)  { box-shadow: var(--shadow-lg); }
  .btn--secondary:hover:not(:disabled),
  .btn--whatsapp:hover:not(:disabled) { box-shadow: var(--shadow-md); }

  /* Sobre fondo claro un destello blanco es invisible: se tiñe de marca. */
  .btn--outline::after, .btn--ghost::after {
    background: linear-gradient(105deg,
                transparent 38%, rgb(53 100 179 / 0.16) 50%, transparent 62%);
  }
  .btn--outline:hover:not(:disabled) { box-shadow: var(--shadow-sm); }
}

/* Quien pide menos movimiento conserva el cambio de color, que es la señal
   de que el botón responde, y pierde solo el adorno. */
@media (prefers-reduced-motion: reduce) {
  .btn::after { display: none; }
  .btn:hover:not(:disabled) { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   9. COMPONENTES — Tarjetas
   ───────────────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--duration-normal) var(--ease-default),
              transform  var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default);
}
.card--link { position: relative; overflow: hidden; }
.card--link:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--border-strong); }
/* Filete de marca que crece desde la izquierda al pasar por encima. Es el
   único movimiento decorativo del sistema y dura menos de un cuarto de
   segundo: se percibe como material, no como animación. */
.card--link::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  height: 3px; width: 0; background: var(--action);
  transition: width var(--duration-slow) var(--ease-out);
}
.card--link:hover::before { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .card--link::before, .card--link:hover::before { transition: none; }
}
.card--flat { box-shadow: none; }
/* Borde decorativo: la tarjeta ya se distingue por su relleno, así que WCAG
   no le exige 3:1. Se sube de blue-200 a blue-300 solo por definición visual. */
.card--brand { background: var(--bg-brand-soft); border-color: var(--blue-300); }

.card__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-brand);
  margin-bottom: var(--space-2);
}
.card__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.card__body  { color: var(--fg-muted); font-size: var(--text-sm); margin: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   10. COMPONENTES — Insignias y credenciales
   El activo diferencial del doctor son sus credenciales (MD Anderson,
   Javeriana, Salamanca, Champalimaud). El sistema les da un componente
   propio en vez de enterrarlas en un párrafo.
   ───────────────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--fg-muted);
  border: 1px solid var(--border);
}
.badge--brand   { background: var(--bg-brand-soft);  color: var(--fg-brand);  border-color: var(--blue-300); }
.badge--accent  { background: var(--bg-accent-soft); color: var(--fg-accent); border-color: var(--red-200); }
.badge--success { background: var(--success-bg);     color: var(--success);   border-color: transparent; }

.credential {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
.credential__year {
  flex: 0 0 5.5ch;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  color: var(--fg-brand);
}
.credential__what { margin: 0; font-weight: var(--fw-semibold); }
.credential__where{ margin: 0; color: var(--fg-muted); font-size: var(--text-sm); }

/* ─────────────────────────────────────────────────────────────────────────
   11. COMPONENTES — Formularios
   ───────────────────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }

.label { font-weight: var(--fw-semibold); font-size: var(--text-sm); color: var(--fg); }
.label .req { color: var(--danger); }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--fg);
  background: var(--surface);
  border: 2px solid var(--border-input);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow   var(--duration-fast) var(--ease-default);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--fg-muted); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--blue-100);
}
.textarea { min-height: 8rem; resize: vertical; line-height: var(--leading-normal); }
.input[aria-invalid="true"] { border-color: var(--danger); }

.hint  { font-size: var(--text-sm); color: var(--fg-muted); margin: 0; }
.error { font-size: var(--text-sm); color: var(--danger); font-weight: var(--fw-semibold); margin: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   12. COMPONENTES — Aviso / nota médica
   ───────────────────────────────────────────────────────────────────────── */

.callout {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--info);
  background: var(--info-bg);
  color: var(--fg);
}
.callout p:last-child { margin-bottom: 0; }
.callout--brand  { border-left-color: var(--blue-700); background: var(--bg-brand-soft); }
.callout--accent { border-left-color: var(--red-600);  background: var(--bg-accent-soft); }
.callout--danger { border-left-color: var(--danger);   background: var(--danger-bg); }
.callout__title  { font-weight: var(--fw-bold); margin: 0 0 var(--space-1); }

/* Descargo legal — obligatorio en contenido médico */
.disclaimer {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
  margin-top: var(--space-8);
  max-width: var(--measure);
}

/* ─────────────────────────────────────────────────────────────────────────
   13. COMPONENTES — Cifras y testimonios
   ───────────────────────────────────────────────────────────────────────── */


.quote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-style: italic;
  color: var(--fg);
  border-left: 3px solid var(--logo-red);
  padding-left: var(--space-6);
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
}
.quote__attr {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
  padding-left: var(--space-6);
}

/* Variante de portada: la cita del paciente es el único momento emocional de
   la página y merece escala de titular, no de nota al margen. Centrada, sin
   filete lateral, con la comilla como marca de agua. */
.quote--destacada {
  border-left: 0;
  padding: var(--space-12) 0 0;
  margin-inline: auto;
  max-width: 26ch;
  text-align: center;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  position: relative;
  text-wrap: balance;
}
.quote--destacada::before {
  content: "\201C";
  position: absolute; top: -0.08em; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-style: normal;
  font-size: 7rem; line-height: 1;
  color: var(--blue-200);
  pointer-events: none;
}
.quote__attr--centrado {
  text-align: center; padding-left: 0;
  max-width: var(--measure); margin-inline: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   14. COMPONENTES — Navegación
   ───────────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 72px; }
.nav__links { display: flex; flex-wrap: nowrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  color: var(--fg);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-radius: var(--radius-md);
  /* Sin esto una entrada larga («Radioterapia guiada por imágenes») parte el
     menú en dos líneas y descuadra toda la cabecera. */
  white-space: nowrap;
}
.nav__cta { white-space: nowrap; }
.nav__link:hover { background: var(--bg-subtle); color: var(--fg-brand); }
.nav__link[aria-current="page"] { color: var(--fg-brand); box-shadow: inset 0 -3px 0 var(--blue-500); border-radius: 0; }

/* Barra de contacto permanente en móvil — el teléfono es la conversión
   principal de esta audiencia, no el formulario. */
.callbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  display: flex;
  gap: 1px;
  background: var(--border);
  box-shadow: 0 -4px 16px rgb(24 45 81 / 0.12);
}
.callbar .btn { flex: 1; border-radius: 0; min-height: 56px; }
@media (min-width: 48rem) { .callbar { display: none; } }

/* ─────────────────────────────────────────────────────────────────────────
   15. PROSA — artículos del blog
   ───────────────────────────────────────────────────────────────────────── */

.prose { max-width: var(--container-prose); font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.prose > * { max-width: none; }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-12); }
.prose h3 { font-size: var(--text-xl);  margin-top: var(--space-10); }
.prose ul, .prose ol { padding-left: var(--space-6); margin-bottom: var(--space-5); }
.prose li { margin-bottom: var(--space-3); }
/* Fotos sueltas migradas de Wix: sin esto, un retrato vertical (479×791,
   típico de las fotos de cuerpo entero) llena media pantalla en móvil porque
   solo se limitaba el ancho, nunca el alto. Con el alto tope, un retrato se
   angosta en vez de alargarse; una foto apaisada no lo nota. */
.prose img {
  border-radius: var(--radius-lg); margin-block: var(--space-8);
  max-height: 32rem; width: auto; margin-inline: auto;
  box-shadow: var(--shadow-md);
}
/* Las de arriba son las reglas de la FOTO SUELTA en medio del texto: margen
   generoso, esquina redonda y sombra. Una imagen que forma parte de un
   bloque compuesto —una tarjeta, una tira de logos— no es eso: ahí el margen
   abre un hueco blanco dentro de la propia tarjeta, la esquina redonda se
   suma a la que ya recorta la tarjeta, y la sombra no pinta nada. Se anulan.
   El radio de la galería se define más abajo y sigue mandando ahí. */
.prose .tarjeta img,
.prose .enlace img,
.prose .galeria img,
.prose .logos img {
  margin-block: 0;
  border-radius: 0;
  box-shadow: none;
}

.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin-block: var(--space-8); }
.prose th, .prose td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.prose th { background: var(--bg-subtle); font-weight: var(--fw-bold); }

/* Las tablas deben desbordar dentro de su propio contenedor, nunca el body */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ─────────────────────────────────────────────────────────────────────────
   16. ARTÍCULO
   Aquí cae el grueso del tráfico: 80 posts contra una home. Todo lo de esta
   sección se repite en cada uno de ellos.
   ───────────────────────────────────────────────────────────────────────── */

/* Migas */
.migas { font-size: var(--text-sm); color: var(--fg-muted); margin-bottom: var(--space-6); }
.migas ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.migas li::after { content: "›"; margin-left: var(--space-2); color: var(--fg-subtle); }
.migas li:last-child::after { content: ""; }
.migas [aria-current="page"] { color: var(--fg-muted); }

/* Cabecera */
.art__eyebrow {
  font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--fg-brand); margin-bottom: var(--space-3);
}
.art__titulo { font-size: var(--text-3xl); margin-bottom: var(--space-5); }
.art__bajada {
  font-size: var(--text-lg); color: var(--fg-muted);
  line-height: var(--leading-relaxed); max-width: var(--measure);
}
.art__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm); color: var(--fg-muted);
  padding-block: var(--space-4); margin-block: var(--space-6) 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.art__autor { font-weight: var(--fw-semibold); color: var(--fg); }
.art__sep { color: var(--border-strong); }

/* Índice — los títulos de estos artículos son las preguntas que hace el
   paciente. Dejarle saltar a la suya vale más que obligarlo a leer en orden. */
.toc {
  background: var(--bg-brand-soft); border: 1px solid var(--blue-300);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
  margin-block: var(--space-8); max-width: var(--measure);
}
.toc__t {
  font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--tracking-widest); color: var(--fg-brand); margin: 0 0 var(--space-3);
}
.toc ol { margin: 0; padding-left: var(--space-5); font-size: var(--text-sm); }
.toc li { margin-bottom: var(--space-2); }
.toc a { color: var(--fg); }
.toc a:hover { color: var(--fg-brand); }

/* Compartir — va arriba y abajo del artículo */
.compartir {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-block: var(--space-6);
}
.compartir__t {
  font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--fg-muted); margin: 0;
}
.compartir__lista { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.sh {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: var(--touch-min); min-height: var(--touch-min); padding: 0 var(--space-4);
  border: 1px solid var(--border-input); border-radius: var(--radius-full);
  background: var(--surface); color: var(--fg); cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background-color var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default),
              color var(--duration-normal) var(--ease-default);
}
.sh svg { width: 18px; height: 18px; flex: 0 0 auto; }
.sh:hover { background: var(--bg-brand-soft); border-color: var(--border-brand); color: var(--fg-brand); }
.sh--wa:hover { background: var(--brand-whatsapp); border-color: var(--brand-whatsapp); color: #06301A; }
.sh[data-copiado="si"] { background: var(--success-bg); border-color: var(--success); color: var(--success); }

/* Bloque de compartir del final: más grande, con motivo */
.compartir--final {
  flex-direction: column; align-items: flex-start; gap: var(--space-4);
  background: var(--bg-subtle); border-radius: var(--radius-lg);
  padding: var(--space-6); margin-block: var(--space-10);
}
.compartir--final .compartir__t { font-size: var(--text-lg); color: var(--fg); font-family: var(--font-display); }

/* CTA de cierre — BLOQUE FIJO, idéntico en los 80 artículos.
   Nada de su texto alude al artículo concreto: si hubiera que redactar un
   titular por post, no se mantiene. En WordPress esto es un solo bloque
   reutilizable; se edita una vez y cambia en todas partes. */
.cta-cita {
  background: var(--bg-brand); color: var(--fg-on-brand);
  border-radius: var(--radius-2xl); padding: var(--space-10) var(--space-8);
  text-align: center; margin-block: var(--space-12);
}
.cta-cita h2 { color: var(--fg-on-brand); font-size: var(--text-2xl); }
.cta-cita p { color: var(--blue-100); max-width: 54ch; margin-inline: auto; }
.cta-cita__cred {
  font-size: var(--text-sm) !important; color: var(--blue-200) !important;
  margin-bottom: var(--space-6) !important;
}
.cta-cita__alt {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
  justify-content: center; align-items: center;
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--blue-600);
  font-size: var(--text-sm);
}
.cta-cita__alt a { color: var(--blue-100); font-weight: var(--fw-semibold); }
.cta-cita__alt a:hover { color: #fff; }

/* CTA de foto — el bloque que ya convertía bien en la web anterior: foto a
   un lado, titular + botón al otro. Se activa página por página (ver
   template-parts/cta-media.php); cuando aparece, va antes del cta-cita. */
.cta-media {
  background: var(--bg-subtle);
  border-radius: var(--radius-2xl);
  margin-block: var(--space-12);
  overflow: hidden;
}
/* Arriba se sumaban el relleno inferior de la sección anterior (56px) y el
   margen del CTA (48px) = 104px; abajo los márgenes colapsan y quedaban 48.
   Más del doble de aire arriba que abajo. Se anula el relleno de la sección
   que precede al CTA, y los dos lados quedan en 48.
   Solo aplica a «.section»: la franja azul de cifras de la portada no lleva
   esa clase y conserva su relleno, que ahí sí forma parte del bloque. */
.section:has(+ .cta-media) { padding-bottom: 0; }
/* Y el margen del último párrafo, que aún sumaba 20px por arriba. Con esto
   los dos lados quedan exactamente iguales, no «parecidos». */
.section:has(+ .cta-media) .prose > :last-child,
.section:has(+ .cta-media) > .container > :last-child { margin-bottom: 0; }
.cta-media .container { padding-block: 0; }
/* Dos columnas SOLO si hay foto: sin ella, media tarjeta quedaba en blanco. */
.cta-media__grid { display: grid; }
@media (min-width: 48rem) {
  .cta-media__grid--con-foto { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.cta-media__foto { min-height: 16rem; }
/* Cuadrada, no 4:5. Con la proporción vertical anterior el bloque medía un
   25% más de alto que ancho y se comía la pantalla entera en escritorio;
   cuadrada baja el alto un 20% sin que la foto pierda presencia.
   object-position lo fija el atributo style del propio <img>, según el
   encuadre elegido en Personalizar → CTA · Tratamiento sin cirugía. */
.cta-media__foto img {
  width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover;
  display: block; border-radius: 0; margin: 0;
}
/* En móvil sigue siendo retrato, no panorámica — una foto de cuerpo entero
   pierde cabeza o pies si se fuerza a un recuadro ancho y bajo. */
@media (max-width: 47.99rem) { .cta-media__foto img { aspect-ratio: 5/6; } }
.cta-media__c {
  padding: var(--space-10) var(--space-8);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-4);
}
.cta-media__c h2 { font-size: var(--text-2xl); margin: 0; }
.cta-media__c p { color: var(--fg-muted); margin: 0; }
.cta-media__c .btn { align-self: flex-start; }

/* ── Barra lateral ──
   Columna de 20rem a la derecha en escritorio; debajo del artículo en móvil.
   Pensada para ir sumando banners y widgets sin tocar la maquetación. */
.art__layout { display: grid; gap: var(--space-10); }
@media (min-width: 64rem) {
  .art__layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-12); }
}
.art__main { min-width: 0; }
.art__aside { min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
/* El pegajoso va en un envoltorio interior: el <aside> debe poder estirarse
   a lo alto de la fila para que sticky tenga recorrido. */
.aside__sticky {
  display: flex; flex-direction: column; gap: var(--space-6);
  position: static;
}
@media (min-width: 64rem) {
  .aside__sticky { position: sticky; top: calc(72px + var(--space-6)); }
}

.widget {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-xs);
}
.widget--brand { background: var(--bg-brand-soft); border-color: var(--blue-300); }
.widget__t {
  font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--tracking-widest); color: var(--fg-brand);
  margin: 0 0 var(--space-3);
}
.widget p { font-size: var(--text-sm); }
.widget p:last-of-type { margin-bottom: var(--space-4); }

/* Hueco para banner. Se ve como hueco a propósito: es un espacio por llenar,
   no un elemento de diseño. */
.slot {
  display: grid; place-items: center; text-align: center; gap: var(--space-1);
  min-height: 250px; padding: var(--space-5);
  border: 2px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--bg-subtle); color: var(--fg-subtle);
}
.slot__t { font-size: var(--text-sm); font-weight: var(--fw-semibold); margin: 0; }
.slot__med { font-family: var(--font-mono); font-size: var(--text-xs); margin: 0; }

/* Lista compacta para «lo más leído» */
.mini {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding-block: var(--space-3); border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.mini:last-child { border-bottom: 0; padding-bottom: 0; }
/* Con miniatura (opcional) o con número de orden */
.mini img {
  width: 60px; height: 60px; object-fit: cover;
  border-radius: var(--radius-sm); flex: 0 0 auto;
}
.mini__n {
  flex: 0 0 auto; width: 1.75rem;
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: var(--fw-bold); line-height: 1.2;
  color: var(--blue-300); font-variant-numeric: tabular-nums;
}
.mini__t {
  font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--fg); line-height: var(--leading-snug); margin: 0;
}
.mini:hover .mini__t { color: var(--fg-brand); }

/* Artículos relacionados */
.relacionados { margin-block: var(--space-12); }
.relacionados__t { font-size: var(--text-2xl); margin-bottom: var(--space-6); }
.rel { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.rel img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius-md); margin-bottom: var(--space-4);
}
.rel__t {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-semibold);
  color: var(--fg); line-height: var(--leading-snug); margin: 0 0 var(--space-2);
}
.rel__d { font-size: var(--text-sm); color: var(--fg-muted); margin: 0 0 var(--space-3); flex: 1; }
.rel__go { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-brand); }
a.card:hover .rel__go { text-decoration: underline; }

/* Umbrales clínicos — dato numérico dentro de la prosa */
.umbral { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.umbral__fila {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border);
}
.umbral__fila:last-child { border-bottom: 0; padding-bottom: 0; }
.umbral__val {
  font-variant-numeric: tabular-nums; font-weight: var(--fw-bold);
  color: var(--fg-brand); flex: 0 0 11rem;
}
.umbral__eti { font-weight: var(--fw-semibold); }

/* ─────────────────────────────────────────────────────────────────────────
   17. PÁGINA DE TRATAMIENTO
   Las 29 páginas fijas. Son las de mayor intención de búsqueda: quien llega
   aquí ya está comparando tratamientos y decidiendo médico.
   ───────────────────────────────────────────────────────────────────────── */

/* Ficha técnica — lo que el paciente compara de verdad entre tratamientos.
   Va arriba, antes de cualquier explicación. */
.ficha {
  display: grid; gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 40rem) { .ficha { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .ficha { grid-template-columns: repeat(3, 1fr); } }
.ficha__i { background: var(--surface); padding: var(--space-5); }
.ficha__k {
  font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--tracking-widest); color: var(--fg-brand); margin: 0 0 var(--space-2);
}
.ficha__v {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: var(--fw-semibold); line-height: var(--leading-tight); margin: 0;
}
.ficha__n { font-size: var(--text-sm); color: var(--fg-muted); margin: var(--space-1) 0 0; }

/* Proceso. La numeración aquí sí dice algo: es una secuencia real, el orden
   en que le van a pasar las cosas al paciente. */
.pasos { counter-reset: paso; display: grid; gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
@media (min-width: 48rem) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .pasos { grid-template-columns: repeat(5, 1fr); gap: var(--space-6); } }
.paso { position: relative; padding-top: var(--space-10); }
.paso::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--fw-bold);
  line-height: 1; color: var(--blue-300); font-variant-numeric: tabular-nums;
}
.paso::after {
  content: ""; position: absolute; top: var(--space-4); left: 2.25rem; right: 0;
  height: 1px; background: var(--border);
}
.paso:last-child::after { display: none; }
@media (max-width: 63.99rem) { .paso::after { display: none; } }
.paso__t { font-weight: var(--fw-semibold); margin: 0 0 var(--space-1); }
.paso__d { font-size: var(--text-sm); color: var(--fg-muted); margin: 0; }

/* Comparativa entre tratamientos */
.comp { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 34rem; }
.comp th, .comp td { text-align: left; padding: var(--space-4); border-bottom: 1px solid var(--border); }
.comp thead th { background: var(--bg-brand-soft); color: var(--fg-brand); font-weight: var(--fw-bold); }
.comp tbody th { font-weight: var(--fw-semibold); color: var(--fg); }
.comp td { color: var(--fg-muted); }
.comp .destaca { background: var(--bg-subtle); color: var(--fg); font-weight: var(--fw-semibold); }

/* Preguntas frecuentes — <details> nativo: accesible, sin JavaScript, y
   legible por Google para resultados enriquecidos. */
.faq { border-top: 1px solid var(--border); max-width: var(--measure); }
.faq__i { border-bottom: 1px solid var(--border); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--touch-min); padding: var(--space-4) 0;
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-semibold);
  color: var(--fg); cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; flex: 0 0 auto; font-family: var(--font-sans); font-size: var(--text-xl);
  font-weight: var(--fw-regular); color: var(--fg-brand); line-height: 1;
}
.faq__i[open] .faq__q::after { content: "−"; }
.faq__i[open] .faq__q { color: var(--fg-brand); }
.faq__a { padding-bottom: var(--space-5); }
.faq__a p:last-child { margin-bottom: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   PROSA ANCHA — texto estrecho, medios a todo lo ancho
   ─────────────────────────────────────────────────────────────────────────
   El problema: una página de 1200px con el texto en una columna de 704px se
   ve delgada y pobre. La tentación es ensanchar el texto, pero a 1200px una
   línea tendría unos 120 caracteres y para esta audiencia eso es ilegible.

   La solución es una rejilla de tres carriles: el texto se queda en su medida
   cómoda, y las imágenes, galerías, tablas y tarjetas se salen a los carriles
   anchos. La página ocupa el espacio; los renglones no.
   ───────────────────────────────────────────────────────────────────────── */

/* .prose limita a 704px; sobre la rejilla ancha eso la estrangula entera y
   los medios nunca llegan a salirse. Aquí manda la rejilla. */
.prose.prosa-ancha { max-width: none; }

.prosa-ancha {
  display: grid;
  width: 100%;
  grid-template-columns:
    [total-ini] minmax(var(--gutter), 1fr)
    [ancho-ini] minmax(0, 8rem)
    [medida-ini] min(var(--container-prose), 100% - var(--gutter) * 2) [medida-fin]
    minmax(0, 8rem) [ancho-fin]
    minmax(var(--gutter), 1fr) [total-fin];
}

/* Por defecto todo va en la medida de lectura */
.prosa-ancha > * { grid-column: medida-ini / medida-fin; }

/* Lo visual se sale a los carriles anchos */
.prosa-ancha > figure,
.prosa-ancha > .galeria,
.prosa-ancha > .tarjetas,
.prosa-ancha > .table-scroll,
.prosa-ancha > .ficha,
.prosa-ancha > .pasos,
.prosa-ancha > .indica,
.prosa-ancha > .enlaces,
.prosa-ancha > .cifras,
.prosa-ancha > .callout,
.prosa-ancha > .lp-cifras,
.prosa-ancha > .lp-aviso,
.prosa-ancha > .lp-razones,
.prosa-ancha > .lp-sintomas,
.prosa-ancha > .lp-accion,
.prosa-ancha > .lp-medico,
.prosa-ancha > .lp-ebook,
.prosa-ancha > .grid { grid-column: ancho-ini / ancho-fin; }

/* Y lo que debe romper de borde a borde */
.prosa-ancha > .logos,
.prosa-ancha > .a-todo-ancho { grid-column: total-ini / total-fin; }

/* Las imágenes anchas se ven mejor con algo de aire y esquina redonda */
.prosa-ancha > figure { margin-block: var(--space-8); }
/* Ancho AUTO, no 100%.
   Con «width:100%» y el «max-height» de .prose img actuando a la vez, el
   navegador deja de conservar la proporción: pinta 960×512 una foto de 1,5:1
   y sale estirada a lo ancho. Dejando que el ancho lo calcule el navegador,
   los dos topes (ancho de columna y alto máximo) se respetan sin deformar. */
.prosa-ancha > figure img {
  width: auto; max-width: 100%; margin-inline: auto;
  border-radius: var(--radius-lg);
}
.prosa-ancha > figure figcaption {
  font-size: var(--text-sm); color: var(--fg-muted);
  margin-top: var(--space-3); text-align: center;
}

/* Ritmo de lectura: aire generoso antes de cada subtítulo */
.prosa-ancha > h2 { margin-top: var(--space-12); }
.prosa-ancha > h3 { margin-top: var(--space-10); }
.prosa-ancha > :first-child { margin-top: 0; }

/* Encabezado de página: da presencia al inicio en vez de dejar el título
   solo en una columna estrecha. */
.pag-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding-block: var(--section-y-tight);
}
.pag-hero__grid { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 64rem) {
  .pag-hero--con-imagen .pag-hero__grid { grid-template-columns: 1.1fr .9fr; gap: var(--space-16); }
}
.pag-hero h1 { font-size: var(--text-4xl); margin-bottom: var(--space-4); }
.pag-hero__bajada {
  font-size: var(--text-lg); color: var(--fg-muted);
  line-height: var(--leading-relaxed); max-width: var(--measure);
}
.pag-hero__media img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
}

/* ── Convenios: las aseguradoras con las que se trabaja ──
   Aquí los logos van EN COLOR, al contrario que los medios. No es un adorno
   de prestigio: el paciente está buscando el suyo, y un logo en gris cuesta
   más de reconocer —sobre todo en móvil, donde no hay ratón que lo despierte.
   Caja fija con object-fit para que cinco marcas de proporciones distintas
   se vean del mismo tamaño óptico. */
.convenios {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-8);
  align-items: center; justify-items: center;
  list-style: none; margin: var(--space-8) 0 0; padding: 0;
}
@media (min-width: 48rem) { .convenios { grid-template-columns: repeat(4, 1fr); } }
.convenio { display: flex; align-items: center; justify-content: center; width: 100%; }
.convenio img {
  width: 100%; max-width: 12rem; height: 4.5rem;
  object-fit: contain; object-position: center;
}
.convenio__txt {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: var(--fw-semibold); color: var(--fg-muted); text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────
   LANDING DEL TEST DE RIESGO
   Componentes propios («lp-»), no los de contenido. Los de contenido están
   pensados para acompañar un texto largo; aquí cada bloque tiene que
   sostenerse solo y empujar hacia el cuestionario.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Rótulo de sección ── */
.lp-rotulo {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--fg-brand); margin: 0 0 var(--space-3);
}
.lp-rotulo::before {
  content: ""; width: 1.75rem; height: 2px; flex: 0 0 auto;
  background: var(--logo-red);
}

/* ── Cifras ──
   Números a --text-3xl, no --text-5xl: cuatro cifras de 72px seguidas gritan
   y dejan la etiqueta ilegible debajo. Y sin cortes: «1 de 8» partido en dos
   líneas parecía un error de maquetación. */
.lp-cifras {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) 0;
  list-style: none; margin: var(--space-10) 0; padding: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  padding-block: var(--space-8);
}
@media (min-width: 48rem) { .lp-cifras { grid-template-columns: repeat(4, 1fr); gap: 0; } }
.lp-cifra { text-align: center; padding-inline: var(--space-5); }
@media (min-width: 48rem) { .lp-cifra + .lp-cifra { border-left: 1px solid var(--border); } }
.lp-cifra b {
  display: block; font-family: var(--font-display);
  font-size: var(--text-3xl); font-weight: var(--fw-bold);
  line-height: var(--leading-none); letter-spacing: var(--tracking-tight);
  color: var(--fg-brand); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lp-cifra span {
  display: block; margin-top: var(--space-3);
  font-size: var(--text-sm); color: var(--fg-muted);
  line-height: var(--leading-snug);
}

/* ── Aviso ──
   Tinta oscura con el icono en rojo, no un recuadro rosa pálido. El rojo
   pleno se reserva para los botones: si el aviso también fuera rojo,
   competiría con la única acción que importa en la página. */
.lp-aviso {
  display: flex; gap: var(--space-5); align-items: flex-start;
  background: var(--bg-inverse); color: var(--fg-inverse);
  border-radius: var(--radius-xl); padding: var(--space-6) var(--space-8);
  margin-block: var(--space-10);
}
.lp-aviso svg { width: 28px; height: 28px; flex: 0 0 auto; color: var(--red-300); margin-top: 2px; }
.lp-aviso b {
  display: block; font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: var(--fw-semibold);
  line-height: var(--leading-snug); margin-bottom: var(--space-2);
}
.lp-aviso p { margin: 0; color: var(--blue-100); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

/* ── Razones ── */
.lp-razones { display: grid; gap: var(--space-6); margin-block: var(--space-8); list-style: none; padding: 0; }
@media (min-width: 48rem) { .lp-razones { grid-template-columns: repeat(3, 1fr); } }
.lp-razon {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.lp-razon__icono {
  width: 3rem; height: 3rem; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--bg-brand-soft); color: var(--fg-brand);
  margin-bottom: var(--space-2);
}
.lp-razon__icono svg { width: 24px; height: 24px; }
.lp-razon b {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: var(--fw-semibold); line-height: var(--leading-snug); color: var(--fg);
}
.lp-razon p { margin: 0; font-size: var(--text-sm); color: var(--fg-muted); line-height: var(--leading-relaxed); }

/* ── Síntomas: lista con marca, no viñetas ── */
.lp-sintomas { list-style: none; margin: var(--space-6) 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 48rem) { .lp-sintomas { grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-8); } }
.lp-sintomas li {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin: 0; padding-block: var(--space-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-base); line-height: var(--leading-snug);
}
.lp-sintomas svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--fg-accent); margin-top: 5px; }

/* ── Bloque de acción ── */
.lp-accion {
  display: grid; gap: var(--space-5); align-items: center;
  background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-950) 100%);
  color: var(--fg-on-brand);
  border-radius: var(--radius-2xl); padding: clamp(2rem, 1.5rem + 2vw, 3rem);
  margin-block: var(--space-10);
}
@media (min-width: 48rem) { .lp-accion { grid-template-columns: 1fr auto; gap: var(--space-8); } }
.lp-accion b {
  display: block; font-family: var(--font-display);
  font-size: var(--text-xl); font-weight: var(--fw-semibold);
  line-height: var(--leading-snug); margin-bottom: var(--space-2);
}
.lp-accion p { margin: 0; color: var(--blue-100); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.lp-accion .btn { white-space: nowrap; }

/* ── Ficha del médico ── */
.lp-medico {
  display: grid; gap: var(--space-6);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: var(--space-8);
  box-shadow: var(--shadow-sm); margin-block: var(--space-8);
}
/* Dos columnas SOLO con foto. Sin el modificador, la ficha sin retrato
   metía todo el texto en la columna de 7rem y dejaba el resto en blanco:
   una palabra por renglón. Es la misma trampa de .ev y .bio, y aquí volví a
   caer en ella por declarar la rejilla antes de saber si habría imagen. */
@media (min-width: 48rem) {
  .lp-medico--con-foto { grid-template-columns: 7rem 1fr; gap: var(--space-8); align-items: start; }
}
.lp-medico__foto {
  width: 7rem; height: 7rem; border-radius: var(--radius-full);
  object-fit: cover; margin: 0; box-shadow: var(--shadow-md);
}
.lp-medico__nombre {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: var(--fw-semibold); color: var(--fg); margin: 0 0 var(--space-1);
}
.lp-medico__rol {
  font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--fg-brand); margin: 0 0 var(--space-4);
}

/* Página de contacto: tarjeta de datos + tarjeta de formulario, mapa abajo */
.contacto__grid { display: grid; gap: var(--space-8); }
@media (min-width: 64rem) {
  .contacto__grid { grid-template-columns: .85fr 1.15fr; gap: var(--space-12); align-items: start; }
}
.contacto__tarjeta {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.contacto__tarjeta--form { background: var(--bg-subtle); }
.contacto__t { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
.contacto__lead { color: var(--fg-muted); line-height: var(--leading-relaxed); margin: 0 0 var(--space-6); }

.dato { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); }
.dato svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; color: var(--fg-brand); }
.dato p { margin: 0; font-size: var(--text-sm); color: var(--fg-muted); line-height: var(--leading-relaxed); }
.dato a { color: var(--fg); font-weight: var(--fw-semibold); text-decoration: none; }
.dato a:hover { color: var(--fg-brand); text-decoration: underline; }

/* Selector de dos clases a propósito: «.redes__list» reinicia el margen a 0
   y está declarada más abajo, así que con una sola clase ganaba ella y los
   iconos quedaban pegados al botón de WhatsApp, sin separación ninguna. */
.contacto__tarjeta .contacto__redes {
  display: flex; gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
/* Mismo botón circular del pie, pero sobre tarjeta clara.
   El hover NO puede usar --bg-brand: es azul 700, y con el icono en azul 600
   quedaba un círculo oscuro con el icono encima invisible. Fondo de marca
   suave y el icono en azul: se lee, y sigue siendo un cambio evidente. */
.contacto__redes .red { border-color: var(--border-strong); color: var(--fg-muted); }
.contacto__redes .red:hover,
.contacto__redes .red:focus-visible {
  background: var(--bg-brand-soft);
  border-color: var(--blue-400);
  color: var(--fg-brand);
}

/* ── FormLayer dentro de la tarjeta de contacto ──
   El plugin trae su propio aspecto: Arial, morado #5525d6, bordes de 1,5px
   en #e2e8f0 y campos de 43px de alto. Tres problemas, no uno estético:
   la tipografía no es la del sitio, el morado no está en la paleta, y 43px
   queda por debajo del mínimo táctil de 48px que este sistema fija por la
   edad de la audiencia.
   Su hoja se encola DESPUÉS de la nuestra, así que estos selectores llevan
   una clase de más a propósito: es lo que hace falta para ganarle. */
.contacto__tarjeta .formlayer-form .formlayer-input,
.contacto__tarjeta .formlayer-form textarea.formlayer-input {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--fg);
  background: var(--surface);
  border: 2px solid var(--border-input);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-height: var(--touch-min);
}
.contacto__tarjeta .formlayer-form .formlayer-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--blue-100);
  /* El plugin lo levanta 1px al enfocar; aquí el foco no salta. */
  transform: none;
}
.contacto__tarjeta .formlayer-form .formlayer-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg);
}
.contacto__tarjeta .formlayer-form .formlayer-sub-label { color: var(--fg-subtle); }

.contacto__tarjeta .formlayer-submit-wrap .formlayer-submit-btn {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  background: var(--action);
  color: var(--fg-on-accent);
  height: auto;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.contacto__tarjeta .formlayer-submit-wrap .formlayer-submit-btn:hover {
  background: var(--action-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.contacto__mapa {
  margin-top: var(--space-10); border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
}
/* Alto proporcional al ancho: a 1100px de ancho, 380px fijos dejaban una
   franja de casi 3:1 que parecía un recorte, no un mapa. */
.contacto__mapa iframe { width: 100%; height: clamp(20rem, 26vw, 28rem); border: 0; display: block; }

/* ── Bloques recuperados del contenido de Wix ──
   Wix maqueta en dos dimensiones; al pasar el contenido a un documento lineal,
   las tiras de logos y las rejillas de tarjetas caen una debajo de otra. Estos
   componentes las devuelven a su forma. */

/* Tira de logos: medios, convenios, instituciones */
.logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-6) var(--space-10);
  padding: var(--space-8) var(--space-6);
  background: var(--bg-subtle); border-radius: var(--radius-lg);
  margin-block: var(--space-8);
}
.logos img {
  max-height: 44px; width: auto;
  /* Los logos vienen en colores dispares y a distinta calidad. En escala de
     grises se ven como un conjunto; al pasar el ratón recuperan su color. */
  filter: grayscale(1); opacity: .72;
  transition: filter var(--duration-normal) var(--ease-default),
              opacity var(--duration-normal) var(--ease-default);
}
.logos img:hover { filter: none; opacity: 1; }

/* Galería: dos o más fotos seguidas */
.galeria { display: grid; gap: var(--space-4); margin-block: var(--space-8); align-items: start; }
@media (min-width: 40rem) { .galeria { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .galeria--3 { grid-template-columns: repeat(3, 1fr); } }
.galeria figure { margin: 0; }
/* Cada imagen conserva SU proporción. Recortarlas todas a 4:3 alineaba
   bonito la rejilla, pero aquí dentro no hay solo fotos: hay infografías de
   800×2000 y esquemas verticales, y de esos el recorte se comía casi todo.
   Que las filas queden desparejas es un precio menor a mutilar el contenido. */
/* Mismo motivo que en las figuras: si se fija el ancho al 100%, el tope de
   alto de .prose img vuelve a deformar las verticales. Ancho automático. */
.galeria img {
  width: auto; max-width: 100%; height: auto; aspect-ratio: auto;
  margin-inline: auto;
  border-radius: var(--radius-lg);
}

/* ── Rejilla de enlaces internos ──
   En Wix estas eran tarjetas de navegación en cuadrícula. Al volcar el HTML
   se aplanaron a «<h2><a>Título</a></h2> + <p>descripción</p>» repetido, que
   en el navegador se lee como una lista de enlaces subrayados sueltos: el
   lector no distingue que son seis destinos y no seis subtítulos del texto.
   Esto las devuelve a su forma de tarjeta, reutilizando .card--link para el
   relieve y el filete de marca al pasar por encima. */
.enlaces {
  display: grid; gap: var(--space-5);
  margin-block: var(--space-10);
  list-style: none; padding: 0;
}
@media (min-width: 40rem) { .enlaces { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .enlaces { grid-template-columns: repeat(3, 1fr); } }
/* text-decoration en el propio <a>: la de un ancestro no la pueden cancelar
   los descendientes, y el título saldría subrayado. */
.enlace {
  display: flex; flex-direction: column; gap: var(--space-2);
  height: 100%; padding: var(--space-6);
  text-decoration: none;
}
.enlace__t {
  font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: var(--fw-semibold);
  line-height: var(--leading-snug); color: var(--fg);
  margin: 0; text-wrap: balance;
}
.enlace__d {
  font-size: var(--text-sm); color: var(--fg-muted);
  line-height: var(--leading-normal); margin: 0; flex: 1;
}
.enlace__go {
  font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--fg-brand); margin-top: var(--space-2);
}
a.enlace:hover .enlace__go { text-decoration: underline; }

/* Rejilla de tarjetas reconstruida desde el patrón «título + imagen» */
.tarjetas { display: grid; gap: var(--space-6); margin-block: var(--space-8); }
@media (min-width: 40rem) { .tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .tarjetas--3 { grid-template-columns: repeat(3, 1fr); } }
.tarjeta {
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-xs); text-decoration: none;
  transition: box-shadow var(--duration-normal) var(--ease-default),
              transform var(--duration-normal) var(--ease-default);
}
a.tarjeta:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.tarjeta img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.tarjeta__c { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.tarjeta__t {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: var(--fw-semibold); line-height: var(--leading-snug);
  color: var(--fg); margin: 0 0 var(--space-2);
}
.tarjeta__d { font-size: var(--text-sm); color: var(--fg-muted); margin: 0; flex: 1; }

/* Indicaciones: para quién sí y para quién no. Decir para quién NO es
   construye más confianza que una lista de puros beneficios. */
.indica { display: grid; gap: var(--space-6); }
@media (min-width: 48rem) { .indica { grid-template-columns: repeat(2, 1fr); } }
.indica__l { margin: 0; padding: 0; list-style: none; }
.indica__l li {
  position: relative; padding-left: var(--space-8); margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}
.indica__l li::before {
  position: absolute; left: 0; top: 0; font-weight: var(--fw-bold);
}
.indica--si .indica__l li::before { content: "✓"; color: var(--success); }
.indica--no .indica__l li::before { content: "—"; color: var(--fg-subtle); }

/* ─────────────────────────────────────────────────────────────────────────
   CREDENCIALES Y CIFRAS
   Los dos bloques que sostienen la autoridad del doctor. Se tratan como una
   ficha institucional, no como listas sueltas.
   ───────────────────────────────────────────────────────────────────────── */

.trust {
  background: var(--bg-subtle);
  border-block: 1px solid var(--border);
  padding-block: var(--section-y-tight);
}
.trust__lead {
  display: flex; align-items: center; gap: var(--space-5);
  font-size: var(--text-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-widest);
  color: var(--fg-brand);
  margin: 0 0 var(--space-8);
}
/* Filete que sale de la etiqueta y recorre el ancho: detalle de ficha
   impresa, y evita que el rótulo quede flotando solo. */
.trust__lead::after {
  content: ""; flex: 1; height: 1px; background: var(--border-strong);
}

/* Índice editorial, no rejilla de celdas. La versión anterior era una caja
   con separadores de 1px y leía como una tabla de hoja de cálculo: seis
   instituciones de primer nivel merecen aire y un filete fino, no bordes. */
.trust__rejilla {
  display: grid; gap: var(--space-8) var(--space-12);
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 40rem) { .trust__rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .trust__rejilla { grid-template-columns: repeat(3, 1fr); } }

.trust__item {
  display: flex; flex-direction: column; gap: var(--space-2);
  border-top: 1px solid var(--border-strong);
  padding-top: var(--space-4);
}
.trust__nombre {
  font-family: var(--font-display);
  font-size: var(--text-xl); font-weight: var(--fw-semibold);
  line-height: var(--leading-snug); color: var(--fg);
  text-wrap: balance;
}
.trust__lugar {
  font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-widest); color: var(--fg-muted);
}

/* ── Cifras ── */
.cifras {
  display: grid; gap: var(--space-8);
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 48rem) {
  .cifras { grid-template-columns: repeat(3, 1fr); gap: 0; }
  /* Filetes finos entre columnas: separan sin cajas ni bordes gruesos. */
  .cifras > * + * { border-left: 1px solid var(--blue-700); }
  .cifras > * { padding-inline: var(--space-8); }
}
.stat { text-align: center; }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-brand);
  font-variant-numeric: tabular-nums;
  /* Sin esto el número da un salto de ancho al contar. */
  font-feature-settings: "tnum";
}
.stat__label {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  letter-spacing: var(--tracking-wide);
}
.section--brand .stat__num   { color: #fff; }
.section--brand .stat__label { color: var(--blue-200); }
/* Las mismas cifras dentro del contenido, sobre fondo claro: el filete azul
   oscuro de la franja aquí sería un tajo. Se aclara y se le da caja. */
.cifras--claro {
  background: var(--bg-subtle); border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6); margin-block: var(--space-10);
}
/* Cuatro cifras, no tres: en la rejilla de tres la última caía sola en una
   segunda fila y parecía un error. Dos en tableta, cuatro en escritorio. */
@media (min-width: 48rem) {
  .cifras--claro { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) 0; }
  .cifras--claro > * + * { border-left-color: var(--border); }
  .cifras--claro > :nth-child(odd) { border-left: 0; }
}
@media (min-width: 64rem) {
  .cifras--claro { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .cifras--claro > :nth-child(odd) { border-left: 1px solid var(--border); }
  .cifras--claro > :first-child { border-left: 0; }
}

/* ── Aparición al hacer scroll ──
   Discreta a propósito: un desplazamiento de 16px y algo de opacidad. Lo que
   se nota es el ritmo, no el efecto. Sin JavaScript el contenido se ve igual;
   la clase solo se activa cuando el script confirma que puede observarlo. */
.js-revelar { opacity: 0; transform: translateY(16px); }
.js-revelar.esta-visible {
  opacity: 1; transform: none;
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .js-revelar, .js-revelar.esta-visible { opacity: 1; transform: none; transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   18. PIE DE PÁGINA
   Va en las 109 páginas, así que no es solo cierre visual: es la red de
   enlaces internos del sitio. Lo que se enlaza desde aquí recibe autoridad
   desde todas las páginas, y por eso las dos columnas centrales llevan el
   contenido que de verdad interesa posicionar.
   ───────────────────────────────────────────────────────────────────────── */

.pie {
  background: var(--bg-footer);
  color: var(--fg-on-footer);
  padding-block: var(--space-16) var(--space-8);
}

.pie__grid { display: grid; gap: var(--space-10); }
@media (min-width: 40rem) { .pie__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
  .pie__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-8); }
}

.pie__t {
  font-family: var(--font-sans);
  font-size: var(--text-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-widest);
  color: var(--blue-200);
  margin: 0 0 var(--space-4); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--blue-800);
}

.pie__lista { list-style: none; margin: 0; padding: 0; }
/* Área de toque de 48px también aquí. Un pie con enlaces de 37px contradice
   la regla del sistema justo donde más se falla al tocar: enlaces pequeños,
   juntos y al final de la página. */
.pie__lista a {
  display: flex; align-items: center;
  min-height: var(--touch-min);
  padding-block: var(--space-1);
  color: var(--fg-on-footer); font-size: var(--text-sm);
  text-decoration: none; line-height: var(--leading-snug);
}
.pie__lista a:hover { color: #fff; text-decoration: underline; }

/* Respaldo de marca cuando aún no se ha subido el logo: sin esto la cabecera
   muestra el nombre del sitio con la tipografía del cuerpo, y se ve a
   instalación a medio hacer. */
.marca__texto {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-tight);
  color: var(--fg);
}

/* Columna de marca */
.pie__logo {
  background: var(--n-50);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  width: fit-content;
  margin-bottom: var(--space-5);
}
.pie__logo img { height: 42px; width: auto; }
.pie__clave {
  color: var(--fg-on-footer); font-size: var(--text-sm);
  max-width: 38ch; margin-bottom: var(--space-5);
}
.pie__cred { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pie__cred span {
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  color: var(--blue-200);
  border: 1px solid var(--blue-800); border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
}

/* Columna de contacto */
.pie__dato { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); font-size: var(--text-sm); }
.pie__dato svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; color: var(--blue-300); }
.pie__dato p { margin: 0; color: var(--fg-on-footer); font-size: var(--text-sm); }
.pie__dato a {
  color: #fff; font-weight: var(--fw-semibold); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 40px;
}
.pie__dato a:hover { text-decoration: underline; }

/* Redes sociales */
.redes__lead {
  font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-widest); color: var(--blue-200);
  margin: var(--space-6) 0 var(--space-3);
}
.redes__list { display: flex; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
/* Círculos solo de icono: con etiqueta no caben en una fila dentro de la
   columna de contacto y TikTok se descolgaba a un segundo renglón. El nombre
   sigue disponible para lectores de pantalla en el <span> oculto. */
.red {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--touch-min); height: var(--touch-min); flex: 0 0 auto;
  border: 1px solid var(--blue-400); border-radius: var(--radius-full);
  color: var(--blue-100); text-decoration: none;
  transition: background-color var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default),
              color var(--duration-normal) var(--ease-default);
}
.red svg { width: 20px; height: 20px; flex: 0 0 auto; }
.red span {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.red:hover { background: var(--blue-800); border-color: var(--blue-300); color: #fff; }
.red:focus-visible { outline: 3px solid var(--blue-300); outline-offset: 2px; }

/* Crédito de diseño: presente pero discreto. Un estudio se firma, no se
   anuncia. */
.pie__credito { color: var(--blue-300); font-size: var(--text-sm); }
.pie__credito a {
  color: var(--blue-200); text-decoration: none;
  border-bottom: 1px solid var(--blue-700);
  padding-bottom: 1px;
  transition: color var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default);
}
.pie__credito a:hover { color: #fff; border-color: var(--blue-300); }

/* Barra inferior */
.pie__base {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  justify-content: space-between; align-items: center;
  margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: 1px solid var(--blue-800);
}
.pie__base p { margin: 0; font-size: var(--text-sm); color: var(--blue-200); }

/* Pie de landing: sin la rejilla de menús, solo la franja base. Sin esto
   heredaba el margen superior de 48px y el filete, pensados para separar la
   franja de las columnas de enlaces que aquí no existen. */
/* ── Hero de landing ──
   Siempre oscuro, también en modo oscuro: por eso azules crudos y no
   tokens semánticos, igual que el pie. Un halo azul detrás del texto y otro
   rojo muy tenue detrás de la foto le quitan lo plano sin meter una imagen
   de fondo que compita con el retrato. */
.lp-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60rem 36rem at 12% 0%, rgb(84 129 204 / .28), transparent 60%),
    radial-gradient(40rem 30rem at 95% 90%, rgb(190 59 54 / .16), transparent 65%),
    linear-gradient(160deg, var(--blue-900) 0%, var(--blue-950) 70%);
  color: #fff;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(6.5rem, 5rem + 4vw, 9rem);
}
/* Retícula fina, casi invisible: textura de «instrumento de precisión». */
.lp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.lp-hero__grid { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 64rem) {
  .lp-hero--con-foto .lp-hero__grid { grid-template-columns: 1.3fr .8fr; gap: var(--space-12); }
}
.lp-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--blue-200); margin: 0 0 var(--space-6);
}
.lp-hero__eyebrow::before { content: ""; width: 2.5rem; height: 2px; background: var(--logo-red); flex: 0 0 auto; }
.lp-hero__t {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: clamp(2.375rem, 1.7rem + 2.6vw, 3.5rem);
  line-height: 1.05; letter-spacing: var(--tracking-tight);
  color: #fff; margin: 0 0 var(--space-6); text-wrap: balance;
}
.lp-hero__sub {
  font-size: var(--text-lg); line-height: var(--leading-relaxed);
  color: var(--blue-100); max-width: 36rem; margin: 0;
}
.lp-hero__acciones { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
.lp-hero__acciones .btn { padding-inline: var(--space-8); }
@media (max-width: 29.99rem) { .lp-hero__acciones .btn { flex: 1 1 100%; } .lp-hero__eyebrow::before { width: 1.5rem; } }
.lp-hero__acciones .btn svg { width: 22px; height: 22px; }
.lp-hero .btn--whatsapp { box-shadow: 0 10px 30px -8px rgb(37 211 102 / .55); }
.lp-hero__btn-claro {
  background: rgb(255 255 255 / .06); color: #fff;
  border: 1px solid rgb(255 255 255 / .35);
}
.lp-hero__btn-claro:hover { background: rgb(255 255 255 / .14); border-color: #fff; color: #fff; }
.lp-hero__garantias {
  list-style: none; margin: var(--space-8) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  font-size: var(--text-sm); color: var(--blue-100);
}
.lp-hero__garantias li { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.lp-hero__garantias svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--brand-whatsapp); }

/* Foto: marco desplazado detrás, como un paspartú, y dos fichas flotantes. */
.lp-hero__media { position: relative; margin: 0 auto; width: 100%; max-width: 24rem; }
@media (min-width: 64rem) { .lp-hero__media { max-width: none; } }
.lp-hero__media::before {
  content: ""; position: absolute; inset: 1.5rem -1.5rem -1.5rem 1.5rem;
  border: 1px solid rgb(255 255 255 / .22); border-radius: var(--radius-2xl);
  z-index: -1;
}
.lp-hero__foto {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 30%;
  border-radius: var(--radius-2xl);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7);
}
.lp-hero__flota {
  position: absolute; display: flex; flex-direction: column; gap: 2px;
  background: rgb(255 255 255 / .96); color: var(--blue-950);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
  box-shadow: 0 20px 40px -12px rgb(0 0 0 / .45);
  line-height: var(--leading-snug); margin: 0;
}
.lp-hero__flota b { font-family: var(--font-display); font-weight: var(--fw-bold); }
.lp-hero__flota span { font-size: var(--text-xs); color: var(--n-600); }
.lp-hero__flota--dato { left: -1rem; bottom: 2.5rem; max-width: 11rem; }
.lp-hero__flota--dato b { font-size: var(--text-3xl); color: var(--blue-600); line-height: 1; }
.lp-hero__flota--firma { right: -1rem; top: 2rem; border-left: 3px solid var(--logo-red); }
.lp-hero__flota--firma b { font-size: var(--text-base); }
@media (min-width: 80rem) {
  .lp-hero__flota--dato { left: -1.5rem; }
  .lp-hero__flota--firma { right: -2.5rem; }
}

/* Cifras montadas sobre el borde inferior del hero. */
.lp-franja {
  position: relative; z-index: 1; max-width: 60rem;
  margin-top: calc(-1 * clamp(4rem, 3rem + 3vw, 5.5rem));
}
.lp-franja .lp-cifras { margin: 0; box-shadow: var(--shadow-xl); }
.lp-cuerpo { padding-top: var(--section-y-tight); }
.lp-hero__texto { min-width: 0; }

/* ── Guía descargable: portada de libro hecha en CSS ──
   La portada no es un mockup subido: es el retrato del doctor con el título
   encima. No hay que diseñar ni subir una imagen aparte, y si cambia el
   título de la guía se cambia en texto. */
.lp-ebook {
  display: grid; gap: var(--space-10); align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg);
  padding: clamp(2rem, 1.25rem + 3vw, 3.5rem);
  margin-block: var(--space-10); scroll-margin-top: var(--space-8);
}
@media (min-width: 48rem) { .lp-ebook--con-libro { grid-template-columns: 15rem 1fr; gap: var(--space-12); } }
.lp-libro { perspective: 1200px; justify-self: center; width: 13rem; }
@media (min-width: 48rem) { .lp-libro { width: 15rem; } }
.lp-libro__tapa {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 3 / 4; overflow: hidden; color: #fff;
  border-radius: 4px 12px 12px 4px;
  background: var(--blue-950);
  transform: rotateY(-14deg); transform-origin: left center;
  box-shadow: 20px 24px 40px -14px rgb(16 30 53 / .55), inset 4px 0 0 rgb(255 255 255 / .12);
  transition: transform .5s ease;
}
.lp-ebook:hover .lp-libro__tapa { transform: rotateY(-4deg); }
@media (prefers-reduced-motion: reduce) { .lp-libro__tapa { transition: none; } }
.prose .lp-libro__tapa img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 0%;
  margin: 0; border-radius: 0; box-shadow: none; z-index: 0;
}
.lp-libro__tapa::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgb(16 30 53 / .92) 0%, rgb(16 30 53 / .25) 45%, rgb(16 30 53 / .9) 100%);
}
.lp-libro__arriba, .lp-libro__abajo { position: relative; z-index: 2; padding: var(--space-5); }
.lp-libro__etiqueta {
  display: inline-block; font-size: 10px; font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  background: var(--logo-red); color: #fff; padding: 3px 8px; border-radius: 2px;
}
.lp-libro__titulo {
  display: block; margin-top: var(--space-3);
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--fw-semibold);
  line-height: 1.05; color: #fff;
}
.lp-libro__sub { display: block; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--blue-100); }
.lp-libro__abajo { font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--blue-100); }
.lp-ebook__t {
  display: block; font-family: var(--font-display);
  font-size: var(--text-2xl); font-weight: var(--fw-semibold);
  line-height: var(--leading-snug); color: var(--fg); margin-bottom: var(--space-3);
}
.lp-ebook p { color: var(--fg-muted); margin: 0 0 var(--space-5); }
.lp-ebook ul { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; gap: var(--space-3); }
.lp-ebook li { display: flex; gap: var(--space-3); align-items: flex-start; margin: 0; line-height: var(--leading-snug); }
.lp-ebook li svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--fg-brand); margin-top: 1px; }
.lp-ebook__pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.lp-ebook__pie small { font-size: var(--text-xs); color: var(--n-500); }

/* Landing: sin menú. En móvil el WhatsApp ya está en la barra fija de abajo;
   repetirlo arriba solo aprieta el logo. */
.nav--landing .nav__inner { min-height: 64px; }
@media (max-width: 47.99rem) { .nav--landing .btn { display: none; } }
.pie--landing { padding-block: var(--space-8); }
.pie--landing .pie__base { margin-top: 0; padding-top: 0; border-top: 0; }
.pie__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; }
.pie__legal a {
  color: var(--blue-200); font-size: var(--text-sm); text-decoration: none;
  display: inline-flex; align-items: center; min-height: var(--touch-min);
}
.pie__legal a:hover { color: #fff; text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────────
   19. ACCESIBILIDAD GLOBAL
   ───────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --fg-muted: var(--n-700);
    --border: var(--n-400);
    --border-strong: var(--n-600);
  }
  .btn { border-color: currentColor; }
}

@media print {
  .nav, .callbar, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  a::after { content: " (" attr(href) ")"; font-size: 10pt; color: #555; }
}