/* ============================================================
   EKOA — Landing Page
   styles.css
   ------------------------------------------------------------
   Sumário
   01. Tokens (variáveis de marca)
   02. Reset & base
   03. Tipografia utilitária
   04. Layout utilitário
   05. Navbar
   06. Hero
   07. Diagnóstico (stats)
   08. Método (pilares)
   09. Cases (depoimentos)
   10. Financiamento
   11. Statement
   12. Benefícios
   13. Fundadores
   14. FAQ
   15. Rodapé
   16. Responsivo
   ============================================================ */

/* ---------- 00. FONTES (auto-hospedadas, sem CDN) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('fonts/fraunces-italic-300_500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('fonts/fraunces-italic-300_500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('fonts/fraunces-normal-300_500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('fonts/fraunces-normal-300_500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/inter-tight-normal-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/inter-tight-normal-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-tight-normal-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-tight-normal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-tight-normal-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-tight-normal-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-normal-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-normal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 01. TOKENS ---------- */
:root {
  /* cores */
  --azul-900: #070D15;  /* fundo escuro alternado */
  --azul-800: #0B1929;  /* fundo base */
  --azul-700: #0F1B2C;  /* cards */
  --areia:    #F5F0E8;  /* texto principal */
  --ouro:     #C09060;  /* dourado ação */
  --ouro-luz: #D8AE78;  /* dourado destaque */

  /* Opacidades do texto.
     Medido: sobre os fundos da marca, .50 e o piso para bater 4.5:1 (WCAG AA).
     Os tons .28/.32/.40 do desenho original davam 2.3 a 3.5:1 — ilegiveis.
     A hierarquia agora e feita por TAMANHO e FONTE, nao por apagar o texto. */
  --texto-70: rgba(245, 240, 232, .70);  /* 8.0:1 */
  --texto-62: rgba(245, 240, 232, .62);  /* 6.5:1 */
  --texto-55: rgba(245, 240, 232, .55);  /* 5.4:1 */
  --texto-50: rgba(245, 240, 232, .50);  /* 4.6:1 — piso legivel */
  --texto-fraco: rgba(245, 240, 232, .50);  /* apoio: legendas, fontes, rodape */

  /* bordas */
  --borda:       rgba(192, 144, 96, .14);
  --borda-forte: rgba(192, 144, 96, .35);

  /* fontes */
  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Inter Tight', system-ui, -apple-system, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  /* espaçamento */
  --gutter: clamp(22px, 6vw, 80px);
  --secao:  clamp(80px, 10vw, 120px);
  --radius: 16px;
}

/* ---------- 02. RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* compensa a navbar sticky ao pular por âncora */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--azul-800);
  color: var(--areia);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--ouro-luz); text-decoration: none; }
a:hover { color: var(--ouro); }

::selection { background: var(--ouro); color: var(--azul-800); }

:focus-visible {
  outline: 2px solid var(--ouro-luz);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ---------- 03. TIPOGRAFIA UTILITÁRIA ---------- */

/* etiqueta mono acima dos títulos */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ouro);
  margin: 0 0 22px;
}

/* títulos serifados */
.h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0 0 clamp(24px, 4vh, 34px);
  text-wrap: balance;
}
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 22px;
  text-wrap: balance;
}
.h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 30px;
  text-wrap: balance;
}

/* trecho dourado em itálico dentro dos títulos */
.destaque {
  font-style: italic;
  color: var(--ouro-luz);
}

.lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto-50);
  font-weight: 300;
  margin: 0;
}

/* ---------- 04. LAYOUT UTILITÁRIO ---------- */
.secao {
  padding: var(--secao) var(--gutter);
  position: relative;
  overflow: hidden;
}
.secao--clara { background: var(--azul-800); }
.secao--escura { background: var(--azul-900); }

.container { max-width: 1160px; margin: 0 auto; position: relative; z-index: 2; }
.container--estreito { max-width: 1000px; }

.cabecalho-secao {
  max-width: 820px;
  margin: 0 auto 60px;
  text-align: center;
}

/* círculos concêntricos de fundo */
.aneis {
  position: absolute;
  pointer-events: none;
  opacity: .05;
  z-index: 1;
}
.aneis--dir { right: -12%; top: 50%; transform: translateY(-50%); width: min(720px, 90vw); height: min(720px, 90vw); }
.aneis--esq { left: -14%;  top: 50%; transform: translateY(-50%); width: min(680px, 86vw); height: min(680px, 86vw); }
.aneis--centro { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, 120vw); height: min(760px, 120vw); opacity: .06; }

/* botão de ação */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ouro);
  color: var(--azul-800);
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(14px, 1vw, 16px);
  padding: 19px 34px;
  border-radius: 8px;
  letter-spacing: .01em;
  box-shadow: 0 18px 44px rgba(192, 144, 96, .3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover {
  color: var(--azul-800);
  transform: translateY(-2px);
  box-shadow: 0 22px 52px rgba(192, 144, 96, .42);
}
.btn__seta { font-size: 17px; }
.btn--menor { font-size: 15px; padding: 18px 34px; box-shadow: 0 16px 40px rgba(192, 144, 96, .24); }

/* faixa de logos de clientes */
.clientes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
}
.clientes__titulo {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.clientes__item {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--texto-fraco);
}

/* ---------- 05. NAVBAR ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px var(--gutter);
  background: rgba(11, 25, 41, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borda);
}
.logo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -.02em;
  color: var(--areia);
}
.logo__ponto { color: var(--ouro-luz); }

.navbar__menu {
  display: flex;
  align-items: center;
  gap: 28px;
}
.navbar__links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.navbar__cta-curto { display: none; }
.navbar__link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-55);
  transition: color .2s ease;
  /* o texto tem 14px de altura: o padding cria area de toque de 44px
     (minimo WCAG/Apple) sem mudar nada visualmente */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}
.navbar__link:hover { color: var(--areia); }

.navbar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;   /* area de toque */
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--azul-800);
  background: var(--ouro);
  padding: 11px 20px;
  border-radius: 6px;
  font-weight: 500;
  transition: background .2s ease;
}
.navbar__cta:hover { background: var(--ouro-luz); color: var(--azul-800); }

/* ---------- 06. HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--azul-800);
}
.hero__grade {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  min-height: calc(100vh - 73px);
  min-height: calc(100svh - 73px); /* svh: desconta a barra do navegador no celular */
  padding: 0 var(--gutter);
  display: grid;
  /* texto na coluna esquerda, foto na direita.
     A tagline (1o filho no HTML) ocupa a esquerda, acima do texto. */
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
  grid-template-areas:
    "tag   visual"
    "texto visual";
  grid-template-rows: auto 1fr;
  column-gap: clamp(20px, 3vw, 48px);
  align-items: stretch;
}
.hero__tagline { grid-area: tag; align-self: end; }
.hero__texto   { grid-area: texto; align-self: start; }
.hero__visual  { grid-area: visual; }
.hero__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0 clamp(40px, 7vh, 90px);
  max-width: 560px;
}
.hero__tagline {
  font-family: var(--mono);
  font-size: clamp(10px, 2.4vw, 11px);
  letter-spacing: clamp(.14em, .8vw, .28em);
  word-spacing: .5em;   /* o respiro entre palavras vem daqui, nao de   */
  text-transform: uppercase;
  color: var(--ouro);
  margin: 0 0 clamp(24px, 6vh, 56px);
  max-width: 100%;
}
.hero__sub {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.7;
  color: var(--texto-55);
  max-width: 500px;
  margin: 0 0 clamp(30px, 5vh, 44px);
  font-weight: 300;
}
.hero__sub strong { color: var(--areia); font-weight: 500; }
.hero__sub b { font-weight: 600; color: var(--areia); }
.hero__cta { align-self: flex-start; }

.hero__visual {
  position: relative;
  align-self: stretch;
  min-height: min(72vh, 760px);
}
.hero__aneis {
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 128%);
  height: min(720px, 128%);
  opacity: .32;
  pointer-events: none;
}
.hero__foto {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-48%);
  height: 100%;
  width: auto;
  max-width: 135%;
  object-fit: contain;
  object-position: bottom;
}
.hero__clientes {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter) 30px;
}

/* duotone e assinatura: exclusivos do celular */
.hero__duo { display: none; }

/* ---------- 07. DIAGNÓSTICO (stats) ---------- */
.grade-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.card {
  position: relative;
  background: var(--azul-700);
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  padding: 34px 28px;
  overflow: hidden;
}
/* barrinha dourada no canto do card */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 56px;
  background: var(--ouro);
}
.card__numero {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 4.2vw, 56px);
  line-height: 1;
  color: var(--ouro-luz);
  letter-spacing: -.02em;
  margin-bottom: 16px;
}
.card__texto {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--texto-62);
  font-weight: 300;
}
.fontes {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--texto-fraco);
  margin-top: 26px;
}

/* ---------- 08. MÉTODO (pilares) ---------- */
.grade-pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 26px;
}
.pilar { display: flex; flex-direction: column; align-items: flex-start; }
.pilar__medalha {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--azul-700);
  border: 1px solid var(--borda-forte);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
}
.pilar__medalha svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
}
.pilar__medalha span {
  position: relative;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--ouro-luz);
}
.pilar__etapa {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 10px;
}
.pilar__titulo {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--areia);
  margin-bottom: 10px;
}
.pilar__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--texto-50);
  font-weight: 300;
}

/* ---------- 09. DEPOIMENTOS ---------- */
.depoimentos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.depo {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--azul-700);
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  padding: 34px 28px 28px;
  overflow: hidden;
}
/* barra dourada no canto, como nos cards de estatistica */
.depo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 56px;
  background: var(--ouro);
}
.depo__aspas {
  font-family: var(--serif);
  font-size: 60px;
  line-height: .6;
  color: var(--ouro);
  opacity: .35;
  height: 30px;
  margin-bottom: 14px;
}
.depo__texto {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--areia);
  font-weight: 300;
  flex: 1;
}
.depo__assinatura {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--borda);
}
.depo__nome {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--areia);
}
.depo__cargo {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ouro);
}

/* ---------- 10. FINANCIAMENTO ---------- */
.duas-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}
.paragrafo {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--texto-55);
  font-weight: 300;
  margin: 0 0 18px;
}
.paragrafo:last-child { margin-bottom: 0; }

.lista-numeros {
  background: var(--azul-700);
  border: 1px solid rgba(192, 144, 96, .16);
  border-radius: 20px;
  padding: 12px;
}
.lista-numeros__item {
  padding: 26px 24px;
  border-bottom: 1px solid rgba(192, 144, 96, .12);
  display: flex;
  align-items: baseline;
  gap: 22px;
}
/* o original deixava borda sobrando no último item */
.lista-numeros__item:last-child { border-bottom: none; }
.lista-numeros__valor {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 2.8vw, 40px);
  color: var(--ouro-luz);
  letter-spacing: -.02em;
  flex: none;
  min-width: 120px;
}
.lista-numeros__label {
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto-62);
  font-weight: 300;
}

/* ---------- 11. STATEMENT ---------- */
.statement { padding: clamp(90px, 12vw, 130px) var(--gutter); }
.statement__titulo {
  position: relative;
  z-index: 2;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 5vw, 68px);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--areia);
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  text-wrap: balance;
}

/* ---------- 12. BENEFÍCIOS ---------- */
.beneficios { padding-bottom: 0; }
.grade-beneficios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.beneficio {
  position: relative;
  background: var(--azul-700);
  border: 1px solid rgba(192, 144, 96, .12);
  border-radius: 12px;
  padding: 32px 28px;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.beneficio:hover { border-color: var(--borda-forte); transform: translateY(-3px); }
.beneficio::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 52px;
  background: var(--ouro);
}
.beneficio__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ouro);
  margin-bottom: 16px;
}
.beneficio__titulo {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--areia);
  margin-bottom: 12px;
}
.beneficio__desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--texto-50);
  font-weight: 300;
}

.cta-final { text-align: center; padding: 90px 0 40px; }
.cta-final .eyebrow { margin-bottom: 26px; }

.rodape-clientes {
  border-top: 1px solid rgba(192, 144, 96, .12);
  padding: 26px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 32px);
  flex-wrap: wrap;
}
.rodape-clientes .clientes__item { font-size: 18px; color: var(--texto-fraco); }

/* ---------- 13. FUNDADORES ---------- */
.grade-fundadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.fundador {
  background: var(--azul-700);
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  overflow: hidden;
}
/* foto do fundador */
/* Altura FIXA em px (nao depende de aspect-ratio, que falha em navegador
   antigo e deixava a foto esticada ocupando a tela inteira).
   A imagem e posicionada em absoluto e recortada por object-fit. */
.fundador__foto {
  position: relative;
  height: 300px;
  overflow: hidden;
  background: var(--azul-800);
  border-bottom: 1px solid var(--borda);
}
.fundador__foto img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: 50% 30%;   /* prioriza o rosto */
  display: block;
}
.fundador__info { padding: 30px 30px 34px; }
.fundador__nome {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--areia);
  margin-bottom: 6px;
}
.fundador__papel {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 18px;
}
.fundador__bio {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--texto-55);
  font-weight: 300;
}

/* ---------- 14. FAQ ---------- */
.faq {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}
.faq__item {
  border-bottom: 1px solid rgba(192, 144, 96, .16);
}
.faq__pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--areia);
}
/* remove o triângulo nativo do <details> */
.faq__pergunta::-webkit-details-marker { display: none; }

.faq__icone {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(192, 144, 96, .4);
  color: var(--ouro-luz);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: transform .3s ease;
}
.faq__item[open] .faq__icone { transform: rotate(45deg); }

.faq__resposta {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--texto-55);
  font-weight: 300;
  margin: 0;
  padding: 0 0 24px;
}

/* ---------- 15. RODAPÉ ---------- */
.rodape {
  background: var(--azul-900);
  border-top: 1px solid rgba(192, 144, 96, .12);
  padding: 64px var(--gutter) 72px;
}
.rodape__grade {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.rodape__marca { max-width: 340px; }
.rodape__logo {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--areia);
  margin-bottom: 16px;
}
.rodape__texto {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--texto-fraco);
  font-weight: 300;
  margin: 0;
}
.rodape__contato { text-align: right; }
.rodape__wa {
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* area de toque */
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ouro-luz);
  margin-bottom: 16px;
}
.rodape__meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  line-height: 1.9;
}

/* ---------- 16. RESPONSIVO ---------- */
@media (max-width: 900px) {
  .rodape__contato { text-align: left; }

  /* HERO MOBILE — ordem: tagline, foto colorida inteira (sem mover),
     titulo colado a ~1mm da foto, texto, botao.
     A .hero__grade vira uma coluna simples. */
  .hero__grade {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    padding: 0;                 /* o respiro lateral fica por conta dos filhos */
  }

  /* 1) tagline no topo, uma linha */
  .hero__tagline {
    order: 1;
    padding: 18px var(--gutter) 0;
    letter-spacing: .045em;
    word-spacing: .28em;
    font-size: 10px;
    white-space: nowrap;
    margin: 0;
  }

  /* 2) foto colorida, inteira, largura toda — SEM mover.
     A base dissolve no fundo (degrade via mask), sem borda reta. */
  .hero__visual {
    order: 2;
    position: static;
    min-height: 0;
    height: auto;
    margin: 6px 0 0;
    overflow: visible;
  }
  .hero__aneis { display: none; }               /* aneis so no fundo do desktop */
  .hero__duo   { display: none; }               /* nada de duotone: foto original */
  .hero__foto {
    position: static;
    transform: none;
    left: auto; bottom: auto;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    display: block;
    /* degrade: a foto vai sumindo no ultimo trecho, dissolvendo no fundo */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0,0,0,.55) 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0,0,0,.55) 88%, transparent 100%);
  }

  /* 3) bloco de texto sobe por cima do degrade da foto */
  .hero__texto {
    order: 3;
    position: relative;
    z-index: 2;
    margin-top: -42px;              /* sobe o titulo para dentro do degrade */
    padding: 0 var(--gutter) 26px;
    max-width: none;
  }
  .h1 { margin: 0 0 12px; font-size: 30px; }
  .hero__sub { margin-bottom: 18px; font-size: 13.5px; line-height: 1.55; }
  .hero__cta { align-self: stretch; padding: 18px 26px; }
}

@media (max-width: 760px) {
  /* A navbar quebrava em 3 linhas e ocupava 185px — 22% da tela, e sticky.
     Numa landing de pagina unica os links sao so ancoras: no celular a
     pessoa rola. Ficam so a marca e o CTA, numa linha de ~62px. */
  html { scroll-padding-top: 72px; }

  .navbar { padding: 11px var(--gutter); gap: 12px; flex-wrap: nowrap; }
  .navbar__links { display: none; }
  .logo { font-size: 22px; }
  .navbar__menu { gap: 0; }
  .navbar__cta {
    min-height: 44px;   /* area de toque minima */
    padding: 12px 16px;
    font-size: 10px;
    letter-spacing: .1em;
    white-space: nowrap;
  }
  .navbar__cta-longo { display: none; }
  .navbar__cta-curto { display: inline; }

  /* respiro entre secoes no celular */
  :root { --secao: 68px; }

  .card { padding: 26px 22px; }
  .grade-stats, .grade-beneficios, .grade-pilares, .grade-fundadores { gap: 14px; }

  .lista-numeros { padding: 6px; }
  .lista-numeros__item { flex-direction: column; gap: 6px; padding: 22px 20px; }
  .lista-numeros__valor { min-width: 0; }

  .cabecalho-secao { margin-bottom: 38px; }
  .lead--metodo { margin-bottom: 40px; }

  /* os cards 9:16 ocupavam a largura toda e ficavam com 590px de altura */
  .depoimentos { gap: 14px; }
  .fundador__foto { height: 240px; }
  .depo { padding: 28px 24px 24px; }

  .cta-final { padding: 54px 0 26px; }
  .btn { width: 100%; justify-content: center; text-align: center; }

  .rodape { padding: 46px var(--gutter) 52px; }
  .rodape__grade { gap: 26px; }
}

@media (max-width: 380px) {
  .navbar__cta { font-size: 10px; padding: 12px 12px; letter-spacing: .06em; }
  .logo { font-size: 20px; }
}

/* Telas estreitas de altura normal (ex.: 360x800): a foto cheia empurra
   uns poucos px. Aperta so o texto do hero — a foto continua largura total. */
@media (max-width: 375px) and (min-height: 741px) {
  .hero__tagline { padding-top: 14px; }
  .h1 { font-size: 28px; margin-bottom: 10px; }
  .hero__sub { margin-bottom: 14px; line-height: 1.5; }
  .hero__texto { padding-bottom: 20px; }
}

/* ---------- 18. MODIFICADORES (no lugar dos styles inline) ---------- */
.cabecalho-secao--metodo   { max-width: 700px; margin-bottom: 12px; }
.cabecalho-secao--medio    { max-width: 720px; }
.cabecalho-secao--estreito { max-width: 660px; }
.cabecalho-secao--curto    { max-width: 620px; }
.h2--colado                { margin-bottom: 0; }

/* ---------- 19. TELAS BAIXAS (iPhone SE 667px, Androids antigos) ----------
   A altura da foto acompanha a vh, mas o bloco de texto tem altura fixa:
   abaixo de ~730px de tela o CTA caia para fora da primeira dobra.
   Aqui a foto encolhe e a tipografia aperta o suficiente para o botao
   continuar visivel sem rolar. */
/* Telas curtas (iPhone SE, telas baixas): a foto quadrada em largura total
   fica alta demais e empurra o botao pra fora da dobra. Só AQUI a foto ganha
   um teto de altura (segue inteira, apenas centralizada e um pouco mais
   estreita) e a tipografia aperta. Em telas de altura normal a foto continua
   na largura total, como aprovado. */
@media (max-width: 760px) and (max-height: 740px) {
  .hero__foto {
    max-height: 40vh;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
  }
  .hero__tagline { padding-top: 12px; }
  .hero__texto  { padding-bottom: 16px; }
  .h1 { font-size: 26px; margin-bottom: 10px; }
  .hero__sub { font-size: 12.5px; line-height: 1.5; margin-bottom: 12px; }
  .btn { padding: 15px 24px; }
  .navbar { padding: 8px var(--gutter); }
}

/* ---------- 20. FAIXA ROLANDO (marquee de clientes) ---------- */
.marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  /* esmaece as duas pontas para o loop nao "cortar" seco */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__trilho {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  white-space: nowrap;
  padding-left: 30px;
  animation: marquee-corre 26s linear infinite;
  will-change: transform;
}
.marquee__grupo {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  white-space: nowrap;
}
.marquee__dot {
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ouro);
  opacity: .5;
}
@keyframes marquee-corre {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* metade = 1 copia completa */
}
/* respeita quem desativa animacoes no sistema */
/* Windows/Android com "reduzir animacoes" ligado: a faixa nao anda.
   Antes ela quebrava em 2 linhas e mostrava a lista DUPLICADA (a copia que
   existe so para o loop). Aqui a copia some e sobra uma linha limpa. */
@media (prefers-reduced-motion: reduce) {
  .marquee__trilho {
    animation: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
    gap: 10px 20px;
    padding-left: 0;
    width: 100%;
  }
  .marquee__copia { display: none; }          /* <- a duplicacao sai */
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__grupo { flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
  /* em tela estreita a lista quebra em varias linhas: sem os pontinhos e
     com o titulo em linha propria ela vira uma lista centrada, limpa */
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .marquee__dot { display: none; }
  .marquee .clientes__titulo { flex: 1 0 100%; text-align: center; margin-bottom: 2px; }
  .marquee .clientes__item { font-size: 15px; }
}

/* ---------- 21. TABLET (700–900px) ----------
   Nessa faixa o layout ainda e empilhado (celular), mas a foto quadrada
   esticava para a largura inteira e ficava desproporcional. Aqui ela ganha
   um teto e fica centralizada, sem cortar. */
@media (min-width: 700px) and (max-width: 900px) {
  .hero__foto {
    width: auto;
    max-width: 520px;
    margin-inline: auto;
  }
  .hero__texto { max-width: 620px; margin-inline: auto; }
  .hero__tagline { text-align: center; }
  .hero__texto .h1, .hero__texto .hero__sub { text-align: center; }
  .hero__cta { align-self: center; }
}