/**
 * Pill 24 hs latente — nav, hero mapa, botón mapa rápido (una sola fuente).
 * Selectores con .nav a / button para ganar a estilos globales del header.
 */
a.lochloe-pill-24-latent,
button.lochloe-pill-24-latent,
.nav a.lochloe-pill-24-latent,
.header-mapa-24.lochloe-pill-24-latent {
  position: relative;
  z-index: 2;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(135deg, #45a173 0%, #357a58 50%, #2d6a4f 100%);
  background-size: 220% 220%;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-weight: 800;
  font-family: inherit;
  line-height: 1.15;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 12px rgba(45, 106, 79, 0.35);
  animation: lochloe-pill-24-latent 3.4s ease-in-out infinite;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.lochloe-pill-24-latent:not(.header-mapa-24),
button.lochloe-pill-24-latent,
.nav a.lochloe-pill-24-latent {
  display: inline-flex;
}

a.lochloe-pill-24-latent[hidden],
button.lochloe-pill-24-latent[hidden] {
  display: none !important;
}

/* Mobile header pill: oculto en desktop (nav ya tiene 24hs). */
.header-mapa-24.lochloe-pill-24-latent {
  display: none;
}

@media (max-width: 1024px) {
  .header-mapa-24.lochloe-pill-24-latent {
    display: inline-flex;
  }
}

.nav a.lochloe-pill-24-latent::after {
  display: none;
}

a.lochloe-pill-24-latent:hover,
a.lochloe-pill-24-latent:focus-visible,
button.lochloe-pill-24-latent:hover,
button.lochloe-pill-24-latent:focus-visible,
.nav a.lochloe-pill-24-latent:hover,
.nav a.lochloe-pill-24-latent:focus-visible,
.header-mapa-24.lochloe-pill-24-latent:hover,
.header-mapa-24.lochloe-pill-24-latent:focus-visible {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: linear-gradient(135deg, #3d9970, #2d6a4f);
  animation: none;
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(45, 106, 79, 0.45);
  outline: none;
}

@keyframes lochloe-pill-24-latent {
  0%, 100% {
    transform: scale(1);
    background-image: linear-gradient(135deg, #45a173 0%, #4b7462 50%, #357a58 100%);
    background-position: 0% 50%;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 10px rgba(45, 106, 79, 0.32), 0 0 0 0 rgba(69, 161, 115, 0.5);
  }
  33% {
    transform: scale(1.06);
    background-image: linear-gradient(135deg, #a65e77 0%, #c2607a 45%, #8f4d60 100%);
    background-position: 100% 50%;
    border-color: rgba(247, 209, 71, 0.75);
    box-shadow: 0 3px 14px rgba(166, 94, 119, 0.38), 0 0 0 8px rgba(247, 209, 71, 0);
  }
  66% {
    transform: scale(1.05);
    background-image: linear-gradient(135deg, #4b7462 0%, #45a173 40%, #c2607a 100%);
    background-position: 50% 100%;
    border-color: rgba(184, 230, 200, 0.85);
    box-shadow: 0 4px 16px rgba(75, 116, 98, 0.4), 0 0 0 7px rgba(184, 230, 200, 0);
  }
}

.hero-map-quick-cta.lochloe-pill-24-latent .hero-map-quick-label,
.hero-map-quick-cta.lochloe-pill-24-latent .hero-map-quick-arrow {
  color: #fff;
  font-weight: 800;
  -webkit-text-fill-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  a.lochloe-pill-24-latent,
  button.lochloe-pill-24-latent,
  .nav a.lochloe-pill-24-latent,
  .header-mapa-24.lochloe-pill-24-latent {
    animation: none;
    background: linear-gradient(135deg, #45a173, #357a58);
  }
}