:root {
  --color-signal-yellow: #ffe600;
  --color-globe-azure: #007fff;
  --color-roof-coral: #ef3b2c;
  --color-charcoal-ink: #333333;
  --color-cloud-white: #ffffff;

  --font-changa-one: 'Changa One', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-arial: Arial, Helvetica, ui-sans-serif, system-ui, sans-serif;

  --text-caption: 12px;
  --text-body: 14px;
  --text-subheading: 20px;
  --text-heading-sm: 32px;
  --text-heading: 50px;
  --text-display: 75px;

  --radius-globe: 1440px;
  --nav-h: 48px;
  --planet-top: 60vh;
  --text-top: 75vh;
  --chord: 600px;
}

* { box-sizing: border-box; }
html { scroll-snap-type: y proximity; }
body {
  margin: 0;
  background: var(--color-signal-yellow);
  color: var(--color-charcoal-ink);
  font-family: var(--font-arial);
  font-size: var(--text-body);
  line-height: 1.43;
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; justify-content: center; align-items: center; min-height: var(--nav-h);
}
.nav nav { display: flex; flex-wrap: wrap; justify-content: center; }
.nav a, .lang button {
  font: 400 14px/1.43 var(--font-arial); text-transform: uppercase; text-decoration: none;
  color: var(--color-charcoal-ink); padding: 10px 20px; position: relative;
}
.nav a::after, .lang button::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 20px; height: 2px; margin-left: -10px;
  background: var(--color-charcoal-ink); transform: scaleX(0); transition: transform .25s;
}
.nav a.active::after, .lang button[aria-pressed="true"]::after { transform: scaleX(1); }
.lang { position: absolute; right: 12px; top: 0; display: flex; }
.lang button { background: none; border: 0; cursor: pointer; padding: 10px 8px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px dashed currentColor; outline-offset: 3px; }

/* ---------- Mundo ---------- */
/* Las paradas van cada 100svh (altura con la barra del navegador visible) y la escena mide 100dvh
   (altura visible en cada momento): en el iPhone, al esconderse la barra de Safari, la escena crece
   en vez de cortar el texto por abajo. */
.world { position: relative; height: 600vh; height: calc(5 * 100svh + 100dvh); }
.snaps { position: absolute; inset: 0; }
.snaps div { height: 100vh; height: 100svh; scroll-snap-align: start; }
.stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }

.planet { position: absolute; overflow: visible; z-index: 2; }
.js .planet { transform: translateY(40%); }
.ready .planet { transform: none; transition: transform 1.4s cubic-bezier(.2, 1.25, .35, 1); }

/* Titulares curvos */
.hl text { font-family: var(--font-changa-one); font-size: 92px; }
.hl {
  opacity: 0; transform-box: view-box; transform-origin: 0 -900px;
  transform: scale(.85) rotate(-4deg); transition: opacity .35s, transform .55s cubic-bezier(.2, 1.4, .4, 1);
}
.hl.active { opacity: 1; transform: none; }

/* Piezas animadas */
.flag, .wave, .gear, .smoke rect, .puffs circle, .rumble, .hand-m, .hand-h, .letter, .signal path, .blink { transform-box: fill-box; }
.flag { transform-origin: 0 50%; animation: flag 1.1s ease-in-out infinite alternate; }
.wave { transform-origin: 0 50%; animation: flag 1.4s ease-in-out infinite alternate; }
@keyframes flag { to { transform: skewY(7deg) scaleX(.9); } }
.gear { transform-origin: center; animation: spin 8s linear infinite; }
.gear.rev { animation-direction: reverse; animation-duration: 5s; }
@keyframes spin { to { transform: rotate(360deg); } }
.hand-m { transform-origin: 50% 100%; animation: spin 6s linear infinite; }
.hand-h { transform-origin: 0 50%; animation: spin 72s linear infinite; }
.smoke rect { animation: smoke 3s linear infinite; }
.smoke rect:nth-child(2) { animation-delay: -1s; }
.smoke rect:nth-child(3) { animation-delay: -2s; }
@keyframes smoke { from { transform: translate(0, 20px); opacity: 0; } 20% { opacity: 1; } to { transform: translate(26px, -90px) rotate(120deg); opacity: 0; } }
.puffs circle { transform-origin: center; animation: puff 2.4s ease-in-out infinite; }
.puffs circle:nth-child(2n) { animation-delay: -1.2s; }
@keyframes puff { 50% { transform: scale(1.25) translateY(-4px); } }
.rumble { animation: rumble .18s linear infinite alternate; }
@keyframes rumble { to { transform: translateX(1.5px); } }
.letter { animation: letter 3.2s ease-in-out infinite; }
@keyframes letter { 0%, 20% { transform: translateY(40px); opacity: 0; } 45% { opacity: 1; } 80%, 100% { transform: translate(20px, -40px) rotate(-14deg); opacity: 0; } }
.signal path { animation: signal 1.8s ease-out infinite; opacity: 0; }
.signal path:nth-child(2) { animation-delay: .3s; }
.signal path:nth-child(3) { animation-delay: .6s; }
@keyframes signal { 30% { opacity: 1; } 100% { opacity: 0; } }
.blink { animation: blink 1.4s steps(2) infinite; }
.b2 { animation-delay: -.7s; }
@keyframes blink { 50% { opacity: .2; } }
.drive { transform-box: view-box; transform-origin: 0 0; animation: spin var(--dur) linear infinite; }
.drive.rev { animation-direction: reverse; }
.t { font-family: var(--font-changa-one); }

/* ---------- Cielo ---------- */
.sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sun { position: absolute; width: clamp(80px, 9vw, 130px); right: 7%; top: calc(var(--nav-h) + 4vh); }
.rays { transform-box: fill-box; transform-origin: center; animation: spin 30s linear infinite; }
.layer { position: absolute; inset: 0; will-change: transform; }
.cloud { position: absolute; left: var(--x); top: var(--y); width: var(--w); animation: drift var(--d) ease-in-out infinite alternate; }
@keyframes drift { to { translate: 9vw 0; } }
.balloon { position: absolute; width: clamp(54px, 5vw, 80px); left: 13%; top: calc(var(--nav-h) + 14vh); animation: balloon 7s ease-in-out infinite; }
@keyframes balloon { 50% { transform: translate(14px, -22px) rotate(4deg); } }
.birds { position: absolute; width: 110px; left: 44%; top: calc(var(--nav-h) + 6vh); animation: birds 40s linear infinite; }
.wing { transform-box: fill-box; transform-origin: center; animation: flap .5s ease-in-out infinite alternate; }
.w2 { animation-delay: -.2s; } .w3 { animation-delay: -.35s; }
@keyframes flap { to { transform: scaleY(.3); } }
@keyframes birds { from { transform: translateX(-60vw); } to { transform: translateX(60vw); } }
.plane-track { position: absolute; inset: 0; }
.plane {
  position: absolute; height: clamp(58px, 6.4vw, 96px); width: auto; top: calc(var(--nav-h) + 9vh); left: 100%;
  animation: fly 26s linear infinite;
}
@keyframes fly {
  from { transform: translateX(0) translateY(0); }
  50% { transform: translateX(calc(-50vw - 50%)) translateY(-14px); }
  to { transform: translateX(calc(-100vw - 100%)) translateY(0); }
}
.banner-t { font-family: var(--font-changa-one); font-size: 30px; fill: var(--color-charcoal-ink); }
.prop { transform-box: fill-box; transform-origin: center; animation: prop .12s linear infinite alternate; }
@keyframes prop { to { transform: scaleY(.15); } }

/* ---------- Paneles (texto sobre el planeta) ---------- */
.panels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.panel {
  position: absolute; left: 50%; top: var(--text-top);
  width: min(var(--chord), 600px); padding: 0 8px;
  transform: translate(-50%, 24px); opacity: 0;
  color: #fff; text-align: center; display: grid; gap: 12px; justify-items: center;
  transition: opacity .3s, transform .5s cubic-bezier(.2, 1.3, .4, 1);
}
.panel.active { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; transition-delay: .12s; }
.kicker {
  font: 400 13px/1.3 var(--font-arial); text-transform: uppercase; letter-spacing: 2.5px;
  display: inline-flex; align-items: center; gap: 10px;
}
.kicker img { border: 2px solid #fff; }
.text { font-size: 17px; line-height: 1.5; max-width: 50ch; }
.meta { font-family: var(--font-changa-one); font-size: var(--text-subheading); line-height: 1.25; }
.meta.small { font: 400 var(--text-caption)/1.4 var(--font-arial); text-transform: uppercase; letter-spacing: 1.5px; opacity: .85; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px 26px; margin-top: 4px; }
.cta {
  font: 400 26px/1 var(--font-changa-one); color: #fff; text-decoration: none;
  border: 0; border-bottom: 4px solid #fff; padding: 0 0 3px; background: none; cursor: pointer;
  display: inline-block; transition: transform .2s;
}
.cta:hover { transform: rotate(-3deg) scale(1.05); }
.cta.small { font: 400 13px/1.4 var(--font-arial); text-transform: uppercase; letter-spacing: 1.5px; border-bottom-width: 2px; }
#join-form { display: flex; flex-wrap: wrap; gap: 12px 22px; justify-content: center; align-items: flex-end; width: 100%; }
#join-form input[type=email] {
  flex: 1 1 220px; max-width: 320px; background: transparent; color: #fff; border: 0; border-bottom: 3px solid #fff;
  border-radius: 0; padding: 8px 2px; font: 17px var(--font-arial);
}
#join-form input::placeholder { color: rgba(255, 255, 255, .75); }
.hp { position: absolute; left: -9999px; }
.status { min-height: 1.4em; font-size: 15px; }
.status a { color: #fff; }
.socials { display: flex; gap: 14px; }
.soc { width: 40px; height: 40px; display: grid; place-items: center; opacity: .7; }
.soc svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; color: #fff; }
.footer { font-size: var(--text-caption); opacity: .8; margin-top: 6px; }

.counter {
  position: absolute; z-index: 4; left: 20px; bottom: 18px; color: #fff;
  font: 400 var(--text-subheading)/1 var(--font-changa-one);
}
.scroll-cue {
  position: absolute; z-index: 4; left: 50%; bottom: 14px; width: 40px; height: 40px; margin-left: -20px;
  display: grid; place-items: center; opacity: 0; transition: opacity .3s; pointer-events: none;
  animation: cue 1.6s ease-in-out infinite;
}
.at-start .scroll-cue { opacity: 1; pointer-events: auto; }
.scroll-cue svg { width: 30px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes cue { 50% { translate: 0 6px; } }

/* ---------- Pantallas bajas y móvil ---------- */
@media (max-height: 720px) and (min-width: 721px) {
  .text { font-size: 15px; }
  .panel { gap: 6px; }
  .cta { font-size: 22px; }
  .meta { font-size: 17px; }
  .footer, .meta.small { display: none; }
  .soc { width: 32px; height: 32px; }
}
@media (max-width: 720px) {
  :root { --nav-h: 74px; }
  .nav { flex-direction: column; justify-content: flex-start; background: var(--color-signal-yellow); }
  .nav a { padding: 8px 7px; font-size: 11.5px; }
  .lang { position: static; }
  .lang button { padding: 2px 8px 6px; font-size: 11.5px; }
  .nav a::after { bottom: 3px; }
  .text { font-size: 15px; }
  .meta { font-size: 17px; }
  .cta { font-size: 22px; }
  .counter { display: none; }
  .kicker { letter-spacing: 1.5px; font-size: 12px; }
  .plane { height: 50px; top: calc(var(--nav-h) + 4vh); animation-duration: 18s; }
  .balloon { left: 6%; top: calc(var(--nav-h) + 13vh); }
  .birds { display: none; }
  .sun { right: 5%; top: calc(var(--nav-h) + 12vh); width: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .planet { transform: none; }
}