/* ====== Topbar + Header (juntos) ====== */
:root{
  /* Alturas */
  --topbar-h: 56px;            /* subí un poco para respirar con logos más grandes */
  --header-h: 64px;

  /* Tamaños de logos en topbar */
  --tb-logo-h:    34px;        /* base (móvil/tablet) */
  --tb-logo-h-lg: 38px;        /* ≥ 992px */
  --tb-logo-h-xl: 50px;        /* ≥ 1400px */

  /* Colores */
  --topbar-bg: #fff;
  --topbar-fg: #334155;
  --topbar-accent: #155db9;
  --topbar-border: #e6eef8;
}

/* Barra superior */
.topbar{
  background: var(--topbar-bg);
  color: var(--topbar-fg);
  border-bottom: 1px solid var(--topbar-border);
  font-size: .95rem;
}
.topbar-inner{
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Izquierda */
.tb-left{ display:flex; align-items:center; gap:.5rem; white-space:nowrap; }
.tb-left i{ color: var(--topbar-accent); }

/* Centro: logos */
.tb-logos{
  display:flex; align-items:center; gap:18px;
  flex:1 1 auto; justify-content:center;
  overflow:auto; scrollbar-width:none;
}
.tb-logos::-webkit-scrollbar{ display:none; }

.tb-logos a{ display:flex; align-items:center; }
.tb-logos img{
  height: var(--tb-logo-h);
  width: auto;
  display: block;
  max-height: none;          /* evita limitaciones de resets */
  object-fit: contain;
}

/* Derecha: redes */
.tb-right{ display:flex; align-items:center; gap:10px; }
.tb-social{ list-style:none; display:flex; gap:10px; padding:0; margin:0; }
.tb-social a{
  width:34px; height:34px; border-radius:999px; display:grid; place-items:center;
  color:#0f172a; border:1.5px solid #cbd5e1; text-decoration:none;
  transition: transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.tb-social a:hover{
  transform: translateY(-1px);
  color:#063b5b; border-color: var(--topbar-accent); background: rgba(21,93,185,.08);
}

/* Responsive */
@media (max-width: 992px){
  .tb-left span{ display:none; }    /* deja solo el ícono de ubicación */
  .tb-logos img{ height: var(--tb-logo-h); }   /* mantiene tamaño base */
}
@media (min-width: 992px){
  .tb-logos img{ height: var(--tb-logo-h-lg); }
}
@media (min-width: 1400px){
  .tb-logos img{ height: var(--tb-logo-h-xl); }
}
@media (max-width: 576px){
  .tb-logos{ justify-content: flex-start; }
  .tb-right{ gap:6px; }
  .tb-social a{ width:32px; height:32px; }
}

/* ====== Wrapper del header: topbar + navbar se mueven juntos ====== */
.site-header{
  background:#fff;
  z-index:1060;
  /* sombra sutil sin que parezca hueco */
  box-shadow: 0 1px 4px rgba(2,6,23,.06);
}
.site-header--sticky{
  position: sticky;
  top: 0;                /* el bloque completo se pega al llegar arriba */
}

/* La navbar interna NO debe ser fixed/sticky por su cuenta */
.navbar{ position: static !important; }

/* ====== Quita el “hueco” arriba del carrusel ====== */
#contenido{ display: flow-root; }                 /* evita colapso de márgenes */
#contenido > *:first-child{ margin-top: 0 !important; }
.carousel-hero{ margin-top: 0 !important; }

.site-header, .topbar, .navbar{ margin-bottom: 0 !important; }
/* mantenemos el borde inferior (no lo anulamos) y sin sombras extra en topbar/nav */
.topbar, .navbar{ box-shadow: none; }

/* Nada de padding-top heredado */
main{ padding-top: 0 !important; }