/* Layout v3 — a disposicao de pagina de categoria do Mercado Livre
   (/c/construcao, /c/ferramentas) com a marca e o conteudo daqui.

   Esta folha e FECHADA: nao importa css/base.css nem nada do site no ar.
   E de proposito. A v3 e um ensaio, e enquanto for ensaio um ajuste aqui
   nao pode ter como alcancar a home que esta vendendo.

   O QUE MUDOU DE IDEIA, E POR QUE

   Titulo nao grita. A v2 poe tudo em caixa alta, peso 900, largura 125 —
   e o que da a leitura industrial, e e tambem o que o Edison chamou de
   "serio demais". Marketplace escreve em caixa de frase, peso 700: o
   peso do titulo vem do tamanho e do espaco em volta, nao do berro.

   Canto arredondado, cartao branco, sombra rasa. A v2 encosta as lajes e
   corta reto. Canto reto le como ficha tecnica; canto arredondado le
   como loja.

   O produto vem para a home. E a mudanca de verdade. A home da v2 tem 14
   lajes de categoria e zero produtos: quem chega ve nomes de secao e
   precisa de dois cliques para ver uma chapa. Aqui cada linha ganha uma
   prateleira rolavel com o que tem dentro.

   Fundo branco, e nao o cinza da home do Mercado Livre. A home deles
   separa tudo em cartoes flutuando no cinza porque e um amontoado de
   anunciantes que precisam parecer independentes. A pagina de categoria
   e branca e de sangria total, porque ali tudo e da mesma loja — que e o
   nosso caso. */

:root {
  --laranja: #F0741E;
  --laranja-forte: #D25C0C;
  --laranja-fraco: #FFF1E4;

  --preto: #000000;
  --grafite: #1A1718;
  --grafite-claro: #2B2728;

  --branco: #FFFFFF;
  --chao: #F4F2EF;
  --linha: #E6E2DC;
  --linha-forte: #CFC9C1;

  --texto: #1F1B1C;
  --texto-medio: #5F5854;
  --texto-fraco: #8C8480;

  /* O papel de "acao secundaria, clicavel, sem peso de botao" e do azul
     no Mercado Livre. Aqui e do laranja escuro: azul numa marca
     laranja/preta seria corpo estranho. */
  --acao: #C85A0C;

  --fonte: "Archivo", system-ui, sans-serif;

  --largura: 1200px;
  --margem: clamp(12px, 3vw, 28px);
  --canto: 6px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .10);
  --sombra-alta: 0 3px 14px rgba(0, 0, 0, .16);
}

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

body {
  margin: 0;
  background: var(--branco);
  color: var(--texto);
  font-family: var(--fonte);
  font-variation-settings: "wdth" 100;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-variation-settings: "wdth" 100; line-height: 1.2; }
p { margin: 0; }

.faixa { max-width: var(--largura); margin-inline: auto; padding-inline: var(--margem); }

.so-leitor {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

:focus-visible { outline: 3px solid var(--grafite); outline-offset: 2px; }


/* ── Cabecalho ────────────────────────────────────────────────────────
   Faixa inteira na cor da marca, como o amarelo do Mercado Livre. E o
   movimento que mais muda a cara do site de uma vez: a v2 tem topo
   branco com um logo laranja dentro, e o laranja some; aqui o laranja E
   o topo.

   Tres andares, cada um respondendo a uma pergunta:
     fino  — "voces entregam onde?"  (a primeira pergunta de quem esta na obra)
     meio  — "onde eu procuro?"      (a busca, que e o que marketplace vende)
     baixo — "o que voces tem?"      (as linhas) */

.topo { background: var(--laranja); position: sticky; top: 0; z-index: 90; }

.topo-servico { background: var(--laranja-forte); color: #fff; font-size: .76rem; }
.topo-servico .faixa {
  display: flex; align-items: center; gap: 8px 18px;
  min-height: 28px; flex-wrap: wrap;
}
.topo-servico svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.topo-servico span { display: inline-flex; align-items: center; gap: 6px; }
.topo-servico a { text-decoration: underline; text-underline-offset: 2px; }

.topo-meio { display: flex; align-items: center; gap: 14px; padding-block: 9px; }

/* A identificacao da loja, no lugar onde estava so o logo.

   Cartao branco sobre o laranja: e o mesmo recurso da "pilula" do
   Mercado Livre, que la flutua sobre a foto de capa. Sem a capa, o
   contraste tem de vir do proprio cabecalho — e branco sobre laranja da
   isso de graca, alem de casar com a barra de busca ao lado. */
.topo-marca {
  flex: none;
  display: inline-flex; align-items: center; gap: 10px;
  /* O respiro lateral nao e estetico, e geometrico: num balao de 56px de
     altura, "border-radius: 999px" vira um canto de 28px de raio. Com os
     5px de antes, o logo entrava por baixo da curva e tinha as pontas
     comidas pela propria moldura. 16px o poe depois do ponto mais
     fechado do arco. */
  padding: 5px 18px 5px 16px;
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--sombra);
}
/* O logo inteiro, na altura em que o nome ainda se le.

   Quatro tentativas levaram ate aqui, e as tres primeiras erravam na
   mesma suposicao: que a marca cabia num espaco pequeno se a moldura
   fosse a certa. Circulo com a imagem encolhida deu um risco de catorze
   pixels; circulo com a imagem ampliada cortou as pontas; retangulo com
   padding sobrou folga, porque a caixa era 1,93 por 1 e o recorte, 2,24.

   O erro nao estava em nenhuma moldura — estava em usar so o telhado. O
   arquivo da marca e um lockup vertical, com "ATACADAO DRYWALL" fazendo
   parte dela; recortar o telhado joga o nome fora, e telhado solto nao
   lembra loja nenhuma.

   Com o logo inteiro a 46px, o nome se le e nao ha recorte nenhum a
   enquadrar. O "Atacadao Drywall" que ficava ao lado saiu: era o mesmo
   nome duas vezes.

   marca.png, quadrado, continua existindo so para o icone da aba — ali
   o lockup vira mancha cinza a 16px, e o telhado sozinho e a unica
   parte que sobrevive. Cada arquivo para o que serve. */
.marca-logo { flex: none; display: block; height: 46px; }
.marca-logo img { height: 100%; width: auto; display: block; }
.marca-texto { display: grid; }
.marca-selo {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .62rem; font-weight: 700; line-height: 1.3;
  color: var(--acao);
}
.marca-selo svg { width: 12px; height: 12px; fill: currentColor; }
.marca-texto strong { font-size: .94rem; font-weight: 800; letter-spacing: -.012em; line-height: 1.15; }
.marca-dados { display: flex; align-items: center; gap: 9px; font-size: .68rem; color: var(--texto-fraco); line-height: 1.3; }
.marca-nota { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--texto-medio); }
.marca-nota svg { width: 11px; height: 11px; fill: var(--laranja); }

.topo-busca {
  flex: 1 1 480px; min-width: 0;
  display: flex; align-items: center; height: 38px;
  background: #fff; border-radius: var(--canto);
  box-shadow: var(--sombra); overflow: hidden;
}
.topo-busca input {
  flex: 1; min-width: 0; height: 100%; padding: 0 14px;
  border: 0; outline: 0; background: none;
  /* 16px: abaixo disso o Safari do iPhone da zoom sozinho ao focar. */
  font-size: 16px; color: var(--texto);
}
.topo-busca input::placeholder { color: var(--texto-fraco); }
.topo-busca button {
  width: 44px; height: 100%;
  display: grid; place-items: center;
  border-left: 1px solid var(--linha);
}
.topo-busca svg { width: 18px; height: 18px; fill: none; stroke: var(--texto-medio); stroke-width: 2; }

.topo-acoes { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.topo-botao {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 11px;
  border-radius: var(--canto);
  font-size: .8rem; font-weight: 700; color: var(--preto);
  transition: background .15s;
}
.topo-botao:hover { background: rgba(0, 0, 0, .09); }
.topo-botao svg { width: 20px; height: 20px; flex: none; }
.topo-botao--zap svg { fill: currentColor; }
.topo-botao--oc svg { fill: none; stroke: currentColor; stroke-width: 1.8; }

.oc-conta {
  position: absolute; top: 1px; right: 1px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--preto); color: #fff;
  border-radius: 999px;
  font-size: .62rem; font-weight: 800; line-height: 1;
}

/* A faixa laranja de departamentos saiu.

   Ela listava as quatorze linhas logo abaixo da busca, e a barra branca
   da loja listava quatro delas de novo trinta pixels adiante: a mesma
   navegacao duas vezes, em duas cores. O Edison viu de primeira.

   Ficou a barra branca, que e a da loja. As dez linhas que sobraram
   estao no menu de "Todos os produtos" — ver .barra-menu abaixo. */

/* ── Banner ───────────────────────────────────────────────────────────
   Carrossel de sangria total, como o cartaz do topo da categoria: um por
   vez, bolinhas embaixo, setas nas laterais, troca sozinho. */

.banner { position: relative; background: var(--grafite); overflow: hidden; }
.banner-trilho {
  display: flex;
  scroll-snap-type: x mandatory;
  overflow-x: auto; scrollbar-width: none;
  scroll-behavior: smooth;
}
.banner-trilho::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 100%; scroll-snap-align: start;
  position: relative;
  min-height: clamp(230px, 29vw, 340px);
  display: grid; align-items: center;
  color: #fff; overflow: hidden;
}
.slide-fundo { position: absolute; inset: 0; }
.slide-fundo img, .slide-fundo video { width: 100%; height: 100%; object-fit: cover; }
.slide-veu {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,0,0,.88) 16%, rgba(0,0,0,.58) 52%, rgba(0,0,0,.12) 100%);
}
.slide-corpo { position: relative; display: grid; gap: 11px; max-width: 48ch; padding-block: 32px; }

/* A segunda linha do titulo da capa, em laranja.

   O painel sempre disse "Segunda linha — sai em laranja" e a home nunca
   fez: o h1 era uma frase so. O <em> vem de js/loja/home.js, que divide
   o titulo em duas partes, e normal() tira o italico que o navegador
   poe por padrao — aqui o destaque e a cor, nao a inclinacao. */
.slide-corpo h1 em,
.slide-corpo h2 em { color: var(--laranja); font-style: normal; }

/* O contador de itens dentro do texto de apoio. O painel pode move-lo
   escrevendo {itens} onde quiser; sem isso ele fica onde o texto de
   fabrica o poe. */
.slide-corpo p strong { font-weight: 800; }
.slide-selo {
  justify-self: start; padding: 3px 11px;
  background: var(--laranja); color: var(--preto);
  border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.slide h2 { font-size: clamp(1.5rem, 3.5vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; }
.slide p { color: rgba(255, 255, 255, .80); font-size: .95rem; max-width: 44ch; }
.slide-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.banner-seta {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 38px; height: 38px; z-index: 3;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .88); border-radius: 999px;
  box-shadow: var(--sombra-alta);
  opacity: 0; transition: opacity .18s;
}
.banner:hover .banner-seta, .banner-seta:focus-visible { opacity: 1; }
.banner-seta svg { width: 18px; height: 18px; fill: none; stroke: var(--grafite); stroke-width: 2.4; }
.banner-seta--antes { left: 14px; }
.banner-seta--depois { right: 14px; }
@media (hover: none) { .banner-seta { display: none; } }

.banner-dots {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3;
  display: flex; justify-content: center; gap: 7px;
}
.banner-dots button {
  width: 8px; height: 8px; padding: 0;
  border-radius: 999px; background: rgba(255, 255, 255, .45);
  transition: background .2s, width .2s;
}
.banner-dots button[aria-current="true"] { width: 22px; background: var(--laranja); }


/* ── Botoes ───────────────────────────────────────────────────────────
   Menores que os da v2 e com canto: o botao de marketplace e um alvo,
   nao um monumento. */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 18px;
  border-radius: var(--canto);
  font-size: .82rem; font-weight: 700;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.botao svg { width: 17px; height: 17px; flex: none; }
.botao-cheio { background: var(--laranja); color: var(--preto); }
.botao-cheio:hover { background: #fff; }
.botao-claro { background: rgba(255, 255, 255, .13); color: #fff; border: 1px solid rgba(255, 255, 255, .45); }
.botao-claro:hover { background: #fff; color: var(--preto); border-color: #fff; }
.botao-zap { background: #25D366; color: #06301A; }
.botao-zap:hover { background: #1FBA58; }
.botao-zap svg { fill: currentColor; }
.botao-vazio { border: 1px solid var(--linha-forte); color: var(--texto); }
.botao-vazio:hover { background: var(--chao); }


/* ── Secao ────────────────────────────────────────────────────────────
   O ritmo da pagina de categoria: titulo, bloco, titulo, bloco. Dois
   tipos de titulo, e a diferenca entre eles nao e decorativa.

   Titulo a ESQUERDA com "ver todos" a direita abre o que e recorte de um
   conjunto maior — a prateleira mostra 12 de 502, e o link e a saida.

   Titulo CENTRADO abre o que esta inteiro ali: a grade de linhas nao tem
   "ver mais", porque ja sao todas. Centrar e o que avisa disso sem
   precisar escrever. */

.secao { padding-block: clamp(26px, 3.4vw, 44px); }
.secao--chao { background: var(--chao); }
.secao--linha { border-top: 1px solid var(--linha); }

.secao-topo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.secao-topo h2 { font-size: 1.24rem; font-weight: 700; letter-spacing: -.01em; }
.secao-topo p { color: var(--texto-medio); font-size: .84rem; }
.secao-topo .ver-todos { margin-left: auto; font-size: .83rem; font-weight: 700; color: var(--acao); }
.secao-topo .ver-todos:hover { text-decoration: underline; }

.secao-centro { text-align: center; margin-bottom: 20px; }
.secao-centro h2 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); font-weight: 800; letter-spacing: -.015em; }
.secao-centro p { margin-top: 5px; color: var(--texto-medio); font-size: .86rem; }


/* ── Atalhos redondos ─────────────────────────────────────────────────
   A fileira de circulos que no Mercado Livre e "Ofertas para aproveitar
   agora". La sao promocoes; aqui sao os caminhos curtos — o que o
   visitante ja sabe que quer antes de abrir o catalogo. */

.atalhos {
  display: flex; gap: 4px; justify-content: center;
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.atalhos::-webkit-scrollbar { display: none; }
.atalho {
  flex: none; width: 96px; scroll-snap-align: center;
  display: grid; justify-items: center; gap: 8px;
  padding: 8px 4px; border-radius: var(--canto);
  text-align: center; transition: background .15s;
}
.atalho:hover { background: var(--laranja-fraco); }
.atalho-bolha {
  width: 68px; height: 68px;
  display: grid; place-items: center;
  background: var(--chao);
  border: 1px solid var(--linha);
  border-radius: 999px;
  transition: border-color .15s, background .15s;
}
.atalho:hover .atalho-bolha { background: #fff; border-color: var(--laranja); }
.atalho-bolha svg { width: 26px; height: 26px; fill: none; stroke: var(--grafite); stroke-width: 1.6; }
.atalho:hover .atalho-bolha svg { stroke: var(--laranja-forte); }
/* A foto quase encosta na borda do circulo: recorte de produto ja vem
   com margem branca de sobra, e deixar mais 20% de folga aqui faz a peca
   virar um ponto no meio do nada. O multiply apaga o fundo branco do
   recorte contra o cinza da bolha. */
.atalho-bolha img { width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.atalho b { font-size: .76rem; font-weight: 600; line-height: 1.2; color: var(--texto-medio); }
.atalho:hover b { color: var(--texto); }

/* Em tela estreita a fileira deixa de ser centrada: centrada com
   overflow, o primeiro item fica cortado e inalcancavel pelo dedo. */
@media (max-width: 760px) { .atalhos { justify-content: flex-start; } }


/* ── Prateleira ───────────────────────────────────────────────────────
   O arranjo que carrega a pagina de categoria: fila de cartoes que rola
   de lado, com setas que so aparecem onde ha mouse.

   E scroll nativo com scroll-snap, e nao carrossel em JavaScript. A fila
   precisa funcionar com o dedo no celular, com a roda do mouse na
   horizontal, com Tab no teclado e com o JavaScript falhando — e scroll
   nativo faz os quatro sem uma linha de codigo. As setas so empurram
   esse mesmo scroll. */

.prateleira-caixa { position: relative; }

.prateleira {
  display: grid; grid-auto-flow: column; grid-auto-columns: 182px;
  gap: 12px;
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding-block: 2px 6px;
}
.prateleira::-webkit-scrollbar { display: none; }

.prateleira-seta {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 36px; height: 36px; z-index: 4;
  display: grid; place-items: center;
  background: #fff; border-radius: 999px;
  box-shadow: var(--sombra-alta);
  opacity: 0; transition: opacity .18s;
}
.prateleira-caixa:hover .prateleira-seta, .prateleira-seta:focus-visible { opacity: 1; }
.prateleira-seta[disabled] { display: none; }
.prateleira-seta--antes { left: -13px; }
.prateleira-seta--depois { right: -13px; }
.prateleira-seta svg { width: 18px; height: 18px; fill: none; stroke: var(--texto); stroke-width: 2.4; }

/* Sem mouse nao ha hover: no celular a seta nunca apareceria e ficaria
   ocupando o canto do primeiro cartao. */
@media (hover: none) { .prateleira-seta { display: none; } }


/* ── Cartao de produto ────────────────────────────────────────────────
   Mesmo esqueleto do cartao do marketplace, menos o preco — este site
   nao tem preco, e fingir que tem seria mentir no lugar mais visivel da
   pagina. O lugar do preco fica com o que de fato se oferece: a resposta
   no WhatsApp. */

.produto {
  position: relative;
  display: grid; grid-template-rows: auto 1fr auto;
  scroll-snap-align: start;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--canto);
  overflow: hidden;
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.produto:hover { border-color: var(--linha-forte); box-shadow: var(--sombra-alta); transform: translateY(-2px); }

/* Moldura quadrada, e nao 148px fixos.

   Fixa, ela nao acompanhava a largura do cartao: num cartao de 196px
   sobrava uma faixa baixa e larga, e chapa (que e alta) so cabia
   encolhendo. Quadrada, a foto ganha 170x170 em vez de 170x124 — o
   mesmo cartao, com a peca maior dentro. */
.produto-foto {
  display: grid; place-items: center;
  aspect-ratio: 1; padding: 14px;
  background: #fff;
  overflow: hidden;
}
/* width/height 100% com object-fit, e nao os maximos.

   ERA AQUI o texto por cima da imagem que o Edison viu. Medido: a
   moldura tinha 194x148, mas a imagem saia 170x171 — vinte e quatro
   pixels DENTRO do nome do produto.

   Com max-width/max-height o navegador parte do tamanho natural
   (225x226), corta pela largura (170) e deixa a altura proporcional
   (171). O max-height: 100% deveria cortar em 124, mas a moldura e
   display:grid com linha auto-dimensionada: a porcentagem nao tem
   contra o que medir e e ignorada. Mesma causa da logo esticada e da
   imagem estourando o cartao de linha — terceira vez.

   Mandar ocupar a caixa inteira e deixar o object-fit encolher dentro
   dela nao depende de porcentagem nenhuma. */
.produto-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.produto-sem-foto {
  display: grid; place-items: center; align-content: center; gap: 3px;
  height: 100%; width: 100%; padding: 8px;
  background: var(--chao); border-radius: var(--canto);
  text-align: center;
}
.produto-sem-foto span { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-fraco); }
.produto-sem-foto b { font-size: .9rem; font-weight: 800; color: var(--laranja-forte); overflow-wrap: anywhere; }

.produto-corpo { display: grid; gap: 3px; align-content: start; padding: 10px 12px 2px; }
.produto-linha { font-size: .63rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--texto-fraco); }
.produto-nome {
  font-size: .84rem; font-weight: 600; line-height: 1.28;
  /* Duas linhas com reticencias: cartao de altura irregular quebra a
     fileira, e nome de material de obra vai de 12 a 90 caracteres. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.produto-medidas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.produto-medidas span {
  padding: 1px 7px; background: var(--chao); border-radius: 999px;
  font-size: .66rem; font-weight: 600; color: var(--texto-medio);
}
.produto-consulta { margin-top: 3px; font-size: .72rem; color: var(--texto-fraco); }

.produto-pe { position: relative; z-index: 2; padding: 8px 12px 12px; }
.produto-pe .botao { width: 100%; height: 32px; font-size: .76rem; }

/* O botao nasce vazado e so enche de laranja no hover.

   Doze botoes laranjas em fila gritam mais que a prateleira inteira, e o
   laranja deixa de significar "aqui" quando esta em todo lugar — ele
   precisa sobrar para os cartazes. Vazado, o cartao le como produto; o
   laranja aparece no que o ponteiro esta mirando. */
.produto-pe .botao-vazio:hover { background: var(--laranja); border-color: var(--laranja); color: var(--preto); }
.produto-pe .esta-na-lista {
  background: var(--laranja-fraco);
  border-color: var(--laranja);
  color: var(--laranja-forte);
}
.produto-pe .esta-na-lista:hover { background: var(--laranja-fraco); color: var(--laranja-forte); }

/* O cartao inteiro e clicavel, mas quem recebe o clique e o link do
   nome — assim o leitor de tela anuncia "link: Chapa ST 1200x1800" e nao
   "link" sem nome. O ::after so estica a area sensivel. */
.produto-abrir::after { content: ""; position: absolute; inset: 0; z-index: 1; }


/* Os ladrilhos de linha sairam daqui: viraram .linha-cartao, na secao
   LOJA OFICIAL mais abaixo. O bloco antigo ficou sem uso nenhum no HTML
   e no JavaScript, e CSS morto so serve para alguem copiar dele depois.

*/

/* ── Aplicacoes ───────────────────────────────────────────────────────
   O lugar que na pagina deles e "as melhores marcas estao aqui".

   Aqui marca nao serve: o catalogo tem duas (Dewalt e Atlas) e uma
   fileira de duas logos le como loja vazia. O que o catalogo tem de
   verdade, e que o site de hoje quase nao mostra, e a APLICACAO —
   parede, forro, steel frame. E tambem como o cliente pensa: ele nao
   chega pedindo "perfil", chega dizendo "vou fechar uma parede". */

.aplicacoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.aplicacao {
  display: grid; gap: 6px; align-content: start;
  padding: 18px 18px 20px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--canto);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.aplicacao:hover { border-color: var(--laranja); box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.aplicacao-icone {
  width: 42px; height: 42px; margin-bottom: 4px;
  display: grid; place-items: center;
  background: var(--laranja-fraco); border-radius: var(--canto);
}
.aplicacao-icone svg { width: 23px; height: 23px; fill: none; stroke: var(--laranja-forte); stroke-width: 1.7; }
.aplicacao h3 { font-size: 1rem; font-weight: 700; }
.aplicacao p { font-size: .83rem; color: var(--texto-medio); }
.aplicacao em { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--acao); }


/* ── Par de banners ───────────────────────────────────────────────────
   "Aproveite tambem!" — dois cartazes lado a lado. No Mercado Livre sao
   anuncios; aqui sao as duas coisas que a loja oferece alem do material:
   o curso e o orcamento. */

.cartazes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cartaz {
  position: relative; overflow: hidden;
  display: grid; align-content: center; gap: 8px;
  min-height: 168px; padding: 24px;
  border-radius: var(--canto);
  color: #fff;
}
.cartaz--escuro { background: linear-gradient(115deg, var(--grafite) 40%, var(--grafite-claro)); }
.cartaz--laranja { background: linear-gradient(115deg, var(--laranja-forte) 30%, var(--laranja)); color: var(--preto); }
.cartaz b { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.cartaz h3 { font-size: 1.22rem; font-weight: 800; letter-spacing: -.015em; max-width: 22ch; }
.cartaz p { font-size: .85rem; max-width: 34ch; opacity: .78; }
.cartaz .botao { justify-self: start; margin-top: 6px; }
.cartaz--laranja .botao { background: var(--preto); color: #fff; }
.cartaz--laranja .botao:hover { background: #fff; color: var(--preto); }

@media (max-width: 720px) { .cartazes { grid-template-columns: 1fr; } }


/* ── Rodape ───────────────────────────────────────────────────────────── */

.rodape { background: var(--chao); border-top: 3px solid var(--laranja); }
.rodape-grade { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 24px; padding-block: 30px; }
.rodape-marca img { height: 36px; width: auto; margin-bottom: 10px; }
.rodape-marca p { font-size: .82rem; color: var(--texto-medio); max-width: 34ch; }
.rodape h4 { font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 10px; }
.rodape li { font-size: .82rem; color: var(--texto-medio); margin-bottom: 6px; }
.rodape li a:hover { color: var(--acao); text-decoration: underline; }
.rodape-fim {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  padding-block: 14px; border-top: 1px solid var(--linha);
  font-size: .76rem; color: var(--texto-fraco);
}
@media (max-width: 760px) { .rodape-grade { grid-template-columns: 1fr 1fr; } }


/* ── Avisos ───────────────────────────────────────────────────────────── */

.carregando, .nada {
  display: grid; place-items: center; gap: 4px;
  min-height: 150px;
  color: var(--texto-fraco); font-size: .85rem; text-align: center;
}
.nada strong { color: var(--texto); font-size: .95rem; }

/* Etiqueta que diz, na propria tela, que isto nao e o site no ar. Sem
   ela um print da v3 passa por print da producao — e ja foi assim que
   decisao de layout virou "mas eu vi no site". */
/* Abaixo das gavetas (94–97), e nao acima.

   Com z-index 100 a etiqueta ficava por cima do rodape da gaveta de
   orcamento no celular, tapando o "Limpar a lista". Ela e um aviso de
   ensaio: tem de estar sempre visivel na pagina, e nunca na frente de
   algo com que se interage. */
.selo-ensaio {
  position: fixed; left: 10px; bottom: 10px; z-index: 93;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px;
  background: var(--grafite); color: #fff;
  border-radius: 999px; box-shadow: var(--sombra-alta);
  font-size: .72rem; font-weight: 700;
}
.selo-ensaio b { color: var(--laranja); }
.selo-ensaio a { color: rgba(255,255,255,.6); text-decoration: underline; }

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

@media (max-width: 640px) {
  .topo-meio { flex-wrap: wrap; }
  .topo-busca { order: 5; flex-basis: 100%; }
  .topo-acoes .topo-rotulo { display: none; }
  .prateleira { grid-auto-columns: 156px; }
  .ladrilhos { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ladrilho-tarja b { font-size: .7rem; }
  .ladrilho-tarja i { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   LOJA OFICIAL
   A segunda referencia que o Edison trouxe, e a melhor das quatro:
   mercadolivre.com.br/loja/stanley-loja-oficial.

   E uma loja so, com catalogo proprio, sem concorrente disputando a
   mesma tela — que e exatamente o caso daqui. O ritmo dela e simples e
   se repete: capa, barra de navegacao da propria loja, e entao banner de
   campanha, prateleira com titulo tematico, banner, prateleira.

   Nao ha "ofertas do dia" nem leilao de anunciante. Cada faixa e a loja
   falando de si.
   ═══════════════════════════════════════════════════════════════════════ */

/* A capa da loja saiu.

   Ela era foto larga + pilula branca sobreposta, como na Stanley. O
   Edison tirou primeiro o veu, depois a foto, e o que sobrou era uma
   tarja escura vazia segurando a pilula — duzentos pixels antes de
   qualquer coisa da loja aparecer. A pilula virou a marca no cabecalho
   (ver .topo-marca acima) e a secao inteira deixou de existir.

*/

/* ── Barra da loja ────────────────────────────────────────────────────
   A navegacao DA LOJA, separada da do site: um punhado de secoes, nao as
   quatorze linhas. Na v2 as quatorze competem no mesmo nivel e nenhuma
   ganha — aqui a barra leva as quatro que importam e manda o resto para
   "todos os produtos". */

/* Nao e grudenta, ao contrario da da Stanley. La o cabecalho do site
   rola embora e so a barra da loja fica; aqui o topo ja tem tres andares
   e e ele que gruda. Duas barras presas somam 160px — num celular
   deitado sobra menos pagina do que cabecalho. */
.barra-loja {
  position: relative; z-index: 70;
  background: #fff;
  border-block: 1px solid var(--linha);
}
/* Filho DIRETO, e nao descendente.

   O menu de "Todos os produtos" mora dentro deste mesmo <nav> e o
   invólucro dele tambem tem classe .faixa. Com ".barra-loja .faixa" a
   regra alcancava os dois: a grade do menu virava item de um flex
   container com overflow-x, encolhia ate caber no proprio conteudo e
   saia em coluna unica de 191px. O ">" para no filho direto. */
.barra-loja > .faixa {
  display: flex; align-items: center; gap: 2px;
  min-height: 42px;
  overflow-x: auto; scrollbar-width: none;
}
.barra-loja > .faixa::-webkit-scrollbar { display: none; }
.barra-loja > .faixa a {
  flex: none; position: relative;
  padding: 11px 12px;
  font-size: .83rem; font-weight: 600; color: var(--texto-medio);
  white-space: nowrap;
  transition: color .15s;
}
.barra-loja > .faixa a:hover { color: var(--texto); }
.barra-loja > .faixa a[aria-current="page"] { color: var(--texto); font-weight: 700; }
.barra-loja > .faixa a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 3px; background: var(--laranja); border-radius: 3px 3px 0 0;
}
.barra-loja > .faixa .barra-fim {
  margin-left: auto; display: flex; align-items: center; gap: 12px;
  padding-left: 16px; font-size: .78rem; color: var(--texto-fraco);
  white-space: nowrap;
}
.barra-loja > .faixa .barra-fim .botao { height: 30px; padding: 0 14px; font-size: .76rem; }

/* "Todos os produtos" e botao, e nao link: ele abre um menu, nao navega.
   Com <a href> o leitor de tela anunciava "link" e o teclado prometia
   uma pagina que nunca vinha. */
.barra-todos {
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 11px 12px;
  font-size: .83rem; font-weight: 600; color: var(--texto-medio);
  white-space: nowrap;
  transition: color .15s;
}
.barra-todos:hover { color: var(--texto); }
.barra-todos svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: rotate .18s; }
.barra-todos[aria-expanded="true"] { color: var(--texto); }
.barra-todos[aria-expanded="true"] svg { rotate: 180deg; }

/* O menu das demais linhas.

   Painel ancorado no botao, e nao faixa de ponta a ponta. A primeira
   versao ocupava a largura inteira e descia oitocentos pixels: parecia
   uma segunda pagina abrindo por cima da primeira, e para quatorze
   nomes curtos nao ha o que justifique isso. Duas colunas num painel de
   480px dao a mesma lista em um quinto da area.

   Absoluto, e nao empurrando a pagina: menu que desloca o conteudo faz o
   visitante perder o lugar onde estava lendo.

   O "left" vem do JavaScript, medindo onde o botao esta — e preciso
   porque o botao fica dentro de uma barra que rola de lado, e a posicao
   dele muda. */
.barra-menu {
  position: absolute; top: calc(100% + 6px);
  z-index: 75;
  width: min(480px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--canto);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}
.barra-menu-grade {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding: 8px;
}
.barra-menu-grade a {
  display: flex; align-items: baseline; gap: 6px;
  padding: 7px 10px;
  border-radius: var(--canto);
  transition: background .14s;
}
.barra-menu-grade a:hover { background: var(--laranja-fraco); }
.barra-menu-grade b { font-size: .82rem; font-weight: 600; }
.barra-menu-grade i {
  margin-left: auto;
  font-style: normal; font-size: .7rem; color: var(--texto-fraco);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .barra-menu-grade { grid-template-columns: 1fr; }
}
/* O horario e o primeiro a sair: entre saber o expediente e conseguir
   falar com alguem, o botao vale mais — e o expediente continua na
   faixa de servico, dois andares acima. */
@media (max-width: 1180px) { .barra-loja > .faixa .barra-fim .barra-hora { display: none; } }
@media (max-width: 860px) { .barra-loja > .faixa .barra-fim { display: none; } }

/* ── Faixa de campanha ────────────────────────────────────────────────
   O cartaz de sangria total que separa uma prateleira da seguinte. Na
   Stanley e amarelo com a ferramenta recortada; aqui e laranja ou
   grafite, com o recado da loja.

   Existe por um motivo de leitura, e nao de decoracao: tres prateleiras
   seguidas viram uma coisa so, e o visitante para de distinguir onde uma
   acaba. A faixa e a respiracao entre elas. */

.campanha { position: relative; overflow: hidden; color: #fff; }
.campanha--laranja { background: var(--laranja); color: var(--preto); }
.campanha--escuro { background: var(--grafite); }
.campanha-fundo { position: absolute; inset: 0; }
.campanha-fundo img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.campanha .faixa {
  position: relative;
  display: flex; align-items: center; gap: 18px 26px; flex-wrap: wrap;
  padding-block: clamp(20px, 3vw, 34px);
}
.campanha-texto { display: grid; gap: 5px; }
.campanha b { font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; opacity: .72; }
.campanha h2 { font-size: clamp(1.25rem, 2.6vw, 1.85rem); font-weight: 800; letter-spacing: -.02em; }
.campanha p { font-size: .88rem; opacity: .76; max-width: 52ch; }
.campanha .botao { margin-left: auto; }
.campanha--laranja .botao-cheio { background: var(--preto); color: #fff; }
.campanha--laranja .botao-cheio:hover { background: #fff; color: var(--preto); }
@media (max-width: 720px) { .campanha .botao { margin-left: 0; } }

/* ── Cartao de linha ──────────────────────────────────────────────────
   O "Compre por Categoria!" da Stanley: foto do produto sobre fundo na
   cor da marca, nome embaixo, "Ver produtos".

   Resolve o problema que a v2 tem com foto. A loja so tem foto de CENA
   de uma linha (a Dewalt); as outras treze tem recorte de produto em
   fundo branco, que numa laje grande fica pequeno e solto no meio do
   nada. Sobre o laranja o recorte vira silhueta e preenche o cartao —
   sem precisar fotografar nada. */

.linhas-cartoes {
  display: grid; grid-auto-flow: column; grid-auto-columns: 232px;
  gap: 12px;
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding-bottom: 6px;
}
.linhas-cartoes::-webkit-scrollbar { display: none; }

.linha-cartao {
  /* O snap vive no cartao, nao na fila: sem ele o scroll-snap-type da
     fila nao tem em que encaixar, e a seta para meio cartao adiante. */
  scroll-snap-align: start;
  display: grid; grid-template-rows: auto auto auto;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--canto);
  overflow: hidden;
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.linha-cartao:hover { border-color: var(--linha-forte); box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.linha-cartao-foto {
  display: grid; place-items: center;
  /* Mais alta que larga era o erro: com 168px de altura e 232 de
     largura, uma foto quadrada (e quase todas sao) so cabia encolhendo
     ate virar um selo no meio do laranja. A moldura agora acompanha a
     proporcao da foto. */
  aspect-ratio: 4 / 3; height: auto;
  padding: 16px;

  /* Fundo branco, e nao o laranja da marca.

     O laranja veio da Stanley, que poe a ferramenta direto no amarelo. La
     funciona porque os recortes dela sao PNG com transparencia; os nossos
     vem com fundo branco chapado, e a unica forma de esconder esse fundo
     era o mix-blend-mode: multiply — que apaga o branco mas tinge TODA a
     peca de laranja. Chapa cinza virava chapa laranja.

     Nao da para ter as duas coisas sem reeditar 1.305 fotos. Entre o
     bloco de cor e a cor verdadeira do produto, numa loja de material a
     cor do produto vale mais: quem procura chapa RU precisa ver que ela
     e rosa. O laranja continua no cabecalho, nos cartazes e nos botoes,
     que e onde ele nao atropela informacao. */
  background: #fff;
  overflow: hidden;
}
.linha-cartao-foto img {
  /* 100% dos dois lados com object-fit, e nao max-width/max-height.

     Com os maximos, o navegador parte do tamanho natural (450x450),
     corta pela largura e so entao tenta a altura — e no meio disso a
     imagem ja estourou a moldura e foi cortada pelo overflow. Mandar
     ocupar a caixa inteira e deixar o object-fit encolher dentro dela
     nao tem como estourar. */
  width: 100%; height: 100%;
  object-fit: contain;
  /* Multiply so para casar a margem branca do recorte com o branco da
     moldura. Em fundo branco ele nao altera cor nenhuma — multiplicar
     por branco devolve a propria cor. */
  mix-blend-mode: multiply;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.linha-cartao:hover .linha-cartao-foto img { transform: scale(1.06); }
/* A unica linha com foto de cena ganha a foto inteira, sem moldura. */
.linha-cartao--cena .linha-cartao-foto { padding: 0; background: var(--grafite); }
.linha-cartao--cena .linha-cartao-foto img {
  object-fit: cover;

  /* SEM multiply aqui, e e o ponto todo desta regra.

     O multiply existe para apagar o fundo branco do recorte de produto
     contra o laranja. A foto de cena nao tem fundo branco para apagar —
     ela e uma fotografia inteira, e multiplicada pelo grafite do cartao
     virava uma pelicula escura por cima de tudo. Era o que o Edison
     chamou de "mascara negra sobre a Dewalt". */
  mix-blend-mode: normal;
}
.linha-cartao h3 { padding: 12px 14px 2px; font-size: .92rem; font-weight: 700; }

/* Classe propria, e nao ".linha-cartao span".

   O seletor por elemento alcancava tambem .linha-cartao-foto, que e um
   <span>: a moldura da foto herdava o padding "0 14px 14px" deste link e
   perdia o seu. Dava para ver no inspetor — o fundo laranja aparecia com
   font-weight 700 e cor de link, que moldura nenhuma deveria ter. E foi
   esse padding trocado que apertou a altura e ajudou a estourar a
   imagem. Seletor por elemento dentro de componente pega o que nao devia
   mais cedo ou mais tarde. */
.linha-cartao-ver { padding: 0 14px 14px; font-size: .78rem; font-weight: 700; color: var(--acao); }
.linha-cartao:hover .linha-cartao-ver { text-decoration: underline; }

/* No celular a faixa de servico ocupava tres linhas antes de qualquer
   coisa da loja aparecer — mais altura que o cabecalho inteiro. Sobra o
   que responde a pergunta ("entregamos na sua obra"); a lista de cidades
   e o expediente continuam no rodape, onde quem procura vai olhar. */
@media (max-width: 640px) {
  .topo-servico .servico-extra { display: none; }
  .topo-servico #servico-hora { display: none; }
}


/* ── Gaveta de orcamento ──────────────────────────────────────────────
   A unica conversao do site, e ate agora a peca mais fraca da v3: o
   botao do topo disparava um alert() e abria o WhatsApp com um texto
   corrido. Quem juntava quinze itens nao tinha como conferir, mudar
   quantidade nem tirar o que entrou errado.

   Gaveta, e nao pagina: a lista se monta ENQUANTO a pessoa navega, e
   mandar ela para outra tela a cada item e perder o lugar na listagem.
   O carrinho do Mercado Livre e pagina porque la ha frete, endereco,
   pagamento e parcelamento para decidir. Aqui ha nome, medida e
   quantidade. */

.veu-oc { z-index: 96; }

.oc {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 97;
  width: min(420px, 100vw);
  display: grid; grid-template-rows: auto 1fr auto;
  background: #fff;
  box-shadow: var(--sombra-alta);
  translate: 100% 0;
  transition: translate .24s cubic-bezier(.3, .8, .3, 1);
}
.oc[data-aberta="true"] { translate: 0 0; }

.oc-topo {
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--linha);
}
.oc-topo h2 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em; }
.oc-resumo { font-size: .76rem; color: var(--texto-fraco); }
.oc-fechar { margin-left: auto; align-self: center; padding: 5px; line-height: 0; }
.oc-fechar svg { width: 20px; height: 20px; fill: none; stroke: var(--texto); stroke-width: 2; }

.oc-corpo { overflow-y: auto; padding: 8px; }

.oc-item {
  display: grid; grid-template-columns: 52px 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--linha);
}
.oc-item:last-child { border-bottom: 0; }

.oc-foto {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--linha); border-radius: var(--canto);
  overflow: hidden;
}
.oc-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.oc-foto svg { width: 22px; height: 22px; fill: none; stroke: var(--texto-fraco); stroke-width: 1.6; }

.oc-texto { display: grid; gap: 2px; min-width: 0; }
.oc-texto a {
  font-size: .82rem; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.oc-texto a:hover { color: var(--acao); }
.oc-medida, .oc-sku { font-size: .7rem; color: var(--texto-fraco); }
.oc-medida { font-weight: 700; color: var(--texto-medio); }

/* Os botoes de quantidade tem 30px de alvo. Nao e capricho: a lista se
   ajusta no celular, com o polegar, muitas vezes dentro da obra. */
.oc-qtd { display: inline-flex; align-items: center; }
.oc-qtd button {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--linha-forte);
  font-size: .95rem; font-weight: 700;
}
.oc-qtd button:first-child { border-radius: var(--canto) 0 0 var(--canto); }
.oc-qtd button:last-child { border-radius: 0 var(--canto) var(--canto) 0; }
.oc-qtd button:hover { background: var(--chao); }
.oc-qtd b {
  min-width: 34px; height: 30px;
  display: grid; place-items: center;
  border-block: 1px solid var(--linha-forte);
  font-size: .82rem; font-weight: 700;
}

.oc-tirar { padding: 5px; line-height: 0; color: var(--texto-fraco); }
.oc-tirar:hover { color: var(--laranja-forte); }
.oc-tirar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }

.oc-vazia {
  display: grid; justify-items: center; gap: 6px;
  padding: 48px 24px; text-align: center;
}
.oc-vazia svg { width: 42px; height: 42px; fill: none; stroke: var(--linha-forte); stroke-width: 1.4; }
.oc-vazia strong { font-size: .98rem; font-weight: 800; }
.oc-vazia p { font-size: .84rem; color: var(--texto-medio); max-width: 28ch; }
.oc-vazia .botao { margin-top: 8px; }

.oc-pe {
  display: grid; gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--linha);
}
.oc-pe[hidden] { display: none; }
.oc-pe .botao { width: 100%; }
.oc-limpar { font-size: .78rem; color: var(--texto-fraco); }
.oc-limpar:hover { color: var(--laranja-forte); text-decoration: underline; }

/* Os dados do cliente, dentro da gaveta.

   O markup vem de js/ui/formulario.js, que e do site no ar; o desenho e
   da v3 — cantos arredondados em vez de quadrados, e os tokens daqui.
   Reaproveitar o markup e redesenhar o visual e exatamente a divisao que
   a promocao pede: a v3 troca a aparencia, nao o funil. */
.oc-form {
  display: grid; gap: 12px;
  padding: 14px 8px 4px;
  border-top: 1px solid var(--linha);
  margin-top: 4px;
}
.oc-form h3 {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-fraco);
}
.campo { display: grid; gap: 4px; }
.campo label { font-size: .8rem; font-weight: 700; color: var(--texto-medio); }
.campo .opcional { font-weight: 400; color: var(--texto-fraco); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--linha); border-radius: var(--canto);
  background: var(--branco); font-family: inherit; color: var(--texto);
  /* 16px impede o zoom automatico do Safari no iOS ao focar o campo.
     Qualquer valor menor faz a pagina pular de escala, e a gaveta sai
     de enquadramento no meio do preenchimento. */
  font-size: 16px;
  transition: border-color .16s, box-shadow .16s;
  -webkit-appearance: none; appearance: none;
}
.campo textarea { resize: vertical; min-height: 60px; }
.campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8480' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
  padding-right: 36px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--laranja);
  box-shadow: 0 0 0 3px rgba(240, 116, 30, .16);
}
/* Diz que a lista de cidades existe ANTES de a pessoa digitar algo fora
   dela e levar um erro na cara. */
.campo .dica { font-size: .71rem; color: var(--texto-fraco); }

.oc-erro {
  font-size: .82rem; font-weight: 700; color: #C0392B;
}
.oc-erro[hidden] { display: none; }