/* Olympus Inicio - Direccion "Olympus Oro sobre Negro"
 *
 * Cuatro secciones, cuatro composiciones distintas a proposito: filas con
 * filete, rejilla desigual, foto y texto, y banda de cierre. Repetir la misma
 * familia de maquetacion en todas es lo que hace que una pagina parezca
 * generada en serie.
 *
 * Prefijo .odt-i en todos los selectores: el kit global de Elementor estiliza
 * `a`, `h2`, `h3` y `li` con especificidad 0,1,1.
 */

.odt-i {
	--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: linear-gradient(180deg, var(--odt-bg) 0%, var(--odt-bg-warm) 40%, var(--odt-bg) 100%);
}

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

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

.odt-i .odt-i__h2 {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: clamp(32px, 4.4vw, 52px);
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--odt-ink);
	margin: 0 0 18px;
}

.odt-i .odt-i__lede {
	font-size: 18px;
	line-height: 1.6;
	color: var(--odt-muted);
	max-width: 62ch;
	margin: 0 0 40px;
}

.odt-i .odt-i__parrafo {
	font-size: 17px;
	line-height: 1.7;
	color: var(--odt-muted);
	max-width: 62ch;
	margin: 0 0 28px;
}

/* Botones ---------------------------------------------------------------- */

.odt-i .odt-i__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: #101010;
	background: linear-gradient(135deg, var(--odt-accent) 0%, var(--odt-support) 100%);
	border: 1px solid var(--odt-accent);
	border-radius: 999px;
	padding: 14px 30px;
	transition: filter 0.2s ease, transform 0.12s ease;
}

.odt-i .odt-i__btn:hover {
	color: #101010;
	filter: brightness(1.08);
}

.odt-i .odt-i__btn:active {
	transform: translateY(1px);
}

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

.odt-i .odt-i__btn--fantasma {
	color: var(--odt-accent);
	background: transparent;
	border: 1px solid var(--odt-accent);
}

.odt-i .odt-i__btn--fantasma:hover {
	color: var(--odt-support);
	border-color: var(--odt-support);
	filter: none;
}

.odt-i .odt-i__btn--oscuro {
	color: var(--odt-support);
	background: #101010;
	border: 1px solid #101010;
}

.odt-i .odt-i__btn--oscuro:hover {
	color: var(--odt-support);
	background: var(--odt-surface);
	filter: none;
}

/* 1. Beneficios: filas con filete, sin tarjetas -------------------------- */

.odt-i .odt-i__beneficios {
	padding: 90px 0 20px;
}

.odt-i .odt-i__lista {
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 56px;
}

.odt-i .odt-i__fila {
	padding: 26px 0;
	/* Filete degradado: el dorado entra y se va, nunca corta de lado a lado. */
	border-top: 1px solid transparent;
	border-image: linear-gradient(90deg, rgba(181, 153, 83, 0.85) 0%, rgba(181, 153, 83, 0.18) 55%, rgba(181, 153, 83, 0) 100%) 1;
}

.odt-i .odt-i__fila-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-i .odt-i__fila-texto {
	font-size: 16px;
	line-height: 1.65;
	color: var(--odt-muted);
	margin: 0;
	max-width: 52ch;
}

/* 2. Clases: rejilla desigual de categorias ------------------------------ */

.odt-i .odt-i__clases {
	padding: 80px 0;
}

.odt-i .odt-i__bento {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
}

.odt-i .odt-i__cat {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	border: 1px solid var(--odt-line);
	border-radius: var(--odt-radius);
	background: linear-gradient(180deg, var(--odt-bg-warm) 0%, var(--odt-bg) 70%);
	transition: border-color 0.25s ease;
}

.odt-i .odt-i__cat[data-span="2"] { grid-column: span 2; }
.odt-i .odt-i__cat[data-span="4"] { grid-column: span 4; }
.odt-i .odt-i__cat[data-span="6"] { grid-column: span 6; }

.odt-i .odt-i__cat-media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.odt-i .odt-i__cat[data-span="4"] .odt-i__cat-media { aspect-ratio: 3 / 2; }
.odt-i .odt-i__cat[data-span="6"] .odt-i__cat-media { aspect-ratio: 16 / 9; }

.odt-i .odt-i__cat-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 32%;
	transition: transform 0.5s ease;
}

.odt-i .odt-i__cat-img--placeholder {
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(181, 153, 83, 0.3) 0%, rgba(181, 153, 83, 0) 62%),
		linear-gradient(180deg, var(--odt-surface) 0%, var(--odt-bg-warm) 100%);
}

/* El velo acaba en el mismo tono con el que arranca el cuerpo: sin corte. */
.odt-i .odt-i__cat-velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(16, 16, 16, 0) 0%,
		rgba(16, 16, 16, 0.1) 40%,
		rgba(181, 153, 83, 0.12) 58%,
		rgba(20, 18, 14, 0.85) 80%,
		#14120e 100%
	);
}

.odt-i .odt-i__cat-cuerpo {
	display: block;
	padding: 16px 22px 24px;
}

.odt-i .odt-i__cat-nombre {
	display: block;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--odt-ink);
	margin-bottom: 6px;
}

.odt-i .odt-i__cat[data-span="4"] .odt-i__cat-nombre,
.odt-i .odt-i__cat[data-span="6"] .odt-i__cat-nombre {
	font-size: 32px;
}

.odt-i .odt-i__cat-clases {
	display: block;
	font-size: 15px;
	line-height: 1.5;
	color: var(--odt-muted);
}

@media (hover: hover) and (pointer: fine) {
	.odt-i .odt-i__cat:hover {
		border-color: var(--odt-accent);
	}
	.odt-i .odt-i__cat:hover .odt-i__cat-img {
		transform: scale(1.04);
	}
}

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

.odt-i .odt-i__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 40px 0 0;
}

/* 3. Sobre la escuela: foto y texto -------------------------------------- */

.odt-i .odt-i__sobre {
	padding: 20px 0 80px;
}

.odt-i .odt-i__sobre-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.odt-i .odt-i__sobre-foto {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--odt-line);
	border-radius: var(--odt-radius);
}

.odt-i .odt-i__foto {
	display: block;
	width: 100%;
	height: auto;
}

/* 4. Cierre: banda dorada a todo el ancho -------------------------------- */

.odt-i .odt-i__cierre {
	/* Del negro de la seccion anterior al dorado, sin borde duro. */
	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%);
	padding: 84px 0 78px;
	text-align: center;
}

.odt-i .odt-i__cierre-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.odt-i .odt-i__cierre-titulo {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: clamp(32px, 4.6vw, 54px);
	line-height: 1.05;
	text-transform: uppercase;
	color: #101010;
	margin: 0 0 14px;
}

/* Sobre el dorado no vale la tinta blanca de la paleta. Se usa el negro de la
   casa rebajado: mantiene la jerarquia y pasa AA (4.9:1 sobre el dorado). */
.odt-i .odt-i__cierre-texto {
	font-size: 18px;
	line-height: 1.6;
	color: rgba(16, 16, 16, 0.78);
	max-width: 52ch;
	margin: 0 0 28px;
}

.odt-i .odt-i__cierre-pie {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(16, 16, 16, 0.78);
	margin: 24px 0 0;
}

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

@media (max-width: 1024px) {
	.odt-i .odt-i__bento {
		grid-template-columns: repeat(2, 1fr);
	}

	.odt-i .odt-i__cat[data-span="2"],
	.odt-i .odt-i__cat[data-span="4"],
	.odt-i .odt-i__cat[data-span="6"] {
		grid-column: span 1;
	}

	/* Si el numero de categorias es impar, la ultima ocupa la fila entera
	   para no dejar media fila vacia. */
	.odt-i .odt-i__cat:last-child:nth-child(odd) {
		grid-column: span 2;
	}

	/* Hay que repetir el [data-span] para ganarle a la regla de escritorio:
	   `.odt-i__cat[data-span="4"] .odt-i__cat-media` pesa mas que una clase suelta. */
	.odt-i .odt-i__cat[data-span="2"] .odt-i__cat-media,
	.odt-i .odt-i__cat[data-span="4"] .odt-i__cat-media,
	.odt-i .odt-i__cat[data-span="6"] .odt-i__cat-media { aspect-ratio: 4 / 3; }

	.odt-i .odt-i__cat:last-child:nth-child(odd) .odt-i__cat-media { aspect-ratio: 16 / 9; }

	.odt-i .odt-i__cat[data-span="4"] .odt-i__cat-nombre,
	.odt-i .odt-i__cat[data-span="6"] .odt-i__cat-nombre {
		font-size: 26px;
	}

	.odt-i .odt-i__sobre-grid {
		gap: 36px;
	}
}

/* Movil ------------------------------------------------------------------ */

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

	.odt-i .odt-i__beneficios { padding: 56px 0 10px; }
	.odt-i .odt-i__clases     { padding: 52px 0; }
	.odt-i .odt-i__sobre      { padding: 10px 0 52px; }
	.odt-i .odt-i__cierre     { padding: 60px 0 56px; }

	.odt-i .odt-i__lista {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.odt-i .odt-i__bento {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.odt-i .odt-i__cat[data-span="2"],
	.odt-i .odt-i__cat[data-span="4"],
	.odt-i .odt-i__cat[data-span="6"],
	.odt-i .odt-i__cat:last-child:nth-child(odd) {
		grid-column: span 1;
	}

	.odt-i .odt-i__cat[data-span="2"] .odt-i__cat-media,
	.odt-i .odt-i__cat[data-span="4"] .odt-i__cat-media,
	.odt-i .odt-i__cat[data-span="6"] .odt-i__cat-media,
	.odt-i .odt-i__cat:last-child:nth-child(odd) .odt-i__cat-media {
		aspect-ratio: 4 / 3;
	}

	.odt-i .odt-i__cat-nombre,
	.odt-i .odt-i__cat[data-span="4"] .odt-i__cat-nombre,
	.odt-i .odt-i__cat[data-span="6"] .odt-i__cat-nombre {
		font-size: 24px;
	}

	.odt-i .odt-i__sobre-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/* La foto primero, que es lo que engancha en una pantalla estrecha. */
	.odt-i .odt-i__sobre-foto { order: -1; }

	.odt-i .odt-i__acciones .odt-i__btn {
		flex: 1 1 100%;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.odt-i .odt-i__cat,
	.odt-i .odt-i__cat-img,
	.odt-i .odt-i__btn {
		transition: none;
	}
	.odt-i .odt-i__cat:hover .odt-i__cat-img,
	.odt-i .odt-i__btn:active {
		transform: none;
	}
}