/* =============================================================================
 * OtakusCR · base.css
 *
 * Reset y primitivas de layout compartidas por todas las páginas.
 * ============================================================================ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.55;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-base) var(--ease);
}

button {
	font: inherit;
	cursor: pointer;
	border: none;
	background: transparent;
	color: inherit;
}

input, textarea, select {
	font: inherit;
	color: inherit;
}

p {
	text-wrap: pretty;
	margin: 0 0 1rem;
}

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
}

ul.is-unstyled, ol.is-unstyled {
	list-style: none;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ── Tipografía utilitaria ───────────────────────────────────────────────── */
.h1, h1 {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	line-height: 1.0;
	letter-spacing: 0.02em;
}

.h2, h2 {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	line-height: 1.1;
	letter-spacing: 0.01em;
}

.h3, h3 {
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.lead {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--muted);
	max-width: 60ch;
}

.eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 var(--gap-md);
}

.meta {
	font-family: var(--font-mono);
	font-size: var(--fs-meta);
	color: var(--muted);
}

.accent-word { color: var(--accent); }

/* ── Layout primitivas ───────────────────────────────────────────────────── */
.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow { max-width: 900px; }
.container--wide   { max-width: 1320px; }

.section {
	padding-block: clamp(48px, 8vw, var(--gap-2xl));
}

.stack {
	display: flex;
	flex-direction: column;
}
.stack > * + * { margin-top: var(--gap-md); }

.stack-lg > * + * { margin-top: var(--gap-lg); }
.stack-sm > * + * { margin-top: var(--gap-sm); }
.stack-xs > * + * { margin-top: var(--gap-xs); }

.row {
	display: flex;
	align-items: center;
	gap: var(--gap-md);
}

.row-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-md);
}

.wrap { flex-wrap: wrap; }

/* ── Section divider (separador con gradiente del HTML original) ──────────── */
.section-divider {
	height: 1px;
	background: linear-gradient(
		to right,
		transparent,
		var(--border),
		var(--accent),
		var(--border),
		transparent
	);
	margin: 0;
	border: 0;
}

/* ── Placeholder genérico (mismo look que los HTML) ───────────────────────── */
.otakuscr-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.5;
	background:
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 10px,
			color-mix(in oklch, var(--border) 30%, transparent) 10px,
			color-mix(in oklch, var(--border) 30%, transparent) 11px
		);
}

.otakuscr-placeholder svg {
	width: 32px;
	height: 32px;
}

/* ── Screen-reader text ──────────────────────────────────────────────────── */
.screen-reader-text,
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Skip link ───────────────────────────────────────────────────────────── */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--z-toast);
	padding: 12px 20px;
	background: var(--accent);
	color: var(--fg);
	font-weight: 600;
	border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
	left: 0;
}

/* ── WordPress core alignments ───────────────────────────────────────────── */
.alignwide { max-width: 1320px; margin-inline: auto; }
.alignfull { max-width: 100%; }

.wp-caption { max-width: 100%; }
.wp-caption .wp-caption-text {
	font-size: var(--fs-meta);
	color: var(--muted);
	text-align: center;
	margin-top: 6px;
}

/* ── Imágenes con caption en el editor ───────────────────────────────────── */
figure.wp-block-image figcaption {
	font-size: var(--fs-meta);
	color: var(--muted);
	text-align: center;
}

/* ── Elementor: limpiar overflow en canvas ───────────────────────────────── */
.elementor-page .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--container);
}