:root {
    --verde-profundo: #143a22;
  --verde-vivo: #2f6947;
  --verde-niebla: #eef2ec;
  --verde-borde: #dbe2d8;

    --bronce: #8a8f88;
  --bronce-suave: #c9cdc7;
  --bronce-texto: #565a53;

  --papel: #faf9f5;
  --blanco: #ffffff;
  --tinta: #16241c;
  --tinta-suave: #4b564c;
  --tinta-tenue: #7c8579;

  --fuente-display: 'Fraunces', Georgia, serif;
  --fuente-cuerpo: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --contenedor: 1180px;

  /* Separación vertical única para todas las secciones. Antes había cinco
     valores distintos (72, 88, 96 y 108px) repartidos sin criterio, que es
     lo que hacía que el ritmo de la página se viera irregular.

     Ojo al elegir el valor: entre dos secciones consecutivas los rellenos
     se SUMAN, así que el hueco real es el doble de este número. */
  --espacio-seccion: 60px;
}

@media (max-width: 900px) {
  :root { --espacio-seccion: 44px; }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Aparición al entrar en pantalla. El ocultado cuelga de .revelar-activo,
   clase que solo pone main-v2.js si existe IntersectionObserver: sin JS o
   con un navegador viejo esta regla nunca aplica y el contenido se ve
   normalmente, en vez de quedarse en opacity 0 para siempre. */
@media (prefers-reduced-motion: no-preference) {
  .revelar-activo [data-revelar] {
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .revelar-activo [data-revelar].visible { opacity: 1; transform: none; }
}

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  color: var(--tinta-suave);
  background: var(--papel);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

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

/* Párrafos largos: alineados a la izquierda y sin guiones automáticos.
   Antes iban justificados con hyphens:auto, que partía nombres propios y
   frases clave ("Quin-día", "de-moras") y abría huecos en columnas angostas. */
.seccion-historia p,
.seccion-cierre p.parrafo,
.contenido-ubicacion p.texto-direccion,
.parrafo-interior {
  text-align: left;
  hyphens: manual;
  text-wrap: pretty;
}
.tarjeta-cita p, .pagina-error .texto-error { text-wrap: pretty; }

h1, h2, h3 {
  font-family: var(--fuente-display);
  color: var(--verde-profundo);
  margin: 0;
  line-height: 1.15;
  text-wrap: balance;
}

a { color: inherit; }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--bronce);
  outline-offset: 2px;
}

.salto-contenido {
  position: absolute; left: -999px; top: auto;
  background: var(--verde-profundo); color: var(--blanco);
  font-family: var(--fuente-cuerpo); font-weight: 600; font-size: 14.5px;
  padding: 14px 22px; z-index: 2000; border-radius: 0 0 10px 0;
  box-shadow: 0 8px 24px rgba(15, 26, 18, .35);
}
.salto-contenido:focus {
  left: 0; top: 0;
  outline: 2px solid var(--blanco); outline-offset: -6px;
}
@media (prefers-reduced-motion: no-preference) {
  .salto-contenido { transition: left .15s ease; }
}

.envoltura { max-width: var(--contenedor); margin: 0 auto; padding: 0 24px; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fuente-cuerpo); font-weight: 700; font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bronce-texto);
}
.etiqueta::before { content: ""; width: 20px; height: 1px; background: var(--bronce); }

.hero-fusion {
  position: relative;
  min-height: 100vh;   min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--verde-profundo); }

.hero-capas { position: absolute; inset: 0; }

.hero-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.15);
  transition: opacity .8s ease;
  will-change: opacity, transform;
}
/* El zoom va con animación (no con transición) para que también corra en la
   primera foto, que ya viene activa desde el HTML. Dura lo mismo que el
   intervalo del carrusel (2,5 s) y termina en la escala de reposo, así la
   foto que sale no da saltos. */
.hero-foto.activa {
  opacity: 1;
  z-index: 1;
  animation: zoom-hero 2.5s linear forwards;
}
@keyframes zoom-hero {
  from { transform: scale(1.05); }
  to   { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-foto { transition: opacity .3s ease; transform: none; }
  .hero-foto.activa { animation: none; transform: none; }
}

.hero-foto-consultorio { object-position: 62% 55%; }
.hero-foto-consultorio-principal { object-position: 50% 58%; }
@media (max-width: 900px) {
  .hero-foto-consultorio { object-position: 63% 20%; }
  .hero-foto-consultorio-principal { object-position: 55% 50%; }
}

.hero-scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(15, 26, 18, .5) 0%,
    rgba(15, 26, 18, .3) 20%,
    rgba(15, 26, 18, .6) 40%,
    rgba(15, 26, 18, .6) 70%,
    rgba(15, 26, 18, .32) 85%,
    rgba(15, 26, 18, .78) 100%
  );
}

.hero-controles {
  position: absolute; z-index: 7; left: 0; right: 0; bottom: 88px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.hero-puntos { display: flex; align-items: center; gap: 8px; }
.punto-foto {
  width: 8px; height: 8px; border-radius: 50%; padding: 0; border: none;
  background: rgba(255,255,255,.45); cursor: pointer;
  transition: background .3s, width .3s;
}
.punto-foto.activo { background: var(--blanco); width: 22px; border-radius: 8px; }

.hero-pausa {
  width: 30px; height: 30px; padding: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 26, 18, .45); color: var(--blanco);
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.hero-pausa:hover, .hero-pausa:focus-visible {
  background: rgba(15, 26, 18, .75); border-color: var(--blanco);
}
/* display:flex de arriba es estilo de autor y gana al [hidden] del navegador;
   sin esto el botón sigue visible con prefers-reduced-motion, donde no hay
   rotación automática que pausar. */
.hero-pausa[hidden] { display: none; }
.hero-pausa svg { width: 15px; height: 15px; }
.hero-pausa .icono-play { display: none; }
.hero-pausa.pausado .icono-pausa { display: none; }
.hero-pausa.pausado .icono-play { display: block; }

.nav-fusion {
  position: relative; z-index: 10;
  width: 100%;
}
.nav-fusion.fijo {
  position: fixed; top: 0; left: 0;
  background: rgba(250, 249, 245, .92);
  -webkit-backdrop-filter: blur(8px);   backdrop-filter: blur(8px);
  box-shadow: 0 2px 16px rgba(20, 58, 34, .08);
  animation: bajar-nav .25s ease;
}
@keyframes bajar-nav { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* Páginas interiores (políticas, 404): no hay hero detrás, así que la barra
   nace sólida y se queda pegada arriba. Sticky en vez del fixed del inicio
   para que no haga falta compensar su altura con relleno. */
.nav-fusion.solida {
  position: sticky; top: 0;
  background: rgba(250, 249, 245, .92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 2px 16px rgba(20, 58, 34, .08);
}

.nav-fusion-interior {
  max-width: var(--contenedor); margin: 0 auto; padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.marca-broca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca-broca img { width: 40px; height: auto; }
.marca-texto { font-family: var(--fuente-display); line-height: 1.1; }
.marca-texto .titulo { display: block; font-size: 20px; font-weight: 600; letter-spacing: .02em; color: var(--blanco); }
.marca-texto .subtitulo { display: block; font-size: 11.5px; color: rgba(255,255,255,.8); letter-spacing: .04em; }
.nav-fusion.fijo .marca-texto .titulo,
.nav-fusion.solida .marca-texto .titulo { color: var(--verde-profundo); }
.nav-fusion.fijo .marca-texto .subtitulo,
.nav-fusion.solida .marca-texto .subtitulo { color: var(--tinta-tenue); }

.menu-lista { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; }
.menu-enlace {
  text-decoration: none; font-size: 14.5px; font-weight: 500; color: var(--blanco);
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: border-color .2s, color .2s;
}
.nav-fusion.fijo .menu-enlace,
.nav-fusion.solida .menu-enlace { color: var(--tinta-suave); }
.menu-enlace:hover, .menu-enlace:focus-visible { border-color: var(--bronce); color: var(--bronce); }
/* Especificidad a propósito: tiene que ganarle a `.nav-fusion.solida
   .menu-enlace` y, en el menú móvil, al `#menuMovil .menu-enlace` con id. */
.nav-fusion.solida .menu-enlace[aria-current="page"],
#menuMovil .menu-enlace[aria-current="page"] {
  color: var(--verde-profundo); border-color: var(--bronce); font-weight: 600;
}

.velo-menu-movil {
  position: fixed; inset: 0; z-index: 9;
  background: rgba(15, 26, 18, .55);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.velo-menu-movil.visible {
  opacity: 1; visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}

/* Instagram en el menú: ícono solo en escritorio, ícono + texto en móvil */
.menu-instagram { display: inline-flex; align-items: center; gap: 10px; }
.menu-instagram svg { width: 18px; height: 18px; flex: none; }
#menuMovil .menu-enlace.menu-instagram { display: flex; justify-content: center; }

#menuMovil {
  display: flex; flex-direction: column; gap: 0;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  background: var(--papel); padding: 4px 24px 4px;
  max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px);
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 20px 40px rgba(15, 26, 18, .18);
  transform: translateY(-10px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .25s ease, opacity .2s ease, visibility 0s linear .25s;
}
#menuMovil.abierto {
  transform: translateY(0);
  opacity: 1; visibility: visible; pointer-events: auto;
  padding-bottom: 16px;
  transition: transform .25s ease, opacity .2s ease, visibility 0s;
}
#menuMovil .menu-enlace {
  color: var(--tinta-suave); display: block; padding: 12px 0;
  border-bottom: 1px solid var(--verde-borde);
  font-family: var(--fuente-display); font-size: 17px; font-weight: 500;
}
#menuMovil li:last-of-type .menu-enlace { border-bottom: none; }
#menuMovil .menu-enlace:hover, #menuMovil .menu-enlace:focus-visible { color: var(--verde-vivo); border-color: transparent; }

/* Cómo llegar: accesos directos a Google Maps y Waze */
.menu-movil-llegar { padding: 14px 0 4px; }
.menu-movil-llegar-titulo {
  margin: 0 0 10px; text-align: center;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--verde-vivo);
}
.menu-movil-llegar-titulo span {
  display: block; margin-top: 3px;
  font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--tinta-tenue);
}
.menu-movil-mapas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-mapa {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 10px; border: 1px solid var(--verde-borde); border-radius: 999px;
  background: var(--blanco); color: var(--tinta);
  text-decoration: none; font-size: 14.5px; font-weight: 600; white-space: nowrap;
  transition: border-color .2s, background .2s;
}
@media (max-width: 360px) {
  .menu-mapa { gap: 6px; padding: 11px 6px; font-size: 13.5px; }
  .menu-mapa svg { width: 20px; height: 20px; }
}
.menu-mapa svg { width: 22px; height: 22px; flex: none; }
.menu-mapa:hover, .menu-mapa:focus-visible { border-color: var(--verde-vivo); background: var(--verde-niebla); }

/* Con el menú abierto el aviso de cookies tapaba los últimos botones. */
body.menu-movil-abierto .aviso-cookies-broca { visibility: hidden; }

.menu-movil-cta { padding-top: 14px; }
.menu-movil-cta a {
  display: block; text-align: center; text-decoration: none;
  background: var(--verde-profundo); color: var(--blanco);
  font-size: 14.5px; font-weight: 600; letter-spacing: .01em;
  padding: 14px; border-radius: 999px;
  transition: background .2s;
}
.menu-movil-cta a:hover, .menu-movil-cta a:focus-visible { background: var(--verde-vivo); }

.boton-menu-movil {
  display: none; background: none; border: none; cursor: pointer;
  width: 40px; height: 40px; padding: 8px; position: relative; z-index: 21;
}
.boton-menu-movil .franja {
  display: block; width: 100%; height: 2px; background: var(--blanco);
  margin: 6px 0; transition: background .2s, transform .25s ease, opacity .2s ease;
}
.nav-fusion.fijo .boton-menu-movil .franja,
.nav-fusion.solida .boton-menu-movil .franja { background: var(--verde-profundo); }
.boton-menu-movil[aria-expanded="true"] .franja:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.boton-menu-movil[aria-expanded="true"] .franja:nth-child(2) { opacity: 0; }
.boton-menu-movil[aria-expanded="true"] .franja:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .velo-menu-movil, #menuMovil, .boton-menu-movil .franja { transition: none; }
}

.hero-contenido {
  position: relative; z-index: 5;
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px 24px;
}
.hero-texto { max-width: 720px; margin: 0 auto; text-align: center; }
.hero-texto .etiqueta {
  color: var(--blanco); justify-content: center;
  font-size: 18px;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.hero-texto .etiqueta::before { background: var(--bronce-suave); }
.hero-titulo {
  color: var(--blanco);
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  margin: 18px 0 0;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.hero-linea {
  display: block; width: 64px; height: 2px; background: var(--bronce);
  margin: 24px auto 0;
}
.hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 30px;
  background: var(--blanco); color: var(--verde-profundo); text-decoration: none;
  padding: 15px 32px; border-radius: 2px;
  font-weight: 700; font-size: 15.5px; letter-spacing: .01em;
  box-shadow: 0 10px 30px rgba(15, 26, 18, .35);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.hero-cta:hover, .hero-cta:focus-visible {
  background: var(--verde-niebla);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(15, 26, 18, .42);
}
.hero-cta svg { width: 19px; height: 19px; flex-shrink: 0; }
.hero-confianza {
  margin: 20px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px;
  color: var(--blanco); font-size: 14.5px; font-weight: 500; line-height: 1.5;
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}

.franja-beneficios-cita {
  background: var(--papel);
  padding: 0 24px;
}
.tarjeta-cita {
  max-width: 680px; margin: 0 auto; margin-top: -64px;
  background: var(--blanco);
  border-radius: 4px;
  border-top: 3px solid var(--verde-profundo);
  box-shadow: 0 24px 48px rgba(20,58,34,.14);
  padding: 44px 40px;
  text-align: center;
  position: relative; z-index: 6;
}
.tarjeta-cita h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  margin-bottom: 14px;
}
.tarjeta-cita p { margin: 0 0 20px; font-size: 15.5px; }
.tarjeta-cita strong { color: var(--tinta); }

.linea-telefono { font-size: 16.5px; font-weight: 500; color: var(--verde-profundo); margin: 0 0 22px; }
.enlace-telefono { color: inherit; text-decoration: none; font-weight: 700; }
.enlace-telefono:hover { color: var(--bronce); }

.boton-primario {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--verde-profundo); color: var(--blanco); text-decoration: none;
  padding: 15px 32px; border-radius: 2px; font-weight: 600; font-size: 15px;
  letter-spacing: .01em;
  transition: background .2s, transform .2s;
}
.boton-primario:hover, .boton-primario:focus-visible { background: var(--verde-vivo); transform: translateY(-2px); }

/* La única sección con relleno asimétrico, y por dos razones distintas:

   Arriba va apretada porque estas tarjetas continúan la idea de la tarjeta
   de cita que las precede, no abren un bloque nuevo.

   Abajo va a cero porque "Nuestra sede" comparte con ella el fondo papel:
   es la única pareja de secciones consecutivas del sitio sin cambio de
   color, y sumando los dos rellenos quedaba un vacío de 152px que nada
   justificaba. Así el hueco lo pone solo la sección siguiente. En el resto
   de transiciones el relleno doble sí se lee como aire de cada banda,
   porque el cambio de fondo cae justo en medio. */
.seccion-beneficios { padding: 48px 24px 0; }
.rejilla-beneficios {
  max-width: var(--contenedor); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
/* ---- Superficie de tarjeta, compartida por los tres bloques de tres:
   beneficios, equipo médico y enlaces de interés. Al pasar el cursor se
   despliega un filete bronce desde la izquierda por el borde superior, el
   mismo motivo de acento que ya usan la sección de historia y las notas de
   políticas. ---- */
.tarjeta-beneficio,
.tarjeta-doctora,
.tarjeta-aliado {
  position: relative; overflow: hidden;
  background: var(--blanco);
  border: 1px solid var(--verde-borde);
  border-radius: 4px;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.tarjeta-beneficio::after,
.tarjeta-doctora::after,
.tarjeta-aliado::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--bronce);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.tarjeta-beneficio:hover,
.tarjeta-doctora:hover,
.tarjeta-aliado:hover { border-color: var(--bronce-suave); }
.tarjeta-beneficio:hover::after,
.tarjeta-doctora:hover::after,
.tarjeta-aliado:hover::after { transform: scaleX(1); }

.tarjeta-beneficio {
  text-align: center;
  padding: 28px 28px 26px;
}

/* El icono va centrado sobre el título. */
.beneficio-cabecera {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: 18px;
}
.icono-beneficio {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--verde-niebla); color: var(--verde-profundo);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .3s ease, color .3s ease;
}
.icono-beneficio svg { width: 24px; height: 24px; }
.tarjeta-beneficio:hover .icono-beneficio {
  background: var(--verde-profundo); color: var(--blanco);
}
.tarjeta-beneficio h3 {
  font-family: var(--fuente-cuerpo); font-size: 17px; font-weight: 700;
  color: var(--tinta); margin-bottom: 8px;
}
.tarjeta-beneficio p { margin: 0; font-size: 14.5px; }

.seccion-sede { padding: var(--espacio-seccion) 24px; }

.carrusel-sede-contenedor {
  position: relative;
  max-width: var(--contenedor); margin: 0 auto;
  display: flex; align-items: center;
}
.carrusel-sede-track {
  display: flex; gap: 20px;
  overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  width: 100%; padding: 6px 4px;
}
.carrusel-sede-track::-webkit-scrollbar { display: none; }
.carrusel-sede-track { -ms-overflow-style: none; scrollbar-width: none; }

.carrusel-sede-item {
  flex: 0 0 calc(33.333% - 14px);
  scroll-snap-align: start;
  box-sizing: border-box;
}
.carrusel-sede-item img {
  width: 100%; height: 340px; object-fit: cover;
  border-radius: 4px; border: 1px solid var(--verde-borde);
}

.flecha-sede {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: var(--verde-profundo); color: var(--blanco);
  border: none; width: 44px; height: 44px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 18px; z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,.15);
  transition: background .2s, transform .2s;
}
.flecha-sede:hover { background: var(--verde-vivo); transform: translateY(-50%) scale(1.05); }
.flecha-sede.prev { left: -22px; }
.flecha-sede.next { right: -22px; }

.carrusel-sede-controles { display: flex; justify-content: center; margin-top: 24px; }
.carrusel-sede-indicadores { display: flex; gap: 8px; }
.punto-sede {
  width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%;
  background: var(--verde-borde); cursor: pointer;
  transition: background .3s, width .3s;
  -webkit-appearance: none; appearance: none; flex-shrink: 0;
}
.punto-sede.activo { background: var(--bronce); width: 22px; border-radius: 10px; }

@media (max-width: 900px) {
  .carrusel-sede-item { flex: 0 0 calc(50% - 10px); }
  .carrusel-sede-item img { height: 280px; }
  .flecha-sede.prev { left: -10px; }
  .flecha-sede.next { right: -10px; }
}
@media (max-width: 600px) {
  .carrusel-sede-item { flex: 0 0 88%; }
  .carrusel-sede-item img { height: 320px; }
  .flecha-sede { display: none; }
}

.seccion-motivos { background: var(--verde-niebla); padding: var(--espacio-seccion) 24px; }
.cabecera-seccion { max-width: 680px; margin: 0 auto 40px; text-align: center; }
.cabecera-seccion h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-bottom: 18px; }

.lista-motivos { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.motivo-item {
  background: var(--blanco); border: 1px solid var(--verde-borde); border-radius: 4px;
  overflow: hidden;
}
.motivo-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 26px; cursor: pointer; list-style: none;
  font-family: var(--fuente-display); font-weight: 600; font-size: 16.5px;
  color: var(--verde-profundo);
  text-align: left;
}
.motivo-cabecera::-webkit-details-marker { display: none; }
.motivo-cabecera .flecha { font-size: 12px; color: var(--bronce); transition: transform .25s; flex-shrink: 0; }
.motivo-item[open] .flecha { transform: rotate(180deg); }
.motivo-contenido { padding: 0 26px 24px; text-align: left; }
.motivo-contenido ul { margin: 0; padding-left: 20px; list-style: disc; }
.motivo-contenido li { font-size: 14.5px; margin-bottom: 6px; }

.seccion-equipo { padding: var(--espacio-seccion) 24px; text-align: center; }
.seccion-equipo .cabecera-seccion p { max-width: 620px; margin: 0 auto; }

.rejilla-equipo {
  max-width: var(--contenedor); margin: 36px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
/* Estas se quedan centradas: el monograma hace de retrato y en una ficha de
   persona el centrado es lo correcto. Tampoco se elevan, porque no son
   enlaces. */
.tarjeta-doctora { padding: 36px 28px; }
.monograma {
  width: 76px; height: 76px; border-radius: 50%;
  border: 1.5px solid var(--bronce);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-family: var(--fuente-display); font-size: 22px; font-weight: 600;
  color: var(--verde-profundo);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.tarjeta-doctora:hover .monograma {
  background: var(--verde-profundo); color: var(--blanco);
  border-color: var(--verde-profundo);
}
.tarjeta-doctora h3 { font-size: 18px; margin-bottom: 6px; }
.tarjeta-doctora .especialidad { font-size: 13.5px; font-weight: 600; color: var(--tinta-suave); margin: 0 0 2px; }
.tarjeta-doctora .enfoque { font-size: 14px; font-weight: 700; color: var(--bronce-texto); margin: 0; text-transform: uppercase; letter-spacing: .06em; }

.cta-equipo { margin-top: 36px; }
.boton-secundario {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--verde-profundo); text-decoration: none;
  padding: 14px 30px; border: 1.5px solid var(--verde-profundo); border-radius: 2px;
  font-weight: 600; font-size: 14.5px;
  transition: background .2s, color .2s;
}
.boton-secundario:hover, .boton-secundario:focus-visible { background: var(--verde-profundo); color: var(--blanco); }
.boton-secundario svg { width: 18px; height: 18px; }

.seccion-historia { background: var(--verde-profundo); color: rgba(255,255,255,.88); padding: var(--espacio-seccion) 24px; }
.rejilla-historia {
  max-width: var(--contenedor); margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 72px; align-items: center;
}
.encabezado-columna { text-align: center; }
.seccion-historia .etiqueta { color: var(--bronce-suave); justify-content: center; }
.seccion-historia .etiqueta::before { background: var(--bronce-suave); }
.seccion-historia h2 { color: var(--blanco); font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin: 16px 0 24px; }
.seccion-historia p { font-size: 16px; margin: 0 0 18px; color: rgba(255,255,255,.82); }
.seccion-historia p:first-of-type {
  font-family: var(--fuente-display); font-size: 19px; color: var(--blanco);
  border-left: 2px solid var(--bronce); padding-left: 20px;
}
.marco-historia { border: 1px solid rgba(255,255,255,.18); padding: 10px; border-radius: 4px; }
.marco-historia img { border-radius: 2px; }

.seccion-cerebro { padding: var(--espacio-seccion) 24px; }
.rejilla-cerebro {
  max-width: var(--contenedor); margin: 0 auto;
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center;
}
.cerebro-visual img { border-radius: 4px; }
.cerebro-texto h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 10px; }
.cerebro-texto h3 {
  font-family: var(--fuente-cuerpo); font-size: 15px; font-weight: 700;
  color: var(--bronce-texto); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 20px;
}
.lista-cerebro { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.lista-cerebro li {
  position: relative; padding-left: 28px; font-size: 15px;
}
.lista-cerebro li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--bronce);
}

.seccion-cierre { background: var(--verde-niebla); padding: var(--espacio-seccion) 24px; }
.rejilla-cierre {
  max-width: var(--contenedor); margin: 0 auto;
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center;
}
.marco-cierre { border-radius: 4px; overflow: hidden; box-shadow: 0 20px 44px rgba(20,58,34,.14); }
.seccion-cierre .etiqueta { justify-content: center; }
.seccion-cierre h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin: 14px 0 20px; }
.seccion-cierre p.parrafo { font-size: 16px; margin: 0 0 24px; }

.boton-final {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--verde-profundo); color: var(--blanco); text-decoration: none;
  padding: 16px 34px; border-radius: 2px; font-weight: 600; font-size: 15.5px;
  transition: background .2s, gap .2s;
}
.boton-final:hover, .boton-final:focus-visible { background: var(--verde-vivo); gap: 16px; }
.boton-final svg { width: 20px; height: 20px; }

.seccion-ubicacion { padding: var(--espacio-seccion) 24px; }
.contenido-ubicacion { max-width: 760px; margin: 0 auto; text-align: center; }
.contenido-ubicacion h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-bottom: 20px; }
.contenido-ubicacion p.texto-direccion { font-size: 16px; margin: 0 0 40px; }

.nota-cita-previa {
  font-weight: 700; font-size: 14px; color: var(--bronce-texto);
  text-transform: uppercase; letter-spacing: .06em;
  margin: 0 0 16px;
}

.tarjeta-horario {
  display: inline-flex; align-items: center; gap: 18px; text-align: center;
  background: var(--verde-niebla); border-radius: 4px; padding: 22px 30px; margin-bottom: 40px;
}
.tarjeta-horario svg { width: 30px; height: 30px; color: var(--verde-profundo); flex-shrink: 0; }
.tarjeta-horario .etiqueta-horario { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bronce-texto); display: block; margin-bottom: 4px; }
.tarjeta-horario p { margin: 0; font-size: 14.5px; color: var(--tinta-suave); }
.tarjeta-horario .principal { color: var(--tinta); font-size: 15.5px; margin-bottom: 2px; }
.tarjeta-horario .principal strong { white-space: nowrap; }

.botones-mapa { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.boton-mapa {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none;
  background: var(--blanco); border: 1px solid var(--verde-borde); border-radius: 4px;
  padding: 20px 24px; min-width: 220px; text-align: center;
  transition: border-color .2s, transform .2s;
}
.boton-mapa:hover { border-color: var(--bronce); transform: translateY(-2px); }
.boton-mapa .sub { display: block; font-size: 11.5px; color: var(--tinta-tenue); }
.boton-mapa .nombre { display: block; font-size: 15px; font-weight: 700; color: var(--tinta); }
.icono-mapa { flex-shrink: 0; }
.icono-mapa-google { width: 26px; height: 26px; }
.icono-mapa-waze { width: 28px; height: 28px; }

.seccion-enlaces { background: var(--verde-niebla); padding: var(--espacio-seccion) 24px; }
.cabecera-enlaces { max-width: var(--contenedor); margin: 0 auto 36px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.cabecera-enlaces svg { width: 26px; height: 26px; color: var(--verde-profundo); }
.cabecera-enlaces h2 { font-size: 1.4rem; }
.rejilla-aliados {
  max-width: var(--contenedor); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.tarjeta-aliado {
  padding: 28px; text-align: center; text-decoration: none;
}
/* Estas sí son enlaces, así que aquí la elevación está justificada: es la
   señal de que se puede pulsar, y es lo que las distingue de las otras dos. */
.tarjeta-aliado:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(20, 58, 34, .1);
}
/* Los tres logos vienen con proporciones muy distintas (395x127, 224x225,
   738x315). Con max-height cada uno ocupaba un alto distinto y la fila se
   veía descuadrada; una caja de alto fijo con object-fit los alinea sin
   deformarlos. */
.tarjeta-aliado img {
  height: 56px; width: 100%;
  object-fit: contain; object-position: center;
  margin: 0 0 16px;
}
.tarjeta-aliado span {
  font-size: 12.5px; color: var(--tinta-tenue);
  overflow-wrap: anywhere;
}

/* Páginas interiores: políticas y 404. Reutilizan la cabecera, el pie, los
   botones y el acordeón del inicio; aquí solo lo propio de estas dos. */
.pagina-interior { max-width: 820px; margin: 0 auto; padding: var(--espacio-seccion) 24px; }
.cabecera-interior { margin-bottom: 40px; }
.cabecera-interior .etiqueta { justify-content: center; }
.cabecera-interior h1 {
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  margin: 16px 0 12px;
}
.subtitulo-interior {
  font-size: 16px; color: var(--tinta-tenue); margin: 0;
  font-family: var(--fuente-display);
}
.parrafo-interior { font-size: 16px; margin: 0 0 40px; }

.sub-item-titulo {
  font-family: var(--fuente-cuerpo); font-size: 14px; font-weight: 700;
  color: var(--bronce-texto); text-transform: uppercase; letter-spacing: .06em;
  margin: 22px 0 10px;
}
.caja-nota-importante {
  background: var(--verde-niebla); border-left: 2px solid var(--bronce);
  padding: 20px 24px; margin-top: 24px; font-size: 14.5px;
}
.caja-nota-importante strong { color: var(--verde-profundo); }
.caja-nota-importante ul { margin: 10px 0 0; padding-left: 20px; }
.caja-nota-importante li { margin-bottom: 8px; }
.caja-nota-importante li:last-child { margin-bottom: 0; }

.pagina-error { max-width: 640px; margin: 0 auto; padding: var(--espacio-seccion) 24px; }
.pagina-error .etiqueta { justify-content: center; }
.pagina-error h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin: 16px 0 20px;
}
.pagina-error .texto-error { font-size: 16px; margin: 0 0 28px; }
.grupo-cta-error {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 56px;
}
.enlaces-error {
  border-top: 1px solid var(--verde-borde); padding-top: 32px;
}
.enlaces-error .titulo-enlaces-error {
  font-size: 14px; font-weight: 700; color: var(--bronce-texto);
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 18px;
}
.enlaces-error ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px;
}
.enlaces-error a {
  text-decoration: none; font-size: 14.5px; color: var(--verde-profundo);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color .2s, color .2s;
}
.enlaces-error a:hover, .enlaces-error a:focus-visible {
  color: var(--bronce); border-color: var(--bronce);
}

@media (max-width: 560px) {
  .grupo-cta-error { flex-direction: column; align-items: stretch; }
  .grupo-cta-error .boton-primario,
  .grupo-cta-error .boton-secundario { justify-content: center; }
}

.pie-broca { background: var(--verde-profundo); color: rgba(255,255,255,.75); padding: var(--espacio-seccion) 24px 0; text-align: center; }
.rejilla-pie {
  max-width: var(--contenedor); margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 48px;
  padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.15);
  justify-items: center;
}
.pie-broca h2 { color: var(--blanco); font-size: 20px; margin-bottom: 14px; }
.pie-broca .tagline { font-size: 14px; margin: 0 auto 24px; max-width: 40ch; }
.pie-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pie-nav a { text-decoration: none; font-size: 14px; color: rgba(255,255,255,.8); }
.pie-nav a:hover { color: var(--bronce-suave); }

.direccion-pie { font-style: normal; font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.direccion-pie a { color: var(--bronce-suave); text-decoration: none; }
.direccion-pie .destacado { color: var(--blanco); font-weight: 600; }

.redes-pie { display: flex; gap: 14px; align-items: flex-start; justify-content: center; }
.enlace-red {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center; color: var(--blanco);
  transition: border-color .2s, background .2s;
}
.enlace-red svg { width: 18px; height: 18px; }
.enlace-red:hover { border-color: var(--bronce); background: rgba(169,131,77,.15); }

.base-legal { max-width: var(--contenedor); margin: 0 auto; padding: 24px 0; font-size: 12.5px; color: rgba(255,255,255,.55); text-align: center; }
.base-legal p { margin: 0 0 4px; }

/* --alto-aviso-cookies lo fija consent.js mientras el aviso está en pantalla:
   el botón sube por encima del aviso para que nunca quede tapado. */
.boton-flotante {
  position: fixed; right: 22px; bottom: calc(22px + var(--alto-aviso-cookies, 0px)); z-index: 10000;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  text-decoration: none;
}
.boton-flotante svg { width: 28px; height: 28px; }
.boton-flotante:hover { transform: scale(1.06); }
@media (prefers-reduced-motion: no-preference) {
  .boton-flotante { transition: transform .2s ease, opacity .2s ease, bottom .3s ease; }
}

/* El velo del menú móvil vive en z-index 9 y el botón flotante en 500: sin
   esto se queda iluminado sobre el contenido atenuado y sigue pulsable
   mientras el menú actúa como diálogo. */
body.menu-movil-abierto .boton-flotante { opacity: 0; pointer-events: none; }

@media (max-width: 900px) {
  .rejilla-beneficios { grid-template-columns: 1fr; gap: 32px; }
  .rejilla-equipo { grid-template-columns: 1fr; }
  .rejilla-historia, .rejilla-cerebro, .rejilla-cierre { grid-template-columns: 1fr; gap: 32px; }
  .rejilla-cerebro .cerebro-visual { order: 2; }
  .rejilla-pie { grid-template-columns: 1fr; gap: 32px; }
  .rejilla-aliados { grid-template-columns: 1fr 1fr; }

  .seccion-beneficios { padding-top: 36px; }
  .cabecera-seccion { margin-bottom: 32px; }
}

@media (max-width: 760px) {
  .menu-lista { display: none; }
  .boton-menu-movil { display: block; }
  .hero-titulo { font-size: clamp(1.9rem, 7vw, 2.6rem); }
}

@media (max-width: 560px) {
  .rejilla-aliados { grid-template-columns: 1fr; }
  .tarjeta-cita { padding: 32px 24px; }
  .botones-mapa { flex-direction: column; align-items: stretch; }
}