:root{
  --azul-noite:#041C55;
  --azul-profundo:#062B78;
  --azul:#0B4DBF;
  --azul-claro:#2E7BF6;
  --azul-sol:#7FB2FF;
  --azul-vidro:rgba(11,77,191,.08);

  --branco:#FFFFFF;
  --gelo:#F2F6FC;
  --gelo-2:#E4ECF8;
  --borda:#D8E2F2;

  --texto:#0A1A33;
  --texto-fraco:#55688A;

  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e6:24px;
  --e8:32px; --e12:48px; --e16:64px; --e20:80px;

  --raio:10px; --raio-g:18px;
  --sombra:0 1px 3px rgba(10,26,51,.07);
  --sombra-alta:0 14px 40px rgba(6,43,120,.18);

  --display:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --corpo:'Inter',system-ui,-apple-system,sans-serif;

  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* o topo é fixo: sem isso, clicar num link do menu esconde o começo da seção */
section[id],div[id]{scroll-margin-top:104px}
@media (min-width:900px){section[id],div[id]{scroll-margin-top:76px}}
body{font-family:var(--corpo);font-size:16px;line-height:1.6;color:var(--texto);background:var(--branco);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
button{font-family:inherit;cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--azul-claro);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--e4)}
.display{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--azul)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--branco);color:var(--azul-profundo);
  padding:12px 20px;border-radius:0 0 var(--raio) 0;font-weight:600;
}
.skip:focus{left:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}


/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:40;background:var(--azul-profundo);color:var(--branco);box-shadow:var(--sombra)}
.topo__linha{display:flex;align-items:center;gap:var(--e3);padding:10px var(--e4);max-width:var(--max);margin:0 auto}
.logo{height:22px;width:auto;flex-shrink:0}
.nav{display:none;gap:var(--e6);margin-left:var(--e6);font-size:.9rem;font-weight:500}
.nav a{color:#CFE0FB;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{color:#fff;border-color:var(--azul-sol)}
.topo__acoes{display:flex;align-items:center;gap:var(--e2);margin-left:auto}

/* navegação do celular: linha rolável, sem hambúrguer escondendo tudo */
.nav-mob{
  display:flex;gap:6px;overflow-x:auto;
  padding:0 var(--e4) 10px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.nav-mob::-webkit-scrollbar{display:none}
.nav-mob a{
  flex:0 0 auto;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:38px;
  background:rgba(255,255,255,.12);color:#DCE8FB;
  padding:0 14px;border-radius:999px;
  font-size:.8rem;font-weight:600;
}
.nav-mob a:active{background:rgba(255,255,255,.24)}

/* mostrar só num tamanho de tela */
.so-mob{display:block}
.so-desk{display:none}
.txt-curto{display:inline}
.txt-longo{display:none}

/* foto do hero no celular */

/* barra de pedido fixa no rodapé do celular */
.barra-pedido{
  position:fixed;left:0;right:0;bottom:0;z-index:36;
  display:flex;align-items:center;gap:var(--e4);
  padding:var(--e3) var(--e4);
  padding-bottom:calc(var(--e3) + env(safe-area-inset-bottom));
  background:var(--azul-profundo);color:#fff;text-align:left;
  box-shadow:0 -6px 24px rgba(4,20,60,.28);
}
.barra-pedido[hidden]{display:none}
.barra-pedido__esq{flex:1;min-width:0}
.barra-pedido__esq b{display:block;font-size:.78rem;font-weight:600;color:var(--azul-sol)}
.barra-pedido__esq small{display:block;font-family:var(--display);font-size:1.5rem;font-weight:800;color:#fff;line-height:1.1}
.barra-pedido__btn{
  background:var(--branco);color:var(--azul-profundo);
  padding:12px 20px;border-radius:var(--raio);
  font-size:.9rem;font-weight:700;white-space:nowrap;
}
.icone-btn{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;transition:background .15s}
.icone-btn:hover{background:rgba(255,255,255,.24)}
.icone-btn--claro{background:var(--branco);color:var(--azul-profundo)}
.icone-btn--claro:hover{background:#E9F0FC}
.carrinho-btn{position:relative}
.carrinho-badge{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--branco);color:var(--azul-profundo);font-size:.68rem;font-weight:700;display:none;place-items:center;box-shadow:0 0 0 2px var(--azul-profundo)}
.carrinho-badge.on{display:grid}

/* ---------- hero ---------- */
.stat b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:800;color:#fff;line-height:1}
.stat span{font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--azul-sol);line-height:1.25;display:block;margin-top:3px}
@media (min-width:560px){.stat span{font-size:.7rem;letter-spacing:.12em}.stat b{font-size:1.7rem}}

/* No celular a destaque entra logo depois dos CTAs da capa. Sem respiro no
   topo o card encostava na faixa de cima e a troca de azul caía exatamente
   na borda dele, fazendo o produto parecer solto na página. */
.destaque{background:var(--azul-profundo);padding:var(--e6) 0 var(--e8)}
/* Card do destaque — grid achatado: foto, topo, info e botão são irmãos,
   e cada tela os recoloca. No celular a foto é miniatura ao lado do preço;
   no desktop vira a coluna esquerda inteira. */
.hero__card{
  background:var(--branco);color:var(--texto);
  border-radius:var(--raio-g);overflow:hidden;box-shadow:var(--sombra-alta);
  max-width:380px;width:100%;
  display:grid;align-items:center;
  grid-template-columns:68px 1fr;
  grid-template-areas:
    "topo topo"
    "foto info"
    "btn  btn";
  column-gap:var(--e3);row-gap:var(--e4);
}
.hero__card-topo{grid-area:topo;align-self:stretch;background:var(--azul-noite);color:#fff;padding:var(--e3) var(--e4)}
.hero__card-topo b{font-family:var(--display);font-size:1.3rem;display:block;line-height:1.05;text-transform:uppercase}
.hero__card-topo span{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--azul-sol)}
.hero__card-foto{grid-area:foto;width:68px;height:68px;margin-left:var(--e4);
  border-radius:10px;overflow:hidden;background:var(--azul);display:grid;place-items:center}
.hero__card-foto img{width:100%;height:100%;object-fit:contain;display:block}
.hero__card-info{grid-area:info;min-width:0;margin-right:var(--e4)}
.hero__card-marca{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-fraco)}
.hero__card-preco{font-family:var(--display);font-size:1.6rem;font-weight:800;color:var(--azul-profundo);line-height:1}
.hero__card-avista{font-size:.72rem;font-weight:600;color:var(--azul);line-height:1.3}
.hero__card-btn{grid-area:btn;margin:0 var(--e4) var(--e4);justify-content:center}

@media (min-width:900px){
  .destaque{padding:var(--e12) 0}
  /* Faixa horizontal. Antes o card herdava margin-left:auto do hero de duas
     colunas que não existe mais e ficava colado na direita, com ~780px de
     vazio ao lado — era o buraco que aparecia na tela. */
  .hero__card{
    max-width:none;
    grid-template-columns:300px 1fr auto;
    grid-template-areas:
      "foto topo topo"
      "foto info btn";
    column-gap:var(--e8);row-gap:var(--e3);
  }
  .hero__card-foto{width:100%;height:100%;min-height:230px;margin:0;border-radius:0;background:var(--gelo)}
  .hero__card-foto img{padding:var(--e6)}
  .hero__card-topo{background:transparent;color:var(--texto);padding:var(--e8) var(--e8) 0 0}
  .hero__card-topo span{color:var(--azul)}
  .hero__card-topo b{font-size:1.9rem}
  .hero__card-info{margin:0}
  .hero__card-preco{font-size:2.2rem}
  .hero__card-avista{font-size:.85rem}
  .hero__card-btn{margin:0 var(--e8) var(--e8) 0;align-self:center;padding-inline:var(--e8)}
}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:var(--raio);font-size:.94rem;font-weight:600;min-height:48px;transition:background .15s,transform .1s,border-color .15s,color .15s;text-align:center}
.btn:active{transform:translateY(1px)}
.btn--azul{background:var(--azul);color:#fff}
.btn--azul:hover{background:var(--azul-profundo)}
.btn--branco{background:var(--branco);color:var(--azul-profundo)}
.btn--branco:hover{background:#E9F0FC}
.btn--vidro{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.34)}
.btn--vidro:hover{background:rgba(255,255,255,.26)}
.btn--linha{background:transparent;color:var(--azul);border:1.5px solid var(--borda)}
.btn--linha:hover{border-color:var(--azul)}
.btn--bloco{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- seções ---------- */
.secao{padding:var(--e8) 0}
@media (min-width:560px){.secao{padding:var(--e12) 0}}
.secao--gelo{background:var(--gelo)}
.secao--azul{background:var(--azul-profundo);color:#fff}
.secao__cabeca{margin-bottom:var(--e4)}
@media (min-width:560px){.secao__cabeca{margin-bottom:var(--e6)}}
.secao__cabeca h2{font-size:clamp(1.6rem,5.5vw,3rem);margin:6px 0 10px;line-height:1}
.secao__cabeca h2 em{font-style:normal;color:var(--azul);display:block}
.secao--azul .secao__cabeca h2 em{color:var(--azul-sol)}
.secao--azul .eyebrow{color:var(--azul-sol)}
.secao__cabeca p{color:var(--texto-fraco);max-width:56ch;font-size:.92rem;line-height:1.5;text-wrap:pretty}
.secao--azul .secao__cabeca p{color:#CFE0FB}

/* ---------- banner de capa ----------
   No desktop entra a arte inteira (banner@2x), que é composição única.
   No celular o título é TEXTO, não imagem: a arte vertical que existia aqui
   tinha sido remontada recortando pedaços do banner horizontal, e as emendas
   apareciam na tela. Só a foto vem como imagem. */
.capa{background:
  radial-gradient(900px 440px at 80% 6%,rgba(46,123,246,.4),transparent 62%),
  linear-gradient(160deg,var(--azul-noite) 0%,var(--azul-profundo) 62%,var(--azul-noite) 100%)}
.capa picture{display:block}
.capa img,.capa__img{width:100%;height:auto;display:block}

/* A arte já traz título e subtítulo desenhados, nas duas telas. O bloco de
   texto continua no DOM mas fora da tela: é ele que dá o <h1> à página, para
   busca e leitor de tela. Sem ele o site ficaria sem cabeçalho de nível 1. */
.capa__texto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* fundo transparente: quem pinta é o gradiente da seção. Cor chapada aqui
   criava uma emenda visível logo abaixo da arte. */
.capa__ctas{background:transparent;padding:0 var(--e4) var(--e6)}
.capa__ctas .wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:var(--e4)}
.capa__ctas .btn{padding:14px 10px;font-size:.86rem;white-space:nowrap}
@media (min-width:560px){
  .capa__ctas .wrap{display:flex;flex-wrap:wrap;gap:var(--e3);align-items:center;padding-top:var(--e6)}
  .capa__ctas .btn{padding:14px 24px;font-size:.94rem}
}
.capa__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e2);grid-column:1/-1;padding-top:var(--e3);border-top:1px solid rgba(255,255,255,.2)}
@media (min-width:560px){.capa__stats{display:flex;gap:var(--e6);flex-wrap:wrap;margin-left:auto;grid-column:auto;padding-top:0;border:none}}

/* faixa de campanha no meio */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* sem display:block aqui — esta regra vem DEPOIS de .so-desk{display:none} e
   estava anulando o esconde-no-celular. O <img> global já é block. */
.arte-secao{
  width:100%;height:auto;
  border-radius:var(--raio-g);
  border:1px solid var(--borda);
  box-shadow:var(--sombra);
  margin-bottom:var(--e4);
}
/* dentro de seção azul a arte já tem o próprio fundo: sem borda clara */
.arte-secao--solta{border:none;box-shadow:none;margin-bottom:0}
/* As artes entram INTEIRAS, na proporção original de 1912x823. Nada de
   aspect-ratio forçado nem object-fit:cover aqui: qualquer um dos dois
   recortaria a arte, e a composição é do designer, não minha. No celular ela
   aparece menor, nunca cortada. */
.secao--arte{padding:var(--e12) 0}

.faixa-arte{display:block;line-height:0;border-radius:var(--raio-g);overflow:hidden;box-shadow:var(--sombra-alta)}
.faixa-arte img{width:100%;height:auto}

/* ---------- marcas ---------- */
.marcas{position:relative}
.trilho-caixa{position:relative}
.trilho-seta{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:36px;height:36px;border-radius:50%;
  background:var(--branco);color:var(--azul-profundo);
  border:1px solid var(--borda);box-shadow:var(--sombra-alta);
  font-size:1.5rem;line-height:1;display:none;place-items:center;
  padding-bottom:3px;
}
.trilho-seta--esq{left:-6px}
.trilho-seta--dir{right:-6px}
.trilho-caixa.tem-overflow .trilho-seta{display:grid}
.trilho-seta[disabled]{opacity:.3;pointer-events:none}
.marcas__trilho{display:flex;gap:var(--e2);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:var(--e2);scrollbar-width:none}
.marcas__trilho::-webkit-scrollbar{display:none}
.marca-card{
  flex:0 0 150px;scroll-snap-align:start;
  height:96px;border-radius:var(--raio);
  background:var(--branco);border:1px solid var(--borda);
  display:grid;place-items:center;padding:var(--e3);text-align:center;
  transition:border-color .15s,transform .15s;
}
.marca-card:hover{border-color:var(--azul-claro);transform:translateY(-2px)}
.marca-card b{font-family:var(--display);font-size:1.28rem;font-weight:800;text-transform:uppercase;letter-spacing:.01em;color:var(--azul-profundo);line-height:1.05;display:block}
.marca-card__logo{width:auto;max-width:100%;max-height:52px;margin:0 auto 4px;object-fit:contain}
.marca-card small{display:block;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-fraco);margin-top:4px}

/* ---------- setores ---------- */
.setores{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:8px}
.setores::-webkit-scrollbar{display:none}
.setor{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);padding:var(--e3) 8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;text-align:center;transition:border-color .15s,transform .15s,box-shadow .15s}
.setor:hover{border-color:var(--azul-claro);transform:translateY(-2px);box-shadow:var(--sombra)}
.setor__ico{width:38px;height:38px;flex:0 0 38px;min-width:0;border-radius:10px;background:var(--azul);display:grid;place-items:center;flex-shrink:0}
.setor__ico svg{width:19px;height:19px}
.setor h3{font-family:var(--display);font-size:.92rem;font-weight:800;text-transform:uppercase;line-height:1.05}
.setor p{display:none;font-size:.72rem;color:var(--texto-fraco);line-height:1.25}

/* ---------- catálogo ---------- */
.filtros{display:flex;gap:var(--e2);flex-wrap:wrap;margin-bottom:var(--e6)}
.filtro{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--borda);background:var(--branco);font-size:.85rem;font-weight:600;color:var(--texto-fraco);transition:all .15s}
.filtro:hover{border-color:var(--azul-claro);color:var(--azul)}
.filtro.on{background:var(--azul);border-color:var(--azul);color:#fff}

.busca{display:flex;align-items:center;gap:var(--e2);background:var(--branco);border:1.5px solid var(--borda);border-radius:var(--raio);padding:0 var(--e4);margin-bottom:var(--e4);max-width:420px}
.busca input{border:none;outline:none;padding:13px 0;font-family:inherit;font-size:.95rem;width:100%;background:none;color:var(--texto)}

.grade{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media (min-width:560px){.grade{gap:var(--e4);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
.prod{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio-g);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s,transform .15s}
.prod:hover{border-color:var(--azul-claro);box-shadow:var(--sombra-alta);transform:translateY(-2px)}
.prod__img{aspect-ratio:1/1;background:var(--azul);position:relative;overflow:hidden}
.prod__img img{width:100%;height:100%;object-fit:cover}

/* foto e nome abrem o detalhe; o botao nao pode herdar visual de botao */
.prod__abrir{display:block;width:100%;padding:0;border:0;cursor:pointer;font:inherit;color:inherit}
/* alvo de toque: o texto tem 17px de altura, entao a area clicavel cresce por
   padding sem deslocar o texto (margin negativa compensa) */
.prod__nome-btn{background:none;border:0;margin:-8px -8px -6px;padding:8px 8px 6px;
  font:inherit;color:inherit;text-align:left;cursor:pointer;min-height:44px}
.prod__nome-btn:hover{text-decoration:underline}
.prod__abrir:focus-visible,.prod__nome-btn:focus-visible{outline:2px solid var(--azul-claro);outline-offset:2px}

/* ---------- detalhe do produto no modal ---------- */
.det__foto{aspect-ratio:1/1;max-width:320px;margin:0 auto var(--e4);border-radius:var(--raio-g);
  overflow:hidden;background:var(--azul)}
.det__foto img{width:100%;height:100%;object-fit:cover;display:block}
.det__setor{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-fraco);margin-bottom:var(--e4)}
.det__bloco{padding-top:var(--e4);margin-top:var(--e4);border-top:1px solid var(--gelo-2,#E7EDF7)}
.det__bloco:first-of-type{border-top:0;margin-top:0}
.det__rotulo{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-fraco);margin-bottom:var(--e2)}
.det__cor{font-size:.9rem;line-height:1.45;color:var(--texto)}
.det__cor-ajuda{font-size:.82rem;line-height:1.45;color:var(--texto-fraco);margin-top:4px}
.det__preco{font-family:var(--display);font-size:2rem;font-weight:800;color:var(--azul-profundo);line-height:1}
.det__avista{font-size:.9rem;font-weight:600;color:var(--azul);margin-top:4px}
.det__parcela{font-size:.82rem;color:var(--texto-fraco);margin-top:2px}
.det .btn{margin-top:var(--e6)}

/* Produto ainda sem foto: inicial da marca sobre o azul da marca, em vez de
   ícone de imagem quebrada. Sai de cena sozinho quando a foto for cadastrada. */
.sem-foto{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  background:linear-gradient(150deg,var(--azul-profundo),var(--azul));
  color:rgba(255,255,255,.85);
  font-family:var(--display);font-weight:800;line-height:1;
  font-size:clamp(1.6rem,7vw,3rem);letter-spacing:-.02em;
  user-select:none;
}
.sugestao__img .sem-foto,.item__img .sem-foto{font-size:1.1rem;border-radius:inherit}
.prod__ph{position:absolute;inset:0;display:grid;place-items:center;gap:10px;align-content:center;background:var(--azul);color:rgba(255,255,255,.62)}
.prod__ph span{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.prod__marca{position:absolute;top:7px;left:7px;font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(4,28,85,.82);color:#fff;padding:4px 8px;border-radius:5px;backdrop-filter:blur(3px)}
.prod__oferta{position:absolute;top:7px;right:7px;font-size:.55rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--branco);color:var(--azul-profundo);padding:4px 8px;border-radius:5px}
.prod__corSel{position:absolute;bottom:10px;right:10px;width:30px;height:30px;border-radius:8px;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.25)}
.prod__corpo{padding:var(--e3);display:flex;flex-direction:column;gap:5px;flex:1}
@media (min-width:560px){.prod__corpo{padding:var(--e4);gap:var(--e2)}}
.prod__cat{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-fraco)}
@media (min-width:560px){.prod__cat{font-size:.66rem;letter-spacing:.1em}}
.prod__nome{font-size:.82rem;font-weight:600;line-height:1.3;color:var(--texto)}
@media (min-width:560px){.prod__nome{font-size:.95rem;line-height:1.35}}
/* Este aviso é sobre PREÇO — diz que o valor é o da base branca e que a cor
   pode custar à parte. Estava escondido no celular para poupar espaço, e o
   cliente via R$ 928,00 com "Adicionar" sem saber que a cor não estava
   incluída. Informação de preço não se esconde por falta de espaço. */
.prod__tingir{display:block;font-size:.68rem;color:var(--azul);font-weight:600;line-height:1.35}
@media (min-width:560px){.prod__tingir{font-size:.7rem}}
.setor--vazio,.marca-card--vazio{opacity:.55;cursor:default}
.setor--vazio:hover,.marca-card--vazio:hover{border-color:var(--borda);transform:none;box-shadow:none}
.selo-breve{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-fraco)}
.prod__preco{margin-top:auto;padding-top:var(--e2)}
.prod__preco b{font-family:var(--display);font-size:1.5rem;font-weight:800;color:var(--azul-profundo);line-height:1;display:block}
@media (min-width:560px){.prod__preco b{font-size:1.85rem}}
.prod__avista{display:block;font-size:.72rem;font-weight:600;color:var(--azul);line-height:1.25;margin-top:2px}
@media (min-width:560px){.prod__avista{font-size:.78rem}}
.prod__parcela{display:none;font-size:.7rem;color:var(--texto-fraco);line-height:1.3}
@media (min-width:560px){.prod__parcela{display:block}}

/* ---------- como funciona ---------- */
.passos{display:grid;gap:var(--e4);grid-template-columns:1fr}
.passo{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--raio);padding:var(--e4) var(--e6)}
.passo__n{font-family:var(--display);font-size:2rem;font-weight:800;color:var(--azul-sol);line-height:1}
.passo h3{font-size:1.05rem;font-weight:700;margin:var(--e2) 0 6px;color:#fff}
.passo p{font-size:.9rem;color:#BFD6F7}

/* ---------- lojas ---------- */
.lojas{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media (min-width:560px){.lojas{gap:var(--e4)}}
.loja{background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio-g);overflow:hidden;display:flex;flex-direction:column}
.loja__topo{background:var(--azul-profundo);color:#fff;padding:var(--e3) var(--e4)}
@media (min-width:560px){.loja__topo{padding:var(--e4) var(--e6)}}
.loja__topo b{font-family:var(--display);font-size:1.2rem;text-transform:uppercase;display:block;line-height:1}
@media (min-width:560px){.loja__topo b{font-size:1.55rem}}
.loja__topo span{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--azul-sol)}
.loja__l{padding:10px var(--e4);border-bottom:1px solid var(--borda)}
@media (min-width:560px){.loja__l{padding:var(--e3) var(--e6)}}
.loja__l:last-child{border:none}
.loja__l small{display:block;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-fraco);margin-bottom:2px}
.loja__l p{font-size:.8rem;font-weight:500;line-height:1.35}
@media (min-width:560px){.loja__l p{font-size:.92rem}}
/* Três ações por loja: falar, mapa e Instagram. O problema anterior era pôr
   as três lado a lado com larguras diferentes (1.4fr 1fr 1fr): o rótulo mais
   longo quebrava em duas linhas e os botões ficavam com alturas desiguais.

   Agora a hierarquia é explícita: "Falar com a loja" é a ação principal e
   ocupa a linha inteira; mapa e Instagram são secundárias e dividem a linha de
   baixo, em colunas iguais. Some a quebra de linha e some o desalinhamento. */
.loja__acoes{
  display:grid;gap:var(--e2);
  grid-template-columns:1fr 1fr;
  padding:var(--e3) var(--e4) var(--e4);margin-top:auto;
}
.loja__acoes .btn{width:100%;padding:12px 10px;font-size:.85rem;min-height:46px;gap:6px;
  white-space:nowrap}
/* a principal atravessa as duas colunas */
.loja__acoes .btn--azul{grid-column:1 / -1}
@media (min-width:560px){
  .loja__acoes{padding:var(--e4) var(--e6) var(--e6);gap:var(--e3)}
  .loja__acoes .btn{padding:14px 20px;font-size:.92rem;min-height:50px;gap:9px}
}

.escolha-loja{
  display:flex;align-items:center;gap:var(--e4);
  padding:var(--e4);margin-bottom:var(--e3);
  border:1.5px solid var(--borda);border-radius:var(--raio);
  transition:border-color .15s,background .15s,transform .1s;
}
.escolha-loja:hover{border-color:var(--azul);background:var(--azul-vidro)}
.escolha-loja:active{transform:translateY(1px)}
.escolha-loja__ico{
  width:44px;height:44px;flex:0 0 44px;min-width:0;border-radius:12px;
  background:var(--azul);color:#fff;display:grid;place-items:center;
}
.escolha-loja__txt b{display:block;font-size:1rem;font-weight:700;line-height:1.2}
.escolha-loja__txt small{display:block;font-size:.78rem;color:var(--texto-fraco);line-height:1.35}

/* ---------- rodapé ---------- */
.rodape{background:var(--azul-noite);color:#BBD3F7;padding:var(--e8) 0 var(--e6);font-size:.84rem}
@media (min-width:560px){.rodape{font-size:.9rem;padding:var(--e12) 0 var(--e6)}}

.rodape__topo{display:grid;gap:var(--e4);margin-bottom:var(--e6)}
.rodape__marca .logo{height:26px;margin-bottom:10px}
.rodape__marca p{max-width:44ch;line-height:1.45}

.rodape__lojas{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e4);margin-bottom:var(--e6)}
.rodape__loja h4{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:8px}
.rodape__loja p{line-height:1.4;margin-bottom:4px}
.rodape__loja a{border-bottom:1px solid rgba(255,255,255,.25)}
.rodape__loja a:hover{color:#fff;border-color:#fff}

.rodape__links{
  display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4);
  padding-bottom:var(--e4);margin-bottom:var(--e4);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.rodape__links a{font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
.rodape__links a:hover{border-color:#fff}

.rodape__base{
  display:grid;gap:4px;padding-right:72px;
  font-size:.72rem;color:#7FA3D6;line-height:1.5;
}
@media (min-width:560px){
  .rodape__topo{grid-template-columns:1fr auto;align-items:center}
    .rodape__lojas{grid-template-columns:repeat(2,minmax(0,240px))}
  .rodape__base{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e6);justify-content:space-between;font-size:.76rem}
}

.wpp-float{position:fixed;right:16px;bottom:16px;z-index:35;transition:bottom .2s;width:58px;height:58px;border-radius:50%;background:var(--azul);display:grid;place-items:center;box-shadow:0 8px 26px rgba(11,77,191,.5);border:2px solid #fff}

/* ---------- carrinho ---------- */
body.com-barra .wpp-float{bottom:96px}
body.com-barra{padding-bottom:84px}
.veu{position:fixed;inset:0;background:rgba(4,20,60,.6);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(2px)}
.veu.on{opacity:1;pointer-events:auto}
.gaveta{position:fixed;top:0;right:0;bottom:0;z-index:60;width:min(430px,100%);background:var(--branco);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;box-shadow:-10px 0 40px rgba(6,43,120,.22)}
.gaveta.on{transform:translateX(0)}
.gaveta__topo{display:flex;align-items:center;gap:var(--e3);padding:var(--e4) var(--e6);border-bottom:1px solid var(--borda)}
.gaveta__topo h3{font-family:var(--display);font-size:1.5rem;text-transform:uppercase;flex:1}
.gaveta__corpo{flex:1;overflow-y:auto;padding:var(--e4) var(--e6)}
.gaveta__pe{padding:var(--e6);border-top:1px solid var(--borda);background:var(--gelo)}

.item{display:flex;gap:var(--e3);padding:var(--e3) 0;border-bottom:1px solid var(--borda)}
.item__img{width:62px;height:62px;flex:0 0 62px;min-width:0;border-radius:9px;background:var(--azul);overflow:hidden;display:grid;place-items:center}
/* contain, não cover: a lata é alta e o cover cortava topo e base */
.item__img img{width:100%;height:100%;object-fit:contain;padding:3px}
.item__meio{flex:1;min-width:0}
.item__nome{font-size:.86rem;font-weight:600;line-height:1.3}
.item__cor{font-size:.72rem;color:var(--texto-fraco);margin-top:2px;display:flex;align-items:center;gap:5px}
.item__cor i{width:12px;height:12px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(10,26,51,.2)}
.item__preco{font-size:.9rem;font-weight:700;color:var(--azul-profundo);margin-top:4px}
.qtd{display:flex;align-items:center;gap:var(--e2);margin-top:6px}
.qtd button{width:44px;height:44px;flex:0 0 44px;border-radius:9px;background:var(--gelo-2);font-weight:700;color:var(--azul-profundo);display:grid;place-items:center;font-size:1.15rem}
.qtd button:hover{background:var(--azul);color:#fff}
.qtd span{font-size:.85rem;font-weight:600;min-width:20px;text-align:center}
.item__x{color:var(--texto-fraco);font-size:1.1rem;align-self:flex-start;width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;margin:-8px -12px 0 0}
.item__x:hover{color:var(--azul)}
.sugestoes{margin-top:var(--e6);padding-top:var(--e4);border-top:2px dashed var(--borda)}
.sugestoes__titulo{font-family:var(--display);font-size:1.15rem;font-weight:800;text-transform:uppercase;color:var(--azul-profundo);margin-bottom:var(--e3)}
.sugestao{display:flex;align-items:center;gap:var(--e3);padding:var(--e2) 0}
.sugestao__img{width:48px;height:48px;flex:0 0 48px;min-width:0;border-radius:8px;background:var(--azul);overflow:hidden}
.sugestao__img img{width:100%;height:100%;object-fit:cover}
.sugestao__meio{flex:1;min-width:0}
.sugestao__nome{font-size:.8rem;font-weight:600;line-height:1.3}
.sugestao__preco{font-size:.82rem;font-weight:700;color:var(--azul-profundo);margin-top:2px}
.sugestao__add{
  width:44px;height:44px;flex:0 0 44px;min-width:0;border-radius:10px;
  background:var(--azul);color:#fff;font-size:1.35rem;font-weight:600;line-height:1;
  display:grid;place-items:center;transition:background .15s,transform .1s;
}
.sugestao__add:hover{background:var(--azul-profundo)}
.sugestao__add:active{transform:scale(.94)}

.aviso-corte{
  font-size:.82rem;line-height:1.4;color:var(--sucesso);font-weight:600;
  background:#E8F5EE;border-radius:var(--raio);padding:10px var(--e3);margin-bottom:var(--e4);
}
.aviso-corte--off{color:var(--texto-fraco);background:var(--gelo);font-weight:500}

.vazio{text-align:center;padding:var(--e16) var(--e4);color:var(--texto-fraco)}
.vazio b{display:block;font-size:1.05rem;color:var(--texto);margin-bottom:6px}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--e4)}
.total span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-fraco)}
.total b{font-family:var(--display);font-size:2.1rem;font-weight:800;color:var(--azul-profundo)}

/* ---------- checkout ---------- */
.modal{position:fixed;inset:0;z-index:70;display:none;align-items:flex-end;justify-content:center;overflow-y:auto}
.modal.on{display:flex}
.modal__caixa{background:var(--branco);width:min(520px,100%);border-radius:var(--raio-g) var(--raio-g) 0 0;max-height:94vh;overflow-y:auto;box-shadow:var(--sombra-alta)}
.modal__topo{position:sticky;top:0;background:var(--branco);z-index:2;display:flex;align-items:center;gap:var(--e3);padding:var(--e4) var(--e6);border-bottom:1px solid var(--borda)}
.modal__topo h3{font-family:var(--display);font-size:1.45rem;text-transform:uppercase;flex:1}
.modal__corpo{padding:var(--e6)}
.campo{display:grid;gap:6px;margin-bottom:var(--e4)}
.campo label{font-size:.78rem;font-weight:600}
.campo input,.campo select,.campo textarea{padding:13px var(--e3);border:1.5px solid var(--borda);border-radius:var(--raio);font-family:inherit;font-size:.95rem;min-height:48px;background:var(--branco);color:var(--texto)}
.campo input:focus,.campo textarea:focus{border-color:var(--azul);outline:none;box-shadow:0 0 0 3px var(--azul-vidro)}
.campo__erro{font-size:.75rem;color:#B4232B;display:none}
.campo.erro input,.campo.erro textarea{border-color:#B4232B}
.campo.erro .campo__erro{display:block}
.opcoes{display:grid;gap:var(--e2);margin-bottom:var(--e4)}
.opcao{display:flex;align-items:center;gap:var(--e3);padding:var(--e3) var(--e4);border:1.5px solid var(--borda);border-radius:var(--raio);cursor:pointer;transition:border-color .15s,background .15s}
.opcao:hover{border-color:var(--azul-claro)}
.opcao input{accent-color:var(--azul);width:18px;height:18px;flex-shrink:0}
.opcao b{display:block;font-size:.9rem;font-weight:600}
.opcao small{display:block;font-size:.76rem;color:var(--texto-fraco)}
.opcao.on{border-color:var(--azul);background:var(--azul-vidro)}
.resumo{background:var(--gelo);border-radius:var(--raio);padding:var(--e4);margin-bottom:var(--e4)}
.resumo__l{display:flex;justify-content:space-between;font-size:.88rem;padding:5px 0}
.resumo__l--total{border-top:1px solid var(--borda);margin-top:6px;padding-top:10px;font-weight:700;font-size:1.05rem;color:var(--azul-profundo)}
.resumo__l--desconto{color:var(--sucesso);font-weight:600}
.passos-nav{display:flex;align-items:flex-start;justify-content:center;gap:6px;margin:0 0 var(--e6)}
.passos-nav__linha{flex:1;max-width:44px;height:2px;background:var(--borda);margin-top:15px;border-radius:2px}
.passo-bola{display:grid;justify-items:center;gap:5px;width:74px;text-align:center}
.passo-bola b{
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--gelo-2);color:var(--texto-fraco);
  font-family:var(--corpo);font-size:.85rem;font-weight:700;
}
.passo-bola small{font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-fraco);line-height:1.2}
.passo-bola.on b{background:var(--azul);color:#fff}
.passo-bola.on small{color:var(--azul)}
.passo-bola.feito b{background:var(--sucesso);color:#fff}
.passo-bola.feito small{color:var(--texto)}

.rotulo-grupo{font-size:.78rem;font-weight:600;margin-bottom:8px}
.campo__ajuda{font-size:.74rem;color:var(--texto-fraco);line-height:1.4}

.dica-desconto{font-size:.78rem;color:var(--azul);background:var(--azul-vidro);border-radius:var(--raio);padding:10px var(--e3);margin-bottom:var(--e4);line-height:1.4}
.aviso{background:var(--gelo);border:1px solid var(--borda);border-left:4px solid var(--azul);border-radius:var(--raio);padding:var(--e3) var(--e4);font-size:.8rem;color:var(--texto-fraco);margin-bottom:var(--e4)}
.nota{background:var(--gelo);border-radius:var(--raio);padding:var(--e4);font-family:ui-monospace,monospace;font-size:.78rem;white-space:pre-wrap;line-height:1.55;color:var(--texto);max-height:280px;overflow-y:auto;margin-bottom:var(--e4);border:1px solid var(--borda)}
.ok-selo{width:64px;height:64px;border-radius:50%;background:var(--azul);display:grid;place-items:center;margin:0 auto var(--e4)}

@media (min-width:560px){
  .setores{display:flex;gap:var(--e2);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:var(--e2);scrollbar-width:none}
  .setor{flex:0 0 208px;scroll-snap-align:start;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--e3);padding:var(--e3) var(--e4);text-align:left}
  .setor h3{font-size:1.12rem;line-height:1;margin-bottom:3px}
  .setor p{display:block}
}
@media (min-width:640px){
  .passos{grid-template-columns:repeat(2,1fr)}
  .lojas{grid-template-columns:repeat(2,1fr)}
  .rodape__grid{grid-template-columns:repeat(2,1fr)}
  .modal{align-items:center;padding:var(--e4)}
  .modal__caixa{border-radius:var(--raio-g)}
}
@media (min-width:900px){
  .nav-mob{display:none}
    .barra-pedido{display:none !important}
  .so-mob{display:none}
  .so-desk{display:block}
  .txt-curto{display:none}
  .txt-longo{display:inline}
}
@media (min-width:960px){
  .nav{display:flex}
      .passos{grid-template-columns:repeat(4,1fr)}
  .rodape__grid{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:var(--e6)}
  .logo{height:30px}
  .marca-card{flex:0 0 168px}
}
/* cada tela recebe a versão da arte feita para ela:
   vertical no celular, horizontal no desktop */



/* ---------- escolha de cor no detalhe do produto ---------- */
/* carta de cores: o bloco de tinta é o que a pessoa olha, o nome só confirma.
   Por isso a cor ocupa quase todo o botão e o texto vai embaixo, pequeno. */
.cores{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));
  gap:8px;margin-bottom:var(--e3);
}
.cor{
  display:block;text-align:center;padding:5px 5px 7px;
  border:1px solid var(--borda);background:var(--branco);color:var(--texto);
  border-radius:var(--raio);transition:border-color .15s,box-shadow .15s;
}
.cor__bloco{
  display:block;height:52px;border-radius:6px;margin-bottom:6px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.cor__nome{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 4px;
  min-height:2.4em;font-size:.72rem;line-height:1.2;font-weight:500;
}
.cor__cod{font-size:.94em;font-weight:400;color:var(--texto-fraco)}
.cor:hover{border-color:var(--azul-claro)}
.cor.on{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul)}
.cor.on .cor__nome{font-weight:700;color:var(--azul)}
/* no carrinho a cor volta a aparecer: confere a escolha sem reabrir a ficha */
.item__bloco{
  display:inline-block;width:12px;height:12px;border-radius:3px;
  margin-right:5px;vertical-align:-1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}
.cor:focus-visible{outline:2px solid var(--azul-claro);outline-offset:2px}

/* convite de cor sob medida: é conversa, não item de tabela — por isso não
   parece um card de produto */
.cor-sob-medida{
  background:linear-gradient(150deg,var(--azul-profundo),var(--azul));
  color:#fff;border-radius:var(--raio-g);padding:var(--e4);
}
.cor-sob-medida b{display:block;font-family:var(--display);font-size:1.35rem;
  font-weight:800;text-transform:uppercase;line-height:1.05;margin-bottom:6px}
.cor-sob-medida p{font-size:.86rem;line-height:1.45;color:#CFE0FB;margin-bottom:var(--e3)}
.cor-sob-medida__btn{width:100%;background:var(--branco);color:var(--azul-profundo)}
.cor-sob-medida__btn:hover{background:#E9F0FC}

/* cor do item no carrinho */
.item__cor{font-size:.78rem;color:var(--azul);font-weight:600}

/* ---------- ficha técnica no detalhe ---------- */
.ficha{display:grid;grid-template-columns:auto 1fr;gap:6px var(--e4);font-size:.88rem}
.ficha dt{color:var(--texto-fraco);font-weight:600;white-space:nowrap}
.ficha dd{color:var(--texto);line-height:1.4}
.ficha__aviso{margin-top:var(--e3);font-size:.82rem;color:var(--azul);font-weight:600}

/* ---------- ação sempre alcançável no detalhe do produto ----------
   Com 27 cores na carta, o botão "Adicionar ao pedido" caía a 1500px do topo
   num celular de 812px: o cliente rolava a carta inteira antes de conseguir
   comprar. Agora ele gruda no rodapé do modal e fica sempre à mão. */
.det__acao{
  position:sticky;bottom:0;z-index:3;
  margin:var(--e6) calc(var(--e6) * -1) calc(var(--e6) * -1);
  padding:var(--e3) var(--e6) calc(var(--e3) + env(safe-area-inset-bottom));
  background:var(--branco);
  border-top:1px solid var(--borda);
  box-shadow:0 -6px 20px rgba(6,43,120,.10);
}
.det__acao .btn{width:100%;margin:0}

.link-cor{background:none;border:0;padding:0;font:inherit;color:var(--azul);
  font-weight:600;text-decoration:underline;cursor:pointer}

/* quantas cores, dentro do proprio botao: o numero convida a abrir */
.prod__ncores{opacity:.75;font-weight:500;font-size:.82em}