/*
 * Tema SENHOR DAS PEDRAS — manual da marca v1.0 (nov/2026)
 * Monocromático: preto #231F20, branco, Cinza Pedra #B9B9B8, Cinza Claro #E7E4E1, Cinza Concreto #6F6D6D.
 * Oswald Light com tracking amplo nos títulos; Montserrat Light espaçada nos subtítulos; Montserrat no texto.
 * A moldura retangular da logo e a textura geométrica das capas são os elementos gráficos.
 * Tom sofisticado e contido: poucas palavras, sem exclamações.
 */
:root {
  --preto: #231F20;
  --branco: #FFFFFF;
  --pedra: #B9B9B8;
  --claro: #E7E4E1;
  --concreto: #6F6D6D;
  --titulo: "Oswald", "Arial Narrow", sans-serif;
  --corpo: "Montserrat", "Segoe UI", system-ui, sans-serif;
  /* textura geométrica das capas: losangos finos sobre o preto */
  --textura: repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 38px),
             repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 38px);
}
body { background: var(--branco); color: var(--preto); font: 400 1rem/1.6 var(--corpo); }
:focus-visible { outline: 2px solid var(--preto); outline-offset: 3px; }
.sobre-preto :focus-visible { outline-color: var(--branco); }

.tagline { font: 300 .8rem var(--corpo); letter-spacing: .32em; text-transform: uppercase; }

/* porta */
.porta { background-color: var(--preto); background-image: var(--textura); color: var(--branco); }
.porta .logo { width: 230px; }
.porta h1 { font: 300 2rem/1.15 var(--titulo); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 8px; }
.porta p { margin: 0 0 28px; color: var(--pedra); }
.porta label { font-weight: 600; font-size: .9rem; }
.campo { font: 400 1rem var(--corpo); border: 1px solid var(--branco); background: transparent; color: var(--branco); }
.campo:focus { outline: 1px solid var(--branco); outline-offset: 3px; }
.porta-erro { color: #F1B9B9; }
.porta-voltar { color: var(--pedra); }

/* botões: retângulos com fio, caixa alta espaçada */
.botao { font: 500 .82rem var(--corpo); letter-spacing: .24em; text-transform: uppercase; padding: 15px 30px; background: var(--branco); color: var(--preto); border: 1px solid var(--branco); }
.botao:hover { background: var(--claro); }
.botao--preto { background: var(--preto); color: var(--branco); border-color: var(--preto); }
.botao--preto:hover { background: #3A3536; }

/* topo */
.topo { background-color: var(--preto); background-image: var(--textura); color: var(--branco); }
.topo-barra .logo { width: 190px; }
.topo-barra nav a, .topo-barra .link-simples { color: var(--pedra); }
.topo-barra nav a:hover, .topo-barra .link-simples:hover { color: var(--branco); }
.linha-marca { height: 1px; background: var(--pedra); }
.abertura { padding-top: 56px; padding-bottom: 84px; }
.abertura h1 { font: 300 clamp(2.4rem, 6vw, 4.4rem)/1.05 var(--titulo); letter-spacing: .1em; text-transform: uppercase; margin: 14px 0 0; }
.abertura p { color: var(--pedra); font-size: 1.02rem; }
.abertura .tagline { color: var(--pedra); }

/* ferramentas: "LINHA" pequeno acima e o nome em destaque, como nos catálogos */
.secao-titulo { font: 300 .8rem var(--corpo); letter-spacing: .32em; text-transform: uppercase; color: var(--concreto); }
.ferramenta { background: var(--claro); color: var(--preto); outline: 1px solid var(--preto); outline-offset: -10px; padding: 40px 44px 36px; transition: background .2s ease; }
.ferramenta:hover { background: #DCD8D4; }
.ferramenta .tagline { color: var(--concreto); }
.ferramenta h3 { font: 300 clamp(1.6rem, 3.4vw, 2.3rem)/1.15 var(--titulo); letter-spacing: .08em; text-transform: uppercase; margin-top: 10px; }
.ferramenta p { color: var(--concreto); }
.em-breve { border-top: 1px solid var(--preto); }
.em-breve li { border-bottom: 1px solid var(--claro); }
.em-breve h3 { font: 400 1.15rem var(--titulo); letter-spacing: .08em; text-transform: uppercase; }
.em-breve p { color: var(--concreto); }
.selo { font: 300 .75rem var(--corpo); letter-spacing: .24em; text-transform: uppercase; color: var(--concreto); }
.rodape { color: var(--concreto); border-top: 1px solid var(--claro); }
.rodape .logo { width: 150px; }

/* apresentação de orçamento */
.cabeca-ferramenta .tagline { color: var(--pedra); }
.cabeca-ferramenta h1 { font: 300 clamp(2rem, 4.6vw, 3.2rem)/1.1 var(--titulo); letter-spacing: .08em; text-transform: uppercase; }
.cabeca-ferramenta p { color: var(--pedra); }
.envio { background: var(--claro); border: 1px solid var(--preto); outline: 1px solid var(--preto); outline-offset: -10px; }
.envio:hover, .envio.arrastando { background: #DCD8D4; }
.envio-icone { width: 92px; height: 52px; border: 1px solid var(--preto); display: grid; place-items: center; }
.envio-icone::before { content: "PDF"; font: 300 1rem var(--titulo); letter-spacing: .3em; padding: 2px 0 2px .3em; border-top: 1px solid var(--preto); border-bottom: 1px solid var(--preto); }
.envio strong { font: 300 1.25rem var(--titulo); letter-spacing: .08em; text-transform: uppercase; }
.envio span { color: var(--concreto); font-size: .92rem; }
.passos li { color: var(--concreto); }
.passos li::before { font: 300 .95rem var(--titulo); color: var(--preto); border: 1px solid var(--preto); }
.vazio { border-left: 1px solid var(--preto); color: var(--concreto); }
.vazio h2 { font: 300 1.3rem var(--titulo); letter-spacing: .06em; text-transform: uppercase; color: var(--preto); }
.estado { font: 300 1.3rem var(--titulo); letter-spacing: .06em; text-transform: uppercase; }
.girando { border-color: var(--claro); border-top-color: var(--preto); border-width: 2px; }
.arquivo-nome { color: var(--concreto); }
.tira { background-color: var(--preto); background-image: var(--textura); }
.tira figcaption { color: var(--pedra); letter-spacing: .06em; }
.bloco h3 { font: 600 .9rem var(--corpo); }
.cards-escolhidos li { background: var(--claro); border: 1px solid var(--preto); }
.cards-escolhidos button { background: var(--preto); color: var(--branco); }
.motivos { color: var(--concreto); }
.motivos b { color: var(--preto); font-weight: 600; }
select { border: 1px solid var(--preto); background: var(--branco); color: var(--preto); }
.alerta { border: 1px solid var(--preto); background: var(--branco); }
.alerta h3 { font: 600 .95rem var(--corpo); }
.alerta .item + .item { border-top: 1px solid var(--claro); }
.nota { color: var(--concreto); }
.aviso-marca { background: var(--claro); border-left: 1px solid var(--preto); color: var(--preto); }

@media (max-width: 600px) {
  .ferramenta { padding: 30px 26px 28px; }
  .topo-barra .logo { width: 150px; }
}