/* Olympus Contacto - Direccion "Olympus Oro sobre Negro"
 *
 * Esta pagina es el final del embudo: todos los botones "Quiero apuntarme" de
 * Clases apuntan aqui. Asi que manda una cosa por encima de todo, que es que
 * escribir cueste lo minimo. De ahi el orden: primero los tres canales directos
 * (quien quiera WhatsApp lo tiene sin bajar), y despues el formulario para quien
 * prefiera dejarlo por escrito.
 *
 * Su gesto de entrada es propio: los bloques llegan desenfocados y se afinan.
 * Inicio entra de lado, Clases asienta la foto, Horario solo funde, Beneficios
 * sube y dibuja el filete, Conocenos se acerca. Aqui, enfoque.
 */

.odt-k {
	--odt-bg: #101010;
	--odt-bg-warm: #14120e;
	--odt-surface: #191817;
	--odt-surface-alta: #201e1b;
	--odt-ink: #ffffff;
	--odt-muted: #a6a29b;
	--odt-accent: #b59953;
	--odt-support: #e7df9f;
	--odt-line: #2e2b26;

	font-family: "Barlow", sans-serif;
	color: var(--odt-muted);
	background:
		radial-gradient(120% 60% at 50% 0%, rgba(181, 153, 83, 0.09) 0%, rgba(181, 153, 83, 0) 62%),
		linear-gradient(180deg, var(--odt-bg) 0%, var(--odt-bg-warm) 45%, var(--odt-bg) 100%);
	padding: 0 0 96px;
}

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

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

/* Encabezado ------------------------------------------------------------- */

.odt-k .odt-k__hero {
	padding: 78px 0 44px;
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
}

.odt-k .odt-k__titulo {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: clamp(38px, 5.6vw, 68px);
	line-height: 1.03;
	text-transform: uppercase;
	color: var(--odt-ink);
	margin: 0 0 16px;
}

.odt-k .odt-k__entrada {
	font-size: clamp(16.5px, 1.5vw, 19px);
	line-height: 1.65;
	margin: 0;
}

/* Canales directos ------------------------------------------------------- */

.odt-k .odt-k__canales {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 72px;
}

.odt-k .odt-k__canal {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 26px 24px 24px;
	background: var(--odt-surface);
	border: 1px solid var(--odt-line);
	border-radius: 10px;
	text-decoration: none;
	color: var(--odt-muted);
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.odt-k .odt-k__canal:hover,
.odt-k .odt-k__canal:focus-visible {
	background: var(--odt-surface-alta);
	border-color: var(--odt-accent);
	transform: translateY(-3px);
}

/* WhatsApp es por donde mas escribe la gente, asi que se le da el peso
   visual del boton principal en lugar de dejarlo como uno mas de tres. */
.odt-k .odt-k__canal--fuerte {
	background: linear-gradient(155deg, rgba(181, 153, 83, 0.18) 0%, var(--odt-surface) 62%);
	border-color: rgba(181, 153, 83, 0.5);
}

.odt-k .odt-k__canal-icono {
	display: flex;
	color: var(--odt-accent);
	margin-bottom: 8px;
}

.odt-k .odt-k__canal-rotulo {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--odt-accent);
}

.odt-k .odt-k__canal-valor {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 2.1vw, 25px);
	line-height: 1.15;
	color: var(--odt-ink);
	/* Un numero de telefono largo no debe romper la tarjeta en movil. */
	overflow-wrap: anywhere;
}

.odt-k .odt-k__canal-pie {
	font-size: 14px;
	line-height: 1.45;
	margin-top: 2px;
}

/* Formulario y fichas ---------------------------------------------------- */

.odt-k .odt-k__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.odt-k .odt-k__h2 {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 3.2vw, 38px);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--odt-ink);
	margin: 0 0 24px;
}

.odt-k .odt-k__h3 {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--odt-ink);
	margin: 0 0 14px;
}

.odt-k .odt-k__ficha-icono {
	display: flex;
	color: var(--odt-accent);
}

/* Avisos de resultado. El de exito es lo primero que se busca al volver de
   enviar, asi que se le da color y borde, no solo texto. */
.odt-k .odt-k__aviso {
	margin: 0 0 22px;
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 15.5px;
	line-height: 1.5;
}

.odt-k .odt-k__aviso--ok {
	background: rgba(181, 153, 83, 0.14);
	border: 1px solid var(--odt-accent);
	color: var(--odt-support);
}

.odt-k .odt-k__aviso--mal {
	background: rgba(190, 76, 76, 0.12);
	border: 1px solid #be4c4c;
	color: #f0b6b6;
}

.odt-k .odt-k__form {
	background: var(--odt-surface);
	border: 1px solid var(--odt-line);
	border-radius: 10px;
	padding: 28px;
}

.odt-k .odt-k__fila {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.odt-k .odt-k__campo {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0 0 18px;
}

.odt-k .odt-k__campo label {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--odt-ink);
}

.odt-k .odt-k__req {
	color: var(--odt-accent);
}

.odt-k .odt-k__opt {
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--odt-muted);
}

/* Doble clase a proposito: el kit global de Elementor estiliza `input`,
   `select`, `textarea` y `button` con especificidad 0,1,1 y gana a cualquier
   selector de una sola clase. */
.odt-k .odt-k__campo input,
.odt-k .odt-k__campo select,
.odt-k .odt-k__campo textarea {
	width: 100%;
	font-family: "Barlow", sans-serif;
	font-size: 16px;
	line-height: 1.45;
	color: var(--odt-ink);
	background: var(--odt-bg);
	border: 1px solid var(--odt-line);
	border-radius: 8px;
	padding: 11px 13px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* La flecha del desplegable se dibuja aqui porque al quitar la apariencia
   nativa desaparece, y un select sin flecha no parece desplegable. */
.odt-k .odt-k__campo select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23b59953' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	padding-right: 38px;
}

.odt-k .odt-k__campo textarea {
	resize: vertical;
	min-height: 130px;
}

.odt-k .odt-k__campo input:focus,
.odt-k .odt-k__campo select:focus,
.odt-k .odt-k__campo textarea:focus {
	outline: none;
	border-color: var(--odt-accent);
	box-shadow: 0 0 0 3px rgba(181, 153, 83, 0.22);
}

.odt-k .odt-k__campo input[aria-invalid="true"],
.odt-k .odt-k__campo textarea[aria-invalid="true"] {
	border-color: #be4c4c;
}

.odt-k .odt-k__error {
	font-size: 14px;
	line-height: 1.4;
	color: #f0b6b6;
}

/* El campo trampa no puede ir con `display:none`: hay robots que lo detectan y
   lo saltan. Se saca de la pantalla, y ademas queda fuera del tabulador y del
   lector de pantalla por los atributos del HTML. */
.odt-k .odt-k__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.odt-k .odt-k__acepto {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 11px;
	align-items: start;
	margin: 4px 0 24px;
	font-size: 14.5px;
	line-height: 1.5;
}

.odt-k .odt-k__acepto input[type="checkbox"] {
	width: 19px;
	height: 19px;
	margin: 2px 0 0;
	accent-color: var(--odt-accent);
	flex: none;
}

.odt-k .odt-k__acepto label {
	cursor: pointer;
}

.odt-k .odt-k__acepto .odt-k__error {
	grid-column: 1 / -1;
}

.odt-k .odt-k__acepto a {
	color: var(--odt-support);
	text-decoration: none;
	border-bottom: 1px solid rgba(181, 153, 83, 0.45);
}

.odt-k .odt-k__enviar {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #101010;
	background: var(--odt-accent);
	border: 1px solid var(--odt-accent);
	border-radius: 999px;
	padding: 13px 34px;
	cursor: pointer;
	transition: background 0.22s ease, transform 0.22s ease;
}

.odt-k .odt-k__enviar:hover,
.odt-k .odt-k__enviar:focus-visible {
	background: var(--odt-support);
	border-color: var(--odt-support);
	transform: translateY(-2px);
}

.odt-k .odt-k__enviar[disabled] {
	opacity: 0.6;
	cursor: progress;
	transform: none;
}

/* Fichas laterales ------------------------------------------------------- */

.odt-k .odt-k__lado {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.odt-k .odt-k__ficha {
	background: var(--odt-surface);
	border: 1px solid var(--odt-line);
	border-radius: 10px;
	padding: 24px;
}

.odt-k .odt-k__dir {
	font-style: normal;
	font-size: 16.5px;
	line-height: 1.62;
	margin: 0 0 14px;
	color: var(--odt-muted);
}

.odt-k .odt-k__horas {
	margin: 0 0 14px;
}

.odt-k .odt-k__horas dt {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--odt-accent);
	margin-bottom: 2px;
}

.odt-k .odt-k__horas dd {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.55;
}

.odt-k .odt-k__horas dd:last-child {
	margin-bottom: 0;
}

.odt-k .odt-k__link {
	display: inline-block;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--odt-support);
	text-decoration: none;
	border-bottom: 1px solid rgba(181, 153, 83, 0.5);
	padding-bottom: 2px;
	transition: border-color 0.2s ease;
}

.odt-k .odt-k__link:hover,
.odt-k .odt-k__link:focus-visible {
	border-bottom-color: var(--odt-support);
}

/* Mapa ------------------------------------------------------------------- */

.odt-k .odt-k__mapa-zona {
	margin-top: 80px;
}

.odt-k .odt-k__mapa {
	position: relative;
	aspect-ratio: 21 / 9;
	background:
		linear-gradient(155deg, rgba(181, 153, 83, 0.1) 0%, rgba(181, 153, 83, 0) 55%),
		var(--odt-surface);
	border: 1px solid var(--odt-line);
	border-radius: 10px;
	overflow: hidden;
}

.odt-k .odt-k__mapa-aviso {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	padding: 28px;
}

.odt-k .odt-k__mapa-texto {
	max-width: 46ch;
	font-size: 15.5px;
	line-height: 1.6;
	margin: 0;
}

.odt-k .odt-k__mapa-btn {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--odt-ink);
	background: transparent;
	border: 1px solid var(--odt-accent);
	border-radius: 999px;
	padding: 11px 30px;
	cursor: pointer;
	transition: background 0.22s ease, color 0.22s ease;
}

.odt-k .odt-k__mapa-btn:hover,
.odt-k .odt-k__mapa-btn:focus-visible {
	background: var(--odt-accent);
	color: #101010;
}

.odt-k .odt-k__mapa-alt {
	margin: 0;
	font-size: 14px;
}

.odt-k .odt-k__mapa-alt a {
	color: var(--odt-support);
	text-decoration: none;
	border-bottom: 1px solid rgba(181, 153, 83, 0.45);
}

.odt-k .odt-k__mapa iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

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

@media (max-width: 1024px) {
	.odt-k .odt-k__cuerpo {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	/* Con una sola columna, las dos fichas caben una al lado de la otra y
	   evitan una tira larga de tarjetas estrechas. */
	.odt-k .odt-k__lado {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.odt-k .odt-k__ficha {
		flex: 1 1 260px;
	}

	.odt-k .odt-k__mapa {
		aspect-ratio: 16 / 9;
	}
}

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

@media (max-width: 820px) {
	.odt-k {
		padding-bottom: 64px;
	}

	.odt-k .odt-k__wrap {
		padding: 0 16px;
	}

	.odt-k .odt-k__hero {
		padding: 52px 0 32px;
	}

	.odt-k .odt-k__canales {
		grid-template-columns: 1fr;
		margin-bottom: 48px;
	}

	.odt-k .odt-k__fila {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.odt-k .odt-k__form {
		padding: 22px 18px;
	}

	.odt-k .odt-k__lado {
		flex-direction: column;
	}

	.odt-k .odt-k__enviar {
		width: 100%;
	}

	.odt-k .odt-k__mapa-zona {
		margin-top: 56px;
	}

	.odt-k .odt-k__mapa {
		aspect-ratio: 4 / 3;
	}
}

/* Aparicion -------------------------------------------------------------- */

/* El gesto de esta pagina: los bloques llegan desenfocados y se afinan, como
   una foto al enfocar. El desplazamiento es minimo a proposito, para no mover
   el formulario mientras alguien esta escribiendo en el. */
.odt-anim .odt-k [data-odt-reveal] {
	opacity: 0;
	filter: blur(7px);
	transform: translateY(12px);
	transition:
		opacity 0.6s ease-out,
		filter 0.7s ease-out,
		transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: calc(var(--odt-orden, 0) * 90ms);
}

.odt-anim .odt-k [data-odt-reveal].odt-visible {
	opacity: 1;
	filter: blur(0);
	transform: none;
}

/* Terminada la entrada, `contacto.js` retira el filtro del todo. Un `blur(0)`
   que se queda puesto obliga a componer ese trozo aparte y el texto de los
   campos puede verse algo menos nitido justo donde mas se lee. */
.odt-anim .odt-k [data-odt-reveal].odt-k__nitido {
	filter: none;
}

/* Las tarjetas de canal ya tienen su propia transicion de hover sobre
   `transform`; sin esto, al terminar de aparecer se quedarian con el retardo
   de la entrada y el hover respondaria tarde. */
.odt-anim .odt-k .odt-k__canal.odt-visible {
	transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
	.odt-k .odt-k__canal,
	.odt-k .odt-k__enviar,
	.odt-k .odt-k__mapa-btn,
	.odt-k .odt-k__link {
		transition: none;
	}
}