/* ==========================================================================
   Pornodingue — rediseño oscuro sobre VTube
   Se carga después de theme.min.css y custom.css (functions.php del child).

   Notas del modelo del tema, que aquí se respeta en vez de pelearse con él:
   - .video-block a.thumb  -> height:0 + padding-bottom:56.25% (no usar aspect-ratio)
   - .video-img            -> position:absolute; z-index:50; opacity:0 hasta .loaded
   - .video-preview        -> z-index:10 (debajo de la imagen, que se desvanece)
   - .video-debounce-bar   -> z-index:200
   Cambiar esos z-index rompe la previsualización al pasar el ratón.

   Paleta tomada del propio logo: magenta #EF3EF1.
   ========================================================================== */

:root {
	--pd-fondo:        #0a0a0f;
	--pd-fondo-2:      #101017;
	--pd-superficie:   #15151e;
	--pd-superficie-2: #1c1c27;
	--pd-borde:        #262632;
	--pd-borde-claro:  #35353f;
	--pd-texto:        #f0f0f5;
	--pd-apagado:      #9d9dae;
	--pd-tenue:        #70707f;
	--pd-acento:       #ef3ef1;
	--pd-acento-2:     #b91ec9;
	--pd-acento-suave: rgba(239, 62, 241, .14);
	--pd-radio:        0px;
	--pd-radio-sm:     0px;
	--pd-sombra:       0 1px 0 rgba(255, 255, 255, .04);
	--pd-tr:           .18s cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================== 1. Base == */

html { scroll-behavior: smooth; }

body {
	background: var(--pd-fondo) !important;
	color: var(--pd-texto) !important;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
}

/* Halo magenta muy tenue arriba: evita que el negro quede plano. */
body::before {
	content: "";
	position: fixed;
	inset: 0 0 auto 0;
	height: 460px;
	background: linear-gradient(to bottom, rgba(239, 62, 241, .06), transparent);
	pointer-events: none;
	z-index: 0;
}

.site, .wrapper { position: relative; z-index: 1; background: transparent !important; }

h1, h2, h3, h4, h5 { color: var(--pd-texto); font-weight: 800; letter-spacing: -.01em; }
p { color: var(--pd-apagado); }

a { color: var(--pd-texto); transition: color var(--pd-tr); }
a:hover, a:focus { color: var(--pd-acento); text-decoration: none; }

::selection { background: var(--pd-acento); color: #fff; }

a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 2px solid var(--pd-acento);
	outline-offset: 2px;
	border-radius: 0;
}

* { scrollbar-color: var(--pd-borde-claro) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--pd-fondo); }
*::-webkit-scrollbar-thumb { background: var(--pd-borde-claro); border-radius: 0; border: 2px solid var(--pd-fondo); }
*::-webkit-scrollbar-thumb:hover { background: var(--pd-acento-2); }

/* ========================================================== 2. Cabecera == */

.header-nav {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: rgba(10, 10, 15, .85) !important;
	backdrop-filter: saturate(170%) blur(14px);
	-webkit-backdrop-filter: saturate(170%) blur(14px);
	border-bottom: 0;
	padding: 13px 0;
}

.header-nav .container { gap: 20px; }
.header-nav .logo-search { flex: 1 1 auto; min-width: 0; gap: 20px; }
.header-nav .logo { flex: 0 0 auto; }

.logo-img img, .header-nav .logo img {
	height: 34px;
	width: auto;
	display: block;
	transition: transform var(--pd-tr), filter var(--pd-tr);
}
.logo-img:hover img { transform: translateY(-1px); filter: drop-shadow(0 0 16px rgba(239, 62, 241, .6)); }

/* Buscador: la pastilla es el propio formulario, con input y botón en flujo.
   (El tema le pone float:left y anchos en % al input; posicionar el botón en
   absoluto se descolocaba, así que aquí no se usa position en ninguno.) */
.header-search {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	max-width: 520px;
	height: auto !important;
	padding-left: 0 !important;
}
.header-search form, .header-search .search-form {
	display: flex !important;
	align-items: center;
	justify-content: flex-start !important;
	width: 100%;
	height: 44px !important;
	background: var(--pd-superficie);
	border: 1px solid var(--pd-borde);
	border-radius: 0;
	overflow: hidden;
	padding: 0 4px 0 0;
	transition: border-color var(--pd-tr), box-shadow var(--pd-tr), background var(--pd-tr);
}
.header-search form:focus-within {
	background: var(--pd-superficie-2);
	border-color: var(--pd-acento);
	box-shadow: 0 0 0 4px var(--pd-acento-suave);
}
.header-search input:not([type="submit"]),
.header-search .search-field,
.header-search .input-group-field {
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
	float: none !important;
	top: 0 !important;
	height: 42px !important;
	line-height: 42px !important;
	margin: 0 !important;
	padding: 0 8px 0 20px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0!important;
	box-shadow: none !important;
	color: var(--pd-texto) !important;
	font-size: 14px;
	outline: none !important;
}
.header-search input::placeholder { color: var(--pd-tenue); }

.header-search button,
.header-search button[type="submit"],
.header-search #searchsubmit,
.header-search .search-submit {
	position: static !important;
	flex: 0 0 auto;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0!important;
	background: var(--pd-acento) !important;
	color: #fff !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	cursor: pointer;
	transition: background var(--pd-tr), transform var(--pd-tr);
}
.header-search button:hover, .header-search #searchsubmit:hover {
	background: var(--pd-acento-2) !important;
	transform: scale(1.06);
}
.header-search #searchsubmit i, .header-search button i {
	position: static !important;
	top: 0 !important;
	color: #fff !important;
	font-size: 14px !important;
}

/* Botones de sesión. */
.membership .btn, .membership a.btn-primary, .membership .login-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 18px;
	border-radius: 0!important;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	transition: all var(--pd-tr);
}
.membership .btn-primary {
	background: var(--pd-acento) !important;
	border-color: var(--pd-acento) !important;
	color: #fff !important;
}
.membership .btn-primary:hover {
	background: var(--pd-acento-2) !important;
	transform: translateY(-1px);
}
.membership .login-link {
	background: transparent !important;
	border: 1px solid var(--pd-borde-claro) !important;
	color: var(--pd-apagado) !important;
}
.membership .login-link:hover { border-color: var(--pd-acento) !important; color: var(--pd-texto) !important; }

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { background-color: var(--pd-texto) !important; }

/* ======================================================= 3. Navegación == */

.navbar, .navbar-dark {
	background: transparent !important;
	border-bottom: 1px solid var(--pd-borde);
	padding: 0;
}
.navbar .container { padding-top: 7px; padding-bottom: 7px; }
.navbar-nav { gap: 4px; }

.navbar .navbar-nav li a,
.navbar-dark .navbar-nav .nav-link,
.navbar-nav .nav-item > a {
	position: relative;
	border: 0 !important;
	padding: 13px 16px !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--pd-apagado) !important;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	transition: color var(--pd-tr);
}
/* El indicador es una línea, no una pastilla: más limpio y más actual. */
.navbar .navbar-nav li a::after,
.navbar-dark .navbar-nav .nav-link::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 0;
	height: 2px;
	background: var(--pd-acento);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--pd-tr);
}
.navbar .navbar-nav li a:hover,
.navbar-dark .navbar-nav .nav-link:hover { color: var(--pd-texto) !important; background: transparent !important; }
.navbar .navbar-nav li a:hover::after { transform: scaleX(1); }

.navbar .navbar-nav li.current-menu-item > a,
.navbar .navbar-nav li.active > a,
.navbar-dark .navbar-nav .active > .nav-link {
	background: transparent !important;
	background-image: none !important;
	color: #fff !important;
	box-shadow: none;
}
.navbar .navbar-nav li.current-menu-item > a::after,
.navbar .navbar-nav li.active > a::after { transform: scaleX(1); }

/* ==================================================== 4. Rejilla y ficha == */

.container.home, .video-loop, .cat-wrapper { padding-top: 24px; }

/* El tema usa .row.no-gutters: se le devuelve el aire. */
.video-loop .row.no-gutters,
.cat-wrapper .row.no-gutters { margin-left: -8px; margin-right: -8px; }
.video-loop .row.no-gutters > [class*="col-"],
.cat-wrapper .row.no-gutters > [class*="col-"] { padding: 8px; }

.video-block {
	position: relative;
	margin: 0 !important;
	background: transparent;
	border: 0;
	transition: none;
}
/* Sin caja: al pasar el ratón manda la imagen, marcada con un filo magenta. */
.video-block:hover { transform: none; box-shadow: none; }
.video-block a.thumb::after,
.video-block a.thumb::before { pointer-events: none; }
.video-block a.thumb {
	outline: 0 solid var(--pd-acento);
	outline-offset: -2px;
	transition: outline-width .12s linear;
}
.video-block:hover a.thumb { outline-width: 2px; }

/* La miniatura mantiene el modelo del tema (height:0 + padding-bottom). */
.video-block a.thumb {
	background-color: var(--pd-fondo-2) !important;
	border-radius: 0;
}

/* La imagen llenaba solo 1px de alto: el tema le da min-width pero no altura. */
.video-block .video-img {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .3s ease-in-out, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.video-block:hover .video-img { transform: scale(1.05); }
.video-block .no-thumb { background-color: var(--pd-superficie-2) !important; }

/* Degradado inferior para que duración y HD se lean sobre cualquier imagen. */
.video-block a.thumb::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 58px;
	background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
	z-index: 60;
	pointer-events: none;
	opacity: .9;
	transition: opacity var(--pd-tr);
}
.video-block:hover a.thumb::after { opacity: .35; }

.video-block .video-debounce-bar { background-color: var(--pd-acento) !important; }

/* Título */
.video-block a.infos { margin-top: 0 !important; padding: 10px 2px 14px; display: block; }
.video-block a.infos span.title {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: none !important;
	height: auto;
	min-height: 2.75em;
	font-size: 13.5px !important;
	line-height: 1.38 !important;
	font-weight: 600 !important;
	text-align: left !important;
	color: var(--pd-texto) !important;
	transition: color var(--pd-tr);
}
.video-block:hover a.infos span.title { color: var(--pd-acento) !important; }

/* Fila de datos: sus tres valores se colocan encima de la miniatura.
   Truco: el contenedor se estira con padding-bottom:56.25%, que se calcula
   sobre el ANCHO (top/bottom en % se calcularían sobre la altura de toda la
   tarjeta, y los badges acababan flotando a media altura). Así su caja mide
   exactamente lo que la miniatura y los badges se pegan a sus esquinas. */
.video-block:not(.video-block-cat) .video-datas {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	display: block !important;
	height: 0 !important;
	padding: 0 0 56.25% 0 !important;
	margin: 0 !important;
	line-height: 0 !important;
	font-size: 0 !important;
	z-index: 70;
	pointer-events: none; /* para no robarle el hover a la miniatura */
}
.video-block:not(.video-block-cat) .video-datas > span {
	position: absolute;
	font-size: 11px !important;
	font-weight: 700;
	line-height: 1.1;
	padding: 3px 7px !important;
	background: rgba(0, 0, 0, .78) !important;
	color: #fff !important;
	border-radius: 0 !important;
	backdrop-filter: blur(3px);
	white-space: nowrap;
}
.video-block:not(.video-block-cat) .video-datas .duration { right: 6px; bottom: 6px; }
.video-block:not(.video-block-cat) .video-datas .views-number {
	left: 6px;
	bottom: 6px;
	background: rgba(0, 0, 0, .62) !important;
	font-weight: 600;
	color: #e8e8ee !important;
}
.video-block:not(.video-block-cat) .video-datas .hd-video {
	left: 6px;
	top: 6px;
	bottom: auto;
	background: var(--pd-acento) !important;
	letter-spacing: .04em;
}
.video-block:not(.video-block-cat) .video-datas .rating { display: none; }

/* Reproducir: un triángulo, sin botón redondo. */
.video-block a.thumb::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	margin: -15px 0 0 -9px;
	border-style: solid;
	border-width: 15px 0 15px 24px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .8));
	opacity: 0;
	transition: opacity var(--pd-tr);
	z-index: 65;
}
.video-block:hover a.thumb::before { opacity: .95; }
.video-block.video-with-trailer:hover a.thumb::before { opacity: 0; transition-delay: .35s; }

/* Tarjetas de categoría: el contador va debajo del nombre, en texto plano. */
.video-block-cat .video-datas {
	position: static !important;
	display: block !important;
	height: auto !important;
	padding: 2px 0 0 !important;
	margin: 0 !important;
	background: transparent !important;
	color: var(--pd-tenue) !important;
	font-size: 11.5px !important;
	font-weight: 600;
	line-height: 1.3 !important;
	text-align: left !important;
	z-index: auto;
	backdrop-filter: none;
	min-width: 0 !important;
	top: auto !important;
	white-space: normal;
}
.video-block-cat a.infos { padding: 10px 2px 14px !important; }

/* Tarjetas de categoría */
.video-block.video-block-cat a.infos span.title {
	font-size: 13px !important;
	font-weight: 700 !important;
	float: none !important;
	height: auto !important;
	padding: 0 !important;
	text-align: left !important;
}

/* ================================================= 5. Títulos y filtros == */

.widget-title, .container.home h2, h1.page-title, .entry-title, .video-title h1, .cat-title {
	font-size: 19px;
	font-weight: 800;
	color: var(--pd-texto);
	margin: 6px 0 16px;
	padding-left: 13px;
	border-left: 4px solid var(--pd-acento);
	line-height: 1.3;
}

#filters, .filters-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
#filters .filters-options span a, .filters-options span a {
	display: inline-block;
	padding: 7px 15px !important;
	background: var(--pd-superficie) !important;
	border: 1px solid var(--pd-borde) !important;
	border-radius: 0!important;
	color: var(--pd-apagado) !important;
	font-size: 12.5px;
	font-weight: 600;
}
#filters .filters-options span a:hover, .filters-options span a:hover {
	border-color: var(--pd-acento) !important;
	color: var(--pd-texto) !important;
	background: var(--pd-superficie-2) !important;
}

/* =============================================== 6. Ficha del vídeo ====== */

.single-video-player { padding-top: 22px; }

.video-title h1, .video-title h2 {
	font-size: 23px;
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	color: var(--pd-texto);
}

.video-wrapper, .responsive-player, .video-player {
	background: #000 !important;
	border-radius: 0;
	overflow: hidden;
	border: 1px solid var(--pd-borde);
	box-shadow: none;
}
.responsive-player iframe, .video-player iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Botón de afiliado bajo el reproductor: solo aparece cuando el vídeo tiene
   'tracking_url'. Es un CTA de pago, así que va a todo color. */
.video-tracking {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 14px 0 0 !important;
	text-align: center;
}
.video-tracking a {
	display: block;
	padding: 15px 20px;
	background: linear-gradient(180deg, var(--pd-acento), var(--pd-acento-2));
	color: #fff !important;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
	transition: filter var(--pd-tr);
}
.video-tracking a:hover { filter: brightness(1.12); color: #fff !important; }
.video-tracking .text { color: #fff !important; }

/* Barra de acciones bajo el reproductor */
.videos-infos, .video-tracking, .video-actions-header, .video-actions-content {
	background: var(--pd-superficie) !important;
	border: 1px solid var(--pd-borde);
	border-radius: 0;
	color: var(--pd-apagado) !important;
	margin-top: 14px;
	padding: 14px 16px;
}
.video-actions-content { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.video-actions-header { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.videos-infos .views-number { color: var(--pd-texto) !important; font-weight: 600; }
.post-like a, .btn-grey, .btn-black {
	background: var(--pd-superficie-2) !important;
	border: 1px solid var(--pd-borde) !important;
	border-radius: 0!important;
	color: var(--pd-apagado) !important;
	padding: 7px 15px !important;
	font-size: 13px;
	font-weight: 600;
	transition: all var(--pd-tr);
}
.post-like a:hover, .btn-grey:hover, .btn-black:hover {
	border-color: var(--pd-acento) !important;
	color: var(--pd-texto) !important;
	background: var(--pd-acento-suave) !important;
}

/* Barra única bajo el reproductor: vistas, votos, pestañas y, desde el child,
   también las categorías (antes iban en su propia fila bajo el título). */
.videos-infos {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin-top: 14px !important;
}
.videos-infos #video-views {
	flex: 0 0 auto;
	color: var(--pd-apagado) !important;
	font-size: 13px;
}
.videos-infos #video-views .views-number { font-size: 15px; font-weight: 800; color: var(--pd-texto) !important; }
.videos-infos #rating { flex: 0 0 auto; }

.video-actions-header {
	display: flex;
	gap: 6px;
	flex: 0 0 auto;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* Los botones venían en blanco, fuera del diseño. */
.video-actions-header .tab-link,
.btn-grey-light {
	background: var(--pd-superficie-2) !important;
	border: 1px solid var(--pd-borde) !important;
	color: var(--pd-apagado) !important;
	padding: 7px 14px !important;
	font-size: 12.5px;
	font-weight: 600;
	border-radius: 0 !important;
	transition: all var(--pd-tr);
}
.video-actions-header .tab-link:hover,
.btn-grey-light:hover {
	background: var(--pd-acento-suave) !important;
	border-color: var(--pd-acento) !important;
	color: var(--pd-texto) !important;
}
.video-actions-header .tab-link.active {
	background: var(--pd-acento) !important;
	border-color: var(--pd-acento) !important;
	color: #fff !important;
}

/* Las categorías, ya dentro de la barra: chips pequeños que envuelven. */
.videos-infos .video-cat-tag {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 !important;
	flex: 1 1 auto;
	min-width: 0;
}
.videos-infos .video-cat-tag a { padding: 5px 11px !important; font-size: 12px; }
.videos-infos .video-cat-tag a span { opacity: .55; font-size: 11px; margin-left: 3px; }
/* Las actrices se distinguen con el color de la casa. */
.videos-infos .video-cat-tag a.btn-primary {
	background: var(--pd-acento-suave) !important;
	border-color: var(--pd-acento) !important;
	color: var(--pd-texto) !important;
}

/* El desplegable de etiquetas venía con fondo blanco dentro de la barra. */
.more-tags, .videos-infos .more-tags {
	background: transparent !important;
	border: 0 !important;
	color: var(--pd-apagado) !important;
	padding: 0 !important;
	flex-basis: 100%;
}
.more-tags a, .more-tags button, .more-tags span {
	background: transparent !important;
	color: var(--pd-tenue) !important;
	font-size: 12px;
}
.more-tags a:hover { color: var(--pd-acento) !important; }

/* Los vídeos relacionados iban pegados a la descripción. */
.related-videos {
	margin-top: 34px !important;
	padding-top: 22px;
	border-top: 1px solid var(--pd-borde);
}
.related-videos .widget-title, .related-videos h2, .related-videos h3 { margin-bottom: 14px; }

/* Categorías y etiquetas de la ficha */
.video-cat-tag { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 4px; }
.video-cat-tag a, .tags a, .categories a, .post-categories a, .tag-items .tag-item a, .video-tags a {
	display: inline-block;
	padding: 6px 14px !important;
	background: var(--pd-superficie-2) !important;
	border: 1px solid var(--pd-borde) !important;
	border-radius: 0!important;
	color: var(--pd-apagado) !important;
	font-size: 12.5px;
	font-weight: 600;
	transition: all var(--pd-tr);
}
.video-cat-tag a:hover, .tags a:hover, .categories a:hover, .post-categories a:hover, .tag-items .tag-item a:hover, .video-tags a:hover {
	background: var(--pd-acento-suave) !important;
	border-color: var(--pd-acento) !important;
	color: var(--pd-texto) !important;
}

/* Descripción */
.video-description, .entry-content, .tab-content {
	color: var(--pd-apagado) !important;
	line-height: 1.7;
	font-size: 14.5px;
}
.tab-content { background: transparent !important; }

/* ================================================= 7. Widgets y laterales */

.sidebar, .widget-area { background: transparent !important; }
.widget, .sidebar .widget {
	background: var(--pd-superficie) !important;
	border: 1px solid var(--pd-borde);
	border-radius: 0;
	padding: 16px;
	margin-bottom: 18px;
	color: var(--pd-apagado);
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 7px 0; border-bottom: 1px solid var(--pd-borde); }
.widget li:last-child { border-bottom: 0; }

/* ===================================================== 8. Paginación ===== */

.pagination .page-numbers, .page-numbers, .nav-links a, .nav-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 13px;
	margin: 0 3px 6px;
	background: var(--pd-superficie) !important;
	border: 1px solid var(--pd-borde) !important;
	border-radius: 0!important;
	color: var(--pd-apagado) !important;
	font-weight: 600;
	font-size: 13.5px;
	transition: all var(--pd-tr);
}
.page-numbers:hover, .nav-links a:hover { border-color: var(--pd-acento) !important; color: var(--pd-texto) !important; }
.page-numbers.current, .nav-links .current {
	background-color: var(--pd-acento) !important;
	background-image: none !important;
	border-color: transparent !important;
	color: #fff !important;
}

/* ============================================================ 9. Pie ==== */

.site-footer {
	margin-top: 46px;
	padding: 32px 0 24px;
	background: var(--pd-fondo-2) !important;
	border-top: 0;
	color: var(--pd-tenue) !important;
	font-size: 13px;
}
.site-footer a { color: var(--pd-apagado) !important; }
.site-footer a:hover { color: var(--pd-acento) !important; }
.site-footer .menu, .footer-menu-container ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	justify-content: center;
	padding: 0;
	margin: 0 0 14px;
	list-style: none;
}
.site-info { text-align: center; color: var(--pd-tenue) !important; font-size: 12px; }

.hero, .happy-section { color: var(--pd-apagado) !important; font-size: 13.5px; line-height: 1.65; }
.hero-text { max-width: 900px; margin: 0 auto; }

/* ============================================ 10. Formularios y modales == */

.modal-content {
	background: var(--pd-superficie) !important;
	border: 1px solid var(--pd-borde) !important;
	border-radius: 0!important;
	color: var(--pd-texto) !important;
}
.modal-header, .modal-footer { border-color: var(--pd-borde) !important; }
.modal-content label { color: var(--pd-apagado); }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select {
	background: var(--pd-fondo-2) !important;
	border: 1px solid var(--pd-borde) !important;
	border-radius: 0!important;
	color: var(--pd-texto) !important;
	padding: 10px 14px;
}
input:focus, textarea:focus, select:focus {
	border-color: var(--pd-acento) !important;
	box-shadow: 0 0 0 3px var(--pd-acento-suave) !important;
	outline: none;
}

.btn, .btn-primary { border-radius: 0!important; font-weight: 600; transition: all var(--pd-tr); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(239, 62, 241, .35); }

/* Tablas y bloques claros que el tema deja en blanco. */
.card, .panel, .alert, .table, .bg-white, .bg-light {
	background: var(--pd-superficie) !important;
	color: var(--pd-texto) !important;
	border-color: var(--pd-borde) !important;
}

/* El eslogan de la cabecera repetía el H1 de la portada y traía una línea
   debajo que no aportaba nada. */
.header-title {
	border: 0 !important;
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pd-apagado) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (max-width: 991.98px) {
	.header-title { display: none !important; }
}

/* ============================== 11. Menú: escritorio y móvil ============= */

/* En escritorio no pinta nada: el tema lo fuerza con .d-block. */
@media (min-width: 768px) {
	.navbar-toggler, .navbar-toggler.d-block, .hamburger { display: none !important; }
	/* Cada menú en su sitio: el de escritorio visible, el del hamburguesa no.
	   (Con .navbar-collapse a secas se mostraban los dos y salía doble fila.) */
	#navbarEscritorio { display: flex !important; }
	#navbarNavDropdown { display: none !important; }
	/* Los botones de sesión sí deben verse. */
	.header-nav .membership.d-none.d-md-block { display: flex !important; align-items: center; gap: 8px; }
}

/* Móvil: el desplegable pasa a ser un panel legible, no una lista suelta. */
@media (max-width: 767.98px) {
	.navbar { border-bottom: 0; }
	#navbarEscritorio { display: none !important; }
	.navbar-toggler, .hamburger {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0 !important;
		margin-right: 4px;
		background: transparent !important;
		border: 0 !important;
		outline: none;
	}
	.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
		background-color: var(--pd-texto) !important;
		height: 2px !important;
		width: 22px !important;
	}
	.navbar-collapse {
		background: var(--pd-fondo-2);
		border-top: 1px solid var(--pd-borde);
		margin: 8px -15px 0;
		padding: 4px 0 8px;
	}
	.navbar-nav { flex-direction: column; gap: 0; margin: 0 !important; }
	.navbar-nav li { border-bottom: 1px solid var(--pd-borde); }
	.navbar-nav li:last-child { border-bottom: 0; }
	.navbar .navbar-nav li a,
	.navbar-dark .navbar-nav .nav-link {
		display: block;
		padding: 15px 18px !important;
		font-size: 13px;
		letter-spacing: .06em;
		text-align: left !important;
	}
	/* El subrayado animado no encaja en vertical: barra lateral en su lugar. */
	.navbar .navbar-nav li a::after,
	.navbar-dark .navbar-nav .nav-link::after { display: none !important; }
	.navbar .navbar-nav li.current-menu-item > a,
	.navbar .navbar-nav li.active > a {
		background: var(--pd-acento-suave) !important;
		color: #fff !important;
		box-shadow: inset 3px 0 0 var(--pd-acento);
	}
}

/* ===================================================== 12. Responsive ==== */

/* El tema fuerza un ancho mínimo de escritorio; en móvil sobra. */
@media (max-width: 991.98px) {
	body { min-width: 0 !important; }
}

@media (max-width: 767.98px) {
	/* Cabecera móvil: hamburguesa a la izquierda, logo centrado y sitio
	   libre a la derecha para el botón de usuario o lo que se quiera poner. */
	.header-nav { padding: 8px 0; }
	.header-nav .container { gap: 0; }
	.header-nav .logo-search {
		width: 100%;
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 0;
	}
	.header-nav .logo {
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
		min-width: 0;
	}
	.logo-img img, .header-nav .logo img { height: 42px; }
	/* Los dos extremos miden lo mismo para que el logo quede centrado de verdad. */
	.navbar-toggler, .hamburger { flex: 0 0 44px; }
	.user-mobile, .d-block.d-md-none.membership { flex: 0 0 44px; text-align: right; }
	.user-mobile a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		color: var(--pd-apagado) !important;
		font-size: 18px;
	}
	.user-mobile a:hover { color: var(--pd-acento) !important; }
	.header-search { margin: 8px 0 0; max-width: none; flex-basis: 100%; }
	.video-loop .row.no-gutters, .cat-wrapper .row.no-gutters { margin-left: -5px; margin-right: -5px; }
	.video-loop .row.no-gutters > [class*="col-"], .cat-wrapper .row.no-gutters > [class*="col-"] { padding: 5px; }
	.video-block { border-radius: 0; }
	.video-block a.infos { padding: 9px 10px 2px; }
	.video-block a.infos span.title { font-size: 12.5px !important; }
	.video-block a.thumb::before { width: 44px; height: 44px; margin: -22px 0 0 -22px; background-size: 22px 22px; }
	.video-title h1, .video-title h2 { font-size: 18px; }
	/* Objetivo táctil del buscador: 36 px se queda corto para el dedo. */
	.header-search form { height: 48px !important; }
	.header-search input:not([type="submit"]) { height: 46px !important; line-height: 46px !important; font-size: 16px; }
	.header-search button, .header-search #searchsubmit { width: 42px !important; height: 42px !important; }
	/* La barra de la ficha, en columna para que quepan las categorías. */
	.videos-infos { gap: 8px; }
	.videos-infos .video-cat-tag { flex-basis: 100%; }
	.navbar-nav { gap: 2px; }
	.navbar .navbar-nav li a { padding: 8px 12px !important; font-size: 11.5px; }
	.videos-infos, .video-tracking, .video-actions-header, .video-actions-content { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	.video-block:hover { transform: none; }
	.video-block:hover .video-img { transform: none; }
}