/* ══════════════════════════════════════════════════════════════════
   GELATOMAPS — HOVER STATES SYSTEM v1.0
   Sistema de 4 clases reutilizables para hover states consistentes.

   INSTRUCCIONES:
   Cargar DESPUÉS de design-tokens.css en todas las páginas.
   Añadir la clase directamente al elemento HTML interactivo.
   NO duplicar hover states custom si se usa esta clase.

   Clases disponibles:
     .hover-lift       → Cards, botones: translateY(-2px) + sombra
     .hover-underline  → Links de texto: underline slide-in desde izquierda
     .hover-brighten   → Imágenes: brightness(1.08) + scale(1.02)
     .hover-teal       → Texto secundario: color → teal

   Autor: Dpto 06 UX & Diseño — GelatoMaps
   Fecha: 30 Mar 2026
   ══════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────
   RESET DE MOVIMIENTO — Respetar prefers-reduced-motion
   Todas las clases usan transiciones. Este bloque las desactiva
   para usuarios que prefieren movimiento reducido.
   ────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hover-lift,
  .hover-underline,
  .hover-brighten,
  .hover-teal {
    transition: none !important;
  }

  .hover-lift:hover,
  .hover-lift:focus-visible {
    transform: none !important;
  }

  .hover-brighten:hover,
  .hover-brighten:focus-visible {
    transform: none !important;
    filter: none !important;
  }

  .hover-underline::after {
    transition: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   .hover-lift
   Uso: Cards de heladería, botones CTA, chips de filtro, cualquier
        elemento card-like que responde al ratón con elevación.
   Efecto: sube 2px + añade sombra suave → sensación de profundidad.
   ══════════════════════════════════════════════════════════════════ */

.hover-lift {
  transition:
    transform var(--pf-dur-release, 200ms) var(--pf-spring, cubic-bezier(.34,1.56,.64,1)),
    box-shadow var(--pf-dur-release, 200ms) var(--pf-out-expo, cubic-bezier(.16,1,.3,1));
  will-change: transform;
}

.hover-lift:hover,
.hover-lift:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--sh-md, 0 4px 12px rgba(11,31,56,.12));
}

.hover-lift:active {
  transform: translateY(0px);
  box-shadow: var(--sh-sm, 0 1px 3px rgba(11,31,56,.08));
  transition-duration: var(--pf-dur-press, 65ms);
}

/* Variante para elementos ya con sombra grande (modales, hero cards) */
.hover-lift--strong:hover,
.hover-lift--strong:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg, 0 8px 32px rgba(11,31,56,.14));
}

/* Variante dark: sombra oscura para elementos sobre fondos oscuros */
.hover-lift--dark:hover,
.hover-lift--dark:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--sh-dark-md, 0 4px 12px rgba(0,0,0,.28));
}


/* ══════════════════════════════════════════════════════════════════
   .hover-underline
   Uso: Links de navegación, "Leer →", textos interactivos inline.
   Efecto: underline que se desliza de izquierda a derecha al hover.
   Requiere: display inline-block o inline para el pseudoelemento.
   ══════════════════════════════════════════════════════════════════ */

.hover-underline {
  position: relative;
  text-decoration: none;
  /* NO sobreescribir display — funciona con inline, inline-block, inline-flex */
  transition: color var(--transition-fast, all .15s ease);
}

.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform var(--pf-dur-release, 200ms) var(--pf-out-expo, cubic-bezier(.16,1,.3,1));
}

.hover-underline:hover::after,
.hover-underline:focus-visible::after {
  transform: scaleX(1);
}

/* Variante gruesa — para CTAs destacados */
.hover-underline--thick::after {
  height: 2px;
}

/* Variante teal — underline en color accent */
.hover-underline--teal::after {
  background-color: var(--color-accent, #0D9488);
}

/* Variante gold — underline dorado */
.hover-underline--gold::after {
  background-color: var(--color-gold, #F59E0B);
}


/* ══════════════════════════════════════════════════════════════════
   .hover-brighten
   Uso: Imágenes de heladería, thumbnails de blog, logos de proveedores.
   Efecto: brightness + scale(1.02) suave → imagen "viva".
   Mejor aplicado al <img> o al contenedor con overflow:hidden.
   ══════════════════════════════════════════════════════════════════ */

.hover-brighten {
  transition:
    filter var(--pf-dur-release, 200ms) var(--pf-snappy, cubic-bezier(.25,.46,.45,.94)),
    transform var(--pf-dur-release, 200ms) var(--pf-snappy, cubic-bezier(.25,.46,.45,.94));
  will-change: filter, transform;
}

.hover-brighten:hover,
.hover-brighten:focus-visible {
  filter: brightness(1.08) saturate(1.05);
  transform: scale(1.02);
}

/* Variante para imágenes dentro de card (no se aplica al contenedor) */
.hover-brighten--contained {
  overflow: hidden;
  border-radius: inherit;
}

.hover-brighten--contained img {
  transition:
    filter var(--pf-dur-release, 200ms) var(--pf-snappy, cubic-bezier(.25,.46,.45,.94)),
    transform var(--pf-dur-enter, 280ms) var(--pf-spring, cubic-bezier(.34,1.56,.64,1));
  will-change: transform;
}

.hover-brighten--contained:hover img,
.hover-brighten--contained:focus-visible img {
  filter: brightness(1.06);
  transform: scale(1.04);
}


/* ══════════════════════════════════════════════════════════════════
   .hover-teal
   Uso: Texto secundario interactivo (meta, autores, chips texto,
        labels de filtro) que gana color al pasar el ratón.
   Efecto: color → --color-accent (teal). Sin movimiento.
   ══════════════════════════════════════════════════════════════════ */

.hover-teal {
  transition: color var(--transition-fast, all .15s ease);
  cursor: pointer;
}

.hover-teal:hover,
.hover-teal:focus-visible {
  color: var(--color-accent, #0D9488);
}

/* Variante sobre fondos oscuros — usa teal-light para contraste */
.hover-teal--dark:hover,
.hover-teal--dark:focus-visible {
  color: var(--color-accent-light, #5EEAD4);
}

/* Variante gold — para elementos de ranking/score */
.hover-teal--gold:hover,
.hover-teal--gold:focus-visible {
  color: var(--color-gold, #F59E0B);
}


/* ══════════════════════════════════════════════════════════════════
   COMBINACIONES FRECUENTES
   Patrones que combinan múltiples clases hover en un solo selector.
   Documentados aquí para facilitar reutilización.
   ══════════════════════════════════════════════════════════════════ */

/* Card interactiva completa: lift + texto teal */
.hover-card {
  transition:
    transform var(--pf-dur-release, 200ms) var(--pf-spring, cubic-bezier(.34,1.56,.64,1)),
    box-shadow var(--pf-dur-release, 200ms) var(--pf-out-expo, cubic-bezier(.16,1,.3,1)),
    border-color var(--transition-fast, all .15s ease);
  will-change: transform;
  cursor: pointer;
}

.hover-card:hover,
.hover-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--sh-md, 0 4px 12px rgba(11,31,56,.12));
  border-color: var(--color-accent-a40, rgba(13,148,136,.40));
}

.hover-card:active {
  transform: translateY(0);
  transition-duration: var(--pf-dur-press, 65ms);
}

/* Versión dark — para cards sobre fondos oscuros (blog, rankings) */
.hover-card--dark:hover,
.hover-card--dark:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--sh-dark-md, 0 4px 12px rgba(0,0,0,.28));
  border-color: var(--color-accent-a30, rgba(13,148,136,.30));
}

@media (prefers-reduced-motion: reduce) {
  .hover-card,
  .hover-card--dark {
    transition: border-color var(--transition-fast, all .15s ease);
  }

  .hover-card:hover,
  .hover-card:focus-visible,
  .hover-card--dark:hover,
  .hover-card--dark:focus-visible {
    transform: none;
  }
}