/* Payments / service-status banner shown above the navbar on every page. */
.navbar-banner,
.navbar-banner:hover {
  background-color: #dadada;
  transition: none;
}

.banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

.banner-icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
}

.navbar-banner .banner-text {
  color: var(--fg--text--primary);
  font-size: .875rem;
  line-height: 1.45;
  text-align: left;
}

.banner-text p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.banner-text p + p {
  margin-top: .5rem;
}

.banner-text strong,
.banner-notice {
  font-weight: 600;
}

.navbar-banner .banner-text a {
  display: inline;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, .3);
  text-underline-offset: 2px;
  white-space: nowrap;
}

.navbar-banner .banner-text a:hover {
  text-decoration-color: currentColor;
}

/* Tablet/mobile: the banner scrolls away and the navbar (logo + menu)
   stays pinned, in flow, so it never covers the page content.
   --banner-h is set by js/navbar-banner.js. */
@media screen and (max-width: 991px) {
  .navbar {
    position: sticky;
    top: calc(-1 * var(--banner-h, 0px));
    /* full-bleed even when the nav sits inside .padding-global */
    margin-left: calc(50% - 50vw);
  }

  .navbar-menu {
    background-color: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  }

  .logo-navbar {
    opacity: 1 !important;
    transform: none !important;
  }

  /* the navbar is now in flow, so the fixed-navbar offsets are not needed */
  .section-padding.legal {
    padding-top: 2rem;
  }

  .section-padding.hero.banner {
    margin-top: 0;
    padding-top: 2rem;
  }
}

/* Phones: compact, left-aligned, icon on the first line */
@media screen and (max-width: 767px) {
  .navbar-banner {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  .banner-inner {
    align-items: flex-start;
    justify-content: flex-start;
    gap: .625rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .banner-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .navbar-banner .banner-text {
    font-size: .75rem;
    line-height: 1.45;
  }

  .banner-text p + p {
    margin-top: .375rem;
  }
}

/* Side gutters: Webflow only set them below 480px, so between 480px and
   the 80rem container the content touched the screen edges. */
@media screen and (min-width: 480px) and (max-width: 1343px) {
  .padding-global {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Tablet/mobile home: the logo is already in the pinned header */
@media screen and (max-width: 991px) {
  .logo-wrapper-hero {
    display: none;
  }
}

/* Desktop: the navbar stays fixed, so offset the first section by its real
   height (banner + 3.5rem menu) instead of Webflow's hard-coded values,
   which assumed a two-line banner. */
@media screen and (min-width: 992px) {
  .section-padding.hero.banner {
    margin-top: 0;
    padding-top: calc(var(--banner-h, 4rem) + 3.5rem);
  }

  .section-padding.legal {
    padding-top: calc(var(--banner-h, 4rem) + 3.5rem + 2rem);
  }
}

/* Keep the language selector and "Descarga la app" in place: a Webflow
   scroll interaction on the home slid them off to the right. */
.navbar .language-dropdown,
.navbar .button-red-wrapper {
  transform: none !important;
}