/* ==========================================================================
   CENTRE MÈDIC NAVARCLES — Hoja de estilos principal
   --------------------------------------------------------------------------
   Basada en el sistema de diseño "Industry" (Claude Design), adaptado al
   contenido real del centro y a la paleta corporativa obligatoria.

   Qué se ha tomado del sistema de diseño:
     · Tipografía Barlow Condensed (titulares) sobre Barlow (texto).
     · Rejilla modular: celdas de igual ancho y ritmo vertical marcado.
     · Esquinas poco redondeadas (4 px), sombras suaves entintadas.
     · Fondo gris técnico con tarjetas blancas encima.
     · Bandas a sangre en azul profundo para separar bloques importantes.
     · Estados de interacción propios (nunca los del navegador).

   Qué se ha cambiado respecto al sistema original, y por qué:
     · El azul de Industry (#5980A6) se sustituye por el azul corporativo
       obligatorio #1B4F8C, que en la escala del sistema ocupa el paso 700.
     · Las tipografías se sirven desde este mismo servidor, no desde Google
       Fonts: así no hay peticiones a terceros (RGPD) y cargan antes.
     · Se han descartado los marcos tipo "plano técnico" (esquinas con marcas
       de registro): la propia maqueta de la landing ya los sustituye por
       tarjetas blancas con sombra, más adecuadas para un centro médico.

   Organización del archivo:
     1.  Tipografías auto-alojadas
     2.  Variables (paleta, tipografía, espaciados)
     3.  Reset y bases
     4.  Utilidades y layout
     5.  Componentes: botones, tarjetas, etiquetas
     6.  Barra superior, header y navegación
     7.  Hero y accesos rápidos
     8.  Secciones de contenido
     9.  Formularios
     10. Footer
     11. Barra flotante móvil (CTA fija)
     12. Animaciones y accesibilidad
     13. Puntos de ruptura
   --------------------------------------------------------------------------
   PALETA OBLIGATORIA (no añadir colores fuera de esta lista):
     Negro   #0A0A0A · Azul #1B4F8C · Gris #6B7280 / #F3F4F6 · Blanco #FFFFFF
   ========================================================================== */

/* ==========================================================================
   1. TIPOGRAFÍAS AUTO-ALOJADAS
   --------------------------------------------------------------------------
   Barlow y Barlow Condensed (licencia SIL Open Font License, se pueden
   alojar libremente). Los archivos están en assets/fuentes/.
   font-display:swap hace que el texto se vea desde el primer momento con la
   fuente del sistema y cambie a Barlow al terminar de cargar.
   ========================================================================== */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fuentes/barlow-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fuentes/barlow-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fuentes/barlow-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fuentes/barlow-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fuentes/barlow-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fuentes/barlow-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fuentes/barlow-condensed-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fuentes/barlow-condensed-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fuentes/barlow-condensed-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fuentes/barlow-condensed-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ==========================================================================
   2. VARIABLES
   ========================================================================== */
:root {
  /* --- Paleta corporativa obligatoria --- */
  --negro: #0a0a0a;
  --azul: #1b4f8c;
  --gris: #6b7280;
  --gris-fondo: #f3f4f6;
  --blanco: #ffffff;

  /* --- Escala tonal del azul corporativo ---
     Generada en OKLCH sobre la misma escala de luminosidad perceptual que
     usa el sistema Industry. NO son colores nuevos: son aclarados y
     oscurecidos del mismo #1B4F8C, que ocupa exactamente el paso 700.
     Se usan solo cuatro: el tinte claro, la marca, el campo profundo y el
     estado pulsado. */
  --azul-100: #e8f0f8; /* tintes: iconos, fondos de cita, chips */
  --azul-200: #cfe0f0; /* bordes suaves sobre tinte */
  --azul-700: #1b4f8c; /* ← el azul corporativo: botones, enlaces, acentos */
  --azul-800: #16406f; /* hover de botones */
  --azul-900: #102d4e; /* bandas a sangre (hero, odontología) */

  /* Grises derivados del negro corporativo (mismo color, con transparencia) */
  --linea: rgba(10, 10, 10, 0.12);
  --linea-suave: rgba(10, 10, 10, 0.07);

  /* Gris ligeramente más oscuro, SOLO para texto secundario sobre el fondo
     gris de página. Motivo: #6B7280 sobre #F3F4F6 da 4.39:1 y la norma de
     accesibilidad WCAG AA exige 4.5:1. Es el mismo tono, un punto más
     oscuro (4.73:1). Para volver al #6B7280 exacto, cambiar esta línea. */
  --gris-sobre-gris: #666d7a;

  /* --- Elevación: sombras entintadas, calibradas para el fondo gris --- */
  --sombra-sm: 0 1px 2px rgba(10, 10, 10, 0.13);
  --sombra-md: 0 3px 10px rgba(10, 10, 10, 0.13);
  --sombra-lg: 0 12px 32px rgba(10, 10, 10, 0.18);

  /* --- Tipografía --- */
  --fuente-titular: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --fuente-texto: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;

  /* Escala tipográfica fluida */
  --t-xs: 0.75rem; /* 12px — antetítulos, pies */
  --t-sm: 0.875rem; /* 14px — navegación, etiquetas */
  --t-base: 0.9375rem; /* 15px — texto secundario */
  --t-md: 1rem; /* 16px — texto principal */
  --t-lg: 1.0625rem; /* 17px — entradillas */
  --h3: clamp(1.3rem, 0.6vw + 1.15rem, 1.45rem);
  --h2: clamp(1.75rem, 2.2vw + 1.1rem, 2.375rem);
  --h1: clamp(2.375rem, 4.6vw, 3.75rem);

  /* --- Espaciado y formas (densidad 0.85× del sistema Industry) --- */
  --ancho-max: 1240px;
  --ancho-texto: 66ch;
  --radio-sm: 2px;
  --radio: 4px;
  --radio-lg: 7px;
  --seccion-y: clamp(3rem, 6vw, 4.5rem);
  --borde-pagina: clamp(20px, 4vw, 56px);
  --header-h: 68px;
}

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

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

body {
  margin: 0;
  /* Fondo gris técnico con las tarjetas blancas encima: es la base del
     sistema de diseño. Coincide con el gris obligatorio de la paleta. */
  background: var(--gris-fondo);
  color: var(--negro);
  font-family: var(--fuente-texto);
  font-size: var(--t-md);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.4em;
  font-family: var(--fuente-titular);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--azul-900);
  text-wrap: balance;
}

h1 {
  font-size: var(--h1);
  line-height: 1.06;
}
h2 {
  font-size: var(--h2);
}
h3 {
  font-size: var(--h3);
}
h4 {
  font-size: 1.125rem;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--azul-700);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--azul-800);
}

img,
svg,
iframe {
  max-width: 100%;
  display: block;
}

img {
  height: auto;
}

ul,
ol {
  padding-left: 1.15rem;
}

strong {
  font-weight: 600;
}

[hidden] {
  display: none !important;
}

/* Estados de interacción propios, nunca los del navegador */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--azul-700);
  outline-offset: 2px;
}

::selection {
  background: var(--azul-200);
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -150%);
  z-index: 1000;
  background: var(--azul-700);
  color: var(--blanco);
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--radio) var(--radio);
  font-family: var(--fuente-titular);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translate(-50%, 0);
  color: var(--blanco);
}

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

.contenedor--estrecho {
  max-width: 860px;
}

.seccion {
  padding-block: var(--seccion-y);
}

/* Banda blanca sobre el fondo gris: marca el ritmo entre secciones.
   (Antes se llamaba .seccion--gris; se mantiene el alias por compatibilidad
   si quedara alguna página sin actualizar.) */
.seccion--clara,
.seccion--gris {
  background: var(--blanco);
}

/* Banda a sangre en azul profundo, para los bloques con más peso */
.seccion--campo {
  background: var(--azul-900);
  color: rgba(255, 255, 255, 0.82);
}

.seccion--campo h2,
.seccion--campo h3,
.seccion--campo h4 {
  color: var(--blanco);
}

.seccion--campo a:not(.boton) {
  color: var(--blanco);
}

/* Alias antiguo: la banda negra pasa a ser el campo azul del sistema */
.seccion--negro {
  background: var(--azul-900);
  color: rgba(255, 255, 255, 0.82);
}

.seccion--negro h2,
.seccion--negro h3 {
  color: var(--blanco);
}

.seccion__cabecera {
  max-width: 62ch;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.seccion__cabecera--centrada {
  margin-inline: auto;
  text-align: center;
}

/* Antetítulo: 12px en versales muy espaciadas, marca del sistema */
.antetitulo {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azul-700);
}

.seccion--campo .antetitulo,
.seccion--negro .antetitulo {
  color: var(--azul-200);
}

.entradilla {
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--gris-sobre-gris);
  margin-bottom: 0;
}

.seccion--clara .entradilla,
.seccion--gris .entradilla {
  color: var(--gris);
}

.seccion--campo .entradilla,
.seccion--negro .entradilla {
  color: rgba(255, 255, 255, 0.8);
}

.texto-secundario {
  color: var(--gris-sobre-gris);
}

.seccion--clara .texto-secundario,
.seccion--gris .texto-secundario {
  color: var(--gris);
}

.centrado {
  text-align: center;
}

/* Rejilla modular: celdas de igual ancho, el ritmo visible del sistema */
.rejilla {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.rejilla--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

.rejilla--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.rejilla--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

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

/* ==========================================================================
   5. COMPONENTES
   ========================================================================== */

/* --- Botones ---------------------------------------------------------
   Titular condensado, esquinas de 4 px. El primario es el único objeto
   con relleno sólido: es la acción principal de cada pantalla. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-family: var(--fuente-titular);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease,
    border-color 0.16s ease;
  min-height: 46px;
}

.boton svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  stroke-width: 1.5;
}

.boton--primario {
  background: var(--azul-700);
  color: var(--blanco);
  border-color: var(--azul-700);
}

.boton--primario:hover {
  background: var(--azul-800);
  border-color: var(--azul-800);
  color: var(--blanco);
}

.boton--primario:active {
  background: var(--azul-900);
  border-color: var(--azul-900);
}

.boton--secundario {
  background: transparent;
  color: var(--azul-900);
  border-color: var(--linea);
}

.boton--secundario:hover {
  background: rgba(10, 10, 10, 0.05);
  color: var(--azul-900);
  border-color: var(--linea);
}

.boton--secundario:active {
  background: rgba(10, 10, 10, 0.1);
}

/* Sobre banda azul profunda: el primario se invierte a papel */
.seccion--campo .boton--primario,
.seccion--negro .boton--primario,
.hero .boton--primario,
.cta-final .boton--primario {
  background: var(--blanco);
  color: var(--azul-900);
  border-color: var(--blanco);
}

.seccion--campo .boton--primario:hover,
.seccion--negro .boton--primario:hover,
.hero .boton--primario:hover,
.cta-final .boton--primario:hover {
  background: var(--azul-100);
  border-color: var(--azul-100);
  color: var(--azul-900);
}

.boton--fantasma {
  background: transparent;
  color: var(--blanco);
  border-color: rgba(255, 255, 255, 0.55);
}

.boton--fantasma:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--blanco);
  border-color: var(--blanco);
}

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

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

/* --- Etiquetas -------------------------------------------------------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radio-sm);
  background: var(--azul-100);
  color: var(--azul-800);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.etiqueta svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.5;
}

.etiqueta--destacada {
  background: var(--azul-700);
  color: var(--blanco);
}

/* --- Tarjetas ---------------------------------------------------------
   Superficie blanca sobre el fondo gris, 4 px de radio y sombra suave.
   Es la variante que la propia maqueta de la landing usa en lugar de los
   marcos de plano técnico del sistema base. */
.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 28px;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  height: 100%;
}

.tarjeta:hover {
  box-shadow: var(--sombra-md);
  transform: translateY(-2px);
}

.tarjeta h3 {
  font-size: var(--h3);
  margin-bottom: 0.35rem;
}

.tarjeta p {
  color: var(--gris);
  font-size: var(--t-base);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Filete superior de acento: marca de las tarjetas de servicio */
.tarjeta--servicio {
  border-top: 3px solid var(--azul-700);
}

.tarjeta__icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: var(--radio);
  background: var(--azul-100);
  color: var(--azul-700);
  flex-shrink: 0;
}

.tarjeta__icono svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
}

.tarjeta__enlace {
  margin-top: auto;
  font-family: var(--fuente-titular);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.tarjeta__enlace svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.5;
  transition: transform 0.2s ease;
}

.tarjeta__enlace:hover svg {
  transform: translateX(3px);
}

.tarjeta--clicable .tarjeta__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Tarjeta del servicio prioritario (odontología) */
.tarjeta--destacada {
  border-top: 3px solid var(--azul-700);
  box-shadow: var(--sombra-md);
}

.tarjeta__distintivo {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 3px 9px;
  border-radius: var(--radio-sm);
  background: var(--azul-700);
  color: var(--blanco);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Pie de tarjeta en versales: ubicación, alcance, etc. */
.tarjeta__pie {
  margin: 14px 0 0;
  font-size: var(--t-xs);
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-700);
}

/* --- Lista de comprobación -------------------------------------------- */
.lista-check {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--t-md);
  line-height: 1.6;
}

.lista-check svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--azul-700);
}

.seccion--campo .lista-check svg,
.seccion--negro .lista-check svg {
  color: var(--azul-200);
}

/* --- Figuras e imágenes provisionales ---------------------------------
   Mientras no haya fotos reales, los huecos se dibujan con una trama
   diagonal y se etiquetan como provisionales. Al recibir las fotos, basta
   con sustituir el bloque por un <img> normal. */
.figura {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: var(--sombra-sm);
  margin: 0;
}

.figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trama {
  background: repeating-linear-gradient(
    135deg,
    var(--gris-fondo) 0 9px,
    #e7e8ec 9px 18px
  );
}

.trama--azul {
  background: repeating-linear-gradient(
    135deg,
    var(--azul-800) 0 10px,
    var(--azul-900) 10px 20px
  );
}

.trama--tinte {
  background: repeating-linear-gradient(
    135deg,
    var(--azul-200) 0 9px,
    var(--azul-100) 9px 18px
  );
}

/* Trama para las figuras que van DENTRO de una banda azul profunda:
   un punto más clara que el fondo, para que se lea como un hueco de
   fotografía y no como un panel pegado encima. */
.trama--campo {
  background: repeating-linear-gradient(
    135deg,
    var(--azul-700) 0 10px,
    var(--azul-800) 10px 20px
  );
}

.seccion--campo .figura,
.seccion--negro .figura {
  box-shadow: none;
}

/* Etiqueta monoespaciada de "imagen provisional".
   ELIMINAR del HTML cuando se suban las fotos definitivas. */
.pendiente {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blanco);
  background: rgba(10, 10, 10, 0.72);
}

/* ==========================================================================
   6. BARRA SUPERIOR, HEADER Y NAVEGACIÓN
   ========================================================================== */

/* --- Barra de servicio: teléfono, enlaces rápidos e idioma ------------- */
.barra-servicio {
  background: var(--negro);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  line-height: 22px;
}

.barra-servicio__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding-block: 9px;
}

.barra-servicio a {
  color: inherit;
  text-decoration: none;
}

.barra-servicio a:hover {
  color: var(--blanco);
  text-decoration: underline;
}

.barra-servicio__telefono {
  color: var(--blanco);
  font-weight: 500;
}

.barra-servicio__derecha {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Selector de idioma: dos enlaces separados por una barra, como la maqueta */
.idiomas {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.idiomas button {
  padding: 2px 2px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  color: inherit;
  cursor: pointer;
  transition: color 0.16s ease;
}

.idiomas button:hover {
  color: var(--blanco);
  text-decoration: underline;
}

.idiomas button[aria-pressed="true"] {
  color: var(--blanco);
  font-weight: 600;
}

.idiomas__separador {
  opacity: 0.45;
}

/* --- Cabecera --------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--blanco);
  box-shadow: var(--sombra-sm);
}

.header__interior {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: var(--header-h);
  padding-block: 12px;
}

/* --- Logotipo: marca denominativa condensada -------------------------- */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

/* Monograma oficial del centro. Alto fijo para que la cabecera no baile
   mientras carga la imagen. */
.logo__marca {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.logo__texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.logo__nombre {
  font-family: var(--fuente-titular);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--azul-900);
  white-space: nowrap;
}

.logo__lema {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}

/* --- Navegación principal --------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav a {
  color: var(--negro);
  font-size: var(--t-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.16s ease;
}

.nav a:hover {
  color: var(--azul-700);
}

.nav a[aria-current="page"] {
  color: var(--azul-700);
  font-weight: 500;
}

.header__acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header__acciones .boton {
  padding: 11px 18px;
  font-size: 0.9375rem;
  min-height: 42px;
}

/* --- Botón hamburguesa (solo móvil) ----------------------------------- */
.menu-boton {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--negro);
  cursor: pointer;
}

.menu-boton svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
}

.menu-boton .icono-cerrar {
  display: none;
}

.menu-boton[aria-expanded="true"] .icono-abrir {
  display: none;
}

.menu-boton[aria-expanded="true"] .icono-cerrar {
  display: block;
}

/* ==========================================================================
   7. HERO Y ACCESOS RÁPIDOS
   ========================================================================== */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 480px;
  /* La trama diagonal sigue aquí como color de fondo: se ve mientras carga
     la foto y en las páginas que aún no tienen imagen propia. */
  background: repeating-linear-gradient(
    135deg,
    var(--azul-800) 0 10px,
    var(--azul-900) 10px 20px
  );
}

/* Fotografía real del centro, a sangre detrás del panel de texto.
   El panel (.hero__panel) es opaco al 86 %, así que el contraste del texto
   no depende de la foto. */
.hero__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__interior {
  position: relative; /* por encima de .hero__fondo */
  width: 100%;
  padding-block: 72px;
}

/* Panel translúcido: da contraste al texto sobre la imagen de fondo */
.hero__panel {
  max-width: 640px;
  padding: 40px 44px;
  border-radius: var(--radio);
  background: rgba(16, 45, 78, 0.86);
  color: var(--blanco);
}

/* Variante con el panel alineado a la derecha (se usa en la portada, para
   dejar a la vista la entrada y el rótulo del centro, que en la fotografía
   quedan a la izquierda). */
.hero__panel--derecha {
  margin-left: auto;
}

.hero h1 {
  color: var(--blanco);
  margin: 0;
}

.hero__lema {
  font-size: var(--t-lg);
  line-height: 1.6;
  margin: 20px 0 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.85);
}

.hero .grupo-botones {
  margin-top: 28px;
}

.hero .antetitulo {
  color: var(--azul-200);
  margin-bottom: 16px;
}

/* Etiqueta de imagen provisional, arriba a la izquierda de la banda */
.hero__nota {
  position: absolute;
  left: var(--borde-pagina);
  top: 16px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: var(--t-base);
  color: rgba(255, 255, 255, 0.82);
}

.hero__meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero__meta-item svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.5;
  color: var(--azul-200);
  flex-shrink: 0;
}

.hero__meta-item strong {
  color: var(--blanco);
  font-weight: 600;
}

.estrellas {
  display: inline-flex;
  gap: 2px;
  color: var(--azul-200);
}

.estrellas svg {
  width: 15px;
  height: 15px;
}

/* --- Accesos rápidos: tres tarjetas montadas sobre el hero ------------- */
.accesos {
  position: relative;
  z-index: 1;
  margin-top: -44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.acceso {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 26px 28px;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-md);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.acceso:hover {
  box-shadow: var(--sombra-lg);
  transform: translateY(-2px);
  color: inherit;
}

.acceso__marca {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radio);
  background: var(--azul-100);
  color: var(--azul-700);
}

.acceso__marca svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.5;
}

.acceso__titulo {
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: var(--h3);
  line-height: 1.2;
  color: var(--azul-900);
}

.acceso__texto {
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--gris);
}

/* ==========================================================================
   8. SECCIONES DE CONTENIDO
   ========================================================================== */

/* --- Franja de confianza ---------------------------------------------- */
.franja {
  padding-block: 14px;
  background: var(--blanco);
  border-block: 1px solid var(--linea-suave);
}

.franja__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px clamp(20px, 4vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-base);
  color: var(--gris);
}

.franja__lista li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.franja__lista svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.5;
  color: var(--azul-700);
  flex-shrink: 0;
}

/* --- Bloque a dos columnas -------------------------------------------- */
.dos-columnas {
  display: grid;
  gap: 32px clamp(24px, 5vw, 80px);
  align-items: center;
  grid-template-columns: 1fr;
}

.dos-columnas--invertido .dos-columnas__media {
  order: -1;
}

/* --- Cita destacada ---------------------------------------------------
   Cuando solo hay una reseña verificada, se muestra en grande sobre un
   campo de tinte azul. Con dos o más, se dibuja la rejilla de tarjetas. */
.cita {
  margin: 0;
  padding: 40px 44px;
  background: var(--azul-100);
  border-radius: var(--radio);
}

.cita blockquote {
  margin: 0;
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.28;
  letter-spacing: -0.005em;
  max-width: 40ch;
  color: var(--azul-900);
}

.cita figcaption {
  margin: 20px 0 0;
  font-size: var(--t-base);
  color: var(--azul-800);
}

.cita__nota {
  margin: 16px 0 0;
  max-width: 66ch;
  font-size: 13px;
  line-height: 22px;
  color: var(--gris-sobre-gris);
}

/* --- Testimonios en rejilla ------------------------------------------- */
.testimonio {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 28px;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
}

.testimonio blockquote {
  margin: 14px 0 20px;
  font-size: var(--t-base);
  line-height: 1.65;
}

.testimonio .estrellas {
  color: var(--azul-700);
}

.testimonio__autor {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--t-base);
}

.testimonio__inicial {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radio);
  background: var(--azul-100);
  color: var(--azul-700);
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: 18px;
  flex-shrink: 0;
}

.testimonio__nombre {
  font-weight: 500;
}

.testimonio__fuente {
  display: block;
  font-size: var(--t-xs);
  color: var(--gris);
}

/* Resumen de valoraciones */
.valoracion-global {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-bottom: 32px;
  padding: 20px 24px;
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: var(--sombra-sm);
}

.valoracion-global__nota {
  font-family: var(--fuente-titular);
  font-size: 2rem;
  font-weight: 600;
  color: var(--azul-700);
  line-height: 1;
}

/* --- Equipo ----------------------------------------------------------- */
.profesional {
  overflow: hidden;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.profesional:hover {
  box-shadow: var(--sombra-md);
  transform: translateY(-2px);
}

.profesional__foto {
  position: relative;
  aspect-ratio: 4 / 5;
}

.profesional__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profesional__cuerpo {
  padding: 18px 22px;
}

.profesional__cuerpo h3 {
  font-size: 1.3rem;
  margin-bottom: 0.2rem;
}

.profesional__especialidad {
  display: block;
  margin-bottom: 8px;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-700);
}

.profesional__bio {
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--gris);
  margin: 0;
}

/* --- Accesibilidad ---------------------------------------------------- */
.accesibilidad-item {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  height: 100%;
}

.accesibilidad-item__icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radio);
  background: var(--azul-100);
  color: var(--azul-700);
  flex-shrink: 0;
}

.accesibilidad-item__icono svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.5;
}

.accesibilidad-item h3 {
  font-size: 1.25rem;
  margin-bottom: 0.2rem;
}

.accesibilidad-item p {
  margin: 0;
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--gris);
}

/* --- Horario y contacto ------------------------------------------------ */
.tabla-horario {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-base);
}

.tabla-horario th,
.tabla-horario td {
  padding: 10px 0;
  text-align: left;
  border-bottom: 1px solid var(--linea-suave);
}

.tabla-horario th {
  font-weight: 500;
}

.tabla-horario td {
  text-align: right;
  color: var(--gris-sobre-gris);
}

.seccion--clara .tabla-horario td,
.seccion--gris .tabla-horario td {
  color: var(--gris);
}

.tabla-horario tr:last-child th,
.tabla-horario tr:last-child td {
  border-bottom: 0;
}

.tabla-horario tr.es-hoy th,
.tabla-horario tr.es-hoy td {
  color: var(--azul-700);
  font-weight: 600;
}

.datos-contacto {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}

.datos-contacto li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.datos-contacto svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
  color: var(--azul-700);
  flex-shrink: 0;
  margin-top: 3px;
}

.datos-contacto a {
  font-weight: 500;
  text-decoration: none;
}

.datos-contacto a:hover {
  text-decoration: underline;
}

.datos-contacto span {
  display: block;
  font-size: var(--t-xs);
  /* Etiqueta pequeña sobre el fondo gris: gris oscurecido para WCAG AA */
  color: var(--gris-sobre-gris);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.seccion--clara .datos-contacto span,
.seccion--gris .datos-contacto span {
  color: var(--gris);
}

/* --- Mapa ------------------------------------------------------------- */
.mapa {
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: var(--sombra-sm);
  min-height: 320px;
  height: 100%;
}

.mapa iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  display: block;
}

/* --- Llamada a la acción final ----------------------------------------- */
.cta-final {
  padding: clamp(2.5rem, 5vw, 3.5rem);
  border-radius: var(--radio);
  background: var(--azul-900);
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
}

.cta-final h2 {
  color: var(--blanco);
}

.cta-final p {
  max-width: 52ch;
  margin-inline: auto;
  font-size: var(--t-lg);
}

.cta-final .grupo-botones {
  justify-content: center;
  margin-top: 26px;
}

/* --- Blog -------------------------------------------------------------- */
.articulo-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.articulo-tarjeta:hover {
  box-shadow: var(--sombra-md);
  transform: translateY(-2px);
}

.articulo-tarjeta__media {
  position: relative;
  aspect-ratio: 3 / 2;
}

.articulo-tarjeta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.articulo-tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 24px;
}

.articulo-tarjeta__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  font-size: var(--t-xs);
  color: var(--gris);
}

.articulo-tarjeta h3 {
  font-size: var(--h3);
}

.articulo-tarjeta p {
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--gris);
}

/* Contenido de un artículo */
.articulo {
  max-width: var(--ancho-texto);
  margin-inline: auto;
}

.articulo h2 {
  margin-top: 2.25rem;
  font-size: 1.75rem;
}

.articulo h3 {
  margin-top: 1.75rem;
}

.articulo li {
  margin-bottom: 0.4rem;
}

.articulo__aviso {
  margin-top: 2.5rem;
  padding: 20px 24px;
  border-left: 3px solid var(--azul-700);
  border-radius: 0 var(--radio) var(--radio) 0;
  background: var(--blanco);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--gris);
}

.articulo__aviso p:last-child {
  margin-bottom: 0;
}

/* --- Migas de pan ------------------------------------------------------ */
.migas {
  padding-block: 12px;
  font-size: var(--t-xs);
  color: var(--gris-sobre-gris);
  background: var(--blanco);
  border-bottom: 1px solid var(--linea-suave);
}

.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.migas li:not(:last-child)::after {
  content: "›";
  margin-left: 8px;
  opacity: 0.6;
}

.migas a {
  text-decoration: none;
}

.migas a:hover {
  text-decoration: underline;
}

/* --- Cabecera de página interior --------------------------------------- */
.cabecera-pagina {
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  background: var(--blanco);
  border-bottom: 1px solid var(--linea-suave);
}

.cabecera-pagina h1 {
  margin-bottom: 0.5rem;
  font-size: var(--h2);
}

.cabecera-pagina p {
  max-width: 62ch;
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--gris);
  margin-bottom: 0;
}

/* --- Preguntas frecuentes ---------------------------------------------- */
.faq {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.faq details {
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: var(--sombra-sm);
  overflow: hidden;
  height: fit-content;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--azul-900);
  cursor: pointer;
  list-style: none;
  min-height: 48px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-family: var(--fuente-texto);
  font-size: 22px;
  font-weight: 400;
  color: var(--azul-700);
  line-height: 1;
  flex-shrink: 0;
}

.faq details[open] summary::after {
  content: "−";
}

.faq__respuesta {
  padding: 0 24px 20px;
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--gris);
}

.faq__respuesta p {
  margin: 0;
}

/* ==========================================================================
   9. FORMULARIOS
   ========================================================================== */
.formulario {
  display: grid;
  gap: 18px;
  padding: 30px 32px;
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-md);
}

.campo {
  display: grid;
  gap: 5px;
}

.campo--doble {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

.campo label {
  font-size: var(--t-xs);
  color: var(--gris);
}

.campo .obligatorio {
  color: var(--azul-700);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--gris-fondo);
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--negro);
  caret-color: var(--azul-700);
  transition: border-color 0.16s ease;
  min-height: 46px;
}

.campo textarea {
  resize: vertical;
  min-height: 120px;
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover {
  border-color: rgba(10, 10, 10, 0.35);
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  border-color: var(--azul-700);
  outline: 2px solid var(--azul-700);
  outline-offset: 0;
}

.campo__ayuda {
  font-size: var(--t-xs);
  color: var(--gris);
}

.campo--casilla {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.campo--casilla input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--azul-700);
}

.campo--casilla label {
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--gris);
}

.formulario__aviso {
  display: none;
  padding: 12px 16px;
  border-radius: var(--radio);
  background: var(--azul-100);
  color: var(--azul-900);
  font-size: var(--t-base);
  line-height: 1.6;
}

.formulario__aviso.esta-visible {
  display: block;
}

.formulario__aviso p:last-child {
  margin-bottom: 0;
}

.trampa {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.footer {
  background: var(--negro);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--t-base);
}

.footer__interior {
  display: grid;
  gap: 28px;
  padding-block: 48px;
}

.footer h3 {
  margin-bottom: 10px;
  font-family: var(--fuente-titular);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--blanco);
}

.footer__rejilla {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.footer a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.footer a:hover {
  color: var(--blanco);
  text-decoration: underline;
}

.footer__contacto li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.footer__contacto svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.5;
  flex-shrink: 0;
  margin-top: 4px;
  opacity: 0.6;
}

.footer__redes {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.footer__redes a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radio);
  color: var(--blanco);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.footer__redes a:hover {
  background: var(--azul-700);
  border-color: var(--azul-700);
}

.footer__redes svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.5;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
  line-height: 22px;
}

.footer__legal-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

/* ==========================================================================
   11. BARRA FLOTANTE MÓVIL
   ========================================================================== */
.barra-movil {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  gap: 10px;
  padding: 10px clamp(12px, 3vw, 16px);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--blanco);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -4px 20px rgba(10, 10, 10, 0.1);
}

.barra-movil .boton {
  flex: 1;
  padding-inline: 12px;
}

.boton-flotante {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 90;
  box-shadow: var(--sombra-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.boton-flotante.esta-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ==========================================================================
   12. ANIMACIONES Y ACCESIBILIDAD
   ========================================================================== */
.js .al-entrar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .al-entrar.esta-dentro {
  opacity: 1;
  transform: none;
}

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

  .js .al-entrar {
    opacity: 1;
    transform: none;
  }
}

@media (forced-colors: active) {
  .boton,
  .tarjeta,
  .acceso,
  .campo input,
  .campo textarea {
    border: 1px solid;
  }
}

/* ==========================================================================
   13. PUNTOS DE RUPTURA (mobile-first: se amplía hacia arriba)
   ========================================================================== */

@media (min-width: 640px) {
  .campo--doble {
    grid-template-columns: 1fr 1fr;
  }

  .footer__rejilla {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .dos-columnas {
    grid-template-columns: 1fr 1fr;
  }

  .footer__rejilla {
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  }
}

/* --- Móvil y tablet: menú desplegable y barra fija ---------------------- */
@media (max-width: 1239px) {
  .menu-boton {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    top: calc(var(--header-h) + 12px);
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--borde-pagina) 20px;
    background: var(--blanco);
    box-shadow: var(--sombra-lg);
    display: none;
  }

  .nav.esta-abierto {
    display: flex;
  }

  .nav a {
    padding: 14px 0;
    font-size: var(--t-md);
    border-bottom: 1px solid var(--linea-suave);
  }

  .nav a:last-child {
    border-bottom: 0;
  }

  /* En móvil el CTA del header sobra: ya está la barra inferior fija */
  .header__acciones .boton {
    display: none;
  }

  body {
    padding-bottom: 72px;
  }

  .barra-movil {
    display: flex;
  }

  .boton-flotante {
    display: none;
  }

  .accesos {
    grid-template-columns: 1fr;
    margin-top: -32px;
  }

  .hero__panel {
    padding: 32px 28px;
  }

  .hero__interior {
    padding-block: 64px 56px;
  }
}

@media (min-width: 1240px) {
  .barra-movil {
    display: none;
  }
}

/* --- Pantallas pequeñas ------------------------------------------------ */
@media (max-width: 640px) {
  .barra-servicio__interior {
    justify-content: center;
    text-align: center;
  }

  .barra-servicio__derecha {
    margin-left: 0;
  }

  .logo__nombre {
    font-size: 20px;
  }

  /* Sin el lema debajo, el monograma queda mejor un poco más pequeño. */
  .logo__marca {
    width: 32px;
    height: 32px;
  }

  .logo__lema {
    display: none;
  }

  .cita {
    padding: 28px 24px;
  }

  .formulario {
    padding: 24px 22px;
  }

  .hero {
    min-height: 0;
  }
}

/* --- Pantallas muy estrechas (320–480 px) ------------------------------
   En el resto de tamaños los botones tienen prohibido partirse en dos
   líneas, pero aquí eso los haría más anchos que la pantalla: hay textos
   largos como "Demanar cita · 938 27 68 24". Se les deja partir. */
@media (max-width: 480px) {
  .boton {
    white-space: normal;
  }

  .hero__panel {
    padding: 28px 20px;
  }
}

@media (max-width: 380px) {
  .barra-movil .boton {
    font-size: var(--t-sm);
    gap: 6px;
  }
}

/* ==========================================================================
   IMPRESIÓN
   ========================================================================== */
@media print {
  .header,
  .barra-servicio,
  .barra-movil,
  .boton-flotante,
  .footer__redes,
  .idiomas,
  .menu-boton {
    display: none !important;
  }

  body {
    padding-bottom: 0;
    background: #fff;
    font-size: 11pt;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #6b7280;
  }
}