:root {
  --noche: #160b24;
  --noche-2: #24123a;
  --cempasuchil: #ff9f1c;
  --cempasuchil-2: #ffbf47;
  --rosa: #e8157a;
  --morado: #7b2cbf;
  --verde: #18a058;
  --azul: #2b7de9;
  --hueso: #fbf3e4;
  --hueso-tenue: #cbb9a8;
  --rojo: #e23d3d;
  --radio: 18px;
  font-family: "Rubik", system-ui, -apple-system, sans-serif;
  color: var(--hueso);
  background: var(--noche);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 159, 28, 0.28), transparent 60%),
    radial-gradient(ellipse at 50% -20%, rgba(123, 44, 191, 0.35), transparent 60%),
    var(--noche);
  background-attachment: fixed;
}

h1, h2, .display {
  font-family: "Rye", "Georgia", serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* ---------- Papel picado ---------- */
.papel-picado {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  position: relative;
  overflow: hidden;
}
.papel-picado::before {
  /* el cordón del que cuelgan */
  content: "";
  position: absolute;
  top: 3px; left: 0; right: 0;
  height: 2px;
  background: var(--hueso-tenue);
  opacity: 0.6;
}
.papel-picado span {
  flex: 0 0 auto;
  width: clamp(44px, 9vw, 110px);
  aspect-ratio: 4 / 5;
  background: var(--c, var(--rosa));
  clip-path: polygon(0 0, 100% 0, 100% 82%, 87.5% 100%, 75% 82%, 62.5% 100%, 50% 82%, 37.5% 100%, 25% 82%, 12.5% 100%, 0 82%);
  -webkit-mask:
    radial-gradient(circle at 50% 42%, transparent 13%, #000 14%),
    linear-gradient(#000, #000);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at 50% 42%, transparent 13%, #000 14%) exclude,
    radial-gradient(circle at 22% 22%, transparent 6%, #000 7%) exclude,
    radial-gradient(circle at 78% 22%, transparent 6%, #000 7%) exclude,
    radial-gradient(circle at 22% 62%, transparent 5%, #000 6%) exclude,
    radial-gradient(circle at 78% 62%, transparent 5%, #000 6%);
  mask-composite: intersect;
  transform-origin: top center;
  animation: ondear 4s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -0.6s);
}
.papel-picado span:nth-child(6n+1) { --c: var(--rosa); }
.papel-picado span:nth-child(6n+2) { --c: var(--cempasuchil); }
.papel-picado span:nth-child(6n+3) { --c: var(--morado); }
.papel-picado span:nth-child(6n+4) { --c: var(--verde); }
.papel-picado span:nth-child(6n+5) { --c: var(--azul); }
.papel-picado span:nth-child(6n+6) { --c: var(--cempasuchil-2); }

@keyframes ondear {
  from { transform: rotate(-2deg); }
  to   { transform: rotate(2deg); }
}

/* ---------- Velas ---------- */
.vela {
  display: inline-block;
  width: 14px;
  height: 40px;
  background: linear-gradient(var(--hueso), #e6d6bd);
  border-radius: 3px;
  position: relative;
  margin: 0 10px;
}
.vela::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 12px;
  height: 20px;
  margin-left: -6px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff7c2, var(--cempasuchil) 60%, transparent 70%);
  filter: drop-shadow(0 0 10px var(--cempasuchil));
  animation: flama 0.18s ease-in-out infinite alternate;
}
@keyframes flama {
  from { transform: scale(1, 1) rotate(-2deg); }
  to   { transform: scale(0.92, 1.08) rotate(2deg); }
}

/* ---------- Comunes ---------- */
button, .boton {
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: 999px;
  padding: 14px 26px;
  cursor: pointer;
  color: var(--noche);
  background: var(--cempasuchil);
  transition: transform 0.1s, background 0.2s;
}
button:hover { background: var(--cempasuchil-2); }
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.5; cursor: progress; }

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