/* Loja — "Pulseira Blacklight" world: numbered access wristband / guest
   list, brilhando sob UV. Dark by default (site-wide constraint); a
   light variant rides under html.theme-light for the required toggle.
   Scoped under body.world-pulseira so other pages are untouched. */

@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39&display=swap');

body.world-pulseira {
  --bg: #0B0B0D;
  --bg-alt: #131316;
  --bg-card: #17171B;
  --ink: #EDEAF5;
  --ink-dim: #9C97AD;
  --ink-faint: #5C586A;
  --line: #2A2833;
  --accent: #FF102B;
  --accent-ink: #0B0B0D;
  --maxw: 1280px;

  background-color: var(--bg);
  background-image: none;
}

html.theme-light body.world-pulseira {
  --bg: #F3F0E6;
  --bg-alt: #E8E3D2;
  --bg-card: #FBF9F2;
  --ink: #17151A;
  --ink-dim: #57534A;
  --ink-faint: #8A8577;
  --line: #D8D2BF;
  --accent: #D31C36;
  --accent-ink: #FBF9F2;
}

.barcode { font-family: 'Libre Barcode 39', cursive; letter-spacing: 0.04em; }

/* ---------- Theme toggle ---------- */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  cursor: pointer;
  margin-left: 10px;
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
html.theme-light .theme-toggle .icon-moon { display: none; }
html.theme-light .theme-toggle .icon-sun { display: block; }

/* ---------- Header ---------- */

.world-pulseira .site-header { background: rgba(11, 11, 13, 0.86); border-bottom: 1px solid var(--line); }
html.theme-light .world-pulseira .site-header { background: rgba(243, 240, 230, 0.88); }

.world-pulseira .nav a.active {
  position: relative;
  display: inline-block;
  padding: 4px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.world-pulseira .nav a.active::after {
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  width: 6px; height: 6px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
}

/* Mobile dropdown is one shared panel (see .nav in style.css) -- the
   active-link pill/dot from desktop would read as "its own bar" again
   inside that panel, so drop it there and just color the text instead. */
@media (max-width: 760px) {
  .world-pulseira .nav a.active {
    padding: 16px 20px;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--accent);
  }
  .world-pulseira .nav a.active::after { display: none; }
}

/* ---------- Banner ---------- */

.world-pulseira .site-banner {
  border-bottom: 1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, rgba(255,51,85,0.06) 0 10px, transparent 10px 20px),
    var(--bg-alt);
}

/* ---------- Hero ---------- */

.world-pulseira .hero { border-bottom: 1px solid var(--line); position: relative; }

.world-pulseira .hero h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); max-width: 15ch; line-height: 1.14; }

.world-pulseira .hero h1 .glow {
  color: var(--accent);
}

.world-pulseira .hero p { max-width: 48ch; }

.wristband-tag {
  position: absolute;
  top: clamp(24px, 5vw, 64px);
  right: clamp(20px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 18px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--accent);
  transform: rotate(4deg);
  text-align: center;
}
.wristband-tag::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  width: 2px;
  height: 16px;
  background: var(--line);
  transform: translateX(-50%) rotate(-4deg);
}
.wristband-tag .wt-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wristband-tag .barcode { font-size: 1.7rem; line-height: 1; color: var(--ink); }

@media (max-width: 620px) { .wristband-tag { display: none; } }

/* ---------- Section heads (no eyebrow: heading + one supporting line) ---------- */

.world-pulseira .section-head { border-bottom: 1px solid var(--line); align-items: flex-start; }
.world-pulseira .section-note { color: var(--ink-dim); font-size: 0.94rem; margin-top: 10px; max-width: 54ch; }

.stamp-count {
  position: relative;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 8px 16px 8px 20px;
  white-space: nowrap;
}
.stamp-count::before {
  content: '';
  position: absolute;
  left: 6px; top: 4px; bottom: 4px;
  width: 0;
  border-left: 1px dashed var(--ink-faint);
}

/* ---------- Cards: printed tickets with a tear line, no hand-glued tilt ---------- */

.world-pulseira .card {
  background: var(--bg-card);
  border: 1px solid var(--line);
}

.world-pulseira .card-media { background: var(--bg-alt); position: relative; }

.world-pulseira .card-body { position: relative; }
.world-pulseira .card-body::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 0;
  border-top: 1px dashed var(--line);
  background-image: radial-gradient(circle, var(--bg) 2px, transparent 2.2px);
  background-size: 10px 1px;
  background-position: top;
  background-repeat: repeat-x;
}

.world-pulseira .frame-tag {
  font-family: 'IBM Plex Mono', monospace;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: 3px;
  backdrop-filter: none;
}

.world-pulseira .watermark span {
  color: var(--ink);
  opacity: 0.28;
  font-size: 1.05rem;
}

.world-pulseira .badge { border-color: var(--line); color: var(--ink-dim); border-radius: 3px; }

/* ---------- Buttons: the wristband clasp ---------- */

.world-pulseira .btn { border-radius: 999px; border-width: 1.5px; }

.world-pulseira .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.world-pulseira .btn-primary:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.world-pulseira .btn-ghost { border-color: var(--line); color: var(--ink); }
.world-pulseira .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Callout: the clipboard ---------- */

.world-pulseira .callout {
  border: 1px solid var(--line);
  background: var(--bg-card);
  position: relative;
  padding-top: 56px;
}
.world-pulseira .callout::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 96px; height: 26px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 8px 8px;
}

/* ---------- Footer ---------- */

.world-pulseira .site-footer { border-top: 1px solid var(--line); }