/* Las piezas que en la web de Framer montaba su runtime en JavaScript y que
   por tanto no estaban en el HTML: el carrusel, el vídeo, el menú de móvil y
   los iconos. Las medidas salen de medir la web publicada. */

/* --- Iconos dibujados ---------------------------------------------------- */
svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* --- Carrusel de noticias ------------------------------------------------
   Vertical, un elemento a la vista, hueco de 10 px entre tarjetas y salto
   automático cada 4 s. Las tarjetas se repiten cuatro veces para que el bucle
   no se note. */
.carrusel {
	position: relative;
	width: 100%;
	height: 100%;
}

.carrusel-ventana {
	position: absolute;
	inset: 0;
	border-radius: 20px;
	perspective: 1200px;
}

.carrusel-pista {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	gap: 10px;
	margin: 0;
	padding: 0;
	user-select: none;
}

.carrusel-hueco {
	display: contents;
}

.carrusel-tarjeta {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	transform-origin: 50% 100%;
}

.carrusel-flechas {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 0;
	margin: 0;
	padding: 0;
	pointer-events: none;
	user-select: none;
}

.carrusel-flechas-caja {
	position: absolute;
	inset: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.carrusel-flecha {
	width: 40px;
	height: 40px;
	border-radius: 40px;
	background-color: rgba(0, 0, 0, 0.2);
	overflow: hidden;
	pointer-events: auto;
	/* Las dos flechas son la misma imagen de «izquierda» y «derecha» giradas:
	   así es como lo hacía el original y así salen idénticas. */
	transform: rotate(90deg);
}

.carrusel-flecha img {
	width: 40px;
	height: 40px;
}

/* --- Vídeo de YouTube ----------------------------------------------------
   Sólo la miniatura hasta que alguien pulsa. Igual que en el original: así no
   se carga YouTube en cada visita. */
.video {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
	cursor: pointer;
}

.video-cartel {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.video-boton {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
}

.video-boton path:first-child {
	transition: fill 0.1s cubic-bezier(0.4, 0, 1, 1), fill-opacity 0.1s cubic-bezier(0.4, 0, 1, 1);
}

.video:hover .video-boton path:first-child {
	fill: #f00;
	fill-opacity: 1;
}

.video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* --- Menú de móvil -------------------------------------------------------
   Framer cambiaba de variante al abrirlo. Las reglas de la variante abierta
   (posición de los enlaces, alto de la barra) están en `maqueta.css`, con sus
   nombres; aquí sólo queda decidir qué se ve en cada estado. */
.navmovil-boton {
	display: flex;
	align-items: center;
	justify-content: center;
}

.navmovil-menu {
	display: none;
}

/* La fila de logotipo + hamburguesa. Con el menú cerrado no pinta nada
   (`display: contents`): la reparte la barra de siempre. Al abrirlo se
   convierte en la fila de 86 px de alto que tenía Framer. */
.navmovil-barra {
	display: contents;
}

.navmovil.variante-abierta .navmovil-barra {
	display: flex;
}

/* El botón de la hamburguesa es el mismo nodo en los dos estados, así que al
   abrir hay que deshacer los mínimos que sólo valen con la barra cerrada
   (Framer cambiaba de nodo y no se le planteaba el problema). */
.navmovil.variante-abierta .navmovil-caja-3 {
	min-width: 0;
	min-height: 0;
}

.navmovil.variante-abierta .navmovil-menu {
	display: flex;
}

.navmovil-menu p {
	color: #f2f2f2;
}

/* --- Iconos del pie ------------------------------------------------------ */
.icono-pie {
	width: 100%;
	height: 100%;
	color: rgb(240, 240, 245);
}