/* ══════════════════════════════════════════════════════════════
   GelatoMaps — MEJORAS PRO v1.0
   Capa aditiva sobre pages.css + base.css.
   Carga DESPUÉS de pages.css. Sin breaking changes.
   Objetivo: que GelatoMaps se vea al nivel de TheFork / Airbnb.
   Dpto 06 UX y Diseño — 29 Mar 2026
   ══════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. VARIABLES PUENTE — Elimina hardcoded rgba(13,148,136,...)
   Usa valores del design-tokens.css ya cargado antes.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  /* Accent alpha variants — reemplazan los rgba(13,148,136,x) hardcodeados */
  --clr-accent-a08: rgba(13, 148, 136, .08);
  --clr-accent-a10: rgba(13, 148, 136, .10);
  --clr-accent-a12: rgba(13, 148, 136, .12);
  --clr-accent-a15: rgba(13, 148, 136, .15);
  --clr-accent-a25: rgba(13, 148, 136, .25);
  --clr-accent-a30: rgba(13, 148, 136, .30);
  --clr-accent-a40: rgba(13, 148, 136, .40);

  /* Easing physics */
  --ease-spring:    cubic-bezier(.34, 1.56, .64, 1);   /* overshoot suave — alive */
  --ease-expo-out:  cubic-bezier(.16, 1,    .3,  1);   /* entry rápido — premium */
  --ease-smooth:    cubic-bezier(.4,  0,    .2,  1);   /* salida limpia */
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. CARDS — Spring hover + teal accent ring
   La diferencia entre "web normal" y "TheFork/Airbnb":
   el card sube con física real y muestra el color de marca.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gl-card {
  transition:
    transform   .35s var(--ease-spring),
    box-shadow  .25s var(--ease-smooth),
    border-color .2s ease;
  will-change: transform;
  /* Subtle inner depth on base */
  box-shadow: 0 1px 3px rgba(0,0,0,.15), 0 0 0 0 var(--clr-accent-a25);
}

.gl-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, .35),
    0 0 0 1px var(--clr-accent-a30);
  border-color: var(--clr-accent-a30);
}

/* Heading typography dentro de cards */
.gl-card h3,
.gl-card .gl-card-name,
.gl-card [class*="name"] {
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Stat numbers: tabular + kerning negativo = editorial */
.gl-card [class*="score"],
.gl-card [class*="rating"],
.gl-card [class*="count"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. CTA BUTTON — Spring scale + shadow glow
   Botón que "responde" — no el flat transform estático.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gl-cta-hdr {
  transition:
    background   .18s ease,
    transform    .3s  var(--ease-spring),
    box-shadow   .2s  ease;
  /* Sombra base sutil — marca presencia */
  box-shadow: 0 2px 8px var(--clr-accent-a25);
}

.gl-cta-hdr:hover {
  background: var(--color-accent-dark, #0D7C72);  /* token oficial si disponible */
  transform: scale(1.05) translateY(-1px);
  box-shadow: 0 8px 24px var(--clr-accent-a40);
}

.gl-cta-hdr:active {
  transform: scale(.97) translateY(0);
  box-shadow: 0 2px 8px var(--clr-accent-a25);
  transition-duration: .1s;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. HEADER / NAVEGACIÓN — Estado activo más definido
   El active link necesita más presencia. Ahora tiene ring + glow.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gl-nav a {
  transition:
    color      .18s ease,
    background .18s ease,
    transform  .2s  var(--ease-spring);
}

.gl-nav a:hover {
  background: rgba(255, 255, 255, .07);
  transform: translateY(-1px);
}

.gl-nav a.active {
  /* Sustituye el rgba(13,148,136,.15) hardcodeado */
  background: var(--clr-accent-a15);
  box-shadow: inset 0 0 0 1px var(--clr-accent-a30);
  color: var(--color-accent-light);   /* --teal-lt */
}

/* Header: glassmorphism más presente en scroll — verde-oscuro marca, NO azul */
#gl-hdr {
  background: rgba(8,13,13,.98);
  box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 4px 24px rgba(0,0,0,.2);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. HERO — Gradiente radial más dramático
   El hero es el primer impacto visual. Más profundidad.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gl-hero {
  background:
    radial-gradient(ellipse 110% 90% at 50% -5%, var(--clr-accent-a15) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 50% 0%,   var(--clr-accent-a08) 0%, transparent 50%),
    linear-gradient(180deg, #080E1C 0%, #091320 100%);
}

/* Hero label: usa variables en vez de hardcoded */
.gl-hero-label {
  background: var(--clr-accent-a12);
  border-color: var(--clr-accent-a30);
  /* Sutil brillo interno */
  box-shadow: inset 0 1px 0 rgba(94,234,212,.08);
}

/* Hero --big (inicio.html): más impactante */
.gl-hero--big {
  padding: 96px var(--sp-lg) 72px;
}

.gl-hero--big h1 {
  /* Gradiente de texto en el título principal */
  background: linear-gradient(135deg, #ffffff 0%, rgba(94,234,212,.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Fallback: si background-clip no funciona, el color blanco queda */
}

/* El em (highlight de color) dentro del --big hero */
.gl-hero--big h1 em {
  /* em ya tiene var(--teal-lt) — reforzar con reset del gradient padre */
  -webkit-text-fill-color: var(--color-accent-light);
  color: var(--color-accent-light);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. TABS — Spring + glow en activo
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gl-tab {
  transition: all .22s var(--ease-expo-out);
}

.gl-tab:hover {
  transform: translateY(-1px);
}

.gl-tab.on {
  /* Usa variable en vez de var(--teal) hardcodeado implícito */
  background: var(--color-accent, #0D9488);
  border-color: var(--color-accent, #0D9488);
  box-shadow: 0 4px 16px var(--clr-accent-a30);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. STATS (sidebar) — Spring hover
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stat {
  transition: transform .3s var(--ease-spring), box-shadow .2s ease;
}

.stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(11, 31, 56, .10);
}

.stat-v {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. GRIDS — Fix: 2-col aguanta hasta 480px, no colapsa en 768px
   pages.css colapsa .gl-grid-2 a 1-col en 768px. Demasiado pronto.
   En tablet (480-768px) 2 columnas es perfecto.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 481px) and (max-width: 768px) {
  .gl-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .gl-grid-2 {
    grid-template-columns: 1fr;
  }
  .gl-grid-3 {
    grid-template-columns: 1fr;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. TOOLBAR SELECT — Estado focus con token oficial
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gl-toolbar select:focus {
  outline: none;
  border-color: var(--color-accent, #0D9488);
  box-shadow: 0 0 0 3px var(--clr-accent-a10);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. FOCUS RING — Sistema unificado (Accesibilidad WCAG 2.4.11)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:focus-visible {
  outline: 2px solid var(--color-accent, #0D9488);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Excepción: elementos que ya tienen su propio estilo focus */
.gl-nav a:focus-visible,
.gl-tab:focus-visible,
.gl-cta-hdr:focus-visible {
  outline-offset: 4px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. SCROLL ANIMATIONS — Fade-up en cards al entrar en viewport
   JS detecta .gl-card y añade .is-visible — aquí está el CSS.
   (No requiere JS nuevo — preparado para cuando se añada el observer)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: no-preference) {
  .gl-card[data-animate] {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity    .5s var(--ease-expo-out),
      transform  .5s var(--ease-expo-out);
  }
  .gl-card[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respeta prefer-reduced-motion — accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .gl-card,
  .gl-cta-hdr,
  .gl-tab,
  .stat,
  .gl-nav a {
    transition-duration: .01ms !important;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. FOOTER — Link hover con teal en vez de var(--teal-lt)
       (ya estaba, solo refuerzo con el token de design-tokens.css)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gl-footer a:hover {
  color: var(--color-accent-light, #5EEAD4);
}