/**
 * Chicxulub — landing de la Cartera privada (diseño de Figma «NOYOL CHICXULUB»).
 *
 * Letras: Optika (textos), JetBrains Mono (titulares, OFL) y osifont (la letra
 * técnica ISO 3098 de «CHICXULUB» y del cierre; LGPL con excepción de fuente).
 * Los videos llevan encima una capa crema en «luz fuerte» (hard-light), como en
 * Figma, más un grano de película: así el video se ve lavado y cálido.
 *
 * Entradas: cada bloque lleva data-kzn-visible="medio" (noyol.js le pone
 * .es-visible); dentro, .cx-a entra según --cx-anim tras --retraso. Con
 * «reducir movimiento» todo se ve quieto.
 */

@font-face { font-family: "Optika"; src: url("../fonts/optika-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Optika"; src: url("../fonts/optika-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Optika"; src: url("../fonts/optika-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "osifont"; src: url("../fonts/osifont.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }

.kzn-desarrollo--chicxulub {
	--cx-coral: #c76959;
	--cx-caramelo: #c9915e;
	--cx-crema: #f0e6d2;
	--cx-moca: #775953;
	--cx-cafe: #2a1b18;
	--cx-optika: "Optika", "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--cx-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
	--cx-tecnica: "osifont", var(--cx-mono);
	--cx-curva: cubic-bezier(.22, 1, .36, 1);
	--cx-hueco: clamp(40px, 6.2vw, 94px); /* entre texto y video */
	background: var(--cx-crema);
	color: var(--cx-cafe);
	font-family: var(--cx-optika);
}
/* Cabecera del sitio en café cálido en vez de negro, a juego con la paleta. */
.kzn-desarrollo-chicxulub .kzn-cabecera { background: linear-gradient(180deg, rgba(42, 27, 24, .72) 0%, rgba(42, 27, 24, 0) 100%); }

/* ---------- Entradas ---------- */

.kzn-desarrollo--chicxulub .kzn-linea { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.kzn-desarrollo--chicxulub .kzn-linea__texto { display: block; }

@media (prefers-reduced-motion: no-preference) {
	.kzn-js [data-kzn-visible]:not(.es-visible) :is(.cx-a, .kzn-linea__texto, .cx-letra, .cx-uso__palabra, .cx-uso__aclaracion, .cx-uso__union) { opacity: 0; }
	.es-visible .cx-a { animation: var(--cx-anim, cx-sube) .9s var(--cx-curva) var(--retraso, 0ms) backwards; }
	.es-visible .kzn-linea__texto { animation: cx-linea .9s var(--cx-curva) var(--retraso, 0ms) backwards; }
	.es-visible .cx-letra { animation: cx-letra 1.1s var(--cx-curva) calc(700ms + var(--i) * 90ms) backwards; }
	/* Palabras de «uso ideal»: se escriben letra a letra (JetBrains es monoespaciada). */
	.es-visible .cx-uso__palabra { animation: cx-teclea calc(var(--n) * 85ms) steps(var(--n), end) var(--retraso, 0ms) backwards; }
	.es-visible .cx-uso__aclaracion { animation: cx-sube .7s var(--cx-curva) calc(var(--retraso, 0ms) + var(--n) * 85ms) backwards; }
	.es-visible .cx-uso__union { animation: cx-union .6s var(--cx-curva) calc(var(--retraso, 0ms) - 250ms) backwards; }
	.cx-fondo::after { animation: cx-grano 1s steps(4) infinite; }
}

@keyframes cx-sube { from { opacity: 0; transform: translateY(24px); } }
@keyframes cx-linea { from { opacity: 0; transform: translateY(105%); } }
@keyframes cx-letra { from { opacity: 0; transform: translateY(.3em); filter: blur(6px); } }
@keyframes cx-teclea { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cx-revela { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cx-salta { from { opacity: 0; transform: translateY(16px) scale(.92); } }
@keyframes cx-raya { from { transform: scaleX(0); } }
@keyframes cx-union { from { transform: scaleY(0); } }
@keyframes cx-grano {
	0% { background-position: 0 0, 0 0; }
	25% { background-position: -37px 21px, 0 0; }
	50% { background-position: 53px -12px, 0 0; }
	75% { background-position: -18px -44px, 0 0; }
}

/* ---------- Piezas comunes ---------- */

.cx-mono { font-family: var(--cx-mono); font-weight: 400; text-transform: uppercase; }
.cx-cubre { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Video de fondo lavado: multiplicar 6 % negro + crema en luz fuerte + grano. */
.cx-fondo { position: absolute; inset: 0; z-index: 0; overflow: hidden; isolation: isolate; background: #d8ccb2; }
.cx-fondo__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-fondo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .06); mix-blend-mode: multiply; }
.cx-fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .1 0 0 0 0 .09 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
		var(--cx-crema);
	mix-blend-mode: hard-light;
}

.cx-raya { display: block; flex: 1 1 auto; height: 1px; background: currentColor; transform-origin: left center; }
.cx-raya.cx-a { --cx-anim: cx-raya; }

.cx-boton {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	height: 40px;
	padding: 0 22px 0 26px;
	border: 2px solid var(--cx-cafe);
	border-radius: 45px;
	background: var(--cx-crema);
	color: var(--cx-cafe);
	font: 400 18px/1 var(--cx-optika);
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 6px 14.6px rgba(0, 0, 0, .1);
	transition: transform .3s var(--cx-curva), box-shadow .3s ease, background .3s ease;
}
.cx-boton svg { flex: none; width: 13px; height: 13px; fill: currentColor; transition: transform .3s var(--cx-curva); }
.cx-boton:hover { background: #fbf4e7; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .15); }
.cx-boton:hover svg { transform: translateX(4px); }
.cx-boton:focus-visible { outline: 2px solid var(--cx-cafe); outline-offset: 3px; }
/* «Ver en YouTube»: mismo botón, contorneado, para que el principal siga siendo «Solicitar información». */
.cx-boton--video { background: transparent; box-shadow: none; }
.cx-boton--video svg { width: 19px; height: 19px; }
.cx-boton--video:hover { background: var(--cx-crema); }
.cx-boton--video:hover svg { transform: scale(1.12); }
.cx-boton .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Portada ---------- */

.cx-portada { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.cx-portada__dentro {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	padding: calc(var(--kzn-cabecera-alto) + 10px) clamp(20px, 12.5vw, 190px) clamp(40px, 9vh, 110px);
	text-align: center;
}
.cx-portada__franja { display: flex; align-items: center; gap: 30px; width: 100%; max-width: 1140px; color: var(--cx-moca); font: 500 16px/1 var(--cx-optika); letter-spacing: .5em; text-transform: uppercase; }
.cx-portada__franja .cx-raya { opacity: .85; transform-origin: center; }
.cx-portada__intro { max-width: 760px; margin-top: auto; font: 700 clamp(14px, 1.39vw, 21px)/1.25 var(--cx-optika); letter-spacing: .15em; text-transform: uppercase; }
.cx-portada__titulo {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: clamp(36px, 10vh, 108px) 0;
	padding-left: .4em; /* compensa el espacio que queda tras la última letra */
	color: var(--cx-caramelo);
	font: 400 clamp(36px, 9.55vw, 144px)/1 var(--cx-tecnica);
	letter-spacing: .4em; /* osifont es más angosta que ISOCTEUR: más aire para ocupar lo mismo */
	text-transform: uppercase;
}
.cx-letra { display: inline-block; }
.cx-portada__sub { max-width: 690px; margin-bottom: auto; font: 500 clamp(13px, 1.39vw, 21px)/1.3 var(--cx-optika); letter-spacing: .15em; text-transform: uppercase; }
/* El video del encabezado trae subtítulos quemados abajo; alargándolo, quedan tras la banda. */
.cx-portada .cx-fondo__video { height: 113%; object-position: center top; }
.cx-banda { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; min-height: clamp(76px, 10vh, 98px); padding: 18px 20px; background: var(--cx-caramelo); }

/* ---------- Bloques con video vertical ---------- */

.cx-bloque { padding: clamp(48px, 7.5vh, 74px) clamp(20px, 7.7vw, 116px) clamp(56px, 8.6vh, 85px); background: var(--cx-crema); }
.cx-bloque__dentro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 594px); gap: var(--cx-hueco); max-width: 1214px; margin: 0 auto; }
.cx-bloque--invertido .cx-bloque__dentro { grid-template-columns: minmax(0, 594px) minmax(0, 1fr); max-width: 1130px; }
.cx-bloque--invertido .cx-bloque__video { order: -1; }
.cx-bloque__texto { display: flex; flex-direction: column; }
.cx-etiqueta { display: flex; align-items: center; gap: 30px; margin-right: calc(-1 * var(--cx-hueco)); color: var(--cx-coral); font: 500 16px/1 var(--cx-optika); letter-spacing: .5em; text-transform: uppercase; }
.cx-bloque--invertido .cx-etiqueta { flex-direction: row-reverse; margin-right: 0; margin-left: calc(-1 * var(--cx-hueco)); }
.cx-bloque--invertido .cx-etiqueta .cx-raya { transform-origin: right center; }
.cx-bloque__titulo { max-width: 10.5em; margin-top: clamp(56px, 17vh, 172px); font-size: clamp(30px, 3.3vw, 50px); line-height: 1.09; letter-spacing: .08em; }
.cx-bloque--invertido .cx-bloque__titulo { max-width: 6.6em; }
.cx-bloque__parrafo { max-width: 320px; margin-top: auto; padding-top: 40px; font: 500 clamp(18px, 1.72vw, 26px)/1.23 var(--cx-optika); }
.cx-bloque__video { position: relative; width: 100%; max-height: 84vh; aspect-ratio: 594 / 816; margin: 0; overflow: hidden; background: #d9ccb4; }
.es-visible .cx-bloque__video { animation-duration: 1.3s; }

/* ---------- Comercios ---------- */

.cx-comercios { padding: clamp(56px, 13vh, 140px) 20px; background: var(--cx-caramelo); color: var(--cx-cafe); }
.cx-comercios__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px clamp(28px, 4.9vw, 75px); max-width: 1240px; margin: 0 auto; padding: 0; list-style: none; }
.cx-comercio { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.cx-comercio svg { width: 49px; height: 49px; transition: transform .35s var(--cx-curva); }
.cx-comercio:hover svg { transform: translateY(-4px); }
.cx-pildora { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border: 2px solid var(--cx-cafe); border-radius: 45px; box-shadow: 0 6px 14.6px rgba(0, 0, 0, .1); font: 500 16px/1 var(--cx-optika); letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; }

/* ---------- Uso ideal ---------- */

.cx-uso { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.cx-uso__dentro { position: relative; z-index: 1; width: 100%; padding: clamp(80px, 13vh, 135px) clamp(20px, 8.6vw, 130px); }
.cx-uso__lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cx-uso__punto { display: flex; flex-direction: column; align-items: flex-start; }
.cx-uso__union { display: block; width: 2px; height: clamp(40px, 6.8vh, 67px); margin: clamp(18px, 3vh, 30px) 0 clamp(16px, 2.6vh, 26px) 3px; background: var(--cx-cafe); transform-origin: top center; }
.cx-uso__palabra { display: inline-block; font-size: clamp(30px, 8.2vw, 105px); line-height: 1; letter-spacing: .14em; white-space: nowrap; }
.cx-uso__aclaracion { margin-top: 18px; font: 500 clamp(11px, 1.06vw, 16px)/1.3 var(--cx-optika); letter-spacing: .15em; text-transform: uppercase; }

/* ---------- Banda partida ---------- */

.cx-botones { display: grid; grid-template-columns: 1fr 1fr; }
.cx-botones__mitad { display: flex; align-items: center; justify-content: center; min-height: 97px; padding: 20px; background: var(--cx-caramelo); }
.cx-botones__mitad--coral { background: var(--cx-coral); }

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

.cx-cierre { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; overflow: hidden; text-align: center; }
.cx-cierre__dentro { position: relative; z-index: 1; max-width: 1320px; padding: clamp(80px, 12vh, 140px) 24px; }
.cx-cierre__titulo { font: 400 clamp(26px, 6.94vw, 105px)/1.5 var(--cx-tecnica); letter-spacing: .25em; text-transform: uppercase; }
.cx-cierre__titulo .kzn-linea__texto { padding-left: .25em; } /* centra pese al espacio final */
.cx-cierre__firma { margin-top: clamp(24px, 5vh, 60px); color: var(--cx-moca); font: 700 clamp(13px, 1.7vw, 25.6px)/1.3 var(--cx-optika); letter-spacing: .43em; text-transform: uppercase; }

/* ---------- Formulario «Solicitar información» con la paleta ---------- */

.kzn-desarrollo--chicxulub .kzn-contacto { padding: clamp(64px, 10vh, 110px) 0; background: var(--cx-crema); color: var(--cx-cafe); font-family: var(--cx-optika); }
.kzn-desarrollo--chicxulub .kzn-contacto .kzn-titulo { font-family: var(--cx-mono); font-size: clamp(28px, 3vw, 44px); font-weight: 400; letter-spacing: .08em; line-height: 1.1; text-transform: uppercase; }
.kzn-desarrollo--chicxulub .kzn-contacto__intro { font-family: var(--cx-optika); font-weight: 500; letter-spacing: 0; line-height: 1.35; }
.kzn-desarrollo--chicxulub .kzn-form input,
.kzn-desarrollo--chicxulub .kzn-form textarea { border: 2px solid var(--cx-cafe); border-radius: 22px; background: #f8f1e3; color: var(--cx-cafe); font-family: var(--cx-optika); }
.kzn-desarrollo--chicxulub .kzn-form ::placeholder { color: var(--cx-moca); }
.kzn-desarrollo--chicxulub .kzn-form__enviar { border: 2px solid var(--cx-cafe); border-radius: 45px; background: var(--cx-cafe); color: var(--cx-crema); font-family: var(--cx-optika); font-size: 18px; }
.kzn-desarrollo--chicxulub .kzn-form__enviar:hover { background: var(--cx-moca); }

/* ---------- Tableta y móvil ---------- */

@media (max-width: 900px) {
	.cx-bloque__dentro,
	.cx-bloque--invertido .cx-bloque__dentro { grid-template-columns: 1fr; gap: 0; max-width: 560px; }
	/* En una columna: etiqueta, titular, video y texto. */
	.cx-bloque__texto { display: contents; }
	.cx-etiqueta, .cx-bloque--invertido .cx-etiqueta { order: 1; flex-direction: row; margin: 0; }
	.cx-bloque--invertido .cx-etiqueta .cx-raya { transform-origin: left center; }
	.cx-bloque__titulo, .cx-bloque--invertido .cx-bloque__titulo { order: 2; max-width: 12em; margin: 40px 0 32px; }
	.cx-bloque__video, .cx-bloque--invertido .cx-bloque__video { order: 3; max-height: 72vh; }
	.cx-bloque__parrafo { order: 4; max-width: none; padding-top: 28px; }
	.cx-comercios__lista { gap: 32px 28px; }
}
@media (max-width: 600px) {
	.cx-portada__franja { gap: 16px; font-size: 12px; letter-spacing: .35em; }
	.cx-portada__intro, .cx-portada__sub { letter-spacing: .1em; }
	.cx-portada__titulo { padding-left: .28em; font-size: 11.5vw; letter-spacing: .28em; }
	.cx-boton { gap: 16px; font-size: 16px; }
	.cx-botones { grid-template-columns: 1fr; }
	.cx-botones__mitad { min-height: 84px; }
	.cx-etiqueta { gap: 18px; font-size: 13px; letter-spacing: .4em; }
	.cx-pildora { height: 36px; padding: 0 16px; font-size: 13px; }
	.cx-comercio svg { width: 40px; height: 40px; }
}