/*
 * Tokens de marca KROHMA — paleta real extraída del sitio Elementor original
 * (post-7.css) y confirmada como identidad de la banda (ver PROYECTO.md
 * sección 3): fría, nocturna, mística. Nada de naranja (a diferencia de
 * GEDLER/Corporación de la Raíz) — morado/violeta como acento principal,
 * morado apagado (--accent-orchid) como detalle secundario. El cian original
 * del Elementor heredado se sacó del todo (pedido del usuario 2026-08-02).
 */
:root {
	--ink: #050713;
	--ink-soft: #1d213b;
	--accent: #8526ac;
	--accent-bright: #8f4dff;
	/* Reemplaza al cian original (#39d7ff) — pedido del usuario 2026-08-02:
	 * el azul/cian no encajaba con la identidad, querían un morado más
	 * apagado que --accent-bright para que el acento secundario (eyebrows,
	 * precios, hover) siga distinguiéndose del morado principal de botones
	 * sin salirse de la familia violeta. Ver PROYECTO.md sección 3. */
	--accent-orchid: #a78bfa;
	--paper: #f2eef8;
	--paper-soft: #d8d1e8;
	--muted: #a9a4ba;

	/* Nebulosa — extraída de las artes reales de Krohma (posts de Instagram
	 * "Espero volver a nacer" y el flyer de Kütral Ko), no inventada: morado,
	 * índigo y magenta oscuros sobre negro, con estrellas sutiles. Se usa
	 * como fondo fijo detrás de todo el sitio (ver body más abajo) para que
	 * las secciones se sientan parte de un mismo "universo", no bloques de
	 * color planos como antes. */
	--nebula-indigo: #2a1b54;
	--nebula-magenta: #5c1f4a;

	--font-display: "Cinzel", serif;
	--font-body: "Jost", sans-serif;

	--header-h: 84px;
}
@media (max-width: 56rem) {
	:root {
		--header-h: 64px;
	}
}

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

body {
	/* !important porque el color global #4 de Astra (--ast-global-color-4,
	 * blanco de fábrica) se aplica vía `.ast-plain-container,
	 * .ast-page-builder-template` — una clase, con más especificidad que
	 * `body` solo — y pisa este fondo. En el home no se notaba porque cada
	 * sección cubre el body de punta a punta con su propio fondo oscuro,
	 * pero en tienda/carrito/checkout/mi cuenta, donde el contenido no llena
	 * el alto de la pantalla, se veía el blanco de Astra por debajo. */
	background-color: var(--ink) !important;
	background-image:
		radial-gradient(ellipse 55% 45% at 15% 8%, rgba(133, 38, 172, 0.32), transparent 70%),
		radial-gradient(ellipse 50% 40% at 88% 4%, rgba(57, 215, 255, 0.09), transparent 70%),
		radial-gradient(ellipse 65% 55% at 92% 55%, rgba(42, 27, 84, 0.4), transparent 70%),
		radial-gradient(ellipse 70% 55% at 10% 92%, rgba(92, 31, 74, 0.32), transparent 70%),
		radial-gradient(ellipse 50% 40% at 60% 100%, rgba(133, 38, 172, 0.22), transparent 70%);
	background-attachment: fixed;
	background-repeat: no-repeat;
	color: var(--paper);
	font-family: var(--font-body);
	position: relative;
}

/* Estrellas — patrón repetible de puntitos, fijo detrás de todo el contenido. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.55;
	background-image:
		radial-gradient(1px 1px at 10% 20%, #fff, transparent),
		radial-gradient(1px 1px at 32% 65%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 58% 15%, #fff, transparent),
		radial-gradient(1px 1px at 74% 82%, #fff, transparent),
		radial-gradient(1px 1px at 85% 35%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 22% 90%, #fff, transparent),
		radial-gradient(1px 1px at 45% 45%, #fff, transparent),
		radial-gradient(1px 1px at 95% 70%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 5% 55%, #fff, transparent),
		radial-gradient(1px 1px at 65% 5%, #fff, transparent);
	background-repeat: repeat;
	background-size: 340px 320px;
}

/* Astra pinta el wrapper de contenido en blanco por defecto — se anula ese
 * blanco. `html` se deja con --ink sólido como red de seguridad (zonas de
 * rebote en mobile Safari), pero los wrappers internos quedan transparentes
 * para que se vea la nebulosa de fondo del body en vez de taparla. */
html {
	background-color: var(--ink) !important;
}
#page,
.site-content,
.ast-container {
	background-color: transparent !important;
}

/* Mismo problema que el fondo del body: Astra pinta los títulos con su color
 * global de encabezados (oscuro, pensado para fondo claro) vía CSS inline del
 * Customizer, y por algún motivo (el inline del Customizer parece insertarse
 * en el DOM después de nuestro CSS pese a que su <link>/<style> asociado
 * aparece antes en el HTML) esa regla le sigue ganando a la nuestra en la
 * cascada incluso sin más especificidad — de ahí el !important, igual que en
 * `html` más arriba. Se ve en las plantillas por defecto de WooCommerce que
 * no tienen clase propia (el título "Mi cuenta", el "Acceder" del login,
 * etc.) — los títulos con clases a medida (.krh-hero__title,
 * .krh-footer__heading, .woocommerce h1.page-title) tienen su propia regla
 * más específica y no dependen de esta red de seguridad. */
h1, h2, h3, h4, h5, h6 {
	color: var(--paper) !important;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* <picture> no tiene tamaño propio por defecto (es inline) — con
 * display:contents se comporta como si el <img> de adentro fuera hijo
 * directo del contenedor real, para que el 100%/object-fit sigan
 * funcionando igual que antes de envolver las imágenes (ver krh_picture()
 * en functions.php, usado para servir WebP con fallback). */
picture {
	display: contents;
}

::selection {
	background: var(--accent);
	color: var(--paper);
}

a {
	color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--accent-orchid);
	outline-offset: 2px;
}

.krh-container {
	max-width: 75rem;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.krh-section {
	padding-block: clamp(2.5rem, 3rem + 1.5vw, 4rem);
}

/* Templates a medida (front-page.php) no heredan las clases que page.php le
 * da al wrapper de Astra para estirarse a todo el ancho — mismo fix que en
 * GEDLER/Corporación de la Raíz. */
body.krh-full-bleed .site-content > .ast-container {
	max-width: 100% !important;
	padding: 0 !important;
}
.krh-home {
	width: 100%;
	flex: 1 1 auto;
	min-width: 0;
}

.krh-eyebrow {
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--accent-orchid);
	margin: 0 0 1rem;
	display: block;
}

.krh-section-title {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.1;
	font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
	color: var(--paper);
	margin: 0 0 1.5rem;
	text-wrap: balance;
}

.krh-section p {
	font-family: var(--font-body);
	color: var(--muted);
	font-size: 1.05rem;
	line-height: 1.7;
}

/* Reveal on scroll — respeta prefers-reduced-motion (ver home.js) */
[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Botones — esquinas rectas, marco fino, mayúsculas */
.krh-btn {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.9rem 1.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	border: 1.5px solid var(--accent);
	cursor: pointer;
	background: none;
	color: var(--paper);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.krh-btn--solid {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--paper);
}
.krh-btn--solid:hover {
	background: var(--accent-bright);
	border-color: var(--accent-bright);
}
.krh-btn--ghost:hover {
	background: var(--accent);
	border-color: var(--accent);
}
.krh-icon {
	width: 1.1em;
	height: 1.1em;
}

/* Header */
.krh-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: rgba(5, 7, 19, 0.92);
	border-bottom: 1px solid var(--ink-soft);
	backdrop-filter: blur(6px);
}
.krh-header__inner {
	max-width: 87.5rem;
	margin-inline: auto;
	height: var(--header-h);
	padding-inline: clamp(1.25rem, 4vw, 3rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}
.krh-header__logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	height: 100%;
	text-decoration: none;
}
.krh-header__logo img {
	height: clamp(2rem, 1.7rem + 1vw, 2.5rem);
	width: auto;
}
.krh-header__wordmark {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: 0.12em;
	font-size: 1.1rem;
	color: var(--paper);
}
.krh-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
.krh-header__menu {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.krh-header__menu a {
	font-family: var(--font-body);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
	text-decoration: none;
	transition: color 0.2s ease;
}
.krh-header__menu a:hover {
	color: var(--accent-orchid);
}

.krh-header__cart a {
	position: relative;
	display: inline-flex;
	color: var(--paper);
}
.krh-header__cart-count {
	position: absolute;
	top: -0.5rem;
	right: -0.6rem;
	background: var(--accent);
	color: var(--paper);
	font-size: 0.65rem;
	line-height: 1;
	padding: 0.2rem 0.4rem;
	border-radius: 999px;
	font-family: var(--font-body);
	font-weight: 600;
}

.krh-header__toggle {
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--paper);
}
.krh-header__toggle-bars,
.krh-header__toggle-bars::before,
.krh-header__toggle-bars::after {
	display: block;
	width: 1.5rem;
	height: 2px;
	background: currentColor;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.krh-header__toggle-bars {
	position: relative;
}
.krh-header__toggle-bars::before,
.krh-header__toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
}
.krh-header__toggle-bars::before {
	top: -7px;
}
.krh-header__toggle-bars::after {
	top: 7px;
}
.krh-header__toggle[aria-expanded="true"] .krh-header__toggle-bars {
	background: transparent;
}
.krh-header__toggle[aria-expanded="true"] .krh-header__toggle-bars::before {
	top: 0;
	transform: rotate(45deg);
	background: var(--accent-orchid);
}
.krh-header__toggle[aria-expanded="true"] .krh-header__toggle-bars::after {
	top: 0;
	transform: rotate(-45deg);
	background: var(--accent-orchid);
}

.krh-mobile-panel {
	position: fixed;
	top: var(--header-h);
	left: 0;
	right: 0;
	max-height: calc(100vh - var(--header-h));
	overflow-y: auto;
	background: var(--ink);
	border-bottom: 1px solid var(--ink-soft);
	padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.krh-mobile-panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.krh-mobile-panel__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.krh-mobile-panel__menu a {
	font-family: var(--font-display);
	font-size: 1.2rem;
	letter-spacing: 0.02em;
	color: var(--paper);
	text-decoration: none;
}

@media (max-width: 56rem) {
	.krh-header__nav {
		display: none;
	}
	.krh-header__toggle {
		display: inline-flex;
	}
}
@media (min-width: 56.0625rem) {
	.krh-mobile-panel {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.krh-mobile-panel,
	.krh-header__toggle-bars,
	.krh-header__toggle-bars::before,
	.krh-header__toggle-bars::after {
		transition: none;
	}
}

body {
	padding-top: var(--header-h);
}