/* ==========================================================
   Mazza v2 — base compartilhada pelas seções redesenhadas
   Estética "race day": pista, linha de chegada, números de peito
   ========================================================== */

.mz-section {
  --mz-bg: #0d1420;
  --mz-blue: #3f78e0;
  --mz-blue-soft: rgba(63, 120, 224, .18);
  --mz-volt: #d6ff3d;
  --mz-text: #e8edf5;
  --mz-muted: #93a0b5;
  --mz-line: rgba(255, 255, 255, .08);
  --mz-card: #ffffff;
  --mz-ink: #1b2433;
  --mz-chip: #eef2f8;
  --mz-chip-ink: #5b6779;
  --mz-display: "Barlow Condensed", "THICCCBOI", sans-serif;
  --mz-ease: cubic-bezier(.2, .8, .2, 1);

  position: relative;
  overflow: hidden;
  background: var(--mz-bg);
  color: var(--mz-text);
  padding: 6.5rem 0 7rem;
  isolation: isolate;
  flex-shrink: 0;
}

/* Raias da pista ao fundo */
.mz-section::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background:
    radial-gradient(60% 50% at var(--mz-glow-x, 85%) 10%, rgba(63, 120, 224, .28), transparent 70%),
    radial-gradient(40% 40% at var(--mz-glow2-x, 5%) 95%, rgba(214, 255, 61, .07), transparent 70%),
    repeating-linear-gradient(-12deg, transparent 0 78px, var(--mz-line) 78px 80px);
  pointer-events: none;
}

.mz-section .container { position: relative; }

/* ---------- Cabeçalho ---------- */
.mz-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mz-volt);
  margin-bottom: 1rem;
}

.mz-pulse {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--mz-volt);
  animation: mz-pulse 1.8s infinite;
}

@keyframes mz-pulse {
  0% { box-shadow: 0 0 0 0 rgba(214, 255, 61, .55); }
  70% { box-shadow: 0 0 0 12px rgba(214, 255, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(214, 255, 61, 0); }
}

.mz-title {
  font-family: var(--mz-display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.01em;
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  color: #fff;
  margin: 0;
}

.mz-title span {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .55);
}

/* ---------- Linha de chegada (faixa quadriculada) ---------- */
.mz-finish {
  height: 18px;
  margin: 4.5rem 0 3.5rem;
  border-radius: 3px;
  opacity: .9;
  background: repeating-conic-gradient(#fff 0 25%, #0d1420 0 50%) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

/* ---------- Furos de alfinete (número de peito) ---------- */
.mz-pins span {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mz-bg);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
  z-index: 2;
}
.mz-pins span:nth-child(1) { top: 12px; left: 12px; }
.mz-pins span:nth-child(2) { top: 12px; right: 12px; }
.mz-pins span:nth-child(3) { bottom: 12px; left: 12px; }
.mz-pins span:nth-child(4) { bottom: 12px; right: 12px; }

/* ---------- Selo de categoria ---------- */
.mz-chip {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--mz-chip);
  color: var(--mz-chip-ink);
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------- Botões ---------- */
.mz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 3.4rem;
  padding: .9rem 1.6rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .3s var(--mz-ease), background .3s, color .3s, box-shadow .3s;
}

.mz-btn svg { flex: none; width: 1.2rem; height: 1.2rem; transition: transform .35s var(--mz-ease); }
.mz-btn:hover svg { transform: translateX(4px); }
.mz-btn:focus-visible { outline: 3px solid var(--mz-volt); outline-offset: 3px; }

.mz-btn--volt {
  background: var(--mz-volt);
  color: var(--mz-ink);
  box-shadow: 0 12px 30px -10px rgba(214, 255, 61, .45);
}
.mz-btn--volt:hover,
.mz-btn--volt:focus-visible {
  color: var(--mz-ink);
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -12px rgba(214, 255, 61, .6);
}

.mz-btn--ink {
  background: var(--mz-ink);
  color: #fff;
  box-shadow: 0 12px 30px -12px rgba(13, 20, 32, .5);
}
.mz-btn--ink svg { color: var(--mz-volt); }
.mz-btn--ink:hover,
.mz-btn--ink:focus-visible {
  color: #fff;
  background: var(--mz-blue);
  transform: translateY(-2px);
}
.mz-btn--ink:focus-visible { outline-color: var(--mz-blue); }

/* ---------- Variante clara (contraste entre as seções escuras) ---------- */
.mz-section.mz-light {
  --mz-bg: #f3f6fb;
  --mz-text: #1b2433;
  --mz-muted: #5b6779;
  --mz-line: rgba(13, 20, 32, .06);
  background: var(--mz-bg);
  color: var(--mz-text);
}

.mz-light::before {
  background:
    radial-gradient(55% 45% at var(--mz-glow-x, 85%) 8%, rgba(63, 120, 224, .14), transparent 70%),
    radial-gradient(40% 40% at var(--mz-glow2-x, 5%) 95%, rgba(214, 255, 61, .22), transparent 70%),
    repeating-linear-gradient(-12deg, transparent 0 78px, var(--mz-line) 78px 80px);
}

/* no fundo claro o verde-limão vira destaque de fundo; o texto fica azul */
.mz-light .mz-eyebrow { color: var(--mz-blue); }
.mz-light .mz-pulse { background: var(--mz-blue); animation-name: mz-pulse-blue; }
@keyframes mz-pulse-blue {
  0% { box-shadow: 0 0 0 0 rgba(63, 120, 224, .5); }
  70% { box-shadow: 0 0 0 12px rgba(63, 120, 224, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 120, 224, 0); }
}
.mz-light .mz-title { color: var(--mz-ink); }
.mz-light .mz-title span { -webkit-text-stroke-color: rgba(13, 20, 32, .55); }
.mz-light .mz-pins span { background: #dfe5ee; }

/* ---------- Botão "voltar ao topo" (progresso de rolagem do tema) ----------
   fundo escuro para o verde-limão aparecer tanto nas seções claras quanto nas escuras */
.progress-wrap {
  background: #0d1420;
  box-shadow: inset 0 0 0 .1rem rgba(214, 255, 61, .2), 0 8px 20px -8px rgba(13, 20, 32, .5);
}
.progress-wrap::after { color: #d6ff3d; }
.progress-wrap svg.progress-circle path { stroke: #d6ff3d; }

/* ---------- Entrada em cascata ---------- */
.mz-reveal {
  opacity: 0;
  translate: 0 30px;
  transition: opacity .8s ease, translate .8s var(--mz-ease);
}
.mz-section.is-visible .mz-reveal { opacity: 1; translate: 0 0; }

/* ---------- Indicador de carrossel (só mobile) ---------- */
.mz-track { display: none; }

@media (max-width: 767.98px) {
  .mz-section { padding: 4.5rem 0; }

  .mz-finish { margin: 3rem 0 2.5rem; height: 14px; background-size: 14px 14px; }

  /* carrossel horizontal com scroll-snap */
  .mz-scroller {
    display: flex !important;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5);
    padding: 1rem 16px 1.5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mz-scroller::-webkit-scrollbar { display: none; }
  .mz-scroller > * {
    flex: 0 0 84%;
    min-width: 0;
    scroll-snap-align: start;
  }

  .mz-track {
    display: block;
    position: relative;
    height: 3px;
    max-width: 140px;
    margin: .5rem auto 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
  }
  .mz-track__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 25%;
    border-radius: inherit;
    background: var(--mz-volt);
    transition: transform .2s linear;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mz-section *,
  .mz-section *::before,
  .mz-section *::after {
    animation: none !important;
    transition: none !important;
  }
  .mz-reveal { opacity: 1; translate: 0 0; }
}