/* ================================
   Ajustes generales del Home Slider
   ================================ */

/* Ajustar todas las imágenes del slider al ancho del contenedor */
.an_homeslider img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover;   /* mantiene proporción y rellena el espacio */
  display: block;
  margin: 0 auto;
}

/* Evitar scroll horizontal dentro del slider */
.an_homeslider {
  overflow: hidden;
  max-width: 100%;
}

/* Evitar scroll horizontal en toda la web */
body {
  overflow-x: hidden;
}

/* ================================
   Ajustes por dispositivo
   ================================ */

/* Escritorio (pantallas grandes) */
@media (min-width: 992px) {
  .an_homeslider img {
    height: 600px;       /* altura fija recomendada para desktop */
    object-position: center; /* centra la parte importante */
  }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 991px) {
  .an_homeslider img {
    height: 400px;
    object-position: center;
  }
}

/* Móviles */
@media (max-width: 767px) {
  .an_homeslider img {
    height: 200px;
    object-position: left;
  }
}

@media (max-width: 767px) {
  .logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    top: 0 !important;
  }
}

/* ===== Ajusta SOLO el comportamiento cuando el header está sticky ===== */

/* Alturas que puedes tocar si lo ves muy alto o bajo */
:root{
  --sticky-header-h: 68px;  /* altura total del header fijo */
  --sticky-logo-h:   44px;  /* altura máxima del logo en sticky */
}

/* Compacidad del logo cuando el header se fija */
#header.fixed .logo img,
#header.fixed .logo svg,
.header-sticky #header .logo img,
.header-sticky #header .logo svg,
.sticky #header .logo img,
.sticky #header .logo svg{
  max-height: var(--sticky-logo-h) !important;
  height: auto; width: auto;
}

/* Mantener el menú visible y NO pegado al logo en sticky.
   Incluyo varios selectores típicos de temas (header-nav / main-menu / header-bottom / menu) */
#header.fixed .header-nav,
#header.fixed .main-menu,
#header.fixed .header-bottom,
#header.fixed .menu,
.header-sticky #header .header-nav,
.header-sticky #header .main-menu,
.header-sticky #header .header-bottom,
.header-sticky #header .menu,
.sticky #header .header-nav,
.sticky #header .main-menu,
.sticky #header .header-bottom,
.sticky #header .menu{
  position: fixed !important;
  left: 0; right: 0;
  top: var(--sticky-logo-h) !important; /* coloca el menú justo debajo del logo */
  z-index: 999 !important;
  background: #fff;
  display: flex; align-items: center; justify-content: center; height: 44px;
}

/* El contenedor del header sticky: altura estable y por encima del contenido */
#header.fixed,
.header-sticky #header,
.sticky #header{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000; background: #fff;
  height: var(--sticky-header-h) !important;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* Empujar el contenido para que NO quede debajo del sticky */
#header.fixed + #wrapper,
.header-sticky #header + #wrapper,
.sticky #header + #wrapper,
#header.fixed + main,
.header-sticky #header + main,
.sticky #header + main{
  margin-top: var(--sticky-header-h) !important;
}

/* Por si hiciera falta, el logo un “poco” por encima del menú */
#header .logo{ position: relative; z-index: 1001; }

.top-menu .sub-menu,
#top-menu .sub-menu,
.menu-container ul li ul {
    background-color: #FFFFFF !important;
}

/* Submenú blanco y sin sombra */
#header #top-menu .sub-menu,
#header .top-menu .sub-menu,
#header .top-menu .dropdown-menu {
  background:#FFFFFF !important;
  box-shadow:none !important;
  border:none !important;
}

/* Texto del submenú (verde oliva) */
#header #top-menu .sub-menu a,
#header .top-menu .sub-menu a,
#header .top-menu .dropdown-menu a {
  color:#496B3E !important;
}

/* Hover suave (beige clarito) */
#header #top-menu .sub-menu a:hover,
#header .top-menu .sub-menu a:hover,
#header .top-menu .dropdown-menu a:hover {
  background:#F5F2EA !important;
  color:#3F5E38 !important;
}