/* English / Español switch and the "¿Prefieres leer en español?" offer. Shared by both designs. */
.es-offer {
  display: flex; justify-content: center; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .55rem 1rem; background: #ff2d87; color: #fff; font: 600 .95rem/1.3 'Open Sans', sans-serif;
  text-align: center; position: relative; z-index: 60;
}
.es-offer[hidden] { display: none; }
.es-offer a { color: #fff; text-decoration: underline; }
.es-offer button {
  background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .3rem;
}
.lang-switch { font: 600 .85rem/1 'Open Sans', sans-serif; white-space: nowrap; }
.lang-switch a { color: inherit; opacity: .75; text-decoration: none; padding: .35rem .15rem; }
.lang-switch a:hover, .lang-switch a:focus-visible { opacity: 1; text-decoration: underline; }
.lang-switch a[aria-current] { opacity: 1; color: #ff2d87; }
.lang-switch .sep { opacity: .5; margin: 0 .2rem; }
/* Classic media-kit design: the switch sits in the top-right corner of the hero */
.hero > .lang-switch { position: absolute; top: .75rem; right: 1rem; z-index: 3; color: #fff; }
.footer .lang-switch { display: block; margin-top: .6rem; color: #fff; }
/* v2 design: the switch sits in the sticky nav, between the links and the booking button */
.nav .lang-switch { color: #fff; }
.footer .wrap > .lang-switch { margin-top: 0; color: inherit; }
@media (max-width: 980px) {
  .nav .lang-switch { margin-left: auto; }
  .nav .lang-switch ~ .btn { margin-left: 0; }
}
/* Phones: brand + "English / Español" + the booking button don't fit in one row, and the
   booking band and footer already carry the email link, so the nav button steps aside. */
@media (max-width: 600px) {
  .nav .wrap { gap: 12px; }
  .nav .lang-switch ~ .btn { display: none; }
}