/* ==========================================================================
   ALÜX3 CHILD · aluxe.css · v0.2.1 · 2026-10-20
   v0.2.1: padding-top del body para el header fijo (salvo body.ax-hd-transparente).
   v0.2.0: header, footer, «encuéntralo» y travesura imprimible.
   Prefijo: ax-  ·  Sistema: RKT/03-Diseno/Sistemas/Sistema visual ALUXE
   ========================================================================== */

/* El reset de Hello, dentro de una capa: así pierde siempre contra nuestro CSS.
   Tiene que ser la primera regla del archivo. Ver RKT/05-Stack/Hello Elementor — reset en una capa. */
@import url("../../../hello-elementor/assets/css/reset.css") layer(hello-reset);

/* Poppins · SIL OFL 1.1 (assets/fonts/OFL.txt) · solo latín */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
	src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap;
	src: url("../fonts/poppins-latin-800-normal.woff2") format("woff2"); }
/* Kuhlman se declara desde inc/fuentes.php solo si existe el archivo. */

:root {
	/* Manual de identidad */
	--ax-tq:    #60c6be; /* Rising Rivulet · primario */
	--ax-mid:   #2e6171; /* Midnight · primario */
	--ax-lima:  #c3d362; /* Wild Lime · luciérnaga */
	--ax-oro:   #ffd449; /* Habanero Gold · CTA y amanecer */
	/* Derivados para la web */
	--ax-noche: #0e2229; /* fondo de las escenas · 16.4:1 con blanco */
	--ax-crema: #fbf6ea; /* fondo de tienda y checkout */

	/* Roles */
	--ax-fondo:     var(--ax-crema);
	--ax-tinta:     var(--ax-noche);
	--ax-cta:       var(--ax-oro);   /* noche sobre oro: 11.5:1 */
	--ax-cta-tinta: var(--ax-noche);

	--ax-display: "Kuhlman", "Poppins", system-ui, sans-serif;
	--ax-text:    "Poppins", system-ui, sans-serif;

	--ax-ease-out:  cubic-bezier(.22, 1, .36, 1);
	--ax-ease-peek: cubic-bezier(.34, 1.56, .64, 1);

	--ax-ancho:  1200px;
	--ax-margen: clamp(16px, 4vw, 48px);
	--ax-radio:  999px;
}

body {
	margin: 0;
	background: var(--ax-fondo);
	color: var(--ax-tinta);
	font-family: var(--ax-text);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) { body { font-size: 17px; } }

h1, h2, h3 {
	font-family: var(--ax-display);
	font-weight: 800;
	font-synthesis: none; /* Kuhlman tiene un solo peso: que no la engorde el navegador */
	line-height: 1.05;
	letter-spacing: -.01em;
	margin: 0 0 .4em;
}

a { color: var(--ax-mid); }

:focus-visible { outline: 3px solid var(--ax-tq); outline-offset: 3px; }

.ax-btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	min-height: 48px;
	padding: 0 1.5em;
	border: 0;
	border-radius: var(--ax-radio);
	background: var(--ax-cta);
	color: var(--ax-cta-tinta);
	font: 600 1rem/1 var(--ax-text);
	text-decoration: none;
	cursor: pointer;
	transition: transform .2s var(--ax-ease-out), box-shadow .2s var(--ax-ease-out);
}
.ax-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgb(14 34 41 / .18); }

.ax-noche { background: var(--ax-noche); color: var(--ax-crema); }
/* :not(.ax-btn): sin esto el botón oro dentro de .ax-noche salía con letra lima (v0.2.0) */
.ax-noche a:not(.ax-btn) { color: var(--ax-lima); }

/* ── Header (v0.2.0) ─────────────────────────────────────────────────────
   fixed y siempre visible. El fondo vive en ::before: el header no lleva transform ni
   backdrop-filter, que volverían relativo el panel móvil fixed (lección de PEONIA). */
:root { --ax-hd-h: 76px; }
html { scroll-padding-top: calc(var(--ax-hd-h) + 16px); }
html.ax-sin-scroll { overflow: hidden; }
/* v0.2.1: el header es fixed y sólido (más bajo: -12 px) en todas las páginas menos las que lo
   piden transparente. Sin esto el título de la página quedaba tapado (staging, 2026-10-20). */
body:not(.ax-hd-transparente) { padding-top: calc(var(--ax-hd-h) - 12px); }
.ax-hd { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: var(--ax-crema); }
body.admin-bar .ax-hd { top: 32px; }
@media (max-width: 782px) { body.admin-bar .ax-hd { top: 46px; } }
.ax-hd::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(14 34 41 / .92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	opacity: 0;
	transition: opacity .3s var(--ax-ease-out);
}
.ax-hd.is-solido::before { opacity: 1; }
.ax-hd__barra {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: var(--ax-ancho);
	height: var(--ax-hd-h);
	margin: 0 auto;
	padding: 0 var(--ax-margen);
	transition: height .3s var(--ax-ease-out);
}
.ax-hd.is-solido .ax-hd__barra { height: calc(var(--ax-hd-h) - 12px); }
.ax-hd__logo { display: block; flex: none; width: 52px; color: var(--ax-lima); }
.ax-hd__logo svg { display: block; width: 100%; height: auto; }
.ax-hd__nav { margin-right: auto; }
.ax-hd__nav ul { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.ax-hd .ax-hd__nav a {
	padding: 8px 0;
	border-bottom: 2px solid transparent;
	color: var(--ax-crema);
	font-size: .95rem;
	font-weight: 600;
	text-decoration: none;
}
.ax-hd .ax-hd__nav a:hover,
.ax-hd .ax-hd__nav a[aria-current="page"] { border-bottom-color: var(--ax-lima); }
.ax-hd__acciones { display: flex; align-items: center; gap: 16px; }
.ax-hd .ax-hd__idioma {
	padding: 6px 10px;
	border: 1.5px solid rgb(251 246 234 / .4);
	border-radius: var(--ax-radio);
	color: var(--ax-crema);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-decoration: none;
}
.ax-hd .ax-hd__carrito { position: relative; display: grid; place-items: center; width: 44px; height: 44px; color: var(--ax-crema); }
.ax-hd__carrito svg { width: 24px; height: 24px; }
.ax-hd__cuenta {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--ax-oro);
	color: var(--ax-noche);
	font: 700 11px/18px var(--ax-text);
	text-align: center;
}
.ax-hd__abrir { display: none; }

@media (max-width: 900px) {
	:root { --ax-hd-h: 64px; }
	.ax-hd__barra { gap: 10px; }
	.ax-hd__acciones { gap: 10px; }
	.ax-hd__logo { width: 44px; }
	.ax-hd__cta { min-height: 40px; padding: 0 1em; font-size: .9rem; }
	.ax-hd .ax-hd__abrir,
	.ax-hd .ax-hd__abrir:hover,
	.ax-hd .ax-hd__abrir:focus {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--ax-crema);
		cursor: pointer;
	}
	.ax-hd__abrir i,
	.ax-hd__abrir i::before,
	.ax-hd__abrir i::after {
		position: relative;
		display: block;
		width: 22px;
		height: 2px;
		background: currentColor;
		transition: transform .25s var(--ax-ease-out), background-color .2s;
	}
	.ax-hd__abrir i::before,
	.ax-hd__abrir i::after { content: ""; position: absolute; left: 0; }
	.ax-hd__abrir i::before { top: -7px; }
	.ax-hd__abrir i::after { top: 7px; }
	.ax-hd.is-abierto .ax-hd__abrir i { background-color: transparent; }
	.ax-hd.is-abierto .ax-hd__abrir i::before { transform: translateY(7px) rotate(45deg); }
	.ax-hd.is-abierto .ax-hd__abrir i::after { transform: translateY(-7px) rotate(-45deg); }
	.ax-hd__nav {
		position: fixed;
		inset: var(--ax-hd-h) 0 0 0;
		margin: 0;
		padding: 32px var(--ax-margen);
		overflow-y: auto;
		background: var(--ax-noche);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s var(--ax-ease-out), visibility 0s .25s;
	}
	.ax-hd.is-solido .ax-hd__nav { top: calc(var(--ax-hd-h) - 12px); }
	.ax-hd.is-abierto .ax-hd__nav { opacity: 1; visibility: visible; transition: opacity .25s var(--ax-ease-out); }
	.ax-hd__nav ul { flex-direction: column; gap: 12px; }
	.ax-hd .ax-hd__nav a { display: inline-block; font-family: var(--ax-display); font-size: 2rem; font-weight: 800; }
}

/* ── Footer (v0.2.0) ───────────────────────────────────────────────────── */
.ax-ft { position: relative; margin-top: 96px; padding: 72px var(--ax-margen) 32px; }
.ax-ft::before { /* greca zigzag del manual */
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 14px;
	background:
		linear-gradient(135deg, transparent 33%, var(--ax-tq) 33% 40%, transparent 40%) 0 0 / 14px 14px,
		linear-gradient(225deg, transparent 33%, var(--ax-tq) 33% 40%, transparent 40%) 0 0 / 14px 14px;
	opacity: .6;
}
.ax-ft__dentro { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; max-width: var(--ax-ancho); margin: 0 auto; }
.ax-ft__logo { display: block; width: 88px; color: var(--ax-lima); }
.ax-ft__logo svg { display: block; width: 100%; height: auto; }
.ax-ft__lema { max-width: 30ch; margin: 16px 0 6px; font-size: 1.05rem; }
.ax-ft__envio { margin: 0 0 20px; color: var(--ax-oro); font-weight: 600; }
.ax-ft__titulo { margin: 0 0 12px; color: var(--ax-tq); font: 600 .8rem/1.2 var(--ax-text); letter-spacing: .12em; text-transform: uppercase; }
.ax-ft ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ax-ft.ax-noche a:not(.ax-btn) { color: var(--ax-crema); text-decoration: none; }
.ax-ft.ax-noche a:not(.ax-btn):hover { color: var(--ax-lima); }
.ax-ft__pie { max-width: var(--ax-ancho); margin: 48px auto 0; padding-top: 20px; border-top: 1px solid rgb(251 246 234 / .15); font-size: .85rem; opacity: .8; }
@media (max-width: 900px) {
	.ax-ft__dentro { grid-template-columns: 1fr 1fr; }
	.ax-ft__marca { grid-column: 1 / -1; }
}

/* ── «Encuéntralo» (v0.2.0) ────────────────────────────────────────────────
   El marco recorta: ALÜX3 sale desde el borde de su lugar. El lugar NO debe llevar
   overflow:hidden, o recorta también el marco. */
.ax-escondite { position: absolute; z-index: 6; width: 76px; height: 60px; overflow: hidden; pointer-events: none; }
.ax-escondite--arriba { bottom: 100%; left: var(--ax-x, 72%); }
.ax-escondite--abajo { top: 100%; left: var(--ax-x, 72%); transform: rotate(180deg); }
.ax-escondite--izquierda { right: 100%; top: var(--ax-y, 40%); transform: translateX(8px) rotate(-90deg); }
.ax-escondite--derecha { left: 100%; top: var(--ax-y, 40%); transform: translateX(-8px) rotate(90deg); }
.ax-asomado,
.ax-asomado:hover,
.ax-asomado:focus {
	--ax-asomado-piel: var(--ax-tq);
	--ax-asomado-linea: var(--ax-mid);
	position: absolute;
	left: 0;
	bottom: 0;
	width: 76px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	pointer-events: auto;
}
.ax-asomado { transform: translateY(100%); transition: transform .55s var(--ax-ease-peek); }
.ax-asomado svg { display: block; width: 100%; height: auto; }
.ax-asomado.is-visible { transform: translateY(42%); }
.ax-asomado.is-visible:hover,
.ax-asomado:focus-visible { transform: translateY(16%); }
.ax-asomado:focus-visible { outline-offset: -3px; }
.ax-asomado.is-encontrado { transform: translateY(100%); transition-duration: .3s; }

.ax-travesura {
	max-width: min(520px, calc(100vw - 32px));
	padding: 32px;
	border: 0;
	border-radius: 20px;
	background: var(--ax-crema);
	color: var(--ax-noche);
	box-shadow: 0 24px 80px rgb(14 34 41 / .4);
}
.ax-travesura::backdrop { background: rgb(14 34 41 / .7); }
.ax-travesura__eyebrow { margin: 0 0 8px; color: var(--ax-mid); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ax-travesura__titulo { font-size: 1.8rem; }
.ax-travesura__veces { color: var(--ax-mid); font-size: .9rem; }
.ax-travesura__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.ax-travesura__cerrar,
.ax-travesura__cerrar:hover,
.ax-travesura__cerrar:focus {
	min-height: 48px;
	padding: 0 1.2em;
	border: 1.5px solid var(--ax-mid);
	border-radius: var(--ax-radio);
	background: none;
	color: var(--ax-mid);
	font: 600 1rem/1 var(--ax-text);
	cursor: pointer;
}
.ax-imprimible { display: none; }
@media print {
	html.ax-imprime body > *:not(.ax-imprimible) { display: none !important; }
	html.ax-imprime .ax-imprimible { display: block; padding: 2cm; color: #000; text-align: center; }
	html.ax-imprime .ax-imprimible__logo { display: block; width: 4cm; margin: 0 auto; color: #2e6171; }
	html.ax-imprime .ax-imprimible__logo svg { width: 100%; height: auto; }
	html.ax-imprime .ax-imprimible h2 { margin: 1cm 0 .5cm; font-size: 28pt; }
	html.ax-imprime .ax-imprimible p { font-size: 14pt; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}