:root {
  --rosa: #FF3EC8;
  --morado: #A63DFF;
  --rosa-claro: #FF7AD9;
  --lila: #E6CCFF;
  --rosa-pastel: #FFC9F1;
  --uva: #2B0F4F;
  --noche: #12061F;
  --bg: #0B0414;
  --text: #F6EEFF;
  --muted: #BCA6D9;
  --neon: linear-gradient(90deg, var(--morado), var(--rosa));
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Outfit', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.px-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Fondo ─────────────────────────────────────────────────────────────── */
.bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 30%, #3A1170 0%, #1A0833 45%, var(--bg) 100%);
}
.bg__grid {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 30vh;
  opacity: .6;
}
.bg__star { position: absolute; width: 18px; height: 18px; animation: twinkle 3.2s ease-in-out infinite; }
.bg__star:nth-child(2) { top: 14%; left: 12%; animation-delay: .4s; }
.bg__star:nth-child(3) { top: 22%; right: 14%; width: 12px; height: 12px; animation-delay: 1.3s; }
.bg__star:nth-child(4) { top: 48%; left: 7%; width: 10px; height: 10px; animation-delay: 2.1s; }
.bg__star:nth-child(5) { top: 9%; right: 34%; width: 10px; height: 10px; animation-delay: .9s; }
.bg__star:nth-child(6) { top: 52%; right: 8%; width: 14px; height: 14px; animation-delay: 1.8s; }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }

/* ── Layout ────────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.header { padding: 24px 0; }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: block; line-height: 0; }
.logo svg { width: 180px; height: auto; }

.hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 24px 0 120px; text-align: center;
}
.hero__art { display: flex; justify-content: center; }
.hero__bunny { width: min(320px, 78vw); height: auto; overflow: visible; animation: float 5s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 62, 200, .45);
  background: rgba(166, 61, 255, .12);
  color: var(--rosa-pastel); font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--rosa); box-shadow: 0 0 10px var(--rosa); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

h1 {
  margin: 16px 0 12px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1.05; letter-spacing: .01em;
}
h1 .grad {
  display: block;
  background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 62, 200, .35));
}
.lead { margin: 0 auto 28px; max-width: 34rem; color: var(--muted); font-size: 1.1rem; }

/* ── Formulario ────────────────────────────────────────────────────────── */
.notify { display: flex; flex-direction: column; gap: 10px; max-width: 440px; margin: 0 auto; }
.notify__row { display: flex; flex-direction: column; gap: 10px; }
.notify input[type=email] {
  width: 100%; padding: 14px 18px; border-radius: 14px;
  border: 1px solid rgba(230, 204, 255, .25); background: rgba(18, 6, 31, .7);
  color: var(--text); font: inherit;
}
.notify input[type=email]::placeholder { color: #8A74A8; }
.notify input[type=email]:focus { outline: none; border-color: var(--rosa); box-shadow: 0 0 0 3px rgba(255, 62, 200, .25); }
.notify .hp { position: absolute; left: -9999px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: 14px; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--rosa-pastel); outline-offset: 3px; }
.btn--neon { background: var(--neon); color: #fff; box-shadow: 0 6px 28px rgba(255, 62, 200, .4); }
.btn--neon:hover { box-shadow: 0 8px 36px rgba(255, 62, 200, .6); }
.btn--neon[disabled] { opacity: .6; cursor: wait; transform: none; }
.btn--ghost { background: transparent; color: var(--text); border: 1px solid rgba(230, 204, 255, .3); }
.btn--ghost:hover { border-color: #25D366; color: #fff; }
.btn svg { width: 20px; height: 20px; flex: none; }

.notify__msg { min-height: 1.6em; margin: 4px 0 0; font-size: .95rem; }
.notify__msg.ok { color: #7CF5C4; }
.notify__msg.err { color: var(--rosa-claro); }

.alt { margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); font-size: .95rem; }

/* ── Servicios ─────────────────────────────────────────────────────────── */
.teaser { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 36px 0 0; padding: 0; list-style: none; }
.teaser li {
  padding: 6px 14px; border-radius: 999px; font-size: .9rem;
  background: rgba(43, 15, 79, .6); border: 1px solid rgba(166, 61, 255, .35); color: var(--lila);
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer { padding: 24px 0 32px; font-size: .85rem; color: var(--muted); }
.footer .wrap { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.maze { display: inline-flex; line-height: 0; border-radius: 4px; }
.maze svg { width: auto; height: 32px; aspect-ratio: 309 / 63; fill: #fff; opacity: .6; transition: opacity .2s ease; }
.maze:hover svg { opacity: .9; }
.maze:focus-visible { outline: 2px solid var(--rosa-pastel); outline-offset: 4px; }

/* ── Desktop ───────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .notify__row { flex-direction: row; }
  .notify__row .btn { white-space: nowrap; }
  .alt { flex-direction: row; justify-content: center; }
  .logo svg { width: 220px; }
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); text-align: left; padding-top: 48px; }
  .hero__art { order: 2; }
  .hero__bunny { width: 480px; }
  .lead, .notify { margin-left: 0; }
  .alt, .teaser { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}