/* Site-vitrine temporário da Mundo Mira — mesmo visual da home do storefront (b2b/apps/storefront).
   Quebras iguais às do tema de lá: 512 (xsmall), 1024 (small), 1280 (medium), 1440 (large). */
@font-face {
  font-family: "Oswald"; /* títulos da garantia VIP (400–700); gerada de fontes-arte/Oswald-wght.ttf */
  src: url("/assets/fonts/Oswald-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --brand: #006253; /* um verde só no site: o verde Vortex (revisor-ux 30/10) */
  --brand-escuro: #004a3e;
  --brand-claro: #8fd3a3;
  --brand-vivo: #4cc773;
  --cabecalho: #1c1c1c; /* cinza bem escuro, sólido (Willian 30/10) */
  --verde-vortex: #006253; /* verde Vortex aprovado no blog em 29/10 */
  --painel: #2f3b35;       /* painéis escuros dos banners (no modelo: cinza-esverdeado) */
  --claro: #f3f4f1;        /* fundo do banner principal */
  --cinza-bloco: #f4f4f4;  /* fundo dos cards e do mosaico */
  --texto: #171717;
  --cinza: #525252;
  --cinza-claro: #737373;
  --linha: #e5e5e5;
  --fundo: #ffffff;
  --fundo-2: #f5f5f5;
  --cab: 60px;
  --raio: 12px;
  color-scheme: light;
}
@media (min-width: 1024px) {
  :root { --cab: 72px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cab) + 16px); }
body {
  margin: 0;
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; } /* height:auto: o atributo height do HTML nunca estica a foto */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
ul { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brand-vivo); outline-offset: 2px; }
.sub :focus-visible, .busca :focus-visible, .gaveta :focus-visible { outline-color: var(--brand); }  /* fundo branco: o verde vivo some (2,2:1) */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 16px; top: -60px; z-index: 100; background: #fff; padding: 10px 14px; border-radius: 8px; }
.pular:focus { top: 12px; }

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 16px; width: 100%; }
@media (min-width: 1024px) { .wrap { padding: 0 24px; } }

.so-desk { display: none !important; }
@media (min-width: 1024px) {
  .so-desk { display: flex !important; }
  .so-cel { display: none !important; }
}

/* ── botões ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 10px;
  font-weight: 600; font-size: 15px; transition: background .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }
/* padrão dos botões do site (Willian 02/11, "você precisa manter padrões"): retos, caixa-alta espaçada.
   Verde = principal (cheio): no hover o preto varre da esquerda e uma seta entra na ponta direita, sem mexer no texto.
   WhatsApp = secundário (contorno verde): no hover o verde varre da esquerda e o ícone balança. */
.btn-verde, .btn-wa, .btn-contorno { position: relative; overflow: hidden; isolation: isolate; border-radius: 0; text-transform: uppercase; letter-spacing: .1em;
  font-size: 14px; transition: color .35s ease, box-shadow .35s ease, transform .2s; }
.btn-verde::before, .btn-wa::before, .btn-contorno::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.btn-verde, .btn-wa, .btn-contorno { white-space: nowrap; }
.btn-verde { background: var(--brand); color: #fff; padding-inline: 44px; }  /* 44 px: lugar da seta, que entra sem cobrir o texto */
.btn-verde::before { background: var(--texto); }
.btn-verde::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: translateX(-14px); transition: opacity .35s ease, transform .35s ease;
}
.btn-wa, .btn-contorno { background: #fff; color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.btn-wa::before, .btn-contorno::before { background: var(--brand); }
.btn-wa svg { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.btn-verde:hover::before, .btn-verde:focus-visible::before, .btn-wa:hover::before, .btn-contorno:hover::before, .btn-wa:focus-visible::before, .btn-contorno:focus-visible::before { transform: scaleX(1); }
.btn-verde:hover::after, .btn-verde:focus-visible::after { opacity: 1; transform: none; }
.btn-wa:hover, .btn-contorno:hover, .btn-wa:focus-visible, .btn-contorno:focus-visible { color: #fff; }
.btn-wa:hover svg, .btn-wa:focus-visible svg { transform: rotate(-14deg) scale(1.12); }
.btn-verde:hover { box-shadow: 0 10px 22px -12px rgba(0, 60, 50, .55); }
.btn-wa:hover, .btn-contorno:hover { box-shadow: inset 0 0 0 1.5px var(--brand), 0 10px 22px -12px rgba(0, 60, 50, .55); }
@media (prefers-reduced-motion: reduce) {
.btn-verde::before, .btn-wa::before, .btn-contorno::before, .btn-verde::after, .btn-wa svg { transition: none; }
}
/* celular: depois do toque, o navegador deixa o "hover" preso no que ficou embaixo do dedo (ex.: o botão da tela seguinte nascia
   preto, com a seta). Sem mouse, o botão só muda de cor enquanto está em foco pelo teclado. */
@media (hover: none) {
  .btn-verde:hover:not(:focus-visible)::before, .btn-wa:hover:not(:focus-visible)::before, .btn-contorno:hover:not(:focus-visible)::before { transform: scaleX(0); }
  .btn-verde:hover:not(:focus-visible)::after { opacity: 0; transform: translateX(-14px); }
  .btn-wa:hover:not(:focus-visible), .btn-contorno:hover:not(:focus-visible) { color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
  .btn-verde:hover:not(:focus-visible) { box-shadow: none; }
}
/* botões dos banners (no modelo: retos, caixa alta espaçada) */
.btn-escuro, .btn-claro { border-radius: 0; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; padding: 0 28px; }
.btn-escuro { background: var(--texto); color: #fff; }
.btn-escuro:hover { background: var(--verde-vortex); }
.btn-claro { background: #d9e2db; color: var(--texto); }
.btn-claro:hover { background: #fff; }

/* sobrelinha dos blocos ("LINHA LPVO"): caixa alta espaçada */
.sobre { display: block; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 14px; }
.sobre strong { font-weight: 700; }

/* lugar de imagem que ainda vai chegar: quadrado com X, numerado (IMG n) */
.ph { position: relative; width: 100%; background: #e9eae7; border: 1px solid #cfd2cc; display: grid; place-items: center; overflow: hidden; }
.ph-x { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph-x line { stroke: #b9bdb6; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ph-rot { position: relative; background: #fff; color: #555; font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 6px 10px; border-radius: 4px; text-align: center; line-height: 1.3; }
.ph-rot small { display: block; font-weight: 400; color: #888; }
.ph-mini { display: inline-grid; width: 48px; height: 48px; flex: none; }

/* ── cabeçalho: cinza bem escuro, SÓLIDO, uma linha só (logo → categorias → Buscar/Entrar) — Willian 30/10; em 02/11
   ele testou branco e voltou: "o menu quero manter no preto, somente os submenus (quando aberto) ficam no branco" ── */
.cab { position: sticky; top: 0; z-index: 50; color: #fff; height: var(--cab); background: var(--cabecalho); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.cab-linha {
  height: var(--cab); display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.cab-linha .logo { justify-self: center; }
.cab-acoes { justify-self: end; display: flex; align-items: center; gap: 4px; }
@media (min-width: 1024px) {
  .cab-linha { display: flex; gap: 0; }
  .cab-menu { margin-left: 16px; height: 100%; }
  .cab-acoes { margin-left: auto; gap: 8px; flex: none; }
}
@media (min-width: 1120px) { .cab-menu { margin-left: 24px; } }
@media (min-width: 1280px) { .cab-menu { margin-left: 36px; } }
@media (max-width: 359px) {
  .cab-linha { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px; }
  .cab-linha .logo { justify-self: start; }
}

/* barra fina de aviso acima do cabeçalho (no modelo: "Flash sale…") */
.aviso-topo { background: var(--cabecalho); color: rgba(255, 255, 255, .82); font-size: 13px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.aviso-topo .wrap { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; text-align: center; }
.aviso-topo a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 36px; }
.aviso-topo a:hover { color: var(--brand-vivo); }
.aviso-topo svg { flex: none; }
@media (max-width: 359px) { .aviso-topo svg { display: none; } .aviso-topo { font-size: 12px; } }

/* busca com cara de campo (linha embaixo) e Entrar num círculo, como no modelo */
/* lupa, carrinho e perfil no mesmo anel de 44 px (Willian 09/11: "a mesma bolinha nos 3 ícones"), vãos iguais */
.campo-busca { align-items: center; justify-content: center; gap: 10px; min-height: 44px; width: 44px; padding: 0; color: #fff; font-size: 14px;
  border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .6); transition: color .2s, border-color .2s; }
.campo-busca span { display: none; }
.campo-busca svg { flex: none; }
.campo-busca:hover { border-color: var(--brand-vivo); color: var(--brand-vivo); }
@media (min-width: 1400px) {  /* campo com a palavra "Buscar" só onde o menu de 8 itens ainda cabe ao lado */
  .campo-busca { width: 110px; justify-content: space-between; padding: 0 2px; border-radius: 0; border: 1px solid transparent; border-bottom-color: rgba(255, 255, 255, .35); margin-right: 14px; }
  .campo-busca span { display: inline; color: rgba(255, 255, 255, .75); }
  .campo-busca:hover { border-color: transparent; border-bottom-color: #fff; color: #fff; }
}
.circulo { display: flex; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .6); align-items: center; justify-content: center; transition: border-color .2s, color .2s, background .2s; }
.circulo:hover, .conta.aberta .circulo { border-color: var(--brand-vivo); color: var(--brand-vivo); }
/* menu do ícone de conta: o mesmo painel branco dos submenus (sombra, sem canto, abre deslizando 6 px), preso à direita do ícone */
.conta { position: relative; }
.conta-menu {
  position: absolute; right: 0; top: calc(100% + 14px); z-index: 60; width: 300px; padding: 20px;
  background: #fff; color: var(--texto); border: 1px solid var(--linha); box-shadow: 0 24px 40px -12px rgba(0, 0, 0, .28);
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.conta.aberta .conta-menu { visibility: visible; opacity: 1; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; }
.conta-topo b { display: block; font-size: 16px; font-weight: 600; }
.conta-topo span { display: block; margin-top: 2px; font-size: 13px; color: var(--cinza); }
.conta-entrar { width: 100%; margin-top: 16px; }
.conta-novo { margin-top: 14px; font-size: 14px; color: var(--cinza); }
.conta-novo a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.conta-novo a:hover { color: var(--brand-escuro); }
.conta-lista { display: flex; flex-direction: column; margin: 14px -20px -12px; padding: 6px 0; border-top: 1px solid var(--linha); }
.conta-lista a, .conta-sair { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 20px; font-size: 14px; text-align: left;
  color: var(--texto); transition: background .15s, color .15s; }
.conta-lista svg { flex: none; color: var(--cinza); transition: color .15s, transform .25s ease; }
.conta-lista a:hover, .conta-sair:hover { background: var(--fundo-2); color: var(--brand); }
.conta-lista a:hover svg, .conta-sair:hover svg { color: var(--brand); transform: translateX(2px); }
.conta-sair { margin-top: 6px; border-top: 1px solid var(--linha); }
.conta :focus-visible { outline-color: var(--brand); }
.conta .circulo:focus-visible { outline-color: var(--brand-vivo); }
@media (prefers-reduced-motion: reduce) { .conta-menu, .conta-lista svg { transition: none; } }

/* logo na horizontal: símbolo + "MUNDO MIRA" (Montserrat 500, vetor); letras com ~1/3 da altura do símbolo */
.logo { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; min-height: 44px; flex: none; }
.logo-claro { color: #fff; }
.logo img { width: 32px; height: 32px; }
.logotipo { height: 11px; width: auto; display: block; fill: currentColor; }
.logo-escuro { color: #1f6737; } /* fundo claro: escrita na cor do símbolo (verde da logo-cor.png; Willian 02/11) */
@media (min-width: 1024px) {
  .logo img { width: 38px; height: 38px; }
  .logotipo { height: 12px; }
}
@media (min-width: 1280px) {
  .logo { gap: 11px; }
  .logo img { width: 42px; height: 42px; }
  .logotipo { height: 14px; }
}

.ico-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.ico-btn:hover { background: rgba(255, 255, 255, .08); }

.barra { display: flex; flex-wrap: nowrap; align-items: center; height: 100%; gap: 2px; }
.barra > li { display: flex; align-items: center; height: 100%; }
/* hover do menu (Willian 02/11, "esse retângulo com borda não gostei"): a letra fica verde e uma linha verde nasce do
   centro e cresce até as pontas, colada na borda de baixo do cabeçalho; fica acesa enquanto o painel (branco) está aberto */
.cat-link {
  position: relative; align-self: stretch; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; min-height: 44px;
  transition: color .25s ease;
}
.cat-link::after {
  content: ""; position: absolute; z-index: 1; left: var(--px); right: var(--px); bottom: -1px; height: 2px; background: var(--brand-vivo);  /* z-index: por cima do painel */
  transform: scaleX(0); transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.cat-link svg { transition: transform .25s ease; opacity: .55; }
.cat-link:hover, .tem-sub:hover .cat-link, .tem-sub:focus-within .cat-link { color: var(--brand-vivo); }
.cat-link:hover::after, .tem-sub:hover .cat-link::after, .tem-sub:focus-within .cat-link::after { transform: scaleX(1); }
.tem-sub:hover .cat-link svg, .tem-sub:focus-within .cat-link svg { transform: rotate(180deg); opacity: 1; }
/* menu na fonte do site (Geist), caixa-alta espaçada como o "DISTRIBUIDOR VORTEX OPTICS" do banner — teste do
   Willian 02/11 ("quero testar o menu com essa fonte"); antes Oswald fina e, por alguns minutos, Montserrat */
.cat-link, .sub ul a, .sub-tudo, .g-raiz, .g-sub, .gaveta-topo > span {
  text-transform: uppercase; letter-spacing: .12em; font-weight: 400;
}
/* a Geist em caixa-alta é larga: medidas para o menu caber ao lado da busca de 1024 px pra cima */
/* respiro entre os itens (Willian 02/11: "estão colados muito perto um do outro"), o maior que cabe em cada largura.
   Medido com os 8 itens (Garantia entrou em 09/11): sobram pelo menos 20 px até a busca, com e sem lojista logado */
.cat-link { --px: 3px; font-size: 11.5px; letter-spacing: .04em; padding: 0 var(--px); }
@media (min-width: 1120px) { .cat-link { --px: 5px; font-size: 12px; letter-spacing: .08em; } }
@media (min-width: 1280px) { .cat-link { --px: 11px; letter-spacing: .1em; } }
@media (min-width: 1366px) { .cat-link { --px: 12px; } }
@media (min-width: 1440px) { .cat-link { --px: 13px; font-size: 13px; } }

/* painel de subcategorias: largura total, abre com atraso pra não piscar de passagem */
.sub {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; color: var(--texto); border-bottom: 1px solid var(--linha);
  box-shadow: 0 24px 40px -12px rgba(0, 0, 0, .18);
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.tem-sub:hover .sub, .tem-sub:focus-within .sub {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .2s ease .12s, transform .2s ease .12s, visibility 0s linear .12s;
}
.sub-in { max-width: 1440px; margin: 0 auto; padding: 0 24px 0 0; display: flex; gap: 48px; align-items: center; }
.sub-in > ul, .sub-promo { margin-block: 24px 28px; }
.sub ul { display: grid; grid-template-columns: repeat(2, minmax(170px, auto)); gap: 0 32px; }
@media (min-width: 1440px) { .sub ul { grid-template-columns: repeat(3, minmax(180px, auto)); gap: 0 40px; } }
.sub ul a, .sub-tudo { display: flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--cinza); transition: color .2s, transform .25s ease; }
.sub ul a:hover, .sub-tudo:hover { color: var(--brand); transform: translateX(4px); }
/* "Ver tudo em…" numa coluna cinza bem leve, do topo ao pé do painel, separada das subcategorias (Willian 02/11) */
.sub-tudo { align-self: stretch; color: var(--texto); font-weight: 500; min-width: 260px; padding: 0 24px; background: var(--fundo-2); }
.sub-tudo:hover { transform: none; }
/* propaganda no canto direito do painel, baixa (2:1) para o painel não sobrar branco embaixo dos links; some abaixo de
   1180 px, onde não cabe ao lado das subcategorias */
.sub-promo { position: relative; flex: none; display: none; width: 320px; aspect-ratio: 2 / 1; margin-left: auto; overflow: hidden; background: #111; color: #fff; }
@media (min-width: 1180px) { .sub-promo { display: block; } }
@media (min-width: 1440px) { .sub-promo { width: 380px; } }
.sub-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.sub-promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, 0)); }
.sub-promo-txt { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.sub-promo small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #bab4a0; }
.sub-promo strong { font-family: "Oswald", sans-serif; font-weight: 600; font-size: 22px; line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; }
.sub-promo-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.sub-promo-cta svg { transition: transform .3s ease; }
.sub-promo:hover img, .sub-promo:focus-visible img { transform: scale(1.05); }
.sub-promo:hover .sub-promo-cta svg, .sub-promo:focus-visible .sub-promo-cta svg { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .cat-link::after, .sub-promo img, .sub ul a, .sub-tudo { transition: none; } }

/* ── busca do cabeçalho ─────────────────────────────────────────────────── */
/* dropdown: desce da borda do cabeçalho como uma cortina (o recorte abre de cima para baixo e o conteúdo desce junto) e sobe
   de volta ao fechar (Willian 09/11: "quero que ela desça no dropdown", antes esmaecia e pulava). O recorte passa 80 px
   da borda de baixo quando aberto para a sombra aparecer. */
.busca {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  background: #fff; color: var(--texto); box-shadow: 0 24px 40px -12px rgba(0, 0, 0, .28);
  border-bottom: 1px solid var(--linha);
  clip-path: inset(0 0 100% 0); transition: clip-path .26s cubic-bezier(.4, 0, .2, 1);
}
.busca.aberta { clip-path: inset(0 0 -80px 0); transition-duration: .34s; transition-timing-function: cubic-bezier(.2, .7, .2, 1); }
.busca > .wrap { transform: translateY(-14px); opacity: 0; transition: transform .26s cubic-bezier(.4, 0, .2, 1), opacity .18s ease; }
.busca.aberta > .wrap { transform: none; opacity: 1; transition: transform .34s cubic-bezier(.2, .7, .2, 1), opacity .24s ease .04s; }
@media (prefers-reduced-motion: reduce) { .busca, .busca > .wrap { transition: none; } }
.busca-form { display: flex; align-items: center; gap: 10px; height: 64px; color: var(--cinza); }
.busca-form input {
  flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; font: inherit; font-size: 17px; color: var(--texto); background: transparent;
}
.busca-form input::-webkit-search-cancel-button { display: none; }
.busca-form .ico-btn:hover { background: var(--fundo-2); }
.busca-res { max-height: min(62vh, 560px); overflow-y: auto; padding-bottom: 12px; }
.busca-res li a { display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: 10px; min-height: 64px; }
.busca-res li a:hover, .busca-res li a[aria-selected="true"] { background: var(--fundo-2); }
.busca-res img { width: 52px; height: 52px; object-fit: contain; background: #fff; border: 1px solid var(--linha); border-radius: 8px; flex: none; }
.busca-res .t { display: block; font-weight: 500; font-size: 15px; line-height: 1.3; }
.busca-res .c { display: block; font-size: 13px; color: var(--cinza-claro); }
.busca-res .todos { justify-content: center; font-weight: 600; color: var(--brand); min-height: 48px; }
.busca-res .nada { padding: 16px 8px; color: var(--cinza); }

/* ── gaveta do celular ──────────────────────────────────────────────────── */
.gaveta { position: fixed; inset: 0; z-index: 80; }
.gaveta-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); animation: aparece .2s ease both; }
.gaveta-painel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(88vw, 380px);
  background: #fff; color: var(--texto); display: flex; flex-direction: column;
  animation: entra-esq .28s cubic-bezier(.2, .7, .1, 1) both;
  padding-bottom: env(safe-area-inset-bottom);
}
.gaveta-topo { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 8px 0 20px; border-bottom: 1px solid var(--linha); font-weight: 600; }
.gaveta-lista { flex: 1; overflow-y: auto; padding: 8px 0 16px; }
.g-raiz { display: flex; align-items: center; min-height: 48px; padding: 0 20px; font-size: 14px; }
.g-sub { display: flex; align-items: center; min-height: 44px; padding: 0 20px 0 36px; font-size: 13px; color: var(--cinza); }
.g-raiz:hover, .g-sub:hover { color: var(--brand); }
.gaveta-wa { margin: 12px 16px 16px; font-size: 12px; letter-spacing: .06em; }
@media (max-width: 379px) {  /* 320–379 px: caixa-alta espaçada não cabe; letra e respiro menores, ainda numa linha */
.btn-verde, .btn-wa, .btn-contorno { font-size: 12px; letter-spacing: .05em; gap: 8px; }
  .btn-verde { padding-inline: 34px; }
  .btn-verde::after { right: 12px; }
  .gaveta-wa { font-size: 11px; letter-spacing: .03em; }
}
.gaveta .ico-btn:hover { background: var(--fundo-2); }
@keyframes aparece { from { opacity: 0; } }
@keyframes entra-esq { from { transform: translateX(-100%); } }

/* ── HOME: mesma sequência de blocos do modelo (Farnic) ───────────────────── */
.secao { padding-top: 72px; }
@media (min-width: 1024px) { .secao { padding-top: 112px; } }
/* a última seção da página respira antes do rodapé (a faixa de logos que fazia isso saiu, 02/11) */
main > .secao:last-child { padding-bottom: 72px; }
@media (min-width: 1024px) { main > .secao:last-child { padding-bottom: 112px; } }
.tit-centro { text-align: center; margin-bottom: 36px; }
.tit-centro h2, .tit-lado h2, .porque-txt > h2 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.tit-centro p, .tit-lado p { color: var(--cinza); margin-top: 10px; font-size: 16px; }
@media (min-width: 1024px) { .tit-centro h2, .tit-lado h2, .porque-txt > h2 { font-size: 44px; } }
.tit-lado { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 36px; }

/* 1. banner principal — quadro de ALTURA FIXA (Willian 01/11: "ficam alternando tamanho"; bolinhas "quero fixo"):
   computador = proporção das artes 1920×900; celular/tablet = retrato das artes verticais (565×774).
   Todos os slides ficam empilhados no mesmo quadro e trocam por esmaecimento cruzado (sem pulo de altura). */
.hero { position: relative; background: #111; overflow: hidden; }
/* celular: no máximo 565 px de largura = tamanho natural das artes verticais (nunca ampliar); no tablet sobra o fundo escuro dos lados */
.hero-palco { position: relative; width: 100%; max-width: 565px; margin: 0 auto; aspect-ratio: 565 / 774; }
@media (min-width: 1024px) { .hero-palco { max-width: 1920px; aspect-ratio: 1920 / 900; } }
.so-desk { display: none; }
@media (min-width: 1024px) { .so-desk { display: block; } .so-cel { display: none; } }
/* o slide que entra (por cima) esmaece; o que sai fica inteiro por baixo e só some no fim — o fundo nunca aparece */
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0s linear .9s, visibility 0s linear .9s; }
.hero-slide.ativa { opacity: 1; visibility: visible; z-index: 2; transition: opacity .9s cubic-bezier(.4, 0, .2, 1); }
.hero.sem-transicao .hero-slide { transition: none; }  /* montagem inicial e troca de computador ↔ celular: sem esmaecer */
/* artes: ocupam o quadro inteiro, nunca acima do tamanho do arquivo (o quadro para em 1920 px) */
.hero-arte a, .hero-arte img { display: block; width: 100%; height: 100%; }
.hero-arte a { position: relative; }
.hero-arte img { object-fit: cover; }
/* camadas animadas por cima do fundo da arte (SVG nas coordenadas da arte; build_site.py → svg_camadas) */
.arte-camadas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ativa .aparece { animation: sobe-in .7s ease both; animation-delay: var(--d, .35s); }
/* botões das artes = o botão do slide 1 (mesmo tamanho, letra e efeito), cada um na cor da sua arte (Willian 02/11:
   "não quero eles como imagem"); posição em % da arte, vinda de camadas.json */
.arte-btn { position: absolute; transform: translateY(-50%); border-radius: 0; background: var(--fundo); color: var(--letra);
  font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 500; font-size: 15px; letter-spacing: .1em;
  text-transform: uppercase; padding: 0 28px; white-space: nowrap; transition: filter .2s; }
.arte-btn-centro { transform: translate(-50%, -50%); }
.hero-arte a:hover .arte-btn { filter: brightness(1.12); }
.ativa .arte-btn { animation: arte-btn-in .7s ease both; animation-delay: var(--d, .8s); }
@keyframes arte-btn-in { from { opacity: 0; translate: 0 10px; } }
/* 320 px: quadro pequeno — botões (o do slide 1 e os das artes, iguais) e bolinhas um pouco menores para não se tocarem */
@media (max-width: 379px) {
  .arte-btn, .hero-txt .btn { min-height: 42px; font-size: 14px; padding: 0 22px; }
  .hero-bolas button { padding-bottom: 14px; }
}
.pedra { transform-box: fill-box; transform-origin: 50% 100%; }
/* PRO "cai igual uma pedra pesada" (Willian 02/11): acelera caindo, amassa no impacto, quica pouco e o quadro treme */
.ativa .pedra { animation: pedra .85s both; animation-delay: var(--d, .2s); }
@keyframes pedra {
  0% { transform: translateY(var(--queda)); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  55% { transform: translateY(0) scale(1.03, .9); animation-timing-function: ease-out; }
  70% { transform: translateY(-4%); }
  85% { transform: translateY(0) scale(1.01, .98); }
  100% { transform: none; }
}
.hero-arte.ativa.tem-pedra > a { animation: tremor .5s linear both; animation-delay: var(--impacto, .67s); }
@keyframes tremor {
  0%, 100% { transform: none; }
  12% { transform: translate(0, 7px); }
  26% { transform: translate(-4px, -3px); }
  42% { transform: translate(3px, 2px); }
  58% { transform: translate(-2px, -1px); }
  76% { transform: translate(1px, 1px); }
}
/* a arte que entra chega com um leve deslizar, junto do esmaecimento */
.hero-arte.ativa > a { animation: arte-in 1.1s cubic-bezier(.2, .7, .1, 1) both; }
@keyframes arte-in { from { transform: translateX(18px); } }
/* slide de texto: a imagem fica ATRÁS do texto (Willian 02/11: "quero que fique atrás do texto"), em fundo escuro.
   Computador: foto nos 62,5 % da direita, entrando por baixo do texto num degradê; o texto fica acima do meio
   ("traga o texto mais pra cima").
   Celular: arte do Defender de ponta a ponta (sem o texto dela); sobrelinha e título em cima, no lugar do título
   da arte, e texto e botão embaixo, no lugar do bloco do produto — com sombra em cima e embaixo. */
.hero-texto { background: #111; color: #fff; }
.hero-foto { position: absolute; inset: 0; overflow: hidden; }
.hero-foto picture, .hero-foto img { display: block; width: 100%; height: 100%; }
.hero-foto img { object-fit: cover; }  /* ponto do corte: HERO_FOTO no build_site.py */
.hero-foto::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, .85) 0%, rgba(10, 10, 10, .72) 28%, rgba(10, 10, 10, .2) 44%, rgba(10, 10, 10, 0) 52%, rgba(10, 10, 10, .7) 74%, rgba(10, 10, 10, .9) 100%); }  /* o título fino bege precisa de fundo escuro */
.hero-in { position: relative; height: 100%; padding-top: 28px; padding-bottom: 76px; }
.hero-txt { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
@media (min-width: 1024px) {
  .hero-foto { inset: 0 0 0 auto; width: 62.5%; }
  .hero-foto::after { background: linear-gradient(90deg, #111 0%, rgba(17, 17, 17, .85) 15%, rgba(17, 17, 17, .3) 42%, rgba(17, 17, 17, 0) 62%); }
  .hero-in { display: flex; flex-direction: column; justify-content: flex-start; padding-top: 7%; padding-bottom: 0; }  /* 7 % da largura = 15 % da altura do quadro */
  .hero-txt { display: block; height: auto; max-width: calc(50% - 32px); }
}
/* fonte "exatamente" do bloco do Defender Enclosed Solar (Willian 02/11): Oswald pesada branca + Oswald fina bege */
.hero-txt .sobre { font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 500; color: #bab4a0; letter-spacing: .18em; }
.hero-tit { font-family: "Oswald", "Arial Narrow", sans-serif; text-transform: uppercase; font-size: 38px; font-weight: 600; letter-spacing: .01em; line-height: 1.02; color: #fff; max-width: 14ch; }
.hero-tit .dest { color: #bab4a0; font-weight: 300; letter-spacing: .04em; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.hero-txt .btn { font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 500; letter-spacing: .1em; font-size: 15px; }
.pal { display: inline-block; }
.ativa .pal { animation: pal-in .9s cubic-bezier(.2, .7, .1, 1) both; animation-delay: calc(var(--i, 0) * 70ms + var(--atraso, 250ms)); }
/* sobrelinha, texto e botão chegam logo depois das palavras */
.ativa .hero-txt .sobre, .ativa .hero-txt p, .ativa .hero-txt .btn { animation: sobe-in .7s ease both .35s; }
.ativa .hero-txt p { animation-delay: .65s; }
.ativa .hero-txt .btn { animation-delay: .8s; }
/* Willian 30/10: as palavras entram da ESQUERDA para a direita, sem desfoque */
@keyframes pal-in { from { opacity: 0; transform: translateX(-.8em); } }
/* "Encontre a sua": as palavras aparecem saindo de uma fumaça (Willian 02/11), em vez de deslizar */
.ativa .pal.fumaca { animation: fumaca 1.3s ease-out both; animation-delay: calc(var(--i, 0) * 110ms + var(--atraso, 250ms)); }
@keyframes fumaca { 0% { opacity: 0; filter: blur(14px); transform: scale(1.12); } 60% { opacity: .85; filter: blur(3px); } 100% { opacity: 1; filter: none; transform: none; } }
.pal.fumaca { transform-box: fill-box; transform-origin: 50% 60%; }
@keyframes sobe-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide.ativa { transition: none; }
  .hero-bolas i { animation: none; width: 100%; }  /* sem troca automática (o JS também não avança) */
  .ativa .pal, .ativa .pal.fumaca, .ativa .hero-txt .sobre, .ativa .hero-txt p, .ativa .hero-txt .btn, .hero-arte.ativa > a, .ativa .pedra, .ativa .aparece, .ativa .arte-btn { animation: none; }
}
@media (min-width: 390px) { .hero-tit { font-size: 42px; } }
@media (min-width: 520px) { .hero-tit { font-size: 50px; } }
@media (min-width: 1024px) { .hero-tit { font-size: 62px; } }
@media (min-width: 1280px) { .hero-tit { font-size: 74px; } }
@media (min-width: 1600px) { .hero-tit { font-size: 84px; } }
.hero-txt p { color: rgba(255, 255, 255, .82); font-size: 15px; line-height: 1.55; margin: auto 0 20px; max-width: 46ch; }  /* auto: no celular desce para o pé */
@media (max-width: 379px) { .hero-txt p { display: none; } .hero-txt .btn { margin-top: auto; } }  /* 320 px: o parágrafo não cabe no quadro fixo */
@media (min-width: 1024px) { .hero-txt p { font-size: 17px; line-height: 1.6; margin: 18px 0 28px; } }
/* bolinhas POR CIMA da imagem também no celular (Willian 02/11: "assim como no padrão de desktop"): lá ficam
   no pé do quadro, com a bolinha a 26 px da borda (02/11: "preciso de mais margem"; área de toque de 44 px) */
.hero-bolas { position: absolute; inset-inline: 0; bottom: 0; z-index: 3; display: flex; justify-content: center; }
/* computador: bolinha a 7,8 % do pé do quadro (52 px em 1440; Willian 02/11: "dê mais margem"), na proporção da
   arte — com distância fixa em px elas caíam sobre a frase do PRO em 1024 px; assim ficam na faixa verde, abaixo dela */
@media (min-width: 1024px) { .hero-bolas { height: 15.6%; align-items: center; } }
.hero-bolas button { min-width: 44px; min-height: 44px; display: flex; align-items: flex-end; justify-content: center; padding: 0 4px 21px; }
@media (min-width: 1024px) { .hero-bolas button { align-items: center; padding: 0 4px; } }
/* bolinhas visíveis tanto sobre as artes escuras quanto sobre o fundo claro */
.hero-bolas span { position: relative; display: block; height: 10px; width: 10px; border-radius: 999px; overflow: hidden; background: rgba(0, 0, 0, .45); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); transition: width .5s ease, background .3s; }
.hero-bolas button:hover span { background: rgba(0, 0, 0, .5); }
.hero-bolas button[aria-current="true"] span { width: 36px; background: rgba(0, 0, 0, .55); }
/* a própria barra é o relógio: quando ela enche, passa o slide */
.hero-bolas i { position: absolute; inset: 0 auto 0 0; background: #fff; border-radius: 999px; animation: barra 6500ms linear both; }
.hero.pausado .hero-bolas i { animation-play-state: paused; }
@keyframes barra { from { width: 0; } to { width: 100%; } }

/* 2. dois banners lado a lado: escuro (texto + imagem) e claro (centralizado) */
/* dois blocos lado a lado no computador: Triumph (no lugar do LPVO, Willian 02/11) e Defender */
.duo { display: grid; }
@media (min-width: 1024px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo-claro { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; padding: 72px 16px 0; }
@media (min-width: 1024px) { .duo-claro { padding: 112px 24px 0; } }
.duo-claro h2 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
@media (min-width: 1280px) { .duo-claro h2 { font-size: 38px; } }
.duo-claro p { color: var(--cinza); margin: 10px 0 24px; }
.duo-claro .sobre strong { color: var(--verde-vortex); text-decoration: underline; text-underline-offset: 4px; }
.duo-claro .duo-img { width: 100%; max-width: 560px; margin-top: auto; }
.duo-claro .duo-img img { width: 100%; }  /* as duas no mesmo quadrado (Willian 02/11: Triumph "no mesmo formato do bloco Defender") */

/* 3. categorias em quadrados */
.bloco-cat { padding-top: 72px; }
@media (min-width: 1024px) { .bloco-cat { padding-top: 112px; } }
.cat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* 6 numa linha só a partir de 1024 px: entre 768 e 1023 os quadrados ficavam pequenos (3 colunas maiores) */
@media (min-width: 768px) { .cat-tiles { grid-template-columns: repeat(3, minmax(0, 200px)); justify-content: center; gap: 16px; } }
@media (min-width: 1024px) { .cat-tiles { grid-template-columns: repeat(6, minmax(0, 168px)); gap: 20px 28px; } }
.cat-tiles a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 1; background: var(--cinza-bloco); font-size: 14px; font-weight: 600; transition: background .2s, color .2s; text-align: center; padding: 8px; }
.cat-tiles a:hover { background: #e9ece8; color: var(--verde-vortex); }
/* produto recortado flutuando, com a sombra no chão em contra-fase (sobe → sombra encolhe e clareia) */
/* todos apoiados no mesmo "chão" (embaixo): a sombra fica sempre à mesma distância do produto */
.cat-ico { position: relative; width: 78%; height: 52%; display: flex; align-items: flex-end; justify-content: center; }
.cat-ico img { max-width: 100%; max-height: 100%; width: auto; height: auto; position: relative; z-index: 1;
  animation: cat-flutua 3.6s ease-in-out infinite; }
.cat-ico::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -10px; height: 10px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0)); animation: cat-sombra 3.6s ease-in-out infinite; }
/* cada card numa fase diferente (0 / -0,6 / … / -3 s) */
.cat-tiles li:nth-child(2) .cat-ico > *, .cat-tiles li:nth-child(2) .cat-ico::after { animation-delay: -.6s; }
.cat-tiles li:nth-child(3) .cat-ico > *, .cat-tiles li:nth-child(3) .cat-ico::after { animation-delay: -1.2s; }
.cat-tiles li:nth-child(4) .cat-ico > *, .cat-tiles li:nth-child(4) .cat-ico::after { animation-delay: -1.8s; }
.cat-tiles li:nth-child(5) .cat-ico > *, .cat-tiles li:nth-child(5) .cat-ico::after { animation-delay: -2.4s; }
.cat-tiles li:nth-child(6) .cat-ico > *, .cat-tiles li:nth-child(6) .cat-ico::after { animation-delay: -3s; }
/* a luneta é fina e comprida: mais largura pra ter o mesmo peso visual dos outros */
.cat-tiles li:first-child .cat-ico { width: 92%; }
@media (max-width: 360px) {
  .cat-tiles a { padding: 6px 4px; gap: 8px; font-size: 13px; }
  .cat-ico { width: 88%; height: 58%; }
}
@keyframes cat-flutua { 50% { transform: translateY(-7px); } }
@keyframes cat-sombra { 50% { transform: scaleX(.78); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .cat-ico img, .cat-ico::after { animation: none; } }

/* 4 e 7. cards de produto (foto em fundo cinza; o branco da foto some com multiply) */
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
@media (min-width: 640px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; } }
@media (min-width: 1024px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; } }
@media (min-width: 1024px) { .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 30px; } }
@media (max-width: 511px) { .grade-1cel { grid-template-columns: minmax(0, 1fr); } }
.card a { display: flex; flex-direction: column; height: 100%; }
.card-foto { aspect-ratio: 7 / 8; display: flex; align-items: center; justify-content: center; padding: 10%; background: var(--cinza-bloco); overflow: hidden; }
.card-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .45s ease; }
.card a:hover .card-foto img { transform: scale(1.05); }
.sem-foto { color: var(--cinza-claro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.card-txt { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; }
.card-nome { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.card a:hover .card-nome { color: var(--verde-vortex); }
.card-marca { font-size: 14px; color: var(--cinza-claro); }
.card-cod { font-size: 13px; color: var(--cinza); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
@media (min-width: 1024px) { .grade-3 .card-nome { font-size: 22px; } }
@media (max-width: 767px) { .card-nome { font-size: 15px; -webkit-line-clamp: 3; } .card-marca { font-size: 13px; } }
.link-ver { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--brand); white-space: nowrap; }
.link-ver:hover { color: var(--brand-escuro); }
.rail-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.rail-topo h2 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }

/* 5. por que nós (texto + 4 vantagens) e, logo abaixo, a faixa da garantia VIP */
.porque { display: grid; gap: 32px; padding-top: 72px; padding-bottom: 72px; }
@media (min-width: 1024px) { .porque { grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; padding-top: 112px; padding-bottom: 112px; } }
.porque-txt > p { color: var(--cinza); margin-top: 14px; font-size: 16px; line-height: 1.6; max-width: 52ch; }
.vantagens { display: grid; gap: 28px; }
@media (min-width: 640px) { .vantagens { grid-template-columns: 1fr 1fr; gap: 36px 28px; } }  /* antes de 640 o texto ficava com 134 px (print do Willian 02/11) */
.vantagens li { display: flex; gap: 16px; align-items: flex-start; }
/* selos (losango) e logo Vortex: todos na mesma caixa, sem ampliar (os arquivos têm 141–192 px) */
.vantagens .vant-ico { flex: none; width: 76px; height: 76px; object-fit: contain; }
@media (min-width: 1024px) { .vantagens .vant-ico { width: 88px; height: 88px; } }
/* o logo Vortex é um quadrado cheio: menor que os losangos pra ter o mesmo peso visual */
.vantagens .vant-distribuidor { padding: 7px; }  /* px fixo: % seria da largura do li */
@media (min-width: 1024px) { .vantagens .vant-distribuidor { padding: 8px; } }
/* texto de cada item com ≥ 220 px: 1 coluna entre 1024 e 1279, lista mais larga a partir de 1280 */
@media (min-width: 1024px) and (max-width: 1279px) { .vantagens { grid-template-columns: 1fr; gap: 24px; } }
@media (min-width: 1280px) { .porque { grid-template-columns: 1fr 1.5fr; } }
.vantagens h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.vantagens p { color: var(--cinza); font-size: 15px; line-height: 1.55; }

/* garantia VIP — mesmo bloco do site da Vortex, cores medidas no print: verde #006252, limão #addc0f */
.vip { --vip-verde: #006252; --vip-limao: #addc0f; display: grid; background: var(--vip-verde); color: #fff; }
@media (min-width: 1024px) { .vip { grid-template-columns: minmax(0, 1fr) minmax(0, 640px); } }
.vip-txt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; padding: 56px 16px; }
@media (min-width: 1024px) { .vip-txt { justify-content: center; gap: 20px; padding: 20px 32px; } }
.vip-tit, .vip-tag, .vip-selo p, .vip-btn { font-family: "Oswald", "Arial Narrow", sans-serif; text-transform: uppercase; }
.vip-tit { display: flex; flex-direction: column; font-weight: 600; font-size: 54px; line-height: 1; letter-spacing: .01em; }
@media (min-width: 1280px) { .vip-tit { font-size: 70px; } .vip-txt { gap: 17px; } }
.vip-contorno { font-weight: 400; color: transparent; -webkit-text-stroke: 1.6px #fff; }
.vip-tag { display: inline-block; background: var(--vip-limao); color: var(--vip-verde); font-weight: 600; font-size: 20px; letter-spacing: .03em; padding: 4px 30px; transform: skewX(-24deg); }
.vip-tag > span { display: inline-block; transform: skewX(24deg); }
@media (min-width: 1280px) { .vip-tag { font-size: 23px; } }
.vip-selo { display: flex; align-items: center; gap: 18px; text-align: left; }
.vip-svg { width: 84px; height: 84px; flex: none; }
@media (min-width: 1280px) { .vip-svg { width: 96px; height: 96px; } }
.vip-selo p { display: flex; flex-direction: column; font-weight: 500; font-size: 20px; line-height: 1.12; letter-spacing: .02em; }
@media (min-width: 1280px) { .vip-selo p { font-size: 23px; } }
.vip-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 40px; background: #fff; color: var(--vip-verde); font-weight: 500; font-size: 18px; letter-spacing: .04em; transition: background .2s; }
.vip-btn:hover { background: var(--vip-limao); }
.vip-txt small { font-size: 13px; color: rgba(255, 255, 255, .75); max-width: 40ch; }
/* foto oficial só existe em 640×480: nunca passa disso na tela */
.vip-foto { width: 100%; max-width: 640px; margin: 0 auto; }
.vip-foto img { width: 100%; height: auto; display: block; }
/* desktop: a foto ocupa a altura toda da faixa (no máx. 2 % acima do nativo — trava medida no teste) */
@media (min-width: 1024px) {
  .vip-foto { margin: 0; align-self: stretch; }
  .vip-foto img { height: 100%; object-fit: cover; }
}

/* 6. mosaico de categorias (3 em cima, 2 embaixo) */
.mosaico { display: grid; gap: 16px; padding-top: 72px; }
@media (min-width: 768px) { .mosaico { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 30px; } }
@media (min-width: 1024px) { .mosaico { padding-top: 112px; } }
.mos { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; background: var(--cinza-bloco); padding: 28px; min-height: 300px; overflow: hidden; }
@media (min-width: 768px) {
  .mos-p { grid-column: span 3; }
  .mos-g { grid-column: span 6; flex-direction: row; align-items: center; }
  .mos-m { grid-column: span 6; flex-direction: row; align-items: center; }
  .mos-m:last-child { grid-column: span 6; }
  .mos { min-height: 360px; }
}
@media (min-width: 1024px) { .mos-m:nth-child(4) { grid-column: span 7; } .mos-m:last-child { grid-column: span 5; } }
@media (min-width: 768px) and (max-width: 1023px) { .mos-g { grid-column: span 12; } .mos-p { grid-column: span 6; } }
.mos-img { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 160px; }
.mos-img img { max-height: 220px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .45s ease; }
.mos:hover .mos-img img { transform: scale(1.05); }
.mos-txt { position: relative; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 768px) { .mos-g .mos-txt, .mos-m .mos-txt { flex: none; max-width: 48%; } }
.mos-txt .sobre { margin-bottom: 2px; color: var(--cinza); font-size: 12px; }
.mos-txt strong { font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.mos-txt u { font-size: 15px; text-underline-offset: 4px; color: var(--texto); }
.mos:hover .mos-txt u { color: var(--verde-vortex); }
.mos-marca { position: absolute; top: 24px; right: 28px; font-size: 13px; letter-spacing: .45em; text-transform: uppercase; color: #737373; }


/* ── páginas internas ───────────────────────────────────────────────────── */
.pag { padding-top: 20px; padding-bottom: 64px; }
.migalha { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; color: var(--cinza-claro); margin-bottom: 16px; }
.migalha a { display: inline-flex; align-items: center; min-height: 44px; }
.migalha a:hover { color: var(--brand); }
.migalha > span:last-child { color: var(--texto); }

.cat-topo { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.cat-topo h1 { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
@media (min-width: 1024px) {
  .cat-topo { flex-direction: row; align-items: center; justify-content: space-between; }
  .cat-topo h1 { font-size: 40px; }
}
.cat-busca { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border: 1px solid #d4d4d4; background: #fff; color: var(--cinza-claro); width: 100%; }
@media (min-width: 1024px) { .cat-busca { width: 380px; } }
.cat-busca:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31, 103, 55, .15); }
.cat-busca span { display: flex; }
.cat-busca input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 16px; color: var(--texto); background: transparent; height: 44px; }

.cat-conta { font-size: 14px; color: var(--cinza); margin: 8px 0 16px; }
.vazio { text-align: center; padding: 48px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--cinza); }

/* ── página de produto ──────────────────────────────────────────────────── */
/* minmax(0, 1fr): sem isso a faixa de miniaturas (rolagem própria) alargava a coluna no celular */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1024px) { .pdp { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; } }
/* galeria (opção A, Willian 02/11): quadro quadrado só com o produto + miniaturas ao lado; as fotos de uso descem para
   a faixa "Em uso". Produto = foto inteira no quadro branco; cena (foto quadrada sem fundo branco) = preenche o quadro.
   A foto nunca passa do tamanho real: o quadro tem no máximo a largura da coluna e as fotos têm 1024 px. */
.gal { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 1024px) {
  .gal { position: sticky; top: calc(var(--cab) + 20px); flex-direction: row-reverse; align-items: flex-start; }
  .gal-palco { flex: 1; min-width: 0; }
}
.gal-palco { position: relative; }
.gal-trilho { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  border: 1px solid var(--linha); background: #fff; }
.gal-trilho::-webkit-scrollbar { display: none; }
.gal-trilho:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.gal-slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 6%; cursor: zoom-in; background: #fff; }
.gal-slide img { width: 100%; height: 100%; object-fit: contain; }
.gal-slide.cena { padding: 0; }
.gal-slide.cena img { object-fit: cover; }
@media (hover: hover) { .gal-slide:not(.cena) { padding: max(6%, 60px); } }  /* setas sem cobrir o produto */
.gal-seta, .gal-cheia { position: absolute; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--texto);
  box-shadow: 0 2px 10px rgba(0,0,0,.12); transition: opacity .2s, background .2s; }
.gal-seta { top: 50%; width: 44px; height: 44px; margin-top: -22px; }
.gal-seta.ant { left: 12px; }
.gal-seta.prox { right: 12px; }
.gal-seta:hover, .gal-cheia:hover { background: #fff; }
.gal-seta:disabled { opacity: 0 !important; pointer-events: none; }
.gal-cheia { top: 12px; right: 12px; width: 44px; height: 44px; }
.gal-cont { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 99px; background: rgba(20,20,20,.62); color: #fff;
  font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .02em; pointer-events: none; }
.gal-cont b { font-weight: 600; }
@media (hover: hover) {
  .gal-seta { opacity: 0; }
  .gal-palco:hover .gal-seta, .gal-seta:focus-visible { opacity: 1; }
}
@media (hover: none) { .gal-seta { display: none; } }
.gal-minis { position: relative; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; }
.gal-minis::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .gal-minis { flex-direction: column; overflow: visible; padding: 0; } }
.mini { flex: none; width: 72px; height: 72px; border: 1px solid var(--linha); background: #fff; padding: 6px; overflow: hidden; transition: border-color .2s; }
.mini img { width: 100%; height: 100%; object-fit: contain; }
.mini.cena { padding: 0; }
.mini.cena img { object-fit: cover; }
.mini:hover { border-color: #a3a3a3; }
.mini.ativa { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.em-uso { margin-top: 56px; }
.em-uso h2 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 16px; }
.em-uso-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .em-uso-grade { grid-template-columns: repeat(auto-fill, minmax(0, 300px)); gap: 16px; } }
.em-uso-foto { aspect-ratio: 4 / 5; overflow: hidden; cursor: zoom-in; background: var(--fundo-2); }
.em-uso-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
@media (hover: hover) { .em-uso-foto:hover img { transform: scale(1.03); } }

/* tela cheia */
.lb { position: fixed; inset: 0; z-index: 90; background: #0e0e0e; color: #fff; }
.lb-trilho { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lb-trilho::-webkit-scrollbar { display: none; }
.lb-trilho figure { flex: 0 0 100%; scroll-snap-align: start; margin: 0; display: flex; align-items: center; justify-content: center; padding: 72px 16px; }
.lb-trilho img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.lb-x, .lb-seta { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; transition: background .2s; }
.lb-x:hover, .lb-seta:hover { background: rgba(255,255,255,.2); }
.lb-x { top: 12px; right: 12px; }
.lb-seta { top: 50%; margin-top: -24px; }
.lb-seta.ant { left: 16px; }
.lb-seta.prox { right: 16px; }
@media (hover: none) { .lb-seta { display: none; } }
.lb-cont { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font-size: 14px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.75); }

.pdp-info { display: flex; flex-direction: column; gap: 12px; }
.pdp-marca { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); }
.pdp-info h1 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
@media (min-width: 1024px) { .pdp-info h1 { font-size: 36px; } }
.pdp-cod { font-size: 14px; color: var(--cinza-claro); }
.fatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); margin: 8px 0 0; }
.fatos div { background: #fff; padding: 10px 14px; }
.fatos > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fatos dt { font-size: 12px; color: var(--cinza-claro); }
.fatos dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; }
.preco-breve { margin-top: 12px; padding: 20px; background: var(--fundo-2); display: flex; flex-direction: column; gap: 8px; }
.preco-breve strong { font-size: 18px; font-weight: 600; }
.preco-breve p { font-size: 14px; color: var(--cinza); margin-bottom: 8px; }
.preco-breve .btn { width: 100%; }
.pdp-garantias { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--cinza); }
.pdp-garantias li { display: flex; align-items: center; gap: 10px; }
.pdp-garantias li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }

.pdp-desc { max-width: 920px; margin-top: 48px; display: flex; flex-direction: column; gap: 40px; }
.bloco h2 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--linha); }
.bloco p { color: #404040; margin-bottom: 12px; font-size: 16px; line-height: 1.65; }
.recursos { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 768px) { .recursos { grid-template-columns: repeat(2, 1fr); gap: 20px 32px; } }
.recursos li { display: flex; flex-direction: column; gap: 4px; padding-left: 14px; border-left: 2px solid var(--brand); }
.recursos strong { font-size: 15px; font-weight: 600; }
.recursos span { font-size: 15px; color: #525252; line-height: 1.55; }
.inclusos { display: grid; gap: 8px; }
@media (min-width: 768px) { .inclusos { grid-template-columns: repeat(2, 1fr); gap: 8px 32px; } }
.inclusos li { display: flex; gap: 10px; font-size: 15px; color: #404040; }
.inclusos li::before { content: "✓"; color: var(--brand); font-weight: 700; }
.specs { width: 100%; border-collapse: collapse; font-size: 15px; }
.specs th, .specs td { text-align: left; padding: 11px 12px; border-bottom: 1px solid #efefef; vertical-align: top; }
.specs th { width: 45%; font-weight: 500; color: var(--cinza); }
.specs tr:nth-child(odd) { background: #fafafa; }
.rel { margin-top: 56px; }

.nada { text-align: center; padding-top: 80px; padding-bottom: 96px; }
.nada h1 { font-size: 32px; font-weight: 600; margin-bottom: 12px; }
.nada p { color: var(--cinza); margin-bottom: 24px; }
.nada-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── rodapé: claro, 4 colunas + barra final com pagamento (modelo) ──────── */
.rod { background: #f2f2f0; color: var(--texto); }
.rod-grade { display: grid; gap: 40px; padding-top: 64px; padding-bottom: 56px; }
@media (min-width: 600px) { .rod-grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .rod-grade { grid-template-columns: 1.3fr 1fr 1fr 1.25fr; gap: 48px; padding-top: 96px; padding-bottom: 80px; } }
.rod-marca { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.rod-marca p { color: var(--cinza); font-size: 15px; line-height: 1.6; margin-top: 8px; }
.rod-fone { display: flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 600; }
.rod-mail { display: flex; align-items: center; min-height: 44px; color: var(--cinza); letter-spacing: .04em; word-break: break-all; }
.rod-col h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 14px; }
.rod-col li a { display: flex; align-items: center; min-height: 44px; font-size: 15px; color: #444; }
.rod-col a:hover, .rod-fone:hover, .rod-mail:hover { color: var(--verde-vortex); }
.rod-lojista p { color: var(--cinza); font-size: 15px; line-height: 1.6; }
.rod-cta { display: inline-flex !important; align-items: center; gap: 12px; min-height: 48px; margin: 18px 0 28px; background: var(--texto); color: #fff !important; padding: 0 0 0 20px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.rod-cta svg { width: 48px; height: 48px; padding: 15px; background: var(--brand); color: #fff; }
.rod-cta:hover svg { background: var(--verde-vortex); }
.rod-lojista h4 { font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rod-lojista h4::after { content: ""; width: 44px; height: 1px; background: var(--texto); }
.rod-redes { display: flex; gap: 12px; }
.rod-redes .rede { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #cfcfcf; border-radius: 50%; color: #222;
  transition: color .2s, border-color .2s; }
a.rede:hover { color: var(--verde-vortex); border-color: var(--verde-vortex); }
.rod-base { background: #fff; font-size: 14px; color: var(--cinza); }
.rod-base .wrap { display: flex; flex-direction: column; gap: 12px; justify-content: space-between; padding-top: 20px; padding-bottom: 88px; }
@media (min-width: 768px) { .rod-base .wrap { flex-direction: row; align-items: center; } }
@media (min-width: 1024px) { .rod-base .wrap { padding-bottom: 20px; padding-right: 104px; } }
.rod-pag { display: flex; gap: 8px; }
.rod-pag li { border: 1px solid #dcdcdc; padding: 4px 10px; font-size: 13px; font-weight: 600; color: #444; }

/* ── WhatsApp flutuante: redondo e compacto, ícone centralizado (Willian 30/10: o pílula estava grande) ── */
html:has(#gaveta:not([hidden])) .wa-flutua { display: none; }  /* não aparece por trás do menu do celular */
.wa-flutua {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--verde-vortex); color: #fff;  /* verde Vortex (Willian 02/11), não o verde do WhatsApp */
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18), 0 0 0 4px rgba(0, 98, 83, .18);
  transition: transform .2s, box-shadow .2s;
}
.wa-flutua svg { width: 28px; height: 28px; }
.wa-flutua:hover { transform: scale(1.06); background: var(--brand-escuro); box-shadow: 0 8px 22px rgba(0, 0, 0, .22), 0 0 0 6px rgba(0, 98, 83, .2); }
.wa-dica {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translate(4px, -50%);
  background: #1c1c1c; color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap;
  padding: 7px 12px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.wa-flutua:hover .wa-dica, .wa-flutua:focus-visible .wa-dica { opacity: 1; transform: translate(0, -50%); }
@media (min-width: 1024px) { .wa-flutua { right: 24px; bottom: 24px; width: 56px; height: 56px; } }

/* ── área do lojista (mesmo desenho do "Entrar ou cadastrar loja" do storefront) ── */
.entrar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 16px; padding-bottom: 16px; }
/* celular/tablet: cinza e verde de ponta a ponta, sem margem nem vão (Willian 02/11); o texto fica onde estava
   (16 px da margem que saiu + 24 px de respiro = 40 px) */
@media (max-width: 1023px) { .entrar.wrap { padding: 0; gap: 0; } .entrar-form, .entrar-lado { padding-inline: 40px; } }
@media (max-width: 359px) { .entrar-form, .entrar-lado { padding-inline: 16px; } }
/* celular estreito: a tabela de pedidos rola dentro dela, nunca a página */
@media (min-width: 1024px) { .entrar { grid-template-columns: 1fr 1fr; min-height: 72vh; } }
.entrar-form { display: flex; align-items: center; justify-content: center; background: var(--fundo-2); padding: 40px 24px; }
.entrar-in { max-width: 420px; width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.entrar-in h1 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.entrar-in p { color: var(--cinza); font-size: 15px; line-height: 1.6; margin-bottom: 6px; }
.entrar-volta { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--brand); }
.entrar-volta:hover { color: var(--brand-escuro); }
.entrar-lado { display: flex; flex-direction: column; justify-content: center; gap: 28px; background: var(--brand); color: #fff; padding: 40px 24px; }
@media (min-width: 1024px) { .entrar-lado { padding: 48px; } }
.entrar-lado h2 { font-size: 26px; font-weight: 600; line-height: 1.2; }
@media (min-width: 1024px) { .entrar-lado h2 { font-size: 30px; } }
.entrar-lado ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.entrar-lado li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; }
.entrar-lado li span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--brand); font-weight: 600; font-size: 14px; }

/* ── /garantia/: cópia traduzida da página VIP da Vortex (mesmos blocos, mesmas cores) ── */
.g-tit { font-family: "Oswald", "Arial Narrow", sans-serif; text-transform: uppercase; font-weight: 600; font-size: 34px; line-height: 1.05; letter-spacing: .01em; color: #231f20; }
@media (min-width: 1024px) { .g-tit { font-size: 48px; } }
.g-estreito { max-width: 860px; text-align: center; }
.g-obs { font-size: 14px; color: var(--cinza); }
.g-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 36px; background: #006252; color: #fff;
  font-family: "Oswald", "Arial Narrow", sans-serif; text-transform: uppercase; font-size: 17px; font-weight: 500; letter-spacing: .05em; transition: background .2s, color .2s; }
.g-btn:hover { background: #004a3e; }
.g-btn-borda { background: transparent; color: #006252; border: 2px solid #006252; }
.g-btn-borda:hover { background: #006252; color: #fff; }
.g-btn-limao { background: #addc0f; color: #006252; }
.g-btn-limao:hover { background: #fff; }

.g-topo { display: grid; background: #006252; color: #fff; }
@media (min-width: 1024px) { .g-topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); min-height: 460px; } }
.g-topo-txt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 16px; text-align: center; }
.g-topo-txt .vip-svg { width: 120px; height: 120px; }
@media (min-width: 1024px) { .g-topo-txt .vip-svg { width: 150px; height: 150px; } }
.g-topo-txt p { font-family: "Oswald", "Arial Narrow", sans-serif; text-transform: uppercase; font-weight: 500; font-size: 28px; line-height: 1.15; letter-spacing: .02em; }
@media (min-width: 1024px) { .g-topo-txt p { font-size: 38px; } }
/* recorte da foto oficial tem 1120×720: nunca passa disso */
.g-topo-foto { max-width: 1120px; overflow: hidden; }
.g-topo-foto picture { display: block; height: 100%; }
.g-topo-foto img { width: 100%; height: 100%; object-fit: cover; }

.g-promessa { background: #f2f2f2; padding: 64px 0; }
@media (min-width: 1024px) { .g-promessa { padding: 80px 0; } }
.g-promessa .g-tit { font-size: 44px; }
@media (min-width: 1024px) { .g-promessa .g-tit { font-size: 64px; } }
.g-promessa p { margin: 20px auto 0; font-size: 16px; line-height: 1.7; color: #3d3d3d; max-width: 78ch; }
.g-pilares { display: grid; gap: 20px; margin: 40px 0 28px; }
@media (min-width: 640px) { .g-pilares { grid-template-columns: repeat(3, 1fr); } }
.g-pilares li { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.g-pilares img { width: 56px; height: 56px; }
.g-pilares h2 { font-family: "Oswald", "Arial Narrow", sans-serif; text-transform: uppercase; font-weight: 600; font-size: 24px; color: #006252; }
.g-promessa .g-obs { font-size: 13px; }
.g-promessa .g-obs a { color: #006252; text-decoration: underline; text-underline-offset: 3px; }

.g-servico { padding-top: 64px; padding-bottom: 64px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.g-servico p { max-width: 62ch; line-height: 1.65; color: #3d3d3d; }
.g-servico p a { color: #006252; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; white-space: nowrap; }
@media (max-width: 420px) { .g-servico p a { white-space: normal; } }

.g-video { display: grid; gap: 28px; align-items: center; padding-bottom: 72px; }
@media (min-width: 1024px) { .g-video { grid-template-columns: 1.25fr 1fr; gap: 56px; } }
.g-video-capa { position: relative; display: block; width: 100%; max-width: 1215px; text-align: left; background: #006252; overflow: hidden; }
.g-video-capa img { width: 100%; }
/* faixa refeita em português (no original vinha gravada em inglês na imagem) */
.g-video-faixa { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 12px 16px; background: #006252; color: #fff; text-align: center; }
.g-video-l1 { font-family: "Oswald", "Arial Narrow", sans-serif; text-transform: uppercase; font-weight: 700; font-size: 30px; line-height: 1; }
@media (min-width: 1024px) { .g-video-l1 { font-size: 46px; } }
.g-video-l1 .vip-contorno { font-weight: 400; }
.g-video-l2 { font-family: "Oswald", "Arial Narrow", sans-serif; text-transform: uppercase; font-style: italic; font-weight: 600; color: #addc0f; font-size: 20px; }
@media (min-width: 1024px) { .g-video-l2 { font-size: 28px; } }
.g-play { position: absolute; left: 50%; top: 36%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(0, 0, 0, .55); box-shadow: 0 0 0 3px #fff; transition: background .2s, transform .2s; }
.g-play::after { content: ""; position: absolute; left: 30px; top: 22px; border-left: 24px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
.g-video-capa:hover .g-play { background: #006252; transform: scale(1.06); }
.g-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.g-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.g-video-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.g-video-txt p { line-height: 1.65; color: #3d3d3d; }
.g-video-txt small { color: var(--cinza-claro); font-size: 13px; }

.g-lojista { background: #006252; color: #fff; padding: 64px 0; }
.g-lojista .g-tit { color: #fff; }
.g-lojista p { margin: 14px auto 26px; color: rgba(255, 255, 255, .85); }

/* /garantia/ — termo de garantia internacional (o item "comprado de terceiros" em destaque) */
.g-termo { padding-top: 64px; padding-bottom: 0; max-width: 980px; }
.g-termo .g-tit { text-align: center; }
.g-termo-intro { margin: 18px auto 0; max-width: 70ch; text-align: center; font-size: 16px; line-height: 1.7; color: #3d3d3d; }
.g-termo-lista { display: grid; gap: 16px; margin-top: 32px; counter-reset: termo; list-style: none; padding: 0; }  /* número vem do counter */
.g-termo-lista li { counter-increment: termo; padding: 24px; background: #f2f2f2; }
@media (min-width: 768px) { .g-termo-lista li { padding: 28px 36px; } }
.g-termo-lista h3 { font-family: "Oswald", "Arial Narrow", sans-serif; text-transform: uppercase; font-weight: 600; font-size: 19px;
  line-height: 1.2; color: #231f20; margin-bottom: 10px; }
/* número fora do fluxo: a 2ª linha do título fica alinhada ao texto, não embaixo do número */
.g-termo-lista h3 { display: flex; gap: .35em; }
.g-termo-lista h3::before { content: counter(termo) "."; color: #006252; flex: none; }
.g-termo-lista p { font-size: 15px; line-height: 1.65; color: #3d3d3d; }
.g-termo-lista .g-termo-destaque { background: #fff; border: 2px solid #006252; padding: 22px; }  /* borda descontada: texto alinhado aos outros */
@media (min-width: 768px) { .g-termo-lista .g-termo-destaque { padding: 26px 34px; } }
.g-termo-destaque a, .g-servico-terceiros a { color: #006252; text-decoration: underline; text-underline-offset: 3px; }
.g-servico-terceiros { font-size: 15px; }

/* ── abertura: o "V" da Vortex é desenhado e preenchido, como a coroa da Base Charlie (Willian 02/11) ──────────
   1x por sessão; o site.js tira (mín. 1,7 s, teto 2,6 s); sem JS some sozinha em 5 s */
#abertura { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center;
  background: #fff; transition: opacity .45s ease; animation: abertura-auto .45s ease 5s forwards; }
#abertura.sai { opacity: 0; pointer-events: none; }
.sem-abertura #abertura { display: none; }
#abertura svg { width: 150px; max-width: 34vw; height: auto; overflow: visible; }
#abertura path { fill: #231f20; fill-opacity: 0; stroke: #231f20; stroke-width: .5; stroke-linejoin: round;
  stroke-dasharray: 400; stroke-dashoffset: 400; animation: abertura-traco 1.25s ease-in-out forwards, abertura-preenche .45s ease 1.2s forwards; }
@keyframes abertura-traco { to { stroke-dashoffset: 0; } }
@keyframes abertura-preenche { to { fill-opacity: 1; } }
@keyframes abertura-auto { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { #abertura path { animation: none; fill-opacity: 1; stroke-dashoffset: 0; } }

/* ── revisão de margens e alinhamento (revisor-ux 02/11, pedido do Willian) ─────────────────────────────── */
/* linhas de leitura com no máximo ~72 caracteres e sem palavra solta no fim */
.g-obs { max-width: 68ch; margin-inline: auto; }
.g-promessa p, .g-termo-intro { max-width: 64ch; }
.g-termo-lista p, .bloco p { max-width: 72ch; }
.g-promessa p, .g-obs, .g-termo-intro, .g-servico p, .vantagens p, .tit-centro p, .tit-lado p, .porque-txt > p,
.mos-txt u, .bloco p, .rod-lojista p, .duo-claro p { text-wrap: pretty; }
.vantagens h3, .g-tit, .mos-txt strong, .vip-selo p, .duo-claro h2 { text-wrap: balance; }
/* Triumph e Defender empilhados (celular/tablet): o mesmo respiro das outras seções entre os dois */
@media (max-width: 1023px) { .duo-claro + .duo-claro { padding-top: 72px; } }
/* /garantia/: mesmo ritmo vertical em todas as seções */
@media (min-width: 1024px) {
  .g-servico, .g-termo { padding-top: 80px; padding-bottom: 80px; }
  .g-lojista { padding: 80px 0; }
  .g-termo { padding-bottom: 0; }
}
/* produto: a descrição alinha com a coluna da galeria */
@media (min-width: 1024px) { .pdp-desc { max-width: calc((100% - 48px) * 1.15 / 2.15); } }
/* mosaico de 1024 a 1279: cartões estreitos → menos recuo e título menor */
@media (min-width: 1024px) and (max-width: 1279px) { .mos { padding: 22px; } .mos-txt strong { font-size: 20px; } }
/* entrar: o "voltar" alinha com o texto do bloco */
.entrar-volta { justify-content: flex-start; }
/* 320 px: título da seção não fica espremido pelo "Ver todos" */
@media (max-width: 359px) { .tit-lado, .rail-topo { flex-wrap: wrap; } }
/* WhatsApp um pouco menor no celular, para cobrir menos texto durante a rolagem */
@media (max-width: 1023px) { .wa-flutua { width: 48px; height: 48px; } .wa-flutua svg { width: 26px; height: 26px; } }

/* ── área do lojista no site (lojista.js; Willian 03/11: "a loja do lojista é o próprio site") ── */
.sacola { position: relative; color: #fff; }
.sacola-n { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--brand-vivo);
  color: #0b0b0b; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--cabecalho); }
@media (min-width: 1024px) {  /* computador: carrinho no mesmo anel da lupa e do perfil; o selo sai para a borda do anel e não cobre o desenho */
  .cab-acoes .sacola { border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 50%; transition: border-color .2s, color .2s; }
  .cab-acoes .sacola:hover { background: none; border-color: var(--brand-vivo); color: var(--brand-vivo); }
  .cab-acoes .sacola-n { top: -5px; right: -5px; }
}
/* com a sacola, o cabeçalho abre espaço: busca vira só a lupa e o menu fica um pouco mais justo */
.lojista-on .campo-busca { width: 44px; padding: 0; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 50%; margin-right: 0; justify-content: center; }
.lojista-on .campo-busca:hover { border-color: var(--brand-vivo); }
.lojista-on .campo-busca span { display: none; }
@media (min-width: 1024px) and (max-width: 1119px) { .lojista-on .cat-link { --px: 2px; letter-spacing: .01em; } .lojista-on .cab-menu { margin-left: 10px; } }
@media (min-width: 1120px) and (max-width: 1279px) { .lojista-on .cat-link { --px: 4px; letter-spacing: .04em; } }
@media (min-width: 1280px) and (max-width: 1365px) { .lojista-on .cat-link { --px: 8px; } }
@media (max-width: 419px) { .lojista-on .cab-linha .logotipo { display: none; } }
.card-txt { flex: 1; }
.card-preco { display: block; margin-top: auto; padding-top: 4px; min-height: 28px; line-height: 24px; font-size: 17px; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.card-preco.consulta { font-size: 15px; font-weight: 500; color: var(--cinza); }
.selo-est { align-self: flex-start; padding: 6px 10px; font-size: 13px; font-weight: 600; }
.selo-est.ok { background: #e6f1ec; color: #1f6737; }
.selo-est.sem { background: #fff4dc; color: #8a5a00; }
.preco-lojista { gap: 10px; }
.pl-rot { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); }
.pl-valor { font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--texto); font-variant-numeric: tabular-nums; line-height: 1.1; }
.pl-info { font-size: 14px; color: var(--cinza); }
.pl-form { display: flex; gap: 12px; align-items: flex-end; margin-top: 6px; }
.pl-form .btn { flex: 1; }
.pl-qtd { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--cinza); }
@media (max-width: 480px) { .pl-form { flex-direction: column; align-items: stretch; } .pl-qtd input { width: 100%; } }
.pl-qtd input, .cr-qtd input { width: 88px; height: 48px; padding: 0 12px; border: 1px solid #d4d4d4; font: inherit; font-size: 16px; text-align: center; background: #fff; }
.pl-qtd input:focus, .cr-qtd input:focus, .lj-form input:focus, .lj-form select:focus, .cr-obs textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.pl-erro, .entrar-in .pl-erro { margin: 0; font-size: 14px; color: #b3203a; }
[aria-invalid="true"] { border-color: #b3203a !important; }
.lj-form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.lj-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.lj-form input, .lj-form select { width: 100%; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid #d4d4d4; border-radius: 0; font: inherit; font-size: 16px; background: #fff; }
.lj-dupla { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: end; }
@media (max-width: 359px) { .lj-dupla { grid-template-columns: 96px minmax(0, 1fr); } }
.lj-dupla.uf { grid-template-columns: minmax(0, 1fr) 96px; }
.entrar-in .lj-etapa { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.entrar-in h1:focus { outline: none; }
#lojista-area h1 { margin-bottom: 8px; }
#lojista-area p b { overflow-wrap: anywhere; }
.pl-erro { scroll-margin: 76px 0 16px; }
.entrar-in .lj-dados { font-size: 14px; overflow-wrap: anywhere; }
.lj-form [aria-invalid="true"]:focus { outline-color: #b3203a; }
@media (max-width: 767px) { body:has(.lj-form :focus) .wa-flutua { display: none; } }  /* com o teclado aberto, o botão flutuante cobriria o campo */
@media (min-width: 1024px) { .entrar-form { align-items: flex-start; padding-top: 56px; } .entrar-lado { justify-content: flex-start; padding-top: 56px; } }  /* topo fixo: título e painel verde não mudam de lugar ao trocar de etapa */
.lj-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 10px; }
@media (max-width: 480px) { .lj-acoes { flex-direction: column; } .lj-acoes .btn { width: 100%; } }
/* lojista logado: sem o painel de "como se cadastrar", a conta ocupa a área toda. Vale desde antes da primeira pintura (a classe
   lojista-on vem do cookie, no <head>), então a tela de entrar não aparece por um instante atrás da conta. A altura mínima segura
   o rodapé no lugar enquanto a conta chega. */
.lojista-on .entrar-lado { display: none; }
.lojista-on .entrar { min-height: 60vh; }
@media (min-width: 1024px) { .lojista-on .entrar { grid-template-columns: minmax(0, 1fr); min-height: 72vh; } }
.lj-pedidos { width: 100%; border-collapse: collapse; font-size: 14px; }
.lj-pedidos th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); padding: 10px 8px; border-bottom: 1px solid var(--linha); }
.lj-pedidos td { padding: 12px 8px; border-bottom: 1px solid var(--linha); font-variant-numeric: tabular-nums; }
.lj-pedidos .r { text-align: right; }
.lj-vazio { color: var(--cinza); }
.lj-sair { background: none; border: 0; padding: 0 12px 0 0; min-width: 44px; cursor: pointer; font: inherit; }
.carrinho { min-height: 55vh; padding-bottom: 96px; }  /* respiro p/ o WhatsApp flutuante não cobrir o "Enviar pedido" */
.carrinho h1 { font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 20px; }
.carrinho > p { color: var(--cinza); margin-bottom: 20px; }
.cr-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 1024px) { .cr-grade { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } }
.cr-itens { border-top: 1px solid var(--linha); }
.cr-item { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; grid-template-areas: "foto nome nome" "foto qtd sub" "foto tirar tirar" "erro erro erro"; gap: 6px 16px; padding: 16px 0; border-bottom: 1px solid var(--linha); align-items: center; }
@media (min-width: 640px) { .cr-item { grid-template-columns: 88px minmax(0, 1fr) 100px 120px 56px; grid-template-areas: "foto nome qtd sub tirar" "foto erro erro erro erro"; } }
.cr-item-erro { grid-area: erro; }
.cr-aviso { font-size: 13px; color: #8a5a00; }
.cr-foto { grid-area: foto; width: 88px; height: 88px; border: 1px solid var(--linha); background: #fff; padding: 6px; }
.cr-foto img { width: 100%; height: 100%; object-fit: contain; }
.cr-nome { grid-area: nome; display: flex; flex-direction: column; gap: 4px; }
.cr-nome a { font-weight: 600; }
.cr-nome a:hover { color: var(--brand); }
.cr-nome span { font-size: 14px; color: var(--cinza); }
.cr-qtd { grid-area: qtd; }
.cr-qtd input { width: 80px; height: 44px; }
.cr-sub { grid-area: sub; text-align: right; font-variant-numeric: tabular-nums; }
.cr-link { min-height: 44px; min-width: 44px; background: none; border: 0; padding: 0 4px; font: inherit; font-size: 14px; color: #b3203a; cursor: pointer; }
.cr-link:hover { text-decoration: underline; }
.cr-tirar { grid-area: tirar; justify-self: end; }
.cr-resumo { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--fundo-2); }
@media (min-width: 1024px) { .cr-resumo { position: sticky; top: calc(var(--cab) + 20px); } }
.cr-resumo h2 { font-size: 18px; font-weight: 600; }
.cr-totais { display: flex; flex-direction: column; gap: 12px; }
.cr-totais > div { display: flex; justify-content: space-between; font-size: 15px; font-variant-numeric: tabular-nums; }
.cr-total { padding-top: 12px; border-top: 1px solid #dcdcdc; font-size: 18px !important; }
.cr-min { margin: 0; font-size: 14px; color: #8a5a00; }
.cr-obs { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.cr-obs textarea { padding: 10px 12px; border: 1px solid #d4d4d4; font: inherit; font-size: 15px; resize: vertical; background: #fff; }
.cr-enviar[disabled] { background: #d9d9d9; color: #4d4d4d; pointer-events: none; box-shadow: none; }
.cr-enviar[disabled]::after { display: none; }
.cr-confirmado { margin: 8px 0 18px; max-width: 760px; }
.cr-confirmado tfoot td { padding: 12px 8px; font-weight: 700; }
.cr-nota { margin: 0; font-size: 14px; color: var(--cinza); }
.cr-cupom { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.cr-cupom-form { display: flex; gap: 8px; align-items: flex-end; }
.cr-cupom-form label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.cr-cupom-form input { width: 100%; min-width: 0; height: 48px; padding: 0 12px; border: 1px solid #d4d4d4; font: inherit; font-size: 15px; background: #fff; text-transform: uppercase; }
.cr-cupom-form .btn { padding-inline: 18px; }

/* ── loja do lojista: compra pelo card, ordenar, vitrines, conta e finalização do pedido ── */
.card { display: flex; flex-direction: column; }
.card a { height: auto; flex: 1; }
.card-comprar { width: 100%; min-height: 44px; margin-top: 10px; padding-inline: 8px; }
.card-comprar::after { display: none; }
/* botão "Consultar" do visitante: quem já entrou (classe do cookie, antes de pintar) recebe o botão dele pelo lojista.js */
.lojista-on .card a.card-consultar { display: none; }
/* produto sem estoque com a venda travada: mesmo lugar e mesma altura do "Comprar", sem parecer clicável */
.card-fora { width: 100%; min-height: 44px; margin-top: 10px; padding-inline: 8px; background: var(--fundo-2); color: var(--cinza); cursor: default; }
.card-fora::before, .card-fora::after { display: none; }
.card a.card-ir { flex: none; flex-direction: row; display: inline-flex; width: 100%; min-height: 44px; margin-top: 10px; padding-inline: 8px; font-size: 13px; }
.card-preco small { display: block; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--cinza); }
.card-erro { margin-top: 6px; font-size: 13px; }
.cat-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 8px 0 16px; }
.cat-barra .cat-conta { margin: 0; }
.cat-ordem { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cinza); }
.cat-ordem select, .pl-qtd select { height: 44px; padding: 0 10px; border: 1px solid #d4d4d4; border-radius: 0; font: inherit; font-size: 16px; color: var(--texto); background: #fff; }
.pl-qtd select { width: 160px; height: 48px; }
@media (max-width: 480px) { .pl-qtd select { width: 100%; } }
/* seta dos campos de escolha (Willian 09/11: "seta sem espaçamento"): a mesma seta do menu (ICONE seta), com respiro à direita */
.cat-ordem select, .pl-qtd select, .lj-form select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 14px; }
.lj-cat-topo { display: flex; flex-direction: column; gap: 32px; margin: 8px 0 32px; }
.lj-banner { padding: 28px; background: var(--brand); color: #fff; }
.lj-banner h2 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.lj-banner p { margin-top: 6px; font-size: 15px; color: rgba(255, 255, 255, .85); }
.lj-vitrine-t { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.lj-vitrine-t h2 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.lj-vitrine-t a { display: flex; align-items: center; min-height: 44px; flex: none; font-size: 15px; font-weight: 500; color: var(--brand); }
/* ── /lojistas/: abas Entrar | Cadastrar loja, senha com "Mostrar", troca de tela animada, botão girando e passos no painel verde ── */
.lj-abas { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 10px; border-bottom: 1px solid #d4d4d4; }
.lj-abas a { display: flex; align-items: center; justify-content: center; min-height: 52px; font-size: 13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cinza-claro); transition: color .25s ease; }
.lj-abas a:hover { color: var(--brand); }
.lj-abas a[aria-current] { color: var(--texto); }
/* a mesma linha verde do menu do cabeçalho, deslizando de uma aba para a outra */
.lj-abas::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 50%; height: 2px; background: var(--brand); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.lj-abas[data-on="cadastro"]::after { transform: translateX(100%); }
.lj-campo { display: flex; flex-direction: column; gap: 6px; }
.lj-rot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 500; }
.lj-esqueci { display: inline-flex; align-items: center; min-height: 32px; margin: -6px 0; font-size: 14px; font-weight: 500; color: var(--brand);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.lj-esqueci:hover { text-decoration-color: currentColor; }
.lj-senha { position: relative; }
.lj-form .lj-senha input { padding-right: 96px; }
.lj-ver { position: absolute; top: 1px; right: 1px; bottom: 1px; min-width: 84px; padding: 0 14px; background: #fff; font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand); transition: color .2s; }
.lj-ver:hover { color: var(--texto); }
.entrar-in .lj-dica { margin: -6px 0 0; font-size: 13px; line-height: 1.5; color: var(--cinza); }
.entrar-in .lj-dados { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: var(--cinza); }
.lj-criado { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--brand); }
@media (max-width: 379px) { .lj-abas a { font-size: 12px; letter-spacing: .05em; } }
/* abas: as duas telas ocupam a mesma altura, o rodapé não sobe e desce ao trocar */
@media (min-width: 1024px) { .lj-abas:not([hidden]) + #lojista-area { min-height: 500px; } }
/* dados da loja no computador: duas colunas; erro, endereço, cidade/estado e botão ocupam a largura toda */
@media (min-width: 1024px) {
  .entrar-in:has(.lj-grade) { max-width: 560px; }
  .lj-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; align-items: end; }
  .lj-grade > .pl-erro, .lj-grade > .lj-largo, .lj-grade > button { grid-column: 1 / -1; }
  .lj-grade > .lj-dupla { display: contents; }  /* número, complemento, bairro, cidade e estado viram células da grade de 2 colunas */
}
/* painel verde: o título muda com o passo; no passo 3 o texto final repete a tela da esquerda e sai */
.entrar-lado h2.troca { animation: lj-entra .42s cubic-bezier(.2, .7, .2, 1) both; }
.entrar[data-passo="3"] .entrar-fim { display: none; }
.lj-ok { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 50%; background: var(--brand); color: #fff;
  animation: lj-pop .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.lj-ok svg { width: 26px; height: 26px; stroke-width: 2.2; }
@keyframes lj-pop { from { opacity: 0; transform: scale(.4); } }
/* troca de tela: cada bloco sobe 10 px e aparece, um logo depois do outro */
#lojista-area.entra > *, #carrinho-app.entra > *, #politica-app.entra > * { animation: lj-entra .42s cubic-bezier(.2, .7, .2, 1) both; }
#lojista-area.entra > :nth-child(2), #carrinho-app.entra > :nth-child(2) { animation-delay: .04s; }
#lojista-area.entra > :nth-child(3), #carrinho-app.entra > :nth-child(3) { animation-delay: .08s; }
#lojista-area.entra > :nth-child(n+4), #carrinho-app.entra > :nth-child(n+4) { animation-delay: .12s; }
@keyframes lj-entra { from { opacity: 0; transform: translateY(10px); } }
/* enquanto o servidor responde, a seta do botão vira um círculo girando */
.btn-verde.carregando { pointer-events: none; }
.btn-verde.carregando::before { transform: scaleX(1); }
.btn-verde.carregando::after { -webkit-mask: none; mask: none; background: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  opacity: 1; transform: none; animation: lj-gira .7s linear infinite; }
@keyframes lj-gira { to { transform: rotate(360deg); } }
/* painel verde: o passo atual acende, os feitos ganham o visto, os seguintes ficam apagados */
.entrar-lado li { transition: opacity .35s ease; }
.entrar-lado li span { transition: box-shadow .35s ease, background .35s ease, color .35s ease; }
.entrar.com-passo .entrar-lado li { opacity: .55; }
.entrar.com-passo .entrar-lado li.atual, .entrar.com-passo .entrar-lado li.feito { opacity: 1; }
.entrar-lado li.atual { font-weight: 600; }
.entrar-lado li.atual span { box-shadow: 0 0 0 5px rgba(255, 255, 255, .22); }
.entrar-lado li.feito span { position: relative; color: transparent; background: var(--brand-vivo); animation: lj-pop .45s cubic-bezier(.3, 1.5, .5, 1) both; }
.entrar-lado li.feito span::after { content: ""; position: absolute; inset: 6px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.entrar-fim { max-width: 420px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .22); font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
@media (prefers-reduced-motion: reduce) {
  #lojista-area.entra > *, #carrinho-app.entra > *, #politica-app.entra > *, .busca-res li.novo, .vazio:not([hidden]), .sacola-n.pop, .lj-ok, .entrar-lado li.feito span, .entrar-lado h2.troca { animation: none; }
  .lj-abas::after, .entrar-lado li, .entrar-lado li span { transition: none; }
  .btn-verde.carregando::after { animation-duration: 1.6s; }
}
.entrar-in .lj-nota { margin: 6px 0 0; font-size: 14px; color: var(--cinza); }
.lj-conta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 24px; }
@media (min-width: 1024px) { .lj-conta { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
@media (min-width: 1024px) { .lojista-on .entrar-in { max-width: 1080px; } }
.lj-conta-p { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.lj-conta h2 { margin-bottom: 8px; font-size: 18px; font-weight: 600; }
.lj-conta-s { padding: 20px; background: #fff; border: 1px solid var(--linha); min-width: 0; }
.lj-kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.lj-kv span { color: var(--cinza); }
.lj-kv b { flex: none; max-width: 60%; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.lj-kv-col > div { flex-direction: column; gap: 2px; }
.lj-kv-col b { max-width: none; text-align: left; }
.lj-pedido-kv { margin-top: 16px; }
.lj-lk { padding: 0; background: none; border: 0; font: inherit; font-weight: 600; color: var(--brand); text-decoration: underline; cursor: pointer; }
.lj-volta { justify-content: flex-start; }
.politica { max-width: 760px; min-height: 45vh; }
.politica h1 { margin-bottom: 16px; font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.lj-texto { font-size: 16px; line-height: 1.7; white-space: pre-wrap; color: var(--texto); }
.cr-etapas { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.cr-etapas h2 { margin-bottom: 12px; font-size: 20px; font-weight: 600; }
.cr-etapas h3 { margin: 20px 0 8px; font-size: 15px; font-weight: 600; }
.cr-ops { display: flex; flex-direction: column; gap: 8px; }
.cr-op { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 14px 16px; background: #fff; border: 1px solid var(--linha); font-size: 15px; cursor: pointer; }
.cr-op input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); }
.cr-op span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-op b { font-weight: 600; }
.cr-op small { font-size: 13px; line-height: 1.4; color: var(--cinza); }
.cr-op:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cr-op:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.cr-op.off { opacity: .6; cursor: not-allowed; }
.cr-frete { font-size: 14px !important; color: var(--cinza); }
.cr-extras { margin-top: 0; }
.cr-extras > div { display: flex; flex-direction: column; gap: 6px; }
.cr-extras input[type=checkbox] { width: 18px; height: 18px; }
.card-comprar { font-size: 13px; }
.lj-banner .lj-acoes { margin: 16px 0 0; }
.lj-nota { margin-top: 6px; }
.lj-nota .btn, .lj-via-nota .btn { margin-top: 8px; }
.lj-pagar b { display: flex; align-items: center; gap: 12px; color: #8a5a00; }
.lj-pagar span { font-weight: 600; color: #8a5a00; }
.lj-via { min-height: 44px; padding-inline: 16px; }
.lj-via-nota { padding: 12px 0; border-bottom: 1px solid var(--linha); font-size: 14px; color: var(--cinza); }
a.lj-lk { display: inline-block; padding: 12px 8px; margin: -12px -8px; }
.cr-ops.erro .cr-op { border-color: #b3203a; }
.cr-grupo-erro { margin: 8px 0 0; font-size: 14px; }
.cr-confirmado.lj-kv { margin-bottom: 8px; }
@media (min-width: 768px) { .cr-fechar { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .cr-fechar .cr-resumo { position: sticky; top: calc(var(--cab) + 20px); } }
@media (min-width: 640px) and (max-width: 1023px) { .lj-vitrine .card:nth-child(4) { display: none; } }
@media (max-width: 379px) { .cr-cupom-form { flex-direction: column; align-items: stretch; } }
.cr-cupom-form .btn { flex: none; }
/* celular do lojista: o botão flutuante cobria "Comprar" e os totais; o WhatsApp segue na página do produto e no rodapé */
/* o botão flutuante cobria os botões de compra e de cadastro: nessas telas o contato já está na própria página e no rodapé */
.lojista-on .wa-flutua, body:has(.pdp-info) .wa-flutua { display: none; }
/* tabelas do lojista em cartões no celular: nada de valor cortado */
@media (max-width: 480px) {
  .lj-tb, .lj-tb tbody, .lj-tb-itens, .lj-tb-itens tbody, .lj-tb-itens tfoot { display: block; }
  .lj-tb thead, .lj-tb-itens thead, .lj-tb-itens td:empty { display: none; }
  .lj-tb tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
  .lj-tb td { padding: 0; border: 0; }
  .lj-tb td:nth-child(even) { text-align: right; }
  .lj-tb td:last-child { font-weight: 600; }
  .lj-tb-itens tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
  .lj-tb-itens td, .cr-confirmado tfoot td { padding: 0; border: 0; }
  .lj-tb-itens tbody td:first-child { width: 100%; font-weight: 600; }
  .lj-tb-itens td[data-l]::before { content: attr(data-l) " "; font-size: 13px; color: var(--cinza); }
}

/* Enquanto o servidor responde: quem já entrou não vê os convites de cadastro nem o preço trocando; área e carrinho esperam */
.lj-espera #lojista-area, .lj-espera #carrinho-app, .lj-espera #politica-app,
.lojista-on.lj-espera .aviso-topo .wrap span, .lojista-on.lj-espera .gaveta-wa, .lojista-on.lj-espera .rod-cta, .lojista-on.lj-espera .preco-breve { visibility: hidden; }
/* Lojista logado, primeira página da aba (ainda sem nada na memória, ver lojista.js): só a grade de produtos espera o servidor
   e aparece de uma vez, já com preço e na ordem certa, em vez de pintar a vitrine e trocar em seguida. O resto da página (foto
   do topo da garantia, textos, banner) pinta na hora: esconder o conteúdo inteiro atrasava a foto em 2 s no 4G lento. */
.lojista-on.lj-espera .grade { opacity: 0; }
.lj-surge .grade, .lj-surge .lj-cat-topo { animation: aparece .25s ease both; }

/* Nada aparece seco (Willian 09/11: "eu quero que ele apareça com efeito também"): a busca do cabeçalho desce ao abrir e cada
   resultado novo sobe de leve; no catálogo os cards deslizam e entram (site.js, comEfeito); o aviso de "nada encontrado" sobe;
   o selo do carrinho pula quando a quantidade muda; a linha tirada do carrinho some antes de a lista se refazer. */
.busca-res li.novo { animation: sobe-in .32s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 30ms); }
.vazio:not([hidden]) { animation: sobe-in .36s cubic-bezier(.2, .7, .2, 1) both; }
.sacola-n.pop { animation: lj-pop .36s cubic-bezier(.3, 1.5, .5, 1) both; }
.cr-item { transition: opacity .2s ease, transform .2s ease; }
.cr-item.saindo { opacity: 0; transform: translateX(12px); }

/* Troca de página: a nova entra num esmaecer curto e o cabeçalho fica parado, em vez do corte seco (Willian 09/11: "dá umas
   piscadas fortes"). Chrome, Edge e Safari recentes; nos outros navegadores a troca continua como era. */
@view-transition { navigation: auto; }
.cab { view-transition-name: cabecalho; }
.aviso-topo { view-transition-name: aviso-topo; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } .lj-surge .grade, .lj-surge .lj-cat-topo { animation: none; } }

/* Site sem WhatsApp (WHATSAPP vazio no build): os links e botões de WhatsApp saem da tela, inclusive os que o lojista.js cria. */
/* li:not(.card): no card do catálogo o botão "Consultar" é filho direto do <li>, e a regra escondia o produto inteiro do lojista */
a[href*="#sem-whatsapp"], li:not(.card):has(> a[href*="#sem-whatsapp"]) { display: none !important; }