/* ==========================================================================
   Michel Gallero — Página VIDEOS (rediseño editorial)
   Namespaced .vid-* . Tokens y componentes compartidos en main.css.
   ========================================================================== */

body { background: var(--mg-bg); }

.vid-main { padding-top: 150px; } /* el header es absolute */

/* ---------------------------------------------------------------- HERO ---- */
.vid-hero { text-align: center; padding-bottom: 72px; }
.vid-hero__eyebrow { justify-content: center; margin: 0 0 26px; }
.vid-hero__title {
	font-family: var(--mg-font-stat); /* Akira Expanded */
	font-weight: 800;
	font-size: clamp(64px, 11vw, 168px);
	line-height: 0.9;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--mg-white);
	margin: 0 0 26px;
}
.vid-hero__lead {
	max-width: 600px; margin: 0 auto;
	font-family: var(--mg-font-body); font-size: var(--mg-text-size); line-height: 1.6; color: var(--mg-text);
}

/* --------------------------------------------------------------- CARDS ---- */
.vid-cards { display: flex; gap: 14px; }
.vid-card {
	position: relative;
	flex: 1 1 0;
	max-width: 360px;
	aspect-ratio: 345 / 517;
	overflow: hidden;
	padding: 0; border: 0; border-radius: 0;
	background: #000; cursor: pointer; display: block;
}
.vid-card__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.vid-card:hover .vid-card__img { transform: scale(1.06); }
.vid-card__play {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	z-index: 3; width: 56px; height: 56px; padding: 0;
	display: flex; align-items: center; justify-content: center;
	background: var(--mg-white); border: 0; border-radius: 50%; cursor: pointer;
	transition: transform .25s ease, background .25s ease;
}
.vid-card__play img { width: 16px; height: auto; filter: brightness(0); }
.vid-card:hover .vid-card__play { transform: translate(-50%, -50%) scale(1.1); background: var(--mg-yellow); }
/* nombre + tag sobre la card */
.vid-card__meta {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
	padding: 22px 20px;
	background: linear-gradient(to top, rgba(13,11,13,0.9) 0%, rgba(13,11,13,0) 100%);
}
.vid-card__name {
	font-family: var(--mg-font-display); font-weight: 700; font-size: 19px;
	letter-spacing: 0.5px; text-transform: uppercase; color: var(--mg-white); line-height: 1;
}
.vid-card__tag {
	font-family: var(--mg-font-narrow); font-weight: 500; font-size: 11px;
	letter-spacing: 1.5px; text-transform: uppercase; color: var(--mg-yellow); white-space: nowrap;
}

/* ----------------------------------------------- ESTRELLAS (marquee) ---- */
.vid-stars {
	text-align: center;
	margin-top: 90px; padding: 70px 0;
	border-top: 1px solid var(--mg-line);
	border-bottom: 1px solid var(--mg-line);
}
.vid-stars__eyebrow { justify-content: center; margin: 0 0 44px; }
.vid-stars__marquee span {
	font-family: var(--mg-font-display); font-weight: 700; font-size: 24px;
	letter-spacing: 0.5px; text-transform: uppercase; color: var(--mg-text); opacity: 0.85;
}

/* ------------------------------------------------------------- CIERRE ---- */
.vid-closing { text-align: center; padding: 100px 0; }
.vid-closing__text {
	max-width: 820px; margin: 0 auto;
	font-family: var(--mg-font-display); font-weight: 600;
	font-size: clamp(24px, 2.6vw, 38px); line-height: 1.35; letter-spacing: 0.5px;
	text-transform: uppercase; color: var(--mg-muted);
}
.vid-closing__text strong { color: var(--mg-white); font-weight: 600; }

/* --------------------------------------------- MÁS EN INSTAGRAM (cierre) --- */
.vid-more {
	position: relative;
	overflow: hidden;
	padding: 120px 0 130px;
	background: var(--mg-bg);
}
/* resplandor dorado cinematográfico, anclado bajo el film-strip */
.vid-more__glow {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(46% 62% at 78% 50%, rgba(255, 205, 99, 0.13), rgba(13, 11, 13, 0) 70%);
}
.vid-more .mg-container { position: relative; z-index: 1; }
.vid-more__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 64px;
}

/* --- columna texto --- */
.vid-more__eyebrow { margin: 0 0 26px; }
.vid-more__title {
	font-family: var(--mg-font-display); /* Oswald */
	font-weight: 700;
	font-size: clamp(44px, 5vw, 78px);
	line-height: 0.98;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--mg-white);
	margin: 0 0 24px;
}
.vid-more__lead {
	max-width: 440px;
	font-family: var(--mg-font-body);
	font-size: var(--mg-text-size);
	line-height: 1.6;
	color: var(--mg-text);
	margin: 0 0 38px;
}
.vid-more__btn { margin-bottom: 24px; }
.vid-more__handle {
	font-family: var(--mg-font-narrow);
	font-weight: 500; font-size: 13px; letter-spacing: 2px;
	text-transform: uppercase; color: var(--mg-gold-muted);
	margin: 0;
}

/* --- columna film-strip (abanico de frames 9:16) --- */
.vid-more__strip {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 14px;
	padding: 28px 0;
}
.vid-more__frame {
	position: relative;
	flex: 0 0 auto;
	width: clamp(110px, 13vw, 150px);
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: 3px;
	background: #000;
	box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
	filter: grayscale(1) contrast(1.05) brightness(0.92);
	/* abanico: rotación simétrica + arco hacia abajo en los extremos */
	transform:
		rotate(calc((var(--i) - 1.5) * 4deg))
		translateY(calc(abs(var(--i) - 1.5) * 9px));
	transition: transform .55s cubic-bezier(.2, .7, .2, 1), filter .55s ease;
}
/* fallback sin abs() (navegadores viejos): rotación sin el arco */
@supports not (top: abs(1px)) {
	.vid-more__frame { transform: rotate(calc((var(--i) - 1.5) * 4deg)); }
}
.vid-more__frame img { width: 100%; height: 100%; object-fit: cover; }
/* hover sobre el bloque: se enderezan, recuperan color y suben */
.vid-more__strip:hover .vid-more__frame {
	transform: rotate(0deg) translateY(-6px);
	filter: grayscale(0) contrast(1) brightness(1);
}
/* badge de Instagram dorado, sobre la esquina del strip */
.vid-more__ig {
	position: absolute; z-index: 3;
	right: 4px; bottom: 0;
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--mg-yellow);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
	transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.vid-more__ig img { width: 26px; height: 26px; filter: brightness(0); }
.vid-more__strip:hover .vid-more__ig { transform: scale(1.08) rotate(-6deg); }
@media (prefers-reduced-motion: reduce) {
	.vid-more__frame, .vid-more__ig { transition: none; }
}

/* ---------------------------------------------------------- RESPONSIVE --- */
@media (max-width: 860px) {
	.vid-cards { flex-wrap: wrap; }
	.vid-card { flex: 1 1 45%; max-width: none; }

	/* Más en Instagram: apila texto sobre film-strip, todo centrado */
	.vid-more { padding: 80px 0 90px; }
	.vid-more__glow { background: radial-gradient(70% 40% at 50% 80%, rgba(255, 205, 99, 0.14), rgba(13, 11, 13, 0) 70%); }
	.vid-more__inner { grid-template-columns: 1fr; gap: 48px; text-align: center; }
	.vid-more__eyebrow { justify-content: center; }
	.vid-more__lead { max-width: 480px; margin-left: auto; margin-right: auto; }
	.vid-more__btn { margin-bottom: 22px; }
	.vid-more__strip { padding: 16px 0 8px; }
	.vid-more__ig { right: 50%; transform: translateX(86px); bottom: -6px; }
}
@media (max-width: 600px) {
	/* Ritmo vertical móvil: reducción moderada (~40-45%) */
	.vid-main { padding-top: 96px; }
	.vid-stars { margin-top: 56px; padding: 44px 0; }

	/* "Más en Instagram": el film-strip de 4 frames (≈482px) inflaba el track 1fr
	   y forzaba el layout a ~340px. Encogerlos para que entren en pantallas chicas. */
	.vid-more__inner { min-width: 0; }
	.vid-more__strip { gap: 8px; }
	.vid-more__frame { width: clamp(54px, 18vw, 110px); }
}