/* =============================================================================
   AÉREO · EL VIDEO DEL MÓDULO — Niveles 1 y 3

   Es el mismo componente que ya usa el Nivel 2 (habilitacion-matrice/matrice.css),
   con la paleta del Nivel 1: amarillo donde allá va acero.

   El Nivel 3 (VNOC) carga este mismo archivo y lo repinta de noche con cuatro
   variables, igual que hace con curso.css. Por eso los colores de abajo son
   variables y no literales: cambiar --v-am, --v-sup, --v-txt y --v-glow basta
   para mudar el bloque entero de portal. Si agregas un color, hazlo variable.

   CÓMO FUNCIONA · fachada de clic-para-cargar
   Mientras el alumno no pulse play, la página NO habla con Google: no hay
   iframe. La carátula tampoco usa la miniatura de i.ytimg.com, por lo mismo —
   pedirla ya sería un contacto con un servidor de Google antes de que nadie
   haya pedido nada. El reemplazo de la carátula por el iframe lo hace curso.js.

   Esto no es manía: la política de cookies del sitio dice que la página no
   carga nada de terceros sin consentimiento, y un embed de YouTube puesto
   directo la deja mintiendo.

   POR QUÉ ESTE ARCHIVO EXISTE Y NO ESTÁ DENTRO DE curso.css
   Siete de las ocho páginas que llevan video cargan curso.css. El Módulo 2 no:
   es una clase interactiva con su propia hoja de estilos completa, y
   enchufarle curso.css le cambiaría la maqueta entera. La alternativa era
   dejar dos copias del componente —que es justo como se desincronizan las
   cosas— así que vive acá, en un archivo chico que cargan las ocho.

   Por lo mismo el bloque trae sus propias variables: el Módulo 2 no define
   --hd, --bd ni --mn, y sin esto le saldría la tipografía del sistema.
   ============================================================================= */

.vid{
  --v-hd:'Big Shoulders Display','Arial Narrow',sans-serif;
  --v-bd:'Roboto',system-ui,sans-serif;
  --v-mn:'Roboto Mono',ui-monospace,monospace;
  --v-ease:cubic-bezier(.22,.61,.36,1);
  --v-am:#ECE31D;              /* el acento: amarillo AÉREO */
  --v-glow:236,227,29;         /* el mismo acento en RGB, para el halo */
  --v-sup:#0A0C0D;             /* el fondo de la franja */
  --v-txt:#C2C7CC;             /* la bajada */
  --v-txt2:#8A9099;            /* los rótulos monoespaciados */
  --v-car:#1C1F22;             /* la carátula, arriba */
  --v-car-on:#25292D;          /* la carátula, con el puntero encima */
  background:var(--v-sup);padding:clamp(30px,5vh,46px) 0 28px}

.vid .wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.vid .vk{font-family:var(--v-mn);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--v-am)}
.vid h2{font-family:var(--v-hd);text-transform:uppercase;font-weight:900;color:#fff;
  font-size:clamp(21px,3.4vw,30px);line-height:1;margin:8px 0 4px}
.vid .vsub{font-family:var(--v-bd);font-size:14px;color:var(--v-txt);margin-bottom:16px;
  max-width:62ch;line-height:1.6}
.vid .vsub strong{color:#fff}

/* El marco mantiene 16:9 con aspect-ratio. Si el navegador es viejo y no lo
   entiende, el min-height evita que la caja colapse a cero. */
.vid .vbox{position:relative;aspect-ratio:16/9;min-height:200px;background:#000;
  border:3px solid #000;outline:1px solid rgba(255,255,255,.18);border-radius:3px;
  overflow:hidden}
.vid .vbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* la carátula: botón a pantalla completa, sin imágenes externas */
.vid .vplay{position:absolute;inset:0;width:100%;height:100%;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:12px;
  cursor:pointer;color:#fff;text-align:center;padding:20px;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(var(--v-glow),.16), transparent 70%),
    linear-gradient(160deg,var(--v-car),#0A0C0D);
  border:0;font-family:var(--v-bd);transition:background .2s}
.vid .vplay:hover,.vid .vplay:focus-visible{background:
    radial-gradient(120% 90% at 50% 40%, rgba(var(--v-glow),.28), transparent 70%),
    linear-gradient(160deg,var(--v-car-on),#0A0C0D)}
.vid .vplay .tri{width:66px;height:66px;border-radius:50%;background:var(--v-am);
  display:flex;align-items:center;justify-content:center;flex:0 0 66px;
  transition:transform .2s var(--v-ease)}
.vid .vplay:hover .tri{transform:scale(1.08)}
.vid .vplay .tri svg{width:26px;height:26px;margin-left:4px;fill:#0A0C0D}
.vid .vplay b{font-family:var(--v-hd);font-weight:900;text-transform:uppercase;
  font-size:clamp(16px,2.4vw,21px);line-height:1.05;max-width:24ch}
.vid .vplay span{font-family:var(--v-mn);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--v-txt2)}

/* pie del bloque: duración, aviso de que sale a YouTube y la playlist */
.vid .vpie{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:11px;
  font-family:var(--v-mn);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--v-txt2)}
.vid .vpie a{color:var(--v-am);text-decoration:none;border-bottom:1px solid rgba(var(--v-glow),.45)}
.vid .vpie a:hover{color:#fff;border-bottom-color:#fff}

/* ---------- variante encajada: SOLO el Módulo 2 ----------
   En los demás módulos el bloque es una franja a lo ancho de la página,
   colgando del encabezado. El Módulo 2 no tiene encabezado: su contenido
   entero vive dentro de un .wrap de 1100 px, y una franja metida ahí dentro
   se vería cortada a la mitad del ancho, como un error. Acá se presenta
   entonces como lo que sería en ese contexto: una tarjeta oscura. */
.vid--caja{border:3px solid #000;border-radius:3px;
  padding:clamp(22px,4vh,30px) 0 22px;margin:0 0 30px}
.vid--caja .wrap{padding:0 18px}

/* ---------- variante de las guías ----------
   En /guias/ el bloque entra justo debajo de la "Respuesta corta", que es una
   tarjeta NEGRA con sombra amarilla flotando sobre página blanca. Pegadas, las
   dos superficies oscuras se tocan sin separación: la tarjeta pierde su borde
   inferior y las dos leen como un solo bloque negro. Este aire se lo devuelve. */
.vid--guia{margin-top:32px}

/* ---------- variante del hub del portal ----------
   El hub ya es negro de fondo: una franja #0A0C0D encima de #0A0C0D no es una
   franja, es nada. Acá el bloque se presenta como lo que corresponde en ese
   contexto —una pieza enmarcada, con el mismo degradado y el mismo borde que
   la banda de la playlist que va más abajo— para que las dos se lean como
   familia y no como dos cosas sueltas.

   Va envuelto en el .wrap del hub, así que el .wrap interno del componente
   suelta su ancho máximo: si no, encogería el bloque dentro del bloque. */
.vid--hub{background:linear-gradient(135deg,#1C1F22,#0A0C0D);
  border:3px solid #000;outline:1px solid rgba(255,255,255,.14);border-radius:3px;
  padding:clamp(26px,4.5vh,38px) 0 26px}
.vid--hub .wrap{max-width:none;padding:0 clamp(18px,3vw,26px)}