/* ==================================================
   TOKENS — EDITAR cores/identidade aqui
================================================== */
:root{
  --bg: #0d0d0d;
  --bg-alt: #141414;
  --bg-alt-2: #1a1a1a;
  --bg-alt-3: #212121;
  --paper: #ffffff;
  --paper-dim: #d9d9d9;
  --muted: #7a7a7a;
  --gold: #ffffff;
  --gold-strong: #d9d9d9;
  --gold-dim: rgba(255,255,255,0.14);
  --sage: #7a7a7a;
  --sage-dim: rgba(122,122,122,0.14);
  --rose: #5c5c5c;
  --line: rgba(255,255,255,0.09);
  --line-strong: rgba(255,255,255,0.18);
  --radius: 18px;
  --radius-sm: 10px;
  --maxw: 1180px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--bg);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* grain premium overlay */
body::before{
  content:"";
  position: fixed;
  inset:0;
  z-index: 2;
  pointer-events:none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--paper);
  margin: 0 0 0.5em;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
p{ margin: 0 0 1em; color: var(--paper-dim); }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
button{ font-family: inherit; }
ul{ margin:0; padding:0; list-style:none; }

.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom: 20px;
}
.eyebrow::before{ content:""; width: 22px; height: 1px; background: var(--gold); display:inline-block; }

.section{ padding: 128px 0; position:relative; }
.section-alt{ background: var(--bg-alt); }
@media (max-width: 760px){ .section{ padding: 76px 0; } }

.section-head{ max-width: 660px; }
.section-head h2{ font-size: clamp(28px, 3.6vw, 42px); }
.section-head.center{ margin: 0 auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head.center .eyebrow::before{ display:none; }

/* ==================================================
   BUTTONS
================================================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 16px 30px; border-radius: 999px;
  font-weight: 600; font-size: 15px; border: 1px solid transparent;
  cursor:pointer; position:relative; isolation:isolate;
  transition: transform .3s var(--ease), background .25s ease, border-color .25s ease, color .25s ease, box-shadow .3s ease;
  white-space: nowrap;
}
.btn-primary{ background: var(--gold); color: #141414; box-shadow: 0 8px 24px -8px rgba(255,255,255,0.3); }
.btn-primary:hover{ background: var(--gold-strong); box-shadow: 0 14px 36px -8px rgba(255,255,255,0.45); }
.btn-primary:active{ transform: scale(.97); box-shadow: 0 6px 16px -6px rgba(255,255,255,0.3); }
.btn-ghost{ background: rgba(255,255,255,0.03); border-color: var(--line-strong); color: var(--paper); backdrop-filter: blur(6px); }
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold-strong); background: rgba(255,255,255,0.06); }
.btn-ghost:active{ transform: scale(.97); }
.btn-sm{ padding: 13px 22px; font-size: 13.5px; }
.btn svg{ width:16px; height:16px; flex-shrink:0; transition: transform .3s var(--ease); }
.btn:hover svg{ transform: translateX(2px); }
.magnetic{ will-change: transform; }
:focus-visible{ outline: 1.5px solid var(--gold-strong); outline-offset: 3px; }

/* ==================================================
   STAMP (assinatura de carimbo, preservada)
================================================== */
.stamp{
  --stamp-color: var(--gold);
  display:inline-flex; align-items:center; justify-content:center;
  width: 64px; height: 64px; border-radius: 50%;
  border: 1.5px dashed var(--stamp-color); color: var(--stamp-color);
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.04em;
  text-align:center; flex-shrink:0; position:relative; background: var(--bg);
}
.stamp::before{ content:""; position:absolute; inset:6px; border-radius:50%; border: 1px solid var(--stamp-color); opacity:0.5; }
.stamp-badge{
  position:absolute; top:-16px; right:22px; width:60px; height:60px; font-size: 8.5px;
  z-index:3; transform: rotate(-8deg); text-transform:uppercase;
}

/* ==================================================
   HEADER
================================================== */
header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  padding: 22px 0; background: transparent;
  transition: background .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
header.scrolled{
  background: rgba(13,13,13,0.82); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line); padding: 14px 0;
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.logo span{ color: var(--gold); }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{ font-size: 14px; color: var(--paper-dim); transition: color .2s ease; position:relative; }
.nav-links-cta{ display:none; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background: var(--gold); transition: width .25s var(--ease); }
.nav-links a:hover{ color: var(--paper); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:none; color: var(--paper); cursor:pointer; padding: 6px; }
.nav-toggle svg{ width:24px; height:24px; }

@media (max-width: 860px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width: min(80vw, 320px);
    background: var(--bg-alt-2); flex-direction:column; align-items:flex-start; justify-content:center;
    gap: 28px; padding: 40px; transform: translateX(100%); transition: transform .35s var(--ease);
    border-left: 1px solid var(--line);
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-links a{ font-size: 19px; }
  .nav-links-cta{ display:inline-flex; margin-top:6px; font-size:15px !important; }
  .nav-cta > .btn{ display:none; }
  .nav-toggle{ display:inline-flex; z-index: 110; }
}

/* ==================================================
   HERO
================================================== */
.hero{
  min-height: 100svh; display:flex; align-items:center;
  padding-top: 130px; padding-bottom: 60px; position:relative; overflow:hidden;
}
.hero-glow{ position:absolute; border-radius:50%; filter: blur(90px); pointer-events:none; z-index:0; }
.hero-glow.g1{ width: 560px; height:560px; top:-16%; right:-8%; background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 68%); }
.hero-glow.g2{ width: 420px; height:420px; bottom:-10%; left:-8%; background: radial-gradient(circle, rgba(122,122,122,0.12), transparent 70%); }
.hero-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center; position:relative; z-index:1; }
.hero-kicker{ display:flex; align-items:center; gap:10px; }
.hero h1{ font-size: clamp(36px, 4.8vw, 62px); max-width: 600px; margin-top: 4px; }
.hero h1 em{ font-style: italic; color: var(--gold-strong); }
.hero-sub{ font-size: 18.5px; max-width: 480px; color: var(--paper-dim); }
.hero-ctas{ display:flex; gap:16px; margin-top: 34px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap: 26px; margin-top: 46px; flex-wrap:wrap; }
.hero-meta-item{ display:flex; align-items:center; gap:9px; }
.hero-meta-item svg{ width:17px; height:17px; color: var(--sage); flex-shrink:0; }
.hero-meta-item span{ font-size: 13px; color: var(--muted); }

.hero-fade{ opacity:0; transform: translateY(16px); animation: hero-in .8s var(--ease) forwards; }
@keyframes hero-in{ to{ opacity:1; transform:none; } }
.hero .reveal{ transform: translateY(26px) scale(.97); transition-duration: .9s; }

/* device stack — signature premium */
.device-stack{ position:relative; perspective: 1400px; animation: device-float 7s ease-in-out infinite; }
.device-tilt{ transform-style: preserve-3d; transition: transform .4s var(--ease); }
.device-shadow{
  position:absolute; left:12%; right:12%; bottom:-30px; height: 46px; border-radius:50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.55), transparent 72%);
  animation: shadow-pulse 7s ease-in-out infinite; z-index:-1;
}
@keyframes device-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-9px); } }
@keyframes shadow-pulse{ 0%,100%{ transform: scale(1); opacity:.55; } 50%{ transform: scale(.9); opacity:.4; } }
.laptop{
  background: var(--bg-alt-2); border: 1px solid var(--line-strong); border-radius: var(--radius);
  overflow:hidden; box-shadow: 0 50px 100px -30px rgba(0,0,0,0.65), 0 0 0 1px rgba(244,244,244,0.02) inset;
}
.laptop-bar{ display:flex; align-items:center; gap:8px; padding: 13px 18px; background: var(--bg-alt-3); border-bottom: 1px solid var(--line); }
.laptop-dot{ width:9px; height:9px; border-radius:50%; background: var(--line-strong); }
.laptop-url{ margin-left: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); background: var(--bg); padding: 4px 12px; border-radius: 6px; flex:1; }
.laptop-body{ padding: 30px; }
.lp-line{ height: 11px; border-radius: 4px; background: linear-gradient(90deg, var(--line-strong), transparent); margin-bottom: 13px; }
.lp-line.w70{ width:70%; } .lp-line.w45{ width:45%; } .lp-line.w30{ width:30%; }
.lp-cards{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.lp-card{ background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 15px; }
.lp-card .lp-line{ margin-bottom:8px; }

.phone-float{
  position:absolute; width: 170px; bottom: -46px; right: -32px;
  background: var(--bg-alt-3); border: 1px solid var(--line-strong); border-radius: 22px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6); overflow:hidden;
  animation: float-y 6s ease-in-out infinite;
}
.phone-notch{ height:18px; display:flex; align-items:center; justify-content:center; }
.phone-notch::before{ content:""; width:44px; height:5px; border-radius:4px; background: var(--bg); }
.phone-chat{ padding: 12px; display:flex; flex-direction:column; gap:8px; }
.chat-bubble{ font-family: var(--font-body); font-size: 10.5px; padding: 8px 11px; border-radius: 12px; max-width: 85%; line-height:1.35; }
.chat-bubble.in{ background: var(--bg-alt); color: var(--paper-dim); border-bottom-left-radius:2px; }
.chat-bubble.out{ background: var(--sage); color: #141414; align-self:flex-end; border-bottom-right-radius:2px; }

.chip-float{
  position:absolute; display:flex; align-items:center; gap:8px;
  background: rgba(20,20,20,0.85); backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 9px 16px; font-family: var(--font-mono); font-size: 11px; color: var(--paper);
  box-shadow: 0 20px 40px -14px rgba(0,0,0,0.55);
  animation: float-y 5.2s ease-in-out infinite;
}
.chip-float svg{ width:14px; height:14px; color: var(--sage); }
.chip-float.c1{ top: 8%; left: -8%; animation-delay: .3s; }
.chip-float.c2{ top: 48%; right: -12%; animation-delay: 1.1s; }
@keyframes float-y{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .device-tilt{ transform:none !important; }
  .phone-float{ width: 130px; right: -10px; bottom:-30px; }
  .chip-float{ display:none; }
}

/* ==================================================
   QUOTE / POSICIONAMENTO
================================================== */
.quote-block{ text-align:center; max-width: 760px; margin: 0 auto; }
.quote-block .eyebrow{ justify-content:center; }
.quote-block .eyebrow::before{ display:none; }
.quote-block blockquote{
  font-family: var(--font-display); font-style: italic; font-weight:500;
  font-size: clamp(24px, 3.2vw, 36px); color: var(--paper); margin: 0 0 18px; line-height:1.35;
}
.quote-block .underline{ width: 64px; height: 2px; background: var(--gold); margin: 0 auto 28px; }
.quote-block p.lede{ font-size: 16px; max-width: 540px; margin: 0 auto; }

/* funil de posicionamento */
.funil{ display:grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 56px; position:relative; }
.funil-item{ text-align:center; padding: 0 18px; position:relative; }
.funil-num{
  width: 52px; height:52px; border-radius:50%; margin: 0 auto 18px; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size: 13px; color: var(--gold); border: 1px solid var(--line-strong); background: var(--bg-alt);
  position:relative; z-index:1;
}
.funil-item h4{ font-size: 16px; margin-bottom: 6px; }
.funil-item p{ font-size: 13.5px; margin:0; }
.funil-line{ position:absolute; top: 26px; left: 50%; width: 0%; height: 1px; background: var(--gold); z-index:0; transition: width .8s var(--ease) .3s; }
.funil-item.is-visible .funil-line{ width: 100%; }
.funil-item:last-child .funil-line{ display:none; }
.funil-item:nth-child(1){ transition-delay: 0s; }
.funil-item:nth-child(2){ transition-delay: .12s; }
.funil-item:nth-child(3){ transition-delay: .24s; }
.funil-item:nth-child(4){ transition-delay: .36s; }
@media (max-width: 800px){
  .funil{ grid-template-columns: 1fr; gap: 32px; }
  .funil-line{ display:none; }
}

/* ==================================================
   ANTES / DEPOIS
================================================== */
.transform-grid{ display:grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items:stretch; margin-top: 48px; }
.transform-arrow{ display:flex; align-items:center; justify-content:center; color: var(--gold); position:relative; min-width: 64px; }
.transform-arrow::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background: var(--line-strong); }
.transform-arrow::after{
  content:""; position:absolute; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%;
  background: var(--gold-strong); box-shadow: 0 0 12px rgba(255,255,255,0.6); left:-6%; opacity:0;
  animation: travel-x 2.8s ease-in-out infinite;
}
@keyframes travel-x{ 0%{ left:-6%; opacity:0; } 14%{ opacity:1; } 86%{ opacity:1; } 100%{ left:106%; opacity:0; } }
.transform-badge{
  position:relative; z-index:1; width:46px; height:46px; border-radius:50%; border: 1px solid var(--gold);
  display:flex; align-items:center; justify-content:center; background: var(--bg-alt);
}
.transform-arrow svg{ width:20px; height:20px; }
.transform-card{ border-radius: var(--radius); padding: 34px; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s ease; }
.transform-card:hover{ transform: translateY(-5px); box-shadow: 0 24px 50px -26px rgba(0,0,0,0.5); }
.transform-card.antes{ background: var(--bg-alt); filter: saturate(0.7); opacity: 0.82; }
.transform-card.depois{ background: linear-gradient(160deg, var(--bg-alt-3), var(--bg-alt)); border-color: var(--gold); }
.transform-tag{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom: 20px; display:block; }
.transform-card.antes .transform-tag{ color: var(--muted); }
.transform-card.depois .transform-tag{ color: var(--gold); }
.transform-card ul{ display:flex; flex-direction:column; gap: 16px; }
.transform-card li{ display:flex; gap:12px; align-items:flex-start; font-size: 14.5px; color: var(--paper-dim); }
.transform-card li svg{ width:16px; height:16px; flex-shrink:0; margin-top:3px; }
.transform-card.antes li svg{ color: var(--rose); }
.transform-card.depois li svg{ color: var(--sage); }
@media (max-width: 760px){
  .transform-grid{ grid-template-columns: 1fr; }
  .transform-arrow{ transform: rotate(90deg); padding: 4px 0; }
}

/* ==================================================
   SERVIÇOS
================================================== */
.servico-destaque{
  background: linear-gradient(135deg, var(--bg-alt-3), var(--bg-alt));
  border: 1px solid var(--gold); border-radius: var(--radius);
  padding: 44px; display:grid; grid-template-columns: 1fr auto; gap: 32px; align-items:center;
  margin-top: 44px; position:relative; overflow:hidden;
}
.servico-destaque::before{
  content:""; position:absolute; top:-40%; right:-10%; width: 320px; height:320px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%); pointer-events:none;
}
.servico-destaque h3{ font-size: 30px; }
.servicos-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.servicos-grid .servico-card:nth-child(3n+1){ transition-delay: 0s; }
.servicos-grid .servico-card:nth-child(3n+2){ transition-delay: .08s; }
.servicos-grid .servico-card:nth-child(3n+3){ transition-delay: .16s; }
.servico-card{
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 28px; transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.servico-card:hover{ border-color: var(--line-strong); transform: translateY(-6px) scale(1.012); box-shadow: 0 24px 48px -20px rgba(0,0,0,0.5); }
.servico-card:active{ transform: translateY(-2px) scale(1); }
.servico-card .icon-wrap{
  width: 42px; height:42px; border-radius: 11px; background: var(--gold-dim);
  display:flex; align-items:center; justify-content:center; margin-bottom: 18px; transition: transform .3s var(--ease);
}
.servico-card:hover .icon-wrap{ transform: scale(1.08) rotate(-4deg); }
.servico-card .icon-wrap svg{ width:20px; height:20px; color: var(--gold); }
.servico-card h4{ font-size: 16.5px; margin-bottom: 7px; }
.servico-card p{ font-size: 14px; margin-bottom: 0; }
.servico-card .beneficio{ display:block; margin-top: 12px; font-size: 12px; color: var(--sage); font-family: var(--font-mono); }
@media (max-width: 900px){ .servicos-grid{ grid-template-columns: repeat(2,1fr); } .servico-destaque{ grid-template-columns: 1fr; } }
@media (max-width: 600px){ .servicos-grid{ grid-template-columns: 1fr; } }

/* ==================================================
   PORTFÓLIO — CASES
================================================== */
.cases{ display:flex; flex-direction:column; gap: 28px; margin-top: 40px; }
.case{
  display:flex; flex-wrap:wrap; border: 1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; background: var(--bg-alt); transition: border-color .4s ease, box-shadow .4s ease;
}
.case:hover{ border-color: var(--accent, var(--gold)); box-shadow: 0 34px 70px -28px rgba(0,0,0,0.6); }
.case:active .case-mock{ transform: scale(1.01); }
.case-visual{ flex: 1.15 1 380px; min-width: 340px; }
.case-copy{ flex: 0.85 1 340px; min-width: 300px; }
.case:nth-child(even) .case-visual{ order: 2; }
.case:nth-child(even) .case-copy{ order: 1; }
.case-visual{
  position:relative; padding: 44px; display:flex; align-items:center; justify-content:center;
  background: var(--bg-alt-2);
  overflow:hidden;
}
.case-mock{
  width:100%; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5); overflow:hidden; transition: transform .5s var(--ease);
}
.case:hover .case-mock{ transform: translateY(-10px) scale(1.025); }
.case-mock-bar{ display:flex; gap:6px; padding: 10px 14px; background: var(--bg-alt-3); border-bottom:1px solid var(--line); }
.case-mock-dot{ width:7px; height:7px; border-radius:50%; background: var(--line-strong); }
.case-mock-body{ padding: 22px; }
.case-mock .lp-line{ margin-bottom:10px; }
.case-mock-shot picture{ display:block; }
.case-mock-shot img{ display:block; width:100%; height:auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* mockup de conteúdo real (substitui as barras genéricas) — cor local, cada case pode sobrescrever --accent */
.mock-nav{ display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.mock-nav-logo{ width:18px; height:18px; border-radius:6px; background: var(--accent, var(--gold)); flex-shrink:0; }
.mock-nav-links{ display:flex; gap:10px; }
.mock-nav-links span{ width:24px; height:5px; border-radius:3px; background: var(--line-strong); display:block; }
.mock-nav-cta{ padding: 5px 12px; border-radius:999px; background: var(--accent, var(--gold)); font-size:8px; font-family: var(--font-mono); color: var(--accent-ink, #141414); white-space:nowrap; }

.mock-hero-title{ font-family: var(--font-display); font-size:16px; font-weight:600; color: var(--paper); line-height:1.25; margin-bottom:7px; max-width: 88%; }
.mock-hero-sub{ font-size:9.5px; color: var(--muted); margin-bottom:13px; max-width:82%; line-height:1.5; }
.mock-hero-cta{ display:inline-block; padding:7px 15px; border-radius:999px; background: var(--accent, var(--gold)); color: var(--accent-ink, #141414); font-size:8.5px; font-family: var(--font-mono); }

.mock-media{
  width:100%; height:64px; border-radius:9px; margin-top:16px; border:1px solid var(--line);
  background: linear-gradient(135deg, var(--accent-dim, var(--gold-dim)), var(--sage-dim));
  position:relative;
}
.mock-media::after{
  content:""; position:absolute; inset:0; margin:auto; width:20px; height:20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(244,244,244,0.4)' stroke-width='1.6'><rect x='3' y='5' width='18' height='14' rx='2'/><circle cx='8.5' cy='10' r='1.4'/><path d='M21 16l-5.5-5.5L9 17'/></svg>");
  background-repeat:no-repeat; background-position:center; background-size:contain;
}

.mock-product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.mock-product{ border:1px solid var(--line); border-radius:8px; overflow:hidden; background: var(--bg-alt); }
.mock-product-media{ height:36px; background: linear-gradient(135deg, var(--bg-alt-3), var(--bg-alt-2)); position:relative; }
.mock-product-media::after{
  content:""; position:absolute; inset:0; margin:auto; width:12px; height:12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(244,244,244,0.35)' stroke-width='2'><rect x='3' y='5' width='18' height='14' rx='2'/><circle cx='8.5' cy='10' r='1.4'/><path d='M21 16l-5.5-5.5L9 17'/></svg>");
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
.mock-product-info{ padding:6px 7px; }
.mock-product-info .name{ font-size:7.5px; color: var(--paper-dim); display:block; margin-bottom:2px; }
.mock-product-info .price{ font-size:8px; color: var(--accent, var(--gold)); font-family: var(--font-mono); }

.mock-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.mock-col{ text-align:center; }
.mock-col .ic{ width:22px; height:22px; border-radius:7px; background: var(--accent-dim, var(--gold-dim)); margin:0 auto 6px; display:flex; align-items:center; justify-content:center; }
.mock-col .ic svg{ width:11px; height:11px; color: var(--accent, var(--gold)); }
.mock-col .lbl{ font-size:7.5px; color: var(--paper-dim); }

/* identidades distintas para provar que não usamos um template único */
.case-mock.tema-alva{ --accent:#c9a86a; --accent-ink:#241d0d; --accent-dim: rgba(201,168,106,0.16); }
.case-mock.tema-alva .mock-hero-title{ font-family: var(--font-body); font-weight:800; letter-spacing:-0.01em; }
.case-mock.tema-barbearia{ --accent:#4a8f6c; --accent-ink:#0c1a13; --accent-dim: rgba(74,143,108,0.16); }
.case-mock.tema-barbearia .mock-hero-title{ text-transform:uppercase; font-size:14px; letter-spacing:0.03em; }
.case-mock.tema-restaurante{ --accent:#c65a3d; --accent-ink:#26140c; --accent-dim: rgba(198,90,61,0.16); }
.case-mock.tema-restaurante .mock-hero-title{ font-style:italic; }
.case-copy{ padding: 44px; display:flex; flex-direction:column; justify-content:center; }
.case-copy .tag{ font-family: var(--font-mono); font-size: 11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--gold); margin-bottom: 12px; }
.case-copy h4{ font-size: 22px; margin-bottom: 10px; }
.case-copy p{ font-size: 14.5px; }
.case-copy .objetivo{
  display:flex; gap:8px; font-size: 12.5px; color: var(--sage); font-family: var(--font-mono);
  margin: 2px 0 18px;
}
.case-copy .btn{
  align-self:flex-start; margin-top: 6px; transform: translateY(0); transition: transform .35s var(--ease), background .25s ease, box-shadow .3s ease;
}
.case:hover .case-copy .btn{ transform: translateY(-3px); }
@media (max-width: 860px){
  .case-visual, .case-copy{ flex: 1 1 100%; min-width: 100%; }
  .case:nth-child(even) .case-visual{ order: 1; }
  .case:nth-child(even) .case-copy{ order: 2; }
  .case-visual{ padding: 28px; }
  .case-copy{ padding: 28px; }
}

/* ==================================================
   PROCESSO — linha com preenchimento no scroll
================================================== */
.processo{ position:relative; margin-top: 60px; }
.processo-track{ position:absolute; left: 31px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.processo-track-fill{ position:absolute; left:0; top:0; width:100%; height:0%; background: var(--gold); transition: height .5s var(--ease); }
.processo-item{ display:flex; gap: 26px; padding-bottom: 44px; position:relative; }
.processo-item:last-child{ padding-bottom:0; }
.processo-item .stamp{ width:64px; height:64px; z-index:1; }
.processo-item.is-visible .stamp{ border-color: var(--gold-strong); color: var(--gold-strong); }
.processo-text{ padding-top: 10px; }
.processo-text h4{ font-size: 17.5px; margin-bottom: 7px; }
.processo-text p{ font-size: 14.5px; margin:0; max-width: 480px; }

/* ==================================================
   DIFERENCIAIS
================================================== */
.dif-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 44px; background: var(--line); border-radius: var(--radius); overflow:hidden; }
.dif-grid .dif-item:nth-child(3n+1){ transition-delay: 0s; }
.dif-grid .dif-item:nth-child(3n+2){ transition-delay: .07s; }
.dif-grid .dif-item:nth-child(3n+3){ transition-delay: .14s; }
.dif-item{ background: var(--bg); padding: 30px 28px; transition: background .3s ease; }
.dif-item:hover{ background: var(--bg-alt); }
.dif-item svg{ width:22px; height:22px; color: var(--gold); margin-bottom: 15px; }
.dif-item h4{ font-size: 15.5px; margin-bottom: 7px; }
.dif-item p{ font-size: 13.5px; margin:0; }
@media (max-width: 900px){ .dif-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .dif-grid{ grid-template-columns: 1fr; } }

/* ==================================================
   SOBRE NÓS
================================================== */
.sobre-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 44px; }
.sobre-card{
  display:flex; gap: 22px; align-items:flex-start; padding: 30px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg); transition: transform .35s var(--ease), border-color .3s ease;
}
.sobre-card:hover{ transform: translateY(-4px); border-color: var(--line-strong); }
.sobre-foto{
  width: 76px; height:76px; border-radius: 50%; flex-shrink:0; background: var(--bg-alt-3);
  border: 1px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
}
.sobre-foto svg{ width:30px; height:30px; color: var(--muted); }
.sobre-nome{ font-size: 17px; margin-bottom: 3px; }
.sobre-funcao{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing:0.06em; text-transform:uppercase; color: var(--gold); margin-bottom: 12px; display:block; }
.sobre-desc{ font-size: 14px; margin:0; }
@media (max-width: 760px){ .sobre-grid{ grid-template-columns: 1fr; } }

/* ==================================================
   INVESTIMENTO / MANUTENÇÃO
================================================== */
.manutencao-card{
  margin-top: 24px; border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: 30px 34px; display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap:wrap;
}
.manutencao-card h4{ font-size: 17.5px; margin-bottom:8px; }
.manutencao-card p{ margin:0; font-size:14px; max-width: 520px; }

/* ==================================================
   SEGURANÇA (nota discreta)
================================================== */
.seguranca-note{
  display:flex; gap: 18px; align-items:flex-start; margin-top: 40px; padding: 26px 30px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt);
}
.seguranca-note svg{ width:26px; height:26px; color: var(--sage); flex-shrink:0; margin-top:2px; }
.seguranca-note h4{ font-size:15.5px; margin-bottom:6px; }
.seguranca-note p{ font-size:14px; margin:0; }

/* ==================================================
   FAQ
================================================== */
.faq-list{ margin-top: 40px; border-top: 1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap: 20px;
  background:none; border:none; color: var(--paper); text-align:left; padding: 24px 4px;
  font-size: 16px; font-family: var(--font-body); font-weight: 500; cursor:pointer;
}
.faq-q svg{ width:18px; height:18px; color: var(--gold); flex-shrink:0; transition: transform .3s var(--ease); }
.faq-item.open .faq-q svg{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.faq-a p{ padding: 0 4px 24px; font-size: 14.5px; max-width: 640px; }

/* ==================================================
   CTA FINAL
================================================== */
.cta-final{
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-strong) 100%);
  color: #141414; text-align:center; padding: 110px 24px; position:relative; overflow:hidden;
}
.cta-final .eyebrow{ color: #4a4a4a; justify-content:center; }
.cta-final .eyebrow::before{ background: #4a4a4a; }
.cta-final h2{ color:#141414; font-size: clamp(28px, 4vw, 46px); max-width: 740px; margin: 0 auto 18px; }
.cta-final p{ color:#4a4a4a; font-size: 17px; max-width: 540px; margin: 0 auto 36px; }
.cta-final .btn-primary{ background:#141414; color: var(--paper); box-shadow:none; }
.cta-final .btn-primary:hover{ background:#262626; }
.cta-final .btn-ghost{ border-color: rgba(20,20,20,0.3); color:#141414; background:transparent; }
.cta-final .btn-ghost:hover{ border-color:#141414; background: rgba(20,20,20,0.06); }
.cta-ctas{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ==================================================
   FOOTER
================================================== */
footer{ background: var(--bg-alt); padding: 56px 0 26px; position:relative; z-index:1; }
.footer-top{ display:grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); gap: 32px 48px; align-items:start; }
.footer-brand .logo{ margin-bottom: 12px; }
.footer-brand p{ font-size: 14px; line-height:1.65; max-width: 34ch; color: var(--paper-dim); margin:0; }
.footer-col h5{ font-family: var(--font-mono); font-size: 11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color: var(--muted); margin: 6px 0 12px; }

/* contato — WhatsApp é o canal principal, os demais ficam discretos */
.footer-contact-list{ display:flex; flex-direction:column; align-items:flex-start; }
.footer-link{ display:inline-flex; align-items:center; gap:10px; font-size: 14px; line-height:1.4; color: var(--paper-dim); padding: 6px 0; transition: color .2s ease, transform .25s var(--ease); }
.footer-link svg{ width:15px; height:15px; color: var(--muted); flex-shrink:0; transition: color .2s ease; }
.footer-link:hover{ color: var(--paper); transform: translateX(3px); }
.footer-link:hover svg{ color: var(--paper); }
.footer-link.is-primary{ color: var(--paper); font-weight:600; }
.footer-link.is-primary svg{ color: var(--paper); }
.footer-link.is-primary span{ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--line-strong); transition: text-decoration-color .2s ease; }
.footer-link.is-primary:hover span{ text-decoration-color: var(--paper); }
.footer-email-row{ display:flex; align-items:center; flex-wrap:wrap; gap: 2px 14px; }

/* navegação — 2 colunas fluindo por coluna (3 + 2) */
.footer-nav-grid{ display:grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-template-columns: repeat(2, max-content); column-gap: 40px; }
.footer-nav-grid a{ font-size:14px; line-height:1.4; color: var(--paper-dim); padding: 6px 0; width:fit-content; transition: color .2s ease, transform .25s var(--ease); }
.footer-nav-grid a:hover{ color: var(--paper); transform: translateX(3px); }

/* assinatura — reaproveita o traço curto do .eyebrow */
.footer-signature{ display:flex; align-items:flex-start; gap:14px; font-family: var(--font-display); font-style:italic; font-weight:500; font-size: 16px; line-height:1.45; color: var(--paper-dim); margin: 44px 0 0; }
.footer-signature::before{ content:""; width:22px; height:1px; margin-top:.72em; background: var(--muted); flex-shrink:0; } /* alinha o traço à 1ª linha quando o texto quebra */

.footer-divider{ height:1px; background: var(--line); margin: 20px 0 16px; border:0; }

.footer-bottom{ display:flex; align-items:center; }
.footer-bottom span{ font-size: 11.5px; line-height:1.5; color: var(--muted); letter-spacing:.01em; }

@media (max-width: 760px){
  footer{ padding: 44px 0 calc(24px + env(safe-area-inset-bottom, 0px)); }
  /* marca ocupa a largura toda; contato e navegação dividem a linha de baixo */
  .footer-top{ grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 32px 20px; }
  .footer-brand{ grid-column: 1 / -1; }
  .footer-brand p{ max-width: 36ch; }
  .footer-col h5{ margin: 0 0 6px; }
  .footer-contact-list{ align-items: stretch; }
  .footer-link, .footer-nav-grid a{ padding: 9px 0; width:auto; }
  .footer-nav-grid{ grid-auto-flow: row; grid-template-rows: none; grid-template-columns: 1fr; }
  .footer-email-row{ gap: 0 12px; }
  .footer-signature{ font-size: 15px; margin-top: 36px; }
  .footer-divider{ margin: 18px 0 14px; }
  /* reserva o canto direito para o WhatsApp flutuante */
  .footer-bottom{ padding-right: 64px; }
  .footer-bottom span{ font-size: 11px; }
}

/* ==================================================
   WHATSAPP FLUTUANTE
================================================== */
.wa-float{
  position:fixed; bottom: 26px; right: 26px; width: 58px; height:58px; border-radius:50%;
  background: var(--sage); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.5); z-index: 90; animation: wa-pulse 3.2s ease-in-out infinite;
  transition: transform .25s var(--ease), opacity .3s ease;
}
.wa-float:hover{ transform: scale(1.08); }
.wa-float svg{ width:26px; height:26px; color:#141414; }
.wa-float.is-dim{ opacity:.45; animation:none; }
@keyframes wa-pulse{
  0%,100%{ box-shadow: 0 12px 30px -8px rgba(0,0,0,0.5), 0 0 0 0 rgba(122,122,122,0.4); }
  50%{ box-shadow: 0 12px 30px -8px rgba(0,0,0,0.5), 0 0 0 10px rgba(122,122,122,0); }
}
@media (max-width: 760px){
  .wa-float{ width: 48px; height:48px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: 16px; box-shadow: 0 8px 22px -8px rgba(0,0,0,0.5); }
  .wa-float svg{ width:21px; height:21px; }
}

/* ==================================================
   REVEAL
================================================== */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

.skip-link{
  position:fixed; top:-60px; left:16px; z-index:1000;
  background: var(--gold); color:#141414; padding: 12px 20px; border-radius: 8px;
  font-weight:600; font-size:14px; transition: top .25s var(--ease);
}

/* ==================================================
   WIDGETS (main.js) — badge de disponibilidade,
   botão de copiar e-mail
================================================== */
#status-badge-root{ display:contents; }
.status-badge .status-dot{
  width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink:0;
}
.status-badge .status-dot.is-online{
  background: var(--sage); animation: status-pulse 2s ease-out infinite;
}
@keyframes status-pulse{
  0%{ box-shadow: 0 0 0 0 var(--sage-dim); }
  70%{ box-shadow: 0 0 0 7px rgba(122,122,122,0); }
  100%{ box-shadow: 0 0 0 0 rgba(122,122,122,0); }
}

#copy-email-root{ display:contents; }
.copy-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing:.03em; line-height:1;
  color: var(--muted); background: transparent; border: 1px solid var(--line);
  padding: 6px 10px 6px 8px; border-radius: 999px; cursor:pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.copy-btn svg{ width:12px; height:12px; flex-shrink:0; }
.copy-btn:hover{ border-color: var(--line-strong); color: var(--paper); }
.copy-btn:active{ transform: scale(.97); }
.copy-btn.is-copied{ border-color: var(--paper); color: var(--paper); background: rgba(255,255,255,0.06); }
.skip-link:focus{ top:16px; }