/**************************************************************
          CMS Pages Styles
***************************************************************/
#cms #center_column .block-cms {
  padding-bottom: 20px; }
#cms #center_column h1 {
  margin-bottom: 0px; }
#cms #center_column h3 {
  font-size: 16px;
  border-bottom: none;
  margin: 0;
  padding: 0 0 17px 0; }
#cms #center_column p {
  line-height: 18px; }
#cms #center_column .list-1 li {
  padding: 4px 0 6px 0;
  font-weight: bold;
  color: #46a74e;
  border-top: 1px solid #d6d4d4; }
  #cms #center_column .list-1 li:first-child {
    border: none; }
  #cms #center_column .list-1 li em {
    font-size: 20px;
    line-height: 20px;
    padding-right: 15px;
    vertical-align: -2px; }
#cms #center_column img {
  margin: 0px 0 0px;
  max-width: 100%;
  height: auto; }
#cms #center_column .testimonials {
  border: 1px solid;
  border-color: #dfdede #d2d0d0 #b0afaf #d2d0d0;
  margin: 4px 0 13px 0;
  position: relative; }
  #cms #center_column .testimonials .inner {
    border: 1px solid #fff;
    padding: 19px 18px 11px 18px;
    background: #fbfbfb;
    background: -moz-linear-gradient(top, #fbfbfb 0%, #fefefe 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbfbfb), color-stop(100%, #fefefe));
    background: -webkit-linear-gradient(top, #fbfbfb 0%, #fefefe 100%);
    background: -o-linear-gradient(top, #fbfbfb 0%, #fefefe 100%);
    background: -ms-linear-gradient(top, #fbfbfb 0%, #fefefe 100%);
    background: linear-gradient(to bottom, #fbfbfb 0%, #fefefe 100%); }
    #cms #center_column .testimonials .inner span {
      text-indent: -5000px;
      display: inline-block;
      width: 20px;
      height: 15px; }
      #cms #center_column .testimonials .inner span.before {
        background: url(../img/bl-before-bg.png) no-repeat;
        margin-right: 8px; }
      #cms #center_column .testimonials .inner span.after {
        background: url(../img/bl-after-bg.png) no-repeat;
        margin-left: 8px; }
  #cms #center_column .testimonials:after {
    content: ".";
    display: block;
    text-indent: -5000px;
    position: absolute;
    bottom: -16px;
    left: 21px;
    width: 15px;
    height: 16px;
    background: url(../img/testimon-after.gif) no-repeat; }
  #cms #center_column .testimonials + p {
    padding-left: 45px;
    margin-bottom: 18px; }
#cms #center_column p.bottom-indent {
  margin-bottom: 18px; }
#cms #center_column #admin-action-cms {
  background: none repeat 0 0 #F6F6F6;
  border: 1px solid #d2d0d0;
  padding: 10px; }
  #cms #center_column #admin-action-cms p {
    margin: 0; }
    #cms #center_column #admin-action-cms p span {
      display: block;
      padding-bottom: 10px;
      font-size: 14px;
      font-weight: bold;
      color: #333; }
    #cms #center_column #admin-action-cms p .button {
      font: 700 17px/21px Arial, Helvetica, sans-serif;
      padding: 0;
      border: 1px solid;
      padding: 10px 14px;
      display: inline-block; }
      #cms #center_column #admin-action-cms p .button.publish_button {
        color: #fff;
        text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
        border-color: #0079b6 #006fa8 #012740 #006fa8;
        background: #009ad0;
        background: -moz-linear-gradient(top, #009ad0 0%, #007ab7 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #009ad0), color-stop(100%, #007ab7));
        background: -webkit-linear-gradient(top, #009ad0 0%, #007ab7 100%);
        background: -o-linear-gradient(top, #009ad0 0%, #007ab7 100%);
        background: -ms-linear-gradient(top, #009ad0 0%, #007ab7 100%);
        background: linear-gradient(to bottom, #009ad0 0%, #007ab7 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009ad0', endColorstr='#007ab7',GradientType=0); }
        #cms #center_column #admin-action-cms p .button.publish_button:hover {
          border-color: #01314e #004b74 #0079b6 #004b74;
          filter: none;
          background: #0084bf; }
      #cms #center_column #admin-action-cms p .button.lnk_view {
        color: #333;
        text-shadow: 1px 1px white;
        border-color: #cacaca #b7b7b7 #9a9a9a #b7b7b7;
        background: #f7f7f7;
        background: -moz-linear-gradient(top, #f7f7f7 0%, #ededed 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ededed));
        background: -webkit-linear-gradient(top, #f7f7f7 0%, #ededed 100%);
        background: -o-linear-gradient(top, #f7f7f7 0%, #ededed 100%);
        background: -ms-linear-gradient(top, #f7f7f7 0%, #ededed 100%);
        background: linear-gradient(to bottom, #f7f7f7 0%, #ededed 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ededed',GradientType=0); }
        #cms #center_column #admin-action-cms p .button.lnk_view:hover {
          border-color: #9e9e9e #9e9e9e #c8c8c8 #9e9e9e;
          filter: none;
          background: #e7e7e7; }

          /*# sourceMappingURL=cms.css.map */
          /*MODIFICACIONES QUIM*/

.page-heading-catalogos, .page-subheading-catalogos {
    text-transform: uppercase;
    color: #001466;
    font-size: 72px;
    font-family: "transducer-extended", sans-serif;
    font-weight: 900;
    font-style: normal;
    height: 82px;
    font-weight: 600;
    line-height: 78px;
    margin-bottom: 22px;
    padding-left: 20px;
    display: block;
    position: relative;
    border-bottom: none;
    /* Agregamos la sombra aquí */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.page-heading-catalogos {
    font-family: "transducer-extended", sans-serif;
    font-weight: 900;
    font-style: normal;
    color: #001466;
    text-transform: uppercase;
    padding: 0px 0px 17px 17px;
    margin-bottom: 30px;
    border-bottom: 1px solid #d6d4d4;
    overflow: hidden;
}

.name_catalog_catalogos {
    font-size: 20px;
    text-transform: uppercase;
    color: #001466;
    font-family: "transducer", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 26px;
    padding-bottom: 11px;
    /* Sombra para este elemento también */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}


/*MODIFICACIONS QUIM*/
/*body {
  font-family: 'Space Grotesk', sans-serif;
}*/

.page-heading-2024, .page-subheading-2024 {
    text-transform: uppercase;
    font-size: 36px; /* Por defecto en dispositivos móviles */
    font-family: "transducer-extended", sans-serif;
    font-weight: 900;
    font-style: normal;
    height: 60px;
    font-weight: 600;
    line-height: 50px;
    display: block;
    position: relative;
    border-bottom: none;
}

/* Estilos para pantallas de PC (ancho mayor a 768px) */
@media only screen and (min-width: 769px) {
    .page-heading-2024, .page-subheading-2024 {
        font-size: 50px; /* Ajuste para pantallas grandes (PC) */
        line-height: 60px; /* Ajustamos el line-height para el tamaño más grande */
    }
}

.page-heading-2024 {
    font-family: "transducer-extended", sans-serif;
    font-weight: 900;
    font-style: normal;
    color: #001052;
    text-transform: uppercase;
    padding: 0px 0px 0px 0px;
    margin-bottom: 30px;
    border-bottom: 1px solid #d6d4d4;
    overflow: hidden;
}
.page-heading-2025 {
  font-size: 36px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  color: #001052;
  text-transform: uppercase;
}



.name_catalog_2024, .num_catalog_2024 {
    text-transform: uppercase;
    color: #172185;
    font-size: 32px;
    font-family: "transducer-condensed", sans-serif;
    font-weight: 600;
    font-style: normal;
    height: 50px;
    line-height: 38px;
    margin-bottom: 0; /* Elimina margen inferior para evitar separaciones no deseadas */
    display: inline-block; /* Asegura que los elementos se comporten como en línea */
    position: relative;
    border-bottom: none;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.num_catalog_2024 {
    font-family: "transducer-extended", sans-serif; /* Se mantiene distinto */
    margin-right: 8px; /* Añade algo de separación entre el número y el nombre */
        font-weight: 900;
}

.texto-largo-2024 {
  font-size: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 300;
  color: #D1D1D1;
}

.texto-largo-2025 {
  font-size: 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 300;
  color: #192666;
}

/* Contenedor del carrusel */
.carousel-container {
  width: 200px;
  height: 266px;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  margin: 0 auto;
}

@media only screen and (min-width: 769px) {
    .carousel-container {
        width: 250px;
        height: 333px;
        overflow: hidden;
        position: relative;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        margin: 0 auto;
    }
}

/* Carrusel */
.carousel {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 1s ease-in-out;
}

/* Enlaces del carrusel */
.carousel a {
  display: flex;          /* Asegura que el enlace se comporte como un contenedor flexible */
  flex-shrink: 0;         /* Evita que el elemento se reduzca */
  width: 100%;            /* Ocupa todo el ancho del contenedor */
  height: 100%;           /* Ocupa todo el alto del contenedor */
}

.carousel a img {
  width: 100%;            /* La imagen ocupa todo el ancho del enlace */
  height: 100%;           /* La imagen ocupa todo el alto del enlace */
  object-fit: cover;
}

/* Flechas de navegación */
.carousel-arrows {
    display: flex;
    justify-content: space-between;
    width: calc(100% + 80px); /* Aumenta el ancho para colocar las flechas fuera del carrusel */
    position: absolute;
    top: 50%; /* Centrar verticalmente las flechas */
    left: -40px; /* Mueve el contenedor de flechas a la izquierda para que las flechas queden fuera del carrusel */
    transform: translateY(-50%);
    pointer-events: auto; /* Permitir la interacción con las flechas */
}

.carousel-arrow {
    background: none;
    color: #001052;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: none;
    transition: color 0.3s;
    pointer-events: all; /* Asegura la interacción con las flechas */
}

.carousel-arrow.left {
    margin-left: 68px; /* Sin margen adicional */
}

.carousel-arrow.right {
    margin-right: 72px; /* Sin margen adicional */
}

.carousel-arrow:hover {
    color: #3a49b8; /* Un color más claro para el efecto hover */
}


/* Estilo para el contenedor de los botones */
.button-container {
    display: flex;
    justify-content: left; /* Centra los elementos horizontalmente */
    text-align: center;
    width: 100%; /* El contenedor ocupa el 100% del ancho */
    gap: 8px; /* Espacio entre los botones */
    padding: 12px 0 0px 54px; /* Padding arriba y abajo */
    margin: 0px auto;
    box-sizing: border-box; /* Asegura que el padding se incluya en el tamaño total */
}


/* Estilo para el contenedor del dropdown */
.dropdown-container {
    display: flex;
    justify-content: center; /* Centra los elementos horizontalmente */
    text-align: center;
    width: 100%; /* El contenedor ocupa el 100% del ancho */
    gap: 8px; /* Espacio entre los botones */
    padding: 20px 0 0px 0; /* Padding arriba y abajo */
    margin: 0px auto;
    box-sizing: border-box; /* Asegura que el padding se incluya en el tamaño total */
}

/* Estilo básico para los botones */
.apple-style-button, .apple-style-button-ghost, .apple-style-button-2 {
  display: inline-flex; /* Asegura que los estilos de flex funcionen */
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  font-size: 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  text-decoration: none; /* Elimina el subrayado de los enlaces */
}

/* Estilo para el botón PDF */
.apple-style-button {
  font-family: 'Space Grotesk', sans-serif;
  background-color: #001052;
  color: white;
  border: 2px solid #001052;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-image: url('https://www.triclo.es/img/cms/PDF.png'); /* Agrega la imagen como background */
  background-size: 20px 20px; /* Tamaño de la imagen */
  background-repeat: no-repeat;
  background-position: left 16px center; /* Posiciona la imagen */
  padding-left: 48px; /* Deja espacio para la imagen */
}

/* Estilos de interacción solo cuando el botón NO está deshabilitado */
.apple-style-button:not(.disabled):hover {
  background-color: #002060;
  color: #D1D1D1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.apple-style-button:not(.disabled):active {
  background-color: #000A30;
  color: #C0C0C0;
}

.apple-style-button:not(.disabled):focus {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

/* Estilo para el botón PDF */
.apple-style-button-2 {
  font-family: 'Space Grotesk', sans-serif;
  background-color: #001052;
  color: white;
  border: 2px solid #001052;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Estilos de interacción solo cuando el botón NO está deshabilitado */
.apple-style-button-2:not(.disabled):hover {
  background-color: #002060;
  color: #D1D1D1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.apple-style-button-2:not(.disabled):active {
  background-color: #000A30;
  color: #C0C0C0;
}

.apple-style-button-2:not(.disabled):focus {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

/* Estilo para el botón deshabilitado */
.apple-style-button-2.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: default;
}


/* Estilo básico para el botón EXCEL (ghost) */
.apple-style-button-ghost {
    font-family: 'Space Grotesk', sans-serif;
    background-color: #FFFFFF; /* Fondo blanco */
    color: #001052; /* Texto azul */
    border: 2px solid #001052; /* Borde azul */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suau */
    padding: 10px 15px;
    cursor: pointer;
    display: inline-flex; /* Flexbox per alinear */
    align-items: center;
    background-image: url('https://www.triclo.es/img/cms/XLSX.png'); /* Agrega la imagen como background */
    background-size: 20px 20px; /* Tamaño de la imagen */
    background-repeat: no-repeat;
    background-position: left 16px center; /* Posiciona la imagen */
    padding-left: 48px; /* Deja espacio para la imagen */
}

/* Efecto hover para el botón EXCEL */
.apple-style-button-ghost:hover {
    background-color: #FFFFFF; /* Fondo blanco */
    color: #001052; /* Texto azul */
    border: 2px solid #242A45; /* Borde més fosc */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Efecto active para el botón EXCEL */
.apple-style-button-ghost:active {
    background-color: #FFFFFF; /* Fondo blanc */
    color: #001052;
    border: 2px solid #1F233A; /* Borde més fosc */
}

/* Efecto focus para el botón EXCEL */
.apple-style-button-ghost:focus {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

/* Estilo básico para el dropdown */
.styled-dropdown {
  justify-content: start;
  align-items: center;
  padding: 8px 40px 8px 16px; /* Padding arriba y abajo */
  font-size: 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  background-color: #FFFFFF;
  color: #001052;
  border: 2px solid #001052;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20"><polygon points="0,0 10,10 20,0" fill="%23001052"/></svg>');
  background-repeat: no-repeat;
  background-position: calc(100% - 16px) calc(100% - 8px);
  background-size: 12px;
  width: 250px; /* Hace que el dropdown ocupe el 100% del contenedor */
  box-sizing: border-box; /* Asegura que el padding y el borde se incluyan en el tamaño total */
}

    /* Centrar el título de la página */
    .page-heading-2024 {
        text-align: center;
    }

    /* Centrar los contenedores de botones y títulos de los catálogos */
    .catalog_container_2024, .dropdown-container, .carousel-container {
        text-align: center;
        margin: 0 auto;
    }

.mi-breadcrumb {
  display: flex;
  list-style: none; /* Elimina los puntos del ul */
  padding: 0 0 32px 0;
  margin: 0px 0px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 14px;
}

.mi-breadcrumb-item {
  list-style: none; /* Elimina los puntos de los li */
}

.mi-breadcrumb-item + .mi-breadcrumb-item::before {
  content: '/';
  margin: 0 8px;
  color: #8e8e93; /* Color gris suave */
}

.mi-breadcrumb a {
  text-decoration: none;
  color: #007aff; /* Azul al estilo Apple */
}

.mi-breadcrumb a:hover {
  text-decoration: underline;
}

.mi-breadcrumb .mi-active {
  color: #8e8e93; /* Mismo color que el separador */
  pointer-events: none;
  cursor: default;
}

html, body {
    padding: 0;
    margin: 0;
}

/* Personaliza el tamaño, posición y bordes del contenedor principal */
#content {
    width: 100%;
    height: 450px;
    /* border: 1px dotted #cecfd2; */
}