:root{
  --lila:#EBD9F7;
  --lila-hondo:#C9A8E9;
  --crema:#FFF7EC;
  --rosa:#FF7C9C;
  --menta:#7FD8B8;
  --uva:#4B2A5E;
  --cereza:#EF4B57;
  --radio:26px;
  --sombra:0 6px 0 rgba(75,42,94,.14);
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--lila);
  color:var(--uva);
  font-family:Nunito,system-ui,sans-serif;
  font-size:17px;
  line-height:1.55;
  overflow-x:hidden;
}

/* burbujas de fondo, como la lonchera */
.burbujas{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.5) 0 34px, transparent 35px),
    radial-gradient(circle at 84% 9%,  rgba(255,255,255,.38) 0 22px, transparent 23px),
    radial-gradient(circle at 92% 44%, rgba(255,255,255,.42) 0 40px, transparent 41px),
    radial-gradient(circle at 6% 62%,  rgba(255,255,255,.36) 0 26px, transparent 27px),
    radial-gradient(circle at 74% 86%, rgba(255,255,255,.34) 0 30px, transparent 31px);
}

main{
  position:relative; z-index:1;
  width:100%; max-width:34rem;
  margin:0 auto;
  padding:18px 18px 44px;
}

/* ---------- portada ---------- */
.portada{text-align:center}

.antes{
  margin:6px 0 0;
  font-size:.98rem; font-weight:700;
  color:#7A5490;
}

.vaso{display:block; margin:0 auto -4px; max-width:21rem}
.vaso img{width:100%; height:auto; display:block; filter:drop-shadow(0 8px 14px rgba(75,42,94,.22))}

h1{
  margin:0;
  font-family:Fredoka,Nunito,sans-serif;
  font-weight:600;
  line-height:.94;
  display:flex; flex-direction:column; align-items:center;
}
.nombre{
  font-size:clamp(2.4rem,12.5vw,4rem);
  text-wrap:balance;
  overflow-wrap:break-word;
  max-width:100%;
  color:var(--uva);
  letter-spacing:-.01em;
  text-shadow:0 4px 0 #fff, 0 5px 0 var(--lila-hondo);
}
.cumple{
  margin-top:.1em;
  font-size:clamp(1.15rem,5.4vw,1.6rem);
  font-weight:500;
  color:var(--rosa);
}

/* ---------- perlas de boba como separador ---------- */
.perlas{display:flex; gap:11px; justify-content:center; margin:26px 0 22px}
.perlas i{width:13px; height:13px; border-radius:50%; background:#6B3A7A; opacity:.5}
.perlas i:nth-child(2){background:var(--rosa); opacity:.75; width:16px; height:16px; margin-top:-2px}

/* ---------- datos ---------- */
.datos{
  background:var(--crema);
  border:4px solid var(--uva);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:22px 20px 18px;
}

.dato{display:flex; gap:13px; align-items:flex-start; margin-bottom:18px}
.dato:last-of-type{margin-bottom:20px}
.dato > div{display:flex; flex-direction:column}
.dato b{font-size:1.1rem; font-weight:700; line-height:1.25}
.dato span{color:#6E4C84; font-size:.95rem}
.dato .dir{margin-top:3px; font-size:.9rem; line-height:1.4}

/* huellita de patita dibujada en CSS */
.huella{
  flex:0 0 34px; height:34px; margin-top:3px;
  border-radius:12px;
  background:
    radial-gradient(circle at 26% 30%, var(--menta) 0 4.4px, transparent 5px),
    radial-gradient(circle at 47% 20%, var(--menta) 0 4.4px, transparent 5px),
    radial-gradient(circle at 68% 30%, var(--menta) 0 4.4px, transparent 5px),
    radial-gradient(circle at 47% 62%, var(--menta) 0 9px, transparent 9.6px),
    var(--lila);
}

.botones{display:flex; flex-wrap:wrap; gap:9px}

.notas{
  list-style:none; margin:18px 0 0; padding:14px 0 0;
  border-top:3px dashed var(--lila-hondo);
  font-size:.95rem;
}
.notas li{margin:5px 0; color:#6E4C84}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  flex:1 1 auto; min-height:48px;
  padding:12px 18px;
  font-family:Nunito,sans-serif; font-size:1rem; font-weight:700;
  text-decoration:none; text-align:center;
  color:var(--uva);
  background:#fff;
  border:3.5px solid var(--uva);
  border-radius:16px;
  box-shadow:0 4px 0 var(--uva);
  cursor:pointer;
  transition:transform .09s ease, box-shadow .09s ease;
}
.btn:active{transform:translateY(4px); box-shadow:0 0 0 var(--uva)}
.btn:focus-visible{outline:4px solid var(--cereza); outline-offset:3px}
.btn-rosa{background:var(--rosa); color:#fff; width:100%; font-size:1.15rem; min-height:56px}
.btn-menta{background:var(--menta)}
.btn-plano{background:var(--crema)}


.gracias{display:flex; flex-direction:column; gap:13px; text-align:center}
.gracias h3{margin:0; font-family:Fredoka,sans-serif; font-weight:600; font-size:1.6rem}
.gracias p{margin:0; color:#6E4C84}
.sello{
  width:76px; height:76px; margin:2px auto 0;
  border-radius:50%;
  border:4px solid var(--uva);
  background:
    radial-gradient(circle at 27% 32%, var(--rosa) 0 9px, transparent 10px),
    radial-gradient(circle at 50% 22%, var(--rosa) 0 9px, transparent 10px),
    radial-gradient(circle at 73% 32%, var(--rosa) 0 9px, transparent 10px),
    radial-gradient(circle at 50% 66%, var(--rosa) 0 18px, transparent 19px),
    var(--menta);
  animation:sello .45s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes sello{from{transform:scale(.2) rotate(-25deg); opacity:0} to{transform:none; opacity:1}}

/* ---------- confirmar ---------- */
.rsvp{
  background:#fff;
  border:4px solid var(--uva);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:24px 20px;
}
.rsvp h2{
  margin:0;
  font-family:Fredoka,sans-serif; font-weight:600;
  font-size:1.75rem; line-height:1.1;
}
.rsvp .sub{margin:.4em 0 20px; font-size:.95rem; color:#6E4C84}

.rsvp .btn-rosa{margin-top:4px}
.btn-ancho{width:100%}
.numero{margin:10px 0 0; text-align:center; font-family:Fredoka,sans-serif;
  font-size:1.5rem; font-weight:600; letter-spacing:.02em}
.numero a{color:var(--uva); text-decoration:none}
.o{margin:14px 0 12px; text-align:center; font-size:.9rem; font-weight:700; color:#8B6BA0}
.directo{margin:20px 0 0; font-size:.9rem; text-align:center; color:#6E4C84}

footer{margin:30px 0 0; text-align:center; font-size:.85rem; color:#7A5490}
footer p{margin:3px 0}
.patitas{font-size:1.3rem}

/* un solo momento de movimiento: el vaso entra al cargar */
@media (prefers-reduced-motion:no-preference){
  .vaso img{animation:entra .8s cubic-bezier(.2,.9,.3,1) both}
  @keyframes entra{from{transform:translateY(26px) scale(.96); opacity:0} to{transform:none; opacity:1}}
}

@media (min-width:36rem){
  main{padding:34px 20px 60px}
  .datos,.rsvp{padding:30px 30px 26px}
}