/* Olympus Clases - Direccion "Olympus Oro sobre Negro"
 *
 * Version 1.6.0: rediseño completo sobre la misma paleta. La regla que manda
 * aqui sigue siendo la de siempre: el dorado y el negro nunca se tocan en un
 * borde duro; todas las transiciones entre ellos van degradadas.
 *
 * Los selectores van prefijados con .odt-c porque el kit global de Elementor
 * estiliza `a`, `h1` y `h2` con especificidad 0,1,1.
 */

.odt-c {
	--odt-bg: #101010;
	--odt-bg-warm: #14120e;
	--odt-surface: #191817;
	--odt-surface-hover: #201e1b;
	--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) 45%, var(--odt-bg) 100%);
}

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

/* Cabecera ---------------------------------------------------------------
 *
 * La foto ocupa mas alto que antes (62dvh) y el contenido se apoya sobre el
 * velo, no contra el borde. La etiqueta superior y la regla dorada dan el
 * aire "de marca" sin meter ni un solo color nuevo.
 */

.odt-c .odt-c__hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* dvh y no vh: en iOS la barra de direcciones cambia el vh y da un salto. */
	min-height: 62vh;
	min-height: 62dvh;
	padding: 0;
	overflow: hidden;
}

.odt-c .odt-c__hero--plain {
	min-height: 0;
	padding-top: 72px;
}

.odt-c .odt-c__hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 30%;
	/* La foto entra asentandose desde un zoom leve, como las tarjetas. */
	animation: odt-c-hero-asienta 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes odt-c-hero-asienta {
	from { transform: scale(1.06); }
	to   { transform: scale(1); }
}

/* El velo: de casi transparente arriba a negro pleno abajo, con un apunte de
   dorado a media altura para que la foto no se recorte contra el fondo. */
.odt-c .odt-c__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(16, 16, 16, 0.55) 0%,
		rgba(16, 16, 16, 0.35) 26%,
		rgba(181, 153, 83, 0.1) 46%,
		rgba(16, 16, 16, 0.84) 72%,
		#101010 100%
	);
}

.odt-c .odt-c__hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px 56px;
}

/* Etiqueta superior: la unica pieza en dorado palido del hero. */
.odt-c .odt-c__hero-tag {
	display: inline-block;
	margin: 0 0 18px;
	padding: 7px 16px;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--odt-support);
	border: 1px solid rgba(181, 153, 83, 0.45);
	border-radius: 999px;
	background: rgba(16, 16, 16, 0.35);
	backdrop-filter: blur(3px);
}

.odt-c .odt-c__hero-title {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: clamp(52px, 8vw, 104px);
	line-height: 1.0;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--odt-ink);
	margin: 0;
	max-width: 14ch;
	/* Sombra de texto, no de caja: la unica permitida, y solo para leer sobre
	   la foto. No es una sombra proyectada de componente. */
	text-shadow: 0 2px 30px rgba(16, 16, 16, 0.6);
}

/* Filete degradado: el dorado entra y sale, no corta de lado a lado. */
.odt-c .odt-c__hero-rule {
	display: block;
	width: 120px;
	height: 2px;
	margin: 22px 0 0;
	border: 0;
	background: linear-gradient(90deg, var(--odt-accent) 0%, rgba(181, 153, 83, 0) 100%);
}

.odt-c .odt-c__hero-text {
	font-size: 19px;
	line-height: 1.6;
	color: var(--odt-muted);
	max-width: 56ch;
	margin: 18px 0 0;
}

/* El kicker cuenta la oferta en una linea: 10 disciplinas, una sola casa. */
.odt-c .odt-c__hero-kicker {
	margin: 14px 0 0;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--odt-support);
}

.odt-c .odt-c__hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 28px;
	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: 15px 32px;
	transition: filter 0.2s ease, transform 0.12s ease;
}

.odt-c .odt-c__hero-btn .odt-c__arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

.odt-c .odt-c__hero-btn:hover {
	color: #101010;
	filter: brightness(1.08);
}

.odt-c .odt-c__hero-btn:hover .odt-c__arrow {
	transform: translateX(4px);
}

.odt-c .odt-c__hero-btn:active {
	transform: translateY(1px);
}

.odt-c .odt-c__hero-btn:focus-visible {
	outline: 2px solid var(--odt-support);
	outline-offset: 3px;
}

/* Grupos y rejilla --------------------------------------------------------
 *
 * La cabecera de grupo ahora lleva indice numerado a la izquierda y el
 * conteo de clases a la derecha: se entiende de un vistazo cuantas piezas
 * tiene cada bloque sin contar tarjetas.
 */

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

.odt-c .odt-c__group:first-of-type {
	padding-top: 64px;
}

.odt-c .odt-c__group:last-of-type {
	padding-bottom: 80px;
}

.odt-c .odt-c__group-head {
	display: flex;
	align-items: baseline;
	gap: 18px;
	margin: 56px 0 24px;
	padding-bottom: 16px;
	/* Filete degradado: el dorado entra y sale, no corta de lado a lado. */
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(90deg, var(--odt-accent) 0%, rgba(181, 153, 83, 0.15) 45%, rgba(181, 153, 83, 0) 100%) 1;
}

.odt-c .odt-c__group:first-of-type .odt-c__group-head {
	margin-top: 0;
}

.odt-c .odt-c__group-index {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.12em;
	color: var(--odt-accent);
}

.odt-c .odt-c__group-title {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 3.2vw, 38px);
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--odt-ink);
	margin: 0;
}

.odt-c .odt-c__group-count {
	margin-left: auto;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--odt-muted);
	white-space: nowrap;
}

.odt-c .odt-c__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 24px;
}

.odt-c .odt-c__card[data-span="2"] {
	grid-column: span 2;
}

.odt-c .odt-c__card[data-span="4"] {
	grid-column: span 4;
}

.odt-c .odt-c__card[data-span="6"] {
	grid-column: span 6;
}

/* Tarjeta ---------------------------------------------------------------- */

/* Aparicion al desplazar --------------------------------------------------
 *
 * El efecto propio de esta pagina: la tarjeta se funde mientras su foto se
 * asienta desde un zoom leve, como si terminara de enfocar. Nada de subir ni
 * entrar de lado, que es lo que hacen las otras paginas.
 */
.odt-anim .odt-c .odt-c__group-head[data-odt-reveal] {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.odt-anim .odt-c .odt-c__group-head[data-odt-reveal].odt-visible {
	opacity: 1;
}

.odt-anim .odt-c .odt-c__card[data-odt-reveal] .odt-c__inner {
	opacity: 0;
	transition:
		opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
		border-color 0.25s ease,
		transform 0.25s ease;
	transition-delay: calc(var(--odt-orden, 0) * 130ms);
}

.odt-anim .odt-c .odt-c__card[data-odt-reveal].odt-visible .odt-c__inner {
	opacity: 1;
}

.odt-anim .odt-c .odt-c__card[data-odt-reveal] .odt-c__img {
	transform: scale(1.07);
	transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: calc(var(--odt-orden, 0) * 130ms);
}

.odt-anim .odt-c .odt-c__card[data-odt-reveal].odt-visible .odt-c__img {
	transform: scale(1);
}

/* La casilla no se mueve: es la zona sensible al raton. Sin esto, al elevarse
   la tarjeta bajo el cursor se pierde el hover y aparece un parpadeo continuo. */
.odt-c .odt-c__card {
	display: flex;
}

.odt-c .odt-c__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	overflow: hidden;
	background: linear-gradient(180deg, var(--odt-bg-warm) 0%, var(--odt-bg) 62%);
	border: 1px solid var(--odt-line);
	border-radius: var(--odt-radius);
	transition: border-color 0.25s ease, transform 0.25s ease;
}

/* Solo en dispositivos con raton de verdad: en tactil el hover se queda pegado
   despues de tocar y la tarjeta se quedaria elevada. */
@media (hover: hover) and (pointer: fine) {
	.odt-c .odt-c__card:hover .odt-c__inner {
		border-color: var(--odt-accent);
		transform: translateY(-4px);
	}

	.odt-c .odt-c__card:hover .odt-c__img {
		transform: scale(1.04);
	}
}

.odt-c .odt-c__card:active .odt-c__inner {
	transform: translateY(-2px);
}

/* Texto solo para lectores de pantalla. */
.odt-c .odt-c__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Cada ancho lleva su propio encuadre: asi la rejilla tiene ritmo tambien en
   la forma de las fotos, no solo en el ancho de las tarjetas. */
.odt-c .odt-c__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

/* Encuadres contenidos a proposito: casi todas las fotos del centro son
   verticales (1707x2560) y un 21:9 se comia la escena entera. 3:2 y 16:9
   mantienen el ritmo entre tarjetas sin destrozar la foto. */
.odt-c .odt-c__card[data-span="4"] .odt-c__media {
	aspect-ratio: 3 / 2;
}

.odt-c .odt-c__card[data-span="6"] .odt-c__media {
	aspect-ratio: 16 / 9;
}

.odt-c .odt-c__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Al recortar una foto vertical, el centro geometrico cae a la altura de las
	   piernas. Subiendo el encuadre se conservan caras y brazos, que es donde
	   esta la accion en una foto de baile. */
	object-position: center 32%;
	transition: transform 0.5s ease;
}

/* Sin foto: degradado de la propia paleta, no un hueco vacio. */
.odt-c .odt-c__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 termina en el mismo color con el que empieza el cuerpo. */
.odt-c .odt-c__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(16, 16, 16, 0) 0%,
		rgba(16, 16, 16, 0.12) 38%,
		rgba(181, 153, 83, 0.12) 55%,
		rgba(20, 18, 14, 0.82) 78%,
		#14120e 100%
	);
}

/* Cabecera sobre la foto: numero de la clase dentro del grupo y titulo. */
.odt-c .odt-c__head {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 16px;
	z-index: 1;
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.odt-c .odt-c__num {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.1em;
	color: var(--odt-accent);
}

.odt-c .odt-c__title {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.08;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--odt-ink);
	margin: 0;
}

.odt-c .odt-c__card[data-span="4"] .odt-c__title {
	font-size: 34px;
}

.odt-c .odt-c__card[data-span="6"] .odt-c__title {
	font-size: 40px;
}

.odt-c .odt-c__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 16px;
	padding: 16px 22px 26px;
}

/* La categoria repetida dentro de la tarjeta: orienta sin obligar a subir
   la vista al titulo del grupo. */
.odt-c .odt-c__meta {
	margin: 0;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--odt-accent);
}

.odt-c .odt-c__desc {
	font-size: 16px;
	line-height: 1.65;
	color: var(--odt-muted);
	margin: 0;
	max-width: 62ch;
}

.odt-c .odt-c__btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: #101010;
	background: linear-gradient(135deg, var(--odt-accent) 0%, var(--odt-support) 100%);
	border: 1px solid var(--odt-accent);
	border-radius: 999px;
	padding: 12px 26px;
	transition: filter 0.2s ease;
}

.odt-c .odt-c__btn .odt-c__arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

.odt-c .odt-c__btn:hover,
.odt-c .odt-c__btn:focus {
	color: #101010;
	filter: brightness(1.08);
}

.odt-c .odt-c__btn:hover .odt-c__arrow,
.odt-c .odt-c__btn:focus .odt-c__arrow {
	transform: translateX(4px);
}

.odt-c .odt-c__btn:active {
	transform: translateY(1px);
}

/* Estira el enlace sobre toda la tarjeta: se puede pulsar en cualquier punto,
   no solo en el boton, que es lo que promete la elevacion al pasar el raton. */
.odt-c .odt-c__btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.odt-c .odt-c__card:hover .odt-c__btn {
	filter: brightness(1.08);
}

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

/* Adaptacion a pantallas medianas y moviles ------------------------------ */

/* Tableta: dos columnas iguales. Los anchos de escritorio no se reaprovechan
   aqui porque dejaban media fila vacia al final de los grupos pares. En su
   lugar, si el grupo tiene un numero impar de tarjetas, la ultima ocupa la
   fila entera: asi ninguna fila queda a medias, sea cual sea el numero. */
@media (max-width: 1024px) {
	.odt-c .odt-c__grid {
		grid-template-columns: repeat(2, 1fr);
	}

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

	.odt-c .odt-c__card:last-child:nth-child(odd) {
		grid-column: span 2;
	}

	.odt-c .odt-c__card .odt-c__media {
		aspect-ratio: 4 / 3;
	}

	.odt-c .odt-c__card:last-child:nth-child(odd) .odt-c__media {
		aspect-ratio: 16 / 9;
	}

	.odt-c .odt-c__card[data-span="4"] .odt-c__title,
	.odt-c .odt-c__card[data-span="6"] .odt-c__title {
		font-size: 28px;
	}
}

/* Movil: una sola columna y todos los encuadres iguales. */
@media (max-width: 680px) {
	.odt-c .odt-c__hero {
		min-height: 52vh;
		min-height: 52dvh;
	}

	.odt-c .odt-c__hero-inner {
		padding: 0 16px 40px;
	}

	.odt-c .odt-c__hero-tag {
		font-size: 12px;
		padding: 6px 13px;
	}

	.odt-c .odt-c__hero-text {
		font-size: 17px;
	}

	.odt-c .odt-c__hero-btn {
		margin-top: 24px;
		padding: 13px 26px;
	}

	.odt-c .odt-c__group {
		padding: 0 16px;
	}

	.odt-c .odt-c__group:first-of-type {
		padding-top: 44px;
	}

	.odt-c .odt-c__group:last-of-type {
		padding-bottom: 60px;
	}

	.odt-c .odt-c__group-head {
		margin: 40px 0 18px;
		gap: 12px;
	}

	.odt-c .odt-c__group-count {
		display: none;
	}

	.odt-c .odt-c__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	/* La regla de tableta `:last-child:nth-child(odd)` tiene mas peso que un
	   simple `[data-span]`, asi que hay que anularla expresamente aqui. Sin
	   esto, la ultima tarjeta de los grupos impares seguia ocupando dos
	   columnas y la rejilla de una columna se partia en dos. */
	.odt-c .odt-c__card[data-span="2"],
	.odt-c .odt-c__card[data-span="4"],
	.odt-c .odt-c__card[data-span="6"],
	.odt-c .odt-c__card:last-child:nth-child(odd) {
		grid-column: span 1;
	}

	.odt-c .odt-c__card[data-span="4"] .odt-c__media,
	.odt-c .odt-c__card[data-span="6"] .odt-c__media,
	.odt-c .odt-c__card:last-child:nth-child(odd) .odt-c__media {
		aspect-ratio: 4 / 3;
	}

	.odt-c .odt-c__title,
	.odt-c .odt-c__card[data-span="4"] .odt-c__title,
	.odt-c .odt-c__card[data-span="6"] .odt-c__title {
		font-size: 23px;
	}

	.odt-c .odt-c__head {
		left: 18px;
		right: 18px;
	}

	.odt-c .odt-c__body {
		padding: 14px 18px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Todo visible y quieto, aunque el ajuste se cambie con la pagina abierta. */
	.odt-anim .odt-c .odt-c__group-head[data-odt-reveal],
	.odt-anim .odt-c .odt-c__card[data-odt-reveal] .odt-c__inner {
		opacity: 1;
	}

	.odt-anim .odt-c .odt-c__card[data-odt-reveal] .odt-c__img {
		transform: none;
	}

	.odt-c .odt-c__hero-bg {
		animation: none;
	}

	.odt-c .odt-c__inner,
	.odt-c .odt-c__img,
	.odt-c .odt-c__btn,
	.odt-c .odt-c__arrow,
	.odt-c .odt-c__hero-btn {
		transition: none;
	}

	.odt-c .odt-c__card:hover .odt-c__inner,
	.odt-c .odt-c__card:active .odt-c__inner,
	.odt-c .odt-c__card:hover .odt-c__img,
	.odt-c .odt-c__btn:active,
	.odt-c .odt-c__hero-btn:active {
		transform: none;
	}
}

/* Nueva apertura -----------------------------------------------------------
 *
 * Dos piezas con dos oficios distintos:
 *
 *   - El sello redondo sobre la foto llama la atencion de quien esta mirando
 *     la pagina. Es decoracion: un buscador no lo lee.
 *   - La frase de novedad, dentro de la tarjeta, es texto de verdad. Esa es
 *     la que puede acabar en un resultado de busqueda.
 */

.odt-c .odt-c__sello {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 82px;
	height: 82px;
	border-radius: 50%;
	background: #b59953;
	color: #101010;
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	text-transform: uppercase;
	line-height: 1;
	transform: rotate(-10deg);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
	pointer-events: none;
}

.odt-c .odt-c__sello b {
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.04em;
}

.odt-c .odt-c__sello i {
	margin-top: 3px;
	font-style: normal;
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.16em;
}

/* La frase. En oro y con una barra a la izquierda: se distingue de la
   descripcion sin gritar, y sigue siendo un parrafo normal y corriente. */
.odt-c .odt-c__novedad {
	margin: 0;
	padding-left: 12px;
	border-left: 3px solid #b59953;
	color: #e7df9f;
	font-size: 15px;
	line-height: 1.55;
	font-weight: 500;
}

@media (max-width: 600px) {
	.odt-c .odt-c__sello {
		width: 68px;
		height: 68px;
		top: 12px;
		right: 12px;
	}
	.odt-c .odt-c__sello b { font-size: 17px; }
	.odt-c .odt-c__sello i { font-size: 10px; }
}