/* ── Vitrina v4: SOLO bandas de cine a lo ancho. Cero filas de
   tarjetas, cero clips chiquitos. El video es la franja. ── */

/* franjas existentes: el clip llena la franja, sin paralaje */
.cl-fr-foto{position:relative;overflow:hidden;
  background-attachment:scroll !important;
  min-height:clamp(380px,62vh,680px)}
.vt-video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}

/* banda de cine: full-bleed, alta, una sola pieza */
.vt-banda{position:relative;width:100vw;
  margin:clamp(2.6rem,6vw,4.6rem) 0;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  height:clamp(440px,72vh,780px);
  overflow:hidden;background:var(--noche,#050814)}
.vt-banda--full{height:clamp(520px,88vh,920px)}
.vt-banda::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:var(--cinta);z-index:2}
.vt-banda video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.vt-banda-cap{position:absolute;left:clamp(14px,4vw,48px);
  bottom:clamp(12px,3vw,32px);z-index:2;margin:0;
  font:600 .86rem/1.45 "Inter Tight",sans-serif;letter-spacing:.02em;
  color:#fff;max-width:46ch;
  background:rgba(5,8,20,.78);padding:10px 15px;border-radius:12px;
  border-left:3px solid var(--ambar,#f2b233)}

/* el héroe habla en la letra nueva */
.hero-sec .hero-h1 .line{
  font-family:var(--anton) !important;
  font-style:normal !important;
  text-transform:uppercase;
  letter-spacing:.01em;line-height:.98}

/* cascada de entrada del héroe */
@keyframes vtUp{from{opacity:0;transform:translateY(22px);filter:blur(3px)}
  to{opacity:1;transform:none;filter:none}}
.hero-sec .hero-h1 .line{animation:vtUp .75s cubic-bezier(.2,.7,.2,1) both}
.hero-sec .hero-h1 .line:nth-child(1){animation-delay:.08s}
.hero-sec .hero-h1 .line:nth-child(2){animation-delay:.22s}
.hero-sec .hero-h1 .line:nth-child(3){animation-delay:.36s}
.hero-sec .hero-lede{animation:vtUp .8s .5s cubic-bezier(.2,.7,.2,1) both}
.hero-sec .hero-cta{animation:vtUp .8s .68s cubic-bezier(.2,.7,.2,1) both}

/* imágenes grandes: jamás a pantalla completa */
.cl-cita-img{max-height:46vh;width:100%;object-fit:cover}

@media(prefers-reduced-motion:reduce){
  .vt-video,.vt-banda{display:none}
  .hero-sec .hero-h1 .line,.hero-sec .hero-lede,.hero-sec .hero-cta{animation:none}}

/* ── v5 ──────────────────────────────────────────────────── */
/* héroe: el clip vive DETRÁS del titular, no encima de nada */
.hero-sec{position:relative;overflow:hidden}
.vt-hero{position:absolute;inset:0;z-index:0;pointer-events:none}
.vt-hero video{width:100%;height:100%;object-fit:cover;display:block}
.vt-hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(242,178,51,.26) 0%,
  rgba(190,128,24,.38) 45%,rgba(5,8,20,.62) 100%)}
.hero-sec>*:not(.vt-hero){position:relative;z-index:1}
.hero-sec .hero-lede{color:#fff;text-shadow:0 2px 10px rgba(5,8,20,.5)}
.hero-sec .hero-h1 .line{text-shadow:0 3px 18px rgba(5,8,20,.45)}

/* chip de contexto para TODO clip (franjas incluidas) */
.vt-cap{position:absolute;left:clamp(14px,4vw,48px);
  bottom:clamp(12px,3vw,28px);z-index:2;margin:0;
  font:600 .86rem/1.45 "Inter Tight",sans-serif;letter-spacing:.02em;
  color:#fff;max-width:46ch;
  background:rgba(5,8,20,.78);padding:10px 15px;border-radius:12px;
  border-left:3px solid var(--ambar,#f2b233)}

/* la cita: video en vez de foto gigante */
.cl-cita-vid{width:100%;height:clamp(260px,44vh,440px);
  object-fit:cover;display:block;border-radius:6px}

/* las tarjetas del héroe entran después del titular */
.lq-lanes>*{animation:vtUp .7s cubic-bezier(.2,.7,.2,1) both}
.lq-lanes>*:nth-child(1){animation-delay:.85s}
.lq-lanes>*:nth-child(2){animation-delay:1s}
.lq-lanes>*:nth-child(3){animation-delay:1.15s}
@media(prefers-reduced-motion:reduce){
  .vt-hero{display:none}.lq-lanes>*{animation:none}}
.vt-hero .vt-cap{pointer-events:auto}
.vt-cap--der{left:auto;right:clamp(14px,4vw,48px)}

/* ── vacuna anti-vacío ──────────────────────────────────────
   Los clips y sus letreros NUNCA esperan permiso del motor de
   entradas: visibles desde el primer pintado, pase lo que pase. */
html.cf main > section.vt-banda,
html.cf main > section.vt-banda > *{
  opacity:1 !important;transform:none !important}
.vt-banda video,.vt-hero,.vt-hero video,.vt-video,
.vt-cap,.vt-banda-cap,.cl-cita-vid{
  opacity:1 !important;visibility:visible !important}

/* ── v6: letreros grandes, SOBRE la imagen, siempre ─────── */
/* pies de foto: adentro de la foto, abajo-izquierda, legibles */
.cl-duo figure,.cl-ed-fig{position:relative}
.cl-duo figcaption,.cl-ed-pie{
  position:absolute;left:14px;bottom:12px;margin:0;max-width:82%;
  font:700 clamp(.98rem,1.7vw,1.3rem)/1.35 "Inter Tight",sans-serif;
  color:#fff;background:rgba(5,8,20,.78);padding:10px 15px;
  border-radius:10px;border-left:3px solid var(--ambar,#f2b233)}

/* letrero de banda: titular, no chip */
.vt-banda-cap{font-family:var(--anton) !important;
  font-size:clamp(1.5rem,3.4vw,2.7rem) !important;line-height:1.04;
  text-transform:uppercase;letter-spacing:.02em;color:#fff;
  background:none;border-left:none;padding:0;max-width:62%;
  text-shadow:0 4px 24px rgba(5,8,20,.7)}
.vt-banda-cap::before{content:"";display:block;width:64px;height:5px;
  border-radius:3px;background:var(--cinta);margin-bottom:.5rem}

/* chips medianos (franjas, citas): más grandes que antes */
.vt-cap{font-size:clamp(.98rem,1.8vw,1.35rem) !important;max-width:34ch}

/* el héroe termina en cinta: borde limpio, nada se derrama */
.hero-sec::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:5px;background:var(--cinta);z-index:3}

/* collage: seis ventanas, una pantalla */
.vt-collage{position:relative;width:100vw;
  margin:clamp(2.6rem,6vw,4.6rem) 0;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  height:clamp(600px,100vh,1040px);
  display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;
  gap:10px;padding:10px;background:var(--noche,#050814);box-sizing:border-box}
.vt-collage video{width:100%;height:100%;object-fit:cover;display:block;min-height:0}
.vt-collage .vt-banda-cap{position:absolute;left:clamp(18px,4vw,52px);
  bottom:clamp(16px,3vw,36px);z-index:2}
@media(max-width:820px){.vt-collage{grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){.vt-collage{display:none}}

/* ── v7: las franjas de texto YA NO son vacío amarillo ───── */
.cl-franja[data-txt]{position:relative;overflow:hidden}
.cl-franja[data-txt]>*:not(.vt-fondo){position:relative;z-index:1}
.vt-fondo{position:absolute !important;inset:0;z-index:0 !important;
  pointer-events:none}
.vt-fondo video{width:100%;height:100%;object-fit:cover;display:block}
.vt-fondo::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(5,8,20,.16),rgba(5,8,20,.26) 55%,rgba(5,8,20,.6))}

/* ── palabras: NADA pequeño en esta casa ── */
:root{font-size:106.25%}
.cl-duo figcaption,.cl-ed-pie{
  font-size:clamp(1.15rem,2.1vw,1.6rem) !important;line-height:1.3}
.vt-cap{font-size:clamp(1.15rem,2.1vw,1.55rem) !important;max-width:38ch}

/* ── el pie de la casa, con voz propia ── */
.site-footer{border-top:5px solid transparent;
  border-image:linear-gradient(90deg,#f6cf55 0 33%,#0d3a94 33% 66%,#ce1126 66% 100%) 1;
  padding-top:clamp(2rem,4vw,3.4rem)}
.foot-lema{font-family:var(--anton);text-transform:uppercase;
  font-size:clamp(2rem,5vw,3.6rem);line-height:.98;margin:0 0 1.2rem;
  letter-spacing:.01em}
.site-footer .disclosure{font-size:clamp(1.05rem,1.6vw,1.3rem) !important;
  line-height:1.6;max-width:72ch}
.site-footer a{font-size:clamp(1rem,1.5vw,1.2rem);font-weight:700}

/* ── v8: collage 3x3 + letras GRANDES en todo clip ───────── */
.vt-collage{grid-template-rows:1fr 1fr 1fr !important;
  height:clamp(720px,120vh,1400px)}
@media(max-width:820px){.vt-collage{grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(5,1fr)}}
.vt-banda-cap{font-size:clamp(1.9rem,4.2vw,3.3rem) !important;max-width:70%}
.vt-cap{font-size:clamp(1.35rem,2.6vw,1.9rem) !important;max-width:40ch;
  font-weight:800}
.cl-duo figcaption,.cl-ed-pie{
  font-size:clamp(1.3rem,2.4vw,1.8rem) !important;font-weight:800}

/* ── v9: cero brecha amarilla bajo los clips ─────────────── */
.vt-banda,.vt-collage{
  margin-top:clamp(1rem,2.2vw,1.8rem) !important;
  margin-bottom:0 !important}
.cl-franja:has(.vt-video),.cl-franja:has(.vt-fondo){
  margin-bottom:0 !important}
.vt-banda+section,.vt-collage+section,
.cl-franja+section{margin-top:0 !important}

/* ── v10: páginas de adentro ─────────────────────────────── */
/* letreros SIEMPRE blancos — el tema día no los pinta de tinta */
.vt-cap,.vt-banda-cap,.cl-duo figcaption,.cl-ed-pie{color:#fff !important}

/* un solo velo, y suave: el de CSS se apaga (el inline ya existe) */
.vt-fondo::after{background:none !important}

/* pies de foto con voz de titular, no de letra chiquita */
.cl-duo figcaption,.cl-ed-pie{
  font-family:var(--anton) !important;text-transform:uppercase;
  font-size:clamp(1.5rem,2.8vw,2.1rem) !important;line-height:1.05;
  letter-spacing:.02em;background:rgba(5,8,20,.66);border-left:4px solid var(--ambar,#f2b233)}

/* reseñas con look editorial: papel crema, cinta, sombra */
.page .narrow .rev-sec{position:relative;background:#fdf5e2;
  border:1px solid rgba(20,18,48,.14);border-radius:3px;
  padding:clamp(1.6rem,3.6vw,3rem);margin:clamp(2rem,4vw,3.2rem) 0;
  box-shadow:0 22px 60px rgba(8,6,20,.14)}
.page .narrow .rev-sec::before{content:"";position:absolute;top:-1px;left:-1px;
  right:-1px;height:5px;border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,#f6cf55 0 33.34%,#0d3a94 33.34% 66.67%,#ce1126 66.67% 100%)}
.page .narrow .rev-sec p,.page .narrow .rev-sec li{color:#2c2850 !important}
.page .narrow .rev-sec strong{color:#141230 !important}
.page .narrow .rev-sec h2,.page .narrow .rev-sec h3{color:#141230 !important}

/* cada sección entra deslizándose (y si el JS falla, todo visible) */
section.vt-prep{opacity:0;transform:translateY(34px)}
section.vt-in{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){
  section.vt-prep{opacity:1;transform:none}}

/* ── v11: la lista con nombre e imagen (hub posiciones) ──── */
.vt-nombres{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:1.6rem 0 2.4rem}
@media(max-width:1000px){.vt-nombres{grid-template-columns:1fr 1fr}}
.vt-nom{position:relative;display:block;aspect-ratio:4/3;border-radius:12px;
  overflow:hidden;background:var(--noche,#050814);text-decoration:none;
  box-shadow:0 10px 30px rgba(5,8,20,.4);transition:transform .3s ease}
a.vt-nom:hover{transform:translateY(-5px)}
.vt-nom video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vt-nom-n{position:absolute;left:12px;bottom:10px;z-index:2;margin:0;
  font-family:var(--anton);text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.2rem,2.2vw,1.7rem);color:#fff;
  text-shadow:0 3px 14px rgba(5,8,20,.8)}
.vt-nom::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(5,8,20,.55));z-index:1}
.vt-miga{margin:0 0 1rem;font-weight:700}
.vt-miga a{color:inherit}