/* Layout: una sola columna tipo celular sobre un fondo de espacio continuo (parallax); planetas en zigzag unidos por la ruta del cohete. Diseño de un solo mundo (oscuro) por elección. */
:root{
  --space:#0D1026; --navy:#1B2347; --cream:#F4EFE6; --gold:#D9A441; --coral:#E8806A; --sky:#8EC5E8; --red:#C9353A;
  --acc:#9FD8FF;--glass:rgba(17,22,52,.62); --line:rgba(244,239,230,.22);
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --body:"Quicksand","Avenir Next",system-ui,sans-serif;
  --mono:"Share Tech Mono",ui-monospace,"Courier New",monospace;
  color-scheme:dark;
}
html{background:var(--space)}
body{background:var(--space);color:var(--cream);font-family:var(--body);font-size:16px;line-height:1.55;overflow-x:hidden}
body.kid-nina{--acc:#FFA9BC}
body.locked{overflow:hidden}
body.locked main{visibility:hidden}
[hidden]{display:none!important}
button,a{-webkit-tap-highlight-color:transparent}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none}
img{display:block}

/* ---------- Fondo continuo con parallax ---------- */
#bg{position:fixed;inset:0;overflow:hidden;z-index:0}
#bgImg{position:absolute;left:0;top:0;width:100%;object-fit:cover;will-change:transform}
#bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,16,38,.35),rgba(13,16,38,.55))}

/* ---------- Capa de efectos (chispas, estrellitas) ---------- */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none}

/* ---------- Lanzamiento ---------- */
#launch{position:fixed;inset:0;z-index:50;display:grid;place-items:center;text-align:center;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:radial-gradient(120% 80% at 50% 40%,rgba(13,16,38,.15),rgba(13,16,38,.75));transition:opacity .7s ease}
#launch.gone{opacity:0;pointer-events:none}
.l-col{display:grid;justify-items:center;gap:14px;max-width:420px;transform:translateY(-40px)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--acc)}
.l-name-wrap{position:relative;overflow:hidden;padding:4px 10px 6px}
.l-name{font-family:"Orbitron",var(--display);font-weight:800;font-size:clamp(46px,15vw,76px);line-height:1;margin:0;letter-spacing:-.01em}
.horizon{width:min(78vw,320px);height:2px;background:linear-gradient(90deg,transparent,var(--acc),transparent);transform:scaleX(0)}
.l-sub{font-family:var(--mono);font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);opacity:0}
.l-ask{font-weight:700;font-size:17px;max-width:24ch;margin-top:26px;opacity:0;text-wrap:balance}
.l-ask .l-normal{font-weight:500}
.redbtn{width:116px;height:116px;border-radius:50%;border:0;cursor:pointer;position:relative;opacity:0;margin-top:48px;
  background:radial-gradient(circle at 38% 32%,#FF7A73,#D7323A 45%,#8E1A22 100%);
  box-shadow:0 0 0 9px #2A3058,0 0 0 11px color-mix(in srgb,var(--acc) 70%,transparent),0 10px 0 9px #151935,0 14px 30px rgba(0,0,0,.6),0 0 40px rgba(229,72,77,.45);
  transition:transform .12s ease,box-shadow .12s ease}
.redbtn span{font-family:var(--mono);color:#FFE9E6;font-size:15px;letter-spacing:.2em}
.redbtn:active,.redbtn.pressed{transform:translateY(7px);box-shadow:0 0 0 9px #2A3058,0 0 0 11px color-mix(in srgb,var(--acc) 70%,transparent),0 3px 0 9px #151935,0 6px 16px rgba(0,0,0,.6),0 0 60px rgba(229,72,77,.8)}
.redbtn:focus-visible{outline:3px solid var(--sky);outline-offset:16px}
.redbtn::after{content:"";position:absolute;inset:-22px;border-radius:50%;border:1px solid rgba(229,72,77,.5);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{from{transform:scale(.8);opacity:1}to{transform:scale(1.25);opacity:0}}
#rocket{position:fixed;z-index:61;width:min(44vw,230px);left:-9%;bottom:14%;transform:rotate(-24deg);pointer-events:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
#rocket.shake{animation:shake .08s linear infinite}
@keyframes shake{0%{translate:0 0}25%{translate:2px -1px}50%{translate:-1px 2px}75%{translate:1px 1px}}
#flash{position:fixed;inset:0;z-index:59;background:radial-gradient(circle at 20% 80%,rgba(255,236,200,.9),rgba(255,180,120,.3) 40%,transparent 70%);opacity:0;pointer-events:none}

/* entrada del nombre: se dibuja el horizonte, se escribe el nombre (JS), luego aparecen edad, texto y botón */
.go .horizon{animation:draw .8s cubic-bezier(.6,0,.2,1) forwards}
.ready .l-sub{animation:fade .6s ease forwards}
.ready .l-ask{animation:fade .6s ease .3s forwards}
.ready .redbtn{animation:fade .6s ease .6s forwards}
@keyframes draw{to{transform:scaleX(1)}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Invitación ---------- */
main{position:relative;z-index:1;max-width:460px;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 16px}
#route .rd{animation:tw 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
#route{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:0;overflow:visible}
section{position:relative;z-index:1;padding-block:56px}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--acc);margin:0 0 6px}
h2{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.15;margin:0 0 8px;text-wrap:balance}

.cover{min-height:min(100svh,720px);display:grid;align-content:center;justify-items:center;text-align:center;padding-block:72px 24px;gap:6px}
.cover .label{color:var(--acc)}
.cover-name{font-family:"Orbitron",var(--display);font-weight:800;font-size:clamp(52px,17vw,84px);line-height:.95;margin:0}
.cover-age{font-family:var(--mono);font-size:16px;letter-spacing:.2em;text-transform:uppercase}
.astro{width:min(64vw,260px);margin-top:14px;animation:floaty 6s ease-in-out infinite;filter:drop-shadow(0 26px 22px rgba(5,6,20,.5))}
.cover .mini{position:absolute;width:74px;opacity:.95}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}

.welcome{text-align:center;display:grid;justify-items:center}
.typed{font-size:21px;font-weight:700;line-height:1.45;max-width:22ch;min-height:3em;text-wrap:balance}
.tw-wait{visibility:hidden}
.count .caret{width:3px;margin-left:1px}
.count b{white-space:nowrap}
.tw-ghost{visibility:hidden}
.caret{display:inline-block;width:.55em;height:1.05em;vertical-align:-.15em;background:var(--acc);margin-left:2px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* info sencilla ($200) */
.plain{display:grid;gap:28px;justify-items:center}
.ring{position:relative;width:min(78vw,290px);aspect-ratio:1;border-radius:50%;display:grid;align-content:center;justify-items:center;text-align:center;gap:4px;padding:28px;box-sizing:border-box;
  background:radial-gradient(circle,rgba(17,22,52,.72) 0 60%,rgba(17,22,52,.25) 72%,transparent 73%);box-shadow:0 0 0 1px rgba(220,230,255,.35),0 0 0 14px rgba(220,230,255,.04),0 0 0 15px rgba(220,230,255,.18)}
.ring.r2{justify-self:end;margin-top:-30px}
.plain .ring:first-child{justify-self:start}
.ring .k{font-family:var(--mono);color:var(--acc);letter-spacing:.26em;font-size:12px;text-transform:uppercase;margin-bottom:6px}
.ring .d{font-family:var(--mono);font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:#DCE6FF}
.ring .v{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.2;text-wrap:balance}
.ring .s{font-size:15px;opacity:.85}
.orb{position:absolute;inset:-15px;border-radius:50%;animation:orbit 14s linear infinite}
.r2 .orb{animation-duration:18s;animation-direction:reverse}
.orb i{position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff,0 0 16px #9FD8FF}
@keyframes orbit{to{transform:rotate(360deg)}}

/* planetas ($500) */
.orbit-row{display:grid;grid-template-columns:44% 1fr;gap:12px;align-items:center}
.orbit-row.flip{grid-template-columns:1fr 44%}
.orbit-row.flip .pl{order:2}
.pl{position:relative;width:100%;aspect-ratio:1;max-width:100%}
.pl .spin{position:absolute;inset:0;transform:rotate(var(--r,0deg)) scaleX(var(--sx,1))}
.pl .bob{position:absolute;inset:0;animation:sway var(--t,7s) ease-in-out infinite}
.pl img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 18px rgba(5,6,20,.55))}
.pl{will-change:transform}
.card{box-shadow:0 18px 30px rgba(5,6,20,.45)}
.pl.wide{aspect-ratio:1.4}
@keyframes sway{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-8px) rotate(2.5deg)}}
.glint{position:absolute;inset:0;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
  background:linear-gradient(115deg,transparent 38%,rgba(255,250,230,.75) 50%,transparent 62%) -150% 0/250% 100% no-repeat;animation:glint 6s ease-in-out 2s infinite}
@keyframes glint{0%,70%{background-position:-150% 0}100%{background-position:250% 0}}
.card{background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:14px 16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);min-width:0}
.card p{margin:0}
.card .day{font-family:var(--mono);font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:#DCE6FF}
.card .hour{font-size:15px;opacity:.85}
.card .big{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.3;margin:2px 0 4px}
/* Dónde: "Terraza Quinto Sol" en un solo texto; si es largo, baja a dos renglones parejos sin cortarse */
.card .big.lugar{text-wrap:balance;overflow-wrap:anywhere}
.btn{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font:700 14px var(--body);color:var(--navy);border:0;border-radius:999px;padding:9px 18px;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,#E9ECF3 45%,#C9CFDC 100%);box-shadow:0 0 0 1px rgba(255,255,255,.6) inset,0 0 18px rgba(220,230,255,.45),0 4px 12px rgba(0,0,0,.35)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.95) 50%,transparent 65%) -160% 0/250% 100% no-repeat;animation:glint 5s ease-in-out 1.5s infinite}
.btn:focus-visible,.ghost:focus-visible,.step button:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.ghost{background:rgba(255,255,255,.06);color:#fff;box-shadow:0 0 0 1px rgba(230,236,250,.75) inset,0 0 16px rgba(220,230,255,.3)}

.count{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center;margin-top:6px}
.count b{display:block;font-family:var(--mono);font-size:clamp(18px,5.5vw,24px);font-weight:400;color:var(--cream);font-variant-numeric:tabular-nums;line-height:1.1}
.count small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.board{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:5px;font-size:14.5px}
.board li::before{content:"✦ ";color:var(--acc);text-shadow:0 0 6px var(--acc)}

/* confirmación */
/* columnas minmax(0,…): nada empuja la tarjeta más ancha que la pantalla (se ve completo desde 320 px) */
form{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
label.f{display:grid;gap:4px;font-size:13px;font-weight:700;letter-spacing:.04em}
input[type=text]{font:600 16px var(--body);color:var(--cream);background:rgba(13,16,38,.6);border:1px solid var(--line);border-radius:12px;padding:10px 12px;width:100%;min-width:0;box-sizing:border-box}
input[type=text]:focus{outline:2px solid var(--sky);outline-offset:1px}
/* adultos y niños lado a lado si caben; si no, uno debajo del otro */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px}
.step{display:flex;align-items:center;justify-content:space-between;background:rgba(13,16,38,.6);border:1px solid var(--line);border-radius:12px;padding:6px 8px}
.step span{font-size:13px;font-weight:700}
.step output{font-family:var(--mono);font-size:18px;min-width:1.4em;text-align:center}
.step button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--cream);font-size:18px;line-height:1;cursor:pointer}
.ok{font-weight:700;color:var(--acc);margin:0}
.ok span{display:block;font-weight:600;color:var(--cream)}
.lim{margin:0;font-size:13px;color:var(--acc)}
/* planetas asomados en los anillos del diseño sencillo: eran del paquete 250, que ya no usa ese diseño
   (se quedan por ahora; hoy no salen en ningún caso) */
body:not(.p250) .ring-pl{display:none}
body.p250 .ring{isolation:isolate}   /* así el planeta queda detrás del anillo, no detrás del fondo */
.ring-pl{position:absolute;width:38%;z-index:-1}
.ring-pl-1{top:-14%;right:-9%}
.ring-pl-2{bottom:-10%;left:-18%}
/* paquete 250 (body.p250): el acomodo de planetas de la 550 (con música), sin cuenta regresiva, lista ni formulario */
body.p250 .no250{display:none!important}
body:not(.p250) .solo250{display:none!important}
.confirma250-texto,.confirma-texto{margin-top:8px!important;font-size:14px;font-weight:600}
.confirma-texto{margin-bottom:12px!important}   /* 550: arriba del formulario */
.confirma-texto.ya-respondio{font-size:15px;font-weight:700;color:var(--acc)}   /* "Ya confirmaste: …" */
.confirma250 .ok{margin-top:10px}
/* ya cerraron las confirmaciones (fecha límite): la primera línea del tamaño del título de la tarjeta (h2, 24px) y en
   el color de acento; lo demás, en el texto normal */
.cerrado{display:grid;gap:10px;margin-top:10px}
.cerrado p{text-wrap:balance}
.cerrado-titulo{font-size:24px;line-height:1.3;font-weight:700;color:var(--acc)}
.cerrado-texto{font-weight:600}
.cerrado-ok{font-weight:700}

/* cierre */
.close{text-align:center;display:grid;justify-items:center;gap:10px;padding-bottom:0}
.duo{position:relative;width:100%;height:min(78vw,330px)}
.duo .far{position:absolute;left:8%;top:0;width:min(27vw,112px);filter:drop-shadow(0 18px 18px rgba(0,0,0,.35));animation:floaty 8s ease-in-out infinite}
.duo .near{position:absolute;right:4%;bottom:0;width:min(50vw,210px);filter:drop-shadow(0 26px 22px rgba(0,0,0,.45));animation:floaty 6s ease-in-out -2s infinite}
.stars-text{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.2;margin:6px 0;text-wrap:balance}
.stars-text .w{display:inline-block;white-space:nowrap}
.stars-text .ch{display:inline-block;white-space:pre}
.stars-text.lit .ch{animation:lightup .7s ease both;animation-delay:var(--d)}
@keyframes lightup{0%{opacity:.15;text-shadow:none}40%{opacity:1;color:#fff;text-shadow:0 0 12px #fff,0 0 24px var(--gold)}100%{opacity:1;text-shadow:0 0 8px rgba(217,164,65,.25)}}
.sign{margin-top:34px;display:grid;justify-items:center;gap:6px}
.sign p{margin:0;font-size:13px;color:rgba(244,239,230,.75);white-space:nowrap}
/* logo animado oficial (js/labe-logo.js): el alto del contenedor manda, 47px = los 80px de ancho de antes */
.labe-link{position:relative;display:block}
.labe{display:block;height:47px}
.labe a{border-radius:8px}
.labe a:focus-visible{outline:2px solid var(--sky);outline-offset:4px}
.labe-link .twinkle{position:absolute;right:-20px;top:4px}
.twinkle{width:13px;height:13px;animation:tw 2.4s ease-in-out infinite}
@keyframes tw{0%,100%{transform:scale(.7) rotate(0);opacity:.6}50%{transform:scale(1.15) rotate(45deg);opacity:1;filter:drop-shadow(0 0 5px #fff)}}
.credit{justify-self:end;font-size:9px;opacity:.5;margin:22px 0 0;letter-spacing:.03em}

/* bloques esperando su turno: invisibles (la clase la pone el JS, así sin JS todo se ve) */
.hold{opacity:0;pointer-events:none}

/* niveles */
body.t200 .only500{display:none!important}
body.t500 .only200{display:none!important}

/* música */
#music{position:fixed;z-index:40;top:calc(12px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:var(--cream);cursor:pointer;font-size:17px}
#music[aria-pressed=true]{color:#fff;border-color:rgba(230,236,250,.85);box-shadow:0 0 14px rgba(220,230,255,.5)}

/* vista previa del panel de la mamá: repite el despegue */
#verDespegue{position:fixed;z-index:40;top:calc(12px + env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));
  height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--glass);color:var(--cream);cursor:pointer;
  font:400 11px var(--mono);letter-spacing:.16em;text-transform:uppercase}
#verDespegue:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
html.vista{scrollbar-width:none}
html.vista::-webkit-scrollbar{display:none}

/* panel demo (solo para enseñar el catálogo) */
#demoBtn{position:fixed;z-index:70;bottom:calc(12px + env(safe-area-inset-bottom,0px));left:max(12px,env(safe-area-inset-left,0px));
  font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--space);background:var(--cream);border:0;border-radius:999px;padding:9px 14px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4)}
#demo{position:fixed;z-index:70;bottom:calc(58px + env(safe-area-inset-bottom,0px));left:max(12px,env(safe-area-inset-left,0px));width:min(300px,calc(100vw - 24px));
  background:#F4EFE6;color:#1B2347;border-radius:16px;padding:14px;display:grid;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:13px}
#demo p{margin:0 0 6px;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{font:700 13px var(--body);border:1.5px solid #1B2347;background:transparent;color:#1B2347;border-radius:999px;padding:6px 12px;cursor:pointer}
.seg button[aria-pressed=true]{background:#1B2347;color:#F4EFE6}
.sw{width:38px;height:38px;border-radius:50%;padding:0!important;background-size:cover!important;background-position:center!important}
.sw[aria-pressed=true]{outline:3px solid #D9A441;outline-offset:2px}
.seg .kidsw{width:46px;height:46px;border-radius:12px;padding:3px;background:#1B2347;border-color:#1B2347}
.kidsw img{width:100%;height:100%;object-fit:contain}
.kidsw[aria-pressed=true]{outline:3px solid #D9A441;outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}