/* Slider de la portada (banners activos). Fundido entre imágenes + zoom muy lento (Ken Burns). */
/* De arriba abajo: franja negra con los indicadores, la imagen (proporción 2:1) y una franja negra con el título y
   el subtítulo del banner. La franja de arriba y la imagen van en posición absoluta sobre el relleno superior. */
.ks-slider { --ks-duracion: 7s; --ks-zoom: 1.08; --ks-franja: 2.4rem; position: relative; overflow: hidden;
  width: 100%; padding-top: calc(50% + var(--ks-franja)); margin: 0 0 1.5rem; isolation: isolate; background: #202020; }
.ks-slider::before { content: ""; position: absolute; top: var(--ks-franja); left: 0; right: 0; aspect-ratio: 2 / 1; background: #0b1722; z-index: 0; }
.ks-slide { position: absolute; top: var(--ks-franja); left: 0; right: 0; aspect-ratio: 2 / 1; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 1.2s; z-index: 1; }
.ks-slide.es-activa { opacity: 1; visibility: visible; z-index: 2; }
.ks-slide a, .ks-slide .ks-marco { display: block; width: 100%; height: 100%; }
.ks-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; }

/* Efectos: la animación arranca cada vez que la imagen pasa a ser la activa. Dura algo más que su turno
   para que no se vea el final mientras se funde con la siguiente. */
.ks-slide.es-activa[data-efecto="zoom_in"] img  { animation: ks-acercar  calc(var(--ks-duracion) + 1.5s) linear forwards; }
.ks-slide.es-activa[data-efecto="zoom_out"] img { animation: ks-alejar   calc(var(--ks-duracion) + 1.5s) linear forwards; }
.ks-slide.es-activa[data-efecto="pan"] img      { animation: ks-desplazar calc(var(--ks-duracion) + 1.5s) linear forwards; }
@keyframes ks-acercar  { from { transform: scale(1); }              to { transform: scale(var(--ks-zoom)); } }
@keyframes ks-alejar   { from { transform: scale(var(--ks-zoom)); } to { transform: scale(1); } }
@keyframes ks-desplazar { from { transform: scale(1.06) translateX(-2.2%); } to { transform: scale(1.06) translateX(2.2%); } }
.ks-slider.en-pausa .ks-slide img { animation-play-state: paused !important; }

/* Controles */
.ks-flecha { position: absolute; top: calc(var(--ks-franja) + 25vw); z-index: 5; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%;
  background: rgba(7, 35, 56, .45); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
  opacity: 0; transition: opacity .25s, background .2s; backdrop-filter: blur(4px); }
.ks-flecha.ant { left: .9rem; } .ks-flecha.sig { right: .9rem; }
.ks-slider:hover .ks-flecha, .ks-slider:focus-within .ks-flecha { opacity: 1; }
.ks-flecha:hover { background: rgba(7, 35, 56, .75); }
.ks-puntos { position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: var(--ks-franja); background: #202020;
  display: flex; align-items: center; justify-content: center; gap: .45rem; }
.ks-punto { width: 2.2rem; height: 1rem; border: 0; background: none; cursor: pointer; padding: 0; display: grid; align-items: center; }
.ks-punto span { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .28); overflow: hidden; position: relative; }
.ks-punto span::after { content: ""; position: absolute; inset: 0; width: 0; background: #ff7300; border-radius: 4px; }
.ks-punto:hover span { background: rgba(255, 255, 255, .5); }
.ks-punto[aria-current="true"] span::after { animation: ks-progreso var(--ks-duracion) linear forwards; }
.ks-slider.en-pausa .ks-punto[aria-current="true"] span::after { animation-play-state: paused; }
.ks-slider.sin-autoplay .ks-punto[aria-current="true"] span::after { animation: none; width: 100%; }
@keyframes ks-progreso { to { width: 100%; } }
.ks-slider :focus-visible { outline: 3px solid #f2a900; outline-offset: 2px; }
.ks-solo-una .ks-flecha, .ks-solo-una .ks-puntos { display: none; }
.ks-slider.ks-solo-una { --ks-franja: 0px; }   /* con un solo banner no hay indicadores: sin franja */

/* Textos del banner, debajo de la imagen: franja negra a todo el ancho. Todos ocupan la misma celda (así la franja
   no cambia de alto al pasar de uno a otro) y solo se ve el del banner activo, que entra animado. */
.ks-textos { position: relative; z-index: 3; display: grid; background: #202020; text-align: center; }
.ks-texto { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: .35rem;
  padding: 1.1rem 1.25rem 1.25rem; color: #fff; visibility: hidden; pointer-events: none; }
.ks-texto.es-activa { visibility: visible; pointer-events: auto; }
a.ks-texto:hover { color: #fff; text-decoration: none; }
a.ks-texto:hover .ks-titulo { color: #ff7300; }
.ks-titulo { display: block; font-size: clamp(1.15rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.2; color: #fff; opacity: 0; transition: color .2s ease; }
.ks-subtitulo { display: block; font-size: clamp(.9rem, 1.4vw, 1.15rem); line-height: 1.4; color: #ff9a45; opacity: 0; }
.ks-texto.es-activa .ks-titulo { animation: ks-texto-titulo .9s cubic-bezier(.2, .7, .2, 1) .25s both; }
.ks-texto.es-activa .ks-subtitulo { animation: ks-texto-subtitulo .9s cubic-bezier(.2, .7, .2, 1) .65s both; }
@keyframes ks-texto-titulo { from { opacity: 0; transform: translateY(-18px); letter-spacing: .12em; } to { opacity: 1; transform: none; letter-spacing: 0; } }
@keyframes ks-texto-subtitulo { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

@media (max-width: 767px) {
  .ks-flecha { display: none; }
  .ks-punto { width: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ks-slide { transition: none; }
  .ks-slide.es-activa img { animation: none !important; }
  .ks-texto.es-activa .ks-titulo, .ks-texto.es-activa .ks-subtitulo { animation: none; opacity: 1; }
}