/* =============================================================================
 * OtakusCR · theme.css
 *
 * Reglas propias del theme que no viven en tokens/base/components/
 * components-extra (hero del home, ajustes de Elementor, Gutenberg).
 *
 * Se encola por separado en functions.php (otakuscr_assets), después de
 * components-extra.css. No usa @import: cada hoja del theme se encola de
 * forma individual con su propio ?ver=OTAKUSCR_VERSION para que los cambios
 * futuros invaliden la caché del navegador correctamente.
 * ============================================================================ */

/* ── Hero (sección principal del home) ────────────────────────────────────── */
.hero-section {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}

.hero-bg {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to bottom,
			color-mix(in oklch, #0a1122 55%, transparent) 0%,
			color-mix(in oklch, #0a1122 30%, transparent) 40%,
			color-mix(in oklch, #0a1122 70%, transparent) 100%
		),
		linear-gradient(135deg, #0d1f3c 0%, #1a2f55 30%, #2D4B73 55%, #1a2540 80%, #0a1020 100%);
}

.hero-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-conic-gradient(
		from 0deg at 50% 50%,
		rgba(55, 103, 166, 0.08) 0deg,
		transparent 1.5deg,
		transparent 4deg,
		rgba(55, 103, 166, 0.05) 4.5deg,
		transparent 5deg
	);
}

.hero-bg::after {
	content: '';
	position: absolute;
	width: 700px;
	height: 700px;
	border-radius: 50%;
	border: 2px solid color-mix(in oklch, var(--accent) 25%, transparent);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -48%);
	pointer-events: none;
}

.hero-content {
	position: relative;
	z-index: 1;
	padding: 40px var(--gutter);
}

.hero-content .eyebrow {
	font-size: 13px;
	letter-spacing: 0.15em;
	margin-bottom: 16px;
}

.hero-title {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	line-height: 1.0;
	letter-spacing: 0.03em;
	color: var(--fg);
	margin: 0 0 20px;
	text-shadow: 0 4px 32px rgba(0, 0, 0, 0.6);
}

.hero-slogan {
	font-size: clamp(16px, 2.5vw, 22px);
	color: var(--muted);
	max-width: 52ch;
	margin: 0 auto 36px;
	line-height: 1.5;
}

.hero-cta-row {
	display: flex;
	gap: var(--gap-sm);
	justify-content: center;
	flex-wrap: wrap;
}

.hero-scroll-hint {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--muted);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-family: var(--font-mono);
	opacity: 0.7;
	animation: otakuscr-bounce 2.5s ease-in-out infinite;
}
.hero-scroll-hint svg { width: 16px; height: 16px; }

@keyframes otakuscr-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%      { transform: translateX(-50%) translateY(5px); }
}

/* ── Elementor: anchura full-width en canvas ──────────────────────────────── */
.elementor-page .elementor-section.elementor-section-full_width {
	width: 100%;
}

/* ── Asegurar contraste en el editor Gutenberg ───────────────────────────── */
.block-editor-block-list__layout {
	color: var(--fg);
}