/* ============================================================
   VINICIUS ALMEIDA — style.css
   Paleta: Preto #0D0D0D · Dourado #B8882A · Teal #1E9E8A
   ============================================================ */

/* ── RESET & TOKENS ─────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }

:root {
  --ink:        #0D0D0D;
  --paper:      #F5F2EC;
  --gold:       #B8882A;
  --gold2:      #D4A843;
  --gold-pale:  #F0D488;
  --gold-dark:  #7A5718;
  --teal:       #1E9E8A;
  --teal2:      #2BBFAA;
  --teal-dark:  #0D5C52;
  --off:        #ECEAE2;
  --muted:      #5A5550;
  --dim:        #8A857F;
  --line:       rgba(13,13,13,.12);
  --line-light: rgba(245,242,236,.12);

  /* texto sobre fundos coloridos */
  --on-ink-primary:   #F5F2EC;
  --on-ink-secondary: rgba(245,242,236,.55);
  --on-ink-dim:       rgba(245,242,236,.3);

  --on-gold-primary:   #1A0E00;
  --on-gold-secondary: rgba(26,14,0,.65);
  --on-gold-dim:       rgba(26,14,0,.42);

  --on-teal-primary:   #F5F2EC;
  --on-teal-secondary: rgba(245,242,236,.7);
  --on-teal-dim:       rgba(245,242,236,.45);

  --fs: 'Montserrat', sans-serif;
  --fe: 'DM Serif Display', serif;
  --fm: 'Space Mono', monospace;

  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
}

body {
  font-family: var(--fs);
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

.nav-logo img {
  height: 32px;
  width: auto;
  display: block;
}

@media (max-width: 960px) {
  .nav-logo img { height: 26px; }
}

/* ── ACCENT STRIPE ──────────────────────────────────────────── */
.accent-stripe {
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--teal) 100%);
  position: relative; z-index: 300;
}

/* ── NAV ────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 3px; left: 0; right: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 2.5rem;
  transition: background .5s var(--ease-out), padding .4s var(--ease-out);
}
.nav.scrolled {
  background: rgba(13,13,13,.96);
  backdrop-filter: blur(12px) saturate(1.4);
  padding: .85rem 2.5rem;
  border-bottom: 1px solid var(--line-light);
}
.nav-sig {
  font-family: var(--fe); font-size: 1.2rem;
  font-style: italic; letter-spacing: -.5px;
  color: var(--paper);
}
.nav-sig span {
  font-style: normal; font-family: var(--fs);
  font-size: .68rem; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(245,242,236,.4); margin-left: .5rem;
}
.nav-r { display: flex; align-items: center; gap: 2rem; }
.nav-r a {
  font-size: .72rem; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(245,242,236,.55);
  transition: color .25s;
  position: relative;
}
.nav-r a::after {
  content: ''; position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.nav-r a:hover { color: var(--paper); }
.nav-r a:hover::after { transform: scaleX(1); }
.nav-wpp {
  font-size: .72rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  border: 1.5px solid rgba(184,136,42,.6);
  color: var(--gold2) !important;
  padding: .45rem 1.1rem;
  transition: all .25s !important;
}
.nav-wpp::after { display: none !important; }
.nav-wpp:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--ink) !important;
}
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; border: none; background: none; padding: 4px;
}
.nav-hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: var(--paper); transition: all .3s;
}

/* ── MOBILE OVERLAY ─────────────────────────────────────────── */
.mobile-overlay {
  display: none; position: fixed; inset: 0;
  background: var(--ink); z-index: 199;
  flex-direction: column; align-items: flex-start;
  justify-content: center; padding: 3rem; gap: 1.5rem;
}
.mobile-overlay.open { display: flex; }
.mo-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  background: none; border: none;
  font-size: 1.5rem; cursor: pointer; color: var(--paper);
}
.mobile-overlay a {
  font-family: var(--fe); font-size: 2.5rem;
  font-style: italic; color: var(--paper); transition: color .2s;
}
.mobile-overlay a:hover { color: var(--teal2); }
.mobile-overlay .mo-line {
  width: 40px; height: 1px;
  background: rgba(245,242,236,.15); margin: .25rem 0;
}

/* ── HERO — bg #0D0D0D, 100vh ───────────────────────────────── */
.hero {
  min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr;
  position: relative; overflow: hidden;
  background: var(--ink);         /* fundo preto full */
  border-bottom: 1px solid rgba(245,242,236,.08);
}
.hero-bg {
  position: absolute; inset: -20%;
  background-image: url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1600&q=60');
  background-size: cover; background-position: center;
  filter: grayscale(100%) contrast(1.1);
  opacity: .04;
  will-change: transform; pointer-events: none;
}
.hero-l {
  padding: 9rem 3rem 4rem 2.5rem;
  border-right: 1px solid rgba(245,242,236,.08);
  display: flex; flex-direction: column;
  justify-content: space-between;
  position: relative; z-index: 1;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: .75rem;
  font-size: .67rem; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--on-ink-dim); margin-bottom: 2.5rem;
}
.hero-eyebrow::before {
  content: ''; width: 24px; height: 1px;
  background: var(--gold); flex-shrink: 0;
}
.hero-eyebrow .dot-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal2);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

.hero-h1 {
  font-family: var(--fe);
  font-size: clamp(3.5rem, 6vw, 5.8rem);
  line-height: 1; letter-spacing: -.03em;
  font-weight: 400; margin-bottom: 2rem;
  color: var(--on-ink-primary);
}
.hero-h1 .line { display: block; overflow: hidden; }
.hero-h1 .line-inner {
  display: block;
  transform: translateY(110%);
  animation: slideUp .9s var(--ease-out) forwards;
}
.hero-h1 .line:nth-child(2) .line-inner { animation-delay: .1s; }
.hero-h1 .line:nth-child(3) .line-inner { animation-delay: .2s; }
.hero-h1 .line:nth-child(4) .line-inner { animation-delay: .3s; }
@keyframes slideUp { to { transform: translateY(0); } }

.hero-h1 em { color: var(--teal2); font-style: italic; }
.hero-h1 .stroke-txt {
  -webkit-text-stroke: 1.5px var(--on-ink-primary);
  color: transparent;
}
.hero-sub {
  font-size: 1rem; color: var(--on-ink-secondary);
  line-height: 1.75; max-width: 400px; margin-bottom: 3rem;
  padding-left: 1.25rem; border-left: 3px solid var(--gold);
  opacity: 0;
  animation: fadeIn .7s .6s var(--ease-out) forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

.hero-cta-row {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  opacity: 0;
  animation: fadeIn .7s .75s var(--ease-out) forwards;
}
.cta-main {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--gold); color: var(--on-gold-primary);
  padding: .9rem 2.2rem;
  font-weight: 700; font-size: .85rem; letter-spacing: .5px;
  position: relative; overflow: hidden;
}
.cta-main::before {
  content: ''; position: absolute; inset: 0;
  background: var(--teal);
  transform: translateX(-101%) skewX(-8deg);
  transition: transform .45s var(--ease-out);
}
.cta-main:hover::before { transform: translateX(0) skewX(0); }
.cta-main span {
  position: relative; z-index: 1;
  transition: color .01s;
}
.cta-main:hover span { color: var(--on-teal-primary); }

.cta-sec {
  font-size: .78rem; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--on-ink-dim);
  display: flex; align-items: center; gap: .4rem;
  transition: color .2s, gap .2s;
}
.cta-sec:hover { color: var(--on-ink-primary); gap: .75rem; }

.hero-scroll {
  display: flex; align-items: center; gap: .75rem;
  font-size: .63rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--on-ink-dim);
  opacity: 0;
  animation: fadeIn .7s 1s var(--ease-out) forwards;
}
.scroll-line {
  width: 40px; height: 1px;
  background: rgba(245,242,236,.2);
  position: relative; overflow: hidden;
}
.scroll-line::after {
  content: ''; position: absolute; top: 0;
  left: -100%; width: 100%; height: 1px; background: var(--gold);
  animation: scanline 2s ease-in-out infinite;
}
@keyframes scanline { 0%{left:-100%} 100%{left:100%} }

/* hero right — seção com fundo levemente diferenciado dentro do preto */
.hero-r {
  display: grid; grid-template-rows: 1fr 1fr;
  position: relative; z-index: 1;
}
.hero-r-top {
  padding: 9rem 2.5rem 2.5rem;
  border-bottom: 1px solid rgba(245,242,236,.07);
  display: flex; flex-direction: column;
  justify-content: flex-end; gap: 1.5rem;
  background: rgba(255,255,255,.025);
  position: relative; overflow: hidden;
}
.hero-r-top::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(43,191,170,.06) 0%, transparent 60%);
  pointer-events: none;
}
.hero-stack-label {
  font-size: .63rem; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--on-ink-dim);
}
.hero-tags-v { display: flex; flex-direction: column; gap: .65rem; }
.htag {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--fm); font-size: .72rem;
  color: var(--on-ink-secondary);
  cursor: default;
  transition: color .25s, transform .25s;
}
.htag:hover { color: var(--on-ink-primary); transform: translateX(4px); }
.htag-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
}
.htag-dot.teal { background: var(--teal2); }

.hero-r-bot {
  padding: 2rem 2.5rem;
  display: flex; flex-direction: column;
  justify-content: center; gap: 1.5rem;
  background: rgba(184,136,42,.06);  /* toque dourado sutil */
}
.hero-stat-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: rgba(245,242,236,.07);
}
.hstat {
  background: rgba(13,13,13,.6);
  padding: 1.5rem 1rem;
  transition: background .25s;
}
.hstat:hover { background: rgba(184,136,42,.08); }
.hstat-num {
  font-family: var(--fe); font-size: 2.8rem;
  font-weight: 400; line-height: 1;
  color: var(--on-ink-primary);
}
.hstat-num sup {
  font-size: 1rem; font-family: var(--fs);
  font-weight: 600; vertical-align: super;
}
.hstat-lbl {
  font-size: .68rem; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--on-ink-dim); margin-top: .4rem;
}
.hero-ticker {
  overflow: hidden; font-family: var(--fm);
  font-size: .63rem; color: var(--on-ink-dim);
  border-top: 1px solid rgba(245,242,236,.07);
  padding-top: 1rem;
}
.ticker-track {
  display: flex; gap: 2.5rem;
  animation: ticker 18s linear infinite;
  white-space: nowrap;
}
.ticker-item { display: flex; align-items: center; gap: .5rem; }
.ticker-item span { color: var(--teal2); }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── MANIFESTO — bg #B8882A, 100vh ─────────────────────────── */
.manifesto {
  min-height: 100vh;
  display: grid; grid-template-columns: 220px 1fr;
  align-content: center;
  gap: 4rem;
  padding: 6rem 2.5rem;
  background: var(--gold);
  border-bottom: 3px solid var(--gold-dark);
  position: relative; overflow: hidden;
}
/* textura sutil em cima do dourado */
.manifesto::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(26,14,0,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,14,0,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.manifesto-bg {
  position: absolute; inset: -30%;
  background-image: url('https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=1400&q=50');
  background-size: cover; background-position: center;
  background-attachment: fixed;
  filter: grayscale(100%) contrast(.7);
  opacity: .04;
  pointer-events: none;
}
.manifesto-label {
  font-size: .63rem; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--on-gold-dim);
  padding-top: .5rem;
  position: relative; z-index: 1;
}
.manifesto-txt {
  font-family: var(--fe);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.45; font-weight: 400;
  letter-spacing: -.01em;
  color: var(--on-gold-primary);
  position: relative; z-index: 1;
}
.manifesto-txt em {
  color: var(--ink);
  font-style: italic;
}
.manifesto-txt .und {
  text-decoration: underline;
  text-decoration-color: rgba(26,14,0,.35);
  text-underline-offset: 5px;
}

/* ── SERVICES — bg #0D0D0D ──────────────────────────────────── */
.services { border-bottom: 1px solid rgba(245,242,236,.08); }
.srv-header {
  padding: 3rem 2.5rem;
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 1px solid rgba(245,242,236,.08);
  background: var(--ink);
  position: relative; overflow: hidden;
}
.srv-header::after {
  content: '02';
  position: absolute; right: 2rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--fe); font-size: 8rem;
  font-weight: 400; color: rgba(255,255,255,.03);
  pointer-events: none; line-height: 1;
}
.srv-header h2 {
  font-family: var(--fe);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 400; letter-spacing: -.02em;
  color: var(--on-ink-primary);
}
.srv-header p {
  font-size: .8rem; color: var(--on-ink-secondary);
  max-width: 280px; text-align: right;
}
.srv-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  background: var(--ink);
}
.srv-item {
  padding: 2.5rem 2rem;
  border-right: 1px solid rgba(245,242,236,.07);
  position: relative; overflow: hidden;
  cursor: default;
  transition: background .35s var(--ease-out);
  background: var(--ink);
}
.srv-item:last-child { border-right: none; }
.srv-item::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 3px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.srv-item.g::after { background: var(--gold); }
.srv-item.t::after { background: var(--teal); }
.srv-item:hover::after { transform: scaleX(1); }
.srv-item.g:hover { background: rgba(184,136,42,.08); }
.srv-item.t:hover { background: rgba(30,158,138,.08); }
.srv-item::before {
  content: attr(data-n);
  position: absolute; bottom: 1rem; right: 1rem;
  font-family: var(--fe); font-size: 4rem;
  font-weight: 400; color: rgba(255,255,255,.03);
  line-height: 1; pointer-events: none;
  transition: color .35s;
}
.srv-item:hover::before { color: rgba(255,255,255,.06); }
.srv-num {
  font-family: var(--fm); font-size: .63rem;
  color: var(--on-ink-dim); margin-bottom: 2rem; display: block;
}
.srv-icon-line {
  width: 32px; height: 2px; margin-bottom: 1.5rem;
  transition: width .4s var(--ease-out);
}
.srv-item.g .srv-icon-line { background: var(--gold); }
.srv-item.t .srv-icon-line { background: var(--teal); }
.srv-item:hover .srv-icon-line { width: 64px; }
.srv-item h3 {
  font-size: 1.05rem; font-weight: 700;
  margin-bottom: .85rem; letter-spacing: -.02em;
  color: var(--on-ink-primary);
}
.srv-item p {
  font-size: .82rem; color: var(--on-ink-secondary);
  line-height: 1.7; margin-bottom: 1.5rem;
}
.srv-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.srv-pill {
  font-family: var(--fm); font-size: .58rem;
  letter-spacing: .5px; border: 1px solid rgba(245,242,236,.12);
  padding: .2rem .5rem; color: var(--on-ink-dim);
  transition: border-color .2s, color .2s;
}
.srv-item:hover .srv-pill { border-color: rgba(245,242,236,.25); color: var(--on-ink-secondary); }

/* ── PARALLAX DIVIDER ───────────────────────────────────────── */
.parallax-divider {
  height: 420px; position: relative; overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.parallax-divider-bg {
  position: absolute; inset: -30%;
  background-image: url('https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?w=1600&q=60');
  background-size: cover; background-position: center;
  background-attachment: fixed;
  filter: grayscale(80%) contrast(1.1) brightness(.3);
  will-change: transform;
}
.parallax-divider-overlay {
  position: absolute; inset: 0;
  background: rgba(13,13,13,.6);
}
.parallax-divider-content {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center; gap: 1.5rem; padding: 2rem;
}
.pd-eyebrow {
  font-family: var(--fm); font-size: .65rem;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold2);
}
.parallax-divider-content h3 {
  font-family: var(--fe);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400; color: var(--on-ink-primary);
  line-height: 1.1; letter-spacing: -.02em;
}
.parallax-divider-content h3 em { color: var(--teal2); font-style: italic; }
.parallax-divider-content p {
  font-size: .9rem; color: var(--on-ink-secondary);
  max-width: 480px; line-height: 1.7;
}

/* ── PROCESS — bg #1E9E8A, 100vh ────────────────────────────── */
.process {
  min-height: 100vh;
  padding: 6rem 2.5rem;
  border-bottom: 3px solid var(--teal-dark);
  display: grid; grid-template-columns: 280px 1fr;
  align-content: center;
  gap: 4rem;
  background: var(--teal);
  position: relative; overflow: hidden;
}
/* textura pontilhada sobre o teal */
.process::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(245,242,236,.07) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.process-left h2 {
  font-family: var(--fe);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 400; letter-spacing: -.02em;
  margin-bottom: 1rem;
  color: var(--on-teal-primary);
}
.process-left p {
  font-size: .85rem; color: var(--on-teal-secondary); line-height: 1.7;
}
.pstep {
  display: grid; grid-template-columns: 52px 1fr;
  gap: 1.5rem; padding: 1.5rem 0;
  border-bottom: 1px solid rgba(245,242,236,.15);
  align-items: start; position: relative;
  opacity: .35;
  transition: opacity .4s var(--ease-out);
  cursor: default;
}
.pstep:last-child { border-bottom: none; }
.pstep.active, .pstep:hover { opacity: 1; }
.pstep-n {
  font-family: var(--fm); font-size: .68rem;
  color: black; padding-top: .2rem;
}
.pstep-body h4 {
  font-size: .95rem; font-weight: 700;
  letter-spacing: -.01em; margin-bottom: .35rem;
  color: black;
}
.pstep-body p {
  font-size: .8rem; color: var(--on-teal-secondary); line-height: 1.65; color: black; 
}
.pstep-bar {
  height: 2px;
  background: rgba(245,242,236,.15);
  margin-top: .75rem;
}
.pstep-bar-fill { height: 2px; background: var(--on-teal-primary); width: 0; }
.pstep.active .pstep-bar-fill {
  animation: fillbar .9s .1s var(--ease-out) forwards;
}
.pstep:hover .pstep-bar-fill {
  animation: fillbar .6s var(--ease-out) forwards;
}
@keyframes fillbar { from{width:0} to{width:100%} }

/* ── VOICE — bg paper ───────────────────────────────────────── */
.voice { border-bottom: 1px solid var(--line); }
.voice-header {
  padding: 3rem 2.5rem;
  border-bottom: 1px solid var(--line-light);
  display: flex; justify-content: space-between; align-items: flex-end;
  background: var(--ink);
}
.voice-header h2 {
  font-family: var(--fe);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 400; letter-spacing: -.02em;
  color: var(--on-ink-primary);
}
.voice-header .vh-sub {
  font-size: .68rem; color: var(--on-ink-dim); font-family: var(--fm);
}
.voice-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: var(--paper);
}
.vcard {
  padding: 3rem 2rem;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 1.5rem;
  background: var(--paper);
  transition: background .35s;
}
.vcard:last-child { border-right: none; }
.vcard:hover { background: var(--off); }
.vcard-q {
  font-family: var(--fe); font-size: 3rem;
  font-weight: 400; color: var(--gold); line-height: 1;
}
.vcard-text {
  font-family: var(--fe); font-size: 1.05rem;
  line-height: 1.65; font-style: italic;
  color: var(--ink); flex: 1;
}
.vcard-result {
  font-family: var(--fm); font-size: .66rem;
  letter-spacing: .5px; color: var(--teal);
  border: 1px solid rgba(30,158,138,.3);
  padding: .4rem .75rem; align-self: flex-start;
  background: rgba(30,158,138,.04);
}
.vcard-who { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.vcard-av {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
  background: var(--ink); color: var(--paper); flex-shrink: 0;
}
.vcard-name { font-size: .82rem; font-weight: 700; color: var(--ink); }
.vcard-role { font-size: .7rem; color: var(--dim); }

/* ── PRICING — bg #B8882A (dourado) ────────────────────────── */
.pricing {
  background: var(--gold);
  border-bottom: 3px solid var(--gold-dark);
}
.pricing-header {
  padding: 3rem 2.5rem;
  border-bottom: 1px solid rgba(26,14,0,.15);
  background: var(--gold);
}
.pricing-header h2 {
  font-family: var(--fe);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 400; letter-spacing: -.02em;
  color: var(--on-gold-primary);
}
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.pcard {
  padding: 2.5rem 2rem;
  border-right: 1px solid rgba(26,14,0,.15);
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--gold);
  transition: background .3s;
}
.pcard:last-child { border-right: none; }
.pcard:not(.featured):hover { background: rgba(26,14,0,.06); }

/* card featured sobre dourado — usa o preto */
.pcard.featured {
  background: var(--ink);
}
.pcard.featured h3, .pcard.featured .pc-val { color: var(--on-ink-primary); }
.pcard.featured .pc-desc { color: var(--on-ink-secondary); }
.pcard.featured .pc-feat li { color: var(--on-ink-secondary); }
.pcard.featured .pc-feat li::before { background: var(--teal2); }
.pcard.featured .pc-tag { color: var(--teal2); border-color: rgba(43,191,170,.35); }
.pcard.featured .btn-pc {
  background: transparent; color: var(--on-ink-primary);
  border-color: rgba(245,242,236,.3);
}
.pcard.featured .btn-pc:hover {
  background: var(--teal); color: var(--on-teal-primary);
  border-color: var(--teal);
}
.pc-tag {
  font-family: var(--fm); font-size: .58rem; letter-spacing: 1px;
  color: var(--on-gold-secondary); text-transform: uppercase;
  border: 1px solid rgba(26,14,0,.25);
  padding: .2rem .6rem; align-self: flex-start;
}
.pcard h3 {
  font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--on-gold-primary);
}
.pc-val {
  font-family: var(--fe); font-size: 2.8rem;
  font-weight: 400; line-height: 1.1;
  color: var(--on-gold-primary);
}
.pc-val span {
  font-family: var(--fs); font-size: .75rem;
  color: var(--on-gold-secondary);
}
.pc-desc { font-size: .8rem; color: var(--on-gold-secondary); line-height: 1.6; }
.pc-feat {
  list-style: none;
  display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem;
}
.pc-feat li {
  font-size: .8rem; color: var(--on-gold-secondary);
  display: flex; gap: .65rem; align-items: flex-start;
}
.pc-feat li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--on-gold-primary);
  flex-shrink: 0; margin-top: .45em;
}
.btn-pc {
  margin-top: auto; padding: .85rem 1.5rem;
  font-weight: 700; font-size: .8rem; letter-spacing: .5px;
  border: 1.5px solid rgba(26,14,0,.4);
  color: var(--on-gold-primary);
  background: transparent; cursor: pointer; font-family: var(--fs);
  transition: background .25s, color .25s, border-color .25s;
}
.btn-pc:hover {
  background: var(--on-gold-primary); color: var(--gold);
  border-color: var(--on-gold-primary);
}

/* ── FAQ — bg paper ─────────────────────────────────────────── */
.faq { border-bottom: 1px solid var(--line); background: var(--paper); }
.faq-header {
  padding: 3rem 2.5rem; border-bottom: 1px solid var(--line);
}
.faq-header h2 {
  font-family: var(--fe);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 400; letter-spacing: -.02em; color: var(--ink);
}
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; background: none; border: none;
  font-family: var(--fs); font-size: .9rem; font-weight: 700;
  padding: 1.5rem 2.5rem; text-align: left; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--ink); letter-spacing: -.01em;
  transition: background .2s;
}
.faq-q:hover { background: var(--off); }
.faq-plus {
  font-size: 1.4rem; font-weight: 300;
  color: var(--gold);
  transition: transform .35s var(--ease-out); flex-shrink: 0;
}
.faq-q.open .faq-plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease-out); }
.faq-a.open { max-height: 240px; }
.faq-a p {
  padding: .25rem 2.5rem 1.75rem;
  font-size: .83rem; color: var(--muted); line-height: 1.75;
}

/* ── CTA BIG — bg #0D0D0D, parallax ────────────────────────── */
.cta-big {
  min-height: 80vh;
  padding: 8rem 2.5rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
  border-bottom: 1px solid rgba(245,242,236,.08);
  position: relative; overflow: hidden;
  color: var(--on-ink-primary);
}
.cta-big-bg {
  position: absolute; inset: -30%;
  background-image: url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=1600&q=50');
  background-size: cover; background-position: center;
  background-attachment: fixed;
  filter: grayscale(60%) brightness(.22) contrast(1.2);
  will-change: transform;
}
.cta-big-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(13,13,13,.93) 0%, rgba(13,13,13,.85) 100%);
}
.cta-big-grid-deco {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(184,136,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,136,42,.04) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.cta-big-left, .cta-big-right { position: relative; z-index: 2; }
.cta-big h2 {
  font-family: var(--fe);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400; line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--on-ink-primary);
}
.cta-big h2 em { color: var(--gold-pale); font-style: italic; }
.cta-big-right {
  display: flex; flex-direction: column;
  gap: 1.5rem; justify-content: center;
}
.cta-big p {
  font-size: .9rem; color: var(--on-ink-secondary);
  line-height: 1.75; max-width: 380px;
}
.cta-big-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-wpp-big {
  display: inline-flex; align-items: center; gap: .7rem;
  background: #25D366; color: #fff;
  padding: .9rem 2rem; font-weight: 700;
  font-size: .85rem; letter-spacing: .5px;
  transition: opacity .2s, transform .2s;
}
.btn-wpp-big:hover { opacity: .88; transform: translateY(-2px); }
.btn-orcamento {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1.5px solid rgba(184,136,42,.45);
  color: var(--gold-pale); padding: .9rem 2rem;
  font-size: .85rem; font-weight: 600; letter-spacing: .5px;
  transition: border-color .25s, color .25s;
}
.btn-orcamento:hover { border-color: var(--gold2); color: var(--gold2); }
.cta-big-trust {
  display: flex; gap: 2rem; padding-top: 1rem;
  border-top: 1px solid rgba(245,242,236,.07); flex-wrap: wrap;
}
.cbt {
  font-size: .68rem; color: var(--on-ink-dim);
  letter-spacing: .5px; font-family: var(--fm);
}

/* ── CONTACT — esquerda #0D0D0D, direita paper ──────────────── */
.contact {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.contact-l {
  padding: 5rem 2.5rem;
  border-right: 1px solid rgba(245,242,236,.08);
  display: flex; flex-direction: column; gap: 2rem;
  background: var(--ink);
  position: relative; overflow: hidden;
}
.contact-l::before {
  content: ''; position: absolute;
  bottom: -5rem; left: -5rem;
  width: 300px; height: 300px; border-radius: 50%;
  border: 1px solid rgba(43,191,170,.06); pointer-events: none;
}
.contact-l::after {
  content: ''; position: absolute;
  bottom: -2rem; left: -2rem;
  width: 150px; height: 150px; border-radius: 50%;
  border: 1px solid rgba(43,191,170,.1); pointer-events: none;
}
.contact-l h2 {
  font-family: var(--fe);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 400; letter-spacing: -.02em;
  color: var(--on-ink-primary);
}
.contact-item { display: flex; gap: 1rem; align-items: flex-start; }
.ci-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal2); flex-shrink: 0; margin-top: .55em;
}
.ci-info h4 {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--on-ink-dim); margin-bottom: .2rem;
}
.ci-info a {
  font-size: .9rem; color: var(--teal2); font-weight: 500;
  transition: color .2s;
}
.ci-info a:hover { color: var(--on-ink-primary); }
.ci-info p { font-size: .9rem; color: var(--on-ink-secondary); }
.trust-row {
  display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1rem;
  border-top: 1px solid rgba(245,242,236,.08);
}
.tr-badge {
  font-family: var(--fm); font-size: .6rem;
  letter-spacing: .5px; text-transform: uppercase;
  border: 1px solid rgba(245,242,236,.12);
  padding: .3rem .7rem; color: var(--on-ink-dim);
}
.contact-r { padding: 5rem 2.5rem; background: var(--paper); }
.contact-r h3 {
  font-size: 1rem; font-weight: 700;
  letter-spacing: -.01em; margin-bottom: 2rem; color: var(--ink);
}
.field { margin-bottom: 1.25rem; }
.field label {
  display: block; font-size: .68rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dim); margin-bottom: .5rem;
}
.field input, .field select, .field textarea {
  width: 100%; background: transparent;
  border: none; border-bottom: 1.5px solid var(--line);
  padding: .7rem 0; font-family: var(--fs);
  font-size: .9rem; color: var(--ink);
  transition: border-color .25s; outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); }
.field textarea { resize: vertical; min-height: 90px; }
.field select { cursor: pointer; appearance: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.btn-send {
  margin-top: 1rem; width: 100%; padding: 1rem;
  background: var(--ink); color: var(--on-ink-primary);
  border: none; font-family: var(--fs); font-weight: 700;
  font-size: .85rem; letter-spacing: 1px; cursor: pointer;
  position: relative; overflow: hidden;
  transition: background .01s;
}
.btn-send::before {
  content: ''; position: absolute; inset: 0;
  background: var(--teal);
  transform: translateX(-101%);
  transition: transform .4s var(--ease-out);
}
.btn-send:hover::before { transform: translateX(0); }
.btn-send span { position: relative; z-index: 1; }

/* ── FOOTER — bg #0D0D0D ────────────────────────────────────── */
.footer-grid {
  padding: 3.5rem 2.5rem;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2rem; border-bottom: 1px solid rgba(245,242,236,.07);
  background: var(--ink);
}
.footer-brand .sig {
  font-family: var(--fe); font-size: 1.3rem;
  font-style: italic; color: var(--on-ink-primary);
}
.footer-brand p {
  font-size: .78rem; color: var(--on-ink-dim);
  margin-top: .75rem; max-width: 250px; line-height: 1.65;
}
.footer-gold-line {
  width: 32px; height: 2px; background: var(--gold); margin: 1rem 0;
}
.footer-col h5 {
  font-size: .63rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--on-ink-dim); margin-bottom: 1rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.footer-col ul a {
  font-size: .82rem; color: var(--on-ink-secondary);
  transition: color .2s, padding-left .2s;
}
.footer-col ul a:hover { color: var(--on-ink-primary); padding-left: 4px; }
.footer-bottom {
  padding: 1.25rem 2.5rem;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .7rem; color: var(--on-ink-dim);
  font-family: var(--fm); background: var(--ink);
}
.footer-badges { display: flex; gap: .5rem; }
.fb {
  border: 1px solid rgba(245,242,236,.1);
  padding: .2rem .5rem; font-size: .58px; letter-spacing: .5px;
  color: var(--on-ink-dim);
}

/* ── STICKY WPP ─────────────────────────────────────────────── */
.sticky-wpp {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 99;
  display: flex; align-items: center; gap: .6rem;
  background: #25D366; color: #fff;
  padding: .8rem 1.5rem; font-weight: 700;
  font-size: .78rem; letter-spacing: .5px;
  box-shadow: 0 4px 24px rgba(37,211,102,.35);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.sticky-wpp:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(37,211,102,.45); }
.wpp-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff; animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.6)}
}

/* ── SCROLL REVEAL ──────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* ── CURSOR CUSTOM ──────────────────────────────────────────── */
@media (hover: hover) {
  body { cursor: none; }
  .cursor-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold);
    position: fixed; top: 0; left: 0; pointer-events: none;
    z-index: 9999; transition: transform .1s, background .3s;
    transform: translate(-50%,-50%);
  }
  .cursor-ring {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid rgba(184,136,42,.5);
    position: fixed; top: 0; left: 0; pointer-events: none;
    z-index: 9998;
    transition: transform .18s var(--ease-out), width .3s, height .3s, border-color .3s;
    transform: translate(-50%,-50%);
  }
  body.hovering .cursor-ring { width: 52px; height: 52px; border-color: rgba(43,191,170,.6); }
  body.hovering .cursor-dot { background: var(--teal2); transform: translate(-50%,-50%) scale(1.5); }
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 100svh; }
  .hero-r { display: none; }
  .hero-l { padding: 7rem 1.5rem 4rem; }
  .manifesto { grid-template-columns: 1fr; gap: 1.5rem; min-height: auto; padding: 5rem 1.5rem; }
  .srv-grid { grid-template-columns: 1fr 1fr; }
  .srv-item { border-bottom: 1px solid rgba(245,242,236,.07); }
  .work-item { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .wi-idx, .wi-impact { display: none; }
  .process { grid-template-columns: 1fr; min-height: auto; padding: 5rem 1.5rem; }
  .voice-grid, .pricing-grid, .contact, .faq-grid { grid-template-columns: 1fr; }
  .vcard { border-right: none; border-bottom: 1px solid var(--line); }
  .pcard { border-right: none; border-bottom: 1px solid rgba(26,14,0,.15); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-big { grid-template-columns: 1fr; padding: 5rem 1.5rem; min-height: auto; }
  .nav-r a:not(.nav-wpp) { display: none; }
  .nav-hamburger { display: flex; }
  .parallax-divider-bg, .cta-big-bg, .manifesto-bg { background-attachment: scroll; }
}
@media (max-width: 600px) {
  .srv-grid, .footer-grid { grid-template-columns: 1fr; }
  .hero-h1 { font-size: 2.4rem; }
  .field-row { grid-template-columns: 1fr; }
  .cta-big-btns { flex-direction: column; }
  .footer-bottom { flex-direction: column; gap: .75rem; text-align: center; }
  .work-item { grid-template-columns: 1fr; }
  .sticky-wpp { bottom: 1rem; right: 1rem; padding: .65rem 1rem; font-size: .75rem; }
  .parallax-divider { height: 320px; }
}

/* ── PRODUTO DESTAQUE (VALLI Obras) ─────────────────────────── */
.produto-destaque {
  background: var(--ink);
  border-bottom: 3px solid rgba(184,136,42,.2);
  position: relative; overflow: hidden;
}
.produto-destaque::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 100% 50%, rgba(30,158,138,.06) 0%, transparent 55%);
  pointer-events: none;
}
.pd-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  padding: 6rem 2.5rem;
  position: relative; z-index: 1;
}
.pd-eyebrow-tag {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--fm); font-size: .63rem;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--teal2); margin-bottom: 1.75rem;
}
.pd-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal2);
  animation: blink 2s ease-in-out infinite;
}
.pd-texto h2 {
  font-family: var(--fe);
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  font-weight: 400; line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--on-ink-primary);
  margin-bottom: 1.5rem;
}
.pd-texto h2 em { color: var(--teal2); font-style: italic; }
.pd-texto p {
  font-size: .88rem; color: var(--on-ink-secondary);
  line-height: 1.8; margin-bottom: 1.75rem;
  padding-left: 1.25rem;
  border-left: 3px solid rgba(30,158,138,.4);
}
.pd-lista {
  list-style: none;
  display: flex; flex-direction: column; gap: .65rem;
  margin-bottom: 2rem;
}
.pd-lista li {
  font-size: .83rem; color: var(--on-ink-secondary);
  display: flex; gap: .65rem; align-items: flex-start;
  line-height: 1.5;
}
.pd-lista li::before {
  content: '✓'; color: var(--teal2);
  font-weight: 700; font-size: .75rem;
  flex-shrink: 0; margin-top: .1em;
}
.pd-btns {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
}

/* Mockup do painel */
.pd-visual { position: relative; }
.pd-mockup {
  background: #0e1120;
  border: 1px solid rgba(76,82,115,.32);
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 4px 40px rgba(0,0,0,.6);
}
.pd-mockup-bar {
  background: #181d3a;
  padding: .65rem 1rem;
  display: flex; align-items: center; gap: .45rem;
  border-bottom: 1px solid rgba(180,185,217,.07);
}
.pdot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pdot-r { background: #ff5f57; }
.pdot-y { background: #febc2e; }
.pdot-g { background: #28c840; }
.pd-mockup-title {
  font-family: var(--fm); font-size: .56rem;
  color: #6b7194; margin-left: .5rem; letter-spacing: .5px;
}
.pd-mockup-body { padding: 1.25rem; }
.pd-kpi-row {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: rgba(180,185,217,.07);
  border-radius: 4px; overflow: hidden;
  margin-bottom: 1.25rem;
}
.pd-kpi {
  background: #111840; padding: .85rem .75rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.pd-kpi-lbl {
  font-family: var(--fm); font-size: .5rem;
  color: #6b7194; letter-spacing: .5px;
}
.pd-kpi-val {
  font-family: var(--fe); font-size: 1.15rem;
  color: #F2F2F2; line-height: 1;
}
.pd-kpi-ok { color: #34d399; }
.pd-bar-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; }
.pd-bar-item { display: flex; flex-direction: column; gap: .3rem; }
.pd-bar-label {
  display: flex; justify-content: space-between;
  font-size: .68rem; color: #B4B9D9; font-weight: 600;
}
.pd-bar-pct { font-family: var(--fm); font-size: .6rem; color: #6b7194; }
.pd-pct-warn { color: #f59e0b; }
.pd-bar-bg {
  height: 4px; background: rgba(76,82,115,.32);
  border-radius: 99px; overflow: hidden;
}
.pd-bar-fill {
  height: 100%; border-radius: 99px;
  transition: width 1.2s cubic-bezier(.16,1,.3,1);
}
.pd-bar-ok   { background: linear-gradient(90deg, #2bb87a, #34d399); }
.pd-bar-warn { background: linear-gradient(90deg, #d97706, #f59e0b); }
.pd-badge-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.pd-badge {
  font-family: var(--fm); font-size: .54rem;
  letter-spacing: .5px; color: #6b7194;
  border: 1px solid rgba(76,82,115,.32);
  padding: .2rem .55rem; border-radius: 3px;
}
.pd-badge-ok { color: #34d399; border-color: rgba(52,211,153,.2); }

/* Mobile .pd-content */
@media (max-width: 960px) {
  .pd-content {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 5rem 1.5rem;
  }
  .pd-visual { display: none; }
}

/* ── AJUSTE: .mo-wpp (mobile overlay WhatsApp) ──────────────── */
.mo-wpp {
  color: #25D366 !important;
  font-style: normal !important;
  font-family: var(--fm) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}

/* ── AJUSTE: footer h3/h5 sem mudança visual ────────────────── */
.footer-col h3 {
  font-size: .63rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--on-ink-dim); margin-bottom: 1rem;
  font-family: var(--fs);
}


/* ── CASES ──────────────────────────────────────────────────── */
.cases {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* Cabeçalho */
.cases-header {
  padding: 4rem 2.5rem 3rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem; align-items: end;
  border-bottom: 1px solid var(--line);
}
.cases-eyebrow {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--fm); font-size: .63rem;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--dim); margin-bottom: 1rem;
}
.cases-eyebrow-line {
  width: 24px; height: 1px; background: var(--gold); flex-shrink: 0;
}
.cases-h2 {
  font-family: var(--fe);
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  font-weight: 400; line-height: 1;
  letter-spacing: -.03em; color: var(--ink);
}
.cases-h2 em { color: var(--teal); font-style: italic; }
.cases-sub {
  font-size: .88rem; color: var(--muted);
  line-height: 1.8; align-self: end;
}

/* Item de case */
.case-item {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.case-item-rev { direction: rtl; }
.case-item-rev > * { direction: ltr; }

/* Coluna visual */
.case-visual {
  position: relative; overflow: hidden;
  background: var(--ink);
  min-height: 420px;
}
.case-img-wrap {
  position: absolute; inset: 0;
  transition: opacity .5s var(--ease-out);
}
.case-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  display: block;
}
/* imagem "antes" fica escondida por padrão */
.case-img-before {
  opacity: 0;
}
/* ao hover no case inteiro, troca para "antes" */
.case-item:hover .case-img-before { opacity: 1; }
.case-item:hover .case-img-wrap:not(.case-img-before) { opacity: 0; }

/* badge antes/depois */
.case-img-badge {
  position: absolute; bottom: 1rem; left: 1rem;
  font-family: var(--fm); font-size: .58rem;
  letter-spacing: 1.5px; text-transform: uppercase;
  background: var(--teal); color: #fff;
  padding: .25rem .65rem; border-radius: 2px;
}
.case-img-badge-before {
  background: var(--ink);
  border: 1px solid rgba(245,242,236,.2);
}

/* Coluna info */
.case-info {
  padding: 3.5rem 3rem;
  display: flex; flex-direction: column;
  gap: 1.25rem; background: var(--paper);
  transition: background .3s;
}
.case-item:hover .case-info { background: var(--off); }

.case-tag {
  font-family: var(--fm); font-size: .58rem;
  letter-spacing: 1.5px; text-transform: uppercase;
  border: 1px solid var(--line); padding: .2rem .65rem;
  color: var(--gold); border-color: rgba(184,136,42,.3);
  align-self: flex-start;
}
.case-tag-teal { color: var(--teal); border-color: rgba(30,158,138,.3); }

.case-info h3 {
  font-family: var(--fe);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  font-weight: 400; line-height: 1.15;
  letter-spacing: -.02em; color: var(--ink);
}
.case-problema, .case-solucao {
  font-size: .82rem; color: var(--muted);
  line-height: 1.75;
}
.case-problema strong,
.case-solucao strong { color: var(--ink); font-weight: 700; }

/* Métricas */
.case-metrics {
  display: flex; gap: 0;
  border: 1px solid var(--line);
  border-radius: 3px; overflow: hidden;
  margin: .25rem 0;
}
.case-metric {
  flex: 1; padding: 1rem .75rem;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .2rem;
}
.case-metric:last-child { border-right: none; }
.cm-val {
  font-family: var(--fe);
  font-size: 1.6rem; font-weight: 400;
  line-height: 1; color: var(--ink);
}
.cm-val-ok   { color: var(--teal); }
.cm-val-gold { color: var(--gold); }
.cm-lbl {
  font-family: var(--fm); font-size: .58rem;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--dim);
}

/* Depoimento */
.case-quote {
  font-family: var(--fe); font-size: .92rem;
  font-style: italic; line-height: 1.65;
  color: var(--muted);
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
  margin-top: auto;
}
.case-quote footer {
  margin-top: .5rem;
}
.case-quote cite {
  font-family: var(--fm); font-size: .62rem;
  letter-spacing: .5px; font-style: normal;
  color: var(--dim);
}

/* CTA inline */
.cases-cta {
  padding: 4rem 2.5rem;
  display: flex; align-items: center;
  justify-content: space-between; gap: 2rem;
  flex-wrap: wrap;
  background: var(--ink);
}
.cases-cta p {
  font-family: var(--fe);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 400; font-style: italic;
  color: var(--on-ink-secondary);
  max-width: 420px;
}

/* ── Responsivo ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  .cases-header { grid-template-columns: 1fr; gap: 1.5rem; padding: 3rem 1.5rem 2rem; }
  .case-item,
  .case-item-rev { grid-template-columns: 1fr; direction: ltr; }
  .case-visual { min-height: 260px; }
  .case-info { padding: 2rem 1.5rem; }
  .cases-cta { padding: 3rem 1.5rem; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .case-metrics { flex-direction: column; }
  .case-metric { border-right: none; border-bottom: 1px solid var(--line); }
  .case-metric:last-child { border-bottom: none; }
}