/* ============================================
   RESPONSIVE CSS - MOBILE FIRST
   
   Este archivo es complementario y se mantiene por compatibilidad.
   Los estilos responsive principales están en style.css con
   enfoque Mobile First.
============================================ */

/* Nota: Los breakpoints principales están en style.css:
   - Base: Mobile (< 768px)
   - Tablet: 768px+
   - Desktop: 1024px+
*/

/* Optimizaciones adicionales para pantallas muy pequeñas */
@media (max-width: 360px) {
    .hero-title {
        font-size: 1.75rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}

/* Optimizaciones para pantallas grandes */
@media (min-width: 1440px) {
    .container {
        max-width: 1320px;
    }
    
    .hero-title {
        font-size: 4rem;
    }
    
    .section-header h2 {
        font-size: 3rem;
    }
}

/* Landscape móvil */
@media (max-height: 600px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
        padding: 3rem 0;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
}