:root {
    --colorCabecera: #00577F;
    --colorTextoCabecera: #fff;
    --colorCorporativo: #00577F;
    --colorFondo: #fff;
    --colorTexto: #333;
    --colorTextoContraste: #e9d228;
    --colorBorde: #111;
    --colorDestacado: #00577F;
    --colorTextoBoton: #fff;
    --colorIcono: #00577F;
    --colorBarraBusqueda: #337999;
    --colorBarraBusquedaTexto: #fff;
    --colorBotonLista: #00577F;
    --colorBotonTextoLista: #fff;
}

@font-face {
    font-family: 'montserrat-regular';
    src: url('../fonts/montserrat-regular.ttf') format('truetype');
}

body {
    font-family: 'montserrat-regular', sans-serif
}

.hero-slider-wrapper .hero-image img {
    max-height: 600px;
}

.hero-slider-wrapper .hero-image {
    max-height: 600px;
}

.customer-support-text .text p {
    color: var(--colorTextoCabecera);
}

cart-icon .small-cart-trigger.active {
    background-color: var(--colorFondo);
    color: var(--colorTextoBoton);
}

.header-cart-icon .small-cart-trigger {
    background: var(--colorCorporativo);
    color: var(--colorFondo);
}

    .header-cart-icon .small-cart-trigger:hover, .header-cart-icon .small-cart-trigger.active {
        background: var(--colorFondo);
        color: var(--colorCorporativo);
    }

        .header-cart-icon .small-cart-trigger .cart-counter, .header-cart-icon .small-cart-trigger.active .cart-counter {
            background-color: var(--colorFondo);
        }

        .header-cart-icon .small-cart-trigger:hover .cart-counter, .header-cart-icon .small-cart-trigger.active .cart-counter {
            color: var(--colorFondo);
            background-color: var(--colorCorporativo);
        }

.home-icon {
    margin: 10px;
    padding: 10px;
    border: 3px solid #ccc;
    border-radius: 10px;
    text-align: center;
    max-width: 230px;
}

    .home-icon .icon {
        font-size: 3em;
        color: var(--colorCorporativo)
    }

    .home-icon .title {
        font-size: 1.2em;
        padding-top: 10px;
        padding-bottom: 20px;
        color: var(--colorCorporativo);
        margin-top: 5px
    }

    .home-icon .description {
        font-size: 1.1em;
        line-height: 1.5em;
        padding: 5px;
    }
/*.selector-body {
    display: flex;
}

.columna {
    text-align: center;
    width: 33.33%;
}

.titulo-columna {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.opcion-graduacion {
    display: block;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
}

    .opcion-graduacion.seleccionado {
        background-color: #f0f0f0;*/ /* o el color que quieras para la opción seleccionada */
/*}*/

/*.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
      background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    .dropdown-content .columna {
        float: left;
        width: 50%;
        padding: 10px;
    }

    .dropdown-content span {
        display: block;
        padding: 5px;
        cursor: pointer;
    }

        .dropdown-content span:hover {
            background-color: #f1f1f1
        }

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}*/
.dropdown-menu.show {
    inset: 0px -45px auto -80px !important;
}

.dropdown-item.active {
    background-color: #0d6efd; /* Mantén el color azul de Bootstrap */
    color: white;
    border-radius: 5px; /* Añade bordes redondeados */
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); /* Añade una sombra sutil */
    transform: scale(1.02); /* Añade un ligero efecto de escala */
    transition: all 0.2s ease; /* Añade una transición suave */
}

.dropdown-menu,
.dropdown-toggle {
    border-radius: 10px; /* Ajusta el valor para controlar la redondez */
}

.dropdown-menu {
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Ajusta los valores para controlar la sombra */
}

.dropdown-toggle {
    box-shadow: 0px 0px 5px rgba(0, 0, 255, 0.2);
    width: 100%;
}

.dropdown-menu {
    padding: 15px; /* Ajusta el valor para controlar el espacio interno */
}

.dropdown-item {
    margin-bottom: 5px; /* Ajusta el valor para controlar el espacio entre items */
    cursor: pointer;
    text-align: center;
}

.dropdown-header {
    text-align: center;
}

.dropdown-menu {
    font-family: 'montserrat-regular', sans-serif
}

.dropdown-item:hover {
    background-color: #f0f0f0; /* Cambia el color de fondo al pasar el mouse */
    transform: scale(1.02); /* Añade un ligero efecto de escala */
    transition: all 0.2s ease; /* Añade una transición suave */
}

.dropdown-item.active:hover {
    background-color: mediumaquamarine; /* Cambia el color de fondo al pasar el mouse */
    transform: scale(1.02); /* Añade un ligero efecto de escala */
    transition: all 0.2s ease; /* Añade una transición suave */
}

.dropdown-divider {
    border-top-color: #eee; /* Cambia el color del divider */
}

.dropdown-menu {
    background-color: #f8f9fa; /* Cambia el color de fondo */
}

.dropdown-header {
    color: #6c757d; /* Cambia el color del header */
}

.dropdown-menu {
    /*opacity: 0;*/
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.show > .dropdown-menu {
    opacity: 1;
    transform: translateY(0px);
}

.titulo-graduacion {
    /* Aquí van los estilos que quieras aplicar */
    font-family: 'montserrat-regular', sans-serif;
    font-weight: 600;
    color: #514f5E;
    /* ... otros estilos ... */
}

.d-flex > div {
    flex-grow: 1;
}



/*ARREGLOS CARRUSEL HOME*/
p.slider-title {
    /*width: 213px;*/
    padding-left: 11px;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    color: rgb(255, 255, 255);
    width: max-content;
    background-color: transparent;
    /*-webkit-box-shadow: 3px 7px 5px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 7px 5px -4px rgba(0,0,0,0.75);
    box-shadow: 3px 7px 5px -4px rgba(0,0,0,0.75);*/
}

.ht-slick-slider {
    width: 100%;
}

.slick-track {
    width: 100%;
    margin: 0 ; /* Si hay márgenes automáticos */
}

.slick-slide {
    width: 100%; /* Asegúrate de que cada slide ocupe el ancho calculado por Slick */
    margin: 0 ;
    padding: 0;
}

.container-carrusel {
    display: flex;
    justify-content: center;
    min-height: auto;
}

@media (min-width: 576px) {
    .container-carrusel {
        min-height: 50vh;
    }
}

@media (min-width: 768px) {
    .container-carrusel {
        min-height: 70vh;
    }
}

@media (min-width: 992px) {
    .container-carrusel {
        min-height: 90vh;
    }
}

@media (min-width: 1200px) {
    .container-carrusel {
        min-height: 100vh;
    }
}

.custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.custom-control-label {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0;
    vertical-align: top;
    cursor: pointer;
}

    .custom-control-label::before {
        position: absolute;
        top: 0.25rem;
        left: 0;
        display: block;
        width: 1rem;
        height: 1rem;
        pointer-events: none;
        content: "";
        background-color: #fff;
        border: #adb5bd solid 1px;
        border-radius: 0.25rem;
    }

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #0d6efd;
    background-color: #0d6efd;
}

.custom-control-input:checked ~ .custom-control-label::after {
    position: absolute;
    top: 0.50rem;
    left: 0.25rem;
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    content: "";
    background-color: #fff;
    border-radius: 50%;
}

.reset-dropdowns i {
    transition: transform 0.5s ease;
    display: inline-block; /* Agregar display: inline-block; */
}

.reset-dropdowns:hover i {
    transform: rotate(360deg);
}

.reset-dropdowns {
    padding: 0.2rem 0.5rem;
}

/*.single-slider-product-wrapper {
    border: 1px solid var(--colorCabecera);
    border-radius: 5px
}

    .single-slider-product-wrapper:hover {
        box-shadow: 0 0 1px 2px var(--colorBorde)
    }*/

.single-slider-product--list-view,
.grid-view-product {
    background-color: var(--colorFondo);
    border: 0.5px solid #ededed;
    border-radius: 5px;
    transition: box-shadow 0.3s ease;
}

    .single-slider-product--list-view:hover,
    .grid-view-product:hover {
        box-shadow: 0 0 1px 2px var(--colorCorporativo);
    }

.headertop-dropdown-container .header-top-single-dropdown a:hover {
    color: #e9d228;
}

.single-slider-product--list-view {
    padding: 10px !important;
}

.single-slider-product__image {
    position: relative;
    /*min-height: 250px;*/
    text-align: center;
    overflow: hidden;
    min-width: 135px;
    /*border: 1px solid #f0f0f0;*/
    /*border-bottom: 0;*/
}

.single-slider-product-wrapper.box {
    padding: 0 10px;
}
.product-single-row-slider-wrapper .slick-slide {
    max-width: 200px;
    margin-top:5px;
}
.item-articulo-columna {
    /* Otros estilos para la columna */
    display: flex; /* O grid si estás usando grid layout */
    flex-direction: column; /* Para que la imagen y el contenido se apilen */
}

.single-slider-product__image-container {
    height: 250px; /* Establece la altura fija deseada (igual a tu data-maxheight) */
    overflow: hidden; /* Recorta cualquier parte de la imagen que exceda el contenedor */
    display: flex; /* Para centrar la imagen dentro */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

    .single-slider-product__image-container a {
        display: block; /* Asegura que el enlace ocupe todo el contenedor */
        width: 100%;
        height: 100%;
        display: flex; /* Para centrar la imagen dentro del enlace también (opcional) */
        justify-content: center;
        align-items: center;
    }

    .single-slider-product__image-container img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* Ajusta la imagen dentro del contenedor manteniendo su relación de aspecto */
        /* object-fit: cover; /* Otra opción: rellena el contenedor recortando la imagen si es necesario */
    }

.single-slider-product__content {
    /* Estilos para el contenido debajo de la imagen */
    flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuye el espacio entre el título y el precio/carrito */
    padding: 10px; /* Añade un poco de espacio alrededor del texto */
}
    .single-slider-product__content single-slider-product__content,.single-slider-product--list-view__content {
        /* Estilos para el contenido debajo de la imagen */
        flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
        display: flex;
        flex-direction: unset;
        justify-content: space-between; /* Distribuye el espacio entre el título y el precio/carrito */
        padding: 10px; /* Añade un poco de espacio alrededor del texto */
    }

.product-title {
    margin-bottom: 5px;
}

.product-price {
    margin-top: auto; /* Empuja el precio hacia abajo */
}

.cart-icon {
    right: 0px;
    bottom: 25px;
}
.item-articulo-columna {
    /* Otros estilos */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transiciones para la elevación y la sombra */
    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);*/ /* Sombra sutil por defecto */
    padding:5px;
}

    .item-articulo-columna:hover {
        transform: translateY(-5px); /* Desplaza el elemento ligeramente hacia arriba */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada al hacer hover */
    }