/* =========================================================
   NATURIVA
   GALERIA.CSS
   ESTILOS EXCLUSIVOS DE LA GALERIA
   ========================================================= */


/* =========================================================
   SECCION GALERIA
   ========================================================= */

.galeria-premium{

    position:relative;

    padding:110px 5% 120px;

    background:

    radial-gradient(
        circle at 15% 20%,
        rgba(167,212,107,.12),
        transparent 30%
    ),

    linear-gradient(
        180deg,
        #ffffff 0%,
        #f7fbf2 100%
    );

    overflow:hidden;

}


/* =========================================================
   DECORACION
   ========================================================= */

.galeria-premium::before{

    content:"";

    position:absolute;

    width:400px;
    height:400px;

    border-radius:50%;

    background:rgba(127,191,77,.08);

    left:-220px;
    top:150px;

    filter:blur(5px);

}


.galeria-premium::after{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    border-radius:50%;

    background:rgba(11,107,58,.05);

    right:-150px;
    bottom:50px;

}


/* =========================================================
   TITULO
   ========================================================= */

.titulo-galeria{

    text-align:center;

    margin-bottom:55px;

    position:relative;

    z-index:2;

}


.titulo-galeria span{

    display:block;

    color:var(--verdeLogo);

    font-family:'Cormorant Garamond',serif;

    font-size:25px;

    letter-spacing:3px;

    margin-bottom:4px;

}


.titulo-galeria h2{

    font-family:'Cormorant Garamond',serif;

    font-size:58px;

    color:var(--verdeOscuro);

    line-height:1;

}


.titulo-galeria p{

    margin-top:15px;

    color:#66816c;

    font-size:14px;

    letter-spacing:1px;

}


/* =========================================================
   CARRUSEL
   ========================================================= */

.carrusel-galeria{

    position:relative;

    width:100%;

    max-width:1450px;

    margin:auto;

    display:flex;

    align-items:center;

    gap:20px;

    z-index:5;

}


.ventana-galeria{

    width:100%;

    overflow:hidden;

    position:relative;

    border-radius:28px;

    padding:25px 0;

    touch-action:pan-y;

}


.track-galeria{

    display:flex;

    gap:30px;

    width:max-content;

    will-change:transform;

    cursor:grab;

}


/* =========================================================
   TARJETAS
   ========================================================= */

.item-galeria{

    position:relative;

    flex:0 0 360px;

    height:470px;

    border-radius:28px;

    overflow:hidden;

    background:#ffffff;

    box-shadow:

        0 15px 40px rgba(11,107,58,.12),

        0 3px 12px rgba(0,0,0,.06);

    cursor:pointer;

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}


.item-galeria:hover{

    transform:translateY(-10px);

    box-shadow:

        0 25px 55px rgba(11,107,58,.20);

}


.item-galeria img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .8s ease;

}


.item-galeria:hover img{

    transform:scale(1.08);

}


/* =========================================================
   CAPA OSCURA
   ========================================================= */

.item-galeria::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to top,

        rgba(4,45,23,.85),

        rgba(4,45,23,.15) 55%,

        transparent 75%

    );

    pointer-events:none;

}


/* =========================================================
   INFORMACION
   ========================================================= */

.info-tarjeta{

    position:absolute;

    z-index:3;

    left:25px;
    right:25px;
    bottom:25px;

    color:#ffffff;

}


.info-tarjeta h3{

    font-family:'Cormorant Garamond',serif;

    font-size:30px;

    margin-bottom:5px;

}


.info-tarjeta p{

    font-size:12px;

    line-height:1.6;

    opacity:.9;

}


/* =========================================================
   FLECHAS
   ========================================================= */

.flecha-galeria{

    flex:0 0 54px;

    width:54px;
    height:54px;

    border:none;

    border-radius:50%;

    background:var(--verdeOscuro);

    color:#ffffff;

    font-size:21px;

    cursor:pointer;

    z-index:20;

    box-shadow:

        0 8px 25px rgba(11,107,58,.25);

    transition:.3s ease;

}


.flecha-galeria:hover{

    background:var(--verdeLogo);

    transform:scale(1.08);

}


/* =========================================================
   OPTIMIZACION DURANTE EL MOVIMIENTO
   ========================================================= */

@media (min-width:769px){

    .track-galeria{

        animation:none !important;

        transition:none;

        will-change:transform;

        backface-visibility:hidden;

        -webkit-backface-visibility:hidden;

    }


    .item-galeria{

        backface-visibility:hidden;

        -webkit-backface-visibility:hidden;

    }

}


/* =========================================================
   MOVIL
   ========================================================= */

@media(max-width:768px){

    .galeria-premium{

        padding:70px 15px;

    }


    .flecha-galeria{

        display:none;

    }


    .titulo-galeria h2{

        font-size:42px;

    }


    .item-galeria{

        width:280px;

        height:360px;

        flex:0 0 280px;

    }

}
/* =========================================================
   GALERIA - SWIPE MOVIL
   ========================================================= */

.ventana-galeria{
    touch-action:pan-y;
    overflow:hidden;
}


.track-galeria{
    display:flex;
    will-change:transform;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}


.item-galeria{
    flex-shrink:0;
}


@media(max-width:768px){

    .carrusel-galeria{
        overflow:hidden;
    }


    .flecha-galeria{
        display:none;
    }


    .ventana-galeria{
        width:100%;
        overflow:hidden;
        cursor:grab;
    }


    .ventana-galeria:active{
        cursor:grabbing;
    }


    .item-galeria{
        width:280px;
        height:360px;
    }


    .track-galeria{
        gap:20px;
    }

}
/* =========================================================
   LIGHTBOX GALERIA
   ESTILOS EXCLUSIVOS DE LA GALERIA
   ========================================================= */

.lightbox{

    position:fixed;

    inset:0;

    z-index:99999;

    display:none;

    align-items:center;

    justify-content:center;

    padding:30px;

    background:rgba(2,24,12,.90);

    backdrop-filter:blur(12px);

}


.lightbox.activo{

    display:flex;

}


.cerrar{

    position:absolute;

    top:20px;

    right:30px;

    z-index:20;

    color:#fff;

    font-size:50px;

    line-height:1;

    cursor:pointer;

    transition:.3s ease;

}


.cerrar:hover{

    color:#7fbf4d;

    transform:rotate(90deg);

}


.tarjeta-ampliada{

    width:900px;

    max-width:92vw;

    max-height:90vh;

    overflow:hidden;

    background:#fff;

    border-radius:25px;

    box-shadow:0 30px 100px rgba(0,0,0,.5);

}


.tarjeta-ampliada img{

    width:100%;

    max-height:65vh;

    object-fit:contain;

    background:#111;

}


.texto-ampliado{

    padding:25px 30px;

}


.texto-ampliado h2{

    color:#0b6b3a;

    font-family:'Cormorant Garamond',serif;

    font-size:35px;

}


.texto-ampliado p{

    color:#63776a;

    line-height:1.7;

    margin-top:8px;

}
/* =========================================================
   NATURIVA
   LIGHTBOX PREMIUM
   ESTILOS EXCLUSIVOS DE GALERIA
   ========================================================= */

.lightbox{
    position:fixed !important;
    inset:0 !important;

    display:none;

    align-items:center !important;
    justify-content:center !important;

    padding:30px !important;

    background:rgba(5,35,20,.92) !important;

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

    z-index:9999 !important;

    overflow:auto !important;
}


.lightbox.activo{
    display:flex !important;
}


/* =========================================================
   TARJETA
   ========================================================= */

.lightbox .tarjeta-ampliada{

    position:relative !important;

    width:min(1100px,92vw) !important;
    height:min(680px,86vh) !important;

    max-width:1100px !important;
    max-height:86vh !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,58fr)
        minmax(320px,42fr) !important;

    background:#ffffff !important;

    border:3px solid #66ff00 !important;

    border-radius:30px !important;

    overflow:hidden !important;

    box-shadow:
        0 0 30px rgba(102,255,0,.22),
        0 35px 100px rgba(0,0,0,.50) !important;
}


/* =========================================================
   FOTO
   ========================================================= */

.lightbox .tarjeta-ampliada > img{

    position:relative !important;

    z-index:2 !important;

    width:100% !important;
    height:100% !important;

    min-width:0 !important;
    min-height:0 !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:contain !important;
    object-position:center !important;

    display:block !important;

    margin:0 !important;

    border-radius:0 !important;

    background:
        radial-gradient(
            circle at center,
            #f4faee 0%,
            #e7f2dc 55%,
            #dbeace 100%
        ) !important;
}


/* =========================================================
   TEXTO
   ========================================================= */

.lightbox .texto-ampliado{

    position:relative !important;

    z-index:3 !important;

    width:100% !important;
    height:100% !important;

    min-width:0 !important;
    min-height:0 !important;

    padding:
        clamp(30px,4vw,55px)
        clamp(25px,3.5vw,48px) !important;

    display:flex !important;

    flex-direction:column !important;

    justify-content:center !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfdf8 55%,
            #f1f8e9 100%
        ) !important;

    color:#185b27 !important;

    overflow-y:auto !important;
}


.lightbox .texto-ampliado h2{

    font-family:'Cormorant Garamond',serif;

    font-size:42px;

    line-height:1.05;

    margin-bottom:15px;

    color:#185b27;
}


.lightbox .texto-ampliado h2::after{

    content:"";

    display:block;

    width:65px;

    height:3px;

    margin-top:15px;

    border-radius:10px;

    background:#7fbf4d;
}


.lightbox .texto-ampliado p{

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

    font-size:17px;

    line-height:1.8;

    color:#66766b;

    overflow-wrap:anywhere;
}


/* =========================================================
   BOTON CERRAR
   ========================================================= */

.lightbox .cerrar{

    position:fixed !important;

    top:20px !important;
    right:28px !important;

    width:48px !important;
    height:48px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;

    border-radius:50% !important;

    background:rgba(255,255,255,.12) !important;

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

    color:#ffffff !important;

    font-size:37px !important;

    line-height:1 !important;

    cursor:pointer !important;

    z-index:10001 !important;

    transition:
        transform .2s ease,
        background .2s ease !important;
}


.lightbox .cerrar:hover{

    background:#7fbf4d !important;

    transform:
        rotate(90deg)
        scale(1.06) !important;
}


/* =========================================================
   SCROLL DEL TEXTO
   ========================================================= */

.lightbox .texto-ampliado::-webkit-scrollbar{

    width:6px;
}


.lightbox .texto-ampliado::-webkit-scrollbar-track{

    background:transparent;
}


.lightbox .texto-ampliado::-webkit-scrollbar-thumb{

    background:#a7d46b;

    border-radius:20px;
}


/* =========================================================
   FONDO DESENFOCADO PARA FOTOS VERTICALES
   ========================================================= */

.lightbox .tarjeta-ampliada::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:58%;
    height:100%;

    background-image:

        linear-gradient(
            rgba(15,55,28,.18),
            rgba(15,55,28,.18)
        ),

        var(--foto-lightbox);

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    filter:blur(22px);

    transform:scale(1.08);

    opacity:.55;

    z-index:0;

    pointer-events:none;
}


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

@media(max-width:900px){

    .lightbox{

        padding:20px !important;
    }


    .lightbox .tarjeta-ampliada{

        width:94vw !important;

        height:82vh !important;

        grid-template-columns:
            55% 45% !important;
    }


    .lightbox .texto-ampliado{

        padding:
            30px 25px !important;
    }


    .lightbox .texto-ampliado h2{

        font-size:
            clamp(30px,5vw,42px) !important;
    }

}


/* =========================================================
   CELULAR
   ========================================================= */

@media(max-width:700px){

    .lightbox{

        padding:
            55px 12px
            12px !important;

        align-items:center !important;
    }


    .lightbox .tarjeta-ampliada{

        width:94vw !important;

        height:88vh !important;

        max-width:94vw !important;

        max-height:88vh !important;

        display:grid !important;

        grid-template-columns:
            1fr !important;

        grid-template-rows:
            minmax(0,58%)
            minmax(0,42%) !important;

        border-radius:22px !important;
    }


    /* FOTO ARRIBA */

    .lightbox .tarjeta-ampliada > img{

        width:100% !important;

        height:100% !important;

        object-fit:contain !important;
    }


    /* TEXTO ABAJO */

    .lightbox .texto-ampliado{

        height:100% !important;

        padding:
            20px 22px !important;

        justify-content:flex-start !important;

        overflow-y:auto !important;
    }


    .lightbox .texto-ampliado h2{

        margin-bottom:10px !important;

        font-size:
            clamp(27px,8vw,34px) !important;
    }


    .lightbox .texto-ampliado h2::after{

        margin-top:10px;

        width:50px;
    }


    .lightbox .texto-ampliado p{

        font-size:13px !important;

        line-height:1.55 !important;
    }


    .lightbox .cerrar{

        top:10px !important;

        right:12px !important;

        width:40px !important;

        height:40px !important;

        font-size:31px !important;
    }


    /* FONDO DESENFOCADO MOVIL */

    .lightbox .tarjeta-ampliada::before{

        width:100%;

        height:58%;

        top:0;

        left:0;

        filter:blur(18px);

        transform:scale(1.08);

        opacity:.50;
    }

}


/* =========================================================
   CELULARES CON POCA ALTURA
   ========================================================= */

@media(max-width:700px)
and (max-height:650px){

    .lightbox .tarjeta-ampliada{

        height:86vh !important;

        grid-template-rows:
            minmax(0,52%)
            minmax(0,48%) !important;
    }


    .lightbox .texto-ampliado{

        padding:
            14px 18px !important;
    }


    .lightbox .texto-ampliado h2{

        font-size:25px !important;
    }


    .lightbox .texto-ampliado p{

        font-size:12px !important;
    }

}
/* =========================================================
   GALERIA - RESPONSIVE GENERAL
   PC + MOVIL
   ========================================================= */

@media (max-width:768px){

    .galeria-premium{
        padding:70px 15px;
    }

    .flecha-galeria{
        display:none;
    }

    .titulo-galeria h2{
        font-size:42px;
    }

    .item-galeria{
        width:280px;
        height:360px;
        flex:0 0 280px;
    }

}