/* Videoteca Plim Plim · tema «El cielo de Plim Plim» (W4a, 11/11/2026)
   Familia visual de Plim Plim Studio AI (/srv/proyectos/plimplim-studio/tema): paleta oficial, Fredoka + Nunito, logo
   oficial con una palabra, nubes y estrellitas oficiales, pestañas rojas del styleguide, botones rojos redondeados.
   Todas las rutas son relativas a este archivo (sirve igual en /estatico/marca/ y en docs/maquetas/). */

/* ── fuentes (OFL, ver fuentes/LICENCIA-*) ─────────────────────────────────────────────────────────────── */
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fuentes/fredoka-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(fuentes/fredoka-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(fuentes/nunito-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(fuentes/nunito-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── tokens ─────────────────────────────────────────────────────────────────────────────────────────── */
:root {
  /* institucionales (branding.pdf p.3) */
  --pp-azul: #0074BC; --pp-celeste: #39BDEE; --pp-amarillo: #FDEB07; --pp-rojo: #ED1C24;
  --pp-azul-oscuro: #0A4E8E; --pp-naranja: #F19220; --pp-lima: #BBCE35; --pp-rosa: #F285B3;
  /* Pantone de los personajes (Colores y medidas.pdf): tintas para texto chico con AA */
  --pp-marino: #13294B; --pp-rojo-485: #DA291C; --pp-rojo-1805: #AF272F; --pp-naranja-1525: #B94700;
  --pp-verde-364: #4A7729; --pp-violeta-2665: #753BBD;
  /* neutros: celeste y azul oscuro con blanco (los del estudio) */
  --s0: #FFFFFF; --s1: #F3FAFE; --s3: #ECF7FD; --s4: #DDF0FA; --s5: #CDE9F8;
  --l1: #D3E9F6; --l2: #B7DBF0; --l3: #8DC6E7;
  --x1: var(--pp-marino); --x2: var(--pp-azul-oscuro); --x3: #3B6E9F;
  --velo: rgba(19, 41, 75, .80);
  /* letra */
  --titulo: "Fredoka", "Nunito", system-ui, sans-serif;
  --texto: "Nunito", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* medidas */
  --r1: 10px; --r2: 14px; --r3: 20px; --r4: 28px; --rp: 999px;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --ancho: 1480px;
  --sombra-1: 0 1px 2px rgba(10, 78, 142, .06), 0 10px 24px -16px rgba(10, 78, 142, .38);
  --sombra-2: 0 2px 4px rgba(10, 78, 142, .08), 0 22px 40px -22px rgba(10, 78, 142, .50);
  --sombra-3: 0 30px 80px -24px rgba(10, 42, 80, .45);
  --foco: 0 0 0 3px #fff, 0 0 0 6px var(--pp-azul);
  --cielo: linear-gradient(180deg, #C9E9FB 0%, #E2F4FD 46%, var(--s1) 100%);
  --suave: cubic-bezier(.2, .8, .2, 1);
  /* tipos de video: punto de color (relleno oficial) + tinta AA para el texto */
  --tipo-videoclip: var(--pp-rojo);   --tipo-videoclip-tinta: var(--pp-rojo-1805);
  --tipo-episodio: var(--pp-azul);    --tipo-episodio-tinta: var(--pp-azul-oscuro);
  --tipo-didactico: var(--pp-lima);   --tipo-didactico-tinta: var(--pp-verde-364);
  --tipo-programa: var(--pp-naranja); --tipo-programa-tinta: var(--pp-naranja-1525);
}

/* ── base ───────────────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--s1); color: var(--x1); font: 500 15px/1.5 var(--texto); }
::selection { background: var(--pp-amarillo); color: var(--pp-marino); }
a { color: var(--pp-azul); text-decoration: none; }
a:hover { color: var(--x2); }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--r1); }
h1, h2, h3 { font-family: var(--titulo); font-weight: 600; margin: 0; letter-spacing: -.005em; }
img { max-width: 100%; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.envase { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--e6); }
.decor { position: absolute; pointer-events: none; user-select: none; }

/* ── pestaña roja del styleguide (rótulo de sección y del tramo de un momento) ─────────────────────────── */
.vt-pestana { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px;
  border-radius: 10px 10px 10px 3px; background: var(--pp-rojo-485); color: #fff; box-shadow: 0 2px 0 var(--pp-rojo-1805);
  font: 600 12px/1.2 var(--titulo); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.vt-pestana::before { content: ""; width: 11px; height: 14px; flex: none; background: url(piezas/isotipo-blanco.svg) center / contain no-repeat; }
.vt-pestana.sin-iso::before { display: none; }
.vt-pestana.sin-iso { padding-left: 11px; }

/* ── botones y chips ────────────────────────────────────────────────────────────────────────────────── */
.vt-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px;
  border-radius: var(--rp); border: 2px solid var(--l1); background: #fff; color: var(--x2);
  font: 600 15px/1 var(--titulo); cursor: pointer; transition: transform .15s var(--suave), box-shadow .15s, border-color .15s; }
.vt-boton:hover { border-color: var(--pp-azul); color: var(--x1); }
.vt-boton.rojo { background: var(--pp-rojo-485); border-color: var(--pp-rojo-485); color: #fff; box-shadow: 0 3px 0 var(--pp-rojo-1805); }
.vt-boton.rojo:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--pp-rojo-1805); }
.vt-boton.rojo:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pp-rojo-1805); }
.vt-boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.vt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.vt-chip { position: relative; /* encierra al .oculto del selector: si no, se escapa de la fila deslizable */ display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; border-radius: var(--rp);
  border: 1.5px solid var(--l1); background: #fff; color: var(--x2); font: 700 14px/1 var(--texto); white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s; }
.vt-chip:hover { border-color: var(--pp-azul); color: var(--x1); }
.vt-chip.activo { background: var(--pp-azul-oscuro); border-color: var(--pp-azul-oscuro); color: #fff; }
.vt-chip .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--pp-azul)); flex: none; }
.vt-chip select { appearance: none; border: 0; background: transparent; font: inherit; color: inherit; padding-right: 16px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230A4E8E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right center / 10px 6px no-repeat; }
.vt-separador { width: 1px; height: 22px; background: var(--l2); margin: 0 var(--e1); }

/* ── medallón de personaje: retrato oficial (sticker con borde blanco) sobre un círculo; la cabeza se asoma arriba ── */
.vt-medallon { --m: 48px; position: relative; display: inline-block; width: var(--m); height: var(--m); flex: none; }
.vt-medallon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--fondo, var(--s4));
  box-shadow: inset 0 0 0 2px #fff, 0 1px 3px rgba(10, 78, 142, .18); transition: box-shadow .18s var(--suave); }
/* retratos de 256×336 (W4b): el cuadrado de abajo es el del círculo y los ojos quedan a la misma altura en los diez; lo
   que está arriba del centro del círculo se ve entero (orejas, jopo, antenas asoman ~0,31·m por arriba), abajo sólo el
   círculo. La caja sigue siendo m×m: lo que asoma no empuja nada. */
.vt-medallon img { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: auto; aspect-ratio: 256 / 336; max-width: none;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 61.905% no-repeat, radial-gradient(circle closest-side, #000 97%, transparent 100%) bottom / 100% 76.19% no-repeat;
          mask: linear-gradient(#000 0 0) top / 100% 61.905% no-repeat, radial-gradient(circle closest-side, #000 97%, transparent 100%) bottom / 100% 76.19% no-repeat; }
.vt-medallon.mas { display: inline-grid; place-items: center; font: 700 12px/1 var(--texto); color: var(--x2); }
.vt-medallon.mas::before { background: #fff; box-shadow: inset 0 0 0 2px var(--l2); }
.vt-medallon.mas span { position: relative; }

/* el elenco (filtro por personaje): medallón + nombre */
.vt-elenco { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; }
.vt-amigo { display: grid; justify-items: center; gap: 6px; width: 74px; padding: 18px 0 6px; border-radius: var(--r2);
  color: var(--x2); font: 600 12.5px/1.1 var(--titulo); transition: background .15s; }
.vt-amigo .vt-medallon { --m: 46px; transition: transform .18s var(--suave); }
.vt-amigo:hover { background: #fff; color: var(--x1); }
.vt-amigo:hover .vt-medallon { transform: translateY(-3px); }
.vt-amigo.activo { background: #fff; color: var(--x1); box-shadow: var(--sombra-1); }
.vt-amigo.activo .vt-medallon::before { box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px var(--pp-azul); }
.vt-amigo.activo .nombre::after { content: ""; display: inline-block; width: 10px; height: 9px; margin-left: 4px;
  background: url(piezas/corazon-rojo.svg) center / contain no-repeat; }

/* ── barra de arriba ─────────────────────────────────────────────────────────────────────────────────── */
.vt-barra { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--l1); }
.vt-barra .envase { display: flex; align-items: center; gap: var(--e6); height: 76px; }
.vt-marca { display: block; flex: none; }
.vt-marca img { display: block; height: 40px; width: auto; }
.vt-menu { margin-left: auto; display: flex; gap: var(--e2); }
.vt-menu a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--rp);
  color: var(--x2); font: 600 15px/1 var(--titulo); }
.vt-menu a:hover, .vt-menu a.activo { background: var(--s3); color: var(--x1); }
.vt-menu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

/* ── buscador: una nube blanca con el botón rojo ───────────────────────────────────────────────────────── */
.vt-buscador { position: relative; z-index: 2; display: flex; align-items: center; gap: 4px; flex: 1; max-width: 720px;
  height: 52px; padding: 0 5px 0 22px; border-radius: var(--rp); background: #fff; border: 2px solid var(--l2);
  box-shadow: var(--sombra-1); transition: border-color .15s, box-shadow .2s; }
.vt-buscador:focus-within { border-color: var(--pp-azul); box-shadow: 0 0 0 4px rgba(0, 116, 188, .16), var(--sombra-1); }
.vt-buscador input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--x1);
  font: 600 17px/1 var(--texto); }
.vt-buscador input::placeholder { color: var(--x3); font-weight: 500; }
.vt-buscador button { flex: none; display: grid; place-items: center; border: 0; cursor: pointer; border-radius: 50%; }
.vt-buscador .b-imagen { width: 40px; height: 40px; background: transparent; color: var(--x2); }
.vt-buscador .b-imagen:hover { background: var(--s3); }
.vt-buscador .b-buscar { width: 42px; height: 42px; background: var(--pp-rojo-485); color: #fff; box-shadow: 0 2px 0 var(--pp-rojo-1805); }
.vt-buscador svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vt-buscador.grande { height: 66px; max-width: 820px; padding-left: 28px; border-width: 3px; border-color: #fff;
  box-shadow: 0 2px 0 var(--l2), var(--sombra-3); }
.vt-buscador.grande input { font-size: 20px; }
.vt-buscador.grande .b-buscar { width: 54px; height: 54px; }
.vt-buscador.grande .b-buscar svg { width: 25px; height: 25px; }

/* ── INICIO: el cielo, el logo y los amigos que se asoman por arriba del buscador ─────────────────────────── */
.vt-cielo { position: relative; overflow: hidden; background: var(--cielo); padding: 26px 0 70px; }
.vt-cielo .arriba { display: flex; justify-content: flex-end; }
.vt-portada { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; }
.vt-portada .logo { width: 330px; height: auto; margin-top: 2px; filter: drop-shadow(0 10px 18px rgba(10, 78, 142, .16)); }
.vt-portada h1 { margin: 22px 0 0; font-size: 38px; color: var(--x1); }
.vt-portada .bajada { margin: 8px 0 0; font-size: 17px; color: var(--x2); max-width: 56ch; }
.vt-escenario { position: relative; width: 100%; max-width: 820px; margin-top: 104px; }
.vt-asoman { position: absolute; left: 30px; right: 30px; bottom: 100%; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 2px; }
.vt-asoma { position: relative; display: block; flex: 0 1 76px; min-width: 0; transition: transform .25s var(--suave); }
/* la barra (z 2) tapa el 16 % de abajo: en los diez retratos es del mentón para abajo (ojos a la misma altura) */
.vt-asoma img { display: block; width: 100%; height: auto; transform: translateY(16%); filter: drop-shadow(0 4px 6px rgba(10, 78, 142, .18)); }
.vt-asoma .nombre { position: absolute; left: 50%; bottom: calc(100% - 6px); translate: -50% 4px; opacity: 0; padding: 4px 10px;
  border-radius: var(--rp); background: #fff; color: var(--x1); box-shadow: var(--sombra-1); white-space: nowrap;
  font: 600 13px/1.1 var(--titulo); transition: opacity .15s, translate .2s var(--suave); }
.vt-asoma:hover, .vt-asoma:focus-visible { transform: translateY(-10px); box-shadow: none; }
.vt-asoma:hover .nombre, .vt-asoma:focus-visible .nombre, .vt-asoma.muestra .nombre { opacity: 1; translate: -50% 0; }
.vt-asoma.muestra { transform: translateY(-10px); }
.vt-sugerencias { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2); margin-top: 22px; }
.vt-sugerencias .vt-chip { background: rgba(255, 255, 255, .8); border-color: #fff; }
.vt-sugerencias .que { color: var(--x2); font-weight: 600; align-self: center; margin-right: 2px; }
.vt-cielo .nube-a { width: 250px; left: 6%; top: 64px; opacity: .95; }
.vt-cielo .nube-b { width: 300px; right: 7%; top: 170px; }
.vt-cielo .nube-c { width: 170px; left: 19%; top: 300px; opacity: .8; }
.vt-cielo .estrella { width: 26px; }
.vt-cielo .e1 { left: 14%; top: 210px; } .vt-cielo .e2 { right: 18%; top: 86px; width: 30px; } .vt-cielo .e3 { left: 30%; top: 70px; width: 18px; }
.vt-cielo .e4 { right: 26%; top: 318px; width: 20px; } .vt-cielo .e5 { right: 9%; top: 330px; width: 22px; }

/* secciones y filas */
.vt-seccion { padding: var(--e6) 0 var(--e7); }
.vt-seccion-cabeza { display: flex; align-items: baseline; gap: var(--e4); margin-bottom: var(--e5); }
.vt-seccion-cabeza h2 { font-size: 24px; color: var(--x1); }
.vt-seccion-cabeza .cuenta { color: var(--x3); font-weight: 600; }
.vt-seccion-cabeza .ver-todo { margin-left: auto; font: 600 15px/1 var(--titulo); }
.vt-seccion-cabeza .vt-pestana { align-self: center; font-size: 17px; padding: 6px 14px 6px 11px; } /* en Inicio la pestaña ES el título de la fila (h2): toma el tamaño de h2 */

/* ── RESULTADOS ─────────────────────────────────────────────────────────────────────────────────────── */
.vt-filtros { background: linear-gradient(180deg, #fff 0%, var(--s1) 100%); border-bottom: 1px solid var(--l1); }
.vt-filtros .envase { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); padding-top: var(--e3); padding-bottom: var(--e4); }
.vt-resumen { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin: var(--e5) 0 var(--e4); }
.vt-resumen h1 { font-size: 26px; }
.vt-resumen .sub { color: var(--x3); font-weight: 600; }
.vt-resumen .q { color: var(--x2); }

.vt-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px 26px; align-items: stretch; }
.vt-grilla.videos { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.vt-grilla.fila { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* el momento: una pantallita con su pestaña roja y los amigos que aparecen, pegados como stickers */
.vt-tarjeta { position: relative; display: flex; flex-direction: column; padding: 10px 10px 16px; border-radius: var(--r3); background: #fff; color: var(--x1);
  box-shadow: var(--sombra-1); transition: transform .2s var(--suave), box-shadow .2s var(--suave); }
.vt-tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); color: var(--x1); }
.vt-tarjeta:focus-visible { box-shadow: var(--foco), var(--sombra-2); border-radius: var(--r3); }
.vt-cuadro { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r2); background: var(--s4); }
.vt-cuadro > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r2); }
.vt-cuadro::after { content: ""; position: absolute; inset: 0; border-radius: var(--r2); box-shadow: inset 0 0 0 1px rgba(19, 41, 75, .08); pointer-events: none; }
.vt-tramo { position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 9px;
  border-radius: 9px 9px 9px 3px; background: var(--pp-rojo-485); color: #fff; box-shadow: 0 2px 0 var(--pp-rojo-1805);
  font: 600 13px/1.2 var(--titulo); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.vt-tramo .yt { width: 17px; height: 12px; }
.vt-tramo .yt rect { fill: #fff; } .vt-tramo .yt path { fill: var(--pp-rojo-485); }
.vt-dura { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 8px; background: var(--velo); color: #fff;
  font: 700 12.5px/1.2 var(--texto); font-variant-numeric: tabular-nums; }
.vt-quienes { position: absolute; right: 10px; bottom: -16px; z-index: 1; display: flex; }
.vt-quienes .vt-medallon { --m: 38px; margin-left: -9px; }
.vt-quienes .vt-medallon::before { box-shadow: inset 0 0 0 2.5px #fff, 0 2px 4px rgba(10, 78, 142, .22); }
.vt-tarjeta .texto { flex: 1; display: flex; flex-direction: column; padding: 18px 6px 0; }
.vt-tarjeta .texto .vt-de { margin-top: auto; padding-top: 8px; }
.vt-celda { position: relative; display: flex; flex-direction: column; }
/* el lugar del «Ver los N momentos» se reserva en todas las celdas si alguna lo tiene: las tarjetas siguen parejas */
.vt-grilla:has(.vt-mas-del-video) .vt-celda { padding-bottom: 30px; }
.vt-celda > .vt-tarjeta { flex: 1; }
.vt-tarjeta .accion { margin: 0; font: 700 16px/1.38 var(--texto); color: var(--x1); max-width: 46ch; padding-right: 28px; }
.vt-tarjeta .letra { margin: 0; font: italic 600 15.5px/1.4 var(--texto); color: var(--x2); padding-right: 28px; }
.vt-de { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--x3); font: 600 13.5px/1.3 var(--texto); }
.vt-de .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--pp-azul)); flex: none; }
.vt-de b { color: var(--x2); font: 600 14px/1.3 var(--titulo); }
.vt-mas-del-video { position: absolute; left: 8px; bottom: 4px; font: 600 14px/1.2 var(--titulo); }

/* ── VER: la tele de Plim Plim y la caja «Este momento» ────────────────────────────────────────────────── */
.vt-ver { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: var(--e6); align-items: start; padding-top: var(--e5); padding-bottom: var(--e7); }
.vt-tele { position: relative; padding: 12px 12px 34px; border-radius: 30px; background: var(--pp-azul);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14), inset 0 2px 0 rgba(255, 255, 255, .22), var(--sombra-3); }
.vt-tele::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 15px; height: 19px; translate: -50% 0;
  background: url(piezas/isotipo-blanco.svg) center / contain no-repeat; opacity: .95; }
.vt-tele .luz { position: absolute; right: 24px; bottom: 12px; width: 13px; height: 12px; background: url(piezas/corazon-rojo.svg) center / contain no-repeat; }
.vt-pantalla { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #0b1c33; }
.vt-pantalla video, .vt-pantalla > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vt-titulo-video { margin-top: var(--e5); }
/* la línea de datos a la izquierda y las acciones a la derecha; si no entran, las acciones bajan alineadas a la izquierda */
.vt-titulo-video .linea { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px var(--e4); margin-top: 8px; }
.vt-titulo-video h1 { font-size: 32px; line-height: 1.15; }
.vt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; color: var(--x3); font-weight: 600; }
.vt-meta > span + span::before { content: "·"; margin: 0 9px; color: var(--l3); font-weight: 800; }
.vt-meta .tipo { display: inline-flex; align-items: center; gap: 7px; color: var(--c-tinta, var(--x2)); }
.vt-meta .tipo::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--pp-azul)); }
.vt-titulo-video .acciones { display: flex; gap: var(--e2); flex: none; }
.vt-titulo-video .acciones .vt-boton { height: 40px; padding: 0 14px 0 12px; gap: 7px; font-size: 14px; }

.vt-tira-cabeza { display: flex; align-items: baseline; gap: var(--e3); margin: var(--e6) 0 var(--e3); }
.vt-tira-cabeza h2 { font-size: 19px; }
.vt-tira-cabeza span { color: var(--x3); font-weight: 600; }
.vt-tira-marco { position: relative; min-width: 0; } /* si no, en el celular la tira (150 planos) estira la columna */
.vt-tira { position: relative; display: flex; gap: 12px; overflow-x: auto; padding: 10px 8px 14px; scroll-snap-type: x proximity; scroll-padding: 0 8px;
  scrollbar-width: thin; scrollbar-color: var(--l2) transparent; }
.vt-tira-marco.hay-antes .vt-tira { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px); mask-image: linear-gradient(90deg, transparent 0, #000 56px); }
.vt-tira-marco.hay-despues .vt-tira { -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 56px); mask-image: linear-gradient(270deg, transparent 0, #000 56px); }
.vt-tira-marco.hay-antes.hay-despues .vt-tira { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); }
.vt-flecha { position: absolute; top: 34px; z-index: 2; display: none; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 2px solid #fff; border-radius: 50%; background: var(--pp-azul); color: #fff; cursor: pointer; box-shadow: var(--sombra-1);
  font: 700 26px/1 var(--titulo); transition: transform .15s var(--suave), background .15s; }
.vt-flecha span { translate: 0 -2px; }
.vt-flecha:hover { background: var(--x2); transform: scale(1.06); }
.vt-flecha.izq { left: -6px; } .vt-flecha.der { right: -6px; }
.vt-tira-marco.hay-antes .vt-flecha.izq, .vt-tira-marco.hay-despues .vt-flecha.der { display: grid; }
.vt-plano { flex: none; width: 152px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; scroll-snap-align: center; /* center: el encaje no le saca el centro al plano actual */ color: var(--x3); font: 700 12.5px/1.2 var(--texto); font-variant-numeric: tabular-nums; }
.vt-plano .mini { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--s4);
  box-shadow: 0 0 0 1px rgba(19, 41, 75, .08); transition: transform .18s var(--suave), box-shadow .18s; }
.vt-plano img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vt-plano .t { display: block; margin-top: 6px; }
.vt-plano:hover .mini { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--pp-azul); }
.vt-plano.actual .mini { box-shadow: 0 0 0 4px var(--pp-amarillo), 0 0 0 6px #fff, 0 6px 16px -6px rgba(10, 78, 142, .6); }
.vt-plano.actual .t { color: var(--x1); }
.vt-plano.actual .mini::after { content: ""; position: absolute; top: 6px; right: 6px; width: 20px; height: 18px;
  background: url(piezas/corazon-rojo.svg) center / contain no-repeat; filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 0 2px #fff); }

.vt-momento { position: sticky; top: 96px; border-radius: 24px; background: #fff; box-shadow: var(--sombra-2); overflow: hidden; }
.vt-momento .cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: 18px 22px 0; }
.vt-momento .cabeza .de { color: var(--x3); font: 600 14px/1 var(--titulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-momento .cuerpo { padding: 14px 22px 20px; }
.vt-momento h2 { font-size: 25px; line-height: 1.2; color: var(--x1); }
.vt-momento .desc { margin: 10px 0 0; color: var(--x2); font-size: 15.5px; line-height: 1.55; max-width: 54ch; }
.vt-momento .quien { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.vt-momento .quien:empty { display: none; }
.vt-momento .quien .vt-chip { height: 40px; padding: 0 14px 0 6px; gap: 8px; font: 600 15px/1 var(--titulo); }
.vt-momento .quien .vt-chip:not(:has(.vt-medallon)) { padding-left: 14px; }
.vt-momento .quien .vt-medallon { --m: 30px; }
.vt-tiempo { margin: 18px 0 0; padding: 14px 16px; border-radius: var(--r2); background: var(--s3); }
.vt-tiempo .entra { display: flex; gap: 14px; flex-wrap: wrap; font: 700 15px/1.3 var(--texto); color: var(--x1); font-variant-numeric: tabular-nums; }
.vt-tiempo .entra span { color: var(--x3); font-weight: 600; }
.vt-tiempo .tc { margin-top: 8px; font: 600 14px/1.3 var(--mono); color: var(--x2); }
.vt-tiempo .tc small { font: 600 12px/1 var(--texto); color: var(--x3); margin-left: 8px; }
.vt-enlaces { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 2px; }
.vt-enlaces a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 2px 12px; padding: 10px 10px; border-radius: var(--r2); color: var(--x1); }
.vt-enlaces a:hover { background: var(--s3); }
.vt-enlaces .ico { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--s4); color: var(--pp-azul); }
.vt-enlaces .ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vt-enlaces .que { font: 600 15px/1.2 var(--titulo); }
.vt-enlaces .det { grid-column: 2; color: var(--x3); font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.vt-enlaces .ir { grid-row: 1 / span 2; grid-column: 3; color: var(--x3); }
.vt-momento .copiar { width: 100%; margin-top: 14px; height: 48px; }
.vt-momento .pie { padding: 12px 22px 16px; border-top: 1px solid var(--l1); color: var(--x3); font-size: 12.5px; line-height: 1.45; background: var(--s1); }
.vt-momento .pie code { font: 600 12px var(--mono); color: var(--x2); }
.vt-pliegues { display: grid; gap: var(--e2); margin-top: var(--e4); }
.vt-pliegue { border-radius: var(--r3); background: #fff; box-shadow: var(--sombra-1); }
.vt-pliegue summary { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none;
  font: 600 16px/1.2 var(--titulo); color: var(--x1); }
.vt-pliegue summary::-webkit-details-marker { display: none; }
.vt-pliegue summary .n { color: var(--x3); font: 600 14px/1 var(--texto); }
.vt-pliegue summary .rotulo { display: grid; gap: 5px; }
.vt-pliegue summary .rotulo .n { margin: 0; font-size: 13px; }
.vt-pliegue .pila + * { margin-left: 0; }
.vt-pliegue .pila { display: flex; margin-left: auto; padding-top: 8px; }
.vt-pliegue .pila .vt-medallon { margin-left: -6px; }
.vt-pliegue .pila .vt-medallon::before { box-shadow: inset 0 0 0 2px #fff, 0 1px 2px rgba(10, 78, 142, .2); }
.vt-pliegue summary::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 2.5px solid var(--x2); border-bottom: 2.5px solid var(--x2); rotate: 45deg; translate: 0 -3px; transition: rotate .2s; }
.vt-pliegue[open] summary::after { rotate: 225deg; translate: 0 3px; }
.vt-pliegue summary:has(.pila)::after { margin-left: 14px; }

/* ── CATÁLOGO: miniatura oficial de YouTube o el respaldo (cartelito con el cielo, nunca un fotograma pelado) ──── */
.vt-video .vt-cuadro > img { object-fit: cover; }
.vt-video h3 { margin: 14px 6px 0; font-size: 18px; line-height: 1.25; color: var(--x1); }
.vt-video .vt-de { margin: auto 6px 0; padding-top: 6px; }
/* el respaldo ES el catálogo (73 % de los videos no tiene miniatura oficial): cielo y loma del color del tipo, el
   protagonista oficial de un lado (fijo por id) y el título del otro; si el título nombra a dos, van los dos */
.vt-respaldo { --cielo-a: #BFE5FA; --cielo-b: #DDF2FC; --cielo-c: #EEF8FE; --loma-a: #A8DDF5; --loma-b: #39BDEE;
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--r2); container-type: inline-size;
  background: radial-gradient(120% 90% at 85% 0%, #fff 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(160deg, var(--cielo-a) 0%, var(--cielo-b) 60%, var(--cielo-c) 100%); }
.vt-respaldo.tipo-videoclip { --cielo-a: #FAD0E2; --cielo-b: #FCE4EF; --cielo-c: #FEF2F8; --loma-a: #F8BCD6; --loma-b: #F285B3; }
.vt-respaldo.tipo-didactico { --cielo-a: #E2EDB8; --cielo-b: #EEF5D6; --cielo-c: #F7FAEB; --loma-a: #D5E58F; --loma-b: #BBCE35; }
.vt-respaldo.tipo-programa { --cielo-a: #FBDAB4; --cielo-b: #FDE9D2; --cielo-c: #FEF4E8; --loma-a: #F9C88E; --loma-b: #F19220; }
.vt-respaldo .loma { position: absolute; left: -12%; right: -12%; bottom: -64%; height: 86%; border-radius: 50%;
  background: linear-gradient(180deg, var(--loma-a), var(--loma-b)); opacity: .5; }
.vt-respaldo.izq .loma { left: -30%; right: 4%; } .vt-respaldo.der .loma { left: 4%; right: -30%; }
.vt-respaldo .estrella { position: absolute; width: 4.6cqw; }
.vt-respaldo .e1 { left: 47%; top: 11%; } .vt-respaldo .e2 { left: 40%; top: 30%; width: 3.4cqw; }
.vt-respaldo.izq .e1 { left: auto; right: 47%; } .vt-respaldo.izq .e2 { left: auto; right: 41%; }
.vt-respaldo .marca { position: absolute; top: 6%; left: 5.5cqw; display: flex; align-items: center; gap: 2.4cqw; }
.vt-respaldo.izq .marca { left: auto; right: 5.5cqw; flex-direction: row-reverse; }
.vt-respaldo .iso { width: 7cqw; filter: drop-shadow(0 1px 1px rgba(10, 78, 142, .25)); }
.vt-respaldo .serie { font: 600 3.4cqw/1 var(--titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--x2); }
.vt-respaldo .titulo { position: absolute; left: 5.5cqw; right: 49%; bottom: 9%; font: 600 clamp(15px, 7cqw, 25px)/1.1 var(--titulo); color: var(--x1);
  text-wrap: balance; overflow-wrap: break-word; }
.vt-respaldo .titulo.largo { font-size: clamp(14px, 5.9cqw, 21px); }
.vt-respaldo .titulo.muy-largo { font-size: clamp(13px, 4.9cqw, 18px); }
/* con el protagonista a la izquierda el título va arriba de la duración (abajo a la derecha) */
.vt-respaldo.izq .titulo { left: 49%; right: 5.5cqw; bottom: auto; top: 31%; text-align: right; }
.vt-respaldo.dos.der .titulo { right: 60%; } .vt-respaldo.dos.izq .titulo { left: 60%; }
.vt-respaldo.dos .titulo.largo { font-size: clamp(13px, 5.2cqw, 19px); }
.vt-respaldo.dos .titulo.muy-largo { font-size: clamp(12px, 4.3cqw, 16px); }
.vt-respaldo.sin-prota .titulo { right: 36%; } .vt-respaldo.sin-prota.izq .titulo { left: 36%; right: 5.5cqw; }
/* el protagonista asoma desde abajo, cabeza entera (los retratos traen los ojos a la misma altura) */
.vt-respaldo .protas { position: absolute; top: 3%; bottom: 0; right: 3cqw; display: flex; align-items: flex-start; }
.vt-respaldo.izq .protas { right: auto; left: 3cqw; }
.vt-respaldo .prota { height: 112%; width: auto; max-width: none; filter: drop-shadow(0 6px 8px rgba(10, 78, 142, .22)); }
/* dos: más chicos (el corte de abajo cae justo en el borde de la tarjeta) y un poco encimados, como stickers */
.vt-respaldo.dos .protas { top: 20%; }
.vt-respaldo.dos .prota { height: 100%; }
.vt-respaldo.dos .prota + .prota { margin-left: -10cqw; }
.vt-respaldo .nube { position: absolute; right: 7%; top: 30%; width: 34%; opacity: .95; }
.vt-respaldo.izq .nube { right: auto; left: 7%; }
.vt-sin-foto { position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--r2); background: var(--cielo); }
.vt-sin-foto img { width: 34px; opacity: .9; filter: drop-shadow(0 1px 1px rgba(10, 78, 142, .3)); }

/* ── estados ────────────────────────────────────────────────────────────────────────────────────────── */
.vt-vacio { display: grid; grid-template-columns: auto minmax(0, 52ch); gap: var(--e6); align-items: center; align-content: center; justify-content: center;
  min-height: 60vh; padding: var(--e6) 0; }
.vt-vacio p { margin: 10px 0 0; }
.vt-vacio .vt-chips { margin-top: 14px; }
.vt-vacio .que { color: var(--x3); font-weight: 600; margin-right: 2px; }
.vt-vacio img { width: 200px; height: auto; }
.vt-vacio h2 { font-size: 28px; }
.vt-vacio p { color: var(--x2); font-size: 16px; }
.vt-cargando { display: inline-flex; gap: 6px; }
.vt-cargando i { width: 16px; height: 16px; background: url(piezas/estrellita-amarilla.svg) center / contain no-repeat; animation: vt-salto 1s var(--suave) infinite; }
.vt-cargando i:nth-child(2) { background-image: url(piezas/estrellita-rosa.svg); animation-delay: .15s; }
.vt-cargando i:nth-child(3) { background-image: url(piezas/estrellita-naranja.svg); animation-delay: .3s; }
@keyframes vt-salto { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ── celular ────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body { font-size: 15px; }
  .envase { padding: 0 16px; }
  .vt-barra .envase { height: 64px; gap: 10px; }
  .vt-marca img { height: 34px; }
  .vt-marca .largo { display: none; }
  .vt-marca .corto { display: block; }
  .vt-buscador { height: 46px; padding-left: 16px; }
  .vt-buscador input { font-size: 16px; }
  .vt-buscador .b-imagen { display: none; }
  .vt-buscador .b-buscar { width: 36px; height: 36px; }
  .vt-menu a span { display: none; }
  .vt-menu a { padding: 0 10px; }
  .vt-cielo { padding: 14px 0 46px; }
  .vt-portada .logo { width: 224px; }
  .vt-portada h1 { font-size: 28px; margin-top: 16px; }
  .vt-portada .bajada { font-size: 15.5px; padding: 0 8px; }
  .vt-escenario { margin-top: 74px; }
  .vt-asoman { left: 8px; right: 8px; bottom: calc(100% - 8px); }
  .vt-asoma { width: 38px; height: 38px; transform: translateY(0); }
  .vt-asoma .nombre { font-size: 11.5px; }
  .vt-buscador.grande { height: 58px; padding-left: 20px; }
  .vt-buscador.grande input { font-size: 16px; }
  .vt-buscador.grande .b-buscar { width: 46px; height: 46px; }
  .vt-sugerencias { margin-top: 16px; }
  .vt-cielo .nube-a { width: 130px; left: -46px; top: 8px; }
  .vt-cielo .nube-b { width: 130px; right: -58px; top: 128px; }
  .vt-cielo .nube-c, .vt-cielo .e4, .vt-cielo .e5 { display: none; }
  .vt-grilla, .vt-grilla.videos { grid-template-columns: 1fr; gap: 26px; }
  /* en una columna no hay fila que emparejar: el lugar del «Ver los N momentos» sólo en la tarjeta que lo tiene */
  .vt-grilla:has(.vt-mas-del-video) .vt-celda:not(:has(.vt-mas-del-video)) { padding-bottom: 0; }
  .vt-grilla.fila { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 14px; overflow-x: auto;
    margin: 0 -16px; padding: 4px 16px 18px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; }
  .vt-grilla.fila > * { scroll-snap-align: start; }
  .vt-seccion-cabeza .cuenta { display: none; }
  .vt-cielo .e1, .vt-cielo .e2, .vt-cielo .e3 { display: none; }
  .vt-tiempo .tc small { display: block; margin: 4px 0 0; }
  .vt-ver { grid-template-columns: 1fr; gap: var(--e5); padding-top: 12px; }
  .vt-tele { margin: 0 -8px; padding: 6px 6px 22px; border-radius: 20px; }
  .vt-tele::after { bottom: 4px; width: 11px; height: 14px; }
  .vt-tele .luz { right: 16px; bottom: 6px; width: 10px; height: 9px; }
  .vt-pantalla { border-radius: 14px; }
  .vt-titulo-video { margin-top: 16px; }
  .vt-titulo-video h1 { font-size: 25px; }
  .vt-titulo-video { flex-direction: column; margin-top: 0; }
  .vt-titulo-video .acciones { margin-left: 0; flex-wrap: wrap; }
  .vt-titulo-video .acciones .vt-boton { height: 36px; font-size: 13.5px; padding: 0 12px; }
  /* en el celular la caja «Este momento» va pegada debajo de la tele (como en W3), después el título y los planos */
  .vt-ver > div, .vt-ver > aside { display: contents; }
  .vt-tele { order: 1; position: sticky; top: 64px; z-index: 10; } .vt-momento { order: 2; } .vt-titulo-video { order: 3; }
  .vt-tira-cabeza { order: 4; margin: 0 0 -12px; } .vt-tira { order: 5; } .vt-pliegues { order: 6; margin-top: 0; }
  .vt-momento { position: static; border-radius: 20px; }
  .vt-momento .cabeza { padding: 16px 16px 0; }
  .vt-momento .cuerpo { padding: 12px 16px 16px; }
  .vt-momento h2 { font-size: 22px; }
  .vt-momento .pie { padding: 12px 16px 14px; }
  .vt-plano { width: 124px; }
  .vt-seccion-cabeza h2 { font-size: 21px; }
  .vt-seccion-cabeza .vt-pestana { font-size: 15px; }
  .vt-vacio { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  /* elenco y filtros en una fila que se desliza (no cinco renglones antes del primer resultado) */
  .vt-filtros .vt-elenco, .vt-filtros .vt-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .vt-filtros .vt-elenco { padding-top: 4px; padding-bottom: 4px; }
  .vt-filtros .vt-amigo { flex: none; width: 64px; }
  .vt-filtros .vt-chip { flex: none; }
}
@media (min-width: 761px) { .vt-marca .corto { display: none; } }

/* ── ganchos de W3 que siguen andando (app.js, ver.js) ───────────────────────────────────────────────────── */
.vt-buscador .soltar { display: none; }
.vt-buscador.soltando { border-color: var(--pp-azul); border-style: dashed; }
.vt-buscador.soltando .soltar { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; border-radius: var(--rp);
  background: var(--s3); color: var(--x2); font: 600 15px/1.2 var(--titulo); }
.vt-buscador .vt-cargando { display: none; margin-right: 6px; }
.vt-buscador.subiendo { pointer-events: none; }
.vt-buscador.subiendo .vt-cargando { display: inline-flex; }
.vt-buscador.subiendo input { opacity: .55; }
.vt-aviso { position: fixed; left: 50%; bottom: 28px; z-index: 50; max-width: calc(100vw - 32px); padding: 11px 20px; border-radius: var(--rp);
  background: var(--pp-marino); color: #fff; font: 700 15px/1.3 var(--texto); box-shadow: var(--sombra-2); overflow-wrap: anywhere;
  opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: opacity .2s, transform .2s var(--suave); }
.vt-aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.d-ficha { width: min(560px, calc(100vw - 32px)); padding: 20px; border: 0; border-radius: var(--r3); background: #fff; color: var(--x1); box-shadow: var(--sombra-3); }
.d-ficha::backdrop { background: rgba(19, 41, 75, .35); }
.d-ficha p { margin: 0 0 10px; color: var(--x2); font-weight: 600; }
.d-ficha textarea { width: 100%; padding: 10px; border: 1.5px solid var(--l2); border-radius: var(--r1); font: 13px/1.45 var(--mono); color: var(--x1); resize: vertical; }
.d-ficha form { margin-top: 12px; text-align: right; }
.d-ficha .boton { height: 40px; padding: 0 18px; border: 0; border-radius: var(--rp); background: var(--pp-rojo-485); color: #fff; font: 600 15px/1 var(--titulo); cursor: pointer; }
.vt-mas { margin: var(--e2) 0 0; text-align: center; }
.vt-resumen .buscada { width: 64px; height: 36px; object-fit: cover; border-radius: 8px; box-shadow: var(--sombra-1); }
.vt-resumen .volver { font: 600 15px/1 var(--titulo); }
.vt-resumen .nota { color: var(--tipo-programa-tinta); font-weight: 600; }
.vt-tarjeta .accion.suave { color: var(--x2); font-weight: 600; }
.vt-pliegue .adentro { padding: 0 18px 16px; }
.vt-pliegue .adentro .vt-chip { padding-left: 6px; gap: 7px; }
.vt-pliegue summary .n { margin-left: 6px; }
.vt-letra { list-style: none; margin: 0; padding: 0 10px 14px; max-height: 360px; overflow-y: auto; }
.vt-letra li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 7px 8px; border-radius: var(--r1); cursor: pointer; }
.vt-letra li:hover { background: var(--s3); }
.vt-letra li.actual { background: #FFF8B8; }
.vt-letra li.vacia { display: block; cursor: default; color: var(--x3); }
.vt-letra .t { color: var(--x3); font: 600 13px/1.5 var(--texto); font-variant-numeric: tabular-nums; }
.vt-letra .x { color: var(--x1); }
.vt-pliegues details:not([open]) .vt-letra { display: block; }
.vt-plano .mini:empty { background: var(--cielo); }
main { display: block; }

/* filas de Inicio en anchos medianos (tablet, celular apaisado): menos columnas, nada apretado */
@media (min-width: 761px) and (max-width: 1400px) { .vt-grilla.fila { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1100px) { .vt-grilla.fila { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* respaldo chico: sin la serie (la dice el pie de la tarjeta) para que el título no llegue a la marca */
@container (max-width: 250px) { .vt-respaldo .serie { display: none; } }

/* ── W4b: celular ──────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* los diez amigos entran en 390 px sin pisarse (cara ~20 px); en pantallas más angostas la fila se desliza */
  .vt-escenario { margin-top: 62px; }
  .vt-asoman { left: 6px; right: 6px; bottom: 100%; gap: 1px; }
  .vt-asoma { flex: 0 1 38px; width: auto; height: auto; transform: none; }
  .vt-asoma .nombre { font-size: 11.5px; }
  /* «Probá»: una sola fila deslizable */
  .vt-sugerencias { justify-self: stretch; min-width: 0; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 16px -16px 0;
    padding: 2px 16px 6px; scrollbar-width: none; }
  .vt-sugerencias::-webkit-scrollbar { display: none; }
  .vt-sugerencias > * { flex: none; }
  /* filtros: los medallones asoman por arriba, la fila deslizable deja lugar */
  .vt-filtros .vt-elenco { padding-top: 6px; }
  .vt-filtros .vt-amigo { padding-top: 16px; }
  /* Ver: la línea de datos y debajo las acciones, deslizables */
  .vt-titulo-video .linea { flex-direction: column; align-items: stretch; gap: 10px; }
  .vt-titulo-video .acciones { margin: 0 -16px; padding: 2px 16px 6px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .vt-titulo-video .acciones::-webkit-scrollbar { display: none; }
  .vt-titulo-video .acciones .vt-boton { flex: none; }
  .vt-tira-marco { order: 5; }
  .vt-ver { grid-template-columns: minmax(0, 1fr); }
  .vt-flecha, .vt-tira-marco.hay-antes .vt-flecha.izq, .vt-tira-marco.hay-despues .vt-flecha.der { display: none; }
  .vt-tira { padding-left: 4px; padding-right: 4px; }
  .vt-vacio { min-height: 50vh; }
  .vt-vacio img { width: 150px; }
  .vt-vacio .vt-chips { justify-content: center; }
}
@media (max-width: 380px) {
  .vt-asoman { overflow-x: auto; justify-content: flex-start; padding-top: 30px; scrollbar-width: none; }
  .vt-asoma { flex: 0 0 36px; }
}
/* celular apaisado: la tele a la izquierda y «Este momento» a la derecha, sin barra pegada (como en W3) */
@media (max-height: 520px) and (orientation: landscape) {
  .pagina-ver .vt-barra { position: static; }
  .vt-ver { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; padding-top: 10px; padding-bottom: 16px; }
  .vt-ver > div, .vt-ver > aside { display: block; }
  .vt-ver > aside { position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow-y: auto; border-radius: 20px; }
  .vt-tele { position: relative; top: auto; margin: 0; padding: 6px 6px 22px; border-radius: 20px; } /* relative: la luz y el isotipo van adentro */
  .vt-barra .envase { height: 58px; } .vt-marca img { height: 30px; } .vt-buscador { height: 42px; }
  .vt-tele::after { bottom: 4px; width: 11px; height: 14px; }
  .vt-tele .luz { right: 16px; bottom: 6px; width: 10px; height: 9px; }
  .vt-momento { position: static; }
  .vt-titulo-video h1 { font-size: 22px; }
  .vt-plano { width: 120px; }
}