/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Focus visible — accesibilidad teclado ── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

:root {
  /* ── Paleta costera Voces Travels ── */
  --deep:         #1b3729;   /* teal profundo — hero, secciones oscuras    */
  --deep-mid:     #2c685d;   /* teal medio                                  */
  --deep-light:   #3d8577;   /* teal claro                                  */
  --coastal:      #8fbfae;   /* celeste — italic highlights, acentos claros */

  --gold:         #d05d3e;   /* dorado suave — CTA, eyebrows, underlines    */
  --gold-light:   #e0835f;   /* dorado claro — hover                        */
  --gold-dark:    #a8432a;   /* dorado oscuro — glow / shadow               */

  --sand:         #f2e6d5;   /* arena cálida — fondos claros                */
  --sand-mid:     #e3d0b8;   /* arena media — bordes, separadores           */
  --cream:        #faf6ee;   /* crema — fondos alternos                     */

  --white:        #ffffff;
  --text:         rgba(255,255,255,0.92);  /* sobre teal oscuro             */
  --text-muted:   rgba(255,255,255,0.55);  /* secundario sobre oscuro       */
  --text-dark:    #1c2e27;                 /* sobre fondos claros           */
  --text-mid:     #5a746c;                 /* muted sobre fondo claro       */

  /* ── Superficies vidrio ── */
  --surface:       rgba(255,255,255,0.08);
  --surface-hover: rgba(255,255,255,0.14);

  /* ── Resplandores ── */
  --glow-gold:    0 0 30px rgba(208,93,62,0.30);
  --glow-coastal: 0 0 30px rgba(143,191,174,0.25);

  /* ── Acento rojo de marca (aventura / símbolo del infinito) ── */
  --red:       #A01E2B;
  --red-light: #C4283A;
  --red-dark:  #7A1520;

  /* ── Café — acento oscuro para el footer (en vez de más verde) ── */
  --coffee:       #4a3225;
  --coffee-mid:   #6b4a36;
  --coffee-light: #8a6650;

  /* ── Aliases de migración (se reemplazarán fase a fase) ── */
  --dark:        var(--deep);
  --dark2:       var(--deep-mid);
  --dark3:       var(--deep-light);
  --dark4:       #3a8fa5;
  --gold-mid:    var(--gold);
  --gold-text:   var(--gold);
  --gold-darker: var(--gold-dark);
  --bronze:      #8b7040;
  --bronze-dark: #6b5030;

  /* ── Z-index scale ── */
  --z-behind:         -1;
  --z-tooltip:        50;
  --z-nav:           100;
  --z-panel-overlay: 200;
  --z-panel:         201;
  --z-float:         999;
  --z-modal:        9000;
  --z-lightbox:     9999;
  --z-grain:       10001;

  /* ── Radios y transiciones ── */
  --radius:     16px;
  --transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Timing de animaciones ── */
  --duration-fast:   200ms;
  --duration-base:   400ms;
  --duration-slow:   700ms;
  --duration-reveal: 700ms;
  --duration-hover:  220ms;
  --ease-out:        cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:     cubic-bezier(0.77, 0, 0.175, 1);
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer:     cubic-bezier(0.32, 0.72, 0, 1);

  /* ── Contenedores ── */
  --max-w:            1280px;
  --max-w-sm:         860px;
  --section-pad-y:    clamp(4rem, 8vw, 7rem);
  --section-pad-x:    clamp(1.5rem, 5vw, 3rem);

  /* ── Escala tipográfica ── */
  --type-display:  clamp(3rem, 6vw, 6rem);
  --type-h1:       clamp(2.2rem, 4vw, 3.6rem);
  --type-h2:       clamp(1.6rem, 2.5vw, 2.4rem);
  --type-h3:       1.1rem;
  --type-eyebrow:  0.72rem;
  --type-body:     1rem;
  --type-body-sm:  0.875rem;
  --type-ui:       0.9rem;

  /* ── Letra y prosa ── */
  --ls-eyebrow: 0.30em;
  --ls-h1:      -0.02em;
  --ls-ui:      0.06em;
  --lh-body:    1.65;
  --max-prose:  68ch;
}

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

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  background: var(--sand);
  color: var(--text-dark);
  overflow-x: hidden;
}

/* ── Trust badge hero ── */
.hero-trust-badge {
  font-family: 'Montserrat', sans-serif;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.78);
  background: rgba(208,93,62,0.10);
  border: 1px solid rgba(208,93,62,0.22);
  border-radius: 50px;
  padding: 0.38rem 1.2rem;
  margin-bottom: 1.1rem;
  text-transform: uppercase;
}

/* ── Teléfono hero ── */
.hero-phone {
  font-family: 'Montserrat', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--gold);
  background: rgba(208,93,62,0.12);
  border: 1px solid rgba(208,93,62,0.28);
  border-radius: 50px;
  padding: 0.55rem 1.4rem;
  margin-bottom: 1.8rem;
  letter-spacing: 0.06em;
}

.hero-phone-link {
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.hero-phone-link:hover {
  text-decoration: underline;
  color: var(--gold-light);
}

/* ── Footer phone ── */
.footer-phone {
  font-size: 0.95rem;
  color: var(--gold-text);
  font-weight: 600;
  margin-top: 0.4rem;
}

/* ── Bandera de país (imagen real — los emoji de bandera no se ven
   bien en Windows, que muestra el código de 2 letras en su lugar) ── */
.flag-icon {
  display: inline-block;
  width: 22px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(27,55,41,0.14);
  vertical-align: middle;
}

/* ===== BARRA SUPERIOR — teléfono / correo ===== */
.fixed-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
}

.topbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 0.45rem 2.5rem;
  background: var(--deep);
}

.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.85);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.topbar-item svg { flex-shrink: 0; opacity: 0.85; }
@media (hover: hover) and (pointer: fine) {
  .topbar-item:hover { color: var(--gold); }
}

@media (max-width: 768px) {
  .topbar { display: none; }
}

/* ===== NAVBAR ===== */
.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 2.5rem;
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(27,55,41,0.08);
  box-shadow: none;
  gap: 0.5rem;
  transition:
    background    var(--duration-base) var(--ease-out),
    border-color  var(--duration-base) var(--ease-out),
    box-shadow    var(--duration-base) var(--ease-out),
    padding       var(--duration-base) var(--ease-out);
}

/* Estado anclado — se activa al hacer scroll >40px */
.navbar--scrolled {
  background: rgba(255,255,255,0.98);
  border-bottom-color: rgba(27,55,41,0.10);
  box-shadow: 0 4px 30px rgba(27,55,41,0.08);
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.logo { display: flex; align-items: center; gap: 0.6rem; }

/* ── Wordmark de marca — texto real (Poppins), no imagen ── */
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.brand-mark-icon { flex-shrink: 0; }
.brand-mark-text {
  font-family: 'Quicksand', sans-serif;
  line-height: 1;
  white-space: nowrap;
}
.brand-mark-text strong {
  font-weight: 800;
  color: var(--deep);
  letter-spacing: 0.01em;
}
.brand-mark-text em {
  font-style: normal;
  font-weight: 500;
  color: var(--gold-dark);
  letter-spacing: 0.14em;
  margin-left: 0.3em;
}

/* Variante clara — sobre fondos oscuros (hero, footer, loader) */
.brand-mark--light .brand-mark-text strong { color: var(--cream); }
.brand-mark--light .brand-mark-text em      { color: var(--gold); }

/* Tamaños por contexto */
.brand-mark--nav .brand-mark-icon { width: 26px; height: 26px; }
.brand-mark--nav .brand-mark-text { font-size: 1.05rem; }

.brand-mark--footer .brand-mark-icon { width: 30px; height: 30px; }
.brand-mark--footer .brand-mark-text { font-size: 1.2rem; }

.brand-mark--loader { flex-direction: column; gap: 0.7rem; }
.brand-mark--loader .brand-mark-icon { width: 44px; height: 44px; }
.brand-mark--loader .brand-mark-text { font-size: 1.3rem; }

.nav-links { display: flex; gap: 1.6rem; list-style: none; }
.nav-links a {
  font-family: 'Montserrat', sans-serif;
  color: var(--deep);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.2s;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.2s;
}
.nav-links a:hover { color: var(--gold-dark); }
.nav-links a:hover::after { transform: scaleX(1); }

/* ── Submenú "¿Qué viaje buscas?" ── */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Montserrat', sans-serif;
  color: var(--deep);
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s;
}
.nav-dropdown-toggle:hover { color: var(--gold-dark); }
.nav-dropdown-arrow { transition: transform var(--duration-hover) var(--ease-out); flex-shrink: 0; }
.nav-dropdown--open .nav-dropdown-arrow { transform: rotate(180deg); }

.nav-dropdown-menu {
  list-style: none;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 210px;
  background: var(--white);
  border: 1px solid rgba(27,55,41,0.08);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(27,55,41,0.16);
  padding: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}
.nav-dropdown--open .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu li + li { margin-top: 0.15rem; }
.nav-dropdown-menu a {
  display: block;
  padding: 0.65rem 0.9rem;
  border-radius: 6px;
  font-family: 'Montserrat', sans-serif;
  color: var(--deep);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  transition: background var(--duration-hover) var(--ease-out), color var(--duration-hover) var(--ease-out);
}
.nav-dropdown-menu a:hover { background: rgba(208,93,62,0.10); color: var(--gold-dark); }
.nav-dropdown-menu a::after { display: none; }

/* CTA dorado — el único acento de color en el menú */
.nav-cta {
  background: var(--gold) !important;
  color: var(--deep) !important;
  padding: 0.55rem 1.35rem !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 14px rgba(208,93,62,0.32);
  transition: background var(--duration-hover) var(--ease-out), transform var(--duration-hover) var(--ease-out), box-shadow var(--duration-hover) var(--ease-out) !important;
  animation: navCtaPulse 2.6s ease-in-out infinite;
}
.nav-cta::after { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover {
    background: var(--gold-dark) !important;
    color: var(--cream) !important;
    box-shadow: 0 6px 20px rgba(208,93,62,0.45);
    animation-play-state: paused;
  }
}
.nav-cta:active { transform: scale(0.96); }

@keyframes navCtaPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(208,93,62,0.32); transform: scale(1); }
  50%      { box-shadow: 0 6px 22px rgba(208,93,62,0.55); transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-cta { animation: none; }
}

/* LANG SWITCHER */
.lang-switcher {
  display: flex;
  gap: 0.3rem;
  background: rgba(27,55,41,0.05);
  border: 1px solid rgba(27,55,41,0.10);
  border-radius: 50px;
  padding: 0.25rem;
}

.lang-btn {
  padding: 0.35rem 0.8rem;
  border: none;
  border-radius: 50px;
  background: transparent;
  color: var(--text-mid);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast);
  font-family: 'Montserrat', sans-serif;
}

.lang-btn:hover { color: var(--deep); background: rgba(27,55,41,0.08); }
.lang-btn.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--deep);
  box-shadow: 0 2px 12px rgba(208,93,62,0.35);
}

/* ===== FONDOS DE SECCIÓN — única fuente de verdad =====
   Blanco (--white) / Crema (--cream) / Arena (--sand), rotando para
   que nunca queden dos secciones seguidas del mismo tono. Algunas
   secciones tienen tarjetas BLANCAS propias (tipos, packages,
   graduacion, programas) — esas van sobre crema o arena, nunca
   blanco, para que la tarjeta siga contrastando con el fondo.
   El hero y el video-showcase manejan su propio fondo oscuro
   (necesario para el texto blanco encima de foto/video).
   Esta es la ÚNICA declaración de background para estos IDs — no
   la dupliques en el CSS propio de cada sección. */
#intro             { background: transparent !important; }
#globe-section     { background: var(--white)    !important; }
#destinations      { background: var(--cream)    !important; }
#tipos             { background: var(--sand)     !important; }
#graduacion        { background: var(--sand)     !important; }
#packages          { background: var(--cream)    !important; }
#discounts         { background: var(--cream)    !important; }

/* ── Vista Aventura — pestaña independiente ── */
#aventura {
  display: none;
}

/* Cuando el tab está activo: aventura visible, resto oculto */
body.aventura-active #aventura {
  display: block;
  background: var(--cream);
  min-height: 100vh;
}
body.aventura-active #app        { display: none; }
body.aventura-active footer      { display: none; }
body.aventura-active #newsletter { display: none; }

/* ── Vista Beneficios/Ofertas — pestaña independiente ── */
#beneficios { display: none; }
body.beneficios-active #beneficios  { display: block; min-height: 100vh; }
body.beneficios-active #app         { display: none; }
body.beneficios-active footer       { display: none; }
body.beneficios-active #newsletter  { display: none; }

#programas-especiales { background: var(--sand) !important; }
#about                { background: var(--cream)     !important; }
#redes                { background: var(--sand)     !important; }
#contact              { background: var(--white)     !important; }
#newsletter           { background: var(--sand)     !important; }

/* ===== SECTION COMMONS ===== */
.section-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold) !important;
  display: block;
  margin-bottom: 0.8rem;
}

.section-eyebrow::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0.6rem auto 0;
  opacity: 0.65;
}

.section-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  margin-top: 0.5rem;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  /* Color se define en cada sección: --text-mid sobre claros, --text-muted sobre oscuros */
  color: var(--text-mid);
}

.section-header { text-align: center; margin-bottom: 3.5rem; }

/* ===== PAGE LOADER ===== */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--deep);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}
#page-loader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.brand-mark--loader {
  filter: drop-shadow(0 0 22px rgba(208,93,62,0.35));
  animation: loaderPulse 2s ease-in-out infinite;
}
@keyframes loaderPulse {
  0%, 100% { opacity: 0.60; transform: scale(0.96); }
  50%       { opacity: 1;    transform: scale(1);    }
}
.loader-track {
  width: 160px;
  height: 1px;
  background: rgba(143,191,174,0.18);
  border-radius: 2px;
  overflow: hidden;
}
.loader-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  border-radius: 2px;
  animation: loaderFill 1.5s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes loaderFill {
  from { width: 0%;    opacity: 1; }
  90%  { width: 100%;  opacity: 1; }
  to   { width: 100%;  opacity: 0.4; }
}
.loader-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(143,191,174,0.42);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scrollDown {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(14px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(208,93,62,0.25); }
  50%       { box-shadow: 0 0 35px rgba(208,93,62,0.55); }
}

/* ===== FOOTER ===== */
footer {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(138,102,80,0.10) 0%, transparent 55%),
    var(--coffee);
  border-top: 1px solid rgba(208,93,62, 0.22);
  padding: 0 0 2rem;
  position: relative;
}

/* ── Banda CTA pre-footer ── */
.footer-cta-band {
  background: linear-gradient(135deg,
    rgba(107,74,54, 0.90) 0%,
    rgba(74,50,37, 0.98) 100%
  );
  border-bottom: 1px solid rgba(138,102,80, 0.20);
  padding: 2.8rem 3rem;
}
.footer-cta-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-cta-text h3 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--white);
  margin-bottom: 0.3rem;
}
.footer-cta-text p { color: var(--text-muted); font-size: 0.95rem; }
.footer-cta-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.8rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.footer-cta-btn--primary {
  background: linear-gradient(
    110deg,
    var(--gold-dark)  0%,
    var(--gold)       30%,
    var(--gold-light) 50%,
    var(--gold)       70%,
    var(--gold-dark)  100%
  );
  background-size: 200% auto;
  color: var(--deep);
  box-shadow: 0 4px 20px rgba(208,93,62, 0.28);
  animation: shimmer 3.5s linear infinite;
}
.footer-cta-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(208,93,62, 0.50);
  animation-play-state: paused;
}
.footer-cta-btn--wsp {
  background: #25D366;
  color: #fff;
  box-shadow: 0 4px 20px rgba(37,211,102,0.3);
}
.footer-cta-btn--wsp:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(37,211,102,0.45);
}

/* ── Cuerpo footer ── */
.footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding: 3.5rem 3rem 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.footer-brand { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-tagline { color: var(--gold-text) !important; font-weight: 600; font-size: 0.85rem; }
.footer-brand-desc { color: var(--text-muted); font-size: 0.83rem; line-height: 1.6; margin-top: 0.3rem; }

/* Redes sociales */
.footer-social { display: flex; gap: 0.6rem; margin-top: 0.8rem; flex-wrap: wrap; }
.footer-social-link {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text-muted);
  text-decoration: none;
  transition:
    transform    var(--duration-fast) var(--ease-out),
    background   var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color        var(--duration-fast) var(--ease-out),
    box-shadow   var(--duration-fast) var(--ease-out);
}
.footer-social-link:hover { transform: translateY(-3px) scale(1.08); }
.footer-social-yt:hover  { background: #FF0000; border-color: #FF0000; color: #fff; }
.footer-social-ig:hover  { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: #e6683c; color: #fff; }
.footer-social-tt:hover  { background: #000; border-color: #69C9D0; color: #fff; }
.footer-social-fb:hover  { background: #1877F2; border-color: #1877F2; color: #fff; }
.footer-social-li:hover  { background: #0A66C2; border-color: #0A66C2; color: #fff; }

/* Columnas de links */
.footer-links h4, .footer-services h4, .footer-contact-col h4, .footer-nav h4 {
  font-family: 'Montserrat', sans-serif;
  color: var(--coastal); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 1.2rem;
}

.footer-links ul, .footer-services ul, .footer-nav ul {
  list-style: none; display: flex; flex-direction: column; gap: 0.55rem;
}

.footer-links a, .footer-services a, .footer-nav a {
  color: var(--text-muted); text-decoration: none; font-size: 0.875rem; transition: color 0.2s;
}
.footer-links a:hover, .footer-services a:hover, .footer-nav a:hover { color: var(--gold-text) !important; }

/* Lista destinos dos columnas */
.footer-dest-list {
  list-style: none !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.45rem 1rem !important;
  flex-direction: unset !important;
}
.footer-dest-list a {
  color: var(--text-muted); text-decoration: none; font-size: 0.82rem; transition: color 0.2s;
  white-space: nowrap;
}
.footer-dest-list a:hover { color: var(--gold-text) !important; }

/* Columna contacto */
.footer-contact-list { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.875rem; }
.footer-contact-icon { font-size: 1rem; flex-shrink: 0; margin-top: 0.05rem; }
.footer-contact-list a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.footer-contact-list a:hover { color: var(--gold-text) !important; }
.footer-contact-list span { color: var(--text-muted); }

.footer-bottom {
  max-width: 1100px; margin: 0 auto;
  text-align: center; color: var(--text-muted); font-size: 0.8rem;
  padding: 1.5rem 3rem 0;
}
.footer-bottom-made { margin-top: 0.4rem; }
.footer-bottom-made a { color: var(--gold-text); text-decoration: none; }

.footer-legal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 0.2rem;
  background: none;
  border: none;
  padding: 0 0.4rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .footer-legal-link:hover { color: var(--gold); }
}

/* ── Aviso de cookies / privacidad ── */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-modal);
  background: var(--white);
  border-top: 1px solid rgba(27,55,41,0.12);
  box-shadow: 0 -8px 30px rgba(27,55,41,0.12);
  padding: 1.4rem 2rem;
}
.cookie-banner.hidden { display: none; }

.cookie-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.cookie-banner-text h3 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-dark);
  margin-bottom: 0.35rem;
}
.cookie-banner-text p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  color: var(--text-mid);
  line-height: 1.5;
  max-width: 640px;
}

.cookie-banner-actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.cookie-btn {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.7rem 1.3rem;
  border-radius: 50px;
  cursor: pointer;
  min-height: 44px;
  transition:
    background  var(--duration-hover) var(--ease-out),
    color       var(--duration-hover) var(--ease-out),
    transform   var(--duration-hover) var(--ease-out);
}
.cookie-btn--outline {
  background: transparent;
  border: 1.5px solid var(--deep);
  color: var(--deep);
}
.cookie-btn--solid {
  background: var(--deep);
  border: 1.5px solid var(--deep);
  color: var(--white);
}
@media (hover: hover) and (pointer: fine) {
  .cookie-btn--outline:hover { background: rgba(27,55,41,0.06); }
  .cookie-btn--solid:hover   { background: var(--deep-mid); }
}
.cookie-btn:active { transform: scale(0.96); }

.cookie-prefs {
  max-width: 1200px;
  margin: 1rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(27,55,41,0.10);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.cookie-prefs.hidden { display: none; }
.cookie-pref-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: var(--text-dark);
  cursor: pointer;
}

@media (max-width: 768px) {
  .cookie-banner { padding: 1.2rem 1.2rem 1.4rem; }
  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-btn { flex: 1; }
}

/* ── WhatsApp flotante ── */
.wsp-btn {
  position: fixed;
  bottom: 28px;
  left: 28px;
  z-index: var(--z-float);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--deep);
  color: #fff;
  padding: 0.75rem 1.35rem 0.75rem 1rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 6px 30px rgba(27,55,41,0.45);
  transition: transform 0.25s, box-shadow 0.25s;
}
.wsp-btn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 40px rgba(27,55,41,0.6);
}
.wsp-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: var(--deep);
  animation: wsp-ring 2.2s ease-out infinite;
  z-index: var(--z-behind);
}
@keyframes wsp-ring {
  0%   { transform: scale(1); opacity: 0.55; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* ── Scroll-reveal — clase base y estado visible ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Accesibilidad: movimiento reducido — congela todo ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }
  .reveal {
    opacity:    1    !important;
    transform:  none !important;
    transition: none !important;
  }
}
.wsp-label {
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.wsp-face {
  display: flex;
  line-height: 1;
  flex-shrink: 0;
}

/* ===== NAVBAR — Graduación / Aventura / Beneficios =====
   Ya no llevan "pill" propia — se ven como cualquier otro link,
   el color dorado queda reservado para el estado activo. */
.nav-link-aventura--active,
.nav-link-beneficios--active {
  color: var(--gold-dark) !important;
}

/* ── Active nav link via scroll spy ── */
.nav-links a.nav-active { color: var(--gold-dark); }
.nav-links a.nav-active::after { transform: scaleX(1); }

/* ── Hamburger (mobile only) ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(27,55,41,0.18);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
}
.nav-hamburger:hover {
  border-color: rgba(208,93,62,0.60);
  background: rgba(208,93,62,0.08);
}
.nav-hamburger:focus-visible {
  border-color: rgba(208,93,62,0.60);
  background: rgba(208,93,62,0.08);
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
}

/* Focus visible — navegación por teclado */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
  border-radius: 3px;
}
.nav-links a:focus-visible { outline-offset: 5px; }
.lang-btn:focus-visible    { outline-offset: 2px; }
.nav-hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--deep);
  border-radius: 2px;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.25s, width 0.3s;
}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-line:nth-child(2) {
  opacity: 0;
  width: 0;
}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .navbar { padding: 0.9rem 1.5rem; gap: 0.8rem; }
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: 0.8rem; }
  .lang-btn { padding: 0.3rem 0.5rem; font-size: 0.72rem; }
}

@media (max-width: 768px) {
  .navbar { flex-wrap: nowrap; padding: 0.9rem 1.2rem; gap: 0.6rem; }
  .lang-switcher { margin-left: auto; }
  .nav-hamburger { display: flex; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    order: unset;
    width: auto;
    justify-content: flex-start;
    padding: 0.5rem 0 1rem;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(27,55,41,0.10);
    box-shadow: 0 20px 60px rgba(27,55,41,0.18);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
  }
  .nav-links.nav-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 0.9rem 2rem;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(27,55,41,0.06);
    border-radius: 0;
    letter-spacing: 0.03em;
  }
  .nav-links a:hover { background: rgba(208,93,62,0.08); }
  .nav-links a::after { display: none; }

  /* Submenú — en móvil se despliega dentro de la propia lista, no flotando */
  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 0.9rem 2rem;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    border-bottom: 1px solid rgba(27,55,41,0.06);
  }
  .nav-dropdown-toggle:hover { background: rgba(208,93,62,0.08); }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: rgba(208,93,62,0.05);
    padding: 0.3rem 0;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    pointer-events: none;
    transition: max-height 0.25s ease;
  }
  .nav-dropdown--open .nav-dropdown-menu {
    max-height: 260px;
    pointer-events: auto;
    transform: none;
  }
  .nav-dropdown-menu a { padding: 0.75rem 2rem 0.75rem 2.6rem; border-radius: 0; }

  .nav-cta {
    margin: 0.5rem 1.5rem 0;
    border-radius: 10px !important;
    display: block;
    text-align: center;
  }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; padding: 2.5rem 1.5rem; }
  .footer-cta-band { padding: 2rem 1.5rem; }
  .footer-cta-inner { flex-direction: column; align-items: flex-start; }
  .footer-dest-list { grid-template-columns: 1fr !important; }
  .footer-bottom { padding: 1.5rem 1.5rem 0; }
  .wsp-label { display: none; }
  .wsp-btn { width: 58px; height: 58px; border-radius: 50%; padding: 0; justify-content: center; }
  .wsp-btn { left: 16px; bottom: 16px; }
}

@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-cta-buttons { flex-direction: column; }
}