/* ==========================================================================
   Clínica Estudios Oftalmológicos (CLEO)
   Hoja de estilos única. Sin dependencias, sin CDN, sin build.
   Colores tomados del logo institucional: #002F63 / #0060A0 / #0073A9
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marca */
  --marino-900: #00203F;
  --marino:     #002F63;
  --marino-600: #0A4079;
  --azul:       #0060A0;
  --azul-500:   #0073A9;
  --azul-400:   #2E96C9;
  --azul-300:   #7FC0DE;
  --cielo:      #E8F2F9;
  --cielo-50:   #F4F9FC;

  /* Apoyo */
  --ambar:      #F0A02B;
  --ambar-oscuro: #A35C00;
  --verde-wa:   #0E7A6D;   /* 5.22:1 con texto blanco. El verde de marca (#128C7E) daba 4.14 */
  --verde-wa-osc: #0B6E62;
  --rojo:       #B3261E;

  /* Neutros */
  --blanco:  #FFFFFF;
  --gris-50: #F7F9FA;
  --gris-100:#EDF1F4;
  --gris-200:#DDE4EA;
  --gris-300:#C3CDD6;
  --gris-500:#63727F;   /* 4.95:1 sobre blanco. #6B7A88 quedaba en 4.41 y no pasaba AA */
  --gris-700:#3E4C59;
  --gris-900:#1B2A38;

  /* Semánticos */
  --texto:        var(--gris-900);
  --texto-suave:  var(--gris-700);
  --texto-tenue:  var(--gris-500);
  --superficie:   var(--blanco);
  --superficie-2: var(--gris-50);
  --borde:        var(--gris-200);
  --enlace:       var(--azul);

  /* Tipografía */
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --paso--1: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --paso-0:  clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  --paso-1:  clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem);
  --paso-2:  clamp(1.375rem, 1.28rem + 0.5vw, 1.625rem);
  --paso-3:  clamp(1.625rem, 1.45rem + 0.9vw, 2.125rem);
  --paso-4:  clamp(2rem, 1.7rem + 1.5vw, 2.875rem);
  --paso-5:  clamp(2.375rem, 1.9rem + 2.4vw, 3.75rem);

  /* Espaciado (escala 4pt) */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 2.5rem;   --e-8: 3rem;
  --e-9: 4rem;     --e-10: 5rem;    --e-11: 6.5rem;

  /* Formas */
  --radio-s: 8px;  --radio: 14px;  --radio-l: 22px;  --radio-full: 999px;
  --sombra-1: 0 1px 2px rgba(0,47,99,.06), 0 2px 8px rgba(0,47,99,.06);
  --sombra-2: 0 2px 6px rgba(0,47,99,.08), 0 12px 28px rgba(0,47,99,.10);
  --sombra-3: 0 8px 20px rgba(0,47,99,.12), 0 24px 56px rgba(0,47,99,.14);

  --ancho: 1200px;
  --ancho-texto: 68ch;
  --transicion: 200ms cubic-bezier(.4,0,.2,1);
}

/* Cuerpo en 18px: es una clínica de ojos. El zoom del navegador hace el resto. */
html { font-size: 112.5%; }

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body {
  font-family: var(--fuente);
  font-size: var(--paso-0);
  line-height: 1.65;
  color: var(--texto);
  background: var(--superficie);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, video { display: block; max-width: 100%; height: auto; }
/* <picture> es solo un envoltorio: no debe introducir una caja que rompa el
   layout de la tarjeta o la figura que contiene a la imagen. */
picture { display: contents; }
.hero__figura picture, .articulo-tarjeta picture { display: block; }
/* Los SVG son iconos: van en línea con el texto y con un tamaño por defecto.
   Cada componente lo sobrescribe con su propia regla, que es más específica.
   Si fueran display:block romperían el renglón dentro de un enlace o párrafo. */
svg { display: inline-block; width: 1.15em; height: 1.15em; max-width: 100%;
      flex: none; vertical-align: -0.15em; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  line-height: 1.2; text-wrap: balance; color: var(--marino); font-weight: 700;
  /* El español médico tiene palabras muy largas ("Otorrinolaringología",
     "Facoemulsificación"). Sin esto se salen de su tarjeta en anchos justos
     como el del iPad en horizontal. El guionado necesita lang="es-CO",
     que el documento ya declara. */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: var(--paso-5); letter-spacing: -0.02em; }
h2 { font-size: var(--paso-4); letter-spacing: -0.015em; }
h3 { font-size: var(--paso-2); }
h4 { font-size: var(--paso-1); }
p, li { text-wrap: pretty; overflow-wrap: break-word; }
a { color: var(--enlace); text-underline-offset: 3px; }
a:hover { color: var(--marino); }
ul, ol { padding-left: 1.25em; }

:focus-visible {
  outline: 3px solid var(--azul-500);
  outline-offset: 3px;
  border-radius: 4px;
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }

/* --------------------------------------------------------------------------
   3. Utilidades
   -------------------------------------------------------------------------- */
/* [hidden] debe ganarle a cualquier display de componente (por ejemplo .boton) */
[hidden] { display: none !important; }

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.contenedor-estrecho { width: min(100% - 2.5rem, 820px); margin-inline: auto; }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar-al-contenido {
  position: absolute; left: var(--e-4); top: -100%; z-index: 200;
  background: var(--marino); color: #fff; padding: var(--e-3) var(--e-5);
  border-radius: 0 0 var(--radio-s) var(--radio-s); font-weight: 600; text-decoration: none;
  transition: top var(--transicion);
}
.saltar-al-contenido:focus { top: 0; color: #fff; }

.seccion { padding-block: clamp(3rem, 7vw, 6rem); }
.seccion--gris { background: var(--superficie-2); }
.seccion--cielo { background: var(--cielo-50); }
.seccion--marino { background: var(--marino); color: #fff; }
.seccion--marino h2, .seccion--marino h3 { color: #fff; }
.seccion--marino p { color: #D6E4F0; }

.cabecera-seccion { max-width: 62ch; margin-bottom: var(--e-7); }
.cabecera-seccion--centro { margin-inline: auto; text-align: center; }
.antetitulo {
  display: inline-block; font-size: var(--paso--1); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--azul-500);
  margin-bottom: var(--e-3);
}
.seccion--marino .antetitulo { color: var(--azul-300); }
.cabecera-seccion p { color: var(--texto-suave); font-size: var(--paso-1); margin-top: var(--e-3); }

.rejilla { display: grid; gap: var(--e-5); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
/* auto-fill, no auto-fit: un grupo con un solo especialista no debe estirarse
   a todo el ancho y agrandar su retrato de forma desproporcionada. */
.rejilla--equipo { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }

/* --------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  padding: .85em 1.6em; border-radius: var(--radio-full); border: 2px solid transparent;
  font-weight: 700; font-size: var(--paso-0); line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: background var(--transicion), color var(--transicion),
    border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
.boton svg { width: 1.15em; height: 1.15em; flex: none; }

.boton--principal { background: var(--azul); color: #fff; box-shadow: var(--sombra-1); }
.boton--principal:hover { background: var(--marino); color: #fff; box-shadow: var(--sombra-2); }

.boton--secundario { background: transparent; color: var(--marino); border-color: var(--gris-300); }
.boton--secundario:hover { border-color: var(--marino); background: var(--cielo); color: var(--marino); }

.boton--claro { background: #fff; color: var(--marino); }
.boton--claro:hover { background: var(--cielo); color: var(--marino); }

.boton--contorno-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.boton--contorno-claro:hover { background: #fff; color: var(--marino); border-color: #fff; }

.boton--wa { background: var(--verde-wa); color: #fff; }
.boton--wa:hover { background: var(--verde-wa-osc); color: #fff; }

.boton--bloque { width: 100%; }
.boton--grande { padding: 1em 2em; font-size: var(--paso-1); }

/* --------------------------------------------------------------------------
   5. Barra de accesibilidad + barra superior
   -------------------------------------------------------------------------- */
.barra-utilidad {
  background: var(--marino-900); color: #C9DCEC; font-size: var(--paso--1);
}
.barra-utilidad__interior {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4);
  padding-block: var(--e-2);
}
.barra-utilidad__interior > * { display: inline-flex; align-items: center; gap: .4em; }

/* En el teléfono solo se deja el número: es lo único accionable de esta barra.
   Con las tres cosas ocupaba tres renglones y empujaba el titular y el botón
   de cita fuera de la primera pantalla. */
@media (max-width: 620px) {
  .barra-utilidad__interior { justify-content: center; }
  .barra-utilidad__interior > *:not(:first-child) { display: none; }
}
.barra-utilidad a { color: #E3EEF7; text-decoration: none; }
.barra-utilidad a:hover { color: #fff; text-decoration: underline; }
.barra-utilidad__contactos { display: flex; flex-wrap: wrap; gap: var(--e-4); align-items: center; }
.barra-utilidad__contactos span,
.barra-utilidad__contactos a { display: inline-flex; align-items: center; gap: .4em; }
.barra-utilidad svg { width: 1em; height: 1em; opacity: .85; }

/* Debe poder envolverse: en pantallas angostas, un flex row sin wrap dentro de
   un contenedor centrado se desborda por ambos lados y saca la página del marco. */

@media (max-width: 860px) {
  .barra-utilidad__interior { justify-content: center; text-align: center; }
}
@media (max-width: 560px) {
  .barra-utilidad__contactos { gap: var(--e-3); font-size: .95em; }
}

/* --------------------------------------------------------------------------
   6. Encabezado y navegación
   -------------------------------------------------------------------------- */
/* Sin backdrop-filter a propósito: crea un bloque contenedor para los
   descendientes con position:fixed, lo que recortaba el panel del menú móvil
   dentro del encabezado en lugar de anclarlo al viewport. */
.encabezado {
  position: sticky; top: 0; z-index: 100; background: #fff;
  border-bottom: 1px solid var(--borde);
  transition: box-shadow var(--transicion), padding var(--transicion);
}
.encabezado.esta-fijo { box-shadow: var(--sombra-2); }
/* Puede envolverse: con el texto ampliado desde la barra de accesibilidad la
   navegación crece y, sin wrap, el botón de cita quedaba cortado por la derecha. */
.encabezado__interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3) var(--e-4); padding-block: var(--e-3); flex-wrap: wrap;
}
.marca { display: inline-flex; align-items: center; gap: var(--e-3); text-decoration: none; flex: none; }
.marca img { height: clamp(38px, 5vw, 52px); width: auto; transition: height var(--transicion); }
.encabezado.esta-fijo .marca img { height: clamp(34px, 4.2vw, 44px); }

.nav-principal ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); list-style: none; margin: 0; padding: 0; }
.nav-principal a {
  display: block; padding: .55em .68em; border-radius: var(--radio-s);
  color: var(--marino); font-weight: 600; text-decoration: none; font-size: var(--paso--1);
  letter-spacing: .01em; transition: background var(--transicion), color var(--transicion);
}
.nav-principal a:hover { background: var(--cielo); color: var(--marino); }
.nav-principal a[aria-current="page"] { color: var(--azul); background: var(--cielo); }

/* Submenú */
.tiene-submenu { position: relative; }
.tiene-submenu > button {
  display: inline-flex; align-items: center; gap: .35em; background: none; border: 0;
  padding: .55em .68em; border-radius: var(--radio-s); cursor: pointer;
  color: var(--marino); font-weight: 600; font-size: var(--paso--1); font-family: inherit;
}
.tiene-submenu > button:hover { background: var(--cielo); }
.tiene-submenu > button svg { width: .7em; height: .7em; transition: transform var(--transicion); }
.tiene-submenu > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.submenu {
  position: absolute; top: calc(100% + .5rem); left: 0; min-width: 19rem;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-3); padding: var(--e-2); display: none; flex-direction: column; gap: 2px;
}
.submenu.esta-abierto { display: flex; }
.submenu a { font-size: var(--paso--1); padding: .5em .7em; font-weight: 500; }


.alternar-menu {
  display: none; background: none; border: 2px solid var(--gris-300);
  border-radius: var(--radio-s); padding: .5em .7em; cursor: pointer; color: var(--marino);
}
.alternar-menu svg { width: 1.5rem; height: 1.5rem; }

@media (max-width: 1080px) {
  .alternar-menu { display: inline-flex; }
  .acciones-encabezado .boton--principal { display: none; }
  .nav-principal {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 24rem);
    background: #fff; box-shadow: var(--sombra-3); padding: 5.5rem var(--e-5) var(--e-6);
    transform: translateX(101%); transition: transform 260ms cubic-bezier(.4,0,.2,1);
    overflow-y: auto; z-index: 120;
  }
  .nav-principal.esta-abierto { transform: translateX(0); }
  .nav-principal ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-principal li { border-bottom: 1px solid var(--gris-100); }
  .nav-principal a, .tiene-submenu > button { padding: .9em .4em; width: 100%; font-size: var(--paso-0); }
  .tiene-submenu > button { justify-content: space-between; }
  .submenu {
    position: static; box-shadow: none; border: 0; border-radius: 0; min-width: 0;
    padding: 0 0 var(--e-3) var(--e-4); background: var(--cielo-50);
  }
  .nav-cierre { position: absolute; top: var(--e-5); right: var(--e-5); }
}
/* Fuera de la media query: el velo existe siempre y solo se hace visible con
   la clase, de modo que no depende de cambios de display para animar. */
/* z-index por debajo de .encabezado (100): el panel del menú vive dentro del
   encabezado, que crea contexto de apilamiento, así que un velo por encima de
   100 se pintaría sobre el propio menú y lo oscurecería. */
.velo {
  position: fixed; inset: 0; background: rgba(0,32,63,.55); z-index: 95;
  opacity: 0; pointer-events: none; transition: opacity var(--transicion);
}
.velo.esta-visible { opacity: 1; pointer-events: auto; }
@media (min-width: 1081px) { .velo { display: none; } }
@media (min-width: 1081px) { .nav-cierre { display: none; } }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(0,115,169,.55) 0%, transparent 55%),
    linear-gradient(150deg, var(--marino-900) 0%, var(--marino) 45%, #004E86 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 78%, rgba(255,255,255,.09) 0 26%, transparent 27%),
    radial-gradient(circle at 92% 82%, rgba(255,255,255,.06) 0 18%, transparent 19%);
}
.hero__interior {
  position: relative; z-index: 1;
  /* La columna de la foto va algo más ancha que la del texto. Con la foto
     vertical anterior no hacía falta: era alta y ya pesaba en la pantalla. La
     de los cuatro especialistas es apaisada, y con el reparto anterior quedaba
     pequeña al lado del titular. */
  /* stretch, no center: la foto va del alto del titular al de los botones.
     Y la columna de la foto es la ancha a propósito. La regla que no se puede
     romper: el hueco de la foto tiene que quedar MÁS APAISADO que la foto
     (1.16). Si queda más alto, object-fit recorta el ANCHO y se lleva por
     delante a los doctores de los extremos, que en el original ya están
     pegados al borde. Recortar alto no molesta: abajo solo hay piso. */
  display: grid; grid-template-columns: .88fr 1.12fr; gap: var(--e-7); align-items: start;
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(4.5rem, 9vw, 8rem);
}
.hero h1 { color: #fff; margin-bottom: var(--e-5); }
.hero h1 em { font-style: normal; color: var(--azul-300); }
.hero__texto { font-size: var(--paso-1); color: #D9E8F4; max-width: 42ch; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6); }
.hero__sellos { display: flex; flex-wrap: wrap; gap: var(--e-5); margin-top: var(--e-8); padding-top: var(--e-6); border-top: 1px solid rgba(255,255,255,.18); }
.hero__sello strong { display: block; font-size: var(--paso-3); color: #fff; line-height: 1.1; }
.hero__sello span { font-size: var(--paso--1); color: #A9C6DD; }
.hero__figura { position: relative; }
/* 5:4, no 4:5: la foto de portada es la de los cuatro especialistas, y en
   vertical el recorte dejaba fuera a los dos de los extremos. */
/* 7:6 es la proporción real de la foto (1320x1137 = 1.16). Al usarla, el
   navegador no recorta NADA: ni ancho ni alto. Con "stretch" la foto se
   estiraba hasta el bloque de cifras, quedaba más alta que ancha y se comía
   el 28% del ancho, o sea a los doctores de los extremos. */
.hero__figura img {
  border-radius: var(--radio-l); box-shadow: var(--sombra-3);
  width: 100%; aspect-ratio: 7/6; object-fit: cover;
}
/* La tarjeta del horario cuelga por fuera del borde izquierdo y por debajo.
   Antes se metía 1,5 rem dentro y tapaba el 13% de la foto: con la foto
   vertical anterior daba igual, pero con la de los cuatro especialistas
   se comía al primer doctor. Ahora solo pisa la esquina, que es piso. */
.hero__tarjeta {
  position: absolute; right: 1.25rem; bottom: -1.5rem; background: #fff; color: var(--texto);
  padding: var(--e-4) var(--e-5); border-radius: var(--radio); box-shadow: var(--sombra-3);
  display: flex; align-items: center; gap: var(--e-3); max-width: 16rem;
}
.hero__tarjeta svg { width: 2rem; height: 2rem; color: var(--azul); flex: none; }
.hero__tarjeta strong { display: block; color: var(--marino); font-size: var(--paso--1); }
.hero__tarjeta span { font-size: var(--paso--1); color: var(--texto-suave); }

@media (max-width: 960px) {
  .hero__interior { grid-template-columns: 1fr; gap: var(--e-7); }
  /* La foto va DESPUÉS del titular en pantallas pequeñas. Antes llevaba
     order:-1 y el paciente veía una foto antes de saber de qué se trata,
     con el botón de cita empujado fuera de la primera pantalla. */
  .hero__figura { max-width: 30rem; }
  /* Se mantiene el 5:4, no se aplana a 16:10.
     El 16:10 estaba aquí para que la foto VERTICAL anterior no ocupara media
     pantalla de teléfono. Con la foto de los cuatro especialistas hacía lo
     contrario: recortaba el 22% del ancho y dejaba fuera a los doctores de
     los extremos, que es justo lo que se veía "cortado" en el móvil. */
  .hero__figura img { aspect-ratio: 7/6; }
  .hero__tarjeta { left: auto; right: 1rem; bottom: -1rem; }
}
@media (max-width: 620px) {
  /* En móvil la tarjeta taparía la fotografía: mejor debajo, en flujo normal. */
  .hero__tarjeta { position: static; max-width: none; margin-top: var(--e-3); }
  .hero__figura { max-width: none; }
}

/* Hero interno de páginas */
.hero-pagina {
  background: linear-gradient(150deg, var(--marino-900), var(--marino) 60%, #004E86);
  color: #fff; padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.hero-pagina h1 { color: #fff; max-width: 22ch; }
.hero-pagina p { color: #CFE1EF; font-size: var(--paso-1); max-width: 60ch; margin-top: var(--e-4); }

/* Migas de pan */
.migas { font-size: var(--paso--1); margin-bottom: var(--e-4); }
.migas ol { display: flex; flex-wrap: wrap; gap: .45em; list-style: none; padding: 0; margin: 0; }
.migas li::after { content: "›"; margin-left: .45em; opacity: .6; }
.migas li:last-child::after { content: ""; }
.migas a { color: #BBD3E7; text-decoration: none; }
.migas a:hover { color: #fff; text-decoration: underline; }
.migas [aria-current] { color: #fff; font-weight: 600; }

/* --------------------------------------------------------------------------
   8. Tarjetas
   -------------------------------------------------------------------------- */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-3);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.tarjeta--enlace:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); border-color: var(--azul-300); }
.tarjeta h3 { font-size: var(--paso-2); }
.tarjeta p { color: var(--texto-suave); font-size: var(--paso--1); flex: 1; }
.tarjeta__icono {
  width: 3.25rem; height: 3.25rem; border-radius: var(--radio-s);
  background: var(--cielo); color: var(--azul);
  display: grid; place-items: center; flex: none;
}
.tarjeta__icono svg { width: 1.7rem; height: 1.7rem; }
.tarjeta__enlace {
  display: inline-flex; align-items: center; gap: .4em; font-weight: 700;
  color: var(--azul); text-decoration: none; font-size: var(--paso--1); margin-top: auto;
}
.tarjeta__enlace svg { width: .9em; height: .9em; transition: transform var(--transicion); }
.tarjeta--enlace:hover .tarjeta__enlace svg { transform: translateX(4px); }
a.tarjeta { text-decoration: none; color: inherit; }

/* Tarjeta de especialista */
.medico { text-align: left; padding: 0; overflow: hidden; }
.medico__foto { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--cielo); }
.medico__cuerpo { padding: var(--e-4) var(--e-5) var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); }
.medico__cuerpo h3 { font-size: var(--paso-1); }
.medico__rol { color: var(--azul); font-weight: 600; font-size: var(--paso--1); }
.medico__meta { color: var(--texto-tenue); font-size: var(--paso--1); }

/* Tarjeta de artículo */
.articulo-tarjeta { padding: 0; overflow: hidden; }
.articulo-tarjeta img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.articulo-tarjeta__cuerpo { padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-3); flex: 1; }
.etiqueta {
  display: inline-block; align-self: flex-start; background: var(--cielo); color: var(--marino);
  font-size: var(--paso--1); font-weight: 700; padding: .25em .8em; border-radius: var(--radio-full);
}
.etiqueta--ambar { background: #FDF0DA; color: var(--ambar-oscuro); }

/* Lista con chulos */
/* El marcador va posicionado, no como elemento flex: si la fila fuera flex,
   cada <strong> y cada nodo de texto se convertiría en un item independiente
   y el párrafo se partiría en trozos con espacios extra. */
.lista-chulos { list-style: none; padding: 0; display: grid; gap: var(--e-3); }
.lista-chulos li { position: relative; padding-left: 2.15rem; }
.lista-chulos li::before {
  content: ""; position: absolute; left: 0; top: .18em;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--cielo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230060A0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/.85rem no-repeat;
}
.seccion--marino .lista-chulos li::before { background-color: rgba(255,255,255,.15); }

/* Cifras */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--e-5); }
.cifra { text-align: center; }
.cifra strong { display: block; font-size: var(--paso-4); color: var(--azul-300); line-height: 1.05; }
.seccion:not(.seccion--marino) .cifra strong { color: var(--azul); }
.cifra span { font-size: var(--paso--1); color: inherit; opacity: .85; }

/* --------------------------------------------------------------------------
   9. Sedes
   -------------------------------------------------------------------------- */
.sede { display: flex; flex-direction: column; gap: var(--e-3); }
.sede__ciudad { display: flex; align-items: center; gap: var(--e-2); }
.sede__ciudad h3 { font-size: var(--paso-2); }
.insignia {
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--ambar); color: #3A2400; padding: .2em .6em; border-radius: var(--radio-full);
}
.sede dl { display: grid; gap: var(--e-2); margin: 0; font-size: var(--paso--1); }
.sede dt { font-weight: 700; color: var(--marino); }
.sede dd { margin: 0; color: var(--texto-suave); }
.sede__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: auto; padding-top: var(--e-3); }
.sede__acciones .boton { font-size: var(--paso--1); padding: .6em 1.2em; }

/* --------------------------------------------------------------------------
   10. Acordeón (preguntas frecuentes)
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--e-3); }
.faq details {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden;
}
.faq details[open] { border-color: var(--azul-300); box-shadow: var(--sombra-1); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-4) var(--e-5); cursor: pointer; font-weight: 700; color: var(--marino);
  list-style: none; font-size: var(--paso-1);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 1.4rem; height: 1.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230060A0' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--transicion);
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { background: var(--cielo-50); }
.faq__cuerpo { padding: 0 var(--e-5) var(--e-5); color: var(--texto-suave); }
.faq__cuerpo > * + * { margin-top: var(--e-3); }

/* Enlaces al final de cada síntoma, en sintomas.html. Van como pastillas y no
   como una lista de enlaces sueltos porque son la salida de la tarjeta: desde
   el síntoma al servicio o al artículo que lo explica. En el teléfono se
   envuelven solas, y cada una conserva área de toque suficiente. */
.sintoma__enlaces { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.sintoma__enlaces a {
  display: inline-block; padding: .45em .95em;
  background: var(--cielo-50); border: 1px solid var(--azul-300);
  border-radius: var(--radio-full); color: var(--marino);
  font-size: var(--paso--1); font-weight: 600; text-decoration: none;
  transition: background var(--transicion), color var(--transicion);
}
.sintoma__enlaces a:hover { background: var(--marino); color: #fff; }

/* --------------------------------------------------------------------------
   11. Testimonios
   -------------------------------------------------------------------------- */
.carrusel { position: relative; }
.carrusel__pista {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(100%, 30rem);
  gap: var(--e-5); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--e-4); scrollbar-width: thin;
}
.carrusel__pista > * { scroll-snap-align: start; }
.carrusel__controles { display: flex; gap: var(--e-2); justify-content: center; margin-top: var(--e-4); }
.carrusel__boton {
  width: 2.85rem; height: 2.85rem; border-radius: 50%; border: 2px solid var(--gris-300);
  background: #fff; color: var(--marino); cursor: pointer; display: grid; place-items: center;
  transition: all var(--transicion);
}
.carrusel__boton:hover { border-color: var(--azul); background: var(--azul); color: #fff; }
.carrusel__boton svg { width: 1.1rem; height: 1.1rem; }

.testimonio { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-6); display: flex; flex-direction: column; gap: var(--e-4); }
.testimonio blockquote { margin: 0; font-size: var(--paso-1); color: var(--texto); line-height: 1.6; }
.testimonio blockquote::before { content: "\201C"; display: block; font-size: 3rem; line-height: .6; color: var(--azul-300); margin-bottom: var(--e-2); }
.testimonio figcaption { margin-top: auto; font-size: var(--paso--1); color: var(--texto-tenue); }
.testimonio figcaption strong { display: block; color: var(--marino); font-size: var(--paso-0); }
.estrellas { color: var(--ambar); letter-spacing: .1em; }

/* --------------------------------------------------------------------------
   12. Comparador antes / después
   -------------------------------------------------------------------------- */
.comparador {
  position: relative; overflow: hidden; border-radius: var(--radio);
  border: 1px solid var(--borde); aspect-ratio: 3/2; touch-action: pan-y;
}
.comparador img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparador__despues { clip-path: inset(0 0 0 var(--pos, 50%)); }
.comparador__tirador {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 4px; margin-left: -2px;
  background: #fff; box-shadow: 0 0 0 1px rgba(0,47,99,.25);
}
.comparador__asa {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #fff; border: 0;
  box-shadow: var(--sombra-2); cursor: ew-resize; display: grid; place-items: center; color: var(--marino);
}
.comparador__asa svg { width: 1.3rem; height: 1.3rem; }
.comparador__rotulo {
  position: absolute; bottom: var(--e-3); background: rgba(0,32,63,.82); color: #fff;
  font-size: var(--paso--1); font-weight: 700; padding: .3em .9em; border-radius: var(--radio-full);
}
.comparador__rotulo--antes { left: var(--e-3); }
.comparador__rotulo--despues { right: var(--e-3); }

/* --------------------------------------------------------------------------
   13. Formularios
   -------------------------------------------------------------------------- */
.formulario { display: grid; gap: var(--e-4); }
.formulario__fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--e-4); }
.campo { display: grid; gap: var(--e-2); }
.campo label { font-weight: 600; color: var(--marino); font-size: var(--paso--1); }
.campo .requerido { color: var(--rojo); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .75em .9em; border: 1px solid var(--gris-300);
  border-radius: var(--radio-s); background: #fff; transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea { min-height: 7.5rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0,96,160,.18);
}
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"], .campo textarea[aria-invalid="true"] {
  border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(179,38,30,.14);
}
.campo__error { color: var(--rojo); font-size: var(--paso--1); font-weight: 600; min-height: 0; }
.campo__ayuda { color: var(--texto-tenue); font-size: var(--paso--1); }

.casilla { display: flex; align-items: flex-start; gap: var(--e-3); }
.casilla input { width: 1.35rem; height: 1.35rem; margin-top: .15em; flex: none; accent-color: var(--azul); }
.casilla label { font-weight: 400; font-size: var(--paso--1); color: var(--texto-suave); line-height: 1.5; }

.aviso-formulario {
  background: var(--cielo-50); border: 1px solid var(--azul-300); border-left-width: 5px;
  border-radius: var(--radio-s); padding: var(--e-4); font-size: var(--paso--1); color: var(--texto-suave);
}
.mensaje-estado { border-radius: var(--radio-s); padding: var(--e-4); font-weight: 600; }
.mensaje-estado--ok { background: #E6F4EA; color: #14532D; border: 1px solid #A7D8B8; }
.mensaje-estado--error { background: #FDECEA; color: #7F1D1D; border: 1px solid #F0B4AE; }

/* --------------------------------------------------------------------------
   14. Avisos
   -------------------------------------------------------------------------- */
.aviso {
  display: flex; gap: var(--e-4); padding: var(--e-5);
  border-radius: var(--radio); border: 1px solid var(--borde); background: var(--superficie-2);
}
.aviso svg { width: 1.6rem; height: 1.6rem; flex: none; margin-top: .15em; }
.aviso h3 { font-size: var(--paso-1); margin-bottom: var(--e-2); }
.aviso p { font-size: var(--paso--1); color: var(--texto-suave); }
.aviso--urgencia { background: #FEF3F2; border-color: #F5C2BE; }
.aviso--urgencia svg { color: var(--rojo); }
.aviso--urgencia h3 { color: #7F1D1D; }
.aviso--legal { background: #FFFBEB; border-color: #FCE3A8; }
.aviso--legal svg { color: var(--ambar-oscuro); }
.aviso--info { background: var(--cielo-50); border-color: var(--azul-300); }
.aviso--info svg { color: var(--azul); }

/* Marcador de contenido pendiente de la clínica */
.pendiente {
  background: repeating-linear-gradient(45deg, #FFF7E0, #FFF7E0 10px, #FFEFC7 10px, #FFEFC7 20px);
  border: 2px dashed var(--ambar-oscuro); color: var(--ambar-oscuro);
  padding: .15em .5em; border-radius: 4px; font-weight: 700; font-size: .9em;
}

/* --------------------------------------------------------------------------
   15. Convenios
   -------------------------------------------------------------------------- */
.convenios-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--e-3); }
.convenio {
  display: grid; place-items: center; text-align: center; min-height: 5.5rem; padding: var(--e-4);
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-s);
  font-weight: 700; color: var(--marino); font-size: var(--paso--1);
}

/* --------------------------------------------------------------------------
   16. Contenido de artículo
   -------------------------------------------------------------------------- */
.prosa { max-width: var(--ancho-texto); }
.prosa > * + * { margin-top: var(--e-4); }
.prosa h2 { font-size: var(--paso-3); margin-top: var(--e-8); }
.prosa h3 { font-size: var(--paso-2); margin-top: var(--e-6); }
.prosa p, .prosa li { color: var(--texto-suave); }
.prosa strong { color: var(--texto); }
.prosa ul, .prosa ol { display: grid; gap: var(--e-2); }
.prosa img { border-radius: var(--radio); margin-block: var(--e-6); }
.prosa blockquote {
  border-left: 4px solid var(--azul-300); padding-left: var(--e-5); margin-left: 0;
  font-size: var(--paso-1); color: var(--marino); font-style: italic;
}
.prosa table { width: 100%; border-collapse: collapse; font-size: var(--paso--1); }
.prosa th, .prosa td { border: 1px solid var(--borde); padding: var(--e-3); text-align: left; }
.prosa th { background: var(--cielo-50); color: var(--marino); }
.tabla-scroll { overflow-x: auto; }

.meta-articulo { display: flex; flex-wrap: wrap; gap: var(--e-4); font-size: var(--paso--1); color: #BBD3E7; margin-top: var(--e-4); }

/* Diseño con barra lateral */
.con-lateral { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--e-8); align-items: start; }
@media (max-width: 960px) { .con-lateral { grid-template-columns: 1fr; } }
.lateral { display: grid; gap: var(--e-5); position: sticky; top: 7rem; }
.lateral__caja { background: var(--cielo-50); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-5); }
.lateral__caja h3 { font-size: var(--paso-1); margin-bottom: var(--e-3); }
.lateral__caja ul { list-style: none; padding: 0; display: grid; gap: var(--e-2); font-size: var(--paso--1); }
.lateral__caja li { display: flex; align-items: flex-start; gap: .55em; }
.lateral__caja li > svg { width: 1.15em; height: 1.15em; flex: none; margin-top: .2em; color: var(--azul); }
.lateral__caja a { text-decoration: none; font-weight: 600; }
.lateral__caja a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   17. Llamado final
   -------------------------------------------------------------------------- */
.cta-final {
  background: linear-gradient(140deg, var(--marino) 0%, #004E86 60%, var(--azul-500) 100%);
  color: #fff; border-radius: var(--radio-l); padding: clamp(2rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--e-6); align-items: center;
}
.cta-final h2 { color: #fff; font-size: var(--paso-3); }
.cta-final p { color: #D6E4F0; margin-top: var(--e-3); }
.cta-final__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: flex-end; }
@media (max-width: 860px) {
  .cta-final { grid-template-columns: 1fr; }
  .cta-final__acciones { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   18. Pie de página
   -------------------------------------------------------------------------- */
.pie { background: var(--marino-900); color: #B9CFE2; padding-block: var(--e-9) var(--e-6); font-size: var(--paso--1); }
.pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--e-7); }
.pie h3 { color: #fff; font-size: var(--paso-0); margin-bottom: var(--e-4); }
.pie ul { list-style: none; padding: 0; display: grid; gap: var(--e-2); }
.pie a { color: #B9CFE2; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie__logo { height: 54px; width: auto; margin-bottom: var(--e-4); background: #fff; padding: .5rem .75rem; border-radius: var(--radio-s); }
.pie__sellos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); margin-top: var(--e-5); }
.pie__sellos img { background: #fff; padding: .4rem .6rem; border-radius: var(--radio-s); height: 46px; width: auto; }
.pie__redes { display: flex; gap: var(--e-3); margin-top: var(--e-5); }
.pie__redes a {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.22);
  display: grid; place-items: center; transition: all var(--transicion);
}
.pie__redes a:hover { background: #fff; color: var(--marino); border-color: #fff; }
.pie__redes svg { width: 1.15rem; height: 1.15rem; }
.pie__base {
  margin-top: var(--e-8); padding-top: var(--e-5); border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: var(--e-4); justify-content: space-between; align-items: center;
  font-size: var(--paso--1);
}
.pie__legal { display: flex; flex-wrap: wrap; gap: var(--e-4); }
@media (max-width: 900px) { .pie__rejilla { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } }

/* --------------------------------------------------------------------------
   19. Botón flotante de WhatsApp
   -------------------------------------------------------------------------- */
.wa-flotante {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
  /* Arranca oculto y aparece al bajar: en la primera pantalla el hero ya
     tiene su propio botón de WhatsApp y el flotante lo tapaba. */
  opacity: 0; visibility: hidden; transform: translateY(1rem);
  transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion), background var(--transicion);
  display: inline-flex; align-items: center; gap: var(--e-3);
  background: var(--verde-wa); color: #fff; text-decoration: none; font-weight: 700;
  padding: .8em 1.3em; border-radius: var(--radio-full); box-shadow: var(--sombra-3);
  transition: transform var(--transicion), background var(--transicion);
}
body.ha-bajado .wa-flotante { opacity: 1; visibility: visible; transform: none; }
.wa-flotante:hover { background: var(--verde-wa-osc); color: #fff; transform: translateY(-3px); }
/* Sin JavaScript el botón debe verse igual: es la vía de contacto principal. */
html:not(.js) .wa-flotante { opacity: 1; visibility: visible; transform: none; }
.wa-flotante svg { width: 1.6rem; height: 1.6rem; flex: none; }
@media (max-width: 600px) {
  .wa-flotante span { display: none; }
  .wa-flotante { padding: .95em; right: .85rem; bottom: .85rem; }
}

/* --------------------------------------------------------------------------
   20. Animación de aparición
   -------------------------------------------------------------------------- */
/* Solo se oculta si hay JavaScript disponible para volver a mostrarlo.
   Sin JS, o si el observador nunca dispara, el contenido se ve siempre. */
html.js .aparece { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms ease; }
html.js .aparece.es-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .aparece { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   21. Áreas táctiles
   Solo en dispositivos de puntero grueso (dedo). Sube los controles a 44px de
   alto útil sin alterar la densidad visual en escritorio con mouse.
   Los enlaces dentro de un párrafo quedan fuera a propósito: agrandarlos
   rompería el interlineado y la pauta de accesibilidad los exceptúa.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .barra-utilidad__contactos a,
  .barra-utilidad__contactos span {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .marca { min-height: 44px; }
  .nav-principal a,
  .tiene-submenu > button { min-height: 44px; display: flex; align-items: center; }
  .submenu a { min-height: 44px; }
  .pie ul a,
  .pie__legal a { min-height: 40px; display: inline-flex; align-items: center; }
  .lateral__caja ul a { min-height: 40px; display: inline-flex; align-items: center; }
  .carrusel__boton { width: 3rem; height: 3rem; }
  .comparador__asa { width: 3rem; height: 3rem; }
}

/* --------------------------------------------------------------------------
   22. Impresión
   -------------------------------------------------------------------------- */
@media print {
  .barra-utilidad, .encabezado, .wa-flotante, .pie__redes, .carrusel__controles, .cta-final { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .seccion { padding-block: 1rem; }
}

/* --------------------------------------------------------------------------
   23. Glosario
   -------------------------------------------------------------------------- */
.glosario__indice {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  padding: var(--e-4); background: var(--cielo-50);
  border-radius: var(--radio); margin-bottom: var(--e-7);
}
.glosario__inicial {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; min-height: 2.4rem; padding: 0 .5em;
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio-s); font-weight: 700; text-decoration: none;
  color: var(--marino);
}
.glosario__inicial:hover { background: var(--marino); color: #fff; border-color: var(--marino); }
.glosario__grupo { margin-bottom: var(--e-8); scroll-margin-top: 7rem; }
.glosario__letra {
  font-size: var(--paso-2); color: var(--azul-500);
  border-bottom: 2px solid var(--borde); padding-bottom: var(--e-2);
  margin-bottom: var(--e-5);
}
.glosario__item { margin-bottom: var(--e-5); scroll-margin-top: 7rem; }
.glosario__item h3 { font-size: var(--paso-1); margin-bottom: var(--e-1); }
.glosario__item p { color: var(--texto-suave); }
@media (pointer: coarse) { .glosario__inicial { min-width: 44px; min-height: 44px; } }


/* --------------------------------------------------------------------------
   24. Preferencias del sistema operativo
   El sitio ya no tiene botones de accesibilidad: el paciente configura esto una
   sola vez en su teléfono o computador y todos los sitios lo respetan. Eso es
   más fiable que pedirle que lo ajuste aquí, y no ocupa espacio en pantalla.
   -------------------------------------------------------------------------- */

/* Alto contraste del sistema (macOS, iOS, Windows) */
@media (prefers-contrast: more) {
  :root {
    --texto: #000;
    --texto-suave: #000;
    --texto-tenue: #1B2A38;
    --borde: #000;
    --enlace: #00417A;
    --azul: #00417A;
    --azul-500: #00417A;
  }
  .tarjeta, .campo input, .campo select, .campo textarea { border-width: 2px; }
  a { text-decoration: underline; }
}

/* Modo de contraste forzado de Windows */
@media (forced-colors: active) {
  .boton { border: 1px solid ButtonText; }
  .tarjeta { border: 1px solid CanvasText; }
  svg { forced-color-adjust: auto; }
}

/* --------------------------------------------------------------------------
   25. Compactar el inicio en móvil
   El inicio llegaba a 17,5 pantallas de scroll en un teléfono. Las rejillas
   de una sola columna eran la causa: seis tarjetas apiladas ocupaban tres
   pantallas ellas solas. En dos columnas la información se ve igual de bien
   y el visitante llega antes al botón de cita.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* minmax(0,1fr) y no 1fr: sin el 0 una palabra larga estira su columna
     y las dos tarjetas quedan de anchos distintos. */
  .rejilla--compacta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
  .rejilla--compacta .tarjeta { padding: var(--e-4); }
  .rejilla--compacta .tarjeta h3 { font-size: var(--paso-1); }
  .rejilla--compacta .tarjeta p { font-size: var(--paso--1); }
  .rejilla--compacta .tarjeta__icono { width: 2.4rem; height: 2.4rem; margin-bottom: var(--e-2); }
  .rejilla--compacta .tarjeta__icono svg { width: 1.3rem; height: 1.3rem; }
  /* El "Ver el servicio" sobra cuando la tarjeta entera ya es un enlace */
  .rejilla--compacta .tarjeta__enlace { display: none; }

  /* Las tarjetas de artículo con foto grande ocupaban casi una pantalla cada
     una. En móvil la imagen pasa a ser una franja y el texto manda. */
  .articulo-tarjeta picture { display: block; }
  .articulo-tarjeta img { aspect-ratio: 16/7; object-fit: cover; }
  .articulo-tarjeta__cuerpo { padding: var(--e-4); }
  .articulo-tarjeta h3 { font-size: var(--paso-1); }

  /* Secciones algo más juntas: son ocho, y cada una sumaba 108 px de aire */
  .seccion { padding-block: clamp(2.25rem, 7vw, 6rem); }
}

/* --------------------------------------------------------------------------
   26. Pie compacto en móvil
   El pie ocupaba 2,6 pantallas de teléfono, más que cualquier sección del
   contenido. Se apilaba en una sola columna con mucho aire entre bloques.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .pie { padding-block: var(--e-7) var(--e-5); }
  .pie__rejilla { gap: var(--e-6); }
  .pie__rejilla h3 { margin-bottom: var(--e-2); font-size: var(--paso-0); }
  /* Las listas de enlaces del pie, a dos columnas: son cortas y así el pie
     deja de ser la parte más larga de la página en un teléfono. */
  .pie__rejilla ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e-4); }
  .pie__rejilla ul li { margin-bottom: 0; }
  .pie ul a { min-height: 38px; }
  .pie__sellos { gap: var(--e-3); margin-top: var(--e-4); }
  .pie__legal { gap: var(--e-2) var(--e-4); }
}

/* Tarjeta de servicio con enlaces a su versión por ciudad */
.tarjeta__cabecera { display: block; text-decoration: none; color: inherit; }
.tarjeta__cabecera:hover h3 { color: var(--azul); }
.tarjeta__ciudades {
  margin-top: var(--e-2); font-size: var(--paso--1); color: var(--texto-tenue);
}
.tarjeta__ciudades a { color: var(--enlace); text-decoration: none; font-weight: 600; }
.tarjeta__ciudades a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   27. Enrutador de contacto y chat web
   El botón flotante ya no es un enlace directo a WhatsApp: abre un panel que
   pregunta sede y motivo, y solo entonces entrega UNA salida. Antes el sitio
   mandaba a todos los pacientes al mismo número, que es de una sola sede.
   -------------------------------------------------------------------------- */
.atn-flotante {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
  opacity: 0; visibility: hidden; transform: translateY(1rem);
  display: inline-flex; align-items: center; gap: var(--e-3);
  background: var(--verde-wa); color: #fff; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; padding: .8em 1.3em;
  border-radius: var(--radio-full); box-shadow: var(--sombra-3);
  transition: opacity var(--transicion), transform var(--transicion),
              visibility var(--transicion), background var(--transicion);
}
body.ha-bajado .atn-flotante { opacity: 1; visibility: visible; transform: none; }
html:not(.js) .atn-flotante { opacity: 1; visibility: visible; transform: none; }
.atn-flotante:hover { background: var(--verde-wa-osc); transform: translateY(-3px); }
.atn-flotante__ico { display: inline-flex; }
.atn-flotante__ico svg { width: 1.6rem; height: 1.6rem; display: block; }
body.atn-abierto .atn-flotante { opacity: 0; visibility: hidden; }

@media (max-width: 600px) {
  /* En el teléfono el botón se queda SIEMPRE a la vista, no solo al bajar.
     En escritorio la portada ya tiene su propio botón de cita y el flotante
     lo duplicaba en la primera pantalla; en el móvil, en cambio, ese botón se
     va apenas el paciente empieza a leer, y entonces no hay ninguna forma de
     escribir sin volver arriba. */
  .atn-flotante {
    opacity: 1; visibility: visible; transform: none;
    right: .85rem; bottom: .85rem; padding: .85em 1.2em;
    /* Por encima de la barra de gestos del sistema en iPhone. */
    bottom: calc(.85rem + env(safe-area-inset-bottom, 0px));
  }
  body.ha-bajado .atn-flotante { opacity: 1; visibility: visible; }
  .atn-flotante__texto { display: inline; font-size: var(--paso--1); }

  /* Hueco al final para que el botón flotante no tape el final del documento.
     Mientras se baja, un botón fijo pasa por encima del texto y no pasa nada:
     se sigue bajando y el texto aparece. Al llegar al final del pie ya no
     queda nada que bajar, así que lo que quede debajo del botón se queda
     tapado para siempre. Ahí estaba justo el aviso legal ("La información
     publicada en este sitio tiene fines educativos..."), ilegible en el
     teléfono en las 90 páginas.

     La reserva es la altura del botón (unos 60 px) más su separación de
     abajo, más el área segura del iPhone, que es la misma cuenta que usa el
     propio botón unas líneas más arriba. */
  .pie { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* Panel ------------------------------------------------------------------ */
.atn {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 95;
  width: min(24rem, calc(100vw - 2.2rem));
  max-height: min(34rem, calc(100vh - 2.2rem));
  display: flex; flex-direction: column;
  background: var(--superficie); border-radius: var(--radio-3);
  box-shadow: 0 1.5rem 3rem rgba(0, 32, 63, .28); overflow: hidden;
  border: 1px solid var(--borde);
}
.atn[hidden] { display: none; }

.atn__cabecera {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-4); background: var(--marino); color: #fff;
}
.atn__textos { flex: 1; min-width: 0; }
.atn__titulo { margin: 0; font-weight: 700; font-size: var(--paso-0); line-height: 1.25; }
.atn__sub { margin: .15rem 0 0; font-size: var(--paso--1); opacity: .8; }
.atn__atras, .atn__cerrar {
  flex: none; width: 2rem; height: 2rem; display: inline-flex;
  align-items: center; justify-content: center; padding: 0;
  background: transparent; border: 0; color: #fff; cursor: pointer;
  border-radius: var(--radio-full);
}
.atn__atras:hover, .atn__cerrar:hover { background: rgba(255,255,255,.16); }
.atn__atras svg, .atn__cerrar svg { width: 1.25rem; height: 1.25rem; }
.atn__atras[hidden] { display: none; }

.atn__cuerpo { padding: var(--e-4); overflow-y: auto; flex: 1; }
.atn__cuerpo--chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; }

/* Opciones (sede y área) -------------------------------------------------- */
.atn-opciones { display: grid; gap: var(--e-2); }
.atn-opcion {
  position: relative; display: block; width: 100%; text-align: left;
  padding: var(--e-3) var(--e-4); font: inherit; cursor: pointer;
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--radio-2); transition: border-color var(--transicion), background var(--transicion);
}
.atn-opcion:hover { background: var(--cielo-50); border-color: var(--azul-300); }
.atn-opcion:focus-visible { outline: 3px solid var(--azul-400); outline-offset: 2px; }
.atn-opcion__nombre { display: block; font-weight: 650; color: var(--marino); padding-right: 4.5rem; }
.atn-opcion__detalle {
  display: block; margin-top: .15rem; font-size: var(--paso--1);
  color: var(--texto-tenue); line-height: 1.4;
}
.atn-estado {
  position: absolute; top: var(--e-3); right: var(--e-3);
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  padding: .15rem .5rem; border-radius: var(--radio-full);
}
.atn-estado--si { background: #DCF3E7; color: #0B6E62; }
.atn-estado--no { background: var(--gris-100); color: var(--gris-700); }

.atn-nota {
  margin: var(--e-3) 0 0; font-size: var(--paso--1);
  color: var(--texto-tenue); line-height: 1.45;
}
.atn-nota--tenue { font-size: .8rem; opacity: .85; }

/* Aviso de horario -------------------------------------------------------- */
.atn-aviso {
  display: grid; gap: .1rem; padding: var(--e-3);
  border-radius: var(--radio-2); margin-bottom: var(--e-4);
  font-size: var(--paso--1); line-height: 1.4;
}
.atn-aviso strong { font-size: var(--paso-0); }
.atn-aviso span { color: var(--texto-suave); }
.atn-aviso--si { background: #DCF3E7; color: #0B5D53; }
.atn-aviso--si span { color: #0B5D53; opacity: .85; }
.atn-aviso--no { background: #FDF1DE; color: var(--ambar-oscuro); }
.atn-aviso--no span { color: var(--ambar-oscuro); opacity: .9; }

/* Botones de salida ------------------------------------------------------- */
.atn-acciones { display: grid; gap: var(--e-2); }
.atn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  width: 100%; padding: .8em 1em; font: inherit; font-weight: 650; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radio-2);
  text-decoration: none; text-align: center; line-height: 1.25;
  transition: background var(--transicion), border-color var(--transicion);
}
.atn-btn .atn-ico { display: inline-flex; flex: none; }
.atn-btn .atn-ico svg { width: 1.2rem; height: 1.2rem; display: block; }
.atn-btn--wa { background: var(--verde-wa); color: #fff; }
.atn-btn--wa:hover { background: var(--verde-wa-osc); color: #fff; }
.atn-btn--chat { background: var(--azul); color: #fff; }
.atn-btn--chat:hover { background: var(--marino-600); color: #fff; }
.atn-btn--chat:disabled { opacity: .6; cursor: default; }
.atn-btn--suave {
  background: var(--superficie); color: var(--marino);
  border-color: var(--borde); font-weight: 600;
}
.atn-btn--suave:hover { background: var(--cielo-50); border-color: var(--azul-300); color: var(--marino); }
.atn-acciones .atn-nota { margin-top: -.15rem; margin-bottom: var(--e-2); }

/* Formulario de identificación ------------------------------------------- */
.atn-form { display: grid; gap: var(--e-3); }
.atn-campo { display: grid; gap: .25rem; font-size: var(--paso--1); }
.atn-campo > span { font-weight: 650; color: var(--marino); }
.atn-campo input {
  width: 100%; padding: .6em .75em; font: inherit;
  border: 1px solid var(--gris-300); border-radius: var(--radio-1);
  background: var(--superficie); color: var(--texto);
}
.atn-campo input:focus-visible { outline: 3px solid var(--azul-400); outline-offset: 1px; border-color: var(--azul); }
.atn-campo small { color: var(--texto-tenue); font-size: .78rem; }
.atn-casilla {
  display: flex; gap: var(--e-2); align-items: flex-start;
  font-size: .82rem; color: var(--texto-suave); line-height: 1.45;
}
.atn-casilla input { margin-top: .2rem; flex: none; width: 1.05rem; height: 1.05rem; }
.atn-casilla a { color: var(--enlace); }
.atn-error { margin: 0; color: var(--rojo); font-size: var(--paso--1); min-height: 1.2em; }

/* Hilo de conversación ---------------------------------------------------- */
.atn-hilo {
  flex: 1; overflow-y: auto; padding: var(--e-4);
  display: flex; flex-direction: column; gap: var(--e-2);
  background: var(--cielo-50); min-height: 12rem;
  overscroll-behavior: contain;
}
.atn-msj {
  max-width: 85%; padding: .55rem .75rem; border-radius: var(--radio-2);
  font-size: var(--paso--1); line-height: 1.45; word-wrap: break-word;
}
.atn-msj p { margin: 0; white-space: pre-wrap; }
.atn-msj--entrante { align-self: flex-end; background: var(--azul); color: #fff; }
.atn-msj--saliente { align-self: flex-start; background: var(--superficie); border: 1px solid var(--borde); }
.atn-msj--sistema {
  align-self: center; max-width: 100%; text-align: center;
  background: transparent; color: var(--texto-tenue); font-size: .8rem; padding: .35rem 0;
}
.atn-msj--pendiente { opacity: .6; }
.atn-msj__autor {
  display: block; font-size: .72rem; font-weight: 700;
  color: var(--azul); margin-bottom: .1rem;
}

.atn-escribir {
  display: flex; gap: var(--e-2); align-items: flex-end;
  padding: var(--e-3); border-top: 1px solid var(--borde); background: var(--superficie);
}
.atn-escribir textarea {
  flex: 1; resize: none; font: inherit; padding: .5em .7em; max-height: 7.5rem;
  border: 1px solid var(--gris-300); border-radius: var(--radio-2);
  background: var(--superficie); color: var(--texto); line-height: 1.4;
}
.atn-escribir textarea:focus-visible { outline: 2px solid var(--azul-400); outline-offset: 1px; }
.atn-enviar {
  flex: none; width: 2.4rem; height: 2.4rem; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--azul); color: #fff; border: 0; border-radius: var(--radio-full);
}
.atn-enviar:hover { background: var(--marino-600); }
.atn-enviar svg { width: 1.15rem; height: 1.15rem; }

/* En teléfono el panel ocupa la pantalla: un chat de 24 rem en un móvil
   deja el teclado tapando la conversación. */
@media (max-width: 600px) {
  .atn {
    right: 0; bottom: 0; left: 0; top: 0;
    width: 100%; max-height: none; border-radius: 0; border: 0;
  }
  .atn__cabecera { padding: var(--e-4) var(--e-3); }

  /* Volver y cerrar pasan a 44 px, el mínimo recomendado para tocar con el
     dedo. A 36 px se fallaba el toque, y fallar el botón de cerrar en un
     panel a pantalla completa deja al paciente sintiéndose atrapado. */
  .atn__atras, .atn__cerrar { width: 2.75rem; height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .atn-flotante { transition: none; }
  .atn-flotante:hover { transform: none; }
}

/* Tabla pública de canales, en contacto.html ------------------------------ */
.canales { display: grid; gap: var(--e-5); }
.canales__sede {
  border: 1px solid var(--borde); border-radius: var(--radio-3);
  overflow: hidden; background: var(--superficie);
}
.canales__cab { padding: var(--e-4); background: var(--cielo-50); border-bottom: 1px solid var(--borde); }
.canales__cab h3 { margin: 0; color: var(--marino); font-size: var(--paso-1); }
.canales__cab p { margin: .2rem 0 0; font-size: var(--paso--1); color: var(--texto-tenue); }
.canales__tabla { width: 100%; border-collapse: collapse; font-size: var(--paso--1); }
.canales__tabla th, .canales__tabla td {
  padding: var(--e-3) var(--e-4); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--gris-100);
}
.canales__tabla th { font-weight: 700; color: var(--marino); width: 34%; }
.canales__tabla tr:last-child th, .canales__tabla tr:last-child td { border-bottom: 0; }
.canales__tabla a { color: var(--enlace); font-weight: 600; text-decoration: none; }
.canales__tabla a:hover { text-decoration: underline; }
.canales__horario { display: block; margin-top: .2rem; color: var(--texto-tenue); }
.canales__interno { display: block; font-weight: 400; color: var(--texto-tenue); font-size: .8rem; }

@media (max-width: 640px) {
  .canales__tabla, .canales__tabla tbody, .canales__tabla tr,
  .canales__tabla th, .canales__tabla td { display: block; width: auto; }
  .canales__tabla tr { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--gris-100); }
  .canales__tabla th, .canales__tabla td { padding: 0; border: 0; }
  .canales__tabla td { margin-top: .25rem; }
}

/* Texto solo para lectores de pantalla. Lo usan los <caption> de las tablas
   de canales: dan contexto a quien navega con lector, sin ocupar espacio. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* El atributo hidden debe ganarle SIEMPRE a cualquier regla de display.
   Sin esto, un elemento con display:inline-flex o display:grid se sigue
   viendo aunque lleve hidden. Es lo que hacía que el botón "Enviar por
   correo" del formulario de cita estuviera visible desde el principio, y que
   el estado vacío de la consola se pintara encima de la conversación. */
[hidden] { display: none !important; }

/* Acceso del personal a la consola de atención, en el pie.
   Deliberadamente apagado: es para quien ya sabe que existe, no una llamada
   a la acción para el paciente. Al pasar el cursor recupera contraste, para
   que no parezca un texto desactivado. */
.pie__acceso { opacity: .5; }
.pie__acceso:hover, .pie__acceso:focus-visible { opacity: 1; }

/* La línea de "¿prefiere llamar?" del paso final. Deliberadamente pequeña:
   está para quien la busca, no para competir con las dos salidas de arriba. */
.atn-llamar {
  margin: var(--e-4) 0 0; text-align: center;
  font-size: var(--paso--1); color: var(--texto-tenue);
}
.atn-llamar a { color: var(--enlace); font-weight: 600; }

/* --------------------------------------------------------------------------
   Página de contacto simplificada
   --------------------------------------------------------------------------
   Un solo camino visible. Las líneas directas quedan plegadas: las necesita
   quien ya sabe a qué área va, no el paciente que llega perdido.
   -------------------------------------------------------------------------- */
.sedes-simples {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.sede-simple {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-3); padding: var(--e-5);
}
.sede-simple h3 { margin: 0 0 var(--e-2); color: var(--marino); font-size: var(--paso-1); }
.sede-simple p { margin: 0 0 var(--e-2); color: var(--texto-suave); font-size: var(--paso--1); }
.sede-simple a { color: var(--enlace); text-decoration: none; font-weight: 600; }
.sede-simple a:hover { text-decoration: underline; }
.sede-simple svg { width: 1rem; height: 1rem; vertical-align: -.15em; }

.lineas {
  border: 1px solid var(--borde); border-radius: var(--radio-3);
  background: var(--superficie-2);
}
.lineas > summary {
  padding: var(--e-4) var(--e-5); cursor: pointer;
  font-weight: 650; color: var(--marino); font-size: var(--paso-0);
}
.lineas > summary:hover { color: var(--azul); }
.lineas[open] > summary { border-bottom: 1px solid var(--borde); }
.lineas__aviso {
  margin: 0; padding: var(--e-4) var(--e-5) 0;
  font-size: var(--paso--1); color: var(--texto-tenue); line-height: 1.5;
}
.lineas .canales { padding: var(--e-4) var(--e-5) var(--e-5); }

/* Ayuda de la repregunta de prioridad: va ARRIBA de las opciones, porque el
   paciente necesita saber qué cuenta como prioritario antes de responder. */
.atn-nota--arriba { margin: 0 0 var(--e-3); }