/* Artesania — sistema comum do site (home, páginas de serviço e 404).
Manual: branding/artesania/manual.md. Mobile first, sem framework.
Cor do serviço: define
--cor-servico a cor do serviço (fundos, faixas, ícones, bordas)
--cor-servico-texto versão segura para TEXTO sobre linho/branco (AA)
--cor-servico-sobre cor do texto SOBRE a cor do serviço (branco ou grafite)
Na home (data-servico vazio) as três variáveis valem o anil do grupo.
O mesmo atributo num elemento qualquer (ex.: cartões da home, itens do menu) troca a cor só dele. */
/* ------------------------------------------------------------------ tokens */
:root {
/* grupo */
--anil: #26408B;
--anil-escuro: #1C3170;
--linha: #D2452F; /* vermelho-linha: o fio, o "IA", o botão de ação */
--linha-escura: #B5361F; /* vermelho-linha para texto pequeno sobre linho (5,1:1) */
--linha-clara: #F0674B; /* só sobre fundo escuro */
--linho: #F3EDE2;
--linho-2: #EAE2D3; /* superfícies e divisórias sobre linho */
--grafite: #1E1F24;
--grafite-2: #3A3B42;
--cinza: #55575C; /* texto secundário (6,2:1 sobre linho) */
--borda: #D9CFBE;
--branco: #FFFFFF;
--wa: #12813F;
/* serviços: cor · texto seguro · texto sobre a cor */
--site: #D2452F; --site-texto: #B5361F; --site-sobre: #FFFFFF;
--atende: #2E7D5B; --atende-texto: #276B4E; --atende-sobre: #FFFFFF;
--mapa: #26408B; --mapa-texto: #26408B; --mapa-sobre: #FFFFFF;
--posts: #E3A72F; --posts-texto: #8A6212; --posts-sobre: #1E1F24;
--sistemas: #3D4A5C; --sistemas-texto: #3D4A5C; --sistemas-sobre: #FFFFFF;
--numeros: #7A3E6B; --numeros-texto: #7A3E6B; --numeros-sobre: #FFFFFF;
--cor-servico: var(--anil);
--cor-servico-texto: var(--anil);
--cor-servico-sobre: #FFFFFF;
/* tipografia: a mão (Fraunces itálico), a voz (Figtree), a máquina (JetBrains Mono) */
--f-mao: "Fraunces", Georgia, "Times New Roman", serif;
--f-voz: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--f-maquina: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
/* espaço e forma */
--e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px; --e9: 112px;
--raio: 8px;
--raio-g: 14px;
--sombra: 0 1px 2px rgba(30, 31, 36, .06), 0 10px 26px -14px rgba(30, 31, 36, .28);
--largura: 1140px;
--gutter: 20px;
/* textura ponto-cruz (manual §6) */
--ponto-cruz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' stroke='%2326408B' stroke-opacity='.11' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
--ponto-cruz-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' stroke='%23F3EDE2' stroke-opacity='.10' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
[data-servico="site"] { --cor-servico: var(--site); --cor-servico-texto: var(--site-texto); --cor-servico-sobre: var(--site-sobre); }
[data-servico="atende"] { --cor-servico: var(--atende); --cor-servico-texto: var(--atende-texto); --cor-servico-sobre: var(--atende-sobre); }
[data-servico="mapa"] { --cor-servico: var(--mapa); --cor-servico-texto: var(--mapa-texto); --cor-servico-sobre: var(--mapa-sobre); }
[data-servico="posts"] { --cor-servico: var(--posts); --cor-servico-texto: var(--posts-texto); --cor-servico-sobre: var(--posts-sobre); }
[data-servico="sistemas"] { --cor-servico: var(--sistemas); --cor-servico-texto: var(--sistemas-texto); --cor-servico-sobre: var(--sistemas-sobre); }
[data-servico="numeros"] { --cor-servico: var(--numeros); --cor-servico-texto: var(--numeros-texto); --cor-servico-sobre: var(--numeros-sobre); }
/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
}
body { margin: 0; background: var(--linho); color: var(--grafite); font: 400 17px/1.55 var(--f-voz); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
@media (min-width: 900px) { body { font-size: 18px; } }
img, svg { display: block; max-width: 100%; }
a { color: var(--anil); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--anil-escuro); }
:focus-visible { outline: 3px solid var(--linha); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(38, 64, 139, .18); }
h1, h2 { font-family: var(--f-mao); font-style: italic; font-weight: 500; font-variation-settings: "SOFT" 50; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 .5em; color: var(--anil); text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5.6vw + .8rem, 3.5rem); }
h2 { font-size: clamp(1.75rem, 2.4vw + 1rem, 2.25rem); }
h3 { font: 600 1.25rem/1.25 var(--f-voz); margin: 0 0 .4em; color: var(--grafite); }
p { margin: 0 0 1em; text-wrap: pretty; }
.mono, .preco, .prazo { font-family: var(--f-maquina); font-weight: 500; letter-spacing: -0.01em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--grafite); color: var(--linho); padding: 10px 14px; border-radius: var(--raio); }
.pular:focus { top: 12px; color: var(--linho); }
/* ------------------------------------------------------------------ layout */
.container { width: 100%; max-width: calc(var(--largura) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.secao { padding: var(--e8) 0; }
@media (min-width: 900px) { .secao { padding: var(--e9) 0; } }
.secao-branca { background: var(--branco); }
.secao-anil { background: var(--anil) var(--ponto-cruz-claro); color: var(--linho); }
.secao-anil h2, .secao-anil h3 { color: var(--linho); }
.secao-anil a:not(.btn) { color: var(--linho); }
.secao-grafite { background: var(--grafite); color: var(--linho); }
.secao-grafite h2, .secao-grafite h3 { color: var(--linho); }
/* faixa de textura ponto-cruz (nunca atrás de texto pequeno) */
.faixa-textura { background-color: var(--linho); background-image: var(--ponto-cruz); }
/* cabeça de seção */
.cabeca { max-width: 740px; margin-bottom: var(--e7); }
.cabeca-centro { margin-left: auto; margin-right: auto; text-align: center; }
.cabeca p { font-size: 1.08rem; color: var(--cinza); }
.secao-anil .cabeca p, .secao-grafite .cabeca p { color: #D9DDEA; }
.olho { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 .8rem/1 var(--f-voz); letter-spacing: .14em; text-transform: uppercase; color: var(--cor-servico-texto); }
.olho::before { content: ""; width: 14px; height: 14px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 3l8 8M11 3l-8 8' stroke='%23D2452F' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.secao-anil .olho, .secao-grafite .olho { color: var(--linho); }
/* divisória em fileira de "x" (manual §6) */
.divisoria { height: 14px; margin: var(--e6) 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14'%3E%3Cpath d='M7 3l8 8M15 3l-8 8' stroke='%2326408B' stroke-opacity='.45' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") left center/22px 14px repeat-x; }
/* o fio: sublinha UMA palavra por página (à mão) */
.fio { position: relative; white-space: nowrap; }
.fio::after { content: ""; position: absolute; left: -2%; right: -6%; bottom: -.18em; height: .32em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 6c20-4 50-5 80-2 14 1 24 3 30 6 4 2 2 4-1 3' fill='none' stroke='%23D2452F' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; pointer-events: none; }
/* ------------------------------------------------------------------ botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 50px; padding: .75em 1.35em; border-radius: var(--raio); border: 2px solid transparent; font: 600 1rem/1.2 var(--f-voz); text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-acao { background: var(--linha); color: #FFFFFF; } /* o vermelho: 1 por tela */
.btn-acao:hover { background: var(--linha-escura); color: #FFFFFF; }
.btn-anil { background: var(--anil); color: #FFFFFF; }
.btn-anil:hover { background: var(--anil-escuro); color: #FFFFFF; }
.btn-servico { background: var(--cor-servico); color: var(--cor-servico-sobre); }
.btn-servico:hover { filter: brightness(.92); color: var(--cor-servico-sobre); }
.btn-contorno { border-color: currentColor; color: var(--anil); background: transparent; }
.btn-contorno:hover { background: var(--anil); border-color: var(--anil); color: #FFFFFF; }
.secao-anil .btn-contorno, .secao-grafite .btn-contorno { color: var(--linho); }
.secao-anil .btn-contorno:hover, .secao-grafite .btn-contorno:hover { background: var(--linho); border-color: var(--linho); color: var(--anil); }
.btn-claro { background: var(--linho); color: var(--anil); }
.btn-claro:hover { background: #FFFFFF; color: var(--anil-escuro); }
.btn-bloco { width: 100%; }
.btn-p { min-height: 42px; padding: .5em 1em; font-size: .94rem; }
.acoes { display: flex; flex-direction: column; gap: var(--e3); }
@media (min-width: 520px) { .acoes { flex-direction: row; flex-wrap: wrap; } }
/* ------------------------------------------------------------------ cabeçalho (HTML fixo; ver _modelo-servico.html) */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(243, 237, 226, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borda); }
.topo .container { display: flex; align-items: center; gap: var(--e4); min-height: 68px; }
.logo { display: block; flex: none; line-height: 0; }
.logo img { height: 32px; width: auto; }
@media (min-width: 900px) { .topo .container { min-height: 76px; } .logo img { height: 40px; } }
.menu { display: none; list-style: none; margin: 0 0 0 auto; padding: 0; gap: 2px; }
.menu a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: var(--raio); text-decoration: none; color: var(--grafite); font: 600 .95rem/1 var(--f-voz); }
.menu a::before { content: ""; width: 9px; height: 9px; background: var(--cor-servico); clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); }
.menu a:hover { background: var(--linho-2); }
.menu a[aria-current="page"] { background: var(--branco); box-shadow: inset 0 -2px 0 var(--cor-servico); }
.topo .btn { margin-left: auto; min-height: 42px; padding: .5em 1em; font-size: .92rem; }
/* um vermelho por tela (manual §4): o botão do topo é anil; o vermelho fica para o CTA principal da página */
.topo .btn-acao { background: var(--anil); }
.topo .btn-acao:hover { background: var(--anil-escuro); }
.menu-movel + .btn { margin-left: 0; }
@media (min-width: 1080px) { .menu { display: flex; } .topo .btn { margin-left: var(--e3); } .menu-movel { display: none; } }
/* menu do celular sem JS: