/*
 * RB Accesibilidad - Estilos de los controles de accesibilidad
 *
 * - Enlace para saltar al contenido (WCAG 2.4.1, nivel A).
 * - Boton de pausa del video de portada (WCAG 2.2.2, nivel A).
 */

/* -------------------------------------------------------------------------
 * 2.4.1 Enlace para saltar al contenido
 *
 * Permanece fuera de la pantalla y aparece en la esquina superior izquierda
 * al recibir el foco con el tabulador. No se usa display:none ni
 * visibility:hidden porque eso lo haria inalcanzable por teclado, que es
 * justo lo contrario de lo que se busca.
 * ---------------------------------------------------------------------- */
.rb-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background-color: #02000F;
	color: #FFFFFF !important;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid #4FD1DB;
	border-radius: 0 0 6px 0;
}

.rb-skip-link:focus,
.rb-skip-link:focus-visible {
	left: 0;
	outline: 3px solid #4FD1DB;
	outline-offset: 2px;
}

/* El destino del salto no debe mostrar contorno al recibir el foco por
   programa: no es un control, solo un punto de aterrizaje. */
#rb-contenido:focus {
	outline: none;
}

/* -------------------------------------------------------------------------
 * 2.2.2 Boton de pausa del video de portada
 *
 * El video dura 8 segundos y se reproduce en bucle, asi que necesita un
 * control para detenerlo. Se situa en una esquina para no tapar el
 * contenido, con area de pulsacion de 44 px y contraste suficiente
 * (blanco sobre #02000F, 16.9:1).
 *
 * pointer-events:auto es imprescindible: Elementor coloca el video de fondo
 * dentro de un contenedor con pointer-events:none, y cualquier control que
 * quede en esa rama hereda esa propiedad y deja de responder al raton
 * (aunque siga respondiendo a un click lanzado por codigo, que es lo que
 * puede despistar al comprobarlo). El script coloca ademas el boton fuera
 * de esa rama, pero la regla se mantiene como salvaguarda.
 * ---------------------------------------------------------------------- */
.rb-video-toggle {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 20;
	pointer-events: auto !important;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	background-color: #02000F;
	color: #FFFFFF;
	border: 2px solid #FFFFFF;
	border-radius: 50%;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.85;
}

.rb-video-toggle:hover,
.rb-video-toggle:focus-visible {
	opacity: 1;
	outline: 3px solid #4FD1DB;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Preferencia del sistema de reducir el movimiento.
 * Elementor aplica animaciones de entrada a casi todos los elementos; con
 * esta preferencia activada se anulan, que es lo que espera quien la marca
 * por motivos vestibulares.
 * ---------------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.elementor-invisible {
		visibility: visible !important;
		opacity: 1 !important;
	}
}