.anyo,
.direccion,
.titulo {
    font-weight: 700;
}
:root {
    font-family: Inter, sans-serif;
    font-feature-settings:
        "liga" 1,
        "calt" 1;
}
@supports (font-variation-settings: normal) {
    :root {
        font-family: InterVariable, sans-serif;
    }
}
.timeline_his {
    height: 37.3vw;
    min-height: 37.3vw;
    background: 0 0;
}
.swiper-container,
.swiper-wrapper .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
}
.swiper-container {
    max-width: 100%;
    min-width: 100vw;
    margin: 0 auto;
    overflow: hidden;
}
.swiper-slide img.cover,
.swiper-slide video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.5s;
}
.swiper-slide img.cover {
    z-index: 99;
}
.anyo,
.direccion,
.titulo {
    position: absolute;
    left: 2.85vw;
    color: #fff;
    padding: 0;
    width: auto;
    z-index: 30;
    font-family: Inter, sans-serif;
}
.anyo {
    top: 2vw;
    font-size: 10.1vw;
}
.titulo {
    top: 3vw;
    font-size: 5.85vw;
    font-weight: 800;
}
.direccion {
    top: 10vw;
    font-size: 2vw;
    max-width: 45vw;
    font-weight: 500;
    line-height: 1.3;
}
.swiper-button-next::after,
.swiper-button-prev::after {
    content: "";
}
.swiper-button-next,
.swiper-button-prev {
    background-color: transparent !important;
    color: #fff !important;
    fill: white !important;
    stroke: white !important;
    width: 5vw;
    height: 5vw;
    position: absolute;
    top: auto;
    bottom: 4px;
    padding: 8px;
    border-radius: 100%;
    overflow: hidden;
}
.swiper-button-next svg,
.swiper-button-prev svg {
    width: auto;
    height: 100%;
    overflow: hidden;
}
/* === Overlay vertical para cada slide ===
   Objetivo: velo negro 8% -> transparente, por encima del media y por debajo de los textos.
   No requiere cambios en el HTML. */

/* Asegura que cada slide sea el contenedor de apilado */
.swiper-slide {
  position: relative;
}

/* Capa de velo usando pseudo-elemento */
.swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;               /* top:0; right:0; bottom:0; left:0 */
  pointer-events: none;   /* no bloquea interacción */
  background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%);
  z-index: 110;           /* por encima de imagen/video (z 99) */
}

/* Elevar textos por encima del velo sin tocar tu regla original */
.swiper-slide .anyo,
.swiper-slide .titulo,
.swiper-slide .direccion {
  position: absolute;     /* reafirma posicionamiento */
  z-index: 120;           /* por encima del ::before */
}

/* Opcional: si algún video supera el z-index por estilos externos, lo anclamos bajo el velo */
.swiper-slide video { z-index: 90; }