@charset "utf-8";
/* assets/css/vimeo-full.css */

/* =========================
   1) Contenedor Vimeo con cambio automático
   - móvil: vertical (9:16)
   - desktop: horizontal (16:9)
========================= */

.vimeoFull{
  width: 100%;
  margin: 0;
}

.vimeo-full__iframe{
  display: block;
  width: 100%;
  border: 0;
  background: #000;

  /* MÓVIL: vídeo vertical */
  aspect-ratio: 9 / 16;
}

/* TABLET / DESKTOP: vídeo horizontal */
@media (min-width: 768px){
  .vimeo-full__iframe{
    aspect-ratio: 16 / 9;
  }
}


/* =========================
   2) Utilidad ancho total (full bleed)
   - Para sacar el vídeo del contenedor estrecho
========================= */

.full-bleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* =========================
   3) Vídeo vertical fijo (opcional)
   - Para embeds verticales sin JS (si algún día lo usas)
========================= */

.vimeo-portrait{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #000;

  /* Ratio 9:16 */
  aspect-ratio: 9 / 16;
}

.vimeo-portrait iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Limita altura en pantallas grandes para que no se vea enorme */
@media (min-width: 992px){
  .vimeo-portrait{
    max-height: 760px; /* ajusta a tu gusto */
    margin-left: auto;
    margin-right: auto;
  }
}


/* =========================
   4) Textos alrededor del vídeo
========================= */

.video-lead{
  margin: 0 0 10px;
  font-size: 1.1rem;
  line-height: 1.45;
}

.video-note{
  margin: 10px 0 0;
  opacity: 0.9;
}