/* ========================================= */
/* ESTILO BRUTALISTA - VIDEOTECA             */
/* ========================================= */

body {
    margin: 0;
    background-color: #000000;
    color: #ffffff;
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
}

/* --- NAVEGACIÓN --- */
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 2px solid #333;
}

.back-btn {
    text-decoration: none;
    color: white;
    border: 2px solid white;
    padding: 5px 15px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.back-btn:hover {
    background-color: white;
    color: black;
}

/* --- HEADER --- */
.page-header {
    text-align: center;
    padding: 40px 0 20px 0;
}

.page-header h1 {
    font-size: clamp(3rem, 10vw, 6rem);
    margin: 0;
    letter-spacing: -2px;
}

/* --- GRILLA DE VIDEOS --- */
.video-grid {
    max-width: 1000px; /* Ancho máximo en PC */
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 60px; /* Mucho espacio entre videos */
}

/* --- ITEM DE VIDEO --- */
.video-item h2 {
    font-size: clamp(1.5rem, 5vw, 3rem);
    margin-bottom: 15px;
    border-left: 5px solid white; /* Detalle estético */
    padding-left: 15px;
}

/* El Contenedor Mágico 16:9 */
.video-placeholder {
    position: relative;
    width: 100%;
    /* Truco para mantener proporción 16:9 siempre (Youtube standard) */
    aspect-ratio: 16 / 9; 
    background-color: #111;
    cursor: pointer;
    overflow: hidden;
}

/* La Imagen de portada */
.video-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7; /* Un poco oscura para que resalte el botón */
    transition: opacity 0.3s, transform 0.3s;
}

/* Hover: La imagen se aclara y hace zoom sutil */
.video-placeholder:hover img {
    opacity: 1;
    transform: scale(1.05);
}

/* --- BOTÓN PLAY BRUTALISTA --- */
.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Estilo Cuadrado Sólido */
    background-color: white;
    color: black;
    border: none;
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.5rem;
    padding: 15px 30px;
    cursor: pointer;
    z-index: 2;
    transition: all 0.2s;
}

/* Hover del botón: Se vuelve negro con letras blancas */
.video-placeholder:hover .play-btn {
    background-color: #FF0000; /* Rojo intenso al pasar mouse */
    color: white;
    box-shadow: 5px 5px 0px white; /* Sombra dura desplazada */
}

/* --- EL IFRAME (Cuando carga Youtube) --- */
iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Footer simple */
footer {
    text-align: center;
    padding: 50px 0;
    color: #666;
    font-size: 0.8rem;
}