/* Revelación de género · ¿Niño o niña? — azul y rosa pastel, crema y oro */
:root{
  --blue:#7ec8f0;--blue-d:#3a8fd1;--blue-l:#dff1fc;--pink:#ff9ec4;--pink-d:#e2659b;--pink-l:#fde8f1;--gold:#f2c14e;--cream:#fffaf5;--ink:#3d3a5c;--mut:#7a7696;
  --ph-bg:linear-gradient(110deg,#dff1fc 0 50%,#fde8f1 50%);--ph-ink:#7a7696;
  --music-bg:linear-gradient(135deg,var(--blue-d),var(--pink-d));--music-ink:#fff;
}
body{background:linear-gradient(100deg,var(--blue-l) 0 49.6%,var(--pink-l) 50.4% 100%) fixed;color:var(--ink);font:600 17px/1.6 "Nunito",system-ui,sans-serif}
main{position:relative;z-index:2}
.fx{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.bg-split{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-split i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(40px);opacity:.55}
.bg-split .b{left:-30vmax;top:-10vmax;background:radial-gradient(circle,#b9e2fa,transparent 65%);animation:drift 14s ease-in-out infinite alternate}
.bg-split .p{right:-30vmax;bottom:-20vmax;background:radial-gradient(circle,#ffc6dd,transparent 65%);animation:drift 16s ease-in-out -4s infinite alternate-reverse}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.1)}}
.cb{color:var(--blue-d);font-weight:800}.cp{color:var(--pink-d);font-weight:800}
.sb{color:var(--blue-d)}.sp{color:var(--pink-d)}

/* ---------- Intro: globo misterioso ---------- */
.gate{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;
  background:linear-gradient(100deg,#cfe9fb 0 50%,#fcd9e8 50%);transition:opacity .8s}
.gate-k{font:400 2.1rem "Pacifico",cursive;color:var(--ink)}
.mystery{border:0;background:none;padding:0;width:190px;cursor:pointer;transform-origin:50% 90%;animation:sway 3s ease-in-out infinite;transition:scale .35s cubic-bezier(.3,1.6,.5,1)}
.mystery svg{width:100%;overflow:visible;filter:drop-shadow(0 20px 24px rgba(40,30,70,.3))}
@keyframes sway{50%{rotate:4deg}}
.mystery.k1{scale:1.18}.mystery.k2{scale:1.38;animation:shake .25s linear infinite}
@keyframes shake{25%{rotate:-3deg}75%{rotate:3deg}}
.mystery.pop{scale:1.7;opacity:0;transition:scale .18s,opacity .18s}
.gate-hint{font-weight:800;color:var(--ink);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}
.gate-guest{color:var(--mut)}
.gate-guest b{color:var(--ink)}
.gate.fade{opacity:0}

/* ---------- Portada ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:70px 18px 50px}
.hero-k{font:400 1.5rem "Pacifico",cursive;color:var(--ink)}
.q{display:flex;flex-direction:column;align-items:center;margin:8px 0 6px;font:400 clamp(3.6rem,18vw,7.4rem)/.95 "Lilita One",sans-serif}
.q>span{white-space:nowrap}
.q-b{color:var(--blue-d);text-shadow:0 6px 0 #2b6fa8,0 14px 26px rgba(58,143,209,.3)}
.q-p{color:var(--pink-d);text-shadow:0 6px 0 #b9467a,0 14px 26px rgba(226,101,155,.3)}
.q-o{font-family:"Pacifico",cursive;font-size:.45em;line-height:1.3;color:var(--gold);text-shadow:0 3px 0 #c9922a;margin:-.1em 0}
.q .ch{display:inline-block;animation:hop 2.4s ease-in-out infinite;animation-delay:calc(var(--k) * .1s)}
@keyframes hop{0%,50%,100%{transform:translateY(0)}25%{transform:translateY(-12px) rotate(-4deg)}}
.feet{display:flex;align-items:center;gap:18px;font-size:2.4rem;margin:6px 0 10px}
.ft{display:inline-block;animation:bob 2.6s ease-in-out infinite}
.ft.p{animation-delay:-1.3s}
.heart{font-size:1.8rem;animation:beat 1.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px) rotate(8deg)}}
@keyframes beat{30%{transform:scale(1.2)}60%{transform:scale(.95)}}
.hero-date{padding:11px 22px;border-radius:99px;background:#fff;font-weight:800;box-shadow:0 10px 24px rgba(61,58,92,.12)}
.hero-date{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,var(--blue),var(--pink)) border-box;border:3px solid transparent}
.guest{margin-top:16px;font-weight:800}
.guest b{background:linear-gradient(90deg,var(--blue-d),var(--pink-d));-webkit-background-clip:text;background-clip:text;color:transparent}
.result-banner{margin-top:20px;font:400 2.2rem "Lilita One";padding:10px 26px;border-radius:20px;color:#fff;animation:beat 1.4s ease-in-out infinite}
.result-banner.b{background:var(--blue-d)}.result-banner.p{background:var(--pink-d)}

/* ---------- Secciones ---------- */
.sec{max-width:760px;margin:0 auto;padding:64px 20px;text-align:center}
.title{font:400 clamp(2rem,9vw,3rem)/1.1 "Lilita One",sans-serif;margin-bottom:16px;background:linear-gradient(90deg,var(--blue-d),#8d7fd8 50%,var(--pink-d));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #fff)}
.lead{max-width:520px;margin:0 auto 22px;color:var(--mut)}

.couple{position:relative;width:min(72vw,280px);margin:0 auto 26px}
.couple .pic{aspect-ratio:4/5;border-radius:140px 140px 24px 24px;border:6px solid #fff;box-shadow:-10px 10px 0 var(--blue),10px 18px 0 var(--pink),0 30px 50px rgba(61,58,92,.2)}
.tag-b,.tag-p{position:absolute;padding:6px 12px;border-radius:99px;font-weight:800;font-size:.85rem;color:#fff;animation:bob 3s ease-in-out infinite}
.tag-b{left:-14px;top:30%;background:var(--blue-d)}
.tag-p{right:-14px;top:52%;background:var(--pink-d);animation-delay:-1.5s}

.cd{display:flex;justify-content:center;gap:10px;margin-bottom:24px}
.cd div{width:72px;height:72px;border-radius:50%;display:grid;place-content:center;color:#fff;box-shadow:inset -5px -6px 0 rgba(0,0,0,.08),0 10px 20px rgba(61,58,92,.15)}
.cd div.b{background:radial-gradient(circle at 30% 30%,#bfe5fb,var(--blue) 55%,var(--blue-d))}
.cd div.p{background:radial-gradient(circle at 30% 30%,#ffd3e5,var(--pink) 55%,var(--pink-d))}
.cd b{font:400 1.7rem/1 "Lilita One"}
.cd b.tick{animation:popn .4s cubic-bezier(.3,1.8,.5,1)}
@keyframes popn{from{transform:scale(1.4)}}
.cd span{font-size:.62rem;font-weight:800;text-transform:uppercase}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;padding:13px 26px;border-radius:99px;text-decoration:none;color:#fff;font:800 1rem "Nunito";
  background:linear-gradient(90deg,var(--blue-d),#8d7fd8,var(--pink-d));background-size:200%;box-shadow:0 6px 0 #6a5aa8,0 14px 26px rgba(61,58,92,.2);transition:transform .12s,box-shadow .12s,background-position .6s}
.btn:hover{background-position:100% 0}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #6a5aa8}
.btn.wide{width:100%}
.btn.big{font-size:1.15rem;padding:16px 30px}
.link{background:none;border:0;color:#8d7fd8;font-weight:800;text-decoration:underline;margin-top:12px}

/* Jaloneo */
.tug{max-width:500px;margin:0 auto;padding:22px 18px;border-radius:26px;background:#fff;box-shadow:0 16px 34px rgba(61,58,92,.12)}
.tug-scores{display:flex;justify-content:space-between;font-weight:800;margin-bottom:10px}
.tug-scores b{font:400 1.6rem "Lilita One"}
.rope{display:flex;align-items:center;gap:8px}
.rope .side{font-size:2rem}
.line{position:relative;flex:1;height:12px;border-radius:99px;background:repeating-linear-gradient(60deg,#d9b88a 0 8px,#c39a63 8px 14px)}
.knot{position:absolute;top:50%;left:var(--k,50%);font-size:1.8rem;font-style:normal;transform:translate(-50%,-55%);transition:left 1s cubic-bezier(.3,1.5,.5,1)}
.line::before,.line::after{content:"";position:absolute;top:-8px;bottom:-8px;width:3px;border-radius:2px;left:50%;background:var(--mut);opacity:.4}
.tug-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.vote{border:0;padding:13px 8px;border-radius:16px;font:800 .95rem "Nunito";color:#fff;cursor:pointer;transition:transform .15s}
.vote:active{transform:scale(.95)}
.vote.b{background:var(--blue-d);box-shadow:0 5px 0 #2b6fa8}.vote.p{background:var(--pink-d);box-shadow:0 5px 0 #b9467a}
.tug.voted .vote{opacity:.55;pointer-events:none}
.tug.voted .vote.mine{opacity:1}
.tug-msg{margin-top:12px;font-size:.9rem;color:var(--mut)}
.tug.pull-b .rope .side.b,.tug.pull-p .rope .side.p{animation:tug .3s ease-in-out 3}
@keyframes tug{50%{transform:translateX(var(--d,0)) scale(1.15)}}
.side.b{--d:-6px}.side.p{--d:6px}

/* Mitos */
.myths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.myth{position:relative;height:150px;border:0;padding:0;background:none;perspective:800px;cursor:pointer}
.myth span{position:absolute;inset:0;display:grid;place-content:center;gap:4px;padding:14px;border-radius:22px;backface-visibility:hidden;transition:transform .7s cubic-bezier(.4,1.4,.5,1);font-weight:800;line-height:1.3}
.myth .f{background:#fff;color:var(--ink);box-shadow:0 10px 22px rgba(61,58,92,.1)}
.myth .f b{font-size:2.2rem}
.myth .bk{transform:rotateY(180deg);color:#fff;font-size:1.05rem}
.myth .bk .t{font-style:normal;display:block}
.myth .bk em{font-style:normal;font-family:"Lilita One";font-size:1.4em;font-weight:400}
.myth[data-team="b"] .bk{background:linear-gradient(135deg,var(--blue),var(--blue-d))}
.myth[data-team="p"] .bk{background:linear-gradient(135deg,var(--pink),var(--pink-d))}
.myth.on .f{transform:rotateY(-180deg)}
.myth.on .bk{transform:rotateY(0)}
.score{margin-top:16px;font-weight:800}

/* Detalles */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:22px}
.tile{padding:18px 12px;border-radius:22px;background:#fff;box-shadow:0 10px 22px rgba(61,58,92,.08)}
.tile b{font-size:2rem;display:inline-block;animation:bob 3s ease-in-out infinite}
.tile:nth-child(2) b{animation-delay:-.8s}.tile:nth-child(3) b{animation-delay:-1.6s}.tile:nth-child(4) b{animation-delay:-2.2s}
.tile h3{font:400 1.2rem "Lilita One";margin:2px 0}
.tile p{font-size:.9rem;color:var(--mut);line-height:1.4}
.tile a{display:inline-block;margin-top:6px;color:#8d7fd8;font-weight:800;font-size:.88rem;text-decoration:none}
.tile.dress{background:linear-gradient(110deg,#e8f5fd 0 50%,#feeef5 50%)}
.plan{list-style:none;padding:0;margin:0 auto;max-width:460px;display:grid;gap:10px;text-align:left}
.plan li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:#fff;box-shadow:0 8px 18px rgba(61,58,92,.07)}
.plan li:nth-child(odd){border-left:6px solid var(--blue)}
.plan li:nth-child(even){border-left:6px solid var(--pink)}
.plan time{font:400 1.15rem "Lilita One";min-width:52px;color:#8d7fd8}
.plan span{font-size:1.4rem}

/* Simulador */
.sim{display:grid;justify-items:center;gap:22px}
.sim-box{position:relative;width:min(72vw,260px);aspect-ratio:1;border-radius:32px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(110deg,#cfe9fb 0 50%,#fcd9e8 50%);box-shadow:0 20px 40px rgba(61,58,92,.18),inset 0 0 0 6px #fff;transition:background .6s}
.sim-box span{font:400 6rem/1 "Lilita One";color:#fff;text-shadow:0 5px 0 rgba(0,0,0,.12);transition:transform .4s cubic-bezier(.3,1.8,.5,1)}
.sim-box.count span{animation:countp .8s ease-out}
@keyframes countp{0%{transform:scale(2.2);opacity:0}30%{opacity:1;transform:scale(1)}100%{transform:scale(.8)}}
.sim-box.res-b{background:radial-gradient(circle,#bfe5fb,var(--blue-d))}
.sim-box.res-p{background:radial-gradient(circle,#ffd3e5,var(--pink-d))}
.sim-box.res-b span,.sim-box.res-p span{font-size:2.4rem;line-height:1.1;animation:beat 1.2s ease-in-out infinite;padding:0 10px}

/* RSVP */
.panel{max-width:440px;margin:0 auto;padding:24px 20px;border-radius:28px;background:#fff;box-shadow:0 18px 40px rgba(61,58,92,.14)}
.rsvp-form label{font-weight:800;font-size:.92rem;color:var(--ink)}
.rsvp-form input,.rsvp-form select,.rsvp-form textarea{border:2px solid #ece8f6;background:#fbfaff;color:var(--ink)}
.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus{outline:none;border-color:#8d7fd8}
.rsvp-choice label{border:2px solid #ece8f6;font-weight:800}
.rsvp-choice input:checked+label{background:#8d7fd8;border-color:#8d7fd8;color:#fff}
.rsvp-choice input:focus-visible+label,.teams input:focus-visible+label{outline:3px solid var(--gold)}
.teams{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.teams legend{font-weight:800;font-size:.92rem;margin-bottom:6px;padding:0}
.teams input{position:absolute;opacity:0;pointer-events:none}
.teams label{display:block;text-align:center;padding:12px;border-radius:16px;border:2px solid #ece8f6;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.8,.5,1)}
.teams input:checked+label.b{background:var(--blue-d);border-color:var(--blue-d);color:#fff;transform:scale(1.04) rotate(-2deg)}
.teams input:checked+label.p{background:var(--pink-d);border-color:var(--pink-d);color:#fff;transform:scale(1.04) rotate(2deg)}
.ok-i{font-size:3.4rem;animation:beat 1.2s ease-in-out infinite}
.rsvp-ok h3{font:400 1.8rem "Lilita One";background:linear-gradient(90deg,var(--blue-d),var(--pink-d));-webkit-background-clip:text;background-clip:text;color:transparent;margin:6px 0}
.rsvp-ok p{color:var(--mut);margin-bottom:14px}

.foot{text-align:center;padding:50px 18px 120px;position:relative;z-index:2;color:var(--mut)}
.foot-t{font:400 2rem "Pacifico",cursive;color:var(--ink)}
.tag{font-weight:800;color:#8d7fd8}