/*
CTC Separate Stylesheet
Updated: 2026-08-06 00:56:39
*/


/* ==========================================
   1. ESTILOS BASE & DESKTOP (> 1024px)
   ========================================== */

.portafolio-container {
    height: 50vh !important;
    border-radius: 1.3rem !important;
    overflow: hidden !important;
}

.portafolio-container img {
    height: 50vh !important;
    object-fit: cover !important;
    object-position: center !important;
}

.loop-videos .elementor-loop-container {
    display: grid !important;
    grid-template-columns: repeat(25, 1fr) !important;
    gap: 24px !important;
    grid-auto-rows: 1fr !important;
}

/* Fila impar: 48% / 52% */
.loop-videos .e-loop-item:nth-of-type(4n+1) { grid-column: span 12 !important; }
.loop-videos .e-loop-item:nth-of-type(4n+2) { grid-column: span 13 !important; }

/* Fila par: 52% / 48% */
.loop-videos .e-loop-item:nth-of-type(4n+3) { grid-column: span 13 !important; }
.loop-videos .e-loop-item:nth-of-type(4n)   { grid-column: span 12 !important; }


/* --- Efectos Hover (Video & Logo) --- */

.loop-videos .e-loop-item .elementor-widget-video img {
    transition: transform .5s ease, filter .5s ease;
    will-change: transform, filter;
}

.loop-videos .e-loop-item:hover .elementor-widget-video img {
    transform: scale(1.08);
    filter: blur(3px);
}

.loop-videos .e-loop-item .logo-video {
    pointer-events: none;
    transition: transform .5s ease;
    will-change: transform;
}

.loop-videos .e-loop-item:hover .logo-video {
    transform: scale(0.8);
}


/* ==========================================
   2. MEDIA QUERIES (DESKTOP-FIRST)
   ========================================== */

/* Tablet (1024px o menos) */
@media (max-width: 1024px) {
    .portafolio-container,
    .portafolio-container img {
        height: 40vh !important;
    }

    /* En tablet dejamos 2 columnas de igual ancho (50% cada una) */
    .loop-videos .e-loop-item:nth-of-type(n) {
        grid-column: span 25 !important; /* Ocupa toda la fila si no usas grid-template de 2 cols, pero si mantienes el grid de 25 cols: */
    }

    /* Forzamos 2 columnas simétricas usando la estructura existente */
    .loop-videos .elementor-loop-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .loop-videos .e-loop-item:nth-of-type(4n+1),
    .loop-videos .e-loop-item:nth-of-type(4n+2),
    .loop-videos .e-loop-item:nth-of-type(4n+3),
    .loop-videos .e-loop-item:nth-of-type(4n) {
        grid-column: span 1 !important;
    }
}

/* Mobile (767px o menos) */
@media (max-width: 767px) {
    .portafolio-container,
    .portafolio-container img {
        height: 40vh !important; /* Reducción de altura para pantallas estrechas */
    }

    .loop-videos .elementor-loop-container {
        grid-template-columns: 1fr !important; /* 1 sola columna */
        gap: 16px !important;
    }

    .loop-videos .e-loop-item:nth-of-type(n) {
        grid-column: span 1 !important;
    }

    /* Opcional: reducir la intensidad de escalado del logo en móviles si la pantalla es muy pequeña */
    .loop-videos .e-loop-item .logo-video img {
        max-width: 140px !important;
    }
}