/* =========================================================
AZZÓRI ASSESSORIA CONTÁBIL — FOLHA DE ESTILO
Versão 1.8.0
AO ALTERAR ESTE ARQUIVO: suba a versão aqui e em
index.html, na query .
As duas precisam bater, senão o cliente vê o CSS antigo.
Navy e papel, tirados do próprio logo.
O único recurso gráfico é o fio de 1px — o mesmo da marca.
Sem gradiente, sem sombra colorida, sem vidro.
========================================================= */
:root{
/* Tinta e papel */
--ink:#22264B; /* navy do logo */
--ink-2:#3A3F66;
--ink-soft:#5C6178;
--ink-mute:#8A8EA0;
--paper:#F7F5F1; /* creme da placa do logo */
--paper-2:#EFEBE3;
--paper-3:#FBFAF7;
--rule:rgba(34,38,75,.14);
--rule-soft:rgba(34,38,75,.08);
/* Azul de destaque — o navy do logo aberto até ficar visível
como cor, não como quase-preto. 5.7:1 sobre o papel. */
--blue:#2F5EA8;
--blue-light:#7FA8E0; /* a versão para fundo escuro, 6.4:1 */
--blue-rgb:47,94,168; /* para rgba() sem criar variável nova */
--blue-wash:rgba(47,94,168,.15);
/* Verde oficial do WhatsApp. Fica fora da paleta de propósito:
o reconhecimento imediato vale mais que a harmonia. */
--whatsapp:#25D366;
--whatsapp-dark:#1EBC5A;
--whatsapp-ink:#07361F; /* texto sobre o verde — 7.8:1 */
/* Serifada institucional de traço sólido e contraste baixo.
Substituiu a Cormorant Garamond, cujo peso 300 tinha
hastes quase capilares — o "fonte fina" que o cliente
rejeitou. Aqui o peso de trabalho é 600, não 300. */
--serif:'Source Serif 4','Source Serif Pro',Georgia,'Times New Roman',serif;
--sans:'Jost',-apple-system,'Segoe UI',system-ui,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
--wrap:1140px;
--gutter:clamp(1.5rem,5vw,4rem);
--pad:clamp(4.5rem,9vw,8.5rem);
--ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
font-family:var(--sans);font-weight:400;font-size:1.0125rem;line-height:1.75;
color:var(--ink-soft);background:var(--paper);overflow-x:hidden;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol,dl{list-style:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
padding:.75rem 1.25rem;z-index:200;font-size:.8rem}
.skip-link:focus{left:1rem;top:1rem}
/* =====================================================
MALHA QUADRICULADA
O quadrado do logo é uma malha. Repetir esse desenho
como papel milimetrado, a 4% de tinta, é o que dá o
ar de cálculo sem virar decoração.
===================================================== */
.graph{position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:
linear-gradient(to right,rgba(34,38,75,.05) 1px,transparent 1px),
linear-gradient(to bottom,rgba(34,38,75,.05) 1px,transparent 1px);
background-size:56px 56px;
-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.35) 62%,transparent 100%);
mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.35) 62%,transparent 100%)}
.graph-light{background-image:
linear-gradient(to right,rgba(247,245,241,.07) 1px,transparent 1px),
linear-gradient(to bottom,rgba(247,245,241,.07) 1px,transparent 1px)}
/* ===================== TIPOGRAFIA ===================== */
.eyebrow{
font-family:var(--mono);font-weight:400;font-size:.6875rem;line-height:1.6;
letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);
}
.eyebrow-light{color:rgba(247,245,241,.6)}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--ink);letter-spacing:-.015em}
h1 em,h2 em,h3 em{font-style:italic;font-weight:600;color:var(--blue)}
/* =====================================================
DESTAQUE NO CORPO DO TEXTO
Azul mais uma faixa de 15% que fica atrás da linha de
base, não atrás do bloco inteiro. É o realce editorial
feito a lápis, não o marca-texto fluorescente — e por
ser background-image acompanha a quebra de linha.
Use pouco: 3 ou 4 por página. Mais que isso e nada
está mais em destaque.
===================================================== */
.mk{color:var(--blue);
background-image:linear-gradient(to top,
var(--blue-wash) 0,var(--blue-wash) .34em,transparent .34em);
padding-bottom:.02em}
.mk-light{color:var(--blue-light);
background-image:linear-gradient(to top,
rgba(127,168,224,.18) 0,rgba(127,168,224,.18) .34em,transparent .34em)}
/* Corpos reduzidos cerca de 15% em relação à versão anterior.
A Cormorant tem altura-x muito baixa e pedia tamanho grande
para ser legível; a Source Serif ocupa bem mais espaço no
mesmo corpo. Sem essa correção os títulos estouravam. */
.hero-title{font-size:clamp(1.9375rem,4.7vw,3.5rem);line-height:1.16}
.section-title{font-size:clamp(1.625rem,3.4vw,2.5rem);line-height:1.2;margin-bottom:2.25rem}
.cta-title{font-size:clamp(1.625rem,3.7vw,2.75rem);line-height:1.2;color:var(--paper)}
.cta-title em{color:rgba(247,245,241,.7)}
.lead{font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.75;color:var(--ink-soft)}
p + p{margin-top:1.25rem}
/* ===================== MARCA ===================== */
.brand{display:inline-flex;flex-direction:column;align-items:center;gap:.4rem;
--brand-bg:var(--paper);--brand-ink:var(--ink)}
.brand-frame{position:relative;display:block;border:1px solid var(--brand-ink);
padding:.4rem 1.15rem .35rem}
.brand-notch{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
width:14px;height:14px;background:var(--brand-bg);display:block}
.brand-notch::after{content:'';position:absolute;inset:1.5px;background-color:var(--brand-ink);
background-image:
repeating-linear-gradient(0deg,transparent 0 1px,rgba(255,255,255,.55) 1px 2px),
repeating-linear-gradient(90deg,transparent 0 1px,rgba(255,255,255,.55) 1px 2px)}
/* O wordmark do logo é uma sans geométrica leve, não serifada.
Jost 300 com tracking largo é o que mais se aproxima. */
.brand-name{font-family:var(--sans);font-weight:400;font-size:1.125rem;line-height:1.2;
letter-spacing:.26em;text-transform:uppercase;color:var(--brand-ink);display:block;
padding-left:.26em}
.brand-sub{font-family:var(--sans);font-weight:500;font-size:.5rem;line-height:1;
letter-spacing:.28em;text-transform:uppercase;color:var(--brand-ink);padding-left:.28em}
.brand-light{--brand-bg:var(--ink);--brand-ink:var(--paper)}
/* =====================================================
HEADER — invertido: navy de fundo, informação em branco.
A barra passa a ser o bloco mais sólido da página e
ancora o topo. Como o hero é creme, o contraste também
resolve um problema que existia antes: header claro sobre
fundo claro dependia de um fio de 1px para se distinguir.
===================================================== */
.header{position:fixed;top:0;left:0;width:100%;z-index:100;
background:var(--ink);border-bottom:1px solid transparent;
transition:box-shadow .3s var(--ease)}
.header.is-scrolled{box-shadow:0 1px 0 rgba(34,38,75,.18),0 10px 30px -18px rgba(34,38,75,.5)}
.header-inner{display:flex;align-items:center;justify-content:space-between;
min-height:88px;gap:2rem}
/* o lockup da marca herda a variante clara */
.header .brand{--brand-bg:var(--ink);--brand-ink:var(--paper)}
.nav{display:flex;align-items:center;gap:2.25rem}
.nav a{font-size:.8125rem;font-weight:400;letter-spacing:.06em;
color:rgba(247,245,241,.72);
padding:.35rem 0;position:relative;transition:color .25s var(--ease)}
.nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
background:var(--blue-light);transition:width .3s var(--ease)}
.nav a:hover{color:var(--paper)}
.nav a:hover::after,.nav a.is-active::after{width:100%}
.nav a.is-active{color:var(--paper)}
.nav-contact{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;
color:var(--paper) !important;border:1px solid rgba(247,245,241,.3);
padding:.55rem 1.1rem !important}
.nav-contact::after{display:none}
.nav-contact:hover{background:var(--paper);color:var(--ink) !important;
border-color:var(--paper)}
.burger{display:none;flex-direction:column;gap:6px;padding:10px 4px;z-index:110}
.burger span{display:block;width:24px;height:1px;background:var(--paper);
transition:transform .3s var(--ease)}
.burger.is-open span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger.is-open span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
/* =====================================================
ÍCONES
Traço de 1px que não engrossa quando o ícone cresce:
vector-effect mantém a espessura igual à dos fios da
página em qualquer tamanho.
===================================================== */
/* Cada ícone vive dentro de uma moldura de 1px com fundo azul
suave. É o mesmo gesto da moldura do logo, reduzido à escala
do ícone — dá peso visual sem recorrer a cor forte.
O padding é aplicado no próprio