/* MOVILBRO hero-banner.css v20250924-44 */
/* ===== HERO BANNER (fino, altura por variables) ===== */
.hb{
  /* Ajusta aquí la altura del banner */
  --hb-h-desktop: 360px;   /* altura en escritorio (ej. 220–380) */
  --hb-h-mobile:  100px;   /* altura en móvil (ej. 130–200) */
  --hb-radius: 16px;
  --hb-arrow-size: 38px;
  margin:.7rem 0 1rem;
}

.hb__viewport{
  position:relative;
  overflow:hidden;
  border-radius:var(--hb-radius);
  box-shadow:0 10px 28px -14px rgba(0,0,0,.28);
  background:#eaf2fb;
}

.hb__track{
  display:flex;
  will-change:transform;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}

.hb__slide{
  flex:0 0 100%;
  height: var(--hb-h-desktop); /* altura exacta (más fino) */
  min-height: 0;
  position:relative;
}
.hb__slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Flechas */
.hb__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:var(--hb-arrow-size); height:var(--hb-arrow-size);
  border:0; border-radius:50%;
  background:rgba(255,255,255,.95); color:#0b4f9c;
  display:grid; place-items:center; font-size:22px; cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.18); z-index:2;
}
.hb__arrow--prev{ left:10px; }
.hb__arrow--next{ right:10px; }
.hb__arrow:hover{ filter:brightness(1.05); }

/* Puntos */
.hb__dots{
  display:flex; gap:8px; justify-content:center; padding:.5rem 0 0;
}
.hb__dots>button{
  width:8px; height:8px; border-radius:999px; border:0; background:#b7c7da; cursor:pointer;
}
.hb__dots>button[aria-current="true"]{ background:#0b4f9c; width:18px; }

@media (max-width:740px){
  .hb__slide{ height: var(--hb-h-mobile); }
  .hb__arrow{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .hb__track{ transition:none !important; }
}

/* Ajustes de espaciado de secciones adyacentes */
#tarifas.section{ padding-top: 1.6rem; }  /* antes 4.5rem */
.hero{ padding-bottom: 1.2rem; }          /* antes 4rem */
.hb{ margin-bottom: .4rem; }              /* si usas el banner */

/* Asegura que el <a> cubra toda la slide y sea clicable en toda la imagen */
.hb__link{
  display:block;
  width:100%;
  height:100%;
  line-height:0; /* evita gaps con imágenes inline */
  text-decoration:none;
}
.hb__link img{ display:block; width:100%; height:100%; object-fit:cover; }