/* Mobile First — breakpoints adicionales */

/* ─── Small mobile ≤ 480px ──────────────────────────────────────────────── */
@media (max-width: 480px) {

    /* Seguridad: nada puede desbordar el ancho del viewport */
    * { max-width: 100%; }
    img, iframe, video { max-width: 100%; width: 100%; }

    .container,
    .hero__content {
        padding-inline: 1.25rem;
    }

    /* ── Hero ── */
    .hero__name {
        font-size: clamp(2rem, 11vw, 3.5rem);
    }

    .hero__album {
        font-size: clamp(1.6rem, 9vw, 3rem);
    }

    .hero__venue-badge {
        font-size: 0.65rem;
        padding: 5px 10px;
    }

    .hero__meta {
        gap: 0.5rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .hero__meta-sep {
        display: none;
    }

    .hero__meta-item {
        font-size: 1rem;
        letter-spacing: 0.03em;
    }

    .btn-cta {
        width: 100%;
        padding: 16px 24px;
        white-space: normal;
    }

    .hero {
        min-height: 80svh;
        padding-bottom: var(--space-lg);
    }

    /* ── Urgency bar ── */
    .urgency-bar {
        font-size: 0.7rem;
        letter-spacing: 0.06em;
        padding-inline: var(--space-sm);
        white-space: normal;
        line-height: 1.4;
    }

    /* ── Countdown: fila única, sin separadores ── */
    .countdown-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 0.25rem;
    }

    .countdown-sep {
        display: none;
    }

    .countdown-item {
        flex: 1;
        min-width: 0;
    }

    .countdown-number {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .countdown-label {
        font-size: 0.6rem;
        letter-spacing: 0.1em;
    }

    /* ── Video YouTube ── */
    .yt-wrapper {
        width: 100%;
        max-width: 100%;
    }

    /* ── Secciones generales ── */
    section {
        padding-block: var(--space-lg);
    }

    .about-text {
        font-size: 1rem;
        word-break: break-word;
    }

    /* ── Cards ── */
    .cards-grid {
        grid-template-columns: 1fr 1fr;
    }

    .card__value {
        font-size: clamp(1rem, 4vw, 1.3rem);
        word-break: break-word;
    }

    /* ── Mapa ── */
    .map-wrapper {
        aspect-ratio: 4/3;
    }
}

/* ─── Tablet ≥ 640px ─────────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .hero__content {
        padding-inline: var(--space-lg);
    }

    .countdown-grid {
        gap: var(--space-lg);
    }

    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─── Desktop ≥ 1024px ───────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .hero__content {
        max-width: 900px;
    }

    .cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .how-to-get {
        grid-template-columns: repeat(4, 1fr);
    }

    .hero {
        min-height: 100vh;
    }
}

/* ─── Print ──────────────────────────────────────────────────────────────── */
@media print {
    .urgency-bar,
    .sticky-cta,
    .hero__bg { display: none; }
}

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