/* ==========================================================================
   Sistema de movimiento — FX Expo Global
   Un solo vocabulario de duración, curva y distancia para todo el sitio.
   Antes había 16 keyframes sueltos y easings distintos por componente
   (ease, all .2s, .25s, .7s…), y por eso las animaciones no se sentían
   parte del mismo sistema.
   ========================================================================== */

:root {
  /* Duraciones: 3 escalones, nada intermedio */
  --dur-fast: 160ms;    /* hover, cambios de color */
  --dur-base: 320ms;    /* la mayoría: elevar tarjetas, desplegables */
  --dur-slow: 620ms;    /* entradas al hacer scroll */

  /* Curvas */
  --ease-out: cubic-bezier(.22, .61, .36, 1);      /* entra y frena: por defecto */
  --ease-spring: cubic-bezier(.34, 1.32, .64, 1);  /* con rebote leve: chips, iconos */

  /* Distancia de recorrido */
  --lift: 4px;      /* cuánto sube una tarjeta al pasar el mouse */
  --rise: 24px;     /* desde dónde entra un bloque al aparecer */
}

/* ── Entrada al hacer scroll ──────────────────────────────────────────────
   .reveal ya existía; aquí solo se homogeneiza la curva y la distancia.   */
.reveal,
.reveal-left,
.reveal-right {
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal        { transform: translateY(var(--rise)); }
.reveal-left   { transform: translateX(calc(var(--rise) * -1)); }
.reveal-right  { transform: translateX(var(--rise)); }

/* Variante para elementos que además escalan (tarjetas destacadas) */
.reveal-pop { opacity: 0; transform: translateY(var(--rise)) scale(.97);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-spring); }
.reveal-pop.visible { opacity: 1; transform: translateY(0) scale(1); }

/* ── Elevación al pasar el mouse ─────────────────────────────────────────
   Una sola regla para todo lo que sea una "tarjeta".                      */
.u-lift { transition: transform var(--dur-base) var(--ease-out),
                      box-shadow var(--dur-base) var(--ease-out); }
.u-lift:hover { transform: translateY(calc(var(--lift) * -1)); }

/* ── Chip de sección (eyebrow) ───────────────────────────────────────────
   El icono entra girando un poco y el chip se asienta. Sutil: se nota que
   "llegó", no que está animándose todo el rato.                           */
.section-tag,
.q-section-tag,
.cup-section-tag,
.ph-eyebrow,
.xp-eyebrow,
.mc-eyebrow,
.cta-eyebrow,
.hero-eyebrow,
.ec-section-tag-gold {
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out);
}
.section-tag .icon,
.q-section-tag .icon,
.cup-section-tag .icon,
.ph-eyebrow .icon,
.xp-eyebrow .icon,
.mc-eyebrow .icon,
.cta-eyebrow .icon,
.hero-eyebrow .icon,
.ec-section-tag-gold .icon {
  transition: transform var(--dur-base) var(--ease-spring);
}
/* Al entrar en pantalla, el icono del chip hace un pequeño gesto */
.visible > .section-tag .icon,
.visible .section-tag .icon,
.section-tag.visible .icon {
  animation: iconArrive var(--dur-slow) var(--ease-spring) both;
}
@keyframes iconArrive {
  0%   { transform: scale(.6) rotate(-12deg); opacity: 0; }
  100% { transform: scale(1)   rotate(0);      opacity: 1; }
}

/* El icono reacciona cuando el usuario pasa por encima del bloque */
.section-tag:hover .icon,
.q-section-tag:hover .icon,
.cup-section-tag:hover .icon,
.ph-eyebrow:hover .icon,
.cta-eyebrow:hover .icon { transform: scale(1.14) rotate(-6deg); }

/* ── Flechas de "seguir leyendo" ─────────────────────────────────────────
   Se desplazan hacia donde apuntan cuando el enlace recibe el mouse.      */
a:hover > .ic-arrow-right,
a:hover > .ic-arrow-right-long,
.btn:hover .ic-arrow-right,
a:hover .ic-chevron-right { transform: translateX(3px); }
.ic-arrow-right, .ic-arrow-right-long, .ic-chevron-right {
  transition: transform var(--dur-base) var(--ease-out);
}
[dir="rtl"] a:hover > .ic-arrow-right,
[dir="rtl"] a:hover .ic-chevron-right { transform: scaleX(-1) translateX(3px); }

/* ── Respeto por quien prefiere menos movimiento ─────────────────────────
   Requisito de accesibilidad: si el sistema operativo pide reducir
   animaciones, todo se muestra sin desplazamiento.                        */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-pop { opacity: 1; transform: none; }
}

/* ── Unificación de la temporización de las tarjetas ─────────────────────
   Estos 36 componentes ya se elevaban al pasar el mouse, pero cada uno con
   su propia duración y curva (.2s, .25s, all .22s…). Aquí se igualan todos
   al mismo gesto; los colores, sombras y distancias de cada componente se
   respetan tal como están. */
.activity-zone, .audience-card, .aw-winner, .award-card, .award-cat,
.award-item, .benefit-card, .blog-card, .btn-nav-cta, .btn-primary,
.btn-sponsor-gold, .cookie-btn-accept, .fc-btn, .footer-social a,
.gal-album, .highlight-card, .ht-card, .mission-card, .package-card,
.partner-logo, .pkg-card, .sp-card, .stat-item, .team-card, .ticket-card,
.tier-card, .value-card, .venue-card, .why-card {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

/* ── Botón de cerrar la barra flotante de CTA ────────────────────────────
   En móvil la barra tapa contenido, así que hay que poder quitarla.
   En escritorio aparece al pasar el mouse por la barra. */
.floating-countdown { position: relative; }
.fc-close {
  position: absolute; top: -10px; right: -6px;
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  background: #0d2814; color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 3px 12px rgba(0,0,0,.4);
  font-size: .78rem; line-height: 1; z-index: 3;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-spring),
              background-color var(--dur-fast) var(--ease-out);
}
.fc-close:hover { background: #1d7a3d; transform: scale(1.1); }
.fc-close:focus-visible { outline: 2px solid #6ee498; outline-offset: 2px; }

/* Escritorio: discreto hasta que el usuario se acerca a la barra */
@media (min-width: 861px) {
  .fc-close { opacity: 0; }
  .floating-countdown:hover .fc-close,
  .fc-close:focus-visible { opacity: 1; }
}
/* Móvil: siempre visible y con área de toque cómoda */
@media (max-width: 860px) {
  .fc-close { opacity: 1; width: 34px; height: 34px; top: -12px; right: 4px; }
}
[dir="rtl"] .fc-close { right: auto; left: -6px; }
@media (max-width: 860px) { [dir="rtl"] .fc-close { left: 4px; right: auto; } }

/* ── Icono decorativo del bloque de newsletter ───────────────────────────
   Ocupa el hueco entre el texto y el formulario, que quedaba vacío. */
.footer-newsletter { position: relative; }
.fn-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; flex-shrink: 0;
  margin-inline-end: 1.1rem;
  border-radius: 16px;
  color: #6ee498;
  font-size: 1.5rem;
  background: linear-gradient(145deg, rgba(110,228,152,.20), rgba(38,145,75,.10));
  border: 1px solid rgba(110,228,152,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out);
}
.footer-newsletter:hover .fn-ico {
  transform: translateY(-2px) rotate(-4deg);
  box-shadow: 0 8px 22px rgba(38,145,75,.30), inset 0 1px 0 rgba(255,255,255,.14);
}
@media (max-width: 700px) { .fn-ico { width: 46px; height: 46px; font-size: 1.25rem; margin-bottom: .6rem; } }