/* Contenido: al pulsar un reel de la hero se abre en primer plano sobre un fondo esmerilado (se ve la página detrás).
   El vídeo va limpio: solo la cruz dentro; los controles están debajo, fuera. */
.tvl {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 7, 17, 0.5);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 0s linear 280ms;
}

.tvl.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms ease;
}

.tvl__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: scale(0.95);
  transition: transform 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tvl.is-open .tvl__wrap { transform: none; }

.tvl__frame {
  position: relative;
  height: min(calc(100dvh - 150px), 780px);
  max-width: 94vw;
  aspect-ratio: 9 / 16;
  perspective: 1200px;
}

/* dos capas de vídeo: la que entra y la que sale se cruzan en 3D (como las tarjetas de la hero) */
.tvl__card {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #05070b;
  border: 1px solid rgba(134, 215, 232, 0.28);
  box-shadow: 0 0 60px rgba(134, 215, 232, 0.12), 0 30px 90px rgba(2, 4, 14, 0.65);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition: transform 680ms cubic-bezier(0.2, 0.8, 0.16, 1), opacity 520ms ease, filter 560ms ease;
}

.tvl__card.is-off { opacity: 0; visibility: hidden; transition: none; }
.tvl__card.is-in-r { opacity: 0; transform: translate3d(46%, 0, -240px) rotateY(-26deg) scale(0.86); filter: blur(7px); transition: none; }
.tvl__card.is-in-l { opacity: 0; transform: translate3d(-46%, 0, -240px) rotateY(26deg) scale(0.86); filter: blur(7px); transition: none; }
.tvl__card.is-out-l { opacity: 0; transform: translate3d(-46%, 0, -240px) rotateY(26deg) scale(0.86); filter: blur(7px); z-index: 0; }
.tvl__card.is-out-r { opacity: 0; transform: translate3d(46%, 0, -240px) rotateY(-26deg) scale(0.86); filter: blur(7px); z-index: 0; }

.tvl__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
  cursor: pointer;
}

.tvl__btn {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(134, 215, 232, 0.3);
  background: rgba(7, 10, 22, 0.55);
  color: #eaf7ff;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}

.tvl__btn:hover,
.tvl__btn:focus-visible {
  border-color: rgba(134, 215, 232, 0.8);
  background: rgba(20, 30, 58, 0.7);
  outline: none;
}

.tvl__btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* la cruz: dentro del vídeo, pequeña */
.tvl__close {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.tvl__close svg { width: 13px; height: 13px; }

/* controles: debajo del vídeo, del mismo ancho */
.tvl__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(calc((100dvh - 150px) * 0.5625), 94vw, 439px);
  min-width: min(340px, 94vw);
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(134, 215, 232, 0.22);
  background: rgba(7, 10, 22, 0.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.tvl__bar .tvl__btn { width: 34px; height: 34px; }

.tvl__seek {
  flex: 1 1 auto;
  min-width: 0;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.tvl__seek::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: rgba(244, 245, 240, 0.22); }
.tvl__seek::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(244, 245, 240, 0.22); }
.tvl__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: #9fb4ff; box-shadow: 0 0 10px rgba(139, 123, 255, 0.7); border: 0; }
.tvl__seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #9fb4ff; box-shadow: 0 0 10px rgba(139, 123, 255, 0.7); border: 0; }

.tvl__time,
.tvl__count {
  flex: none;
  font: 600 10.5px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.06em;
  color: rgba(234, 247, 255, 0.78);
}

.tvl__count { display: none; }

html.tvl-lock, html.tvl-lock body { overflow: hidden; }

/* Dentro de la hilera de la hero el reel de delante invita a pulsar */
.holo-slide[data-ig-video][data-pos="0"] { cursor: pointer; }

@media (max-width: 700px) {
  .tvl__frame { height: min(calc(100dvh - 160px), 700px); }
  .tvl__card { border-radius: 18px; }
  .tvl__card.is-in-r, .tvl__card.is-in-l, .tvl__card.is-out-l, .tvl__card.is-out-r { filter: none; }
  .tvl__bar { width: min(calc((100dvh - 160px) * 0.5625), 94vw); min-width: 0; gap: 6px; }
  .tvl__bar .tvl__btn { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .tvl, .tvl.is-open, .tvl__wrap { transition: none; transform: none; }
}

/* Móvil: la hilera de reels va centrada (la de delante en el eje de la pantalla; las de atrás asoman a la derecha) */
@media (max-width: 700px) {
  .reel-hero { overflow-x: clip; }
  .reel-holo { width: var(--card-w, 150px); margin-left: auto; margin-right: auto; }
  .holo-stage { perspective-origin: 63% 46%; }
  .reel-holo > .holo-hud,
  .reel-holo > .holo-caption,
  .reel-holo > .holo-dots { margin-left: auto; margin-right: auto; }
  .reel-holo > .holo-caption { text-align: center; }
  .reel-holo > .holo-dots { justify-content: center; }
}

/* Carrusel: los reels que ya pasaron se quedan a la izquierda y al fondo (espejo de los que vienen a la derecha) */
.holo-slide[data-side="l"]:not([data-pos="0"]) {
  --x: calc(var(--card-w) * -0.72);
  --y: calc(var(--card-w) * -0.045);
  --z: calc(var(--card-w) * -1.06);
  --ry: 19deg;
  --s: 0.9;
  --o: 0.58;
  --b: 1.6px;
  z-index: 4;
  transition:
    transform 1250ms cubic-bezier(0.18, 0.76, 0.14, 1),
    opacity 1000ms cubic-bezier(0.3, 0.6, 0.2, 1),
    filter 1050ms ease;
}

/* La cabecera «REEL 01 / 03 · Proyección» sobra: el pie y los puntos ya cuentan los reels (y irán creciendo) */
.reel-holo > .holo-hud { display: none; }

/* Reel que se va hacia atrás: pasa a la derecha (misma lógica que el carrusel hacia delante) */
.holo-slide[data-pos="out"][data-side="r"] {
  --x: calc(var(--card-w) * 0.72);
  --y: calc(var(--card-w) * -0.045);
  --z: calc(var(--card-w) * -1.06);
  --ry: -19deg;
  --s: 0.9;
  --o: 0.58;
  --b: 1.6px;
  z-index: 4;
}

/* Fluidez: mismo ritmo para todos los movimientos de la hilera, terminan antes de que la hero recoloque la tarjeta,
   y cada tarjeta va en su propia capa */
.holo-slide[data-ig-video],
.holo-slide[data-ig-video][data-pos="out"],
.holo-slide[data-ig-video][data-side="l"]:not([data-pos="0"]) {
  will-change: transform, opacity;
  transition:
    transform 900ms cubic-bezier(0.22, 0.8, 0.18, 1),
    opacity 760ms ease,
    filter 760ms ease;
}

.holo-slide[data-ig-video] .holo-video,
.holo-slide[data-ig-video] .holo-still { transform: translateZ(0); }

@media (max-width: 700px) {
  /* sin desenfoque animado en móvil: es lo más caro del movimiento */
  .holo-slide[data-ig-video] { --b: 0px !important; }
}

/* Reels de YouTube: una sola barra (la propia). Se quita la del navegador, que duplicaba el avance */
.reel-rail .shorts-gallery { scrollbar-width: none; }
.reel-rail .shorts-gallery::-webkit-scrollbar { display: none; height: 0; }

.reel-rail .rail-progress {
  height: 4px;
  border-radius: 4px;
  overflow: visible;
  cursor: pointer;
  touch-action: none;
  background: rgba(244, 245, 240, 0.12);
  transition: height 200ms ease, background-color 200ms ease;
}

/* zona de pulsación más generosa que la barra visible */
.reel-rail .rail-progress::before {
  content: "";
  position: absolute;
  inset: -12px 0;
}

.reel-rail .rail-progress > span {
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(139, 123, 255, 0.5);
  cursor: grab;
}

.reel-rail .rail-progress:hover,
.reel-rail .rail-progress.is-drag { height: 6px; background: rgba(244, 245, 240, 0.18); }
.reel-rail .rail-progress.is-drag > span { transition: none; cursor: grabbing; }

/* Escritorio: los reels (con los de atrás) van centrados en la columna derecha; el pie y los puntos se mueven con ellos */
@media (min-width: 1000px) {
  .reel-holo > .holo-stage,
  .reel-holo > .holo-caption,
  .reel-holo > .holo-dots { margin-left: max(0px, calc(50% - var(--card-w) * 0.93)); }
}

/* Sin nombres bajo los reels: los puntos bastan */
.reel-holo > .holo-caption { display: none; }

/* Contenido · portada: el texto que acompaña al titular va justo debajo de él (antes quedaba
   detrás del reel, lejos del titular) y se retira la línea fantasma de la frase siguiente,
   que se leía como un fallo. */
@media (max-width: 999px) {
  .reel-hero .reel-hero-inner { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
  .reel-hero-inner > .reel-holo { align-self: center; }
  .reel-hero-inner > .eyebrow { order: 1; }
  .reel-hero-inner > .reel-title { order: 2; }
  .reel-hero-inner > .reel-copy { order: 3; }
  .reel-hero-inner > .reel-holo { order: 4; }
  .reel-hero-inner > .hero-actions { order: 5; }
}
.reel-verse-hint { display: none; }

/* Titular: las colas de la g y la q no se recortan con el degradado */
.reel-title .h1-accent, .h1-accent {
  padding-bottom: 0.16em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.reel-title .h1-accent { margin-bottom: -0.16em; }

/* Proceso (Contenido): versión tranquila. Cuatro pasos en línea, sin tira de película,
   sin colores por paso ni brillos; el avance al hacer scroll es una sola línea fina. */
.content-process-section::before { display: none; }
.content-process-section .film-bar { height: 1px; margin: 0 0 4px; background: rgba(244, 245, 240, 0.1); }
.content-process-section .film-bar > i { background: rgba(244, 245, 240, 0.5); }
.content-process-section .film-strip {
  display: grid; list-style: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: visible; background: none;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
}
.content-process-section .film-strip::before, .content-process-section .film-strip::after { display: none; }
.content-process-section .film-frame { padding: 18px 0 0; border: 0 !important; background: none !important; }
.content-process-section .film-frame::before { display: none; }
.content-process-section .film-no {
  margin-bottom: 10px; color: var(--muted); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; opacity: 0.8 !important; transform: none !important;
}
.content-process-section .film-frame.is-lit .film-no { color: var(--ink); }
.content-process-section .film-frame strong { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.content-process-section .film-frame p { font-size: 13px; line-height: 1.55; }
@media (max-width: 999px) {
  .content-process-section .film-strip {
    display: grid; grid-auto-flow: row; grid-auto-columns: auto; overflow: visible;
    grid-template-columns: minmax(0, 1fr); gap: 0; scroll-snap-type: none;
  }
  .content-process-section .film-frame {
    display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px;
    padding: 14px 0; border-top: 1px solid rgba(244, 245, 240, 0.08) !important;
  }
  .content-process-section .film-no { grid-row: 1 / 3; margin: 2px 0 0; }
  .content-process-section .film-frame strong, .content-process-section .film-frame p { grid-column: 2; }
}