@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Montserrat-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Rounded Elegance';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/RoundedElegance-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/SourceSerif4-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/SourceSans3-Variable.woff2') format('woff2');
}

/* INTER TIGHT ES LA CARA DE SSS, NO DEL HOSPITAL: la usa sólo el lockup de
   Subaquatic Safety Services en /medicina-hiperbarica. Se declara aquí, con las
   demás, y no cuesta nada en el resto del sitio: un @font-face que ninguna
   página usa no se descarga -el navegador sólo pide el archivo cuando algo que
   pinta lo pide-. Es el mismo archivo que sirve sssnetwork.com. */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterTight-VariableFont_wght.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
}

:root {

  --navy-50: #eff4fb;
  --navy-100: #dae4f2;
  --navy-200: #b4c7e3;
  --navy-300: #7f9bcd;
  --navy-400: #4a75b8;
  --navy-500: #22539b;
  --navy-600: #113a7c;
  --navy-700: #00205b;
  --navy-800: #001842;
  --navy-900: #00102e;

  --grey-50: #f6f7f6;
  --grey-100: #ecedec;
  /* FALTAN EL 200 (#dcdedc) Y EL 300 (#c8cac8), retirados el 2-sep-2026 en la */
  --grey-400: #b2b4b2;

  /* --- El azul caribe ------------------------------------------------------- */
  --caribe-400: #46C2DC;
  --grey-500: #8f918f;
  --grey-600: #6e706e;
  --grey-700: #545654;
  --grey-800: #3a3c3a;

  --neutral-0: #ffffff;
  --neutral-25: #f9fbfd;
  --neutral-50: #f2f5f9;
  --neutral-100: #e7ecf2;
  --neutral-200: #d6dde7;
  --neutral-300: #b9c3d0;
  --neutral-400: #94a1b2;

  --neutral-500: #6b7787;
  --neutral-600: #4d5766;
  --neutral-700: #37414e;
  --neutral-800: #232b36;
  --neutral-900: #131820;

  --green-50: #e8f5ee;
  --green-500: #1f8a5b;
  --green-600: #147049;
  /* LOS DOS OSCUROS SON PARA EL VERDE DE WHATSAPP DEL PIE (2-sep-2026), y */
  --green-700: #105A3A;
  --green-800: #0D492F;
  --amber-50: #fbf1d9;
  --amber-500: #d99a07;
  --amber-600: #8a6300;
  /* LA RAMPA DEL ROJO SALE DE LA CRUZ (ago 2026). */
  --red-50: #FCE8E9;
  --red-500: #E0030F;
  /* RAMPA PODADA AQUÍ (2-sep-2026, revisión de paleta). */

  /* AQUÍ VIVÍA EL LETRERO, Y SE RETIRÓ (2-sep-2026, revisión de paleta). */

  --brand-primary: var(--navy-700);
  --brand-primary-hover: var(--navy-800);
  --brand-primary-active: var(--navy-900);

  --brand-secondary: var(--grey-400);
  --brand-secondary-hover: var(--grey-500);
  --brand-secondary-active: var(--grey-600);
  --accent: var(--navy-700);

  --accent-on-dark: var(--grey-400);

  --text-strong: var(--navy-700);
  --text-body: var(--navy-700);
  --text-muted: var(--navy-500);
  --text-subtle: var(--navy-400);
  --text-on-navy: #ffffff;
  --text-on-grey: var(--navy-900);
  --text-brand: var(--navy-700);
  --text-link: var(--navy-700);

  --text-link-hover: var(--navy-500);
  --surface-page: #ffffff;
  --surface-card: #ffffff;

  --surface-block: var(--neutral-100);
  --text-on-block: var(--navy-700);
  --accent-on-block: var(--navy-500);

  --surface-sunken: #ffffff;
  --surface-foam: #ffffff;
  --surface-overlay: rgba(0, 16, 46, 0.55);
  --border-subtle: var(--neutral-200);
  --border-default: var(--grey-500);
  --border-strong: var(--navy-500);
  --border-navy: var(--navy-700);
  --border-focus: var(--navy-700);

  --danger: #E0030F;
  --danger-surface: var(--red-50);
  --danger-border: #F5C2C4;
  /* El rojo de la marca, el mismo de la cruz y el mismo hex que los SVG del */
  --emergency: #E0030F;
  --emergency-dk: #A1020B;
  --ring-color: rgba(0, 32, 91, 0.55);

  /* Halo del logotipo (#426CB6). */
  --wm-glow: 66 108 182;
  /* El rojo de la cruz de la marca (#E0030F), en canales sueltos para poder */
  --cruz-glow: 224 3 15;

  /* LO QUE MIDE EN PANTALLA LA CRUZ DEL ENCABEZADO, que es la referencia de */
  --cruz-encabezado-visible: calc(72px * 77 / 165);

  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-title: 'Montserrat', var(--font-sans);
  --font-round: 'Rounded Elegance', var(--font-title);
  --font-body: var(--font-sans);
  --tracking-caps: .14em;

  /* --- LA ESCALA TIPOGRÁFICA (4-sep-2026) -------------------------------- */
  --tipo-display:  3.16rem;   /* 63.2 px · sólo el aviso de especialidades */
  --tipo-hero:     2.37rem;   /* 47.4 px · titular de portadilla */
  --tipo-h2:       1.78rem;   /* 35.6 px · titular de sección */
  --tipo-h3:       1.333rem;  /* 26.7 px · subtítulo */
  --tipo-entrada:  1.125rem;  /* 22.5 px · entradilla */
  --tipo-cuerpo:   1rem;      /* 20.0 px · texto corrido = la raíz */
  --tipo-menor:    0.889rem;  /* 17.8 px · secundario, pies de foto */
  --tipo-rotulo:   0.75rem;   /* 15.0 px · rótulos en mono, antetítulos */

  --section-y: clamp(5rem, 3rem + 6vw, 10rem);
  --section-y-tight: clamp(3.5rem, 2.25rem + 3.5vw, 6rem);
  --section-y-tall: clamp(6.5rem, 4rem + 8vw, 13rem);
  /* TOPE DEL CONTENEDOR (revisado el 4-sep-2026). */
  --maxw: 1536px;

  /* LA MEDIDA DE LA PROSA (unificada el 4-sep-2026). */
  --measure: 760px;

  --radius-xs: 5px;
  --radius-sm: 5px;
  --radius-md: 5px;
  --radius-lg: 5px;
  --radius-pill: 5px;
  --radius: 5px;
  --radius-control: 5px;

  --bs-border-radius: 5px;
  --bs-border-radius-sm: 5px;
  --bs-border-radius-lg: 5px;
  --bs-border-radius-xl: 5px;
  --bs-border-radius-xxl: 5px;
  --bs-border-radius-pill: 5px;
  --control-h-sm: 34px;
  --control-h-md: 44px;
  --control-h-lg: 54px;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-navy: none;
  --shadow-grey: none;
  --shadow-focus: 0 0 0 3px var(--ring-color);

  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --transition-colors: color var(--duration) var(--ease-standard), background-color var(--duration) var(--ease-standard), border-color var(--duration) var(--ease-standard);
  --transition-transform: transform var(--duration) var(--ease-out);
  --transition-shadow: box-shadow var(--duration) var(--ease-standard);

  /* --- Geometría Disney+ ------------------------------------------------ */
  --radius-pill-nav: 100px;   /* medido: border-radius:100px en el conmutador */
  --radius-hero: 18px;        /* medido: 18px en la tarjeta del carrusel */
  --radius-card: 16px;        /* rounded-4 de las «custom cards» de Bootstrap */
  /* Relleno de todo hueco de imagen sin fotografía definitiva. */
  --img-pendiente: url("/images/placeholders/cih-placeholder-subtle.jpg");
  /* Excepción declarada: */
  --shadow-card: 0 1rem 3rem rgba(0, 16, 46, .22);

  /* --- El vidrio de los modales ----------------------------------------- */
  --vidrio-modal-fondo: rgba(0, 24, 66, .62);
  /* EL VIDRIO CLARO, para el panel de texto de la ficha médica (3-sep-2026). */
  --vidrio-claro-fondo: rgba(255, 255, 255, .78);
  --vidrio-modal-desenfoque: blur(22px) saturate(140%);
  --vidrio-modal-canto: rgba(255, 255, 255, .18);  /* bordes y filetes */
  --vidrio-modal-realce: rgba(255, 255, 255, .06); /* zonas dentro del vidrio */
  /* Tinta sobre el vidrio. */
  --vidrio-modal-texto: rgba(255, 255, 255, .88);
  --vidrio-modal-tenue: rgba(255, 255, 255, .72);

  /* --- El aire de los modales ------------------------------------------- */
  --modal-aire:   clamp(1.5rem, 1.2rem + 2vw, 3rem);
  --modal-aire-y: clamp(1.25rem, 1rem + 1.4vw, 2rem);

  /* --- Degradado de los bloques claros ----------------------------------- */
  --degradado-bloque: linear-gradient(155deg,
    var(--neutral-100) 0%,
    var(--neutral-100) 35%,
    var(--neutral-200) 100%);

  /* El mismo escalón, en navy: */
  --degradado-navy:
    radial-gradient(120% 120% at 15% 10%, rgba(34, 83, 155, .55), transparent 55%),
    linear-gradient(155deg, var(--navy-700) 0%, var(--navy-800) 45%, var(--navy-900) 100%);

  /* --- El primer piso del pie --------------------------------------------- */
  --degradado-pie:
    radial-gradient(120% 120% at 15% 10%, rgba(34, 83, 155, .28), transparent 55%),
    linear-gradient(160deg,
      var(--navy-800) 0%,
      var(--navy-900) 45%,
      #000A1F 100%);

  /* Cronometraje de la barra, medido: */
  --dur-chrome-bg: 100ms;
  --dur-chrome-move: 300ms;
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* Carrusel. La franja que asoma a cada lado es aritmética: */
  --hc-w: 69.5%;
  --hc-gap: 16px;
  /* Desenfoque del cristal de las diapositivas que no están en foco. */
  --hc-vidrio: 30px;
  /* Y el del TEXTO de esas mismas diapositivas. */
  --hc-vidrio-texto: 4px;
  --hc-inset: calc((100% - var(--hc-w)) / 2);
  /* ALTO DE LA TARJETA DEL CARRUSEL. */
  --hc-alto: 1.5;
  --hc-ratio: 4 / calc(5 * var(--hc-alto));

  --bs-link-color-rgb: 10, 111, 116;
  --bs-link-hover-color-rgb: 0, 32, 91;
}

@media (min-width: 768px) {
  :root { --hc-ratio: 16 / calc(9 * var(--hc-alto)); }
}

@media (min-width: 992px) {
  :root { --hc-ratio: 3 / var(--hc-alto); }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
    --dur-chrome-bg: 0ms;
    --dur-chrome-move: 0ms;
  }
}

/* LA ESCALA DE TODO EL SITIO SALE DE AQUÍ (1-sep-2026). */
html {
  /* LA RAÍZ VUELVE A CRECER CON LA VENTANA (4-sep-2026, fase 2). */
  font-size: clamp(1.1rem, 0.817rem + 0.361vw, 1.25rem);

  scroll-padding-top: calc(var(--chrome-h, 76px) + 1.25rem);

  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface-page);
  /* 1rem, no 18px. Estaba clavado en píxeles, o sea que el cuerpo del texto */
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-title);
  color: var(--text-strong);
  line-height: 1.15;

  font-weight: 600;
  font-synthesis: none;
  text-wrap: balance;
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: var(--transition-colors);
}

a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

::selection {
  background: var(--neutral-100);
  color: var(--navy-900);
}

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.site-footer :focus-visible,
.bg-navy :focus-visible,
.band-navy :focus-visible,
.hero :focus-visible {
  outline-color: var(--text-on-block);
}

.btn,
.nav-link,
.navbar-toggler,
.form-control,
.form-select,
.form-check-input,
.foot-contact a {
  min-height: 24px;
  min-width: 24px;
}

.form-check-input {
  width: 1.35em;
  height: 1.35em;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 2000;
  background: var(--navy-800);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 0 0 var(--radius-md) 0;
  font-family: var(--font-sans);
}

.skip-link:focus {
  left: 0;
}

.bg-mist {
  background: var(--surface-page) !important;
}

.bg-mist-2 {
  background: var(--surface-sunken) !important;
}

.bg-sunken {
  background: var(--surface-sunken) !important;
}

.section-eyebrow,
.hero .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--tipo-rotulo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--navy-700);
}

.hero .eyebrow {
  color: var(--text-muted);
}

.eyebrow-rule {

  display: block;
  width: 32px;
  height: 1px;
  border: 0;
  opacity: 1;
  background: var(--grey-400);
  border-radius: 0;
  margin: .75rem 0 2rem;
}

.band-navy .eyebrow-rule,
.bg-navy .eyebrow-rule {
  background: var(--grey-500);
}

/* Alturas del chrome. */
:root {
  --mast-h: 66px;
  /* Cero en las dos anchuras: */
  --mast-nav-h: 0px;

  /* Fila 1: la fila de accesos. */
  --acceso-chip-w: 100px;
  --acceso-chip-h: 44px;
  --acceso-pad: 6px;
  --acceso-pista-h: 56px;

  /* COMPENSACIÓN DEL HUECO DE ABAJO (ago 2026). */
  --acceso-compensa: 4px;
  --acceso-h: calc(var(--acceso-pista-h) + 12px + var(--acceso-compensa));

  --chrome-h: calc(var(--mast-h) + var(--mast-nav-h) + var(--acceso-h));
}

@media (min-width: 992px) {
  :root {
    --mast-h: 76px;
  }
}

.site-chrome {
  position: sticky;
  top: 0;
  z-index: 1035;
  /* El original mueve la barra con transform .3s ease-in-out: */
  transition: transform var(--dur-chrome-move) var(--ease-in-out);
}

html.is-nav-hidden .site-chrome {
  transform: translateY(-100%);
}

/* Sin transición, retirarla es un salto -peor que no retirarla-. */
@media (prefers-reduced-motion: reduce) {
  html.is-nav-hidden .site-chrome {
    transform: none;
  }
}

/* ---------- FILA 1 - la fila de accesos ------------------------------------- */

.acceso-fila {
  min-height: var(--acceso-h);
  display: flex;
  align-items: center;
  /* Los 4 px de --acceso-compensa van enteros arriba. */
  padding-top: var(--acceso-compensa);
  background: transparent;
}

.acceso-pista {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: var(--acceso-pad);
  min-height: var(--acceso-pista-h);
  /* Píldora blanca con algo de vidrio. */
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(12px) saturate(165%);
  backdrop-filter: blur(12px) saturate(165%);
  border: 1px solid rgba(0, 32, 91, .10);
  border-radius: var(--radius-pill-nav);
  width: max-content;
  max-width: 100%;
  /* Centrada, como el conmutador del original. */
  margin-inline: auto;
  /* Cuatro chips de 100 px más el padding suman 412 px: */
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.acceso-pista::-webkit-scrollbar {
  display: none;
}

.acceso-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--acceso-chip-w);
  min-height: var(--acceso-chip-h);
  padding-inline: 1rem;
  border-radius: var(--radius-pill-nav);
  font-family: var(--font-sans);
  font-size: var(--tipo-menor);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text-muted);
  scroll-snap-align: center;
  transition: var(--transition-colors);
}

.acceso-chip:hover {
  color: var(--navy-700);
  text-decoration: none;
}

/* El activo pasa a navy macizo: */
.acceso-chip[aria-current="page"] {
  background: var(--navy-700);
  color: var(--text-on-navy);
  font-weight: 600;
}

/* La cabecera no pinta nada: */
.site-head {
  position: relative;
  background: transparent;
  border-bottom: 0;
  transition: background var(--dur-chrome-bg) linear,
              background-color var(--dur-chrome-move) var(--ease-in-out),
              border-color var(--dur-chrome-move) var(--ease-in-out);
}

html.is-condensed .site-head {
  box-shadow: var(--shadow-sm);
}

.mast-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--mast-h);
  flex-wrap: wrap;
}

/* El blanco va aquí, de lado a lado. */
.mast-band {
  background: var(--surface-card);
}

.site-head .mast-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}

/* Logotipo de la barra a dos líneas -«Cozumel» de antetítulo, «International */
/* EL NOMBRE DE LA MARCA DENTRO DE UN PÁRRAFO. */
.marca-inline {
  font-family: var(--font-round);
  font-weight: 400;
  font-synthesis: none;
  font-size: 1.06em;
  letter-spacing: .01em;
  white-space: nowrap;
}

.mast-wordmark {
  display: block;
  font-family: var(--font-round);
  font-weight: 400;
  font-synthesis: none;
  font-size: 1.15rem;
  line-height: 1.1;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--text-brand);
  --wm-kicker: .58em;
}

@media (min-width: 992px) {
  .mast-wordmark { font-size: 1.4rem; }
}

/* ---------- LA BARRA EN UNA SOLA FILA EN MÓVIL (ago 2026) ------------------- */
@media (max-width: 991.98px) {
  .mast-inner { flex-wrap: nowrap; gap: .45rem; }

  .mast-logo {
    min-width: 0;
    /* EN PÍXELES DESDE EL 1-SEP-2026, antes en rem -clamp(.72rem, .38rem + */
    font-size: clamp(11px, 5px + 1.6vw, 17px);
  }

  .mast-wordmark { font-size: 1em; }

  .mast-logo .marca-cruz { height: 3em; margin-right: -18px; }

  /* Los últimos píxeles: */
  .mast-end { gap: .5rem; }
  .mast-burger { padding: .25rem; }

  /* EL RELLENO DEL BOTÓN DE URGENCIAS, EN PÍXELES (1-sep-2026). */
  .mast-end .btn { padding-inline: 12px; }
}

/* POR DEBAJO DE 360 px, LA CRUZ SOLA. */
@media (max-width: 359.98px) {
  .mast-wordmark { display: none; }
  .mast-logo .marca-cruz { margin-right: 0; }
}

/* El botón de urgencias NO se ajusta aquí sino en su propia regla de móvil, */

/* --- El logotipo de la redonda: */
.site-head .mast-logo:hover,
.site-head .mast-logo:focus-visible,
.site-head .mast-logo:active { text-decoration: none; }

/* Los cuatro sitios donde se escribe el nombre con la redonda. */
.mast-wordmark,
.panel-wordmark,
.foot-wordmark,
.hc-wordmark {
  transition: text-shadow var(--duration) var(--ease-standard);
}

:is(a, button):is(:hover, :focus-visible) :is(.mast-wordmark, .panel-wordmark, .foot-wordmark, .hc-wordmark),
:is(a, button):is(.mast-wordmark, .panel-wordmark, .foot-wordmark, .hc-wordmark):is(:hover, :focus-visible) {
  text-shadow: 0 0 .05em rgb(var(--wm-glow) / .5),
               0 0 .36em rgb(var(--wm-glow) / .4);
}

/* Resplandor ROJO al pasar por encima o al enfocar, hermano del azul del */
.site-head .mast-logo:hover .marca-cruz,
.site-head .mast-logo:focus-visible .marca-cruz,
.site-head .mast-logo:active .marca-cruz {
  filter: drop-shadow(0 0 .12em rgb(var(--cruz-glow) / .65))
          drop-shadow(0 0 .5em  rgb(var(--cruz-glow) / .45));
}

@media (prefers-reduced-motion: reduce) {
  .marca-cruz { transition: none; }
}

/* ---------- La cruz de la marca --------------------------------------------- */
.mast-panel .offcanvas-header .marca-cruz { margin-right: .6rem; }

.marca-cruz {
  display: block;
  width: auto;
  height: 4em;
  flex: 0 0 auto;
  transition: filter var(--duration) var(--ease-standard);
  margin: 0 -25px 0 0;
  padding: 0;
}

:is(a, button):active :is(.mast-wordmark, .panel-wordmark, .foot-wordmark, .hc-wordmark),
:is(a, button):is(.mast-wordmark, .panel-wordmark, .foot-wordmark, .hc-wordmark):active {
  text-shadow: 0 0 .04em rgb(var(--wm-glow) / .78),
               0 0 .2em rgb(var(--wm-glow) / .62);
}

@media (prefers-reduced-motion: reduce) {
  .mast-wordmark,
  .panel-wordmark,
  .foot-wordmark,
  .hc-wordmark { transition: none; }
}

.pulse-dot {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--emergency);
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgb(var(--cruz-glow) / .55);
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--cruz-glow) / .5);
  }

  70% {
    box-shadow: 0 0 0 .5rem rgb(var(--cruz-glow) / 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgb(var(--cruz-glow) / 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-dot {
    animation: none;
  }
}

/* Las secciones se van al panel por debajo de 992 px. */
.mast-nav {
  display: none;
}

@media (min-width: 992px) {
  /* Rejilla de tres columnas para que el menú quede centrado en la BARRA, no */
  .mast-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .mast-logo {
    grid-column: 1;
    justify-self: start;
    min-width: 0;
  }

  .mast-nav {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    margin: 0;
    min-height: 0;
  }

  .mast-end {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
    min-width: 0;
  }
}

.mast-nav .navbar-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .1rem;
  flex-wrap: nowrap;
}

/* Icono + etiqueta en fila, como los ítems del original. */
.mast-nav .nav-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}

/* AQUÍ VIVÍA EL ICONO DEL MENÚ SUPERIOR, retirado en ago 2026 a petición del */

/* Cerca del umbral de 992 px ni siquiera sin iconos cabe: */
@media (max-width: 1199.98px) {
  .site-head .mast-nav .nav-link {
    padding-inline: .3rem !important;
    font-size: var(--tipo-menor);
  }
}

.site-head .nav-link {
  font-family: var(--font-sans);
  color: var(--text-body);
  font-weight: 500;
  font-size: var(--tipo-menor);
  padding: .5rem .7rem !important;
  border-radius: var(--radius-sm);
  transition: var(--transition-colors);
}

/* URGENCIAS EN ROJO. */
.site-head .nav-link-urg {
  color: var(--emergency);
  font-weight: 600;
}

.site-head .nav-link-urg:hover,
.site-head .nav-link-urg.active {
  color: var(--emergency-dk);
  background: var(--emergency-50, rgba(224, 3, 15, .07));
}

.site-head .nav-link:hover {
  color: var(--navy-700);
  background: var(--navy-50);
}

.site-head .nav-link.active {
  color: var(--navy-700);
  font-weight: 600;
}

.site-head .nav-group-btn {
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
}

.site-head .nav-group-btn .ih-ic {
  transition: var(--transition-transform);
}

.site-head .nav-group-btn[aria-expanded="true"] .ih-ic {
  transform: rotate(180deg);
}

.mast-end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: 0 0 auto;
}

/* Conmutador ES / EN, a la izquierda del botón de urgencias en todos los */
.mast-lang {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--tipo-rotulo);
  letter-spacing: .06em;
  font-weight: 600;
  white-space: nowrap;
}

.mast-lang .lang-cur {
  color: var(--navy-700);
}

.mast-lang .lang-alt {
  color: var(--text-muted);
}

.mast-lang a.lang-alt:hover {
  color: var(--navy-700);
  text-decoration: none;
}

/* La barra del conmutador va entre las dos lenguas, así que se cuelga del */
.mast-lang > * + *::before {
  content: "/";
  margin: 0 .3rem;
  color: var(--border-default);
}

.mast-lang .lang-alt.is-disabled {
  opacity: .55;
  cursor: default;
}

/* En teléfonos estrechos el conmutador no cabe en la fila -logotipo, ES/EN, */
@media (max-width: 479.98px) {
  .mast-lang {
    display: none;
  }
}

@media (min-width: 992px) {
  }

/* El botón de urgencias: */
.mast-urg {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

/* El icono no debe encogerse cuando la barra va justa: */
.mast-urg .ih-ic {
  display: inline-flex;
  flex-shrink: 0;
}

/* El número en cifras tabulares: */
.mast-urg-num { font-variant-numeric: tabular-nums; }

/* En móvil sólo se le quita relleno, NO cuerpo de letra: */
@media (max-width: 991.98px) {
  .mast-urg { padding: .3rem .65rem; font-size: var(--tipo-menor); gap: .32rem; }
}

/* EL TELÉFONO ENCOGE ENTRE 345 Y 400 px, Y SÓLO AHÍ (6-sep-2026, a petición de
   Jorge: «quítalo del botón de urgencias»).

   QUÉ ARREGLA. La cabecera es una fila sin envolver: logotipo + botón de
   urgencias + hamburguesa. A 360 px pide 343.8 px y sólo tiene 324.8, así que
   se salía 1.4 px del viewport y las páginas interiores arrastraban en
   horizontal. La portada no arrastraba, pero no porque cupiera: allí
   .site-chrome es 'fixed' y queda fuera del flujo, mientras que en las
   interiores es 'sticky' y sí cuenta. El desbordamiento era el mismo en las dos.

   POR QUÉ UNA VENTANA Y NO UN 'max-width' A SECAS. Medido a ocho anchos, sólo
   falta sitio entre ~345 y ~380 px -19 px a 360, 4 a 375-. A 320 SOBRAN 21,
   porque ahí la escala tipográfica ya está en su suelo y el logotipo y el
   número han encogido más que la pantalla; a 390 sobran 8. Fuera de esa
   ventana el botón no tiene por qué achicarse, así que no se achica.

   EL TECHO ESTÁ EN 385 Y NO EN 400 POR UN ANCHO CONCRETO: 390 px, que es el de
   los iPhone actuales. Ahí sobran 8.3 px sin tocar nada, así que el número se
   queda a tamaño completo en el teléfono más común. La ventana cubre 360 -19 px
   de falta- y 375 -4-, que son los que sí fallan.

   ESTO ESTRECHA LA REGLA DE ARRIBA, que dice «sólo relleno, NO cuerpo de
   letra», y conviene saber por qué. Se intentó cumplirla: el relleno de este
   botón son 12 px por lado, así que quitándolo ENTERO se llegaría a 24 px, y
   los 19 que faltan dejarían la pastilla con 2 px de aire a cada lado, que no
   es un botón sino un cartel. El reparto de abajo saca 25 px de los tres sitios
   -8 de relleno, 2.5 del hueco y 18 del número- y deja 6 px de margen a 360.
   ESE MARGEN NO ES CAPRICHO: con 2.7 px la cuenta salía, pero mientras
   Montserrat carga el navegador pinta con la de respaldo, que es más ancha, y
   volvería a arrastrar durante ese instante.
   La regla general sigue en pie por encima de 400 px, que es donde se escribió.

   LO QUE NO SE TOCA: el alto sigue en 44 px -el relleno vertical no se mueve-,
   así que el objetivo táctil no baja de los 24×24 de WCAG 2.5.8; y el blanco
   sobre el rojo de urgencias sigue en 5.01:1. */
@media (min-width: 340px) and (max-width: 385px) {
  .mast-end .btn { padding-inline: 8px; }
  .mast-urg { gap: .18rem; }
  .mast-urg-num { font-size: .85em; }
}

.mast-burger {
  --burger-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='5' width='20' height='2.2' rx='1.1'/%3E%3Crect x='2' y='10.9' width='20' height='2.2' rx='1.1'/%3E%3Crect x='2' y='16.8' width='20' height='2.2' rx='1.1'/%3E%3C/svg%3E");
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: .35rem;
  background: none;
  color: var(--navy-700);
  box-shadow: none;
}

/* LA HAMBURGUESA ES SÓLO DE MÓVIL (ago 2026). */
@media (min-width: 992px) {
  .mast-burger { display: none; }
}

.mast-burger:focus {
  box-shadow: none;
}

.mast-burger .navbar-toggler-icon {
  background-image: none;
  width: 1.6rem;
  height: 1.6rem;
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--burger-mask) center / contain no-repeat;
  mask: var(--burger-mask) center / contain no-repeat;
}

.has-nav-overlay .site-chrome {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}

.has-nav-overlay .hero {
  padding-top: var(--chrome-h);
}

/* La barra es blanca maciza en todas las páginas y en los dos estados. */

.mast-panel :focus-visible {
  outline-color: var(--text-on-block);
}

/* El menú es el mapa del sitio y ocupa dos tercios de la pantalla, esmerilado */
.mast-panel.offcanvas {
  width: 100vw;
  max-width: 100vw;
  /* .82 y no .72: por debajo de eso, con una página oscura detrás -el hero con */
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  color: var(--text-on-block);
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .55);
}

/* Antes eran dos tercios. */
@media (min-width: 768px) {
  .mast-panel.offcanvas { width: min(1600px, 94vw); }
}

/* Sin vidrio no hay efecto: */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .mast-panel.offcanvas { background: rgba(255, 255, 255, .96); }
}

/* El velo de Bootstrap es negro al 50 %: */
.offcanvas-backdrop.show {
  background-color: var(--navy-900);
  opacity: .28;
}

.mast-panel .offcanvas-header {
  padding: 1.1rem clamp(1.25rem, 4vw, 2rem);
  border-bottom: 1px solid rgba(0, 32, 91, .12);
}

/* Cabecera del menú: */
.mast-panel .offcanvas-header .panel-wordmark {
  font-family: var(--font-round);
  font-weight: 400;
  font-synthesis: none;
  font-size: 1.3rem;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--text-on-block);
  --wm-kicker: .58em;
}

/* Urgencias sube aquí, pegado a la equis. */
.panel-head-end {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.25rem);
  /* Pegados al borde derecho. */
  margin-left: auto;
}

.mast-panel .offcanvas-body {
  padding: 1.25rem clamp(1.25rem, 4vw, 2rem) 1.5rem;
}

/* El cuerpo son tres bandas apiladas, separadas por una regla. */
.panel-body {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  overflow-y: auto;
}

/* --- Banda 1: los tres bloques de servicio ------------------------------- */
.panel-servicios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2rem;
}
@media (min-width: 700px) {
  .panel-servicios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Una celda de la rejilla puede llevar más de un grupo: */
.panel-scol-celda {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.panel-scol { min-width: 0; }

/* La cabecera de cada bloque es un enlace de verdad a su página: */
.panel-scol-head {
  margin: 0 0 .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(0, 32, 91, .18);
}
.panel-scol-head a {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: var(--tipo-cuerpo);
  line-height: 1.25;
  color: var(--text-on-block);
  text-decoration: none;
  display: block;
}
.panel-scol-head a:hover,
.panel-scol-head a:focus-visible { color: var(--accent-on-block); }

.panel-scol-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.panel-scol-lista a {
  display: block;
  font-family: var(--font-sans);
  /* Más chico que el mapa del sitio de abajo: */
  font-size: var(--tipo-menor);
  line-height: 1.35;
  color: var(--navy-600);
  padding: .38rem 0;
  text-decoration: none;
}
.panel-scol-lista a:hover,
.panel-scol-lista a:focus-visible { color: var(--accent-on-block); }

/* --- Banda 2: los atajos ------------------------------------------------- */
.panel-atajos {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 32, 91, .12);
}
.panel-atajo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: var(--tipo-cuerpo);
  color: var(--text-on-block);
  text-decoration: none;
}
.panel-atajo:hover,
.panel-atajo:focus-visible,
.panel-atajo.active { color: var(--accent-on-block); }

/* --- Banda 3: los teléfonos, cinco columnas ------------------------------ */
.panel-contacto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 32, 91, .12);
}
@media (min-width: 700px) {
  .panel-contacto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  /* Las cinco de verdad: */
  .panel-contacto { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Rótulo arriba y número debajo: */
.panel-contacto .mc-item {
  flex-wrap: wrap;
  align-items: baseline;
  min-width: 0;
}
.panel-contacto .mc-num {
  flex-basis: 100%;
  font-size: var(--tipo-menor);
}
.panel-contacto .mc-email {
  /* El correo es el único que no es un número y no cabe sin partirse. */
  overflow-wrap: anywhere;
}

.mc-item {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-sans);
  font-size: var(--tipo-cuerpo);
  padding: .25rem 0;
  min-height: 36px;
}

.mc-item .ih-ic {
  flex: 0 0 auto;
}

.mc-num {
  font-family: var(--font-mono);
}

.mast-panel .mc-item {
  color: var(--text-on-block);
}

.mast-panel .mc-item .ih-ic {
  color: var(--accent-on-block);
}

.mast-panel .mc-k {
  color: var(--text-muted);
}

.mast-panel .mc-num {
  color: var(--text-on-block);
}

.mast-panel .mc-urg,
.mast-panel .mc-urg .mc-k,
.mast-panel .mc-urg .mc-num {
  color: var(--emergency-dk);
  font-weight: 600;
}

.mast-panel .mc-item:hover {
  color: var(--accent-on-block);
}

/* LOS ESTUDIOS DE CADA SERVICIO DE /diagnostico, EN VERTICAL (ago 2026). */
.svc-estudios {
  margin: .35rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--tipo-menor);
  line-height: 1.55;
  color: var(--text-muted);
}

/* El aire va como padding-bottom uniforme y NO como «li + li { margin-top }»: */
.svc-estudios > li {
  padding-bottom: .4rem;
  break-inside: avoid;
}

/* Dos columnas sólo desde 768 px. */
@media (min-width: 768px) {
  .svc-estudios { columns: 2; column-gap: 2.5rem; }
}

/* CATÁLOGO DEL LABORATORIO (ago 2026). */
.lab-catalogo {
  margin-top: 2.5rem;
  columns: 1;
  column-gap: 3rem;
}

@media (min-width: 576px) { .lab-catalogo { columns: 2; } }
@media (min-width: 992px) { .lab-catalogo { columns: 3; } }

/* APILA LOS GRUPOS CORTOS (ago 2026). */
.lab-grupo {
  break-inside: avoid;
  margin-bottom: 2.5rem;
}

.lab-grupo-t {
  font-family: var(--font-title);
  font-size: var(--tipo-cuerpo);
  font-weight: 600;
  color: var(--text-strong);
  padding-bottom: .6rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--border-subtle);
}

.lab-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--tipo-menor);
  line-height: 1.55;
  color: var(--text-body);
}

.lab-lista > li + li { margin-top: .45rem; }

/* EL NOMBRE DEL PERFIL ES UN BOTÓN: */
.lab-perfil {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: .25em;
  text-decoration-color: var(--border-default);
}

/* EL CURSOR, EN «help» Y NO EN «pointer»: */
.lab-perfil:not(:disabled) { cursor: help; }

.lab-perfil:hover,
.lab-perfil:focus-visible {
  color: var(--text-strong);
  text-decoration-color: currentColor;
}

/* LA FICHA, VESTIDA COMO EL RESTO DEL SITIO. */
.popover-perfil {
  --bs-popover-max-width: 22rem;
  --bs-popover-bg: var(--surface-card);
  --bs-popover-border-color: var(--border-subtle);
  --bs-popover-border-radius: var(--radius-lg);
  --bs-popover-inner-border-radius: var(--radius-lg);
  --bs-popover-header-bg: var(--surface-card);
  --bs-popover-header-color: var(--text-strong);
  --bs-popover-header-font-size: var(--tipo-menor);
  --bs-popover-body-color: var(--text-body);
  --bs-popover-body-padding-y: .75rem;
  --bs-popover-font-size: .875rem;
  box-shadow: none;
}

.popover-perfil .popover-header {
  font-family: var(--font-title);
  font-weight: 600;
  border-bottom: 1px solid var(--border-subtle);
}

.popover-perfil .popover-body { line-height: 1.55; }

/* La demora, sólo donde el laboratorio la declara. */
.lab-espera {
  margin-left: .4rem;
  font-family: var(--font-mono);
  font-size: var(--tipo-rotulo);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}

/* La fila de cierre del panel: */
.panel-cierre {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.75rem;
}

/* Mismo cuerpo y misma voz que el conmutador de idioma -letra mono, pequeña y */
.panel-legal {
  font-family: var(--font-mono);
  font-size: var(--tipo-menor);
  color: var(--text-muted);
}

.panel-legal:hover {
  color: var(--accent-on-block);
  text-decoration: none;
}

.panel-legal[aria-current] {
  color: var(--text-on-block);
  font-weight: 700;
}

.panel-lang {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--tipo-menor);
}

.panel-lang .lang-cur {
  color: var(--text-on-block);
  font-weight: 700;
}

.panel-lang .lang-alt {
  color: var(--text-muted);
}

.panel-lang a.lang-alt:hover {
  color: var(--accent-on-block);
  text-decoration: none;
}

.panel-lang .lang-alt.is-disabled {
  opacity: .6;
}

.btn {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--radius-control);
  border-width: 1.5px;
  min-height: var(--control-h-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .35rem 1.375rem;
  transition: var(--transition-colors), var(--transition-transform), var(--transition-shadow);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn-lg {
  min-height: var(--control-h-lg);
  font-size: var(--tipo-cuerpo);
  padding: .35rem 1.9rem;
}

.btn-pill {
  border-radius: var(--radius-pill);
}

.btn-close { border-radius: var(--radius-sm); }

.btn-navy {
  background: var(--brand-primary);
  border-color: transparent;
  color: var(--text-on-navy);
}

.btn-navy:hover,
.btn-navy:focus {
  background: var(--brand-primary-hover);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-navy);
}

.btn-navy:active {
  background: var(--brand-primary-active);
}

.btn-grey {
  background: var(--brand-secondary);
  border-color: transparent;
  color: var(--text-on-grey);
}

.btn-grey:hover,
.btn-grey:focus {
  background: var(--brand-secondary-hover);
  color: var(--text-on-grey);
  box-shadow: var(--shadow-grey);
}

.btn-grey:active {
  background: var(--brand-secondary-active);
  color: #fff;
}

.btn-emergency {
  background: transparent;
  border: 1px solid var(--emergency);
  color: var(--emergency);
  font-weight: 600;
}

.mast-panel .btn-emergency,
.hero .btn-emergency,
.band-navy .btn-emergency {
  border-color: var(--emergency-dk);
  color: var(--emergency-dk);
}

.btn-emergency:hover,
.btn-emergency:focus {
  background: var(--emergency);
  border-color: var(--emergency);
  color: #fff;
}

.btn-outline-navy {
  border: 1.5px solid var(--border-navy);
  color: var(--text-brand);
  background: transparent;
}

.btn-outline-navy:hover {
  background: var(--navy-50);
  color: var(--text-brand);
}

.btn-outline-brand {
  border: 1px solid var(--navy-700);
  color: var(--navy-700);
  background: transparent;
}

.btn-outline-brand:hover,
.btn-outline-brand:focus {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: #fff;
}

/* ---------- El panel en escritorio ----------------------------------------- */
/* EL PANEL HACE DOS PAPELES, y por eso esto va por consulta de medios y no
   borrando marcado:

   - POR DEBAJO DE 992 px es el MENÚ DEL SITIO: lo abre la hamburguesa y tiene
     que llevarlo TODO -atajos, los cuatro teléfonos, el correo, el aviso de
     privacidad y el conmutador de idioma-. Ojo con el idioma en particular:
     «.mast-lang» se esconde por debajo de 480 px, así que en un teléfono
     estrecho el ÚNICO conmutador ES/EN del sitio es el de este panel. Si se
     borrara del marcado, esos teléfonos se quedarían sin forma de cambiar de
     lengua.

   - DE 992 px PARA ARRIBA es el panel de «Servicios» y NADA MÁS (7-sep-2026,
     a petición de Jorge): se queda la banda de servicios y se van las otras
     tres. Ninguna hace falta ahí -los atajos repiten lo que ya está en la
     barra y en el pie; los teléfonos están en el botón rojo de la barra, en
     /contacto y en el pie; privacidad e idioma, en la barra y en el pie-. */
@media (min-width: 992px) {
  /* La segunda banda de enlaces -inicio, staff médico, diagnóstico...-. */
  .mast-panel .panel-atajos,
  /* La banda de contacto ENTERA: ni teléfonos, ni WhatsApp, ni correo. */
  .mast-panel .panel-contacto,
  /* El cierre: aviso de privacidad + conmutador de idioma. */
  .mast-panel .panel-cierre {
    display: none;
  }
}

/* ---------- Migas de pan ----------------------------------------------------- */
main {
  display: flex;
  flex-direction: column;
}

main > .hero { order: -1; }

.migas {
  font-size: var(--tipo-menor);
  line-height: 1.5;
  padding-block: .75rem;
  /* Gris claro, pero el MÁS claro que todavía pasa AA sobre blanco: */
  color: var(--grey-600);
}

.migas-fila {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  /* A la derecha; «Volver» queda pegado a la ruta, no al borde opuesto. */
  justify-content: flex-end;
}

.volver {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  /* 44 px de alto de objetivo sin engordar la fila: */
  min-height: var(--control-h-md);
  margin-block: calc((var(--control-h-md) - 1.5em) / -2);
  padding-inline: .5rem .6rem;
  margin-left: -.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--grey-600);
  transition: var(--transition-colors);
}

.volver:hover {
  background: var(--navy-50);
  text-decoration: none;
}

.volver .ih-ic {
  margin-left: -.15rem;
}

/* Separador entre «Volver» y la ruta. */
.migas-fila > ol {
  position: relative;
  padding-left: .75rem;
}

.migas-fila > ol::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  bottom: .15em;
  width: 1px;
  background: var(--border-subtle);
}

.migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.migas li {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  color: var(--text-muted);
}

.migas li + li::before {
  content: "/";
  color: var(--grey-600);
}

.migas [aria-current="page"] {
  font-weight: 600;
  color: var(--grey-700);
}

.migas a {
  color: var(--grey-600);
  text-decoration: none;
}

.migas a:hover,
.migas a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero {
  position: relative;

  /* El mismo degradado que las demás bandas grises. */
  background: var(--degradado-bloque);
  color: var(--text-on-block);
  overflow: hidden;

  /* El aire de la banda, en un token para poder sumarle por arriba sin repetir */
  --hero-aire: clamp(3.5rem, 2.5rem + 3.5vw, 6rem);
  padding-block: var(--hero-aire);
}

/* Y SÓLO DE 768 PARA ARRIBA. */
@media (min-width: 768px) {
  .hero {
    padding-block: calc(var(--hero-aire) + var(--hero-baja, 0rem)) var(--hero-aire);
  }
}

/* PORTADILLA CON FOTOGRAFÍA. */
.hero.hero-photo {
  background-image:
    linear-gradient(90deg,
      rgba(0, 16, 46, .88) 0%,
      rgba(0, 16, 46, .78) 42%,
      rgba(0, 16, 46, .64) 66%,
      rgba(0, 16, 46, .42) 100%),
    var(--hero-foto, var(--img-pendiente));
  background-size: cover;
  /* EL PUNTO FOCAL, POR PÁGINA (ago 2026). */
  background-position: var(--hero-foco, center);
  background-repeat: no-repeat;
  color: var(--text-on-navy);
}

@media (max-width: 767.98px) {
  .hero.hero-photo {
    background-image:
      linear-gradient(0deg,
        rgba(0, 16, 46, .88) 0%,
        rgba(0, 16, 46, .76) 55%,
        rgba(0, 16, 46, .68) 100%),
      var(--hero-foto, var(--img-pendiente));
  }
}

/* VELO ACLARADO, SÓLO EN /logistica (5-sep-2026, a petición de Jorge). */
.hero.hero-photo.hero-velo-claro {
  background-image:
    linear-gradient(90deg,
      rgba(0, 16, 46, .68) 0%,
      rgba(0, 16, 46, .64) 66%,
      rgba(0, 16, 46, .42) 100%),
    var(--hero-foto, var(--img-pendiente));
}

/* En el teléfono el velo es vertical y sobraba menos, porque allí el texto se */
@media (max-width: 767.98px) {
  .hero.hero-photo.hero-velo-claro {
    background-image:
      linear-gradient(0deg,
        rgba(0, 16, 46, .74) 0%,
        rgba(0, 16, 46, .72) 55%,
        rgba(0, 16, 46, .67) 100%),
      var(--hero-foto, var(--img-pendiente));
  }
}

/* El titular y la entradilla traen su color escrito -«.hero h1» y «.lede»-, así */
.hero.hero-photo h1,
.hero.hero-photo .lede {
  color: var(--text-on-navy);
}

/* El antetítulo iba en --text-muted, que es navy-500: */
.hero.hero-photo .eyebrow {
  color: var(--navy-100);
}

/* Los dos botones están escritos para fondo claro y en navy o en rojo oscuro. */
.hero.hero-photo .btn-outline-brand {
  border-color: #fff;
  color: #fff;
}

.hero.hero-photo .btn-emergency {
  background: var(--emergency);
  border-color: var(--emergency);
  color: #fff;
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero h1 {
  font-family: var(--font-title);
  color: var(--text-on-block);
  font-weight: 600;
  /* El cuerpo sale a un token para que .hero-marca pueda escalarlo sin repetir */
  --hero-h1: clamp(var(--tipo-h2), 1.28rem + 1.51vw, var(--tipo-hero));
  font-size: var(--hero-h1);
  line-height: 1.25;
  letter-spacing: -.015em;
  /* La medida de lectura de un titular, y la misma en las trece portadillas. */
  max-width: 22ch;
  margin: 0;
}

/* EL TITULAR QUE ES EL NOMBRE DE LA CASA, EN LA REDONDA (/acerca, ago 2026). */
.hero .hero-marca {
  font-family: var(--font-round);
  font-weight: 400;
  font-synthesis: none;
  font-size: calc(var(--hero-h1) * 1.06);
  letter-spacing: .01em;
}

/* Se escribió para el hero de una línea bajo la nav flotante. */
.has-nav-overlay .hero:not(.hc) h1 { font-size: clamp(1.2rem, .7rem + 2vw, 2.1rem); }

/* ---------- CARRUSEL DEL HERO ---------------------------------------------- */

.hc {
  /* Lo que dura una diapositiva. */
  --hc-dwell: 7000ms;
  /* En las páginas interiores el carrusel va debajo de las migas y necesita */
  padding-block: var(--hc-arriba) var(--hc-abajo-pad);
  /* Lo que queda por encima y por debajo de la PISTA. */
  --hc-arriba: .75rem;
  --hc-abajo-pad: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  /* Debajo de la pista van el margen de la barra, la barra y el relleno. */
  --hc-abajo: calc(1rem + 44px + var(--hc-abajo-pad));
  /* Escenario azul: es lo que se ve en la franja que asoma a los lados de la */
  background: var(--degradado-navy);
  color: var(--text-on-navy);
  /* clip y no hidden: */
  overflow: clip;
}

/* En la portada el carrusel pasa por debajo del chrome flotante, así que su */
.has-nav-overlay .hc {
  --hc-arriba: var(--chrome-h);
}

.hc-pista {
  display: flex;
  gap: var(--hc-gap);
  overflow: auto hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--hc-inset);
  padding-inline: var(--hc-inset);
  /* Para que el anillo de foco de la pista no se recorte contra el borde. */
  padding-block: 4px;
  scrollbar-width: none;
  /* En iOS, un scroll horizontal que llega al tope dispara el gesto de */
  overscroll-behavior-x: contain;
}

.hc-pista::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hc-pista {
    scroll-behavior: smooth;
  }
}

.hc-slide {
  /* Tinta de la diapositiva. */
  --hc-tinta: #fff;
  --hc-tinta-suave: rgba(255, 255, 255, .92);
  position: relative;
  /* 100%, no var(--hc-w), y no es un descuido: */
  flex: 0 0 100%;
  aspect-ratio: var(--hc-ratio);
  border-radius: var(--radius-hero);
  overflow: hidden;
  scroll-snap-align: center;
  /* El escenario del original es #2D2F36; aquí el mismo papel lo hace el gris */
  background: var(--neutral-100);
  display: flex;
  align-items: flex-end;
}

.hc-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hc-foco, 50% 50%);
  /* Medido en el original: */
  transform: scale(1.05);
}

/* EL VÍDEO, UN PUNTO MÁS VIVO (ago 2026). */
video.hc-media {
  filter: saturate(1.14) contrast(1.05) brightness(1.06);
}

/* El velo es lo que hace legible el texto blanco. */
.hc-velo {
  position: absolute;
  inset: 0;
  /* Las paradas no son estéticas: */
  background: linear-gradient(90deg,
              rgba(0, 16, 46, .78) 0%,
              rgba(0, 16, 46, .64) 50%,
              rgba(0, 16, 46, .25) 82%,
              rgba(0, 16, 46, .10) 100%);
}

/* En móvil la tarjeta es vertical y el texto ocupa casi toda su altura, así */
@media (max-width: 767.98px) {
  .hc-velo {
    background: linear-gradient(0deg,
                rgba(0, 16, 46, .84) 0%,
                rgba(0, 16, 46, .72) 50%,
                rgba(0, 16, 46, .62) 100%);
  }
}

/* LA VIÑETA DEL CARRUSEL. */
.hc-velo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 50%,
              rgba(0, 16, 46, 0) 0%,
              rgba(0, 16, 46, 0) 55%,
              rgba(0, 16, 46, .16) 78%,
              rgba(0, 16, 46, .34) 100%);
}

.hc-texto {
  position: relative;
  z-index: 1;
  color: var(--hc-tinta);
  max-width: min(34rem, 78%);
  padding: clamp(1.25rem, 1rem + 2vw, 3rem);
}

/* En móvil el texto ocupa casi toda la tarjeta y con una proporción fija se */
@media (max-width: 767.98px) {
  .hc-slide {
    aspect-ratio: auto;
    /* En móvil el alto lo pone esto y no --hc-alto: */
    min-height: min(80svh, 40rem);
  }
  /* La de marca conserva proporción fija: */
  .hc-slide--marca {
    aspect-ratio: var(--hc-ratio);
    min-height: 0;
  }
  .hc-texto {
    max-width: 100%;
  }
}

.hc .hc-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--tipo-rotulo);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--hc-tinta);
  margin: 0 0 .75rem;
}

/* Va con .hc delante a propósito: */
.hc .hc-titulo {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(var(--tipo-h2), 1.485rem + 1.2292vw, var(--tipo-hero));
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--hc-tinta);
  margin: 0;
  max-width: 18ch;
}

.hc .hc-lede {
  margin: 1rem 0 0;
  max-width: 34ch;
  line-height: 1.65;
  color: var(--hc-tinta-suave);
}

.hc-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.5rem 0 0;
}

/* .btn-emergency es un botón perfilado -sin relleno, texto --emergency-dk- */
.hc-ctas .btn-emergency {
  background: var(--emergency);
  border-color: var(--emergency);
  color: #fff;
  font-weight: 600;
}

/* CTAS DE CONTACTO: */
.btn-contacto {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}

.btn-contacto .ih-ic {
  display: inline-flex;
  flex-shrink: 0;
}

/* Cifras tabulares: */
.btn-contacto-num { font-variant-numeric: tabular-nums; }

/* ---------- LOS BOTONES DE WHATSAPP, EN VERDE WHATSAPP --------------------- */
.btn[href*="wa.me"] {
  border-color: #25D366;
}

/* En las portadillas con fotografía y en el carrusel manda «.hero.hero-photo */
.hero .btn[href*="wa.me"],
.hc-slide .btn[href*="wa.me"] {
  border-color: #25D366;
}

.btn[href*="wa.me"] .ih-ic { color: #25D366; }

/* AL APUNTAR SÍ SE RELLENA, que es donde el macizo no le compite a nadie porque */
.btn[href*="wa.me"]:hover,
.btn[href*="wa.me"]:focus-visible {
  background: #25D366;
  border-color: #25D366;
  color: var(--navy-700);
}

.btn[href*="wa.me"]:hover .ih-ic,
.btn[href*="wa.me"]:focus-visible .ih-ic { color: var(--navy-700); }

.hc-ctas .btn-emergency:hover {
  background: var(--emergency-dk);
  border-color: var(--emergency-dk);
  color: #fff;
}

/* Botón claro sobre el velo. */
.hc-btn-claro {
  background: #fff;
  color: var(--navy-700);
  border: 1px solid #fff;
  font-weight: 600;
}

.hc-btn-claro:hover {
  background: rgba(255, 255, 255, .88);
  color: var(--navy-800);
}

/* Botón PERFILADO sobre el velo -el de la portada desde agosto de 2026-. */
.hc-btn-linea {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .75);
  font-weight: 600;
}

.hc-btn-linea:hover,
.hc-btn-linea:focus-visible {
  background: rgba(255, 255, 255, .16);
  border-color: #fff;
  color: #fff;
}

/* EL BOTÓN QUE ES LA CRUZ. */
.hc-btn-cruz {
  display: inline-block;
  width: var(--cruz-encabezado-visible);
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  /* .btn reserva alto de línea para su texto; éste no tiene y sin esto la cruz */
  line-height: 0;
  transition: transform var(--duration) var(--ease-standard),
              opacity var(--duration) var(--ease-standard);
}

.hc-btn-cruz img {
  width: 100%;
  height: auto;
  display: block;
}

.hc-btn-cruz:hover,
.hc-btn-cruz:focus-visible {
  background: none;
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .hc-btn-cruz { transition: none; }
  .hc-btn-cruz:hover,
  .hc-btn-cruz:focus-visible { transform: none; }
}

/* --ring-color es navy translúcido: */
/* Anillo blanco SÓLO donde el fondo es el medio: */
.hc-slide--video :focus-visible,
.hc-slide--imagen :focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .hc-flecha:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }
}

/* ---------- Diapositivas dibujadas con CSS --------------------------------- */

.hc-slide--texto {
  --hc-tinta: var(--navy-700);
  --hc-tinta-suave: var(--navy-500);
}

/* La diapositiva de marca ya no es el logotipo: */
.hc-slide--marca {
  --hc-tinta: #fff;
  --hc-tinta-suave: rgba(255, 255, 255, .78);
  --hc-marca-kicker: 1em;
  background: var(--navy-700);
  /* El hero de fondo es el mismo navy: */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  /* Abajo a la derecha, no centrado: */
  align-items: flex-end;
  justify-content: flex-end;
  /* Cuánto del ancho de la tarjeta ocupa el bloque del lema. */
  --hc-wm-share: 78;
  /* LO QUE ESPERA EL LEMA ANTES DE ESCRIBIRSE, contado desde que se pinta la */
  --hc-wm-espera: 6000ms;
  /* Contenedor de consulta: */
  container-type: size;
}

/* --- La marca CON fotografía -------------------------------------------- */
.hc-slide--marca.hc-con-foto {
  box-shadow: none;
}

/* .hc-media y .hc-velo van en position:absolute, así que pintan por encima de */
.hc-marca-cuerpo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* A la derecha, para que el botón quede a plomo con el final de las líneas. */
  align-items: flex-end;
  gap: 1rem;
  /* La separación de las esquinas vive aquí y no en el lema, que ahora va sin */
  padding: clamp(1.25rem, 4cqw, 3rem);
}

@media (min-width: 768px)  { .hc-slide--marca { --hc-wm-share: 46; } }
@media (min-width: 1200px) { .hc-slide--marca { --hc-wm-share: 38; } }

/* EL LEMA INGLÉS, DOS PUNTOS MÁS ANCHO (ago 2026). */
@media (min-width: 1200px) { .hc-slide--marca:lang(en) { --hc-wm-share: 40; } }

/* EL LEMA CASTELLANO, EN UN SOLO RENGLÓN Y JUNTO A LA CRUZ (1-sep-2026, a */
.hc-slide--marca:lang(es) { --hc-wm-ancho: 7.4; }

@media (min-width: 992px) {
  /* LA MITAD DE CUERPO (1-sep-2026, a petición de Jorge). */
  .hc-slide--marca:lang(es) { --hc-wm-ancho: 14.8; }

  /* Deshace «CADA LÍNEA, UNA LÍNEA» -más abajo- sólo aquí: */
  .hc-slide--marca:lang(es) .hc-w-linea { display: inline; }

  /* Entre los dos envoltorios no hay ni un blanco en el HTML: */
  .hc-slide--marca:lang(es) .hc-w-linea + .hc-w-linea::before {
    content: "";
    display: inline-block;
    width: .3em;
  }

  /* La cruz sube a la fila del lema. */
  .hc-slide--marca:lang(es) .hc-marca-cuerpo {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }

  /* .hc-ctas trae un margen superior de 30 px para separarse del lema cuando */
  .hc-slide--marca:lang(es) .hc-marca-cuerpo .hc-ctas { margin-block-start: 0; }
}

/* El velo de las demás diapositivas es un degradado de izquierda a derecha, */
.hc-slide--marca .hc-velo {
  /* Dos degradados superpuestos, uno que oscurece hacia abajo y otro hacia la */
  background:
    linear-gradient(to top,
      rgba(0, 16, 46, .44) 0%,
      rgba(0, 16, 46, .14) 50%,
      rgba(0, 16, 46, .04) 100%),
    linear-gradient(to left,
      rgba(0, 16, 46, .29) 0%,
      rgba(0, 16, 46, .07) 55%,
      rgba(0, 16, 46, 0) 100%);
}

/* LA SOMBRA DEL LEMA. */
.hc .hc-slide--marca .hc-wordmark {
  text-shadow:
    0 0 .06em rgba(255, 255, 255, .34),
    0 .02em .10em rgba(0, 16, 46, .62),
    0 .04em .30em rgba(0, 16, 46, .52);
}

.hc-slide--texto {
  background: var(--neutral-50);
  border: 1px solid var(--border-subtle);
}

.hc .hc-pie {
  margin: 1.25rem 0 0;
  font-size: var(--tipo-menor);
  line-height: 1.5;
  color: var(--hc-tinta-suave);
}

/* Sobre claro, el botón blanco desaparece: */
.hc-slide--texto .hc-btn-claro {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--text-on-navy);
}

.hc-slide--texto .hc-btn-claro:hover {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--text-on-navy);
}

/* El perfilado, sobre claro: */
.hc-slide--texto .hc-btn-linea {
  background: transparent;
  border-color: var(--navy-700);
  color: var(--navy-700);
}

.hc-slide--texto .hc-btn-linea:hover,
.hc-slide--texto .hc-btn-linea:focus-visible {
  background: rgba(0, 32, 91, .08);
  border-color: var(--navy-800);
  color: var(--navy-800);
}

/* Va con .hc delante: */
.hc .hc-wordmark {
  font-family: var(--font-round);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.05;
  letter-spacing: .005em;
  /* A la derecha: las dos líneas se alinean por donde acaban, que es el borde */
  text-align: right;
  color: var(--hc-tinta);
  margin: 0;
  /* Sin relleno propio: */
  padding: 0;
  max-width: none;
  /* Resplandor tenue: */
  text-shadow: 0 0 .06em rgba(255, 255, 255, .42), 0 0 .38em rgba(255, 255, 255, .22);
  /* Reserva por si no hay unidades de contenedor. */
  font-size: clamp(1rem, 3.6vw, 3.2rem);
}

@supports (container-type: size) {
  .hc .hc-wordmark {
    /* --hc-wm-share es qué porcentaje del ancho de la tarjeta ocupa el bloque */
    font-size: min(calc(var(--hc-wm-share, 38) * 1cqw / var(--hc-wm-ancho, 7.4)), 16cqh);
  }
}

/* CADA LÍNEA, UNA LÍNEA. */
.hc-w-linea {
  display: block;
}

/* El antetítulo del logotipo -«Cozumel» en el pie y el menú- va más pequeño que */
.hc-w-linea:first-child {
  font-size: var(--hc-marca-kicker, .4em);
}

/* Entrada letra a letra. */
.hc-w-linea > span {
  display: inline-block;
  opacity: 0;
  animation: hcTeclear 260ms var(--ease-out) forwards;
  /* La espera de --hc-wm-espera va DELANTE del escalonado, no en su lugar: */
  animation-delay: calc(var(--hc-wm-espera, 0ms) + var(--i, 0) * 20ms);
}

.hc-w-esp {
  width: .3em;
}

/* ---------- Varias fotos en una misma diapositiva --------------------------- */
.hc-media--seq { transition: opacity var(--duration-slow) var(--ease-standard); }

@keyframes hcTeclear {
  from { opacity: 0; transform: translateY(.14em); }
  to   { opacity: 1; transform: none; }
}

/* Con menos movimiento el logotipo simplemente está. */
@media (prefers-reduced-motion: reduce) {
  .hc-w-linea > span {
    animation: none;
    opacity: 1;
  }
}

/* ---------- Vidrio esmerilado en las que no están en foco ------------------ */

/* El cristal es una capa propia con desenfoque CONSTANTE que aparece y */
.hc-velo::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(var(--hc-vidrio)) saturate(135%);
  backdrop-filter: blur(var(--hc-vidrio)) saturate(135%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-standard);
}

.hc.is-mejorado .hc-slide:not(.is-actual) .hc-velo::after {
  opacity: 1;
}

.hc-texto,
.hc-marca-cuerpo {
  transition: opacity var(--duration-slow) var(--ease-standard),
              filter  var(--duration-slow) var(--ease-standard);
}

/* El texto de las que no miras también se va de foco, no sólo se apaga. */
.hc.is-mejorado .hc-slide:not(.is-actual) .hc-texto,
.hc.is-mejorado .hc-slide:not(.is-actual) .hc-marca-cuerpo {
  opacity: .6;
  filter: blur(var(--hc-vidrio-texto));
}

/* Con el teclado se puede llegar al botón de una vecina antes de que sea la */
.hc.is-mejorado .hc-slide:focus-within .hc-velo::after {
  opacity: 0;
}

.hc.is-mejorado .hc-slide:focus-within .hc-texto,
.hc.is-mejorado .hc-slide:focus-within .hc-marca-cuerpo {
  opacity: 1;
  filter: none;
}

/* Las diapositivas dibujadas con CSS no tienen velo del que colgar el cristal, */
/* Este ::after existe PORQUE estas dos diapositivas no tienen velo del que */
.hc-slide--marca:not(.hc-con-foto)::after,
.hc-slide--texto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  -webkit-backdrop-filter: blur(var(--hc-vidrio)) saturate(135%);
  backdrop-filter: blur(var(--hc-vidrio)) saturate(135%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-standard);
}

.hc.is-mejorado .hc-slide--marca:not(.hc-con-foto):not(.is-actual)::after,
.hc.is-mejorado .hc-slide--texto:not(.is-actual)::after {
  opacity: 1;
}

.hc.is-mejorado .hc-slide--marca:not(.hc-con-foto):focus-within::after,
.hc.is-mejorado .hc-slide--texto:focus-within::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hc-velo::after,
  .hc-marca-cuerpo,
  .hc-texto { transition: none; }
}

/* ---------- Controles (los inyecta hero-slider.js) ---------- */

/* En móvil las flechas son un control más de la barra inferior: */
.hc-flecha {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill-nav);
  background: var(--surface-card);
  color: var(--navy-700);
  transition: var(--transition-colors), opacity var(--duration) var(--ease-standard);
}

.hc-flecha:hover { border-color: var(--border-default); }

/* De tableta en adelante las flechas salen FUERA de la tarjeta, centradas en */
@media (min-width: 768px) {
  .hc-flecha {
    position: absolute;
    /* Centradas sobre la PISTA, no sobre .hc: */
    top: calc(50% + (var(--hc-arriba) - var(--hc-abajo)) / 2);
    transform: translateY(-50%);
    z-index: 2;
    border-color: transparent;
    background: rgba(255, 255, 255, .92);
  }
  .hc-flecha[data-hc-prev] { left:  calc((var(--hc-inset) - 44px) / 2); }
  .hc-flecha[data-hc-next] { right: calc((var(--hc-inset) - 44px) / 2); }
  .hc-flecha:hover { background: #fff; }
}

/* Ya no se esconden hasta el hover. */

.hc-barra {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
}

.hc-puntos {
  display: flex;
  align-items: center;
  gap: .1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hc-punto {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  border-radius: var(--radius-pill-nav);
}

/* El objetivo táctil son 44 px; el punto visible es el de dentro. */
/* Los puntos viven sobre el azul del escenario: */
.hc-punto::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill-nav);
  background: rgba(255, 255, 255, .38);
  transition: var(--transition-colors);
}

.hc-punto:hover::before { background: rgba(255, 255, 255, .70); }

.hc-punto[aria-current="true"]::before {
  background: #fff;
}

.hc-pausa {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill-nav);
  background: var(--surface-card);
  color: var(--navy-700);
  transition: var(--transition-colors);
}

.hc-pausa:hover { border-color: var(--border-default); }

/* EL CONMUTADOR DE SONIDO DEL VÍDEO (ago 2026). */
.hc-sonido {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill-nav);
  background: var(--surface-card);
  color: var(--navy-700);
  transition: var(--transition-colors);
}

.hc-sonido:hover { border-color: var(--border-default); }
.hc-sonido[hidden] { display: none; }

/* ---------- CAPACIDAD CLÍNICA: */

/* ---------- Banda con fotografía de fondo ----------------------------------- */
.banda-foto {
  background-image:
    linear-gradient(180deg,
      rgba(0, 16, 46, .88) 0%,
      rgba(0, 16, 46, .78) 45%,
      rgba(0, 16, 46, .90) 100%),
    /* Con respaldo: una propiedad personalizada que no llegue invalida el */
    var(--banda-fondo, var(--img-pendiente));
  /* La banda mide ~1700 px de alto y la foto 1080, así que 'cover' la amplía */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-on-navy);
}

/* Variante sin fotografía. */
.banda-foto--lisa {
  background-image: var(--degradado-bloque);
  color: var(--text-on-block);
}

.banda-foto h2 { color: var(--text-on-navy); }
.banda-foto .section-eyebrow { color: rgba(255, 255, 255, .82); }
.banda-foto .eyebrow-rule { background: rgba(255, 255, 255, .35); }
.banda-foto .small-print { color: rgba(255, 255, 255, .75); }

/* La tinta de la variante clara. */
.banda-foto--lisa h2 { color: var(--text-on-block); }
.banda-foto--lisa .section-eyebrow { color: var(--accent-on-block); }
.banda-foto--lisa .eyebrow-rule { background: var(--border-subtle); }
.banda-foto--lisa .small-print { color: var(--text-muted); }

/* REJILLA, NO MAMPOSTERÍA (ago 2026). */
/* UNA TARJETA POR FILA EN MÓVIL (ago 2026). */
.cap-mamposteria {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}

@media (min-width: 768px) {
  .cap-mamposteria { grid-template-columns: repeat(3, 1fr); }
}

/* Molde tomado de las «custom cards» del ejemplo Features de Bootstrap 5.3: */
/* Lo único que es de la rejilla y no de la tarjeta. */
.cap-tarjeta {
  height: 100%;
}

.foto-tarjeta {
  /* Translúcida: lo que se ve dentro es la foto de la banda, no una copia. */
  background-color: rgba(0, 16, 46, .60);
  transition: background-color var(--duration-slow) var(--ease-out);
  border: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  color: var(--text-on-navy);
  display: flex;
  flex-direction: column;
  min-height: var(--foto-alto, 354px);
  /* Contiene los z-index negativos de las dos capas: */
  position: relative;
  isolation: isolate;
}

/* Capa de imagen de la tarjeta. */
.foto-tarjeta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--foto-img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .3;
  transition: opacity var(--duration-slow) var(--ease-out);
}

/* Velo. Va SIEMPRE, también al 90 %: */
.foto-tarjeta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(0, 16, 46, .10) 0%,
    rgba(0, 16, 46, .52) 50%,
    rgba(0, 16, 46, .90) 100%);
}

.foto-tarjeta:hover,
.foto-tarjeta:focus-within { background-color: rgba(0, 16, 46, .08); }

.foto-tarjeta:hover::before,
.foto-tarjeta:focus-within::before { opacity: .9; }

/* ---------- Tarjeta sin fotografía ---------------------------------------- */
.foto-tarjeta--pendiente {
  background-color: transparent;
}

.foto-tarjeta--pendiente::before { opacity: .3; }

.foto-tarjeta--pendiente:hover::before,
.foto-tarjeta--pendiente:focus-within::before { opacity: .9; }

/* El hover lo lleva entero la placa: */
.foto-tarjeta--pendiente:hover,
.foto-tarjeta--pendiente:focus-within { background-color: transparent; }

/* El velo tiene que sostener el texto blanco en los DOS extremos: */
.foto-tarjeta--pendiente::after {
  background: linear-gradient(180deg,
    rgba(0, 16, 46, .04) 0%,
    rgba(0, 16, 46, .16) 34%,
    rgba(0, 16, 46, .72) 62%,
    rgba(0, 16, 46, .95) 100%);
}

/* El enlace es quien lleva el relleno y la columna: */
.foto-cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 3rem 3rem 1.25rem;
  color: var(--text-on-navy);
  text-decoration: none;
}

.foto-cuerpo:hover,
.foto-cuerpo:focus-visible { color: var(--text-on-navy); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .foto-tarjeta,
  .foto-tarjeta::before { transition: none; }
}

/* Como el «mt-auto» del pie del ejemplo: */
.foto-nombre {
  margin: auto 0 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(var(--tipo-cuerpo), 0.8325rem + 0.6979vw, var(--tipo-h3));
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--text-on-navy);
  text-wrap: balance;
}

.foto-desc {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: var(--tipo-menor);
  line-height: 1.5;
  color: rgba(255, 255, 255, .85);
}

/* Lo que hay dentro del área -los seis estudios de imagen, las dos farmacias-. */
.foto-items {
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
}

.foto-items li {
  font-size: var(--tipo-menor);
  line-height: 1.45;
  color: rgba(255, 255, 255, .9);
  padding-left: .9rem;
  position: relative;
}
.foto-items li + li { margin-top: .3rem; }

.foto-items li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
}

/* Con lista dentro, el nombre baja un punto: */
.foto-tarjeta--lista .foto-nombre {
  font-size: clamp(var(--tipo-cuerpo), 0.8325rem + 0.6979vw, var(--tipo-h3));
}

/* MISMO ALTO QUE LA BANDA DE INFRAESTRUCTURA (5-sep-2026, a petición de Jorge: */

/* Las destacadas sólo cambian de alto: */
.foto-tarjeta--grande {
  --foto-alto: 460px;
}

.foto-tarjeta--grande .foto-nombre {
  font-size: clamp(var(--tipo-h3), 1.1125rem + 0.9271vw, var(--tipo-h2));
}

/* Entradilla de la banda, sobre la mampostería. */
.banda-foto .cap-lede {
  max-width: 52ch;
  line-height: 1.8;
  color: rgba(255, 255, 255, .85);
  margin: 0;
}

.banda-foto--lisa .cap-lede { color: var(--text-body); }

/* ---------- TIRA DE TARJETAS ----------------------------------------------- */

.rail {
  position: relative;
}

.rail-pista {
  display: flex;
  gap: .75rem;
  list-style: none;
  margin: 0;
  padding: .25rem;
  overflow: auto hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.rail-pista::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .rail-pista { scroll-behavior: smooth; }
}

/* ---------- Flechas de la tira (las inyecta js/rail.js) ---------- */

.rail-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill-nav);
  background: var(--surface-card);
  color: var(--navy-700);
  transition: var(--transition-colors), opacity var(--duration) var(--ease-standard);
}

.rail-prev { left: -.75rem; }
.rail-next { right: -.75rem; }

.rail-flecha:hover { border-color: var(--border-default); }

.rail-flecha[disabled],
.rail-sin-desbordar .rail-flecha {
  opacity: 0;
  pointer-events: none;
}

/* En táctil manda el dedo: */
@media (hover: none), (max-width: 767.98px) {
  .rail-flecha { display: none; }
}

/* Ya no fija el cuerpo: */
.hero .lede {
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 60ch;
}

.section {
  padding: var(--section-y-tight) 0;
}

.section-lg {
  padding: var(--section-y) 0;
}

.container {
  max-width: none;
  width: 100%;
  padding-right: clamp(1rem, 4vw, 4rem);
  padding-left: clamp(1rem, 4vw, 4rem);
}

/* En pantallas grandes la columna se estrecha al 80 % y se centra. */
@media (min-width: 1200px) {
  .container {
    width: var(--container-ancho, 80%);
    /* El 80 % crece sin fin; esto lo para. */
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: 0;
  }
}

.measure {
  max-width: var(--measure);
}

/* LA ENTRADILLA, UN SOLO TAMAÑO (4-sep-2026, a petición de Jorge). */
.lede {
  font-size: var(--tipo-entrada);
  line-height: 1.7;
  color: var(--text-body);
}

.card-soft {

  background: transparent;
  border: 0;
  height: 100%;
}

.card-soft .card-body {
  padding: 1.6rem;
}

@media (prefers-reduced-motion: reduce) {

  .card-link-tile,
  .card-link-tile:hover {
    transform: none;
  }
}

.svc-cta {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 600;
  font-size: var(--tipo-menor);
  color: var(--navy-700);
}

.svc-cta:hover {
  color: var(--navy-700);
  text-decoration: none;
}

.mvv-values { list-style: none; margin: 0; padding: 0; }
.mvv-values > li + li { margin-top: 1.4rem; }
.mvv-values .mvv-val-title { margin-bottom: .4rem; }
.mvv-values .mvv-val-text {
  color: var(--text-muted);
  font-size: var(--tipo-menor);
  line-height: 1.75;
  max-width: 62ch;
}

/* ---------- Modales: */
.esp-pop,
.mvv-modal {
  --bs-modal-bg: var(--vidrio-modal-fondo);
  --bs-modal-color: var(--text-on-navy);
  --bs-modal-border-color: var(--vidrio-modal-canto);
  --bs-modal-header-border-color: var(--vidrio-modal-canto);
  /* El 1rem de Bootstrap dejaba el texto pegado al canto. */
  --bs-modal-padding: var(--modal-aire);
  --bs-modal-header-padding: var(--modal-aire);
  /* --ring-color es navy translúcido y sobre el vidrio no se ve nada. */
  --ring-color: rgba(255, 255, 255, .55);
  /* El mismo acento que la banda que abre estos modales (2-sep-2026). */
  --mvv-acento: var(--caribe-400);
}

.esp-pop .modal-content,
.mvv-modal .modal-content {
  -webkit-backdrop-filter: var(--vidrio-modal-desenfoque);
  backdrop-filter: var(--vidrio-modal-desenfoque);
  /* El mismo radio que las tarjetas del sitio. */
  border-radius: var(--radius-card);
  /* Recorte: sin él la barra de tiempo del aviso saca sus esquinas rectas por */
  overflow: hidden;
}

/* El aspa de Bootstrap es negra; sobre el cristal oscuro hay que invertirla. */
.esp-pop .btn-close,
.mvv-modal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  --bs-btn-close-opacity: .85;
  --bs-btn-close-hover-opacity: 1;
  --bs-btn-close-focus-shadow: 0 0 0 3px rgba(255, 255, 255, .55);
}

.esp-pop :focus-visible,
.mvv-modal :focus-visible { outline-color: #fff; }

/* Sin vidrio no hay efecto: */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --vidrio-modal-fondo: rgba(0, 24, 66, .94);
    /* El claro sube menos porque partía de más arriba: */
    --vidrio-claro-fondo: rgba(255, 255, 255, .96);
  }
}

/* El velo de Bootstrap es negro al 50 %: */
.modal-backdrop {
  --bs-backdrop-bg: var(--navy-900);
  --bs-backdrop-opacity: .42;
}

/* ---------- Misión, visión y valores: */
.mvv-modal .modal-dialog {
  /* Pisa los 500 px del modal normal y los 800 del .modal-lg de valores: */
  --bs-modal-width: min(880px, 94vw);
}

/* Aire ancho por los lados y corto por arriba y abajo: */
.mvv-modal .modal-header,
.mvv-modal .modal-body { padding: var(--modal-aire-y) var(--modal-aire); }
.mvv-modal .modal-header { padding-bottom: 1rem; }

/* El título del modal es el nombre -«Misión», «Visión», «Valores»-: */
.mvv-modal .modal-title {
  font-size: clamp(var(--tipo-h3), 1.1125rem + 0.9271vw, var(--tipo-h2));
  color: var(--mvv-acento);
}

.mvv-modal .modal-body p {
  font-size: var(--tipo-cuerpo);
  line-height: 1.7;
  color: var(--text-on-navy);
}

/* 1rem y no 2.25: con cinco valores cada hueco se paga cinco veces, y son */
.mvv-modal .mvv-values > li + li { margin-top: 1rem; }

/* Los cinco nombres de valor. */
.mvv-modal .mvv-values .mvv-val-title {
  font-size: var(--tipo-cuerpo);
  color: var(--mvv-acento);
  margin-bottom: .25rem;
}

.mvv-modal .mvv-values .mvv-val-text {
  font-size: var(--tipo-menor);
  line-height: 1.55;
  color: var(--vidrio-modal-texto);
  max-width: none;
}

/* ---------- Urgencias: */
.emergency-steps {
  /* El aire del panel, escrito una vez: */
  --emergency-aire: clamp(1.25rem, 3vw, 2rem);

  background: var(--danger-surface);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-lg);
  /* El relleno va aquí y no en una de las columnas: */
  padding: var(--emergency-aire);
}

/* LA LÍNEA DEL MEDIO, TUMBADA. */
/* CADA MITAD CON SU EJE (28-ago-2026, a petición del cliente). */
.emergency-steps > .row > * + * { text-align: center; }
.emergency-steps .d-flex { justify-content: center; }

.emergency-steps > .row > * + * {
  margin-top: var(--emergency-aire);
  padding-top: var(--emergency-aire);
  border-top: 1px solid var(--danger-border);
}

/* Y DE PIE EN DOS COLUMNAS. */
@media (min-width: 992px) {
  .emergency-steps > .row > * + * {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    border-inline-start: 1px solid var(--danger-border);

    /* Y CENTRADA EN VERTICAL. */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.emergency-steps ol {
  counter-reset: step;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.emergency-steps li {
  position: relative;
  /* Los 3 rem de la izquierda reservan el hueco del cuadro rojo numerado, que */
  padding: .7rem 0 .7rem 3rem;
  border-top: 1px dashed var(--danger-border);
}

/* El texto de apoyo, a su propio renglón debajo de la negrita. */
.emergency-steps li strong { display: block; }

/* El primer paso no lleva relleno arriba, por dos motivos que ahora coinciden. */
.emergency-steps li:first-child {
  border-top: 0;
  padding-top: 0;
}

/* El cuadro del paso 1 se sube lo que su li dejó de relleno (.6 - .7). */
.emergency-steps li:first-child::before { top: -.1rem; }

.emergency-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: .6rem;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: var(--emergency);
  color: #fff;
  font-weight: 700;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 576px) { .puertas-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .puertas-grid { grid-template-columns: repeat(5, 1fr); gap: 1rem; } }
.puerta .card-body { padding: 1.3rem; }

.form-control, .form-select, .form-label, .form-check-label { font-size: 18px; }

.section p a,
.section .lead a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.small-print {
  color: var(--text-muted);
  font-size: var(--tipo-menor);
}

.form-label {
  font-weight: 600;
  color: var(--text-strong);
}

.form-control,
.form-select {
  min-height: var(--control-h-md);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-control);
}

.form-control:hover,
.form-select:hover {
  border-color: var(--border-navy);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}

.form-note {
  color: var(--text-muted);
  font-size: var(--tipo-menor);
}

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.site-footer {
  background: var(--degradado-bloque);
  color: var(--text-on-block);
  font-family: var(--font-sans);
}

.foot-tier + .foot-tier { border-top: 1px solid rgba(0, 32, 91, .13); }
.foot-tier-menus { padding-block: clamp(3rem, 2.25rem + 2.5vw, 5rem); }
/* EL TRAMO DE CIERRE, uno solo desde el 3-sep-2026 (ver el comentario de */
.foot-tier-cierre {
  /* ARRIBA Y ABAJO YA NO MIDEN LO MISMO (3-sep-2026, a petición de Jorge). */
  padding-block:
    clamp(2.75rem, 2rem + 2.25vw, 4.5rem)
    clamp(1.375rem, 1rem + 1.125vw, 2.25rem);
  /* Separación entre los tres renglones. */
  --cierre-aire: clamp(2.25rem, 1.75rem + 1.5vw, 3.25rem);
}

.foot-menus {
  display: grid;
  gap: 3rem 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 576px) { .foot-menus { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .foot-menus { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.foot-menu-col li + li { margin-top: .85rem; }
.foot-sede-lugar { display: block; color: var(--text-muted); font-size: .82rem; }

/* ---------- Primer piso del pie ------------------------------------------ */
.foot-tier-menus {
  background: var(--degradado-pie);
  color: #fff;
  /* La textura de cruces cuelga de un ::before, así que la franja tiene que ser */
  position: relative;
  isolation: isolate;
}

/* La cruz de la marca, repetida en tramado a media caída. */
.foot-tier-menus::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("/images/logos/cruz-blanco.svg"),
                    url("/images/logos/cruz-blanco.svg");
  background-size: 116px 116px, 116px 116px;
  background-position: 0 0, 58px 58px;
  background-repeat: repeat, repeat;
  opacity: .09;
  /* La textura sólo donde la franja es CLARA. */
  -webkit-mask-image: linear-gradient(160deg, #000 0%, #000 30%, transparent 72%);
          mask-image: linear-gradient(160deg, #000 0%, #000 30%, transparent 72%);
}

.site-footer .foot-tier-menus .foot-head { color: #fff; }

.site-footer .foot-tier-menus p,
.site-footer .foot-tier-menus li,
.site-footer .foot-tier-menus a,
.site-footer .foot-tier-menus .foot-sede-lugar { color: var(--grey-50); }

.site-footer .foot-tier-menus a:hover,
.site-footer .foot-tier-menus a[aria-current="page"] { color: #fff; }

/* El foco del pie es navy, y sobre esta franja es prácticamente invisible: */
.site-footer .foot-tier-menus :focus-visible { outline-color: #fff; }

/* ALINEADAS POR ABAJO (31-ago-2026, a petición de Jorge). */
.foot-brand-row {
  display: grid;
  gap: 3.5rem 2rem;
  grid-template-columns: 1fr;
  align-items: end;
  /* Desde que los tres renglones comparten .container (3-sep-2026), el aire que */
  margin-bottom: var(--cierre-aire);
}
@media (min-width: 768px) { .foot-brand-row { grid-template-columns: repeat(2, 1fr); } }
/* minmax(0, …) y no 1fr a secas: */
/* TRES PISTAS PARA TRES COLUMNAS (31-ago-2026). */
@media (min-width: 992px) {
  /* DOS COLUMNAS: logotipo a la izquierda, «visítanos» a la derecha. */
  .foot-brand-row {
    /* LA MISMA REJILLA QUE EL SEGUNDO RENGLÓN: */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
  .foot-brand-mark { grid-column: 1 / 3; }
  .foot-visita     { grid-column: 4; }
}

/* EL LOGOTIPO, CENTRADO EN SU HUECO. */

/* La columna de marca se declara contenedor para que el logotipo pueda medirse */
.foot-brand-mark {
  container-type: inline-size;
  /* Rejilla y no flex-wrap: */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: .7rem;
  row-gap: .75rem;
}

.foot-brand-mark .foot-claim { grid-column: 1 / -1; }

/* CENTRAR EL BLOQUE ES COSA DE .foot-brand-mark, NO DEL ENLACE. */
@media (min-width: 992px) {
  .foot-brand-mark {
    grid-template-columns: auto;
    /* CENTRADO EN LOS DOS EJES DENTRO DE SU HUECO (31-ago-2026). */
    /* SIN CENTRAR, DESDE EL 3-sep-2026. */
    align-self: center;
  }
}

/* EL ENLACE ES LA REJILLA, y no un envoltorio más. */
.foot-logo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: .7rem;
  text-decoration: none;
  color: inherit;
}

/* El logotipo es una marca, no una frase: */
.foot-logo:hover,
.foot-logo:focus-visible,
.foot-logo:active { text-decoration: none; color: inherit; }

/* Y el resplandor ROJO de la cruz, hermano del azul que el nombre ya recibe de */
.foot-logo:hover .marca-cruz,
.foot-logo:focus-visible .marca-cruz,
.foot-logo:active .marca-cruz {
  filter: drop-shadow(0 0 .12em rgb(var(--cruz-glow) / .65))
          drop-shadow(0 0 .5em  rgb(var(--cruz-glow) / .45));
}

/* En el pie la cruz deja de acompañar al nombre y pasa a ser una pieza gráfica. */
.marca-cruz--pie {
  width: 75px;
  height: 75px;
  /* Sube 40 px sobre su sitio para alinearse con el filete de la franja de */
  margin: -40px 0 0;
  padding: 0;
}

/* LA CRUZ CRECE CON EL NOMBRE (31-ago-2026). */
@media (min-width: 992px) {
  .marca-cruz--pie {
    width: auto;
    height: min(4.9rem, 10cqw);
    margin: 0;
  }
}

.foot-wordmark {
  font-family: var(--font-round);
  font-weight: 400;
  font-synthesis: none;
  /* +40 % (31-ago-2026). */
  font-size: clamp(2.24rem, 1.54rem + 2.24vw, 3.15rem);
  line-height: 1.1;
  letter-spacing: .01em;
  margin: 0 0 1.5rem;
  --wm-kicker: .46em;
}

@supports (container-type: inline-size) {
  .foot-wordmark {
    /* EL FACTOR ES LO QUE IMPIDE QUE «International Hospital» SE PARTA, y por */
      font-size: min(4.9rem, 10cqw);
  }
}

/* Logotipo a dos líneas, el mismo reparto que la diapositiva de marca: */
.wm-linea { display: block; }
.wm-linea:first-child { font-size: var(--wm-kicker, .4em); }

/* Sin tope de medida: */
.foot-claim { max-width: none; font-size: 1.05rem; line-height: 1.7; }

.site-footer address, .foot-contacto { font-style: normal; }
.foot-contact li + li { margin-top: 1rem; }

/* LOS CONTACTOS, EN FILA (31-ago-2026, a petición de Jorge). */
@media (min-width: 768px) {
  .foot-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    /* LOS NÚMEROS, TODOS A LA MISMA LÍNEA. */
    align-items: flex-end;
  }
  .foot-contact li + li { margin-top: 0; }
}
/* EL CUERPO DEL PIE VUELVE A SU TAMAÑO (3-sep-2026, a petición de Jorge: */
.foot-k {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .15rem;
}
.foot-contact a { font-size: .95rem; }
/* EL VERDE DE WHATSAPP (2-sep-2026, a petición de Jorge). */
.site-footer .foot-wa .foot-k,
.site-footer .foot-wa a { color: var(--green-700); }

.site-footer .foot-wa a:hover,
.site-footer .foot-wa a:focus-visible { color: var(--green-800); }

.foot-dir, .foot-horario { max-width: 30ch; font-size: .9rem; line-height: 1.7; margin-bottom: .75rem; }
.foot-mapas { margin-bottom: 1.5rem; font-size: .9rem; }
.foot-social { display: flex; gap: 1rem; }

/* El aviso de emergencia y el medallero comparten fila: */
/* La rejilla de dos columnas del tramo legal. */
/* POR ARRIBA, NO POR ABAJO (3-sep-2026). */
.foot-legal-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: 1.75rem;
}
/* TRES BLOQUES EN EL SEGUNDO RENGLÓN (3-sep-2026, a petición de Jorge): */
@media (min-width: 992px) {
  .foot-legal-top {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
  .foot-contacto  { grid-column: 1 / 3; }
  .foot-redes     { grid-column: 3; }
  .foot-medallero { grid-column: 4; }
}

.foot-aviso {
  max-width: 60ch;
  font-size: .82rem;
  line-height: 1.7;
  margin-bottom: 0;
}
/* Medallero de acreditaciones, a la DERECHA de la fila legal, con los contactos */
/* REDES Y ACREDITACIONES, LAS DOS A LA DERECHA (3-sep-2026, a petición de */
.foot-medallero {
  margin-bottom: 0;
}

.foot-medallas {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
}

@media (min-width: 992px) {
  .foot-redes,
  .foot-medallero { text-align: right; }
  .foot-social,
  .foot-medallas  { justify-content: flex-end; }
}

/* Por debajo de 992 px la fila legal es de UNA columna: */
/* Por debajo de 992 px la rejilla es de una sola columna: */
/* Aquí vivía la excepción de móvil que devolvía el medallero a la izquierda por */

/* EL TELÉFONO DEL AVISO, EN ROJO. */
/* Prefijado con .site-footer a propósito: */
.site-footer .foot-aviso-tel {
  color: var(--emergency);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer .foot-aviso-tel:hover,
.site-footer .foot-aviso-tel:focus {
  color: var(--emergency-dk);
  text-decoration: underline;
}

/* En columna y centradas: */
.foot-medalla {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
}

/* El disco es lo que hace que el icono se lea como medalla y no como viñeta. */
.foot-medalla-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--text-on-block);
  background: rgba(0, 32, 91, .07);
  border: 1px solid rgba(0, 32, 91, .16);
}

.foot-medalla-txt { display: flex; flex-direction: column; gap: .2rem; align-items: center; }

.site-footer .foot-medalla-t {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: .78rem;
  line-height: 1.3;
  color: var(--text-on-block);
}

.site-footer .foot-medalla-n { font-size: .72rem; color: var(--text-muted); }

.foot-legal-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
}
.foot-legal-links { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: .78rem; }

.site-footer .foot-head {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--accent-on-block);
  margin-bottom: 1.5rem;
}

/* El rótulo de las redes es el mismo .foot-head que encabeza las columnas, pero */
.site-footer .foot-head--redes {
  margin-top: 2rem;
  margin-bottom: .85rem;
}

/* EL MARCO DE LA VISTA DE CALLE, adaptable. */
.mapa-embed {
  display: block;
  width: 100%;
  /* «height: auto» NO SOBRA, y cuesta un rato verlo: */
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 60vh;
  border: 0;
  border-radius: var(--radius-md, 12px);
}

@media (max-width: 575.98px) {
  /* En el móvil la columna es estrecha y un 4:3 se queda en un mapa diminuto y */
  .mapa-embed { aspect-ratio: 1 / 1; }
}

.site-footer p,
.site-footer li { color: var(--text-muted); }

.site-footer a { color: var(--text-on-block); text-decoration: none; }
.site-footer a:hover { color: var(--accent-on-block); text-decoration: underline; text-underline-offset: 3px; }
.site-footer a[aria-current="page"] { color: var(--accent-on-block); font-weight: 600; }

.site-footer .foot-meta { color: var(--text-muted); font-size: .78rem; }
.site-footer .foot-meta a { color: var(--text-muted); }
.site-footer .foot-meta a:hover { color: var(--accent-on-block); }

.foot-soc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--text-on-block);
  transition: var(--transition-colors);
}
.foot-soc:hover { color: var(--accent-on-block); }

.row-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.row-list>* {
  border-top: 1px solid var(--border-subtle);
  padding: 1.5rem 0;
}

.row-list>*:last-child {
  border-bottom: 1px solid var(--border-subtle);
}

.row-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  color: inherit;
  transition: var(--transition-colors);
}

.row-link:hover {
  color: var(--navy-700);
  text-decoration: none;
  background: var(--navy-50);
}

.row-link .ih-ic {
  transition: var(--transition-transform);
}

.row-link:hover .ih-ic {
  transform: translateX(3px);
}

.row-title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text-strong);
}

.row-desc {
  color: var(--text-muted);
  font-size: var(--tipo-menor);
}

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3.5rem;
}

.stat-strip>* {
  padding: 1.1rem 1.25rem .35rem 0;
}

.stat-strip>*+* {
  padding-left: 0;
}

.stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  font-size: clamp(var(--tipo-h2), 1.485rem + 1.2292vw, var(--tipo-hero));
  font-variant-numeric: tabular-nums;
  color: var(--navy-700);
  margin: 0;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: var(--tipo-rotulo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
  margin: .25rem 0 0;
}

@media (max-width: 575.98px) {
  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-strip>* {
    border-left: 0 !important;
    padding-left: 0;
  }
}

.band-navy {
  background: var(--degradado-bloque);
  color: var(--text-on-block);
  padding: var(--section-y-tall) 0;
}

.band-navy h2,
.band-navy h3 {
  color: var(--text-on-block);
}

.band-navy .section-eyebrow {
  color: var(--accent-on-block);
}

/* EL RÓTULO DE CADA GRUPO DE ESPECIALIDADES (27-ago-2026). */
.esp-grupo-t {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(var(--tipo-h3), 1.1125rem + 0.9271vw, var(--tipo-h2));
  color: var(--text-strong);
  margin: var(--section-y-tight) 0 1.75rem;
}

.esp-grupo-t:first-child { margin-top: 0; }

/* El filete de la primera ficha de cada grupo sobra: */
.esp-grupo-t + .svc-block { border-top: 0; padding-top: 0; }

.svc-block {
  border-top: 1px solid var(--border-subtle);
  padding: 1.5rem 0;
}

.svc-block:first-of-type {
  border-top: 0;
  padding-top: .5rem;
}

.svc-sub {
  font-family: var(--font-mono);
  font-size: var(--tipo-rotulo);
  letter-spacing: .03em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ---------- Alianzas: */
.alianzas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.alianza-placa {
  aspect-ratio: 3 / 2;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--img-pendiente) center / cover no-repeat, var(--neutral-100);
}

/* LA CELDA QUE YA TIENE LOGOTIPO (1-sep-2026). */
.alianza-placa--logo {
  background: var(--neutral-100);
  display: grid;
  place-items: center;
  padding: 4px;
}

.alianza-placa--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ficha-medico {
  /* UNA COLUMNA. Esto era «200px 1fr», de cuando delante de los datos iba el */
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.7rem;
  padding: 1.7rem 0;
  border-top: 1px solid var(--border-subtle);
}

.ficha-nombre {
  font-size: 1.35rem;
  margin-bottom: .15rem;
}

.ficha-esp {
  color: var(--text-muted);
  margin-bottom: .25rem;
}

/* Aquí vivía «.ficha-cedula». */

.ficha-bio {
  max-width: 62ch;
}

.ficha-cta {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: 1.05rem;
}

/* EL PIE ES UN <button> DESDE EL 5-SEP-2026 -abre el modal del médico- y tiene */
.ficha-cta .medico-trigger {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.ficha-cta .medico-trigger:hover,
.ficha-cta .medico-trigger:focus-visible { color: var(--text-link-hover); }

/* Aquí había una media query que ponía «grid-template-columns: */

/* ---------- Galería de equipos (/diagnostico) ------------------------------ */
/* ---------- Galería de un área ------------------------------------------- */
.area-galeria {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}

@media (min-width: 768px) {
  .area-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  /* Cuando la foto va SOLA no se reparte en dos columnas: */
  .area-galeria--una { grid-template-columns: 1fr; }
  /* Dentro de una columna la galería no necesita su aire de arriba: */
  .area-galeria--col { margin-top: 0; }
}

.area-galeria figure { margin: 0; }

/* TODAS EN 16:9, LA PROPORCIÓN DOMINANTE DEL SITIO (6-sep-2026, a petición de
   Jorge: «que se vean todas iguales»).

   Aquí ponía «height: auto», así que la altura la dictaba la proporción del
   ARCHIVO: en una rejilla de columnas iguales, una foto 3:2 sale más alta que
   su vecina 16:9 y la fila queda desalineada. Pasaba en dos galerías -las dos
   que se reportaron-: sala-de-choque.jpg (1536x1024) junto a 01-cubiculos.jpg
   (1920x1080) en /urgencias, y quirofanos-2.jpg (1447x965) junto a las tres
   16:9 de quirófanos en /hospitalizacion.

   SE ARREGLA EN EL CSS Y NO RECORTANDO LOS DOS ARCHIVOS porque recortarlos sólo
   resuelve los de hoy: la próxima foto que entre con otra forma vuelve a
   desalinear la fila. Con la caja fija, la galería es inmune a la proporción de
   lo que le echen, que es justo lo que hace el resto del sitio -.foto-tarjeta,
   .med-foto y .hc-media ya van con 'cover'-.

   EL RECORTE ES CENTRADO Y SE COMPROBÓ EN LAS DOS: de 3:2 a 16:9 se va un 7.8 %
   por arriba y otro tanto por abajo. En la sala de choque eso es techo y suelo
   -la camilla, el ventilador y el reloj de pared que nombra su alternativa
   quedan dentro-; en la artroscopia, la torre con la imagen del endoscopio y la
   resonancia queda holgada. Si algún día entra una foto cuyo asunto viva en el
   borde superior, lo que toca es recortarla bien, no quitar esta regla. */
.area-galeria img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  height: auto;
  border-radius: var(--radius-card);
}

/* Un pie VACÍO no ocupa: sin esto seguía reservando su margen de arriba, y la
   fotografía se quedaba 14 px corta de su caja (7-sep-2026). Varias galerías
   pasan el pie en blanco -«ih_tx('', '')»-, así que la regla va aquí, con la
   general, y no colgada de una página. */
.area-galeria figcaption:empty { display: none; }

/* El pie, con la letra de las etiquetas de cifra -.zen-cifras span y */
.area-galeria figcaption {
  margin-top: .75rem;
  font-family: var(--font-mono);
  font-size: var(--tipo-rotulo);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* EL SERVICIO AL QUE SE HA SALTADO SE SEÑALA (ago 2026). */
.row-list > li:target {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* El realce se va solo tras unos segundos: */
@media (prefers-reduced-motion: no-preference) {
  .row-list > li:target {
    animation: servicioRealce 4s ease-out forwards;
  }
}

@keyframes servicioRealce {
  0%, 60%  { outline-color: var(--accent); }
  100%     { outline-color: transparent; }
}

.equipo-grid {
  display: grid;
  /* 320 px es lo que mide una columna de mampostería en el contenedor del */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1rem;            /* el mismo aire que la mampostería */
  margin-top: 2.5rem;   /* como .cap-mamposteria bajo su entradilla */
}

/* Los renglones de la ficha, ahora siempre a la vista. */
.equipo-datos { margin: .9rem 0 0; }

.equipo-datos p {
  margin: 0;
  font-size: var(--tipo-menor);
  line-height: 1.45;
  color: rgba(255, 255, 255, .9);   /* como .foto-items li */
}

.equipo-datos p + p { margin-top: .5rem; }

/* El rótulo del renglón. */
.eq-k {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--tipo-rotulo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--accent-on-dark);
}

.resena {
  position: relative;
  padding: 2rem 0 2rem 3.1rem;
  border-top: 1px solid var(--border-subtle);
}

.resena:last-of-type {
  border-bottom: 1px solid var(--border-subtle);
}

.resena::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: 1.1rem;
  font-family: var(--font-display);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--grey-400);
}

.resena-texto {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--text-strong);
  margin: 0;
}

.resena-meta {
  font-family: var(--font-mono);
  font-size: var(--tipo-rotulo);
  color: var(--text-muted);
  margin: .85rem 0 0;
}

.resena-texto p {
  margin: 0 0 .8em;
}

.resena-texto p:last-child {
  margin-bottom: 0;
}

/* Traduccion bajo el original: cuerpo de texto normal, no la cursiva de
   display del original, para que se lea como apoyo y no como la voz del
   paciente. */
.resena-traduccion {
  margin-top: 1.35rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--border-subtle);
}

.resena-traduccion p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 .7em;
}

.resena-traduccion p:last-child {
  margin-bottom: 0;
}

.resena-traduccion .resena-rotulo-trad {
  font-family: var(--font-mono);
  font-size: var(--tipo-rotulo);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 0 0 .55rem;
}

.aviso-row {
  border-top: 1px solid var(--border-subtle);
}

.aviso-row:last-child {
  border-bottom: 1px solid var(--border-subtle);
}

.aviso-row summary {
  cursor: pointer;
  list-style: none;
  padding: 1.35rem 0;
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 1rem;
  align-items: baseline;
}

.aviso-row summary::-webkit-details-marker {
  display: none;
}

.aviso-row summary .ih-ic {
  transition: var(--transition-transform);
  color: var(--navy-700);
}

.aviso-row[open] summary .ih-ic {
  transform: rotate(180deg);
}

.aviso-fecha {
  font-family: var(--font-mono);
  font-size: var(--tipo-rotulo);
  color: var(--text-muted);
}

.aviso-titulo {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--text-strong);
  margin: 0;
}

.aviso-resumen {
  grid-column: 2;
  color: var(--text-muted);
  font-size: var(--tipo-menor);
  margin: 0;
}

.aviso-cuerpo {
  padding: 0 0 1.35rem calc(110px + 1rem);
  max-width: 72ch;
}

@media (max-width: 575.98px) {
  .aviso-row summary {
    grid-template-columns: 1fr auto;
  }

  .aviso-fecha {
    grid-column: 1 / -1;
  }

  .aviso-resumen {
    grid-column: 1;
  }

  .aviso-cuerpo {
    padding-left: 0;
  }
}

.newsletter-row {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: stretch;
}

.newsletter-row .form-control {
  max-width: 340px;
}

.ih-ic {
  display: inline-flex;
  vertical-align: -.18em;
}

.ih-ic svg {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  .site-chrome {
    view-transition-name: site-chrome;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 180ms;
  }
}

@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

.zen-sec { padding-block: var(--section-y); }
.zen-sec h2 {
  font-size: clamp(var(--tipo-h3), 1.1125rem + 0.9271vw, var(--tipo-h2));
  line-height: 1.3;
  margin: 0 0 1.25rem;
  max-width: 24ch;
}

/* Dos temas en una sola sección, uno por mitad: */
.zen-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: start;
}

@media (min-width: 992px) {
  .zen-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 4rem;
  }
}

/* ---------- El logotipo de SSS en /medicina-hiperbarica ------------------- */
/* LA FOTO DE LA CÁMARA VA ENCIMA DEL LOGOTIPO (2-sep-2026, a petición de */
.hiper-sss .area-galeria { margin-bottom: 2rem; }

.hiper-sss-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

/* El rótulo va suelto bajo la fila, así que ocupa el ancho entero y se centra
   sobre el conjunto -logotipo y distintivo-, no sobre una de las dos piezas. */
.hiper-sss-cta {
  display: block;
  margin-top: .85rem;
  text-align: center;
}

/* EL LOCKUP DE SSS: isotipo + nombre y lema, en fila. Es la misma disposición
   del navbar de sssnetwork.com, con sus proporciones -.8rem de hueco, el lema
   al .77 del nombre- y sus colores de marca, que NO son los del hospital y por
   eso van escritos aquí y no salen de las variables de la casa:
     #102249  el navy de SSS (su --navy-800)
     #0A7B9C  el cian del lema (su --cyan-600, que es --aq-700)
   Si SSS cambia su paleta, estos dos valores son lo único que hay que tocar. */
.sss-marca {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1rem;
}

/* La altura manda y el ancho la sigue, como en su navbar. Allí son 46 px
   dentro de una barra; aquí el lockup va suelto bajo una fotografía, así que
   se le da algo más de cuerpo. */
.sss-marca-iso {
  height: 62px;
  width: auto;
  flex-shrink: 0;
}

.sss-marca-texto {
  line-height: 1.05;
  /* De aquí salen los dos tamaños: el lema es una fracción del nombre. */
  --sss-nombre: 1.2rem;
}

.sss-marca-nombre {
  display: block;
  font-family: 'Inter Tight', var(--font-title), sans-serif;
  font-weight: 800;
  font-size: var(--sss-nombre);
  letter-spacing: -.03em;
  color: #102249;
}

.sss-marca-lema {
  display: block;
  font-family: 'Inter Tight', var(--font-title), sans-serif;
  font-weight: 700;
  font-size: calc(var(--sss-nombre) * .77);
  letter-spacing: 0;
  color: #0A7B9C;
}

/* En pantallas estrechas el nombre no cabe en una línea al lado del isotipo. */
@media (max-width: 419.98px) {
  .sss-marca-texto { --sss-nombre: 1.05rem; }
  .sss-marca-iso { height: 52px; }
}

/* La fila: el enlace de SSS y, a su derecha, el distintivo de DAN -que no es
   parte del enlace-. 'flex-start' los alinea por arriba, que es donde los dos
   tienen su borde bueno: el isotipo del lockup y el distintivo miden lo mismo
   de alto, así que arrancan a la misma altura como en el navbar de SSS. */
/* CENTRADO BAJO LA FOTOGRAFÍA (7-sep-2026, a petición de Jorge): se centra el
   conjunto -lockup y distintivo como un bloque- y también el rótulo de abajo,
   que si no se quedaba pegado a la izquierda debajo de algo ya centrado. */
.sss-fila {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.hiper-sss-link { text-align: center; }
.hiper-sss .sss-marca { justify-content: center; }

/* Misma altura que el isotipo del lockup -en el navbar de SSS el distintivo
   iguala a «.brand-logo», y aquí iguala a «.sss-marca-iso»-. */
.hiper-sss .dan-badge {
  height: 62px;
  width: auto;
  flex: 0 0 auto;
}

@media (max-width: 419.98px) {
  .hiper-sss .dan-badge { height: 52px; }
}

/* El subrayado va en el rótulo, que ahora es enlace por sí mismo. */
.hiper-sss-cta:hover,
.hiper-sss-cta:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* En una mitad, el tope de 44rem de .zen-list y los 24ch del h2 ya no recortan */
.zen-duo-col > .zen-list { max-width: none; }

/* ---------- Flota de ambulancias ------------------------------------------- */
.flota-lede {
  color: var(--text-muted);
  line-height: 1.8;
  margin: 0 0 2rem;
}

.flota-cifras { gap: 2rem 3rem; }

/* La fotografía de la flota, dentro de la columna izquierda y debajo de sus */
.flota-foto {
  margin: 2.5rem 0 0;
}

.flota-foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/* El h3 hace de titular de la mitad derecha: */
.flota-sub {
  font-size: clamp(var(--tipo-h3), 1.1125rem + 0.9271vw, var(--tipo-h2));
  line-height: 1.3;
  margin: 0 0 1.5rem;
  max-width: 24ch;
}

/* Marco de mapa embebido, con proporción propia en vez del width/height fijo */
/* ---------- Mapa de estaciones, en vectorial --------------------------------- */
.mapa-isla {
  position: relative;
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  /* Las mismas cifras del viewBox: */
  aspect-ratio: 500 / 567;
}

.mapa-isla-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mapa-isla-tierra {
  fill: var(--grey-100);
  stroke: var(--navy-500);
  stroke-width: 2;
  stroke-linejoin: round;
}

/* El punto. El botón mide 44 px -objetivo táctil- y el disco visible es más */
.mapa-punto {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
}

.mapa-punto::before {
  content: "";
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  background: var(--red-500);
  box-shadow: 0 0 0 3px #fff;
  transition: transform var(--duration) var(--ease-out),
              background-color var(--duration) var(--ease-standard);
}

.mapa-punto:hover::before,
.mapa-punto:focus-visible::before { transform: scale(1.45); }

.mapa-punto[aria-expanded="true"]::before {
  transform: scale(1.6);
  background: var(--navy-700);
}

/* El hospital no es uno más de la lista: */
.mapa-punto--hospital::before {
  inset: 11px;
  background: var(--navy-700);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy-700);
}

/* Con un globo abierto, los demás puntos bajan la voz: */
.mapa-isla.tiene-globo .mapa-punto:not([aria-expanded="true"])::before { opacity: .35; }

/* El globo. Sale por encima del punto y centrado en él; si no cabe arriba, el */
.mapa-globo {
  position: absolute;
  z-index: 2;
  width: 11.5rem;
  transform: translate(-50%, calc(-100% - 18px));
  padding: .5rem .5rem .65rem;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
  text-align: left;
}

.mapa-globo[hidden] { display: none; }

.mapa-globo-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--grey-100);
}

.mapa-globo-nombre {
  margin: .5rem 0 0;
  font-size: var(--tipo-menor);
  font-weight: 600;
  color: var(--text-strong);
}

.mapa-globo-cerrar {
  position: absolute;
  top: .25rem;
  right: .25rem;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--text-strong);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

/* El crédito de OpenStreetMap. */
.mapa-credito {
  margin: .75rem 0 0;
  font-size: var(--tipo-rotulo);
  color: var(--grey-600);
  text-align: center;
}

.mapa-credito a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .mapa-punto::before { transition: none; }
}

.zen-list { list-style: none; margin: 0; padding: 0; max-width: 44rem; }
.zen-list li { border-top: 1px solid var(--border-subtle); }
.zen-list li:last-child { border-bottom: 1px solid var(--border-subtle); }
.zen-list a { display: block; padding: 1.5rem 0; color: inherit; text-decoration: none; }
.zen-list a:hover, .zen-list a:focus-visible { text-decoration: none; }

/* Especialidades abre un aviso en vez de navegar, así que es un <button>: */
.zen-list .zen-pop {
  display: block;
  width: 100%;
  padding: 1.5rem 0;
  background: none;
  border: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

/* La cuenta es el motivo del aviso: */
.zen-cuenta {
  display: inline-block;
  margin-top: .5rem;
  font-family: var(--font-mono);
  font-size: var(--tipo-rotulo);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: .2rem .5rem;
}

.zen-list .zen-pop:hover .zen-cuenta,
.zen-list .zen-pop:focus-visible .zen-cuenta {
  color: var(--text-strong);
  border-color: var(--border-strong);
}

/* La cuenta es el titular del aviso: */
.esp-pop .modal-header {
  position: relative;
  justify-content: center;
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-bottom: 0;
}

/* A la esquina del contenido, no a la del panel: */
.esp-pop .modal-header .btn-close {
  position: absolute;
  top: var(--modal-aire-y);
  right: var(--modal-aire);
  margin: 0;
}

.esp-pop .modal-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(var(--tipo-hero), 1.975rem + 1.6458vw, var(--tipo-display));
  line-height: 1.1;
  letter-spacing: -.02em;
  text-align: center;
  color: var(--text-on-navy);
  margin: 0;
}

.esp-pop .modal-body { padding-top: 0; }

.esp-pop-lede { color: var(--vidrio-modal-tenue); margin: 0 0 1.5rem; text-align: center; }

.esp-pop-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 576px) { .esp-pop-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.esp-pop-lista li {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: var(--tipo-cuerpo);
  color: var(--text-on-navy);
  border-top: 1px solid var(--vidrio-modal-canto);
  padding-top: .6rem;
}

.esp-pop-otros-t {
  font-family: var(--font-mono);
  font-size: var(--tipo-rotulo);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--vidrio-modal-tenue);
  margin: 2rem 0 .75rem;
}

/* Con la tinta fuerte y no la tenue: */
.esp-pop-lista--otros li { font-weight: 400; color: var(--vidrio-modal-texto); }

/* La salida a /especialidades: */
.esp-pop-cta {
  margin: 2.5rem 0 0;
  text-align: center;
}

/* El contorno navy del botón no existe sobre el vidrio. */
.esp-pop .btn-outline-brand {
  border-color: rgba(255, 255, 255, .55);
  color: var(--text-on-navy);
}

.esp-pop .btn-outline-brand:hover,
.esp-pop .btn-outline-brand:focus {
  background: #fff;
  border-color: #fff;
  color: var(--navy-700);
}

/* Barra de tiempo del aviso, heredada de la cortina: */
.esp-pop-barra {
  /* 4 px y no 3: con el radio en 16 px la esquina le come ~6.7 px por lado */
  height: 4px;
  /* .modal-content es un flex en columna con max-height, y la barra es un hijo */
  flex-shrink: 0;
  /* El navy no se ve sobre el vidrio. */
  background: var(--accent-on-dark);
  transform: scaleX(0);
  transform-origin: left;
}

/* Lo que dura el aviso antes de saltar. */
.esp-pop-barra {
  /* DE 7 s A 3 (4-sep-2026, a petición de Jorge). */
  --esp-pop-espera: 3000ms;
}

.esp-pop-barra.is-corriendo {
  animation: espPopBarra var(--esp-pop-espera) linear forwards;
}

@keyframes espPopBarra {
  to { transform: scaleX(1); }
}

/* Con menos movimiento no hay salto automático -esp-popup.js ni arranca-, así */
@media (prefers-reduced-motion: reduce) {
  .esp-pop-barra { display: none; }
}
.zen-t,
.row-title {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: var(--tipo-cuerpo);
  color: var(--text-strong);
  margin-bottom: .35rem;
}
.zen-list a:hover .zen-t,
.zen-list a:focus-visible .zen-t,
.row-link:hover .row-title,
.row-link:focus-visible .row-title { text-decoration: underline; text-underline-offset: 3px; }
.zen-d,
.row-desc { display: block; color: var(--text-muted); font-size: var(--tipo-menor); line-height: 1.7; }

.zen-cifras { display: flex; flex-wrap: wrap; gap: 2rem 3.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.zen-cifras b,
.stat-value {
  display: block; font-family: var(--font-title); font-weight: 600;
  font-size: 2rem; line-height: 1; color: var(--text-strong); margin-bottom: .5rem;
}
.zen-cifras span,
.stat-label {
  display: block;
  font-family: var(--font-mono); font-size: var(--tipo-rotulo); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
}

.zen-mvv { display: grid; gap: 2rem; max-width: 60rem; }
/* TRES COLUMNAS CUANDO CABEN TRES, NO DESDE 768 (6-sep-2026, revisando tableta).
   Aquí ponía «repeat(3, 1fr)» a partir de 768, y en una tableta en vertical eso
   daba columnas de 194 px: la entradilla de cada apartado caía a 28 caracteres
   por línea repartidos en cuatro renglones, cuando lo cómodo empieza en 45. No
   se rompía nada -de ahí que no saliera en el barrido de desbordes-, sencillamente
   se leía a tirones.

   Con auto-fit las columnas las decide el sitio disponible y no un número: dos
   de ~323 px entre 768 y ~950 -unos 45 caracteres- y tres en cuanto caben tres
   de 15rem. En escritorio no cambia nada, que es donde ya estaban bien. */
@media (min-width: 768px) {
  .zen-mvv { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 3.5rem; }
}
.zen-mvv h3 { font-size: var(--tipo-cuerpo); margin: 0 0 .6rem; }
.zen-mvv p  { color: var(--text-muted); font-size: var(--tipo-menor); line-height: 1.75; margin: 0 0 1rem; }
.zen-mvv button {
  background: none; border: 0; border-bottom: 1px solid var(--grey-400);
  padding: 0 0 .2rem; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--tipo-rotulo); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-strong);
}
.zen-mvv button:hover, .zen-mvv button:focus-visible { border-color: var(--navy-700); }

/* ---------- Misión, visión y valores: */
.mvv-banda {
  background: var(--surface-card);
  color: var(--text-body);
  text-align: center;

  /* EL CUERPO DE LOS TITULARES, aquí y no en cada regla, porque lo comparten */
  --mvv-h2: clamp(var(--tipo-h3), 1.1125rem + 0.9271vw, var(--tipo-h2));
  /* EL ACENTO DE ESTA BANDA, y de momento el único sitio del sitio donde el */
  --mvv-acento: var(--red-500);
}

/* LOS TITULARES DE LA BANDA, EN LA REDONDA (5-sep-2026, a petición de Jorge). */
.mvv-banda h2 {
  color: var(--text-strong);
  margin-inline: auto;
  font-family: var(--font-round);
  font-weight: 400;
  font-synthesis: none;
  font-size: calc(var(--mvv-h2) * 1.06);
  letter-spacing: .01em;
}

/* El antetítulo y su filete son rótulo, no texto: */
.mvv-banda .section-eyebrow { color: var(--mvv-acento); }

/* El filete del antetítulo va suelto a la izquierda por defecto; centrado */
.mvv-banda .eyebrow-rule {
  background: var(--mvv-acento);
  margin-inline: auto;
}

.mvv-banda .zen-mvv { margin-inline: auto; }

/* «Misión», «Visión», «Valores»: */
/* LOS NOMBRES SE QUEDAN EN NAVY, y esto rompe la regla escrita arriba («el */
.mvv-banda .zen-mvv h3 { color: var(--text-strong); }
.mvv-banda .zen-mvv p  { color: var(--text-muted); }

/* El botón es lo único accionable de la banda y hasta hoy no lo parecía: */
.mvv-banda .zen-mvv button {
  color: var(--text-strong);
  border-bottom-color: var(--mvv-acento);
}
.mvv-banda .zen-mvv button:hover,
.mvv-banda .zen-mvv button:focus-visible {
  color: var(--mvv-acento);
  border-bottom-color: var(--mvv-acento);
}

/* Aquí ponía «outline-color: */
.mvv-banda :focus-visible { outline-color: var(--text-strong); }

/* AQUÍ ESTUVO .svc-num, el «01», «02»… de cada ficha de /especialidades, y se */

.esp-indice {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0 3rem;
  grid-template-columns: 1fr;
  counter-reset: none;
}
@media (min-width: 768px)  { .esp-indice { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .esp-indice { grid-template-columns: repeat(3, 1fr); } }
.esp-indice li { border-top: 1px solid var(--border-subtle); }
/* UNA SOLA COLUMNA desde el 2-sep-2026: */
.esp-indice a,
.esp-indice .esp-i-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: .2rem;
  padding: .85rem 0;
  color: inherit;
  text-decoration: none;
}
/* AQUÍ ESTUVO .esp-i-num, el «01», «02»… de la cortina, retirado el 2-sep-2026 */
.esp-i-nombre {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: var(--tipo-cuerpo);
  color: var(--text-strong);
}
.esp-i-med { font-size: var(--tipo-menor); line-height: 1.5; color: var(--text-muted); }
.esp-indice a:hover .esp-i-nombre,
.esp-indice a:focus-visible .esp-i-nombre { text-decoration: underline; text-underline-offset: 3px; }

.esp-cortina {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1080;
  max-height: 100dvh;
  overflow-y: auto;
  /* La cortina baja desde arriba del todo (z-index 1080, por encima del */
  padding-top: calc(var(--chrome-h) + 1.5rem);
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .55s var(--ease-out), visibility 0s .55s;
}

html.esp-cortina-abierta .esp-cortina {
  transform: translateY(0);
  visibility: visible;
  transition: transform .55s var(--ease-out), visibility 0s;
}

.esp-cortina .esp-indice {
  margin-top: 1.5rem;
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.esp-cortina-barra {
  position: sticky;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

html.esp-cortina-abierta .esp-cortina-barra {
  animation: espCortinaBarra 1.2s linear forwards;
}

@keyframes espCortinaBarra {
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .esp-cortina { display: none; }
}

/* Los cuatro contactos de «Coordinar un traslado» (/logistica). */
.dato-lista { list-style: none; margin: 0; padding: 0; max-width: 34rem; }
.dato-lista li { border-top: 1px solid var(--border-subtle); padding: 1.1rem 0; }
.dato-lista li:last-child { border-bottom: 1px solid var(--border-subtle); }

@media (min-width: 768px) {
  .dato-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2.5rem;
    max-width: none;
  }
  .dato-lista li { flex: 1 1 12rem; }
  .dato-lista li:last-child { border-bottom: 0; }
}
.dato-k {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--tipo-rotulo);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .15rem;
}

/* LA CRUZ DE LOS MÉDICOS ADSCRITOS. */
.marca-adscrito,
.marca-nav {
  margin-left: .28em;
}

/* inline-block, NO block: */
.marca-adscrito img,
.marca-nav img {
  display: inline-block;
  vertical-align: baseline;
  width: .62em;
  height: .62em;
}

.medico-trigger {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.medico-trigger:hover,
.medico-trigger:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* LA FICHA MÉDICA, DE TARJETA OPACA A DOS CRISTALES (3-sep-2026, a petición de */
.medico-modal {
  --bs-modal-bg: var(--vidrio-claro-fondo);
  --bs-modal-color: var(--text-strong);
  --bs-modal-header-border-color: var(--border-subtle);
  --bs-modal-border-color: var(--vidrio-modal-canto);
  /* El mismo aire que los otros dos modales. */
  --bs-modal-padding: var(--modal-aire);
  --bs-modal-header-padding: var(--modal-aire);
}
.medico-modal .modal-body { padding-block: var(--modal-aire-y); }

/* Dos columnas tipo currículum: */
.medico-modal .modal-content {
  /* El mismo radio que las tarjetas del sitio, igual que los otros modales. */
  border-radius: var(--radius-card);
  /* Recorte: sin él las esquinas rectas de la franja navy se salen por fuera */
  overflow: hidden;
  /* El mismo desenfoque que los otros dos modales, aquí bajo un cristal claro */
  -webkit-backdrop-filter: var(--vidrio-modal-desenfoque);
          backdrop-filter: var(--vidrio-modal-desenfoque);
}

/* 900 PX EN VEZ DE LOS 800 DE 'modal-lg' (2-sep-2026, a petición de Jorge): */
@media (min-width: 992px) {
  .medico-modal .modal-dialog { max-width: min(900px, calc(100vw - 4rem)); }
}

@media (min-width: 576px) {
  .medico-modal .modal-content {
    display: grid;
    /* Fue 244px cuando la franja llevaba además la lista de datos, y 208 cuando */
    grid-template-columns: 288px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .med-lateral      { grid-column: 1; grid-row: 1 / -1; }
  .medico-modal .modal-header { grid-column: 2; grid-row: 1; }
  .medico-modal .modal-body   { grid-column: 2; grid-row: 2; }
}

/* En móvil se apila. */
@media (max-width: 575.98px) {
  .medico-modal .modal-content {
    display: flex;
    flex-direction: column;
  }
  .medico-modal .modal-header { order: -1; }

  /* Apilada, la franja se lleva demasiado alto y el botón de cerrar acababa */
  .medico-modal .med-lateral {
    padding: 1.25rem 1.5rem;
  }
  /* También al doble (2-sep-2026). */
  .med-lateral .med-foto {
    width: 184px;
    flex: 0 0 auto;
  }
}

/* Sólo lleva el retrato, así que se centra en la franja en los dos ejes: */
/* LA FRANJA DEL RETRATO SIGUE MACIZA, y es decisión, no descuido (3-sep-2026). */
.med-lateral {
  background: var(--navy-700);
  color: var(--text-on-navy);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* OVALADO Y CENTRADO, como los retratos de estudio de toda la vida */
.med-foto {
  display: block;
  width: min(300px, 78%);
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 50%;
  margin-inline: auto;
  background: var(--neutral-100);
  /* Aro claro: separa el retrato del azul sin recurrir a sombra. */
  outline: 4px solid rgba(255, 255, 255, .16);
  outline-offset: 0;
}

/* Sin fotografía: la placa de relleno. */
.med-foto--pendiente {
  background: var(--img-pendiente) center / cover no-repeat, var(--neutral-100);
}

/* El nombre del médico es el titular de la ficha: */
.medico-modal .modal-title {
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text-strong);
}

/* LOS DOS RÓTULOS DE LA FICHA, AL ESCALÓN DE LA ESCALA (4-sep-2026). */
.med-esp {
  font-family: var(--font-mono);
  font-size: var(--tipo-rotulo);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}
.med-meta { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .9rem; }
/* Los valores -idiomas, cédula, universidad- son el dato que se viene a leer: */
.med-meta > li {
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--text-strong);
}
/* TRES PISTAS IGUALES (2-sep-2026). */
@media (min-width: 576px) { .med-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }

/* Los dos campos de texto largo -consejo y universidad- cruzan la fila entera */
.med-meta > .med-meta-ancho { grid-column: 1 / -1; }

/* EL MODAL ERA DEMASIADO ALTO EN ESCRITORIO (2-sep-2026, a petición de Jorge). */
@media (min-width: 576px) {
  .medico-modal .modal-header { padding-block: calc(var(--modal-aire) * .55); }
  .medico-modal .modal-body {
    padding-block: calc(var(--modal-aire-y) * .7);
    padding-inline: calc(var(--modal-aire) * .7);
  }
  .medico-modal .med-esp { margin-bottom: .6rem; }
  /* La separación entre columnas se queda casi entera -es la que hace legible */
  .medico-modal .med-meta { column-gap: 2rem; row-gap: 1rem; margin-bottom: 1rem; }
  .medico-modal .med-frontdesk { margin-top: 1rem; gap: .6rem; }

  /* AQUÍ SE APRETABA EL RELLENO DE LOS BOTONES Y SE HA QUITADO (5-sep-2026). */
}
.med-k {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--tipo-rotulo);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .15rem;
  /* El rótulo NO hereda la seminegrita del valor: */
  font-weight: 400;
}
/* Los dos botones son del hospital, no del médico: */
.med-frontdesk {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.75rem 0 0;
}

.med-cita { font-size: var(--tipo-menor); color: var(--text-muted); margin: .9rem 0 0; }

/* ---------- Las líneas de contacto (/contacto) ----------------------------- */
/* CADA LÍNEA ES «ICONO + NÚMERO» (7-sep-2026, a petición de Jorge). El icono va
   delante como MARCA DE CANAL, no como segundo enlace: el de WhatsApp dice que
   el número de urgencias atiende también por ahí, y el del teléfono acompaña a
   los dos del conmutador. Quien pulsa, llama - en urgencias no puede haber dos
   acciones compitiendo en el mismo renglón. */
.contacto-lineas .linea {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .55rem;
}
.contacto-lineas .row-title + .linea { margin-top: .4rem; }

.contacto-lineas .linea-a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--text-body);
}

/* El icono ocupa SIEMPRE una casilla de 24 px, sea enlace suelto -WhatsApp- o
   vaya dentro del enlace del número -los del conmutador-. Es lo que mantiene
   los tres iconos en la misma vertical y los tres números en la suya. */
.contacto-lineas .ih-ic {
  flex: 0 0 24px;
  justify-content: center;
  color: var(--text-subtle);
}

/* El icono de WhatsApp es SU PROPIO enlace: abre el chat, mientras el número
   de al lado llama. */
.contacto-lineas .linea-ic {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.contacto-lineas .linea-wa .ih-ic { color: #25D366; }
.contacto-lineas .linea-wa:hover .ih-ic,
.contacto-lineas .linea-wa:focus-visible .ih-ic { color: var(--green-700); }

/* Cifras tabulares: los dos números del conmutador se alinean dígito con
   dígito, que es la mitad de la razón de agruparlos. */
.contacto-lineas .linea-num {
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  /* UN NÚMERO NO SE PARTE (7-sep-2026, visto en /contacto en castellano): los
     espacios de «+52 987 872 1430» son puntos de corte como cualquier otro, así
     que en cuanto la columna aprieta el número se reparte en dos renglones y se
     lee como si fueran dos. El icono va con él por la misma razón: si el número
     no puede encoger, el enlace entero deja de encoger. */
  white-space: nowrap;
}

.contacto-lineas .linea-a:hover .linea-num,
.contacto-lineas .linea-a:focus-visible .linea-num {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Donde se toca con el dedo, el renglón mide los 44 px de objetivo táctil; en
   escritorio se queda en su alto natural para no separar los dos números del
   conmutador más de la cuenta. Va por 'pointer: coarse' y no por ancho: lo que
   decide es el dedo, no el tamaño de la ventana. */
@media (pointer: coarse) {
  .contacto-lineas .linea-a,
  .contacto-lineas .linea-ic { min-height: 44px; }
}

/* ---------- La entradilla de /acerca --------------------------------------- */
/* EL TEXTO JUSTIFICADO Y LA FOTO A LA ALTURA DEL TEXTO (7-sep-2026, a petición
   de Jorge). Las dos reglas van con «.acerca-intro» delante y la segunda,
   además, dentro de la consulta de 992 px. Ninguna de las dos cosas es adorno:

   - La caja 16:9 de «.area-galeria img» es DELIBERADA -está razonada en el
     comentario de esa regla- y la comparten /urgencias, /hospitalizacion,
     /farmacias y /medicina-hiperbarica, donde la foto va sola o junto a un
     titular corto y estirarla la deformaría. Aquí, y sólo aquí, la columna de
     texto es la que manda la altura.
   - Por debajo de 992 px las dos columnas se apilan: entonces no hay ninguna
     altura que igualar y la foto vuelve a su 16:9, que es lo que se quiere. */
.acerca-intro .lede {
  text-align: justify;
  /* SIN GUIONADO (7-sep-2026, a petición de Jorge): ninguna palabra se parte al
     final del renglón. El precio es que el blanco que sobra se reparte entre
     las palabras del renglón en vez de absorberlo un guion. */
  hyphens: manual;
}

@media (min-width: 992px) {
  .acerca-intro .area-galeria,
  .acerca-intro .area-galeria > li { height: 100%; }

  /* El <figure> reparte a lo alto: el pie se lleva lo suyo -aquí va vacío,
     pero la regla no depende de ello- y la imagen se queda con el resto. */
  .acerca-intro .area-galeria figure {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Sin la proporción fija, la altura la da el hueco; 'object-fit: cover' ya
     viene de la regla general y es lo que recorta sin deformar. */
  .acerca-intro .area-galeria img {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* ---------- Misión, visión y valores (/acerca) ----------------------------- */
/* AQUÍ VIVÍAN «.mvv-sec», «.mvv-titulo» y «.mvv-valores-lista», que vestían las
   tres secciones apiladas de /acerca. Salieron el 7-sep-2026 con ellas: la
   página pasó a la rejilla de la portada y ahora la visten «.zen-mvv» y
   «.mvv-banda .zen-mvv», que ya estaban escritas más arriba. Ninguna otra
   página las usaba -se comprobó antes de retirarlas-. */

/* --- El antetítulo suelto de /especialidades ------------------------------- */
.esp-rotulo { padding-bottom: 0; }
.esp-rotulo + .section { padding-top: 0; }

/* --- El titular de la farmacia hospitalaria, pegado a su foto -------------- */
@media (min-width: 992px) {
  .farm-a-la-imagen { text-align: right; }
  .farm-a-la-imagen .eyebrow-rule { margin-left: auto; }
}

/* --- Mapa del sitio (/mapa-del-sitio) -------------------------------------- */

/* El rótulo de cada uno de los dos bloques. */
.mapa-bloque {
  font-size: clamp(var(--tipo-entrada), 0.8325rem + 0.6979vw, var(--tipo-h3));
  margin: 0 0 1.25rem;
}

/* El segundo rótulo necesita aire por arriba: */
.mapa-cols + .mapa-bloque,
.mapa-menu + .mapa-bloque { margin-top: 3rem; }

/* RÉPLICA DEL MENÚ DE SERVICIOS DEL PANEL (4-sep-2026, a petición de Jorge). */
.mapa-menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2rem;
}
@media (min-width: 700px) {
  .mapa-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* En el bloque 1 el rótulo es un ENLACE a su página, igual que en el panel: */
.mapa-menu .mapa-grupo a {
  color: inherit;
  text-decoration: none;
  display: block;
}
.mapa-menu .mapa-grupo a:hover,
.mapa-menu .mapa-grupo a:focus-visible {
  color: var(--text-link-hover);
  text-decoration: none;
}

/* --- El índice de páginas (bloque 2) --------------------------------------- */
.mapa-cols {
  columns: 15rem auto;
  column-gap: 2rem;
}

.mapa-col {
  break-inside: avoid;
  margin-bottom: 2.5rem;
}

/* «Inicio» va suelto y cruza todas las columnas: */
.mapa-col-inicio { column-span: all; }

/* CON LA CARA DEL PANEL DE «SERVICIOS» (2-sep-2026, a petición de Jorge). */
.mapa-grupo {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: var(--tipo-cuerpo);
  line-height: 1.25;
  color: var(--text-strong);
  padding-bottom: .5rem;
  /* El filete del panel, que es un navy al 18 %: */
  border-bottom: 1px solid rgba(0, 32, 91, .18);
  margin: 0 0 .6rem;
}

.mapa-lista { list-style: none; margin: 0; padding: 0; }

/* EL RITMO LO PONE EL RELLENO, NO EL MARGEN, igual que en el panel: */
.mapa-pag {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--tipo-menor);
  line-height: 1.35;
  color: var(--navy-600);
  padding: .38rem 0;
}

/* La página en la que estás -el propio mapa- no se enlaza a sí misma como si */
.mapa-pag.active { color: var(--text-muted); }

/* Tercer nivel: los apartados de dentro de una página. */
.mapa-sub {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0 0 0 .9rem;
  border-left: 1px solid var(--border-subtle);
}

.mapa-sub > li + li { margin-top: .35rem; }

/* UN ESCALÓN POR DEBAJO DE .mapa-pag, y hacía falta moverlo: */
.mapa-sub a {
  display: block;
  font-size: var(--tipo-menor);
  line-height: 1.45;
  color: var(--text-muted);
}

.mapa-sub a:hover,
.mapa-pag:hover { color: var(--text-link-hover); }