@font-face{font-family:Nunito;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonte/nunito-latin.20fc9b6fc618.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ══ A PALETA É A DO MANUAL DA MARCA ════════════════════════════════════
   Azul #4A6CB6, preto e branco. Branco sobre o azul dá 5,1:1 e passa no AA; por
   isso o botão cheio é azul com texto branco. Os nomes laranja/turquesa/amarelo
   ficaram como apelidos do azul para não reescrever cada regra que os usa; o
   magenta segue sendo a cor de erro. Mudar a cor da marca é mudar só aqui. */
:root{
  --azul:#4A6CB6;
  --azul-esc:#3A589F;
  --azul-claro:#EEF2FA;
  --azul-borda:#C9D4EC;
  --preto:#000000;
  --tinta:#111318;
  --tinta2:#4A4F5C;
  --tinta3:#6B7080;
  --borda:#E2E5EC;
  --borda-forte:#C8CDD8;
  --laranja:var(--azul);
  --laranja-esc:var(--azul-esc);
  --turquesa:var(--azul);
  --turquesa-esc:var(--azul-esc);
  --magenta:#C62828;
  --amarelo:var(--azul);
  --lav-laranja:var(--azul-claro);
  --lav-turquesa:var(--azul-claro);
  --lav-magenta:#FDECEC;
  --borda-laranja:var(--azul-borda);
  --borda-turquesa:var(--azul-borda);
  --borda-magenta:#F2C4C4;
  --foto-fundo:#F3F5FA;
}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--tinta);font-family:Nunito,"Helvetica Neue",Arial,sans-serif;
  font-weight:300;font-size:16px;line-height:1.6;font-feature-settings:'tnum';-webkit-font-smoothing:antialiased}
a{color:var(--tinta);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--tinta);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:400}p{margin:0}
img{max-width:100%;display:block}
.col{max-width:1080px;margin:0 auto;padding-left:48px;padding-right:48px}
.title{font-family:Nunito,"Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:38px;line-height:1.16;letter-spacing:-.012em}
.h2{font-family:Nunito,"Helvetica Neue",Arial,sans-serif;font-weight:400;font-size:24px;line-height:1.28}
.h3{font-family:Nunito,"Helvetica Neue",Arial,sans-serif;font-weight:400;font-size:19px;line-height:1.3}
.lead{font-size:17px;line-height:1.66;color:var(--tinta2)}
.sm{font-size:14px;color:var(--tinta2);line-height:1.6}
.xs{font-size:13px;color:var(--tinta2);line-height:1.6}
.ink{color:var(--tinta)}.q{color:var(--tinta2)}.ok{color:var(--turquesa-esc)}.low{color:var(--magenta)}
.num{font-variant-numeric:tabular-nums}.r{text-align:right}
.nota-topo{max-width:280px;text-align:right}
.rule{border-top:1px solid var(--borda)}.rule-ink{border-top:1px solid var(--tinta)}
.head{display:flex;justify-content:space-between;align-items:baseline;padding-top:40px;padding-bottom:34px}
.head .mark{font-family:Nunito,"Helvetica Neue",Arial,sans-serif;font-weight:400;font-size:23px}
.head nav{display:flex;gap:34px;font-size:15px;flex-wrap:wrap}
.head nav a.dim{color:var(--tinta2)}
.head nav .ola{color:var(--tinta2)}
.btn{display:inline-block;background:var(--tinta);color:#fff;border:0;
  font-family:Nunito,"Helvetica Neue",Arial,sans-serif;font-weight:400;
  font-size:15px;padding:15px 34px;cursor:pointer;text-align:center}
.btn:hover{text-decoration:none}
.btn.ghost{background:transparent;color:var(--tinta);border:1px solid var(--tinta);padding:14px 33px}
.btn.sm{font-size:14px;padding:11px 18px}
.btn.ghost.sm{padding:10px 17px}
.btn[disabled]{background:transparent;border:1px solid var(--borda);color:var(--tinta2);cursor:not-allowed}
.field{border:1px solid var(--borda-forte);background:#fff;padding:14px 16px;
  font-family:Nunito,"Helvetica Neue",Arial,sans-serif;font-weight:300;
  font-size:16px;color:var(--tinta);width:100%;font-variant-numeric:tabular-nums}
.field.lido{border-color:var(--borda);color:var(--tinta2)}
.field.erro{border-color:var(--magenta)}
textarea.field{resize:vertical;line-height:1.6}
/* sem a setinha do input number: ela é enfeite do navegador, muda de
   desenho em cada um, e o sistema não tem enfeite */
input[type=number]{appearance:textfield;-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lbl{display:block;font-size:13px;color:var(--tinta2);margin-bottom:8px}
/* senha: o olho dentro do campo, à direita; a lista de regras cinza fica verde item a item */
.senha-caixa{position:relative}
.senha-caixa .field{padding-right:52px}
.olho{position:absolute;top:0;right:0;height:100%;width:48px;display:flex;align-items:center;
  justify-content:center;background:none;border:0;color:var(--tinta2);cursor:pointer}
.olho:hover,.olho:focus-visible{color:var(--tinta)}
.olho .olho-aberto{display:none}
.olho[aria-pressed=true] .olho-aberto{display:block}.olho[aria-pressed=true] .olho-fechado{display:none}
.regras{list-style:none;margin:10px 0 0;padding:0;font-size:13px;line-height:1.75;color:var(--tinta2)}
.regras li::before{content:'○';display:inline-block;width:20px}
.regras li.ok{color:#1F7A45}
.regras li.ok::before{content:'✓'}
.stack{display:flex;flex-direction:column;gap:20px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.g21{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:18px}
.g3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.g4{display:grid;grid-template-columns:1.4fr 1.4fr .6fr;gap:18px}
.sec{border-top:1px solid var(--tinta);padding-top:14px;margin-top:8px;display:flex;
  justify-content:space-between;align-items:baseline}

/* A ESCOLHA PF / PJ DO CADASTRO (22/09/2026), SEM JAVASCRIPT.
   A loja roda com script-src 'none'. A escolha e um radio de verdade
   (name="tipo", vai no POST) e o CSS esconde o bloco do outro tipo com :has().
   Navegador sem :has() mostra os dois blocos: feio, mas funciona, porque o
   SERVIDOR decide pelo valor do radio quais campos valem. */
.tipo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tipo input{position:absolute;opacity:0;pointer-events:none}
.opcao{position:relative;display:flex;gap:14px;align-items:flex-start;border:1px solid var(--borda-forte);
  padding:18px 20px;cursor:pointer;background:#fff;transition:border-color .22s ease,background .22s ease}
.opcao:hover{border-color:var(--tinta3)}
.opcao .bola{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--borda-forte);
  margin-top:3px;box-sizing:border-box;transition:border .2s ease}
.opcao b{display:block;font-size:16px;font-weight:500}
.opcao .d{display:block;font-size:14px;line-height:1.45;color:var(--tinta2);margin-top:4px}
.opcao .etq{position:absolute;top:-10px;right:16px;font-size:11.5px;font-weight:500;letter-spacing:.04em;
  padding:2px 9px;border-radius:99px;color:#fff;opacity:0;transition:opacity .2s ease}
#t-pj:checked + .opcao{border-color:var(--turquesa);background:var(--lav-turquesa)}
#t-pj:checked + .opcao .bola{border:5px solid var(--turquesa)}
#t-pf:checked + .opcao{border-color:var(--laranja);background:var(--lav-laranja)}
#t-pf:checked + .opcao .bola{border:5px solid var(--laranja)}
#t-pj:checked + .opcao .etq,#t-pf:checked + .opcao .etq{opacity:1}
.tipo input:focus-visible + .opcao{outline:2px solid var(--tinta);outline-offset:2px}
form:has(#t-pf:checked) .so-pj{display:none}
form:has(#t-pj:checked) .so-pf{display:none}
#e-enviar:checked + .opcao{border-color:var(--turquesa);background:var(--lav-turquesa)}
#e-enviar:checked + .opcao .bola{border:5px solid var(--turquesa)}
#e-retirar:checked + .opcao{border-color:var(--laranja);background:var(--lav-laranja)}
#e-retirar:checked + .opcao .bola{border:5px solid var(--laranja)}
.entrega:has(#e-retirar:checked) .so-enviar{display:none}
.entrega{padding-top:44px;border-top:1px solid var(--tinta);margin-top:46px}
.chip-origem{font-size:11.5px;color:var(--tinta3);font-weight:400;margin-left:6px}
.field.digita{border-color:var(--laranja);background:#FFFCF7}
@media (prefers-reduced-motion: reduce){.opcao,.opcao .bola,.opcao .etq{transition:none}}

/* recado do sistema: nunca pílula colorida, só um fio à esquerda */
.recado{border-left:2px solid var(--turquesa-esc);padding:2px 0 2px 16px;margin-bottom:26px}
.recado.ruim{border-left-color:var(--magenta)}
.recado p{font-size:15px;line-height:1.6}
.recado .t{font-family:Nunito,"Helvetica Neue",Arial,sans-serif;font-size:19px}

/* catálogo */
/* ══ A ENTRADA ═══════════════════════════════════════════════════════════
   O símbolo fica dentro da margem e sem moldura: o arquivo já é só o círculo,
   com o fundo transparente. No celular ele vira a primeira coisa da coluna. */
.entrada-topo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,8fr);
  gap:24px;align-items:center;padding-top:8px}
.entrada-topo .dizeres{max-width:540px}
.entrada-topo .arte{margin-right:0}
.entrada-topo .arte img{width:100%;height:auto;display:block}

/* A ENTRADA DA IMAGEM acontece UMA VEZ, ao abrir, e depois ela respira.
   Movimento forte e continuo ao lado de um formulario de login e ruido: a
   pessoa veio digitar e-mail e senha, nao assistir. */
@keyframes pp-entrar{
  0%{transform:scale(.86) rotate(-1.6deg);opacity:0}
  55%{opacity:1}
  74%{transform:scale(1.025) rotate(.5deg)}
  100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes pp-respirar{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
.entrada-topo .arte img{animation:pp-entrar 1.05s cubic-bezier(.16,.9,.3,1) both,
                                  pp-respirar 13s ease-in-out 1.05s infinite}

.selos{display:flex;gap:9px;margin-top:26px;flex-wrap:wrap}
.selo{font-size:13px;padding:7px 14px;border-radius:7px;border:1px solid var(--borda)}
.selo.lar{background:var(--lav-laranja);border-color:var(--borda-laranja);color:var(--laranja-esc)}
.selo.tur{background:var(--lav-turquesa);border-color:var(--borda-turquesa);color:var(--turquesa-esc)}
.selo.mag{background:var(--lav-magenta);border-color:var(--borda-magenta);color:var(--magenta)}

.razoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;margin-top:52px}
.razoes h3{font-family:Nunito,"Helvetica Neue",Arial,sans-serif;font-weight:400;font-size:23px;
  line-height:1.3;margin:13px 0 0}
.razoes p{font-size:14.5px;line-height:1.55;color:var(--tinta2);margin-top:9px}

/* QUEM PEDE MENOS MOVIMENTO RECEBE MENOS MOVIMENTO. Enjoo com movimento e
   real, e custa uma linha. */
@media (prefers-reduced-motion: reduce){
  .entrada-topo .arte img{animation:none}
}

.grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:46px 32px}
.card{display:flex;flex-direction:column;height:100%}
.card .txt{flex:1}
/* CONTAIN, NAO COVER (19/09/2026).
   "cover" preenche o quadro e CORTA o que sobra. A foto nunca fica deformada, mas o
   produto perde topo e base quando a imagem nao e 4:3 — e foto de fornecedor quase nunca
   e. Foi o que aconteceu com o primeiro produto real publicado: o rotulo do carretel
   chegou cortado em cima e embaixo.
   "contain" faz a foto caber INTEIRA e o fundo do bloco preencher o resto. E o que Mercado
   Livre e Amazon fazem, e e o unico jeito de a curadora ver na tela exatamente o que o
   cliente vai ver, sem precisar recortar cada foto antes de enviar.
   O padding e para o produto nao encostar na borda: produto colado na moldura parece
   apertado, e numa grade de tres colunas isso salta. */
.card .foto{background:var(--foto-fundo);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;padding:14px}
.card .foto img{width:100%;height:100%;object-fit:contain}
.card .foto .vazia{font-size:12px;color:var(--tinta3);letter-spacing:.02em}
.card .nm{font-family:Nunito,"Helvetica Neue",Arial,sans-serif;font-weight:400;font-size:21px;line-height:1.24;
  letter-spacing:-.004em;margin-top:16px}
.card .sp{font-size:13.5px;color:var(--tinta2);margin-top:5px;line-height:1.5}
.card .est{margin-top:14px;padding-top:13px;border-top:1px solid var(--borda);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card .est .n{font-size:16px}
.card .acao{margin-top:14px;min-height:66px}
.card .acao a{font-size:14px}
.card .add{display:flex;gap:8px}
.card .add .field{width:62px;text-align:center;padding:10px 6px;font-size:15px}
.card .add .btn{flex:1;white-space:nowrap}
.card .mult{font-size:12.5px;color:var(--tinta2);margin-top:8px;min-height:19px}
.fim{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:52px 0 0;
  border-top:1px solid var(--tinta);margin-top:56px}

/* linha de item */
.linha{display:grid;grid-template-columns:1fr 112px 150px 92px;gap:26px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--borda)}
.linha .nm{font-family:Nunito,"Helvetica Neue",Arial,sans-serif;font-weight:400;font-size:21px;line-height:1.24}
.linha .sp{font-size:13.5px;color:var(--tinta2);margin-top:4px;line-height:1.5}
.linha .mult{font-size:12.5px;color:var(--tinta2);margin-top:7px}
.linha .field{padding:10px 8px;text-align:center;font-size:15px}
.linha .rem{font-size:13.5px;text-align:right}
.linha .rem a,.linha .rem button{color:var(--tinta2);background:none;border:0;padding:0;
  font:inherit;font-size:13.5px;cursor:pointer;text-decoration:none}
.linha .rem button:hover{text-decoration:underline;text-underline-offset:3px}
.cab{display:grid;grid-template-columns:1fr 112px 150px 92px;gap:26px;
  font-size:13px;color:var(--tinta2);padding-bottom:11px;border-bottom:1px solid var(--tinta)}
/* o que só existe no celular: no desktop essa informação está nas
   colunas 3 e 4, e mostrar as duas é o mesmo dado duas vezes */
.linha .movel{display:none}
.linha.com-preco,.cab.com-preco{grid-template-columns:1fr 112px 150px 120px 92px}
.linha .preco-un{font-size:13.5px;color:var(--tinta2);margin-top:6px}
.total-pedido{border-top:1px solid var(--borda);margin-top:22px;padding-top:16px}
.total-pedido .k{font-size:13px;color:var(--tinta2)}
.total-pedido .v{font-family:Nunito,"Helvetica Neue",Arial,sans-serif;font-size:32px;line-height:1.2}

table{width:100%;border-collapse:collapse}
th{text-align:left;font-weight:300;font-size:13px;color:var(--tinta2);padding:0 0 11px;border-bottom:1px solid var(--tinta)}
td{padding:15px 0;border-bottom:1px solid var(--borda);vertical-align:top;font-size:15px}
th + th, td + td{padding-left:26px}
th.r,td.r{text-align:right}

/* status */
.tempo{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.tempo div{padding-top:12px;border-top:1px solid var(--borda)}
.tempo div.foi{border-top-color:var(--turquesa-esc)}
.tempo div.ag{border-top-color:var(--tinta)}
.tempo .p{font-size:14.5px;line-height:1.35}
.tempo div.ag .p{font-weight:400}
.tempo .d{font-size:12.5px;color:var(--tinta2);margin-top:4px}

.caixa{border-top:1px solid var(--tinta);padding-top:22px}
.par{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.par2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
/* a coluna de enviar pedido. Precisa ser classe e não estilo inline:
   inline vence media query, e a tela estourava a largura no celular */
.envio{display:grid;grid-template-columns:1fr 380px;gap:64px;padding-top:54px;
  border-top:1px solid var(--tinta);margin-top:46px}
.dado{font-size:15px}
.dado .k{font-size:13px;color:var(--tinta2)}
.aberto{border:1px solid var(--tinta);padding:30px 32px;margin-top:30px}
.porta{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-top:44px;
  border-top:1px solid var(--tinta);margin-top:52px}
.hero h1{font-family:Nunito,"Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:46px;line-height:1.14;
  letter-spacing:-.012em;max-width:640px}
.hero h1 em{font-style:italic;font-weight:300}
footer{padding:78px 0 52px;font-size:14px;color:var(--tinta2);display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ── celular ─────────────────────────────────────────────────────── */
/* catálogo: a barra da faixa e a lista; a grade e a lateral moram no bloco CATÁLOGO, no fim */
.progresso{border:1px solid var(--borda);border-radius:10px;padding:14px 18px;background:#FDFBF8;margin-top:20px}
.pg-linha b{font-weight:500;color:var(--tinta)}
.pg-trilho{height:7px;border-radius:99px;background:#EDEFF3;margin:11px 0 7px;overflow:hidden}
.pg-cheio{display:block;height:100%;border-radius:99px;background:var(--laranja)}
.pg-fim{font-size:13px;color:var(--tinta3)}
.pg-linha{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;
  font-size:14.5px;color:var(--tinta2)}
.pg-faixas summary{cursor:pointer;color:var(--turquesa-esc);font-weight:500;text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap;list-style:none;font-size:14px}
.pg-faixas summary::-webkit-details-marker{display:none}
.pg-faixas table{margin-top:8px;min-width:230px}
.pg-faixas td{padding:5px 0;font-size:13.5px}
.pg-faixas tr.marcada td{font-weight:500;color:var(--tinta)}
.vitrine td{vertical-align:middle}
.vitrine tr.marcada td{background:#FDFAF6}
.vitrine .bola{width:20px;height:20px;border-radius:50%;display:inline-block;vertical-align:-4px;
  border:1px solid rgba(21,35,64,.18);margin-right:10px}
/* Foto do produto na linha: contain, como nos cartões — foto de fornecedor quase nunca é 4:3. */
.item-vitrine{display:flex;align-items:center;gap:14px}
.item-vitrine img,.item-vitrine .sem-foto{width:64px;height:48px;flex:none;background:var(--foto-fundo)}
.item-vitrine img{object-fit:contain;padding:3px}
.item-vitrine .sem-foto{display:grid;place-items:center;font-size:10.5px;color:var(--tinta3)}
.vitrine .qtd{width:78px;padding:9px 6px;text-align:center;font-size:15px}
.cen{text-align:center}
.selo{display:inline-block;font-size:12.5px;font-weight:500;padding:3px 11px;border-radius:99px;white-space:nowrap}
.selo.tur{background:var(--lav-turquesa);color:var(--turquesa-esc);border:1px solid var(--borda-turquesa)}
.selo.lar{background:var(--lav-laranja);color:var(--laranja-esc);border:1px solid var(--borda-laranja)}
.selo.cinza{background:#F2F4F7;color:var(--tinta3);border:1px solid var(--borda)}
.fx-chip{display:block;font-size:11.5px;color:var(--laranja-esc);background:var(--lav-laranja);
  border:1px solid var(--borda-laranja);border-radius:99px;padding:1px 9px;margin:4px 0 0 auto;
  white-space:nowrap;width:max-content}
@media (max-width:760px){
  body{font-size:14.5px;line-height:1.55}
  .col{max-width:none;padding-left:18px;padding-right:18px}
  .head{padding-top:16px;padding-bottom:13px;flex-wrap:wrap;gap:8px}
  .head .mark{font-size:17px}
  .head nav{gap:15px;font-size:13px}
  .title{font-size:24px;letter-spacing:-.008em}
  .h2{font-size:19px}.h3{font-size:16.5px}
  .lead{font-size:14px}
  .sm{font-size:12.5px}.xs{font-size:11.5px}
  .field{padding:11px 13px;font-size:14.5px}
  .lbl{font-size:12.5px;margin-bottom:5px}
  .g2,.g21,.g3,.g4,.par,.par2,.trio,.porta,.tipo{grid-template-columns:1fr;gap:14px}
  .envio{grid-template-columns:1fr;gap:30px;padding-top:26px;margin-top:30px}
  /* em 390 não há coluna à direita para alinhar, então tudo volta
     para a margem esquerda */
  .nota-topo,.sm.r,.r{max-width:none;text-align:left}
  .porta{padding-top:24px;margin-top:30px}
  .stack{gap:16px}
  .btn{font-size:14.5px;padding:13px 20px;width:100%}
  .hero h1{font-size:29px;line-height:1.16}

  .entrada-topo{grid-template-columns:1fr;gap:0}
  .entrada-topo .arte{order:-1;margin:0}
  .entrada-topo .dizeres{max-width:none}
  .razoes{grid-template-columns:1fr;gap:26px;margin-top:34px}
  .grade{grid-template-columns:1fr;gap:26px}
  /* O QUADRO CONTINUA 4:3 NO CELULAR (19/09/2026). Ele era 16/9, mais achatado, e com
     "cover" isso cortava mais ainda. Com "contain" a foto caberia, mas apareceria menor,
     entre duas faixas de fundo — e a curadora teria de mirar em dois enquadramentos
     diferentes. Uma forma so em toda tela transforma a regra de producao de foto numa
     frase: 4:3, 1400 por 1050. */
  .card .foto{aspect-ratio:4/3;padding:11px}
  .card .nm{font-size:17.5px;line-height:1.22;margin-top:11px}
  .card .sp{font-size:12px;margin-top:3px;line-height:1.45}
  .card .est{margin-top:10px;padding-top:9px}
  .card .acao{margin-top:10px;min-height:0}
  .card .acao a{font-size:13px}
  .card .add{gap:7px}
  .card .add .field{width:52px;padding:8px 4px;font-size:14px}
  .card .add .btn{padding:9px 10px;font-size:13.5px;width:auto}
  .card .mult{font-size:11px;margin-top:6px;min-height:0}
  .fim{display:block;padding-top:26px;margin-top:34px}
  .fim .btn{margin-bottom:12px}

  .cab{display:none}
  .linha{grid-template-columns:1fr 84px;gap:14px;padding:16px 0}
  .linha .nm{font-size:16.5px;line-height:1.22}
  .linha .sp{font-size:12px;margin-top:3px}
  .linha .mult{font-size:11px;margin-top:5px}
  .linha .field{padding:8px 4px;font-size:14px}
  .linha .est{font-size:12px;color:var(--tinta2);margin-top:8px}
  .linha .rem{text-align:left;font-size:12.5px;margin-top:9px}
  .linha .movel{display:block}
  .linha > div:nth-child(3),.linha > div:nth-child(4){display:none}
  .linha.com-preco{grid-template-columns:1fr 84px}
  .linha.com-preco > div:nth-child(5){display:none}
  .total-pedido .v{font-size:26px}

  .tempo{grid-template-columns:1fr;gap:0}
  .tempo div{padding:10px 0 10px 13px;border-top:0;border-left:1px solid var(--borda)}
  .tempo div.foi{border-left-color:var(--turquesa-esc)}
  .tempo div.ag{border-left-color:var(--tinta)}
  .tempo .p{font-size:14px}.tempo .d{font-size:11.5px}

  .aberto{padding:22px 18px;margin-top:24px}
  .caixa{padding-top:18px}
  table{display:block}
  thead{display:none}
  tbody,tr,td{display:block;width:100%}
  tr{border-bottom:1px solid var(--borda);padding:14px 0}
  td{border:0;padding:2px 0 !important;text-align:left !important}
  .vitrine .fx-chip{margin-left:0}
  footer{flex-direction:column;gap:4px;padding:38px 0 30px;font-size:12px}
}

/* ══ A MARCA SOBRE OS COMPONENTES ════════════════════════════════════════
   Fica no fim da folha de propósito: vale também por cima das regras do
   celular acima. Peso, raio e cor da marca moram aqui. */
body{font-weight:400}
.title,.hero h1,.entrada-topo h1{font-weight:800;letter-spacing:-.02em}
.entrada-topo h1{line-height:1.1}
.h2,.h3,.razoes h3,.card .nm,.linha .nm{font-weight:700;letter-spacing:-.01em}
.total-pedido .v{font-weight:800}
.hero h1 em,.entrada-topo h1 em{font-style:normal;color:var(--azul)}
.entrada-topo .sm{color:var(--azul)!important;font-weight:700}
th,.lbl{font-weight:600}

.head{align-items:center}
.head .mark img{height:38px;width:auto;display:block}
.head nav a{font-weight:600}

.btn{background:var(--azul);border-radius:999px;font-weight:700}
.btn:hover{background:var(--azul-esc)}
.btn.ghost{background:#fff;color:var(--azul);border:1.5px solid var(--azul)}
.btn.ghost:hover{background:var(--azul-claro)}
.btn.google{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:100%}
.ou{display:flex;align-items:center;gap:14px;margin:22px 0 4px;color:var(--tinta2);font-size:13px}
.ou::before,.ou::after{content:"";flex:1;border-top:1px solid var(--borda)}
.field{border-radius:12px;font-weight:400}
.field:focus{outline:2px solid var(--azul);outline-offset:1px;border-color:var(--azul)}
.field.digita{border-color:var(--azul);background:#F8FAFE}
.opcao{border-radius:14px}
#t-pj:checked + .opcao,#t-pf:checked + .opcao,#e-enviar:checked + .opcao,#e-retirar:checked + .opcao{border-color:var(--azul);background:var(--azul-claro)}
#t-pj:checked + .opcao .bola,#t-pf:checked + .opcao .bola,#e-enviar:checked + .opcao .bola,#e-retirar:checked + .opcao .bola{border-color:var(--azul)}
.opcao .etq{background:var(--azul)!important}

.rule-ink,.sec,.fim,.entrada,.envio,.porta,.caixa,.cab,.aberto{border-color:var(--preto)!important}
th{border-bottom-color:var(--preto)}
.recado{border-left:3px solid var(--azul)}
.recado.ruim{border-left-color:var(--magenta)}

.razoes svg{color:var(--azul);stroke:var(--azul)}

.progresso{border-radius:16px;background:#F8FAFE;border-color:var(--azul-borda)}
.pg-cheio{background:var(--azul)}
.pg-faixas summary{color:var(--azul)}
.vitrine tr.marcada td{background:#F6F8FD}
.selo,.fx-chip{font-weight:700}
.selo.lar{background:var(--preto);color:#fff;border-color:var(--preto)}
.selo.mag{background:var(--azul-claro);color:var(--azul-esc);border-color:var(--azul-borda)}
.item-vitrine img,.item-vitrine .sem-foto{border-radius:10px}
.card .foto{border-radius:16px}


footer{background:var(--preto);color:#B9BDC8;box-shadow:0 0 0 100vmax var(--preto);clip-path:inset(0 -100vmax);
  margin-top:70px;padding:44px 0 40px;align-items:center}
footer a{color:#fff}
footer .marca-rodape{display:flex;align-items:center;gap:22px}
footer .marca-rodape img{height:34px;width:auto}
footer .marca-rodape span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff}

/* ══ CATÁLOGO ═════════════════════════════════════════════════════════════
   Cabeçalho com busca, abas de material, produtos em cartões (ou na lista) e o
   pedido numa lateral fixa; no celular a lateral vira uma barra presa embaixo. */
.head .busca-topo{display:flex;flex:1;max-width:520px;margin:0 28px}
.busca-topo .field{min-width:0;border-radius:999px 0 0 999px;background:#F1F3F8;border-color:#F1F3F8;padding:11px 20px;font-size:15px}
.busca-topo .btn{border-radius:0 999px 999px 0;padding:0 22px;font-size:14px;flex:none;width:auto}
.head nav a.carrinho{background:var(--azul);color:#fff;border-radius:999px;padding:8px 16px}
.head nav a.carrinho:hover{background:var(--azul-esc);text-decoration:none}
body>.rule{margin-bottom:0}
.cat-bar{border-bottom:1px solid var(--borda);background:#fff}
.cat-bar .modelos{display:flex;gap:4px;overflow-x:auto}
.mod{display:flex;align-items:center;gap:8px;padding:14px 16px 11px;border-bottom:3px solid transparent;
  color:var(--tinta);white-space:nowrap}
.mod:hover{text-decoration:none;color:var(--azul)}
.mod b{font-size:15px;font-weight:700}
.mod em{font-style:normal;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:99px;
  background:var(--azul-claro);color:var(--azul-esc)}
.mod.on{border-bottom-color:var(--azul)}
.mod.on b{color:var(--azul)}
.cat{max-width:1240px;padding-top:30px}
.cat-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.cat-topo .title{font-size:32px}
.cat-topo .sm{margin-top:6px}
.cat-grade{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
.cat-main{min-width:0}
.barra{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.barra h2{font-size:15px;font-weight:700}
.barra .dir{display:flex;align-items:center;gap:10px}
.barra select{font:inherit;font-size:14px;border:1px solid var(--borda-forte);border-radius:10px;padding:8px 12px;background:#fff;color:var(--tinta)}
.js .sem-js{display:none}
.alterna{display:flex;border:1px solid var(--borda-forte);border-radius:10px;overflow:hidden}
.alterna a{width:38px;height:36px;display:grid;place-items:center;background:#fff;color:var(--tinta2)}
.alterna a:hover{text-decoration:none;background:var(--azul-claro)}
.alterna a[aria-current]{background:var(--azul);color:#fff}
.cartoes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cartao{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--borda);
  border-radius:16px;padding:12px 12px 14px;transition:box-shadow .2s}
.cartao:hover{box-shadow:0 14px 30px -18px rgba(26,45,95,.35)}
.cartao.marcada{border:2px solid var(--azul);padding:11px 11px 13px}
.cartao-foto{position:relative;aspect-ratio:1/1;border-radius:12px;background:var(--foto-fundo);overflow:hidden}
.cartao-foto img{width:100%;height:100%;object-fit:contain}
.cartao-foto .sem-foto{display:grid;place-items:center;height:100%;font-size:12px;color:var(--tinta3)}
.cartao-foto .selo{position:absolute;top:8px;left:8px;font-size:11.5px;padding:3px 10px;background:#fff;
  border:1px solid var(--borda);color:var(--tinta);box-shadow:0 2px 6px rgba(0,0,0,.06)}
.cartao-foto .selo.lar,.cartao-foto .selo.cinza{background:#FFF4E5;border-color:#F3D4AC;color:#8A5300}
.cartao-nome{margin-top:10px;font-weight:700;font-size:15px;line-height:1.35}
.cartao-nome .bola{width:14px;height:14px;border-radius:50%;display:inline-block;vertical-align:-2px;
  border:1px solid rgba(0,0,0,.12);margin-right:6px}
.cartao-nome .xs{font-weight:400}
.cartao-sku{color:var(--tinta3);font-size:12px}
.cartao-preco{margin-top:8px}
.cartao-preco b{font-size:19px;font-weight:800}
.cartao-preco .fx-chip{margin:6px 0 0}
.cartao-qtd{margin-top:auto;padding-top:12px}
.cartao-qtd>.xs{display:block;text-align:center;padding:10px 0;color:var(--tinta3);border:1.5px dashed var(--borda);border-radius:12px}
.passo{display:flex;align-items:center;border:1.5px solid var(--borda-forte);border-radius:12px;overflow:hidden;background:#fff}
.passo button{flex:none;width:42px;height:42px;border:0;background:#F3F5FA;color:var(--azul);font-family:inherit;font-size:20px;font-weight:700;line-height:1;cursor:pointer}
.passo button:focus-visible{outline:2px solid var(--azul);outline-offset:-2px}
.passo .qtd{flex:1;min-width:0;width:auto;border:0;border-radius:0;text-align:center;font-weight:700;padding:9px 0}
.passo .qtd:focus{outline:none}
.passo:focus-within{border-color:var(--azul)}
.cartao.marcada .passo{border-color:var(--azul)}
.cartao-qtd .passo+.xs{text-align:center;margin-top:4px}
.cartao-sub{display:flex;justify-content:space-between;margin-top:10px;font-size:13px;color:var(--tinta3)}
.cartao-sub b{color:var(--tinta)}
.cat-lado{position:sticky;top:20px;background:#fff;border:1px solid var(--borda);border-radius:18px;padding:20px;
  display:flex;flex-direction:column;gap:16px}
.cat-lado h3{font-size:18px;font-weight:800}
.cat-lado .progresso{margin:0;border:0;background:var(--azul-claro);padding:14px;border-radius:14px}
.cat-lado .pg-linha{flex-direction:column;gap:4px;font-size:13px}
.fx-tiras{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px;margin:-6px 0 6px}
.fx-tira{border:1px solid var(--borda);border-radius:10px;background:#fff;padding:7px 8px;text-align:center;display:flex;flex-direction:column;gap:0}
.fx-nome{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta3)}
.fx-tira b{font-size:15px;font-weight:800;color:var(--tinta)}.fx-tira b small{font-size:11px;font-weight:700}
.fx-de{font-size:11px;color:var(--tinta3)}
.fx-tira.atual{background:var(--azul-claro);border-color:var(--azul)}
.fx-tira.atual .fx-nome{color:var(--azul-esc)}
.fx-nota{font-size:12.5px;color:var(--tinta2);margin:0 0 20px}
.ped-itens{display:flex;flex-direction:column;border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);padding:8px 0;max-height:300px;overflow:auto}
.ped-cab{display:flex;justify-content:space-between;font-size:12px;color:var(--tinta3);padding:4px 0 6px}
.ped-item{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px dashed var(--borda)}
.ped-item:first-of-type{border-top:0}
.ped-item .bola{width:14px;height:14px;border-radius:50%;flex:0 0 14px;margin-top:3px;border:1px solid rgba(0,0,0,.12)}
.ped-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ped-txt b{font-size:13.5px}.ped-txt small{font-size:11.5px;color:var(--tinta3)}
.ped-dir{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.ped-dir b{font-size:13.5px}
.ped-rm{background:none;border:0;padding:0;font:inherit;font-size:12px;color:#B3261E;cursor:pointer;text-decoration:underline}
.resumo{display:flex;flex-direction:column}
.rq{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--borda)}
.rq u{text-decoration:none;font-size:13px;color:var(--tinta3)}
.rq b{font-size:15px;text-align:right}
.rq.total{border-bottom:0;padding-top:14px}
.rq.total u{color:var(--tinta);font-weight:700;font-size:15px}
.rq.total b{font-size:24px;font-weight:800}
.rodape-vitrine{display:flex;flex-direction:column;gap:12px}
.rodape-vitrine .sm{font-size:13px;color:var(--azul-esc);border:1px dashed var(--azul-borda);border-radius:12px;padding:10px 12px}
.rodape-vitrine .sm:empty{display:none}
.rodape-vitrine .btn{width:100%;padding:15px;font-size:15px}
.vitrine{background:#fff;border-radius:16px}
@media (max-width:900px){.cartoes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .head .busca-topo{order:3;flex-basis:100%;max-width:none;margin:4px 0 0}
  .busca-topo .field{padding:10px 16px;font-size:14px}
  .mod{padding:12px 10px}
  .cat{padding-top:22px}
  .cat-topo .title{font-size:26px}
  .cat-grade{grid-template-columns:1fr;gap:16px}
  .barra h2{flex-basis:100%}
  .cartoes{gap:10px}
  .cartao{padding:8px 8px 10px}.cartao.marcada{padding:7px 7px 9px}
  .cartao-nome{font-size:13.5px}
  .cartao-preco b{font-size:16px}
  .passo button{width:34px;height:38px}
  .cat-lado{position:sticky;bottom:0;top:auto;margin:0 -18px;border-radius:18px 18px 0 0;padding:12px 18px;gap:8px;
    box-shadow:0 -10px 30px -12px rgba(0,0,0,.2)}
  .cat-lado h3,.rq:not(.total),.rodape-vitrine .sm,.cat-lado .pg-linha,.ped-itens{display:none}
  .cat-lado .progresso{padding:10px}
  .cat-lado .pg-trilho{margin-top:0}
  .rq.total{padding:2px 0}.rq.total b{font-size:20px}
  .rodape-vitrine .btn{padding:12px}
  .vitrine tr{padding:12px}
}

/* ══ ETAPAS DO PEDIDO ═════════════════════════════════════════════════════
   As etapas feitas em verde, o ponto em que o pedido está em azul (o selo, na
   lista e na linha do tempo), as que faltam em cinza. Enviado, o fim, é o selo
   verde cheio; Cancelado é vermelho. --st-cor é o fio, --st-fundo e --st-texto
   o selo (conferidos para passar no AA). */
[data-st]{--st-cor:#2E9E55;--st-fundo:#E3F5E9;--st-texto:#1D6B38}
.st[data-st],.tempo div.ag[data-st]{--st-cor:var(--azul);--st-fundo:var(--azul);--st-texto:#FFFFFF}
.st[data-st="concluido"],.tempo div.ag[data-st="concluido"]{--st-cor:#1F7A3D;--st-fundo:#1F7A3D;--st-texto:#FFFFFF}
.st[data-st="cancelado"],.tempo div.ag[data-st="cancelado"]{--st-cor:#C62828;--st-fundo:#FDECEC;--st-texto:#A11D1D}
.st{display:inline-block;font-size:13px;font-weight:700;line-height:1.3;padding:4px 12px;border-radius:99px;
  background:var(--st-fundo);color:var(--st-texto);white-space:nowrap}
.tempo div.foi{border-top:3px solid var(--st-cor);padding-top:10px}
.tempo div.ag{border-top:5px solid var(--st-cor);padding-top:8px}
.tempo div.foi .p{color:var(--st-texto)}
.tempo div.ag .st{margin-left:-2px}
@media (max-width:760px){
  .tempo div.foi{border-top:0;border-left:3px solid var(--st-cor);padding:10px 0 10px 12px}
  .tempo div.ag{border-top:0;border-left:5px solid var(--st-cor);padding:10px 0 10px 10px}
}
/* ══ CONTATO E REDES ══════════════════════════════════════════════════════
   Ícones redondos do Instagram e do TikTok no cabeçalho e no rodapé; o botão do
   WhatsApp fica preso no canto inferior direito. No celular o botão sobe acima da
   barra do pedido quando ela existe. Quem pede movimento reduzido vê tudo parado. */
.head .lado{display:flex;gap:28px;align-items:center}
.redes{display:flex;gap:12px;align-items:center}
.redes a{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--borda-forte);color:var(--tinta)}
.redes a:hover{text-decoration:none;background:var(--azul-claro);border-color:var(--azul-borda)}
footer .rod-dir{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
footer .redes a{border-color:#3A3D45;color:#fff}
footer .redes a:hover{background:#1C1E24;border-color:#5A5E68}
.wa-flut{position:fixed;right:20px;bottom:24px;z-index:50;display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.18);
  transition:transform .2s ease,box-shadow .2s ease;animation:wa-entra .5s ease-out .6s both}
.wa-flut::before,.wa-flut::after{content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;
  z-index:-1;animation:wa-onda 3s ease-out 1.2s infinite}
.wa-flut::after{animation-delay:1.7s}
.wa-flut:hover{text-decoration:none;background:#1FBE5B;transform:scale(1.1);box-shadow:0 10px 26px rgba(37,211,102,.45)}
.wa-flut:hover::before,.wa-flut:hover::after{animation:none;opacity:0}
.wa-flut svg{animation:wa-balanca 6s ease-in-out 2s infinite}
@keyframes wa-onda{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.9);opacity:0}}
@keyframes wa-entra{from{transform:translateY(30px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes wa-balanca{0%,88%,100%{transform:rotate(0)}90%{transform:rotate(-14deg)}93%{transform:rotate(12deg)}96%{transform:rotate(-8deg)}}
@media (max-width:760px){
  .head .lado .redes{display:none}
  footer .rod-dir{align-items:flex-start}
  .wa-flut{width:54px;height:54px;right:16px;bottom:20px}
  body:has(.cat-lado) .wa-flut{bottom:130px}
}
@media (prefers-reduced-motion: reduce){.wa-flut,.wa-flut::before,.wa-flut::after,.wa-flut svg{animation:none}}