/* doisn — estilos */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/inter-300.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-400.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-400-italic.woff2') format('woff2'); }
:root {
  --verde-floresta: #294C43;
  --verde-menta: #387465;
  --rosa: #FF90D4;
  --pastel: #FEF8D8;
  --grafite: #2C2B2C;
  --branco: #FFFFFF;

  --verde-noite: #0F221D;      /* derivado do floresta, mais profundo (hero) */
  --floresta-profundo: #203C35;
  --cinza: #F3F5F3;
  --linha: rgba(41, 76, 67, .13);
  --linha-forte: rgba(41, 76, 67, .26);
  --linha-clara: rgba(254, 248, 216, .16);
  --texto: var(--grafite);
  --texto-suave: #55625D;
  --pastel-suave: rgba(254, 248, 216, .78);

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --gutter: 20px;
  --max: 1180px;
  --radius: 4px;
  --section: clamp(56px, 7vw, 96px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { background: var(--branco); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans); font-size: 14.5px; line-height: 1.45;
  color: var(--texto); background: var(--branco);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; border-radius: 2px; }
section[id] { scroll-margin-top: 68px; }
h1, h2, h3 { text-wrap: balance; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.005em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-menta);
}
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--rosa); flex: none; }

.h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.08; font-weight: 600;
  letter-spacing: -.033em; color: var(--verde-floresta);
}
.h2 .serif, .h3 .serif { font-size: 1.1em; line-height: .9; color: var(--verde-menta); }
.h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.12; font-weight: 600;
  letter-spacing: -.028em; color: var(--verde-floresta);
}
.lead { font-size: clamp(.9rem, 1vw, .96rem); line-height: 1.45; color: var(--texto-suave); max-width: 44ch; }

/* ---------- Botões ---------- */
.btn {
  --bg: var(--verde-floresta); --fg: var(--pastel);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 13px 26px;
  background: var(--bg); color: var(--fg); border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.25; text-align: center;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn--dark:hover { --bg: var(--verde-menta); }
.btn--pink { --bg: var(--rosa); --fg: #1E1D1E; box-shadow: 0 10px 26px -12px rgba(255, 144, 212, .7), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.btn--pink:hover { box-shadow: 0 14px 30px -12px rgba(255, 144, 212, .85); }
.btn--pink:hover { --bg: var(--pastel); }
.btn--light { --bg: var(--branco); --fg: var(--verde-noite); box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .45); transition: background-color .45s var(--ease), color .45s var(--ease), transform .3s var(--ease), box-shadow .45s var(--ease); }
.btn--light:hover { --bg: var(--pastel); --fg: var(--verde-noite); box-shadow: 0 16px 32px -14px rgba(254, 248, 216, .35); }
.btn--sm { min-height: 42px; padding: 10px 18px; font-size: 11.5px; }

/* =========================== HEADER =========================== */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.header__logo { display: grid; }
.header__logo img { grid-area: 1 / 1; width: 74px; height: auto; transition: opacity .3s var(--ease); }
.header__logo .logo-verde { opacity: 0; }
.header.is-scrolled { background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--linha); }
.header.is-scrolled .logo-verde, body.menu-open .logo-verde { opacity: 1; }
.header.is-scrolled .logo-claro, body.menu-open .logo-claro { opacity: 0; }

.menu-toggle { width: 44px; height: 44px; display: grid; place-content: center; gap: 7px; position: relative; z-index: 2; }
.menu-toggle span { display: block; width: 22px; height: 1.5px; background: var(--pastel); transition: transform .3s var(--ease), background-color .3s; }
.header.is-scrolled .menu-toggle span, body.menu-open .menu-toggle span { background: var(--verde-floresta); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
.nav {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 90px var(--gutter) 48px; background: var(--branco);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
}
.nav a:not(.btn) { text-transform: uppercase; font-size: 1.15rem; font-weight: 600; letter-spacing: .06em; color: var(--verde-floresta); padding: 12px 0; border-bottom: 1px solid var(--linha); }
.nav .btn { margin-top: 24px; }
.nav.is-open { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }

@media (min-width: 900px) {
  .menu-toggle { display: none; }
  .nav { position: static; flex-direction: row; align-items: center; gap: 30px; padding: 0; background: none; opacity: 1; visibility: visible; }
  .nav a:not(.btn) {
    display: inline-flex; flex-direction: column; align-items: center;
    font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 6px 0; border: 0;
    color: var(--pastel); transition: color .3s, transform .35s var(--ease), font-weight .2s;
  }
  .nav a:not(.btn)::after { content: attr(data-label); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; }
  .nav a:not(.btn):hover { transform: translateY(-3px); font-weight: 700; }
  .header.is-scrolled .nav a:not(.btn) { color: var(--verde-floresta); }
  .nav .btn { margin-top: 0; }
  .nav .btn--dark { --bg: rgba(254, 248, 216, .1); --fg: var(--pastel); box-shadow: inset 0 0 0 1px rgba(254, 248, 216, .28); }
  .header.is-scrolled .nav .btn--dark { --bg: var(--verde-floresta); box-shadow: none; }
  .header__logo img { width: 84px; }
}

/* =========================== HERO =========================== */
.hero { position: relative; overflow: hidden; background: var(--verde-noite); color: var(--pastel); padding-block: 116px 120px; }
.hero::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .05; pointer-events: none; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__inner { position: relative; z-index: 1; display: grid; gap: 26px; }

.hero__title { display: flex; flex-direction: column; gap: 4px; }
.hero__title { --hs: clamp(1.7rem, 4vw, 3.4rem); align-items: flex-start; gap: 0; }
.hero__title .a { font-size: var(--hs); line-height: 1.04; font-weight: 700; letter-spacing: -.042em; color: var(--branco); }
.hero__title .b { font-size: var(--hs); line-height: 1.04; font-weight: 300; letter-spacing: -.04em; color: rgba(255, 255, 255, .5); }
.hero__title .c { font-size: calc(var(--hs) * 1.2); line-height: 1.06; color: var(--pastel); margin-top: .04em; }
@media (min-width: 900px) { .hero__title .c { white-space: nowrap; } }

.hero__side { display: grid; gap: 18px; justify-items: start; }
.hero__sub { font-size: clamp(.9rem, 1.05vw, .98rem); line-height: 1.5; color: rgba(254, 248, 216, .72); max-width: 40ch; }
.hero__sub strong { color: var(--pastel); font-weight: 600; }

@media (min-width: 900px) {
  .hero { padding-block: 168px 176px; }
  .hero__inner { grid-template-columns: auto minmax(0, 340px); justify-content: center; column-gap: 52px; align-items: end; }
  .hero__side { padding-bottom: .55em; font-size: var(--hs); }
  .hero__side > * { font-size: initial; }
  .hero__sub { font-size: .95rem; }
}

/* =========================== PENSAMENTOS =========================== */
.think { background: var(--cinza); }
.think__grid { display: grid; gap: 32px; }
.think__intro { display: flex; flex-direction: column; gap: 18px; }
.think__intro .h2 { max-width: 12ch; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.06; }

.thoughts { display: grid; gap: 12px; }
.thought {
  position: relative; background: var(--branco); border-radius: 14px 14px 14px 3px;
  padding: 15px 17px 16px; display: grid; gap: 7px; align-content: start;
  border: 1px solid var(--linha);
  transition: background-color 1.1s var(--ease), border-color 1.1s var(--ease), transform 1.1s var(--ease), box-shadow 1.1s var(--ease);
}
.thought p, .thought p b, .thought__n, .thought__n::after { transition: color 1.1s var(--ease), background-color 1.1s var(--ease); }
.thought__n { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--verde-menta); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.thought__n::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.thought p { font-size: 13.75px; line-height: 1.42; color: var(--verde-floresta); }
.thought p b { font-weight: 600; }
.thought.is-active { background: var(--verde-floresta); border-color: var(--verde-floresta); transform: translateY(-5px) scale(1.015); box-shadow: 0 14px 28px -20px rgba(15, 34, 29, .55); }
.thought.is-active p, .thought.is-active p b { color: var(--pastel); }
.thought.is-active .thought__n { color: var(--rosa); }
.thought.is-active .thought__n::after { background: var(--linha-clara); }

@media (min-width: 700px) {
  .thoughts { grid-template-columns: 1fr 1fr; }
  .thought:nth-child(5) { grid-column: span 2; }
}
@media (min-width: 1000px) {
  .think__grid { grid-template-columns: 5fr 7fr; gap: 72px; align-items: stretch; }
  .think__intro { justify-content: center; padding-right: 12px; }
  .thoughts { grid-template-columns: repeat(6, 1fr); }
  .thought:nth-child(1), .thought:nth-child(2) { grid-column: span 3; }
  .thought:nth-child(3), .thought:nth-child(4), .thought:nth-child(5) { grid-column: span 2; }
}

/* Fechamento + ponte para o método */
.bridge { margin-top: clamp(40px, 5vw, 60px); background: var(--verde-floresta); color: var(--pastel); position: relative; }
.method::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .06; pointer-events: none; }
.bridge__inner { position: relative; display: grid; gap: 14px; padding-block: 34px; border-bottom: 1px solid var(--linha-clara); }
.bridge__statement { font-size: clamp(1.3rem, 2.3vw, 1.85rem); line-height: 1.16; font-weight: 600; letter-spacing: -.028em; }
.bridge__statement .serif { color: var(--rosa); font-size: 1.12em; }
.bridge__text { font-size: 13.75px; color: var(--pastel-suave); max-width: 46ch; }
@media (min-width: 900px) {
  .bridge__inner { padding-block: 40px; }
}

/* =========================== MÉTODO =========================== */
.method { position: relative; background: var(--verde-floresta); color: var(--pastel); padding-block: 56px 60px; }
.method .container { position: relative; z-index: 1; }
.method { overflow: hidden; }
.method__bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.method__close p span { display: block; }
.method__top { position: relative; z-index: 1; display: grid; gap: 18px; align-items: end; }
.method__title { font-size: clamp(1.9rem, 4vw, 3.3rem); line-height: 1; font-weight: 600; letter-spacing: -.045em; color: var(--pastel); }
.method__title i { font-style: normal; color: var(--rosa); }
.method__grid { position: relative; z-index: 1; display: grid; margin-top: 30px; border-top: 1px solid var(--linha-clara); }
.step { padding-block: 22px; border-bottom: 1px solid var(--linha-clara); display: grid; gap: 8px; align-content: start; }
.step__head { display: flex; align-items: baseline; gap: 12px; }
.step__n { font-size: 12px; font-weight: 500; color: var(--rosa); font-variant-numeric: tabular-nums; }
.step__title { font-size: 1.2rem; font-weight: 600; letter-spacing: -.025em; }
.step p { color: var(--pastel-suave); font-size: 13.5px; line-height: 1.45; max-width: 36ch; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tags li { font-size: 11px; font-weight: 500; padding: 4px 10px; border: 1px solid rgba(254, 248, 216, .24); border-radius: 999px; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.tags li:hover { background: var(--verde-menta); border-color: var(--verde-menta); }
.method__close { position: relative; z-index: 1; margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.method__close p { font-size: 1.05rem; line-height: 1.35; color: var(--pastel-suave); }
.method__close p b { color: var(--pastel); font-weight: 600; }
.method__close .serif { color: var(--rosa); font-size: 1.12em; }

@media (min-width: 900px) {
  .method { padding-block: 72px 68px; }
  .method__grid { grid-template-columns: repeat(3, 1fr); border-top: 0; border-bottom: 1px solid var(--linha-clara); }
  .step { padding: 24px 32px 26px; border: 0; border-left: 1px solid var(--linha-clara); }
  .step:first-child { padding-left: 0; border-left: 0; }
}

/* =========================== PROJETOS =========================== */
.work { background: var(--branco); }
.work__head { display: grid; gap: 16px; margin-bottom: 26px; }
.work__head .h2 span { display: block; }
@media (min-width: 900px) { .work__head .h2 span { white-space: nowrap; } }
.outcomes { display: grid; gap: 16px; padding: 22px 20px; background: var(--cinza); border-radius: var(--radius); margin-bottom: clamp(40px, 5vw, 60px); }
.outcomes__head { display: grid; gap: 4px; }
.outcomes__label { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-floresta); }
.outcomes__hint { font-size: 12.5px; color: var(--texto-suave); line-height: 1.4; }
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 4px; counter-reset: st; }
.steps li { counter-increment: st; display: inline-flex; align-items: center; gap: 4px; }
.steps li:not(:last-child)::after { content: "→"; font-size: 12px; color: var(--rosa); margin: 0 4px 0 6px; opacity: .35; transition: opacity .5s var(--ease); }
.step-pill {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 14px 8px; border-radius: 999px; background: var(--branco);
  border: 1px solid var(--linha); color: var(--texto-suave);
  font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.1;
  opacity: .55; transform: translateY(4px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), background-color .5s var(--ease);
}
.step-pill::before { content: counter(st, decimal-leading-zero); font-family: var(--sans); font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--verde-menta); transition: color .5s var(--ease); }
.steps li.is-lit .step-pill { opacity: 1; transform: none; border-color: var(--linha-forte); color: var(--verde-floresta); }
.steps li.is-lit::after { opacity: 1; }
.steps li.is-lit .step-pill:hover { border-color: var(--verde-floresta); }
.steps li:last-child.is-lit .step-pill { background: var(--verde-floresta); border-color: var(--verde-floresta); color: var(--pastel); box-shadow: 0 10px 22px -14px rgba(15, 34, 29, .6); }
.steps li:last-child.is-lit .step-pill::before { color: var(--rosa); }
@media (min-width: 900px) {
  .work__head { grid-template-columns: auto 1fr; align-items: end; gap: 56px; }
  .outcomes { grid-template-columns: 190px 1fr; align-items: center; gap: 28px; padding: 22px 26px; }
}

.case + .case { margin-top: clamp(48px, 6vw, 76px); }
.case__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.case__n { color: var(--verde-floresta); }
.case__cat { color: var(--verde-menta); display: inline-flex; align-items: center; gap: 10px; }
.case__cat::before { content: ""; width: 20px; height: 1px; background: var(--rosa); }
.case__meta--light .case__n { color: var(--pastel); }
.case__meta--light .case__cat { color: rgba(254, 248, 216, .7); }

.ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 100%; height: 100%; padding: 8px; text-align: center;
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(56, 116, 101, .07) 10px 11px), var(--cinza);
  border: 1px dashed rgba(56, 116, 101, .4);
  color: var(--verde-menta); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
}
.ph small { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 10px; opacity: .8; }

/* ---- Case 01: Performance ---- */
.perf { background: var(--cinza); border-radius: var(--radius); padding: 24px 18px; display: grid; gap: 28px; }
.perf__label { display: block; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-menta); margin-bottom: 8px; }
.perf__hero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; color: var(--verde-floresta); line-height: .9; }
.perf__hero .num { font-size: clamp(4.5rem, 11vw, 7.75rem); font-weight: 600; letter-spacing: -.065em; font-variant-numeric: tabular-nums; }
.perf__hero .serif { font-size: clamp(1.9rem, 3.8vw, 2.9rem); color: var(--verde-menta); }
.perf__context { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.25px; color: var(--texto-suave); }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--verde-floresta); color: var(--pastel); }
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rosa); }

.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 26px; }
.metric { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--radius); padding: 14px 14px 13px; display: flex; flex-direction: column; gap: 3px; }
.metric .k { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--verde-menta); }
.metric .v { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -.03em; color: var(--verde-floresta); font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.metric .d { font-size: 11.5px; color: var(--texto-suave); line-height: 1.35; }
.metric--occ { background: var(--verde-floresta); border-color: var(--verde-floresta); }
.metric--occ .k { color: var(--rosa); }
.metric--occ .v { color: var(--pastel); }
.metric--occ .d { color: rgba(254, 248, 216, .75); }
.occ-bar { height: 3px; background: rgba(254, 248, 216, .2); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.occ-bar i { display: block; height: 100%; width: 100%; background: var(--rosa); }

.perf__proof { display: flex; flex-direction: column; }
.perf__frame { flex: 1; min-height: 280px; aspect-ratio: 4 / 5; max-width: 100%; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--radius); padding: 10px; }
.perf__frame .ph { background-color: var(--branco); }
@media (min-width: 700px) { .metrics { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) {
  .perf { grid-template-columns: 2fr 1fr; gap: 40px; padding: 38px; }
  .perf__frame { aspect-ratio: auto; }
}

/* ---- Case 02: Conteúdo + direção visual ---- */
.case--feed { position: relative; background: var(--verde-floresta); color: var(--pastel); border-radius: var(--radius); overflow: hidden; padding: 30px 18px 0; }
.case--feed::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .06; pointer-events: none; }
.feed { position: relative; display: grid; gap: 30px; }
.case--feed .h3 { color: var(--pastel); margin-bottom: 12px; }
.case--feed .h3 .serif { color: var(--rosa); }
.feed__text > p { color: var(--pastel-suave); max-width: 40ch; font-size: 13.75px; }
.feed__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 20px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.feed__links span { padding: 5px 10px; border: 1px solid rgba(254, 248, 216, .26); border-radius: 999px; }
.feed__links i { font-style: normal; color: var(--rosa); }
.feed__formats { display: flex; gap: 16px; margin-top: 18px; font-size: 12px; color: rgba(254, 248, 216, .65); }

.feed__visual { display: flex; justify-content: center; align-items: flex-end; gap: 14px; }
.phone { width: min(270px, 78%); background: var(--grafite); border-radius: 32px 32px 0 0; padding: 9px 9px 0; }
.phone__screen { background: var(--branco); border-radius: 24px 24px 0 0; padding: 18px 8px 0; }
.ig-top { display: flex; align-items: center; gap: 10px; padding: 2px 5px 14px; }
.ig-top .ph { width: 46px; height: 46px; border-radius: 50%; padding: 0; font-size: 7px; flex: none; }
.ig-lines { flex: 1; display: grid; gap: 6px; }
.ig-lines span { height: 6px; border-radius: 4px; background: #ECEEEC; }
.ig-lines span:nth-child(1) { width: 60%; background: var(--linha-forte); }
.ig-lines span:nth-child(3) { width: 80%; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.ig-grid .ph { aspect-ratio: 4 / 5; height: auto; padding: 4px; font-size: 7px; }
.story { display: none; width: 132px; aspect-ratio: 9 / 16; background: var(--grafite); border-radius: 16px; padding: 5px; margin-bottom: 40px; }
.story .ph { border-radius: 12px; background-color: var(--branco); font-size: 8px; }
@media (min-width: 560px) { .story { display: block; } }
@media (min-width: 900px) {
  .case--feed { padding: 48px 52px 0; }
  .feed { grid-template-columns: 1fr 1.1fr; align-items: center; gap: 48px; }
  .feed__text { padding-bottom: 48px; }
  .phone { width: 290px; }
}

/* ---- Case 03: Página de vendas ---- */
.lp { display: grid; gap: 26px; }
.lp__text { display: grid; gap: 12px; align-content: start; }
.lp__text > p { color: var(--texto-suave); max-width: 38ch; font-size: 13.75px; }
.lp__points { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lp__points li { font-size: 11.5px; font-weight: 500; color: var(--verde-floresta); padding: 5px 11px; border: 1px solid var(--linha-forte); border-radius: 999px; }
.lp__points li:last-child { background: var(--verde-floresta); color: var(--pastel); border-color: var(--verde-floresta); }
.devices { position: relative; background: var(--verde-menta); border-radius: var(--radius); padding: 28px 18px 34px; overflow: hidden; }
.devices::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(254,248,216,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(254,248,216,.07) 1px, transparent 1px); background-size: 36px 36px; }
.laptop { position: relative; width: 86%; }
.laptop__screen { background: var(--grafite); border-radius: 9px 9px 0 0; padding: 3% 3% 2.2%; }
.laptop__screen .ph { aspect-ratio: 16 / 10; height: auto; border-radius: 2px; background-color: var(--branco); }
.laptop__base { height: 10px; width: 112%; margin-left: -6%; background: #DCE0DD; border-radius: 0 0 9px 9px; position: relative; }
.laptop__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 4px; transform: translateX(-50%); background: #C6CBC7; border-radius: 0 0 5px 5px; }
.mini-phone { position: absolute; right: 14px; bottom: 18px; width: 25%; max-width: 128px; background: var(--grafite); border-radius: 15px; padding: 4px; }
.mini-phone .ph { aspect-ratio: 9 / 19; height: auto; border-radius: 11px; background-color: var(--branco); padding: 4px; font-size: 7px; }
@media (min-width: 1000px) {
  .lp { grid-template-columns: 1fr 1.8fr; gap: 56px; align-items: center; }
  .devices { padding: 44px 40px 48px; }
  .mini-phone { right: 36px; bottom: 30px; }
}

/* ---- Case 04: Posicionamento ---- */
.case--pos { border-top: 1px solid var(--linha-forte); padding-top: 30px; }
.pos__head { display: grid; gap: 12px; margin-bottom: 22px; }
.pos__head .h3 { max-width: 22ch; }
.pos__values { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--texto-suave); }
.pos__values li { display: inline-flex; align-items: center; gap: 7px; }
.pos__values li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rosa); }
.pos__grid { display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.pos__item { background: var(--branco); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.pos__label { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--verde-floresta); }
.pos__desc { font-size: 12px; color: var(--texto-suave); line-height: 1.45; }
.bio { display: flex; gap: 11px; align-items: flex-start; padding: 12px; background: var(--cinza); border-radius: var(--radius); }
.bio__avatar { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--verde-menta); flex: none; background: var(--branco); }
.bio__lines { display: grid; gap: 2px; font-size: 11.5px; line-height: 1.4; color: var(--verde-floresta); }
.bio__lines b { font-weight: 600; }
.bio__lines span { color: var(--texto-suave); }
.bio__lines em { font-style: normal; color: var(--verde-menta); font-weight: 600; }
.hl { display: flex; gap: 10px; flex-wrap: wrap; }
.hl li { display: grid; justify-items: center; gap: 5px; font-size: 9.5px; color: var(--texto-suave); }
.hl i { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linha-forte); display: grid; place-items: center; background: var(--cinza); }
.hl i::after { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--verde-menta); }
.hl li:nth-child(2) i::after { border-radius: 2px; }
.hl li:nth-child(3) i::after { width: 15px; height: 1.5px; border: 0; background: var(--verde-menta); }
.hl li:nth-child(4) i::after { border-color: var(--rosa); }
.mini-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.mini-feed .ph { aspect-ratio: 1; height: auto; font-size: 7px; padding: 2px; }
.editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.editorial li { border: 1px solid var(--linha); border-radius: var(--radius); padding: 9px 11px; font-size: 12.5px; color: var(--verde-floresta); display: grid; gap: 1px; }
.editorial li span { font-size: 10px; font-weight: 600; color: var(--verde-menta); letter-spacing: .08em; }
.id-mini { display: flex; gap: 12px; align-items: center; }
.id-mini .ph { width: 64px; height: 64px; flex: none; font-size: 7.5px; }
.swatches { display: flex; gap: 5px; }
.swatches i { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--linha); }
@media (min-width: 700px) { .pos__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .pos__head { grid-template-columns: 1.4fr 1fr; align-items: end; gap: 56px; }
  .pos__grid { grid-template-columns: repeat(12, 1fr); }
  .pos__item { padding: 20px; }
  .pos__item--bio, .pos__item--hl, .pos__item--visual { grid-column: span 4; }
  .pos__item--editorial { grid-column: span 9; }
  .pos__item--id { grid-column: span 3; }
  .editorial { grid-template-columns: repeat(4, 1fr); }
}

/* =========================== DEPOIMENTOS =========================== */
.voices { background: var(--cinza); padding-block: clamp(48px, 6vw, 72px); }
.voices__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.voices__head .h2 { font-size: clamp(1.45rem, 2.5vw, 2.05rem); max-width: 22ch; }
.carousel__nav { display: flex; gap: 8px; flex: none; }
.carousel__btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linha-forte); display: grid; place-items: center; color: var(--verde-floresta); font-size: 15px; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.carousel__btn:hover { background: var(--verde-floresta); color: var(--pastel); border-color: var(--verde-floresta); }
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 8px 2px 10px; align-items: start; }
.carousel__track::-webkit-scrollbar { display: none; }
.quote {
  scroll-snap-align: start; position: relative;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 12px;
  opacity: .72; transform: scale(.985);
  transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .7s var(--ease), box-shadow .7s var(--ease);
}
.quote.is-active { opacity: 1; transform: translateY(-4px); border-color: var(--linha-forte); box-shadow: 0 18px 36px -24px rgba(15, 34, 29, .45); }
.quote.is-active .quote__mark { background: var(--rosa); color: var(--grafite); }
.quote__who { display: flex; align-items: center; gap: 11px; }
.quote__photo { width: 42px; height: 42px; border-radius: 50%; flex: none; overflow: hidden; display: grid; place-items: center; background: var(--cinza); border: 1px dashed rgba(56, 116, 101, .45); color: var(--verde-menta); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.quote__photo img { width: 100%; height: 100%; object-fit: cover; }
.quote__id { display: grid; line-height: 1.25; min-width: 0; }
.quote__id strong { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--verde-floresta); }
.quote__id span { font-size: 12px; color: var(--texto-suave); }
.quote__mark { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cinza); color: var(--rosa); font-family: var(--serif); font-size: 24px; line-height: 1; padding-top: 8px; transition: background-color .7s var(--ease), color .7s var(--ease); flex: none; }
.quote__hl { font-size: clamp(1.02rem, 1.4vw, 1.14rem); line-height: 1.32; font-weight: 600; letter-spacing: -.018em; color: var(--verde-floresta); }
.quote__body { font-size: 13px; line-height: 1.5; color: var(--texto-suave); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.quote.is-open .quote__body { -webkit-line-clamp: unset; display: block; }
.quote__more { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--verde-menta); padding: 4px 0; border-bottom: 1px solid currentColor; }
.quote__more:hover { color: var(--verde-floresta); }
.carousel__dots { display: flex; gap: 6px; margin-top: 16px; }
.carousel__dots button { width: 20px; height: 3px; padding: 0; background: var(--linha-forte); border-radius: 2px; transition: background-color .3s, width .3s var(--ease); }
.carousel__dots button[aria-current="true"] { background: var(--verde-floresta); width: 34px; }
@media (min-width: 700px) { .carousel__track { grid-auto-columns: calc((100% - 10px) / 2); } }
@media (min-width: 1000px) { .carousel__track { grid-auto-columns: calc((100% - 20px) / 2.35); gap: 14px; } }

/* =========================== SOBRE =========================== */
.about { background: var(--branco); }
.about__grid { display: grid; gap: 28px; }
.about__photo { position: relative; aspect-ratio: 4 / 5; width: 100%; max-width: min(100%, 380px); border-radius: var(--radius); overflow: hidden; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.about__photo::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36%; height: 4px; background: var(--verde-floresta); }
.about__text { display: flex; flex-direction: column; }
.about__text .h2 { margin-bottom: 22px; }
.about__text .h2 span { display: block; }
.about__intro { font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.42; color: var(--verde-floresta); letter-spacing: -.012em; padding-bottom: 20px; border-bottom: 1px solid var(--linha); }
.about__intro b { font-weight: 700; }
.about__bio { margin-top: 18px; font-size: 13.75px; line-height: 1.5; color: var(--texto-suave); }
.about__bio strong { color: var(--verde-floresta); font-weight: 600; }
.about__way { margin-top: 20px; display: grid; gap: 12px; padding: 20px 22px; background: var(--cinza); border-radius: var(--radius); }
.about__way-title { font-size: clamp(1.25rem, 1.9vw, 1.55rem); line-height: 1.15; font-weight: 600; letter-spacing: -.03em; color: var(--verde-floresta); display: flex; align-items: baseline; gap: 10px; text-wrap: balance; }
.about__way-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rosa); flex: none; transform: translateY(-.2em); }
.about__way-title .serif { color: var(--verde-menta); font-size: 1.12em; }
.about__way p:not(.about__way-title) { font-size: 13.5px; line-height: 1.5; color: var(--texto-suave); }
.about__quote { margin-top: 20px; padding: 4px 0 4px 18px; border-left: 2px solid var(--rosa); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.4; font-weight: 600; letter-spacing: -.015em; color: var(--verde-floresta); }
.about__sign { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--linha); display: grid; gap: 2px; }
.about__sign .serif { font-size: 1.55rem; color: var(--verde-floresta); line-height: 1.05; }
.about__sign span { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-menta); font-weight: 600; }
@media (min-width: 700px) {
  .about__way { grid-template-columns: 220px 1fr; column-gap: 28px; align-items: center; padding: 22px 26px; }
  .about__way-title { font-size: 1.45rem; }
}
@media (min-width: 900px) {
  .about__grid { grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
  .about__photo { justify-self: stretch; }
  .about__photo { max-width: 480px; }
  .about__grid { justify-items: stretch; }
}

/* =========================== CTA FINAL (card) =========================== */
.final { background: var(--cinza); padding-block: clamp(48px, 6vw, 80px); }
.final__card {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: 1080px; margin-inline: auto;
  background: var(--verde-floresta); color: var(--pastel);
  border-radius: 24px; padding: 38px 24px 34px;
  display: grid; gap: 26px; justify-items: start; text-align: left;
  box-shadow: 0 28px 60px -30px rgba(15, 34, 29, .55), 0 2px 0 rgba(255, 255, 255, .04) inset;
  animation: floaty 6s ease-in-out infinite;
}
.final__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .07; }
.final__card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(254,248,216,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(254,248,216,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 30%, #000 85%); mask-image: radial-gradient(circle at 50% 50%, transparent 30%, #000 85%);
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); box-shadow: 0 28px 60px -30px rgba(15, 34, 29, .55); }
  50% { transform: translateY(-7px); box-shadow: 0 38px 70px -32px rgba(15, 34, 29, .45); }
}
.final__dot { position: absolute; top: 20px; right: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--rosa); box-shadow: 0 0 0 5px rgba(255, 144, 212, .15); }
.final__title { --hs: clamp(1.45rem, 2.7vw, 2.15rem); display: flex; flex-direction: column; align-items: flex-start; }
.final__title .a { font-size: var(--hs); line-height: 1.06; font-weight: 700; letter-spacing: -.04em; color: var(--branco); position: relative; z-index: 0; }
.final__title .b { font-size: var(--hs); line-height: 1.06; font-weight: 300; letter-spacing: -.04em; color: rgba(255, 255, 255, .5); }
.final__title .c { font-size: calc(var(--hs) * 1.2); line-height: 1.1; color: var(--pastel); margin-top: .04em; }
.final__title b { font-weight: 700; color: var(--branco); }
.final__title .hl-moment { position: relative; white-space: nowrap; }
.final__title .hl-moment::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: .06em; height: .32em; background: rgba(255, 144, 212, .22); border-radius: 3px; z-index: -1; }
.final__now { position: relative; display: inline-block; line-height: .9; color: var(--pastel); padding-right: .05em; font-size: 1.14em; }
.scribble { position: absolute; left: -4%; bottom: -.2em; width: 108%; height: .42em; overflow: visible; pointer-events: none; }
.scribble path { fill: none; stroke: var(--rosa); stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 0; }
.final.is-armed .scribble path { stroke-dashoffset: 260; }
.final.is-armed.is-drawn .scribble path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease) .35s; }
.final__spark { position: absolute; right: -16px; top: 4px; width: 16px; height: 16px; overflow: visible; }
.final__spark path { fill: none; stroke: var(--rosa); stroke-width: 2; stroke-linecap: round; }

.final__btn { min-height: 58px; padding: 15px 32px; font-size: 13px; gap: 12px; position: relative; animation: hop 3.2s var(--ease) infinite; }
.final__btn svg { width: 18px; height: 18px; }
.final__btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: ping 3.2s var(--ease) infinite; pointer-events: none; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } }
@keyframes hop { 0%, 70%, 100% { transform: translateY(0); } 78% { transform: translateY(-5px); } 86% { transform: translateY(0); } 92% { transform: translateY(-2px); } }
.final__btn:hover { animation-play-state: paused; transform: translateY(-3px) scale(1.04); }
@media (max-width: 559px) { .final__btn { width: 100%; } .final__title .hl-moment { white-space: normal; } }
@media (min-width: 800px) { .final__card { padding: 52px 56px 50px; grid-template-columns: 1fr auto; align-items: end; column-gap: 40px; } .final__btn { margin-bottom: .35em; } .final__title span { white-space: nowrap; } }
@media (prefers-reduced-motion: reduce) { .final__card, .final__btn, .final__btn::after { animation: none; } }

/* =========================== FOOTER =========================== */
.footer { background: var(--floresta-profundo); color: var(--pastel); padding-block: 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; font-size: 12px; }
.footer__inner img { width: 62px; height: auto; }
.footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; color: rgba(254, 248, 216, .62); }
.footer__meta a { color: var(--pastel); transition: color .25s; }
.footer__meta a:hover { color: var(--rosa); }

/* =========================== WHATSAPP FLUTUANTE =========================== */
.wa-float {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--verde-floresta); color: var(--pastel);
  box-shadow: 0 8px 22px -12px rgba(23, 46, 40, .7); border: 1px solid rgba(254, 248, 216, .18);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease), background-color .3s;
}
.wa-float svg { width: 21px; height: 21px; fill: currentColor; }
.wa-float::after { content: ""; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--rosa); border: 2px solid var(--verde-floresta); }
.wa-float.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-float:hover { background: var(--verde-menta); }

/* =========================== ANIMAÇÕES =========================== */
.reveal.pre { opacity: 0; transform: translateY(28px) scale(.985); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal.pre.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal.pre { opacity: 1; transform: none; }
  .carousel__track { scroll-behavior: auto; }
}

/* =====================================================================
   REFINAMENTO GERAL (versão consolidada)
   ===================================================================== */
:root { --r: 28px; --r-sm: 18px; --off: #F7F8F5; --cinza: #F0F3F0; --amarelo: #FFF6CC; }
body { background: var(--off); }
.work, .about { background: var(--off); }
.serif { line-height: .98; }
.h2 .serif, .h3 .serif { line-height: .95; }
[data-par] { translate: 0 var(--py, 0px); will-change: translate; }

/* Hero */
.hero__side { gap: 30px; }
.hero__side .btn { min-height: 56px; padding: 15px 30px; font-size: 13px; }
.hero__side .btn svg { width: 19px; height: 19px; }

/* Pensamentos */
.think__intro { align-items: flex-start; justify-content: center; }
.think__intro .h2 { max-width: none; font-size: clamp(1.55rem, 2.45vw, 2.15rem); line-height: 1.12; }
.think__intro .h2 span { display: block; }
.thought { border-radius: var(--r) var(--r) var(--r) 8px; padding: 18px 20px 19px; }
.thought.is-active { transform: translateY(-5px) scale(1.015); }
.thought.is-active.v-p { background: var(--rosa); border-color: var(--rosa); }
.thought.is-active.v-p p, .thought.is-active.v-p p b { color: var(--grafite); }
.thought.is-active.v-p .thought__n { color: var(--verde-noite); }
.thought.is-active.v-p .thought__n::after { background: rgba(44, 43, 44, .18); }
.thought.is-active.v-y { background: var(--amarelo); border-color: #F3E7A8; }
.thought.is-active.v-y p, .thought.is-active.v-y p b { color: var(--verde-floresta); }
.thought.is-active.v-y .thought__n { color: #C4579A; }
.thought.is-active.v-y .thought__n::after { background: rgba(41, 76, 67, .18); }
@media (min-width: 1000px) {
  .think__grid { grid-template-columns: 1.05fr 1.2fr; gap: 56px; align-items: center; }
  .think__intro .h2 span { white-space: nowrap; }
}

/* Método */
.method::before { opacity: .05; }
.method__top { justify-items: center; text-align: center; }
.method__grid { border: 0 !important; gap: 14px; margin-top: 34px; }
.method .step {
  border: 1px solid rgba(254, 248, 216, .12) !important; border-radius: var(--r);
  background: rgba(254, 248, 216, .045); padding: 24px 24px 22px !important;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: background-color .5s var(--ease), transform .5s var(--ease), border-color .5s var(--ease);
}
.method .step:hover { background: rgba(254, 248, 216, .08); transform: translateY(-4px); border-color: rgba(254, 248, 216, .22) !important; }
.method__close { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 20px; margin-top: 36px; }
.method__close p { font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
@media (min-width: 900px) { .method__grid { grid-template-columns: repeat(3, 1fr); } }

/* Projetos intro */
.work__head { display: grid !important; grid-template-columns: 1fr !important; justify-items: center; text-align: center; gap: 12px !important; margin-bottom: 30px; }
.work__head .h2 { max-width: none; }
.work__head .h2 span { display: block; }
.work__head .lead { max-width: 52ch; }
@media (min-width: 900px) { .work__head .h2 span { white-space: nowrap; } }
.outcomes { max-width: 1040px; margin-inline: auto; border-radius: var(--r); background: var(--branco); border: 1px solid var(--linha); padding: 22px 24px; }
@media (min-width: 900px) { .outcomes { grid-template-columns: 180px 1fr; padding: 24px 30px; } }
.step-pill { opacity: 1; transform: none; border-color: var(--linha); color: var(--verde-floresta); background: var(--off); }
.steps li::after { opacity: .6 !important; }
.steps li.is-now .step-pill { background: var(--amarelo); border-color: #EFDF95; transform: translateY(-3px); box-shadow: 0 8px 18px -12px rgba(41, 76, 67, .4); }
.steps li.is-now .step-pill::before { color: #C4579A; }
.steps li:last-child.is-now .step-pill { background: var(--verde-floresta); border-color: var(--verde-floresta); color: var(--pastel); box-shadow: 0 10px 22px -12px rgba(15, 34, 29, .6), 0 0 0 3px rgba(255, 144, 212, .35); }
.steps li:last-child.is-now .step-pill::before { color: var(--rosa); }

/* Cases: arredondamento consistente */
.perf, .pos__grid, .quote, .final__card, .about__way, .perf__frame { border-radius: var(--r); }
.perf { background: var(--branco); border: 1px solid var(--linha); }
.metric { border-radius: var(--r-sm); background: var(--off); }
.perf__frame { border-radius: var(--r-sm); background: var(--off); }
.perf__frame .ph { border-radius: 12px; background-color: var(--branco); }
.pos__grid { overflow: hidden; }
.case--pos { border-top: 0; padding-top: 0; }
.pos__item { padding: 18px 20px; }
.mini-feed { grid-template-columns: repeat(3, 1fr); }
.mini-feed .ph, .id-mini .ph { border-radius: 10px; }
.swatches i { width: 18px; height: 18px; }
@media (min-width: 1000px) {
  .pos__item--editorial { grid-column: span 8; }
  .pos__item--id { grid-column: span 4; }
}

/* Case 03 — mockups realistas */
.stage { position: relative; border-radius: var(--r); padding: 40px 20px 46px; background: radial-gradient(120% 90% at 50% 10%, #FFFFFF 0%, #EEF0EC 70%, #E6E9E4 100%); border: 1px solid var(--linha); overflow: hidden; }
.mac { position: relative; width: 84%; margin-inline: auto 12%; filter: drop-shadow(0 30px 30px rgba(15, 34, 29, .18)); }
.mac__lid { position: relative; background: linear-gradient(180deg, #2A2B2D, #151617); border-radius: 14px 14px 4px 4px; padding: 2.6% 2.6% 3.2%; box-shadow: inset 0 0 0 1.5px #3b3c3f, inset 0 0 0 3px #0c0c0d; }
.mac__cam { position: absolute; top: 1.1%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #2f3136; box-shadow: inset 0 0 0 1px #45484e; }
.mac__screen { aspect-ratio: 16 / 10; border-radius: 3px; overflow: hidden; background: var(--branco); }
.mac__base { position: relative; height: 13px; width: 116%; margin-left: -8%; border-radius: 2px 2px 14px 14px / 2px 2px 10px 10px; background: linear-gradient(180deg, #E4E6E8 0%, #C9CCD0 55%, #A9ADB2 100%); box-shadow: 0 1px 0 #fff inset; }
.mac__base span { position: absolute; left: 50%; top: 0; width: 15%; height: 5px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #B8BBC0, #D3D6DA); }
.iphone { position: absolute; right: 6%; bottom: 26px; width: 22%; max-width: 150px; aspect-ratio: 9 / 19.3; border-radius: 26px; padding: 6px; background: linear-gradient(145deg, #3a3b3e, #111214 60%, #2b2c2f); box-shadow: 0 24px 40px -18px rgba(15, 34, 29, .45), inset 0 0 0 1.5px #55575c; }
.iphone__island { position: absolute; top: 12px; left: 50%; width: 30%; height: 11px; transform: translateX(-50%); border-radius: 10px; background: #050505; z-index: 2; }
.iphone__screen { width: 100%; height: 100%; border-radius: 21px; overflow: hidden; background: var(--branco); }
/* tela simulada da página de vendas */
.sp { width: 100%; height: 100%; background: var(--branco); display: flex; flex-direction: column; }
.sp__nav { display: flex; align-items: center; gap: 6%; padding: 3% 5%; border-bottom: 1px solid #EEF0EC; }
.sp__nav i { width: 12%; height: 6px; border-radius: 3px; background: var(--verde-floresta); }
.sp__nav span { width: 8%; height: 4px; border-radius: 2px; background: #DADFDA; }
.sp__nav b { margin-left: auto; width: 13%; height: 12px; border-radius: 99px; background: var(--rosa); }
.sp__hero { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 6%; align-items: center; padding: 5% 5% 3%; background: linear-gradient(180deg, #0F221D, #1d3a32); }
.sp em { display: block; height: 9px; border-radius: 4px; background: #FFFFFF; margin-bottom: 6%; width: 90%; }
.sp em.s { width: 60%; background: var(--pastel); opacity: .9; }
.sp u { display: block; width: 42%; height: 14px; border-radius: 99px; background: var(--rosa); margin-top: 8%; }
.sp__img { border-radius: 8px; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #387465, #294C43); box-shadow: inset 0 0 0 1px rgba(254, 248, 216, .15); }
.sp__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; padding: 4% 5%; }
.sp__row span { height: 26px; border-radius: 6px; background: #F0F3F0; }
.sp--mob { padding: 26px 8% 8%; gap: 6px; background: linear-gradient(180deg, #0F221D 0 58%, #fff 58%); }
.sp--mob .sp__nav { border: 0; padding: 0 0 6px; }
.sp--mob .sp__nav i { width: 30%; background: var(--pastel); }
.sp--mob .sp__nav b { width: 26%; height: 9px; }
.sp--mob .sp__img { aspect-ratio: 4 / 3; margin-bottom: 4px; }
.sp--mob em { height: 6px; margin-bottom: 3px; }
.sp--mob u { height: 11px; width: 60%; margin-top: 4px; }
.sp--mob .sp__row { grid-template-columns: 1fr 1fr; padding: 10px 0 0; }
.sp--mob .sp__row span { height: 34px; }
@media (min-width: 1000px) { .stage { padding: 54px 40px 60px; } }
@media (max-width: 559px) { .sp em { height: 5px; } .sp u { height: 8px; } .sp__row span { height: 14px; } .sp__nav b { height: 8px; } }

/* Depoimentos */
.voices__head .h2 { max-width: none; }
.quote__photo { background: var(--amarelo); border: 0; color: var(--verde-floresta); }
.quote__body { -webkit-line-clamp: 4; }

/* Sobre */
.about__text .h2 { font-size: clamp(1.55rem, 2.55vw, 2.2rem); line-height: 1.1; }
.about__text .h2 span { display: block; }
@media (min-width: 900px) { .about__text .h2 span { white-space: nowrap; } }
.about__photo { border-radius: var(--r); }
.about__photo::after { display: none; }

/* CTA final: frase e botão juntos, no centro */
@media (min-width: 800px) {
  .final__card { grid-template-columns: auto auto !important; justify-content: center; column-gap: 56px !important; align-items: center !important; }
  .final__btn { margin-bottom: 0 !important; }
}
.final__card { border-radius: var(--r); }

/* Footer */
.footer__inner { align-items: center; }
.footer__motto { font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--pastel); display: flex; align-items: baseline; gap: 4px; }
.footer__motto .serif { color: var(--rosa); font-size: 1.15em; }
@media (min-width: 900px) { .footer__inner { display: grid; grid-template-columns: auto auto 1fr; gap: 28px; } .footer__meta { justify-content: flex-end; } }

.metric.metric--occ { background: var(--verde-floresta); border-color: var(--verde-floresta); }
@media (max-width: 999px) { .perf__frame { aspect-ratio: 4 / 3; min-height: 0; } }
@media (prefers-reduced-motion: reduce) { [data-par] { translate: none !important; } }

/* =====================================================================
   REFINAMENTO v17
   ===================================================================== */
/* tipografia secundária um pouco menor */
body { font-size: 14px; }
.thought p { font-size: 13.5px; }
.step p, .method .step p { font-size: 13.25px; }
.pos__desc { font-size: 11.75px; }
.quote__body { font-size: 12.75px; }
.about__bio, .about__way p:not(.about__way-title) { font-size: 13.25px; }
.serif { line-height: .95; }

/* botões: mais contraste e cara de clicável */
.btn { box-shadow: 0 10px 24px -14px rgba(15, 34, 29, .55); }
.btn--pink { --bg: #FF8ACF; --fg: #1A1A1A; box-shadow: 0 14px 30px -12px rgba(255, 138, 207, .75), inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .08); }
.btn--pink:hover { --bg: var(--branco); --fg: var(--verde-noite); box-shadow: 0 16px 34px -12px rgba(255, 255, 255, .35); }
.btn--light:hover { --bg: var(--amarelo); }
.btn:active { transform: translateY(0) scale(.98); }
.nav .btn--dark { font-weight: 700; }
@media (min-width: 900px) {
  .nav .btn--dark { --bg: var(--rosa); --fg: #1A1A1A; box-shadow: 0 8px 20px -10px rgba(255, 138, 207, .7); }
  .nav .btn--dark:hover { --bg: var(--branco); --fg: var(--verde-noite); }
  .header.is-scrolled .nav .btn--dark { --bg: var(--verde-floresta); --fg: var(--pastel); box-shadow: 0 8px 18px -10px rgba(15, 34, 29, .5); }
  .header.is-scrolled .nav .btn--dark:hover { --bg: var(--verde-menta); }
}

/* Hero: colunas alinhadas pelo topo e mais próximas */
@media (min-width: 900px) {
  .hero__inner { align-items: start; column-gap: 44px; grid-template-columns: auto minmax(0, 340px); }
  .hero__side { padding-top: .55em; padding-bottom: 0; }
}
.hero__side { gap: 34px; }
.hero__title .a { font-weight: 700; }
.hero__title .b { font-weight: 300; color: rgba(255, 255, 255, .55); letter-spacing: -.035em; }

/* Pensamentos: título ocupa melhor o espaço */
.think__intro .h2 { font-size: clamp(1.7rem, 3.05vw, 2.6rem); line-height: 1.08; }
.hl-trav { position: relative; z-index: 0; color: var(--verde-menta); }
.hl-trav::after { content: ""; position: absolute; left: -3%; right: -3%; bottom: .08em; height: .34em; background: rgba(255, 144, 212, .28); border-radius: 4px; z-index: -1; }
@media (min-width: 1000px) { .think__grid { grid-template-columns: 1.15fr 1.2fr; gap: 48px; } .thoughts { grid-template-columns: 1fr 1fr !important; } .thought:nth-child(n) { grid-column: auto !important; } .thought:nth-child(5) { grid-column: span 2 !important; } }

/* Projetos: bloco "Resultado também é" centralizado */
.work__head { margin-bottom: 26px; }
.outcomes { grid-template-columns: 1fr !important; justify-items: center; text-align: center; gap: 16px; padding: 28px 24px 30px; }
.outcomes__head { justify-items: center; gap: 6px; }
.outcomes__label { font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: .14em; }
.outcomes__hint { font-size: 13px; }
.steps { justify-content: center; }

/* Case página de vendas: prints reais */
.lp__client { font-size: 12px; font-weight: 600; color: var(--verde-menta); letter-spacing: .02em; }
.mac__screen { aspect-ratio: 16 / 9.4; }
.mac__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.iphone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Depoimentos: 3 por vez no desktop, 1 no mobile */
.carousel__track { grid-auto-columns: 88%; }
@media (min-width: 700px) { .carousel__track { grid-auto-columns: calc((100% - 14px) / 2); } }
@media (min-width: 1000px) { .carousel__track { grid-auto-columns: calc((100% - 28px) / 3) !important; gap: 14px; } }
.voices { padding-block: clamp(44px, 5.5vw, 68px); }

/* CTA final: fonte menor e uniforme */
.final__title { --hs: clamp(1.25rem, 2.2vw, 1.8rem); }
.final__btn { min-height: 56px; }

/* Rodapé mais baixo */
.footer { padding-block: 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
.footer__inner { font-size: 11.5px; }
.footer__motto { font-size: 12px; }
.footer__inner img { width: 56px; }

/* ===================== v18 ===================== */
/* Hero: topos alinhados */
@media (min-width: 900px) {
  .hero__inner { align-items: start; }
  .hero__side { padding-top: .3em; }
  .hero__side { gap: 38px; }
}

/* Pensamentos: título maior */
.think__intro .h2 { font-size: clamp(1.85rem, 3.5vw, 3.05rem); line-height: 1.06; letter-spacing: -.038em; }
@media (min-width: 1000px) { .think__grid { grid-template-columns: 1.3fr 1fr; gap: 44px; } }

/* Método: fecho em faixa horizontal */
.method__close { flex-direction: row !important; flex-wrap: wrap; justify-content: center !important; align-items: center !important; text-align: left !important; gap: 20px 36px !important; max-width: 1000px; margin-inline: auto; }
.method__close p { text-align: left; max-width: 34ch; }
@media (max-width: 767px) { .method__close { flex-direction: column !important; text-align: center !important; } .method__close p { text-align: center; } }

/* Projetos */
.outcomes__label { font-size: clamp(1.1rem, 1.8vw, 1.45rem); font-weight: 700; letter-spacing: .1em; }

/* Cases com abas */
.cases { margin-top: clamp(36px, 5vw, 56px); }
.cases__tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 26px; }
.cases__tabs::-webkit-scrollbar { display: none; }
.cases__tab {
  display: inline-flex; align-items: baseline; gap: 8px; flex: none;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--linha);
  background: var(--branco); color: var(--texto-suave);
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.cases__tab span { font-size: 10px; font-weight: 700; color: var(--verde-menta); }
.cases__tab:hover { transform: translateY(-2px); border-color: var(--linha-forte); }
.cases__tab.is-on { background: var(--verde-floresta); border-color: var(--verde-floresta); color: var(--pastel); }
.cases__tab.is-on span { color: var(--rosa); }
.cases__panel { animation: casefade .5s var(--ease); }
@keyframes casefade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cases__foot { display: none; }
.cases__cta { margin-top: 26px; }
@media (min-width: 900px) {
  .cases__panel { display: none; }
  .cases__panel.is-on { display: block; }
  .cases__cta { display: inline-flex; margin-inline: auto; }
  .cases { display: flex; flex-direction: column; align-items: center; }
  .cases__tabs, .cases__track { width: 100%; }
  .cases__tabs { justify-content: center; }
}
@media (max-width: 899px) {
  .cases__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .cases__track::-webkit-scrollbar { display: none; }
  .cases__panel { flex: 0 0 100%; scroll-snap-align: center; animation: none; }
  .cases__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
  .cases__dots { display: flex; gap: 6px; }
  .cases__dots button { width: 18px; height: 3px; padding: 0; border-radius: 2px; background: var(--linha-forte); transition: background-color .3s, width .3s var(--ease); }
  .cases__dots button[aria-current="true"] { background: var(--verde-floresta); width: 30px; }
  .cases__count { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--verde-menta); font-variant-numeric: tabular-nums; }
  .cases__cta { width: 100%; }
}

/* Case 03 sem moldura */
.stage--bare { background: linear-gradient(180deg, #FFFFFF 0%, #F1F3F0 100%) !important; border: 0 !important; padding: 26px 10px 34px !important; }
@media (min-width: 1000px) { .stage--bare { padding: 36px 20px 44px !important; } }

/* Rodapé com mais respiro */
.footer { padding-block: 26px calc(26px + env(safe-area-inset-bottom, 0px)); }
.footer__inner { gap: 14px 28px; }

/* ===================== v19 ===================== */
/* Rodapé com mais respiro */
.footer { padding-block: 34px calc(34px + env(safe-area-inset-bottom, 0px)); }
.footer__meta { gap: 8px 22px; }
.footer__meta a, .footer__meta span { line-height: 1.6; }

/* Case 02 — framework de posicionamento */
.pos__intro { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--texto-suave); max-width: 52ch; }
.pos__head .h3 span { display: block; }
.framework { display: grid; gap: 12px; }
.fw {
  position: relative; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--r);
  padding: 20px 20px 18px; display: grid; gap: 8px; align-content: start;
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.fw:hover { transform: translateY(-4px); border-color: var(--linha-forte); box-shadow: 0 16px 30px -24px rgba(15, 34, 29, .5); }
.fw__n { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--verde-menta); }
.fw__ico { width: 26px; height: 26px; fill: none; stroke: var(--verde-floresta); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fw h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; color: var(--verde-floresta); }
.fw p { font-size: 12.75px; line-height: 1.5; color: var(--texto-suave); }
.fw:nth-child(5) .fw__ico { stroke: var(--verde-menta); }
@media (min-width: 640px) { .framework { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .framework { grid-template-columns: repeat(6, 1fr); }
  .fw:nth-child(1), .fw:nth-child(2), .fw:nth-child(3) { grid-column: span 2; }
  .fw:nth-child(4), .fw:nth-child(5) { grid-column: span 3; }
}
.pos__closing {
  margin-top: 16px; padding: 22px 24px; border-radius: var(--r);
  background: var(--verde-floresta); color: var(--pastel);
  font-size: clamp(1rem, 1.7vw, 1.3rem); line-height: 1.3; letter-spacing: -.02em;
  display: grid; gap: 4px;
}
.pos__closing span { display: block; }
.pos__closing span:first-child { color: rgba(254, 248, 216, .62); }
.pos__closing b { font-weight: 700; color: var(--branco); }
.pos__closing .serif { color: var(--rosa); font-size: 1.14em; }

/* Páginas de política e termos */
.legal { background: var(--off); padding-block: 108px 72px; min-height: 100vh; }
.legal__inner { max-width: 760px; }
.legal__back { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--verde-menta); margin-bottom: 26px; }
.legal__back:hover { color: var(--verde-floresta); }
.legal__title { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.06; font-weight: 700; letter-spacing: -.04em; color: var(--verde-floresta); }
.legal__title .serif { font-weight: 400; color: var(--verde-menta); font-size: 1.12em; }
.legal__intro { margin-top: 16px; font-size: 1rem; line-height: 1.55; color: var(--verde-floresta); }
.legal h2 { margin-top: 30px; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; color: var(--verde-floresta); }
.legal p { margin-top: 8px; font-size: 13.75px; line-height: 1.6; color: var(--texto-suave); }
.legal p a { color: var(--verde-menta); font-weight: 600; border-bottom: 1px solid rgba(56, 116, 101, .35); }
.legal p a:hover { color: var(--verde-floresta); }
.legal__meta { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 12px; }
body.legal-open .header, body.legal-open .wa-float { display: none; }

/* ===================== v20 ===================== */
/* Área de cases com fundo próprio */
.cases {
  background: linear-gradient(180deg, #FFFFFF 0%, #EDF0EC 46%, #F6F7F4 100%);
  border: 1px solid rgba(41, 76, 67, .08);
  border-radius: var(--r);
  padding: 26px 18px 30px;
}
@media (min-width: 900px) { .cases { padding: 32px 34px 38px; } }
.cases .perf, .cases .fw, .cases .quote { background: var(--branco); }

/* CPL */
.metric--cpl { background: var(--amarelo); border-color: #F0E4A6; }
.metric--cpl .k { color: #B4568F; }
@media (min-width: 700px) { .metrics { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .metrics { grid-template-columns: repeat(5, 1fr); } }

/* Case 03: sem bloco atrás dos aparelhos */
.stage--bare { background: radial-gradient(70% 70% at 50% 45%, rgba(255,255,255,.95) 0%, rgba(237,240,236,.55) 55%, rgba(237,240,236,0) 100%) !important; }

/* Case 04 compacto e colorido */
.pos__intro { font-size: 13.25px; max-width: 46ch; }
.framework { gap: 10px; }
.fw { padding: 16px 18px 15px; gap: 5px; border: 1px solid transparent; }
.fw h4 { font-size: .98rem; }
.fw p { font-size: 12.25px; line-height: 1.45; }
.fw__ico { display: none; }
.fw--a { background: #FFF1FA !important; border-color: #FBD9EE; }
.fw--a .fw__n { color: #C4579A; }
.fw--b { background: var(--amarelo) !important; border-color: #F0E4A6; }
.fw--b .fw__n { color: #A98A2E; }
.fw--c { background: #EAF1ED !important; border-color: #CFE0D7; }
.fw--d { background: #E8F0EC !important; border-color: #CADDD3; }
.fw--e { background: var(--verde-floresta) !important; border-color: var(--verde-floresta); }
.fw--e h4 { color: var(--pastel); }
.fw--e p { color: rgba(254, 248, 216, .8); }
.fw--e .fw__n { color: var(--rosa); }
@media (min-width: 1000px) {
  .framework { grid-template-columns: repeat(5, 1fr); }
  .fw:nth-child(1), .fw:nth-child(2), .fw:nth-child(3), .fw:nth-child(4), .fw:nth-child(5) { grid-column: auto; }
}
.pos__close {
  margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 18px 36px; padding: 20px 22px; border-radius: var(--r);
  background: var(--verde-floresta); color: var(--pastel);
}
.pos__close p { display: grid; gap: 2px; font-size: clamp(.98rem, 1.5vw, 1.18rem); line-height: 1.3; letter-spacing: -.02em; max-width: 36ch; }
.pos__close p span:first-child { color: rgba(254, 248, 216, .62); }
.pos__close b { font-weight: 700; color: var(--branco); }
.pos__close .serif { color: var(--rosa); font-size: 1.14em; }
@media (max-width: 767px) { .pos__close { flex-direction: column; text-align: center; } .pos__close p { justify-items: center; } .pos__close .btn { width: 100%; } }

/* ===================== v21 ===================== */
:root { --amarelo-hero: #FFEFA8; }
html, body { overflow-x: clip; }

/* 1. Botão CONTATO do cabeçalho: branco com texto escuro */
.nav .btn--dark { --bg: var(--branco); --fg: var(--verde-noite); box-shadow: 0 10px 24px -14px rgba(15, 34, 29, .55); }
.nav .btn--dark:hover { --bg: var(--amarelo); --fg: var(--verde-noite); }
@media (min-width: 900px) {
  .nav .btn--dark { --bg: var(--branco); --fg: var(--verde-noite); box-shadow: 0 8px 20px -10px rgba(15, 34, 29, .45); }
  .nav .btn--dark:hover { --bg: var(--amarelo); --fg: var(--verde-noite); }
  .header.is-scrolled .nav .btn--dark { --bg: var(--branco); --fg: var(--verde-noite); box-shadow: 0 8px 18px -12px rgba(15, 34, 29, .5); }
  .header.is-scrolled .nav .btn--dark:hover { --bg: var(--amarelo); --fg: var(--verde-noite); }
}

/* 2. Apoio da hero: branco, com três expressões em amarelo claro */
.hero__sub { color: rgba(255, 255, 255, .96); }
.hero__sub strong { color: var(--amarelo-hero); font-weight: 600; }

/* 3. Entrada com direção — blocos se aproximam ao rolar */
.reveal.pre { transform: translate3d(0, 26px, 0) scale(.988); transition: opacity .95s var(--ease), transform 1.05s var(--ease); }
.reveal--l.pre { transform: translate3d(-42px, 12px, 0) scale(.99); }
.reveal--r.pre { transform: translate3d(42px, 12px, 0) scale(.99); }
.reveal--up.pre { transform: translate3d(0, 30px, 0) scale(.99); }
.reveal--l.pre.is-in, .reveal--r.pre.is-in, .reveal--up.pre.is-in { transform: none; }
@media (max-width: 767px) {
  .reveal--l.pre { transform: translate3d(-26px, 10px, 0) scale(.99); }
  .reveal--r.pre { transform: translate3d(26px, 10px, 0) scale(.99); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal.pre, .reveal--l.pre, .reveal--r.pre, .reveal--up.pre { opacity: 1; transform: none; }
}

/* 4. Cases: setas, bolinhas e transição */
.cases__foot {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 24px;
}
.cases__arrow {
  width: 42px; height: 42px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--linha-forte); background: var(--branco); color: var(--verde-floresta);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.cases__arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cases__arrow:hover { background: var(--verde-floresta); border-color: var(--verde-floresta); color: var(--pastel); transform: translateY(-2px); }
.cases__arrow:active { transform: translateY(0) scale(.95); }
.cases__dots { display: flex; gap: 6px; margin-inline: 4px; }
.cases__dots button { width: 20px; height: 3px; padding: 0; border-radius: 2px; background: var(--linha-forte); transition: background-color .3s, width .35s var(--ease); }
.cases__dots button[aria-current="true"] { background: var(--verde-floresta); width: 34px; }
.cases__count { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--verde-menta); font-variant-numeric: tabular-nums; margin-left: 6px; }
@media (min-width: 900px) {
  .cases__panel { animation: none; }
  .cases__panel.is-on { display: block; animation: caseIn .6s var(--ease); }
  @keyframes caseIn { from { opacity: 0; transform: translateX(var(--from, 3.2%)); } to { opacity: 1; transform: none; } }
  .cases__foot { margin-top: 26px; }
}
@media (max-width: 899px) { .cases__cta { width: 100%; } }
.cases__cta[hidden] { display: none !important; }

/* 5. Case 01 — prints reais do WhatsApp */
.perf__frame {
  display: grid; gap: 8px; align-content: start;
  aspect-ratio: auto; min-height: 0; flex: none;
  background: #EDE4DB; border: 1px solid rgba(41, 76, 67, .1);
  border-radius: var(--r-sm); padding: 10px;
}
.proof { border-radius: 14px; overflow: hidden; background: #EDE4DB; }
.proof img { display: block; width: 100%; height: auto; }
.perf__proof { justify-content: flex-start; }
@media (min-width: 1000px) {
  .perf { grid-template-columns: 1.55fr 1fr; align-items: start; }
  .perf__frame { padding: 12px; gap: 9px; }
}

/* 6. Case 02 — print real do feed */
.phone--real { background: var(--grafite); border-radius: 34px 34px 0 0; padding: 9px 9px 0; width: min(300px, 86%); }
.phone__screen--img { padding: 0; overflow: hidden; border-radius: 26px 26px 0 0; background: var(--branco); }
.phone__screen--img img { display: block; width: 100%; height: auto; }
.feed__visual { align-items: flex-end; }
@media (min-width: 900px) { .phone--real { width: 306px; } }

/* ===================== v22 — acabamento ===================== */
/* Cabeçalho com mais respiro */
.header__inner { height: 78px; }
@media (min-width: 900px) { .header__inner { height: 96px; } .header.is-scrolled .header__inner { height: 74px; } }
.header__inner { transition: height .4s var(--ease); }

/* Hero mais alta e com mais folga */
.hero { padding-block: 136px 104px; }
.hero__title { --hs: clamp(2.02rem, 8.4vw, 2.5rem); }
.hero__side { gap: 30px; }
.hero__sub { font-size: 1rem; line-height: 1.55; }
@media (min-width: 900px) {
  .hero { padding-block: 216px 212px; }
  .hero__title { --hs: clamp(2rem, 4vw, 3.5rem); }
  .hero__inner { column-gap: 76px; grid-template-columns: auto minmax(0, 350px); }
  .hero__side { gap: 42px; padding-top: .4em; }
  .hero__sub { font-size: 1rem; }
}

/* "Entendemos..." em três linhas */
.think__intro .h2 { font-size: clamp(2rem, 3.7vw, 3.25rem); line-height: 1.05; }
.think__intro .h2 span { display: block; white-space: normal; }
@media (min-width: 900px) { .think__intro .h2 span { white-space: nowrap; } }
@media (min-width: 1000px) { .think__grid { grid-template-columns: 1fr 1.15fr; gap: 64px; } }

/* Método com respiro entre título, cards, frase e CTA */
.method { padding-block: 76px 84px; }
.method__grid { margin-top: 44px !important; gap: 16px; }
.method__close { margin-top: 52px !important; gap: 24px 56px !important; }
@media (min-width: 900px) {
  .method { padding-block: 104px 112px; }
  .method__grid { margin-top: 60px !important; gap: 18px; }
  .method__close { margin-top: 72px !important; }
}

/* Projetos: hierarquia de "Resultado também é" */
.outcomes { gap: 0 !important; padding: 34px 22px 36px !important; }
.outcomes__head { gap: 10px !important; }
.outcomes__label { font-size: clamp(1.2rem, 2vw, 1.6rem) !important; letter-spacing: .1em !important; }
.outcomes__hint { font-size: clamp(1rem, 1.45vw, 1.2rem) !important; color: var(--verde-menta); line-height: 1.35; }
.outcomes .steps { margin-top: 30px; }
@media (min-width: 900px) { .outcomes { padding: 42px 40px 44px !important; } .outcomes .steps { margin-top: 36px; } }
@media (max-width: 699px) {
  .outcomes .steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .outcomes .steps li { display: block; min-width: 0; }
  .outcomes .steps li::after { display: none; }
  .outcomes .step-pill { width: 100%; justify-content: center; padding: 10px 10px 11px; font-size: .98rem; white-space: nowrap; }
  .outcomes .steps li:nth-child(5) { grid-column: 1 / -1; }
}

/* Área de cases: fundo próprio, sólido e mais marcado */
.cases { background: #DFEAE4; border: 0; }
.cases .perf { background: var(--branco); background-image: none; }
@media (max-width: 899px) {
  .cases { padding: 18px 12px 24px; margin-inline: calc(var(--gutter) * -1 + 8px); }
  .cases__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow: visible; margin-bottom: 20px; }
  .cases__tab { justify-content: center; padding: 10px 8px; font-size: 11.5px; min-width: 0; white-space: nowrap; }
  .cases__track { margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px; gap: 12px; }
  .cases .perf { padding: 20px 14px; }
  .perf__hero .num { font-size: 4.4rem; }
  .case--feed { padding: 26px 16px 0; }
}

/* Case 03: card com fundo forte e só o notebook */
.case--lp { background: var(--verde-menta); color: var(--pastel); border-radius: var(--r); padding: 28px 18px 30px; position: relative; overflow: hidden; }
.case--lp::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .06; pointer-events: none; }
.case--lp .lp { position: relative; }
.case--lp .h3 { color: var(--pastel); }
.case--lp .h3 .serif { color: var(--rosa); }
.case--lp .lp__text > p { color: rgba(254, 248, 216, .82); }
.case--lp .lp__points li { color: var(--pastel); border-color: rgba(254, 248, 216, .32); }
.case--lp .lp__points li:last-child { background: var(--pastel); color: var(--verde-floresta); border-color: var(--pastel); }
.case--lp .stage--bare { background: none !important; padding: 8px 0 4px !important; }
.case--lp .mac { width: 100%; margin-inline: auto; filter: drop-shadow(0 30px 34px rgba(8, 24, 20, .38)); }
@media (min-width: 1000px) {
  .case--lp { padding: 46px 48px; }
  .case--lp .lp { grid-template-columns: 1fr 1.55fr; gap: 56px; }
  .case--lp .stage--bare { padding: 0 !important; }
}

/* Case 04: título em 2 linhas, sem lista solta, cards leves */
.pos__head { grid-template-columns: 1fr !important; margin-bottom: 22px; }
.pos__head .h3 { max-width: none; }
@media (min-width: 900px) { .pos__head .h3 span { white-space: nowrap; } }
.pos__intro { max-width: 60ch; font-size: 13.5px; }
.framework { gap: 8px; }
.fw { padding: 15px 16px 14px; gap: 4px; }
.fw h4 { font-size: .95rem; }
.fw p { font-size: 12px; line-height: 1.42; }
.pos__close {
  background: none; color: var(--verde-floresta); padding: 22px 4px 2px; margin-top: 18px;
  border-top: 1px solid rgba(41, 76, 67, .16); border-radius: 0; justify-content: space-between;
}
.pos__close p { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: none; }
.pos__close p span:first-child { color: var(--verde-floresta); font-weight: 700; }
.pos__close p span:last-child { color: var(--verde-menta); }
.pos__close b { color: var(--verde-floresta); font-weight: 600; }
.pos__close .serif { color: var(--verde-menta); }
.pos__close .btn--light { box-shadow: 0 12px 26px -14px rgba(15, 34, 29, .45); }

/* Depoimentos: cards iguais, texto completo, foto real */
.carousel__track { align-items: stretch !important; }
.quote { height: 100%; gap: 14px; padding: 22px 22px 24px; }
.quote__body { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; font-size: 13px; line-height: 1.55; }
.quote__photo { width: 52px; height: 52px; background: var(--cinza); }
.quote__photo img { display: block; }
.quote__mark, .quote__more { display: none !important; }

/* v22b */
.hero__title .b { white-space: nowrap; }
.work__head { margin-bottom: 40px !important; }
@media (min-width: 900px) { .work__head { margin-bottom: 48px !important; } }
.fw--c { background: #F6FAF7 !important; border-color: #D7E6DD; }
.fw--d { background: #C9DFD3 !important; border-color: #B7D3C4; }
.quote, .quote.is-active { opacity: 1; transform: none; }
.quote { border-color: var(--linha); box-shadow: none; }
.quote.is-active { border-color: var(--linha-forte); box-shadow: 0 18px 36px -26px rgba(15, 34, 29, .45); }

@media (max-width: 899px) {
  .cases__track { align-items: flex-start; transition: height .45s var(--ease); }
  .cases__panel { align-self: flex-start; }
}

/* ===================== v23 — cores, cards e CTAs ===================== */
:root { --texto-suave: #626664; --cinza-texto: #6B6F6D; --cinza-escuro: #3E4240; }

/* 2. Resultado também é */
.outcomes__head { gap: 6px !important; }
.outcomes__hint { color: var(--cinza-texto) !important; }
.outcomes .steps { margin-top: 26px; }
@media (min-width: 900px) { .outcomes .steps { margin-top: 32px; } }

/* 3. Fundo da área de cases: cinza suave */
.cases { background: linear-gradient(180deg, #F6F7F6 0%, #ECEEED 55%, #E6E8E7 100%); border: 1px solid rgba(44, 43, 44, .05); }

/* 5. Case 02 — cantos iguais aos demais */
.case--feed { border-radius: var(--r); }

/* 6. Case 03 — card branco + notebook refeito */
.case--lp { background: var(--branco); color: var(--texto); padding: 30px 20px 34px; }
.case--lp::before { display: none; }
.case--lp .h3 { color: var(--verde-floresta); }
.case--lp .h3 .serif { color: var(--verde-menta); }
.case--lp .lp__text > p { color: var(--texto-suave); }
.case--lp .lp__points li { color: var(--verde-floresta); border-color: var(--linha-forte); }
.case--lp .lp__points li:last-child { background: var(--verde-floresta); color: var(--pastel); border-color: var(--verde-floresta); }
.case--lp .stage--bare { background: none !important; padding: 12px 4% 8px !important; }
.nb { position: relative; width: 100%; max-width: 640px; margin: 0 auto; }
.nb__lid {
  position: relative; background: #0E0F10; border-radius: 16px 16px 6px 6px;
  padding: 2.4% 2.4% 3%; box-shadow: inset 0 0 0 1px #2E3033, inset 0 0 0 2px #0A0A0B;
}
.nb__cam { position: absolute; top: .9%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #2B2E31; box-shadow: 0 0 0 1px #151618; }
.nb__screen { aspect-ratio: 1400 / 814; border-radius: 4px; overflow: hidden; background: #F3F0EC; }
.nb__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.nb__base {
  position: relative; width: 112%; margin-left: -6%; height: 14px;
  background: linear-gradient(180deg, #E4E6E8 0%, #C9CCCF 55%, #A9ADB1 100%);
  border-radius: 2px 2px 18px 18px / 2px 2px 12px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.nb__base span { position: absolute; left: 50%; top: 0; width: 16%; height: 6px; transform: translateX(-50%); background: linear-gradient(180deg, #B8BCC0, #D2D5D8); border-radius: 0 0 8px 8px; }
.nb__shadow { position: absolute; left: 2%; right: 2%; bottom: -18px; height: 22px; background: radial-gradient(50% 50% at 50% 50%, rgba(15, 34, 29, .28), transparent 72%); filter: blur(4px); z-index: -1; }
@media (min-width: 1000px) {
  .case--lp { padding: 44px 46px; }
  .case--lp .lp { grid-template-columns: 1fr 1.5fr; gap: 56px; }
  .case--lp .stage--bare { padding: 10px 2% 14px !important; }
}

/* 7. Case 04 — card branco no padrão dos demais */
.case--pos { background: var(--branco); border-radius: var(--r); padding: 28px 20px 26px; }
.pos__head { margin-bottom: 24px; }
.framework { gap: 10px; }
.fw { padding: 20px 18px 20px; gap: 8px; min-height: 132px; align-content: start; }
.fw h4 { font-size: 1rem; }
.fw p { font-size: 12.5px; line-height: 1.48; color: var(--cinza-escuro); }
.fw--e p { color: rgba(254, 248, 216, .82); }
.fw--c { background: #EEF4F0 !important; border-color: #DCE8E0; }
.fw--d { background: #D5E6DC !important; border-color: #C3DACD; }
.pos__close { margin-top: 26px; padding-top: 24px; }
@media (min-width: 1000px) {
  .case--pos { padding: 40px 42px 36px; }
  .fw { min-height: 172px; padding: 24px 20px; }
}

/* 8. Menos verde em textos secundários */
.thought p { color: var(--cinza-escuro); }
.thought p b { color: var(--verde-floresta); }
.quote__hl { color: var(--grafite); }
.quote__body { color: var(--cinza-texto); }
.quote__id span { color: var(--cinza-texto); }
.about__intro { color: var(--cinza-escuro); }
.about__intro b { color: var(--verde-floresta); }
.about__quote { color: var(--cinza-escuro); }
.pos__close p span:last-child { color: var(--cinza-texto); }
.pos__close .serif { color: var(--verde-menta); }
.lead { color: var(--cinza-texto); }

/* 10. Rodapé */
.footer { padding-block: 56px calc(56px + env(safe-area-inset-bottom, 0px)) !important; }
@media (min-width: 900px) { .footer { padding-block: 64px calc(64px + env(safe-area-inset-bottom, 0px)) !important; } }
.footer__ig { display: inline-flex; align-items: center; gap: 7px; }
.footer__ig svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.footer__ig svg .dot { fill: currentColor; stroke: none; }

/* 11. Botão flutuante do WhatsApp com pulso leve */
.wa-float { box-shadow: 0 10px 26px -10px rgba(15, 34, 29, .55); }
.wa-float.is-visible { animation: waGlow 2.8s var(--ease) infinite; }
.wa-float.is-visible::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(255, 144, 212, .55); animation: waRing 2.8s ease-out infinite;
}
@keyframes waRing { 0% { box-shadow: 0 0 0 0 rgba(255, 144, 212, .5); } 70% { box-shadow: 0 0 0 14px rgba(255, 144, 212, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 144, 212, 0); } }
@keyframes waGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
@media (prefers-reduced-motion: reduce) { .wa-float.is-visible, .wa-float.is-visible::before { animation: none; } }

@media (min-width: 900px) { .pos__close { flex-wrap: nowrap; } .pos__close .btn { flex: none; } }
.pos__close .btn--dark { box-shadow: 0 12px 26px -14px rgba(15, 34, 29, .5); }
@media (min-width: 1000px) { .pos__close p span { white-space: nowrap; } .pos__close p { flex: 1 1 auto; } }
.think__intro .h2 { font-size: clamp(2.1rem, 4.1vw, 3.6rem); }
@media (max-width: 639px) { .fw { min-height: 0; padding: 16px 18px; } }

/* v24 — continuidade entre "Resultado também é" e cases */
.outcomes { max-width: none !important; width: 100%; border: 0 !important; box-shadow: 0 22px 50px -34px rgba(15, 34, 29, .28), 0 2px 8px -4px rgba(15, 34, 29, .06); }
.cases { border: 0 !important; background: linear-gradient(180deg, #FFFFFF 0%, #F5F6F5 38%, #EDEFEE 100%) !important; box-shadow: 0 22px 50px -34px rgba(15, 34, 29, .28), 0 2px 8px -4px rgba(15, 34, 29, .06); }
.cases .perf, .case--lp, .case--pos { box-shadow: 0 14px 34px -26px rgba(15, 34, 29, .28); border: 1px solid rgba(44, 43, 44, .05); }