/* /assets/css/responsive.css */
/* Media queries para diseño responsive de Hypermathics */

/* ═══════════════════════════════════════════════════
   TABLET (max-width: 1024px)
═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-visual { display: none; }
    .hero-title { font-size: 2.8rem; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .counting-grid { grid-template-columns: 1fr; gap: 40px; }
    .counters-grid { grid-template-columns: repeat(3, 1fr); }
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════
   MOBILE GRANDE (max-width: 768px)
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ── Navbar ── */
    .nav-menu {
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        background: rgba(5, 10, 24, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 20px;
        gap: 4px;
        border-bottom: 1px solid var(--color-border);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-normal);
    }

    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-link {
        width: 100%;
        padding: 12px 16px;
        font-size: 0.95rem;
    }

    .btn-cta-nav {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }

    .mobile-toggle {
        display: flex;
    }

    /* ── Hero ── */
    .hero-section { padding: 120px 0 80px; min-height: auto; }
    .hero-title { font-size: 2.2rem; }
    .hero-typed-wrapper { font-size: 1.2rem; }
    .hero-desc { font-size: 0.9rem; }
    .hero-stats { gap: 24px; justify-content: center; }
    .hero-buttons { justify-content: center; }

    /* ── Secciones ── */
    .services-grid { grid-template-columns: 1fr; }
    .process-grid { grid-template-columns: 1fr; }
    .portfolio-grid { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .counters-grid { grid-template-columns: 1fr; }

    /* ── Formulario ── */
    .form-row { grid-template-columns: 1fr; }
    .contact-form-wrap { padding: 24px; }

    /* ── Footer ── */
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; text-align: center; }

    /* ── Secciones padding ── */
    .services-section,
    .about-section,
    .process-section,
    .portfolio-section,
    .testimonials-section,
    .contact-section {
        padding: 60px 0;
    }

    .section-header { margin-bottom: 40px; }
}

/* ═══════════════════════════════════════════════════
   MOBILE PEQUEÑO (max-width: 480px)
═══════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .hero-title { font-size: 1.8rem; }
    .hero-typed-wrapper { font-size: 1rem; }
    .section-title { font-size: 1.6rem; }
    .hero-buttons { flex-direction: column; }
    .btn-primary, .btn-outline { width: 100%; justify-content: center; }
    .hero-stats { flex-direction: column; align-items: center; gap: 16px; }
    .counting-info h2 { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════════
   RESUMEN DEL ARCHIVO
   Archivo: /assets/css/responsive.css
   Función: Media queries para adaptar el diseño del sitio a distintos
   dispositivos: tablet (1024px), mobile grande (768px) y mobile
   pequeño (480px). Ajusta grids, tipografía, navegación móvil
   con menú hamburguesa, y espaciado de secciones.
═══════════════════════════════════════════════════ */