/* ==========================================================
   ALET V7.32 — RESPONSIVO HERO + CARRUSELES INTERACTIVOS
   ========================================================== */

/* ---------- CLIENTES: más rápidos y controlables ---------- */
#clientes .clients-v6-track{
  animation:none !important;
  transform:translate3d(0,0,0);
  will-change:transform;
}

#clientes .clients-v6-carousel{
  position:relative !important;
}

.clients-v632-arrow{
  position:absolute !important;
  top:50% !important;
  z-index:8 !important;
  width:34px !important;
  height:34px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid rgba(11,36,66,.16) !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.90) !important;
  color:#0b2442 !important;
  font:600 27px/30px Arial,sans-serif !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 4px 12px rgba(8,31,61,.10) !important;
  cursor:pointer !important;
  transform:translateY(-50%) !important;
  opacity:.72 !important;
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.clients-v632-arrow:hover,
.clients-v632-arrow:focus-visible{
  opacity:1 !important;
  box-shadow:0 6px 18px rgba(8,31,61,.16) !important;
}
.clients-v632-prev{left:10px !important}
.clients-v632-next{right:10px !important}

/* ---------- MÓVIL: elimina el gran bloque blanco del hero ---------- */
@media (max-width:900px){
  #inicio.hero-v65{
    position:relative !important;
    min-height:0 !important;
    height:auto !important;
    padding:300px 18px 28px !important;
    align-items:initial !important;
    display:block !important;
    overflow:hidden !important;
    background:#f7f9fc !important;
  }

  /* Fotografía en una franja superior real, visible y sin hueco */
  #inicio.hero-v65::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    z-index:0 !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:330px !important;
    pointer-events:none !important;
    background:
      linear-gradient(180deg,
        rgba(247,249,252,0) 0%,
        rgba(247,249,252,.02) 58%,
        rgba(247,249,252,.56) 80%,
        #f7f9fc 100%),
      url("images/hero_guardia_blanco_clean_v67.jpg") 65% 20% / cover no-repeat !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
    opacity:1 !important;
    animation:none !important;
  }

  #inicio.hero-v65 .hero-v65-overlay{
    display:none !important;
  }

  #inicio.hero-v65::before{
    display:none !important;
  }

  #inicio.hero-v65 .hero-v65-content{
    position:relative !important;
    z-index:2 !important;
    padding:0 !important;
    margin:0 !important;
  }

  #inicio.hero-v65 .hero-v65-copy{
    width:100% !important;
    max-width:none !important;
  }

  #inicio.hero-v65 .hero-v65-stats{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    margin:20px 0 0 !important;
    transform:none !important;
  }

  #inicio.hero-v65 .hero-v65-wave{
    display:none !important;
  }

  /* Flechas más discretas en teléfono */
  .clients-v632-arrow{
    width:30px !important;
    height:30px !important;
    font-size:24px !important;
    line-height:26px !important;
    background:rgba(255,255,255,.94) !important;
  }
  .clients-v632-prev{left:5px !important}
  .clients-v632-next{right:5px !important}
}

@media (max-width:560px){
  #inicio.hero-v65{
    padding-top:270px !important;
  }
  #inicio.hero-v65::after{
    height:300px !important;
    background-position:67% 18% !important;
  }
}

/* Si el dispositivo es muy angosto, que el hero siga compacto */
@media (max-width:390px){
  #inicio.hero-v65{
    padding-top:245px !important;
  }
  #inicio.hero-v65::after{
    height:275px !important;
  }
}