/* =========================================================================
 * sistema.css — El sistema visual del portal
 * =========================================================================
 * QUÉ ES ESTO
 *
 * Hasta ahora los colores, los tamaños y los espacios estaban repetidos a
 * mano en cinco hojas de estilo. Cambiar un azul obligaba a buscarlo en todas
 * y siempre quedaba alguno sin cambiar.
 *
 * Aquí viven las decisiones. Se carga la ÚLTIMA a propósito: así corrige lo
 * que haga falta sin tener que reescribir las hojas anteriores, que están
 * portadas del diseño aprobado y conviene no tocar.
 *
 * TRES REGLAS QUE MANDAN SOBRE TODO LO DEMÁS
 *
 *   1. PRIMERO EL TELÉFONO. La mayoría entra desde un celular, muchas veces
 *      barato y con la pantalla pequeña. Lo que no funcione a 320 px no
 *      funciona.
 *
 *   2. QUE LO USE UN ADULTO MAYOR. Un hospital lo consulta gente de todas las
 *      edades y con toda clase de vista. Nada por debajo de 13 px, nada que
 *      haya que pulsar midiendo menos de 44 px, y nada con menos contraste
 *      del que exige la norma.
 *
 *   3. LOS COLORES DEL HOSPITAL SON LOS DEL HOSPITAL. No se cambian. Cuando
 *      uno de ellos no da el contraste que hace falta, se usa una variante
 *      oscurecida SOLO para el texto, no para el fondo: la marca se ve igual
 *      y el texto se lee.
 * ========================================================================= */

:root {

  /* ---------------------------------------------------------------------
   * COLOR
   * ------------------------------------------------------------------ */

  /* Los institucionales, tal cual. No se tocan. */
  --hospital:        #053272;
  --hospital-dark:   #032050;
  --hospital-light:  #eef3fb;
  --hospital-cyan:   #00AFEF;
  --hospital-green:  #A8CF45;

  /* Variantes SOLO PARA TEXTO.
     El cian y el verde de la marca son luminosos: sobre fondo claro dan
     2,5:1 y la norma pide 4,5:1. Oscurecidos siguen siendo reconocibles
     como el mismo color y ya se leen. */
  --cyan-texto:  #05628a;   /* sobre blanco ≈ 5,6:1 */
  --verde-texto: #4f6b0f;   /* sobre blanco ≈ 5,3:1 */

  /* Estados. Rojo y ámbar accesibles sobre blanco. */
  --error:   #b42318;
  --aviso:   #8a5a00;
  --exito:   #15803d;

  /* ---------------------------------------------------------------------
   * TIPOGRAFÍA
   * ---------------------------------------------------------------------
   * La escala arranca en 13 px y no baja de ahí. El 11 px de las fechas y
   * el 12 px de la barra superior eran ilegibles para media población.
   * ------------------------------------------------------------------ */
  --txt-xs:   0.8125rem;  /* 13px — el suelo: fechas, etiquetas, pies */
  --txt-sm:   0.875rem;   /* 14px — texto secundario */
  --txt-base: 1rem;       /* 16px — lectura */
  --txt-md:   1.0625rem;  /* 17px — entradillas */
  --txt-lg:   1.25rem;
  --txt-xl:   1.5rem;
  --txt-2xl:  1.875rem;
  --txt-3xl:  2.25rem;

  /* ---------------------------------------------------------------------
   * ESPACIO, FORMA Y PROFUNDIDAD
   * ------------------------------------------------------------------ */
  --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
  --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;

  --radius:    .5rem;
  --radius-sm: .375rem;
  --radius-lg: .875rem;
  --radius-full: 9999px;

  --sombra-1: 0 1px 2px rgba(16, 32, 56, .06);
  --sombra-2: 0 4px 12px rgba(16, 32, 56, .08);
  --sombra-3: 0 12px 28px rgba(16, 32, 56, .12);

  /* ---------------------------------------------------------------------
   * ZONA TÁCTIL
   * ---------------------------------------------------------------------
   * 44 px es lo que mide la yema de un dedo adulto. La norma exige 24 como
   * mínimo absoluto; 44 es lo que hace que no haya que apuntar.
   * ------------------------------------------------------------------ */
  --tap: 44px;
  --tap-min: 24px;

  /* Ancho cómodo de lectura: entre 60 y 75 caracteres por línea. */
  --ancho-lectura: 44rem;
}

/* =========================================================================
 * 1 · CONTRASTE
 * =========================================================================
 * Los dos fallos reales que salieron en la auditoría, los dos por el mismo
 * motivo: el cian institucional usado como color de texto.
 * ====================================================================== */

/* El botón cian llevaba letra blanca: 2,51:1. Con la letra en el azul del
   hospital sube a 4,7:1 y el botón sigue siendo cian. */
.btn-cyan,
a.btn-cyan,
.btn-cyan:visited {
  color: var(--hospital-dark);
  font-weight: 700;
}
.btn-cyan:hover { background: #0b9cd4; color: var(--hospital-dark); }

/* El rótulo de sección ("Actualidad", "Publicaciones"…) iba en cian sobre
   blanco: ilegible para quien no tenga vista de veinte años.
   Se nombra también ".titulo-seccion .kicker" porque así está escrito en
   extras.css y en govco.css, y con menos especificidad no ganaba. */
.kicker,
.titulo-seccion .kicker,
.qs-cabecera .kicker,
.text-cyan { color: var(--cyan-texto); }

/* =========================================================================
 * 2 · TAMAÑO DE LETRA
 * =========================================================================
 * Nada por debajo de 13 px. Afecta sobre todo a fechas, categorías, la barra
 * superior y el pie, que estaban a 11 y 12 px.
 * ====================================================================== */
.inst-bar, .inst-bar a,
.govco-bar, .govco-bar a { font-size: var(--txt-xs); }

.kicker,
.titulo-seccion .kicker,
.qs-cabecera .kicker { font-size: var(--txt-xs); letter-spacing: .06em; }

.news-card p, .card p,
.tarjeta-resumen { font-size: var(--txt-sm); }

/* Las fechas y las etiquetas de categoría de las tarjetas. */
.news-card [style*="font-size:.6875rem"],
.news-card [style*="font-size: .6875rem"],
.card [style*="font-size:.6875rem"],
.card [style*="font-size: .6875rem"] { font-size: var(--txt-xs) !important; }

.footer-link, .footer a { font-size: var(--txt-sm); }
small, .text-xs { font-size: var(--txt-xs); }

/* =========================================================================
 * 3 · ZONAS TÁCTILES
 * =========================================================================
 * Un puntito de 8 px no lo acierta nadie con el dedo. Donde el elemento no
 * puede crecer sin descuadrar el diseño, se le añade un área invisible
 * alrededor con ::after, que es lo que de verdad recibe el toque.
 * ====================================================================== */

/* Los puntos de los carruseles y del hero medían 8x8: nadie acierta eso con
   el dedo. Ahora el BOTÓN mide 36x44 y el puntito se dibuja dentro. Se ve
   igual de discreto y se pulsa sin apuntar.

   36 y no 44 de ancho por una razón práctica: ocho puntos a 44 px no caben
   en una pantalla de 360. A partir de ocho, el carrusel ya no pinta puntos
   sino "3 / 19" (ver carrusel.js). */
.carrusel-punto,
.hero-dot {
  position: relative;
  width: 36px;
  height: var(--tap);
  min-width: 36px;
  border-radius: 0;
  background: transparent;
  transform: none;
  padding: 0;
}
.carrusel-punto::before,
.hero-dot::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--gray-300, #d1d5db);
  transition: background .2s ease, transform .2s ease;
}
.hero-dot::before { background: rgba(255, 255, 255, .5); }

.carrusel-punto.activo::before { background: var(--hospital); transform: scale(1.35); }
.hero-dot.active::before       { background: #fff;           transform: scale(1.35); }

.carrusel-punto.activo, .hero-dot.active { background: transparent; transform: none; }
.carrusel-puntos { gap: 0; }
.hero-dots { gap: 0; }

/* Flechas de carrusel y del hero. */
.carrusel-flecha,
.hero-arrow,
#heroPrev, #heroNext {
  min-width: var(--tap);
  min-height: var(--tap);
}

/* Los enlaces de la barra institucional de arriba medían 19 px de alto. */
.inst-bar a,
.govco-bar a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;          /* la barra es fina a propósito; 36 es el techo */
  padding: 0 .25rem;
}

/* Los chips de filtro de Informes. */
.chip {
  min-height: var(--tap);
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Enlaces del pie y de listas de navegación. */
.footer-link,
.footer-icon-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}
.footer-icon-link { min-width: 40px; justify-content: center; }

/* En el teléfono se sube todo a 44: ahí no hay puntero que ayude. */
@media (pointer: coarse) {
  .chip,
  .carrusel-flecha,
  .hero-arrow,
  .btn-primary, .btn-secondary, .btn-cyan,
  .pagina-num, .paginacion button, .paginacion a {
    min-height: var(--tap);
    min-width: var(--tap);
  }
  .footer-link { min-height: var(--tap); }
}

/* =========================================================================
 * 4 · EL FOCO DEL TECLADO
 * =========================================================================
 * Quien no usa ratón necesita ver SIEMPRE dónde está parado. Un solo estilo
 * para todo el sitio, y que se vea también sobre fondo azul.
 * ====================================================================== */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--hospital-cyan);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.govco-bar :focus-visible,
.inst-bar :focus-visible,
.hero :focus-visible,
[style*="background:var(--hospital)"] :focus-visible {
  outline-color: #fff;
}

/* =========================================================================
 * 5 · MOVIMIENTO
 * ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
 * 6 · EL MENÚ MÓVIL
 * =========================================================================
 * Era una lista suelta debajo de la cabecera: al abrirla empujaba la página
 * y con cuarenta y seis enlaces había que recorrerla entera para volver.
 * Ahora es un panel con su propio alto, su propio desplazamiento y su botón
 * de cerrar siempre visible arriba.
 * ====================================================================== */
.hamburger-btn {
  min-width: var(--tap);
  min-height: var(--tap);
  justify-content: center;
}

@media (max-width: 1023px) {
  .mobile-menu {
    position: fixed;
    left: 0; right: 0;
    top: var(--alto-cabecera, 0px);
    bottom: 0;
    z-index: 60;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 2rem;
    box-shadow: var(--sombra-3);
    /* Respeta la barra del sistema en teléfonos con muesca. */
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  }

  /* La página de detrás se queda quieta mientras el menú está abierto. */
  body.menu-movil-abierto { overflow: hidden; }
}

.mobile-menu-cabecera {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.5rem;
  background: var(--hospital);
  color: #fff;
}
.mobile-menu-titulo {
  font-weight: 700;
  font-size: var(--txt-md);
  letter-spacing: .01em;
}
.mobile-menu-cerrar {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--tap);
  padding: 0 .875rem;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: var(--radius);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: var(--txt-sm);
  font-weight: 600;
  cursor: pointer;
}
.mobile-menu-cerrar:hover { background: rgba(255, 255, 255, .14); }

/* Cada entrada del menú, con sitio de sobra para el dedo. */
.mobile-link {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .625rem 1.5rem;
  font-size: var(--txt-base);
}
.mobile-sub .mobile-link { padding-left: 2.5rem; font-size: var(--txt-sm); }
.mobile-link.nivel-3     { padding-left: 3.25rem; }
.mobile-acordeon { width: 100%; justify-content: space-between; }

/* =========================================================================
 * 7 · ENLACES DE TEXTO QUE HAY QUE PODER TOCAR
 * =========================================================================
 * "Ver todos los servicios →" medía 17 px de alto. Es un enlace de texto, y
 * a un enlace de texto no se le puede poner un recuadro sin afear la página;
 * lo que sí se puede es darle aire arriba y abajo para que el dedo tenga
 * dónde caer.
 * ====================================================================== */
.enlace-seccion,
a[class*="ver-todos"],
.footer-ext,
.footer-legal a,
.contacto-linea a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

@media (pointer: coarse) {
  /* En el pie, los enlaces a organismos externos iban en fila y a 19 px. */
  .footer-ext { min-height: var(--tap); padding: 0 .35rem; }
  .footer-legal a { min-height: var(--tap); }
}

/* El campo del boletín y su botón, que se tocan con el dedo. */
#boletin, .boletin input, .boletin button { min-height: var(--tap); }

/* =========================================================================
 * 8 · ANCHO DE LECTURA
 * =========================================================================
 * Un párrafo que cruza 1.300 px de pantalla se lee fatal: el ojo se pierde
 * al volver al principio de la línea siguiente. El contenido que viene de
 * WordPress se limita a un ancho cómodo, sin tocar lo que es a propósito
 * ancho (tablas, galerías, las tarjetas de conceptos).
 * ====================================================================== */
@media (min-width: 1024px) {
  .contenido-wp > p,
  .contenido-wp > ul,
  .contenido-wp > ol,
  .contenido-wp > h2,
  .contenido-wp > h3,
  .contenido-wp > h4 {
    max-width: var(--ancho-lectura);
  }
}

/* =========================================================================
 * 9 · CANALES DE ATENCIÓN
 * =========================================================================
 * Ocupa el sitio donde antes aparecía un código interno de WordPress. No
 * imita un formulario: dice, con los datos que el hospital ya publica, por
 * dónde se radica de verdad una PQRSD.
 * ====================================================================== */
.hlpl-canales {
  margin: 1.75rem 0;
  padding: 1.5rem;
  border: 1px solid var(--hospital-light);
  border-left: 4px solid var(--hospital);
  border-radius: var(--radius);
  background: var(--hospital-light);
}
.contenido-wp .hlpl-canales h3 {
  margin: 0 0 .5rem;
  font-size: var(--txt-lg);
  color: var(--hospital);
}
.hlpl-canales > p { margin: 0 0 1rem; font-size: var(--txt-sm); color: var(--gray-700); }

.hlpl-canales-lista { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .875rem; }
.hlpl-canales-lista li { font-size: var(--txt-base); color: var(--gray-800); }
.hlpl-canales-lista span {
  display: block;
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cyan-texto);
  margin-bottom: .1rem;
}
.contenido-wp .hlpl-canales-lista a { color: var(--hospital); font-weight: 600; text-decoration: underline; }

.contenido-wp a.hlpl-canales-ir {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 1.25rem;
  border-radius: var(--radius);
  background: var(--hospital);
  color: #fff;
  font-size: var(--txt-sm);
  font-weight: 600;
  text-decoration: none;
}
.contenido-wp a.hlpl-canales-ir:hover { background: var(--hospital-dark); color: #fff; }

/* =========================================================================
 * 10 · EL PIE EN EL TELÉFONO
 * =========================================================================
 * Las listas de enlaces se pliegan detrás de su título. El título sigue
 * visible y ahora es un botón de 44 px. Los datos del hospital no se pliegan.
 * ====================================================================== */
.pie-titulo-caja { margin: 0; }

.pie-titulo {
  display: none;                 /* en el computador manda el h3 de siempre */
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--tap);
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .9375rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.pie-titulo svg { transition: transform .2s ease; flex: none; }
.pie-titulo[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (max-width: 1023px) {
  .pie-plegado .pie-titulo { display: flex; }
  .pie-plegado .pie-titulo-caja {
    border-bottom: 1px solid var(--gray-200);
    padding: .25rem 0;
  }
  /* Plegado sin florituras: display none/block.
     El truco de animar con grid-template-rows: 0fr solo colapsa la PRIMERA
     fila, y aquí cada enlace es una fila; el pie no se encogía nada. Además
     así los enlaces plegados salen del recorrido del tabulador, que es lo
     correcto: no se tabula hacia algo que no se ve. */
  /* El !important es a propósito y está justificado: uno de estos grupos
     lleva display:flex escrito en el propio atributo style del HTML, y un
     estilo en línea gana a cualquier clase. Sin esto, "Enlaces de interés"
     era el único que no se plegaba. */
  .pie-plegado .pie-plegable:not(.abierto) { display: none !important; }
  .pie-plegado .pie-plegable.abierto { padding-bottom: .5rem; }
  /* El pie deja de ser una escalera de cuatro pisos. */
  .pie-plegado .footer-grid,
  .pie-plegado [class*="grid"] { gap: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pie-plegado .pie-plegable { transition: none; }
}

/* =========================================================================
 * 11 · ALTURA DE LA PORTADA EN EL TELÉFONO
 * =========================================================================
 * La portada medía 6.400 px: unas siete pantallas para llegar al final. No se
 * quita información: se aprieta lo que estaba suelto y se pone en fila lo que
 * estaba en columna.
 *
 * Las líneas de contacto NO se meten en un carrusel. Son tres teléfonos de un
 * hospital: es justo lo que alguien busca con prisa, y esconder dos de tres
 * detrás de un gesto sería un mal cambio aunque ahorre píxeles.
 * ====================================================================== */
@media (max-width: 1023px) {

  /* --- Las tres tarjetas de teléfono: 288 px cada una --------------------
     El icono de 64 px y el aire de escritorio no hacen falta aquí. */
  .contact-line-card {
    padding: 1.125rem 1rem;
    text-align: left;
    display: grid;
    grid-template-columns: 42px 1fr;
    grid-template-areas:
      "icono titulo"
      "icono desc"
      "tel   tel"
      "hora  hora";
    column-gap: .875rem;
    row-gap: .15rem;
    align-items: center;
  }
  .contact-line-card > .ic,
  .contact-line-card > div:first-child {
    grid-area: icono;
    width: 42px; height: 42px;
    margin: 0;
    align-self: start;
  }
  .contact-line-card > .ic svg,
  .contact-line-card > div:first-child svg { width: 22px; height: 22px; }
  .contact-line-card h3 { grid-area: titulo; font-size: var(--txt-md); margin: 0; }
  .contact-line-card p:not(:last-child) {
    grid-area: desc;
    font-size: var(--txt-sm);
    margin: 0;
    color: var(--gray-600);
  }
  .contact-line-card a {
    grid-area: tel;
    margin-top: .5rem;
    justify-self: start;
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
  }
  .contact-line-card p:last-child {
    grid-area: hora;
    font-size: var(--txt-xs);
    margin: 0;
  }

  /* --- "Enlaces de interés" ---------------------------------------------
     Se probó a ponerlos en fichas redondeadas y salió el tiro por la culata:
     el relleno los hacía más anchos, cabía uno por línea y el pie creció.
     Ahora ese grupo se pliega como los demás (su rótulo pasó a ser un h3 de
     verdad en footer.php) y aquí solo se le quita aire. */
  .footer-ext { min-height: 40px; padding: 0; }

  /* Menos aire entre secciones: en el teléfono, 4 rem arriba y 4 abajo
     entre cada bloque suman más de una pantalla entera de nada. */
  main > section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .section-title { margin-bottom: 1.5rem !important; }
}

/* =========================================================================
 * 12 · QUE SE VEA QUE HAY MÁS TARJETAS
 * =========================================================================
 * Antes cada tarjeta ocupaba el ancho entero de la pista: se veía una y
 * parecía que no había nada más. La señal de que hay más contenido era que
 * la tarjeta se moviera sola, y eso estorba a quien lee despacio.
 *
 * La solución es la de siempre en un teléfono: que asome un trozo de la
 * siguiente. Se entiende sin explicar nada y sin que nada se mueva solo.
 * Además hay un degradado en el borde derecho que refuerza el aviso.
 * ====================================================================== */
@media (max-width: 1023px) {
  .carrusel-pista > * {
    /* Lo que sobra es la tarjeta siguiente asomando.
       Se probó con 86 % y asomaba tanto que se leían palabras cortadas por la
       mitad: en vez de "hay más", parecía que una tarjeta invadía a la otra.
       Con 92 % asoma solo el canto, como el borde de una carta debajo de otra,
       que es justo la señal y nada más. */
    flex-basis: 92%;
    scroll-snap-align: start;
  }

  /* TODAS DEL MISMO ALTO — y por qué con rejilla y no con flex.
     ---------------------------------------------------------------------
     Las tarjetas salían de distinto alto (128 a 202 px en Valores, 373 y 441
     en Noticias) y al deslizar la caja pegaba saltos.

     La causa era la misma en todos los casos: un `height: 100%` heredado. En
     un contenedor flex sin altura propia ese 100 % no se puede calcular, y
     encima anula el estirado, así que cada tarjeta se quedaba con el alto de
     su texto. Y en Noticias venía escrito con un selector de #id, imposible
     de ganar desde una clase.

     En una REJILLA la fila sí tiene altura definida —la de la tarjeta más
     alta—, así que ese mismo `height: 100%` se resuelve bien y todas quedan
     iguales. Se arregla de una vez, sin perseguir cada regla suelta. */
  .carrusel-pista {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 92%;
    align-items: stretch;
  }
  /* Con una sola tarjeta no debe sobrar hueco a la derecha. */
  .carrusel-pista:has(> :only-child) { grid-auto-columns: 100%; }

  /* Solo cuando hay más de una: con una sola tarjeta no debe asomar nada. */
  .carrusel-pista > :only-child { flex-basis: 100%; }

  /* SIN VELO, A PROPÓSITO.
     Hubo un degradado blanco en el borde derecho para tapar lo que asomaba.
     Servía cuando asomaba media tarjeta, pero se rompía en cuanto la tarjeta
     de al lado era oscura —como la de "Quiénes Somos"—: el blanco encima del
     azul se veía como un manchón descolorido, no como un degradado.

     Ya no hace falta: con las tarjetas al 92 % asoma solo el canto, y un
     canto no hay que taparlo. */
}


/* =========================================================================
 * 13 · LO QUE NO CABE EN 320 px
 * =========================================================================
 * A 320 px —que existe, y es el teléfono de mucha gente— tres cosas se salían
 * de la pantalla y provocaban desplazamiento horizontal accidental.
 * ====================================================================== */
@media (max-width: 560px) {
  /* La barra de arriba llevaba tres enlaces en una fila que a 320 px no cabía,
     y se llevaba por delante toda la página con desplazamiento horizontal.

     Hay que apuntar también al div interior —el que agrupa los tres enlaces—
     y usar !important: tanto la fila como el grupo llevan display:flex y gap
     escritos en el atributo style del HTML, y eso gana a cualquier clase. */
  .inst-bar .container,
  .govco-bar .container {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 0;
    column-gap: .75rem;
  }
  .inst-bar .container > div,
  .govco-bar .container > div {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 .75rem !important;
  }
  .inst-bar a, .govco-bar a { min-height: 34px; }

  /* Los mandos del carrusel se salían seis píxeles.
     Al agrandar flechas y puntos para el dedo, la fila entera pasó a medir
     más que la pantalla. Las flechas mantienen su tamaño —son lo que hay que
     poder pulsar— y lo que cede es la tira de puntos del medio. */
  .carrusel-mandos {
    max-width: 100%;
    gap: .35rem;
    padding: 0;
  }
  .carrusel-mandos .carrusel-flecha { flex: none; }
  .carrusel-puntos {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    justify-content: center;
  }

  /* Los botones "Descargar ↓" de Informes no cabían al lado del texto. */
  .govco-btn, .govco-btn-borde {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  .govco-card { flex-wrap: wrap; }
}


/* =========================================================================
 * 14 · LOS ÚLTIMOS RESQUICIOS
 * =========================================================================
 * Cosas que la auditoría siguió señalando después de la primera pasada.
 * Van juntas al final para que se vea de un vistazo qué quedaba suelto.
 * ====================================================================== */

/* --- Suelo de 13 px, esta vez sin excepciones -------------------------
   Varios textos llevan el tamaño escrito en el atributo style del propio
   HTML (font-size:.75rem = 12 px). Un estilo en línea gana a cualquier
   hoja, así que hay que nombrarlo y forzarlo. */
.contact-line-card p:last-child,
[style*="font-size:.75rem"],
[style*="font-size: .75rem"],
[style*="font-size:.6875rem"],
[style*="font-size: .6875rem"] { font-size: var(--txt-xs) !important; }

/* --- Enlaces de sección: "Ver todos los servicios →" -------------------
   Medían 17 px de alto. No llevan clase, así que se les llega por donde
   están: son el enlace que cierra una tarjeta de acceso. */
/* Los enlaces de acción que cierran una tarjeta ("Ver todos los servicios →")
   llevan su estilo escrito en el atributo style del HTML y no tienen clase,
   así que se les llega justo por ahí: son los únicos enlaces con negrita
   puesta en línea. Medían 17 px de alto. */
a[style*="font-weight:600"],
.tarjeta-pie {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* --- La franja legal del pie ------------------------------------------ */
.footer-legal a,
footer [style*="rgba(255,255,255,.85)"] {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* --- Teléfonos y correos: se pulsan para llamar o escribir ------------- */
a[href^="tel:"],
a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

/* --- Botones que se quedaron a un píxel -------------------------------- */
.carrusel-mas,
.hlpl-doc-ver,
.hlpl-doc-bajar { min-height: var(--tap); }

/* Los que quedaban por debajo del suelo de 13 px. */
.footer-ext,
.a11y-marca,
.govco-ayuda { font-size: var(--txt-xs); }

/* La tarjeta destacada de "Líneas de contacto" va sobre azul, y su párrafo
   heredaba el gris del resto: 1,63:1, ilegible. Sobre azul, texto claro. */
.contact-line-card.featured,
.contact-line-card.featured p,
.contact-line-card.featured h3 { color: #fff; }
.contact-line-card.featured p { color: rgba(255, 255, 255, .92); }
.contact-line-card.featured a { color: #fff; text-decoration: underline; }

/* --- Las migas de pan --------------------------------------------------
   "Inicio › Servicios › Urgencias" medía 16 px de alto. No es texto corrido:
   es una lista de navegación, así que la excepción de los enlaces en línea
   no le vale y hay que darle sitio para el dedo. */
nav[aria-label="Ruta de navegación"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .15rem;
}
nav[aria-label="Ruta de navegación"] a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 .15rem;
}

/* =========================================================================
 * 15 · LOS BOTONES FLOTANTES
 * =========================================================================
 * El de accesibilidad estaba pegado al borde izquierdo y centrado en vertical,
 * justo encima del texto: en la portada tapaba media frase del hero. Y en un
 * teléfono, el centro de la pantalla es donde está el contenido que se lee.
 *
 * Se baja a la esquina inferior izquierda, enfrente del de "volver arriba",
 * que vive en la derecha. Así ninguno tapa nada y los dos quedan donde el
 * pulgar llega sin estirarse.
 * ====================================================================== */
.a11y-launcher {
  top: auto;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: none;
  width: var(--tap);
  height: var(--tap);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.volver-arriba {
  width: var(--tap);
  height: var(--tap);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
}

/* La insignia de conexión es una herramienta del equipo, no del ciudadano:
   en el teléfono ocupa la misma esquina que el botón de accesibilidad. */
@media (max-width: 1023px) {
  .estado-api { display: none; }
}

/* Mientras el menú móvil está abierto, los flotantes no deben quedar
   encima de él. */
body.menu-movil-abierto .a11y-launcher,
body.menu-movil-abierto .volver-arriba { display: none; }

/* --- El hueco del principio -------------------------------------------
   El primer título del contenido lleva 2,5 rem de margen arriba, pensado
   para separarlo del párrafo anterior. Al principio no hay párrafo anterior:
   solo deja un vacío raro debajo de la banda azul. */
.contenido-wp > :first-child,
.contenido-wp > :first-child > :first-child { margin-top: 0; }

/* --- Que los flotantes no se sienten encima del último renglón ---------
   Los dos botones fijos viven en las esquinas de abajo. En la franja legal
   del final —"Mapa del sitio · Políticas de privacidad · Términos…"— caían
   justo encima de un enlace y lo tapaban. Se le da al pie el sitio que
   ocupan, contando además la barra del sistema en los móviles con muesca. */
@media (max-width: 1023px) {
  footer > :last-child,
  .footer-legal,
  .govco-pie {
    padding-bottom: calc(var(--tap) + 28px + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================================================================
 * 16 · LA TIERRA DE NADIE DE LA TABLET
 * =========================================================================
 * A 768 px la portada medía 6.305 px: MÁS que en un teléfono de 480, que
 * medía 5.115. Suena raro y tiene una explicación sencilla.
 *
 * Hay dos umbrales que no se hablaban entre sí:
 *   · El carrusel del teléfono entra por debajo de 640 px.
 *   · Las rejillas caen a UNA columna por debajo de 768 px.
 *
 * Entre 641 y 768 no había ni lo uno ni lo otro: tarjetas a todo el ancho,
 * una debajo de otra, sin carrusel que las recogiera. La franja más alta del
 * sitio era justo la de las tabletas.
 *
 * Con dos columnas en esa franja el espacio se aprovecha y la altura baja.
 * ====================================================================== */
@media (min-width: 641px) and (max-width: 1023px) {
  .grid-3, .grid-4, .grid-2, .grid-2-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

/* =========================================================================
 * 17 · EL FORMULARIO DE PQRSD
 * =========================================================================
 * Lo dibuja Contact Form 7 y llega con su propio HTML. Aquí solo se le pone
 * la ropa del sitio y, sobre todo, los ESTADOS: enviando, enviado, y qué
 * campo falta. Un formulario donde no se sabe si el envío salió es un
 * formulario en el que la gente no vuelve a confiar.
 *
 * OJO CON EL ALCANCE: todo esto colgaba de `.contenido-wp`, o sea que solo
 * vestía al formulario cuando venía dentro de una página de WordPress. Al
 * llevarlo a Contacto se quedó en cueros: campos de 19 px de alto y un botón
 * gris del navegador. En un teléfono eso no se puede ni pulsar. El formulario
 * es el mismo esté donde esté, así que las reglas ya no piden permiso de
 * contenedor: se enganchan a `.wpcf7-form`, que solo existe donde hay uno.
 * ====================================================================== */

/* Ni pegado a los bordes ni de punta a punta en un monitor grande: una
   columna de lectura cómoda, centrada. */
.pqrsd-formulario { max-width: 40rem; margin: 0 auto; }
.wpcf7 { margin: 1.5rem 0; }
.wpcf7-form p { margin: 0 0 1.125rem; }

/* Contact Form 7 mete sus campos ocultos en un <fieldset>. Los campos no se
   ven, pero el <fieldset> sí: el navegador le pinta su marco por defecto, y
   sobre el formulario salía una caja gris vacía encima del primer campo. */
.wpcf7-form .hidden-fields-container { display: none; }

.wpcf7-form label {
  display: block;
  font-weight: 600;
  font-size: var(--txt-sm);
  color: var(--gray-800);
  margin-bottom: .35rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  min-height: var(--tap);
  padding: .625rem .875rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--txt-base);   /* 16 px: por debajo, el iPhone hace zoom solo */
  color: var(--gray-800);
  background: #fff;
}
.wpcf7-form textarea { min-height: 8rem; resize: vertical; }

/* La lista desplegable se quedaba 4 px mas baja que las cajas de al lado: el
   navegador la mide a su manera y el relleno no le cunde igual. Cuatro pixeles
   no rompen nada, pero se ven, y una columna de campos desalineados da la
   impresion de que la pagina esta a medio hacer. */
.wpcf7-form select { min-height: 3rem; height: 3rem; }

.wpcf7-form input:focus-visible,
.wpcf7-form select:focus-visible,
.wpcf7-form textarea:focus-visible {
  outline: 3px solid var(--hospital-cyan);
  outline-offset: 1px;
  border-color: var(--hospital);
}

.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
  min-height: var(--tap);
  padding: 0 1.75rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--hospital);
  color: #fff;
  font: inherit;
  font-size: var(--txt-sm);
  font-weight: 700;
  cursor: pointer;
}
.wpcf7-form input[type="submit"]:hover { background: var(--hospital-dark); }
.wpcf7-form input[type="submit"]:disabled {
  background: var(--gray-400);
  cursor: progress;
}

/* --- El campo que falta ------------------------------------------------ */
.hlpl-campo-mal { border-color: var(--error) !important; }
.hlpl-campo-error {
  margin: .35rem 0 0 !important;
  font-size: var(--txt-xs);
  font-weight: 600;
  color: var(--error);
}

/* --- Cómo fue el envío -------------------------------------------------- */
.hlpl-form-aviso {
  margin-top: 1.25rem;
  padding: .875rem 1rem;
  border-radius: var(--radius);
  border-left: 4px solid;
  font-size: var(--txt-sm);
  line-height: 1.6;
}
.hlpl-form-aviso[data-tipo="enviando"] {
  border-color: var(--gray-400); background: var(--gray-50); color: var(--gray-600);
}
.hlpl-form-aviso[data-tipo="bien"] {
  border-color: var(--exito); background: #f0fdf4; color: #14532d; font-weight: 600;
}
.hlpl-form-aviso[data-tipo="mal"] {
  border-color: var(--error); background: #fef2f2; color: #7f1d1d; font-weight: 600;
}

/* Los avisos que trae Contact Form 7 por su cuenta se esconden: los suyos
   salen abajo del todo y sin estilo, y aquí ya se cuenta lo mismo mejor. */
.wpcf7-response-output,
.wpcf7-not-valid-tip { display: none; }

/* =============================================================================
 * LAS FICHAS DE QUIÉNES SOMOS EN EL TELÉFONO
 * =============================================================================
 * QUÉ SE VEÍA MAL
 *
 * Misión, Visión y Objetivos son fichas que se voltean: delante el título,
 * detrás una frase. Al voltearse, el reverso es azul institucional macizo, y
 * por eso su borde también es azul: sobre azul, un borde azul no se ve.
 *
 * Pero en el teléfono no existe "pasar por encima", así que ahí el volteo se
 * desactiva y las dos caras se apilan como una sola tarjeta blanca. El fondo
 * pasaba a blanco... y el borde se quedaba azul. Resultado: la mitad de abajo
 * de esas tres fichas llevaba una raya azul marino por tres lados, cortando la
 * tarjeta por la mitad. Eso es lo que se veía roto.
 *
 * Y de paso: cada cara pedía 15rem de alto por su cuenta, así que la tarjeta
 * apilada medía 30rem —el doble de lo necesario— con dos huecos vacíos dentro.
 *
 * QUÉ SE HACE
 *
 * 1. Se devuelve el borde a su color, y se quita la costura entre las dos
 *    caras: quien la mira debe ver UNA tarjeta, no dos pegadas.
 * 2. El alto lo pide la tarjeta entera, una vez, no cada cara.
 * 3. Las fichas se pintan con los colores del hospital. En el escritorio eso
 *    lo hace el puntero al pasar por encima; en el teléfono no hay puntero, y
 *    por eso quedaban blancas y sosas al lado de la primera, que sí es azul.
 *    Ahora la línea de color de arriba está siempre, el ícono va en azul
 *    institucional y el título también. El texto sigue en negro sobre blanco,
 *    que es lo que se lee bien: el color acompaña, no estorba.
 * ========================================================================== */

@media (hover: none) {

  /* --- 1. La costura ---------------------------------------------------- */
  .qs-volteable .qs-reverso {
    /* Esto es el arreglo: heredaba border-color: var(--hospital) del volteo. */
    border-color: var(--gray-200);
  }

  /* --- 2. El alto, una sola vez ----------------------------------------- */
  #qs-carrusel .qs-volteable          { min-height: 15rem; }
  #qs-carrusel .qs-volteable .qs-cara { min-height: 0; }
  #qs-carrusel .qs-volteable .qs-frente  { flex: none; }
  #qs-carrusel .qs-volteable .qs-reverso { flex: 1 1 auto; }

  /* --- 3. Los colores del hospital -------------------------------------- */

  /* OJO CON EL SELECTOR: `qs-intro` no está en la ficha, está en la CARA. Con
     `.qs-ficha:not(.qs-intro)` la primera tarjeta —la azul de presentación—
     entraba igual por la puerta, y se le ponía el ícono y el título en azul
     marino sobre su propio fondo azul marino: invisibles. Va en la cara. */

  /* La línea de arriba: en el escritorio crece al pasar el puntero; aquí no
     hay puntero, así que está puesta desde el principio. Solo en la cara de
     delante: en el reverso apilado saldría una segunda raya a media tarjeta. */
  .qs-cara:not(.qs-intro):not(.qs-reverso)::before { width: 100%; }
  .qs-reverso::before { display: none; }

  /* El ícono, macizo. Antes era un cuadrito azul muy pálido que en pantalla
     pequeña casi no se distinguía del blanco de la tarjeta. */
  .qs-cara:not(.qs-intro) .qs-icono {
    background: var(--hospital);
    color: #fff;
  }
  .qs-cara:not(.qs-intro) .qs-titulo { color: var(--hospital); }

  /* El borde, del azul más pálido de la casa en vez de gris neutro: ata la
     tarjeta a la marca sin gritar. */
  .qs-cara:not(.qs-intro) { border-color: #d5e0f0; }
}

/* =============================================================================
 * LA VENTANA DE QUIÉNES SOMOS EN EL IPHONE
 * =============================================================================
 * En las capturas del teléfono la ventana salía SIN su banda azul y sin el
 * título: se abría "Alianza de Usuarios" y lo que aparecía era un muro de
 * texto sin encabezado, sin saber de qué se estaba leyendo ni dónde estaba la
 * X para cerrar.
 *
 * No era el diseño: era la unidad `vh`. En Safari de iPhone, `100vh` es la
 * pantalla CON la barra de direcciones escondida, no la que se está viendo.
 * La ventana pedía `max-height: 88vh` y se anclaba abajo, así que se hacía más
 * alta que el hueco visible y lo que se salía por arriba era justo la banda
 * del título. En Chrome de escritorio no pasa, y por eso no se había visto.
 *
 * `dvh` es la misma medida pero de lo que de verdad se está viendo en ese
 * momento. Se deja `vh` escrito antes: el navegador que no entienda `dvh` se
 * queda con la línea anterior en vez de quedarse sin ninguna.
 * ========================================================================== */

.qs-modal-caja { max-height: min(85dvh, 46rem); }

@media (max-width: 640px) {
  .qs-modal-caja { max-height: 88dvh; }

  /* Y que el final del texto no quede debajo de la barra del iPhone. */
  .qs-modal { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}

/* --- El texto largo, más fácil de seguir --------------------------------- */
/* Documentos como el Código de Ética o la Alianza de Usuarios son párrafos de
   800 caracteres seguidos. No se toca ni una palabra —el texto es el del
   hospital— pero sí se le da aire: separación clara entre párrafos, para que
   se vea dónde acaba una idea, y cortes de línea que no dejan palabras
   sueltas al final. */
.qs-modal-cuerpo p { text-wrap: pretty; }
.qs-modal-cuerpo p + p { margin-top: 1.15em; }
.qs-modal-cuerpo ul, .qs-modal-cuerpo ol { margin: 1.15em 0; padding-left: 1.4em; }
.qs-modal-cuerpo li + li { margin-top: .5em; }
.qs-modal-cuerpo h2, .qs-modal-cuerpo h3, .qs-modal-cuerpo h4 {
  color: var(--hospital);
  margin-top: 1.6em;
}

/* =============================================================================
 * EL TEXTO DE LOS DOCUMENTOS, JUSTIFICADO — PERO NO EN EL TELÉFONO
 * =============================================================================
 * Justificar da presencia de documento oficial, y en una pantalla ancha se ve
 * mejor: el margen derecho queda recto y los huecos entre palabras casi no se
 * notan. Pero eso depende de cuántas palabras caben en una línea.
 *
 * Al justificar, el navegador estira los espacios hasta que la línea llegue al
 * margen. Si caben catorce palabras, el estiramiento se reparte entre trece
 * huecos y no se aprecia. Si caben cinco, se reparte entre cuatro, y se abren
 * zanjas blancas que cortan la lectura en vertical. Medido sobre el Código de
 * Ética, con la letra y el ancho reales de este sitio:
 *
 *     ancho    palabras/línea   el peor hueco        huecos que se ven raros
 *     320 px        5,2         33,6 px  (7,5×)              39 %
 *     390 px        7           15,7 px  (3,5×)              38 %
 *     768 px       14           14,8 px                      14 %
 *    1280 px       14           13,5 px                      14 %
 *
 * En castellano se nota más que en inglés: nuestras palabras son largas
 * —«responsabilidades», «confidencialidad»— y dejan menos sitio para repartir.
 *
 * Lo que normalmente rescata a la justificación en pantalla es partir palabras
 * a final de línea. Se pide aquí (`hyphens`), pero NO se cuenta con ello: se
 * comprobó y el Chrome de esta máquina no trae el diccionario de español, así
 * que no parte nada. Donde sí esté —Safari del iPhone, por ejemplo— mejora
 * sola; donde no, la línea de arriba (el corte en 768 px) es la que protege.
 *
 * De 768 px para arriba se justifica. Por debajo, se lee mejor con el margen
 * derecho irregular de siempre.
 * ========================================================================== */

@media (min-width: 768px) {
  .contenido-wp p,
  .contenido-wp li,
  .qs-modal-cuerpo p,
  .qs-modal-cuerpo li {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Los pies de foto y las celdas de tabla, no: son textos cortos donde una
     sola línea estirada de punta a punta canta muchísimo. */
  .contenido-wp figcaption,
  .contenido-wp td, .contenido-wp th,
  .qs-modal-cuerpo figcaption,
  .qs-modal-cuerpo td, .qs-modal-cuerpo th {
    text-align: left;
    hyphens: manual;
  }
}