/* ===== RESPONSIVE MOBILE - APLICA A TODAS LAS PÁGINAS ===== */
@media (max-width: 768px) {
    /* === AJUSTES GENERALES === */
    body {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .container {
        padding: 0 1rem;
    }
    
    /* === HEADER Y NAVEGACIÓN === */
    nav {
        padding: 1rem;
    }
    
    .logo {
        font-size: 1.2rem;
    }
    
    .mobile-nav-item {
        font-size: 1.5rem;
    }
    
    /* === TÍTULOS GENERALES === */
    h1 {
        font-size: 2rem !important;
    }
    
    h2 {
        font-size: 1.8rem !important;
    }
    
    h3 {
        font-size: 1.5rem !important;
    }
    
    /* === SECCIONES COMUNES === */
    section {
        padding: 3rem 1rem !important;
    }
    
    /* === GRIDS Y FLEXBOX === */
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .flex-row {
        flex-direction: column !important;
    }
    
    /* === FORMULARIOS === */
    form {
        padding: 1.5rem !important;
    }
    
    input, textarea, select {
        font-size: 16px !important; /* Evita zoom en iOS */
        width: 100% !important;
    }
    
    /* === BOTONES === */
    .btn, .button, .cta-button {
        width: 100% !important;
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        margin: 0.5rem 0 !important;
    }
    
    .btn-group {
        flex-direction: column !important;
        gap: 0.8rem !important;
    }
    
    /* === CARDS Y TARJETAS === */
    .card, .product-card, .book-card {
        margin: 1rem 0 !important;
        padding: 1.5rem !important;
    }
    
    /* === IMÁGENES === */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* === TEXTOS LARGOS === */
    p, .text-content {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    /* === TABLAS === */
    table {
        font-size: 0.9rem !important;
    }
    
    /* === MODALES Y POPUPS === */
    .modal-content {
        width: 95% !important;
        margin: 1rem !important;
        padding: 1.5rem !important;
    }
    
    /* === FOOTER === */
    footer {
        padding: 2rem 1rem !important;
    }
    
    .footer-content {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1.5rem !important;
    }
}

/* === MÓVILES MUY PEQUEÑOS === */
@media (max-width: 480px) {
    h1 {
        font-size: 1.8rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    section {
        padding: 2rem 1rem !important;
    }
    
    .card, .product-card {
        padding: 1rem !important;
    }
}