/**
 * Accesibilidad: botón de pausa del contenido en movimiento (WCAG 2.2.2). Lo crea js/a11y-pausa.js.
 * Quitar el enqueue de este fichero y de js/a11y-pausa.js para volver atrás.
 */

/* Botón base: 40×40, como los números de la paginación del carrusel; icono pausa (dos barras) / reproducir (triángulo) */
.a11y-pause-button {
    width: 40px;
    height: 40px;
    margin: 10px 0 0 10px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border: none;
    background: transparent;
    color: #6E6E6E;
    cursor: pointer;
    transition: color 0.3s cubic-bezier(0.43, 0.39, 0.23, 1.01);
}
.a11y-pause-button:hover { color: #1D1C1B; }
.a11y-pause-button::before {
    content: '';
    display: block;
    width: 10px;
    height: 12px;
    box-sizing: border-box;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
}
.a11y-pause-button.is-paused::before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent currentColor;
    margin-left: 2px;
}

/* En la cabecera, a continuación de los números de la paginación (mismos márgenes que .slider_page) */
.module-home-header .module-pagination { white-space: nowrap; }
@media only screen and (max-width: 1024px) {
    .module-home-header .module-pagination .a11y-pause-button { margin: 0; }
}
.module-home-header.module-home--white .a11y-pause-button,
.module-home-header.module-home--white .a11y-pause-button:hover { color: #FFFFFF; }

/* Sobre un vídeo (sin paginación): esquina inferior derecha. Solo el icono blanco, sin recuadro, con una sombra oscura
   alrededor (opción 3 elegida por diseño, 2026-10-28): ≥ 9:1 con el color que lo rodea en todos los fotogramas medidos
   (1.4.11 pide 3:1). El área pulsable sigue siendo de 40×40 */
.a11y-pause-button--overlay {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 5;
    margin: 0;
    color: #FFFFFF;
}
.a11y-pause-button--overlay:hover { color: #FFFFFF; }
.a11y-pause-button--overlay::before {
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
}
.module-video-home { position: relative; }
/* Cabecera con carrusel: botón sobre el vídeo de cada diapositiva; solo visible (y enfocable) en la diapositiva activa */
.module-home-header .a11y-pause-button--overlay { z-index: 7; /* sobre .image-veil (5) y sobre el contenedor transparente de las tarjetas (.module_inner.extra, 6), que se quedaba con el clic en escritorio */ }
.module-home-header .module-list_element:not(.active) .a11y-pause-button { visibility: hidden; }
/* Si la esquina inferior derecha la tapa otro contenido (tarjetas en escritorio), a la izquierda (js/a11y-pausa.js) */
.a11y-pause-button--overlay.a11y-pause-button--left { right: auto; left: 20px; }
/* Foco sobre vídeo (fondo cambiante): contorno blanco con un halo oscuro alrededor, visible sobre claro y oscuro */
.a11y-pause-button--overlay:focus-visible { outline-color: #FFFFFF !important; box-shadow: 0 0 0 6px #1D1C1B; /* oscuro por dentro y por fuera del contorno */ }

/* Animaciones Lottie en bucle (landings): esquina inferior derecha de la animación, icono gris como la paginación */
.a11y-pause-button--corner {
    position: absolute;
    right: 20px;
    bottom: 0;
    z-index: 5;
    margin: 0;
}
.a11y-pause-button--corner[hidden] { display: none; }