/* //cambio (2026-10-01): estilos del BANNER FAL de la home (markup en index.php, debajo del video).
   CSS plano, sin build. Se encola en TODO el sitio (functions.php, gst_enqueue_banner_fal) y no
   solo en la home: el sitio navega por SPA (Highway) y si la home se abre desde otra pagina, un
   CSS encolado solo para la home no llegaria. Pesa poco y todas las clases van con prefijo.
   Figma FAL copia: desktop 5799:614 (canvas 1920), mobile 5800:915 (canvas 540).
   //cambio (2026-10-01): todas las medidas en px y no en rem: en este sitio el rem NO vale 16px
   (app.css fija el font-size de <html> segun el ancho de pantalla, 23px a 1920 y ~18px a 390),
   asi que un minimo en rem salia mas grande que el diseño en mobile. Valores anteriores: los
   mismos numeros en rem (1rem = 16px). */

.banner-fal {
  margin-top: clamp(80px, 7.29vw, 140px); /* 100 del Figma + lo que asoma la cabeza sobre la card */
}
.banner-fal__card {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1204px;
  min-height: 282px;
  margin-inline: auto;
  /* 39 arriba y no 48: el Figma mide desde el tope de las mayusculas (texto sin interlineado) y
     el renglon CSS suma ~9px de aire arriba de la primera linea del titulo */
  padding: 39px 115px 48px;
  border-radius: 24px;
  /* misma textura que "¿Cómo funciona el FAL?" (imageRef d0952902 del Figma, reproducida en CSS) */
  background: #003da0 radial-gradient(125% 130% at 24% 4%,
      #0064f8 0%, #0153db 15%, #0233b8 32%, #001ea2 50%, #001179 72%, #000a3d 89%, #000116 100%);
  color: #fff;
}
.banner-fal__texto { position: relative; z-index: 1; max-width: 534px; }
.banner-fal picture { display: contents; }
/* separaciones compensadas por el interlineado (Figma: 24 entre titulo y bajada, 40 hasta el
   boton, medidos entre glifos) y titulo en caja de 496 para que corte "y cómo / impacta…" */
.banner-fal__titulo {
  max-width: 496px;
  margin: 0 0 6px;
  font-family: "Cocogoose Pro", sans-serif;
  font-weight: 300;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #fff;
}
.banner-fal__bajada {
  margin: 0 0 32px;
  font-family: "Noto Sans", sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  color: #fff;
}
.banner-fal__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 4px 24px;
  border: 1.5px solid #fff;
  border-radius: 100px;
  font-family: "Cocogoose Pro", sans-serif;
  font-weight: 350;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease-out, background-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
.banner-fal__btn:hover { transform: scale(1.03); background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.35); }
.banner-fal__btn:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5); }
.banner-fal__btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: #003aac;
}
.banner-fal__btn-ico svg { transition: transform 0.25s ease-out; }
.banner-fal__btn:hover .banner-fal__btn-ico svg { transform: rotate(45deg); }
/* la foto apoya en el borde inferior de la card y la cabeza sobresale por arriba (Figma: 417 de
   ancho, alineada con el padding derecho de 115) */
.banner-fal__img {
  position: absolute;
  right: 115px;
  bottom: 0;
  width: 417px;
  max-width: 40%;
  height: auto;
  pointer-events: none;
}

/* notebooks: menos padding lateral para que el texto no choque con la foto */
@media (max-width: 1199.98px) {
  .banner-fal__card { padding-inline: 64px; }
  .banner-fal__img { right: 48px; }
  .banner-fal__texto { max-width: 52%; }
}

/* mobile (Figma 5800:915, canvas 540): la foto pasa abajo, apoyada en el borde inferior y
   alineada a la derecha; la card lleva radio 12 y sombra. Mismo corte que el resto de la home
   (.is-only-mobile cambia a 1000px). */
@media (max-width: 1000px) {
  .banner-fal { margin-top: 60px; }
  .banner-fal__card {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 5.74vw 4.44vw 0;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  .banner-fal__texto { max-width: none; }
  .banner-fal__titulo { max-width: none; margin-bottom: 1.11vw; font-size: clamp(22px, 5.93vw, 32px); }
  .banner-fal__bajada { margin-bottom: 5.93vw; font-size: clamp(15px, 3.7vw, 20px); }
  .banner-fal__img {
    position: static;
    display: block;
    width: 66.3%;
    max-width: 420px;
    margin: -2vw 0 0 auto;
  }
}