/* =======================
       BrandEGO - Unificado
       ======================= */

    /* ---------- Tipografías (Google Fonts) ---------- */
    :root{
      --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
      --font-heading: "Maven Pro", var(--font-sans);
    }
    body{ 
      font-family: var(--font-sans); 
      font-optical-sizing: auto;
    }
    h1,h2,h3,h4,h5,h6{ font-family: var(--font-heading); font-optical-sizing: auto; }

#mainHeader { isolation: isolate; }

    /* Sticky header */
    .sticky-header{
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 1000;
      transition: box-shadow .2s ease, border-color .2s ease;
      border-bottom: 1px solid rgba(15,23,42,.06);
      background: #fffefd;
    }
    .sticky-header.scrolled{
      box-shadow: 0 10px 25px rgba(15,23,42,.08);
      border-bottom-color: rgba(15,23,42,.10);
    }

    /* ---------- Marquee / slider logos ---------- */
    .brandego-carousel{ width: 100%; overflow: hidden; }
    .brandego-carousel-inner{ max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
    .brandego-marquee{
      display: flex;
      width: max-content;
      gap: 1.25rem;
      align-items: center;
      animation: brandego-marquee 80s linear infinite;
      will-change: transform;
      transform: translateZ(0);
    }
    .brandego-marquee-group{
      display: flex;
      gap: 1.25rem;
      align-items: center;
    }
    .brandego-marquee img{
      height: 10rem;
      width: auto;
      border-radius: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
      border: 0 !important;
    }
    
/* Mobile slider: transparente, sin sombra, más lento y con logos más grandes */
/* Aplicado automáticamente a sliders mobile con md:hidden */
@media (max-width: 767px) {
  .brandego-carousel .brandego-marquee {
    animation-duration: 100s; /* más lento en mobile */
  }

  .brandego-carousel .brandego-marquee img {
    height: clamp(6.5rem, 30vw, 9rem); /* más grande en mobile */
    width: auto;
    max-width: none;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
}

/* ---------- Floating button (WhatsApp) ---------- */
.floating-btn{
  position: fixed;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  box-shadow: 0 10px 20px rgba(0,0,0,.14);
  border: 1px solid rgba(0,0,0,.08);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,.08);
  touch-action: manipulation;
  transform: translateZ(0);
}

#whatsappFloatBtn{
  right: 24px;
  bottom: 24px;
  background: #1BBB86;
  color: #fff;

  /* 👇 oculto al cargar (como era el Go to top) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) translateZ(0);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

#whatsappFloatBtn.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) translateZ(0);
}

.floating-btn svg{ width: 24px; height: 24px; pointer-events: none; }

@media (max-width:640px){
  .floating-btn{ width: 52px; height: 52px; }
  #whatsappFloatBtn{ right: 20px; bottom: 20px; }
  .floating-btn svg{ width: 22px; height: 22px; }
}

/* ---------- Animación del marquee ---------- */
@keyframes brandego-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}