/* ==========================================================================
   DVB - Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .services-grid,
    .about-grid,
    .why-grid,
    .contact-grid { grid-template-columns: 1fr; }

    .projects-grid { grid-template-columns: repeat(2, 1fr); }
    .dvb-photo-strip { height: 380px; }

    .hero-content h1 { font-size: 46px; }
    .cta-box h2 { font-size: 34px; }
    .cta-box { padding: 60px 30px; }

    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
    .footer-brand { grid-column: 1 / -1; border-right: none; padding-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 30px; }
}

@media (max-width: 860px) {

    .menu-toggle { display: flex; }

    /* Panel off-canvas */
    .main-navigation {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(320px, 82vw);
        background: var(--dvb-navy-dark);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 110px 36px 40px;
        transform: translateX(100%);
        transition: transform .4s cubic-bezier(.4,0,.2,1);
        z-index: 1000;
        box-shadow: -10px 0 40px rgba(15, 23, 42, .3);
    }

    .main-navigation.is-open {
        transform: translateX(0);
    }

    .main-navigation .menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        width: 100%;
    }

    .main-navigation .menu a {
        color: var(--dvb-white);
        font-size: 18px;
    }

    /* El panel móvil siempre tiene fondo oscuro, así que el texto
       debe permanecer blanco sin importar si el header está "scrolled" */
    .dvb-header.is-scrolled .main-navigation .menu a {
        color: var(--dvb-white);
    }

    .main-navigation .menu a:hover {
        color: var(--dvb-gold-light);
    }

    /* En móvil los íconos junto al CTA se ocultan (no caben en la
       barra compacta) y reaparecen dentro del panel off-canvas,
       anclados abajo con más espacio y separador arriba */
    .header-socials { display: none; }

    .nav-socials {
        display: flex;
        margin: auto 0 0;
        padding-top: 26px;
        border-top: 1px solid rgba(255, 255, 255, .15);
        gap: 16px;
    }

    .nav-social-link {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, .1);
        color: var(--dvb-white);
    }

    .nav-social-link svg { width: 18px; height: 18px; }

    /* En móvil el botón de cotizar vive solo en el header (junto al
       hamburger); se vuelve compacto para que ambos quepan sin apretar */
    #dvb-header-cta {
        padding: 10px 16px;
        font-size: 13px;
    }

    body.nav-is-open { overflow: hidden; }

    .dvb-hero { height: auto; padding: 160px 0 90px; min-height: 0; }
    .hero-content h1 { font-size: 36px; }
    .hero-buttons { flex-direction: column; }
    .hero-buttons .button { text-align: center; }

    .dvb-about,
    .dvb-services,
    .dvb-why,
    .dvb-projects,
    .dvb-cta,
    .dvb-contact { padding: 70px 0; }

    .projects-grid { grid-template-columns: 1fr; }
    .why-stats { grid-template-columns: 1fr 1fr; }
    .dvb-photo-strip { height: 340px; }
    .photo-strip-caption { bottom: 24px; flex-direction: column; align-items: flex-start; }
    .photo-strip-text { padding: 14px 18px; }
    .photo-strip-caption p { font-size: 16px; }
    .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .section-title h2 { font-size: 30px; }

    .footer-brand { border-right: none !important; padding-right: 0 !important; }
}

@media (max-width: 480px) {
    /* Celulares angostos: Astra (theme padre) a veces reintroduce su propio
       tamaño de fuente vía Customizer con más especificidad/orden de carga,
       por eso estas reglas van más específicas para asegurar que ganen. */
    .dvb-hero .hero-content h1 { font-size: 28px; line-height: 1.2; }
    .dvb-hero .hero-content p  { font-size: 16px; }
    .hero-tag { font-size: 11px; padding: 7px 14px; }

    .cta-box h2 { font-size: 26px; }
    .cta-box p  { font-size: 15px; }
    .cta-box { padding: 50px 22px; }

    .section-title h2,
    .why-copy h2,
    .about-copy h2 { font-size: 26px; }

    .why-stats { grid-template-columns: 1fr; }
    .stat-number { font-size: 30px; }
}