/*
 * Hoja de estilos única del sitio. Archivo externo servido desde el propio
 * origen: la CSP de §5.3.5 es `style-src 'self'` y prohíbe `unsafe-inline`,
 * así que NO se usan atributos `style=` ni bloques <style> en las páginas.
 *
 * El diseño sirve a requisitos concretos, y ninguna decisión visual pasa por
 * encima de ellos:
 *  - RF-001: los accesos operativos se ven sin scroll horizontal a 360 px.
 *  - §5.6: contraste mínimo 4.5:1, foco visible, objetivos táctiles de 44 px,
 *    diseño primero para móvil.
 *  - §5.1: las ondas institucionales se dibujan con CSS y las fuentes se
 *    sirven desde este mismo origen: cero peticiones a terceros.
 *  - Color PLANO: la paleta de la IPS se usa como color completo, sin
 *    degradados (ADR-024).
 */

:root {
  /* -------------------------------------------------------------------------
   * Paleta institucional de San José IPS Putumayo
   *
   * Los doce colores que entregó la IPS, tal cual. Lo que NO es arbitrario es
   * dónde se usa cada uno: se midió el contraste de los doce contra blanco y
   * solo siete llegan al 4.5:1 que exige §5.6 para texto. Los otros cinco son
   * decorativos o funcionan como FONDO con texto oscuro encima. Que un color
   * sea de la marca no lo vuelve legible.
   *
   *   Aptos para texto sobre blanco        Solo decorativos / de fondo
   *   ---------------------------------    ---------------------------------
   *   Negro          #161311  18.50:1      Verde        #219122  4.09:1
   *   Azul oscuro    #0108b5  12.33:1      Gris verdoso #7f8977  3.65:1
   *   Gris oscuro    #463a38  10.92:1      Lavanda      #a276d6  3.44:1
   *   Morado oscuro  #700c8b   9.93:1      Amarillo     #e6b52a  1.91:1
   *   Morado intenso #9403c3   6.86:1      Crema        #ead1ac  1.48:1
   *   Café           #88550c   6.27:1
   *   Fucsia         #e6035d   4.63:1  (justo: no se usa en texto pequeño)
   * ---------------------------------------------------------------------- */
  --marca-fucsia: #e6035d;
  --marca-morado-oscuro: #700c8b;
  --marca-morado-intenso: #9403c3;
  --marca-azul: #0108b5;
  --marca-verde: #219122;
  --marca-amarillo: #e6b52a;
  --marca-cafe: #88550c;
  --marca-gris-verdoso: #7f8977;
  --marca-crema: #ead1ac;
  --marca-negro: #161311;
  --marca-lavanda: #a276d6;
  --marca-gris-oscuro: #463a38;

  /* --- Papeles funcionales, asignados a partir de lo medido arriba --- */
  --tinta: var(--marca-negro); /* 18.50:1 */
  --tinta-suave: var(--marca-gris-oscuro); /* 10.92:1 */
  --fondo: #ffffff;
  --enlace: var(--marca-morado-oscuro); /* 9.93:1 */
  --enlace-fuerte: var(--marca-negro); /* hover: el enlace se oscurece */
  --enlace-visitado: var(--marca-morado-intenso); /* 6.86:1 */
  --borde: var(--marca-gris-verdoso); /* 3.65:1 — mínimo 3:1 para bordes */
  --borde-tenue: #e0e3dd; /* gris verdoso al 25 % */
  --suave: #f9f2e8; /* crema al 28 %: superficie cálida */
  --acento-tenue: #f5eef7; /* morado oscuro al 7 % */
  --carmin: var(--marca-fucsia); /* acento de borde, NO texto pequeño */
  --alerta: var(--marca-fucsia); /* borde de error; el texto va en --tinta */
  --ok: var(--marca-verde); /* borde de éxito; el texto va en --tinta */
  --sombra:
    0 1px 2px rgba(22, 19, 17, 0.06), 0 10px 24px -18px rgba(112, 12, 139, 0.5);

  /* Las ondas institucionales (ADR-021). Recorren la paleta de fucsia a azul
     pasando por los dos morados. NUNCA llevan texto encima. */
  --marca-magenta: var(--marca-fucsia);
  --marca-carmin: var(--marca-morado-intenso);
  --marca-purpura: var(--marca-morado-oscuro);
  --marca-indigo: var(--marca-azul);
  --marca-azulado: var(--marca-lavanda);

  /* -------------------------------------------------------------------------
   * Escala de espaciado (base 4)
   *
   * Antes de esto el sitio usaba 40 valores `rem` distintos, varios separados
   * por 0.05rem (1.05, 1.1, 1.15, 1.2, 1.25, 1.3...). Diferencias que nadie
   * percibe pero que impiden que haya ritmo: si todos los huecos miden casi
   * lo mismo, ningún bloque se lee como más unido ni más separado que otro.
   *
   * La escala es de base 4 px (0.25rem) y crece con saltos que SÍ se notan.
   * Regla de uso, en una línea: grupos apretados con --e-1..--e-3, separación
   * entre grupos con --e-5..--e-6, aire entre secciones con --e-7..--e-9.
   * ---------------------------------------------------------------------- */
  --e-1: 0.25rem; /*  4 px — pegado: etiqueta y su campo */
  --e-2: 0.5rem; /*   8 px — dentro de un grupo */
  --e-3: 0.75rem; /*  12 px — entre líneas de un grupo */
  --e-4: 1rem; /*    16 px — relleno estándar */
  --e-5: 1.5rem; /*  24 px — entre grupos hermanos */
  --e-6: 2rem; /*    32 px — entre bloques distintos */
  --e-7: 3rem; /*    48 px — aire de sección */
  --e-8: 4rem; /*    64 px — aire de sección amplio */
  --e-9: 6rem; /*    96 px — separación mayor */

  /* -------------------------------------------------------------------------
   * Papeles tipográficos
   *
   * Seis papeles, no una colección de tamaños. Cada uno tiene un trabajo que
   * los otros no hacen, y el contraste entre papeles vecinos es suficiente
   * para distinguirlos sin leer el texto. 1rem es el piso del cuerpo: no se
   * baja de ahí salvo en metadatos.
   * ---------------------------------------------------------------------- */
  --t-meta: 0.875rem; /* fecha, versión, nota al pie */
  --t-cuerpo: 1rem; /* piso de lectura */
  --t-realce: 1.125rem; /* entradilla, primer párrafo */
  --t-rotulo: 1.25rem; /* h3, título de tarjeta */
  --t-titulo: clamp(1.3rem, 1.1rem + 0.9vw, 1.65rem); /* h2 */
  --t-portada: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem); /* h1 */

  /* Medidas de lectura (§5.6 y typeset: la prosa entre 45 y 75 caracteres). */
  --medida-lectura: 68ch; /* párrafo corrido */
  --medida-estrecha: 46ch; /* entradilla y columnas angostas */
}

/* ---------------------------------------------------------------------------
 * Tipografía autoalojada
 *
 * El archivo vive en /fuentes y se sirve desde el propio origen. NO se enlaza
 * desde Google Fonts: la CSP de §5.3.5 es `default-src 'self'` y bloquearía la
 * petición — además de que cargar fuentes desde un tercero le entrega a ese
 * tercero la IP de cada persona que entra al sitio de una IPS.
 *
 * Una sola familia, no dos. Hasta acá los títulos llevaban Fraunces, una serif
 * editorial de alto contraste tomada de referencias de estilo de vida (August
 * Health, Vibrants) que la propia IPS señaló después, con capturas de sitios
 * reales del sector (Clínica Universitaria Colombia, Mayo Clinic), como «muy
 * particular para una IPS»: ninguna referencia real de un prestador de salud
 * usa serif de exhibición en sus titulares, todas usan una sans de trazo
 * uniforme y peso fuerte. Se retiró Fraunces (67 KB) y los títulos pasan a
 * Source Sans 3 en un peso más alto que el cuerpo — la misma familia que ya
 * se usaba para el texto corrido, así que no se paga dos veces por la
 * jerarquía: peso y tamaño la marcan, no un cambio de letra.
 *
 * El archivo es variable (un solo archivo cubre pesos 200–900, verificado con
 * `fontTools`: el rango declarado antes —400 600— era más angosto que el que
 * el propio archivo soporta, así que subir a los títulos no costó ni un byte
 * nuevo). 29 KB en total, contra el presupuesto de 1,5 MB de RNF-PER-04.
 * `font-display: swap` hace que el texto se lea desde el primer instante con
 * la fuente del sistema y cambie cuando la propia termine de bajar —
 * importante con la conectividad variable del Putumayo (§5.1).
 *
 * Source Sans 3 en el cuerpo, además, por legibilidad: el público de una IPS
 * incluye adultos mayores y personas con baja visión (§5.6).
 * ------------------------------------------------------------------------ */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fuentes/source-sans-3-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

* {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * Accesibilidad asistida (§5.6)
 *
 * El público de una IPS incluye adultos mayores y personas con baja visión.
 * La referencia inicial (shaio.org) traía tres controles: contraste, agrandar
 * y achicar letra. La IPS después mandó capturas de paneles más completos
 * (un widget comercial de terceros) y pidió ese nivel de control — sin el
 * widget en sí, que es un script de un tercero y la CSP de §5.3.5 es
 * `script-src 'self'`. Lo que sí se adoptó, servido desde este mismo origen:
 * interlineado y espaciado entre letras (WCAG 1.4.12, que el panel anterior
 * no cubría), resaltar enlaces, ocultar imágenes y destacar títulos.
 *
 *  1. Todo el sitio se mide en `rem`, así que cambiar el tamaño base de `html`
 *     escala la página entera —texto, espacios y objetivos táctiles— en vez de
 *     agrandar solo las letras y romper la composición.
 *  2. El panel es mejora progresiva: sin JavaScript no aparece (lo revela
 *     `accesibilidad.js`), de modo que nadie se encuentra con botones muertos.
 *     El sitio completo sigue funcionando sin scripts.
 *  3. Interlineado y espaciado entre letras se guardan como MULTIPLICADORES
 *     (`--escala-interlineado`, `--escala-espaciado-letras`) que cada regla de
 *     `line-height`/`letter-spacing` referencia explícitamente. No hay forma
 *     de "escalar todo el interlineado del sitio" con una sola declaración en
 *     `html`/`body`: varios componentes fijan su propio `line-height` (listas,
 *     tarjetas, formularios) y ESE valor, no el heredado, es el que se ve.
 *     Los titulares quedan fuera a propósito: su interlineado ajustado es
 *     parte del diseño tipográfico (`typeset.md`), no una preferencia de
 *     lectura de párrafos largos.
 * ------------------------------------------------------------------------ */
html {
  font-size: calc(100% * var(--escala-texto, 1));
}

:root {
  --escala-interlineado: 1;
  --escala-espaciado-letras: 0; /* aditivo, en em: 0 = normal */
}

body {
  margin: 0;
  color: var(--tinta);
  background: var(--fondo);
  font-family:
    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem; /* 17px: cuerpo cómodo de leer, no el 16 por defecto */
  line-height: calc(1.6 * var(--escala-interlineado));
  letter-spacing: calc(var(--escala-espaciado-letras) * 1em);
  /* Ninguna anchura fija: el contenido se adapta desde 320 px. */

  /* Columna de altura completa: la cinta inferior queda al pie de la ventana
     aunque la página tenga poco contenido (404, confirmación de PQRS), en vez
     de flotar a media pantalla. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------------------
 * Fondo institucional (RF-001, §5.6)
 *
 * Reproduce las ondas del sitio vigente —que allá son un JPEG de 38 KB
 * servido en cada carga— dibujándolas con CSS en color plano. Motivos, no
 * estética:
 *
 *  - Peso: cero bytes de imagen. RNF-PER-04 fija la portada en menos de 1,5 MB
 *    y RNF-PER-01 en menos de 3 s sobre 3G simulada, con la conectividad real
 *    del Putumayo como referencia (§5.1).
 *  - Nitidez: una forma CSS escala a cualquier densidad de pantalla; el JPEG
 *    original mide 588x784 y se estira.
 *  - CSP: §5.3.5 prohíbe `unsafe-inline`, así que esto vive acá, en la hoja
 *    externa, y no como atributos `style=` en las plantillas.
 *
 * Regla de accesibilidad que ordena todo el bloque: NINGÚN texto se apoya
 * sobre los colores de marca. Las cintas son franjas vacías por encima de la
 * cabecera y por debajo del pie; detrás del contenido solo queda el rayado
 * diagonal, a opacidad 0.045.
 *
 * Contraste medido en el PEOR caso (velo rosado y rayado superpuestos en el
 * mismo punto: rgb(245,230,239)), contra el mínimo de 4.5:1 de §5.6:
 *   - texto y títulos  #161311 -> 15.36:1  (18.50:1 sobre blanco puro)
 *   - texto secundario #463a38 ->  9.07:1  (10.92:1)
 *   - enlaces/acento   #700c8b ->  8.25:1  ( 9.93:1)
 * Ninguno queda cerca del límite, que es la condición para que esta capa sea
 * decoración y no una concesión.
 * ------------------------------------------------------------------------ */

/* Capa fija detrás de todo: el velo rosado y el rayado diagonal del original. */
.fondo-ondas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none; /* decorativo: nunca intercepta un clic */
  /* Rayado diagonal del sitio vigente: líneas sólidas de 1 px, sin ninguna
     mezcla de color. Se quitó el velo rosado que tenía antes porque era un
     desvanecido, y la IPS pidió color plano. */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(1, 8, 181, 0.045) 0 1px,
    transparent 1px 15px
  );
}

/* El contenido va por encima de la capa fija. z-index explícito en vez de un
   -1 en el fondo: con z-index negativo, el `background` del propio body lo
   taparía. */
main,
.sitio-pie,
.cinta {
  position: relative;
  z-index: 1;
}
/* La cabecera va POR ENCIMA del contenido (no al mismo nivel): la barra de
   atención rápida vive adentro y, fija abajo en el celular, tiene que pintarse
   sobre las fotos y tarjetas de `main`. Con el mismo z-index que `main`, el
   contenido —que viene después en el documento— la tapaba. */
.sitio-cabecera {
  position: relative;
  z-index: 20;
}

/* ---------------------------------------------------------------------------
 * Cintas de ondas — color PLANO
 *
 * La IPS pidió los colores de su paleta como color completo, sin degradados.
 * Cada cinta es entonces un bloque de un solo color con dos elipses sólidas
 * encima: una de otro color de la paleta y otra del color del fondo, que es la
 * que dibuja la curva. Ni una mezcla de color en todo el conjunto — la misma
 * lógica plana del logo institucional.
 * ------------------------------------------------------------------------ */
.cinta {
  flex: none;
  position: relative;
  overflow: hidden;
}
.cinta::before,
.cinta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.cinta--superior {
  height: clamp(2.5rem, 7vw, 5rem);
  background-color: var(--marca-fucsia);
}
/* Segunda onda sólida: morado entrando por la derecha. */
.cinta--superior::before {
  background-color: var(--marca-morado-oscuro);
  top: -55%;
  right: -12%;
  width: 62%;
  height: 165%;
}
/* Curva inferior: elipse del color del fondo que recorta la cinta. */
.cinta--superior::after {
  background-color: var(--fondo);
  left: -14%;
  right: -14%;
  bottom: -76%;
  height: 100%;
}

.cinta--inferior {
  height: clamp(2rem, 5.5vw, 3.75rem);
  background-color: var(--marca-morado-oscuro);
}
/* Segunda onda sólida: fucsia entrando por la izquierda. */
.cinta--inferior::before {
  background-color: var(--marca-fucsia);
  bottom: -60%;
  left: -10%;
  width: 58%;
  height: 170%;
}
/* Curva superior: elipse del color del fondo. */
.cinta--inferior::after {
  background-color: var(--fondo);
  left: -14%;
  right: -14%;
  top: -80%;
  height: 100%;
}
/* Quien pide más contraste al sistema operativo no quiere un velo encima del
   texto, por sutil que sea. Las cintas sí se conservan: no tienen texto. */
@media (prefers-contrast: more) {
  .fondo-ondas {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * Panel de accesibilidad
 * ------------------------------------------------------------------------ */
/* El `display` de abajo le gana al `display: none` que el navegador aplica
   por el atributo `hidden`. Sin esto, sin JavaScript el panel se vería pero
   ningún botón haría nada. */
.panel-accesibilidad[hidden] {
  display: none;
}
.panel-accesibilidad {
  position: fixed;
  right: var(--e-4);
  bottom: var(--e-4);
  z-index: 30;
}

/* --- Disparador: un solo botón flotante, siempre visible --- */
.paa-disparador {
  width: 56px;
  height: 56px;
  min-height: 56px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--enlace);
  color: #fff; /* 9.93:1 */
  box-shadow: 0 6px 20px -6px rgba(22, 19, 17, 0.45);
}
.paa-disparador:hover {
  background: var(--enlace-fuerte);
}
.paa-disparador svg {
  width: 26px;
  height: 26px;
}
/* El disparador se apaga visualmente mientras la bandeja está abierta, para
   no leerse como dos controles activos a la vez; sigue en el DOM y enfocable,
   `aria-expanded` es la fuente de verdad para quien usa lector de pantalla. */
.paa-disparador[aria-expanded="true"] {
  background: var(--marca-negro);
}

/* --- Bandeja --- */
.paa-bandeja[hidden] {
  display: none;
}
.paa-bandeja {
  position: absolute;
  right: 0;
  bottom: calc(56px + var(--e-3));
  width: min(23rem, calc(100vw - 2 * var(--e-4)));
  max-height: min(34rem, calc(100vh - 120px));
  overflow-y: auto;
  padding: var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  background: var(--fondo);
  border: 1px solid var(--borde-tenue);
  border-radius: 16px;
  box-shadow: 0 12px 40px -10px rgba(22, 19, 17, 0.35);
}
.paa-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}
h1,
h2,
h3 {
  font-family:
    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--marca-negro); /* 18.50:1 sobre blanco */
  text-wrap: balance;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.65rem);
  line-height: 1.25;
  font-weight: 700;
  margin: 2.25rem 0 1rem;
}

/* Barra vertical de acento a la izquierda del título de sección: el recurso
   que usa shaio.org para marcar jerarquía sin pedirle al lector que compare
   tamaños de fuente. */
main h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.paa-cabecera h2 {
  margin: 0;
  font-size: var(--t-rotulo);
}
input,
select,
textarea,
button {
  font: inherit;
  max-width: 100%;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background: var(--fondo);
  color: var(--tinta);
}

button {
  width: auto;
  cursor: pointer;
  background: var(--enlace);
  color: #fff;
  border-color: var(--enlace);
  font-weight: 600;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
}

.paa-cabecera button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--suave);
  color: var(--tinta);
  border-color: var(--borde-tenue);
}
.paa-interruptor svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.paa-ajuste-etiqueta svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--enlace);
}

.paa-ajuste-controles svg {
  width: 14px;
  height: 14px;
}

.paa-reiniciar svg {
  width: 18px;
  height: 18px;
}

.boton-secundario svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
}

/* La flecha es decorativa: el texto del enlace ya dice a dónde va, y un
   lector de pantalla que anuncie "flecha izquierda Novedades" estorba. */
.migas svg {
  flex: none;
  width: 1em;
  height: 1em;
}

.icono svg {
  display: block;
  width: 100%;
  height: 100%;
}

[role="alert"] svg,
[role="status"] svg {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
}

.paa-cabecera button svg {
  width: 18px;
  height: 18px;
}

.paa-rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
}
/* Interruptores: mismo tamaño de objetivo táctil que el resto del sitio
   (44 px), pero el bloque completo mide más porque lleva icono y etiqueta. */
.paa-interruptor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  min-height: 5.5rem;
  padding: var(--e-2);
  text-align: center;
  font-size: var(--t-meta);
  font-weight: 600;
  line-height: 1.3;
  background: var(--suave);
  color: var(--tinta);
  border: 1px solid var(--borde-tenue);
  border-radius: 12px;
}
.paa-interruptor:hover {
  border-color: var(--enlace);
  background: var(--fondo);
}
/* El estado activo se marca con relleno Y borde, nunca solo con color
   (WCAG 1.4.1) — el mismo criterio que ya usa `.escala label:has(:checked)`
   en la encuesta. */
.paa-interruptor[aria-pressed="true"] {
  background: var(--enlace);
  border-color: var(--enlace);
  color: #fff;
}

.paa-rejilla--ajustes {
  grid-template-columns: 1fr;
  gap: var(--e-3);
}
.paa-ajuste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  background: var(--suave);
  border: 1px solid var(--borde-tenue);
  border-radius: 12px;
}
.paa-ajuste-etiqueta {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-meta);
  font-weight: 600;
}
.paa-ajuste-controles {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex: none;
}
.paa-ajuste-controles output {
  min-width: 3.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.paa-ajuste-controles button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--enlace);
  color: #fff;
}
button:hover {
  /* Estaba en #093f6e, un azul verdoso que sobró de la paleta anterior y que
     no es ninguno de los doce colores de la IPS. El hover ahora oscurece
     dentro de la marca: morado oscuro -> negro institucional. */
  background: var(--marca-negro);
  border-color: var(--marca-negro);
}

.paa-ajuste-controles button:hover {
  background: var(--enlace-fuerte);
}
.paa-ajuste-controles button:disabled {
  background: var(--borde-tenue);
  cursor: not-allowed;
}

.paa-reiniciar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  background: var(--fondo);
  color: var(--enlace);
  border: 1px solid var(--enlace);
}
.paa-reiniciar:hover {
  background: var(--acento-tenue);
}

@media (max-width: 26rem) {
  /* A 360 px la bandeja ocupa casi todo el ancho: dos columnas de
     interruptor se quedan sin aire. Una sola columna, más alta pero legible. */
  .paa-rejilla {
    grid-template-columns: 1fr;
  }
}

@media print {
  .panel-accesibilidad {
    display: none;
  }
}

/* Al imprimir (una PQRS radicada, un listado del panel) la decoración solo
   gasta tinta. */
@media print {
  .fondo-ondas,
  .cinta {
    display: none;
  }
}

.contenedor {
  width: 100%;
  max-width: 78rem; /* ~1248 px: aprovecha la pantalla en escritorio */
  margin: 0 auto;
  padding: 1rem;
}

/* ---------------------------------------------------------------------------
 * Bandas de ancho completo
 *
 * El patrón que estructura los sitios de referencia (shaio.org entre ellos):
 * la banda ocupa todo el ancho de la ventana y su contenido queda centrado y
 * acotado adentro. Así la pantalla se llena en escritorio sin que el texto se
 * estire hasta volverse ilegible.
 *
 * Se resuelve con un contenedor normal (sin el truco de `100vw`, que suma el
 * ancho de la barra de desplazamiento y produce scroll horizontal — justo lo
 * que RF-001 prohíbe a 360 px).
 * ------------------------------------------------------------------------ */
/* Contenedor angosto para las páginas de una sola columna (prosa, formularios
   sin apoyo lateral). En una banda de 78rem, una columna de lectura de 68ch
   deja media pantalla vacía a la derecha en escritorio: no es aire, es un
   hueco. Estrechar la banda entera mantiene alineados el título y el texto, y
   centra la composición en vez de empujarla contra el borde izquierdo. */
.contenedor--estrecho {
  max-width: 58rem;
}

.banda {
  width: 100%;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}
/*
 * Ritmo vertical entre bandas. Dos casos distintos, y confundirlos fue el
 * origen de que las tarjetas quedaran pegadas al borde de la sección anterior:
 *
 *  a) Banda sin fondo seguida de otra sin fondo: los dos rellenos se suman y
 *     dejan un hueco muerto (no hay cambio de color que justifique tanto
 *     aire). La segunda arranca más arriba.
 *  b) Banda CON fondo (encabezado, héroe de sede, tenue, clara) seguida de una
 *     sin fondo: el corte de color ya marca el límite, pero el contenido que
 *     viene después necesita aire PROPIO para no quedar pegado a ese borde.
 *
 * La versión anterior de (a) escribía `.banda + .banda:not(...)`, sin condición
 * sobre la banda ANTERIOR, así que también colapsaba el caso (b). El comentario
 * que acompañaba ese arreglo decía que CSS no puede mirar al hermano anterior:
 * eso es falso y por eso el arreglo fue un parche para `.encabezado-pagina` en
 * vez de la corrección general. `A + B` sí permite condicionar A; lo que CSS no
 * tiene es un selector de hermano anterior *sin* nombrar a B. Con (b) escrito
 * como regla propia, quedaron cubiertas las tres transiciones que estaban mal:
 * héroe de sede -> tarjetas, accesos -> servicios, novedades -> sedes.
 */
:is(.encabezado-pagina, .sede-hero, [class*="banda--"])
+ .banda:not([class*="banda--"]) {
  padding-top: clamp(var(--e-6), 5vw, var(--e-8));
}
.banda:not([class*="banda--"]):not(.encabezado-pagina):not(.sede-hero)
  + .banda:not([class*="banda--"]) {
  padding-top: 0;
}
.banda > .contenedor {
  padding-block: 0;
}
.banda--tenue {
  background: var(--acento-tenue);
}
.banda--clara {
  background: var(--suave);
}

/* Medida de lectura: un párrafo suelto no se estira a lo ancho de la banda
   aunque la banda ocupe toda la pantalla (§5.6, legibilidad). */
main p:not([class]),
main li:not([class]) {
  max-width: 68ch;
}

/* El contenido absorbe el espacio sobrante de la columna: así el pie y la
   cinta inferior quedan juntos al fondo en páginas cortas, sin un hueco entre
   ellos. */
main {
  flex: 1 0 auto;
}

/* Texto disponible para lectores de pantalla pero no en pantalla: describe un
   control cuyo icono ya se entiende viendo, y que sin esto se anunciaría como
   un botón sin nombre. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido: navegación por teclado (§5.6). */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--fondo);
  padding: 0.5rem 1rem;
  border: 2px solid var(--tinta);
}
.saltar:focus {
  left: 0;
  z-index: 10;
}

a {
  color: var(--enlace);
}
a:visited {
  color: var(--enlace-visitado);
}
:focus-visible {
  outline: 3px solid var(--enlace);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Superficies del navegador
 *
 * Lo que el navegador dibuja por su cuenta y casi nunca se toca: la selección
 * de texto, el cursor de escritura, la barra de desplazamiento y el subrayado
 * de los enlaces. Sin esto, el sitio hereda el azul del sistema operativo en
 * medio de una paleta morada, y el detalle delata que la página se ensambló.
 *
 * La selección se mide igual que todo lo demás: crema institucional al 100 %
 * con tinta negra encima da 15.61:1, muy por encima del 4.5:1 de §5.6. Un
 * morado saturado de fondo dejaría el texto seleccionado ilegible, que es
 * justo cuando más se necesita leerlo.
 * ------------------------------------------------------------------------ */
::selection {
  background: var(--marca-crema);
  color: var(--marca-negro);
}

:root {
  /* El cursor de escritura toma el color de marca; el canal de la barra de
     desplazamiento usa la superficie cálida para no abrir un surco gris. */
  caret-color: var(--marca-morado-oscuro);
  scrollbar-color: var(--marca-gris-verdoso) var(--suave);
}

/* El subrayado no debe cruzar las colas de las letras (j, g, p, y): separarlo
   y afinarlo lo vuelve legible sin quitarle el subrayado, que es el único
   indicador de enlace que no depende del color (WCAG 1.4.1). */
a {
  text-underline-offset: 0.2em;
  text-decoration-thickness: from-font;
}

/* Cifras de ancho fijo donde los números se comparan en columna: importes de
   los estados financieros, tablas del panel, fechas de novedades y radicados
   de PQRS. Sin esto el "1" es más angosto que el "8" y las columnas bailan. */
table,
.fecha,
.radicado,
.lista-telefonos a,
.periodo-documento {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Tres preferencias más del panel de accesibilidad, cada una activada por un
 * atributo en `<html>` que pone `accesibilidad.js`. Ningún tercero: los tres
 * son reglas de esta hoja, no un widget externo.
 * ------------------------------------------------------------------------ */

/* Resaltar enlaces: por LISTA EXPLÍCITA de dónde vive texto corrido con
   enlaces adentro (prosa, entradillas, la autorización de la PQRS/encuesta),
   no por "cualquier `a` dentro de un párrafo o una lista". Esto último
   también habría atrapado `.lista-accesos` y `.rejilla` —los accesos y
   tarjetas de la portada son `<li><a>` sin ninguna clase propia en el
   `<a>`— y les habría puesto un fondo amarillo encima del fondo de color que
   ya tienen. Los que ya se ven como botón o tarjeta no necesitan resaltado
   aparte: ya son visualmente distintos. */
:root[data-resaltar-enlaces="on"]
  :is(.prosa, .entradilla, .novedad-cuerpo, .campo-casilla, main p)
  a:not(.ver-mas):not(.migas) {
  background: #fff3b0; /* amarillo institucional-neutro, negro encima: ~18.6:1 */
  color: #000;
  text-decoration-thickness: 2px;
  border-radius: 2px;
  padding: 0 0.15em;
}

.burbuja img,
.burbuja video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.marca img {
  display: block;
  width: auto;
  /* En `rem` para que el logo crezca con el panel de accesibilidad, igual que
     el texto, en vez de quedarse chico cuando alguien agranda la letra.
     `clamp` para que no se coma la pantalla en un teléfono. */
  height: clamp(4.5rem, 9vw, 7rem);
}

/* Ocultar imágenes: solo las de contenido (`<main>`). El logo vive en la
   cabecera, fuera de `<main>`, así que queda afuera sin necesidad de excluirlo
   a mano. `visibility` en vez de `display: none` para no correr el resto de
   la página cada vez que se activa. */
:root[data-ocultar-imagenes="on"] main img {
  visibility: hidden;
}

/* Destacar títulos: un cuadro alrededor de cada encabezado de contenido.
   Con variables, no colores fijos: en alto contraste `--acento-tenue` ya
   resuelve a blanco y `--enlace` a azul, así que el cuadro se ve bien en los
   dos modos sin una regla aparte. */
:root[data-destacar-titulos="on"] main :is(h1, h2, h3) {
  background: var(--acento-tenue);
  outline: 2px solid var(--enlace);
  outline-offset: 0.3em;
  border-radius: 6px;
}
/*
 * Hallazgo real (reportado por la IPS con captura, confirmado auditando el
 * sitio desplegado): `.franja h2` y `.sede-hero h1` fijan su texto en blanco
 * fijo para leerse sobre morado sólido. La regla de arriba les pone ENCIMA un
 * fondo `--acento-tenue` (lavanda clara): texto blanco sobre fondo casi
 * blanco, invisible. Es la misma clase de descuido que ADR-026 (un color de
 * fondo agregado después de escribir una regla de contraste, sin repasarla
 * contra ese componente nuevo).
 *
 * La variante usa blanco translúcido en vez de un color plano — mismo
 * tratamiento que ya llevan `.franja .etiqueta` y `.sede-hero .insignia`
 * sobre este mismo fondo morado — y SOLO aplica en modo normal: en alto
 * contraste `.franja`/`.sede-hero` ya se vuelven blancos con texto negro
 * (ver más abajo), así que ahí corresponde el mismo cuadro azul genérico que
 * llevan los demás títulos, no uno blanco sobre blanco.
 */
:root[data-destacar-titulos="on"] :is(.franja, .sede-hero) :is(h1, h2, h3) {
  background: rgba(255, 255, 255, 0.18);
  outline-color: rgba(255, 255, 255, 0.8);
}
:root[data-contraste="alto"][data-destacar-titulos="on"]
  :is(.franja, .sede-hero)
  :is(h1, h2, h3) {
  background: var(--acento-tenue);
  outline-color: var(--enlace);
}

/*
 * Segundo hallazgo, misma captura: el contorno de arriba se dibuja 0.3em por
 * fuera del título, y `.etiqueta + h1/h2/h3` le quita al título TODO su
 * margen superior (ADR-025: "la etiqueta y su título son una sola unidad").
 * Sin este ajuste el contorno queda a un dedo del borde de la etiqueta, casi
 * tocándolo. Solo se activa junto con "destacar títulos": el resto del
 * tiempo la etiqueta y el título siguen pegados como se diseñó.
 */
/* biome-ignore lint/style/noDescendingSpecificity: esta regla y la variante
   franja/sede-hero de arriba pueden coincidir en el mismo h2 (la portada
   tiene una `.etiqueta` antes de `.franja h2`), pero fijan propiedades
   distintas (margin-top acá, background/outline-color allá): no compiten,
   así que el orden entre ellas no cambia el resultado. */
:root[data-destacar-titulos="on"] .etiqueta + :is(h1, h2, h3) {
  margin-top: 0.5em;
}

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem);
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 0.5rem;
}
h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

main h2::before {
  content: "";
  flex: none;
  align-self: stretch;
  width: 5px;
  min-height: 1.6em;
  border-radius: 999px;
  background-color: var(--marca-fucsia);
}

/* ---------------------------------------------------------------------------
 * Etiqueta de sección ("eyebrow")
 *
 * Píldora pequeña en mayúsculas encima de un título. Nombra de qué trata el
 * bloque antes de que el titular lo desarrolle, que es como se orientan las
 * referencias de diseño que pidió la IPS. No reemplaza al encabezado: es un
 * `<span>`, no un `<h3>`, para no inventar niveles en el árbol de encabezados
 * que un lector de pantalla recorre.
 * ------------------------------------------------------------------------ */
.etiqueta {
  display: inline-block;
  /* Antes 0.85rem (14px), un valor de antes de la escala de espaciado
     (ADR-027). `.encabezado-pagina .etiqueta` ya la corregía a --e-3 (12px);
     unificado acá para que la separación etiqueta -> título sea la MISMA en
     las 16 páginas, no 14px en la portada y la ficha de sede y 12px en el
     resto. Medido con Playwright, no a ojo: auditar-espacios.mjs. */
  margin-bottom: var(--e-3);
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--borde-tenue);
  border-radius: 999px;
  background: var(--fondo);
  color: var(--enlace);
  font-family: "Source Sans 3", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.franja .etiqueta {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
/* La etiqueta y su título son una sola unidad: sin esto, el margen superior
   del h2 los separa y la etiqueta queda colgando del bloque anterior. */
.etiqueta + h1,
.etiqueta + h2,
.etiqueta + h3 {
  margin-top: 0;
}
/* El aire entre secciones lo aporta la sección, no el título. */
main section > .etiqueta:first-child {
  margin-top: 2.5rem;
}
main .franja > .etiqueta:first-child {
  margin-top: 0;
}

.franja {
  margin: 2.5rem 0;
  padding: clamp(1.75rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 2.5rem);
  border-radius: clamp(20px, 4vw, 36px);
  color: #fff;
  background-color: var(--marca-morado-oscuro); /* blanco encima: 9.93:1 */
}

/* ---------------------------------------------------------------------------
 * Franja profunda con bordes curvos
 *
 * El recurso que da carácter a las referencias: un bloque de color saturado
 * que corta la página, con esquinas muy redondeadas que continúan el lenguaje
 * de ondas de las cintas. Texto claro sobre púrpura institucional; el punto
 * más claro del degradado da 8.05:1 contra blanco (§5.6 pide 4.5:1).
 * ------------------------------------------------------------------------ */
/* Dentro de una banda el aire lo pone la banda, no la franja. */
.banda .franja {
  margin: 0;
}
.franja h2 {
  color: #fff;
  margin-top: 0;
}
/* La regla de acento bajo los títulos se aclara sobre fondo oscuro. */
.franja h2::before {
  background: rgba(255, 255, 255, 0.65);
}
/* Texto introductorio de cada página. */
.entradilla {
  font-size: 1.15rem;
  color: var(--tinta-suave);
  max-width: 46ch; /* medida de lectura cómoda */
  margin: 0 0 1.5rem;
}

.franja .entradilla {
  color: rgba(255, 255, 255, 0.88);
}

/* Franja de "Sedes" en la portada con la fachada de la sede principal de
   fondo (ADR-038). La imagen viene ya difuminada y oscurecida: el píxel más
   claro da 5,72:1 con el blanco encima, medido al generarla. El color de
   fondo queda como respaldo mientras baja la imagen, y es con el que la
   auditoría de contraste calcula. */
.franja--foto {
  background-color: var(--marca-morado-oscuro);
  background-image: url("/imagenes/fondo-sede-principal.webp");
  background-size: cover;
  background-position: center;
}

/* ---------------------------------------------------------------------------
 * Héroe de la portada: texto a la izquierda, burbujas de foto a la derecha
 *
 * Las burbujas circulares vienen de la referencia de August Health. Las fotos
 * son PROVISIONALES y de dominio público — ver public/imagenes/CREDITOS.md.
 * ------------------------------------------------------------------------ */
.heroe {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  /* Solo el margen de ARRIBA y ABAJO: el lateral lo pone `.contenedor`. Antes
     este `padding` de cuatro valores (`… 0 …`) lo anulaba, y en celular el
     título, el botón y los círculos quedaban pegados al borde de la pantalla
     (a 360 px, `left = 0`), mientras el resto de las secciones respiraba 16 px. */
  padding-block: 1.5rem 0.5rem;
}
@media (min-width: 52rem) {
  .heroe {
    grid-template-columns: 1.15fr 1fr;
    gap: 2.5rem;
  }
}

/* ---------------------------------------------------------------------------
 * Fondo de figuras geométricas del héroe de la portada (ADR-038)
 *
 * Reemplaza el fondo claro de rayas en esta sección. Figuras planas en los
 * colores de la paleta (círculo, anillo, cuadrado, triángulo, la cruz de
 * salud, una rejilla de puntos y una medialuna), ubicadas por porcentaje para
 * que se vean tanto en escritorio como en celular. Opacidades bajas medidas
 * contra el título morado: sobre el tinte más fuerte (verde al 30 %) el
 * contraste sigue en 6,7:1, y el resto supera 7:1.
 * ------------------------------------------------------------------------ */
.banda--figuras {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--fondo);
}
.banda--figuras > .contenedor {
  position: relative;
  z-index: 1;
}
.figuras {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.figura {
  position: absolute;
  display: block;
}
.figura--circulo {
  top: -14%;
  left: -9%;
  width: clamp(13rem, 32vw, 30rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--marca-fucsia);
  opacity: 0.1;
}
.figura--anillo {
  top: 5%;
  right: -3.5rem;
  width: clamp(8rem, 16vw, 14rem);
  aspect-ratio: 1;
  border: clamp(14px, 2vw, 26px) solid var(--marca-morado-intenso);
  border-radius: 50%;
  opacity: 0.16;
}
.figura--cuadrado {
  bottom: 7%;
  left: 3%;
  width: clamp(4.5rem, 9vw, 8rem);
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--marca-azul);
  opacity: 0.09;
  transform: rotate(18deg);
}
.figura--triangulo {
  bottom: -1%;
  left: 40%;
  width: clamp(6rem, 11vw, 10rem);
  aspect-ratio: 1.15;
  background: var(--marca-amarillo);
  opacity: 0.28;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.figura--cruz {
  top: 12%;
  left: 46%;
  width: clamp(2.25rem, 3.5vw, 3.25rem);
  aspect-ratio: 1;
  background: var(--marca-verde);
  opacity: 0.3;
  clip-path: polygon(
    35% 0,
    65% 0,
    65% 35%,
    100% 35%,
    100% 65%,
    65% 65%,
    65% 100%,
    35% 100%,
    35% 65%,
    0 65%,
    0 35%,
    35% 35%
  );
}
.figura--puntos {
  top: 72%;
  left: 30%;
  width: clamp(6rem, 12vw, 11rem);
  aspect-ratio: 1.4;
  background-image: radial-gradient(
    var(--marca-lavanda) 2.5px,
    transparent 3px
  );
  background-size: 18px 18px;
  opacity: 0.55;
}
/* En una columna (celular y tableta angosta) el título ocupa el ancho entero
   arriba: la cruz y los puntos se corren a los costados para no montarse
   sobre el texto. */
@media (max-width: 51.99rem) {
  .figura--cruz {
    top: 1.5%;
    right: 8%;
    left: auto;
  }
  .figura--puntos {
    top: auto;
    bottom: 1%;
    left: 2%;
  }
}
.figura--medialuna {
  bottom: -6%;
  right: 22%;
  width: clamp(6rem, 12vw, 11rem);
  aspect-ratio: 2;
  border-radius: 999px 999px 0 0;
  background: var(--marca-morado-oscuro);
  opacity: 0.1;
}

/* ---------------------------------------------------------------------------
 * Video institucional a pantalla completa (ADR-038, ADR-039)
 *
 * Una banda de ancho y alto completos (`svh`: la altura que queda con la barra
 * del navegador visible en el celular, para que no se corte abajo) con el
 * video cubriéndola (`object-fit: cover`). `banda--video` es una banda "de
 * color" para el ritmo vertical (la siguiente recibe su propio aire arriba) y
 * sin relleno propio: el video llega de borde a borde.
 *
 * En una pantalla VERTICAL (celular, tableta de pie) cubrirla con un video
 * horizontal recortaría los lados a una cuarta parte, y el título "SAN JOSÉ
 * I.P.S" que lleva el propio video quedaría cortado. Ahí la banda toma la
 * proporción real del video (16:9) a todo el ancho.
 * ------------------------------------------------------------------------ */
.banda--video {
  padding: 0;
  background: var(--marca-negro);
}
.video-pantalla {
  position: relative;
  height: 100vh;
  min-height: 24rem;
  overflow: hidden;
}
@supports (height: 100svh) {
  .video-pantalla {
    height: 100svh;
  }
}
.video-pantalla video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (orientation: portrait) {
  .video-pantalla {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

/* Control del video: un botón INVISIBLE que cubre todo el video (ADR-041). La
   IPS pidió quitar el botón de pausa; WCAG 2.2.2 sigue pidiendo que un
   movimiento automático de más de 5 s pueda detenerse, así que el propio video
   hace de control: clic o toque lo pausa/reanuda, y con teclado se enfoca con
   Tab. Mientras reproduce no se ve nada; en pausa aparece el triángulo, que es
   también lo que ve quien no recibe la reproducción automática (ahorro de
   datos, conexión 2G, "reducir movimiento"). Neutraliza el estilo global de
   `button`. */
.video-control {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}
.video-control:hover {
  background: none;
}
/* Anillo de foco por DENTRO del video (el exterior lo recorta el overflow) y
   en dos tonos, blanco con borde oscuro, para que se vea sobre un cielo
   claro o una sombra. */
.video-control:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 4px #fff,
    inset 0 0 0 7px var(--marca-negro);
}
.video-control .icono-video {
  width: 4.5rem;
  height: 4.5rem;
  padding: 1.1rem;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgb(22 19 17 / 0.72);
  box-shadow:
    0 0 0 2px rgb(255 255 255 / 0.85),
    0 2px 10px rgb(22 19 17 / 0.45);
}
.video-control.reproduciendo .icono-video {
  display: none;
}

.burbujas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  align-items: center;
  /* Las burbujas "desplazadas" bajan 1,75 rem con `transform`, que no ocupa
     lugar: la última sobresalía de esta caja y se metía en la banda de
     accesos de abajo. Este relleno reserva ese espacio adentro. */
  padding-bottom: 1.75rem;
}
.burbuja {
  margin: 0;
  overflow: hidden;
  border-radius: 999px;
  aspect-ratio: 1;
  background: var(--acento-tenue);
}
/* La segunda burbuja baja un poco: la composición deja de ser una cuadrícula
   rígida y empieza a parecerse al ritmo de la referencia. */
.burbuja--desplazada {
  transform: translateY(1.75rem);
}
@media (prefers-reduced-motion: reduce) {
  .burbuja--desplazada {
    transform: none;
  }
}

/* Aviso de que las fotos no son de la IPS. Va pegado a las burbujas, como un
   pie de imagen, para que se lea junto a lo que describe. Desaparece cuando
   lleguen las fotos propias — ver public/imagenes/CREDITOS.md. */
.aviso-demo {
  grid-column: 1 / -1;
  margin: 2.25rem 0 0;
  font-size: 0.8rem;
  line-height: calc(1.45 * var(--escala-interlineado));
  color: var(--tinta-suave);
  text-align: center;
}

/* Botón principal en forma de píldora (llamado a la acción). */
.boton-principal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  background: var(--enlace);
  color: #fff; /* 9.99:1 */
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.boton-principal:visited {
  color: #fff;
}
.boton-principal:hover,
.boton-principal:focus-visible {
  background: var(--enlace-fuerte);
}
@media (prefers-reduced-motion: reduce) {
  .boton-principal {
    transition: none;
  }
}

/* Variante de contorno: para acciones secundarias junto a un botón principal
   (la ficha de sede tiene varias: llamar, WhatsApp, correo, cómo llegar — solo
   una puede ser la más importante). */
.boton-secundario {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.65rem 1.5rem;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}
.boton-secundario:visited {
  color: inherit;
}
.boton-secundario:hover,
.boton-secundario:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}
@media (prefers-reduced-motion: reduce) {
  .boton-secundario {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
 * Cabecera de la ficha de sede
 *
 * Mismo tratamiento oscuro que la sección "Sedes" de la portada (.franja),
 * para que la ficha se sienta continuación de esa sección y no una página
 * aparte. Ocupa el ancho completo, sin las esquinas redondeadas de la franja:
 * es la cabecera de la página, no una tarjeta flotando dentro de ella.
 * ------------------------------------------------------------------------ */
/* Miga de pan: el camino de vuelta. Regla base; `.sede-hero .migas` la
   repinta para la banda oscura de la ficha de sede. Va ANTES que su variante
   a propósito: al revés, una regla general después de una específica que
   alcanza al mismo elemento es exactamente lo que marca `noDescendingSpecificity`. */
.migas {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  margin: 0 0 var(--e-4);
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--enlace);
  text-decoration: none;
  min-height: 44px;
}
.migas:hover,
.migas:focus-visible {
  text-decoration: underline;
}

.sede-hero {
  background-color: var(--marca-morado-oscuro);
  color: #fff;
}
.sede-hero .migas {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  text-decoration: none;
}
.sede-hero .migas:hover,
.sede-hero .migas:focus-visible {
  color: #fff;
  text-decoration: underline;
}
.sede-hero h1 {
  color: #fff;
  margin: 0 0 0.25rem;
}
.sede-hero .municipio {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.25rem;
}
/* Insignia de estado (una sede próxima a abrir, por ejemplo). */
.insignia {
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: #fdebf2; /* fucsia 8 % */
  /* El fucsia queda en el borde, no en el texto: sobre su propio tinte da
     4.3:1 y no llegaría al mínimo. El morado oscuro da 8.68:1. */
  color: var(--enlace);
  border: 1px solid var(--marca-fucsia);
}

.sede-hero .insignia {
  margin-bottom: 0.75rem;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.sede-hero .acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.sede-hero .boton-principal {
  background: #fff;
  color: var(--enlace); /* 9.93:1 invertido */
}
.sede-hero .boton-principal:hover,
.sede-hero .boton-principal:focus-visible {
  background: rgba(255, 255, 255, 0.85);
}

/* ---------------------------------------------------------------------------
 * Cuerpo de la ficha: dirección y teléfonos por área
 * ------------------------------------------------------------------------ */
.panel-sede {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 46rem) {
  /* Columnas asimétricas, no `1fr 1fr`: la dirección es una línea de texto y
     un enlace —nunca crece—, mientras que las líneas de atención pueden ser
     siete áreas con dos teléfonos cada una. Darles la mitad a cada una dejaba
     media pantalla vacía en la primera y comprimía la segunda. Con 20rem fijos
     para la dirección, la lista de teléfonos se queda con el resto y entra en
     más columnas. */
  .panel-sede {
    grid-template-columns: minmax(0, 20rem) 1fr;
    align-items: start;
  }
}
.prosa h2 {
  margin-top: var(--e-7);
}

.panel h2 {
  margin-top: 0;
  margin-bottom: var(--e-4);
}
/* La barra de acento junto al título es la misma idea que `main h2::before`,
   pero acá rota entre los cuatro colores que ya usa `.tarjeta--color`
   (ADR-025): cada panel de la dupla lleva un color distinto, así que "Misión"
   y "Visión" se distinguen entre sí sin depender de leer el título. El panel
   ES el `<li>` (`<li class="panel">`), no un hijo suyo. */
.dupla > .panel:nth-child(4n + 1) h2::before {
  background-color: var(--marca-fucsia);
}
.dupla > .panel:nth-child(4n + 2) h2::before {
  background-color: var(--marca-azul);
}
.dupla > .panel:nth-child(4n + 3) h2::before {
  background-color: var(--marca-morado-intenso);
}
.dupla > .panel:nth-child(4n + 4) h2::before {
  background-color: var(--marca-verde);
}

.panel-sede .tarjeta h2 {
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
}
/* biome-ignore lint/style/noDescendingSpecificity: `.dupla > .panel h2::before`
   (más arriba) y esta regla nunca compiten por el mismo elemento: una vive en
   la ficha de sede, la otra en quienes-somos. */
.panel-sede .tarjeta h2::before {
  height: 1.3em;
}

.lista-telefonos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.lista-telefonos li {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--borde-tenue);
}
.lista-telefonos li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
/*
 * Hallazgo real (reportado por la IPS con captura): en una sede con muchas
 * áreas (Mocoa: 7), esta lista en una sola columna mide ~720px de alto junto
 * a una tarjeta "Dirección" de ~240px — no es un error de CSS (`.panel-sede`
 * usa `align-items: start`, verificado; ninguna tarjeta se estira para
 * igualar a la otra), es que una tiene mucho más contenido real que la otra.
 * En vez de forzar una igualación artificial, se reduce la altura genuina de
 * ESTA lista: dos columnas en el mismo punto donde `.panel-sede` ya pasa a
 * dos columnas (46rem), así ambas tarjetas quedan en una proporción mucho
 * más razonable sin inventar contenido en la otra.
 */
@media (min-width: 46rem) {
  .lista-telefonos {
    display: grid;
    /* `auto-fit` en vez de dos columnas fijas: con la columna ancha que le
       deja la dirección, entran tres en escritorio y dos en tableta, sin una
       media query por cada tamaño. */
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    column-gap: 1.5rem;
    row-gap: 0.75rem;
  }
  /* El borde por ítem dibujaba una fila continua en una sola columna; con dos
     columnas ya no marca una fila real, así que la separación pasa a hacerla
     el espacio entre filas (`row-gap`), no una línea. */
  .lista-telefonos li {
    padding: 0;
    border-bottom: none;
  }
}
.lista-telefonos .area {
  display: block;
  font-size: 0.85rem;
  color: var(--tinta-suave);
  margin-bottom: 0.15rem;
  /* Ocupa su propia fila: los números del área van debajo, no al lado. */
  flex: 0 0 100%;
}
/*
 * Un área con varios números (WhatsApp en Mocoa, Atención al usuario en
 * Villagarzón) los dibujaba pegados: los enlaces son `inline-flex` y no había
 * nada entre uno y otro, así que el icono del segundo tocaba el final del
 * primero y los dos parecían uno solo. Cada línea es ahora una fila que ajusta
 * a la siguiente cuando no caben, con un espacio fijo entre números. Ese
 * espacio también separa los objetivos táctiles (WCAG 2.5.8).
 */
.lista-telefonos li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Si la fila se estira (columnas de la rejilla), el contenido queda arriba:
     centrado, el número se separaba de su título. */
  align-content: flex-start;
  column-gap: 1.75rem;
}
.lista-telefonos a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  min-height: 44px;
  color: var(--enlace);
}

.lista-telefonos a svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  color: var(--tinta-suave);
}

/* Próxima apertura: mismo héroe oscuro, sin acciones porque no hay nada que
   contactar todavía. El mensaje ocupa el lugar de las acciones. */
.sede-hero .aviso-proxima {
  max-width: 42ch;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
}

/* Cabecera y navegación: se apilan en pantallas angostas, sin desbordar. */
/* Compartida por la nav de cabecera y el pie: mismo objetivo táctil de 44px
   (igual que .accesos y button). Va ANTES que sus variantes
   `.sitio-cabecera .enlace-nav` y `.sitio-pie .enlace-nav`, para que la
   cascada se resuelva por orden y no por especificidad. */
.enlace-nav {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.25rem;
}

.sitio-cabecera {
  border-bottom: 1px solid var(--borde-tenue);
  background: var(--fondo);
}

/* Cabecera: logo arriba y navegación centrada debajo. Se apilan a propósito en
   vez de ponerse lado a lado — con siete enlaces, en una fila quedarían
   apretados contra el logo justo en las anchuras intermedias. */
.nav-principal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.marca {
  display: inline-flex;
  padding: 0.25rem;
  border-radius: 8px;
}
/* Listas de navegación: envuelven en vez de desbordar (clave a 360 px). */
.lista-plana {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.nav-principal .lista-plana {
  justify-content: center;
}
.sitio-cabecera .enlace-nav {
  border-radius: 8px;
  padding-inline: 0.6rem;
  text-decoration: none;
  font-weight: 600;
  color: var(--tinta);
}
.sitio-cabecera .enlace-nav:hover,
.sitio-cabecera .enlace-nav:focus-visible {
  color: var(--enlace);
  background: var(--acento-tenue);
}
/* Página actual: se marca con `aria-current` en el marcado, así el estado es
   el mismo para quien ve y para quien usa lector de pantalla. */
.sitio-cabecera .enlace-nav[aria-current="page"] {
  color: var(--enlace);
  background: var(--acento-tenue);
  box-shadow: inset 0 -2px 0 var(--enlace);
}

/* ---------------------------------------------------------------------------
 * Atención rápida en la cabecera: cita, PQRS y encuesta (ADR-036)
 *
 * Son las funciones que más se usan y hasta ahora solo se alcanzaban bajando
 * en la portada. Un único bloque, dos presentaciones:
 *  - escritorio: tres botones centrados bajo el menú;
 *  - celular: barra fija abajo, tres columnas iguales con icono sobre texto,
 *    al alcance del pulgar (el patrón de las apps). Va `fixed` aunque viva
 *    dentro de la cabecera (ningún ancestro tiene transform ni filter).
 * ------------------------------------------------------------------------ */
.atencion-rapida {
  margin-top: var(--e-3);
  padding-bottom: var(--e-3);
}
.atencion-rapida ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-2) var(--e-3);
}
.atencion-rapida .accion-rapida {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: 0.4rem 1.15rem;
  border: 2px solid var(--enlace);
  border-radius: 999px;
  background: var(--fondo);
  color: var(--enlace); /* 9.93:1 sobre blanco */
  font-weight: 700;
  text-decoration: none;
}
.atencion-rapida .accion-rapida svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}
/* Cita = acción principal (relleno); las otras dos, contorno. */
.atencion-rapida .accion-rapida--principal {
  background: var(--enlace);
  color: #fff; /* 9.93:1 */
}
.atencion-rapida .accion-rapida:hover,
.atencion-rapida .accion-rapida:focus-visible {
  background: var(--acento-tenue);
}
.atencion-rapida .accion-rapida--principal:hover,
.atencion-rapida .accion-rapida--principal:focus-visible {
  background: var(--enlace-fuerte);
  border-color: var(--enlace-fuerte);
}
.atencion-rapida .accion-rapida[aria-current="page"] {
  box-shadow:
    0 0 0 3px var(--acento-tenue),
    0 0 0 5px var(--enlace);
}

@media (max-width: 45.99rem) {
  .atencion-rapida {
    position: fixed;
    inset: auto 0 0;
    z-index: 25;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    background: var(--fondo);
    border-top: 1px solid var(--borde-tenue);
    box-shadow: 0 -6px 18px -10px rgba(22, 19, 17, 0.35);
  }
  .atencion-rapida ul {
    flex-wrap: nowrap;
    gap: 0;
  }
  /* `auto` y no `0`: con tres columnas iguales, la etiqueta más larga
     ("Solicitar cita") se apretaba contra el borde cuando la persona agranda
     la letra. Repartir según el contenido le da sitio a cada una. */
  .atencion-rapida li {
    flex: 1 1 auto;
    min-width: 0;
  }
  .atencion-rapida .accion-rapida,
  .atencion-rapida .accion-rapida--principal {
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.4rem 0.5rem;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--enlace);
    font-size: 0.8125rem;
    line-height: 1.15;
    text-align: center;
  }
  /* Los tres iconos comparten la misma caja (con el mismo relleno), así las
     tres etiquetas quedan a la misma altura. La cita, la principal, lleva su
     icono relleno en un círculo; las otras dos, sin relleno. */
  .atencion-rapida .accion-rapida svg {
    box-sizing: content-box;
    padding: 0.2rem;
    border-radius: 50%;
  }
  .atencion-rapida .accion-rapida--principal svg {
    background: var(--enlace);
    color: #fff;
  }
  .atencion-rapida .accion-rapida:hover,
  .atencion-rapida .accion-rapida:focus-visible,
  .atencion-rapida .accion-rapida--principal:hover,
  .atencion-rapida .accion-rapida--principal:focus-visible {
    background: var(--acento-tenue);
    border-color: transparent;
  }
  .atencion-rapida .accion-rapida[aria-current="page"] {
    background: var(--acento-tenue);
    box-shadow: inset 0 3px 0 var(--enlace);
  }
  /* La barra tapa el pie de la página: se reserva su alto abajo. En rem, para
     que crezca junto con el texto si la persona agranda la letra. */
  .con-atencion-rapida {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }
  /* El botón de accesibilidad flota arriba de la barra, no debajo. */
  .panel-accesibilidad {
    bottom: calc(4.5rem + var(--e-3) + env(safe-area-inset-bottom));
  }
  .paa-bandeja {
    max-height: min(34rem, calc(100vh - 13rem));
  }
}
/* Teclado en pantalla abierto o celular horizontal: casi no queda pantalla, y
   una barra fija se comería el formulario que se está llenando. */
@media (max-width: 45.99rem) and (max-height: 32rem) {
  .atencion-rapida {
    position: static;
    box-shadow: none;
  }
  .con-atencion-rapida {
    padding-bottom: 0;
  }
  .panel-accesibilidad {
    bottom: var(--e-4);
  }
}

/* Cabecera con más aire en pantallas anchas (ADR-040). La IPS pidió separar un
   poco el menú: en escritorio sobra pantalla y todo se veía apretado al centro.
   Solo desde 46 rem — en celular la cabecera ya ocupa mucho y se queda como
   está. Va DESPUÉS de las reglas base para ganarles por orden. */
@media (min-width: 46rem) {
  .sitio-cabecera > .contenedor {
    padding-block: var(--e-3);
  }
  .nav-principal {
    gap: var(--e-4);
  }
  .nav-principal .lista-plana {
    gap: var(--e-2) var(--e-5);
  }
  .sitio-cabecera .enlace-nav {
    padding-inline: var(--e-4);
    font-size: 1.0625rem;
  }
  .atencion-rapida {
    margin-top: var(--e-4);
    padding-bottom: var(--e-4);
  }
  .atencion-rapida ul {
    gap: var(--e-3) var(--e-5);
  }
  .atencion-rapida .accion-rapida {
    min-height: 48px;
    padding-inline: 1.5rem;
  }
}

/* ---------------------------------------------------------------------------
 * Accesos operativos de la portada (RF-001)
 *
 * Son los tres caminos que el SRS pone en el centro del sitio: cita, PQRS y
 * encuesta. Se diseñan como tarjetas y no como enlaces de una lista porque el
 * criterio de aceptación es que se alcancen sin scroll horizontal a 360 px y
 * sin buscarlos — el tamaño ES el requisito, no un gusto.
 * ------------------------------------------------------------------------ */
/* Tres columnas separadas por una línea vertical, sin cajas: el patrón con el
   que shaio.org pone sus accesos rápidos. Se diferencia a propósito de las
   tarjetas de color de Servicios — si todo fuera tarjeta, nada destacaría. */
.lista-accesos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 46rem) {
  .lista-accesos {
    grid-template-columns: repeat(3, 1fr);
  }
  /* El divisor va entre columnas, nunca al borde del bloque. */
  .lista-accesos > li + li {
    border-left: 1px solid rgba(112, 12, 139, 0.18);
  }
}
.lista-accesos > li {
  display: flex;
}

/* Las tarjetas de una misma fila igualan altura. Sin esto cada una termina
   donde le alcanza el contenido y la fila se ve dentada. */
.rejilla > li {
  display: flex;
}

.tarjeta li {
  margin-bottom: 0.15rem;
}

.tarjeta--color li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.95rem;
  margin: 0;
}

.lista-documentos li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  /* Todas las filas miden lo mismo tengan o no enlace. Sin esto, la fila con
     PDF crece hasta los 44 px del objetivo táctil y la vacía se queda corta:
     el listado baja a saltos en vez de con un ritmo parejo. */
  min-height: 3.5rem;
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--borde-tenue);
}

/*
 * En una sola columna el divisor es horizontal. Va dentro de su propia media
 * query, no como regla base, para que las dos versiones del divisor NUNCA
 * coincidan: como regla base quedaba, tras el reordenamiento por
 * especificidad de ADR-027, DESPUÉS del `@media (min-width: 46rem)` que la
 * anulaba, y en escritorio se dibujaban los dos bordes a la vez. Acotadas por
 * ancho, el orden entre ellas deja de importar.
 */
@media (max-width: 45.99rem) {
  .lista-accesos > li + li {
    border-top: 1px solid rgba(112, 12, 139, 0.18);
  }
}

.lista-accesos a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1.5rem 1.25rem;
  text-decoration: none;
  color: var(--tinta);
  min-height: 44px; /* objetivo táctil */
  border-radius: 12px;
  transition: background-color 0.15s ease;
}
.lista-accesos a:hover,
.lista-accesos a:focus-visible {
  background-color: rgba(255, 255, 255, 0.75);
}
/* Icono en círculo con borde, no en cuadrado relleno: el mismo trazo fino de
   la referencia. */
.lista-accesos .icono-grande {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid var(--enlace);
  border-radius: 50%;
  color: var(--enlace);
  background-color: var(--fondo);
}

.lista-accesos .icono-grande svg {
  width: 1.75rem;
  height: 1.75rem;
}
.lista-accesos .titulo-acceso {
  font-family:
    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--enlace);
}
.lista-accesos a:hover .titulo-acceso,
.lista-accesos a:focus-visible .titulo-acceso {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lista-accesos .detalle-acceso {
  font-size: 0.95rem;
  color: var(--tinta-suave);
  max-width: 26ch;
}
@media (prefers-reduced-motion: reduce) {
  .lista-accesos a {
    transition: none;
  }
}

/* Icono de cada acceso: SVG en el marcado, coloreado desde acá. Decorativo
   (aria-hidden): el texto del enlace ya dice a dónde lleva. */
.icono {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.55rem;
  border-radius: 10px;
  color: var(--enlace);
  background: var(--acento-tenue);
}

/* ---------------------------------------------------------------------------
 * Rejilla y tarjetas de contenido
 * ------------------------------------------------------------------------ */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rejilla > li > * {
  width: 100%;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.15rem;
  background: var(--fondo);
  border: 1px solid var(--borde-tenue);
  border-radius: 14px;
  box-shadow: var(--sombra);
}
/* Tarjeta que es en sí misma un enlace: toda la superficie es el objetivo. */
a.tarjeta {
  text-decoration: none;
  color: var(--tinta);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}
a.tarjeta:hover,
a.tarjeta:focus-visible {
  border-color: var(--enlace);
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(26, 26, 26, 0.06),
    0 16px 30px -18px rgba(74, 42, 122, 0.7);
}
/* La regla base va ANTES que su variante más específica: al revés, el orden
   depende de la especificidad para resolverse y es justo la clase de conflicto
   que advierte la cabecera de este archivo. */
.tarjeta .titulo-tarjeta {
  font-family:
    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
}
.tarjeta--color .titulo-tarjeta {
  color: #fff;
  font-size: 1.25rem;
}

a.tarjeta .titulo-tarjeta {
  color: var(--enlace);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Cuando el título ES el enlace (ficha de sede de la portada) y no un rótulo
   dentro de una tarjeta enlazada, el objetivo táctil es el título mismo.
   Medido en el navegador daba 28 px; §5.6 pide 44. */
a.titulo-tarjeta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--enlace);
}
.tarjeta .meta {
  color: var(--tinta-suave);
  font-size: 0.95rem;
}
.tarjeta ul {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
  color: var(--tinta-suave);
}

/* Tarjetas con tinte de color: cada acceso operativo se distingue de un
   vistazo, como en las referencias. Los tres tintes se midieron contra el
   texto que llevan encima — 15.24:1 el título, 7.67:1 el detalle (§5.6). */
.accesos li:nth-child(1) a {
  background: #fdebf2; /* fucsia 8 % — negro 16.14:1 */
}
.accesos li:nth-child(2) a {
  background: #f3ecf8;
}
.accesos li:nth-child(3) a {
  background: #eceefb;
}
.accesos li:nth-child(1) .icono {
  background: rgba(230, 3, 93, 0.12);
}
.accesos li:nth-child(2) .icono {
  background: rgba(148, 3, 195, 0.12);
}
.accesos li:nth-child(3) .icono {
  background: rgba(1, 8, 181, 0.12);
}

/* Tarjetas dentro de la franja oscura: superficie clara sobre el púrpura. */
.franja .tarjeta {
  background: rgba(255, 255, 255, 0.97);
  border-color: transparent;
}
.franja a.tarjeta:hover,
.franja a.tarjeta:focus-visible {
  border-color: #fff;
}

/* ---------------------------------------------------------------------------
 * Tarjetas de color sólido (patrón de las referencias)
 *
 * Cada categoría de servicios toma un color de la paleta y lista adentro sus
 * servicios reales, en vez de ser una caja blanca con una sola línea. Los
 * cuatro colores del ciclo se eligieron por contraste con texto blanco:
 * morado oscuro 9.93:1, azul 12.33:1, morado intenso 6.86:1, café 6.27:1.
 * El fucsia queda fuera del ciclo a propósito: con 4.63:1 no sostiene la
 * lista de servicios, que es texto pequeño.
 *
 * El color se asigna por posición (`nth-child`), no por el nombre de la
 * categoría: la IPS agrega y reordena categorías desde el panel, y el diseño
 * no puede depender de cómo se llamen.
 * ------------------------------------------------------------------------ */
.tarjeta--color {
  color: #fff;
  border-color: transparent;
}
.rejilla > li:nth-child(4n + 1) .tarjeta--color {
  background-color: var(--marca-morado-oscuro);
}
.rejilla > li:nth-child(4n + 2) .tarjeta--color {
  background-color: var(--marca-azul);
}
.rejilla > li:nth-child(4n + 3) .tarjeta--color {
  background-color: var(--marca-morado-intenso);
}
.rejilla > li:nth-child(4n + 4) .tarjeta--color {
  background-color: var(--marca-cafe);
}
.tarjeta--color ul {
  color: rgba(255, 255, 255, 0.92);
  list-style: none;
  padding-left: 0;
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
/* Viñeta propia: un punto sólido, no el marcador del navegador. */
.tarjeta--color li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------------------------
 * Ficha de sede en la portada
 *
 * Lleva dirección y teléfono directo, no solo el nombre. No es densidad
 * decorativa: el criterio de éxito del SRS §2 es que el paciente encuentre el
 * teléfono de su sede "en menos de 3 interacciones desde la portada", y así
 * son cero.
 * ------------------------------------------------------------------------ */
.sede-ficha {
  gap: 0.45rem;
}
.sede-ficha .direccion {
  color: var(--tinta-suave);
  font-size: 0.95rem;
}
.sede-ficha .telefono {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  margin-top: 0.35rem;
  min-height: 44px; /* objetivo táctil: se toca para llamar */
  font-weight: 600;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--enlace);
}
.sede-ficha .telefono svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.sede-ficha .area-telefono {
  display: block;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--tinta-suave);
}
.sede-ficha .ver-ficha {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  align-self: flex-start;
  min-height: 44px; /* medido en 35 px antes de esto (§5.6) */
  margin-top: auto;
  font-weight: 600;
  color: var(--enlace);
}

/* Fecha de una novedad: tabular para que alineen entre sí. */
.fecha {
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
  font-size: 0.9rem;
}

/* Quien pide menos movimiento no recibe desplazamientos ni transiciones. */
@media (prefers-reduced-motion: reduce) {
  .accesos a,
  a.tarjeta {
    transition: none;
  }
  .accesos a:hover,
  .accesos a:focus-visible,
  a.tarjeta:hover,
  a.tarjeta:focus-visible {
    transform: none;
  }
}

/* Formularios: nada más ancho que su contenedor (evita scroll horizontal). */
label {
  display: inline-block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  min-width: 1.1rem;
}
fieldset {
  border: 1px solid var(--borde);
  border-radius: 4px;
  margin: 0 0 1rem;
}
fieldset label {
  font-weight: 400;
  margin-right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Tablas del panel: desbordan dentro de su propio contenedor, no en la página. */
.tabla-envoltorio {
  overflow-x: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  border: 1px solid var(--borde);
  padding: 0.4rem 0.6rem;
  text-align: left;
}
th {
  background: var(--suave);
}

/* Estados: el color va en el borde y el fondo; el TEXTO va en tinta.
   El fucsia (4.63:1) y el verde (4.09:1) de la paleta no llegan al 4.5:1 sobre
   su propio tinte, así que pintar el texto con ellos sería ilegible justo en
   el mensaje que más importa leer. Además WCAG 1.4.1 pide que el significado
   no dependa solo del color: acá lo llevan el borde, el icono del rol y el
   propio texto. */
/* El borde grueso de un solo lado era una barra de color haciendo de icono.
   Ahora el significado lo lleva un icono real (un SVG en el marcado, no un
   glifo de texto), y el borde vuelve a 1 px alrededor. Sigue sin depender del
   color: icono + borde + el propio texto (WCAG 1.4.1). */
[role="alert"],
[role="status"] {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  max-width: var(--medida-lectura);
  margin: 0 0 var(--e-5);
  padding: var(--e-3) var(--e-4);
  border: 1px solid;
  border-radius: 12px;
  color: var(--tinta);
}
[role="alert"] {
  border-color: var(--alerta);
  background: #fde6ef; /* fucsia 10 % — tinta 15.63:1 */
}
[role="status"] {
  border-color: var(--ok);
  background: #e4f2e4; /* verde 12 % — tinta 15.96:1 */
}

/* Iba en `--suave` (crema): el pie es lo último que se ve en TODA página, así
   que heredaba el mismo tono que ya se había corregido en la cabecera y en
   las secciones secundarias. Pasa a `--acento-tenue` para que ningún parche
   beige quede sin corregir en el sitio. */
.sitio-pie {
  border-top: 1px solid var(--borde-tenue);
  background: var(--acento-tenue);
  margin-top: 2.5rem;
  padding-block: var(--e-8);
}
/* Tres columnas por tema, no una fila de enlaces: el patrón de las
   referencias del sector (Clínica Universitaria Colombia, Mayo Clinic).
   `auto-fit`/`minmax` en vez de `1fr 1fr 1fr` fijo: a 360 px las tres se
   apilan solas, sin una media query aparte. */
.pie-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--e-6) var(--e-5);
}
/* biome-ignore lint/style/noDescendingSpecificity: `.panel-sede .tarjeta
   h2` (más específica, en la ficha de sede) y esta regla nunca compiten por
   el mismo elemento: el pie de página no tiene ningún `.panel-sede` dentro. */
.pie-columnas h2 {
  margin: 0 0 var(--e-3);
  font-family: "Source Sans 3", sans-serif;
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.pie-columnas .lista-plana {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-2);
}
.sitio-pie .enlace-nav {
  color: var(--enlace);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.sitio-pie .enlace-nav:hover,
.sitio-pie .enlace-nav:focus-visible {
  border-bottom-color: currentColor;
}
.pie-legal {
  margin-top: var(--e-7);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borde-tenue);
}
.pie-legal small {
  display: block;
  color: var(--tinta-suave);
}

/* ---------------------------------------------------------------------------
 * Bloque de apertura de la portada
 * ------------------------------------------------------------------------ */
.portada-encabezado {
  padding: 1.5rem 0 0.5rem;
}
.portada-encabezado h1 {
  /* Color plano de la paleta, como el nombre en el logo institucional. */
  color: var(--marca-morado-oscuro);
}
@supports not (background-clip: text) {
  .portada-encabezado h1 {
    color: var(--enlace);
    -webkit-text-fill-color: currentColor;
  }
}

/* Separación entre secciones de contenido. Cuando la sección ES una banda, el
   aire ya lo pone la banda: sumarle margen deja huecos muertos entre bloques,
   que es lo que hacía ver la portada desarmada. */
main section {
  margin-bottom: 1.5rem;
}
main section.banda,
main section:last-child {
  margin-bottom: 0;
}

/* Enlace de "ver todo" al pie de una sección. */
.ver-mas {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.9rem;
  font-weight: 600;
  min-height: 44px;
}

/* ===========================================================================
 * COMPONENTES DE PÁGINA INTERIOR
 *
 * Hasta acá el diseño vivía en la portada y en la ficha de sede; el resto del
 * sitio era un `<h1>` y párrafos sueltos sobre fondo blanco. Estos componentes
 * le dan a cada página la misma estructura de banda + contenedor, y aplican
 * la escala de espaciado de arriba en vez de valores sueltos.
 *
 * El criterio de ritmo es el mismo en todos: los elementos de un mismo grupo
 * quedan pegados (--e-1 a --e-3) y la separación entre grupos es generosa
 * (--e-5 a --e-7). Es la diferencia entre ambos lo que deja leer la jerarquía
 * sin comparar tamaños de letra.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * Encabezado de página
 *
 * El bloque que abre toda página interior. Es el equivalente sobrio del héroe
 * de la portada: misma estructura (banda a ancho completo, contenido acotado
 * adentro) pero en la superficie cálida, para que no compita con la portada
 * ni con la banda oscura de la ficha de sede.
 * ------------------------------------------------------------------------ */
/*
 * Antes usaba `--suave` (crema): el mismo tono que el estado "en
 * preparación" de más abajo, así que cabecera y aviso se fundían en una sola
 * mancha beige — genérica, sin firma. `--acento-tenue` (morado oscuro al 7 %)
 * es igual de sutil como fondo pero es la superficie fría de la marca, no la
 * cálida: separa visualmente esta banda del `.vacio` que puede venir debajo,
 * y el borde superior sólido es la única firma de color que necesita, sin
 * degradados (ADR-024).
 */
.encabezado-pagina {
  background: var(--acento-tenue);
  border-top: 4px solid var(--marca-fucsia);
  border-bottom: 1px solid var(--borde-tenue);
  padding-block: clamp(var(--e-6), 5vw, var(--e-8));
}
.encabezado-pagina h1 {
  margin: 0;
}
/* Más aire encima del título que debajo: el título pertenece a lo que sigue,
   no a lo que lo precede. Por eso el margen lo pone la etiqueta, no el h1. */
.encabezado-pagina .entradilla {
  max-width: 62ch;
  margin: var(--e-4) 0 0;
}
.encabezado-pagina .migas {
  margin-bottom: var(--e-2);
}

/* ---------------------------------------------------------------------------
 * Prosa
 *
 * Columna de lectura para los textos largos que vienen de la base de datos:
 * quiénes somos, el aviso de privacidad, el cuerpo de una novedad.
 *
 * El ritmo de párrafo lo da SOLO la separación vertical, no la sangría de
 * primera línea: usar las dos marca dos veces el mismo límite. El interlineado
 * es 1.7 porque la medida es ancha (68 caracteres); una columna angosta se
 * leería apretada con ese mismo valor.
 * ------------------------------------------------------------------------ */
.prosa {
  max-width: var(--medida-lectura);
}
.prosa p {
  margin: 0 0 var(--e-5);
  line-height: calc(1.7 * var(--escala-interlineado));
}
/* El primer párrafo entra un punto más grande: hace de entrada al texto sin
   necesidad de escribir un resumen aparte que nadie mantendría al día. */
.prosa > p:first-of-type {
  font-size: var(--t-realce);
  color: var(--tinta-suave);
}
.prosa p:last-child {
  margin-bottom: 0;
}

/* Dupla: dos paneles hermanos de igual peso (misión y visión). En una sola
   columna cuando no caben, sin que ninguno se vuelva el principal. */
.dupla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--e-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.panel {
  /* Antes var(--e-5) = 24px: con un h2 de ~26px de alto, el título casi
     tocaba el borde de la tarjeta. e-6 (32px) le da al título aire real. */
  padding: var(--e-6);
  background: var(--fondo);
  border: 1px solid var(--borde-tenue);
  border-radius: 14px;
  box-shadow: var(--sombra);
}
.panel p {
  margin: 0 0 var(--e-3);
  line-height: calc(1.7 * var(--escala-interlineado));
}
.panel p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Listado de documentos (estados financieros y demás históricos)
 *
 * Eran viñetas con "2016: Ver PDF". Ahora es una tabla de lectura: el período
 * a la izquierda, la acción a la derecha, una línea por fila. Los períodos sin
 * documento se quedan en la lista a propósito (RF-005 pide el histórico
 * completo desde 2016) pero se leen como huecos, no como enlaces rotos.
 * ------------------------------------------------------------------------ */
.lista-documentos {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 44rem;
  border-top: 1px solid var(--borde-tenue);
}
.periodo-documento {
  font-family:
    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-rotulo);
  font-weight: 700;
}
.lista-documentos .no-disponible {
  font-size: var(--t-meta);
  color: var(--tinta-suave);
}

/* ---------------------------------------------------------------------------
 * Formularios (PQRS y encuesta)
 *
 * El ritmo es lo que hace legible un formulario largo: la etiqueta va pegada a
 * su campo (--e-1) y entre un campo y el siguiente hay aire (--e-5). Esa
 * diferencia dice, sin instrucciones, qué etiqueta manda sobre qué casilla.
 * Antes todo iba en `<p>` con el mismo margen y los campos se leían como una
 * lista indiferenciada.
 * ------------------------------------------------------------------------ */
.formulario {
  max-width: 42rem;
}
.campo {
  margin: 0 0 var(--e-5);
}
/* La etiqueta ocupa su propia línea. Antes el marcado lo conseguía con un
   `<br />` entre la etiqueta y el campo: un salto de línea tipográfico
   haciendo de estructura. Ahora lo dice el CSS y el marcado queda limpio. */
.campo label {
  display: block;
  margin-bottom: var(--e-1);
}
/* Texto de ayuda de un campo o de un grupo de campos. Se apoya siempre en
   `aria-describedby` desde el control, para que también se anuncie al
   recorrer el formulario con lector de pantalla y no solo al verlo. */
.ayuda {
  display: block;
  margin: var(--e-1) 0 0;
  font-size: var(--t-meta);
  color: var(--tinta-suave);
  font-weight: 400;
}
/* Cuando la ayuda describe al grupo entero va encima de los campos, no debajo. */
.pregunta > .ayuda {
  margin: 0 0 var(--e-4);
}
/* Casilla de verificación: el cuadro y su texto son un solo grupo, y el área
   que se puede tocar llega a los 44 px que pide §5.6 aunque el cuadro sea
   pequeño. */
.campo-casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin: 0 0 var(--e-6);
  padding: var(--e-3) var(--e-4);
  max-width: var(--medida-lectura);
  background: var(--suave);
  border: 1px solid var(--borde-tenue);
  border-radius: 12px;
  font-weight: 400;
  line-height: calc(1.5 * var(--escala-interlineado));
}
.campo-casilla input {
  flex: none;
  /* 24 px: el objetivo real es la etiqueta entera, que mide más de 44, pero
     el cuadro solo también llega al mínimo de WCAG 2.5.8. */
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.05rem;
}

/* Escala de satisfacción: cinco objetivos táctiles reales en fila, no cinco
   radios diminutos. El estado marcado se ve por relleno Y por borde, nunca
   solo por color (WCAG 1.4.1). */
.escala {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0;
}
.escala label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--e-3);
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--fondo);
  font-weight: 600;
  cursor: pointer;
}
.escala label:hover {
  border-color: var(--enlace);
}
/* `:has` deja marcar la opción elegida sin una línea de JavaScript, que es
   justo lo que la CSP estricta (§5.3.5) hace imposible incrustar acá. */
.escala label:has(input:checked) {
  background: var(--enlace);
  border-color: var(--enlace);
  color: #fff;
}
.escala label:has(input:focus-visible) {
  outline: 3px solid var(--enlace);
  outline-offset: 2px;
}
.escala input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.escala-extremos {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  /* Exactamente el ancho de la fila de la escala: 5 casillas de 44 px más 4
     huecos de 8 px. Así "Muy satisfecho" cae bajo el 5 y no en el aire. */
  max-width: calc(5 * 44px + 4 * var(--e-2));
  margin: var(--e-2) 0 0;
  font-size: var(--t-meta);
  color: var(--tinta-suave);
}
.pregunta {
  margin: 0 0 var(--e-6);
  padding: 0;
  border: 0;
}
/* El título del grupo pesa más que la etiqueta de un campo suelto, y el aire
   de arriba lo separa del campo anterior. Es lo que lo hace leerse como grupo
   sin encerrarlo en una caja: primero proximidad, después contenedores. */
.pregunta legend {
  padding: 0;
  margin-bottom: var(--e-2);
  font-family:
    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: var(--t-rotulo);
}
.formulario .pregunta {
  margin-top: var(--e-7);
}
/* Dentro del grupo los campos van más juntos que fuera: la diferencia entre
   los dos huecos es la que dice dónde empieza y termina el grupo. */
.pregunta .campo {
  margin-bottom: var(--e-4);
}
.pregunta .campo:last-of-type {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Canales de contacto (solicitud de cita por WhatsApp)
 * ------------------------------------------------------------------------ */
.canal {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  height: 100%;
  padding: var(--e-5);
  background: var(--fondo);
  border: 1px solid var(--borde-tenue);
  border-radius: 14px;
  box-shadow: var(--sombra);
}
.canal .nombre-canal {
  font-family:
    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-rotulo);
  font-weight: 700;
}
.canal .municipio-canal {
  font-size: var(--t-meta);
  color: var(--tinta-suave);
}
/* El botón se va al fondo de la tarjeta: con nombres de sede de largo distinto
   las tarjetas quedan desparejas y los botones bailan de altura. */
.canal .boton-secundario {
  margin-top: auto;
  align-self: flex-start;
}

/* ---------------------------------------------------------------------------
 * Páginas de error (404 y 500)
 *
 * Una página de error es una página con una sola tarea: volver a un sitio
 * útil. Por eso las salidas son enlaces de acción y no una lista de viñetas.
 * ------------------------------------------------------------------------ */
.pagina-error {
  max-width: 34rem;
}
.codigo-error {
  display: block;
  font-family:
    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(3rem, 2rem + 6vw, 5rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--marca-fucsia);
}
.pagina-error h1 {
  margin-top: var(--e-3);
}
.pagina-error p {
  line-height: calc(1.7 * var(--escala-interlineado));
}
.salidas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin: var(--e-6) 0 0;
  padding: 0;
  list-style: none;
}

/* ---------------------------------------------------------------------------
 * Novedades
 * ------------------------------------------------------------------------ */
.novedad-cuerpo {
  max-width: var(--medida-lectura);
}
/*
 * Estado vacío: una franja profunda, no una tarjeta pálida.
 *
 * Dos versiones anteriores de este mismo bloque —un rectángulo de borde
 * punteado, después una tarjeta blanca con borde fino— seguían leyéndose como
 * "placeholder de maqueta" según la propia IPS: correctas en el detalle,
 * genéricas en el conjunto. Lo que sí se reconoce como propio del sitio es
 * `.franja` (ADR-022, tomado de August Health/Vibrants): morado sólido,
 * esquinas muy curvas, texto blanco. En vez de inventar un tercer lenguaje
 * para "no hay contenido todavía", este usa el mismo que ya lleva la portada
 * y la ficha de sede — angosto y centrado, no una sección completa, porque acá
 * es un aviso puntual, no un bloque de contenido.
 */
.vacio {
  max-width: 26rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 2.5rem) clamp(1.5rem, 4vw, 2.25rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  text-align: center;
  color: #fff;
  background-color: var(--marca-morado-oscuro); /* blanco encima: 9.93:1 */
  border-radius: clamp(20px, 4vw, 32px);
}
.vacio .icono-vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
}
.vacio p {
  margin: 0;
}

/* Nota al pie de una página legal: la versión del documento. */
.nota-version {
  max-width: var(--medida-lectura);
  margin: var(--e-7) 0 0;
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde-tenue);
  font-size: var(--t-meta);
  color: var(--tinta-suave);
}

/* ===========================================================================
 * MODO DE ALTO CONTRASTE  (siempre al final del archivo)
 *
 * Por qué está acá abajo y no en medio de la hoja, que es donde estaba:
 *
 * Estas reglas son anulaciones. Una anulación solo gana si es más específica
 * que la regla que anula, o si —con la misma específicidad— viene después.
 * Mientras el bloque vivía arriba, cada componente nuevo se definía DESPUÉS de
 * sus propias anulaciones, y bastaba con que un componente igualara la
 * especificidad para que el alto contraste dejara de aplicarse en silencio.
 *
 * No es teórico: así se produjo el fallo que reportó la IPS, en el que las
 * tarjetas de servicios quedaban con texto blanco sobre fondo blanco (1.00:1)
 * con el alto contraste activado. `.tarjeta--color` se agregó a la hoja
 * después del bloque de anulaciones y nadie lo notó hasta medirlo en el sitio
 * desplegado. Con el bloque al final, un componente nuevo no puede colarse
 * por debajo.
 *
 * Regla para quien edite esta hoja: todo selector con `data-contraste="alto"`
 * va en esta sección, nunca junto al componente que anula.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * Fotos propias de la IPS en "Quiénes somos" (ADR-034)
 *
 * Foto grupal a todo el ancho del contenedor y galería de instalaciones en
 * rejilla que se reacomoda sola: 4 columnas en escritorio, 2 en tableta, 1
 * en celular, sin puntos de corte a mano. `width`/`height` en el marcado
 * reservan el espacio; `height: auto` mantiene la proporción al escalar.
 * ------------------------------------------------------------------------ */
.foto-equipo {
  margin: 0;
}
.imagen-equipo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: var(--sombra);
}
.foto-equipo figcaption {
  margin-top: var(--e-3);
  font-size: var(--t-meta);
  color: var(--tinta-suave);
}

.galeria {
  list-style: none;
  margin: var(--e-5) 0 var(--e-6);
  padding: 0;
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.imagen-galeria {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
}

/* ---------------------------------------------------------------------------
 * Videos como material promocional, junto a las fotos (ADR-035)
 *
 * Sin sección propia ni reproductor con controles: el video vive en el
 * mismo lugar y con el mismo recorte que una foto (una burbuja del héroe,
 * una tarjeta de la galería) y en reposo se ve igual que una — es su
 * `poster`. El botón que lo envuelve solo agrega el triángulo de reproducir;
 * `video-promocional.ts` hace play()/pause() al tocarlo.
 *
 * El foco por teclado va en el TRIÁNGULO, no en el botón entero: el botón
 * ocupa toda la burbuja, y `.burbuja` recorta con `overflow: hidden` en un
 * círculo — un aro de foco alrededor del botón completo quedaría cortado por
 * ese recorte casi por completo. Alrededor del triángulo, que vive cerca del
 * centro, el aro siempre queda visible.
 * ------------------------------------------------------------------------ */
.video-promocional {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.video-promocional:focus-visible {
  outline: none;
}
.icono-reproducir {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  padding: 1.1rem;
  box-sizing: border-box;
  border-radius: 50%;
  /* Fondo más opaco que el de un tooltip: el video de fondo puede ser tan
     claro como oscuro, y el triángulo tiene que notarse sobre cualquiera de
     los dos sin depender de qué fotograma quedó de miniatura. El anillo
     blanco y la sombra hacen ese trabajo cuando el fondo es oscuro; el fondo
     casi negro, cuando es claro. */
  background: rgb(22 19 17 / 0.72);
  box-shadow:
    0 0 0 2px rgb(255 255 255 / 0.85),
    0 2px 10px rgb(22 19 17 / 0.45);
  color: #fff;
  transition:
    opacity 0.15s ease,
    background-color 0.15s ease,
    transform 0.15s ease;
}
.video-promocional:hover .icono-reproducir {
  background: rgb(22 19 17 / 0.85);
  transform: translate(-50%, -50%) scale(1.08);
}
.video-promocional:focus-visible .icono-reproducir {
  /* El anillo blanco de siempre ya rodea el ícono (ver arriba): un aro de
     foco también blanco no se distinguiría del reposo. Va en el color de
     enlace del sitio, como en todo lo demás. */
  outline: 3px solid var(--enlace);
  outline-offset: 3px;
}
/* Reproduciendo: el triángulo se esconde, igual que el ícono de "pausa" no
   hace falta — es material promocional en bucle, no un reproductor. */
.video-promocional.reproduciendo .icono-reproducir {
  opacity: 0;
}
.video-promocional.reproduciendo:hover .icono-reproducir,
.video-promocional.reproduciendo:focus-visible .icono-reproducir {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Mapa de sedes (ADR-032)
 *
 * El lienzo solo ocupa espacio cuando el script lo activa (`.mapa-activo`):
 * sin JavaScript no queda una caja vacía, queda la dirección en texto, que es
 * el contenido. Los marcadores son botones de 44 px (objetivo táctil de
 * §5.6) con la forma dibujada adentro, porque MapLibre usa `transform` sobre
 * el elemento para ubicarlo y rotarlo lo movería de su punto.
 * ------------------------------------------------------------------------ */
.mapa-lienzo.mapa-activo {
  position: relative;
  height: clamp(18rem, 55vw, 28rem);
  margin-block: var(--e-4) var(--e-5);
  border: 1px solid var(--borde-tenue);
  border-radius: 12px;
  overflow: hidden;
  background: #eef0ec;
}
.mapa-estado {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: var(--e-4);
  text-align: center;
  color: var(--tinta-suave);
}
.mapa-estado:empty {
  display: none;
}

/* Marcador = botón quieto + figura y anillo que se mueven.
   MapLibre ubica el marcador con `transform` sobre el propio botón: animar
   ese `transform` lo sacaría de su punto. Por eso lo que se anima son los
   hijos (`.pin-figura`, `.pin-pulso`), nunca el botón. */
.pin-mapa {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* El estilo global de `button:hover` (fondo negro de marca) se filtraba al
   marcador y dibujaba un cuadrado negro detrás de la gota al pasar el mouse
   o hacer clic. Lo reportó la IPS: "contorno negro plano". */
.pin-mapa:hover,
.pin-mapa:active {
  background: none;
  border: 0;
}
.pin-mapa:focus-visible {
  outline: 3px solid var(--marca-negro);
  outline-offset: 3px;
  border-radius: 50%;
}

.pin-figura {
  position: absolute;
  inset: 0;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: pin-caer 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: var(--retraso, 0ms);
}
.pin-pulso {
  position: absolute;
  /* Centrado con calc y no con margen negativo (la auditoría de espacios
     trata todo margen negativo como un solapamiento a revisar). */
  left: calc(50% - 9px);
  width: 18px;
  height: 18px;
  border: 2px solid var(--marca-fucsia);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  /* Tres latidos y se detiene: suficiente para que el ojo encuentre la sede,
     sin movimiento perpetuo en la página (WCAG 2.2.2). */
  animation: pin-pulso 2.2s ease-out 3;
  animation-delay: calc(var(--retraso, 0ms) + 0.5s);
}

/* Dirección exacta: gota con la punta en el borde inferior del botón
   (anchor "bottom" de MapLibre), sombra en el piso y pulso desde la punta. */
.pin-mapa--direccion .pin-figura::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 7px;
  width: 30px;
  height: 30px;
  background: linear-gradient(
    145deg,
    #ff2d7a,
    var(--marca-fucsia) 55%,
    #b8024a
  );
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 8px rgb(22 19 17 / 0.35);
}
.pin-mapa--direccion .pin-figura::after {
  content: "";
  position: absolute;
  top: 16px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}
.pin-mapa--direccion .pin-pulso {
  bottom: -9px;
}

/* Municipio: círculo, no gota. Dice "hay sede en este pueblo", no "la
   puerta está acá". Aparece creciendo desde el centro. */
.pin-mapa--municipio .pin-figura {
  border: 3px solid var(--marca-fucsia);
  border-radius: 50%;
  background: rgb(230 3 93 / 0.16);
  box-shadow: 0 2px 8px rgb(22 19 17 / 0.2);
  animation-name: pin-aparecer;
}
.pin-mapa--municipio .pin-figura::after {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  left: calc(50% - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--marca-fucsia);
}
.pin-mapa--municipio .pin-pulso {
  top: calc(50% - 9px);
}

/* Aproximada: un área punteada, más grande que un pin a propósito. */
.pin-mapa--aproximada {
  width: 72px;
  height: 72px;
}
.pin-mapa--aproximada .pin-figura {
  border: 2px dashed var(--marca-morado-oscuro);
  border-radius: 50%;
  background: rgb(112 12 139 / 0.14);
  animation-name: pin-aparecer;
}
.pin-mapa--aproximada .pin-pulso {
  display: none;
}

/* Estados de interacción al final: más específicos que las reglas base. */
.pin-mapa--direccion:hover .pin-figura,
.pin-mapa--direccion:focus-visible .pin-figura,
.pin-mapa--direccion[aria-expanded="true"] .pin-figura {
  transform: translateY(-5px) scale(1.08);
}
.pin-mapa--municipio:hover .pin-figura,
.pin-mapa--municipio:focus-visible .pin-figura,
.pin-mapa--municipio[aria-expanded="true"] .pin-figura {
  transform: scale(1.12);
  background: rgb(230 3 93 / 0.28);
}

@keyframes pin-caer {
  0% {
    transform: translateY(-36px);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes pin-aparecer {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes pin-pulso {
  0% {
    transform: scale(0.5);
    opacity: 0.85;
  }
  100% {
    transform: scale(3.4);
    opacity: 0;
  }
}

/* El mapa aparece con un fundido, no de golpe; mientras carga, el hueco
   muestra un brillo que recorre la caja en vez de un rectángulo gris muerto. */
.mapa-lienzo .maplibregl-canvas {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.mapa-lienzo.mapa-listo .maplibregl-canvas {
  opacity: 1;
}
.mapa-lienzo.mapa-activo:not(.mapa-listo) {
  background:
    linear-gradient(100deg, #eef0ec 30%, #f7f8f5 50%, #eef0ec 70%) 0 0 / 300%
    100%;
  animation: mapa-brillo 1.4s linear infinite;
}
@keyframes mapa-brillo {
  to {
    background-position: -150% 0;
  }
}

/* Ventana del punto: entra deslizándose y con fundido. */
.mapa-lienzo .maplibregl-popup-content {
  animation: popup-entrar 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  box-shadow: 0 10px 28px rgb(22 19 17 / 0.22);
}
@keyframes popup-entrar {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Quien pidió menos movimiento en su sistema no ve caídas, pulsos, brillos
   ni fundidos: todo aparece en su lugar final. */
@media (prefers-reduced-motion: reduce) {
  .pin-figura,
  .mapa-lienzo .maplibregl-popup-content,
  .mapa-lienzo.mapa-activo:not(.mapa-listo) {
    animation: none;
  }
  .pin-figura,
  .mapa-lienzo .maplibregl-canvas {
    transition: none;
  }
  .pin-pulso {
    display: none;
  }
}

.popup-mapa {
  display: grid;
  gap: var(--e-1);
  /* No `inherit`: el contenedor de MapLibre fija Helvetica 12 px. */
  font-family:
    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-cuerpo);
  line-height: 1.4;
  color: var(--tinta);
}
.popup-mapa strong {
  font-weight: 700;
}
.popup-mapa .popup-nota {
  font-size: var(--t-meta);
  color: var(--tinta-suave);
}
.popup-enlace {
  margin-top: var(--e-1);
  color: var(--enlace);
  font-weight: 600;
}
.popup-enlace:focus-visible {
  outline-offset: 3px;
  border-radius: 4px;
}
.mapa-lienzo .maplibregl-popup-content {
  padding: var(--e-3) calc(44px + var(--e-1)) var(--e-3) var(--e-4);
  border-radius: 10px;
}
/* El estilo global de botones del sitio le daba a la × texto blanco sobre
   el fondo blanco del popup: el botón existía y medía 44 px, pero no se
   veía. Se vio en la captura del preview. */
.mapa-lienzo .maplibregl-popup-close-button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tinta);
  background: transparent;
}
/* Controles de MapLibre ajustados a §5.6. Llevan `.mapa-lienzo` adelante
   porque la hoja de MapLibre se carga DESPUÉS de esta (junto con el mapa) y,
   a igual especificidad, ganaría la suya. Los tres defectos los encontró la
   batería de auditoría en el preview, no el ojo:
   - botones de acercar/alejar de 29 px y enlace de créditos de 16 px de alto,
     bajo el objetivo táctil de 44 px;
   - el aviso "Use Ctrl + la rueda…" en blanco sobre gris translúcido:
     2,85:1, bajo el 4,5:1 del texto normal. Sobre el negro de marca al 85 %
     queda por encima de 12:1 aun con el mapa más claro detrás. */
.mapa-lienzo .maplibregl-ctrl-group button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
}
.mapa-lienzo .maplibregl-ctrl-attrib {
  font-size: var(--t-meta);
}
.mapa-lienzo .credito-mapa {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.mapa-lienzo .maplibregl-cooperative-gesture-screen {
  background: rgb(22 19 17 / 0.85);
  color: #fff;
  font-size: var(--t-realce);
  line-height: 1.4;
}

/* Aclaración bajo el mapa general: pequeña y pegada al mapa, no un párrafo
   de entrada arriba que lo empuje fuera de la pantalla. */
.nota-mapa {
  margin: 0;
  font-size: var(--t-meta);
  color: var(--tinta-suave);
}

.lista-ubicaciones {
  list-style: none;
  margin: 0 0 var(--e-4);
  padding: 0;
  display: grid;
  gap: var(--e-4);
}
.lista-ubicaciones li {
  display: grid;
  gap: var(--e-1);
}
.lista-ubicaciones .nombre-ubicacion {
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Modo de alto contraste
 *
 * Lo activa el panel (`data-contraste="alto"` en <html>). No es un tema
 * oscuro: es la misma página con la decoración apagada y los colores llevados
 * al máximo de contraste — negro sobre blanco (21:1) y bordes sólidos donde
 * antes había sombras, que no se ven con baja visión.
 * ------------------------------------------------------------------------ */
:root[data-contraste="alto"] {
  --tinta: #000000;
  --tinta-suave: #1a1a1a;
  --fondo: #ffffff;
  --enlace: #0108b5; /* azul de la paleta: 12.33:1 */
  --enlace-fuerte: #000000;
  --enlace-visitado: #0108b5;
  --borde: #000000;
  --borde-tenue: #000000;
  --suave: #ffffff;
  --acento-tenue: #ffffff;
  --carmin: #700c8b;
  --sombra: none;
}
:root[data-contraste="alto"] .fondo-ondas,
:root[data-contraste="alto"] .cinta {
  display: none;
}
/* Todo enlace se subraya: con el alto contraste activo el color deja de ser
   una señal fiable, así que la forma tiene que decirlo (WCAG 1.4.1). Va antes
   que las reglas de enlace más específicas de este mismo bloque. */
/* biome-ignore lint/style/noDescendingSpecificity: `.accesos li:nth-child(n) a` solo fija `background`; acá se fija `text-decoration`, así que no compiten por ninguna declaración */
:root[data-contraste="alto"] a {
  text-decoration: underline;
}
:root[data-contraste="alto"] .tarjeta,
:root[data-contraste="alto"] .accesos a,
:root[data-contraste="alto"] .etiqueta {
  /* biome-ignore lint/complexity/noImportantStyles: el alto contraste es una anulación de accesibilidad y tiene que ganarle a cualquier color de componente, incluidos los que se agreguen después; sin esto basta con que un componente nuevo iguale la especificidad para que el modo deje de aplicarse en silencio */
  background: #fff !important;
  /* biome-ignore lint/complexity/noImportantStyles: el alto contraste es una anulación de accesibilidad y tiene que ganarle a cualquier color de componente, incluidos los que se agreguen después; sin esto basta con que un componente nuevo iguale la especificidad para que el modo deje de aplicarse en silencio */
  border: 2px solid #000 !important;
  /* biome-ignore lint/complexity/noImportantStyles: el alto contraste es una anulación de accesibilidad y tiene que ganarle a cualquier color de componente, incluidos los que se agreguen después; sin esto basta con que un componente nuevo iguale la especificidad para que el modo deje de aplicarse en silencio */
  box-shadow: none !important;
}
:root[data-contraste="alto"] .franja {
  background: #fff;
  color: #000;
  border: 2px solid #000;
}
:root[data-contraste="alto"] .franja h2,
:root[data-contraste="alto"] .franja .entradilla,
:root[data-contraste="alto"] .franja .etiqueta {
  color: #000;
}
/* Mismo tratamiento que `.franja`: `.vacio` usa un color de marca fijo
   (`--marca-morado-oscuro`), no una variable que el alto contraste pueda
   redefinir, así que necesita su propio apagado explícito. */
:root[data-contraste="alto"] .vacio {
  background: #fff;
  color: #000;
  border: 2px solid #000;
}
:root[data-contraste="alto"] .vacio .icono-vacio {
  background: #fff;
  border-color: #000;
  color: #000;
}
/* biome-ignore lint/style/noDescendingSpecificity: `.dupla > .panel h2::before`
   (más arriba) es más específica pero no compite por el mismo elemento que
   esta regla: `.franja`/`main` genérico no incluye los paneles de
   quienes-somos, que tienen su propio override dos reglas más abajo. */
:root[data-contraste="alto"] main h2::before,
:root[data-contraste="alto"] .franja h2::before {
  background: #000;
}
/* La rotación de color de `.dupla > .panel h2::before` (0,3,2) es MÁS
   específica que la regla genérica de arriba (0,1,3): sin este override
   puntual, los cuatro colores le ganarían incluso acá, que es justo la clase
   de descuido que ya produjo el fallo de ADR-026. */
:root[data-contraste="alto"] .dupla > .panel h2::before {
  background-color: #000;
}
:root[data-contraste="alto"] .portada-encabezado h1 {
  background: none;
  color: var(--enlace);
  -webkit-text-fill-color: currentColor;
}
:root[data-contraste="alto"] .banda--tenue,
:root[data-contraste="alto"] .banda--clara {
  background: #fff;
  border-block: 2px solid #000;
}
/* biome-ignore lint/style/noDescendingSpecificity: `.accesos li:nth-child(n) .icono` es más específica pero solo fija `background`, y acá el `background` lleva !important, que gana igual */
:root[data-contraste="alto"] .icono {
  /* biome-ignore lint/complexity/noImportantStyles: gana al tinte de
     `.accesos li:nth-child(n) .icono`, que es más específico */
  background: #fff !important;
  border: 2px solid #000;
  color: #000;
}
/*
 * Hallazgo real (2026-09-23, reportado por la IPS y confirmado auditando el
 * sitio desplegado con Playwright, no a simple vista): la regla de arriba
 * fuerza el FONDO de `.tarjeta` a blanco con `!important`, pero
 * `.tarjeta--color` (ADR-025, las tarjetas de servicios) fija su texto en
 * blanco fijo — no en una variable que el alto contraste pueda redefinir.
 * Resultado: texto blanco sobre fondo que la regla de arriba vuelve blanco.
 * Invisible. 17 elementos de la portada quedaban así, medido en producción:
 * contraste 1.00:1 (texto 255,255,255 sobre fondo 255,255,255).
 *
 * La causa de fondo es que `.tarjeta--color` se agregó después de escribir
 * este bloque de alto contraste, y nadie volvió a repasar este bloque contra
 * el componente nuevo. Mismo tratamiento que ya tiene `.franja` más arriba:
 * el color de fondo se apaga, el texto pasa a negro explícito.
 */
/* biome-ignore lint/style/noDescendingSpecificity: `.rejilla > li:nth-child(4n + n) .tarjeta--color` es más específica pero solo fija `background`; acá se fija `color` */
:root[data-contraste="alto"] .tarjeta--color,
:root[data-contraste="alto"] .tarjeta--color .titulo-tarjeta,
:root[data-contraste="alto"] .tarjeta--color ul {
  color: #000;
}
:root[data-contraste="alto"] .tarjeta--color li::before {
  background-color: #000;
}
:root[data-contraste="alto"] .sede-hero {
  background: #fff;
  color: #000;
  border-bottom: 2px solid #000;
}
:root[data-contraste="alto"] .sede-hero h1,
:root[data-contraste="alto"] .sede-hero .municipio,
:root[data-contraste="alto"] .sede-hero .migas,
:root[data-contraste="alto"] .sede-hero .aviso-proxima {
  color: #000;
}
:root[data-contraste="alto"] .sede-hero .insignia {
  background: #fff;
  border-color: #000;
  color: #000;
}
:root[data-contraste="alto"] .sede-hero .boton-principal,
:root[data-contraste="alto"] .boton-secundario {
  background: #fff;
  color: #000;
  border: 2px solid #000;
}
:root[data-contraste="alto"] .lista-telefonos a,
:root[data-contraste="alto"] .lista-telefonos a svg {
  color: #000;
}

/*
 * Hallazgo real (reportado por la IPS con captura): en modo normal los accesos
 * son "tres columnas separadas por una línea, sin cajas" (el patrón de
 * shaio.org), y por eso la rejilla va con `gap: 0` y un divisor entre
 * columnas. Pero el alto contraste le da a cada acceso su propia caja con
 * borde de 2px — y con hueco cero las tres cajas quedaban pegadas de lado,
 * compartiendo pared. En este modo el divisor sobra (cada caja ya se delimita
 * sola) y lo que hace falta es aire entre ellas.
 */
:root[data-contraste="alto"] .lista-accesos {
  gap: var(--e-3);
}
:root[data-contraste="alto"] .lista-accesos > li + li {
  border: 0;
}
:root[data-contraste="alto"] .lista-accesos .icono-grande {
  border-color: #000;
  color: #000;
}

/* Mapa de sedes en alto contraste: marcadores en negro sobre blanco y borde
   del lienzo visible. El mapa base conserva sus colores (las calles y el agua
   necesitan distinguirse entre sí), pero todo lo que es de la IPS pasa a la
   paleta del modo. */
:root[data-contraste="alto"] .mapa-lienzo.mapa-activo {
  border: 2px solid #000;
}
:root[data-contraste="alto"] .pin-mapa--direccion .pin-figura::before {
  background: #000;
  border-color: #fff;
}
:root[data-contraste="alto"] .pin-mapa--municipio .pin-figura {
  border-color: #000;
  background: rgb(255 255 255 / 0.85);
}
:root[data-contraste="alto"] .pin-mapa--municipio .pin-figura::after {
  background: #000;
}
:root[data-contraste="alto"] .pin-mapa--aproximada .pin-figura {
  border-color: #000;
  background: rgb(255 255 255 / 0.6);
}
:root[data-contraste="alto"] .pin-pulso {
  border-color: #000;
}
:root[data-contraste="alto"] .popup-mapa,
:root[data-contraste="alto"] .popup-enlace,
:root[data-contraste="alto"] .popup-mapa .popup-nota {
  color: #000;
}

/* Barra de atención rápida en alto contraste: borde negro de 2 px, igual que
   el resto de las superficies en este modo. */
:root[data-contraste="alto"] .atencion-rapida .accion-rapida {
  border-color: #000;
  color: #000;
}
:root[data-contraste="alto"] .atencion-rapida .accion-rapida--principal {
  background: #000;
  color: #fff;
}
@media (max-width: 45.99rem) {
  :root[data-contraste="alto"] .atencion-rapida {
    border-top: 2px solid #000;
  }
  :root[data-contraste="alto"] .atencion-rapida .accion-rapida,
  :root[data-contraste="alto"] .atencion-rapida .accion-rapida--principal {
    border: 0;
    background: #fff;
    color: #000;
  }
  :root[data-contraste="alto"] .atencion-rapida .accion-rapida--principal svg {
    background: #000;
    color: #fff;
  }
}

/* Figuras del héroe: decoración; en alto contraste el fondo queda blanco. */
:root[data-contraste="alto"] .figuras {
  display: none;
}

/* ===========================================================================
 * ANIMACIONES (ADR-042)
 *
 * Todo dentro de `prefers-reduced-motion: no-preference`: quien pidió reducir
 * movimiento en su sistema no ve ninguna de estas (WCAG 2.3.3). Tres capas:
 *  1. Entrada de la portada — CSS puro, sin JavaScript (no parpadea).
 *  2. Aparición al desplazarse — `animaciones.ts` pone `.por-revelar` solo a
 *     lo que aún está fuera de pantalla; sin JS no se oculta nada.
 *  3. Microinteracciones al pasar el mouse o enfocar.
 * Duraciones cortas (≤ 0,7 s) y curvas suaves: es una institución de salud,
 * no un sitio de entretenimiento.
 *
 * Esta sección va al final a propósito, después del alto contraste: sus
 * reglas solo agregan movimiento (transform/opacity), no colores.
 * ======================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* --- 1. Entrada de la portada --- */
  @keyframes subir-entrar {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes burbuja-entrar {
    from {
      opacity: 0;
      scale: 0.85;
    }
    to {
      opacity: 1;
      scale: 1;
    }
  }
  .portada-encabezado > * {
    animation: subir-entrar 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  }
  .portada-encabezado > :nth-child(2) {
    animation-delay: 0.08s;
  }
  .portada-encabezado > :nth-child(3) {
    animation-delay: 0.16s;
  }
  .portada-encabezado > :nth-child(4) {
    animation-delay: 0.24s;
  }
  /* `scale` (propiedad propia) y no `transform`: las burbujas desplazadas ya
     usan `transform: translateY(...)` y se pisarían. */
  .burbuja {
    animation: burbuja-entrar 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
  }
  .burbujas > :nth-child(1) {
    animation-delay: 0.15s;
  }
  .burbujas > :nth-child(2) {
    animation-delay: 0.27s;
  }
  .burbujas > :nth-child(3) {
    animation-delay: 0.39s;
  }
  .burbujas > :nth-child(4) {
    animation-delay: 0.51s;
  }

  /* Figuras del fondo: entran y flotan despacio. Dos ciclos de 9 s y se
     detienen — un movimiento decorativo que no termina nunca distrae durante
     la lectura (WCAG 2.2.2). */
  @keyframes figura-flotar {
    0%,
    100% {
      translate: 0 0;
    }
    50% {
      translate: 0 -14px;
    }
  }
  @keyframes figura-entrar {
    from {
      opacity: 0;
    }
  }
  .figura {
    animation:
      figura-entrar 1.2s ease-out backwards,
      figura-flotar 9s ease-in-out 1.2s 2;
  }
  .figura--anillo,
  .figura--triangulo,
  .figura--puntos {
    animation-delay: 0.3s, 2.5s;
  }

  /* --- 2. Aparición al desplazarse --- */
  .por-revelar {
    opacity: 0;
    translate: 0 24px;
  }
  .revelado {
    transition:
      opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
      translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: var(--retraso-revelar, 0ms);
  }

  /* --- 3. Microinteracciones --- */
  .boton-principal,
  .boton-secundario,
  .accion-rapida {
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease,
      translate 0.2s ease,
      box-shadow 0.2s ease;
  }
  .boton-principal:hover,
  .accion-rapida:hover {
    translate: 0 -2px;
    box-shadow: 0 8px 18px -10px rgb(112 12 139 / 0.6);
  }
  /* La flecha de "Ver más" avanza un poco al pasar el mouse. */
  .ver-mas svg,
  .ver-ficha svg {
    transition: translate 0.2s ease;
  }
  .ver-mas:hover svg,
  .ver-ficha:hover svg {
    translate: 4px 0;
  }
  /* Accesos: el ícono crece y la tarjeta sube. */
  .lista-accesos .icono-grande {
    transition:
      scale 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
      background-color 0.2s ease;
  }
  .lista-accesos a:hover .icono-grande,
  .lista-accesos a:focus-visible .icono-grande {
    scale: 1.1;
  }
  /* Fotos: un acercamiento leve dentro de su marco. */
  .burbuja img,
  .imagen-galeria,
  .imagen-equipo {
    transition: scale 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .burbuja:hover img,
  .galeria li:hover .imagen-galeria {
    scale: 1.06;
  }
  .galeria li {
    overflow: hidden;
    border-radius: 12px;
  }
  /* Tarjetas de color de Servicios: suben como las tarjetas-enlace. */
  .tarjeta--color {
    transition:
      translate 0.2s ease,
      box-shadow 0.2s ease;
  }
  .tarjeta--color:hover {
    translate: 0 -3px;
    box-shadow: 0 14px 28px -16px rgb(22 19 17 / 0.45);
  }
}

/* Columna izquierda de la ficha de sede: dirección y horario, una tarjeta
   encima de la otra. La rejilla `.panel-sede` sigue siendo de dos columnas. */
.columna-sede {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}
.horario {
  margin: 0;
}
.horario dt {
  font-size: 0.85rem;
  color: var(--tinta-suave);
  margin-top: 0.65rem;
}
.horario dt:first-child {
  margin-top: 0;
}
.horario dd {
  margin: 0.1rem 0 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Horario en el pie de las tarjetas de sede (/sedes y portada). */
.horario-tarjeta {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}
.horario-tarjeta .horario-titulo {
  display: block;
  font-weight: 700;
}
.horario-tarjeta .horario-linea {
  display: block;
  font-variant-numeric: tabular-nums;
}
.horario-tarjeta .horario-dias {
  font-weight: 600;
}

/* Aviso de tratamiento de datos encima del botón de envío de la encuesta. */
.ayuda.aviso-datos {
  margin: 0 0 var(--e-4);
  max-width: var(--medida-lectura);
}

/* Comentarios de la encuesta en el panel (RF-010): texto suelto con su sede y fecha. */
.comentarios-encuesta {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comentarios-encuesta li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--borde-tenue);
}
.comentarios-encuesta li p {
  margin: 0.2rem 0 0;
  overflow-wrap: anywhere;
}

/* Enlace secundario junto al botón de un formulario de filtros del panel. */
.quitar-filtros {
  margin-left: var(--e-4);
}