/* public/css/classes.css */
.classes-page { background:#000; min-height:100vh; color:#fff; }
.classes-page, .classes-page * { box-sizing:border-box; }

/* cada sección ocupa pantalla completa */
.classes-page .video-section {
    position:relative;
    width:100%;
    height:100vh;
    min-height:520px;
    overflow:hidden;
}

/* vídeo de fondo */
.classes-page .bg-video {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    min-width:100%;
    min-height:100%;
    width:auto;
    height:auto;
    object-fit:cover;
    display:block;
    z-index:1;
}

/* overlay para legibilidad */
.classes-page .video-overlay {
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.6) 100%);
    z-index:2;
}

/* texto encima del vídeo */
.classes-page .video-content {
    position:absolute;
    z-index:3;
    bottom:12%;
    left:50%;
    transform:translateX(-50%);
    max-width:1100px;
    padding:18px;
    color:#fff;
    text-align:center;
    -webkit-font-smoothing:antialiased;
}

/* alineaciones */
.classes-page .video-content.align-left { left:6%; transform:none; text-align:left; }
.classes-page .video-content.align-right { right:6%; left:auto; transform:none; text-align:right; }

/* tipografías */
.classes-page .video-content h1{ font-size:48px; margin:0; font-weight:800; }
.classes-page .video-content h2{ font-size:34px; margin:0 0 8px; font-weight:700; }
.classes-page .video-content p{ margin:0; font-size:18px; line-height:1.45; color:#eaeaea; }

/* animación reveal */
.classes-page .reveal-up { transform: translateY(30px); opacity:0; transition: transform .7s cubic-bezier(.2,.9,.3,1), opacity .7s ease; will-change: transform, opacity; }
.classes-page .reveal-up.in-view { transform: translateY(0); opacity:1; }

/* asegurar que header no quede por encima */
header, .navbar { position:relative; z-index:1000; }

/* responsive */
@media (max-width:768px){
    .classes-page .video-content h1{ font-size:34px; }
    .classes-page .video-content h2{ font-size:26px; }
    .classes-page .video-content { bottom:8%; padding:12px; left:50%; transform:translateX(-50%); }
    .classes-page .video-content.align-left, .classes-page .video-content.align-right { left:50%; right:auto; transform:translateX(-50%); text-align:center; }
}


.video-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.video-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding: 2rem;
    text-align: center;
}

.align-left .video-content { text-align: left; }
.align-right .video-content { text-align: right; }

.photo-gallery {
    background: #000;
    padding: 3rem 0;
}

.photo-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.photo-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.photo-item:hover img {
    transform: scale(1.1);
}

.photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8));
    opacity: 1;
}