/* ===========================================================================
   JC Sistemas e Informática
   Azul da marca extraído do logo: #009CDF.

   Sobre os DOIS azuis: o #009CDF puro tem contraste 3,08:1 com o branco, o que
   reprova em texto normal pelo WCAG AA. Ele fica só em elemento gráfico grande
   (traço de ícone, malha do hero, borda). Onde há TEXTO branco em cima, entra o
   --azul-forte (4,81:1). Trocar um pelo outro deixa o botão bonito na tela do
   escritório e ilegível no celular no sol.
   =========================================================================== */

:root{
  --azul:#009CDF;
  --azul-forte:#0079B0;
  --azul-escuro:#00405e;
  --azul-claro:#5DCBF5;
  --azul-fundo:#f0f8fd;
  --tinta:#0f2231;
  --tinta-2:#566a78;
  --linha:#dbe4ea;
  --fundo-2:#f6fafc;
  --verde:#0e7a3c;
  --verde-esc:#0a6231;
  --ambar-fundo:#fff8e6;
  --ambar-linha:#e8d9a8;
  --ambar-txt:#77590c;
  --raio:6px;
  --topo-h:64px;

  /* Recortes da tela do aparelho (notch em cima, barra de gestos embaixo).
     Passam por variável, e não direto no env(), por dois motivos: dá para
     testar simulando um iPhone sem ter o aparelho, e o valor cai para 0px
     sozinho em quem não tem recorte nenhum. Depende do viewport-fit=cover
     que está na meta viewport do index.html. */
  --sa-topo:env(safe-area-inset-top, 0px);
  --sa-base:env(safe-area-inset-bottom, 0px);
  --sa-esq:env(safe-area-inset-left, 0px);
  --sa-dir:env(safe-area-inset-right, 0px);

  /* Altura real da área visível. O JS atualiza pelo visualViewport quando o
     teclado do celular abre: sem isso, no iPhone o teclado cobre o botão de
     enviar e o cliente acha que o site travou. 100dvh é o valor de partida
     para quem chega antes do JS rodar. */
  --altura-util:100dvh;
}

*,*::before,*::after{box-sizing:border-box}

/* O atributo hidden PERDE para qualquer display escrito no CSS. Sem este
   !important, .modal{display:grid} e .drawer{display:flex} continuam pintados
   mesmo com hidden, e o modal de privacidade cobre a tela inteira comendo todo
   clique do cliente. O jsdom não pega isso, porque não aplica CSS: só apareceu
   no Chrome de verdade. */
[hidden]{display:none !important}

html{
  /* Rede de segurança, não a trava principal: medimos que o drawer estacionado
     fora da tela NÃO cria rolagem lateral sozinho, porque é position:fixed.
     clip e não hidden porque hidden aqui transformaria o body em container de
     rolagem e comeria o position:sticky do cabeçalho. Navegador que não conhece
     clip simplesmente ignora, e nada muda. */
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  overflow-x:clip;
  background:#fff;
  color:var(--tinta);
  font-family:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{margin:0;line-height:1.2;letter-spacing:-.015em;font-weight:600}
p{margin:0}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--azul-forte)}

:focus-visible{outline:2px solid var(--azul-forte);outline-offset:2px;border-radius:3px}

/* O cabeçalho é sticky e ocupa 64px. Sem esta margem, qualquer rolagem até um
   alvo (atalho de categoria, o link "ir para os produtos", o campo que sobe
   quando o teclado abre) para com o alvo ESCONDIDO atrás dele. Medido: o
   elemento ficava em top:0 e quem recebia o clique era o próprio cabeçalho. */
*{scroll-margin-top:calc(var(--topo-h) + 14px)}
/* dentro do pedido e da política a conta é outra: eles rolam por dentro, e o
   cabeçalho da página não está por cima de nada ali */
.drawer *,.modal *{scroll-margin-top:12px}

.caixa{max-width:1180px;margin:0 auto;padding:0 22px}

/* marcador de 3 quadradinhos, o mesmo motivo que existe sobre o j do logo */
.pix{display:inline-flex;gap:2px;margin-right:9px;vertical-align:middle}
.pix i{width:5px;height:5px;background:var(--azul);border-radius:1px}
.pix i:nth-child(2){background:var(--azul-claro)}
.pix i:nth-child(3){background:var(--azul-claro);opacity:.55}

.pula{
  position:absolute;left:-999px;top:8px;z-index:100;
  background:var(--azul-forte);color:#fff;padding:10px 16px;border-radius:var(--raio);
  text-decoration:none;font-weight:600;
}
.pula:focus{left:12px}

/* --------------------------------------------------------------- cabeçalho */
.topo{
  position:sticky;top:0;z-index:40;
  background:#fff;border-bottom:1px solid var(--linha);
  /* no iPhone deitado o notch invade a lateral e comeria o logo */
  padding-left:var(--sa-esq);padding-right:var(--sa-dir);
  transition:box-shadow .2s;
}
/* sombra só depois que a página sai do topo: parado, o cabeçalho fica rente à
   página; rolando, ele descola e fica claro que está flutuando por cima */
.topo.rolou{box-shadow:0 2px 14px rgba(4,19,32,.13)}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:14px;height:var(--topo-h)}
/* min-height de 44px e não a altura do desenho: o logo é um link para o topo e
   o dedo precisa de alvo, mesmo que a arte tenha só 30px de altura */
.marca{display:flex;align-items:center;flex:0 1 auto;min-width:0;min-height:44px}
.marca img{width:auto;height:30px}

.topo-acoes{display:flex;align-items:center;gap:8px;flex:0 0 auto}

.fone{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px;border:1px solid var(--linha);border-radius:var(--raio);
  color:var(--tinta);text-decoration:none;font-weight:600;font-size:14.5px;
  white-space:nowrap;
}
.fone:hover{border-color:var(--azul);color:var(--azul-forte)}
.fone svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}

/* O símbolo do WhatsApp é sólido, não de traço. Sem isto ele some nos lugares
   onde a regra do bloco manda desenhar com stroke. */
.ico-zap{fill:currentColor;stroke:none}

.cart-btn{
  position:relative;display:inline-grid;place-items:center;
  width:44px;height:42px;background:var(--azul-forte);border:0;border-radius:var(--raio);color:#fff;
}
.cart-btn:hover{background:#00648f}
.cart-btn svg{width:23px;height:23px;fill:currentColor;stroke:currentColor}
.cart-num{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  display:grid;place-items:center;border-radius:10px;
  background:var(--tinta);color:#fff;font-size:12px;font-weight:700;line-height:1;
}
.cart-num.pulo{animation:pulo .28s ease}
@keyframes pulo{50%{transform:scale(1.32)}}

/* ------------------------------------------------------------------- tarja */
.tarja{
  background:var(--ambar-fundo);border-bottom:1px solid var(--ambar-linha);
  color:var(--ambar-txt);font-size:14px;text-align:center;padding:9px 22px;
}
.tarja b{font-weight:600}

/* -------------------------------------------------------------------- hero */
/* ---- TOPO ESCURO ----
   A página inteira era branca, e branco de ponta a ponta não tem momento
   nenhum. Aqui o topo é escuro e o catálogo continua claro logo abaixo: o corte
   entre os dois é o que dá impacto, e o rodapé escuro fecha a composição.
   As duas luzes são radiais e discretas, na cor da marca. Nada de roxo, nada de
   néon: isso é assinatura de template, não de loja de informática.

   overflow:hidden e não clip: a placa sai da borda direita de propósito, e é
   este overflow que impede a rolagem lateral. clip só existe do Safari 16 em
   diante, ou seja, iPhone com iOS 15 ficaria com o site rolando de lado. */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(ellipse 52% 62% at 74% 44%, rgba(0,156,223,.30), transparent 64%),
    radial-gradient(ellipse 80% 55% at 8% 6%, rgba(0,156,223,.12), transparent 62%),
    linear-gradient(178deg, #07202f 0%, #041320 100%);
}
/* Filete de luz fechando o bloco escuro, como a trilha na borda de uma placa.
   Com 2px sem brilho ele sumia na tela: o que faz a linha existir é o halo do
   box-shadow, não a espessura. */
.hero-linha{
  position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(0,156,223,.9) 18%,#8fe0ff 50%,rgba(0,156,223,.9) 82%,transparent);
  box-shadow:0 0 18px rgba(93,203,245,.75),0 0 42px rgba(0,156,223,.45);
}
/* malha milimetrada cobrindo o bloco todo, bem apagada: dá textura de papel
   quadriculado de projeto sem disputar com a placa */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(143,224,255,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(143,224,255,.5) 1px,transparent 1px);
  background-size:28px 28px;opacity:.09;
}
.hero-in{
  position:relative;z-index:1;padding:76px 22px 72px;
  display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:44px;align-items:center;
}
.hero-txt{min-width:0}

/* ---- placa de circuito ----
   Sobre o fundo escuro ela pode brilhar sem virar poluição: a trilha fica
   apagada e o pulso é que carrega a luz. */
.placa{width:100%;height:auto;max-width:420px;justify-self:end;overflow:visible}
.placa-trilha{fill:none;stroke:#2c7fa8;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.placa-via{fill:none;stroke:var(--azul);stroke-width:1.6;opacity:.7}
.placa-comp{fill:none;stroke:#3f9ac4;stroke-width:1.5;opacity:.75}

.placa-chip{fill:none;stroke:var(--azul-claro);stroke-width:1.7;stroke-linecap:round}
.placa-chip rect:first-child{fill:rgba(0,156,223,.14)}
.placa-chip rect:nth-child(2){fill:rgba(93,203,245,.10)}
.placa-chip circle{fill:var(--azul-claro);stroke:none}

/* O brilho vem do drop-shadow e não de blur num elemento por baixo: assim
   acompanha o traço em vez de virar uma mancha atrás do desenho. */
@supports (filter: drop-shadow(0 0 1px #000)){
  .placa-chip{filter:drop-shadow(0 0 7px rgba(0,156,223,.55))}
  .placa-pulso{filter:drop-shadow(0 0 5px rgba(93,203,245,.85))}
}

.placa-pulso{fill:none;stroke:#8fe0ff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* A marca dentro do chip. Traço mais grosso e mais claro que o circuito ao
   redor: é o assunto ali dentro, não mais um detalhe do desenho. */
.placa-marca{fill:none;stroke:#bdefff;stroke-width:4.6;stroke-linecap:round;stroke-linejoin:round}
.placa-marca rect{fill:#bdefff;stroke:none}
@supports (filter: drop-shadow(0 0 1px #000)){
  .placa-marca{filter:drop-shadow(0 0 8px rgba(143,224,255,.9))}
}

/* ---- dentro do processador ---- */
.placa-barramento{fill:none;stroke:#2c7fa8;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.placa-barramento-pulso{fill:none;stroke:#c9f2ff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.placa-anel{fill:none;stroke:#c9f2ff;stroke-width:3;stroke-linecap:round}

@supports (filter: drop-shadow(0 0 1px #000)){
  .placa-anel{filter:drop-shadow(0 0 9px rgba(143,224,255,1))}
  .placa-barramento-pulso{filter:drop-shadow(0 0 7px rgba(143,224,255,1))}
}

/* ---- O CIRCUITO CORRE SEMPRE ----
   Fora de qualquer @media de propósito. Antes as animações só existiam com
   prefers-reduced-motion: no-preference, e como o Windows do dono está com
   "reduzir movimento" ligado, a placa ficava parada para ele.
   Decisão dele: passar o tempo todo. O respeito à preferência não some, muda de
   forma: quem pede menos movimento recebe a MESMA luz, correndo bem mais
   devagar (o bloco de reduce, mais abaixo). Isso porque o que incomoda de
   verdade quem tem a preferência ligada é movimento amplo, paralaxe e piscada,
   não um risco fino atravessando um desenho no canto. */

/* Perímetro do núcleo: ~251. Dois traços de 30 em lados opostos, com os vãos
   completando a conta (30+96+30+95 = 251). Um risco sozinho passava rápido e
   sumia por 4 segundos; com dois em lados opostos sempre tem luz girando. */
.placa-anel rect{
  stroke-dasharray:30 96 30 95;
  animation:anel 4.4s linear infinite;
}
.placa-barramento-pulso path{
  stroke-dasharray:14 60;stroke-dashoffset:74;
  animation:barramento 3.8s ease-in-out infinite;
  opacity:0;
}
.placa-barramento-pulso path:nth-child(1){animation-delay:.6s}
.placa-barramento-pulso path:nth-child(2){animation-delay:1.7s}
.placa-barramento-pulso path:nth-child(3){animation-delay:2.6s}
.placa-barramento-pulso path:nth-child(4){animation-delay:3.2s}
.hero.parado .placa-anel rect,
.hero.parado .placa-barramento-pulso path{animation-play-state:paused}

@keyframes anel{to{stroke-dashoffset:-251}}
@keyframes barramento{
  0%{stroke-dashoffset:74;opacity:0}
  10%{opacity:1}
  55%{stroke-dashoffset:0;opacity:1}
  70%{opacity:0}
  100%{stroke-dashoffset:0;opacity:0}
}

/* entrada: a trilha se desenha uma vez, do começo ao fim */
.placa-trilha path{
  stroke-dasharray:340;stroke-dashoffset:340;
  animation:trilha 1.1s ease-out .2s forwards;
}
.placa-trilha path:nth-child(even){animation-delay:.38s}

/* O risco de luz: um traço de 30 unidades num vão de 700, correndo pela trilha.
   O tempo é longo de propósito. Rápido demais parece letreiro de loja. */
.placa-pulso path{
  stroke-dasharray:30 700;stroke-dashoffset:730;
  animation:pulso 4.6s cubic-bezier(.5,0,.5,1) infinite;
  opacity:0;
}
.placa-pulso path:nth-child(1){animation-delay:1.3s}
.placa-pulso path:nth-child(2){animation-delay:2.1s}
.placa-pulso path:nth-child(3){animation-delay:1.7s}
.placa-pulso path:nth-child(4){animation-delay:2.9s}
.placa-pulso path:nth-child(5){animation-delay:3.4s}
.placa-pulso path:nth-child(6){animation-delay:2.5s}
.placa-pulso path:nth-child(7){animation-delay:3.9s}

/* Rolou para o catálogo: a animação PARA. Ela desenha com filtro a cada quadro,
   e continuar girando fora da tela é gastar bateria do cliente à toa, ainda por
   cima enquanto ele escolhe produto. O JS liga e desliga esta classe. */
.hero.parado .placa-pulso path,
.hero.parado .placa-trilha path{animation-play-state:paused}

@keyframes trilha{to{stroke-dashoffset:0}}
@keyframes pulso{
  0%{stroke-dashoffset:730;opacity:0}
  6%{opacity:1}
  70%{opacity:1}
  86%{stroke-dashoffset:0;opacity:0}
  100%{stroke-dashoffset:0;opacity:0}
}
.olho{
  display:flex;align-items:center;
  font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--azul-claro);
  margin-bottom:16px;
}
.olho .pix i{background:var(--azul-claro)}
.olho .pix i:nth-child(2){background:#8fe0ff}
.olho .pix i:nth-child(3){background:#8fe0ff;opacity:.5}

/* 46px e não 44: no escuro a letra parece mais fina, então ela ganha um pouco
   de corpo para manter o mesmo peso visual que tinha no branco. */
.hero h1{font-size:clamp(30px,4.6vw,50px);font-weight:700;color:#fff;letter-spacing:-.025em;line-height:1.1}
.hero h1 span{display:inline-block}
.lead{margin-top:16px;font-size:clamp(16px,1.5vw,18px);color:#a8c9dc;max-width:56ch}

.busca-hero{position:relative;margin-top:28px;max-width:480px}
.busca-hero .lupa{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:var(--azul-claro);pointer-events:none;z-index:1;
}
/* vidro sobre o fundo escuro. O importante é o campo continuar parecendo campo:
   fundo mais claro que a página, borda visível e cursor de texto. */
.busca-hero input{
  width:100%;height:52px;padding:0 16px 0 44px;
  border:1px solid rgba(143,224,255,.28);border-radius:var(--raio);
  background:rgba(255,255,255,.07);
  font:inherit;font-size:16px;color:#fff;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.busca-hero input:hover{border-color:rgba(143,224,255,.5)}
.busca-hero input:focus{
  border-color:var(--azul-claro);outline:0;background:rgba(255,255,255,.11);
  box-shadow:0 0 0 3px rgba(0,156,223,.28);
}
.busca-hero input::placeholder{color:#7fa2b8}
/* o X do campo de busca nasce preto e some no escuro */
.busca-hero input::-webkit-search-cancel-button{filter:invert(1) opacity(.55)}

/* ---------------------------------------------------------------- atalhos */
.atalhos{position:relative;border-bottom:1px solid var(--linha);background:var(--fundo-2);padding:18px 0}
/* Esfumaçado na borda direita. A barra de rolagem está escondida, então sem
   esta pista ninguém descobre que existe categoria depois da última visível. */
.atalhos::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:44px;pointer-events:none;
  background:linear-gradient(90deg,rgba(246,250,252,0),var(--fundo-2));
}
.atalhos-lista{
  /* 196px não é número redondo por acaso: é o que faz caber "Impressoras e
     Suprimentos" nas duas linhas sem cortar. Categoria de loja de informática
     costuma ter nome comprido. */
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(196px,1fr);gap:10px;
  overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
}
.atalhos-lista::-webkit-scrollbar{display:none}
.atalho{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:11px;align-items:center;
  padding:11px 14px;border:1px solid var(--linha);border-radius:var(--raio);
  background:#fff;text-align:left;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.atalho:hover{border-color:var(--azul);transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,64,94,.08)}
.atalho-ico{
  grid-row:1 / 3;display:grid;place-items:center;width:38px;height:38px;
  border-radius:var(--raio);background:var(--azul-fundo);color:var(--azul-forte);
}
.atalho-ico .ico{width:21px;height:21px}
/* duas linhas em vez de cortar: "Impressoras e Suprimentos" virava
   "Impress..." e o cliente não sabia o que tinha ali dentro */
.atalho-nome{
  grid-column:2;min-width:0;font-size:13.5px;font-weight:600;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.atalho-n{grid-column:2;font-size:12px;color:var(--tinta-2);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- catálogo */
.catalogo{padding:44px 0 60px}
.cat-topo{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cat-topo h2{display:flex;align-items:center;font-size:22px}
.conta{font-size:14px;color:var(--tinta-2);font-variant-numeric:tabular-nums}

/* rola na horizontal, mas sem a barra cinza aparecendo por cima do conteúdo.
   Continua funcionando com dedo, roda do mouse e teclado. */
.chips{display:flex;gap:8px;margin:20px 0 24px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  flex:0 0 auto;padding:8px 15px 8px 12px;border:1px solid var(--linha);border-radius:100px;
  background:#fff;color:var(--tinta-2);font-size:14px;font-weight:500;white-space:nowrap;
}
.chip .ico{width:16px;height:16px;flex:0 0 auto;opacity:.85}
.chip:hover{border-color:var(--azul);color:var(--azul-forte)}
.chip.on{background:var(--azul-forte);border-color:var(--azul-forte);color:#fff}
.chip.on .ico{opacity:1}

.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:16px}

.card{
  display:flex;flex-direction:column;min-width:0;position:relative;
  border:1px solid var(--linha);border-radius:var(--raio);background:#fff;
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
/* subida de 2px e sombra rasa. Card que flutua muito, com sombra larga e canto
   bem redondo, é a assinatura visual de template pronto. */
.card:hover{border-color:var(--azul);box-shadow:0 4px 14px rgba(0,64,94,.09);transform:translateY(-2px)}
.card-foto{
  position:relative;aspect-ratio:1/1;--pf:16px;overflow:hidden;
  background:var(--fundo-2);border-bottom:1px solid var(--linha);
  border-radius:var(--raio) var(--raio) 0 0;
}
/* A imagem sai do fluxo de propósito. Com ela dentro, uma foto de 600x600
   estica a caixa e o aspect-ratio é simplesmente ignorado: no celular o card
   virava um quadrado de 330px de altura em vez dos 204px pedidos.
   E contain, nunca cover: cover corta a embalagem e o cliente não reconhece o
   que está comprando. */
.card-foto img{
  position:absolute;inset:var(--pf);
  width:calc(100% - var(--pf) * 2);height:calc(100% - var(--pf) * 2);
  object-fit:contain;mix-blend-mode:multiply;
  transition:transform .22s ease;
}
/* aproximação de 4%: o suficiente para o card responder ao mouse, longe do
   zoom exagerado que faz a foto do produto parecer distorcida */
.card:hover .card-foto img,
.card:hover .card-vazio .ico-grande{transform:scale(1.04)}

/* produto sem foto: o desenho da categoria, sobre a malha milimetrada */
.card-vazio{
  position:absolute;inset:0;display:grid;place-items:center;color:var(--azul);
  background-image:
    linear-gradient(var(--azul-claro) 1px,transparent 1px),
    linear-gradient(90deg,var(--azul-claro) 1px,transparent 1px);
  background-size:18px 18px;
}
.card-vazio::before{
  content:"";position:absolute;inset:0;background:var(--fundo-2);opacity:.82;
}
.card-vazio .ico-grande{position:relative;width:64px;height:64px;opacity:.55;stroke-width:1.15;transition:transform .22s ease}

/* selo da categoria, canto de baixo da foto */
.card-tag{
  position:absolute;left:10px;bottom:10px;z-index:1;max-width:calc(100% - 20px);
  padding:3px 9px;border-radius:100px;border:1px solid var(--linha);
  background:rgba(255,255,255,.94);color:var(--tinta-2);
  font-size:11px;font-weight:600;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card-corpo{display:flex;flex-direction:column;gap:6px;padding:14px 14px 0;flex:1}
.card-cod{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;font-weight:500;
  letter-spacing:.04em;color:var(--tinta-2);
}
.card-nome{font-size:15px;font-weight:600;line-height:1.34}
.card-desc{font-size:13.5px;color:var(--tinta-2);line-height:1.42}
.card-preco{margin-top:auto;padding-top:12px}
.preco{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.preco .cif{font-size:14px;font-weight:600;margin-right:2px}
.preco.consulta{font-size:15px;font-weight:600;color:var(--tinta-2)}
.parcela{font-size:12.5px;color:var(--tinta-2);margin-top:1px}
.card-acao{padding:12px 14px 14px}

.btn-add{
  width:100%;height:42px;border:0;border-radius:var(--raio);
  background:var(--azul-forte);color:#fff;font-weight:600;font-size:15px;
}
.btn-add:hover{background:#00648f}

.stepper{display:flex;align-items:center;height:42px;border:1px solid var(--azul);border-radius:var(--raio);overflow:hidden}
.stepper button{
  width:42px;height:100%;flex:0 0 auto;border:0;background:var(--azul-fundo);
  color:var(--azul-forte);display:grid;place-items:center;
}
.stepper button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.stepper button:hover{background:#dcf0fb}
.stepper input{
  flex:1;min-width:0;width:100%;height:100%;border:0;text-align:center;
  font:inherit;font-size:16px;font-weight:600;color:var(--tinta);
  font-variant-numeric:tabular-nums;background:#fff;
}
.stepper input:focus{outline:0;background:var(--azul-fundo)}

.vazio{padding:36px 0;color:var(--tinta-2);text-align:center}

/* ------------------------------------------------------------------ pontos */
.pontos{background:var(--azul-fundo);border-top:1px solid var(--linha);padding:44px 0}
.pontos-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}
.ponto{min-width:0}
.ponto svg{width:26px;height:26px;color:var(--azul);margin-bottom:10px}
.ponto h3{font-size:16px;margin-bottom:5px}
.ponto p{font-size:14.5px;color:var(--tinta-2)}

/* ------------------------------------------------------------------ rodapé */
.rodape{
  position:relative;overflow:hidden;
  background:var(--azul-escuro);color:#cfe3ee;padding:44px 0 0;
}
/* trilha de placa esmaecida no fundo do rodapé: fecha o site com o mesmo
   assunto do topo, sem competir com a leitura */
.rodape::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:
    linear-gradient(var(--azul-claro) 1px,transparent 1px),
    linear-gradient(90deg,var(--azul-claro) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse at 15% 0,#000,transparent 62%);
  mask-image:radial-gradient(ellipse at 15% 0,#000,transparent 62%);
}
.rod-in,.rod-base{position:relative;z-index:1}
.rod-in{display:grid;grid-template-columns:1.25fr 1fr 1.25fr;gap:38px;padding-bottom:34px}
.rod-col{min-width:0}
.rod-logo{width:auto;height:30px;margin-bottom:16px}
.rod-col h4{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.rod-txt{font-size:14.5px;line-height:1.6;margin-bottom:6px}
/* padding vertical em vez de margin: o WhatsApp e o Instagram do rodapé são
   links de contato, e no celular tinham 22px de altura de alvo, metade do que o
   dedo acerta. O padding entra na área clicável, a margem não. */
.rod-link{
  display:flex;align-items:center;gap:9px;padding:9px 0;margin-bottom:2px;
  color:#fff;text-decoration:none;font-size:14.5px;font-weight:500;
}
.rod-link:hover{color:var(--azul-claro)}
.rod-link svg{width:18px;height:18px;flex:0 0 auto}
/* padding:9px 0 e não 0: o shorthand do .rod-link acima já dava o alvo de dedo,
   e zerar aqui devolvia o botão para 22px de altura */
.rod-btn{background:0;border:0;padding:9px 0;text-align:left;text-decoration:underline}
.rod-base{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding-top:16px;padding-bottom:20px;border-top:1px solid rgba(255,255,255,.16);
  font-size:13px;color:#9fc3d6;
}
.rod-base a{color:#9fc3d6;text-decoration:none;display:inline-flex;align-items:center;min-height:36px}
.rod-base a:hover{color:#fff}

/* ------------------------------------------------------- barra fixa mobile */
.barra-cart{
  /* a barra de gestos do iPhone fica POR CIMA do conteúdo: sem o safe-area
     embaixo, o dedo acerta o gesto do sistema em vez do botão */
  position:fixed;z-index:35;
  left:calc(12px + var(--sa-esq));right:calc(12px + var(--sa-dir));
  bottom:calc(12px + var(--sa-base));
  display:none;align-items:center;justify-content:space-between;gap:12px;
  height:52px;padding:0 16px;border:0;border-radius:var(--raio);
  background:var(--tinta);color:#fff;font-weight:600;font-size:15px;
  box-shadow:0 6px 22px rgba(15,34,49,.28);
}
.barra-ver{color:var(--azul-claro)}

/* ----------------------------------------------------------------- overlay */
.overlay{position:fixed;inset:0;z-index:45;background:rgba(15,34,49,.5);opacity:0;transition:opacity .2s}
.overlay.on{opacity:1}

/* ------------------------------------------------------------------ drawer */
.drawer{
  position:fixed;top:0;right:0;z-index:50;
  width:min(430px,100%);height:100%;height:var(--altura-util);
  display:flex;flex-direction:column;
  background:#fff;border-left:1px solid var(--linha);
  transform:translateX(100%);transition:transform .22s ease;
}
.drawer.on{transform:none}

.d-head{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:16px 18px;padding-top:calc(16px + var(--sa-topo));
  border-bottom:1px solid var(--linha);
}
.d-head h3{font-size:17px;flex:1;min-width:0}
.d-icone{
  width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid var(--linha);border-radius:var(--raio);background:#fff;
}
.d-icone svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.d-icone:hover{border-color:var(--azul);color:var(--azul-forte)}

/* min-height:0 é o que deixa a lista rolar dentro do flex. Sem isso o item
   cresce, empurra o rodapé para fora e a rolagem simplesmente não acontece. */
.d-itens{
  flex:1;min-height:0;overflow-y:auto;padding:14px 18px;
  /* contain: chegar no fim da lista NÃO passa a rolagem para a página de trás.
     touch: rolagem com inércia no Safari antigo, que sem isso fica travada. */
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--linha)}

/* Cinza parado e vermelho no toque: some do caminho enquanto o cliente decide,
   e deixa claro que apaga na hora em que ele mira. */
.item-tirar{
  align-self:start;display:grid;place-items:center;
  width:34px;height:34px;margin:-2px -4px 0 0;
  border:0;background:0;border-radius:var(--raio);color:#95a7b3;
  transition:color .15s,background .15s;
}
.item-tirar svg{width:17px;height:17px}
.item-tirar:hover{color:#b3261e;background:#fdeceb}
.item:last-child{border-bottom:0}
.item-foto{
  width:56px;height:56px;display:grid;place-items:center;padding:4px;
  background:var(--fundo-2);border:1px solid var(--linha);border-radius:4px;
  color:var(--azul-forte);
}
.item-foto img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.item-foto .ico{width:24px;height:24px;opacity:.65}
.item-cx{min-width:0}
.item-nome{font-size:14.5px;font-weight:600;line-height:1.35}
.item-cod{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:var(--tinta-2);margin-top:2px}
.item-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
/* largura fixa: sem isso o stepper cresce, espreme o valor ao lado e a linha
   quebra em quatro, comendo a altura de um item inteiro da lista em 360px */
.item-linha .stepper{flex:0 0 104px;height:36px;border-color:var(--linha)}
.item-linha .stepper button{width:34px}
.item-linha .stepper button svg{width:14px;height:14px}
.item-linha .stepper input{font-size:15px}
.item-val{
  min-width:0;font-size:13px;color:var(--tinta-2);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.3;
}
.item-val b{display:block;font-size:15.5px;color:var(--tinta)}

.d-vazio{padding:44px 6px;text-align:center;color:var(--tinta-2)}
.d-vazio svg{width:38px;height:38px;color:var(--linha);margin-bottom:12px}

.d-rodape{
  flex:0 0 auto;background:#fff;border-top:1px solid var(--linha);
  padding:14px 18px;padding-bottom:calc(14px + var(--sa-base));
}
.d-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.d-total span{font-size:14px;color:var(--tinta-2)}
.d-total b{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}

.btn-cheio{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:48px;border:0;border-radius:var(--raio);
  background:var(--azul-forte);color:#fff;font-weight:600;font-size:15.5px;
  text-decoration:none;
}
.btn-cheio:hover{background:#00648f}
.btn-cheio svg{width:19px;height:19px;flex:0 0 auto}
.btn-zap{background:var(--verde)}
.btn-zap:hover{background:var(--verde-esc)}
.btn-fim{background:var(--tinta)}
.btn-fim:hover{background:#1d3d54}
.btn-vazado{
  background:#fff;border:1px solid var(--linha);color:var(--tinta);margin-top:10px;height:44px;font-size:15px;
}
.btn-vazado:hover{background:var(--fundo-2);border-color:var(--azul)}
.btn-cheio[disabled]{opacity:.6;pointer-events:none}

.campo{margin-bottom:12px}
.campo label{display:block;font-size:13.5px;font-weight:600;margin-bottom:5px}
.campo .opc{font-weight:400;color:var(--tinta-2)}
.campo input,.campo textarea{
  width:100%;padding:11px 13px;border:1px solid var(--linha);border-radius:var(--raio);
  font:inherit;font-size:16px;color:var(--tinta);background:#fff;
}
.campo textarea{min-height:74px;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:0;border-color:var(--azul);box-shadow:0 0 0 3px rgba(0,156,223,.16)}

/* Botão e não lista suspensa: as três opções cabem lado a lado, o cliente vê
   tudo de uma vez e escolhe com um toque. Select no celular abre uma roleta
   por cima da tela e esconde o resto do formulário. */
.pgto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pgto-op{
  height:46px;padding:0 6px;border:1px solid var(--linha);border-radius:var(--raio);
  background:#fff;color:var(--tinta);font-size:14.5px;font-weight:600;
  transition:border-color .15s,background .15s,color .15s;
}
.pgto-op:hover{border-color:var(--azul)}
.pgto-op.on{background:var(--azul-forte);border-color:var(--azul-forte);color:#fff}

/* a conta do troco, feita enquanto ele digita */
.dica{margin-top:6px;font-size:13px;color:var(--verde);font-weight:600}
.dica-erro{color:#b3261e}

.nota{
  font-size:12.5px;line-height:1.5;color:var(--tinta-2);
  background:var(--fundo-2);border:1px solid var(--linha);border-radius:var(--raio);
  padding:10px 12px;margin-bottom:12px;
}
.nota button{background:0;border:0;padding:0;color:var(--azul-forte);text-decoration:underline;font-size:inherit}
.nota-ok{background:#eef8f1;border-color:#c3e3ce;color:#0d5c2c}
.nota-atencao{background:var(--ambar-fundo);border-color:var(--ambar-linha);color:var(--ambar-txt)}

/* ------------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:rgba(15,34,49,.55)}
.modal-cx{
  width:min(640px,100%);max-height:min(84vh,760px);display:flex;flex-direction:column;
  background:#fff;border-radius:8px;overflow:hidden;
}
.modal-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--linha);flex:0 0 auto}
.modal-head h3{flex:1;min-width:0;font-size:17px}
.modal-x{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border:1px solid var(--linha);border-radius:var(--raio);background:#fff}
.modal-x svg{width:17px;height:17px}
.modal-x:hover{border-color:var(--azul);color:var(--azul-forte)}
.modal-corpo{
  flex:1;min-height:0;overflow-y:auto;padding:20px;
  font-size:14.5px;line-height:1.62;color:var(--tinta-2);
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.modal-corpo h4{color:var(--tinta);font-size:15px;margin:20px 0 6px}
.modal-corpo h4:first-child{margin-top:0}
.modal-corpo ul{margin:6px 0;padding-left:20px}
.modal-corpo li{margin-bottom:4px}

/* ------------------------------------------------------------------- toast */
.toast{
  position:fixed;top:calc(14px + var(--sa-topo));left:50%;transform:translate(-50%,-18px);z-index:70;
  max-width:calc(100% - 28px);padding:11px 18px;border-radius:var(--raio);
  background:var(--tinta);color:#fff;font-size:14.5px;font-weight:500;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ------------------------------------------------------------ responsivo */
@media (max-width:900px){
  .barra-cart{display:flex}
  .rod-in{grid-template-columns:1fr 1fr;gap:28px}
  .rod-col:first-child{grid-column:1 / -1}

  /* A placa sai da coluna e vira marca d'água no canto. No celular, altura é o
     recurso caro: empilhar o desenho embaixo do texto empurraria o catálogo
     para fora da primeira tela só para mostrar enfeite. */
  .hero-in{grid-template-columns:1fr;gap:0;padding:52px 22px 56px}
  .hero-txt{position:relative;z-index:1}
  /* no escuro a placa aguenta mais presença sem atrapalhar a leitura, porque o
     texto é branco e o contraste continua altíssimo */
  .placa{
    position:absolute;right:-58px;top:-24px;width:286px;max-width:none;
    opacity:.55;z-index:0;pointer-events:none;
  }
}

@media (max-width:720px){
  .caixa{padding:0 16px}
  .hero-in{padding:42px 16px 46px}
  .fone-txt{display:none}
  .fone{padding:10px 12px}
  .catalogo{padding:32px 0 46px}
  .grade{gap:12px}
  .card-foto{--pf:12px}
  .atalhos{padding:14px 0}
  .atalhos-lista{grid-auto-columns:minmax(176px,1fr);gap:8px}
  .atalho{padding:10px 12px;column-gap:9px}
  .atalho-ico{width:34px;height:34px}
  .placa{right:-66px;top:-34px;width:252px;opacity:.5}
  .pontos{padding:34px 0}
  .rodape{padding-top:34px}
  /* espaço para a barra fixa do pedido não cobrir o crédito do rodapé */
  .rod-base{padding-bottom:calc(80px + var(--sa-base))}
  .caixa{padding-left:calc(16px + var(--sa-esq));padding-right:calc(16px + var(--sa-dir))}
  .modal{padding:0}
  .modal-cx{max-height:var(--altura-util);height:var(--altura-util);border-radius:0;width:100%}
  .modal-head{padding-top:calc(16px + var(--sa-topo))}
  .modal-corpo{padding-bottom:calc(20px + var(--sa-base))}
}

/* 480px e não 420px: a grade só cabe duas colunas a partir de ~472px de tela.
   Entre 421 e 471 (o iPhone Pro Max mora aí) ficava uma coluna só com a foto
   quadrada, e o card ia a 600px de altura, MAIOR que no iPhone comum. */
/* ---- VITRINE EM COLUNAS NO CELULAR ----
   Escolha do dono: dois produtos lado a lado no celular comum, três a partir do
   telefone grande. Em pé e numa coluna só, o card tinha 427px e aparecia um por
   tela.
   O custo dessa escolha é a largura: nome comprido de informática ("Fonte de
   alimentação C3Tech PS-200V4 200 W") não cabe inteiro numa coluna estreita.
   Por isso o nome ganha TRÊS linhas antes de cortar, a descrição sai de cena e a
   foto vira 4 por 3, que é o que devolve altura sem espremer o texto. */
@media (max-width:700px){
  .grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card:hover{transform:none}          /* não existe passar o mouse aqui */
  .card-foto{aspect-ratio:4/3;--pf:8px}
  .card-tag{display:none}              /* a categoria já está nos filtros acima */
  .card-corpo{padding:10px 11px 0;gap:2px}
  .card-cod{font-size:10.5px}
  .card-nome{
    font-size:12.5px;line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .card-desc{display:none}             /* não cabe: o detalhe fica para o WhatsApp */
  .card-preco{padding-top:7px}
  .preco{font-size:17px}
  .preco .cif{font-size:11px}
  .parcela{font-size:11px}
  .card-acao{padding:8px 11px 11px}
  .btn-add{height:38px;font-size:13.5px}
  /* 40px e não 36: a borda de 1px de cada lado come a altura, e o botão de
     dentro sobrava com 34px, abaixo do mínimo que o dedo acerta */
  .stepper{height:40px}
  .stepper button{width:36px}
  .stepper input{font-size:15px}
}

/* telefone grande e tablet pequeno aguentam três lado a lado */
@media (min-width:481px) and (max-width:700px){
  .grade{grid-template-columns:repeat(3,minmax(0,1fr))}
  .card-nome{font-size:12px}
}

@media (max-width:480px){
  .marca img{height:26px}
  .item{grid-template-columns:48px minmax(0,1fr) auto;gap:10px}
  .item-foto{width:48px;height:48px}
  .d-itens{padding:12px 14px}
  /* o padding abreviado apaga o padding-bottom com safe-area escrito lá em
     cima: por isso o lado do recorte é repetido depois dele, e não antes */
  .d-rodape{padding:12px 14px;padding-bottom:calc(12px + var(--sa-base))}
  .d-head{padding:14px;padding-top:calc(14px + var(--sa-topo))}
}

@media (prefers-reduced-motion:reduce){
  /* Corta transição e animação de interface: hover que salta, card que sobe,
     rolagem suave. É esse tipo de movimento que atrapalha de verdade. */
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}

  /* EXCEÇÃO, decidida pelo dono do site: o circuito do topo continua correndo.
     Não é movimento de interface nem desloca conteúdo, é um risco fino andando
     dentro de um desenho no canto da tela. Aqui ele vai bem mais devagar, quase
     o dobro do tempo, para ficar contemplativo em vez de agitado.
     Ganha do reset acima por especificidade: os dois têm !important, e
     ".placa-pulso path" é mais específico que "*". */
  .placa-pulso path{animation-duration:8s !important}
  .placa-anel rect{animation-duration:7.5s !important}
  .placa-barramento-pulso path{animation-duration:6.5s !important}
  .placa-trilha path{animation-duration:.01ms !important}   /* a entrada, essa some */
}