/* ==========================================================================
   Sección 7 — Banner "Más de 400 empresas" (PMST_ES, Figma 929:7535)
   Foto full-bleed (fade a blanco abajo) + card cyan: copy + logos + caja
   Early Bird (countdown + botón). Reutiliza .cta-banner__offer / countdown.
   ========================================================================== */

.trust {
  position: relative;
  isolation: isolate;
  padding-block: 80px;
}
.trust__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 42.48%, rgba(255, 255, 255, 0.89) 74.82%, #ffffff 100%),
    url("../../img/trust/bg.webp") center / cover no-repeat;
}

.trust__banner {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 40px;
  border-radius: 40px;
  overflow: hidden;
  background: linear-gradient(172.45deg, #9cd8e8 0%, #37b1d3 100%);
  color: #fff;
}

.trust__copy {
  flex-shrink: 0;
  width: 724px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.trust__title {
  font-size: var(--fs-h2); /* 48px */
  font-weight: var(--fw-light);
  line-height: var(--lh-h2);
  color: #fff;
}
.trust__text {
  font-size: var(--fs-p20); /* 20px */
  font-weight: var(--fw-regular);
  line-height: 1.2;
  color: #fff;
  padding-right: 48px;
}

/* fila de logos: marquee scorrevole (desktop + mobile) via carousel.js */
.trust__logos {
  position: relative;
  display: flex;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.trust__logos:hover .marquee__inner { animation-play-state: paused; }
.trust__logos .marquee__inner { display: flex; align-items: center; flex-shrink: 0; }
.trust__logo {
  width: 140px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 24px;
}

.trust__offer { flex: 1 1 0; min-width: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .trust__banner { flex-direction: column; align-items: stretch; }
  .trust__copy { width: auto; }
  .trust__text { padding-right: 0; }
}

@media (max-width: 720px) {
  /* stacca la card dai bordi laterali (mostra la foto ai lati) */
  .trust__banner { width: auto; margin-inline: 16px; padding: 28px; }
  .trust__logo { width: 100px; height: 54px; }
}