/* ITNAKED – Vitrina combinada: Tendencias (izquierda) + Top Pornstar (derecha) (ver assets/js/showcase.js) */

/* Cuando la vitrina está activa se ocultan los dos bloques originales (el JS además los elimina del DOM) */
html body .home-trending-area.itn-mix-on { display: block !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
html body .home-trending-area.itn-mix-on > .itnaked-trending-top,
html body .home-trending-area.itn-mix-on > .itnaked-actors-featured { display: none !important; }

/* El bloque de actores original ya no tiene estilos propios: se oculta siempre (showcase.js lee su contenido para armar la vitrina) */
html body .home-trending-area > .itnaked-actors-featured { display: none !important; }

/* Sin borde en los bloques originales */
html body .home-trending-area .itnaked-trending-top,
html body .home-trending-area .itnaked-actors-featured { border: 0 !important; }

.itn-mix {
	--itn-gold: #ffc83d;
	--itn-silver: #c9ced8;
	--itn-bronze: #d98a4a;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 430px;
	gap: 26px;
	padding: 22px;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, .07);
	border-radius: 22px 22px 0 0;
	background: radial-gradient(120% 140% at 0% 0%, rgba(249, 3, 90, .12), rgba(0, 0, 0, 0) 55%), #09090a;
	line-height: 1.3;
}
/* Los íconos son de trazo (stroke): sin relleno. El play y los botones activos sí van rellenos */
html body .itn-mix svg { fill: none; }
html body .itn-mix .itn-sc-cta svg { fill: currentColor; }

.itn-mix-col { min-width: 0; }
/* Orden: videos a la izquierda, actores a la derecha */
.itn-mix-trend { order: 1; }

/* Panel de actores: pegado arriba (toca el borde superior de la vitrina), fondo solo arriba
   (se desvanece hacia abajo) y con el borde izquierdo difuminado para que se funda con el
   negro de la vitrina, sin corte vertical. */
.itn-mix-actors {
	order: 2;
	position: relative;
	isolation: isolate;
	/* recorta arriba/derecha/abajo pero deja que el fondo se extienda hacia la izquierda */
	clip-path: inset(0 0 0 -90px);
	margin-top: -22px;
	padding: 22px 20px 20px;
}
/* Fondo (con máscara): glow rosa arriba, se apaga abajo y a la izquierda */
.itn-mix-actors::after {
	content: "";
	position: absolute;
	z-index: -2;
	top: 0;
	right: 0;
	bottom: 0;
	left: -90px;
	pointer-events: none;
	background:
		radial-gradient(circle at 82% 0%, color-mix(in srgb, var(--main-color, #f9035a) 34%, transparent) 0%, color-mix(in srgb, var(--main-color, #f9035a) 12%, transparent) 26%, transparent 52%),
		linear-gradient(180deg, rgba(23, 9, 18, .95) 0%, rgba(11, 9, 13, .55) 38%, rgba(0, 0, 0, 0) 72%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 60px, #000 150px);
	mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 60px, #000 150px);
}
/* Círculo con glow arriba, detrás de la cabecera */
.itn-mix-actors::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -150px;
	right: -90px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--main-color, #f9035a) 35%, transparent);
	background: radial-gradient(circle, color-mix(in srgb, var(--main-color, #f9035a) 22%, transparent) 0%, transparent 68%);
	box-shadow: 0 0 70px color-mix(in srgb, var(--main-color, #f9035a) 30%, transparent), inset 0 0 50px color-mix(in srgb, var(--main-color, #f9035a) 18%, transparent);
	pointer-events: none;
}

/* Cabeceras clonadas de los bloques originales */
.itn-mix .itnaked-trending-header,
.itn-mix .itnaked-actors-featured-header { padding: 0 0 14px !important; margin: 0 !important; background: none !important; border: 0 !important; }

/* Cabecera del panel de actores: fila a todo el ancho (icono + título/"This week" a la izquierda, "See all" a la derecha) */
.itn-mix .itnaked-actors-featured-header { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box; }
.itn-mix .itnaked-actors-featured-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.itn-mix .itnaked-actors-featured-icon { display: inline-flex; flex: 0 0 auto; color: #fff; }
.itn-mix .itnaked-actors-featured-icon svg { width: 26px; height: 26px; }
.itn-mix .itnaked-actors-featured-title-wrap h2 { margin: 0; padding: 0; color: #fff; font-size: 20px; font-weight: 700; line-height: 1.15; text-transform: none; }
.itn-mix .itnaked-actors-featured-title-wrap span:not(.itnaked-actors-featured-icon) { display: block; margin-top: 2px; color: #a1a1aa; font-size: 13px; line-height: 1.2; }
.itn-mix .itnaked-actors-featured-see-all { margin-left: auto; flex: 0 0 auto; }

/* ---------- Actores ---------- */
.itn-ac-list { display: flex; flex-direction: column; gap: 6px; }
.itn-ac-row {
	display: grid;
	grid-template-columns: 26px 43px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 6px 12px 6px 8px;
	border: 1px solid rgba(255, 255, 255, .05);
	border-radius: 14px;
	background: rgba(255, 255, 255, .03);
	color: #fff;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}
.itn-ac-row:hover { background: rgba(249, 3, 90, .09); border-color: rgba(249, 3, 90, .5); }
.itn-ac-num { color: #6b6b70; font-size: 20px; font-weight: 800; line-height: 1; text-align: center; letter-spacing: -.02em; }
.itn-ac-photo { display: block; width: 43px; height: 43px; overflow: hidden; border-radius: 50%; background: #111; box-shadow: 0 0 0 2px rgba(255, 255, 255, .08); }
.itn-ac-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Podio: oro, plata y bronce (número y borde de la foto) */
.itn-ac-row:nth-child(1) .itn-ac-num { color: var(--itn-gold); }
.itn-ac-row:nth-child(1) .itn-ac-photo { box-shadow: 0 0 0 2px var(--itn-gold); }
.itn-ac-row:nth-child(2) .itn-ac-num { color: var(--itn-silver); }
.itn-ac-row:nth-child(2) .itn-ac-photo { box-shadow: 0 0 0 2px var(--itn-silver); }
.itn-ac-row:nth-child(3) .itn-ac-num { color: var(--itn-bronze); }
.itn-ac-row:nth-child(3) .itn-ac-photo { box-shadow: 0 0 0 2px var(--itn-bronze); }
.itn-ac-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.itn-ac-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 700; color: #fff; }
.itn-ac-sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; color: #8a8a90; }
html body .itn-ac-sub svg.itn-ac-eye { display: inline-block; width: 13px; height: 13px; margin: 0 3px 0 0; vertical-align: -2px; }
.itn-ac-week { display: inline-flex; align-items: center; gap: 5px; color: var(--main-color, #f9035a); font-size: 12.5px; font-weight: 700; }
.itn-ac-week svg { width: 18px; height: 18px; }

/* ---------- Videos: panel destacado (solo el #1), imagen a todo el panel ---------- */
.itn-sc-hero {
	position: relative;
	min-height: 350px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 20px;
	background: #0b0b0d;
	isolation: isolate;
}
.itn-sc-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; background-repeat: no-repeat; }
.itn-sc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgb(0 0 0 / 81%) 0%, rgb(0 0 0 / 66%) 42%, rgb(0 0 0 / 0%) 75%), linear-gradient(0deg, rgb(0 0 0 / 59%) 0%, rgba(0, 0, 0, 0) 45%);
}
.itn-sc-fg {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 12px;
	height: 100%;
	min-height: 350px;
	max-width: 72%;
	padding: 24px 26px;
	box-sizing: border-box;
	text-shadow: none;
}
.itn-sc-tag { color: var(--main-color, #f9035a); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
html body .itn-sc-title {
	margin: 0;
	padding: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	color: #fff;
	font-size: clamp(22px, 2.5vw, 34px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.015em;
	text-transform: none;
	text-shadow: none;
}
.itn-sc-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: #d4d4d8; font-size: 11px; font-weight: 500; text-transform: uppercase; }
.itn-sc-who { display: flex; align-items: center; gap: 8px; color: #e4e4e7; font-size: 13.5px; font-weight: 600; }
.itn-sc-who img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); }
.itn-sc-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; text-shadow: none; }
.itn-sc-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 36px;
	padding: 0 20px;
	border-radius: 100px;
	background: linear-gradient(180deg, #fff 0%, #ffd9e6 100%);
	color: #14070c;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 8px 26px rgba(249, 3, 90, .3);
	transition: transform .15s, filter .15s;
}
.itn-sc-cta:hover { transform: translateY(-1px); filter: brightness(1.04); color: #14070c; }
.itn-sc-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .28) !important;
	border-radius: 50%;
	background: rgba(0, 0, 0, .35) !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.itn-sc-circle:hover { border-color: var(--main-color, #f9035a) !important; background: rgba(249, 3, 90, .2) !important; }
.itn-sc-circle.is-done { border-color: #31d17c !important; color: #31d17c; }
.itn-sc-circle svg { width: 16px; height: 16px; }

/* ---------- Videos: carrusel "Más tendencias" (#2 al #10, de 3 en 3) ---------- */
.itn-cr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 12px; }
html body .itn-cr-title { margin: 0; padding: 0; color: #fff; font-size: 18px; font-weight: 800; line-height: 1.2; text-transform: none; }
.itn-cr-ctrl { display: flex; align-items: center; gap: 8px; }
.itn-cr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .12) !important;
	border-radius: 50%;
	background: rgba(255, 255, 255, .06) !important;
	color: #fff;
	cursor: pointer;
	transition: background .15s, border-color .15s, opacity .15s;
}
.itn-cr-btn:hover:not(:disabled) { background: rgba(249, 3, 90, .15) !important; border-color: var(--main-color, #f9035a) !important; }
.itn-cr-btn:disabled { opacity: .3; cursor: default; }
.itn-cr-btn svg { width: 16px; height: 16px; }
.itn-cr-all {
	display: inline-flex;
	align-items: center;
	height: 32px;
	margin-left: 6px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 100px;
	color: #e4e4e7;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s, background .15s, color .15s;
}
.itn-cr-all:hover { border-color: var(--main-color, #f9035a); background: rgba(249, 3, 90, .1); color: #fff; }

.itn-cr-track {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.itn-cr-track::-webkit-scrollbar { display: none; }
.itn-tc {
	flex: 0 0 calc((100% - 28px) / 3);
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
	scroll-snap-align: start;
	color: #fff;
	text-decoration: none;
}
.itn-tc-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 14px;
	background: #111;
	transition: transform .15s, box-shadow .15s;
}
.itn-tc:hover .itn-tc-thumb { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(249, 3, 90, .25); }
.itn-tc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.itn-tc-dur {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 3px 8px;
	border-radius: 8px;
	background: rgba(0, 0, 0, .75);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
}
.itn-tc-title { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; font-weight: 700; line-height: 1.3; color: #fff; }
.itn-tc-sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: #8a8a90; }

/* ---------- Tablet / móvil ---------- */
@media (max-width: 1100px) {
	.itn-mix { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; padding: 18px; }
	.itn-mix-actors { margin-top: -18px; padding: 36px 16px 16px; }
	.itn-sc-fg { max-width: 88%; }
	/* Tablet: el carrusel muestra 3 tarjetas, más chicas */
	.itn-tc { flex-basis: calc((100% - 28px) / 3); }
	.itn-tc-title { font-size: 12px; }
	.itn-tc-sub { font-size: 11px; }
	.itn-tc-dur { right: 6px; bottom: 6px; padding: 2px 6px; font-size: 10.5px; }
	.itn-tc-thumb { border-radius: 10px; }
}
@media (max-width: 899px) {
	.itn-mix { grid-template-columns: 1fr; padding: 14px 12px; gap: 22px; }
	/* Una columna: el panel de actores es una tarjeta normal, con la lista en 2 columnas */
	.itn-mix-actors { margin-top: 0; padding: 16px 14px; border-radius: 15px; clip-path: none; overflow: hidden; }
	.itn-mix-actors::after {
		left: 0;
		-webkit-mask-image: none;
		mask-image: none;
		background: radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--main-color, #f9035a) 26%, transparent) 0%, transparent 55%), linear-gradient(180deg, #170912 0%, rgba(0, 0, 0, 0) 85%);
	}
	.itn-mix-actors::before { top: -170px; }
	.itn-ac-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
	.itn-sc-hero { min-height: 350px; }
	.itn-sc-fg { max-width: 100%; min-height: 350px; padding: 18px; gap: 10px; }
	.itn-sc-hero::after { background: linear-gradient(0deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .4) 55%, rgba(0, 0, 0, .1) 100%); }
	html body .itn-sc-title { font-size: 22px; }
	.itn-sc-meta { gap: 4px 12px; }
	/* El carrusel llega hasta los bordes de la pantalla (sale del padding de la vitrina) */
	.itn-mix-trend .itn-cr-track { margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px; }
	.itn-mix-trend .itn-cr-head { padding-inline: 0; }
}
/* Móvil: actores en una columna y tarjetas grandes con la siguiente asomando */
@media (max-width: 599px) {
	.itn-ac-list { grid-template-columns: 1fr; }
	.itn-tc { flex-basis: 72%; }
	.itn-tc-title { font-size: 13px; }
	.itn-tc-sub { font-size: 12px; }
	.itn-tc-dur { right: 8px; bottom: 8px; padding: 3px 8px; font-size: 11.5px; }
	.itn-tc-thumb { border-radius: 14px; }
}