:root {
  --stack-size: min(84vmin, 560px);
  --ring-color: rgba(255,255,255,.95);
  --moon-shift: -22%;
  --moon-glow: rgba(44, 98, 150, 0.72);
  --moon-glow-size: 28px;
  --logo-size: clamp(300px, 55vmin, 800px);
  --logo-hover-scale: 1.08;
  --mask-r: 26%;
  --mask-feather: 2%;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  color: #fff;
  background: linear-gradient(to bottom, #0f0c29 0%, #0d0841 50%, #000018 100%);
  background-attachment: fixed;
  display: grid;
  place-items: center;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}

.stage {
  position: relative;
  width: var(--stack-size);
  height: var(--stack-size);
  display: grid;
  place-items: center;
  user-select: none;
}

.orbits {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  --mask-x: 50%;
  --mask-y: calc(50% + var(--moon-shift));
  -webkit-mask: radial-gradient(
    circle at var(--mask-x) var(--mask-y),
    transparent calc(var(--mask-r) - var(--mask-feather)),
    #000 calc(var(--mask-r) + var(--mask-feather))
  );
  mask: radial-gradient(
    circle at var(--mask-x) var(--mask-y),
    transparent calc(var(--mask-r) - var(--mask-feather)),
    #000 calc(var(--mask-r) + var(--mask-feather))
  );
}

.ring {
  --size: .4;
  --duration: 16s;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--stack-size) * var(--size));
  height: calc(var(--stack-size) * var(--size));
  transform: translate(-50%, -50%);
  border: 1px solid var(--ring-color);
  background: transparent;
  animation: spin var(--duration) linear infinite;
  will-change: transform;
  z-index: -1;
}

.r1 { --size: .9;  --duration: 12s; animation-direction: normal; }
.r2 { --size: 1.1; --duration: 18s; animation-direction: reverse; }
.r3 { --size: 1.3; --duration: 24s; animation-direction: normal; }
.r4 { --size: 1.5; --duration: 32s; animation-direction: reverse; }
.r5 { --size: 1.7; --duration: 40s; animation-direction: normal; }

.logo-stack {
  position: relative;
  z-index: 10;
  display: grid;
  place-items: center;
  width: clamp(200px, 45vmin, 520px);
}

.logo-back {
  position: absolute;
  inset: 0;
  z-index: 10;
  transform: translateY(var(--moon-shift)) scale(1.18);
  opacity: .95;
  filter: drop-shadow(0 0 var(--moon-glow-size) var(--moon-glow)) blur(.2px);
  object-fit: contain;
  object-position: 50% 40%;
  animation: breathe 4.5s ease-in-out infinite;
  will-change: transform, filter;
}

.logo-front {
  position: relative;
  z-index: 11;
  width: var(--logo-size);
  height: auto;
  max-width: none;
  object-fit: contain;
  transition: transform 0.8s cubic-bezier(.25, .1, .25, 1);
  will-change: transform;
  transform: translate(-50px, -10px);
}

.logo-front:hover {
  transform: translate(-50px, -10px) scale(var(--logo-hover-scale));
  transition: transform 0.4s cubic-bezier(.22, .61, .36, 1);
}

.credit {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .8rem;
  opacity: .7;
}

.moon-wrapper {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  overflow: hidden;
  transform: translateY(var(--moon-shift)) scale(1.2);
  filter: drop-shadow(0 0 var(--moon-glow-size) var(--moon-glow)) blur(.2px);
  animation: breathe 4.5s ease-in-out infinite;
  will-change: transform, filter;
  background: #0f0c29;
}

.moon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.meteors {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.meteor {
  position: absolute;
  top: -10vh;
  left: 0;
  width: 2px;
  height: 2px;
  transform: rotate(18deg);
  opacity: 0;
  --left: -15vw;
  --top: -10vh;
  --dur: 8s;
  --delay: 0s;
  animation: fall var(--dur) linear infinite var(--delay);
}

.meteor::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px rgba(94, 105, 209, 0.9);
}

.meteor::after {
  content: "";
  position: absolute;
  left: -140px; top: 0;
  width: 140px; height: 2px;
  background: linear-gradient(to left, rgba(59, 132, 228, 0.85), rgba(255, 255, 255, 0));
  filter: blur(.2px);
}

@keyframes fall {
  0%   { transform: translate(var(--left), var(--top)) rotate(18deg); opacity: 0; }
  5%   { opacity: 1; }
  100% { transform: translate(calc(var(--left) + 120vw), calc(var(--top) + 120vh)) rotate(18deg); opacity: 0; }
}

.meteors .meteor:nth-child(1)  { --left:-20vw; --top:-10vh; --dur:7s;   --delay: 0s; }
.meteors .meteor:nth-child(2)  { --left:-30vw; --top:-25vh; --dur:9s;   --delay: 1s; }
.meteors .meteor:nth-child(3)  { --left:-10vw; --top:-15vh; --dur:2s;   --delay: 2.2s; }
.meteors .meteor:nth-child(4)  { --left:-35vw; --top: -5vh; --dur:10s;  --delay: 3.1s; }
.meteors .meteor:nth-child(5)  { --left:-40vw; --top:-18vh; --dur:1.6s; --delay: .8s; }
.meteors .meteor:nth-child(6)  { --left:-25vw; --top:-12vh; --dur:2.5s; --delay: 4.4s; }
.meteors .meteor:nth-child(7)  { --left:-45vw; --top:-28vh; --dur:12s;  --delay: 2.8s; }
.meteors .meteor:nth-child(8)  { --left:-15vw; --top:-22vh; --dur:9.5s; --delay: 5.2s; }
.meteors .meteor:nth-child(9)  { --left:-50vw; --top: -8vh; --dur:10.5s;--delay: 1.6s; }
.meteors .meteor:nth-child(10) { --left:-18vw; --top:-30vh; --dur:3.1s; --delay: 3.8s; }
.meteors .meteor:nth-child(11) { --left:-32vw; --top:-20vh; --dur:9.8s; --delay: 6.3s; }
.meteors .meteor:nth-child(12) { --left:-80vw; --top:-23vh; --dur:2.2s; --delay: 4.1s; }
.meteors .meteor:nth-child(13) { --left:-55vw; --top:-12vh; --dur:6.6s; --delay: 0.9s; }
.meteors .meteor:nth-child(14) { --left:-12vw; --top:-32vh; --dur:11s;  --delay: 2.9s; }
.meteors .meteor:nth-child(15) { --left:-28vw; --top:-18vh; --dur:2.8s; --delay: 5.5s; }
.meteors .meteor:nth-child(16) { --left:-62vw; --top:-26vh; --dur:14s;  --delay: 1.2s; }
.meteors .meteor:nth-child(17) { --left:-6vw;  --top:-8vh;  --dur:4.2s; --delay: 3.4s; }
.meteors .meteor:nth-child(18) { --left:-70vw; --top:-35vh; --dur:15s;  --delay: 6.8s; }
.meteors .meteor:nth-child(19) { --left:-22vw; --top:-5vh;  --dur:3.4s; --delay: 4.9s; }
.meteors .meteor:nth-child(20) { --left:-90vw; --top:-28vh; --dur:16s;  --delay: 2.1s; }
.meteors .meteor:nth-child(21) { --left:-48vw; --top:-16vh; --dur:5.1s; --delay: 7.3s; }
.meteors .meteor:nth-child(22) { --left:-14vw; --top:-24vh; --dur:9.2s; --delay: 1.9s; }
.meteors .meteor:nth-child(23) { --left:-38vw; --top:-14vh; --dur:2.3s; --delay: 6.1s; }
.meteors .meteor:nth-child(24) { --left:-75vw; --top:-32vh; --dur:13s;  --delay: 3.6s; }
.meteors .meteor:nth-child(25) { --left:-5vw;  --top:-18vh; --dur:3.6s; --delay: 8.0s; }
.meteors .meteor:nth-child(26) { --left:-66vw; --top:-20vh; --dur:7.8s; --delay: 4.7s; }
.meteors .meteor:nth-child(27) { --left:-42vw; --top:-10vh; --dur:2.1s; --delay: 2.6s; }
.meteors .meteor:nth-child(28) { --left:-58vw; --top:-27vh; --dur:12.4s;--delay: 5.9s; }
.meteors .meteor:nth-child(29) { --left:-16vw; --top:-12vh; --dur:4.8s; --delay: 1.1s; }
.meteors .meteor:nth-child(30) { --left:-82vw; --top:-34vh; --dur:15.6s;--delay: 7.8s; }
.meteors .meteor:nth-child(31) { --left:-24vw; --top:-6vh;  --dur:3.0s; --delay: 6.6s; }
.meteors .meteor:nth-child(32) { --left:-52vw; --top:-22vh; --dur:10.2s;--delay: 0.7s; }
.meteors .meteor:nth-child(33) { --left:-34vw; --top:-16vh; --dur:2.7s; --delay: 3.3s; }
.meteors .meteor:nth-child(34) { --left:-60vw; --top:-30vh; --dur:11.7s;--delay: 5.1s; }
.meteors .meteor:nth-child(35) { --left:-26vw; --top:-26vh; --dur:6.1s; --delay: 7.9s; }
.meteors .meteor:nth-child(36) { --left:-96vw; --top:-24vh; --dur:17s;  --delay: 2.4s; }

.progress {
  --progress: 0%;
  --progress-height: 10px;
  --progress-width: clamp(220px, 50vmin, 560px);
  --progress-bg: rgba(255,255,255,0.12);
  --progress-fill: linear-gradient(to right, #7aa7ff, #b9e3ff);
  --progress-border: rgba(255,255,255,0.22);
  width: var(--progress-width);
  margin: 16px auto;
  display: grid;
  gap: 10px;
  user-select: none;
}

.progress-track {
  position: relative;
  height: var(--progress-height);
  background: var(--progress-bg);
  border: 1px solid var(--progress-border);
  border-radius: 999px;
  overflow: hidden;
  backdrop-filter: saturate(120%) blur(2px);
}

.progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--progress-fill);
  box-shadow: 0 0 12px rgba(122,167,255,0.35);
  transition: width .6s cubic-bezier(.22,.61,.36,1);
}

.progress-label {
  justify-self: center;
  font-weight: 200;
  letter-spacing: .03em;
  font-size: .9rem;
  color: rgba(255,255,255,0.92);
  text-transform: none;
}

.progress.sm { --progress-height: 6px; font-size: .8rem; }
.progress.lg { --progress-height: 14px; --progress-width: clamp(260px, 60vmin, 680px); }

@media (prefers-reduced-motion: reduce){
  .progress-fill{ transition: none; }
}

@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes breathe {
  0%, 100% { transform: translateY(var(--moon-shift)) scale(1.18); }
  50%      { transform: translateY(var(--moon-shift)) scale(1.42); }
}

@media (min-width: 1024px) {
  .ring {
    outline: 1px solid rgba(255,255,255,.25);
    outline-offset: -2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ring { animation: none; }
  .logo-back { animation: none; }
}


/* ====== Responsivo básico (móviles) ====== */
@media (max-width: 480px) {
  :root{
    --stack-size: min(78vmin, 420px);
    --logo-size: clamp(200px, 62vmin, 520px);
    --moon-shift: -14%;
    --moon-glow-size: 18px;
    --mask-r: 30%;
    --mask-feather: 3%;
  }

  .stage{ padding: 8px; }

  .logo-stack{ width: clamp(180px, 62vmin, 460px); }

  .logo-front{
    transform: translate(-16px, 0);
  }
  .logo-front:hover{
    transform: translate(-16px, 0) scale(1.04);
  }

  .logo-back,
  .moon-wrapper{
    filter: drop-shadow(0 0 var(--moon-glow-size) var(--moon-glow)) blur(.15px);
    animation-duration: 5.5s;
  }

  .r4, .r5{ display: none; }

  .progress{
    --progress-width: clamp(200px, 70vmin, 480px);
    gap: 8px;
  }

  .credit{
    font-size: .72rem;
    bottom: .75rem;
    padding: 0 .5rem env(safe-area-inset-bottom);
    text-align: center;
    max-width: 90vw;
  }
}

@media (max-height: 560px){
  :root{ --stack-size: min(70vmin, 420px); }

  .credit{ display: none; } 
}

@media (max-width: 480px), (max-height: 560px){
  .meteors .meteor:nth-child(n+19){ display: none; }
}

@media (hover: none){
  .logo-front:hover{
    transform: translate(-12px, 0);
  }
}

@media (prefers-contrast: more){
  .progress-track{ backdrop-filter: none; }
}

@media (min-width: 1200px){
  .r4, .r5{ display: block; }
  .ring{ outline: 1px solid rgba(255,255,255,.25); outline-offset: -2px; }
}

@media (max-width: 430px){
  :root{
    --logo-size: clamp(130px, 50vmin, 300px);
    --moon-shift: -2%;
    --mask-r: 44%;
    --mask-feather: 3.5%;
  }

  .logo-back{ 
    width: 100%;
    height: auto;
    transform: translateY(var(--moon-shift)) scale(0.6);
  }

  .logo-front{
    transform: translate(0,0) scale(1.88);
  }
  .logo-front:hover{
    transform: translate(0,0) scale(2.92);
  }
}

@media screen and (max-width: 430px){
  html,body{margin:0;overflow-x:hidden}
  :root{--stack-size:min(72vmin,400px);--logo-size:clamp(170px,54vmin,260px);--moon-shift:-6%;--mask-r:42%;--mask-feather:3.5%;--moon-glow-size:14px}
  .stage{width:100vw;height:100svh;max-width:100vw;max-height:100svh;padding:0;display:grid;place-items:center;overflow:hidden}
  .logo-stack{width:var(--logo-size);margin:0 auto}
  .logo-back{transform:translateY(var(--moon-shift)) scale(.24);object-position:50% 50%}
  .logo-front{transform:translate(0,0) scale(1.2); top: 30px;}
  .logo-front:hover{transform:translate(0,0) scale(.93)}
  .orbits{position:absolute;left:50%;top:55%;width:var(--stack-size);height:var(--stack-size);transform:translate(-50%,-50%)}
  .ring{border-width:1px}
  .r4,.r5{display:none}
  .progress{--progress-width:clamp(220px,86vw,440px);margin:16px auto 10px}
  .credit{position:static;transform:none;text-align:center;font-size:.72rem;margin:8px 0 12px;opacity:.75}
}