/* 03 · Videos: horizontal lane on ink (continues "About") driven by vertical scroll */
.videos { background: var(--ink); color: var(--cream); position: relative; }
.videos__pin { height: 100vh; height: 100svh; overflow: hidden; position: relative; }
.videos__track {
  height: 100%; display: flex; align-items: center; gap: clamp(28px, 4vw, 72px);
  padding: calc(var(--nav-h) + 16px) var(--gutter) 48px; width: max-content; will-change: transform;
}
.videos__head { width: min(560px, 82vw); flex: none; display: grid; gap: 22px; }
.videos__num { color: var(--orange); }
.videos__title { font-size: clamp(40px, 5.6vw, 96px); }
.videos__text { font-size: clamp(17px, 1.4vw, 20px); color: rgba(246, 241, 234, .75); max-width: 40ch; }
.videos__hint { color: rgba(246, 241, 234, .55); }

/* Video height is capped so the title and description always fit below without overlapping */
.vcard { flex: none; width: min(clamp(190px, 22vw, 300px), calc((100svh - var(--nav-h) - 330px) * .5625)); display: grid; gap: 14px; align-content: start; text-decoration: none; color: inherit; }
.vcard:nth-of-type(even) { margin-top: 4vh; }
.vcard__title, .vcard__desc, .vcard__link { position: relative; z-index: 1; }
.vcard__frame {
  position: relative; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden;
  background: #1e1b18; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); outline: 1px solid rgba(246, 241, 234, .08);
  transition: transform .7s var(--ease-out);
}
.vcard:hover .vcard__frame { transform: scale(1.025) rotate(-.6deg); }
.vcard__frame video, .vcard__frame img { width: 100%; height: 100%; object-fit: cover; }
.vcard__empty {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px;
  background: radial-gradient(90% 60% at 50% 30%, #2b2420 0%, var(--ink) 70%); color: rgba(246, 241, 234, .55);
}
.vcard__empty span { font: 500 11px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.vcard__play { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--orange); display: grid; place-items: center; margin: 0 auto 14px; }
.vcard__play::before { content: ""; border-left: 14px solid var(--orange); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.vcard__n { position: absolute; top: 16px; left: 18px; z-index: 2; font: 500 12px var(--font-mono); color: var(--orange); }
.vcard__title { font: 700 clamp(18px, 1.5vw, 22px)/1.15 var(--font-display); letter-spacing: -.01em; }
.vcard__desc { font-size: 15px; color: rgba(246, 241, 234, .7); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vcard__link { font: 500 12px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--orange); }

.videos__progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px; height: 2px; background: rgba(246, 241, 234, .14); }
.videos__progress span { display: block; height: 100%; background: var(--orange); transform-origin: left; transform: scaleX(0); }

/* Without animations: lane with regular horizontal scroll */
.is-reduced .videos__pin, .no-js .videos__pin { height: auto; overflow-x: auto; }
.is-reduced .videos__track, .no-js .videos__track { height: auto; padding-block: 120px; }

/* Final "Hay más cada semana" card */
.vcard__frame--follow {
  display: grid; align-content: end; gap: 10px; padding: 26px; color: var(--cream);
  background: radial-gradient(120% 70% at 30% 10%, #3a2a1f 0%, var(--ink) 65%);
}
.vcard__follow-at { position: absolute; top: 7%; right: 8%; font: 800 clamp(96px, 11vw, 170px)/1 var(--font-display); color: var(--orange); opacity: .9; transition: transform .8s var(--ease-out); }
.vcard--follow:hover .vcard__follow-at { transform: rotate(-12deg) scale(1.05); }
.vcard__follow-h { position: relative; font: 800 clamp(22px, 2vw, 30px)/1.05 var(--font-display); letter-spacing: -.02em; }
.vcard__follow-p { position: relative; font-size: 15px; color: rgba(246, 241, 234, .75); }
.vcard__follow-btn { position: relative; justify-self: start; margin-top: 6px; padding: 11px 18px; border-radius: var(--radius); background: var(--orange); color: var(--ink); font: 600 14px var(--font-body); }

/* Card with a poster but no video yet: play button on top */
.vcard__play--over { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; background: rgba(14, 13, 12, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: transform .6s var(--ease-out); }
.vcard:hover .vcard__play--over { transform: scale(1.1); }

/* Lane ending: "Si yo pude cambiar de rumbo, tú también puedes." */
.videos__close { flex: none; width: min(680px, 86vw); display: grid; gap: 20px; justify-items: start; margin-left: clamp(0px, 6vw, 120px); padding-right: max(var(--gutter), calc((100vw - 680px) / 2 - 120px)); }
.videos__quote { font: 800 clamp(34px, 4.4vw, 76px)/1.04 var(--font-display); letter-spacing: -.03em; }
.videos__quote-mark { color: var(--ink); background: var(--orange); padding: 0 .12em; border-radius: .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.videos__small { font: 500 13px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(246, 241, 234, .6); }