/*
 * Tokens de marca Red Kizuna — extraídos del logo real (Red-Kizuna_Logo.png)
 * y piezas de marca coherentes (monograma RK, gráfica "profesional-laptop"),
 * no del CSS heredado de Elementor (que usaba azules genéricos de Astra sin
 * relación con la identidad real — ver PROYECTO.md sección 3): terracota,
 * malva y azul marino sobre crema. Calma, cuidado, cercanía — sitio claro
 * y aireado, a diferencia de KROHMA (oscuro) o Corporación de la Raíz
 * (ink+naranja).
 */
:root {
	--ink: #3a4750;
	--ink-soft: #2c3740;
	--accent: #b7745a;
	--accent-bright: #c9816d;
	--mauve: #948a9c;
	--paper: #faf8f5;
	--paper-soft: #efe9e2;
	--muted: #6f6a66;

	--font-display: "Cormorant Garamond", serif;
	--font-body: "Inter", sans-serif;

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

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

body {
	background-color: var(--paper) !important;
	color: var(--ink);
	font-family: var(--font-body);
}

html {
	background-color: var(--paper) !important;
}
#page,
.site-content,
.ast-container {
	background-color: transparent !important;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--ink) !important;
	font-family: var(--font-display);
}

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

::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);
	outline-offset: 2px;
}

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

.rk-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
 * los otros tres proyectos. */
body.rk-full-bleed .site-content,
body.rk-full-bleed .site-content > .ast-container {
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
.rk-home {
	width: 100%;
	flex: 1 1 auto;
	min-width: 0;
}

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

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

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

/* Secciones oscuras — mismo recurso de "ritmo" que los otros proyectos:
 * alternar bloques claros/oscuros en vez de un fondo plano de punta a punta. */
.rk-section--dark {
	background: var(--ink);
	color: var(--paper);
}
.rk-section--dark h1,
.rk-section--dark h2,
.rk-section--dark h3,
.rk-section--dark h4 {
	color: var(--paper) !important;
}
.rk-section--dark p {
	color: rgba(250, 248, 245, 0.75);
}
.rk-section--dark .rk-eyebrow {
	color: var(--accent-bright);
}

/* 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 suaves, coherente con las formas redondeadas del logo */
.rk-btn {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	padding: 0.9rem 1.85rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	border: 1.5px solid var(--accent);
	cursor: pointer;
	background: none;
	color: var(--ink);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.rk-btn--solid {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--paper);
}
.rk-btn--solid:hover {
	background: var(--accent-bright);
	border-color: var(--accent-bright);
	color: var(--paper);
	transform: translateY(-1px);
}
.rk-btn--ghost {
	color: var(--ink);
}
.rk-section--dark .rk-btn--ghost {
	color: var(--paper);
	border-color: var(--paper);
}
.rk-btn--ghost:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--paper);
}
.rk-icon {
	width: 1.1em;
	height: 1.1em;
}

/* Header */
.rk-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: rgba(250, 248, 245, 0.92);
	border-bottom: 1px solid var(--paper-soft);
	backdrop-filter: blur(6px);
}
.rk-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;
}
.rk-header__logo {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	height: 100%;
	text-decoration: none;
}
.rk-header__logo img {
	height: clamp(2rem, 1.7rem + 1vw, 2.5rem);
	width: auto;
	border-radius: 50%;
}
.rk-header__wordmark {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: 0.01em;
	font-size: 1.2rem;
	color: var(--ink);
}
.rk-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
.rk-header__menu {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.rk-header__menu a {
	font-family: var(--font-body);
	font-size: 0.9rem;
	color: var(--muted);
	text-decoration: none;
	transition: color 0.2s ease;
}
.rk-header__menu a:hover {
	color: var(--accent);
}
.rk-header__cta {
	white-space: nowrap;
}
.rk-header__actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
.rk-header__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--ink);
}
.rk-header__cart .rk-icon {
	width: 2rem;
	height: 2rem;
}
.rk-header__cart-count {
	position: absolute;
	top: -0.5rem;
	right: -0.6rem;
	background: var(--accent);
	color: var(--paper);
	font-size: 0.65rem;
	line-height: 1;
	min-width: 1.2rem;
	text-align: center;
	padding: 0.15rem 0.35rem;
	border-radius: 999px;
	font-family: var(--font-body);
	font-weight: 600;
}

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

.rk-mobile-panel {
	position: fixed;
	top: var(--header-h);
	left: 0;
	right: 0;
	max-height: calc(100vh - var(--header-h));
	overflow-y: auto;
	background: var(--paper);
	border-bottom: 1px solid var(--paper-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;
}
.rk-mobile-panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.rk-mobile-panel__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.rk-mobile-panel__menu a {
	font-family: var(--font-display);
	font-size: 1.2rem;
	color: var(--ink);
	text-decoration: none;
}

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

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

/* Botón nativo "volver arriba" de Astra — recoloreado a la paleta real en vez
 * de quedar en el azul de fábrica (mismo hallazgo que en KROHMA). No se
 * reemplaza por un botón de WhatsApp como en KROHMA porque todavía no hay un
 * teléfono de contacto real confirmado para Red Kizuna. */
#ast-scroll-top {
	background: var(--accent) !important;
}
#ast-scroll-top:hover {
	background: var(--accent-bright) !important;
}