/* Medidas y tipografías copiadas del bloque de Elementor que había antes
   (plantilla 228478 de la portada). */

/* El contenedor de Elementor que lleva el shortcode tiene margen interior
   por defecto (24px a cada lado) y dejaba el slider más estrecho que las
   columnas de debajo. Se le quita solo a ese contenedor. */
.e-con-inner:has(> .elementor-widget > .elementor-widget-container > .osp),
.e-con-inner:has(> .elementor-widget > .osp),
.e-con-full:has(> .elementor-widget > .elementor-widget-container > .osp),
.e-con-full:has(> .elementor-widget > .osp) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.osp {
    position: relative;
    height: 554px;
    border-radius: 5px;
    overflow: hidden;
    background: #222d33;
    color: #fff;
}
.osp *, .osp *::before, .osp *::after { box-sizing: border-box; }

.osp__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility 0s linear .8s;
}
.osp__slide.is-activo {
    opacity: 1;
    visibility: visible;
    transition: opacity .8s ease;
    z-index: 1;
}

.osp__fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
    max-width: none;
}

.osp__slide--oscuro .osp__titulo,
.osp__slide--oscuro .osp__subtitulo { text-shadow: 0 2px 16px rgba(0, 0, 0, .35); }

.osp__slide--oscuro::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, .12) 100%);
    pointer-events: none;
}

.osp__contenido {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 40px 45px;
    text-align: center;
}

/* La categoría usa el marcado del tema (triángulo, mayúsculas,
   tipografía); aquí solo se pone en blanco sobre la foto. */
.osp__categoria { margin: 0 0 14px; }
.osp .osp__categoria .cs-meta-category:before,
.osp .osp__categoria .post-categories a,
.osp .osp__categoria .post-categories a:hover { color: #fff !important; }
.osp .osp__categoria .cs-meta-category,
.osp .osp__categoria .post-categories a {
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
}

.osp__titulo {
    margin: 0 0 10px;
    font-family: "dirigentes-bold", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 79px;
    font-weight: normal;
    line-height: 1;
    letter-spacing: -0.9px;
    color: #fff;
    max-width: 1100px;
}
.osp__titulo a, .osp__titulo a:hover, .osp__titulo a:visited { color: inherit; text-decoration: none; }

.osp__subtitulo {
    margin: 0 0 28px;
    max-width: 860px;
    font-family: "proposxh-regular", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 23px;
    line-height: 28px;
    letter-spacing: -0.5px;
    color: #fff;
}

/* Noticias: texto a la izquierda y titular más pequeño, porque los
   titulares son más largos que los de campaña. */
.osp__slide--entrada .osp__contenido {
    align-items: flex-start;
    text-align: left;
    padding-left: 70px;
}
.osp__slide--entrada .osp__titulo {
    font-size: 58px;
    line-height: 1.05;
    max-width: 1000px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.osp__slide--entrada .osp__subtitulo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.osp__boton, .osp__boton:visited {
    display: inline-block;
    background-color: #FFFFFF57;
    font-family: "propos-regular", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.2;
    color: #fff !important;
    text-decoration: none !important;
    border: 2px solid #fff;
    border-radius: 7px;
    padding: 21px 25px 20px;
    transition: background-color .25s ease;
}
.osp__boton:hover, .osp__boton:focus-visible { background-color: #FFFFFF85; }

/* Abajo a la derecha: en el centro tapaban el titular alineado a la izquierda. */
.osp__flecha {
    position: absolute;
    bottom: 14px;
    z-index: 3;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0 !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22) !important;
    color: #fff !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background .25s ease;
}
.osp__flecha:hover { background: rgba(255, 255, 255, .4) !important; }
.osp__flecha svg { width: 20px; height: 20px; }
.osp__flecha--prev { right: 66px; }
.osp__flecha--next { right: 20px; }

.osp__puntos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.osp__punto {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0 !important;
    border-radius: 4px;
    background: rgba(255, 255, 255, .5) !important;
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}
.osp__punto.is-activo { width: 24px; background: #fff !important; }

@media (max-width: 767px) {
    .osp { height: 493px; border-radius: 8px; margin-top: 10px; }
    .osp__categoria { margin-bottom: 10px; }
    .osp .osp__categoria .cs-meta-category,
    .osp .osp__categoria .post-categories a { font-size: 12px !important; }
    .osp__contenido { padding: 0 20px 45px; }
    .osp__titulo { font-size: 45px; line-height: 45px; }
    .osp__subtitulo { font-size: 21px; line-height: 25px; letter-spacing: -0.3px; margin-bottom: 22px; }
    .osp__boton, .osp__boton:visited { font-size: 20px; padding: 16px 22px 15px; }
    .osp__flecha { display: none; }
    .osp__slide--entrada .osp__contenido { padding-left: 20px; }
    .osp__slide--entrada .osp__titulo { font-size: 30px; line-height: 1.1; -webkit-line-clamp: 4; }
    .osp__slide--entrada .osp__subtitulo { font-size: 17px; line-height: 22px; -webkit-line-clamp: 3; }
}
