/* ============================================================
   RESPONSIVE.CSS — Media queries globales
   Mobile-first: los estilos base son para móvil,
   aquí ajustamos para pantallas más grandes si es necesario.
   ============================================================ */

/* ----------------------------------------------------------
   BREAKPOINTS de referencia:
   --sm:  480px  — Móvil grande
   --md:  768px  — Tablet
   --lg:  900px  — Tablet landscape / laptop pequeño
   --xl: 1160px  — Desktop
   ---------------------------------------------------------- */


/* ----------------------------------------------------------
   CONTENEDOR — padding adaptable
   ---------------------------------------------------------- */

@media (max-width: 480px) {
    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}


/* ----------------------------------------------------------
   SECCIONES — padding vertical reducido en móvil
   ---------------------------------------------------------- */

@media (max-width: 768px) {
    :root {
        --section-pad: 64px;
    }

    .section__title {
        font-size: var(--text-3xl);
    }

    .section__sub {
        font-size: var(--text-base);
    }
}

@media (max-width: 480px) {
    :root {
        --section-pad: 48px;
    }
}


/* ----------------------------------------------------------
   BOTONES — full width en móvil pequeño
   ---------------------------------------------------------- */

@media (max-width: 480px) {
    .btn-primary,
    .btn-outline {
        width: 100%;
        justify-content: center;
    }
}


/* ----------------------------------------------------------
   GRIDS — ajuste de columnas
   ---------------------------------------------------------- */

@media (max-width: 900px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .grid-2,
    .grid-3,
    .grid-4 { grid-template-columns: 1fr; }
}


/* ----------------------------------------------------------
   FORMULARIOS — fila 2 columnas → 1 en móvil
   ---------------------------------------------------------- */

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr !important;
    }
}


/* ----------------------------------------------------------
   WHATSAPP FLOTANTE — más pequeño en móvil
   ---------------------------------------------------------- */

@media (max-width: 480px) {
    .whatsapp-float {
        width: 48px;
        height: 48px;
        bottom: 20px;
        right: 16px;
    }
}


/* ----------------------------------------------------------
   TIPOGRAFÍA — ajuste en pantallas muy pequeñas
   ---------------------------------------------------------- */

@media (max-width: 360px) {
    html { font-size: 14px; }
}


/* ----------------------------------------------------------
   PRINT — estilos de impresión básicos
   ---------------------------------------------------------- */

@media print {
    .site-header,
    .whatsapp-float,
    .nav__hamburger { display: none !important; }

    body {
        background: #fff;
        color: #000;
    }

    a { color: #000; }
}