@charset "UTF-8";
/* ===========================================================================
   Clinica Medica Los Angeles — Jerez de la Frontera
   Hoja de estilos unica del sitio.

   INDICE
     01. Variables y paleta
     02. Reset y base
     03. Tipografia
     04. Utilidades y contenedores
     05. Botones y llamadas a la accion
     06. Splash / cargador
     07. Barra superior y cabecera
     08. Navegacion (escritorio y movil)
     09. Migas de pan
     10. Hero
     11. Bloque de servicios a domicilio
     12. Rejilla de especialidades
     13. Por que elegirnos
     14. Equipo
     15. Aseguradoras
     16. Resenas de Google
     17. Contacto y formulario
     18. Paginas de especialidad
     19. Preguntas frecuentes
     20. Pie de pagina
     21. Barra de contacto movil
     22. Animaciones al hacer scroll
     23. Impresion

   La paleta parte del verde corporativo real del logo (#006A5E) y le suma
   un azul clinico. Todos los pares texto/fondo cumplen contraste AA.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   01. Variables y paleta
   --------------------------------------------------------------------------- */
:root {
  /* Verde corporativo (extraido del logo oficial) */
  --verde-900: #00332D;
  --verde-800: #00463E;
  --verde-700: #00564D;
  --verde-600: #006A5E; /* color de marca */
  --verde-500: #0C8778;
  --verde-300: #7FC7BB;
  --verde-100: #DCF0EC;
  --verde-050: #F0F8F6;

  /* Azul clinico */
  --azul-900: #082F3E;
  --azul-800: #0B455A;
  --azul-700: #10607D; /* azul principal */
  --azul-600: #16718F;
  --azul-500: #1E86AB;
  --azul-300: #86C2D8;
  --azul-100: #DFEEF5;
  --azul-050: #F2F9FC;

  /* Neutros calidos (evitan la frialdad de un gris puro) */
  --crema: #FBF8F4;
  --arena: #F3EDE5;
  --borde: #E4DDD4;
  --borde-suave: #EFE9E1;
  --texto: #1F2A2E;
  --texto-medio: #4C5C61;
  --texto-suave: #5F6E72;
  --blanco: #FFFFFF;

  /* Semanticos */
  --aviso-fondo: #FFF7E8;
  --aviso-borde: #E8C98A;
  --aviso-texto: #6B4E12;

  /* Medidas */
  --ancho-max: 1200px;
  --ancho-texto: 68ch;
  --radio-s: 8px;
  --radio: 14px;
  --radio-l: 22px;
  --alto-cabecera: 76px;

  /* Sombras */
  --sombra-s: 0 1px 2px rgba(8, 47, 62, .06), 0 2px 6px rgba(8, 47, 62, .05);
  --sombra: 0 2px 4px rgba(8, 47, 62, .05), 0 8px 24px rgba(8, 47, 62, .08);
  --sombra-l: 0 4px 8px rgba(8, 47, 62, .06), 0 18px 48px rgba(8, 47, 62, .12);

  /* Tipografia */
  --fuente-titulos: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --fuente-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   02. Reset y base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-cabecera) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;      /* 17px: lectura comoda tambien para pacientes mayores */
  line-height: 1.7;
  font-feature-settings: 'kern' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.sin-scroll { overflow: hidden; }

img, picture, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a { color: var(--azul-700); text-underline-offset: .18em; }
a:hover { color: var(--azul-800); }

button, input, select, textarea { font: inherit; color: inherit; }

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

/* Foco visible y consistente en todo el sitio (accesibilidad) */
:focus-visible {
  outline: 3px solid var(--azul-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Enlace de salto al contenido para lectores de pantalla y teclado */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--verde-600);
  color: #fff;
  padding: .85rem 1.25rem;
  border-radius: 0 0 var(--radio-s) 0;
  font-weight: 600;
  text-decoration: none;
}
.salto-contenido:focus {
  left: 0;
  color: #fff;
}

/* ---------------------------------------------------------------------------
   03. Tipografia
   --------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  line-height: 1.18;
  color: var(--azul-900);
  margin: 0 0 .6em;
  letter-spacing: -.01em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); }
h4 { font-size: 1.08rem; font-family: var(--fuente-texto); font-weight: 700; }

p { margin: 0 0 1.15em; max-width: var(--ancho-texto); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 650; color: var(--azul-900); }

ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; max-width: var(--ancho-texto); }
li { margin-bottom: .45em; }
li:last-child { margin-bottom: 0; }

.entradilla {
  font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem);
  line-height: 1.62;
  color: var(--texto-medio);
}

.antetitulo {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--verde-600);
  margin-bottom: .85rem;
}

/* Lista con marca de verificacion, para beneficios y prestaciones */
.lista-marcada {
  list-style: none;
  padding-left: 0;
}
.lista-marcada li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .7em;
}
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--verde-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23006A5E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / .8rem no-repeat;
}

/* ---------------------------------------------------------------------------
   04. Utilidades y contenedores
   --------------------------------------------------------------------------- */
.contenedor {
  width: min(100% - 2.5rem, var(--ancho-max));
  margin-inline: auto;
}
@media (max-width: 640px) {
  .contenedor { width: min(100% - 1.75rem, var(--ancho-max)); }
}

.seccion { padding: clamp(3rem, 2rem + 4.5vw, 5.5rem) 0; }
.seccion--ajustada { padding: clamp(2.25rem, 1.5rem + 3vw, 3.75rem) 0; }
.seccion--crema { background: var(--crema); }
.seccion--azul { background: var(--azul-050); }
.seccion--verde { background: var(--verde-050); }
.seccion--oscura {
  background: linear-gradient(150deg, var(--azul-900) 0%, var(--verde-800) 100%);
  color: #E9F2F1;
}
.seccion--oscura h2,
.seccion--oscura h3 { color: #fff; }
.seccion--oscura .antetitulo { color: var(--verde-300); }
.seccion--oscura a { color: #fff; }

.cabecera-seccion {
  max-width: 62ch;
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.cabecera-seccion--centrada {
  margin-inline: auto;
  text-align: center;
}
.cabecera-seccion p { color: var(--texto-medio); }
.cabecera-seccion--centrada p { margin-inline: auto; }

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.centrado { text-align: center; }
.mt-2 { margin-top: 2rem; }

/* Aviso destinado al cliente/gestor, visible solo en desarrollo.
   Se puede ocultar de golpe anadiendo la clase 'produccion' al <body>. */
.aviso-revision {
  background: var(--aviso-fondo);
  border: 1px dashed var(--aviso-borde);
  color: var(--aviso-texto);
  border-radius: var(--radio-s);
  padding: .8rem 1rem;
  font-size: .9rem;
  line-height: 1.55;
  margin: 1.25rem 0;
  max-width: var(--ancho-texto);
}
.aviso-revision strong { color: var(--aviso-texto); }
body.produccion .aviso-revision { display: none; }

/* ---------------------------------------------------------------------------
   05. Botones y llamadas a la accion
   --------------------------------------------------------------------------- */
.boton {
  --boton-fondo: var(--azul-700);
  --boton-texto: #fff;
  --boton-borde: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1.5rem;
  min-height: 50px;
  background: var(--boton-fondo);
  color: var(--boton-texto);
  border: 2px solid var(--boton-borde);
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  box-shadow: var(--sombra-s);
}
.boton:hover {
  color: var(--boton-texto);
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}
.boton:active { transform: translateY(0); }
.boton svg { flex: none; width: 1.2em; height: 1.2em; }

/* Las dos CTA principales comparten tamano y peso visual a proposito:
   ni el telefono ni WhatsApp deben parecer la opcion secundaria. */
/* Pedir cita: acción principal del sitio. Verde corporativo, sólido, y con
   un poco más de peso visual que el resto para que gane sin gritar. */
.boton--cita {
  --boton-fondo: var(--verde-600);
  font-weight: 650;
  box-shadow: 0 2px 4px rgba(0, 106, 94, .18), 0 8px 20px rgba(0, 106, 94, .18);
}
.boton--cita:hover { --boton-fondo: var(--verde-700); }
.boton--cita.boton--claro { --boton-fondo: #fff; --boton-texto: var(--verde-700); }

.boton--whatsapp {
  --boton-fondo: transparent;
  --boton-texto: var(--verde-700);
  --boton-borde: var(--verde-300);
  box-shadow: none;
}
.boton--whatsapp:hover {
  --boton-fondo: var(--verde-050);
  --boton-borde: var(--verde-600);
}
/* Sobre fondo oscuro el contorno tiene que verse.
   El fondo se declara transparente aqui a proposito, aunque ya lo sea en
   .boton--whatsapp: en el cierre oscuro estos botones llevan ademas la clase
   .boton--claro, que pinta el fondo de blanco. Sin esta linea ganaba ella (se
   declara mas abajo en el archivo) y el boton quedaba con letra blanca sobre
   fondo blanco, es decir, invisible. */
.cta-final .boton--whatsapp,
.domicilio .boton--whatsapp {
  --boton-fondo: transparent;
  --boton-texto: #fff;
  --boton-borde: rgba(255, 255, 255, .55);
}
.cta-final .boton--whatsapp:hover,
.domicilio .boton--whatsapp:hover {
  --boton-fondo: rgba(255, 255, 255, .12);
  --boton-borde: #fff;
}

/* El teléfono baja a enlace de texto donde hay botón de cita: con tres
   botones sólidos no habría jerarquía y no destacaría ninguno. */
.cta-telefono {
  margin-top: .9rem;
  font-size: .97rem;
  color: var(--texto-suave);
}
.cta-telefono a {
  font-weight: 650;
  color: var(--azul-700);
  white-space: nowrap;
}
.cta-final .cta-telefono { color: #CFE5E2; }
.cta-final .cta-telefono a { color: #fff; }

.boton--telefono { --boton-fondo: var(--azul-700); }
.boton--telefono:hover { --boton-fondo: var(--azul-800); }

.boton--contorno {
  --boton-fondo: transparent;
  --boton-texto: var(--azul-800);
  --boton-borde: var(--azul-300);
  box-shadow: none;
}
.boton--contorno:hover {
  --boton-fondo: var(--azul-050);
  --boton-borde: var(--azul-500);
}

.boton--claro {
  --boton-fondo: #fff;
  --boton-texto: var(--verde-700);
}

.boton--ancho { width: 100%; }

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 1.75rem;
}
.grupo-botones .boton { flex: 1 1 auto; min-width: 210px; }
@media (min-width: 720px) {
  .grupo-botones .boton { flex: 0 1 auto; }
}

/* Enlace con flecha, para "seguir leyendo" */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--azul-700);
}
.enlace-flecha::after {
  content: "→";
  transition: transform .18s ease;
}
.enlace-flecha:hover { text-decoration: underline; }
.enlace-flecha:hover::after { transform: translateX(4px); }

/* ---------------------------------------------------------------------------
   06. Splash / cargador
   Doble red de seguridad: la animacion CSS lo retira sola aunque el JS falle
   o no llegue a ejecutarse nunca. El contenido de la pagina NUNCA depende
   de el: es solo una capa superpuesta que se desvanece.
   --------------------------------------------------------------------------- */
#splash {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--crema);
  animation: splash-fuera .45s ease 1.1s forwards;
}
#splash img { width: min(260px, 62vw); }
#splash.oculto { animation: none; opacity: 0; visibility: hidden; pointer-events: none; }

@keyframes splash-fuera {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Sin JavaScript no hay splash en absoluto */
html:not(.js) #splash { display: none; }

@media (prefers-reduced-motion: reduce) {
  #splash { animation-duration: .01s; animation-delay: .01s; }
}

/* ---------------------------------------------------------------------------
   07. Barra superior y cabecera
   --------------------------------------------------------------------------- */
.barra-superior {
  background: var(--verde-800);
  color: #DCEFEB;
  font-size: .875rem;
}
.barra-superior .contenedor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem 1.5rem;
  padding: .5rem 0;
}
.barra-superior a { color: #fff; text-decoration: none; font-weight: 600; }
.barra-superior a:hover { text-decoration: underline; color: #fff; }
.barra-superior__dato {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.barra-superior svg { width: 1em; height: 1em; flex: none; opacity: .85; }
@media (max-width: 860px) {
  .barra-superior__horario { display: none; }
  .barra-superior .contenedor { justify-content: center; }
}

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--borde-suave);
  transition: box-shadow .2s ease;
}
.cabecera.desplazada { box-shadow: var(--sombra-s); }

.cabecera .contenedor {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--alto-cabecera);
}

.logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
}
.logo img {
  width: auto;
  height: 46px;
}
@media (max-width: 480px) {
  .logo img { height: 38px; }
}

.cabecera__cta { display: none; }
@media (min-width: 1080px) {
  .cabecera__cta {
    display: inline-flex;
    padding: .6rem 1.15rem;
    min-height: 44px;
    font-size: .95rem;
  }
}

/* ---------------------------------------------------------------------------
   08. Navegacion
   --------------------------------------------------------------------------- */
.abrir-menu {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: .5rem .9rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--azul-900);
  cursor: pointer;
}
.abrir-menu svg { width: 1.15rem; height: 1.15rem; }
@media (min-width: 1024px) { .abrir-menu { display: none; } }

.navegacion { display: none; }
@media (min-width: 1024px) { .navegacion { display: block; } }

.navegacion__lista {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.navegacion__enlace {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .55rem .8rem;
  border-radius: var(--radio-s);
  color: var(--azul-900);
  text-decoration: none;
  font-weight: 550;
  font-size: .97rem;
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.navegacion__enlace:hover { background: var(--azul-050); color: var(--azul-800); }
.navegacion__enlace[aria-current="page"] {
  color: var(--verde-700);
  box-shadow: inset 0 -2px 0 var(--verde-600);
  border-radius: var(--radio-s) var(--radio-s) 0 0;
}
.navegacion__flecha {
  width: .7rem; height: .7rem;
  transition: transform .18s ease;
}
.navegacion__enlace[aria-expanded="true"] .navegacion__flecha { transform: rotate(180deg); }

/* Submenu de especialidades */
.navegacion__grupo { position: relative; }
.submenu {
  position: absolute;
  top: calc(100% + .5rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(660px, 88vw);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .15rem .6rem;
  list-style: none;
  margin: 0;
  padding: .75rem;
  max-width: none;
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  box-shadow: var(--sombra-l);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.navegacion__grupo.abierto .submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.submenu a {
  display: block;
  padding: .55rem .7rem;
  border-radius: var(--radio-s);
  color: var(--texto);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
}
.submenu a:hover { background: var(--verde-050); color: var(--verde-700); }
.submenu li { margin: 0; }
.submenu__destacado a {
  background: var(--verde-050);
  color: var(--verde-700);
  font-weight: 650;
}
.submenu__destacado { grid-column: 1 / -1; }

/* Menu movil (panel lateral) */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 150;
  visibility: hidden;
}
.menu-movil.abierto { visibility: visible; }

.menu-movil__fondo {
  position: absolute;
  inset: 0;
  background: rgba(8, 47, 62, .5);
  opacity: 0;
  transition: opacity .25s ease;
}
.menu-movil.abierto .menu-movil__fondo { opacity: 1; }

.menu-movil__panel {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: min(400px, 90vw);
  background: #fff;
  box-shadow: var(--sombra-l);
  padding: 1.1rem 1.35rem 2.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.menu-movil.abierto .menu-movil__panel { transform: translateX(0); }

.menu-movil__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.cerrar-menu {
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 999px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--azul-900);
}
.cerrar-menu svg { width: 1.1rem; height: 1.1rem; }

.menu-movil__lista {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  max-width: none;
}
.menu-movil__lista li { margin: 0; }
.menu-movil__lista a {
  display: block;
  padding: .8rem .25rem;
  border-bottom: 1px solid var(--borde-suave);
  color: var(--azul-900);
  text-decoration: none;
  font-weight: 600;
}
.menu-movil__lista a:hover { color: var(--verde-700); }
.menu-movil__lista--anidada { margin: 0 0 .5rem; padding-left: .9rem; }
.menu-movil__lista--anidada a {
  font-weight: 500;
  font-size: .95rem;
  padding: .62rem .25rem;
  color: var(--texto-medio);
}
.menu-movil__seccion {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--verde-600);
  margin: 1.4rem 0 .5rem;
}

/* ---------------------------------------------------------------------------
   09. Migas de pan
   --------------------------------------------------------------------------- */
.migas {
  font-size: .875rem;
  color: var(--texto-suave);
  padding: 1rem 0 0;
}
.migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .55rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.migas li { margin: 0; display: inline-flex; align-items: center; gap: .55rem; }
.migas li + li::before { content: "/"; color: var(--borde); }
.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { color: var(--azul-700); text-decoration: underline; }
.migas [aria-current="page"] { color: var(--texto); font-weight: 550; }

/* ---------------------------------------------------------------------------
   10. Hero
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--crema);
  overflow: hidden;
}
.hero::after {
  /* Mancha de color muy suave, puramente decorativa */
  content: "";
  position: absolute;
  right: -12%;
  top: -30%;
  width: 55vw;
  height: 55vw;
  max-width: 720px; max-height: 720px;
  background: radial-gradient(circle, rgba(12, 135, 120, .12) 0%, rgba(12, 135, 120, 0) 68%);
  pointer-events: none;
}
.hero__rejilla {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0;
}
@media (min-width: 940px) {
  .hero__rejilla { grid-template-columns: 1.05fr .95fr; }
}
.hero h1 { margin-bottom: .45em; }
.hero h1 .destacado { color: var(--verde-600); }
.hero__entradilla { max-width: 54ch; }

.hero__figura {
  position: relative;
  border-radius: var(--radio-l);
  overflow: hidden;
  box-shadow: var(--sombra-l);
  aspect-ratio: 16 / 11;
  background: var(--arena);
}
.hero__figura img { width: 100%; height: 100%; object-fit: cover; }

.hero__insignia {
  position: absolute;
  left: 1rem; bottom: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(6px);
  border-radius: var(--radio);
  padding: .8rem 1rem;
  box-shadow: var(--sombra);
  font-size: .9rem;
  line-height: 1.45;
}
.hero__insignia svg {
  flex: none;
  width: 2rem; height: 2rem;
  color: var(--verde-600);
}
.hero__insignia strong { display: block; color: var(--azul-900); }
.hero__insignia span { color: var(--texto-suave); }

/* Datos rapidos bajo el hero */
.tira-datos {
  border-top: 1px solid var(--borde-suave);
  background: #fff;
}
/* Las separaciones se dibujan sobre cada dato, NO con el truco de poner
   color al contenedor y dejar que asome por un hueco de 1px. Ese truco se
   rompe cuando los datos pasan a dos filas: las celdas que quedan vacias
   muestran el color del fondo y parece que falta algo. */
.tira-datos ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  background: #fff;
}
.tira-datos li {
  margin: 0;
  background: #fff;
  padding: 1.35rem 1.5rem;
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  box-shadow: inset 1px 0 0 var(--borde-suave);
}
/* El primero de la fila no lleva raya a su izquierda */
.tira-datos li:first-child { box-shadow: none; }
.tira-datos svg { flex: none; width: 1.5rem; height: 1.5rem; color: var(--verde-600); margin-top: .15rem; }
.tira-datos strong { display: block; font-size: .98rem; color: var(--azul-900); }
.tira-datos span { font-size: .92rem; color: var(--texto-suave); line-height: 1.5; }
.tira-datos a { color: var(--azul-700); text-decoration: none; font-weight: 600; }
.tira-datos a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   11. Bloque de servicios a domicilio (diferenciador principal)
   --------------------------------------------------------------------------- */
.domicilio {
  background: linear-gradient(155deg, var(--verde-800) 0%, var(--azul-800) 100%);
  color: #E6F2F0;
  position: relative;
  overflow: hidden;
}
.domicilio::before {
  content: "";
  position: absolute;
  left: -8%; bottom: -45%;
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  background: radial-gradient(circle, rgba(127, 199, 187, .18) 0%, rgba(127, 199, 187, 0) 70%);
  pointer-events: none;
}
.domicilio__rejilla {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .domicilio__rejilla { grid-template-columns: 1fr 1fr; }
}
.domicilio h2 { color: #fff; }
.domicilio .antetitulo { color: var(--verde-300); }
.domicilio p { color: #D3E7E4; }
.domicilio .lista-marcada li::before {
  background-color: rgba(255, 255, 255, .16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23BFE8E0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
.domicilio__figura {
  border-radius: var(--radio-l);
  overflow: hidden;
  box-shadow: var(--sombra-l);
  aspect-ratio: 4 / 3;
}
.domicilio__figura img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------------
   12. Rejilla de especialidades
   --------------------------------------------------------------------------- */
.rejilla-especialidades {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.rejilla-especialidades li { margin: 0; }

.tarjeta-especialidad {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tarjeta-especialidad:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: var(--verde-300);
}
.tarjeta-especialidad__imagen {
  aspect-ratio: 16 / 10;
  background: var(--arena);
  overflow: hidden;
}
.tarjeta-especialidad__imagen img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.tarjeta-especialidad:hover .tarjeta-especialidad__imagen img { transform: scale(1.045); }
.tarjeta-especialidad__cuerpo {
  padding: 1.25rem 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.tarjeta-especialidad h3 {
  font-size: 1.18rem;
  margin-bottom: .4rem;
}
.tarjeta-especialidad h3 a {
  color: var(--azul-900);
  text-decoration: none;
}
/* El enlace del titulo cubre toda la tarjeta: mas superficie de click */
.tarjeta-especialidad h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.tarjeta-especialidad:hover h3 a { color: var(--verde-700); }
.tarjeta-especialidad p {
  font-size: .95rem;
  color: var(--texto-suave);
  margin-bottom: 1rem;
}
.tarjeta-especialidad .enlace-flecha {
  margin-top: auto;
  font-size: .93rem;
}

.tarjeta-especialidad--destacada {
  border-color: var(--verde-300);
  background: var(--verde-050);
}
.tarjeta-especialidad__etiqueta {
  position: absolute;
  top: .85rem; left: .85rem;
  z-index: 2;
  background: var(--verde-600);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 999px;
}

/* ---------------------------------------------------------------------------
   13. Por que elegirnos
   --------------------------------------------------------------------------- */
.rejilla-motivos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.motivo {
  margin: 0;
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1.6rem 1.5rem;
  height: 100%;
}
.motivo__icono {
  width: 3rem; height: 3rem;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--verde-050);
  color: var(--verde-600);
  margin-bottom: 1rem;
}
.motivo__icono svg { width: 1.5rem; height: 1.5rem; }
.motivo h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.motivo p { font-size: .95rem; color: var(--texto-suave); margin: 0; }

/* ---------------------------------------------------------------------------
   14. Equipo
   --------------------------------------------------------------------------- */
.rejilla-equipo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.rejilla-equipo li { margin: 0; }

.profesional {
  height: 100%;
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  overflow: hidden;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.profesional:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.profesional__foto {
  aspect-ratio: 3 / 4;
  background: var(--arena);
  overflow: hidden;
}
.profesional__foto img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.profesional__cuerpo { padding: 1.15rem 1rem 1.4rem; }
.profesional h3 {
  font-size: 1.06rem;
  margin-bottom: .2rem;
}
.profesional h3 a { color: var(--azul-900); text-decoration: none; }
.profesional h3 a:hover { color: var(--verde-700); text-decoration: underline; }
.profesional__rol {
  font-size: .88rem;
  font-weight: 600;
  color: var(--verde-600);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Ficha del profesional dentro de una pagina de especialidad */
.ficha-profesional {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  background: var(--verde-050);
  border: 1px solid var(--verde-100);
  border-radius: var(--radio-l);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
@media (min-width: 700px) {
  .ficha-profesional { grid-template-columns: 220px 1fr; }
}
.ficha-profesional__foto {
  border-radius: var(--radio);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--arena);
  box-shadow: var(--sombra);
}
.ficha-profesional__foto img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ficha-profesional h3 { margin-bottom: .25rem; }
.ficha-profesional__rol {
  color: var(--verde-700);
  font-weight: 650;
  margin-bottom: .9rem;
}
/* ---------------------------------------------------------------------------
   15. Aseguradoras
   --------------------------------------------------------------------------- */
.rejilla-aseguradoras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.rejilla-aseguradoras li { margin: 0; }
.aseguradora {
  height: 100%;
  min-height: 136px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1.15rem;
}
.aseguradora img {
  /* El limite manda por altura, pero tambien por ancho: sin el segundo tope,
     un logotipo muy apaisado se comeria toda la tarjeta. */
  max-height: 78px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .78;
  transition: filter .22s ease, opacity .22s ease;
}
.aseguradora:hover img { filter: grayscale(0); opacity: 1; }

/* Compañía cuyo logotipo oficial todavía no tenemos: se muestra el nombre.
   Se ve deliberado, no roto. Al recibir el logo basta con sustituir el
   <span> por un <img> y quitar la clase. */
.aseguradora--texto { text-align: center; }
.aseguradora__nombre {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--azul-800);
  letter-spacing: .01em;
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   16. Resenas de Google
   --------------------------------------------------------------------------- */
.resenas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.resena {
  margin: 0;
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.resena--hueco {
  border-style: dashed;
  border-color: var(--aviso-borde);
  background: var(--aviso-fondo);
  color: var(--aviso-texto);
  align-items: flex-start;
  justify-content: center;
}
.resena--hueco p { color: inherit; font-size: .95rem; }
.resena__estrellas { color: #E8A33D; letter-spacing: .1em; font-size: 1.05rem; }
.resena__texto { font-size: .98rem; color: var(--texto-medio); margin: 0; }
.resena__autor { font-size: .9rem; font-weight: 600; color: var(--azul-900); margin: 0; }

.caja-google {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.caja-google p { margin: 0; }

/* ---------------------------------------------------------------------------
   17. Contacto y formulario
   --------------------------------------------------------------------------- */
.contacto__rejilla {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) {
  .contacto__rejilla { grid-template-columns: 1fr 1fr; }
}

.datos-contacto {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  max-width: none;
  display: grid;
  gap: 1.15rem;
}
.datos-contacto li {
  margin: 0;
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}
.datos-contacto svg {
  flex: none;
  width: 1.35rem; height: 1.35rem;
  color: var(--verde-600);
  margin-top: .2rem;
}
.datos-contacto strong { display: block; color: var(--azul-900); font-size: .96rem; }
.datos-contacto a { color: var(--azul-700); font-weight: 600; text-decoration: none; }
.datos-contacto a:hover { text-decoration: underline; }
.datos-contacto span, .datos-contacto p { color: var(--texto-medio); font-size: .97rem; margin: 0; }

.mapa {
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--borde-suave);
  background: var(--arena);
  aspect-ratio: 16 / 10;
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Mapa con consentimiento: no se carga hasta que el usuario lo pide, para que
   Google no instale cookies sin permiso. Ver bloque_mapa() en el generador. */
.mapa--consentimiento {
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(251, 248, 244, .92), rgba(251, 248, 244, .92)),
    repeating-linear-gradient(45deg, var(--arena) 0 12px, var(--crema) 12px 24px);
  padding: 1.5rem;
  text-align: center;
}
.mapa__aviso { max-width: 40ch; }
.mapa__aviso svg {
  width: 2.25rem; height: 2.25rem;
  color: var(--verde-600);
  margin: 0 auto .75rem;
}
.mapa__aviso p { margin: 0 auto .6rem; }
.mapa__nota { font-size: .87rem; color: var(--texto-suave); }
.mapa__aviso .grupo-botones { justify-content: center; margin-top: 1.1rem; }
.mapa__aviso .grupo-botones .boton {
  min-width: 0;
  padding: .6rem 1.1rem;
  min-height: 42px;
  font-size: .92rem;
}

.formulario {
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-l);
  padding: clamp(1.35rem, 1rem + 1.5vw, 2.15rem);
  box-shadow: var(--sombra-s);
}
.campo { margin-bottom: 1.15rem; }
.campo label {
  display: block;
  font-size: .93rem;
  font-weight: 600;
  color: var(--azul-900);
  margin-bottom: .4rem;
}
.campo .obligatorio { color: #A8341F; }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .8rem .95rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  background: var(--crema);
  font-size: 1rem;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  background: #fff;
  border-color: var(--azul-500);
  box-shadow: 0 0 0 3px var(--azul-100);
  outline: none;
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo__ayuda { display: block; font-size: .84rem; color: var(--texto-suave); margin-top: .35rem; }

.campo-casilla {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin-bottom: 1.35rem;
}
.campo-casilla input {
  flex: none;
  width: 1.15rem; height: 1.15rem;
  margin-top: .25rem;
  accent-color: var(--verde-600);
}
.campo-casilla label { font-size: .9rem; font-weight: 450; color: var(--texto-medio); margin: 0; }

/* Trampa antispam: invisible para personas, tentadora para robots */
.trampa {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.mensaje-formulario {
  border-radius: var(--radio-s);
  padding: .9rem 1.1rem;
  font-size: .94rem;
  margin-bottom: 1.15rem;
}
.mensaje-formulario--error {
  background: #FDECE8;
  border: 1px solid #F0BDB0;
  color: #8C2C16;
}
.mensaje-formulario--ok {
  background: var(--verde-050);
  border: 1px solid var(--verde-300);
  color: var(--verde-700);
}
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   18. Paginas de especialidad
   --------------------------------------------------------------------------- */
.portada-especialidad {
  background: var(--crema);
  border-bottom: 1px solid var(--borde-suave);
}
.portada-especialidad__rejilla {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 1rem + 3vw, 3.25rem) 0 clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
}
@media (min-width: 920px) {
  .portada-especialidad__rejilla { grid-template-columns: 1.1fr .9fr; }
}
.portada-especialidad__figura {
  border-radius: var(--radio-l);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--sombra-l);
  background: var(--arena);
}
.portada-especialidad__figura img { width: 100%; height: 100%; object-fit: cover; }

.bloque-texto { max-width: var(--ancho-texto); }

/* Actos / procedimientos */
.rejilla-actos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.acto {
  margin: 0;
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-left: 3px solid var(--verde-500);
  border-radius: var(--radio-s);
  padding: 1.3rem 1.4rem;
  height: 100%;
}
.acto h3 { font-size: 1.06rem; margin-bottom: .5rem; }
.acto p { font-size: .94rem; margin-bottom: .6rem; color: var(--texto-medio); }
.acto p:last-child { margin-bottom: 0; }
.acto__para-que {
  font-size: .9rem;
  color: var(--texto-suave);
  border-top: 1px solid var(--borde-suave);
  padding-top: .6rem;
}
.acto__para-que strong { color: var(--verde-700); }

/* Caja de sintomas / cuando acudir */
.caja-sintomas {
  background: var(--azul-050);
  border: 1px solid var(--azul-100);
  border-radius: var(--radio);
  padding: clamp(1.35rem, 1rem + 1.5vw, 2rem);
}
.caja-sintomas h3 { margin-bottom: .8rem; }
.caja-sintomas ul { margin-bottom: 0; }

/* CTA final de pagina */
.cta-final {
  background: linear-gradient(150deg, var(--verde-700) 0%, var(--azul-800) 100%);
  color: #E6F2F0;
  border-radius: var(--radio-l);
  padding: clamp(1.85rem, 1.25rem + 2.5vw, 3rem);
  text-align: center;
}
.cta-final h2 { color: #fff; }
.cta-final p { color: #CFE5E2; margin-inline: auto; }
.cta-final .grupo-botones { justify-content: center; }

/* Especialidades relacionadas */
.relacionadas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.relacionadas li { margin: 0; }
.relacionadas a {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 100%;
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 1rem 1.15rem;
  text-decoration: none;
  color: var(--azul-900);
  font-weight: 600;
  font-size: .97rem;
  transition: border-color .18s ease, transform .18s ease;
}
.relacionadas a:hover {
  border-color: var(--verde-300);
  transform: translateY(-2px);
  color: var(--verde-700);
}
.relacionadas a::after { content: "→"; margin-left: auto; color: var(--verde-600); }

/* ---------------------------------------------------------------------------
   19. Preguntas frecuentes
   --------------------------------------------------------------------------- */
.faq {
  max-width: 78ch;
  border-top: 1px solid var(--borde);
}
.faq details {
  border-bottom: 1px solid var(--borde);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem .25rem;
  cursor: pointer;
  font-family: var(--fuente-titulos);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--azul-900);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 1.4rem; height: 1.4rem;
  margin-top: .2rem;
  border-radius: 50%;
  background: var(--verde-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23006A5E' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / .95rem no-repeat;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { color: var(--verde-700); }
.faq__respuesta { padding: 0 .25rem 1.35rem; }
.faq__respuesta p { color: var(--texto-medio); font-size: 1rem; }

/* ---------------------------------------------------------------------------
   20. Pie de pagina
   --------------------------------------------------------------------------- */
.pie {
  background: var(--azul-900);
  color: #B9CCD3;
  font-size: .95rem;
  padding-top: clamp(2.75rem, 2rem + 3vw, 4rem);
}
.pie__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 2.25rem;
  padding-bottom: 2.5rem;
}
.pie__marca img { height: 44px; width: auto; margin-bottom: 1rem; }
.pie h2, .pie h3 {
  color: #fff;
  font-family: var(--fuente-texto);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.pie p { color: #A8BEC7; }
.pie ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.pie li { margin-bottom: .55rem; }
.pie a { color: #D6E4E9; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie address { font-style: normal; color: #A8BEC7; line-height: 1.85; }
/* El telefono y el correo del pie son enlaces que se pulsan con el dedo:
   les damos altura suficiente (minimo 24px, WCAG 2.5.8). */
.pie address a {
  display: inline-block;
  padding: 3px 0;
  font-weight: 600;
}
.pie__redes {
  display: flex;
  gap: .6rem;
  margin-top: 1.25rem;
}
.pie__redes a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  color: #fff;
  transition: background-color .18s ease, border-color .18s ease;
}
.pie__redes a:hover { background: var(--verde-600); border-color: var(--verde-600); }
.pie__redes svg { width: 1.15rem; height: 1.15rem; }

.pie__legal {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 1.35rem 0 calc(1.35rem + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: .87rem;
  color: #8FA8B2;
}
.pie__legal ul { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; }
.pie__legal li { margin: 0; }

@media (max-width: 1023px) {
  .pie { padding-bottom: 74px; } /* hueco para la barra de contacto movil */
}

/* ---------------------------------------------------------------------------
   21. Barra de contacto movil
   Siempre visible en pantallas pequenas: llamar y WhatsApp a un toque.
   --------------------------------------------------------------------------- */
.barra-movil {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--borde);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 18px rgba(8, 47, 62, .1);
}
.barra-movil a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem .5rem;
  background: #fff;
  color: var(--azul-800);
  font-weight: 650;
  font-size: .95rem;
  text-decoration: none;
}
.barra-movil a svg { width: 1.15rem; height: 1.15rem; flex: none; }
.barra-movil a.es-cita { background: var(--verde-600); color: #fff; }
.barra-movil a.es-telefono { background: var(--azul-700); color: #fff; }
.barra-movil a.es-whatsapp { background: var(--verde-800); color: #fff; }
/* En pantallas muy estrechas el texto se aprieta: reducimos antes de que
   llegue a partirse en dos líneas. */
@media (max-width: 380px) {
  .barra-movil a { font-size: .86rem; gap: .35rem; padding-inline: .25rem; }
  .barra-movil a svg { width: 1rem; height: 1rem; }
}
@media (min-width: 1024px) { .barra-movil { display: none; } }

/* ---------------------------------------------------------------------------
   22. Animaciones al hacer scroll
   El estado oculto SOLO se aplica si el JS ha marcado <html class="js">.
   Sin JavaScript, o si algo falla, todo el contenido se ve con normalidad.
   --------------------------------------------------------------------------- */
html.js .revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .68, .32, 1);
  will-change: opacity, transform;
}
html.js .revelar.visible {
  opacity: 1;
  transform: none;
}
/* Escalonado suave dentro de una misma rejilla */
html.js .revelar[data-retardo="1"] { transition-delay: .07s; }
html.js .revelar[data-retardo="2"] { transition-delay: .14s; }
html.js .revelar[data-retardo="3"] { transition-delay: .21s; }
html.js .revelar[data-retardo="4"] { transition-delay: .28s; }
html.js .revelar[data-retardo="5"] { transition-delay: .35s; }

/* Solo se desactivan las animaciones grandes de entrada.
   Las micro-interacciones (hover de botones y tarjetas) se mantienen:
   son informacion de interfaz, no decoracion. */
@media (prefers-reduced-motion: reduce) {
  html.js .revelar {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   23. Impresion
   --------------------------------------------------------------------------- */
@media print {
  .cabecera, .barra-superior, .barra-movil, .menu-movil, #splash,
  .mapa, .formulario, .pie__redes { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  .seccion { padding: 1rem 0; }
  html.js .revelar { opacity: 1 !important; transform: none !important; }
}