/* ════════════════════════════════════════════════════════════════════════════ */
/* VIDEO SHOWCASE FIX - Corrección específica del problema de contenedor     */
/* ════════════════════════════════════════════════════════════════════════════ */

/* PASO 1: Contenedor externo - Sección completa */
.video-showcase-section {
    padding: 80px 40px;
    background: linear-gradient(135deg, rgba(10, 14, 39, 0.5) 0%, rgba(0, 212, 255, 0.05) 100%);
    border-top: 2px solid rgba(0, 212, 255, 0.2);
    border-bottom: 2px solid rgba(0, 212, 255, 0.2);
}

/* PASO 2: Contenedor de contenido - AQUÍ ES EL FIX */
.video-showcase-container {
    max-width: 1200px;              /* ← CRÍTICO: Limita el ancho máximo */
    margin: 0 auto;                 /* ← CRÍTICO: Centra horizontalmente */
    width: 100%;                    /* ← Responsive: 100% hasta max-width */
    padding: 0 20px;                /* ← Padding lateral en móvil */
}

/* PASO 3: Contenido de títulos */
.video-showcase-content {
    text-align: center;
    margin-bottom: 50px;
}

.video-showcase-content h2 {
    font-size: 2.5rem;
    color: #00ff88;
    font-weight: 900;
    margin-bottom: 15px;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.video-subtitle {
    font-size: 1.1rem;
    color: #a0a0a0;
    font-weight: 500;
}

/* PASO 4: Wrapper del video - CENTRADO Y CONTENIDO */
.video-showcase-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    border: 3px solid #00d4ff;      /* ← NEON BORDER */
    box-shadow:
    0 0 40px rgba(0, 212, 255, 0.3),
    inset 0 0 20px rgba(0, 212, 255, 0.1),
    0 0 20px rgba(0, 212, 255, 0.2);
    background: #000;
    margin: 0 auto;                 /* ← Centrado */
    transition: all 0.3s ease;
}

.video-showcase-wrapper:hover {
    box-shadow:
    0 0 60px rgba(0, 212, 255, 0.5),
    inset 0 0 30px rgba(0, 212, 255, 0.15),
    0 0 40px rgba(0, 212, 255, 0.3);
}

/* PASO 5: El elemento video */
.video-showcase {
    width: 100%;
    height: 100%;
    object-fit: contain;            /* ← Mantiene aspecto sin crop */
    display: block;
}

/* ════════════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE - Tablet (768px) */
/* ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .video-showcase-section {
        padding: 40px 20px;
    }

    .video-showcase-content h2 {
        font-size: 1.6rem;
    }

    .video-showcase-wrapper {
        border-radius: 12px;
    }
}

/* ════════════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE - Mobile (480px) */
/* ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .video-showcase-section {
        padding: 30px 15px;
    }

    .video-showcase-content h2 {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }

    .video-showcase-content {
        margin-bottom: 30px;
    }

    .video-subtitle {
        font-size: 0.95rem;
    }

    .video-showcase-wrapper {
        border: 2px solid #00d4ff;  /* Borde un poco más delgado en móvil */
    }
}

/* ════════════════════════════════════════════════════════════════════════════ */
/* NOTA IMPORTANTE: */
/* ════════════════════════════════════════════════════════════════════════════ */
/*
 E s*te CSS DEBE cargarse DESPUÉS de style.css para que override los estilos.

 En tu HTML, agrega:
 <link rel="stylesheet" href="css/style.css">
 <link rel="stylesheet" href="css/carousel-final.css">
 <link rel="stylesheet" href="css/mercury-orb-enhanced.css">
 <link rel="stylesheet" href="css/modal-gallery.css">
 <link rel="stylesheet" href="css/video-showcase-fix.css"> ← Este debe ir AL FINAL
 */