@font-face {
	font-family: 'Public Sans';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('/fonts/publicsans-variable.woff2') format('woff2');
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 500 900;
	font-display: swap;
	src: url('/fonts/sourceserif4-normal-variable.woff2') format('woff2');
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: italic;
	font-weight: 500 600;
	font-display: swap;
	src: url('/fonts/sourceserif4-italic-variable.woff2') format('woff2');
}

:root {
	--bg: #FAF8F4;
	--ink: #14201B;
	--ink-soft: #3F4A44;
	--ink-muted: #6B7A72;
	--linea: #E5E1D8;
	--es: #0B6E3F;
	--en: #ED2939;
	--en-texto: #D3172A;
	--fr: #00247D;
	--vivo: #C81D25;
}

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: var(--bg);
	color: var(--ink);
	font-family: 'Public Sans', system-ui, sans-serif;
	overflow: hidden;
}

.totem-pantalla {
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
	display: none;
	flex-direction: column;
	background:
		radial-gradient(circle at 12% 8%, rgba(11,110,63,.06), transparent 34%),
		radial-gradient(circle at 92% 40%, rgba(237,41,57,.05), transparent 36%),
		radial-gradient(circle at 48% 98%, rgba(0,36,125,.05), transparent 30%),
		var(--bg);
}

.totem-pantalla.activa {
	display: flex;
}

.franja-progreso {
	height: 0.42vh;
	display: flex;
	flex-shrink: 0;
}

.franja-progreso > div {
	flex: 1;
}

.cuerpo {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: 0 3.3vw;
}

/* ---------- Vista de información ---------- */

.cabecera-institucional {
	padding-top: 1.9vh;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.cabecera-institucional .unesco {
	display: flex;
	align-items: center;
	gap: 0.7vw;
}

.cabecera-institucional .unesco img {
	height: 2.1vh;
	width: auto;
}

.cabecera-institucional .unesco span {
	font-weight: 800;
	font-size: 1.05vw;
	letter-spacing: 0.1em;
}

.placa-gobmx {
	background: #FFFFFF;
	border: 1px solid var(--linea);
	border-radius: 0.5vw;
	padding: 0.5vh 0.9vw;
	display: flex;
	align-items: center;
}

.placa-gobmx img {
	height: 1.9vh;
	width: auto;
}

.hero {
	padding-top: 2.5vh;
	display: flex;
	flex-direction: column;
	gap: 0.9vh;
}

.hero .fila-60 {
	display: flex;
	align-items: center;
	gap: 1vw;
}

.hero .medallon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.6vw;
	height: 4.6vw;
	border-radius: 50%;
	border: 2px solid rgba(20,32,27,0.2);
	font-family: 'Source Serif 4';
	font-weight: 700;
	font-size: 1.7vw;
	color: var(--ink);
	flex-shrink: 0;
}

.hero .caption {
	font-weight: 700;
	font-size: 1.15vw;
	letter-spacing: 0.13em;
	color: var(--ink-muted);
	text-transform: uppercase;
}

.hero h1 {
	margin: 0;
	font-family: 'Source Serif 4';
	font-weight: 700;
	font-size: 7vw;
	line-height: 0.96;
}

.hero p {
	margin: 0;
	font-family: 'Source Serif 4';
	font-style: italic;
	font-weight: 500;
	font-size: 2.6vw;
	line-height: 1.3;
	color: var(--ink-soft);
	max-width: 88%;
}

.datos-clave {
	padding-top: 2vh;
	display: flex;
	gap: 0.85vw;
}

.ficha {
	background: #FFFFFF;
	border: 1px solid var(--linea);
	border-radius: 1.15vw;
	padding: 1.9vh 1.35vw;
	display: flex;
	flex-direction: column;
	gap: 0.8vh;
}

.ficha.fecha {
	flex: 1;
}

.ficha.sede {
	flex: 1.5;
}

.ficha svg {
	width: 1.7vw;
	height: 1.7vw;
	stroke: var(--ink-muted);
}

.ficha span {
	font-weight: 700;
	font-size: 1.4vw;
	line-height: 1.25;
}

.contexto {
	margin-top: 2.4vh;
	background: #FFFFFF;
	border: 1px solid var(--linea);
	border-radius: 1.5vw;
	padding: 2.4vh 1.7vw;
}

.contexto p {
	margin: 0;
	font-size: 1.55vw;
	line-height: 1.5;
	color: var(--ink-soft);
}

.contexto strong {
	color: var(--ink);
	font-weight: 700;
}

.foto {
	margin-top: 2.2vh;
	position: relative;
	border-radius: 1.5vw;
	overflow: hidden;
	height: 32vh;
	border: 1px solid var(--linea);
}

.foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.foto .velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(3,8,6,0) 45%, rgba(3,8,6,.82) 100%);
}

.foto .leyenda {
	position: absolute;
	left: 1.5vw;
	right: 1.5vw;
	bottom: 1vh;
	color: #FFFFFF;
	font-weight: 600;
	font-size: 1.05vw;
}

.objetivos {
	margin-top: 2.6vh;
	display: flex;
	flex-direction: column;
	gap: 1.8vh;
	flex: 1;
	min-height: 0;
}

.objetivos > .titulo {
	font-family: 'Source Serif 4';
	font-weight: 700;
	font-size: 2.3vw;
}

.rejilla-objetivos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85vw;
}

.tarjeta-objetivo {
	background: #FFFFFF;
	border: 1px solid var(--linea);
	border-radius: 1.05vw;
	padding: 1.55vh 1.25vw;
	display: flex;
	gap: 0.75vw;
	align-items: center;
}

.tarjeta-objetivo .numero {
	font-family: 'Source Serif 4';
	font-weight: 700;
	font-size: 2.1vw;
}

.tarjeta-objetivo span.texto {
	font-weight: 500;
	font-size: 1.25vw;
	line-height: 1.35;
	color: var(--ink-soft);
}

/* ---------- Vista de agenda ---------- */

.cabecera-dia {
	padding-top: 2.1vh;
	display: flex;
	flex-direction: column;
	gap: 0.6vh;
}

.cabecera-dia .estado {
	display: flex;
	align-items: center;
	gap: 0.6vw;
}

.punto-vivo {
	width: 0.5vw;
	height: 0.5vw;
	border-radius: 50%;
	background: var(--vivo);
	flex-shrink: 0;
}

.cabecera-dia .estado span {
	font-weight: 700;
	font-size: 0.95vw;
	letter-spacing: 0.14em;
}

.cabecera-dia .fila-hora {
	display: flex;
	align-items: baseline;
	gap: 0.9vw;
	flex-wrap: wrap;
}

.cabecera-dia .dia {
	font-family: 'Source Serif 4';
	font-weight: 700;
	font-size: 1.15vw;
	letter-spacing: 0.1em;
	color: var(--ink-muted);
	text-transform: uppercase;
}

.cabecera-dia .hora {
	font-family: 'Source Serif 4';
	font-weight: 700;
	font-size: 2.7vw;
}

.tarjetas-idioma {
	flex: 1;
	padding-top: 1.8vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3.4vh;
	min-height: 0;
}

.tarjeta-idioma {
	position: relative;
	background: #FFFFFF;
	border-radius: 1.5vw;
	padding: 3.4vh 2.4vw;
	display: flex;
	flex-direction: column;
	gap: 1.3vh;
	box-shadow: 0 0.8vh 1.6vh rgba(20,30,25,.08);
}

.tarjeta-idioma.es { border: 1.5px solid var(--es); }
.tarjeta-idioma.en { border: 1.5px solid var(--en); }
.tarjeta-idioma.fr { border: 1.5px solid var(--fr); }

.tarjeta-idioma .etiqueta-idioma {
	font-weight: 800;
	font-size: 1.15vw;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.tarjeta-idioma.es .etiqueta-idioma { color: var(--es); }
.tarjeta-idioma.en .etiqueta-idioma { color: var(--en-texto); }
.tarjeta-idioma.fr .etiqueta-idioma { color: var(--fr); }

.tarjeta-idioma h3 {
	margin: 0;
	font-weight: 700;
	font-size: 2.6vw;
	line-height: 1.2;
}

.tarjeta-idioma .descripcion {
	margin: 0;
	font-weight: 400;
	font-size: 1.75vw;
	line-height: 1.44;
	color: var(--ink-soft);
}

.tarjeta-idioma .divisor {
	height: 1px;
	background: var(--linea);
	margin: 0.6vh 0;
}

.tarjeta-idioma .etiqueta-ponentes {
	font-weight: 700;
	font-size: 1.05vw;
	letter-spacing: 0.08em;
	color: var(--ink-muted);
	text-transform: uppercase;
}

.tarjeta-idioma .ponentes {
	font-weight: 600;
	font-size: 1.5vw;
	line-height: 1.4;
}

.tarjeta-idioma .ponentes .rol {
	font-weight: 400;
	color: var(--ink-soft);
}

.pie-agenda {
	padding: 1.6vh 0 1.4vh 0;
	display: flex;
	flex-direction: column;
	gap: 1.2vh;
}

.fila-qr {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3vw;
}

.qr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4vh;
}

.qr .caja {
	background: #FFFFFF;
	border: 1px solid var(--linea);
	border-radius: 0.6vw;
	padding: 0.4vw;
}

.qr img {
	width: 4.8vw;
	height: 4.8vw;
	display: block;
}

.qr span {
	font-weight: 700;
	font-size: 0.75vw;
	letter-spacing: 0.1em;
}

.qr.es span { color: var(--es); }
.qr.en span { color: var(--en-texto); }
.qr.fr span { color: var(--fr); }

.fila-lugar {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fila-lugar .lugar {
	font-weight: 600;
	font-size: 0.75vw;
	color: var(--ink-muted);
}