/*==========================================================
 KORVENZAY STUDIOS
 STYLE V2
 Cinematic Design System
 Versión 2.0
==========================================================*/



/*==========================================================
01. VARIABLES
==========================================================*/

:root{

    /* Colores */

    --color-bg:#050505;
    --color-bg-soft:#0B0B0B;
    --color-surface:#121212;
    --color-surface-2:#1A1A1A;

    --color-white:#FFFFFF;
    --color-text:#D7D7D7;
    --color-text-soft:#9F9F9F;

    --color-primary:#FF7A00;
    --color-primary-hover:#FF9D3F;

    --color-border:rgba(255,255,255,.08);



    /* Sombras */

    --shadow-sm:0 8px 20px rgba(0,0,0,.18);

    --shadow-md:0 18px 45px rgba(0,0,0,.35);

    --shadow-lg:0 35px 80px rgba(0,0,0,.50);



    /* Bordes */

    --radius-sm:8px;

    --radius-md:16px;

    --radius-lg:28px;



    /* Layout */

    --container:1320px;

    --section-space:120px;



    /* Transiciones */

    --transition:.35s ease;

}



/*==========================================================
02. RESET
==========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--color-bg);

    color:var(--color-white);

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

    overflow-x:hidden;

    line-height:1.7;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    border:none;

    outline:none;

    cursor:pointer;

    background:none;

    font-family:inherit;

}

section{

    position:relative;

}



/*==========================================================
03. TIPOGRAFÍA
==========================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:'Space Grotesk',sans-serif;

    font-weight:700;

    line-height:1.1;

    letter-spacing:.5px;

    margin-bottom:0;

}

p{

    color:var(--color-text);

    margin-bottom:0;

    font-size:1rem;

}

.display-title{

    font-size:clamp(3rem,7vw,6rem);

    font-weight:700;

}

.section-title{

    font-size:clamp(2.3rem,4vw,3.8rem);

    font-weight:700;

    margin-bottom:20px;

}

.section-text{

    font-size:1.08rem;

    color:var(--color-text);

    max-width:900px;

    line-height:1.9;

}



/*==========================================================
04. LAYOUT
==========================================================*/

.container{

    max-width:var(--container);

}

.section{

    padding:var(--section-space) 0;

}

.section-small{

    padding:80px 0;

}

.section-large{

    padding:180px 0;

}



/*==========================================================
05. BOTONES
==========================================================*/

.btn-kvz{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:16px 34px;

    border-radius:100px;

    background:var(--color-primary);

    color:#FFF;

    font-weight:600;

    transition:var(--transition);

}

.btn-kvz:hover{

    background:var(--color-primary-hover);

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}



/*==========================================================
06. TARJETAS
==========================================================*/

.card-cinematic{

    background:var(--color-surface);

    border:1px solid var(--color-border);

    border-radius:var(--radius-md);

    transition:var(--transition);

}

.card-cinematic:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-md);

}



/*==========================================================
07. UTILIDADES
==========================================================*/

.text-center{

    text-align:center;

}

.text-muted{

    color:var(--color-text-soft)!important;

}

.shadow-soft{

    box-shadow:var(--shadow-sm);

}

.shadow-medium{

    box-shadow:var(--shadow-md);

}

.shadow-large{

    box-shadow:var(--shadow-lg);

}

.rounded-lg{

    border-radius:var(--radius-lg);

}

.glass{

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.05);

}

.bg-gradient{

    background:
    radial-gradient(circle at top,#1d1d1d 0%,#050505 70%);
}



/*==========================================================
FIN BLOQUE 1
==========================================================*/

/*==========================================================
08. CINEMATIC NAVBAR
==========================================================*/

.main-navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    padding:20px 0;

    background:rgba(5,5,5,.18);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(255,255,255,.05);

    transition:all .45s ease;

}

.main-navbar::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        transparent
    );

    opacity:.25;

    pointer-events:none;

}

.main-navbar.scrolled{

    background:rgba(5,5,5,.92);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    padding:12px 0;

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

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

}


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

.navbar-brand{

    display:flex;

    align-items:center;

    gap:14px;

    position:relative;

    z-index:2;

}

.navbar-brand img{

    width:56px;

    height:56px;

    object-fit:contain;

    transition:transform .45s ease;

}

.main-navbar.scrolled .navbar-brand img{

    width:48px;

    height:48px;

}

.navbar-brand:hover img{

    transform:rotate(-6deg) scale(1.05);

}

.brand-text{

    font-family:'Space Grotesk',sans-serif;

    font-size:1.45rem;

    font-weight:700;

    letter-spacing:5px;

    color:#fff;

    text-transform:uppercase;

    transition:.35s ease;

}


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

.navbar-nav{

    align-items:center;

    gap:26px;

}

.nav-link{

    position:relative;

    display:inline-flex;

    align-items:center;

    padding:10px 0 !important;

    color:rgba(255,255,255,.72)!important;

    font-size:.83rem;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:all .35s ease;

}

.nav-link:hover{

    color:#fff!important;

}

.nav-link::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:linear-gradient(
        90deg,
        #FF7A00,
        #ffb066
    );

    transition:width .35s ease;

}

.nav-link:hover::before{

    width:100%;

}

.nav-link.active{

    color:#fff!important;

}

.nav-link.active::before{

    width:100%;

}


/*==========================================================
BOTON CTA
==========================================================*/

.navbar .btn-kvz{

    padding:12px 26px;

    font-size:.82rem;

    letter-spacing:1px;

}


/*==========================================================
TOGGLER
==========================================================*/

.navbar-toggler{

    border:none;

    box-shadow:none!important;

}

.navbar-toggler:focus{

    box-shadow:none;

}

.navbar-toggler{

    border:1px solid rgba(255,255,255,.12);

    padding:.55rem .75rem;

    border-radius:12px;

}

.navbar-toggler:focus{

    box-shadow:none;

}

.navbar-toggler-icon{

    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}

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

@media (max-width:991px){

.main-navbar{

    background:rgba(5,5,5,.95);

}

.navbar-collapse{

    margin-top:18px;

    padding:25px;

    border-radius:20px;

    background:rgba(18,18,18,.96);

    border:1px solid rgba(255,255,255,.05);

}

.navbar-nav{

    gap:10px;

}

.nav-link{

    padding:14px 0!important;

    font-size:.9rem;

}

}



/*==========================================================
09. HERO CINEMATOGRÁFICO
==========================================================*/

.main-slider{

    position:relative;

    width:100%;

    height:100vh;

    min-height:760px;

    overflow:hidden;

    background:#000;

}

.main-slider .carousel-inner,
.main-slider .carousel-item{

    height:100%;

}

.main-slider img,
.main-slider video,
.main-slider iframe{

    width:100%;

    height:100%;

    object-fit:cover;

}


/*==========================================================
OVERLAY CINEMATOGRÁFICO
==========================================================*/

.main-slider .carousel-item{

    position:relative;

}

.main-slider .carousel-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.45) 35%,
        rgba(0,0,0,.15) 65%,
        rgba(0,0,0,.35) 100%
    );

    z-index:1;

}

.main-slider .carousel-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at center,
    transparent 45%,
    rgba(0,0,0,.55) 100%);

    z-index:1;

}


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

.hero-content{

    position:absolute;

    z-index:5;

    left:8%;

    top:50%;

    transform:translateY(-50%);

    width:min(650px,90vw);

    text-align:left;

}

.hero-content h5{

    font-family:'Space Grotesk',sans-serif !important;

    font-size:clamp(3rem,5vw,5.5rem)!important;

    font-weight:700;

    line-height:1;

    letter-spacing:-2px;

    margin-bottom:25px;

    color:#FFF!important;

    text-shadow:0 10px 40px rgba(0,0,0,.55);

}

.hero-content p{

    font-size:1.2rem;

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

    max-width:620px;

    line-height:1.8;

    margin-bottom:35px;

    text-shadow:0 5px 25px rgba(0,0,0,.5);

}


/*==========================================================
BOTÓN HERO
==========================================================*/

.hero-content .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:100px;

    background:var(--color-primary)!important;

    color:#FFF!important;

    border:none!important;

    font-weight:600;

    letter-spacing:1px;

    transition:.35s;

}

.hero-content .btn:hover{

    background:#ff9834!important;

    transform:translateY(-4px);

    box-shadow:0 20px 50px rgba(255,122,0,.35);

}


/*==========================================================
CONTROLES DEL CARRUSEL
==========================================================*/

.carousel-control-prev,
.carousel-control-next{

    width:7%;

    opacity:.75;

    transition:.3s;

}

.carousel-control-prev:hover,
.carousel-control-next:hover{

    opacity:1;

}

.carousel-control-prev-icon,
.carousel-control-next-icon{

    width:55px;

    height:55px;

    border-radius:50%;

    backdrop-filter:blur(12px);

    background-color:rgba(255,255,255,.08);

}


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

.main-slider::after{

    content:"SCROLL";

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

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

    font-size:.75rem;

    letter-spacing:6px;

    z-index:10;

}

/*==========================================================
10. HERO PREMIUM
==========================================================*/


/*-----------------------------------
TÍTULO
------------------------------------*/

.hero-content h5{

    max-width:720px;

    font-family:'Space Grotesk',sans-serif !important;

    font-weight:700;

    letter-spacing:-2px;

    line-height:.95;

    text-transform:uppercase;

    text-wrap:balance;

    animation:heroFadeUp 1.2s ease;

}


/*-----------------------------------
DESCRIPCIÓN
------------------------------------*/

.hero-content p{

    max-width:600px;

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

    font-weight:300;

    animation:heroFadeUp 1.5s ease;

}


/*-----------------------------------
BOTÓN
------------------------------------*/

.hero-content .btn{

    overflow:hidden;

    position:relative;

    transition:.45s;

    animation:heroFadeUp 1.8s ease;

}


.hero-content .btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    transform:translateX(-120%);

    transition:.7s;

}

.hero-content .btn:hover::before{

    transform:translateX(120%);

}


/*-----------------------------------
VIDEO
------------------------------------*/

.main-slider video{

    filter:

    contrast(1.05)

    saturate(.95)

    brightness(.78);

}


/*-----------------------------------
IMAGEN
------------------------------------*/

.main-slider img{

    filter:

    brightness(.82)

    contrast(1.05);

}


/*-----------------------------------
CONTROLES
------------------------------------*/

.carousel-control-prev-icon,

.carousel-control-next-icon{

    transition:.35s;

}


.carousel-control-prev:hover .carousel-control-prev-icon,

.carousel-control-next:hover .carousel-control-next-icon{

    transform:scale(1.08);

}


/*-----------------------------------
ANIMACIONES
------------------------------------*/

@keyframes heroFadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==========================================================
11. NOSOTROS
==========================================================*/

.nosotros-section{

    position:relative;

    padding:130px 0;

    background:
    radial-gradient(circle at top,
    rgba(255,122,0,.04),
    transparent 45%);

    overflow:hidden;

    text-align:center;

}


/*-----------------------------------
TÍTULO
------------------------------------*/

.nosotros-titulo{

    font-family:'Space Grotesk',sans-serif;

    font-size:clamp(2.6rem,5vw,4.4rem);

    font-weight:700;

    line-height:1.05;

    letter-spacing:-2px;

    color:#FFF;

    max-width:900px;

    margin:0 auto 25px;

}


/*-----------------------------------
LÍNEA
------------------------------------*/

.nosotros-titulo::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin:30px auto 0;

    border-radius:30px;

    background:#FF7A00;

}


/*-----------------------------------
PÁRRAFO
------------------------------------*/

.nosotros-texto{

    max-width:980px;

    margin:50px auto 0;

    font-size:1.18rem;

    line-height:2;

    font-weight:300;

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

}


/*-----------------------------------
LUZ SUPERIOR
------------------------------------*/

.nosotros-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:50%;

    top:-520px;

    transform:translateX(-50%);

    background:

    radial-gradient(circle,

    rgba(255,122,0,.08),

    transparent 70%);

}


/*-----------------------------------
LUZ INFERIOR
------------------------------------*/

.nosotros-section::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-150px;

    bottom:-180px;

    background:

    radial-gradient(circle,

    rgba(255,255,255,.03),

    transparent 70%);

}


/*==========================================================
12. SERVICIOS
==========================================================*/

#servicios{

    position:relative;

    padding:140px 0;

    background:
    linear-gradient(
        180deg,
        #070707 0%,
        #0d0d0d 100%
    );

    overflow:hidden;

}


/*-----------------------------------
TÍTULO
------------------------------------*/

.servicios-titulo{

    font-family:'Space Grotesk',sans-serif;

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

    font-weight:700;

    letter-spacing:-2px;

    color:#FFF;

    text-align:center;

    margin-bottom:80px!important;

}

.servicios-titulo::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    margin:28px auto 0;

    border-radius:30px;

    background:#FF7A00;

}


/*-----------------------------------
TARJETAS
------------------------------------*/

.kvz-service-card{

    position:relative;

    background:rgba(18,18,18,.82)!important;

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.06)!important;

    border-radius:26px!important;

    overflow:hidden;

    transition:all .45s ease;

}


/* Línea superior */

.kvz-service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        #FF7A00,
        transparent
    );

    opacity:.7;

}


/* Luz ambiental */

.kvz-service-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at top,

        rgba(255,122,0,.08),

        transparent 65%

    );

    opacity:0;

    transition:.45s ease;

}


/* Hover */

.kvz-service-card:hover{

    transform:translateY(-12px);

    border-color:rgba(255,122,0,.28)!important;

    box-shadow:

    0 30px 70px rgba(0,0,0,.55),

    0 0 35px rgba(255,122,0,.08);

}

.kvz-service-card:hover::after{

    opacity:1;

}


/*-----------------------------------
ICONOS
------------------------------------*/

.service-icon{

    width:100px;

    height:100px;

    object-fit:contain;

    margin:10px auto 30px;

    transition:all .45s ease;

}

.kvz-service-card:hover .service-icon{

    transform:scale(1.10) translateY(-5px);

}


/*-----------------------------------
TÍTULO TARJETA
------------------------------------*/

.service-title{

    font-family:'Space Grotesk',sans-serif;

    font-size:1.45rem;

    font-weight:700;

    color:#FFF;

    margin-bottom:18px;

    transition:.35s;

}

.kvz-service-card:hover .service-title{

    color:#FFB066;

}


/*-----------------------------------
DESCRIPCIÓN
------------------------------------*/

.service-text{

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

    line-height:1.9;

    font-size:1rem;

}


/*-----------------------------------
CARRETES DECORATIVOS
------------------------------------*/

.decor-reel{

    opacity:.05;

    filter:brightness(1.5);

    transition:.5s ease;

}


/*-----------------------------------
ESPACIADO
------------------------------------*/

#servicios .row{

    row-gap:35px;

}


/*==========================================================
13. PORTFOLIO
==========================================================*/

#portafolio{

    position:relative;

    padding:140px 0;

    background:
    linear-gradient(
        180deg,
        #090909 0%,
        #111111 100%
    );

    overflow:hidden;

}


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

.section-header{

    max-width:820px;

    margin:0 auto 90px;

}

.section-subtitle{

    display:inline-block;

    color:#FF7A00;

    font-size:.78rem;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.portafolio-titulo{

    font-family:'Space Grotesk',sans-serif;

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

    font-weight:700;

    letter-spacing:-2px;

    color:#fff;

}

.section-divider{

    width:90px;

    height:4px;

    background:#FF7A00;

    border-radius:30px;

    margin:28px auto;

}

.section-description{

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

    line-height:1.9;

    font-size:1.05rem;

}


/*=========================================
CARD
=========================================*/

.portfolio-card{

    background:#111;

    border-radius:24px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.06);

    transition:.45s;

    height:100%;

    position:relative;

}

.portfolio-card:hover{

    transform:translateY(-10px);

    border-color:rgba(255,122,0,.25);

    box-shadow:

    0 35px 80px rgba(0,0,0,.45),

    0 0 35px rgba(255,122,0,.08);

}


/*=========================================
BEFORE AFTER
=========================================*/

.before-after-wrapper{

    position:relative;

}

.before-after{

    position:relative;

    overflow:hidden;

    cursor:ew-resize;

    aspect-ratio:16/9;

    background:#000;

}

.before-after img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.before-after img.after{

    position:absolute;

    inset:0;

    clip-path:inset(0 50% 0 0);

    transition:clip-path .04s linear;

}


/*=========================================
LABELS
=========================================*/

.before-after::before,

.before-after::after{

    position:absolute;

    top:18px;

    z-index:10;

    padding:7px 14px;

    border-radius:40px;

    font-size:.72rem;

    font-weight:600;

    letter-spacing:2px;

    backdrop-filter:blur(12px);

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

    color:#FFF;

}

.before-after::before{

    content:"RAW";

    left:18px;

}

.before-after::after{

    content:"FINAL";

    right:18px;

}


/*=========================================
SLIDER
=========================================*/

.slider-handle{

    position:absolute;

    top:0;

    bottom:0;

    left:50%;

    width:0;

    z-index:15;

}

.slider-line{

    position:absolute;

    top:0;

    bottom:0;

    width:2px;

    left:-1px;

    background:white;

    opacity:.9;

}

.slider-handle::after{

    content:"⇆";

    position:absolute;

    top:50%;

    left:0;

    width:52px;

    height:52px;

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

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    color:#FFF;

    background:rgba(15,15,15,.82);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(14px);

    transition:.3s;

}

.portfolio-card:hover .slider-handle::after{

    background:#FF7A00;

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

}


/*=========================================
INFO
=========================================*/

.portfolio-info{

    padding:32px;

}

.portfolio-category{

    display:inline-block;

    font-size:.75rem;

    letter-spacing:3px;

    color:#FF7A00;

    text-transform:uppercase;

    margin-bottom:14px;

}

.portfolio-title{

    color:#FFF;

    font-family:'Space Grotesk',sans-serif;

    font-size:1.65rem;

    font-weight:700;

    margin-bottom:18px;

}

.portfolio-divider{

    width:60px;

    height:3px;

    background:#FF7A00;

    border-radius:20px;

    margin-bottom:22px;

}

.portfolio-description{

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

    line-height:1.8;

    margin:0;

}


/*=========================================
DECOR
=========================================*/

.decor-reel{

    position:absolute;

    opacity:.035;

    pointer-events:none;

}

.reel-left{

    top:120px;

    left:-90px;

    width:300px;

}

.reel-right{

    bottom:40px;

    right:-70px;

    width:240px;

}


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

@media(max-width:768px){

.section-header{

margin-bottom:60px;

}

.portfolio-info{

padding:24px;

}

.portfolio-title{

font-size:1.35rem;

}

}


/*==================================================
=            KORVENZAY GALLERY V2 - PART 1
==================================================*/

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

.gallery-section{
    padding:120px 0;
    background:#0b0b0b;
}

.gallery-header{
    text-align:center;
    margin-bottom:60px;
}

.gallery-title-section{
    margin:0;
    color:#fff;
    font-size:clamp(2rem,4vw,3.4rem);
    font-weight:700;
    letter-spacing:8px;
    text-transform:uppercase;
}

.gallery-line{
    width:80px;
    height:3px;
    margin:18px auto 0;
    border-radius:20px;
    background:#ff6b00;
}


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

.gallery-grid{

    display:grid;

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

    gap:8px;

}


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

.gallery-item{

    position:relative;

    overflow:hidden;

    background:#111;

    cursor:pointer;

    aspect-ratio:16/10;

}


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

.gallery-item img,
.gallery-item video{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .35s ease,
        filter .35s ease;

}


/*==============================
HOVER
==============================*/

.gallery-item:hover img,
.gallery-item:hover video{

    transform:scale(1.03);

    filter:brightness(.82);

}


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

@media (max-width:992px){

    .gallery-section{

        padding:90px 0;

    }

    .gallery-grid{

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

    }

}


@media (max-width:576px){

    .gallery-section{

        padding:70px 0;

    }

    .gallery-title-section{

        font-size:2rem;

        letter-spacing:5px;

    }

    .gallery-line{

        width:60px;

    }

    .gallery-grid{

        grid-template-columns:1fr;

        gap:6px;

    }

}

/*==================================================
=            KORVENZAY GALLERY V2 - PART 2
==================================================*/

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

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:24px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.55) 35%,
        rgba(0,0,0,.12) 70%,
        rgba(0,0,0,0) 100%
    );

    opacity:0;

    transition:opacity .30s ease;

}


/*==============================
HOVER
==============================*/

.gallery-item:hover .gallery-overlay{

    opacity:1;

}


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

.gallery-title{

    margin:0;

    color:#fff;

    font-size:1.25rem;

    font-weight:700;

    letter-spacing:1px;

    line-height:1.2;

    transform:translateY(12px);

    opacity:0;

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

}


.gallery-item:hover .gallery-title{

    transform:translateY(0);

    opacity:1;

}


/*==============================
DIVIDER
==============================*/

.gallery-title::after{

    content:"";

    display:block;

    width:45px;

    height:2px;

    margin-top:10px;

    background:#ff6b00;

    border-radius:20px;

}


/*==============================
DESCRIPTION
==============================*/

.gallery-description{

    margin:12px 0 0;

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

    font-size:.90rem;

    line-height:1.6;

    opacity:0;

    transform:translateY(12px);

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

}


.gallery-item:hover .gallery-description{

    opacity:1;

    transform:translateY(0);

}


/*==============================
KEYBOARD
==============================*/

.gallery-item:focus-within{

    outline:2px solid #ff6b00;

    outline-offset:3px;

}


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

@media (hover:none){

    .gallery-overlay{

        opacity:1;

        background:linear-gradient(
            to top,
            rgba(0,0,0,.70),
            rgba(0,0,0,.18),
            rgba(0,0,0,0)
        );

    }

    .gallery-title,
    .gallery-description{

        opacity:1;

        transform:none;

    }

}


@media (max-width:768px){

    .gallery-overlay{

        padding:18px;

    }

    .gallery-title{

        font-size:1.05rem;

    }

    .gallery-description{

        font-size:.85rem;

        line-height:1.5;

    }

}


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

.gallery-item img,
.gallery-item video{

    user-select:none;

    -webkit-user-drag:none;

    pointer-events:none;

}



/*==================================================
=          COLABORACIONES V2 - PART 1
==================================================*/

.collab-section{
    padding:120px 0;
    background:#0b0b0b;
}

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

.section-header{
    text-align:center;
    margin-bottom:55px;
}

.section-title{
    margin:0;
    color:#ffffff;
    font-size:clamp(2rem,4vw,3.4rem);
    font-weight:700;
    letter-spacing:8px;
    text-transform:uppercase;
}

.section-divider{
    width:80px;
    height:3px;
    margin:18px auto 22px;
    background:#ff6b00;
    border-radius:50px;
}

.section-subtitle{
    max-width:700px;
    margin:0 auto;
    color:#9a9a9a;
    font-size:1rem;
    line-height:1.8;
}


/*==============================
WRAPPER
==============================*/

.collab-wrapper{
    position:relative;
    overflow:hidden;
}


/*==============================
CAROUSEL
==============================*/

.collab-carousel{

    display:flex;

    gap:12px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

    cursor:grab;

    padding:6px 2px 12px;

}

.collab-carousel::-webkit-scrollbar{

    display:none;

}

.collab-carousel:active{

    cursor:grabbing;

}


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

.collab-item{

    flex:0 0 280px;

    position:relative;

    overflow:hidden;

    background:#111;

}

.collab-link{

    display:block;

    text-decoration:none;

}

.collab-item img{

    display:block;

    width:100%;

    height:auto;

    transition:
        transform .35s ease,
        filter .35s ease;

}


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

@media(max-width:992px){

    .collab-section{

        padding:90px 0;

    }

    .collab-item{

        flex:0 0 320px;

    }

}

@media(max-width:768px){

    .section-subtitle{
        font-size:.95rem;
        padding:0 15px;
    }

    .collab-item{
        flex:0 0 240px;
    }

}

@media(max-width:576px){

    .collab-section{
        padding:70px 0;
    }

    .section-title{
        font-size:2rem;
        letter-spacing:5px;
    }

    .section-divider{
        width:60px;
    }

    .collab-item{
        flex:0 0 210px;
    }

}

/*==================================================
=          COLABORACIONES V2 - PART 2
==================================================*/

/*==============================
POSTER HOVER
==============================*/

.collab-item{

    transition:
        transform .30s ease;

}

.collab-item:hover{

    transform:translateY(-6px);

}

.collab-item:hover img{

    transform:scale(1.04);

    filter:brightness(.88);

}


/*==============================
ARROWS
==============================*/

.collab-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:rgba(12,12,12,.78);

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    z-index:20;

    backdrop-filter:blur(10px);

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

}

.collab-arrow.left{

    left:-6px;

}

.collab-arrow.right{

    right:-6px;

}

.collab-arrow:hover{

    background:#ff6b00;

    color:#fff;

}

.collab-arrow:active{

    transform:translateY(-50%) scale(.96);

}


/*==============================
POSTER LINKS
==============================*/

.collab-link{

    display:block;

    overflow:hidden;

}

.collab-link img{

    display:block;

}


/*==============================
NOTE
==============================*/

.collab-note{

    margin-top:24px;

    text-align:center;

    color:#8d8d8d;

    font-size:.92rem;

    letter-spacing:.5px;

}

.collab-note i{

    margin-right:8px;

    color:#ff6b00;

}


/*==============================
FOCUS
==============================*/

.collab-link:focus-visible{

    outline:2px solid #ff6b00;

    outline-offset:4px;

}


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

@media(max-width:768px){

    .collab-arrow{

        display:none;

    }

    .collab-note{

        font-size:.85rem;

    }

}


/*==============================
DESKTOP DRAG FEEL
==============================*/

.collab-carousel{

    user-select:none;

    -webkit-user-select:none;

    -ms-user-select:none;

}

.collab-carousel img{

    -webkit-user-drag:none;

}


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

.collab-carousel{

    scroll-padding-left:10px;

    scroll-padding-right:10px;

}


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

.footer-magic{

    background:#080808;

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

    padding:70px 0 35px !important;

    margin-top:0 !important;

    text-align:center;

}

.footer-logo{

    width:170px;

    height:auto;

    opacity:.95;
    
     display:block;

    margin:0 auto;

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

}

.footer-brand:hover .footer-logo{
    
    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;

    text-decoration:none;

    transform:scale(1.03);

    opacity:1;

}

.footer-tagline{

    margin:22px 0 34px;

    color:#9c9c9c;

    font-size:.95rem;

    letter-spacing:4px;

    text-transform:uppercase;

}

.footer-social{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-bottom:35px;

}

.footer-social a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#121212;

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

}

.footer-social a:hover{

    background:#ff6b00;

    transform:translateY(-4px);

}

.footer-social img{

    width:22px;

    height:22px;

    object-fit:contain;

}

.footer-copy{

    margin:0;

    color:#666;

    font-size:.90rem;

    letter-spacing:.5px;

}

.footer-copy strong{

    color:#ffffff;

}

@media(max-width:768px){

    .footer-magic{

        padding:55px 0 30px !important;

    }

    .footer-logo{

        width:140px;

    }

    .footer-tagline{

        font-size:.85rem;

        letter-spacing:2px;

        margin:18px 0 28px;

    }

    .footer-social{

        gap:14px;

    }

    .footer-social a{

        width:42px;

        height:42px;

    }

    .footer-social img{

        width:20px;

        height:20px;

    }

}