/* Manrope variable, distribución oficial de Google Fonts; licencia en assets/fonts/. */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-variable.woff2") format("woff2");
}

:root {
	--encuentro-equis-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--encuentro-equis-text-size: 1rem;
	--encuentro-equis-text-weight: 400;
	--encuentro-equis-text-line-height: 1.75;
	--encuentro-equis-title-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
	--encuentro-equis-title-weight: 700;
	--encuentro-equis-title-line-height: 1.2;
	--encuentro-equis-letter-spacing: 0;
	--bs-font-sans-serif: var(--encuentro-equis-font-family);
	--bs-body-font-family: var(--encuentro-equis-font-family);
	--bs-body-font-size: var(--encuentro-equis-text-size);
	--bs-body-font-weight: var(--encuentro-equis-text-weight);
	--bs-body-line-height: var(--encuentro-equis-text-line-height);
}

body {
	letter-spacing: var(--encuentro-equis-letter-spacing);
}

/* Aplicar a títulos de sección, no indiscriminadamente a todos los encabezados. */
.section-title {
	font-family: var(--encuentro-equis-font-family);
	font-size: var(--encuentro-equis-title-size);
	font-weight: var(--encuentro-equis-title-weight);
	line-height: var(--encuentro-equis-title-line-height);
	letter-spacing: var(--encuentro-equis-letter-spacing);
}

/* Aplicar a párrafos; no modifica los tamaños propios de controles o cards. */
.section-text {
	font-family: var(--encuentro-equis-font-family);
	font-size: var(--encuentro-equis-text-size);
	font-weight: var(--encuentro-equis-text-weight);
	line-height: var(--encuentro-equis-text-line-height);
	letter-spacing: var(--encuentro-equis-letter-spacing);
}

/* Bootstrap no debe animar el scroll. */
html {
	scroll-behavior: auto;
}

:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 1100;
	padding: 0.75rem 1rem;
	color: #000;
	background: #fff;
}

/* Medios fluidos; los iframes se envolverán en .ratio según su proporción. */
img,
video {
	max-width: 100%;
	height: auto;
}

iframe {
	max-width: 100%;
}

.site-branding,
.navbar-collapse {
	min-width: 0;
	max-width: 100%;
}

.site-branding {
	flex: 1 1 0%;
}

.navbar-brand {
	white-space: normal;
}

.site-header,
.site-footer,
.site-main {
	overflow-wrap: anywhere;
}

.navbar-nav {
	flex-wrap: wrap;
}

.navbar-toggler {
	min-width: 44px;
	min-height: 44px;
	flex-shrink: 0;
}

.navbar-nav a,
.footer-menu a,
.site-branding a {
	display: block;
	min-width: 44px;
	min-height: 44px;
}

.navbar-nav a,
.footer-menu a {
	padding: 0.5rem;
}

@media (min-width: 992px) {
	.site-branding {
		flex: 0 1 auto;
	}
}

/* Maqueta visual provisional del PDF de escritorio; móvil pendiente de diseño. */
:root {
	--equis-blue: #2845ed;
	--equis-purple: #4f287a;
	--equis-lilac: #d0b6f5;
	--equis-pink: #fbd0fd;
	--equis-mint: #d0f5eb;
	--equis-ink: #202020;
	--bs-body-color: var(--equis-ink);
}
.container { --bs-gutter-x: 2.5rem; }
.section-space { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section-title { margin: 0 0 2.25rem; }
.section-copy { margin-bottom: 2.75rem; }
.prose p { margin-bottom: 1.5rem; }
.prose p:last-child { margin-bottom: 0; }
.site-header { background: #fff; padding-block: .75rem; }
.site-header .navbar { padding: 0; }
.site-header .custom-logo { width: 160px; display: block; }
.site-header .navbar-nav { gap: .15rem; }
.site-header .navbar-nav a { color: #202020; font-size: .875rem; text-decoration: none; padding: .75rem; }
.site-header .navbar-nav a:hover { color: var(--equis-purple); text-decoration: underline; text-underline-offset: .35em; }
.site-header .navbar-brand { font-weight: 700; color: var(--equis-purple); margin: 0; }
.site-header .sub-menu { list-style: none; padding-left: 1rem; }
.landing-section--hero { background: #e9c5ff; }
.hero-media { position: relative; }
.hero-video, .hero-poster { display: block; width: 100%; max-width: 1022px; height: auto; margin-inline: auto; object-fit: contain; }
.hero-toggle { position: absolute; right: 1rem; bottom: 1rem; border: 1px solid var(--equis-purple); border-radius: 2rem; background: white; color: var(--equis-purple); min-height: 44px; padding: .5rem 1rem; font-size: .875rem; }
.landing-section--introduccion { background: var(--equis-blue); color: #fff; }
.landing-section--introduccion .section-title { margin-bottom: 0; }
.media-placeholder { width: 100%; border: 1px solid rgba(79,40,122,.1); background: #eee9f2; }
.media-image { display: block; width: 100%; height: auto; object-fit: contain; }
.mapa-media { aspect-ratio: 1.7; background-color: var(--equis-pink); }
.relatoria-media { aspect-ratio: .66; background-color: #eeece8; }
.landing-section--relatoria { padding-top: 0; }
.landing-section--tesis { padding-top: 1rem; }
.landing-section--tesis .section-title { color: var(--equis-blue); }
.tesis-list { list-style: none; counter-reset: ambito; padding: 0; margin-block: 2rem; }
.tesis-list li { counter-increment: ambito; margin-bottom: 1.5rem; }
.tesis-list li::before { content: counter(ambito); display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: .35rem; border-radius: 50%; background: var(--equis-blue); color: white; font-size: .875rem; }
.tesis-list strong { background: var(--equis-pink); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.landing-section--encuentro, .landing-section--video { background: var(--equis-lilac); }
.text-highlight { background: var(--equis-purple); color: white; padding-inline: .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.encuentro-figure { max-width: 980px; margin: 2.75rem auto 0; }
.encuentro-media { aspect-ratio: 4 / 3; background-color: #b299d2; }
.encuentro-figure figcaption { max-width: 650px; font-size: .8125rem; line-height: 1.6; color: #48315d; margin-top: 1rem; }
.galeria-media { aspect-ratio: 3 / 2; background-color: #eee9f2; }
.landing-section--galeria { padding-bottom: 0; }
.result-card { border: 1px solid #d8d4dc; border-radius: 8px; height: 100%; display: flex; flex-direction: column; }
.result-media { aspect-ratio: 4 / 3; border: 0; border-radius: 7px 7px 0 0; background: #e4dcf4; }
.result-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.result-category { font-size: .75rem; text-transform: uppercase; font-weight: 700; color: var(--equis-blue); margin-bottom: .5rem; }
.result-body h3 { font-size: 1.4rem; font-weight: 700; line-height: 1.35; margin-bottom: 1rem; }
.result-body > p:not(.result-category) { font-size: .875rem; line-height: 1.65; }
.result-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: auto; padding-top: .5rem; }
.result-button { flex: 1 1 120px; min-height: 44px; display: grid; place-items: center; font-size: .6875rem; font-weight: 700; text-transform: uppercase; background: var(--equis-purple); color: #fff; border: 1px solid var(--equis-purple); }
.result-button--outline { background: transparent; color: var(--equis-purple); }
.result-button:disabled { opacity: .55; background: var(--equis-purple); color: #fff; border-color: var(--equis-purple); }
.result-button--outline:disabled { background: transparent; color: var(--equis-purple); }
.result-button:hover { background: #3b1d5c; color: #fff; }
.vertical-media, .vertical-video { aspect-ratio: 9 / 16; width: 100%; max-width: 398px; margin-inline: auto; display: block; object-fit: contain; background: #b59bdc; }
.landing-section--video .section-title { max-width: 440px; }
.landing-section--cierre { background: var(--equis-mint); }
.closing-title { font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.4; font-weight: 700; margin: 0; }
.closing-highlight { background: #19d6ae; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.closing-blue { color: var(--equis-blue); }
.cierre-media { aspect-ratio: 1.15; background: #c0eade; border: 0; }
.site-footer { background: var(--equis-blue); color: #fff; padding-block: 2rem; }
.footer-layout { display: flex; flex-direction: column; gap: 1.5rem; }
.footer-brand .custom-logo { width: 160px; filter: brightness(0) invert(1); }
.footer-brand a { display: inline-block; color: white; text-decoration: none; font-weight: 700; }
.footer-menu { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; }
.footer-menu a { color: #fff; text-decoration: none; font-size: .8125rem; }
.footer-menu a:hover { text-decoration: underline; }
@media (min-width: 992px) {
	.footer-layout { flex-direction: row; align-items: center; justify-content: space-between; }
	.site-header .site-branding { margin-right: 2rem; }
}