/**
 * Bloque uts/banner — el carrusel de mensajes principales de la portada.
 *
 * Ni un color literal: todo sale de theme.json. El canal de 1.200 px del
 * contenedor y el anillo de foco limón sobre verde oscuro los pone style.css,
 * que es donde viven las reglas compartidas con el cromado.
 *
 * @package uts
 */

.uts-banner {
	position: relative;
	/*
	 * El fondo va aquí y no con «has-background» del núcleo: esa clase arrastra
	 * «padding: 1.25em 2.375em», que a 1440 px queda escondido tras el centrado
	 * del contenedor pero a 320 px se come 66 px de ancho.
	 */
	background: var(--wp--preset--color--verde-oscuro);
	/*
	 * Recorte SÓLO a los lados. La estampa del sello arranca un 35 % más grande
	 * y girada; hasta ~1180 px de pantalla ese tamaño momentáneo se salía por
	 * la derecha, y durante casi un segundo la portada tenía barra horizontal
	 * y daba un salto (medido: 1192 px de página en 1180). «clip», y no
	 * «hidden», porque no convierte el banner en caja de desplazamiento ni
	 * obliga a recortar arriba: el sello sigue montando sobre la franja de
	 * accesos.
	 */
	overflow-x: clip;
}

/*
 * El recorte va en el carrusel y no en .uts-banner: así el sello de
 * acreditación puede sobresalir por arriba, sobre la franja de accesos.
 */
.uts-carrusel {
	position: relative;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Sello de acreditación (sólo portada, sólo escritorio)
   -------------------------------------------------------------------------- */

.uts-banner__sello {
	display: none;
}

@media (min-width: 1024px) {
	.uts-banner__sello {
		--sello-tamano: 124px;

		display: block;
		position: absolute;
		z-index: 5;
		/*
		 * Monta 6 px sobre la franja de accesos, a unos 8 px por debajo de sus
		 * botones, y el resto cae sobre la esquina del banner, que está libre:
		 * el titular va a la izquierda y más abajo.
		 */
		top: -6px;
		/* Alineado con el borde derecho del contenedor de 1.200 px. */
		right: max( var(--wp--preset--spacing--50), calc( ( 100% - var(--wp--style--global--wide-size) ) / 2 ) );
		width: var(--sello-tamano);
		height: var(--sello-tamano);
		padding: 6px;
		border-radius: 50%;
		/* Disco blanco detrás: separa el morado del verde oscuro del banner. */
		background: var(--wp--preset--color--blanco);
		box-shadow:
			0 12px 28px -8px rgb(0 0 0 / 0.45),
			0 2px 6px rgb(0 0 0 / 0.25);
		transform: rotate(-8deg);
		pointer-events: none;
		animation: uts-sello-estampa 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.35s both;
	}

	.uts-banner__sello img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

/* La estampa: cae un poco grande y girada, y asienta. Una sola vez, al cargar. */
@keyframes uts-sello-estampa {
	from {
		opacity: 0;
		transform: rotate(-18deg) scale(1.35);
	}
	to {
		opacity: 1;
		transform: rotate(-8deg) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.uts-banner__sello {
		animation: none;
	}
}

/* El widget «Detener animaciones» del flotante de accesibilidad también la para. */
.uts-sin-animaciones .uts-banner__sello {
	animation: none;
}

/*
 * Las diapositivas se apilan en la MISMA celda de una rejilla de una sola
 * casilla. Así el alto lo marca la más alta y el carrusel no da un salto de
 * maquetación al cambiar de mensaje, que es el defecto más visible de los
 * carruseles hechos con posición absoluta.
 */
.uts-carrusel__pista {
	display: grid;
}

.uts-diapositiva {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--wp--custom--banner--alto);
	opacity: 0;
	/*
	 * «visibility» y no «display» para las inactivas: quita el foco del
	 * teclado igual que «display:none» —es el respaldo de «inert» en los
	 * navegadores que aún no lo traen— pero permite el fundido.
	 */
	visibility: hidden;
	transition:
		opacity var(--wp--custom--transicion--panel) var(--wp--custom--transicion--curva),
		visibility 0s linear var(--wp--custom--transicion--panel);
}

.uts-diapositiva.esta-activa {
	opacity: 1;
	visibility: visible;
	transition:
		opacity var(--wp--custom--transicion--panel) var(--wp--custom--transicion--curva),
		visibility 0s;
}

/* --------------------------------------------------------------------------
   El fondo de cada diapositiva
   -------------------------------------------------------------------------- */

.uts-diapositiva__medio {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.uts-diapositiva__poster,
.uts-diapositiva__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	max-width: none;
}

.uts-diapositiva__video {
	opacity: 0;
	transition: opacity var(--wp--custom--transicion--base);
}

.uts-diapositiva__medio.tiene-video .uts-diapositiva__video {
	opacity: 1;
}

/*
 * Dos velos y no uno. El de 90° es el que sostiene el contraste del texto: a
 * la izquierda deja el verde oscuro casi sólido y a la derecha destapa la
 * foto. El de 0° oscurece sólo el pie de la franja, para que los controles se
 * despeguen de un fotograma claro.
 */
.uts-diapositiva__velo {
	position: absolute;
	inset: 0;
	display: block;
	background: var(--wp--custom--banner--velo);
}

.uts-diapositiva__velo--pie {
	background: var(--wp--custom--banner--velo-pie);
}

/* --------------------------------------------------------------------------
   El contenido
   -------------------------------------------------------------------------- */

/*
 * El contenido sube un poco al entrar, algo después de que la foto termine de
 * fundirse. Un carrusel que sólo cruza opacidades se lee como un cambio de
 * imagen; con este medio segundo escalonado se lee como un mensaje nuevo.
 *
 * En la primera diapositiva no se nota nada: llega del servidor ya con la clase
 * «esta-activa», así que no hay cambio de clase que dispare la transición y el
 * texto se pinta en su sitio. Y con «prefers-reduced-motion» la regla global de
 * style.css anula la transición entera.
 */
.uts-diapositiva__interior > * {
	transform: translateY( 10px );
	transition: transform var(--wp--custom--transicion--entrada) var(--wp--custom--transicion--curva) 60ms;
}

.uts-diapositiva.esta-activa .uts-diapositiva__interior > * {
	transform: none;
}

.uts-diapositiva__interior {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--70);
	padding-block: calc( var(--wp--preset--spacing--80) * 2 );
}

/* Sin imagen lateral, la columna de texto no cruza la mitad de la franja: a
   partir de ahí el velo ya aclara y el contraste cae. */
.uts-diapositiva__columna {
	flex: 1 1 auto;
	max-width: 560px;
	min-width: 0;
}

.uts-diapositiva.tiene-lateral .uts-diapositiva__columna {
	max-width: none;
}

.uts-diapositiva__lateral {
	flex: 0 0 var(--wp--custom--banner--lateral);
	min-width: 0;
}

/*
 * La imagen manda sobre la caja, no al revés: se encoge hasta caber tanto de
 * ancho como de alto y conserva su proporción. El tope de alto no es estético,
 * es lo que impide que una imagen vertical estire el hero muy por encima de los
 * 660 px del diseño; sin él, cada banner medía una cosa distinta.
 */
.uts-diapositiva__lateral-img {
	display: block;
	box-sizing: border-box;
	/*
	 * Los dos «auto» son imprescindibles. «wp_get_attachment_image» escribe
	 * width y height en el HTML —hacen falta para que no salte la maqueta al
	 * cargar—, y con esas medidas fijas «max-width» y «max-height» recortan
	 * cada eje por su cuenta y deforman la foto. Con los dos en «auto» el
	 * navegador aplica el reparto que conserva la proporción y se queda con el
	 * límite que más apriete.
	 */
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--wp--custom--banner--lateral-alto);
	margin-inline: auto;
	transition:
		box-shadow var(--wp--custom--transicion--base),
		filter var(--wp--custom--transicion--base),
		transform var(--wp--custom--transicion--base);
}

/*
 * Foto opaca: filete blanco, esquinas de 8 px y sombra. El filete es lo que la
 * separa del fondo —sobre una foto oscura una sombra sola no se ve— y el
 * blanco es el único color que funciona encima de cualquier fotograma.
 *
 * Los 2 px van literales y no con un token de espaciado porque la escala del
 * tema empieza en 4 px: esto es un filete, no un margen.
 */
.uts-diapositiva__lateral.tiene-marco .uts-diapositiva__lateral-img {
	padding: 2px;
	border-radius: var(--wp--custom--radio--base);
	background: var(--wp--preset--color--blanco);
	box-shadow: var(--wp--custom--banner--lateral-sombra);
}

/*
 * PNG recortado —un sello, un logo, la mascota—: nada de marco, que dibujaría
 * un recuadro blanco alrededor de nada. La sombra se aplica con «filter», que
 * sigue la silueta del alfa en vez del rectángulo. Es el mismo trato que el
 * lienzo aprobado le da al sello de acreditación.
 */
.uts-diapositiva__lateral.es-recorte .uts-diapositiva__lateral-img {
	filter: var(--wp--custom--banner--lateral-recorte);
}

/*
 * Cuando la imagen es enlace tiene que responder al puntero y al toque. El
 * anillo de foco lo pone style.css, que ya cubre cualquier «a» del banner.
 */
.uts-diapositiva__lateral a {
	display: block;
	text-decoration: none;
}

.uts-diapositiva__lateral a:hover .uts-diapositiva__lateral-img,
.uts-diapositiva__lateral a:focus-visible .uts-diapositiva__lateral-img {
	transform: translateY( -4px );
}

.uts-diapositiva__lateral.tiene-marco a:hover .uts-diapositiva__lateral-img,
.uts-diapositiva__lateral.tiene-marco a:focus-visible .uts-diapositiva__lateral-img {
	box-shadow: var(--wp--custom--banner--lateral-sombra-alta);
}

.uts-diapositiva__lateral.es-recorte a:hover .uts-diapositiva__lateral-img,
.uts-diapositiva__lateral.es-recorte a:focus-visible .uts-diapositiva__lateral-img {
	filter: var(--wp--custom--banner--lateral-recorte-alto);
}

/* Regla 4 · en móvil no hay hover, así que el toque necesita respuesta. */
.uts-diapositiva__lateral a:active .uts-diapositiva__lateral-img {
	transform: translateY( 0 );
	transition-duration: var(--wp--custom--transicion--pulsa);
}

.uts-diapositiva__insignia {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	gap: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radio--chico);
	background: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 600;
	line-height: 1.2;
}

.uts-diapositiva__insignia svg {
	flex: none;
}

.uts-diapositiva__titulo {
	margin: 0 0 var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--raleway);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	overflow-wrap: break-word;
}

/*
 * Tres tramos por largo del titular. El corte de «corto» son 52 caracteres y
 * no 32: el titular aprobado por las directivas tiene 49, y con el corte en 32
 * el propio diseño validado salía un escalón más pequeño que el diseño
 * validado. Los tramos están para que un titular largo no reviente la maqueta.
 */
.uts-diapositiva__titulo.es-corto {
	font-size: var(--wp--preset--font-size--titulo-1);
}

.uts-diapositiva__titulo.es-medio {
	font-size: var(--wp--custom--banner--titulo-medio);
}

.uts-diapositiva__titulo.es-largo {
	font-size: var(--wp--custom--banner--titulo-largo);
	line-height: 1.15;
}

/*
 * El limón sobre el verde oscuro rinde 8,99:1. Es el único sitio del hero
 * donde el limón es texto, y lo es porque el fondo es oscuro: sobre papel o
 * sobre blanco este color no se usa nunca para texto.
 */
.uts-diapositiva__limon {
	color: var(--wp--preset--color--verde-limon);
}

/*
 * La bajada subió el 2 de octubre (16/14 px → 21/19 px en escritorio, 18/17 en
 * móvil): el titular y la bajada ocupaban poco más de la mitad del alto del
 * banner y el texto se leía pequeño frente al titular. El ancho crece con ella
 * para no sumar líneas.
 */
.uts-diapositiva__bajada {
	max-width: var(--wp--custom--banner--bajada-ancho);
	margin: 0 0 var(--wp--preset--spacing--70);
	color: var(--wp--custom--banner--texto);
	line-height: 1.65;
}

.uts-diapositiva__bajada.es-corto {
	font-size: var(--wp--custom--banner--bajada-corta);
}

.uts-diapositiva__bajada.es-largo {
	font-size: var(--wp--custom--banner--bajada-larga);
	line-height: 1.6;
}

.uts-diapositiva.tiene-lateral .uts-diapositiva__bajada {
	max-width: none;
}

/* --------------------------------------------------------------------------
   Los botones

   Son enlaces del tema, no core/button: el contenido sale de la base de datos
   y no del editor de bloques. Todo lleva «.uts-banner» delante para ganarle al
   color de enlace que theme.json pone en «elements.link».
   -------------------------------------------------------------------------- */

.uts-diapositiva__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
}

.uts-banner .uts-diapositiva__accion {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	box-sizing: border-box;
	/* SC 2.5.8 · objetivo táctil, con holgura por ir sobre foto. */
	min-height: var(--wp--custom--banner--control);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radio--chico);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition:
		background-color var(--wp--custom--transicion--base),
		border-color var(--wp--custom--transicion--base),
		color var(--wp--custom--transicion--base);
}

.uts-banner .uts-diapositiva__accion svg {
	flex: none;
}

.uts-banner .uts-diapositiva__accion--principal {
	background-color: var(--wp--preset--color--verde-escudo);
	border-color: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--blanco);
}

.uts-banner .uts-diapositiva__accion--fantasma {
	background-color: var(--wp--custom--banner--fantasma-fondo);
	border-color: var(--wp--custom--banner--fantasma-trazo);
	color: var(--wp--preset--color--blanco);
	font-weight: 600;
}

/*
 * El realce del núcleo lleva los botones a verde oscuro, que es justo el fondo
 * del hero: el botón se disolvía. Sobre verde oscuro el realce es limón, con
 * el texto oscuro encima.
 */
.uts-banner .uts-diapositiva__accion:hover,
.uts-banner .uts-diapositiva__accion:focus,
.uts-banner .uts-diapositiva__accion:active {
	background-color: var(--wp--preset--color--verde-limon);
	border-color: var(--wp--preset--color--verde-limon);
	color: var(--wp--preset--color--verde-oscuro);
	text-decoration: none;
}

/* Regla 4 · en móvil no hay hover, así que el toque necesita respuesta. */
.uts-banner .uts-diapositiva__accion:active {
	transition-duration: var(--wp--custom--transicion--pulsa);
}

/* --------------------------------------------------------------------------
   Los controles

   Un solo grupo, centrado abajo: al borde izquierdo vive la pestaña de
   accesibilidad y abajo a la derecha la burbuja de chat, las dos fijas al
   viewport. Centrado no choca con ninguna de las dos.
   -------------------------------------------------------------------------- */

.uts-carrusel__controles {
	position: absolute;
	left: 50%;
	bottom: var(--wp--preset--spacing--60);
	transform: translateX( -50% );
	z-index: 3;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.uts-carrusel__flecha,
.uts-carrusel__pausa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--banner--control);
	height: var(--wp--custom--banner--control);
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radio--pastilla);
	background: var(--wp--preset--color--verde-oscuro);
	color: var(--wp--preset--color--blanco);
	/* Anillo blanco: sobre un video el fondo cambia en cada fotograma y sin él
	   el control desaparece contra los claros. */
	box-shadow: var(--wp--custom--sombra--flotante);
	cursor: pointer;
	transition:
		background var(--wp--custom--transicion--base),
		color var(--wp--custom--transicion--base);
}

.uts-carrusel__flecha:hover,
.uts-carrusel__flecha:focus-visible,
.uts-carrusel__pausa:hover,
.uts-carrusel__pausa:focus-visible {
	background: var(--wp--preset--color--verde-limon);
	color: var(--wp--preset--color--verde-oscuro);
}

.uts-carrusel__flecha:active,
.uts-carrusel__pausa:active {
	background: var(--wp--preset--color--verde-limon);
	color: var(--wp--preset--color--verde-oscuro);
	transition-duration: var(--wp--custom--transicion--pulsa);
}

/*
 * «hidden» es un atributo del navegador y su «display:none» viene de la hoja
 * del agente de usuario, que pierde contra cualquier clase.
 */
.uts-carrusel__pausa[hidden] {
	display: none;
}

/* Un solo botón con los dos iconos dentro: se cambia cuál se ve, no el DOM. */
.uts-carrusel__pausa .uts-icono-play,
.uts-carrusel__pausa.esta-pausado .uts-icono-pausa {
	display: none;
}

.uts-carrusel__pausa.esta-pausado .uts-icono-play {
	display: block;
}

.uts-carrusel__puntos {
	display: flex;
	align-items: center;
}

/*
 * El punto mide 4 px pero se pulsa en una caja de 24 × 44. En el artboard eran
 * marcas decorativas y podían ir a 6 px; ahora son controles y tienen que
 * cumplir el objetivo táctil (SC 2.5.8).
 */
.uts-carrusel__punto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--preset--spacing--60);
	height: var(--wp--custom--banner--control);
	padding: 0 var(--wp--preset--spacing--30);
	border: 0;
	background: none;
	cursor: pointer;
}

.uts-carrusel__punto > span {
	display: block;
	width: var(--wp--preset--spacing--30);
	height: 4px;
	border-radius: var(--wp--custom--radio--chico);
	background: var(--wp--custom--banner--marca);
	transition:
		width var(--wp--custom--transicion--base),
		background var(--wp--custom--transicion--base);
}

.uts-carrusel__punto.esta-activo > span {
	width: var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--verde-limon);
}

.uts-carrusel__punto:hover > span,
.uts-carrusel__punto:focus-visible > span {
	background: var(--wp--preset--color--blanco);
}

.uts-carrusel__punto.esta-activo:hover > span,
.uts-carrusel__punto.esta-activo:focus-visible > span {
	background: var(--wp--preset--color--verde-limon);
}

/* --------------------------------------------------------------------------
   Móvil · validado a 390 px y a 320 px
   -------------------------------------------------------------------------- */

@media ( max-width: 900px ) {

	/*
	 * En móvil el fondo se queda en la foto —«banner.js» no baja el video— y
	 * el velo pasa a 170°: en una columna estrecha el degradado horizontal
	 * dejaba la mitad del texto sobre la parte clara de la foto.
	 */
	.uts-diapositiva {
		display: block;
		/*
		 * Mínimo, no alto fijo. Con alto fijo, un titular largo o el texto
		 * ampliado al 200 % —que el widget de accesibilidad permite y la norma
		 * exige— recorta el contenido siempre.
		 */
		min-height: var(--wp--custom--banner--alto-movil);
	}

	.uts-diapositiva__velo {
		background: var(--wp--custom--banner--velo-movil);
	}

	/* Aquí los controles ya no van sobre la foto: el segundo velo sobra. */
	.uts-diapositiva__velo--pie {
		display: none;
	}

	.uts-diapositiva__interior {
		display: block;
		padding-block: var(--wp--preset--spacing--70);
	}

	.uts-diapositiva__columna,
	.uts-diapositiva__bajada {
		max-width: none;
	}

	/* A 320 px los dos botones no caben lado a lado: se apilan a todo el ancho. */
	.uts-diapositiva__acciones {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * La imagen lateral se oculta salvo que la enciendan banner a banner, y
	 * cuando se enciende va DEBAJO de los botones, nunca encima del titular:
	 * arriba empujaría el mensaje fuera de la primera pantalla.
	 */
	.uts-diapositiva__lateral {
		display: none;
	}

	.uts-diapositiva.lateral-en-movil .uts-diapositiva__lateral {
		display: block;
		margin-block-start: var(--wp--preset--spacing--70);
	}

	/*
	 * Los controles entran en el flujo, debajo del contenido. Flotando a los
	 * lados sobre la foto se comerían el texto a 390 px.
	 */
	.uts-carrusel__controles {
		position: static;
		transform: none;
		justify-content: center;
		padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	}
}