/* ============================================================
   responsive.css — media queries
   Mobile-first: estilos base en otros archivos asumen mobile.
   Breakpoints (siguiendo el brief):
     - sm:  640px
     - md:  768px
     - lg:  1024px
     - xl:  1280px
   Se puebla a medida que cada fase agrega rules que requieren
   ajuste por viewport (Fase 2 navbar, Fase 4 grid features, etc.).
   ============================================================ */

/* ---- sm (≥640px): footer en 2 columnas + features 2x ---- */
@media (min-width: 640px) {
    .site-footer__inner {
        grid-template-columns: 2fr 1fr;
        align-items: start;
    }

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

/* ---- md (≥768px): footer en 3 columnas + features 3x ---- */
@media (min-width: 768px) {
    .site-footer__inner {
        grid-template-columns: 2fr 1fr 1fr;
        gap: 56px;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
}

/* ---- lg (≥1024px): logo navbar un poco más alto ---- */
@media (min-width: 1024px) {
    .site-header__logo img {
        height: 36px;
    }
}

/* ---- xl (≥1280px): aún no requiere reglas específicas ---- */
/* @media (min-width: 1280px) { } */