/**
 * Wolf VOD — Dark / Light streaming UI
 */

/* ── Theme tokens ── */
html.vod-theme-dark {
	--vod-primary: #ef4444;
	--vod-primary-mid: #dc2626;
	--vod-primary-dark: #b91c1c;
	--vod-primary-rgb: 239, 68, 68;
	--vod-accent: #22d3ee;
	--vod-accent-rgb: 34, 211, 238;
	--vod-bg: #0a0a0a;
	--vod-bg-soft: #171717;
	--vod-surface: rgba(23, 23, 23, 0.75);
	--vod-surface-solid: #171717;
	--vod-text: #fafafa;
	--vod-text-muted: #a3a3a3;
	--vod-border: rgba(255, 255, 255, 0.08);
	--vod-border-strong: rgba(255, 255, 255, 0.12);
	--vod-header: rgba(10, 10, 10, 0.92);
	--vod-header-hero: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
	--vod-input-bg: rgba(255, 255, 255, 0.05);
	--vod-shadow: rgba(0, 0, 0, 0.5);
	--vod-hero-edge: rgba(10, 10, 10, 0.95);
	--vod-footer-bg: #000000;
	--vod-main-bg: #0a0a0a;
}

html.vod-theme-light {
	--vod-primary: #2198ff;
	--vod-primary-mid: #1a85e6;
	--vod-primary-dark: #1570c9;
	--vod-primary-rgb: 33, 152, 255;
	--vod-accent: #2198ff;
	--vod-accent-rgb: 33, 152, 255;
	--vod-bg: #ffffff;
	--vod-bg-soft: #f5f7fa;
	--vod-surface: rgba(255, 255, 255, 0.9);
	--vod-surface-solid: #f5f7fa;
	--vod-text: #171717;
	--vod-text-muted: #525252;
	--vod-border: rgba(0, 0, 0, 0.08);
	--vod-border-strong: rgba(0, 0, 0, 0.12);
	--vod-header: #ffffff;
	--vod-header-hero: #ffffff;
	--vod-header-search-bg: #f3f4f6;
	--vod-header-search-border: rgba(0, 0, 0, 0.1);
	--vod-header-link: #374151;
	--vod-header-link-hover: #2198ff;
	--vod-input-bg: rgba(0, 0, 0, 0.04);
	--vod-shadow: rgba(0, 0, 0, 0.08);
	--vod-hero-edge: rgba(255, 255, 255, 0.95);
	--vod-footer-bg: #f8f9fb;
	--vod-main-bg: #ffffff;
	color-scheme: light;
}

/* Tailwind vod-* → variables (permite toggle en runtime) */
.text-vod-neon { color: var(--vod-accent) !important; }
.bg-vod-neon { background-color: var(--vod-accent) !important; }
.text-vod-cinema { color: var(--vod-primary) !important; }
.bg-vod-cinema { background-color: var(--vod-primary) !important; }
.hover\:text-vod-neon:hover { color: var(--vod-accent) !important; }
.ring-vod-neon\/20 { --tw-ring-color: rgba(var(--vod-accent-rgb), 0.2) !important; }
.ring-vod-neon\/25 { --tw-ring-color: rgba(var(--vod-accent-rgb), 0.25) !important; }
.ring-vod-neon\/30 { --tw-ring-color: rgba(var(--vod-accent-rgb), 0.3) !important; }
.bg-vod-neon\/10 { background-color: rgba(var(--vod-accent-rgb), 0.1) !important; }
.border-vod-neon\/40,
.focus\:border-vod-neon\/40:focus { border-color: rgba(var(--vod-accent-rgb), 0.4) !important; }
.focus\:ring-vod-neon\/20:focus { --tw-ring-color: rgba(var(--vod-accent-rgb), 0.2) !important; }
.shadow-neon { box-shadow: 0 0 40px rgba(var(--vod-accent-rgb), 0.15) !important; }

.vod-main-surface { background-color: var(--vod-main-bg); }
.vod-body { background-color: var(--vod-bg); color: var(--vod-text); }

/* ── Glass & surfaces ── */
.vod-glass {
	background: var(--vod-surface);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* ── Buttons ── */
.vod-btn-primary {
	background: linear-gradient(135deg, var(--vod-primary) 0%, var(--vod-primary-mid) 50%, var(--vod-primary-dark) 100%);
	box-shadow: 0 4px 24px rgba(var(--vod-primary-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	color: #fff;
}

.vod-btn-primary:hover {
	box-shadow: 0 8px 32px rgba(var(--vod-primary-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.vod-btn-glass {
	background: var(--vod-input-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--vod-border-strong);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
	color: var(--vod-text);
}

.vod-play-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.75rem;
	width: 2.75rem;
	border-radius: 9999px;
	background: linear-gradient(135deg, var(--vod-primary), var(--vod-primary-mid));
	color: #fff;
	box-shadow: 0 10px 25px rgba(var(--vod-primary-rgb), 0.4);
	border: 2px solid rgba(var(--vod-primary-rgb), 0.35);
}

.vod-badge-unavailable {
	background: rgba(var(--vod-primary-rgb), 0.1);
	color: var(--vod-primary);
	border-color: rgba(var(--vod-primary-rgb), 0.25);
}

/* ── Theme toggle ── */
.vod-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	border: 1px solid var(--vod-border-strong);
	background: var(--vod-input-bg);
	color: var(--vod-text-muted);
	cursor: pointer;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.vod-theme-toggle:hover {
	color: var(--vod-accent);
	border-color: rgba(var(--vod-accent-rgb), 0.35);
	background: rgba(var(--vod-accent-rgb), 0.08);
}

.vod-theme-toggle[data-vod-theme-toggle] {
	width: 100%;
	height: auto;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	justify-content: flex-start;
}

.vod-theme-toggle .vod-theme-icon-light,
html.vod-theme-light .vod-theme-toggle .vod-theme-icon-dark { display: none; }
html.vod-theme-light .vod-theme-toggle .vod-theme-icon-light { display: block; }

.vod-mssg-bar {
	background: rgba(var(--vod-primary-rgb), 0.92);
	color: #fff;
}

html.vod-theme-light .vod-mssg-bar {
	background: rgba(33, 152, 255, 0.12);
	color: #1570c9;
	border-bottom-color: rgba(33, 152, 255, 0.2) !important;
}

/* ── Header ── */
#streamit-header.streamit-header-glass {
	background: var(--vod-header);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--vod-border);
}

#streamit-header.streamit-header-over-hero:not(.streamit-header-solid) {
	background: var(--vod-header-hero);
	backdrop-filter: none;
	border-bottom-color: transparent;
}

#streamit-header.streamit-header-solid {
	background: var(--vod-header);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--vod-border);
}

.site-logo {
	display: block;
	flex-shrink: 0;
}

.site-logo--header {
	height: 3rem;
	max-height: calc(100% - 0.5rem);
	width: auto;
	max-width: min(280px, 52vw);
	object-fit: contain;
	object-position: left center;
}

@media (min-width: 640px) {
	.site-logo--header {
		height: 3.5rem;
		max-width: 320px;
	}
}

@media (min-width: 1024px) {
	.site-logo--header {
		height: 4rem;
		max-width: 360px;
	}
}

.site-logo--footer {
	height: 4.5rem;
	max-width: 260px;
	object-fit: contain;
	object-position: left center;
}

@media (min-width: 640px) {
	.site-logo--footer {
		height: 5.5rem;
		max-width: 300px;
	}
}

.vod-home #streamit-header.streamit-header-over-hero:not(.streamit-header-solid) .vod-input-search {
	background: var(--vod-input-bg);
	border-color: var(--vod-border-strong);
}

/* ── Hero (altura media: entre full-screen y compacto) ── */
.vod-hero,
.vod-hero-slide {
	min-height: clamp(400px, 68vh, 640px);
}

@media (min-width: 1024px) {
	.vod-hero,
	.vod-hero-slide {
		min-height: clamp(440px, 72vh, 680px);
	}
}

.vod-hero-radial {
	background:
		radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.85) 100%),
		radial-gradient(ellipse 100% 100% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.6) 100%);
}

/* Hero: texto izquierda + póster derecha con separación */
.vod-hero-poster-frame {
	box-shadow:
		0 25px 50px -12px rgba(0, 0, 0, 0.75),
		0 0 0 1px rgba(255, 255, 255, 0.08);
}

@media (min-width: 768px) {
	.vod-hero-poster-frame {
		max-height: min(58vh, 400px);
		width: auto;
		height: auto;
		aspect-ratio: 2 / 3;
	}
}

.vod-hero-content-animate {
	animation: vodHeroFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes vodHeroFadeUp {
	from {
		opacity: 0;
		transform: translateY(32px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Embla controls ── */
.vod-embla-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 9999px;
	background: rgba(23, 23, 23, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #fafafa;
	cursor: pointer;
	transition: all 0.25s ease;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.vod-embla-btn:hover {
	background: rgba(var(--vod-accent-rgb), 0.15);
	border-color: rgba(var(--vod-accent-rgb), 0.35);
	color: var(--vod-accent);
	transform: scale(1.05);
}

.vod-embla-btn:disabled {
	opacity: 0.25;
	cursor: not-allowed;
	pointer-events: none;
}

.vod-hero-nav {
	width: 3rem;
	height: 3rem;
	background: rgba(0, 0, 0, 0.45);
}

/* ── Poster cards ── */
.vod-card img[data-src] {
	opacity: 0.7;
	transition: opacity 0.4s ease;
}

.vod-card img.loaded {
	opacity: 1;
}

/* ── Fade-in animations (Motion One fallback) ── */
[data-vod-animate] {
	opacity: 0;
	transform: translateY(20px);
}

[data-vod-animate].vod-visible {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-vod-section] {
	opacity: 0;
	transform: translateY(28px);
}

[data-vod-section].vod-visible {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Row sections ── */
.vod-row-section:nth-child(even) {
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
}

/* ── Line clamp ── */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Marquee ── */
@keyframes streamit-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.streamit-marquee {
	display: inline-block;
	animation: streamit-marquee 30s linear infinite;
	padding-left: 100%;
}

/* ── Scroll top ── */
#streamit-scroll-top.flex {
	display: flex;
}

#streamit-scroll-top.hidden {
	display: none;
}

/* ── Search dropdown (header) ── */
#resfind {
	z-index: 60;
}

#resfind.hidden {
	display: none;
}

.vod-search-dropdown {
	background: rgba(15, 15, 15, 0.96);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 1rem;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
	overflow: hidden;
}

.vod-search-dropdown-status {
	padding: 1rem 1.25rem;
	font-size: 0.875rem;
	color: #a3a3a3;
	text-align: center;
}

.vod-search-suggest-list {
	list-style: none;
	margin: 0;
	padding: 0.375rem;
	max-height: 22rem;
	overflow-y: auto;
}

.vod-search-suggest-item + .vod-search-suggest-item {
	margin-top: 0.125rem;
}

.vod-search-suggest-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.75rem;
	border-radius: 0.625rem;
	text-decoration: none;
	color: #e5e5e5;
	transition: background 0.2s ease, color 0.2s ease;
}

.vod-search-suggest-link:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--vod-accent);
}

.vod-search-suggest-thumb {
	flex-shrink: 0;
	width: 2.5rem;
	height: 3.75rem;
	object-fit: cover;
	border-radius: 0.375rem;
	background: #171717;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.vod-search-suggest-meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.vod-search-suggest-title {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vod-search-suggest-quality {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--vod-accent);
}

.vod-search-more {
	display: block;
	padding: 0.875rem 1rem;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(135deg, var(--vod-primary) 0%, var(--vod-primary-mid) 100%);
	border-top: 1px solid var(--vod-border);
	transition: filter 0.2s ease;
}

.vod-search-more:hover {
	filter: brightness(1.08);
}

/* ── Search page ── */
body.vod-search {
	background-color: var(--vod-bg);
}

body.vod-search .vod-main-content {
	padding-top: calc(4rem + 1.75rem);
}

@media (min-width: 1024px) {
	body.vod-search .vod-main-content {
		padding-top: calc(4.5rem + 2rem);
	}
}

body.vod-search.vod-has-mssg .vod-main-content {
	padding-top: calc(4rem + 2.25rem + 1.75rem);
}

@media (min-width: 1024px) {
	body.vod-search.vod-has-mssg .vod-main-content {
		padding-top: calc(4.5rem + 2.25rem + 2rem);
	}
}

body.vod-search #streamit-header {
	background: var(--vod-header);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--vod-border);
}

.vod-search-label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #737373;
}

.vod-search-select,
.vod-search-input {
	width: 100%;
	border-radius: 0.625rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	padding: 0.75rem 0.875rem;
	font-size: 0.875rem;
	color: #fafafa;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.vod-search-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23737373' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	padding-right: 2.25rem;
}

.vod-search-select:focus,
.vod-search-input:focus {
	outline: none;
	border-color: rgba(var(--vod-accent-rgb), 0.45);
	background: rgba(255, 255, 255, 0.07);
	box-shadow: 0 0 0 3px rgba(var(--vod-accent-rgb), 0.12);
}

.vod-search-select option {
	background: #171717;
	color: #fafafa;
}

.vod-search-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vod-search-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.625rem;
	border-radius: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.04);
	font-size: 0.8125rem;
	font-weight: 600;
	color: #d4d4d4;
	cursor: pointer;
	transition: all 0.2s ease;
}

.vod-search-page:hover {
	border-color: rgba(var(--vod-accent-rgb), 0.35);
	color: var(--vod-accent);
	background: rgba(var(--vod-accent-rgb), 0.08);
}

.vod-search-page.is-active {
	border-color: rgba(var(--vod-accent-rgb), 0.45);
	background: rgba(var(--vod-accent-rgb), 0.15);
	color: var(--vod-accent);
}

.vod-search-page-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2.25rem;
	color: #525252;
	font-size: 0.875rem;
}

.vod-search-loading {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vod-search-loading-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.72);
	backdrop-filter: blur(2px);
}

.vod-search-spinner {
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	border: 2px solid rgba(255, 255, 255, 0.12);
	border-top-color: var(--vod-accent);
	animation: vodSearchSpin 0.8s linear infinite;
}

@keyframes vodSearchSpin {
	to { transform: rotate(360deg); }
}

.vod-input-search::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

#btncfind.hidden {
	display: none;
}


/* ── Embla base ── */
.embla__viewport {
	-webkit-overflow-scrolling: touch;
}

.embla__container {
	backface-visibility: hidden;
}

/* ── Category tiles ── */
.vod-category-tile {
	will-change: transform;
}

/* ── Body scroll ── */
html {
	scroll-behavior: smooth;
}

body.vod-home {
	background-color: var(--vod-bg);
}

/* Contenedor centrado (index + header + footer alineados) */
.vod-page-container {
	width: 100%;
	max-width: 84rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* Hero a ancho completo; texto alineado al contenedor inferior */
.vod-hero--full {
	border-radius: 0;
}

/* Embla hero: evitar que asome el slide siguiente por el borde derecho */
.vod-hero-embla,
.vod-hero-embla .embla__viewport {
	overflow: hidden;
	width: 100%;
}

.vod-hero-embla .embla__container {
	touch-action: pan-y pinch-zoom;
}

.vod-hero-embla .embla__slide {
	flex: 0 0 100%;
	min-width: 100%;
	width: 100%;
	max-width: 100%;
}

.vod-hero::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(6rem, 8vw);
	background: linear-gradient(to left, var(--vod-hero-edge) 0%, transparent 100%);
	z-index: 15;
	pointer-events: none;
}

@media (min-width: 640px) {
	.vod-page-container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.vod-page-container {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.vod-home-shell {
	display: flex;
	flex-direction: column;
	gap: 0;
}

body.vod-home .vod-row-section:nth-child(even) {
	background: transparent;
}

/* ── Ficha / detalle ── */
body.vod-detail {
	background-color: var(--vod-bg);
}

/* Header fijo (4rem) + respiro antes del breadcrumb */
body.vod-detail .vod-main-content {
	padding-top: calc(4rem + 1.75rem);
}

@media (min-width: 1024px) {
	body.vod-detail .vod-main-content {
		padding-top: calc(4.5rem + 2rem);
	}
}

/* Banner marquee bajo el header (+ ~2.25rem) */
body.vod-detail.vod-has-mssg .vod-main-content {
	padding-top: calc(4rem + 2.25rem + 1.75rem);
}

@media (min-width: 1024px) {
	body.vod-detail.vod-has-mssg .vod-main-content {
		padding-top: calc(4.5rem + 2.25rem + 2rem);
	}
}

body.vod-detail .vod-breadcrumb {
	margin-top: 0;
}

body.vod-detail #streamit-header {
	background: var(--vod-header);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--vod-border);
}

body.vod-detail #streamit-header.streamit-header-over-hero {
	background: var(--vod-header);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.vod-detail-card {
	background: linear-gradient(145deg, var(--vod-surface-solid) 0%, var(--vod-bg) 100%);
}

.vod-scrollbar {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.vod-scrollbar::-webkit-scrollbar {
	width: 4px;
}

.vod-scrollbar::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 4px;
}

/* ── Legacy pages using streamit header on light body ── */
body.layout {
	background: #0a0a0a !important;
	color: #fafafa !important;
}

body.layout .container {
	max-width: 1920px;
}

@media (max-width: 767px) {
	.vod-embla-btn {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-vod-animate],
	[data-vod-section],
	.vod-hero-content-animate,
	.vod-card,
	.streamit-marquee {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ══════════════════════════════════════════
   LIGHT THEME — overrides de utilidades
   ══════════════════════════════════════════ */
html.vod-theme-light .text-white { color: #171717 !important; }
html.vod-theme-light .text-neutral-100 { color: #262626 !important; }
html.vod-theme-light .text-neutral-200 { color: #404040 !important; }
html.vod-theme-light .text-neutral-300 { color: #525252 !important; }
html.vod-theme-light .text-neutral-400 { color: #737373 !important; }
html.vod-theme-light .text-neutral-500 { color: #737373 !important; }
html.vod-theme-light .text-neutral-600 { color: #a3a3a3 !important; }
html.vod-theme-light .text-neutral-700 { color: #d4d4d4 !important; }

html.vod-theme-light .bg-neutral-950,
html.vod-theme-light .bg-neutral-900 { background-color: var(--vod-bg-soft) !important; }
html.vod-theme-light .bg-neutral-900\/80 { background-color: rgba(245, 247, 250, 0.95) !important; }
html.vod-theme-light .bg-black,
html.vod-theme-light footer.bg-black { background-color: var(--vod-footer-bg) !important; }
html.vod-theme-light .bg-black\/40 { background-color: rgba(245, 247, 250, 0.9) !important; }
html.vod-theme-light .bg-white\/5 { background-color: rgba(0, 0, 0, 0.04) !important; }
html.vod-theme-light .hover\:bg-white\/5:hover,
html.vod-theme-light .hover\:bg-white\/10:hover { background-color: rgba(0, 0, 0, 0.06) !important; }
html.vod-theme-light .hover\:bg-white\/15:hover { background-color: rgba(0, 0, 0, 0.08) !important; }

html.vod-theme-light .ring-white\/5 { --tw-ring-color: rgba(0, 0, 0, 0.06) !important; }
html.vod-theme-light .ring-white\/10 { --tw-ring-color: rgba(0, 0, 0, 0.1) !important; }
html.vod-theme-light .border-white\/5 { border-color: rgba(0, 0, 0, 0.06) !important; }
html.vod-theme-light .border-white\/10 { border-color: rgba(0, 0, 0, 0.1) !important; }

/* Header light: fondo sólido (sin fade al hero oscuro) */
html.vod-theme-light #streamit-header,
html.vod-theme-light #streamit-header.streamit-header-glass,
html.vod-theme-light #streamit-header.streamit-header-over-hero,
html.vod-theme-light #streamit-header.streamit-header-over-hero:not(.streamit-header-solid),
html.vod-theme-light #streamit-header.streamit-header-solid {
	background: #ffffff !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ── Header navigation ── */
#streamit-header .vod-header-nav-link {
	color: #d4d4d4;
	white-space: nowrap;
}
#streamit-header .vod-header-nav-link:hover,
#streamit-header .group\/nav:hover > .vod-header-nav-link,
#streamit-header .group\/nav:focus-within > .vod-header-nav-link {
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.05);
}
#streamit-header .vod-header-dropdown-link {
	color: #a3a3a3;
}
#streamit-header .vod-header-dropdown-link:hover {
	color: var(--vod-accent);
	background-color: rgba(255, 255, 255, 0.05);
}
#streamit-header .vod-header-mobile-link {
	color: #a3a3a3;
}
#streamit-header .vod-header-mobile-link:hover {
	color: var(--vod-accent);
}
#streamit-header .vod-header-dropdown {
	background: var(--vod-surface-solid);
	border: 1px solid var(--vod-border);
}

html.vod-theme-light #streamit-header .vod-header-nav-link {
	color: var(--vod-header-link) !important;
}
html.vod-theme-light #streamit-header .vod-header-nav-link:hover,
html.vod-theme-light #streamit-header .group\/nav:hover > .vod-header-nav-link,
html.vod-theme-light #streamit-header .group\/nav:focus-within > .vod-header-nav-link {
	color: var(--vod-header-link-hover) !important;
	background-color: rgba(33, 152, 255, 0.1) !important;
}
html.vod-theme-light #streamit-header .vod-header-dropdown-link {
	color: #525252 !important;
}
html.vod-theme-light #streamit-header .vod-header-dropdown-link:hover {
	color: var(--vod-accent) !important;
	background-color: rgba(33, 152, 255, 0.08) !important;
}
html.vod-theme-light #streamit-header .vod-header-mobile-link {
	color: #525252 !important;
}
html.vod-theme-light #streamit-header .vod-header-mobile-link:hover {
	color: var(--vod-accent) !important;
}
html.vod-theme-light #streamit-header .vod-header-dropdown {
	background: #ffffff !important;
	border-color: rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

html.vod-theme-light #streamit-mobile-menu a.vod-header-mobile-title { color: #171717 !important; }
html.vod-theme-light #streamit-menu-btn {
	color: #374151 !important;
	background: #f3f4f6 !important;
	border: 1px solid rgba(0, 0, 0, 0.08);
}

html.vod-theme-light #streamit-header .vod-input-search,
html.vod-theme-light #streamit-mobile-menu .vod-input-search {
	color: #171717 !important;
	background: var(--vod-header-search-bg) !important;
	border-color: var(--vod-header-search-border) !important;
}
html.vod-theme-light #streamit-header .vod-input-search::placeholder,
html.vod-theme-light #streamit-mobile-menu .vod-input-search::placeholder {
	color: #9ca3af !important;
}
html.vod-theme-light #streamit-header .vod-input-search:focus,
html.vod-theme-light #streamit-mobile-menu .vod-input-search:focus {
	background: #ffffff !important;
	border-color: rgba(33, 152, 255, 0.45) !important;
	box-shadow: 0 0 0 3px rgba(33, 152, 255, 0.12) !important;
}

html.vod-theme-light #streamit-header .vod-theme-toggle {
	background: #f3f4f6;
	border-color: rgba(0, 0, 0, 0.1);
	color: #525252;
}

html.vod-theme-light #streamit-mobile-menu {
	background: #ffffff !important;
	border-top-color: rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1) !important;
}

html.vod-theme-light .vod-card .bg-neutral-900 { background-color: #eef1f5 !important; }
html.vod-theme-light .vod-card h3.text-neutral-400 { color: #737373 !important; }
html.vod-theme-light .vod-card:hover h3.hover\:text-neutral-100,
html.vod-theme-light .vod-card.group:hover h3 { color: #171717 !important; }
html.vod-theme-light .vod-category-tile .group-hover\:text-white { color: #171717 !important; }
html.vod-theme-light .vod-category-tile .group-hover\:bg-vod-neon { background-color: var(--vod-accent) !important; color: #fff !important; }

html.vod-theme-light .vod-search-dropdown {
	background: rgba(255, 255, 255, 0.98);
	border-color: rgba(0, 0, 0, 0.08);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
html.vod-theme-light .vod-search-suggest-link { color: #262626; }
html.vod-theme-light .vod-search-suggest-link:hover { background: rgba(0, 0, 0, 0.04); color: var(--vod-accent); }
html.vod-theme-light .vod-search-suggest-thumb { background: #e5e7eb; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
html.vod-theme-light .vod-search-select,
html.vod-theme-light .vod-search-input {
	background: #fff;
	border-color: rgba(0, 0, 0, 0.12);
	color: #171717;
}
html.vod-theme-light .vod-search-select option { background: #fff; color: #171717; }
html.vod-theme-light .vod-search-page {
	background: #fff;
	border-color: rgba(0, 0, 0, 0.1);
	color: #525252;
}
html.vod-theme-light .vod-search-loading-backdrop { background: rgba(255, 255, 255, 0.75); }

html.vod-theme-light .vod-embla-btn {
	background: rgba(255, 255, 255, 0.95);
	border-color: rgba(0, 0, 0, 0.1);
	color: #404040;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
html.vod-theme-light .vod-hero-nav { background: rgba(255, 255, 255, 0.85); }

/* Hero: mantiene look cinematográfico; solo ajusta texto sobre imagen */
html.vod-theme-light .vod-hero h1,
html.vod-theme-light .vod-hero .text-white { color: #fff !important; }
html.vod-theme-light .vod-hero .text-neutral-400 { color: #e5e5e5 !important; }
html.vod-theme-light .vod-hero::after {
	background: linear-gradient(to left, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
}

html.vod-theme-light footer .text-neutral-500,
html.vod-theme-light footer .text-neutral-600,
html.vod-theme-light footer .text-neutral-700 { color: #737373 !important; }
html.vod-theme-light footer .border-white\/5 { border-color: rgba(0, 0, 0, 0.08) !important; }

html.vod-theme-light .vod-btn-glass { color: #171717; }
html.vod-theme-light .vod-btn-glass.text-white { color: #171717 !important; }
html.vod-theme-light .vod-hero .vod-btn-glass { color: #fff !important; }

html.vod-theme-light body.layout {
	background: #fff !important;
	color: #171717 !important;
}