/* ============================================
   RESPONSIVE — Esta Es Mi App
   ============================================ */

/* === TABLET LANDSCAPE (max: 1200px) === */
@media (max-width: 1200px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-main { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* === TABLET (max: 992px) === */
@media (max-width: 992px) {
    .menu-toggle { display: flex; }

    .primary-nav {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(13, 21, 32, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-base);
        z-index: 1000;
    }

    .primary-nav.active { opacity: 1; visibility: visible; }

    .primary-nav .menu {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .primary-nav .menu li a {
        font-size: var(--fs-lg);
        padding: 0.8rem 2rem;
    }

    .header-cta {
        margin-left: 0;
        margin-top: var(--space-lg);
    }

    .about-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
    .about-image { order: -1; }
    .about-image img { height: 350px; }

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

/* === MOBILE (max: 768px) === */
@media (max-width: 768px) {
    :root {
        --header-height: 70px;
        --header-height-scrolled: 60px;
    }

    .section { padding: var(--space-2xl) 0; }
    .container { padding: 0 var(--space-sm); }

    .hero { min-height: 90vh; }
    .hero-content { padding: var(--space-2xl) var(--space-sm); }
    .hero-cta-group { flex-direction: column; align-items: center; }
    .hero-cta-group .btn { width: 100%; max-width: 300px; justify-content: center; }

    .trust-bar-inner { flex-direction: column; gap: var(--space-md); }

    .services-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
    .stat-item { padding: var(--space-md); }

    .about-features { grid-template-columns: 1fr; }

    .podcasts-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }

    .form-row { grid-template-columns: 1fr; }

    .footer-main { grid-template-columns: 1fr; gap: var(--space-xl); }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
    .footer-disclaimer { text-align: center; }

    .section-label::before,
    .section-label::after { width: 20px; }
}

/* === SMALL MOBILE (max: 576px) === */
@media (max-width: 576px) {
    .gallery-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }

    .hero-badge { font-size: 0.65rem; padding: 0.4rem 1rem; }

    .testimonial-card { padding: var(--space-md); }
    .testimonial-quote { font-size: var(--fs-base); }
    .testimonial-quote::before { font-size: 3rem; }

    .service-card { padding: var(--space-md); }

    .scroll-top { bottom: 20px; right: 20px; width: 42px; height: 42px; }
}