/* "Log in" / "Iniciar sesión" nav item — minimal nav-native link.
   Background-aware brand purple: #6F02CE (on-brand, high contrast) on the white/
   light pages AND on the white mobile menu; the lighter legible violet #B266F2
   only on the two dark-hero homepages on DESKTOP (via .login-cta--dark), where
   #6F02CE is illegible against the photo. Uppercase, NO underline, NO box. Box matches the sibling
   nav links exactly so it sits on the same baseline:
   siblings = .nav-link.white.w-nav-link => display:inline-block; vertical-align:top;
   padding 40px (top/bottom from .nav-link) 20px (left/right from .w-nav-link);
   font 1rem/400; line-height 20px. We replicate that and only change the color. */
a.login-cta,
a.login-cta:visited {
  display: inline-block;
  vertical-align: top;
  padding: 40px 20px;
  font-family: Lato, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 20px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #6F02CE;
  transition: opacity 0.15s ease;
}
a.login-cta:hover {
  opacity: 0.7;
}

/* Dark-hero homepages (index, es/home) carry .login-cta--dark on the link. On
   DESKTOP the nav overlays the dark satellite photo, where #6F02CE is illegible,
   so use the lighter legible violet there. Not applied on mobile — the menu is a
   white overlay, so the base #6F02CE (above) keeps it on-brand and legible. */
@media screen and (min-width: 992px) {
  a.login-cta.login-cta--dark {
    color: #B266F2;
  }
}

/* Mobile menu = full-screen white overlay; siblings become display:block,
   left-aligned, padding 20px. Match that (the parent is text-align:center, which
   would otherwise center an inline-block). */
@media screen and (max-width: 991px) {
  a.login-cta {
    display: block;
    text-align: left;
    padding: 20px;
    margin: 0;
  }
}