/* =====================================================================
   NO MARGINS MOBILE v2 — Quitar márgenes/padding laterales para
   aprovechar TODA la pantalla móvil sin perder espacio.
   Solo afecta a viewports <= 900px (móvil/tablet).
   ===================================================================== */

@media (max-width: 900px) {
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    .main-app, #mainApp, main {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Secciones del portafolio: SOLO 4px de padding lateral */
    .portfolio-section,
    section[id] {
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .section-container,
    .container,
    .content-container {
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Hero */
    .hero, .hero-section, #heroScreen, .hero-content {
        padding-left: 6px !important;
        padding-right: 6px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    header, .site-header, .top-header {
        padding-left: 6px !important;
        padding-right: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    nav, .frozen-nav, .nav-fixed, .main-nav {
        padding-left: 4px !important;
        padding-right: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Section headers — sí necesitan algo de padding para legibilidad */
    .section-header-block,
    .section-header {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .section-tag,
    .section-title-main,
    .section-subtitle,
    .section-underline {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    /* Acordeones full-width */
    .accordion-block,
    .accordion-premium,
    .accordion-pro,
    .accordion-toggle,
    .accordion-premium-toggle,
    .accordion-panel,
    .accordion-premium-panel,
    .webapp-section-block,
    .webapp-section-btn,
    .webapp-section-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .accordion-toggle,
    .accordion-premium-toggle,
    .webapp-section-btn {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .accordion-panel,
    .accordion-premium-panel {
        padding: 12px 4px !important;
    }
    .webapp-section-grid.open {
        padding: 12px 6px !important;
    }

    /* Galerías y grids */
    .design-gallery,
    .video-gallery,
    .project-grid,
    .arch-gallery,
    .cert-grid,
    .architect-grid,
    .webapp-gallery,
    .webapp-gallery-premium {
        padding-left: 2px !important;
        padding-right: 2px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        gap: 8px !important;
    }

    #about, .about-section, .about-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    footer, .site-footer {
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .contact-form, #contactForm {
        padding-left: 6px !important;
        padding-right: 6px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .design-card-pro,
    .video-card-pro,
    .project-card-pro,
    .arch-pro-card,
    .cert-card-pro,
    .webapp-pro {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .hero-image, .hero-img {
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* Móvil pequeño: padding mínimo */
@media (max-width: 480px) {
    .portfolio-section,
    section[id],
    .section-container,
    .container,
    #web-apps,
    #web-apps .section-container {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    .accordion-toggle,
    .accordion-premium-toggle,
    .webapp-section-btn {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .accordion-panel,
    .accordion-premium-panel,
    .webapp-section-grid.open {
        padding: 10px 4px !important;
    }
    .section-title-main {
        font-size: 1.5rem !important;
    }
    .webapp-pro,
    .design-card-pro,
    .video-card-pro,
    .arch-pro-card,
    .cert-card-pro {
        padding: 14px 12px !important;
    }
}