/* =========================================================================
   Zona Mods — camada dinâmica (sobrescreve site.css).
   Cinza escuro #171717 + verde lima #03f209. Movimento sutil e sempre
   desligado para quem pede redução de movimento no sistema.
   ========================================================================= */

:root {
  --display: "Archivo", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --cut: 12px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------ tipografia de destaque */

.display,
h1,
.section-head h2,
.page-head h1,
.about h2,
.product-desc h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.02;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--neon);
  flex-shrink: 0;
}

/* botão com canto cortado (assinatura visual) */
.btn-cut {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%
  );
  border-radius: 0;
  padding-right: 26px;
}
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(3, 242, 9, 0.2), 0 10px 30px rgba(3, 242, 9, 0.18); }

.btn { transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.25s var(--ease); }

.icon-btn {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text);
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
  font-size: 18px;
  line-height: 1;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------ herói em duas colunas */

.hero2 {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 70% at 85% 30%, rgba(3, 242, 9, 0.10), transparent 70%),
    linear-gradient(180deg, #161616 0%, #171717 100%);
}

/* a primeira sessão começa no topo da página, por trás do cabeçalho */
:root { --header-h: 74px; }
.hero2 {
  margin-top: calc(var(--header-h) * -1);
  min-height: clamp(640px, 100vh, 900px);
  display: flex;
  align-items: center;
}
.hero2-grid {
  display: grid;
  grid-template-columns: minmax(0, 560px);
  align-items: center;
  width: 100%;
  max-width: none;
  padding: calc(var(--header-h) + 48px) 24px 104px clamp(40px, 8vw, 120px);
}
.hero2-grid > div:first-child { position: relative; z-index: 2; }
/* fundo geral do site: imagem da marca com véu escuro para leitura */
body {
  background-color: #171717;
  background-image:
    linear-gradient(rgba(23, 23, 23, 0.86), rgba(23, 23, 23, 0.94)),
    url("/imgs/backgroundzonamods.png");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* seções alternadas ficam translúcidas para deixar o fundo aparecer */
.section-alt { background: rgba(18, 18, 18, 0.72); }
.footer-main { background: rgba(18, 18, 18, 0.9); }

/* cabeçalho com a mesma fonte dos títulos (Archivo), em todos os elementos */
#site-header,
#site-header button,
#site-header select,
#site-header a {
  font-family: var(--mono);
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#site-header .brand span {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
/* a logo faz o papel do "Z" de Zona Mods: mesma altura das letras, sem espaço entre elas */
#site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  line-height: 1;
}
#site-header .brand img.brand-z {
  width: 34px;
  height: 34px;
  margin-right: -2px;
  flex-shrink: 0;
}
#site-header .brand .brand-text {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  padding-top: 2px;
}
/* "ona" ganha um degradê sutil, do verde do site até o branco, cobrindo o O e o N */
#site-header .brand .brand-grad {
  font-size: inherit;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 30%, var(--text) 65%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* cabeçalho sempre em uma linha só, em qualquer idioma e largura, ocupando mais a tela */
#site-header .header-inner {
  flex-wrap: nowrap;
  gap: 24px;
  min-height: 72px;
  max-width: 1600px;
  padding-left: 16px;
  padding-right: 16px;
}
#site-header .header-tools .flags { flex-shrink: 0; gap: 8px; }
#site-header .header-tools .flag-btn { flex-shrink: 0; width: 36px; height: 26px; }
#site-header .brand { flex-shrink: 0; }
#site-header .main-nav {
  order: 0;
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  margin-right: 0;
  padding-top: 0;
  border-top: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(12px, 1.6vw, 24px);
  overflow-x: auto;
  scrollbar-width: none;
}
#site-header .main-nav::-webkit-scrollbar { display: none; }
#site-header .main-nav a {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.05em;
}
/* o ícone de "Zona Academy" só aparece no menu mobile (ver media query mais
   abaixo) - no desktop esse link fica só com o texto, igual aos outros. */
.nav-academy-link svg { display: none; }
#site-header .header-inner > * { min-width: 0; }
#site-header .header-tools {
  width: auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  gap: clamp(8px, 1vw, 14px);
  padding-bottom: 2px;
}
#site-header .header-tools::-webkit-scrollbar { display: none; }
#site-header .header-tools > * { flex-shrink: 0; }
#site-header .account-name { display: inline; white-space: nowrap; }
#site-header .cart-link,
#site-header .btn-fivem { white-space: nowrap; }

/* botões de redes sociais no cabeçalho: quadrados de cantos arredondados, sem cores de tema */
#site-header .social-links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
#site-header .social-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--text-2);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
#site-header .social-btn:hover {
  border-color: var(--text-2);
  color: var(--text);
}

/* controles do cabeçalho com a mesma altura */
.header-tools .cart-link,
.header-tools .btn-small,
.header-tools .currency-select-btn {
  height: 40px;
  box-sizing: border-box;
}

/* ícones do cabeçalho (moeda, carrinho, redes sociais, conta): mantém o
   canto cortado do .cut-corner, mas bem menor que o padrão do site - são
   botões pequenos, o corte de 12px ficava desproporcional, cortando demais
   (pedido explícito). */
.currency-select-btn,
.cart-link,
.social-btn,
.account-trigger {
  --cut: 6px;
}

/* ...e sem a linha verde - pedido explícito, só o cantinho faltando mesmo,
   sem o traço de destaque. */
.currency-select-btn::after,
.cart-link::after,
.social-btn::after,
.account-trigger::after {
  content: none;
}
.header-tools .cart-link,
.header-tools .btn-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}
.header-tools .btn-fivem { gap: 8px; }
.header-tools .btn-fivem svg { flex-shrink: 0; }
.header-tools .currency-select-btn {
  padding: 0 12px;
  min-width: 96px;
  justify-content: space-between;
}

/* painel de opções do seletor de moeda - some por padrão, aparece com
   .currency-select.is-open (ver toggleCurrencyMenu em site.js). Mesma
   linguagem visual do resto do site (cut-corner, superfície escura).
   position:fixed com top/left/width calculados via JS (positionCurrencyMenu
   em site.js) - assim não depende do containing block/overflow de nenhum
   ancestral (header sticky, hero, etc.) pra ficar visível. */
.currency-select-list {
  position: fixed;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0.15s;
}
.currency-select.is-open .currency-select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.currency-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}
.currency-option svg { flex-shrink: 0; color: var(--accent); }
.currency-option:hover { background: var(--surface-2); color: var(--text); }
.currency-option.is-selected { color: var(--accent); }

/* cabeçalho com fundo sólido escuro em todas as páginas */
#site-header {
  background: #121212;
  border-bottom: 1px solid var(--line-strong);
  backdrop-filter: none;
}

.hero2 h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.9rem);
  margin: 18px 0 0;
}
.hero2 h1 .l1 { display: block; color: var(--text); }
.hero2 h1 .l2 { display: block; color: var(--accent); text-shadow: 0 0 32px rgba(3, 242, 9, 0.28); }

.hero2 .lead {
  color: var(--text-2);
  font-size: 17px;
  max-width: 520px;
  margin-top: 24px;
}
.hero2 .actions { justify-content: flex-start; margin-top: 34px; }

.hero-trust {
  margin-top: 28px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.hero-trust strong {
  color: var(--text);
  font-weight: 700;
}
.hero2 .trust {
  margin-top: 30px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero2 .trust span::before { content: "— "; color: var(--accent); }

/* imagem principal do herói (arte própria da Zona Mods) */
/* painel de imagem em tela cheia à direita, com corte diagonal */
.hero-visual {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 36%;
  right: -6%;
  overflow: hidden;
  clip-path: none;
}
.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

/* colagem de imagens dos pacotes (dados reais da Tebex) */
.collage {
  position: relative;
  height: 460px;
}
.collage::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  background: radial-gradient(circle, rgba(3, 242, 9, 0.18), transparent 65%);
  filter: blur(18px);
}
.collage .tile {
  position: absolute;
  width: 62%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 34px 60px rgba(0, 0, 0, 0.5);
}
.collage .tile img { width: 100%; height: 100%; object-fit: cover; }
.collage .tile img.placeholder { object-fit: contain; padding: 24%; opacity: 0.25; }
.collage .tile-1 { top: 0; right: 0; transform: rotate(3deg); z-index: 3; }
.collage .tile-2 { top: 36%; left: 0; transform: rotate(-4deg); z-index: 2; }
.collage .tile-3 { bottom: 0; right: 10%; transform: rotate(1.5deg); z-index: 1; }
.collage .tile:hover { border-color: var(--accent); }

/* ------------------------------------------------ faixa de rolagem */

.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-deep);
  overflow: hidden;
  padding: 16px 0;
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 26s linear infinite;
}
.ticker-track > div { flex-shrink: 0; }
/* faixa da primeira sessão: fica na base do herói, visível sem rolar */
.hero2 > .ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 0;
  background: rgba(13, 13, 13, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 18px 0;
}
.ticker-track > div {
  display: flex;
  gap: 36px;
  padding-right: 36px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.ticker-track > div span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--neon);
  margin-left: 36px;
  vertical-align: middle;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ------------------------------------------------ seções */

.section-head {
  align-items: flex-end;
  gap: 40px;
}
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 0; }
.section-head p { max-width: 420px; }

/* carrossel de destaques */
.carousel-controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 22px;
}
.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 320px);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 2px 18px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }

/* cartões com leve elevação ao passar o mouse */
.card {
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(3, 242, 9, 0.28);
  box-shadow:
    0 0 0 1px rgba(3, 242, 9, 0.05),
    0 0 22px rgba(3, 242, 9, 0.1),
    0 18px 40px rgba(0, 0, 0, 0.4);
}
.card-media img { transition: transform 0.6s var(--ease); }
.card:hover .card-media img { transform: scale(1.04); }
.card h3 { font-size: 18px; text-transform: uppercase; font-family: var(--display); font-style: italic; font-weight: 800; }

/* passos */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 25px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--line) 45%, var(--line) 100%);
}
.step { position: relative; }
.step-num {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 15px;
  position: relative;
  z-index: 1;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
}
.step h3 {
  margin: 22px 0 8px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 18px;
}
.step p { color: var(--muted); font-size: 14px; max-width: 260px; }

/* faixa de chamada final */
.cta-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 52px 56px;
  background:
    linear-gradient(110deg, rgba(3, 242, 9, 0.12), transparent 55%),
    var(--surface);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
}
.cta-band h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); max-width: 620px; }

/* revelar ao rolar (sutil) */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; }

/* ------------------------------------------------ documentação */

.docs {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.docs-nav {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 1px solid var(--line);
}
.docs-nav-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 12px 18px;
}
.docs-nav a {
  padding: 10px 16px 10px 18px;
  color: var(--text-2);
  font-size: 14px;
  border-left: 2px solid transparent;
  margin-left: -1px;
}
.docs-nav a:hover { color: var(--text); }
.docs-nav a[aria-current="page"] {
  color: var(--text);
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

.doc { max-width: 760px; }
.doc h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 14px; }
.doc .lead { color: var(--text-2); font-size: 16px; margin-bottom: 36px; }
.doc-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  counter-reset: passo;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.doc-steps li {
  counter-increment: passo;
  position: relative;
  padding: 18px 20px 18px 74px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-2);
}
.doc-steps li::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  left: 20px;
  top: 17px;
  font-family: var(--mono);
  color: var(--accent);
  font-size: 15px;
}
.doc-note {
  padding: 16px 20px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  color: var(--text-2);
  font-size: 14px;
}

/* ------------------------------------------------ cabeçalhos de página */

.page-head .kicker { margin-bottom: 14px; }
.page-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }

/* ------------------------------------------------ respostas a telas menores */

@media (max-width: 960px) {
  .hero2-grid { grid-template-columns: 1fr; gap: 48px; padding: 64px 0 72px; }
  .collage { height: 360px; max-width: 560px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .steps::before { display: none; }
  .docs { grid-template-columns: 1fr; gap: 28px; }
  .docs-nav { position: static; flex-direction: row; flex-wrap: wrap; border-left: 0; gap: 8px; }
  .docs-nav-title { width: 100%; padding: 0; }
  .docs-nav a { border-left: 0; border-bottom: 2px solid transparent; padding: 8px 12px; }
  .docs-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
  .cta-band { padding: 36px 28px; }
}

@media (max-width: 560px) {
  .collage { height: 300px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* continua em 2 colunas (quadrantes) até o celular mais estreito - gap mais
     enxuto aqui pra sobrar espaço de leitura pro texto de cada passo */
  .steps { gap: 18px 14px; }
  .step h3 { font-size: 13px; margin: 16px 0 6px; }
  .step p { font-size: 12px; line-height: 1.5; max-width: none; }
  .step-num { width: 34px; height: 34px; font-size: 11px; }
}

/* em telas menores o painel vira um bloco normal */
@media (max-width: 960px) {
  .hero2 { min-height: 0; display: block; }
  .hero2-grid { grid-template-columns: 1fr; padding: 64px 24px 40px; }
  .hero-visual {
    position: relative;
    inset: auto;
    left: auto;
    aspect-ratio: 1306 / 816;
    clip-path: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero-visual::after {
    background: linear-gradient(180deg, #171717 0%, transparent 35%);
  }
}

/* ------------------------------------------------ cabeçalho: menu hambúrguer (telas menores) */

#site-header .menu-toggle { display: none; }

@media (max-width: 960px) {
  #site-header .header-inner {
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
  }
  #site-header .brand { order: 0; }
  #site-header .menu-toggle {
    order: 0;
    margin-left: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 0;
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--text);
    cursor: pointer;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
  }
  #site-header .menu-toggle:hover { border-color: var(--accent); color: var(--accent); }
  #site-header .menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
  }

  /* nav e ferramentas ficam ocultos até o menu abrir */
  #site-header .main-nav,
  #site-header .header-tools { display: none; }

  /* fechado: as bandeiras de idioma continuam visíveis na barra, ao lado do hambúrguer */
  #site-header:not(.is-open) .header-tools { display: contents; }
  #site-header:not(.is-open) .header-tools > :not(.flags) { display: none; }
  #site-header:not(.is-open) .header-tools .flags {
    display: flex;
    gap: 10px;
    order: 0;
    margin-left: auto;
    flex-shrink: 0;
  }
  #site-header:not(.is-open) .header-tools .flag-btn { width: 34px; height: 25px; }
  #site-header .brand .brand-text { font-size: 20px; }
  #site-header .brand img.brand-z { width: 28px; height: 28px; }
  #site-header:not(.is-open) .menu-toggle { order: 1; margin-left: 12px; }
  #site-header.is-open .menu-toggle { margin-left: auto; }

  /* aberto: o próprio cabeçalho vira um painel lateral, com metade da largura e a altura toda da tela */
  #site-header.is-open {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 50vw;
    z-index: 200;
    height: 100dvh;
    overflow-y: auto;
    border-left: 1px solid var(--line-strong);
    border-bottom: 0;
    box-shadow: -24px 0 48px rgba(0, 0, 0, 0.55);
    background:
      radial-gradient(ellipse 120% 35% at 100% 0%, rgba(3, 242, 9, 0.12), transparent 70%),
      #121212;
    animation: drawerIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  #site-header.is-open .menu-toggle { border-color: var(--accent); color: var(--accent); }
  #site-header.is-open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  #site-header.is-open .menu-toggle span:nth-child(2) { opacity: 0; }
  #site-header.is-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  #site-header.is-open .main-nav,
  #site-header.is-open .header-tools { display: flex; }
  #site-header.is-open .brand img.brand-z { width: 26px; height: 26px; }
  #site-header.is-open .brand .brand-text { font-size: 18px; }
  #site-header.is-open .header-tools .btn-fivem {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 12px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  #site-header.is-open .header-inner { min-height: 72px; }

  /* links grandes, no estilo dos títulos */
  #site-header .main-nav {
    order: 1;
    flex: 0 0 100%;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 12px;
    padding: 0;
    overflow: visible;
  }
  #site-header .main-nav a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--text);
    opacity: 0;
    transform: translateX(-18px);
  }
  #site-header .main-nav a[aria-current="page"] { color: var(--accent); }
  /* ícone de chapéu de formatura antes de "Zona Academy", só na visualização
     mobile (pedido explícito) - mesmo ícone (GRAD_ICON) do botão da primeira
     seção; no menu desktop esse link continua só com o texto. */
  .nav-academy-link svg { display: inline-flex; width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
  #site-header.is-open .main-nav a {
    animation: menuIn 0.55s var(--ease) forwards;
    animation-delay: calc(var(--d, 0) * 70ms + 120ms);
  }
  #site-header .main-nav a:nth-child(1) { --d: 0; }
  #site-header .main-nav a:nth-child(2) { --d: 1; }
  #site-header .main-nav a:nth-child(3) { --d: 2; }

  /* ferramentas empilhadas abaixo dos links */
  #site-header .header-tools {
    order: 2;
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin-top: 28px;
    padding: 0 0 40px;
    overflow: visible;
    justify-content: flex-start;
  }
  #site-header .header-tools .flags { justify-content: flex-start; }
  #site-header .header-tools .currency-select { width: 100%; }
  #site-header .header-tools .currency-select-btn { width: 100%; min-width: 0; height: 48px; }
  #site-header .header-tools .cart-link,
  #site-header .header-tools .btn-small { height: 48px; width: 100%; }
  #site-header .header-tools .social-links { justify-content: flex-start; }
  #site-header .header-tools .account { display: flex; width: 100%; }
  #site-header .header-tools .account-select { width: 100%; }
  #site-header .header-tools .account-trigger { width: 100%; height: 48px; justify-content: space-between; }
  #site-header .header-tools .account-trigger .account-name { max-width: none; flex: 1; }
  #site-header.is-open .header-tools .account-menu-list {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
  }
  #site-header.is-open .header-tools .account-menu-panel {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
  }
  #site-header.is-open .header-tools .account-menu-id { gap: 9px; padding: 10px 8px; }
  #site-header.is-open .header-tools .account-menu-id-text { flex: 1 1 0; overflow-wrap: anywhere; }
  #site-header.is-open .header-tools .account-menu-id-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  #site-header.is-open .header-tools .account-menu-id-value { overflow-wrap: anywhere; }
  #site-header.is-open .header-tools .account-menu-item { gap: 8px; padding-inline: 8px; }
  #site-header .header-tools .btn-fivem { width: 100%; height: 48px; }
  #site-header .header-tools .account-name { display: block; }
}

@keyframes drawerIn {
  from { transform: translateX(100%); }
  to { transform: none; }
}

@keyframes menuIn {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------ herói no celular: imagem primeiro, em tela cheia */

@media (max-width: 760px) {
  /* ajuste fino da imagem no celular (a arte foi feita para o PC) */
  :root {
    --hero-m-scale: 1;
    --hero-m-pos: 50% 40%;
    --hero-m-h: 50svh;
  }
  /* no celular a faixa de rolagem fica entre a imagem e o texto, como divisória */
  .hero2 {
    display: flex;
    flex-direction: column;
  }
  .hero2-grid { display: contents; }
  .hero2 > .ticker {
    order: 2;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 14px 0;
  }
  .hero2-grid > div:first-child {
    order: 3;
    position: relative;
    padding: 40px 24px 56px;
  }
  .hero2-grid > div:first-child::before,
  .hero2-grid > div:first-child::after { content: none; }
  .hero-trust { margin-top: 32px; }
  .hero-visual {
    order: 1;
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: var(--hero-m-h);
    aspect-ratio: auto;
    overflow: hidden;
  }
  /* a imagem começa logo abaixo do cabeçalho e vai até as laterais, sem margem */
  .hero-visual img {
    position: absolute;
    top: var(--header-h);
    left: 0;
    width: 100%;
    height: calc(100% - var(--header-h));
    object-fit: cover;
    object-position: var(--hero-m-pos);
    transform: scale(var(--hero-m-scale));
    transform-origin: var(--hero-m-pos);
  }
  .hero-visual::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28%;
    background: linear-gradient(180deg, transparent 0%, #171717 100%);
    pointer-events: none;
  }
  .hero2 h1 { margin-top: 0; }
  .hero2 .lead { font-size: 16px; }
  .hero2 .actions { flex-wrap: wrap; }
}

/* ------------------------------------------------ blog */

.blog-page { padding-top: 48px; }

.blog-media { aspect-ratio: 16 / 10; position: relative; }
.blog-chips { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; }
.blog-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  background: rgba(10, 10, 10, 0.78);
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 11px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.blog-chip-video { color: var(--accent); border-color: rgba(3, 242, 9, 0.4); }

.blog-body { gap: 10px; }
.blog-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: center;
}
.blog-meta span { color: var(--accent); }
.blog-excerpt { -webkit-line-clamp: 3; font-size: 14px; line-height: 1.65; }
.blog-readmore {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.blog-readmore svg { transition: transform 0.25s var(--ease); }
.blog-card:hover .blog-readmore svg { transform: translateX(4px); }

/* post em destaque: imagem e conteúdo lado a lado, card maior */
.blog-featured { margin-bottom: 20px; }
.blog-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; margin-top: 20px; }
@media (min-width: 761px) {
  .blog-featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .blog-featured .blog-media { aspect-ratio: auto; height: 100%; }
  .blog-featured .blog-body { padding: 32px 36px; justify-content: center; }
  .blog-featured h3 { font-size: 28px; }
  .blog-featured .blog-excerpt { -webkit-line-clamp: 4; font-size: 15px; }
}
.blog-featured-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.blog-featured-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--neon);
}

/* página do artigo */
.blog-post-head .steps-titleblock { max-width: 860px; }
.blog-post-title { font-size: clamp(1.9rem, 3.6vw, 3rem); margin: 12px 0 14px; }
.blog-post-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.blog-post-meta span { color: var(--accent); }

.blog-article { padding-top: 48px; }
.blog-article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
}
/* sem isso, a fileira de miniaturas (que não quebra linha) força a coluna a crescer
   em vez de rolar, quando o post tem muitas fotos */
.blog-article-body { min-width: 0; }
.blog-cover {
  aspect-ratio: 16 / 8;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 14px;
}
.blog-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* quando o post tem vídeo, a capa do artigo vira a miniatura dele (clicável,
   abre o mesmo lightbox dos cards) - nunca fica vazia, e usa 16:9 (formato
   real da thumbnail do YouTube), não o 16:8 das capas de imagem normais. */
.blog-cover-has-video { aspect-ratio: 16 / 9; }
.blog-cover-video { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.blog-cover-video img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; transition: opacity 0.25s var(--ease); }
.blog-cover-video:hover img, .blog-cover-video:focus-visible img { opacity: 1; }
.blog-article-body .prose { font-size: 16px; line-height: 1.85; }
.blog-article-body .prose p { margin-bottom: 18px; }
.blog-article-body .btn { margin-top: 28px; }
.blog-article-body .btn-outline svg { transform: rotate(180deg); }

/* miniaturas abaixo da capa: clicar troca a imagem grande, setas rolam a fileira */
.blog-thumbs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
}
.blog-thumbs {
  flex: 1;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.blog-thumbs::-webkit-scrollbar { display: none; }
.blog-thumbs .thumb {
  width: 64px;
  height: 48px;
  flex-shrink: 0;
  scroll-snap-align: start;
}
.blog-thumbs .thumb.is-active { border-color: var(--accent); box-shadow: 0 0 10px var(--neon-soft); }
.blog-thumbs-controls { flex-shrink: 0; margin-bottom: 0; gap: 6px; }
.blog-thumbs-controls .icon-btn { width: 34px; height: 34px; font-size: 14px; }

.blog-aside {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  border-left: 1px solid var(--line);
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.blog-aside h4 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0;
}
.blog-aside-item { display: flex; gap: 12px; align-items: center; text-decoration: none; }
.blog-aside-item img { width: 68px; height: 52px; object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; }
.blog-aside-item span { display: flex; flex-direction: column; gap: 4px; }
.blog-aside-item strong {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  line-height: 1.3;
  transition: color 0.2s var(--ease);
}
.blog-aside-item em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.blog-aside-item:hover strong { color: var(--accent); }

@media (max-width: 960px) {
  .blog-article-grid { grid-template-columns: 1fr; gap: 40px; }
  .blog-aside { position: static; border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
}
@media (max-width: 760px) {
  .blog-featured { display: block; }
  .blog-featured .blog-body { padding: 20px; }
}

.blog-chip-draft { color: var(--accent); border-color: rgba(3, 242, 9, 0.4); }

/* barra do admin no topo da listagem pública do blog, e link de editar no artigo */
.badmin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 24px;
  background: rgba(3, 242, 9, 0.06);
  border: 1px dashed rgba(3, 242, 9, 0.35);
}
.badmin-edit-link { margin-top: 14px; }

/* ------------------------------------------------ blog: painel de administração
   (ferramenta interna, só em português - ver nota em site.js) */

.badmin-page { padding-top: 48px; }
.badmin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
}

.badmin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.badmin-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.2s var(--ease);
}
.badmin-row:hover { border-color: var(--line-strong); }
/* linha da lista de clientes com a alça de arrastar (ver reorderClientsLocally em
   site.js) - uma coluna a mais que o .badmin-row genérico. */
.client-admin-row { grid-template-columns: 28px 96px minmax(0, 1fr) auto; }
.client-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 100%;
  min-height: 40px;
  color: var(--muted);
  cursor: grab;
}
.client-drag-handle:hover { color: var(--text); }
.client-drag-handle:active { cursor: grabbing; }
.client-admin-row.is-dragging { opacity: 0.4; }
.client-admin-row.is-drag-over { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.client-order-hint { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 13px; }
.client-order-hint-icon { display: inline-flex; color: var(--muted); }
.client-order-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 16px;
  background: rgba(3, 242, 9, 0.08);
  border: 1px solid rgba(3, 242, 9, 0.3);
  color: var(--text);
  font-size: 13px;
}
.client-order-bar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.badmin-row-media { display: block; width: 96px; height: 72px; overflow: hidden; border: 1px solid var(--line); flex-shrink: 0; }
.badmin-row-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badmin-row-info { min-width: 0; }
.badmin-row-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.badmin-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
}
.badmin-badge-live { color: var(--accent); border-color: rgba(3, 242, 9, 0.4); }
.badmin-badge-draft { color: var(--muted); }
.badmin-badge-featured { color: var(--text); }
.badmin-row-date { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.badmin-row-info h3 {
  font-size: 15px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.badmin-row-id { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 2px; }
.badmin-row-actions { display: flex; gap: 8px; flex-shrink: 0; }
.badmin-delete-btn { color: #ff7a6b; border-color: rgba(255, 122, 107, 0.4); }
.badmin-delete-btn:hover { background: rgba(255, 122, 107, 0.1); color: #ff9a8e; }

/* formulário */
.badmin-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.badmin-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: calc(var(--header-h) + 24px);
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.badmin-page .field { gap: 8px; }
.badmin-page .field input:not([type="checkbox"]),
.badmin-page .field textarea,
.badmin-page .field select {
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--mono);
  color: var(--text);
  max-width: none;
  width: 100%;
  resize: vertical;
}
.badmin-page .field input:not([type="checkbox"]):focus,
.badmin-page .field textarea:focus,
.badmin-page .field select:focus { outline: 1px solid var(--accent); outline-offset: 1px; }
.badmin-page code { font-family: var(--mono); color: var(--accent); }
.badmin-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* upload de imagens (capa e galeria) a partir do computador do admin */
.badmin-upload-field { gap: 10px; }
.badmin-cover-preview {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
}
.badmin-cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badmin-cover-empty,
.badmin-gallery-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 10px; }
.badmin-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  cursor: pointer;
}
.badmin-gallery-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 64px;
  padding: 8px;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
}
.badmin-gallery-thumb { position: relative; width: 84px; height: 64px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--line); }
.badmin-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badmin-gallery-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  line-height: 1;
  background: rgba(10, 10, 10, 0.85);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
}
.badmin-gallery-remove:hover { background: #ff7a6b; border-color: #ff7a6b; color: #171717; }
.badmin-error {
  color: #ff7a6b;
  font-size: 13px;
  background: rgba(255, 122, 107, 0.08);
  border: 1px solid rgba(255, 122, 107, 0.3);
  padding: 10px 12px;
}

/* abas de idioma com rádio escondido + rótulo clicável, sem precisar de JS */
.lang-tabs { display: flex; flex-direction: column; }
.lang-tab-radio { position: absolute; opacity: 0; pointer-events: none; }
.lang-tab-bar { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.lang-tab-bar label {
  padding: 10px 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lang-tab-bar label:hover { color: var(--text-2); }
.badmin-pane { display: none; flex-direction: column; gap: 18px; }
#badmin-tab-pt:checked ~ .lang-tab-bar label[for="badmin-tab-pt"],
#badmin-tab-en:checked ~ .lang-tab-bar label[for="badmin-tab-en"],
#badmin-tab-es:checked ~ .lang-tab-bar label[for="badmin-tab-es"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
#badmin-tab-pt:checked ~ [data-lang-pane="pt-BR"],
#badmin-tab-en:checked ~ [data-lang-pane="en"],
#badmin-tab-es:checked ~ [data-lang-pane="es"] {
  display: flex;
}
#coupon-admin-tab-pt:checked ~ .lang-tab-bar label[for="coupon-admin-tab-pt"],
#coupon-admin-tab-en:checked ~ .lang-tab-bar label[for="coupon-admin-tab-en"],
#coupon-admin-tab-es:checked ~ .lang-tab-bar label[for="coupon-admin-tab-es"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
#coupon-admin-tab-pt:checked ~ [data-lang-pane="pt-BR"],
#coupon-admin-tab-en:checked ~ [data-lang-pane="en"],
#coupon-admin-tab-es:checked ~ [data-lang-pane="es"] {
  display: flex;
}
#ptrans-admin-tab-en:checked ~ .lang-tab-bar label[for="ptrans-admin-tab-en"],
#ptrans-admin-tab-es:checked ~ .lang-tab-bar label[for="ptrans-admin-tab-es"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
#ptrans-admin-tab-en:checked ~ [data-lang-pane="en"],
#ptrans-admin-tab-es:checked ~ [data-lang-pane="es"] {
  display: flex;
}
/* bloco do português original no painel de traduções - só consulta, nunca editável */
.ptrans-original {
  background: var(--bg-deep);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 24px;
  gap: 10px;
}
.ptrans-original-title { font-weight: 600; color: var(--text); margin: 0; }
.ptrans-original-desc { max-height: 220px; overflow-y: auto; font-size: 13px; }

@media (max-width: 960px) {
  .badmin-grid { grid-template-columns: 1fr; }
  .badmin-side { position: static; }
  .badmin-row { grid-template-columns: 72px minmax(0, 1fr); }
  .badmin-row-actions { grid-column: 1 / -1; justify-content: flex-start; margin-top: 8px; }
  .client-admin-row { grid-template-columns: 24px 72px minmax(0, 1fr); }
  .client-admin-row .badmin-row-actions { grid-column: 1 / -1; }
}

/* ------------------------------------------------ cupom em destaque (card fixo)
   Fica fora de #app (ver #coupon-widget no index.html), então sobrevive à troca
   de rota; position:fixed faz ele acompanhar a rolagem. Visual de "cupom de
   verdade": caixa do código em borda tracejada (como um talão), corte no canto
   e brilho no estilo das outras molduras do site (.main-frame, os painéis de
   métricas). Um hue só (lima), igual todo o resto do site. */
/* contêiner comum dos widgets flutuantes do canto inferior direito (avisos e
   suporte) - cada um empilha sozinho (fab ou card aberto) e os dois juntos se
   reorganizam nesse container de fora pra dentro, sem nunca se sobrepor,
   não importa qual esteja aberto. */
.floating-widgets {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 14px;
  pointer-events: none;
}
.coupon-widget {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 14px;
  pointer-events: none;
}
.coupon-widget:empty { display: none; }

@keyframes couponSlideIn {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.coupon-card {
  pointer-events: auto;
  position: relative;
  width: 300px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
  animation: couponSlideIn 0.5s var(--ease) both;
  overflow: hidden;
}
.coupon-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(3, 242, 9, 0.12), transparent 70%);
  pointer-events: none;
}
.coupon-card::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 18px;
  height: 18px;
  border: solid var(--accent);
  border-width: 2px 0 0 2px;
  filter: drop-shadow(0 0 6px var(--neon));
  pointer-events: none;
}

/* corpo com o padding (separado da imagem, que precisa sangrar até a borda) */
.coupon-card-body { position: relative; z-index: 1; padding: 18px 18px 16px; }

/* imagem do aviso comum (opcional) - fica coladinha no topo do card, antes do corpo com padding */
.coupon-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line-strong);
}
.coupon-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* fundo próprio (não transparente) pra nunca sumir em cima da imagem do
   aviso, seja qual for a cor dela - sempre legível, com ou sem foto atrás. */
.coupon-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.coupon-close:hover { color: var(--accent); background: rgba(10, 10, 10, 0.8); border-color: var(--accent); }

.coupon-kicker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.coupon-kicker svg { width: 12px; height: 12px; flex-shrink: 0; }

.coupon-title {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
  margin: 0 0 12px;
  padding-right: 22px;
  line-height: 1.25;
}

.coupon-code {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--bg-deep);
  border: 1px dashed var(--line-strong);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.coupon-code:hover,
.coupon-code:focus-visible { border-color: var(--accent); background: rgba(3, 242, 9, 0.06); }
.coupon-code-text {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coupon-code-icon { display: inline-flex; color: var(--accent); flex-shrink: 0; }
.coupon-code.is-copied { border-color: var(--accent); border-style: solid; background: rgba(3, 242, 9, 0.08); }

.coupon-desc {
  position: relative;
  z-index: 1;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}

/* botão de notificação: é o que fica no canto quando o card está fechado,
   tanto no PC quanto no mobile (ver .is-open, alternado em renderCouponWidget).
   Um toque/clique abre o card bem no lugar dele; o "X" do card fecha de volta
   pra esse botão - a oferta nunca é perdida, só fica recolhida. */
.coupon-widget:not(.is-open) .coupon-card { display: none; }
.coupon-widget.is-open .coupon-fab { display: none; }
.coupon-widget:not(.is-open) .coupon-fab { display: flex; }

.coupon-fab {
  pointer-events: auto;
  position: relative;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.coupon-fab:hover { border-color: var(--accent); }
.coupon-fab:active { transform: scale(0.94); }
.coupon-fab svg { width: 22px; height: 22px; }
.coupon-fab-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff4d4d;
  border: 2px solid var(--surface);
  box-shadow: 0 0 8px rgba(255, 77, 77, 0.75);
  animation: couponDotPulse 2s ease-in-out infinite;
}
@keyframes couponDotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* abaixo de 960px o cabeçalho já vira o modo hambúrguer; os cards (quando
   abertos) ficam um pouco mais compactos pra caber bem na tela do celular.
   O card de suporte (.sc-card, ver mais abaixo) é bem maior que o de avisos
   porque é um chat de verdade, não só um aviso curto. */
@media (max-width: 960px) {
  .floating-widgets { right: 16px; bottom: 16px; gap: 12px; }
  .coupon-widget { gap: 12px; }
  .coupon-widget .coupon-card { width: min(272px, calc(100vw - 32px)); }
  .coupon-widget .coupon-card-body { padding: 15px 15px 13px; }
  .coupon-widget .coupon-title { font-size: 15px; margin-bottom: 10px; }
  .coupon-widget .coupon-desc { font-size: 11.5px; }
  .support-widget .sc-card { width: min(360px, calc(100vw - 32px)); height: min(560px, calc(100vh - 150px)); }
}

/* prévia ao vivo no formulário de admin - mesmo cartão, sem animação/sombra/fechar */
.coupon-admin-preview { margin: -2px 0 14px; }
.coupon-admin-preview .coupon-card { width: 100%; max-width: none; animation: none; box-shadow: none; }
.coupon-admin-preview .coupon-close { display: none; }
.coupon-admin-preview .coupon-code { cursor: default; }

/* linha de um aviso na lista do painel - mesma grade de .badmin-row; cupom (sem
   imagem) mostra essa caixinha com o código, aviso sem imagem mostra o sino */
.coupon-admin-row-code {
  width: 96px;
  height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-deep);
  border: 1px dashed var(--line-strong);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-align: center;
  flex-shrink: 0;
  overflow-wrap: anywhere;
  padding: 6px;
}
.coupon-admin-row-code svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ------------------------------------------------ métricas FiveM (ranking de servidores) */

/* a página de métricas é bem mais alta que a loja - copiar o fundo só pra essa seção
   (.store-vitrine) fazia o "cover" esticar e borrar demais a imagem pra cobrir tanta
   altura. Em vez disso, deixa aparecer o mesmo fundo fixo do body (igual às seções da
   home): sempre nítido, não importa o tamanho da página, e com uma leve sensação de
   parallax ao rolar. */
.metrics-page { padding-top: 48px; }
/* especificidade maior de propósito: a regra .store-vitrine (mais abaixo neste
   arquivo) vem depois no arquivo e, sem isso, ganharia da regra acima. */
.store-vitrine.metrics-page {
  background-image: none;
  background-color: transparent;
}

/* estados visíveis durante a autenticação e a carga inicial da loja */
.login-inline-spinner,
.app-loading-spinner {
  display: inline-block;
  flex: 0 0 auto;
  border: 2px solid rgba(3, 242, 9, 0.24);
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  border-radius: 50%;
  animation: loginSpinnerTurn 0.8s linear infinite;
}
.login-inline-spinner { width: 14px; height: 14px; }
.btn.is-loading { cursor: wait; gap: 9px; }
.app-loading-screen {
  min-height: min(72vh, 680px);
  display: grid;
  place-items: center;
  padding: 32px 20px;
}
.app-loading-card {
  width: min(390px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 32px 30px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.34);
  text-align: center;
}
.app-loading-spinner { width: 34px; height: 34px; margin-bottom: 5px; }
.app-loading-card strong {
  color: var(--text);
  font-family: var(--display);
  font-size: 18px;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
}
.app-loading-card p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.app-loading-track {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 10px;
  overflow: hidden;
  background: rgba(3, 242, 9, 0.16);
}
.app-loading-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--neon);
  animation: appLoadingSweep 1.4s ease-in-out infinite;
}
@keyframes loginSpinnerTurn { to { transform: rotate(360deg); } }
@keyframes appLoadingSweep {
  from { transform: translateX(-110%); }
  to { transform: translateX(310%); }
}
@media (prefers-reduced-motion: reduce) {
  .login-inline-spinner, .app-loading-spinner, .app-loading-track i { animation-duration: 2.5s; }
}

/* visão geral: total de servidores e jogadores online agora */
.metrics-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}
.metrics-market {
  margin: 52px 0 52px;
}
.metrics-market.lore-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
}
.metrics-market-copy { gap: 16px; }
.metrics-market-copy .lore-text {
  max-width: none;
  margin: 0;
}
.metrics-market-frame { aspect-ratio: 16 / 10.5; }
.lore-frame.metrics-market-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.metrics-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--accent);
}
.metrics-tile > svg { flex-shrink: 0; }
.metrics-tile > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.metrics-tile strong {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 26px;
  color: var(--text);
  line-height: 1.1;
}
.metrics-tile span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
/* rótulos de seção, títulos de gráfico e o divisor entre blocos do painel */
.metrics-section-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.metrics-section-kicker-spaced { margin-top: 20px; }
.metrics-divider { margin: 32px 0; }
.metrics-chart-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 20px;
  color: var(--text);
  margin: 0 0 6px;
}
.metrics-chart-sub { font-size: 13px; color: var(--muted); margin: 0 0 20px; max-width: 640px; }
.metrics-panel-head { margin-bottom: 20px; }
.metrics-panel-head .metrics-section-kicker { margin-bottom: 6px; }
.metrics-panel-head .metrics-chart-title { margin-bottom: 0; }

/* gráfico de barras verticais (continentes, temas), num painel no estilo dos
   cards de produto do site: borda, canto cortado, brilho verde sutil, hover por
   barra. Um hue só (lima) - a altura da barra é a magnitude, igual em todo o site. */
.metrics-chart-panel {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  padding: 22px 20px 18px;
  margin-bottom: 14px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.metrics-chart-panel:hover {
  border-color: var(--line-strong);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
}
/* o mesmo texano de linhas finas usado na página de produto - reforça que isso é
   um painel de dados - mais o brilho verde no canto, agora dos dois lados pra dar
   mais vida ao painel. */
.metrics-chart-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 100% 0%, rgba(3, 242, 9, 0.11), transparent 70%),
    radial-gradient(ellipse 50% 45% at 0% 100%, rgba(3, 242, 9, 0.05), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 34px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
  pointer-events: none;
}
.metrics-chart-panel::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 18px;
  height: 18px;
  border: solid var(--accent);
  border-width: 2px 0 0 2px;
  filter: drop-shadow(0 0 6px var(--neon));
  opacity: 0.8;
  pointer-events: none;
}
/* temas do Brasil e continentes lado a lado - cada gráfico de pizza fica mais
   enxuto e os dois cabem lado a lado sem brigar por espaço */
.metrics-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
@media (max-width: 860px) {
  .metrics-split { grid-template-columns: 1fr; gap: 32px; }
}
/* não tem mais o HR entre as métricas gerais e esse bloco - esse respiro
   substitui a linha, pra não ficar colado */
.metrics-split-section { margin-top: 40px; }

/* gráfico de pizza de verdade (fatias sólidas, sem buraco no meio): visual em
   primeiro lugar, legenda compacta ao lado, sem texto extra embaixo. Um hue só
   (lima) - a fatia maior fica na cor de destaque, as demais vão escurecendo,
   a mesma lógica de magnitude usada em todo gráfico do site. */
.metrics-pie-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.metrics-pie-visual {
  position: relative;
  width: 152px;
  height: 152px;
  flex-shrink: 0;
  border-radius: 50%;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}
.metrics-pie-svg { width: 100%; height: 100%; display: block; }
.metrics-pie-slice path,
.metrics-pie-slice circle {
  stroke: var(--surface);
  stroke-width: 1.5;
  opacity: 0;
  transform-origin: 90px 90px;
  transform: scale(0.82);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), filter 0.2s var(--ease);
  transition-delay: var(--pie-delay, 0ms);
}
.metrics-chart-panel.in .metrics-pie-slice path,
.metrics-chart-panel.in .metrics-pie-slice circle {
  opacity: 1;
  transform: scale(1);
}
.metrics-pie-slice:hover path,
.metrics-pie-slice:hover circle { filter: brightness(1.25); }
.metrics-pie-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1 1 180px; }
.metrics-pie-total { display: flex; align-items: baseline; gap: 7px; }
.metrics-pie-total strong { font-family: var(--mono); font-size: 19px; font-weight: 500; color: var(--text); }
.metrics-pie-total span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.metrics-pie-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.metrics-pie-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
}
.metrics-pie-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.metrics-pie-legend-label { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metrics-pie-legend-item strong { margin-left: auto; color: var(--text); font-weight: 500; flex-shrink: 0; }
.metrics-pie-legend-item em { font-style: normal; font-size: 10px; color: var(--muted); flex-shrink: 0; min-width: 78px; text-align: right; }
@media (max-width: 480px) {
  .metrics-pie-wrap { gap: 18px 24px; }
}

/* gráfico de horário de pico: o dia inteiro (00h-24h, horário de Brasília) com
   as partes do dia no fundo. Lima = hoje e o pico, coral = menor movimento (o
   mesmo par alta/baixa usado em todo o site), tracejado cinza = média. */
.metrics-day-panel { padding: 20px 22px 16px; }
.metrics-day-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.metrics-day-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-left: 2px solid var(--muted);
}
.metrics-day-stat span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.metrics-day-stat strong {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.1;
  color: var(--text);
}
.metrics-day-stat em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.metrics-day-stat-peak { border-left-color: var(--accent); }
.metrics-day-stat-peak strong { color: var(--accent); }
.metrics-day-stat-low { border-left-color: #ff7a6b; }
.metrics-day-stat-low strong { color: #ff8f82; }

.metrics-day-plot {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: "y stage" ". x" ". periods";
}
.metrics-day-yaxis { grid-area: y; position: relative; }
.metrics-day-yaxis span {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.metrics-day-stage { grid-area: stage; position: relative; height: 220px; cursor: crosshair; }
.metrics-day-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.metrics-day-band { fill: rgba(255, 255, 255, 0.012); }
.metrics-day-band.is-alt { fill: rgba(255, 255, 255, 0.04); }
.metrics-day-vgrid { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1px; }
.metrics-day-vgrid.is-period { stroke: rgba(255, 255, 255, 0.14); }
.metrics-day-hgrid { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1px; stroke-dasharray: 3 4; }
/* sem "filter" no traço de propósito: num SVG esticado o navegador recorta o
   filtro na caixa do caminho, e um trecho quase reto (ex: 49.075 -> 49.301)
   sumia inteiro. O brilho vem de uma segunda linha, larga e translúcida, embaixo. */
.metrics-day-glow {
  fill: none;
  stroke: rgba(3, 242, 9, 0.22);
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.metrics-day-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.metrics-day-gap {
  fill: none;
  stroke: rgba(3, 242, 9, 0.55);
  stroke-width: 1.5px;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
}
.metrics-day-avg { fill: none; stroke: var(--text-2); stroke-width: 1.5px; stroke-dasharray: 6 5; opacity: 0.7; }
.metrics-day-future { fill: rgba(8, 8, 8, 0.35); }

.metrics-day-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed rgba(255, 255, 255, 0.45);
  pointer-events: none;
}
.metrics-day-now i {
  position: absolute;
  bottom: 3px;
  left: 5px;
  font-style: normal;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.metrics-day-now.is-flip i { left: auto; right: 5px; }
.metrics-day-dot {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px rgba(3, 242, 9, 0.5);
  pointer-events: none;
}

.metrics-day-badge { position: absolute; z-index: 3; transform: translate(-50%, -50%); pointer-events: none; }
.metrics-day-badge em { display: block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--surface); }
.metrics-day-badge b {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 8px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
}
.metrics-day-badge-peak em { background: var(--accent); box-shadow: 0 0 0 3px rgba(3, 242, 9, 0.25), 0 0 12px var(--neon); }
.metrics-day-badge-peak b { background: var(--accent); color: var(--accent-ink); }
.metrics-day-badge-low em { background: #ff7a6b; box-shadow: 0 0 0 3px rgba(255, 122, 107, 0.25); }
.metrics-day-badge-low b { background: rgba(20, 20, 20, 0.94); color: #ff8f82; border: 1px solid rgba(255, 122, 107, 0.6); }
.metrics-day-badge.is-below b { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 8px; }
.metrics-day-badge.is-left b { left: -6px; transform: none; }
.metrics-day-badge.is-right b { left: auto; right: -6px; transform: none; }

.metrics-day-tip { position: absolute; z-index: 4; transform: translate(-50%, -50%); pointer-events: none; }
.metrics-day-tip em { display: block; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); }
.metrics-day-tip b {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 10px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  background: rgba(14, 14, 14, 0.96);
  border: 1px solid var(--line-strong);
  padding: 4px 8px;
  border-radius: 3px;
}
.metrics-day-tip.is-left b { left: -6px; transform: none; }
.metrics-day-tip.is-right b { left: auto; right: -6px; transform: none; }

.metrics-day-xaxis,
.metrics-day-periods { position: relative; }
.metrics-day-xaxis { grid-area: x; height: 18px; margin-top: 6px; }
.metrics-day-periods { grid-area: periods; height: 16px; }
.metrics-day-xaxis span,
.metrics-day-periods span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--mono);
  white-space: nowrap;
}
.metrics-day-xaxis span { font-size: 10px; color: var(--muted); }
.metrics-day-xaxis span.is-first { transform: none; }
.metrics-day-xaxis span.is-last { transform: translateX(-100%); }
.metrics-day-periods span { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); opacity: 0.8; }

.metrics-day-legend {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.metrics-day-legend span { display: inline-flex; align-items: center; gap: 7px; }
.metrics-day-legend i { display: inline-block; width: 18px; border-top: 2.5px solid var(--accent); }
.metrics-day-legend .is-avg i { border-top: 2px dashed var(--text-2); }

/* picos de cada dia guardado (até 7) */
.metrics-week { margin: 18px 0 10px; }
.metrics-week-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.metrics-week-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
.metrics-week-table th,
.metrics-week-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.metrics-week-table thead th { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.metrics-week-table tbody th { color: var(--text-2); font-weight: 500; }
.metrics-week-table tbody th::first-letter { text-transform: uppercase; }
.metrics-week-table td { color: var(--text-2); }
.metrics-week-table td.is-peak strong { color: var(--accent); }
.metrics-week-table td.is-low strong { color: #ff8f82; }
.metrics-week-table tr.is-best { background: rgba(3, 242, 9, 0.06); }
.metrics-week-table tr.is-best th::after { content: " ★"; color: var(--accent); }
.metrics-week-usual { font-size: 12px; color: var(--text-2); margin: 10px 0 0; }
.metrics-week-usual strong { color: var(--accent); font-weight: 600; }

@media (max-width: 760px) {
  .metrics-day-panel { padding: 16px 14px 14px; }
  .metrics-day-stats { gap: 6px; }
  .metrics-day-stat { padding: 8px 8px; }
  .metrics-day-stat strong { font-size: 18px; }
  .metrics-day-stat span { font-size: 9px; letter-spacing: 0.02em; }
  .metrics-day-plot { grid-template-columns: 34px minmax(0, 1fr); }
  .metrics-day-stage { height: 180px; }
  .metrics-day-periods span { font-size: 9px; letter-spacing: 0.02em; }
  .metrics-week-table th,
  .metrics-week-table td { padding: 8px 6px; font-size: 11px; }
  .metrics-week-table thead th { white-space: normal; font-size: 9px; }
  .metrics-week-table td { white-space: normal; }
}

/* altas e baixas menores do dia (o pico e o menor movimento usam .metrics-day-badge) */
.metrics-linechart-mark {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.metrics-linechart-mark em {
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 2px solid var(--accent);
}
.metrics-linechart-mark b {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: rgba(10, 10, 10, 0.8);
  padding: 1px 6px;
  border-radius: 3px;
  bottom: 100%;
  margin-bottom: 7px;
}
.metrics-linechart-mark-valley em { border-color: #ff7a6b; }
.metrics-linechart-mark-valley b { color: #ff8f82; bottom: auto; top: 100%; margin-bottom: 0; margin-top: 7px; }

@media (max-width: 760px) {
  .metrics-chart-panel { padding: 24px 18px 18px; }
}

.metrics-note {
  font-size: 12px;
  color: var(--muted);
  max-width: 760px;
  margin: 0 0 10px;
  line-height: 1.6;
}
.metrics-note:last-of-type { margin-bottom: 28px; }

/* filtro por região */
.metrics-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.metrics-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.metrics-chip svg { flex-shrink: 0; width: 14px; height: 14px; border-radius: 1px; }
.metrics-chip:hover { border-color: var(--text-2); color: var(--text); }
.metrics-chip.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(3, 242, 9, 0.06);
}

/* ------------------------------------------------ conta (histórico/produtos/config)
   ver renderAccountPage em site.js - mesma linguagem visual do resto do site
   (cut-corner, chips tipo .metrics-chip pros tabs). */
.account-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.account-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.account-tab svg { flex-shrink: 0; }
.account-tab:hover { border-color: var(--text-2); color: var(--text); }
.account-tab.is-active { border-color: var(--accent); color: var(--accent); background: rgba(3, 242, 9, 0.06); }

.account-empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
}
.account-locked { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.account-settings-card { background: var(--surface); border: 1px solid var(--line); padding: 28px; max-width: 640px; }
.account-settings-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.account-settings-head h3 { font-size: 20px; }
.account-settings-id p { margin-top: 4px; font-size: 13px; }
.account-settings-note { color: var(--text-2); font-size: 13.5px; line-height: 1.6; max-width: 480px; }
.account-settings-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.account-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

/* um recibo completo por pagamento (ver accountHistoryRowHtml em site.js) -
   data/hora, valor total, cada item comprado (com indicação de presente) e
   a forma de pagamento, tudo dentro do mesmo card. */
.account-receipt {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 18px;
}
.account-receipt.is-refunded { opacity: 0.75; }
.account-receipt-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 20px;
  padding-bottom: 14px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.account-receipt-head-main { display: flex; flex-direction: column; gap: 3px; }
.account-receipt-date { font-weight: 600; font-size: 14.5px; }
.account-receipt-txn { color: var(--muted); font-size: 11px; }
.account-receipt-head-side { display: flex; align-items: center; gap: 10px; }
.account-receipt-total { font-size: 17px; color: var(--accent); font-weight: 400; }
.account-receipt-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #da373c;
  border: 1px solid rgba(218, 55, 60, 0.4);
  background: rgba(218, 55, 60, 0.1);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
}

.account-receipt-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.account-receipt-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.account-receipt-item-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.account-receipt-item-name { font-size: 13.5px; color: var(--text); }
.account-receipt-item-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.account-receipt-item-price { font-size: 13px; font-weight: 400; color: var(--text-2); }

/* mesma caixinha minimalista do "presente para X" no carrinho (ver .cart-row-gift). */
.account-receipt-gift {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 3px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-2);
}
.account-receipt-gift svg { flex-shrink: 0; color: var(--accent); width: 11px; height: 11px; }

.account-receipt-method {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
.account-receipt-method svg { color: var(--accent); flex-shrink: 0; width: 14px; height: 14px; }
.account-receipt-method strong { color: var(--text-2); font-weight: 600; }

.account-owned-grid { margin-top: 0; align-items: start; }
.account-owned-card .card-desc.account-owned-meta { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* lista de servidores */
.metrics-ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.metrics-ranking-empty { padding: 48px 0; text-align: center; }

.metrics-card {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border-radius: 3px;
}
.metrics-card:hover { border-color: rgba(3, 242, 9, 0.3); }
.metrics-rank {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  min-width: 26px;
  text-align: center;
}
.metrics-card:nth-child(1) .metrics-rank,
.metrics-card:nth-child(2) .metrics-rank,
.metrics-card:nth-child(3) .metrics-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--accent);
  color: #0c0c0c;
  font-weight: 700;
  border-radius: 3px;
}
.metrics-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg-deep);
  flex-shrink: 0;
}
.metrics-card-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.metrics-card-icon-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); }

.metrics-card-body { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.metrics-card-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.metrics-card-top h3 {
  font-size: 15px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.metrics-region-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  padding: 2px 8px;
  flex-shrink: 0;
}
.metrics-bar { height: 4px; background: var(--bg-deep); border: 1px solid var(--line); overflow: hidden; max-width: 320px; }
.metrics-bar-fill { height: 100%; background: linear-gradient(90deg, rgba(3, 242, 9, 0.5), var(--accent)); }
.metrics-card-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.metrics-players {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
}
.metrics-players svg { color: var(--muted); flex-shrink: 0; }
.metrics-players strong { color: var(--text); font-size: 14px; }
.metrics-trend {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.metrics-trend small { color: var(--muted); font-size: 10px; }
.metrics-trend-up { color: var(--accent); }
.metrics-trend-down { color: #ff7a6b; }
.metrics-trend-flat, .metrics-trend-stable { color: var(--muted); }
.metrics-spark { width: 110px; height: 28px; color: var(--accent); opacity: 0.85; flex-shrink: 0; }

.metrics-join { white-space: nowrap; }

@media (max-width: 960px) {
  .metrics-market.lore-grid { grid-template-columns: 1fr; }
  .metrics-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics-tile { padding: 13px 12px; gap: 9px; }
  .metrics-card { grid-template-columns: auto 1fr; grid-template-areas: "rank icon" "body body" "join join"; }
  .metrics-card .metrics-rank { grid-area: rank; }
  .metrics-card .metrics-card-icon { grid-area: icon; justify-self: end; }
  .metrics-card .metrics-card-body { grid-area: body; }
  .metrics-card .metrics-join { grid-area: join; width: 100%; text-align: center; margin-top: 4px; }
  .metrics-spark { display: none; }
}

/* ------------------------------------------------ página de produto: neon sutil */

:root {
  --neon: rgba(3, 242, 9, 0.55);
  --neon-soft: rgba(3, 242, 9, 0.18);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 36px;
}
.crumbs a:hover { color: var(--accent); }
.crumbs span:not(.current) { color: var(--line-strong); }
.crumbs .current { color: var(--text-2); }

/* a página do produto vira uma faixa sólida de largura total */
.product-stage {
  background: rgba(20, 20, 20, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 64px 0 96px;
}
.product-stage .container { max-width: 1480px; }

/* linhas verticais finas, da esquerda até a metade da tela, perdendo opacidade para a direita */
.product-stage { position: relative; overflow: hidden; }
/* página da loja: faixa cinza sólida no topo, vitrine com a imagem de fundo do site */
.store-ticker { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.store-band {
  position: relative;
  overflow: hidden;
  padding: 56px 0 44px;
  border-bottom: 1px solid var(--line);
  background: #1c1c1c;
}
.store-band > .container,
.store-vitrine > .container {
  max-width: 1560px;
  padding-left: 20px;
  padding-right: 20px;
}

/* cabeçalhos de página (loja/métricas/blog) todos no mesmo tamanho - título,
   descrição e altura do fundo iguais em todas as abas, sem exceção por
   página (.metrics-head/.blog-head não têm mais overrides próprios, só
   herdam de .store-band/.steps-titleblock h2/.featured-sub abaixo). */
.store-vitrine {
  background-color: #171717;
  background-image:
    linear-gradient(rgba(23, 23, 23, 0.86), rgba(23, 23, 23, 0.94)),
    url("/imgs/backgroundzonamods.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.store-vitrine #store-grid {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
}
/* cards de produto: cantos quase retos em todo o site (home e loja) */
.card {
  border-radius: 3px;
}
/* o degradê verde das informações aparece somente ao passar o mouse */
.card-body {
  background: linear-gradient(180deg, rgba(3, 242, 9, 0) 0%, rgba(3, 242, 9, 0) 100%);
  transition: background 0.45s var(--ease);
}
.card:hover .card-body {
  background: linear-gradient(180deg, rgba(3, 242, 9, 0) 0%, rgba(3, 242, 9, 0.05) 100%);
}
#home-track { grid-auto-columns: minmax(340px, 400px); }
.store-vitrine .card-media { border-radius: 0; }
.store-vitrine .card-body { border-radius: 0; }
.store-band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.13) 0,
    rgba(255, 255, 255, 0.13) 1px,
    transparent 1px,
    transparent 56px
  );
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
}
.store-band > .container { position: relative; z-index: 1; }
.store-band .crumbs { margin-bottom: 36px; }
.store-band .page-steps-head { margin-bottom: 0; align-items: end; }

/* as linhas ficam só no bloco do produto (do topo da seção até a descrição) */
.product-top { position: relative; }
.product-top::before {
  content: "";
  position: absolute;
  top: -64px;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 50vw;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.13) 0,
    rgba(255, 255, 255, 0.13) 1px,
    transparent 1px,
    transparent 56px
  );
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
  z-index: 0;
}
.product-stage > .container { position: relative; z-index: 1; }

/* a galeria é o protagonista da página - a coluna de informações fica bem mais enxuta ao lado */
.product {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

/* moldura da imagem com cantos em neon */
.main-frame {
  position: relative;
  border-color: var(--line);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.main-frame::before,
.main-frame::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: var(--accent);
  border-style: solid;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 0 6px var(--neon));
}
.main-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.main-frame::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* as linhas decorativas de fundo (.product-top::before) ficam atrás de qualquer coisa
   com "position" - a moldura principal já tem (.main-frame), mas a faixa de miniaturas
   era uma div comum e as linhas passavam por cima dela; dando um contexto de posição
   ela sobe para a mesma camada e passa a ficar por cima das linhas, como deveria. */
.thumbs {
  position: relative;
  z-index: 1;
}
.thumb {
  position: relative;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.thumb:hover,
.thumb:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--neon-soft);
}
.thumb.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--neon-soft);
}

/* selo de "play" nas miniaturas que são o vídeo do produto */
.thumb-play-badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 10, 0.4);
  color: var(--accent);
  pointer-events: none;
}
.thumb-play-badge svg {
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 0 4px var(--neon));
}

/* setinhas de navegação sobre a imagem/vídeo principal do produto */
.gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  opacity: 0.8;
}
.gallery-arrow:hover,
.gallery-arrow:focus-visible {
  opacity: 1;
}
.gallery-arrow-prev { left: 14px; }
.gallery-arrow-next { right: 14px; }

/* cartaz do vídeo do produto: miniatura do YouTube + botão de play no visual do site */
.gallery-video-poster {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}
.gallery-video-poster img {
  opacity: 0.8;
  transition: opacity 0.25s var(--ease);
}
.gallery-video-poster:hover img,
.gallery-video-poster:focus-visible img {
  opacity: 1;
}
.gallery-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  display: inline-grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(3, 242, 9, 0.3), 0 0 30px var(--neon);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.gallery-play-btn svg {
  width: 26px;
  height: 26px;
  margin-left: 2px;
}
.gallery-video-poster:hover .gallery-play-btn,
.gallery-video-poster:focus-visible .gallery-play-btn {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 0 1px rgba(3, 242, 9, 0.4), 0 0 44px var(--neon);
}

/* iframe do YouTube depois de clicar no cartaz, ocupando a mesma moldura */
.gallery-video-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}

.product-info { gap: 22px; }
.product-info .card-cat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.product-info .card-cat::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.product-info h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1;
}

.product-price strong {
  text-shadow: 0 0 18px rgba(3, 242, 9, 0.35);
}

/* caixa de compra com linha neon no topo */
.buy-box {
  border-color: rgba(3, 242, 9, 0.14);
  background:
    linear-gradient(180deg, rgba(3, 242, 9, 0.06), transparent 40%),
    var(--surface);
  padding: 30px 32px;
  gap: 22px;
}
.buy-box::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 12px var(--neon);
}
.buy-box .btn-primary.btn-lg {
  box-shadow: 0 0 0 1px rgba(3, 242, 9, 0.2), 0 0 24px rgba(3, 242, 9, 0.22);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.buy-box .btn-primary.btn-lg:hover {
  box-shadow: 0 0 0 1px rgba(3, 242, 9, 0.4), 0 0 34px rgba(3, 242, 9, 0.38);
  transform: translateY(-1px);
}
.gift .check:hover {
  box-shadow: 0 0 16px var(--neon-soft);
}
.feature-list svg {
  filter: drop-shadow(0 0 4px var(--neon));
}

.product-desc {
  margin-top: 88px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
  position: relative;
}
.product-desc::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 120px;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 14px var(--neon);
}
.product-desc h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin-bottom: 22px;
}
.product-desc .prose { font-size: 15px; line-height: 1.75; }

@media (max-width: 960px) {
  .product { gap: 44px; }
  .product-desc { margin-top: 56px; }
}

/* estilo dos elementos da página de produto (tags, preço, botões, benefícios) */
.product .tags { gap: 6px; }
.product .tag {
  border-radius: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
}
.product .tag-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
.product-price strong {
  font-family: var(--mono);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.buy-box .btn-primary.btn-lg {
  min-height: 52px;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
}
.gift .check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  align-self: flex-start;
}
.gift .check:hover { border-color: var(--accent); }
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.feature-list svg { color: var(--accent); flex-shrink: 0; }

/* caixa de compra da página de produto */
.buy-box {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
}
.buy-box::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}
.buy-box .product-price strong { color: var(--accent); }
.meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.meta-line b { color: var(--accent); font-weight: 500; margin-left: 6px; }

/* todos os textos que não são títulos usam a fonte do cabeçalho (JetBrains Mono) */
body {
  font-family: var(--mono);
}
/* títulos de seções, cards, nomes e a marca continuam na fonte de títulos */
h1,
h2,
h3,
h4,
.brand-text,
.card h3,
.step h3,
.lore-pillar h3,
.creator-name,
.cta-title,
.cta-title-accent,
.hero2 h1,
.product-info h1 {
  font-family: var(--display);
}

/* botão Zona Academy: ícone de capelo alinhado ao texto */
.hero2 .btn-outline svg { flex-shrink: 0; }
/* botões da primeira seção com a mesma fonte do cabeçalho */
.hero2 .btn {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* barra da loja: busca com a fonte do cabeçalho e cantos quadrados */
.store-vitrine .search input {
  border-radius: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.store-vitrine .search input::placeholder { text-transform: uppercase; letter-spacing: 0.08em; }
.store-vitrine .search input { height: 44px; }

/* ordenação da vitrine - caixa própria (mesmo padrão visual do seletor de
   moeda do cabeçalho, ver .currency-select-btn em site.css), não um <select>
   nativo - pra não cair na cara padrão do navegador nem no traço de foco
   genérico. Aqui a lista usa position:absolute simples (não precisa do
   position:fixed calculado via JS que o seletor de moeda usa, porque esta
   caixa não vive dentro de um cabeçalho sticky). */
.sort-select { position: relative; }
.sort-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 220px;
  height: 44px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
}
.sort-select-btn:hover { border-color: var(--text-2); background: var(--surface-2); }
.sort-select-btn svg { flex-shrink: 0; transition: transform 0.2s var(--ease); }
.sort-select.is-open .sort-select-btn { border-color: var(--accent); color: var(--accent); }
.sort-select.is-open .sort-select-btn svg { transform: rotate(180deg); }

.sort-select-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 100%;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0.15s;
}
.sort-select.is-open .sort-select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sort-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}
.sort-option svg { flex-shrink: 0; color: var(--accent); }
.sort-option:hover { background: var(--surface-2); color: var(--text); }
.sort-option.is-selected { color: var(--accent); }

/* cartões de produto */
.card-media { aspect-ratio: 16 / 10; position: relative; }
/* tag do card (ex: "Novo", "Mais vendido") - escrita pelo admin em
   #/traducoes/admin (ver badgeOf/renderProductTranslationAdminForm em
   site.js). Fundo cinza (igual ao .tag padrão do site), texto verde - e
   cantinho cortado via .cut-corner (ver site.css), só que menor que o
   padrão (--cut: 6px) porque a tag é pequena, mesmo ajuste já usado nos
   ícones pequenos do cabeçalho (ver .currency-select-btn acima). */
.card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  --cut: 6px;
  background: var(--surface-2);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 0;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

/* ------------------------------------------------ galeria de clientes (ver
   #/clientes em site.js) - mesma linguagem visual do resto da loja: card
   quadrado, cut-corner, com a foto do servidor centralizada. */
/* Cada coluna é um fluxo independente: abrir os mapas empurra somente os
   cards abaixo do servidor naquela coluna, sem mover as colunas vizinhas. */
.client-grid {
  grid-template-columns: repeat(var(--client-columns, 1), minmax(0, 1fr));
  align-items: start;
}
.client-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap);
  min-width: 0;
}
.client-column .client-card {
  width: 100%;
  margin: 0;
}
/* fundo "vidro fosco" (blur + leve transparência) em vez do cinza sólido
   padrão dos cards - pedido explícito, só nos cards de clientes. */
.client-card {
  position: relative;
  align-self: start;
  height: max-content;
  align-items: stretch;
  text-align: center;
  background: rgba(30, 30, 30, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
/* mesma animação de hover dos cards de produto: SEM o contorno/brilho verde
   (anula o .card:hover genérico, mais acima neste arquivo), com um
   gradiente verde saindo de baixo no lugar - .client-card-body é o mesmo
   truque do .card-body dos produtos (ver mais acima), só que num card sem
   foto retangular. O padding fica AQUI dentro (não em .client-card) e
   flex:1 estica o bloco pra ocupar o card inteiro - senão o gradiente só
   cobre o tamanho do conteúdo (virava um "quadrado" centralizado em vez de
   preencher o card todo, bug relatado). */
.client-card:hover { border-color: var(--line-strong); box-shadow: none; }
.client-card-body {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 20px;
  background: linear-gradient(180deg, rgba(3, 242, 9, 0) 0%, rgba(3, 242, 9, 0) 100%);
  transition: background 0.45s var(--ease);
}
/* "cotovelo" verde decorativo no canto superior esquerdo, afastado da borda
   (pedido explícito - o card tava simples demais). Só enfeite, não reage a
   nada. */
.client-card-body::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 14px;
  width: 20px;
  height: 20px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  pointer-events: none;
}
/* card comum (não top cliente): degradê BRANCO suave e leve no hover, nunca
   verde (pedido explícito - o verde fica reservado só pro Top Cliente). */
.client-card:not(.is-top-client):hover .client-card-body {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 100%);
}
/* Top Cliente: o degradê verde já vem ligado por padrão (não só no hover) -
   sinaliza o destaque mesmo sem interação. Passar o mouse intensifica um
   pouco mais. */
.client-card.is-top-client .client-card-body {
  background: linear-gradient(180deg, rgba(3, 242, 9, 0) 0%, rgba(3, 242, 9, 0.08) 100%);
}
.client-card.is-top-client:hover .client-card-body {
  background: linear-gradient(180deg, rgba(3, 242, 9, 0) 0%, rgba(3, 242, 9, 0.14) 100%);
}
/* "TOP CLIENTE" em texto puro, acima da foto - sem card/carimbo nenhum
   (pedido explícito). Branco, maiúsculo, com bastante espaçamento entre
   letras ("rústico") pra um ar sofisticado, mesma fonte mono do resto do
   site. */
/* sempre ocupa o mesmo espaço (altura fixa), mesmo nos cards que não são Top
   Cliente (ver site.js - o span sempre existe, só fica invisible) - senão a
   foto ficaria mais alta nesses cards, desalinhando tudo (pedido explícito). */
.client-top-label {
  display: block;
  height: 15px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px; /* soma com o gap do .client-card-trigger - mais afastado da foto, pedido explícito */
}
.client-top-label.is-hidden { visibility: hidden; }
.client-card-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}
/* quadrada e cut-corner, igual o resto do site (pedido explícito - nada de
   foto redonda) - corte bem visível (pedido explícito: "mais cortado") e
   SEM o traço verde (pedido explícito) - mesmo ajuste já usado nos ícones
   pequenos do cabeçalho (ver .currency-select-btn mais acima). */
.client-logo {
  --cut: 18px;
  width: 92px;
  height: 92px;
  overflow: hidden;
  background: var(--bg-deep);
  border: 2px solid var(--line-strong);
  flex-shrink: 0;
  transition: border-color 0.25s var(--ease);
}
.client-logo::after { content: none; }
.client-logo img { width: 100%; height: 100%; object-fit: cover; }
.client-logo img.placeholder { object-fit: contain; padding: 18px; opacity: 0.6; }
/* altura reservada pra até 2 linhas, nome curto ou longo - assim o botão
   "Ver mapas" (e a foto, ver .client-top-label) sempre caem no mesmo lugar
   em todos os cards, pedido explícito. */
.client-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
/* "Ver mapas" - mesmo botão verde sólido do "Comprar" (.btn-buy, ver mais
   acima neste arquivo), só com o tamanho ajustado pro card de cliente e a
   setinha que vira de cabeça pra baixo quando o card está aberto. */
.client-card-hint {
  margin-top: 4px;
  min-height: 38px;
  padding: 8px 16px;
}
.client-card-hint svg { transition: transform 0.25s var(--ease); }
.client-card.is-open .client-card-hint svg { transform: rotate(180deg); }

/* painel que abre pra baixo (ver toggleClientCard em site.js) - altura
   animada via grid-template-rows, pra não precisar medir a altura real do
   conteúdo em JS (truque mais robusto que max-height pra conteúdo que muda
   de tamanho). */
.client-card-panel {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows 0.3s var(--ease);
}
.client-card.is-open .client-card-panel { grid-template-rows: 1fr; }
.client-card-panel > * { overflow: hidden; }
.client-card-panel h4 {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}
.client-products-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.client-product-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: var(--radius-sm);
  text-align: left;
  color: var(--text-2);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.client-product-row:hover { background: var(--surface-2); color: var(--text); }
.client-product-thumb {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-deep);
}
.client-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.client-product-name { font-size: 13px; font-weight: 500; }
.client-no-products { text-align: left; margin-top: 10px; font-size: 13px; }

/* botão Discord do servidor, dentro do painel "ver mapas" - cores/ícone do
   próprio Discord (não o verde do site), cantos retos com um pequeno corte
   no inferior direito, igual ao .cut-corner mas na cor do Discord. */
.client-discord-btn {
  --cut: 10px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 11px 16px;
  background: #5865f2;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  transition: background-color 0.2s var(--ease);
}
.client-discord-btn:hover { background: #4752c4; color: #fff; }
.client-discord-btn svg { flex-shrink: 0; }

/* ---- admin de clientes (ver renderClientAdminForm em site.js) ---- */
.client-logo-preview img,
.client-logo-preview span.badmin-cover-empty { border-radius: 50%; }
.client-admin-thumb img { border-radius: 50%; width: 56px; height: 56px; object-fit: cover; }
.client-admin-products {
  list-style: none;
  margin: 8px 0 0;
  padding: 10px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.client-admin-product-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2);
}
.client-admin-product-row:hover { background: var(--surface-2); }
.client-admin-product-row input { accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.client-admin-product-thumb {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}
.client-admin-product-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---- solicitações pendentes no painel admin (ver clientRequestRowHtml em site.js) ---- */
.client-requests-panel { margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.client-requests-title {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.client-request-admin-products { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.client-request-admin-products li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 4px 8px 4px 4px;
}
.client-request-admin-products img { width: 22px; height: 22px; object-fit: cover; flex-shrink: 0; }

/* ---- mini-formulário público de autocadastro (#/clientes/solicitar, ver
   renderClientRequestPage em site.js). Dividido ao meio - esquerda = título
   "Cadastre seu servidor" + descrição + foto (um pouco menor, inteira, sem
   cortar); direita = o formulário, card mais estreito que a coluna, com
   rolagem própria se o conteúdo não couber (não precisa que a página toda
   role). Margem lateral confortável (ver --container). */
.client-request-section { padding-top: 32px; }
.client-request-section .container { max-width: 1480px; padding: 0 36px; }
.client-request-crumbs { margin-bottom: 18px; }
.client-request-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 48px;
  align-items: start;
}
.client-request-info { display: flex; flex-direction: column; gap: 20px; }
.client-request-info .steps-titleblock h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
.client-request-intro {
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 640px; /* mais larga, pra não quebrar linha toda hora - sobra espaço pra foto crescer */
  margin: 0;
  padding-left: 28px; /* um pouco mais à direita que o título (steps-titleblock já tem 24px) */
}
/* mesmo recorte da foto da seção Lore Friendly da home (.lore-body .lore-frame) - pode
   cortar um pouco mais pra não precisar rolar a tela pra ver o resto da seção */
.client-request-photo { max-width: 580px; margin-top: 20px; margin-left: 28px; }
.client-request-photo .lore-media { margin-top: 6px; }
.client-request-photo .lore-frame { aspect-ratio: 16 / 10; }
.client-request-photo .lore-frame img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 28%; }

.client-request-form-wrap {
  --cut: 18px;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  padding: 20px 24px;
}
.client-request-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: min(600px, 68vh);
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
/* barra de rolagem cinza e fina (minimalista), não a branca padrão do navegador */
.client-request-form::-webkit-scrollbar { width: 8px; }
.client-request-form::-webkit-scrollbar-track { background: transparent; }
.client-request-form::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }
/* botão "Enviar solicitação" FORA da área com rolagem (.client-request-form) -
   pedido explícito: sempre visível, "conectado" ao fundo do card, sem precisar
   rolar nada pra alcançar ele. */
.client-request-form-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.crf-field { display: flex; flex-direction: column; gap: 6px; }
.crf-field > span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.crf-field input[type="text"] {
  background: none;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 7px 2px 8px;
  font-size: 14px;
  color: var(--text);
  width: 100%;
  transition: border-color 0.2s var(--ease);
}
.crf-field input[type="text"]:focus { outline: none; border-color: var(--accent); }
.crf-field input[type="text"]::placeholder { color: var(--muted); }
.crf-upload-field { gap: 8px; }
.crf-photo-preview {
  height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg-deep);
  border: 1px solid var(--line);
}
.crf-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crf-photo-empty { color: var(--muted); font-size: 12px; }
/* cinza escuro, cantos retos - não é o botão verde padrão do site, é mais discreto (é só um upload) */
.crf-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  cursor: pointer;
  border-radius: 0;
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--text-2);
}
.crf-upload-btn:hover { background: var(--bg-deep); color: var(--text); border-color: var(--line-strong); }
.crf-photo-status { color: var(--muted); font-size: 12px; margin: 0; min-height: 1em; }
.client-request-form .client-admin-products {
  margin-top: 6px;
  max-height: 160px;
  border-radius: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.client-request-form .client-admin-products::-webkit-scrollbar { width: 7px; }
.client-request-form .client-admin-products::-webkit-scrollbar-track { background: transparent; }
.client-request-form .client-admin-products::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }
.crf-error {
  color: #ff7a6b;
  font-size: 13px;
  background: rgba(255, 122, 107, 0.08);
  border: 1px solid rgba(255, 122, 107, 0.3);
  padding: 10px 12px;
}
.client-request-success { text-align: center; padding: 20px 0; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.client-request-success p { color: var(--text-2); font-size: 15px; line-height: 1.7; max-width: 420px; }

@media (max-width: 960px) {
  .client-request-section .container { padding: 0 20px; }
  .client-request-grid { grid-template-columns: 1fr; gap: 28px; }
  .client-request-form-wrap { max-width: none; padding: 20px 18px; }
  .client-request-photo { margin-left: 0; max-width: 420px; }
}
@media (max-width: 640px) {
  .client-request-intro { padding-left: 0; max-width: none; }
  .client-request-photo { max-width: none; }
}

.card-head h3 { font-size: 17px; }
.card-head .price { font-size: 16.5px; white-space: nowrap; padding-top: 2px; }
.card-head .price strong { color: var(--accent); font-weight: 400; }
.card-desc {
  -webkit-line-clamp: 1;
  min-height: 0;
  margin-top: 2px;
}
.card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
}
.btn-cart,
.btn-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 46px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: break-word;
}
.btn-cart svg,
.btn-buy svg { flex-shrink: 0; }
.btn-cart {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.btn-cart:hover { border-color: var(--accent); color: var(--accent); }
.btn-buy {
  background: var(--accent);
  border: 0;
  color: var(--accent-ink);
  font-weight: 700;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.btn-buy:hover { background: var(--accent-hover); }

/* tutorial de instalação na página do produto */
.install-block {
  margin-top: 80px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
  position: relative;
}
.install-block::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 120px;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 14px var(--neon);
}
.install-block h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin-bottom: 10px;
}
.install-block > p.muted { margin-bottom: 36px; }
.install-block .steps { margin-bottom: 32px; }
.install-block .step p { max-width: none; font-size: 14px; line-height: 1.6; }

/* softwares usados no mapa */
.software-block {
  margin-top: 80px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
  position: relative;
}
.software-block::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 120px;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 14px var(--neon);
}
.software-block h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin-bottom: 10px;
}
.software-block > p.muted { margin-bottom: 32px; }
.software-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
}
.sw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 170px;
  padding: 28px 20px;
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.sw-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  background: var(--accent);
  opacity: 0.8;
}
.sw-card:hover {
  border-color: rgba(3, 242, 9, 0.55);
  box-shadow: 0 0 18px rgba(3, 242, 9, 0.22), inset 0 0 24px rgba(3, 242, 9, 0.05);
}
.sw-logo {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
}
.sw-logo img {
  max-width: 100%;
  max-height: 100%;
  filter: drop-shadow(0 0 8px rgba(3, 242, 9, 0.25));
}
.sw-name {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  text-align: center;
}

/* cartão do autor */
.author-card {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px 28px;
  background: linear-gradient(120deg, rgba(3, 242, 9, 0.07), transparent 60%), rgba(20, 20, 20, 0.6);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  box-shadow: 0 0 22px rgba(3, 242, 9, 0.08);
}
.author-avatar {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  object-fit: cover;
  object-position: center top;
  background: var(--surface-2);
  clip-path: polygon(0 0, 100% 0, 100% 74%, 74% 100%, 0 100%);
  box-shadow: 0 0 20px rgba(3, 242, 9, 0.3);
}
.author-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.author-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.author-name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--text);
}
.author-info p.muted { font-size: 14px; }
.author-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-2);
}
.author-meta a {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(3, 242, 9, 0.25);
}
.author-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* como funciona: fundo do site desfocado, em movimento suave */
.steps-section {
  position: relative;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}
.steps-section::before {
  content: "";
  position: absolute;
  inset: -60px -80px;
  background: url("/imgs/backgroundzonamods.png") center / cover no-repeat;
  filter: blur(40px) saturate(1.1);
  opacity: 0.28;
  transform: translateX(-3%) scale(1.06);
  /* o fundo some nas bordas laterais e de cima/baixo, sem respingos aparentes à esquerda */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-composite: intersect;
  z-index: -2;
}
.steps-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: -1;
  pointer-events: none;
}
.steps-section .container {
  position: relative;
  z-index: 1;
  max-width: 1560px;
  padding-left: 20px;
  padding-right: 20px;
}

/* como funciona: título com linha vertical, passos numerados ligados por linha neon */
.steps-head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-bottom: 56px;
}
.steps-titleblock {
  padding-left: 24px;
  border-left: 1px solid var(--accent);
}
.steps-titleblock h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.02;
}
.steps-titleblock .accent {
  color: var(--accent);
  text-shadow: 0 0 22px rgba(3, 242, 9, 0.25);
}
.steps-sub {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
  padding-top: 6px;
}
.steps { gap: 28px; }
.steps-carousel-controls { display: none; }
.steps::before {
  top: 19px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(3, 242, 9, 0.25) 60%, rgba(3, 242, 9, 0.08) 100%);
  box-shadow: 0 0 10px rgba(3, 242, 9, 0.35);
}
.step-num {
  width: 40px;
  height: 40px;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  clip-path: none;
  box-shadow: none;
}
.step h3 {
  font-family: var(--display);
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin: 22px 0 10px;
  color: var(--text);
}
.step p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 240px;
}
@media (max-width: 960px) {
  .steps-head { grid-template-columns: 1fr; gap: 20px; }
}

/* bloco de história da home: imagem à esquerda, texto à direita */
.story > .story-container {
  max-width: 1560px;
  padding-left: 20px;
  padding-right: 20px;
}
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: 88px;
  align-items: start;
}
.story-placeholder {
  position: relative;
  aspect-ratio: 16 / 10.5;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(3, 242, 9, 0.16), transparent 60%),
    linear-gradient(135deg, #1c1c1c, #121212);
  border: 1px solid var(--line-strong);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 92% 100%, 0 100%);
  overflow: hidden;
}
.story-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(3, 242, 9, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3, 242, 9, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.story-placeholder img {
  position: relative;
  width: 96px;
  height: 96px;
  object-fit: contain;
  opacity: 0.35;
  filter: drop-shadow(0 0 14px rgba(3, 242, 9, 0.25));
}
.story-placeholder::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 38px;
  height: 38px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}
/* cabeçalho: título com linha vertical à esquerda e apoio à direita */
.story-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-bottom: 64px;
}
.story-copy-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
  margin-top: -12px;
}
.story-titleblock {
  padding-left: 24px;
  border-left: 1px solid var(--accent);
}
.story-titleblock .kicker { margin-bottom: 14px; }
.story-titleblock h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.02;
}
.story-titleblock .accent {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(3, 242, 9, 0.25);
}
.story-intro {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  padding-bottom: 0;
  margin: -30px 0 0;
}
.story-media { position: relative; }
.story-media::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 36px;
  height: 36px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  z-index: 2;
  pointer-events: none;
}
.story-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.story-copy > .steps-titleblock h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
.story-body {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.85;
  max-width: 520px;
}
.story-cta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 24px;
}
@media (max-width: 960px) {
  .story-head { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 960px) {
  .story-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* card do fundador dentro da apresentação da Zona Mods */
.story-copy { align-items: stretch; }
/* o texto começa alinhado com o topo da foto ao lado */
.story-grid { align-items: start; }
.story-copy { margin-top: 0; }
.story-copy .story-body { margin-top: 0; }
@media (min-width: 961px) {
  .story-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }
  .founder { margin-left: 28px; width: calc(100% - 28px); }
}
.founder {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  margin-left: 0;
  padding: 4px 0 4px 24px;
  background: none;
  border: 0;
  border-left: 2px solid var(--accent);
  box-sizing: border-box;
}
.founder .founder-photo {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
}
.founder .creator-id { gap: 4px; }
.founder .creator-name { font-size: 1.2rem; }
.founder .creator-role { font-size: 13px; }
.founder .creator-meta { font-size: 11px; }

/* rodapé informativo: fonte sans-serif profissional, sem o estilo do cabeçalho */
#site-footer {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-style: normal;
}
#site-footer .footer-label {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  letter-spacing: 0.08em;
  font-weight: 600;
}
#site-footer .footer-blurb,
#site-footer .footer-legal p,
#site-footer .footer-links a,
#site-footer .footer-copy,
#site-footer .footer-tebex-inner p {
  font-family: "Inter", Arial, Helvetica, sans-serif;
}

/* faixa de parceiros logo acima do rodapé, em todas as páginas */
.footer-marquee {
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: #0e0e0e;
}

/* rodapé: estrutura em colunas, legal e pagamentos */
.footer-main { padding: 72px 0 0; }
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.footer-brand { display: flex; flex-direction: column; gap: 18px; }
.footer-blurb { color: var(--muted); font-size: 14px; line-height: 1.7; max-width: 340px; }
.footer-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 16px;
  font-weight: 500;
}
.footer-pay { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.footer-pay .payment-list { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 26px; }
.footer-pay .payment-chip {
  background: none;
  padding: 0;
  height: auto;
  display: inline-flex;
  align-items: center;
}
.footer-pay .payment-chip img {
  height: 22px;
  width: auto;
  max-width: 64px;
  object-fit: contain;
  /* os ícones vêm com a cor de marca de cada bandeira (azul escuro do Visa,
     preto do Apple Pay...) - em cima do rodapé escuro ficam apagados. Isso
     força todos pra branco sólido, sem depender da cor original do SVG. */
  filter: brightness(0) invert(1);
  opacity: 0.82;
  transition: opacity 0.2s var(--ease);
}
.footer-pay .payment-chip:hover img { opacity: 1; }
.footer-col .footer-links li { margin: 0; }
.footer-col .footer-links a { color: var(--muted); font-size: 14px; }
.footer-col .footer-links a:hover { color: var(--accent); }
.footer-legal {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.footer-legal p { color: var(--muted); font-size: 12px; line-height: 1.75; }
.footer-copy {
  margin-top: 28px;
  padding: 22px 24px 28px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding-left: 24px;
  padding-right: 24px;
}
@media (max-width: 880px) {
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-legal { grid-template-columns: 1fr; }
}

/* moldura da seção "Mapas e MLOs": mesmo acabamento da seção lore friendly */
.story .story-media { position: relative; }
.story .story-media::before {
  content: "";
  position: absolute;
  inset: -18px;
  width: auto;
  height: auto;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  z-index: 1;
  pointer-events: none;
}
.story .story-media::after {
  content: "";
  position: absolute;
  top: -18px;
  left: -18px;
  width: 34px;
  height: 34px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  filter: drop-shadow(0 0 6px var(--neon));
  pointer-events: none;
  z-index: 2;
}
.story .story-placeholder { box-shadow: none; }
/* legenda da foto, com a mesma fonte do cabeçalho */
.story .story-caption {
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* a foto do escritório preenche toda a moldura */
.story .story-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  filter: none;
  transform: none;
}
.story .story-placeholder::after { display: none; }
.story .story-media .lore-glow { z-index: 0; }
.story .story-placeholder { position: relative; z-index: 1; }

/* seção lore friendly: foto grande à esquerda, textos à direita */
.lore-section { padding: 76px 0 72px; }
.lore-section > .container {
  max-width: 1560px;
  padding-left: 20px;
  padding-right: 20px;
}
.lore-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 88px;
  align-items: center;
}
.lore-home-market { align-items: start; }
.lore-home-market .metrics-market-frame img { object-position: 50% 8%; }
.lore-home-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.lore-home-points li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.lore-media { position: relative; }
.lore-glow {
  position: absolute;
  inset: -4% -2%;
  background: radial-gradient(circle at 50% 50%, rgba(3, 242, 9, 0.42), rgba(3, 242, 9, 0.12) 45%, transparent 70%);
  filter: blur(34px);
  pointer-events: none;
  z-index: 0;
}
/* contorno cinza fino ao redor da moldura, com folga */
.lore-media::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  pointer-events: none;
  z-index: 1;
}
/* colchetes verdes do lado de fora, nos cantos do contorno */
.lore-media::after {
  content: "";
  position: absolute;
  top: -18px;
  left: -18px;
  width: 34px;
  height: 34px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  filter: drop-shadow(0 0 6px var(--neon));
  pointer-events: none;
  z-index: 2;
}
.lore-frame {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 92% 100%, 0 100%);
  box-shadow: 0 0 40px rgba(3, 242, 9, 0.12);
  background: var(--surface);
}
.lore-frame img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.2s var(--ease);
}
.lore-frame:hover img { transform: scale(1.03); }

.lore-copy { display: flex; flex-direction: column; gap: 24px; }
.lore-copy .steps-titleblock h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
.lore-text {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.85;
  max-width: 520px;
  margin-top: -6px;
}
.lore-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px 28px;
  background: rgba(20, 20, 20, 0.7);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.lore-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lore-chips li {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
}
.lore-chips li:first-child {
  border-color: rgba(3, 242, 9, 0.45);
  color: var(--accent);
}
.lore-cta { align-self: flex-start; }
@media (max-width: 960px) {
  .lore-section { padding: 64px 0; }
  .lore-grid { grid-template-columns: 1fr; gap: 48px; }
  .lore-home-points { grid-template-columns: 1fr; }
}

/* seção lore friendly: ocupa toda a largura, em três faixas */
.lore-wrap { display: flex; flex-direction: column; gap: 64px; }
.lore-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.lore-head .lore-text {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
  margin: -54px 0 0;
  max-width: none;
}
.lore-body {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.lore-body .lore-media { margin-left: 0; }
/* proporção mais alta, próxima da placa: mostra a imagem quase inteira, sem cortar a direita */
.lore-body .lore-frame { aspect-ratio: 6 / 5; }
.lore-body .lore-frame img {
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform: none;
  transition: transform 1.2s var(--ease);
}
.lore-body .lore-frame:hover img { transform: scale(1.02); }
.lore-pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.lore-pillar {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  padding: 30px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.35s var(--ease);
}
.lore-pillar:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
/* formato escada: cada tópico um degrau à direita */
.lore-pillar:nth-child(2) { margin-left: 40px; }
.lore-pillar:nth-child(3) { margin-left: 80px; }
.lore-pillar:hover { border-top-color: rgba(3, 242, 9, 0.55); }
.lore-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  width: 46px;
  height: 36px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--accent);
  border: 1px solid rgba(3, 242, 9, 0.32);
  background: rgba(3, 242, 9, 0.05);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
/* traço verde curto embaixo de cada número */
.lore-num::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 26px;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--neon);
}
.lore-pillar:hover .lore-num {
  border-color: rgba(3, 242, 9, 0.6);
  background: rgba(3, 242, 9, 0.1);
}
.lore-pillar h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: -0.005em;
  color: var(--text);
  margin-bottom: 10px;
}
.lore-pillar p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}
@media (max-width: 960px) {
  .lore-head,
  .lore-body { grid-template-columns: 1fr; gap: 40px; }
  .lore-head .lore-text { margin-top: 0; }
}

/* destaques: texto de apoio maior e carrossel de largura total da tela -
   levemente menor que antes (pedido explícito), igual em todas as páginas
   que usam esse padrão de cabeçalho (loja/métricas/blog...). */
.featured-sub {
  font-size: 17px;
  line-height: 1.6;
  max-width: 560px;
  color: var(--text-2);
}
.featured-section { overflow: hidden; padding-top: calc(var(--section) - 16px); }
/* cabeçalho de largura total: título à esquerda acima dos cards, texto à direita e mais alto */
.featured-section > .container:first-child {
  max-width: 1560px;
  padding: 0 20px;
}
.featured-section > .container:first-child .steps-head {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-bottom: 36px;
}
.featured-section .steps-titleblock { justify-self: start; }
.featured-section .featured-sub {
  justify-self: end;
  text-align: left;
  margin-top: -44px;
  max-width: 520px;
}
.featured-section > .container:first-child .carousel-controls { padding: 0 20px; }
/* botão "Explorar todos os mapas" mais perto do carrossel (estava muito longe, pedido explícito) */
.featured-section .featured-more { margin-top: 20px; }

/* celular: só o título "Nossos mapas", em destaque, sem o texto de apoio */
@media (max-width: 760px) {
  .featured-section .featured-sub { display: none; }
}

#home-track {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 8px 20px 22px;
  scroll-padding-left: 20px;
  grid-auto-columns: minmax(300px, 380px);
  gap: 24px;
}

/* linhas divisórias sutis entre seções */
.soft-rule {
  border: 0;
  height: 1px;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14) 30%, rgba(255, 255, 255, 0.14) 70%, transparent);
}

/* chamada final: título centralizado em duas linhas + faixa giratória */
.cta-section {
  padding: 120px 0 0;
  text-align: center;
}
.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0;
}
.cta-title-accent {
  display: block;
  color: var(--accent);
  text-shadow: 0 0 34px rgba(3, 242, 9, 0.28);
}
.cta-text {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  max-width: 640px;
  margin-top: 28px;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
}
.cta-button {
  margin-top: 0;
  padding: 16px 32px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
}
.cta-marquee {
  margin-top: 100px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
  padding: 26px 0;
}
.cta-marquee-track {
  display: flex;
  width: max-content;
  animation: ticker 16s linear infinite;
  will-change: transform;
}
.cta-marquee-track > div {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
}
.cta-item {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.cta-item img { display: block; filter: brightness(0) invert(0.75); opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
  .cta-marquee-track { animation: none; }
}

/* cartão unificado: autor + softwares */
/* seção do autor: faixa de largura total com o fundo do site, sem cartão */
.creator-card {
  position: relative;
  margin-top: 40px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 72px 24px;
  border-radius: 0;
  overflow: hidden;
  background-color: #171717;
  background-image:
    linear-gradient(rgba(23, 23, 23, 0.86), rgba(23, 23, 23, 0.94)),
    url("/imgs/backgroundzonamods.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.creator-card > * {
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.creator-top {
  display: flex;
  align-items: center;
  gap: 24px;
}
.creator-photo {
  flex-shrink: 0;
  width: 104px;
  height: 104px;
  object-fit: cover;
  object-position: center top;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
}
.creator-alias {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.6em;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--muted);
  margin-left: 4px;
}
.creator-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.creator-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.creator-name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--text);
  line-height: 1.1;
}
.creator-role { color: var(--muted); font-size: 14px; }
.creator-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin-top: 2px;
}
.creator-meta a { color: var(--accent); }
.creator-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }

.creator-stack {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* ícones das ferramentas (3ds Max, CodeWalker, Photoshop, Blender...) - só o
   ícone, sem texto nem efeito de hover (pedido explícito); quadrado, cinza,
   com um corte pequeno no canto inferior direito (mesma linguagem visual do
   site, --cut menor por serem ícones pequenos - ver .client-logo). Reaproveitada
   tanto na página do produto (.creator-stack) quanto em "Conheça a Zona Mods"
   na home (.founder-tools), ver toolsIconsHtml() em site.js. */
.creator-tools-icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sw-icon {
  --cut: 6px;
  width: 42px;
  height: 42px;
  padding: 7px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.sw-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* .story-copy é flex com gap:28px entre os filhos (story-body/.founder/.founder-tools) -
   isso sozinho já separava demais as ferramentas do card do Davi, a quem elas
   pertencem; a margem negativa puxa pra mais perto dele. */
.founder-tools { margin-top: -18px; }

@media (max-width: 640px) {
  .creator-card { padding: 22px 20px; }
  .creator-top { flex-direction: column; align-items: flex-start; gap: 18px; }
  .creator-photo { width: 84px; height: 84px; }
}

/* descrição: dentro da mesma seção do produto, como antes */
.product-desc {
  margin-top: 88px;
  max-width: 860px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
  position: relative;
}
.product-desc::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 120px;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 14px var(--neon);
}
.product-desc h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin-bottom: 22px;
}
.product-desc .prose { font-size: 15px; line-height: 1.75; }

/* faixa de instalação: bloco próprio, sólido e de largura total */
.install-band {
  margin-top: 40px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 56px 24px;
  background: #101010;
  border-top: 1px solid #1f1f1f;
  border-bottom: 1px solid #1f1f1f;
}
/* sem imagem de fundo nesta seção */
.install-band::before,
.install-band::after {
  display: none;
}
.install-band .steps-head,
.install-band .steps,
.install-band .install-note,
.install-band .install-note-support,
.install-head,
.install-steps,
.install-note {
  width: 100%;
  /* mesma largura de conteúdo do container de "Como funciona" (.steps-section
     .container: max-width 1560px menos os 20px de padding de cada lado), pra
     essa seção abrir tanto quanto aquela, em vez de ficar com uma margem
     lateral bem maior */
  max-width: 1520px;
  margin-left: auto;
  margin-right: auto;
}
/* linha de suporte abaixo do aviso de instalação - menor e mais discreta de propósito (pedido explícito) */
.install-note-support { margin-top: 10px; }
.install-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 32px;
}
.install-head h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin-top: 14px;
  line-height: 1.05;
}
.install-intro {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  padding-bottom: 6px;
}
.install-steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.install-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 20px 18px;
  background: #161616;
  border: 1px solid #222;
  min-height: 100%;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.install-step:hover {
  border-color: #2e2e2e;
  background: #181818;
}
.install-num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.install-step h3 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--text);
  margin-top: 8px;
}
.install-step p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
.install-note {
  margin-top: 20px;
  padding: 14px 18px;
  background: #161616;
  border-left: 2px solid var(--accent);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}
@media (max-width: 960px) {
  .install-head { grid-template-columns: 1fr; gap: 20px; }
  .install-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .install-band { padding: 64px 20px; }
  .install-steps { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .product { grid-template-columns: 1fr; gap: 20px; }
  /* página de produto mais compacta no celular, pra precisar rolar bem menos
     até chegar no botão de comprar/adicionar ao carrinho. */
  .product-stage { padding: 32px 0 64px; }
  .product-top .crumbs { margin-bottom: 14px; }
  .thumbs { margin-top: 8px; gap: 8px; }
  .thumb { width: 72px; }
  .product-info { gap: 12px; }
}
.buy-box {
  padding: 18px 24px;
  gap: 12px;
  width: 100%;
}
.buy-box .tags { gap: 6px; }
.buy-box .gift .check { padding: 12px 16px; }
.buy-box .product-price { margin: 0; }
.buy-box .product-price strong { font-size: 32px; }
.buy-box .tags { margin: 0; }
.buy-box .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin: 0;
}
.buy-box .actions .btn { flex: 1 1 260px; }
.buy-box .gift { padding-top: 0; border-top: 0; gap: 0; }
.buy-box .gift #gift-field { margin-top: 10px; }
.buy-box .feature-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding-top: 14px;
}
.buy-box .meta-line { padding-top: 14px; }
.buy-box .notice-line { margin: 0; }

/* ------------------------------------------------ atendimento (chat de suporte)
   Vive inteiro dentro do widget flutuante de suporte (botão no canto inferior
   direito) - ver supportCardHtml() em site.js. Visual alinhado com a
   identidade do próprio site (mesmas variáveis de cor/fonte do resto da
   página), não mais uma cópia do Discord: é um canal de atendimento
   profissional, só que compacto, dentro de um card. */

.sc-card {
  pointer-events: auto;
  position: relative;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 600px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: couponSlideIn 0.4s var(--ease) both;
}

.sc-header {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 44px 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-deep);
}
.sc-header-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.sc-header-icon { color: var(--accent); flex-shrink: 0; display: flex; }
.sc-header-title > span:not(.sc-header-icon) {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.sc-header-title-admin { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; min-width: 0; }
.sc-header-title-admin strong { font-size: 14px; color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-header-title-admin small { font-size: 11.5px; color: var(--muted); }

.sc-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.sc-close:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface); }

.sc-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px;
  margin: -6px 0;
  flex-shrink: 0;
  transition: color 0.15s;
}
.sc-back:hover { color: var(--text); }
.sc-back svg { flex-shrink: 0; }

.sc-end-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(218, 55, 60, 0.4);
  color: #da373c;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.sc-end-btn:hover { background: rgba(218, 55, 60, 0.12); border-color: #da373c; }

/* banner "atendente online" - passa confiança antes e durante a conversa */
.sc-online-banner { gap: 12px; }
.sc-online-avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.sc-online-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.sc-online-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #23c55e;
  border: 2px solid var(--bg-deep);
}
.sc-online-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sc-online-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.sc-online-status { font-size: 11.5px; font-weight: 600; color: #23c55e; }
.sc-online-sub { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sc-body::-webkit-scrollbar { width: 8px; }
.sc-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }

/* tela de login */
.sc-login-gate { padding: 32px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; height: 100%; justify-content: center; }
.sc-login-gate p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; max-width: 260px; }

/* wizard: idioma -> categoria, só botões */
.sc-wizard { padding: 20px; display: flex; flex-direction: column; min-height: 100%; }
.sc-step-title { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--text); margin: 4px 0 6px; }
.sc-step-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }
.sc-intro-text { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 28px 0 18px; text-align: center; }

/* passo do idioma: grade de 2 colunas ("quadrantes"), fluindo em coluna de
   cima pra baixo - cada opção é um cartão com a bandeira em destaque em
   cima e o nome do idioma menor embaixo, igual a arquitetura dos cards de
   produto (moldura, cantinho, brilho verde suave ao passar o mouse). Se
   sobrar um idioma sozinho na última linha (quantidade ímpar), ele ocupa a
   linha inteira, pra não ficar um buraco vazio do lado. */
.sc-lang-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
.sc-lang-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sc-lang-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 10px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  text-align: center;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.sc-lang-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 242, 9, 0) 0%, rgba(3, 242, 9, 0) 100%);
  transition: background 0.3s var(--ease);
  pointer-events: none;
}
.sc-lang-tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(3, 242, 9, 0.15);
}
.sc-lang-tile:hover::after { background: linear-gradient(180deg, rgba(3, 242, 9, 0) 0%, rgba(3, 242, 9, 0.08) 100%); }
.sc-lang-tile-flag {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  display: block;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s var(--ease);
}
.sc-lang-tile:hover .sc-lang-tile-flag { transform: scale(1.06); }
.sc-lang-tile-flag svg { width: 100%; height: 100%; display: block; }
.sc-lang-tile-name { position: relative; z-index: 1; font-size: 12.5px; font-weight: 700; line-height: 1.3; }

/* bandeira do idioma escolhido no atendimento, mostrada no cabeçalho do chat
   (pro admin saber em que idioma responder; pro visitante, como confirmação). */
.sc-lang-badge {
  flex-shrink: 0;
  width: 26px;
  height: 18px;
  border-radius: 0;
  overflow: hidden;
  display: block;
  border: 1px solid var(--line-strong);
}
.sc-lang-badge svg { width: 100%; height: 100%; display: block; }

.sc-type-grid { display: flex; flex-direction: column; gap: 10px; }
.sc-option-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.15s, background-color 0.15s;
}
.sc-option-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.sc-option-card:disabled { opacity: 0.5; cursor: default; }
.sc-option-icon { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.sc-option-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-option-body strong { font-size: 13.5px; color: var(--text); }
.sc-option-body small { font-size: 11.5px; color: var(--muted); font-weight: 500; line-height: 1.4; }

.sc-start-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; }

/* mensagens */
.sc-messages { padding: 16px; display: flex; flex-direction: column; }
.sc-empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13px; }

.sc-notice { display: flex; justify-content: center; margin: 12px 0; }
.sc-notice span {
  background: var(--bg-deep);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11.5px;
  padding: 7px 14px;
  border-radius: 999px;
  text-align: center;
  line-height: 1.5;
  max-width: 92%;
}

.sc-picker-card { background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; margin: 10px 0; }
.sc-picker-prompt { margin: 0 0 10px; font-size: 12.5px; color: var(--text); line-height: 1.5; }
.sc-picker-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--muted);
}
.sc-picker-search-row svg { flex-shrink: 0; }
.sc-picker-search-row input { flex: 1 1 auto; background: transparent; border: 0; outline: 0; color: var(--text); font-family: inherit; font-size: 13px; }
.sc-picker-list { max-height: 180px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.sc-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 7px 9px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.sc-picker-item:hover { border-color: var(--line-strong); }
.sc-picker-item.is-checked { border-color: var(--accent); background: var(--accent-soft); }
.sc-picker-item img,
.sc-picker-item-fallback { width: 26px; height: 26px; border-radius: 4px; object-fit: cover; flex-shrink: 0; display: block; }
.sc-picker-item-fallback { display: grid; place-items: center; background: var(--bg-deep); color: var(--muted); }
.sc-picker-item-fallback svg { width: 13px; height: 13px; }
.sc-picker-item-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-picker-item-check { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent); opacity: 0; }
.sc-picker-item.is-checked .sc-picker-item-check { opacity: 1; }
.sc-picker-empty { color: var(--muted); font-size: 12.5px; padding: 8px 2px; }

/* variante com duas linhas (nome + ID embaixo) - usada no autocomplete de
   "presentear outro jogador" (ver giftResultsHtml em site.js). */
.sc-picker-item-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sc-picker-item-text .sc-picker-item-name { flex: none; }
.sc-picker-item-sub { font-size: 11px; color: var(--muted); }
#gift-results .sc-picker-item-fallback { color: var(--accent); font-family: var(--display); font-weight: 800; font-size: 11px; }
.sc-picker-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.sc-picker-count { font-size: 11.5px; color: var(--muted); }
.sc-picker-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sc-picker-chip {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(3, 242, 9, 0.3);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}
.sc-picker-waiting { color: var(--muted); font-size: 12.5px; font-style: italic; }

/* bolhas de chat - própria mensagem à direita, a outra pessoa à esquerda */
.sc-msg { display: flex; flex-direction: column; margin-top: 12px; max-width: 82%; }
.sc-msg.is-grouped { margin-top: 3px; }
.sc-msg-own { align-self: flex-end; align-items: flex-end; }
.sc-msg-other { align-self: flex-start; align-items: flex-start; }
.sc-msg-author { font-size: 11px; font-weight: 700; color: var(--muted); margin: 0 2px 3px; }
.sc-bubble { padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; word-break: break-word; }
.sc-bubble p { margin: 0; white-space: pre-wrap; }
.sc-bubble p + .sc-attachment { margin-top: 8px; }
.sc-msg-own .sc-bubble { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.sc-msg-other .sc-bubble { background: var(--bg-deep); border: 1px solid var(--line); color: var(--text); border-bottom-left-radius: 4px; }
.sc-msg-time { font-size: 10px; color: var(--muted); margin: 3px 2px 0; }

/* confirmação de mensagem estilo WhatsApp (ver ticketMessageTicksHtml), ao
   lado do horário - sem cor (cinza, igual o horário) até ser lida; verde
   forte (mesma cor de destaque do site) assim que a outra parte vê. */
.sc-ticks { display: inline-flex; align-items: center; margin-left: 4px; vertical-align: -1px; }
.sc-ticks svg { display: block; }
.sc-ticks-sent,
.sc-ticks-delivered { color: var(--muted); }
.sc-ticks-read { color: var(--accent); }

.sc-attachment { display: block; }
.sc-attachment-image img { max-width: 220px; max-height: 220px; border-radius: 10px; display: block; object-fit: cover; }
.sc-attachment-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  text-decoration: none;
  font-size: 12.5px;
}
.sc-msg-own .sc-attachment-file { background: rgba(0, 0, 0, 0.12); }
.sc-attachment-file svg { flex-shrink: 0; }
.sc-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* composer */
.sc-composer { flex-shrink: 0; border-top: 1px solid var(--line); background: var(--bg-deep); padding: 10px 12px 12px; }
.sc-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.sc-attach-btn { flex-shrink: 0; display: flex; align-items: center; color: var(--muted); cursor: pointer; padding: 4px; transition: color 0.15s; }
.sc-attach-btn:hover { color: var(--accent); }
.sc-composer-row textarea {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  outline: 0;
  resize: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.4;
  max-height: 120px;
  padding: 4px 0;
}
.sc-composer-row textarea::placeholder { color: var(--muted); }
.sc-send-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s;
}
.sc-send-btn:hover { background: var(--accent-hover); }
.sc-send-btn:disabled { opacity: 0.5; cursor: default; }
.sc-send-btn svg { width: 15px; height: 15px; }

.sc-attach-preview:empty { display: none; }
.sc-attach-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text);
}
.sc-attach-preview svg { flex-shrink: 0; color: var(--accent); }
.sc-attach-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-attach-remove { flex-shrink: 0; background: transparent; border: 0; color: var(--muted); cursor: pointer; display: flex; padding: 2px; }
.sc-attach-remove:hover { color: var(--text); }

/* lista de atendimentos (admin) */
.sc-list { padding: 8px; }
.sc-list-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background-color 0.15s;
}
.sc-list-row:hover { background: var(--bg-deep); }
.sc-list-row-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-deep); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.sc-list-row-icon svg { width: 16px; height: 16px; }
.sc-list-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-list-row-body strong { font-size: 13px; color: var(--text); }
.sc-list-row-body small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-list-row-time { flex-shrink: 0; font-size: 10.5px; color: var(--muted); }

@media (max-width: 480px) {
  .sc-card { height: min(600px, calc(100vh - 110px)); }
}

/* ------------------------------------------------ carrinho (painel lateral)
   Substitui a antiga página /carrinho - ver cartDrawerHtml()/renderCartDrawer()
   em site.js e #cart-drawer no index.html (fora de #app de propósito, pelo
   mesmo motivo do coupon-widget/support-widget: precisa abrir por cima de
   qualquer página e sobreviver à troca de rota). Ocupa a lateral direita
   inteira (topo a baixo) com a mesma arquitetura visual do resto do site -
   o resto da tela escurece e borra atrás, como um modal. */

.cart-drawer-host {
  position: fixed;
  inset: 0;
  z-index: 220;
  pointer-events: none;
}
.cart-drawer-host:empty { display: none; }

@keyframes cartBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cartPanelIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.cart-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  animation: cartBackdropIn 0.3s var(--ease) both;
}

.cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32%;
  min-width: 440px;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 120% 35% at 100% 0%, rgba(3, 242, 9, 0.07), transparent 70%),
    var(--bg-deep);
  border-left: 1px solid var(--line-strong);
  box-shadow: -24px 0 48px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  animation: cartPanelIn 0.35s var(--ease) both;
}

.cart-panel-head {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 50px 18px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-deep);
}
/* título "Carrinho" com a mesma assinatura visual dos títulos de seção do
   site (ver .steps-titleblock em site.css - é a mesma classe usada em
   "Nossos mapas", a seção Lore Friendly etc): traço verde à esquerda,
   itálico, caixa alta - só o tamanho é reduzido pro cabeçalho do painel. */
.cart-panel-titleblock { padding-left: 14px; border-left: 1px solid var(--accent); }
.cart-panel-titleblock h2 { font-size: 20px; margin: 0; }
.cart-panel-count { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }

.cart-secure {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #ffffff;
  padding: 10px 12px;
  color: #092b2c;
  font-size: 12px;
  line-height: 1.4;
}
.cart-secure img { width: 30px; height: 16px; object-fit: contain; flex-shrink: 0; }
.cart-panel-foot .notice-line { border-radius: 0; }

.cart-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
}
.cart-panel-body::-webkit-scrollbar { width: 8px; }
.cart-panel-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }

.cart-panel-section-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 10px;
}

.cart-panel-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
}

/* card de desconto por volume - gamificação pra incentivar gastar mais,
   mesma assinatura visual do resto do site (.cut-corner). Puramente visual:
   não aplica nenhum desconto de verdade (ver comentário em volumeDiscountHtml
   no site.js). */
.cart-volume {
  background:
    radial-gradient(ellipse 120% 100% at 100% 0%, rgba(3, 242, 9, 0.16), transparent 60%),
    radial-gradient(ellipse 80% 60% at 0% 100%, rgba(3, 242, 9, 0.05), transparent 70%),
    var(--surface);
  border: 1px solid rgba(3, 242, 9, 0.22);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cart-volume-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cart-volume-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  color: var(--text);
}
.cart-volume-desc {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}
.cart-volume-next {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 2px 0 4px;
}
.cart-volume-next .amount { color: var(--accent); }

.cart-volume-bar {
  position: relative;
  height: 6px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  overflow: visible;
  margin-bottom: 10px;
}
.cart-volume-bar-fill {
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(3, 242, 9, 0.5);
  transition: width 0.4s var(--ease);
}
/* cada tracinho com a sua própria cor, pra ficar em evidência de verdade
   (antes era quase invisível: mesma cor do fundo da barra) - pedido
   explícito do usuário. */
.cart-volume-tick {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 10px;
  transform: translateX(-1px);
  box-shadow: 0 0 0 1px var(--bg-deep);
}
.cart-volume-tick:nth-of-type(1) { background: var(--accent); }
.cart-volume-tick:nth-of-type(2) { background: var(--accent); }
.cart-volume-tick:nth-of-type(3) { background: var(--accent); }
.cart-volume-tick:nth-of-type(4) { background: var(--accent); }

.cart-volume-tiers {
  display: flex;
  gap: 6px;
}
.cart-volume-tier {
  flex: 1 1 0;
  min-width: 0;
  --cut: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  padding: 10px 4px;
}
.cart-volume-tier-top { display: inline-flex; align-items: center; gap: 4px; }
.cart-volume-tier svg { flex-shrink: 0; color: var(--muted); width: 11px; height: 11px; }
.cart-volume-tier:not(.is-unlocked)::after { background: none; }
/* branco puxado pro cinza, não puro - vale tanto bloqueado quanto
   desbloqueado, os dois usam o mesmo tom. Peso fino, igual o rótulo
   "Desbloqueado" (não mais negrito) - a porcentagem compensa ficando um
   pouco maior, pra não perder presença. */
.cart-volume-tier b { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-weight: 400; font-size: 14px; color: var(--text-2); }
.cart-volume-tier small { color: var(--text-2); font-size: 10px; font-weight: 400; }
/* nível desbloqueado: preenchimento verde do site, com texto escuro para
   contraste; o cadeado aberto identifica visualmente o desconto liberado. */
.cart-volume-tier.is-unlocked {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 14px rgba(3, 242, 9, 0.12);
}
.cart-volume-tier.is-unlocked svg { color: var(--accent-ink); }
.cart-volume-tier.is-unlocked::after {
  background: linear-gradient(
    135deg,
    transparent calc(50% - 1px),
    var(--accent-ink) calc(50% - 1px),
    var(--accent-ink) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}
.cart-volume-tier.is-unlocked b,
.cart-volume-tier.is-unlocked small { color: var(--accent-ink); }
.cart-volume-tier.is-unlocked small {
  font-weight: 400;
  font-size: 8.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cart-panel-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--muted);
  text-align: center;
  padding: 40px 20px;
}
.cart-panel-empty .cart-empty-cta {
  --cut: 12px;
  min-width: 200px;
  min-height: 52px;
  padding: 15px 30px;
  font-size: 15px;
}

.cart-panel-foot {
  flex-shrink: 0;
  padding: 16px 22px 22px;
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cart-panel-foot .btn { margin-top: 6px; }
.cart-panel-foot .center { margin: 0; }

/* celular: o painel ocupa a tela inteira, igual o menu hambúrguer */
@media (max-width: 720px) {
  .cart-panel { width: 100%; min-width: 0; max-width: none; }
  .cart-volume-tier-top { flex-direction: column; gap: 0; }
  .cart-volume-tier-top > svg { display: none; }
  .cart-volume-tier b { flex-direction: column; gap: 0; line-height: 1.15; }
}

/* ------------------------------------------------ redução de movimento */

/* ------------------------------------------------ lightbox do vídeo de capa (blog)
   caixa centralizada, bem menor que a tela inteira (pedido explícito) - ver
   openVideoLightbox/renderVideoLightbox em site.js. Mesma estrutura do
   carrinho (host fixo + backdrop + painel), só que centralizado. */
.video-lightbox-host { position: fixed; inset: 0; z-index: 320; pointer-events: none; }
.video-lightbox-host:empty { display: none; }
.video-lightbox-host.is-open { pointer-events: auto; }

@keyframes videoLightboxBackdropIn { from { opacity: 0; } to { opacity: 1; } }
/* o transform da animação precisa incluir o translate(-50%,-50%) de
   centralização também - um keyframe de "transform" substitui o valor
   inteiro, não só compõe com o scale, senão o painel perde a centralização
   assim que a animação roda (bug real, pego ao testar). */
@keyframes videoLightboxPanelIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.video-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: videoLightboxBackdropIn 0.2s var(--ease) both;
}
.video-lightbox-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1040px, 94vw);
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  padding: 12px;
  animation: videoLightboxPanelIn 0.22s var(--ease) both;
}
/* por dentro da borda do painel, não flutuando pra fora dela - o
   clip-path do .cut-corner (que esse painel também usa) corta fora
   qualquer coisa posicionada além da própria caixa, cortava o botão ao
   meio quando ele ficava com offset negativo (bug real, pego ao testar). */
.video-lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text);
  cursor: pointer;
  z-index: 1;
}
.video-lightbox-close:hover { border-color: var(--accent); color: var(--accent); }
.video-lightbox-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.video-lightbox-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* capa do card do blog quando o post tem vídeo (ver blogCardMediaHtml) -
   mesmo "cartaz com play" da galeria de produto (.gallery-play-btn), clicar
   abre o lightbox acima em vez de ir pro artigo. */
/* 16:9 (não o 16:10 padrão dos outros cards) - é o formato real da
   thumbnail do YouTube (1920x1080), pra ela aparecer inteira, sem cortar
   nada nas laterais nem em cima/embaixo (pedido explícito). */
.blog-video-cover { position: relative; display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; cursor: pointer; }
.blog-video-cover img { opacity: 0.85; transition: opacity 0.25s var(--ease); }
.blog-video-cover:hover img, .blog-video-cover:focus-visible img { opacity: 1; }

/* ------------------------------------------------ card de compra confirmada
   mesma estrutura do lightbox de vídeo acima (host fixo + backdrop + painel
   centralizado) - ver openPurchaseSuccessModal/renderPurchaseModal em
   site.js. Primeiro mostra uma animação curta de "confirmando", só depois
   o card final com os itens e o tutorial. */
.purchase-modal-host { position: fixed; inset: 0; z-index: 330; pointer-events: none; }
.purchase-modal-host:empty { display: none; }
.purchase-modal-host.is-open { pointer-events: auto; }

@keyframes purchaseModalBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes purchaseModalPanelIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes purchaseStepIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.purchase-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: purchaseModalBackdropIn 0.2s var(--ease) both;
}
.purchase-modal-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, 90vw);
  background: var(--bg-deep);
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  padding: 28px;
  animation: purchaseModalPanelIn 0.22s var(--ease) both;
}
/* saída suave do card de "enviando" antes do card final entrar (ver
   openPurchaseSuccessModal em site.js) - sem isso o corte era seco, um
   innerHTML substituindo o outro na hora. */
.purchase-modal-panel.is-leaving {
  animation: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

/* fases de "confirmando" / "enviando" - ícone e texto centralizados, sem
   botão de fechar (fecha sozinho ao avançar pra fase final). Os dois
   estados ficam os dois no DOM o tempo todo (ver purchaseModalBodyHtml) e
   só alternam de visível via o data-phase do pai - assim dá pra fazer uma
   transição de verdade (crossfade + leve deslize) entre um e outro, em vez
   de cortar seco trocando o innerHTML (pedido explícito: transição clean,
   "como se estivesse passando" de um estado pro outro). */
.purchase-step-stage { position: relative; width: 100%; min-height: 168px; }
.purchase-step-slide {
  position: absolute;
  inset: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 16px;
  padding: 18px 0;
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
.purchase-step-stage[data-phase="confirming"] .purchase-step-slide[data-step="confirming"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.purchase-step-stage[data-phase="sending"] .purchase-step-slide[data-step="confirming"] {
  opacity: 0;
  transform: translateY(-14px) scale(0.97);
}
.purchase-step-stage[data-phase="sending"] .purchase-step-slide[data-step="sending"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.purchase-step-stage[data-phase="manualRemaining"] .purchase-step-slide[data-step="confirming"],
.purchase-step-stage[data-phase="manualRemaining"] .purchase-step-slide[data-step="sending"] {
  opacity: 0;
  transform: translateY(-14px) scale(0.97);
}
.purchase-step-stage[data-phase="manualRemaining"] .purchase-step-slide[data-step="manualRemaining"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.purchase-step-stage[data-phase="manualRemaining"] { min-height: 310px; }
.purchase-step-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--accent);
  color: var(--accent);
  animation: purchaseStepIconPulse 1.1s var(--ease) infinite;
}
.purchase-step-icon svg { width: 22px; height: 22px; }
.purchase-step-icon.is-sending { animation-duration: 0.9s; }
.purchase-step-text { margin: 0; font-weight: 600; color: var(--text); }
.purchase-step-icon.is-next-step {
  width: auto;
  height: auto;
  border: 0;
  color: inherit;
  display: grid;
  place-items: center;
  animation: none;
}
.purchase-step-spinner {
  width: 25px;
  height: 25px;
  border: 2px solid rgba(65, 196, 195, .24);
  border-top-color: #41c4c3;
  border-radius: 50%;
  animation: manualOpeningSpin .8s linear infinite;
}
.purchase-step-text-next { max-width: 350px; font-size: 18px; line-height: 1.45; }
.purchase-step-hint { color: var(--muted); font-size: 12px; }

/* card final */
.purchase-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text);
  cursor: pointer;
  z-index: 1;
}
.purchase-modal-close:hover { border-color: var(--accent); color: var(--accent); }
.purchase-modal-head { text-align: center; padding-right: 4px; }
.purchase-modal-badge {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.purchase-modal-badge svg { width: 20px; height: 20px; }
.purchase-modal-head h3 { margin: 0 0 6px; font-family: "Archivo", sans-serif; font-size: 20px; }
.purchase-modal-head p { margin: 0; color: var(--muted); font-size: 13px; }

.purchase-items { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 8px; }
.purchase-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-size: 13px;
  font-weight: 600;
}
.purchase-item img { width: 32px; height: 32px; object-fit: cover; flex-shrink: 0; }
.purchase-item-fallback {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--muted);
}

.purchase-tutorial { margin: 0 0 18px; padding: 14px; background: var(--surface); border: 1px solid var(--line-strong); }
.purchase-tutorial-label { margin: 0 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.purchase-tutorial a { color: var(--accent); }

/* passo a passo numerado - cada passo é sua própria linha com um badge de
   número, pra ficar visualmente óbvio que é sequencial (pedido explícito:
   "mais no sentido de passo a passo"), em vez de uma lista numerada comum. */
.purchase-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.purchase-steps li { display: flex; align-items: baseline; gap: 10px; font-size: 13px; line-height: 1.45; }
.purchase-steps-n {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  transform: translateY(2px);
}
.purchase-tutorial-note {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-strong);
  font-size: 12px;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .card, .card-media img, .btn { transition: none; }
  .cart-backdrop, .cart-panel { animation: none; }
  .video-lightbox-backdrop, .video-lightbox-panel { animation: none; }
  .purchase-modal-backdrop, .purchase-modal-panel { animation: none; }
  .purchase-step-icon { animation: none; }
  .purchase-step-slide { transition: none; }
  .purchase-modal-panel.is-leaving { transition: none; opacity: 1; transform: translate(-50%, -50%); }
}

/* ajustes pedidos para os layouts mobile e para o terceiro tópico Lore Friendly */
.lore-pillar:last-child { border-bottom: 0; }

@media (max-width: 960px) {
  /* o card de servidor mantém o ícone à esquerda no painel mobile */
  .metrics-card {
    grid-template-columns: minmax(56px, auto) minmax(0, 1fr);
    grid-template-areas: "icon ." "body body" "join join";
  }
  .metrics-card .metrics-card-icon { justify-self: start; }

  /* cabeçalho e marca ficam alinhados na mesma linha do controle do menu */
  #site-header.is-open { width: min(58vw, 520px); }
  #site-header.is-open .header-inner {
    flex-wrap: wrap;
    gap: 0;
    padding-left: 14px;
    padding-right: 14px;
  }
  #site-header.is-open .brand { gap: 0; min-width: 0; }
  #site-header.is-open .brand .brand-text { font-size: 16px; white-space: nowrap; }
  #site-header.is-open .header-tools .social-links {
    width: 100%;
    justify-content: center;
  }
  #site-header.is-open .menu-toggle,
  #site-header.is-open .menu-toggle:hover {
    border-color: var(--line-strong);
    background: var(--surface-2);
    color: #fff;
  }
  #site-header.is-open .menu-toggle {
    width: 36px;
    height: 36px;
    gap: 5px;
    margin-left: auto;
    flex: 0 0 36px;
  }
  #site-header.is-open .menu-toggle span { width: 18px; }
  #site-header.is-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #site-header.is-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  #site-header.is-open:not(.is-closing) {
    transform: translateX(0);
    opacity: 1;
  }
  #site-header.is-closing {
    animation: none;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.21s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease-out;
    pointer-events: none;
  }
  #site-header.is-restoring {
    animation: headerRestore 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes headerRestore {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 961px) {
  .metrics-join { padding: 9px 13px; font-size: 12px; }
}

@media (max-width: 760px) {
  /* Etapas: um card por tela, com setas e gesto horizontal nativo. */
  .steps-section .steps-carousel-controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
    max-width: 1520px;
    margin: 0 auto 12px;
  }
  .steps-section .steps-carousel-track {
    display: flex !important;
    flex-flow: row nowrap;
    grid-template-columns: none;
    grid-auto-flow: unset;
    grid-auto-columns: unset;
    gap: 14px;
    width: 100%;
    margin: 0 auto;
    padding: 0 0 18px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  .steps-section .steps-carousel-track::-webkit-scrollbar { display: none; }
  .steps-section .steps-carousel-track::before { display: none; }
  .steps-section .steps-carousel-track > .step {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .steps-section .step p { max-width: none; }

  /* Gráficos de pizza centralizados no card; legenda continua em largura total. */
  .metrics-pie-wrap { justify-content: center; }
  .metrics-pie-visual { margin-left: auto; margin-right: auto; }
  .metrics-pie-info { flex-basis: 100%; }

  /* tópicos Lore Friendly sem recuo em escada no celular */
  .lore-pillar:nth-child(2),
  .lore-pillar:nth-child(3) { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #site-header.is-open { animation: none; }
  #site-header.is-closing { transition: none; }
  #site-header.is-restoring { animation: none; }
}

/* ------------------------------------------------ projetos exclusivos / clientes */
.clients-page-head { margin-bottom: 22px; }
.section.section-tight.clients-server-section { padding-top: 18px; padding-bottom: 42px; }
.clients-server-section > .container {
  max-width: 1560px;
  padding-left: 20px;
  padding-right: 20px;
}
.client-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.client-servers-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}
.client-servers-head h2 {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.client-servers-marker { width: 16px; height: 1px; background: var(--line-strong); }
.client-carousel-controls { margin: 0; }
.client-carousel-track { grid-auto-columns: minmax(250px, 260px); }

.client-exclusive-cue {
  --cut: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px auto 0;
  padding: 10px 14px 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.client-exclusive-cue:hover,
.client-exclusive-cue:focus-visible {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
}
.client-exclusive-cue svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: transform 0.2s var(--ease);
}
.client-exclusive-cue:hover svg,
.client-exclusive-cue:focus-visible svg { transform: translateY(3px); }
.exclusive-projects-section { scroll-margin-top: 96px; }

.exclusive-projects-section { padding-top: 64px; }
.exclusive-projects-section > .container { max-width: 1320px; }
.exclusive-projects-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: end;
  margin-bottom: 60px;
}
.exclusive-projects-head > p {
  max-width: 620px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}
.exclusive-projects-list { display: grid; gap: clamp(64px, 9vw, 132px); }
.exclusive-project {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(34px, 6vw, 92px);
  align-items: center;
}
.exclusive-project.is-reversed .exclusive-project-media { order: 2; }
.exclusive-project.is-reversed .exclusive-project-copy { order: 1; }
.exclusive-project-media { position: relative; min-width: 0; padding: 14px 0 0 14px; }
.exclusive-project-media::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 54px;
  height: 54px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  pointer-events: none;
}
.exclusive-project-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 7px 7px 7px 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
.exclusive-project-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.exclusive-project-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.exclusive-project-gallery-arrows {
  position: absolute;
  inset: 0 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.exclusive-project-gallery-arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #fff;
  background: rgba(12, 14, 14, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(8px);
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.exclusive-project-gallery-arrow:hover,
.exclusive-project-gallery-arrow:focus-visible {
  color: #fff;
  background: rgba(12, 14, 14, 0.96);
  border-color: rgba(255, 255, 255, 0.6);
}
.exclusive-project-gallery-arrow:first-child:hover { transform: translateX(-2px); }
.exclusive-project-gallery-arrow:last-child:hover { transform: translateX(2px); }
.exclusive-project-gallery-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; }
.exclusive-project-gallery-thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 2px 2px 6px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
  scroll-snap-type: x mandatory;
}
.exclusive-project-gallery-thumbnail {
  position: relative;
  flex: 0 0 clamp(82px, 11vw, 126px);
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  cursor: pointer;
  opacity: 0.68;
  scroll-snap-align: start;
  transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.exclusive-project-gallery-thumbnail:hover { opacity: 0.92; transform: translateY(-1px); }
.exclusive-project-gallery-thumbnail.is-active { border-color: var(--accent); opacity: 1; }
.exclusive-project-gallery-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.exclusive-project-copy { min-width: 0; }
.exclusive-project-copy h3 { margin: 0 0 18px; font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.65rem); font-style: italic; font-weight: 800; line-height: 1.08; text-transform: uppercase; }
.exclusive-project-description { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; white-space: pre-line; }
.exclusive-project-meta { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.exclusive-project-meta > span { display: grid; gap: 7px; }
.exclusive-project-meta small { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.exclusive-project-meta strong { color: var(--text); font-size: 13px; font-weight: 400; }
.exclusive-projects-empty { padding: 24px 0; }
.exclusive-project-drag-handle { display: grid; place-items: center; width: 30px; color: var(--muted); cursor: grab; touch-action: none; }
.exclusive-project-admin-row .badmin-row-actions { flex-shrink: 0; }
.exclusive-project-gallery-preview { min-height: 76px; }

@media (max-width: 960px) {
  .exclusive-projects-head { grid-template-columns: 1fr; gap: 20px; }
  .exclusive-projects-head > p { margin: 0; }
  .exclusive-project { gap: 32px; }
}

@media (max-width: 760px) {
  .section.section-tight.clients-server-section { padding-bottom: 30px; }
  .client-exclusive-cue { margin-top: 16px; }
  .exclusive-projects-section { padding-top: 42px; }
  .exclusive-projects-head { margin-bottom: 38px; }
  .exclusive-projects-list { gap: 60px; }
  .exclusive-project { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .exclusive-project.is-reversed .exclusive-project-media,
  .exclusive-project.is-reversed .exclusive-project-copy { order: initial; }
  .exclusive-project-copy h3 { font-size: clamp(1.55rem, 8vw, 2.1rem); }
  .exclusive-project-gallery-arrows { inset-inline: 10px; }
  .exclusive-project-gallery-arrow { width: 38px; height: 38px; }
  .exclusive-project-gallery-thumbnail { flex-basis: 92px; }
  .exclusive-project-meta { gap: 18px 28px; margin-top: 22px; }
  .exclusive-project-admin-row { grid-template-columns: 30px 72px minmax(0, 1fr); }
  .exclusive-project-drag-handle { grid-row: 1 / span 2; }
}

@media (max-width: 760px) {
  .client-carousel-track { grid-auto-columns: minmax(240px, 78vw); }
}

/* Atendimento: cartões alinhados ao acabamento de canto cortado do site. */
.sc-lang-tile,
.sc-option-card,
.sc-picker-card,
.sc-picker-card .sc-picker-item,
.sc-picker-chips .sc-picker-chip,
#ticket-map-confirm {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}

/* Barra de rolagem própria para a lista de mapas do atendimento. */
.sc-picker-list {
  scrollbar-width: thin;
  scrollbar-color: #777 transparent;
}
.sc-picker-list::-webkit-scrollbar { width: 7px; }
.sc-picker-list::-webkit-scrollbar-track { background: transparent; }
.sc-picker-list::-webkit-scrollbar-thumb { background: #777; border-radius: 0; }
.sc-picker-list::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }

/* Produtos com cobrança direta e revisão do checkout misto. */
.manual-cart-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
}
.cart-split-summary { display: grid; gap: 8px; }
.cart-split-summary .summary-line { display: flex; justify-content: space-between; gap: 12px; color: var(--text-2); font-size: 13px; }
.cart-split-summary .summary-line.total { border-top: 1px solid var(--line); padding-top: 10px; color: var(--text); font-size: 15px; }
.manual-checkout-section > .container { max-width: 980px; }
.manual-checkout-card,
.manual-order-total,
.manual-payment-item,
.manual-payment-notice {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 24px;
}
.manual-checkout-card { max-width: 760px; margin: 0 auto; }
.manual-checkout-card > p:first-child { color: var(--text-2); margin: 0 0 18px; }
.manual-checkout-line { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.manual-checkout-line strong { font-size: 18px; color: var(--text); }
.manual-checkout-discount { color: var(--accent); font-size: 13px; margin: 10px 0; }
.manual-checkout-items { list-style: none; display: grid; gap: 8px; padding: 14px 0; margin: 0; }
.manual-checkout-items li { display: flex; justify-content: space-between; gap: 14px; color: var(--text-2); font-size: 13px; }
.manual-review-item-prices { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.manual-review-item-prices s { color: var(--muted); }
.manual-review-item-prices strong { color: var(--text); font-size: 14px; }
.manual-checkout-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.manual-order-total { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; align-items: center; margin-bottom: 18px; }
.manual-order-total strong { color: var(--accent); font-size: clamp(24px, 4vw, 36px); }
.manual-order-total small { grid-column: 1 / -1; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.manual-payment-list { display: grid; gap: 16px; }
.manual-payment-item { display: grid; grid-template-columns: minmax(180px, 34%) minmax(0, 1fr); gap: 24px; align-items: start; }
.manual-payment-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); }
.manual-payment-item-info { min-width: 0; }
.manual-payment-item-info h2 { margin: 0 0 8px; font-size: 21px; }
.manual-payment-item-info small { display: block; margin-top: 9px; color: var(--muted); }
.manual-payment-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 18px; }
.manual-pay-method { min-width: 0; padding: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.manual-pay-method h3 { margin: 0 0 12px; font-size: 14px; }
.manual-pix-qr { display: block; width: min(100%, 280px); height: auto; margin: 0 auto; background: #fff; }
.manual-payment-notice { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.manual-payment-notice p { margin: 0; max-width: 680px; color: var(--text-2); line-height: 1.65; }
.manual-payment-disclaimer { color: var(--muted); font-size: 12px; margin-top: 12px; }
.manual-product-form-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.manual-product-admin-row img { object-fit: cover; }
.manual-product-form .badmin-side { align-self: start; }

/* Checkout complementar dos produtos manuais: usa o mesmo painel claro e compacto
   do checkout Tebex, sobre a página atual, com o conteúdo do site desfocado. */
.manual-checkout-host { position: fixed; inset: 0; z-index: 700; pointer-events: none; }
.manual-checkout-host:empty { display: none; }
.manual-checkout-host.is-open { pointer-events: auto; }
body.manual-checkout-open { overflow: hidden; }
.manual-gateway-backdrop {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .76);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: manualGatewayFade .18s ease-out both;
}
.manual-gateway-dialog {
  width: min(100%, 860px);
  height: min(760px, calc(100dvh - 48px));
  min-height: 470px;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  color: #202124;
  box-shadow: 0 24px 90px rgba(0, 0, 0, .42);
  animation: manualGatewayRise .22s cubic-bezier(.2, .75, .25, 1) both;
}
.manual-gateway {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(250px, 31%) minmax(0, 1fr);
  background: #fff;
  font-family: Inter, Arial, sans-serif;
}
.manual-gateway-sidebar {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 20px;
  overflow: auto;
  background: #f7f7f7;
  border-right: 1px solid #e9e9e9;
}
.manual-gateway-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; color: #303238; font-size: 14px; }
.manual-gateway-mark { width: 28px; height: 28px; display: grid; place-items: center; background: #41c4c3; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: -.04em; }
.manual-gateway-products { display: grid; gap: 15px; }
.manual-gateway-product { min-width: 0; display: flex; align-items: center; gap: 12px; }
.manual-gateway-product > img { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; object-fit: cover; background: #e8e8e8; }
.manual-gateway-product-info { min-width: 0; display: grid; gap: 4px; }
.manual-gateway-product-info > strong { overflow: hidden; color: #202124; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.manual-gateway-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; color: #555; font-size: 12px; }
.manual-gateway-price s { color: #e34b54; }
.manual-gateway-price b { color: #41434a; font-weight: 500; }
.manual-gateway-product-info small { color: #737780; font-size: 10px; }
.manual-gateway-sidebar-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px; color: #565a62; font-size: 12px; }
.manual-gateway-sidebar-total strong { color: #22252a; font-size: 13px; font-weight: 600; white-space: nowrap; }
.manual-gateway-total-values { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 7px; white-space: nowrap; }
.manual-gateway-total-values s { color: #96999f; font-size: .92em; font-weight: 400; }
.manual-gateway-total-values b { color: #22252a; font-size: 1em; font-weight: 600; }
.manual-gateway-sidebar-total-direct { margin-top: 9px; padding-top: 12px; border-top: 1px solid #d9d9d9; }
.manual-gateway-reference { margin-top: 9px; color: #858990; font-size: 10px; }
.manual-gateway-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.manual-gateway-top { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 28px; border-bottom: 1px solid #f1f1f1; }
.manual-gateway-steps { display: flex; align-items: center; gap: 9px; color: #90939a; font-size: 13px; }
.manual-gateway-steps i { color: #b0b3b7; font-size: 18px; font-style: normal; }
.manual-gateway-steps b { color: #41c4c3; font-weight: 500; }
.manual-gateway-close { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; color: #74777e; font-size: 24px; line-height: 1; cursor: pointer; }
.manual-gateway-close:hover { background: #f0f1f2; color: #25272b; }
.manual-gateway-header-actions { display: flex; align-items: center; gap: 10px; }
.manual-change-payment { padding: 6px 9px; border: 0; background: transparent; color: #545963; font: 500 12px Inter, Arial, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.manual-change-payment:hover { color: #252a31; }
.manual-gateway-content { min-height: 0; overflow: auto; padding: 34px 28px 30px; }
.manual-gateway-content h1 { margin: 0 0 17px; color: #16181b; font-size: clamp(23px, 3vw, 30px); font-weight: 600; letter-spacing: -.035em; }
.manual-gateway-explain { max-width: 620px; margin: 0 0 26px; color: #686c73; font-size: 14px; line-height: 1.65; }
.manual-gateway-grand-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 23px; padding: 15px 0; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; color: #51545b; font-size: 14px; }
.manual-gateway-grand-total strong { color: #16181b; font-size: 20px; font-weight: 600; white-space: nowrap; }
.manual-gateway-payment-summary { margin: 16px 0 18px; border: 0; background: transparent; }
.manual-gateway-order-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; padding: 13px 0; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; color: #51545b; font-size: 14px; }
.manual-gateway-order-total .manual-gateway-total-values { font-size: 19px; }
.manual-gateway-after-tebex { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 11px 0; border-bottom: 1px solid #e5e5e5; color: #51545b; font-size: 14px; }
.manual-gateway-after-tebex strong { color: #16181b; font-size: 16px; font-weight: 600; white-space: nowrap; }
.manual-gateway-payment-summary .manual-gateway-grand-total { margin: 0; padding: 13px 0; border: 0; }
.manual-gateway-breakdown { display: grid; gap: 10px; margin-top: 20px; }
.manual-gateway-breakdown > div { display: flex; justify-content: space-between; gap: 14px; color: #656971; font-size: 13px; }
.manual-gateway-breakdown strong { color: #303238; font-weight: 600; white-space: nowrap; }
.manual-gateway-breakdown-card { gap: 0; margin: 18px 0 0; padding: 4px 16px; border: 1px solid #dedede; background: #fafafa; }
.manual-gateway-breakdown-card .manual-breakdown-row { align-items: center; min-height: 48px; padding: 10px 0; border-bottom: 1px solid #e6e6e6; }
.manual-gateway-breakdown-card .manual-breakdown-row:last-child { border-bottom: 0; }
.manual-gateway-breakdown-card .manual-breakdown-row > span { color: #62666e; }
.manual-gateway-breakdown-card .manual-breakdown-row > strong { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; text-align: right; }
.manual-gateway-breakdown-card .manual-breakdown-row s { color: #92959b; font-weight: 400; }
.manual-gateway-breakdown-card .manual-breakdown-row b { color: #202124; font-weight: 600; }
.manual-gateway-breakdown-card .manual-breakdown-product { align-items: flex-start; }
.manual-gateway-continue,
.manual-gateway-discord { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border: 0; background: #41c4c3; color: #102829; font: 600 15px Inter, Arial, sans-serif; text-decoration: none; cursor: pointer; transition: background-color .15s ease, transform .15s ease; }
.manual-gateway-continue:hover,
.manual-gateway-discord:hover { background: #55d0cf; transform: translateY(-1px); }
.manual-gateway-payment-content { padding-top: 28px; }
.manual-gateway-payment-content .manual-gateway-explain { margin-bottom: 20px; }
.manual-payment-list { display: grid; gap: 14px; }
.manual-payment-item { display: block; min-width: 0; padding: 16px; border: 1px solid #dedede; background: #fff; }
.manual-payment-product-heading { display: flex; align-items: center; gap: 13px; }
.manual-payment-product-heading > div { min-width: 0; display: grid; gap: 7px; }
.manual-payment-product-heading h2 { margin: 0; color: #202124; font-size: 14px; font-weight: 500; }
.manual-payment-image { width: 48px; height: 48px; flex: 0 0 48px; aspect-ratio: 1; border: 0; border-radius: 50%; object-fit: cover; }
.manual-payment-methods { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
.manual-pay-method { min-width: 0; padding: 13px; border: 1px solid #e2e2e2; background: #fafafa; }
.manual-pay-method h3 { margin: 0 0 10px; color: #32353a; font-size: 12px; font-weight: 600; }
.manual-pay-method .btn { min-height: 40px; width: 100%; background: #41c4c3; color: #102829; }
.manual-pix-qr { display: block; width: min(100%, 220px); aspect-ratio: 1; height: auto; margin: 0 auto 16px; background: #fff; object-fit: contain; }
.manual-payment-details { display: grid; gap: 8px; max-width: 430px; margin: 0 auto; }
.manual-payment-details > div { display: flex; justify-content: space-between; gap: 16px; padding-top: 8px; border-top: 1px solid #e8e8e8; font-size: 12px; }
.manual-payment-details dt { color: #777b82; }
.manual-payment-details dd { margin: 0; color: #24262a; font-weight: 600; text-align: right; }
.manual-card-payment p { color: #646870; font-size: 13px; }
.manual-card-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 18px; padding: 0; border: 1px solid #e1e5e7; background: #fbfcfc; list-style: none; }
.manual-card-steps li { position: relative; min-width: 0; display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; }
.manual-card-steps li + li { border-left: 1px solid #e1e5e7; }
.manual-card-steps li > span { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border: 1px solid #9bd9d8; background: #effafa; color: #168f91; font-size: 12px; font-weight: 700; }
.manual-card-steps li > div { min-width: 0; }
.manual-card-steps strong { display: block; margin: 1px 0 5px; color: #292d32; font-size: 12px; font-weight: 600; }
.manual-card-steps p { margin: 0; color: #6c7179; font-size: 11px; line-height: 1.5; }
.manual-card-steps i { align-self: center; margin-left: auto; color: #a2a7ad; font-size: 20px; font-style: normal; }
.manual-card-gateway-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.manual-card-gateway-mark { width: 42px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 0; background: transparent; color: #111; }
.manual-card-gateway-mark svg { width: 31px; height: 19px; display: block; }
.manual-card-gateway-heading small { display: block; margin-bottom: 3px; color: #858a91; font-size: 10px; }
.manual-card-gateway-heading h3 { margin: 0; color: #202429; font-size: 16px; font-weight: 600; }
.manual-card-payment-details { display: grid; gap: 0; margin-bottom: 16px; border-top: 1px solid #e6e8e9; }
.manual-card-payment-details > div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid #e6e8e9; font-size: 12px; }
.manual-card-payment-details span { color: #727780; }
.manual-card-payment-details strong { color: #25292e; font-weight: 600; text-align: right; }
.manual-payment-amount { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 6px; }
.manual-payment-amount s { color: #96999f; font-size: .92em; font-weight: 400; }
.manual-payment-amount b { color: #202124; font-weight: 600; }
.manual-payment-details dd.manual-payment-amount { margin: 0; color: #202124; font-weight: 600; text-align: right; }
.manual-card-payment .btn { min-height: 46px; }
.manual-gateway-payment.manual-card-mode .manual-gateway-content { padding: 16px 24px 14px; }
.manual-gateway-payment.manual-card-mode .manual-gateway-content h1 { margin-bottom: 9px; font-size: 24px; }
.manual-gateway-payment.manual-card-mode .manual-card-steps { margin-bottom: 10px; }
.manual-gateway-payment.manual-card-mode .manual-card-steps li { gap: 8px; padding: 9px 11px; }
.manual-gateway-payment.manual-card-mode .manual-card-steps li > span { width: 22px; height: 22px; flex-basis: 22px; font-size: 11px; }
.manual-gateway-payment.manual-card-mode .manual-card-steps strong { margin-bottom: 3px; font-size: 11px; }
.manual-gateway-payment.manual-card-mode .manual-card-steps p { font-size: 10px; line-height: 1.35; }
.manual-gateway-payment.manual-pix-mode .manual-pix-steps { margin-bottom: 10px; }
.manual-gateway-payment.manual-pix-mode .manual-pix-steps li { gap: 8px; padding: 9px 11px; }
.manual-gateway-payment.manual-pix-mode .manual-pix-steps li > span { width: 22px; height: 22px; flex-basis: 22px; font-size: 11px; }
.manual-gateway-payment.manual-pix-mode .manual-pix-steps strong { margin-bottom: 3px; font-size: 11px; }
.manual-gateway-payment.manual-pix-mode .manual-pix-steps p { font-size: 10px; line-height: 1.35; }
.manual-gateway-payment.manual-card-mode .manual-payment-list { gap: 8px; }
.manual-gateway-payment.manual-card-mode .manual-payment-item { padding: 10px 12px; }
.manual-gateway-payment.manual-card-mode .manual-payment-product-heading { gap: 9px; }
.manual-gateway-payment.manual-card-mode .manual-payment-image { width: 40px; height: 40px; flex-basis: 40px; }
.manual-gateway-payment.manual-card-mode .manual-payment-methods { margin-top: 8px; }
.manual-gateway-payment.manual-card-mode .manual-card-payment { padding: 9px 12px; }
.manual-gateway-payment.manual-card-mode .manual-card-gateway-heading { gap: 8px; margin-bottom: 8px; }
.manual-gateway-payment.manual-card-mode .manual-card-gateway-mark { width: 30px; height: 30px; font-size: 10px; }
.manual-gateway-payment.manual-card-mode .manual-card-gateway-heading h3 { font-size: 14px; }
.manual-gateway-payment.manual-card-mode .manual-card-payment-details { margin-bottom: 8px; }
.manual-gateway-payment.manual-card-mode .manual-card-payment-details > div { padding: 6px 0; font-size: 11px; }
.manual-gateway-payment.manual-card-mode .manual-card-payment .btn { min-height: 38px; }
.manual-gateway-payment.manual-card-mode .manual-card-payment .btn { min-height: 42px; border: 1px solid #35b9b8; border-radius: 7px; background: #41c4c3; box-shadow: 0 3px 8px rgba(38, 163, 163, .15); color: #fff; font-weight: 600; transition: background .16s ease, box-shadow .16s ease, transform .16s ease; }
.manual-gateway-payment.manual-card-mode .manual-card-payment .btn:hover,
.manual-gateway-payment.manual-card-mode .manual-card-payment .btn:focus-visible { background: #34b7b6; box-shadow: 0 5px 12px rgba(38, 163, 163, .22); color: #fff; transform: translateY(-1px); }
.manual-gateway-payment.manual-card-mode .manual-card-redeem { min-height: 74px; display: flex; flex-direction: row; align-items: center; gap: 11px; margin: 9px 0 0; padding: 13px 16px; text-align: left; }
.manual-gateway-payment.manual-card-mode .manual-card-redeem strong { font-size: 13px; }
.manual-gateway-payment.manual-card-mode .manual-card-redeem small { color: rgba(255, 255, 255, .86); font-size: 10px; font-weight: 400; line-height: 1.35; }
.manual-gateway-payment .manual-gateway-discord { min-height: 74px; display: flex; align-items: center; justify-content: flex-start; gap: 11px; border-radius: 8px; background: #5865f2; color: #fff; }
.manual-gateway-payment .manual-gateway-discord:hover,
.manual-gateway-payment .manual-gateway-discord:focus-visible { background: #4752c4; color: #fff; }
.manual-discord-redeem-icon { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; }
.manual-discord-redeem-icon svg { display: block; width: 24px; height: 24px; }
.manual-discord-redeem-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.manual-discord-redeem-copy strong { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.25; }
.manual-discord-redeem-copy small { color: rgba(255, 255, 255, .86); font-size: 10px; font-weight: 400; line-height: 1.35; }
.manual-method-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 580px; margin-top: 28px; }
.manual-method-choice { min-height: 160px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; border: 1px solid #dedede; border-radius: 8px; background: #fff; color: #202124; text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.manual-method-choice:hover { transform: translateY(-2px); border-color: #41c4c3; background: #f8ffff; }
.manual-method-choice-icon { width: 36px; height: 36px; display: grid; place-items: center; background: #e6f8f8; color: #41c4c3; font-size: 20px; }
.manual-method-choice strong { font-size: 16px; font-weight: 600; }
.manual-method-choice small { color: #737780; font-size: 12px; line-height: 1.5; }
.manual-gateway-discord { margin-top: 18px; }
.manual-gateway-discord:hover,
.manual-gateway-discord:focus-visible { color: #102829; }
.manual-method-choice-icon.manual-pix-logo { background: transparent; color: #000; }
.manual-method-choice-icon.manual-infinity-pay-logo { background: transparent; color: #111; }
.manual-method-choice-icon.manual-infinity-pay-logo svg { width: 40px; height: 24px; display: block; }
.manual-gateway-loading,
.manual-gateway-error { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 38px; text-align: center; }
.manual-gateway-loading strong,
.manual-gateway-error strong { color: #24262a; font-size: 15px; font-weight: 500; }
.manual-gateway-loading-track { width: min(240px, 72%); height: 3px; overflow: hidden; background: #e7eeee; }
.manual-gateway-loading-track i { display: block; width: 40%; height: 100%; background: #41c4c3; animation: manualGatewayLoading 1.1s ease-in-out infinite; }
.manual-gateway-error p { color: #696d74; font-size: 13px; }
.manual-gateway-error-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #e5b7b7; border-radius: 50%; color: #b14949; font-weight: 700; }
@keyframes manualGatewayFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes manualGatewayRise { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes manualGatewayLoading { from { transform: translateX(-120%); } to { transform: translateX(260%); } }

/* Fluxo manual: seleção e pagamento Pix centralizados e compactos para caber no gateway. */
.manual-gateway-loading-backdrop { padding: 0; background: rgba(0, 0, 0, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.manual-opening-spinner { width: 26px; height: 26px; display: block; border: 3px solid rgba(255, 255, 255, .18); border-top-color: #fff; border-right-color: #fff; border-radius: 50%; animation: manualOpeningSpin .72s linear infinite; }
@keyframes manualOpeningSpin { to { transform: rotate(360deg); } }
.manual-gateway-brand { gap: 0; }
.manual-method-choices { justify-items: center; }
.manual-method-choice { width: 100%; align-items: center; justify-content: center; text-align: center; }
.manual-method-choice-icon { width: 44px; height: 44px; }
.manual-pix-logo svg,
.manual-pix-title-logo svg { width: 24px; height: 24px; display: block; }
.manual-pix-title-logo { display: inline-grid; place-items: center; color: #41c4c3; vertical-align: middle; }
.manual-gateway-steps b { color: #41c4c3; }
.manual-method-choice-icon { color: #41c4c3; }
.manual-method-choice:hover { border-color: #41c4c3; }
.manual-gateway-payment.manual-pix-mode .manual-gateway-sidebar { padding-top: 18px; padding-bottom: 14px; }
.manual-gateway-payment.manual-pix-mode .manual-gateway-content { padding: 18px 24px 16px; }
.manual-gateway-payment.manual-pix-mode .manual-gateway-content h1 { margin-bottom: 8px; font-size: 23px; }
.manual-gateway-payment.manual-pix-mode .manual-gateway-explain { margin-bottom: 10px; font-size: 12px; line-height: 1.45; }
.manual-gateway-payment.manual-pix-mode .manual-payment-list { gap: 8px; }
.manual-gateway-payment.manual-pix-mode .manual-payment-item { padding: 18px 20px; }
.manual-gateway-payment.manual-pix-mode .manual-payment-product-heading { gap: 12px; }
.manual-gateway-payment.manual-pix-mode .manual-payment-image { width: 50px; height: 50px; flex-basis: 50px; }
.manual-gateway-payment.manual-pix-mode .manual-payment-product-heading > div { gap: 3px; }
.manual-gateway-payment.manual-pix-mode .manual-payment-methods { margin-top: 8px; }
.manual-pix-payment { display: grid; justify-items: center; padding: 15px 18px 16px; text-align: center; }
.manual-pix-payment h3 { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 9px; font-size: 14px; }
.manual-pix-qr { width: min(100%, 170px); margin: 0 auto 9px; }
.manual-payment-details { width: min(100%, 430px); gap: 4px; }
.manual-payment-details > div { padding-top: 6px; font-size: 12px; }
.manual-pix-copy { width: min(100%, 430px); display: grid; justify-items: stretch; gap: 7px; margin: 12px auto 10px; text-align: left; }
.manual-pix-copy > span { color: #656a72; font-size: 11px; font-weight: 600; }
.manual-pix-copy code { display: block; max-height: 62px; overflow: auto; padding: 9px 10px; border: 1px solid #e1e4e6; background: #fff; color: #34383e; font: 10px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; user-select: all; }
.manual-pix-copy-button { width: 100%; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid #d8dddd; background: #fff; color: #33383f; font: 600 12px Inter, Arial, sans-serif; cursor: pointer; }
.manual-pix-copy-button:hover { border-color: #41c4c3; background: #f4fbfb; }
.manual-pix-copy-button:disabled { opacity: .62; cursor: not-allowed; }
.manual-pix-copy-button svg { width: 15px; height: 15px; }
.manual-gateway-payment.manual-pix-mode .manual-gateway-discord { width: 100%; max-width: 100%; min-height: 74px; margin: 12px 0 4px; padding: 13px 18px; box-sizing: border-box; color: #fff; font-size: 15px; }
.manual-gateway-payment.manual-pix-mode .manual-gateway-discord:hover,
.manual-gateway-payment.manual-pix-mode .manual-gateway-discord:focus-visible { color: #fff; background: #4752c4; }
.manual-gateway-payment.manual-pix-single-item .manual-gateway-content { overflow: hidden; padding-top: 14px; padding-bottom: 12px; }
.manual-gateway-payment.manual-pix-single-item .manual-gateway-content h1 { margin-bottom: 6px; }
.manual-gateway-payment.manual-pix-single-item .manual-pix-steps { margin-bottom: 7px; }
.manual-gateway-payment.manual-pix-single-item .manual-payment-list { gap: 6px; }
.manual-gateway-payment.manual-pix-single-item .manual-payment-item { padding: 10px 12px; }
.manual-gateway-payment.manual-pix-single-item .manual-payment-methods { margin-top: 6px; }
.manual-gateway-payment.manual-pix-single-item .manual-pix-payment { padding: 8px 12px; }
.manual-gateway-payment.manual-pix-single-item .manual-pix-payment h3 { margin-bottom: 5px; }
.manual-gateway-payment.manual-pix-single-item .manual-pix-qr { width: min(100%, 128px); margin-bottom: 4px; }
.manual-gateway-payment.manual-pix-single-item .manual-payment-details > div { padding-top: 4px; font-size: 11px; }
.manual-gateway-payment.manual-pix-single-item .manual-pix-copy { gap: 5px; margin: 10px auto 2px; }
.manual-gateway-payment.manual-pix-single-item .manual-pix-copy code { max-height: 42px; padding: 6px 8px; }
.manual-gateway-payment.manual-pix-single-item .manual-pix-copy-button { min-height: 34px; }
.manual-gateway-payment.manual-pix-single-item .manual-gateway-discord { min-height: 64px; margin-top: 7px; padding: 9px 14px; }

/* O conteúdo do checkout rola só quando necessário; a barra acompanha o
   visual discreto do gateway e permanece disponível inclusive no item único. */
.manual-gateway-payment .manual-gateway-content {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #b8c0c4 transparent;
}
.manual-gateway-payment .manual-gateway-content::-webkit-scrollbar { width: 6px; }
.manual-gateway-payment .manual-gateway-content::-webkit-scrollbar-track { background: transparent; }
.manual-gateway-payment .manual-gateway-content::-webkit-scrollbar-thumb { border: 1px solid transparent; border-radius: 6px; background: #b8c0c4; background-clip: padding-box; }
.manual-gateway-payment .manual-gateway-content::-webkit-scrollbar-thumb:hover { background-color: #41c4c3; }
.manual-gateway-payment.manual-pix-single-item .manual-gateway-content { overflow-y: auto; }

@media (max-width: 700px) {
  .manual-checkout-card,
  .manual-order-total,
  .manual-payment-item,
  .manual-payment-notice { padding: 16px; }
  .manual-payment-item { grid-template-columns: 1fr; gap: 16px; }
  .manual-payment-image { aspect-ratio: 16 / 8; }
  .manual-payment-notice { align-items: stretch; flex-direction: column; }
  .manual-checkout-actions { flex-direction: column; }
  .manual-gateway-backdrop { padding: 10px; }
  .manual-gateway-dialog { width: 100%; height: calc(100dvh - 20px); min-height: 0; border-radius: 10px; }
  .manual-gateway { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .manual-gateway-sidebar { max-height: 31vh; padding: 14px 16px; border-right: 0; border-bottom: 1px solid #e9e9e9; }
  .manual-gateway-brand { margin-bottom: 12px; }
  .manual-gateway-products { gap: 9px; }
  .manual-gateway-product > img { width: 38px; height: 38px; flex-basis: 38px; }
  .manual-gateway-sidebar-total { padding-top: 12px; }
  .manual-gateway-top { min-height: 52px; padding: 0 16px; }
  .manual-gateway-content { padding: 23px 17px; }
  .manual-gateway-content h1 { margin-bottom: 12px; }
  .manual-gateway-explain { margin-bottom: 16px; font-size: 13px; }
  .manual-gateway-grand-total { margin: 14px 0 18px; }
  .manual-gateway-order-total { padding: 11px 0; }
  .manual-gateway-after-tebex { padding: 10px 0; }
  .manual-gateway-payment-summary .manual-gateway-grand-total { padding: 11px 0; }
  .manual-gateway-order-total .manual-gateway-total-values { font-size: 16px; }
  .manual-gateway-payment-content { padding-top: 19px; }
  .manual-payment-item { padding: 12px; }
  .manual-gateway-payment.manual-card-mode .manual-gateway-sidebar { max-height: 18vh; padding: 8px 12px; }
  .manual-gateway-payment.manual-card-mode .manual-gateway-brand { margin-bottom: 7px; }
  .manual-gateway-payment.manual-card-mode .manual-gateway-products { gap: 5px; }
  .manual-gateway-payment.manual-card-mode .manual-gateway-product > img { width: 30px; height: 30px; flex-basis: 30px; }
  .manual-gateway-payment.manual-card-mode .manual-gateway-product-info { gap: 1px; }
  .manual-gateway-payment.manual-card-mode .manual-gateway-product-info > strong { font-size: 11px; }
  .manual-gateway-payment.manual-card-mode .manual-gateway-price { font-size: 10px; }
  .manual-gateway-payment.manual-card-mode .manual-gateway-sidebar-total { padding-top: 5px; font-size: 10px; }
  .manual-gateway-payment.manual-card-mode .manual-gateway-top { min-height: 42px; padding: 0 14px; }
  .manual-gateway-header-actions { gap: 4px; }
  .manual-change-payment { padding: 5px 4px; font-size: 10px; }
  .manual-gateway-payment.manual-card-mode .manual-gateway-content { padding: 8px 12px 10px; }
  .manual-gateway-payment.manual-card-mode .manual-gateway-content h1 { margin-bottom: 7px; font-size: 19px; }
  .manual-card-steps { grid-template-columns: 1fr; margin-bottom: 14px; }
  .manual-gateway-payment.manual-card-mode .manual-card-steps { margin-bottom: 8px; }
  .manual-gateway-payment.manual-card-mode .manual-card-steps li { gap: 7px; padding: 6px 9px; }
  .manual-gateway-payment.manual-card-mode .manual-card-steps strong { margin-bottom: 2px; font-size: 10px; }
  .manual-gateway-payment.manual-card-mode .manual-card-steps p { font-size: 9px; line-height: 1.25; }
  .manual-gateway-payment.manual-pix-mode .manual-pix-steps { margin-bottom: 8px; }
  .manual-gateway-payment.manual-pix-mode .manual-pix-steps li { gap: 7px; padding: 6px 9px; }
  .manual-gateway-payment.manual-pix-mode .manual-pix-steps strong { margin-bottom: 2px; font-size: 10px; }
  .manual-gateway-payment.manual-pix-mode .manual-pix-steps p { font-size: 9px; line-height: 1.25; }
  .manual-card-steps li + li { border-top: 1px solid #e1e5e7; border-left: 0; }
  .manual-card-steps li > span { width: 23px; height: 23px; flex-basis: 23px; }
  .manual-card-steps i { transform: rotate(90deg); }
  .manual-card-gateway-heading { margin-bottom: 12px; }
  .manual-gateway-payment.manual-card-mode .manual-payment-item { padding: 8px 10px; }
  .manual-gateway-payment.manual-card-mode .manual-payment-product-heading h2 { font-size: 12px; }
  .manual-gateway-payment.manual-card-mode .manual-card-payment { padding: 7px 9px; }
  .manual-gateway-payment.manual-card-mode .manual-card-gateway-heading { margin-bottom: 5px; }
  .manual-gateway-payment.manual-card-mode .manual-card-payment-details { margin-bottom: 6px; }
  .manual-gateway-payment.manual-card-mode .manual-card-payment-details > div { padding: 5px 0; font-size: 10px; }
  .manual-gateway-payment.manual-card-mode .manual-card-payment .btn { min-height: 34px; }
  .manual-gateway-payment.manual-card-mode .manual-card-payment .btn { min-height: 36px; }
  .manual-gateway-payment.manual-card-mode .manual-card-redeem { min-height: 68px; margin-top: 7px; padding: 10px 12px; }
  .manual-gateway-payment.manual-card-mode .manual-card-redeem strong { font-size: 13px; }
  .manual-gateway-payment.manual-card-mode .manual-card-redeem small { font-size: 10px; }
  .manual-card-payment-details > div { padding: 9px 0; }
  .manual-method-choices { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  .manual-method-choice { min-height: 118px; padding: 16px; }
  .manual-gateway-payment.manual-pix-mode { grid-template-rows: minmax(0, 16vh) minmax(0, 1fr); }
  .manual-gateway-payment.manual-pix-mode .manual-gateway-sidebar { max-height: 16vh; padding: 7px 14px; }
  .manual-gateway-payment.manual-pix-mode .manual-gateway-brand { margin-bottom: 7px; }
  .manual-gateway-payment.manual-pix-mode .manual-gateway-products { gap: 5px; }
  .manual-gateway-payment.manual-pix-mode .manual-gateway-product > img { width: 30px; height: 30px; flex-basis: 30px; }
  .manual-gateway-payment.manual-pix-mode .manual-gateway-product-info { gap: 1px; }
  .manual-gateway-payment.manual-pix-mode .manual-gateway-product-info > strong { font-size: 11px; }
  .manual-gateway-payment.manual-pix-mode .manual-gateway-price { font-size: 10px; }
  .manual-gateway-payment.manual-pix-mode .manual-gateway-sidebar-total { padding-top: 5px; font-size: 10px; }
  .manual-gateway-payment.manual-pix-mode .manual-gateway-top { min-height: 42px; }
  .manual-gateway-payment.manual-pix-mode .manual-gateway-content { overflow: auto; padding: 8px 10px; }
  .manual-gateway-payment.manual-pix-mode .manual-gateway-content h1 { margin-bottom: 5px; font-size: 18px; }
  .manual-gateway-payment.manual-pix-mode .manual-gateway-explain { margin-bottom: 6px; font-size: 11px; }
  .manual-gateway-payment.manual-pix-mode .manual-payment-item { padding: 9px; }
  .manual-gateway-payment.manual-pix-mode .manual-payment-product-heading h2 { font-size: 12px; }
  .manual-gateway-payment.manual-pix-mode .manual-payment-image { width: 42px; height: 42px; flex-basis: 42px; }
  .manual-gateway-payment.manual-pix-mode .manual-pix-payment { padding: 9px 10px; }
  .manual-gateway-payment.manual-pix-mode .manual-pix-payment h3 { margin-bottom: 5px; font-size: 12px; }
  .manual-gateway-payment.manual-pix-mode .manual-pix-title-logo svg { width: 18px; height: 18px; }
  .manual-gateway-payment.manual-pix-mode .manual-pix-qr { width: min(100%, 112px); margin-bottom: 4px; }
  .manual-gateway-payment.manual-pix-mode .manual-payment-details > div { padding-top: 3px; font-size: 10px; }
  .manual-gateway-payment.manual-pix-mode .manual-gateway-discord { width: 100%; min-height: 60px; margin-top: 7px; padding: 8px 12px; font-size: 13px; }
  .manual-gateway-payment.manual-pix-single-item .manual-gateway-content { overflow: hidden; padding: 6px 9px; }
  .manual-gateway-payment.manual-pix-single-item .manual-payment-item { padding: 7px 8px; }
  .manual-gateway-payment.manual-pix-single-item .manual-payment-product-heading { gap: 8px; }
  .manual-gateway-payment.manual-pix-single-item .manual-payment-image { width: 34px; height: 34px; flex-basis: 34px; }
  .manual-gateway-payment.manual-pix-single-item .manual-pix-payment { padding: 6px 8px; }
  .manual-gateway-payment.manual-pix-single-item .manual-pix-qr { width: min(100%, 96px); }
  .manual-gateway-payment.manual-pix-single-item .manual-pix-payment { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); align-items: center; column-gap: 9px; }
  .manual-gateway-payment.manual-pix-single-item .manual-pix-payment h3,
  .manual-gateway-payment.manual-pix-single-item .manual-pix-copy { grid-column: 1 / -1; }
  .manual-gateway-payment.manual-pix-single-item .manual-pix-qr { grid-column: 1; grid-row: 2; margin: 0 auto; }
  .manual-gateway-payment.manual-pix-single-item .manual-payment-details { grid-column: 2; grid-row: 2; align-self: center; }
  .manual-gateway-payment.manual-pix-single-item .manual-pix-copy { margin-top: 8px; }
  .manual-gateway-payment.manual-pix-single-item .manual-pix-copy code { max-height: 30px; padding: 4px 6px; font-size: 9px; }
  .manual-gateway-payment.manual-pix-single-item .manual-pix-copy-button { min-height: 30px; }
  .manual-gateway-payment.manual-pix-single-item .manual-gateway-discord { min-height: 56px; margin-top: 5px; padding: 7px 10px; font-size: 12px; }
}
.cart-row.cart-row-manual-adjusted {
  background: linear-gradient(118deg, rgba(3, 242, 9, 0.105), var(--surface) 58%, rgba(3, 242, 9, 0.035));
  border-color: rgba(3, 242, 9, 0.24);
}
.cart-row-price.cart-row-price-manual-highlight {
  color: #ff414f;
}
.manual-payment-confirmation {
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 1px solid rgba(65, 196, 195, .3);
  border-left: 3px solid #41c4c3;
  background: rgba(65, 196, 195, .08);
  color: #252a2e;
  font-size: 13px;
  line-height: 1.5;
}
.manual-gateway-payment-content .manual-payment-confirmation { margin-bottom: 10px; }
.manual-payment-confirmation { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; }
.manual-payment-confirmation p { margin: 0; }
.manual-payment-confirmation-price { display: inline-flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.manual-payment-confirmation-price s { color: #858a91; font-size: 12px; }
.manual-payment-confirmation-price strong { color: #202124; font-size: 15px; font-weight: 700; }
.manual-gateway-product-info small.manual-gateway-paid-status { display: inline-flex; align-items: center; gap: 4px; color: #16833d; font-size: 10px; font-weight: 650; }
.manual-gateway-paid-status span { font-size: 12px; font-weight: 800; }

/* Mantém a barra de rolagem disponível se o QR, o código Pix e o resgate
   ocuparem mais altura que a área visível do gateway. */
.manual-gateway-payment .manual-gateway-content { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #b8c0c4 transparent; overscroll-behavior: contain; }
.manual-gateway-payment .manual-gateway-content::-webkit-scrollbar { width: 6px; }
.manual-gateway-payment .manual-gateway-content::-webkit-scrollbar-track { background: transparent; }
.manual-gateway-payment .manual-gateway-content::-webkit-scrollbar-thumb { border: 1px solid transparent; border-radius: 6px; background: #b8c0c4; background-clip: padding-box; }
.manual-gateway-payment .manual-gateway-content::-webkit-scrollbar-thumb:hover { background-color: #41c4c3; }
.manual-gateway-payment.manual-pix-single-item .manual-gateway-content { overflow-x: hidden; overflow-y: auto; }

/* Confirmação explícita do segundo checkout e retorno do checkout hospedado. */
.purchase-step-manual-total { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; }
.manual-transition-price { display: inline-flex; align-items: baseline; gap: 8px; color: var(--text); }
.manual-transition-price s { color: var(--muted); font-size: .9em; }
.manual-transition-price strong { color: var(--text); font-size: 1.1em; font-weight: 750; }
.purchase-step-confirm { min-height: 44px; margin-top: 8px; padding: 0 22px; border: 0; border-radius: 0; border-bottom-right-radius: 7px; background: #41c4c3; color: #071414; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: filter .18s ease, transform .18s ease; }
.purchase-step-confirm:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); }
.purchase-step-confirm:disabled { opacity: .65; cursor: wait; }
.manual-infinitepay-status .manual-gateway-content { display: grid; align-content: center; }
.manual-infinitepay-result { width: min(100%, 540px); margin: 0 auto; text-align: center; }
.manual-infinitepay-brand { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 14px; color: #101313; }
.manual-infinitepay-brand svg { width: 42px; height: 42px; }
.manual-infinitepay-result h1 { margin: 0 0 9px; font-size: clamp(21px, 2.6vw, 30px); }
.manual-infinitepay-result > p { margin: 0 auto 16px; max-width: 460px; color: var(--muted); line-height: 1.55; }
.manual-infinitepay-items { display: grid; gap: 7px; margin: 12px 0; text-align: left; }
.manual-infinitepay-item { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); }
.manual-infinitepay-item > img { width: 40px; height: 40px; flex: 0 0 40px; object-fit: cover; }
.manual-infinitepay-item > span { display: grid; gap: 4px; min-width: 0; }
.manual-infinitepay-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.manual-infinitepay-item small { display: flex; gap: 8px; align-items: baseline; color: var(--text); font-size: 12px; }
.manual-infinitepay-item small s { color: var(--muted); }
.manual-infinitepay-total { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin: 13px 0 16px; font-size: 19px; }
.manual-infinitepay-total s { color: var(--muted); font-size: 14px; }
.manual-infinitepay-total strong { font-weight: 750; }
.manual-infinitepay-continue { width: 100%; min-height: 48px; border: 0; border-radius: 0; border-bottom-right-radius: 7px; background: #41c4c3; color: #061515; font: inherit; font-weight: 750; cursor: pointer; }
.manual-infinitepay-continue:hover { filter: brightness(1.06); }
.manual-infinitepay-check { margin-top: 11px; padding: 6px 10px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.manual-infinitepay-result.is-paid > span { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 13px; border-radius: 50%; background: #e1f4eb; color: #16833d; font-size: 25px; font-weight: 800; }
.manual-infinitepay-result.is-paid .manual-gateway-discord { margin-top: 16px; }
.manual-test-checkout-note { margin: 12px 0 0; max-width: 720px; font-size: 0.88rem; }
.manual-infinitepay-result.is-paid .manual-test-delivery-download { display: flex; align-items: center; justify-content: center; margin-top: 16px; color: #061515; text-decoration: none; }
.manual-infinitepay-error { color: #a92d2d !important; font-size: 13px; }
@media (max-width: 700px) {
  .purchase-step-confirm { min-height: 42px; font-size: 13px; }
  .purchase-step-manual-total { font-size: 12px; }
  .manual-infinitepay-status .manual-gateway-content { overflow-y: auto; }
  .manual-infinitepay-result { padding: 4px 0; }
  .manual-infinitepay-result h1 { font-size: 21px; }
  .manual-infinitepay-item { padding: 7px 9px; }
}


/* ------------------------------------------------ entrega dos produtos manuais
   Card final mostrado depois que a InfinitePay confirma o pagamento (ver
   openManualDeliveryModal em site.js). Reaproveita o card central das compras
   Tebex; aqui só o texto de instrução e o botão do Discord. */
.manual-delivery-howto {
  margin: 0 0 14px;
  text-align: center;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}
/* cores e ícone do próprio Discord, cantos retos com o corte do site */
.manual-delivery-discord {
  --cut: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 18px;
  background: #5865f2;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  transition: background-color 0.2s var(--ease);
}
.manual-delivery-discord:hover { background: #4752c4; color: #fff; }
.manual-delivery-discord svg { flex-shrink: 0; }

/* caixinha "já recebi" + instruções, dentro do card de "Meus produtos"
   (só aparece em produto pago fora da Tebex - ver accountOwnedCardHtml) */
.account-owned-delivery {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.account-owned-received {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-2);
}
.account-owned-received input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}
.account-owned-howto { margin: 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.account-owned-discord {
  --cut: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  background: #5865f2;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  transition: background-color 0.2s var(--ease);
}
.account-owned-discord:hover { background: #4752c4; color: #fff; }
.account-owned-discord svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Número do pedido + botão de copiar. É o dado que o administrador usa para
   saber de quem é a compra, então aparece nos dois cards (ver orderCodeHtml). */
.order-code {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
}
.order-code-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.order-code-button {
  --cut: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  color: var(--text);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.order-code-button:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.order-code-button.is-copied { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.order-code-text {
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  text-align: left;
}
.order-code-icon { display: inline-flex; flex-shrink: 0; color: var(--accent); }
.order-code-icon svg { width: 15px; height: 15px; }
/* no card pós-pagamento o conteúdo é centralizado */
.order-code-delivery { align-items: center; }
.order-code-delivery .order-code-button { justify-content: center; }
/* dentro do card de "Meus produtos" tudo é um pouco menor */
.order-code-owned { gap: 5px; margin: 0; }
.order-code-owned .order-code-button { padding: 8px 10px; }
.order-code-owned .order-code-text { font-size: 11px; }

/* ------------------------------------------------------- painel de pedidos
   Lista simples: um bloco por pedido, o que o administrador precisa ler de
   relance (código, situação, cliente, valor) e a baixa de entrega. */
.ordadmin-search { display: flex; gap: 10px; margin: 16px 0 12px; flex-wrap: wrap; }
.ordadmin-input {
  flex: 1 1 260px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
}
.ordadmin-input:focus { outline: none; border-color: var(--accent); }
.ordadmin-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.ordadmin-filter {
  padding: 6px 11px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11.5px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.ordadmin-filter:hover { color: var(--text); border-color: var(--accent); }
.ordadmin-filter.is-active { color: var(--accent); border-color: var(--accent); }
.ordadmin-count { font-size: 12px; margin: 0 0 14px; }
.ordadmin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ordadmin-row {
  --cut: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.ordadmin-row.is-delivered { opacity: 0.62; }
.ordadmin-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 11px; }
.ordadmin-code { width: auto; flex: 0 1 auto; padding: 7px 11px; }
.ordadmin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.ordadmin-badge.is-ok { color: var(--accent); }
.ordadmin-badge.is-wait { color: #e0a633; }
.ordadmin-badge.is-bad { color: #e2574c; }
.ordadmin-badge.is-test { color: var(--muted); }
.ordadmin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 11px;
  margin-bottom: 11px;
}
.ordadmin-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.ordadmin-grid p { margin: 0; font-size: 13px; }
.ordadmin-mini { font-size: 11px; color: var(--muted); }
.ordadmin-items { list-style: none; margin: 0 0 11px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ordadmin-items li { font-size: 12.5px; color: var(--text-2); }
.ordadmin-delivered {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--text-2);
  cursor: pointer;
}
.ordadmin-delivered input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.ordadmin-delivered input:disabled { cursor: wait; }

/* etiqueta de origem de cada produto dentro do pedido (Tebex / InfinitePay) */
.ordadmin-items li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ordadmin-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.ordadmin-tag.is-ok { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ordadmin-tag.is-wait { color: #e0a633; border-color: color-mix(in srgb, #e0a633 45%, transparent); }
.ordadmin-item-name { color: var(--text-2); }

/* ------------------------------------- rodapé do card (padrão do checkout Tebex)
   O card do resumo vira duas linhas: conteúdo em cima (sidebar + principal)
   e o rodapé atravessando as duas colunas embaixo, como na tela da Tebex. */
.manual-gateway:has(.manual-gateway-footer) {
  grid-template-rows: minmax(0, 1fr) auto;
}
.manual-gateway:has(.manual-gateway-footer) > .manual-gateway-sidebar,
.manual-gateway:has(.manual-gateway-footer) > .manual-gateway-main {
  grid-row: 1;
  min-height: 0;
}
.manual-gateway-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 12px 26px;
  border-top: 1px solid #e6e6e6;
  background: #fafafa;
  font-family: Inter, Arial, sans-serif;
}
/* a marca cede espaco (o aviso quebra em duas linhas); os links ficam
   inteiros numa linha so, como na tela da Tebex */
.manual-gateway-footer-brand { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 11px; }
.manual-gateway-footer-brand img { flex-shrink: 0; height: 18px; width: auto; opacity: 0.75; }
.manual-gateway-footer-brand p {
  margin: 0;
  color: #85888f;
  font-size: 10.5px;
  line-height: 1.4;
}
.manual-gateway-footer-links {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 13px;
  white-space: nowrap;
  font-size: 10px;
}
.manual-gateway-footer-links a { color: #6d7077; text-decoration: none; transition: color .15s ease; }
.manual-gateway-footer-links a:hover { color: #25272b; text-decoration: underline; }
.manual-gateway-footer-lang { color: #9a9da3; }

@media (max-width: 720px) {
  .manual-gateway-footer { flex-wrap: wrap; padding: 13px 18px; gap: 12px; }
  .manual-gateway-footer-links { white-space: normal; flex-wrap: wrap; }
  .manual-gateway-footer-brand p { font-size: 10px; }
  .manual-gateway-footer-links { gap: 12px; font-size: 10px; }
}

/* --------------------------- cabeçalho da coluna esquerda do card de resumo
   "Order <conta>" à esquerda e "Cancelar" (texto sublinhado) à direita, que
   substitui o X que ficava no topo da coluna principal. */
.manual-gateway-brand {
  justify-content: space-between;
  gap: 12px;
}
.manual-gateway-cancel {
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000;
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.manual-gateway-cancel:hover { color: #444; }
/* o card é a antessala do checkout da Tebex: título reto, sem o itálico
   dos títulos do site */
.manual-gateway-content h1 {
  font-family: Inter, Arial, sans-serif;
  font-style: normal;
  text-transform: none;
}

/* ------------------------- produtos que ficam pro segundo checkout + botão
   de segurar, no card "agora falta apenas pagar...". */
.manual-transition-items {
  list-style: none;
  width: 100%;
  margin: 12px 0 4px;
  padding: 0;
  display: grid;
  gap: 7px;
  text-align: left;
}
.manual-transition-item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.manual-transition-item > img { width: 38px; height: 38px; flex: 0 0 38px; object-fit: cover; }
.manual-transition-item-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.manual-transition-item-price { flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.manual-transition-item-price s { color: var(--muted); }
.manual-transition-item-price b { color: var(--text); font-weight: 700; }

/* o botão só avança depois de 3 segundos pressionado: a faixa que preenche
   mostra o progresso, e o rótulo diz o que fazer */
.purchase-step-confirm.is-hold {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 54px;
  margin-top: 14px;
  padding: 0 18px;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.purchase-hold-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: rgba(255, 255, 255, 0.42);
  pointer-events: none;
}
.purchase-step-confirm.is-holding .purchase-hold-fill {
  width: 100%;
  transition: width 3s linear;
}
.purchase-hold-label { position: relative; z-index: 1; }
.purchase-step-confirm.is-holding { transform: none; filter: brightness(1.05); }

/* ------------------------------- resumo de pagamento do card (lado direito)
   Bloco acinzentado: o total do pedido em destaque e, abaixo, as duas etapas
   numeradas (1 primeiro checkout, 2 segundo) com fonte menor - fica claro
   que é um passo a passo, e o total continua sendo o que salta aos olhos. */
.manual-gateway-payment-summary {
  margin: 18px 0;
  padding: 4px 16px;
  border: 1px solid #e3e3e3;
  background: #f4f4f5;
}
.manual-gateway-payment-summary .manual-gateway-order-total {
  padding: 14px 0;
  border-top: 0;
  border-bottom: 1px solid #e1e1e2;
  color: #3c4046;
  font-size: 14px;
}
.manual-gateway-payment-summary .manual-gateway-order-total .manual-gateway-total-values { font-size: 20px; }
.manual-gateway-step-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #e8e8e9;
  color: #6b6f77;
  font-size: 12px;
}
.manual-gateway-step-row:last-child { border-bottom: 0; }
.manual-gateway-step-row > span { display: inline-flex; align-items: center; gap: 9px; }
.manual-gateway-step-row strong { color: #3c4046; font-size: 13px; font-weight: 600; white-space: nowrap; }
/* o número da etapa */
.manual-gateway-step-num {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #d7d8da;
  color: #4a4e55;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

/* "Finalizar compra" em caixa alta (o texto segue traduzido; só a exibição muda) */
.cart-checkout-btn { text-transform: uppercase; }

/* atalho do administrador no menu da conta (só aparece para a conta admin;
   quem autoriza de fato é o servidor, em requireAdmin) */
.account-menu-admin { color: var(--accent); }
.account-menu-admin svg { color: var(--accent); }

/* ===================== card de resumo do pedido no celular =====================
   No desktop o card tem duas colunas (itens | conteúdo) e o rodapé atravessa
   as duas. No celular vira UMA coluna com três linhas empilhadas:
   itens em cima, conteúdo no meio (rolando) e o rodapé embaixo.

   Sem este bloco, a regra de rodapé do desktop (que prende sidebar e conteúdo
   na linha 1) criava uma segunda coluna implícita: a lista de itens ficava
   espremida em ~90px, o "Order <conta>" saía cortado e o rodapé virava uma
   coluna de palavras soltas. */
@media (max-width: 700px) {
  .manual-gateway:has(.manual-gateway-footer) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .manual-gateway:has(.manual-gateway-footer) > .manual-gateway-sidebar {
    grid-row: 1;
    grid-column: 1;
  }
  .manual-gateway:has(.manual-gateway-footer) > .manual-gateway-main {
    grid-row: 2;
    grid-column: 1;
  }
  .manual-gateway-footer {
    grid-row: 3;
    grid-column: 1;
  }

  /* lista de itens: rola sozinha quando o carrinho tem vários produtos */
  .manual-gateway-sidebar {
    max-height: 30dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* "Order <conta>" e o Cancelar lado a lado, sem cortar o nome */
  .manual-gateway-brand { gap: 10px; align-items: baseline; }
  .manual-gateway-brand > strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
  }
  .manual-gateway-cancel { font-size: 12px; }

  /* o cabeçalho do card ficou sem conteúdo quando o X deu lugar ao
     "Cancelar" da coluna de itens; no celular ele só ocupava espaço */
  .manual-gateway-top:empty { display: none; }

  /* conteúdo principal rola; o botão continua alcançável no fim */
  .manual-gateway-main { min-height: 0; }
  .manual-gateway-content {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* um rodapé de verdade: marca numa linha, links na seguinte - nunca
     uma coluna de palavras quebradas */
  .manual-gateway-footer {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    text-align: center;
  }
  .manual-gateway-footer-brand {
    flex: 0 1 auto;
    width: 100%;
    justify-content: center;
    gap: 9px;
  }
  .manual-gateway-footer-brand img { height: 15px; }
  .manual-gateway-footer-brand p { font-size: 9.5px; line-height: 1.35; text-align: left; }
  .manual-gateway-footer-links {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
    gap: 6px 12px;
    font-size: 9.5px;
  }
}

/* telas bem estreitas: a marca do rodapé fica só com o texto centralizado */
@media (max-width: 420px) {
  .manual-gateway-footer-brand p { text-align: center; }
  .manual-gateway-content { padding: 18px 14px; }
  .manual-gateway-breakdown-card { padding: 2px 12px; }
  .manual-gateway-payment-summary { padding: 2px 12px; }
}

/* ---------------- galeria do produto manual (painel do administrador)
   Cada foto aparece com a posição, setas para mudar a ordem e o × para
   remover. A ordem aqui é a mesma que o visitante vê na página do produto. */
.manual-gallery-thumb { position: relative; }
.manual-gallery-pos {
  position: absolute;
  top: 5px;
  left: 5px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.66);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.manual-gallery-tools {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  display: flex;
  justify-content: space-between;
  gap: 5px;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}
.manual-gallery-thumb:hover .manual-gallery-tools,
.manual-gallery-thumb:focus-within .manual-gallery-tools { opacity: 1; }
.manual-gallery-tools button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.manual-gallery-tools button:hover:not(:disabled) { background: var(--accent); color: #06130a; }
.manual-gallery-tools button:disabled { opacity: 0.3; cursor: default; }
/* no toque não existe hover: os controles ficam sempre visíveis */
@media (hover: none) {
  .manual-gallery-tools { opacity: 1; }
}