.weilo-promo-bar {
  background: #000;
  color: #fff;
  overflow: hidden;
  font-family: var(--weilo-font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 13px;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-transform: uppercase;
}
/* Show only the top variant on desktop, only the after-hero variant on mobile. */
.weilo-promo-bar--after-hero { display: none; }
@media (max-width: 768px) {
  .weilo-promo-bar--top        { display: none; }
  .weilo-promo-bar--after-hero { display: block; }
}

/* Site-wide background — cream brand color extends to the page wrapper */
.site-content { background-color: #FAF6EE; }

/* ============================================================
   Primary CTA — reusable, sourced from Figma node 1:572 "CTA Principal"
   Default: dark bg + cream text. Hover: yellow bg + dark text.
   ============================================================ */
.weilo-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 36px;
  border-radius: 100px;
  background: #13120F;
  color: #F9F6ED;
  font-family: "Google Sans Flex", "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22.5px;
  text-decoration: none !important;
  cursor: pointer;
  border: 0;
  transition: background-color 200ms ease, color 200ms ease, transform 120ms ease;
  white-space: nowrap;
}
.weilo-cta-primary:hover,
.weilo-cta-primary:focus-visible {
  background: #EDFF5A;
  color: #13120F !important;
  transform: none;
  filter: none;
}
.weilo-cta-primary:focus-visible {
  outline: 2px solid #13120F;
  outline-offset: 4px;
}

/* ============================================================
   Astra header global tweaks (loaded site-wide via promo-bar.css)
   ============================================================ */

/* 1) Tighten the primary menu in the 1150–1314px range so the 3 items
      ("Nuestros acompañantes / Cómo funciona / Sobre nosotros") fit on a
      single row instead of wrapping to two. Aligned with Astra's
      mobile-header-breakpoint (1150). */
@media (min-width: 1150px) and (max-width: 1320px) {
  .main-header-menu > li > .menu-link {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 14px !important;
    letter-spacing: -0.01em;
  }
}

/* 1c) On the landing page only — hide menu-1 (the left primary nav).
       The home now uses internal anchors (#planes, #como-funciona) and
       the header CTA, so the global nav links are redundant there.
       Other pages keep menu-1 visible. Targets both the desktop builder
       wrap and the mobile-popup version. */
.home .ast-builder-menu-1,
.home [data-section="section-hb-menu-1"],
.home #ast-hf-menu-1 {
  display: none !important;
}

/* 1b) Header glass effect — translucent dark fill + 13.9px blur (Figma
       node 1:460). Applied at every breakpoint so desktop, tablet and
       mobile share the same look. Targets both the desktop wrap and the
       Astra mobile wrap (used at viewports below the header breakpoint). */
.ast-main-header-wrap,
.ast-mobile-header-wrap {
  background-color: rgba(20, 18, 15, 0.24) !important;     /* #14120F3D */
  backdrop-filter: blur(13.9px);
  -webkit-backdrop-filter: blur(13.9px);
}

@media (min-width: 1150px) {
  /* Desktop: drop the "Profesionales" Spectra modal trigger — the single
     header CTA below now covers both its purpose and the original button. */
  .wp-block-uagb-modal.profesionales { display: none !important; }

  /* Restyle the Astra header button to match `.weilo-planes__cta`:
     2px lime border, transparent background, lime text → on hover/focus
     fill with lime + dark text. Targets only `.ast-custom-button-link`;
     the duplicated `a.menu-link` fallback inside the same wrap stays
     hidden by Astra's own desktop rules. `#EDFF5A` matches
     `--weilo-pl-yellow` from planes.css. */
  .ast-builder-button-wrap .ast-custom-button-link {
    width: 288px;                  /* Figma spec — but allowed to shrink. */
    max-width: 100%;               /* …so a narrow header doesn't overflow. */
    height: 56px;
    padding: 0 24px !important;
    border: 2px solid #EDFF5A !important;
    border-radius: 100px !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #EDFF5A !important;
    font-family: "Google Sans Flex", "Inter", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: background-color 200ms ease, color 200ms ease !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ast-builder-button-wrap .ast-custom-button-link:hover,
  .ast-builder-button-wrap .ast-custom-button-link:focus,
  .ast-builder-button-wrap .ast-custom-button-link:focus-visible {
    background-color: #EDFF5A !important;
    color: #14120F !important;
    border-color: #EDFF5A !important;
  }
  /* Astra wraps the button label in an inner <div class="ast-custom-button">
     that ships with its own bg/border/padding/radius — that's the
     "button-inside-a-button" effect. Strip it down to a plain text span
     so only the outer <a> renders the pill. */
  .ast-builder-button-wrap .ast-custom-button-link .ast-custom-button {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: inherit !important;
    box-shadow: none !important;
    line-height: 1 !important;
    font: inherit !important;
  }
  .ast-builder-button-wrap .ast-custom-button-link:hover  .ast-custom-button,
  .ast-builder-button-wrap .ast-custom-button-link:focus  .ast-custom-button,
  .ast-builder-button-wrap .ast-custom-button-link:focus-visible .ast-custom-button {
    background: transparent !important;
    color: inherit !important;
    border: 0 !important;
  }
}

/* 2) Drop the inherited white background that Astra applies to the mobile
      menu under .ast-header-break-point. The ≤544px rule already cleared
      it via the theme's own stylesheet. */
@media (max-width: 1149px) {
  .ast-header-break-point .main-header-menu,
  .ast-header-break-point .main-header-menu .sub-menu,
  .ast-header-break-point .ast-builder-menu-2 .main-header-menu,
  .ast-header-break-point .ast-builder-menu-2 .main-header-menu .sub-menu {
    background-color: transparent !important;
    background-image: none !important;
  }
}
.weilo-promo-bar__track {
  display: inline-flex;
  gap: 2.5rem;
  white-space: nowrap;
  padding: 12px 0;
  animation: weilo-marquee 45s linear infinite;
  will-change: transform;
}
@keyframes weilo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.weilo-promo-bar:hover .weilo-promo-bar__track,
.weilo-promo-bar:focus-within .weilo-promo-bar__track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .weilo-promo-bar__track { animation: none; transform: none; }
}