/* =========================================
   ABBA ACADEMY - MOBILE SPECIFIC OVERRIDES
   Este archivo SOLO se lee en pantallas pequeñas
   (teléfonos y tablets verticales).
   ========================================= */

@media screen and (max-width: 768px) {

    /* 1. Prevenir desbordamiento horizontal global */
    body, html {
        overflow-x: hidden;
        width: 100%;
    }

    /* 2. Ajustes Generales de Espaciado para legibilidad */
    .hero, .section, .content, .dashboard-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 3. Todas las tablas deben poder desplazarse hacia los lados (Scroll Horizontal) */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch; /* Para scroll suave en iOS */
    }

    /* 4. Imágenes siempre adaptadas al ancho de la pantalla */
    img, iframe {
        max-width: 100%;
        height: auto;
    }

    /* 5. Asegurar que las cuadrículas (Grids) pasen a 1 sola columna en celular */
    .grid, .blog-grid, .pricing-grid, .features-grid, .day-grid, .students-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* 6. Optimizar tamaños de fuente para celulares */
    h1 { font-size: 2.2rem !important; }
    h2 { font-size: 1.8rem !important; }
    h3 { font-size: 1.4rem !important; }
    p { font-size: 1rem !important; }

    /* 7. Botones táctiles más cómodos (mínimo 44px de alto para el dedo) */
    button, .btn-primary, .btn-secondary, .btn-cta {
        padding: 12px 20px !important;
        min-height: 44px;
        font-size: 1rem !important;
    }

    /* Agrega aquí cualquier otra corrección que vayas notando al probar en tu celular */
}