/* ============================================================================
   BASE — reset curto + os papéis de texto
   Os valores vêm de tokens.css, que vem da medição. Aqui só se aplica.
   ============================================================================ */

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

/* ⚠️ Diz ao navegador que esta página é CLARA. Sem isto, num sistema em modo
   escuro o Chrome e o Safari pintam por conta própria a barra de rolagem, o
   menu suspenso do <select> e a régua de foco dos controles nativos — peças
   que o site desenha em claro e o navegador devolvia em escuro. */
:root { color-scheme: light; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte-ui);
  font-size: var(--corpo);
  line-height: var(--corpo-lh);
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
img { border-style: none; }

/* ── Títulos ──────────────────────────────────────────────────────────────
   Sem escala responsiva, porque o site medido não tem nenhuma. */
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--fonte-ui); }

h1 { font-size: var(--h1); line-height: var(--h1-lh); font-weight: var(--h1-peso); }
h2 { font-size: var(--h2); line-height: var(--h2-lh); font-weight: var(--h2-peso); }
h3 { font-size: var(--h2); line-height: var(--h2-lh); font-weight: var(--h2-peso); }

/* Título de seção — o widget "ekit-heading" do original. Maior e mais leve
   que um h2 comum, e é o que abre "Por que Escolher a MESTRE Gráfica?". */
.titulo-secao {
  font-size: var(--h2-secao);
  line-height: var(--h2-secao-lh);
  font-weight: var(--h2-secao-peso);
  text-align: center;
}

/* 14,4px — medido em todo bloco de texto do site (é 0.8em de 18px). Eu usava
   16 do meu sistema de espaço, e a diferença de 1,6px por parágrafo vira 30px
   numa página longa. A lista não tem margem de baixo. */
p, ul, ol { margin: 0 0 14.4px; }
ul, ol { margin-bottom: 0; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

/* ── Texto corrido ────────────────────────────────────────────────────────
   O padrão é Montserrat. Medido nos 5 blocos de texto da página de produto:
   quatro em Montserrat, um em Roboto. */
.texto { font-size: var(--corpo); line-height: var(--corpo-lh); }
.texto--g { font-size: var(--corpo-g); line-height: var(--corpo-g-lh); }

/* ⚠️ O bloco longo de texto rico é ROBOTO, não Montserrat — é o único da
   página. Medido, não suposto. Trocar a família mudaria a mancha do texto
   mais longo do site. */
.texto--rico { font-family: var(--fonte-texto); }
.texto strong, .texto b { font-weight: 700; }
/* Título DENTRO de um bloco de texto é outro papel: 20/24 peso 500, com 8px
   em cima e 16 embaixo. Medido em /folders/, que tem cinco deles. Herdando o
   h2 comum (18/18 peso 600) e a minha folga de 32/12, a página crescia 70px e
   os títulos ficavam mais pesados e menores que os do original.
   A família é herdada de propósito: dentro de .texto--rico isso dá Roboto,
   que é o que o bloco inteiro usa. */
.texto h2, .texto h3 {
  font-family: inherit; font-size: 20px; line-height: 24px; font-weight: 500;
  margin: 8px 0 16px;
}
.texto ul, .texto ol { padding-left: 40px; }   /* medido, não --e5 (24) */
.texto li { margin-bottom: 0; }   /* medido: os itens não têm folga */

/* ── Links ────────────────────────────────────────────────────────────────
   Herdam a cor. O sublinhado é o afford, e ele aparece no foco também —
   navegação por teclado precisa ver onde está. */
a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* ⚠️ ANEL DE FOCO EM DUAS CORES, e não é preciosismo. O anel era só laranja
   (#F39200): sobre o branco isso dá 2,34:1, abaixo do piso de 3:1 que a WCAG
   1.4.11 pede para indicador de foco. Sobre o azul do rodapé o laranja vai
   bem; sobre o papel branco, some. Uma cor só não cobre os dois fundos deste
   site, então são duas: o filete LARANJA cola no elemento (aparece no escuro)
   e o traço de TINTA fica por fora (15:1 no branco). Qualquer que seja o
   fundo, uma das duas tem contraste. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px var(--laranja);
  border-radius: 2px;
}
/* Dentro de caixa que corta o que transborda o `box-shadow` sumiria: nessas o
   anel volta a ser um só, na cor que contrasta com o fundo escuro da peça. */
.vitrine__item a:focus-visible, .galeria a:focus-visible {
  outline-color: var(--papel); box-shadow: 0 0 0 4px var(--tinta);
}

/* ── Envelope ─────────────────────────────────────────────────────────────
   1140px medido no desktop; 767px é o ponto onde o original vira mobile. */
.env {
  width: 100%;
  /* ⚠️ --env é a largura do CONTEÚDO (1140, medido), não a da caixa. Somar as
     goteiras é o que faz a linha de texto ter a mesma medida do espelho. Com
     max-width: var(--env) puro o conteúdo saía com 1100 e o texto longo ganhava
     uma linha a mais por parágrafo — 200px numa página legal. */
  max-width: calc(var(--env) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Utilidades ───────────────────────────────────────────────────────────── */
.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Pular para o conteúdo: invisível até receber foco. Primeira parada do
   teclado em toda página. */
.pular {
  position: absolute; left: var(--e3); top: -100px; z-index: 100;
  padding: var(--e3) var(--e5); background: var(--tinta); color: var(--papel);
  text-decoration: none; border-radius: var(--raio);
  transition: top var(--tempo) var(--curva);
}
.pular:focus { top: var(--e3); }

@media print {
  .zap-flutuante, .cabecalho, .rodape { display: none !important; }
}


/* ── h1 de página ─────────────────────────────────────────────────────────
   /sobre/ e as duas páginas legais. Ver o aviso em tokens.css: este NÃO é o
   mesmo h1 do molde produto, e a diferença é do site atual, não minha. */
.h1-pagina {
  font-size: var(--h1-pagina);
  line-height: var(--h1-pagina-lh);
  font-weight: var(--h1-pagina-peso);
  text-align: left;
}
.h1-pagina--centro { text-align: center; }
/* O <span> dentro do h1 é o nome da gráfica, em 700. Medido. (No espelho ele
   é #000000 e o resto do h1 é #1D1D1B; a diferença é invisível a 40px, então
   fica no token da marca em vez de abrir uma cor solta no CSS.) */
.h1-pagina span { font-weight: 700; color: var(--tinta); }
/* Mesmo papel no título de seção: o <span> marca o nome, em 700. */
.titulo-secao span { font-weight: 700; }
.secao--escura .h1-pagina span, .secao--escura h1 span { color: inherit; }


/* Goteira do celular. Medido a 375: o conteúdo sai a 335, ou seja 20px de cada
   lado — 10 da caixa e 10 da coluna. Com 20+10 o texto ficava 20px mais
   estreito e cada parágrafo longo ganhava linha. */
@media (max-width: 767px) { :root { --gutter: 10px; } }

/* ── Superfícies do navegador ─────────────────────────────────────────────
   As partes que ninguém desenha e que, por isso, ficam com o cinza padrão do
   Chrome: a seleção de texto, o cursor do campo, a bolinha da lista, a barra
   de rolagem. Elas aparecem justamente quando a pessoa está usando o site.
   Vestir estas quatro é o que separa uma página construída de uma montada. */
::selection { background: var(--destaque); color: var(--tinta); }
:root { accent-color: var(--verde-escuro); }
input, textarea, select { caret-color: var(--verde-escuro); }
li::marker { color: var(--laranja); }

@supports (scrollbar-color: red red) {
  :root { scrollbar-color: #c8c8c2 var(--papel); }
}

/* O sublinhado do link acompanha o peso do texto em vez de ficar no fio de
   1px que o navegador escolhe sozinho. */
a { text-decoration-thickness: from-font; }

/* ⚠️ O cabeçalho é `sticky` e tem 69px. Sem esta folga, todo salto para
   âncora — o "Pular para o conteúdo" do teclado, o `/#orcamento` da página de
   erro do formulário — encosta o alvo no topo da janela e o cabeçalho cobre a
   primeira linha dele. Quem usa teclado pula para o conteúdo e não vê o
   título da página. */
:target, #conteudo, [id="orcamento"] { scroll-margin-top: 84px; }