@charset "utf-8";
/* CSS Document */
/*======================================
ARCADNOVA
STYLE.CSS
======================================*/

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

:root{

    --black:#080808;
    --cream:#FFFEF2;
    --white:#ffffff;

    --pink:#E6007E;
    --blue:#132075;
    --yellow:#F7A715;
    --green:#00C77D;

    --transition:.45s cubic-bezier(.22,.61,.36,1);

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--black);

    color:white;

    font-family:'Inter',sans-serif;

    overflow-x:hidden;

}


/*======================================
NAVBAR
======================================*/

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    transition:
    background .45s ease,
    backdrop-filter .45s ease,
    box-shadow .45s ease,
    padding .45s ease;

}


/*======================================
HOME
======================================*/

/* Estado inicial del HOME */

header:not(.inner-page){

    background:transparent;

}


/* HOME cuando haces scroll */

header.scrolled{

    background:rgba(8,8,8,.88);

    backdrop-filter:blur(18px);

    box-shadow:0 8px 35px rgba(0,0,0,.45);

}


/*======================================
PÁGINAS INTERNAS
======================================*/

header.inner-page{

    background:#2a2b2a;

    backdrop-filter:none;

    box-shadow:none;

}


/* Mantener el mismo estado aunque haya scroll */

header.inner-page.scrolled{

    background:#2a2b2a;

    backdrop-filter:none;

    box-shadow:none;

}


.navbar{

    width:min(92%,1450px);

    height:90px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


/*======================================
LOGO
======================================*/

.logo{

    width:180px;

    display:flex;

    align-items:center;

}

.logo img{

    width:100%;

    transition:.5s;

}

.logo:hover img{

    transform:scale(1.03);

}


/*======================================
MENU
======================================*/

nav ul{

    display:flex;

    gap:50px;

    list-style:none;

}

nav a{

    position:relative;

    color:white;

    text-decoration:none;

    font-size:.78rem;

    letter-spacing:.18em;

    transition:var(--transition);

    text-transform:uppercase;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:1px;

    background:white;

    transition:.4s;

}

nav a:hover{

    letter-spacing:.24em;

}

nav a:hover::after{

    width:100%;

}


/*======================================
HAMBURGUESA
======================================*/

.menu{

    width:34px;

    height:24px;

    display:none;

    flex-direction:column;

    justify-content:space-between;

    cursor:pointer;

}

.menu span{

    width:100%;

    height:2px;

    background:white;

    transition:.4s;

}

.menu.active span:nth-child(1){

    transform:
    rotate(45deg)
    translateY(10px);

}

.menu.active span:nth-child(2){

    opacity:0;

}

.menu.active span:nth-child(3){

    transform:
    rotate(-45deg)
    translateY(-10px);

}


/*======================================
MENU MOBILE
======================================*/

@media(max-width:900px){

nav{

    position:fixed;

    top:0;

    right:-100%;

    width:100%;

    height:100vh;

    background:rgba(8,8,8,.97);

    backdrop-filter:blur(30px);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.6s cubic-bezier(.22,.61,.36,1);

    opacity:0;

}

nav.active{

    right:0;

    opacity:1;

}

nav ul{

    flex-direction:column;

    gap:45px;

}

nav a{

    font-size:1.4rem;

    letter-spacing:.22em;

}

.menu{

    display:flex;

    z-index:10001;

}

.hero-logo{

    width:90%;

}

.subtitle{

    font-size:.72rem;

    letter-spacing:.22em;

}

.categories{

    font-size:.68rem;

    line-height:2;

    gap:12px;

}

}

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

.project-hero{

    position:relative;

    width:100%;

    min-height:100vh;

    min-height:100svh;

    overflow:hidden;

    display:flex;

    align-items:center;

    color:#fff;

    background:#050505;

}


/* =====================================================
   BACKGROUND
===================================================== */

.project-hero-bg{

    position:absolute;

    inset:0;

    z-index:0;

    background-image:url("../images/hero-video-musical-after-hours-arcadnova.PNG");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

    transform:scale(1.01);

}


/* =====================================================
   OVERLAY
===================================================== */

.project-hero-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:

        linear-gradient(
            90deg,
            rgba(0,0,0,.88) 0%,
            rgba(0,0,0,.62) 42%,
            rgba(0,0,0,.25) 75%,
            rgba(0,0,0,.35) 100%
        ),

        linear-gradient(
            0deg,
            rgba(0,0,0,.45) 0%,
            transparent 35%
        );

}


/* =====================================================
   CONTAINER
===================================================== */

.project-hero-container{

    position:relative;

    z-index:2;

    width:min(90%, 1400px);

    min-height:100vh;

    min-height:100svh;

    margin:auto;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


/* =====================================================
   CONTENT
===================================================== */

.project-hero-content{

    width:min(700px, 100%);

}


/* =====================================================
   META
===================================================== */

.project-hero-meta{

    display:flex;

    align-items:center;

    gap:35px;

    margin-bottom:25px;

    font-family:Arial, sans-serif;

    font-size:.72rem;

    font-weight:600;

    letter-spacing:.14em;

    text-transform:uppercase;

}


.project-hero-meta span{

    white-space:nowrap;

}


/* =====================================================
   TITLE
===================================================== */

.project-hero-title{

    margin:0;

    font-family:Georgia, "Times New Roman", serif;

    font-size:clamp(3rem, 10vw, 5rem);

    font-weight:400;

    line-height:.82;

    letter-spacing:-.04em;

    text-transform:uppercase;

}


/* =====================================================
   SERVICES
===================================================== */

.project-hero-services{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    margin-top:45px;

    font-family:Arial, sans-serif;

    font-size:.72rem;

    font-weight:600;

    letter-spacing:.16em;

    text-transform:uppercase;

}


.project-hero-dot{

    opacity:.7;

}


/* =====================================================
   LOCATION
===================================================== */

.project-hero-location{

    margin:30px 0 0;

    font-family:Arial, sans-serif;

    font-size:.72rem;

    font-weight:500;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:rgba(255,255,255,.8);

}


/* =====================================================
   SCROLL
===================================================== */

.project-hero-scroll{

    position:absolute;

    bottom:45px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:7px;

    font-family:Arial, sans-serif;

    font-size:.65rem;

    font-weight:600;

    letter-spacing:.2em;


    text-transform:uppercase;

    color:rgba(255,255,255,.8);

}


.project-scroll-arrow{

    display:block;

    font-size:1.3rem;

    line-height:1;

    animation:projectScroll 1.8s ease-in-out infinite;

}


/* =====================================================
   SCROLL ANIMATION
===================================================== */

@keyframes projectScroll{

    0%,
    100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(6px);

    }

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:900px){

    .project-hero-container{

        width:min(88%, 1200px);

    }


    .project-hero-title{

        font-size:clamp(3rem, 10vw, 5rem);

    }


    .project-hero-services{

        margin-top:35px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px){

    .project-hero{

        min-height:100svh;

        align-items:flex-end;

    }


    .project-hero-bg{

        background-position:65% center;

    }


    .project-hero-overlay{

        background:

            linear-gradient(
                180deg,
                rgba(0,0,0,.35) 0%,
                rgba(0,0,0,.25) 35%,
                rgba(0,0,0,.85) 100%
            );

    }


    .project-hero-container{

        width:88%;

        min-height:100svh;

        padding-bottom:115px;

        justify-content:flex-end;

    }


    .project-hero-content{

        width:100%;

    }


    .project-hero-meta{

        gap:20px;

        margin-bottom:20px;

        font-size:.62rem;

    }


    .project-hero-title{

        font-size:clamp(3rem, 10vw, 5rem);

        line-height:.82;

    }


    .project-hero-services{

        gap:8px;

        margin-top:30px;

        font-size:.58rem;

        line-height:1.7;

    }


    .project-hero-location{

        margin-top:20px;

        font-size:.6rem;

    }


    .project-hero-scroll{

        bottom:30px;

        font-size:.58rem;

    }

}

/* =====================================================
   PROJECT INTRO
===================================================== */

.project-intro{

    width:100%;

    padding:120px 0;

    background:#fffef2;

    color:#111;

}


/* =====================================================
   CONTAINER
===================================================== */

.project-intro-container{

    width:min(88%, 1400px);

    margin:auto;

    display:grid;

    grid-template-columns:minmax(0, 1.15fr) minmax(360px, .85fr);

    gap:100px;

    align-items:start;

}


/* =====================================================
   CONTENT
===================================================== */

.project-intro-content{

    max-width:680px;

}


/* =====================================================
   SECTION LABEL
===================================================== */

.project-section-label{

    display:block;

    margin-bottom:25px;

    color:#f50087;

    font-family:Arial, Helvetica, sans-serif;

    font-size:.68rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}


/* =====================================================
   TITLE
===================================================== */

.project-intro-content h2{

    margin:0 0 40px;

    max-width:650px;

    color:#f50087;

    font-family:Georgia, "Times New Roman", serif;

    font-size:clamp(2.8rem, 4.5vw, 40px);

    font-weight:400;

    line-height:.98;

    letter-spacing:-.025em;

}


/* =====================================================
   TEXT
===================================================== */

.project-intro-text{

    max-width:620px;

}


.project-intro-text p{

    margin:0 0 25px;

    color:#333;

    font-family:Arial, Helvetica, sans-serif;

    font-size:.92rem;

    line-height:1.8;

}


.project-intro-text p:last-child{

    margin-bottom:0;

}


/* =====================================================
   PROJECT DETAILS
===================================================== */

.project-details{

    width:100%;

    padding:10px 30px;

    border:1px solid #cfcfc7;

}


/* =====================================================
   DETAIL
===================================================== */

.project-detail{

    padding:24px 0;

    border-bottom:1px solid #deddd5;

}


.project-detail:last-child{

    border-bottom:none;

}


/* =====================================================
   DETAIL LABEL
===================================================== */

.project-detail-label{

    display:block;

    margin-bottom:9px;

    color:#222;

    font-family:Arial, Helvetica, sans-serif;

    font-size:.65rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}


/* =====================================================
   DETAIL TEXT
===================================================== */

.project-detail p{

    margin:0;

    color:#333;

    font-family:Arial, Helvetica, sans-serif;

    font-size:.85rem;

    line-height:1.7;

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1000px){

    .project-intro{

        padding:100px 0;

    }


    .project-intro-container{

        grid-template-columns:1fr;

        gap:70px;

    }


    .project-intro-content{

        max-width:750px;

    }


    .project-details{

        max-width:700px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px){

    .project-intro{

        padding:75px 0;

    }


    .project-intro-container{

        width:88%;

        gap:50px;

    }


    .project-section-label{

        margin-bottom:20px;

        font-size:.6rem;

    }


    .project-intro-content h2{

        margin-bottom:30px;

        font-size:clamp(2.5rem, 11vw, 4rem);

        line-height:1;

    }


    .project-intro-text p{

        font-size:.88rem;

        line-height:1.75;

    }


    .project-details{

        padding:5px 20px;

    }


    .project-detail{

        padding:20px 0;

    }


    .project-detail-label{

        font-size:.6rem;

    }


    .project-detail p{

        font-size:.82rem;

    }

}

/* =====================================================
   PROJECT CONCEPT
===================================================== */

.project-concept{

    width:100%;

    padding:110px 0;

    background:#050505;

    color:#fff;

    overflow:hidden;

}


/* =====================================================
   CONTAINER
===================================================== */

.project-concept-container{

    width:min(90%, 1400px);

    margin:auto;

    display:grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(320px, 1fr);

    gap:60px;

    align-items:center;

}


/* =====================================================
   MAIN IMAGE
===================================================== */

.concept-main-image{

    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    background:#111;

}


.concept-main-image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}


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

.concept-video{

    width:100%;

}


.concept-video-player{

    position:relative;

    width:100%;

    aspect-ratio:9 / 16;

    overflow:hidden;

    background:#111;

}


.concept-video-player video{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    cursor:pointer;

}


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

.concept-video-controls{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    z-index:5;

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 12px 12px;

    background:

        linear-gradient(
            transparent,
            rgba(0,0,0,.75)
        );

}


/* =====================================================
   PLAY BUTTON
===================================================== */

.concept-video-play{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:32px;

    height:32px;

    padding:0;

    border:0;

    border-radius:50%;

    background:#f50087;

    color:#fff;

    font-size:.7rem;

    cursor:pointer;

    transition:
        transform .25s ease,
        background .25s ease;

}


.concept-video-play:hover{

    transform:scale(1.08);

}


/* PLAY / PAUSE STATES */

.pause-icon{

    display:none;

    font-size:.72rem;

    letter-spacing:-2px;

}


.concept-video-player.is-playing
.pause-icon{

    display:block;

}


.concept-video-player.is-playing
.play-icon{

    display:none;

}


/* =====================================================
   PROGRESS
===================================================== */

.concept-video-progress{

    position:relative;

    flex:1;

    height:4px;

    border-radius:10px;

    background:rgba(255,255,255,.3);

    cursor:pointer;

}


.concept-video-progress-bar{

    position:absolute;

    top:0;

    left:0;

    width:0%;

    height:100%;

    border-radius:10px;

    background:#f5c400;

}


/* =====================================================
   FULLSCREEN
===================================================== */

.concept-video-fullscreen{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:28px;

    height:28px;

    padding:0;

    border:0;

    background:transparent;

    color:#fff;

    font-size:1rem;

    cursor:pointer;

}


/* =====================================================
   CONCEPT TEXT
===================================================== */

.concept-content{

    padding-left:25px;

}


.concept-content
.project-section-label{

    display:block;


    margin-bottom:25px;

    color:#f50087;

    font-family:Arial, Helvetica, sans-serif;

    font-size:.68rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}


.concept-content h2{

    margin:0 0 30px;

    color:#fff;

    font-family:Georgia, "Times New Roman", serif;

    font-size:clamp(2.1rem, 3vw, 3.5rem);

    font-weight:400;

    line-height:.98;

    letter-spacing:-.025em;

}


.concept-text p{

    margin:0 0 22px;

    color:rgba(255,255,255,.68);

    font-family:Arial, Helvetica, sans-serif;

    font-size:.82rem;

    line-height:1.8;

}


.concept-text p:last-child{

    margin-bottom:0;

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1050px){

    .project-concept-container{

        grid-template-columns:
            minmax(0, 1.5fr)
            minmax(260px, 1fr);

        gap:35px;

    }


    .concept-content{

        padding-left:15px;

    }


    .concept-content h2{

        font-size:clamp(1.8rem, 3vw, 2.8rem);

    }

}


/* =====================================================
   TABLET / MOBILE
===================================================== */

@media(max-width:800px){

    .project-concept{

        padding:85px 0;

    }


    .project-concept-container{

        width:min(88%, 700px);

        grid-template-columns:1fr;

        gap:45px;

    }


    /* Imagen */

    .concept-main-image{

        aspect-ratio:16 / 10;

    }


    /* VIDEO */

    .concept-video{

        display:flex;

        justify-content:center;

        width:100%;

    }


    .concept-video-player{

        width:min(72%, 380px);

        aspect-ratio:9 / 16;

    }


    /* TEXTO */

    .concept-content{

        padding-left:0;

        max-width:650px;

    }


    .concept-content h2{

        max-width:600px;

        font-size:clamp(2.5rem, 8vw, 4rem);

    }


    .concept-text p{

        font-size:.88rem;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px){

    .project-concept{

        padding:70px 0;

    }


    .project-concept-container{

        width:88%;

        gap:40px;

    }


    .concept-main-image{

        aspect-ratio:4 / 3;

    }


    /*
       IMPORTANTE:
       El video se centra dentro de su propio
       contenedor y nunca toca los bordes.
    */

    .concept-video{

        width:100%;

        display:flex;

        justify-content:center;

    }


    .concept-video-player{

        width:min(78%, 330px);

        max-width:330px;

        margin:0 auto;

    }


    .concept-content h2{

        font-size:clamp(2.35rem, 11vw, 3.5rem);

        line-height:.98;

    }


    .concept-text p{

        font-size:.86rem;

        line-height:1.75;

    }

}

/* =====================================================
   VARIABLES
===================================================== */

:root{

    --project-bg:#fffef2;

    --project-dark:#050505;

    --project-text:#111;

    --project-muted:#666;

    --project-pink:#f50087;

    --project-yellow:#ffe500;

    --project-line:#d8d7cf;

    --project-container:1400px;

}


/* =====================================================
   BASE
===================================================== */

.project-process-results{

    background:var(--project-bg);

    color:var(--project-text);

}


.project-process-results-container{

    width:min(90%,var(--project-container));

    margin:auto;

}


.project-section-label{

    margin-bottom:35px;

    font-size:.72rem;

    font-weight:600;

    letter-spacing:.14em;

}


.project-section-label span{

    margin:0 7px;

    color:#999;

}


/* =====================================================
   PROCESO
===================================================== */

.project-process{

    padding:100px 0;

}


.process-layout{

    display:grid;

    grid-template-columns:340px 1fr;

    gap:55px;

}


/* =====================================================
   IMÁGENES
===================================================== */

.process-images{

    display:flex;

    flex-direction:column;

    gap:12px;

}


.process-image{

    width:100%;

    height:90px;

    overflow:hidden;

    opacity:.45;

    transition:
        opacity .3s ease,
        transform .3s ease;

}


.process-image.active{

    opacity:1;

}


.process-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


/* =====================================================
   TIMELINE
===================================================== */

.process-timeline{

    position:relative;

}


.process-timeline::before{

    content:"";

    position:absolute;

    left:30px;

    top:30px;

    bottom:30px;

    width:1px;

    background:var(--project-line);

}


.process-step{

    position:relative;

    display:grid;

    grid-template-columns:70px 1fr;

    gap:25px;

    padding:0 0 35px;

    cursor:pointer;

}


.process-step:last-child{

    padding-bottom:0;

}


.process-number{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    width:62px;

    height:62px;

    background:var(--project-bg);

    border:1px solid var(--project-line);

    border-radius:50%;

    font-family:Georgia,serif;

    font-size:1.25rem;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease;

}


.process-step.active .process-number{

    background:var(--project-pink);

    border-color:var(--project-pink);

    color:#fff;

}


.process-step-content{

    padding-top:8px;

}


.process-step-content h3{

    margin:0 0 10px;

    font-size:.9rem;

    letter-spacing:.05em;

}


.process-step-content p{

    max-width:600px;

    margin:0;

    color:var(--project-muted);

    font-size:.9rem;

    line-height:1.7;

}


/* =====================================================
   RESULTADOS
===================================================== */

.project-results{

    padding:100px 0 130px;

}


/* =====================================================
   VISOR
===================================================== */

.results-viewer{

    width:100%;

}


.results-main{

    position:relative;

    width: 70%; margin: 0 auto;

    aspect-ratio:16 / 9;

    overflow:hidden;

    background:#080808;

}


/* =====================================================
   MEDIA
===================================================== */

.result-media{

    position:absolute;

    inset:0;

    display:none;

}


.result-media.active{

    display:block;

}


.result-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/* =====================================================
   ZOOM
===================================================== */

.media-zoom{

    position:absolute;

    top:20px;

    right:20px;

    display:flex;

    align-items:center;

    gap:8px;

    padding:9px 13px;

    border:none;

    background:var(--project-pink);

    color:#fff;

    font-size:.7rem;

    font-weight:700;

    letter-spacing:.08em;

    cursor:pointer;

}


.zoom-icon{

    font-size:1.1rem;

}


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

.result-video{

    background:#000;

}


.result-video video{

    display:block;

    width:100%;

    height:100%;

    object-fit:contain;

    cursor:pointer;

}


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

.video-play{

    position:absolute;

    left:35px;

    bottom:35px;

    display:flex;

    align-items:center;

    justify-content:center;

    width:50px;

    height:50px;

    border:0;

    border-radius:50%;

    background:var(--project-pink);

    color:#fff;

    cursor:pointer;

    font-size:.85rem;

}


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

.video-controls{

    position:absolute;

    left:60px;

    right:35px;

    bottom:45px;

    display:flex;

    align-items:center;

    gap:14px;

}


.video-control-play{

    border:0;

    background:none;

    color:#fff;

    cursor:pointer;

    font-size:.85rem;

}


.video-progress{

    flex:1;

    height:3px;

    background:rgba(255,255,255,.35);

    cursor:pointer;

}


.video-progress-bar{

    width:0%;

    height:100%;

    background:var(--project-yellow);

}


.video-time{

    min-width:45px;

    color:#fff;

    font-size:.7rem;

}


.video-fullscreen{

    border:0;

    background:none;

    color:#fff;

    cursor:pointer;

    font-size:1rem;

}


/* =====================================================
   THUMBNAILS
===================================================== */

.results-thumbnails{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:10px;

    margin-top:12px;

}


.result-thumbnail{

    position:relative;

    padding:0;

    border:2px solid transparent;

    background:none;

    aspect-ratio:16 / 9;

    overflow:hidden;

    cursor:pointer;

}


.result-thumbnail.active{

    border-color:var(--project-pink);

}


.result-thumbnail img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .4s ease;

}


.result-thumbnail:hover img{

    transform:scale(1.04);

}


.thumbnail-play{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    width:32px;

    height:32px;

    border-radius:50%;

    background:var(--project-pink);

    color:#fff;

    font-size:.65rem;

}


/* =====================================================
   INSTRUCCIÓN
===================================================== */

.results-instruction{

    margin:15px 0 0;

    font-size:.65rem;

    letter-spacing:.1em;

    color:#777;

}


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

.image-lightbox{

    position:fixed;

    inset:0;

    z-index:9999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px;

    background:rgba(0,0,0,.94);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.image-lightbox.active{

    opacity:1;

    visibility:visible;

}


.image-lightbox img{

    max-width:90vw;

    max-height:90vh;

    object-fit:contain;

}


.lightbox-close{

    position:absolute;

    top:25px;

    right:30px;

    border:0;

    background:none;

    color:#fff;

    font-size:2.5rem;

    cursor:pointer;

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1000px){

    .process-layout{

        grid-template-columns:260px 1fr;

        gap:35px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:700px){

    .project-process{

        padding:70px 0;

    }


    .project-results{

        padding:70px 0 90px;

    }


    /* PROCESO */

    .process-layout{

        display:flex;

        flex-direction:column;

    }


    .process-images{

        display:none;

    }


    .process-timeline::before{

        left:25px;

    }


    .process-step{

        grid-template-columns:55px 1fr;

        gap:20px;

        padding-bottom:30px;

    }


    .process-number{

        width:50px;

        height:50px;

        font-size:1rem;

    }


    .process-step-content h3{

        font-size:.8rem;

    }


    .process-step-content p{

        font-size:.82rem;

    }


    /* RESULTADOS */

    .results-main{

        /*
         * Importante:
         * mantenemos el visor centrado
         */

        width:100%;

        margin:0 auto;

        aspect-ratio:4 / 3;

    }


    .result-media{

        width:100%;

        height:100%;

    }


    .result-image img,
    .result-video video{

        width:100%;

        height:100%;

        object-fit:cover;

    }


    .media-zoom{

        top:12px;

        right:12px;

    }


    .video-play{

        left:50%;

        bottom:50%;

        transform:translate(-50%,50%);

    }


    .video-controls{

        left:20px;

        right:20px;

        bottom:20px;

    }


    .results-thumbnails{

        grid-template-columns:repeat(3,1fr);

        gap:7px;

    }


    .results-instruction{

        font-size:.58rem;

    }

}

/* =====================================================
   FAQ
===================================================== */

.project-faq{

    padding:90px 0;

    background:var(--project-bg);

    border-top:1px solid var(--project-line);

}


.project-faq .project-container{

    width:min(90%,1400px);

    margin:auto;

}


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

.project-section-header{

    margin-bottom:35px;

}


.project-section-number{

    display:block;

    font-size:.72rem;

    font-weight:600;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:#111;

}



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

.faq-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:55px;

}


.faq-column{

    min-width:0;

}



/* =====================================================
   ITEM
===================================================== */

.faq-item{

    border-bottom:1px solid var(--project-line);

}


.faq-question{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    padding:18px 0;

    border:0;

    background:none;

    color:#111;

    cursor:pointer;

    text-align:left;

    font-family:inherit;

    font-size:.9rem;

    font-weight:600;

    line-height:1.5;

}


.faq-question:hover{

    color:var(--project-accent);
	color: #e6007e;

}



/* =====================================================
   ICON
===================================================== */

.faq-icon{

    flex-shrink:0;

    width:25px;

    height:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.3rem;

    font-weight:400;

    transition:

        transform .3s ease,

        color .3s ease;

}


.faq-item.active .faq-icon{

    color:var(--project-accent);

    transform:rotate(180deg);

}



/* =====================================================
   ANSWER
===================================================== */

.faq-answer{

    display:grid;

    grid-template-rows:0fr;

    transition:grid-template-rows .35s ease;

}


.faq-answer p{

    overflow:hidden;

    margin:0;

    max-width:600px;

    padding:0;

    color:#666;

    font-size:.88rem;

    line-height:1.8;

}


.faq-item.active .faq-answer{

    grid-template-rows:1fr;

}


.faq-item.active .faq-answer p{

    padding-bottom:20px;

}



/* =====================================================
   TABLET
===================================================== */

@media(max-width:900px){

    .faq-grid{

        grid-template-columns:1fr;

        gap:0;

    }

}



/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px){

    .project-faq{

        padding:70px 0;

    }


    .faq-question{

        padding:17px 0;

        font-size:.85rem;

    }


    .faq-icon{

        width:22px;

        height:22px;

        font-size:1.1rem;

    }


    .faq-answer p{

        font-size:.82rem;

        line-height:1.7;

    }

}

/* =====================================================
   CTA FINAL
===================================================== */

.project-cta{

    position:relative;

    min-height:300px;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:65px 0;

    background-image:url("img/cta-desktop.jpg");

    background-size:cover;

    background-position:center;

    color:#fff;

}


/* =====================================================
   OVERLAY
===================================================== */

.project-cta-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.58);

    z-index:1;

}


/* =====================================================
   CONTAINER
===================================================== */

.project-cta-container{

    position:relative;

    z-index:2;

    width:min(90%,1400px);

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

}


/* =====================================================
   CONTENT
===================================================== */

.project-cta-content{

    max-width:520px;

}


.project-cta .project-section-number{

    display:block;

    margin-bottom:14px;

    color:#fff;

}


.project-cta h2{

    margin:0 0 20px;

    font-family:Georgia, serif;

    font-size:clamp(2.5rem,4vw,4.5rem);

    font-weight:400;

    line-height:.95;

}


.project-cta p{

    max-width:400px;

    margin:0;

    color:rgba(255,255,255,.78);

    font-size:.9rem;

    line-height:1.7;

}


/* =====================================================
   BUTTON
===================================================== */

.project-cta-button{

    min-width:290px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    padding:24px 30px;

    background:#fff;

    color:#111;

    text-decoration:none;

    font-size:.85rem;

    font-weight:600;

    transition:

        background .3s ease,

        transform .3s ease;

}


.project-cta-button:hover{

    background:#f50087;

    color:#fff;

    transform:translateY(-3px);

}


.cta-arrow{

    font-size:1.5rem;

    line-height:1;

}



/* =====================================================
   MOBILE
===================================================== */

@media(max-width:700px){

    .project-cta{

        min-height:520px;

        padding:90px 0;

        background-image:url("img/cta-mobile.jpg");

        background-position:center;

    }


    .project-cta-overlay{

        background:rgba(0,0,0,.62);

    }


    .project-cta-container{

        flex-direction:column;

        align-items:flex-start;

        gap:40px;

    }


    .project-cta-content{

        max-width:100%;

    }


    .project-cta h2{

        font-size:clamp(2.6rem,12vw,4rem);

    }


    .project-cta p{

        max-width:330px;

    }


    .project-cta-button{

        width:100%;

        min-width:0;

    }

}

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

.footer{

    background:#080808;

    border-top:1px solid rgba(255,255,255,.08);

    padding:45px 0;

}

.footer-container{

    width:min(92%,1400px);

    margin:auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    align-items:center;

    gap:25px;

}

.footer-logo img{

    width:220px;

}

.footer-copy{

    text-align:center;

    color:#ddd;

    line-height:2;

    letter-spacing:.18em;

    text-transform:uppercase;

    font-size:.82rem;

}

.footer-text{

    color:white;

    text-align:center;

    text-transform:uppercase;

    letter-spacing:.22em;

    line-height:2;

}

.footer-star{

    display:flex;

    justify-content:flex-end;

}

.footer-star img{

    width:65px;

}


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

@media(max-width:1100px){
	.footer-container{

    grid-template-columns:1fr;

    text-align:center;

    gap:45px;

}

.footer-star{

    justify-content:center;

}

}

@media(max-width:768px){
	.footer-logo img{

    width:180px;

}

.footer-star img{

    width:48px;

}

}