/*
  Página de cada encuentro.

  Las medidas salen de los mockups de docs/mockups/eventos/: "Eventos 1a…5b"
  a 1512 px de ancho y "Eventos-movil" a 360. Cada clamp() une esos dos
  puntos y llega a su máximo en 1440 px, como en el resto del sitio.

  Tres piezas: la cabecera con la portada, la tarjeta blanca montada sobre
  ella y, si hay videos, "¡Revive los mejores momentos!".
*/

/* ------------------------------------------------------------------ */
/* Cabecera                                                            */
/* ------------------------------------------------------------------ */

/*
  La cabecera es la primera sección: layout.css la sube por debajo del
  navbar. Aquí el padding de arriba es el alto del navbar justo: la portada
  arranca debajo de la barra (90.5 px del borde de la página en el mockup).
*/
.evento-cabecera {
	--primera-seccion-pt: var(--navbar-h);

	/* Lo que la tarjeta blanca se monta sobre la portada: 47.5 px → 33. */
	--solape: clamp(2.0625rem, 1.76rem + 1.343vw, 2.96875rem);

	/* De la tarjeta al pie (o a los videos): 107 px → 56. */
	padding-bottom: clamp(3.5rem, 2.44rem + 4.722vw, 6.6875rem);
}

/*
  La portada es una tarjeta más ancha que el contenedor: 23.5 px de margen a
  1512 (5.5 en móvil), radio 28 y 566.5 px de alto. Desde 1568 px deja de
  crecer y se centra, como todo el sitio.
*/
.evento-cabecera__escena {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	width: calc(100% - 2 * clamp(0.34375rem, -0.03rem + 1.667vw, 1.46875rem));
	max-width: 1520px;
	min-height: 35.40625rem;
	margin-inline: auto;
	padding-block: 3rem calc(var(--solape) + 1rem);
	overflow: hidden;
	border-radius: clamp(1rem, 0.75rem + 1.111vw, 1.75rem);
	background-color: var(--bg-dark);
	color: var(--text-1);
}

.evento-cabecera__portada {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/*
  Portadas que son una diapositiva: el texto de la diapositiva quedaría
  detrás del título. Desenfocada conserva sus colores y deja de competir.
  Se agranda un poco para que el desenfoque no aclare los bordes.
*/
.evento-cabecera__escena--desenfoque .evento-cabecera__portada {
	filter: blur(14px);
	transform: scale(1.08);
}

/*
  Las portadas de Wix ya traen su degradado: azul noche a la izquierda,
  donde va el título, y celeste a la derecha, donde van el texto y el botón.
  Las demás lo reciben aquí, con los mismos tonos y más firme detrás del
  título: muchas son capturas de Zoom, llenas de caras y nombres, y no deben
  competir con el texto. La persona de la foto queda en el centro, entre las
  dos columnas.
*/
.evento-cabecera__escena--velo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg,
			rgba(10, 14, 34, 0.92) 0%,
			rgba(10, 14, 34, 0.78) 38%,
			rgba(10, 14, 34, 0.35) 56%,
			rgba(11, 129, 170, 0.55) 72%,
			rgba(14, 187, 227, 0.8) 100%),
		rgba(10, 14, 34, 0.2);
}

.evento-cabecera__contenido {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 28.5rem);
	column-gap: 3rem;
	align-items: center;
	padding-right: 3.5rem; /* el texto termina 59 px antes del borde del contenedor */
}

/* Título: 59 px en 600 y renglones de 78, como el mockup (nunca menos de 30). */
.evento-cabecera__titulo {
	margin: 0;
	font-size: clamp(1.875rem, 1.271rem + 2.685vw, 3.6875rem);
	font-weight: 600;
	line-height: 1.32;
	text-wrap: wrap;
}

.evento-cabecera__resalte {
	color: var(--hover-cyan);
}

/* Tres banderas de 45.5 px, el número de países y la palabra "países". */
.evento-cabecera__paises {
	display: flex;
	align-items: center;
	gap: 1.40625rem;
}

.evento-cabecera__cifra {
	display: grid;
	margin: 0;
	line-height: 1;
}

.evento-cabecera__numero {
	font-size: 1.6rem;
	font-weight: 600;
}

.evento-cabecera__numero sup {
	margin-left: 0.08em;
	font-size: 0.8em;
	vertical-align: 0.45em;
	line-height: 0;
}

.evento-cabecera__unidad {
	margin-top: 0.15rem;
	color: var(--text-1-50);
	font-size: 1.25rem;
}

/* El texto del encuentro: 13.5 px con renglones de 22. */
.evento-cabecera__texto {
	margin-top: 2.2rem;
	font-size: 0.84375rem;
	line-height: 1.63;
}

.evento-cabecera__texto > * {
	margin: 0;
}

.evento-cabecera__texto > * + * {
	margin-top: 0.8em;
}

/*
  El botón del mockup: contorno celeste sobre un velo oscuro, 251 px de
  ancho. Al pasar el cursor se rellena de blanco con el texto azul noche.
*/
.evento-cabecera__boton {
	min-width: 15.6875rem;
	margin-top: 1.35rem;
	border-color: var(--cta);
	background-color: rgba(10, 14, 34, 0.3);
	color: var(--text-2);
	font-weight: 500;
}

.evento-cabecera__boton:hover,
.evento-cabecera__boton:focus-visible {
	border-color: var(--text-1);
	background-color: var(--text-1);
	color: var(--bg-dark);
}

/* ------------------------------------------------------------------ */
/* Banderas                                                            */
/* ------------------------------------------------------------------ */

/*
  Círculos que se montan un poco: 10.5 px sobre el anterior en los dos
  tamaños del mockup (el 23 % de las de la cabecera, el 29 % de las de la
  tarjeta). Cada una tapa a la siguiente, como en el original.
*/
.banderas {
	--bandera: 2.28125rem;
	--monta: 0.29;

	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.banderas--cabecera {
	--bandera: 2.84375rem;
	--monta: 0.23;
	flex-wrap: nowrap;
}

.banderas__item + .banderas__item {
	margin-left: calc(var(--bandera) * var(--monta) * -1);
}

.banderas__img {
	display: block;
	width: var(--bandera);
	height: var(--bandera);
	border-radius: 50%;
	object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* Tarjeta blanca                                                      */
/* ------------------------------------------------------------------ */

/*
  1340 × 190.5 a 1512: flecha, arte de 172.5, texto, banderas con la fecha
  y flecha. El texto va centrado en el alto; las banderas, arriba, a la
  altura de la píldora.
*/
.evento-tarjeta {
	position: relative;
	display: grid;
	grid-template-columns: 2.9375rem 10.78rem minmax(0, 1fr) auto 2.9375rem;
	grid-template-areas: "anterior arte cuerpo datos siguiente";
	column-gap: 1.3125rem;
	align-items: center;
	min-height: 11.90625rem;
	margin-top: calc(var(--solape) * -1);
	padding: 0.5625rem 0.75rem 0.5625rem 0.875rem;
	border-radius: clamp(1rem, 0.75rem + 1.111vw, 1.875rem);
	background-color: #FFFFFF;
	box-shadow: var(--sombra-tarjeta-clara);
	color: var(--bg-dark);
}

.evento-tarjeta__flecha {
	display: grid;
	place-items: center;
	width: 2.9375rem;
	height: 2.9375rem;
	border-radius: 50%;
	background-color: #FFFFFF;
	box-shadow: 0 1px 6px rgba(10, 14, 34, 0.18);
	color: var(--bg-dark);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.evento-tarjeta__flecha--anterior {
	grid-area: anterior;
}

.evento-tarjeta__flecha--siguiente {
	grid-area: siguiente;
}

.evento-tarjeta__flecha svg {
	width: 1.5rem;
	height: 1.5rem;
}

a.evento-tarjeta__flecha:hover,
a.evento-tarjeta__flecha:focus-visible {
	background-color: var(--bg-dark);
	color: var(--text-1);
}

/* Solo si hay un único encuentro la flecha queda apagada: la navegación es circular. */
.evento-tarjeta__flecha[aria-disabled="true"] {
	background-color: var(--bg-light);
	box-shadow: none;
	color: var(--text-3);
}

.evento-tarjeta__arte {
	grid-area: arte;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 12px;
	background-color: var(--bg-light);
}

.evento-tarjeta__arte img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.evento-tarjeta__cuerpo {
	grid-area: cuerpo;
}

/* Píldora de 26 px de alto, texto de 17.6 en 600. */
.evento-tarjeta__pildora {
	display: inline-flex;
	align-items: center;
	height: 1.625rem;
	margin: 0;
	padding-inline: 0.55rem;
	border-radius: var(--radius-pill);
	background-color: var(--cta);
	color: var(--text-1);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.evento-tarjeta__titular {
	margin: 0.375rem 0 0;
	font-size: clamp(1.25rem, 1.075rem + 0.787vw, 1.5625rem);
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}

.evento-tarjeta__resumen {
	max-width: 36.5em;
	margin: 0.85rem 0 0;
	color: var(--text-4);
	font-size: 0.85625rem;
	line-height: 1.64;
}

.evento-tarjeta__datos {
	grid-area: datos;
	align-self: start;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	max-width: 27rem; /* las 15 banderas de la Región Sur en una fila (410 px) */
	margin-right: 0.875rem;
	padding-top: 1.565rem;
}

.evento-tarjeta__datos .banderas {
	justify-content: flex-end;
}

.evento-tarjeta__fecha {
	margin: 0.87rem 0 0;
	font-size: 0.65625rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
  Entre 992 y 1300 px no caben el texto y una fila larga de banderas (las
  15 de la Región Sur) lado a lado: las banderas y la fecha bajan debajo
  del texto, alineadas con él.
*/
@media (min-width: 992px) and (max-width: 1300px) {
	.evento-tarjeta {
		grid-template-columns: 2.9375rem 10.78rem minmax(0, 1fr) 2.9375rem;
		grid-template-areas:
			"anterior arte cuerpo siguiente"
			"anterior arte datos siguiente";
		align-content: center;
		row-gap: 0.9rem;
	}

	.evento-tarjeta__flecha {
		grid-row: 1 / -1;
	}

	.evento-tarjeta__arte {
		grid-row: 1 / -1;
	}

	.evento-tarjeta__cuerpo {
		align-self: end;
	}

	.evento-tarjeta__datos {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem 1.25rem;
		max-width: none;
		margin-right: 0;
		padding-top: 0;
	}

	.evento-tarjeta__fecha {
		margin: 0;
	}
}

/* ------------------------------------------------------------------ */
/* ¡Revive los mejores momentos!                                       */
/* ------------------------------------------------------------------ */

/*
  Resplandor celeste a la izquierda, a la altura de las tarjetas, y un velo
  lila en la esquina de abajo a la derecha, como en el mockup. Los dos van
  por detrás y se cortan contra el pie.
*/
.evento-momentos {
	position: relative;
	isolation: isolate;
	padding-block: clamp(2.4rem, 2.12rem + 1.25vw, 3.0625rem) clamp(3rem, 2.78rem + 0.972vw, 4.0625rem);
}

.evento-momentos::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 0% 62%, rgba(14, 187, 227, 0.42), rgba(14, 187, 227, 0) min(26rem, 60vw)),
		radial-gradient(ellipse at 100% 100%, rgba(214, 220, 250, 0.8), rgba(214, 220, 250, 0) 32rem);
	pointer-events: none;
}

/* 31 px en 600 con renglones de 42, centrado. */
.evento-momentos__titulo {
	margin: 0;
	font-size: clamp(1.375rem, 1.188rem + 0.833vw, 1.9375rem);
	font-weight: 600;
	line-height: 1.355;
	text-align: center;
	text-wrap: wrap;
}

/*
  Tres columnas de 393.5 con 79 de hueco a 1512; dos en tablet y una en
  móvil. La rejilla decide sola cuántas caben.
*/
.evento-momentos__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: clamp(1rem, 0.3rem + 3.1vw, 3rem) clamp(1rem, -0.25rem + 5.556vw, 4.9375rem);
	margin: clamp(2.9rem, 2.07rem + 3.704vw, 5.4rem) 0 0;
	padding: 0;
	list-style: none;
}

.video__enlace {
	position: relative;
	display: grid;
	grid-template-columns: var(--foto) minmax(0, 1fr);
	column-gap: 0.78rem;
	align-items: center;
	padding: 0.59375rem;
	border-radius: 14px;
	background-color: #FFFFFF;
	box-shadow: var(--sombra-tarjeta-clara);
	color: var(--bg-dark);
	text-decoration: none;

	/* La foto: 138.5 px → 90. */
	--foto: clamp(5.625rem, 4.625rem + 4.444vw, 8.65625rem);
}

.video__foto {
	width: var(--foto);
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 12px;
	background-color: var(--bg-light);
}

.video__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Deja libre la esquina del botón de reproducir. */
.video__texto {
	display: grid;
	padding-right: 3.4rem;
}

.video__titulo {
	font-size: clamp(0.90625rem, 0.86rem + 0.231vw, 0.98125rem);
	font-weight: 600;
	line-height: 1.43;
}

.video__ponente {
	margin-top: 0.25rem;
	color: var(--text-4);
	font-size: 0.84375rem;
	font-weight: 500;
	line-height: 1.3;
}

.video__duracion {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: clamp(0.5rem, 0.36rem + 0.625vw, 1.1rem);
	color: #8A8A8A;
	font-size: 0.8125rem;
	line-height: 1;
}

.video__duracion svg {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--bg-dark);
}

/* Botón de reproducir: círculo blanco de 50 px en la esquina de abajo. */
.video__play {
	position: absolute;
	right: 0.34rem;
	bottom: 0.75rem;
	display: grid;
	place-items: center;
	width: clamp(2.5rem, 2.36rem + 0.625vw, 3.125rem);
	height: clamp(2.5rem, 2.36rem + 0.625vw, 3.125rem);
	border-radius: 50%;
	background-color: #FFFFFF;
	box-shadow: 0 1px 8px rgba(10, 14, 34, 0.18);
	color: var(--text-4);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.video__play svg {
	width: 45%;
	height: 45%;
	margin-left: 8%;
}

.video__enlace:hover .video__play,
.video__enlace:focus-visible .video__play {
	background-color: var(--bg-dark);
	color: var(--text-1);
}

/* ------------------------------------------------------------------ */
/* Ventana del video                                                   */
/* ------------------------------------------------------------------ */

.video-ventana {
	width: min(64rem, 100% - 2rem);
	padding: 3.25rem 0 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.video-ventana::backdrop {
	background-color: rgba(10, 14, 34, 0.8);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

html:has(dialog.video-ventana[open]) {
	overflow: hidden;
}

.video-ventana__marco {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 16px;
	background-color: #000;
}

.video-ventana__marco iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-ventana__cerrar {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	background-color: transparent;
	color: var(--text-1);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.video-ventana__cerrar:hover,
.video-ventana__cerrar:focus-visible {
	background-color: var(--text-1);
	color: var(--bg-dark);
}

.video-ventana__cerrar svg {
	width: 20px;
	height: 20px;
}

/* ------------------------------------------------------------------ */
/* Tablet: menú de hamburguesa, todo centrado                         */
/* ------------------------------------------------------------------ */

@media (max-width: 991px) {

	/*
	  Una sola columna, centrada. La portada queda detrás de todo el texto,
	  así que lleva un velo parejo encima del suyo para que se lea.
	*/
	.evento-cabecera__escena {
		min-height: 0;
		padding-block: 2.3rem calc(var(--solape) + 2.9rem);
	}

	.evento-cabecera__escena::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: rgba(10, 14, 34, 0.45);
	}

	.evento-cabecera__contenido {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2rem;
		padding-right: 0;
		text-align: center;
	}

	.evento-cabecera__lado {
		display: flex;
		flex-direction: column;
		align-items: center;
		max-width: 34rem;
		margin-inline: auto;
	}

	.evento-cabecera__texto {
		margin-top: 1.5rem;
		font-size: 0.875rem;
	}

	.evento-cabecera__boton {
		margin-top: 1.75rem;
	}

	/*
	  La tarjeta se apila: arte arriba, texto, banderas y fecha, todo
	  centrado. Las flechas quedan a los lados, a media altura.
	*/
	.evento-tarjeta {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"arte"
			"cuerpo"
			"datos";
		row-gap: 1.25rem;
		padding: 1.5rem 3.4rem 1.6rem;
		text-align: center;
	}

	.evento-tarjeta__flecha {
		position: absolute;
		top: 50%;
		width: 2.25rem;
		height: 2.25rem;
		translate: 0 -50%;
	}

	.evento-tarjeta__flecha--anterior {
		left: 0.5rem;
	}

	.evento-tarjeta__flecha--siguiente {
		right: 0.5rem;
	}

	.evento-tarjeta__flecha svg {
		width: 1.25rem;
		height: 1.25rem;
	}

	.evento-tarjeta__arte {
		width: 9rem;
		margin-inline: auto;
	}

	.evento-tarjeta__pildora {
		white-space: normal;
		height: auto;
		min-height: 1.625rem;
		padding-block: 0.2rem;
		text-align: center;
	}

	.evento-tarjeta__titular {
		margin-top: 0.75rem;
	}

	.evento-tarjeta__resumen {
		margin: 0.5rem auto 0;
	}

	.evento-tarjeta__datos {
		align-self: auto;
		align-items: center;
		max-width: none;
		margin-right: 0;
		padding-top: 0;
	}

	.evento-tarjeta__datos .banderas {
		justify-content: center;
	}

	.evento-tarjeta__fecha {
		font-size: 0.75rem;
		white-space: normal;
	}
}

/* ------------------------------------------------------------------ */
/* Móvil                                                               */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {

	/* Como en el mockup de móvil, la tarjeta no lleva el arte. */
	.evento-tarjeta__arte {
		display: none;
	}

	.evento-tarjeta__pildora {
		font-size: 0.8125rem;
		padding-inline: 0.75rem;
	}

	.banderas {
		--bandera: 1.5rem;
		justify-content: center;
	}

	/*
	  Las banderas y la fecha quedan debajo de las flechas: pueden usar todo
	  el ancho de la tarjeta. Así caben en una fila las 15 de la Región Sur.
	*/
	.evento-tarjeta__datos {
		margin-inline: -2.4rem;
	}

	.banderas--cabecera {
		--bandera: 2rem;
	}

	.evento-cabecera__numero {
		font-size: 1.3rem;
	}

	.evento-cabecera__unidad {
		font-size: 1rem;
	}

	.evento-cabecera__paises {
		gap: 0.9rem;
	}

	/* La tarjeta de video: la foto de 90 y el botón a media altura. */
	.video__enlace {
		border-radius: 16px;
	}

	.video__play {
		top: 50%;
		right: 0.6rem;
		bottom: auto;
		translate: 0 -50%;
	}
}

@media (max-width: 479px) {

	/* Los cortes del título son del escritorio: en el teléfono se reparte solo. */
	.evento-cabecera__corte {
		display: none;
	}

	.evento-cabecera__titulo {
		text-wrap: balance;
	}

	.evento-cabecera__boton {
		width: 100%;
		min-width: 0;
	}
}