:root {
  --azul: #1E2A4A;
  --azul-oscuro: #16203A;
  --coral: #E8604C;
  --coral-claro: #F0937F;
  --arena: #E9D9BE;
  --concha: #F6F1E8;
  --glow-coral: 0 0 18px rgba(232, 96, 76, .55), 0 0 2px rgba(240, 147, 127, .9);
  --glow-arena: 0 0 16px rgba(233, 217, 190, .45);
  --radius: 14px;
  --font-title: "Fraunces", Georgia, serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg, var(--concha));
  color: var(--fg, var(--azul));
  font-family: var(--font-body);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.kicker {
  font-size: .75rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700; color: var(--coral); margin: 0 0 .75rem;
}
.lead { font-size: 1.125rem; max-width: 52ch; }
.glow-title {
  font-family: var(--font-title); font-weight: 900; line-height: 1.02;
  font-size: clamp(2.4rem, 7vw, 5.2rem); margin: 0 0 1rem;
}
.glow-title em { font-style: italic; font-weight: 600; color: var(--coral); text-shadow: var(--glow-coral); }

.btn {
  display: inline-block; padding: .85rem 1.5rem; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--coral { background: var(--coral); color: var(--concha); box-shadow: 0 6px 24px rgba(232, 96, 76, .35); }
.btn--coral:hover { box-shadow: 0 8px 30px rgba(232, 96, 76, .6); }
.btn--ghost { border: 1.5px solid var(--arena); color: var(--arena); }

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center;
  justify-content: space-between; gap: 1.5rem; padding: .9rem 1.5rem;
  background: rgba(30, 42, 74, .82); backdrop-filter: blur(12px);
  transition: background .3s var(--ease);
}
.nav__links { display: flex; gap: 1.4rem; overflow-x: auto; scrollbar-width: none; }
.nav__links a {
  color: var(--concha); text-decoration: none; font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; padding: .3rem 0;
  border-bottom: 2px solid transparent; transition: text-shadow .25s, border-color .25s;
}
.nav__links a:hover { border-color: var(--world-accent, var(--coral)); text-shadow: var(--glow-arena); }
.nav__cta { padding: .55rem 1.1rem; }

.hero {
  position: relative; min-height: 100svh; display: grid; align-items: center;
  padding: 7rem 1.5rem 4rem; background: radial-gradient(120% 90% at 80% 20%, #2b3a63 0%, var(--azul) 55%, var(--azul-oscuro) 100%);
  color: var(--concha);
}
.hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero .glow-title { color: var(--concha); text-shadow: var(--glow-arena); }
.hero__panther {
  position: absolute; right: -6%; top: 50%; width: min(60vw, 640px); opacity: .22;
  transform: translateY(-50%); pointer-events: none;
}
.hero__copy { position: relative; max-width: 760px; margin: 0 auto; width: 100%; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

.marquee { overflow: hidden; background: var(--coral); color: var(--concha); padding: .8rem 0; }
.marquee__track { display: flex; gap: 3rem; width: max-content; animation: marquee 28s linear infinite; }
.marquee__track span {
  font-family: var(--font-title); font-style: italic; font-weight: 600; font-size: 1.3rem; white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }

.section { padding: 5rem 1.5rem; max-width: 1200px; margin: 0 auto; }
.section--sand { max-width: none; background: var(--section-alt, var(--arena)); }
.section--sand > * { max-width: 1100px; margin-left: auto; margin-right: auto; }

.worlds { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-top: 2rem; }
.world-card {
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; padding: 1.4rem;
  border-radius: var(--radius); text-decoration: none; color: var(--concha);
  background: linear-gradient(160deg, var(--azul) 40%, var(--azul-oscuro));
  border: 1px solid transparent; transition: transform .4s var(--ease), border-color .3s, box-shadow .3s;
}
.world-card:hover { transform: translateY(-6px); border-color: var(--world-accent); box-shadow: 0 0 28px color-mix(in srgb, var(--world-accent) 45%, transparent); }
.world-card__name { font-family: var(--font-title); font-weight: 900; font-size: 1.8rem; text-shadow: 0 0 14px color-mix(in srgb, var(--world-accent) 60%, transparent); }
.world-card__tag { font-size: .9rem; color: var(--arena); }

.trust { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.trust__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.trust blockquote { grid-column: 1 / -1; font-family: var(--font-title); font-style: italic; font-size: 1.4rem; margin: 1rem 0 0; }
.trust cite { display: block; font-family: var(--font-body); font-style: normal; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); margin-top: .4rem; }

.world-hero { padding: 8rem 1.5rem 3rem; max-width: 1200px; margin: 0 auto; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.chip {
  padding: .45rem 1rem; border-radius: 999px; border: 1.5px solid var(--fg, var(--azul)); text-decoration: none;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.chip.is-active, .chip:hover { background: var(--fg, var(--azul)); color: var(--bg, var(--concha)); }

.footer { background: var(--azul); color: var(--arena); text-align: center; padding: 3rem 1.5rem; }
.footer img { margin: 0 auto 1rem; }
.footer__line { font-family: var(--font-title); font-style: italic; font-size: 1.3rem; margin: 0 0 .5rem; }
.footer__small { font-size: .8rem; opacity: .8; margin: 0; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}
@media (max-width: 720px) {
  .nav { flex-wrap: wrap; }
  .nav__links { order: 3; width: 100%; }
}