/* ==============================================================
   Figaro Tours — Sistema de diseño
   Diseño propio (sin plantillas). Paleta tomada del logo: azul
   marino profundo, dorado/naranja del sol y arena cálida.
   ============================================================== */

:root {
  /* Paleta (tomada del logo de Figaro Tours) */
  --color-mar-900: #170d5c;
  --color-mar-800: #211377;
  --color-mar-700: #332099;
  --color-mar-100: #dff6f6;
  --color-arena-50: #fbf8f2;
  --color-arena-100: #f3ead9;
  --color-acento: #e8970a;
  --color-acento-hover: #c27a00;
  --color-acento-oscuro: #9c6300;
  --color-whatsapp: #25d366;
  --color-texto: #1b1b3d;
  --color-texto-suave: #5c5f7d;
  --color-borde: #e5e1ea;
  --color-blanco: #ffffff;

  /* Tipografía */
  --fuente-titulos: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fuente-texto: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Espaciado / forma */
  --radio: 14px;
  --radio-chico: 8px;
  --sombra: 0 12px 32px rgba(23, 13, 92, 0.14);
  --sombra-suave: 0 4px 14px rgba(23, 13, 92, 0.09);
  --ancho-maximo: 1180px;
}

/* ---------- Reset básico ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fuente-texto);
  color: var(--color-texto);
  background: var(--color-arena-50);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-mar-900);
}
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

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

.seccion { padding: 88px 0; }
.seccion--compacta { padding: 56px 0; }
.seccion--marca {
  background: var(--color-acento);
  color: rgba(23, 13, 92, 0.82);
}
.seccion--marca h1, .seccion--marca h2, .seccion--marca h3 { color: var(--color-mar-900); }
.seccion--marca .boton--primario {
  background: var(--color-mar-900);
  color: var(--color-arena-50);
}
.seccion--marca .boton--primario:hover { background: var(--color-mar-800); }
.seccion--suave { background: var(--color-arena-100); }

.encabezado-seccion { max-width: 640px; margin: 0 0 48px; }
.encabezado-seccion.centrado { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-acento-oscuro);
  font-weight: 600;
  margin-bottom: 12px;
}
.seccion--marca .eyebrow { color: var(--color-mar-800); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.boton:hover { transform: translateY(-1px); }
.boton--primario {
  background: var(--color-acento);
  color: var(--color-blanco);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  box-shadow: var(--sombra-suave);
}
.boton--primario:hover { background: var(--color-acento-hover); }
.boton--claro {
  background: var(--color-blanco);
  color: var(--color-mar-900);
}
.boton--fantasma {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: inherit;
}
.boton--fantasma:hover { background: rgba(255, 255, 255, 0.12); }
.boton--outline {
  background: transparent;
  border-color: var(--color-mar-800);
  color: var(--color-mar-800);
}
.boton--outline:hover { background: var(--color-mar-800); color: var(--color-blanco); }
.boton--azul {
  background: var(--color-mar-800);
  border-color: var(--color-mar-800);
  color: var(--color-blanco);
}
.boton--azul:hover { background: transparent; color: var(--color-mar-800); }
.boton--whatsapp { background: var(--color-whatsapp); color: var(--color-blanco); }
.boton--whatsapp:hover { background: #1ebe5b; }
.boton--ancho { width: 100%; justify-content: center; }

/* ---------- Barra de navegación ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 247, 241, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-borde);
}
.nav .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 118px;
}
.nav__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-mar-900);
}
.nav__marca span { color: var(--color-acento-oscuro); }
.nav__logo { height: 100px; width: auto; display: block; }
.nav__enlaces .boton--primario { color: var(--color-blanco); }
.nav__enlaces a.boton { font-weight: 700; }
.nav__enlaces {
  display: flex;
  gap: 34px;
  align-items: center;
}
.nav__enlaces a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-texto);
  position: relative;
  padding: 6px 2px;
}
.nav__enlaces a.activo,
.nav__enlaces a:hover { color: var(--color-mar-900); }
.nav__enlaces a.activo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-acento);
  border-radius: 2px;
}
.nav__toggle {
  display: none;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-mar-900);
  border-radius: 2px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  color: var(--color-blanco);
  background: linear-gradient(135deg, var(--color-mar-900), var(--color-mar-700));
  overflow: hidden;
}
.hero__imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.hero__slider { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero__slide.activa { opacity: 0.55; }
.hero__slider-puntos {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
}
.hero__punto {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero__punto.activo { background: var(--color-blanco); transform: scale(1.15); }
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,61,67,0.55) 0%, rgba(11,61,67,0.78) 65%, rgba(11,61,67,0.92) 100%);
}
.hero__contenido {
  position: relative;
  z-index: 2;
  max-width: 680px;
  padding: 140px 0 100px;
}
.hero__contenido h1 {
  color: var(--color-blanco);
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  margin-bottom: 0.35em;
}
.hero__contenido p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.92);
  max-width: 520px;
}
.hero__acciones {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* Hero más chico para páginas internas */
.hero--paginainterna { min-height: 42vh; }
.hero--paginainterna .hero__contenido { padding: 120px 0 64px; }

/* ---------- Cuadrícula / tarjetas ---------- */
.grid {
  display: grid;
  gap: 28px;
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Franjas de "características" (íconos + texto, sin tarjeta) ---------- */
.caracteristica { text-align: center; padding: 0 10px; }
.caracteristica__icono {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-mar-100);
  color: var(--color-mar-800);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.caracteristica__icono svg { width: 26px; height: 26px; }
.caracteristica h3 { font-size: 1.02rem; margin-bottom: 6px; }
.caracteristica p { font-size: 0.88rem; color: var(--color-texto-suave); margin: 0; }

/* ---------- Pasos numerados (p.ej. "Cómo reservar") ---------- */
.paso { text-align: center; padding: 0 14px; }
.paso__numero {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-acento);
  color: var(--color-mar-900);
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.paso h3 { font-size: 1.05rem; margin-bottom: 6px; }
.paso p { font-size: 0.9rem; color: var(--color-texto-suave); margin: 0; }

.tarjeta {
  background: var(--color-blanco);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  border: 1px solid var(--color-borde);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.tarjeta__imagen {
  aspect-ratio: 4 / 3;
  max-height: 280px;
  background: linear-gradient(135deg, var(--color-mar-100), var(--color-arena-100));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-mar-700);
  font-size: 0.85rem;
  overflow: hidden;
}
.tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__cuerpo { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.tarjeta__cuerpo h3 { font-size: 1.2rem; margin-bottom: 0.4em; }
.tarjeta__cuerpo p { color: var(--color-texto-suave); font-size: 0.96rem; flex: 1; }

.imagen-marco {
  border-radius: var(--radio);
  border: 2px solid var(--color-arena-100);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  aspect-ratio: 4 / 5;
  max-height: 540px;
  align-self: start;
  background: linear-gradient(135deg, var(--color-mar-100), var(--color-arena-100));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-mar-700);
}
.imagen-marco img { width: 100%; height: 100%; object-fit: cover; }

.marcador-imagen {
  font-size: 0.82rem;
  text-align: center;
  padding: 20px;
  color: var(--color-mar-700);
}

/* ---------- Dos columnas (texto + imagen) ---------- */
.dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* ---------- Franja de contacto rápido / iconos ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  font-size: 0.9rem;
  font-weight: 500;
}

/* ---------- Formularios ---------- */
.formulario { display: grid; gap: 18px; }
.formulario--2col { grid-template-columns: 1fr 1fr; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo--completo { grid-column: 1 / -1; }
.campo label { font-size: 0.88rem; font-weight: 600; color: var(--color-mar-900); }
.campo input,
.campo select,
.campo textarea {
  padding: 13px 16px;
  border-radius: var(--radio-chico);
  border: 1.5px solid var(--color-borde);
  background: var(--color-blanco);
  color: var(--color-texto);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--color-mar-700);
}
.campo textarea { resize: vertical; min-height: 110px; }

.alerta {
  padding: 16px 20px;
  border-radius: var(--radio-chico);
  font-size: 0.95rem;
  margin-bottom: 24px;
}
.alerta--exito { background: #e3f5e8; color: #1c6b3c; border: 1px solid #b8e3c4; }
.alerta--error { background: #fbe9e7; color: #a13a2c; border: 1px solid #f3c4bc; }

/* ---------- Footer ---------- */
.footer {
  background: var(--color-mar-900);
  color: rgba(255, 255, 255, 0.85);
  padding: 56px 0 28px;
}
.footer h4 { color: var(--color-blanco); font-size: 1rem; margin-bottom: 14px; }
.footer a:hover { color: var(--color-acento); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer__marca {
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-blanco);
  margin-bottom: 10px;
}
.footer__logo { height: 92px; width: auto; margin-bottom: 14px; }
.footer__redes { display: flex; gap: 12px; margin-top: 18px; }
.footer__red {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blanco);
  transition: background 0.15s ease, transform 0.15s ease;
}
.footer__red svg { width: 18px; height: 18px; }
a.footer__red:hover { background: var(--color-acento); color: var(--color-mar-900); transform: translateY(-2px); }
.footer__red--pronto { opacity: 0.4; cursor: default; }
.footer__enlaces li { margin-bottom: 10px; font-size: 0.92rem; }
.footer__abajo {
  padding-top: 22px;
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-flotante {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 12px;
}
.whatsapp-flotante__burbuja {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  background-color: var(--color-whatsapp);
  border: none;
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  color: var(--color-blanco);
  transition: transform 0.15s ease;
}
.whatsapp-flotante__burbuja:hover { transform: scale(1.06); }
.whatsapp-flotante__burbuja svg { width: 30px; height: 30px; fill: currentColor; color: var(--color-blanco); }
.whatsapp-flotante__burbuja svg path { fill: currentColor; }
.whatsapp-flotante__globo {
  display: none;
  background: var(--color-blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 18px;
  width: 260px;
  border: 1px solid var(--color-borde);
}
.whatsapp-flotante.abierto .whatsapp-flotante__globo { display: block; }
.whatsapp-flotante__globo p { font-size: 0.9rem; margin-bottom: 12px; }

/* ---------- Utilidades ---------- */
.centrado-texto { text-align: center; }
.mt-0 { margin-top: 0; }
.texto-suave { color: var(--color-texto-suave); }

/* ==============================================================
   Efectos / interactividad — prueba en Inicio
   Animación de fondo del hero, aparición al hacer scroll, hover
   en tarjetas y en los íconos, pulso del botón de WhatsApp, y
   barra de navegación que se encoge un poco al bajar la página.
   Todo respeta "prefiere menos movimiento" (accesibilidad).
   ============================================================== */

/* Zoom lento y continuo en la foto del hero (efecto "Ken Burns") */
.hero__slide.activa {
  animation: heroZoom 9s ease-in-out infinite alternate;
}
/* Mismo efecto en las páginas internas, que usan una sola foto fija */
.hero__imagen {
  animation: heroZoom 12s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* Aparición suave de bloques al hacer scroll.
   Por defecto TODO es visible (si el navegador no soporta esto o el
   usuario prefiere menos movimiento, el contenido igual se ve bien);
   solo cuando main.js confirma que puede animar, esconde el bloque
   un instante antes de mostrarlo al llegar al scroll. */
.reveal { transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.reveal--oculto {
  opacity: 0;
  transform: translateY(26px);
}

/* Tarjetas de servicio: la foto hace un zoom leve al pasar el mouse */
.tarjeta__imagen img { transition: transform 0.5s ease; }
.tarjeta:hover .tarjeta__imagen img,
.tarjeta:focus-within .tarjeta__imagen img { transform: scale(1.07); }

/* Íconos de "características": reaccionan al pasar el mouse */
.caracteristica__icono {
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.caracteristica:hover .caracteristica__icono {
  transform: scale(1.1) rotate(-4deg);
  background: var(--color-acento);
  color: var(--color-blanco);
}

/* Botón principal: un poco de brillo al pasar el mouse */
.boton--primario:hover { box-shadow: 0 10px 26px rgba(232, 151, 10, 0.35); }

/* Barra de navegación: se encoge un poco al bajar la página */
.nav, .nav .contenedor, .nav__logo {
  transition: height 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.nav.nav--encogido { box-shadow: 0 6px 22px rgba(23, 13, 92, 0.1); }
.nav.nav--encogido .contenedor { height: 84px; }
.nav.nav--encogido .nav__logo { height: 62px; }

/* Botón flotante de WhatsApp: pulso suave que llama la atención */
.whatsapp-flotante__burbuja { position: relative; }
.whatsapp-flotante__burbuja::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-whatsapp);
  z-index: -1;
  animation: waPulso 2.6s ease-out infinite;
}
.whatsapp-flotante.abierto .whatsapp-flotante__burbuja::before { animation: none; opacity: 0; }
@keyframes waPulso {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- Franja de cifras destacadas (años, excursiones, grupos) ---------- */
.franja-stats { padding: 44px 0; background: var(--color-mar-900); }
.stat { text-align: center; }
.stat__numero {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  font-weight: 800;
  color: var(--color-acento);
  font-variant-numeric: tabular-nums;
}
.stat__etiqueta {
  display: block;
  margin-top: 6px;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Testimonios (carrusel de reseñas) ---------- */
.testimonios {
  display: grid;
  max-width: 680px;
  margin: 0 auto;
}
.testimonio {
  grid-area: 1 / 1;
  text-align: center;
  padding: 0 12px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.testimonio.activo { opacity: 1; transform: translateY(0); pointer-events: auto; }
.testimonio__comillas { width: 34px; height: 34px; color: var(--color-acento); margin: 0 auto 14px; }
.testimonio__texto {
  font-family: var(--fuente-titulos);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-mar-900);
  margin-bottom: 14px;
}
.testimonio__nombre { display: block; font-size: 0.9rem; font-weight: 600; color: var(--color-texto-suave); }
.testimonios__puntos {
  grid-area: 2 / 1;
  justify-self: center;
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.testimonios__punto {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-mar-700);
  background: transparent;
  transition: background 0.2s ease, transform 0.2s ease;
}
.testimonios__punto.activo { background: var(--color-mar-700); transform: scale(1.15); }

/* ---------- Barra flotante de "Reservar por WhatsApp" ---------- */
.barra-reserva {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 79;
  background: var(--color-mar-900);
  color: var(--color-blanco);
  box-shadow: 0 -8px 24px rgba(23, 13, 92, 0.18);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.barra-reserva.visible { transform: translateY(0); }
.barra-reserva__interior {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 13px 24px;
  flex-wrap: wrap;
}
.barra-reserva__texto { font-weight: 600; font-size: 0.95rem; }

/* La burbuja redonda de WhatsApp sube un poco mientras la barra está visible */
.whatsapp-flotante { transition: bottom 0.3s ease; }
body.con-barra-reserva .whatsapp-flotante { bottom: 86px; }

@media (max-width: 600px) {
  .barra-reserva__texto { display: none; }
  .barra-reserva__interior { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide.activa { animation: none; }
  .hero__imagen { animation: none; }
  .whatsapp-flotante__burbuja::before { animation: none; opacity: 0; }
  .reveal.reveal--oculto { opacity: 1; transform: none; }
  .reveal { transition: none; }
  .tarjeta:hover .tarjeta__imagen img,
  .caracteristica:hover .caracteristica__icono { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .dos-columnas { grid-template-columns: 1fr; gap: 32px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .nav .contenedor { height: 92px; }
  .nav__logo { height: 74px; }
  .nav__enlaces {
    position: fixed;
    top: 92px;
    left: 0; right: 0;
    background: var(--color-arena-50);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 28px;
    gap: 18px;
    border-bottom: 1px solid var(--color-borde);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }
  .nav__enlaces.abierto {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav__toggle { display: flex; }
  .seccion { padding: 56px 0; }
  .formulario--2col { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__abajo { flex-direction: column; }
}