/* ============================================================
   TOURISM WEB — DESIGN TOKENS
   Paleta TROPICAL CARIBE (Cancún / Playa del Carmen / Tulum):
   verde agua, beige arena, azul cielo, amarillo sol.
   Base clara y luminosa + estética editorial de revista.
   ============================================================ */

/* --- Fuentes ------------------------------------------------
   Editorial / Didone — hero Y TODOS los subtítulos:
     Bodoni Moda (default) | Playfair Display | Cormorant Garamond
   Cuerpo — sans neutra:
     Inter | Sora | Outfit
------------------------------------------------------------ */

:root {
  /* ---------- Tipografía ---------- */
  --font-editorial: "Bodoni Moda", "Playfair Display", "Didot", Georgia, serif;
  --font-body: "Inter", "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero:    clamp(2.9rem, 9vw, 7.5rem);
  --fs-h2:      clamp(2rem, 5.2vw, 3.9rem);
  --fs-h3:      clamp(1.35rem, 2.6vw, 2rem);
  --fs-eyebrow: clamp(.68rem, 1.1vw, .8rem);
  --fs-lead:    clamp(1.02rem, 1.6vw, 1.22rem);
  --fs-body:    clamp(.98rem, 1.25vw, 1.05rem);
  --fs-small:   .86rem;

  --lh-display: .96;
  --lh-body: 1.68;
  --ls-hero: -.02em;
  --ls-eyebrow: .34em;

  /* ============================================================
     PALETA TROPICAL — claro, luminoso, playa
     ============================================================ */

  /* Fondos: arena y espuma */
  --bg:        #FDFBF6;   /* blanco arena, cálido */
  --bg-2:      #F3EFE6;   /* beige claro — secciones alternas */
  --bg-3:      #FFFFFF;   /* tarjetas */
  --bg-mint:   #EAF6F1;   /* verde clarito — bloques suaves */
  --bg-sky:    #E7F3F8;   /* azul clarito */
  --bg-sun:    #FBF3DC;   /* amarillo clarito */

  --line:      rgba(26, 60, 66, .14);
  --line-soft: rgba(26, 60, 66, .07);

  /* Texto: verde petróleo profundo (nunca negro puro, se ve duro en playa) */
  --text:      #123037;
  --text-soft: #4A6B70;
  --text-dim:  #8299A0;

  /* Acentos tropicales */
  --aqua:      #3FC7B4;   /* verde agua — color principal */
  --aqua-deep: #1E9E8E;   /* para texto sobre claro (contraste AA) */
  --sky:       #7FC9E8;   /* azul cielo clarito */
  --sand:      #E4D3B4;   /* beige arena */
  --gold:      #C89B4A;   /* oro/dorado editorial (contraste AA sobre claro) */
  --sun:       #F5C84C;   /* amarillo sol */
  --coral:     #FF8A6B;   /* coral atardecer — CTAs cálidos, alertas */
  --palm:      #6FBF73;   /* verde palmera clarito */

  /* Alias semánticos (usa SIEMPRE estos en los componentes) */
  --brand:       var(--aqua);
  --brand-deep:  var(--aqua-deep);
  --brand-2:     var(--sky);
  --accent:      var(--gold);

  --grad-brand: linear-gradient(120deg, var(--aqua) 0%, var(--sky) 100%);
  --grad-sun:   linear-gradient(120deg, var(--sun) 0%, var(--coral) 100%);
  --grad-gold:  linear-gradient(120deg, #F0DCB4 0%, var(--gold) 55%, #A87C33 100%);
  /* Degradado de anclaje bajo el hero: arena translúcida, NO negro */
  --grad-fade:  linear-gradient(180deg, transparent 0%, rgba(18,48,55,.55) 100%);

  /* Sombras: suaves y cálidas, nunca grises duras */
  --glow-brand: 0 8px 28px -8px rgba(63,199,180,.45);
  --glow-soft:  0 12px 38px -14px rgba(30,110,120,.28);
  --glow-gold:  0 8px 26px -8px rgba(200,155,74,.40);
  --shadow-card: 0 2px 8px rgba(18,48,55,.05), 0 14px 40px -18px rgba(18,48,55,.18);

  /* Glass — sobre video o foto (siempre blanco translúcido) */
  --glass-bg:        rgba(255,255,255,.16);
  --glass-bg-hover:  rgba(255,255,255,.28);
  --glass-border:    rgba(255,255,255,.45);
  --glass-blur:      blur(14px) saturate(160%);
  --glass-shadow:    0 8px 32px -8px rgba(18,48,55,.35);
  --glass-text:      #FFFFFF;   /* texto sobre foto */

  /* Glass del cuadro de reserva (sobre video): más opaco para poder leer los campos */
  --booking-bg:      rgba(255,255,255,.82);
  --booking-text:    var(--text);

  /* Superficie del header al hacer scroll */
  --surface-blur-bg: rgba(253,251,246,.86);

  /* ---------- Geometría ---------- */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --pad-x: clamp(1.15rem, 5vw, 5rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --maxw: 1240px;

  /* ---------- Movimiento ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --t-fast: .18s;
  --t:      .32s;
  --t-slow: .7s;

  /* ---------- Móvil ---------- */
  --tap: 48px;
}

/* ============================================================
   VARIANTE NOCTURNA (opcional)
   Para beach clubs, bares, cenas, fiestas en catamarán.
   Actívala con <html data-theme="night">. Mismos tropicales,
   pero sobre azul profundo de noche caribeña.
   ============================================================ */
[data-theme="night"] {
  --bg:        #07161C;
  --bg-2:      #0C2028;
  --bg-3:      #112A33;
  --bg-mint:   #0E2A2A;
  --bg-sky:    #0D2430;
  --bg-sun:    #23200F;

  --line:      rgba(255,255,255,.12);
  --line-soft: rgba(255,255,255,.07);

  --text:      #F2F8F7;
  --text-soft: #A9C2C4;
  --text-dim:  #6E8A8E;

  --aqua:      #5FE3CD;
  --aqua-deep: #5FE3CD;
  --sky:       #93D8F2;
  --gold:      #E8C37E;

  --grad-fade: linear-gradient(180deg, transparent 0%, rgba(7,22,28,.9) 100%);
  --surface-blur-bg: rgba(7,22,28,.82);
  --booking-bg: rgba(12,32,40,.72);
  --booking-text: #F2F8F7;
  --shadow-card: 0 14px 40px -18px rgba(0,0,0,.6);
}

/* ---------- Accesibilidad de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}