:root{
  --fa-topbar-bg:   #9E1B1B;
  --fa-topbar-text: #F3F3F3;
  --fa-topbar-h:    0px!important; /* fallback; JS lo actualiza */
}

/* Barra fija pegada arriba */
.fa-topbar{
  position: fixed;
  top: 0;
  left: 0; right: 0;
  width: 100%;
  z-index: 10010; /* por encima del header sticky */
  background: var(--fa-topbar-bg);
  color: var(--fa-topbar-text);
  box-shadow: 0 1px 0 rgba(0,0,0,.1);
  line-height: 1;
}

body.admin-bar .fa-topbar { top: 32px; }
@media (max-width:782px){
  body.admin-bar .fa-topbar { top: 46px; }
}

/* Contenido interno */
.fa-topbar__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px;
  min-height: 34px;
  display: flex; align-items: center; justify-content: center;
}
.fa-topbar__msg{
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em;
  transition: opacity .25s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width:480px){
  .fa-topbar__inner{ padding: 6px 10px; }
  .fa-topbar__msg{ font-size: 11px; letter-spacing: .05em; }
}

/* ====== Offset del header sticky (Astra / Elementor) ====== */
/* === CORRECCIÓN FINAL: HEADER PEGADO JUSTO DEBAJO DE LA TOPBAR === */
body.home.fa-topbar-active .site-header,
body.home.fa-topbar-active .main-header-bar,
body.home.fa-topbar-active .ast-primary-header-bar {
  position: relative;
  top: var(--fa-topbar-h) !important;
  z-index: 10000;
}


/* Altura estable desde el primer paint (fallback 40px) */
:root{
  --fa-topbar-h: 0px!important; /* puedes dejarla en 36–44 según tu barra */
}

/* Spacer SIEMPRE con altura (aunque el JS aún no haya corrido) */
#fa-topbar-spacer{
  display:block;
  height: var(--fa-topbar-h);
}

/* Empuja el header por flujo (más fiable que top) */
body.home #masthead,
body.home .site-header{
  margin-top: var(--fa-topbar-h) !important;
}

/* Cuando Astra activa sticky, mantenlo justo debajo */
body.home .main-header-bar.ast-sticky-active,
body.home .ast-primary-header-bar.ast-sticky-active{
  top: var(--fa-topbar-h) !important;  /* para el estado sticky/fixed */
}

/* Si usas sticky de Elementor en el header */
body.home .elementor-sticky--active{
  top: var(--fa-topbar-h) !important;
}
/* NOTA: no se toca padding del body; el "spacer" maneja el flujo normal */