/* Plus Jakarta Sans - self-hosted (woff2). Ver theme/assets/fonts/. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plus-jakarta-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plus-jakarta-sans-500.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plus-jakarta-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/plus-jakarta-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/plus-jakarta-sans-800.woff2") format("woff2"); }

/* =========================================================================
   Alvera Contabilidade Consultiva - Folha de estilos principal
   Cores da marca: navy (#2D2A5F) + laranja (#E28729) + creme (#FEF9E7)
   Tipografia: Plus Jakarta Sans (Gilroy-like, free)
   ========================================================================= */

:root {
  /* ── Cores Alvera ────────────────────────────────────────────────────── */
  --alvera-navy:          #2D2A5F;  /* navy primário (fundo do logo) */
  --alvera-navy-dark:     #1F1D45;  /* navy mais escuro p/ seções dark */
  --alvera-navy-darker:   #15133A;
  --alvera-navy-soft:     #ECEBF4;  /* lavanda muito suave */
  --alvera-navy-300:      #6F6BA0;

  --alvera-orange:        #E28729;  /* laranja acento (ponto do logo) */
  --alvera-orange-dark:   #B86713;
  --alvera-orange-soft:   #FBEBD4;

  --alvera-green:         #34513F;  /* verde escuro institucional */
  --alvera-green-soft:    #E2EAE4;

  --alvera-cream:         #FEF9E7;  /* creme/marfim (cor da letra "a") */
  --alvera-cream-warm:    #FAF3E0;

  /* Compatibilidade - aliases semânticos */
  --color-primary:        var(--alvera-navy);
  --color-primary-dark:   var(--alvera-navy-dark);
  --color-primary-darker: var(--alvera-navy-darker);
  --color-primary-soft:   var(--alvera-navy-soft);
  --color-primary-300:    var(--alvera-navy-300);

  --color-accent:         var(--alvera-orange);
  --color-accent-dark:    var(--alvera-orange-dark);
  --color-accent-soft:    var(--alvera-orange-soft);

  --color-warning:        #E2A60D;

  --color-bg:             #FFFFFF;
  --color-bg-alt:         #F7F5EE;       /* warm off-white */
  --color-bg-warm:        var(--alvera-cream);
  --color-text:           #1A1A1A;
  --color-text-body:      #2A2A2A;
  --color-text-muted:     #5A5A5A;
  --color-border:         #E8E4D6;
  --color-border-strong:  #C9C3AE;

  /* ── Tipografia ─────────────────────────────────────────────────────── */
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-sans:    "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
  /* alias antigo p/ compatibilidade - agora também sans (sem serifa) */
  --font-serif:   var(--font-display);

  --fs-display: clamp(2.5rem, 5.2vw, 4.5rem);
  --fs-h1: clamp(2rem, 3.6vw, 3rem);
  --fs-h2: clamp(1.6rem, 2.6vw, 2.25rem);
  --fs-h3: 1.35rem;
  --fs-lead: clamp(1.05rem, 1.3vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.78rem;

  /* ── Geometria ──────────────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --container: 1200px;
  --container-narrow: 960px;

  --shadow-sm: 0 1px 2px rgba(31, 29, 69, .06), 0 1px 3px rgba(31, 29, 69, .08);
  --shadow-md: 0 8px 24px rgba(31, 29, 69, .08), 0 2px 6px rgba(31, 29, 69, .06);
  --shadow-lg: 0 24px 60px rgba(31, 29, 69, .16), 0 8px 18px rgba(31, 29, 69, .08);

  --section-pad-y: clamp(4rem, 8vw, 7rem);

  /* Tokens "on-dark" + extras (design refresh 2026-06-11): texto e elementos sobre navy */
  --alvera-text-body:      #2A2740;
  --alvera-on-dark:        #EEEDF6;
  --alvera-on-dark-muted:  #CFCDDF;
  --alvera-on-dark-dim:    #B5B2C9;
  --alvera-on-dark-faint:  #8E8AAA;
  --alvera-on-dark-tint:   #E7E5F2;
  --alvera-orange-on-dark: #F0B878;
  --alvera-navy-on-dark:   #B6B2DC;
  --alvera-cream-on-dark:  #E9DFC4;
  --color-on-dark:         var(--alvera-on-dark);
  --color-on-dark-muted:   var(--alvera-on-dark-muted);
  --color-on-dark-dim:     var(--alvera-on-dark-dim);
  --color-on-dark-faint:   var(--alvera-on-dark-faint);
  --color-on-dark-tint:    var(--alvera-on-dark-tint);
  --color-accent-on-dark:  var(--alvera-orange-on-dark);
  --color-primary-on-dark: var(--alvera-navy-on-dark);
  --color-gold-on-dark:    var(--alvera-cream-on-dark);
  --brand-whatsapp:        #25D366;
}

/* =========================================================================
   Reset enxuto
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
#alv-article img,
#alv-article svg { display: block; max-width: 100%; height: auto; }
a { color: var(--alvera-navy); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--alvera-orange-dark); }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;       /* Plus Jakarta Sans ExtraBold (Gilroy-like) */
  line-height: 1.12;
  color: var(--alvera-navy-darker);
  margin: 0 0 .6em;
  letter-spacing: -0.018em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* =========================================================================
   Container & helpers
   ========================================================================= */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding: var(--section-pad-y) 0; }
.section--alt { background: var(--color-bg-alt); }
.section--cream { background: var(--alvera-cream); }
.section--dark {
  background: var(--alvera-navy-dark);
  color: #E9E7F2;
}
.section--dark h2, .section--dark h3 { color: #FFFFFF; }

/* Page hero: primitivo compartilhado (blog, equipe, institucionais). Design refresh 2026-06-11. */
.page-hero {
  position: relative;
  background:
    radial-gradient(900px 500px at 80% -20%, rgba(226, 135, 41, .22), transparent 60%),
    radial-gradient(600px 380px at 0% 100%, rgba(254, 249, 231, .08), transparent 55%),
    linear-gradient(180deg, var(--alvera-navy-darker) 0%, var(--alvera-navy) 100%);
  color: #FFFFFF;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}
.page-hero .container { position: relative; text-align: center; }
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  color: #FFFFFF;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  max-width: 22ch;
  margin-inline: auto;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.page-hero h1 em { font-style: normal; color: var(--alvera-orange); font-weight: 800; }
.page-hero .lead {
  color: #CFCDDF;
  font-size: var(--fs-lead);
  max-width: 60ch;
  margin: 1.2rem auto 0;
}
.page-hero .breadcrumbs {
  display: flex;
  justify-content: center;
  gap: .5rem;
  font-size: .82rem;
  color: #B5B2C9;
  margin-bottom: 1.5rem;
}
.page-hero .breadcrumbs a { color: var(--alvera-orange); }
.page-hero .breadcrumbs span { opacity: .6; }
.page-hero .eyebrow { justify-content: center; color: var(--alvera-orange-on-dark); }
.page-hero .eyebrow::before { background: var(--alvera-orange); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--alvera-orange-dark);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--alvera-orange);
  margin-right: 12px;
  flex-shrink: 0;
}

.section-head { max-width: 720px; margin-bottom: 3rem; }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--center .eyebrow { justify-content: center; }
.section-head h2 { margin-bottom: .5rem; text-wrap: balance; }
.section-head p {
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* O "ponto" da marca - pode ser usado em destaques */
.alvera-dot {
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--alvera-orange);
  vertical-align: 0.05em;
  margin-left: 0.05em;
}

/* =========================================================================
   Botões
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--alvera-orange);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(226, 135, 41, .35);
}
.btn--primary:hover {
  background: var(--alvera-orange-dark);
  color: #FFFFFF;
  box-shadow: 0 8px 22px rgba(226, 135, 41, .45);
}

.btn--secondary {
  background: var(--alvera-navy);
  color: #FFFFFF;
}
.btn--secondary:hover { background: var(--alvera-navy-dark); color: #FFFFFF; }

.btn--ghost {
  background: transparent;
  color: var(--alvera-navy-darker);
  border-color: var(--color-border-strong);
}
.btn--ghost:hover {
  background: var(--alvera-navy-soft);
  border-color: var(--alvera-navy);
  color: var(--alvera-navy-darker);
}

.btn--ghost-light {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255,255,255,.35);
}
.btn--ghost-light:hover { background: rgba(255,255,255,.08); color: #FFFFFF; border-color: rgba(255,255,255,.6); }

.btn--lg { padding: 1.1rem 1.9rem; font-size: 1.02rem; }

.btn .icon { width: 1.05em; height: 1.05em; flex-shrink: 0; }