/* =============================================================================
   AÉREO · NIVEL 2 · HABILITACIÓN MATRICE — piel del nivel

   Se carga DESPUÉS de /curso-piloto-dgac/curso.css y solo cambia lo que
   distingue al Nivel 2: el acento deja de ser el amarillo del Nivel 1 y pasa
   al petróleo que el sitio ya usa para este nivel (--petrol #425D76 en el
   landing, la malla y el comparador). Así el alumno sabe en qué nivel está
   con solo mirar la barra.

   Sobre la barra oscura el petróleo puro no se lee (contraste 2,4:1), así que
   ahí se usa su versión clara, --acero. El petróleo sólido se reserva para
   fondos con texto blanco, donde sí rinde.
   ============================================================================= */
:root{
  --petrol:#425D76;
  --acero:#9BB4CC;      /* petróleo aclarado: es el que se lee sobre negro */
  --petrol-hondo:#2B3E50;
}

/* ---------------- barra del nivel ---------------- */
.cbar--n2{background:linear-gradient(90deg,var(--petrol-hondo),var(--ink) 62%)}
.cbar--n2 .menu{color:var(--acero);border-color:rgba(155,180,204,.55)}
.cbar--n2 .menu:hover{background:var(--acero);color:#0A0C0D}
.cbar--n2 .dots a.on{background:var(--acero);color:#0A0C0D;border-color:var(--acero)}
.cbar--n2 .dots a:hover{border-color:var(--acero);color:#fff}
.cprog i{background:var(--acero)}

/* ---------------- cabecera de cada módulo ---------------- */
.mhero .mnum{background:var(--petrol);color:#fff}
.mhero .chapa{display:inline-flex;align-items:center;gap:8px;font-family:var(--mn);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--petrol);margin-bottom:2px}
.mhero .chapa::before{content:"";width:20px;height:2px;background:var(--petrol)}
.mhero h1 .y{color:var(--petrol)}

/* ---------------- selector de flota ---------------- */
.flota{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.flota button{font-family:var(--mn);font-size:12px;letter-spacing:.05em;background:#fff;border:2px solid var(--line-strong);
  border-radius:3px;padding:11px 14px;cursor:pointer;transition:border-color .15s,background .15s;text-align:left}
.flota button:hover{border-color:#000}
.flota button.on{background:var(--petrol);color:#fff;border-color:#000;font-weight:700}
.flota-out{border:2px solid #000;border-left:6px solid var(--petrol);border-radius:3px;background:var(--bg-2);
  padding:15px 17px;margin-top:12px;font-size:14.5px;line-height:1.65;min-height:60px}
@media(min-width:1000px){.flota-out{font-size:16px}.flota button{font-size:13.5px}}

/* ---------------- tabla comparativa con desplazamiento en móvil ---------------- */
.twrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.twrap .tabla{min-width:760px}
.tabla td.si{color:#156B69;font-weight:700}

/* ---------------- el módulo en video ----------------
   Cada módulo abre con su video de la playlist del Nivel 2.

   POR QUÉ NO HAY UN <iframe> DESDE EL PRIMER SEGUNDO
   Un embed de YouTube contacta a Google apenas carga la página, aunque el
   alumno nunca pulse play: deja cookies y entrega la IP. La Política de
   cookies del sitio dice que la ÚNICA etiqueta de terceros es la de medición
   y que solo corre si el visitante la acepta. Un iframe automático la
   convertiría en mentira.

   Así que acá hay una carátula nuestra —sin una sola petición a Google— y
   el iframe nace recién cuando el alumno toca el botón. Es su decisión, y
   además la página carga mucho más liviana. El reemplazo lo hace matrice.js.

   La carátula tampoco usa la miniatura de i.ytimg.com, por lo mismo: sería
   un contacto con un servidor de Google antes de que nadie pida nada. */
/* El padding de arriba no es decorativo: la barra del nivel es fija y mide
   64 px. Con menos aire, al dejar el bloque arriba del todo el rótulo
   "Módulo N en video" quedaba debajo de la barra y no se leía. */
.vid{background:var(--petrol-hondo);padding:clamp(34px,6vh,52px) 0 30px}
.vid .wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.vid .vk{font-family:var(--mn);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--acero)}
.vid h2{font-family:var(--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-size:14px;color:#BCCBDA;margin-bottom:16px;max-width:62ch}

/* 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:#0A0C0D;
  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(66,93,118,.55), transparent 70%),
    linear-gradient(160deg,#1B2630,#0A0C0D);
  border:0;font-family:var(--bd);transition:background .2s}
.vid .vplay:hover,.vid .vplay:focus-visible{background:
    radial-gradient(120% 90% at 50% 40%, rgba(66,93,118,.78), transparent 70%),
    linear-gradient(160deg,#20303C,#0A0C0D)}
.vid .vplay .tri{width:66px;height:66px;border-radius:50%;background:var(--acero);
  display:flex;align-items:center;justify-content:center;flex:0 0 66px;
  transition:transform .2s var(--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(--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(--mn);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#AFC2D4}

/* 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(--mn);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8EA3B6}
.vid .vpie a{color:var(--acero);text-decoration:none;border-bottom:1px solid rgba(155,180,204,.45)}
.vid .vpie a:hover{color:#fff;border-bottom-color:#fff}

/* ---------------- cierre del módulo ----------------
   La franja que remata cada página: dónde estás dentro del Nivel 2. */
.mfin{background:var(--petrol-hondo);color:#DCE6EF;padding:34px 0 40px}
.mfin .wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.mfin .k{font-family:var(--mn);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--acero)}
.mfin h3{font-family:var(--hd);text-transform:uppercase;font-weight:900;color:#fff;
  font-size:clamp(24px,4vw,34px);line-height:1;margin-top:9px}
.mfin p{font-size:15px;margin-top:10px;max-width:58ch}
.mfin .mnav{border-top-color:rgba(255,255,255,.22)}
.mfin .mnav a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
.mfin .mnav a:hover{border-color:var(--acero)}
.mfin .mnav a.sig{background:var(--acero);border-color:var(--acero)}
.mfin .mnav a.sig small{color:#2B3E50}
.mfin .mnav a.sig b{color:#0A0C0D}