:root{
  --navy:#0B1E4A;--ink:#0A1838;--deep:#060E22;--space:#16306A;
  --gold:#FFD66B;--gold-2:#F5B82E;--sky:#AFC8FF;--blue:#3D9BFF;
  --orange:#F2643D;--green:#2FC49A;--purple:#A15BEA;--pink:#FF6FB5;
  --muted:#C9D7F5;--label:#4A6AB0;
  --lasalle-navy:#22305F;--lasalle-red:#BC1F33;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--deep);color:#fff;font-family:'Nunito',sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--sky)}
input,textarea,button{font-family:inherit}
[hidden]{display:none!important}

@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bob{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(0,-18px) rotate(4deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes introPop{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.1)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
@keyframes introText{0%{opacity:0;transform:translateY(20px) scale(.8)}100%{opacity:1;transform:none}}
@keyframes rocketShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px) rotate(-1deg)}75%{transform:translateX(3px) rotate(1deg)}}
@keyframes rocketLaunch{to{transform:translateY(-130vh)}}
@keyframes flameGrow{0%{transform:scaleY(.3);opacity:.6}100%{transform:scaleY(1.4);opacity:1}}
@keyframes flicker{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.82)}}
@keyframes smoke{0%{opacity:0;transform:translate(0,0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-20px) scale(1.8)}}
@keyframes overlayOut{to{opacity:0;visibility:hidden}}
@keyframes padOut{to{opacity:0;transform:translateY(40px)}}
@keyframes flyAcross{0%{transform:translate(-20vw,20vh)}100%{transform:translate(120vw,-30vh)}}
@keyframes ufoDrift{0%{transform:translate(110vw,0)}100%{transform:translate(-30vw,12vh)}}
@keyframes shoot{0%{transform:translate(0,0) rotate(-30deg);opacity:0}5%{opacity:1}20%{transform:translate(-60vw,35vh) rotate(-30deg);opacity:0}100%{opacity:0}}
@keyframes shimmer{to{background-position:200% 0}}

.page{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(120% 80% at 80% 0%,var(--space) 0%,var(--ink) 45%,var(--deep) 100%)}

/* ---------- Fondo ---------- */
.space{position:absolute;inset:0;pointer-events:none}
.stars{position:absolute;inset:0}
.star{position:absolute;border-radius:50%;background:#fff;opacity:.6;animation:twinkle var(--dur) ease-in-out var(--delay) infinite}
.star.gold{background:var(--gold);box-shadow:0 0 6px var(--gold)}
.orbit{position:absolute;border-radius:50%}
.orbit-1{width:900px;height:900px;right:-420px;top:-380px;border:1px solid rgba(175,200,255,.14)}
.orbit-2{width:1300px;height:1300px;right:-620px;top:-580px;border:1px dashed rgba(175,200,255,.10)}
.rainbow{position:absolute;left:-10%;right:-10%;bottom:-160px;height:320px;border-radius:50% 50% 0 0;opacity:.18;
  background:linear-gradient(90deg,var(--orange),var(--gold),var(--green),var(--blue),var(--purple),var(--pink));filter:blur(40px)}
.planet{position:absolute}
.planet>div{border-radius:50%}
.p-orange{left:-90px;top:58%;animation:bob 14s ease-in-out infinite}
.p-orange>div{width:220px;height:220px;background:radial-gradient(circle at 35% 30%,#FFB27A,#F2643D 55%,#9C2F25);box-shadow:inset -36px -22px 55px rgba(0,0,0,.35)}
.p-green{right:6%;top:6%;animation:bob 10s ease-in-out -3s infinite}
.p-green>div{width:70px;height:70px;background:radial-gradient(circle at 35% 30%,#A8F5D8,#2FC49A 55%,#157A63);box-shadow:inset -12px -7px 17px rgba(0,0,0,.35)}
.p-purple{right:-40px;bottom:8%;animation:bob 12s ease-in-out -6s infinite;width:150px;height:150px}
.p-purple>div{width:150px;height:150px;background:radial-gradient(circle at 35% 30%,#E3B8FF,#A15BEA 55%,#5A2A9C);box-shadow:inset -25px -15px 37px rgba(0,0,0,.35)}
.p-purple .ring{position:absolute;left:-40px;right:-40px;top:58px;height:34px;border-radius:50%;border:5px solid rgba(255,163,214,.75);transform:rotate(-18deg)}
.p-yellow{right:2%;top:46%;animation:bob 9s ease-in-out -2s infinite}
.p-yellow>div{width:36px;height:36px;background:radial-gradient(circle at 35% 30%,#FFE7A3,#FFD66B 60%,#C99A2E);box-shadow:inset -6px -4px 9px rgba(0,0,0,.35)}
.p-pink{left:8%;top:30%;animation:bob 11s ease-in-out -5s infinite}
.p-pink>div{width:48px;height:48px;background:radial-gradient(circle at 35% 30%,#FFC4E1,#FF6FB5 55%,#B23A7A);box-shadow:inset -8px -5px 12px rgba(0,0,0,.35)}
.fly-rocket{position:absolute;left:0;top:0;animation:flyAcross 22s linear infinite}
.fly-rocket svg{display:block;transform:rotate(60deg)}
.ufo{position:absolute;left:0;top:30%;animation:ufoDrift 30s linear -8s infinite}
.ufo>div{animation:bob 3s ease-in-out infinite}
.ufo svg{display:block}
.shooting{position:absolute;height:2px;background:linear-gradient(90deg,#fff,transparent)}
.s1{right:10%;top:12%;width:120px;animation:shoot 7s ease-out infinite}
.s2{right:30%;top:4%;width:90px;animation:shoot 9s ease-out -4s infinite}

/* ---------- Layout ---------- */
.layout{position:relative;max-width:1120px;margin:0 auto;padding:clamp(20px,5vw,56px) clamp(16px,4vw,40px) 64px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(28px,5vw,56px);align-items:start}
.hero,.details{display:flex;flex-direction:column;gap:24px}

.brand{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.brand-logo{display:inline-flex;padding:10px 16px;border-radius:16px;background:var(--lasalle-navy);border-bottom:4px solid var(--lasalle-red);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.brand-logo img{display:block;width:clamp(120px,32vw,150px);height:auto}
.brand-tag{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sky)}
.brand-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}

/* ---------- Globo ---------- */
.globe-wrap{position:relative;width:min(46%,300px);aspect-ratio:1;align-self:center;margin:clamp(48px,9vw,70px) 0;animation:floaty 6s ease-in-out infinite}
.globe-dash{position:absolute;inset:-28px;border-radius:50%;border:1px dashed rgba(175,200,255,.3)}
.globe{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--blue);border:6px solid var(--navy);
  box-shadow:0 0 0 8px rgba(143,227,255,.25),0 0 80px rgba(95,184,255,.5)}
.globe svg{position:absolute;inset:0;width:100%;height:100%}
.globe-shine{position:absolute;left:14%;top:8%;width:22%;height:12%;border-radius:50%;background:rgba(255,255,255,.55);transform:rotate(-30deg)}
.globe-shade{position:absolute;inset:0;border-radius:50%;box-shadow:inset -22px -18px 0 rgba(11,30,74,.22)}
.astro{position:absolute;z-index:2}
.astro svg{display:block;width:100%;height:auto;overflow:visible}
.astro-boy{left:-58%;top:-24%;width:58%;animation:bob 7s ease-in-out infinite}
.astro-boy>div{transform:rotate(-10deg)}
.astro-girl{right:-56%;bottom:-26%;width:56%;animation:bob 8s ease-in-out -3s infinite}
.astro-girl>div{transform:rotate(10deg) scaleX(-1)}
.moon-orbit{position:absolute;inset:-70px;animation:spin 20s linear infinite reverse}
.moon{position:absolute;right:-6px;top:50%;width:66px;height:66px;margin-top:-33px;border-radius:50%;overflow:hidden;background:#EEF1F7;border:4px solid var(--navy);box-shadow:0 0 24px rgba(255,255,255,.3)}
.moon i{position:absolute;border-radius:50%;background:#C3CAD8;border:3px solid var(--navy)}
.moon i:nth-child(1){left:14%;top:14%;width:26%;height:26%}
.moon i:nth-child(2){left:60%;top:54%;width:22%;height:22%}
.moon i:nth-child(3){left:56%;top:12%;width:14%;height:14%}
.moon b{position:absolute;inset:0;border-radius:50%;box-shadow:inset -8px -6px 0 rgba(11,30,74,.18)}
.rocket-orbit{position:absolute;inset:-28px;animation:spin 12s linear infinite}
.rocket-orbit>div{position:absolute;left:50%;top:-22px;transform:translateX(-50%)}
.rocket-orbit svg{display:block;transform:rotate(90deg)}

/* ---------- Título ---------- */
.title{display:flex;flex-direction:column;gap:12px;text-align:center}
.lead{margin:0;font-size:18px;color:var(--muted);text-wrap:pretty}
.lead strong{color:#fff}
h1{margin:0;font-family:'Fredoka',sans-serif;font-weight:700;line-height:1;letter-spacing:-.01em;text-wrap:balance}
.h1-top{display:block;font-size:clamp(44px,9vw,74px);
  background:linear-gradient(90deg,var(--gold),#FFF3C4,var(--gold),var(--gold-2),var(--gold));background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite;
  filter:drop-shadow(0 4px 0 rgba(11,30,74,.6))}
.h1-bottom{display:block;font-size:clamp(28px,5.5vw,42px);color:#fff;margin-top:6px}
.adn{margin:4px 0 0;font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.sub{margin:0;font-size:16px;color:var(--muted);text-wrap:pretty}

/* ---------- Cuenta regresiva ---------- */
.countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.countdown>div{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 4px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(175,200,255,.18)}
.countdown>div:nth-child(1){border-top:3px solid var(--orange)}
.countdown>div:nth-child(2){border-top:3px solid var(--gold)}
.countdown>div:nth-child(3){border-top:3px solid var(--green)}
.countdown>div:nth-child(4){border-top:3px solid var(--purple)}
.countdown span{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(22px,5vw,30px);font-variant-numeric:tabular-nums}
.countdown small{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.cd-label{margin:-10px 0 0;text-align:center;font-size:13px;color:#8FA6D6}

/* ---------- Tarjetas ---------- */
.card{border-radius:24px;padding:clamp(22px,4vw,32px);display:flex;flex-direction:column;gap:20px}
.card h2{margin:0;font-family:'Fredoka',sans-serif;font-weight:600;font-size:21px}
.flight{position:relative;background:#fff;color:var(--ink);overflow:hidden}
.flight::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--orange),var(--gold),var(--green),var(--blue),var(--purple),var(--pink))}
.flight hr{border:0;height:1px;background:#E3EAF7;margin:0}
.date-row{display:flex;gap:16px;align-items:flex-start}
.cal{flex:none;width:64px;height:68px;border-radius:14px;background:var(--navy);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 0 var(--gold)}
.cal span{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--gold)}
.cal b{font-family:'Fredoka',sans-serif;font-weight:700;font-size:28px;line-height:1}
.info{display:flex;flex-direction:column;gap:4px;padding-top:4px}
.label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
.value{font-size:18px;font-weight:700}
.note{font-size:14px;color:#5A6E99}
.times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.time{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:14px}
.time.light{background:#EEF3FC}
.time.dark{background:var(--navy);color:#fff}
.time.dark .label{color:var(--gold)}
.big{font-family:'Fredoka',sans-serif;font-weight:600;font-size:22px}
.family{flex-direction:row;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#FFF6DA;border:1px dashed var(--gold-2);font-size:15px}
.family-icon{font-size:24px}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.btn-outline{flex:1 1 140px;min-height:46px;padding:6px 16px;text-align:center;display:flex;align-items:center;justify-content:center;border-radius:999px;border:1.5px solid var(--ink);color:var(--ink);text-decoration:none;font-weight:700;font-size:15px;transition:background .15s}
.btn-outline:hover{background:#EEF3FC;color:var(--ink)}

/* ---------- RSVP ---------- */
.rsvp{background:rgba(10,24,56,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(175,200,255,.22)}
.rsvp form{display:flex;flex-direction:column;gap:18px}
.rsvp-head{display:flex;flex-direction:column;gap:6px}
.rsvp-head p{margin:0;font-size:15px;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:8px}
.field>span{font-size:13px;font-weight:700;color:var(--sky)}
.field input,.field textarea{border-radius:14px;border:1px solid rgba(175,200,255,.3);background:rgba(6,14,34,.55);color:#fff;font-size:16px;outline:none}
.field input{min-height:50px;padding:0 16px}
.field textarea{padding:14px 16px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--gold)}
.field input::placeholder{color:#6F84B3}
.toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.toggle button{min-height:50px;border-radius:14px;border:1px solid rgba(175,200,255,.3);background:rgba(6,14,34,.55);color:#fff;font-size:16px;font-weight:700;cursor:pointer}
.toggle button.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.counter{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 8px 8px 16px;border-radius:14px;background:rgba(6,14,34,.55);border:1px solid rgba(175,200,255,.2)}
.counter>span{font-size:15px;font-weight:700}
.counter>div{display:flex;align-items:center;gap:6px}
.counter button{width:44px;height:44px;border-radius:12px;border:none;background:rgba(175,200,255,.15);color:#fff;font-size:20px;cursor:pointer}
.counter button:hover{background:rgba(175,200,255,.28)}
.counter b{min-width:24px;text-align:center;font-family:'Fredoka',sans-serif;font-weight:600;font-size:18px}
.error{margin:0;font-size:14px;color:#FFC7C7}
.btn-primary{min-height:54px;border-radius:999px;border:none;background:var(--gold);color:var(--ink);font-size:17px;font-weight:800;cursor:pointer;box-shadow:0 4px 0 var(--gold-2)}
.btn-primary:hover{background:#FFE08E}
.btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--gold-2)}
.sent{display:flex;flex-direction:column;gap:12px;text-align:center;padding:12px 0}
.kicker{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.sent h2{font-size:24px;text-wrap:balance}
.sent p{margin:0;font-size:16px;color:var(--muted);text-wrap:pretty}
.btn-ghost{align-self:center;min-height:46px;padding:0 22px;border-radius:999px;border:1px solid rgba(175,200,255,.4);background:transparent;color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.footer{margin:0;text-align:center;font-size:13px;color:#8FA6D6}

/* ---------- Intro ---------- */
.intro{position:fixed;inset:0;z-index:50;overflow:hidden;background:radial-gradient(120% 80% at 50% 100%,var(--space) 0%,var(--ink) 50%,var(--deep) 100%);animation:overlayOut .8s ease 4.6s forwards}
.intro.gone{display:none}
.intro-count{position:absolute;left:0;right:0;top:5vh;height:min(18vh,140px);display:grid;place-items:center;font-family:'Fredoka',sans-serif;font-weight:700}
.intro-count>span{grid-area:1/1;opacity:0}
.n{font-size:min(16vh,120px)}
.n3{animation:introPop .8s ease-out .4s forwards}
.n2{animation:introPop .8s ease-out 1.2s forwards}
.n1{animation:introPop .8s ease-out 2s forwards}
.go{font-size:clamp(44px,10vw,72px);color:var(--gold);animation:introText .4s ease-out 2.8s forwards}
.pad{position:absolute;left:50%;bottom:0;width:340px;margin-left:-170px;height:100px;animation:padOut .6s ease 3.6s forwards}
.pad-top{position:absolute;left:40px;right:40px;bottom:60px;height:22px;border-radius:12px;background:var(--label);border:4px solid var(--navy)}
.pad-leg{position:absolute;bottom:0;width:18px;height:64px;background:#2A4A90;border:4px solid var(--navy)}
.pad-leg.l{left:70px}.pad-leg.r{right:70px}
.smoke{position:absolute;left:calc(50% + var(--x));bottom:60px;width:70px;height:70px;border-radius:50%;background:#E6EDFC;border:4px solid var(--navy);opacity:0;animation:smoke 1.6s ease-out var(--d) forwards}
.launch{position:absolute;left:0;right:0;bottom:calc(82px - min(2.75vh,24px));display:flex;justify-content:center;animation:rocketLaunch 1.6s cubic-bezier(.55,0,.9,.35) 3.2s forwards}
.big-rocket{position:relative;height:min(46vh,480px);aspect-ratio:60/200;animation:rocketShake .09s linear 2.6s 7}
.flame{position:absolute;left:30%;top:93%;width:40%;height:42%;transform-origin:50% 0;transform:scaleY(.3);opacity:0;animation:flameGrow .4s ease-out 2.6s forwards}
.flame>div{width:100%;height:100%;animation:flicker .12s linear infinite}
.flame svg{display:block;width:100%;height:100%}
.rocket-body{position:relative;display:block;width:100%;height:100%}
.skip{position:absolute;right:16px;top:16px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(175,200,255,.4);background:rgba(6,14,34,.5);color:#fff;font-size:15px;font-weight:700;cursor:pointer}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important}
  .intro{display:none}
}