@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Poppins:wght@400;600;800&display=swap');

:root{
  --rose-50:#fff1f5;
  --rose-100:#ffe4e9;
  --rose-300:#fda4af;
  --rose-400:#fb7185;
  --rose-500:#f43f5e;
  --rose-600:#e11d48;
  --plum-600:#7c3aed;
  --bg-dark:#0b0a0c;
  --text:#f9fafb;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,ui-sans-serif;
  background:
    radial-gradient(1200px 700px at 20% -10%, #2b1a30 0%, transparent 60%),
    radial-gradient(900px 600px at 120% 10%, #2a133a 0%, transparent 60%),
    linear-gradient(160deg, #1a0f1f 0%, #100a12 35%, #0b0a0c 100%);
  overflow:hidden;
}

/* Contenedor principal */
.wrap{
  position:relative;
  z-index:2;
  width:100%;
  max-width:920px;
  margin-inline:auto;
  min-height:100dvh;
  padding:72px 24px 48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:16px;
}

/* Saludo romántico */
.greetings{
  margin:0;
  font-family:'Great Vibes', cursive;
  font-weight:400;
  font-size:clamp(3.2rem, 7vw + 1rem, 6.5rem);
  line-height:1;
  letter-spacing:.04em;
  text-shadow: 0 0 18px rgba(251,113,133,.25);
  animation: titleGlow 5s ease-in-out infinite;
}

/* FIX: aplica el degradado a h1 y a todos los spans internos */
.greetings,
.greetings span{
  background: linear-gradient(90deg, var(--rose-300), var(--rose-500), var(--plum-600));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@keyframes titleGlow{
  0%,100%{ text-shadow: 0 0 18px rgba(251,113,133,.25), 0 0 42px rgba(124,58,237,.12); }
  50%{ text-shadow: 0 0 28px rgba(251,113,133,.45), 0 0 64px rgba(124,58,237,.28); }
}

.greetings .spark{
  display:inline-block;
  animation: twinkle 3s ease-in-out infinite;
}
.greetings .spark:nth-of-type(1){ animation-delay:.2s; }
.greetings .spark:nth-of-type(2){ animation-delay:.5s; }

@keyframes twinkle{
  0%,100%{ transform:translateY(0); filter:brightness(1); }
  50%{ transform:translateY(-6px); filter:brightness(1.35); }
}

.greetings .heart{
  display:inline-block;
  margin-left:.1em;
  font-size:.6em;
  filter: drop-shadow(0 0 8px rgba(244,63,94,.5));
  animation: beat 1.6s ease-in-out infinite;
}
@keyframes beat{
  0%,100%{ transform:scale(1); }
  25%{ transform:scale(1.15); }
  50%{ transform:scale(0.98); }
  75%{ transform:scale(1.12); }
}

/* Descripción */
.description{
  margin:8px 0 6px;
  font-size:clamp(1.05rem, 1.8vw, 1.35rem);
  color:#f6dde3;
  opacity:.95;
}

/* Nota al pie */
.footnote{
  margin-top:8px;
  color:#f8cdd7;
  opacity:.85;
}

/* Botón con gradiente y latido */
.button{ margin-top:4px; }
.btn-love{
  --pad-y:12px; --pad-x:22px;
  display:inline-flex; align-items:center; gap:10px;
  padding:var(--pad-y) var(--pad-x);
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.02em;
  font-size:clamp(.95rem, 1.6vw, 1.05rem);
  color:#fff;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.15) 0%, transparent 40%),
    linear-gradient(90deg, var(--rose-600), var(--rose-500), var(--plum-600));
  box-shadow:
    0 10px 30px rgba(244,63,94,.35),
    inset 0 0 0 1px rgba(255,255,255,.2);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  position:relative;
  isolation:isolate;
}
.btn-love:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:
    0 16px 40px rgba(244,63,94,.5),
    inset 0 0 0 1px rgba(255,255,255,.24);
  filter:saturate(1.1);
}
.btn-love:active{ transform:translateY(0) scale(.99); }

.icon-heart{
  fill:#fff;
  transform-origin:center;
  animation: tinyBeat 1.3s ease-in-out infinite;
}
@keyframes tinyBeat{
  0%,100%{ transform:scale(1); }
  40%{ transform:scale(1.12); }
  60%{ transform:scale(0.96); }
}

/* Fondo animado de corazones (solo CSS) */
.bg-hearts{
  position:fixed; inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.bg-hearts span{
  position:absolute;
  left:var(--x);
  top:110%;
  width:18px; height:18px;
  background:
    radial-gradient(65% 65% at 35% 35%, #fff 0 35%, transparent 36%),
    radial-gradient(65% 65% at 65% 35%, #fff 0 35%, transparent 36%),
    radial-gradient(100% 80% at 50% 80%, #fff 0 42%, transparent 43%);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.35)) drop-shadow(0 0 28px rgba(251,113,133,.25));
  transform: rotate(45deg) translate(-50%, -50%);
  opacity:.08;
  animation: floatUp var(--dur) linear infinite;
}
/* Variaciones (10 corazones) */
.bg-hearts span:nth-child(1){ --x: 10%; --dur: 12s; animation-delay: -1s; }
.bg-hearts span:nth-child(2){ --x: 22%; --dur: 16s; animation-delay: -5s; }
.bg-hearts span:nth-child(3){ --x: 35%; --dur: 14s; animation-delay: -9s; }
.bg-hearts span:nth-child(4){ --x: 48%; --dur: 20s; animation-delay: -3s; }
.bg-hearts span:nth-child(5){ --x: 60%; --dur: 18s; animation-delay: -7s; }
.bg-hearts span:nth-child(6){ --x: 72%; --dur: 15s; animation-delay: -12s; }
.bg-hearts span:nth-child(7){ --x: 80%; --dur: 19s; animation-delay: -6s; }
.bg-hearts span:nth-child(8){ --x: 88%; --dur: 13s; animation-delay: -10s; }
.bg-hearts span:nth-child(9){ --x: 5%;  --dur: 17s; animation-delay: -4s; }
.bg-hearts span:nth-child(10){ --x: 93%; --dur: 21s; animation-delay: -8s; }

@keyframes floatUp{
  0%   { transform: translateY(0) rotate(45deg) scale(.9); opacity:.08; }
  70%  { opacity:.12; }
  100% { transform: translateY(-125vh) rotate(45deg) scale(1.1); opacity:0; }
}

/* Accesibilidad: enfoque visible en el botón */
.btn-love:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.15),
    0 0 0 8px rgba(244,63,94,.35),
    0 16px 40px rgba(244,63,94,.55),
    inset 0 0 0 1px rgba(255,255,255,.28);
}

/* Responsivo */
@media (max-width: 574px){
  .description{ font-size:1.1rem; padding:0 .25rem; }
  .btn-love{ padding:12px 18px; }
}