/* ═══════════════════════════════════════════════════════════
   ZEYH GLASS — folha da loja redesenhada (preview).
   Carrinho, conta, modais e barra do celular continuam vindo do
   shared.css / loja-v2-design.css; aqui ficam os tokens e a
   página nova.
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@800;900&family=Exo+2:wght@400;500;600;700;800&display=swap');

:root {
  --zg-gold:   #FFC820;
  --zg-gold2:  #FF9500;
  --zg-ink:    #1a1305;
  /* Dourado quando vira TEXTO. No claro ele escurece, senão fica ilegível. */
  --zg-goldtx: #FFC820;
  --zg-text:   #ffffff;
  --zg-body:   #d8d0bd;
  --zg-muted:  #b5ad99;
  --zg-dim:    #8f886f;
  --zg-faint:  #756d59;
  --zg-surf:   rgba(255,255,255,.05);
  --zg-surf2:  rgba(255,255,255,.09);
  --zg-line:   rgba(255,255,255,.09);
  --zg-nav:    rgba(255,255,255,.78);
  --zg-quote:  #ece6d6;
  --zg-blue:   #6bc8ff;
  --zg-disp:   'Orbitron', sans-serif;

  /* Tokens do shared.css realinhados: carrinho, modais e conta
     herdam daqui sem precisar de regra própria. */
  --bg: #140f06;  --bg2: #100b04;  --page: #0a0704;
  --surface: #191206; --surface2: #221909; --surface3: #2b200c;
  --surf: #191206; --surf2: #221909;
  --line: rgba(255,255,255,.09); --line2: rgba(255,200,32,.3);
  --border: rgba(255,255,255,.09); --border2: rgba(255,200,32,.28);
  --text: #ffffff; --text2: #d8d0bd; --muted: #b5ad99; --faint: #756d59;
  --gold: #FFC820; --gold2: #FF9500; --goldInk: #1a1305;
  --nav-bg: rgba(20,15,6,.92);
  --radius: 16px; --radius-sm: 12px;
}

html { background: #0a0704; }
body {
  font-family: 'Exo 2', sans-serif;
  color: var(--zg-text);
  background:
    radial-gradient(1100px 650px at 50% -8%, #2e2007 0%, #140f06 55%, #0a0704 100%) no-repeat,
    #0a0704;
  background-attachment: fixed;
}
::selection { background: #FFC820; color: #1a1305; }
a { text-decoration: none; }

/* ══════════ TEMA CLARO ══════════
   Mesma loja, paleta invertida. O dourado de preenchimento continua o mesmo
   (botão, etiqueta), mas o dourado de TEXTO escurece pra ter contraste. */
html[data-theme="light"] {
  --zg-goldtx: #8a6300;
  --zg-text:   #1a1409;
  --zg-body:   #4a4335;
  --zg-muted:  #6b6354;
  --zg-dim:    #8a8272;
  --zg-faint:  #a29a89;
  --zg-surf:   rgba(0,0,0,.035);
  --zg-surf2:  rgba(0,0,0,.07);
  --zg-line:   rgba(0,0,0,.10);
  --zg-nav:    rgba(0,0,0,.66);
  --zg-quote:  #342f24;
  --zg-blue:   #1a6fa8;
  background: #f4f1ea;

  /* O shared.css já tem um tema claro, mas em cinza-azulado. Aqui ele é
     puxado pro bege da loja pra o carrinho e os modais não destoarem. */
  --bg: #f4f1ea; --bg2: #efe9dd; --page: #efece4;
  --surface: #fffdf8; --surface2: #f6f2e8; --surface3: #efe9dd;
  --surf: #fffdf8; --surf2: #f6f2e8;
  --line: rgba(0,0,0,.09); --line2: rgba(0,0,0,.16);
  --border: rgba(0,0,0,.09); --border2: rgba(180,130,0,.35);
  --nav-bg: rgba(244,241,234,.94);
}
html[data-theme="light"] body {
  background:
    radial-gradient(1100px 650px at 50% -8%, #fff8e6 0%, #f8f4ea 55%, #f4f1ea 100%) no-repeat,
    #f4f1ea;
}

/* ══════════ NAV ══════════ */
.zg-nav {
  height: 84px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; max-width: 1312px; margin: 0 auto; padding: 0 24px;
}
.zg-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--zg-disp); font-weight: 900; font-size: 16px; color: var(--zg-text);
  letter-spacing: .01em; white-space: nowrap;
}
.zg-brand span { font-weight: 800; }
.zg-brand svg { width: 22px; height: 22px; fill: var(--zg-gold); }
.zg-nav-links { display: flex; align-items: center; gap: 40px; }
.zg-nav-links a {
  color: var(--zg-nav); font-size: 14.5px; font-weight: 500; transition: color .18s;
}
.zg-nav-links a:hover { color: var(--zg-goldtx); }
.zg-nav-right { display: flex; align-items: center; gap: 12px; }
.zg-icon {
  position: relative; width: 40px; height: 40px; border-radius: 999px;
  background: var(--zg-surf); border: 1px solid var(--zg-line); color: var(--zg-text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.zg-icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.zg-icon:hover { border-color: var(--zg-line2, var(--zg-line)); }
.zg-icon .cart-bdg {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  border-radius: 999px; background: var(--zg-gold); color: var(--zg-ink);
  font-size: 10.5px; font-weight: 800; display: none;
  align-items: center; justify-content: center; padding: 0 5px;
}
.zg-icon .cart-bdg.on { display: flex; }
.zg-acc {
  background: var(--zg-gold); color: var(--zg-ink); font-size: 13.5px; font-weight: 700;
  padding: 12px 24px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  border: none; font-family: inherit;
}
.zg-burger { display: none; }

/* ══════════ HERO ══════════ */
.zg-hero {
  padding: 56px 24px 0; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 26px;
  max-width: 1312px; margin: 0 auto;
}
.zg-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--zg-surf); border: 1px solid var(--zg-line);
  color: var(--zg-body); font-size: 13px; font-weight: 500;
  padding: 9px 18px; border-radius: 999px;
}
.zg-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--zg-gold); display: block; }
.zg-hero h1 {
  font-family: var(--zg-disp); font-weight: 900; font-size: 58px; line-height: 1.14;
  max-width: 880px; margin: 0; letter-spacing: -.01em;
}
.zg-hero p {
  font-size: 17px; line-height: 1.65; color: var(--zg-body); max-width: 560px; margin: 0;
}
.zg-hero-cta { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.zg-btn-gold {
  background: var(--zg-gold); color: var(--zg-ink); font-weight: 700; font-size: 15px;
  padding: 16px 30px; border-radius: 999px; border: none; cursor: pointer;
  font-family: inherit; white-space: nowrap; transition: filter .18s;
}
.zg-btn-gold:hover { filter: brightness(1.08); }
.zg-btn-ghost {
  background: var(--zg-surf); border: 1px solid var(--zg-line); color: var(--zg-text);
  font-weight: 600; font-size: 15px; padding: 16px 28px; border-radius: 999px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.zg-stats { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; justify-content: center; }
.zg-stat {
  background: var(--zg-surf); border: 1px solid var(--zg-line); border-radius: 16px;
  padding: 18px 28px; text-align: center; min-width: 170px;
}
.zg-stat b {
  display: block; font-family: var(--zg-disp); font-weight: 800; font-size: 24px;
  color: var(--zg-goldtx); white-space: nowrap;
}
/* Filho direto: o número de dentro (#g-score / #g-count) tem que
   continuar inline, senão quebra a linha no meio do "5.0/5". */
.zg-stat > span { display: block; color: var(--zg-muted); font-size: 12.5px; margin-top: 4px; white-space: nowrap; }
/* Ressalva embaixo do número: o ganho de FPS depende da máquina, e a loja
   não pode prometer um valor fixo. */
.zg-note {
  display: block; font-style: normal; color: var(--zg-dim); font-size: 10.5px;
  margin: 3px auto 0; line-height: 1.35; max-width: 150px;
}

/* ══════════ SEÇÕES ══════════ */
.zg-sec { padding: 100px 24px 0; max-width: 1312px; margin: 0 auto; text-align: center; }
.zg-eyebrow { color: var(--zg-goldtx); font-size: 13px; font-weight: 700; letter-spacing: .04em; margin: 0 0 12px; }
.zg-h2 { font-family: var(--zg-disp); font-weight: 800; font-size: 32px; margin: 0; letter-spacing: -.01em; }
.zg-sub { color: var(--zg-muted); font-size: 15px; max-width: 480px; margin: 12px auto 36px; line-height: 1.6; }
.zg-gap { margin-top: 36px; }

/* ══════════ CARDS DE SERVIÇO ══════════ */
.zg-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; text-align: left; }
.zg-card {
  background: var(--zg-surf); border: 1px solid var(--zg-line); border-radius: 20px;
  padding: 32px; display: flex; flex-direction: column; gap: 16px;
  transition: border-color .2s, transform .2s;
}
.zg-card:hover { border-color: rgba(255,200,32,.35); transform: translateY(-2px); }
.zg-card-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zg-ico {
  width: 48px; height: 48px; border-radius: 14px; background: var(--zg-surf2);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.zg-ico svg { width: 23px; height: 23px; stroke: var(--zg-text); fill: none; stroke-width: 1.6; }

/* Etiquetas de tipo. Remoto e Self-service têm cores diferentes de propósito:
   é a diferença entre "a gente faz" e "você aplica", e é o que o cliente mais
   confunde antes de comprar. */
.zg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.zg-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 7px; white-space: nowrap;
}
.zg-tag.remoto { color: var(--zg-goldtx); background: rgba(255,200,32,.13); }
.zg-tag.auto   { color: var(--zg-blue); background: rgba(107,200,255,.13); }
.zg-tag.plat   { color: var(--zg-muted); background: var(--zg-surf2); }

.zg-card h3 { font-weight: 700; font-size: 19px; margin: 0 0 8px; }
.zg-card-desc { color: var(--zg-muted); font-size: 14px; line-height: 1.55; margin: 0; }
.zg-card-ft {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--zg-line);
}
.zg-price { font-family: var(--zg-disp); font-weight: 800; font-size: 26px; color: var(--zg-goldtx); }
.zg-buy {
  background: var(--zg-surf2); color: var(--zg-text); font-weight: 600; font-size: 13.5px;
  padding: 11px 22px; border-radius: 999px; border: none; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.zg-buy:hover { filter: brightness(1.12); }

/* ══════════ PARCEIROS ══════════ */
.zg-partners > .zg-partner { width: 196px; }
.zg-partner {
  background: var(--zg-surf); border: 1px solid var(--zg-line); border-radius: 18px;
  padding: 30px 18px; display: flex; flex-direction: column; align-items: center; gap: 13px;
}
.zg-av {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,200,32,.4);
  background: linear-gradient(135deg, rgba(255,200,32,.28), rgba(255,149,0,.16));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--zg-disp); font-weight: 800; font-size: 30px; color: var(--zg-goldtx);
}
.zg-partner b { font-weight: 700; font-size: 16px; text-align: center; }
.zg-partner span { color: var(--zg-dim); font-size: 12px; text-align: center; line-height: 1.4; }
.zg-coupon {
  background: rgba(0,0,0,.25); color: var(--zg-gold); font-size: 10px; font-weight: 600;
  padding: 4px 11px; border-radius: 999px; letter-spacing: .03em;
}

/* ══════════ AVALIAÇÕES ══════════ */
.zg-revs { text-align: left; }
.zg-revs > .zg-rev { width: 372px; }
.zg-rev {
  background: var(--zg-surf); border: 1px solid var(--zg-line); border-radius: 18px;
  padding: 30px; display: flex; flex-direction: column;
}
.zg-stars { color: var(--zg-goldtx); font-size: 13px; margin-bottom: 14px; letter-spacing: .06em; }
.zg-rev-txt {
  color: var(--zg-quote); font-size: 15px; line-height: 1.65; margin: 0 0 22px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5;
  overflow: hidden;
}
.zg-rev-by { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.zg-rev-av {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,200,32,.15);
  color: var(--zg-goldtx); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex: 0 0 auto; object-fit: cover;
}
.zg-rev-nm { font-size: 14px; font-weight: 600; }
.zg-rev-src { font-size: 12px; color: var(--zg-dim); }

/* ══════════ CTA ══════════ */
.zg-cta {
  margin: 100px auto 0; max-width: 1312px;
  background: rgba(255,200,32,.08); border: 1px solid rgba(255,200,32,.25);
  border-radius: 24px; padding: 56px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; text-align: left;
}
.zg-cta h2 { font-family: var(--zg-disp); font-weight: 800; font-size: 27px; margin: 0 0 8px; }
.zg-cta p { color: var(--zg-body); font-size: 15px; margin: 0; }

/* ══════════ RODAPÉ ══════════ */
.zg-foot {
  max-width: 1312px; margin: 60px auto 0; padding: 48px 24px 40px;
  border-top: 1px solid var(--zg-line);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.zg-foot small { color: var(--zg-faint); font-size: 12.5px; line-height: 1.6; }
.zg-wa {
  display: inline-flex; align-items: center; gap: 9px; color: var(--zg-text);
  background: var(--zg-surf); border: 1px solid var(--zg-line);
  font-weight: 600; font-size: 13.5px; padding: 11px 20px; border-radius: 999px; white-space: nowrap;
}
.zg-wa svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ══════════ CELULAR ══════════ */
.zg-mobile { display: none; }

@media (max-width: 1050px) {
  .zg-hero h1 { font-size: 44px; }
  .zg-sec { padding-top: 80px; }
  .zg-cta { padding: 40px; }
}

@media (max-width: 900px) {
  .zg-cards { grid-template-columns: 1fr; }
  .zg-cta { flex-direction: column; text-align: center; padding: 36px 24px; }
  .zg-nav-links { gap: 22px; }
}

@media (max-width: 719px) {
  .zg-nav-links, .zg-acc, .zg-hero, .zg-desktop { display: none !important; }
  .zg-mobile { display: block; }
  .zg-burger {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; background: var(--zg-surf);
    border: 1px solid var(--zg-line); color: var(--zg-text); cursor: pointer;
  }
  .zg-burger svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; }
  .zg-nav { height: 64px; padding: 0 16px; }
  .zg-brand { font-size: 15px; }
  .zg-sec { padding: 56px 16px 0; }
  .zg-h2 { font-size: 23px; }
  .zg-sub { font-size: 14px; }
  .zg-cta { margin-top: 56px; }
  .zg-cta h2 { font-size: 21px; }
  .zg-foot { flex-direction: column; text-align: center; padding-bottom: 110px; }
}

/* Busca, filtros e lista do celular */
.zg-search {
  display: flex; align-items: center; gap: 10px; margin: 4px 16px 14px;
  background: var(--zg-surf); border: 1px solid var(--zg-line);
  border-radius: 999px; padding: 12px 18px;
}
.zg-search svg { width: 18px; height: 18px; stroke: var(--zg-dim); fill: none; stroke-width: 1.8; flex: 0 0 auto; }
.zg-search input {
  flex: 1; background: none; border: none; outline: none; color: var(--zg-text);
  font-family: inherit; font-size: 15px; min-width: 0;
}
.zg-search input::placeholder { color: var(--zg-dim); }
.zg-pills { display: flex; gap: 10px; padding: 0 16px 14px; overflow-x: auto; }
.zg-pills::-webkit-scrollbar { display: none; }
.zg-pill {
  background: var(--zg-surf); border: 1px solid var(--zg-line); color: var(--zg-text);
  font-family: inherit; font-size: 14px; font-weight: 600; padding: 10px 20px;
  border-radius: 999px; white-space: nowrap; cursor: pointer;
}
.zg-pill.on { background: var(--zg-gold); color: var(--zg-ink); border-color: transparent; }
.zg-diag {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 16px 16px; padding: 15px; width: calc(100% - 32px);
  background: var(--zg-surf); border: 1px dashed var(--zg-line);
  border-radius: 14px; color: var(--zg-text); font-family: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer;
}
/* Mesmo banner do celular, mas centrado e com largura de seção no desktop. */
.zg-diag-desk { width: auto; max-width: 620px; margin: 0 auto 32px; }
.zg-diag svg { width: 18px; height: 18px; stroke: var(--zg-goldtx); fill: none; stroke-width: 1.8; }
.zg-list { display: flex; flex-direction: column; gap: 12px; padding: 0 16px; }
.zg-row {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--zg-surf); border: 1px solid var(--zg-line); border-radius: 16px; padding: 16px;
}
.zg-row .zg-ico { width: 44px; height: 44px; border-radius: 12px; }
.zg-row .zg-ico svg { width: 21px; height: 21px; }
.zg-row-mid { flex: 1; min-width: 0; }
.zg-row-mid h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 6px; line-height: 1.3; }
.zg-row .zg-tags { margin-bottom: 6px; }
.zg-row-desc { color: var(--zg-muted); font-size: 13px; line-height: 1.5; margin: 0; }
.zg-row-rt { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.zg-row-price { font-family: var(--zg-disp); font-weight: 800; font-size: 17px; color: var(--zg-goldtx); white-space: nowrap; }
.zg-add {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--zg-surf2); color: var(--zg-text); font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center; font-family: inherit;
}
.zg-empty { text-align: center; color: var(--zg-muted); font-size: 14px; padding: 28px 16px; }

/* Menu do hambúrguer */
.zg-mmenu { display: none; flex-direction: column; padding: 4px 16px 14px; }
.zg-mmenu.on { display: flex; }
.zg-mmenu button {
  background: none; border: none; color: var(--zg-text); font-family: inherit; font-size: 15px;
  text-align: left; padding: 13px 4px; cursor: pointer; border-bottom: 1px solid var(--zg-line);
}

/* ═══════════ PÁGINAS INTERNAS (produto, agendar, checkout, confirmação)
   A estrutura delas continua a mesma; aqui só entram os acabamentos que
   fazem elas conversarem com a home nova. ═══════════ */
.prod-card, .summary, .ck-sec, .pay-panel, .pixb, .bump-row,
.cal-wrap, .prod-box, .conf-box, .slot-box {
  border-radius: 18px;
}
.buy, .buy2, .prod-back, .slot, .cal-nav, .pay, #cpnBtn {
  border-radius: 999px;
}
.field, #cpnInput { border-radius: 12px; }
.prod-price, .sl.tot span, .cdr-tot span, .bump-price, .summary .tot b {
  font-family: var(--zg-disp); font-weight: 800;
}
.prog-step { letter-spacing: .06em; }

/* O menu das páginas internas ainda é o antigo. Aqui ele ganha o mesmo
   acabamento do menu da home pra não parecer que é outro site. */
#nav { background: transparent; border-bottom: 1px solid var(--zg-line); }
#nav .nav-inner { max-width: 1312px; margin: 0 auto; }
.nav-brand { font-family: var(--zg-disp); font-weight: 900; letter-spacing: .01em; }
.nav-icon-btn, .tb-theme, .lang-switch { border-radius: 999px !important; }
.acc-nav-btn {
  background: var(--zg-gold) !important; color: var(--zg-ink) !important;
  border-color: transparent !important; font-weight: 700;
}
.acc-nav-btn svg { stroke: var(--zg-ink) !important; }

/* ═══════════ Cards clicáveis (parceiros e avaliações) ═══════════
   O card inteiro vira link: parceiro leva pra live na Twitch, avaliação
   leva pra ficha no Google. O "pop" no hover é o que avisa que dá clique. */
.zg-partner, .zg-rev {
  color: inherit; cursor: pointer;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s, box-shadow .22s;
}
.zg-partner:hover, .zg-rev:hover,
.zg-partner:focus-visible, .zg-rev:focus-visible {
  transform: translateY(-6px) scale(1.025);
  border-color: rgba(255,200,32,.42);
  box-shadow: 0 16px 34px rgba(0,0,0,.4);
}
.zg-partner:hover .zg-av { border-color: var(--zg-gold); }
.zg-partner:hover b, .zg-rev:hover .zg-rev-nm { color: var(--zg-goldtx); }
@media (prefers-reduced-motion: reduce) {
  .zg-partner, .zg-rev { transition: border-color .2s; }
  .zg-partner:hover, .zg-rev:hover { transform: none; }
}

/* ═══════════ Colisão de ID com o shared.css ═══════════
   O site antigo estiliza #servicos e #avaliacoes por ID — e ID vence classe.
   Era dali que vinha o fio solto embaixo dos parceiros (border-top do
   #avaliacoes) e o espaçamento diferente nessas duas seções. */
#servicos.zg-sec, #avaliacoes.zg-sec {
  padding: 100px 24px 0;
  border-top: none;
}
@media (max-width: 1050px) { #servicos.zg-sec, #avaliacoes.zg-sec { padding-top: 80px; } }
@media (max-width: 719px)  { #servicos.zg-sec, #avaliacoes.zg-sec { padding: 56px 16px 0; } }

/* ═══════════ CHECKOUT EM DUAS COLUNAS ═══════════
   O checkout antigo era uma coluna só em duas etapas: os dados sumiam da tela
   quando o pagamento aparecia. Aqui pedido, cupom e dados ficam à esquerda e
   o total com o pagamento à direita, como na simulação. As etapas continuam
   existindo, mas só trocam o conteúdo da coluna da direita — o pedido só é
   criado na hora de pagar, igual antes. */
.ck-page{ padding: 8px 0 60px; }
.zc-wrap{
  max-width: 1160px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: 28px; align-items: start;
}
/* A coluna da direita (resumo + botão/pagamento) não tinha nenhum espaço
   entre o cartão do total e o que vem embaixo — ficavam colados. Como só
   uma etapa (#ckStep1 ou #ckStep2) fica visível por vez, o gap do flex só
   conta a que está de fato na tela; a escondida não soma espaço extra. */
.zc-right{ display: flex; flex-direction: column; gap: 24px; }
.zc-h2{ font-family: var(--zg-disp); font-weight: 800; font-size: 19px; margin: 26px 0 12px; }
.zc-left > .zc-h2:first-child{ margin-top: 8px; }
.zc-h3{ font-weight: 700; font-size: 15px; margin: 0 0 12px; }

.zc-box{
  background: var(--zg-surf); border: 1px solid var(--zg-line);
  border-radius: 16px; padding: 18px 20px;
}
.zc-tot{ padding: 22px; }
.zc-tot .sl{ font-size: 14px; }
.zc-tot .sl.tot{ margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--zg-line); }
.zc-tot .sl.tot b{ font-family: var(--zg-disp); font-size: 27px; color: var(--zg-goldtx); }

.zc-cpn{ display: flex; gap: 10px; }
.zc-cpn .field{ flex: 1; margin: 0; }
.zc-cpn-btn{
  background: var(--zg-surf2); border: 1px solid var(--zg-line); color: var(--zg-text);
  font-family: inherit; font-weight: 600; font-size: 13.5px; padding: 0 22px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.zc-cpn-msg{ font-size: 13px; margin-top: 8px; display: none; }

.zc-lbl{ display: block; font-size: 12.5px; color: var(--zg-muted); margin: 0 0 6px 4px; }
.zc-f{ flex: 1; min-width: 0; }
.zc-left .fields{ display: flex; flex-direction: column; gap: 14px; }
.zc-left .frow{ display: flex; gap: 14px; }

.zc-safe{ font-size: 12px; color: var(--zg-dim); text-align: center; margin-top: 12px; }
.zc-back{
  display: block; width: 100%; margin-top: 14px; background: none; border: none;
  color: var(--zg-muted); font-family: inherit; font-size: 13px; cursor: pointer; padding: 8px;
}
.zc-back:hover{ color: var(--zg-text); }

/* Depois de confirmar os dados eles ficam só pra leitura: dá pra conferir sem
   sair da tela, mas não dá pra mudar com o pagamento já montado. */
.zc-left input[readonly]{ opacity: .65; cursor: default; }

@media (max-width: 900px){
  .zc-wrap{ grid-template-columns: 1fr; gap: 20px; padding: 0 16px; }
  .zc-left .frow{ flex-direction: column; }
  .zc-h2{ font-size: 17px; }
}

/* Etapa do pagamento: o valor ja foi passado pro Mercado Pago, entao cupom e
   order bump ficam travados. Continuam visiveis (a pessoa confere o pedido),
   mas nao dao mais pra mexer — senao o total da tela sairia do valor cobrado. */
.zc-left.zc-locked .zc-cpn-btn,
.zc-left.zc-locked .bump-row{ pointer-events: none; opacity: .5; }
.zc-left.zc-locked .bump-row{ cursor: default; }

/* ═══════════ DOURADO DE TEXTO NO TEMA CLARO ═══════════
   Carrinho, resumo do checkout e order bump vêm do CSS antigo com o dourado
   do tema escuro cravado (#FFC820). Sobre o fundo claro ele quase some, então
   aqui trocamos pelo dourado escuro que já usamos no resto do tema claro. */
html[data-theme="light"] .bump-tag,
html[data-theme="light"] .bump-price,
html[data-theme="light"] .summary-b .when,
html[data-theme="light"] .summary-b .sl.tot b,
html[data-theme="light"] .prog-step.active,
html[data-theme="light"] .cdr-item-price,
html[data-theme="light"] .cdr-sum-row.cdr-tot span{ color: var(--zg-goldtx) !important; }

/* ══════════ CARROSSEL ══════════
   Parceiros e avaliações passaram a ter mais coisa do que cabe na largura
   da tela. Em vez de espremer numa grade, viraram uma faixa que corre de
   lado: no celular arrasta com o dedo, no computador tem seta dos dois
   lados. O encaixe é o scroll-snap do próprio navegador — sem biblioteca. */
.zg-car { position: relative; }
.zg-car-track {
  display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden;
  padding: 6px 2px 8px; margin: 0 -2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.zg-car-track::-webkit-scrollbar { display: none; }
.zg-car-track > * { flex: 0 0 auto; }
.zg-car-track:focus-visible { outline: 2px solid var(--zg-gold); outline-offset: 4px; border-radius: 18px; }

.zg-car-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--zg-surf2); border: 1px solid var(--zg-line);
  color: var(--zg-text); font-size: 22px; line-height: 1; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity .18s ease, background .18s ease, border-color .18s ease;
}
.zg-car-nav:hover { background: rgba(255,200,32,.16); border-color: rgba(255,200,32,.45); }
.zg-car-nav.prev { left: -14px; }
.zg-car-nav.next { right: -14px; }
.zg-car-nav[disabled] { opacity: 0; pointer-events: none; }

/* Em tela de toque a seta não serve pra nada: arrasta e pronto. */
@media (hover: none) {
  .zg-car-nav { display: none; }
}

@media (max-width: 719px) {
  .zg-partners > .zg-partner { width: 154px; }
  .zg-revs > .zg-rev { width: 280px; }
  .zg-car-track { gap: 12px; }
}