/* ==========================================================================
   HALLOWEEN ROCKERO — sistema de diseño propio (rkb-hw-*)
   Base estructural: shell + section-heading + kicker + título + note (como el
   Metal Hub V2), pero con lenguaje visual de cartel de concierto de terror.
   Se encola SOLO en page-halloween-rockero.php
   ========================================================================== */

.rkb-hw {
	--hw-ink: #070404;
	--hw-ink-2: #0f0709;
	--hw-panel: #170c10;
	--hw-line: rgba(200, 30, 30, .24);
	--hw-blood: #c81e1e;
	--hw-blood-lt: #ef4444;
	--hw-pumpkin: #f97316;
	--hw-pumpkin-lt: #fb923c;
	--hw-toxic: #a3e635;
	--hw-bone: #f5efe4;
	--hw-muted: rgba(245, 239, 228, .6);
	--hw-radius: 2px;

	position: relative;
	background: var(--hw-ink);
	color: var(--hw-bone);
	font-size: 1.02rem;
	line-height: 1.75;
	padding-bottom: 4rem;
	overflow-x: hidden;
}

/* Textura: puntos + viñeta, sin imágenes */
.rkb-hw::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		radial-gradient(circle at 50% -10%, rgba(200, 30, 30, .16), transparent 55%),
		radial-gradient(circle at 88% 8%, rgba(249, 115, 22, .07), transparent 40%);
}

.rkb-hw > * { position: relative; z-index: 1; }

/* ==========================================================================
   HERO — cartel de concierto
   ========================================================================== */
.rkb-hw__hero {
	position: relative;
	padding: clamp(1.4rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem) clamp(2.4rem, 5vw, 3.6rem);
	border-bottom: 1px solid var(--hw-line);
	background:
		linear-gradient(180deg, rgba(200, 30, 30, .1), transparent 45%),
		var(--hw-ink-2);
}

.rkb-hw__hero-inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(1.4rem, 4vw, 2.8rem);
	align-items: center;
}

/* Marco del póster: doble borde + esquinas cortadas */
.rkb-hw__hero-media {
	position: relative;
	padding: 10px;
	background: var(--hw-panel);
	border: 1px solid rgba(200, 30, 30, .35);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

.rkb-hw__hero-media::after {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1px dashed rgba(200, 30, 30, .28);
	pointer-events: none;
}

.rkb-hw__hero-img {
	display: block;
	width: 100%;
	height: auto;
	filter: saturate(1.06) contrast(1.04);
}

/* Sello circular sobre la imagen */
.rkb-hw__seal {
	position: absolute;
	right: -14px;
	top: -14px;
	z-index: 2;
	width: 92px;
	height: 92px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--hw-blood);
	color: #fff;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.15;
	transform: rotate(-12deg);
	box-shadow: 0 0 0 4px var(--hw-ink), 0 10px 26px -10px rgba(200, 30, 30, .9);
	border: 2px dashed rgba(255, 255, 255, .55);
}

.rkb-hw__hero-text { min-width: 0; }

.rkb-hw__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: .35rem .8rem .35rem .55rem;
	border: 1px solid rgba(249, 115, 22, .45);
	background: rgba(249, 115, 22, .1);
	color: var(--hw-pumpkin-lt);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

.rkb-hw__eyebrow i { font-size: .85rem; }

.rkb-hw__title {
	margin: 0 0 1rem;
	font-size: clamp(1.9rem, 4.6vw, 3.1rem);
	line-height: 1.05;
	font-weight: 900;
	letter-spacing: -.025em;
	color: #fff;
	text-wrap: balance;
}

.rkb-hw__title em {
	font-style: normal;
	color: var(--hw-blood-lt);
	/* subrayado tipo rotulador */
	background-image: linear-gradient(180deg, transparent 72%, rgba(200, 30, 30, .45) 72%);
}

.rkb-hw__lead {
	margin: 0 0 1.3rem;
	font-size: 1.02rem;
	color: var(--hw-muted);
}

/* Datos del cartel */
.rkb-hw__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rkb-hw__meta li {
	margin: 0;
	padding: .3rem .65rem;
	border: 1px solid rgba(245, 239, 228, .16);
	background: rgba(255, 255, 255, .03);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: rgba(245, 239, 228, .72);
}

.rkb-hw__meta li b { color: var(--hw-pumpkin); }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.rkb-hw__wrap {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 clamp(1rem, 4vw, 2rem);
	display: grid;
	grid-template-columns: 236px minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

/* ==========================================================================
   ÍNDICE — lista de setlist
   ========================================================================== */
.rkb-hw__toc {
	position: sticky;
	top: 88px;
	margin-top: 2.4rem;
	padding: 1rem 1.05rem 1.1rem;
	background: var(--hw-panel);
	border: 1px solid var(--hw-line);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.rkb-hw__toc-title {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: 0 0 .8rem;
	padding-bottom: .6rem;
	border-bottom: 1px dashed rgba(200, 30, 30, .35);
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hw-pumpkin-lt);
}

.rkb-hw__toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
}

.rkb-hw__toc li {
	counter-increment: toc;
	display: grid;
	grid-template-columns: 1.4rem minmax(0, 1fr);
	gap: .3rem;
	align-items: baseline;
	margin: 0 0 .42rem;
	font-size: .83rem;
	line-height: 1.35;
}

.rkb-hw__toc li::before {
	content: counter(toc, decimal-leading-zero);
	font-size: .68rem;
	font-weight: 800;
	color: rgba(200, 30, 30, .75);
	font-variant-numeric: tabular-nums;
}

.rkb-hw__toc a {
	color: rgba(245, 239, 228, .82);
	text-decoration: none;
	transition: color .15s;
}

.rkb-hw__toc a:hover { color: var(--hw-pumpkin-lt); }

/* ==========================================================================
   CUERPO
   ========================================================================== */
.rkb-hw__body {
	min-width: 0;
	padding-top: 2.4rem;
}

.rkb-hw__body p { margin: 0 0 1.15rem; color: rgba(245, 239, 228, .88); }

.rkb-hw__body a {
	color: var(--hw-pumpkin-lt);
	text-decoration: none;
	border-bottom: 1px solid rgba(249, 115, 22, .4);
	transition: border-color .15s, color .15s;
}

.rkb-hw__body a:hover { color: #fff; border-bottom-color: var(--hw-pumpkin); }

.rkb-hw__body ul,
.rkb-hw__body ol { margin: 0 0 1.3rem; padding-left: 1.25rem; }
.rkb-hw__body li { margin-bottom: .38rem; }
.rkb-hw__body li::marker { color: var(--hw-blood-lt); }

/* ---------- Aviso de afiliación ---------- */
.rkb-hw__notice {
	position: relative;
	margin: 0 0 1.8rem;
	padding: .95rem 1.1rem .95rem 2.9rem;
	border: 1px solid rgba(249, 115, 22, .3);
	background: rgba(249, 115, 22, .07);
	font-size: .86rem;
	color: rgba(253, 232, 208, .9);
}

.rkb-hw__notice::before {
	content: "\f05a";
	font-family: "Font Awesome 6 Free", sans-serif;
	font-weight: 900;
	position: absolute;
	left: 1.05rem;
	top: 1rem;
	color: var(--hw-pumpkin);
	font-size: 1rem;
}

/* ==========================================================================
   SECCIONES — kicker numerado + número fantasma
   ========================================================================== */
.rkb-hw__section {
	position: relative;
	margin-bottom: 3.2rem;
	padding-bottom: 2.6rem;
	scroll-margin-top: 88px;
}

/* separador: cinta de peligro */
.rkb-hw__section::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(200, 30, 30, .5) 0 10px,
		rgba(200, 30, 30, 0) 10px 20px
	);
	opacity: .55;
}

.rkb-hw__section:last-of-type::after { display: none; }

/* número gigante de fondo */
.rkb-hw__ghost {
	position: absolute;
	right: -.1em;
	top: -.35em;
	font-size: clamp(5rem, 13vw, 9rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.06em;
	color: rgba(245, 239, 228, .028);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.rkb-hw__section > *:not(.rkb-hw__ghost) { position: relative; z-index: 1; }

/* cabecera de sección */
.rkb-hw__section-heading { margin-bottom: 1.4rem; }

.rkb-hw__kicker {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .65rem;
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--hw-pumpkin-lt);
}

.rkb-hw__kicker b {
	display: inline-grid;
	place-items: center;
	min-width: 1.65rem;
	height: 1.65rem;
	padding: 0 .3rem;
	background: var(--hw-blood);
	color: #fff;
	font-size: .7rem;
	font-weight: 900;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.rkb-hw__h2 {
	margin: 0 0 .5rem;
	font-size: clamp(1.45rem, 3.4vw, 2.05rem);
	line-height: 1.12;
	font-weight: 900;
	letter-spacing: -.02em;
	color: #fff;
	text-wrap: balance;
}

.rkb-hw__note {
	margin: 0;
	font-size: .88rem;
	color: var(--hw-muted);
	max-width: 62ch;
}

/* h3 con marca de sangre */
.rkb-hw__body h3 {
	position: relative;
	margin: 2.1rem 0 .7rem;
	padding-left: 1.05rem;
	font-size: clamp(1.1rem, 2.3vw, 1.32rem);
	font-weight: 800;
	color: #fde8d0;
}

.rkb-hw__body h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: .3em;
	width: 7px;
	height: 7px;
	background: var(--hw-blood-lt);
	clip-path: polygon(50% 0, 100% 35%, 82% 100%, 18% 100%, 0 35%);
}

.rkb-hw__body h4 {
	margin: 1.5rem 0 .45rem;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .01em;
	color: var(--hw-pumpkin-lt);
	text-transform: uppercase;
}

/* ---------- Avisos ---------- */
.rkb-hw__warn {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	margin: 1.3rem 0;
	padding: .9rem 1.05rem;
	border-left: 3px solid var(--hw-blood);
	background: rgba(200, 30, 30, .1);
	font-size: .91rem;
	color: #fecaca;
}

.rkb-hw__warn i { margin-top: .25rem; color: var(--hw-blood-lt); }

/* ==========================================================================
   CAJA DE COMPRA — ticket perforado
   ========================================================================== */
.rkb-hw-cta {
	position: relative;
	margin: 1.6rem 0 2rem;
	padding: 1.1rem 1.2rem 1.15rem;
	background: linear-gradient(160deg, rgba(200, 30, 30, .13), rgba(23, 12, 16, .96));
	border: 1px solid rgba(200, 30, 30, .3);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
}

/* muescas laterales tipo ticket */
.rkb-hw-cta::before,
.rkb-hw-cta::after {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--hw-ink);
	border: 1px solid rgba(200, 30, 30, .3);
}

.rkb-hw-cta::before { left: -7px; top: 50%; transform: translateY(-50%); }
.rkb-hw-cta::after { right: -7px; top: 50%; transform: translateY(-50%); }

.rkb-hw-cta__label {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .75rem;
	padding-bottom: .6rem;
	border-bottom: 1px dashed rgba(200, 30, 30, .35);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hw-pumpkin-lt);
}

.rkb-hw-cta__label i { color: var(--hw-pumpkin); }

.rkb-hw-cta__product {
	margin: 0 0 .8rem;
	font-weight: 800;
	color: #fff;
	font-size: 1rem;
}

.rkb-hw-cta__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .42rem;
}

.rkb-hw-cta__list li { margin: 0; }

.rkb-hw-cta__list a {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .55rem .75rem;
	background: rgba(0, 0, 0, .35);
	border: 1px solid rgba(245, 239, 228, .1);
	color: var(--hw-bone);
	font-size: .89rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s, border-color .15s, transform .12s;
}

.rkb-hw-cta__list a::before {
	content: "\f0da";
	font-family: "Font Awesome 6 Free", sans-serif;
	font-weight: 900;
	font-size: .7rem;
	color: var(--hw-pumpkin);
	transition: transform .15s;
}

.rkb-hw-cta__list a:hover {
	background: rgba(200, 30, 30, .2);
	border-color: rgba(200, 30, 30, .55);
	color: #fff;
	transform: translateX(3px);
}

.rkb-hw-cta__note {
	margin: .8rem 0 0;
	font-size: .82rem;
	color: var(--hw-muted);
}

/* enlace suelto */
.rkb-hw__link-buy {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .85rem !important;
	border: 1px solid rgba(249, 115, 22, .35) !important;
	background: rgba(249, 115, 22, .08) !important;
	color: var(--hw-bone) !important;
	font-size: .88rem;
	font-weight: 700;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}

.rkb-hw__link-buy:hover {
	background: rgba(249, 115, 22, .2) !important;
	border-color: var(--hw-pumpkin) !important;
	color: #fff !important;
}

/* ==========================================================================
   SETLIST — lista de canciones manuscrita
   ========================================================================== */
.rkb-hw__tracks {
	list-style: none !important;
	padding: 0 !important;
	margin: 1.4rem 0 1.8rem !important;
	counter-reset: track;
	columns: 2;
	column-gap: 1.6rem;
}

.rkb-hw__tracks li {
	break-inside: avoid;
	counter-increment: track;
	display: flex;
	gap: .5rem;
	align-items: baseline;
	margin: 0 0 .5rem !important;
	padding-bottom: .42rem;
	border-bottom: 1px dotted rgba(245, 239, 228, .14);
	font-size: .89rem;
	line-height: 1.35;
}

.rkb-hw__tracks li::before {
	content: counter(track, decimal-leading-zero);
	flex: none;
	width: 1.5rem;
	font-size: .68rem;
	font-weight: 800;
	color: rgba(200, 30, 30, .8);
	font-variant-numeric: tabular-nums;
	transform: translateY(-.1em);
}

.rkb-hw__tracks strong { color: #fff; font-weight: 700; min-width: 0; }

.rkb-hw__tracks em {
	margin-left: auto;
	flex: 0 1 auto;
	font-style: normal;
	font-size: .78rem;
	text-align: right;
	color: rgba(245, 239, 228, .5);
	padding-left: .5rem;
}

/* ==========================================================================
   EMBEDS DE PLAYLIST
   ========================================================================== */
.rkb-hw__embeds {
	display: grid;
	gap: 1rem;
	margin: 1.5rem 0 1.6rem;
}

.rkb-hw__embed {
	padding: .85rem;
	background: var(--hw-panel);
	border: 1px solid var(--hw-line);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.rkb-hw__embed-title {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0 0 .75rem !important;
	padding-left: 0 !important;
	font-size: .68rem !important;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hw-pumpkin-lt);
}

.rkb-hw__embed-title::before { display: none; }
.rkb-hw__embed-title i { font-size: 1rem; }

.rkb-hw__embed-frame {
	position: relative;
	background: #000;
	overflow: hidden;
	line-height: 0;
}

.rkb-hw__embed-frame iframe { display: block; width: 100%; border: 0; }

/* ==========================================================================
   FASES DE LA FIESTA — vela que se consume
   ========================================================================== */
.rkb-hw__phases {
	display: grid;
	gap: .75rem;
	margin: 1.3rem 0 1.7rem;
}

.rkb-hw__phase {
	position: relative;
	display: grid;
	grid-template-columns: 66px minmax(0, 1fr);
	column-gap: 1rem;
	padding: .95rem 1.1rem;
	background: var(--hw-panel);
	border: 1px solid rgba(200, 30, 30, .16);
}

.rkb-hw__phase-n {
	grid-row: span 2;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .3rem;
	font-size: 1.15rem;
	font-weight: 900;
	color: var(--hw-blood-lt);
	line-height: 1;
	position: relative;
}

/* llama que mengua según la fase */
.rkb-hw__phase-n::before {
	content: "";
	width: 11px;
	height: 20px;
	border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
	background: radial-gradient(circle at 50% 75%, #fde68a, #f97316 45%, #c81e1e 100%);
	box-shadow: 0 0 12px rgba(249, 115, 22, .8);
	animation: hw-flame 1.7s ease-in-out infinite alternate;
}

.rkb-hw__phase:nth-child(2) .rkb-hw__phase-n::before { transform: scale(.85); opacity: .9; }
.rkb-hw__phase:nth-child(3) .rkb-hw__phase-n::before { transform: scale(.7); opacity: .75; }

@keyframes hw-flame {
	from { transform: scaleY(.92) translateY(1px); opacity: .85; }
	to   { transform: scaleY(1.08) translateY(-1px); opacity: 1; }
}

.rkb-hw__phase h4 { margin: 0 0 .25rem !important; color: #fff; font-size: .95rem; }
.rkb-hw__phase p { margin: 0; font-size: .9rem; color: var(--hw-muted); }

/* ==========================================================================
   CHECKLIST — entradas de concierto
   ========================================================================== */
.rkb-hw__checklist {
	list-style: none !important;
	padding: 0 !important;
	margin: 1.3rem 0 1.6rem !important;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: .5rem;
}

.rkb-hw__checklist li {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 !important;
	padding: .5rem .8rem;
	background: rgba(23, 12, 16, .85);
	border: 1px solid rgba(245, 239, 228, .1);
	border-left: 3px solid rgba(200, 30, 30, .55);
	font-size: .87rem;
}

.rkb-hw__checklist li::before {
	content: "\f0c8";
	font-family: "Font Awesome 6 Free", sans-serif;
	font-weight: 400;
	font-size: .78rem;
	color: rgba(200, 30, 30, .7);
	flex-shrink: 0;
}

/* ==========================================================================
   FAQ — lápidas
   ========================================================================== */
.rkb-hw__faq {
	display: grid;
	gap: .6rem;
	margin: 1.2rem 0 0;
}

.rkb-hw__faq details {
	position: relative;
	background: linear-gradient(180deg, rgba(23, 12, 16, .95), rgba(15, 7, 9, .95));
	border: 1px solid rgba(200, 30, 30, .2);
	/* forma de lápida */
	border-radius: 42px 42px 2px 2px;
	padding: .15rem;
}

.rkb-hw__faq summary {
	cursor: pointer;
	padding: .8rem 2.4rem .8rem 1.15rem;
	font-weight: 800;
	font-size: .94rem;
	color: #fde8d0;
	list-style: none;
	position: relative;
}

.rkb-hw__faq summary::-webkit-details-marker { display: none; }

.rkb-hw__faq summary::after {
	content: "+";
	position: absolute;
	right: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--hw-blood-lt);
	line-height: 1;
}

.rkb-hw__faq details[open] summary::after { content: "\2013"; }

.rkb-hw__faq details p {
	margin: 0;
	padding: 0 1.15rem 1rem;
	font-size: .9rem;
	color: var(--hw-muted);
}

/* ==========================================================================
   CIERRE
   ========================================================================== */
.rkb-hw__outro .rkb-hw__h2 { color: var(--hw-pumpkin-lt); }

.rkb-hw__related {
	margin: 2rem 0 1.4rem;
	padding: 1.1rem 1.2rem;
	background: var(--hw-panel);
	border: 1px solid var(--hw-line);
}

.rkb-hw__related h3 {
	margin: 0 0 .7rem !important;
	padding-left: 0 !important;
	color: #fff;
}

.rkb-hw__related h3::before { display: none; }
.rkb-hw__related ul { margin: 0; padding-left: 1.15rem; }
.rkb-hw__related li { margin-bottom: .4rem; }

.rkb-hw__closing {
	margin-top: 1.8rem !important;
	font-size: clamp(1.4rem, 3vw, 1.8rem);
	font-weight: 900;
	text-align: center;
	letter-spacing: -.02em;
	color: #fff;
	text-shadow: 0 0 40px rgba(200, 30, 30, .55), 0 0 90px rgba(249, 115, 22, .25);
}

.rkb-hw__tags {
	margin-top: 2.6rem;
	padding-top: 1rem;
	border-top: 1px dashed rgba(245, 239, 228, .12);
	font-size: .78rem;
	color: rgba(245, 239, 228, .32);
	word-spacing: .45rem;
}

.rkb-hw__more {
	margin-top: 1.3rem !important;
	padding-top: .9rem;
	border-top: 1px dashed rgba(200, 30, 30, .25);
	font-size: .9rem;
	color: var(--hw-muted);
}

/* ==========================================================================
   TUTORIALES EN VÍDEO — rejilla de pósters con carga diferida
   ========================================================================== */
.rkb-hw__vid-group {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: 2.4rem 0 1rem !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--hw-pumpkin);
}

.rkb-hw__vid-group::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	background: var(--hw-blood);
	transform: rotate(45deg);
}

.rkb-hw__vid-group::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, rgba(249, 115, 22, .38), transparent);
}

.rkb-hw-vid-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
	gap: 1.05rem;
	margin: 0 0 1.3rem !important;
	padding: 0 !important;
}

.rkb-hw-vid {
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #1b0d12 0%, #0c0608 100%);
	border: 1px solid rgba(200, 30, 30, .2);
	border-radius: 3px;
	overflow: hidden;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.rkb-hw-vid:hover {
	transform: translateY(-4px);
	border-color: rgba(239, 68, 68, .6);
	box-shadow: 0 16px 34px -14px rgba(200, 30, 30, .55);
}

.rkb-hw-vid__play {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	margin: 0;
	border: 0;
	background: #000;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
}

.rkb-hw-vid__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(.4) contrast(1.06) brightness(.68);
	transition: filter .3s ease, transform .45s ease;
}

.rkb-hw-vid:hover .rkb-hw-vid__thumb,
.rkb-hw-vid__play:focus-visible .rkb-hw-vid__thumb {
	filter: grayscale(0) contrast(1.04) brightness(.88);
	transform: scale(1.05);
}

.rkb-hw-vid__badge {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.rkb-hw-vid__badge i {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding-left: 3px;
	border-radius: 50%;
	background: rgba(200, 30, 30, .93);
	color: #fff;
	font-size: .82rem;
	box-shadow: 0 0 0 0 rgba(200, 30, 30, .55);
	animation: hw-vid-pulse 2.8s ease-out infinite;
}

@keyframes hw-vid-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(200, 30, 30, .5); }
	70%  { box-shadow: 0 0 0 16px rgba(200, 30, 30, 0); }
	100% { box-shadow: 0 0 0 0 rgba(200, 30, 30, 0); }
}

.rkb-hw-vid__play:hover .rkb-hw-vid__badge i {
	background: var(--hw-blood-lt);
	transform: scale(1.08);
}

.rkb-hw-vid__frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	background: #000;
}

.rkb-hw-vid__cap {
	display: block;
	padding: .8rem .9rem .95rem;
	border-top: 1px solid rgba(200, 30, 30, .16);
}

.rkb-hw-vid__who {
	display: block;
	margin-bottom: .3rem;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hw-pumpkin);
}

.rkb-hw-vid__title {
	display: block;
	margin-bottom: .35rem;
	font-size: .93rem;
	line-height: 1.3;
	font-weight: 700;
	color: #fff;
}

.rkb-hw-vid__note {
	display: block;
	font-size: .79rem;
	line-height: 1.48;
	color: rgba(245, 239, 228, .55);
}

/* ==========================================================================
   PISTA + ÍNDICE DE PERSONAJES
   ========================================================================== */
.rkb-hw__pista {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin: 1.2rem 0 1.5rem !important;
	padding: .75rem .9rem !important;
	border-left: 3px solid var(--hw-pumpkin);
	background: rgba(249, 115, 22, .07);
	font-size: .88rem;
	color: rgba(245, 239, 228, .78);
}

.rkb-hw__pista i { color: var(--hw-pumpkin); margin-top: .18rem; }

.rkb-hw__dindex {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0 0 1.7rem !important;
	padding: 0 !important;
}

.rkb-hw__dindex a {
	display: inline-flex;
	align-items: center;
	gap: .38rem;
	padding: .34rem .7rem;
	border: 1px solid rgba(200, 30, 30, .26);
	border-radius: 2px;
	background: rgba(200, 30, 30, .06);
	font-size: .76rem;
	font-weight: 600;
	color: rgba(245, 239, 228, .8);
	text-decoration: none !important;
	transition: background .2s, border-color .2s, color .2s, transform .2s;
}

.rkb-hw__dindex a b {
	font-size: .64rem;
	color: var(--hw-blood-lt);
	font-variant-numeric: tabular-nums;
}

.rkb-hw__dindex a:hover {
	background: rgba(200, 30, 30, .18);
	border-color: rgba(239, 68, 68, .6);
	color: #fff;
	transform: translateY(-1px);
}

/* ==========================================================================
   KIT BASE
   ========================================================================== */
.rkb-hw__base {
	margin: 0 0 2rem;
	padding: 1.1rem 1.2rem;
	border: 1px dashed rgba(249, 115, 22, .35);
	border-radius: 3px;
	background: linear-gradient(160deg, rgba(249, 115, 22, .06), rgba(0, 0, 0, 0));
}

.rkb-hw__base-title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .6rem !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: .95rem !important;
	color: var(--hw-pumpkin) !important;
}

.rkb-hw__base-title::before { display: none !important; }

.rkb-hw__base > p {
	margin: 0 0 .85rem !important;
	font-size: .87rem;
	color: var(--hw-muted);
}

.rkb-hw__base-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: .45rem;
}

.rkb-hw__base-list li {
	margin: 0 !important;
	padding: .45rem .6rem !important;
	border-left: 2px solid rgba(200, 30, 30, .4);
	background: rgba(255, 255, 255, .02);
	font-size: .82rem;
}

.rkb-hw__base-list a {
	color: #fff;
	font-weight: 700;
	text-decoration: none !important;
	border-bottom: 1px solid rgba(200, 30, 30, .4);
}

.rkb-hw__base-list a:hover { color: var(--hw-pumpkin); }

.rkb-hw__base-list span {
	display: block;
	margin-top: .12rem;
	font-size: .74rem;
	color: rgba(245, 239, 228, .42);
}

.rkb-hw__base-note {
	margin: .85rem 0 0 !important;
	font-size: .78rem !important;
	color: rgba(245, 239, 228, .4) !important;
	font-style: italic;
}

/* ==========================================================================
   FICHAS DE DISFRAZ — descripción + tutorial + kit en un solo bloque
   ========================================================================== */
.rkb-hw-ficha {
	margin: 0 0 .7rem !important;
	padding: 0 !important;
	border: 1px solid rgba(200, 30, 30, .2);
	border-radius: 3px;
	background: linear-gradient(180deg, #1a0c10, #0c0608);
	overflow: hidden;
	transition: border-color .25s ease, box-shadow .25s ease;
}

.rkb-hw-ficha[open] {
	border-color: rgba(239, 68, 68, .55);
	box-shadow: 0 18px 40px -22px rgba(200, 30, 30, .55);
}

.rkb-hw-ficha__sum {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .85rem 1rem !important;
	cursor: pointer;
	list-style: none;
	transition: background .2s ease;
}

.rkb-hw-ficha__sum::-webkit-details-marker { display: none; }
.rkb-hw-ficha__sum:hover { background: rgba(200, 30, 30, .08); }

.rkb-hw-ficha__n {
	flex: none;
	width: 2rem;
	font-size: .82rem;
	font-weight: 800;
	color: var(--hw-blood-lt);
	font-variant-numeric: tabular-nums;
}

.rkb-hw-ficha__name {
	flex: 1;
	min-width: 0;
	font-size: 1.02rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.25;
}

.rkb-hw-ficha__tag {
	flex: none;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: rgba(249, 115, 22, .85);
	white-space: nowrap;
}

.rkb-hw-ficha__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid rgba(200, 30, 30, .45);
	border-radius: 50%;
	color: var(--hw-blood-lt);
	font-size: .62rem;
	transition: transform .3s ease, background .25s ease;
}

.rkb-hw-ficha[open] .rkb-hw-ficha__icon {
	transform: rotate(45deg);
	background: rgba(200, 30, 30, .22);
}

.rkb-hw-ficha__body {
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	gap: 1.2rem;
	padding: 1rem 1rem 1.15rem;
	border-top: 1px solid rgba(200, 30, 30, .16);
}

.rkb-hw-ficha__media { min-width: 0; }

.rkb-hw-ficha__media .rkb-hw-vid { margin: 0 0 .7rem !important; }
.rkb-hw-ficha__media .rkb-hw-vid:last-child { margin-bottom: 0 !important; }

.rkb-hw-ficha__text { min-width: 0; }
.rkb-hw-ficha__text > p { margin: 0 0 .8rem !important; font-size: .89rem; }

.rkb-hw-ficha__h4 {
	margin: 1rem 0 .45rem !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: .68rem !important;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hw-pumpkin) !important;
}

.rkb-hw-ficha__h4::before { display: none !important; }

.rkb-hw-ficha__mat {
	margin: 0 0 .9rem !important;
	padding: 0 !important;
	list-style: none !important;
	columns: 2;
	column-gap: 1rem;
}

.rkb-hw-ficha__mat li {
	position: relative;
	margin: 0 0 .3rem !important;
	padding-left: .85rem;
	font-size: .82rem;
	color: rgba(245, 239, 228, .76);
	break-inside: avoid;
}

.rkb-hw-ficha__mat li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 5px;
	height: 5px;
	background: var(--hw-blood-lt);
	transform: rotate(45deg);
}

.rkb-hw-ficha__text .rkb-hw-cta { margin-top: .85rem; }

/* Etiqueta de tipo sobre la miniatura */
.rkb-hw-vid__kind {
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: .12rem .45rem;
	border-radius: 2px;
	background: rgba(0, 0, 0, .78);
	font-size: .6rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hw-pumpkin);
	pointer-events: none;
}

/* ==========================================================================
   PELÍCULAS CON TRÁILER
   ========================================================================== */
.rkb-hw-film-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.2rem;
	margin: 1.6rem 0 1.4rem !important;
	padding: 0 !important;
}

.rkb-hw-film {
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #1b0d12, #0c0608);
	border: 1px solid rgba(200, 30, 30, .2);
	border-radius: 3px;
	overflow: hidden;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.rkb-hw-film:hover {
	transform: translateY(-4px);
	border-color: rgba(239, 68, 68, .55);
	box-shadow: 0 16px 34px -14px rgba(200, 30, 30, .5);
}

.rkb-hw-film__media { position: relative; }
.rkb-hw-film__text { padding: .85rem 1rem 1.05rem; }

.rkb-hw-film__meta {
	margin: 0 0 .3rem !important;
	font-size: .66rem !important;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hw-pumpkin) !important;
}

.rkb-hw-film__title {
	margin: 0 0 .45rem !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 1.05rem !important;
	font-weight: 700;
	line-height: 1.25;
	color: #fff !important;
}

.rkb-hw-film__title::before { display: none !important; }

.rkb-hw-film__desc {
	margin: 0 !important;
	font-size: .82rem !important;
	line-height: 1.5;
	color: rgba(245, 239, 228, .6);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 920px) {
	.rkb-hw__hero-inner { grid-template-columns: 1fr; }
	.rkb-hw__wrap { grid-template-columns: 1fr; }
	.rkb-hw__toc { position: static; margin-top: 1.6rem; order: -1; }
	.rkb-hw__toc ol { columns: 2; column-gap: 1.2rem; }
	.rkb-hw__seal { width: 74px; height: 74px; font-size: .54rem; right: -8px; top: -8px; }
	.rkb-hw-ficha__body { grid-template-columns: 1fr; }
	.rkb-hw-ficha__tag { display: none; }
}

@media (max-width: 620px) {
	.rkb-hw__toc ol { columns: 1; }
	.rkb-hw__tracks { columns: 1; }
	.rkb-hw__phase { grid-template-columns: 1fr; }
	.rkb-hw__phase-n { grid-row: auto; flex-direction: row; gap: .5rem; justify-content: flex-start; }
	.rkb-hw-cta { padding: 1rem; }
	.rkb-hw__ghost { font-size: 4.5rem; }
	.rkb-hw__embed-frame { aspect-ratio: 16 / 9; }
	.rkb-hw__embed-frame iframe { height: 100% !important; }
	.rkb-hw-ficha__mat { columns: 1; }
	.rkb-hw-ficha__sum { gap: .55rem; padding: .75rem .8rem !important; }
	.rkb-hw-ficha__name { font-size: .93rem; }
	.rkb-hw-ficha__n { width: 1.5rem; font-size: .74rem; }
	.rkb-hw__dindex a { font-size: .71rem; padding: .3rem .55rem; }
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
	.rkb-hw__phase-n::before { animation: none; }
}