:root {
  --ink: #1f2933;
  --body: #ffffff;
  --rocket: #3b4a5a;
  --accent: #c8553d;
  --smoke: #d9dee3;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--body);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}
main {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
}
.logo {
  display: block;
  width: 200px;
  height: auto;
  max-width: 100%;
  margin: 0 0 32px;
}
@media (max-width: 1023px) { .logo { width: 175px; } }
@media (max-width: 600px)  {
  .logo { width: 155px; margin-bottom: 28px; }
  h1 {
    font-size: clamp(1.35rem, 5.5vw, 1.75rem);
    max-width: 16ch !important;
    margin-bottom: 28px !important;
  }
}
h1 {
  margin: 0;
  width: 100%;
  max-width: 32ch;
  font-size: clamp(1.75rem, 4.2vw + 0.5rem, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  overflow-wrap: break-word;
  word-wrap: break-word;
  margin-bottom: clamp(1.5rem, 4vw, 2.75rem);
}
.stage {
  width: clamp(120px, 20vw, 190px);
  aspect-ratio: 120 / 190;
  overflow: visible;
}
.stage svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* Ciclo: reposo, vibración, impulso hacia arriba, descenso suave */
.rocket { animation: lift 5s cubic-bezier(.4, 0, .2, 1) infinite; transform-box: fill-box; transform-origin: center bottom; }
.shake  { animation: shake 5s linear infinite; transform-box: fill-box; transform-origin: center bottom; }
.flame  { animation: flame 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center top; }
.puff   { opacity: 0; transform-box: fill-box; transform-origin: center; animation: puff 5s ease-out infinite; }
.puff.p2 { animation-delay: .12s; }
.puff.p3 { animation-delay: .24s; }

@keyframes lift {
  0%, 30%   { transform: translateY(0); }
  52%       { transform: translateY(-26px); }
  62%       { transform: translateY(-26px); }
  84%, 100% { transform: translateY(0); }
}
@keyframes shake {
  0%, 22%   { transform: translateX(0); }
  24%       { transform: translateX(-1.2px); }
  26%       { transform: translateX(1.2px); }
  28%       { transform: translateX(-1.2px); }
  30%       { transform: translateX(1px); }
  32%, 100% { transform: translateX(0); }
}
@keyframes flame {
  0%, 20%   { transform: scaleY(.25); opacity: .3; }
  30%       { transform: scaleY(.8);  opacity: .9; }
  52%       { transform: scaleY(1.25); opacity: 1; }
  62%       { transform: scaleY(1);   opacity: 1; }
  80%, 100% { transform: scaleY(.2);  opacity: .25; }
}
@keyframes puff {
  0%, 24%   { opacity: 0; transform: scale(.4) translateY(0); }
  36%       { opacity: .85; }
  80%       { opacity: 0; transform: scale(1.9) translateY(10px); }
  100%      { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rocket, .shake, .flame, .puff { animation: none; }
  .flame { transform: scaleY(.5); opacity: .6; }
  .puff.p1 { opacity: .5; transform: scale(1); }
}