/* Reels Capital – visor vertical de videos (feed editorial, blanco + tinta + amarillo Capital) */
:root {
	--thk-accent: #f5d400;
	--thk-play: #f5d400;
	--thk-bg: #0e0f13;
	--thk-stage-h: 100vh;
	--thk-stage-h: 100dvh;
	--thk-radius: 22px;
	--thk-ink: #121317;
	--thk-yellow: #f5d400;
	--thk-yellow-2: #c9ae00;
	--thk-rule: #d6d6d6;
	--thk-serif: "Libre Bodoni", Georgia, "Times New Roman", serif;
	--thk-sans: "IBM Plex Sans", system-ui, sans-serif;
}

/* ---------- Página /videos ---------- */
.thk-reels-main { max-width: 1200px; margin: 0 auto; padding: 36px 24px 56px; color: var(--thk-ink); }

/* Cabecera editorial: eyebrow + título serif con segmento negro sobre línea gris, subtítulo a la derecha */
.thk-reels-main__head {
	position: relative; text-align: left; margin: 0 0 22px; border-bottom: 1px solid var(--thk-rule);
	display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 32px;
}
.thk-reels-main__eyebrow {
	flex: 0 0 100%; margin: 0 0 6px; font-family: var(--thk-sans); font-size: .72rem; font-weight: 600; letter-spacing: .18em;
	text-transform: uppercase; color: var(--thk-yellow-2);
}
.thk-reels-main__title {
	display: inline-block; margin: 0 0 -1px; padding: 0 2px 12px; font-family: var(--thk-serif); font-weight: 700;
	font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.12; color: var(--thk-ink); border-bottom: 4px solid var(--thk-ink);
}
.thk-reels-main__title em { font-style: italic; color: var(--thk-yellow-2); }
.thk-reels-main__sub { flex: 1 1 260px; margin: 0 0 14px; max-width: 520px; font-family: var(--thk-sans); font-size: 1rem; line-height: 1.5; color: rgba(18,19,23,.65); }

/* ---------- Sección ---------- */
.thk-reels { --stage-h: min(calc(var(--thk-stage-h) - 200px), 780px); position: relative; margin: 0 auto; max-width: 100%; font-family: var(--thk-sans); color: var(--thk-ink); }
.thk-reels__title { text-align: left; margin: 0 0 14px; font-family: var(--thk-serif); font-size: 1.6rem; }

/* Filtros en píldora */
.thk-reels__filters {
	display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
	justify-content: flex-start; padding: 2px 2px 18px; margin: 0; scrollbar-width: none;
}
.thk-reels__filters::-webkit-scrollbar { display: none; }
.thk-reels__chip {
	flex: 0 0 auto; appearance: none; border: 1px solid rgba(18,19,23,.28); background: #fff; color: var(--thk-ink);
	border-radius: 999px; padding: 9px 18px; font-family: var(--thk-sans); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
	transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.thk-reels__chip:hover { border-color: var(--thk-ink); background: var(--thk-yellow); color: var(--thk-ink); transform: translateY(-1px); }
.thk-reels__chip.is-active { background: var(--thk-ink); border-color: var(--thk-ink); color: #fff; }
.thk-reels__chip.is-active::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--thk-yellow); margin-right: 8px; vertical-align: middle; position: relative; top: -1px; }

/* ---------- Escenario + panel ---------- */
.thk-reels__layout { display: grid; grid-template-columns: minmax(0, auto) minmax(340px, 460px); gap: 36px; align-items: start; justify-content: center; }
.thk-reels__stage {
	position: relative; height: var(--stage-h); margin: 0; background: var(--thk-bg); border-radius: var(--thk-radius);
	overflow: hidden; width: calc(var(--stage-h) * 9 / 16);
	box-shadow: 0 30px 60px -28px rgba(18,19,23,.55), 0 0 0 1px rgba(18,19,23,.06);
}
.thk-reels__track {
	height: 100%; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; scroll-behavior: smooth;
	scrollbar-width: none; outline: none;
}
.thk-reels__track::-webkit-scrollbar { display: none; }
.thk-reels__empty { color: #fff; opacity: .7; display: grid; place-items: center; height: 100%; padding: 24px; text-align: center; }

/* Flechas de vidrio (escritorio) */
.thk-reels__nav {
	position: absolute; right: 14px; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; padding: 0;
	border: 1px solid rgba(255,255,255,.28); background: rgba(23,25,34,.55); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	display: none; place-items: center; z-index: 5; transition: background .2s, opacity .2s, color .2s, border-color .2s;
}
.thk-reels__nav svg { width: 22px; height: 22px; }
.thk-reels__nav:hover { background: var(--thk-yellow); border-color: var(--thk-yellow); color: var(--thk-ink); }
.thk-reels__nav--prev { top: 14px; }
.thk-reels__nav--next { bottom: 14px; }
.thk-reels__nav[disabled] { opacity: .25; pointer-events: none; }
@media (hover: hover) and (min-width: 900px) { .thk-reels__nav { display: grid; } }

.thk-reels__loader {
	position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); color: var(--thk-ink); font-size: .78rem; font-weight: 600;
	background: var(--thk-yellow); padding: 6px 14px; border-radius: 999px; z-index: 6;
}

/* Panel lateral (escritorio): lo que se está viendo + cola */
.thk-reels__panel { display: none; flex-direction: column; gap: 22px; height: var(--stage-h); min-width: 0; }
.thk-reels__now { padding: 4px 0 22px; border-bottom: 1px solid var(--thk-rule); }
.thk-reels__now-eyebrow { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(18,19,23,.5); margin-bottom: 12px; }
.thk-reels__now-eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--thk-yellow); margin-right: 8px; box-shadow: 0 0 0 3px rgba(245,212,0,.25); }
.thk-reels__now-cat {
	display: inline-block; background: var(--thk-yellow); color: var(--thk-ink); font-size: .68rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; padding: 5px 10px; border-radius: 4px; margin-bottom: 12px;
}
.thk-reels__now-title { margin: 0 0 12px; font-family: var(--thk-serif); font-weight: 700; font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.18; color: var(--thk-ink); }
.thk-reels__now-desc { margin: 0 0 12px; font-size: 1rem; line-height: 1.55; color: rgba(18,19,23,.72); }
.thk-reels__now-date { display: block; font-size: .78rem; color: rgba(18,19,23,.5); margin-bottom: 16px; }
.thk-reels__now-cta, .thk-reels__now-cta:visited {
	display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px; border: 1px solid var(--thk-ink);
	background: var(--thk-ink); color: #fff !important; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
	transition: background .25s, color .25s, transform .25s; margin-bottom: 18px;
}
.thk-reels__now-cta:hover { background: var(--thk-yellow); border-color: var(--thk-yellow); color: var(--thk-ink) !important; transform: translateY(-2px); }
.thk-reels__now-actions { display: flex; gap: 10px; }
.thk-reels__now-actions .thk-reel__btn { background: #fff; color: var(--thk-ink); border: 1px solid rgba(18,19,23,.22); backdrop-filter: none; }
.thk-reels__now-actions .thk-reel__btn:hover { background: var(--thk-yellow); border-color: var(--thk-yellow); color: var(--thk-ink); }
.thk-reels__now-actions .thk-reel__btn[hidden] { display: none; }

.thk-reels__queue { min-height: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.thk-reels__queue-title { margin: 0 0 14px; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--thk-yellow-2); }
.thk-reels__queue-list { list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; min-height: 0; flex: 1 1 auto; scrollbar-width: thin; scrollbar-color: rgba(18,19,23,.25) transparent; }
.thk-reels__queue-item { margin: 0 0 8px; }
.thk-reels__queue-btn {
	display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: center; width: 100%; text-align: left; padding: 8px 10px 8px 8px; border-radius: 14px;
	border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--thk-ink); font: inherit; transition: background .2s, border-color .2s;
}
.thk-reels__queue-btn:hover, .thk-reels__queue-btn:focus { background: rgba(18,19,23,.04); border-color: var(--thk-rule); color: var(--thk-ink); }
/* El tema pinta los botones en blanco al pasar el cursor; aquí el texto siempre va en tinta */
.thk-reels .thk-reels__queue-btn, .thk-reels .thk-reels__queue-btn:hover, .thk-reels .thk-reels__queue-btn:focus, .thk-reels .thk-reels__queue-btn:active,
.thk-reels .thk-reels__queue-btn .thk-reels__queue-name, .thk-reels .thk-reels__queue-btn:hover .thk-reels__queue-name { color: var(--thk-ink) !important; text-shadow: none; }
.thk-reels .thk-reels__queue-btn .thk-reels__queue-num, .thk-reels .thk-reels__queue-btn:hover .thk-reels__queue-num { color: rgba(18,19,23,.45) !important; }
.thk-reels .thk-reels__queue-item.is-active .thk-reels__queue-num, .thk-reels .thk-reels__queue-item.is-active .thk-reels__queue-btn:hover .thk-reels__queue-num { color: var(--thk-yellow-2) !important; }
.thk-reels .thk-reels__queue-btn .thk-reels__queue-cat, .thk-reels .thk-reels__queue-btn:hover .thk-reels__queue-cat { color: rgba(18,19,23,.55) !important; }
.thk-reels__queue-item.is-active .thk-reels__queue-btn { background: #fff; border-color: var(--thk-ink); box-shadow: inset 4px 0 0 var(--thk-yellow); }
.thk-reels__queue-thumb { width: 76px; height: 135px; border-radius: 10px; background: #111 center / cover no-repeat; overflow: hidden; position: relative; }
.thk-reels__queue-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.35), transparent 60%); }
.thk-reels__queue-num { display: block; font-family: var(--thk-serif); font-size: 1.2rem; font-weight: 700; letter-spacing: .04em; color: rgba(18,19,23,.45); margin-bottom: 4px; }
.thk-reels__queue-item.is-active .thk-reels__queue-num { color: var(--thk-yellow-2); }
.thk-reels__queue-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--thk-sans); font-weight: 700; font-size: 1.25rem; line-height: 1.3; }
.thk-reels__queue-cat { display: block; margin-top: 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(18,19,23,.5); }

@media (min-width: 900px) {
	.thk-reels__panel { display: flex; }
	/* Con panel activo, la información vive en el panel; sobre el video solo queda el degradado suave y los botones */
	.thk-reels.is-ready .thk-reel__info { display: none; }
	.thk-reels.is-ready .thk-reel__overlay { background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 35%); }
	.thk-reels.is-ready .thk-reel__actions { display: none; }
}

/* ---------- Reel ---------- */
.thk-reel {
	position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center;
	background: var(--thk-bg); color: #fff;
}
.thk-reel__media {
	position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; background: #000 center / cover no-repeat;
	overflow: hidden;
}
.thk-reel__media::before { /* difumina la portada mientras carga */
	content: ""; position: absolute; inset: 0; background: inherit; filter: blur(30px) brightness(.5); transform: scale(1.2); z-index: 0;
}
.thk-reel__video, .thk-reel__iframe, .thk-reel__oembed {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; background: #000;
}
.thk-reel__video { object-fit: cover; }
.thk-reel__xframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; background: transparent; color-scheme: normal; }
.thk-reels-card__player .thk-reels-card__xframe { width: 100%; height: 100%; border: 0; display: block; background: transparent; }
.thk-reel__oembed iframe { width: 100% !important; height: 100% !important; }
.thk-reel__external {
	position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.2rem;
}

/* Play de vidrio con anillo amarillo */
.thk-reel__playpause {
	position: absolute; inset: 0; z-index: 2; background: transparent; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; padding: 0;
}
.thk-reel__playpause svg {
	width: 72px; height: 72px; padding: 22px; box-sizing: border-box; border-radius: 50%; fill: #fff; opacity: 0; transform: scale(.6);
	background: rgba(245,239,227,.14); border: 1px solid rgba(245,239,227,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	box-shadow: 0 0 0 10px rgba(245,212,0,.16), 0 10px 30px rgba(0,0,0,.4); transition: opacity .25s, transform .25s;
}
.thk-reel.is-paused .thk-reel__playpause svg { opacity: 1; transform: scale(1); }
.thk-reel--youtube .thk-reel__playpause, .thk-reel--instagram .thk-reel__playpause, .thk-reel--tiktok .thk-reel__playpause, .thk-reel--x_embed .thk-reel__playpause, .thk-reel--oembed .thk-reel__playpause { pointer-events: none; }
.thk-reel--youtube .thk-reel__playpause { pointer-events: auto; } /* YouTube sí se controla por postMessage */

.thk-reel__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.25); z-index: 3; }
.thk-reel__progress span { display: block; height: 100%; width: 0; background: var(--thk-yellow); }

/* Overlay de texto y acciones (móvil y sin JS) */
.thk-reel__overlay {
	position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 4; pointer-events: none;
	display: flex; align-items: flex-end; width: min(100%, calc(var(--stage-h) * 9 / 16));
	background: linear-gradient(to top, rgba(8,8,12,.92) 0%, rgba(8,8,12,.4) 35%, transparent 60%);
}
.thk-reel__info { flex: 1; padding: 16px 16px 22px; min-width: 0; pointer-events: auto; }
.thk-reel__cat {
	display: inline-block; background: var(--thk-yellow); color: var(--thk-ink); font-family: var(--thk-sans); font-size: .66rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; padding: 4px 9px; border-radius: 4px; margin-bottom: 10px;
}
.thk-reel__title { margin: 0 0 6px; font-family: var(--thk-sans); font-weight: 700; font-size: 1.15rem; line-height: 1.25; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.thk-reel__desc {
	margin: 0 0 10px; font-size: .86rem; line-height: 1.4; opacity: .88; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.thk-reel__cta {
	display: inline-block; background: var(--thk-yellow); color: var(--thk-ink); font-weight: 700; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px;
	text-decoration: none; margin-bottom: 10px; transition: transform .15s, background .15s;
}
.thk-reel__cta:hover { transform: translateY(-1px); background: #fff; color: var(--thk-ink); }
.thk-reel__date { display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }

.thk-reel__actions { display: flex; flex-direction: column; gap: 14px; padding: 0 12px 26px; pointer-events: auto; }
.thk-reel__btn {
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(23,25,34,.5); color: #fff; cursor: pointer; padding: 0;
	display: grid; place-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s, color .2s, border-color .2s; text-decoration: none;
}
.thk-reel__btn:hover { background: var(--thk-yellow); border-color: var(--thk-yellow); color: var(--thk-ink); }
.thk-reel__btn svg { width: 22px; height: 22px; }
.thk-reel__mute .ico-sound { display: none; }
.thk-reels.is-unmuted .thk-reel__mute .ico-muted { display: none; }
.thk-reels.is-unmuted .thk-reel__mute .ico-sound { display: block; }

.thk-reels__toast {
	position: absolute; top: 16px; left: 50%; transform: translateX(-50%); background: var(--thk-yellow); color: var(--thk-ink); font-size: .82rem; font-weight: 700;
	padding: 8px 14px; border-radius: 999px; z-index: 9; animation: thk-toast 2s forwards;
}
@keyframes thk-toast { 0% { opacity: 0; translate: 0 -6px; } 15%, 80% { opacity: 1; translate: 0 0; } 100% { opacity: 0; } }

/* Tablet: escenario centrado sin panel */
@media (max-width: 899px) {
	.thk-reels__layout { display: block; }
	.thk-reels__stage { margin: 0 auto; }
}

/* Móvil: el reel ocupa toda la pantalla dentro de la sección */
@media (max-width: 719px) {
	.thk-reels { --stage-h: calc(var(--thk-stage-h) - 110px); }
	.thk-reels-main { padding: 22px 0 32px; }
	.thk-reels-main__head { margin: 0 16px 14px; column-gap: 0; }
	.thk-reels-main__eyebrow { font-size: .66rem; margin-bottom: 4px; }
	.thk-reels-main__title { font-size: clamp(1.45rem, 6vw, 1.9rem); border-bottom-width: 3px; padding-bottom: 9px; }
	.thk-reels-main__sub { flex-basis: 100%; margin: 10px 0 10px; font-size: .9rem; }
	.thk-reels__filters { padding: 2px 16px 14px; }
	.thk-reels__stage { border-radius: 0; width: 100vw; margin-left: calc(50% - 50vw); box-shadow: none; }
	.thk-reel__media { width: 100%; aspect-ratio: auto; }
	.thk-reel__overlay { width: 100%; }
	.thk-reel__info { padding: 16px 14px 24px; }
	.thk-reel__title { font-size: 1.2rem; }
	.thk-reel__actions { padding-bottom: 28px; }
}
body.admin-bar .thk-reels { --thk-stage-h: calc(100dvh - 32px); }

/* ---------- Grid de portadas ---------- */
.thk-reels-grid__title { margin: 0 0 14px; }
.thk-reels-grid__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.thk-reels-grid__item {
	position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #111 center / cover no-repeat; color: #fff;
	text-decoration: none; display: flex; align-items: flex-end; transition: transform .2s, box-shadow .2s;
}
.thk-reels-grid__item:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.25); color: #fff; }
.thk-reels-grid__item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thk-reels-grid__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), transparent 55%); }
.thk-reels-grid__play {
	position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.2); backdrop-filter: blur(6px);
	display: grid; place-items: center; z-index: 1;
}
.thk-reels-grid__play svg { width: 18px; height: 18px; }
.thk-reels-grid__meta { position: relative; z-index: 1; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.thk-reels-grid__cat { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--thk-accent); }
.thk-reels-grid__name { font-size: .9rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.thk-reels-grid__more { text-align: right; margin: 12px 0 0; }
.thk-reels-grid__more a { font-weight: 700; text-decoration: none; color: var(--thk-accent); }

@media (prefers-reduced-motion: reduce) {
	.thk-reels__track { scroll-behavior: auto; }
	.thk-reels-grid__item, .thk-reel__cta { transition: none; }
}

/* ---------- Carrusel horizontal (home) — Editorial oscuro con amarillo Capital ---------- */
.thk-reels-row {
	--thk-cols: var(--thk-cols-desktop, 4); --thk-gap: 22px;
	--thk-ink: #121317; --thk-ink-2: #121317; --thk-cream: #121317; /* texto tinta sobre fondo blanco */
	--thk-yellow: #f5d400; --thk-yellow-2: #c9ae00;               /* amarillo Capital; el tono cerrado es para texto sobre blanco */
	--thk-serif: "Libre Bodoni", Georgia, "Times New Roman", serif; /* titulares del sitio */
	--thk-sans: "IBM Plex Sans", system-ui, sans-serif; /* texto del sitio */
	position: relative; box-sizing: border-box; color: var(--thk-cream);
	border-radius: 0; padding: 44px 40px 40px;
	background: #ffffff; /* blanco plano, sin brillo ni retícula */
	overflow: hidden; isolation: isolate;
}
.thk-reels-row::before { content: none; }
.thk-reels-row__wrap, .thk-reels-row__more { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* Cabecera editorial: título a la izquierda sobre una línea gris, con segmento negro bajo el título */
.thk-reels-row__head {
	--thk-rule: #d6d6d6; position: relative; text-align: left; max-width: 1200px; margin: 0 auto 28px; border-bottom: 1px solid var(--thk-rule);
	display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 32px; /* título a la izquierda, subtítulo a la derecha, ambos sobre la línea */
}
.thk-reels-row__eyebrow {
	flex: 0 0 100%; display: block; margin: 0 0 6px; font-family: var(--thk-sans); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--thk-yellow-2);
}
.thk-reels-row__eyebrow::before, .thk-reels-row__eyebrow::after { content: none; }
.thk-reels-row .thk-reels-row__title {
	display: inline-block; text-align: left; margin: 0 0 -1px; padding: 0 2px 12px; color: var(--thk-cream); font-family: var(--thk-serif);
	font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.15rem); line-height: 1.15; letter-spacing: 0; text-transform: none;
	border-bottom: 4px solid var(--thk-ink); /* segmento negro sobre la línea gris */
}
.thk-reels-row .thk-reels-row__title span { display: inline; padding: 0; }
.thk-reels-row .thk-reels-row__title span::after { content: none; }
.thk-reels-row .thk-reels-row__title em { font-style: italic; color: var(--thk-yellow-2); }
.thk-reels-row__sub { flex: 1 1 260px; font-family: var(--thk-sans); margin: 0 0 14px; max-width: 520px; font-size: 1rem; line-height: 1.5; color: rgba(18,19,23,.65); }

.thk-reels-row__wrap { position: relative; }
.thk-reels-row__track {
	display: flex; gap: var(--thk-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 14px 2px 18px;
}
.thk-reels-row__track::-webkit-scrollbar { display: none; }

/* Tarjeta */
.thk-reels-card {
	position: relative; flex: 0 0 calc((100% - (var(--thk-cols) - 1) * var(--thk-gap)) / var(--thk-cols)); aspect-ratio: 9 / 16;
	/* En escritorio la tarjeta se dimensiona por altura (--thk-card-h) y se navega con las flechas */
	border-radius: 16px; overflow: hidden; background: #111 center / cover no-repeat; color: #fff; scroll-snap-align: start; cursor: pointer;
	box-shadow: 0 26px 50px -24px rgba(18,19,23,.45), 0 0 0 1px rgba(18,19,23,.06);
	transition: transform .35s ease, box-shadow .35s ease;
}
.thk-reels-card::after { /* degradado para legibilidad */
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 28%, transparent 45%, rgba(8,8,12,.94) 100%);
}
@media (hover: hover) {
	.thk-reels-card:hover { transform: translateY(-8px); box-shadow: 0 40px 70px -26px rgba(245,212,0,.35), 0 0 0 1.5px var(--thk-yellow); }
}
.thk-reels-card__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.thk-reels-card:hover .thk-reels-card__preview { transform: scale(1.04); }
.thk-reels-card__player { position: absolute; inset: 0; z-index: 2; display: none; background: #000; }
.thk-reels-card__player video, .thk-reels-card__player iframe { width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }
.thk-reels-card.is-playing .thk-reels-card__player { display: block; }
.thk-reels-card.is-playing .thk-reels-card__head, .thk-reels-card.is-playing .thk-reels-card__play, .thk-reels-card.is-playing::after { display: none; }

/* Texto abajo: sello amarillo + título serif */
.thk-reels-card__head {
	position: absolute; top: auto; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; gap: 10px; align-items: flex-end;
	padding: 48px 20px 22px; background: none; pointer-events: none;
}
.thk-reels-card__avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px var(--thk-yellow); }
.thk-reels-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.thk-reels-card__text { min-width: 0; display: flex; flex-direction: column-reverse; }
.thk-reels-card__site {
	font-family: var(--thk-sans); font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--thk-yellow); opacity: 1; margin-bottom: 10px;
}
.thk-reels-card__name { /* estilo titular de tarjeta: sans bold, hasta 3 líneas */
	font-family: var(--thk-sans); font-weight: 700; font-size: 1.32rem; line-height: 1.25; letter-spacing: 0; color: #fff;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 8px rgba(0,0,0,.55);
}

/* Play de vidrio con anillo amarillo */
.thk-reels-card__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: 64px; height: 64px; border-radius: 50%; cursor: pointer; padding: 0;
	border: 1px solid rgba(245,239,227,.55); background: rgba(245,239,227,.12); color: #fff; display: grid; place-items: center;
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	box-shadow: 0 0 0 10px rgba(245,212,0,.12), 0 10px 30px rgba(0,0,0,.4);
	transition: transform .25s ease, background .25s ease, box-shadow .25s ease, color .25s ease;
}
.thk-reels-card__play svg { width: 22px; height: 22px; margin-left: 4px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.thk-reels-card:hover .thk-reels-card__play {
	transform: translate(-50%, -50%) scale(1.08); background: var(--thk-yellow); border-color: var(--thk-yellow-2); color: var(--thk-ink);
	box-shadow: 0 0 0 12px rgba(245,212,0,.22), 0 12px 30px rgba(0,0,0,.45);
}
.thk-reels-card .thk-reels-card__close {
	position: absolute; top: 12px; right: 12px; z-index: 4; display: none;
	width: 30px; height: 30px; min-width: 0; min-height: 0; margin: 0; padding: 0;
	background: none; border: 0; border-radius: 0; box-shadow: none; outline: none;
	color: #fff; line-height: 0; cursor: pointer; opacity: .9; transition: opacity .2s, transform .2s;
}
.thk-reels-card .thk-reels-card__close svg {
	width: 20px; height: 20px; display: block; margin: auto; filter: drop-shadow(0 1px 3px rgba(0,0,0,.65));
}
.thk-reels-card .thk-reels-card__close:hover,
.thk-reels-card .thk-reels-card__close:focus { background: none; color: var(--thk-yellow, #f5d400); opacity: 1; transform: scale(1.1); }
.thk-reels-card .thk-reels-card__close:focus-visible { outline: 2px solid var(--thk-yellow, #f5d400); outline-offset: 2px; }
.thk-reels-card.is-playing .thk-reels-card__close { display: block; }

/* Flechas de vidrio */
.thk-reels-row__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; padding: 0;
	border: 1px solid rgba(18,19,23,.12); background: rgba(255,255,255,.92); color: var(--thk-ink);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px -10px rgba(0,0,0,.25);
	display: none; place-items: center; transition: background .2s, transform .2s, border-color .2s, color .2s;
}
.thk-reels-row__arrow:hover { background: var(--thk-yellow); border-color: var(--thk-yellow); color: var(--thk-ink); transform: translateY(-50%) scale(1.06); }
.thk-reels-row__arrow svg { width: 20px; height: 20px; display: block; }
.thk-reels-row__arrow--prev { left: -24px; }
.thk-reels-row__arrow--next { right: -24px; background: var(--thk-ink); border-color: var(--thk-ink); color: #fff; }
.thk-reels-row__arrow[disabled] { opacity: 0; pointer-events: none; }
@media (hover: hover) and (min-width: 900px) { .thk-reels-row__arrow { display: grid; } }
@media (min-width: 900px) {
	.thk-reels-row { --thk-card-h: 530px; }
	.thk-reels-card { flex-basis: calc(var(--thk-card-h) * 9 / 16); height: var(--thk-card-h); }
}

/* CTA en píldora */
.thk-reels-row__more { text-align: center; margin: 22px auto 0; padding-top: 22px; border-top: 1px solid #d6d6d6; }
.thk-reels-row .thk-reels-row__more a, .thk-reels-row .thk-reels-row__more a:visited {
	display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px; border-radius: 999px; border: 1px solid var(--thk-ink);
	background: transparent; color: var(--thk-ink);
	font-family: var(--thk-sans) !important; font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border-bottom-width: 1px;
	transition: background .25s, color .25s, transform .25s;
}
.thk-reels-row__more a span { width: 26px; height: 26px; border-radius: 50%; background: var(--thk-ink); color: var(--thk-yellow); display: grid; place-items: center; font-size: 14px; line-height: 1; transition: background .25s, color .25s; }
.thk-reels-row .thk-reels-row__more a:hover, .thk-reels-row .thk-reels-row__more a:focus { background: var(--thk-ink); color: #fff !important; transform: translateY(-2px); }
.thk-reels-row .thk-reels-row__more a:hover span, .thk-reels-row .thk-reels-row__more a:focus span { background: var(--thk-yellow); color: var(--thk-ink); }

/* Móvil */
@media (max-width: 899px) {
	.thk-reels-row { --thk-cols: 2.4; --thk-gap: 12px; padding: 40px 16px 36px; }
	.thk-reels-row__head { margin-bottom: 20px; }
	.thk-reels-row .thk-reels-row__title { font-size: clamp(1.35rem, 5.5vw, 1.8rem); border-bottom-width: 3px; padding-bottom: 9px; }
	.thk-reels-row__sub { flex-basis: 100%; margin: 12px 0 10px; font-size: .92rem; }
	.thk-reels-row__track { padding-left: 4px; padding-right: 4px; scroll-padding-left: 4px; }
	.thk-reels-card { border-radius: 16px; }
	.thk-reels-card__head { padding: 32px 14px 14px; }
	.thk-reels-card__name { font-size: 1.1rem; }
	.thk-reels-card__site { font-size: .68rem; }
	.thk-reels-card__play { width: 56px; height: 56px; }
	.thk-reels-card__play svg { width: 20px; height: 20px; }
}
@media (max-width: 520px) {
	.thk-reels-row { --thk-cols: 1.25; --thk-gap: 10px; }
	.thk-reels-card__name { font-size: 1.2rem; }
	.thk-reels-card__play { width: 60px; height: 60px; }
}

/* Variante oscura (fondo="oscuro"): negro #0e0f13 con amarillo Capital */
.thk-reels-row--oscuro {
	--thk-ink: #0e0f13; --thk-cream: #f5efe3; --thk-yellow-2: #ffe84d; color: var(--thk-cream);
	background: radial-gradient(900px 340px at 50% -10%, rgba(245,212,0,.14), transparent 60%) #0e0f13;
}
.thk-reels-row--oscuro { background: #0e0f13; }
.thk-reels-row--oscuro .thk-reels-row__head { --thk-rule: rgba(255,255,255,.18); }
.thk-reels-row--oscuro .thk-reels-row__title { border-bottom-color: var(--thk-yellow); }
.thk-reels-row--oscuro .thk-reels-row__more { border-top-color: rgba(255,255,255,.18); }
.thk-reels-row--oscuro .thk-reels-row__eyebrow { color: var(--thk-yellow); }
.thk-reels-row--oscuro .thk-reels-row__sub { color: rgba(245,239,227,.62); }
.thk-reels-row--oscuro .thk-reels-card { box-shadow: 0 30px 60px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06); }
.thk-reels-row--oscuro .thk-reels-row__arrow { border-color: rgba(245,239,227,.25); background: rgba(23,25,34,.72); color: var(--thk-cream); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.thk-reels-row--oscuro .thk-reels-row__arrow--next { background: rgba(23,25,34,.72); border-color: var(--thk-yellow); color: var(--thk-yellow); }
.thk-reels-row--oscuro .thk-reels-row__arrow:hover { background: var(--thk-yellow); border-color: var(--thk-yellow); color: var(--thk-ink); }
.thk-reels-row--oscuro .thk-reels-row__more a { border-color: var(--thk-yellow); color: var(--thk-cream); background: linear-gradient(90deg, rgba(245,212,0,.14), transparent); }
.thk-reels-row--oscuro .thk-reels-row__more a span { background: var(--thk-yellow); color: var(--thk-ink); }
.thk-reels-row--oscuro .thk-reels-row__more a:hover, .thk-reels-row--oscuro .thk-reels-row__more a:focus { background: var(--thk-yellow); color: var(--thk-ink) !important; }
.thk-reels-row--oscuro .thk-reels-row__more a:hover span { background: var(--thk-ink); color: var(--thk-yellow); }