/*
 * Estilos del bloque «centinela/slider».
 *
 * WordPress sólo encola esta hoja en las páginas donde el bloque se pinta, así
 * que aquí puede vivir todo lo que el carrusel necesita. Los colores van como
 * variables con valor por defecto: el tema puede reajustarlos sin necesidad de
 * sobrescribir reglas.
 */

.centinela-slider {
    --centinela-slider-fondo: rgba(0, 0, 0, .5);
    --centinela-slider-color: #fff;
    --centinela-slider-foco: #fff;
    position: relative;
}

/*
 * Los controles viajan con el atributo `hidden` hasta que el JS los activa.
 * Sin esta regla el `display` de cada clase los mostraría igualmente, porque el
 * estilo del autor gana al del navegador.
 */
.centinela-slider [hidden] {
    display: none;
}

.centinela-slider__pista {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

.centinela-slider__diapositiva {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
    margin: 0;
}

.centinela-slider__imagen {
    display: block;
    width: 100%;
    height: var(--centinela-slider-altura, auto);
    object-fit: cover;
}

.centinela-slider__anterior,
.centinela-slider__siguiente,
.centinela-slider__pausa {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--centinela-slider-fondo);
    color: var(--centinela-slider-color);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.centinela-slider__anterior {
    left: .5rem;
}

.centinela-slider__siguiente {
    right: .5rem;
}

/* La pausa comparte esquina con los puntos, no va centrada como las flechas. */
.centinela-slider__pausa {
    top: auto;
    right: .5rem;
    bottom: .5rem;
    transform: none;
    font-size: .875rem;
}

.centinela-slider__puntos {
    position: absolute;
    right: 0;
    bottom: .5rem;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
}

.centinela-slider__puntos button {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* El punto visible es pequeño aunque el botón mida 44px: manda el área táctil. */
.centinela-slider__puntos button::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--centinela-slider-color);
    box-shadow: 0 0 0 1px var(--centinela-slider-fondo);
    opacity: .5;
}

.centinela-slider__puntos button[aria-current='true']::before {
    opacity: 1;
}

.centinela-slider__anterior:focus-visible,
.centinela-slider__siguiente:focus-visible,
.centinela-slider__pausa:focus-visible,
.centinela-slider__puntos button:focus-visible {
    outline: 2px solid var(--centinela-slider-foco);
    outline-offset: 2px;
}

/*
 * El texto de cada diapositiva entra con un fundido un momento DESPUÉS de la foto, como hacen los
 * sliders de las plantillas comerciales (primero la imagen, luego el título). Sólo si el guion
 * corre (`--con-js`, que también marca la diapositiva `es-actual`): sin JS, todos a la vista.
 * Al salir se va sin retardo, para que no se vea el título viejo sobre la foto nueva.
 */
.centinela-slider--con-js .centinela-slider__texto {
    opacity: 0;
    transition: opacity .3s ease;
}

.centinela-slider--con-js .es-actual .centinela-slider__texto {
    opacity: 1;
    transition: opacity .6s ease .8s;
}

@media (prefers-reduced-motion: reduce) {
    .centinela-slider__pista {
        scroll-behavior: auto;
    }

    /* Con «menos movimiento» el texto está, sin fundidos. */
    .centinela-slider--con-js .centinela-slider__texto,
    .centinela-slider--con-js .es-actual .centinela-slider__texto {
        transition: none;
    }
}

/*
 * ── La forma NUEVA: diapositivas de imagen o vídeo (06-10-2026) ──────────────────────────────
 * Sin JS es la misma tira desplazable de arriba. Con JS (`--con-js`) y fundido (`--funde`), las
 * diapositivas se apilan y sólo la actual se ve, con un fundido de .8 s (la maqueta de
 * blasvalero48). El tema reajusta colores y tamaños con las variables, sin reescribir reglas.
 */
.centinela-slider--diapositivas {
    --centinela-slider-altura-movil: 100svh;
    --centinela-slider-velo: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0) 60%);
    --centinela-slider-titulo: clamp(1.6rem, 4vw, 3rem);
    overflow: hidden;
}

.centinela-slider--diapositivas .centinela-slider__imagen,
.centinela-slider__video {
    display: block;
    width: 100%;
    height: var(--centinela-slider-altura, 70vh);
    object-fit: cover;
    object-position: var(--centinela-slider-foco, 50% 50%);
}

/* De los dos vídeos, el ancho en pantalla ancha y el vertical en móvil (si lo hay). */
.centinela-slider__video--movil {
    display: none;
}

@media (max-width: 767px) {
    .centinela-slider--diapositivas .centinela-slider__imagen,
    .centinela-slider__video {
        height: var(--centinela-slider-altura-movil);
    }

    .centinela-slider__diapositiva:has(.centinela-slider__video--movil) .centinela-slider__video--ancho {
        display: none;
    }

    .centinela-slider__video--movil {
        display: block;
    }
}

.centinela-slider--con-js.centinela-slider--funde .centinela-slider__pista {
    display: grid;
    overflow: hidden;
}

.centinela-slider--con-js.centinela-slider--funde .centinela-slider__diapositiva {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility 0s linear .8s;
}

/* La actual ENCIMA (08-10, lo midió la sesión de Blas Valero congelando el instante): al arrancar el JS
 * todas se apilan en la misma celda y las que no son la actual tardan 0,8 s en fundirse a 0; sin esto
 * quedaba encima la ÚLTIMA del HTML y se veía un instante antes que la primera. Flechas, puntos y pausa
 * siguen por encima (van fuera de las diapositivas, con z-index 2-3). */
.centinela-slider--con-js.centinela-slider--funde .centinela-slider__diapositiva.es-actual {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity .8s ease;
}

/* El velo detrás del texto: el contraste no puede depender de cómo sea cada foto o vídeo. */
.centinela-slider--velo .centinela-slider__diapositiva:has(.centinela-slider__textos)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--centinela-slider-velo);
    pointer-events: none;
}

.centinela-slider__textos {
    position: absolute;
    z-index: 1;
    left: clamp(1rem, 5vw, 4rem);
    right: clamp(1rem, 5vw, 4rem);
    bottom: clamp(3.5rem, 10vh, 6rem);
    color: var(--centinela-slider-color);
}

.centinela-slider__titulo {
    margin: 0 0 .25em;
    font-size: var(--centinela-slider-titulo);
    line-height: 1.1;
}

.centinela-slider__subtitulo {
    margin: 0 0 1em;
    font-size: clamp(1rem, 2vw, 1.35rem);
}

.centinela-slider__boton {
    /* inline-flex y centrado: con inline-block y min-height el texto se quedaba ARRIBA y el
       hueco abajo (medido el 06-10: 44 px de alto para 25,6 de línea). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: .75em 1.5em;
    min-height: 44px;
    line-height: 1.2;
    background: var(--centinela-slider-color);
    color: #111;
    text-decoration: none;
    border-radius: 2px;
}

.centinela-slider__boton:focus-visible,
.centinela-slider__reproducir:focus-visible {
    outline: 2px solid var(--centinela-slider-foco);
    outline-offset: 3px;
}

.centinela-slider__reproducir {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-height: 44px;
    padding: .75em 1.25em;
    border: 0;
    border-radius: 2em;
    background: var(--centinela-slider-fondo);
    color: var(--centinela-slider-color);
    cursor: pointer;
}

/* En la forma nueva, la pausa y las flechas van sobre el velo: z-index por encima del texto. */
.centinela-slider--diapositivas .centinela-slider__anterior,
.centinela-slider--diapositivas .centinela-slider__siguiente,
.centinela-slider--diapositivas .centinela-slider__pausa,
.centinela-slider--diapositivas .centinela-slider__puntos {
    z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
    .centinela-slider--con-js.centinela-slider--funde .centinela-slider__diapositiva,
    .centinela-slider--con-js.centinela-slider--funde .centinela-slider__diapositiva.es-actual {
        transition: none;
    }
}