/* === NAVBAR GENERAL === */
.navbar-custom {
  background-color: #004080;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* === Variables (unificadas) === */
:root{
  --navbar-h: 56px;     /* altura real del navbar */
  --logo-w: 170px;      /* ← cambiá este ancho para agrandar/achicar el logo */
}

/* === LOGO FLOTANTE (no empuja layout) === */
.logo-fijo-superior{
  position: fixed;
  top: 8px;                           /* mismo nivel que el texto del navbar */
  left: 16px;
  width: var(--logo-w);
  z-index: 6000;
  display: block;
  pointer-events: auto;               /* clickeable */
}
.logo-fijo-superior img{
  width: 100% !important;             /* ignora height inline */
  height: auto !important;
}

/* La columna que envuelve el logo no ocupa espacio */
.logo-col{
  flex: 0 0 0 !important;
  width: 0 !important;
  padding: 0 !important;
}

/* El navbar no recorta el logo */
.navbar-custom,
.navbar-custom .container-fluid{
  overflow: visible !important;
}

/* === BUSCADOR === */
.buscador-form { max-width: 100%; min-width: 280px; }
.buscador-form .form-select,
.buscador-form .form-control { font-size: 0.9rem; padding: 0.35rem 0.6rem; }

/* === INFO EMPRESA === */
.info-empresa {
  font-size: 0.85rem;
  white-space: nowrap;
  text-align: center;
  margin-left: 0;   /* base */
}

/* En desktop: la info nunca queda debajo del logo */
@media (min-width: 992px) {
  .info-empresa{
    text-align: left;
    padding-left: calc(var(--logo-w) + 16px) !important; /* corre a la derecha del logo */
    margin-left: 0 !important;                            /* anulamos el viejo 150px */
  }
}

/* === CONTACTOS Y BOTÓN === */
.contactos-navbar { display:flex; gap:2rem; font-size:0.85rem; align-items:flex-start; flex-wrap:nowrap; }
.contacto-item { display:flex; flex-direction:column; font-size:0.85rem; gap:0.2rem; }
.fila-contacto { display:flex; align-items:center; gap:0.4rem; }
.fila-contacto i { width:1.2rem; text-align:center; }

/* MOBILE */
@media (max-width: 768px) {
  .logo-fijo-superior { display:none; }
  .navbar-custom .container-fluid .row { flex-direction: column; gap: 1rem; }
  .buscador-form { flex-direction: column !important; }
  .info-empresa { text-align: center !important; margin-left: 0 !important; white-space: normal; }
  .contactos-navbar { display:flex !important; flex-direction:row !important; justify-content:center; gap:2rem; flex-wrap:wrap; margin-top:10px; }
  .contacto-item { text-align:center; align-items:center; display:flex; flex-direction:column; }
  .fila-contacto { justify-content:center; display:flex; align-items:center; gap:0.4rem; }
  .btn-descargar-catalogo { margin-top:8px; margin-bottom:4px; }
}

/* ====== SLIDER DE SUBCATEGORÍAS ====== */

/* Barra/contendor del slider de subcategorías debajo del navbar */
.subcats-strip{
  position: sticky;
  top: var(--navbar-h);
  z-index: 1020;
  padding: .5rem 0;
  background: #004080;
  color: #fff;
}

/* En desktop ya NO dejamos aire adicional (el logo está a nivel del navbar) */
@media (min-width: 992px){
  .subcats-strip{ padding-left: 0; }
}
@media (max-width: 991.98px){
  .subcats-strip{ padding-left: 0; top: var(--navbar-h); }
}

/* Ocultar completamente cualquier menú lateral de subcategorías (si existiera) */
.sidebar-subcategorias,
.subcats-aside,
.menu-lateral-subcategorias,
#menuLateralSubcategorias,
#subcategoriasSidebar,
#sidebar-subcategorias,
#sidebarSubcategorias,
.subcategorias-sidebar,
.sidebar-subcategorias,
.subcategorias-lateral,
.menu-lateral-subcategorias,
.subcats-sidebar,
.subcats-aside,
.aside-subcategorias,
.panel-subcategorias,
[data-subcategorias],
[data-side="subcategorias"],
[data-widget="subcategorias-lateral"]{
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Pastillas de subcategorías (chips) */
.subcat-chip{
  display:inline-block;
  padding:.44rem .9rem;
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .15s ease;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  color:#fff !important;
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  pointer-events:auto;
  position:relative;
  z-index:1;
}
.subcat-chip:hover{ background:rgba(255,255,255,.12); transform:translateY(-1px); }
.subcat-chip.active, .subcat-chip:focus{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.45);
  color:#fff !important;
  outline:none;
}

/* Marquee CSS-only (movimiento lento y constante) */
.subcats-marquee{ overflow:hidden; position:relative; }
.marquee-track{
  display:flex;
  gap:12px;
  padding:8px 44px;
  width:max-content;
  animation: subcats-marquee 90s linear infinite;   /* más grande = más lento */
}
.subcats-strip:hover .marquee-track{ animation-play-state: paused; }

/* animación continua (duplicamos la tira → -50% hace el bucle) */
@keyframes subcats-marquee{
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* móvil: pequeñas mejoras y velocidad un poco mayor */
@media (max-width: 991.98px){
  .marquee-track{ gap:10px; padding:6px 16px; animation-duration: 70s; }
}

/* Swiper (si existiera en otros templates; no afecta al marquee) */
.subcats-swiper .swiper-wrapper { align-items: center; }
.subcats-swiper .swiper-slide { width: auto; }

/* Flechas del slider (si existieran en otra pantalla) */
.subcats-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px; height:34px;
  display:grid; place-items:center;
  cursor:pointer;
  z-index:3;
  background:#004080;
  border:1px solid rgba(255,255,255,.25);
}
.subcats-prev{ left:.25rem; }
.subcats-next{ right:.25rem; }
.subcats-nav:hover{ background:#003669; }
.subcats-nav i{ color:#fff; font-size:1rem; line-height:1; }

/* Fix de click para el slider */
.subcats-strip{ z-index:5001; }
.subcats-marquee, .marquee-track, .subcat-chip{ pointer-events:auto !important; }
.subcats-strip::before, .subcats-strip::after{ pointer-events:none !important; }
[data-overlay], .navbar-overlay{ pointer-events:none !important; }

.click-maps{
  display: inline-flex;        /* hace clickeable todo el contenido (icono + texto) */
  align-items: center;
  gap: .25rem;
  position: relative;
  z-index: 5;                  /* evita que algún overlay tape la parte izquierda */
  pointer-events: auto;
}