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

:root{

    /* Fuentes */
    --font-title:'Space Grotesk', sans-serif;
    --font-text:'Inter', sans-serif;

    /* Pesos */
    --weight-regular:400;
    --weight-medium:500;
    --weight-bold:700;

    /*colores */
    --primary-color: #a855f7;
    --background-dark: #0d0d0d;
    --background-light-dark: #151515;
    --background-grey:#f5f5f5;
    --text-white: #ffffff;
    --text-gray: #b3b3b3;
}
html{
    scroll-behavior: smooth;
}
/* =========================
   BODY GENERAL
========================= */

body{

    font-family: var(--font-text);
    font-weight: var(--weight-regular);
    font-size:16px;
    line-height:1.6;
    margin: 0;
    padding: 0;
    background-color: var(--background-grey);
    overflow-x:hidden;
}

/* =========================
   TITULOS
========================= */

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

    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    letter-spacing:-0.03em;
}

/* =========================
   SUBTITULOS
========================= */

.subtitle{

    font-family: var(--font-title);
    font-weight: var(--weight-medium);

}

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

p,label,span,input{

    font-family: var(--font-text);
    font-weight: var(--weight-regular);

}

/* =========================
   BOTONES
========================= */

button,
.btn{
    font-family: var(--font-text);
    font-weight: var(--weight-medium);
}
.destacar{/*DESTACA TEXTO EN LILA*/
    color: var(--primary-color);
}
/**************************SECCION HERO***************/
.hero-section{
    /*min-height:50vh;*/

    min-height: 500px;
    /*height: 80vh;*/
    /*max-height: 700px;*/
    overflow:hidden;

    /*min-height:500px;
    height:calc(80vh - 80px);
    max-height:800px;
    display:flex;
    align-items:center;*/
    /*padding:80px 0;*/

    padding-top:80px;
    /*padding-bottom: 80px;*/
    /*min-height: 50vh;*/
    background-color: #0d0d0d;
    color: #ffffff;
    display: flex;
    align-items: center;
}
.hero-img{
    width:100%;
    max-width:600px;
    max-height:700px;
    object-fit:contain;
}
/***********************FIN SECCION HERO*************/
.card{ /*card general*/
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow:hidden;
}
/*viñetas*/
.viñeta-lila{
    color:var(--primary-color);
    font-size:1.1rem;
    margin-right: 10px;
}

/*********************SECCION PRODUCTOS*****************/
.products-section{
    background-color: #f5f5f5;
}
.card-img-top{
    height:250px;
    border-style: none;
    object-fit:cover;
}
.boton-flecha{
    width:50px;
    height:50px;
    transition:0.3s ease;
    border:2px solid var(--primary-color);
    color:var(--primary-color);
    background-color:transparent;
    transition:0.3s ease;
}
.boton-flecha:hover{
    transform:scale(1.1);
    background-color:var(--primary-color);
    color:white;
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(168,85,247,0.25);
}
.card-producto{
    overflow:hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.card-producto:hover{
    transform:
        translateY(-5px)
        scale(1.02);

    box-shadow:
        0 15px 30px rgba(0,0,0,0.15);
}
/*********************FIN SECCION PRODUCTOS*****************/

/*********************SECCION BENEFICIOS********************/
.card-beneficios{
    /*background-color:#000000;*/
    border:none;
    border-radius:10px;
    overflow:hidden;
}
.item-beneficios{
    color:#ffffff;
    border: none;
    text-align:center;
    /*padding:20px;*/
    /*padding-top: 40px;*/
    display:flex;
    flex-direction:column;
    min-height: 30px;
    background:linear-gradient(
        180deg,
        var(--primary-color),
        #1b1b1b);
}
/* Títulos */
.item-beneficio h6{
    color:#ffffff;
    margin-bottom:10px;
    margin-top:10px;
}
/* Texto */
.item-beneficio p{
    color:rgba(255,255,255,0.75);
    margin-bottom:0;
}
/* Íconos */
.icono-lila{
    width:60px;
    height:60px;
    filter:
    invert(45%)
    sepia(94%)
    saturate(749%)
    hue-rotate(231deg)
    brightness(101%)
    contrast(95%);
    margin-bottom:10px;
}
.icon-beneficio-wrapper{
    /*height:60px;*/
    display:flex;
    align-items:center;
    justify-content:center;
    /*margin-bottom:10px;*/
    margin-top: 15px;
}
/*MOBILE PARA SECCION TEXTIL*/
@media(max-width:991px){
    .info-compra-items{
        flex-direction:column;
        width:max-content;
        margin:0 auto;
        align-items:flex-start;
        gap:0.4rem !important;
    }
}
/*******************FIN SECCION BENEFICIOS*****************/

/*********************SECCION SERVICIOS*****************/   
.card-horizontal-img{
    height:100%;
    width:100%;
    min-height:350px;
    object-fit:cover;
}
.boton-action{
    transition:0.3s ease;
    border:2px solid var(--primary-color);
    color:var(--primary-color);
    background-color:transparent;
    transition:0.3s ease;
}
.boton-action:hover{
    transform:scale(1.1);
    background-color:var(--primary-color);
    color:white;
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(168,85,247,0.25);
}
.bi-wp{
    font-size:1.5rem;
    color:#25D366;
}
.card-efx{
    opacity:0;
    transform:translateY(40px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.card-efx.active{
    opacity:1;
    transform:translateY(0);
}
/*********************FIN SECCION SERVICIOS**************/

/********************SECCION FOOTER***********************/
.boton-action-sub{
    transition:0.3s ease;
    border:2px solid var(--primary-color);
    color:var(--primary-color);
    background-color:var(--background-dark);
    transition:0.3s ease;
}
.boton-action-sub:hover{
    transform:scale(1.1) translateY(-2px);
    background-color:var(--primary-color);
    box-shadow:0 10px 20px rgba(168,85,247,0.25);
}
.qr-lila{
    width: 180px;
    height: 180px;
    border-radius: 10px;
    margin-bottom: 10px;
    /*mix-blend-mode: multiply;*/
    border: 2px solid #a855f7;
    display:block;
    margin:0 auto;
}
.footer{
    background-color:var(--background-dark);
    color:#ffffff;
    padding:40px 30px;
    /*background:linear-gradient(
        180deg,
        var(--primary-color),
        #1b1b1b);*/
    background:linear-gradient(
    180deg,
    #1a1a1a,
    #0d0d0d);
}
.footer-label{
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    color:#ffffff;
    text-align:center;
    margin-bottom:5px;
}
/********************FIN SECCION FOOTER********************/
/* =========================
   NAVBAR
========================= */
.navbar-bytewin{
    background:rgba(13,13,13,0.92);
    backdrop-filter:blur(10px);
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,0.05);
    z-index:999;
}

/* LOGO */
.navbar-logo{
    width:42px;
    height:42px;
    object-fit:contain;
}

.navbar-title{
    font-family:'Space Grotesk', sans-serif;
    font-size:1.2rem;
    font-weight:700;
    color:#ffffff;
}

/* LINKS */
.navbar-bytewin .nav-link{
    color:rgba(255,255,255,0.75);
    font-weight:500;
    transition:all 0.3s ease;
    position:relative;
}

.navbar-bytewin .nav-link:hover{
    color:#ffffff;
}

.navbar-bytewin .nav-link::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:2px;
    background:var(--primary-color);
    transition:width 0.3s ease;
}

.navbar-bytewin .nav-link:hover::after,
.navbar-bytewin .nav-link.active::after{
    width:100%;
}

.navbar-bytewin .nav-link.active{
    color:#ffffff;
}

/* MOBILE */
@media(max-width:991px){

    .navbar-collapse{
        background:#111111;
        margin-top:15px;
        padding:20px;
        border-radius:14px;
    }

    .navbar-nav{
        gap:10px;
    }

    .navbar-bytewin .nav-link::after{
        display:none;
    }
    
    .btn-up-filtros{
        display:none;
    }
}
/**********************SUBMENU*****************/
.dropdown-menu{
    background:#111111;
    border:1px solid rgba(168,85,247,0.2);
    border-radius:16px;
    padding:10px;
    backdrop-filter:blur(12px);
    margin-top:10px;
}
.dropdown-item{
    color:#ffffff;
    border-radius:10px;
    transition:0.3s ease;
}

.dropdown-item:hover{
    background:rgba(168,85,247,0.15);
    color:var(--primary-color);
}
.dropdown-menu::before{
    content:"";
    position:absolute;
    top:-10px;
    left:0;
    width:100%;
    height:10px;
}
/* SOLO DESKTOP */
@media(min-width:992px){
    .navbar .dropdown{
        position:relative;
    }

    .navbar .dropdown-menu{

        display:block;

        opacity:0;
        visibility:hidden;

        transform:translateY(5px);

        transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s;

        pointer-events:none;
        margin-top:0;
    }

    .navbar .dropdown:hover .dropdown-menu{

        opacity:1;
        visibility:visible;

        transform:translateY(0);

        pointer-events:auto;
    }

}
/**********************FIN SUBMENU******************/
/******************PRODCUTOS************************/
/*ETIQUETAS EN PRODUCTOS*/
.badge-nuevo{
    background:#2de263;
    border-radius: 5px,5px,0,0;
    color: white;
    text-align: center;
    font-size: small;
    font-weight: bold;
}

.badge-destacado{
    background:#ffc107;
    color:#000;
    border-radius: 5px,5px,0,0;
    text-align: center;
    font-size: small;
    font-weight: bold;    
}

.badge-personalizable{
    background:var(--primary-color);
    border-radius: 5px,5px,0,0;
    color: white;
    text-align: center;
    font-size: small;
    font-weight: bold;
}
/*******************FIN PRODUCTOS**********************/

/**********************SECCION TEXTIL********************/
.product-card .form-select-sm{
    font-size:0.85rem;
    text-align: center;
    width:150px;
    flex-grow:0;
}
/*****************BOTON SUBIR A FILTROS**********************/
.btn-up-filtros{
    position:fixed;
    right:20px;
    bottom:20px;
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--primary-color);
    color:#ffffff;
    text-decoration:none;
    box-shadow:
        0 4px 15px rgba(0,0,0,.30);
    z-index:1000;
    opacity:0;
    visibility:hidden;
    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease;
    transform:translateY(10px);
}

.btn-up-filtros.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.btn-up-filtros:hover{
    color:#ffffff;
    transform:
        translateY(-3px);
}
/********************FIN SECCION TEXTIL*****************/