/* CSS específico para pantallas 2K y superiores */

/* Breakpoints personalizados */
@media (min-width: 1536px) {
    /* 2XL - Pantallas 2K (1536px+) */
    .text-responsive-2xl {
        font-size: 1.25rem; /* 20px */
        line-height: 1.75rem; /* 28px */
    }
    
    .heading-responsive-2xl {
        font-size: 3rem; /* 48px */
        line-height: 1.1;
    }
    
    .container-2xl {
        max-width: 1536px;
        margin: 0 auto;
        padding: 0 2rem;
    }
    
    /* Espaciados mejorados para 2K */
    .py-responsive-2xl {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    
    .gap-responsive-2xl {
        gap: 2rem;
    }
    
    /* Grid adaptativo para 2K */
    .grid-responsive-2xl {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    
    .grid-responsive-video-2xl {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    
    .grid-responsive-cards-2xl {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1920px) {
    /* 3XL - Pantallas 3K (1920px+) */
    .text-responsive-3xl {
        font-size: 1.375rem; /* 22px */
        line-height: 1.875rem; /* 30px */
    }
    
    .heading-responsive-3xl {
        font-size: 3.75rem; /* 60px */
        line-height: 1;
    }
    
    .container-3xl {
        max-width: 1920px;
        margin: 0 auto;
        padding: 0 2.5rem;
    }
    
    /* Espaciados mejorados para 3K */
    .py-responsive-3xl {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    
    .gap-responsive-3xl {
        gap: 2.5rem;
    }
    
    /* Grid adaptativo para 3K */
    .grid-responsive-3xl {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
    
    .grid-responsive-video-3xl {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
    
    .grid-responsive-cards-3xl {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 2560px) {
    /* 4XL - Pantallas 4K (2560px+) */
    .text-responsive-4xl {
        font-size: 1.5rem; /* 24px */
        line-height: 2rem; /* 32px */
    }
    
    .heading-responsive-4xl {
        font-size: 4.5rem; /* 72px */
        line-height: 1;
    }
    
    .container-4xl {
        max-width: 2400px;
        margin: 0 auto;
        padding: 0 3rem;
    }
    
    /* Espaciados mejorados para 4K */
    .py-responsive-4xl {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
    
    .gap-responsive-4xl {
        gap: 3rem;
    }
    
    /* Grid adaptativo para 4K */
    .grid-responsive-4xl {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    
    .grid-responsive-video-4xl {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    
    .grid-responsive-cards-4xl {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    
    /* Navegación mejorada para 4K */
    .nav-4xl {
        font-size: 1.125rem;
        padding: 1rem 1.5rem;
    }
    
    /* Botones mejorados para 4K */
    .btn-4xl {
        padding: 1rem 2rem;
        font-size: 1.125rem;
    }
}

/* Utilidades adicionales para pantallas grandes */
@media (min-width: 1536px) {
    /* Tarjetas con mejor proporción */
    .card-large-screen {
        min-height: 200px;
        padding: 2rem;
    }
    
    .card-image-large {
        height: 5rem;
        width: 100%;
    }
    
    /* Formularios más espaciosos */
    .form-large-screen {
        padding: 2.5rem;
        border-radius: 1rem;
    }
    
    .form-input-large {
        padding: 1rem 1.5rem;
        font-size: 1.125rem;
    }
    
    /* Modales más grandes */
    .modal-large-screen {
        max-width: 60rem;
        padding: 3rem;
    }
    
    /* Footer mejorado */
    .footer-large-screen {
        padding: 4rem 0;
    }
    
    .footer-content-large {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

/* Animaciones optimizadas para pantallas grandes */
@media (min-width: 1920px) {
    .animate-smooth-large {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .hover-scale-large:hover {
        transform: scale(1.08);
    }
    
    .hover-lift-large:hover {
        transform: translateY(-12px);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
}

/* Navegación sticky mejorada para pantallas grandes */
@media (min-width: 1536px) {
    .navbar-large-screen {
        backdrop-filter: blur(20px);
    }
    
    .navbar-large-screen .container-2k {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    
    .navbar-logo-large {
        height: 3rem;
    }
    
    .navbar-links-large {
        font-size: 1.125rem;
        padding: 0.75rem 1.5rem;
    }
}

/* Optimizaciones de performance para pantallas grandes */
@media (min-width: 2560px) {
    * {
        /* Mejora del renderizado en pantallas 4K */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Imágenes optimizadas */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    /* Sombras suaves */
    .shadow-4k {
        box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.15);
    }
    
    /* Bordes más visibles */
    .border-4k {
        border-width: 2px;
    }
}