/* Baby shower · Oh Baby — cielo pastel, nubes, globos y cubos ABC */
:root{
  --sky:#bfe3f7;--sky2:#e6f5fd;--blue:#8cc8ec;--blue-d:#4d97c9;--cream:#fffaf0;--yellow:#ffe7a3;--peach:#ffc9b5;--mint:#c7e8d5;--lila:#d9ccf5;
  --ink:#2e4a6b;--mut:#5e7894;
  --ph-bg:linear-gradient(135deg,#d7eefb,#fbe3d6);--ph-ink:#4d97c9;
  --music-bg:var(--blue-d);--music-ink:#fff;
}
body{background:linear-gradient(180deg,var(--sky) 0%,var(--sky2) 60%,#fff6ec 100%) fixed;color:var(--ink);font:400 17px/1.6 "Fredoka",system-ui,sans-serif}
main{position:relative;z-index:2}

/* ---------- Cielo ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.night{position:absolute;inset:0;background:linear-gradient(180deg,#1e2d5c,#48578f 60%,#8a7fb8);opacity:calc(max(0, var(--sp,0) - .72) * 3.6);transition:opacity .3s}
.night::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#fff 0 1px,transparent 1.6px) 0 0/70px 60px,radial-gradient(circle,#fff 0 1.2px,transparent 2px) 30px 25px/110px 90px;animation:twinkle 3s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.4}}
.sun{position:absolute;top:-60px;left:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#fff6c9 0 40%,rgba(255,231,163,.5) 55%,transparent 70%);animation:breathe 6s ease-in-out infinite;opacity:calc(1 - var(--sp,0) * 1.3)}
@keyframes breathe{50%{transform:scale(1.08)}}
.cloud{position:absolute;width:var(--w);height:calc(var(--w) * .32);border-radius:999px;background:#fff;opacity:.92;filter:drop-shadow(0 10px 14px rgba(77,151,201,.18));animation:drift var(--t) linear infinite;animation-delay:var(--dl)}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:48%;height:150%;left:14%;bottom:20%}
.cloud::after{width:36%;height:115%;right:14%;bottom:30%}
.c1{--w:180px;--t:48s;--dl:-10s;top:12%}
.c2{--w:120px;--t:36s;--dl:-25s;top:32%;opacity:.75}
.c3{--w:240px;--t:64s;--dl:-40s;top:58%}
.c4{--w:90px;--t:30s;--dl:-5s;top:78%;opacity:.7}
.c5{--w:150px;--t:52s;--dl:-33s;top:4%;opacity:.6}
@keyframes drift{from{transform:translateX(-300px)}to{transform:translateX(calc(100vw + 300px))}}
.pop-cv{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

/* ---------- Intro: caja ---------- */
.gate{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:20px;background:radial-gradient(circle at 50% 45%,#fff,#d7eefb 70%);transition:opacity .8s}
.gate-k{font:600 1.5rem "Playpen Sans",cursive;color:var(--blue-d)}
.box{position:relative;width:170px;height:170px;margin-top:40px;animation:wig 2s ease-in-out infinite}
@keyframes wig{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-5deg)}80%{transform:rotate(5deg)}85%{transform:rotate(-4deg)}90%{transform:rotate(2deg)}}
.base{position:absolute;left:10px;right:10px;bottom:0;height:120px;border-radius:10px;background:linear-gradient(90deg,transparent 42%,var(--yellow) 42% 58%,transparent 58%),var(--blue);box-shadow:inset -14px -10px 0 rgba(0,0,0,.06),0 16px 30px rgba(77,151,201,.3)}
.lid{position:absolute;left:0;right:0;top:20px;height:38px;border-radius:10px;z-index:2;background:linear-gradient(90deg,transparent 42%,var(--yellow) 42% 58%,transparent 58%),#7dbde6;box-shadow:0 6px 0 rgba(0,0,0,.06);transition:transform .9s cubic-bezier(.3,1.4,.5,1),opacity .9s}
.bow{position:absolute;left:50%;top:-30px;width:70px;height:36px;margin-left:-35px}
.bow::before,.bow::after{content:"";position:absolute;top:0;width:34px;height:32px;border:9px solid var(--yellow);border-radius:50% 50% 10% 50%}
.bow::before{left:0;transform:rotate(-20deg)}
.bow::after{right:0;transform:scaleX(-1) rotate(-20deg)}
.balloons-in{position:absolute;left:50%;bottom:60px;z-index:1}
.balloons-in i{position:absolute;left:var(--x);bottom:0;width:44px;height:54px;margin-left:-22px;border-radius:50% 50% 48% 52%/55% 55% 45% 45%;background:radial-gradient(circle at 32% 30%,#fff9 0 12%,transparent 30%),var(--c);opacity:0}
.balloons-in i::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:60px;background:#9bb}
.gate-guest{color:var(--mut)}
.gate-guest b{color:var(--ink)}
.gate-btn{border:0;padding:15px 32px;border-radius:99px;background:var(--blue-d);color:#fff;font:600 1.15rem "Fredoka";box-shadow:0 6px 0 #2f6f9b,0 14px 30px rgba(77,151,201,.35);animation:bounceB 1.6s ease-in-out infinite}
@keyframes bounceB{50%{transform:translateY(-6px)}}
.gate.open .box{animation:none}
.gate.open .lid{transform:translate(60px,-160px) rotate(40deg);opacity:0}
.gate.open .balloons-in i{animation:fly 1.8s cubic-bezier(.3,.6,.5,1) forwards;animation-delay:var(--d)}
@keyframes fly{0%{opacity:1;transform:translateY(40px) scale(.5)}100%{opacity:1;transform:translate(calc(var(--x) * 1.8),-110vh) scale(1.1) rotate(8deg)}}
.gate.fade{opacity:0}

/* ---------- Portada ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 18px;position:relative}
.hab{width:150px;height:216px;position:relative;animation:float 5s ease-in-out infinite;margin-bottom:10px}
.hab svg{width:100%;height:100%}
.hab .pic{position:absolute;inset:0;background:none;z-index:1}
.hab .pic img{object-fit:contain}
.hab:has(.pic.loaded) svg{display:none}
@keyframes float{50%{translate:0 -14px;rotate:3deg}}
.hero-k{font:600 1.8rem "Playpen Sans",cursive;color:var(--blue-d);transform:rotate(-3deg)}
.blocks{display:flex;gap:6px;justify-content:center;margin:12px 0 14px;perspective:600px}
.blk{width:clamp(46px,13vw,72px);aspect-ratio:1;display:grid;place-items:center;border-radius:12px;font:700 clamp(1.8rem,8vw,2.8rem) "Fredoka";color:#fff;background:var(--c);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.55),inset -6px -8px 0 rgba(0,0,0,.08),0 8px 0 var(--s),0 14px 20px rgba(46,74,107,.18);cursor:pointer;
  animation:dropB .9s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(.35s + var(--k) * .12s);text-shadow:0 2px 0 var(--s)}
.blk:nth-child(odd){rotate:-4deg}.blk:nth-child(even){rotate:3deg}
@keyframes dropB{from{transform:translateY(-70vh) rotate(90deg);opacity:0}}
.blk.hop{animation:hop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{40%{transform:translateY(-26px) rotate(-12deg)}}
html.locked .blk{animation-play-state:paused}
.hero-sub{font-size:1.15rem;color:var(--mut);max-width:320px}
.hero-date{margin-top:16px;padding:10px 20px;border-radius:99px;background:#fff;font-weight:600;color:var(--blue-d);box-shadow:0 8px 20px rgba(77,151,201,.2)}
.guest{margin-top:14px;font:600 1.15rem "Playpen Sans",cursive;color:var(--ink)}
.tip{margin-top:26px;font-size:.85rem;color:var(--mut);animation:bounceB 2s ease-in-out infinite}

/* ---------- Secciones ---------- */
.sec{max-width:760px;margin:0 auto;padding:70px 20px;text-align:center}
.title{font:700 clamp(2rem,8.5vw,3rem)/1.1 "Fredoka";color:var(--blue-d);margin-bottom:22px;text-shadow:0 3px 0 #fff}
.lead{max-width:540px;margin:0 auto;color:var(--mut);font-size:1.08rem}
.small{font-size:.9rem;color:var(--mut);margin-top:12px}

.family{position:relative;width:min(70vw,260px);aspect-ratio:1;margin:0 auto 26px}
.stitch{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 8px #fff,0 18px 40px rgba(77,151,201,.3)}
.stitch::before{content:"";position:absolute;inset:8px;border-radius:50%;border:2.5px dashed rgba(255,255,255,.9);z-index:1;pointer-events:none;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.heart{position:absolute;color:#ff9fb2;font-size:1.8rem;animation:floatH 3.5s ease-in-out infinite}
.h1{right:-4%;top:8%}.h2{left:-6%;top:40%;font-size:1.3rem;animation-delay:-1.2s}.h3{right:4%;bottom:0;font-size:1.4rem;animation-delay:-2.2s}
@keyframes floatH{50%{transform:translateY(-12px) scale(1.15)}}
.facts{display:flex;justify-content:center;gap:12px;margin-top:26px;flex-wrap:wrap}
.facts span{display:grid;min-width:92px;padding:12px 10px;border-radius:18px;background:#fff;box-shadow:0 8px 20px rgba(77,151,201,.15)}
.facts b{font:700 1.9rem "Fredoka";color:var(--blue-d)}
.facts small{font-size:.75rem;color:var(--mut)}

.cd{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.cl{position:relative;width:70px;height:60px;display:grid;place-content:center;background:#fff;border-radius:40px;box-shadow:0 10px 20px rgba(77,151,201,.18)}
.cl::before,.cl::after{content:"";position:absolute;background:#fff;border-radius:50%;z-index:-1}
.cl::before{width:40px;height:40px;left:8px;top:-16px}
.cl::after{width:30px;height:30px;right:10px;top:-10px}
.cl b{font:700 1.5rem/1 "Fredoka";color:var(--blue-d)}
.cl b.tick{animation:sq .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes sq{0%{transform:scale(1.35,.7)}}
.cl span{font-size:.65rem;color:var(--mut);text-transform:uppercase;letter-spacing:.1em}
.cl:nth-child(odd){animation:float 4s ease-in-out infinite}
.cl:nth-child(even){animation:float 4s ease-in-out -2s infinite}

.where{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 14px 34px rgba(77,151,201,.2);text-align:left}
@media (min-width:640px){.where{grid-template-columns:1fr 1fr}}
.where .pic{min-height:200px}
.where>div{padding:22px}
.where h3{font:700 1.5rem "Fredoka";color:var(--blue-d)}
.where p{color:var(--mut);margin:4px 0}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;padding:12px 22px;border-radius:99px;text-decoration:none;background:var(--blue-d);color:#fff;font:600 1rem "Fredoka";box-shadow:0 5px 0 #2f6f9b;transition:transform .12s,box-shadow .12s}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #2f6f9b}
.btn.alt{background:var(--yellow);color:var(--ink);box-shadow:0 5px 0 #e0bf63}
.btn.wide{width:100%}
.link{background:none;border:0;color:var(--blue-d);text-decoration:underline;margin-top:12px}

.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tile{padding:20px 14px;border-radius:24px;background:var(--c);box-shadow:inset 0 0 0 3px rgba(255,255,255,.6),0 10px 20px rgba(46,74,107,.08)}
.tile .ic{display:inline-block;font-size:2.2rem;animation:swingI 2.6s ease-in-out infinite;transform-origin:50% 0}
.tile:nth-child(2) .ic{animation-delay:-.7s}.tile:nth-child(3) .ic{animation-delay:-1.4s}.tile:nth-child(4) .ic{animation-delay:-2s}
@keyframes swingI{50%{transform:rotate(12deg)}}
.tile h3{font:600 1.15rem "Fredoka";margin:4px 0}
.tile p{font-size:.88rem;color:var(--mut);line-height:1.4}

.poll{display:grid;gap:10px;max-width:460px;margin:0 auto}
.poll button{position:relative;display:grid;grid-template-columns:130px 1fr 46px;align-items:center;gap:10px;padding:12px 14px;border:0;border-radius:16px;background:#fff;box-shadow:0 6px 16px rgba(77,151,201,.15);text-align:left;font-weight:500;transition:transform .15s}
.poll button:active{transform:scale(.97)}
.poll .bar{height:12px;border-radius:99px;background:#e6f2fa;overflow:hidden}
.poll .bar i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--blue-d));transition:width 1s cubic-bezier(.3,1.3,.5,1)}
.poll em{font-style:normal;font-weight:600;color:var(--blue-d);text-align:right}
.poll.voted button{pointer-events:none}
.poll button.mine{box-shadow:0 0 0 3px var(--yellow),0 6px 16px rgba(77,151,201,.15)}

.panel{max-width:440px;margin:0 auto;padding:24px;border-radius:28px;background:#fff;box-shadow:0 14px 34px rgba(77,151,201,.2)}
.rsvp-form label{font-weight:500;color:var(--mut)}
.rsvp-form input,.rsvp-form select,.rsvp-form textarea{border:2px solid #d7eefb;background:#f7fbfe;color:var(--ink)}
.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus{outline:none;border-color:var(--blue)}
.rsvp-choice label{border:2px solid #d7eefb;font-weight:600;color:var(--ink)}
.rsvp-choice input:checked+label{background:var(--blue);border-color:var(--blue);color:#fff}
.rsvp-choice input:focus-visible+label{outline:2px solid var(--blue-d)}
.ok-b{font-size:4rem;animation:float 2s ease-in-out infinite}
.rsvp-ok h3{font:700 1.8rem "Fredoka";color:var(--blue-d)}
.rsvp-ok p{color:var(--mut);margin:4px 0 14px}

.foot{text-align:center;padding:60px 20px 120px;position:relative;z-index:2;color:#fff}
.moon{width:90px;height:90px;margin:0 auto 18px;border-radius:50%;box-shadow:-18px 10px 0 0 #fff3c4;transform:rotate(-20deg);animation:float 5s ease-in-out infinite}
.foot-t{font:600 1.6rem "Playpen Sans",cursive}