/* =============================================================================
 * OtakusCR Elementor · widgets-extra.css
 *
 * Estilos específicos de widgets individuales. Se mantiene un solo archivo
 * para reducir requests; cada bloque va comentado con el widget al que
 * pertenece.
 * ============================================================================ */

/* ── Widget Hero ─────────────────────────────────────────────────────────── */
.otakuscr-hero-widget .hero-section {
	min-height: var(--otakuscr-hero-min-height, 92vh);
}
.otakuscr-hero-widget .hero-title {
	font-size: var(--otakuscr-hero-font-size, var(--fs-h1));
}
.otakuscr-hero-widget .hero-bg__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* ── Widget Banner ───────────────────────────────────────────────────────── */
.otakuscr-banner-widget .banner-wrapper {
	max-height: var(--otakuscr-banner-height, 480px);
}
.otakuscr-banner-widget .banner-wrapper img,
.otakuscr-banner-widget .banner-wrapper .banner-img {
	height: var(--otakuscr-banner-height, 480px);
}
.otakuscr-banner-widget .banner-placeholder {
	height: var(--otakuscr-banner-height, 480px);
}

/* ── Widget Nav Buttons ──────────────────────────────────────────────────── */
.otakuscr-nav-buttons-widget .nav-buttons-section {
	padding-block: var(--otakuscr-nav-buttons-padding, 32px);
}

/* ── Widget Topnav ───────────────────────────────────────────────────────── */
.otakuscr-topnav-widget .topnav {
	position: relative; /* En el editor, no sticky para no tapar el panel. */
}
.elementor-editor-active .otakuscr-topnav-widget .topnav {
	position: relative;
}
@media (min-width: 769px) {
	.otakuscr-topnav-widget .mobile-nav {
		display: none !important;
	}
}

/* ── Widget Footer ───────────────────────────────────────────────────────── */
.otakuscr-footer-widget .pagefoot,
.otakuscr-footer-widget .site-footer,
.otakuscr-footer-widget .footer {
	padding-block: var(--otakuscr-footer-padding, var(--gap-xl));
}

/* =============================================================================
 * Widget Header Carousel
 * ============================================================================ */

.otakuscr-header-carousel-widget { width: 100%; }

.hcarousel {
	position: relative;
	min-height: var(--otakuscr-hcarousel-min-height, 80vh);
	overflow: hidden;
	background: var(--bg, #1a2540);
}

.hcarousel-track {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: inherit;
}

.hcarousel-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s var(--ease, ease), transform 0.8s var(--ease, ease);
	z-index: 1;
}

/* Transición fade */
.hcarousel[data-transition="fade"] .hcarousel-slide.is-active,
.hcarousel-track[data-transition="fade"] .hcarousel-slide.is-active {
	opacity: 1;
	visibility: visible;
}

/* Transición slide */
.hcarousel-slide[data-slide-pos="left"]   { transform: translateX(-100%); }
.hcarousel-slide[data-slide-pos="right"]  { transform: translateX(100%); }
.hcarousel-slide[data-slide-pos="center"],
.hcarousel-slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.hcarousel-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hcarousel-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hcarousel-bg-placeholder {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	color: var(--muted, #b8c8dc);
	background: linear-gradient(135deg, #0d1f3c 0%, #1a2f55 30%, #2D4B73 55%, #1a2540 80%, #0a1020 100%);
}

.hcarousel-bg-placeholder svg {
	width: 64px;
	height: 64px;
	opacity: 0.3;
}

.hcarousel-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.hcarousel-content {
	position: relative;
	z-index: 2;
	padding: 40px var(--gutter, 32px);
	max-width: 900px;
}

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

.hcarousel-title {
	font-family: var(--font-display, 'Bangers', serif);
	font-size: var(--fs-h1, clamp(52px, 9vw, 110px));
	line-height: 1.0;
	letter-spacing: 0.03em;
	margin: 0 0 20px;
	text-shadow: 0 4px 32px rgba(0, 0, 0, 0.6);
}

.hcarousel-slogan {
	font-size: clamp(16px, 2.5vw, 22px);
	color: var(--muted, #b8c8dc);
	max-width: 52ch;
	margin: 0 auto 36px;
	line-height: 1.5;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.hcarousel-content[style*="text-align: left"] .hcarousel-slogan,
.hcarousel-content[style*="text-align:left"] .hcarousel-slogan {
	margin-left: 0;
}

.hcarousel-content[style*="text-align: right"] .hcarousel-slogan,
.hcarousel-content[style*="text-align:right"] .hcarousel-slogan {
	margin-right: 0;
}

.hcarousel-cta-row {
	display: flex;
	gap: var(--gap-sm, 12px);
	justify-content: center;
	flex-wrap: wrap;
}

.hcarousel-content[style*="text-align: left"] .hcarousel-cta-row,
.hcarousel-content[style*="text-align:left"] .hcarousel-cta-row {
	justify-content: flex-start;
}

.hcarousel-content[style*="text-align: right"] .hcarousel-cta-row,
.hcarousel-content[style*="text-align:right"] .hcarousel-cta-row {
	justify-content: flex-end;
}

/* Flechas */
.hcarousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1.5px solid rgba(255, 255, 255, 0.2);
	color: var(--fg, #f5f0e8);
	display: grid;
	place-items: center;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
	cursor: pointer;
}

.hcarousel-arrow:hover {
	background: var(--accent, #F26716);
	border-color: var(--accent, #F26716);
}

.hcarousel-arrow svg {
	width: 20px;
	height: 20px;
}

.hcarousel-arrow--prev { left: 24px; }
.hcarousel-arrow--next { right: 24px; }

/* Dots */
.hcarousel-dots {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	gap: 8px;
}

.hcarousel-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.hcarousel-dot:hover {
	background: rgba(255, 255, 255, 0.6);
}

.hcarousel-dot.is-active {
	background: var(--accent, #F26716);
	transform: scale(1.3);
}

/* Responsive */
@media (max-width: 768px) {
	.hcarousel-arrow {
		width: 40px;
		height: 40px;
	}
	.hcarousel-arrow--prev { left: 12px; }
	.hcarousel-arrow--next { right: 12px; }
	.hcarousel-content {
		padding: 24px 20px;
	}
	.hcarousel-dots {
		bottom: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hcarousel-slide {
		transition-duration: 0.01ms !important;
	}
}