/* ============================================================
   GAFAS MEDELLÍN — responsive.css
   Ajustes globales responsive que aplican a TODAS las páginas.
   Cada CSS de página (products, detail, cart, checkout, contact)
   ya trae sus propios @media para sus componentes específicos.
   Aquí van: tipografía global, espaciados de sección, nav móvil,
   hero, banners, utilidades transversales.

   Breakpoints: 1200px / 992px / 768px / 480px
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   1200px — Desktop grande → estándar
══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    :root {
        --space-20: 4.5rem;
        --space-24: 5rem;
        --space-32: 6rem;
    }

    .section     { padding-top: var(--space-16); padding-bottom: var(--space-16); }
    .section--lg { padding-top: var(--space-20); padding-bottom: var(--space-20); }
}


/* ══════════════════════════════════════════════════════════════
   992px — Tablet landscape / laptop chico
══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
    :root {
        --space-20: 4rem;
        --space-24: 4.5rem;
        --space-32: 5rem;
    }

    .section-title { font-size: var(--size-xl); }
    .section       { padding-top: var(--space-12); padding-bottom: var(--space-12); }
    .section--lg   { padding-top: var(--space-16); padding-bottom: var(--space-16); }
    .section--sm   { padding-top: var(--space-8);  padding-bottom: var(--space-8); }

    /* Nav: ocultar desktop, mostrar hamburger */
    .site-nav      { display: none; }
    .hamburger     { display: flex; }
}


/* ══════════════════════════════════════════════════════════════
   768px — Tablet portrait / mobile grande
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    :root {
        --size-2xl:  1.875rem;
        --size-3xl:  2.25rem;
        --space-12:  2rem;
        --space-16:  2.5rem;
    }

    .section       { padding-top: var(--space-10); padding-bottom: var(--space-10); }
    .section--sm   { padding-top: var(--space-8);  padding-bottom: var(--space-8); }
    .section--lg   { padding-top: var(--space-12); padding-bottom: var(--space-12); }
    .section-header { margin-bottom: var(--space-8); }

    .eyebrow { font-size: var(--size-xs); }

    /* Hero — el aspect-ratio lo controla style.css por breakpoint */
    .hero__title    { font-size: clamp(2.25rem, 10vw, 3rem); }
    .hero__desc     { font-size: var(--size-base); max-width: 36ch; }

    /* Mid-banner */
    .mid-banner          { min-height: 320px; }
    .mid-banner__title   { font-size: var(--size-3xl); }

    /* Products grid: 2 columnas */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    /* Categories: 2 columnas */
    .categories-grid {
        grid-template-columns: 1fr 1fr;
    }
    .category-card:first-child {
        grid-column: 1 / 3;
    }

    /* Testimonios: 1 columna */
    .testimonials-grid { grid-template-columns: 1fr; }

    /* Newsletter: apilar input */
    .newsletter-form { flex-direction: column; }

    /* Footer */
    .footer-grid       { grid-template-columns: 1fr; }
    .footer-bottom     { flex-direction: column; gap: var(--space-3); text-align: center; }

    /* Search overlay full-width */
    .search-overlay__box {
        width: calc(100% - var(--space-8));
        max-width: 100%;
    }

    /* Botones */
    .btn {
        padding: 12px 22px;
        font-size: var(--size-sm);
    }

    /* Tablas: scroll horizontal */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ══════════════════════════════════════════════════════════════
   480px — Mobile chico
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    :root {
        --size-3xl: 2rem;
    }

    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .section-title { font-size: var(--size-lg); }
    .gold-line     { width: 36px; }

    /* Hero — aspect-ratio controlado en style.css */

    .hero__cta {
        flex-direction: column;
        gap: var(--space-3);
    }
    .hero__cta .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Products grid: 2 columnas compactas */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    /* Categories */
    .categories-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }
    .category-card { height: 140px; }
    .category-card:first-child {
        grid-column: 1 / 3;
        height: 180px;
    }

    /* Brands rail: wrap centrado */
    .brands-rail {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-4);
    }

    /* Mid-banner */
    .mid-banner          { min-height: 260px; }
    .mid-banner__title   { font-size: var(--size-2xl); }
    .mid-banner__content .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Toast */
    .toast {
        left: var(--space-4);
        right: var(--space-4);
        width: auto;
        text-align: center;
    }
}


/* ══════════════════════════════════════════════════════════════
   Accesibilidad: reducir movimiento
══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}