/* ============================================================
   Unopuntoseis — estilos
   Paleta: sale del logo y vive SOLO en este :root.
   Tipografías: Bree Serif (títulos, cálida como un rótulo) ·
                Atkinson Hyperlegible (cuerpo y UI, legible en celular)
   ============================================================ */

:root {
  --azul: #0C6DAE;          /* principal: botones secundarios, títulos, enlaces */
  --azul-oscuro: #073F66;   /* hero, footer, secciones de contraste */
  --azul-claro: #E8F2FA;    /* fondos de sección alternos */
  --acento: #4FA3DB;        /* líneas, íconos, detalles */
  --gris: #8D9193;          /* gris de marca */
  --gris-claro: #F2F4F5;    /* fondos de tarjeta */
  --arena: #F5EEE3;         /* tierra de Chihuahua: fondos de sección alternos */
  --texto: #18252F;
  --whatsapp: #128040;      /* solo botones de WhatsApp: pasa AA con texto blanco */
  --blanco: #FFFFFF;

  /* Derivados de la paleta */
  --gris-texto: #5C6367;    /* gris de marca oscurecido: pasa AA sobre blanco */
  --texto-suave: var(--gris-texto);
  --borde-suave: rgba(141, 145, 147, 0.32);
  --sombra-tarjeta: none;

  --fuente-display: "Bree Serif", Georgia, serif;
  --fuente-ui: "Atkinson Hyperlegible", "Segoe UI", Tahoma, sans-serif;
  --fuente-cuerpo: "Atkinson Hyperlegible", "Segoe UI", Tahoma, sans-serif;

  --ancho-seccion: 68rem;   /* 1088px */
  --ancho-texto: 40rem;     /* 640px */
  --radio: 4px;

  /* Altura real del header sticky (padding + contenido + borde).
     El destino de cada ancla se detiene debajo de él, no tapado por él. */
  --altura-header: 73px;
}
@media (min-width: 900px) {
  :root { --altura-header: 79px; }
}

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-header) + 8px);
}
body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.6;
  color: var(--texto);
  background: var(--blanco);
  counter-reset: folio;
  font-synthesis: none; /* Bree Serif solo tiene un peso: sin negrita falsa */
}
img { max-width: 100%; height: auto; display: block; }
/* El navegador no aplica "hidden" a un <svg>: sin esto, el sprite de íconos
   ocupa 300×150 px encima del header */
svg[hidden] { display: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--azul); }

/* ---------- Enlace de salto (accesibilidad) ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--azul-oscuro);
  color: var(--azul-claro);
  font-family: var(--fuente-ui);
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radio) 0;
  text-decoration: none;
}
.skip-link:focus-visible { left: 0; }

/* ---------- Foco visible ---------- */
:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: 2px;
}
.hero :focus-visible,
.seccion-obra :focus-visible,
.footer :focus-visible {
  outline-color: var(--azul-claro);
}

/* ---------- Tipografía base ---------- */
h1, h2, h3 {
  font-family: var(--fuente-display);
  color: var(--azul-oscuro);
  line-height: 1.12;
  font-weight: 400;
}
h1 { font-size: clamp(2.3rem, 7vw, 3.4rem); }
h2 { font-size: clamp(1.8rem, 5vw, 2.7rem); }
h3 { font-size: 1.3rem; line-height: 1.2; }

/* Eyebrow: etiqueta pequeña sobre cada título */
.folio {
  display: block;
  font-family: var(--fuente-ui);
  font-weight: 700;
  font-size: 1rem;
  color: var(--azul);
  margin-bottom: 0.8rem;
  padding-left: 2.5rem;
  position: relative;
}
.folio::before {
  counter-increment: folio;
  content: counter(folio, decimal-leading-zero) " · ";
}
.folio::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.9rem;
  height: 2px;
  background: var(--acento);
}

/* ---------- Contenedores y separadores ---------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-seccion);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.seccion { padding-block: 4rem; }
.seccion-clara { background: var(--arena); }
.seccion-encabezado { max-width: var(--ancho-texto); margin-bottom: 2.5rem; }
.seccion-encabezado p { margin-top: 0.8rem; font-size: 1.1rem; color: var(--texto-suave); }

@media (min-width: 768px) {
  .seccion { padding-block: 6rem; }
  .contenedor { padding-inline: 2rem; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--fuente-ui);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: var(--radio);
  padding: 0.95rem 1.6rem;
  min-height: 3.5rem; /* 56px: objetivo táctil generoso */
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn-wa { background: var(--whatsapp); color: var(--blanco); }
.btn-wa:hover { background: color-mix(in srgb, var(--whatsapp) 86%, var(--texto)); }
.btn-primario { background: var(--azul); color: var(--blanco); }
.btn-primario:hover { background: var(--azul-oscuro); }
.btn-contorno {
  color: var(--blanco);
  box-shadow: inset 0 0 0 1.5px rgba(232, 242, 250, 0.6);
}
.btn-contorno:hover { background: rgba(232, 242, 250, 0.12); }
.btn:active { transform: translateY(1px); }
.btn .icono-wa { flex: none; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--blanco);
  border-bottom: 1px solid var(--borde-suave);
}
.header-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.7rem;
}

/* Marca: el logo es vertical, así que el header usa isotipo + nombre */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: none;
}
.marca img { height: 46px; width: auto; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca-nombre {
  font-family: var(--fuente-ui);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.1em;
  color: var(--azul);
}
.marca-nombre span { color: var(--gris); }
.marca-sub {
  font-family: var(--fuente-ui);
  font-weight: 500;
  font-size: 0.56rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gris-texto);
  margin-top: 0.22rem;
}
@media (min-width: 900px) {
  .marca img { height: 50px; }
}
@media (max-width: 359px) {
  .marca-sub { display: none; }
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--azul);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.header-barra { flex-wrap: wrap; }
.nav {
  display: none;
  flex-basis: 100%;
  border-top: 1px solid var(--borde-suave);
  padding-block: 0.5rem 1rem;
}
.nav.abierta { display: block; }
.nav ul { list-style: none; }
/* :not(.btn) — el CTA del menú es un botón, conserva su propio color
   (blanco sobre azul, igual que los demás CTAs del sitio) */
.nav a:not(.btn) {
  display: block;
  padding: 0.7rem 0.25rem;
  font-family: var(--fuente-ui);
  font-weight: 500;
  text-decoration: none;
  color: var(--texto);
}
.nav a:not(.btn):hover { color: var(--azul); text-decoration: underline; }
.nav .nav-cta { margin-top: 0.5rem; }

/* 1100 y no 900: marca, cinco enlaces y CTA no caben en menos */
@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .header-barra { padding-block: 0.85rem; }
  .header-barra { flex-wrap: nowrap; }
  .nav {
    display: flex;
    flex-basis: auto;
    align-items: center;
    border-top: none;
    padding: 0;
  }
  .nav ul { display: flex; align-items: center; gap: 1.25rem; }
  .nav a:not(.btn) { padding: 0.25rem 0; font-size: 0.9rem; white-space: nowrap; }
  .nav .nav-cta { margin: 0 0 0 1.25rem; }
  .nav .nav-cta .btn { padding: 0.6rem 1rem; min-height: 2.75rem; font-size: 0.9rem; white-space: nowrap; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Llena la pantalla visible debajo del header, en cualquier equipo.
     svh descuenta la barra del navegador en celulares. */
  min-height: calc(100vh - var(--altura-header));
  min-height: calc(100svh - var(--altura-header));
  padding-block: 2.5rem clamp(6rem, 17vh, 10rem);
  color: var(--blanco);
  background: var(--azul-oscuro);
}
.hero-ondas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero .contenedor { position: relative; z-index: 1; }
.hero-cuerpo { max-width: 50rem; }
.hero-eyebrow {
  display: block;
  font-family: var(--fuente-ui);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--acento);
  margin-bottom: 1rem;
}
.hero h1 {
  /* Depende también del alto: en laptops bajitas el hero sigue cabiendo */
  font-size: clamp(2.5rem, min(7.4vw, 10.5vh), 5.25rem);
  line-height: 1.05;
  color: var(--blanco);
  margin-bottom: 1.25rem;
}
.hero-sub {
  font-size: clamp(1.1rem, 2.4vh, 1.3rem);
  max-width: 38rem;
  margin-bottom: 1.75rem;
  color: var(--azul-claro);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.1rem; }
.hero-confianza { font-size: 0.95rem; color: var(--azul-claro); }
@media (max-width: 479px) {
  .hero-cta .btn { width: 100%; }
}

/* Olas: cada capa mide 200% y repite su trazo, así el ciclo no tiene corte.
   Solo se anima transform. La capa del frente es del color de la sección
   siguiente, para que el hero se funda con ella. */
.hero-olas {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: clamp(5rem, 16vh, 9rem);
  overflow: hidden;
  pointer-events: none;
}
.hero-ola {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 100%;
  animation: ola-avanza 22s linear infinite;
}
.ola-fondo { fill: var(--azul); opacity: 0.55; animation-duration: 30s; }
.ola-media { fill: var(--acento); opacity: 0.4; animation-direction: reverse; }
.ola-frente { fill: var(--arena); animation-duration: 16s; }
@keyframes ola-avanza {
  to { transform: translateX(-50%); }
}

/* ---------- Cómo funciona: 4 pasos ---------- */
.pasos {
  list-style: none;
  display: grid;
  gap: 1.25rem;
}
.paso {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  box-shadow: var(--sombra-tarjeta);
  border-radius: var(--radio);
  padding: 1.5rem 1.5rem 1.5rem 5.5rem;
}
.paso-numero {
  position: absolute;
  left: 1.4rem;
  top: 1.15rem;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--acento);
}
.paso h3 { margin-bottom: 0.4rem; }
.paso p { font-size: 1rem; color: var(--texto-suave); }

@media (min-width: 768px) {
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (min-width: 1080px) {
  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .paso { padding: 4.5rem 1.5rem 1.75rem; }
  .paso-numero { top: 1.25rem; left: 1.5rem; }
}

/* ---------- Beneficios ---------- */
.beneficios {
  list-style: none;
  display: grid;
  gap: 1.25rem;
}
.beneficio {
  background: var(--gris-claro);
  border-radius: var(--radio);
  padding: 1.5rem;
}
.beneficio h3 { margin-bottom: 0.4rem; }
.beneficio p { font-size: 1rem; color: var(--texto-suave); }
.beneficio-icono {
  width: 52px;
  height: 52px;
  padding: 12px;
  margin-bottom: 1rem;
  color: var(--azul);
  background: var(--blanco);
  border: 1.5px solid var(--acento);
  border-radius: 50%;
}
@media (min-width: 560px) { .beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .beneficios { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- ¿Tu casa aplica? ---------- */
.aplica { display: grid; gap: 1.25rem; margin-bottom: 2.25rem; }
.aplica-columna {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra-tarjeta);
  border-top: 4px solid var(--azul);
  padding: 1.5rem;
}
.aplica-no { border-top-color: var(--gris); }
.aplica-columna h3 { margin-bottom: 1rem; }
.aplica-lista { list-style: none; display: grid; gap: 0.75rem; }
.aplica-lista li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 1.05rem; }
.aplica-check {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  color: var(--azul);
}
.aplica-no .aplica-check { color: var(--gris); }
.aplica-cierre p { font-size: 1.1rem; margin-bottom: 1.25rem; }
@media (min-width: 768px) {
  .aplica { grid-template-columns: 3fr 2fr; }
}

/* ---------- Antes y después: sección oscura ---------- */
.seccion-obra { background: var(--azul-oscuro); }
.seccion-obra .folio { color: var(--azul-claro); }
.seccion-obra h2 { color: var(--blanco); }
.seccion-obra .seccion-encabezado p { color: var(--azul-claro); opacity: 0.92; }

/* Marco del comparador: tarjeta blanca con borde azul */
.ficha-obra {
  max-width: 52rem;
  margin-inline: auto;
}
.ficha-pestana {
  display: inline-block;
  background: var(--azul-claro);
  color: var(--azul-oscuro);
  font-family: var(--fuente-ui);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: var(--radio) var(--radio) 0 0;
}
.comparador {
  position: relative;
  overflow: hidden;
  border: 8px solid var(--blanco);
  box-shadow: 0 0 0 1.5px var(--azul);
  border-radius: 0 var(--radio) var(--radio) var(--radio);
  aspect-ratio: 4 / 3;
  background: var(--blanco);
  touch-action: pan-y; /* el arrastre horizontal es del slider; el scroll vertical, de la página */
}
.comparador img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* La capa "antes" se recorta por la derecha: a la izquierda el antes, a la derecha el después */
.comparador .img-antes {
  clip-path: inset(0 calc(100% - var(--pos, 38%)) 0 0);
}
.comparador-divisor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 38%);
  width: 3px;
  margin-left: -1.5px;
  background: var(--blanco);
  pointer-events: none;
}
.comparador-mango {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-ui);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(7, 63, 102, 0.35);
}
.comparador-etiqueta {
  position: absolute;
  top: 0.75rem;
  background: rgba(7, 63, 102, 0.85);
  color: var(--azul-claro);
  font-family: var(--fuente-ui);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  pointer-events: none;
}
.etiqueta-antes { left: 0.75rem; }
.etiqueta-despues { right: 0.75rem; }
/* El control real: un range transparente que cubre todo el comparador */
.comparador-control {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.comparador:focus-within {
  outline: 3px solid var(--azul-claro);
  outline-offset: 3px;
}
.comparador-ayuda {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  color: var(--azul-claro);
  opacity: 0.85;
  text-align: center;
}

/* Galería de pares */
.galeria-pares {
  list-style: none;
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
}
.par {
  background: var(--blanco);
  border-radius: var(--radio);
  overflow: hidden;
  border: 1.5px solid var(--azul);
}
.par-imagenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.par-media { position: relative; }
.par-media img { width: 100%; height: auto; }
.par-tag {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: rgba(7, 63, 102, 0.85);
  color: var(--azul-claro);
  font-family: var(--fuente-ui);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.par-pie {
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  color: var(--texto-suave);
}
@media (min-width: 900px) {
  .galeria-pares { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Testimonios ---------- */
.testimonios {
  list-style: none;
  display: grid;
  gap: 1.25rem;
}
.testimonio {
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  box-shadow: var(--sombra-tarjeta);
  border-radius: var(--radio);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.testimonio blockquote::before {
  content: "\201C";
  display: block;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 3rem;
  line-height: 0.6;
  color: var(--azul);
  margin-bottom: 0.6rem;
}
.testimonio blockquote { font-size: 1.05rem; }
.testimonio figcaption {
  font-family: var(--fuente-ui);
  font-weight: 600;
  color: var(--azul);
  font-size: 0.92rem;
}
@media (min-width: 768px) { .testimonios { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Nosotros ---------- */
.nosotros-cuerpo { display: grid; gap: 2rem; align-items: center; }
.nosotros-cuerpo p { max-width: var(--ancho-texto); font-size: 1.25rem; }
.nosotros-cuerpo .nosotros-oficina { margin-top: 1rem; font-size: 1.02rem; color: var(--texto-suave); }
.nosotros-isotipo { width: 130px; height: auto; }
@media (min-width: 768px) {
  .nosotros-cuerpo { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------- FAQ ---------- */
.faq { max-width: var(--ancho-texto); }
.faq details {
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  box-shadow: var(--sombra-tarjeta);
  border-radius: var(--radio);
  margin-bottom: 0.9rem;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  font-family: var(--fuente-ui);
  font-weight: 600;
  font-size: 1rem;
  color: var(--texto);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--azul);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 1.25rem 1.25rem; font-size: 1rem; color: var(--texto-suave); }

/* ---------- Contacto ---------- */
.contacto-tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  box-shadow: var(--sombra-tarjeta);
  border-radius: var(--radio);
  padding: 2rem 1.5rem;
  max-width: 52rem;
}
.contacto-tarjeta .btn { width: 100%; }
.contacto-datos {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borde-suave);
  display: grid;
  gap: 0.9rem;
  font-size: 1.02rem;
}
.contacto-datos a { font-weight: 700; text-decoration: none; }
.contacto-datos a:hover { text-decoration: underline; }
.contacto-sociales {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.contacto-sociales a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--fuente-ui);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--azul);
  border: 1px solid var(--borde-suave);
  box-shadow: var(--sombra-tarjeta);
  border-radius: var(--radio);
  padding: 0.6rem 0.9rem;
}
.contacto-sociales a:hover { background: rgba(12, 109, 174, 0.08); }
.contacto-sociales svg { width: 20px; height: 20px; }
@media (min-width: 640px) {
  .contacto-tarjeta { padding: 2.5rem; }
  .contacto-tarjeta .btn { width: auto; }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--azul-oscuro);
  color: var(--azul-claro);
  padding-block: 3rem 2rem;
  font-size: 0.95rem;
}
.footer a { color: var(--azul-claro); }
.footer-logo { display: inline-block; margin-bottom: 1.5rem; }
.footer-logo img { width: 150px; height: auto; }
.footer-legal {
  border-top: 1px solid rgba(232, 242, 250, 0.3);
  border-bottom: 1px solid rgba(232, 242, 250, 0.3);
  padding-block: 1.25rem;
  display: grid;
  gap: 0.6rem;
}
.footer-legal p { margin: 0; }
.footer-descargo {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  opacity: 0.9;
}
.footer-fin {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  font-size: 0.9rem;
}

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-flotante {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(7, 63, 102, 0.3);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.wa-flotante:hover { transform: scale(1.05); }

/* ---------- Barra de cookies ---------- */
.cookies {
  position: fixed;
  left: 1rem;
  right: 5.5rem; /* deja libre el botón flotante */
  bottom: 1rem;
  z-index: 45;
  background: var(--blanco);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  box-shadow: 0 4px 14px rgba(7, 63, 102, 0.18);
}
.cookies[hidden] { display: none; }
.cookies p { flex: 1 1 16rem; margin: 0; }
.cookies button {
  min-height: 44px;
  font-family: var(--fuente-ui);
  font-weight: 600;
  font-size: 0.9rem;
  background: var(--azul);
  color: var(--blanco);
  border: none;
  border-radius: var(--radio);
  padding: 0.55rem 1.1rem;
  cursor: pointer;
}
.cookies button:hover { background: var(--azul-oscuro); }
@media (min-width: 640px) {
  .cookies { left: auto; max-width: 26rem; }
}

/* ---------- Páginas legales ---------- */
.pagina-legal { padding-block: 3.5rem 4.5rem; }
.pagina-legal .contenedor { max-width: 46rem; }
.pagina-legal h1 { margin-bottom: 0.5rem; }
.legal-actualizacion {
  font-size: 0.95rem;
  color: var(--texto-suave);
  margin-bottom: 2.25rem;
}
.pagina-legal h2 {
  font-size: 1.3rem;
  margin-top: 2.25rem;
  margin-bottom: 0.6rem;
}
.pagina-legal p, .pagina-legal li { font-size: 1.02rem; }
.pagina-legal p + p { margin-top: 0.9rem; }

/* ---------- 404 ---------- */
.pagina-404 {
  min-height: 55vh;
  display: flex;
  align-items: center;
  text-align: center;
}
.pagina-404 .contenedor { max-width: 36rem; }
.codigo-404 {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(4rem, 18vw, 7rem);
  line-height: 1;
  color: var(--azul);
  margin-bottom: 0.5rem;
}
.pagina-404 p { margin-block: 1rem 2rem; font-size: 1.1rem; }

/* ---------- Accesibilidad: movimiento reducido ---------- */
@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;
  }
}