/* ===== Resonancia Armónica · Grabador OM ===== */
:root{
  --bg-0:#08050f; --bg-1:#160b30; --bg-2:#25143f;
  --violet:#2a1a52; --magenta:#c77dff; --blue:#6db3ff;
  --gold:#ffd98b; --gold-hi:#fff6de; --gold-deep:#e8a94b;
  --text:#f3ecff; --dim:#b6a6d8; --faint:#8677a6;
  --ok:var(--gold); --tune:var(--blue);
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:'Cormorant',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--sans); color:var(--text);
  background:
    radial-gradient(120% 90% at 50% 12%, #1d0f3e 0%, var(--bg-1) 42%, var(--bg-0) 100%);
  overflow:hidden; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}

/* estrellas ambientales */
#stars{position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff8, transparent),
    radial-gradient(1px 1px at 75% 18%, #fff6, transparent),
    radial-gradient(1px 1px at 40% 70%, #fff5, transparent),
    radial-gradient(1.5px 1.5px at 88% 62%, #cfe6ff8c, transparent),
    radial-gradient(1px 1px at 62% 88%, #fff4, transparent),
    radial-gradient(1px 1px at 12% 82%, #fff5, transparent),
    radial-gradient(1.5px 1.5px at 30% 50%, #e9d5ff70, transparent);
  animation:twinkle 7s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.55}50%{opacity:.95}}

/* ===== escenas ===== */
#app{position:relative; z-index:1; height:100%; height:100dvh}
.scene{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:max(28px,env(safe-area-inset-top)) 26px max(28px,env(safe-area-inset-bottom));
  opacity:0; visibility:hidden; transform:translateY(10px);
  /* salida rápida: la escena que se va desaparece antes de que entre la siguiente */
  transition:opacity .28s ease, transform .28s ease, visibility .28s;
}
/* escenas de contenido: fondo cósmico opaco (ocluyen limpio durante la transición) */
.scene:not(.imgscene){
  background:radial-gradient(125% 92% at 50% 14%, #1d0f3e 0%, var(--bg-1) 46%, var(--bg-0) 100%);
}
.scene.active{opacity:1; visibility:visible; transform:none;
  /* entrada con retardo: espera a que la anterior ya se haya ido */
  transition:opacity .6s var(--ease) .26s, transform .7s var(--ease) .26s, visibility .6s .26s}
.wrap{width:100%; max-width:460px; display:flex; flex-direction:column; gap:18px}
.wrap.center{align-items:center; text-align:center}

/* ===== tipografía ===== */
.eyebrow{font-size:12.5px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); font-weight:600; opacity:.85}
.display{font-family:var(--serif); font-weight:400; line-height:1.05;
  font-size:clamp(34px,10vw,52px); letter-spacing:.005em; color:var(--text)}
.lead{font-size:16.5px; line-height:1.55; color:var(--dim); font-weight:350}
.lead.soft{color:#e7dcff; opacity:.9}
.lead b{color:var(--text); font-weight:600}
.fineprint{font-size:13px; color:var(--faint); line-height:1.5}

/* pasos */
.steps{list-style:none; display:flex; flex-direction:column; gap:14px; margin:4px 0}
.steps li{position:relative; padding-left:26px; font-size:15.5px; line-height:1.5; color:var(--dim)}
.steps b{color:var(--text); font-weight:600}
.stepdot{position:absolute; left:0; top:8px; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold-deep));
  box-shadow:0 0 10px var(--gold)}

/* ===== botones ===== */
.btn{appearance:none; border:0; cursor:pointer; font-family:var(--sans);
  font-size:16.5px; font-weight:600; letter-spacing:.01em;
  padding:16px 26px; border-radius:100px; width:100%; margin-top:4px;
  transition:transform .2s var(--ease), box-shadow .3s, filter .2s, opacity .3s;}
.btn.sm{padding:13px 22px; font-size:15px}
.btn:active{transform:scale(.97)}
.btn.primary{color:#2a1500;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold) 55%,var(--gold-deep));
  box-shadow:0 6px 28px -6px var(--gold-deep), 0 0 0 1px #ffffff22 inset;}
.btn.primary:hover{filter:brightness(1.06); box-shadow:0 8px 40px -6px var(--gold)}
.btn.ghost{color:var(--text); background:#ffffff0a;
  border:1px solid #ffffff26; backdrop-filter:blur(6px);}
.btn.ghost:hover{background:#ffffff14}
.btn.ghost.on{color:var(--gold); border-color:var(--gold); background:#ffd98b12}

/* ===== SPLASH / DONE ===== */
.splash{padding:0}
.splash-img{position:absolute; inset:0; background-size:cover; background-position:center 30%;
  animation:slowzoom 18s ease-out forwards}
@keyframes slowzoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.splash-veil{position:absolute; inset:0;
  background:linear-gradient(180deg, #08050f2e 0%, #08050f14 24%, #08050f99 58%, #08050fee 86%, var(--bg-0) 100%)}
.splash-text{position:relative; z-index:2; text-align:center; padding:0 28px 12vh;
  margin-top:auto; display:flex; flex-direction:column; gap:14px; align-items:center}
.splash .eyebrow{animation:fadeup 1.2s var(--ease) .3s both}
.splash .display{animation:fadeup 1.4s var(--ease) .7s both}
.splash .lead{animation:fadeup 1.4s var(--ease) 1.1s both}
.splash-btn{margin-top:20px; max-width:290px; animation:fadeup 1.4s var(--ease) 1.6s both}
@keyframes fadeup{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}

/* ===== ESFERA DE RESONANCIA ===== */
.scene-orb{justify-content:space-between; padding-top:max(48px,env(safe-area-inset-top))}
.orb-stage{flex:1; display:flex; align-items:center; justify-content:center; width:100%}
@property --bloom{ syntax:'<number>'; initial-value:0; inherits:true; }
.orb{position:relative; width:min(64vw,270px); aspect-ratio:1;
  --energy:0; --bloom:0;
  transform:scale(calc(1 + var(--energy)*.14));
  transition:transform .12s linear, --bloom 1s var(--ease)}   /* florecer lento y sereno */
.orb-core{position:absolute; inset:22%; border-radius:50%;
  background:radial-gradient(circle at 46% 40%,
     var(--gold-hi) 0%, var(--gold) 18%, #ffcf7a 34%,
     color-mix(in srgb, var(--gold) calc(var(--bloom)*100%), var(--blue)) 62%,
     transparent 78%);
  box-shadow:0 0 60px 6px color-mix(in srgb, var(--gold) calc(var(--bloom)*90%), #4f7bd0),
             0 0 140px 30px color-mix(in srgb, var(--gold) calc(var(--bloom)*70%), #2c3f7a);
  filter:brightness(calc(.8 + var(--energy)*.6 + var(--bloom)*.5));
  animation:breathe 5.5s var(--ease) infinite;
  transition:box-shadow 1.1s ease, filter .8s ease}
.orb-halo{position:absolute; inset:-14%; border-radius:50%;
  background:radial-gradient(circle,
     color-mix(in srgb, var(--gold) calc(var(--bloom)*100%), #5f8ad8) 0%,
     transparent 62%);
  opacity:calc(.32 + var(--energy)*.4 + var(--bloom)*.35);
  filter:blur(14px); transition:opacity .9s ease; animation:breathe 5.5s var(--ease) infinite}
.orb-rays{position:absolute; inset:-30%; border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0deg,#ffe6ad55 6deg,transparent 12deg,transparent 40deg,
    #bcd6ff44 46deg,transparent 52deg,transparent 84deg,#ffe6ad44 90deg,transparent 96deg,
    transparent 130deg,#bcd6ff33 136deg,transparent 142deg,transparent 176deg,
    #ffe6ad44 182deg,transparent 188deg,transparent 220deg,#bcd6ff44 226deg,transparent 232deg,
    transparent 270deg,#ffe6ad44 276deg,transparent 282deg,transparent 316deg,
    #bcd6ff44 322deg,transparent 328deg);
  opacity:calc(.14 + var(--energy)*.5 + var(--bloom)*.4);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);
          mask:radial-gradient(circle,#000 30%,transparent 70%);
  animation:spin 40s linear infinite; transition:opacity .3s}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes spin{to{transform:rotate(360deg)}}

.orb.in-tune{--bloom:1}
.orb.in-tune .orb-core{animation:bloom-pulse 2.2s var(--ease) infinite}
@keyframes bloom-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* anillo de conteo */
.orb-ring{position:absolute; inset:-4%; width:108%; height:108%; transform:rotate(-90deg)}
.ring-track{fill:none; stroke:#ffffff1a; stroke-width:3}
.ring-fill{fill:none; stroke:var(--gold); stroke-width:3.5; stroke-linecap:round;
  filter:drop-shadow(0 0 6px var(--gold));
  stroke-dasharray:578; stroke-dashoffset:578; opacity:0; transition:opacity .3s}
.orb-ring.armed .ring-fill{opacity:1}

/* número de conteo */
.orb-num{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:clamp(74px,27vw,126px); font-weight:400; line-height:1; color:var(--gold-hi);
  text-shadow:0 0 44px var(--gold), 0 0 14px #ffffffaa; opacity:0; pointer-events:none}
.orb-num.pop{animation:numpop 1s var(--ease)}
@keyframes numpop{
  0%{opacity:0; transform:translateY(-4%) scale(.5)}
  24%{opacity:1; transform:translateY(-4%) scale(1)}
  70%{opacity:1; transform:translateY(-4%) scale(1)}
  100%{opacity:0; transform:translateY(-4%) scale(1.12)}
}

/* caption bajo la esfera */
.orb-caption{text-align:center; min-height:74px; display:flex; flex-direction:column;
  gap:6px; justify-content:center; padding:0 10px}
.tune-msg{font-family:var(--serif); font-size:26px; font-weight:500; color:var(--text);
  transition:color .4s}
.tune-msg.good{color:var(--gold)}
.tune-msg.rec{color:#ffd0d0}
.tune-sub{font-size:14px; color:var(--dim); line-height:1.45}
.orb-controls{width:100%; max-width:420px; display:flex; flex-direction:column; gap:12px;
  padding-bottom:8px}

/* ícono de meditación — aparece sereno solo cuando estás en sintonía */
.med-wrap{max-height:0; opacity:0; overflow:hidden; transform:translateY(8px) scale(.9);
  transition:max-height .9s var(--ease), opacity .9s var(--ease), transform .9s var(--ease)}
.med-wrap.show{max-height:104px; opacity:1; transform:none}
.med-icon{width:74px; height:auto; display:block; margin:0 auto 4px;
  filter:drop-shadow(0 0 9px rgba(255,217,139,.6))}
.med-body{fill:var(--gold)}
.med-aura{fill:var(--gold); opacity:.15; transform-origin:60px 56px}
.med-wrap.show .med-aura{animation:medbreath 4.5s var(--ease) infinite}
@keyframes medbreath{0%,100%{opacity:.1; transform:scale(.94)} 50%{opacity:.22; transform:scale(1.06)}}

.take-badge{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  padding:8px 16px; border:1px solid #ffffff1c; border-radius:100px; background:#ffffff08}
.take-badge span{color:var(--gold); font-weight:600}

/* ===== REVIEW ===== */
.check{font-size:44px; color:var(--gold); text-shadow:0 0 30px var(--gold); text-align:center}
.dots{display:flex; gap:12px; justify-content:center; margin:2px 0 6px}
.dots i{width:11px; height:11px; border-radius:50%; background:#ffffff1f; transition:.4s}
.dots i.filled{background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold-deep));
  box-shadow:0 0 12px var(--gold)}
.review .wrap,.scene[data-scene=review] .wrap{align-items:center; text-align:center}

/* ===== FORM ===== */
#datos{display:flex; flex-direction:column; gap:14px}
#datos label{display:flex; flex-direction:column; gap:7px; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:600}
#datos input{font-family:var(--sans); font-size:17px; color:var(--text);
  background:#ffffff0c; border:1px solid #ffffff20; border-radius:14px;
  padding:15px 16px; transition:border-color .25s, background .25s;
  text-transform:none; letter-spacing:normal}
#datos input:focus{outline:none; border-color:var(--gold); background:#ffd98b0f}
#datos input.bad{border-color:#ff9a9a}
#form-err{color:#ffb3b3; text-align:left}

/* ===== barra de subida ===== */
.orb.mini{width:88px; height:88px; margin:0 auto 6px}
.orb.mini .orb-core{inset:16%; animation:breathe 3s var(--ease) infinite}
.bar{width:100%; max-width:320px; height:8px; border-radius:100px; background:#ffffff14; overflow:hidden}
.bar-fill{height:100%; width:0; border-radius:100px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));
  box-shadow:0 0 14px var(--gold); transition:width .3s var(--ease)}
.center .display{text-align:center}
.uploading .wrap,.scene[data-scene=uploading] .wrap{gap:22px}

/* ===== enlace + panel "qué haremos con tu voz" ===== */
.link{color:var(--gold); cursor:pointer; border-bottom:1px solid #ffd98b55; font-weight:600; white-space:nowrap}
.link:hover{border-bottom-color:var(--gold)}
.form .lead,.scene[data-scene=form] .lead{font-size:15px; margin-top:-4px}
.modal{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:22px}
.modal[hidden]{display:none}
.modal-veil{position:absolute; inset:0; background:#05030cbb; backdrop-filter:blur(6px); animation:fade .3s}
.modal-card{position:relative; z-index:1; width:100%; max-width:440px; max-height:88vh; overflow-y:auto;
  background:radial-gradient(130% 90% at 50% 0%, #241546, #140a2c 72%);
  border:1px solid #ffffff20; border-radius:22px; padding:30px 26px 26px; text-align:center;
  box-shadow:0 30px 80px -18px #000; animation:cardin .45s var(--ease)}
.modal-card .med-icon{width:64px; height:auto; margin:0 auto 10px; display:block;
  filter:drop-shadow(0 0 10px rgba(255,217,139,.6))}
.modal-card h3{font-size:clamp(25px,7vw,31px); margin-bottom:14px; line-height:1.1}
.modal-card p{font-size:15.5px; line-height:1.6; color:var(--dim); margin-bottom:14px}
.modal-card b{color:var(--text)}
.priv-list{list-style:none; text-align:left; display:flex; flex-direction:column; gap:12px; margin:0 0 16px}
.priv-list li{font-size:15px; line-height:1.5; color:var(--dim); padding-left:17px; position:relative}
.priv-list li::before{content:''; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold-deep)); box-shadow:0 0 8px var(--gold)}
.priv-gift{background:#ffd98b0f; border:1px solid #ffd98b2e; border-radius:14px;
  padding:14px 16px!important; color:#e7dcff!important; margin-bottom:20px!important; font-size:15px!important}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes cardin{from{opacity:0; transform:translateY(20px) scale(.96)}to{opacity:1; transform:none}}

/* ===== medidor de calibración (prueba, acceso ?calibrar) ===== */
.scene[data-scene=calibrar] .wrap{gap:10px}
.cal-note{font-family:var(--serif); font-size:66px; line-height:1; color:var(--gold-hi); text-shadow:0 0 30px var(--gold)}
.cal-hz{font-size:15px; color:var(--dim); min-height:20px}
.cal-meter{position:relative; width:100%; max-width:420px; height:96px; margin:8px auto 2px;
  background:#ffffff08; border-radius:14px; border:1px solid #ffffff18; overflow:hidden}
.cal-zone{position:absolute; top:0; bottom:0; left:30%; right:30%;
  background:#7be0a41c; border-left:2px solid #7be0a4aa; border-right:2px solid #7be0a4aa}
.cal-mark{position:absolute; bottom:8px; font-size:11px; color:var(--faint); transform:translateX(-50%); white-space:nowrap}
.cal-mark-c{left:50%; color:var(--gold); font-weight:600}
.cal-mark-l{left:30%} .cal-mark-r{left:70%}
.cal-needle{position:absolute; top:8px; bottom:8px; width:3px; left:50%; margin-left:-1.5px;
  background:var(--gold-hi); box-shadow:0 0 12px var(--gold); border-radius:2px;
  transition:left .07s linear, background .2s}
.cal-status{font-size:19px; font-weight:600; margin:6px 0 2px; min-height:24px}
.cal-diag{font-size:12px; color:var(--faint); font-family:ui-monospace,monospace; min-height:16px}

/* ===== accesibilidad / reduced motion ===== */
.btn:focus-visible,input:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important; animation-iteration-count:1!important}
  .scene{transition:opacity .3s}
  .orb-core,.orb-halo{animation:none}
}
@media (max-height:680px){
  .display{font-size:clamp(28px,8vw,40px)}
  .orb{width:min(52vw,210px)}
  .steps li{font-size:14.5px}
}