/* ==========================================================================
   EVENTO — estilos exclusivos de la plantilla "Evento — Charla".
   Colores invertidos respecto al resto del sitio: fondo negro, texto en
   blanco y el amarillo de marca reservado para los acentos.
   ========================================================================== */

/* El fondo lo pone el body y no cada seccion: la luz del cursor va fija
   por detras de todo y las secciones tienen que dejarla pasar. */
body.tpl-template-evento {
	background: var(--c-fondo-oscuro);
}

.evento-hero,
.evento-expositores,
.evento-resultado {
	position: relative;
	z-index: 1;
	color: var(--c-blanco);
	background: transparent;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.evento-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Pantalla completa, pero si el contenido no cabe la seccion crece
	   en vez de cortarlo */
	min-height: 100vh;
	padding-top: 190px;
}

.evento-hero .wrapper {
	position: relative;
	z-index: 2;
	max-width: 900px;
	padding-bottom: 90px;
}

/* ---------- Tag sobre el titulo ---------- */

.evento-aviso {
	display: inline-block;
	margin: 0 0 24px;
	padding: 8px 18px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--c-amarillo);
	background: transparent;
	border: 1.5px solid var(--c-amarillo);
	border-radius: var(--radio);
}

.evento-titulo {
	margin-bottom: 20px;
}

/* Sobre el fondo oscuro basta con teñir el texto */
.resalte {
	color: var(--c-amarillo);
}

/* Sobre la caja blanca el amarillo no contrasta como texto, asi que la
   palabra va dentro de un bloque amarillo. El recuadro se estira un poco
   mas que el texto, en em, para acompañar al titulo en cada breakpoint. */
.resalte-marca {
	position: relative;
}

.resalte-marca::before {
	content: "";
	position: absolute;
	z-index: -1;
	right: -0.12em;
	bottom: -0.08em;
	left: -0.12em;
	top: -0.02em;
	background: var(--c-amarillo);
	border-radius: 0.12em;
}

.evento-gancho {
	margin: 0 0 40px;
	font-size: var(--fs-bajada);
	font-weight: 500;
	line-height: 1.45;
	color: var(--c-texto-suave);
}

/* ---------- Datos: inversion y lugar ----------
   Dos tarjetas. La de inversion manda, va en amarillo y se lleva dentro
   el enlace al formulario. */

.evento-datos {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.dato {
	flex: 1 1 260px;
	padding: 22px 26px;
	border-radius: 18px;
}

.dato--destacado {
	color: var(--c-negro);
	background: var(--c-amarillo);
}

.dato--normal {
	background: var(--c-superficie);
	border: 1px solid var(--c-borde-suave);
}

.dato-cabecera {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.dato-icono {
	display: flex;
}

.dato-icono svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dato-etiqueta {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* En la tarjeta oscura la etiqueta es el acento */
.dato--normal .dato-cabecera {
	color: var(--c-amarillo);
}

.dato-valor {
	display: block;
	font-family: var(--font-titulos);
	font-size: var(--fs-h4);
	font-weight: 800;
	line-height: 1.2;
}

/* Enlace al formulario, dentro de la tarjeta amarilla */
.dato-enlace {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	transition: opacity var(--dur) var(--ease);
}

.dato-enlace:hover {
	opacity: 0.65;
}

.dato-enlace svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Cinta que corre al pie del hero ---------- */

.evento-cinta {
	position: relative;
	z-index: 2;
	overflow: hidden;
	padding-block: 18px;
	color: var(--c-negro);
	background: var(--c-amarillo);
}

.cinta-pista {
	display: flex;
	width: max-content;
	animation: cinta-correr 26s linear infinite;
}

.cinta-lista {
	display: flex;
	align-items: center;
	gap: 42px;
	margin: 0;
	padding: 0 21px;
	list-style: none;
}

.cinta-lista li {
	font-family: var(--font-titulos);
	font-size: 17px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

/* El separador entre frases */
.cinta-lista li::after {
	content: "\00B7";
	margin-left: 42px;
	opacity: 0.5;
}

@keyframes cinta-correr {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ==========================================================================
   EXPOSITORES
   ========================================================================== */

.evento-expositores {
	padding-block: 110px;
}

.seccion-titulo {
	max-width: 760px;
	margin-bottom: 56px;
}

.expositores {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.expositor {
	padding: 36px 38px;
	background: var(--c-superficie);
	border: 1px solid var(--c-borde-suave);
	border-radius: 22px;
}

.expositor-marca {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
}

.expositor-numero {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	font-family: var(--font-titulos);
	font-size: 13px;
	font-weight: 800;
	color: var(--c-negro);
	background: var(--c-amarillo);
	border-radius: 50%;
}

.expositor-empresa {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--c-amarillo);
}

.expositor-nombre {
	margin-bottom: 14px;
	font-size: var(--fs-h4);
	font-weight: 800;
}

.expositor-texto {
	margin: 0;
	line-height: var(--lh-texto);
	color: var(--c-texto-suave);
}

.expositor-texto strong {
	font-weight: 700;
	color: var(--c-blanco);
}

/* ==========================================================================
   RESULTADO — la unica pieza clara de la pagina
   ========================================================================== */

.evento-resultado {
	padding-bottom: 110px;
}

.resultado-caja {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	padding: 72px;
	color: var(--c-negro);
	background: var(--c-blanco);
	border-radius: 32px;
}

.resultado-titulo {
	margin: 0;
}

/* La lista y el boton comparten la segunda columna */
.resultado-columna {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 36px;
}

.resultado-lista {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: resultado;
	border-top: 1px solid var(--c-negro);
}

.resultado-lista li {
	counter-increment: resultado;
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding-block: 18px;
	border-bottom: 1px solid rgba(17, 17, 17, 0.18);
}

.resultado-lista li::before {
	content: "0" counter(resultado);
	font-family: var(--font-titulos);
	font-size: 13px;
	font-weight: 800;
	opacity: 0.4;
}

/* ==========================================================================
   TABLET Y MOVIL
   ========================================================================== */

@media (max-width: 1023px) {

	.expositores,
	.resultado-caja {
		grid-template-columns: 1fr;
	}

	.resultado-caja {
		gap: 32px;
		padding: 48px 36px;
	}
}

@media (max-width: 767px) {

	.evento-hero {
		padding-top: 150px;
	}

	.evento-hero .wrapper {
		padding-bottom: 64px;
	}

	.dato {
		flex-basis: 100%;
		padding: 18px 22px;
		border-radius: 14px;
	}

	.evento-expositores {
		padding-block: 72px;
	}

	.seccion-titulo {
		margin-bottom: 36px;
	}

	.expositor {
		padding: 28px 24px;
		border-radius: 18px;
	}

	.evento-resultado {
		padding-bottom: 72px;
	}

	.resultado-caja {
		padding: 36px 26px;
		border-radius: 22px;
	}

	.cinta-lista li {
		font-size: 14px;
	}
}

/* ---------- Luz del cursor ----------
   Canvas fijo al viewport, por detras de todo. La luz y su estela las
   dibuja evento.js; aqui solo se le da sitio. */

.luz-cursor {
	position: fixed;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}