/* Fontes hospedadas no tema (subconjunto latino, cobre o português). São variáveis:
   um arquivo serve todos os pesos. Sem ida ao Google, sem bloquear a primeira pintura. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fontes/dm-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fontes/space-grotesk-latin.woff2") format("woff2");
}

:root {
  --background: #f4f6fb;
  --foreground: #0f1f3d;
  --card: #ffffff;
  --primary: #1a3a6b;
  --primary-foreground: #f4f6fb;
  --secondary: #e4eaf7;
  --muted: #7a8299;
  --border: #dde2ef;
  --glow: rgb(26 58 107 / 28%);
  --radius: 0.5rem;
  --fonte-display: "Space Grotesk", sans-serif;
  --fonte-texto: "DM Sans", sans-serif;
  --largura: 72rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--fonte-texto);
  line-height: 1.5;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--fonte-display); line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
p { margin: 0; }

.wx-site { min-height: 100vh; }
.wx-wrap { width: min(var(--largura), calc(100% - 2.5rem)); margin-inline: auto; }
.wx-section { padding: 5rem 0; }
.wx-section-curta { padding: 3.5rem 0; }
.wx-muted { color: var(--muted); }
.wx-small { font-size: 0.75rem; }
.wx-grow { flex: 1; }
.wx-centro { text-align: center; margin-top: 2.5rem; }
.wx-lead { margin-top: 1.5rem; max-width: 36rem; font-size: 1.125rem; color: var(--muted); }
.wx-kicker {
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
.wx-kicker-quiet { color: var(--muted); letter-spacing: 0.06em; }
.wx-link { color: var(--primary); font-weight: 700; }
.wx-entre, .wx-header-row, .wx-contato-grade { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.circuit-bg {
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
}

.wx-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid #1a2f5a;
  background: #0f1f3d;
  color: #f4f6fb;
}
.wx-header-row { padding: 1rem 0; gap: 1rem; }
.wx-header-acoes { display: flex; align-items: center; gap: 0.65rem; }
.wx-carrinho {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--foreground);
  background: var(--card);
}
.wx-carrinho:hover { border-color: var(--primary); color: var(--primary); }
.wx-carrinho svg { width: 1.2rem; height: 1.2rem; }
.wx-carrinho-qtd {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.68rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.wx-marca img { display: block; height: 3rem; width: auto; }
.wx-nav { display: flex; gap: 2rem; margin-left: auto; font-size: 0.9rem; color: #c2cade; }
.wx-header .wx-nav a:hover, .wx-header .wx-nav a[aria-current="page"] { color: #f4f6fb; }
.wx-header .wx-btn-primary { background: #f4f6fb; color: #0f1f3d; }
.wx-header .wx-carrinho { background: transparent; color: #f4f6fb; border-color: #3d5278; }
.wx-header .wx-carrinho:hover { border-color: #f4f6fb; color: #f4f6fb; }
.wx-header .wx-carrinho-qtd { background: #f4f6fb; color: #0f1f3d; }
.wx-header .wx-nav-botao { color: #f4f6fb; border-color: #3d5278; }
.wx-nav-toggle, .wx-nav-botao { display: none; }

.wx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  padding: 0.7rem 1.1rem;
  font-weight: 700;
  border: 1px solid transparent;
}
.wx-btn-primary { background: var(--primary); color: var(--primary-foreground); }
.wx-btn-secondary { background: var(--secondary); color: var(--foreground); width: 100%; margin-top: 1rem; }
.wx-btn-secondary:hover { background: #c2cade; }
.wx-btn-ghost { border-color: var(--border); background: transparent; }
.wx-btn-ghost:hover { background: var(--secondary); }
.wx-btn-glow { box-shadow: 0 0 40px var(--glow); }
.wx-acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.wx-selos { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 2rem 0 0; padding: 0; list-style: none; font-size: 0.9rem; color: #c2cade; }
.wx-selos li::before { content: "✓"; margin-right: 0.5rem; color: #9eb6e0; font-weight: 700; }

.wx-hero { position: relative; overflow: hidden; min-height: 28rem; background: #0f1f3d; }
.wx-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.72; }
.wx-hero-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgb(7 15 34 / 78%), rgb(15 31 61 / 55%), rgb(26 58 107 / 42%), rgb(18 48 95 / 50%), rgb(7 15 34 / 78%));
  background-size: 280% 280%;
  animation: wx-hero-move 16s ease-in-out infinite;
}
.wx-hero-texto { position: relative; padding: 7rem 0; color: #f4f6fb; }
.wx-hero-texto h1 { color: #f4f6fb; }
.wx-hero .wx-kicker { color: #9eb6e0; }
.wx-hero .wx-lead { color: #c2cade; }
.wx-hero .wx-btn-primary { background: #f4f6fb; color: #0f1f3d; }
.wx-hero .wx-btn-ghost { border-color: rgb(244 246 251 / 40%); color: #f4f6fb; }
.wx-hero .wx-btn-ghost:hover { background: rgb(244 246 251 / 12%); }
@keyframes wx-hero-move {
  0% { background-position: 0% 40%; }
  50% { background-position: 100% 60%; }
  100% { background-position: 0% 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .wx-hero-velo { animation: none; }
}

/* Trilhas de placa, LED, terminal e peças do hero. O movimento vem do home.js. */
.wx-hero-trilhas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wx-trilhas-base path { fill: none; stroke: rgb(158 182 224 / 22%); stroke-width: 2; }
.wx-trilhas-base circle { fill: #0f1f3d; stroke: rgb(158 182 224 / 40%); stroke-width: 2; }
.wx-trilhas-pulso { filter: drop-shadow(0 0 6px #6fa8ff); }
.wx-trilhas-pulso path { fill: none; stroke: #9cc4ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 1; }

.wx-terminal { display: inline-flex; align-items: center; gap: 0.6rem; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.04em; text-transform: none; font-size: 0.9rem; }
.wx-terminal-prompt { color: #6fa8ff; }
.wx-led { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80, 0 0 2px #4ade80; }
.wx-cursor { display: inline-block; width: 0.55em; height: 1.1em; margin-left: 0.15em; background: #9eb6e0; animation: wx-cursor 1s steps(1) infinite; }
@keyframes wx-cursor { 50% { opacity: 0; } }

.wx-hero-pecas { position: absolute; inset: 0; pointer-events: none; }
.wx-peca { position: absolute; display: block; }
.wx-peca svg { display: block; width: 100%; height: auto; fill: none; stroke: #9eb6e0; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
.wx-peca-chip { width: 7.5rem; right: 9%; top: 16%; }
.wx-peca-chip rect { fill: rgb(15 31 61 / 70%); }
.wx-peca-chip circle { fill: #9eb6e0; }
.wx-peca-led { width: 3.2rem; right: 30%; top: 58%; }
.wx-peca-luz { fill: rgb(111 168 255 / 35%); stroke: #9cc4ff; filter: drop-shadow(0 0 10px #6fa8ff); }
.wx-peca-resistor { width: 8rem; right: 6%; bottom: 14%; }
.wx-peca-resistor rect { fill: rgb(15 31 61 / 70%); }
.wx-peca-faixa { stroke: #f4b860; }
.wx-peca-jumper { width: 7rem; right: 24%; top: 10%; }
.wx-peca-jumper path { stroke: #f87171; }

/* Estado inicial do que entra animado. Só vale com a classe que o head põe. */
.wx-anima [data-wx-entrada] { opacity: 0; transform: translateY(24px); }
.wx-anima h1[data-wx-entrada] { opacity: 1; }
.wx-anima .wx-peca { opacity: 0; }
.wx-anima [data-wx-revelar]:not([data-wx-revelado]) > :not(.wx-grade),
.wx-anima [data-wx-revelar]:not([data-wx-revelado]) > .wx-grade > * { opacity: 0; transform: translateY(28px); }

@media (max-width: 980px) {
  .wx-peca-led, .wx-peca-jumper { display: none; }
  .wx-peca-chip { width: 5rem; right: 4%; top: 6%; }
  .wx-peca-resistor { width: 5.5rem; right: 4%; bottom: 6%; }
}
.wx-faixa { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.wx-faixa-suave { background: var(--secondary); }
.wx-faixa-escura { background: #0f1f3d; color: #f4f6fb; }
.wx-faixa-escura .wx-kicker { color: #9eb6e0; }
.wx-faixa-escura .wx-lead { color: #c2cade; }
.wx-faixa-escura .wx-card { background: #152a52; border-color: #1f3a6b; }
.wx-faixa-escura .wx-muted { color: #c2cade; }
.wx-faixa-escura .wx-btn-primary { background: #f4f6fb; color: #0f1f3d; }
.wx-loja-capa { position: relative; overflow: hidden; background: #0f1f3d; border-color: #1a2f5a; }
.wx-loja-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wx-loja-grade { position: absolute; inset: 0; background-color: rgb(15 31 61 / 42%); }
.wx-loja-capa .wx-wrap { position: relative; }
.wx-loja-capa h1,
.wx-loja-capa .wx-kicker,
.wx-loja-capa .wx-lead { color: #f4f6fb; }
.wx-loja-capa .wx-kicker { color: #9eb6e0; }
.wx-loja-capa .wx-lead { color: #dde2ef; }
.wx-contato { background: var(--card); border-top: 1px solid var(--border); }
.wx-contato-grade { padding: 5rem 0; align-items: start; }
.wx-contato-dados { color: var(--muted); display: grid; gap: 0.75rem; }
.wx-contato-dados strong { color: var(--foreground); }

.wx-grade { display: grid; gap: 1rem; margin-top: 2.5rem; }
.wx-grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wx-grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wx-grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wx-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 0.7rem;
  padding: 1.4rem;
}
.wx-card > .wx-muted { flex: 1 1 auto; }
.wx-card > .wx-btn-secondary {
  width: 100%;
  margin-top: 0.75rem;
  align-self: stretch;
}
.wx-card-link { transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.wx-card-link:hover { border-color: var(--primary); box-shadow: 0 10px 30px var(--glow); transform: translateY(-3px); }
.wx-card-foto {
  display: block;
  margin: -1.4rem -1.4rem 0.4rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.65rem 0.65rem 0 0;
  background: #e4eaf7;
}
.wx-card-foto .wx-carrossel,
.wx-card-foto .wx-carrossel-palco,
.wx-card-foto .wx-carrossel-foto { height: 100%; }
.wx-card-foto .wx-carrossel-palco,
.wx-card-foto .wx-carrossel-foto { overflow: hidden; }
.wx-card-foto .wx-carrossel-foto img {
  transform: scale(1.85);
  transform-origin: center;
}
.wx-carrossel { position: relative; }
.wx-carrossel-palco { position: relative; height: 100%; }
.wx-carrossel-foto { display: none; height: 100%; }
.wx-carrossel-foto.is-ativa { display: block; }
.wx-carrossel-foto img,
.wx-card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx-carrossel-seta {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0 0 0.15rem;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 92%);
  color: var(--foreground);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}
.wx-carrossel-seta:hover { background: #fff; }
.wx-carrossel-ant { left: 0.45rem; }
.wx-carrossel-prox { right: 0.45rem; }
.wx-carrossel-pontos {
  position: absolute;
  right: 0;
  bottom: 0.55rem;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.35rem;
}
.wx-carrossel-ponto {
  width: 0.48rem;
  height: 0.48rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 75%);
  cursor: pointer;
}
.wx-carrossel-ponto.is-ativa { background: var(--primary); }
.wx-carrossel-grande .wx-carrossel-palco {
  aspect-ratio: 1;
  height: auto;
  overflow: hidden;
  background: #fff;
}
.wx-carrossel-grande .wx-carrossel-foto,
.wx-carrossel-grande .wx-carrossel-foto.is-ativa {
  position: absolute;
  inset: 0;
  height: 100%;
  overflow: hidden;
}
.wx-carrossel-grande .wx-carrossel-foto img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  /* A foto do Mercado Livre traz cerca de 24% de margem branca em cada lado. */
  transform: scale(1.85);
  transform-origin: center;
}
@media (min-width: 981px) {
  .wx-produto .wx-produto-info { position: sticky; top: 5.5rem; }
}
.wx-carrossel-minis {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  overflow-x: auto;
}
.wx-carrossel-mini {
  flex: 0 0 auto;
  width: 4.2rem;
  height: 4.2rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: #fff;
  cursor: pointer;
}
.wx-carrossel-mini.is-ativa { border-color: var(--primary); }
.wx-carrossel-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx-card h2,
.wx-card .wx-card-title,
.wx-junto .wx-card h2 {
  font-family: var(--fonte-texto);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}
.wx-card-title-grow { flex: 1; }
.wx-icone {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius);
  background: var(--secondary);
  color: var(--primary);
  font-size: 1.4rem;
}
.wx-preco { margin-top: 0.6rem; }
.wx-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wx-preco, .wx-preco .amount { font-family: var(--fonte-display); font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.wx-preco-atacado, .wx-preco-atacado .amount { color: var(--foreground); font-size: 1.25rem; }
.wx-busca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.wx-busca label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.wx-busca input[type="search"] {
  flex: 1 1 16rem;
  min-height: 2.7rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--foreground);
  font: inherit;
}
.wx-busca input[type="search"]:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.wx-busca button {
  min-height: 2.7rem;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.wx-filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wx-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.wx-chip:hover, .wx-chip.is-active { border-color: var(--primary); }
.wx-chip.is-active { background: var(--primary); color: var(--primary-foreground); }
.wx-produto { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2rem; align-items: start; }
.wx-produto-galeria {
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--card);
  overflow: hidden;
}
.wx-produto-info h1 { font-size: clamp(1rem, 2vw, 1.6rem); line-height: 1.25; }
.wx-produto-info .wx-lead { margin-top: 0.8rem; }
.wx-precos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.wx-estoque { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 0.9rem; font-weight: 700; color: #9a3412; }
.wx-estoque.is-ok { color: #166534; }
.wx-estoque-led { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #f97316; box-shadow: 0 0 8px #f97316; }
.wx-estoque.is-ok .wx-estoque-led { background: #4ade80; box-shadow: 0 0 8px #4ade80; }

/* Página do produto sobre a placa: info e descrição em painéis brancos para leitura. */
.wx-painel { background: var(--card); border: 1px solid var(--border); border-radius: 0.7rem; padding: 1.6rem; }
.wx-caminho { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; }
.wx-caminho a { color: var(--primary); }
.wx-caminho a:hover { text-decoration: underline; }
.wx-comprar { margin-top: 1.25rem; }
.wx-produto .cart { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: stretch; margin: 0; }
.wx-comprar .quantity { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.wx-comprar .quantity .qty { width: 3.2rem; min-height: 2.9rem; border: 0; text-align: center; font: 700 1rem var(--fonte-display); -moz-appearance: textfield; }
.wx-comprar .quantity .qty::-webkit-inner-spin-button, .wx-comprar .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.wx-qtd-passo { width: 2.4rem; border: 0; background: var(--secondary); color: var(--primary); font-size: 1.2rem; font-weight: 700; cursor: pointer; }
.wx-qtd-passo:hover { background: #c2cade; }

/* O botão do WooCommerce vira a mesma chave táctil dos cartões; LED e tampa entram por pseudo-elementos. */
body .wx-comprar form.cart .single_add_to_cart_button.button {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.9rem;
  padding: 0.5rem 0.65rem 0.5rem 0.85rem;
  border: 1px solid #0b1730;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #23365c, #0f1f3d);
  color: #f4f6fb;
  font: 700 1rem var(--fonte-texto);
  text-align: left;
  box-shadow: 0 4px 0 #0b1730, inset 0 1px 0 rgb(255 255 255 / 14%);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
body .wx-comprar form.cart .single_add_to_cart_button.button::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #3a4660;
  box-shadow: inset 0 0 2px #000;
}
body .wx-comprar form.cart .single_add_to_cart_button.button::after {
  content: "";
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  margin-left: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3b3f48, #111318 70%);
  box-shadow: 0 0 0 3px #8b97ad, 0 0 0 4px #0b1730, inset 0 -2px 3px rgb(0 0 0 / 60%);
}
body .wx-comprar form.cart .single_add_to_cart_button.button:hover::before { background: #6fa8ff; box-shadow: 0 0 8px #6fa8ff; }
body .wx-comprar form.cart .single_add_to_cart_button.button:active { transform: translateY(3px); box-shadow: 0 1px 0 #0b1730; }
.wx-comprar .wx-btn-tatil { margin-top: 0; padding-block: 0.7rem; font-size: 1rem; }
.wx-no-carrinho { margin-bottom: 0.6rem; color: #166534; font-weight: 700; font-size: 0.95rem; }
.wx-mais { margin-top: 0.9rem; }
.wx-mais summary { cursor: pointer; color: var(--primary); font-weight: 700; font-size: 0.9rem; }
.wx-mais form.cart { margin-top: 0.75rem; }
.wx-btn-caixa { width: 100%; margin-top: 1.1rem; text-align: center; }
.wx-btn-tatil.is-no-carrinho .wx-btn-led { background: #4ade80; box-shadow: 0 0 10px #4ade80; }
.wx-produto-desc { margin-top: 2rem; }
.wx-produto-desc h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 0.5rem; }
.wx-junto { margin-top: 3.5rem; }
.wx-junto > h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.wx-leitura {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18.5rem;
  gap: 2.5rem;
  align-items: start;
}
.wx-leitura .wx-artigo,
.wx-leitura .wx-prose { max-width: none; }
.wx-ultimos { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.wx-ultimos h2,
.wx-lateral h2 { font-size: 1.35rem; }
.wx-ultimos-lista { display: grid; gap: 0.75rem; margin-top: 1rem; }
.wx-ultimo {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--card);
}
.wx-ultimo h3 { margin-top: 0.2rem; font-size: 1.05rem; }
.wx-ultimo .wx-muted { margin-top: 0.35rem; }
.wx-ultimo:hover { border-color: var(--primary); }
.wx-lateral { position: sticky; top: 5.5rem; }
.wx-lateral-lista { display: grid; gap: 0.75rem; margin: 1rem 0 1rem; }
.wx-lateral-item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--card);
}
.wx-lateral-item img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: 0.45rem;
  background: #e4eaf7;
}
.wx-lateral-item strong { display: block; font-size: 0.95rem; line-height: 1.3; }
.wx-lateral-item .wx-preco,
.wx-lateral-item .wx-preco .amount { font-size: 1rem; margin-top: 0.2rem; }
.wx-lateral-item:hover { border-color: var(--primary); }
.wx-artigo { max-width: 46rem; }
.wx-artigo-foto { margin: 0 0 1.5rem; overflow: hidden; border: 1px solid var(--border); border-radius: 0.7rem; }
.wx-artigo-foto img { width: 100%; display: block; object-fit: cover; }
.wx-artigo-meta { margin-top: 1rem; color: var(--muted); }
.wx-prose { max-width: 46rem; }
.wx-prose h1 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 1rem; }
.wx-prose p { margin: 0.8rem 0; }
.wx-footer { background: #0f1f3d; border-top: 1px solid #1a2f5a; padding: 2rem 1rem; text-align: center; color: #c2cade; font-size: 0.875rem; }
.wx-paginacao { margin-top: 2rem; }
.wx-paginacao .page-numbers { display: inline-flex; gap: 0.4rem; }
.wx-paginacao a, .wx-paginacao span { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.3rem 0.7rem; }

.wx-comprar, .woocommerce form.cart { margin-top: 1.25rem; }
.woocommerce, .woocommerce-page { color: var(--foreground); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius);
  font-weight: 700;
}
.woocommerce input.qty, .woocommerce input, .woocommerce select, .woocommerce textarea,
.wc-block-components-text-input input, .wc-block-components-textarea {
  background: #ffffff;
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.woocommerce table, .woocommerce th, .woocommerce td { border-color: var(--border); }
/* Avisos completos no tema: na loja e no produto o CSS do WooCommerce não carrega. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.1rem;
  list-style: none;
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
}
.woocommerce-error { border-left-color: #dc2626; }
.woocommerce-error li { margin: 0; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; color: var(--primary); font-weight: 700; }

.wx-conta-intro { max-width: 40rem; margin-bottom: 2rem; }
.wx-conta-intro h1 { font-size: clamp(2rem, 4vw, 3rem); }
.wx-conta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}
/* Formulários de conta no mesmo formato dos cartões: CI com pinos nas laterais. */
.wx-conta-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  padding: 1.6rem 1.5rem 1.4rem;
  transition: border-color 0.15s ease;
}
.wx-conta-card:focus-within { border-color: var(--primary); }
.wx-conta-uma { max-width: 28rem; }
.wx-conta-card h2 { font-size: 1.55rem; margin-bottom: 1rem; }
.wx-conta-card form.login,
.wx-conta-card form.register,
.wx-conta-card form.lost_reset_password {
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
.wx-conta-card .form-row { margin: 0 0 0.95rem; }
.wx-conta-card label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--foreground);
}
.wx-conta-card h2 { margin-bottom: 0.3rem; }
.wx-conta-sub { margin-bottom: 1.1rem; font-size: 0.92rem; }
/* O WooCommerce já põe o botão de mostrar senha (ícone de olho); só abre espaço para ele. */
.wx-conta-card .password-input { position: relative; display: block; }
.wx-conta-card .password-input input { padding-right: 2.8rem; }
.wx-conta-card input[type="text"],
.wx-conta-card input[type="email"],
.wx-conta-card input[type="password"] {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.65rem 0.8rem;
  background: #f4f6fb;
  border: 1px solid #c2cade;
  border-radius: 0.55rem;
  color: var(--foreground);
  font: inherit;
}
.wx-conta-card input:focus {
  outline: 2px solid #1a3a6b;
  outline-offset: 1px;
  background: #fff;
}
/* Botões de entrar, criar conta e enviar link: a mesma chave táctil da loja, com LED. */
.wx-conta-card .button {
  position: relative;
  width: 100%;
  margin-top: 0.4rem;
  min-height: 3rem;
  border: 1px solid #0b1730;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #23365c, #0f1f3d);
  color: #f4f6fb;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 0 #0b1730, inset 0 1px 0 rgb(255 255 255 / 14%);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.wx-conta-card .button::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #3a4660;
  box-shadow: inset 0 0 2px #000;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.wx-conta-card .button:hover::before { background: #6fa8ff; box-shadow: 0 0 8px #6fa8ff; }
.wx-conta-card .button:active { transform: translateY(3px); box-shadow: 0 1px 0 #0b1730; }
.wx-conta-lembrar { display: flex; align-items: center; }
.wx-conta-lembrar label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--foreground);
}
.woocommerce-LostPassword { margin: 0.9rem 0 0; }
.woocommerce-LostPassword a { color: var(--primary); font-weight: 700; }
.woocommerce-privacy-policy-text { color: var(--muted); font-size: 0.9rem; }
/* Área do cliente: menu lateral em cartão de CI e conteúdo em painel, sobre a placa. */
.wx-conta-area .woocommerce { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
/* O clearfix do WooCommerce (::before e ::after) viraria item da grade e empurraria o menu para a direita. */
.wx-conta-area .woocommerce::before, .wx-conta-area .woocommerce::after { display: none; }
.wx-conta-area .woocommerce-MyAccount-navigation,
.wx-conta-area .woocommerce-MyAccount-content { float: none; width: auto; }
.wx-conta-area .woocommerce-MyAccount-navigation {
  position: sticky;
  top: 5.5rem;
  padding: 0.6rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.7rem;
}
/* Pinos de CI nas laterais do menu, como nos cartões. */
.wx-conta-area .woocommerce-MyAccount-navigation::before,
.wx-conta-area .woocommerce-MyAccount-navigation::after {
  content: "";
  position: absolute;
  top: 1.2rem;
  bottom: 1.2rem;
  width: 6px;
  background: repeating-linear-gradient(to bottom, #b8c4de 0 4px, transparent 4px 12px);
}
.wx-conta-area .woocommerce-MyAccount-navigation::before { left: -7px; }
.wx-conta-area .woocommerce-MyAccount-navigation::after { right: -7px; }
.wx-conta-area .woocommerce-MyAccount-navigation ul { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }
.wx-conta-area .woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--foreground);
}
.wx-conta-area .woocommerce-MyAccount-navigation a::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #c2cade;
}
.wx-conta-area .woocommerce-MyAccount-navigation a:hover { background: var(--secondary); }
.wx-conta-area .woocommerce-MyAccount-navigation .is-active a { background: var(--secondary); color: var(--primary); }
.wx-conta-area .woocommerce-MyAccount-navigation .is-active a::before { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.wx-conta-area .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--border); }
.wx-conta-area .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--muted); }
.wx-conta-area .woocommerce-MyAccount-content {
  min-height: 18rem;
  padding: 1.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.7rem;
}
.wx-conta-area .woocommerce-MyAccount-content h2,
.wx-conta-area .woocommerce-MyAccount-content h3 { font-size: 1.3rem; }

/* Resumo: blocos de pedidos, entrega, dados e ajuda. */
.wx-resumo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.wx-resumo-bloco { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: 0.6rem; }
.wx-resumo-bloco address { font-style: normal; line-height: 1.6; }
.wx-resumo-bloco .wx-entre { width: 100%; }
.wx-resumo-pedidos { grid-column: 1 / -1; }
.wx-resumo-ajuda { grid-column: 1 / -1; background: var(--secondary); border-color: transparent; }
.wx-pedidos { display: grid; gap: 0.5rem; width: 100%; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.wx-pedido {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "num status total" "data status total";
  align-items: center;
  gap: 0.15rem 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease;
}
.wx-pedido:hover { border-color: var(--primary); }
.wx-pedido-num { grid-area: num; font: 700 1rem var(--fonte-display); }
.wx-pedido-data { grid-area: data; font-size: 0.85rem; color: var(--muted); }
.wx-pedido-total { grid-area: total; font: 700 1.05rem var(--fonte-display); color: var(--primary); }
.wx-status { grid-area: status; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; }
.wx-status::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #9aa3b8; }
.wx-status-verde::before { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.wx-status-ambar::before { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
.wx-status-vermelho::before { background: #ef4444; box-shadow: 0 0 8px #ef4444; }

/* Pedidos, endereços e formulários dentro da conta. */
.wx-conta-area table.shop_table { width: 100%; border-collapse: collapse; border: 0; border-radius: 0; }
.wx-conta-area table.shop_table th { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: left; }
.wx-conta-area table.shop_table td { padding: 0.85rem 0.75rem; border-top: 0; border-bottom: 1px solid var(--border); }
.wx-conta-area table.shop_table .button { padding: 0.45rem 0.9rem; border-radius: var(--radius); background: var(--secondary); color: var(--primary); font-weight: 700; }
.wx-conta-area .woocommerce-Addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.wx-conta-area .woocommerce-Addresses::before, .wx-conta-area .woocommerce-Addresses::after { display: none; }
/* Seletor mais forte que o .col2-set .col-1 do WooCommerce, que prendia cada cartão em 48% com float. */
.wx-conta-area .woocommerce .woocommerce-Address { float: none; width: auto; padding: 1.25rem; border: 1px solid var(--border); border-radius: 0.6rem; }
.wx-conta-area .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.wx-conta-area .woocommerce-Address-title h2 { font-size: 1.1rem; }
.wx-conta-area .woocommerce-Address-title .edit { color: var(--primary); font-weight: 700; }
.wx-conta-area .woocommerce-Address address { font-style: normal; line-height: 1.6; }
.wx-conta-area .woocommerce-MyAccount-content label { display: block; margin-bottom: 0.35rem; font-size: 0.92rem; font-weight: 700; }
.wx-conta-area .woocommerce-MyAccount-content input.input-text,
.wx-conta-area .woocommerce-MyAccount-content select {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.65rem 0.8rem;
  background: #f4f6fb;
  border: 1px solid #c2cade;
  border-radius: 0.55rem;
  font: inherit;
  color: var(--foreground);
}
.wx-conta-area .woocommerce-MyAccount-content input.input-text:focus { outline: 2px solid var(--primary); outline-offset: 1px; background: #fff; }
.wx-conta-area .woocommerce-MyAccount-content fieldset { margin: 1.5rem 0 0; padding: 1.25rem; border: 1px solid var(--border); border-radius: 0.6rem; }
.wx-conta-area .woocommerce-MyAccount-content legend { padding: 0 0.4rem; font: 700 1.05rem var(--fonte-display); }
.wx-conta-area .woocommerce-MyAccount-content button.button {
  margin-top: 1rem;
  min-height: 2.9rem;
  padding: 0 1.4rem;
  border: 1px solid #0b1730;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #23365c, #0f1f3d);
  color: #f4f6fb;
  font-weight: 700;
  box-shadow: 0 4px 0 #0b1730, inset 0 1px 0 rgb(255 255 255 / 14%);
}
.wx-conta-area .woocommerce-MyAccount-content button.button:active { transform: translateY(3px); box-shadow: 0 1px 0 #0b1730; }

@media (max-width: 860px) {
  .wx-conta-area .woocommerce { grid-template-columns: 1fr; }
  .wx-conta-area .woocommerce-MyAccount-navigation { position: static; overflow-x: auto; }
  .wx-conta-area .woocommerce-MyAccount-navigation::before, .wx-conta-area .woocommerce-MyAccount-navigation::after { display: none; }
  .wx-conta-area .woocommerce-MyAccount-navigation ul { display: flex; gap: 0.25rem; }
  .wx-conta-area .woocommerce-MyAccount-navigation li { flex: none; }
  .wx-conta-area .woocommerce-MyAccount-navigation-link--customer-logout { margin: 0 0 0 0.25rem; padding: 0 0 0 0.25rem; border-top: 0; border-left: 1px solid var(--border); }
  .wx-conta-area .woocommerce-MyAccount-content { padding: 1.25rem; }
  .wx-resumo, .wx-conta-area .woocommerce-Addresses { grid-template-columns: 1fr; }
  .wx-pedido { grid-template-columns: 1fr auto; grid-template-areas: "num total" "data data" "status status"; }
}

@media (max-width: 980px) {
  .wx-conta { grid-template-columns: 1fr; }
  .wx-grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wx-leitura { grid-template-columns: 1fr; }
  .wx-lateral { position: static; }
  .wx-grade-3, .wx-produto, .wx-contato-grade { grid-template-columns: 1fr; }
  .wx-contato-grade { display: grid; }
  .wx-header-acoes { margin-left: auto; }
  .wx-nav-botao {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
  }
  .wx-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1rem 1.25rem 1.2rem;
    background: #0f1f3d;
    border-bottom: 1px solid #1a2f5a;
  }
  .wx-nav-toggle:checked ~ .wx-nav { display: flex; }
  .wx-header-row { position: relative; }
}
@media (max-width: 640px) {
  .wx-grade-2, .wx-grade-4 { grid-template-columns: 1fr; }
  .wx-header-row .wx-btn-primary { display: none; }
}

/* Fundos das seções da home. Cada um repete a ideia da seção:
   placa em Categorias, fita de componentes no Atacado, protoboard em Destaques,
   esquemático no Blog e sinal no Contato. */
.wx-com-fundo { position: relative; overflow: hidden; }
.wx-com-fundo > .wx-wrap { position: relative; }
.wx-fundo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.wx-placa-trama path, .wx-fundo-placa pattern path { fill: none; stroke: #d5ddef; stroke-width: 1.5; }
.wx-fundo-placa pattern circle { fill: var(--background); stroke: #c7d2ea; stroke-width: 2; }
.wx-fundo-placa pattern rect { fill: #dfe5f2; }
.wx-placa-trilhas path, .wx-placa-trilhas line { fill: none; stroke: #c7d2ea; stroke-width: 2.5; }
.wx-placa-trilhas circle { fill: var(--background); stroke: #b8c4de; stroke-width: 2.5; }
/* Sem drop-shadow: a placa tem milhares de pixels de altura e o filtro obrigaria a repintar tudo a cada quadro. */
.wx-placa-pulso path, .wx-placa-pulso line { fill: none; stroke: #1f63ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 1; }

/* A placa passa por baixo das três seções; o Atacado fica escuro mas deixa a placa aparecer. */
.wx-placa-continua { position: relative; overflow: hidden; }
.wx-sobre-placa { position: relative; }
.wx-placa-continua .wx-faixa-escura { background: rgb(15 31 61 / 90%); }
.wx-placa-pulso .wx-placa-fluxo { stroke-width: 4; }

/* Curto-circuito: o ramal pisca em vermelho e as faíscas saem do pad. */
.wx-placa-trilhas path, .wx-placa-trilhas circle { transition: stroke 0.8s ease; }
.wx-placa-trilhas .wx-em-curto path,
.wx-placa-trilhas .wx-em-curto circle { stroke: #ef4444; filter: drop-shadow(0 0 6px #ef4444); animation: wx-curto-pisca 0.6s steps(1); }
@keyframes wx-curto-pisca {
  0% { stroke: #ffffff; }
  15% { stroke: #ef4444; }
  30% { stroke: #ffb020; }
  45%, 100% { stroke: #ef4444; }
}
.wx-curto { position: absolute; z-index: 2; width: 0; height: 0; pointer-events: none; }
.wx-curto span { position: absolute; left: 0; top: 0; }
.wx-curto-flash { width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: radial-gradient(circle, #fff 0, #ffd166 35%, rgb(239 68 68 / 60%) 60%, transparent 72%); }
.wx-curto-faisca { width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: linear-gradient(90deg, #fff, #ffb020); box-shadow: 0 0 6px #ffb020; }
.wx-curto-fumaca { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: rgb(120 130 150 / 55%); filter: blur(4px); opacity: 0; }

.wx-card-chip { position: relative; }
.wx-card-chip::before,
.wx-card-chip::after {
  content: "";
  position: absolute;
  top: 1.2rem;
  bottom: 1.2rem;
  width: 6px;
  background: repeating-linear-gradient(to bottom, #b8c4de 0 4px, transparent 4px 12px);
  transition: background 0.2s ease;
}
.wx-card-chip::before { left: -7px; }
.wx-card-chip::after { right: -7px; }
.wx-card-chip:hover::before,
.wx-card-chip:hover::after,
.wx-card-chip:focus-within::before,
.wx-card-chip:focus-within::after { background: repeating-linear-gradient(to bottom, var(--primary) 0 4px, transparent 4px 12px); }

/* Botão de ação como chave táctil: corpo afunda ao clicar, LED indica o estado
   (apagado, azul no hover, âmbar piscando enviando, verde no carrinho). */
.wx-btn-tatil {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.6rem 0.65rem 0.6rem 0.85rem;
  border: 1px solid #0b1730;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #23365c, #0f1f3d);
  color: #f4f6fb;
  font-size: 0.92rem;
  text-align: left;
  box-shadow: 0 4px 0 #0b1730, inset 0 1px 0 rgb(255 255 255 / 14%);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.wx-btn-tatil:active, .wx-btn-tatil.loading { transform: translateY(3px); box-shadow: 0 1px 0 #0b1730, inset 0 1px 0 rgb(255 255 255 / 8%); }
.wx-btn-rotulo { flex: 1; }
.wx-btn-led { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #3a4660; box-shadow: inset 0 0 2px #000; transition: background 0.2s ease, box-shadow 0.2s ease; }
.wx-btn-tatil:hover .wx-btn-led { background: #6fa8ff; box-shadow: 0 0 8px #6fa8ff; }
.wx-btn-tatil.loading .wx-btn-led { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; animation: wx-led-pisca 0.3s steps(1) infinite; }
.wx-btn-tatil.added .wx-btn-led { background: #4ade80; box-shadow: 0 0 10px #4ade80; animation: none; }
@keyframes wx-led-pisca { 50% { opacity: 0.25; } }
.wx-btn-tampa {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3b3f48, #111318 70%);
  box-shadow: 0 0 0 3px #8b97ad, 0 0 0 4px #0b1730, inset 0 -2px 3px rgb(0 0 0 / 60%);
  transition: transform 0.08s ease;
}
.wx-btn-tatil:active .wx-btn-tampa, .wx-btn-tatil.loading .wx-btn-tampa { transform: scale(0.9); }
.wx-card .added_to_cart { display: none; }
/* Em cartão estreito o botão fica só com "Adicionar", para não quebrar em duas linhas. */
.wx-card-chip { container-type: inline-size; }
@container (max-width: 240px) {
  .wx-btn-extra { display: none; }
}

.wx-fundo-fita { overflow: hidden; }
.wx-fundo-fita > svg:first-child { position: absolute; }
.wx-fita { position: absolute; left: -5%; width: 110%; height: 60px; overflow: hidden; }
.wx-fita-trilho { margin-left: -64px; width: 4000px; }
.wx-fita-trilho svg { display: block; }
.wx-fita-1 { top: -0.75rem; transform: rotate(-1.5deg); }
.wx-fita-2 { top: 48%; opacity: 0.6; }
.wx-fita-3 { bottom: 5%; transform: rotate(1.5deg); }
.wx-fita-corpo { fill: rgb(158 182 224 / 6%); }
#wx-trama-fita circle { fill: #0f1f3d; stroke: rgb(158 182 224 / 25%); }
.wx-fita-bolso { fill: none; stroke: rgb(158 182 224 / 18%); }
.wx-fita-peca { fill: rgb(158 182 224 / 28%); }
.wx-fita-ponta { fill: rgb(220 228 245 / 45%); }
.wx-fundo-x10 {
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: clamp(8rem, 22vw, 20rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgb(158 182 224 / 12%);
}

.wx-fita-carretel { position: absolute; right: -110px; bottom: calc(5% - 80px); width: 220px; height: 220px; }
.wx-fita-carretel svg { display: block; width: 100%; height: 100%; }
.wx-fita-carretel circle { fill: #0f1f3d; stroke: rgb(158 182 224 / 30%); stroke-width: 2; }
.wx-fita-carretel circle:first-child { fill: #13284d; }

.wx-fundo-esquema path { fill: none; stroke: rgb(26 58 107 / 16%); stroke-width: 1.5; stroke-linejoin: round; }
.wx-fundo-esquema circle { fill: rgb(26 58 107 / 22%); }
.wx-fundo-esquema text { fill: rgb(26 58 107 / 26%); font: 11px ui-monospace, Consolas, monospace; }
.wx-fundo-esquema .wx-esquema-led path { stroke: none; }
.wx-fundo-esquema .wx-esquema-carga { filter: drop-shadow(0 0 4px currentColor); }
@media (prefers-reduced-motion: reduce) {
  .wx-esquema-carga { display: none; }
}

.wx-fundo.wx-fundo-sinal { left: auto; right: -10rem; top: 50%; width: 44rem; height: 44rem; transform: translateY(-50%); }
.wx-sinal-anel { position: absolute; inset: 0; border: 1.5px solid rgb(26 58 107 / 24%); border-radius: 50%; }
.wx-sinal-anel:nth-child(1) { transform: scale(0.25); }
.wx-sinal-anel:nth-child(2) { transform: scale(0.5); }
.wx-sinal-anel:nth-child(3) { transform: scale(0.75); }
.wx-sinal-centro { position: absolute; left: 50%; top: 50%; width: 1rem; height: 1rem; margin: -0.5rem 0 0 -0.5rem; border-radius: 50%; background: rgb(26 58 107 / 25%); }

@media (max-width: 640px) {
  .wx-card-chip::before, .wx-card-chip::after { display: none; }
  .wx-fundo.wx-fundo-sinal { right: -18rem; top: auto; bottom: -14rem; transform: none; }
}

/* Carrinho: bloco do WooCommerce em painel branco sobre a placa, no padrão da loja. */
.wx-carrinho-pagina .wx-painel { padding: 1.5rem 1.75rem; }
.wx-carrinho-pagina .wp-block-woocommerce-cart { margin: 0; }
.wx-carrinho-pagina .wc-block-cart-items__row .wc-block-components-product-name { font-family: var(--fonte-display); font-size: 1.05rem; font-weight: 700; color: var(--foreground); }
.wx-carrinho-pagina .wc-block-components-product-price,
.wx-carrinho-pagina .wc-block-components-totals-item__value { font-family: var(--fonte-display); font-weight: 700; color: var(--primary); }
.wx-carrinho-pagina .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 1.5rem; }
.wx-carrinho-pagina .wc-block-components-quantity-selector { border-color: var(--border); border-radius: var(--radius); overflow: hidden; }
.wx-carrinho-pagina .wc-block-components-quantity-selector__button { background: var(--secondary); color: var(--primary); font-weight: 700; opacity: 1; }
.wx-carrinho-pagina .wc-block-components-quantity-selector__input { font-family: var(--fonte-display); font-weight: 700; }

/* "Finalizar compra" na mesma chave táctil dos produtos. */
.wx-carrinho-pagina .wc-block-cart__submit-button.wc-block-components-button {
  position: relative;
  min-height: 3.2rem;
  border: 1px solid #0b1730;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #23365c, #0f1f3d);
  color: #f4f6fb;
  font-weight: 700;
  box-shadow: 0 4px 0 #0b1730, inset 0 1px 0 rgb(255 255 255 / 14%);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.wx-carrinho-pagina .wc-block-cart__submit-button::before,
.wx-carrinho-pagina .wc-block-cart__submit-button::after {
  content: "";
  position: absolute;
  top: 50%;
  border-radius: 50%;
  transform: translateY(-50%);
}
.wx-carrinho-pagina .wc-block-cart__submit-button::before { left: 1rem; width: 0.6rem; height: 0.6rem; background: #4ade80; box-shadow: 0 0 10px #4ade80; }
.wx-carrinho-pagina .wc-block-cart__submit-button::after {
  right: 0.7rem;
  width: 1.8rem;
  height: 1.8rem;
  background: radial-gradient(circle at 40% 35%, #3b3f48, #111318 70%);
  box-shadow: 0 0 0 3px #8b97ad, 0 0 0 4px #0b1730, inset 0 -2px 3px rgb(0 0 0 / 60%);
}
.wx-carrinho-pagina .wc-block-cart__submit-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #0b1730; }

.wx-carrinho-atacado { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1.25rem; }
.wx-carrinho-atacado h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.wx-carrinho-atacado .wx-muted { margin-top: 0.4rem; max-width: 36rem; }
.wx-carrinho-acoes { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; flex: none; }
@media (max-width: 760px) {
  .wx-carrinho-atacado { flex-direction: column; align-items: stretch; }
  .wx-carrinho-acoes .wx-btn { width: 100%; text-align: center; }
}

/* Blog: véu claro atrás do texto da capa, para o esquemático animado não brigar com a leitura. */
.wx-capa-blog .wx-veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(228 234 247 / 96%) 0, rgb(228 234 247 / 88%) 45%, rgb(228 234 247 / 20%) 80%, transparent);
  pointer-events: none;
}
.wx-capa-blog .wx-lead { color: #46536e; }
.wx-capa-blog .wx-artigo-meta { color: #46536e; }

.wx-posts { margin-top: 1.75rem; }
.wx-post { padding: 0; overflow: hidden; }
.wx-post-capa { aspect-ratio: 16 / 9; overflow: hidden; background: #e4eaf7; }
.wx-post-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wx-post-capa-vazia {
  display: grid;
  place-items: center;
  height: 100%;
  font: 700 1.1rem var(--fonte-display);
  color: var(--primary);
  background-color: #e4eaf7;
  background-image:
    linear-gradient(rgb(26 58 107 / 8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(26 58 107 / 8%) 1px, transparent 1px);
  background-size: 20px 20px;
}
.wx-post-texto { display: flex; flex: 1; flex-direction: column; gap: 0.5rem; padding: 1.3rem 1.4rem 1.4rem; }
.wx-post h2 { font-size: 1.2rem; }
.wx-post-meta { font-size: 0.82rem; color: var(--muted); }
/* O post mais novo ocupa a linha inteira, com a capa ao lado do texto. */
.wx-post-destaque { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.wx-post-destaque .wx-post-capa { aspect-ratio: auto; min-height: 16rem; }
.wx-post-destaque .wx-post-texto { justify-content: center; padding: 2rem; }
.wx-post-destaque h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

/* Post: texto maior para leitura longa e um próximo passo no fim. */
.wx-artigo .wx-prose { font-size: 1.1rem; line-height: 1.75; }
.wx-artigo .wx-prose h2 { margin-top: 2rem; font-size: 1.6rem; }
.wx-artigo-fim { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 2.5rem; }
.wx-artigo-fim h2 { font-size: 1.35rem; }
.wx-artigo-fim .wx-muted { margin-top: 0.35rem; }
.wx-artigo-fim-acoes { display: flex; flex-direction: column; gap: 0.6rem; flex: none; }
.wx-capa-blog .wx-caminho a { color: var(--primary); }

@media (max-width: 760px) {
  .wx-post-destaque { grid-template-columns: 1fr; }
  .wx-post-destaque .wx-post-capa { min-height: 11rem; }
  .wx-artigo-fim { flex-direction: column; align-items: stretch; }
  .wx-artigo-fim-acoes .wx-btn { width: 100%; text-align: center; }
}

/* Desempenho: no celular o brilho das trilhas do hero sai, porque repintar o filtro a cada quadro custa bateria. */
@media (max-width: 760px) {
  .wx-trilhas-pulso, .wx-peca-luz { filter: none; }
}
/* Blog e contato da home ficam fora da primeira tela: o navegador só monta quando a pessoa chega perto. */
.home #blog, .home #contato { content-visibility: auto; contain-intrinsic-size: auto 760px; }

/* Checkout: bloco do WooCommerce em painel sobre a placa, no padrão do carrinho. */
.wx-checkout-pagina .wx-painel { padding: 1.75rem; }
.wx-checkout-pagina .wp-block-woocommerce-checkout { margin: 0; padding-top: 0; }
.wx-checkout-pagina .wc-block-components-checkout-step__title { font: 700 1.2rem var(--fonte-display); color: var(--foreground); }
.wx-checkout-pagina .wc-block-components-text-input input,
.wx-checkout-pagina .wc-blocks-components-select__select,
.wx-checkout-pagina .wc-block-components-textarea { border-color: #c2cade; border-radius: 0.55rem; background: #f4f6fb; }
.wx-checkout-pagina .wc-block-components-text-input input:focus,
.wx-checkout-pagina .wc-blocks-components-select__select:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); background: #fff; }
.wx-checkout-pagina .wc-block-components-address-card,
.wx-checkout-pagina .wc-block-components-radio-control-accordion-option { border-radius: 0.6rem; }
.wx-checkout-pagina .wc-block-components-radio-control__option-checked,
.wx-checkout-pagina .wc-block-components-radio-control-accordion-option--checked-option-highlighted { box-shadow: inset 0 0 0 2px var(--primary); }
.wx-checkout-pagina .wc-block-components-sidebar .wc-block-components-panel,
.wx-checkout-pagina .wp-block-woocommerce-checkout-order-summary-block { border-color: var(--border); border-radius: 0.7rem; }
.wx-checkout-pagina .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font: 700 1.5rem var(--fonte-display); color: var(--primary); }
.wx-checkout-pagina .wc-block-components-product-name { font-family: var(--fonte-display); font-weight: 700; }

/* "Finalizar pedido" na chave táctil: LED verde aceso e tampa redonda. */
.wx-checkout-pagina .wc-block-components-checkout-place-order-button {
  position: relative;
  min-height: 3.3rem;
  border: 1px solid #0b1730;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #23365c, #0f1f3d);
  color: #f4f6fb;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 4px 0 #0b1730, inset 0 1px 0 rgb(255 255 255 / 14%);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.wx-checkout-pagina .wc-block-components-checkout-place-order-button::before,
.wx-checkout-pagina .wc-block-components-checkout-place-order-button::after {
  content: "";
  position: absolute;
  top: 50%;
  border-radius: 50%;
  transform: translateY(-50%);
}
.wx-checkout-pagina .wc-block-components-checkout-place-order-button::before { left: 1rem; width: 0.6rem; height: 0.6rem; background: #4ade80; box-shadow: 0 0 10px #4ade80; }
.wx-checkout-pagina .wc-block-components-checkout-place-order-button::after {
  right: 0.7rem;
  width: 1.9rem;
  height: 1.9rem;
  background: radial-gradient(circle at 40% 35%, #3b3f48, #111318 70%);
  box-shadow: 0 0 0 3px #8b97ad, 0 0 0 4px #0b1730, inset 0 -2px 3px rgb(0 0 0 / 60%);
}
.wx-checkout-pagina .wc-block-components-checkout-place-order-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #0b1730; }
.wx-checkout-pagina .wc-block-components-checkout-place-order-button:disabled::before { background: #f59e0b; box-shadow: 0 0 10px #f59e0b; }

.wx-checkout-ajuda { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding: 1.1rem 1.5rem; }
.wx-checkout-ajuda .wx-btn { flex: none; }
@media (max-width: 760px) {
  .wx-checkout-pagina .wx-painel { padding: 1.1rem; }
  .wx-checkout-ajuda { flex-direction: column; align-items: stretch; text-align: center; }
}

/* Avisos: o tema usa a borda colorida à esquerda; o ícone do WooCommerce ficava em cima do texto. */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }

/* Pedido recebido: a capa já agradece, então a frase repetida sai; os dados viram cartões. */
.wx-checkout-pagina .woocommerce-thankyou-order-received { display: none; }
.wx-checkout-pagina .woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
/* Clearfix do WooCommerce viraria item da grade e empurraria o primeiro cartão. */
.wx-checkout-pagina ul.woocommerce-order-overview.order_details::before,
.wx-checkout-pagina ul.woocommerce-order-overview.order_details::after { display: none; }
/* ul.order_details li tira a borda do último item e põe borda tracejada nos outros: o seletor mais forte desfaz. */
.wx-checkout-pagina ul.woocommerce-order-overview.order_details li {
  float: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.wx-checkout-pagina .woocommerce-order-overview li strong { font: 700 1.15rem var(--fonte-display); letter-spacing: 0; text-transform: none; color: var(--foreground); }
.wx-checkout-pagina .woocommerce-order-overview__total strong { color: var(--primary); }

.wx-pedido-passos { margin-bottom: 2rem; padding: 1.25rem; border-radius: 0.6rem; background: var(--secondary); }
.wx-pedido-passos .wx-acoes { margin-top: 1rem; }
.wx-etapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: etapa; }
.wx-etapas li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 700; color: var(--muted); text-align: center; }
/* Trilha entre as etapas: azul até a etapa atual. */
.wx-etapas li::after { content: ""; position: absolute; top: 0.5rem; left: 50%; width: 100%; height: 3px; background: #c2cade; z-index: 0; }
.wx-etapas li:last-child::after { display: none; }
.wx-etapas li.is-feita::after { background: var(--primary); }
.wx-etapas li::before { content: ""; position: relative; z-index: 1; width: 1rem; height: 1rem; border-radius: 50%; background: #c2cade; border: 3px solid var(--secondary); }
.wx-etapas li.is-feita::before { background: var(--primary); }
.wx-etapas li.is-atual { color: var(--foreground); }
.wx-etapas li.is-atual::before { background: #f59e0b; box-shadow: 0 0 10px #f59e0b; }

.wx-checkout-pagina .woocommerce-order-details,
.wx-checkout-pagina .woocommerce-customer-details { margin-top: 1.5rem; }
.wx-checkout-pagina .woocommerce-order-details__title,
.wx-checkout-pagina .woocommerce-column__title { font-size: 1.3rem; margin-bottom: 0.75rem; }
.wx-checkout-pagina table.shop_table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: 0.6rem; }
.wx-checkout-pagina table.shop_table th,
.wx-checkout-pagina table.shop_table td { padding: 0.8rem 1rem; border-top: 1px solid var(--border); text-align: left; }
.wx-checkout-pagina table.shop_table thead th { border-top: 0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.wx-checkout-pagina table.shop_table tfoot tr:last-child td { font: 700 1.2rem var(--fonte-display); color: var(--primary); }
.wx-checkout-pagina .woocommerce-customer-details .col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.wx-checkout-pagina .woocommerce-customer-details .col2-set::before,
.wx-checkout-pagina .woocommerce-customer-details .col2-set::after { display: none; }
.wx-checkout-pagina .woocommerce-customer-details .woocommerce-column { float: none; width: auto; }
.wx-checkout-pagina .woocommerce-customer-details address { padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 0.6rem; font-style: normal; line-height: 1.6; }

@media (max-width: 760px) {
  .wx-etapas li { font-size: 0.75rem; }
  .wx-checkout-pagina .woocommerce-customer-details .col2-set { grid-template-columns: 1fr; }
}