/* ════════════════════════════════════════════════════════════════════
   WEBLYM · «PÍDELO CON TUS PALABRAS»: EL VÍDEO DE LA IA         (07/10)

   La tercera sección de la portada: la cabecera de siempre (titular a la
   izquierda, lema a la derecha; sus clases son las de prueba.css) y debajo
   el vídeo del editor con la IA, de lado a lado, como en la referencia.
   ════════════════════════════════════════════════════════════════════ */

.ia {
  --u: calc(min(100vw, 1920px) / 1088);
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 0 calc(120 * var(--u));
}

/* ── EL VÍDEO, TRANSPARENTE (10/10) ─────────────────────────────────
   Desde el 10/10 el vídeo es una ventana del editor con las esquinas
   redondeadas y TRANSPARENTE por fuera (webm con alfa), así que se posa
   sobre la página sin más. Se retira todo lo que hacía falta con el de
   antes, que traía un fondo gris liso: el punto de brillo (×1,067), la
   mezcla en `multiply`, la máscara que desvanecía los bordes y el
   resplandor amarillo de detrás. Con este, el brillo aclaraba la propia
   interfaz y la máscara se comía las esquinas de la ventana. */
.ia__escena {
  position: relative;
  margin-top: calc(28 * var(--u));
}

/* MÁS PEQUEÑO (10/10, pedido: «ocupa demasiado»): el 72 % del ancho de
   la sección y centrado, en vez de lado a lado. */
.ia__video {
  display: block;
  width: 72%;
  margin: 0 auto;
  height: auto;
  aspect-ratio: 2958 / 1380;
}

/* ── MÓVIL (12/10, pedido: «la versión de móvil, con todo menos la demo»)
   Hasta hoy en móvil no salía: la portada cabía en una pantalla. Ahora
   sigue al inicio, en una sola columna: la cabecera apilada —titular y
   debajo el lema— y el vídeo de lado a lado.
   EN PÍXELES Y NO EN `--u`: `--u` es el ancho dividido entre 1088, y a 390
   da 0,36; todo saldría a un tercio. Las cuentas de móvil se hacen sobre
   los 390 de un teléfono, como el inicio.
   LA CABECERA SE DEFINE AQUÍ PARA TODAS LAS SECCIONES que la usan («Pídelo»
   y «Gestiona tu tienda»; la de «Pruébalo» no sale): esta hoja carga
   detrás de prueba.css, que es donde vive la de ordenador. */
@media (max-width: 640px) {
  .ia {
    padding: 64px 0 0;
  }

  .prueba__cabeza {
    display: block;
    padding: 0 20px;
  }

  .prueba__titulo {
    font-size: 30px;
    line-height: 1.2;
  }

  .prueba__lema {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.35;
  }

  .ia__escena {
    margin-top: 20px;
  }

  /* De lado a lado y ENTERO: se probó al 108 % para que la ventana llegara
     al canto, y el panel de Lym, que va pegado a la derecha del vídeo,
     quedaba cortado. */
  .ia__video {
    width: 100%;
  }
}