/* ============================================================
   RUMBO · Design Tokens
   Urban Transport × Tropical Adventure
   ============================================================ */

:root {
  /* ── Tipografía ─────────────────────────────── */
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-serif:   'Fraunces', Georgia, serif;
  --font-body:    'Schibsted Grotesk', system-ui, sans-serif;

  --display-xl: clamp(2.6rem, 6.2vw + 1rem, 5.6rem);
  --display-lg: clamp(2.1rem, 4.6vw + .8rem, 4rem);
  --display-md: clamp(1.7rem, 3.4vw + .6rem, 2.8rem);
  --display-sm: clamp(1.25rem, 2vw + .6rem, 1.8rem);
  --h2:  clamp(1.5rem, 2.6vw + .6rem, 2.35rem);
  --h3:  clamp(1.15rem, 1.4vw + .6rem, 1.6rem);
  --h4:  clamp(1rem, .7vw + .85rem, 1.2rem);
  --lead: clamp(1.05rem, .6vw + .9rem, 1.3rem);
  --body: clamp(1rem, .3vw + .92rem, 1.12rem);
  --small: clamp(.82rem, .2vw + .78rem, .9rem);

  --track-widest: .22em;
  --track-wide: .12em;
  --track-mid: .04em;

  --lh-tight: 1.04;
  --lh-snug: 1.32;
  --lh-body: 1.66;

  /* ── Movimiento ─────────────────────────────── */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-inout:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-snap:   cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1);

  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
  --dur-5: 760ms;

  /* ── Espaciado ──────────────────────────────── */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --maxw: 76rem;
  --maxw-narrow: 46rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* ── Responsive / táctil ───────────────────── */
  --header-h: 112px;          /* alto real del header; lo usan sticky y scroll-padding */
  --tap: 44px;                /* objetivo táctil mínimo (Apple/HIG) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* ── Radio ──────────────────────────────────── */
  --r-s: 6px;
  --r-m: 12px;
  --r-l: 20px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ── Sombras ────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(10, 20, 40, .08), 0 4px 12px rgba(10, 20, 40, .05);
  --shadow-2: 0 4px 8px rgba(10, 20, 40, .08), 0 16px 32px rgba(10, 20, 40, .10);
  --shadow-3: 0 8px 16px rgba(10, 20, 40, .10), 0 32px 64px rgba(10, 20, 40, .16);
  --shadow-l: var(--shadow-2);
  --shadow-signal: 0 4px 16px color-mix(in srgb, var(--signal) 45%, transparent);

  /* ════ UNIVERSO A · RUMBO CIUDAD (default) ════ */
  --universe: 'ciudad';

  --bg:          #FBF5F7;
  --bg-soft:     #F5E9EE;
  --bg-deep:     #2B081F;
  --bg-deep-2:   #3B0C28;
  --ink:         #2B081F;
  --ink-muted:   #6C4A5B;
  --ink-soft:    #9A7C8B;

  --accent:      #02a3b9;
  --accent-ink:  #FFFFFF;
  --signal:      #d01c67;
  --signal-ink:  #FFFFFF;
  --warm:        #98c32b;
  --warm-ink:    #1A2E0A;

  --card:        #FFFFFF;
  --card-ink:    #2B081F;
  --line:        rgba(43, 8, 31, .14);
  --line-strong: rgba(43, 8, 31, .3);

  --hero-ink: #FBF5F7;
  --hero-muted: rgba(251, 245, 247, .76);
  --hero-accent: #02a3b9;

  --grad-city: linear-gradient(135deg, #2B081F 0%, #4A0E29 45%, #A1114F 80%, #02a3b9 140%);
  --grad-fade: linear-gradient(180deg, rgba(43,8,31,0) 0%, rgba(43,8,31,.84) 100%);

  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%232B081F' stroke-opacity='.05'/%3E%3C/svg%3E");
}

/* ════ UNIVERSO B · RUMBO AVENTURA ════ */
body.u-aventura,
body.u-turismo {
  --universe: 'aventura';

  --bg:          #F7FAF0;
  --bg-soft:     #EEF4DC;
  --bg-deep:     #12301C;
  --bg-deep-2:   #0C2415;
  --ink:         #12301C;
  --ink-muted:   #46604E;
  --ink-soft:    #718579;

  --accent:      #02a3b9;
  --accent-ink:  #FFFFFF;
  --signal:      #98c32b;
  --signal-ink:  #1A2E0A;
  --warm:        #d01c67;
  --warm-ink:    #FFFFFF;

  --card:        #FFFFFF;
  --card-ink:    #12301C;
  --line:        rgba(18, 48, 28, .16);
  --line-strong: rgba(18, 48, 28, .32);

  --hero-ink: #F7FAF0;
  --hero-muted: rgba(247, 250, 240, .78);
  --hero-accent: #98c32b;

  --grad-city: linear-gradient(140deg, #12301C 0%, #1A5A30 45%, #028FA0 80%, #02a3b9 140%);
  --grad-fade: linear-gradient(180deg, rgba(18,48,28,0) 0%, rgba(18,48,28,.72) 100%);

  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cpath d='M26 2a24 24 0 1 1 0 48 24 24 0 0 1 0-48z' fill='none' stroke='%2312301C' stroke-opacity='.06'/%3E%3Cpath d='M10 10l32 32M42 10L10 42' stroke='%2312301C' stroke-opacity='.05'/%3E%3C/svg%3E");
}

/* ════ Header dinámico por breakpoint ════ */
@media (max-width: 1240px) { :root { --header-h: 96px; } }
@media (max-width: 1024px) { :root { --header-h: 84px; } }
@media (max-width: 480px)  { :root { --header-h: 72px; } }

/* ════ Preferencias de movimiento ════ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
    --dur-5: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}