/* ============================================================================
   VISION ENGLISH — HERO DEL HOME (fondo FloatingLines + ajustes)
   Las líneas van detrás del contenido; el texto en una tarjeta glassmorphism;
   la imagen de Londres se acomoda SOLA: se redimensiona con el espacio, nunca
   tapa el texto, y cuando ya no cabe al lado se va abajo — siempre con la misma
   separación. Todo con flex-wrap, sin breakpoints rígidos.
   ========================================================================= */

/* ── Capa de las líneas animadas, detrás de todo el contenido ───────────── */
.hero-fl-capa {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  opacity: .85;
}

/* ── Layout fluido: texto e imagen se reparten; se apilan solos si no caben ── */
#home .hero-card {
  display: flex;
  flex-wrap: wrap;              /* si no caben lado a lado, la imagen baja sola */
  align-items: center;
  gap: 18px;                    /* MISMA separación siempre (lado a lado o apilado) */
}

body:not(.dark) #home .hero-card {
  background:
    linear-gradient(132deg,
      rgba(82, 58, 184, .94) 0%,
      rgba(139, 63, 191, .9) 48%,
      rgba(224, 75, 157, .84) 100%),
    var(--surface-strong);
  border: 1px solid rgba(255, 255, 255, .54);
  box-shadow:
    0 24px 54px rgba(91, 64, 168, .24),
    inset 0 1px 0 rgba(255, 255, 255, .38);
}

body:not(.dark) #home .hero-card .hero-fl-capa {
  opacity: .68;
}

/* El contenido por encima de las líneas. */
#home .hero-card > .hero-copy,
#home .hero-card > .hero-image {
  position: relative;
  z-index: 1;
}

/* ── TARJETA GLASSMORPHISM para el texto de bienvenida ──────────────────── */
#home .hero-card > .hero-copy {
  flex: 1 1 360px;             /* crece; su mínimo cómodo es 360px */
  min-width: 0;               /* permite encoger sin romper */
  max-width: 100%;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 22px;
  padding: 24px 28px;
  box-shadow: 0 12px 40px rgba(20, 8, 45, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
}

body:not(.dark) #home .hero-card > .hero-copy {
  background:
    linear-gradient(145deg, rgba(42, 24, 91, .38), rgba(255, 255, 255, .1));
  border-color: rgba(255, 255, 255, .42);
  box-shadow:
    0 16px 44px rgba(39, 20, 82, .28),
    inset 1px 1px 0 rgba(255, 255, 255, .36),
    inset -1px -1px 0 rgba(43, 24, 82, .16);
  backdrop-filter: blur(22px) saturate(1.45);
  -webkit-backdrop-filter: blur(22px) saturate(1.45);
}
#home .hero-card .hero-copy h1,
#home .hero-card .hero-copy > p {
  text-shadow: 0 1px 8px rgba(20, 8, 45, .45);
}

/* ── IMAGEN DE LONDRES: tamaño normal que se ajusta al espacio ──────────── */
#home .hero-card > .hero-image {
  flex: 1 1 340px;            /* se estira/encoge con el espacio disponible */
  right: auto; top: auto; bottom: auto;
  transform: none;
  width: auto;
  min-width: 220px;
  max-width: 580px;
  height: auto;
  max-height: 300px;
  object-fit: cover;
  margin: 0;
  box-shadow: 0 14px 44px rgba(45, 20, 94, .4);
}
body.dark #home .hero-card > .hero-image { opacity: 1; }

/* ── Solo desktop ancho: texto más compacto, Londres un poco más grande ──── */
@media (min-width: 1200px) {
  #home .hero-card > .hero-copy {
    flex: 0 1 auto;
    max-width: 500px;      /* el texto ya no se estira a lo largo */
  }
  #home .hero-card > .hero-image {
    flex: 1 1 auto;
    width: min(47vw, 700px);
    max-width: 700px;
    max-height: 330px;
    margin-left: auto;     /* toma el espacio que dejó el texto, a la derecha */
  }
}