/* Olympus Conócenos - Direccion "Olympus Oro sobre Negro"
 *
 * Su seña propia frente al resto del sitio: un filete dorado vertical que
 * recorre la parte narrativa de la pagina, como el hilo de un relato. Las
 * otras paginas usan filetes horizontales, velos sobre foto o bandas.
 *
 * Y su propio efecto de aparicion: los bloques se acercan (escala 0,965 a 1)
 * en lugar de subir, entrar de lado o fundirse a secas.
 */

.odt-n {
	--odt-bg: #101010;
	--odt-bg-warm: #14120e;
	--odt-surface: #191817;
	--odt-ink: #ffffff;
	--odt-muted: #a6a29b;
	--odt-accent: #b59953;
	--odt-support: #e7df9f;
	--odt-line: #2e2b26;
	--odt-radius: 10px;

	font-family: "Barlow", sans-serif;
	color: var(--odt-ink);
	background-color: var(--odt-bg);
	overflow-x: clip;
}

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

.odt-n .odt-n__wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

.odt-n .odt-n__h2 {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: clamp(30px, 4.2vw, 50px);
	line-height: 1.06;
	text-transform: uppercase;
	color: var(--odt-ink);
	margin: 0 0 24px;
}

.odt-n .odt-n__parrafo {
	font-size: 17px;
	line-height: 1.75;
	color: var(--odt-muted);
	margin: 0;
}

/* Aparicion: los bloques se acercan ------------------------------------- */

.odt-anim .odt-n [data-odt-reveal] {
	opacity: 0;
	transform: scale(0.965);
	transition:
		opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: calc(var(--odt-orden, 0) * 130ms);
}

.odt-anim .odt-n [data-odt-reveal].odt-visible {
	opacity: 1;
	transform: none;
}

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

.odt-n .odt-n__hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 56vh;
	min-height: 56dvh;
	overflow: hidden;
}

.odt-n .odt-n__hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 40%;
}

.odt-n .odt-n__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(16, 16, 16, 0.52) 0%,
		rgba(16, 16, 16, 0.34) 26%,
		rgba(181, 153, 83, 0.1) 48%,
		rgba(16, 16, 16, 0.84) 76%,
		#101010 100%
	);
}

.odt-n .odt-n__hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-bottom: 48px;
}

.odt-n .odt-n__hero-titulo {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: clamp(42px, 6.2vw, 82px);
	line-height: 1.02;
	text-transform: uppercase;
	color: var(--odt-ink);
	margin: 0 0 16px;
}

.odt-n .odt-n__hero-texto {
	font-size: 19px;
	line-height: 1.6;
	color: var(--odt-muted);
	max-width: 58ch;
	margin: 0;
}

/* Relato: el hilo dorado ------------------------------------------------- */

.odt-n .odt-n__relato {
	padding: 88px 0 76px;
	background: linear-gradient(180deg, var(--odt-bg) 0%, var(--odt-bg-warm) 100%);
}

.odt-n .odt-n__relato-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
}

/* El primer parrafo lleva el hilo: un filete vertical que se apaga hacia
   abajo, la marca propia de esta pagina. */
.odt-n .odt-n__parrafo--guia {
	position: relative;
	padding-left: 26px;
	font-size: 19px;
	color: var(--odt-ink);
}

.odt-n .odt-n__parrafo--guia::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 2px;
	background: linear-gradient(180deg, var(--odt-accent) 0%, rgba(181, 153, 83, 0.15) 80%, rgba(181, 153, 83, 0) 100%);
}

/* Filosofía -------------------------------------------------------------- */

.odt-n .odt-n__filosofia {
	padding: 76px 0;
	background:
		radial-gradient(62% 50% at 88% 0%, rgba(181, 153, 83, 0.1) 0%, rgba(181, 153, 83, 0) 70%),
		linear-gradient(180deg, var(--odt-bg-warm) 0%, var(--odt-bg) 100%);
}

.odt-n .odt-n__valores {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px 48px;
}

.odt-n .odt-n__valor {
	position: relative;
	padding-left: 24px;
	border-left: 1px solid transparent;
	border-image: linear-gradient(180deg, var(--odt-accent) 0%, rgba(181, 153, 83, 0.1) 100%) 1;
}

.odt-n .odt-n__valor-titulo {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 23px;
	line-height: 1.15;
	letter-spacing: 0.02em;
	color: var(--odt-accent);
	margin: 0 0 8px;
}

.odt-n .odt-n__valor-texto {
	font-size: 16px;
	line-height: 1.65;
	color: var(--odt-muted);
	margin: 0;
	max-width: 46ch;
}

/* Elisabet y el vídeo ---------------------------------------------------- */

.odt-n .odt-n__persona {
	padding: 76px 0;
	background: linear-gradient(180deg, var(--odt-bg) 0%, var(--odt-bg-warm) 100%);
}

.odt-n .odt-n__persona-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

.odt-n .odt-n__video {
	overflow: hidden;
	border: 1px solid var(--odt-line);
	border-radius: var(--odt-radius);
	background: var(--odt-surface);
}

.odt-n .odt-n__video-el {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #101010;
}

/* Cuando no hay video, la portada se enseña sola.
   Aqui no se recorta a 16/9 como en el video: alli el recorte lo justifica el
   reproductor, pero una foto suelta cortada por arriba pierde justo la cabeza
   de quien baila. Se respeta la proporcion que tenga la imagen. */
.odt-n .odt-n__foto {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--odt-line);
	border-radius: var(--odt-radius);
	background: var(--odt-surface);
}

.odt-n .odt-n__foto-el {
	display: block;
	width: 100%;
	height: auto;
}

.odt-n .odt-n__nombre {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.1;
	color: var(--odt-accent);
	margin: 0 0 4px;
}

.odt-n .odt-n__papel {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--odt-muted);
	margin: 0 0 20px;
}

/* Lema ------------------------------------------------------------------- */

.odt-n .odt-n__lema {
	padding: 96px 0;
	text-align: center;
	background:
		radial-gradient(56% 76% at 50% 50%, rgba(181, 153, 83, 0.14) 0%, rgba(181, 153, 83, 0) 72%),
		linear-gradient(180deg, var(--odt-bg-warm) 0%, var(--odt-bg) 100%);
}

.odt-n .odt-n__lema-frase {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: clamp(34px, 5.6vw, 68px);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--odt-ink);
	max-width: 18ch;
	margin: 0 auto 18px;
	padding: 0;
	border: 0;
	quotes: none;
}

.odt-n .odt-n__lema-frase::before,
.odt-n .odt-n__lema-frase::after {
	content: none;
}

.odt-n .odt-n__lema-apoyo {
	font-size: 17px;
	line-height: 1.6;
	color: var(--odt-muted);
	max-width: 56ch;
	margin: 0 auto;
}

/* Dónde estamos ---------------------------------------------------------- */

.odt-n .odt-n__donde {
	padding: 20px 0 84px;
	background: var(--odt-bg);
}

.odt-n .odt-n__datos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px 48px;
	margin: 0;
}

.odt-n .odt-n__dato {
	padding-top: 18px;
	border-top: 1px solid transparent;
	border-image: linear-gradient(90deg, var(--odt-accent) 0%, rgba(181, 153, 83, 0.16) 60%, rgba(181, 153, 83, 0) 100%) 1;
}

.odt-n .odt-n__dato-etq {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--odt-muted);
	margin: 0 0 6px;
}

.odt-n .odt-n__dato-val {
	font-size: 18px;
	line-height: 1.5;
	color: var(--odt-ink);
	margin: 0;
}

.odt-n .odt-n__enlace {
	color: var(--odt-support);
	text-decoration: none;
	border-bottom: 1px solid rgba(181, 153, 83, 0.5);
}

.odt-n .odt-n__enlace:hover {
	color: var(--odt-support);
	border-bottom-color: var(--odt-support);
}

.odt-n .odt-n__enlace:focus-visible {
	outline: 2px solid var(--odt-support);
	outline-offset: 3px;
}

/* Cierre ----------------------------------------------------------------- */

.odt-n .odt-n__cierre {
	padding: 78px 0;
	text-align: center;
	background:
		radial-gradient(120% 140% at 50% 0%, rgba(16, 16, 16, 0.85) 0%, rgba(16, 16, 16, 0) 55%),
		linear-gradient(135deg, var(--odt-accent) 0%, var(--odt-support) 100%);
}

.odt-n .odt-n__cierre-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.odt-n .odt-n__cierre-titulo {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: clamp(30px, 4.4vw, 50px);
	line-height: 1.05;
	text-transform: uppercase;
	color: #101010;
	margin: 0 0 14px;
}

.odt-n .odt-n__cierre-texto {
	font-size: 18px;
	line-height: 1.6;
	color: rgba(16, 16, 16, 0.78);
	max-width: 54ch;
	margin: 0 0 26px;
}

.odt-n .odt-n__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 0;
}

.odt-n .odt-n__btn {
	display: inline-block;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--odt-support);
	background: #101010;
	border: 1px solid #101010;
	border-radius: 999px;
	padding: 14px 28px;
	transition: background-color 0.2s ease, transform 0.12s ease;
}

.odt-n .odt-n__btn:hover {
	color: var(--odt-support);
	background: var(--odt-surface);
}

.odt-n .odt-n__btn:active {
	transform: translateY(1px);
}

.odt-n .odt-n__btn:focus-visible {
	outline: 2px solid #101010;
	outline-offset: 3px;
}

.odt-n .odt-n__btn--fantasma {
	color: #101010;
	background: transparent;
	border: 1px solid rgba(16, 16, 16, 0.55);
}

.odt-n .odt-n__btn--fantasma:hover {
	color: #101010;
	background: rgba(16, 16, 16, 0.08);
}

/* Tableta ---------------------------------------------------------------- */

@media (max-width: 1024px) {
	.odt-n .odt-n__relato-grid,
	.odt-n .odt-n__persona-grid {
		gap: 34px;
	}

	.odt-n .odt-n__valores {
		gap: 26px 32px;
	}
}

/* Móvil ------------------------------------------------------------------ */

@media (max-width: 780px) {
	.odt-n .odt-n__wrap {
		padding: 0 16px;
	}

	.odt-n .odt-n__hero {
		min-height: 46vh;
		min-height: 46dvh;
	}

	.odt-n .odt-n__hero-inner {
		padding-bottom: 34px;
	}

	.odt-n .odt-n__hero-texto {
		font-size: 17px;
	}

	.odt-n .odt-n__relato    { padding: 54px 0 48px; }
	.odt-n .odt-n__filosofia { padding: 52px 0; }
	.odt-n .odt-n__persona   { padding: 52px 0; }
	.odt-n .odt-n__lema      { padding: 64px 0; }
	.odt-n .odt-n__donde     { padding: 10px 0 56px; }
	.odt-n .odt-n__cierre    { padding: 58px 0; }

	.odt-n .odt-n__relato-grid,
	.odt-n .odt-n__valores,
	.odt-n .odt-n__datos {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.odt-n .odt-n__persona-grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	/* El vídeo primero: es lo que engancha en una pantalla estrecha. */
	.odt-n .odt-n__video,
	.odt-n .odt-n__foto {
		order: -1;
	}

	.odt-n .odt-n__parrafo--guia {
		font-size: 18px;
	}

	.odt-n .odt-n__lema-frase {
		max-width: 14ch;
	}

	.odt-n .odt-n__acciones .odt-n__btn {
		flex: 1 1 100%;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.odt-anim .odt-n [data-odt-reveal],
	.odt-anim .odt-n [data-odt-reveal].odt-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.odt-n .odt-n__btn {
		transition: none;
	}
}