/* Themify Custom CSS */
/* Títulos del slideshow */
.titulo-lineas h3.slide-title {
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
    text-align: center;
    font-size: 46px;
    line-height: 1.35;
    letter-spacing: 8px;
    white-space: normal;
    overflow-wrap: break-word;
}

.titulo-lineas h3.slide-title::before {
    content: "";
    display: block;
    width: 100%;
    height: 390px;
    margin: 0 auto 25px;

    background-image:
        url("/wp-content/uploads/2026/08/logotipo-sci-claim-neg2.png"),
        linear-gradient(#4f7fc0, #4f7fc0);

    background-repeat: no-repeat;
    background-size: 380px auto, 2px 30px;
    background-position: center top, center bottom;
}

.titulo-lineas h3.slide-title::after {
    content: "";
    display: block;
    width: 2px;
    height: 30px;
    margin: 25px auto 0;
    background-color: #4f7fc0;
}

/* Portátiles y tabletas grandes */
@media screen and (max-width: 1200px) {
    .titulo-lineas h3.slide-title {
        font-size: 32px;
        letter-spacing: 5px;
    }

    .titulo-lineas h3.slide-title::before {
        height: 230px;
        margin-bottom: 18px;
        background-size: 270px auto, 2px 24px;
    }

    .titulo-lineas h3.slide-title::after {
        height: 24px;
        margin-top: 18px;
    }
}

/* Tabletas */
@media screen and (max-width: 800px) {
    .titulo-lineas h3.slide-title {
        font-size: 24px;
        letter-spacing: 3px;
    }

    .titulo-lineas h3.slide-title::before {
        height: 150px;
        margin-bottom: 12px;
        background-size: 200px auto, 2px 20px;
    }

    .titulo-lineas h3.slide-title::after {
        height: 20px;
        margin-top: 12px;
    }
}

/* Móviles */
@media screen and (max-width: 480px) {
    .titulo-lineas h3.slide-title {
        font-size: 18px;
        line-height: 1.3;
        letter-spacing: 2px;
    }

    .titulo-lineas h3.slide-title::before {
        height: 95px;
        margin-bottom: 10px;
        background-size: 140px auto, 2px 16px;
    }

    .titulo-lineas h3.slide-title::after {
        height: 16px;
        margin-top: 10px;
    }
}

/*** titulo lineas azul H2 ***/
.titulo-lineas-azul h2 {
    text-align: center;
    margin: 0;
	  color: #4f7fc0;
	text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 1.4em;
	font-weight: 300;
	font-family: 'Lato', sans-serif;
}

.titulo-lineas-azul h2::before {
    content: "";
    display: block;
    width: 2px;
    height: 30px;
    margin: 0px auto 30px;
    background-color: #4f7fc0;
}

.titulo-lineas-azul h2::after {
    content: "";
    display: block;
    width: 2px;
    height: 30px;
    margin: 30px auto 0;
    background-color: #4f7fc0;
}

/*timeline*/
/* ==========================================================
   TIMELINE SCI
   Réplica visual para Themify
   ========================================================== */


/* ----------------------------------------------------------
   CONTENEDOR
   ---------------------------------------------------------- */

.sci-timeline {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.sci-timeline *,
.sci-timeline *::before,
.sci-timeline *::after {
    box-sizing: border-box;
}


/* ----------------------------------------------------------
   NAVEGACIÓN / AÑOS
   ---------------------------------------------------------- */

.sci-timeline .sci-timeline-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;

    /* Aproxima la distribución del original */
    column-gap: 18px !important;
    row-gap: 0 !important;

    margin: 0 0 68px 0 !important;
    padding: 0 0 20px 0 !important;

    border: 0 !important;
    border-bottom: 1px solid #dddddd !important;

    background: transparent !important;

    list-style: none !important;
}


/* ----------------------------------------------------------
   BOTONES: RESET THEMIFY
   ---------------------------------------------------------- */

.sci-timeline .sci-timeline-nav button.sci-tab {
    -webkit-appearance: none !important;
    appearance: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;

    /* Importante para que el activo no cambie de tamaño */
    padding: 14px 14px !important;

    border: 2px solid transparent !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
    text-shadow: none !important;

    color: #b3c323 !important;

    font-family: inherit !important;
    font-size: 17px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    letter-spacing: 0.2px !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;

    white-space: nowrap !important;

    cursor: pointer !important;

    outline: none !important;

    transition:
        color 0.18s ease,
        background-color 0.18s ease !important;
}


/* ----------------------------------------------------------
   BOTÓN NORMAL
   Evitamos que Themify pinte estados focus/visited
   ---------------------------------------------------------- */

.sci-timeline .sci-timeline-nav button.sci-tab:not(.active),
.sci-timeline .sci-timeline-nav button.sci-tab:not(.active):focus,
.sci-timeline .sci-timeline-nav button.sci-tab:not(.active):active {
    color: #b3c323 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border-color: transparent !important;

    box-shadow: none !important;
}


/* ----------------------------------------------------------
   HOVER SOLO EN DISPOSITIVOS QUE TIENEN RATÓN
   ---------------------------------------------------------- */

@media (hover: hover) {

    .sci-timeline
    .sci-timeline-nav
    button.sci-tab:not(.active):hover {

        color: #4f7fc0 !important;

        background: transparent !important;
        background-color: transparent !important;

        border-color: transparent !important;

        box-shadow: none !important;
    }

}


/* ----------------------------------------------------------
   ACTIVO
   ---------------------------------------------------------- */

/* Año seleccionado */
.sci-timeline .sci-timeline-nav button.sci-tab.active,
.sci-timeline .sci-timeline-nav button.sci-tab.active:hover,
.sci-timeline .sci-timeline-nav button.sci-tab.active:focus,
.sci-timeline .sci-timeline-nav button.sci-tab.active:active {
    color: #4f7fc0 !important;

    background: #ffffff !important;
    background-image: none !important;

    border: 2px solid #dddddd !important;
    border-bottom-color: #ffffff !important;
    border-radius: 3px 3px 0 0 !important;

    box-shadow: none !important;
    text-shadow: none !important;
}


/* ----------------------------------------------------------
   PANEL DE CONTENIDO
   ---------------------------------------------------------- */

.sci-timeline .sci-timeline-panels {
    width: 100%;
    min-height: 150px;

    margin: 0;
    padding: 0;

    color: #929292;
}


/* Paneles ocultos */
.sci-timeline .sci-panel {
    display: none;

    margin: 0;
    padding: 0;

    color: #929292 !important;

    font-family: inherit;
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    line-height: 1.9;
}


/* Panel visible */
.sci-timeline .sci-panel.active {
    display: block;

    animation: sciTimelineFade 0.22s ease;
}


/* ----------------------------------------------------------
   TEXTO
   ---------------------------------------------------------- */

.sci-timeline .sci-panel p {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 10px !important;
    margin-left: 0 !important;

    padding: 0 !important;

    color: #929292 !important;

    font-size: inherit !important;
    font-weight: 300 !important;
    line-height: 1.9 !important;
}


/* ----------------------------------------------------------
   LISTAS
   ---------------------------------------------------------- */

.sci-timeline .sci-panel ul {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 14px !important;
    margin-left: 0 !important;

    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 18px !important;

    list-style-position: outside !important;
    list-style-type: disc !important;
}


.sci-timeline .sci-panel li {
    margin: 0 0 4px 0 !important;
    padding: 0 !important;

    color: #929292 !important;

    font-size: inherit !important;
    font-weight: 300 !important;
    line-height: 1.9 !important;
}


/* Marcadores de lista */
.sci-timeline .sci-panel li::marker {
    color: #929292;
}


/* ----------------------------------------------------------
   ANIMACIÓN
   ---------------------------------------------------------- */

@keyframes sciTimelineFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media screen and (max-width: 1024px) {

    .sci-timeline .sci-timeline-nav {
        column-gap: 10px !important;

        margin-bottom: 48px !important;
    }


    .sci-timeline .sci-timeline-nav button.sci-tab {
        padding: 12px 11px !important;

        font-size: 16px !important;
    }

}


/* ==========================================================
   MÓVIL
   En móvil resulta mejor una única fila desplazable
   ========================================================== */

@media screen and (max-width: 680px) {

    .sci-timeline .sci-timeline-nav {
        flex-wrap: nowrap !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        justify-content: flex-start !important;

        column-gap: 6px !important;

        margin-bottom: 35px !important;
        padding-bottom: 12px !important;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: thin;
    }


    .sci-timeline .sci-timeline-nav button.sci-tab {
        flex: 0 0 auto !important;

        padding: 11px 10px !important;

        font-size: 14px !important;

        white-space: nowrap !important;
    }


    .sci-timeline .sci-panel {
        font-size: 14px !important;
        line-height: 1.8 !important;
    }


    .sci-timeline .sci-panel p,
    .sci-timeline .sci-panel li {
        line-height: 1.8 !important;
    }

}

/* Retícula tiles SCI */
.sci-home-tiles {
    grid-auto-rows: 211px !important;
}

/* Tile grande */
.sci-home-tiles > .module-tile.size-square-large {
    grid-column: span 2 !important;
    grid-row: span 2 !important;

    width: 100% !important;
    height: 422px !important;
    min-height: 422px !important;
}

/* Tiles pequeños */
.sci-home-tiles > .module-tile.size-square-small {
    width: 100% !important;
    height: 211px !important;
    min-height: 211px !important;
}




/**/
@media screen and (max-width: 1200px) {

    /* Referencia para colocar el contenido sobre la imagen */
    .module-slider.titulo-lineas .slide-inner-wrap {
        position: relative;
    }

    /* El conjunto ocupa la imagen y queda centrado */
    .module-slider.titulo-lineas .slide-content {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        box-sizing: border-box;

        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        margin: 0 !important;
        padding: 4% 6% !important;
        transform: none !important;
    }

    /* Texto y espaciado entre letras */
    .module-slider.titulo-lineas h3.slide-title {
        width: 100%;
        max-width: 24em;
        margin: 0 !important;
        padding: 0 !important;

        font-size: 3vw !important;
        line-height: 1.3 !important;
        letter-spacing: 0.12em !important;
        text-align: center;
        white-space: normal !important;
        overflow-wrap: break-word;
    }

    /* Logo, espacio hasta el título y línea superior */
    .module-slider.titulo-lineas h3.slide-title::before {
        height: 18vw !important;
        margin: 0 auto 1.5vw !important;

        background-size:
            23vw auto,
            2px 2.5vw !important;

        background-position:
            center top,
            center bottom;
    }

    /* Línea y separación bajo el título */
    .module-slider.titulo-lineas h3.slide-title::after {
        height: 2.5vw !important;
        margin: 1.5vw auto 0 !important;
    }
}

@media screen and (max-width: 480px) {

    /* Altura suficiente para logo y títulos de varias líneas */
    .module-slider.titulo-lineas .slide-image img {
        display: block;
        width: 100% !important;
        height: 360px !important;
        object-fit: cover;
        object-position: center;
    }

    .module-slider.titulo-lineas .slide-content {
        padding: 20px 16px !important;
    }

    .module-slider.titulo-lineas h3.slide-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        letter-spacing: 0.1em !important;
    }

    .module-slider.titulo-lineas h3.slide-title::before {
        height: 110px !important;
        margin-bottom: 12px !important;
        background-size: 160px auto, 2px 16px !important;
    }

    .module-slider.titulo-lineas h3.slide-title::after {
        height: 16px !important;
        margin-top: 12px !important;
    }
}