html[data-lang="es"] [lang="en"] { display: none; }
html[data-lang="en"] [lang="es"] { display: none; }

html {
  scrollbar-width: thin;
  scrollbar-color: #C9A45C #075B73;
}
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: #075B73;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #C9A45C, #D9B77A);
  border-radius: 9999px;
  border: 3px solid #075B73;
}
::-webkit-scrollbar-thumb:hover {
  background: #C9A45C;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes nav-drop {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

.hero-anim { opacity: 0; animation: fade-up 0.7s ease forwards; }
.hero-anim.d2 { animation-delay: 0.15s; }
.hero-anim.d3 { animation-delay: 0.3s; }

.nav-anim { animation: nav-drop 0.5s ease forwards; }

.nav-item-anim { opacity: 0; animation: fade-up 0.5s ease forwards 0.35s; }
.nav-item-anim.d2 { animation-delay: 0.45s; }
.nav-item-anim.d3 { animation-delay: 0.55s; }

.logo-img {
  opacity: 0;
  transform-origin: center;
  animation: pop-in 0.5s ease forwards 0.2s;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }

.reveal-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-item.in { opacity: 1; transform: translateY(0); }
.reveal-item:nth-child(2).in { transition-delay: 0.08s; }
.reveal-item:nth-child(3).in { transition-delay: 0.16s; }
.reveal-item:nth-child(4).in { transition-delay: 0.24s; }
.reveal-item:nth-child(5).in { transition-delay: 0.32s; }
.reveal-item:nth-child(6).in { transition-delay: 0.4s; }
.reveal-item:nth-child(7).in { transition-delay: 0.48s; }

#nav.scrolled { box-shadow: 0 2px 20px rgba(7, 91, 115, 0.15); }

.hero-scrim {
  background: linear-gradient(180deg, rgba(7, 91, 115, 0.8) 0%, rgba(7, 91, 115, 0.45) 25%, rgba(7, 91, 115, 0.05) 45%, rgba(7, 91, 115, 0) 60%, rgba(7, 91, 115, 0.92) 100%);
}
.city-scrim {
  background: linear-gradient(180deg, rgba(7, 91, 115, 0.8) 0%, rgba(7, 91, 115, 0.45) 25%, rgba(7, 91, 115, 0.05) 45%, rgba(7, 91, 115, 0) 60%, rgba(7, 91, 115, 0.92) 100%);
}
.night-scrim {
  background: linear-gradient(180deg, rgba(7, 91, 115, 0.8) 0%, rgba(7, 91, 115, 0.45) 25%, rgba(7, 91, 115, 0.05) 45%, rgba(7, 91, 115, 0) 60%, rgba(7, 91, 115, 0.92) 100%);
}
.shrine-scrim {
  background: linear-gradient(180deg, rgba(7, 91, 115, 0.8) 0%, rgba(7, 91, 115, 0.45) 25%, rgba(7, 91, 115, 0.05) 45%, rgba(7, 91, 115, 0) 60%, rgba(7, 91, 115, 0.92) 100%);
}
.leaf-scrim {
  background: linear-gradient(180deg, rgba(7, 91, 115, 0.3) 0%, rgba(7, 91, 115, 0.55) 60%, rgba(7, 91, 115, 0.88) 100%);
}
@media (min-width: 768px) {
  .hero-scrim, .city-scrim, .night-scrim, .shrine-scrim {
    background: linear-gradient(90deg, rgba(7, 91, 115, 0.8) 0%, rgba(7, 91, 115, 0.4) 35%, rgba(7, 91, 115, 0.05) 60%, rgba(7, 91, 115, 0) 75%);
  }
}

.beach-wash {
  background: rgba(248, 245, 237, 0.5);
}
.card-panel {
  background: rgba(248, 245, 237, 0.92);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.fab-whatsapp {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 50;
}

.accent-forest { background: #16B8C4; }
.accent-amber  { background: #C9A45C; }
.accent-clay   { background: #D9B77A; }

.route-line {
  display: none;
}
@media (min-width: 768px) {
  .route-line {
    display: block;
    position: absolute;
    top: 1.625rem;
    left: 16.5%;
    right: 16.5%;
    height: 0;
    border-top: 2px dashed #C9A45C;
    z-index: 0;
  }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 164, 92, 0.45); }
  50% { box-shadow: 0 0 22px 7px rgba(201, 164, 92, 0.3); }
}
.step-glow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  background: rgba(7, 91, 115, 0.5);
  animation: glow-pulse 2.6s ease-in-out infinite;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .hero-anim, .nav-anim, .nav-item-anim, .reveal, .reveal-item, .logo-img {
    opacity: 1 !important;
    transform: none !important;
  }
  .marquee-track { animation: none !important; transform: none !important; }
  .step-glow { animation: none !important; box-shadow: none !important; }
}