/* ================================================================
   FIT TRAVEL — styles.css
   Hoja de estilos principal del sitio web

   ORGANIZACIÓN (en orden de aparición):
   01. Variables CSS (colores, tipografías, duraciones, radii, gradientes)
   02. Reset & Base (normalización del navegador)
   03. Grain overlay (textura de grano decorativa)
   04. Tipografía base (h1-h4, em, a)
   05. Utilidades globales (container, section-label, buttons, sr-only)
   06. Navegación (nav, nav scrolled, hamburger)
   07. Menú móvil
   08. Hero (fondo, orbes, badge, título, stats, scroll indicator)
   09. About / Qué es FIT
   10. Destinations / Destinos
   11. Services / Servicios
   12. Process / Proceso
   13. Gallery / Galería
   14. CTA / Formulario de contacto
   15. Footer
   16. Animaciones scroll reveal
   17. Responsive (breakpoints 1024px, 768px, 540px)

   PALETA DE COLORES:
   · Púrpura principal  #8E4585  → botones, acentos, links activos
   · Púrpura oscuro     #5C2E57  → hover de botón, fondo tarjeta cita
   · Púrpura claro      #B56BAC  → em, labels, acentos sutiles
   · Fondo principal    #0D0A0D  → casi negro con tinte violeta
   · Crema              #F4EFE8  → texto principal sobre fondos oscuros

   TIPOGRAFÍAS:
   · Alata  (400 únicamente) → h1, h2, logo, números grandes
   · Afacad (400-600, italic) → h3, h4, cuerpo, botones, cursivas
     (el peso 700 fue eliminado de la carga — no se usa en el CSS)
================================================================ */


/* ================================================================
   01. VARIABLES CSS
   Definidas en :root para estar disponibles en todo el documento.
   Uso: var(--nombre-variable)
================================================================ */
:root {
  /* --- Colores principales --- */
  --purple:        #8E4585;                        /* púrpura de marca */
  --purple-dark:   #5C2E57;                        /* versión más oscura para hover */
  --purple-light:  #B56BAC;                        /* versión más clara para acentos */
  --purple-pale:   rgba(142, 69, 133, 0.12);       /* tinte muy sutil (fondos) */
  --gold:          #C4A35A;                        /* dorado — acento secundario */

  /* --- Fondos (de más oscuro a más claro) --- */
  --bg:            #0D0A0D;                        /* fondo base del sitio */
  --bg-card:       #131013;                        /* fondo de secciones alternas */
  --bg-surface:    #1A141A;                        /* hover de tarjetas */
  --bg-elevated:   #221A22;                        /* elementos elevados */

  /* --- Textos --- */
  --cream:         #F4EFE8;                        /* texto principal */
  --cream-muted:   #C8BFB8;                        /* texto secundario claro */
  --text-sec:      #9E9099;                        /* texto secundario / párrafos — ratio ≥4.5:1 sobre #0D0A0D */
  --text-muted:    #8A8088;                        /* texto tenue — ratio ≥4.5:1 sobre #0D0A0D */

  /* --- Bordes --- */
  --border:        rgba(142, 69, 133, 0.18);       /* borde púrpura sutil */
  --border-light:  rgba(244, 239, 232, 0.07);      /* borde crema muy tenue */

  /* --- Tipografías --- */
  --font-display:  'Alata', sans-serif;            /* solo weight 400 disponible */
  --font-body:     'Afacad', sans-serif;           /* weights 400-600 + italic (700 no cargado) */

  /* --- Curvas de animación personalizadas --- */
  --ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94); /* suave estándar */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);         /* rebote ligero al final */

  /* --- Duraciones de animación/transición --- */
  --duration-fast:   0.2s;  /* hover de links y cambios de color */
  --duration-normal: 0.3s;  /* transiciones de componentes (botones, cards) */
  --duration-slow:   0.9s;  /* animaciones de entrada del hero */

  /* --- Border radius --- */
  --radius-sm:   2px;    /* botones, chips, inputs — estética editorial */
  --radius-md:   12px;   /* imágenes, gallery items */
  --radius-pill: 100px;  /* badge y elementos en forma de píldora */

  /* --- Escala tipográfica — line-height --- */
  --line-height-tight:   1.1;   /* h1, h2 — títulos grandes */
  --line-height-normal:  1.7;   /* body — lectura cómoda */
  --line-height-relaxed: 1.85;  /* párrafos de contenido secundario */

  /* --- Pesos tipográficos --- */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* --- Gradientes reutilizables --- */
  --grad-orb-purple: radial-gradient(circle, rgba(142, 69, 133, 0.12) 0%, transparent 70%);
  --grad-orb-gold:   radial-gradient(circle, rgba(196, 163, 90, 0.07) 0%, transparent 70%);
  --grad-overlay-dark: linear-gradient(to bottom, rgba(10,5,10,0.55) 0%, rgba(10,5,10,0.15) 100%);
}


/* ================================================================
   01b. SKIP NAVIGATION LINK
   Visible solo al recibir foco con Tab — accesibilidad de teclado.
================================================================ */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--gold);
  color: #0A0A0A;
  padding: 8px 16px;
  z-index: 9999;
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-body);
  transition: top var(--duration-fast);
  text-decoration: none;
}
.skip-link:focus { top: 0; }


/* ================================================================
   02. RESET & BASE
   Elimina márgenes/padding por defecto del navegador y establece
   box-sizing: border-box (el padding no aumenta el ancho total).
================================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* el padding se incluye dentro del ancho declarado */
}

html {
  scroll-behavior: smooth; /* scroll suave al hacer click en links internos (#) */
  font-size: 16px;          /* base para rem — 1rem = 16px */
}

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);    /* interlineado cómodo para lectura */
  overflow-x: hidden;  /* evita scroll horizontal accidental */
}


/* ================================================================
   03. GRAIN OVERLAY — textura de grano decorativa
   Se aplica como pseudo-elemento fijo encima de todo (z-index alto).
   pointer-events: none → no bloquea clicks ni interacciones.
   El SVG inline genera ruido fractal mediante feTurbulence.
   opacity: 0.03 → muy sutil, solo perceptible en pantallas grandes.
================================================================ */
body::after {
  content: '';
  position: fixed;
  inset: 0; /* shorthand de top/right/bottom/left: 0 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none; /* no bloquea interacciones del usuario */
  z-index: 9999;        /* encima de todo el contenido */
}


/* ================================================================
   04. TIPOGRAFÍA BASE
   h1/h2 usan Alata (solo weight 400 disponible en esa fuente).
   h3/h4 usan Afacad con weight 600 para mayor jerarquía.
   em siempre usa Afacad italic porque Alata NO tiene versión cursiva.
================================================================ */

/* Títulos grandes — Alata, sin bold (no disponible en esta fuente) */
h1, h2 {
  font-family: var(--font-display); /* Alata */
  font-weight: var(--font-weight-normal);                 /* único peso disponible en Alata */
  line-height: var(--line-height-tight);
}

/* Subtítulos y microtítulos — Afacad semi-bold */
h3, h4 {
  font-family: var(--font-body); /* Afacad */
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
}

/* Cursiva — siempre Afacad italic (Alata no tiene italic) */
em {
  font-family: 'Afacad', sans-serif;
  font-style: italic;
  font-weight: var(--font-weight-medium);
  color: var(--purple-light); /* color de acento púrpura */
}

/* Elimina subrayado por defecto en todos los links */
a { text-decoration: none; color: inherit; }


/* ================================================================
   05. UTILIDADES GLOBALES
================================================================ */

/* --- Container --- */
/* Centra el contenido con max-width y padding lateral */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px; /* padding lateral para no pegar al borde en móvil */
}

/* --- Etiqueta de sección --- */
/* Texto pequeño en mayúsculas que identifica cada sección numerada */
.section-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.13em; /* espaciado amplio para efecto "uppercase" */
  text-transform: uppercase;
  color: var(--purple-light);
  margin-bottom: 24px;
}

/* Cabecera de sección: agrupa label + h2 + subtítulo */
.section-header {
  max-width: 640px;   /* limita el ancho para legibilidad */
  margin-bottom: 64px;
}

/* Título de sección con tamaño fluido (clamp evita saltos bruscos) */
.section-title {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem); /* mín 2.4rem, fluido, máx 3.8rem */
  color: var(--cream);
  margin-bottom: 20px;
}

/* Subtítulo descriptivo de la sección */
.section-subtitle {
  font-size: 1.05rem;
  color: var(--text-sec);
  line-height: 1.8;
}

/* --- Botones --- */
/* Base compartida por todos los botones del sitio */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: var(--radius-sm);          /* esquinas casi rectas — estética editorial */
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  cursor: pointer;
  border: none;
  transition: all var(--duration-normal) var(--ease);
}

/* Botón principal — fondo púrpura sólido */
.btn--primary {
  background: var(--purple);
  color: white;
}
.btn--primary:hover {
  background: var(--purple-dark);
  transform: translateY(-2px);                     /* sube levemente en hover */
  box-shadow: 0 12px 32px rgba(142, 69, 133, 0.35); /* sombra púrpura */
}

/* Botón fantasma — sin fondo, solo borde */
.btn--ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(244, 239, 232, 0.25);
}
.btn--ghost:hover {
  border-color: var(--purple-light);
  color: var(--purple-light);
}

/* Modificadores de tamaño y ancho */
.btn--lg   { padding: 18px 36px; font-size: 1rem; }
.btn--full { width: 100%; justify-content: center; } /* botón de ancho completo */

/* --- Accesibilidad: Label visible solo para lectores de pantalla --- */
/* Técnica "visually hidden": está en el DOM pero no se ve en pantalla.
   Los lectores de pantalla sí lo leen, mejorando la accesibilidad del formulario. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Clase utilitaria: transición estándar de color/opacidad.
   Usar en links y elementos interactivos que solo necesiten cambio de color. */
.u-transition {
  transition: color var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease);
}

/* Contenedor de campo con label visible — columna flex */
.cta__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Campo de ancho completo fuera de la fila de 2 columnas */
.cta__field-full {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Label visible encima de cada input */
.cta__label-field {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-muted);
}

/* Mensaje de error por campo */
.cta__error {
  font-size: 0.78rem;
  color: #e07070;
  min-height: 1em;
}

/* Mensaje de éxito inline */
.cta__success {
  padding: 14px 18px;
  background: rgba(45, 106, 79, 0.25);
  border: 1px solid rgba(45, 106, 79, 0.5);
  border-radius: 3px;
  color: #6fcf97;
  font-size: 0.9rem;
  text-align: center;
}


/* ================================================================
   06. NAVEGACIÓN
   Fija en la parte superior. Transparente por defecto.
   Al hacer scroll >60px, JS agrega .scrolled que aplica el fondo.
================================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;           /* encima del contenido pero debajo del grain */
  padding: 24px 0;
  transition: all 0.4s var(--ease);
}

/* Estado scrolled: fondo oscuro con efecto de desenfoque (glassmorphism) */
.nav.scrolled {
  background: rgba(13, 10, 13, 0.88);      /* fondo semitransparente */
  backdrop-filter: blur(24px);             /* desenfoca lo que hay detrás */
  -webkit-backdrop-filter: blur(24px);     /* prefijo para Safari */
  padding: 14px 0;                         /* se comprime al hacer scroll */
  border-bottom: 1px solid var(--border);
}

/* Contenedor interno de la nav: flex con gap entre logo, links y CTA */
.nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 48px;
}

/* Logo en la nav: stack vertical de dos textos */
.nav__logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  flex-shrink: 0; /* que no se encoja en pantallas medianas */
}

/* "FIT" — grande, púrpura, Alata */
.nav__logo-fit {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--font-weight-normal);   /* Alata solo tiene weight 400 — no falsificar bold */
  color: var(--purple-light);
  letter-spacing: 0.05em;
}

/* "TRAVEL" — pequeño, uppercase, gris tenue */
.nav__logo-travel {
  font-size: 0.58rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.32em; /* espaciado muy amplio = efecto estampado */
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: -1px;
}

/* Lista de links horizontales — empujados a la derecha con margin-left: auto */
.nav__links {
  display: flex;
  list-style: none;
  gap: 36px;
  margin-left: auto; /* empuja todo lo siguiente a la derecha */
}

/* Links individuales con línea animada debajo (::after) */
.nav__links a {
  font-size: 0.875rem;
  color: var(--cream-muted);
  letter-spacing: 0.02em;
  transition: color var(--duration-fast);
  position: relative; /* necesario para posicionar el ::after */
}

/* Línea subrayado animada debajo de cada link */
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;     /* empieza invisible (ancho 0) */
  background: var(--purple-light);
  transition: width var(--duration-normal) var(--ease);
}

/* En hover y cuando el link está activo (clase JS): texto blanco + línea visible */
.nav__links a:hover,
.nav__links a.nav__link--active { color: var(--cream); }
.nav__links a:hover::after,
.nav__links a.nav__link--active::after { width: 100%; } /* línea aparece de izq a der */

/* Espacio extra entre los links y el botón CTA */
.nav__cta { margin-left: 24px; }

/* Botón hamburguesa — solo visible en móvil (display: none en desktop) */
.nav__hamburger {
  display: none;            /* oculto en desktop */
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;        /* lo empuja al extremo derecho */
}

/* Las dos líneas del hamburguesa */
.nav__hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--cream);
  transition: all var(--duration-normal);
}


/* ================================================================
   07. MENÚ MÓVIL
   Pantalla completa que se desliza desde la derecha.
   Por defecto está fuera del viewport (translateX 100%).
   Al agregar .open, vuelve a su posición original.
================================================================ */
.mobile-menu {
  position: fixed;
  inset: 0;                      /* cubre toda la pantalla */
  background: var(--bg);
  z-index: 99;                   /* debajo de la nav (z:100), encima del contenido */
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(100%);              /* fuera de pantalla por defecto */
  transition: transform 0.45s var(--ease-out); /* animación de entrada/salida */
}

/* Clase agregada por JS al abrir el menú */
.mobile-menu.open { transform: translateX(0); }

/* Botón ✕ para cerrar — posicionado en esquina superior derecha */
.mobile-menu__close {
  position: absolute;
  top: 28px; right: 28px;
  background: none;
  border: none;
  color: var(--cream-muted);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Links del menú en tipografía grande estilo editorial */
.mobile-menu ul { list-style: none; text-align: center; }
.mobile-menu li { margin-bottom: 28px; }
.mobile-menu a {
  font-family: var(--font-display); /* Alata para impacto visual */
  font-size: 2.2rem;
  color: var(--cream);
  transition: color var(--duration-fast);
}
.mobile-menu a:hover   { color: var(--purple-light); }
.mobile-menu .menu-cta { color: var(--purple-light); } /* link CTA en color distinto */


/* ================================================================
   08. HERO — Sección de bienvenida
   Ocupa al menos 100vh (toda la altura de la pantalla).
   Contiene capas: fondo → orbes → contenido → stats.
================================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center; /* centra el contenido verticalmente */
  overflow: hidden;    /* recorta los orbes que salen del borde */
}

/* Contenedor del fondo — position: absolute, cubre el hero completo */
.hero__bg { position: absolute; inset: 0; }

/* ──────────────────────────────────────────────────────────────
   IMAGEN DE FONDO DEL HERO
   ──────────────────────────────────────────────────────────────
   DESKTOP  → img/hero.jpg
             Dimensiones ideales: 1920 × 1080 px (landscape 16:9)
             Sujeto principal centrado — se recorta lateralmente
             en pantallas angostas.

   MOBILE   → img/hero-mobile.jpg
             Dimensiones ideales: 750 × 1340 px (portrait 9:16)
             Coloca el sujeto en el tercio superior de la imagen
             para que quede visible con el texto superpuesto.
             Peso recomendado: < 200 KB (usa squoosh.app para optimizar)

   POSICIÓN → background-position: center 25%
             El punto focal se sitúa en el 25% vertical
             (funciona bien para fotos con sujeto en la parte alta).
             Ajusta este valor si el sujeto queda cortado:
               center top   → ancla al borde superior
               center 40%   → baja el punto focal
   ────────────────────────────────────────────────────────────── */

.hero__bg-layer {
  position: absolute;
  inset: 0;
  will-change: transform; /* el parallax JS mueve este elemento — compositar en GPU */
  background:
    /* overlay púrpura a la derecha */
    radial-gradient(ellipse at 65% 50%, rgba(92, 46, 87, 0.55) 0%, transparent 58%),
    /* oscurece las esquinas inferiores */
    radial-gradient(ellipse at 15% 85%, rgba(13, 10, 13, 0.7) 0%, transparent 50%),
    /* degradado oscuro general */
    linear-gradient(160deg, rgba(13,10,13,0.85) 0%, rgba(26,13,24,0.6) 45%, rgba(13,10,13,0.85) 100%),
    /* foto de fondo DESKTOP */
    url(img/hero.jpg) center 25% / cover no-repeat;
}

/* MOBILE — imagen portrait dedicada con punto focal optimizado
   ¿No tienes hero-mobile.jpg aún? Cambia la URL a hero.jpg provisionalmente. */
@media (max-width: 768px) {
  .hero__bg-layer {
    background:
      /* overlay más intenso en móvil para asegurar legibilidad del texto */
      radial-gradient(ellipse at 50% 30%, rgba(92, 46, 87, 0.65) 0%, transparent 65%),
      radial-gradient(ellipse at 50% 90%, rgba(13, 10, 13, 0.8) 0%, transparent 55%),
      linear-gradient(180deg, rgba(13,10,13,0.75) 0%, rgba(26,13,24,0.45) 40%, rgba(13,10,13,0.90) 100%),
      /* foto de fondo MOBILE — reemplaza hero.jpg por hero-mobile.jpg cuando la tengas */
      url(img/hero-mobile.jpg) center 20% / cover no-repeat;
      /* NOTA: se eliminó el url(hero.jpg) de "fallback" porque el navegador
         descargaba AMBAS imágenes aunque solo mostrara una. */
  }
}

/* Base compartida para los orbes luminosos del fondo */
.hero__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);              /* desenfoque extremo = efecto luminoso difuso */
  animation: orbFloat 10s ease-in-out infinite;
}

/* Orbe 1: grande, a la derecha — usa animación propia para conservar translateY(-50%) */
.hero__bg-orb--1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(142, 69, 133, 0.12) 0%, transparent 70%);
  right: -80px; top: 50%;
  transform: translateY(-50%);
  animation-name: orb1Float; /* sobreescribe la animación base */
}

/* Orbe 2: más pequeño, abajo-izquierda — con delay negativo para desfase */
.hero__bg-orb--2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(196, 163, 90, 0.07) 0%, transparent 70%);
  left: 10%; bottom: 10%;
  animation-delay: -4s; /* empieza en un punto distinto del ciclo de animación */
}

/* Animación genérica de flotación para el orbe 2 */
@keyframes orbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-30px) scale(1.06); }
}

/* Animación especial del orbe 1 — mantiene el centrado vertical con translateY(-50%) */
@keyframes orb1Float {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50%       { transform: translateY(-54%) scale(1.08); }
}

/* Contenido sobre el fondo: z-index: 2 para estar por encima de los orbes */
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 140px 24px 100px; /* 140px arriba para compensar la nav fija */
  width: 100%;
}

/* Badge pill — aparece con animación fadeUp al cargar la página */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--purple-light);
  border: 1px solid var(--border);
  padding: 9px 18px;
  border-radius: var(--radius-pill);   /* forma de píldora */
  margin-bottom: 44px;
  animation: fadeUp var(--duration-slow) var(--ease-out) 0.1s both; /* delay 0.1s, both = mantiene estado */
}

/* Punto pulsante dentro del badge (animación "pulse") */
.hero__badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--purple-light);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

/* Título h1 — tamaño fluido con clamp() */
.hero__title {
  font-size: clamp(3.8rem, 8.5vw, 7.5rem); /* mín 3.8rem / fluido / máx 7.5rem */
  font-weight: var(--font-weight-normal);   /* Alata solo tiene este peso */
  margin-bottom: 32px;
  max-width: 760px;
  animation: fadeUp var(--duration-slow) var(--ease-out) 0.25s both;
}

/* Primera línea del título: "Tu viaje," */
.hero__title-line {
  display: block; /* ocupa su propia línea */
  color: var(--cream);
}

/* Segunda línea: "tus reglas." — cursiva, Afacad (Alata no tiene italic) */
.hero__title-italic {
  display: block;
  font-family: 'Afacad', sans-serif;
  font-style: italic;
  font-weight: var(--font-weight-semibold);
  font-size: clamp(3.2rem, 7.5vw, 7rem); /* ligeramente más pequeño que la primera línea */
  color: var(--purple-light);
}

/* Subtítulo descriptivo del hero */
.hero__subtitle {
  font-size: 1.15rem;
  color: var(--text-sec);
  max-width: 520px;
  margin-bottom: 48px;
  line-height: var(--line-height-relaxed);
  animation: fadeUp var(--duration-slow) var(--ease-out) 0.4s both;
}

/* Contenedor del CTA primario + link secundario */
.hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap; /* en móvil se apilan verticalmente */
  animation: fadeUp var(--duration-slow) var(--ease-out) 0.55s both;
}

/* Link de texto secundario — sin fondo, solo subrayado en hover */
.hero__link-secondary {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  color: var(--cream-muted);
  letter-spacing: 0.04em;
  transition: color 0.25s;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}
.hero__link-secondary:hover {
  color: var(--cream);
  text-decoration-color: var(--cream-muted);
}

/* Indicador de scroll — columna vertical en el borde izquierdo */
.hero__scroll {
  position: absolute;
  bottom: 44px; left: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 2;
  animation: fadeUp var(--duration-slow) var(--ease-out) 0.8s both;
}

/* Línea vertical animada del scroll indicator */
.hero__scroll-line {
  width: 1px; height: 56px;
  background: linear-gradient(to bottom, transparent, var(--purple-light));
  animation: lineGrow 2.5s ease-in-out infinite;
}

@keyframes lineGrow {
  0%, 100% { transform: scaleY(0.7); opacity: 0.4; }
  50%       { transform: scaleY(1);   opacity: 1; }
}

/* Texto "EXPLORAR" en vertical */
.hero__scroll span {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  writing-mode: vertical-rl; /* texto de arriba hacia abajo */
}

/* Contenedor de las 3 estadísticas — esquina inferior derecha */
.hero__stats {
  position: absolute;
  bottom: 44px; right: 32px;
  display: flex;
  gap: 48px;
  z-index: 2;
  animation: fadeUp var(--duration-slow) var(--ease-out) 0.9s both;
}

/* Número y sufijo alineados en la baseline */
.hero__stat-top {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

/* Número grande animado por JS (counter animation) */
.hero__stat-num {
  font-family: var(--font-display); /* Alata para consistencia visual */
  font-size: 2.6rem;
  font-weight: var(--font-weight-normal); /* único peso de Alata */
  color: var(--cream);
  line-height: 1;
}

/* Sufijo (+, %) — más pequeño que el número */
.hero__stat-suffix {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--purple-light);
}

/* Etiqueta descriptiva debajo del número */
.hero__stat-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Animación base: aparece subiendo desde abajo (usada en hero__content) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ================================================================
   09. ABOUT — Qué es FIT Travel
   Grid de 2 columnas: izquierda = imágenes, derecha = texto.
   La línea superior es un gradiente que va de transparente a
   borde púrpura y vuelta a transparente.
================================================================ */
.about {
  padding: 130px 0;
  position: relative;
}

/* Línea separadora superior decorativa */
.about::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--border), transparent);
}

/* Grid principal 50/50 */
.about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start; /* las columnas se alinean desde arriba, no se estiran */
}

/* Título de la sección about — tamaño fluido */
.about__title {
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  color: var(--cream);
  margin-bottom: 48px;
  line-height: 1.25;
}

/* Grid de las dos imágenes: 2fr para la principal, 1fr para la secundaria */
.about__image-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
}

/* Propiedades compartidas de ambas imágenes */
.about__image {
  border-radius: var(--radius-md);
  overflow: hidden;          /* recorta la imagen al border-radius */
  position: relative;        /* necesario para posicionar el chip */
  transition: transform 0.4s var(--ease);
}

/* Zoom sutil en hover */
.about__image:hover { transform: scale(1.02); }

/* Imagen principal — relación 3:4 (más alta que ancha), foto de viaje */
.about__image--main {
  aspect-ratio: 3/4;
  background:
    radial-gradient(ellipse at 30% 70%, rgba(142, 69, 133, 0.35) 0%, transparent 60%),
    linear-gradient(145deg, rgba(44,26,44,0.4) 0%, rgba(26,13,24,0.3) 55%, rgba(42,21,40,0.4) 100%),
    url(img/about-principal.jpg) center / cover no-repeat;
}

/* Imagen secundaria — más pequeña, alineada al fondo de la columna */
.about__image--secondary {
  aspect-ratio: 1/1.4;
  align-self: end;           /* empuja la imagen hacia abajo de la columna */
  background:
    radial-gradient(ellipse at 60% 40%, rgba(142, 69, 133, 0.3) 0%, transparent 60%),
    linear-gradient(145deg, rgba(26,16,32,0.4) 0%, rgba(37,21,37,0.3) 100%),
    url(img/about-secundaria.jpg) center / cover no-repeat;
}

/* Chip / etiqueta superpuesta en la esquina inferior de cada imagen */
.about__image-chip {
  position: absolute;
  bottom: 16px; left: 16px;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(142, 69, 133, 0.8); /* fondo semitransparente púrpura */
  color: white;
  padding: 5px 11px;
  border-radius: var(--radius-sm);
}

/* Columna derecha — baja 60px para crear un desplazamiento visual interesante */
.about__right { padding-top: 60px; }

/* Párrafo de cuerpo base */
.about__text {
  color: var(--text-sec);
  margin-bottom: 20px;
  line-height: 1.9;
  font-size: 0.95rem;
}

/* Párrafo lead — más grande, cursiva, color más claro */
.about__text--lead {
  font-family: 'Afacad', sans-serif;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--cream-muted);
  font-weight: var(--font-weight-normal);
  margin-bottom: 28px;
}

/* Contenedor de los 3 pilares FIT */
.about__pillars {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Cada pilar: ícono + contenido en fila */
.about__pillar {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

/* Ícono ✦ decorativo */
.about__pillar-icon {
  color: var(--purple-light);
  font-size: 0.9rem;
  margin-top: 5px; /* baja para alinear visualmente con el texto */
  flex-shrink: 0;  /* que no se comprima en pantallas pequeñas */
}

/* Título del pilar */
.about__pillar h4 {
  font-size: 1.15rem;
  font-weight: var(--font-weight-medium);
  color: var(--cream);
  margin-bottom: 4px;
}

/* Descripción del pilar */
.about__pillar p {
  font-size: 0.875rem;
  color: var(--text-sec);
}


/* ================================================================
   10. DESTINATIONS — Destinos destacados
   Grid asimétrico de 12 columnas CSS.
   La tarjeta featured ocupa las primeras 6 columnas (mitad).
   Las otras 3 tarjetas ocupan 4 columnas cada una (1/3).
   El efecto de zoom en hover funciona escalando el ::before
   que contiene la imagen de fondo.
================================================================ */
.destinations {
  padding: 130px 0;
  background: var(--bg-card); /* fondo ligeramente más claro para contrastar */
  position: relative;
  overflow: hidden;
}

/* Gradiente decorativo sutil en el fondo de la sección */
.destinations::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(142, 69, 133, 0.05) 0%, transparent 60%);
}

/* Grid de 12 columnas — permite control preciso del ancho de cada tarjeta */
.destinations__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

/* Todas las tarjetas: recortan el contenido al border-radius */
.destination-card {
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  will-change: transform; /* el ::before interno se escala en hover */
}

/* Tarjeta featured: ocupa columnas 1-6 (mitad del grid) */
.destination-card--featured { grid-column: 1 / 7; }

/* Tarjetas normales: 4 columnas cada una (un tercio del ancho) */
.destination-card:not(.destination-card--featured) { grid-column: span 4; }

/* Div que contiene la imagen de fondo y el overlay */
.destination-card__img {
  width: 100%;
  height: 100%;
  min-height: 380px;  /* altura mínima para tarjetas pequeñas */
  position: relative;
  overflow: hidden;   /* recorta el ::before que crece más allá del contenedor */
}

/* La tarjeta featured tiene más altura */
.destination-card--featured .destination-card__img { min-height: 540px; }

/* ::before contiene la imagen de fondo real.
   Al escalarlo en hover, la imagen hace zoom sin afectar el texto del overlay.
   inset negativo + width/height mayores al 100% evitan los bordes blancos al escalar. */
.destination-card__img::before {
  content: '';
  position: absolute;
  inset: -4%;       /* salen 4% por cada lado para absorber el zoom sin bordes */
  width: 108%;
  height: 108%;
  transform: scale(1);
  transition: transform 0.7s var(--ease); /* animación de zoom */
  z-index: 0;       /* detrás del overlay y el texto */
}

/* En hover de la tarjeta, el ::before (la foto) crece suavemente */
.destination-card:hover .destination-card__img::before { transform: scale(1.05); }

/* El overlay de texto debe estar encima del ::before que se escala */
.destination-card__overlay { z-index: 1; }

/* Imágenes por destino — cada una apunta a su archivo en /img/
   background-color es el fallback si la imagen no existe. */
.destination-card__img--italy::before    { background: url(img/dest-italia.jpg)    center / cover no-repeat; background-color: #2A1A10; }
.destination-card__img--japan::before    { background: url(img/dest-japon.jpg)     center / cover no-repeat; background-color: #1A1020; }
.destination-card__img--peru::before     { background: url(img/dest-peru.jpg)      center / cover no-repeat; background-color: #0A1A10; }
.destination-card__img--morocco::before  { background: url(img/dest-marruecos.jpg) center / cover no-repeat; background-color: #1A1005; }

/* Overlay oscuro con gradiente: texto abajo, transparente arriba */
.destination-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,    /* negro casi sólido en la base (donde va el texto) */
    rgba(0,0,0,0.15) 55%,   /* semitransparente al medio */
    transparent 100%         /* completamente transparente arriba */
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* texto pegado al borde inferior */
  padding: 28px;
}

/* Fila superior del overlay: región + duración */
.destination-card__meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* Texto de región — pequeño, uppercase, púrpura */
.destination-card__region {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple-light);
}

/* Texto de duración — pequeño, crema tenue */
.destination-card__duration {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--cream-muted);
}

/* Nombre del destino */
.destination-card__overlay h3 {
  font-size: 1.7rem;
  color: var(--cream);
  font-weight: var(--font-weight-normal);
  margin-bottom: 6px;
}

/* El nombre en la tarjeta featured es más grande */
.destination-card--featured .destination-card__overlay h3 { font-size: 2.4rem; }

/* Descripción breve */
.destination-card__overlay p {
  font-size: 0.85rem;
  color: var(--cream-muted);
  margin-bottom: 18px;
}

/* Link "Diseñar este viaje →" — aparece solo en hover con animación */
.destination-card__link {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--purple-light);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  opacity: 0;                              /* invisible por defecto */
  transform: translateY(6px);             /* ligeramente abajo */
  transition: all var(--duration-normal) var(--ease);
}

/* Al hacer hover en la tarjeta, el link sube y aparece */
.destination-card:hover .destination-card__link {
  opacity: 1;
  transform: translateY(0);
  border-color: var(--purple-light); /* subrayado aparece */
}

/* CTA al final del grid para destinos no listados */
.destinations__cta {
  margin-top: 56px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 40px;
  border-top: 1px solid var(--border-light);
}
.destinations__cta p { color: var(--text-sec); font-size: 0.95rem; }


/* ================================================================
   11. SERVICES — Nuestros servicios
   Grid de 3 columnas separadas por líneas de 2px.
   El truco: el grid tiene background del color del borde,
   y los cards tienen background del color del fondo.
   El gap de 2px entre cards deja ver el fondo del grid = líneas.
================================================================ */
.services { padding: 130px 0; }

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;                           /* gap pequeño = líneas divisorias */
  background: var(--border-light);    /* color del borde visible en el gap */
  border: 1px solid var(--border-light); /* borde exterior del grid completo */
}

/* Cada tarjeta de servicio */
.service-card {
  background: var(--bg);     /* cubre el fondo del grid, dejando solo el gap visible */
  padding: 48px 36px;
  position: relative;        /* para posicionar el número absoluto */
  transition: background var(--duration-normal);
}

/* Fondo más claro en hover */
.service-card:hover { background: var(--bg-surface); }

/* Número de servicio en la esquina superior derecha */
.service-card__number {
  position: absolute;
  top: 20px; right: 24px;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

/* Ícono tipográfico — grande, cambia de color en hover */
.service-card__icon {
  font-size: 1.8rem;
  color: var(--purple);
  margin-bottom: 24px;
  display: block;
  transition: color var(--duration-normal);
}
.service-card:hover .service-card__icon { color: var(--purple-light); }

/* Título del servicio */
.service-card h3 {
  font-size: 1.35rem;
  color: var(--cream);
  font-weight: var(--font-weight-medium);
  margin-bottom: 14px;
}

/* Descripción del servicio */
.service-card p {
  font-size: 0.875rem;
  color: var(--text-sec);
  line-height: var(--line-height-relaxed);
}

/* Tarjeta de cita (última) — fondo púrpura oscuro */
.service-card--quote {
  background: var(--purple-dark);
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra el texto verticalmente */
}
.service-card--quote:hover { background: var(--purple); }

/* Texto de la cita — cursiva, Afacad */
.service-card__quote-text {
  font-family: 'Afacad', sans-serif;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--cream);
  line-height: 1.65;
  margin-bottom: 20px;
}

/* Firma de la cita */
.service-card__quote-author {
  font-size: 0.78rem;
  color: rgba(244, 239, 232, 0.55); /* crema semitransparente */
  letter-spacing: 0.04em;
}


/* ================================================================
   12. PROCESS — Cómo funciona (4 pasos)
   Grid de 4 columnas iguales.
   El número grande usa background-clip: text para aplicar
   un gradiente al texto (técnica de gradiente en tipografía).
   El conector es una línea vertical púrpura en la esquina superior
   derecha de cada paso (excepto el último).
================================================================ */
.process {
  padding: 130px 0;
  background: var(--bg-card); /* fondo alterno para contrastar con services */
}

/* Grid de 4 pasos en fila */
.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0; /* sin gap — los bordes los da el borde superior de cada step */
}

/* Cada paso tiene borde arriba y padding generoso */
.process__step {
  padding: 48px 28px;
  position: relative; /* para el conector absoluto */
  border-top: 1px solid var(--border);
}

/* Número grande con gradiente de color (técnica: background-clip: text) */
.process__step-number {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: var(--font-weight-normal); /* Alata solo tiene este peso */
  line-height: 1;
  margin-bottom: 28px;
  /* Gradiente aplicado al texto: de púrpura claro a púrpura oscuro */
  background: linear-gradient(to bottom, var(--purple-light), var(--purple-dark));
  -webkit-background-clip: text;     /* prefijo Safari — aplica el bg al texto */
  -webkit-text-fill-color: transparent; /* oculta el color original del texto */
  background-clip: text;             /* estándar — aplica el gradiente al texto */
}

/* Título del paso */
.process__step h3 {
  font-size: 1.35rem;
  font-weight: var(--font-weight-medium);
  color: var(--cream);
  margin-bottom: 14px;
}

/* Descripción del paso */
.process__step p {
  font-size: 0.875rem;
  color: var(--text-sec);
  line-height: var(--line-height-relaxed);
}

/* Conector visual entre pasos: línea vertical en la esquina superior derecha */
.process__step-connector {
  position: absolute;
  top: -1px; right: 0; /* se superpone al borde superior del siguiente paso */
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--purple), transparent);
}


/* ================================================================
   13. GALLERY — Galería de fotos
   Scroll horizontal con drag del mouse o swipe en móvil.
   overflow-x: auto + scrollbar-width: none = scroll sin barra visible.
   Los items tienen anchos variados para crear ritmo visual.
   background-color como fallback si la imagen no existe.
================================================================ */
.gallery {
  padding: 130px 0 60px;
  overflow: hidden; /* recorta los elementos que sobresalen */
}

/* Encabezado separado del track para que no sea arrastrable */
.gallery__header { margin-bottom: 48px; }

/* Track con scroll horizontal — el JS maneja el drag */
.gallery__track {
  display: flex;
  gap: 16px;
  padding: 0 24px 24px;
  overflow-x: auto;            /* permite scroll horizontal */
  scrollbar-width: none;        /* oculta scrollbar en Firefox */
  -webkit-overflow-scrolling: touch; /* scroll con inercia en iOS */
  cursor: grab;                /* ícono de mano para indicar que es arrastrable */
  user-select: none;           /* evita seleccionar texto al arrastrar */
}

/* Oculta scrollbar en Chrome/Safari */
.gallery__track::-webkit-scrollbar { display: none; }

/* Cursor mientras se arrastra (agregado por JS) */
.gallery__track.dragging { cursor: grabbing; }

/* Cada item de la galería — tamaño fijo, foto de fondo */
.gallery__item {
  flex-shrink: 0;       /* no se encoge aunque no haya espacio */
  width: 340px;         /* ancho por defecto (sobreescrito por cada --N) */
  height: 440px;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;   /* para posicionar el label */
  will-change: transform; /* escala en hover — capa de composición propia */
  transition: transform 0.4s var(--ease);
}

/* Zoom en hover */
.gallery__item:hover { transform: scale(1.02); }

/* Label con el nombre del destino — esquina inferior izquierda */
.gallery__item-label {
  position: absolute;
  bottom: 20px; left: 20px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 239, 232, 0.7); /* crema semitransparente */
}

/* Imágenes de cada item — con color de fallback si no existe el archivo */
.gallery__item--1 { background: url(img/galeria-01.jpg) center / cover no-repeat #1A0D1A; }
.gallery__item--2 { width: 280px; background: url(img/galeria-02.jpg) center / cover no-repeat #1A1005; }
.gallery__item--3 { width: 400px; background: url(img/galeria-03.jpg) center / cover no-repeat #051A15; }
.gallery__item--4 { background: url(img/galeria-04.jpg) center / cover no-repeat #1A1510; }
.gallery__item--5 { width: 300px; background: url(img/galeria-05.jpg) center / cover no-repeat #0D0A1A; }
.gallery__item--6 { background: url(img/galeria-06.jpg) center / cover no-repeat #0A1520; }

/* Instrucción visual debajo del track */
.gallery__hint {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-top: 24px;
}


/* ================================================================
   14. CTA / CONTACTO
   Fondo oscuro con orbes decorativos.
   El .cta__bg es solo decoración (gradientes de color).
   El formulario está centrado con max-width 660px.
   Los inputs tienen foco resaltado en púrpura.
================================================================ */
.cta {
  padding: 130px 0;
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
}

/* Fondo decorativo — gradientes que simulan luz púrpura difusa */
.cta__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(92, 46, 87, 0.28) 0%, transparent 65%),
    radial-gradient(ellipse at 20% 80%, rgba(142, 69, 133, 0.12) 0%, transparent 50%);
}

/* Contenedor del formulario: encima del fondo (z-index), centrado */
.cta__inner {
  position: relative;
  z-index: 1;         /* encima del .cta__bg decorativo */
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
}

/* El label de la sección CTA necesita centrado explícito */
.cta__label { text-align: center; }

/* Título de la CTA */
.cta__title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--cream);
  margin-bottom: 20px;
  line-height: 1.2;
}

/* Subtítulo explicativo */
.cta__subtitle {
  color: var(--text-sec);
  margin-bottom: 48px;
  font-size: 1.05rem;
  line-height: var(--line-height-relaxed);
}

/* Formulario en columna con gap entre campos */
.cta__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left; /* el texto dentro del form va a la izquierda */
}

/* Fila de 2 columnas: nombre y email lado a lado */
.cta__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Estilos compartidos para input y textarea */
.cta__input, .cta__textarea {
  background: rgba(244, 239, 232, 0.04);  /* muy sutil — casi transparente */
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 15px 18px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--cream);
  width: 100%;
  transition: border-color 0.25s;
  resize: none; /* evita que el usuario cambie el tamaño del textarea */
}

/* Placeholder — mínimo 3:1 sobre fondo oscuro (decorativo, no informativo) */
.cta__input::placeholder, .cta__textarea::placeholder { color: var(--text-sec); }

/* Al hacer foco: borde púrpura + fondo ligeramente teñido */
.cta__input:focus, .cta__textarea:focus {
  outline: none;                           /* quita el outline azul por defecto */
  border-color: var(--purple);
  background: rgba(142, 69, 133, 0.06);   /* tinte púrpura sutil */
}

/* Información de contacto alternativa debajo del formulario */
.cta__contact-info {
  margin-top: 28px;
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  font-size: 0.875rem;
  color: var(--text-sec);
  flex-wrap: wrap; /* en móvil se apilan */
}
.cta__contact-info a { color: var(--purple-light); transition: color 0.2s; }
.cta__contact-info a:hover { color: var(--cream); }
.cta__dot { color: var(--border); } /* separador · entre los links */


/* ================================================================
   15. FOOTER
   Dos columnas: marca (1fr) + nav (2fr).
   La columna nav tiene 3 sub-columnas internas.
================================================================ */
.footer {
  padding: 80px 0 40px;
  border-top: 1px solid var(--border); /* línea separadora arriba */
}

/* Layout principal del footer: marca a la izquierda, nav a la derecha */
.footer__inner {
  display: grid;
  grid-template-columns: 1fr 2fr; /* marca ocupa 1/3, nav ocupa 2/3 */
  gap: 80px;
  margin-bottom: 60px;
}

/* Logo del footer — mismo estilo que la nav, versión grande */
.footer__logo {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: var(--font-weight-normal); /* Alata solo tiene 400 */
}
.footer__logo-fit   { color: var(--purple-light); }
.footer__logo-travel { color: var(--cream); }

/* Descripción de la marca */
.footer__brand p {
  font-size: 0.875rem;
  color: var(--text-sec);
  line-height: 1.8;
  max-width: 270px; /* limita ancho para legibilidad */
  margin-bottom: 28px;
}

/* Contenedor de iconos de redes sociales */
.footer__social { display: flex; gap: 10px; }

/* Cada ícono de red social: cuadrado con borde */
.footer__social a {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text-sec);
  letter-spacing: 0.04em;
  transition: all var(--duration-fast);
}
.footer__social a:hover {
  border-color: var(--purple);
  color: var(--purple-light);
}

/* Sub-grid de los 3 grupos de links del footer */
.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* Título de cada columna del footer — pequeño, uppercase */
.footer__col h5 {
  font-size: 0.68rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 20px;
}

/* Lista de links de cada columna */
.footer__col ul  { list-style: none; }
.footer__col li  { margin-bottom: 10px; }
.footer__col a   { font-size: 0.875rem; color: var(--text-sec); transition: color 0.2s; }
.footer__col a:hover { color: var(--purple-light); }

/* Barra inferior del footer: copyright y tagline */
.footer__bottom {
  padding-top: 28px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer__bottom p { font-size: 0.78rem; color: var(--text-muted); }


/* ================================================================
   16. SCROLL REVEAL ANIMATIONS
   Los elementos con clase .reveal empiezan invisibles y desplazados.
   El JS (IntersectionObserver) agrega .visible cuando el elemento
   entra en el viewport, activando la transición CSS.

   STAGGER: usando nth-child se retrasa cada hijo del grid
   para que las tarjetas aparezcan en cascada (de izq a der).
================================================================ */

/* Estado inicial: invisible y desplazado hacia abajo */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

/* Estado final (activado por JS): completamente visible */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay escalonado para tarjetas de destinos (efecto cascada) */
.destinations__grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.destinations__grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.destinations__grid .reveal:nth-child(4) { transition-delay: 0.24s; }

/* Delay escalonado para tarjetas de servicios */
.services__grid .reveal:nth-child(2) { transition-delay: 0.07s; }
.services__grid .reveal:nth-child(3) { transition-delay: 0.14s; }
.services__grid .reveal:nth-child(4) { transition-delay: 0.21s; }
.services__grid .reveal:nth-child(5) { transition-delay: 0.28s; }
.services__grid .reveal:nth-child(6) { transition-delay: 0.35s; }

/* Delay escalonado para pasos del proceso */
.process__steps .reveal:nth-child(2) { transition-delay: 0.1s; }
.process__steps .reveal:nth-child(3) { transition-delay: 0.2s; }
.process__steps .reveal:nth-child(4) { transition-delay: 0.3s; }


/* ================================================================
   17. RESPONSIVE — Diseño adaptable
   Breakpoints:
   · 1024px: tablet horizontal (iPad landscape)
   · 768px:  tablet vertical / móvil grande
   · 540px:  móvil estándar
================================================================ */

/* --- Tablet horizontal (≤ 1024px) --- */
@media (max-width: 1024px) {
  /* About: de 2 columnas a 1 columna apilada */
  .about__inner    { grid-template-columns: 1fr; gap: 48px; }
  .about__right    { padding-top: 0; } /* ya no hay que desplazar la columna */

  /* Destinos: de grid 12 col a 2 columnas simples */
  .destinations__grid { grid-template-columns: 1fr 1fr; }
  .destination-card--featured              { grid-column: 1 / -1; } /* ocupa todo el ancho */
  .destination-card:not(.destination-card--featured) { grid-column: span 1; }

  /* Servicios: de 3 columnas a 2 */
  .services__grid { grid-template-columns: repeat(2, 1fr); }

  /* Proceso: de 4 pasos en fila a 2x2 */
  .process__steps { grid-template-columns: repeat(2, 1fr); }
}

/* --- Móvil grande / Tablet vertical (≤ 768px) --- */
@media (max-width: 768px) {
  /* Nav: oculta links y CTA, muestra el hamburguesa */
  .nav__links, .nav__cta { display: none; }
  .nav__hamburger        { display: flex; }

  /* Hero stats: en móvil salen del position:absolute y van dentro del flujo */
  .hero__stats {
    position: static;       /* ya no flotante en la esquina */
    flex-direction: row;
    justify-content: flex-start;
    gap: 32px;
    margin-top: 48px;
    animation: fadeUp var(--duration-slow) var(--ease-out) 0.7s both;
  }

  /* Oculta el indicador de scroll (no tiene sentido en móvil táctil) */
  .hero__scroll { display: none; }

  /* Reduce padding inferior del contenido del hero */
  .hero__content { padding-bottom: 60px; }

  /* Destinos: todo en 1 columna */
  .destinations__grid { grid-template-columns: 1fr; }
  .destination-card--featured,
  .destination-card:not(.destination-card--featured) { grid-column: 1; }

  /* Servicios: 1 columna */
  .services__grid { grid-template-columns: 1fr; }

  /* Proceso: vuelve a 2 columnas (de 4 en desktop a 2 en tablet a 2 en móvil grande) */
  .process__steps { grid-template-columns: 1fr 1fr; }

  /* Footer: 1 columna apilada */
  .footer__inner { grid-template-columns: 1fr; gap: 48px; }
  .footer__nav   { grid-template-columns: 1fr 1fr; } /* 2 columnas en la nav del footer */

  /* Formulario: los 2 campos de la primera fila se apilan */
  .cta__form-row { grid-template-columns: 1fr; }

  /* Footer bottom: centra el copyright */
  .footer__bottom { flex-direction: column; gap: 8px; text-align: center; }

  /* CTA de destinos: de fila a columna */
  .destinations__cta { flex-direction: column; align-items: flex-start; }
}

/* --- Móvil estándar (≤ 540px) --- */
@media (max-width: 540px) {
  /* Proceso: 1 sola columna */
  .process__steps { grid-template-columns: 1fr; }

  /* Botones del hero: apilados verticalmente, ancho completo */
  .hero__actions     { flex-direction: column; align-items: flex-start; }
  .hero__actions .btn { width: 100%; justify-content: center; }

  /* Estadísticas del hero: más juntas */
  .hero__stats { gap: 20px; }

  /* Títulos de sección más pequeños en pantallas muy pequeñas */
  .section-title { font-size: 2rem; }

  /* Footer nav: 1 sola columna */
  .footer__nav { grid-template-columns: 1fr; }
}


/* ================================================================
   18. PREFERS-REDUCED-MOTION
   Respeta la preferencia del sistema operativo del usuario.
   Desactiva animaciones y transiciones para quienes las soliciten
   (usuarios con vestibular disorders, epilepsia u otras condiciones).
================================================================ */
@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;
  }
}