/* =========================================================
   Policoating — folha de estilo principal
   ========================================================= */
:root {
  --azul: #1558d6;
  --azul-escuro: #0d3fa6;
  --azul-profundo: #0b1424;
  --azul-claro: #eaf1fe;
  --preto: #111418;
  --destaque: #f7c600;
  --whats: #25d366;
  --whats-escuro: #1da851;
  --texto: #1d2733;
  --texto-suave: #5a6775;
  --borda: #dfe5ec;
  --fundo: #ffffff;
  --fundo-alt: #f4f7fa;
  --raio: 12px;
  --sombra: 0 6px 24px rgba(10, 31, 58, 0.08);
  --sombra-forte: 0 14px 40px rgba(10, 31, 58, 0.16);
  --largura: 1200px;
  --arco-iris: linear-gradient(90deg, #3cb043, #1558d6, #f7c600, #f47b20, #e53935);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--azul); text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 20px; }
.secao { padding: 80px 0; }
.secao-alt { background: var(--fundo-alt); }
.secao-titulo { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.secao-titulo .rotulo {
  display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--azul); margin-bottom: 10px;
}
.secao-titulo h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.2; margin-bottom: 14px; color: var(--azul-profundo); }
.secao-titulo p { color: var(--texto-suave); font-size: 1.05rem; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; border: 2px solid transparent;
  font-weight: 600; font-size: 0.97rem; transition: all 0.2s ease; white-space: nowrap;
}
.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-escuro); transform: translateY(-1px); }
.btn-contorno { border-color: #fff; color: #fff; }
.btn-contorno:hover { background: #fff; color: var(--azul); }
.btn-contorno-azul { border-color: var(--azul); color: var(--azul); background: transparent; }
.btn-contorno-azul:hover { background: var(--azul); color: #fff; }
.btn-whats { background: var(--whats); color: #fff; }
.btn-whats:hover { background: var(--whats-escuro); }
.btn-bloco { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---------- Topo ---------- */
.barra-topo { background: var(--azul-profundo); color: #c9d6e5; font-size: 0.82rem; }
.barra-topo .container { display: flex; justify-content: space-between; gap: 16px; padding-top: 8px; padding-bottom: 8px; }
.barra-topo a { color: #fff; }
.barra-topo span { display: inline-flex; gap: 6px; align-items: center; }

.cabecalho {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--borda);
}
.cabecalho::after { content: ""; display: block; height: 3px; background: var(--arco-iris); }
.cabecalho .container { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 20px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--preto); line-height: 1; }
.logo-marca { width: 42px; height: 42px; flex-shrink: 0; }
.logo-marca svg { width: 100%; height: 100%; }
.logo-texto { display: flex; flex-direction: column; gap: 4px; }
.logo-texto strong { font-size: 1.45rem; font-weight: 800; font-style: italic; letter-spacing: -0.02em; text-transform: uppercase; }
.logo-texto strong span { color: var(--azul); }
.logo small { display: block; font-size: 0.58rem; font-weight: 600; color: var(--texto-suave); letter-spacing: 0.22em; text-transform: uppercase; }

.menu { display: flex; align-items: center; gap: 4px; list-style: none; }
.menu a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--texto); font-weight: 500; font-size: 0.95rem; }
.menu a:hover, .menu a.ativo { color: var(--azul); background: var(--azul-claro); }

.acoes-topo { display: flex; align-items: center; gap: 10px; }
.btn-carrinho {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-radius: 999px; background: var(--azul); color: #fff; border: 0; font-weight: 600;
}
.btn-carrinho:hover { background: var(--azul-escuro); }
.contador {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--destaque);
  color: var(--azul-profundo); font-size: 0.75rem; font-weight: 800; display: grid; place-items: center;
}
.contador.pulsar { animation: pulsar 0.5s ease; }
@keyframes pulsar { 50% { transform: scale(1.35); } }

.btn-menu { display: none; background: none; border: 0; padding: 8px; }
.btn-menu span { display: block; width: 24px; height: 2px; background: var(--texto); margin: 5px 0; transition: 0.2s; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--preto);
  background: radial-gradient(900px 500px at 90% 10%, rgba(21, 88, 214, 0.14), transparent 60%),
              radial-gradient(700px 400px at 0% 100%, rgba(247, 198, 0, 0.10), transparent 60%),
              linear-gradient(180deg, #ffffff 0%, #f1f5fc 100%);
}
.hero .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.hero .sobretitulo { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 18px; }
.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.08; margin-bottom: 20px; letter-spacing: -0.02em; text-transform: uppercase; font-weight: 800; }
.hero h1 em { font-style: normal; color: var(--azul); }
.hero p { font-size: 1.1rem; color: var(--texto-suave); max-width: 560px; margin-bottom: 30px; }
.hero-botoes { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-selos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; max-width: 600px; }
.hero-selos div { text-align: center; font-size: 0.78rem; line-height: 1.3; color: var(--texto); }
.hero-selos .ic {
  width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%; border: 2px solid var(--azul);
  display: grid; place-items: center; background: #fff;
}
.hero-selos .ic svg { width: 26px; height: 26px; stroke: var(--azul); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-selos strong { display: block; color: var(--azul); font-size: 0.8rem; text-transform: uppercase; }
.hero-arte { position: relative; height: 440px; }
.hero-arte .po { position: absolute; border-radius: 50%; filter: blur(2px); }
.hero-arte .po-azul { width: 60%; height: 45%; right: 0; top: 0; background: radial-gradient(closest-side, rgba(21,88,214,.55), rgba(21,88,214,.15) 60%, transparent); }
.hero-arte .po-amarelo { width: 40%; height: 26%; left: 0; bottom: 4%; background: radial-gradient(closest-side, rgba(247,198,0,.8), rgba(247,198,0,.2) 70%, transparent); }
.hero-arte .po-laranja { width: 38%; height: 24%; left: 18%; bottom: 0; background: radial-gradient(closest-side, rgba(244,123,32,.8), rgba(244,123,32,.2) 70%, transparent); }
.hero-arte .po-verde { width: 30%; height: 20%; left: -4%; bottom: -4%; background: radial-gradient(closest-side, rgba(60,176,67,.8), rgba(60,176,67,.2) 70%, transparent); }
.hero-arte .caixa-hero { position: absolute; filter: drop-shadow(0 18px 26px rgba(11, 20, 36, 0.25)); }
.hero-arte .caixa-hero:nth-of-type(1) { width: 52%; left: 8%; bottom: 8%; z-index: 2; }
.hero-arte .caixa-hero:nth-of-type(2) { width: 52%; left: 44%; bottom: 8%; z-index: 1; }
.hero-arte .caixa-hero:nth-of-type(3) { width: 52%; left: 26%; bottom: 44%; z-index: 3; animation: flutuar 6s ease-in-out infinite; }
@keyframes flutuar { 50% { transform: translateY(-12px); } }
.selo {
  position: absolute; top: 2%; right: 2%; z-index: 4; width: 140px; height: 140px; border-radius: 50%; background: #fff;
  border: 3px solid var(--azul); box-shadow: var(--sombra); display: grid; place-items: center; text-align: center;
  font-size: 0.72rem; font-weight: 800; line-height: 1.25; text-transform: uppercase; color: var(--preto); padding: 14px;
}
.selo b { color: var(--azul); font-size: 0.9rem; display: block; }
.selo .estrelas { color: var(--azul); letter-spacing: 3px; font-size: 0.7rem; }

/* Faixa azul de valores (como no banner) */
.faixa-valores { background: linear-gradient(90deg, var(--azul-escuro), var(--azul)); color: #fff; }
.faixa-valores .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.faixa-valores .valor { display: flex; align-items: center; gap: 12px; padding: 22px 18px; }
.faixa-valores .valor + .valor { border-left: 1px solid rgba(255, 255, 255, 0.25); }
.faixa-valores svg { width: 34px; height: 34px; flex-shrink: 0; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.faixa-valores strong { display: block; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.02em; }
.faixa-valores span { font-size: 0.78rem; text-transform: uppercase; color: #d6e3fb; }

/* Processo */
.processo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: passo; }
.passo { position: relative; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 28px 22px; }
.passo::before {
  counter-increment: passo; content: counter(passo); position: absolute; top: -16px; left: 22px; width: 34px; height: 34px;
  border-radius: 50%; background: var(--azul); color: #fff; font-weight: 800; display: grid; place-items: center;
}
.passo h3 { color: var(--azul-profundo); margin: 8px 0 6px; font-size: 1.05rem; }
.passo p { color: var(--texto-suave); font-size: 0.92rem; }

/* ---------- Categorias ---------- */
.grade-categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.cartao-categoria {
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 26px 20px; text-align: center;
  transition: all 0.25s; color: var(--texto); position: relative; overflow: hidden;
}
.cartao-categoria::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--arco-iris); transform: scaleX(0); transition: transform 0.3s; transform-origin: left; }
.cartao-categoria:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: transparent; }
.cartao-categoria:hover::before { transform: scaleX(1); }
.cartao-categoria .icone { font-size: 2.3rem; margin-bottom: 10px; }
.cartao-categoria h3 { font-size: 1.05rem; color: var(--azul-profundo); margin-bottom: 6px; }
.cartao-categoria p { font-size: 0.86rem; color: var(--texto-suave); }

/* ---------- Produtos ---------- */
.grade-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.cartao-produto {
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden;
  display: flex; flex-direction: column; transition: all 0.25s;
}
.cartao-produto:hover { box-shadow: var(--sombra-forte); transform: translateY(-3px); }
.cartao-produto .vitrine {
  position: relative; height: 210px; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--fundo-alt), #fff); cursor: pointer;
}
.cartao-produto .vitrine svg { height: 170px; width: auto; transition: transform 0.3s; }
.cartao-produto:hover .vitrine svg { transform: scale(1.05) rotate(-2deg); }
.etiqueta {
  position: absolute; top: 12px; left: 12px; background: var(--azul-claro); color: var(--azul);
  font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em;
}
.cartao-produto .info { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.cartao-produto .linha { font-size: 0.78rem; color: var(--texto-suave); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.cartao-produto h3 { font-size: 1.08rem; margin: 4px 0 8px; color: var(--azul-profundo); line-height: 1.3; }
.cartao-produto .desc { font-size: 0.88rem; color: var(--texto-suave); margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.amostras { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.amostra { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--borda); }
.cartao-produto .rodape-cartao { margin-top: auto; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.preco { font-weight: 700; color: var(--azul-profundo); font-size: 0.95rem; }
.preco small { display: block; font-weight: 500; color: var(--texto-suave); font-size: 0.75rem; }
.btn-add { padding: 10px 16px; font-size: 0.88rem; }

.centro { text-align: center; margin-top: 40px; }

/* ---------- Catálogo (filtros) ---------- */
.cabecalho-pagina {
  background: linear-gradient(135deg, var(--azul-profundo), var(--azul)); color: #fff; padding: 64px 0 56px; position: relative;
}
.cabecalho-pagina::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--arco-iris); }
.cabecalho-pagina h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.15; margin-bottom: 10px; }
.cabecalho-pagina p { color: #cfe0f1; max-width: 640px; font-size: 1.05rem; }
.migalhas { font-size: 0.85rem; color: #a9c2dc; margin-bottom: 14px; }
.migalhas a { color: #fff; }

.barra-filtros { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--borda); background: #fff;
  font-size: 0.9rem; font-weight: 500; color: var(--texto); transition: 0.2s;
}
.chip:hover { border-color: var(--azul); color: var(--azul); }
.chip.ativo { background: var(--azul); color: #fff; border-color: var(--azul); }
.busca { position: relative; min-width: 260px; flex: 0 1 320px; }
.busca input {
  width: 100%; padding: 11px 16px 11px 40px; border-radius: 999px; border: 1px solid var(--borda); background: #fff;
}
.busca input:focus { outline: 2px solid var(--azul); border-color: transparent; }
.busca::before { content: "🔍"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 0.9rem; opacity: 0.6; }
.vazio { text-align: center; padding: 60px 20px; color: var(--texto-suave); grid-column: 1 / -1; }

/* ---------- Modal de produto ---------- */
.sobreposicao {
  position: fixed; inset: 0; background: rgba(10, 31, 58, 0.55); z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.sobreposicao.aberto { opacity: 1; pointer-events: auto; }
.modal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(0.98); z-index: 100;
  width: min(920px, calc(100% - 32px)); max-height: calc(100vh - 40px); overflow: auto;
  background: #fff; border-radius: 18px; box-shadow: var(--sombra-forte); opacity: 0; pointer-events: none; transition: all 0.25s;
}
.modal.aberto { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.modal-corpo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.modal-vitrine { background: var(--fundo-alt); display: grid; place-items: center; padding: 40px; min-height: 380px; }
.modal-vitrine svg { height: 280px; width: auto; }
.modal-info { padding: 36px 34px; }
.modal-info h2 { color: var(--azul-profundo); font-size: 1.6rem; line-height: 1.2; margin: 6px 0 12px; }
.modal-info p.desc { color: var(--texto-suave); margin-bottom: 18px; }
.ficha { list-style: none; font-size: 0.88rem; margin-bottom: 20px; border-top: 1px solid var(--borda); }
.ficha li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borda); }
.ficha li span:first-child { color: var(--texto-suave); }
.ficha li span:first-child { flex-shrink: 0; }
.ficha li span:last-child { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.campo-titulo { font-size: 0.85rem; font-weight: 700; margin-bottom: 8px; color: var(--azul-profundo); }
.campo-titulo span { font-weight: 500; color: var(--texto-suave); }
.seletor-cores { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.seletor-cores button {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--borda); transition: 0.15s;
}
.seletor-cores button.ativo { box-shadow: 0 0 0 2px var(--azul); transform: scale(1.1); }
.seletor-embalagem { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.seletor-embalagem button { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--borda); background: #fff; font-size: 0.88rem; font-weight: 600; }
.seletor-embalagem button.ativo { border-color: var(--azul); background: var(--azul-claro); color: var(--azul); }
.linha-compra { display: flex; gap: 12px; align-items: center; }
.quantidade { display: inline-flex; align-items: center; border: 1px solid var(--borda); border-radius: 999px; overflow: hidden; }
.quantidade button { width: 38px; height: 42px; border: 0; background: #fff; font-size: 1.1rem; color: var(--azul); }
.quantidade button:hover { background: var(--azul-claro); }
.quantidade input { width: 44px; border: 0; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.quantidade input::-webkit-outer-spin-button, .quantidade input::-webkit-inner-spin-button { -webkit-appearance: none; }
.fechar {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: #fff; box-shadow: var(--sombra); font-size: 1.3rem; line-height: 1; z-index: 2;
}

/* ---------- Carrinho lateral ---------- */
.carrinho {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 100%); background: #fff; z-index: 100;
  transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; box-shadow: var(--sombra-forte);
}
.carrinho.aberto { transform: translateX(0); }
.carrinho-topo { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; border-bottom: 1px solid var(--borda); }
.carrinho-topo h3 { color: var(--azul-profundo); }
.carrinho-topo .fechar { position: static; box-shadow: none; background: var(--fundo-alt); }
.carrinho-itens { flex: 1; overflow: auto; padding: 10px 22px; }
.item-carrinho { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--borda); align-items: center; }
.item-carrinho svg { width: 56px; height: 64px; }
.item-carrinho h4 { font-size: 0.95rem; color: var(--azul-profundo); line-height: 1.3; }
.item-carrinho .detalhes { font-size: 0.8rem; color: var(--texto-suave); display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; flex-wrap: wrap; }
.item-carrinho .detalhes i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px var(--borda); }
.item-carrinho .quantidade button { width: 30px; height: 30px; }
.item-carrinho .quantidade input { width: 32px; font-size: 0.9rem; }
.remover { background: none; border: 0; color: #c62828; font-size: 0.8rem; font-weight: 600; align-self: start; }
.carrinho-vazio { text-align: center; color: var(--texto-suave); padding: 60px 10px; }
.carrinho-vazio .icone { font-size: 3rem; margin-bottom: 10px; }
.carrinho-rodape { padding: 18px 22px 22px; border-top: 1px solid var(--borda); background: var(--fundo-alt); }
.carrinho-rodape .resumo { display: flex; justify-content: space-between; font-size: 0.92rem; margin-bottom: 12px; }
.carrinho-rodape .campos { display: grid; gap: 8px; margin-bottom: 14px; }
.carrinho-rodape input, .carrinho-rodape textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; font-size: 0.9rem; resize: vertical;
}
.carrinho-rodape .aviso { font-size: 0.76rem; color: var(--texto-suave); text-align: center; margin-top: 10px; }
.limpar { background: none; border: 0; color: var(--texto-suave); font-size: 0.82rem; text-decoration: underline; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 120px); background: var(--azul-profundo); color: #fff;
  padding: 14px 22px; border-radius: 14px; z-index: 200; width: max-content; box-shadow: var(--sombra-forte); transition: transform 0.3s; font-size: 0.92rem;
  display: flex; gap: 12px; align-items: center; max-width: calc(100% - 32px); opacity: 0; visibility: hidden;
}
.toast.visivel { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast button { background: none; border: 0; color: var(--destaque); font-weight: 700; }

/* ---------- WhatsApp flutuante ---------- */
.whats-flutuante {
  position: fixed; right: 22px; bottom: 22px; width: 58px; height: 58px; border-radius: 50%; background: var(--whats);
  display: grid; place-items: center; z-index: 60; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45); transition: transform 0.2s;
}
.whats-flutuante:hover { transform: scale(1.08); }
.whats-flutuante svg { width: 30px; height: 30px; fill: #fff; }

/* ---------- Sobre / História ---------- */
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.duas-colunas h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--azul-profundo); line-height: 1.2; margin-bottom: 18px; }
.duas-colunas p { color: var(--texto-suave); margin-bottom: 16px; }
.painel-cores {
  border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 110px; box-shadow: var(--sombra-forte);
}
.painel-cores div { display: flex; align-items: flex-end; padding: 10px; font-size: 0.72rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.painel-cores div:nth-child(1) { grid-column: span 2; grid-row: span 2; font-size: 1rem; }

.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.numero { text-align: center; padding: 30px 16px; border-radius: var(--raio); background: #fff; border: 1px solid var(--borda); }
.numero strong { display: block; font-size: 2.4rem; color: var(--azul); line-height: 1.1; }
.numero > span { color: var(--texto-suave); font-size: 0.92rem; }
.faixa-numeros { background: var(--preto); }
.faixa-numeros .numero { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
.faixa-numeros .numero strong { color: #fff; }
.faixa-numeros .numero > span { color: #a9c2dc; }

.linha-tempo { position: relative; max-width: 900px; margin: 0 auto; }
.linha-tempo::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: var(--arco-iris); transform: translateX(-50%); border-radius: 3px; }
.marco { position: relative; width: 50%; padding: 0 44px 44px; }
.marco:nth-child(odd) { left: 0; text-align: right; }
.marco:nth-child(even) { left: 50%; }
.marco::before {
  content: ""; position: absolute; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--azul);
}
.marco:nth-child(odd)::before { right: -9px; }
.marco:nth-child(even)::before { left: -9px; }
.marco .ano { font-size: 1.5rem; font-weight: 800; color: var(--azul); }
.marco h3 { color: var(--azul-profundo); margin: 2px 0 6px; font-size: 1.1rem; }
.marco p { color: var(--texto-suave); font-size: 0.93rem; }

.grade-valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cartao-valor { background: #fff; border-radius: var(--raio); padding: 32px 28px; border: 1px solid var(--borda); }
.cartao-valor .icone { width: 54px; height: 54px; border-radius: 14px; background: var(--azul-claro); display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 16px; }
.cartao-valor h3 { color: var(--azul-profundo); margin-bottom: 8px; }
.cartao-valor p, .cartao-valor li { color: var(--texto-suave); font-size: 0.95rem; }
.cartao-valor ul { padding-left: 18px; }

/* ---------- Recursos ---------- */
.grade-recursos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.cartao-recurso {
  background: #fff; border-radius: var(--raio); padding: 28px; border: 1px solid var(--borda); color: var(--texto); transition: 0.25s; display: block;
}
.cartao-recurso:hover { box-shadow: var(--sombra); transform: translateY(-3px); }
.cartao-recurso .icone { font-size: 2rem; margin-bottom: 12px; }
.cartao-recurso h3 { color: var(--azul-profundo); margin-bottom: 6px; font-size: 1.08rem; }
.cartao-recurso p { color: var(--texto-suave); font-size: 0.92rem; margin-bottom: 12px; }
.cartao-recurso .link { font-weight: 600; font-size: 0.9rem; color: var(--azul); }

.ferramenta { background: #fff; border-radius: 18px; border: 1px solid var(--borda); box-shadow: var(--sombra); overflow: hidden; }
.ferramenta-corpo { display: grid; grid-template-columns: 1fr 1fr; }
.ferramenta-form { padding: 36px; }
.ferramenta-form h3 { color: var(--azul-profundo); font-size: 1.4rem; margin-bottom: 6px; }
.ferramenta-form > p { color: var(--texto-suave); margin-bottom: 22px; font-size: 0.95rem; }
.grupo { margin-bottom: 16px; }
.grupo label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--azul-profundo); }
.grupo input, .grupo select { width: 100%; padding: 11px 14px; border-radius: 8px; border: 1px solid var(--borda); background: #fff; }
.grupo input:focus, .grupo select:focus { outline: 2px solid var(--azul); border-color: transparent; }
.grupo-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.resultado { background: linear-gradient(135deg, var(--azul-profundo), var(--azul)); color: #fff; padding: 36px; display: flex; flex-direction: column; justify-content: center; }
.resultado .grande { font-size: 3.2rem; font-weight: 800; line-height: 1; margin: 8px 0; }
.resultado p { color: #cfe0f1; }
.resultado ul { list-style: none; margin: 18px 0 22px; }
.resultado li { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); display: flex; justify-content: space-between; }

.simulador { display: grid; grid-template-columns: 1.3fr 0.7fr; }
.ambiente { background: #eef1f4; padding: 24px; display: grid; place-items: center; }
.ambiente svg { width: 100%; height: auto; border-radius: 12px; }
.ambiente #parede { transition: fill 0.35s; }
.paleta-simulador { padding: 30px; }
.paleta-simulador h3 { color: var(--azul-profundo); margin-bottom: 6px; }
.paleta-simulador > p { color: var(--texto-suave); font-size: 0.92rem; margin-bottom: 18px; }
.grade-paleta { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 18px; }
.grade-paleta button { aspect-ratio: 1; border-radius: 10px; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--borda); transition: 0.15s; }
.grade-paleta button:hover { transform: scale(1.08); }
.grade-paleta button.ativo { box-shadow: 0 0 0 2px var(--azul); }
.cor-escolhida { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: var(--fundo-alt); margin-bottom: 16px; }
.cor-escolhida i { width: 40px; height: 40px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.cor-escolhida strong { display: block; color: var(--azul-profundo); }
.cor-escolhida span { font-size: 0.82rem; color: var(--texto-suave); }

.lista-downloads { display: grid; gap: 12px; }
.download {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: #fff;
  border: 1px solid var(--borda); border-radius: 10px; color: var(--texto);
}
.download:hover { border-color: var(--azul); }
.download strong { color: var(--azul-profundo); display: block; }
.download span { font-size: 0.85rem; color: var(--texto-suave); }
.download .tipo { background: var(--azul-claro); color: var(--azul); font-weight: 700; font-size: 0.75rem; padding: 6px 10px; border-radius: 6px; }

.faq details { background: #fff; border: 1px solid var(--borda); border-radius: 10px; margin-bottom: 10px; }
.faq summary { padding: 18px 22px; cursor: pointer; font-weight: 600; color: var(--azul-profundo); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; font-size: 1.3rem; color: var(--azul); line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 22px 18px; color: var(--texto-suave); }

/* ---------- CTA ---------- */
.cta {
  background: linear-gradient(120deg, var(--azul) 0%, var(--azul-escuro) 100%); color: #fff; border-radius: 20px;
  padding: 50px; display: flex; align-items: center; justify-content: space-between; gap: 30px; position: relative; overflow: hidden;
}
.cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--arco-iris); }
.cta h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin-bottom: 8px; }
.cta p { color: #cfe0f1; }

/* ---------- Contato ---------- */
.grade-contato { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.cartao-contato { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 26px; }
.cartao-contato .icone { font-size: 1.6rem; margin-bottom: 10px; }
.cartao-contato h3 { color: var(--azul-profundo); font-size: 1rem; margin-bottom: 4px; }
.cartao-contato p, .cartao-contato a { color: var(--texto-suave); font-size: 0.93rem; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--preto); color: #a9bcd0; padding: 64px 0 0; font-size: 0.92rem; }
.rodape-grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; }
.rodape .logo { color: #fff; margin-bottom: 14px; }
.rodape .logo small { color: #a9bcd0; }
.rodape .logo-texto strong span { color: #4d8bff; }
.rodape h4 { color: #fff; font-size: 0.95rem; margin-bottom: 14px; }
.rodape ul { list-style: none; }
.rodape li { margin-bottom: 8px; }
.rodape a { color: #a9bcd0; }
.rodape a:hover { color: #fff; }
.redes { display: flex; gap: 10px; margin-top: 16px; }
.redes a {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); display: grid; place-items: center;
  color: #fff; font-size: 0.8rem; font-weight: 700;
}
.redes a:hover { background: var(--azul); }
.rodape-base { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 20px 0; font-size: 0.82rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rodape-faixa { height: 4px; background: var(--arco-iris); }

/* ---------- Link da conta no cabeçalho ---------- */
.link-conta {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--borda);
  color: var(--texto); font-weight: 600; font-size: 0.92rem; max-width: 170px; white-space: nowrap;
}
.link-conta .texto { overflow: hidden; text-overflow: ellipsis; }
.link-conta:hover { border-color: var(--azul); color: var(--azul); }
.link-conta.logado { border-color: var(--azul); color: var(--azul); background: var(--azul-claro); }

/* ---------- Carrinho: dados do cliente ---------- */
.cliente-box { background: #fff; border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; font-size: 0.86rem; display: grid; gap: 2px; }
.cliente-box span { color: var(--texto-suave); font-size: 0.76rem; }
.cliente-box strong { color: var(--azul-profundo); }
.cliente-box small { color: var(--texto-suave); }
.cliente-box a { font-weight: 600; font-size: 0.82rem; }
.cliente-box.alerta { background: #fff8e1; border-color: #f7d774; color: #6b5200; }

/* ---------- Favoritos ---------- */
.btn-fav {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--borda);
  background: #fff; color: #c62828; font-size: 1.15rem; line-height: 1; display: grid; place-items: center; transition: transform .15s;
}
.btn-fav:hover { transform: scale(1.1); }
.btn-fav.ativo { background: #fdecea; border-color: #f5c2bd; }
.modal-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 44px; }
.modal-topo .btn-fav { position: static; }

/* ---------- Modal: ações extras ---------- */
.acoes-extra { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.acoes-extra button { background: var(--fundo-alt); border: 1px solid var(--borda); border-radius: 999px; padding: 7px 12px; font-size: 0.82rem; font-weight: 600; color: var(--texto); }
.acoes-extra button:hover { border-color: var(--azul); color: var(--azul); }

/* ---------- Aviso LGPD ---------- */
.aviso-lgpd {
  position: fixed; left: 16px; bottom: 16px; z-index: 80; max-width: 460px; background: #fff; border: 1px solid var(--borda);
  border-radius: 14px; box-shadow: var(--sombra-forte); padding: 16px 18px; display: flex; gap: 14px; align-items: center; font-size: 0.86rem;
}
.aviso-lgpd p { color: var(--texto-suave); }
.aviso-lgpd .btn { padding: 10px 18px; }

/* ---------- Área do cliente ---------- */
.conta { max-width: 1160px; }
.conta-cartao { max-width: 480px; margin: 0 auto; background: #fff; border: 1px solid var(--borda); border-radius: 18px; box-shadow: var(--sombra); padding: 30px; }
.conta-cartao.largo { max-width: none; }
.abas { display: flex; gap: 6px; background: var(--fundo-alt); padding: 5px; border-radius: 12px; margin-bottom: 22px; }
.abas button { flex: 1; border: 0; background: none; padding: 10px 12px; border-radius: 9px; font-weight: 600; color: var(--texto-suave); white-space: nowrap; }
.abas button.ativo { background: #fff; color: var(--azul); box-shadow: 0 2px 8px rgba(11, 20, 36, 0.08); }
.opcoes-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.opcoes-tipo label { cursor: pointer; }
.opcoes-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.opcoes-tipo span { display: block; border: 2px solid var(--borda); border-radius: 12px; padding: 12px 14px; transition: .15s; }
.opcoes-tipo b { display: block; color: var(--azul-profundo); }
.opcoes-tipo small { color: var(--texto-suave); }
.opcoes-tipo input:checked + span { border-color: var(--azul); background: var(--azul-claro); }
.opcoes-tipo input:focus-visible + span { outline: 2px solid var(--azul); }
.aceite { display: flex; gap: 8px; align-items: flex-start; font-size: 0.86rem; color: var(--texto-suave); margin-bottom: 16px; }
.aceite input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; }
.nota { font-size: 0.82rem; color: var(--texto-suave); text-align: center; margin-top: 14px; }
.nota-codigo { font-size: 0.92rem; color: var(--texto-suave); margin-bottom: 16px; }
.erro { color: #c62828; font-size: 0.88rem; font-weight: 600; margin-top: 12px; min-height: 1em; }
.erro:empty { display: none; }
.campo-codigo { font-size: 1.6rem !important; letter-spacing: 0.4em; text-align: center; font-weight: 700; }
.codigo-demo { background: #fff8e1; border: 1px dashed #e0b400; color: #6b5200; border-radius: 10px; padding: 12px; text-align: center; margin-bottom: 16px; font-size: 0.9rem; }
.codigo-demo strong { font-size: 1.3rem; letter-spacing: 0.2em; color: #3d2f00; }
.links-codigo { display: flex; justify-content: space-between; margin-top: 14px; }
.links-codigo button { background: none; border: 0; color: var(--azul); font-weight: 600; font-size: 0.86rem; }
.links-codigo button:disabled { color: var(--texto-suave); cursor: default; }
.aviso-demo { background: #fff8e1; border: 1px solid #f7d774; color: #6b5200; border-radius: 12px; padding: 14px 18px; margin-bottom: 24px; font-size: 0.9rem; }
.carregando { text-align: center; color: var(--texto-suave); padding: 30px 0; }
.painel-topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.painel-topo h2 { color: var(--azul-profundo); font-size: 1.6rem; }
.painel-topo p { color: var(--texto-suave); font-size: 0.92rem; }
.abas-painel { max-width: 560px; margin-top: 18px; }
#alerta-cadastro { margin-bottom: 8px; }
fieldset { border: 0; margin: 0 0 8px; padding: 0; }
legend { font-weight: 800; color: var(--azul-profundo); font-size: 1rem; margin: 10px 0 12px; padding-top: 14px; border-top: 1px solid var(--borda); width: 100%; }
.campo-com-botao { display: flex; gap: 8px; }
.campo-com-botao input { flex: 1; min-width: 0; }
.campo-com-botao .btn { padding: 9px 14px; border-radius: 8px; }
.dica { display: block; font-size: 0.76rem; color: var(--texto-suave); margin-top: 4px; }
.pedido { background: #fff; border: 1px solid var(--borda); border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; }
.pedido header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.pedido header strong { color: var(--azul-profundo); display: block; }
.pedido header small { color: var(--texto-suave); }
.pedido .status { background: #e8f5e9; color: #2e7d32; font-size: 0.74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pedido ul { list-style: none; margin-bottom: 12px; }
.pedido li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--borda); font-size: 0.9rem; }
.pedido li small { display: block; color: var(--texto-suave); font-size: 0.8rem; }
.pedido .obs { font-size: 0.86rem; color: var(--texto-suave); margin-bottom: 12px; }
.pedido .btn { padding: 9px 18px; font-size: 0.88rem; }

/* ---------- Perfil do cliente (painel) ---------- */
.painel-conta { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; }
.conta-lateral { position: sticky; top: 96px; background: #fff; border: 1px solid var(--borda); border-radius: 18px; box-shadow: var(--sombra); overflow: hidden; }
.conta-perfil { display: flex; gap: 14px; align-items: center; padding: 22px 20px 16px; background: linear-gradient(135deg, var(--azul-profundo), var(--azul)); color: #fff; }
.avatar {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; background: #fff; color: var(--azul);
  display: grid; place-items: center; font-weight: 800; font-size: 1.25rem; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}
.conta-perfil-info { min-width: 0; display: grid; gap: 2px; }
.conta-perfil-info strong { font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.conta-perfil-info small { color: #cfe0fb; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selo-tipo { justify-self: start; margin-top: 4px; background: rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 2px 10px; font-size: 0.72rem; font-weight: 700; }
.progresso { padding: 14px 20px; border-bottom: 1px solid var(--borda); }
.progresso-barra { height: 7px; background: var(--fundo-alt); border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
.progresso-barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--destaque), #f47b20); border-radius: 999px; transition: width .5s ease; }
.progresso.completo .progresso-barra i { background: #2e7d32; }
.progresso small { font-size: 0.78rem; color: var(--texto-suave); font-weight: 600; }
.progresso.completo small { color: #2e7d32; }
.conta-menu { display: grid; padding: 8px; }
.conta-menu button {
  display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: 0; border-radius: 10px;
  padding: 11px 12px; font-weight: 600; color: var(--texto); font-size: 0.93rem; white-space: nowrap;
}
.conta-menu button span { width: 22px; text-align: center; }
.conta-menu button:hover { background: var(--fundo-alt); }
.conta-menu button.ativo { background: var(--azul-claro); color: var(--azul); }
.conta-menu .sair { color: #c62828; margin-top: 4px; border-top: 1px solid var(--borda); border-radius: 0 0 10px 10px; }
.badge { margin-left: auto; font-style: normal; background: var(--azul); color: #fff; border-radius: 999px; font-size: 0.72rem; min-width: 22px; padding: 1px 7px; text-align: center; }
.badge:empty { display: none; }

.conta-conteudo { min-width: 0; }
.conta-conteudo > .cliente-box { margin-bottom: 18px; }
.painel-titulo { color: var(--azul-profundo); font-size: 1.6rem; line-height: 1.2; }
.painel-sub { color: var(--texto-suave); margin: 4px 0 20px; }
.grade-estatisticas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.estatistica { background: #fff; border: 1px solid var(--borda); border-radius: 14px; padding: 16px 18px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.estatistica span { grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; background: var(--azul-claro); display: grid; place-items: center; font-size: 1.2rem; color: var(--azul); }
.estatistica strong { font-size: 1.35rem; color: var(--azul-profundo); line-height: 1.1; }
.estatistica small { color: var(--texto-suave); font-size: 0.8rem; }
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 14px; }
.cartao-info { background: #fff; border: 1px solid var(--borda); border-radius: 14px; padding: 18px 20px; }
.cartao-info header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.cartao-info h3 { font-size: 1rem; color: var(--azul-profundo); }
.cartao-info header button { background: none; border: 0; color: var(--azul); font-weight: 700; font-size: 0.86rem; }
.cartao-info p { color: var(--texto-suave); font-size: 0.92rem; margin-bottom: 12px; }
.cartao-info dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 0.9rem; }
.cartao-info dt { color: var(--texto-suave); }
.cartao-info dd { font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.cartao-info address { font-style: normal; line-height: 1.7; font-size: 0.92rem; }
.cartao-info .pedido { border: 0; padding: 0; margin: 0; }
.cartao-info.perigo { border-color: #f5c2bd; }
.vazio-mini { color: var(--texto-suave); font-size: 0.9rem; }
.btn-perigo { background: #fff; border-color: #e57373; color: #c62828; }
.btn-perigo:hover { background: #c62828; color: #fff; }

.form-perfil { display: grid; gap: 14px; }
.cartao-form { background: #fff; border: 1px solid var(--borda); border-radius: 14px; padding: 18px 20px 6px; }
.cartao-form h3 { color: var(--azul-profundo); font-size: 1rem; margin-bottom: 12px; }
.cartao-form legend { float: left; width: 100%; border: 0; padding: 0; margin: 0 0 12px; font-size: 1rem; }
.cartao-form legend + * { clear: both; }
.acoes-form { display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; background: linear-gradient(transparent, var(--fundo) 30%); padding: 14px 0 4px; }
.pedido footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bolinha { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; box-shadow: 0 0 0 1px var(--borda); }
.pedido li { align-items: flex-start; }
.pedido li span { flex: 1; }

/* ---------- Acessibilidade ---------- */
.pular { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--azul); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; transition: top .2s; }
.pular:focus { top: 12px; }
:focus-visible { outline: 3px solid rgba(21, 88, 214, .55); outline-offset: 2px; }

/* ---------- Carrossel "Tipos de tinta" ---------- */
.carrossel { position: relative; }
.carrossel-trilho { display: flex; gap: 20px; overflow-x: auto; padding: 8px max(20px, calc((100vw - var(--largura)) / 2 + 20px)) 18px; scrollbar-width: none; }
.carrossel-trilho::-webkit-scrollbar { display: none; }
.carrossel::before, .carrossel::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; }
.carrossel::before { left: 0; background: linear-gradient(90deg, var(--fundo), transparent); }
.carrossel::after { right: 0; background: linear-gradient(-90deg, var(--fundo), transparent); }
.carrossel-seta {
  position: absolute; top: 40%; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--borda);
  background: #fff; color: var(--azul-profundo); font-size: 1.5rem; box-shadow: var(--sombra); display: grid; place-items: center;
}
.carrossel-seta:hover { color: var(--azul); }
.carrossel-seta.ant { left: 14px; } .carrossel-seta.prox { right: 14px; }
.tipo-card {
  flex: 0 0 320px; background: #fff; border: 1px solid var(--borda); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column;
  transition: transform .4s var(--suave), box-shadow .4s var(--suave);
}
.tipo-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-forte); }
.tipo-foto { position: relative; height: 170px; }
.tipo-foto-img { height: 100%; overflow: hidden; background: #e9eef5; }
.tipo-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--suave); }
.tipo-card:hover .tipo-foto img { transform: scale(1.06); }
.tipo-icone { z-index: 1; position: absolute; left: 14px; bottom: -22px; width: 48px; height: 48px; border-radius: 14px; background: #fff; box-shadow: var(--sombra); display: grid; place-items: center; font-size: 1.4rem; }
.tipo-info { padding: 30px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.tipo-info h3 { color: var(--azul-profundo); font-size: 1.2rem; }
.tipo-info > p { color: var(--texto-suave); font-size: .9rem; margin: 4px 0 12px; }
.tipo-info dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: .84rem; margin-bottom: 14px; }
.tipo-info dt { color: var(--texto-suave); }
.tipo-info dd { font-weight: 600; color: var(--texto); }
.notas { display: grid; gap: 6px; margin-bottom: 14px; }
.nota { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .8rem; color: var(--texto-suave); }
.nota i { display: flex; gap: 3px; }
.nota b { width: 16px; height: 6px; border-radius: 3px; background: var(--fundo-alt); box-shadow: inset 0 0 0 1px var(--borda); }
.nota b.on { background: var(--azul); box-shadow: none; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tags span { background: var(--azul-claro); color: var(--azul); font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.tipo-info .link { margin-top: auto; font-weight: 700; font-size: .9rem; }

/* ---------- Ambientes ---------- */
.ambientes { background: #fff; border: 1px solid var(--borda); border-radius: 20px; box-shadow: var(--sombra); overflow: hidden; }
.amb-abas { display: flex; gap: 4px; padding: 10px; background: var(--fundo-alt); overflow-x: auto; scrollbar-width: none; }
.amb-abas::-webkit-scrollbar { display: none; }
.amb-abas button { flex-shrink: 0; border: 0; background: none; padding: 10px 16px; border-radius: 10px; font-weight: 600; color: var(--texto-suave); white-space: nowrap; }
.amb-abas button.ativo { background: #fff; color: var(--azul); box-shadow: 0 2px 8px rgba(11, 20, 36, .08); }
.amb-corpo { display: grid; grid-template-columns: 1.5fr 1fr; }
.amb-cena { background: #e9eef5; aspect-ratio: 3 / 2; overflow: hidden; }
.amb-cena svg { width: 100%; height: 100%; display: block; }
.amb-cena.trocando svg { animation: trocarFoto .5s var(--suave); }
.amb-info { padding: 28px; display: flex; flex-direction: column; }
.amb-titulo { color: var(--azul-profundo); font-size: 1.4rem; margin-bottom: 6px; }
.amb-texto { color: var(--texto-suave); margin-bottom: 18px; }
.amb-paleta { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; }
.amb-paleta button { aspect-ratio: 1; border-radius: 10px; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--borda); transition: transform .2s var(--suave); }
.amb-paleta button:hover { transform: scale(1.08); }
.amb-paleta button.ativo { box-shadow: 0 0 0 2px var(--azul); }
.amb-produto { font-size: .9rem; color: var(--texto-suave); margin-bottom: 14px; }
.amb-link { margin-top: auto; align-self: flex-start; }

/* ---------- Guia "Qual pó usar?" ---------- */
.guia-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.guia-pergunta { background: #fff; border: 1px solid var(--borda); border-radius: 16px; padding: 20px; transition: border-color .3s, box-shadow .3s; }
.guia-pergunta.respondida { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro); }
.guia-pergunta legend { float: left; width: 100%; font-weight: 800; color: var(--azul-profundo); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; border: 0; padding: 0; }
.guia-pergunta legend b { width: 28px; height: 28px; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; font-size: .85rem; flex-shrink: 0; }
.guia-opcoes { clear: both; display: grid; gap: 8px; }
.guia-opcoes button { text-align: left; border: 1px solid var(--borda); background: var(--fundo-alt); border-radius: 10px; padding: 11px 14px; font-weight: 600; font-size: .9rem; color: var(--texto); transition: all .2s var(--suave); }
.guia-opcoes button:hover { border-color: var(--azul); }
.guia-opcoes button.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.guia-resultado { margin-top: 28px; background: var(--fundo-alt); border-radius: 20px; padding: 28px; animation: trocarFoto .5s var(--suave); scroll-margin-top: 90px; }
.guia-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.guia-cabecalho .rotulo { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); }
.guia-cabecalho h3 { color: var(--azul-profundo); font-size: 1.4rem; }
.guia-resumo { color: var(--texto-suave); font-size: .9rem; }
.guia-notas { margin: 0 0 20px 18px; color: var(--texto); font-size: .92rem; display: grid; gap: 6px; }

/* ---------- 404 ---------- */
.erro-404 { text-align: center; max-width: 560px; margin: 0 auto; padding: 40px 0; }
.erro-num { font-size: clamp(5rem, 18vw, 9rem); font-weight: 800; line-height: 1; color: var(--preto); letter-spacing: -.04em; }
.erro-num span { color: var(--azul); display: inline-block; animation: balancar 3s ease-in-out infinite; }
.erro-404 h1 { color: var(--azul-profundo); margin: 10px 0; }
.erro-404 p { color: var(--texto-suave); margin-bottom: 24px; }

@media (max-width: 980px) {
  .amb-corpo { grid-template-columns: minmax(0, 1fr); }
  .guia-passos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tipo-card { flex-basis: 270px; }
  .carrossel-seta { display: none; }
  .carrossel::before, .carrossel::after { width: 24px; }
  .carrossel-trilho { gap: 14px; padding-left: 16px; padding-right: 16px; }
  .amb-info { padding: 20px 18px; }
  .amb-paleta { grid-template-columns: repeat(6, 42px); justify-content: space-between; }
  .amb-link { align-self: stretch; }
  .guia-resultado { padding: 20px 16px; }
}

/* ---------- Texto legal ---------- */
.texto-legal { max-width: 820px; }
.texto-legal h2 { color: var(--azul-profundo); font-size: 1.2rem; margin: 26px 0 10px; }
.texto-legal p, .texto-legal li { color: var(--texto-suave); margin-bottom: 10px; }
.texto-legal ul { padding-left: 20px; }
.texto-legal .nota { text-align: left; }

/* =========================================================
   Movimento e mídia
   ========================================================= */
:root { --suave: cubic-bezier(.22, .61, .36, 1); }
body { animation: entrarPagina .5s var(--suave) both; }
@keyframes entrarPagina { from { opacity: 0; } to { opacity: 1; } }

/* Cabeçalho ao rolar */
.cabecalho { transition: box-shadow .3s var(--suave), background .3s; }
.cabecalho .container { transition: height .3s var(--suave); }
.cabecalho.rolado { box-shadow: 0 6px 24px rgba(11, 20, 36, .08); }
.cabecalho.rolado .container { height: 62px; }

/* Botões: brilho ao passar o mouse */
.btn { position: relative; overflow: hidden; }
.btn-primario::after, .btn-whats::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .6s var(--suave);
}
.btn-primario:hover::after, .btn-whats:hover::after { left: 120%; }

/* Entrada dos elementos mais suave */
.revelar { transform: translateY(28px) scale(.985); transition: opacity .7s var(--suave), transform .7s var(--suave); }

/* ---------- Slides ---------- */
.slider { position: relative; overflow: hidden; outline: none;
  background: radial-gradient(900px 500px at 90% 10%, rgba(21, 88, 214, .14), transparent 60%),
              radial-gradient(700px 400px at 0% 100%, rgba(247, 198, 0, .10), transparent 60%),
              linear-gradient(180deg, #fff 0%, #eef3fb 100%); }
.slides { display: grid; }
.slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .8s var(--suave), visibility 0s .8s; background-size: cover; background-position: center; }
.slide.ativo { opacity: 1; visibility: visible; transition: opacity .8s var(--suave); z-index: 1; }
.slide-grade { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; min-height: 540px; padding-top: 48px; padding-bottom: 72px; }
.slide-texto > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--suave), transform .7s var(--suave); }
.slide.ativo .slide-texto > * { opacity: 1; transform: none; }
.slide.ativo .slide-texto > :nth-child(2) { transition-delay: .1s; }
.slide.ativo .slide-texto > :nth-child(3) { transition-delay: .2s; }
.slide.ativo .slide-texto > :nth-child(4) { transition-delay: .3s; }
.slide .sobretitulo { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 18px; }
.slide h1, .slide h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.08; margin-bottom: 18px; letter-spacing: -.02em; text-transform: uppercase; font-weight: 800; color: var(--preto); }
.slide h1 em, .slide h2 em { font-style: normal; color: var(--azul); }
.slide p { font-size: 1.1rem; color: var(--texto-suave); max-width: 540px; margin-bottom: 28px; }
.slide-arte { position: relative; height: 420px; opacity: 0; transform: translateX(30px) scale(.97); transition: opacity .9s var(--suave) .15s, transform 1.1s var(--suave) .15s; }
.slide.ativo .slide-arte { opacity: 1; transform: none; }
.slide-arte > svg { width: 100%; height: 100%; }
.slide.com-foto { color: #fff; }
.slide.com-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,20,36,.85), rgba(11,20,36,.35)); }
.slide.com-foto .slide-grade { position: relative; grid-template-columns: 1fr; }
.slide.com-foto h1, .slide.com-foto h2, .slide.com-foto p, .slide.com-foto .sobretitulo { color: #fff; }
.slide.com-foto .btn-contorno-azul { color: #fff; border-color: #fff; }

.placa-balanco { animation: balancar 5s ease-in-out infinite; }
@keyframes balancar { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }

.leque { position: absolute; left: 50%; bottom: 30px; width: 0; height: 0; }
.leque-carta {
  position: absolute; left: -55px; bottom: 0; width: 110px; height: 300px; border-radius: 12px; transform-origin: 50% 92%;
  box-shadow: 0 10px 24px rgba(11,20,36,.18); display: flex; align-items: flex-start; justify-content: center; padding-top: 16px;
  font-weight: 800; font-size: .78rem; letter-spacing: .04em; transform: rotate(0deg); transition: transform 1s var(--suave);
  background-image: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%, rgba(0,0,0,.15));
}
.leque-carta span { background: rgba(255,255,255,.18); padding: 3px 8px; border-radius: 999px; }
.slide.ativo .leque-carta { transform: rotate(calc(var(--i) * 13deg)); transition-delay: calc((var(--i) + 3) * 60ms + .2s); }

.particulas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.slider-seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--borda); background: rgba(255,255,255,.9); color: var(--azul-profundo); font-size: 1.6rem; line-height: 1;
  display: grid; place-items: center; box-shadow: var(--sombra); opacity: 0; transition: opacity .3s, background .2s;
}
.slider:hover .slider-seta, .slider:focus-within .slider-seta { opacity: 1; }
.slider-seta:hover { background: #fff; color: var(--azul); }
.slider-seta.ant { left: 18px; } .slider-seta.prox { right: 18px; }
.slider-pontos { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3; display: flex; justify-content: center; gap: 10px; }
.slider-pontos button { width: 42px; height: 5px; border: 0; border-radius: 999px; background: rgba(11,20,36,.14); padding: 0; overflow: hidden; }
.slider-pontos button.ativo { background: rgba(21, 88, 214, .22); }
.slider-pontos i { display: block; height: 100%; width: 0; background: var(--azul); border-radius: inherit; }
.slider-pontos button.ativo i { animation: progressoSlide var(--tempo, 7000ms) linear forwards; }
.slider.pausado .slider-pontos button.ativo i { animation-play-state: paused; }
@keyframes progressoSlide { to { width: 100%; } }

/* Faixa de selos */
.faixa-selos { background: #fff; border-bottom: 1px solid var(--borda); }
.faixa-selos .hero-selos { max-width: none; margin: 0; padding-top: 30px; padding-bottom: 30px; }
.hero-selos .ic { transition: transform .3s var(--suave), background .3s; }
.hero-selos div:hover .ic { transform: translateY(-4px); background: var(--azul-claro); }

/* ---------- Seção escura + vídeo do processo ---------- */
.secao-escura { background: var(--azul-profundo); color: #fff; }
.secao-escura .secao-titulo h2 { color: #fff; }
.secao-escura .secao-titulo p { color: #a9bcd6; }
.secao-escura .secao-titulo .rotulo { color: #6fa0ff; }
.video-processo { max-width: 980px; margin: 0 auto; }
.vp-tela { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); background: #0b1424; }
.vp-tela canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; cursor: pointer; }
.vp-play {
  position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.14); color: #fff; font-size: .9rem; backdrop-filter: blur(6px); transition: background .2s;
}
.vp-play:hover { background: rgba(255,255,255,.28); }
.vp-etapas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.vp-etapas button {
  display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: #c9d6e8; border-radius: 12px; padding: 10px 12px; text-align: left; font-size: .86rem; font-weight: 600; transition: all .3s var(--suave);
}
.vp-etapas b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); flex-shrink: 0; }
.vp-etapas button.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.vp-etapas button.ativo b { background: #fff; color: var(--azul); }
.vp-legenda { text-align: center; color: #c9d6e8; margin-top: 14px; min-height: 3em; }
.vp-legenda strong { color: #fff; }
.videos-reais { margin-top: 48px; }
.videos-reais h3 { color: #fff; margin-bottom: 16px; }
.grade-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.video-card { margin: 0; }
.video-quadro { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.video-quadro iframe, .video-quadro video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card figcaption { color: #c9d6e8; margin-top: 8px; font-weight: 600; }

/* ---------- Fotos dos produtos ---------- */
.foto-produto { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--suave), opacity .25s; }
.cartao-produto .vitrine { height: 230px; padding: 0; background: #e9eef5; overflow: hidden; }
.cartao-produto:hover .foto-produto { transform: scale(1.06); }
.cartao-produto:hover .vitrine svg { transform: none; }
.ver-detalhes {
  position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 10px); opacity: 0; background: rgba(11,20,36,.82); color: #fff;
  font-size: .78rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; transition: all .35s var(--suave); white-space: nowrap; pointer-events: none;
}
.cartao-produto:hover .ver-detalhes { opacity: 1; transform: translate(-50%, 0); }
.amostra { cursor: pointer; transition: transform .2s var(--suave), box-shadow .2s; }
.amostra:hover { transform: scale(1.2); }
.amostra.ativa { box-shadow: 0 0 0 2px var(--azul); }
.item-carrinho .mini-foto { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.modal-vitrine { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #e9eef5; }
.modal-foto { border-radius: 12px; overflow: hidden; aspect-ratio: 5 / 4; background: #dfe6ef; display: grid; place-items: center; }
.modal-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-foto svg { height: 80%; width: auto; }
.modal-foto.trocando > * { animation: trocarFoto .45s var(--suave); }
@keyframes trocarFoto { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.modal-miniaturas { display: flex; gap: 8px; }
.modal-miniaturas button { width: 64px; height: 52px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.modal-miniaturas button.ativo { border-color: var(--azul); }
.modal-miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.modal-miniaturas svg { width: 90%; height: 90%; }
.modal-legenda { font-size: .82rem; color: var(--texto-suave); }

/* ---------- Galeria ---------- */
.galeria-previa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grade-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-auto-flow: dense; gap: 16px; }
.galeria-item {
  position: relative; display: block; border: 0; padding: 0; border-radius: 16px; overflow: hidden; background: #e9eef5;
  aspect-ratio: 5 / 4; cursor: zoom-in; text-align: left; color: #fff;
}
.galeria-previa .galeria-item { cursor: pointer; }
.grade-galeria .galeria-item.destaque { grid-column: span 2; grid-row: span 2; }
.galeria-item img, .galeria-item svg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--suave); }
.galeria-item:hover img, .galeria-item:hover svg { transform: scale(1.06); }
.galeria-item span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 14px; font-size: .82rem; color: #d7e2f3;
  background: linear-gradient(transparent, rgba(11,20,36,.82)); transform: translateY(8px); opacity: .92; transition: all .35s var(--suave);
}
.galeria-item span strong { display: block; color: #fff; font-size: .98rem; }
.galeria-item:hover span { transform: none; opacity: 1; }

.lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(8,14,26,.92); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; opacity: 0; transition: opacity .25s; }
.lightbox.aberto { opacity: 1; }
.lightbox figure { margin: 0; width: min(900px, 100%); }
.lb-midia { border-radius: 16px; overflow: hidden; background: #e9eef5; aspect-ratio: 5 / 4; max-height: 72vh; margin: 0 auto; }
.lb-midia img, .lb-midia svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.lb-midia.trocando > * { animation: trocarFoto .4s var(--suave); }
.lightbox figcaption { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #c9d6e8; margin-top: 14px; flex-wrap: wrap; }
.lightbox figcaption strong { display: block; color: #fff; font-size: 1.1rem; }
.lb-fechar { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1.6rem; }
.lb-seta { width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1.8rem; flex-shrink: 0; }
.lb-seta:hover, .lb-fechar:hover { background: rgba(255,255,255,.25); }

@media (max-width: 980px) {
  .slide-grade { grid-template-columns: minmax(0, 1fr); gap: 10px; min-height: 0; padding-top: 36px; padding-bottom: 64px; }
  .slide-arte { height: 300px; max-width: 460px; width: 100%; margin: 0 auto; }
  .galeria-previa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-etapas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .slide-grade { padding-top: 26px; padding-bottom: 52px; }
  .slide .sobretitulo { letter-spacing: .16em; font-size: .7rem; margin-bottom: 10px; }
  .slide h1, .slide h2 { font-size: 1.6rem; margin-bottom: 12px; }
  .slide p { font-size: .95rem; margin-bottom: 18px; }
  .slide .hero-botoes { gap: 10px; flex-wrap: nowrap; }
  .slide .hero-botoes .btn { flex: 1 1 0; padding: 12px 10px; font-size: .88rem; white-space: normal; text-align: center; line-height: 1.2; }
  .slide-arte { height: 210px; }
  .slide-arte.hero-arte { height: 230px; }
  .slide .hero-arte .caixa-hero { width: 40% !important; }
  .slide .hero-arte .caixa-hero:nth-of-type(1) { left: 12%; bottom: 4%; }
  .slide .hero-arte .caixa-hero:nth-of-type(2) { left: 48%; bottom: 4%; }
  .slide .hero-arte .caixa-hero:nth-of-type(3) { left: 30%; bottom: 35%; }
  .leque-carta { width: 72px; height: 190px; left: -36px; font-size: .6rem; }
  .slider-seta { display: none; }
  .slider-pontos { bottom: 18px; }
  .faixa-selos .hero-selos { padding-top: 22px; padding-bottom: 22px; }
  .cartao-produto .vitrine { height: 150px; }
  .ver-detalhes { display: none; }
  .grade-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .galeria-previa { gap: 10px; }
  .galeria-item span { padding: 20px 10px 10px; font-size: .72rem; }
  .galeria-item span strong { font-size: .84rem; }
  .lb-seta { position: absolute; bottom: 20px; }
  .lb-seta.ant { left: 20px; } .lb-seta.prox { right: 20px; }
  .lightbox { padding: 70px 12px 90px; }
  .vp-etapas button { font-size: .76rem; padding: 8px; }
  .modal-vitrine { padding: 14px; }
  .modal-foto { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  /* sem deslocamentos grandes: os elementos só aparecem com fade */
  .revelar, .revelar-lado { transform: none !important; }
  html { scroll-behavior: auto !important; }
}

/* ---------- Animação de entrada ---------- */
.revelar { opacity: 0; }
.revelar.visivel { opacity: 1; transform: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
  .hero .container, .duas-colunas, .ferramenta-corpo, .simulador, .modal-corpo { grid-template-columns: minmax(0, 1fr); }
  .hero-arte { height: 340px; max-width: 440px; margin: 0 auto; width: 100%; }
  .faixa-valores .container, .processo { grid-template-columns: repeat(2, 1fr); }
  .faixa-valores .valor:nth-child(3) { border-left: 0; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .grade-valores { grid-template-columns: 1fr; }
  .cta { flex-direction: column; text-align: center; padding: 40px 28px; }
  .modal-vitrine { min-height: 240px; padding: 24px; }
  .modal-vitrine svg { height: 200px; }
}
@media (max-width: 860px) {
  .painel-conta { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .conta-lateral { position: static; }
  .conta-menu { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .conta-menu::-webkit-scrollbar { display: none; }
  .conta-menu button { flex-shrink: 0; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 999px; }
  .conta-menu .sair { margin-top: 0; border-top: 1px solid var(--borda); border-radius: 999px; }
  .conta-conteudo { scroll-margin-top: 80px; }
  .btn-menu { display: block; }
  .menu {
    position: fixed; top: 75px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #fff;
    padding: 12px 20px 20px; border-bottom: 1px solid var(--borda); box-shadow: var(--sombra);
    transform: translateY(-130%); transition: transform 0.3s; z-index: -1;
  }
  .menu.aberto { transform: translateY(0); }
  .menu a { padding: 14px; }
  .barra-topo .ocultar-mobile { display: none; }
  .btn-carrinho .texto { display: none; }
  .link-conta { padding: 9px 11px; max-width: 120px; }
  .link-conta .texto { display: none; }
  .acoes-topo { gap: 6px; }
}
@media (max-width: 640px) {
  .secao { padding: 56px 0; }
  .container { padding: 0 16px; }
  .hero .container { padding-top: 48px; padding-bottom: 80px; }
  .hero-arte { height: 280px; }
  .selo { width: 104px; height: 104px; font-size: 0.56rem; padding: 8px; }
  .selo b { font-size: 0.7rem; }
  .hero-selos { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  .faixa-valores .valor { padding: 16px 8px; gap: 8px; }
  .faixa-valores svg { width: 26px; height: 26px; }
  .faixa-valores strong { font-size: 0.8rem; }
  .faixa-valores span { font-size: 0.66rem; }
  .processo { grid-template-columns: 1fr; gap: 28px; }
  .logo-texto strong { font-size: 1.2rem; }
  .rodape-grade { grid-template-columns: 1fr; }
  .barra-topo .container { justify-content: center; }
  .cabecalho .container { height: 64px; }
  .menu { top: 67px; }
  .logo-marca { width: 34px; height: 34px; }
  .logo small { font-size: 0.5rem; letter-spacing: 0.08em; white-space: nowrap; }
  .cabecalho .container { gap: 8px; }
  .logo { gap: 7px; min-width: 0; }
  .logo-texto strong { font-size: 1.08rem; }
  .logo small { font-size: 0.46rem; letter-spacing: 0.04em; }
  .btn-carrinho { padding: 8px 12px; gap: 6px; }
  .link-conta { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .btn-menu { padding: 6px; }

  /* Evita zoom automático do iPhone ao tocar nos campos */
  input, select, textarea { font-size: 16px !important; }

  /* Linha do tempo em coluna única */
  .linha-tempo::before { left: 8px; }
  .marco, .marco:nth-child(odd), .marco:nth-child(even) { width: 100%; left: 0; text-align: left; padding: 0 0 32px 40px; }
  .marco:nth-child(odd)::before, .marco:nth-child(even)::before { left: 0; right: auto; }

  /* Filtros: categorias em uma linha com rolagem lateral */
  .barra-filtros { gap: 12px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex-shrink: 0; }
  .busca { flex: 1 1 100%; min-width: 0; order: -1; }

  /* Produtos em 2 colunas, cartões compactos */
  .grade-produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cartao-produto .vitrine { height: 140px; }
  .cartao-produto .vitrine svg { height: 112px; }
  .etiqueta { top: 8px; left: 8px; font-size: 0.62rem; padding: 3px 8px; }
  .cartao-produto .info { padding: 12px; }
  .cartao-produto .linha { font-size: 0.66rem; }
  .cartao-produto h3 { font-size: 0.93rem; margin: 2px 0 8px; }
  .cartao-produto .desc { display: none; }
  .amostras { gap: 4px; margin-bottom: 10px; }
  .amostra { width: 16px; height: 16px; }
  .cartao-produto .rodape-cartao { flex-direction: column; align-items: stretch; gap: 8px; }
  .preco { font-size: 0.85rem; }
  .btn-add { width: 100%; padding: 10px 8px; }
  .grade-categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cartao-categoria { padding: 18px 12px; }

  /* Modal do produto vira "gaveta" de baixo para cima */
  .modal { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0;
           transform: translateY(100%); }
  .modal.aberto { transform: translateY(0); }
  .modal-vitrine { min-height: 0; padding: 20px; }
  .modal-vitrine svg { height: 150px; }
  .modal-info { padding: 20px 18px 0; }
  .modal-info h2 { font-size: 1.35rem; }
  .ficha li { flex-direction: column; gap: 0; }
  .ficha li span:last-child { text-align: left; }
  .linha-compra { position: sticky; bottom: 0; background: #fff; margin: 0 -18px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borda); }
  .linha-compra .btn { padding: 13px 12px; }

  /* Carrinho */
  .carrinho-rodape { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }

  /* Ferramentas */
  .ferramenta-form, .resultado, .paleta-simulador { padding: 24px 18px; }
  .ambiente { padding: 12px; }
  .resultado .grande { font-size: 2.6rem; }
  .cta { padding: 32px 20px; }
  .cartao-recurso { padding: 20px 16px; }
  .numero strong { font-size: 1.9rem; }
  .painel-cores { grid-auto-rows: 80px; }

  .conta-cartao { padding: 22px 18px; }
  .opcoes-tipo { grid-template-columns: 1fr; }
  .aviso-lgpd { left: 12px; right: 12px; bottom: 12px; max-width: none; flex-direction: column; align-items: stretch; }
  .btn-fav { width: 30px; height: 30px; font-size: 0.95rem; top: 6px; right: 6px; }
  .painel-titulo { font-size: 1.3rem; }
  .grade-estatisticas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .estatistica { grid-template-columns: 1fr; text-align: center; padding: 12px 6px; }
  .estatistica span { grid-row: auto; margin: 0 auto 6px; width: 34px; height: 34px; font-size: 1rem; }
  .estatistica strong { font-size: 1.05rem; }
  .estatistica small { font-size: 0.7rem; }
  .cartao-info, .cartao-form { padding: 16px; }
  .cartao-info dl { grid-template-columns: 1fr; gap: 0; }
  .cartao-info dd { margin-bottom: 8px; }
  .acoes-form .btn { flex: 1; }
  .abas button { padding: 9px 6px; font-size: 0.84rem; }

  /* Aviso e botão flutuante */
  .toast { bottom: 16px; width: calc(100% - 32px); justify-content: space-between; }
  .whats-flutuante { width: 52px; height: 52px; right: 16px; bottom: 16px; }
}
@media (max-width: 360px) {
  .logo small { display: none; }
  .grupo-duplo { grid-template-columns: 1fr; }
  .btn-carrinho { padding: 8px 12px; }
}

/* =========================================================
   TEMA CORPORATIVO
   Visual sóbrio no padrão de grandes fabricantes industriais:
   ícones de linha, cantos discretos, botões retangulares,
   títulos alinhados à esquerda e paleta azul/grafite.
   ========================================================= */
:root {
  --azul-profundo: #0a1a33;
  --preto: #0f1720;
  --fundo-alt: #f4f6f9;
  --borda: #dde3ea;
  --raio: 8px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 8px rgba(16, 24, 40, .06);
  --sombra-forte: 0 16px 40px rgba(16, 24, 40, .14);
  --fonte-titulo: "Barlow", "Inter", "Segoe UI", Arial, sans-serif;
}
h1, h2, h3, .painel-titulo, .amb-titulo, .logo-texto strong { font-family: var(--fonte-titulo); }
h1, h2 { letter-spacing: -.01em; }
.icone-svg { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.18em; }

/* Barra superior e cabeçalho */
.barra-topo { background: var(--azul-profundo); font-size: .8rem; color: #9fb0c6; }
.barra-topo .container { justify-content: space-between; align-items: center; padding-top: 7px; padding-bottom: 7px; }
.barra-topo-links { display: flex; gap: 24px; }
.barra-topo a { color: #d3dde9; display: inline-flex; align-items: center; gap: 7px; }
.barra-topo a:hover { color: #fff; }
.cabecalho::after { display: none; }
.cabecalho { border-bottom: 1px solid var(--borda); }
.cabecalho .container { height: 76px; }
.menu { gap: 0; align-self: stretch; }
.menu > li { display: flex; }
.menu > li > a { display: flex; align-items: center; border-radius: 0; padding: 0 16px; font-weight: 500; color: var(--texto); position: relative; }
.menu > li > a:hover, .menu > li > a.ativo { background: none; color: var(--azul); }
.menu > li > a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px; background: var(--azul); transform: scaleX(0); transition: transform .25s var(--suave); }
.menu > li > a.ativo::after, .menu > li > a:hover::after { transform: scaleX(1); }
.link-conta, .btn-carrinho { border-radius: 6px; gap: 8px; }
.link-conta .icone-svg, .btn-carrinho .icone-svg { width: 19px; height: 19px; }
.btn-carrinho .contador { background: #fff; color: var(--azul); }

/* Mega menu de produtos */
.mega-painel {
  position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
  box-shadow: 0 24px 40px rgba(16, 24, 40, .10); display: grid; grid-template-columns: 1fr 300px; gap: 32px;
  padding: 28px max(20px, calc((100vw - var(--largura)) / 2 + 20px));
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s var(--suave), visibility 0s .2s;
}
.tem-painel:hover .mega-painel, .tem-painel:focus-within .mega-painel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--suave); }
.mega-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 16px; }
.mega-grade a { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 6px; color: var(--texto); }
.mega-grade a:hover { background: var(--fundo-alt); }
.mega-grade .icone-svg { width: 26px; height: 26px; color: var(--azul); margin-top: 2px; }
.mega-grade strong { display: block; color: var(--azul-profundo); font-family: var(--fonte-titulo); font-size: 1.05rem; }
.mega-grade span { font-size: .85rem; color: var(--texto-suave); line-height: 1.4; }
.mega-lateral { border-left: 1px solid var(--borda); padding-left: 28px; display: grid; gap: 2px; align-content: start; }
.mega-rotulo { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 8px; }
.mega-lateral a { display: flex; align-items: center; gap: 10px; padding: 9px 0; color: var(--texto); font-weight: 500; font-size: .93rem; }
.mega-lateral a:hover { color: var(--azul); }
.mega-lateral .icone-svg { width: 19px; height: 19px; color: var(--azul); }
.mega-lateral .mega-todos { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--borda); color: var(--azul); font-weight: 600; }

/* Botões */
.btn { border-radius: 4px; padding: 12px 24px; font-weight: 600; letter-spacing: .01em; }
.btn-primario::after, .btn-whats::after { display: none; }
.btn-primario:hover { transform: none; }
.btn .icone-svg { width: 18px; height: 18px; }

/* Títulos de seção (alinhados à esquerda, com traço azul) */
.secao-titulo { text-align: left; margin: 0 0 44px; max-width: 760px; }
.secao-titulo .rotulo, .guia-cabecalho .rotulo { display: inline-flex; align-items: center; gap: 10px; letter-spacing: .16em; font-size: .74rem; }
.secao-titulo .rotulo::before, .guia-cabecalho .rotulo::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.secao-titulo h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; color: var(--azul-profundo); }
.secao-titulo p { font-size: 1.05rem; }
.centro { text-align: left; }

/* Cabeçalho das páginas internas */
.cabecalho-pagina {
  background: linear-gradient(90deg, rgba(10, 26, 51, .97) 35%, rgba(10, 26, 51, .82)),
              repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 16px), #0a1a33;
  padding: 72px 0 64px;
}
.cabecalho-pagina::after { height: 3px; width: 72px; left: max(20px, calc((100vw - var(--largura)) / 2 + 20px)); right: auto; bottom: 0; background: var(--azul); }
.cabecalho-pagina h1 { font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); }

/* Slides: fundo escuro, texto claro */
.slider { background: radial-gradient(900px 520px at 78% 40%, rgba(21, 88, 214, .28), transparent 65%), linear-gradient(180deg, #0a1a33 0%, #0c203f 100%); color: #fff; }
.slide-grade { min-height: 600px; }
.slide .sobretitulo { color: #7fb0ff; letter-spacing: .18em; display: inline-flex; align-items: center; gap: 10px; }
.slide .sobretitulo::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.slide h1, .slide h2 { color: #fff; text-transform: none; font-weight: 700; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.06; }
.slide h1 em, .slide h2 em { color: #7fb0ff; }
.slide p { color: #b9c7da; }
.slide .btn-contorno-azul { color: #fff; border-color: rgba(255, 255, 255, .55); }
.slide .btn-contorno-azul:hover { background: #fff; color: var(--azul-profundo); border-color: #fff; }
.slider-seta { border-radius: 6px; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; backdrop-filter: blur(6px); }
.slider-seta:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.slider-pontos button { background: rgba(255, 255, 255, .18); }
.slider-pontos button.ativo { background: rgba(255, 255, 255, .28); }
.slider-pontos i { background: #fff; }
.slide-arte img.cena { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }

/* Arte: cartela de cores RAL */
.cartela { position: absolute; inset: 20px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-content: center; }
.cartela-chip {
  aspect-ratio: 4 / 3; border-radius: 4px; position: relative; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  background-image: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,0) 45%, rgba(0,0,0,.18));
  opacity: 0; transform: translateY(12px); transition: opacity .6s var(--suave), transform .6s var(--suave);
}
.slide.ativo .cartela-chip { opacity: 1; transform: none; transition-delay: calc(var(--i) * 45ms + .15s); }
.cartela-chip span { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; background: rgba(255,255,255,.92); color: #0f1720; font: 600 .7rem/1.2 "Inter", Arial, sans-serif; }
.cartela-chip span small { display: block; color: #5a6775; font-weight: 500; }

/* Arte: ficha técnica */
.ficha-arte { position: absolute; inset: 30px 0; display: grid; grid-template-columns: .9fr 1.1fr; gap: 18px; align-items: center; }
.ficha-arte img { width: 100%; border-radius: 8px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.ficha-tabela { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 8px 18px; backdrop-filter: blur(6px); }
.ficha-tabela div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .9rem; }
.ficha-tabela div:last-child { border-bottom: 0; }
.ficha-tabela span { color: #9fb0c6; display: inline-flex; align-items: center; gap: 8px; }
.ficha-tabela strong { color: #fff; text-align: right; }
.ficha-tabela .icone-svg { color: #7fb0ff; }

/* Faixa de selos */
.faixa-selos .hero-selos { grid-template-columns: repeat(4, 1fr); gap: 0; }
.faixa-selos .hero-selos > div { display: flex; align-items: center; gap: 14px; text-align: left; padding: 4px 20px; border-left: 1px solid var(--borda); font-size: .85rem; color: var(--texto-suave); }
.faixa-selos .hero-selos > div:first-child { border-left: 0; padding-left: 0; }
.hero-selos .ic { width: 46px; height: 46px; margin: 0; border: 0; border-radius: 6px; background: var(--azul-claro); flex-shrink: 0; }
.hero-selos div:hover .ic { transform: none; }
.hero-selos strong { font-size: .9rem; text-transform: none; color: var(--azul-profundo); font-family: var(--fonte-titulo); font-size: 1.05rem; }

/* Cartões e blocos */
.cartao-produto, .cartao-recurso, .cartao-valor, .cartao-contato, .passo, .tipo-card, .ambientes, .guia-pergunta,
.faq details, .download, .ferramenta, .conta-cartao, .conta-lateral, .cartao-info, .cartao-form, .pedido, .estatistica,
.galeria-item, .cartao-categoria, .modal, .vp-tela, .guia-resultado { border-radius: var(--raio); }
.cartao-produto:hover, .cartao-recurso:hover, .tipo-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); }
.etiqueta { border-radius: 3px; background: #fff; border: 1px solid var(--borda); font-size: .64rem; letter-spacing: .08em; }
.btn-fav { border-radius: 6px; color: var(--texto-suave); }
.btn-fav .icone-svg { width: 18px; height: 18px; }
.btn-fav.ativo { color: #c62828; background: #fdecea; }
.btn-fav.ativo .icone-svg { fill: currentColor; }
.chip, .busca input, .amb-abas button, .abas, .abas button, .guia-opcoes button, .seletor-embalagem button, .acoes-extra button,
.opcoes-tipo span, .campo-com-botao .btn, .conta-menu button, .vp-etapas button, .tags span, .aviso-lgpd, .cliente-box, .toast { border-radius: 6px; }
.icone, .cartao-recurso .icone, .cartao-valor .icone, .cartao-contato .icone {
  width: 48px; height: 48px; border-radius: 8px; background: var(--azul-claro); color: var(--azul); display: grid; place-items: center; margin-bottom: 16px; font-size: 1rem;
}
.icone .icone-svg { width: 24px; height: 24px; }
.icone-vazio { color: var(--texto-suave); margin-bottom: 8px; }
.icone-vazio .icone-svg { width: 40px; height: 40px; }
.carrinho-vazio .icone { margin: 0 auto 12px; }
.acoes-extra button { display: inline-flex; align-items: center; gap: 7px; }
.opcoes-tipo b { display: flex; align-items: center; gap: 8px; }
.conta-menu button { gap: 12px; }
.conta-menu .icone-svg { width: 19px; height: 19px; }
.estatistica span .icone-svg { width: 21px; height: 21px; }
.cartao-info h3 { display: flex; align-items: center; gap: 8px; }
.cartao-info h3 .icone-svg { color: var(--azul); }
.aviso-demo { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.pedido .obs { display: flex; gap: 8px; align-items: center; }
.pedido footer .btn { display: inline-flex; gap: 8px; align-items: center; }
.tipo-icone { border-radius: 8px; color: var(--azul); }
.tipo-icone .icone-svg { width: 24px; height: 24px; }
.carrossel-seta { border-radius: 6px; }
.painel-cores { border-radius: var(--raio); }
.leque, .po { display: none; }

/* CTA e números */
.cta { background: linear-gradient(90deg, #0a1a33 30%, #10306a), var(--azul-profundo); border-radius: var(--raio); }
.cta::after { height: 3px; width: 72px; left: 50px; right: auto; background: var(--azul); }
.faixa-numeros { background: var(--azul-profundo); }
.faixa-numeros .numero { background: none; border: 0; border-left: 1px solid rgba(255, 255, 255, .14); border-radius: 0; text-align: left; padding: 8px 24px; }
.faixa-numeros .numero strong { font-family: var(--fonte-titulo); font-size: 2.6rem; }

/* Rodapé */
.rodape { background: var(--azul-profundo); }
.rodape h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: #fff; }
.redes a { border-radius: 6px; }
.rodape-base { border-top-color: rgba(255, 255, 255, .1); }

/* Seção escura (vídeo) */
.secao-escura .secao-titulo .rotulo { color: #7fb0ff; }
.vp-play { border-radius: 6px; display: grid; place-items: center; }
.vp-play svg { width: 18px; height: 18px; }

/* Entrada mais discreta */
.revelar { transform: translateY(16px); }

@media (max-width: 980px) {
  .mega-painel { display: none; }
  .menu > li { display: block; }
  .menu > li > a { padding: 14px; }
  .menu > li > a::after { display: none; }
  .faixa-selos .hero-selos { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .faixa-selos .hero-selos > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .slide-grade { min-height: 0; }
  .ficha-arte { inset: 10px 0; }
}
@media (max-width: 860px) {
  .cabecalho .container { height: 68px; }
  .menu { top: 71px; align-self: auto; }
}
@media (max-width: 640px) {
  .cabecalho .container { height: 64px; }
  .menu { top: 67px; }
  .slide h1, .slide h2 { font-size: 1.75rem; }
  .faixa-selos .hero-selos > div { padding: 0 10px; gap: 10px; font-size: .78rem; }
  .hero-selos .ic { width: 38px; height: 38px; }
  .cartela { gap: 6px; inset: 0; }
  .cartela-chip span { font-size: .56rem; padding: 3px 5px; }
  .ficha-arte { grid-template-columns: 1fr; }
  .ficha-arte img { display: none; }
  .ficha-tabela div { padding: 8px 0; font-size: .8rem; }
  .faixa-numeros .numero { padding: 6px 14px; }
  .faixa-numeros .numero strong { font-size: 1.8rem; }
  .cabecalho-pagina { padding: 48px 0 44px; }
  .cta::after { left: 20px; }
}

/* Ajustes do tema corporativo */
.faixa-selos .hero-selos { max-width: var(--largura); margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.faixa-selos .hero-selos > div > span:last-child { display: block; line-height: 1.35; }
.faixa-selos .hero-selos strong { display: block; }
.foto-institucional { aspect-ratio: 9 / 7; border-radius: var(--raio); background: #0e1f3b center / cover no-repeat; box-shadow: var(--sombra-forte); }
@media (max-width: 640px) {
  .faixa-selos .hero-selos { padding-left: 16px; padding-right: 16px; }
}

/* =========================================================
   Assistente de compras
   ========================================================= */
.assist-botao {
  position: fixed; right: 22px; bottom: 22px; z-index: 70; display: inline-flex; align-items: center; gap: 10px;
  background: var(--azul); color: #fff; border: 0; border-radius: 28px; padding: 14px 20px 14px 16px; font-weight: 600; font-size: .95rem;
  box-shadow: 0 12px 28px rgba(21, 88, 214, .38); transition: transform .2s var(--suave), background .2s;
}
.assist-botao:hover { background: var(--azul-escuro); transform: translateY(-2px); }
.assist-botao .icone-svg { width: 22px; height: 22px; }
.assist-botao.ativo { opacity: 0; pointer-events: none; }
.assist-painel {
  position: fixed; right: 22px; bottom: 22px; z-index: 110; width: min(400px, calc(100vw - 24px)); height: min(640px, calc(100vh - 44px));
  background: #fff; border: 1px solid var(--borda); border-radius: 12px; box-shadow: 0 24px 60px rgba(10, 26, 51, .28);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.98); transform-origin: bottom right;
  transition: opacity .25s, transform .3s var(--suave), visibility 0s .3s;
}
.assist-painel.aberto { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--suave); }
.assist-topo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--azul-profundo); color: #fff; }
.assist-topo strong { display: block; font-family: var(--fonte-titulo); font-size: 1.05rem; }
.assist-topo small { color: #9fb0c6; font-size: .76rem; display: flex; align-items: center; gap: 6px; }
.assist-topo small i { width: 7px; height: 7px; border-radius: 50%; background: #3cc36b; display: inline-block; }
.assist-avatar { width: 38px; height: 38px; border-radius: 8px; background: var(--azul); display: grid; place-items: center; flex-shrink: 0; }
.assist-avatar .icone-svg { width: 22px; height: 22px; }
.assist-fechar { margin-left: auto; background: rgba(255,255,255,.1); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 6px; font-size: 1.3rem; line-height: 1; }
.assist-mensagens { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--fundo-alt); }
.assist-msg { max-width: 88%; font-size: .9rem; line-height: 1.45; }
.assist-msg p { padding: 10px 13px; border-radius: 10px; }
.assist-msg.bot p { background: #fff; border: 1px solid var(--borda); border-top-left-radius: 3px; color: var(--texto); }
.assist-msg.eu { align-self: flex-end; }
.assist-msg.eu p { background: var(--azul); color: #fff; border-top-right-radius: 3px; }
.assist-msg.entrando { animation: trocarFoto .35s var(--suave); }
.assist-digitando { display: flex; gap: 4px; padding: 13px 14px; background: #fff; border: 1px solid var(--borda); border-radius: 10px; width: max-content; }
.assist-digitando span { width: 6px; height: 6px; border-radius: 50%; background: var(--texto-suave); animation: digitar 1s infinite ease-in-out; }
.assist-digitando span:nth-child(2) { animation-delay: .15s; } .assist-digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes digitar { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.assist-produtos, .assist-pedidos { display: grid; gap: 8px; margin-top: 8px; }
.assist-produto { display: grid; grid-template-columns: 76px 1fr; gap: 10px; background: #fff; border: 1px solid var(--borda); border-radius: 8px; padding: 8px; }
.assist-produto img { width: 76px; height: 64px; object-fit: cover; border-radius: 6px; }
.assist-produto strong { display: block; font-size: .86rem; color: var(--azul-profundo); line-height: 1.25; }
.assist-produto small { display: flex; align-items: center; gap: 6px; color: var(--texto-suave); font-size: .76rem; margin: 3px 0 6px; }
.assist-produto small i { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1px var(--borda); }
.assist-produto span { display: flex; gap: 6px; flex-wrap: wrap; }
.assist-produto button, .assist-pedido button, .assist-acoes button {
  border: 1px solid var(--borda); background: #fff; border-radius: 6px; padding: 5px 10px; font-size: .78rem; font-weight: 600; color: var(--azul);
  display: inline-flex; align-items: center; gap: 6px;
}
.assist-produto button.primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.assist-produto button:disabled { background: #e8f5e9; border-color: #c8e6c9; color: #2e7d32; }
.assist-pedido { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--borda); border-radius: 8px; padding: 10px; }
.assist-pedido strong { display: block; font-size: .84rem; color: var(--azul-profundo); }
.assist-pedido small { display: block; font-size: .74rem; color: var(--texto-suave); }
.assist-pedido button { flex-shrink: 0; }
.assist-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.assist-acoes .icone-svg { width: 15px; height: 15px; }
.assist-atalhos { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px 4px; border-top: 1px solid var(--borda); scrollbar-width: none; }
.assist-atalhos::-webkit-scrollbar { display: none; }
.assist-atalhos button { flex-shrink: 0; border: 1px solid var(--borda); background: #fff; border-radius: 16px; padding: 6px 12px; font-size: .8rem; font-weight: 500; color: var(--texto); white-space: nowrap; }
.assist-atalhos button:hover { border-color: var(--azul); color: var(--azul); }
.assist-form { display: flex; gap: 8px; padding: 10px 12px; }
.assist-form input { flex: 1; min-width: 0; border: 1px solid var(--borda); border-radius: 6px; padding: 11px 12px; font-size: .9rem; }
.assist-form input:focus { outline: 2px solid var(--azul); border-color: transparent; }
.assist-form button { width: 44px; border: 0; border-radius: 6px; background: var(--azul); color: #fff; display: grid; place-items: center; }
.assist-form .icone-svg { width: 20px; height: 20px; }
.assist-whats { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; font-size: .84rem; font-weight: 600; color: #1a8f4c; background: #f1faf4; border-top: 1px solid var(--borda); }
.assist-whats svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .assist-botao { right: 14px; bottom: 14px; padding: 13px 15px; }
  .assist-botao span { display: none; }
  .assist-painel { right: 0; bottom: 0; width: 100%; height: 100%; border-radius: 0; }
  .assist-form input { font-size: 16px; }
}

/* =========================================================
   Inspiração: fotos reais de casas por cor
   ========================================================= */
.secao-inspiracao { background: #0a2a6b; color: #fff; }
.secao-inspiracao .secao-titulo h2 { color: #fff; }
.secao-inspiracao .secao-titulo p { color: #b8cbeb; }
.secao-inspiracao .secao-titulo .rotulo { color: #5ec8f2; }
.insp-filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 22px; scrollbar-width: none; }
.insp-filtros::-webkit-scrollbar { display: none; }
.insp-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; background: transparent; color: #fff; font: 600 .86rem/1 var(--fonte-titulo, inherit); letter-spacing: .02em; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.insp-chip i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
.insp-chip:hover { border-color: #fff; }
.insp-chip.ativo { background: #fff; color: #0a2a6b; border-color: #fff; }
.insp-area { position: relative; }
.insp-trilho { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 23%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent; }
.insp-card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: #13366f; scroll-snap-align: start; cursor: pointer; animation: insp-entrar .5s var(--suave, ease) both; }
.insp-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--suave, ease); }
.insp-card:hover img { transform: scale(1.05); }
.insp-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,16,40,0) 45%, rgba(5,16,40,.88)); pointer-events: none; }
.insp-legenda { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 16px; display: grid; gap: 4px; }
.insp-rotulo { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #9fd6f0; }
.insp-legenda strong { font: 700 1.05rem/1.2 var(--fonte-titulo, inherit); color: #fff; }
.insp-tinta { margin-top: 8px; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 4px; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); color: #fff; text-align: left; font: inherit; font-size: .8rem; cursor: pointer; transition: background .2s; }
.insp-tinta:hover { background: rgba(255,255,255,.26); }
.insp-tinta i { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.insp-tinta span { display: grid; line-height: 1.25; font-weight: 600; }
.insp-tinta small { font-weight: 400; color: #c9d8ee; }
.insp-seta { position: absolute; top: 50%; z-index: 2; width: 42px; height: 42px; margin-top: -21px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(10,42,107,.55); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background .2s; }
.insp-seta:hover { background: #fff; color: #0a2a6b; }
.insp-seta.anterior { left: -18px; }
.insp-seta.proxima { right: -18px; }
.insp-credito { margin: 14px 0 0; font-size: .74rem; color: #8fa8cf; }
@keyframes insp-entrar { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .insp-trilho { grid-auto-columns: 42%; } }
@media (max-width: 560px) {
  .insp-trilho { grid-auto-columns: 72%; }
  .insp-seta { display: none; }
}
@media (prefers-reduced-motion: reduce) { .insp-card { animation: none; } .insp-card img { transition: none; } }
.slide.com-foto { position: relative; }
.modal-foto .caixa-foto { object-fit: contain; background: #e6e3df; }
.slide-arte .slide-foto { display: block; width: 100%; max-height: 440px; object-fit: cover; border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: insp-entrar .8s var(--suave, ease) both; }
.slide[data-arte="caixas"] .slide-foto { object-fit: contain; background: #dcd8d3; }
@media (max-width: 900px) { .slide-arte .slide-foto { max-height: 260px; } }

/* =========================================================
   Página "Pintura a pó"
   ========================================================= */
.indice-pagina { position: relative; background: #fff; border-bottom: 1px solid var(--borda); }
.indice-pagina .container { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.indice-pagina .container::-webkit-scrollbar { display: none; }
.indice-pagina a { flex: none; padding: 14px 14px; font-size: .88rem; font-weight: 600; color: var(--texto-suave); text-decoration: none; border-bottom: 2px solid transparent; }
.indice-pagina a:hover { color: var(--azul); border-bottom-color: var(--azul); }
.rotulo-texto { display: inline-block; margin-bottom: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--azul); }
.foto-real { margin: 0; }
.foto-real img { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: var(--sombra-forte); }
.foto-real figcaption { margin-top: 10px; font-size: .82rem; color: var(--texto-suave); }
.etapas { display: grid; gap: 20px; }
.etapa { display: grid; grid-template-columns: 72px 1fr; gap: 24px; align-items: start; padding: 28px; background: #fff; border: 1px solid var(--borda); border-radius: 6px; }
.etapa:has(.etapa-foto) { grid-template-columns: 72px 1fr 38%; }
.etapa-num { font: 700 2.4rem/1 var(--fonte-titulo, inherit); color: var(--azul); }
.etapa-corpo h3 { margin: 0 0 6px; font-size: 1.3rem; }
.etapa-corpo > p { margin: 0 0 14px; color: var(--texto-suave); }
.etapa-foto { margin: 0; }
.etapa-foto img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; border-radius: 4px; display: block; }
.equip-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.equip-lista li { display: grid; gap: 2px; padding-left: 16px; border-left: 3px solid var(--azul-claro); }
.equip-lista strong { color: var(--texto); }
.equip-lista span { color: var(--texto-suave); font-size: .93rem; }
.grade-vantagens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tabela-rolagem { overflow-x: auto; background: #fff; border: 1px solid var(--borda); border-radius: 6px; }
.tabela-uso { width: 100%; border-collapse: collapse; min-width: 620px; }
.tabela-uso th, .tabela-uso td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--borda); font-size: .94rem; }
.tabela-uso th { background: var(--fundo-alt); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.tabela-uso tr:last-child td { border-bottom: 0; }
.tabela-uso a { color: var(--azul); font-weight: 600; }
.lista-limites { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-limites li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 16px 18px; background: var(--fundo-alt); border-radius: 6px; }
.lista-limites .icone-svg { width: 22px; height: 22px; color: #c77700; }
.lista-limites span { display: grid; gap: 2px; color: var(--texto-suave); font-size: .93rem; }
.lista-limites strong { color: var(--texto); font-size: 1rem; }
@media (max-width: 900px) {
  .etapa, .etapa:has(.etapa-foto) { grid-template-columns: 1fr; gap: 12px; padding: 22px; }
  .etapa-foto { order: -1; }
  .grade-vantagens { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .grade-vantagens { grid-template-columns: 1fr; } }
.chip .chip-cor { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 50%; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.processo-real { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; align-items: center; }
.passos-real { list-style: none; counter-reset: passo; margin: 0; padding: 0; display: grid; gap: 18px; }
.passos-real li { counter-increment: passo; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; }
.passos-real li::before { content: counter(passo, decimal-leading-zero); grid-row: span 2; font: 700 1.5rem/1 var(--fonte-titulo, inherit); color: #6fa0ff; }
.passos-real strong { color: #fff; font-size: 1.05rem; }
.passos-real span { color: #a9bcd6; font-size: .93rem; }
.secao-escura .foto-real img { box-shadow: 0 24px 60px rgba(0,0,0,.4); }
@media (max-width: 900px) { .processo-real { grid-template-columns: 1fr; } }
@media (min-width: 981px) {
  .menu > li > a { white-space: nowrap; padding: 0 12px; }
  .menu > li > a::after { left: 12px; right: 12px; }
}
@media (min-width: 981px) and (max-width: 1180px) {
  .acoes-topo .texto { display: none; }
  .menu > li > a { padding: 0 8px; font-size: .9rem; }
  .menu > li > a::after { left: 8px; right: 8px; }
}
.processo-real + .centro { text-align: center; }

/* Slides em tela cheia com foto de fundo (estilo WEG) */
.slide.com-foto { background-size: cover; background-position: center; }
.slide.com-foto::before { background: linear-gradient(90deg, rgba(6,16,36,.92) 0%, rgba(6,16,36,.72) 38%, rgba(6,16,36,.15) 75%, rgba(6,16,36,0) 100%); z-index: 0; }
.slide.com-foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(0deg, rgba(6,16,36,.55), transparent); }
.slide.com-foto .slide-grade { z-index: 1; min-height: 620px; }
.slide.com-foto .slide-texto { max-width: 600px; }
.slide.com-foto[data-arte="caixas"] { background-position: 80% center; background-color: #d9d6d1; }
@media (max-width: 760px) {
  .slide.com-foto::before { background: linear-gradient(0deg, rgba(6,16,36,.94) 20%, rgba(6,16,36,.6) 70%, rgba(6,16,36,.35)); }
  .slide.com-foto .slide-grade { min-height: 560px; align-items: end; }
}

/* =========================================================
   Início: etapas com foto + blocos no estilo WEG
   ========================================================= */
.passos-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.passo-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.passo-img { aspect-ratio: 4 / 3; background: #10284f; overflow: hidden; }
.passo-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--suave, ease); }
.passo-card:hover .passo-img img { transform: scale(1.05); }
.passo-dado { display: grid; place-content: center; text-align: center; gap: 6px; background: radial-gradient(circle at 50% 110%, #ff7a18 0%, #b1310f 35%, #3a1408 70%, #1a0c07 100%); }
.passo-dado strong { font: 700 2rem/1 var(--fonte-titulo, inherit); color: #fff; }
.passo-dado small { color: #ffd9c2; font-size: .82rem; }
.passo-txt { padding: 18px 18px 22px; }
.passo-txt span { font: 700 .85rem/1 var(--fonte-titulo, inherit); color: #6fa0ff; letter-spacing: .1em; }
.passo-txt h3 { margin: 6px 0; color: #fff; font-size: 1.1rem; }
.passo-txt p { margin: 0; color: #a9bcd6; font-size: .9rem; }
@media (max-width: 980px) { .passos-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .passos-cards { grid-template-columns: 1fr; } }

.secao-weg { background: #0a2a6b; color: #fff; }
.secao-weg .secao-titulo h2 { color: #fff; }
.secao-weg .secao-titulo .rotulo { color: #5ec8f2; }
.pilula-slider { position: relative; display: grid; }
.pilula { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 32%) minmax(0, 36%); align-items: center; opacity: 0; visibility: hidden; transition: opacity .7s var(--suave, ease), visibility 0s .7s; }
.pilula.ativa { opacity: 1; visibility: visible; transition: opacity .7s var(--suave, ease); }
.pilula-foto { position: relative; z-index: 1; height: 300px; border-radius: 0 999px 999px 0; overflow: hidden; }
.pilula-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pilula-card { margin-left: -60px; padding: 36px 64px 36px 110px; min-height: 250px; display: flex; flex-direction: column; justify-content: center; gap: 12px; background: #fff; color: var(--texto); border-radius: 0 999px 999px 0; }
.pilula-card h3 { margin: 0; padding-bottom: 10px; border-bottom: 2px solid #1d2733; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; color: #3b4450; }
.pilula-card p { margin: 0; color: var(--texto-suave); font-size: .93rem; }
.btn-contorno-escuro { align-self: flex-start; padding: 9px 16px; border: 2px solid #3b4450; border-radius: 6px; color: #3b4450; font-size: .78rem; font-weight: 700; text-transform: uppercase; background: transparent; }
.btn-contorno-escuro:hover { background: #3b4450; color: #fff; }
.pilula-setas { position: absolute; left: 50%; bottom: -58px; display: flex; gap: 14px; transform: translateX(-50%); }
.pilula-setas button { width: 34px; height: 34px; border: 1px solid #5ec8f2; border-radius: 50%; background: transparent; color: #5ec8f2; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.pilula-setas button:hover { background: #5ec8f2; color: #0a2a6b; }
.secao-weg:has([data-pilulas]) { padding-bottom: 110px; }
.secao-conteudo { padding-top: 40px; padding-bottom: 80px; }
.conteudo-grade { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: start; }
.titulo-fino { margin: 0; font: 300 clamp(2.4rem, 5vw, 4rem)/1 var(--fonte-titulo, inherit); color: #5ec8f2; text-transform: uppercase; letter-spacing: .02em; }
.lista-conteudo { display: grid; }
.lista-conteudo > a { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.35); color: #fff; text-decoration: none; }
.lista-conteudo > a span { color: #5ec8f2; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; padding-top: 2px; }
.lista-conteudo > a strong { font-weight: 400; }
.lista-conteudo > a:hover strong { font-weight: 700; }
.centro-dir { text-align: right; margin-top: 28px; }
.btn-contorno-ciano { padding: 10px 16px; border: 2px solid #5ec8f2; border-radius: 6px; color: #5ec8f2; font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.btn-contorno-ciano:hover { background: #5ec8f2; color: #0a2a6b; }
.faixa-news { padding: 0; background: linear-gradient(180deg, #0a2a6b 60%, #fff 60%); }
.news-caixa { display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px; align-items: center; padding: 40px 48px; background: #29b6dc; color: #0a2a6b; }
.news-titulo { display: grid; line-height: 1.05; }
.news-titulo small { font-size: 1rem; text-transform: uppercase; }
.news-titulo strong { font: 400 2rem/1 var(--fonte-titulo, inherit); text-transform: uppercase; }
.news-linha { display: flex; background: #fff; border-radius: 6px; overflow: hidden; }
.news-linha input { flex: 1; min-width: 0; padding: 13px 16px; border: 0; font: inherit; font-size: .9rem; outline: none; }
.news-linha button { padding: 0 22px; border: 0; background: #0a4c9c; color: #fff; font-weight: 700; font-size: .8rem; text-transform: uppercase; cursor: pointer; }
.news-linha button:disabled { opacity: .6; }
.news-aviso { margin: 8px 0 0; font-size: .76rem; color: #0a3a6b; }
.news-aviso a { color: #0a2a6b; text-decoration: underline; }
.news-status { margin: 6px 0 0; font-size: .85rem; font-weight: 600; min-height: 1em; }
.news-status.erro { color: #7a0d0d; }
@media (max-width: 900px) {
  .pilula { grid-template-columns: 1fr; }
  .pilula-foto { height: 200px; border-radius: 0; margin-right: 0; }
  .pilula-card { margin: -30px 16px 0; padding: 26px 22px; border-radius: 6px; min-height: 0; position: relative; z-index: 2; }
  .conteudo-grade { grid-template-columns: 1fr; gap: 16px; }
  .lista-conteudo > a { grid-template-columns: 1fr; gap: 4px; }
  .news-caixa { grid-template-columns: 1fr; padding: 28px 22px; }
}
.etapa-foto.passo-dado { min-height: 220px; border-radius: 4px; }

/* =========================================================
   Movimento: vídeo e zoom no topo, faixa rolante, parallax,
   vídeo da marca e barra de leitura
   ========================================================= */
.slide.com-foto { background-image: none !important; }
.slide-fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; background-size: cover; background-position: center; transform-origin: 60% 50%; }
.slide.com-foto::before, .slide.com-foto::after { z-index: 1; }
.slide.com-foto .slide-grade { z-index: 2; }
.slide-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide.ativo .slide-fundo { animation: zoom-lento 9s ease-out both; }
.slide.ativo .slide-fundo:has(.slide-video) { animation: none; }
.slide[data-arte="caixas"] .slide-fundo { background-position: 80% center; background-color: #d9d6d1; }
@keyframes zoom-lento { from { transform: scale(1.12) translateX(1.5%); } to { transform: scale(1) translateX(0); } }

.faixa-imagens { padding: 28px 0; background: #0a1a33; overflow: hidden; display: grid; gap: 14px; }
.faixa-linha { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.faixa-trilho { display: flex; gap: 14px; width: max-content; animation: faixa-rolar 60s linear infinite; }
.faixa-linha.reversa .faixa-trilho { animation-direction: reverse; animation-duration: 70s; }
.faixa-imagens:hover .faixa-trilho, .faixa-trilho:focus-within { animation-play-state: paused; }
.faixa-item { position: relative; flex: none; width: 340px; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; }
.faixa-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--suave, ease), filter .6s; filter: saturate(.9); }
.faixa-item:hover img { transform: scale(1.08); filter: saturate(1.1); }
.faixa-item span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 10px; background: linear-gradient(0deg, rgba(6,16,36,.85), transparent); color: #fff; font-size: .85rem; font-weight: 600; transform: translateY(6px); opacity: .9; transition: transform .4s, opacity .4s; }
.faixa-item:hover span { transform: none; opacity: 1; }
@keyframes faixa-rolar { to { transform: translateX(calc(-50% - 7px)); } }
@media (max-width: 560px) { .faixa-item { width: 240px; } }

.video-marca { position: relative; margin-bottom: 28px; border-radius: 6px; overflow: hidden; background: #0a1a33; box-shadow: 0 24px 60px rgba(0,0,0,.4); aspect-ratio: 16 / 9; }
.video-marca video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vm-som { position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; background: rgba(6,16,36,.55); backdrop-filter: blur(6px); color: #fff; font: 600 .85rem/1 inherit; cursor: pointer; transition: background .2s; }
.vm-som:hover { background: #1558d6; border-color: #1558d6; }
.vm-som .icone-svg { width: 16px; height: 16px; }
.video-marca.sem-video { display: none; }

.passo-img { position: relative; }
.passo-selo { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 3px; background: rgba(6,16,36,.8); color: #fff; font: 700 .85rem/1 var(--fonte-titulo, inherit); font-style: normal; }

.faixa-parallax { position: relative; overflow: hidden; color: #fff; padding: 110px 0; }
.fp-fundo { position: absolute; inset: -90px 0; background-size: cover; background-position: center; transform: translate3d(0, var(--desloc, 0px), 0); will-change: transform; }
.faixa-parallax::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(6,16,36,.92), rgba(6,16,36,.55)); }
.fp-conteudo { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.fp-dado { padding-left: 18px; border-left: 3px solid #4d8bff; }
.fp-dado strong { display: block; font: 700 clamp(2rem, 4vw, 3.2rem)/1.05 var(--fonte-titulo, inherit); }
.fp-dado span { color: #c3d4ee; font-size: .95rem; }
@media (max-width: 900px) { .fp-conteudo { grid-template-columns: 1fr 1fr; row-gap: 32px; } .faixa-parallax { padding: 70px 0; } }

.progresso-leitura { position: fixed; left: 0; top: 0; z-index: 1000; width: 100%; height: 3px; background: linear-gradient(90deg, #1558d6, #5ec8f2); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .faixa-trilho { animation-duration: 110s; }
  .faixa-linha.reversa .faixa-trilho { animation-duration: 130s; }
  .slide.ativo .slide-fundo { animation: none; }
}
.faixa-imagens { position: relative; }
.faixa-imagens.parada .faixa-trilho { animation-play-state: paused; }
.faixa-pausa, .slider-pausa { position: absolute; z-index: 5; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: rgba(6,16,36,.6) center / 14px no-repeat; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 2h3v10H3zM8 2h3v10H8z' fill='%23fff'/%3E%3C/svg%3E"); }
.faixa-imagens.parada .faixa-pausa, .slider-pausa.parado { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 1.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E"); }
.faixa-pausa { right: 14px; bottom: 12px; }
.slider-pausa { right: 24px; bottom: 22px; }
.faixa-pausa:hover, .slider-pausa:hover { background-color: #1558d6; border-color: #1558d6; }
@media (max-width: 760px) { .slide.com-foto .slide-grade { padding-bottom: 76px; } }

/* =========================================================
   Blocos do mapa WEG: linhas com foto, segmentos com arrastar,
   banner de parceiros, busca no topo, voltar ao topo
   ========================================================= */
.linhas-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.linha-card { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: #10284f; color: #fff; text-decoration: none; }
.linha-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--suave, ease); }
.linha-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,16,36,0) 35%, rgba(6,16,36,.88)); transition: background .4s; }
.linha-card:hover img, .linha-card:focus-visible img { transform: scale(1.07); }
.linha-card:hover::after { background: linear-gradient(180deg, rgba(10,42,107,.35) 0%, rgba(6,16,36,.92)); }
.linha-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 20px 22px; }
.linha-info h3 { margin: 0 0 4px; font-size: 1.35rem; color: #fff; }
.linha-info p { margin: 0; max-width: 34ch; color: #d3def0; font-size: .9rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s var(--suave, ease), opacity .45s; }
.linha-card:hover .linha-info p, .linha-card:focus-visible .linha-info p { max-height: 5em; opacity: 1; }
.linha-seta { position: absolute; right: 20px; bottom: 20px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #1558d6; transform: translateX(-8px); opacity: 0; transition: transform .35s, opacity .35s; }
.linha-seta .icone-svg { width: 18px; height: 18px; }
.linha-card:hover .linha-seta, .linha-card:focus-visible .linha-seta { transform: none; opacity: 1; }
@media (hover: none) { .linha-info p { max-height: 5em; opacity: 1; } .linha-seta { opacity: 1; transform: none; } }
@media (max-width: 900px) { .linhas-grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .linhas-grade { grid-template-columns: 1fr; } }

.segmentos { position: relative; }
.seg-trilho { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 22%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px max(16px, calc((100vw - var(--largura, 1200px)) / 2)) 18px; scrollbar-width: thin; cursor: grab; }
.seg-trilho.arrastando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.segmento { scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--borda); border-radius: 6px; overflow: hidden; color: var(--texto); text-decoration: none; transition: transform .3s, box-shadow .3s; }
.segmento:hover { transform: translateY(-4px); box-shadow: var(--sombra-forte); }
.segmento img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; pointer-events: none; }
.segmento div { padding: 16px 18px 20px; }
.segmento h3 { margin: 0 0 4px; font-size: 1.05rem; }
.segmento p { margin: 0; color: var(--texto-suave); font-size: .88rem; }
.seg-seta { position: absolute; top: 40%; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; box-shadow: var(--sombra-forte); color: var(--azul); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.seg-seta.ant { left: 12px; } .seg-seta.prox { right: 12px; }
@media (max-width: 560px) { .seg-trilho { grid-auto-columns: 78%; } .seg-seta { display: none; } }

.banner-parceiro { position: relative; overflow: hidden; padding: 120px 0; color: #fff; }
.banner-parceiro::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(6,16,36,.94) 0%, rgba(6,16,36,.7) 50%, rgba(6,16,36,.25)); }
.bp-conteudo { position: relative; z-index: 2; max-width: 620px; margin-left: max(16px, calc((100vw - var(--largura, 1200px)) / 2)); }
.bp-conteudo h2 { color: #fff; margin: 4px 0 10px; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.bp-conteudo p { color: #c9d8ee; margin: 0 0 22px; }

.revelar-lado { transform: translateX(60px); }
.revelar-lado.visivel { transform: none; }

.busca-topo { position: relative; display: flex; align-items: center; }
.busca-topo input { width: 240px; padding: 5px 30px 5px 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 3px; background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: .8rem; transition: width .3s, background .3s; }
.busca-topo input::placeholder { color: rgba(255,255,255,.65); }
.busca-topo input:focus { outline: none; width: 290px; background: rgba(255,255,255,.16); border-color: #5ec8f2; }
.busca-topo .icone-svg { position: absolute; right: 8px; width: 15px; height: 15px; pointer-events: none; color: rgba(255,255,255,.8); }

.voltar-topo { position: fixed; left: 20px; bottom: 22px; z-index: 900; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #0a2a6b; color: #fff; box-shadow: var(--sombra-forte); cursor: pointer; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .3s, background .2s; }
.voltar-topo .icone-svg { width: 20px; height: 20px; transform: rotate(-90deg); }
.voltar-topo.visivel { opacity: 1; transform: none; pointer-events: auto; }
.voltar-topo:hover { background: #1558d6; }

.redes a svg { width: 18px; height: 18px; }
@media (max-width: 980px) { .busca-topo { display: none; } }
main { overflow-x: clip; }

/* =========================================================
   Painel da empresa (admin.html)
   ========================================================= */
.admin-aviso { max-width: 620px; margin: 20px auto; padding: 32px; text-align: center; background: var(--fundo-alt); border: 1px solid var(--borda); border-radius: 6px; }
.admin-aviso h2 { margin-top: 0; }
.admin-demo { margin-bottom: 18px; padding: 12px 16px; border-left: 4px solid #f7c600; background: #fff9e0; border-radius: 4px; font-size: .92rem; }
.admin-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 10px; }
.admin-barra .busca { flex: 1 1 240px; }
.admin-barra .busca input, .admin-barra select { width: 100%; padding: 11px 14px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; background: #fff; }
.admin-barra select { flex: 0 1 220px; width: auto; }
.admin-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.admin-contagem { color: var(--texto-suave); font-size: .9rem; margin: 6px 0 12px; }
.admin-tabela { width: 100%; border-collapse: collapse; min-width: 760px; }
.admin-tabela th, .admin-tabela td { padding: 12px 14px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: middle; font-size: .92rem; }
.admin-tabela th { background: var(--fundo-alt); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); }
.admin-tabela tr.oculto td { opacity: .55; }
.admin-tabela tr.oculto td:nth-last-child(-n+2) { opacity: 1; }
.admin-prod { display: flex; align-items: center; gap: 12px; }
.admin-prod img { width: 64px; height: 51px; object-fit: cover; border-radius: 4px; flex: none; }
.admin-prod small { display: block; color: var(--texto-suave); font-size: .8rem; }
.admin-bolinhas { display: flex; gap: 4px; align-items: center; }
.admin-bolinhas i { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.admin-status { padding: 5px 12px; border: 1px solid var(--borda); border-radius: 999px; background: #fff; font: inherit; font-size: .8rem; cursor: pointer; }
.admin-status.on { background: #e7f7ec; border-color: #9fd9b2; color: #146c33; }
.admin-botoes { white-space: nowrap; }
.admin-botoes button { padding: 6px 10px; margin-left: 4px; border: 1px solid var(--borda); border-radius: 4px; background: #fff; font: inherit; font-size: .82rem; cursor: pointer; }
.admin-botoes button:hover { border-color: var(--azul); color: var(--azul); }
.admin-botoes .perigo:hover { border-color: #c62828; color: #c62828; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.admin-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(6,16,36,.6); }
.admin-form { width: min(880px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: #fff; border-radius: 8px; box-shadow: var(--sombra-forte); }
.admin-form header, .admin-form footer { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--borda); }
.admin-form footer { border-bottom: 0; border-top: 1px solid var(--borda); justify-content: flex-end; }
.admin-form header h2 { margin: 0; font-size: 1.2rem; flex: 1; }
.admin-form .fechar { border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--texto-suave); }
.admin-form-corpo { padding: 20px 22px; overflow-y: auto; }
.grade-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.grade-campos label { display: grid; gap: 5px; font-size: .85rem; font-weight: 600; color: var(--texto); }
.grade-campos .largo { grid-column: 1 / -1; }
.grade-campos input, .grade-campos select, .grade-campos textarea { padding: 10px 12px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; font-weight: 400; }
.grade-campos input[readonly] { background: var(--fundo-alt); color: var(--texto-suave); }
.grade-campos small { font-weight: 400; color: var(--texto-suave); font-size: .78rem; }
.grade-campos .checks { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.grade-campos .check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.admin-cores { margin-top: 22px; }
.admin-cores-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.admin-cores-topo h3 { margin: 0; font-size: 1rem; }
.admin-cor { display: grid; grid-template-columns: 44px 96px 1fr 64px auto 34px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--borda); }
.admin-cor input[type=color] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--borda); border-radius: 6px; background: #fff; }
.admin-cor input[type=text] { padding: 9px 10px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; min-width: 0; }
.cor-foto { cursor: pointer; }
.cor-previa { display: grid; place-items: center; width: 64px; height: 44px; border: 1px dashed var(--borda); border-radius: 4px; font-size: .72rem; color: var(--texto-suave); overflow: hidden; }
.cor-previa img { width: 100%; height: 100%; object-fit: cover; }
.cor-sem-foto { border: 0; background: none; color: var(--texto-suave); font-size: .78rem; text-decoration: underline; cursor: pointer; }
.cor-remover { width: 34px; height: 34px; border: 1px solid var(--borda); border-radius: 50%; background: #fff; font-size: 1.2rem; cursor: pointer; }
.cor-remover:hover { border-color: #c62828; color: #c62828; }
.form-erro { color: #c62828; font-weight: 600; min-height: 1.2em; margin: 12px 0 0; }
.conta-admin { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 6px; background: #0a2a6b; color: #fff !important; font-weight: 600; text-decoration: none; margin: 6px 0; }
.conta-admin .icone-svg { width: 18px; height: 18px; }
@media (max-width: 700px) {
  .grade-campos { grid-template-columns: 1fr; }
  .admin-cor { grid-template-columns: 44px 1fr 34px; }
  .admin-cor .cor-hex { display: none; }
  .admin-cor .cor-foto, .admin-cor .cor-sem-foto { grid-column: 2; }
}
.admin-barra .busca input { padding-left: 40px; }

/* Isto é Policoating: texto + vídeo institucional */
.inst-grade { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 48px; align-items: center; }
.inst-texto h2 { color: #fff; margin: 6px 0 14px; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.inst-texto p { color: #b8cbeb; }
.inst-lista { list-style: none; padding: 0; margin: 18px 0 26px; display: grid; gap: 12px; }
.inst-lista li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: center; color: #e3ecfa; }
.inst-lista .icone-svg { width: 22px; height: 22px; color: #5ec8f2; }
.inst-video { margin: 0; }
@media (max-width: 900px) { .inst-grade { grid-template-columns: 1fr; gap: 28px; } }

/* Canais: lojas (marketplaces) e redes sociais */
.canais-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.canal { position: relative; display: grid; gap: 2px; padding: 20px 48px 20px 20px; border: 1px solid var(--borda); border-left: 5px solid var(--cor-canal, #1558d6); border-radius: 6px; background: #fff; color: var(--texto); text-decoration: none; transition: transform .25s, box-shadow .25s; }
.canal:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); }
.canal strong { font-size: 1.05rem; }
.canal span { color: var(--texto-suave); font-size: .88rem; }
.canal .icone-svg { position: absolute; right: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--cor-canal, #1558d6); }
.canal-mercadolivre, .loja-mercadolivre { --cor-canal: #e6c200; }
.canal-shopee, .loja-shopee { --cor-canal: #ee4d2d; }
.canal-aliexpress, .loja-aliexpress { --cor-canal: #e62e04; }
.canal-amazon, .loja-amazon { --cor-canal: #ff9900; }
.canal-magalu, .loja-magalu { --cor-canal: #0086ff; }
.canal-whatsappBusiness { --cor-canal: #25d366; }
.canal-instagram { --cor-canal: #d62976; }
.canal-facebook { --cor-canal: #1877f2; }
.canal-youtube { --cor-canal: #ff0000; }
.canal-tiktok { --cor-canal: #111; }
.canal-linkedin { --cor-canal: #0a66c2; }
.rodape-lojas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); }
.rodape-lojas > span { color: rgba(255,255,255,.7); font-size: .88rem; margin-right: 6px; }
.rodape-lojas .loja { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); border-left: 4px solid var(--cor-canal); color: #fff; font-size: .85rem; font-weight: 600; text-decoration: none; }
.rodape-lojas .loja:hover { background: rgba(255,255,255,.08); }

/* Painel: abas, contato, galeria, equipe */
.admin-abas { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 22px; border-bottom: 2px solid var(--borda); }
.admin-abas button { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; background: none; font: inherit; font-weight: 600; color: var(--texto-suave); cursor: pointer; }
.admin-abas button .icone-svg { width: 18px; height: 18px; }
.admin-abas button.ativo { color: var(--azul); border-bottom-color: var(--azul); }
.admin-cfg fieldset { margin: 0 0 22px; padding: 18px 20px 20px; border: 1px solid var(--borda); border-radius: 6px; }
.admin-cfg legend { padding: 0 8px; font-weight: 700; }
.dica { color: var(--texto-suave); font-size: .88rem; margin: 0 0 12px; }
.admin-rodape-form { display: flex; justify-content: flex-end; margin-top: 10px; }
.admin-enviar { cursor: pointer; }
.admin-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
.admin-foto { margin: 0; padding: 10px; border: 1px solid var(--borda); border-radius: 6px; background: #fff; display: grid; gap: 8px; }
.admin-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.admin-foto input { padding: 8px 10px; border: 1px solid var(--borda); border-radius: 4px; font: inherit; font-size: .88rem; }
.admin-foto-acoes { display: flex; gap: 6px; }
.admin-foto-acoes button { padding: 6px 10px; border: 1px solid var(--borda); border-radius: 4px; background: #fff; cursor: pointer; font: inherit; font-size: .82rem; }
.admin-foto-acoes .perigo { margin-left: auto; }
.admin-foto-acoes button:disabled { opacity: .4; cursor: default; }
.admin-equipe { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.admin-equipe li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border: 1px solid var(--borda); border-radius: 6px; background: #fff; }
.admin-equipe li span { display: inline-flex; align-items: center; gap: 10px; }
.admin-equipe .icone-svg { width: 18px; height: 18px; color: var(--azul); }
.admin-equipe em { color: var(--texto-suave); font-style: normal; font-size: .85rem; }
.admin-equipe button { padding: 6px 12px; border: 1px solid var(--borda); border-radius: 4px; background: #fff; cursor: pointer; font: inherit; font-size: .82rem; }
.admin-equipe button:hover, .admin-foto-acoes .perigo:hover { border-color: #c62828; color: #c62828; }
.campo-ficha { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; }
.campo-ficha > div { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-weight: 400; }
.campo-ficha label.btn { cursor: pointer; }
.campo-ficha small { font-weight: 400; color: var(--texto-suave); font-size: .78rem; }

/* =========================================================
   Acesso do cliente
   ========================================================= */
.acesso-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 980px; margin: 0 auto; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: var(--sombra-forte); }
.acesso-grade[hidden] { display: none; }
.acesso-grade .conta-cartao { margin: 0; border: 0; box-shadow: none; border-radius: 0; padding: 36px 36px 28px; }
.acesso-lado { position: relative; min-height: 100%; color: #fff; background: #0a1a33; overflow: hidden; }
.acesso-lado img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.acesso-lado-texto { position: relative; padding: 40px 36px; }
.acesso-lado h2 { color: #fff; margin: 0 0 22px; font-size: 1.6rem; }
.acesso-lado ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.acesso-lado li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.acesso-lado li .icone-svg { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: rgba(77,139,255,.22); color: #9cc2ff; }
.acesso-lado li span { display: grid; color: #c9d8ee; font-size: .92rem; }
.acesso-lado li strong { color: #fff; font-size: 1rem; }
.codigo-casas { position: relative; }
.codigo-casas .campo-codigo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; z-index: 2; cursor: text; }
.codigo-casas .casas { display: flex; gap: 8px; }
.codigo-casas .casas span { flex: 1; max-width: 54px; height: 58px; display: grid; place-items: center; border: 2px solid var(--borda); border-radius: 8px; font: 700 1.6rem/1 var(--fonte-titulo, inherit); color: var(--texto); background: #fff; transition: border-color .15s, box-shadow .15s; }
.codigo-casas .casas span.cheia { border-color: #9db7e6; }
.codigo-casas.foco .casas span.atual { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(21,88,214,.18); }
.codigo-casas.tremer { animation: tremer .4s; }
@keyframes tremer { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.dica-codigo { display: block; margin-top: 8px; color: var(--texto-suave); font-size: .82rem; }
.passos-acesso { display: flex; gap: 6px; list-style: none; padding: 0; margin: 22px 0 0; counter-reset: p; }
.passos-acesso li { flex: 1; counter-increment: p; font-size: .78rem; color: var(--texto-suave); padding-top: 8px; border-top: 3px solid var(--borda); }
.passos-acesso li::before { content: counter(p) ". "; font-weight: 700; }
.passos-acesso li.ativo { color: var(--azul); border-top-color: var(--azul); font-weight: 600; }
@media (max-width: 860px) {
  .acesso-grade { grid-template-columns: 1fr; }
  .acesso-lado-texto { padding: 26px 22px; }
  .acesso-lado ul { gap: 12px; }
  .acesso-grade .conta-cartao { padding: 26px 20px; }
}

/* Menu da conta no cabeçalho */
.conta-ancora { position: relative; }
.menu-conta { position: absolute; right: 0; top: calc(100% + 10px); z-index: 1200; width: 260px; padding: 8px; background: #fff; border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra-forte); display: grid; }
.menu-conta[hidden] { display: none; }
.menu-conta .mc-topo { display: grid; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--borda); }
.menu-conta .mc-topo small { color: var(--texto-suave); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
.menu-conta a, .menu-conta button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 6px; background: none; color: var(--texto); font: inherit; font-size: .92rem; text-align: left; text-decoration: none; cursor: pointer; }
.menu-conta a:hover, .menu-conta button:hover { background: var(--fundo-alt); color: var(--azul); }
.menu-conta .icone-svg { width: 18px; height: 18px; }
.menu-conta [data-sair] { border-top: 1px solid var(--borda); border-radius: 0 0 6px 6px; margin-top: 4px; }
.menu-conta .mc-admin { color: #0a2a6b; font-weight: 600; }

/* Assistente: formatação, comparação, links, sugestões, voz, convite */
.assist-msg strong { font-weight: 700; }
.assist-comparar { overflow-x: auto; margin-top: 8px; }
.assist-comparar table { width: 100%; border-collapse: collapse; font-size: .8rem; background: #fff; border-radius: 6px; overflow: hidden; }
.assist-comparar th, .assist-comparar td { padding: 6px 8px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; }
.assist-comparar thead th { background: #0a2a6b; color: #fff; }
.assist-comparar tbody th { color: var(--texto-suave); font-weight: 600; white-space: nowrap; }
.assist-comparar td { letter-spacing: .5px; }
.assist-links { display: grid; gap: 6px; margin-top: 8px; }
.assist-links a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 6px; background: #fff; color: var(--azul); font-weight: 600; font-size: .88rem; text-decoration: none; }
.assist-links a .icone-svg { width: 16px; height: 16px; }
.assist-links a:hover { border-color: var(--azul); }
.assist-sugestoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.assist-sugestoes button { padding: 6px 11px; border: 1px solid #b9cdf3; border-radius: 999px; background: #eef4ff; color: #0d3fa6; font: inherit; font-size: .8rem; cursor: pointer; }
.assist-sugestoes button:hover { background: #1558d6; border-color: #1558d6; color: #fff; }
.assist-limpar { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; }
.assist-limpar .icone-svg { width: 16px; height: 16px; }
.assist-limpar:hover { background: rgba(255,255,255,.25); }
.assist-voz { width: 40px; flex: none; display: grid; place-items: center; border: 0; background: none; color: var(--texto-suave); cursor: pointer; }
.assist-voz .icone-svg { width: 20px; height: 20px; }
.assist-voz.ouvindo { color: #e53935; animation: pulsar-voz 1s infinite; }
@keyframes pulsar-voz { 50% { transform: scale(1.15); } }
.assist-convite { position: fixed; right: 22px; bottom: 96px; z-index: 950; max-width: 260px; padding: 14px 34px 14px 16px; border-radius: 12px 12px 4px 12px; background: #fff; box-shadow: var(--sombra-forte); font-size: .9rem; cursor: pointer; animation: insp-entrar .5s both; }
.assist-convite button { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 1.1rem; color: var(--texto-suave); cursor: pointer; }
.assist-form .assist-voz { background: none !important; color: var(--texto-suave) !important; border: 1px solid var(--borda) !important; border-radius: 6px; } .assist-form .assist-voz.ouvindo { color: #e53935 !important; border-color: #e53935 !important; }

/* Janela do produto: quantidade em caixas ou sob medida, calculadora pela área */
.seletor-embalagem [data-emb="Sob medida"] { border-style: dashed; }
.nota-sob-medida { margin: 8px 0 0; font-size: .82rem; color: var(--texto-suave); }
.campo-qtd { display: flex; align-items: center; gap: 6px; margin-top: 16px; }
.campo-qtd #unidade-qtd { font-weight: 400; color: var(--texto-suave); }
.link-calc { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--azul); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.link-calc .icone-svg { width: 16px; height: 16px; }
.calc-area { margin: 8px 0 4px; padding: 12px 14px; background: var(--fundo-alt); border: 1px solid var(--borda); border-radius: 8px; }
.calc-area label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; }
.calc-area input { padding: 9px 12px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; max-width: 180px; }
.calc-area p { margin: 8px 0 0; font-size: .82rem; color: var(--texto-suave); }
.linha-compra .quantidade input { width: 72px; }
.resumo-qtd { margin: 8px 0 0; font-size: .85rem; color: var(--texto-suave); }
.acoes-extra { margin-top: 16px; }
.quantidade-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.quantidade-linha .unidade { font-size: .8rem; color: var(--texto-suave); }
.resumo-kg { margin: -4px 0 10px; text-align: right; font-size: .85rem; color: var(--texto-suave); }

/* Painel: pedidos */
.pedidos-resumo { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
.pedidos-resumo span { padding: 8px 14px; border: 1px solid var(--borda); border-radius: 6px; background: #fff; font-size: .88rem; color: var(--texto-suave); }
.pedidos-resumo strong { color: var(--texto); font-size: 1.05rem; margin-right: 4px; }
.admin-pedidos { display: grid; gap: 14px; }
.adm-pedido { border: 1px solid var(--borda); border-left: 5px solid #1558d6; border-radius: 6px; background: #fff; }
.adm-pedido header, .adm-pedido footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.adm-pedido header { border-bottom: 1px solid var(--borda); }
.adm-pedido header small { display: block; color: var(--texto-suave); font-size: .8rem; }
.adm-pedido-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; padding: 14px 16px; }
.adm-cliente { display: grid; gap: 3px; }
.adm-cliente small { color: var(--texto-suave); font-size: .84rem; }
.adm-pedido ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.adm-pedido ul small { display: block; color: var(--texto-suave); font-size: .82rem; }
.adm-pedido .obs { grid-column: 1 / -1; margin: 0; padding: 8px 12px; background: var(--fundo-alt); border-radius: 4px; font-size: .86rem; }
.adm-pedido footer { border-top: 1px solid var(--borda); background: var(--fundo-alt); }
.adm-pedido footer .btn { padding: 8px 14px; font-size: .85rem; }
@media (max-width: 700px) { .adm-pedido-corpo { grid-template-columns: 1fr; } }

/* Painel: busca de pedidos e cargos da equipe */
.busca-pedidos { display: grid; gap: 8px; margin-bottom: 14px; padding: 18px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo-alt); }
.busca-pedidos label { font-weight: 700; }
.busca-pedidos small { color: var(--texto-suave); font-size: .82rem; }
.busca-pedidos-linha { display: flex; flex-wrap: wrap; gap: 10px; }
.busca-pedidos-linha input { flex: 1 1 280px; min-width: 0; padding: 13px 16px; border: 2px solid var(--azul); border-radius: 6px; font: inherit; font-size: 1rem; background: #fff; }
.busca-pedidos-linha select { flex: 0 1 200px; padding: 11px 12px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; background: #fff; }
.btn-copiar { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 3px 8px; border: 1px solid var(--borda); border-radius: 4px; background: #fff; font: inherit; font-size: .75rem; color: var(--azul); cursor: pointer; }
.btn-copiar:hover { border-color: var(--azul); }
.cargo { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.cargo-admin { background: #e5edfb; color: #0d3f9e; }
.cargo-vendedor { background: #e3f5ea; color: #1d6b3b; }
.cargos-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 12px; }
.cargos-info div { display: grid; gap: 6px; justify-items: start; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 6px; background: #fff; font-size: .88rem; color: var(--texto-suave); }
.equipe-acoes { display: inline-flex; align-items: center; gap: 8px; }
.equipe-acoes select { padding: 7px 10px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; font-size: .88rem; background: #fff; }
.selo-acesso { margin: 0 0 12px; font-size: .88rem; color: var(--texto-suave); }
.selo-acesso b { color: var(--texto); }
@media (max-width: 600px) { .admin-equipe li { flex-wrap: wrap; } }
.adm-pedido-botoes { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn-excluir-pedido { padding: 8px 12px; border: 1px solid #e3b3b3; border-radius: 6px; background: #fff; color: #b3261e; font: inherit; font-size: .85rem; cursor: pointer; }
.btn-excluir-pedido:hover { background: #fdecea; }
.check-excluir { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--texto-suave); cursor: pointer; }
/* Painel: clientes */
.admin-clientes { display: grid; gap: 12px; }
.adm-cli { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 6px; background: #fff; }
.adm-cli-id { display: grid; gap: 3px; min-width: 0; }
.adm-cli-id strong { font-size: 1rem; }
.adm-cli-id small { color: var(--texto-suave); font-size: .84rem; overflow-wrap: anywhere; }
.adm-cli-num { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.adm-cli-num div { padding: 6px 8px; border-radius: 4px; background: var(--fundo-alt); }
.adm-cli-num dt { font-size: .72rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.adm-cli-num dd { margin: 2px 0 0; font-weight: 700; font-size: .92rem; }
.adm-cli-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.adm-cli-acoes .btn { padding: 8px 14px; font-size: .85rem; }
.selo-cli { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; vertical-align: middle; }
.selo-cli.ativo { background: #e3f5ea; color: #1d6b3b; }
.selo-cli.inativo { background: #fff4d6; color: #8a5a00; }
.selo-cli.sem { background: #eceff2; color: #5d6773; }
@media (max-width: 900px) { .adm-cli { grid-template-columns: 1fr; } .adm-cli-acoes { justify-content: flex-start; } }
@media (max-width: 480px) { .adm-cli-num { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm-cli-id .selo-cli { justify-self: start; margin: 2px 0; }
/* Painel: estoque */
.tabela-estoque td { vertical-align: middle; }
.tabela-estoque small, .tabela-mov small { display: block; color: var(--texto-suave); font-size: .8rem; }
.est-item { display: flex; align-items: center; gap: 10px; }
.est-item i, .mov-item i { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(0,0,0,.12); }
.est-cx { font-weight: 400; }
.est-acoes { white-space: nowrap; text-align: right; }
.est-acoes .btn { padding: 7px 12px; font-size: .82rem; margin-left: 6px; }
.selo-cli.zerado { background: #fdecea; color: #a1261c; }
.pedidos-resumo span.alerta { border-color: #f7c600; background: #fffbea; }
.form-estoque { max-width: 760px; }
.mov-item { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border-radius: 8px; background: var(--fundo-alt); }
.mov-item small { display: block; color: var(--texto-suave); font-size: .84rem; margin-top: 2px; }
.mov-tipos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.mov-tipos label { cursor: pointer; }
.mov-tipos input { position: absolute; opacity: 0; pointer-events: none; }
.mov-tipos span { display: block; height: 100%; padding: 10px 12px; border: 2px solid var(--borda); border-radius: 8px; font-size: .78rem; color: var(--texto-suave); }
.mov-tipos b { display: block; font-size: .95rem; color: var(--texto); }
.mov-tipos input:checked + span { border-color: var(--azul); background: var(--azul-claro); }
.mov-tipos input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 2px; }
.mov-sub { margin: 18px 0 8px; font-size: .95rem; }
.tabela-mov { font-size: .85rem; }
.tabela-mov td.pos { color: #1d6b3b; font-weight: 700; white-space: nowrap; }
.tabela-mov td.neg { color: #a1261c; font-weight: 700; white-space: nowrap; }
.mov-tipo { font-size: .78rem; }
.mov-tipo.mov-entrada { color: #1d6b3b; } .mov-tipo.mov-saida { color: #a1261c; } .mov-tipo.mov-ajuste { color: #8a5a00; }
.form-estoque.so-historico .mov-tipos, .form-estoque.so-historico .grade-campos, .form-estoque.so-historico #mov-resumo,
.form-estoque.so-historico #mov-salvar { display: none; }
#mov-historico { max-height: 340px; overflow: auto; }
.form-estoque.so-historico #mov-historico { max-height: none; }
@media (max-width: 600px) { .mov-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .est-acoes { white-space: normal; } .est-acoes .btn { margin: 3px 0 3px 6px; } }
/* Site: disponibilidade no modal do produto */
.selo-estoque { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; vertical-align: middle; }
.selo-estoque.pronta { background: #e3f5ea; color: #1d6b3b; }
.selo-estoque.encomenda { background: #eceff2; color: #4a5562; }
/* ---------- Produto: preço, promoção, estoque ---------- */
.preco em { font-style: normal; font-weight: 500; font-size: .75em; color: var(--texto-suave); margin-left: 2px; }
.preco s { color: var(--texto-suave); font-weight: 500; }
.preco-promo { color: #b3261e; }
.preco-promo small { color: var(--texto-suave); }
.preco-combinar { font-size: .85rem; line-height: 1.25; max-width: 16ch; }
.preco-caixa { margin-top: 2px; }
.selo-off { display: inline-block; padding: 1px 6px; border-radius: 4px; background: #b3261e; color: #fff; font-size: .7rem; font-weight: 800; vertical-align: middle; }
.etiqueta-promo { position: absolute; top: 44px; left: 12px; z-index: 2; padding: 4px 9px; border-radius: 4px; background: #b3261e; color: #fff; font-size: .78rem; font-weight: 800; }
.cor-cartao { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .85rem; color: var(--texto-suave); }
.cor-cartao i, .cor-ficha i { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); vertical-align: middle; margin-right: 6px; }
.estoque-cartao { min-height: 22px; margin-bottom: 12px; }
.estoque { display: inline-block; font-size: .82rem; font-weight: 700; }
.estoque small { font-weight: 500; color: var(--texto-suave); }
.estoque.disponivel { color: #1d6b3b; }
.estoque.disponivel::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #2e9d57; vertical-align: 1px; }
.estoque.esgotado { padding: 2px 9px; border-radius: 999px; background: #fdecea; color: #a1261c; }
.cartao-produto.esgotado .vitrine img { filter: grayscale(.6); opacity: .8; }
.codigo-produto { margin: -6px 0 10px; font-size: .85rem; color: var(--texto-suave); }
.modal-preco { margin: 4px 0 8px; }
.modal-preco .preco { font-size: 1.6rem; }
.modal-preco .preco small { font-size: .82rem; }
.modal-preco .preco-combinar { font-size: 1.05rem; max-width: none; }
.modal-estoque { margin: 0 0 12px; min-height: 20px; }
.esgotado-box { display: grid; gap: 6px; margin: 12px 0; padding: 14px 16px; border-radius: 8px; background: #fdecea; color: #7a1d16; font-size: .9rem; }
.esgotado-box .btn { justify-self: start; margin-top: 4px; }
/* carrinho */
.item-carrinho .codigo { font-weight: 600; }
.item-carrinho .sub-valor { font-weight: 700; color: var(--azul-profundo); }
.item-carrinho .sub-combinar { font-weight: 600; color: var(--texto-suave); }
.item-carrinho.sem-estoque { background: #fff6f5; }
.aviso-estoque { margin-top: 4px; font-size: .8rem; font-weight: 600; color: #a1261c; }
.resumo-valor { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; margin: -2px 0 10px; }
.resumo-valor strong { font-size: 1.15rem; color: var(--azul-profundo); }
.resumo-valor small { flex-basis: 100%; font-size: .78rem; color: var(--texto-suave); }

/* ---------- Painel: produto ---------- */
.admin-aviso-cores { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 12px 16px; border: 1px solid #f7c600; border-radius: 8px; background: #fffbea; font-size: .9rem; }
.adm-preco { display: grid; gap: 1px; font-size: .88rem; }
.adm-preco s { color: var(--texto-suave); font-size: .8rem; }
.adm-preco small { color: var(--texto-suave); font-size: .75rem; }
.adm-preco.combinar { color: var(--texto-suave); font-weight: 600; }
.admin-tabela strong.zerado { color: #a1261c; }
.sem-foto { color: #a1261c; font-weight: 600; }
.prod-topo { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 14px; }
.campo-foto-produto { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
.foto-produto-caixa { display: grid; place-items: center; aspect-ratio: 5 / 4; border: 2px dashed var(--borda); border-radius: 10px; background: var(--fundo-alt); cursor: pointer; overflow: hidden; text-align: center; font-weight: 600; color: var(--azul); font-size: .88rem; padding: 8px; }
.foto-produto-caixa small { display: block; font-weight: 400; color: var(--texto-suave); font-size: .75rem; margin-top: 4px; }
.foto-produto-caixa:hover { border-color: var(--azul); }
.foto-produto-caixa.com-foto { border-style: solid; padding: 0; }
.foto-produto-caixa img { width: 100%; height: 100%; object-fit: cover; }
.campo-cor { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
.campo-cor .admin-cor { grid-template-columns: 44px 100px minmax(0, 1fr); }
.campo-preco { margin: 6px 0 14px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 10px; }
.campo-preco legend { padding: 0 6px; font-weight: 700; }
.preco-modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.preco-modos label { cursor: pointer; }
.preco-modos input { position: absolute; opacity: 0; pointer-events: none; }
.preco-modos span { display: block; padding: 10px 12px; border: 2px solid var(--borda); border-radius: 8px; font-size: .8rem; color: var(--texto-suave); }
.preco-modos b { display: block; font-size: .95rem; color: var(--texto); }
.preco-modos input:checked + span { border-color: var(--azul); background: var(--azul-claro); }
.preco-modos input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 2px; }
.preco-previa { grid-column: 1 / -1; margin: 0; font-size: .88rem; color: var(--texto-suave); }
@media (max-width: 640px) { .prod-topo { grid-template-columns: 1fr; } .campo-foto-produto { max-width: 240px; } }

/* ---------- Painel: vendas ---------- */
.vendas-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.vendas-kpis div { padding: 14px 16px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; }
.vendas-kpis span { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--texto-suave); }
.vendas-kpis strong { display: block; margin-top: 4px; font-size: 1.35rem; color: var(--azul-profundo); }
.vendas-grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.vendas-lista { display: grid; gap: 12px; }
.venda { border: 1px solid var(--borda); border-left: 5px solid #2e9d57; border-radius: 8px; background: #fff; }
.venda.cancelada { border-left-color: #a1261c; opacity: .8; }
.venda header, .venda footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; }
.venda header { border-bottom: 1px solid var(--borda); }
.venda header small { display: block; color: var(--texto-suave); font-size: .8rem; }
.venda footer { border-top: 1px solid var(--borda); background: var(--fundo-alt); font-size: .86rem; }
.venda footer .btn { padding: 7px 12px; font-size: .82rem; }
.venda .motivo { color: #a1261c; }
.venda-corpo { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; }
.venda-corpo img, .venda-sem-foto { width: 80px; height: 64px; border-radius: 6px; object-fit: cover; background: var(--fundo-alt); }
.venda-sem-foto { display: grid; place-items: center; color: var(--texto-suave); }
.venda-corpo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.venda-corpo li { display: flex; justify-content: space-between; gap: 10px; }
.venda-corpo li small { display: block; color: var(--texto-suave); font-size: .8rem; }
.venda-total { text-align: right; }
.venda-total span { display: block; font-size: .75rem; text-transform: uppercase; color: var(--texto-suave); }
.venda-total strong { font-size: 1.2rem; color: var(--azul-profundo); }
.venda-total small { display: block; color: var(--texto-suave); font-size: .8rem; }
.vendas-lado { padding: 14px 16px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; }
.vendas-lado h3 { margin: 0 0 10px; font-size: .95rem; }
.vendas-lado h3 + .ranking + h3 { margin-top: 18px; }
.ranking { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: .86rem; }
.ranking li { padding-left: 2px; }
.ranking li > span { display: inline; }
.ranking li { display: list-item; }
.ranking li span small, .ranking li b small { display: block; color: var(--texto-suave); font-weight: 400; font-size: .76rem; }
.ranking li b { float: right; text-align: right; margin-left: 8px; }
.ranking li::after { content: ""; display: block; clear: both; }
.form-venda { max-width: 820px; }
.venda-cliente { margin: 0 0 6px; }
.tabela-venda input { width: 110px; padding: 7px 9px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; }
.tabela-venda td small { display: block; color: var(--texto-suave); font-size: .8rem; }
.tabela-venda tfoot td { font-weight: 800; font-size: 1rem; }
.tabela-venda .v-sub, .tabela-venda tfoot td:last-child { text-align: right; white-space: nowrap; }
.venda-obs { display: grid; gap: 6px; margin-top: 14px; font-weight: 600; font-size: .9rem; }
.venda-obs input { padding: 10px 12px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; font-weight: 400; }
@media (max-width: 900px) { .vendas-grade { grid-template-columns: 1fr; } .vendas-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .venda-corpo { grid-template-columns: 64px minmax(0, 1fr); } .venda-total { grid-column: 1 / -1; text-align: left; } .venda-corpo img, .venda-sem-foto { width: 64px; height: 52px; } }
.linha-codigo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin-bottom: 4px; }
.linha-codigo .linha { margin: 0; }
.codigo-cartao { font-size: .72rem; font-weight: 700; color: var(--texto-suave); background: var(--fundo-alt); border-radius: 4px; padding: 2px 6px; letter-spacing: .02em; }

/* ================= Loja: pedido, chat, vendas, notificações ================= */
.btn-contorno-perigo { background: #fff; color: #a1261c; border: 2px solid #e3b3b3; }
.btn-contorno-perigo:hover { background: #fdecea; border-color: #a1261c; }
.btn-link { background: none; border: 0; padding: 6px 8px; color: var(--azul); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
/* badges de notificação */
.badge-menu, .badge-aba { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: #e53935; color: #fff; font-size: .72rem; font-weight: 800; line-height: 1; vertical-align: middle; }
.badge-menu[hidden] { display: none; }
.link-conta { position: relative; }
.ponto-notif { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #e53935; color: #fff; font-size: .7rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.ponto-notif[hidden] { display: none; }
.menu-painel a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--azul) !important; }
.menu-painel .icone-svg { width: 18px; height: 18px; }
.menu-conta .mc-admin { display: flex; align-items: center; }
/* carrinho: prazo */
.resumo-prazo { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: var(--azul-claro); font-size: .84rem; line-height: 1.4; }
.resumo-prazo:empty { display: none; }
.resumo-prazo .icone-svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--azul); margin-top: 1px; }
.resumo-prazo small { display: block; color: var(--texto-suave); font-size: .75rem; }
/* produto: simulador de prazo */
.simula-prazo { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 8px; }
.simula-prazo label { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; margin-bottom: 8px; }
.simula-prazo label .icone-svg { width: 18px; height: 18px; color: var(--azul); }
.simula-prazo div { display: flex; gap: 8px; }
.simula-prazo input { flex: 1; min-width: 0; max-width: 170px; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; }
.simula-prazo .btn { padding: 8px 14px; font-size: .85rem; }
.simula-prazo p { margin: 8px 0 0; font-size: .86rem; }
.simula-prazo p small { display: block; color: var(--texto-suave); font-size: .76rem; }
.simula-prazo p:empty { display: none; }
/* situação */
.pp-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 800; background: #eceff2; color: #4a5562; }
.pp-status.recebido { background: #fff4d6; color: #8a5a00; }
.pp-status.confirmado { background: #e5edfb; color: #0d3f9e; }
.pp-status.enviado { background: #dff5fa; color: #06728a; }
.pp-status.entregue { background: #e3f5ea; color: #1d6b3b; }
.pp-status.cancelado, .pp-status.reembolsado { background: #fdecea; color: #a1261c; }
/* painel lateral do pedido */
.pedido-fundo { position: fixed; inset: 0; z-index: 1200; background: rgba(8, 18, 36, .55); }
.pedido-painel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1201; width: min(760px, 100%); display: flex; flex-direction: column; background: #fff; box-shadow: -10px 0 40px rgba(0,0,0,.2); }
.pedido-fundo[hidden], .pedido-painel[hidden] { display: none; }
.pp-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--borda); }
.pp-topo h2 { margin: 0; font-size: 1.2rem; }
.pp-topo small { display: block; margin-top: 4px; color: var(--texto-suave); font-size: .84rem; }
.pp-topo .fechar { position: static; flex: 0 0 auto; }
.pp-corpo { flex: 1; overflow-y: auto; padding: 18px 22px 28px; display: grid; gap: 16px; align-content: start; }
.pp-secao h3, .pp-solic h3 { margin: 0 0 10px; font-size: 1rem; }
.pp-tempo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; counter-reset: passo; }
.pp-tempo li { position: relative; padding-top: 30px; font-size: .8rem; font-weight: 700; color: var(--texto-suave); text-align: center; }
.pp-tempo li::before { counter-increment: passo; content: counter(passo); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #eceff2; color: #6b7682; font-size: .75rem; z-index: 1; }
.pp-tempo li::after { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 3px; background: #eceff2; }
.pp-tempo li:first-child::after { display: none; }
.pp-tempo li.feito, .pp-tempo li.atual { color: var(--texto); }
.pp-tempo li.feito::before { content: "✓"; background: #2e9d57; color: #fff; }
.pp-tempo li.feito::after, .pp-tempo li.atual::after { background: #2e9d57; }
.pp-tempo li.atual::before { background: var(--azul); color: #fff; box-shadow: 0 0 0 4px var(--azul-claro); }
.pp-tempo small { display: block; font-weight: 400; font-size: .72rem; }
.pp-encerrado { display: grid; gap: 3px; padding: 12px 14px; border-radius: 8px; background: #fdecea; color: #7a1d16; }
.pp-encerrado small { color: inherit; opacity: .8; }
.pp-previsao { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; background: var(--azul-claro); font-size: .9rem; line-height: 1.45; }
.pp-previsao.ok { background: #e3f5ea; }
.pp-previsao .icone-svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--azul); margin-top: 2px; }
.pp-previsao small { display: block; color: var(--texto-suave); font-size: .76rem; }
.pp-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pp-itens li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pp-itens img, .pp-sem-foto { width: 64px; height: 52px; border-radius: 6px; object-fit: cover; background: var(--fundo-alt); }
.pp-itens small { display: block; color: var(--texto-suave); font-size: .8rem; }
.pp-item-valor { text-align: right; display: grid; font-size: .85rem; }
.pp-item-valor span { color: var(--texto-suave); }
.pp-item-valor em { color: var(--texto-suave); font-style: normal; font-weight: 600; }
.pp-preco-input { display: grid; gap: 4px; font-size: .78rem; font-weight: 700; }
.pp-preco-input input { width: 110px; padding: 7px 9px; border: 2px solid #f7c600; border-radius: 6px; font: inherit; }
.pp-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda); }
.pp-total strong { font-size: 1.3rem; color: var(--azul-profundo); }
.pp-total small { flex-basis: 100%; color: var(--texto-suave); font-size: .78rem; }
.pp-obs { margin: 10px 0 0; padding: 8px 12px; border-radius: 6px; background: var(--fundo-alt); font-size: .86rem; }
.pp-cliente { display: grid; gap: 3px; justify-items: start; }
.pp-cliente small { color: var(--texto-suave); font-size: .84rem; }
.pp-cliente .btn { margin-top: 6px; padding: 7px 14px; font-size: .84rem; }
.pp-solic { display: grid; gap: 8px; }
.pp-solic-item { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--borda); border-left: 4px solid #f7c600; border-radius: 8px; }
.pp-solic-item.aceita { border-left-color: #2e9d57; } .pp-solic-item.recusada { border-left-color: #a1261c; }
.pp-solic-item small { display: block; color: var(--texto-suave); font-size: .82rem; margin-top: 2px; }
.pp-responder { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pp-responder input[type=text] { flex: 1 1 240px; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; }
.pp-responder .btn { padding: 8px 14px; font-size: .84rem; }
.pp-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-acoes .btn { padding: 9px 16px; font-size: .88rem; }
.pp-form { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo-alt); }
.pp-form label { display: grid; gap: 4px; font-weight: 600; font-size: .88rem; }
.pp-form input, .pp-form textarea { padding: 9px 12px; border: 1px solid var(--borda); border-radius: 6px; font: inherit; font-weight: 400; }
.pp-form > div { display: flex; gap: 8px; align-items: center; }
.pp-form[hidden] { display: none; }
/* chat */
.pp-msgs { display: flex; flex-direction: column; gap: 8px; max-height: 380px; min-height: 120px; overflow-y: auto; padding: 12px; border: 1px solid var(--borda); border-radius: 10px; background: #f6f8fb; }
.pp-msg { max-width: 82%; display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.pp-msg b { font-size: .74rem; color: var(--azul); }
.pp-msg small { font-size: .7rem; color: var(--texto-suave); justify-self: end; }
.pp-msg.minha { align-self: flex-end; background: var(--azul-claro); border-bottom-right-radius: 4px; }
.pp-msg.outra { align-self: flex-start; border-bottom-left-radius: 4px; }
.pp-msg.atendimento b { color: #8a5a00; }
.pp-msg.sistema { align-self: center; max-width: 92%; background: transparent; box-shadow: none; text-align: center; color: var(--texto-suave); font-size: .8rem; padding: 2px 8px; }
.pp-msg.sistema small { justify-self: center; }
.pp-enviar { display: flex; gap: 8px; margin-top: 8px; align-items: flex-end; }
.pp-enviar textarea { flex: 1; min-width: 0; resize: vertical; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; }
@media (max-width: 600px) {
  .pp-corpo { padding: 14px 14px 24px; }
  .pp-tempo li { font-size: .7rem; }
  .pp-itens li { grid-template-columns: 52px minmax(0, 1fr); }
  .pp-item-valor { grid-column: 2; text-align: left; }
  .pp-msg { max-width: 92%; }
}
/* aba Vendas */
.vendas-kpis small { display: block; margin-top: 2px; font-size: .75rem; color: var(--texto-suave); }
.vendas-filtros { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 12px; padding-bottom: 4px; }
.vendas-filtros button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--borda); border-radius: 999px; background: #fff; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; color: var(--texto); }
.vendas-filtros button b { min-width: 22px; padding: 1px 6px; border-radius: 999px; background: var(--fundo-alt); font-size: .75rem; }
.vendas-filtros button.alerta b { background: #e53935; color: #fff; }
.vendas-filtros button.ativo { border-color: var(--azul); background: var(--azul); color: #fff; }
.vendas-filtros button.ativo b { background: rgba(255,255,255,.25); color: #fff; }
.venda { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.venda:hover, .venda:focus-visible { box-shadow: var(--sombra); transform: translateY(-1px); outline: none; }
.venda.recebido { border-left-color: #f7a600; } .venda.confirmado { border-left-color: var(--azul); } .venda.enviado { border-left-color: #0aa2c0; }
.venda.entregue { border-left-color: #2e9d57; } .venda.cancelado, .venda.reembolsado { border-left-color: #a1261c; opacity: .85; }
.venda.com-msg { box-shadow: 0 0 0 2px #e53935 inset; }
.venda-corpo > div small { display: block; color: var(--texto-suave); font-size: .8rem; }
.venda-sinais { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.venda-sinais .prazo, .venda-sinais .sinal { padding: 2px 8px; border-radius: 4px; font-size: .75rem; font-weight: 700; background: var(--fundo-alt); color: var(--texto-suave); }
.venda-sinais .prazo.alerta { background: #fff4d6; color: #8a5a00; }
.venda-sinais .prazo.urgente { background: #e53935; color: #fff; }
.venda-sinais .prazo.ok { background: #e3f5ea; color: #1d6b3b; }
.venda-sinais .sinal.msg { background: #fdecea; color: #a1261c; }
.venda-sinais .sinal.sol { background: #fff4d6; color: #8a5a00; }
/* Minha conta: compras */
.pedido .prev { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 16px; background: var(--azul-claro); font-size: .86rem; }
.pedido .prev .icone-svg { width: 16px; height: 16px; color: var(--azul); }
.pedido img.mini { width: 40px; height: 32px; border-radius: 4px; object-fit: cover; flex: 0 0 40px; }
.pedido.com-msg { box-shadow: 0 0 0 2px #e53935; }
.badge-nova { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #e53935; color: #fff; font-size: .7rem; }
/* produtos: fotos, marca, seleção múltipla */
.campo-fotos { display: grid; gap: 8px; margin-bottom: 14px; }
.campo-fotos-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; }
.campo-fotos-topo small.falta { color: #a1261c; } .campo-fotos-topo small.ok { color: #1d6b3b; }
.campo-fotos > small { color: var(--texto-suave); font-size: .8rem; }
.fotos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.fotos-grade figure { position: relative; margin: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--borda); background: var(--fundo-alt); }
.fotos-grade img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.fotos-grade .capa { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 4px; background: var(--azul); color: #fff; font-size: .7rem; }
.fotos-grade figure div { display: flex; justify-content: space-between; padding: 4px; }
.fotos-grade figure button { width: 30px; height: 28px; border: 1px solid var(--borda); border-radius: 4px; background: #fff; cursor: pointer; font-size: 1rem; }
.fotos-grade figure button:disabled { opacity: .35; cursor: default; }
.foto-vaga { display: grid; place-items: center; aspect-ratio: 5 / 4; border: 2px dashed var(--borda); border-radius: 8px; color: var(--azul); font-weight: 700; font-size: .85rem; cursor: pointer; background: #fff; }
.foto-vaga:hover { border-color: var(--azul); }
.campo-travado { background: var(--fundo-alt) !important; color: var(--texto-suave); font-weight: 700; }
.select-mais { display: flex; gap: 6px; }
.select-mais select { flex: 1; min-width: 0; }
.btn-mais { flex: 0 0 auto; padding: 0 10px; border: 1px dashed var(--azul); border-radius: 6px; background: #fff; color: var(--azul); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.marca-lista { display: block; color: var(--texto-suave); font-size: .78rem; }
.col-sel { width: 36px; text-align: center; }
.col-sel input { width: 18px; height: 18px; cursor: pointer; }
.admin-tabela tr.selecionado td { background: var(--azul-claro); }
.acoes-massa { position: sticky; top: 70px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; background: var(--azul-profundo); color: #fff; box-shadow: var(--sombra); }
.acoes-massa[hidden] { display: none; }
.acoes-massa select, .acoes-massa input { padding: 8px 10px; border: 0; border-radius: 6px; font: inherit; font-size: .88rem; }
.acoes-massa input[type=number] { width: 150px; }
.acoes-massa .massa-campos { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acoes-massa .massa-ate { display: inline-flex; gap: 6px; align-items: center; font-size: .85rem; }
.acoes-massa .btn { padding: 8px 16px; }
.acoes-massa .btn-link { color: #cfe0ff; }
.so-vendedor .campo-preco, .so-vendedor .admin-botoes:empty { display: none; }
.admin-abas .aba-novos { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #d93025; color: #fff; font-size: .75rem; font-weight: 700; line-height: 20px; text-align: center; }
.admin-abas .aba-novos[hidden] { display: none; }