/* ===== Grift (de pago): si copias los archivos en assets/fonts se usan solos ===== */
@font-face { font-family: 'Grift'; font-weight: 400; font-display: swap;
	src: url('../fonts/Grift-Regular.woff2') format('woff2'), url('../fonts/Grift-Regular.woff') format('woff'), url('../fonts/Grift-Regular.otf') format('opentype'); }
@font-face { font-family: 'Grift'; font-weight: 500; font-display: swap;
	src: url('../fonts/Grift-Medium.woff2') format('woff2'), url('../fonts/Grift-Medium.woff') format('woff'), url('../fonts/Grift-Medium.otf') format('opentype'); }
@font-face { font-family: 'Grift'; font-weight: 700; font-display: swap;
	src: url('../fonts/Grift-Bold.woff2') format('woff2'), url('../fonts/Grift-Bold.woff') format('woff'), url('../fonts/Grift-Bold.otf') format('opentype'); }

:root {
	--bg: #0b0b0c;
	--bg-2: #141416;
	--fg: #f4f2ee;
	--fg-2: #a7a39c;
	--line: rgba(255,255,255,.12);
	--accent: #e9e4da;
	--beg: var(--fg);
	--int: var(--fg);
	--adv: var(--fg);
	--font: 'Grift', 'Red Hat Display', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
	--gutter: clamp(16px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0; background: var(--bg); color: var(--fg);
	font-family: var(--font); font-weight: 400; line-height: 1.45;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ===== Header ===== */
.fs-header {
	position: fixed; inset: 0 0 auto 0; z-index: 20;
	display: flex; align-items: center; justify-content: space-between;
	padding: 22px var(--gutter);
	mix-blend-mode: difference;
}
.fs-brand { display: flex; flex-direction: column; gap: 3px; }
.fs-brand__name { font-weight: 700; letter-spacing: .22em; text-transform: uppercase; font-size: 13px; }
.fs-brand__handle { font-size: 10px; letter-spacing: .12em; opacity: .65; }
.fs-nav { display: flex; gap: 28px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.fs-nav a { opacity: .6; transition: opacity .25s; padding-bottom: 4px; border-bottom: 1px solid transparent; }
.fs-nav a:hover, .fs-nav a.is-active { opacity: 1; border-bottom-color: currentColor; }
.is-cover .fs-nav { display: none; }
body:not(.is-cover) .fs-header { background: var(--bg); mix-blend-mode: normal; }

/* ===== Portada ===== */
.fs-cover {
	position: relative; min-height: 100svh; overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end;
}
.fs-cover__content {
	position: absolute; top: 64px; right: var(--gutter); z-index: 3;
	padding: 0; text-align: left;
}
.fs-cover__content .fs-cover__menu { align-items: flex-start; }
.fs-cover__content .fs-cover__link { grid-template-columns: auto auto; min-width: 0; justify-content: start; gap: 10px; padding: 2px 0; }
.fs-cover__content .fs-cover__count { display: none; }
.fs-cover__content .fs-cover__num { font-size: 9px; }
.fs-cover__content .fs-cover__word { font-size: clamp(14px, 2.5vw, 33px); }
.fs-cover__content .fs-cover__word::after { bottom: 1px; height: 1px; }
.fs-cover__content .fs-cover__link:hover .fs-cover__word { transform: translateX(4px); }
.fs-cover__bg, .fs-cover__bg img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.fs-cover__bg img {
	animation: fs-zoom 22s ease-out forwards;
	filter: saturate(0) contrast(1.05);
}
@keyframes fs-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.fs-cover__veil {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.75) 100%),
		linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 55%);
}
.fs-cover__content {
	z-index: 3;
	padding: 0;
	animation: fs-up 1.2s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes fs-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.fs-cover__kicker {
	margin: 0 0 18px; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--fg-2);
}
.fs-cover__menu { display: flex; flex-direction: column; gap: 2px; }
.fs-cover__link {
	display: grid; grid-template-columns: 2.2em 1fr auto; align-items: baseline; gap: 18px;
	width: fit-content; min-width: min(560px, 100%);
	padding: 6px 0;
	opacity: 0; animation: fs-up .9s cubic-bezier(.2,.7,.2,1) both;
	animation-delay: calc(.25s + var(--i) * .12s);
}
.fs-cover__num { font-size: 13px; letter-spacing: .2em; color: var(--fg-2); }
.fs-cover__word {
	font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; line-height: .95;
	font-size: clamp(54px, 10vw, 132px);
	position: relative; display: inline-block;
	transition: letter-spacing .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
}
.fs-cover__word::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; background: currentColor;
	transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.fs-cover__link:hover .fs-cover__word { letter-spacing: .03em; transform: translateX(10px); }
.fs-cover__link:hover .fs-cover__word::after { transform: scaleX(1); }
.fs-cover__count { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); opacity: 0; transition: opacity .3s; }
.fs-cover__link:hover .fs-cover__count { opacity: 1; }
.fs-cover__foot {
	position: relative; z-index: 2;
	display: flex; justify-content: space-between; gap: 16px;
	padding: 0 var(--gutter) 24px;
	font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-2);
}
@media (max-width: 640px) {
	.fs-cover__link { grid-template-columns: 1.8em 1fr; }
	.fs-cover__count { display: none; }
	.fs-cover__foot span:last-child { display: none; }
}

/* ===== Portfolio ===== */
.fs-portfolio { padding: 120px var(--gutter) 80px; }
.fs-eyebrow { margin: 0 0 10px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--fg-2); }
.fs-eyebrow a:hover { color: var(--fg); }
.fs-portfolio__title {
	margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; line-height: .9;
	font-size: clamp(64px, 12vw, 160px);
}
.fs-portfolio__meta { margin: 14px 0 0; color: var(--fg-2); font-size: 14px; letter-spacing: .05em; }

.fs-filters {
	position: sticky; top: 73px; z-index: 10;
	margin: 36px calc(-1 * var(--gutter)) 28px; padding: 14px var(--gutter);
	background: var(--bg);
	border: 0;
	display: flex; flex-direction: column; gap: 10px;
}
.fs-filters__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fs-filters__label { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--fg-2); min-width: 46px; }
.fs-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.fs-pill {
	padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line);
	font-size: 12px; letter-spacing: .06em; color: var(--fg-2);
	transition: color .2s, border-color .2s, background .2s;
}
.fs-pill:hover { color: var(--fg); border-color: rgba(255,255,255,.35); }
.fs-pill.is-on { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.fs-pill--beginners.is-on { background: var(--beg); border-color: var(--beg); }
.fs-pill--intermediate.is-on { background: var(--int); border-color: var(--int); }
.fs-pill--advanced.is-on { background: var(--adv); border-color: var(--adv); }
.fs-search { margin-left: auto; flex: none; }
.fs-search input {
	width: var(--card-w, min(260px, 70vw)); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
	background: var(--bg-2); color: var(--fg); font: inherit; font-size: 13px; outline: none;
}
.fs-search input:focus { border-color: rgba(255,255,255,.4); }
@media (max-width: 700px) {
	.fs-filters { position: static; }
	.fs-pills { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
	.fs-pills::-webkit-scrollbar { display: none; }
	.fs-pill { white-space: nowrap; }
	.fs-search { margin-left: 0; width: 100%; }
	.fs-search input { width: 100%; }
}

/* Grid de tarjetas 9:16 */
.fs-grid {
	display: grid; gap: 28px 18px;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
@media (min-width: 900px) { .fs-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 36px 22px; } }
.fs-card { animation: fs-in .4s ease both; }
.fs-card[hidden] { display: none; }
@keyframes fs-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fs-card__media {
	position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden;
	border-radius: 6px; background: var(--bg-2);
}
.fs-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s; filter: brightness(.85);
}
.fs-card__media:hover img { transform: scale(1.05); filter: brightness(1); }
.fs-card__play {
	position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
	border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.25);
	backdrop-filter: blur(4px); opacity: 0; transform: scale(.85); transition: opacity .3s, transform .3s;
}
.fs-card__play::after {
	content: ''; position: absolute; left: 21px; top: 17px;
	border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #fff;
}
.fs-card__media:hover .fs-card__play { opacity: 1; transform: scale(1); }
.fs-badge {
	position: absolute; left: 10px; top: 10px; padding: 4px 8px; border-radius: 4px;
	font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #0b0b0c;
	background: var(--fg);
}
.fs-badge--beginners { background: var(--beg); }
.fs-badge--intermediate { background: var(--int); }
.fs-badge--advanced { background: var(--adv); }
.fs-card__dur, .fs-card__soon {
	position: absolute; right: 10px; bottom: 10px; padding: 3px 7px; border-radius: 4px;
	font-size: 10px; letter-spacing: .08em; background: rgba(0,0,0,.65); color: var(--fg);
}
.fs-card__soon { left: 10px; right: auto; color: var(--fg-2); text-transform: uppercase; letter-spacing: .14em; }
.fs-card__title { margin: 12px 0 2px; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: .01em; }
.fs-card__topic { margin: 0; font-size: 12px; color: var(--fg-2); letter-spacing: .06em; }
.fs-empty { padding: 60px 0; text-align: center; color: var(--fg-2); }

/* Modal */
.fs-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.fs-modal[hidden] { display: none; }
.fs-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.85); backdrop-filter: blur(6px); }
.fs-modal__box {
	position: relative; width: min(420px, 100%); max-height: 100%; overflow: auto;
	animation: fs-in .3s ease both;
}
.fs-modal__box.is-wide { width: min(960px, 100%); }
.fs-modal__player {
	aspect-ratio: 9 / 16; background: #000; border-radius: 8px; overflow: hidden; position: relative;
}
.fs-modal__box.is-wide .fs-modal__player { aspect-ratio: 16 / 9; }
.fs-modal__player iframe, .fs-modal__player video, .fs-modal__player img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.fs-modal__player .fs-card__soon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 12px; padding: 8px 14px; }
.fs-modal__title { margin: 16px 0 4px; font-size: 20px; font-weight: 700; }
.fs-modal__sub { margin: 0; color: var(--fg-2); font-size: 13px; letter-spacing: .06em; }
.fs-modal__close {
	position: absolute; right: -4px; top: -44px; font-size: 30px; line-height: 1; color: var(--fg); opacity: .7;
}
.fs-modal__close:hover { opacity: 1; }
body.fs-lock { overflow: hidden; }

/* ===== Single ===== */
.fs-single { max-width: 760px; margin: 0 auto; padding: 130px var(--gutter) 80px; }
.fs-single__title { margin: 0 0 28px; font-size: clamp(34px, 6vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.fs-single__player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
.fs-single__player.is-empty { aspect-ratio: 9 / 16; max-width: 360px; }
.fs-single__player iframe, .fs-single__player video, .fs-single__player img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.fs-single__player .fs-card__soon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.fs-single .fs-badge { position: static; display: inline-block; }
.fs-single__body { margin-top: 28px; color: var(--fg-2); font-size: 17px; max-width: 60ch; }
.fs-back { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.fs-back:hover { color: var(--fg); }

/* ===== Footer ===== */
.fs-footer {
	display: flex; justify-content: space-between; padding: 24px var(--gutter);
	font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-2);
}

/* Vídeos subidos: sin recortar, vertical u horizontal */
.fs-modal__player video, .fs-single__player video { object-fit: contain; background: #000; }
.fs-single__player.is-portrait { aspect-ratio: 9 / 16; max-width: 420px; }