/* ============================================================
   PREMIUM MOMENTS — styles.css
   Paleta extraída de la imagen de referencia
   Mobile First · Comentado línea por línea
   ============================================================ */


/* ── VARIABLES / DESIGN TOKENS ──────────────────────────────
   Centralizamos todos los valores de diseño aquí.
   Cambiar un token aquí actualiza toda la web automáticamente.
   ─────────────────────────────────────────────────────────── */
:root {

  /* PALETA DE COLORES — extraída de la imagen de referencia */
  --navy-deepest:   #0D1B2A;   /* Azul marino casi negro: fondo principal de secciones oscuras */
  --navy-dark:      #112240;   /* Azul marino oscuro: fondo de secciones intermedias */
  --navy-mid:       #1B2B45;   /* Azul pizarra: fondo de cards y superficies elevadas */
  --navy-card:      #152035;   /* Azul profundo para cards dentro de secciones oscuras */
  --navy-border:    #1e3050;   /* Azul para bordes sutiles entre elementos */

  --gold:           #C9A84C;   /* Dorado principal: botones, acentos, labels */
  --gold-light:     #E2BE7A;   /* Dorado claro: hover de elementos dorados, cursivas */
  --gold-dim:       rgba(201,168,76,.14); /* Dorado muy transparente: fondos de hover */
  --gold-border:    rgba(201,168,76,.25); /* Dorado semi-transparente: bordes decorativos */

  --cream:          #F0E8D5;   /* Crema cálido: texto principal sobre fondos oscuros */
  --cream-dim:      rgba(240,232,213,.7); /* Crema al 70%: texto secundario sobre oscuro */
  --cream-faint:    rgba(240,232,213,.4); /* Crema al 40%: texto terciario/placeholders */

  --slate:          #9AABBD;   /* Gris azulado: texto de cuerpo sobre fondos claros */
  --slate-dim:      rgba(154,171,189,.6); /* Slate al 60%: texto muted/opcional */

  --bg-light:       #F5F0E8;   /* Fondo claro cálido: secciones sobre blanco (Nosotros, Eventos) */
  --bg-warm:        #FAF6EF;   /* Fondo casi blanco cálido: formulario, superficies claras */

  --text-on-light:  #0D1B2A;   /* Texto oscuro sobre fondos claros */
  --text-body-light: #334155;  /* Texto de párrafo sobre fondos claros */
  --text-muted-light: #64748b; /* Texto muted/secundario sobre fondos claros */

  /* TIPOGRAFÍA */
  --font-display: 'Cormorant Garamond', Georgia, serif; /* Fuente display: elegante para títulos */
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif; /* Fuente de cuerpo: limpia y moderna */

  /* RADIOS DE BORDE */
  --radius-xs:  4px;   /* Radio muy pequeño: badges, tags */
  --radius-sm:  8px;   /* Radio pequeño: botones, inputs */
  --radius-md:  14px;  /* Radio medio: cards, contenedores pequeños */
  --radius-lg:  20px;  /* Radio grande: imágenes, contenedores principales */

  /* SOMBRAS */
  --shadow-sm:   0 2px 16px rgba(13,27,42,.18);         /* Sombra suave para cards */
  --shadow-md:   0 6px 32px rgba(13,27,42,.28);         /* Sombra media para hover de cards */
  --shadow-gold: 0 4px 24px rgba(201,168,76,.3);        /* Sombra dorada para botones en hover */

  /* CURVAS DE ANIMACIÓN */
  --ease-smooth: cubic-bezier(.4,0,.2,1);      /* Ease estándar de Material Design: suave y rápida */
  --ease-spring: cubic-bezier(.34,1.56,.64,1); /* Ease con rebote leve: para efectos de escala */

  /* ALTURAS Y ESPACIADOS */
  --nav-h:         64px;                          /* Altura fija de la barra de navegación */
  --section-pad:   clamp(60px, 10vw, 100px);      /* Padding vertical de secciones: fluido entre 60px y 100px */
}


/* ── RESET BASE ──────────────────────────────────────────────
   Elimina estilos por defecto del navegador para tener
   control total sobre el diseño desde cero.
   ─────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box; /* Incluye padding y border en el ancho/alto del elemento */
  margin: 0;              /* Elimina todos los márgenes por defecto */
  padding: 0;             /* Elimina todos los paddings por defecto */
}

html {
  scroll-behavior: smooth;          /* Desplazamiento suave al hacer clic en enlaces ancla */
  -webkit-text-size-adjust: 100%;   /* Evita que iOS aumente el tamaño de texto al rotar */
}

body {
  font-family: var(--font-body);   /* Fuente base de todo el sitio */
  background: var(--bg-light);     /* Color de fondo base de la página */
  color: var(--text-on-light);     /* Color de texto base de la página */
  line-height: 1.65;               /* Interlineado cómodo para lectura de cuerpo */
  overflow-x: hidden;              /* Evita scroll horizontal no deseado */
}

img {
  display: block;        /* Elimina el espacio en línea que dejan las imágenes por defecto */
  width: 100%;           /* La imagen ocupa todo el ancho de su contenedor */
  height: 100%;          /* La imagen ocupa todo el alto de su contenedor */
  object-fit: cover;     /* La imagen cubre el área sin distorsionarse (recorta si es necesario) */
}

a {
  color: inherit;           /* Los enlaces heredan el color del texto de su padre */
  text-decoration: none;    /* Elimina el subrayado por defecto de los enlaces */
}

ul {
  list-style: none; /* Elimina los bullets/puntos de las listas no ordenadas */
}

button {
  cursor: pointer;            /* Muestra el cursor de mano al pasar sobre botones */
  border: none;               /* Elimina el borde por defecto de los botones */
  background: none;           /* Elimina el fondo por defecto de los botones */
  font-family: inherit;       /* Los botones heredan la fuente del padre */
}

input, select, textarea {
  font-family: var(--font-body); /* Los campos de formulario usan la misma fuente del sitio */
  font-size: 1rem;               /* Tamaño de fuente base en campos de formulario */
}


/* ── CONTAINER ───────────────────────────────────────────────
   Clase utilitaria que centra y limita el ancho del contenido.
   Se usa en casi todas las secciones.
   ─────────────────────────────────────────────────────────── */
.container {
  width: 100%;                               /* Ocupa todo el ancho disponible */
  max-width: 1120px;                         /* Límite máximo: evita líneas de texto demasiado largas */
  margin-inline: auto;                       /* Centra el contenedor horizontalmente */
  padding-inline: clamp(20px, 5vw, 48px);   /* Padding lateral fluido: más espacio en pantallas grandes */
}


/* ── SECCIÓN BASE ────────────────────────────────────────────
   Clases base y modificadoras aplicadas a todas las secciones.
   ─────────────────────────────────────────────────────────── */
.section {
  padding-block: var(--section-pad); /* Aplica el padding vertical uniforme entre secciones */
}

.section--dark {
  background: var(--navy-deepest); /* Fondo azul marino más oscuro para secciones de contraste */
  color: var(--cream);             /* Texto crema cálido sobre fondo oscuro */
}

.section--mid {
  background: var(--navy-dark);    /* Fondo azul marino intermedio para secciones secundarias */
  color: var(--cream);             /* Texto crema cálido sobre fondo intermedio */
}

.section-header {
  margin-bottom: clamp(36px, 6vw, 56px); /* Espacio fluido entre encabezado y contenido de la sección */
}

.section-header--center {
  text-align: center; /* Centra el encabezado de sección horizontalmente */
}


/* ── ETIQUETAS DE SECCIÓN ────────────────────────────────────
   Pequeña línea de texto en mayúsculas con línea decorativa
   que identifica cada sección visualmente.
   ─────────────────────────────────────────────────────────── */
.section-label {
  display: inline-flex;        /* Permite alinear la línea y el texto en la misma fila */
  align-items: center;         /* Alinea verticalmente la línea decorativa con el texto */
  gap: 10px;                   /* Espacio entre la línea decorativa y el texto */
  font-family: var(--font-body);   /* Fuente sans-serif para legibilidad en tamaño pequeño */
  font-size: .72rem;           /* Tamaño muy pequeño: funciona como supertítulo */
  font-weight: 500;            /* Peso medio para visibilidad sin ser bold */
  letter-spacing: .18em;       /* Espaciado generoso entre letras: da aire al texto en caps */
  text-transform: uppercase;   /* Convierte el texto a mayúsculas automáticamente */
  color: var(--gold);          /* Color dorado principal: identifica visualmente la etiqueta */
  margin-bottom: 14px;         /* Espacio entre la etiqueta y el título H2 debajo */
}

.section-label::before {
  content: '';                   /* El pseudo-elemento no tiene texto: es puramente visual */
  display: block;                /* Necesario para que width y height funcionen */
  width: 28px;                   /* Ancho fijo de la línea decorativa */
  height: 1px;                   /* Alto de 1px: crea la línea horizontal delgada */
  background: var(--gold);       /* La línea es del mismo color dorado que el texto */
}

.section-label--light {
  color: var(--gold-light); /* Versión más clara del dorado para usar sobre fondos oscuros */
}

.section-label--light::before {
  background: var(--gold-light); /* Línea decorativa también en dorado claro */
}

.section-label--center {
  display: flex;          /* Cambia de inline-flex a flex para poder centrar */
  justify-content: center; /* Centra la etiqueta horizontalmente dentro de su contenedor */
}


/* ── TÍTULOS DE SECCIÓN ──────────────────────────────────────
   Títulos H2 principales con tipografía display elegante.
   ─────────────────────────────────────────────────────────── */
.section-title {
  font-family: var(--font-display);               /* Fuente Cormorant Garamond para elegancia editorial */
  font-size: clamp(2.2rem, 5vw, 3.4rem);         /* Tamaño fluido: grande en desktop, moderado en móvil */
  font-weight: 400;                               /* Peso normal: la elegancia viene de la fuente, no del bold */
  line-height: 1.15;                              /* Interlineado ajustado para títulos grandes de varias líneas */
  color: var(--cream);                    /* Color oscuro sobre fondos claros */
  font-weight: 500; /* Le da un poquito más de cuerpo a los trazos de las letras */
  text-shadow: 
  0 0 8px rgba(7, 15, 26, 1),   /* Azul oscuro/negro puro bien concentrado */
  0 0 20px rgba(7, 15, 26, 0.9), /* Aura expansiva mediana */
  0 0 40px rgba(7, 15, 26, 0.8); /* Resplandor ambiental grande */ 
}

.section-title em {
  font-style: italic;         /* Cursiva: estilo editorial característico de Cormorant Garamond */
  color: var(--gold);         /* El texto en cursiva se marca en dorado como acento visual */
  text-shadow: 
    0 0 6px rgba(0, 0, 0, 1),    /* Definición del borde de la letra */
    0 0 15px rgba(0, 0, 0, 1),   /* Cuerpo del aura */
    0 0 30px rgba(0, 0, 0, 0.95); /* Resplandor exterior */
}

.section-title--light {
  color: var(--cream); /* Versión del título en color crema para fondos oscuros */
}

.section-title--light em {
  color: var(--gold-light); /* La cursiva en crema usa el dorado claro sobre fondos oscuros */
}

.section-title--center {
  text-align: center; /* Centra el título cuando el encabezado es centrado */
}


/* ── BOTONES ─────────────────────────────────────────────────
   Sistema de botones: base + modificadores de estilo.
   ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;                          /* Permite alinear ícono y texto en la misma fila */
  align-items: center;                           /* Centra verticalmente el ícono con el texto */
  gap: 8px;                                      /* Espacio entre el ícono SVG y el texto del botón */
  padding: 14px 28px;                            /* Padding interno: altura y anchura del botón */
  border-radius: var(--radius-sm);               /* Esquinas redondeadas de 8px */
  font-family: var(--font-body);                 /* Fuente sans-serif para botones */
  font-size: .88rem;                             /* Tamaño ligeramente menor que el cuerpo */
  font-weight: 500;                              /* Peso medio: visible pero no agresivo */
  letter-spacing: .05em;                         /* Ligero espaciado entre letras para elegancia */
  transition: all .25s var(--ease-smooth);       /* Transición suave de todas las propiedades en hover */
  cursor: pointer;                               /* Cursor de mano sobre el botón */
  white-space: nowrap;                           /* Evita que el texto del botón se parta en dos líneas */
  text-decoration: none;                         /* Elimina subrayado si el botón es un enlace <a> */
}

.btn--gold {
  background: var(--gold);       /* Fondo dorado sólido: CTA principal */
  color: var(--navy-deepest);    /* Texto azul oscuro sobre dorado: máximo contraste */
}

.btn--gold:hover {
  background: var(--gold-light);          /* El fondo se aclara ligeramente en hover */
  transform: translateY(-2px);            /* Se eleva 2px: efecto de botón levantado */
  box-shadow: var(--shadow-gold);         /* Sombra dorada que aparece en hover */
}

.btn--outline {
  background: transparent;               /* Sin fondo: solo borde visible */
  color: var(--cream);                   /* Texto crema sobre el fondo oscuro del hero */
  border: 1px solid rgba(240,232,213,.3); /* Borde crema semi-transparente */
}

.btn--outline:hover {
  border-color: var(--gold);             /* El borde cambia a dorado en hover */
  color: var(--gold);                    /* El texto también cambia a dorado en hover */
  transform: translateY(-2px);           /* El botón también se eleva en hover */
}

.btn--full {
  width: 100%;                /* El botón ocupa todo el ancho de su contenedor padre */
  justify-content: center;    /* Centra horizontalmente el contenido dentro del botón */
}

.btn--wa {
  gap: 10px; /* Mayor separación entre el ícono de WhatsApp y el texto */
}


/* ── NAVEGACIÓN ──────────────────────────────────────────────
   Barra de navegación fija en la parte superior.
   Cambia de transparente a sólida al hacer scroll.
   ─────────────────────────────────────────────────────────── */
.nav {
  position: fixed;                             /* Fija la nav al viewport: siempre visible al hacer scroll */
  top: 0;                                      /* Pegada al borde superior de la pantalla */
  left: 0;                                     /* Desde el borde izquierdo */
  right: 0;                                    /* Hasta el borde derecho */
  height: 70px;                        /* Altura fija de 64px */
  z-index: 100;                                /* Por encima de todo el contenido de la página */
  transition: background .35s var(--ease-smooth), box-shadow .35s; /* Transición suave al agregar .scrolled */
}

.nav.scrolled {
  background: #070f1a;                                 /* Fondo sólido oscuro cuando el usuario hace scroll */
  border-bottom: 1px solid var(--gold);  /* 2. Añadimos un borde inferior sutil con tu variable de dorado para delimitar los fondos idénticos */
  box-shadow: 0 2px 24px rgba(13,27,42,.5);          /* Sombra inferior para separar visualmente la nav del contenido */
}

.nav__inner {
  display: flex;                               /* Distribuye logo y links en fila */
  align-items: center;                         /* Centra verticalmente todos los elementos de la nav */
  justify-content: space-between;             /* Logo a la izquierda, links a la derecha */
  height: 100%;                                /* Ocupa toda la altura de la nav */
  padding-inline: clamp(20px, 4vw, 40px);      /* Padding lateral fluido igual al container */
  max-width: 100%;                           /* Limita el ancho máximo del contenido de la nav */
  margin-inline: auto;                         /* Centra el contenido de la nav */
}

.nav__logo {
  display: flex;           /* Alinea monograma y nombre en la misma fila */
  align-items: center;     /* Centra verticalmente monograma y nombre */
  gap: 10px;               /* Espacio entre el monograma y el nombre de la marca */
  color: var(--cream);     /* Color crema para el logo sobre fondos oscuros */
  z-index: 101;            /* Por encima del menú móvil para siempre estar visible */
}

.logo-svg {
  height: 60px;        
  width: auto;         /* Proporciones perfectas */
  display: block;      /* Limpieza */
  flex-shrink: 0;      /* Compresión */
  transform: scale(1.3); 
  transform-origin: left center; /* Asegura que al agrandarse no se mueva de su lugar */
}

.logo-text {
  font-family: var(--font-display); /* Fuente display para el nombre de la marca */
  font-size: 1.30rem;              /* Tamaño del nombre de la marca en la nav */
  font-weight: 500;                /* Peso medio: elegante sin ser demasiado bold */
  color: var(--gold);             /* Color crema del nombre sobre fondos oscuros */
  letter-spacing: .08em;           /* Espaciado sutil entre letras del nombre */
  margin-left: 5px;
}

/* BOTÓN HAMBURGUESA (solo visible en móvil) */
.nav__toggle {
  display: flex;            /* Apila las tres barras en columna */
  flex-direction: column;   /* Orienta las barras verticalmente */
  gap: 5px;                 /* Espacio entre cada barra del ícono hamburguesa */
  padding: 6px;             /* Padding para ampliar el área de toque en móvil */
  z-index: 101;             /* Por encima del menú móvil para poder cerrarlo */
}

.nav__toggle span {
  display: block;                               /* Necesario para que width y height funcionen */
  width: 24px;                                  /* Ancho de cada barra del ícono hamburguesa */
  height: 1.5px;                                /* Alto muy delgado de cada barra */
  background: var(--cream);                     /* Color crema de las barras sobre fondo oscuro */
  transition: all .3s var(--ease-smooth);       /* Transición para la animación de X al abrir */
  transform-origin: center;                     /* Las barras rotan desde su centro */
}

/* Animación del ícono hamburguesa a X cuando el menú está abierto */
.nav__toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(4.5px, 4.5px); /* Primera barra rota 45° hacia abajo-derecha */
}

.nav__toggle.open span:nth-child(2) {
  opacity: 0;                /* La barra del medio desaparece */
  transform: scaleX(0);      /* También se comprime para una desaparición más elegante */
}

.nav__toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(4.5px, -4.5px); /* Tercera barra rota -45° hacia arriba-derecha */
}

/* MENÚ MÓVIL (pantalla completa) */
.nav__links {
  position: fixed;                        /* Cubre toda la pantalla del dispositivo */
  top: 0;                                 /* Desde el borde superior */
  left: 0;                                /* Desde el borde izquierdo */
  right: 0;                               /* Hasta el borde derecho */
  bottom: 0;                              /* Hasta el borde inferior */
  background: var(--navy-deepest);        /* Fondo oscuro sólido que cubre el contenido */
  display: flex;                          /* Centra los links en el espacio */
  flex-direction: column;                 /* Links apilados verticalmente */
  align-items: center;                    /* Links centrados horizontalmente */
  justify-content: center;               /* Links centrados verticalmente */
  gap: 32px;                             /* Espacio generoso entre cada link */
  opacity: 0;                            /* Invisible por defecto */
  pointer-events: none;                  /* No interactivo cuando está cerrado */
  transition: opacity .3s var(--ease-smooth); /* Transición de opacidad al abrir/cerrar */
}

.nav__links.open {
  opacity: 1;             /* Visible cuando el menú está abierto (clase agregada por JS) */
  pointer-events: all;    /* Interactivo cuando está abierto */
}

.nav__links a {
  font-family: var(--font-display);  /* Fuente display grande para los links del menú móvil */
  font-size: 2rem;                   /* Tamaño grande para los links del menú a pantalla completa */
  font-weight: 400;                  /* Peso normal: elegante con Cormorant */
  color: var(--cream);               /* Color crema sobre el fondo oscuro del menú */
  letter-spacing: .04em;             /* Espaciado sutil para elegancia tipográfica */
  transition: color .2s;             /* Transición suave del color en hover */
}

.nav__links a:hover {
  color: var(--gold); /* Los links cambian a dorado en hover */
}

.nav__cta {
  font-family: var(--font-body) !important;    /* Sobreescribe la fuente display para el CTA */
  font-size: .88rem !important;                /* Tamaño más pequeño: es un botón, no un link grande */
  padding: 12px 26px;                          /* Padding del botón CTA en la navegación */
  background: var(--gold);                     /* Fondo dorado sólido: destaca del resto de links */
  color: var(--navy-deepest) !important;       /* Texto oscuro sobre dorado: contraste máximo */
  border-radius: var(--radius-sm);             /* Esquinas redondeadas para forma de botón */
}


/* ── HERO PRINCIPAL ──────────────────────────────────────────
   Sección de bienvenida: ocupa 100% de la altura de pantalla.
   Imagen de fondo + overlay + contenido de texto y botones.
   ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;                               /* Necesario para posicionar el fondo y el contenido */
  min-height: 100svh;                               /* 100% de la altura visible del viewport (svh es más preciso en móvil) */
  display: flex;                                    /* Flexbox para posicionar el contenido */
  flex-direction: column;                           /* Apila elementos verticalmente */
  justify-content: flex-end;                        /* El contenido se posiciona en la parte inferior */
  padding-bottom: clamp(48px, 8vw, 80px);          /* Espacio inferior fluido entre contenido y borde */
  overflow: hidden;                                 /* Oculta cualquier desbordamiento de la imagen */
}

.hero__bg {
  position: absolute;   /* Se posiciona absolutamente respecto al .hero */
  inset: 0;             /* Ocupa todos los lados del hero (top, right, bottom, left: 0) */
}

.hero__img {
  object-position: center 30%; /* Centra la imagen mostrando la parte superior (comida visible) */
}

.hero__overlay {
  position: absolute;    /* Se superpone sobre la imagen de fondo */
  inset: 0;              /* Cubre todo el área del .hero__bg */
  background: linear-gradient(
    to bottom,
    rgba(13,27,42,.15) 0%,    /* Casi transparente en la parte superior */
    rgba(13,27,42,.45) 40%,   /* Semi-oscuro en el centro */
    rgba(13,27,42,.90) 100%   /* Muy oscuro en la parte inferior donde está el texto */
  );
  /* El gradiente hace el texto legible sin perder la imagen */
}

.hero__content {
  position: relative;                               /* Se posiciona sobre el overlay */
  z-index: 1;                                       /* Por encima del fondo y el overlay */
  padding-inline: clamp(24px, 6vw, 80px);          /* Padding lateral que da margen al texto */
  max-width: 780px;                                 /* Limita el ancho del texto para legibilidad */
}

.hero__eyebrow {
  display: flex;                  /* Alinea línea y texto en la misma fila */
  align-items: center;            /* Centra verticalmente línea y texto */
  gap: 12px;                      /* Espacio entre la línea y el texto de la etiqueta */
  margin-bottom: 22px;            /* Espacio entre la etiqueta y el H1 */
  font-size: .72rem;              /* Tamaño pequeño para el supertítulo */
  font-weight: 500;               /* Peso medio para visibilidad */
  letter-spacing: .2em;           /* Espaciado generoso: típico de etiquetas en caps */
  text-transform: uppercase;      /* Texto en mayúsculas */
  color: var(--gold);             /* Color dorado para la etiqueta del hero */
}

.eyebrow-line {
  display: block;            /* Necesario para width y height */
  width: 32px;               /* Longitud de la línea decorativa */
  height: 1px;               /* Una sola línea delgada */
  background: var(--gold);   /* Misma color dorada que el texto */
}

.hero__title {
  font-family: var(--font-display);           /* Fuente display para el título más importante */
  font-size: clamp(2.8rem, 7.5vw, 5.5rem);   /* Tamaño muy fluido: enorme en desktop, grande en móvil */
  font-weight: 300;                           /* Peso ligero: la elegancia viene del tamaño y la fuente */
  line-height: 1.1;                           /* Interlineado muy ajustado para títulos enormes */
  color: var(--cream);                        /* Color crema sobre el fondo oscuro del hero */
  margin-bottom: 24px;                        /* Espacio entre el título y el subtexto */
  text-shadow: 
  0 0 8px rgba(7, 15, 26, 1),   /* Azul oscuro/negro puro bien concentrado */
  0 0 20px rgba(7, 15, 26, 0.9), /* Aura expansiva mediana */
  0 0 40px rgba(7, 15, 26, 0.8); /* Resplandor ambiental grande */
}

.hero__title em {
  font-style: italic;          /* Cursiva de Cormorant: muy elegante para acento visual */
  color: var(--gold-light);    /* Dorado claro para la palabra en cursiva del hero */
}

.hero__sub {
  font-size: clamp(.9rem, 2vw, 1.05rem);   /* Tamaño fluido del subtexto del hero */
  color: var(--cream-dim);                  /* Crema al 70%: visible pero no tan prominente como el H1 */
  max-width: 500px;                         /* Limita el ancho del subtexto para confort de lectura */
  margin-bottom: 36px;                      /* Espacio entre el subtexto y los botones */
  line-height: 1.7;                         /* Interlineado cómodo para el párrafo */
  text-shadow: 
  0 0 8px rgba(7, 15, 26, 1),   /* Azul oscuro/negro puro bien concentrado */
  0 0 20px rgba(7, 15, 26, 0.9), /* Aura expansiva mediana */
  0 0 40px rgba(7, 15, 26, 0.8); /* Resplandor ambiental grande */
}

.hero_exclusivas {
text-shadow: 
  0 0 6px rgba(198, 161, 74, 1),   /* Dorado intenso pegado a la letra */
  0 0 15px rgba(198, 161, 74, 0.6), /* Resplandor dorado mediano */
  0 0 30px rgba(198, 161, 74, 0.3); /* Brillo ambiental */
}

.hero__actions {
  display: flex;     /* Alinea los dos botones en la misma fila */
  flex-wrap: wrap;   /* Si no caben en una fila, se van a la siguiente (en pantallas muy pequeñas) */
  gap: 14px;         /* Espacio entre el botón dorado y el botón outline */
}

@keyframes scrollPulse {
  0%, 100% { opacity: .35; }   /* Inicio y final: semi-transparente */
  50%       { opacity: .85; }  /* Mitad de la animación: más visible */
  /* La animación crea un efecto de parpadeo lento que llama la atención */
}


/* ── SOBRE NOSOTROS ──────────────────────────────────────────
   Sección clara con imagen y texto lado a lado en desktop.
   En móvil se apilan verticalmente (imagen arriba, texto abajo).
   ─────────────────────────────────────────────────────────── */
.nosotros {
  background: var(--navy-dark); /* Fondo crema cálido para contrastar con secciones oscuras */
}

.nosotros__inner {
  display: grid;                              /* Layout de grid para imagen y texto */
  grid-template-columns: 1fr;                /* 1 columna en móvil: imagen y texto apilados */
  gap: clamp(36px, 6vw, 60px);               /* Espacio fluido entre imagen y texto */
  align-items: center;                        /* Centra verticalmente cuando están lado a lado */
}

.nosotros__img-wrap {
  position: relative;                   /* Necesario para posicionar el elemento decorativo */
  border-radius: var(--radius-lg);      /* Esquinas redondeadas grandes para la imagen */
  overflow: hidden;                     /* Recorta la imagen dentro del radio de borde */
  aspect-ratio: 4/3;                    /* Proporción fija 4:3 para la imagen */
}

.nosotros__img-deco {
  position: absolute;           /* Se superpone sobre la imagen */
  inset: 0;                     /* Cubre todo el área de la imagen */
  border-radius: var(--radius-lg); /* Mismo radio que el contenedor */
  border: 1px solid var(--gold-border); /* Borde dorado semi-transparente sobre la imagen */
  pointer-events: none;         /* No interfiere con eventos del mouse */
}

.nosotros__content .section-label {
  margin-top: 0; /* Elimina cualquier margen superior del label en la columna de texto */
}

.nosotros__content p {
  color: var(--cream);              /* Texto azul medio para párrafos sobre fondo claro */
  margin-bottom: 16px;                        /* Espacio entre párrafos */
  font-size: clamp(.9rem, 1.8vw, 1rem);      /* Tamaño fluido para el texto del cuerpo */
  line-height: 1.7;                           /* Interlineado cómodo para lectura */
  font-weight: 500; /* Le da un poquito más de cuerpo a los trazos de las letras */
  text-shadow: 
  0 0 8px rgba(7, 15, 26, 1),   /* Azul oscuro/negro puro bien concentrado */
  0 0 20px rgba(7, 15, 26, 0.9), /* Aura expansiva mediana */
  0 0 40px rgba(7, 15, 26, 0.8); /* Resplandor ambiental grande */ 
}

.nosotros__stats {
  display: flex;                              /* Alinea las tres estadísticas en fila */
  gap: clamp(24px, 5vw, 40px);               /* Espacio fluido entre estadísticas */
  margin-top: 32px;                           /* Espacio entre los párrafos y las estadísticas */
  padding-top: 28px;                          /* Padding encima de la línea divisoria */
  border-top: 1px solid var(--gold-border);   /* Línea dorada semi-transparente que separa stats del texto */
}

.stat__num {
  display: block;                         /* Necesario para que el número ocupe su propia línea */
  font-family: var(--font-display);       /* Fuente display para que el número sea elegante */
  font-size: clamp(1.6rem, 4vw, 2.2rem); /* Tamaño grande y fluido para el número */
  font-weight: 500;                       /* Peso medio: legible sin ser agresivo */
  color: var(--gold);                     /* Color dorado: el número es el elemento de acento */
  line-height: 1.1;                       /* Interlineado ajustado para el número grande */
}

.stat__label {
  display: block;               /* El label ocupa su propia línea debajo del número */
  font-size: .72rem;            /* Tamaño pequeño para la etiqueta de la estadística */
  color: var(--text-muted-light); /* Color gris muted para la etiqueta: no compite con el número */
  letter-spacing: .06em;        /* Espaciado de letras para legibilidad en tamaño pequeño */
  text-transform: uppercase;    /* Mayúsculas para las etiquetas de estadísticas */
  margin-top: 4px;              /* Pequeño espacio entre el número y su etiqueta */
}


/* ── EXPERIENCIAS GASTRONÓMICAS ──────────────────────────────
   Grid de cards de experiencias disponibles y próximas.
   Imagen + badge + título + descripción + enlace.
   ─────────────────────────────────────────────────────────── */
.experiencias__grid {
  display: grid;                         /* Layout de grid para las cards */
  grid-template-columns: 1fr;            /* 1 columna en móvil: cards apiladas */
  gap: 22px;                             /* Espacio entre cards del grid */
}

.exp-card {
  background: var(--navy-card);           /* Fondo azul profundo para la card */
  border-radius: var(--radius-md);        /* Esquinas redondeadas medianas */
  overflow: hidden;                       /* Recorta imagen y contenido dentro del radio */
  border: 1px solid var(--navy-border);   /* Borde azul sutil que separa la card del fondo */
  transition: transform .3s var(--ease-smooth), box-shadow .3s; /* Transición suave en hover */
}

.exp-card:hover {
  transform: translateY(-5px);     /* La card sube 5px en hover: efecto de elevación */
  box-shadow: var(--shadow-md);    /* Sombra más pronunciada en hover */
}

.exp-card__img-wrap {
  position: relative;   /* Necesario para posicionar el badge sobre la imagen */
  aspect-ratio: 16/9;   /* Proporción 16:9 para la imagen de la card */
  overflow: hidden;     /* El zoom de la imagen se recorta dentro del contenedor */
}

.exp-card__img {
  transition: transform .55s var(--ease-smooth); /* Transición suave para el zoom de hover */
}

.exp-card:hover .exp-card__img {
  transform: scale(1.05); /* La imagen se agranda un 5% en hover (zoom sutil) */
}

.exp-card__badge {
  position: absolute;              /* Se posiciona sobre la imagen */
  top: 14px;                       /* A 14px del borde superior de la imagen */
  right: 14px;                     /* A 14px del borde derecho de la imagen */
  padding: 5px 12px;               /* Padding interno del badge */
  background: var(--gold);         /* Fondo dorado sólido para el badge "Disponible" */
  color: var(--navy-deepest);      /* Texto oscuro sobre el badge dorado */
  font-size: .68rem;               /* Tamaño muy pequeño para el badge */
  font-weight: 600;                /* Peso semi-bold para legibilidad en tamaño pequeño */
  letter-spacing: .1em;            /* Espaciado de letras para el texto del badge */
  text-transform: uppercase;       /* Badge en mayúsculas */
  border-radius: 100px;            /* Border-radius máximo: forma de píldora */
}

.exp-card__badge--soon {
  background: rgba(255,255,255,.12);   /* Fondo vidrio/glass casi transparente */
  color: var(--cream-dim);             /* Texto crema tenue para el badge "Próximamente" */
  backdrop-filter: blur(6px);          /* Efecto de desenfoque de fondo del badge */
}

.exp-card--soon .exp-card__img {
  filter: saturate(.35); /* Desatura la imagen de la card "próximamente" al 35% */
}

.exp-card__body {
  padding: 22px; /* Padding interno del área de texto de la card */
}

.exp-card__title {
  font-family: var(--font-display);  /* Fuente display para el título de la card */
  font-size: 1.35rem;               /* Tamaño del título dentro de la card */
  font-weight: 500;                 /* Peso medio para el título de la card */
  color: var(--cream);              /* Color crema del título sobre fondo oscuro de la card */
  margin-bottom: 10px;              /* Espacio entre el título y la descripción */
}

.exp-card__desc {
  font-size: .88rem;              /* Tamaño pequeño para la descripción de la card */
  color: var(--cream-faint);      /* Crema muy tenue: descripción secundaria */
  line-height: 1.65;              /* Interlineado cómodo para las 2-3 líneas de descripción */
  margin-bottom: 18px;            /* Espacio entre la descripción y el enlace */
}

.exp-card__link {
  display: inline-block;          /* Permite padding y transformaciones al enlace */
  font-size: .8rem;               /* Tamaño pequeño del enlace "Ver Detalles →" */
  font-weight: 500;               /* Peso medio */
  letter-spacing: .1em;           /* Espaciado de letras */
  color: var(--gold);             /* Color dorado para el enlace de acción */
  text-transform: uppercase;      /* Mayúsculas para el enlace */
  transition: color .2s, letter-spacing .2s; /* Transición suave en hover */
}

.exp-card__link:hover {
  color: var(--gold-light);    /* El enlace se aclara en hover */
  letter-spacing: .16em;       /* El espaciado aumenta en hover: efecto de expansión */
}

.exp-card__link--disabled {
  color: var(--cream-faint) !important; /* Color muy tenue para el enlace deshabilitado */
  cursor: default;                       /* Cursor normal: no hay acción al hacer clic */
  pointer-events: none;                  /* Desactiva completamente la interacción */
  font-size: .8rem;                      /* Mismo tamaño que el enlace normal */
  font-weight: 500;                      /* Mismo peso que el enlace normal */
  letter-spacing: .1em;                  /* Mismo espaciado que el enlace normal */
  text-transform: uppercase;             /* Mayúsculas igual que el enlace normal */
}

/* 🍸 Enlace de marca ultra-intuitivo para dispositivos móviles y PC */
.card-brand-link {
  color: var(--gold);              /* Dorado insignia visible desde el inicio */
  font-weight: 500;                /* Resalta sutilmente en el bloque de texto */
  text-decoration: none;
  display: inline-block;
  position: relative;
  padding: 2px 0;                  /* Agranda discretamente el área táctil para el pulgar */
  transition: color 0.3s var(--ease-smooth);
}

/* 📱 Línea inferior permanente para móviles (Indica interactividad sin hover) */
.card-brand-link::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 5px;
  left: 0;
  background-color: var(--gold);
  opacity: 0.4;                    /* Línea sutil y elegante, no invasiva */
  transform: scaleX(1);
  transition: opacity 0.3s var(--ease-smooth), background-color 0.3s var(--ease-smooth);
}

/* ── TIPOS DE EVENTOS ────────────────────────────────────────
   Grid de tarjetas con ícono SVG + título + descripción.
   Estilo de tarjeta con borde dorado en hover.
   ─────────────────────────────────────────────────────────── */
.eventos__grid {
  display: grid;                         /* Layout de grid para los ítems de evento */
  grid-template-columns: 1fr 1fr;        /* 2 columnas en móvil */
  gap: 16px;                             /* Espacio entre tarjetas de tipo de evento */
}

.evento-item {
  padding: clamp(18px, 3.5vw, 28px);        /* Padding interno fluido */
  border-radius: var(--radius-md);           /* Esquinas redondeadas medianas */
  border: 1px solid rgba(240,232,213,.08);   /* Borde crema muy tenue sobre fondo oscuro */
  background: rgba(240,232,213,.04);         /* Fondo ligeramente más claro que la sección */
  transition: border-color .3s, transform .3s var(--ease-smooth), background .3s; /* Transiciones de hover */
  position: relative;                        /* Para el pseudo-elemento de fondo en hover */
  overflow: hidden;                          /* Recorta el pseudo-elemento dentro del borde */
}

.evento-item:hover {
  border-color: var(--gold-border);           /* El borde se vuelve dorado en hover */
  transform: translateY(-3px);               /* La tarjeta sube 3px en hover */
  background: var(--gold-dim);               /* El fondo toma un tinte dorado muy sutil */
}

.evento-item__icon {
  width: 42px;          /* Ancho del contenedor del ícono SVG */
  height: 42px;         /* Alto del contenedor del ícono SVG */
  color: var(--gold);   /* El ícono hereda este color (currentColor en el SVG) */
  margin-bottom: 14px;  /* Espacio entre el ícono y el título del evento */
}

.evento-item h3 {
  font-family: var(--font-display);   /* Fuente display para el nombre del tipo de evento */
  font-size: 1rem;                    /* Tamaño del nombre del tipo de evento */
  font-weight: 500;                   /* Peso medio */
  color: var(--cream);                /* Color crema sobre fondo oscuro */
  margin-bottom: 8px;                 /* Espacio entre el nombre y la descripción */
}

.evento-item p {
  font-size: .83rem;          /* Tamaño pequeño para la descripción del tipo de evento */
  color: var(--cream-faint);  /* Color crema tenue: descripción secundaria */
  line-height: 1.6;           /* Interlineado cómodo */
}


/* ── GALERÍA ─────────────────────────────────────────────────
   Grid fotográfico asimétrico.
   Algunas fotos son más altas o anchas para crear dinamismo.
   ─────────────────────────────────────────────────────────── */

.galeria {
  background-color: var(--navy-deepest);
  overflow: hidden;
  width: 100%;
}

/* El contenedor principal que limita el ancho máximo en PC igual que el código original (max-w-6xl) */
.marquee-container {
  position: relative;
  width: 100%;
  max-width: 1120px; /* Igual que tu max-w-6xl de Tailwind */
  margin-inline: auto;
  overflow: hidden;
  padding-block: 20px;
  display: flex;
}

/* La cinta interna con la animación matemática perfecta */
.marquee-inner {
  display: flex;
  width: max-content; /* Fuerza a que el ancho se adapte al contenido de las tarjetas */
  /* Duración calculada: 4 tarjetas * 2500ms = 10s para una velocidad fluida */
  animation: marqueeScroll 14s linear infinite; 
}

/* TRUCO DE PC: Reemplaza el state de React de detener la animación al pasar el mouse */
.marquee-container:hover .marquee-inner {
  animation-play-state: paused;
}

/* Las tarjetas individuales (Equivalente a w-56, h-[20rem] y mx-4) */
.marquee-card {
  width: 260px;          /* Un ancho intermedio elegante */
  height: 360px;         /* Proporción vertical tipo revista */
  margin-inline: 16px;   /* Separación equivalente al mx-4 */
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;        /* Evita que el navegador comprima las fotos en PC */
  transition: transform 0.3s var(--ease-smooth);
}

/* El efecto hover inverso que venía en tu componente: se encoge un poquito (scale-90) */
.marquee-card:hover {
  transform: scale(0.95); 
}

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

/* El overlay con efecto blur (backdrop-blur-md) escondido por defecto (opacity-0) */
.marquee-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35); /* Fondo oscuro suave */
  backdrop-filter: blur(8px);            /* El efecto blur premium */
  -webkit-backdrop-filter: blur(8px);    /* Compatibilidad para Safari */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 16px;
  opacity: 0;                            /* Escondido */
  transition: opacity 0.3s var(--ease-smooth);
}

/* Al pasar el mouse por encima de la tarjeta, el texto y el blur aparecen */
.marquee-card:hover .marquee-card-overlay {
  opacity: 1;
}

.marquee-card-overlay p {
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 0 6px rgba(198, 161, 74, 0.4);
}

/* ✅ NUEVO: Permite que JavaScript active el efecto en móviles mediante la clase .active */
.marquee-card.active {
  transform: scale(0.95);
}

.marquee-card.active .marquee-card-overlay {
  opacity: 1;
}

/* LOS DEGRADADOS LATERALES (Los difuminados transparentes de los extremos) */
.marquee-gradient {
  position: absolute;
  top: 0;
  height: 100%;
  width: 80px; /* Equivalente al w-20 de tu código */
  z-index: 10;
  pointer-events: none; /* Permite hacer hover a las fotos de abajo */
}

.marquee-gradient--left {
  left: 0;
  background: linear-gradient(to right, var(--navy-deepest), transparent);
}

.marquee-gradient--right {
  right: 0;
  background: linear-gradient(to left, var(--navy-deepest), transparent);
}

/* Nota inferior */
.galeria__note {
  text-align: center;
  margin-top: 32px;
  color: var(--cream-dim);
  font-size: 1.1rem;
}

/* ── LA ANIMACIÓN CON MATEMÁTICA PURA (Indestructible en PC) ── */
@keyframes marqueeScroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    /* Se mueve exactamente el 50% de la cinta. Como la segunda mitad es idéntica, 
       el bucle se reinicia de manera perfecta e infinita */
    transform: translateX(-50%);
  }
}


/* ── COTIZACIÓN ──────────────────────────────────────────────
   Sección de formulario: info a la izquierda, form a la derecha.
   En móvil se apilan verticalmente.
   ─────────────────────────────────────────────────────────── */
.cotizacion__inner {
  display: grid;                          /* Layout de grid para info y formulario */
  grid-template-columns: 1fr;            /* 1 columna en móvil: apilados */
  gap: clamp(40px, 7vw, 64px);           /* Espacio fluido entre columnas */
  align-items: start;                    /* Alinea ambas columnas desde arriba */
}

.cotizacion__info .section-title {
  margin-bottom: 16px; /* Espacio entre el título y el párrafo descripción */
}

.cotizacion__desc {
  color: var(--cream-dim);    /* Color crema al 70% para el párrafo descripción */
  margin-bottom: 28px;        /* Espacio entre la descripción y el botón de WhatsApp */
  font-size: .95rem;          /* Tamaño del párrafo descripción */
  line-height: 1.7;           /* Interlineado cómodo */
}

.cotizacion__wa-note {
  font-size: .78rem;         /* Tamaño muy pequeño para la nota bajo el botón WhatsApp */
  color: var(--cream-faint); /* Color crema casi transparente: nota secundaria */
  margin-top: 12px;          /* Espacio entre el botón y la nota */
}

.cotizacion__form {
  display: flex;                                /* Apila los grupos de campos verticalmente */
  flex-direction: column;                       /* Orientación vertical del formulario */
  gap: 16px;                                    /* Espacio entre grupos de campos */
  background: var(--navy-mid);                  /* Fondo azul marino para el formulario */
  border: 1px solid var(--gold-border);         /* Borde dorado semi-transparente alrededor del form */
  border-radius: var(--radius-lg);              /* Esquinas muy redondeadas para el formulario */
  padding: clamp(22px, 5vw, 38px);             /* Padding interno fluido del formulario */
}

.form-row {
  display: grid;                    /* Agrupa 2 campos en la misma fila */
  grid-template-columns: 1fr;       /* 1 columna en móvil: campos apilados */
  gap: 16px;                        /* Espacio entre campos de la misma fila */
}

.form-group {
  display: flex;          /* Apila label e input verticalmente */
  flex-direction: column; /* Orientación vertical */
  gap: 6px;               /* Pequeño espacio entre label e input */
}

.form-group label {
  font-size: .75rem;              /* Tamaño pequeño para las etiquetas del formulario */
  font-weight: 500;               /* Peso medio para las etiquetas */
  letter-spacing: .08em;          /* Espaciado de letras para etiquetas en caps */
  text-transform: uppercase;      /* Etiquetas en mayúsculas */
  color: var(--cream-dim);        /* Color crema al 70% para las etiquetas */
}

.optional {
  text-transform: none;    /* Cancela las mayúsculas para el texto "(opcional)" */
  letter-spacing: 0;       /* Cancela el espaciado extra para el texto "(opcional)" */
  font-weight: 400;        /* Peso normal para el texto "(opcional)" */
  color: var(--cream-faint); /* Color aún más tenue para "(opcional)" */
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;                          /* El campo ocupa todo el ancho de su contenedor */
  padding: 13px 16px;                   /* Padding interno: altura y anchura del campo */
  border: 1px solid rgba(240,232,213,.15); /* Borde crema muy tenue por defecto */
  border-radius: var(--radius-sm);      /* Esquinas redondeadas de 8px */
  background: rgba(13,27,42,.5);        /* Fondo oscuro semi-transparente para los campos */
  color: var(--cream);                  /* Color del texto que escribe el usuario */
  font-size: .95rem;                    /* Tamaño del texto en los campos */
  outline: none;                        /* Elimina el outline azul nativo del navegador */
  transition: border-color .2s, box-shadow .2s; /* Transición suave al enfocar el campo */
  -webkit-appearance: none;             /* Elimina estilos nativos de iOS/Safari */
  appearance: none;                     /* Elimina estilos nativos del navegador */
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--cream-faint); /* Color del placeholder: crema muy tenue */
}

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239AABBD' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  /* Flecha personalizada para el select: reemplaza la flecha nativa del navegador */
  background-repeat: no-repeat;          /* La flecha no se repite */
  background-position: right 14px center; /* Posiciona la flecha a la derecha centrada */
  padding-right: 40px;                   /* Espacio para que el texto no se superponga con la flecha */
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold);           /* El borde se vuelve dorado al enfocar el campo */
  box-shadow: 0 0 0 3px var(--gold-dim); /* Sombra de foco dorada sutil alrededor del campo */
}

.form-group textarea {
  resize: vertical;      /* El usuario solo puede redimensionar el textarea verticalmente */
  min-height: 88px;      /* Altura mínima del textarea para que sea usable */
}

.form-disclaimer {
  font-size: .74rem;          /* Tamaño muy pequeño para el texto legal */
  color: var(--cream-faint);  /* Color crema casi transparente: es un detalle, no protagonista */
  text-align: center;         /* Centra el texto de disclaimer */
  margin-top: -4px;           /* Acerca ligeramente el disclaimer al botón de envío */
}

/* ============================================================
   BLOQUE DE CONTACTO CENTRADO (INTEGRADO EN COTIZAR)
   ============================================================ */

.contacto__block--cotizar {
  width: 100%;
  margin-top: 48px;        /* Espacio elegante entre el formulario y los datos */
  padding-top: 32px;       /* Margen interno superior antes de los datos */
  border-top: 1px solid rgba(198, 161, 74, 0.15); /* Línea dorada ultra sutil para separar */
}

.contacto__list {
  display: flex;
  flex-direction: column;  /* Por defecto en móvil: fila tras fila */
  align-items: center;     /* Centra la lista verticalmente en móviles */
  justify-content: center; /* Centra horizontalmente todo el bloque */
  gap: 20px;               /* Un poco más de espacio entre ítems */
  padding: 0;
  list-style: none;
}

.contacto__list-item {
  display: flex;
  align-items: center;     /* Centra el icono geométricamente con el texto */
  justify-content: center; /* Asegura el centrado completo del grupo en móviles */
  gap: 10px;               /* Distancia perfecta entre icono y texto */
}

.contacto__icon {
  width: 18px;
  height: 18px;
  color: var(--gold);
  flex-shrink: 0;
}

.contacto__list a,
.contacto__list span,
.contacto__list li {
  font-size: 1rem;          /* Un tamaño ligeramente más legible */
  color: var(--cream-dim);
  font-family: var(--font-sans); /* Tu fuente secundaria para textos descriptivos */
  line-height: 1;
  transition: color .2s var(--ease-smooth);
}

.contacto__list a:hover {
  color: var(--gold-light);
}

/* ── Redes Sociales Flotantes ── */
.contacto__socials {
  display: flex;
  justify-content: center; /* Los centra perfectamente en el eje horizontal */
  align-items: center;
  gap: 24px;               /* Separación elegante entre los dos iconos */
  margin-top: 32px;        /* Espacio prudente entre los datos y las redes */
}

.contacto__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream-dim); /* Empiezan en un tono crema discreto para no competir visualmente */
  transition: transform 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth);
}

.contacto__social-link svg {
  width: 22px;             /* Un tamaño ligeramente mayor al de los datos para que sean clickeables */
  height: 22px;
}

/* ✨ Efecto hover premium para PC y dispositivos táctiles activos */
.contacto__social-link:hover {
  color: var(--gold-light); /* Cambian al dorado brillante de la marca */
  transform: translateY(-3px); /* Pequeño brinco flotante hacia arriba de 3px */
}


/* ── FOOTER ──────────────────────────────────────────────────
   Pie de página minimalista con logo, tagline y copyright.
   ─────────────────────────────────────────────────────────── */
.footer {
  background: #070f1a;     /* Negro casi puro: más oscuro que navy-deepest para el cierre de página */
  padding-block: clamp(28px, 5vw, 44px); /* Padding vertical fluido del footer */
}

.footer__inner {
  display: flex;             /* Apila los elementos del footer en columna */
  flex-direction: column;    /* Orientación vertical */
  align-items: center;       /* Centra horizontalmente todos los elementos */
  gap: 16px;                 /* Espacio entre cada elemento del footer */
  text-align: center;        /* Centra el texto de todos los elementos */
}

.footer__logo {
  display: flex;        /* Alinea monograma y nombre en fila */
  align-items: center;  /* Centra verticalmente */
  gap: 10px;            /* Espacio entre el monograma y el nombre */
}

.logo__footer{
  width: 80px; /* Ancho fijo */
  height: auto; /* Mantiene la proporción original para no deformarla */
}

.footer__logo .logo-text {
  color: var(--cream-dim); /* El nombre de la marca en el footer usa crema al 70% */
}

.footer__tagline {
  font-size: .82rem;          /* Tamaño pequeño para el texto de copyright */
  color: var(--cream-faint);  /* Color crema muy tenue: texto secundario del footer */
}

.footer__links {
  display: flex;    /* Alinea los links legales en fila */
  gap: 24px;        /* Espacio entre links legales */
  flex-wrap: wrap;  /* Permiten pasar a siguiente línea en pantallas muy pequeñas */
  justify-content: center; /* Centra los links en la fila */
}

.footer__links a {
  font-size: .78rem;              /* Tamaño muy pequeño para los links legales */
  color: var(--slate-dim);        /* Color gris azulado tenue para los links legales */
  transition: color .2s;          /* Transición suave del color en hover */
}

.footer__links a:hover {
  color: var(--gold-light); /* Los links legales se vuelven dorados en hover */
}


/* ── BOTÓN FLOTANTE WHATSAPP ─────────────────────────────────
   Botón verde fijo siempre visible en la esquina inferior derecha.
   ─────────────────────────────────────────────────────────── */
.wa-float {
  position: fixed;                               /* Fijo en la pantalla: siempre visible */
  bottom: 24px;                                  /* A 24px del borde inferior de la pantalla */
  right: 20px;                                   /* A 20px del borde derecho de la pantalla */
  width: 52px;                                   /* Ancho del botón circular */
  height: 52px;                                  /* Alto del botón circular */
  background: #C9A84C;                           /* Verde oficial de WhatsApp */
  border-radius: 50%;                            /* Forma perfectamente circular */
  display: grid;                                 /* Centra el SVG dentro del círculo */
  place-items: center;                           /* Centra perfectamente en ambos ejes */
  box-shadow: 0 4px 20px var(--gold);  /* Sombra verde que resalta el botón */
  z-index: 90;                                   /* Por encima del contenido pero debajo de la nav */
  transition: transform .25s var(--ease-spring), box-shadow .25s; /* Animación con rebote en hover */
}

.wa-float svg {
  width: 26px;   /* Tamaño del ícono SVG de WhatsApp */
  height: 26px;  /* Alto del ícono SVG */
  color: #fff;   /* El ícono hereda el color blanco */
  fill: #fff;    /* El fill también es blanco (necesario porque este SVG usa fill) */
}

.wa-float:hover {
  transform: scale(1.12);                        /* El botón se agranda un 12% en hover */
  box-shadow: 0 6px 28px var(--gold);   /* La sombra se intensifica en hover */
}


/* ── ANIMACIONES DE REVEAL ───────────────────────────────────
   Elementos que se revelan suavemente al entrar al viewport.
   JS agrega la clase .visible cuando el elemento es visible.
   ─────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;                                               /* El elemento empieza invisible */
  transform: translateY(28px);                              /* Empieza 28px más abajo */
  transition: opacity .7s var(--ease-smooth), transform .7s var(--ease-smooth); /* Transición suave */
}

.reveal.visible {
  opacity: 1;          /* El elemento se vuelve completamente visible */
  transform: none;     /* El elemento vuelve a su posición original */
}

/* Clases de delay para escalonar las animaciones en grids */
.reveal-delay-1 { transition-delay: .1s; }  /* Se revela 100ms después */
.reveal-delay-2 { transition-delay: .2s; }  /* Se revela 200ms después */
.reveal-delay-3 { transition-delay: .3s; }  /* Se revela 300ms después */
.reveal-delay-4 { transition-delay: .4s; }  /* Se revela 400ms después */


/* ── TOAST / NOTIFICACIÓN ────────────────────────────────────
   Pequeña notificación temporal que aparece al enviar el formulario.
   ─────────────────────────────────────────────────────────── */
.toast {
  position: fixed;                    /* Fijo en la pantalla */
  bottom: 90px;                       /* Por encima del botón flotante de WhatsApp */
  left: 50%;                          /* Empieza en el centro horizontal */
  transform: translateX(-50%) translateY(20px); /* Centrado y ligeramente abajo por defecto */
  background: var(--navy-dark);       /* Fondo azul marino del toast */
  color: var(--cream);                /* Texto crema del toast */
  border: 1px solid var(--gold);      /* Borde dorado del toast */
  border-radius: var(--radius-sm);    /* Esquinas redondeadas del toast */
  padding: 14px 28px;                 /* Padding interno del toast */
  font-size: .88rem;                  /* Tamaño del texto del toast */
  z-index: 200;                       /* Por encima de todo */
  opacity: 0;                         /* Invisible por defecto */
  transition: opacity .3s, transform .3s; /* Transición suave de aparición */
  pointer-events: none;               /* No interactivo: solo informativo */
  white-space: nowrap;                /* El texto del toast no se parte en líneas */
}

.toast.show {
  opacity: 1;                         /* El toast se vuelve visible */
  transform: translateX(-50%) translateY(0); /* El toast sube a su posición final */
}


/* ════════════════════════════════════════════════════════════
   BREAKPOINTS — TABLET (≥ 640px)
   Mobile first: a partir de aquí se agregan columnas y ajustes
   para pantallas más anchas que 640px.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {

  .form-row {
    grid-template-columns: 1fr 1fr; /* 2 campos por fila en tablet: más eficiente visualmente */
  }

  .experiencias__grid {
    grid-template-columns: 1fr 1fr; /* 2 cards por fila en tablet */
  }

  .experiencias__grid .exp-card:last-child {
    grid-column: span 2;     /* La tercera card "próximamente" ocupa 2 columnas */
    max-width: 480px;        /* Limita el ancho para que no se vea demasiado ancha */
    margin-inline: auto;     /* La centra horizontalmente dentro de las 2 columnas */
    width: 100%;             /* Ocupa el ancho máximo disponible */
  }

}


/* ════════════════════════════════════════════════════════════
   BREAKPOINTS — DESKTOP (≥ 900px)
   A partir de 900px el layout se expande a su versión completa.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {

  /* Ocultar hamburguesa y mostrar links horizontalmente */
  .nav__toggle {
    display: none; /* El botón hamburguesa desaparece en desktop */
  }

  .nav__links {
    position: static;          /* Los links vuelven al flujo normal del documento */
    flex-direction: row;       /* Los links se muestran en fila horizontal */
    background: transparent;   /* Sin fondo: la nav ya tiene su propio fondo */
    opacity: 1;                /* Siempre visible en desktop */
    pointer-events: all;       /* Siempre interactivo en desktop */
    gap: 0;                    /* Sin espacio entre los items de la lista */
  }

  .nav__links a {
    font-family: var(--font-body);     /* Fuente sans para los links en desktop */
    font-size: .88rem;                 /* Tamaño normal de los links de nav en desktop */
    font-weight: 400;                  /* Peso normal */
    letter-spacing: .04em;             /* Espaciado sutil */
    color: rgba(240,232,213,.8);       /* Crema al 80% sobre el fondo de la nav */
    padding: 8px 18px;                 /* Padding que define el área de clic de cada link */
  }

  .nav__links a:hover {
    color: var(--gold); /* Links se vuelven dorados en hover en desktop */
  }

  .nav__cta {
    font-size: .82rem !important; /* Tamaño ligeramente menor para el CTA de la nav */
    padding: 10px 22px !important; /* Padding más ajustado para el botón CTA */
  }

  /* Nosotros: imagen y texto lado a lado */
  .nosotros__inner {
    grid-template-columns: 1fr 1fr; /* 2 columnas iguales: imagen a la izquierda, texto a la derecha */
  }

  /* Experiencias: 3 cards en fila */
  .experiencias__grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales para las 3 experiencias */
  }

  .experiencias__grid .exp-card:last-child {
    grid-column: span 1;  /* La tercera card vuelve a ocupar 1 columna normal */
    max-width: none;      /* Sin límite de ancho */
    margin-inline: 0;     /* Sin margen automático */
  }

  .card-brand-link::after {
    opacity: 0.3;                  /* Más tenue en PC para mantener el minimalismo */
    transform: scaleX(0.95);       /* Un toque más corto */
  }
  
  .card-brand-link:hover {
    color: var(--gold-light);      /* Destello dorado al pasar el mouse */
  }

  .card-brand-link:hover::after {
    opacity: 1;
    transform: scaleX(1);
    background-color: var(--gold-light); /* La línea se ilumina junto al texto */
  }

  /* Eventos: 5 tipos en una sola fila */
  .eventos__grid {
    grid-template-columns: repeat(5, 1fr); /* 5 columnas: una para cada tipo de evento */
  }

  /* Cotización: info izquierda, formulario derecha */
  .cotizacion__inner {
    grid-template-columns: 1fr 1.45fr; /* Columna derecha (formulario) más ancha */
  }

   .contacto__list {
    flex-direction: row;   /* Cambia a línea horizontal */
    gap: 40px;             /* Separación amplia y elegante entre los 3 datos */
  }
}