:root{
  --morado:#2e1f66; --morado2:#4b32a3; --violeta:#7b3fe4; --naranja:#f58a1f; --calabaza:#ffa726;
  --lima:#b4f03a; --crema:#fff3d6; --noche:#1b1040;
  --titulo:'Creepster',cursive; --script:'Pacifico',cursive; --fuente:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fuente);background:var(--morado);color:var(--crema);line-height:1.55;overflow-x:hidden}
h2{font-family:var(--titulo);font-weight:400;letter-spacing:.04em;font-size:clamp(2.1rem,8vw,3.2rem);color:var(--lima);line-height:1.1;margin-bottom:.7rem}
p{max-width:34rem;margin-inline:auto}
.seccion{position:relative;z-index:1;padding:4.5rem 1.25rem 4rem;text-align:center;overflow:hidden}
.web{position:absolute;top:0;width:150px;height:150px;pointer-events:none}
.web.izq{left:0}.web.der{right:0;transform:scaleX(-1)}

/* Parallax global: capa fija detrás de toda la página */
.parallax-global{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,#2e1f66,#4b32a3 55%,#7b3fe4)}
.parallax-global::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#fff 1.4px,transparent 1.8px);background-size:70px 90px;opacity:.25}
.pg{position:absolute;left:var(--x);top:0;width:var(--s);height:auto;opacity:.45;will-change:translate}

/* 1. Portada */
.portada{min-height:100svh;display:grid;place-items:center;padding:0;background:var(--morado)}
.capa{position:absolute;will-change:translate;pointer-events:none}
.fondo{inset:-20% 0;background:radial-gradient(circle at 50% 45%,#5a3bbd 0,transparent 55%),linear-gradient(180deg,#2e1f66,#4b32a3 60%,#7b3fe4)}
.fondo::after{content:"";position:absolute;inset:0;background-image:radial-gradient(#fff 1.4px,transparent 1.8px);background-size:70px 90px;opacity:.35}
.portada .web{width:min(48vw,230px);height:min(48vw,230px)}
.calabaza{animation:flota 5s ease-in-out infinite}
.c1{width:110px;height:99px;top:7%;left:52%}
.c2{width:120px;height:108px;top:56%;right:-14px;animation-delay:-2s}
.c3{width:130px;height:117px;bottom:4%;left:-18px;animation-delay:-3.5s}
.murci{width:70px;height:35px;animation:aletea 2.4s ease-in-out infinite}
.m1{top:22%;left:6%}.m2{top:44%;right:8%;width:56px;height:28px;animation-delay:-1.2s}
@keyframes flota{50%{transform:translateY(-10px) rotate(3deg)}}
@keyframes aletea{50%{transform:scaleY(.7) translateY(-6px)}}
.hilo{position:absolute;top:0;left:22%;z-index:2;display:flex;flex-direction:column;align-items:center;animation:cuelga 4s ease-in-out infinite;transform-origin:top}
.hilo i{width:2px;height:90px;background:#f3e6c8}
.hilo svg{width:40px;height:40px}
@keyframes cuelga{50%{transform:rotate(5deg)}}
.portada-texto{position:relative;z-index:3;padding:5rem 1.25rem 3rem}
.cinta{display:inline-block;background:var(--lima);color:var(--noche);font-weight:800;padding:.35rem 1.6rem;clip-path:polygon(0 0,100% 0,95% 50%,100% 100%,0 100%,5% 50%);transform:rotate(-3deg)}
.invitado{margin-top:1.6rem;font-weight:600;letter-spacing:.12em}
.portada h1{font-family:var(--titulo);font-weight:400;font-size:clamp(3.8rem,19vw,8rem);line-height:1;color:var(--crema);text-shadow:0 4px 0 var(--naranja),0 10px 24px rgba(0,0,0,.4)}
.subtitulo{font-family:var(--script);color:var(--lima);font-size:clamp(1.8rem,8vw,3rem);margin-top:-.3rem;transform:rotate(-4deg)}
.fecha-grande{font-family:var(--titulo);color:var(--lima);font-size:clamp(1.8rem,8vw,2.8rem);margin-top:1.2rem;letter-spacing:.06em}

/* 2. Cuenta regresiva */
.cuenta{background:rgba(27,16,64,.72)}
.fecha-texto{margin-bottom:1.8rem;font-weight:600;text-transform:capitalize}
.contador{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;max-width:30rem;margin:0 auto}
.caja{background:var(--morado2);border:2px solid var(--naranja);border-radius:18px;padding:1rem .2rem}
.caja span{display:block;font-family:var(--titulo);font-size:clamp(1.9rem,9vw,2.9rem);color:var(--lima);font-variant-numeric:tabular-nums;line-height:1.1}
.caja small{font-size:.9rem}
.deco-calabaza{width:100px;height:90px;margin-top:2rem;animation:flota 5s ease-in-out infinite}

/* Tarjetas y botones */
.tarjeta{background:var(--crema);color:var(--noche);border-radius:26px;padding:1.8rem 1.4rem;max-width:26rem;margin:1.5rem auto 0;box-shadow:0 8px 0 var(--naranja),0 18px 36px rgba(0,0,0,.35)}
.tarjeta h3{font-size:1.4rem;margin-bottom:.4rem}
.boton{display:inline-block;margin-top:1.1rem;padding:.85rem 1.6rem;border:0;border-radius:999px;background:var(--lima);color:var(--noche);font:800 1.05rem var(--fuente);text-decoration:none;cursor:pointer;transition:transform .2s,filter .2s}
.boton:hover{transform:translateY(-2px);filter:brightness(1.07)}
.boton:focus-visible,.btn-musica:focus-visible,input:focus-visible{outline:3px solid var(--violeta);outline-offset:3px}
.boton:disabled{opacity:.7;cursor:default;transform:none}
.boton-wa{background:#25d366;display:block;width:fit-content;margin-inline:auto}

/* 3. Ubicación */
.ubicacion{background:linear-gradient(180deg,rgba(74, 50, 163, 0),rgba(46, 31, 102, 0))}
.ubicacion-imagen{display:block;width:7.5rem;height:7.5rem;margin:0 auto 1rem;border:4px solid var(--naranja);border-radius:50%;object-fit:cover}
.direccion-ubicacion{display:flex;align-items:center;justify-content:center;gap:.45rem}
.direccion-ubicacion svg{flex:none;width:1.25rem;height:1.25rem;fill:none;stroke:var(--naranja);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 4. Galería */
.galeria{background:rgba(46,31,102,.5)}
.carrusel{position:relative;max-width:26rem;aspect-ratio:4/5;margin:1.5rem auto 0;border-radius:26px;overflow:hidden;border:5px solid var(--naranja);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.slide{position:absolute;inset:0;background:var(--img) center/cover,linear-gradient(135deg,var(--violeta),var(--naranja));opacity:0;transform:scale(1.12) rotate(1.5deg);transition:opacity 1s ease,transform 5s ease}
.slide.activo{opacity:1;transform:scale(1) rotate(0)}
.puntos{display:flex;justify-content:center;gap:.5rem;margin-top:1rem}
.puntos span{width:11px;height:11px;border-radius:50%;background:var(--crema);opacity:.5;transition:.3s}
.puntos span.activo{background:var(--lima);opacity:1;transform:scale(1.3)}

/* Video vertical */
.video{background:linear-gradient(180deg,rgba(27,16,64,.55),rgba(75,50,163,.45))}
.marco-video{max-width:min(20rem,78vw);aspect-ratio:9/16;margin:1.6rem auto 0;border-radius:28px;overflow:hidden;border:5px solid var(--naranja);background:linear-gradient(160deg,var(--violeta),var(--noche));box-shadow:0 14px 34px rgba(0,0,0,.5)}
.marco-video video{display:block;width:100%;height:100%;object-fit:cover}

/* 5. Premios */
.premios{background:rgba(27,16,64,.72)}
.podio{display:flex;justify-content:center;align-items:flex-end;gap:.6rem;max-width:34rem;margin:2rem auto 0}
.premio{flex:1;background:var(--morado2);border:2px solid var(--naranja);border-radius:20px;padding:.8rem .4rem 1rem}
.premio.p1{transform:translateY(-14px);border-color:var(--lima);padding-bottom:1.6rem}
.premio-img{position:relative;aspect-ratio:1;margin-bottom:.4rem}
.premio-img svg,.premio-img img{position:absolute;inset:0;width:100%;height:100%}
.premio-img img{object-fit:contain;background:var(--morado2);border-radius:14px}
.premio h3{font-family:var(--titulo);font-weight:400;font-size:1.3rem;color:var(--lima)}
.premio p{font-size:.85rem}

/* 6. Confirmación */
.confirmar{background:linear-gradient(180deg,rgba(46,31,102,.45),rgba(123,63,228,.5))}
.tarjeta label{display:block;text-align:left;font-weight:800;margin-top:.8rem}
.tarjeta input{width:100%;margin-top:.3rem;padding:.75rem 1rem;border:2px solid var(--morado2);border-radius:14px;font:1rem var(--fuente);color:var(--noche)}
.mensaje{min-height:1.5rem;margin-top:.9rem;font-weight:700}

/* 7. Gracias */
.gracias{background:rgba(27,16,64,.82);padding-bottom:6rem}
.gracias p{margin-bottom:.8rem}
.firma{font-family:var(--script);font-size:1.6rem;color:var(--calabaza);margin-top:1rem}

/* Música */
.btn-musica{position:fixed;right:16px;bottom:16px;z-index:50;width:56px;height:56px;border:0;border-radius:50%;background:var(--naranja);color:var(--noche);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.ico-pausa{display:none}
.btn-musica.sonando .ico-play{display:none}
.btn-musica.sonando .ico-pausa{display:block}
.btn-musica.sonando{animation:pulso 1.6s infinite}
@keyframes pulso{50%{box-shadow:0 0 0 12px rgba(245,138,31,.3)}}

@media (min-width:700px){
  .seccion{padding-inline:2rem}.web{width:240px;height:240px}
  .c1{width:150px;height:135px}.c2{width:170px;height:153px}.c3{width:190px;height:171px}
  .murci{width:100px;height:50px}.premio h3{font-size:1.6rem}.premio p{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}