/* ==========================================================================
   Policlínica ICOA — Hoja de estilos principal
   --------------------------------------------------------------------------
   Estructura:
     1. Variables de diseño (colores, tipografía, medidas)
     2. Reset y base
     3. Utilidades y layout
     4. Cabecera y navegación
     5. Hero
     6. Componentes (tarjetas, equipo, galería, aseguradoras, acordeón)
     7. Artículos (patologías)
     8. Formularios y CTA
     9. Pie de página
    10. Responsive
   ========================================================================== */

/* 1. VARIABLES DE DISEÑO
   Cambia estos valores para cambiar el aspecto de todo el sitio.
   ========================================================================== */
:root {
  /* Paleta */
  --azul-900: #0b2a4a;
  --azul-800: #103a63;
  --azul-700: #14507f;
  --azul-600: #1d6fa5;
  --azul-100: #e8f1f8;
  --azul-50:  #f4f9fc;

  --acento:      #12a1a1;   /* turquesa: líneas, bordes y detalles decorativos */
  --acento-osc:  #0d7f7f;   /* fondo de botón: blanco encima da 4,8:1 (AA) */
  --acento-txt:  #0a6e6e;   /* turquesa para TEXTO: 5,8:1 sobre blanco (AA) */

  --texto:       #1e2a33;
  --texto-suave: #5b6b78;
  --borde:       #dde5ec;
  --blanco:      #ffffff;
  --fondo:       #ffffff;
  --fondo-alt:   var(--azul-50);

  /* Tipografía */
  --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulos: "Segoe UI Semibold", "Segoe UI", system-ui, Georgia, serif;

  /* Medidas */
  --ancho-max: 1180px;
  --ancho-texto: 760px;
  --radio: 10px;
  --radio-sm: 6px;
  --sombra: 0 2px 10px rgba(11, 42, 74, .07);
  --sombra-alta: 0 8px 28px rgba(11, 42, 74, .13);
  --altura-cabecera: 84px;
  --transicion: .22s ease;
}

/* 2. RESET Y BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--altura-cabecera) + 12px); }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }

a { color: var(--azul-700); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--acento-txt); }

h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  color: var(--azul-900);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 700;
}
/* Alemán y catalán traen palabras muy largas (Hornhautverkrümmung): sin esto
   revientan la columna en pantallas estrechas. Con lang= puesto, el guionado
   lo hace el navegador con las reglas de cada idioma. */
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1.1em; }

ul, ol { padding-left: 1.25em; }
li { margin-bottom: .35em; }

hr { border: 0; border-top: 1px solid var(--borde); margin: 2.5rem 0; }

:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

/* 3. UTILIDADES Y LAYOUT
   ========================================================================== */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: 20px;
}

.seccion { padding: 72px 0; }
.seccion--alt { background: var(--fondo-alt); }
.seccion--compacta { padding: 48px 0; }

.seccion__cabecera { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.seccion__cabecera p { color: var(--texto-suave); margin-bottom: 0; }

.antetitulo {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--acento-txt);
  margin-bottom: .6rem;
}

.texto-centrado { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .8em 1.7em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: .98rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion);
}
.boton:hover { transform: translateY(-1px); }

.boton--primario { background: var(--azul-700); color: #fff; }
.boton--primario:hover { background: var(--azul-800); color: #fff; }

.boton--acento { background: var(--acento-osc); color: #fff; }
.boton--acento:hover { background: #0a6666; color: #fff; }

.boton--fantasma { background: transparent; color: var(--azul-800); border-color: var(--azul-700); }
.boton--fantasma:hover { background: var(--azul-700); color: #fff; }

.boton--claro { background: #fff; color: var(--azul-800); }
.boton--claro:hover { background: var(--azul-100); color: var(--azul-900); }

.boton--borde-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.boton--borde-claro:hover { background: #fff; color: var(--azul-800); }

.grupo-botones { display: flex; flex-wrap: wrap; gap: 14px; }

/* Rejillas */
.rejilla { display: grid; gap: 26px; }
 /* minmax(0,1fr) evita que un texto largo ensanche la rejilla */
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 4. CABECERA Y NAVEGACIÓN
   ========================================================================== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}

.barra-superior {
  background: var(--azul-900);
  color: #cfe1f0;
  font-size: .86rem;
}
.barra-superior .contenedor {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 38px;
}
.barra-superior a { color: #fff; }
.barra-superior a:hover { color: var(--acento-txt); }
.barra-superior__datos { display: flex; flex-wrap: wrap; gap: 18px; }

.cabecera__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--altura-cabecera);
}

.logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.logo__marca { height: 40px; width: auto; flex-shrink: 0; }
.logo__texto { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.logo__nombre {
  font-family: var(--fuente-titulos);
  font-size: 1.28rem; color: var(--azul-900);
  letter-spacing: .01em;
}
/* ICOA en negrita y «Policlínica» en fino: el ojo manda, el texto acompaña */
.logo__nombre b { font-weight: 700; letter-spacing: .06em; }
.logo__sub { font-weight: 400; color: var(--azul-700); }
/* El lema solo aparece en el menú móvil: en escritorio el hueco lo necesita
   la navegación, y el lema ya está en el pie de todas las páginas. */
.logo__lema {
  display: none;
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-suave);
}

.nav { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.nav__lista {
  display: flex; align-items: center; gap: 20px;
  list-style: none; margin: 0; padding: 0; flex-wrap: nowrap;
}
.nav__lista > li { display: flex; align-items: center; }
.nav__lista > li { margin: 0; }
.nav__lista a {
  color: var(--texto);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.65;
  padding: 6px 0;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav__lista a:hover,
.nav__lista a[aria-current="page"] { color: var(--azul-700); border-bottom-color: var(--acento); }

/* Submenú "Más" */
.nav__desplegable { position: relative; }
.nav__desplegable > button {
  display: inline-flex; align-items: center; gap: .35em;
  background: none; border: 0; cursor: pointer;
  /* Sin esto el botón hereda el line-height del navegador y el texto queda
     un par de píxeles más alto que el de los enlaces de al lado. */
  font-family: inherit; font-size: .95rem; font-weight: 600; line-height: 1.65;
  color: var(--texto);
  padding: 6px 0; margin: 0; border-bottom: 2px solid transparent;
  vertical-align: baseline;
}
.nav__desplegable > button:hover { color: var(--azul-700); border-bottom-color: var(--acento); }
.nav__submenu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 210px; list-style: none; margin: 0; padding: 8px;
  background: #fff; border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra-alta);
  display: none;
}
.nav__submenu li { margin: 0; }
.nav__submenu a { display: block; padding: 9px 12px; border-radius: var(--radio-sm); border: 0; }
.nav__submenu a:hover { background: var(--azul-50); }
.nav__desplegable.abierto .nav__submenu { display: block; }

.nav__cta { margin-left: 6px; }
.nav__cta .boton { white-space: nowrap; }

/* Botón hamburguesa */
.hamburguesa {
  display: none;
  width: 46px; height: 46px;
  background: none; border: 1px solid var(--borde); border-radius: var(--radio-sm);
  cursor: pointer; padding: 0;
}
.hamburguesa span,
.hamburguesa span::before,
.hamburguesa span::after {
  display: block; width: 22px; height: 2px; background: var(--azul-900);
  margin-inline: auto; position: relative; transition: var(--transicion);
}
.hamburguesa span::before { content: ""; position: absolute; top: -7px; }
.hamburguesa span::after  { content: ""; position: absolute; top: 7px; }
.hamburguesa[aria-expanded="true"] span { background: transparent; }
.hamburguesa[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.hamburguesa[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* 5. HERO
   ========================================================================== */
.hero {
  position: relative;
  color: #fff;
  background: linear-gradient(135deg, var(--azul-900), var(--azul-700));
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .34;
}
/* La imagen se declara aquí y no en el HTML: así la CSP puede prohibir
   cualquier estilo en línea, que es de donde vienen casi todos los XSS. */
.hero--grande .hero__media { background-image: url("../img/hero.jpg"); }
/* Un acercamiento lentísimo: no se ve, se nota. */
@media (prefers-reduced-motion: no-preference) {
  .hero--grande .hero__media { animation: respirar 38s ease-in-out infinite alternate; }
}
@keyframes respirar {
  from { transform: scale(1);    }
  to   { transform: scale(1.07); }
}
/* Velo oscuro sobre la foto para que el texto siempre tenga contraste */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,28,50,.88) 0%, rgba(8,28,50,.55) 55%, rgba(8,28,50,.15) 100%);
}
.hero .contenedor { position: relative; z-index: 1; }
.hero--grande .contenedor { padding-block: 110px; max-width: 900px; }
.hero--pagina .contenedor { padding-block: 70px; }

.hero h1 { color: #fff; margin-bottom: .35em; }
.hero p { font-size: 1.12rem; color: rgba(255,255,255,.9); max-width: 620px; }
.hero--grande .grupo-botones { margin-top: 30px; }

.miga { font-size: .85rem; color: rgba(255,255,255,.75); margin-bottom: 1rem; }
.miga a { color: rgba(255,255,255,.9); }
.miga a:hover { color: #fff; text-decoration: underline; }

/* 6. COMPONENTES
   ========================================================================== */

/* Tarjeta genérica */
.tarjeta {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 28px;
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
  display: flex;
  flex-direction: column;
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.tarjeta h3 { margin-bottom: .4em; }
.tarjeta p { color: var(--texto-suave); font-size: .96rem; }
.tarjeta__enlace { margin-top: auto; font-weight: 600; font-size: .93rem; }
.tarjeta__enlace::after { content: " →"; }

.tarjeta__icono {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--azul-100);
  color: var(--azul-700);
  margin-bottom: 16px;
}
.tarjeta__icono svg { width: 26px; height: 26px; }

/* Equipo */
.miembro { text-align: center; }
.miembro__foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--azul-100);
  margin-bottom: 14px;
}
.miembro__inicial {
  width: 100%; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  border-radius: var(--radio);
  background: var(--azul-100); color: var(--azul-700);
  font-family: var(--fuente-titulos); font-size: 2.6rem; font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.miembro__especialidad {
  display: block;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--acento-txt); font-weight: 700; margin-bottom: .2em;
  overflow-wrap: break-word;
}
.miembro__nombre { font-size: 1.05rem; margin: 0; overflow-wrap: break-word; hyphens: auto; }

/* Galería */
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.galeria img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radio-sm); background: var(--azul-100);
  cursor: zoom-in; transition: opacity var(--transicion);
}
.galeria img:hover { opacity: .85; }

/* Visor de galería (lightbox) */
.visor {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8, 24, 40, .92);
  display: none; place-items: center; padding: 30px;
}
.visor.abierto { display: grid; }
.visor img {
  max-width: min(92vw, 1400px);
  /* deja sitio al pie con el contador y el texto de la foto */
  max-height: 78vh;
  border-radius: var(--radio-sm);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
@media (max-width: 700px) { .visor img { max-width: 94vw; max-height: 72vh; } }
.visor__cerrar {
  position: absolute; top: 18px; right: 22px;
  background: none; border: 0; color: #fff; font-size: 2.4rem;
  line-height: 1; cursor: pointer;
}

/* Aseguradoras: cada logotipo en su tarjeta blanca, para que convivan los
   que tienen fondo claro y los que lo tienen de color */
.aseguradoras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 172px));
  justify-content: center;
  gap: 14px;
}
.aseguradoras > div {
  display: grid; place-items: center;
  min-height: 84px; padding: 14px 18px;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.aseguradoras > div:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.aseguradoras img { max-height: 46px; width: auto; }

/* Acordeón de servicios */
.acordeon { border-top: 1px solid var(--borde); }
.acordeon__item { border-bottom: 1px solid var(--borde); }
.acordeon__boton {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--fuente-titulos);
  font-size: 1.1rem; font-weight: 700; color: var(--azul-900);
  transition: color var(--transicion);
}
.acordeon__boton:hover { color: var(--azul-600); }
.acordeon__boton::after {
  content: "+";
  font-size: 1.6rem; font-weight: 400; color: var(--acento-txt);
  line-height: 1; flex-shrink: 0;
  transition: transform var(--transicion);
}
.acordeon__boton[aria-expanded="true"]::after { content: "−"; }

.acordeon__numero {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; flex-shrink: 0;
  margin-right: 14px;
  border-radius: 50%; background: var(--azul-100); color: var(--azul-700);
  font-size: .82rem; font-family: var(--fuente);
}
.acordeon__titulo { display: flex; align-items: center; }

.acordeon__panel { display: none; padding: 0 4px 26px 48px; }
.acordeon__panel[data-abierto] { display: block; }
.acordeon__panel p:last-child, .acordeon__panel ul:last-child { margin-bottom: 0; }
.acordeon__panel .horario {
  display: inline-block;
  background: var(--azul-100); color: var(--azul-800);
  font-size: .85rem; font-weight: 600;
  padding: .35em .9em; border-radius: 999px; margin-bottom: 1em;
}
.tabla-precios { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: .95rem; }
.tabla-precios th, .tabla-precios td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--borde); }
.tabla-precios th { background: var(--azul-50); color: var(--azul-900); font-weight: 600; }
.tabla-precios td:last-child { text-align: right; white-space: nowrap; font-weight: 600; color: var(--azul-800); }

/* Lista de patologías */
.lista-patologias { list-style: none; padding: 0; display: grid; gap: 16px; }
.patologia {
  display: block;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.patologia:hover { transform: translateX(3px); box-shadow: var(--sombra-alta); }
.patologia h3 { margin-bottom: .25em; }
.patologia p { margin: 0; color: var(--texto-suave); font-size: .95rem; }

/* Bloque de datos de contacto */
.dato { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.dato__icono {
  flex-shrink: 0; width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--azul-100); color: var(--azul-700);
}
.dato__icono svg { width: 20px; height: 20px; }
.dato strong { display: block; color: var(--azul-900); }
.dato span, .dato a { color: var(--texto-suave); }

.mapa {
  width: 100%; height: 100%; min-height: 340px;
  border: 0; border-radius: var(--radio); background: var(--azul-100);
}

/* Banda CTA */
.cta {
  background: linear-gradient(135deg, var(--azul-800), var(--acento-osc));
  color: #fff;
  text-align: center;
}
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.9); max-width: 620px; margin-inline: auto; }
.cta .grupo-botones { justify-content: center; margin-top: 26px; }

/* 7. ARTÍCULOS (PATOLOGÍAS)
   ========================================================================== */
.articulo { max-width: var(--ancho-texto); margin-inline: auto; }
.articulo h2 { margin-top: 2em; font-size: 1.45rem; }
.articulo h3 { margin-top: 1.6em; }
.articulo .entradilla {
  font-size: 1.1rem; color: var(--azul-800);
  border-left: 4px solid var(--acento); padding-left: 18px;
  margin-bottom: 1.8em;
}
.articulo blockquote {
  margin: 2em 0; padding: 20px 26px;
  background: var(--azul-50); border-radius: var(--radio);
  font-size: 1.1rem; font-style: italic; color: var(--azul-800);
}
.articulo blockquote p:last-child { margin-bottom: 0; }
.articulo figure {
  margin: 2em 0;
  border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; background: #fff;
}
.articulo figure img { width: 100%; }
.articulo figcaption {
  padding: 12px 18px; font-size: .9rem; color: var(--texto-suave);
  background: var(--azul-50); border-top: 1px solid var(--borde);
}
.figuras { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin: 2em 0; }
.figuras figure { margin: 0; }
@media (max-width: 620px) { .figuras { grid-template-columns: 1fr; } }

.nav-articulo {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--borde);
  font-size: .95rem; font-weight: 600;
}

/* 8. AVISOS
   ========================================================================== */
.aviso {
  background: var(--azul-50);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 22px 26px;
}
.aviso p:last-child { margin-bottom: 0; }

/* 9. PIE DE PÁGINA
   ========================================================================== */
.pie {
  background: var(--azul-900);
  color: #b9cfe2;
  padding: 60px 0 0;
  font-size: .95rem;
}
.pie h4 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.1em; }
.pie a { color: #d9e7f2; }
.pie a:hover { color: var(--acento-txt); }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .55em; }
.pie__logo { height: 84px; width: auto; margin-bottom: 18px; }
.pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.pie__redes { display: flex; gap: 12px; margin-top: 18px; }
.pie__redes a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
  transition: background var(--transicion), border-color var(--transicion);
}
.pie__redes a:hover { background: var(--acento); border-color: var(--acento); }
.pie__redes svg { width: 18px; height: 18px; fill: currentColor; }
.pie__legal {
  margin-top: 48px; padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: .87rem;
}
.pie__legal ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pie__legal li { margin: 0; }

/* 10. RESPONSIVE
   ========================================================================== */
/* A partir de aquí el menú va justo: se aprietan los espacios y, más abajo,
   se oculta el nombre junto al logotipo. */
@media (max-width: 1260px) {
  .nav__lista, .nav { gap: 14px; }
  .nav__lista a, .nav__desplegable > button { font-size: .9rem; }
  .nav__cta .boton { padding: .7em 1.2em; font-size: .9rem; }
}

/* Por debajo de este ancho el menú horizontal ya no cabe: pasa a hamburguesa */
@media (max-width: 1160px) {
  .hamburguesa { display: block; }

  /* backdrop-filter crearía un bloque contenedor y el menú fijo se recortaría */
  .cabecera { backdrop-filter: none; background: #fff; }
  .logo__texto { display: flex; }
  .logo__lema { display: block; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 90px 24px 30px;
    background: #fff;
    box-shadow: var(--sombra-alta);
    transform: translateX(100%);
    transition: transform var(--transicion), visibility var(--transicion);
    overflow: hidden auto;
    /* Cerrado no es solo invisible: no se puede tabular hasta él ni
       ensancha la página, que era de donde salía un scroll horizontal. */
    visibility: hidden;
  }
  .nav.abierto { transform: translateX(0); visibility: visible; }

  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lista > li { border-bottom: 1px solid var(--borde); }
  .nav__lista a { display: block; padding: 14px 0; border-bottom: 0; }
  /* En alemán y francés hay etiquetas largas: en el panel deben poder partirse */
  .nav__lista a,
  .nav__desplegable > button,
  .nav__submenu a { white-space: normal; overflow-wrap: break-word; }

  .nav__desplegable > button { width: 100%; padding: 14px 0; border-bottom: 0; }
  .nav__submenu {
    position: static; display: none; box-shadow: none; border: 0;
    padding: 0 0 10px 14px; min-width: 0;
  }
  .nav__desplegable.abierto .nav__submenu { display: block; }

  .nav__cta { margin: 20px 0 0; }
  .nav__cta .boton { width: 100%; }

  body.menu-abierto { overflow: hidden; }
  body.menu-abierto::after {
    content: ""; position: fixed; inset: 0; z-index: 99;
    background: rgba(11,42,74,.45);
  }
  .cabecera { z-index: 101; }
}

@media (max-width: 980px) {
  .rejilla--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galeria { grid-template-columns: repeat(3, 1fr); }
  .pie__rejilla { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .seccion { padding: 54px 0; }
  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .hero--grande .contenedor { padding-block: 76px; }

  /* En móvil la barra superior se reduce al teléfono y el horario */
  .barra-superior { font-size: .8rem; }
  .barra-superior .contenedor { justify-content: center; gap: 14px; }
  .barra-superior__datos { gap: 14px; }
  .barra-superior__datos > :first-child,
  .barra-superior__datos > [href^="mailto"] { display: none; }
  .barra-superior .contenedor > span:last-child { font-size: .78rem; }
  .acordeon__panel { padding-left: 4px; }
  .tabla-precios { font-size: .88rem; }
  .tabla-precios th, .tabla-precios td { padding: 8px 6px; }
}

@media (max-width: 520px) {
  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
  /* el equipo y las aseguradoras siguen en dos columnas: son fichas pequeñas */
  #equipo .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  #equipo .miembro__nombre { font-size: .98rem; }
  #equipo .miembro__especialidad { font-size: .66rem; }
  .aseguradoras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aseguradoras > div { min-height: 72px; padding: 12px; }
  .miembro__inicial { font-size: 2rem; }
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .pie__rejilla { grid-template-columns: 1fr; }
  .grupo-botones .boton { width: 100%; }
  .logo__marca { height: 36px; }
  .logo__nombre { font-size: 1rem; }
  .logo__lema { display: none; }
}

@media (max-width: 420px) {
  .logo__texto { display: none; }
}

/* Impresión */
@media print {
  .cabecera, .pie, .cta, .visor, .grupo-botones { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* ==========================================================================
   11. FICHA DE PROFESIONAL  (equipo-juan-cano.html)
   ========================================================================== */

/* La foto del equipo que lleva a una ficha se comporta como enlace */
.miembro--enlace { display: block; color: inherit; position: relative; }
.miembro--enlace .miembro__foto { transition: transform var(--transicion), box-shadow var(--transicion); }
.miembro--enlace:hover { color: inherit; }
.miembro--enlace:hover .miembro__foto,
.miembro--enlace:focus-visible .miembro__foto {
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
}
.miembro--enlace:hover .miembro__nombre { color: var(--azul-600); }

/* Chapa "Ver currículum": asoma sobre la foto al pasar el ratón.
   En pantallas táctiles no hay hover, así que allí se muestra en su lugar
   un enlace fijo debajo del nombre (.miembro__vercv). */
.miembro__vercv { display: none; }

@media (hover: none) {
  .miembro__pista { display: none; }
  .miembro__vercv {
    display: inline-block; margin-top: .3em;
    font-size: .84rem; font-weight: 600; color: var(--acento-txt);
    /* «Lebenslauf ansehen →» no cabe de una pieza en una columna de 130 px */
    max-width: 100%; overflow-wrap: break-word; hyphens: auto;
  }
}

.miembro__pista {
  position: absolute;
  left: 50%; top: calc(50% - 30px);
  transform: translate(-50%, 8px);
  display: inline-flex; align-items: center; gap: .45em;
  padding: .5em 1.1em;
  background: rgba(11, 42, 74, .92); color: #fff;
  font-size: .82rem; font-weight: 600;
  border-radius: 999px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--transicion), transform var(--transicion);
}
.miembro--enlace:hover .miembro__pista,
.miembro--enlace:focus-visible .miembro__pista {
  opacity: 1; transform: translate(-50%, 0);
}

/* --- Portada de la ficha ------------------------------------------------- */
.ficha-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--azul-900) 0%, var(--azul-700) 55%, var(--acento-osc) 130%);
  color: #fff;
}
/* Trama de círculos concéntricos: un guiño al iris del logotipo */
.ficha-hero::before {
  content: "";
  position: absolute; right: -140px; top: -120px;
  width: 520px; height: 520px; border-radius: 50%;
  border: 60px solid rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 40px rgba(255,255,255,.04);
}
.ficha-hero .contenedor {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 230px 1fr; gap: 44px;
  align-items: center; padding-block: 64px;
}
.ficha-hero__foto {
  width: 230px; height: 230px; object-fit: cover;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.ficha-hero h1 { color: #fff; margin-bottom: .15em; }
.ficha-hero__cargo { font-size: 1.12rem; color: rgba(255,255,255,.92); margin-bottom: 1em; }

.credenciales { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; padding: 0; margin: 0 0 26px; }
.credenciales li {
  margin: 0; padding: .42em 1em;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; font-size: .84rem; font-weight: 600;
}

/* --- Contadores ---------------------------------------------------------- */
.cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
}
.cifra {
  text-align: center; padding: 26px 14px;
  background: #fff; border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.cifra__numero {
  display: block; line-height: 1;
  font-family: var(--fuente-titulos); font-weight: 700;
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  color: var(--azul-700);
  font-variant-numeric: tabular-nums;
}
.cifra__numero::after { content: attr(data-sufijo); font-size: .55em; vertical-align: super; color: var(--acento-txt); }
.cifra__etiqueta {
  display: block; margin-top: .5em;
  font-size: .82rem; letter-spacing: .04em; color: var(--texto-suave);
}

/* --- Trayectoria: línea de tiempo ---------------------------------------- */
.trayectoria { position: relative; list-style: none; padding: 0; margin: 0; }
.trayectoria::before {
  content: ""; position: absolute; left: 89px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(var(--azul-100), var(--acento), var(--azul-100));
}
.hito { position: relative; display: grid; grid-template-columns: 74px 1fr; gap: 34px; margin-bottom: 26px; }
.hito:last-child { margin-bottom: 0; }
.hito__anyo {
  text-align: right; padding-top: 20px;
  font-family: var(--fuente-titulos); font-weight: 700;
  color: var(--azul-700); font-size: 1.02rem;
}
.hito__cuerpo {
  position: relative;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 20px 24px; box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.hito__cuerpo:hover { transform: translateX(4px); box-shadow: var(--sombra-alta); }
/* el punto sobre la línea */
.hito__cuerpo::before {
  content: ""; position: absolute; left: -22px; top: 26px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--acento); border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--azul-100);
}
.hito h3 { font-size: 1.05rem; margin-bottom: .25em; }
.hito p { margin: 0; color: var(--texto-suave); font-size: .95rem; }

/* --- Pestañas ------------------------------------------------------------ */
.pestanyas {
  display: flex; flex-wrap: wrap; gap: 8px;
  border-bottom: 1px solid var(--borde); margin-bottom: 30px;
}
.pestanyas button {
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--texto-suave);
  padding: 12px 18px; border-bottom: 3px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
}
.pestanyas button:hover { color: var(--azul-700); }
.pestanyas button[aria-selected="true"] { color: var(--azul-900); border-bottom-color: var(--acento); }
.panel[hidden] { display: none; }

/* --- Listas de méritos --------------------------------------------------- */
.meritos { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.meritos li {
  display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start;
  margin: 0; padding: 16px 20px;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  font-size: .96rem;
}
.meritos li::before {
  content: ""; width: 20px; height: 20px; margin-top: 3px;
  border-radius: 50%; background: var(--azul-100);
  box-shadow: inset 0 0 0 4px var(--acento);
}
.meritos li strong { display: block; color: var(--azul-900); }
.meritos li span { color: var(--texto-suave); font-size: .92rem; }
.meritos--premio li::before { background: #fdf3d8; box-shadow: inset 0 0 0 4px #d9a520; }

/* --- Áreas de especialización -------------------------------------------- */
.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.area {
  padding: 24px; border-radius: var(--radio);
  background: #fff; border: 1px solid var(--borde);
  border-top: 3px solid var(--acento);
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.area:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.area h3 { font-size: 1.02rem; margin-bottom: .35em; }
.area p { margin: 0; font-size: .93rem; color: var(--texto-suave); }

/* --- Cita destacada ------------------------------------------------------ */
.destacado {
  background: var(--azul-900); color: #fff;
  border-radius: var(--radio); padding: 40px 46px;
  display: grid; grid-template-columns: 56px 1fr; gap: 26px; align-items: start;
}
.destacado svg { width: 46px; height: 46px; opacity: .35; }
.destacado p { font-size: 1.18rem; line-height: 1.55; margin: 0; }
.destacado cite { display: block; margin-top: 1em; font-size: .9rem; font-style: normal; color: rgba(255,255,255,.65); }

/* --- Responsive de la ficha ---------------------------------------------- */
@media (max-width: 860px) {
  .ficha-hero .contenedor { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 26px; }
  .credenciales { justify-content: center; }
  .ficha-hero .grupo-botones { justify-content: center; }
  .ficha-hero__foto { width: 180px; height: 180px; }
  .trayectoria::before { left: 6px; }
  .hito { grid-template-columns: 1fr; gap: 6px; padding-left: 32px; }
  .hito__anyo { text-align: left; padding-top: 0; font-size: .92rem; }
  .hito__cuerpo::before { left: -32px; top: 8px; }
  .destacado { grid-template-columns: 1fr; padding: 30px 26px; gap: 14px; }
}

@media (max-width: 520px) {
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pestanyas button { padding: 10px 12px; font-size: .88rem; }
}

/* --- Banner del Kit Digital en el pie -------------------------------------
   El banner oficial lleva texto oscuro, así que va sobre una tarjeta blanca
   para que se lea encima del pie azul. Pequeño y discreto, como manda. */
.pie__subvencion {
  margin-top: 40px;
  display: flex; justify-content: center;
}
.pie__subvencion img {
  width: 100%; max-width: 520px; height: auto;
  background: #fff;
  padding: 10px 16px;
  border-radius: var(--radio-sm);
}
@media (max-width: 520px) {
  .pie__subvencion img { padding: 8px 10px; }
}

/* --- Tarjeta grande de dedicación principal (ficha del profesional) ------- */
.foco {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 34px 34px 30px;
  box-shadow: var(--sombra);
  position: relative; overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.foco::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--azul-700), var(--acento));
}
.foco:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.foco__icono {
  width: 62px; height: 62px; margin-bottom: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--azul-100); color: var(--azul-700);
}
.foco__icono svg { width: 32px; height: 32px; }
.foco h3 { font-size: 1.3rem; margin-bottom: .5em; }
.foco p { color: var(--texto-suave); font-size: .97rem; }

/* ==========================================================================
   12. SELECTOR DE IDIOMA
   ========================================================================== */
.nav__idiomas > button {
  display: inline-flex; align-items: center; gap: .4em;
  padding: 6px 10px;
  border: 1px solid var(--borde); border-radius: 999px;
  font-size: .86rem; letter-spacing: .03em;
}
.nav__idiomas > button:hover { border-color: var(--acento); color: var(--azul-700); }
.nav__idiomas > button svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav__idiomas .nav__submenu { min-width: 150px; }
.nav__idiomas .nav__submenu a[aria-current="true"] {
  background: var(--azul-50); color: var(--azul-700); font-weight: 700;
}

@media (max-width: 1160px) {
  /* En el menú móvil el selector se despliega como una fila más */
  .nav__idiomas { border-top: 1px solid var(--borde); margin-top: 4px; }
  .nav__idiomas > button {
    width: 100%; justify-content: flex-start;
    border: 0; border-radius: 0; padding: 14px 0; font-size: .95rem;
  }
}

/* ==========================================================================
   13. ACABADO
   Detalles que no cambian la estructura pero sí la sensación: ritmo
   tipográfico, revelado al hacer scroll, y las piezas nuevas (simulador,
   carta de Snellen, 404). Todo degrada bien: si el navegador no entiende
   algo, se ve la versión sencilla y ya está.
   ========================================================================== */

/* --- Utilidades que sustituyen a los estilos en línea --------------------
   Estaban escritos con style="..." dentro del HTML. Al sacarlos aquí, la
   política de seguridad (CSP) puede prohibir los estilos en línea por
   completo, que es la puerta de entrada habitual de un XSS. */
.contenedor--estrecho { max-width: 900px; }
.texto-centrado--aire { margin-top: 36px; }
.seccion__cabecera--junta { margin-bottom: 32px; }
.seccion__cabecera--intermedia { margin-top: 64px; margin-bottom: 32px; }
.aviso--aire { margin-top: 42px; }
.aviso--antes { margin-bottom: 2rem; }
.acordeon__encabezado { margin: 0; }
.articulo--centrado { margin-inline: auto; }
.grupo-botones--aire { margin-top: 30px; }
.titulo-aire { margin-top: 40px; }
.nota { margin-top: 32px; color: var(--texto-suave); font-size: .92rem; }

/* --- Saltar al contenido (teclado y lectores de pantalla) ---------------- */
.saltar {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; padding: .7em 1.4em;
  background: var(--azul-900); color: #fff; font-weight: 600;
  border-radius: 0 0 var(--radio) var(--radio);
  transition: transform .18s ease;
}
.saltar:focus { transform: translate(-50%, 0); color: #fff; }

/* --- Ritmo tipográfico ---------------------------------------------------
   text-wrap: balance reparte las palabras del titular entre las líneas en
   vez de dejar una huérfana; pretty evita la palabra sola al final del
   párrafo. Donde no existe, no pasa nada. */
h1, h2, h3, .seccion__cabecera p { text-wrap: balance; }
.articulo p, .entradilla { text-wrap: pretty; }
.articulo { hyphens: auto; }

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

/* El subrayado de los enlaces del texto se dibuja al pasar por encima */
.articulo p > a, .articulo li > a {
  background-image: linear-gradient(var(--acento), var(--acento));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1.5px;
  transition: background-size .28s ease, color var(--transicion);
}
.articulo p > a:hover, .articulo li > a:hover { background-size: 100% 1.5px; }

/* Foco con dos anillos: se ve sobre fondo claro y sobre fondo azul */
:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Revelado al hacer scroll -------------------------------------------
   Hecho solo con CSS (animation-timeline). No hay JavaScript detrás, así
   que no hay parpadeo ni contenido invisible si algo falla: los navegadores
   que no lo soportan muestran la página tal cual. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .seccion__cabecera, .tarjeta, .miembro, .patologia, .hito, .area,
    .foco, .cifra, .destacado, .articulo figure, .simulador, .aseguradora, .opinion {
      animation: asomar linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 24%;
    }
  }
}
@keyframes asomar {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- Micro-interacciones ------------------------------------------------- */
.tarjeta, .patologia, .area, .foco, .hito__cuerpo {
  transition: transform var(--transicion), box-shadow var(--transicion),
              border-color var(--transicion);
}
.tarjeta:hover, .patologia:hover, .area:hover, .foco:hover { border-color: var(--azul-100); }
.tarjeta__enlace { transition: gap var(--transicion); }
.galeria img { transition: transform .5s cubic-bezier(.2,.7,.3,1), filter var(--transicion); }
.galeria img:hover { transform: scale(1.04); }

/* El iris del logotipo mira hacia el cursor. Discreto: como mucho se mueve
   un pelo. El desplazamiento lo pone el JavaScript en --iris-x / --iris-y. */
.logo__iris {
  transform: translate(var(--iris-x, 0px), var(--iris-y, 0px));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  transform-box: view-box;
  transform-origin: 16.75px 16.75px;
}
.logo__marca.parpadea .logo__iris { transform: scaleY(.08); transition: transform .11s ease; }

/* --- Simulador de catarata ----------------------------------------------- */
.simulador {
  margin: 44px 0; padding: 26px;
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--azul-50);
}
.simulador h3 { margin-bottom: .35em; }
.simulador > p { color: var(--texto-suave); font-size: .95rem; }
.simulador__marco {
  position: relative; overflow: hidden; border-radius: var(--radio-sm);
  background: #000;
}
.simulador__marco img {
  width: 100%;
  /* --grado va de 0 a 1; lo mueve el control deslizante */
  filter: blur(calc(var(--grado, 0) * 7px))
          sepia(calc(var(--grado, 0) * .55))
          saturate(calc(1 - var(--grado, 0) * .45))
          contrast(calc(1 - var(--grado, 0) * .3))
          brightness(calc(1 - var(--grado, 0) * .12));
  transition: filter .12s linear;
}
/* El halo lechoso de las cataratas maduras: más denso por el centro */
.simulador__halo {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 48%,
              rgba(255,244,214,.85) 0%, rgba(255,240,205,.35) 45%, transparent 72%);
  opacity: calc(var(--grado, 0) * .75);
}
.simulador__control { display: block; margin-top: 20px; }
.simulador__etiqueta {
  display: block; font-weight: 600; font-size: .9rem; margin-bottom: .5em;
  color: var(--azul-900);
}
.simulador input[type="range"] {
  width: 100%; accent-color: var(--acento); height: 28px; cursor: pointer;
}
.simulador__extremos {
  display: flex; justify-content: space-between;
  font-size: .8rem; color: var(--texto-suave); letter-spacing: .02em;
}
.simulador figcaption {
  margin-top: 16px; font-size: .85rem; color: var(--texto-suave);
  border-top: 1px solid var(--borde); padding-top: 12px;
}

/* --- Pestañas: título de cada panel solo si no hay JavaScript ------------ */
.panel__titulo { display: none; }
.pestanyas-grupo { margin-top: 4px; }

/* --- Carta de Snellen (el huevo de Pascua) ------------------------------- */
.snellen {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: #fff;
  padding: 24px;
  overflow-y: auto;
  animation: aparecer .4s ease both;
}
@keyframes aparecer { from { opacity: 0 } to { opacity: 1 } }
.snellen__panel { max-width: 620px; width: 100%; text-align: center; }
.snellen__titulo { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acento-txt); font-weight: 700; margin-bottom: .8rem; }
.snellen__texto { color: var(--texto-suave); font-size: .92rem; margin-bottom: 1.8rem; }
.snellen__carta { list-style: none; padding: 0; margin: 0 0 1.6rem; }
.snellen__carta li {
  margin: 0 0 .35em;
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 700; letter-spacing: .22em; color: var(--azul-900);
  line-height: 1.05;
}
.snellen__nota { font-size: .82rem; color: var(--texto-suave); }
.snellen__cerrar {
  margin-top: 1.4rem; background: none; border: 1px solid var(--borde);
  border-radius: 999px; padding: .6em 1.5em; font: inherit; font-weight: 600;
  color: var(--azul-800); cursor: pointer;
}
.snellen__cerrar:hover { background: var(--azul-50); }

/* --- Página 404 ---------------------------------------------------------- */
.error404 { text-align: center; padding-block: 90px; }
.error404__numero {
  display: block;
  font-family: var(--fuente-titulos); font-weight: 700;
  font-size: clamp(5rem, 18vw, 10rem); line-height: .9;
  color: #d6e6f2;
  letter-spacing: -.04em;
}
.error404 h1 { margin-top: -.25em; }
.error404__enlaces {
  list-style: none; padding: 0; margin: 34px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
}
.error404__enlaces li { margin: 0; }
.error404__enlaces a { font-weight: 600; }

/* --- Impresión: el currículum en papel ----------------------------------- */
@media print {
  .panel[hidden] { display: block !important; }
  .pestanyas, .simulador__control, .simulador__extremos { display: none !important; }
  .panel__titulo { display: block !important; }
  .cifra { break-inside: avoid; }
  .hito { break-inside: avoid; }
}

/* ==========================================================================
   14. CABECERA CON NOMBRE, TRANSPORTE Y CARRUSEL
   ========================================================================== */

/* --- El menú se aprieta por pasos para que quepa el nombre de la clínica -- */
/* En vez de saltos bruscos, el menú se encoge de forma continua entre 1101 y
   1600 px. Así no hay ningún ancho concreto en el que se desborde, ni
   siquiera en alemán, que es el idioma de palabras más largas. */
@media (min-width: 1161px) {
  .nav__lista, .nav { gap: clamp(7px, 1.05vw, 20px); }
  .nav__lista a,
  .nav__desplegable > button { font-size: clamp(.8rem, .38vw + .6rem, .95rem); }
  .nav__cta { margin-left: 0; }
  .nav__cta .boton {
    padding: .68em clamp(.8em, .95vw, 1.7em);
    font-size: clamp(.8rem, .32vw + .64rem, .98rem);
  }
  .logo { gap: clamp(7px, .7vw, 11px); }
  .logo__marca { height: clamp(32px, 2.6vw, 40px); }
  .logo__nombre { font-size: clamp(1rem, .55vw + .68rem, 1.28rem); }
  .cabecera__inner { gap: clamp(10px, 1.2vw, 20px); }
}

/* --- Cómo llegar: una línea por medio de transporte ---------------------- */
.transporte { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 14px; }
.transporte li {
  display: grid; grid-template-columns: 5.4rem 1fr; gap: 4px 12px;
  margin: 0; line-height: 1.5;
}
/* Los distintivos van en su propia columna: así los tres textos empiezan
   exactamente a la misma altura, lleven una línea o dos. */
.transporte__lineas { display: flex; gap: 5px; padding-top: .15em; }
@media (max-width: 480px) {
  .transporte li { grid-template-columns: 1fr; }
  .transporte__lineas { padding-top: 0; }
}
.transporte__modo {
  display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-suave); font-weight: 700;
}
/* Los distintivos de línea llevan el color real de cada red: quien conoce
   Barcelona identifica la L1 roja y la L4 amarilla de un vistazo. */
.linea {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2em; height: 1.65em; padding: 0 .45em;
  border-radius: .3em; font-size: .82rem; font-weight: 700;
  letter-spacing: .02em; color: #fff; flex-shrink: 0;
}
.linea--l1   { background: #d8232a; }                    /* rojo del metro L1 */
.linea--l4   { background: #f0b400; color: #3a2c00; }    /* amarillo de la L4 */
.linea--tram { background: #007e8a; }
.linea--bus  { background: #0b5ea8; }

/* --- Galería: carrusel dentro del visor ---------------------------------- */
.galeria img { cursor: zoom-in; }

.visor__flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; display: grid; place-items: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%; cursor: pointer; color: #fff;
  transition: background var(--transicion), transform var(--transicion);
}
.visor__flecha:hover { background: rgba(255,255,255,.28); }
.visor__flecha svg { width: 24px; height: 24px; }
.visor__flecha--antes { left: 18px; }
.visor__flecha--despues { right: 18px; }
.visor__flecha--antes:hover { transform: translateY(-50%) translateX(-2px); }
.visor__flecha--despues:hover { transform: translateY(-50%) translateX(2px); }

.visor__pie {
  position: absolute; left: 0; right: 0; bottom: 22px;
  text-align: center; color: #fff; font-size: .9rem;
  padding: 0 80px; pointer-events: none;
}
.visor__contador {
  display: block; font-size: .78rem; letter-spacing: .12em;
  color: rgba(255,255,255,.65); margin-bottom: .3em;
}

@media (max-width: 700px) {
  .visor__flecha { width: 44px; height: 44px; }
  .visor__flecha--antes { left: 8px; }
  .visor__flecha--despues { right: 8px; }
  .visor__pie { padding: 0 60px; bottom: 14px; font-size: .84rem; }
}
/* Con el dedo se pasa deslizando, así que las flechas estorban menos */
@media (hover: none) and (max-width: 520px) {
  .visor__flecha { background: rgba(255,255,255,.1); }
}

/* ==========================================================================
   15. CARNETS DE CONDUCIR Y BLOG
   ========================================================================== */

/* El enlace destacado del menú: es el servicio que más gente busca */
.nav__destacado { position: relative; color: var(--azul-800) !important; }
.nav__destacado::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--acento); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transicion);
}
.nav__destacado:hover::after, .nav__destacado[aria-current="page"]::after { transform: scaleX(1); }

/* --- Reclamo con llamada a la acción ------------------------------------- */
.reclamo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px; margin: 34px 0 44px; padding: 22px 26px;
  background: var(--azul-50); border: 1px solid var(--azul-100);
  border-left: 4px solid var(--acento); border-radius: var(--radio);
}
.reclamo strong { display: block; color: var(--azul-900); font-size: 1.05rem; }
.reclamo p { margin: .25em 0 0; color: var(--texto-suave); font-size: .95rem; }
.reclamo--final { margin: 44px 0 30px; }

/* --- Pasos numerados ------------------------------------------------------ */
.pasos { list-style: none; padding: 0; margin: 0 0 44px; display: grid; gap: 16px; }
.pasos .paso {
  display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start;
  margin: 0; padding: 18px 20px;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
}
.paso__numero {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--azul-700); color: #fff;
  font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.05rem;
}
.paso h3 { font-size: 1.05rem; margin-bottom: .2em; }
.paso p { margin: 0; color: var(--texto-suave); font-size: .95rem; }

/* --- Lista con marca de verificación -------------------------------------- */
.lista-marcada { list-style: none; padding: 0; margin: 0 0 44px; display: grid; gap: 10px; }
.lista-marcada li { position: relative; padding-left: 32px; margin: 0; }
.lista-marcada li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--azul-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314507f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* --- Preguntas frecuentes ------------------------------------------------- */
.faq { display: grid; gap: 10px; margin-bottom: 20px; }
.faq__item { border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }
.faq__item summary {
  cursor: pointer; padding: 16px 48px 16px 20px; position: relative;
  font-weight: 600; color: var(--azul-900); list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--acento-txt); line-height: 1;
  transition: transform var(--transicion);
}
.faq__item[open] summary::after { content: "–"; }
.faq__item[open] summary { border-bottom: 1px solid var(--borde); }
.faq__item summary:hover { color: var(--azul-700); }
.faq__cuerpo { padding: 16px 20px 4px; }
.faq__cuerpo p { color: var(--texto-suave); }

/* --- Blog: rejilla de entradas ------------------------------------------- */
.entradas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.entrada { display: flex; }
.entrada > a {
  display: flex; flex-direction: column; width: 100%;
  padding: 26px; color: inherit;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion),
              border-color var(--transicion);
}
.entrada > a:hover {
  transform: translateY(-3px); box-shadow: var(--sombra-alta);
  border-color: var(--azul-100); color: inherit;
}
.entrada__etiqueta {
  display: inline-block; align-self: flex-start;
  padding: .3em .8em; margin-bottom: .9em;
  background: var(--azul-50); color: var(--acento-txt);
  border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.entrada__titulo { font-size: 1.15rem; margin-bottom: .45em; }
.entrada__resumen { color: var(--texto-suave); font-size: .95rem; flex: 1; }
.entrada__pie {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap;
  margin-top: 1.2em; padding-top: 1em; border-top: 1px solid var(--borde);
  font-size: .85rem; color: var(--texto-suave);
}
.entrada__leer { color: var(--acento-txt); font-weight: 600; }

.articulo__meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 1.4em; font-size: .88rem; color: var(--texto-suave);
}
.articulo__meta .entrada__etiqueta { margin-bottom: 0; }

@media (max-width: 980px) { .entradas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .entradas { grid-template-columns: 1fr; }
  .reclamo { flex-direction: column; align-items: stretch; }
  .reclamo .boton { width: 100%; }
  .pasos .paso { grid-template-columns: 36px 1fr; gap: 14px; padding: 16px; }
  .paso__numero { width: 32px; height: 32px; font-size: .95rem; }
}

/* --- Franja de carnets en la portada -------------------------------------- */
.franja {
  background: linear-gradient(135deg, var(--azul-900) 0%, var(--azul-700) 55%, #0f6e7e 100%);
  color: #fff;
}
.franja__inner {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center;
  padding-block: 54px;
}
.franja h2 { color: #fff; margin-bottom: .35em; }
.franja > .contenedor > div > p { color: rgba(255,255,255,.88); margin-bottom: 1.5em; }
.antetitulo--claro { color: #7fe3e3; }

.franja__datos {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.franja__datos li {
  margin: 0; padding: 18px 14px; text-align: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radio);
}
.franja__datos strong {
  display: block; font-family: var(--fuente-titulos); font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.1; color: #fff;
  white-space: nowrap;
}
.franja__datos span {
  display: block; margin-top: .45em;
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

@media (max-width: 900px) {
  .franja__inner { grid-template-columns: 1fr; gap: 30px; padding-block: 42px; }
}
@media (max-width: 460px) {
  .franja__datos { grid-template-columns: 1fr; }
  .franja__datos li { display: flex; align-items: baseline; gap: 12px; text-align: left; }
  .franja__datos span { margin-top: 0; }
}

/* --- Tablas que no caben: se desplazan dentro de su caja ------------------ */
.tabla-envoltorio {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.6em;
  border-radius: var(--radio-sm);
}
.tabla-envoltorio:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.tabla-envoltorio > .tabla-precios { margin-bottom: 0; min-width: 28rem; }
@media (max-width: 420px) {
  .tabla-envoltorio > .tabla-precios { min-width: 20rem; font-size: .92rem; }
}

/* En la franja de la portada, el texto largo del alemán puede partirse */
.franja__datos li { min-width: 0; }
.franja__datos span { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 460px) {
  .franja__datos strong { white-space: nowrap; flex-shrink: 0; }
}

/* ==========================================================================
   16. MUTUAS: CADA LOGOTIPO ENLAZA A SU ASEGURADORA
   ========================================================================== */
.aseguradora > a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 4px;
  color: inherit;
  text-align: center;
}
.aseguradora > a:hover { color: inherit; }
.aseguradoras > .aseguradora:hover { border-color: var(--azul-100); }
.aseguradora img { transition: transform var(--transicion); }
.aseguradora > a:hover img { transform: scale(1.04); }
.aseguradora > a:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: var(--radio-sm); }

/* Mutua sin logotipo todavía: se escribe su nombre con la tipografía del
   sitio. Es intencionado, no una imagen que falta. */
.aseguradora__nombre {
  display: block;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--azul-800);
  overflow-wrap: break-word;
  hyphens: auto;
  transition: color var(--transicion);
}
.aseguradora > a:hover .aseguradora__nombre { color: var(--acento-txt); }
@media (max-width: 420px) { .aseguradora__nombre { font-size: .85rem; } }

/* ==========================================================================
   17. OPINIONES DE PACIENTES
   ========================================================================== */
.nota-valoracion {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 6px 12px; margin: -24px 0 34px; text-align: center;
}
.estrellas { color: #9a6600; font-size: 1.15rem; letter-spacing: .12em; }
.nota-valoracion strong { color: var(--azul-900); font-weight: 700; }
.nota-valoracion > span:last-child { color: var(--texto-suave); font-size: .92rem; }

.opiniones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.opinion {
  display: flex; flex-direction: column;
  margin: 0; padding: 26px 26px 22px;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra);
}
/* La comilla de apertura, en grande y en turquesa: ocupa el sitio de una
   foto que no tenemos y da aire a la tarjeta. */
.opinion::before {
  content: "\201C";
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3rem; line-height: .7; color: var(--acento);
  margin-bottom: .25em;
}
.opinion blockquote { margin: 0; padding: 0; border: 0; background: none; flex: 1; }
.opinion blockquote p {
  margin: 0; color: var(--texto); font-size: .98rem; line-height: 1.6;
}
.opinion figcaption {
  margin-top: 1.3em; padding-top: 1em; border-top: 1px solid var(--borde);
}
.opinion__autor {
  display: block; font-weight: 700; color: var(--azul-900); font-size: .95rem;
}
.opinion__detalle {
  display: block; margin-top: .15em;
  font-size: .82rem; color: var(--texto-suave);
}

@media (max-width: 980px) { .opiniones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .opiniones { grid-template-columns: 1fr; } }

/* ==========================================================================
   18. IMPRESIÓN DE LA PÁGINA DE CARNETS
   Mucha gente imprime o guarda en PDF la lista de «qué tengo que llevar».
   Que salga bien en papel es de las cosas que más se agradecen y que casi
   nadie cuida.
   ========================================================================== */
@media print {
  .franja, .reclamo, .nav-articulo, .opiniones, .nota-valoracion { display: none !important; }

  .hero--pagina { background: none !important; color: #000 !important; padding: 0 !important; }
  .hero--pagina h1 { color: #000 !important; font-size: 20pt; }
  .hero--pagina p, .miga { color: #333 !important; }

  /* Las preguntas frecuentes se imprimen abiertas: en papel no hay clic */
  .faq__item { break-inside: avoid; border: 0; border-bottom: 1px solid #ccc; }
  .faq__cuerpo { display: block !important; padding-left: 0; }
  .faq__item summary { font-weight: 700; padding-left: 0; }
  .faq__item summary::after { content: ""; }

  /* «Qué tiene que traer» se convierte en una lista con casillas para marcar */
  .lista-marcada li { padding-left: 24px; break-inside: avoid; }
  .lista-marcada li::before {
    content: ""; background: none; border: 1.2pt solid #000; border-radius: 2px;
    width: 12px; height: 12px; top: .3em;
  }
  .pasos .paso { break-inside: avoid; border: 0; border-bottom: 1px solid #eee; padding: 6pt 0; }
  .paso__numero { background: none !important; color: #000 !important; border: 1pt solid #000; }
  .tabla-envoltorio { overflow: visible; }
  .tabla-precios { break-inside: avoid; }
}

/* --- Tabla de «información básica sobre protección de datos» -------------- */
.tabla-datos {
  width: 100%; border-collapse: collapse; margin: 0;
  font-size: .94rem; background: #fff;
}
.tabla-datos caption {
  caption-side: top; text-align: left;
  padding: 14px 18px;
  background: var(--azul-900); color: #fff;
  font-family: var(--fuente-titulos); font-weight: 700; font-size: 1rem;
  border-radius: var(--radio) var(--radio) 0 0;
}
.tabla-datos th, .tabla-datos td {
  padding: 13px 18px; text-align: left; vertical-align: top;
  border: 1px solid var(--borde);
}
.tabla-datos th {
  width: 12rem; background: var(--azul-50); color: var(--azul-900);
  font-weight: 700;
}
.tabla-datos td { color: var(--texto); }
.tabla-datos tr:last-child th { border-radius: 0 0 0 var(--radio); }
.tabla-datos tr:last-child td { border-radius: 0 0 var(--radio) 0; }
.articulo .tabla-envoltorio { margin-bottom: 2.4em; }
@media (max-width: 560px) {
  .tabla-datos, .tabla-datos tbody, .tabla-datos tr { display: block; }
  /* Al pasar la tabla a bloques, el título dejaría de ocupar todo el ancho
     (se encogería al tamaño del texto): se le devuelve la franja entera. */
  .tabla-datos caption { display: block; }
  .tabla-datos th, .tabla-datos td { display: block; width: auto; border-bottom: 0; }
  .tabla-datos tr { border-bottom: 1px solid var(--borde); }
  .tabla-datos th { background: var(--azul-50); }
  .articulo .tabla-envoltorio > .tabla-datos { min-width: 0; }
}