/* ═══════════════════════════════════════════
   RESPONSIVE — Mobile-first
   Breakpoints: sm = 640px  |  md = 1024px
════════════════════════════════════════════ */


/* ── MOBILE (< 640px) ── */

@media (max-width: 639px) {

  /* Intro */
  .intro__logo-svg {
    width: 220px;
  }

  .intro__match,
  .intro__found {
    font-size: clamp(3.2rem, 18vw, 5rem);
    letter-spacing: 0.1em;
  }

  .intro__players {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .intro__player {
    min-width: 90px;
  }

  .intro__accept-btn {
    padding: 0.8rem 2.5rem;
    font-size: 0.9rem;
  }

  /* Timeline — una sola columna a la derecha de la línea */
  .timeline__track {
    left: 24px;
    transform: none;
  }

  .timeline__wrapper {
    padding-left: 3.5rem;
    padding-right: 1rem;
  }

  .timeline__list {
    gap: 2.5rem;
  }

  .timeline__item {
    display: block;  /* colapsar grid a bloque */
    padding-left: 0;
  }

  .timeline__dot {
    left: -2rem;
    top: 1.8rem;
    transform: none;
  }

  .timeline__item--left .event-card,
  .timeline__item--right .event-card {
    max-width: 100%;
    width: 100%;
  }

  /* Animaciones desde abajo en mobile (más natural para una columna) */
  .timeline__item.is-visible.timeline__item--left .event-card,
  .timeline__item.is-visible.timeline__item--right .event-card {
    animation: cardRevealRight 0.6s var(--ease-cinema) var(--animation-delay, 0s) both;
  }

  /* Header */
  .timeline-header {
    padding: 4rem 1.5rem 2.5rem;
  }

  /* Celebration */
  .celebration__badge {
    padding: 1rem 1.5rem;
  }

  .celebration__badge-number {
    font-size: clamp(3.5rem, 18vw, 5.5rem);
  }

  .celebration__content {
    padding: 2rem 1rem;
  }
}


/* ── TABLET (640px – 1023px) ── */

@media (min-width: 640px) and (max-width: 1023px) {

  .timeline__wrapper {
    padding: 2rem 3rem 6rem;
  }

  .timeline__list {
    gap: 3rem;
  }

  .timeline__item--left .event-card,
  .timeline__item--right .event-card {
    max-width: 360px;
  }

  .timeline-header__title {
    font-size: clamp(2rem, 6vw, 3.5rem);
  }
}


/* ── DESKTOP (>= 1024px) ── */

@media (min-width: 1024px) {

  .timeline__wrapper {
    padding: 3rem 4rem 8rem;
  }

  .timeline__list {
    gap: 5rem;
  }

  /* Asegurar que el dot quede centrado en la línea en desktop */
  .timeline__dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}


/* ── Reducir movimiento (accesibilidad) ── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .timeline__item {
    opacity: 1;
  }
}