/* ===== /acceso — solo lo específico de esta página (F4B) ===== */

/* Hero. Orden en móvil: titular → qué es → vídeo → marcas → CTA.
   En escritorio pasa a dos columnas y el vídeo sube junto al titular. */
.acceso-hero { padding-top: var(--lbs-e5); padding-bottom: var(--lbs-seccion-corta); }

.acceso-hero__rejilla { display: grid; gap: var(--lbs-e5); }

.acceso-hero__texto { display: contents; }
.acceso-hero__texto > h1 { order: 1; }
.acceso-hero__que-es     { order: 2; margin-top: 0; }
.acceso-hero__video      { order: 3; margin-top: var(--lbs-e2); }
.acceso-hero__marcas     { order: 4; }
.acceso-hero__accion     { order: 5; }

/* Natalia, con más presencia en el primer pantallazo.
   Es el MISMO fotograma aprobado: no se genera nada nuevo. Lo que
   cambia es el encuadre. Con `cover`, una caja más alta recorta por
   los lados —los monitores— y conserva toda la altura, así que la
   cara pasa de ocupar unos 53 px a unos 71: sube un tercio sin tocar
   el material ni empujar el CTA fuera de pantalla. El subtítulo
   incrustado del vídeo sigue entrando entero, que es lo que da
   continuidad con los Reels. */
@media (max-width: 1023.98px) {
  .acceso-hero__video .lbs-video::before { padding-top: 75%; }   /* 4:3 */
  .acceso-hero__video .lbs-video > img { object-position: 51% 50%; }
}

@media (min-width: 1024px) {
  .acceso-hero { padding-top: var(--lbs-e8); }
  .acceso-hero__rejilla {
    /* En escritorio el retrato ocupa la segunda columna y pesa algo más
       que la de texto. Sigue siendo 16:9: aquí la caja ya es ancha. */
    grid-template-columns: 1fr 1.12fr;
    align-items: center;
    gap: var(--lbs-e8);
  }
  .acceso-hero__texto { display: flex; flex-direction: column; align-items: flex-start; }
  .acceso-hero__video { order: 0; margin-top: 0; }
  .acceso-hero__accion { width: 100%; max-width: 380px; }
}

/* Tres hechos en fila apretada. En F4A eran tres líneas apiladas que
   empujaban el CTA fuera de la primera pantalla en móvil. */
.acceso-hero__marcas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--lbs-e3) var(--lbs-e5);
  font-size: var(--lbs-t-nota);
  font-weight: 600;
  color: var(--lbs-texto-2);
}
.acceso-hero__marcas li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.acceso-hero__marcas svg { width: 15px; height: 15px; flex: none; color: var(--lbs-oro); }

.acceso-hero__accion { margin-top: var(--lbs-e3); width: 100%; }

/* Panel de acceso: ancho contenido para que no se lea como una sección
   entera, sino como un componente con función. */
.acceso-panel { max-width: 520px; margin-inline: auto; }

/* Marca de dato todavía no aprobado, dentro de una tarjeta. */
.acceso-pendiente-dato {
  margin-top: var(--lbs-e3);
  padding-top: var(--lbs-e3);
  border-top: 1px dashed var(--lbs-linea);
  color: var(--lbs-dato);
}

/* Los cuatro pasos usan ahora .lbs-proceso del sistema, no tarjetas. */

/* El botón cierra el panel: no es un campo más de la lista. */
.acceso-panel .lbs-form > .lbs-boton { margin-top: var(--lbs-e2); }