/* ==========================================================================
   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);
}

/* Escala de texto accesible (control en la barra de accesibilidad) */
html { font-size: 112.5%; }                 /* 18px base */
html[data-texto="grande"] { font-size: 125%; }    /* 20px */
html[data-texto="xl"]     { font-size: 137.5%; }  /* 22px */

/* Modo alto contraste */
html[data-contraste="alto"] {
  --texto: #000000;
  --texto-suave: #000000;
  --texto-tenue: #1B2A38;
  --borde: #000000;
  --superficie-2: #FFFFFF;
  --cielo: #FFFFFF;
  --cielo-50: #FFFFFF;
  --gris-50: #FFFFFF;
  --gris-100: #FFFFFF;
  --azul: #00417A;
  --azul-500: #00417A;
  --enlace: #00417A;
}
html[data-contraste="alto"] img:not(.logo-img) { filter: contrast(1.2); }
html[data-contraste="alto"] .tarjeta,
html[data-contraste="alto"] .campo input,
html[data-contraste="alto"] .campo select,
html[data-contraste="alto"] .campo textarea { border-width: 2px; }

/* --------------------------------------------------------------------------
   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; }
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; }
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;
}
html[data-contraste="alto"] :focus-visible { outline: 4px solid #000; }

@media (prefers-reduced-motion: reduce), (scripting: enabled) {
  html[data-movimiento="reducido"] *,
  html[data-movimiento="reducido"] *::before { animation: none !important; transition: none !important; }
}
@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; justify-content: space-between;
  gap: var(--e-3); padding-block: var(--e-2);
}
.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. */
.acc { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-2); }
.acc__etiqueta { font-weight: 600; color: #9FBDD6; }
.acc__grupo { display: inline-flex; border: 1px solid rgba(255,255,255,.28); border-radius: var(--radio-full); overflow: hidden; }
.acc__boton {
  background: transparent; border: 0; color: #E3EEF7; cursor: pointer;
  padding: .25em .7em; line-height: 1.4; font-weight: 700;
  transition: background var(--transicion);
}
.acc__boton:hover { background: rgba(255,255,255,.14); }
.acc__boton[aria-pressed="true"] { background: #fff; color: var(--marino); }
.acc__boton--a1 { font-size: .8em; }
.acc__boton--a2 { font-size: .95em; }
.acc__boton--a3 { font-size: 1.1em; }

@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; }

.acciones-encabezado { display: flex; align-items: center; gap: var(--e-3); flex: none; }

.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;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--e-9); align-items: center;
  padding-block: clamp(3.5rem, 8vw, 7rem);
}
.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: 46ch; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-7); }
.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; }
.hero__figura img { border-radius: var(--radio-l); box-shadow: var(--sombra-3); width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.hero__tarjeta {
  position: absolute; left: -1.5rem; bottom: 1.75rem; 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: 17rem;
}
.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); }
  .hero__figura { order: -1; max-width: 30rem; }
  .hero__figura img { aspect-ratio: 16/10; }
  .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); }

/* --------------------------------------------------------------------------
   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;
  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);
}
.wa-flotante:hover { background: var(--verde-wa-osc); color: #fff; transform: translateY(-3px); }
.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; } }
html[data-movimiento="reducido"].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;
  }
  .acc__boton { min-height: 44px; padding-inline: 1em; }
  .acc__grupo .acc__boton { padding-inline: .85em; }
  .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; }
}