/* ============================================================
   TecnicGo — Landing · responsive.css
   Breakpoints: 992px (tablet), 768px (móvil grande), 576px (móvil)
   ============================================================ */

/* ---------- Tablet (≤ 992px) ---------- */
@media (max-width: 992px) {
    .section { padding: 4.5rem 0; }

    /* Menú colapsado */
    .navbar-collapse {
        background: color-mix(in srgb, var(--bg) 92%, transparent);
        backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        border: 1px solid var(--border); border-radius: var(--radius);
        padding: 1rem; margin-top: .8rem;
    }
    .nav-actions { flex-wrap: wrap; margin-top: .6rem; }
    .nav-actions .btn { flex: 1; text-align: center; }

    /* Hero a una columna */
    .hero { min-height: auto; padding: 5.5rem 0 3rem; text-align: center; }
    .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .hero-copy { order: 1; }
    .hero-visual { order: 2; }
    .hero-sub { margin-left: auto; margin-right: auto; }
    .hero-cta, .hero-trust { justify-content: center; }
    .hero-scroll { display: none; }

    /* Stats 2x2 */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* Categorías */
    .cat-grid { grid-template-columns: repeat(3, 1fr); }

    /* Beneficios, simulador, contacto, planes a 1 columna */
    .benefits-grid { grid-template-columns: 1fr; }
    .sim-card { grid-template-columns: 1fr; }
    .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .plan.featured { transform: none; }
    .contact-grid { grid-template-columns: 1fr; }

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

/* ---------- Móvil grande (≤ 768px) ---------- */
@media (max-width: 768px) {
    .section { padding: 3.5rem 0; }
    .section-head { margin-bottom: 2rem; }

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

    .benefit-col, .sim-card, .contact-info, .contact-form, .plan { padding: 1.6rem; }

    .footer-bottom { flex-direction: column; text-align: center; }
}

/* ---------- Móvil (≤ 576px) ---------- */
@media (max-width: 576px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .cat-grid { grid-template-columns: 1fr 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }

    .hero-title { font-size: clamp(2rem, 8vw, 2.6rem); }
    .hero-cta .btn { width: 100%; }

    /* Reducir el mockup para que respire */
    .phone { width: 240px; height: 480px; }
    .float-chip { display: none; }

    .float-wa { width: 50px; height: 50px; font-size: 1.4rem; right: 16px; bottom: 16px; }
    .to-top { right: 18px; bottom: 76px; }
}

/* ---------- Pantallas muy anchas ---------- */
@media (min-width: 1440px) {
    :root { --maxw: 1280px; }
}