/* ============================================================================
   Video de bienvenida — primera cosa que ve la alumna al entrar.
   Usa el mismo sistema de estilo del panel (crema/tinta/salvia/dorado, Fraunces
   + Instrument Sans). El video es VERTICAL (1080x1462 en el original), así que
   se limita el ancho y se centra: a pantalla completa se vería enorme.

   El player es nativo (<video controls>) con una portada propia encima. Así
   quedan los controles de siempre — pantalla completa, barra de avance, AirPlay —
   pero la primera impresión es nuestra, no la del navegador.
   ========================================================================== */

.bienvenida{
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius:var(--r5);
  box-shadow:var(--sombra-m);
  padding:var(--e7) var(--e6) var(--e6);
  margin-bottom:var(--e7);
  text-align:center;
}
.bienvenida .kicker{
  color:var(--dorado);font-weight:700;font-size:var(--t-small);
  letter-spacing:.14em;text-transform:uppercase;
}
.bienvenida h2{
  font-size:var(--t-h2);margin:.3rem 0 .35rem;line-height:1.15;
}
.bienvenida .sub{
  color:var(--tinta-suave);font-size:.97rem;margin:0 auto var(--e6);max-width:46ch;
}

/* --- marco del video ------------------------------------------------------ */
.bienvenida-marco{
  position:relative;
  width:100%;
  max-width:400px;                 /* video vertical: no debe dominar la página */
  margin:0 auto;
  border-radius:var(--r4);
  overflow:hidden;
  background:var(--bosque-1);      /* fondo mientras carga el primer frame     */
  box-shadow:var(--sombra-l);
  aspect-ratio:1080/1462;          /* evita el salto de layout al cargar (CLS) */
}
.bienvenida-marco video{
  display:block;width:100%;height:100%;object-fit:cover;background:var(--bosque-1);
}

/* --- portada (se retira al dar play) -------------------------------------- */
.bienvenida-portada{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:var(--e4);
  padding:var(--e6);
  border:0;width:100%;
  cursor:pointer;
  /* La imagen + su velo llegan por style="background-image" desde el HTML:
     así el archivo de la portada se nombra en un solo lugar. Aquí queda el
     color de respaldo, por si la imagen tarda o falla. */
  background-color:var(--bosque-1);
  background-size:cover;background-position:center;
  transition:opacity .35s ease, visibility .35s ease;
  font-family:var(--f-sans);
}
.bienvenida-portada.oculta{opacity:0;visibility:hidden;pointer-events:none}

.bienvenida-play{
  width:74px;height:74px;border-radius:50%;
  background:rgba(255,255,255,.94);
  display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(31,58,42,.45);
  transition:transform .18s ease, background .18s ease;
  margin-top:auto;
}
.bienvenida-portada:hover .bienvenida-play{transform:scale(1.06);background:#fff}
.bienvenida-play svg{width:26px;height:26px;margin-left:4px;fill:var(--salvia)}

.bienvenida-etiqueta{
  color:#F5F1E8;font-weight:600;font-size:.95rem;line-height:1.3;
  text-shadow:0 1px 8px rgba(31,58,42,.6);
}
.bienvenida-etiqueta span{
  display:block;font-weight:500;font-size:.82rem;opacity:.85;margin-top:2px;
}

/* --- pie ------------------------------------------------------------------ */
.bienvenida-pie{
  color:var(--tinta-suave);font-size:.85rem;margin:var(--e5) 0 0;
}

@media(max-width:560px){
  .bienvenida{padding:var(--e6) var(--e4) var(--e5);border-radius:var(--r4)}
  .bienvenida-marco{max-width:100%}
  .bienvenida-play{width:64px;height:64px}
}