:root {
  --bg: #f8faf9;
  --bg-alt: #eef5f2;
  --surface: #ffffff;
  --surface-soft: #f3f6f4;
  --text: #0f172a;
  --text-soft: #475569;
  --border: #e2e8f0;
  --brand: #1f6f64;
  --brand-dark: #175a50;
  --on-brand: #ffffff;
  --accent: #e08e3e;
  --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);

  /* Tarjetas (ficha de contacto, mapa) */
  --card-bg: #f6fbf9;
  --card-border: rgba(31, 111, 100, 0.14);
  --card-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* Acentos en naranja */
  --accent-soft: rgba(224, 142, 62, 0.14);  /* fondo de iconos */
  --accent-ink: #cf7a26;                    /* iconos */
  --accent-text: #a85a14;                   /* texto (contraste suficiente sobre claro) */

  /* Acento frío (crioterapia en los equipos) */
  --cold-soft: rgba(56, 152, 214, 0.14);
  --cold-ink: #2b7fb8;

  /* Acento rojo (infrarrojos en los equipos) */
  --red-soft: rgba(220, 38, 38, 0.12);
  --red-ink: #dc2626;

  /* Aviso "Abierto / Cerrado ahora" */
  --status-open: #15803d;
  --status-closed: #b91c1c;
  --status-holiday: #a16207;

  /* Barra de navegación */
  --header-h: 4.5rem;
  --acrylic-bg: rgba(255, 255, 255, 0.65);
  --acrylic-menu-bg: rgba(255, 255, 255, 0.78);
  --acrylic-border: rgba(148, 163, 184, 0.28);
  --acrylic-fallback: rgba(255, 255, 255, 0.96);
  --acrylic-blur: blur(16px) saturate(180%);
}

html[data-theme="dark"] {
  --bg: #0f1720;
  --bg-alt: #12211f;
  --surface: #16242b;
  --surface-soft: #1b2b2d;
  --text: #e2e8f0;
  --text-soft: #bfd1cb;
  --border: #23363f;
  --brand: #7ad7c0;
  --brand-dark: #9ce0d2;
  --on-brand: #0f1720;
  --accent: #f2b066;
  --shadow: 0 24px 50px rgba(2, 6, 23, 0.42);

  --card-bg: #1c3033;
  --card-border: rgba(122, 215, 192, 0.14);
  --card-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.3);

  --accent-soft: rgba(242, 176, 102, 0.14);
  --accent-ink: #f2b066;
  --accent-text: #f2b066;

  --cold-soft: rgba(125, 196, 240, 0.14);
  --cold-ink: #7dc4f0;

  --red-soft: rgba(248, 113, 113, 0.14);
  --red-ink: #f87171;

  --status-open: #4ade80;
  --status-closed: #f87171;
  --status-holiday: #facc15;

  --acrylic-bg: rgba(15, 23, 32, 0.65);
  --acrylic-menu-bg: rgba(15, 23, 32, 0.8);
  --acrylic-border: rgba(255, 255, 255, 0.08);
  --acrylic-fallback: rgba(15, 23, 32, 0.96);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  transition: background 0.2s ease, color 0.2s ease;
  overflow-x: hidden;
}

img,
svg,
iframe,
video,
a,
button {
  max-width: 100%;
}

/* =====================================================
   BARRA DE NAVEGACIÓN — efecto acrílico (cristal desenfocado)
   El cristal va en ::before y no en el propio <header>: si el header
   tuviera backdrop-filter, el menú desplegable (que está dentro)
   no podría desenfocar lo que hay detrás de él.
   ===================================================== */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--acrylic-bg);
  -webkit-backdrop-filter: var(--acrylic-blur);
  backdrop-filter: var(--acrylic-blur);
  border-bottom: 1px solid var(--acrylic-border);
}

/* Navegadores sin desenfoque: fondo casi opaco para que se lea bien */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root,
  :root[data-theme="dark"] {
    --acrylic-bg: var(--acrylic-fallback);
    --acrylic-menu-bg: var(--acrylic-fallback);
  }
}

h1,
h2,
h3 {
  font-family: "Sora", system-ui, sans-serif;
  line-height: 1.1;
  margin: 0;
}

.section-title {
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  line-height: 1.08;
  font-weight: 700;
  color: var(--brand);
}

.section-subtitle {
  margin-top: 0.75rem;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.4;
  font-weight: 600;
  color: var(--text-soft);
}

.section-copy {
  margin-top: 1rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-soft);
}

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

.image-placeholder {
  display: block;
  background: linear-gradient(135deg, #edf7f5 0%, #e2e8f0 100%);
  border: 0;
}

/* Pie de las fotos de Instalaciones: fondo neutro con un toque verde a la izquierda
   y naranja a la derecha (el mismo efecto que el recuadro del mapa) */
.photo-caption {
  background:
    radial-gradient(circle at 15% 30%, rgba(31, 111, 100, 0.14), transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(224, 142, 62, 0.14), transparent 45%),
    var(--surface);
}

html[data-theme="dark"] .photo-caption {
  background:
    radial-gradient(circle at 15% 30%, rgba(122, 215, 192, 0.14), transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(242, 176, 102, 0.12), transparent 45%),
    var(--surface);
}

/* Contacto con el botón de WhatsApp (4 botones): 2×2 en tablet, 4 en fila en ordenador.
   (Selector con atributo para ganar a la clase sm:grid-cols-3 de Tailwind) */
@media (min-width: 640px) {
  [data-contact-actions].has-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  [data-contact-actions].has-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* =====================================================
   BOTÓN FLOTANTE DE WHATSAPP (lo crea script.js si config.whatsapp.flotante es true)
   - Esquina inferior derecha; sube (--wa-lift) mientras se ve el aviso de cookies.
   - Por debajo del aviso de cookies (z-index 70) y del aviso legal (100).
   ===================================================== */
.wa-float {
  position: fixed;
  right: 1.25rem;
  bottom: calc(1.25rem + var(--wa-lift, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 65;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: #25d366;              /* verde oficial de WhatsApp */
  color: #ffffff;
  box-shadow: 0 10px 25px -6px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  transition: bottom 0.3s ease, transform 0.25s ease, opacity 0.25s ease, box-shadow 0.2s ease;
}

.wa-float:hover,
.wa-float:focus-visible {
  color: #ffffff;
  transform: scale(1.07);
  box-shadow: 0 14px 30px -6px rgba(0, 0, 0, 0.4);
}

.wa-float:focus-visible {
  outline: 3px solid #25d366;
  outline-offset: 3px;
}

.wa-float__icon {
  width: 1.9rem;
  height: 1.9rem;
}

/* Oculto mientras se ve el pie de página (script.js), para no tapar sus enlaces */
.wa-float.is-hidden {
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
}

/* Etiqueta "¿Hablamos?" a la izquierda del botón: aparece al pasar el ratón (solo ordenador) */
.wa-float__label {
  position: absolute;
  right: calc(100% + 0.75rem);
  padding: 0.4rem 0.8rem;
  border-radius: 9999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
  .wa-float:hover .wa-float__label,
  .wa-float:focus-visible .wa-float__label {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float,
  .wa-float__label {
    transition: none;
  }

  .wa-float:hover,
  .wa-float:focus-visible {
    transform: none;
  }
}

/* =====================================================
   NOTIFICACIONES EMERGENTES ("toast"): las crea notificar() en script.js
   Clases .notif-* y no .toast: Bootstrap ya usa .toast y la oculta sin .show.
   Arriba en el centro, bajo la barra de navegación. Por debajo del aviso legal (z-index 100).
   ===================================================== */
.notif-zona {
  position: fixed;
  top: calc(var(--header-h) + 0.75rem);
  left: 50%;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  transform: translateX(-50%);
  pointer-events: none;              /* la zona vacía no bloquea clics */
}

.notif {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--card-shadow);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  pointer-events: auto;
  animation: toast-entra 0.3s ease;
}

.notif.is-closing {
  animation: toast-sale 0.3s ease forwards;
}

.notif__icono {
  font-size: 1.2rem;
  line-height: 1;
}

@keyframes toast-entra {
  from { opacity: 0; transform: translateY(-12px) scale(0.96); }
}

@keyframes toast-sale {
  to { opacity: 0; transform: translateY(-8px) scale(0.98); }
}

@keyframes toast-fundido-entra {
  from { opacity: 0; }
}

@keyframes toast-fundido-sale {
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .notif {
    animation-name: toast-fundido-entra;
  }

  .notif.is-closing {
    animation-name: toast-fundido-sale;
  }
}

/* =====================================================
   EQUIPOS DE ELECTROTERAPIA (Instalaciones)
   Tarjeta con un mosaico de casillas: icono + nombre.
   - (sin variante)    → verde de la marca
   - .equip-item--hot  → naranja de la marca
   - .equip-item--red  → rojo (calor: infrarrojos)
   - .equip-item--cold → azul (frío: crioterapia)
   - .equip-item--wide → ocupa dos casillas desde 640px (corrientes: así, con 7 equipos,
                         las filas quedan completas en 2 y en 4 columnas)
   Cada icono se anima al pasar el ratón por su casilla.
   ===================================================== */
.equip-card {
  padding: 1.25rem 1rem;
  border: 1px solid var(--card-border);
  border-radius: 24px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.equip-card__head {
  margin-bottom: 1.25rem;
  text-align: center;
}

.equip-card__title {
  margin: 0;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brand);
}

.equip-card__subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  color: var(--text-soft);
}

/* Móvil: una columna, icono a la izquierda. Desde 640px: casillas en 2 columnas; desde 1024px: 4 */
.equip-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .equip-card {
    padding: 1.5rem;
  }

  .equip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .equip-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;             /* las dos filas, igual de altas */
  }
}

.equip-item {
  --equip-soft: rgba(31, 111, 100, 0.1);   /* fondo del icono (verde de la marca) */
  --equip-ink: var(--brand);               /* color del icono */

  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.9rem;
  row-gap: 0.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.equip-item:hover {
  transform: translateY(-2px);
  border-color: var(--equip-ink);
  box-shadow: 0 10px 20px -8px rgba(15, 23, 42, 0.18);
}

.equip-item--hot {
  --equip-soft: var(--accent-soft);
  --equip-ink: var(--accent-ink);
}

.equip-item--cold {
  --equip-soft: var(--cold-soft);
  --equip-ink: var(--cold-ink);
}

.equip-item--red {
  --equip-soft: var(--red-soft);
  --equip-ink: var(--red-ink);
}

@media (min-width: 640px) {
  /* Casillas sencillas: icono y nombre centrados (también en altura, si la fila es más alta) */
  .equip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1rem;
    text-align: center;
  }

  .equip-item--wide {
    grid-column: span 2;
  }

  .equip-item__icon {
    margin-bottom: 0.25rem;
  }
}

.equip-item__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: var(--equip-soft);
  color: var(--equip-ink);
  overflow: hidden;
}

/* Móvil: el nombre siempre en la columna de la derecha */
.equip-item > :not(.equip-item__icon) {
  grid-column: 2;
}

.equip-item__icon svg {
  width: 1.45rem;
  height: 1.45rem;
  overflow: visible;
}

.equip-item__name {
  font-family: "Sora", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

/* --- Animaciones de los iconos (al pasar el ratón por la casilla) --- */
.equip-ico path,
.equip-ico circle,
.equip-ico rect {
  transform-box: view-box;
}

/* Infrarrojos: la lámpara se enciende (la bombilla brilla) y los rayos de calor bajan uno tras otro */
.equip-item:hover .equip-ico__bulb {
  animation: equip-bulb 1.4s ease-in-out infinite;
}

.equip-item:hover .equip-ico__ray {
  animation: equip-ray 1.4s ease-out infinite;
}
.equip-item:hover .equip-ico__ray:nth-of-type(5) { animation-delay: 0.15s; }
.equip-item:hover .equip-ico__ray:nth-of-type(6) { animation-delay: 0.3s; }

@keyframes equip-bulb {
  0%, 100% { fill-opacity: 0.35; }
  50%      { fill-opacity: 1; }
}

@keyframes equip-ray {
  0%   { transform: translateY(-2px); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(2px); opacity: 0; }
}

/* Microondas: las ondas se encienden de dentro hacia fuera */
.equip-item:hover .equip-ico--waves path {
  animation: equip-waves 1.2s ease-out infinite;
}
.equip-item:hover .equip-ico--waves path:nth-of-type(2) { animation-delay: 0.15s; }
.equip-item:hover .equip-ico--waves path:nth-of-type(3) { animation-delay: 0.3s; }

@keyframes equip-waves {
  0%, 100% { opacity: 0.2; }
  30%      { opacity: 1; }
}

/* Ultrasonidos: las ondas se expanden desde el centro */
.equip-item:hover .equip-ico--ripple path {
  transform-origin: 12px 12px;
  animation: equip-ripple 1.2s ease-out infinite;
}
.equip-item:hover .equip-ico--ripple path:nth-of-type(2) { animation-delay: 0.25s; }

@keyframes equip-ripple {
  0%   { transform: scale(0.7); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* Laserterapia: el rayo se dispara y destella al llegar */
.equip-item:hover .equip-ico__beam {
  stroke-dasharray: 7.5;
  animation: equip-beam 1.4s ease-in infinite;
}
.equip-item:hover .equip-ico__burst {
  transform-origin: 18.5px 12px;
  animation: equip-burst 1.4s ease-out infinite;
}

@keyframes equip-beam {
  0%        { stroke-dashoffset: 7.5; }
  35%, 100% { stroke-dashoffset: 0; }
}

@keyframes equip-burst {
  0%, 30%   { transform: scale(0.3); opacity: 0; }
  45%       { transform: scale(1.2); opacity: 1; }
  80%, 100% { transform: scale(1); opacity: 0; }
}

/* Crioterapia: el copo gira despacio */
.equip-item:hover .equip-ico--snow {
  animation: equip-snow 3s linear infinite;
}

@keyframes equip-snow {
  to { transform: rotate(360deg); }
}

/* Magnetoterapia: las líneas del campo magnético laten */
.equip-item:hover .equip-ico__field {
  animation: equip-field 1.2s ease-in-out infinite;
}
.equip-item:hover .equip-ico__field:nth-of-type(4) { animation-delay: 0.2s; }

@keyframes equip-field {
  0%, 100% { opacity: 0.15; transform: translateY(1px); }
  50%      { opacity: 1; transform: translateY(0); }
}

/* Corrientes: el rayo chispea */
.equip-item:hover .equip-ico--bolt {
  animation: equip-bolt 1.2s steps(1, end) infinite;
}

@keyframes equip-bolt {
  0%, 100% { opacity: 1; transform: none; }
  10%      { opacity: 0.25; }
  20%      { opacity: 1; transform: scale(1.12); }
  30%      { opacity: 0.4; transform: none; }
  40%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .equip-item,
  .equip-item:hover {
    transform: none;
  }

  .equip-item:hover .equip-ico,
  .equip-item:hover .equip-ico * {
    animation: none !important;
  }
}

/* =====================================================
   CONVENIOS
   Todo se genera desde config.convenios (script.js):
   - .conv-marquee  → cinta de logos que se desliza sola (se para al pasar el ratón)
   - .conv-tabs     → pestañas por tipo de entidad, con su cuadrícula de logos
   - .conv-featured → tarjetas destacadas (Patronato, Clínica Arroyo)
   Logos con fondo transparente: a color en modo claro y en blanco en modo oscuro (filtro).
   .conv-logo--placa (config: placa: true) → a color sobre placa clara también en modo oscuro.
   Sin logo, se muestra el nombre escrito.
   ===================================================== */

/* --- Placa de logo (o nombre) --- */
.conv-logo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 4.25rem;
  min-width: 9.5rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

/* Logo que necesita placa clara (también en modo oscuro) */
.conv-logo--placa {
  border-color: #e2e8f0;
  background: #ffffff;
}

/* Modo oscuro: logos en blanco (salvo los de placa) */
html[data-theme="dark"] .conv-logo:not(.conv-logo--placa) .conv-logo__img,
html[data-theme="dark"] .conv-marquee .conv-logo:not(.conv-logo--placa):hover .conv-logo__img {
  filter: brightness(0) invert(1);
}

.conv-logo__img {
  max-width: 8rem;
  max-height: 2.6rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.conv-logo__name {
  font-family: "Sora", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  text-align: center;
  white-space: nowrap;               /* en la cinta: una línea (la placa se ensancha) */
}

/* En la cuadrícula, el logo nunca ocupa más que el espacio interior de la casilla (respeta el relleno) */
.conv-logo--tile .conv-logo__img {
  max-width: 100%;
  max-height: 2.3rem;
}

/* En la cuadrícula las casillas tienen ancho fijo: los nombres largos pasan a dos líneas */
.conv-logo--tile .conv-logo__name {
  white-space: normal;
  line-height: 1.25;
}

/* --- Cinta en movimiento ---
   La mueve script.js (se desplaza sola y se puede arrastrar con el dedo o el ratón).
   Es un contenedor con scroll horizontal, con la barra de desplazamiento oculta. */
.conv-marquee {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;    /* al arrastrar con el dedo no "tira" de la página */
  scrollbar-width: none;             /* sin barra de desplazamiento (Firefox) */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  margin-bottom: 2.5rem;
  padding: 0.5rem 0;
  /* los extremos se difuminan */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.conv-marquee::-webkit-scrollbar {
  display: none;                     /* sin barra de desplazamiento (Chrome, Safari, Edge) */
}

.conv-marquee.is-dragging {
  cursor: grabbing;
}

.conv-marquee__track {
  display: flex;
  gap: 1rem;
  width: max-content;
}

.conv-marquee img {
  -webkit-user-drag: none;           /* que el logo no se "despegue" al arrastrar */
  pointer-events: none;
}

/* Logos de la cinta en gris; recuperan su color al pasar el ratón */
.conv-marquee .conv-logo__img,
.conv-marquee .conv-logo__name {
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.conv-marquee .conv-logo:hover .conv-logo__img,
.conv-marquee .conv-logo:hover .conv-logo__name {
  filter: none;
  opacity: 1;
}

/* --- Pestañas: una sola tarjeta con un selector segmentado arriba y los logos debajo ---
   Al estar todo dentro de la misma caja se entiende que el selector cambia lo de abajo. */
.conv-tabs {
  padding: 1.25rem;
  border: 1px solid var(--card-border);
  border-radius: 24px;
  background: var(--card-bg);
}

/* Selector segmentado (una "barra" con las opciones; la activa, en verde) */
.conv-tablist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  padding: 0.3rem;
  border-radius: 16px;
  background: rgba(31, 111, 100, 0.08);
}

html[data-theme="dark"] .conv-tablist {
  background: rgba(122, 215, 192, 0.07);
}

@media (min-width: 900px) {
  .conv-tablist {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.conv-tab {
  display: flex;
  align-items: center;
  justify-content: center;          /* icono y texto centrados en cada opción */
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-soft);
  font-weight: 600;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease;
}

.conv-tab:hover {
  background: var(--surface);
  color: var(--text);
}

.conv-tab:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.conv-tab[aria-selected="true"] {
  background: var(--brand);
  color: var(--on-brand);
}

.conv-tab__icon {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
}

.conv-tab__title {
  font-size: 0.95rem;
  line-height: 1.25;
}

@media (max-width: 639px) {
  .conv-tabs {
    padding: 1rem;
  }

  .conv-tab {
    gap: 0.45rem;
    padding: 0.6rem 0.6rem;
  }

  .conv-tab__title {
    font-size: 0.9rem;
  }

  .conv-grid .conv-logo--tile {      /* más prioridad que la regla general de la casilla */
    padding: 0.8rem 1rem;
  }
}

/* Panel de cada pestaña (dentro de la tarjeta: sin recuadro propio) */
.conv-panel {
  border-radius: 12px;
  animation: conv-panel-in 0.35s ease;
}

.conv-panel:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

@keyframes conv-panel-in {
  from { opacity: 0; transform: translateY(6px); }
}

.conv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.conv-logo--tile {
  min-width: 0;
  padding: 0.9rem 1.25rem;          /* aire alrededor del logo */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.conv-logo--tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -8px rgba(15, 23, 42, 0.25);
}

/* Aviso "¿No encuentras tu compañía?" → enlace a Contacto.
   Fondo naranja muy claro; el borde izquierdo y el icono en el naranja de la marca */
.conv-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 2.25rem;              /* separado de la sombra de los destacados */
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));   /* naranja muy claro */
}

.conv-help__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  color: var(--accent-ink);
}

.conv-help__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.conv-help__text {
  flex: 1 1 16rem;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-soft);
}

.conv-help__text strong {
  color: var(--text);
}

.conv-help__link {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--brand);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.conv-help__link:hover,
.conv-help__link:focus-visible {
  border-color: var(--brand);
  background: rgba(31, 111, 100, 0.06);
  color: var(--brand);
}

.conv-help__link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Frase opcional encima de los logos de una pestaña (config: nota) */
.conv-panel__note {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-soft);
}

.conv-panel__note strong {
  color: var(--text);
}

.conv-panel__link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}

.conv-panel__link:hover,
.conv-panel__link:focus-visible {
  color: var(--brand-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Destacados --- */
.conv-featured {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .conv-featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.conv-feature {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
}

/* Placa cuadrada del logo destacado */
.conv-feature__logo {
  width: 6rem;
  min-width: 0;
  height: 6rem;
  padding: 0.6rem;
  border-radius: 18px;
}

.conv-feature__logo .conv-logo__img {
  max-width: 100%;
  max-height: 100%;
}

.conv-feature__logo .conv-logo__name {
  font-size: 0.8rem;
  white-space: normal;
}

.conv-feature__name {
  margin: 0;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

.conv-feature__title {
  margin: 0.35rem 0 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.conv-feature__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.conv-feature__list li {
  padding: 0.2rem 0.7rem;
  border-radius: 9999px;
  background: rgba(31, 111, 100, 0.1);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
}

/* Nota opcional de una tarjeta destacada (config: nota) */
.conv-feature__note {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-soft);
}

.conv-feature__note strong {
  color: var(--text);
}

/* Enlace opcional a la web de la entidad (config: enlace) */
.conv-feature__link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}

.conv-feature__link span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.conv-feature__link:hover,
.conv-feature__link:focus-visible {
  color: var(--brand-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.conv-feature__link:hover span,
.conv-feature__link:focus-visible span {
  transform: translate(2px, -2px);
}

/* Sin movimiento: la cinta no se mueve sola (lo controla script.js), pero se puede arrastrar */
@media (prefers-reduced-motion: reduce) {
  .conv-panel {
    animation: none;
  }

  .conv-logo--tile,
  .conv-logo--tile:hover {
    transform: none;
  }
}

/* =====================================================
   TRATAMIENTOS
   Tarjetas por categoría: cabecera de color (icono + título) + lista.
   - .treat-card--wide → ocupa 2 columnas (traumatología, con sus grupos en 2 columnas)
   - .treat-card--full → ocupa toda la fila (otros tratamientos, lista en columnas)
   - .treat-card--blue / --rose / --orange / --indigo / --violet / --green → color de la cabecera
   - Móvil (< 768px): cada tarjeta se despliega al tocar su cabecera (script.js añade
     .is-collapsible a .treat-grid; sin JavaScript, las tarjetas se ven abiertas).
   ===================================================== */
.treat-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .treat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .treat-card--wide,
  .treat-card--full {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .treat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .treat-card--wide {
    grid-column: span 2;
  }
}

.treat-card {
  /* Colores de la cabecera (cada variante los cambia) */
  --treat-c1: #d1fae5;
  --treat-c2: #ccfbf1;
  --treat-ink: #047857;
  --treat-sheen: rgba(255, 255, 255, 0.75);
  --treat-icon-bg: rgba(255, 255, 255, 0.7);

  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.treat-card:hover {
  transform: translateY(-2px);
  border-color: var(--treat-ink);
}

.treat-card--blue   { --treat-c1: #dbeafe; --treat-c2: #e0f2fe; --treat-ink: #1d4ed8; }
.treat-card--rose   { --treat-c1: #ffe4e6; --treat-c2: #fce7f3; --treat-ink: #be123c; }
.treat-card--orange { --treat-c1: #ffedd5; --treat-c2: #fef3c7; --treat-ink: #c2410c; }
.treat-card--indigo { --treat-c1: #e0e7ff; --treat-c2: #ede9fe; --treat-ink: #4338ca; }
.treat-card--violet { --treat-c1: #f3e8ff; --treat-c2: #fae8ff; --treat-ink: #7e22ce; }
.treat-card--green  { --treat-c1: #d1fae5; --treat-c2: #ccfbf1; --treat-ink: #047857; }

html[data-theme="dark"] .treat-card {
  --treat-sheen: rgba(255, 255, 255, 0.08);
  --treat-icon-bg: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .treat-card--blue   { --treat-c1: rgba(59, 130, 246, 0.28);  --treat-c2: rgba(14, 165, 233, 0.1);  --treat-ink: #93c5fd; }
html[data-theme="dark"] .treat-card--rose   { --treat-c1: rgba(244, 63, 94, 0.26);   --treat-c2: rgba(236, 72, 153, 0.1);  --treat-ink: #fda4af; }
html[data-theme="dark"] .treat-card--orange { --treat-c1: rgba(249, 115, 22, 0.26);  --treat-c2: rgba(245, 158, 11, 0.1);  --treat-ink: #fdba74; }
html[data-theme="dark"] .treat-card--indigo { --treat-c1: rgba(99, 102, 241, 0.28);  --treat-c2: rgba(139, 92, 246, 0.1);  --treat-ink: #a5b4fc; }
html[data-theme="dark"] .treat-card--violet { --treat-c1: rgba(168, 85, 247, 0.28);  --treat-c2: rgba(217, 70, 239, 0.1);  --treat-ink: #d8b4fe; }
html[data-theme="dark"] .treat-card--green  { --treat-c1: rgba(16, 185, 129, 0.26);  --treat-c2: rgba(20, 184, 166, 0.1);  --treat-ink: #6ee7b7; }

/* Por defecto, cada cabecera con el color de su categoría.
   🤓 Truco (script.js): el código Konami (↑ ↑ ↓ ↓ ← → ← → B A) o tocar 10 veces el título
   "Tratamientos" añade .treat-verde a <html> y todas pasan al verde de la marca.
   Para quitar el truco, borra estos dos bloques. */
html.treat-verde .treat-grid .treat-card {
  --treat-c1: #e3f4ef;
  --treat-c2: #f4fbf8;
  --treat-ink: var(--brand);
}

html[data-theme="dark"].treat-verde .treat-grid .treat-card {
  --treat-c1: rgba(122, 215, 192, 0.18);
  --treat-c2: rgba(122, 215, 192, 0.05);
  --treat-ink: var(--brand);
}

/* Cabecera: degradado de su color + un brillo en la esquina (no es un color plano) */
.treat-card__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.5rem;
  background:
    radial-gradient(120% 160% at 0% 0%, var(--treat-sheen) 0%, transparent 45%),
    linear-gradient(135deg, var(--treat-c1) 0%, var(--treat-c2) 100%);
}

.treat-card__inner {
  padding: 1rem 1.5rem 1.5rem;
}

.treat-card__inner > .treat-card__group:first-child {
  margin-top: 0;
}

.treat-card__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: var(--treat-icon-bg);
  color: var(--treat-ink);
}

.treat-card__icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* El icono da un pequeño salto al pasar el ratón por la tarjeta */
.treat-card:hover .treat-card__icon svg {
  animation: treat-pop 0.6s ease;
}

@keyframes treat-pop {
  0%, 100% { transform: none; }
  40%      { transform: scale(1.18) rotate(-8deg); }
  70%      { transform: scale(0.95) rotate(4deg); }
}

.treat-card__title {
  margin: 0;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

/* Subgrupos (Columna vertebral, Musculares…, Vasculares) */
.treat-card__group {
  margin: 1rem 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.treat-card__groups {
  display: grid;
  gap: 0 1.5rem;
}

@media (min-width: 640px) {
  .treat-card__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.treat-card__groups .treat-card__group {
  margin-top: 0.5rem;
}

/* Listas con un punto de color */
.treat-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.treat-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.925rem;
  line-height: 1.5;
  color: var(--text-soft);
}

.treat-list li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0.15rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: var(--treat-ink);
  opacity: 0.6;
}

@media (min-width: 640px) {
  .treat-list--columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .treat-list--columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Móvil: tarjetas plegables (solo si script.js ha activado .is-collapsible) */
@media (max-width: 767px) {
  .treat-grid.is-collapsible .treat-card__head {
    cursor: pointer;
    padding-right: 3rem;
  }

  /* Flecha que gira al abrir */
  .treat-grid.is-collapsible .treat-card__head::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.4rem;
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid var(--treat-ink);
    border-bottom: 2px solid var(--treat-ink);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.25s ease;
  }

  .treat-grid.is-collapsible .treat-card.is-open .treat-card__head::after {
    transform: translateY(-30%) rotate(225deg);
  }

  .treat-grid.is-collapsible .treat-card__head:focus-visible {
    outline: 2px solid var(--treat-ink);
    outline-offset: -4px;
    border-radius: 20px;
  }

  /* Despliegue suave: la fila pasa de 0 a su altura */
  .treat-grid.is-collapsible .treat-card__body {
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
  }

  .treat-grid.is-collapsible.is-ready .treat-card__body {
    transition: grid-template-rows 0.3s ease;
  }

  .treat-grid.is-collapsible .treat-card:not(.is-open) .treat-card__body {
    grid-template-rows: 0fr;
  }

  .treat-grid.is-collapsible .treat-card__inner {
    min-height: 0;
  }

  /* Al plegar, el relleno interior también desaparece (si no, asomaría la primera línea) */
  .treat-grid.is-collapsible.is-ready .treat-card__inner {
    transition: padding 0.3s ease;
  }

  .treat-grid.is-collapsible .treat-card:not(.is-open) .treat-card__inner {
    padding-top: 0;
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .treat-card,
  .treat-card:hover {
    transform: none;
  }

  .treat-grid.is-ready .treat-card__body,
  .treat-grid.is-ready .treat-card__inner {
    transition: none !important;
  }

  .treat-card:hover .treat-card__icon svg {
    animation: none;
  }
}

/* =====================================================
   ACCIDENTES DE TRÁFICO
   - Destacados: UNESPA (verde de la marca, con su logo) y "0 €" (naranja)
   - Ventajas, pasos (el 1.º enlaza a Contacto), a quién atendemos y texto completo desplegable
   ===================================================== */
.traffic-highlights {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .traffic-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* UNESPA: bloque verde, el nombre muy grande */
.traffic-unespa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  padding: 1.5rem;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: var(--on-brand);
  box-shadow: var(--card-shadow);
}

/* Logo oficial (PNG azul con fondo transparente): se pinta del color del texto del bloque
   con un filtro → blanco en modo claro, casi negro en modo oscuro (fondo verde menta) */
.traffic-unespa__logo {
  width: auto;
  height: clamp(2.4rem, 6vw, 3.2rem);
  margin: 0.5rem 0 0.25rem;
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .traffic-unespa__logo {
  filter: brightness(0);
}

.traffic-unespa__kicker {
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0.9;
}

.traffic-unespa__text {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.92;
}

/* Enlace externo a la web de UNESPA (mismo color que el texto del bloque) */
.traffic-unespa__link {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.traffic-unespa__link:hover,
.traffic-unespa__link:focus-visible {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.traffic-unespa__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sin ningún coste: "0 €" enorme en naranja */
.traffic-free {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem;
  padding: 1.5rem;
  border: 2px solid var(--accent);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
}

.traffic-free__amount {
  font-family: "Sora", system-ui, sans-serif;
  font-size: clamp(3.4rem, 8vw, 4.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--accent-text);
}

.traffic-free__title {
  font-family: "Sora", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
}

.traffic-free__text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-soft);
}

/* Reflejo en la tarjeta de UNESPA: una franja de luz la cruza en diagonal.
   script.js pone .is-brillando mientras el panel está en pantalla: cruza al aparecer
   y se repite cada 4 s. Con "reducir movimiento" no hay reflejo. */
.traffic-unespa {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.traffic-unespa > * {
  position: relative;
  z-index: 1;                        /* el texto, por encima del reflejo */
}

.traffic-unespa::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / 0.28) 50%, transparent 60%) 120% 0 / 250% 100% no-repeat;
  pointer-events: none;
}

.traffic-unespa.is-brillando::before {
  animation: unespa-brillo 4s ease-in-out 0.3s infinite;
}

/* El cruce dura ~1,75 s (44 % de 4 s); el resto del ciclo, quieto fuera de la tarjeta */
@keyframes unespa-brillo {
  0% { background-position: 120% 0; }
  44%, 100% { background-position: -20% 0; }
}

/* Trama de puntos en la tarjeta del 0 €, que se difumina desde la esquina superior derecha.
   Los puntos se deslizan en diagonal sin parar (solo CSS). Cada vuelta avanza justo un hueco
   de la cuadrícula (14 px), así que el reinicio no se nota. El difuminado se queda fijo.
   Con "reducir movimiento", quieta. */
.traffic-free {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.traffic-free > * {
  position: relative;
  z-index: 1;                        /* el texto, por encima de la trama */
}

.traffic-free::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 45%, transparent) 1.2px, transparent 1.6px);
  background-size: 14px 14px;
  -webkit-mask: linear-gradient(225deg, #000 0%, transparent 60%);
  mask: linear-gradient(225deg, #000 0%, transparent 60%);
  animation: trama-diagonal 2s linear infinite;
  pointer-events: none;
}

/* Hacia abajo a la izquierda (cambiando los signos, cambia la dirección) */
@keyframes trama-diagonal {
  from { background-position: 0 0; }
  to { background-position: -14px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .traffic-free::before {
    animation: none;
  }
}

/* Ventajas */
.traffic-perks {
  display: grid;
  gap: 1rem;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .traffic-perks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.traffic-perk {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.traffic-perk:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 10px 20px -8px rgba(15, 23, 42, 0.18);
}

.traffic-perk__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.25rem;
  border-radius: 9999px;
  background: rgba(31, 111, 100, 0.1);
  color: var(--brand);
}

.traffic-perk__icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.traffic-perk__title {
  font-family: "Sora", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.traffic-perk__text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-soft);
}

/* Bloques con título (Cómo funciona / A quién atendemos) */
.traffic-block {
  margin-bottom: 2.5rem;
}

.traffic-block__title {
  margin: 0 0 1rem;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brand);
}

/* Pasos numerados, unidos por una línea en ordenador */
.traffic-steps {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .traffic-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.traffic-step {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.traffic-step__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-top: 0.45rem;             /* el título queda a la altura del número */
}

.traffic-step__num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--brand);
  color: var(--on-brand);
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700;
}

.traffic-step__title {
  font-weight: 700;
  color: var(--text);
}

.traffic-step__text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-soft);
}

.traffic-step__link {
  align-self: flex-start;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}

.traffic-step__link span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.traffic-step__link:hover,
.traffic-step__link:focus-visible {
  color: var(--brand-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.traffic-step__link:hover span,
.traffic-step__link:focus-visible span {
  transform: translateX(3px);
}

/* A quién atendemos: etiquetas con icono */
.traffic-who {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.traffic-who__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
}

.traffic-who__item svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent-ink);
  flex-shrink: 0;
}

/* Texto completo (desplegable) */
.traffic-more {
  margin-bottom: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}

.traffic-more__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--brand);
  list-style: none;
}

.traffic-more__summary::-webkit-details-marker {
  display: none;
}

/* Flecha que gira al abrir */
.traffic-more__summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.traffic-more[open] .traffic-more__summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.traffic-more__summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 18px;
}

.traffic-more__body {
  padding: 0 1.25rem 1.25rem;
  color: var(--text-soft);
  line-height: 1.7;
}

.traffic-more__body p {
  margin: 0 0 0.85rem;
}

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

.traffic-more__body strong {
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .traffic-perk,
  .traffic-perk:hover {
    transform: none;
  }

  .traffic-unespa::before {
    display: none;
  }
}

.legal-list {
  list-style: none;
  padding-left: 1rem;
}

.legal-list li {
  position: relative;
  padding-left: 1rem;
}

.legal-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

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

.about-details summary {
  transition: color 0.2s ease;
}

.about-details summary:hover {
  color: var(--brand-dark);
}

.about-details[open] .summary-icon {
  transform: rotate(45deg);
}

.about-details .summary-icon {
  transition: transform 0.2s ease;
}

.about-details blockquote {
  margin: 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--accent);
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(224, 142, 62, 0.08), rgba(31, 111, 100, 0.05));
  color: var(--text);
}

.about-details blockquote p {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--brand-dark);
  font-family: "Sora", system-ui, sans-serif;
}

/* Portada con vídeo de fondo.
   La imagen de fondo de .hero se ve si el vídeo no carga
   o si el usuario tiene activado "reducir movimiento". */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--header-h); /* el vídeo empieza detrás de la barra de navegación */
  background: #123f39 url("../img/fondos/cuello.webp") center / cover no-repeat;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Capa oscura para que el texto se lea bien sobre el vídeo */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 63, 57, 0.72) 0%, rgba(15, 23, 42, 0.68) 100%);
}

/* Móvil: el vídeo es horizontal y se recorta por los lados.
   Encuadramos la parte izquierda (0% = borde izquierdo, 50% = centro). */
@media (max-width: 767px) {
  .hero,
  .hero__video {
    background-position: 0% center;
    object-position: 0% center;
  }
}

/* =====================================================
   AVISO EVENTUAL (config.aviso), arriba de la portada
   Dos tipos (config.aviso.tipo):
   - "urgente" (por defecto): rojo + icono de advertencia
   - "info": azul + icono de información, tono informativo
   Cada tipo solo redefine las variables --notice-*.
   ===================================================== */
.site-notice {
  /* Urgente (por defecto) */
  --notice-accent: #dc2626;       /* franja e icono */
  --notice-title: #b91c1c;
  --notice-bg: rgba(254, 242, 242, 0.97);

  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 40rem;
  margin: 0 auto 2rem;
  padding: 0.9rem 0.75rem 0.9rem 1rem;
  border-left: 4px solid var(--notice-accent);
  border-radius: 1rem;
  background: var(--notice-bg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  color: #0f172a;
  text-align: left;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Información */
.site-notice--info {
  --notice-accent: #2563eb;
  --notice-title: #1d4ed8;
  --notice-bg: rgba(239, 246, 255, 0.97);
}

html[data-theme="dark"] .site-notice {
  --notice-accent: #f87171;
  --notice-title: #fca5a5;
  --notice-bg: rgba(45, 16, 20, 0.94);
  color: #e2e8f0;
}

html[data-theme="dark"] .site-notice--info {
  --notice-accent: #60a5fa;
  --notice-title: #93c5fd;
  --notice-bg: rgba(15, 28, 52, 0.94);
}

.site-notice[hidden] {
  display: none;
}

/* Al cerrar: se desvanece y sube un poco antes de desaparecer */
.site-notice.is-closing {
  opacity: 0;
  transform: translateY(-8px);
}

.site-notice__icon {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.1rem;
  color: var(--notice-accent);
}

/* Solo se ve el icono del tipo activo */
.site-notice__icon--info,
.site-notice--info .site-notice__icon--urgente {
  display: none;
}

.site-notice--info .site-notice__icon--info {
  display: block;
}

.site-notice__body {
  flex: 1;
  min-width: 0;
}

.site-notice__title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--notice-title);
}

.site-notice__text {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #334155;
}

html[data-theme="dark"] .site-notice__text {
  color: #bfd1cb;
}

.site-notice__close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin: -0.25rem 0 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.site-notice__close:hover,
.site-notice__close:focus-visible {
  background: rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] .site-notice__close:hover,
html[data-theme="dark"] .site-notice__close:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}
/* Efectos de temporada (config.temporadas): capa que cubre toda la ventana.
   No bloquea clics. Por encima de la barra (50), por debajo del banner
   de cookies (70) y del modal (100). */
.season-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Textos de la portada */
.hero-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

/* Líneas finas a ambos lados del texto */
.hero-kicker::before,
.hero-kicker::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}

.hero-highlight {
  color: #f5b36b; /* naranja de la marca, aclarado para leerse bien sobre el vídeo */
}

/* Señales de confianza bajo el título */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}

.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hero-trust svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: #7ad7c0; /* verde menta */
}

@media (max-width: 767px) {
  .hero-kicker::before,
  .hero-kicker::after {
    width: 1.5rem;
  }

  .hero-trust {
    font-size: 0.875rem;
  }
}

/* Difuminado superior: bajo la barra se ve el fondo de la página
   y el vídeo aparece progresivamente hacia abajo */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1; /* por encima del vídeo y la capa oscura, por debajo del texto (z-10) */
  height: calc(var(--header-h) + 5rem);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 30%, transparent 100%);
  pointer-events: none;
}

@media (max-width: 767px) {
  .hero::before {
    height: calc(var(--header-h) + 2.5rem);
  }
}

/* Difuminado inferior: el vídeo se funde con el fondo de la página */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7rem;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
  pointer-events: none;
}

@media (max-width: 767px) {
  .hero::after {
    height: 5rem;
  }
}

/* Botón "Ver tratamientos" sobre el vídeo (colores propios para no depender
   de Tailwind/Bootstrap, que chocan en el color de los enlaces) */
.hero .hero-btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.hero .hero-btn-secondary:hover,
.hero .hero-btn-secondary:focus-visible {
  border-color: #ffffff;
  background: #ffffff;
  color: #175a50;
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }
}

/* =====================================================
   BOTÓN NEÓN GIRATORIO — reutilizable en cualquier <a> o <button>
   Uso: class="btn-neon" (respeta el padding y el redondeo del botón)
   Personalizable con variables, p. ej.:
     style="--neon-speed: 4s; --neon-fill: #1f6f64;"
   ===================================================== */
@property --neon-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.btn-neon {
  --neon-1: #ffc078;           /* color de luz 1 */
  --neon-2: #7ad7c0;           /* color de luz 2 */
  --neon-fill: #c05621;        /* fondo del botón (naranja tostado: contraste 4,6:1 con texto blanco; igual en modo claro y oscuro) */
  --neon-fill-hover: #a8481a;  /* fondo al pasar el ratón (5,8:1) */
  --neon-text: #ffffff;        /* color del texto */
  --neon-width: 2px;           /* grosor del borde de luz */
  --neon-speed: 5.5s;          /* tiempo de una vuelta */

  position: relative;
  isolation: isolate;
  border: 0;
  color: var(--neon-text);
  background: conic-gradient(from var(--neon-angle), var(--neon-1), var(--neon-2), #ffffff, var(--neon-1));
  animation: neon-spin var(--neon-speed) linear infinite;
  transition: transform 0.2s ease;
}

/* Resplandor difuminado detrás del botón */
.btn-neon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: inherit;
  filter: blur(10px);
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

/* Relleno interior (deja ver el borde de luz alrededor) */
.btn-neon::after {
  content: "";
  position: absolute;
  inset: var(--neon-width);
  z-index: -1;
  border-radius: inherit;
  background: var(--neon-fill);
  transition: background 0.2s ease;
}

.btn-neon:hover,
.btn-neon:focus-visible {
  color: var(--neon-text);
  transform: translateY(-2px);
}

.btn-neon:hover::before,
.btn-neon:focus-visible::before {
  opacity: 0.9;
}

.btn-neon:hover::after,
.btn-neon:focus-visible::after {
  background: var(--neon-fill-hover);
}

@keyframes neon-spin {
  to {
    --neon-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-neon {
    animation: none;
  }
}

/* Botones de acción de contacto (Llamar / Cómo llegar / Email) */
.contact-action {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--brand);
  border-radius: 1.25rem;
  background: var(--surface);
  color: var(--brand-dark);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.contact-action:hover,
.contact-action:focus-visible {
  color: var(--brand-dark);
  background: rgba(31, 111, 100, 0.06);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.contact-action__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: rgba(31, 111, 100, 0.1);
  overflow: hidden;                 /* recorta los iconos animados que salen del círculo (sobre) */
}

.contact-action__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

/* Teléfono sonando: el icono vibra al pasar el ratón por su enlace.
   Uso: class="phone-ring" en el <svg> del icono (dentro de un <a>). */
a:hover .phone-ring,
a:focus-visible .phone-ring {
  animation: phone-ring 1.2s ease-in-out infinite;
}

@keyframes phone-ring {
  0%, 40%, 100% { transform: rotate(0); }
  5%  { transform: rotate(-16deg); }
  10% { transform: rotate(16deg); }
  15% { transform: rotate(-14deg); }
  20% { transform: rotate(14deg); }
  25% { transform: rotate(-10deg); }
  30% { transform: rotate(10deg); }
  35% { transform: rotate(-4deg); }
}

/* Brújula buscando destino: la flecha gira a un lado y a otro hasta fijar el rumbo.
   Uso: class="compass-seek" en el <svg> del icono (dentro de un <a>). */
a:hover .compass-seek,
a:focus-visible .compass-seek {
  animation: compass-seek 2.4s ease-in-out infinite;
}

@keyframes compass-seek {
  0%, 70%, 100% { transform: rotate(0); }
  15% { transform: rotate(-60deg); }
  30% { transform: rotate(45deg); }
  45% { transform: rotate(-25deg); }
  57% { transform: rotate(12deg); }
  65% { transform: rotate(-4deg); }
}

/* Sobre que se envía: la solapa se abre y se cierra, el sobre sale volando
   por la derecha y vuelve a entrar por la izquierda.
   Uso: class="mail-send" en el <svg> y class="mail-send__flap" en el trazo de la solapa.
   (El círculo del icono recorta el sobre al salir; ver overflow en .contact-action__icon) */
a:hover .mail-send,
a:focus-visible .mail-send {
  animation: mail-send-fly 2.6s ease-in-out infinite;
}

a:hover .mail-send__flap,
a:focus-visible .mail-send__flap {
  transform-box: view-box;          /* coordenadas del icono (0-24) */
  transform-origin: 12px 6.25px;    /* bisagra: al abrirse, las esquinas de la solapa
                                       quedan justo sobre el borde superior del sobre */
  animation: mail-send-flap 2.6s ease-in-out infinite;
}

/* Líneas de velocidad detrás del sobre (solo se ven mientras sale volando) */
.mail-send {
  overflow: visible;                /* las líneas se dibujan a la izquierda, fuera del icono */
}

.mail-send__lines {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: right center;   /* crecen desde el sobre hacia atrás */
}

a:hover .mail-send__lines,
a:focus-visible .mail-send__lines {
  animation: mail-send-lines 2.6s ease-out infinite;
}

@keyframes mail-send-lines {
  0%, 40% { opacity: 0; transform: scaleX(0.2); }
  47%     { opacity: 1; transform: scaleX(1); }
  53%     { opacity: 1; transform: scaleX(1.3); }
  57%, 100% { opacity: 0; transform: scaleX(0.2); }
}

@keyframes mail-send-flap {
  0%, 100% { transform: scaleY(1); }                                         /* cerrada */
  14%, 22% { transform: scaleY(-1); animation-timing-function: ease-in; }    /* abierta hacia arriba */
  30%      { transform: scaleY(1.12); animation-timing-function: ease-out; } /* se cierra de golpe… */
  34%      { transform: scaleY(1); }                                         /* …y asienta */
}

@keyframes mail-send-fly {
  0%, 34% { transform: none; opacity: 1; }
  42% { transform: translateX(-3px) rotate(-8deg); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.4); }  /* coge impulso */
  56% { transform: translate(190%, -70%) rotate(-14deg); opacity: 0; }   /* sale volando */
  57% { transform: translateX(-190%); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }  /* reaparece por la izquierda */
  60% { opacity: 1; }
  74%, 100% { transform: none; opacity: 1; }                             /* vuelve a su sitio */
}

@media (prefers-reduced-motion: reduce) {
  a:hover .phone-ring,
  a:focus-visible .phone-ring,
  a:hover .compass-seek,
  a:focus-visible .compass-seek,
  a:hover .mail-send,
  a:focus-visible .mail-send,
  a:hover .mail-send__flap,
  a:focus-visible .mail-send__flap,
  a:hover .mail-send__lines,
  a:focus-visible .mail-send__lines {
    animation: none;
  }
}

.contact-action__title {
  display: block;
  font-family: "Sora", system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

.contact-action__sub {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-soft);
}

/* Botón principal (Llamar): relleno sólido */
.contact-action--primary,
.contact-action--primary:hover,
.contact-action--primary:focus-visible {
  background: var(--brand);
  color: var(--on-brand);
}

.contact-action--primary:hover,
.contact-action--primary:focus-visible {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* Acento naranja en los iconos de los botones secundarios */
.contact-action:not(.contact-action--primary) .contact-action__icon {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.contact-action--primary .contact-action__icon {
  background: rgba(255, 255, 255, 0.18);
}

.contact-action--primary .contact-action__sub {
  color: inherit;
  opacity: 0.9;
}

html[data-theme="dark"] .contact-action:not(.contact-action--primary):hover,
html[data-theme="dark"] .contact-action:not(.contact-action--primary):focus-visible {
  background: rgba(122, 215, 192, 0.08);
}

/* =====================================================
   FICHA DE CONTACTO (#ficha-contacto): tarjeta de datos + mapa
   ===================================================== */
.contact-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

/* Tarjeta de datos */
.contact-card {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--card-border);
  border-radius: 24px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.contact-card__item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  min-width: 0;
  padding: 1rem 0.25rem;
  color: var(--text);
  text-decoration: none;
}

/* Línea fina entre datos */
.contact-card__item + .contact-card__item {
  border-top: 1px solid var(--card-border);
}

a.contact-card__item:hover,
a.contact-card__item:focus-visible {
  color: var(--text);
}

a.contact-card__item:hover .contact-card__value,
a.contact-card__item:focus-visible .contact-card__value {
  color: var(--brand-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-card__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  overflow: hidden;                 /* recorta los iconos animados que salen del círculo (sobre) */
}

.contact-card__icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* Marcador de la dirección: da un saltito y rebota al caer, como un pin en el mapa.
   Uso: class="pin-bounce" en el <svg> del icono (dentro de un <a>). */
.pin-bounce {
  transform-origin: center bottom;  /* se aplasta contra el "suelo" */
}

a:hover .pin-bounce,
a:focus-visible .pin-bounce {
  animation: pin-bounce 1.4s ease-in-out infinite;
}

@keyframes pin-bounce {
  0%, 60%, 100% { transform: none; }
  20% { transform: translateY(-28%); animation-timing-function: ease-in; }  /* sube */
  38% { transform: translateY(0) scale(1.12, 0.88); }                      /* cae y se aplasta */
  48% { transform: translateY(-8%); }                                       /* pequeño rebote */
}

@media (prefers-reduced-motion: reduce) {
  a:hover .pin-bounce,
  a:focus-visible .pin-bounce {
    animation: none;
  }
}

/* Reloj del horario: las agujas dan vueltas rápidas (el tiempo vuela) y se paran.
   Al pasar el ratón por la línea del horario (no es un enlace).
   El minutero da 4 vueltas y la aguja de las horas 1: terminan donde empezaron. */
.clock-spin__minute,
.clock-spin__hour {
  transform-box: view-box;
  transform-origin: 12px 12px;      /* centro de la esfera */
}

.contact-card__item:hover .clock-spin__minute {
  animation: clock-spin-minute 2.6s ease-in-out infinite;
}

.contact-card__item:hover .clock-spin__hour {
  animation: clock-spin-hour 2.6s ease-in-out infinite;
}

@keyframes clock-spin-minute {
  0%        { transform: rotate(0); }
  65%, 100% { transform: rotate(1440deg); }
}

@keyframes clock-spin-hour {
  0%        { transform: rotate(0); }
  65%, 100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .contact-card__item:hover .clock-spin__minute,
  .contact-card__item:hover .clock-spin__hour {
    animation: none;
  }
}

.contact-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.contact-card__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.contact-card__value {
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere; /* el email largo no desborda en móvil */
}

/* Las horas del horario (<strong> en config.js) destacan en naranja */
.contact-card__value strong {
  color: var(--accent-text);
}
/* Aviso "Abierto / Cerrado ahora" (lo rellena script.js) */
.open-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

/* Solo la etiqueta ("Abierto ahora", "Cerrado ahora", "Hoy es festivo") va en color;
   el resto ("Abre hoy a las 16:00"...) en el color normal del texto */
.open-status__label {
  color: var(--status-color);
}

.open-status__rest {
  font-weight: 500;
}

.open-status[hidden] {
  display: none;
}

.open-status__dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--status-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-color) 25%, transparent);
}

.open-status[data-state="open"]    { --status-color: var(--status-open); }
.open-status[data-state="closed"]  { --status-color: var(--status-closed); }
.open-status[data-state="holiday"] { --status-color: var(--status-holiday); }

/* Dentro del botón "Llamar" (fondo verde): texto en el color del botón, puntos claros */
.open-status--on-brand {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: inherit;
  opacity: 0.95;
}

/* En el botón, la etiqueta va en el color del botón… */
.open-status--on-brand .open-status__label {
  color: inherit;
}

/* …salvo "Cerrado", en rojo (tono claro sobre el verde; oscuro sobre el verde menta del modo oscuro) */
.open-status--on-brand[data-state="closed"] .open-status__label {
  color: #fecaca;
}

html[data-theme="dark"] .open-status--on-brand[data-state="closed"] .open-status__label {
  color: #991b1b;
}

.open-status--on-brand[data-state="open"]    .open-status__dot { background: #86efac; }
.open-status--on-brand[data-state="closed"]  .open-status__dot { background: #fca5a5; }
.open-status--on-brand[data-state="holiday"] .open-status__dot { background: #fde68a; }

html[data-theme="dark"] .open-status--on-brand[data-state="open"] .open-status__dot { background: #15803d; }
html[data-theme="dark"] .open-status--on-brand[data-state="closed"] .open-status__dot { background: #b91c1c; }
html[data-theme="dark"] .open-status--on-brand[data-state="holiday"] .open-status__dot { background: #a16207; }

/* Recuadro del mapa: muestra el mapa (con consentimiento) o el aviso */
.contact-map {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 24px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

/* Zona donde va el mapa (si hay consentimiento) o el aviso (si no) */
.contact-map__frame {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 300px;
}

/* Aviso "Para ver el mapa es necesario aceptar las cookies..." */
.contact-map__placeholder {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
  background:
    radial-gradient(circle at 20% 25%, rgba(31, 111, 100, 0.10), transparent 45%),
    radial-gradient(circle at 80% 75%, rgba(224, 142, 62, 0.10), transparent 45%);
}

/* [hidden] debe ganar al display:flex de arriba */
.contact-map__placeholder[hidden] {
  display: none;
}

.contact-map__placeholder .link-button {
  font-size: 0.875rem;
}

.contact-map__pin {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.contact-map__pin svg {
  width: 1.75rem;
  height: 1.75rem;
}

.contact-map__note {
  max-width: 20rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--text-soft);
}

.contact-map__button {
  padding: 0.625rem 1.25rem;
  border: 0;
  border-radius: 9999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.contact-map__button:hover,
.contact-map__button:focus-visible {
  background: var(--brand-dark);
}

/* El iframe del mapa (solo lo crea script.js con consentimiento): ocupa toda la zona */
.contact-map__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  transition: filter 0.3s ease;
}

/* Modo oscuro "emulado": el embed de Google no tiene tema oscuro, así que
   se invierten los colores y se gira el tono 180° para recuperar los
   colores originales (agua azul, parques verdes, chincheta roja). */
html[data-theme="dark"] .contact-map__iframe {
  filter: invert(0.9) hue-rotate(180deg) saturate(0.8) brightness(1);
}

/* Guirnalda de luces (temporada "luces"): la crea script.js sobre el borde
   de los elementos de "adornar" (config.js). Cada luz trae su color (--c),
   tamaño (--s), ritmo de parpadeo (--d) y desfase (--r).
   .xmas-lights-host solo se añade a elementos sin posición propia. */
.xmas-lights-host {
  position: relative;
}

.xmas-lights {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.xmas-light {
  position: absolute;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);    /* centrada en su punto */
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 18%, var(--c) 50%);
  box-shadow: 0 0 4px 1px var(--c), 0 0 12px 3px var(--c);
  animation: xmas-twinkle var(--d) ease-in-out var(--r) infinite alternate;
}

@keyframes xmas-twinkle {
  from { opacity: 0.25; transform: scale(0.75); }
  to   { opacity: 1;    transform: scale(1); }
}

@media (min-width: 640px) {
  .contact-map__frame {
    min-height: 360px;
  }
}

@media (max-width: 767px) {
  .contact-card {
    padding: 0.25rem 1rem;
  }

  .contact-card__value {
    font-size: 0.95rem;
  }
}

p {
  margin: 0;
}

/* =====================================================
   CONMUTADOR DE TEMA (claro / oscuro)
   El aspecto depende de html[data-theme], que se aplica antes
   de pintar la página, así que no hay parpadeo al cargar.
   ===================================================== */
.theme-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  width: 2.75rem;   /* 44px */
  height: 1.5rem;   /* 24px */
  padding: 2px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 9999px;
  background: rgba(226, 232, 240, 0.85);
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.15);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.theme-switch__knob {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.125rem;  /* 18px */
  height: 1.125rem;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
  transition: transform 0.25s ease, background 0.25s ease;
}

.theme-switch__icon {
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.theme-switch__icon--sun {
  color: #e08e3e;
}

.theme-switch__icon--moon {
  color: #7ad7c0;
  opacity: 0;
  transform: rotate(-90deg);
}

.theme-switch:hover,
.theme-switch:focus-visible {
  border-color: var(--brand);
}

.theme-switch:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Modo oscuro: la bolita se desliza a la derecha y muestra la luna */
html[data-theme="dark"] .theme-switch {
  background: #0b1218;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .theme-switch__knob {
  transform: translateX(1.25rem); /* espacio interior (38px) − bolita (18px) = 20px */
  background: #1b2b2d;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .theme-switch__icon--sun {
  opacity: 0;
  transform: rotate(90deg);
}

html[data-theme="dark"] .theme-switch__icon--moon {
  opacity: 1;
  transform: rotate(0deg);
}

/* Fila "Modo oscuro" dentro del menú desplegable (solo móvil) */
.nav-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.9rem 0.9rem 0.4rem;
  border: 0;
  border-top: 1px solid var(--acrylic-border);
  background: transparent;
  color: var(--text-soft);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.nav-theme-row:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 0.75rem;
}

/* Móvil: conmutador en el menú. Ordenador: conmutador en la barra. */
@media (max-width: 767px) {
  .theme-switch--header {
    display: none;
  }
}

@media (min-width: 768px) {
  .nav-theme-row {
    display: none;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

html[data-theme="dark"] .nav-toggle {
  background: rgba(15, 23, 32, 0.96);
  border-color: rgba(148, 163, 184, 0.18);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  border-color: var(--brand);
  color: var(--brand-dark);
  transform: translateY(-1px);
}

/* Modo oscuro: adapta las clases de Tailwind usadas en el HTML.
   (!important: Bootstrap también define .bg-white con !important)
   Si usas otra clase de color de Tailwind y en modo oscuro se ve mal, añádela aquí. */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-white\/70 {
  background-color: var(--surface) !important;
}

html[data-theme="dark"] .bg-slate-50 {
  background-color: var(--bg) !important;
}

html[data-theme="dark"] .bg-slate-100 {
  background-color: var(--bg-alt) !important;
}

html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800 {
  color: var(--text) !important;
}

html[data-theme="dark"] .text-slate-600 {
  color: var(--text-soft) !important;
}

html[data-theme="dark"] .border-slate-200 {
  border-color: var(--border) !important;
}

html[data-theme="dark"] .bg-brand-50 {
  background-color: rgba(31, 111, 100, 0.18) !important;
}

html[data-theme="dark"] .text-brand-700,
html[data-theme="dark"] .text-brand-600 {
  color: var(--brand) !important;
}

.nav-links {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0.75rem;
  right: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--acrylic-border);
  border-radius: 1rem;
  background: var(--acrylic-menu-bg);
  -webkit-backdrop-filter: var(--acrylic-blur);
  backdrop-filter: var(--acrylic-blur);
  box-shadow: 0 20px 35px rgba(15, 23, 42, 0.12);
  z-index: 20;
}

@media (max-width: 767px) {
  html[data-theme="dark"] .nav-links {
    box-shadow: 0 24px 40px rgba(2, 6, 23, 0.42);
  }
}

.nav-links.is-open {
  display: flex;
}

.nav-toggle {
  display: inline-flex;
}

@media (min-width: 768px) {
  .nav-links {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    z-index: auto;
  }

  .nav-links.is-open {
    display: flex;
  }

  .nav-links__item {
    padding: 0.65rem 0.75rem;
    border-radius: 9999px;
    background: transparent;
  }

  .nav-links__item:hover,
  .nav-links__item:focus-visible {
    background: rgba(31, 111, 100, 0.08);
  }

  .nav-toggle {
    display: none;
  }

  .cookie-banner {
    left: auto;
    right: 1.5rem;
    bottom: 1.5rem;
  }
}

.nav-links__item {
  display: block;
  padding: 0.8rem 0.9rem;
  border-radius: 0.75rem;
  color: var(--text-soft);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-links__item:hover,
.nav-links__item:focus-visible {
  background: rgba(31, 111, 100, 0.08);
  color: var(--brand-dark);
  text-decoration: none;
}

html[data-theme="dark"] .nav-links__item {
  color: var(--text-soft);
  background: transparent;
}

html[data-theme="dark"] .nav-links__item:hover,
html[data-theme="dark"] .nav-links__item:focus-visible {
  background: rgba(122, 215, 192, 0.08);
  color: var(--brand-dark);
}

/* Sección activa (script.js pone aria-current en el enlace de la sección que estás viendo).
   Móvil: el enlace se marca dentro del menú. Ordenador: lo marca la píldora, que se desliza. */
.nav-links__item[aria-current] {
  background: rgba(31, 111, 100, 0.12);
  color: var(--brand-dark);
}

html[data-theme="dark"] .nav-links__item[aria-current] {
  background: rgba(122, 215, 192, 0.14);
  color: var(--brand-dark);
}

.nav-links__pill {
  display: none;
}

@media (min-width: 768px) {
  .nav-links {
    position: relative;              /* la píldora se coloca respecto al navbar */
  }

  .nav-links__item {
    position: relative;              /* por encima de la píldora */
    border-radius: 9999px;           /* hover con la misma forma que la píldora (va aquí, después de
                                        la regla general de .nav-links__item, para que no la anule) */
  }

  /* El fondo del activo lo pone la píldora (el hover sigue funcionando en los demás) */
  .nav-links__item[aria-current],
  html[data-theme="dark"] .nav-links__item[aria-current] {
    background: transparent;
  }

  .nav-links__pill {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 9999px;
    background: rgba(31, 111, 100, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.4s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.25s ease;
  }

  html[data-theme="dark"] .nav-links__pill {
    background: rgba(122, 215, 192, 0.14);
  }

  .nav-links__pill.is-visible {
    opacity: 1;
  }

  /* Al aparecer desde la portada: se coloca sin deslizarse y solo hace el fundido */
  .nav-links__pill.sin-transicion {
    transition: opacity 0.25s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links__pill {
    transition: none;
  }
}

@media (min-width: 768px) {
  .nav-toggle {
    width: 2.5rem;
    height: 2.5rem;
  }
}

@media (max-width: 767px) {
  .mobile-cta-stack {
    width: 100%;
  }

  .mobile-cta-stack > a {
    width: 100%;
    max-width: 100%;
    white-space: normal;
  }

  .nav-toggle {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.9rem;
    box-shadow: none;
  }
}

.site-modal[hidden],
.cookie-banner[hidden] {
  display: none;
}

/* =====================================================
   MODAL (aviso legal)
   Se llama .site-modal y no .modal porque Bootstrap ya tiene
   una clase .modal con su propio posicionamiento y scroll.
   ===================================================== */
.site-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

/* Fondo oscuro: al pulsarlo se cierra el modal */
.site-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  cursor: pointer;
}

/* Ventana: cabecera fija + cuerpo con scroll propio */
.site-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 46rem);
  max-height: 85vh;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.site-modal__header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.site-modal__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

.site-modal__close {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.site-modal__close:hover,
.site-modal__close:focus-visible {
  border-color: var(--brand);
  color: var(--brand-dark);
}

.site-modal__body {
  position: relative; /* referencia para desplazarse a un apartado */
  overflow-y: auto;
  padding: 1.25rem 1.5rem 1.75rem;
}

/* Texto legal */
.legal-text {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-soft);
}

.legal-text h3 {
  margin: 1.75rem 0 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand);
}

.legal-text h3:first-child {
  margin-top: 0;
}

.legal-text h4 {
  margin: 1.1rem 0 0.3rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
}

.legal-text p + p {
  margin-top: 0.6rem;
}

.legal-text .legal-list {
  margin: 0.6rem 0 0;
}

.legal-text .legal-list li + li {
  margin-top: 0.3rem;
}

.legal-text strong {
  color: var(--text);
}

.legal-text a {
  color: var(--brand-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Datos rellenados desde config.js */
.legal-text .legal-field {
  font-weight: 600;
  color: var(--accent-text);
}

/* Datos aún sin rellenar ("PENDIENTE") */
.legal-text .legal-field--pending {
  padding: 0 0.3rem;
  border-radius: 0.25rem;
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

html[data-theme="dark"] .legal-text .legal-field--pending {
  color: #fca5a5;
}

.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 42rem;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 1rem 1rem 1rem 1.25rem;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Al aceptar o rechazar: se desvanece y baja un poco antes de ocultarse */
.cookie-banner.is-closing {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.cookie-banner__text {
  flex: 1;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--text-soft);
}

.cookie-banner__actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.5rem;
}

/* Aceptar y Rechazar: idénticos a propósito (misma facilidad para ambos) */
.cookie-banner__btn {
  min-width: 6.5rem;
  padding: 0.55rem 1.1rem;
  border: 0;
  border-radius: 9999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cookie-banner__btn:hover,
.cookie-banner__btn:focus-visible {
  background: var(--brand-dark);
}

/* Botón con aspecto de enlace ("Más información") */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-dark);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-button:hover,
.link-button:focus-visible {
  color: var(--brand);
}

@media (max-width: 767px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1rem 0.9rem 0.9rem;
  }

  .cookie-banner__btn {
    flex: 1;
  }
}

/* =====================================================
   PIE DE PÁGINA
   ===================================================== */
.site-footer {
  border-top: 1px solid var(--card-border);
  background: var(--bg-alt);
  color: var(--text-soft);
  font-size: 0.9rem;
}

.site-footer__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.75rem 1rem 1.25rem;
}

/* Fila superior: logo + enlaces (apilados y centrados en móvil) */
.site-footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.site-footer__logo-link {
  display: inline-block;
}

.site-footer__logo {
  display: block;
  width: 11rem;
  max-width: 100%;
  height: auto;
}

/* Dos versiones del logo: la normal y la de fondos oscuros (texto en blanco),
   según el tema activo (también con el interruptor manual). */
.site-footer__logo--dark {
  display: none;
}

html[data-theme="dark"] .site-footer__logo--light {
  display: none;
}

html[data-theme="dark"] .site-footer__logo--dark {
  display: block;
}

.site-footer__tagline {
  max-width: 18rem;
  margin-top: 0.9rem;
  line-height: 1.6;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}

.site-footer__nav a {
  color: var(--text-soft);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: var(--brand-dark);
}

/* Barra inferior: copyright + enlaces legales */
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--card-border);
  font-size: 0.85rem;
  text-align: center;
}

/* Versión (y emoji de temporada) junto al copyright, en un tono más suave */
.site-footer__version {
  margin-left: 0.25rem;
  opacity: 0.75;
  white-space: nowrap;
}

/* Emoji de la temporada junto a la versión: no se selecciona al pulsarlo varias veces (truco) */
.site-footer__season,
.site-footer__version-num {
  -webkit-user-select: none;
  user-select: none;
}

.site-footer__legal {
  display: flex;
  gap: 1.25rem;
}

.site-footer__legal-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-soft);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.site-footer__legal-btn:hover,
.site-footer__legal-btn:focus-visible {
  color: var(--text);
}

@media (min-width: 640px) {
  .site-footer__inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px) {
  .site-footer__top {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .site-footer__nav {
    justify-content: flex-end;
  }

  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .site-footer__inner {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* =====================================================
   PÁGINA DE ERROR 404 (404.html)
   ===================================================== */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  min-height: calc(100vh - 12rem);
  padding: calc(var(--header-h) + 2rem) 1rem 3rem;
  text-align: center;
}

.error-page__image {
  width: 100%;
  max-width: 28rem;
  height: auto;
}

/* Modo oscuro: halo claro detrás de la ilustración (fondo transparente),
   para que sus contornos oscuros no se pierdan sobre el fondo */
html[data-theme="dark"] .error-page__image {
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.14), transparent);
}

.error-page__title {
  margin: 0;
  max-width: 40rem;
  color: var(--text);
  font-family: "Sora", system-ui, sans-serif;
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
}

.error-page__text {
  margin: 0 0 0.5rem;
  max-width: 32rem;
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.6;
}

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

  * {
    transition: none !important;
  }
}