/* HTF Stories – estilos. Personalizable con variables CSS (ver README). */
.htfs {
	--htfs-accent: #38a170;
	--htfs-dark: #1a4731;
	--htfs-radius: 20px;
	--htfs-gap: 14px;
	--htfs-card-w: clamp(150px, 44vw, 220px);
	position: relative;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
}
.htfs *, .htfs *::before, .htfs *::after { box-sizing: border-box; }
.htfs__heading {
	margin: 0 0 16px;
	color: var(--htfs-dark);
	font-weight: 700;
	line-height: 1.15;
}
.htfs__wrap { position: relative; }

/* Pista horizontal con desplazamiento táctil */
.htfs__track {
	display: flex;
	gap: var(--htfs-gap);
	margin: 0;
	padding: 4px 2px 14px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: 2px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.htfs__track::-webkit-scrollbar { display: none; }
.htfs__item { flex: 0 0 var(--htfs-card-w); margin: 0; padding: 0; scroll-snap-align: start; position: relative; }

/* Tarjeta vertical 9:16 */
.htfs__card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	padding: 0;
	border: 0;
	border-radius: var(--htfs-radius);
	overflow: hidden;
	background: linear-gradient(160deg, var(--htfs-dark), var(--htfs-accent));
	color: #fff;
	cursor: pointer;
	text-align: left;
	box-shadow: 0 10px 28px rgba(26, 71, 50, 0.22);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}
.htfs__card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(26, 71, 50, 0.3); }
.htfs__card:focus-visible { outline: 3px solid var(--htfs-accent); outline-offset: 3px; }
.htfs__media, .htfs__img, .htfs__ph { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.htfs__img { object-fit: cover; transition: transform 0.5s ease; }
.htfs__card:hover .htfs__img { transform: scale(1.04); }
.htfs__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 52%);
	pointer-events: none;
}
.htfs__play {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--htfs-dark);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.htfs__caption {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.25;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Flechas (solo en ordenadores con ratón) */
.htfs__nav {
	display: none;
	position: absolute;
	top: calc(50% - 14px);
	z-index: 5;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--htfs-dark);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	place-items: center;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.htfs__nav--prev { left: -12px; }
.htfs__nav--next { right: -12px; }
.htfs__nav:hover:not(:disabled) { transform: scale(1.06); }
.htfs__nav:disabled { opacity: 0; pointer-events: none; }
.htfs--static .htfs__nav { display: none !important; }
@media (hover: hover) and (pointer: fine) {
	.htfs__nav { display: grid; }
}
@media (min-width: 900px) {
	.htfs { --htfs-card-w: 220px; --htfs-gap: 18px; }
}

/* Reproducción dentro de la tarjeta */
.htfs__inline {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	border-radius: var(--htfs-radius);
	overflow: hidden;
	background: #000;
	box-shadow: 0 10px 28px rgba(26, 71, 50, 0.22);
}
.htfs__inline video { width: 100%; height: 100%; object-fit: cover; display: block; }
.htfs__inline-close {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

/* Ventana emergente */
.htfs-lock { overflow: hidden; }
.htfs-modal { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; }
.htfs-modal[hidden] { display: none; }
.htfs-modal__backdrop { position: absolute; inset: 0; background: rgba(8, 20, 14, 0.88); backdrop-filter: blur(6px); }
.htfs-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(420px, 100vw);
	height: min(100dvh, 860px);
	background: #0b1a12;
	overflow: hidden;
	color: #fff;
}
@media (min-width: 600px) {
	.htfs-modal__panel { height: min(92dvh, 860px); border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
}
.htfs-modal__stage { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; background: #000; }
.htfs-modal__stage video,
.htfs-modal__stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
.htfs-modal__embed { width: 100%; height: 100%; border: 0; background: #fff; }
.htfs-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 4;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.htfs-modal__nav {
	position: absolute;
	top: 45%;
	z-index: 4;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #1a4731;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.htfs-modal__nav[hidden] { display: none; }
.htfs-modal__nav--prev { left: 8px; }
.htfs-modal__nav--next { right: 8px; }
.htfs-modal__bar { flex: 0 0 auto; padding: 14px 16px 18px; background: #0b1a12; }
.htfs-modal__title { margin: 0 0 10px; font-size: 1rem; font-weight: 600; }
.htfs-modal__title:empty { display: none; }
.htfs-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.htfs-modal__actions:not(:has(a:not([hidden]))) { display: none; }
.htfs-modal__btn {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--htfs-accent, #38a170);
	color: #fff;
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
}
.htfs-modal__btn[hidden] { display: none; }
.htfs-modal__btn--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); }
.htfs-modal__btn:hover { filter: brightness(1.08); }

.htfs-empty { padding: 12px 16px; border: 1px dashed #aaa; border-radius: 10px; font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
	.htfs__card, .htfs__img, .htfs__nav { transition: none; }
}

/* Compatibilidad con temas/constructores que fuerzan img{height:auto} */
.htfs .htfs__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;margin:0;border-radius:0}
/* Espacio para que no se corten las sombras */
.htfs .htfs__track{padding:10px 18px 34px;margin:0 -18px}

/* Entrada escalonada al aparecer en pantalla (solo si hay JavaScript) */
.htfs--js .htfs__item{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i,0)*70ms)}
.htfs--in .htfs__item{opacity:1;transform:none}
.htfs .htfs__pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;display:block}
@media (prefers-reduced-motion: reduce){.htfs--js .htfs__item{opacity:1;transform:none;transition:none}}

/* Sin título ni botones: la barra solo aparece si hay un enlace a la publicación original */
.htfs-modal__bar:not(:has(a:not([hidden]))){display:none}

/* Desplazamiento continuo: sin imán para que el movimiento sea fluido */
.htfs--auto .htfs__track{scroll-snap-type:none}

/* Tarjetas sin texto: solo imagen o vídeo */
.htfs .htfs__caption{display:none}
.htfs .htfs__card::after{display:none}