/* ============================================
   MOBILE ENHANCEMENTS — només <=768px
   ============================================ */

/* CTA mòbil amagat al desktop per defecte */
.mob-cta{display:none !important}

@media(max-width:768px){

  /* ============ NAV MÒBIL UNIFICAT ============ */
  /* Amaga el botó Parlem/Hablemos gegant fora dels .nav-links */
  nav > div > a.btn-blue,
  nav > div.nav-cta{
    display:none !important;
  }
  /* Hamburger toggle sempre visible al mòbil */
  .nav-toggle{
    display:flex !important;
    flex-direction:column;
    gap:4px;
    cursor:pointer;
    padding:8px;
    background:transparent;
    border:none;
    margin-left:auto;
  }
  .nav-toggle span{
    width:18px;height:1.5px;background:#0c0c0f;
    transition:all 0.3s;display:block;
  }
  .nav-toggle.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

  /* Menú mòbil obert */
  .nav-links{display:none}
  .nav-links.mob-open{
    display:flex !important;
    position:fixed;
    top:68px;left:12px;right:12px;
    flex-direction:column;
    background:rgba(255,255,255,0.98);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(0,0,0,0.06);
    border-radius:16px;
    padding:18px;
    gap:10px;
    box-shadow:0 12px 40px rgba(0,0,0,0.12);
    z-index:9999;
    max-height:calc(100vh - 80px);
    overflow-y:auto;
  }
  .nav-links.mob-open a{
    font-size:15px !important;
    color:#1c1c22 !important;
    padding:10px 4px;
    border-bottom:1px solid rgba(0,0,0,0.04);
  }
  .nav-links.mob-open a:last-child{border-bottom:none}
  .nav-links.mob-open .nav-dropdown-menu{
    position:static;opacity:1;visibility:visible;
    transform:none;box-shadow:none;border:none;
    padding:6px 0 6px 14px;background:transparent;
    backdrop-filter:none;min-width:auto;
  }
  .nav-links.mob-open .nav-dropdown-menu a{
    font-size:14px !important;
    color:#52525b !important;
    border-bottom:none;
    padding:6px 4px;
  }
  .nav-links.mob-open .nav-arrow{display:none}

  /* CTA Parlem dins del menú mòbil (afegit per JS) */
  .nav-links.mob-open .mob-cta{
    display:inline-flex !important;
    align-items:center;justify-content:center;
    margin-top:8px;
    background:#4967E9;color:#fff !important;
    padding:12px 20px;border-radius:100px;
    font-weight:600;border-bottom:none !important;
  }

  /* ============ LOGOS MARQUEE ============ */
  /* Només afecta .logos-section (no pf-marquee) */
  /* Al mòbil: els tocs no fan res — el marquee no es pausa ni es perden logos */
  .logos-section .marquee,
  .logos-section .mq-track,
  .logos-section .mq-item,
  .logos-section .mq-item *{pointer-events:none !important;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .logos-section .marquee:hover .mq-track,
  .logos-section .marquee:active .mq-track,
  .logos-section .marquee:focus-within .mq-track{animation-play-state:running !important}
  /* Tots els logos sempre visibles al 100% — sense pulso central per evitar flickering */
  .logos-section .mq-item{position:relative}
  .logos-section .mq-item img{filter:none !important;opacity:1 !important}
  /* Al mòbil: gap més petit i fade més estret perquè no quedi tant buit
     (amb 56px de gap i 100px de fade a cada banda, els logos semblaven perduts) */
  .logos-section .mq-track{gap:24px !important;animation-duration:35s !important}
  .logos-section .marquee::before,
  .logos-section .marquee::after{width:32px !important}
  .logos-section .mq-item{min-width:90px;padding:0 4px}
  .logos-section .mq-item img{height:36px !important;max-width:130px !important}

  /* ============ SECTORS PILLS — PULSO LILA ROTATIU ============ */
  .sector-pill.pulse-lila{
    animation:sectorPulseLila 0.9s ease-in-out;
  }
  @keyframes sectorPulseLila{
    0%,100%{
      background:transparent;
      border-color:#e4e4e7;
      color:#52525b;
      box-shadow:none;
    }
    50%{
      background:rgba(139,92,246,0.1);
      border-color:#8B5CF6;
      color:#8B5CF6;
      box-shadow:0 0 0 4px rgba(139,92,246,0.12);
    }
  }

  /* ============ CARRUSELS MÒBIL (>4 cards) ============ */
  .svc-grid,
  .puntual-grid,
  .use-grid,
  .mob-carousel{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:14px !important;
    padding:12px 24px 24px !important;
    margin-left:-24px !important;
    margin-right:-24px !important;
    grid-template-columns:none !important;
    /* Permetre tant pan horitzontal (carrusel) com vertical (page scroll).
       Sense "pan-x" sol: iOS bloquejava scroll vertical de la p&agrave;gina
       quan el dit tocava un card gran que ocupava tota l'amplada. */
    touch-action:pan-x pan-y;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
  }
  /* Els cards en si no han de capturar cap gest — deixen passar tot al rail pare */
  .svc-card,
  .puntual-card,
  .use-card{touch-action:pan-x pan-y}
  .svc-grid::-webkit-scrollbar,
  .puntual-grid::-webkit-scrollbar,
  .use-grid::-webkit-scrollbar,
  .mob-carousel::-webkit-scrollbar{display:none}
  .svc-card,
  .puntual-card,
  .use-card,
  .mob-carousel > *{
    flex:0 0 82% !important;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    min-width:0;
  }
  /* Els pills de sectors a carrousel: mida més petita */
  .sectors-grid.mob-carousel > *{flex:0 0 auto !important;scroll-snap-align:start}
  .sectors-grid.mob-carousel{gap:8px !important}
  /* Indicador "lliscar" */
  .mob-scroll-hint{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:12px;
    font-size:11px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#8a8a96;
    animation:hintNudge 2s ease-in-out infinite;
  }
  .mob-scroll-hint svg{width:16px;height:16px;stroke:#4967E9;fill:none;stroke-width:2}
  @keyframes hintNudge{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(6px)}
  }

  /* ============ MARQUEE INVERS (pf-marquee) ============ */
  .pf-marquee-reverse{margin-top:12px}
  .pf-marquee-reverse .mq-track{
    animation-direction:reverse !important;
    animation-duration:70s !important;
  }

}

/* Només al desktop: amagar hint, reverse marquee i hamburger */
@media(min-width:769px){
  .mob-scroll-hint{display:none}
  .pf-marquee-reverse{display:none}
  .nav-toggle{display:none !important}
}