/* ==== Banner adaptable (home y secciones) ==== */

/* Punto focal por defecto (vertical) */
:root{
  --hero-focal-y: 35%; /* ajusta entre 25–55% según lo que quieras centrar */
}

/* Base: hero con imagen de portada del home */
.hero{
  position: relative;
  width: 100%;
  background: url('../images/hero/banner-completo-1600x400.png') center var(--hero-focal-y) / cover no-repeat;
  aspect-ratio: 16 / 5;   /* proporción horizontal */
  min-height: 240px;      /* un poco más alto en móviles */
  max-height: 420px;      /* evita crecer demasiado en desktop */
}

/* Caja de herramientas: usa su propio banner y punto focal propio */
.hero.hero-caja{
  background-image: url('../images/banners/caja/banner-caja.png');
  background-position: center 60%;  /* muestra más la parte baja */
  background-size: cover;
}

/* === Ajustes responsive === */
@media (max-width: 768px){
  .hero{
    background-position: center var(--hero-focal-y);
    aspect-ratio: 16 / 9;   /* un poco más alto para móviles */
    min-height: 200px;
  }
}

@media (max-width: 480px){
  .hero{
    background-size: cover;       /* recorte elegante */
    aspect-ratio: 16 / 9;         /* altura media para móvil */
    min-height: 220px;            /* más presencia visual */
  }
}

/* aseguramos que la barra de menú del hero quede por encima si la usas */
.menu-hero.menu-bar{ z-index: 2; }