/* Hallmark · genre: editorial · macrostructure: texto-led + Narrative Workflow (família da arq)
 * tone: designer sênior, sóbrio, voz de prancheta · anchor: índigo 285° (parcimônia)
 * ESPINHA: topbar · hero texto-led (sem foto grande) · problema · PROCESSO timeline · QUEM FAZ (foto discreta) · CTA
 * "mão" comum ao sistema: .duo, .reveal, tokens, botão, cantos retos. Fontes: Space Grotesk + Newsreader.
 * pegada herdada da página de arquitetura (pedido do André) · foto sai do protagonismo
 * regra de negócio: WhatsApp sempre alcançável · sem preço · verde só na barra fixa
 * Pre-emit critique: P5 H5 E4 S5 R5 V4
 */
@import "tokens.css";

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  line-height: 1.6;
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: 92px;
}

h1, h2, h3 { font-family: var(--font-display); font-style: normal; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: anywhere; min-width: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--edge); }
.narrow { max-width: 640px; }

/* rótulo · grotesk, voz de anotação técnica */
.label { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); }

/* tratamento de foto · grade índigo suave */
.duo { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius); }
.duo > img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: saturate(0.85) contrast(1.03) brightness(1.03); }
.duo::before { content: ""; position: absolute; inset: 0; background: var(--duo-shadow); mix-blend-mode: multiply; opacity: 0.12; z-index: 1; }
.duo::after  { content: ""; position: absolute; inset: 0; background: var(--duo-light); mix-blend-mode: soft-light; opacity: 0.4; z-index: 2; }

/* reveal */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* botão · inline usa índigo (assinatura); verde só na barra fixa */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); background: var(--color-accent-deep); color: var(--color-paper); font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); padding: 15px var(--space-md); border-radius: var(--radius); border: var(--rule) solid transparent; white-space: nowrap; }
.btn svg { flex: none; }
.btn:hover { background: var(--color-accent); }
.btn:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 3px; }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-line-strong); }
.btn--ghost:hover { background: color-mix(in oklch, var(--color-ink), transparent 94%); }
.btn--light { background: var(--color-paper); color: var(--color-ink); }
.btn--light:hover { background: color-mix(in oklch, var(--color-paper), black 6%); }

/* barra fixa: verde WhatsApp */
.wpp-fixo { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 50; width: calc(100% - 28px); max-width: 480px; padding: 16px; font-size: var(--text-lg); background: var(--color-wpp); color: var(--color-ink); box-shadow: 0 10px 30px oklch(20% 0.022 282 / 0.28); }
.wpp-fixo:active { transform: translateX(-50%) translateY(1px); }

/* ····· TOPBAR ····· */
.topbar { display: flex; align-items: baseline; justify-content: space-between; padding: var(--space-md) var(--edge); border-bottom: var(--rule) solid var(--color-line); }
.topbar .marca-nome { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.01em; }
.topbar .marca-local { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-soft); }

/* ····· 1 · HERO · texto lidera ····· */
.hero { padding: var(--space-2xl) 0 var(--space-xl); }
.hero .label { display: block; margin-bottom: var(--space-md); }
.hero h1 { font-size: var(--text-4xl); max-width: 16ch; }
.hero h1 em { font-family: var(--font-body); font-style: italic; font-weight: 400; color: var(--color-accent); }
.hero .lede { font-family: var(--font-body); font-size: var(--text-lg); color: var(--color-ink-soft); margin-top: var(--space-md); max-width: 48ch; }
.hero .acoes { margin-top: var(--space-lg); display: flex; gap: var(--space-lg); align-items: center; flex-wrap: wrap; }
/* ação secundária: link de texto com seta, não caixa (hierarquia) */
.link-seta { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--color-ink); display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 2px solid var(--color-accent); }
.link-seta::after { content: "\2192"; color: var(--color-accent); transition: transform var(--dur) var(--ease-out); }
.link-seta:hover::after { transform: translateX(4px); }
.link-seta:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }

/* ilustração do hero · esquema busca → conversa (SVG próprio) */
.hero-illo { margin-top: var(--space-2xl); }
.hero-illo svg { width: 100%; max-width: 380px; height: auto; display: block; }
.il-grid { fill: var(--color-line-strong); }
.il-stroke-ink { stroke: var(--color-ink); stroke-width: 3; }
.il-fill-ink { fill: var(--color-ink); }
.il-stroke-accent { stroke: var(--color-accent); stroke-width: 3; }
.il-fill-accent { fill: var(--color-accent); }
.il-dot { fill: var(--color-paper); }

/* ····· 2 · PROBLEMA · faixa de cor própria, separa do hero ····· */
.problema { padding: var(--space-2xl) 0; background: var(--color-paper-2); border-top: var(--rule) solid var(--color-line-strong); border-bottom: var(--rule) solid var(--color-line-strong); }
.problema .big { font-family: var(--font-body); font-size: var(--text-3xl); line-height: 1.12; letter-spacing: -0.015em; max-width: 20ch; }
.problema .big em { font-style: italic; color: var(--color-accent); }
.problema .apoio { font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-soft); max-width: 52ch; margin-top: var(--space-lg); }

/* ····· 2b · O QUE VOCÊ RECEBE · entregável concreto, lista de fios ····· */
.entrega { padding: var(--space-2xl) 0; border-top: var(--rule) solid var(--color-line); }
.entrega .lista { list-style: none; margin-top: var(--space-lg); }
.entrega .lista li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: baseline; padding: var(--space-md) 0; border-top: var(--rule) solid var(--color-line); }
.entrega .lista li:last-child { border-bottom: var(--rule) solid var(--color-line); }
.entrega .lista .marca-item { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--color-accent); }
.entrega .lista h3 { font-size: var(--text-lg); font-weight: 600; }
.entrega .lista p { font-family: var(--font-body); color: var(--color-ink-soft); margin-top: 2px; max-width: 46ch; }
.entrega .lista .txt { grid-column: 2; }

/* ····· 3 · PROCESSO · timeline sobre faixa escura ····· */
.processo { background: var(--color-ink); color: var(--color-paper); padding: var(--space-2xl) 0; }
.sec-head { margin-bottom: var(--space-lg); }
.sec-head .label { display: block; margin-bottom: var(--space-2xs); }
.sec-head h2 { font-size: var(--text-3xl); }
.processo .sec-head h2 { color: var(--color-paper); }
.processo .label { color: var(--color-accent-lift); }
.etapas { display: grid; gap: var(--space-lg); }
.etapa { border-top: var(--rule) solid color-mix(in oklch, var(--color-paper), transparent 82%); padding-top: var(--space-md); }
.etapa .num { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-accent-lift); display: block; margin-bottom: var(--space-xs); }
.etapa h3 { font-size: var(--text-xl); color: var(--color-paper); }
.etapa p { font-family: var(--font-body); color: color-mix(in oklch, var(--color-paper), transparent 22%); margin-top: var(--space-2xs); }

/* ····· 4 · QUEM FAZ · foto em bolinha, centralizada; bio orientada a resultado ····· */
.autoria { padding: var(--space-2xl) 0; background: var(--color-paper-2); }
.autoria .bloco { display: grid; justify-items: center; text-align: center; gap: var(--space-sm); }
.autoria .avatar { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: var(--rule) solid var(--color-line-strong); margin-bottom: var(--space-xs); }
.autoria .label { display: block; }
.autoria h2 { font-size: var(--text-2xl); }
.autoria .bio { font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.5; margin-top: var(--space-2xs); max-width: 48ch; }

/* ····· 5 · CTA FINAL ····· */
.cta-final { background: var(--color-accent-deep); color: var(--color-paper); padding: var(--space-3xl) 0; }
.cta-final .label { color: var(--color-accent-lift); display: block; margin-bottom: var(--space-md); }
.cta-final h2 { font-size: clamp(2.2rem, 6vw, 3.4rem); color: var(--color-paper); }
.cta-final p { font-family: var(--font-body); margin: var(--space-md) 0 var(--space-lg); opacity: 0.9; max-width: 42ch; }
.contato { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule) solid color-mix(in oklch, var(--color-paper), transparent 82%); font-family: var(--font-display); font-size: var(--text-sm); }
.contato > span { display: block; }
.contato .rot { display: block; font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-lift); margin-bottom: 4px; }

/* ····· desktop simples ····· */
@media (min-width: 760px) {
  .hero h1 { font-size: clamp(2.8rem, 4.4vw, 4rem); }
  .hero { padding: var(--space-3xl) 0; }
  .hero-grid { display: grid; grid-template-columns: 1.25fr 0.85fr; gap: var(--space-2xl); align-items: center; }
  .hero-illo { margin-top: 0; }
  .hero-illo svg { max-width: 100%; }
  .etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
}