/* sitio.css — generado por herramientas/construir.mjs. Fuente: assets/css/tokens/*.css (copia literal del sistema de identidad) + herramientas/fuente/componentes.css */

/* ===== tokens/fonts.css ===== */
/* Webfonts — autoalojadas (Source Serif 4 + Source Sans 3, licencia SIL Open Font License).
   Reemplaza el @import de Google Fonts del paquete, como indica la nota de producción
   del propio tokens/fonts.css. Las variables :root son idénticas a las del paquete. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-serif-4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-serif-4-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  /* Clinical values, dosages, lab figures: tabular figures in the body face */
  --numerals-clinical: tabular-nums lining-nums; /* @kind other */
}

/* ===== tokens/colors.css ===== */
/* ============================================================
   COLOR — Dr. Manuel Zayas Lara
   Base values extracted pixel-exact from uploads/Logo.png.
   Ratios noted are WCAG 2.1 contrast ratios, computed, not estimated.
   ============================================================ */
:root {
  /* ---- 1. Corporate dominant (≈70% of chromatic presence) ---- */
  --navy-900: #0B1B2D;              /* derived, darkened navy — press states, deep panels */
  --navy: #132D49;                  /* LOGO. Stethoscope ring. 14.01:1 on white */
  --navy-700: #24466A;              /* derived — hover on navy surfaces */
  --navy-100: #E3E6E9;              /* derived tint — quiet navy wash */

  /* ---- 2. Logo accent colors. Legal as FILLS with navy text only.
       FORBIDDEN for text, hairlines and icon strokes on white. ---- */
  --logo-celeste: #89CCDE;          /* LOGO. 1.79:1 on white → fill only */
  --logo-amarillo: #FEE813;         /* LOGO. 1.25:1 on white → fill only */
  --logo-naranja: #F26C28;          /* LOGO. 3.02:1 on white → fill only */
  --logo-verde: #50AE2D;            /* LOGO. 2.83:1 on white → fill only */

  /* ---- 3. Derived inks. NOT logo colors. Same hue, darkened until they
       clear 4.5:1 on white AND on --surface. Use these for text/icons. ---- */
  --ink-celeste: #4D727C;           /* 5.23:1 white · 4.72:1 surface */
  --ink-amarillo: #7A6F09;          /* 5.12:1 white · 4.62:1 surface */
  --ink-naranja: #B3501E;           /* 5.14:1 white · 4.64:1 surface */
  --ink-verde: #397C20;             /* 5.15:1 white · 4.65:1 surface */

  /* ---- 4. Neutrals ---- */
  --white: #FFFFFF;
  --surface: #F5F3EF;               /* warm light grey, page/section background */
  --surface-2: #EAE6DF;             /* warm grey, cards on surface, table stripes */
  --hairline: #D8D2C8;              /* warm grey rule */
  --grey-700: #4A5462;              /* secondary text. 7.68:1 white · 6.93:1 surface */
  --grey-500: #6E7887;              /* disabled text / placeholders only (4.4:1 — never body copy) */

  /* ---- 5. Semantic roles. One accent per piece — never four together.
       The logo is the only place the four colors coexist. ---- */
  --role-action: var(--logo-naranja);       /* NARANJA = calls to action, only */
  --role-action-ink: var(--ink-naranja);    /* action text/links on light ground */
  --role-action-press: #D25A1E;             /* derived, press state */
  --role-confirm: var(--logo-verde);        /* VERDE = confirmation, in-range values, verified credentials */
  --role-confirm-ink: var(--ink-verde);
  --role-info: var(--logo-celeste);         /* CELESTE = informational / editorial marker */
  --role-info-ink: var(--ink-celeste);
  --role-caution: var(--logo-amarillo);     /* AMARILLO = clinical limit / scope caution marker */
  --role-caution-ink: var(--ink-amarillo);

  /* ---- 6. Accent washes (fills, never text) ---- */
  --wash-naranja: #FDEDE5;
  --wash-verde: #EAF5E6;
  --wash-celeste: #F1F9FB;
  --wash-amarillo: #FFFCE3;

  /* ---- 7. Semantic aliases ---- */
  --text-heading: var(--navy);
  --text-body: #1F2733;             /* 13.1:1 on white — long-form reading ink */
  --text-secondary: var(--grey-700);
  --text-on-navy: var(--white);     /* 14.01:1 */
  --text-on-navy-soft: #C6D2DE;     /* 9.12:1 */
  --text-link: var(--ink-naranja);
  --text-link-hover: var(--navy);

  --surface-page: var(--white);
  --surface-muted: var(--surface);
  --surface-card: var(--white);
  --surface-card-alt: var(--surface-2);
  --surface-inverse: var(--navy);

  --border-default: var(--hairline);
  --border-strong: var(--navy);
  --border-focus: var(--ink-naranja);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   TYPOGRAPHY
   Two families, both Google Fonts:
   · Source Serif 4  — display/headings. Institutional, optically sized.
   · Source Sans 3   — body. Humanist, unambiguous 1/l/I and 0/O, real tabular figures.
   Floor: 16px on web, 11pt in print. Line-height is deliberately generous —
   a large share of the audience reads on a phone and part of it is over fifty.
   ============================================================ */
:root {
  /* Display scale — Source Serif 4 */
  --fs-display: 3.25rem; /* @kind font */ /* 52px */
  --fs-h1: 2.5rem; /* @kind font */ /* 40px */
  --fs-h2: 2rem; /* @kind font */ /* 32px */
  --fs-h3: 1.5rem; /* @kind font */ /* 24px */
  --fs-h4: 1.25rem; /* @kind font */ /* 20px */

  /* Body scale — Source Sans 3 */
  --fs-lead: 1.1875rem; /* @kind font */ /* 19px — lede paragraphs */
  --fs-body: 1.0625rem; /* @kind font */ /* 17px — default long-form */
  --fs-body-sm: 1rem; /* @kind font */ /* 16px — UI labels, captions, footnotes. THE FLOOR. */
  --fs-eyebrow: 1rem; /* @kind font */ /* 16px — uppercase eyebrows, tracked */

  --lh-display: 1.1; /* @kind font */
  --lh-heading: 1.22; /* @kind font */
  --lh-body: 1.7; /* @kind font */
  --lh-tight: 1.45; /* @kind font */

  --fw-regular: 400; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  --ls-display: -0.015em; /* @kind font */
  --ls-heading: -0.01em; /* @kind font */
  --ls-body: 0; /* @kind font */
  --ls-eyebrow: 0.09em; /* @kind font */

  --measure: 68ch; /* @kind other */         /* max reading width for long-form */
  --measure-narrow: 46ch; /* @kind other */  /* ledes, pull quotes */

  /* Print equivalents (documents, informe clínico) */
  --pt-body: 11.5pt; /* @kind font */
  --pt-body-lh: 1.6; /* @kind font */
  --pt-h3: 15pt; /* @kind font */
}

/* Print floor + clinical numerals, available to any consumer stylesheet */
@media print {
  :root { --fs-body: 11.5pt; /* @kind font */ --fs-body-sm: 11pt; /* @kind font */ }
}

/* ===== tokens/spacing.css ===== */
/* SPACING — 4px base. Sections breathe; clinical copy is never crowded. */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --gap-inline: var(--sp-3);      /* between chips, buttons, meta items */
  --gap-stack: var(--sp-4);       /* between paragraphs */
  --gap-block: var(--sp-6);       /* between blocks inside a section */
  --section-y: var(--sp-9);       /* vertical rhythm between page sections */
  --section-y-tight: var(--sp-8);

  --container: 1120px;
  --container-narrow: 760px;
  --gutter: var(--sp-5);

  /* Logo clear space = 1/4 of the ring diameter on every side */
  --logo-clearspace-ratio: 0.25; /* @kind other */
}

/* ===== tokens/borders.css ===== */
/* BORDERS & RADII — institutional, not soft. Nothing is pill-shaped except
   round avatars, which echo the ring. Buttons are near-square on purpose:
   fully rounded buttons read as consumer wellness. */
:root {
  --radius-0: 0px;
  --radius-1: 2px;      /* inputs, tags */
  --radius-2: 4px;      /* buttons, badges */
  --radius-3: 8px;      /* cards, panels */
  --radius-4: 12px;     /* large feature panels, portrait frames */
  --radius-round: 50%;  /* avatars and the isotipo only */

  --bw-hairline: 1px; /* @kind spacing */
  --bw-rule: 2px; /* @kind spacing */       /* section rules, top border on steps */
  --bw-emphasis: 3px; /* @kind spacing */   /* left rule on clinical-limit callouts */

  /* Iconography: line icons only. The ring stroke is 4.6% of its diameter;
     stroke-width 1.5 on a 24px box is the nearest weight that stays legible
     at 16px. Never mix weights or fill styles inside one system. */
  --icon-stroke: 1.5; /* @kind other */
  --icon-stroke-large: 1.75; /* @kind other */   /* 32px and above */
  --icon-size: 24px;
  --icon-size-sm: 20px;
  --icon-size-lg: 32px;
  --icon-linecap: round; /* @kind other */
}

/* ===== tokens/elevation.css ===== */
/* ELEVATION — restrained. Depth comes from hairlines and warm grey grounds,
   not from drop shadows. Two levels only; both are cool navy-tinted, never black. */
:root {
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(19, 45, 73, 0.06), 0 1px 1px rgba(19, 45, 73, 0.04);
  --shadow-2: 0 8px 24px -12px rgba(19, 45, 73, 0.22);
  --shadow-focus: 0 0 0 3px rgba(179, 80, 30, 0.32);

  /* Protection gradient for text over photography — never a flat overlay */
  --scrim-navy: linear-gradient(to top, rgba(11, 27, 45, 0.86) 0%, rgba(11, 27, 45, 0.55) 45%, rgba(11, 27, 45, 0) 100%); /* @kind other */
}

/* ===== tokens/motion.css ===== */
/* MOTION — the brand does not bounce. Fades and 1-2px settles only.
   Nothing overshoots; nothing springs. Reduced-motion is honoured everywhere. */
:root {
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
  --ease-standard: cubic-bezier(0.32, 0.06, 0.4, 1); /* @kind other */   /* calm, no overshoot */
  --ease-out: cubic-bezier(0.16, 0.72, 0.28, 1); /* @kind other */
  --hover-lift: -1px; /* @kind other */      /* the largest movement allowed on hover */
  --press-scale: 0.995; /* @kind other */    /* presses tighten, they do not shrink visibly */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; /* @kind other */ --dur-base: 1ms; /* @kind other */ --dur-slow: 1ms; /* @kind other */ --hover-lift: 0px; /* @kind other */ --press-scale: 1; /* @kind other */ }
}

/* ===== tokens/base.css ===== */
/* BASE — minimal element defaults so every consumer page starts correct. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);font-weight:var(--fw-semibold);margin:0;letter-spacing:var(--ls-heading);line-height:var(--lh-heading);text-wrap:balance}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}h4{font-size:var(--fs-h4)}
p{margin:0 0 var(--gap-stack)}
a{color:var(--text-link);text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:var(--radius-1)}
img,svg{max-width:100%;display:block}
strong{font-weight:var(--fw-semibold);color:var(--text-heading)}
small{font-size:var(--fs-body-sm)}
hr{border:0;border-top:var(--bw-hairline) solid var(--border-default);margin:var(--sp-6) 0}
/* Clinical figures — dosages, pressures, lab values, prices, dates */
.dz-num{font-variant-numeric:var(--numerals-clinical);font-feature-settings:"tnum" 1}
.dz-eyebrow{font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--navy)}
.dz-lead{font-size:var(--fs-lead);color:var(--text-secondary);max-width:var(--measure-narrow)}
.dz-measure{max-width:var(--measure)}

/* ===== componentes ===== */
/* ============================================================
   COMPONENTES DEL SITIO — drmanuelzayas.com
   Se construye sobre tokens/*.css del sistema de identidad.
   Regla: ningún color ni tamaño que exista como token se escribe a mano.
   Breakpoints del handoff: 920 px y 560 px.
   ============================================================ */

:root {
  /* Alto de la cabecera fija; js/sitio.js lo mide y lo actualiza. */
  --alto-cabecera: 118px;
}

html { scroll-padding-top: calc(var(--alto-cabecera) + var(--sp-4)); }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
ul, ol { margin: 0 0 var(--gap-stack); padding-left: 1.25em; }
li { margin-bottom: var(--sp-2); }
li:last-child { margin-bottom: 0; }
h2 { margin-bottom: var(--sp-4); }
h3 { margin-bottom: var(--sp-3); }
h4 { margin-bottom: var(--sp-2); }
address { font-style: normal; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: var(--sp-4); top: var(--sp-2); z-index: 30;
  background: var(--navy); color: var(--white); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-2); transform: translateY(-200%);
  font-weight: var(--fw-semibold); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
.saltar:focus { transform: none; color: var(--white); }

/* ---------- Layout ---------- */
.contenedor { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.contenedor--estrecho { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.seccion { padding: var(--section-y) 0; }
.seccion--muted { background: var(--surface-muted); border-top: var(--bw-hairline) solid var(--border-default); border-bottom: var(--bw-hairline) solid var(--border-default); }
.seccion--muted + .seccion--muted { border-top: 0; }
.seccion__cabeza { max-width: var(--measure); margin-bottom: var(--gap-block); }
.seccion__cabeza .dz-eyebrow { display: block; margin-bottom: var(--sp-3); }
.seccion__cabeza h2 { margin-bottom: var(--sp-3); }
.seccion__cabeza p { color: var(--text-secondary); }
.prosa { max-width: var(--measure); }
.prosa > :last-child { margin-bottom: 0; }
.pila > * + * { margin-top: var(--gap-block); }
.rejilla { display: grid; gap: var(--sp-5); }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Iconos ---------- */
.icono { flex: 0 0 auto; display: block; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: var(--icon-linecap); stroke-linejoin: round; width: var(--icon-size); height: var(--icon-size); }
.icono--sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.icono--lg { width: var(--icon-size-lg); height: var(--icon-size-lg); stroke-width: var(--icon-stroke-large); }

/* ---------- Botones (components/core/Button) ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-body); font-weight: var(--fw-semibold); line-height: 1.2;
  border-radius: var(--radius-2); border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none; min-height: 44px; font-size: var(--fs-body); padding: 12px 22px;
  text-align: center;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.boton--sm { font-size: var(--fs-body-sm); padding: 10px 18px; }
.boton--lg { font-size: var(--fs-lead); padding: 15px 28px; }
.boton--accion { background: var(--role-action); color: var(--navy); border-color: var(--role-action); }
.boton--accion:hover { background: var(--role-action-press); border-color: var(--role-action-press); color: var(--navy); transform: translateY(var(--hover-lift)); }
.boton--solido { background: var(--navy); color: var(--white); border-color: var(--navy); }
.boton--solido:hover { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
.boton--fantasma { background: transparent; color: var(--navy); border-color: var(--navy); }
.boton--fantasma:hover, .boton--fantasma[aria-current="page"] { background: var(--navy); color: var(--white); }
.boton--sobre-marino { background: var(--white); color: var(--navy); border-color: var(--white); }
.boton--sobre-marino:hover { background: var(--surface); border-color: var(--surface); color: var(--navy); }
.boton--discreto { background: transparent; color: var(--ink-naranja); border-color: transparent; padding: 10px 2px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.boton--discreto:hover { color: var(--navy); }
.boton:active { transform: scale(var(--press-scale)); }
.boton--ancho { width: 100%; }
.boton[aria-disabled="true"], .boton:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.boton .icono { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.boton--lg .icono { width: var(--icon-size); height: var(--icon-size); }
.boton__texto { display: inline; }

/* ---------- Enlace de texto con flecha ---------- */
.enlace-flecha { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-weight: var(--fw-semibold); }
.enlace-flecha .icono { width: var(--icon-size-sm); height: var(--icon-size-sm); }

/* ---------- Cabecera (components/site/SiteHeader) ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: var(--white);
  border-bottom: var(--bw-hairline) solid var(--border-default);
}
.cabecera__utilidad { border-bottom: var(--bw-hairline) solid var(--border-default); }
.cabecera__utilidad .contenedor { display: flex; justify-content: flex-end; }
.enlace-ayuda {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px;
  font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--navy);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.enlace-ayuda:hover { color: var(--navy-700); }
.enlace-ayuda .icono { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.cabecera__barra .contenedor { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); padding-top: 14px; padding-bottom: 14px; min-height: 72px; }
.marca { display: flex; align-items: center; text-decoration: none; color: var(--navy); }
.marca:hover { color: var(--navy); }
/* Zona de resguardo: 1/4 del diámetro del anillo por cada lado (40 px → 10 px). */
.marca__logo { width: 40px; height: 40px; margin: calc(40px * var(--logo-clearspace-ratio)); margin-left: 0; }
.marca__nombre { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); line-height: var(--lh-heading); color: var(--navy); }
.marca__nombre span { display: block; }
.nav { margin-left: auto; display: flex; align-items: center; }
.nav__lista { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--sp-4); }
.nav__lista li { margin: 0; }
.nav__enlace {
  display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-body-sm);
  color: var(--grey-700); text-decoration: none; border-bottom: var(--bw-hairline) solid transparent; white-space: nowrap;
}
.nav__enlace:hover { color: var(--navy); border-bottom-color: var(--navy); }
.nav__enlace[aria-current="page"] { color: var(--navy); font-weight: var(--fw-semibold); border-bottom-color: var(--navy); }
.nav__menu { display: none; }
.cabecera__agendar-movil { display: none; }

/* ---------- Migas ---------- */
.migas { padding-top: var(--sp-5); }
.migas ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); font-size: var(--fs-body-sm); color: var(--grey-700); }
.migas li { margin: 0; display: inline-flex; align-items: center; gap: var(--sp-2); }
.migas li + li::before { content: "›"; color: var(--grey-700); }
.migas a { display: inline-flex; align-items: center; min-height: 44px; color: var(--grey-700); }
.migas a:hover { color: var(--navy); }

/* ---------- Encabezado de página ---------- */
.portada { padding: var(--sp-7) 0 var(--sp-8); }
.portada .dz-eyebrow { display: block; margin-bottom: var(--sp-4); }
.portada h1 { max-width: 24ch; margin-bottom: var(--sp-5); }
.portada .dz-lead { margin-bottom: 0; }
.portada__nota { margin-top: var(--sp-5); font-size: var(--fs-body-sm); color: var(--text-secondary); max-width: var(--measure); }
.portada--muted { background: var(--surface-muted); border-bottom: var(--bw-hairline) solid var(--border-default); }

/* ---------- Tarjetas (components/core/Card) ---------- */
.tarjeta { background: var(--surface-card); border: var(--bw-hairline) solid var(--border-default); border-radius: var(--radius-3); padding: var(--sp-5); color: var(--text-body); }
.tarjeta > :last-child { margin-bottom: 0; }
.tarjeta--muted { background: var(--surface); }
.tarjeta--alt { background: var(--surface-2); }
.tarjeta h3 { font-size: var(--fs-h4); }
.tarjeta__icono { color: var(--navy); margin-bottom: var(--sp-3); }
.tarjeta p { color: var(--text-secondary); }
.tarjeta--enlace { display: flex; flex-direction: column; gap: var(--sp-3); }
.tarjeta--enlace h2, .tarjeta--enlace h3 { font-size: var(--fs-h4); margin: 0; }
.tarjeta--enlace p { margin: 0; }
.tarjeta--enlace .enlace-flecha { margin-top: auto; }

/* Rejilla con hairline interior (beneficios del UI kit) */
.rejilla-lineas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--bw-hairline) solid var(--border-default); border-radius: var(--radius-3); overflow: hidden; background: var(--white); }
.rejilla-lineas > * { padding: var(--sp-5); border-bottom: var(--bw-hairline) solid var(--border-default); }
.rejilla-lineas > *:nth-child(odd) { border-right: var(--bw-hairline) solid var(--border-default); }
.rejilla-lineas > *:nth-last-child(-n+2):nth-child(odd), .rejilla-lineas > *:last-child { border-bottom: 0; }
.rejilla-lineas h3 { font-size: var(--fs-h4); }
.rejilla-lineas p { color: var(--text-secondary); margin: 0; }

/* Lista de reconocimiento */
.reconocimiento { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.reconocimiento li { margin: 0; border-top: var(--bw-rule) solid var(--navy); padding-top: var(--sp-4); font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-heading); color: var(--navy); }

/* Pasos (Cómo funciona) */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); counter-reset: paso; }
.pasos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pasos > li { margin: 0; border-top: var(--bw-rule) solid var(--navy); padding-top: var(--sp-4); counter-increment: paso; }
.pasos > li::before { content: counter(paso, decimal-leading-zero); display: block; font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-heading); color: var(--grey-700); margin-bottom: var(--sp-2); font-variant-numeric: var(--numerals-clinical); }
.pasos h3 { font-size: var(--fs-h4); }
.pasos p { color: var(--text-secondary); margin: 0; }
.pasos ul { margin: var(--sp-2) 0 0; color: var(--text-secondary); }

/* Lista con check */
.lista-check { list-style: none; padding: 0; }
.lista-check li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.lista-check .icono { color: var(--navy); width: var(--icon-size-sm); height: var(--icon-size-sm); margin-top: 0.3em; }
.lista-punto { padding-left: 1.25em; }

/* ---------- Callout de límite clínico (único caso de border-left codificado) ---------- */
.limite { background: var(--surface); border: var(--bw-hairline) solid var(--border-default); border-left: var(--bw-emphasis) solid var(--navy); border-radius: var(--radius-3); padding: var(--sp-5); max-width: var(--measure); }
.limite > :last-child { margin-bottom: 0; }
.limite h2, .limite h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.limite--corto { padding: var(--sp-4) var(--sp-5); }
.limite--corto p { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.limites-cortos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.limites-cortos .limite { max-width: none; }

/* ---------- Bloque de urgencias (Anexo A) ---------- */
.urgencias { background: var(--surface); border: var(--bw-hairline) solid var(--border-default); border-left: var(--bw-emphasis) solid var(--navy); border-radius: var(--radius-3); padding: var(--sp-5); max-width: var(--measure); }
.urgencias__titulo { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.urgencias__titulo .icono { color: var(--navy); }
.urgencias p { margin: 0; }
/* El número queda en línea, pegado a su puntuación; el relleno, compensado con margen negativo,
   da el área táctil de 44 × 44 px sin mover el texto. Las líneas del bloque miden 44 px, así que
   las áreas de dos números no se cruzan. */
.urgencias .tel, .tel {
  display: inline; padding: 11px 10px; margin: 0 -10px; font-weight: var(--fw-bold); color: var(--navy); vertical-align: middle;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  font-variant-numeric: var(--numerals-clinical);
}
.urgencias .tel:hover, .tel:hover { color: var(--navy-700); }
.urgencias__enlace { margin-top: var(--sp-3); }

/* ---------- Tarifas ---------- */
.tarifas { background: var(--white); border: var(--bw-hairline) solid var(--border-default); border-radius: var(--radius-3); padding: var(--sp-6); max-width: var(--measure); }
.tarifas__titulo { font-size: var(--fs-h3); margin-bottom: var(--sp-5); }
.tarifas__valores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 0 var(--sp-5); border: var(--bw-hairline) solid var(--border-default); border-radius: var(--radius-3); overflow: hidden; }
.tarifas__valor { padding: var(--sp-4) var(--sp-5); background: var(--surface); }
.tarifas__valor + .tarifas__valor { border-left: var(--bw-hairline) solid var(--border-default); }
.tarifas__valor dt { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--grey-700); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.tarifas__valor dd { margin: var(--sp-1) 0 0; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-heading); color: var(--navy); }
.tarifas h3 { font-size: var(--fs-h4); margin-top: var(--sp-5); }
.tarifas p { color: var(--text-body); }
.tarifas > :last-child { margin-bottom: 0; }

/* ---------- Credenciales (components/site/CredentialsBlock) ---------- */
.credenciales { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-6); align-items: start; background: var(--surface); border: var(--bw-hairline) solid var(--border-default); border-radius: var(--radius-3); padding: var(--sp-5); }
.credenciales--blanco { background: var(--white); }
.credenciales__retrato { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; border-radius: var(--radius-2); border: var(--bw-hairline) solid var(--border-default); }
.credenciales__cuerpo { display: flex; flex-direction: column; gap: var(--sp-3); }
.credenciales__nombre { margin: 0; font-size: var(--fs-h3); color: var(--navy); }
.credenciales__registro { font-size: var(--fs-body); color: var(--grey-700); margin: 0; }
.credenciales dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); font-size: var(--fs-body-sm); }
.credenciales dt { font-weight: var(--fw-semibold); letter-spacing: 0.07em; text-transform: uppercase; color: var(--grey-700); white-space: nowrap; }
.credenciales dd { margin: 0; color: var(--navy); }
.credenciales--sin-retrato { grid-template-columns: minmax(0, 1fr); }

/* ---------- Sobre el Dr. Zayas: portada con retrato, recorrido y propósito (DECISIONES n.º 102) ---------- */
.portada--perfil .contenedor { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-8); align-items: center; }
.portada__retrato { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; border-radius: var(--radius-3); border: var(--bw-hairline) solid var(--border-default); }
.rejilla-recorrido { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.recorrido__titulo { margin-bottom: var(--sp-4); }
.recorrido { list-style: none; margin: 0; padding: 0; border-left: var(--bw-emphasis) solid var(--border-default); }
.recorrido li { position: relative; padding: 0 0 var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: 2px; }
.recorrido li:last-child { padding-bottom: 0; }
.recorrido li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--white); border: 2px solid var(--navy); }
.recorrido__fecha { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); letter-spacing: 0.04em; color: var(--grey-700); }
.recorrido strong { color: var(--navy); font-weight: var(--fw-semibold); }
.recorrido li > span:last-child { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.proposito { max-width: var(--measure); border-left: var(--bw-emphasis) solid var(--navy); padding-left: var(--sp-5); }
.proposito p { font-family: var(--font-display); font-size: var(--fs-lead); color: var(--navy); margin: 0; }
@media (max-width: 920px) {
  .portada--perfil .contenedor, .rejilla-recorrido { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .portada__retrato { max-width: 280px; }
}

/* ---------- Badge (components/core/Badge) ---------- */
.insignias { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.insignia { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); line-height: 1.3; padding: 5px 11px; border-radius: var(--radius-2); background: var(--surface); color: var(--navy); border: var(--bw-hairline) solid var(--hairline); }
.insignia .icono { width: var(--icon-size-sm); height: var(--icon-size-sm); }

/* ---------- Bloque CTA (components/site/CtaBlock) ---------- */
.cta { background: var(--navy); border: var(--bw-hairline) solid var(--navy); border-radius: var(--radius-4); padding: var(--sp-7) var(--sp-6); text-align: center; color: var(--text-on-navy-soft); }
.cta__interior { max-width: var(--container-narrow); margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-4); align-items: center; }
.cta .dz-eyebrow { color: var(--text-on-navy-soft); font-weight: var(--fw-semibold); }
.cta h2 { color: var(--white); margin: 0; }
.cta p { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-body); max-width: 56ch; color: var(--text-on-navy-soft); }
.cta .cta__nota { font-size: var(--fs-body-sm); max-width: 60ch; }
.cta a:not(.boton) { color: var(--white); }
.cta a:not(.boton):hover { color: var(--text-on-navy-soft); }
.cta--muted { background: var(--surface); border-color: var(--hairline); color: var(--text-body); text-align: left; }
.cta--muted .cta__interior { align-items: flex-start; margin: 0; }
.cta--muted h2 { color: var(--navy); }
.cta--muted p { color: var(--text-body); }
.cta--muted .cta__nota { color: var(--grey-700); }
.cta--muted a:not(.boton) { color: var(--ink-naranja); }
.cta--muted a:not(.boton):hover { color: var(--navy); }

/* Siguiente paso dentro de una página */
.siguiente { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.siguiente__nota { font-size: var(--fs-body-sm); color: var(--text-secondary); margin: 0; }

/* ---------- Página por motivo de consulta ---------- */
.ruta { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
.indice { border: var(--bw-hairline) solid var(--border-default); border-radius: var(--radius-3); padding: var(--sp-4) var(--sp-5); background: var(--white); }
.indice__titulo { font-size: var(--fs-body-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--navy); margin: 0 0 var(--sp-2); }
.indice ol { list-style: none; padding: 0; margin: 0; }
.indice li { margin: 0; }
.indice a { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-size: var(--fs-body-sm); color: var(--grey-700); text-decoration: none; }
.indice a:hover { color: var(--navy); text-decoration: underline; }
.indice a .icono { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.ruta__cuerpo > section { padding-bottom: var(--sp-7); margin-bottom: var(--sp-7); border-bottom: var(--bw-hairline) solid var(--border-default); }
.ruta__cuerpo > section:last-of-type { border-bottom: 0; margin-bottom: 0; }
.ruta__cuerpo h2 { font-size: var(--fs-h2); }
.ruta__cuerpo .prosa + .limite, .ruta__cuerpo .prosa + .urgencias, .ruta__cuerpo .limite + .urgencias, .ruta__cuerpo .limite + .limite, .ruta__cuerpo .urgencias + .limite { margin-top: var(--sp-5); }
.evalua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); max-width: none; }
.evalua > div { border-top: var(--bw-hairline) solid var(--border-default); padding-top: var(--sp-4); }
.evalua h3 { font-size: var(--fs-h4); }
.evalua p { color: var(--text-secondary); margin: 0; }
.revision { font-size: var(--fs-body-sm); color: var(--grey-700); border-top: var(--bw-hairline) solid var(--border-default); padding-top: var(--sp-4); margin-top: var(--sp-7); max-width: var(--measure); }
.revision p { margin: 0 0 var(--sp-2); }

/* Bloques de ¿Te identificas con esto? En escritorio, a dos columnas (DECISIONES n.º 99). */
.reflexiones { display: grid; gap: var(--gap-block); }
@media (min-width: 921px) { .reflexiones { grid-template-columns: 1fr 1fr; } .reflexiones .reflexion { max-width: none; } }
.reflexion { border: var(--bw-hairline) solid var(--border-default); border-radius: var(--radius-3); padding: var(--sp-6); background: var(--white); max-width: var(--measure); }
.reflexion h2 { font-size: var(--fs-h3); }

/* Documentos legales */
.estado-borrador { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--navy); background: var(--surface); border: var(--bw-hairline) solid var(--border-default); border-left: var(--bw-emphasis) solid var(--navy); border-radius: var(--radius-1); padding: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-3); }
.legal h2 { font-size: var(--fs-h3); margin-top: var(--sp-7); }
.legal h3 { font-size: var(--fs-h4); margin-top: var(--sp-5); }
.legal section:first-child h2 { margin-top: 0; }
.legal table { border-collapse: collapse; width: 100%; margin: 0 0 var(--gap-stack); font-size: var(--fs-body-sm); }
.legal th, .legal td { text-align: left; vertical-align: top; border-bottom: var(--bw-hairline) solid var(--border-default); padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; }
.legal th { color: var(--navy); font-weight: var(--fw-semibold); }
.tabla-desplazable { overflow-x: auto; }

/* Crisis */
.crisis-accion { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); margin: var(--sp-5) 0 0; }
.situaciones { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); max-width: var(--measure); }
.situaciones li { margin: 0; border: var(--bw-hairline) solid var(--border-default); border-radius: var(--radius-3); padding: var(--sp-4) var(--sp-5); background: var(--white); }
.situaciones h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.situaciones p { margin: 0 0 var(--sp-3); color: var(--text-secondary); }

/* Agendar: contenedor del widget de Doctoralia */
.reserva { border: var(--bw-hairline) solid var(--border-default); border-radius: var(--radius-4); background: var(--white); padding: var(--sp-6); }
.reserva__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.reserva__aviso { font-size: var(--fs-body-sm); color: var(--text-secondary); margin: var(--sp-4) 0 0; max-width: var(--measure); }
.reserva__widget { margin-top: var(--sp-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.reserva__widget iframe { max-width: 100%; }
.reserva__alterna { font-size: var(--fs-body-sm); color: var(--text-secondary); margin: 0; }
.reserva--cargando .reserva__alterna-texto { display: none; }

/* Contacto administrativo */
.contacto-admin { max-width: var(--measure); }

/* ---------- Pie ---------- */
.pie { background: var(--surface-inverse); color: var(--text-on-navy-soft); padding: var(--sp-8) 0 var(--sp-6); margin-top: auto; }
.pie a { color: var(--white); }
.pie a:hover { color: var(--text-on-navy-soft); }
.pie__rejilla { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.3fr; gap: var(--sp-6); }
.pie h2 { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--white); margin: 0 0 var(--sp-3); }
.pie ul { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.pie li { margin: 0; }
.pie li a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-body-sm); }
.pie li.pie__sub a { padding-left: var(--sp-4); }
.pie p { font-size: var(--fs-body-sm); margin: 0 0 var(--sp-3); }
.pie__logo { width: 64px; height: 64px; margin: 0 0 calc(64px * var(--logo-clearspace-ratio)); }
.pie__practica strong { color: var(--white); }
.pie__ayuda .enlace-ayuda { color: var(--white); }
.pie__ayuda .enlace-ayuda:hover { color: var(--text-on-navy-soft); }
.pie__limites p { font-size: var(--fs-body-sm); }
.pie__base { border-top: var(--bw-hairline) solid var(--navy-700); margin-top: var(--sp-6); padding-top: var(--sp-5); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-body-sm); }
.pie__base p { margin: 0; }

/* ============================================================
   INICIO · tramo con video de fondo
   ============================================================ */
/* En todos los anchos el video es el fondo fijo del tramo inicial, a pantalla completa (DECISIONES n.º 79):
   la escena y el texto comparten la misma celda de la rejilla y el texto pasa por encima. */
.hero { position: relative; background: var(--surface); }
.hero__contenedor { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; max-width: none; position: relative; }
.hero__escena { grid-area: 1 / 1; align-self: start; position: sticky; top: var(--alto-cabecera); margin: 0; height: calc(100svh - var(--alto-cabecera)); z-index: 0; }
.hero__panel { position: relative; height: 100%; width: 100%; overflow: hidden; background: var(--navy); }
.hero__texto { grid-area: 1 / 1; position: relative; z-index: 1; padding: 0; }
.hero__bloque {
  min-height: calc(100svh - var(--alto-cabecera)); display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-9) max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) var(--sp-8);
  background: var(--scrim-navy), var(--scrim-navy); color: var(--text-on-navy);
}
.hero__bloque > * { max-width: 640px; }
.hero__final { height: calc(2 * (100svh - var(--alto-cabecera))); }
.hero .dz-eyebrow { display: block; margin-bottom: var(--sp-4); color: var(--text-on-navy-soft); }
.hero h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-5); color: var(--text-on-navy); }
.hero__modalidad { font-size: var(--fs-lead); color: var(--text-on-navy); font-weight: var(--fw-semibold); margin: 0; display: flex; gap: var(--sp-3); align-items: flex-start; }
.hero__modalidad .icono { margin-top: 0.15em; }
.hero__bajada { font-size: var(--fs-lead); color: var(--text-on-navy); margin-bottom: var(--sp-5); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--gap-inline); align-items: center; }
.hero__nota { margin: var(--sp-4) 0 0; font-size: var(--fs-body-sm); color: var(--text-on-navy-soft); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.hero__nota a { color: var(--text-on-navy); }
.hero__nota span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero__nota .icono { width: var(--icon-size-sm); height: var(--icon-size-sm); }
/* El texto del bloque 2 queda en la mitad inferior del scrim, donde la protección es mayor. */
.hero__bloque + .hero__bloque { padding-top: calc(var(--sp-10) * 4); }
/* El bloque 1 lleva el botón y la nota: el texto sube y necesita más protección del scrim. */
.hero__bloque:first-child { background: var(--scrim-navy), var(--scrim-navy), var(--scrim-navy); background-size: 100% 140%; background-position: bottom; background-repeat: no-repeat; }
.hero__bloque:first-child .dz-eyebrow { color: var(--text-on-navy); }
.hero :focus-visible { outline-color: var(--white); }
/* El original es horizontal (16:9): en pantallas anchas se ve casi entero, centrado. */
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Escritorio: el scrim marino va de izquierda a derecha y cubre entera la columna de texto, en cualquier
   ancho de pantalla; se desvanece después de ella y deja limpio el resto del video. El texto se centra en la altura. */
@media (min-width: 921px) {
  .hero__bloque, .hero__bloque:first-child {
    --hero-margen: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
    justify-content: center; padding-top: var(--sp-9); padding-bottom: var(--sp-9);
    background: linear-gradient(to right,
      color-mix(in srgb, var(--navy) 88%, transparent) 0,
      color-mix(in srgb, var(--navy) 80%, transparent) calc(var(--hero-margen) + 640px),
      transparent calc(var(--hero-margen) + 640px + var(--sp-10) * 5));
    /* Bordes superior e inferior difuminados: al salir de pantalla, el scrim no deja una franja de borde duro. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--sp-9), #000 calc(100% - var(--sp-9)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--sp-9), #000 calc(100% - var(--sp-9)), transparent 100%);
  }
  .hero__bloque + .hero__bloque { padding-top: var(--sp-9); }
}
.hero__video { opacity: 0; } /* js/inicio-video.js funde el video según el scroll */
.hero__fundido { position: absolute; inset: 0; background: var(--surface); opacity: 0; pointer-events: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px) {
  .rejilla--3, .rejilla--4, .rejilla--2 { grid-template-columns: minmax(0, 1fr); }
  .rejilla-lineas { grid-template-columns: minmax(0, 1fr); }
  .rejilla-lineas > *:nth-child(odd) { border-right: 0; }
  .rejilla-lineas > *:nth-last-child(-n+2):nth-child(odd) { border-bottom: var(--bw-hairline) solid var(--border-default); }
  .rejilla-lineas > *:last-child { border-bottom: 0; }
  .reconocimiento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos, .pasos--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credenciales { grid-template-columns: minmax(0, 1fr); }
  .credenciales__retrato { max-width: 280px; }
  .pie__rejilla { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .ruta { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .evalua { grid-template-columns: minmax(0, 1fr); }
  .limites-cortos { grid-template-columns: minmax(0, 1fr); }

  /* Cabecera móvil: el botón de agendar nunca desaparece; la navegación colapsa a menú. */
  .marca__nombre { font-size: var(--fs-body); }
  .cabecera__barra .contenedor { flex-wrap: nowrap; gap: var(--sp-3); }
  .nav { margin-left: auto; gap: var(--sp-2); }
  .js .nav__menu {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-height: 44px; min-width: 44px; padding: 0 var(--sp-3); background: transparent; color: var(--navy);
    border: 1.5px solid var(--hairline); border-radius: var(--radius-2); font: inherit; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); cursor: pointer;
  }
  .js .nav__lista { display: none; }
  .js .nav--abierta .nav__lista {
    display: flex; flex-direction: column; align-items: stretch; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white); border-bottom: var(--bw-hairline) solid var(--border-default); box-shadow: var(--shadow-2);
    padding: var(--sp-2) var(--gutter) var(--sp-4); gap: 0;
  }
  .js .nav--abierta .nav__lista li { border-bottom: var(--bw-hairline) solid var(--border-default); }
  .js .nav--abierta .nav__lista li:last-child { border-bottom: 0; }
  .js .nav--abierta .nav__enlace { width: 100%; font-size: var(--fs-body); }
  .js .nav__item--agendar { display: none; }
  .js .cabecera__agendar-movil { display: inline-flex; }
  .cabecera__barra { position: relative; }

  /* Inicio móvil: el video horizontal se recorta a los lados (el encuadre deja al médico y al notebook) y el titular baja un paso. */
  .hero__poster, .hero__video { object-position: 47% 50%; }
  .hero__bloque { padding-bottom: var(--sp-6); }
  .hero__bloque > * { max-width: 560px; }
  .hero h1 { font-size: var(--fs-h2); }
}

@media (max-width: 560px) {
  :root { --section-y: var(--section-y-tight); }
  .pasos, .pasos--4, .reconocimiento { grid-template-columns: minmax(0, 1fr); }
  .portada { padding: var(--sp-6) 0 var(--sp-7); }
  .portada h1, .ruta__cuerpo h2 { font-size: var(--fs-h2); }
  .portada h1 { font-size: var(--fs-h2); }
  .tarifas { padding: var(--sp-5); }
  .tarifas__valores { grid-template-columns: minmax(0, 1fr); }
  .tarifas__valor + .tarifas__valor { border-left: 0; border-top: var(--bw-hairline) solid var(--border-default); }
  .cta { padding: var(--sp-7) var(--sp-5); }
  .reflexion { padding: var(--sp-5); }
  .reserva { padding: var(--sp-5); }
  .marca__logo { margin-right: calc(40px * var(--logo-clearspace-ratio)); }
  .hero h1 { font-size: var(--fs-h3); }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__video { display: none; }
}

@media print {
  .cabecera, .pie, .hero__escena { display: none; }
}
.ruta-envoltura { padding-bottom: var(--section-y); }
.cta .boton--discreto { color: var(--white); }
.cta .boton--discreto:hover { color: var(--text-on-navy-soft); }
.cta--muted .boton--discreto { color: var(--ink-naranja); }
.hero__nota a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 560px) {
  .hero__bloque:first-child { padding-top: var(--sp-6); }
}
/* Foco sobre superficies marino: el naranja no llega a 3:1 sobre --navy. */
.pie :focus-visible, .cta :focus-visible { outline-color: var(--white); }

/* ---------- Objetivos táctiles de 44 px o más ---------- */
/* Enlaces en línea dentro del texto: el relleno vertical agranda el área táctil sin mover las líneas. */
main a:not([class]), .pie a:not([class]) { padding: 11px 4px; margin: 0 -4px; }
.pie li > a:not([class]) { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0; margin: 0; }
.nav__enlace, .migas a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
/* La salida a crisis nunca se parte en dos líneas. */
a[href$="crisis/"]:not([class]) { white-space: nowrap; }

/* Hero: la condición de pago va antes del botón. */
.hero__nota + .hero__acciones { margin-top: var(--sp-5); }
.hero__bajada + .hero__nota { margin-top: 0; }

.pie p > a:not([class]) { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; }

/* ---------- Jerarquía tipográfica (DECISIONES n.º 51) ----------
   En cada página y cada ancho: H1 > H2 > H3 > H4, siempre con tamaños de la escala de tokens.
   :not(.x-) solo sube la especificidad por sobre las reglas de componente. */
main h2:not(.x-) { font-size: var(--fs-h3); }
main h2.urgencias__titulo:not(.x-), main .limite h2:not(.x-) { font-size: var(--fs-h3); }
main h3:not(.x-) { font-size: var(--fs-h4); }
main h4:not(.x-) { font-size: var(--fs-lead); }
main .seccion__cabeza h2:not(.x-), main .cta h2:not(.x-), main .ruta__cuerpo h2:not(.x-) { font-size: var(--fs-h2); }
@media (max-width: 560px) {
  main h2:not(.x-), main .seccion__cabeza h2:not(.x-), main .cta h2:not(.x-), main .ruta__cuerpo h2:not(.x-) { font-size: var(--fs-h3); }
}
/* Inicio en el móvil: el titular largo va en --fs-h3 para que el CTA quepa en el primer pantallazo,
   y los niveles siguientes bajan un paso de la escala. */
@media (max-width: 920px) {
  .pagina-inicio main h2:not(.x-), .pagina-inicio main .seccion__cabeza h2:not(.x-), .pagina-inicio main .cta h2:not(.x-), .pagina-inicio main h2.urgencias__titulo:not(.x-), .pagina-inicio main .limite h2:not(.x-) { font-size: var(--fs-h4); }
  .pagina-inicio main h3:not(.x-) { font-size: var(--fs-lead); }
  .pagina-inicio main h4:not(.x-) { font-size: var(--fs-body); }
  .pagina-inicio .reconocimiento li { font-size: var(--fs-lead); }
}
.credenciales__rotulo { margin: 0 0 var(--sp-2); }
p.credenciales__nombre { font-family: var(--font-display); font-weight: var(--fw-semibold); line-height: var(--lh-heading); font-size: var(--fs-h4); margin: 0; }
@media (max-width: 560px) {
  .credenciales dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .credenciales dd { margin: 0 0 var(--sp-3); }
}
/* Entrada del video: el póster se funde a marino y desde ahí aparece el video (sin doble exposición). */
.hero__entrada { position: absolute; inset: 0; background: var(--navy); opacity: 0; pointer-events: none; }
/* Párrafos y listas con dos o más enlaces en línea: líneas de 46 px, para que las áreas táctiles
   de 44 px de enlaces en líneas vecinas no se crucen. */
.lista-check a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; }
.enlace-flecha { min-width: 44px; }

/* Urgencias: el texto del Anexo A va literal, con los números en negrita; para llamar, botones de 44 px. */
.tel-num { color: var(--navy); font-weight: var(--fw-bold); font-variant-numeric: var(--numerals-clinical); white-space: nowrap; }
.tel-lista { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.tel-lista li { margin: 0; }
.tel-boton {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: var(--sp-1) var(--sp-4);
  background: var(--white); color: var(--navy); border: var(--bw-hairline) solid var(--border-strong); border-radius: var(--radius-2);
  font-weight: var(--fw-semibold); text-decoration: none;
}
.tel-boton:hover { background: var(--navy-100); color: var(--navy); }
.tel-boton__num { font-weight: var(--fw-bold); font-variant-numeric: var(--numerals-clinical); }
/* Grupos de enlaces: en lista, cada uno con su propia línea de 44 px. */
.enlaces-lista { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }
.enlaces-lista li { margin: 0; }
/* Tabla de terceros en el móvil: cada fila se apila, con su rótulo, para que ninguna columna quede cortada. */
@media (max-width: 560px) {
  .tabla-desplazable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-desplazable table, .tabla-desplazable tbody, .tabla-desplazable tr, .tabla-desplazable td { display: block; width: 100%; }
  .tabla-desplazable tr { border-top: var(--bw-hairline) solid var(--border-default); padding: var(--sp-3) 0; }
  .tabla-desplazable td { border: 0; padding: var(--sp-1) 0; }
  .tabla-desplazable td::before { content: attr(data-etiqueta); display: block; font-weight: var(--fw-semibold); color: var(--navy); }
}
/* Inicio en el móvil: las cifras de las tarifas no superan al titular. */
@media (max-width: 920px) {
  .pagina-inicio .tarifas__valor dd { font-size: var(--fs-h4); }
}
.hero__nota a { white-space: nowrap; }
.tel-orientacion { margin: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.tel-boton--suave { border-color: var(--border-default); font-weight: var(--fw-regular); }
@media (max-width: 560px) {
  .tarifas__valor dd { font-size: var(--fs-h3); }
}

@media (max-width: 560px) {
  /* Primer pantallazo en teléfonos: menos aire entre las piezas del bloque 1 para que quepan todas. */
  .hero__bloque:first-child { padding-top: var(--sp-4); }
  .hero__bloque:first-child .hero__nota { margin-top: var(--sp-3); }
  .hero__bloque:first-child .hero__nota + .hero__acciones { margin-top: var(--sp-4); }
}
@media (max-width: 560px) {
  /* Nota de pago en el móvil: texto corrido, con el enlace en línea (área táctil por relleno). */
  .hero__nota span { display: block; }
  .hero__nota .icono { display: inline-block; vertical-align: -0.2em; margin-right: var(--sp-2); }
  .hero__nota a { display: inline; padding: 11px 4px; margin: 0 -4px; }
}

/* ---------- Teléfonos (≤ 560 px, el breakpoint menor del sistema) ----------
   Cabecera de una sola fila: logo, «Si necesitas ayuda ahora» y «Menú» («Agendar» pasa al menú).
   El nombre queda para lectores de pantalla. Libera espacio para que el primer pantallazo de Inicio
   muestre qué es, para quién, la condición de pago y el CTA (DECISIONES n.º 67 y 72). */
@media (max-width: 560px) {
  .js .cabecera__agendar-movil { display: none; }
  .js .nav__item--agendar { display: list-item; }
  .js .nav--abierta .nav__item--agendar .boton { width: 100%; margin-top: var(--sp-3); }
  .cabecera { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--gutter); }
  .cabecera__barra, .cabecera__barra .contenedor { display: contents; }
  .marca { order: 1; }
  .cabecera__utilidad { order: 2; flex: 1; border: 0; }
  .cabecera__utilidad .contenedor { padding: 0; justify-content: center; }
  .cabecera__utilidad .enlace-ayuda { text-align: center; line-height: var(--lh-tight); }
  .nav { order: 3; margin-left: 0; }
  .marca__nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Inicio: el nombre del servicio va dentro de la línea de modalidad, en lugar del eyebrow. */
  .hero__bloque:first-child .dz-eyebrow { display: none; }
  .hero__modalidad { font-size: var(--fs-body); }
}
@media (min-width: 561px) {
  .hero__servicio-movil { display: none; }
}
@media (max-width: 560px) {
  .hero__servicio-escritorio { display: none; }
  .hero h1 { margin-bottom: var(--sp-4); }
  .hero__bloque:first-child { padding-top: var(--sp-3); }
}

/* Hero: el botón va antes de la nota de pago, en el código y en pantalla (orden de foco = orden visual). */
.hero__modalidad + .hero__acciones { margin-top: var(--sp-5); }
@media (max-width: 560px) {
  .hero__modalidad + .hero__acciones { margin-top: var(--sp-4); }
  /* Agendar: el calendario de Doctoralia usa todo el ancho del panel y tiene reservado su alto en el móvil. */
  .reserva--cargando .reserva__widget { min-height: 800px; }
  .reserva__widget { margin-inline: calc(-1 * var(--sp-5)); }
}

/* Correo y WhatsApp de coordinación: cada enlace con su propia altura de 44 px, para que sus áreas
   táctiles no se crucen cuando caen en líneas vecinas. */
.enlace-contacto { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }

/* Agendar: al cargar, el script de Doctoralia reemplaza el enlace #zl-url por el calendario, y dentro del
   calendario el nombre no lleva al perfil. Este enlace al perfil aparece entonces bajo el calendario
   (antes de cargar, el botón de Doctoralia ya cumple esa función). */
.reserva__perfil { display: none; margin: var(--sp-4) 0 0; font-size: var(--fs-body-sm); color: var(--text-secondary); }
.reserva--cargado .reserva__perfil { display: block; }

/* Agendar: la reserva va en la portada, a la derecha del titular (DECISIONES n.º 87). Antes del botón,
   los valores y la línea de urgencias. El alto del calendario se reserva recién al pulsar el botón:
   así no queda un espacio vacío antes, y el cambio de alto ocurre por una acción de la persona. */
.portada--reserva .contenedor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--sp-8); align-items: start; }
@media (min-width: 561px) { .reserva--cargando .reserva__widget { min-height: 720px; } }
.reserva h2 { margin-bottom: var(--sp-4); }
.reserva__resumen { margin: 0 0 var(--sp-3); }
.reserva__urgencia { display: flex; gap: var(--sp-2); align-items: flex-start; margin: 0 0 var(--sp-5); font-size: var(--fs-body-sm); color: var(--text-body); }
.reserva__urgencia .icono { flex: none; margin-top: 0.7em; color: var(--ink-naranja); }
.reserva .reserva__resumen a:not([class]), .reserva .reserva__urgencia a:not([class]) { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; }
@media (max-width: 920px) {
  .portada--reserva .contenedor { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}
.reserva__nota-perfil { display: none; margin: var(--sp-4) 0 0; font-size: var(--fs-body-sm); color: var(--text-secondary); }
.reserva--cargado .reserva__nota-perfil { display: block; }
@media (max-width: 560px) {
  /* Agendar en teléfonos: las migas ya dicen «Agendar» y el detalle está más abajo; así el botón
     «Ver horas disponibles» entra en el primer pantallazo. */
  .portada--reserva { padding-top: var(--sp-4); }
  .portada--reserva .dz-eyebrow, .portada--reserva .dz-lead { display: none; }
  .portada--reserva h1 { margin-bottom: 0; }
}
/* Números cortos (131, *4141): el área táctil llega a 44 px de ancho con relleno compensado, sin mover el texto. */
.reserva .reserva__urgencia a[href^="tel:"] { padding-inline: 11px; margin-inline: -11px; }