/* ===========================================================
   UNIFORMES BOGOTÁ — Responsive (Tablet & Desktop)
=========================================================== */

/* ─── Tablet (≥ 640px) ───────────────────────────────── */
@media (min-width: 640px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

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

/* ─── Desktop (≥ 1024px) ─────────────────────────────── */
@media (min-width: 1024px) {

    section {
        padding-block: var(--sp-24);
    }

    .container {
        padding-inline: var(--sp-8);
    }

    /* Nav */
    .hamburger {
        display: none;
    }

    .nav-links {
        display: flex;
        align-items: center;
        gap: var(--sp-8);
    }

    .nav-links a {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--clr-ink);
        transition: color 0.2s;
    }

    .nav-links a:hover {
        color: var(--clr-accent);
    }

    /* Hero */
    .hero {
        justify-content: center;
        padding-top: 120px;
    }

    .hero-blob-1 {
        width: 45vw;
        height: 45vw;
    }

    .hero-blob-2 {
        width: 30vw;
        height: 30vw;
    }

    .hero-blob-3 {
        width: 22vw;
        height: 22vw;
    }

    /* Services */
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .service-card {
        min-height: 280px;
    }

    /* Branding */
    .branding-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

/* ─── Wide (≥ 1280px) ────────────────────────────────── */
@media (min-width: 1280px) {
    .services-grid {
        gap: var(--sp-6);
    }

    .hero-content {
        max-width: 1100px;
    }
}

/* ─── Reduced Motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal,
    .reveal-up,
    .reveal-scale,
    .reveal-left,
    .reveal-right {
        opacity: 1;
        transform: none;
    }

    .hero-eyebrow,
    .hero-title,
    .hero-subtitle,
    .hero-ctas,
    .hero-scroll-hint {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .ticker-track {
        animation: none;
    }

    .hero-bg-blob {
        animation: none;
    }
}