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

#lux-home{
    width:100%;
}

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

#hero{
    position:relative;
    width:100%;
    height:700px;
    overflow:hidden;
}

.hero-slider{
    position:relative;
    width:100%;
    height:100%;
}

/*----------------------------------
    Slides
----------------------------------*/

.hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity .8s ease-in-out;
}

.hero-slide.active{
    opacity:1;
    visibility:visible;
}

.hero-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/*----------------------------------
    Overlay
----------------------------------*/

.hero-overlay{

    position:absolute;
    inset:0;

    background: transparent
    );

    z-index:2;
}

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

.hero-content{

    position:absolute;

    top:50%;

    left:8%;

    transform:translateY(-50%);

    width:500px;

    padding:45px;

    background:rgba(97,53,54,0.70);

    border-left:6px solid var(--color-terciario);

    color:white;

    z-index:3;

}

.hero-content h1{

    color:white !important;

    font-size:46px;

    line-height:1.15;

    font-weight:600;

    letter-spacing:-0.5px;

    margin-bottom:20px;

}

.hero-content p{

    color:white;

    font-size:17px;

    line-height:1.7;

    margin-bottom:30px;

}

/*----------------------------------
    Botón
----------------------------------*/

.btn-principal{

    background:var(--color-terciario);

    color:white !important;

    padding:14px 35px;

    display:inline-block;

    text-transform:uppercase;

    font-size:14px;

    letter-spacing:1px;

    transition:.3s ease;

}


.btn-principal:hover{

    background:white;

    color:var(--color-secundario) !important;

}

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

.hero-prev,
.hero-next{

    position:absolute !important;

    top:50%;

    transform:translateY(-50%);

    width:48px;

    height:48px;

    padding:0 !important;

    border-radius:50%;

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

    background:rgba(97,53,54,0.25) !important;

    color:white !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    cursor:pointer;

    z-index:10;

    transition:.3s ease;

    backdrop-filter:blur(2px);

}


/* Posición */

.hero-prev{

    left:35px;

}


.hero-next{

    right:35px;

}


/* Símbolos */

.hero-prev span,
.hero-next span{

    display:block;

    color:white !important;

    font-size:42px;

    font-weight:300;

    line-height:1;

    margin-top:-4px;

}



/* Hover */

.hero-prev:hover,
.hero-next:hover{

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

    border-color:var(--color-terciario) !important;

}



/* Movimiento sutil */

.hero-prev:hover span{

    transform:translateX(-2px);

}


.hero-next:hover span{

    transform:translateX(2px);

}

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

.hero-dots{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:30;

}

.dot{

    width:13px;

    height:13px;

    border:2px solid #ffffff;

    border-radius:50%;

    background:transparent;

    cursor:pointer;

    transition:.12s;

}

.dot.active{

    background:var(--color-terciario);

    border-color:var(--color-terciario);

    transform:scale(1.2);

}

/*==================================================
    PRODUCTOS DESTACADOS - GRID
==================================================*/

.productos-grid {

    width: 100%;
    max-width: 1200px;
    margin: 50px auto 0;
    display: grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap: 30px;
    padding-bottom: 15px;

}


.producto-card {

    width: 100%;
    max-width: 300px;
    margin: 0 auto;

}


.producto-img{

    width:100%;

    aspect-ratio:1 / 1;

    overflow:hidden;

}


.producto-img img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*==================================================
        SERVICIOS
==================================================*/


#servicios{

    padding:var(--section-padding);

}



.services-grid{

    display:grid;

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

    gap:30px;

    margin-top:50px;

}

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

#nuestro-proceso{
    padding:80px 0;
}

/*==================================================
    MARCAS
==================================================*/

#marcas{
    padding:80px 0;
}

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

#cta{
    padding:80px 0;
}