/* ============================================================
   Handycam viewfinder — pantalla de bienvenida
   ============================================================ */

:root{
  /* pantalla */
  --blue-deep:   #03164c;
  --blue-mid:    #0a3bb5;
  --blue-light:  #1a66e8;

  /* OSD */
  --osd:         #dcfff0;
  --osd-dim:     #8fe9c8;
  --osd-glow:    rgba(120, 255, 205, .55);
  --green:       #2bff9b;   /* sin glow, un verde más claro se lee blanco */

  --frame:       #0a0a0c;
  --bezel:       #17181b;

  --gap:         clamp(12px, 2.4vmin, 28px);

  /* intensidad de la suciedad: 0 = limpio, 1 = como está, 1.6 = cinta arruinada */
  --dirt:        1;

  /* DotGothic16 dibuja las letras latinas altas y angostas: las acortamos
     un poco para que se lean más anchas (1 = sin cambio) */
  --aplaste:     .8;

  /* calidad de cinta para el texto: líneas corridas + sangrado rosa/celeste */
  --cinta:
    url(#vhs-suave)
    drop-shadow(-1.5px 0 0 rgba(255, 70, 130, .3))
    drop-shadow( 1.5px 0 0 rgba(70, 200, 255, .28));
}

*{ box-sizing: border-box; margin: 0; padding: 0; }

html, body{ height: 100%; }

body{
  height: 100dvh;
  background: #0d0e10;
  color: var(--osd);
  font-family: 'DotGothic16', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- carcasa ---------- */

.camera{ width: 100%; height: 100dvh; }

/* el marco negro de la cámara ocupa toda la página; el visor va centrado
   y los botones a un costado (abajo en pantallas verticales) */
.bezel{
  --pad:   clamp(12px, 4vmin, 48px);
  --gapc:  clamp(14px, 3vmin, 36px);
  --boton: 84px;

  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gapc);
  padding: var(--pad);
  background:
    radial-gradient(120% 90% at 50% 45%, #1d1e22 0%, #141518 55%, #0b0b0d 100%);
}

/* ---------- botones del marco ---------- */

.botonera{
  flex: none;
  width: var(--boton);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.btn-cam{
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  /* rótulo impreso en el cuerpo de la cámara, no del OSD */
  color: #a9aeb8;
  font: 600 11px/1 system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: .18em;
}
.btn-cara{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  /* botón redondo de goma, con la luz desde arriba */
  background: radial-gradient(circle at 50% 32%, #45474e 0%, #2a2b30 55%, #1a1b1e 100%);
  box-shadow:
    0 3px 0 #070708,
    0 5px 10px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 3px rgba(0,0,0,.4);
  transition: transform .06s, box-shadow .06s;
}
.btn-cam:active .btn-cara,
.btn-cam.pulsado .btn-cara{
  transform: translateY(3px);
  box-shadow: 0 0 0 #070708, 0 1px 3px rgba(0,0,0,.6), inset 0 1px 3px rgba(0,0,0,.6);
}
.btn-cam:focus-visible .btn-cara{ outline: 2px solid #7aa2ff; outline-offset: 4px; }

/* LED del botón de sonido: rojo cuando está prendido */
.led{
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 1px;
  background: #3a3b40;
}
.btn-cam[aria-pressed="true"] .led{ background: #ff3b30; box-shadow: 0 0 6px #ff3b30; }

/* pantalla vertical (celular): visor arriba, botones abajo */
@media (max-aspect-ratio: 1/1){
  .bezel{ flex-direction: column; }
  .viewfinder{
    width: min(calc(100vw - 2 * var(--pad)),
               calc((100dvh - 2 * var(--pad) - var(--boton) - var(--gapc)) * 4 / 3));
  }
  .botonera{ width: auto; height: var(--boton); flex-direction: row; }
}

/* ---------- pantalla ---------- */

.viewfinder{
  position: relative;
  flex: none;
  aspect-ratio: 4 / 3;
  /* el mayor 4:3 que entra al lado de la botonera */
  width: min(calc(100vw - 2 * var(--pad) - var(--boton) - var(--gapc)),
             calc((100dvh - 2 * var(--pad)) * 4 / 3));
  overflow: hidden;
  border-radius: 4px;
  background:
    radial-gradient(120% 95% at 50% 40%,
      var(--blue-light) 0%,
      var(--blue-mid) 42%,
      var(--blue-deep) 100%);
  /* borde de la pantalla dentro del marco */
  box-shadow:
    0 0 0 2px #08080a,
    0 0 0 4px #2a2b30,
    0 0 36px rgba(0,0,0,.7),
    inset 0 0 90px rgba(0,0,0,.55);
  isolation: isolate;
  container-type: inline-size;
  animation: crt-on 1.3s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes crt-on{
  0%   { transform: scale(.02, .004); filter: brightness(6) saturate(0); }
  18%  { transform: scale(1, .006);   filter: brightness(5) saturate(0); }
  38%  { transform: scale(1, 1.04);   filter: brightness(2.2) saturate(.5); }
  52%  { transform: scale(1, .98);    filter: brightness(1.4) saturate(.8); }
  100% { transform: none;             filter: none; }
}


.layer{ position: absolute; inset: 0; pointer-events: none; }

.scanlines{
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.20) 0px,
    rgba(0,0,0,.20) 1px,
    transparent 1px,
    transparent 3px);
  mix-blend-mode: multiply;
  opacity: .55;
  z-index: 3;
}

/* barrido lento tipo CRT */
.scanlines::after{
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.055), transparent);
  animation: sweep 7s linear infinite;
}
@keyframes sweep{
  from{ transform: translateY(-120%); }
  to  { transform: translateY(560%); }
}

.grain{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter>\
<rect width='160' height='160' filter='url(%23n)' opacity='.42'/></svg>");
  opacity: calc(.16 * var(--dirt));
  mix-blend-mode: overlay;
  animation: jitter .7s steps(3) infinite;
  z-index: 4;
}
@keyframes jitter{
  0%{ transform: translate(0,0); }
  33%{ transform: translate(-2%, 1%); }
  66%{ transform: translate(1.5%, -1.5%); }
  100%{ transform: translate(0,0); }
}

.vignette{
  background: radial-gradient(105% 85% at 50% 50%, transparent 52%, rgba(0,0,10,.72) 100%);
  z-index: 5;
}

.flash{
  background: #eafff6;
  opacity: 0;
  z-index: 9;
  transition: opacity .09s ease-out;
}
.flash.on{ opacity: .38; }

/* ---------- suciedad (encima de todo) ---------- */

/* manchas de lente: el centro queda limpio, se ensucia hacia los bordes */
.smudge{
  z-index: 10;
  opacity: calc(.62 * var(--dirt));
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700'>\
<filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.021' numOctaves='3'/>\
<feGaussianBlur stdDeviation='2.5'/>\
<feColorMatrix values='0 0 0 0 .03  0 0 0 0 .04  0 0 0 0 .10  0 0 0 -2.2 1.15'/></filter>\
<rect width='700' height='700' filter='url(%23m)'/></svg>");
  background-size: cover;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(72% 64% at 50% 44%, transparent 18%, #000 100%);
          mask-image: radial-gradient(72% 64% at 50% 44%, transparent 18%, #000 100%);
}


.dirt{
  z-index: 10;
  opacity: calc(.5 * var(--dirt));
  background-image:
    /* rayas verticales tipo cinta gastada */
    repeating-linear-gradient(90deg,
      transparent 0 29px,
      rgba(0,0,0,.05) 29px 30px,
      transparent 30px 74px,
      rgba(0,0,0,.08) 74px 76px,
      transparent 76px 161px,
      rgba(0,0,0,.04) 161px 162px,
      transparent 162px 233px);
  mix-blend-mode: multiply;
}

/* motas y pelusa */
.dirt::before{
  content: '';
  position: absolute;
  inset: -8%;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'>\
<filter id='d'><feTurbulence type='turbulence' baseFrequency='.55' numOctaves='2'/>\
<feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -9 4.1'/></filter>\
<rect width='300' height='300' filter='url(%23d)'/></svg>");
  opacity: calc(.16 * var(--dirt));
  mix-blend-mode: screen;
  animation: specks 1.1s steps(2) infinite;
}
@keyframes specks{
  0%  { transform: translate(0,0) }
  50% { transform: translate(-3%, 2%) }
  100%{ transform: translate(2%, -2%) }
}

/* dropout: la banda que cruza la imagen cada tanto */
.dirt::after{
  content: '';
  position: absolute;
  inset-inline: -2%;
  height: 2.2%;
  background: linear-gradient(180deg,
    rgba(255,255,255,.10), rgba(255,255,255,.38), rgba(0,0,0,.28));
  filter: blur(.7px);
  mix-blend-mode: screen;
  animation: dropout 9s cubic-bezier(.4,0,.9,.2) infinite;
}
@keyframes dropout{
  0%, 74%  { opacity: 0; transform: translateY(0) }
  76%      { opacity: .85; transform: translateY(240%) }
  81%      { opacity: .6; transform: translateY(1400%) }
  84%, 100%{ opacity: 0; transform: translateY(2600%) }
}

/* parpadeo del tubo */
.viewfinder::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  background: #9fc4ff;
  mix-blend-mode: overlay;
  animation: flicker 4.3s steps(4) infinite;
}
@keyframes flicker{
  0%,100%{ opacity: .012 }
  25%    { opacity: .032 }
  50%    { opacity: 0 }
  75%    { opacity: .022 }
}

/* ---------- arranque ---------- */

.defs{ position: absolute; }

.boot{
  position: absolute;
  inset: 0;
  z-index: 7;            /* sobre el OSD, debajo de la suciedad */
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.booting .boot{ visibility: visible; opacity: 1; }
.booting.boot-out .boot{ animation: boot-out .38s steps(3) both; }
.booting .osd{ opacity: 0; }

@keyframes boot-out{ 0%{ opacity: 1 } 50%{ opacity: .3 } 100%{ opacity: 0 } }

.boot-logos{
  display: grid;
  place-items: center;
  animation: tracking 2.2s steps(1) infinite;
}
.boot-logos img{ grid-area: 1 / 1; opacity: 0; }

/* primero SORTA, un corte, después HANDYMAN */
.booting .boot-logos .marca{ animation: logo-pasa 1.6s steps(5) .75s both; }
.booting .boot-logos .sub  { animation: logo-queda .5s steps(4) 2.45s both; }

@keyframes logo-pasa{
  0%   { opacity: 0 }
  12%  { opacity: .92 }
  88%  { opacity: .92 }
  100% { opacity: 0 }
}
@keyframes logo-queda{
  0%   { opacity: 0 }
  100% { opacity: .92 }
}
.boot-logos img{
  display: block;
  height: auto;
  /* calidad de cinta: líneas corridas, sangrado de color y halo */
  filter:
    url(#vhs)
    drop-shadow(-3px 0 0 rgba(255, 70, 130, .55))
    drop-shadow( 3px 0 0 rgba(70, 200, 255, .5))
    drop-shadow(0 0 10px rgba(200, 230, 255, .35));
}
.boot-logos .marca,
.boot-logos .sub{ width: 56cqw; }   /* mismo ancho los dos */

/* saltos de tracking, como una cinta que no termina de enganchar */
@keyframes tracking{
  0%, 100%{ transform: none; }
  12%{ transform: translateX(-1.4%) skewX(-4deg); }
  13%{ transform: translateX(.7%); }
  14%{ transform: none; }
  61%{ transform: translateX(1.8%); }
  62%{ transform: translateX(-.5%) skewX(3deg); }
  63%{ transform: none; }
}

/* barra de ruido que sube mientras arranca */
.boot::after{
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 9%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, transparent, rgba(255,255,255,.14), transparent);
  filter: blur(1px);
  mix-blend-mode: screen;
  animation: roll 1.7s linear .75s infinite;
}
@keyframes roll{
  from{ transform: translateY(1100%); }
  to  { transform: translateY(-120%); }
}

.rollbar{ z-index: 9; overflow: hidden; }
.rollbar::after{
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 9%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, transparent, rgba(255,255,255,.14), transparent);
  filter: blur(1px);
  mix-blend-mode: screen;
  opacity: .7;
  animation: roll-lento 8s linear infinite;
}
@keyframes roll-lento{
  0%        { transform: translateY(1100%); }
  30%, 100% { transform: translateY(-120%); }
}
.booting .rollbar{ display: none; }   /* en el arranque ya corre la suya */

/* ---------- OSD ---------- */

.osd{
  position: absolute;
  inset: 0;
  padding: var(--gap) calc(var(--gap) * 1.2);
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-shadow:
     0 0 1px rgba(255,255,255,.45),
     0 1px 1px rgba(0, 10, 40, .45);
  filter: var(--cinta);
  animation: tracking 5.3s steps(1) infinite;
  transition: opacity .18s ease;
}
.osd.dim{ opacity: 0; pointer-events: none; }   /* con el menú abierto no hay OSD, como en la cámara */

.osd-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
}
.osd-bottom{ align-items: flex-end; }

.osd-group{
  display: flex;
  align-items: center;
  gap: .45em;
  line-height: 1;
}

.t-lg{ font-size: clamp(22px, 4.6vmin, 54px); font-size: round(clamp(22px, 4.6vmin, 54px), 1px); }
.t-md{ font-size: clamp(16px, 3.2vmin, 38px); font-size: round(clamp(16px, 3.2vmin, 38px), 1px); }
.t-sm{ font-size: .62em; }

/* iconos */
.ico, .ico-batt{
  height: clamp(16px, 3.1vmin, 36px);
  width: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0, 10, 40, .45));
}
.ico-batt{ height: clamp(13px, 2.4vmin, 27px); }
.ico-batt .bars path{ fill: currentColor; stroke: none; }
.ico-batt .bars path.off{ fill: none; }

/* STBY en verde, parpadeando */
#mode{
  color: var(--green);
  text-shadow: none;
  animation: blink 1.6s steps(1) infinite;
}
@keyframes blink{ 0%,68%{ opacity: 1 } 69%,100%{ opacity: .32 } }
.ico-batt.low{ color: #ff6b6b; animation: blink 1s steps(1) infinite; }
#batt.low{ color: #ff6b6b; }

#mode.rec{ color: #ff6b6b; text-shadow: 0 0 12px rgba(255,80,80,.7); animation-duration: 1s; }

/* esquina inferior izquierda: handle + hint */
.osd-corner{
  display: flex;
  flex-direction: column;
  gap: .25em;
}
.osd-handle{
  font-size: clamp(14px, 2.6vmin, 30px);
  letter-spacing: .08em;
  opacity: .8;
}

/* hint + stamp */
.hint{ opacity: .85; }
.key{
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  padding: 0 .25em;
  border: 2px solid currentColor;
  font-size: clamp(14px, 2.6vmin, 30px);
  line-height: 1.25;
}
.stamp{
  flex-direction: column;
  align-items: flex-end;
  gap: .05em;
}
.stamp .t-lg{ font-size: clamp(15px, 2.8vmin, 33px); font-size: round(clamp(15px, 2.8vmin, 33px), 1px); }

/* letras acortadas (ver --aplaste) */
.t-lg, .t-md, .osd-handle, .osd .key,
.m-txt, .vi-tabs span.letra{   /* span: .letra también es la clase de los trazados de tus íconos */
  display: inline-block;
  transform: scaleY(var(--aplaste));
}

/* ---------- menu: VISUAL INDEX (Handycam táctil, tipo DCR-SR42) ----------
   medidas en cqw: 1cqw = 1% del ancho del visor; el alto son 75cqw.
   Proporciones tomadas de la pantalla de la cámara. */

.menu{
  --vi-naranja: #ff8b1e;
  --vi-navy:    #0e1633;
  --vi-pizarra: #4a5368;

  position: absolute;
  inset: 0;
  z-index: 2;               /* debajo de scanlines, grano y viñeta: se ve en el tubo */
  font-size: 4cqw;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
  text-shadow: none;
  background: linear-gradient(to bottom,
    var(--vi-navy) 0 17%, var(--vi-pizarra) 17% 75.2%, var(--vi-navy) 75.2%);
  animation: pop .14s ease-out, tracking 6.1s steps(1) .14s infinite;
}
.menu[hidden]{ display: none; }
@keyframes pop{ from{ opacity: 0 } to{ opacity: 1 } }

/* la cinta va sobre el texto, los íconos y las fotos, no sobre las cajas:
   aplicada a un fondo semitransparente, el sangrado lo tiñe de gris */
.fx{ filter: var(--cinta); }

/* --- botones brillantes de la pantalla táctil --- */
.vi-btn{
  font: inherit;
  color: #fff;
  border: 0;
  border-radius: .7cqw;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: linear-gradient(#7a9dff 0%, #3c66e8 46%, #2346c2 54%, #2f58da 100%);
  box-shadow:
    inset 0 .25cqw 0 rgba(255,255,255,.45),
    inset 0 -.25cqw 0 rgba(0,0,40,.35),
    0 .3cqw .7cqw rgba(0,0,0,.45);
}
.vi-btn:active{ filter: brightness(.8); }
.vi-btn svg{ width: 3.6cqw; height: 3.6cqw; fill: currentColor; stroke: currentColor; stroke-width: 2.6; stroke-linecap: square; }
.vi-gris{ background: linear-gradient(#8894ad, #5c6780); }

/* --- barra de arriba --- */
.vi-top{ position: absolute; inset: 0 0 auto; height: 12.7cqw; }
.vi-x{ position: absolute; left: 6.9cqw; top: 3.6cqw; width: 12.2cqw; height: 5.4cqw; }
.vi-x svg{ fill: none; }
.vi-cat{ position: absolute; right: 21cqw; top: 3.9cqw; font-size: 4.6cqw; }
.vi-help{ position: absolute; left: 81cqw; top: 3.6cqw; width: 12.2cqw; height: 5.4cqw; font-size: 4.6cqw; }
.vi-help::after{   /* la franja naranja de la captura */
  content: '';
  position: absolute;
  inset: auto .4cqw -.9cqw;
  height: .55cqw;
  border-radius: .3cqw;
  background: var(--vi-naranja);
}

/* --- paginado --- */
.vi-pag{
  position: absolute;
  left: 6.9cqw;
  width: 9.4cqw;
  top: 16.9cqw;
  height: 35.4cqw;
  display: grid;
  grid-template-rows: 8.4cqw 1fr 8.4cqw;
  place-items: center;
}
.vi-pag .vi-btn{ width: 100%; height: 100%; }
.vi-pag svg{ stroke: none; width: 5.4cqw; height: 5.4cqw; }
.vi-num{ font-size: 5.2cqw; }
.vi-scroll{
  position: absolute;
  left: 18.2cqw;
  width: 1.1cqw;
  top: 14.3cqw;
  height: 40.5cqw;
  border: .2cqw solid #c7cede;
  border-radius: .6cqw;
  background: rgba(0,0,0,.35);
}
.vi-scroll i{
  position: absolute;
  inset-inline: 0;
  top: var(--desde, 0%);
  height: var(--alto, 100%);
  border-radius: .5cqw;
  background: #dfe5f2;
}

/* --- grilla de miniaturas --- */
.vi-grid{
  position: absolute;
  left: 21.6cqw;
  width: 70cqw;
  top: 15.2cqw;
  height: 38.6cqw;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2.2cqw 1.2cqw;
}
.vi-grid li{
  position: relative;
  overflow: hidden;
  background: #000;
  outline: .45cqw solid transparent;
  outline-offset: .15cqw;
  cursor: pointer;
}
.vi-grid li.hueco{ background: none; cursor: default; }
.vi-grid li[aria-selected="true"]{
  outline-color: var(--vi-naranja);
  box-shadow: 0 0 1.4cqw rgba(255, 139, 30, .55);
}
.vi-grid img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* la miniatura también pasa por la cinta */
  filter: var(--cinta) saturate(1.2) contrast(1.06);
}
.vi-grid .vacio{   /* cinta sin imagen: el azul de "sin señal" con el título */
  height: 100%;
  display: grid;
  place-items: center;
  padding: 1cqw;
  background: #0a3bb5;
  font-size: 2.4cqw;
  line-height: 1.25;
  text-align: center;
}

/* --- franja azul con la cinta elegida --- */
.vi-band{
  position: absolute;
  inset-inline: 0;
  top: 56.4cqw;
  height: 6cqw;
  padding-inline: 8cqw 6.9cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  background: linear-gradient(#3a66ea, #2449c8);
  font-size: 3.8cqw;
  white-space: nowrap;
}
.vi-band > span:first-child{ overflow: hidden; text-overflow: ellipsis; }
.vi-tape{ display: flex; align-items: center; gap: 1.2cqw; }
.vi-tape svg{ width: 4.2cqw; height: 2.8cqw; fill: none; stroke: #fff; stroke-width: 1.6; }

/* --- pestañas de categoría --- */
.vi-tabs{
  position: absolute;
  left: 6.9cqw;
  right: 6.9cqw;
  top: 63.4cqw;
  height: 7.1cqw;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.2cqw;
}
.vi-tabs li{
  position: relative;
  display: grid;
  place-items: center;
  border-radius: .7cqw;
  background: linear-gradient(#26357d, #172459);
  box-shadow: inset 0 .2cqw 0 rgba(255,255,255,.18);
  cursor: pointer;
}
.vi-tabs li[aria-selected="true"]{
  background: linear-gradient(#5b82f5, #3458d6);
}
.vi-tabs li[aria-selected="true"]::after{
  content: '';
  position: absolute;
  inset: auto .6cqw -.3cqw;
  height: .6cqw;
  border-radius: .3cqw;
  background: var(--vi-naranja);
}
.menu[data-foco="tabs"] .vi-tabs li[aria-selected="true"]{
  outline: .35cqw solid #fff;
  outline-offset: .2cqw;
}
/* tus íconos, tal cual los dibujaste */
.vi-tabs .ico{ width: 6.6cqw; height: 4.6cqw; }
.vi-tabs .ico svg{ display: block; width: 100%; height: 100%; overflow: visible; }
.vi-tabs span.letra{
  padding: .6cqw .9cqw;
  border-radius: .6cqw;
  background: #221f20;
  font-size: 2.8cqw;
}

/* --- ficha de la cinta (ventana de ayuda) --- */
.vi-pop{
  position: absolute;
  left: 48cqw;
  width: 45.2cqw;
  top: 11.4cqw;
  height: 55cqw;
  display: grid;
  grid-template-rows: 6.4cqw 1fr auto;
  background: #e2e6ee;
  box-shadow: 0 1cqw 2.6cqw rgba(0,0,0,.6);
  color: #16203a;
  text-transform: none;
  z-index: 3;
}
.vi-pop[hidden]{ display: none; }
.vi-pop-head{
  display: flex;
  align-items: center;
  padding-inline: 1.4cqw;
  background: linear-gradient(#bfc5d0, #9ea5b3);
  font-size: 3.8cqw;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.vi-pop-body{
  display: flex;
  flex-direction: column;
  padding: 1.6cqw 1.4cqw 1.4cqw;
  font-size: 3cqw;
  line-height: 1.45;
  overflow: hidden;
}
.vi-pop-body p{ transform: scaleY(var(--aplaste)); transform-origin: top left; }
.vi-pop-rol{ margin-top: 1.2cqw; font-size: 2.6cqw; text-transform: uppercase; opacity: .75; }
.vi-pop-q{ margin-top: auto; font-size: 3.6cqw; }   /* pegado a los botones, como "Activate?" */
.vi-pop-btns{
  display: flex;
  justify-content: space-between;
  padding: 0 .6cqw 1cqw;
}
.vi-pop-btns .vi-btn{ width: 14.4cqw; height: 5.8cqw; font-size: 4cqw; }
.vi-pop-btns .vi-btn.elegido{ outline: .4cqw solid var(--vi-naranja); outline-offset: .2cqw; }

/* ---------- reproducción ---------- */

.player{
  position: absolute;
  inset: 0;
  z-index: 1;               /* debajo del OSD y de las capas de tubo */
  display: grid;
  place-items: center;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
.player[hidden]{ display: none; }
.pl-img{
  position: absolute;     /* atado al visor: con 100% en la grilla se desbordaba y recortaba los verticales */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: var(--cinta) saturate(1.1);
}
.pl-img[hidden]{ display: none; }
.pl-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.pl-video[hidden]{ display: none; }
.pl-lado{
  display: none;
  position: absolute;
  top: 14%;
  bottom: 14%;
  width: 8%;
  z-index: 2;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.pl-lado.izq{ left: 0; }
.pl-lado.der{ right: 0; }
.player.con-video .pl-lado{ display: block; }
.player.con-video .pl-lado:hover{ background: linear-gradient(90deg, rgba(255,255,255,.12), transparent); }
.player.con-video .pl-lado.der:hover{ background: linear-gradient(270deg, rgba(255,255,255,.12), transparent); }
.player.salto .pl-img{ animation: salto .22s steps(3); }
@keyframes salto{   /* el saltito de la cinta al pasar de archivo */
  0%   { transform: translateX(-3%) skewX(-6deg); filter: brightness(1.8) blur(2px); }
  50%  { transform: translateX(2%); }
  100% { transform: none; }
}
.pl-vacio{   /* tramo sin grabar: el azul de la cámara */
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #0a3bb5;
  font-size: 5cqw;
}
.pl-vacio[hidden]{ display: none; }

/* página web: VISIT WEBSITE sobre la captura, o sobre el azul si no hay */
.pl-web{
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2.4cqw;
  text-align: center;
  background: rgba(4, 20, 70, .6);
  text-shadow: 0 0 2px #000, 0 1px 3px rgba(0, 0, 0, .85);
}
.pl-web.sin-captura{ background: #0a3bb5; }
.pl-web[hidden]{ display: none; }
.pl-web-titulo{ font-size: 6cqw; color: var(--green); }
.pl-web-url{ font-size: 3.6cqw; letter-spacing: .03em; }
.pl-web-hint{ font-size: 2.6cqw; opacity: .85; animation: blink 1.6s steps(1) infinite; }

/* el OSD no tapa los toques sobre la imagen; el hint sigue siendo tocable */
.osd{ pointer-events: none; }

.pl-info{ display: none; flex-direction: column; gap: .2em; }
.playing .pl-info{ display: flex; }
.playing .osd-handle{ display: none; }
.pl-cinta{ font-size: clamp(12px, 2.2vmin, 26px); opacity: .85; }
/* sobre fotos claras el texto necesita más contraste que sobre el azul */
.playing .osd{
  text-shadow: 0 0 2px #000, 0 1px 3px rgba(0, 0, 0, .85);
}
.playing #mode{ text-shadow: 0 0 2px #000, 0 1px 3px rgba(0, 0, 0, .85); }

/* archivo a pantalla completa, limpio */
.detalle{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 3vmin 3vmin 8vmin;
  background: rgba(0, 0, 0, .95);
  cursor: zoom-out;
}
.detalle[hidden]{ display: none; }
.detalle img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.det-pie{
  position: absolute;
  inset: auto 0 2.5vmin;
  text-align: center;
  color: #cfd6e4;
  font-size: clamp(12px, 1.8vmin, 18px);
  letter-spacing: .04em;
}

/* ---------- demo mode ---------- */

.demo{
  position: absolute;
  inset: 0;
  z-index: 1;               /* como el reproductor: debajo del OSD y del tubo */
  overflow: hidden;
  background: #000;
}
.demo[hidden]{ display: none; }
.demo-cuadro{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
}
.demo-cuadro img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--cinta) saturate(1.15) contrast(1.05);
}
.demo-cuadro.logo img{
  position: static;
  width: 56cqw;
  height: auto;
  filter: url(#vhs) drop-shadow(-3px 0 0 rgba(255, 70, 130, .55)) drop-shadow(3px 0 0 rgba(70, 200, 255, .5));
}
.demo-cuadro.cartel{
  background: radial-gradient(120% 95% at 50% 40%, var(--blue-light), var(--blue-mid) 42%, var(--blue-deep));
}
/* los carteles del demo de Sony: letra blanca grande con sombra dura */
.demo-cartel,
.demo-titulo{
  color: #fff;
  text-shadow: .35cqw .35cqw 0 #000, -.1cqw -.1cqw 0 #000, 0 0 1.2cqw rgba(0, 0, 0, .6);
  filter: var(--cinta);
}
.demo-cartel{ position: relative; font-size: 9cqw; letter-spacing: .06em; transform: scaleY(var(--aplaste)); }
.demo-cartel.chico{ font-size: 5.4cqw; }
.demo-titulo{
  position: absolute;
  inset-inline: 0;
  bottom: 17%;
  text-align: center;
  font-size: 4.4cqw;
  letter-spacing: .04em;
}

/* transiciones de la cámara */
.fx-wipe{ animation: d-wipe .75s steps(10) both; }
@keyframes d-wipe{ from{ clip-path: inset(0 100% 0 0); } to{ clip-path: inset(0 0 0 0); } }

.fx-bounce{ animation: d-bounce .9s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes d-bounce{ from{ transform: translateY(-100%); } to{ transform: none; } }

@property --r{ syntax: '<length>'; inherits: false; initial-value: 0px; }
.fx-dot{
  -webkit-mask-image: radial-gradient(circle, #000 var(--r), transparent calc(var(--r) + .5px));
          mask-image: radial-gradient(circle, #000 var(--r), transparent calc(var(--r) + .5px));
  -webkit-mask-size: 3cqw 3cqw;
          mask-size: 3cqw 3cqw;
  animation: d-dot .9s steps(7) both;
}
@keyframes d-dot{ from{ --r: 0px; } to{ --r: 2.2cqw; } }

.fx-fader{ animation: d-fader 1s both; }
@keyframes d-fader{
  from{ opacity: 0; filter: brightness(0) grayscale(1); }
  60% { filter: brightness(.8) grayscale(1); }
  to  { opacity: 1; filter: none; }
}

@media (prefers-reduced-motion: reduce){
  .viewfinder, .grain, .scanlines::after, #mode,
  .dirt::before, .dirt::after, .viewfinder::after,
  .boot-logos, .boot::after, .osd, .menu, .rollbar::after,
  .player.salto .pl-img{ animation: none; }
}