:root{
  --bg:#050505;
  --bg-warm:#0A0905;
  --gold:#FFD700;
  --sun:#FFC400;
  --soft:#FFE66D;
  --deep-gold:#B8860B;
  --cream:#FFF9E6;
  --glass:rgba(255,255,255,.07);
  --border:rgba(255,215,0,.30);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--cream);
  background:
    radial-gradient(circle at 50% 15%, rgba(255,196,0,.08), transparent 28%),
    linear-gradient(180deg,#050505,#080703 52%,#050505);
  font-family:"Montserrat",sans-serif;
  overflow-x:hidden;
}

button{font:inherit}
.hidden{display:none!important}
.hidden-page{display:none}
.screen{min-height:100svh}
#starsCanvas{
  position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
}

.intro-screen{
  position:relative; z-index:3;
  display:grid; place-items:center; padding:30px 22px;
  background:radial-gradient(circle at 50% 42%,rgba(255,215,0,.08),transparent 26%);
}
.intro-content{
  text-align:center;
  width:min(680px,100%);
  padding:34px 24px;
}
.eyebrow,.mini-label{
  color:var(--soft);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.76rem;
}
h1,h2,h3{
  font-family:"Playfair Display",serif;
  margin:.25em 0;
}
h1{font-size:clamp(2.1rem,7vw,4.9rem); line-height:1.04}
h2{font-size:clamp(2rem,6vw,4rem)}
h3{font-size:clamp(1.6rem,5vw,2.8rem)}
p{line-height:1.75}
.intro-second{font-size:1.06rem;color:#f6edc8;margin:24px 0}
.gold-btn{
  margin-top:22px; cursor:pointer; border:1px solid var(--gold);
  color:var(--cream); background:rgba(255,215,0,.07);
  border-radius:999px; padding:15px 22px;
  box-shadow:0 0 22px rgba(255,215,0,.18), inset 0 0 15px rgba(255,215,0,.04);
  transition:.25s ease;
}
.gold-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 34px rgba(255,215,0,.34)}

.floating-btn{
  position:fixed; z-index:20; top:18px; right:18px;
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--border);background:rgba(5,5,5,.62);
  color:var(--gold); backdrop-filter:blur(12px); cursor:pointer;
}
.floating-btn.active{box-shadow:0 0 26px rgba(255,215,0,.35)}

.universe-section{
  min-height:145svh; position:relative; z-index:2;
  padding:90px 18px 60px;
  display:flex; flex-direction:column; align-items:center;
}
.universe-copy{text-align:center;max-width:680px}
.soft-copy{color:#d8cfac}
.universe{
  --rx:0deg; --ry:0deg;
  position:relative; margin:32px auto 12px;
  width:min(92vw,650px); aspect-ratio:1/1;
  transform-style:preserve-3d;
  transform:perspective(950px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .18s ease-out;
}
.universe::before{
  content:""; position:absolute; inset:17%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,213,0,.16),rgba(255,196,0,.04) 45%,transparent 68%);
  filter:blur(8px);
}
.sunflower-core{
  position:absolute; z-index:8; left:50%; top:50%;
  width:132px;height:132px;
  transform:translate(-50%,-50%);
  animation:float 5.8s ease-in-out infinite;
  filter:drop-shadow(0 0 25px rgba(255,202,0,.36));
}
.petals{position:absolute;inset:0;animation:slowSpin 34s linear infinite}
.petals span{
  position:absolute;left:50%;top:50%;
  width:28px;height:64px;border-radius:65% 65% 48% 48%;
  background:linear-gradient(#FFE66D,#FFC400 55%,#B8860B);
  transform-origin:50% 100%;
  box-shadow:0 0 14px rgba(255,215,0,.25);
}
.petals span:nth-child(1){transform:translate(-50%,-100%) rotate(0deg)}
.petals span:nth-child(2){transform:translate(-50%,-100%) rotate(22.5deg)}
.petals span:nth-child(3){transform:translate(-50%,-100%) rotate(45deg)}
.petals span:nth-child(4){transform:translate(-50%,-100%) rotate(67.5deg)}
.petals span:nth-child(5){transform:translate(-50%,-100%) rotate(90deg)}
.petals span:nth-child(6){transform:translate(-50%,-100%) rotate(112.5deg)}
.petals span:nth-child(7){transform:translate(-50%,-100%) rotate(135deg)}
.petals span:nth-child(8){transform:translate(-50%,-100%) rotate(157.5deg)}
.petals span:nth-child(9){transform:translate(-50%,-100%) rotate(180deg)}
.petals span:nth-child(10){transform:translate(-50%,-100%) rotate(202.5deg)}
.petals span:nth-child(11){transform:translate(-50%,-100%) rotate(225deg)}
.petals span:nth-child(12){transform:translate(-50%,-100%) rotate(247.5deg)}
.petals span:nth-child(13){transform:translate(-50%,-100%) rotate(270deg)}
.petals span:nth-child(14){transform:translate(-50%,-100%) rotate(292.5deg)}
.petals span:nth-child(15){transform:translate(-50%,-100%) rotate(315deg)}
.petals span:nth-child(16){transform:translate(-50%,-100%) rotate(337.5deg)}
.flower-center{
  position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#80611a,#3c2a05 58%,#130f02);
  box-shadow:inset 0 0 12px #000,0 0 12px rgba(255,215,0,.28);
}
.orbit{
  position:absolute;left:50%;top:50%;
  border:1px solid rgba(255,215,0,.24);
  border-radius:50%;transform:translate(-50%,-50%) rotateX(68deg) rotateZ(-10deg);
  box-shadow:0 0 16px rgba(255,215,0,.08);
}
.orbit-1{width:42%;height:29%}
.orbit-2{width:58%;height:38%;transform:translate(-50%,-50%) rotateX(66deg) rotateZ(15deg)}
.orbit-3{width:72%;height:47%;transform:translate(-50%,-50%) rotateX(70deg) rotateZ(-20deg)}
.orbit-4{width:86%;height:55%;transform:translate(-50%,-50%) rotateX(63deg) rotateZ(8deg)}
.orbit-5{width:98%;height:62%;transform:translate(-50%,-50%) rotateX(71deg) rotateZ(26deg)}

.orbit-item{
  position:absolute;z-index:9;
  width:44px;height:44px;border:0;background:transparent;
  font-size:28px;cursor:pointer;filter:drop-shadow(0 0 7px rgba(255,215,0,.45));
  transition:transform .2s ease,filter .2s ease;
}
.orbit-item:hover,.orbit-item:focus{transform:scale(1.25);filter:drop-shadow(0 0 16px rgba(255,230,109,.8))}
.orbit-item.discovered{opacity:.55}

.discovery-bar{
  z-index:4;margin-top:10px;padding:9px 16px;border:1px solid rgba(255,215,0,.14);
  border-radius:999px;background:rgba(255,255,255,.035);backdrop-filter:blur(9px);
  color:#eaddaa;font-size:.82rem;
}
.special-flower-btn{
  z-index:5;margin-top:18px;border:0;background:transparent;color:var(--soft);
  cursor:pointer;font-weight:600;text-shadow:0 0 14px rgba(255,215,0,.6);
  animation:pulse 2s ease-in-out infinite;
}
.scroll-hint{margin-top:auto;padding-top:80px;color:#8f896f;font-size:.78rem}

.secret-flower{
  position:absolute;z-index:9;left:9%;top:76%;border:0;background:none;
  font-size:17px;opacity:.35;cursor:pointer;transform:rotate(-18deg)
}
.secret-flower:hover{opacity:1}
.shooting-star{
  position:absolute;z-index:10;right:-10%;top:18%;border:0;background:none;
  font-size:25px;cursor:pointer;animation:shooting 8s linear infinite;
}

.garden-section{
  min-height:100svh;position:relative;z-index:2;overflow:hidden;
  display:grid;place-items:center;padding:70px 20px 120px;
  background:
    radial-gradient(circle at 70% 20%,rgba(230,238,255,.08),transparent 18%),
    linear-gradient(#06070b 0%,#080a0d 60%,#0a1007 100%);
}
.garden-content{position:relative;z-index:5;text-align:center;width:min(900px,100%)}
.garden-sky{position:absolute;inset:0}
.moon{
  position:absolute;right:11%;top:10%;width:72px;height:72px;border-radius:50%;
  background:#f5efcb;box-shadow:0 0 35px rgba(255,249,230,.18);
}
.moon::after{content:"";position:absolute;width:68px;height:68px;left:-16px;top:-7px;border-radius:50%;background:#08090d}
.garden-flowers{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin:42px auto}
.garden-flower{
  border:0;background:transparent;font-size:54px;cursor:pointer;
  transition:.25s ease;filter:grayscale(.25) drop-shadow(0 0 6px rgba(255,215,0,.2));
}
.garden-flower:hover{transform:translateY(-5px) scale(1.08)}
.garden-flower.open{filter:drop-shadow(0 0 18px rgba(255,215,0,.55))}
.garden-word{display:block;font-size:.72rem;color:#e9ddae;margin-top:4px}
.garden-result{min-height:40px;color:var(--soft);font-family:"Playfair Display",serif;font-size:1.25rem}
.grass{
  position:absolute;left:-10%;right:-10%;bottom:-65px;height:160px;
  background:repeating-linear-gradient(82deg,#071006 0 6px,#0d1708 7px 11px);
  filter:blur(.3px);
}
.firefly{
  position:absolute;width:4px;height:4px;border-radius:50%;background:#ffe783;
  box-shadow:0 0 10px #ffd700;animation:firefly 6s ease-in-out infinite;
}

.message-section,.final-section{
  position:relative;z-index:2;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:85px 24px;
}
.fade-line{max-width:720px;color:#cfc7aa;margin:12px 0}
.fade-line.emphasis,.fade-line.big,.final-section .big{color:var(--cream)}
.fade-line.big{font-family:"Playfair Display",serif;font-size:clamp(1.6rem,4.5vw,3rem)}
.final-section{gap:4px;background:radial-gradient(circle at center,rgba(255,215,0,.055),transparent 30%)}
.final-section p{max-width:720px;color:#d5ccad}
.final-flower{font-size:86px;filter:drop-shadow(0 0 26px rgba(255,215,0,.35));animation:float 5s ease-in-out infinite}
.final-question{
  color:var(--soft)!important;font-family:"Playfair Display",serif;
  font-size:clamp(2.1rem,8vw,5rem);margin:22px 0 4px!important;
}
.final-section small{color:#8d876f}

.modal{
  position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(12px);
}
.modal-card{
  width:min(92vw,620px);position:relative;padding:32px 25px;border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.035));
  border:1px solid rgba(255,215,0,.24);
  box-shadow:0 30px 100px rgba(0,0,0,.55),0 0 45px rgba(255,215,0,.08);
  text-align:center;
}
.modal-close{
  position:absolute;right:12px;top:8px;border:0;background:none;color:#fff;
  font-size:28px;cursor:pointer;
}
.modal-title{font-family:"Playfair Display",serif;color:var(--soft);font-size:1.8rem}
.modal-text{color:#eee3be}
.loading-bar{height:8px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin:18px 0}
.loading-fill{height:100%;width:0;background:linear-gradient(90deg,#b8860b,#ffd700,#ffe66d)}

.petal-rain{
  position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden;
}
.petal{
  position:absolute;top:-12%;font-size:22px;animation:fall linear forwards;
}

@keyframes float{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-12px)}}
@keyframes slowSpin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{transform:scale(1.05);filter:brightness(1.25)}}
@keyframes shooting{
  0%,60%{transform:translate(0,0) rotate(-20deg);opacity:0}
  64%{opacity:1}
  78%{transform:translate(-520px,300px) rotate(-20deg);opacity:1}
  80%,100%{opacity:0}
}
@keyframes firefly{0%,100%{transform:translate(0,0);opacity:.15}30%{transform:translate(20px,-28px);opacity:1}65%{transform:translate(-18px,-10px);opacity:.5}}
@keyframes fall{to{transform:translate(var(--drift),115vh) rotate(720deg);opacity:.2}}

@media (max-width:650px){
  .universe-section{min-height:130svh;padding-top:82px}
  .universe{width:112vw;margin-left:-6vw}
  .sunflower-core{width:104px;height:104px}
  .petals span{width:22px;height:50px}
  .flower-center{width:58px;height:58px}
  .orbit-item{width:38px;height:38px;font-size:24px}
  .universe-copy{padding:0 8px}
  .moon{width:55px;height:55px}
  .moon::after{width:52px;height:52px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* =====================================================
   RESPONSIVE V2 — UNIVERSO GRANDE + TOUCH FRIENDLY
   Estas reglas van al final para sobrescribir la versión base.
   ===================================================== */

.universe{
  width:min(94vw,760px);
  height:min(72vw,650px);
  min-height:520px;
  aspect-ratio:auto;
  margin:28px auto 12px;
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  isolation:isolate;
  touch-action:pan-y;
}

.orbit-item{
  width:56px;
  height:56px;
  min-width:56px;
  min-height:56px;
  padding:0;
  border:1px solid transparent;
  border-radius:50%;
  background:rgba(5,5,5,.01);
  display:grid;
  place-items:center;
  font-size:31px;
  line-height:1;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:filter .2s ease,opacity .2s ease;
}

.orbit-item:hover,
.orbit-item:focus-visible{
  filter:drop-shadow(0 0 18px rgba(255,230,109,.9));
  outline:1px solid rgba(255,230,109,.32);
}

.secret-flower{
  z-index:12;
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:21px;
  touch-action:manipulation;
}

.shooting-star{
  z-index:12;
  right:-2%;
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:29px;
  touch-action:manipulation;
}

.garden-flower{
  width:76px;
  height:76px;
  border-radius:50%;
  display:grid;
  place-items:center;
  touch-action:manipulation;
}

@media (max-width:700px){
  body{overscroll-behavior-y:none}

  .universe-section{
    min-height:150svh;
    padding:72px 10px 54px;
    overflow:hidden;
  }

  .universe-copy{
    padding:0 12px;
    max-width:520px;
  }

  .universe-copy h2{font-size:clamp(2rem,10vw,3.2rem)}
  .universe-copy p{font-size:.95rem}

  .universe{
    width:100vw;
    height:min(74svh,720px);
    min-height:560px;
    max-height:720px;
    margin:16px calc(50% - 50vw) 8px;
    overflow:visible;
    transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  }

  .universe::before{inset:22% 14%}

  .sunflower-core{
    width:142px;
    height:142px;
  }

  .petals span{
    width:29px;
    height:67px;
  }

  .flower-center{
    width:76px;
    height:76px;
  }

  .orbit-1{width:49%;height:30%}
  .orbit-2{width:66%;height:43%}
  .orbit-3{width:80%;height:55%}
  .orbit-4{width:91%;height:67%}
  .orbit-5{width:98%;height:78%}

  .orbit-item{
    width:60px;
    height:60px;
    min-width:60px;
    min-height:60px;
    font-size:33px;
  }

  .orbit-item::after{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:50%;
  }

  .discovery-bar{
    margin-top:4px;
    font-size:.86rem;
    padding:11px 16px;
    position:sticky;
    bottom:12px;
    z-index:15;
    box-shadow:0 8px 30px rgba(0,0,0,.35);
  }

  .special-flower-btn{
    min-height:52px;
    padding:10px 14px;
    font-size:.95rem;
  }

  .secret-flower{
    left:5%;
    top:79%;
    width:58px;
    height:58px;
    font-size:24px;
  }

  .shooting-star{
    right:1%;
    width:64px;
    height:64px;
    font-size:31px;
  }

  .scroll-hint{padding-top:40px}

  .garden-section{
    padding-left:14px;
    padding-right:14px;
  }

  .garden-flowers{
    gap:12px 10px;
    margin:30px auto;
  }

  .garden-flower{
    width:70px;
    height:70px;
    font-size:48px;
  }

  .modal{padding:12px}

  .modal-card{
    width:min(96vw,620px);
    max-height:88svh;
    overflow:auto;
    padding:30px 20px 24px;
  }

  .modal-close{
    width:48px;
    height:48px;
    right:4px;
    top:2px;
  }

  .gold-btn{
    min-height:50px;
    padding:14px 20px;
  }

  .floating-btn{
    width:50px;
    height:50px;
    top:max(12px,env(safe-area-inset-top));
    right:12px;
  }

  .moon{width:55px;height:55px}
  .moon::after{width:52px;height:52px}
}

@media (max-width:390px){
  .universe{
    height:min(72svh,650px);
    min-height:520px;
  }

  .sunflower-core{
    width:124px;
    height:124px;
  }

  .petals span{
    width:25px;
    height:58px;
  }

  .flower-center{
    width:68px;
    height:68px;
  }

  .orbit-item{
    width:56px;
    height:56px;
    min-width:56px;
    min-height:56px;
    font-size:30px;
  }

  .universe-copy p{font-size:.9rem}
}

@media (min-width:701px) and (max-height:760px){
  .universe{
    height:560px;
    width:min(86vw,720px);
  }
  .universe-section{padding-top:70px}
}