*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#000;
    color:white;
    font-family:'Montserrat', sans-serif;
    font-weight:400;
}


/* =========================
   HEADER
========================= */

.header{
    background:#000;
    color:#fff;
    text-align:center;
    padding:35px 30px;
    border-bottom:1px solid #333;
}

.header h1{
    font-size:2rem;
    font-weight:500;
    letter-spacing:8px;
    text-transform:uppercase;
}


/* MENU */

.menu{
    display:flex;
    justify-content:center;
    gap:70px;
    padding:25px;
    background:#000;
}

.menu a{
    color:#fff;
    text-decoration:none;
    font-size:1rem;
    font-weight:400;
    letter-spacing:3px;
    text-transform:uppercase;
    transition:color .3s ease;
}

.menu a:hover{
    color:#a8a8a8;
}


/* =========================
   HERO
========================= */

.hero{
    min-height:70vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:20px;
    padding:40px 20px;
}


/* =========================
   GRID GENERAL (OTRAS PÁGINAS)
========================= */

.grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    width:100%;
    gap:2px;
    grid-auto-rows:390px;
}

.grid > img,
.grid > .video-thumb{
    width:100%;
    height:100%;
    display:block;
}

.grid img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    cursor:pointer;
    transition:filter .3s ease;
    display:block;
}


/* vídeo dentro del grid: debe comportarse como una imagen más */

.grid > .video-thumb{
    position:relative;
    aspect-ratio:auto;
    max-width:none;
    margin:0;
    overflow:hidden;
    background:#111;
    cursor:pointer;
}

.grid > .video-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    transition:filter .3s ease;
}

.grid img:hover,
.grid > .video-thumb:hover img{
    filter:brightness(0.6);
}


/* =========================
   FOOTER
========================= */

.footer{
    border-top:1px solid #333;
    background:#000;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:70px 30px 30px;
    min-height:auto;
    text-align:center;
}

.contacto{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:14px;
    font-size:1.35rem;
    font-weight:500;
    letter-spacing:2px;
    line-height:1.9;
    color:#f1f1f1;
}

.instagram{
    background:none;
    border:1px solid #f1f1f1;
    color:#f1f1f1;
    padding:16px 30px;
    font-size:1.05rem;
    font-weight:500;
    letter-spacing:2px;
    cursor:pointer;
    transition:.3s;
}

.instagram:hover{
    background:#f1f1f1;
    color:#000;
}

.social-links{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:22px;
    width:100%;
    margin-top:38px;
}

.social-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:60px;
    height:60px;
    padding:0;
    border:1px solid #f1f1f1;
    color:#f1f1f1;
    text-decoration:none;
    font-size:1rem;
    letter-spacing:2px;
    transition:.3s;
}

.social-btn img{
    width:26px;
    height:26px;
    object-fit:contain;
}

.social-btn:hover{
    background:#f1f1f1;
    color:#000;
}


/* =========================
   FADE GENERAL
========================= */

.fade{
    opacity:0;
    transform:translateY(30px);
    transition:opacity 1.2s ease, transform 1.2s ease;
}

.fade.show{
    opacity:1;
    transform:translateY(0);
}


/* =========================
   STILLS GRID
========================= */

.stills-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:220px;
    gap:8px;
    width:100%;
    grid-auto-flow:dense;
}

.stills-grid .item{
    overflow:hidden;
    cursor:pointer;
    background:#000;
}

.stills-grid .item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


/* =========================
   FADE SOLO CONTENEDOR GRID
========================= */

.fade-grid{
    opacity:0;
    transform:translateY(25px);
    transition:opacity 1s ease, transform 1s ease;
    will-change:opacity, transform;
}

.fade-grid.show{
    opacity:1;
    transform:translateY(0);
}


/* =========================
   LIGHTBOX
========================= */

.lightbox{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.95);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:opacity .4s ease;
    z-index:9999;
}

.lightbox.show{
    opacity:1;
    visibility:visible;
}

.lightbox img{
    max-width:85%;
    max-height:85%;
    object-fit:contain;
}

#lightboxImg{
    max-width:90%;
    max-height:80vh;
    display:block;
}

.lightbox-desc{
    margin-top:10px;
    color:white;
    font-style:italic;
    text-align:center;
    font-size:14px;
    opacity:0.8;
    max-width:80%;
}

.fade-out{
    opacity:0;
}


/* NAV */

.close-btn{
    position:absolute;
    top:25px;
    right:30px;
    font-size:2rem;
    color:white;
    cursor:pointer;
}

.nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:3rem;
    color:white;
    cursor:pointer;
}

.prev{
    left:25px;
}

.next{
    right:25px;
}


/* =========================
   VIDEO
========================= */

.video-grid{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 20px 20px;
    width:100%;
}

/* vídeo de la página individual */

.video-grid .video-thumb{
    position:relative;
    width:min(100%, 520px);
    max-width:520px;
    aspect-ratio:16 / 9;
    cursor:pointer;
    overflow:hidden;
    background:#111;
    margin:0 auto;
}

.video-grid .video-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.video-thumb:hover img{
    filter:brightness(0.6);
}

.video-thumb .play{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:3rem;
    color:white;
    pointer-events:none;
    z-index:2;
}

.video-thumb::after{
    content:"";
    position:absolute;
    inset:0;
    transition:.3s;
}

.video-thumb:hover::after{
    background:rgba(0,0,0,.25);
}

.play{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    font-size:3rem;
    color:white;
    pointer-events:none;
}

.video-lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.95);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:9999;
    padding:40px 20px;
    overflow-y:auto;
}

.video-lightbox.show{
    opacity:1;
    visibility:visible;
}

.video-title{
    font-size:1.5rem;
    font-weight:500;
    letter-spacing:4px;
    margin-bottom:25px;
    text-transform:uppercase;
    text-align:center;
}


/* REPRODUCTOR DE VÍDEO - AMPLIADO */

.video-container{
    width:min(94vw, 1200px);
    max-width:1200px;
    margin:0 auto;
}

.video-container video{
    width:100%;
    display:block;
    max-height:82vh;
    object-fit:contain;
    background:#000;
}

.video-info{
    margin-top:24px;
    text-align:center;
    color:#d0d0d0;
    font-size:.95rem;
    line-height:1.8;
    letter-spacing:1px;
}

.video-close{
    position:absolute;
    top:25px;
    right:30px;
    font-size:2rem;
    color:white;
    cursor:pointer;
}


/* =========================
   STILLS MOSAIC (NO TOCAR)
========================= */

.item1{ grid-column:span 2; grid-row:span 2; }
.item2{ grid-column:span 1; grid-row:span 1; }
.item3{ grid-column:span 1; grid-row:span 2; }
.item4{ grid-column:span 2; grid-row:span 1; }
.item5{ grid-column:span 1; grid-row:span 1; }
.item6{ grid-column:span 1; grid-row:span 2; }
.item7{ grid-column:span 2; grid-row:span 2; }
.item8{ grid-column:span 1; grid-row:span 1; }
.item9{ grid-column:span 1; grid-row:span 1; }
.item10{ grid-column:span 2; grid-row:span 1; }
.item11{ grid-column:span 1; grid-row:span 2; }
.item12{ grid-column:span 1; grid-row:span 1; }
.item13{ grid-column:span 2; grid-row:span 2; }
.item14{ grid-column:span 1; grid-row:span 1; }
.item15{ grid-column:span 1; grid-row:span 2; }
.item16{ grid-column:span 2; grid-row:span 1; }
.item17{ grid-column:span 1; grid-row:span 1; }
.item18{ grid-column:span 1; grid-row:span 1; }


/* =========================
   COPYRIGHT
========================= */

.copyright{
    margin-top:40px;
    width:100%;
    display:block;
    text-align:center;
    font-size:.75rem;
    font-weight:300;
    letter-spacing:3px;
    color:#777;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width:768px){

    .stills-grid{
        grid-template-columns:1fr;
        grid-auto-rows:280px;
        padding:0 20px;
        gap:6px;
        grid-auto-flow:dense;
    }

    .stills-grid .item{
        grid-column:span 1 !important;
        grid-row:span 1 !important;
    }

    .grid{
        grid-template-columns:1fr;
        padding:0 20px;
        gap:6px;
        grid-auto-rows:280px;
    }

    .footer{
        padding:60px 20px 25px;
    }

    .contacto{
        font-size:1.15rem;
        gap:12px;
        line-height:1.8;
    }

    .social-links{
        justify-content:center;
        align-items:center;
        gap:18px;
        margin-top:28px;
    }

    .social-btn{
        width:56px;
        height:56px;
    }

    .social-btn img{
        width:24px;
        height:24px;
    }

    .copyright{
        margin-top:30px;
        font-size:.72rem;
        letter-spacing:2px;
    }

    .video-grid{
        padding:30px 20px 10px;
    }

    .video-grid .video-thumb{
        width:min(100%, 420px);
        max-width:420px;
    }

    .video-title{
        font-size:1.1rem;
        letter-spacing:3px;
        margin-bottom:18px;
    }


    /* REPRODUCTOR DE VÍDEO - AMPLIADO EN MÓVIL */

    .video-container{
        width:min(94vw, 700px);
    }

    .video-container video{
        max-height:70vh;
    }

    .video-info{
        font-size:.85rem;
        margin-top:18px;
        line-height:1.7;
    }
}