/* module: 17-responsive-breakpoints (breakpoints globales) – KEEP-ORDER */

/* === Breakpoints base === */
@media (max-width: 1280px) { /* xl */ }

@media (max-width: 1024px) { /* lg */ }

@media (max-width: 768px) { /* md */ }

@media (max-width: 640px) { /* sm */ }

@media (max-width: 480px) { /* xs */ }

/* ==== Helpers de visibilidad y texto ==== */
@media (max-width: 768px) {
    .text-center-md {
        text-align: center !important;
    }
    
    .hidden-md {
        display: none !important;
    }
    
    .w-100-md {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .text-center-sm {
        text-align: center !important;
    }
    
    .hidden-sm {
        display: none !important;
    }
    
    .w-100-sm {
        width: 100% !important;
    }
}

/* ==== Layout genérico (no secciones) ==== */
@media (max-width: 1024px) {
    html {
        font-size: 14px;
    }
    
    .container {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }
    
    .features-grid,
    .grid-auto {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: var(--spacing-lg, 1.5rem);
    }
}

@media (max-width: 768px) {
    .container {
        padding-right: 1rem;
        padding-left: 1rem;
    }
    
    .full-width {
        margin-right: 0;
        margin-left: 0;
    }
    
    .flex-col-md {
        flex-direction: column !important;
    }
    
    .gap-md {
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {
    .container {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
    
    .flex-col-sm {
        flex-direction: column !important;
    }
    
    .gap-sm {
        gap: 0.75rem !important;
    }
}

/* ==== Navbar responsive global ==== */
@media (max-width: 768px) {
    .navbar .container {
        display: flex !important;
        flex-flow: row nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: var(--spacing-sm) !important;
    }
    
    .nav-links {
        display: none !important;
    }
    
    .logo {
        order: 1 !important;
        flex-shrink: 0 !important;
        display: flex !important;
    }
    
    /* COMENTADO: Reglas conflictivas movidas a landing.css específico
    .cta-button {
        order: 2 !important;
        flex-shrink: 0 !important;
        display: block !important;
    }
    
    .login-button {
        position: relative !important;
        z-index: 100 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: 3 !important;
        flex-shrink: 0 !important;
    }
    
    .login-btn {
        display: inline-flex !important;
        align-items: center !important;
        min-width: 70px !important;
        padding: 0.4rem 0.8rem !important;
        font-size: 0.8rem !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
    }
    */
    
    .mobile-menu-toggle {
        order: 4 !important;
        display: flex !important;
    }
}

@media (max-width: 480px) {
    .navbar .container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 var(--spacing-sm) !important;
    }
    
    .logo img {
        max-width: 140px !important;
        height: 35px !important;
    }
    
    .login-btn {
        min-width: 60px !important;
        padding: 0.3rem 0.6rem !important;
        font-size: 0.75rem !important;
    }
}

/* ==== Typography responsive ==== */
@media (max-width: 480px) {
    .section-title {
        font-size: 2rem;
    }
}

/* ==== Accessibility ==== */
@media (prefers-reduced-motion: reduce) {
    .transition-none {
        transition: none !important;
    }
    
    .transition-fast,
    .transition-normal,
    .transition-slow {
        transition: none !important;
    }
}