@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
body{
    margin:0;
    padding:0;
    font-family: "Titillium Web", serif;
    font-size: 14px;
    background-color: #ffffff;
    color:#585858;
}
thead, tbody, tfoot, tr, td, th{
    white-space: normal!important;
}
a{
    color:#333333;
    text-decoration: none;
}
a:hover{
    color:#006ebb;
    text-decoration: underline;
}
h1{
    font-size: 7rem;
    line-height: 6rem;
}
h2{
    font-size: 4.5rem;
    line-height: 4rem;
}
h3{
    font-size: 4rem;
    line-height: 4rem;
}
h4{
    font-size: 3rem;
    line-height: 3rem;
}
h5{
    font-size: 2rem;
    line-height: 2rem;
}
h6{
    font-size: 1.5rem;
    line-height: 2rem;
}
h7{
    font-size: 1.1rem;
    line-height: 1.25rem;
    font-weight: 600;
}

.btn-vermas{
    padding: 3px 25px;
    border: 1px solid #cad6e2;
    color: #6e757b;
    font-size: 0.75rem;
}
.btn-vermas:hover{
    background-color: #bec9d5;
    color: #00395e;
    text-decoration: none;
}
.btn-vermasXL{
    border: 1px solid rgba(0, 57, 94, 0.5);
    padding: 8px 25px 10px;
    font-size:1rem!important;
    line-height: 1.2rem!important;
}

.btn-white{
    border: 1px solid #ffffff;
    color: #ffffff;
}
.border-blau{
    border-color: rgba(0, 110, 187, 0.51) !important;
}
.btn-blau{
    background-color: #006ebb;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    padding: 3px 25px;
}
.btn-blau:hover{
    border: 1px solid #9eb2c5;
    text-decoration: none;
    background-color: rgba(255,255,255,0.75);
    box-shadow: 2px 2px 4px rgba(0, 27, 46, 0.1);
}
.btn-submit{
    border-radius: 1px;
    padding: 2px 35px;
    background-color: #006ebb;
    color: #ffffff;
}
.btn-submit:hover{
    border: 1px solid #cad6e2;
}
.btn-taula{
    background-color: #ffffff!important;
    color:#183153!important;
    border: 1px solid #cad6e2!important;
}
.btn-taula:hover{
    background-color: #183153!important;
    color:#ffffff!important;
    text-decoration: none;
}
.btn-checkout{
    font-size: 1.25rem;
    display: block;
    width: 100%;
    margin-top: 10px;
}
.text-blau{
    color: #006ebb;
}
.bg-blau{
    background-color: #183153;
}
.bg-gris{
    background-color: #f4f4f2;
}
.bg-cel{
    background-color: rgba(0, 110, 187, 0.1);
}

.text-justify {
    text-align: justify;
}
.imgGrid {
    text-align: center;
    border: 1px solid #e2e6e9;
    background-color: #f0f0f0;
    width: 100%;
    aspect-ratio: 1 / 0.7;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.imgGrid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-out;
}

.imgGrid:hover img {
    transform: scale(1.05);
}
.imgBlogPrincipal{
    height:90%
}
.imgNoticiaPrincipal{
    text-align: center;
    background-color: #f0f0f0;
    width: 100%;
    aspect-ratio: 1 / 0.35;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.imgNoticiaPrincipal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-out;
}

.imgEquipo img{
    border:1px solid rgba(0, 110, 187, 0.5);
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease-out;
}
.imgEquipo:hover img {
    transform: scale(1.05);
}
.imgProyecto {
    width: 100%;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease-out;
}

.imgProyecto img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 110, 187, 0.5);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease-out;
}

.imgProyecto:hover {
    transform: scale(1.05);
}
.imgDigital {
    width: 90%;
    position: relative;
    overflow: hidden;
    aspect-ratio: 0.7 / 1;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease-out;
}

.imgDigital img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 110, 187, 0.5);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease-out;
}

.imgDigital:hover {
    transform: scale(1.05);
}
.img-producto{
    background-color: #f2f2f2;
    border-radius:5px;
    align-content: center;
}
.img-producto img {
    mix-blend-mode: multiply;
    margin: 20px auto;
    max-height: 250px;
}

.image-container {
    width: 100%;
    height: 80%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-height: 50vh;
    background-color: rgba(226, 232, 240, 0.25);
    border-radius: 5px;
}
.image-container img {
    transition: transform 0.5s ease-out;
    mix-blend-mode: multiply;
    width:90%
}
.image-container:hover img {
    transform: scale(1.05);
}
.g0U:hover{
    box-shadow: 3px 2px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 110, 187, 0.5);
}
.g01:hover{
    background-color: #eaf3fc;
}
.g02:hover{
    background-color: #fff6e7;
}
.g03:hover{
    background-color: #eae9f7;
}
.g04:hover{
    background-color: #ecf3e1;
}
.g05:hover{
    background-color: #ebf6fa;
}
.g00:hover{
    background-color: #f2f2f2;
}
.g0D img{
    width:100%!important;
}
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*menu */
.nav-item {
    position: relative;
    z-index: 10;
    padding: 0 5px;
}
.nav-item-icons{
    padding: 0;
}

#navegacio {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.7) 100%);
    transition: all 0.3s ease-in-out;
    padding: 5px 0;
    height: 100px;
    line-height: 50px;
}

.navbar-nav .dropdown-menu {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.2));
    border: none;
    border-radius: 0px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    z-index: -1;
}
.dropdown-hover:hover .dropdown-menu {
    z-index: -1;
    opacity: 1;
}

.dropdown-menu{
    width: auto;
    min-width: max-content;
    white-space: nowrap;
}
.dropdown-menu li{
    padding: 0;
    height: 35px;
}
.dropdown-menu a{
    text-decoration: none;
    color: #006ebb;
}
.dropdown-menu a:hover{
    text-decoration: underline;
    color: #004f87;
}
.dropdown-toggle::after{
    color: #006ebb;
    margin: 0 0 -2px 0;
    padding: 0;
}

.dropdownUser::after{
    display: none;
}
.dropdown-hover:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* Eliminar espacio extra al hacer hover */
}

/* STICKY */
.sticky {
    background-color:rgba(255,255,255,0.85)!important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 79, 135, 0.1);
    padding: 3px 0;
    height: 60px!important;
    border-bottom:1px solid rgba(0, 110, 187, 0.15);
}
.sticky .navbar-brand img {
    max-height: 30px;
}
.sticky .nav-link{
    padding:0 10px;
}
.sticky .navbar{
    padding:0;
}


.carousel-control-prev{
    margin-left:-50px!important;
    width: auto;
}
.carousel-control-next{
    margin-right:-50px!important;
    width: auto;
}

/* SLIDERS */
.slider{
    position: relative;
}
.slider-section {
    position: relative;
    overflow: hidden;
}

.sliderImg {
    object-fit: cover;
    width: 100%;
    height: 75vh;
    z-index: 1;
}

.sliderInfo {
    position: absolute;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0));
    backdrop-filter: blur(3px);
    z-index: 2;
    padding: 40px 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.carousel-item > .position-relative {
    width: 100%;
    height: 100%; /* important */
}


.sliderInfo h1,
.sliderInfo h2,
.sliderInfo h6 {
    color: #006ebb;
    opacity: 0;
    animation: slideInLeft 0.8s ease forwards;
    text-shadow: 3px 2px 2px rgba(5, 6, 87, 0.1);
}

.sliderCalidad{
    background-image:url('/frontend/imgs/sliderCalidad.webp');
    height: 75vh;
}
.sliderConoce{
    background-image:url('/frontend/imgs/sliderConoce.webp');
    height: 75vh;
}
.sliderCompliance{
    background-image:url('/frontend/imgs/sliderCompliance.webp');
    height: 75vh;
}
.sliderSalud{
    background-image:url('/frontend/imgs/sliderSalud.webp');
    height: 75vh;
}

.sliderEquipo{
    background-image:url('/frontend/imgs/sliderEquipo.webp');
    height: 75vh;
}
.sliderSostenibilidad{
    background-image:url('/frontend/imgs/sliderSostenibilidad.webp');
    height: 75vh;
}
.sliderProyectos{
    background-image:url('/frontend/imgs/sliderProyectos.webp');
    height: 75vh;
}
.sliderHitos{
    background-image:url('/frontend/imgs/sliderHitos.webp');
    height: 75vh;
}
.sliderContacto{
    background-image:url('/frontend/imgs/sliderContacto.webp');
    height: 75vh;
}
.sliderDescargas{
    background-image:url('/frontend/imgs/sliderDescargas.webp');
    height: 75vh;
}
.sliderUTM{
    background-image:url('/frontend/imgs/sliderUTM.webp') ;
    background-position: bottom;
    height: 75vh;
}
.sliderProveedores{
    background-image:url('/frontend/imgs/sliderProveedor.webp') ;
    background-position: bottom;
    height: 75vh;
}
.sliderInfoUTM {
    background: linear-gradient(130deg, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0));
    width: 100%;
    position: absolute;
    padding: 40px 0;
    z-index: 2;
}
.sliderUTM video{
    margin-top:-15% ;
}
.sliderNormativa{
    background-image:url('/frontend/imgs/sliderNormativa.webp') ;
    background-position: center;
    height: 75vh;
}
.sliderBim{
    background-image:url('/frontend/imgs/sliderBim.webp') ;
    background-position: center;
    height: 75vh;
}
.sliderSatc{
    background-image:url('/frontend/imgs/sliderSatc.webp') ;
    background-position: top;
    height: 75vh;
}
.sliderDigital{
    background-image:url('/frontend/imgs/sliderDigital.webp') ;
    background-position: center;
    height: 75vh;
}
.fonsAreaTecnica{
    background-image:url('/frontend/imgs/fonsAreaTecnica.webp') ;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.fonsEquipo{
    background-image:url('/frontend/imgs/fonsEquipo.webp') ;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* FOOTER */
footer{
    background-color: #e2e8f0;
    font-size: 0.75rem;
    line-height: 1rem;
    color:#183153;
}
footer li{
    margin: 10px 0;
}
footer a{
    color:#183153;
}
footer .xxss a:hover{
    text-decoration: none;
}
#btnSubir{
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
}
.btnUp{
    background-color: #183153;
    color:#ffffff;
}
.btnUp:hover{
    color: #006ebb;
    border: 1px solid rgba(0, 110, 187, 0.51);
    background-color: rgba(0, 79, 135, 0.25);
}

.iconsBase{
    background: linear-gradient(130deg, rgba(213, 230, 240, 1), rgba(153, 194, 221, 1));
    padding: 60px;
    color: #006ebb;
    text-align: center;
    min-height:490px;
}
.iconsBase i{
    font-size: 8rem;
    margin:0 auto 50px;
}
.iconDark{
    font-size: 6rem;
    margin:0 auto 50px;
    color: #183153;
}
.fonsShowroom{
    background-image:url('/frontend/imgs/fotoConoceI.webp');
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 500px;
}
.pastillaShowroom{
    margin-top: -200px;
    z-index:9989;
    background-color: #dadada;
    margin-bottom:100px;
}
.cartaGines{
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
}

.iconBlue{
    border-radius: 50%;
    background-color: #006ebb;
    color: #ffffff;
    margin: 30px auto;
    text-align: center;
    font-size: 70px;
    line-height: 90px;
    width: 90px;
    height: 90px;
}

/* HITOS */
.hitosLinesR{
    background-image: url("/frontend/imgs/hitosLinesR.png");
    background-position: top center;
    background-repeat: no-repeat;
    color:#006ebb;
}
.hitosLinesL{
    background-image: url("/frontend/imgs/hitosLinesL.png");
    background-position: top center;
    background-repeat: no-repeat;
    color:#006ebb;
}
.indexHitos{
    position: fixed;
    top: 30%;
    right: 0;
    border-radius: 5px 0 0 5px;
    background: linear-gradient(to top, rgba(0, 110, 187, 0.8), rgba(0, 110, 187, 1));
    font-size: 0.75rem;
    text-align: right;
    color: #ffffff;
    padding:10px 10px 0 5px;
}
.active-year {
    font-weight: bold;
    font-size: 1rem;
    color: #183153;
}
/* FORMS */
.col-form-label{
    color:#006ebb;
}
.form-control{
    border-color: #3169a9;
    background-color: #f9fdff;
}
.form-select{
    border-color: rgba(49, 105, 169, 0.05);
    background-color: rgba(49, 105, 169, 0.1);
    margin:3px;
    padding:2px 40px 2px 10px;
    width: auto;
    font-size: 12px;
}
.border-dark{
    border-color: rgba(0, 110, 187, 0.5) !important;
}
.fitxaDescargas{
    display: table;
    border-radius: 5px;
    border: 1px solid rgba(0, 110, 187, 0.5);
    background-color:  rgba(0, 110, 187, 0.1);
    color: #003c66;
    padding: 5px 5px 5px 15px;
    margin: 20px auto;
    font-size: 0.9rem;
    line-height: 0.9rem;
}

#carouselProducto{
    display: grid;
    background-color: #f2f2f2;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 0.7;
}
#carouselProducto img{
    margin:auto;
    max-height: 750px;
}
#carouselProducto .carousel-inner{
    mix-blend-mode: multiply;
    align-items: center;
    justify-content: center;
}
#carouselProducto .carousel-item{
    height: 100%;
    width: 100%;
    align-content: center;
    text-align: center;
}
#carouselProducto .carousel-control-prev {
    margin-left: 10px!important;
}
#carouselProducto .carousel-control-next {
    margin-right: 10px!important;
}

.blockXXSS{
    padding: 50px 0;
    border: 1px solid #cad6e2;
    border-radius: 10px;
}
.items{
    display: table;
    background-color: #003c66;
    color: #ffffff;
    padding: 9px 20px;
    font-size: 1.1rem;
}
.btn-extras{
    color: #838d9f;
    width: 120px;
    border-radius: 5px;
    border: 1px solid #cad6e2;
    margin:5px;
    font-size: 0.75rem;
}
.btn-extras-xl{
    width: 140px;
}
.btn-extras .colF{
    float: left;
    width: 30%;
    text-align: center;
}
.btn-extras .colR{
    float: left;
    width: 70%;
    font-weight: bold;
    line-height: 0.9rem;
    padding: 0;
    text-align: right;
    min-height: 28px;
}
.btn-extras:hover{
    border: 1px solid #003c66;
}

.fonsUTM{
    background-image: url("/frontend/imgs/fonsUTM.webp");
    background-position: top left;
    background-repeat: no-repeat;
    background-size: contain;
    color: #ffffff;
}
.carousel-item-utm img {
    height: 150px;
    width: 24.2%;
    object-fit: cover;
    margin: 2px;
    padding: 0;
    border:1px solid #f0f0f0;
}
#carouselUTM{
    position: relative;
    display: table;
    padding:-30px;
    width: 90%;
    margin:80px auto;
}
#carouselUTM .carousel-control-prev{
    margin-left:-30px!important;
    width: auto
}
#carouselUTM .carousel-control-next{
    margin-right:-30px!important;
    width: auto;
}


/* DATATABLES */
thead, tbody, tfoot, tr, td, th{
    border-color: rgba(49, 105, 169, 0.5);
    color:#183153!important;
    white-space: nowrap;
}
.pagination{
    --bs-pagination-active-bg: #003c66;
    --bs-pagination-active-border-color: #006ebb;
    color:#006ebb;
}
.page-link{
    color:#183153;
}
.card{
    background-color: #ffffff;
    border: none;
}
#productos-table_wrapper .table{
    background-color: #ffffff!important;
    --bs-table-bg:#ffffff!important;
}
table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>*{
    box-shadow: inset 0 0 0 9999px rgba(176, 203, 217, 0.1);
}
/* Estilo para la fila desplegable */
tr[data-dt-row] {
    border-top: none !important;

}
.table-light{
    background-color: transparent;
}
.table-light > :not(caption) > * > *{
    background-color: transparent;
}
/* Eliminar el borde de la celda para que se vea más limpio */
tr[data-dt-row] td {
    padding: 0;
    margin:0;
}

tr[data-dt-row] td > div {
    background-color: #c8dae4!important;
    padding: 0;
    margin:0;
    color: #183153!important;
}
#ordersTable tr[data-dt-row] td > div{
    background-color: #ffffff!important;
}
#ordersTable{

}
tr[data-dt-row] a.btn {
    margin:0 5px;
}
tr[data-dt-row] td {
    transition: all 0.3s ease-in-out;
}

.quantity-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    padding: 0;
    margin: 0 auto;
}

.quantity-input {
    width: 40px;
    text-align: right;
    border-color: rgba(49, 105, 169, 0.5);
    padding: 3px 0 2px;
    margin: 0;
}
.code-input {
    text-align: left!important;
    border-color: rgba(49, 105, 169, 0.25);
    border-radius: 2px;
    background-color: #ffffff;
    padding: 3px 10px;
    margin: 0;
}

.increment, .decrement {
    width: 30px;
}

.certificats{
    border-radius: 0;
}
.certificats a{
    border-left: 5px solid #99c2dd;
    border-bottom: 1px solid #f0f0f0;
    padding:10px 20px;
    background-color: rgba(49, 105, 169, 0.04);
    margin-bottom: 5px;
    line-height: 1rem;
    min-height: 55px;
    display: flex;
    justify-content: left;
    align-items: center;
}
.certificats a:hover {
    border-left: 5px solid #006ebb;
    background-color: rgba(49, 105, 169, 0.10);
    text-decoration: none;
    background: linear-gradient(to left, rgba(49, 105, 169, 0.1), rgba(49, 105, 169, 0.05));
}
.fonsCertificat{
    background-image: url("/frontend/imgs/normativas-y-certificaciones.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(49, 105, 169, 0.1);
    min-height: 250px;
    margin-top: 100px;
    border-top:40px solid rgba(0, 110, 187, 0.05);
    border-bottom:40px solid rgba(0, 110, 187, 0.05);
}

.cartTotals{
    background-color: rgba(49, 105, 169, 0.10);
    padding: 40px;
    margin-top: 10px;
}
.cartAddRef{
    background-color: rgba(49, 105, 169, 0.05);
    padding: 30px 40px 33px;
}
.cartZone{
    position: relative;
}
.cartCount{
    border-radius: 50%;
    position: absolute;
    top:20%;
    right: 0;
    width: 15px;
    height: 15px;
    justify-content: center;
    align-content: center;
    text-align: center;
    color: #ffffff!important;
    background-color: #006ebb;
    font-size: 9px;
    line-height: 9px;
    font-weight: 600;
    transition: transform 0.3s ease-in-out;
    display: inline-block;
}
@keyframes cart-zoom {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}
.cartCount.animated {
    background-color: #ff8b00;
    animation: cart-zoom 0.5s ease-in-out;
}

.qtyList{
    border-radius: 50%;
    width: 15px;
    height: 15px;
    justify-content: center;
    align-content: center;
    text-align: center;
    color: #ffffff!important;
    background-color: #006ebb;
    font-size: 10px;
    line-height: 10px;
    font-weight: 600;
    display: inline-block;
}
.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.address{
    border-radius: 10px;
    border: 1px solid rgba(0, 57, 94, 0.2);
    padding: 20px;
    background-color:#ffffff;
}
.addressUser{
    border-radius: 10px;
    border: 1px solid rgba(0, 57, 94, 0.2);
    padding: 20px;
    background-color:#ffffff;
}
.address:hover{
    background-color:#f9f9f9;
    border: 1px solid rgba(0, 57, 94, 0.5);
    cursor: pointer;
}
.addressSelect{
    border: 1px solid rgb(0, 110, 187);
    background: linear-gradient(170deg, rgba(0, 110, 187, 0), rgba(0, 110, 187, 0.05));
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
}
.address h5{
    color: #ffffff;
}
.addressSelect h5{
    color: #006ebb!important;
}
.addressCard{
    border-radius: 10px;
    padding: 20px;
    border: 1px solid rgb(0, 110, 187);
    background: linear-gradient(170deg, rgba(0, 110, 187, 0), rgba(0, 110, 187, 0.05));
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
}
.lineHeightSlim{
    line-height: 1rem;
}
.infoBlog{
    position: absolute;
    top: 20px;
    left: 30px;
    background-color: #ffffff;
    padding:3px  10px;
    z-index: 9;
    font-size: 0.8rem;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination a {
    padding: 10px 20px;
    margin: 0 5px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.pagination a:hover {
    background-color: #006ebb;
}

.gallery-container {
    display: flex;
    align-items: center;
    width: 100vw;
    height: 450px;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    padding: 4px 0;
}
.gallery {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100vw;
    white-space: nowrap;
    transition: transform 0.1s ease-out;
}

.gallery img {
    height: 100%;
    width: auto;
    object-fit: cover;
    flex-shrink: 0;
    margin: 2px;
    border-radius: 4px;

}

.bienvenidoHidroten{
    background: linear-gradient(170deg, #006ebb, #183153);
    padding: 300px 10px;
    text-align: center;
    align-content: center;
    color: #ffffff;
}
.imgDestacatHome{
    min-height: 300px;
    display: block;
    align-content: center;
}

.zoom-trigger{
    cursor: zoom-in;
}
.llegenda{
    display: table;
    width: auto;
    float: right;
    background-color: rgba(0, 86, 179, 0.05);
    border-radius: 5px;
    font-size: 11px;
    padding: 5px 10px;
    color: rgba(0, 61, 129, 0.7);
    margin: 10px;
}

/*SEARCH PAGE */
.ais-InstantSearch H1{
    color: rgba(24, 49, 83, 0.5);
    text-transform: uppercase;
    font-size: 60px;
    line-height: 60px;
}
.ais-InstantSearch li{
    list-style: none;
}
.accordion{
    --bs-accordion-color: #006ebb!important;
    --bs-accordion-bg: transparent!important;
    --bs-accordion-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease;
    --bs-accordion-border-color: none!important;
    --bs-accordion-border-width: 1px;
    /* --bs-accordion-border-radius: .375rem; */
    /* --bs-accordion-inner-border-radius: calc(.375rem - 1px); */
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: brown!important;
    --bs-accordion-btn-bg: yellow!important;
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform .2s ease-in-out;
    --bs-accordion-btn-focus-border-color: rgba(196, 184, 150, .25)!important;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(196, 184, 150, .25);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: #183153!important;
    --bs-accordion-active-bg: transparent!important;
}
.accordion-body{
    padding: 0;
}
.accordion-item{
    border-top: 1px solid #183153!important;
    border-radius: 0!important;
}
.accordion:last-child{
    border-bottom: 1px solid #183153!important;
}
.collapsed{
    color: #183153!important;
    background-color: transparent!important;
}
.accordion-button{
    padding-left: 0!important;
    padding-right: 0!important;
}
.accordion-button:focus{
    box-shadow: none!important;
}
.ais-RefinementList-list, .ais-NumericMenu-list{
    padding: 0;
    margin: 0 0 20px 0;
}
.ais-RefinementList-count{
    text-align: center;
    width: 16px;
    height: 16px;
    padding: 0px 2px!important;
    margin: 0 0 0 10px!important;
    border:0px solid #99c2dd!important;
    background-color: transparent!important;
    color:#666!important;
    font-size: 10px;
}
.ais-ClearRefinements-button{
    padding: 3px 25px;
    border: 1px solid #cad6e2;
    color: #6e757b;
    font-size: 0.75rem;
    border-radius: 5px;
}
.ais-ClearRefinements-button:hover{
    color:#006ebb!important;
    background-color: rgba(0, 110, 187, 0.1);
;
}
.ais-ClearRefinements-button:disabled[disabled]{
    background-color: rgba(153, 194, 221, 0.1);
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    padding: 3px 25px;
    border: none;
    border-radius: 3px;

}
.ais-SearchBox{
    display: block;
}
.ais-SearchBox-form{
    position: relative;
}
.ais-SearchBox-form:before{
    background:transparent url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23797979%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%3E%3C%2Fline%3E%3C%2Fsvg%3E") repeat scroll 0 0!important;
    fill:#99c2dd!important;
    height: 2.5rem!important;
    width: 2.5rem!important;
    top: 37%!important;
    left: 1.5rem!important;
    background-size: 2.5rem!important;
    color:#006ebb!important;
}

.ais-SearchBox-input{
    padding:10px 20px 10px 80px!important;
    display: table;
    color: #99c2dd!important;
    background-color: rgba(0, 86, 179, 0.1) !important;
    font-size: 3rem!important;
    font-weight: 300;
    border: none!important;
    border-radius: 0px!important;
    box-shadow: none!important;
    caret-color: #99c2dd!important;
    width: 100%;
    margin: 0!important;
}
.ais-SearchBox-input:focus{
    border: none!important;
    background-color: rgba(0, 86, 179, 0.05) !important;

}
.ais-SearchBox-input::placeholder{
    color: #99c2dd!important;
}
.ais-ClearRefinements-button:hover{
    /*background-image:linear-gradient(-180deg,#fff,#f0ede8)!important*/
}
#ais-HitsPerPage{
    display: table;
    width: auto;
}
.ais-HitsPerPage-select{
    background-color: rgba(24, 49, 83, 0.06);
    padding:0 10px;
    border: 1px solid rgba(0, 86, 179, 0.05);
    border-radius: 2px;
    text-decoration: none;
    color: #006ebb;
}
.ais-CurrentRefinements-item{
    padding: 1px 0 0 4px;
}
.ais-CurrentRefinements-delete{
    color: #f0ede8!important;
    background-color: #ffffff;
    border: none;
}
.ais-CurrentRefinements-delete:hover{
    color: #183153;
    font-weight: bold;
}
.ais-RefinementList-checkbox{
    box-shadow:inset 0 1px 4px 0 rgba(128,119,105,.3)!important;
    margin:6px;
    width:15px;
    height: 15px;
    vertical-align: top;
}
.ais-NumericMenu-radio{
    /*box-shadow:inset 0 1px 4px 0 rgba(128,119,105,.3)!important;*/
    margin:3px 6px 6px 6px;
    width:15px;
    height: 15px;
    vertical-align: top;
}
.ais-RefinementList-labelText{
    line-height: 2;
}
.ais-RefinementList-item--selected .ais-RefinementList-checkbox{
    color: #006ebb!important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23006ebb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>")!important;
}
.ais-Highlight-highlighted, .ais-Snippet-highlighted{
    background-color: #f0ece8!important;
    color: #006ebb!important;
}
.ais-CurrentRefinements-list{
    display: block!important;
}
.ais-CurrentRefinements-label{
    font-style: italic!important;
    margin-right: 5px!important;
    color: #aaaaaa;
}
.ais-CurrentRefinements-item {
    float: none!important;
    clear: both;
    line-height: 1rem!important;
    margin: 1px!important;
}
.ais-CurrentRefinements-delete{
    color: #006ebb !important;
    margin-right: 10px;
}
.ais-CurrentRefinements-categoryLabel {
    margin-top: 4px;
}
.ais-ClearRefinements-button:disabled[disabled], .ais-GeoSearch-redo--disabled, .ais-GeoSearch-reset--disabled, .ais-InfiniteHits-loadMore:disabled[disabled], .ais-InfiniteHits-loadPrevious:disabled[disabled], .ais-Pagination-item--disabled .ais-Pagination-link, .ais-VoiceSearch-button:disabled
{
    color:#c9c9c9!important;
}
.ais-SearchBox-form:before {
    background: transparent url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235a5e9a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%3E%3C%2Fline%3E%3C%2Fsvg%3E") repeat scroll 0 0;
    content: "";
    height: 1rem;
    left: 1rem;
    margin-top: -.5rem;
    position: absolute;
    top: 50%;
    width: 1rem;
}
.ais-SearchBox-submit, .ais-SearchBox-reset{
    display: none;
}

.ais-Pagination-list {
    display: flex;
    justify-content: end;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.25rem;
}

.ais-Pagination-item {
    display: inline-block;
}

.ais-Pagination-link {
    display: inline-block;
    padding: 0 10px;
    border: 1px solid rgba(0, 86, 179, 0.05);
    border-radius: 2px;
    text-decoration: none;
    color: #006ebb;
    background-color: rgba(24, 49, 83, 0.06);
    transition: background-color 0.2s, color 0.2s;
}

.ais-Pagination-item--selected .ais-Pagination-link {
    color: #ffffff;
    font-weight: bold;
    cursor: default;
}

.ais-Pagination-link:hover {
    background-color: rgba(220, 235, 255, 0.27)!important;
    color: #183153;
}

.ais-Pagination-item--disabled .ais-Pagination-link {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.ais-Pagination-item--selected .ais-Pagination-link{
    box-shadow: inset 0 1px 4px 0 rgba(24, 49, 83, 0.1) !important;
    background-color: #006ebb!important;
}

.observacions{
    border:1px solid rgba(0, 110, 187, 0.25);
}
.museohistorico{
    position: absolute;
    bottom: 5px;
    right: 10px;
    color: #ffffff;
    font-size: 10px;
    font-style: italic;
}
.miniFoto img{
    border: 1px solid rgba(0, 110, 187, 0.1);
    border-radius: 3px;
    margin: 5px;
    padding: 0;
    float: left;
    height: 40px;
}
.accordion:last-child{
    border-bottom: none!important;
}
.accordion-item{
    border-top:  1px solid rgba(0, 110, 187, 0.1);
}
#accordionContacto .accordion-button{
    text-align: right!important;
    padding: 0;
    font-size: inherit;
}
#accordionContacto .accordion-button::after{
    opacity: 0.25;
    padding-right: 25px;
}
#accordionContacto .accordion-button{
    display: table;
    color: #99c2dd;
}
.textLegal{
    border-radius: 5px;
    background-color: rgba(226, 232, 240, 0.35);
    background-image: url("/frontend/imgs/asterisc.png");
    background-repeat: no-repeat;
    background-position: top right;
}
.pastillaBlanca{
    border-radius: 15px;
    background-color: white;
    padding: 20px;
    margin:20px;
    color: #004f87;
    font-weight: bold;
}

.slide-enter-start { transform: translateX(100%); opacity: 0; }
.slide-enter-end { transform: translateX(0); opacity: 1; transition: transform 0.7s ease-out, opacity 0.7s ease-out; }

.slide-leave-start { transform: translateX(0); opacity: 1; }
.slide-leave-end { transform: translateX(-100%); opacity: 0; transition: transform 0.7s ease-in, opacity 0.7s ease-in; }

.video-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;   /* ampliem més que el contenidor */
    height: 150%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: 0;
}

/*nadal2025*/
.custom-popup {
    width: 930px;
    height: 400px;
    border: 15px solid #fff;
    border-radius: 0;
    overflow: hidden;
}

.modal-dialog {
    max-width: 950px !important;
}

.modal-backdrop.show {
    z-index: 1000 !important;
}

#promoModal {
    z-index: 2100 !important;
}

.cta-btn{
    position: absolute;
    z-index: 10;
    display: table;
}

/* Posicions horitzontals */
.cta-btn.top{
    top: 20%;
}
.cta-btn.bottom{
    bottom: 20%;
}
.cta-btn.left{
    left: 15%;
}

.cta-btn.center{
    left: 50%;
    transform: translateX(-50%);
}

.cta-btn.right{
    right: 5%;
}
.carousel-indicators [data-bs-target]{
    background-color:#006ebb;
}
.separador-slider {
    background: linear-gradient(183deg, #f0f6fa 0%, #ffffff 50%);
    min-height: 100px;
}