/* ==========================================================================
   H2A Inteligência — estilos compartilhados das subpáginas (SEO)
   Reaproveita o Brand System do index.html num arquivo enxuto e reutilizável.
   ========================================================================== */

:root {
  --azul: #1B3A5C;      /* Azul Minério — identidade/estrutura */
  --indigo: #2E5EAA;    /* Índigo Técnico — ação/dados */
  --ardosia: #F4F6F8;   /* Branco Ardósia — fundo dominante */
  --superficie: #EDF0F4;/* Cinza Superfície */
  --fantasma: #F8FAFB;  /* Cinza Fantasma */
  --preto: #0F1923;     /* Preto Fundação — texto */
  --cinza: #4A5568;     /* Cinza Estrutural — texto secundário */
  --branco: #FFFFFF;
  --linha: rgba(27, 58, 92, .14);
  --maxw: 1180px;
  --nav-h: 68px;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }

body {
  margin: 0;
  background: var(--ardosia);
  color: var(--preto);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px }
@media(max-width:640px) { .wrap { padding: 0 22px } }

/* ---------- tipografia ---------- */
h1, h2, h3 { margin: 0; letter-spacing: -.02em; font-weight: 800; line-height: 1.06 }
h1 { font-size: clamp(34px, 5.4vw, 56px) }
h2 { font-size: clamp(26px, 4vw, 40px); letter-spacing: -.015em }
h3 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25 }
p { margin: 0 }

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--indigo)
}
.lead { font-size: clamp(18px, 2vw, 21px); color: var(--cinza); max-width: 62ch; line-height: 1.55 }
.serif { font-family: 'Source Serif 4', Georgia, serif }
.mono { font-family: 'JetBrains Mono', monospace }
.muted { color: var(--cinza) }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; padding: 13px 22px;
  border-radius: 4px; border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease
}
.btn:hover { transform: translateY(-2px) }
.btn-primary { background: var(--indigo); color: #fff }
.btn-primary:hover { background: #27508f }
.btn-ghost { background: transparent; color: var(--azul); border-color: var(--azul) }
.btn-ghost:hover { background: var(--azul); color: #fff }
.on-dark .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .5) }
.on-dark .btn-ghost:hover { background: #fff; color: var(--azul) }

/* ---------- grid técnico (background) ---------- */
.grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(27, 58, 92, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 58, 92, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 40%, transparent 100%)
}
.on-dark .grid-bg {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px)
}

/* ---------- header / nav ---------- */
header {
  position: sticky; top: 0; z-index: 80; height: var(--nav-h);
  background: rgba(244, 246, 248, .85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha)
}
header .row {
  display: flex; align-items: center; justify-content: space-between; height: var(--nav-h)
}
.brand img { height: 30px; display: block }
.nav-links { display: flex; gap: 30px }
.nav-links a {
  color: var(--cinza); text-decoration: none; font-size: 14.5px; font-weight: 500; position: relative
}
.nav-links a[aria-current="page"] { color: var(--azul) }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -5px; height: 1.5px; width: 0;
  background: var(--indigo); transition: width .3s ease
}
.nav-links a:hover { color: var(--azul) }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100% }
.nav-cta { font-size: 14px; padding: 10px 18px }
@media(max-width:900px) { .nav-links { display: none } }

/* ---------- breadcrumb ---------- */
.crumb {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .04em;
  color: var(--cinza)
}
.crumb a { color: var(--indigo); text-decoration: none }
.crumb a:hover { text-decoration: underline }
.crumb span[aria-current] { color: var(--cinza) }

/* ---------- seções ---------- */
section { position: relative; padding: 96px 0 }
@media(max-width:640px) { section { padding: 66px 0 } }
.dark { background: var(--azul); color: #fff }
.dark .lead, .dark .muted { color: rgba(255, 255, 255, .74) }
.dark .eyebrow { color: #9db9de }
.surface { background: var(--superficie) }

/* hero das subpáginas */
.page-hero { padding: 64px 0 72px; overflow: hidden }
.page-hero .inner { position: relative; z-index: 2; max-width: 900px }
.page-hero h1 { margin: 16px 0 22px }

/* prosa / conteúdo indexável */
.prose { max-width: 74ch }
.prose > * + * { margin-top: 20px }
.prose h2 { margin-top: 8px }
.prose h3 { color: var(--azul); margin-top: 12px }
.prose p { color: var(--cinza); font-size: 17.5px }
.prose ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 12px }
.prose ul li {
  display: flex; gap: 12px; align-items: flex-start; color: var(--azul); line-height: 1.5
}
.prose ul li svg { flex: none; width: 20px; height: 20px; color: var(--indigo); margin-top: 3px }
.prose a { color: var(--indigo) }

/* grade de cartões (etapas / serviços) */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px }
@media(max-width:860px) { .cards { grid-template-columns: 1fr } }
.card {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 12px;
  padding: 28px 26px; display: flex; flex-direction: column; gap: 12px
}
.card .pnum {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--indigo)
}
.card h3 { color: var(--azul) }
.card p { color: var(--cinza); font-size: 16px }

/* lista de passos numerados (framework) */
.steps { display: flex; flex-direction: column; gap: 0; margin-top: 40px }
.step-row {
  display: grid; grid-template-columns: 84px 1fr; gap: 26px;
  padding: 34px 0; border-top: 1px solid var(--linha); align-items: start
}
.step-row:last-child { border-bottom: 1px solid var(--linha) }
.step-row .snum {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: clamp(38px, 6vw, 60px); line-height: 1; color: rgba(27, 58, 92, .16)
}
.step-row h3 { color: var(--azul); margin-bottom: 10px }
.step-row p { color: var(--cinza) }
.step-row .chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px }
.step-row .chip {
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--azul);
  background: var(--branco); border: 1px solid var(--linha); border-radius: 5px; padding: 6px 11px
}
@media(max-width:640px) { .step-row { grid-template-columns: 1fr; gap: 12px } }

/* bloco sobre / perfil */
.about { display: grid; grid-template-columns: .8fr 1fr; gap: 56px; align-items: center }
@media(max-width:820px) { .about { grid-template-columns: 1fr; gap: 32px } }
.portrait {
  position: relative; aspect-ratio: 4/5; border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18); background: #16314e
}
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block }
.role {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .08em;
  color: #9db9de; margin: 8px 0 18px; text-transform: uppercase
}

/* CTA final */
.cta-final { text-align: center }
.cta-final h2 { max-width: 20ch; margin: 0 auto 16px }
.cta-final p { max-width: 56ch; margin: 0 auto 28px }

/* navegação entre subpáginas */
.pagelinks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 44px }
@media(max-width:640px) { .pagelinks { grid-template-columns: 1fr } }
.pagelink {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 10px;
  padding: 20px 22px; transition: transform .25s ease, box-shadow .25s ease
}
.pagelink:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(27, 58, 92, .08) }
.pagelink .k { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo) }
.pagelink .t { color: var(--azul); font-weight: 700; font-size: 18px }

/* ---------- footer ---------- */
footer { background: var(--preto); color: rgba(255, 255, 255, .7); padding: 64px 0 34px }
.fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 40px }
@media(max-width:820px) { .fgrid { grid-template-columns: 1fr; gap: 30px } }
footer img { height: 28px }
footer h4 {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5); margin: 0 0 14px; font-weight: 500
}
footer a { color: rgba(255, 255, 255, .8); text-decoration: none }
footer a:hover { color: #fff }
.fcol p { margin: 7px 0; font-size: 15px }
.legal {
  margin-top: 42px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px; color: rgba(255, 255, 255, .45); line-height: 1.8
}

@media(prefers-reduced-motion:reduce) { * { animation: none !important; transition: none !important } }