/* Fiesta infantil · Dino Fiesta — selva, volcán, huellas y T-Rex */
:root{
  --jungle:#1f5e3b;--jungle-d:#133d27;--leaf:#4f9a45;--lime:#9bd35a;--orange:#ff8a3d;--yellow:#ffd23f;--sand:#f5e6c4;--brown:#6b4226;--ink:#1b2e22;--cream:#fffaf0;
  --ph-bg:linear-gradient(135deg,#b7e08f,#6fb35a);--ph-ink:#1f5e3b;
  --music-bg:var(--orange);--music-ink:#fff;
}
body{background:linear-gradient(180deg,#9fe0d8 0%,#cfeeb5 32%,#f5e6c4 70%,#e9d4a4 100%) fixed;color:var(--ink);font:500 17px/1.55 "Baloo 2",system-ui,sans-serif}
main{position:relative;z-index:2}

/* ---------- Selva de fondo ---------- */
.jungle{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.volcano{position:absolute;right:-60px;bottom:18vh;width:300px;height:190px;opacity:.55}
.volcano::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#6b4a3a,#8a6450 55%,#5b3d30);clip-path:polygon(0 100%,40% 10%,60% 10%,100% 100%)}
.volcano::after{content:"";position:absolute;left:40%;right:40%;top:8%;height:26px;background:linear-gradient(#ffd23f,#ff5a1f);clip-path:polygon(0 0,100% 0,85% 100%,70% 40%,55% 100%,40% 30%,25% 100%,10% 50%);animation:lava 1.6s ease-in-out infinite alternate}
@keyframes lava{to{filter:brightness(1.4)}}
.smoke{position:absolute;left:50%;top:0;width:40px;height:40px;margin-left:-20px;border-radius:50%;background:rgba(120,110,105,.55);animation:smoke 5s ease-out infinite}
.s2{animation-delay:-1.7s}.s3{animation-delay:-3.3s}
@keyframes smoke{0%{transform:translate(0,0) scale(.4);opacity:0}20%{opacity:.8}100%{transform:translate(-40px,-160px) scale(2.4);opacity:0}}
.ptero{position:absolute;width:90px;fill:#2e4a3a;opacity:.55;animation:fly 22s linear infinite}
.p1{top:12%}
.p2{top:24%;width:60px;animation-duration:30s;animation-delay:-12s;opacity:.4}
.ptero .wing{transform-origin:60px 26px;animation:flap .5s ease-in-out infinite alternate}
@keyframes fly{from{transform:translateX(-140px) translateY(0)}50%{transform:translateX(50vw) translateY(30px)}to{transform:translateX(calc(100vw + 140px)) translateY(-10px)}}
@keyframes flap{to{transform:scaleY(-.6)}}
.leaf{position:absolute;width:180px;fill:var(--leaf);transform-origin:0 100%;animation:sway 5s ease-in-out infinite alternate}
.leaf .vein{fill:none;stroke:#2d6b33;stroke-width:3}
.l1{left:-40px;bottom:-30px}
.l2{left:-60px;bottom:40px;width:140px;fill:#3f8a3a;animation-delay:-2s}
.l3{right:-40px;top:-20px;width:150px;fill:#5aa84f;transform:scale(-1,-1);transform-origin:50% 50%;animation-name:sway2}
@keyframes sway{from{rotate:-4deg}to{rotate:6deg}}
@keyframes sway2{from{rotate:-5deg}to{rotate:4deg}}
.fx{position:fixed;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}

/* Huellas por toda la página */
.tracks{position:absolute;left:0;right:0;top:0;z-index:1;pointer-events:none}
.tracks svg{position:absolute;width:30px;height:33px;fill:var(--brown);opacity:0;transform:rotate(var(--r)) scale(1.6)}
.tracks svg.on{animation:stomp .4s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes stomp{to{opacity:.16;transform:rotate(var(--r)) scale(1)}}

/* ---------- Intro: huevo ---------- */
.gate{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;
  background:radial-gradient(circle at 50% 55%,#e9f7d8,#9fd08a 60%,#5b9e4c);transition:opacity .8s}
.gate-k{font:400 1.7rem "Luckiest Guy";color:var(--jungle);letter-spacing:.03em;text-align:center}
.egg{position:relative;width:170px;height:210px;border:0;background:none;padding:0;margin-top:20px}
.egg .shell{position:absolute;inset:0;overflow:visible;filter:drop-shadow(0 18px 18px rgba(0,0,0,.25))}
.egg .baby{position:absolute;left:25px;top:40px;width:120px;opacity:0;transform:translateY(40px);transition:transform .7s cubic-bezier(.3,1.7,.5,1) .15s,opacity .2s .15s}
.egg:not(.hatch){animation:idle 2.6s ease-in-out infinite}
@keyframes idle{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-6deg)}82%{transform:rotate(6deg)}88%{transform:rotate(-3deg)}}
.egg.wob{animation:wob .45s ease-in-out}
@keyframes wob{25%{transform:rotate(-12deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-6deg)}}
.crack{fill:none;stroke:#7a5a2a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .3s}
.egg.k1 .c1,.egg.k2 .c1,.egg.k2 .c2{stroke-dashoffset:0}
.shell-top{transform-origin:80px 118px;transition:transform .9s cubic-bezier(.3,1.2,.5,1),opacity .9s}
.egg.hatch .shell-top{transform:translate(40px,-150px) rotate(40deg);opacity:0}
.egg.hatch .crack{opacity:0}
.egg.hatch .baby{opacity:1;transform:none}
.gate-hint{font-weight:800;color:var(--jungle-d);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.gate-guest{color:var(--jungle-d)}
.gate.fade{opacity:0}

/* ---------- Portada ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 16px 40px}
.hero-k{font:400 1.4rem "Luckiest Guy";letter-spacing:.05em;color:var(--orange);text-shadow:2px 2px 0 #fff}
.big-name{display:grid;justify-items:center;margin:4px 0 0;font:400 clamp(3.6rem,19vw,7rem)/.9 "Luckiest Guy";letter-spacing:.03em}
.big-name small{font-size:.32em;color:var(--jungle);letter-spacing:.1em;margin-top:4px}
.big-name .ch{display:inline-block;color:var(--c);-webkit-text-stroke:3px var(--jungle-d);paint-order:stroke fill;text-shadow:0 7px 0 var(--jungle-d);animation:hop 2.2s ease-in-out infinite;animation-delay:calc(var(--k) * .12s)}
@keyframes hop{0%,50%,100%{transform:translateY(0) rotate(var(--rot))}25%{transform:translateY(-12px) rotate(calc(var(--rot) * -1))}}
.age{position:relative;width:118px;height:118px;margin:10px auto 0;display:grid;place-content:center;border-radius:50% 46% 52% 48%;background:radial-gradient(circle at 35% 30%,#fff3a8,var(--yellow) 50%,#e8a917);box-shadow:inset -8px -10px 0 rgba(0,0,0,.08),0 10px 0 #c98c0e,0 18px 30px rgba(0,0,0,.2);animation:spinY 6s ease-in-out infinite}
.age span{font:400 4.2rem/1 "Luckiest Guy";color:var(--orange);-webkit-text-stroke:3px var(--brown);paint-order:stroke fill}
.age i{font-style:normal;font-weight:800;color:var(--brown);margin-top:-8px}
@keyframes spinY{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-10deg) scale(1.08)}92%{transform:rotate(8deg)}}
.rex-btn{position:relative;border:0;background:none;padding:0;width:min(78vw,320px);margin-top:10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rex-btn svg{width:100%;overflow:visible;animation:breathe 3s ease-in-out infinite;transform-origin:50% 100%}
@keyframes breathe{50%{transform:scale(1.02,.98)}}
.rx-body,.rx-tail{fill:#57a84a}
.rx-belly{fill:#bfe59a}
.rx-leg{fill:#43903a}
.rx-spike{fill:var(--orange)}
.rx-arm{stroke:#43903a;stroke-width:9;stroke-linecap:round}
.rx-teeth{fill:#fff}
.rx-jaw{transform-origin:182px 108px;transition:transform .2s}
.rx-tail{transform-origin:110px 148px;animation:tail 2.4s ease-in-out infinite}
@keyframes tail{50%{transform:rotate(6deg)}}
.rx-pupil{animation:look 5s steps(1) infinite}
@keyframes look{0%,100%{transform:none}40%{transform:translateX(-3px)}70%{transform:translateY(2px)}}
.rex-btn.roaring .rx-jaw{transform:rotate(26deg)}
.rex-btn.roaring svg{animation:rattle .12s linear 6}
@keyframes rattle{50%{transform:translate(3px,-2px) rotate(1deg)}}
.roar{position:absolute;right:-6px;top:-10px;font:400 2rem "Luckiest Guy";color:#fff;background:var(--orange);padding:6px 14px;border-radius:18px;transform:scale(0) rotate(-12deg);transition:transform .25s cubic-bezier(.3,1.8,.5,1);-webkit-text-stroke:1px var(--brown)}
.roar::after{content:"";position:absolute;left:14px;bottom:-12px;border:8px solid transparent;border-top-color:var(--orange)}
.rex-btn.roaring .roar{transform:scale(1) rotate(-8deg)}
body.shake main{animation:shakeP .5s linear}
@keyframes shakeP{10%,50%,90%{transform:translate(-5px,2px)}30%,70%{transform:translate(5px,-2px)}}
.tap-hint{font-size:.9rem;font-weight:800;color:var(--jungle);opacity:.8;animation:pulse 1.4s ease-in-out infinite}
.hero-date{margin-top:14px;padding:10px 20px;border-radius:14px;background:var(--jungle);color:#fff;font-weight:800;box-shadow:0 5px 0 var(--jungle-d)}
.guest{margin-top:14px;font-weight:800;font-size:1.15rem;color:var(--jungle-d)}
.guest b{color:var(--orange)}

/* ---------- Secciones ---------- */
.sec{max-width:760px;margin:0 auto;padding:64px 18px;text-align:center}
.title{font:400 clamp(2.1rem,9.5vw,3.2rem)/1.05 "Luckiest Guy";color:var(--orange);-webkit-text-stroke:2px var(--brown);paint-order:stroke fill;text-shadow:0 5px 0 var(--brown);letter-spacing:.02em;margin-bottom:18px}
.lead{max-width:520px;margin:0 auto 18px;font-size:1.08rem}
.small{font-size:.9rem;font-weight:800;color:var(--brown);margin-top:12px}

.kid{position:relative;width:min(72vw,280px);margin:0 auto 22px}
.kid .pic{aspect-ratio:1;border-radius:36% 64% 58% 42%/48% 40% 60% 52%;border:8px solid #fff;box-shadow:0 0 0 6px var(--leaf),0 20px 40px rgba(0,0,0,.2);animation:blob 8s ease-in-out infinite}
@keyframes blob{50%{border-radius:58% 42% 40% 60%/42% 58% 42% 58%}}
.bubble{position:absolute;right:-8px;top:-8px;padding:8px 14px;border-radius:18px;background:#fff;font-weight:800;box-shadow:0 6px 0 rgba(0,0,0,.1);transform:rotate(6deg);animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{translate:0 -8px}}

.stones{display:flex;justify-content:center;gap:10px;margin-bottom:24px}
.stones div{width:74px;padding:12px 0 8px;border-radius:24px 18px 26px 20px;background:linear-gradient(160deg,#b5aa99,#8c8272);box-shadow:inset -5px -6px 0 rgba(0,0,0,.15),inset 4px 4px 0 rgba(255,255,255,.25),0 8px 0 #6e6557;color:#fff}
.stones b{display:block;font:400 2.1rem/1 "Luckiest Guy";text-shadow:0 3px 0 rgba(0,0,0,.25)}
.stones b.tick{animation:thud .35s cubic-bezier(.3,1.8,.5,1)}
@keyframes thud{from{transform:translateY(-14px) scale(1.15)}}
.stones span{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;padding:13px 26px;border-radius:16px;text-decoration:none;background:var(--orange);color:#fff;font:800 1.05rem "Baloo 2";box-shadow:0 6px 0 #c4611f;transition:transform .12s,box-shadow .12s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #c4611f}
.btn.sm{padding:9px 18px;font-size:.95rem;margin-top:8px}
.btn.wide{width:100%}
.link{background:none;border:0;color:var(--jungle);font-weight:800;text-decoration:underline;margin-top:12px}

/* Excavación */
.dig{position:relative;max-width:420px;margin:0 auto;border-radius:26px;overflow:hidden;box-shadow:0 0 0 6px var(--brown),0 16px 30px rgba(0,0,0,.2);background:var(--sand);touch-action:none}
.dig-in{padding:26px 20px}
.fossil{width:110px;margin:0 auto 6px}
.dig-in h3{font:400 1.6rem "Luckiest Guy";color:var(--jungle)}
.dig-in p{margin:4px 0}
.dirt{position:absolute;inset:0;width:100%;height:100%;cursor:grab;transition:opacity .8s}
.dig.done .dirt{opacity:0;pointer-events:none}

/* Expedición */
.trail{list-style:none;margin:0 auto;padding:0 0 0 54px;max-width:520px;position:relative;display:grid;gap:18px;text-align:left}
.trail-line{position:absolute;left:22px;top:0;bottom:0;width:6px;border-radius:3px;background:repeating-linear-gradient(180deg,var(--brown) 0 12px,transparent 12px 22px);opacity:.5}
.walker{position:absolute;left:-14px;top:0;font-size:2rem;transform:translateY(calc(var(--k,0) * var(--h,300px))) scaleX(-1);transition:transform .15s linear}
.trail li:not(.trail-line){display:flex;gap:12px;align-items:center;padding:14px;border-radius:20px;background:#fff;box-shadow:0 6px 0 rgba(0,0,0,.08)}
.trail .ic{flex:0 0 52px;height:52px;display:grid;place-items:center;font-size:1.8rem;border-radius:50%;background:var(--sand)}
.trail time{font-weight:800;color:var(--orange);font-size:.85rem}
.trail h3{font:400 1.2rem "Luckiest Guy";letter-spacing:.02em;color:var(--jungle);margin:0}
.trail p{font-size:.92rem;line-height:1.3;margin:0}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.card{padding:18px 12px;border-radius:22px;background:#fff;box-shadow:0 7px 0 rgba(0,0,0,.08);transform:rotate(var(--r))}
.card.rv.in{transform:rotate(var(--r))}
.card b{font-size:2.2rem;display:inline-block;animation:bob 2.6s ease-in-out infinite}
.card h3{font:400 1.25rem "Luckiest Guy";color:var(--jungle);margin:2px 0}
.card p{font-size:.88rem;line-height:1.35}

.panel{max-width:440px;margin:0 auto;padding:24px 20px;border-radius:26px;background:#fff;box-shadow:0 0 0 5px var(--leaf),0 16px 30px rgba(0,0,0,.15)}
.rsvp-form label{font-weight:800;font-size:.92rem;color:var(--jungle-d)}
.rsvp-form input,.rsvp-form select,.rsvp-form textarea{border:3px solid #d8ecc4;background:#f7fbf2;color:var(--ink)}
.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus{outline:none;border-color:var(--leaf)}
.rsvp-choice label{border:3px solid #d8ecc4;font-weight:800;color:var(--jungle-d)}
.rsvp-choice input:checked+label{background:var(--leaf);border-color:var(--leaf);color:#fff}
.rsvp-choice input:focus-visible+label,.dinos input:focus-visible+label{outline:3px solid var(--orange)}
.dinos{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dinos legend{font-weight:800;font-size:.92rem;color:var(--jungle-d);margin-bottom:6px;padding:0}
.dinos input{position:absolute;opacity:0;pointer-events:none}
.dinos label{display:grid;justify-items:center;padding:8px 4px;border-radius:16px;border:3px solid #d8ecc4;font-size:.85rem;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.8,.5,1)}
.dinos label span{font-size:2rem;line-height:1.2}
.dinos input:checked+label{border-color:var(--orange);background:#fff4e6;transform:scale(1.06) rotate(-2deg)}
.ok-rex{width:160px;margin:0 auto;animation:bob 2s ease-in-out infinite}
.rsvp-ok h3{font:400 1.8rem "Luckiest Guy";color:var(--orange);margin:6px 0}
.rsvp-ok p{margin-bottom:14px}

.foot{text-align:center;padding:50px 18px 120px;position:relative;z-index:2}
.foot-t{font:400 2rem "Luckiest Guy";color:var(--jungle)}
.tag{font-weight:800;color:var(--orange)}