/* DVS Studio. Layout: faixas escuras (topo, frentes, contato) alternam com papel; tipo grande à esquerda; a marca DVS desmontada cai no topo e pode ser arrastada.
   Mobile primeiro: a base vale para a tela pequena; os @media (min-width) acrescentam colunas. */
:root {
  --paper: #F3F2EC; --paper-2: #EAE9E1;
  --bg: var(--paper); --bg-2: var(--paper-2); --fg: #24282A; --muted: #535B58;
  --line: rgba(36, 40, 42, 0.14); --line-strong: rgba(36, 40, 42, 0.38);
  --sage: #7C9A86; --sage-light: #9DB8A7; --sage-ink: #46634F; --accent: var(--sage-ink);
  --band: #141718; --band-2: #1D2122; --band-fg: #ECEBE4; --band-muted: #A3AAA5; --band-line: rgba(236, 235, 228, 0.14);
  --ribbon: #B9BDB5; --ribbon-stripe: rgba(20, 23, 24, 0.38);
  /* uma cor por frente: viva + profunda */
  --f-sites: #93BA9F; --f-sites-deep: #1E3226;
  --f-lojas: #EDB94E; --f-lojas-deep: #3B2E10;
  --f-sistemas: #82B4E6; --f-sistemas-deep: #12283A;
  --f-integ: #EE8466; --f-integ-deep: #3F1B12;
  --f-ia: #B9A6EC; --f-ia-deep: #241B3A;
  /* logos de clientes num tom só */
  --logo-filter: brightness(0) saturate(0); --logo-opacity: .74;
  --font-display: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --r: 999px; --r-card: 14px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px)); --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1D1E; --bg-2: #212526; --fg: #ECEBE4; --muted: #A8AFAA;
    --line: rgba(236, 235, 228, 0.12); --line-strong: rgba(236, 235, 228, 0.34);
    --accent: #9DB8A7; --band: #0F1112; --band-2: #181B1C; color-scheme: dark;
    --logo-filter: brightness(0) saturate(0) invert(1); --logo-opacity: .8;
  }
}
:root[data-theme="dark"] {
  --bg: #1A1D1E; --bg-2: #212526; --fg: #ECEBE4; --muted: #A8AFAA;
  --line: rgba(236, 235, 228, 0.12); --line-strong: rgba(236, 235, 228, 0.34);
  --accent: #9DB8A7; --band: #0F1112; --band-2: #181B1C; color-scheme: dark;
  --logo-filter: brightness(0) saturate(0) invert(1); --logo-opacity: .8;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 17px; line-height: 1.6; overflow-x: clip; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--band); }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
::selection { background: var(--sage); color: #141718; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; letter-spacing: -0.035em; line-height: 1; text-wrap: balance; min-width: 0; }
p { margin: 0; }
.wrap { width: 100%; max-width: 1400px; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: 8px; z-index: 100; background: var(--sage); color: #141718; padding: 8px 12px; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: var(--r); font: 600 0.95rem/1 var(--font-body); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .3s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn-fill { background: var(--sage); color: #141718; }
.btn-fill:hover { background: var(--sage-light); }
.btn-line { border-color: rgba(236, 235, 228, 0.3); color: var(--band-fg); background: transparent; }
.btn-line:hover { border-color: var(--band-fg); }
/* Sobre o fundo da física o botão vazado precisa de chão próprio, senão as peças passam por trás do texto */
.hero .btn-line { background: var(--band); }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 0.88rem; }
.arrow { display: inline-block; transition: transform .3s var(--ease); }
a:hover > .arrow, button:hover > .arrow { transform: translateX(4px); }

/* Cabeçalho: faixa escura fixa */
.site-head { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 30; background: color-mix(in srgb, var(--band) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--band-fg); border-bottom: 1px solid var(--band-line); }
.site-head .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 12px; }
.brand { display: block; line-height: 0; flex: none; }
.brand svg { height: 22px; width: auto; }
.nav { display: none; }
.nav a { text-decoration: none; font-size: 0.93rem; color: var(--band-muted); transition: color .2s ease; padding-block: 8px; }
.nav a:hover { color: var(--band-fg); }
.tools { display: flex; gap: 6px; align-items: center; }
.theme-btn, .lang-btn { width: 40px; height: 40px; border-radius: var(--r); border: 1px solid var(--band-line); background: transparent; color: var(--band-muted); cursor: pointer; display: inline-grid; place-items: center; text-decoration: none; font: 600 0.8rem/1 var(--font-body); letter-spacing: 0.02em; transition: color .2s ease, border-color .2s ease; }
.theme-btn:hover, .lang-btn:hover { color: var(--band-fg); border-color: rgba(236, 235, 228, 0.4); }
.theme-btn svg { width: 16px; height: 16px; }
@media (min-width: 400px) { .brand svg { height: 24px; } .tools { gap: 8px; } }
@media (min-width: 1080px) {
  .site-head .wrap { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; padding-block: 14px; }
  .nav { display: flex; justify-content: center; gap: clamp(16px, 2vw, 32px); }
}

/* Hero com física */
.hero { position: relative; background: var(--band); color: var(--band-fg); min-height: clamp(640px, 92svh, 900px); overflow: clip; isolation: isolate; }
#pit { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; touch-action: pan-y; }
#pit.grabbing { cursor: grabbing; }
/* O padding de baixo é o chão das peças: a pilha nunca cobre o texto nem os botões */
.hero-copy { position: relative; z-index: 2; pointer-events: none; padding-top: calc(env(safe-area-inset-top, 0px) + clamp(116px, 13vw, 150px)); padding-bottom: clamp(220px, 22vw, 320px); display: grid; gap: clamp(18px, 2.4vw, 32px); }
.hero-copy a, .hero-copy button { pointer-events: auto; }
.hero h1 { font-weight: 800; font-size: clamp(2.6rem, 7.6vw, 7.6rem); line-height: .94; letter-spacing: -0.05em; max-width: 13ch; }
.hero h1 .soft { color: var(--sage-light); }
.hero-lede { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--band-muted); max-width: 46ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* A dica fica no alto: embaixo as peças empilham por cima dela */
.pit-hint { position: absolute; z-index: 2; right: var(--gutter-r); top: calc(env(safe-area-inset-top, 0px) + 76px); text-align: right; font-size: 0.85rem; color: var(--band-muted); pointer-events: none; }
.pit-hint .touch { display: none; }
@media (hover: none) { .pit-hint .mouse { display: none; } .pit-hint .touch { display: inline; } }
.no-physics .pit-hint, .no-physics #pit { display: none; }
.no-physics .hero { min-height: 0; } .no-physics .hero-copy { padding-bottom: 96px; }

/* Seções em papel */
.section { padding-block: clamp(80px, 11vw, 150px); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 48px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head h2 { font-weight: 800; font-size: clamp(2.3rem, 5.6vw, 5rem); max-width: 14ch; }
.section-head p { color: var(--muted); max-width: 46ch; font-size: 1.05rem; }

/* Frentes: blocos de cor, um por frente */
.fronts { background: var(--band); color: var(--band-fg); }
.fronts .section-head p { color: var(--band-muted); }
.front-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.front { container-type: inline-size; --c: var(--f-sites); --d: var(--f-sites-deep); background: var(--d); color: var(--band-fg); border-radius: var(--r-card); padding: clamp(22px, 2.4vw, 32px); display: grid; grid-template-rows: auto 1fr auto; gap: 24px; min-width: 0; text-decoration: none; transition: background .45s var(--ease), color .45s var(--ease); }
.front[data-f="lojas"] { --c: var(--f-lojas); --d: var(--f-lojas-deep); }
.front[data-f="sistemas"] { --c: var(--f-sistemas); --d: var(--f-sistemas-deep); }
.front[data-f="integ"] { --c: var(--f-integ); --d: var(--f-integ-deep); }
.front[data-f="ia"] { --c: var(--f-ia); --d: var(--f-ia-deep); }
.front-path { font-family: var(--font-mono); font-size: 0.82rem; color: var(--c); transition: color .45s var(--ease); }
.front h3 { font-weight: 800; font-size: clamp(1.5rem, 11.5cqi, 2.6rem); line-height: .98; overflow-wrap: break-word; color: var(--c); transition: color .45s var(--ease); align-self: start; }
.front-body { display: grid; gap: 14px; align-content: end; }
.front-body p { color: color-mix(in srgb, var(--band-fg) 80%, transparent); font-size: 0.98rem; transition: color .45s var(--ease); }
.front-body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 0.9rem; }
.front-body li { display: flex; gap: 10px; align-items: baseline; }
.front-body li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c); transform: translateY(-2px); transition: background .45s var(--ease); }
.front-cta { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; font-size: 0.92rem; border-top: 1px solid color-mix(in srgb, var(--c) 40%, transparent); padding-top: 16px; transition: border-color .45s var(--ease); }
.front:hover, .front:focus-visible { background: var(--c); color: #141718; }
.front:hover h3, .front:hover .front-path, .front:focus-visible h3, .front:focus-visible .front-path { color: #141718; }
.front:hover .front-body p, .front:focus-visible .front-body p { color: rgba(20, 23, 24, 0.82); }
.front:hover .front-body li::before, .front:focus-visible .front-body li::before { background: #141718; }
.front:hover .front-cta, .front:focus-visible .front-cta { border-color: rgba(20, 23, 24, 0.3); }
.front:hover .arrow { transform: translateX(4px); }
@media (min-width: 601px) { .front-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .front { min-height: 380px; } .front:last-child { grid-column: 1 / -1; min-height: 300px; } }
@media (min-width: 1241px) { .front-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .front, .front:last-child { grid-column: auto; min-height: 460px; } }

/* Projetos: carrossel com filtros */
.work-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 500 0.9rem/1 var(--font-body); padding: 10px 16px; min-height: 44px; border-radius: var(--r); border: 1px solid var(--line-strong); background: transparent; color: var(--fg); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip .n { font-family: var(--font-mono); font-size: 0.78rem; opacity: .65; margin-left: 6px; font-variant-numeric: tabular-nums; }
.nav-btns { display: flex; gap: 8px; }
.round { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--fg); cursor: pointer; display: grid; place-items: center; transition: background .2s ease, color .2s ease; }
.round:hover { background: var(--fg); color: var(--bg); }
.round svg { width: 18px; height: 18px; }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 30vw, 440px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter-l); padding-left: max(var(--gutter-l), calc((100vw - 1400px) / 2 + 16px)); padding-right: var(--gutter-r); padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.track:focus-visible { outline-offset: -2px; }
.card { scroll-snap-align: start; margin: 0; display: grid; gap: 14px; align-content: start; min-width: 0; }
.card[hidden] { display: none; }
.card-img { aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); }
.card-img img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .8s var(--ease); }
.card:hover .card-img img { transform: scale(1.04); }
/* Projeto que não está mais no ar: sem captura, só o logo sobre papel (o mesmo nos dois temas, para o logo manter as cores) */
.card-img.logo-card { background: var(--paper); display: grid; place-items: center; padding: 18%; }
.card-img.logo-card img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.card figcaption { display: grid; gap: 4px; }
.card-tag { font-size: 0.85rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.15; }
.card-note { font-size: 0.85rem; color: var(--muted); }

/* Clientes: fileira fixa, logos e nomes no mesmo tom e na mesma altura */
.clients { border-block: 1px solid var(--line-strong); padding-block: 32px 36px; }
.clients h2 { font-family: var(--font-body); font-weight: 500; font-size: 1rem; letter-spacing: 0; color: var(--muted); margin-bottom: 24px; }
.client-row ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 28px 24px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 761px) { .client-row ul { display: flex; justify-content: space-between; gap: clamp(32px, 5vw, 72px); } }
.client { --h: clamp(40px, 6vw, 72px); height: var(--h); display: flex; align-items: center; white-space: nowrap; }
.logo { width: auto; filter: var(--logo-filter); opacity: var(--logo-opacity); transition: opacity .2s ease; }
.logo-box { height: 100%; }
.logo-wide { height: 72%; }
.logo-xwide { height: 52%; }
.client-name { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--h) * 0.56); letter-spacing: -0.04em; line-height: 1; color: var(--fg); opacity: var(--logo-opacity); }
.client:hover .logo, .client:hover .client-name { opacity: 1; }

/* Sobre: quem está por trás */
.about-grid { display: grid; gap: 32px; align-items: end; }
.about-photo { margin: 0; display: grid; gap: 14px; max-width: 360px; }
.about-photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-card); }
.about-photo figcaption { display: grid; gap: 2px; padding-top: 6px; }
.about-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; }
a.about-name { color: var(--fg); text-decoration: none; width: fit-content; }
a.about-name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.about-role { font-size: 0.9rem; color: var(--accent); }
.about-copy { display: grid; gap: 20px; }
.about-copy h2 { font-weight: 800; font-size: clamp(2.3rem, 5.6vw, 5rem); max-width: 14ch; }
.about-lede { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.8rem); line-height: 1.3; letter-spacing: -0.02em; max-width: 34ch; }
.about-copy > p:not(.about-lede) { color: var(--muted); max-width: 58ch; }
/* Problemas resolvidos: linhas de um currículo, não cartões. Empresa e período à esquerda, o problema à direita. */
.cases { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.case { display: grid; gap: 6px; padding-block: 18px; border-bottom: 1px solid var(--line); min-width: 0; }
.case-meta { font-size: 0.9rem; color: var(--accent); padding-top: 4px; font-variant-numeric: tabular-nums; }
.case h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -0.025em; line-height: 1.15; }
.case p { color: var(--muted); max-width: 62ch; }
.about-places { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.about-places-label { font-size: 0.95rem; color: var(--muted); }
.about-places ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.25; }
.about-places li { display: inline-flex; align-items: center; }
.about-places li:not(:last-child)::after { content: ""; width: .28em; height: .28em; border-radius: 50%; background: var(--sage); margin-inline: .55em; flex: none; }
.about-foot { margin-top: 28px; color: var(--muted); font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.about-foot a { color: var(--fg); font-weight: 600; text-decoration-color: var(--sage); text-underline-offset: 4px; }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(240px, 1fr) 2fr; gap: clamp(40px, 6vw, 96px); } }
@media (min-width: 900px) { .case { grid-template-columns: minmax(200px, 1fr) minmax(0, 1.2fr) minmax(0, 1.5fr); gap: 32px; align-items: baseline; padding-block: 28px; } }

/* Processo + combinados */
.process { border-top: 1px solid var(--line); }
.manifesto { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 3.6vw, 3.4rem); line-height: 1.15; letter-spacing: -0.03em; max-width: 24ch; text-wrap: balance; }
.manifesto em { font-style: normal; color: var(--accent); }
.steps { list-style: none; margin: clamp(56px, 7vw, 96px) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; counter-reset: step; border-top: 1px solid var(--line-strong); }
.step { padding-top: 28px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 4.4vw, 4rem); line-height: 1; letter-spacing: -0.04em; color: var(--sage); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.step h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
.step p { color: var(--muted); font-size: 0.97rem; }
@media (min-width: 521px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .step { padding-right: 24px; } .step:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); } }
@media (min-width: 901px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .step + .step { padding-left: 24px; border-left: 1px solid var(--line); } }
.promises-title { margin-top: clamp(64px, 8vw, 112px); margin-bottom: 24px; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.05; }
.promises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(32px, 4vw, 56px); }
.promise { border-top: 1px solid var(--line-strong); padding-block: 20px 28px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.promise h4 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); letter-spacing: -0.02em; }
.promise p { color: var(--muted); font-size: 0.95rem; }
@media (min-width: 561px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 901px) { .promises { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Perguntas frequentes */
.faq { padding-top: 0; }
.faq-grid { display: grid; gap: 32px; border-top: 1px solid var(--line-strong); padding-top: clamp(48px, 6vw, 80px); }
.faq-head { display: grid; gap: 16px; align-content: start; }
.faq-head h2 { font-weight: 800; font-size: clamp(2rem, 4vw, 3.4rem); max-width: 12ch; }
.faq-head p { color: var(--muted); max-width: 40ch; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; color: var(--accent); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 22px; max-width: 62ch; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 1fr 1.6fr; gap: 64px; } }

/* Contato e rodapé */
.contact { background: var(--band); color: var(--band-fg); padding-top: clamp(88px, 12vw, 170px); }
.contact .wrap { display: grid; gap: clamp(28px, 3.4vw, 44px); }
.contact h2 { font-weight: 800; font-size: clamp(2.8rem, 9.4vw, 9.6rem); line-height: .92; letter-spacing: -0.055em; max-width: 13ch; }
.contact h2 .soft { color: var(--sage-light); }
.mail { font-family: var(--font-mono); font-size: clamp(1.15rem, 3.2vw, 2.8rem); color: var(--sage-light); width: fit-content; max-width: 100%; overflow-wrap: anywhere; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--sage-light) 40%, transparent); }
.mail:hover { border-color: var(--sage-light); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; border-top: 1px solid var(--band-line); padding-top: 32px; }
.brief { display: grid; gap: 12px; color: var(--band-muted); }
.brief p:first-child { color: var(--band-fg); }
.brief ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; align-content: start; }
.copy-status { width: 100%; min-height: 1.4em; font-size: 0.88rem; color: var(--sage-light); }
.contact-hint { width: 100%; color: var(--band-muted); font-size: 0.95rem; max-width: 46ch; }
/* Formulário: no celular vem depois do roteiro (brief) e antes do e-mail; na tela larga ocupa a coluna da direita */
.contact-grid { grid-template-areas: "brief" "form" "actions"; }
.brief { grid-area: brief; align-content: start; }
.contact-actions { grid-area: actions; }
.lead-form, .form-done { grid-area: form; min-width: 0; }
.lead-form { display: grid; gap: 20px; --err: var(--f-integ); }
.lead-form h3, .form-done h3 { font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.05; letter-spacing: -0.035em; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label { font: 600 0.95rem/1.3 var(--font-body); color: var(--band-fg); }
.field .opt { font-weight: 400; color: var(--band-muted); }
.field input, .field textarea { width: 100%; min-height: 52px; margin: 0; padding: 13px 16px; border: 1px solid rgba(236, 235, 228, 0.26); border-radius: 12px; background: var(--band-2); color: var(--band-fg); font: 400 1rem/1.5 var(--font-body); caret-color: var(--sage-light); transition: border-color .2s ease, background-color .2s ease; }
.field textarea { min-height: 176px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: rgba(236, 235, 228, 0.46); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--sage-light); outline-offset: 1px; border-color: var(--sage-light); }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--band-fg); box-shadow: 0 0 0 100px var(--band-2) inset; caret-color: var(--sage-light); }
.field [aria-invalid="true"] { border-color: var(--err); }
.field [aria-invalid="true"]:focus-visible { outline-color: var(--err); }
.field-hint { font-size: 0.88rem; color: var(--band-muted); }
.field-error { font-size: 0.9rem; font-weight: 500; color: var(--err); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { min-height: 65px; max-width: 100%; }
.form-noscript { font-size: 0.95rem; color: var(--band-fg); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.lead-form .btn[disabled] { cursor: progress; opacity: .72; transform: none; }
.lead-form .btn.is-sending::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lead-form .btn.is-sending::before { animation: none; border-right-color: currentColor; opacity: .5; } }
.form-status { flex: 1 1 14rem; min-height: 1.4em; font-size: 0.95rem; color: var(--band-muted); }
.form-status.is-error { color: var(--err); }
.form-privacy { font-size: 0.86rem; color: var(--band-muted); }
.form-done { display: grid; gap: 12px; align-self: start; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-card); background: var(--band-2); border: 1px solid var(--band-line); }
.form-done:focus { outline: none; }
.lead-form[hidden], .form-done[hidden] { display: none; }
.form-done h3 { color: var(--sage-light); }
.form-done p { color: var(--band-fg); max-width: 46ch; }
@media (min-width: 761px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 48px; grid-template-areas: "brief form" "actions form"; grid-template-rows: auto 1fr; } }
@media (min-width: 1100px) { .contact-grid { grid-template-columns: 1fr 1.3fr; gap: 72px; } }
.site-foot { margin-top: clamp(72px, 10vw, 140px); border-top: 1px solid var(--band-line); padding-block: 48px calc(32px + env(safe-area-inset-bottom, 0px)); }
.site-foot .wrap { display: grid; gap: 40px; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.foot-mark { grid-column: 1 / -1; }
.foot-mark svg { width: min(100%, 440px); height: auto; }
.foot-col { display: grid; gap: 4px; align-content: start; font-size: 0.93rem; min-width: 0; }
.foot-h { font: 600 0.95rem/1.2 var(--font-body); color: var(--band-muted); margin-bottom: 8px; }
.foot-col a { color: var(--band-fg); text-decoration: none; width: fit-content; max-width: 100%; overflow-wrap: anywhere; padding-block: 4px; }
.foot-col a:hover { color: var(--sage-light); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 0.86rem; color: var(--band-muted); border-top: 1px solid var(--band-line); padding-top: 24px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot-links a { text-decoration: none; padding-block: 4px; }
.foot-links a:hover { color: var(--band-fg); }
@media (min-width: 761px) { .foot-cols { grid-template-columns: 2fr 1fr 1fr; } .foot-mark { grid-column: auto; } }

/* Página 404 */
.nf { background: var(--band); color: var(--band-fg); }
.nf-main { min-height: 100svh; display: grid; align-items: center; padding-block: 64px; }
.nf-wrap { display: grid; gap: 24px; }
.nf .brand svg { height: 28px; }
.nf h1 { font-weight: 800; font-size: clamp(2.8rem, 8vw, 6.4rem); line-height: .94; letter-spacing: -0.05em; max-width: 12ch; }
.nf h2 { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.03em; }
.nf-text { color: var(--band-muted); max-width: 46ch; font-size: 1.05rem; }
.nf-en { display: grid; gap: 16px; border-top: 1px solid var(--band-line); padding-top: 32px; margin-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover, .card:hover .card-img img, a:hover > .arrow, button:hover > .arrow { transform: none; }
}