/* ===================================================================
   EDITORIAL OVERLAY · sobrescreve tokens p/ visual senior-designed
   inspirado em: Stripe / Linear / Vercel / Pentagram / Ricardo Vargas
   filosofia: serif headlines + warm paper + monospace meta + hard rules
   ================================================================= */

:root {
  /* Space Grotesk — geométrica quadrada, minimalista tech (Vercel/NASA-style) */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Space Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Paleta warm editorial (paper + ink + brand HK como accent único) */
  --bg:        #F5F2EC;     /* warm off-white paper */
  --bg-2:      #EDE8DD;     /* paper alt seção */
  --bg-3:      #FFFFFF;     /* card / surface elevada */
  --bg-card:   #FFFFFF;

  --ink-1: #131313;          /* type principal, near-black */
  --ink-2: #2A2A28;          /* body strong */
  --ink-3: #54537C;          /* HK brand accent */
  --ink-4: #5A5854;          /* secundário */
  --ink-5: #8B8985;          /* legendas */
  --line:      #1A1A1A;       /* 1px hard rules */
  --line-soft: #D8D5CE;      /* divisor sutil */

  /* Sombras só onde rule não cabe (cards interativos, modais) */
  --sh-1: 0 1px 0 rgba(20,20,20,.06);
  --sh-2: 0 1px 2px rgba(20,20,20,.06), 0 4px 12px rgba(20,20,20,.04);
  --sh-3: 0 4px 12px rgba(20,20,20,.07), 0 12px 32px rgba(20,20,20,.06);
  --sh-4: 0 6px 16px rgba(20,20,20,.08), 0 24px 48px rgba(20,20,20,.10);

  /* Square edges */
  --r-xs: 0; --r-sm: 0; --r-md: 2px; --r-lg: 4px; --r-xl: 6px; --r-pill: 0;

  /* Spacing editorial: 8pt + Fibonacci-ish */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 40px; --s-7: 64px; --s-8: 104px; --s-9: 144px; --s-10: 200px;
  --container: 1280px;

  /* Type scale editorial — H1 muito maior */
  --t-xs: 11px;
  --t-sm: 14px;
  --t-md: 17px;
  --t-lg: 19px;
  --t-xl: 24px;
  --h6: clamp(20px, 1.2vw + 16px, 26px);
  --h5: clamp(24px, 1.5vw + 18px, 32px);
  --h4: clamp(30px, 2vw + 20px, 42px);
  --h3: clamp(38px, 2.6vw + 22px, 56px);
  --h2: clamp(46px, 4vw + 24px, 80px);
  --h1: clamp(56px, 7vw + 24px, 132px);

  --btn-h-sm: 36px;
  --btn-h-md: 46px;
  --btn-h-lg: 56px;
}

/* ============= Base ============= */
body {
  font-family: var(--font-body);
  font-size: var(--t-md);
  color: var(--ink-2);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01';
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;             /* Geist precisa peso forte pra títulos */
  letter-spacing: -.04em;
  line-height: 1.0;
  color: var(--ink-1);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
h1 { font-size: var(--h1); font-weight: 700; letter-spacing: -.05em; line-height: 0.94; }
h2 { font-size: var(--h2); font-weight: 700; letter-spacing: -.04em; line-height: 0.98; }
h3 { font-size: var(--h3); font-weight: 700; letter-spacing: -.032em; line-height: 1.04; }
h4 { font-size: var(--h4); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
h5, h6 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; }

/* Garantia: TODOS os elementos de display usam Montserrat */
h1, h2, h3, h4, h5, h6,
.hero h1, .hero h1 em,
.hero__meta-item strong,
.kpi__num, .kpi__num em,
.manifesto p, .manifesto cite,
.pillar h4, .pillar__num,
.case__brand, .case__year, .case__sector,
.cert h5, .audience__card h5,
.bento__cell h5, .bento__num,
.timeline__item h5, .timeline__year,
.method__step, .step-num,
.service h4, .service__num,
.cta-banner h3,
.site-footer__brand,
.contact-strip p, .contact-strip a,
.newsletter h4,
.faq__item summary,
.section-title h2,
.brand, .brand small,
.tag, .tool-chip,
.eyebrow {
  font-family: var(--font-display) !important;
}

/* Bridge invisível larga + sem visibility para JS controlar */
.nav .nav-dropdown::after {
  height: 24px;
  top: -24px;
  left: -8px; right: -8px;
  pointer-events: auto;
}
.nav .nav-dropdown { margin-top: 4px; }
/* Quando aberto via JS, dropdown sempre acessível */
.nav .nav-group.is-open .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
  pointer-events: auto;
}

/* Foto sem cortar o rosto: ancorar topo */
.hero__visual img,
.image-card img,
.case__visual img {
  object-fit: cover;
  object-position: 50% 18%;
}

/* sem itálico — em vira cor brand sólida */
h1 em, h2 em, h3 em, h4 em { font-style: normal; color: var(--ink-3); font-weight: inherit; }
.accent { color: var(--ink-3); font-style: normal; }

/* Eyebrow editorial: monospace caps */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-1);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: var(--s-5);
  padding: 0; border: none; background: none;
}
.eyebrow::before {
  content: ''; width: 24px; height: 1px; background: var(--ink-1);
}

/* Lead paragraph */
.lead {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(18px, 0.8vw + 16px, 22px);
  line-height: 1.5; color: var(--ink-4); max-width: 640px;
}

/* ============= Header ============= */
.site-header {
  background: rgba(245,242,236,.84);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header.scrolled {
  background: rgba(245,242,236,.96);
  border-bottom-color: var(--line);
  box-shadow: none;
}
.brand { font-family: var(--font-display); font-weight: 500; font-size: 17px; letter-spacing: -.005em; }
.brand small { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .22em; font-weight: 500; color: var(--ink-5); }
.nav a, .nav button.nav-trigger {
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  color: var(--ink-2); letter-spacing: -.005em;
}
.nav .nav-dropdown {
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  box-shadow: 0 8px 24px rgba(20,20,20,.08);
}
.nav .nav-dropdown::before {
  border-color: var(--line);
}
.nav .nav-dropdown a strong { font-family: var(--font-body); font-weight: 600; }
.nav .nav-dropdown a small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; }

/* search */
.search input {
  background: var(--bg-2);
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 13px;
}
.search input:focus { border-color: var(--ink-1); background: #fff; }

/* ============= Botões ============= */
.btn {
  font-family: var(--font-body); font-weight: 600;
  border-radius: 0;
  letter-spacing: -.005em;
  font-size: 14px;
}
.btn--primary { background: var(--ink-1); color: #fff; box-shadow: none; }
.btn--primary:hover { background: var(--ink-3); transform: none; box-shadow: none; }
.btn--ghost {
  background: transparent;
  border: 1px solid var(--ink-1);
  color: var(--ink-1);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--ink-1); color: var(--bg); transform: none; box-shadow: none; }

/* ============= Section ============= */
.section { padding: var(--s-8) 0; position: relative; }
.section--soft { background: var(--bg-2); }
.section--alt { background: var(--bg-3); }
/* hard rule entre seções */
.section + .section:not(.section--dark)::before {
  content: ''; display: block; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px); max-width: var(--container);
  height: 1px; background: var(--line);
}

/* ============= HERO editorial ============= */
.hero {
  padding: var(--s-9) 0 var(--s-8);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow: visible;
}
.hero::before, .hero::after { display: none; }
.hero__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-7);
  align-items: center;
}
.hero__visual { max-height: 78vh; }
.hero h1 {
  font-size: clamp(54px, 7.5vw + 14px, 132px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -.055em;
  margin: var(--s-5) 0 var(--s-6);
  font-family: var(--font-display);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
.hero h1 em { font-style: normal; font-weight: 700; color: var(--ink-3); }
.hero p.lead {
  max-width: 520px;
  font-size: clamp(18px, 0.6vw + 17px, 21px);
  color: var(--ink-4);
  line-height: 1.5;
  font-weight: 400;
}
.hero__eyebrow {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-1);
  display: inline-flex; align-items: center; gap: 10px;
  height: auto;
}
.hero__eyebrow .dot {
  width: 6px; height: 6px; border-radius: 0;
  background: var(--ink-3);
  animation: none;
}
.hero__visual {
  aspect-ratio: 4/5;
  background: var(--bg-2);
  border-radius: 0;
  border: 1px solid var(--line);
  box-shadow: none;
}
.hero__floats { display: none; } /* tilted cards = AI cliché */

.hero__meta {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s-6) 0;
  margin-top: var(--s-7);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.hero__meta-item {
  padding: 0 var(--s-5);
  border-right: 1px solid var(--line-soft);
}
.hero__meta-item:last-child { border-right: none; }
.hero__meta-item:first-child { padding-left: 0; }
.hero__meta-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(34px, 2.6vw + 14px, 48px);
  font-weight: 700;
  color: var(--ink-1);
  line-height: 0.95;
  letter-spacing: -.05em;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv11';
}
.hero__meta-item span {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-5);
  font-weight: 500;
}

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(44px, 11vw, 72px); }
  .hero__visual { max-width: 100%; aspect-ratio: 4/5; }
  .hero__meta { grid-template-columns: 1fr 1fr; gap: 1px; }
  .hero__meta-item { border: none; padding: var(--s-4) 0; border-bottom: 1px solid var(--line-soft); }
}

/* ============= KPIs editoriais (numbers gigantes) ============= */
.kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.kpis > div {
  padding: var(--s-7) var(--s-5);
  border-right: 1px solid var(--line-soft);
}
.kpis > div:last-child { border-right: none; }
.kpi__num {
  font-family: var(--font-display);
  font-size: clamp(48px, 4.5vw + 20px, 88px);
  font-weight: 700; color: var(--ink-1);
  line-height: 0.9; letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv11';
}
.kpi__num em { color: var(--ink-3); font-style: normal; font-weight: 700; }
.kpi__label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-5);
  margin-top: var(--s-4); font-weight: 500;
}
@media (max-width: 800px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpis > div:nth-child(2n) { border-right: none; }
  .kpis > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
}

/* ============= Manifesto / Quote-as-design ============= */
.manifesto {
  padding: var(--s-9) 0; background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.manifesto::before { display: none; } /* sem aspas decorativas gigantes */
.manifesto .container { display: grid; grid-template-columns: 2fr 8fr 2fr; }
.manifesto p {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.2vw + 12px, 44px);
  font-weight: 600; font-style: normal;
  line-height: 1.16;
  color: var(--ink-1);
  letter-spacing: -.035em;
  max-width: none;
  margin: 0;
}
.manifesto p span { color: var(--ink-3); font-style: normal; font-weight: 600; }
.manifesto cite {
  grid-column: 2;
  display: block; margin-top: var(--s-6);
  font-family: var(--font-mono);
  font-size: 11px; font-style: normal;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-5); font-weight: 500;
}
@media (max-width: 800px) {
  .manifesto .container { grid-template-columns: 1fr; }
  .manifesto p, .manifesto cite { grid-column: 1; }
}

/* ============= Pillars editorial ============= */
.pillars {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.pillar {
  padding: var(--s-7) var(--s-5);
  background: transparent;
  border-right: 1px solid var(--line-soft);
  text-align: left;
}
.pillar:last-child { border-right: none; }
.pillar__num {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .15em;
  color: var(--ink-3); font-weight: 500;
  display: block; margin-bottom: var(--s-5);
}
.pillar h4 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2vw + 10px, 38px);
  font-weight: 700; font-style: normal;
  letter-spacing: -.04em;
  color: var(--ink-1);
  margin: 0 0 var(--s-3);
  line-height: 1;
}
.pillar p {
  font-size: 14px; line-height: 1.55; color: var(--ink-4);
  margin: 0;
}
@media (max-width: 800px) {
  .pillars { grid-template-columns: 1fr 1fr; }
  .pillar { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
  .pillar:nth-child(2n) { border-right: none; }
  .pillar:nth-last-child(-n+2) { border-bottom: none; }
}

/* ============= Cards: square ============= */
.card {
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  box-shadow: none;
  transition: border-color 200ms ease-out, transform 200ms ease-out;
}
.card:hover {
  border-color: var(--line);
  transform: translateY(-2px);
  box-shadow: none;
}

.service {
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  box-shadow: none;
  padding: var(--s-6) var(--s-5);
}
.service::before {
  background: var(--ink-3);
  width: 0;
  height: 1px;
  top: -1px;
  bottom: auto;
  transform: scaleX(0);
  transform-origin: left;
}
.service:hover {
  border-color: var(--line);
  background: var(--bg-3);
  transform: translateY(-2px);
  box-shadow: none;
}
.service:hover::before {
  width: 100%;
  transform: scaleX(1);
}
.service__num {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .14em;
  color: var(--ink-3);
}
.service h4 {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.4vw + 12px, 30px);
  font-weight: 500;
  letter-spacing: -.018em;
  margin: var(--s-3) 0 var(--s-3);
  line-height: 1.1;
}
.service p { font-size: 14px; line-height: 1.6; color: var(--ink-4); }
.service__more {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: .14em;
}

/* ============= Method ============= */
.method__item {
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  box-shadow: none;
}
.method__item:hover { border-color: var(--line); transform: none; box-shadow: none; }
.method__step {
  width: auto; height: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .14em;
  color: var(--ink-3);
  margin-bottom: var(--s-4);
}
.method__item h4 {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.4vw + 10px, 28px);
  font-weight: 500;
}
.method::before { display: none; }

/* ============= Logos wall — editorial ============= */
.logos-wall {
  border: 1px solid var(--line);
  background: transparent;
  gap: 0;
  border-radius: 0;
  box-shadow: none;
}
.logos-wall .logo-cell {
  background: transparent;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.015em;
  font-size: clamp(18px, 1.2vw + 10px, 24px);
}
.logos-wall .logo-cell small {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: .12em;
  font-weight: 500;
}

/* ============= Case visual ============= */
.case__visual {
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--bg-2);
  box-shadow: none;
}
.case__visual .case__brand {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.025em;
}
.case__visual .case__sector,
.case__visual .case__year {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em;
}

/* ============= Quote ============= */
.quote {
  background: var(--ink-1); color: var(--bg);
  border-radius: 0;
  padding: var(--s-9) var(--s-7);
  border: none;
}
.quote::before {
  display: none;  /* sem aspas decorativas */
}
.quote blockquote {
  font-family: var(--font-display);
  font-weight: 600; font-style: normal;
  font-size: clamp(22px, 1.8vw + 12px, 34px);
  line-height: 1.25;
  letter-spacing: -.03em;
}
.quote cite {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em;
}

/* ============= CTA banner ============= */
.cta-banner {
  background: var(--ink-1); color: var(--bg);
  border-radius: 0;
  padding: var(--s-9) var(--s-7);
  box-shadow: none;
  border-top: 1px solid var(--line);
}
.cta-banner::before { display: none; }
.cta-banner h3 {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -.045em;
  color: var(--bg); line-height: 1.02;
  font-size: clamp(26px, 2.2vw + 10px, 44px);
}
.cta-banner .btn--primary { background: var(--bg); color: var(--ink-1); }
.cta-banner .btn--primary:hover { background: var(--ink-3); color: var(--bg); }

/* ============= FAQ ============= */
.faq__item {
  border: 1px solid var(--line-soft);
  border-radius: 0;
  box-shadow: none;
}
.faq__item summary { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 0.8vw + 14px, 22px); letter-spacing: -.012em; }

/* ============= Cert ============= */
.cert {
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  box-shadow: none;
}
.cert:hover { border-color: var(--line); transform: none; box-shadow: none; }
.cert__icon {
  border-radius: 0;
  background: var(--ink-1);
}
.cert h5 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.015em;
}
.cert small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; }

/* ============= Audience cards ============= */
.audience__card {
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  box-shadow: none;
}
.audience__card:hover { border-color: var(--line); }
.audience__card h5 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.015em;
}

/* ============= Tags / chips: square ============= */
.tag, .tool-chip {
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em;
  font-weight: 500; text-transform: uppercase;
}
.tool-chip { background: transparent; border: 1px solid var(--line); }

/* ============= Image-card sem radius ============= */
.image-card {
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--bg-2);
  box-shadow: none;
}

/* ============= Bento ============= */
.bento__cell {
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  box-shadow: none;
}
.bento__cell:hover { border-color: var(--line); transform: none; box-shadow: none; }
.bento__num {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .14em; color: var(--ink-3);
}
.bento__cell h5 { font-family: var(--font-display); font-weight: 500; }

/* ============= Newsletter ============= */
.newsletter {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.newsletter h4 { font-family: var(--font-display); font-weight: 500; }
.newsletter__form input { border-radius: 0; border: 1px solid var(--line-soft); background: var(--bg-3); }

/* ============= Contact strip ============= */
.contact-strip {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.contact-strip__icon { border-radius: 0; background: var(--ink-1); color: var(--bg); }
.contact-strip__icon svg { color: var(--bg); }
.contact-strip h6 { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; font-weight: 500; }
.contact-strip p, .contact-strip a { font-family: var(--font-display); font-weight: 500; letter-spacing: -.012em; }

/* ============= Step cards ============= */
.card--step .step-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500; letter-spacing: .14em;
  color: var(--ink-3);
  margin-bottom: var(--s-5);
}
.card--step h4 {
  font-family: var(--font-display);
  font-weight: 500; letter-spacing: -.015em;
}

/* ============= Timeline ============= */
.timeline__year {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .14em;
  font-weight: 500; color: var(--ink-3);
}
.timeline__item h5 {
  font-family: var(--font-display);
  font-weight: 500; letter-spacing: -.015em;
}
.timeline__item::before {
  border-radius: 0;
  background: var(--ink-1);
  border-color: var(--ink-1);
}

/* ============= Section title ============= */
.section-title h2 {
  max-width: 920px;
}
.section-title h2 + p { font-size: 18px; line-height: 1.5; color: var(--ink-4); }

/* ============= Footer editorial ============= */
.site-footer {
  background: var(--ink-1); color: var(--bg);
  padding: var(--s-9) 0 var(--s-6);
}
.site-footer::before { display: none; }
.site-footer__brand {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -.045em;
  font-size: clamp(28px, 2vw + 14px, 40px);
  line-height: 0.95;
}
.site-footer__brand small {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .18em;
  margin-top: 8px;
}
.site-footer__pitch {
  font-family: var(--font-body);
  font-size: 14px; line-height: 1.6;
  color: rgba(245,242,236,.66);
}
.site-footer h6 {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .18em;
  font-weight: 500; color: rgba(245,242,236,.5);
}
.site-footer__list a {
  font-family: var(--font-body);
  font-size: 14px;
}
.site-footer__bottom {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  border-top: 1px solid rgba(245,242,236,.12);
  margin-top: var(--s-6); padding-top: var(--s-5);
}
.socials a { border-radius: 0; }

/* ============= Selection ============= */
::selection { background: var(--ink-1); color: var(--bg); }

/* ============= Hard rules entre seções principais (não soft) ============= */
.section + .section:not(.section--dark)::before {
  background: var(--line-soft);
}

/* fonte preload hint */
.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }

/* ============= BANNER FULL-WIDTH (hero novo) ============= */
.banner {
  position: relative;
  width: 100%;
  min-height: 88vh;
  background: var(--ink-1);
  color: var(--bg);
  overflow: hidden;
  display: grid; align-items: center;
  border-bottom: 1px solid var(--line);
}
.banner__bg {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.banner__bg img,
.banner__bg picture {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transform: scale(1.05);
  transition: transform 1.2s var(--ease-out);
  will-change: transform;
}
.banner__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19,19,19,.55) 0%, rgba(19,19,19,.78) 60%, rgba(19,19,19,.92) 100%);
  z-index: 1;
}
.banner__inner {
  position: relative; z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  padding: var(--s-9) var(--s-5) var(--s-8);
}
.banner__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(245,242,236,.7);
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: var(--s-6);
}
.banner__eyebrow::before {
  content: ''; width: 36px; height: 1px;
  background: rgba(245,242,236,.5);
}
.banner h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.4vw + 14px, 116px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 0.96;
  color: var(--bg);
  text-transform: uppercase;
  margin: 0 0 var(--s-6);
  max-width: 1100px;
}
.banner h1 em { font-style: normal; color: var(--bg); opacity: .7; font-weight: 400; }
.banner__sub {
  font-family: var(--font-body);
  font-size: clamp(17px, 0.5vw + 16px, 21px);
  line-height: 1.5;
  font-weight: 400;
  color: rgba(245,242,236,.78);
  max-width: 620px;
  margin: 0 0 var(--s-7);
  text-transform: none;
}
.banner__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.banner__actions .btn--primary { background: var(--bg); color: var(--ink-1); border-color: var(--bg); }
.banner__actions .btn--primary:hover { background: var(--ink-3); color: var(--bg); border-color: var(--ink-3); }
.banner__actions .btn--ghost { color: var(--bg); border-color: rgba(245,242,236,.45); }
.banner__actions .btn--ghost:hover { background: var(--bg); color: var(--ink-1); border-color: var(--bg); }
@media (max-width: 800px) {
  .banner { min-height: 70vh; }
  .banner__inner { padding: var(--s-8) var(--s-4) var(--s-7); }
}

/* ============= CAIXA ALTA NOS TÍTULOS ============= */
h1, h2, h3, .section-title h2,
.kpi__num, .hero__meta-item strong,
.case__brand, .cta-banner h3,
.banner h1, .quote blockquote {
  text-transform: uppercase;
  letter-spacing: -.02em;
}
/* Subtítulos e texto: caixa baixa natural */
h4, h5, h6, p, .lead, .case__list, body, li {
  text-transform: none;
}
/* Eyebrows e mono já uppercase via classe */

/* ============= ANIMAÇÕES VISÍVEIS ============= */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 800ms cubic-bezier(.22,1,.36,1), transform 800ms cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 100ms; }
.reveal[data-delay="2"] { transition-delay: 200ms; }
.reveal[data-delay="3"] { transition-delay: 300ms; }
.reveal[data-delay="4"] { transition-delay: 400ms; }
.reveal[data-delay="5"] { transition-delay: 500ms; }

/* Cards com hover scale */
.card, .service, .audience__card, .cert, .bento__cell, .method__item {
  transition: transform 250ms var(--ease-out), border-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}
.card:hover, .service:hover, .audience__card:hover, .cert:hover, .bento__cell:hover, .method__item:hover {
  transform: translateY(-4px);
  border-color: var(--line);
}

/* Banner ken-burns animado (auto) */
@keyframes kenBurns {
  0% { transform: scale(1.05) translateY(0); }
  100% { transform: scale(1.12) translateY(-2%); }
}
.banner__bg img { animation: kenBurns 20s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .banner__bg img { animation: none; }
}

/* Pulse no dot do hero/banner */
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.7); }
}
.banner__eyebrow .dot { animation: dotPulse 2.4s ease-in-out infinite; }

/* Botões com animação na seta */
.btn svg { transition: transform 250ms var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

/* Underline draw nos service__more */
.service__more { position: relative; }
.service__more::after {
  content: ''; position: absolute; left: 0; bottom: 6px;
  height: 1px; width: 0; background: currentColor;
  transition: width 350ms cubic-bezier(.65,0,.35,1);
}
.service:hover .service__more::after { width: 100%; }