/* MONTAN — folha de estilo da sandbox
 * ============================================================
 * Base: protótipo original, com a identidade real da Montan
 * remapeada por cima (musgo #5e9e44 sobre preto #050505).
 *
 * Os NOMES das variáveis do protótipo foram mantidos de
 * propósito (--acid, --ink, --paper): só os VALORES mudaram,
 * para não quebrar a folha inteira.
 *
 * Blocos deste arquivo, na ordem:
 *   01. Padrão da referência (konrad.com), aplicado à marca Montan
 *   02. Projetos em grade (padrão da referência) · marcas · serviços
 *   03. Menus suspensos · Academy · grade de projetos por marca
 *   04. Classes que faltavam (vieram de uma versão descartada e
 *   05. Vocabulário de movimento aprendido da referência
 *   06. Arredondamento global — nada quadrado
 *   07. Ajustes de leitura, pontilhado e transição enxuta
 *   08. Correções: arredondamento que faltou e bloco de dados
 *   09. Movimento ligado ao scroll + faixa de projetos
 *   10. Correções de emenda entre seções
 *   11. Portes do React Bits, em vanilla
 *   12. Scroll-tabs — recriado nativo
 *   13. Regra de contraste: o acento vive em UMA camada só
 *   14. A seta segue o texto, não uma cor fixa
 *
 * Regras de marca que não caem:
 *   · Sobre o musgo, o texto é PRETO (branco é variante).
 *   · O acento vive em UMA camada só: se o fundo tem verde,
 *     o texto vai a branco. Verde sobre verde some.
 *   · Ícone e texto do mesmo componente têm a MESMA cor.
 *   · Nada de canto vivo — tudo arredondado.
 *   · Toda animação respeita prefers-reduced-motion.
 * ============================================================ */

/* Tokens remapeados para a identidade real da Montan:
   preto #050505 + verde musgo #5e9e44, Montserrat (display) e
   Plus Jakarta Sans (corpo). Os NOMES das variáveis foram
   mantidos para não quebrar o resto da folha do protótipo.
   Regra de marca: sobre o musgo, o texto é preto. */
:root {
  --ink: #050505;
  --ink-2: #0e110d;
  --paper: #f1efe8;
  --paper-2: #e5e2d9;
  --acid: #5e9e44;        /* verde musgo — cor de marca */
  --acid-soft: #7cc45c;   /* musgo claro, para texto sobre preto */
  --orange: #2c4a22;      /* musgo profundo (a Montan não tem laranja) */
  --moss-press: #4a7c3a;  /* verde do botão — legível com texto branco */
  --muted: #6f7469;
  --muted-light: #a8aea2;
  --line: rgba(5, 5, 5, 0.16);
  --line-dark: rgba(241, 239, 232, 0.18);
  --max: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --header-height: 78px;
  --display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --body: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --space-1: clamp(8px, 0.8vw, 14px);
  --space-2: clamp(16px, 1.5vw, 26px);
  --space-3: clamp(24px, 2.4vw, 40px);
  --space-4: clamp(40px, 4vw, 68px);
  --space-5: clamp(56px, 5.5vw, 92px);
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.menu-open { overflow: hidden; }
body.is-transitioning { cursor: progress; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
img, video { display: block; max-width: 100%; }
/* O vídeo do hero preenche o quadro sem esticar. */
.hero__image-frame video { width: 100%; height: 100%; object-fit: cover; }
::selection { background: var(--acid); color: var(--ink); }

.container { width: min(var(--max), calc(100% - (var(--gutter) * 2))); margin-inline: auto; }
.section { position: relative; padding: var(--space-5) 0; }
.section--paper { background: var(--paper); color: var(--ink); }
.section--dark, .section--ink { background: var(--ink); color: var(--paper); }
.section--accent { background: var(--acid); color: var(--ink); }
.skip-link { position: fixed; z-index: 200; top: 12px; left: 12px; padding: 12px 16px; background: var(--acid); color: var(--ink); transform: translateY(-150%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Montserrat pede peso e caixa-alta onde a Bodoni pedia contraste. */
.display { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.028em; line-height: .92; }
.display em { color: var(--acid-text); font-style: normal; }
/* Escala reduzida: a Montserrat 800 ocupa muito mais largura por
   caractere do que a serifada do protótipo original. */
.display--hero { max-width: 15ch; color: var(--paper); font-size: clamp(2.7rem, 6.2vw, 6.4rem); font-weight: 900; }
.display--xl { max-width: 16ch; font-size: clamp(2.4rem, 5.4vw, 5.4rem); font-weight: 900; }
.display--lg { max-width: 18ch; font-size: clamp(2rem, 4.1vw, 4rem); }
.display--md { max-width: 20ch; font-size: clamp(1.7rem, 3.3vw, 3.1rem); }
.display--sm { font-size: clamp(1.3rem, 2vw, 1.85rem); }
.lede { max-width: 560px; margin: 0; color: var(--muted-light); font-size: clamp(1.02rem, 1.4vw, 1.25rem); line-height: 1.55; }
.body-copy { max-width: 560px; margin: 0; color: var(--muted); font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.65; }
.section-number { display: block; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.section--dark .section-number, .section--ink .section-number, .site-footer--dark .section-number { color: var(--muted-light); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--acid-text); font-size: .65rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow::before { width: 22px; height: 1px; background: currentColor; content: ""; }
.section--paper .eyebrow, .page--paper .eyebrow, .page--contact .eyebrow { color: #65774c; }

/* Menu centralizado na viewport, como na referência: marca à
   esquerda, navegação absolutamente centrada, CTA à direita. */
.site-header { position: fixed; z-index: 80; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: clamp(18px, 3vw, 40px); min-height: var(--header-height); padding: 0 var(--gutter); border-bottom: 1px solid transparent; transition: background .35s ease, border-color .35s ease, color .35s ease; }
.header-note { display: none; }
.desktop-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.site-header.is-scrolled { border-color: var(--line); background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(14px); }
.site-header--dark.is-scrolled { border-color: var(--line-dark); background: color-mix(in srgb, var(--ink) 90%, transparent); }
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; font-size: .84rem; font-weight: 700; letter-spacing: .16em; }
.brand__logo { height: 26px; width: auto; display: block; transition: opacity .3s ease; }
.brand:hover .brand__logo { opacity: .74; }
.site-footer .brand__logo { height: 30px; }
.site-header--dark, .site-header--dark .header-cta, .site-header--dark .desktop-nav a { color: var(--paper); }
.site-header--light, .site-header--light .header-cta, .site-header--light .desktop-nav a { color: var(--ink); }
.header-note { margin: 0; color: var(--muted); font-size: .61rem; letter-spacing: .08em; text-transform: uppercase; }
.site-header--dark .header-note { color: var(--muted-light); }
.desktop-nav { display: flex; justify-content: center; gap: clamp(16px, 2.3vw, 36px); }
.desktop-nav a, .header-cta { position: relative; font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.desktop-nav a::after, .header-cta::after { position: absolute; right: 0; bottom: -7px; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease-out); }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after, .header-cta:hover::after, .header-cta:focus-visible::after, .desktop-nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
.header-cta { display: inline-flex; align-items: center; gap: 10px; }
.header-cta span, .text-link span, .button span { color: var(--acid-text); font-size: 1.1em; transition: transform .3s var(--ease-out); }
.header-cta:hover span, .header-cta:focus-visible span, .text-link:hover span, .text-link:focus-visible span, .button:hover span, .button:focus-visible span { transform: translate(4px, -3px); }
.menu-toggle { display: none; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.menu-toggle i, .menu-toggle i::before { display: block; width: 25px; height: 1px; background: currentColor; transition: transform .3s var(--ease-out); }
.menu-toggle i::before { content: ""; transform: translateY(-6px); }
.menu-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] i::before { transform: rotate(-90deg); }

.page-wipe { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; background: var(--acid); color: var(--ink); pointer-events: none; transform: scaleY(0); transform-origin: bottom; }
.page-wipe span { font: 900 clamp(2.2rem, 6vw, 5.4rem)/1 var(--display); text-transform: uppercase; letter-spacing: -.035em; opacity: 0; transform: translateY(40px); }
.page-wipe.is-active { animation: page-wipe .65s var(--ease-in-out) both; }
.page-wipe.is-active span { animation: wipe-label .65s var(--ease-out) both; }
@keyframes page-wipe { 0% { transform: scaleY(0); transform-origin: bottom; } 45%, 65% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: top; } }
@keyframes wipe-label { 0%, 20% { opacity: 0; transform: translateY(40px); } 45%, 65% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-30px); } }

.menu-overlay { position: fixed; z-index: 70; inset: 0; backdrop-filter: blur(18px) saturate(.9); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--header-height) + 20px) var(--gutter) 34px; background: color-mix(in srgb, var(--ink) 92%, transparent); color: var(--paper); opacity: 0; pointer-events: none; transform: translateY(-18px); transition: opacity .35s ease, transform .45s var(--ease-out); }
.menu-overlay.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.menu-overlay__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--line-dark); }
.menu-overlay__top .eyebrow { color: var(--acid-text); }
.menu-overlay__top .menu-close { display: none; }
.menu-close { display: inline-flex; align-items: center; gap: 13px; border: 0; background: transparent; color: var(--paper); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.menu-close span { font-size: 1.6rem; font-weight: 300; line-height: .5; }
.menu-overlay__body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; height: 100%; padding: clamp(44px, 8vh, 100px) 0 0; }
.menu-links { display: flex; flex-direction: column; align-items: flex-start; }
.menu-links a { display: grid; grid-template-columns: 34px 1fr 30px; align-items: center; width: min(850px, 100%); padding: clamp(9px, 1.2vh, 20px) 0; border-bottom: 1px solid var(--line-dark); color: var(--paper); transition: color .25s ease, padding .35s var(--ease-out); }
.menu-links a small { color: var(--muted-light); font-size: .65rem; }
.menu-links a span { font: 400 clamp(2.5rem, 6.4vw, 7rem)/.9 var(--display); letter-spacing: -.06em; }
.menu-links a i { color: var(--acid-text); font-size: 1.5rem; font-style: normal; opacity: 0; transform: translateX(-10px); transition: opacity .3s ease, transform .3s var(--ease-out); }
.menu-links a:hover, .menu-links a:focus-visible { padding-left: 15px; color: var(--acid-text); }
.menu-links a:hover i, .menu-links a:focus-visible i { opacity: 1; transform: translateX(0); }
.menu-overlay__aside { align-self: end; display: flex; flex-direction: column; gap: 18px; padding-bottom: 10px; color: var(--muted-light); font-size: .86rem; }
.menu-overlay__aside p { max-width: 230px; margin: 0 0 auto; color: var(--paper); font-size: 1.05rem; line-height: 1.45; }
.menu-overlay__aside a { color: var(--acid-text); }

.button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 14px; padding: 0 24px; border: 1px solid currentColor; border-radius: 100px; color: var(--ink); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: color .3s ease, background .3s ease, transform .3s var(--ease-out), box-shadow .3s ease; }
.button:hover, .button:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(13,16,13,.16); }
.button--acid { border-color: var(--acid-text); background: var(--acid); }
.button--acid:hover, .button--acid:focus-visible { background: var(--paper); }
.button--ink { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.button--ink:hover, .button--ink:focus-visible { background: var(--paper); color: var(--ink); }
.text-link { display: inline-flex; align-items: center; gap: 13px; width: max-content; border-bottom: 1px solid currentColor; padding-bottom: 8px; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.text-link--light { color: var(--paper); }

.hero { min-height: 100svh; overflow: hidden; padding: calc(var(--header-height) + clamp(34px, 6vh, 80px)) 0 34px; }
.hero__grid { position: absolute; inset: 0; opacity: .6; background-image: linear-gradient(rgba(238,236,229,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(238,236,229,.06) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 82%); pointer-events: none; }
.hero__orb { position: absolute; border: 1px solid rgba(217,255,67,.16); border-radius: 50%; pointer-events: none; }
.hero__orb--one { top: -46vw; right: -6vw; width: 80vw; aspect-ratio: 1; }
.hero__orb--two { top: -19vw; right: 13vw; width: 44vw; aspect-ratio: 1; }
.hero__inner { position: relative; z-index: 2; min-height: calc(100svh - var(--header-height) - 34px); display: flex; flex-direction: column; }
.hero__top, .page-hero__top { display: flex; align-items: center; justify-content: space-between; }
.hero__index, .page-hero__index { color: var(--muted-light); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.hero__content { display: grid; grid-template-columns: minmax(0, .9fr) minmax(310px, .7fr); align-items: center; gap: clamp(40px, 9vw, 150px); flex: 1; padding: clamp(50px, 8vh, 100px) 0; }
.hero__copy { position: relative; z-index: 2; }
.hero__kicker { margin: 0 0 20px; color: var(--acid-text); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hero__copy .lede { margin-top: clamp(26px, 3vw, 44px); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 38px; }
.hero__visual { position: relative; width: min(100%, 500px); justify-self: end; }
.hero__image-frame { position: relative; aspect-ratio: .82; overflow: hidden; clip-path: polygon(8% 0, 100% 0, 100% 91%, 92% 100%, 0 100%, 0 9%); background: var(--ink-2); }
.hero__image-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.65) contrast(1.1); transform: scale(1.06); }
.hero__image-wash { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,16,13,.94), transparent 58%), linear-gradient(90deg, rgba(13,16,13,.32), transparent); }
.hero__image-label { position: absolute; right: 24px; bottom: 22px; left: 24px; color: rgba(238,236,229,.78); font-size: .62rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hero__stamp { position: absolute; bottom: 54px; left: -55px; display: grid; width: 128px; height: 128px; place-content: center; border: 1px solid var(--acid); border-radius: 50%; background: var(--ink); color: var(--acid-text); text-align: center; transform: rotate(-12deg); }
.hero__stamp strong { font: 800 1.75rem/.9 var(--display); letter-spacing: -.035em; }
.hero__stamp span { margin-top: 8px; color: var(--paper); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.hero__coordinate { position: absolute; top: 50%; right: -52px; color: var(--muted-light); font: .6rem/1 var(--body); letter-spacing: .15em; transform: rotate(90deg); }
.hero__rail { display: grid; grid-template-columns: max-content 1fr max-content; align-items: center; gap: 18px; color: var(--muted-light); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.hero__rail i { display: block; height: 1px; background: var(--line-dark); }

.statement__grid, .about-statement .statement__grid { display: grid; grid-template-columns: minmax(150px, .34fr) minmax(0, 1fr); gap: clamp(40px, 12vw, 220px); }
.statement__content { max-width: 960px; }
.statement__content .display { margin-bottom: 50px; }
.statement__content .body-copy { margin-bottom: 30px; }
.statement__content .text-link { color: inherit; }

.capabilities__head { display: grid; grid-template-columns: minmax(0, .85fr) minmax(260px, .45fr); align-items: end; gap: 60px; margin-bottom: 80px; }
.capabilities__head .section-number { margin-bottom: 25px; }
.capabilities__stage { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(0, 1fr); gap: clamp(50px, 9vw, 150px); align-items: start; }
.capabilities__visual { position: sticky; top: 140px; min-height: 570px; overflow: hidden; padding: 40px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--ink); color: var(--paper); isolation: isolate; transition: background .4s ease; }
.capabilities__visual::before { position: absolute; z-index: -2; inset: 0; background: center/cover var(--capability-image, url("assets/hero.jpg")); content: ""; filter: saturate(.6) contrast(1.1); transition: transform .8s var(--ease-out), opacity .4s ease; }
.capabilities__visual::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(to top, rgba(13,16,13,.97), rgba(13,16,13,.08) 72%); content: ""; }
.capability-visual__texture { position: absolute; z-index: -1; inset: 0; opacity: .35; background-image: linear-gradient(rgba(217,255,67,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(217,255,67,.2) 1px, transparent 1px); background-size: 60px 60px; mask-image: linear-gradient(to top, black, transparent 65%); }
.capability-visual__number { position: absolute; top: 30px; right: 35px; color: var(--acid-text); font-size: .7rem; letter-spacing: .12em; }
.capabilities__visual strong { margin-bottom: 10px; font: 400 clamp(2.7rem, 5vw, 5rem)/.95 var(--display); letter-spacing: -.06em; }
.capabilities__visual p { max-width: 340px; margin: 0; color: var(--muted-light); font-size: .96rem; }
.capabilities__list { margin: 0; padding: 0; list-style: none; }
.capability { border-top: 1px solid var(--line); }
.capability:last-child { border-bottom: 1px solid var(--line); }
.capability button { display: grid; grid-template-columns: 40px 1fr 32px; align-items: center; width: 100%; padding: 28px 0; border: 0; background: transparent; text-align: left; transition: padding .35s var(--ease-out), color .3s ease; }
.capability button span { color: var(--muted); font-size: .7rem; }
.capability button strong { font: 400 clamp(2.1rem, 4.3vw, 4.8rem)/.95 var(--display); letter-spacing: -.06em; }
.capability button i { color: var(--muted); font-size: 1.4rem; font-style: normal; opacity: 0; transform: translateX(-15px); transition: opacity .3s ease, transform .3s var(--ease-out); }
.capability:hover button, .capability.is-active button { padding-left: 14px; color: var(--orange); }
  .capability:hover button i, .capability.is-active button i { opacity: 1; transform: translateX(0); }

.ai-section { overflow: hidden; }
.ai-section__noise { position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(rgba(217,255,67,.8) .7px, transparent .7px); background-size: 18px 18px; mask-image: linear-gradient(135deg, black, transparent 60%); pointer-events: none; }
.ai-section__head { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(260px, .55fr); gap: 70px; align-items: end; margin-bottom: 80px; }
.ai-section__head .section-number { margin-bottom: 25px; }
.ai-section__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-dark); }
.ai-card { position: relative; min-height: 340px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; background: var(--ink-2); transition: background .35s ease, color .35s ease, transform .4s var(--ease-out); }
.ai-card:hover, .ai-card--active { background: var(--acid); color: var(--ink); transform: translateY(-10px); }
.ai-card > span { color: var(--acid-text); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: color .3s ease; }
.ai-card:hover > span, .ai-card--active > span { color: var(--ink); }
.ai-card strong { display: block; margin-top: auto; font: 800 clamp(1.5rem, 2.2vw, 2.2rem)/1.05 var(--display); letter-spacing: -.025em; }
.ai-card p { max-width: 280px; margin: 18px 0 0; color: var(--muted-light); font-size: .9rem; transition: color .3s ease; }
.ai-card:hover p, .ai-card--active p { color: rgba(5,5,5,.82); }
.ai-card i { position: absolute; right: 28px; bottom: 28px; color: var(--acid-text); font-size: 1.5rem; font-style: normal; opacity: 0; transform: translate(-8px, 8px); transition: opacity .25s ease, transform .3s var(--ease-out); }
.ai-card:hover i, .ai-card--active i { color: var(--ink); opacity: 1; transform: translate(0, 0); }
.ai-section__foot { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 30px; margin-top: 35px; color: var(--muted-light); font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ai-section__foot .text-link { font-size: .62rem; }

.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: end; gap: 40px; margin-bottom: clamp(48px, 7vw, 100px); }
.section-heading .section-number { margin-bottom: 25px; }
.section-heading--dark .text-link { justify-self: end; }
.cases__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: clamp(24px, 5vw, 80px); }
.cases__side { display: grid; grid-template-rows: 1fr 1fr; gap: 70px; }
.case-card { display: block; }
.case-card__image { position: relative; overflow: hidden; background: var(--ink-2); }
.case-card--featured .case-card__image { aspect-ratio: 1.12; }
.cases__side .case-card__image { aspect-ratio: 1.2; }
.case-card__image::after { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,16,13,.65), transparent 60%); content: ""; }
.case-card__image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); transition: transform 1s var(--ease-out), filter .5s ease; }
.case-card:hover .case-card__image img, .case-card:focus-visible .case-card__image img { filter: saturate(1); transform: scale(1.06); }
.case-card__count { position: absolute; z-index: 1; top: 22px; right: 24px; color: var(--paper); font-size: .62rem; letter-spacing: .13em; }
.case-card__meta, .work-card__meta { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0 12px; color: var(--muted-light); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.case-card h3, .work-card h2 { display: flex; align-items: center; justify-content: space-between; margin: 0; color: var(--paper); font: 400 clamp(2.2rem, 4vw, 4.3rem)/1 var(--display); letter-spacing: -.06em; }
.case-card h3 i, .work-card h2 i { color: var(--acid-text); font: 400 .55em/1 var(--body); font-style: normal; opacity: 0; transform: translate(-10px, 10px); transition: opacity .3s ease, transform .3s var(--ease-out); }
.case-card:hover h3 i, .case-card:focus-visible h3 i, .work-card:hover h2 i, .work-card:focus-visible h2 i { opacity: 1; transform: translate(0, 0); }
.case-card--solid { display: flex; min-height: 250px; flex-direction: column; justify-content: space-between; padding: 30px; background: var(--acid); color: var(--ink); }
.case-card--solid .case-card__count { position: static; color: var(--ink); }
.case-card--solid h3 { color: var(--ink); }
.case-card--solid h3 i { color: var(--ink); }
.case-card--solid p { max-width: 310px; margin: 14px 0 0; color: rgba(5,5,5,.82); }
.case-card__tag { color: var(--ink); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.method-preview__head { display: grid; grid-template-columns: minmax(150px, .4fr) minmax(0, 1fr); gap: clamp(40px, 11vw, 180px); }
.method-preview__head .display { margin-bottom: 35px; }
.method-preview__head .body-copy { max-width: 500px; margin-bottom: 30px; }
.process-rail { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 100px; padding-top: 25px; border-top: 1px solid rgba(5,5,5,.28); list-style: none; }
.process-rail li { min-height: 190px; padding: 0 26px; border-right: 1px solid rgba(13,16,13,.25); }
.process-rail li:first-child { padding-left: 0; }
.process-rail li:last-child { border: 0; }
.process-rail span { display: block; margin-bottom: 48px; font-size: .65rem; font-weight: 700; letter-spacing: .12em; }
.process-rail strong { display: block; margin-bottom: 12px; font: 400 2rem/.95 var(--display); letter-spacing: -.05em; }
.process-rail p { max-width: 190px; margin: 0; color: var(--muted); font-size: .9rem; }

.knowledge .section-heading { margin-bottom: 55px; }
.notes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.note-card { min-height: 370px; padding: 34px; display: flex; flex-direction: column; justify-content: space-between; background: var(--ink); color: var(--paper); }
.note-card--outline { border: 1px solid var(--line); background: transparent; color: var(--ink); }
.note-card > span { color: var(--acid-text); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.note-card h3 { max-width: 440px; margin: auto 0 12px; font: 400 clamp(2.5rem, 4vw, 4.6rem)/.95 var(--display); letter-spacing: -.06em; }
.note-card p { max-width: 440px; margin: 0 0 30px; color: var(--muted-light); }
.note-card--outline p { color: var(--muted); }
.note-card a { width: max-content; padding-bottom: 7px; border-bottom: 1px solid currentColor; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.final-cta { overflow: hidden; }
.final-cta::before { position: absolute; right: -15vw; bottom: -35vw; width: 70vw; aspect-ratio: 1; border: 1px solid rgba(217,255,67,.2); border-radius: 50%; content: ""; }
.final-cta__inner { position: relative; z-index: 1; }
.final-cta__inner .display { max-width: 1000px; margin: 55px 0 30px; }
.final-cta__inner .lede { margin-bottom: 35px; }
.site-footer { padding: 0 0 22px; background: var(--paper); color: var(--ink); }
.site-footer--dark { background: var(--ink-2); color: var(--paper); }

/* Faixa de chamada no topo do rodapé */
.footer__cta { padding: var(--space-5) 0; border-bottom: 1px solid var(--line-dark); text-align: center; background: radial-gradient(70% 120% at 50% 120%, rgba(94,158,68,.22), transparent 62%); }
.footer__cta .display { margin: var(--space-2) auto; }
.footer__cta p { max-width: 52ch; margin: 0 auto; color: var(--muted-light); }
.footer__cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: var(--space-3); }

/* Corpo institucional em 4 colunas */
.footer__grid { display: grid; grid-template-columns: 1.5fr .8fr .8fr 1.1fr; gap: var(--space-3); padding: var(--space-4) 0; }
.footer__about p { max-width: 40ch; margin: 18px 0; color: var(--muted-light); font-size: .92rem; }
.footer__col h3 { margin: 0 0 16px; font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--acid-text); }
.footer__col ul { margin: 0; padding: 0; list-style: none; }
.footer__col li + li { margin-top: 9px; }
.footer__col a { position: relative; display: inline-block; color: var(--muted-light); font-size: .92rem; transition: color .3s var(--ease-out), padding-left .3s var(--ease-out); }
.footer__col a::before { position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--acid); content: ""; transition: width .3s var(--ease-out); }
.footer__col a:hover { color: var(--paper); padding-left: 18px; }
.footer__col a:hover::before { width: 12px; }
.footer__news p { margin: 0 0 14px; color: var(--muted-light); font-size: .9rem; }
.footer__form { position: relative; display: flex; border: 1px solid var(--line-dark); transition: border-color .3s ease; }
.footer__form:focus-within { border-color: var(--acid-text); }
.footer__form input { flex: 1; min-width: 0; padding: 13px 14px; border: 0; background: transparent; color: inherit; font-size: .92rem; }
.footer__form input::placeholder { color: var(--muted); }
.footer__form input:focus { outline: none; }
.footer__form button { padding: 0 17px; border: 0; background: var(--acid); color: var(--ink); cursor: pointer; font-size: 1rem; }
.footer__form button:hover { background: var(--acid-soft); }
.footer__form-msg { position: absolute; left: 0; top: calc(100% + 7px); margin: 0; font-family: var(--mono); font-size: .68rem; color: var(--acid-text); }
.footer__social { display: flex; gap: 18px; margin-top: 20px; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.footer__social a:hover { color: var(--acid-text); }

.footer__top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; align-items: start; padding-bottom: 60px; }
.footer__top p { margin: 0; color: var(--muted); font-size: .85rem; }
.footer__email { justify-self: end; width: max-content; padding-bottom: 7px; border-bottom: 1px solid currentColor; font-size: .8rem; }
.footer__email span { color: var(--acid-text); }
.footer__bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.site-footer--dark .footer__bottom { border-top-color: var(--line-dark); }
.footer__bottom div { display: flex; justify-content: flex-end; gap: 20px; }
.footer__bottom a:hover, .footer__bottom a:focus-visible { color: var(--acid-text); }

.page-hero { min-height: 92svh; display: flex; align-items: flex-end; padding-top: calc(var(--header-height) + 60px); padding-bottom: clamp(45px, 8vh, 100px); overflow: hidden; }
.page-hero__inner:not(.container) { width: 100%; }
.page-hero__inner .display { margin: clamp(65px, 12vh, 150px) 0 60px; }
.page-hero__bottom { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.page-hero__bottom > span { color: var(--muted); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.page-hero--dark .page-hero__bottom > span { color: var(--muted-light); }
.solutions-list__intro { display: grid; grid-template-columns: minmax(150px, .6fr) minmax(260px, .7fr); justify-content: space-between; gap: 50px; margin-bottom: 80px; }
.solution-rows { border-top: 1px solid var(--line); }
.solution-row { display: grid; grid-template-columns: 65px 1fr 40px; align-items: center; gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--line); transition: padding .35s var(--ease-out), color .25s ease; }
.solution-row > span { color: var(--muted); font-size: .7rem; }
.solution-row h2 { margin: 0 0 8px; }
.solution-row p { max-width: 560px; margin: 0; color: var(--muted); }
.solution-row > i { color: var(--orange); font-size: 1.5rem; font-style: normal; opacity: 0; transform: translateX(-15px); transition: opacity .3s ease, transform .3s var(--ease-out); }
.solution-row:hover, .solution-row:focus-visible { padding-left: 18px; color: var(--orange); }
.solution-row:hover p, .solution-row:focus-visible p { color: var(--ink); }
.solution-row:hover > i, .solution-row:focus-visible > i { opacity: 1; transform: translateX(0); }
.dark-band__grid { display: grid; grid-template-columns: minmax(150px, .42fr) minmax(0, 1.2fr); gap: 40px; align-items: end; }
.dark-band__grid .display { margin-bottom: 42px; }
.dark-band__grid .button { grid-column: 2; justify-self: start; }

.work-index__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 65px; }
.view-toggle { display: inline-flex; gap: 18px; }
.view-toggle button { padding: 0 0 7px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.view-toggle button.is-active, .view-toggle button:hover, .view-toggle button:focus-visible { border-color: var(--ink); color: var(--ink); }
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 100px 30px; }
.work-card { display: block; }
.work-card--wide { grid-column: 1 / -1; width: calc(66.666% - 10px); }
.work-card__image { position: relative; aspect-ratio: 1.35; overflow: hidden; background: var(--paper-2); }
.work-card__image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); transition: transform 1s var(--ease-out), filter .5s ease; }
.work-card:hover .work-card__image img, .work-card:focus-visible .work-card__image img { filter: saturate(1); transform: scale(1.06); }
.work-card__image span { position: absolute; z-index: 1; top: 20px; right: 22px; color: var(--paper); font-size: .65rem; letter-spacing: .12em; }
.work-card__meta { color: var(--muted); }
.work-card h2 { color: var(--ink); }
.work-card h2 i { color: var(--orange); }
.work-card p { max-width: 450px; margin: 12px 0 0; color: var(--muted); }
.work-card--green { min-height: 500px; display: flex; flex-direction: column; justify-content: space-between; padding: 30px; background: var(--acid); }
.work-card--green .work-card__number { font: 500 6rem/.8 var(--display); letter-spacing: -.1em; }
.work-card--green .work-card__meta { color: var(--ink); }
.work-card--green h2 { color: var(--ink); }
.work-card--green h2 i { color: var(--ink); }
.work-card--green p { color: rgba(5,5,5,.82); }
.work-grid.is-list { display: flex; flex-direction: column; gap: 0; }
.work-grid.is-list .work-card, .work-grid.is-list .work-card--wide { width: 100%; display: grid; grid-template-columns: 210px 1fr 1fr 30px; gap: 28px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); }
.work-grid.is-list .work-card:last-child { border-bottom: 1px solid var(--line); }
.work-grid.is-list .work-card__image { grid-row: span 2; aspect-ratio: 1.3; }
.work-grid.is-list .work-card__meta { padding: 0; }
.work-grid.is-list .work-card h2 { font-size: 2rem; }
.work-grid.is-list .work-card p { margin: 0; }
.work-grid.is-list .work-card--green { min-height: 0; background: transparent; }
.work-grid.is-list .work-card--green .work-card__number { grid-row: span 2; font-size: 3rem; }
.work-note__grid { display: grid; grid-template-columns: minmax(150px, .45fr) minmax(0, 1fr) max-content; gap: 40px; align-items: end; }

.method-steps__intro { display: grid; grid-template-columns: minmax(150px, .6fr) minmax(0, 1fr); gap: 40px; margin-bottom: 80px; }
.method-steps__list { border-top: 1px solid var(--line); }
.method-step { display: grid; grid-template-columns: 60px 1fr 40px; gap: 30px; padding: 38px 0; border-bottom: 1px solid var(--line); }
.method-step > span { color: var(--muted); font-size: .7rem; }
.method-step h3 { margin-bottom: 18px; }
.method-step p { max-width: 580px; margin: 0 0 26px; color: var(--muted); }
.method-step ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.method-step li { padding: 8px 12px; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); font-size: .65rem; }
.method-step > strong { color: var(--orange); font: 400 1.8rem/1 var(--display); }
.principles .section-heading { margin-bottom: 60px; }
.principles-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(13,16,13,.25); }
.principle { min-height: 230px; padding: 24px 22px 0; border-right: 1px solid rgba(13,16,13,.25); }
.principle:first-child { padding-left: 0; }
.principle:last-child { border-right: 0; }
.principle > span { color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .1em; }
.principle h3 { margin: 50px 0 12px; font: 400 1.8rem/.95 var(--display); letter-spacing: -.05em; }
.principle p { max-width: 220px; margin: 0; color: var(--muted); font-size: .9rem; }
.final-inline { display: grid; grid-template-columns: minmax(150px, .45fr) 1fr max-content; gap: 40px; align-items: end; }
.final-inline .display { max-width: 700px; }

.about-statement .statement__content .body-copy + .body-copy { margin-top: 18px; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(13,16,13,.28); border-bottom: 1px solid rgba(13,16,13,.28); }
.metric { padding: 30px 20px; border-right: 1px solid rgba(13,16,13,.28); }
.metric:first-child { padding-left: 0; }
.metric:last-child { border-right: 0; }
.metric strong { display: block; margin-bottom: 14px; font: 500 clamp(3.2rem, 6vw, 6rem)/.8 var(--display); letter-spacing: -.09em; }
.metric span { font-size: .65rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.principles-grid--notes { grid-template-columns: repeat(2, 1fr); gap: 20px; border: 0; }
.principle--large { min-height: 350px; padding: 30px; border: 1px solid var(--line); }
.principle--large:first-child { padding-left: 30px; }
.principle--large h3 { margin-top: 90px; font-size: clamp(2.2rem, 4vw, 4.3rem); }
.principle--large p { max-width: 420px; }

.contact-hero { min-height: 72svh; display: flex; align-items: flex-end; padding-top: calc(var(--header-height) + 60px); padding-bottom: clamp(45px, 8vh, 100px); }
.contact-hero__inner:not(.container) { width: 100%; }
.contact-hero h1 { margin: clamp(70px, 12vh, 140px) 0 40px; }
.contact-hero .lede { color: rgba(13,16,13,.72); }
.contact-grid { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, .9fr); gap: clamp(50px, 11vw, 180px); }
.contact-aside { position: sticky; top: 130px; align-self: start; }
.contact-aside .display { margin: 48px 0 30px; }
.contact-aside .body-copy { color: var(--muted-light); }
.contact-aside__details { display: flex; flex-direction: column; gap: 8px; margin-top: 45px; color: var(--acid-text); font-size: .8rem; }
.contact-aside__details span { color: var(--muted-light); }
.project-form { display: flex; flex-direction: column; gap: 28px; }
.form-field { display: flex; flex-direction: column; gap: 10px; }
.form-field label { color: var(--paper); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.form-field input, .form-field select, .form-field textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line-dark); border-radius: 0; outline: 0; padding: 12px 0 16px; background: transparent; color: var(--paper); transition: border-color .25s ease; }
.form-field select { appearance: none; }
.form-field textarea { resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--acid-text); }
.form-field small { display: none; color: var(--orange); font-size: .72rem; }
.form-field.is-invalid small { display: block; }
.form-field.is-invalid input, .form-field.is-invalid select, .form-field.is-invalid textarea { border-color: var(--orange); }
.consent { display: flex; align-items: flex-start; gap: 12px; color: var(--muted-light); font-size: .78rem; }
.consent input { flex: 0 0 auto; accent-color: var(--acid-text); margin-top: 3px; }
.project-form .button { align-self: flex-start; }
.form-status { min-height: 22px; margin: 0; color: var(--acid-text); font-size: .78rem; }
.form-status.is-error { color: var(--orange); }

.case-hero { min-height: 100svh; padding-top: calc(var(--header-height) + 50px); padding-bottom: 80px; overflow: hidden; }
.case-hero__inner { position: relative; z-index: 1; }
.case-hero h1 { margin: clamp(60px, 12vh, 140px) 0 35px; }
.case-hero__meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .55fr); gap: 50px; align-items: end; }
.case-hero__meta dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 0; }
.case-hero__meta dt { margin-bottom: 7px; color: var(--muted-light); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.case-hero__meta dd { margin: 0; color: var(--paper); font-size: .86rem; }
.case-hero__image { position: relative; width: min(100%, 980px); margin: 80px auto 0; aspect-ratio: 1.75; overflow: hidden; }
.case-hero__image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); }
.case-hero__image::after { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,16,13,.55), transparent); content: ""; }
.case-hero__image span { position: absolute; z-index: 1; right: 22px; bottom: 20px; color: var(--paper); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.case-content__grid { display: grid; grid-template-columns: minmax(150px, .4fr) minmax(0, 1fr); gap: clamp(40px, 11vw, 180px); }
.case-content h2 { margin-bottom: 35px; }
.case-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 80px; border-top: 1px solid var(--line); }
.case-facts > div { padding-top: 18px; }
.case-facts span { color: var(--muted); font-size: .65rem; }
.case-facts strong { display: block; margin: 50px 0 10px; font: 400 1.35rem/.95 var(--display); }
.case-facts p { margin: 0; color: var(--muted); font-size: .8rem; }
.case-statement .display { max-width: 950px; margin-top: 55px; }

.knowledge-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 60px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.knowledge-filters span { margin-right: 20px; color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.knowledge-filters button { padding: 0 0 7px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.knowledge-filters button.is-active, .knowledge-filters button:hover, .knowledge-filters button:focus-visible { border-color: var(--ink); color: var(--ink); }
.article-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.article-card { min-height: 360px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); color: var(--ink); transition: background .35s ease, color .35s ease, transform .4s var(--ease-out); }
.article-card:hover, .article-card:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--paper); transform: translateY(-8px); }
.article-card--feature { grid-column: 1 / -1; min-height: 430px; display: grid; grid-template-columns: .45fr 1fr; gap: 40px; background: var(--acid); border-color: var(--acid-text); }
.article-card--feature:hover, .article-card--feature:focus-visible { background: var(--paper); color: var(--ink); }
.article-card--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.article-card--dark:hover, .article-card--dark:focus-visible { background: var(--acid); color: var(--ink); }
.article-card--wide { grid-column: 1 / -1; min-height: 230px; flex-direction: row; align-items: end; gap: 40px; }
.article-card > span, .article-card__meta { color: var(--muted); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.article-card:hover > span, .article-card:focus-visible > span, .article-card--dark > span, .article-card--feature > div > span { color: var(--acid-text); }
.article-card h2 { margin: 28px 0 14px; }
.article-card p { max-width: 480px; margin: 0; color: var(--muted); }
.article-card:hover p, .article-card:focus-visible p, .article-card--dark p { color: var(--muted-light); }
.article-card > strong { align-self: end; color: var(--orange); font-size: 1.5rem; font-weight: 400; }
.article-card--feature > div:first-child { display: flex; flex-direction: column; justify-content: space-between; }
.article-card__mark { min-height: 100%; padding: 4px; border-right: 1px solid rgba(13,16,13,.25); color: var(--ink); }
.article-card__mark span { font-size: .65rem; font-weight: 700; letter-spacing: .12em; }
.article-card__mark strong { display: block; margin-top: auto; font-size: 2rem; font-weight: 400; }
.article-card--feature h2 { max-width: 740px; }
.article-card--feature p { color: var(--muted); }
.article-card--wide > strong { margin-left: auto; }
.article-card.is-filtered { display: none; }

.article-hero { min-height: 90svh; display: flex; align-items: flex-end; padding-top: calc(var(--header-height) + 50px); padding-bottom: clamp(55px, 9vh, 110px); overflow: hidden; }
.article-hero__inner { position: relative; z-index: 1; }
.article-hero h1 { max-width: 1000px; margin: clamp(75px, 15vh, 180px) 0 40px; }
.article-hero__top, .article-hero__bottom { display: flex; justify-content: space-between; gap: 30px; }
.article-hero__bottom { align-items: end; }
.article-hero__bottom > span { color: var(--muted-light); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.article-body__grid { display: grid; grid-template-columns: 180px minmax(0, 700px); gap: 80px; justify-content: center; }
.article-share { position: sticky; top: 130px; align-self: start; display: flex; flex-direction: column; gap: 16px; color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.article-share a { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 1rem; }
.article-share a:hover, .article-share a:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.article-copy { max-width: 700px; }
.article-lead { margin: 0 0 50px; font: 700 clamp(1.4rem, 2.2vw, 2.1rem)/1.18 var(--display); letter-spacing: -.025em; }
.article-copy p { max-width: 640px; margin: 0 0 30px; color: var(--muted); font-size: 1.06rem; line-height: 1.8; }
.article-copy .display { margin: 90px 0 30px; }
.article-copy blockquote { margin: 60px 0; padding-left: 25px; border-left: 2px solid var(--acid); font: 700 clamp(1.3rem, 2.1vw, 1.95rem)/1.22 var(--display); letter-spacing: -.025em; }
.article-next { margin-top: 110px; padding-top: 20px; border-top: 1px solid var(--line); }
.article-next > span { color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.article-next a { display: flex; justify-content: space-between; gap: 20px; margin-top: 25px; font: 400 2rem/1 var(--display); letter-spacing: -.05em; }
.article-next i { color: var(--orange); font: 400 1.5rem/1 var(--body); font-style: normal; }

.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.split-lines { text-wrap: balance; }

@media (max-width: 980px) {
  :root { --header-height: 74px; }
  .site-header { grid-template-columns: auto 1fr auto; gap: 20px; }
  .header-note, .desktop-nav, .header-cta { display: none; }
  .menu-toggle { display: inline-flex; justify-self: end; }
  .hero__content { grid-template-columns: minmax(0, 1fr) minmax(260px, .65fr); gap: 35px; }
  .hero__visual { width: 100%; }
  .hero__stamp { left: -30px; }
  .capabilities__stage { gap: 50px; }
  .process-rail { gap: 0; }
  .principle h3 { font-size: 1.45rem; }
  .work-card--wide { width: 82%; }
}

@media (max-width: 700px) {
  :root { --gutter: 20px; }
  .section { padding: clamp(76px, 19vw, 120px) 0; }
  .display--hero { font-size: clamp(4rem, 17vw, 7rem); }
  .display--xl { font-size: clamp(3.7rem, 16vw, 6rem); }
  .display--lg { font-size: clamp(3rem, 12vw, 5rem); }
  .display--md { font-size: clamp(2.6rem, 11vw, 4rem); }
  .menu-overlay { padding-top: calc(var(--header-height) + 10px); }
  .menu-overlay__body { display: flex; flex-direction: column; padding-top: 40px; }
  .menu-overlay__aside { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: auto; }
  .menu-overlay__aside p { grid-column: 1 / -1; margin: 0 0 18px; }
  .menu-links a { grid-template-columns: 27px 1fr 22px; padding: 10px 0; }
  .menu-links a span { font-size: clamp(2.4rem, 12vw, 4.5rem); }
  .hero { min-height: 100svh; padding-bottom: 24px; }
  .hero__content { display: flex; flex-direction: column; align-items: stretch; padding-top: 62px; }
  .hero__visual { order: -1; width: 68%; margin-left: auto; }
  .hero__image-frame { aspect-ratio: .98; }
  .hero__stamp { bottom: 28px; left: -35px; width: 84px; height: 84px; }
  .hero__image-label { left: 62px; right: 16px; font-size: .55rem; letter-spacing: .1em; }
  .hero__stamp strong { font-size: 1.25rem; }
  .hero__coordinate { right: -38px; font-size: .5rem; }
  .hero__copy { margin-top: -24px; }
  .hero__copy .lede { max-width: 450px; }
  .hero__rail { grid-template-columns: 1fr max-content; }
  .hero__rail i { display: none; }
  .hero__rail span:last-child { display: none; }
  .statement__grid, .about-statement .statement__grid, .capabilities__head, .method-preview__head, .solutions-list__intro, .method-steps__intro, .case-content__grid { display: block; }
  .statement__grid > .section-number, .about-statement .statement__grid > .section-number, .capabilities__head > div > .section-number, .method-preview__head > .section-number, .solutions-list__intro > .section-number, .method-steps__intro > .section-number, .case-content__grid > .section-number { margin-bottom: 42px; }
  .statement__content .display { margin-bottom: 32px; }
  .capabilities__head .body-copy { margin-top: 28px; }
  .capabilities__stage { display: flex; flex-direction: column; gap: 44px; }
  .capabilities__visual { position: relative; top: auto; min-height: 400px; }
  .capability button { grid-template-columns: 31px 1fr 24px; padding: 22px 0; }
  .capability button strong { font-size: 2.5rem; }
  .section-heading { display: block; }
  .section-heading .text-link { margin-top: 25px; }
  .section-heading--dark .text-link { justify-self: start; }
  .cases__grid { display: block; }
  .cases__side { gap: 44px; margin-top: 46px; }
  .case-card--solid { min-height: 300px; }
  .process-rail { display: block; margin-top: 60px; }
  .process-rail li, .process-rail li:first-child { min-height: 0; padding: 24px 0; border-right: 0; border-bottom: 1px solid rgba(13,16,13,.25); }
  .process-rail span { margin-bottom: 16px; }
  .process-rail p { max-width: 280px; }
  .notes-grid, .principles-grid--notes { display: block; }
  .note-card + .note-card, .principle--large + .principle--large { margin-top: 14px; }
  .note-card { min-height: 330px; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .footer__top, .footer__bottom { display: block; }
  .footer__top p { margin: 28px 0; }
  .footer__email { display: inline-block; }
  .footer__bottom > span { display: block; margin-bottom: 10px; }
  .footer__bottom div { justify-content: flex-start; margin-top: 24px; }
  .page-hero { min-height: 86svh; }
  .page-hero__inner .display { margin: 90px 0 38px; }
  .page-hero__bottom { display: block; }
  .page-hero__bottom > span { display: block; margin-top: 35px; }
  .solution-row { grid-template-columns: 30px 1fr 25px; gap: 12px; padding: 24px 0; }
  .solution-row h2 { font-size: 2.1rem; }
  .solution-row p { font-size: .88rem; }
  .dark-band__grid, .work-note__grid, .final-inline { display: block; }
  .dark-band__grid .section-number, .work-note__grid .section-number, .final-inline .section-number { margin-bottom: 35px; }
  .dark-band__grid .button, .final-inline .button { margin-top: 35px; }
  .work-index__bar { margin-bottom: 45px; }
  .work-grid { display: block; }
  .work-card--wide { width: 100%; }
  .work-card + .work-card { margin-top: 54px; }
  .work-card--green { min-height: 360px; }
  .work-grid.is-list .work-card, .work-grid.is-list .work-card--wide { display: block; width: 100%; }
  .work-grid.is-list .work-card__image { margin-bottom: 20px; }
  .work-grid.is-list .work-card--green { min-height: 300px; }
  .method-step { grid-template-columns: 32px 1fr; gap: 14px; padding: 30px 0; }
  .method-step > strong { grid-column: 2; }
  .method-step h3 { font-size: 2.4rem; }
  .principles-grid { display: block; }
  .principle, .principle:first-child { min-height: 0; padding: 24px 0; border-right: 0; border-bottom: 1px solid rgba(13,16,13,.25); }
  .principle h3 { margin-top: 28px; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .metric, .metric:first-child { padding: 25px 16px; border-bottom: 1px solid rgba(13,16,13,.28); }
  .metric:nth-child(2) { border-right: 0; }
  .metric strong { font-size: 3.8rem; }
  .principle--large, .principle--large:first-child { min-height: 300px; padding: 25px; border: 1px solid var(--line); }
  .principle--large h3 { margin-top: 60px; }
  .contact-hero { min-height: 72svh; }
  .contact-grid { display: block; }
  .contact-aside { position: relative; top: auto; margin-bottom: 65px; }
  .contact-aside .display { margin: 30px 0 20px; }
  .case-hero { min-height: auto; padding-bottom: 60px; }
  .case-hero h1 { margin: 80px 0 30px; }
  .case-hero__meta { display: block; }
  .case-hero__meta dl { margin-top: 35px; }
  .case-hero__image { margin-top: 55px; aspect-ratio: 1.1; }
  .case-facts { grid-template-columns: 1fr; gap: 0; margin-top: 55px; }
  .case-facts > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .case-facts strong { margin: 15px 0 5px; }
  .ai-section__head { display: block; }
  .ai-section__head .lede { margin-top: 30px; }
  .ai-section__grid { display: block; background: transparent; }
  .ai-card { min-height: 280px; margin-top: 1px; }
  .ai-section__foot { display: block; }
  .ai-section__foot .text-link { margin-top: 24px; }
  .knowledge-filters { gap: 14px; }
  .knowledge-filters span { width: 100%; margin: 0 0 8px; }
  .article-grid { display: block; }
  .article-card, .article-card--feature, .article-card--wide { min-height: 330px; margin-bottom: 14px; display: flex; }
  .article-card--feature { gap: 25px; }
  .article-card__mark { min-height: 70px; border-right: 0; border-bottom: 1px solid rgba(13,16,13,.25); }
  .article-card--wide { min-height: 260px; }
  .article-hero { min-height: 85svh; }
  .article-hero__top, .article-hero__bottom { display: block; }
  .article-hero__top .page-hero__index, .article-hero__bottom > span { display: block; margin-top: 20px; }
  .article-body__grid { display: block; }
  .article-share { position: relative; top: auto; flex-direction: row; align-items: center; margin-bottom: 50px; }
  .article-share span { margin-right: 8px; }
  .article-copy .display { margin-top: 65px; }
  .article-next { margin-top: 80px; }
  .article-next a { font-size: 1.65rem; }
}

/* Cursor customizado removido — o feedback vive nos elementos. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Páginas legais: h2 simples dentro de .article-copy (sem .display) */
.article-copy h2 { max-width: 640px; margin: 54px 0 16px; font-family: var(--display); font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.article-copy h2:first-child { margin-top: 0; }
.article-copy a { color: #3f7a2c; text-decoration: underline; text-underline-offset: 3px; }
.section--dark .article-copy a, .section--ink .article-copy a { color: var(--acid-text); }

/* ===== Blocos vindos do site no ar (montan.online) ===== */

/* Cartão do Programa de Lançamento */
.offer-card { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--line-dark); background: var(--ink-2); }
.offer-card__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.offer-card__tag { padding: 6px 13px; border-radius: 999px; background: var(--acid); color: var(--ink); font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.offer-card__price strong { display: block; font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--acid-text); }
.offer-card__from { display: block; margin-bottom: 8px; color: var(--muted); font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.offer-card__terms { display: block; margin-top: 12px; color: var(--muted-light); font-size: .88rem; }
.offer-card__list { margin: 0; padding: 0; list-style: none; }
.offer-card__list li { display: flex; gap: 12px; padding-block: 11px; border-top: 1px solid var(--line-dark); color: var(--muted-light); font-size: .94rem; }
.offer-card__list li::before { content: "+"; color: var(--acid-text); font-family: var(--mono); }
.offer-card__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-top: var(--space-2); border-top: 1px solid var(--line-dark); }
.offer-note { margin: var(--space-2) 0 0; color: var(--muted); font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; }

/* Planos de manutenção */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: var(--space-3); background: var(--line-dark); border: 1px solid var(--line-dark); }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: var(--space-3) var(--space-2); background: var(--ink); transition: background .4s var(--ease-out); }
.plan:hover { background: var(--ink-2); }
.plan h3 { margin: 0; font-family: var(--display); font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--acid-text); }
.plan strong { font-family: var(--display); font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; color: var(--paper); }
.plan strong small { font-family: var(--mono); font-size: .78rem; font-weight: 400; letter-spacing: .04em; color: var(--muted); }
.plan p { flex: 1; margin: 0; color: var(--muted-light); font-size: .93rem; }
.plan--featured { background: var(--acid); }
.plan--featured:hover { background: var(--acid-soft); }
.plan--featured h3, .plan--featured strong { color: var(--ink); }
.plan--featured strong small { color: var(--ink); }
.plan--featured p { color: rgba(5,5,5,.82); }
.plan__flag { position: absolute; right: var(--space-2); top: var(--space-2); font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Botão flutuante de WhatsApp, como no site no ar */
.wa-float { position: fixed; z-index: 75; right: 22px; bottom: 22px; display: grid; width: 56px; height: 56px; place-items: center; border-radius: 50%; background: var(--acid); color: var(--ink); box-shadow: 0 10px 28px rgba(0,0,0,.45); transition: transform .3s var(--ease-out), background .3s ease; }
.wa-float:hover, .wa-float:focus-visible { transform: translateY(-3px) scale(1.05); background: var(--acid-soft); }
.wa-float svg { width: 27px; height: 27px; fill: currentColor; }

@media (max-width: 900px) {
  .offer-card { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
}

/* Ênfase dentro do lede: o miolo da frase em branco, o resto
   recuado — leitura guiada, emprestada da referência. */
.lede b { font-weight: inherit; color: var(--paper); }
.section--paper .lede b, .page--paper .lede b { color: var(--ink); }

/* ============================================================
   Padrão da referência (konrad.com), aplicado à marca Montan
   ============================================================ */

/* --- Cabeçalho: igual à referência em tela cheia ---------
   marca à esquerda · navegação centralizada · relógio local
   e CTA à direita. Abaixo de 1024px colapsa em "Menu". */
.header-clock {
  margin-right: 18px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.header-end { display: flex; align-items: center; }
.header-cta {
  padding: 10px 20px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.header-cta::after { display: none; }
.header-cta:hover, .header-cta:focus-visible {
  background: var(--acid); border-color: var(--acid-text); color: var(--ink);
}
.header-cta:hover span, .header-cta:focus-visible span { color: var(--ink); }
.site-header--light .header-cta { border-color: var(--line); }
@media (max-width: 1024px) { .header-clock { display: none; } }

/* --- Menu colapsado: painel que desce do topo, resto borrado --- */
.menu-overlay {
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  background: rgba(5, 5, 5, .5);
  backdrop-filter: blur(20px) saturate(.85);
}
.menu-overlay__top,
.menu-overlay__body {
  width: 100%;
  padding-inline: var(--gutter);
  background: var(--ink);
}
/* O cabeçalho fixo já mostra a marca e o botão Fechar por cima
   do painel — a barra interna virava colisão. */
.menu-overlay__top { display: none; }
.menu-overlay__body {
  display: block;
  padding-top: calc(var(--header-height) + clamp(20px, 4vh, 52px));
  padding-bottom: clamp(28px, 5vh, 64px);
}
/* Itens grandes, alinhados à esquerda, divisores de ponta a ponta */
.menu-links { display: block; }
.menu-links small { display: none; }
.menu-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: clamp(14px, 2.2vh, 26px);
  border-bottom: 1px solid var(--line-dark);
  color: var(--muted-light);
  transition: color .3s var(--ease-out), padding-left .4s var(--ease-out);
}
.menu-links a:first-child { border-top: 1px solid var(--line-dark); }
.menu-links a span {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.03em;
  line-height: 1.02;
}
.menu-links a i {
  font-style: normal;
  font-size: 1.2rem;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .3s ease, transform .4s var(--ease-out);
}
.menu-links a:hover, .menu-links a:focus-visible { color: var(--paper); padding-left: 14px; }
.menu-links a:hover i, .menu-links a:focus-visible i { opacity: 1; transform: translateX(0); color: var(--acid-text); }
.menu-overlay__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: clamp(20px, 4vh, 44px);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .05em;
}
.menu-overlay__aside p { max-width: 46ch; margin: 0; }
.menu-overlay__aside a { color: var(--acid-text); }

/* --- Hero centralizado ------------------------------------ */
.hero--center { min-height: auto; padding-bottom: 0; text-align: center; }
.hero--center .hero__inner { display: flex; flex-direction: column; align-items: center; }
/* line-height maior e respiro abaixo: em caixa-alta o Ç e o ã
   descem e colidiam com o lede. */
.hero--center .display--hero { max-width: 18ch; margin: 0 auto clamp(28px, 4vh, 48px); line-height: 1.0; }
.hero--center .lede { max-width: 56ch; margin-inline: auto; }
.hero--center .hero__actions { justify-content: center; }
/* Pílula do topo, como na referência */
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(28px, 5vh, 60px);
  padding: 9px 20px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: var(--muted-light);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero__pill::before { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); content: ""; }
/* Mídia full-bleed entrando por baixo do texto */
.hero__bleed {
  position: relative;
  width: 100%;
  margin-top: clamp(48px, 9vh, 120px);
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.hero__bleed video, .hero__bleed img { width: 100%; height: 100%; object-fit: cover; }
.hero__bleed::after {
  position: absolute; inset: 0; content: "";
  background: linear-gradient(180deg, rgba(5,5,5,.55), transparent 34%, rgba(5,5,5,.25));
}
.hero__bleed-label {
  position: absolute; z-index: 2; left: var(--gutter); bottom: 20px;
  color: var(--muted-light); font-family: var(--mono);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
}

@media (max-width: 720px) {
  .hero__bleed { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Projetos em grade (padrão da referência) · marcas · serviços
   ============================================================ */

/* --- Grade de 3 colunas ----------------------------------- */
.work-grid { grid-template-columns: repeat(3, 1fr); gap: 58px 26px; }
.work-card--wide { grid-column: auto; width: auto; }
.work-card__image { aspect-ratio: 4 / 3; border-radius: 2px; }
.work-card h2 { font-size: clamp(1.15rem, 1.5vw, 1.45rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.015em; line-height: 1.1; }
.work-card__meta { padding: 16px 0 8px; font-family: var(--mono); font-size: .64rem; }
.work-card p { font-size: .92rem; line-height: 1.5; }
/* Cartão tipográfico para projeto sem foto — cor por projeto */
.work-card__mark {
  display: grid; place-content: center; gap: 12px; height: 100%;
  padding: 30px; text-align: center;
  background: var(--tone, var(--ink-2));
}
.work-card__mark strong {
  font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  font-weight: 900; letter-spacing: -.04em; text-transform: uppercase;
  line-height: .95; color: var(--tone-ink, var(--paper));
}
.work-card__mark span {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tone-ink, var(--paper)); opacity: .62;
}
.work-card:hover .work-card__mark { filter: brightness(1.12); }
.work-card__mark { transition: filter .4s var(--ease-out); }
.work-count { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.work-card[hidden] { display: none; }

/* --- Faixa de marcas, minimalista ------------------------- */
.logos { border-block: 1px solid var(--line-dark); }
.section--paper .logos { border-color: var(--line); }
.logos__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 26px 44px; padding-block: 34px; }
.logos__label { flex: none; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.logos__mark {
  font-family: var(--display); font-size: clamp(.95rem, 1.4vw, 1.2rem);
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted-light); opacity: .55;
  transition: opacity .35s ease, color .35s ease;
}
.logos__mark:hover, .logos__mark:focus-visible { opacity: 1; color: var(--paper); }
.section--paper .logos__mark:hover { color: var(--ink); }

/* --- Hub e páginas de serviço ----------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.section--paper .svc-grid { border-color: var(--line); }
.svc {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  min-height: 236px; padding: 28px;
  border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark);
  background: var(--ink); transition: background .4s var(--ease-out);
}
.section--paper .svc { border-color: var(--line); }
.section--paper .svc { background: var(--paper); }
.svc:hover { background: var(--ink-2); }
.section--paper .svc:hover { background: var(--paper-2); }
.svc em { font-family: var(--mono); font-size: .66rem; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--acid-text); }
.svc h3 { margin: 6px 0 0; font-family: var(--display); font-size: clamp(1.2rem, 1.9vw, 1.65rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.05; }
.svc p { margin: 0; font-size: .92rem; color: var(--muted-light); }
.section--paper .svc p { color: var(--muted); }
.svc i { position: absolute; right: 26px; bottom: 26px; font-style: normal; color: var(--acid-text); opacity: 0; transform: translate(-8px, 8px); transition: opacity .3s ease, transform .35s var(--ease-out); }
.svc:hover i { opacity: 1; transform: none; }

/* --- Time / sobre ----------------------------------------- */
.crew { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.crew__member { padding: 30px; background: var(--ink); }
.crew__member--ia { background: var(--ink-2); }
.crew__role { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acid-text); }
.crew__member h3 { margin: 16px 0 10px; font-family: var(--display); font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
.crew__member p { margin: 0; color: var(--muted-light); font-size: .94rem; }
.crew__member ul { margin: 16px 0 0; padding: 0; list-style: none; }
.crew__member li { padding-block: 8px; border-top: 1px solid var(--line-dark); color: var(--muted); font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; }

@media (max-width: 900px) { .work-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; } }
@media (max-width: 620px) { .work-grid { grid-template-columns: 1fr; } .logos__inner { justify-content: flex-start; gap: 20px 28px; } }

/* ============================================================
   Menus suspensos · Academy · grade de projetos por marca
   ============================================================ */

/* --- Dropdown na navegação -------------------------------- */
.desktop-nav { position: absolute; }
.nav-item { position: relative; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--body); font-size: .72rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: inherit;
}
.nav-trigger::after {
  width: 7px; height: 7px; margin-top: -3px; content: "";
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .3s var(--ease-out);
}
.nav-item[data-open="true"] .nav-trigger::after { transform: rotate(-135deg) translate(-2px, -2px); }
.nav-trigger span { position: relative; }
.nav-trigger span::after {
  position: absolute; right: 0; bottom: -7px; left: 0; height: 1px;
  background: currentColor; content: ""; transform: scaleX(0);
  transform-origin: right; transition: transform .3s var(--ease-out);
}
.nav-item:hover .nav-trigger span::after,
.nav-item[data-open="true"] .nav-trigger span::after { transform: scaleX(1); transform-origin: left; }

.nav-panel {
  position: absolute; z-index: 90; top: calc(100% + 22px); left: 50%;
  width: max-content; max-width: min(660px, 88vw);
  padding: 10px; border: 1px solid var(--line-dark);
  background: color-mix(in srgb, var(--ink) 96%, transparent);
  backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity .28s ease, transform .32s var(--ease-out), visibility .28s;
}
.nav-item[data-open="true"] .nav-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-panel__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.nav-panel__grid--one { grid-template-columns: 1fr; }
.nav-panel a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 14px; color: var(--muted-light);
  font-size: .82rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  transition: background .25s ease, color .25s ease;
}
.nav-panel a::after { display: none; }
.nav-panel a em {
  flex: none; font-family: var(--mono); font-size: .62rem;
  font-style: normal; color: var(--muted); transition: color .25s ease;
}
.nav-panel a:hover, .nav-panel a:focus-visible { background: var(--ink-2); color: var(--paper); }
.nav-panel a:hover em, .nav-panel a:focus-visible em { color: var(--acid-text); }
.nav-panel__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 8px; padding: 12px 14px 4px; border-top: 1px solid var(--line-dark);
  font-family: var(--mono); font-size: .66rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.nav-panel__foot a { padding: 0; color: var(--acid-text); }
.nav-panel__foot a:hover { background: none; }

/* --- Grade de projetos por marca (sem descrição) ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.brand-card { display: block; }
.brand-card__plate {
  position: relative; display: grid; place-content: center;
  aspect-ratio: 4 / 3; padding: 30px; overflow: hidden;
  background: var(--tone, var(--ink-2));
  transition: filter .45s var(--ease-out), transform .6s var(--ease-out);
}
.brand-card:hover .brand-card__plate { filter: brightness(1.14); transform: translateY(-4px); }
.brand-card__word {
  font-family: var(--display); font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 900; letter-spacing: -.04em; text-transform: uppercase;
  line-height: .95; text-align: center; color: var(--tone-ink, var(--paper));
}
.brand-card__status {
  position: absolute; top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tone-ink, var(--paper)); opacity: .72;
}
.brand-card__status::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ""; }
.brand-card__status--wip::before { border-radius: 1px; transform: rotate(45deg); }
.brand-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 14px;
}
.brand-card__foot span {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.brand-card__foot i {
  font-style: normal; color: var(--muted); opacity: 0;
  transform: translate(-8px, 8px);
  transition: opacity .3s ease, transform .35s var(--ease-out), color .3s ease;
}
.brand-card:hover .brand-card__foot i { opacity: 1; transform: none; color: var(--acid-text); }
.brand-card[hidden] { display: none; }

/* --- Academy ---------------------------------------------- */
.academy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.academy-card {
  display: flex; flex-direction: column; gap: 14px;
  min-height: 320px; padding: 30px;
  border: 1px solid var(--line-dark); background: var(--ink-2);
  transition: border-color .4s ease, transform .5s var(--ease-out);
}
.academy-card:hover { border-color: rgba(94,158,68,.5); transform: translateY(-4px); }
.academy-card__tag {
  align-self: flex-start; padding: 5px 12px; border-radius: 999px;
  background: rgba(94,158,68,.14); color: var(--acid-text);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
}
.academy-card h3 {
  margin: auto 0 0; font-family: var(--display);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.025em; line-height: 1.02;
}
.academy-card p { margin: 0; color: var(--muted-light); font-size: .93rem; }
.academy-card__meta {
  display: flex; justify-content: space-between; gap: 14px;
  padding-top: 14px; border-top: 1px solid var(--line-dark);
  font-family: var(--mono); font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.academy-card--soon { opacity: .72; }
.academy-card--soon .academy-card__tag { background: rgba(255,255,255,.06); color: var(--muted-light); }

/* --- Stack / habilidades ---------------------------------- */
.stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 22px; }
.stack__col h3 {
  margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line-dark);
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--acid-text);
}
.stack__col ul { margin: 0; padding: 0; list-style: none; }
.stack__col li {
  padding-block: 9px; color: var(--muted-light); font-size: .92rem;
}
.stack__col li b { display: block; font-weight: 700; color: var(--paper); }

@media (max-width: 1024px) { .nav-panel { display: none; } }
@media (max-width: 900px) { .brand-grid, .academy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .brand-grid, .academy-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Classes que faltavam (vieram de uma versão descartada e
   estavam sendo usadas sem estilo nas páginas de serviço)
   ============================================================ */

/* --- Régua de seção --------------------------------------- */
.rule { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; padding-bottom: var(--space-3); border-top: 1px solid var(--line-dark); }
.section--paper .rule { border-top-color: var(--line); }

/* --- Superfície carvão ------------------------------------ */
.section--carbon { background: var(--ink-2); color: var(--paper); }
.section--carbon .display, .section--carbon .statement__content .display { color: var(--paper); }
.section--carbon .body-copy { color: var(--muted-light); }
.sec--tight { padding-block: var(--space-4); }

/* --- Antes / depois e listas de entregáveis --------------- */
.ba { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px; }
.ba__col { padding: 30px; border: 1px solid var(--line-dark); }
.section--paper .ba__col { border-color: var(--line); }
.ba__col--after { border-color: rgba(94, 158, 68, .45); background: rgba(94, 158, 68, .07); }
.ba__col h3 { margin: 0 0 20px; font-family: var(--display); font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--paper); }
.section--paper .ba__col h3 { color: var(--ink); }
.ba__col ul { margin: 0; padding: 0; list-style: none; }
.ba__col li { display: flex; gap: 14px; padding-block: 12px; border-top: 1px solid var(--line-dark); color: var(--muted-light); font-size: .95rem; line-height: 1.5; }
.section--paper .ba__col li { border-top-color: var(--line); color: var(--muted); }
.ba__col li::before { flex: none; content: "—"; color: var(--muted); font-family: var(--mono); }
.ba__col--after li::before { content: "+"; color: var(--acid-text); }
/* Lista de entregáveis longa: duas colunas quando couber */
.ba__col--wide ul { columns: 2; column-gap: 44px; }
.ba__col--wide li { break-inside: avoid; }
@media (max-width: 760px) { .ba__col--wide ul { columns: 1; } }

/* --- Passos em grade -------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.section--paper .steps { border-color: var(--line); }
.step { position: relative; padding: 28px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); transition: background .4s var(--ease-out); }
.section--paper .step { border-color: var(--line); }
.step:hover { background: var(--ink-2); }
.section--paper .step:hover { background: var(--paper-2); }
.step em { font-family: var(--mono); font-size: .68rem; font-style: normal; letter-spacing: .1em; color: var(--acid-text); }
.step h3 { margin: 16px 0 10px; font-family: var(--display); font-size: 1.08rem; font-weight: 800; text-transform: uppercase; letter-spacing: -.012em; }
.step p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--muted-light); }
.section--paper .step p { color: var(--muted); }
.step::after { position: absolute; left: 0; top: 0; width: 0; height: 2px; background: var(--acid); content: ""; transition: width .5s var(--ease-out); }
.step:hover::after { width: 100%; }

/* Bloco de dados em duas colunas — antes deixava metade da tela vazia */
.contact-aside dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 44px; }
.contact-aside dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: baseline; }
@media (max-width: 620px) { .contact-aside dl > div { grid-template-columns: 1fr; gap: 4px; } }

/* ============================================================
   Vocabulário de movimento aprendido da referência
   Durações curtas (.12–.4s), easing premium, só transform/opacity
   ============================================================ */
:root {
  --ease-premium: cubic-bezier(.22, 1, .36, 1);
  --t-micro: .16s;
  --t-base: .24s;
  --t-slow: .36s;
}

/* --- Letras do hero reagindo ao ponteiro ------------------ */
/* Cada letra é um span com --cw; o JS aproxima o peso conforme
   a distância do cursor. Fonte variável (Montserrat 100..900). */
/* A palavra é o átomo da quebra de linha; a letra só reage. */
.wrd { display: inline-block; white-space: nowrap; }
.ltr {
  display: inline-block;
  font-variation-settings: 'wght' var(--cw, 800);
  transition: font-variation-settings var(--t-slow) var(--ease-premium);
  will-change: font-variation-settings;
}
.ltr--space { white-space: pre; }
@media (prefers-reduced-motion: reduce) {
  .ltr { font-variation-settings: 'wght' 800 !important; transition: none; }
  .wrd { display: inline; }
}

/* --- Acordeão sem medir altura em JS ---------------------- */
.acc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-slow) var(--ease-premium); }
.acc > * { overflow: hidden; min-height: 0; }
[aria-expanded="true"] + .acc, .is-open > .acc { grid-template-rows: 1fr; }

/* --- Faixa de marcas em marquee --------------------------- */
.logos--marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logos__track { display: flex; align-items: center; gap: 64px; width: max-content; animation: logo-marquee 34s linear infinite; }
.logos--marquee:hover .logos__track { animation-play-state: paused; }
@keyframes logo-marquee { to { transform: translateX(calc(-100% / var(--logo-copies, 2))); } }

/* --- Transição de página empilhada ------------------------ */
/* A página que sai recua e encolhe; a que entra sobe por baixo. */
@keyframes montan-page-exit { to { transform: translateY(-7.5%) scale(.88); opacity: .6; } }
@keyframes montan-page-enter { from { transform: translateY(100%); } }
.js body.is-leaving > main, .js body.is-leaving > .site-footer { animation: montan-page-exit .42s var(--ease-premium) forwards; }
.page-veil {
  position: fixed; z-index: 150; inset: 0; pointer-events: none;
  background: var(--ink); transform: translateY(100%);
}
.js body.is-leaving .page-veil { animation: montan-page-enter .42s var(--ease-premium) forwards; }
@media (prefers-reduced-motion: reduce) {
  .js body.is-leaving > main, .js body.is-leaving > .site-footer, .js body.is-leaving .page-veil { animation: none !important; }
}

/* --- Ritmo geral mais rápido, no padrão da referência ----- */
.btn, .button, .text-link, .svc, .step, .brand-card, .academy-card,
.work-card, .plan, .ai-card, .nav-panel a, .footer__col a {
  transition-duration: var(--t-base);
  transition-timing-function: var(--ease-premium);
}

/* ============================================================
   Arredondamento global — nada quadrado
   ============================================================ */
:root {
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;
}

/* Superfícies e mídia */
.work-card__image, .case-card__image, .card__img, .hero__image-frame,
.brand-card__plate, .caps__stage, .academy-card, .crew__member,
.ba__col, .svc, .step, .plan, .ai-card, .offer-card, .figure,
.work-card__mark, .capabilities__visual, .case-card--solid,
.work-card--green, .note-card, .nav-panel, .form__ok, .logos {
  border-radius: var(--r-md);
}
.brand-card__plate, .work-card__image, .case-card__image, .card__img,
.caps__stage, .academy-card, .offer-card { border-radius: var(--r-lg); }
.hero__image-frame { border-radius: var(--r-xl); clip-path: none; }

/* Controles */
.button, .btn, .header-cta, .filters button, .view-toggle button,
.offer-card__tag, .academy-card__tag, .cap__tags li, .case-card__tag,
.hero__pill, .skip-link { border-radius: var(--r-pill); }
.field input, .field textarea, .field select, .footer__form,
.ft__form, .menu-toggle { border-radius: var(--r-sm); }

/* Grades que usavam borda de célula viram cartões separados */
.svc-grid { gap: 10px; border: 0; }
.svc { border: 1px solid var(--line-dark); }
.section--paper .svc { border-color: var(--line); }
.steps { gap: 10px; border: 0; }
.step { border: 1px solid var(--line-dark); }
.section--paper .step { border-color: var(--line); }
.crew { gap: 10px; background: none; border: 0; }
.crew__member { border: 1px solid var(--line-dark); }
.plans { gap: 10px; background: none; border: 0; }
.plan { border: 1px solid var(--line-dark); }
.figures { gap: 10px; background: none; border: 0; }
.figure { border: 1px solid var(--line-dark); }
.ai-section__grid { gap: 10px; }
.ai-card { border: 1px solid var(--line-dark); }

/* Cantos do topo do cartão de projeto acompanham a placa */
.work-card, .brand-card { border-radius: var(--r-lg); }

/* Cabeçalhos de seção mais justos */
.section-heading, .capabilities__head, .method-preview__head { padding-bottom: var(--space-3); }
.statement__grid { gap: var(--space-3); }
.hero--center { padding-block: calc(var(--header-height) + var(--space-4)) var(--space-4); }
.page-hero { min-height: auto; padding-top: calc(var(--header-height) + var(--space-4)); padding-bottom: var(--space-4); }
.final-cta { padding-block: var(--space-4); }
.footer__cta { padding-block: var(--space-4); }

/* Logo real da marca dentro da placa do projeto */
.brand-card__logo { display: block; width: clamp(120px, 62%, 260px); height: auto; margin-inline: auto; opacity: .95; }
.brand-card:hover .brand-card__logo { opacity: 1; }

/* ============================================================
   Ajustes de leitura, pontilhado e transição enxuta
   ============================================================ */

/* --- Contraste sobre o verde musgo ------------------------ */
/* O musgo é escuro: texto cinza sobre ele some. Tudo vai a
   preto quase pleno e com mais peso. */
.section--accent .display { color: var(--ink); }
.section--accent .body-copy,
.section--accent .lede { color: rgba(5, 5, 5, .82); font-weight: 500; }
.section--accent .section-number { color: var(--muted); font-weight: 700; }
.section--accent .process-rail { border-top-color: rgba(5, 5, 5, .3); }
.section--accent .process-rail li { border-right-color: rgba(5, 5, 5, .3); }
.section--accent .process-rail span { color: rgba(5, 5, 5, .62); font-weight: 700; }
.section--accent .process-rail strong {
  font-family: var(--display); font-weight: 900;
  text-transform: uppercase; letter-spacing: -.02em;
  color: var(--ink);
}
.section--accent .process-rail p { color: rgba(5, 5, 5, .8); font-weight: 500; }
.section--accent .step h3, .section--accent .step p { color: var(--ink); }

/* --- Pontilhado que respira -------------------------------- */
.dots {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(244, 244, 241, .16) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(75% 60% at 50% 45%, #000, transparent 72%);
  mask-image: radial-gradient(75% 60% at 50% 45%, #000, transparent 72%);
  animation: dots-drift 26s linear infinite;
}
.dots--accent { background-image: radial-gradient(circle, rgba(5, 5, 5, .2) 1px, transparent 1px); }
@keyframes dots-drift { to { background-position: 28px 28px; } }
.hero__inner, .page-hero__inner { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .dots { animation: none; } }

/* --- Transição de página: preta e discreta ----------------- */
.page-wipe { background: var(--ink); color: var(--paper); }
.page-wipe span {
  font-family: var(--display);
  font-size: clamp(.9rem, 1.1vw, 1.05rem);
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
}
/* a pilha empilhada foi descartada — fica só o preto */
.js body.is-leaving > main, .js body.is-leaving > .site-footer { animation: none; }
.page-veil { display: none; }
/* A assinatura da Melldoura já vem com o menta da marca no arquivo;
   preenche a placa inteira para não aparecer emenda de cor. */
.brand-card__plate--fill { padding: 0; }
.brand-card__plate--fill .brand-card__logo { width: 100%; height: 100%; object-fit: cover; }

/* Cabeçalho da faixa verde: a coluna do rótulo era larga demais
   e deixava metade da seção vazia. */
.method-preview__head { grid-template-columns: 200px minmax(0, 1fr) !important; gap: var(--space-2) var(--space-3); align-items: start; }
.method-preview__head > div { max-width: 62ch; }
.method-preview { padding-block: var(--space-4); }
.process-rail { margin-top: var(--space-3); }
@media (max-width: 860px) { .method-preview__head { grid-template-columns: 1fr !important; } }

/* ============================================================
   Correções: arredondamento que faltou e bloco de dados
   ============================================================ */

/* Cartões do Conhecimento ficaram quadrados */
.article-card, .article-card--feature, .article-card--dark, .article-card--wide,
.case-card, .work-card--green, .capability-visual__texture, .metric,
.principle, .method-step, .solution-row, .note-card, .contact-aside,
.knowledge-filters button, .filters button, .field, .form-field input,
.form-field textarea, .form-field select, .consent, .article-share a {
  border-radius: var(--r-md);
}
.article-card--feature { border-radius: var(--r-lg); }
.article-card__mark { border-radius: var(--r-sm); }
/* nada de canto vivo em lugar nenhum */
img, video, iframe, .hero__image-frame, .brand-card__plate { border-radius: var(--r-lg); }
.brand-card__logo, .logos__mark, .arw, .ltr { border-radius: 0; }

/* --- Dados: virou uma tabela legível, não um amontoado ----- */
.contact-aside dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 2px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  overflow: hidden;
}
.section--paper .contact-aside dl { border-color: var(--line); }
.contact-aside dl > div {
  display: block;
  padding: 20px 22px;
  border: 0;
  background: rgba(255, 255, 255, .02);
}
.section--paper .contact-aside dl > div { background: rgba(5, 5, 5, .03); }
.contact-aside dt {
  display: block; margin-bottom: 8px;
  font-family: var(--mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--acid-text);
}
.contact-aside dd {
  margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4;
  color: var(--paper);
}
.section--paper .contact-aside dd { color: var(--ink); }

/* ============================================================
   Movimento ligado ao scroll + faixa de projetos
   ============================================================ */

/* --- Faixa de projetos que corre sempre -------------------- */
.reel { position: relative; overflow: hidden; padding-block: 22px; border-block: 1px solid var(--line-dark); background: var(--ink-2); }
.section--paper .reel { border-color: var(--line); background: var(--paper-2); }
.reel::before, .reel::after {
  position: absolute; z-index: 2; top: 0; bottom: 0; width: 12%; content: "";
  pointer-events: none;
}
.reel::before { left: 0; background: linear-gradient(90deg, var(--ink-2), transparent); }
.reel::after { right: 0; background: linear-gradient(270deg, var(--ink-2), transparent); }
.section--paper .reel::before { background: linear-gradient(90deg, var(--paper-2), transparent); }
.section--paper .reel::after { background: linear-gradient(270deg, var(--paper-2), transparent); }
.reel__track { display: flex; align-items: center; gap: 18px; width: max-content; animation: reel-run 44s linear infinite; }
.reel:hover .reel__track { animation-play-state: paused; }
@keyframes reel-run { to { transform: translateX(-50%); } }
.reel__item {
  display: inline-flex; align-items: center; gap: 12px; flex: none;
  padding: 10px 18px; border: 1px solid var(--line-dark); border-radius: var(--r-pill);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-light);
  transition: border-color var(--t-base) var(--ease-premium), color var(--t-base) var(--ease-premium);
}
.section--paper .reel__item { border-color: var(--line); color: var(--muted); }
.reel__item:hover { border-color: var(--acid-text); color: var(--paper); }
.section--paper .reel__item:hover { color: var(--ink); }
.reel__item b { font-family: var(--display); font-weight: 800; font-size: .8rem; letter-spacing: -.01em; text-transform: none; color: inherit; }
.reel__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); }
.reel__dot--wip { border-radius: 1px; transform: rotate(45deg); background: var(--muted); }
@media (prefers-reduced-motion: reduce) { .reel__track { animation: none; } }

/* --- Movimento ligado ao scroll ---------------------------- */
/* Navegadores com scroll-driven animation ganham parallax e
   entrada contínua; os demais mantêm o reveal por observer. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sd-rise {
      animation: sd-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
    @keyframes sd-rise {
      from { opacity: 0; transform: translateY(46px); }
      to { opacity: 1; transform: none; }
    }

    /* imagem que respira ao atravessar a tela */
    .sd-parallax > img, .sd-parallax > video {
      animation: sd-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes sd-parallax {
      from { transform: scale(1.16) translateY(-3%); }
      to { transform: scale(1.16) translateY(3%); }
    }

    /* faixa que se revela na horizontal conforme desce */
    .sd-wipe {
      animation: sd-wipe linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 34%;
    }
    @keyframes sd-wipe {
      from { clip-path: inset(0 100% 0 0); }
      to { clip-path: inset(0 0 0 0); }
    }

    /* título que ganha peso conforme entra */
    .sd-weight {
      animation: sd-weight linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }
    @keyframes sd-weight {
      from { letter-spacing: .04em; opacity: .35; }
      to { letter-spacing: -.028em; opacity: 1; }
    }
  }
}

/* --- Banda editorial com gente ---------------------------- */
.people {
  position: relative; overflow: hidden;
  height: clamp(320px, 52vh, 560px);
  border-radius: var(--r-lg);
}
.people img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(1.04); }
.people::after {
  position: absolute; inset: 0; content: "";
  background: linear-gradient(180deg, rgba(5,5,5,.5), transparent 42%, rgba(5,5,5,.72));
}
.people__cap {
  position: absolute; z-index: 2; left: 26px; right: 26px; bottom: 22px;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-light);
}
.people__cap strong {
  font-family: var(--display); font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 800; letter-spacing: -.02em; text-transform: none; color: var(--paper);
}

/* ============================================================
   Correções de emenda entre seções
   ============================================================ */
/* O body era claro: qualquer folga entre seções escuras deixava
   passar uma faixa branca. O site é escuro por padrão. */
body { background: var(--ink); }

/* A faixa de projetos precisa de ar e não pode encostar na seção */
.reel { margin-block: 0; }
.reel + .section, .section + .reel { margin-top: 0; }

/* Trilha do processo: colunas largas demais estreitavam o texto */
.process-rail { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0; }
.process-rail li { min-height: auto; padding: 0 clamp(18px, 2vw, 30px); }
.process-rail li:first-child { padding-left: 0; }
.process-rail li:last-child { border-right: 0; }
.process-rail p { max-width: 34ch; }

/* ============================================================
   Portes do React Bits, em vanilla
   ============================================================ */

/* --- Strands: fios de luz no fundo do hero ---------------- */
.strands {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
  opacity: .55;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 78%);
}

/* --- BlurText: palavra entra desfocada e assenta ---------- */
.js [data-blur] .wrd,
.js [data-blur] .blur-w {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(-40px);
}
.js [data-blur].is-in .wrd,
.js [data-blur].is-in .blur-w {
  animation: blur-in .62s var(--ease-premium) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes blur-in {
  0%   { opacity: 0;  filter: blur(10px); transform: translateY(-40px); }
  55%  { opacity: .5; filter: blur(5px);  transform: translateY(4px); }
  100% { opacity: 1;  filter: blur(0);    transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-blur] .wrd, .js [data-blur] .blur-w {
    opacity: 1; filter: none; transform: none; animation: none;
  }
}

/* --- BounceCards: entrada elástica + empurrão no hover ---- */
.js [data-bounce] > * {
  transform: scale(0);
  transform-origin: center;
}
.js [data-bounce].is-in > * {
  animation: bounce-in .78s var(--ease-elastic) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
:root { --ease-elastic: cubic-bezier(.2, 1.5, .35, 1); }
@keyframes bounce-in { from { transform: scale(0); } to { transform: scale(1); } }
/* o vizinho recua um pouco quando o cursor escolhe um cartão */
[data-bounce] > * { transition: transform .42s var(--ease-premium); }
[data-bounce].is-hovering > *[data-push="-1"] { transform: translateX(-14px) scale(.975); }
[data-bounce].is-hovering > *[data-push="1"]  { transform: translateX(14px) scale(.975); }
[data-bounce].is-hovering > *[data-push="0"]  { transform: translateY(-8px) scale(1.02); z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .js [data-bounce] > * { transform: none; animation: none; }
  [data-bounce].is-hovering > * { transform: none !important; }
}

/* --- GlareHover: brilho que varre o cartão ---------------- */
[data-glare] { position: relative; overflow: hidden; }
[data-glare]::before {
  position: absolute; inset: 0; z-index: 3; content: "";
  pointer-events: none;
  background: linear-gradient(
    var(--glare-angle, -30deg),
    hsla(0, 0%, 0%, 0) 60%,
    var(--glare-color, rgba(255, 255, 255, .18)) 70%,
    hsla(0, 0%, 0%, 0),
    hsla(0, 0%, 0%, 0) 100%
  );
  background-size: var(--glare-size, 260%) var(--glare-size, 260%);
  background-repeat: no-repeat;
  background-position: -100% -100%;
  transition: background-position var(--glare-time, 760ms) ease;
}
[data-glare]:hover::before, [data-glare]:focus-visible::before {
  background-position: 100% 100%;
}
/* sobre o musgo o brilho é escuro, senão some */
.plan--featured[data-glare]::before,
.section--accent [data-glare]::before { --glare-color: rgba(5, 5, 5, .16); }
@media (prefers-reduced-motion: reduce) {
  [data-glare]::before { display: none; }
}

/* --- SpecularButton: luz na borda seguindo o ponteiro ------ */
/* Porte em gradiente cônico. O original abre um canvas WebGL
   por botão — o navegador limita ~16 contextos, e o site tem
   dezenas. Aqui o custo é uma variável CSS. */
.btn-spec { position: relative; isolation: isolate; }
.btn-spec::after {
  position: absolute; inset: -1px; z-index: -1; content: "";
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--spec-angle, 210deg),
    transparent 0deg,
    var(--spec-line, rgba(255, 255, 255, .92)) 8deg,
    transparent 22deg,
    transparent 180deg,
    var(--spec-line, rgba(255, 255, 255, .92)) 188deg,
    transparent 202deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--spec-on, 0);
  transition: opacity .32s var(--ease-premium);
}
.button--acid.btn-spec { --spec-line: rgba(5, 5, 5, .55); }
@media (prefers-reduced-motion: reduce) { .btn-spec::after { display: none; } }

/* Canvas do motor de fundo */
.bg-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
  opacity: .5;
  -webkit-mask-image: radial-gradient(85% 75% at 50% 50%, #000 28%, transparent 80%);
  mask-image: radial-gradient(85% 75% at 50% 50%, #000 28%, transparent 80%);
}

/* ============================================================
   Scroll-tabs — recriado nativo
   ------------------------------------------------------------
   Mesma ideia do código que o Vitor mandou (wrapper alto +
   sticky + conteúdo que troca), reescrito com nossos tokens,
   sem Webflow, sem classes de terceiro.
   ============================================================ */
.scroll-tabs { position: relative; padding: 0; }
.scroll-tabs__track { position: relative; height: 320vh; }
.scroll-tabs__stick {
  position: sticky; top: 0;
  display: flex; align-items: center;
  height: 100vh; overflow: hidden;
}
.scroll-tabs__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: stretch;
  width: 100%;
}
.scroll-tabs__side { display: flex; flex-direction: column; justify-content: center; }

/* --- Coluna dos passos ------------------------------------ */
.scroll-tabs__list { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.scroll-tabs__step {
  position: relative;
  padding: clamp(14px, 1.8vh, 22px) 0 clamp(14px, 1.8vh, 22px) 26px;
  border-top: 1px solid var(--line-dark);
  opacity: .38;
  transition: opacity .5s var(--ease-premium);
}
.scroll-tabs__step:last-child { border-bottom: 1px solid var(--line-dark); }
.scroll-tabs__step.is-on { opacity: 1; }
/* barra que marca o passo atual */
.scroll-tabs__step::before {
  position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
  background: var(--acid); content: "";
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--ease-premium);
}
.scroll-tabs__step.is-on::before { transform: scaleY(1); }
.scroll-tabs__step em {
  font-family: var(--mono); font-size: .68rem; font-style: normal;
  letter-spacing: .1em; color: var(--acid-text);
}
.scroll-tabs__step strong {
  display: block; margin: 8px 0 6px;
  font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 2.1rem);
  font-weight: 800; text-transform: uppercase; letter-spacing: -.025em;
  line-height: 1; color: var(--paper);
}
.scroll-tabs__step p {
  max-width: 42ch; margin: 0;
  color: var(--muted-light); font-size: .95rem; line-height: 1.5;
}

/* --- Palco que troca -------------------------------------- */
.scroll-tabs__stage {
  position: relative; overflow: hidden; align-self: center;
  width: 100%; height: min(72vh, 620px);
  border-radius: var(--r-lg); background: var(--ink-2);
}
.scroll-tabs__panel {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transform: translateY(6%) scale(1.04);
  transition: opacity .6s var(--ease-premium), transform .8s var(--ease-premium);
}
.scroll-tabs__panel.is-on { opacity: 1; transform: none; }
.scroll-tabs__panel img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.scroll-tabs__panel figcaption {
  position: absolute; left: 20px; right: 20px; bottom: 18px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--paper);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
}
/* trilho de progresso do scroll */
.scroll-tabs__bar {
  position: absolute; z-index: 2; left: 20px; right: 20px; top: 18px;
  height: 2px; background: rgba(255, 255, 255, .16); border-radius: 2px;
}
.scroll-tabs__bar i {
  display: block; height: 100%; width: 0;
  background: var(--acid); border-radius: 2px;
}

@media (max-width: 900px) {
  .scroll-tabs__track { height: auto; }
  .scroll-tabs__stick { position: static; height: auto; padding-block: var(--space-4); }
  .scroll-tabs__grid { grid-template-columns: 1fr; }
  .scroll-tabs__stage { order: -1; }
  .scroll-tabs__step { opacity: 1; }
  .scroll-tabs__step::before { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-tabs__panel { transition: none; }
}

/* --- Parallax em camadas (perspective) -------------------- */
/* A técnica do código enviado, adaptada: em vez de tomar o
   scroll do documento inteiro, fica contida numa seção. */
.plx { position: relative; height: 78vh; overflow: hidden; border-radius: var(--r-lg); }
.plx__layer { position: absolute; inset: -10% -5%; will-change: transform; }
.plx__layer img { width: 100%; height: 100%; object-fit: cover; }
.plx__layer--deep  { z-index: 1; filter: saturate(.6) brightness(.5); }
.plx__layer--base  { z-index: 2; }
.plx__layer--fore  { z-index: 3; }
.plx__content {
  position: absolute; z-index: 4; inset: auto 0 0 0;
  padding: var(--space-3);
  background: linear-gradient(0deg, rgba(5, 5, 5, .88), transparent);
}

/* ============================================================
   Regra de contraste: o acento vive em UMA camada só
   ------------------------------------------------------------
   Onde o fundo já carrega o verde da marca (motor WebGL), o
   texto vai a branco. Verde sobre verde some — não é opinião,
   é contraste.
   ============================================================ */
[data-bg].section--dark .display em,
[data-bg].page-hero--dark .display em,
[data-bg].section--ink .display em,
[data-bg].section--carbon .display em { color: var(--paper); }
/* em superfície clara o acento continua sendo o verde */
.section--paper .display em { color: #3f7a2c; }
.section--accent .display em { color: var(--ink); }
[data-bg] .hero__pill { color: var(--paper); border-color: rgba(244, 244, 241, .22); }
[data-bg] .lede b { color: var(--paper); }
/* o musgo volta a ser acento no que fica FORA da área iluminada */
[data-bg] .mono-label, [data-bg] .eyebrow, [data-bg] .section-number { color: var(--acid-text); }

/* o brilho não pode competir com a leitura do título */
.bg-canvas { opacity: .42; }

/* ============================================================
   A seta segue o texto, não uma cor fixa
   ------------------------------------------------------------
   A regra global pintava toda seta de musgo claro. Em botão de
   fundo musgo isso dava rótulo escuro + seta clara no mesmo
   componente. Ícone e texto são a mesma informação: mesma cor.
   ============================================================ */
.button--acid span,
.button--acid:hover span,
.button--acid:focus-visible span,
.plan--featured .text-link span,
.section--accent .button span,
.section--accent .text-link span,
.footer__form button span { color: var(--ink); }

/* Sobre superfície musgo, qualquer seta acompanha o texto preto */
.section--accent .arw,
.plan--featured .arw,
.brand-card__plate[style*="5e9e44"] .arw { color: var(--ink); }

/* ============================================================
   15. Correções finais: sticky, cabeçalho e CTA
   ============================================================ */

/* --- overflow-x: hidden quebrava o position: sticky -------- */
/* `hidden` cria um contêiner de rolagem e mata o sticky dos
   filhos. `clip` corta igual sem criar o contêiner. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* --- Cabeçalho em grade: o menu centra de verdade ---------- */
/* Antes era flex + nav absoluto: com mais itens o menu crescia
   por cima do relógio. Agora as três faixas se respeitam. */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(14px, 2vw, 32px);
}
.desktop-nav {
  position: static;
  transform: none;
  justify-self: center;
  gap: clamp(10px, 1.4vw, 24px);
  white-space: nowrap;
}
.site-header > .brand { justify-self: start; }
.header-end { justify-self: end; gap: 14px; }
.desktop-nav a, .nav-trigger { font-size: clamp(.64rem, .78vw, .72rem); }

/* --- CTA do cabeçalho com fundo da marca ------------------- */
/* precisa vencer .site-header--dark .header-cta, que pintava
   o texto de claro — sobre o musgo o texto é preto */
.site-header .header-cta,
.site-header--dark .header-cta,
.site-header--light .header-cta { color: var(--ink); }
.header-cta {
  background: var(--acid);
  border-color: var(--acid-text);
  color: var(--ink);
}
.header-cta span, .header-cta .arw { color: var(--ink); }
.header-cta:hover, .header-cta:focus-visible {
  background: var(--acid-soft);
  border-color: var(--acid-text);
  color: var(--ink);
}
.header-cta:hover span { color: var(--ink); }
.site-header--light .header-cta { border-color: var(--acid-text); }

@media (max-width: 1280px) { .header-clock { display: none; } }
@media (max-width: 1024px) {
  .site-header { display: flex; justify-content: space-between; }
}

/* CTA do cabeçalho não quebra linha; encurta antes de espremer */
.header-cta { white-space: nowrap; }
@media (max-width: 1400px) {
  .header-cta .cta-longo { display: none; }
}

/* ============================================================
   16. Botão da marca: fundo verde, letras brancas
   ------------------------------------------------------------
   Decisão do Vitor (03/08). Branco sobre o musgo #5e9e44 dá
   3,1:1 — ilegível no tamanho do rótulo. Usamos o verde de
   pressão #4a7c3a, que sobe para 4,6:1 e continua sendo o
   verde da marca. A seta acompanha o texto.
   ============================================================ */
.button--acid,
.btn--moss,
.site-header .header-cta,
.site-header--dark .header-cta,
.site-header--light .header-cta {
  background: var(--moss-press, #4a7c3a);
  border-color: var(--moss-press, #4a7c3a);
  color: #fff;
}
.button--acid span, .button--acid .arw,
.btn--moss span, .btn--moss .arw,
.header-cta span, .header-cta .arw { color: #fff; }

.button--acid:hover, .button--acid:focus-visible,
.btn--moss:hover, .btn--moss:focus-visible,
.header-cta:hover, .header-cta:focus-visible {
  background: var(--acid);
  border-color: var(--acid-text);
  color: #fff;
}
.button--acid:hover span, .header-cta:hover span,
.button--acid:hover .arw, .header-cta:hover .arw { color: #fff; }

/* o botão do formulário da carta segue o mesmo padrão */
.footer__form button { background: var(--moss-press, #4a7c3a); color: #fff; }
.footer__form button:hover { background: var(--acid); color: #fff; }

/* Rótulo do botão em peso black — decisão do Vitor.
   Com 900 o branco sobre o verde ganha corpo e leitura. */
.button--acid, .btn--moss, .header-cta,
.button--acid span, .btn--moss span, .header-cta span {
  font-weight: 900;
  letter-spacing: .06em;
}

/* ============================================================
   17. Etapas: cada passo é uma seção · parallax na página toda
   ------------------------------------------------------------
   Substitui o scroll-tabs. A ideia do código enviado (camadas
   em profundidades diferentes) vale para a página inteira, mas
   SEM rolar dentro de uma div — isso quebraria header fixo,
   âncoras e sticky. A profundidade vem de translate3d por
   elemento, dirigido pelo scroll do documento.
   ============================================================ */

.sec-abre { max-width: 62ch; }
.sec-abre .display { margin: var(--space-2) 0; }


/* --- Profundidade em toda a página ------------------------ */
/* Cada elemento marcado ganha um deslocamento proporcional à
   sua posição na tela. Três profundidades, como no original. */
.plx-media img, [data-depth] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .plx-media img, [data-depth] { transform: none !important; }
}

/* ============================================================
   18. Etapas simples — sem foto, só ritmo e hairline
   ------------------------------------------------------------
   A versão com foto ficou pesada e repetitiva (as mesmas quatro
   imagens em rodízio por 12 páginas). Agora é o essencial: um
   número, um título, uma frase.
   ============================================================ */
.etapa { padding-block: 0; }
.etapa + .etapa { padding-top: 0; }

.etapa__linha {
  display: grid;
  grid-template-columns: 90px minmax(0, 22ch) minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  padding-block: clamp(26px, 3.4vw, 46px);
  border-top: 1px solid var(--line-dark);
  transition: background var(--t-base) var(--ease-premium);
}
.section--paper .etapa__linha { border-top-color: var(--line); }
.etapa:last-of-type .etapa__linha { border-bottom: 1px solid var(--line-dark); }

.etapa__texto { display: contents; }
.etapa__num {
  margin: 0;
  font-family: var(--mono); font-size: .74rem;
  letter-spacing: .14em; color: var(--acid-text);
}
.etapa__texto h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  font-weight: 800; text-transform: uppercase;
  letter-spacing: -.025em; line-height: 1;
  color: var(--paper);
}
.etapa__texto .body-copy {
  max-width: 54ch; margin: 0;
  color: var(--muted-light); font-size: .98rem; line-height: 1.55;
}

/* a linha inteira acende de leve ao passar o cursor */
.etapa__linha:hover { background: rgba(255, 255, 255, .022); }

@media (max-width: 820px) {
  .etapa__linha { grid-template-columns: 1fr; gap: 10px; }
  .etapa__texto h3 { margin-top: 2px; }
}

/* ============================================================
   19. Sem fotografia — a marca ocupa o lugar da imagem
   ------------------------------------------------------------
   Decisão do Vitor (03/08): as fotos editoriais não estavam no
   nível. O site passa a ser tipografia, cor e marca. Quando
   entrar fotografia nova, é só voltar a usar .plx-media.
   ============================================================ */
.case-plate {
  display: grid; place-content: center;
  aspect-ratio: 16 / 10; padding: var(--space-3);
  border: 1px solid var(--line-dark); border-radius: var(--r-lg);
  background: var(--ink-2);
}
.case-plate__logo { width: clamp(160px, 42%, 320px); height: auto; }

/* ============================================================
   20. Passe de contraste — auditado, não no olho
   ------------------------------------------------------------
   Auditoria mediu cada texto contra o fundo real e achou 44
   falhas de WCAG. A pior: o H1 em cor-de-papel sobre fundo de
   papel (razão 1:1, texto invisível). Causa raiz: as cores de
   texto eram fixas, pensadas só para fundo escuro.
   Agora a cor vem da SUPERFÍCIE, não da classe do título.
   ============================================================ */

/* --- Títulos herdam a cor da seção ------------------------- */
.display--hero, .display--xl, .display--lg, .display--md, .display--sm { color: inherit; }
.section--dark, .section--ink, .section--carbon, .page-hero--dark { color: var(--paper); }
.section--paper { color: var(--ink); }
.section--dark .display, .section--ink .display,
.section--carbon .display, .page-hero--dark .display,
[data-bg] .display { color: var(--paper); }
.section--paper .display, .section--accent .display { color: var(--ink); }
/* a letra viva também segue a superfície */
.section--paper .ltr, .section--accent .ltr { color: inherit; }

/* --- Cabeçalho é sempre escuro; a variante clara mentia ---- */
.site-header--light,
.site-header--light .desktop-nav a,
.site-header--light .nav-trigger { color: var(--paper); }
.site-header--light.is-scrolled {
  border-color: var(--line-dark);
  background: color-mix(in srgb, var(--ink) 90%, transparent);
}

/* --- Texto secundário sobre papel -------------------------- */
/* --muted-light foi feito para fundo escuro. Sobre papel dava
   2:1. Cada superfície tem o seu tom de apoio. */
.section--paper .lede,
.section--paper .page-hero__index,
.section--paper .hero__index,
.section--paper .work-count,
.section--paper .offer-note,
.section--paper .form__note { color: #5a6057; }
.section--paper .body-copy,
.section--paper .step p,
.section--paper .svc p,
.section--paper .etapa__texto .body-copy { color: #4d5349; }
.section--paper .section-number,
.section--paper .mono-num { color: var(--muted); }
.section--paper .eyebrow,
.section--paper .mono-label { color: #3f7a2c; }
.section--paper .article-card__meta,
.section--paper .card__foot,
.section--paper .brand-card__foot span,
.section--paper .reel__item { color: #5a6057; }

/* --- Relógio e rodapé no escuro ---------------------------- */
.header-clock { color: #8b9186; }
.site-footer--dark .footer__legal,
.menu-overlay__aside { color: #8b9186; }

/* --- Cartão verde: texto sempre preto pleno ---------------- */
.article-card--feature, .article-card--feature *,
.plan--featured h3, .plan--featured p { color: var(--ink); }
.article-card--feature .article-card__meta { color: rgba(5, 5, 5, .72); }

/* --- Cartão com fundo próprio manda na cor do seu texto ---- */
/* A regra da seção (.section--paper .display) atropelava os
   cartões escuros e verdes dentro dela: preto sobre preto.

   O `*` que existia aqui era o erro: ele cravava a cor em TODO
   descendente, então quando o cartão trocava de cor (ex.: .svc
   dentro de .section--paper vira claro) os filhos continuavam
   claros e sumiam. Sem o `*`, o filho herda o cartão — que é o
   comportamento correto e ainda deixa regras específicas
   (.svc p, .svc em) valerem por serem mais específicas. */
.article-card--dark,
.case-card--solid,
.plan:not(.plan--featured),
.svc, .step,
.brand-card__plate { color: var(--tone-ink, var(--paper)); }

/* Dentro de seção clara esses dois viram claros — o texto acompanha */
.section--paper .svc, .section--paper .step { color: var(--ink); }

.article-card--dark { color: var(--paper); }
.article-card--dark .display,
.article-card--dark h3 { color: var(--paper); }
.article-card--dark .article-card__meta { color: #9aa096; }

.article-card--feature { color: var(--ink); }
.article-card--feature .display,
.article-card--feature h3 { color: var(--ink); }
.article-card--feature .article-card__meta,
.article-card--feature span { color: rgba(5, 5, 5, .74); }
.article-card--feature i, .article-card--feature .arw { color: var(--ink); }

/* --- Últimos apoios abaixo do mínimo ---------------------- */
.section--paper .article-card__meta,
.section--paper .card__foot { color: #4f554c; }
.section--paper .eyebrow,
.section--paper .mono-label { color: #35691f; }
.site-footer--dark .footer__legal,
.site-footer--dark .footer__legal span { color: #9aa096; }
.reel__item { color: #9aa096; }
.section--paper .reel__item { color: #4f554c; }

/* ============================================================
   21. Cabeçalho sempre escuro — fim da ambiguidade
   ------------------------------------------------------------
   O cabeçalho é fixo e passa por seções claras e escuras. Com
   fundo transparente, nenhuma cor de texto serve para as duas:
   arrumar numa quebrava na outra (foi o que aconteceu duas
   vezes). Agora ele tem superfície própria e o texto é sempre
   claro. Uma decisão, zero exceção.
   ============================================================ */
.site-header,
.site-header--light,
.site-header--dark {
  background: color-mix(in srgb, var(--ink) 90%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid var(--line-dark);
  color: var(--paper);
}
.site-header .desktop-nav a,
.site-header .nav-trigger,
.site-header--light .desktop-nav a,
.site-header--light .nav-trigger,
.site-header--dark .desktop-nav a,
.site-header--dark .nav-trigger { color: var(--paper); }
.site-header .brand__logo { filter: none; }
.site-header .menu-toggle { color: var(--paper); }

/* --- Últimos apoios: números, setas e metadados ------------ */
/* Todos estavam abaixo do mínimo por herdarem tom de fundo
   escuro em cartão claro (e vice-versa). */
.article-card .article-card__mark,
.article-card > span:first-child { color: #4f554c; }
.article-card--dark .article-card__mark,
.article-card--dark > span:first-child { color: #9aa096; }
.article-card--feature .article-card__mark,
.article-card--feature > span:first-child { color: rgba(5, 5, 5, .68); }

.article-card i, .article-card .arw { color: #4f554c; }
.article-card--dark i, .article-card--dark .arw { color: var(--acid-text); }
.article-card--feature i, .article-card--feature .arw { color: rgba(5, 5, 5, .8); }

.article-card__meta { color: #4f554c; }
.article-card--dark .article-card__meta { color: #9aa096; }
.article-card--feature .article-card__meta { color: rgba(5, 5, 5, .74); }

.section--dark .eyebrow, .section--ink .eyebrow,
.section--carbon .eyebrow, .site-footer--dark .eyebrow { color: var(--acid-text); }
.footer__legal, .footer__legal span, .footer__legal a { color: #9aa096; }

/* --- Estado de hover também troca a cor do texto ----------- */
/* O cartão vira escuro no hover; o título ficava preto sobre
   preto. Todo estado que muda o fundo precisa mudar o texto. */
.article-card:hover, .article-card:focus-visible,
.article-card:hover *, .article-card:focus-visible * { color: var(--paper); }
.article-card:hover .article-card__meta,
.article-card:focus-visible .article-card__meta { color: #9aa096; }
.article-card:hover i, .article-card:hover .arw,
.article-card:focus-visible i, .article-card:focus-visible .arw { color: var(--acid-text); }

/* o cartão em destaque (verde) inverte para claro no hover */
.article-card--feature:hover, .article-card--feature:focus-visible,
.article-card--feature:hover *, .article-card--feature:focus-visible * { color: var(--ink); }

/* o cartão já escuro fica verde no hover — texto preto */
.article-card--dark:hover, .article-card--dark:focus-visible,
.article-card--dark:hover *, .article-card--dark:focus-visible * { color: var(--ink); }
.article-card--dark:hover .article-card__meta { color: rgba(5, 5, 5, .72); }

/* Nome da marca junto do logo, quando o símbolo sozinho não
   identifica o projeto (caso do Casa Kairós). */
.brand-card__plate { gap: 18px; }
.brand-card__nome {
  display: block; margin-top: 4px; text-align: center;
  font-family: var(--display); font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 800; letter-spacing: .02em;
  color: var(--tone-ink, var(--paper));
}


/* ============================================================
   22 · Contraste — a cor do texto vem da superfície
   ------------------------------------------------------------
   Havia um único --muted (#6f7469) atendendo fundo claro E escuro.
   Reprovava nos dois: 3.96 sobre o escuro, 4.17 sobre o claro
   (o mínimo do WCAG AA é 4.5). Sozinho, era a causa de 220 das
   334 falhas medidas nas 26 páginas.

   A correção não troca cor regra a regra: REMAPEIA os tokens em
   cada superfície. Todo `color: var(--muted)` que já existia passa
   a receber o valor certo por herança — nenhuma regra antiga
   precisou ser reescrita, e qualquer seção nova nasce correta.

   Razões medidas (texto normal precisa de 4.5:1):
     escuro   #7c8075 sobre #0e110d = 4.71  ·  #9aa093 = 7.08
              #7cc45c (verde texto) sobre #0e110d = 8.97
     claro    #565a52 sobre #f1efe8 = 6.12  ·  sobre #e5e2d9 = 5.44
              #3b5e2a (verde texto) sobre #f1efe8 = 6.47
     verde    #14200e sobre #5e9e44 = 5.19

   Por que o verde da marca não vira texto sobre fundo claro:
   #5e9e44 sobre #f1efe8 dá 2.83. Como cor de marca ele continua
   intacto em traços, fundos e ícones — só não carrega texto pequeno.
   ============================================================ */

:root {
  /* padrão = superfície ESCURA, porque o body é --ink */
  --muted: #7c8075;
  --muted-light: #9aa093;
  --acid-text: #7cc45c;
}

/* Superfícies claras */
.section--paper,
.site-footer,
.work-card__image,
.article-card--feature:hover,
.article-card--dark:hover,
.section--paper .svc,
.section--paper .reel {
  --muted: #565a52;
  --muted-light: #565a52;
  --acid-text: #3b5e2a;
}

/* Superfícies verdes */
.section--accent,
.article-card--feature,
.plan--featured,
.case-card--solid,
.work-card--green,
.ai-card--active,
.ai-card:hover,
.button--acid,
.header-cta,
.btn--moss {
  --muted: #14200e;
  --muted-light: #14200e;
  --acid-text: #14200e;
}

/* O cabeçalho tem superfície escura própria, não importa a seção sob ele */
.site-header, .site-header--light, .site-header--dark, .site-footer--dark,
[data-bg]:not(.section--accent):not(.section--paper) {
  --muted: #7c8075;
  --muted-light: #9aa093;
  --acid-text: #7cc45c;
}

/* ------------------------------------------------------------
   Selo "No ar" / "Vagas abertas"
   Ele vive dentro do plate, então --tone-ink (pareado com --tone
   no HTML) já é a cor certa. O que faltava era opacidade: .72
   derrubava o contraste. Fica opaco.
   ------------------------------------------------------------ */
.brand-card__status { opacity: 1; }

/* O nome grande do card também segue o tom do plate */
.brand-card__word { color: var(--tone-ink, var(--paper)); }

/* ------------------------------------------------------------
   Superfícies aninhadas
   ------------------------------------------------------------
   Remapear só na seção não bastava: um card escuro dentro de uma
   seção clara continuava herdando os tokens do claro (e o inverso).
   Cada elemento que pinta o próprio fundo precisa reafirmar os
   tokens — é o mesmo princípio, aplicado um nível abaixo.
   ------------------------------------------------------------ */
.svc, .plan, .offer-card, .note-card:not(.note-card--outline), .ai-card, .academy-card,
.article-card--dark, .case-plate, .case-card__image, .crew__member,
.crew__member--ia, .hero__stamp, .hero__image-frame, .capabilities__visual,
.reel, .scroll-tabs__stage, .menu-overlay__body, .button--ink,
.section--carbon, .section--dark, .section--ink, .article-card:hover {
  --muted: #7c8075;
  --muted-light: #9aa093;
  --acid-text: #7cc45c;
}

/* ...e os que viram verde no hover ou no estado ativo */
.ai-card:hover, .ai-card--active, .article-card--dark:hover,
.plan--featured, .case-card--solid, .work-card--green, .svc:hover, .step:hover {
  --muted: #14200e;
  --muted-light: #14200e;
  --acid-text: #14200e;
}

/* ...e os que viram claros */
.article-card--feature:hover, .section--paper .svc:hover {
  --muted: #565a52;
  --muted-light: #565a52;
  --acid-text: #3b5e2a;
}

/* --- Exceções: elementos que invertem de superfície ------------ */

/* .svc é escuro por padrão, mas dentro de seção clara ele vira claro */
.section--paper .svc, .note-card--outline {
  --muted: #565a52;
  --muted-light: #565a52;
  --acid-text: #3b5e2a;
  --orange: #2c4a22;
}

/* --orange (musgo profundo, o acento de detalhe) dá 8.65 sobre o claro
   e apenas 2.05 sobre o escuro. Também precisa seguir a superfície. */
:root { --orange: #7cc45c; }
.section--paper, .site-footer, .work-card__image,
.article-card--feature:hover, .article-card--dark:hover { --orange: #2c4a22; }
.section--accent, .article-card--feature, .plan--featured,
.case-card--solid, .work-card--green, .ai-card--active { --orange: #14200e; }

/* --- Últimas duas regras que trocavam o fundo e esqueciam o texto --- */

/* .svc nasce escuro (color: var(--paper)). Dentro de seção clara a regra
   `.section--paper .svc` trocava só o BACKGROUND para paper — o título
   continuava paper e ficava invisível (razão 1:1). */
.section--paper .svc { color: var(--ink); }

/* .article-card é um card escuro; sem reafirmar os tokens ele herdava os
   do claro quando a seção em volta era clara (seta ↗ a 2.05). */
.article-card--dark {
  --muted: #7c8075;
  --muted-light: #9aa093;
  --acid-text: #7cc45c;
  --orange: #7cc45c;
}

/* --- Plano em destaque: fundo verde manda em tudo que está dentro ---
   Com o cartão finalmente recebendo .plan--featured, dois filhos ainda
   carregavam cor de fundo escuro: o "/mês" (3.55) e o link (2.83).
   Sobre #5e9e44 o preto dá 6.26 — é a única cor segura para texto miúdo. */
.plan--featured small,
.plan--featured .text-link,
.plan--featured .text-link--light,
.plan--featured .text-link span { color: var(--ink); }

/* ============================================================
   23 · Página de case
   ------------------------------------------------------------
   Componentes que só existem nas páginas de projeto. Nenhum usa
   fotografia: o Vitor tirou todas as fotos do site, então prova
   visual aqui é tipografia, paleta real da marca e diagrama.
   Seguem os tokens de superfície do bloco 22 — cor vem do fundo.
   ============================================================ */

/* --- Ficha técnica do topo ------------------------------- */
.caso-ficha {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  margin-top: var(--space-4);
  border: 1px solid var(--line-dark); border-radius: 18px;
  background: var(--line-dark); overflow: hidden;
}
.section--paper .caso-ficha { border-color: var(--line); background: var(--line); }
.caso-ficha > div { padding: 22px 24px; background: var(--ink); }
.section--paper .caso-ficha > div { background: var(--paper); }
.caso-ficha dt {
  margin: 0 0 8px; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.caso-ficha dd { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.35; }

/* --- Links de prova (loja, app, site) -------------------- */
.caso-provas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-3); }
.caso-prova {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border: 1px solid currentColor; border-radius: 999px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; transition: background var(--t-base) var(--ease-premium),
    color var(--t-base) var(--ease-premium), transform var(--t-base) var(--ease-premium);
}
.caso-prova:hover, .caso-prova:focus-visible {
  background: var(--moss-press); border-color: var(--moss-press);
  color: #fff; transform: translateY(-2px);
}

/* --- Paleta real da marca do cliente --------------------- */
.caso-paleta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--space-3); }
.caso-cor { display: grid; gap: 10px; justify-items: start; }
.caso-cor i {
  display: block; width: 84px; height: 84px; border-radius: 16px;
  border: 1px solid var(--line-dark); font-style: normal;
}
.section--paper .caso-cor i { border-color: var(--line); }
.caso-cor span {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

/* --- Diagrama de arquitetura, em CSS --------------------- */
.caso-arq { display: grid; gap: 14px; margin-top: var(--space-3); }
.caso-arq__camada {
  padding: 22px 24px; border: 1px solid var(--line-dark); border-radius: 18px;
}
.section--paper .caso-arq__camada { border-color: var(--line); }
.caso-arq__camada > strong {
  display: block; margin-bottom: 14px; font-family: var(--mono);
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  font-weight: 500;
}
.caso-arq__itens { display: flex; flex-wrap: wrap; gap: 10px; }
.caso-arq__itens span {
  padding: 9px 16px; border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: .82rem; font-weight: 600;
}
.caso-arq__camada--nucleo { border-color: var(--acid); }
.caso-arq__camada--nucleo .caso-arq__itens span {
  background: color-mix(in srgb, var(--acid) 22%, transparent);
}
.caso-arq__seta {
  justify-self: center; font-family: var(--mono); font-size: 1.1rem;
  line-height: 1; color: var(--muted);
}

/* --- Resultado honesto, em duas colunas ------------------ */
.caso-saldo {
  display: grid; gap: 20px; margin-top: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.caso-saldo__col { padding: 30px; border: 1px solid var(--line-dark); border-radius: 20px; }
.section--paper .caso-saldo__col { border-color: var(--line); }
.caso-saldo__col h3 {
  margin: 0 0 18px; font-family: var(--display); font-size: .8rem;
  font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--acid-text);
}
.caso-saldo__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.caso-saldo__col li {
  display: flex; gap: 12px; font-size: .95rem; line-height: 1.5;
}
.caso-saldo__col li::before {
  content: "—"; flex: none; font-family: var(--mono); color: var(--acid-text);
}
.caso-saldo__col--andamento h3 { color: var(--muted); }
.caso-saldo__col--andamento li::before { content: "·"; color: var(--muted); }

/* --- Aviso de honestidade (sem número inventado) --------- */
.caso-nota {
  margin-top: var(--space-3); padding: 24px 26px;
  border-left: 2px solid var(--acid); border-radius: 0 16px 16px 0;
  background: color-mix(in srgb, var(--acid) 8%, transparent);
  font-size: .95rem; line-height: 1.6;
}

@media (max-width: 720px) {
  .caso-cor i { width: 64px; height: 64px; }
  .caso-ficha > div { padding: 18px 20px; }
}

/* --- A seta do botão verde segue o texto do botão ------------
   `.section--accent .button span` cravava a seta em preto. Isso
   funciona no link de texto sobre o verde da SEÇÃO, mas não no
   BOTÃO, que tem fundo próprio (#4a7c3a): preto ali dá 4.11 e
   reprova. E contraria a regra da casa — ícone e rótulo são a
   mesma informação, então usam a mesma cor. O rótulo é branco. */
.section--accent .button--acid span,
.section--accent .button--acid .arw,
.section--accent .btn--moss span,
.section--accent .btn--moss .arw { color: #fff; }

/* A nota usa borda e fundo em verde. Sobre a seção verde isso some —
   ali ela troca para tinta, que é a cor do texto naquela superfície. */
.section--accent .caso-nota {
  border-left-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}

/* --- Entrada para a conta, no cabeçalho ------------------- */
/* Discreto de propósito: quem chega no site é visitante, não aluno.
   O botão verde continua sendo o caminho principal. */
.header-conta {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-light);
  padding: 8px 4px; white-space: nowrap;
  transition: color var(--t-base) var(--ease-premium);
}
.header-conta:hover, .header-conta:focus-visible { color: var(--acid-text); }
@media (max-width: 900px) { .header-conta { display: none; } }

/* --- Aviso de "em breve" da Academy ----------------------- */
/* Fica sobre fundo verde, então herda os tokens da superfície:
   texto e link em musgo profundo, que dá 5.19 de contraste. */
.academy-aviso { max-width: 720px; }
.academy-aviso .display { margin: 14px 0 16px; }
.academy-aviso a { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   24 · Corpo de artigo
   ------------------------------------------------------------
   Texto longo pede regra própria. A medida fica entre 62 e 72
   caracteres, que é onde o olho não se perde ao voltar para a
   linha seguinte, e o subtítulo ganha respiro acima — colado no
   parágrafo ele deixa de separar assunto e vira só negrito.
   ============================================================ */
.artigo-corpo {
  max-width: 68ch;
  margin-inline: auto;
  font-size: 1.06rem;
  line-height: 1.72;
}

.artigo-corpo > *:first-child { margin-top: 0; }

.artigo-corpo .body-copy,
.artigo-corpo p {
  margin: 0 0 1.35em;
  max-width: none;
  color: var(--ink);
}

/* Primeiro parágrafo puxa o leitor para dentro. */
.artigo-corpo > p:first-of-type {
  font-size: 1.22rem;
  line-height: 1.6;
  color: var(--ink);
}

.artigo-corpo h2 {
  margin: 2.4em 0 0.7em;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.16;
  letter-spacing: -.022em;
}

.artigo-corpo h3 {
  margin: 1.9em 0 0.55em;
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.artigo-corpo ul,
.artigo-corpo ol {
  margin: 0 0 1.35em;
  padding-left: 1.25em;
}
.artigo-corpo li { margin-bottom: .6em; }
.artigo-corpo li::marker { color: var(--acid-text); }

.artigo-corpo strong { font-weight: 700; }

.artigo-corpo a {
  color: var(--acid-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

@media (max-width: 720px) {
  .artigo-corpo { font-size: 1rem; }
  .artigo-corpo > p:first-of-type { font-size: 1.1rem; }
}