/* ==========================================================================
   Origen — Dividido (layout asimétrico texto/imagen)
   Sin transición de páginas por AJAX, sin scrollbar/precargador personalizados.
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

* ,
*::before,
*::after {
	box-sizing: border-box;
}

img, video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 300;
	letter-spacing: 0.02em;
}

p {
	margin: 0 0 1em;
}

button {
	font-family: inherit;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
}

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 32px;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ==========================================================================
   Header / navegación
   ========================================================================== */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 26px 0;
	border-bottom: 1px solid var(--border);
}

/* El header usa su propio ancho completo (no el "--container" centrado de
   1200px que usan las secciones de contenido): en monitores anchos, ese
   límite dejaba el menú a la derecha de una caja centrada en vez de pegado
   al borde real de la pantalla — se veía "más centrado" que arriba a la
   derecha. */
.site-header .site-header__inner {
	max-width: none;
	width: 100%;
	padding: 0 40px;
}

/* El desenfoque va en un pseudo-elemento, no directo en .site-header: si
   .site-header tuviera backdrop-filter, se convierte en "containing block"
   de sus descendientes position:fixed — y el menú móvil de pantalla completa
   quedaría confinado al alto de la barra del header (~114px) en vez de
   ocupar toda la pantalla, forzando scroll incluso con pocos enlaces. */
.site-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(10 9 8 / 0.85);
	backdrop-filter: blur(6px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.main-nav ul {
	display: flex;
	gap: 36px;
}

.main-nav a {
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: lowercase;
	color: var(--text-muted);
	transition: color 0.25s;
	padding: 4px 0;
	border-bottom: 1px solid transparent;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
	color: var(--text);
	border-bottom-color: var(--accent);
}

.menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
}

.menu-toggle span {
	display: block;
	width: 22px;
	height: 1px;
	background: var(--text);
}

@media (max-width: 900px) {
	.menu-toggle {
		display: flex;
	}

	.main-nav {
		position: fixed;
		inset: 0;
		background: var(--bg);
		display: flex;
		flex-direction: column;
		align-items: center;
		/* overflow-y:auto + margin:auto en el <ul> (en vez de
		   justify-content:center) evita que, si el menú tiene más enlaces de
		   los que caben en la pantalla, la parte de arriba quede inaccesible:
		   con justify-content:center el contenido que se sale por arriba no
		   se puede alcanzar aunque haya scroll. */
		justify-content: flex-start;
		overflow-y: auto;
		padding: 90px 24px 24px;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s;
	}

	.main-nav.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	.main-nav ul {
		flex-direction: column;
		text-align: center;
		gap: 14px;
		margin: auto 0;
	}

	.main-nav a {
		font-size: 1.2rem;
	}
}

/* ==========================================================================
   Hero — "El motivo": video de fondo a pantalla completa, sin barra lateral,
   logo centrado (grande) + frase debajo (reutiliza el mismo tratamiento que
   ya probamos y aprobamos en los otros temas).
   ========================================================================== */

.hero-home {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--bg-alt);
	text-align: center;
}

.hero-home__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero-home__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.9;
}

.hero-home__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(0 0 0 / 0.35) 0%, rgb(0 0 0 / 0.1) 45%, rgb(0 0 0 / 0.75) 100%);
	z-index: 1;
}

.hero-home__logo-wrap {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 70%;
	max-width: 1100px;
	pointer-events: none;
}

.hero-home__logo {
	/* 85% = 15% más chico que antes; sigue centrado (misma posición). */
	width: 85%;
	height: auto;
	opacity: 0.9;
}

.hero-home__logo-tagline {
	display: block;
	margin-top: 24px;
	font-family: var(--font);
	font-size: clamp(0.95rem, 3.8vw, 2.2rem);
	font-weight: 300;
	letter-spacing: 0.06em;
	text-transform: lowercase;
	color: #fff;
	white-space: nowrap;
}

@media (max-width: 768px) {
	.hero-home__logo-wrap {
		width: 88%;
	}
}

/* ==========================================================================
   Secciones divididas (texto / imagen alternado)
   ========================================================================== */

.split-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
	max-width: 1600px;
	margin: 0 auto;
	padding: 100px 5vw;
}

.split-section--alt {
	background: var(--bg-alt);
}

.split-section--reverse {
	direction: rtl;
}

.split-section--reverse > * {
	direction: ltr;
}

.split-section__text h2 {
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	font-weight: 200;
	margin-bottom: 24px;
}

.split-section__text .prose {
	max-width: 520px;
	margin: 0;
	text-align: left;
}

.split-section__media {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
}

.split-section__media img {
	width: 100%;
	display: block;
}

@media (max-width: 900px) {
	.split-section,
	.split-section--reverse {
		grid-template-columns: 1fr;
		direction: ltr;
		padding: 60px 24px;
		gap: 2rem;
	}

	/* Selector compuesto (mayor especificidad) para garantizar que gane sobre
	   la regla incondicional de 3 columnas de más abajo en este archivo. */
	.split-section.split-section--originantes {
		grid-template-columns: 1fr;
		direction: ltr;
		padding: 60px 24px;
		gap: 2rem;
	}
}

/* ==========================================================================
   Hero interior (páginas sin video propio)
   ========================================================================== */

.hero-page {
	padding: 150px 5vw 60px;
	border-bottom: 1px solid var(--border);
	text-align: center;
}

.hero-page__title {
	font-size: clamp(1.8rem, 3vw, 2.8rem);
	font-weight: 200;
	max-width: 700px;
	margin: 0 auto;
}

.section {
	padding: 90px 5vw;
}

.section--alt {
	background: var(--bg-alt);
}

.prose {
	max-width: 720px;
	font-size: 1.05rem;
	font-weight: 200;
	letter-spacing: 0.3px;
	line-height: 1.9;
}

.prose em {
	font-style: italic;
	color: var(--accent);
}

/* ==========================================================================
   Somos Originantes
   ========================================================================== */

.originantes-quote {
	max-width: 560px;
	font-size: 1rem;
	/* Montserrat Light: mismo peso ligero que el testimonio del Lakota, sin
	   sensación de bold. */
	font-weight: 200;
	line-height: 2;
	border-left: 2px solid var(--accent);
	padding-left: 44px;
	/* El texto de la cita queda alineado a la izquierda con el eyebrow y con el
	   testimonio de arriba; el borde dorado sobresale hacia la izquierda (no
	   empuja el texto). -46px = padding-left (44) + borde (2), y de paso anula
	   el margen por defecto del <blockquote>. */
	margin-left: -46px;
}

.originantes-eyebrow {
	font-size: 1.05rem;
	font-weight: 300;
	/* Color terroso/arena de la identidad. */
	color: var(--accent);
	margin-bottom: 24px;
}

/* Más grande dentro del bloque de texto de "Somos Originantes". */
.split-section--originantes .originantes-eyebrow {
	font-size: clamp(1.3rem, 2.2vw, 1.8rem);
	margin-bottom: 28px;
}

/* "Somos Originantes": 3 columnas — texto / símbolo centrado / columna de
   fotos que sube en loop continuo, en orden secuencial (sin repetir hasta
   completar la vuelta), recortadas siempre en horizontal. El alto de la
   columna de fotos se sincroniza por JS con el texto (ver main.js). */
.split-section--originantes {
	/* Dos columnas: texto | fotos (la columna central del símbolo se eliminó;
	   el símbolo ahora vive como la "O" del título). El padding 5vw iguala la
	   geometría del testimonio del Lakota (.op-bleed__content) para que el
	   texto arranque en el mismo margen izquierdo. */
	grid-template-columns: 1.1fr 1fr;
	gap: 6rem;
	align-items: stretch;
	position: relative;
	z-index: 1;
	background: #000;
	padding-left: 5vw;
	padding-right: 5vw;
}

/* El bloque de texto se limita al mismo ancho que el testimonio del Lakota
   (640px), así los márgenes izquierdo y derecho coinciden con el de arriba. */
.split-section--originantes .split-section__text {
	max-width: 640px;
}

.split-section__logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

.originantes-symbol-static {
	width: 150px;
	max-width: 70%;
	opacity: 0.9;
}

.originantes-scroller {
	position: relative;
	overflow: hidden;
	/* Se puede arrastrar (mantener presionado y mover) para subir/bajar las
	   fotos — el JS controla el auto-scroll y el arrastre. */
	user-select: none;
	-webkit-user-select: none;
	/* Alto explícito (no "100%"/auto): con align-items:stretch, un alto
	   "auto" deja que el contenido interno (las fotos duplicadas, sin
	   límite) infle el cálculo de la fila del grid completa — y el texto
	   se estira para igualar esa altura inflada. Un valor fijo aquí evita
	   ese ciclo; el JS lo corrige al valor real en cuanto mide el texto. */
	height: 320px;
}

.originantes-scroller-track {
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* Fallback sin JS. Con JS, main.js toma el control (auto-scroll + arrastre)
	   y desactiva esta animación. 60s = un punto más lento que antes (50s). */
	animation: originantes-scroll-up 75s linear infinite;
}

@keyframes originantes-scroll-up {
	from { transform: translateY(0); }
	to { transform: translateY(-50%); }
}

.originantes-scroller-item {
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}

/* Recortadas siempre en horizontal (aspect-ratio fijo), sin transparencia. */
.originantes-scroller-item img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	filter: grayscale(100%);
	transition: filter 0.25s ease;
	/* Refuerzo contra el arrastre nativo de imagen del navegador. */
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;
}

.originantes-scroller-item:hover img {
	filter: grayscale(0%);
}

@media (prefers-reduced-motion: reduce) {
	.originantes-scroller-track {
		animation: none;
	}
}

/* La generación de fotos ya respeta prefers-reduced-motion en JS: si está
   activo, sencillamente no se genera ninguna. */

.originantes-names-wrap {
	width: 100%;
	padding: 44px 5vw;
}

/* Los créditos están visibles por defecto y solo se desvanecen (is-passed, la
   agrega main.js) cuando ya pasaste la sección; reaparecen al regresar. Sin JS
   permanecen visibles. */
.op-js .originantes-names-wrap {
	transition: opacity 1s ease;
}

.op-js .originantes-names-wrap.is-passed {
	opacity: 0;
}

.originantes-names {
	max-width: 1400px;
	margin: 0 auto;
	columns: 3;
	gap: 40px;
	font-weight: 200;
	font-size: 1rem;
}

.originantes-names li {
	margin-bottom: 14px;
	break-inside: avoid;
	padding-left: 1.1em;
	position: relative;
}

.originantes-names li::before {
	content: '•';
	color: var(--accent);
	position: absolute;
	left: 0;
}

@media (max-width: 900px) {
	.originantes-names {
		columns: 2;
	}
}

@media (max-width: 600px) {
	.originantes-names {
		columns: 1;
	}
}

.originantes-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
}

.originantes-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.originantes-lightbox-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.originantes-lightbox-close {
	position: absolute;
	top: 24px;
	right: 32px;
	background: none;
	border: none;
	color: #fff;
	font-size: 2.5rem;
	line-height: 1;
	cursor: pointer;
}

/* ==========================================================================
   Episodios — acordeón (idéntico al original)
   ========================================================================== */

.sorigen-episodios{max-width:100%;margin:0;padding:0;font-family:var(--font)}
.sorigen-temp-header{display:flex;align-items:center;gap:16px;padding:32px 0 16px}
.sorigen-temp-header::before,.sorigen-temp-header::after{content:'';flex:1;height:1px;background:var(--accent);opacity:.5}
.sorigen-temp-label{color:var(--accent);font-size:1.8rem;font-weight:300;letter-spacing:.08em;text-transform:lowercase;white-space:nowrap}
.sorigen-temp-1 .sorigen-temp-label{color:#9a7d6d}
.sorigen-temp-2 .sorigen-temp-label{color:#72281d}
.sorigen-temp-3 .sorigen-temp-label{color:#b3b3b3}
.sorigen-temp-4 .sorigen-temp-label{color:gray}
.sorigen-ep-list{border-top:1px solid var(--border)}
.sorigen-ep{border-bottom:1px solid var(--border)}
.sorigen-ep-btn{width:100%;background:transparent;border:none;cursor:pointer;padding:20px 0;display:flex;align-items:center;gap:20px;text-align:left}
.sorigen-ep-num{color:gray;font-size:1rem;font-weight:300;letter-spacing:.05em;min-width:24px;flex-shrink:0}
.sorigen-ep-titulo{flex:1;color:#fff;font-size:1.1rem;font-weight:300;letter-spacing:.08em;line-height:1.3}
.sorigen-ep-chevron{width:8px;height:8px;border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);transform:rotate(45deg);transition:transform .3s ease;flex-shrink:0;margin-right:4px}
.sorigen-ep-btn[aria-expanded="true"] .sorigen-ep-chevron{transform:rotate(-135deg)}
.sorigen-ep-detail{overflow:hidden;max-height:0;transition:max-height .4s ease}
.sorigen-ep-detail.is-open{max-height:9999px}
.sorigen-ep-inner{padding:0 0 28px 44px;display:flex;flex-direction:column}
.sorigen-invitado-wrap{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sorigen-invitado-label{color:var(--accent);font-size:1.1rem;font-weight:500;letter-spacing:.2em}
.sorigen-invitado-nombre{color:#fff;font-size:1.1rem;font-weight:300;letter-spacing:.08em}
.sorigen-redes-wrap{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sorigen-redes-label{color:var(--accent);font-size:1.1rem;font-weight:500;letter-spacing:.2em;flex-shrink:0}
.sorigen-redes-links{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sorigen-red-link{color:var(--text-muted);display:flex;align-items:center;transition:color .25s}
.sorigen-red-link:hover{color:var(--accent)}
.sorigen-red-link svg{width:16px;height:16px}
.sorigen-ep-sinopsis{color:#fff;font-size:1rem;font-weight:400;line-height:1.8;letter-spacing:.03em;margin:0 0 24px}
.sorigen-video-grid{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 -6px 20px}
.sorigen-video-block{box-sizing:border-box;padding:0 6px;width:33.33%}
.sorigen-video-label{font-size:1rem;font-weight:400;text-transform:lowercase;letter-spacing:.18em;color:var(--text-muted);margin:0 0 8px}
.sorigen-video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:2px;background:#111;cursor:pointer}
.sorigen-video-thumb{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:2px}
.sorigen-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgb(0 0 0 / .55);border:1px solid rgb(255 255 255 / .6);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s;z-index:2}
.sorigen-play-btn:hover{background:rgb(154 125 109 / .85);transform:translate(-50%,-50%) scale(1.1)}
.sorigen-play-icon{color:#fff;font-size:.9rem;margin-left:3px}
.sorigen-video-wrap iframe{position:absolute;top:0;left:0;width:100%!important;height:100%!important;border:none}
.sorigen-share-btn{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--border-soft);color:var(--text-muted);font-size:1rem;font-weight:300;letter-spacing:.12em;text-transform:lowercase;padding:8px 16px;border-radius:2px;transition:border-color .25s,color .25s;align-self:flex-end;margin-left:auto}
.sorigen-share-btn:hover{border-color:var(--accent);color:var(--accent)}
.sorigen-share-icon{width:14px;height:14px;flex-shrink:0;vertical-align:middle}
.sorigen-empty,.sorigen-error{color:gray;text-align:center;padding:40px 0;font-size:.9rem;letter-spacing:.1em}

/* ── Archivo visual (material_extra) — mismo tratamiento que "temporada" ── */
.sorigen-extra{max-width:860px;margin:0 auto;padding:0 24px 60px;font-family:var(--font)}
.sorigen-extra-header{display:flex;align-items:center;gap:16px;padding:32px 0 16px}
.sorigen-extra-header::before,.sorigen-extra-header::after{content:'';flex:1;height:1px;background:var(--accent);opacity:.5}
.sorigen-extra-label{color:var(--accent);font-size:1.8rem;font-weight:300;letter-spacing:.08em;text-transform:lowercase;white-space:nowrap}
.sorigen-extra-list{border-top:1px solid var(--border)}
.sorigen-extra-item{border-bottom:1px solid var(--border)}
.sorigen-extra-btn{width:100%;background:transparent;border:none;cursor:pointer;padding:22px 0;display:flex;align-items:center;gap:20px;text-align:left}
.sorigen-extra-titulo-wrap{flex:1;display:flex;flex-direction:column;gap:4px}
.sorigen-extra-titulo{color:#fff;font-size:1.1rem;font-weight:300;letter-spacing:.04em;line-height:1.3}
.sorigen-extra-fecha{color:var(--text-muted);font-size:.82rem;font-weight:400;letter-spacing:.1em;text-transform:lowercase}
.sorigen-extra-toggle{position:relative;width:16px;height:16px;flex-shrink:0;margin-right:4px}
.sorigen-extra-toggle::before,.sorigen-extra-toggle::after{content:'';position:absolute;background:var(--accent);transition:transform .3s ease,opacity .3s ease}
.sorigen-extra-toggle::before{top:50%;left:0;width:100%;height:1px;transform:translateY(-50%)}
.sorigen-extra-toggle::after{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)}
.sorigen-extra-btn[aria-expanded="true"] .sorigen-extra-toggle{transform:rotate(45deg)}
.sorigen-extra-btn[aria-expanded="true"] .sorigen-extra-toggle::before,.sorigen-extra-btn[aria-expanded="true"] .sorigen-extra-toggle::after{background:var(--accent)}
.sorigen-extra-detail{overflow:hidden;max-height:0;transition:max-height .4s ease}
.sorigen-extra-detail.is-open{max-height:9999px}
.sorigen-extra-inner{padding:0 0 28px 0;display:flex;flex-direction:column}
.sorigen-extra-video-wrap{position:relative;width:100%;max-width:280px;aspect-ratio:16 / 9;overflow:hidden;border-radius:2px;background:#111;cursor:pointer;margin:0 0 18px}
.sorigen-extra-video-thumb{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:2px}
.sorigen-extra-video-wrap iframe{position:absolute;top:0;left:0;width:100%!important;height:100%!important;border:none}
.sorigen-extra-sinopsis{color:#fff;font-size:1rem;font-weight:400;line-height:1.8;letter-spacing:.03em;margin:0}

@media (max-width: 768px) {
	.sorigen-extra-titulo{font-size:.95rem}
}

@media (max-width: 768px) {
	.sorigen-ep-titulo{font-size:.88rem}
	.sorigen-ep-inner{padding-left:0}
	.sorigen-invitado-wrap{margin-left:0}
	.sorigen-video-block{width:100%;max-width:100%}
}

/* ==========================================================================
   Encuentros — columnas asimétricas con divisor vertical
   ========================================================================== */

/* Imagen de fondo con parallax (como el Lakota) detrás de todo el contenido de
   Encuentros. El scrim oscuro mantiene el texto legible; el margen amplio
   (inset) evita que el desplazamiento del parallax descubra el fondo negro en
   una sección tan alta. En móvil el JS deja la imagen quieta (cubre igual). */
.op-encuentros {
	position: relative;
	overflow: hidden;
	background: #000;
}

.op-encuentros__media {
	position: absolute;
	/* Margen mínimo: solo el necesario para el desplazamiento del parallax.
	   Cuanto menor es este margen, menos se amplía la textura y más nítida se
	   ve (el margen grande la magnificaba y la hacía tosca). */
	inset: -12% 0;
	z-index: 0;
}

.op-encuentros__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	will-change: transform;
}

.op-encuentros__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Más transparencia: deja ver más la imagen de fondo (sin blur). */
	background: rgb(0 0 0 / 0.5);
}

.op-encuentros__content {
	position: relative;
	z-index: 2;
}

/* Fade a negro al FINAL de la sección: la textura del parallax se funde en
   negro antes de la franja de Conecta ("si hay una historia..."), para una
   transición suave. */
.op-encuentros::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 240px;
	z-index: 1;
	background: linear-gradient(to bottom, transparent, #000);
	pointer-events: none;
}

.encuentros-columns {
	display: grid;
	/* Columnas iguales para que "temporada" y "archivo visual" tengan el mismo
	   ancho (las líneas separadoras de cada encabezado quedan del mismo largo). */
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: start;
	max-width: 1600px;
	margin: 0 auto;
	padding: 70px 5vw;
}

.encuentros-columns .sorigen-episodios {
	padding-right: 4rem;
	border-right: 1px solid var(--border);
}

.encuentros-columns .sorigen-extra {
	max-width: 100%;
	padding: 0 0 0 4rem;
}

@media (max-width: 1000px) {
	.encuentros-columns {
		grid-template-columns: 1fr;
		padding: 40px 24px;
	}

	.encuentros-columns .sorigen-episodios {
		border-right: none;
		padding-right: 0;
	}

	.encuentros-columns .sorigen-extra {
		padding-left: 0;
	}
}

.section-divider {
	margin: 0;
	border: none;
	height: 1px;
	background: var(--border);
}

.origen-story {
	display: grid;
	grid-template-columns: 0.9fr 1fr;
	gap: 7rem;
	align-items: center;
	/* 1600px (igual que las columnas de episodios y las secciones superiores)
	   para que los márgenes izquierdo/derecho sean simétricos. */
	max-width: 1600px;
	margin: 0 auto;
	padding: 100px 5vw;
}

.origen-story__text h2 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 200;
	margin-bottom: 1rem;
}

.origen-story__text p {
	color: var(--text-muted);
	font-size: 1.05rem;
	line-height: 1.8;
}

.origen-story__video {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 4px;
}

.origen-story__video iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: none;
}

@media (max-width: 900px) {
	.origen-story {
		grid-template-columns: 1fr;
		padding: 60px 24px;
	}
}

/* ==========================================================================
   Conecta — formulario de contacto (CF7 shortcode)
   ========================================================================== */

/* La franja de Conecta lleva una frase larga como título: se reduce el tamaño
   para que quepa en ~2 líneas dentro de la franja (mismos efectos de revelado
   y misma altura que las demás). */
.op-divider.op-divider--conecta h2 {
	font-size: clamp(2rem, 4.6vw, 3.7rem);
	max-width: 1150px;
	line-height: 1.2;
}

/* Formulario centrado y un poco más ancho, para dar simetría a las tarjetas
   y campos. */
.op-conecta {
	padding: 8px 0 90px;
}

.op-conecta .conecta-form {
	max-width: 1080px;
}

.conecta-form{max-width:900px;margin:0 auto;padding:0 24px 60px}
.conecta-label{display:block;color:var(--accent);font-size:1rem;font-weight:500;letter-spacing:.18em;text-transform:lowercase;margin-bottom:14px}
.conecta-tarjetas{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:4rem}
.conecta-tarjeta{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:24px;min-height:170px;background:transparent;border:1px solid var(--border-soft);border-radius:8px;cursor:pointer;transition:border-color .25s,background .25s;text-align:left}
.conecta-tarjeta:hover{border-color:rgb(154 125 109 / .4);background:rgb(255 255 255 / .03)}
.conecta-tarjeta.activa{border-color:var(--accent);background:rgb(154 125 109 / .06)}
.conecta-tarjeta-icon{width:26px;height:26px;color:var(--accent);flex-shrink:0}
.conecta-tarjeta-icon svg{width:100%;height:100%}
.conecta-tarjeta-titulo{color:#fff;font-size:.92rem;font-weight:400;letter-spacing:.04em;line-height:1.3}
.conecta-tarjeta-desc{color:gray;font-size:.72rem;font-weight:300;letter-spacing:.03em}
.conecta-row{display:flex;gap:24px;margin-bottom:1.5rem;margin-top:2rem}
.conecta-field{flex:1}
.wpcf7 .conecta-form input[type="text"],.wpcf7 .conecta-form input[type="email"],.wpcf7 .conecta-form textarea{width:100%;box-sizing:border-box;background:transparent;border:none;border-bottom:1px solid var(--border-soft);color:#fff;font-family:var(--font);font-size:1rem;font-weight:300;letter-spacing:.04em;padding:12px 0;outline:none;transition:border-color .25s;resize:none;overflow:hidden;line-height:1.5}
.wpcf7 .conecta-form input:focus,.wpcf7 .conecta-form textarea:focus{border-bottom-color:#fff}
/* Altura mínima para que los textareas nunca se colapsen y recorten el
   placeholder (el auto-ajuste JS daba 0 mientras el campo estaba oculto). */
.wpcf7 .conecta-form textarea{min-height:48px}
.conecta-extra{display:none;margin-bottom:1.5rem}
.conecta-extra.activo{display:block}
.conecta-extra .conecta-label{margin-top:1.5rem}
.conecta-extra .conecta-label:first-child{margin-top:0}
.wpcf7 .conecta-form span.wpcf7-form-control-wrap[data-name="mensaje-general"]{display:block;border:none!important;outline:none!important;padding:0!important;margin:0!important;height:auto!important}
.wpcf7 .conecta-form input[type="submit"]{margin-top:0;display:block;margin-left:auto;margin-right:auto;background:transparent;border:1px solid var(--border-soft);color:#fff;font-family:var(--font);font-size:.88rem;font-weight:300;letter-spacing:.18em;text-transform:lowercase;padding:12px 32px;cursor:pointer;border-radius:8px;transition:border-color .25s,color .25s;height:44px}
.wpcf7 .conecta-form input[type="submit"]:hover{border-color:var(--accent);color:var(--accent)}
.wpcf7 .conecta-form input[type="submit"]:disabled{opacity:.5;cursor:not-allowed}
.wpcf7 .wpcf7-response-output{border:none!important;font-family:var(--font);font-size:.85rem;font-weight:300;letter-spacing:.05em;margin-top:1rem!important;padding:0!important;color:var(--accent);text-align:center}
.wpcf7 .conecta-form .cf-turnstile{margin:1rem auto 0!important;display:flex!important;justify-content:center}
.wpcf7 .conecta-form .cf-turnstile-br{display:none!important}
.conecta-confirmacion{text-align:center;padding:80px 24px}
.conecta-confirmacion-titulo{color:var(--accent);font-size:1.6rem;font-weight:300;letter-spacing:.1em;text-transform:lowercase;margin-bottom:16px}
.conecta-confirmacion-texto{color:var(--accent);font-size:1.2rem;font-weight:300;letter-spacing:.04em}

@media (max-width: 768px) {
	.conecta-row{flex-direction:column;gap:0}
	.conecta-tarjetas{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:3rem}
	.conecta-tarjeta{min-height:auto;padding:16px}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	padding: 50px 5vw;
	border-top: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.site-footer .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	width: 100%;
}

.site-footer__social {
	display: flex;
	gap: 20px;
}

.site-footer__social a {
	color: var(--text-muted);
	transition: color 0.25s;
}

.site-footer__social a:hover {
	color: var(--accent);
}

.site-footer__social svg {
	width: 18px;
	height: 18px;
}

.site-footer__copy {
	color: var(--text-faint);
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	margin: 0;
}

/* ==========================================================================
   Origen — Parallax: secciones ancladas (one-pager)
   ========================================================================== */

/* scroll-margin-top evita que el header fijo tape el inicio de la sección
   al saltar desde el menú (ajustar el valor cuando definamos el alto real
   del header en este tema). */
.op-section {
	scroll-margin-top: 100px;
	min-height: 100vh;
}

/* ── Barra negra divisoria entre secciones: el título vive aquí (fuera de
   la imagen), con el texto más pegado al borde inferior — más cerca de la
   imagen de abajo. Se usa igual en "El motivo de ser" y "Somos
   Originantes". ── */
/* Altura FIJA e idéntica para todas las franjas (un solo número a ajustar).
   El título vive centrado verticalmente: mitad de negro arriba, mitad abajo.
   overflow:hidden + parallax del h2 = las letras emergen del negro al hacer
   scroll y desaparecen en él, sin invadir nunca la sección siguiente. */
.op-divider {
	--franja-alto: 320px;
	background: #000;
	height: var(--franja-alto);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 5vw;
	text-align: center;
	position: relative;
	z-index: 0;
	overflow: hidden;
}

.op-divider .originantes-eyebrow {
	max-width: 1600px;
	margin: 0 auto 20px;
	will-change: transform;
}

.op-divider h2 {
	max-width: 1600px;
	margin: 0 auto;
	font-size: clamp(2.6rem, 5.5vw, 4.5rem);
	font-weight: 200;
	letter-spacing: 0.02em;
	line-height: 1.1;
	will-change: transform;
}

/* "el motivo de ser" en minúsculas (mismo estilo que "redefiniendo
   perspectivas"), sin afectar a "Somos Originantes". */
.op-divider--motivo h2 {
	text-transform: lowercase;
}

/* El símbolo de Origen hace las veces de la "O" de "Originantes" dentro del
   título de la franja. Se dimensiona a la altura de la letra y se alinea a la
   línea base del texto. */
.op-divider__o {
	display: inline-block;
	height: 2.1em;
	width: auto;
	vertical-align: -0.7em;
	/* Margen derecho negativo para acercar "riginantes" al símbolo. */
	margin: 0 -0.1em 0 0.02em;
}

/* El símbolo y "riginantes" nunca se separan; si no cabe, salta "somos" a su
   propia línea (corte limpio, sin partir la palabra). */
.op-o-word {
	white-space: nowrap;
}

@media (max-width: 700px) {
	.op-divider {
		--franja-alto: 220px;
		padding: 0 24px;
	}
}

/* ── "El motivo": imagen a todo lo ancho (no fondo fijo), texto superpuesto
   a la izquierda, con parallax real por transform (ver main.js). ── */
.op-bleed {
	position: relative;
	z-index: 1;
	overflow: hidden;
	min-height: 60vh;
	display: flex;
	align-items: center;
	padding: 110px 0 40px;
	background: #000;
}

.op-bleed__media {
	position: absolute;
	inset: -8% 0;
	z-index: 0;
}

.op-bleed__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	will-change: transform;
}

/* Difuminado superior: la imagen "nace" del negro de la barra de arriba en
   vez de cortar de golpe. Se hace con una COPIA de la misma foto, recortada
   a la franja superior y con filter:blur (no backdrop-filter) — así el
   desenfoque queda contenido en esta imagen y nunca se "filtra" hacia la
   franja de texto de arriba. */
.op-bleed__media .op-bleed__top-blur {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 24%;
	z-index: 1;
	object-position: top;
	filter: blur(18px);
	transform: scale(1.1);
	mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 100%);
	pointer-events: none;
}

/* Negro sólido encima de la copia difuminada, que se desvanece hacia la
   imagen nítida — sin blur propio, solo un degradado de color. */
.op-bleed__top-fade {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 20%;
	z-index: 2;
	background: linear-gradient(to bottom, #000 0%, #000 25%, transparent 100%);
	pointer-events: none;
}

/* Mismo tratamiento, espejado, en la parte de abajo — para que la imagen
   no termine de golpe justo antes de la franja "Somos Originantes". */
.op-bleed__media .op-bleed__bottom-blur {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 20%;
	z-index: 1;
	object-position: bottom;
	filter: blur(18px);
	transform: scale(1.1);
	mask-image: linear-gradient(to top, black 0%, black 30%, transparent 100%);
	-webkit-mask-image: linear-gradient(to top, black 0%, black 30%, transparent 100%);
	pointer-events: none;
}

.op-bleed__bottom-fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 18%;
	z-index: 2;
	background: linear-gradient(to top, #000 0%, #000 20%, transparent 100%);
	pointer-events: none;
}

.op-bleed__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgb(0 0 0 / 0.85) 0%, rgb(0 0 0 / 0.6) 42%, rgb(0 0 0 / 0.2) 68%, transparent 88%);
}

.op-bleed__content {
	position: relative;
	z-index: 2;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 5vw;
	width: 100%;
}

.op-bleed__text {
	max-width: 640px;
	text-align: left;
}

/* El testimonio nace oculto y aparece con fundido cuando la imagen ya está
   revelada (clase is-revealed la agrega main.js). Sin JS (.op-js ausente)
   permanece visible. */
.op-js .op-bleed__text {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1s ease, transform 1s ease;
}

.op-js .op-bleed__text.is-revealed {
	opacity: 1;
	transform: none;
}

.op-bleed__text .prose {
	max-width: none;
}

.op-bleed__text .prose p {
	margin: 0 0 1.4em;
}

.op-bleed__text .prose p:last-child {
	margin-bottom: 0;
}

/* "wio" (u otra palabra enfatizada) en el testimonio: bold + color arena para
   distinguirse del cuerpo ligero. */
.op-bleed__text .prose em {
	font-weight: 600;
	font-style: italic;
	color: var(--accent);
}

/* Capitular clásica en la primera letra del primer párrafo. */
.op-bleed__text .prose p:first-of-type::first-letter {
	font-family: var(--font);
	font-weight: 100;
	font-size: 5.2rem;
	line-height: 0.78;
	float: left;
	padding-right: 14px;
	padding-top: 4px;
	color: var(--text);
}

@media (max-width: 700px) {
	.op-bleed__text {
		max-width: 100%;
	}

	.op-bleed__scrim {
		background: linear-gradient(180deg, rgb(0 0 0 / 0.4) 0%, rgb(0 0 0 / 0.8) 55%, rgb(0 0 0 / 0.92) 100%);
	}

	.op-bleed__text .prose p:first-of-type::first-letter {
		font-size: 3.8rem;
	}
}

/* ── Ajustes SOLO para vertical (portrait) en móvil ──
   En horizontal todo se ve bien; en vertical la sección se vuelve muy alta y
   angosta, y la imagen full-bleed (horizontal) queda recortada a una franja
   central oscura. Aquí la convertimos en un BANNER con buena proporción arriba
   y dejamos el texto debajo, legible sobre negro. También se ajusta el título
   con el símbolo para que no se parta. */
@media (max-width: 768px) and (orientation: portrait) {
	.op-bleed {
		display: block;
		min-height: 0;
		padding: 0 0 8px;
	}

	.op-bleed__media {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
	}

	.op-bleed__media img {
		height: 100%;
		object-position: center;
	}

	/* El texto ya no va sobre la imagen, así que no hace falta el degradado. */
	.op-bleed__scrim {
		display: none;
	}

	.op-bleed__content {
		position: relative;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 32px 24px 8px;
	}

	.op-bleed__text {
		max-width: 100%;
	}

	/* Símbolo de la "O" más contenido en pantallas angostas. */
	.op-divider__o {
		height: 1.55em;
		vertical-align: -0.42em;
		margin: 0 -0.04em 0 0.03em;
	}
}