/* NavegaCurso · banda de la VSL en otras páginas (01/11/2026, Mario: «la VSL en las otras páginas sí me gusta bastante»):
   test del PER, página de fechas y las 13 páginas de comunidad (como-sacar-per-pnb-*). La lógica es la de la portada (/vsl.js).
   Es el mismo CSS de la VSL de la portada (que va dentro de index.html: si se cambia allí, cambiarlo también aquí) y, al final,
   lo propio de estas páginas: la banda con su título encima (como en las maquetas del 01/11). */
.sec-vsl .wrap{max-width:1180px;}
/* (17/10, Mario: «en portátil, un poco más grande») hasta 1080 px de ancho, pero sin pasar de lo que cabe en la pantalla
   con los dos botones debajo (alto de la ventana menos cabecera y botones) */
.vsl{margin:0 auto;width:100%;max-width:min(1080px, calc((100vh - 210px) * 16 / 9));}
/* (17/10, Mario: «un poco más grande y más centrado: tiene más blanco abajo que arriba, me da toque») el mismo blanco arriba
   (del hero al vídeo) que abajo (de los botones al texto de la sección siguiente): la banda no lleva relleno abajo y a la
   sección siguiente se le quita relleno arriba SOLO cuando la banda se ve (en la variante «sin» del A/B queda igual).
   En PC el vídeo + los botones caben enteros en la pantalla con ese blanco (36 px) arriba y abajo. */
.sec-vsl{padding:48px 0 0;}
.sec-vsl:not([hidden]) + .band{padding-top:48px;}
/* (18/10, Mario: «en móvil, un poquito más de espacio arriba del vídeo y debajo de Matricularme ahora») 36 → 48 px */
@media(min-width:860px){.sec-vsl[id]{scroll-margin-top:70px;}
  /* (18/10, Mario: «en PC, un 75 % más de espacio arriba y debajo de los botones») 36 → 63 px; el vídeo sigue del mismo tamaño */
  .sec-vsl{padding-top:63px;}.sec-vsl:not([hidden]) + .band{padding-top:63px;}
  .vsl{max-width:min(1080px, calc((100vh - 71px - 36px - 66px - 36px) * 16 / 9));}}
.vsl-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px;}
@media(max-width:560px){.vsl-ctas .btn{width:100%;justify-content:center;}}
.vsl-marco{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0B2545;box-shadow:0 22px 44px -22px rgba(11,37,69,.6);}
.vsl-play{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;cursor:pointer;background:#0B2545;display:block;}
.vsl-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.vsl-play:hover img{transform:scale(1.03);}
/* (18/10, Mario: «el play y el de 3 minutos están descentrados») el conjunto círculo + «3 min» (84 + 12 + 28 px) va centrado
   en el recuadro (antes el círculo estaba en el centro y la pastilla colgaba por debajo) y el triángulo, centrado en su círculo */
.vsl-boton{position:absolute;left:50%;top:calc(50% - 20px);width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:#FFC93C;color:#0B2545;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,.35);animation:vslLatido 2.6s ease-in-out infinite;}
.vsl-boton svg{width:34px;height:34px;margin-left:-1px;}
.vsl-dur{position:absolute;left:50%;top:calc(50% + 34px);transform:translateX(-50%);background:rgba(11,37,69,.85);color:#fff;font-weight:600;font-size:14px;line-height:1;padding:7px 13px;border-radius:999px;white-space:nowrap;}
.vsl-play:focus-visible{outline:3px solid #FFC93C;outline-offset:-3px;}
.vsl--activo .vsl-play{display:none;}
.vsl-video{position:absolute;inset:0;width:100%;height:100%;background:#000;}
/* (01/11/2026, Mario) vista previa en movimiento (vsl.js): unos segundos del vídeo, sin sonido, encima de la carátula;
   aparece suave cuando ya se está moviendo (mientras carga, o si no puede, se ve la carátula) */
.vsl-previa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;pointer-events:none;transition:opacity .6s ease,transform .5s ease;}
.vsl--previa .vsl-previa{opacity:1;}
.vsl-play:hover .vsl-previa{transform:scale(1.03);}
/* (18/10, Mario) pantalla completa al pulsar el play: el recuadro ocupa toda la pantalla, sin esquinas redondeadas */
.vsl-marco:fullscreen{aspect-ratio:auto;width:100%;height:100%;border-radius:0;box-shadow:none;background:#000;}
.vsl-marco:-webkit-full-screen{aspect-ratio:auto;width:100%;height:100%;border-radius:0;box-shadow:none;background:#000;}
/* (17/10, Mario) botón de subtítulos propio, a la vista: arriba a la derecha del vídeo */
.vsl-cc{position:absolute;top:12px;right:12px;z-index:3;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border:0;border-radius:999px;background:rgba(11,37,69,.82);color:#fff;font:600 14px/1 Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);}
.vsl-cc b{color:#FFC93C;font-weight:700;}
.vsl-cc-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:18px;border:2px solid currentColor;border-radius:4px;font-size:10px;font-weight:800;letter-spacing:.5px;}
.vsl-cc--off b{color:#DCE4EE;}
.vsl-cc--off .vsl-cc-ico{opacity:.6;}
.vsl-cc:hover{background:rgba(11,37,69,.95);}
.vsl-cc:focus-visible{outline:3px solid #FFC93C;outline-offset:2px;}
/* (17/10, Mario) solo a la vista mientras se mueve el ratón por encima (o en pausa), como la barra del reproductor (vsl.js controles) */
.vsl-cc{opacity:0;pointer-events:none;transition:opacity .25s ease;}
.vsl--ctrl .vsl-cc,.vsl-cc:focus-visible{opacity:1;pointer-events:auto;}
@keyframes vslLatido{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}}
@media(prefers-reduced-motion:reduce){.vsl-boton{animation:none;}.vsl-play img{transition:none;}.vsl-previa{display:none;}}
@media(max-width:400px){.vsl-boton{width:64px;height:64px;margin:-32px 0 0 -32px;top:calc(50% - 19px);}.vsl-boton svg{width:26px;height:26px;margin-left:-1px;}.vsl-dur{top:calc(50% + 23px);}}

/* lo propio de las otras páginas: título encima del vídeo y un vídeo algo más pequeño que en la portada */
.sec-vsl2{padding:56px 0 8px;}
.sec-vsl2 .vsl-cab{text-align:center;max-width:760px;margin:0 auto 22px;}
.sec-vsl2 .vsl-cab h2{margin:6px 0 8px;}
.sec-vsl2 .vsl-cab p{margin:0;}
.sec-vsl2 .vsl-cab .eyebrow{justify-content:center;}
.sec-vsl2 .vsl-cab .lede{margin:0 auto;}
@media(max-width:560px){.sec-vsl2{padding:40px 0 4px;}}
.sec-vsl2 .vsl{max-width:880px;}