/* ============================================================
   OsData Custom Overrides
   Cargado después de osdata-website.webflow.css
   ============================================================ */

/* ── WhatsApp FAB (forced — evita problemas de caché y GSAP wrappers) ─────── */
.whatsapp-fab {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 9999 !important;
  width: 56px !important;
  height: 56px !important;
  background: #25D366 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.25) !important;
  text-decoration: none !important;
}
.whatsapp-fab:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.35) !important;
}
.whatsapp-fab svg {
  width: 30px !important;
  height: 30px !important;
  fill: #fff !important;
}

/* ── Hamburger: rotación suave al abrir/cerrar ───────────────────────────── */
.w-icon-nav-menu {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  transform-origin: center center;
}
.w-nav-button.w--open .w-icon-nav-menu {
  transform: rotate(90deg);
}

/* ── Carrusel de logos: bucle infinito ────────────────────────────────────── */
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-track {
  width: max-content !important;
  flex-wrap: nowrap !important;
  animation: marquee-scroll 25s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-wrapper {
  overflow: hidden;
}

/* ── Mobile: navbar más compacta ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .navbar,
  .navbar.white,
  .navbar.dark,
  .navbar.back {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* ── Mobile: hero más compacto + clearance del navbar fixed ─────────────── */
@media screen and (max-width: 991px) {
  /* El navbar pasa a position:fixed en ≤991px → empujar sección hero hacia abajo */
  .header._1 {
    padding-top: 72px !important;
  }
}

@media screen and (max-width: 767px) {
  .container.flex-center.header-cont {
    padding-top: 16px !important;
    grid-row-gap: 12px !important;
  }

  .header-image {
    max-height: 160px !important;
    object-fit: cover !important;
    object-position: center top !important;
    width: 100% !important;
  }
}

/* ── Mobile: CTA popup ajustado al viewport ──────────────────────────────── */
@media screen and (max-width: 767px) {
  .cta-popup {
    width: calc(100vw - 32px) !important;
    left: 16px !important;
    right: 16px !important;
    top: 50% !important;
    bottom: auto !important;
    inset: auto !important;
    transform: translateY(-50%) !important;
    height: auto !important;
  }

  .popup-wrapper {
    padding: 16px !important;
    gap: 12px !important;
  }
}

/* ── Mobile: H1 home más pequeño ─────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .heading-1.home-1 {
    --_headings---heading-1: 1.875rem !important;
  }
}

@media screen and (max-width: 479px) {
  .heading-1.home-1 {
    --_headings---heading-1: 1.625rem !important;
  }
}

/* ── Mobile: ancho completo para contenedores que Webflow deja en 50% ────── */
@media screen and (max-width: 991px) {
  .para-wrapper {
    width: 100% !important;
    min-width: 100% !important;
  }

  .wid-50 {
    width: 100% !important;
  }
}

/* ── Mobile: alineación centrada para textos header ─────────────────────── */
@media screen and (max-width: 767px) {
  .heading-1.center,
  .heading-1.center.wid-50,
  .heading-1.center.wid-50.home-1,
  .heading-1.center.wid-50.reveal-word.home-1 {
    text-align: center !important;
    width: 100%;
  }

  .text-regular.center,
  .text-regular.center.white,
  .text-regular.center.white.header-text,
  .text-regular.center.white.header-text.home {
    text-align: center !important;
  }

  /* CTA text en secciones centradas */
  .text-regular.wid-50.cta-text {
    text-align: center !important;
  }
}

/* ── Core Web Vitals — CLS fix ───────────────────────────────────────────── */
/* Reserva espacio para imágenes hero de blog antes de cargar (evita layout shift) */
.blog-main-imag {
  aspect-ratio: 4/3;
  width: 100%;
  height: auto;
  display: block;
}

/* Reserva espacio mínimo para ShareThis widget (evita reflow al inyectar botones) */
.sharethis-inline-share-buttons {
  min-height: 32px;
}