:root {
    /* Variables de colores */
    --color-principal        : #7E8FB2;
    --color-secundario       : #0d1c3f;
    --color-texto            : #333;

    --color-success          : #4ad295;
    --color-danger           : #dc3545;
    --color-info             : #2563eb;
    --color-info-oscuro      : rgb(66, 126, 209);
    --color-muted            : #475569;
    --text-dark-50           : #7E8299;
    /* Variables de border radius */
    --border-radius-md : 5.25px;
    --border-radius-lg : .5rem;
    --border-radius-10 : 10px;
    --border-radius-estandar : 4px;

    /* Variables de sombras */
    --box-shadow-1: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
    --box-shadow-2: 0 3px 20px rgba(0,0,0,.1);
    --box-shadow-3: 0 3px 6px rgba(0,0,0,0.16);

    /* Variables de transiciones */
    --transition-1: .2s all;
    --transition-estandar: .2s all;

    /* Variables de color de border */
    --border-color-1: #EBEDF3;

    --background-1: rgba(77, 89, 149, 0.06);

    /* Variables de Scroll */
    --scrollbarBG: white;
    --thumbBG: #cccccc;
}
/* Form control */
/* --------------------------------------------------------------------- */
.ft-form-control{
    min-height: 40px;
}
.ft-form-control:focus{
    border-color: var(--color-principal);
}
span.required{
    color: var(--color-danger);
}
/*button:focus,*/
/*:focus-visible{*/
/*    outline: 0 !important;*/
/*}*/
.text-tei-primary{
    color: #0064C0;
}
.text-tei-secondary{
    color: #0D1C3F;
}
input:not(.input-bk):not([type="checkbox"]){
    height: 40px;
}
figure > img {
    /*margin-bottom: 35px;*/
    height: 350px;
    object-fit: cover;
    justify-content: center;
}
.disabled{
    opacity: .4 !important;
    pointer-events: none !important;
    user-select: none !important;
}
select:disabled{
    opacity: .6;
}
hr{
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.card-estandar{
    border-radius: var(--border-radius-10);
    border: none;
    box-shadow: none;
}
.card-estandar .card-header{
    border-bottom: 0;
    background-color: transparent;
    padding: 30px 30px 0 30px;
}
.card-estandar .card-header h4{
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 0;
    color: rgb(31, 41, 55);
}
.card-estandar .card-body{
    padding: 30px;
}
.diseno-1 .container{
    max-width: 1350px;
}
.tituloEstandar{
    font-weight: 600;
    color: var(--color-texto);
    margin-bottom: 15px;
}
.tituloEstandar-xl{
    font-size: 30px;
}
/* Height */
/* --------------------------------------------------------------------- */
.max-h-400{
    max-height: 400px;
}
.max-h-600{
    max-height: 600px;
}
/* Contenido HTML */
/* --------------------------------------------------------------------- */
.contenidoHTML ol{
    list-style: decimal;
}
.contenidoHTML ul{
    list-style: initial;
}
.contenidoHTML ul,
.contenidoHTML ol{
    padding-left: 40px;
}
.contenidoHTML,
.contenidoHTML p,
.contenidoHTML ul,
.contenidoHTML ul li,
.contenidoHTML ol li,
.contenidoHTML a,
.contenidoHTML span,
.contenidoHTML small{
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-texto);
    margin-bottom: 1rem;
}
.contenidoHTML table{
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    margin-top: 1rem;
    background-color: transparent;
    border: 1px solid #dee2e6;
    border-collapse: collapse;
}
.contenidoHTML table thead td, .contenidoHTML table thead th {
    border-bottom-width: 2px;
}
.contenidoHTML table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    border-bottom-width: 2px;
}
.contenidoHTML table td, .contenidoHTML table th {
    border: 1px solid #dee2e6;
    border-bottom-color: rgb(222, 226, 230);
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
.contenidoHTML table td, .contenidoHTML table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}
.justify-content-flex-end{
    justify-content: flex-end;
}
.ml-30{
    margin-left: 30px;
}
.rounded-3 {
    border-radius: .3rem !important;
}
.bg-dark {
    background-color: #212529 !important;
}
.bg-tei{
    background-color: #0d1c3f !important;
}
.fw-bold {
    font-weight: 700 !important;
}
.display-5 {
    font-size: 3rem;
}
.fs-3{
    font-size: 1.25rem !important;
}
.fs-4 {
    font-size: 1.5rem !important;
}
span.error{
    font-size: .75rem;
    color: darkred;
}
.border-left-1{
    border-left: 1px solid var(--border-color-1);
}
.labelCursor{
    cursor: pointer;
}
.labelEstandar{
    font-size: 1rem;
    font-weight: 400;
    color: #3F4254;
}
.etiquetaEstandar{
    font-size: .9rem;
    font-weight: 400;
    color: white;
    padding: 4px 6px;
    background-color: var(--color-info);
    color: white;
    display: inline-flex;
    border-radius: var(--border-radius-md);
}
.etiquetaGET{
    background-color: #007bff;
}
.etiquetaPOST{
    background-color: #e83e8c;
}
.etiquetaPUT{
    background-color: #9a3ee8;
}
.inputEstandar{
    background-color: white;
    border: none;
    transition: var(--transition-1);
    border-radius: var(--border-radius-md);
    padding: 10px 15px;
    background-color: #F3F6F9;
}
.inputEstandar:focus{
    background-color: #F3F6F9;
}
.bg-secondary{
    background-color: #999999 !important;
    color: white !important;
}
.bg-tei-secondary{
    background-color: var(--color-secundario);
    color: white !important;
}
.font-size-xs,
.font-xs{
    font-size: .75rem;
}
.text-uppercase-first-letter{
    text-transform: lowercase;
}
.text-uppercase-first-letter::first-letter{
    text-transform: uppercase;
}
.text-muted{
    color: #B5B5C3 !important;
}
.text-dark-50{
    color: #7E8299 !important;
}
button{
    cursor: pointer;
}
button:disabled,
button.disabled{
    pointer-events: none;
    opacity: .4;
}
img{
    user-select: none;
}
a{
    outline: 0;
}
a:hover{
    transition: var(--transition-1);
    color: inherit;
    text-decoration: none;
}
a:focus{
    color: inherit;
}
a.disabled,
a.disabled:hover{
    pointer-events: none;
    opacity: .4;
}

.form-control:focus,
input:focus{
    outline: 0;
    border-color: var(--color-principal);
}
.border-radius-estandar{
    border-radius: var(--border-radius-estandar);
}
.notiflix-block-position{
    min-height: auto !important;
    pointer-events: none !important;
}
.modal .btn-primary{
    background-color: var(--color-principal);
    border-color: var(--color-principal);
}
.boton-transparente{
    background: transparent;
    border: none;
}
.container-1400{
    max-width: 1400px;
}
.boton-1{
    padding: 7.5px 20px;
    background-color: var(--color-secundario);
    color: white;
    display: inline-block;
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-2);
    transition: var(--transition-1);
    border: none;
    cursor: pointer;
}
.boton-1:focus{
    color: white;
}
.boton-1:hover{
    color: white;
    box-shadow: none;
    opacity: .8;
}
.boton-1-xs{
    font-size: .75rem;
    padding: 5px;
}
.boton-1-lg{
    font-size: 1.10rem;
    padding: 7.5px;
}
.boton-1.boton-1-success{
    background-color: #1bc5bd;
    color: white;
}
.boton-1-transparente{
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: var(--color-texto);
}
.boton-1-transparente:hover{
    background-color: var(--background-1);
    color: var(--color-texto);
}
.boton-1-transparente:focus,
.boton-1-transparente:active,
.boton-1-transparente:visited,
.boton-1-transparente:focus:active{
    box-shadow: none;
    color: var(--color-texto);
}
.boton-1.boton-1-secondary{
    background-color: var(--background-1);
    color: var(--color-texto);
    box-shadow: none;
}
.boton-1.boton-1-inverso{
    box-shadow: none;
    background-color: #e1f0ff;
    color: var(--color-info)
}
.boton-1.boton-1-inverso:hover{
    background-color: var(--color-info);
    color: white;
}
.boton-carrito{
    padding: 5px 10px;
    height: 30px;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-2);
    transition: var(--transition-1);
    border: none;
    cursor: pointer;
    background-color: var(--color-secundario);
    color: white;
    font-size: 16px;
}
.boton-carrito:hover{
    opacity: .8;
    box-shadow: none;
}
.boton-carrito i{
    font-size: 24px;
}
.boton-carrito + .boton-carrito{
    margin-left: 5px;
}
.pointer-event-none{
    pointer-events: none;
}
.color-texto{
    color: var(--color-texto);
}
.brd-color-texto{
    border-color: var(--color-texto);
}
.bg-color-texto{
    background-color: var(--color-texto);
}
.color-danger{
    color: var(--color-danger) !important;
}
.color-success{
    color: var(--color-success) !important;
}
.color-white{
    color: white !important;
}
.form-check{
    height: 1rem;
    width: 1rem;
    display: inline-flex;
    margin-right: 5px;

}
.form-check:checked{
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.form-check:checked:focus {
    border-color: transparent;
    background-color: currentColor;
}
.placeholderIcono{
    text-align: center;
}
.placeholderIcono .icono{
    margin-bottom: 15px;
}
.placeholderIcono .icono i{
    font-size: 20px;
    width: 60px;
    height: 60px;
    background: #eff6ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    color: var(--color-info);
}
.placeholderIcono .titulo{
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 5px;
}
.placeholderIcono .descripcion{
    font-size: 16px;
    color: var(--text-dark-50);
    margin-bottom: 0;
}
.swal2-container .swal2-styled.swal2-confirm{
    background-color: var(--color-info);
    box-shadow: none;
}
.swal2-container .swal2-styled.swal2-confirm:focus{
    box-shadow: none;
}
.alertaEstandar{
    background-color: #E1F0FF;
    border-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    font-size: 14px;
    color: var(--color-info);
    border-radius: var(--border-radius-md);
    text-align: left;
}
.alertaEstandar .alerta-icono i{
    font-size: 40px;
    margin-right: 10px;
}
.alertaEstandar ul{
    padding-left: 25px;
    margin-bottom: 0;
}
.alertaEstandar.alerta-danger{
    background-color: var(--color-danger);
    color: white;
}
.alert{
    padding: 12px 16px;
    border-radius: var(--border-radius-estandar);
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06) !important;
    border: none;
    border-top: 4px solid transparent;
    display: none;
    font-weight: 300;
}
.alert.alert-info{
    border-top-color: #4299e1;
    color: #2b6cb0;
}
.alert.alert-danger{
    border-top-color: #f56565;
    background-color: #fff5f5;
}
.alert.alert-success{
    border-top-color: #38b2ac !important;
    background-color: #e6fffa !important;
}
.alert ul{
    padding-left: 25px;
}
body > main > footer{
    background: var(--color-secundario) !important;
    transition: .2s all;
}
section:not(.sinPadding){
    padding: 50px 0;
}
.color-principal{
    color: var(--color-principal) !important;
}
.color-secundario{
    color: var(--color-secundario) !important;
}
.bg-principal{
    background: var(--color-principal) !important;
}
.bg-secundario{
    background: var(--color-secundario) !important;
}
.brd-principal{
    border-color: var(--color-principal) !important;
}
.brd-secundario{
    border-color: var(--color-secundario) !important;
}
.u-btn-outline-primary:hover{
    background: var(--color-principal) !important;
    color: white !important;
}
.u-btn-outline-primary{
    background: white !important;
}
.g-width-max-100{
    max-width: 100%;
}
.g-width-500{
    width: 500px;
}
.g-bg-primary,
.u-btn-primary,
.u-go-to-v2:hover, .u-go-to-v2:focus:hover,
.g-bg-primary--hover:hover{
    background: var(--color-principal) !important;
}
.g-color-primary,
.g-color-primary--hover:hover,
.u-block-hover:hover .g-color-primary--hover,
.u-btn-outline-primary,
.g-color-primary--hover:hover{
    color: var(--color-principal) !important;
}
.g-brd-primary,
.u-btn-primary:hover,
.u-btn-outline-primary,
.u-btn-primary.active,
.g-brd-primary--hover:hover{
    border-color: var(--color-principal) !important;
}
body{
    overflow-x: hidden;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
}
hr{
    width: 100%;
}
.lazyLoad{
    opacity: 0;
    filter: blur(10px);
    transition: 1s all;
}
.lazyLoad.visible{
    opacity: 1;
    filter: blur(0);
}
.overflowHidden{
    overflow: hidden;
}
.max-width-1320{
    max-width: 1320px;
}
.animate__delay-0_75s{
    animation-delay: .75s;
}
.py-40{
    padding-top: 40px;
    padding-bottom: 40px;
}
.p-20 {
    padding: 20px !important;
}
.height-150{
    height: 150px;
}
.height-400{
    height: 400px !important;
}
.w-100{
    width: 100% !important;
}
.bg-black-333 {
    background-color: #333333 !important;
}
.z-index-10{
    z-index: 10;
}
.color-white{
    color: white;
}
.text-black-777 {
    color: #777777 !important;
}
.enlaceDimension{
    font-weight: bold;
    color: white !important;
    text-decoration: none !important;
}
.enlaceDimension:hover{
    color: white !important;
    text-decoration: none !important;
}
.articulosHeader article{
    height: 200px;
    padding: 0 !important;
    border-radius: .25rem;
}
.centrado{
    display: flex;
    align-items: center;
}
.imgRounded{
    border-radius: .25rem;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.07),0 3px 1px -2px rgba(0,0,0,0.07),0 1px 5px 0 rgba(0,0,0,0.1);
}
.efectoSombreado::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top,rgba(44,51,60,1) 0,rgba(44,51,60,0) 35%) !important;
    transition: .2s all;
}
img.u-block-hover__main--mover-down{
    transform: translate3d(0, 0, 0) scale3d(1.1, 1.1, 1.1);
}
.object-fit-cover{
    object-fit: cover;
}
.plantilla{
    display: none;
    opacity: 0;
    visibility: hidden;
}
main > header + .container{
    margin-top: 160px;
}
.listaIconos li + li{
    margin-top: 10px;
}
.listaIconos .icono{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    color: white;
    font-size: 18px;
    margin-right: 10px;
    background-color: var(--color-success);
}
.listaIconos .icono.icono-danger{
    background-color: var(--color-danger);
}
.listaIconos .informacion .titulo{
    font-size: 18px;
    margin-bottom: 0;
}
.listaIconos .informacion .texto{
    color: var(--color-texto);
    margin-bottom: 0;
    opacity: .8;
    text-transform: uppercase;
}
/* Header */
.u-header [aria-labelledby]{
    opacity: 1;
}
#navBar{
    visibility: inherit;
}
#navbarTop a{
    color: rgba(255,255,255,.8);
    padding: 5px;
}

#navbarTop #languages-dropdown-2,
#navbarTop #account-dropdown-2{
    border-radius: 0 0 0.25rem 0.25rem;
    box-shadow: var(--box-shadow-1);
    width: 100px;
}
#js-header .tituloEstandar{
    font-size: 20px;
    text-transform: lowercase;
    display: block;
}
#js-header .tituloEstandar::first-letter{
    text-transform: Uppercase;
}
#js-header .navbar-brand img{
    max-width: 150px;
    max-height: 60px;
    object-fit: contain;
}
#js-header #navBar ul li > button.nav-link,
#js-header #navBar ul li > a.nav-link{
    display: flex;
    align-items: center;
    justify-content: center;
}
#js-header button.nav-link > i,
#js-header a.nav-link > i{
    transition: .15s all !important;
    color: var(--color-texto);
}
#js-header .navbar-toggler[aria-expanded="true"] .icon-open,
#js-header .navbar-toggler[aria-expanded="false"] .icon-close{
    display: none;
}
#js-header .headerTop.active{
    margin-top: -40px;
}
.bannerMenu::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.4);
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}
.bannerMenu > *{
    position: relative;
    z-index: 10;
}
.bannerMenu > a{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.precioBannerMenu{
    background: white;
    padding: 5px 15px;
    color: var(--color-texto);
    border-radius: .25rem;
    font-size: 18px;
    display: inline-block;
}
#js-header .mega-menu > button > i,
#js-header .hs-has-mega-menu > a > i{
    font-size: 12px;
    margin-left: 5px;
}
#js-header .hs-mega-menu ul li a{
    font-size: 14px;
    color: var(--color-texto);
}
#js-header .hs-mega-menu ul li{
    margin-top: 10px;
}
#js-header .hs-mega-menu .productoPrecio > span > div{
    flex-direction: column;
    align-items: flex-start;
}
#js-header .hs-mega-menu .productoPrecio > span > div > div:last-child{
    margin-top: 5px;
}
#js-header .headerNav{
    transition: var(--transition-1);
    background-color: white;
}
#js-header .headerNav #navBar > ul > li{
    padding: 10px 0;
}
#js-header .headerNav #navBar > ul > li > button.nav-link,
#js-header .headerNav #navBar > ul > li > a.nav-link{
    font-size: 16px;
}
#js-header .headerNav #navBar > ul > li + li{
    margin-left: 15px;
}
#js-header .headerNav #navBar > .acciones > li + li{
    margin-left: 5px;
}
#js-header .headerNav #navBar > .acciones > li{
    display: flex;
    align-items: center;
}
#js-header .headerNav #navBar > .acciones > li > a.nav-link{
    font-size: 30px;
}
#js-header .headerNav #navBar > .acciones > li > #usuario{
    font-size: 28px;
}
#js-header .headerNav #navBar > .acciones > li > #buscadorNavbar{
    font-size: 26px;
}
#js-header .productoVertical figure,
#js-header .productoVertical img{
    max-height: 250px;
}
#js-header .navbar-toggler{
    position: absolute;
    right: 0;
    top: 20px;
    padding: 0;
    right: 10px;
}
#js-header .navbar-toggler .hamburger{
    transform: scale(.6);
}
#js-header .headerTop{
    background-color: #eef1f8;
    padding: 10px;
    transition: var(--transition-1);
}
#js-header .headerTopActivo{
    margin-top: 5px;
}
#js-header .headerTop #navbarTop > .row > div{
    align-self: center;
}
#js-header .headerTop .listaRedesSociales{
    margin-bottom: 0;
}
#js-header .headerTop #navbarTop .listaRedesSociales li > a{
    font-size: 18px;
    color: var(--color-texto);
}
#js-header .headerTop #navbarTop .textoCambianteNavBar{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25px;
    text-align: center;
    white-space: nowrap;
}
#js-header .headerTop #navbarTop .textoCambianteNavBar > ul{
    visibility: hidden;
    opacity: 0;
}
#js-header .headerTop #navbarTop .textoCambianteNavBar > span{
    height: 100%;
    margin-top: 5px;
}
#js-header .headerTop #navbarTop .textoCambianteNavBar > span{
    color: var(--color-info-oscuro);
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
}
#js-header .headerTop #navbarTop .enlaces{
    margin-bottom: 0;
    text-align: right;
}
#js-header .headerTop #navbarTop .enlaces li,
#js-header .headerTop #navbarTop .enlaces li a{
    color: var(--color-texto);
}
#js-header .headerTop #navbarTop p{
    font-size: 15px;
    text-align: right;
    color: var(--color-texto);
}
#js-header .headerTop #navbarTop a.enlaceTelefono{
    color: var(--color-texto);
    border-bottom: 1px dotted var(--color-texto);
    padding: 0;
    margin-left: 5px;
}
body[data-carrito-permitido="false"] #js-header #iconoCarro{
    opacity: .4;
    pointer-events: none;
}
#js-header #iconoCarro{
    position: relative;
}
#js-header #iconoCarro > span{
    border-radius: 20px;
    width: 18px;
    height: 18px;
    background-color: var(--color-secundario);
    position: absolute;
    top: 2px;
    right: 0;
    font-size: 9px;
    font-weight: 400;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 1px;
}
#js-header #iconoCarro > span.desactivado{
    display: none;
}
#js-header #languague-header{
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    width: 100px;
}
#js-header .icono-languague{
    font-size: 24px;
    color: var(--color-texto);
}
#js-header #languague-header + .selectize-control{
    max-width: 200px;
    width: auto;
    display: flex;
}
#js-header #languague-header{
    text-indent: -2px;
}
#js-header #languague-header{
    color: #343a40;
}
#js-header #languague-header,
#js-header #languague-header + .selectize-control .selectize-input{
    background-color: transparent;
    border: none;
    border-radius: var(--border-radius-md);
    padding: 3px;
    box-shadow: none !important;
    font-size: 14px;
    display: flex;
    align-items: center;
    overflow: visible;
    min-height: auto;
    width: auto;
    min-width: 80px;
    cursor: pointer;
}
#js-header #languague-header + .selectize-control .selectize-dropdown{
    width: auto !important;
    min-width: 100px;
}
#js-header #languague-header + .selectize-control .selectize-dropdown .selectize-dropdown-content{
    padding: 0 !important;
}
#js-header #languague-header + .selectize-control .selectize-dropdown .option{
    font-size: 14px;
    padding: 7px 10px;
    width: auto;
}
#js-header #languague-header + .selectize-control .selectize-input input{
    display: none !important;
}
#js-header #languague-header + .selectize-control .selectize-input::after{
    content: none;
}

#js-header .productoVerticalHeader img{
    max-width: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    height: 325px;
}
#js-header .productoVerticalHeader .productoNombre{
    font-size: 18px;
    display: block;
    color: var(--color-texto);
    margin-top: 15px;
}
#js-header .productoVerticalHeader .productoPrecio{
    text-align: left;
    font-size: 16px;
    color: var(--color-texto);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
#js-header .productoVerticalHeader .productoPrecio > div > div:first-child{
    margin-right: 10px;
}
#js-header .productoHorizontalHeader{
    display: flex;
    margin-bottom: 20px;
}
#js-header .productoVerticalHeader .productoImagen,
#js-header .productoHorizontalHeader .productoImagen{
    display: block;
    background-color: #f7f7f7;
    overflow: hidden;
    border-radius: var(--border-radius-10);
}
#js-header .productoHorizontalHeader .productoImagen{
    margin-right: 10px;
    min-width: 100px;
    width: 100px;
    max-width: 100px;
}

#js-header .productoHorizontalHeader img{
    width: 100%;
    height: 100px;
    object-fit: contain;
    mix-blend-mode: multiply;
}
#js-header .productoHorizontalHeader .informacion{
    width: 100%;
    display: flex;
    flex-direction: column;
}
#js-header .productoHorizontalHeader .productoNombre{
    font-size: 14px;
    display: block;
    color: var(--color-texto);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
#js-header .productoHorizontalHeader .productoPrecio{
    text-align: left;
    font-size: 16px;
    color: var(--color-texto);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
#js-header .productoHorizontalHeader .productoPrecio > span > div{
    flex-direction: column;
    align-items: flex-start;
}
#js-header .productoHorizontalHeader .productoPrecio > span > div > div:first-child{
    margin-bottom: 10px;
}
#js-header .productoVerticalHeader button,
#js-header .productoHorizontalHeader button{
    padding: 5px 10px;
    height: 30px;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-2);
    transition: var(--transition-1);
    border: none;
    cursor: pointer;
    background-color: var(--color-secundario);
    color: white;
    font-size: 16px;
}
#js-header .productoVerticalHeader button i,
#js-header .productoHorizontalHeader button i{
    font-size: 24px;
}
#js-header .mega-menu-content{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}
#js-header .mega-menu-pages{
    padding: 1rem;
    position: absolute;
    top: 100%;
    left: calc(-50% - 15px);
    width: 225px;
}
#js-header #js-header-mobile{
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    transition: .4s all;
}
#js-header #js-header-mobile.active{
    left: 0;
}
#js-header #js-header-mobile .mega-menu-button.active{
    background-color: #E2E8F0;
    border-radius: var(--border-radius-md);
}
#js-header #js-header-mobile .article-banner .productoImagen,
#js-header #js-header-mobile .article figure,
#js-header #js-header-mobile .article .productoImagen{
    margin-bottom: 10px;
    display: block;
    background-color: #f7f7f7;
    border-radius: var(--border-radius-md);
    max-height: inherit;
}
#js-header #js-header-mobile .article img.productoImagen,
#js-header #js-header-mobile .article .productoImagen img{
    height: 100px;
    width: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    max-height: inherit;
}
#js-header #js-header-mobile .article .productoNombre{
    font-size: 1rem;
    line-height: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    margin-bottom: 0;
    color: #000;
}
#js-header #js-header-mobile .article .productoDescripcion{
    margin-bottom: 0;
}
#js-header #js-header-mobile .article-banner .productoPrecio > div,
#js-header #js-header-mobile .article .productoPrecio > div{
    flex-direction: column;
    align-items: flex-start;
    font-size: 1rem;
    line-height: 1.5rem;
}
#js-header #js-header-mobile .article-banner .productoPrecio > div > div:first-child,
#js-header #js-header-mobile .article .productoPrecio > div > div:first-child{
    margin-bottom: 10px;
}
#js-header #js-header-mobile .article-banner .productoImagen img{
    height: 300px;
    width: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}
#js-header #js-header-mobile .article-banner .productoNombre{
    font-size: 1.25rem;
    line-height: 1.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#js-header #js-header-mobile .article-banner .productoPrecio > div > div:first-child{
    font-size: 1.15rem;
}
/* Inicio - Categorías*/
#inicioCategorias .cubo{
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.07),0 3px 1px -2px rgba(0,0,0,0.07),0 1px 5px 0 rgba(0,0,0,0.1);
    height: 100%;
    display: block;
}
#inicioCategorias .cubo img{
    object-fit: cover;
    height: 100%;
}
#inicioCategorias .cubo_1 .titulo{
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 10;
}
#inicioCategorias .cubo_4 .titulo,
#inicioCategorias .cubo_3 .titulo,
#inicioCategorias .cubo_2 .titulo{
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
}
#inicioCategorias .cubo_1 .titulo h2{
    font-size: 44px;
    line-height: 55px;
    font-weight: 300;
    color: white;
    margin-bottom: 0;
}
#inicioCategorias .cubo_4 .titulo h2,
#inicioCategorias .cubo_3 .titulo h2,
#inicioCategorias .cubo_2 .titulo h2{
    font-size: 28px;
    line-height: 55px;
    font-weight: 300;
    color: white;
    margin-bottom: 0;
    pointer-events: none;
    letter-spacing: 1.5px;
}
#inicioCategorias .cubo_4 img{
    max-height: 200px;
}
#inicioCategorias article a.u-link-v2{
    z-index: 20;
    opacity: 0;
}
#inicioCategorias .efectoSombra::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(44,51,60,.8) 0, rgba(13, 28, 63, .1) 35%) !important;
    transition: .2s all;
}
/* Inicio - productos*/
#inicioProductos .nuevoBadged{
    display: inline-flex;
    width: auto;
    border-radius: .25rem;
    padding: 7.5px;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    height: auto;
    top: 0.71429rem;
    right: -0.71429rem;
    position: absolute;
    color: white;
    font-size: .9rem;
    background-color: var(--color-principal);
}
#inicioProductos figcaption{
    width: 100%;
    background-color: var(--color-principal);
    padding: 5px 0;
    text-align: center;
    position: absolute;
    bottom: 0;
}
#inicioProductos .slick-slide{
    margin: 0 27px;
}

/* Inicio - Banner Grande*/
#inicioBannerGrande{
    background-color: #eef1f8;
    position: relative;
}

#inicioBannerGrande > .container > .row{
    align-items: center;
    justify-content: space-between;
}
#inicioBannerGrande .importeBadged{
    height: 85px;
    width: 85px;
    color: white;
    left: 0;
    top: 0;
    position: absolute;
    font-weight: 300;
    font-size: 22px;
    border: 3px solid white;
    background-color: var(--color-principal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: .2s all;
}
#inicioBannerGrande img{
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}
/* Grid de Productos */
.productoGridSmall{
    max-height: 100px;
    min-width: 100px;
    object-fit: contain;
}
/* Inicio - Banner Medianos*/
#inicioBannerMedianos h2{
    max-width: 500px;
}
#inicioBannerMedianos .overlay{
    position: relative;
}
#inicioBannerMedianos .overlay::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.4);
    z-index: 9;
}
#inicioBannerMedianos .botonBannerCategoria{
    background: white;
    padding: 10px 30px;
    color: var(--color-texto);
    border-radius: .25rem;
    font-size: 16px;
    position: absolute;
    right: 40px;
    bottom: 40px;
}
#inicioBannerMedianos .precioBannerMediano{
    height: 85px;
    width: 85px;
    color: var(--color-texto);
    right: 40px;
    top: 40px;
    position: absolute;
    font-weight: 300;
    font-size: 22px;
    border: 3px solid #c2c2c2;
    background-color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: .2s all;
}
/* Footer */
#footer{
    padding: 50px 0 28px 0;
    background-color: var(--color-principal);
}
#footer .logoFooter{
    max-height: 130px;
    margin: auto;
    display: block;
}
#footer h5,
#footer p,
#footer a{
    color: #cacfd5;
}
#footer h5{
    font-weight: 600;
    margin-bottom: 15px;
}
#footer p{
    font-size: 16px;
    margin-bottom: 0;
}
#footer ul + ul{
    margin-left: 10px;
}
#footer ul li a{
    font-size: 16px;
}
#footer ul li + li{
    margin-top: 15px;
}
#footer .redesSociales li{
    display: inline-flex;
    margin-top: 0;
}
#footer .redesSociales li + li{
    margin-left: 20px;
}
#footer .redesSociales li a{
    font-size: 20px;
    color: var(--text-dark-50);
    transition: var(--transition-1);
}
#footer .redesSociales li a:hover{
    color: white;
}
#footer #newsletter{
    padding: 15px 0;
}
#footer #newsletter h6{
    font-size: 14px;
    text-transform: uppercase;
    color: var(--text-dark-50);
}
#footer #newsletter form button{
    padding: 10px 15px;
    font-size: 14px;
    margin-left: 5px;
}
#footer hr{
    border-color: rgba(255,255,255,.1);
}
#footer address{
    margin: 30px 0;
}
#footer address p{
    font-size: 14px;
}
#footer address i{
    background: rgba(255,255,255,.1);
    border-radius: 50%;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    color: var(--text-dark-50);
}
#footer #languague-footer + .selectize-control{
    max-width: 200px;
}
#footer #languague-footer + .selectize-control .selectize-input{
    background-color: rgba(255, 255, 255, .1);
    border: none;
    color: #cacfd5;
    border-radius: var(--border-radius-md);
    padding: 7px 10px;
}
#footer #languague-footer + .selectize-control .selectize-input::after{
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    border: none;
    top: 8px;
    right: 20px;
    margin-top: 0;
    font-size: 12px;
}
.listaContactoFooter a{
    color: #bbb;
}
/* Políticas */
.politicasBreadcrumb{
    border-bottom: 1px solid rgba(0,0,0,.05);
}
.politicaContenido h1,
.politicaContenido h2,
.politicaContenido h3,
.politicaContenido h4,
.politicaContenido h5,
.politicaContenido h6{
    color: rgba(0,0,0,1);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
}
.politicaContenido p,
.politicaContenido span,
.politicaContenido li{
    color: var(--color-texto);
}
/*Buscador del navbar*/
#buscadorNavbar{
    transition: var(--transition-1);
}
/* Carrito de la compra */
#carritoCaja{
    cursor: pointer;
}
#carritoCaja #carrito{
    width: 270px;
    left: calc(50% - 135px);
    opacity: 0;
    visibility: hidden;
    border-radius: .25rem;
    transform: scale(.90);
    transition: .3s all;
}
#carritoCaja:hover #carrito{
    opacity: 1;
    transform: scale(1);
    visibility: visible;
}
#carritoCaja #carrito .titulo{
    color: var(--color-texto);
}
#carritoFlotante{
    position: absolute;
    z-index: 9999999;
}
#carritoFlotante::before {
    content: '';
    position: fixed;
    z-index: 1;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s, visibility .4s;
}
#carritoFlotante.carritoActivo::before {
    opacity: 1;
    visibility: visible;
}
#carritoFlotante > div{
    position: fixed;
    bottom: 50px;
    right: -100px;
    width: 75px;
    height: 75px;
    z-index: 1;
}
#carritoFlotante .carritoIcono{
    position: relative;
    top: 0;
    right: 0;
    width: 75px;
    height: 75px;
    display: block;
    border-radius: .25rem;
    box-shadow: 0 4px 30px rgba(0,0,0,0.17);
    z-index: 3;
    background: white;
}
#carritoFlotante.carritoActivo .carritoIcono{
    box-shadow: none;
    border-radius: 0;
}
#carritoFlotante .carritoIcono::before,
#carritoFlotante .carritoIcono::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    height: 100%;
    width: 100%;
    background: url('/img/efectos/cd-icons-cart-close.svg') no-repeat 0 0;
    transition: opacity .2s, transform .2s;
}
#carritoFlotante.carritoActivo .carritoIcono::before {
    opacity: 0;
}
#carritoFlotante .carritoIcono::after {
    background-position: -72px 0;
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) rotate(90deg);
}
#carritoFlotante.carritoActivo .carritoIcono::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%);
}
#carritoFlotante .carritoIcono .numeroProductos{
    position: absolute;
    top: -10px;
    right: -10px;
    height: 28px;
    width: 28px;
    background: #e94a35;
    color: white;
    font-size: 15px;
    font-weight: bold;
    border-radius: 50%;
    text-indent: 0;
    transition: .4s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#carritoFlotante.carritoActivo .carritoIcono .numeroProductos{
    transform: scale(0);
    opacity: 0;
}
#carritoFlotante .carritoCuerpo{
    z-index: 2;
    pointer-events: none;
    position: fixed;
    bottom: 50px;
    right: 50px;
    width: 0;
    height: 0;
    transition: height .4s, width .4s, box-shadow .4s;
    transition-timing-function: cubic-bezier(0.67, 0.17, 0.32, 0.95);
    backface-visibility: hidden;
    background: white;
    border-radius: .25rem;
    overflow: hidden;
}
#carritoFlotante.carritoActivo .carritoCuerpo{
    pointer-events: initial;
    width: 440px;
    height: 400px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.17);
}
#carritoFlotante .carritoCuerpo header{
    position: absolute;
    top: 0;
    left: 0;
    height: 76px;
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;
    border-bottom: 1px solid #dedede;
    color: var(--color-texto);
}
#carritoFlotante .carritoCuerpo header h3{
    font-size: 22px;
    margin-bottom: 0;
}
#carritoFlotante .carritoCuerpo .contenido{
    position: absolute;
    top: 75px;
    height: 250px;
    width: 100%;
    padding: 20px;
}
#carritoFlotante .carritoCuerpo footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    border-radius: 0 0 0.25rem 0.25rem;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.15);
    background: #2b96de;
    height: 75px;
    font-size: 24px;
    color: white;
    transition: .2s all;
}
#carritoFlotante .carritoCuerpo footer > a{
    color: white;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#carritoFlotante .carritoCuerpo header h3,
#carritoFlotante .carritoCuerpo footer > a,
#carritoFlotante .carritoCuerpo .contenido{
    opacity: 0;
    transform: translateX(40px);
}
#carritoFlotante.carritoActivo .carritoCuerpo header h3,
#carritoFlotante.carritoActivo .carritoCuerpo footer > a,
#carritoFlotante.carritoActivo .carritoCuerpo .contenido{
    opacity: 1;
    transition: .4s;
    transition-delay: .4s;
    transform: translateX(0);
}
#carritoFlotante .carritoCuerpo footer:hover{
    opacity: .8;
}

#carritoFlotante .carritoCuerpo .contenido ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
#carritoFlotante .carritoCuerpo .contenido ul li{
    display: flex;
    align-items: center;
}
#carritoFlotante .carritoCuerpo .contenido ul li .imagen{
    margin-right: 10px;
}
#carritoFlotante .carritoCuerpo .contenido ul li .imagen img{
    width: 75px;
    height: 75px;
}
#carritoFlotante .carritoCuerpo .contenido ul li .informacion{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#carritoFlotante .carritoCuerpo .contenido ul li .informacion p,
#carritoFlotante .carritoCuerpo .contenido ul li .informacion span{
    display: inline-block;
    color: var(--color-texto);
}
#carritoFlotante .carritoCuerpo .contenido ul li .titulo{
    margin-bottom: 0;
    font-size: 16px;
}
#carritoFlotante .carritoCuerpo .contenido ul li .titulo .botones{
    font-size: 12px;
    margin-top: 10px;
}
#carritoFlotante .carritoCuerpo .contenido ul li .precio{
    font-size: 20px;
    font-weight: bold;
}
/*Buscador*/
#buscadorPanel{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: .3s all;
}
#buscadorPanel.activo{
    pointer-events: initial;
    opacity: 1;
}
#buscadorPanel > form{
    width: 100%;
}
#buscadorPanel form > div {
    width: 80%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
#buscadorPanel form > div input{
    width: 100%;
    margin: auto;
    display: block;
    padding: 15px;
    font-size: 30px;
    border-radius: .25rem;
    border: none;
    color: var(--color-texto);
    transition: .5s all;
    opacity: 0;
    transform: scale(.80);
    height: auto;
}
#buscadorPanel form > div input:focus{
    border: none;
}

#buscadorPanel form > div .buscar{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    font-size: 30px;
    color: var(--color-texto);
    transform: scale(.80);
    transition: .5s all;
    opacity: 0;
    cursor: pointer;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}
#buscadorPanel.activo form > div .buscar:hover{
    background: rgba(0,0,0,.1);
}
#buscadorPanel.activo form > div input,
#buscadorPanel.activo form > div .buscar{
    opacity: 1;
    transform: scale(1);
}
/*Mapa*/
#mapa iframe{
    width: 100%;
}
/*Contacto*/
#contacto form input,
#contacto form textarea{
    border-color: #ccc;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#contacto .form-group .input-group-append span{
    border-left: 0;
    border-radius: 0 .25rem .25rem 0;
}
#contacto .form-group input:focus,
#contacto .form-group textarea:focus{
    border-color: var(--color-principal);
}
#contacto .form-group input:hover + .input-group-append span,
#contacto .form-group input:focus + .input-group-append span,
#contacto .form-group textarea:hover + .input-group-append span,
#contacto .form-group textarea:focus + .input-group-append span{
    border-color: var(--color-principal);
}
#contacto .form-checkbox{
    display: flex;
    align-items: center;
}
#contacto .form-checkbox span{
    font-size: 13px;
    letter-spacing: 1px;
    color: #333;
    margin-bottom: 10px;
    cursor: pointer;
}
#contacto .form-checkbox input {
    display: none;
}
#contacto .form-checkbox .checkbox {
    margin-right: 10px;
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    border: 1px solid var(--color-principal);
    border-radius: .25rem;
    transition: .2s all;
}
#contacto .form-checkbox input:checked + .checkbox {
    background: var(--color-principal);
}
@media only screen and (max-width: 992px) and (min-height: 800px){
    .tituloSlider{
        font-size: 55px !important;
    }
    #navbarTop .col-sm-auto{
        text-align: center;
    }
}
@media only screen and (max-width: 572px){
    #navbarTop .col-sm-auto{
        text-align: center;
    }
    #footer h5{
        font-size: 20px;
    }
    #buscadorPanel form > div input{
        width: 90%;
    }
    .u-go-to-v2{
        display: none !important;
    }
}
/*Producto*/

.productoGrid > div > figure{
    position: relative;
    margin-bottom: 20px;
}
.productoGrid > div > figure > img{
    max-width: 100%;
    height: auto;
}
.productoGrid > div  > figure > figcaption{
    width: 100%;
    background: var(--color-principal);
    text-align: center;
    position: absolute;
    bottom: 0;
    padding: 5px 0;
    transition: var(--transition-1);
}
.productoGrid > div  > figure > figcaption.agotado{
    background: #e64b3b;
}
.productoGrid > div  > figure > figcaption:hover{
    background: #333;
}
.productoGrid > div  > figure > figcaption a{
    color: white;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.productoGrid > div  > figure > figcaption a:hover{
    text-decoration: none;
}
.productoGrid > div > figure .u-ribbon-v1{
    background: var(--color-principal);
    padding: 10px 2px;
    height: 40px;
    width: 40px;
    color: white;
    right: -10px;
    top: 10px;
    font-size: 13px;
    border-radius: 50%;
    text-transform: uppercase;
    text-align: center;
}
.productoGrid > div  > div > .productoInformacion{
    display: flex;
    flex-direction: column;
}
.productoGrid > div  > div > .productoInformacion h4 > a{
    text-decoration: none;
    transition: var(--transition-1);
    color: var(--color-texto);
}

.productoGrid > div > div > .productoInformacion > a{
    display: inline-block;
    color: #999;
    font-size: 13px;
}
.productoGrid > div  > div > .productoInformacion > span{
    display: block;
    color: var(--color-texto);
    font-size: 17px;
}
.productoGrid > div  > div > .productoBotones{
    text-align: right;
    flex: 1;
    padding-left: 0;
    list-style: none;
}
.productoGrid > div  > div > .productoBotones li{
    margin: 0;
    vertical-align: middle;
    display: inline-block;
}
.productoGrid > div  > div > .productoBotones li > a{
    color: #999;
    font-size: 15px;
    border-radius: 50%;
}
.productoGrid > div  > div > .productoBotones li > a:hover{
    color: var(--color-principal);
}
.productoLista{
    border-bottom: 1px solid #eee;
}
.productoLista figure{
    position: relative;
}
.productoLista figure > img{
    max-width: 100%;
    height: auto;
}
.productoLista figure > figcaption{
    padding: 5px 0;
    transition: var(--transition-1);
    position: absolute;
    bottom: 0;
    background: var(--color-principal);
    text-align: center;
    width: 100%;
}
.productoLista figure > figcaption:hover{
    background: #333;
}
.productoLista figure > figcaption > a{
    color: white;
    letter-spacing: 1px;
    font-size: 11px;
    text-transform: uppercase;
}
.productoLista figure > figcaption > a:hover{
    text-decoration: none;
}
.productoLista .productoInformacion{
    margin-bottom: 30px;
}
.productoLista .productoInformacion > h4{
    color: var(--color-texto);
    margin-bottom: 0;
    margin-top: 3.5px;
}
.productoLista .productoInformacion > h4 > a{
    color: var(--color-texto);
    transition: var(--transition-1);
}
.productoLista .productoInformacion > h4 > a:hover{
    color: var(--color-principal);
}
.productoLista .productoInformacion > a{
    color: #999;
    font-size: 13px;
    margin-bottom: 7px;
    display: inline-block;
}
.productoLista .productoInformacion > span{
    color: var(--color-texto);
    font-size: 20px;
    margin-bottom: 21px;
    display: block;
}
.productoLista .productoInformacion > p{
    color: var(--color-texto);
}
.productoLista .productoBotones{
    margin-bottom: 30px;
    padding-left: 0;
    list-style: none;
}
.productoLista .productoBotones li{
    vertical-align: middle;
    display: inline-block;
}
/*.productoLista .productoBotones li:first-of-type{*/
/*    padding-right: 20px;*/
/*    margin-right: 20px;*/
/*    border-right: 1px solid #eee;*/
/*}*/
.productoLista .productoBotones li > a{
    color: #999;
    display: inline-block;
    border-radius: 50%;
}
.productoLista .productoBotones li > a:hover{
    color: var(--color-principal);
}
.productoLista .productoBotones li > a > i{
    margin-right: 3.5px;
    vertical-align: middle;
}
.productoLista .botonAnadir{
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 12px;
}
.listaFormato li a{
    border-color: #ddd;
    border-radius: var(--border-radius-md);
    color: var(--color-texto) !important;
    transition: var(--transition-1);
}
.listaFormato li a.activo,
.listaFormato li a:hover{
    background-color: var(--color-secundario);
    color: white !important;
    border-radius: .25rem;
    border-color: var(--color-secundario) !important;
}
/* Grid de productos */
#gridProductos button.carro{
    margin-top: 10px;
}
/* Producto Single */
#producto #carouselCus1 .slick-track{
    display: flex;
    align-items: center;
}
#producto #carouselCus1 .slick-slide{
    border-radius: .25rem;
    overflow: hidden;
}
#producto #carouselCus1 .slick-slide img{
    border-radius: .25rem;
    max-height: 600px;
    object-fit: contain;
}
#producto #carouselCus2 .slick-slide img{
    height: 150px;
    width: 100%;
    object-fit: contain;
    border-radius: var(--border-radius-md);
    opacity: .6;
}
#producto #carouselCus2 .slick-slide.slick-current img{
    opacity: 1;
}
#producto ul[data-target="nav-producto"] li{
    margin: 0 5px;
}
#producto ul[data-target="nav-producto"] li:first-child{
    margin-left: 0;
}
#producto ul[data-target="nav-producto"] li:last-child{
    margin-right: 0;
}
#producto .precio{
    font-size: 24px;
    color: var(--color-info-oscuro);
    font-weight: bold;
}
#producto button.carro{
    width: 100%;
    color: white;
    border-radius: 30px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
}
#producto button.carro i{
    font-size: 24px;
    margin-left: 5px;
}
#producto .productoCantidad input{
    font-size: 16px;
}
#producto .productoCantidad button{
    width: 30px;
    height: 30px;
    font-size: 12px;
}
#producto .listaRedesSociales{
    margin-top: 10px;
    width: 100%;
    text-align: right;
}
#producto .listaRedesSociales li a{
    font-size: 20px;
    color: var(--color-texto);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    opacity: .6;
    transition: var(--transition-1);
}
#producto .listaRedesSociales li a:hover{
    opacity: 1;
}
/* Productos parecidos */
.productoVertical figure,
.productosParecidos figure{
    background-color: #f7f7f7;
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
}

.productoVertical img,
.productosParecidos img{
    width: 100%;
    height: 250px;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.productoGrid .productoCategoria a,
.productoHorizontal .productoCategoria h6,
.productoVertical .productoCategoria h6,
.productosParecidos .productoCategoria h6{
    margin-bottom: 0;
    font-size: 12px;
    color: var(--color-muted);
    display: block;
}
.productoGrid .productoNombre,
.productoVertical .productoNombre,
.productosParecidos .productoNombre{
    font-size: 18px;
    display: block;
    color: var(--color-texto);
    margin-top: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-top: 0;
    margin-bottom: 5px;
    font-weight: bold;
}
.productoHorizontal .informacion .productoDescripcion,
.productoVertical .productoDescripcion{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
}
.productoHorizontal .productoPrecio,
.productoVertical .productoPrecio,
.productosParecidos .productoPrecio{
    text-align: left;
    font-size: 20px;
    color: var(--color-texto);
}
.productoVertical .productoAcciones,
.productosParecidos .productoAcciones{
    margin-top: 20px;
}
.productoHorizontal{
    border-radius: 10px;
    display: flex;
    border: 1px solid rgba(241,241,241,1);
    overflow: hidden;
    cursor: pointer;
}
.productoHorizontal .imagen{
    min-width: 200px;
    height: 225px;
    background-color: #f7f7f7;
}
.productoHorizontal .imagen img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.productoHorizontal .informacion{
    padding: 20px;
    align-self: center;
    width: 100%;
    height: 100%;
}
.productoHorizontal .informacion .productoNombre{
    font-size: 16px;
    display: block;
    color: var(--color-texto);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    max-width: 175px;
}
.productoHorizontal .productoPrecio span{
    font-size: 12px;
}
.productoHorizontal .productoBotones,
.productoVertical .productoBotones,
.productosParecidos .productoBotones{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.productoHorizontal .productoBotones button,
.productoVertical .productoBotones button,
.productosParecidos .productoBotones button{
    flex: auto;
    height: 40px;
}
/* Checkout */
#checkout{
    background-color: #f5f6fa;
}
#checkout .card{
    padding: 0;
}
#checkout .card .card-header{
    padding: 32.5px;
    background-color: white;
}
#checkout .card .card-header ul{
    display: flex;
    align-items: center;
    justify-content: center;
}
#checkout .card .card-header ul li{
    display: flex;
    align-items: center;
}
#checkout .card .card-header ul li + li{
    margin-left: 20px;
}
#checkout .card .card-header ul li div{
    border: none;
    background-color: transparent;
    text-align: center;
}
#checkout .card .card-header ul li div p{
    margin-bottom: 0;
    margin-top: 15px;
    font-weight: 600;
}
#checkout .card .card-header ul li div.activo p{
    color: var(--color-info);
}
#checkout .card .card-header ul li svg{
    width: 75px;
}
#checkout .card .card-header ul li svg path,
#checkout .card .card-header ul li svg rect{
    fill: var(--color-muted);
}
#checkout .card .card-header ul li div.activo svg path,
#checkout .card .card-header ul li div.activo svg rect,
#checkout .card .card-header ul li svg.activo path,
#checkout .card .card-header ul li svg.activo rect{
    fill: var(--color-info);
}
#checkout table .productoPrecio{
    font-size: 14px;
    font-weight: 500;
}
#checkout .productoPrecio{
    font-size: 16px;
}
#checkout h5{
    color: var(--color-texto);
}
#checkout div[data-tipo]{
    display: none;
}
#checkout div[data-tipo][data-estado="true"]{
    display: block;
}
#checkout div[data-tipo][data-permitido="false"] .botonAvanzar{
    opacity: .4;
    pointer-events: none;
}
#stepFormProgress .active span,
#stepFormProgress .g-checked span{
    background: var(--color-principal);
    border-color: var(--color-principal) !important;
}
#stepFormProgress span[data-next-step]{
    pointer-events: none;
}
#stepFormSteps .step:not(.active){
    display: none;
}
#step2 label{
    display: block;
    color: #333;
    font-size: 1rem;
}
#step2 input,
#step2 select,
#step2 textarea{
    padding: 15px;
    border-radius: .25rem;
}
#step2 input:focus{
    border-color: var(--color-principal);
}
#checkout #checkoutFormularioLogIn{
    padding: 40px;
}
#checkout #checkoutFormularioLogIn .logos{
    margin-bottom: 20px;
    text-align: center;
}
#checkout #checkoutFormularioLogIn .informacion{
    margin-bottom: 20px;
}
#checkout #checkoutFormularioLogIn .titulo{
    font-weight: bold;
    color: var(--color-texto);
    text-align: center;
    font-size: 24px;
    margin-bottom: 10px;
}
#checkout #checkoutFormularioLogIn .subtitulo{
    text-align: center;
    margin-bottom: 0;
}
#checkout #checkoutFormularioLogIn button{
    display: block;
    margin: auto;
    width: 150px;
}
.alertaErrores,
.alert.acierto,
.alert.error{
    display: none;
}
.alertaErrores p{
    color: #0c5460;
}
/* Carrito lateral*/
body::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    z-index: -1;
    transition: .5s all;
}
body[data-carrito-permitido="true"][data-carrito-activo="on"]::after{
    z-index: 999;
    background: rgba(0,0,0,.2);
}
#carritoLateral{
    position: fixed;
    top: 0;
    right: -100%;
    width: 400px;
    height: 100%;
    z-index: 9999;
    background: white;
    box-shadow: -13px 0 20px rgba(119, 131, 143, 0.08);
    transition: .5s all;
    padding: 32.5px;
}
body[data-carrito-activo="on"] #carritoLateral{
    right: 0;
}
#carritoLateral > .titulo{
    padding: 0;
    background: transparent;
    border: none;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}
#carritoLateral > .titulo p{
    color: var(--color-texto);
    margin-bottom: 0;
}
#carritoLateral > .titulo button{
    border-radius: var(--border-radius-md);
    transition: var(--transition-1);
    width: 30px;
    height: 30px;
    font-size: 14px;
    border: none;
    background: none;
}
#carritoLateral > .titulo button i{
    opacity: .8;
    transition: var(--transition-1);
}
#carritoLateral > .titulo button:hover{
    background: var(--background-1);
}
#carritoLateral > .titulo button:hover i{
    opacity: 1;
}
#carritoLateral .cuerpo{
    height: calc(70vh - 56.8px);
    min-height: 300px;
    overflow: auto;
}
#carritoLateral .cuerpo::-webkit-scrollbar {
    width: 6px;
    background: #f0f0f0;
    border-radius: .25rem;
}
#carritoLateral .cuerpo::-webkit-scrollbar-thumb{
    border-radius: .25rem;
}
#carritoLateral .cuerpo{
    scrollbar-width: thin;
}
#carritoLateral .cuerpo::-webkit-scrollbar {
    width: 6px;
    background: #f0f0f0;
    border-radius: .25rem;
}
#carritoLateral .cuerpo::-webkit-scrollbar-thumb{
    border-radius: .25rem;
}
#carritoLateral .cuerpo .productoImagen{
    height: 70px;
    width: 70px;
    text-align: center;
}
#carritoLateral .cuerpo .productoImagen img{
    height: 70px;
    width: 70px;
    object-fit: contain;
    border: 1px solid var(--border-color-1);
}
#carritoLateral .productoInformacion .productoNombre{
    font-size: 14px;
    font-weight: bold;
    color: var(--color-texto);
    margin-bottom: 5px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 250px;
}
#carritoLateral .productoInformacion .productoPrecio{
    color: var(--color-texto);
    margin-bottom: 5px;
    margin-right: 10px;
}
#carritoLateral .productoInformacion .productoCantidad{
    margin-bottom: 5px;
}
#carritoLateral .cuerpo .media{
    padding: 20px 0;
}
#carritoLateral .cuerpo .media:not(:last-child){
    border-bottom: 1px solid var(--border-color-1);
}
#carritoLateral .cuerpo button.delete{
    font-size: .75rem;
    background: var(--color-danger);
    color: white;
    font-weight: normal;
    padding: 5px;
    border-radius: var(--border-radius-md);
    text-shadow: none;
    opacity: .6;
    float: inherit;
    transition: var(--transition-1);
}
#carritoLateral .cuerpo button.delete:hover{
    opacity: 1;
}
#carritoLateral .footer{
    height: 30vh;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#carritoLateral .footer .precio{
    font-size: 20px;
    display: block;
}
#carritoLateral .footer .botonPagar{
    display: block;
    padding: 10px 15px;
    border-radius: .25rem;
    background: var(--color-principal);
    color: white;
    font-size: 20px;
    box-shadow: var(--box-shadow-1);
}
#carritoLateral .footer .acciones,
#carritoLateral .footer .precioTotal{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#carritoLateral .footer .precioTotal{
    margin-bottom: 30px;
}
#carritoLateral .footer .precioTotal .titulo{
    font-size: 14px;
    color: var(--text-dark-50);
}
#carritoLateral .footer .acciones{
    margin-bottom: 0;
}
.placeholder,
.carritoVacio .placeholder,
#carritoLateral .placeholder{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.placeholder > div,
.carritoVacio .placeholder > div,
#carritoLateral .placeholder > div{
    text-align: center;
}
.placeholder svg,
.carritoVacio .placeholder svg,
#carritoLateral .placeholder svg{
    width: 175px;
    opacity: .7;
}
.placeholder h5,
.placeholder h4,
.carritoVacio .placeholder h5,
.carritoVacio .placeholder h4,
#carritoLateral .placeholder h4{
    margin-bottom: 0;
    margin-top: 30px;
    font-weight: 600;
    color: var(--text-dark-50);
}
.placeholder.svg-xs svg{
    width: 125px;
}
#pagarAhora{
    width: 100%;
    text-align: center;
    font-size: 18px;
}
#js-header + *{
    margin-top: 125px;
}
#js-header.banner-estado-activo + *{
    margin-top: 195px;
}
/* Estado del producto */
.iconoEstado{
    font-size: 100px;
    color: var(--color-principal);
    display: block;
    text-align: center;
    margin-bottom: 20px;
}
.svgEstado{
    width: 100px;
    display: block;
    margin: auto;
    margin-bottom: 20px;
}
.svgEstado path{
    fill: var(--color-principal);
}
#slider{
    min-height: 700px;
}
#slider .rev-btn{
    padding: 5px 50px !important;
    color: white;
    border-radius: .25rem;
    border: 1px solid white !important;
    font-size: 20px;
    transition: .2s all !important;
    z-index: 999;
}
#slider .rev-btn:hover{
    color: var(--color-texto);
    background-color: white;
}
.ms-slide .ms-slide-bgcont img{
    width: 100% !important;
    margin-left: 0 !important;
    max-height: 700px;
}
.zonaIconos > .container > .row > div,
#inicioIconos > div > .container > .row > div{
    display: flex;
    align-items: center;
    justify-content: center;
}
.zonaIconos > .container > .row > div:first-child,
#inicioIconos > div > .container > .row > div:first-child{
    border-left: 0 !important;
}
.zonaIconos > .container > .row > div:last-child,
#inicioIconos > div > .container > .row > div:last-child{
    border-right: 0 !important;
}
#inicioIconos i{
    font-size: 50px;
    margin-bottom: 15px;
    color: var(--color-principal);
}
#inicioIconos .media{
    flex-wrap: wrap;
    justify-content: center;
}
#inicioIconos .media > .media-body{
    flex: 0 0 100%;
    max-width: 100%;
}
#inicioIconos .media > .media-body{
    font-size: 16px;
    text-align: center;
}
#inicioIconos .row > div:not(:first-child){
    border-left: 1px solid #ddd;
}
.etapaPagarAhora input{
    pointer-events: none;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}
.etapaPagarAhora #accordion-02,
.etapaPagarAhora button{
    display: none !important;
}
.form-check{
    padding-left: 0;
}
.form-check-label{
    display: inline-flex !important;
}

/* Portal Cliente */
#portalCliente .imgNombre{
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-principal);
    font-size: 40px;
    color: white;
}
#portalCliente .iconoEstado{
    font-size: 40px;
    opacity: .8;
    margin-right: 10px;
    margin-bottom: 0;
}
#portalCliente .iconoEstado.confirmado{
    color: var(--color-success);
}
#portalCliente .iconoEstado.sinConfirmar{
    color: var(--color-info);
}
#portalCliente .direccionLinea{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#portalCliente .estadoPedidosLista{
    margin-bottom: 2px;
}
#portalCliente .estadoPedidosLista > li{
    padding-bottom: 0;
}
#portalCliente .estadoPedidosLista > li > button,
#portalCliente .estadoPedidosLista > li > a{
    border-bottom: 2px solid transparent;
    transition: var(--transition-1);
    padding: 0 10px 15px 10px;
    color: #777;
    display: block;
}
#portalCliente .estadoPedidosLista > li > a.activo,
#portalCliente .estadoPedidosLista > li > button.activo{
    border-color: var(--color-principal);
    color: rgba(0,0,0,1);
}
#portalCliente .portalClienteMenu{
    margin-bottom: 0;
}
#portalCliente .portalClienteMenu > li{
    padding: 3px 0;
}
#portalCliente .portalClienteMenu > li > a{
    display: flex;
    align-items: center;
    color: var(--color-texto);
    background-color: transparent;
    transition: var(--transition-1);
    border-radius: var(--border-radius-estandar);
    padding: 5px;
}
#portalCliente .portalClienteMenu > li > a span{
    color: var(--color-texto);
}
#portalCliente .portalClienteMenu > li > a.activo{
    background-color: var(--color-principal);
}
#portalCliente .portalClienteMenu > li > a.activo,
#portalCliente .portalClienteMenu > li > a.activo span{
    color: white;
}
#portalCliente #buscarPedido:focus{
    border-color: #777 !important;
}
#portalCliente .botonEliminarDireccion,
#portalCliente .botonEditarDireccion{
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .25rem;
    transition: var(--transition-1);
}
#portalCliente .botonEditarDireccion{
    background: var(--color-principal);
}
#portalCliente .botonEliminarDireccion{
    background: var(--color-danger);
    opacity: .8;
}
#portalCliente .botonEliminarDireccion:hover{
    opacity: 1;
}
#portalCliente .botonEditarDireccion i,
#portalCliente .botonEliminarDireccion i{
    position: static;
    transform: none;
    display: flex;
}

/* New CSS */

.tablaEstandar{
    width: 100%;
    margin-bottom: 30px;
}
.tablaEstandar thead{
    border-bottom: 2px solid var(--border-color-1);
}
.tablaEstandar thead th{
    padding-bottom: 10px;
}
.tablaEstandar tbody td{
    padding: 10px 0;
}
.tablaEstandar tfoot{
    border-top: 2px solid var(--border-color-1);
}
.tablaEstandar tfoot th{
    padding-top: 10px;
}
.tablaEstandar p{
    color: var(--color-texto);
    font-weight: 500;
    margin-bottom: 0;
}
/* Portal */
#portal{
    color: var(--color-texto);
    background-color: #eef0f8;
    font-family: 'Nunito', sans-serif;
    padding-top: 70px;
}
#portal .container{
    max-width: 1350px;
}
#portal header{
    border-bottom: 1px solid var(--border-color-1);
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
}
#portal header .logotipo{
    max-height: 35px;
    object-fit: contain;
    max-width: 200px;
}
#portal header nav{
    display: flex;
    padding: 10px 20px;
}
#portal header ul{
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
    display: flex;
    align-items: center;
}
#portal header ul li{
    display: inline-flex;
}
#portal header ul li + li{
    margin-left: 10px;
}
#portal header a.nav-link{
    display: flex;
    align-items: center;
    background-color: rgba(77, 89, 149, 0.06);
    padding: 7.5px 15px;
    border-radius: var(--border-radius-md);
    color: #3699ff;
}
#portal header a.nav-link.activo{
    background-color: var(--color-info);
    color: white;
}
#portal header a.enlacePerfil{
    background-color: transparent;
    font-size: 14px;
}
#portal header a.enlacePerfil p{
    margin-bottom: 0;
    display: inline-flex;
    color: var(--text-dark-50);
    font-weight: bold;
}
#portal header a.enlacePerfil .icono{
    width: 35px;
    height: 35px;
    background-color: #c9f7f5;
    color: #1BC5BD;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    transition: var(--transition-1);
    font-size: 16px;
    font-weight: bold;
}
#portal header.banner-estado-activo + aside + *{
    padding-top: 130px;
}
#portal .productosRelacionados .card .card{
    border: none;
}
#portal .productosRelacionados .imagen img{
    width: 100%;
    height: 250px;
    object-fit: contain;
    mix-blend-mode: multiply;
}
#portal .productosRelacionados .informacion a{
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    display: block;
    color: var(--color-texto);
    margin-top: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    height: 54px;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
#portal .productosRelacionados .informacion .productoPrecio{
    text-align: center;
    font-size: 18px;
}
#portal .productosRelacionados .acciones{
    text-align: center;
}
#portal #direcciones table{
    width: 100%;
}
#portal #direcciones .icono{
    background-color: #F3F6F9;
    color: var(--color-info);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    font-size: 26px;
    margin-right: 10px;
}
#portal #direcciones .nombre{
    font-weight: bold;
    margin-bottom: 0;
}
#portal #direcciones .nombre small{
    display: block;
    color: var(--color-muted);
}
#portal #direcciones table tbody tr:not(:first-child) td > div{
    margin-top: 20px;
}
#portal #direcciones .acciones ul{
    text-align: right;
    margin-bottom: 0;
}
#portal #direcciones .acciones ul li{
    display: inline-flex;
}
#portal #direcciones .acciones ul li + li{
    margin-left: 10px;
}
#portal #direcciones .acciones ul li a,
#portal #direcciones .acciones ul li button{
    background-color: var(--background-1);
    color: var(--color-info);
    border: none;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
}
.scrollbar{
    position: relative;
}
.tablaResponsive {
    max-height: 500px;
    overflow: hidden;
}
/*.tablaResponsive,*/
#portal #buscadorProducto ul{
    max-height: 800px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
    margin-bottom: 0;
}
/*.tablaResponsive::-webkit-scrollbar,*/
#portal #buscadorProducto ul::-webkit-scrollbar{
    width: 11px;
}
/*.tablaResponsive::-webkit-scrollbar-track,*/
#portal #buscadorProducto ul::-webkit-scrollbar-track{
    background: var(--scrollbarBG);
}
/*.tablaResponsive::-webkit-scrollbar-thumb,*/
#portal #buscadorProducto ul::-webkit-scrollbar-thumb{
    background-color: var(--thumbBG) ;
    border-radius: 6px;
    border: 2px solid var(--scrollbarBG);
}
#portal #buscadorProducto ul li{
    margin-right: 10px;
}
#portal #buscadorProducto ul li + li{
    margin-top: 10px;
}
#portal #buscadorProducto .productoImagen{
    width: 50px;
    min-width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: var(--border-radius-lg);
    padding: 3px;
    border: 1px solid #E5E7EB;
    margin-right: 5px;
}
#portal #buscadorProducto .productoNombre{
    margin-bottom: 0;
    color: var(--color-texto);
}
#portal #buscadorProducto .productoPrecio{
    margin-bottom: 0;
    display: block;
}
table.tablaProductos tr.activo{
    background-color: rgba(0,0,0,.05);
}
table.tablaProductos tbody tr.productoExtra + tr:not(.productoExtra){
    border-top: 2px solid var(--color-info-oscuro);
}
table.tablaProductos .select-checkbox{
    display: flex;
    justify-content: center;
}
table.tablaProductos .productoImagen{
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: var(--border-radius-md);
    padding: 3px;
    border: 1px solid var(--border-color-1);
    margin-right: 10px;
}
table.tablaProductos .productoNombre{
    font-weight: bold;
    display: inline-block;
    margin-bottom: 0;
    max-width: 350px;
}
.productoCantidad,
table.tablaProductos .productoCantidad{
    display: flex;
    align-items: center;
}
.productoCantidad button:not(.delete),
table.tablaProductos .productoCantidad button:not(.delete){
    width: 24px;
    height: 24px;
    border-radius: var(--border-radius-md);
    transition: var(--transition-1);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(77, 89, 149, 0.06);
    color: var(--color-info-oscuro);
    border: none;
    cursor: pointer;
    font-size: 10px;
}
table.tablaProductos .productoCantidad button + button,
.productoCantidad button + button{
    margin-left: 10px;
}
.productoCantidad input,
table.tablaProductos .productoCantidad input{
    border: none;
    width: 60px;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    text-align: center;
}
table.tablaProductos .productoPrecio{
    margin-bottom: 0;
    font-size: 16px;
    font-weight: bold;
}
#portal[data-modal="true"]::before{
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.1);
    width: 100%;
    height: 100%;
    z-index: 9999;
}
#portal #perfilLateral .titulo{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#portal #perfilLateral{
    width: 300px;
    min-height: 400px;
    height: 100vh;
    max-height: 100vh;
    background-color: white;
    position: fixed;
    right: -300px;
    top: 0;
    z-index: 99999;
    padding: 30px;
    box-shadow: 0px 1px 9px -3px rgba(0, 0, 0, 0.25);
}
#portal #perfilLateral .botonCerrar{
    position: absolute;
    right: 30px;
    top: 30px;
}
#portal #perfilLateral .cuerpo{
    padding-top: 20px;
}
#portal #perfilLateral .cuboIniciales{
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius-md);
    background-color: var(--color-info);
    color: white;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}
#portal #perfilLateral .informacion .nombre{
    font-size: 18px;
    color: var(--color-texto);
    font-weight: bold;
    margin-bottom: 0;
}
@media only screen and (max-width: 572px){
    #portal header #navbarHeader ul{
        display: flex;
        flex-wrap: wrap;
        margin: 10px 0;
    }
    #portal header #navbarHeader ul li,
    #portal header #navbarHeader ul li a{
        width: 100%;
    }
    #portal header #navbarHeader ul li + li{
        margin-top: 10px;
        margin-left: 0;
    }
    .productosParecidos figure,
    .productosParecidos figure img{
        height: 250px !important;
    }
}
/* Portal B2B*/
#loginPortalProfesional{
    color: #181C32;
}
#loginPortalProfesional > .container-fluid > .row > div{
    min-height: 100vh;
}
#loginPortalProfesional .imagenLateral{
    position: relative;
    background: linear-gradient(147.04deg, #CA7B70 0.74%, #5A2119 99.61%);
}
#loginPortalProfesional .imagenLateral.portalCliente{
    background: linear-gradient(147.04deg, #74C27E 0.74%,  #3C7043 99.61%);
}
#loginPortalProfesional .imagenLateral.portalAdministracion{
    background: linear-gradient(147.04deg, #3D4965 0.74%, #0d1c3f  99.61%);
}
#loginPortalProfesional .imagenLateral h3{
    font-size: 75px;
    font-weight: bold;
    margin-top: 120px;
    margin-left: 40px;
    color: white;
    animation: intro-x 1.5s forwards;
    animation-delay: .1s;
    transform: translateX(150px);
    opacity: 0;
}
#loginPortalProfesional .imagenLateral svg{
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 80%;
    height: auto;
    opacity: .8;
}
#loginPortalProfesional .formLogo,
#loginPortalProfesional .formHeader,
#loginPortalProfesional .formBody,
#loginPortalProfesional .formAcciones{
    animation: intro-x 1.5s forwards;
    animation-delay: .1s;
    transform: translateX(-50px);
    opacity: 0;
}
#loginPortalProfesional .formLogo,
#loginPortalProfesional .formHeader,
#loginPortalProfesional .formBody{
    margin-bottom: 40px;
}
#loginPortalProfesional .formLogo img{
    width: auto;
    max-width: 200px;
    max-height: 100px;
}
#loginPortalProfesional .formHeader h4{
    font-size: 26px;
    font-weight: bold;
}
#loginPortalProfesional .formHeader span{
    font-size: 17.5px;
    font-weight: bold;
    color: #B5B5C3;
}
#loginPortalProfesional .formBody{
    min-width: 400px;
}
#loginPortalProfesional .formBody label{
    font-size: 16px;
    font-weight: bold;
    display: block;
}
#loginPortalProfesional .formBody input{
    width: 100%;
    background-color: #F3F6F9;
    border: none;
    border-radius: 12px;
    padding: 15px;
    font-size: 15px;
}
#loginPortalProfesional .formAcciones button{
    padding: 12.5px 27.5px;
    font-size: 16px;
    color: white;
    border: none;
    background-color: var(--color-principal);
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
    transition: var(--transition-1);
}
#loginPortalProfesional .formAcciones button:hover{
    box-shadow: none;
    opacity: .8;
}
#loginPortalProfesional .politicas{
    position: absolute;
    bottom: 0;
    animation: fade-in 1.5s forwards;
    animation-delay: .4s;
    opacity: 0;
}
#loginPortalProfesional .politicas ul li{
    display: inline-flex;
}
#loginPortalProfesional .politicas ul li + li{
    margin-left: 10px;
}
#loginPortalProfesional .politicas ul li,
#loginPortalProfesional .politicas ul li a{
    color: inherit;
    opacity: .7;
}
@media only screen and (max-width: 572px){
    #loginPortalProfesional > .container-fluid{
        padding: 0 15px;
    }
    #loginPortalProfesional > .container-fluid > .row > div{
        min-height: 250px;
    }
    #loginPortalProfesional > .container-fluid > .row > div:last-child{
        margin: 0 -15px;
        width: calc(100% + 30px);
    }
    #loginPortalProfesional .imagenLateral h3{
        margin: 40px 15px;
        position: relative;
        z-index: 11;
        font-size: 46px;
    }
    #loginPortalProfesional .imagenLateral svg{
        opacity: .3;
        z-index: 10;
    }
    #loginPortalProfesional .form{
        padding: 40px 0;
    }
    #loginPortalProfesional .formBody{
        min-width: auto;
    }
    #loginPortalProfesional .formLogo img{
        max-height: 75px;
    }
    #loginPortalProfesional .formAcciones button{
        width: 100%;
    }
    #loginPortalProfesional > .container-fluid > .row > div:first-child{
        flex-wrap: wrap;
    }
    #loginPortalProfesional .politicas{
        position: inherit;
        flex: 0 0 100%;
    }
    #loginPortalProfesional .politicas ul{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
    #loginPortalProfesional .politicas ul li{
        flex: 0 0 auto;
        padding: 5px;
    }
    #loginPortalProfesional .politicas li:nth-child(even){
        display: none;
    }
}
/* Modales */
.modalEstandar .botonCerrar{
    position: absolute;
    right: 20px;
    top: 20px;
}
.modalEstandar .modal-title{
    font-size: 24px;
    font-weight: bold;
    color: var(--color-primero);
}
.modalEstandar .form-group{
    margin: 5px 0;
}
.modalEstandar label{
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #696969;
}
.modalEstandar .modal-header{
    border-bottom: 0;
    padding-bottom: 0;
    position: relative;
}
.modalEstandar .modal-header small{
    color: var(--color-muted);
}
.modalEstandar .modal-footer{
    padding-top: 0;
    border: none;
    position: relative;
}
.modalEstandar .btn-secondary{
    background-color: transparent;
    color: var(--color-default);
    border-color: var(--border-color-1);
}
.modalEstandar .btn-primary{
    background-color: var(--color-info);
    border-radius: var(--border-radius-md);
    border-color: var(--color-info);
    color: white;
}
.modalEstandar .btnEliminar{
    margin-right: auto;
    opacity: .8;
    transition: var(--transition-1);
}
.modalEstandar .btnEliminar:hover{
    opacity: 1;
}
.botonCarritoFlotante{
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 10;
}
.modalProducto{
    cursor: pointer;
}
/*#modalProducto .row{*/
/*    margin: 0;*/
/*}*/
/*#modalProducto div[class*="col-"]{*/
/*    padding: 0;*/
/*}*/
#modalProducto .modal-dialog{
    width: 960px;
    max-width: 100%;
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
}
#modalProducto .modal-content{
    border-radius: 10px;
    overflow: hidden;
}
#modalProducto .modal-body{
    padding: 0;
}
#modalProducto .imagen{
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
#modalProducto img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    max-height: 500px;
}
#modalProducto .informacion{
    padding: 30px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
#modalProducto .informacion .precio > *,
#modalProducto .informacion .precio p,
#modalProducto .informacion .titulo p{
    font-size: 24px;
    font-weight: 600;
    color: var(--color-texto);
    margin-bottom: 0;
}
#modalProducto .informacion .precio,
#modalProducto .informacion .titulo{
    margin-bottom: 15px;
}
#modalProducto .informacion .descripcion{
    font-size: 14px;
    font-weight: 300;
    color: var(--color-texto);
    margin-bottom: 15px;
}
#modalProducto .informacion .boton-1{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12.5px 30px;
    font-size: 14px;
    background-color: var(--color-secundario);
}
#modalProducto .informacion .boton-1 i{
    font-size: 24px;
    margin-left: 5px;
}

#modalProducto .acciones .productoCantidad input{
    font-size: 18px;
    width: 100px;
    border-top: 1px solid var(--border-color-1);
    height: 50px;
    border-bottom: 1px solid var(--border-color-1);
    z-index: 10;
}
#modalProducto .acciones .productoCantidad button:first-of-type{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#modalProducto .acciones .productoCantidad button:last-of-type{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
#modalProducto .acciones .productoCantidad button{
    min-width: 50px;
    height: 50px;
    border: 1px solid var(--border-color-1);
    font-size: 18px;
}

.cart-floating{
    z-index: 9990;
    position: fixed;
    bottom: 15px;
    right: 15px;
    background: white;
    background-color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    background-color: var(--color-info);
    color: white;
    font-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*transition: var(--transition-1);*/
    display: none;
    opacity: 0;
    animation: fade-in 1s forwards;
    animation-delay: .4s;
}
.cart-floating:hover{
    opacity: .8;
}
.cart-floating:visited,
.cart-floating:focus,
.cart-floating:hover,
.cart-floating:active{
    color: white;
}

/* Slider */
#slider .ms-slide:not(.ms-slide-sin-opacidad)::before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 28, 63, .3);
    z-index: 100;
}
#slider .ms-slide .ms-layer-mask{
    text-align: center;
    width: 100%;
}
#slider .ms-slide .titulo{
    font-size: 60px;
    width: auto !important;
    height: auto;
    line-height: initial;
    min-height: auto;
    color: white;
}
#slider .ms-slide .texto{
    width: auto !important;
    font-size: 32px;
    line-height: initial;
    color: white;
    font-weight: 300;
}
#slider .ms-slide .ms-btn-container{
    left: 50% !important;
    transform: translateX(-50%);
}
#slider .ms-slide .boton{
    border: 2px solid white;
    border-radius: 30px;
    color: var(--color-texto);
    background: white;
    font-size: 18px;
}
#slider .ms-time-bar{
    background-color: var(--color-principal) !important;
}
/* Notiflix */
.notiflix_1{
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);
    background: white !important;
    padding: 8px 12.5px !important;
}
.notiflix_1::before{
    content: '';
    left: 0;
    top: 0;
    position: absolute;
    background: #32c682;
    width: 50px;
    height: 100%;
    border-top-left-radius: var(--border-radius-md);
    border-bottom-left-radius: var(--border-radius-md);
}
.notiflix_1 svg{
    width: 27.5px !important;
    height: 27.5px !important;
    padding-left: 5.25px;
}
.notiflix_1 .the-message{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 5px !important;
}
.notiflix_1 .the-message p{
    padding-top: 11px;
    padding-bottom: 11px;
    color: var(--color-texto);
    padding-left: 0 !important;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 0;
}
.notiflix_1 .the-message a{
    font-size: 12px;
    font-weight: bold;
    padding: 10px;
    display: block;
    color: var(--color-info-oscuro);
}
#livewire-error{
    z-index: 999999999 !important;
}
.json{
    max-height: 400px;
    overflow-y: auto;
}
@keyframes intro-x {
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes intro-y {
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
/* Master Slider */
/* --------------------------------------------------------------------- */
.master-slider-design-fullwidth{
    width: 100%;
    max-width: 100%;
}
.master-slider-design-boxed{
    width: 100%;
    max-width: 1320px;
    margin: auto !important;
}
@keyframes fade-in {
    100%{
        opacity: 1;
    }
}
@media only screen and (max-width: 572px){
    body[data-carrito-activo="on"]{
        overflow-y: hidden;
    }
    #carritoLateral{
        width: 100%;
    }
    #carritoLateral .productoInformacion .productoNombre{
        max-width: 200px;
    }
    #js-header .headerTop #navbarTop .textoCambianteNavBar{
        height: auto;
    }
    #js-header .navbar-brand{
        width: 200px;
    }
    #js-header .navbar-brand .logoDimensionTEI img{
        width: 150px;
        height: auto;
    }
    #js-header .js-mega-menu {
        padding: 1.5rem 1rem;
    }
    #js-header .navbar-nav.acciones{
        flex-wrap: wrap;
        flex-direction: row;
    }
    #js-header .navbar-nav.acciones > li{
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
        justify-content: center;
    }
    #js-header .headerNav #navBar > .acciones > li + li{
        margin-left: 0;
    }
    #footer > div > .row > div:not(:last-child) ul{
        margin-bottom: 30px;
    }
    #footer #formNewsLetter{
        margin-top: 15px;
    }
    #footer #formNewsLetter .form-group{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0;
    }
    #footer #copyright{
        text-align: center;
    }
    .cart-floating{
        display: flex;
    }
    .productoHorizontal{
        flex-direction: column;
    }
    .productoHorizontal .imagen{
        min-width: 100px;
        height: 150px;
    }
    .productoHorizontal .productoPrecio span{
        display: block;
    }
    #modalProducto .modal-dialog{
        width: auto;
        margin: 0;
    }
    #modalProducto .modal-dialog .modal-content{
        border-radius: 0;
    }
    #modalProducto img{
        max-height: 200px;
    }
    #modalProducto .informacion .descripcion {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        margin-bottom: 10px;
    }
    #modalProducto .acciones .productoCantidad input{
        width: 100%;
    }
    #modalProducto .acciones .productoCantidad{
        margin-bottom: 15px;
    }

    #slider #masterslider .ms-view,
    #slider #masterslider .ms-slide,
    #slider #masterslider .ms-slide-bgcont img{
        min-height: 500px !important;
    }
    #slider .ms-anim-layers{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #slider .ms-btn-container,
    #slider .ms-anim-layers .ms-layer-mask{
        position: static;
        top: inherit;
        left: inherit;
        transform: none !important;
    }
    #slider .ms-anim-layers .ms-layer-mask .titulo{
        font-size: 30px !important;
        padding: 0 16px !important;
        margin-bottom: 50px;
    }
    #slider .ms-anim-layers .ms-layer-mask .texto{
        font-size: 14px !important;
        padding: 0 16px !important;
        margin-bottom: 50px;
    }
    #slider .ms-anim-layers .ms-btn-container .boton{
        font-size: 14px !important;
        width: auto !important;
        padding: 7.5px 20px !important;
        line-height: 1.5rem !important;
    }
    #gridProductos .filtrosHorizontal{
        flex-wrap: wrap;
    }
    #gridProductos .filtrosHorizontal > div{
        flex: 0 0 100%;
        max-width: 100%;
        margin-right: 0;
    }
    #gridProductos .filtrosHorizontal > div + div{
        margin-top: 10px;
    }
    #slider {
        min-height: auto;
    }
    input:not(.input-bk):not([type="checkbox"]) {
        height: 60px;
    }

}
.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translateY(-50%);
}

/* API */
body#api{
    color: var(--color-texto);
    font-family: 'Nunito', sans-serif;
}
.tituloPrimjs{
    border-top-right-radius: var(--border-radius-10);
    border-top-left-radius: var(--border-radius-10);
    color: white;
    padding: 16px;
    background-color: #3c4257;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tituloPrimjs h5{
    font-size: 16px;
    margin-bottom: 0;
}
.tituloPrimjs .copy{
    padding: 7.5px;
    transition: var(--transition-1);
    cursor: pointer;
    border-radius: var(--border-radius-md);
}
.tituloPrimjs .copy:hover{
    background-color: rgba(255,255,255,.1);
}
pre.prim{
    margin-top: 0;
    border-radius: 0 0 var(--border-radius-10) var(--border-radius-10);
    background-color: #4f566b;
}
#api .token.attr-name, .token.builtin, .token.char, .token.inserted, .token.selector, .token.string {
    color: rgb(133, 217, 150);
}
/* Pedidos */
#pedidos table{
    width: 100%;
}
#pedidos table thead th{
    border-bottom: 1px solid #B5B5C3;
    padding-bottom: 10px;
    font-weight: 600;
    font-size: 14px;
}
#pedidos table tbody td{
    padding: 10px 0;
}
#pedidos table tbody .acciones{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
#pedidos table tbody .acciones a,
#pedidos table tbody .acciones button{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-md);
    background-color: #F3F6F9;
    border: none;
    color: var(--color-info);
    transition: var(--transition-1);
}
#pedidos table tbody .acciones button:hover{
    background-color: var(--color-info);
    color: #F3F6F9;
}
#pedidos table tbody .acciones button + button{
    margin-left: 10px;
}
#pedidoDetalles .card .card-header .tag,
#pedidos table tbody .tag{
    font-size: .90rem;
    padding: 2px 4px;
    background: var(--color-info);
    border-radius: var(--border-radius-md);
    color: white;
    text-transform: capitalize;
}
#pedidoDetalles .card .card-header .tag.tag-confirmado,
#pedidos table tbody .tag.tag-confirmado{
    background-color: var(--color-success);
}
#pedidoDetalles .card .card-header .tag.tag-rechazado,
#pedidos table tbody .tag.tag-rechazado{
    background-color: var(--color-danger);
}
#pedidos .pagination{
    margin-top: 20px;
    margin-bottom: 0;
}
#pedidos .pagination li button,
#pedidos .pagination li span{
    margin: 4px;
    border-radius: var(--border-radius-md);
    padding: 0;
    min-width: 30px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-color: transparent;
    transition: var(--transition-1);
}
#pedidos .pagination li.active span{
    background-color: var(--color-info);
}
#pedidos .pagination li button:hover,
#pedidos .pagination li span:hover{
    background-color: var(--color-info);
    color: white;
    opacity: 1;
}
#pedidos .pagination li:first-child span,
#pedidos .pagination li:last-child span,
#pedidos .pagination li:first-child button,
#pedidos .pagination li:last-child button{
    background: #ecf1f6;
    border-color: #ecf1f6;
    font-size: 22px;
}
#pedidoDetalles .card .card-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
}
#pedidoDetalles .card .card-header .titulo{
    margin-bottom: 0;
    font-weight: bold;
}
#pedidoDetalles .card .card-body{
    padding: 30px;
}
#pedidoDetalles .card .card-body .informacion{
    border-top: 1px solid var(--border-color-1);
    padding-top: 20px;
}
#pedidoDetalles .card .card-body .informacion p{
    margin-bottom: 0;
    font-size: .85rem;
    color: rgba(0, 0, 0, .8);
}
#pedidoDetalles .card .card-body .lineas table{
    width: 100%;
    margin-top: 100px;
}
#pedidoDetalles .card .card-body .lineas table thead th{
    border-bottom: 1px solid var(--border-color-1);
    padding-bottom: 10px;
    font-weight: 600;
    font-size: 14px;
}
#pedidoDetalles .card .card-body .lineas table tbody td,
#pedidoDetalles .card .card-body .lineas table tfoot td{
    padding: 10px 0;
}
#pedidoDetalles .card .card-body .lineas table tbody td p{
    font-weight: bold;
    margin-bottom: 0;
    font-size: .85rem;
    text-align: right;
}
#pedidoDetalles .card .card-body .lineas table tfoot td p{
    font-weight: bold;
    margin-bottom: 0;
    text-align: right;
}
#pedidoDetalles .card .card-body .lineas table tbody td figure{
    background-color: #f7f7f7;
    border-radius: 10px;
    overflow: hidden;
    padding: 5px;
    margin-bottom: 0;
    margin-right: 10px;
}
#pedidoDetalles .card .card-body .lineas table tbody td .productoImagen{
    width: 50px;
    height: 50px;
    border-radius: var(--border-radius-10);
    object-fit: contain;
    mix-blend-mode: multiply;
}
#pedidoDetalles .card .card-body .acciones{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 50px;
}
#pedidoDetalles .card .card-body .acciones button,
#pedidoDetalles .card .card-body .acciones a{
    border-radius: var(--border-radius-md);

}
/*inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800*/
.badged{
    display: inline-flex;
    align-items: center;
    padding: .25rem .75rem;
    border-radius: var(--border-radius-10);
    font-size: .80rem;
    font-weight: 500;
    background-color: #dbeafe;
    color: rgb(30, 64, 175);
    white-space: nowrap;
    margin: 4px;
}
.lista-estandar{
    display: flex;
    align-items: center;
}

.lista-estandar.lista-flex{
    flex-wrap: wrap;
    margin: 0 -4px;
}
.lista-estandar.lista-flex > li{
    flex: 0 1;
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    content: none !important;
}

/* Nuevo checkout */
.facturacionTipo input:checked + div + svg + .resaltar{
    --tw-border-opacity: 1;
    border-color: rgba(37, 99, 235, var(--tw-border-opacity));
}
.facturacionTipo svg{
    display: none;
}
.facturacionTipo input:checked + div + svg{
    display: block;
    --tw-text-opacity: 1;
    color: rgba(37, 99, 235, var(--tw-text-opacity));
}
.modal-backdrop{
    z-index: 10000 !important;
}
.modal{
    z-index: 10001 !important;
}
.dropdown-toggle::after {
    content: none;
}
.form-button{
    display: flex;
}
.form-button input{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.form-button button{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.py-2\.5 {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}
/* Lateral login - perfil */
.lateral-login{
    z-index: 999999999999999999;
}
.lateral-login:not(.activo){
    visibility: hidden;
}
.lateral-login .overlay,
.lateral-login .contenido{
    transition: .4s all;
}
.lateral-login:not(.activo) .overlay{
    opacity: 0;
}
.lateral-login:not(.activo) .contenido{
    transform: translateX(100%);
}
.lateral-login .contenido > div{
    width: 400px;
}
.embla__slide__img {
    border-radius: var(--border-radius-estandar);
    background-color: #f7f7f7;
}
/* Banner estado */
.banner-estado{
    z-index: 9999999;
}
.banner-estado span.titulo{
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
}
.banner-estado span.texto{
    font-size: 14px;
    line-height: 1.5;
}
.banner-estado svg{
    width: 21px;
    height: 21px;
}
.banner-estado .p-2{
    padding: 7px !important;
}
.pagination-livewire [aria-current="page"] span{
    border-color: var(--color-info) !important;
    z-index: 20;
    color: var(--color-info);
    font-weight: bold;
}
.pagination-livewire [aria-disabled="true"]{
    opacity: .4;
    pointer-events: none;
}

.tituloProducto{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    -webkit-line-clamp: 1;
}

figure{
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.articulosHeader article{
    height: auto;
    border-radius: .25rem;
    padding: 15px !important;
}
.pointer{
    cursor: pointer;
}
/* Slick */
.js-carousel .slick-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ddd;
    border-radius: 100%;
    color: var(--color-secundario);
    font-weight: bold;
    transition: var(--transition-estandar);
    font-size: 18px;
    cursor: pointer;
}
.js-carousel .slick-arrow:hover{
    color: white;
    background-color: var(--color-secundario);
}
.js-carousel .slick-prev{
    left: -90px;
}
.js-carousel .slick-next{
    right: -90px;
}
/* Idiomas */
.languague-options button{
    outline: none !important;
}
.languague-options .dropdown-menu{
    min-width: 10rem;
}
.languague-options a{
    color: var(--color-texto) !important;
    display: flex;
    padding: 10px !important;
    font-size: 14px;
}

/* Lateral */
.aside-floating{
    z-index: 999999999999999999;
}
.aside-floating:not(.activo){
    visibility: hidden;
}
.aside-floating .overlay,
.aside-floating .contenido{
    transition: .4s all;
}
.aside-floating:not(.activo) .overlay{
    opacity: 0;
}
.aside-floating:not(.activo) .contenido{
    transform: translateX(100%);
}
.aside-floating .contenido > div{
    width: 400px;
}

/* Go to Top */
.go-to-top{
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--color-principal);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    display: none;
}


/* Content editable */
/* --------------------------------------------------------------------- */
.content-edit h1,
.content-edit h2,
.content-edit h3,
.content-edit h4,
.content-edit h5,
.content-edit h6 {
    margin-bottom: 1rem;
}
.content-edit h1{
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.content-edit h2{
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.content-edit h3{
    font-size: 1.5rem;
    line-height: 2rem;
}
.content-edit p,
.content-edit ol li,
.content-edit ul li{
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.content-edit ol{
    list-style: decimal;
}
.content-edit ul{
    list-style: initial;
}
.content-edit ol,
.content-edit ul{
    padding-left: 40px;
}
.content-edit table,
.content-edit iframe,
.content-edit img{
    max-width: 100%;
}
.content-edit a {
    color: var(--color-info);
    text-decoration: underline;
}
/* Diseño de los artículos */
/* --------------------------------------------------------------------- */
.article[data-design="2"] img{
    mix-blend-mode: multiply;
}
.article[data-design="2"] .price div{
    margin-top: .25rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
}
/* Banners */
/* --------------------------------------------------------------------- */
#banners .banner{
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    height: 425px;
    overflow: hidden;
    border: 1px solid rgba(241,241,241,1);
}
#banners .banner:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 21px;
    z-index: 10;
}
#banners .banner.overlay-top:after{
    background-image: linear-gradient(to top, rgb(255 255 255 / 0.15), rgb(30 41 59 / 0.60));
}
#banners .banner.overlay-bottom:after{
    background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.15), rgb(30 41 59 / 0.60));
}
#banners .banner h2,
#banners .banner span{
    position: relative;
    z-index: 20;
}

/* Brands and Manufacturers */
/* --------------------------------------------------------------------- */
#brands-manufacturers{
    background-color: #eef1f8;
    position: relative;
}
#brands-manufacturers .js-slide{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.25rem;
}
#brands-manufacturers img{
    max-height: 70px;
    width: auto;
    object-fit: contain;
    transition: .2s all;
}
#brands-manufacturers .js-slide p{
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
    font-weight: bold;
}
#brands-manufacturers .js-carousel:not(.js-carousel-color) img{
    filter: grayscale(100%);
    opacity: .75;
}
#brands-manufacturers .js-carousel:not(.js-carousel-color) img:hover{
    opacity: 1;
}


/* Accesibilidad */
/* --------------------------------------------------------------------- */
:focus {
    outline: 2px solid #1E90FF !important;
    outline-offset: 2px;
}