/*
  Landing del encuentro de noviembre: "Reimaginando el aula".

  El mockup (docs/mockups/evento-noviembre/, 1512 px) da la idea y la
  geometría; los tamaños de letra, botones y tarjetas son los del resto del
  sitio (decisión de la directora, 27/09/2026): el título mide lo mismo que
  los de Miembros, Nosotros y Encuentros, y las tarjetas son las de
  Encuentros con el cristal del Home. Cada clamp() une 360 y 1440 px.
*/

/*
  Variables propias de la landing. (El azul #0A0E22 de esta página pasó a
  todo el sitio el 28/09/2026: ahora es el --bg-dark de base.css.)
*/
:root {
	/*
	  El halo de las tarjetas de esta página. El del resto del sitio
	  (--brillo-tarjeta, 24 px) se veía demasiado extendido; este es el del
	  mockup de las cifras: claro al 20 %, 4 px de ancho y 8 de desenfoque.
	*/
	--brillo-evento: 0 0 8px 4px rgba(255, 255, 255, 0.2);

	/*
	  La curva de la agenda: 530 × 165 px en el mockup; aquí, un 17 % más
	  chica, como el resto de la agenda (decisión de la directora,
	  28/09/2026): 440 a 1512 y nunca menos de 216. El alto sigue al ancho.
	*/
	--muesca-w: clamp(13.5rem, 29.1vw, 27.5rem);
	--muesca-h: calc(var(--muesca-w) * 0.3113);
}

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

/*
  La primera sección: layout.css la sube por debajo del navbar. El padding
  de arriba va en la escena, que es la que lleva la foto, para que la foto
  arranque en el borde superior de la página.
*/
.evento-cabecera {
	--primera-seccion-pt: 0px;

	/* Lo que las tarjetas se montan sobre la foto: 56 px en el mockup. */
	--solape: 3.5rem;

	background-color: var(--bg-dark);
	padding-bottom: clamp(5rem, 4rem + 4.444vw, 8rem);
}

.evento-cabecera__escena {
	position: relative;
	isolation: isolate;
	background-color: var(--bg-dark);
	text-align: center;

	/*
	  Con estos dos paddings la escena mide 780 px a 1512, casi los 791 del
	  mockup, y la foto queda encuadrada como en él.
	*/
	padding-top: calc(var(--navbar-h) + clamp(6rem, 3.567rem + 10.815vw, 13.3rem));

	/* Del botón al final de la foto; incluye lo que se montan las tarjetas. */
	padding-bottom: clamp(7rem, 5.792rem + 5.37vw, 10.625rem);
}

/*
  En el mockup la foto mide 1512 × 848 y se recorta 57 px por arriba y nada
  por abajo. Con el 80 % sale casi igual a 1512 y, en pantallas más anchas,
  el recorte no se come todo el brazo robótico por arriba.
*/
.evento-cabecera__foto {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 80%;
}

/*
  El velo, medido del archivo del mockup: la foto entera bajo #0A0E22 al
  40 %, y encima un degradado del mismo color que la oscurece del todo en
  el borde superior y se apaga a los 275 px, detrás del navbar.
*/
.evento-cabecera__escena::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to bottom, #0A0E22 0, rgba(10, 14, 34, 0) 275px),
		rgba(10, 14, 34, 0.4);
	pointer-events: none;
}

.evento-cabecera__texto {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--text-1);
}

/*
  81 px como los títulos de las demás páginas, nunca menos de 40. En
  teléfonos más angostos que 360 el min() lo achica para que "Reimaginando
  el" no se parta. La sombra es la del mockup.
*/
.evento-cabecera__titulo {
	font-size: min(clamp(2.5rem, 1.646rem + 3.796vw, 5.0625rem), 11.5vw);
	line-height: 1.1;
	text-shadow: 0 4px 7px rgba(0, 0, 0, 0.25);
}

/* "aula", sola en su renglón y en el celeste del mockup. */
.evento-cabecera__destacado {
	display: block;
	color: var(--celeste-claro);
}

/* 21 px como el subtítulo de Nosotros, 16 en móvil. */
.evento-cabecera__bajada {
	max-width: 36em;
	margin-top: clamp(1rem, 0.917rem + 0.37vw, 1.25rem);
	font-size: clamp(1rem, 0.896rem + 0.463vw, 1.3125rem);
	line-height: 1.3;
	text-transform: uppercase;
	text-wrap: balance;
}

.evento-cabecera__boton {
	margin-top: clamp(1.875rem, 1.667rem + 0.926vw, 2.5rem);
	padding-inline: 2rem;
}

/* ------------------------------------------------------------------ */
/* Las tres tarjetas: Anfitriones, Fecha, Lugar                        */
/* ------------------------------------------------------------------ */

/*
  Las medidas de las tarjetas de formato de Encuentros —tres de 349 con 18
  de hueco— y el cristal de las tarjetas del Home, que es el que dibuja el
  mockup (blanco al 10 %).
*/
.evento-cabecera__datos {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.125rem;
	max-width: 1084px;
	margin-top: calc(var(--solape) * -1);
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}

.evento-dato {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.5rem 0.75rem 1.625rem;
	border-radius: 20px;
	background-color: var(--glass);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: var(--brillo-evento);
	color: var(--text-1);
	text-align: center;
	line-height: 1.3;
}

/* Etiqueta y dato al tamaño de los nombres de las tarjetas de Encuentros. */
.evento-dato__etiqueta {
	font-size: 1.175rem;
	font-weight: 700;
	text-transform: uppercase;
}

.evento-dato__valor {
	margin-top: 0.4rem;
	font-size: 1.175rem;
}

.evento-dato__detalle {
	margin-top: 0.15rem;
	font-size: 0.979rem;
	color: var(--text-2);
}

/* ------------------------------------------------------------------ */
/* Reimaginando la educación                                           */
/* ------------------------------------------------------------------ */

/*
  Del final de las tarjetas de la cabecera a las cifras: 167 px en el
  mockup (los 128 del padding de la cabecera y 40 de aquí).
*/
.evento-educacion {
	padding-top: clamp(0rem, -0.833rem + 3.704vw, 2.5rem);
	padding-bottom: clamp(5rem, 4rem + 4.444vw, 8rem);
	color: var(--text-1);
}

/*
  El ancho del mockup, 1206 px: del borde izquierdo de la primera tarjeta
  de la cabecera al derecho de la última, en su diseño.
*/
.evento-educacion__contenido {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 605px);
	column-gap: clamp(2rem, 0.5rem + 4vw, 6.25rem);
	align-items: center;
	max-width: 1206px;
}

/* Título y bajada con los tamaños de las secciones de Encuentros. */
.evento-educacion__titulo {
	font-size: clamp(1.75rem, 1.486rem + 1.176vw, 2.544rem);
	font-weight: 600;
	line-height: 1.2;
	text-wrap: wrap;
}

.evento-educacion__bajada {
	max-width: 30.2em;
	margin-top: clamp(1rem, 0.75rem + 1.111vw, 1.75rem);
	font-size: 0.979rem;
	line-height: 1.6;
}

/* Apilados, cada uno de su ancho, como en la cabecera de Encuentros. */
.evento-educacion__botones {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6875rem;
	margin-top: clamp(1.875rem, 1.667rem + 0.926vw, 2.5rem);
}

/*
  Las tres cifras, en escalera. La caja mide 605 × 452 en el mockup y cada
  tarjeta 250 × 200; las posiciones van en % de la caja y las letras en
  cqi, así la escalera entera se achica sin descomponerse.
*/
.evento-cifras {
	container-type: inline-size;
	position: relative;
	width: min(100%, 605px);
	aspect-ratio: 605 / 452;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evento-cifra {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 41.32%;
	height: 44.25%;
	border-radius: 3.97cqi; /* 24 px a 605 */
	box-shadow: var(--brillo-evento);
	color: var(--bg-dark);
	text-align: center;
}

/* 20+ Conferencistas: arriba a la izquierda. */
.evento-cifra:nth-child(1) {
	top: 0;
	left: 0;
	background-color: var(--celeste-hielo);
}

/* 10+ Países: a la derecha, 94 px más abajo. */
.evento-cifra:nth-child(2) {
	top: 20.8%;
	left: 58.68%;
	background-color: var(--celeste-claro);
}

/* 8 Ejes temáticos: abajo, 54 px a la derecha de la primera. */
.evento-cifra:nth-child(3) {
	top: 55.75%;
	left: 8.93%;
	background-color: var(--bg-light);
}

/* 70 px y 24 px a 605, medidos. */
.evento-cifra__numero {
	font-size: 11.57cqi;
	font-weight: 700;
	line-height: 1;
}

.evento-cifra__mas {
	margin-left: 0.12em;
}

.evento-cifra__etiqueta {
	margin-top: 0.35em;
	font-size: max(0.8125rem, 3.97cqi);
	font-weight: 600;
	line-height: 1.2;
}

/* ------------------------------------------------------------------ */
/* Nos vemos en: la cuenta regresiva                                   */
/* ------------------------------------------------------------------ */

/*
  Del final de las cifras a la pestaña de la franja: 236 px en el mockup
  (los 128 de la sección anterior y 108 de aquí).
*/
.evento-cuenta {
	/*
	  La pestaña del centro: 950 × 53.5 px en el mockup. Ancho y alto bajan
	  juntos, así las curvas nunca se deforman.
	*/
	--pestana-w: clamp(20.75rem, 62.83vw, 59.375rem);
	--pestana-h: clamp(1.17rem, 3.54vw, 3.344rem);

	overflow-x: clip;
	padding-top: clamp(1rem, -0.917rem + 8.519vw, 6.75rem);
	padding-bottom: clamp(5rem, 4rem + 4.444vw, 8rem);
	color: var(--text-1);
}

.evento-cuenta__vidrio {
	--pestana-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 949.76 55' preserveAspectRatio='none'%3E%3Cpath d='M0 53.5C24.688 53.5 48.504 44.37 66.862 27.86L69.332 25.64C87.69 9.13 111.506 0 136.194 0H815.437C840.427 0 864.457 9.57 882.597 26.75C900.737 43.93 924.767 53.5 949.757 53.5V55H0Z'/%3E%3C/svg%3E");
	--forma:
		var(--pestana-svg) center top / var(--pestana-w) calc(var(--pestana-h) + 2px) no-repeat,
		linear-gradient(#000, #000) 0 var(--pestana-h) / 100% 100% no-repeat;

	position: relative;
}

/*
  El brillo celeste del canto, del mockup (#82DBFA, 10 de desenfoque). Es
  una copia de la forma de la franja, desenfocada y por detrás: el filtro va
  en la caja de fuera porque, en la misma, la máscara recortaría el
  desenfoque. No va como filtro del envoltorio porque difuminaría también
  los círculos.
*/
.evento-cuenta__brillo {
	position: absolute;
	inset: 0;
	z-index: 0;
	filter: blur(10px);
	pointer-events: none;
}

.evento-cuenta__brillo > span {
	position: absolute;
	inset: 0;
	background-color: rgba(130, 219, 250, 0.18);
	-webkit-mask: var(--forma);
	mask: var(--forma);
}

/*
  Lo que se ve a través del vidrio: dos círculos de color con el borde
  bastante definido. Fuera de la franja se ven nítidos y dentro, borrosos:
  ese contraste es lo que se lee como vidrio.
*/
.evento-cuenta__resplandor {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
}

/* Celeste, a caballo del borde de arriba, a la izquierda de la pestaña. */
.evento-cuenta__resplandor--1 {
	--d: clamp(6rem, 4rem + 8vw, 12rem);

	top: calc(var(--pestana-h) - var(--d) / 2);
	left: 14%;
	width: var(--d);
	aspect-ratio: 1;
	background: radial-gradient(circle closest-side, rgba(130, 219, 250, 0.4) 90%, rgba(130, 219, 250, 0) 100%);
}

/* Azul del botón Contáctanos, asomando por abajo a la derecha. */
.evento-cuenta__resplandor--2 {
	--d: clamp(8rem, 5rem + 11vw, 16rem);

	right: 12%;
	bottom: calc(var(--d) * -0.35);
	width: var(--d);
	aspect-ratio: 1;
	background: radial-gradient(circle closest-side, rgba(11, 129, 170, 0.55) 90%, rgba(11, 129, 170, 0) 100%);
}

/*
  La franja: el #5C94AC al 20 % del mockup, más el desenfoque del vidrio
  del sitio. La forma —banda más pestaña— es una máscara de dos capas: la
  pestaña en SVG, centrada arriba, y un rectángulo desde su base.
*/
.evento-cuenta__franja {
	position: relative;
	z-index: 1;
	padding-top: var(--pestana-h);
	/* Más baja que en el mockup (decisión de la directora): 80 px bajo las etiquetas. */
	padding-bottom: clamp(2.5rem, 1.667rem + 3.704vw, 5rem);
	background-color: rgba(92, 148, 172, 0.2);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	text-align: center;

	-webkit-mask: var(--forma);
	mask: var(--forma);
}

/*
  En oración y no en mayúsculas, y un punto más chico que los títulos de
  sección (decisión de la directora, 28/09/2026): 32 px en escritorio.
*/
.evento-cuenta__titulo {
	font-size: clamp(1.5rem, 1.333rem + 0.741vw, 2rem);
	font-weight: 600;
	line-height: 1.2;
}

/* Cuatro columnas de 232.5 px a 1512, en todos los tamaños. */
.evento-cuenta__reloj {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: 930px;
	margin: clamp(1.75rem, 1.333rem + 1.852vw, 3rem) auto 0;
}

.evento-cuenta__unidad {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Las divisorias: un trazo blanco de 1 px, apenas inclinado, de 99 px. */
.evento-cuenta__unidad + .evento-cuenta__unidad::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: clamp(4.5rem, 3.6rem + 2.5vw, 6.2rem);
	background-color: var(--text-1);
	transform: translateY(-50%) rotate(1.36deg);
}

/* 68 px en escritorio, 36 en móvil; cifras de ancho fijo para que no bailen. */
.evento-cuenta__numero {
	font-size: clamp(2.25rem, 1.583rem + 2.963vw, 4.25rem);
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.evento-cuenta__nombre {
	margin-top: clamp(0.4rem, 0.3rem + 0.4vw, 0.75rem);
	font-size: clamp(0.6875rem, 0.517rem + 0.759vw, 1.2rem);
	line-height: 1.2;
	color: var(--text-2);
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Ejes temáticos                                                      */
/* ------------------------------------------------------------------ */

/*
  La foto aérea va detrás, con el degradado del mockup encima: #0A0E22
  opaco arriba —así empalma con la sección anterior— que se apaga hacia
  abajo. Medido: el mockup no le pone otro velo a la foto.
*/
.evento-ejes {
	position: relative;
	isolation: isolate;
	overflow: clip;
	padding-top: clamp(5rem, 2.5rem + 7vw, 10rem);

	/* Más la curva de la agenda, que se monta encima y deja ver la foto. */
	padding-bottom: calc(clamp(5rem, 2.5rem + 7vw, 10rem) + var(--muesca-h));
	color: var(--text-1);
	view-timeline-name: --evento-ejes;
}

.evento-ejes::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom, #0A0E22 0%, rgba(21, 27, 55, 0) 118%);
	pointer-events: none;
}

/*
  La foto mide un 24 % más que la sección y sobra un 12 % por cada lado:
  ese margen es el recorrido del parallax.
*/
.evento-ejes__foto {
	position: absolute;
	top: -12%;
	left: 0;
	z-index: -2;
	width: 100%;
	height: 124%;
	object-fit: cover;
	object-position: 50% 60%;
}

/*
  Parallax con CSS: la foto baja mientras la sección sube, así avanza más
  despacio que la página. Solo en los navegadores que lo entienden (Chrome,
  Edge, Safari 26); en los demás la foto se queda quieta, igual de bien.
*/
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.evento-ejes__foto {
			animation: evento-parallax linear both;
			animation-timeline: --evento-ejes;
			animation-range: cover;
		}
	}
}

@keyframes evento-parallax {
	from {
		transform: translateY(-9%);
	}

	to {
		transform: translateY(9%);
	}
}

/* Las mismas columnas que "Reimaginando la educación": 1206 px, 490 a la derecha. */
.evento-ejes__contenido {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 490px);
	column-gap: clamp(2rem, 0.5rem + 4vw, 6.25rem);
	align-items: center;
	max-width: 1206px;
}

.evento-ejes__titulo {
	font-size: clamp(1.75rem, 1.486rem + 1.176vw, 2.544rem);
	font-weight: 600;
	line-height: 1.2;
	text-wrap: wrap;
}

.evento-ejes__bajada {
	max-width: 30.2em;
	margin-top: clamp(1rem, 0.75rem + 1.111vw, 1.75rem);
	font-size: 0.979rem;
	line-height: 1.6;
}

.evento-ejes__botones {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6875rem;
	margin-top: clamp(1.875rem, 1.667rem + 0.926vw, 2.5rem);
}

/*
  El carrusel: una rejilla de 2 × 2 donde cada eje comparte celda con el
  que está cuatro puestos más allá. Los dos se alternan con una animación
  de 14 s (7 por página): uno se apaga mientras el otro aparece, en
  escalera. Se detiene con el cursor encima o el foco dentro.
*/
.evento-ejes__carrusel {
	--ciclo: 14s;

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evento-eje:nth-child(4n + 1) {
	--i: 0;

	grid-area: 1 / 1;
}

.evento-eje:nth-child(4n + 2) {
	--i: 1;

	grid-area: 1 / 2;
}

.evento-eje:nth-child(4n + 3) {
	--i: 2;

	grid-area: 2 / 1;
}

.evento-eje:nth-child(4n + 4) {
	--i: 3;

	grid-area: 2 / 2;
}

/*
  La tarjeta del mockup —blanca, 229 × 145.5, radio 16, sombra apenas— con
  dos mejoras: el número del eje arriba a la izquierda, que dice cuántos
  son y que la rejilla cambia, y el nombre siempre centrado en el alto.
*/
.evento-eje {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 9.1rem;
	padding: 1.5rem 1rem 1.25rem;
	border-radius: 16px;
	background-color: var(--bg-white);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	color: var(--bg-dark);
	text-align: center;
	animation: evento-eje var(--ciclo) ease-in-out infinite both;
	animation-delay: calc(var(--i) * 0.12s);
}

/* La segunda página arranca a mitad del ciclo: escondida. */
.evento-eje:nth-child(n + 5) {
	animation-delay: calc(var(--ciclo) / -2 + var(--i) * 0.12s);
}

.evento-ejes__carrusel:hover > .evento-eje,
.evento-ejes__carrusel:focus-within > .evento-eje {
	animation-play-state: paused;
}

@keyframes evento-eje {
	0%,
	46% {
		opacity: 1;
		transform: none;
	}

	50%,
	96% {
		opacity: 0;
		transform: translateY(0.75rem);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

.evento-eje__numero {
	position: absolute;
	top: 0.75rem;
	left: 0.9rem;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	color: var(--text-4);
	font-variant-numeric: tabular-nums;
}

/* Círculo de 43.5 px con el ícono en blanco; el color cambia en diagonal, como en el mockup. */
.evento-eje__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.72rem;
	height: 2.72rem;
	border-radius: 50%;
	background-color: var(--azul-acero);
	color: var(--text-1);
}

.evento-eje:nth-child(4n + 2) .evento-eje__icono {
	background-color: var(--hover-cyan);
}

.evento-eje:nth-child(4n + 3) .evento-eje__icono {
	background-color: var(--bg-dark);
}

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

.evento-eje__nombre {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}

/*
  Sin animaciones, un carrusel que no se mueve escondería la mitad de los
  ejes: se muestran los ocho, en cuatro filas.
*/
@media (prefers-reduced-motion: reduce) {
	.evento-eje {
		grid-area: auto !important;
		animation: none;
	}
}

/* ------------------------------------------------------------------ */
/* Agenda del evento                                                   */
/* ------------------------------------------------------------------ */

/*
  La sección clara sube por encima del final de los ejes lo que mide la
  curva: así, dentro de la curva, se ve la foto. El fondo claro es una capa
  aparte con máscara —un rectángulo menos las dos curvas, arriba y abajo—
  para que la sección misma no recorte los círculos de vidrio.
*/
.evento-agenda {
	--fila-pad: clamp(1rem, 0.5rem + 1.4vw, 1.25rem);

	position: relative;
	z-index: 1;
	margin-top: calc(var(--muesca-h) * -1);
	padding-top: calc(var(--muesca-h) + clamp(2.25rem, 1.75rem + 2.2vw, 4rem));
	padding-bottom: calc(var(--muesca-h) + clamp(3rem, 2.333rem + 2.963vw, 5rem));
	color: var(--bg-dark);
}

.evento-agenda::before {
	--curva-arriba: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 530 165' preserveAspectRatio='none'%3E%3Cpath d='M0 0C55.228 0 97.874 48.63 129.372 93.99C159.166 136.9 208.802 165 265 165C321.198 165 370.835 136.9 400.629 93.99C432.127 48.63 474.772 0 530 0Z'/%3E%3C/svg%3E");
	--curva-abajo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 530 165' preserveAspectRatio='none'%3E%3Cpath d='M0 165C55.228 165 97.874 116.37 129.372 71.01C159.166 28.1 208.802 0 265 0C321.198 0 370.835 28.1 400.629 71.01C432.127 116.37 474.772 165 530 165Z'/%3E%3C/svg%3E");

	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--bg-light);

	-webkit-mask-image: linear-gradient(#000 0 0), var(--curva-arriba), var(--curva-abajo);
	mask-image: linear-gradient(#000 0 0), var(--curva-arriba), var(--curva-abajo);
	-webkit-mask-size: 100% 100%, var(--muesca-w) var(--muesca-h), var(--muesca-w) var(--muesca-h);
	mask-size: 100% 100%, var(--muesca-w) var(--muesca-h), var(--muesca-w) var(--muesca-h);
	-webkit-mask-position: 0 0, center top, center bottom;
	mask-position: 0 0, center top, center bottom;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	/* El rectángulo menos las dos curvas (`subtract`, no `exclude`: sección 10 de CLAUDE.md). */
	-webkit-mask-composite: source-out, source-over;
	mask-composite: subtract, add;
}

/*
  Los círculos del isotipo: 176 px en el mockup (146 aquí, proporcional a la
  curva), con el centro 22 px por debajo del borde de arriba y 14.5 por
  encima del de abajo, medidos y escalados con la curva.

  Vidrio de verdad, a pedido de la directora (28/09/2026): además del
  desenfoque, un blanco que se aclara hacia arriba a la izquierda, un filo
  claro, un reflejo arriba y una sombra suave que lo despega del fondo.
*/
.evento-agenda__sello {
	--d: calc(var(--muesca-w) * 0.332);

	position: absolute;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--d);
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 55%, rgba(255, 255, 255, 0.06) 100%);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.5),
		inset 0 -8px 16px rgba(255, 255, 255, 0.06),
		0 10px 28px rgba(10, 14, 34, 0.28);
	transform: translateX(-50%);
}

.evento-agenda__sello--arriba {
	top: calc(var(--muesca-w) * 0.0415 - var(--d) / 2);
}

.evento-agenda__sello--abajo {
	bottom: calc(var(--muesca-w) * 0.0274 - var(--d) / 2);
}

/* El isotipo: 68.5 px en un círculo de 176 en el mockup (146 aquí). */
.evento-agenda__sello svg {
	width: 39%;
	height: auto;
	filter: drop-shadow(0 1px 2px rgba(10, 14, 34, 0.25));
}

.evento-agenda__contenido {
	max-width: 1297px;
}

.evento-agenda__titulo {
	font-size: clamp(1.75rem, 1.486rem + 1.176vw, 2.544rem);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

/* ---------- Las pestañas de los días ---------- */

/* Sin JavaScript no hay pestañas: se ven los dos días seguidos. */
.evento-agenda__dias {
	display: none;
}

.evento-agenda--pestanas .evento-agenda__dias {
	display: flex;
	justify-content: center;
	gap: clamp(0.75rem, 0.25rem + 2.2vw, 3.125rem);
	margin-top: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
}

/*
  236 × 94 en el mockup: el número enorme y apagado detrás, el día y el
  mes. Las dos llevan el efecto Glass de Figma de la directora (luz a -45°
  al 80 %, refracción 80, profundidad 20, dispersión 50, escarcha 4),
  traducido a CSS: un desenfoque de 4 px, el filo claro de la luz y un brillo
  interior que hace de profundidad. La elegida suma el azul acero.
*/
.evento-dia {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	width: min(12.5rem, 47%);
	height: clamp(4rem, 3.6rem + 1.8vw, 5rem);
	padding: 0 clamp(0.75rem, 0.4rem + 1.5vw, 1.5rem);
	border: 1px solid transparent;
	border-radius: 16px;
	background-color: rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow:
		inset 2px 2px 1px -1px rgba(255, 255, 255, 0.95),
		inset -2px -2px 2px -1px rgba(255, 255, 255, 0.7),
		inset 0 0 12px rgba(255, 255, 255, 0.6),
		0 2px 10px rgba(10, 14, 34, 0.06);
	color: var(--bg-dark);
	text-align: left;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.evento-dia:hover {
	border-color: rgba(92, 148, 172, 0.5);
}

.evento-dia[aria-selected="true"] {
	border-color: var(--azul-acero);
	background-color: rgba(92, 148, 172, 0.1);
}

.evento-dia:focus-visible {
	outline: 2px solid var(--cta);
	outline-offset: 3px;
}

.evento-dia__numero {
	font-size: clamp(2.5rem, 2.1rem + 1.8vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: rgba(21, 27, 55, 0.1);
}

.evento-dia__texto {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.evento-dia__nombre {
	font-size: clamp(1rem, 0.93rem + 0.3vw, 1.1875rem);
	font-weight: 600;
}

.evento-dia__mes {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ---------- Los días ---------- */

/* El título de cada día solo se ve sin pestañas. */
.evento-agenda__dia-titulo {
	margin-top: clamp(2.5rem, 2rem + 2.2vw, 4rem);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: 600;
}

.evento-agenda--pestanas .evento-agenda__dia-titulo {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.evento-agenda__bloques {
	margin: clamp(1.5rem, 1rem + 2.2vw, 3rem) 0 0;
	padding: 0;
	list-style: none;
}

/*
  Una fila por bloque, separadas por una línea de 2 px en azul noche. Las
  columnas del mockup (86 de margen, hora, título y ponentes), un poco
  más chicas: 72 de margen, 140 para la hora y 380 para los ponentes.
*/
.evento-bloque {
	display: grid;
	grid-template-columns: minmax(0, 140px) minmax(0, 1fr) minmax(0, 380px);
	column-gap: 2rem;
	align-items: center;
	min-height: 6.25rem;
	padding: var(--fila-pad) clamp(0rem, -1.5rem + 5vw, 4.5rem);
	border-bottom: 2px solid var(--bg-dark);
}

.evento-bloque:last-child {
	border-bottom: 0;
}

.evento-bloque__hora {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

/* Hora y títulos: 19 px en escritorio, un punto por debajo de la agenda de Encuentros. */
.evento-bloque__horario {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.evento-bloque__sala {
	font-size: 0.8125rem;
	color: var(--text-4);
}

.evento-bloque__titulo {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
	font-weight: 600;
	line-height: 1.3;
	text-wrap: pretty;
}

.evento-bloque__ponentes {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Nombre y cargo a la izquierda; la foto, a la derecha. */
.evento-ponente {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 1.25rem;
}

.evento-ponente__texto {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.evento-ponente__nombre {
	font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
	font-weight: 600;
	line-height: 1.3;
}

.evento-ponente__cargo {
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--text-4);
}

/*
  El círculo: la foto cuando la haya y, mientras tanto, las iniciales
  sobre el gris del mockup. 64 px en escritorio (80 en el mockup).
*/
.evento-avatar {
	--avatar: clamp(3rem, 2.7rem + 1.3vw, 4rem);

	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--avatar);
	height: var(--avatar);
	border-radius: 50%;
	object-fit: cover;
	background-color: #D9D9D9;
	color: var(--text-4);
	font-size: calc(var(--avatar) * 0.3);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.evento-avatar--logo {
	background-color: var(--bg-dark);
}

.evento-avatar--logo svg {
	width: 56%;
	height: auto;
}

/*
  Los conversatorios: los círculos superpuestos, cada uno delante del
  anterior. En vez del borde negro del mockup, un anillo del color del fondo
  y una sombra muy suave: separa los círculos grises y seguirá sirviendo
  cuando sean fotos.
*/
.evento-avatares {
	display: flex;
	justify-content: flex-end;
}

.evento-avatares .evento-avatar {
	box-shadow: 0 0 0 3px var(--bg-light), 0 2px 8px rgba(10, 14, 34, 0.18);
}

.evento-avatares .evento-avatar + .evento-avatar {
	margin-left: calc(var(--avatar) * -0.5);
}

/* Superpuestas, las iniciales quedarían tapadas: los nombres ya van al lado. */
.evento-avatares .evento-avatar--iniciales {
	font-size: 0;
}

/* Las pausas: sin ponentes, el título en su columna. */
.evento-bloque--pausa .evento-bloque__titulo {
	grid-column: 2 / 4;
}

/* ---------- Los bloques en paralelo ---------- */

/*
  Dos grupos a la vez. La hora de cada turno va en la primera columna y
  cada grupo ocupa una de las otras dos; una sesión de dos turnos ocupa las
  dos filas. Arriba, la píldora del grupo.
*/
.evento-bloque--paralelo {
	grid-template-rows: auto;
	align-items: start;
	row-gap: 1.5rem;
	padding-block: 1.5rem;
}

.evento-bloque--paralelo .evento-bloque__hora {
	grid-column: 1;
	align-self: center;
}

.evento-grupo__nombre {
	grid-row: 1;
	justify-self: center;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	height: 2rem;
	padding-inline: 1.75rem;
	border: 1px solid var(--azul-acero);
	border-radius: var(--radius-pill);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* "Grupo 1 · Auditorio": la sala, más liviana. */
.evento-grupo__sala {
	font-weight: 400;
	color: var(--text-4);
}

.evento-grupo__sala::before {
	content: "·";
	margin-right: 0.4rem;
}

.evento-grupo__sesion {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-left: 1.25rem;
}

.evento-grupo__sesion {
	align-self: center;
}

/* La hora de cada sesión, solo cuando la columna de las horas desaparece. */
.evento-grupo__hora {
	display: none;
	font-size: 1rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Dentro de un grupo, la foto va a la izquierda del nombre. */
.evento-grupo__sesion .evento-ponente {
	grid-template-columns: auto minmax(0, 1fr);
}

.evento-grupo__sesion .evento-avatar {
	order: -1;
}

/* ---------- El botón del final ---------- */

.evento-agenda__cierre {
	margin-top: clamp(3rem, 2.5rem + 2.2vw, 4.5rem);
	text-align: center;
}

/* Sobre fondo claro, al pasar el cursor se vacía en celeste (el blanco se perdería). */
.evento-agenda .button--solid:hover,
.evento-agenda .button--solid:focus-visible {
	border-color: var(--hover-cyan);
	background-color: transparent;
	color: var(--hover-cyan);
}

/* ------------------------------------------------------------------ */
/* Explora Costa Rica                                                  */
/* ------------------------------------------------------------------ */

/*
  Sube por debajo del final de la agenda lo que mide su curva: dentro de
  la curva se ve el principio de esta sección. El fondo es el degradado del
  mockup: el azul acero (al 78 % donde empieza la sección) que se apaga
  hacia abajo sobre el azul noche.
*/
.evento-explora {
	--margen: max(5vw, (100vw - 1440px) / 2);
	--lugar-w: min(26rem, 82vw);
	--lugar-w-abierta: min(51.75rem, 90vw);

	position: relative;
	z-index: 0;
	margin-top: calc(var(--muesca-h) * -1);
	padding-top: calc(var(--muesca-h) + clamp(4.5rem, 3.25rem + 5.5vw, 9rem));
	padding-bottom: clamp(4rem, 3rem + 4vw, 8rem);
	background:
		linear-gradient(to bottom, rgba(92, 148, 172, 0.78) 0, rgba(92, 148, 172, 0) calc(var(--muesca-h) + 70rem)),
		var(--bg-dark);
	color: var(--text-1);
}

.evento-explora__cabecera {
	text-align: center;
}

.evento-explora__titulo {
	font-size: clamp(1.75rem, 1.486rem + 1.176vw, 2.544rem);
	font-weight: 600;
	line-height: 1.2;
}

.evento-explora__bajada {
	max-width: 30.2em;
	margin: clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem) auto 0;
	font-size: 0.979rem;
	line-height: 1.6;
}

/* ---------- El carrusel ---------- */

/*
  Una fila con desplazamiento horizontal, sin barra visible. Arranca
  alineada con el contenedor y llega al borde de la pantalla. Con el ratón
  también se arrastra (evento-noviembre.js).
*/
.evento-explora__pista {
	display: flex;
	gap: clamp(1.25rem, 0.75rem + 2.2vw, 3rem);
	margin: clamp(2.5rem, 1.75rem + 3.3vw, 5rem) 0 0;
	padding: 1.25rem var(--margen);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--margen);
	scrollbar-width: none;
	list-style: none;
	cursor: grab;
}

.evento-explora__pista::-webkit-scrollbar {
	display: none;
}

.evento-explora__pista.is-arrastrando {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

/*
  La tarjeta: 448 × 608 en el mockup (416 × 565 aquí), radio 30, con la foto
  de fondo bajo un velo negro al 40 % y un filo blanco al 20 %. Al abrirse
  pasa al doble de ancho (890 en el mockup) y deja ver la foto: el panel de
  vidrio del texto no cambia.
*/
.evento-lugar {
	position: relative;
	flex: none;
	width: var(--lugar-w);
	height: clamp(32rem, 30rem + 3vw, 35.25rem);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 30px;
	background-color: var(--reserva);
	box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.1);
	isolation: isolate;
	scroll-snap-align: start;
	transition: width 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.evento-lugar:focus {
	outline: none;
}

/* Las fotos: una por píldora, apiladas; la elegida se ve. */
.evento-lugar__fotos {
	position: absolute;
	inset: 0;
}

.evento-lugar__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.45s ease;
}

.evento-lugar__foto.is-activa {
	opacity: 1;
}

/* La capa de #000000 al 40 % sobre la foto. */
.evento-lugar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.4);
	pointer-events: none;
}

/* Abierta: con el cursor encima, con el foco dentro o, al tocarla, con is-abierta. */
/*
  Con el foco solo cuenta el del teclado (:focus-visible): con `:focus-within`
  a secas, un clic dejaba la tarjeta abierta aunque el cursor se fuera.
*/
.evento-lugar.is-abierta,
.evento-lugar:has(:focus-visible) {
	width: var(--lugar-w-abierta);
}

@media (hover: hover) {
	.evento-lugar:hover {
		width: var(--lugar-w-abierta);
	}
}

/*
  El panel del texto: el efecto Glass de Figma de la directora (luz a -45°
  al 80 %, refracción 80, profundidad 31, dispersión 60, escarcha 17, splay
  16), traducido a CSS: el desenfoque es la escarcha; el filo claro arriba a
  la izquierda y el más tenue abajo a la derecha son la luz a -45°; el
  brillo interior, la profundidad. 428 × 588 dentro de la tarjeta de 448 ×
  608 (10 px de margen), radio 25 y padding 80 / 30 / 20.

  Tiene el ancho de la tarjeta cerrada y no cambia al abrirse: lo que crece
  es la foto, a su derecha.
*/
.evento-lugar__contenido {
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: calc(var(--lugar-w) - 22px);
	padding: clamp(3.25rem, 2.5rem + 3.3vw, 5rem) clamp(1.25rem, 1rem + 1.1vw, 1.875rem) 1.25rem;
	border-radius: 25px;
	background-color: rgba(255, 255, 255, 0.04);
	-webkit-backdrop-filter: blur(17px);
	backdrop-filter: blur(17px);
	box-shadow:
		inset 1.5px 1.5px 0.5px -0.5px rgba(255, 255, 255, 0.75),
		inset -1px -1px 0.5px -0.5px rgba(255, 255, 255, 0.35),
		inset 0 0 16px rgba(255, 255, 255, 0.08);
}

.evento-lugar__antetitulo {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.evento-lugar__titulo {
	margin-top: 0.5rem;
	font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
	font-weight: 600;
	line-height: 1.2;
	text-wrap: wrap;
}

.evento-lugar__texto {
	margin-top: clamp(1.25rem, 0.75rem + 2.2vw, 3rem);
	font-size: 0.875rem;
	line-height: 1.5;
}

.evento-lugar__pildoras {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 0.65rem;
	margin: auto 0 0;
	padding: 1.5rem 0 0;
	list-style: none;
}

.evento-lugar__pildora {
	display: inline-flex;
	align-items: center;
	height: 1.5rem;
	padding: 0 1rem;
	border: 1px solid var(--text-1);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--text-1);
	font-size: 0.75rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.evento-lugar__pildora:hover,
.evento-lugar__pildora[aria-pressed="true"] {
	background-color: var(--text-1);
	color: var(--bg-dark);
}

.evento-lugar__pildora:focus-visible,
.evento-lugar__numero:focus-visible {
	outline: 2px solid var(--text-1);
	outline-offset: 2px;
}

/* La numeración del diseño: una raya y 01 02 03 04, la actual en blanco. */
.evento-lugar__numeros {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.8rem;
	margin-top: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);
}

.evento-lugar__raya {
	width: 3.6rem;
	height: 3px;
	border-radius: 3px;
	background-color: var(--text-1);
}

.evento-lugar__numero {
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
	color: var(--text-1-50);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: color 0.2s ease;
}

.evento-lugar__numero:hover,
.evento-lugar__numero[aria-current="true"] {
	color: var(--text-1);
}

/* ---------- Los tres datos ---------- */

.evento-explora__datos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	margin-top: clamp(2.5rem, 2rem + 2.2vw, 4rem);
	padding: 0;
	list-style: none;
}

/* Cristal del sitio: blanco al 10 % y desenfoque. 85 px de alto. */
.evento-explora__dato {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	height: 5.3rem;
	padding: 0 1.75rem 0 1.5rem;
	border-radius: 16px;
	background-color: var(--glass);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

.evento-explora__icono {
	display: flex;
	color: var(--text-1-50);
}

.evento-explora__icono svg {
	width: 2.25rem;
	height: 2.25rem;
}

.evento-explora__dato-texto {
	display: flex;
	flex-direction: column;
}

.evento-explora__valor {
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.15;
}

.evento-explora__etiqueta {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Los créditos de las fotos: plegados, en letra chica y gris. */
.evento-explora__creditos {
	margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--text-1-50);
	text-align: center;
}

.evento-explora__creditos summary {
	display: inline-block;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.evento-explora__creditos p {
	max-width: 60rem;
	margin: 0.75rem auto 0;
}

.evento-explora__creditos a {
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.evento-lugar,
	.evento-lugar__foto {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Inscripción                                                         */
/* ------------------------------------------------------------------ */

/*
  Una banda algo más clara que la página (blanco al 10 %, como en el
  mockup) con dos resplandores celestes, uno arriba a la izquierda y otro
  abajo a la derecha, detrás de todo.
*/
.evento-inscripcion {
	position: relative;
	isolation: isolate;
	overflow: clip;
	padding-block: clamp(4rem, 3rem + 4.4vw, 9rem);
	background-color: rgba(255, 255, 255, 0.06);
	color: var(--bg-dark);
}

.evento-inscripcion::before,
.evento-inscripcion::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 36rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle closest-side, rgba(130, 219, 250, 0.22), rgba(130, 219, 250, 0));
	pointer-events: none;
}

.evento-inscripcion::before {
	top: -18rem;
	left: -12rem;
}

.evento-inscripcion::after {
	right: -12rem;
	bottom: -20rem;
}

/*
  La ficha: 1180 × 668 en el mockup, radio 32, gris claro, con el halo de
  las tarjetas de esta página. La imagen ocupa 462 px a la izquierda.
*/
.evento-ficha {
	display: grid;
	grid-template-columns: minmax(0, 462fr) minmax(0, 718fr);
	max-width: 1180px;
	margin-inline: auto;
	overflow: hidden;
	border-radius: 32px;
	background-color: var(--bg-light);
	box-shadow: var(--brillo-evento);
}

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

.evento-ficha__panel {
	padding: clamp(2.5rem, 2rem + 2.2vw, 4.25rem) clamp(1.5rem, 0rem + 6.7vw, 7.25rem);
}

.evento-ficha__campos {
	max-width: 31.25rem;
}

.evento-ficha__antetitulo {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.evento-ficha__titulo {
	margin-top: 0.25rem;
	font-size: clamp(1.75rem, 1.486rem + 1.176vw, 2.544rem);
	font-weight: 700;
	line-height: 1.2;
	text-wrap: wrap;
}

.evento-ficha__titulo span {
	color: var(--celeste-claro);
}

.evento-ficha__intro {
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	color: var(--text-4);
}

/* El campo trampa, fuera de la vista y del teclado. */
.evento-ficha__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.evento-campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.25rem;
	margin-top: 1.75rem;
}

.evento-campo {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.evento-campo--ancho {
	grid-column: 1 / -1;
}

.evento-campo__etiqueta {
	font-size: 0.8125rem;
	font-weight: 600;
}

.evento-campo__etiqueta em {
	color: var(--text-4);
	font-style: normal;
	font-weight: 400;
}

/* Los campos del mockup: borde azul noche de 1 px, radio 8, 42 de alto. */
.evento-campo__control {
	width: 100%;
	height: 42px;
	padding-inline: 0.9rem;
	border: 1px solid var(--bg-dark);
	border-radius: 8px;
	background-color: #fff;
	color: var(--bg-dark);
	font-size: 0.92rem;
}

select.evento-campo__control {
	appearance: none;
	padding-right: 2.4rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230A0E22' stroke-width='1.6'/%3E%3C/svg%3E");
	background-position: right 0.9rem center;
	background-repeat: no-repeat;
}

.evento-campo__control:focus {
	border-color: var(--cta);
	outline: none;
	box-shadow: 0 0 0 3px rgba(11, 129, 170, 0.18);
}

.evento-campo__ayuda {
	color: var(--text-4);
	font-size: 0.75rem;
	line-height: 1.4;
}

.evento-casilla {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 0.6rem;
	align-items: start;
	font-size: 0.875rem;
	line-height: 1.45;
	cursor: pointer;
}

.evento-casilla input {
	width: 18px;
	height: 18px;
	margin: 0.1rem 0 0;
	accent-color: var(--cta);
}

.evento-casilla small {
	display: block;
	color: var(--text-4);
	font-size: 0.75rem;
}

.evento-casilla--acepto {
	margin-top: 1.5rem;
	font-size: 0.8125rem;
}

/* El resumen del precio. */
.evento-resumen {
	margin-top: 1.75rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid rgba(92, 148, 172, 0.45);
	border-radius: 12px;
	background-color: rgba(92, 148, 172, 0.08);
}

.evento-resumen__titulo {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.evento-resumen__lineas {
	margin: 0.6rem 0 0;
}

.evento-resumen__lineas div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.2rem;
	font-size: 0.875rem;
}

.evento-resumen__lineas div[hidden] {
	display: none;
}

.evento-resumen__lineas dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.evento-resumen__total {
	margin-top: 0.35rem;
	padding-top: 0.55rem !important;
	border-top: 1px solid rgba(10, 14, 34, 0.15);
	font-weight: 700;
	font-size: 1rem !important;
}

.evento-resumen__nota {
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--text-4);
}

.evento-ficha__enviar {
	margin-top: 1.5rem;
	padding-inline: 2.25rem;
}

.evento-inscripcion .button--solid:hover,
.evento-inscripcion .button--solid:focus-visible {
	border-color: var(--hover-cyan);
	background-color: transparent;
	color: var(--hover-cyan);
}

.evento-ficha__enviar[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

.evento-ficha__aviso {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	background-color: #FDECEC;
	color: #8A1C1C;
	font-size: 0.875rem;
}

/* El aviso de gracias reemplaza a los campos. */
.evento-gracias {
	display: none;
	max-width: 31.25rem;
	padding-block: 2rem;
	outline: none;
}

.evento-ficha.is-enviada .evento-ficha__campos {
	display: none;
}

.evento-ficha.is-enviada .evento-gracias {
	display: block;
}

.evento-gracias__icono {
	display: inline-flex;
	width: 3rem;
	height: 3rem;
	color: var(--cta);
}

.evento-gracias__icono svg {
	width: 100%;
	height: 100%;
}

.evento-gracias__titulo {
	margin-top: 1rem;
	font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
	font-weight: 700;
}

.evento-gracias__codigo {
	margin-top: 1rem;
	font-size: 0.875rem;
	color: var(--text-4);
}

.evento-gracias__codigo strong {
	display: block;
	margin-top: 0.15rem;
	font-size: 1.5rem;
	letter-spacing: 0.04em;
	color: var(--bg-dark);
}

.evento-gracias__texto {
	margin-top: 1rem;
	line-height: 1.6;
}

.evento-gracias .button {
	margin-top: 1.25rem;
}

.evento-gracias__nota {
	margin-top: 1.25rem;
	font-size: 0.8125rem;
	color: var(--text-4);
}

/* Las tarifas, debajo de la ficha, en cristal. */
.evento-tarifas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	max-width: 1180px;
	margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0;
	padding: 0;
	list-style: none;
	color: var(--text-1);
}

.evento-tarifa {
	display: flex;
	flex: 1 1 10.5rem;
	flex-direction: column;
	align-items: center;
	max-width: 13rem;
	padding: 1rem 1.25rem;
	border-radius: 16px;
	background-color: var(--glass);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	text-align: center;
}

.evento-tarifa__nombre {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.evento-tarifa__precio {
	margin-top: 0.3rem;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.15;
}

.evento-tarifa__cuando {
	margin-top: 0.2rem;
	font-size: 0.75rem;
	color: var(--text-1-50);
}

/* ------------------------------------------------------------------ */
/* Responsivo                                                          */
/* ------------------------------------------------------------------ */

/* Con menú de hamburguesa, todo centrado: el texto arriba y las cifras debajo. */
@media (max-width: 991px) {
	.evento-educacion__contenido {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(3rem, 2.5rem + 2vw, 4.5rem);
		justify-items: center;
		text-align: center;
	}

	.evento-educacion__bajada {
		margin-inline: auto;
	}

	.evento-educacion__botones {
		align-items: center;
	}

	.evento-ejes__contenido {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(3rem, 2.5rem + 2vw, 4.5rem);
		justify-items: center;
		text-align: center;
	}

	.evento-ejes__bajada {
		margin-inline: auto;
	}

	.evento-ejes__botones {
		align-items: center;
	}

	.evento-ejes__carrusel {
		width: min(100%, 490px);
	}
}

/*
  Tablet: la hora a la izquierda y, a su derecha, el título con los
  ponentes debajo. Los grupos en paralelo, uno debajo del otro.
*/
@media (max-width: 991px) {
	.evento-bloque {
		grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
		row-gap: 1rem;
		align-items: start;
	}

	.evento-bloque__ponentes {
		grid-column: 2;
	}

	.evento-bloque--pausa {
		align-items: center;
	}

	.evento-bloque--pausa .evento-bloque__titulo {
		grid-column: 2;
	}

	.evento-bloque--paralelo {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 2rem;
	}

	.evento-bloque--paralelo .evento-bloque__hora--fila {
		display: none;
	}

	.evento-grupo__nombre {
		align-self: flex-start;
		margin-bottom: -0.75rem;
	}

	.evento-grupo__sesion + .evento-grupo__nombre {
		margin-top: 1rem;
	}

	.evento-grupo__sesion {
		padding-left: 0;
	}

	.evento-grupo__hora {
		display: block;
	}

	.evento-avatares {
		justify-content: flex-start;
	}

	.evento-ponente--grupo {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.evento-ponente--grupo .evento-avatares {
		order: -1;
	}
}

/*
  En teléfonos la tarjeta no se ensancha (no cabría): al tocarla solo se
  enfoca la foto. Los tres datos, uno debajo del otro.
*/
@media (max-width: 767px) {
	.evento-explora {
		--lugar-w-abierta: var(--lugar-w);
	}

	/* El texto es más largo que ancha la tarjeta: más alta y con menos aire arriba. */
	.evento-lugar {
		height: 38rem;
	}

	.evento-lugar__contenido {
		padding-top: 2.5rem;
	}

	.evento-explora__datos {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}

	.evento-explora__dato {
		width: min(100%, 19rem);
	}
}

/* La ficha se apila: la imagen arriba, como una franja de color. */
@media (max-width: 991px) {
	.evento-ficha {
		grid-template-columns: minmax(0, 1fr);
		max-width: 40rem;
	}

	.evento-ficha__imagen {
		height: clamp(7rem, 4rem + 12vw, 11rem);
	}

	.evento-ficha__campos,
	.evento-gracias {
		max-width: none;
	}

	.evento-ficha__antetitulo,
	.evento-ficha__titulo,
	.evento-ficha__intro,
	.evento-gracias {
		text-align: center;
	}

	.evento-ficha__enviar {
		display: flex;
		width: 100%;
	}
}

/* Móvil: todo en una columna, la hora arriba. */
@media (max-width: 767px) {
	.evento-bloque {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.75rem;
		min-height: 0;
		padding-block: 1.5rem;
	}

	.evento-bloque__ponentes,
	.evento-bloque--pausa .evento-bloque__titulo {
		grid-column: 1;
	}

	.evento-bloque__hora {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 0.6rem;
	}

	.evento-ponente {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.evento-ponente .evento-avatar {
		order: -1;
	}
}

/* En teléfonos, los campos en una columna. */
@media (max-width: 479px) {
	.evento-campos {
		grid-template-columns: minmax(0, 1fr);
	}

	.evento-ficha {
		border-radius: 20px;
	}
}

/* En teléfonos, dos columnas más juntas y el nombre un punto más chico. */
@media (max-width: 479px) {
	.evento-ejes__carrusel {
		gap: 0.75rem;
	}

	.evento-eje {
		min-height: 8.5rem;
		padding-inline: 0.625rem;
	}

	.evento-eje__nombre {
		font-size: 0.875rem;
	}
}

/* Las tarjetas se apilan, del ancho de las de Encuentros en móvil. */
@media (max-width: 767px) {
	.evento-cabecera__datos {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
		width: min(70.5vw, 349px);
		min-width: 254px;
	}

	/* El brazo robótico queda al centro. */
	.evento-cabecera__foto {
		object-position: 46% 80%;
	}
}