/* =========================================================================
   Cena de fin de año · Arrieta Vision
   ========================================================================= */

@font-face{font-family:'Montserrat Variable';font-weight:100 900;font-display:swap;src:url('montserrat.woff2') format('woff2-variations')}
@font-face{font-family:'Inter Variable';font-weight:100 900;font-display:swap;src:url('inter.woff2') format('woff2-variations')}
:root{
  --noche:#020b18;--noche-2:#071529;--marino:#00132c;--marino-6:#00306e;--marino-5:#124a92;
  --turq:#00c2d9;--turq-2:#34d5e8;--turq-1:#d6f6fa;--marfil:#f5f2ec;
  --suave:rgba(243,241,236,.74);--tenue:rgba(243,241,236,.52);--linea:rgba(243,241,236,.14);
  --tit:'Montserrat Variable','Inter Variable',system-ui,sans-serif;
  --txt:'Inter Variable',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.75,.15,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--noche);color:var(--marfil);font-family:var(--txt);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---------- fondo animado ---------- */
.fondo{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,var(--noche) 0%,var(--noche-2) 60%,var(--marino) 100%)}
.aurora{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.a1{width:70vmax;height:70vmax;left:-25vmax;top:-30vmax;background:radial-gradient(circle,var(--marino-5) 0%,transparent 65%);animation:deriva1 18s ease-in-out infinite alternate}
.a2{width:60vmax;height:60vmax;right:-25vmax;bottom:-20vmax;background:radial-gradient(circle,rgba(0,194,217,.55) 0%,transparent 62%);animation:deriva2 22s ease-in-out infinite alternate}
.a3{width:40vmax;height:40vmax;left:30%;top:35%;background:radial-gradient(circle,rgba(0,48,110,.8) 0%,transparent 65%);animation:deriva1 26s ease-in-out infinite alternate-reverse}
@keyframes deriva1{to{transform:translate(18vw,14vh) scale(1.15)}}
@keyframes deriva2{to{transform:translate(-20vw,-18vh) scale(1.2)}}
.grano{position:absolute;inset:-50%;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.luz{position:absolute;border-radius:50%;background:radial-gradient(circle,#fff 0%,rgba(52,213,232,.6) 35%,transparent 70%);opacity:0;animation:flotar linear infinite}
@keyframes flotar{0%{transform:translateY(0) scale(.5);opacity:0}15%{opacity:var(--o)}85%{opacity:var(--o)}100%{transform:translateY(-80vh) scale(1);opacity:0}}

/* ---------- hero ---------- */
.hero{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:max(28px,env(safe-area-inset-top)) 22px 28px}
.marca{width:min(200px,50vw);margin-top:6px}
.centro{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:760px;padding:6vh 0 4vh}
.kicker{font:500 clamp(1.05rem,4.2vw,1.3rem)/1.2 var(--tit);color:var(--turq-2)}
h1{font-family:var(--tit);line-height:.95;letter-spacing:-.03em;margin-top:10px}
.l{display:block;overflow:hidden;padding:.04em .06em .08em}
.l>span{display:inline-block;transform:translateY(110%);animation:sube 1.1s var(--ease) forwards}
.l1{font-weight:300;font-size:clamp(3rem,13vw,6.4rem)}
.l2{font-weight:800;font-size:clamp(3.4rem,15vw,7.6rem);letter-spacing:-.045em}
.l1>span{animation-delay:.35s}.l2>span{animation-delay:.5s}
@keyframes sube{to{transform:none}}
.brillo{background:linear-gradient(100deg,#fff 0%,var(--turq-1) 30%,var(--turq-2) 50%,#fff 70%,var(--turq-1) 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:sube 1.1s var(--ease) .5s forwards,brilla 6s linear 1.6s infinite}
@keyframes brilla{from{background-position:100% 0}to{background-position:-150% 0}}
.bajada{margin-top:18px;font-size:clamp(1.02rem,3.8vw,1.2rem);color:var(--suave)}

.fecha{margin-top:38px;display:flex;border:1px solid var(--linea);border-radius:22px;background:rgba(7,21,41,.5);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:hidden;position:relative}
.fecha::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--ang),transparent 0 70%,var(--turq-2) 85%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:gira 5s linear infinite}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes gira{to{--ang:360deg}}
.fecha>div{padding:15px 22px;display:flex;flex-direction:column;justify-content:center;gap:5px}
.fecha>div+div{border-left:1px solid var(--linea)}
.fecha small{font:500 .8rem/1 var(--txt);color:var(--tenue)}
.fecha strong{font:700 1.15rem/1.1 var(--tit);white-space:nowrap}
.fecha .dia strong{font-size:2.6rem;font-weight:800;line-height:.9;color:var(--turq-2)}

.cuenta{margin-top:24px;display:flex;gap:10px;justify-content:center}
.cuenta div{min-width:72px;padding:12px 8px 10px;border-radius:14px;background:rgba(0,194,217,.08);border:1px solid rgba(52,213,232,.18)}
.cuenta span{display:block;font:700 1.75rem/1 var(--tit);font-variant-numeric:tabular-nums}
.cuenta span.tic{animation:tic .45s var(--ease)}
@keyframes tic{from{transform:translateY(-35%);opacity:0}to{transform:none;opacity:1}}
.cuenta i{display:block;margin-top:6px;font:500 .78rem/1 var(--txt);font-style:normal;color:var(--tenue)}
.cuenta.solo div{display:flex;align-items:baseline;gap:8px;padding:12px 20px}
.cuenta.solo span{font-size:1.9rem}.cuenta.solo i{margin:0;font-size:.95rem;color:var(--suave)}

.bajar{margin-top:8px;width:28px;height:44px;border:1.5px solid var(--linea);border-radius:20px;position:relative}
.bajar::after{content:"";position:absolute;left:50%;top:9px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--turq-2);animation:rueda 1.8s ease-in-out infinite}
@keyframes rueda{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* ---------- cinta ---------- */
.cinta{position:relative;z-index:2;margin:10px -5vw 0;transform:rotate(-2.5deg);background:var(--turq);color:var(--noche);
  overflow:hidden;padding:15px 0;box-shadow:0 20px 50px -15px rgba(0,194,217,.55)}
.cinta .pista{display:flex;width:max-content;animation:corre 26s linear infinite}
.cinta span{font:800 clamp(1.05rem,4vw,1.4rem)/1 var(--tit);letter-spacing:-.01em;white-space:nowrap;padding:0 22px;display:flex;align-items:center;gap:44px}
.cinta span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--noche)}
@keyframes corre{to{transform:translateX(-50%)}}

/* ---------- lugar ---------- */
.lugar{position:relative;z-index:1;margin-top:-34px;height:min(92svh,820px);min-height:520px;overflow:hidden}
.lugar .img{position:absolute;inset:-12% 0;will-change:transform}
.lugar img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;display:block;animation:ken 20s ease-in-out infinite alternate}
@keyframes ken{from{transform:scale(1.04)}to{transform:scale(1.16)}}
.lugar{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 90%,transparent 100%)}
.lugar::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,11,24,.25) 0%,transparent 30%,rgba(2,11,24,.35) 55%,rgba(2,11,24,.92) 88%)}
.lugar .texto{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 24px 76px;text-align:center}
.etq{font:600 1.05rem/1 var(--tit);color:var(--turq-2)}
.lugar .texto{text-shadow:0 2px 24px rgba(2,11,24,.7)}
.lugar h2{font:800 clamp(2.4rem,11vw,5rem)/.95 var(--tit);letter-spacing:-.04em;margin-top:10px}
.lugar p{margin-top:14px;color:var(--suave);line-height:1.5;font-size:1.02rem}

/* ---------- acciones ---------- */
.acciones{position:relative;z-index:1;display:grid;gap:10px;width:100%;max-width:560px;margin:0 auto;padding:4px 22px 0}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 18px;border-radius:16px;
  font:700 1rem/1 var(--tit);text-decoration:none;cursor:pointer;border:0;transition:transform .2s var(--ease),background .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.btn svg{width:20px;height:20px;flex:none}
.btn:active{transform:scale(.96)}
.btn-pri{background:var(--turq);color:var(--noche);box-shadow:0 14px 34px -12px rgba(0,194,217,.8)}
.btn-pri::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:destello 3.6s ease-in-out 2s infinite}
@keyframes destello{0%{left:-60%}35%,100%{left:130%}}
.btn-pri:hover{background:var(--turq-2);transform:translateY(-2px)}
.btn-sec{background:rgba(243,241,236,.06);color:var(--marfil);border:1px solid var(--linea)}
.btn-sec:hover{background:rgba(243,241,236,.12);transform:translateY(-2px)}

footer{position:relative;z-index:1;text-align:center;padding:64px 22px max(40px,env(safe-area-inset-bottom))}
footer h3{font:300 clamp(2rem,9vw,3.4rem)/1 var(--tit);letter-spacing:-.03em}
footer h3 b{font-weight:800;color:var(--turq-2)}
footer img{width:120px;margin-top:28px;opacity:.6}

/* revelar al scrollear */
.rev{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rev.in{opacity:1;transform:none}
.entra{opacity:0;transform:translateY(16px);animation:entrar 1s var(--ease) forwards}
@keyframes entrar{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.2s}.d4{animation-delay:.8s}.d5{animation-delay:.95s}.d6{animation-delay:1.1s}.d7{animation-delay:1.4s}

/* hoja agendar + aviso */
.hoja{position:fixed;inset:0;z-index:10;display:none;align-items:flex-end;justify-content:center;background:rgba(2,11,24,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hoja.abierta{display:flex}
.hoja-caja{width:100%;max-width:560px;margin:0 12px max(12px,env(safe-area-inset-bottom));padding:18px;border-radius:22px;background:var(--noche-2);border:1px solid var(--linea);display:grid;gap:10px;animation:subir .3s var(--ease)}
.hoja-caja h4{font:700 1.05rem/1 var(--tit);padding:6px 4px 8px;text-align:left}
@keyframes subir{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.aviso{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:20;background:var(--marfil);color:var(--noche);
  font:600 .92rem/1 var(--tit);padding:14px 20px;border-radius:999px;opacity:0;pointer-events:none;transition:.3s var(--ease)}
.aviso.ver{opacity:1;transform:translate(-50%,0)}

@media (max-width:420px){
  .fecha>div{padding:14px 14px}.fecha strong{font-size:1rem}.fecha .dia strong{font-size:2.2rem}
  .cuenta div{min-width:64px}.cuenta span{font-size:1.5rem}
}
@media (min-width:900px){
  .lugar{max-width:1120px;height:640px;margin:-10px auto 36px;border-radius:30px;-webkit-mask-image:none;mask-image:none;box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
  .lugar::after{background:linear-gradient(180deg,transparent 35%,rgba(2,11,24,.5) 60%,rgba(2,11,24,.92) 100%)}
  .lugar .texto{padding-bottom:52px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.entra,.rev,.l>span{opacity:1;transform:none}.brillo{color:#fff}}

/* =========================================================================
   Confirmación de asistencia
   ========================================================================= */

.rsvp{position:relative;z-index:1;width:100%;max-width:560px;margin:46px auto 0;padding:0 22px;scroll-margin-top:18px}
.rsvp-caja{padding:26px 22px 24px;border-radius:24px;border:1px solid var(--linea);
  background:rgba(7,21,41,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.rsvp h2{font:800 clamp(1.5rem,6vw,2rem)/1.05 var(--tit);letter-spacing:-.03em}
.rsvp .sub{margin-top:10px;color:var(--suave);line-height:1.55;font-size:1rem}
.rsvp .sub b{color:var(--marfil);font-weight:600}

form{display:grid;gap:14px;margin-top:22px}
.campo{display:grid;gap:7px}
.campo label,.grupo legend{font:500 .88rem/1 var(--txt);color:var(--tenue)}
.campo input{width:100%;min-height:54px;padding:0 16px;border-radius:16px;
  background:rgba(243,241,236,.06);border:1px solid var(--linea);color:var(--marfil);
  font:400 1rem/1 var(--txt);transition:border-color .2s var(--ease),background .2s var(--ease)}
.campo input::placeholder{color:rgba(243,241,236,.32)}
.campo input:hover{background:rgba(243,241,236,.1)}
.campo input:focus{outline:none;border-color:var(--turq);background:rgba(0,194,217,.1)}
.campo input:focus-visible{outline:2px solid var(--turq-2);outline-offset:2px}

.grupo{border:0;padding:0;margin:0;display:grid;gap:7px}
.asistencia{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.asistencia input{position:absolute;opacity:0;width:0;height:0}
.asistencia label{display:flex;align-items:center;justify-content:center;min-height:54px;padding:0 10px;
  border-radius:16px;border:1px solid var(--linea);background:rgba(243,241,236,.06);
  font:600 .96rem/1.2 var(--tit);color:var(--suave);text-align:center;cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.asistencia label:hover{background:rgba(243,241,236,.12);color:var(--marfil)}
.asistencia input:checked+label{border-color:var(--turq);background:rgba(0,194,217,.16);color:var(--marfil)}
.asistencia input:focus-visible+label{outline:2px solid var(--turq-2);outline-offset:2px}

.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alerta{padding:13px 16px;border-radius:14px;border:1px solid rgba(255,154,139,.4);
  background:rgba(255,154,139,.12);color:#ff9a8b;font-size:.93rem;line-height:1.45}
.chica{margin-top:2px;font-size:.82rem;line-height:1.5;color:var(--tenue)}

/* --- Gracias --- */
.gracias{text-align:center;padding:30px 22px 26px}
.tilde{width:62px;height:62px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,194,217,.16);border:1px solid rgba(52,213,232,.4)}
.tilde svg{width:30px;height:30px;color:var(--turq-2)}
.gracias h2{font:800 clamp(1.6rem,6.5vw,2.2rem)/1.05 var(--tit);letter-spacing:-.03em}
.gracias p{margin-top:12px;color:var(--suave);line-height:1.55}
.gracias p b{color:var(--marfil);font-weight:600}
.gracias .acciones{margin-top:24px;padding:0}
.btn-wa{background:#25d366;color:#04240f;box-shadow:0 14px 34px -12px rgba(37,211,102,.7)}
.btn-wa:hover{background:#43e07d;transform:translateY(-2px)}
.otra-vez{display:inline-block;margin-top:18px;font-size:.88rem;color:var(--tenue);
  text-decoration:none;border-bottom:1px solid var(--linea)}
.otra-vez:hover{color:var(--marfil);border-bottom-color:var(--turq)}

@media (max-width:420px){
  .asistencia{grid-template-columns:1fr}
}

/* Fuegos artificiales al confirmar: por encima de todo, sin estorbar el toque */
.fuegos{position:fixed;inset:0;z-index:15;pointer-events:none}