/* ═══════════════════════════════════════
   CLINNO — Design Tokens
═══════════════════════════════════════ */
:root {
  --g:    #20a050; --gl:  #4aba72; --gd:  #1a8a44; --gdd: #146638;
  --g50:  #f0faf4; --g100: #dcf5e7; --g200: #bbebcf;
  --ink:  #0a0a0a; --ink2: #111111; --ink3: #1a1a1a;
  --warm: #f7f4f0; --warm50: #fdfaf6; --warmalt: #faf9f7;
  --warm-stone: #e8e2d9;
  --t1: #1a1a1a;  --t2: #525252;  --t3: #9a9a9a;  --t4: #6b6560;
  --bw:  #ede7e1; --bl: #e2e8f0;
  --ease:  cubic-bezier(0.22,1,0.36,1);
  --ease2: cubic-bezier(0.34,1.56,0.64,1);
  --fast:  250ms; --std: 650ms; --slow: 1200ms;
  --shadow-card: 0 1px 2px rgba(20,15,10,0.04), 0 4px 12px rgba(20,15,10,0.05);
  --shadow-card-hover: 0 2px 4px rgba(20,15,10,0.05), 0 12px 32px rgba(20,15,10,0.1);
  --shadow-hero: 0 32px 80px -20px rgba(0,0,0,0.55), 0 8px 24px -8px rgba(0,0,0,0.25);
  --shadow-medium: 0 16px 48px -12px rgba(0,0,0,0.4), 0 4px 12px -4px rgba(0,0,0,0.2);
  --shadow-green: 0 8px 32px -8px rgba(32,160,80,0.45);
}

/* ═══ Reset ═══ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:5rem; }
body {
  background:var(--warm50);
  color:var(--t1);
  font-family:'Outfit',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-feature-settings:"liga" 1,"kern" 1,"ss01" 1;
  text-rendering:optimizeLegibility;
}
img,svg { display:block; }
button { font-family:inherit; }
::selection { background:var(--g); color:#fff; }

/* ═══ Layout ═══ */
.wrap    { max-width:72rem; margin:0 auto; padding:0 1.5rem; }
.wrap-sm { max-width:52rem; }
.sec     { padding:6rem 1.5rem; }
.sec-sm  { padding:4rem 1.5rem; }
.bg-warm { background:var(--warm); }
.bg-ink  { background:var(--ink); }
.dot-light  { background-image:radial-gradient(rgba(0,0,0,0.055) 1px,transparent 1px); background-size:28px 28px; }
.dot-dark   { background-image:radial-gradient(rgba(255,255,255,0.05) 1px,transparent 1px); background-size:28px 28px; }
.grid-light { background-image:linear-gradient(rgba(0,0,0,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.035) 1px,transparent 1px); background-size:48px 48px; }

/* ═══ Typography ═══ */
.f-inter  { font-family:'Inter',system-ui,sans-serif; }
.text-hero {
  font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(2.1rem,5.5vw,4.75rem);
  letter-spacing:-0.022em;
  line-height:.87;
  font-weight:900;
}
.text-sec  { font-family:'Inter',system-ui,sans-serif; font-size:clamp(1.8rem,4vw,3.5rem);  letter-spacing:-0.022em; line-height:1.04; font-weight:900; }
.text-sec-sm { font-family:'Inter',system-ui,sans-serif; font-size:clamp(1.6rem,3.5vw,3rem); letter-spacing:-0.022em; line-height:1.06; font-weight:900; }

/* Títulos de seção — variante editorial com linha leve embaixo */
.text-sec-editorial { font-family:'Inter',system-ui,sans-serif; font-size:clamp(1.8rem,4vw,3.5rem); letter-spacing:-0.022em; line-height:1.08; font-weight:900; }
.text-sec-editorial em { font-style:italic; font-weight:300; font-family:'Outfit',system-ui,sans-serif; color:rgba(26,26,26,.42); }

/* Eyebrow — sem linha em variantes */
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--gd); margin-bottom:1rem; }
.eyebrow::before { content:''; display:inline-block; width:26px; height:1px; background:var(--g); }
.eyebrow-noline::before { display:none; }
.eyebrow-dot::before { display:none; }
.eyebrow-dot::after { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--g); margin-left:2px; }
.eyebrow-dark { color:var(--gl); }
.eyebrow-dark::before { background:var(--gl); }

.text-gg { background:linear-gradient(135deg,#4aba72 0%,#20a050 55%,#146638 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.tabular { font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* ═══ Buttons ═══ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:14px;
  letter-spacing:-.01em; line-height:1; border:none; cursor:pointer;
  border-radius:10px; padding:12px 22px; text-decoration:none;
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background 150ms ease;
}
.btn-green { background:var(--g); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.18) inset, var(--shadow-green); }
.btn-green:hover { background:var(--gd); transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 16px 36px -10px rgba(32,160,80,.62); }
.btn-green:active { transform:translateY(0) scale(.97); }
.btn-ghost { background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.12); }
.btn-ghost:hover { background:rgba(255,255,255,.11); }
.btn-outline-green { background:transparent; color:var(--g); border:1.5px solid var(--g); border-radius:10px; }
.btn-outline-green:hover { background:var(--g50); transform:translateY(-1.5px); }
.btn-lg { padding:14px 32px; font-size:15px; border-radius:12px; }
.btn-xl { padding:16px 40px; font-size:16px; border-radius:12px; }

/* ═══ Accessibility — WCAG 2.1 AA ═══ */
.skip-nav {
  position:absolute; top:-100%; left:0; z-index:9999;
  background:#20a050; color:#fff; padding:10px 20px; font-weight:700; font-size:14px;
  text-decoration:none; border-radius:0 0 8px 0;
}
.skip-nav:focus { top:0; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:3px solid #20a050;
  outline-offset:3px;
}
.btn:focus-visible { outline:3px solid #1a8a44; outline-offset:3px; box-shadow:0 0 0 6px rgba(32,160,80,.15); }
.faq-btn:focus-visible { outline:2px solid #20a050; outline-offset:2px; border-radius:4px; }

/* ═══ Pills ═══ */
.pill { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.04em; white-space:nowrap; }
.pill-g  { background:rgba(32,160,80,.1); border:1px solid rgba(32,160,80,.25); color:var(--gd); box-shadow:0 1px 3px rgba(32,160,80,.12); }
.pill-gd { background:rgba(32,160,80,.12); border:1px solid rgba(32,160,80,.28); color:var(--gl); box-shadow:0 1px 3px rgba(32,160,80,.15); }
.pill-n  { background:rgba(255,255,255,.72); border:1px solid var(--bw); color:var(--t2); }
.pdot    { width:6px; height:6px; border-radius:50%; background:var(--g); animation:pdot 2s ease-in-out infinite; }

/* ═══ Reveal — sistema direcional ═══ */
.reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--std) var(--ease), transform var(--std) var(--ease);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* Variantes direcionais */
.reveal-left  { opacity:0; transform:translateX(-24px); transition:opacity var(--std) var(--ease), transform var(--std) var(--ease); }
.reveal-right { opacity:0; transform:translateX(24px);  transition:opacity var(--std) var(--ease), transform var(--std) var(--ease); }
.reveal-scale { opacity:0; transform:scale(0.94);       transition:opacity var(--std) var(--ease2), transform var(--std) var(--ease2); }

.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible { opacity:1; transform:none; }

/* Delays */
.rd1 { transition-delay:80ms;  }
.rd2 { transition-delay:160ms; }
.rd3 { transition-delay:240ms; }
.rd4 { transition-delay:320ms; }
.rd5 { transition-delay:400ms; }

/* ═══ Keyframes ═══ */
@keyframes pdot      { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(.9)} }
@keyframes float     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes marquee   { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes fadeUp    { from{transform:translateY(22px);opacity:0.01} to{transform:translateY(0);opacity:1} }
@keyframes slideR    { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn   { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
@keyframes drawLine  { from{stroke-dashoffset:200} to{stroke-dashoffset:0} }
@keyframes pulse     { 0%,100%{opacity:1} 50%{opacity:.6} }
@keyframes pbar      { from{width:0%} to{width:100%} }
@keyframes pulse-ring {
  0%   { box-shadow: var(--shadow-green), 0 0 0 0 rgba(32,160,80,.4); }
  70%  { box-shadow: var(--shadow-green), 0 0 0 12px rgba(32,160,80,0); }
  100% { box-shadow: var(--shadow-green), 0 0 0 0 rgba(32,160,80,0); }
}
@keyframes hero-deco-in {
  from { opacity:0; transform:scale(0.92) translateY(20px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

.ain { animation:fadeUp 0.9s var(--ease); }
.ain[class] { opacity:1; }
.d0{animation-delay:0ms} .d120{animation-delay:120ms} .d240{animation-delay:240ms} .d360{animation-delay:360ms} .d480{animation-delay:480ms}

/* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */
#navbar {
  position:sticky; top:0; z-index:50; height:68px;
  border-bottom:1px solid rgba(0,0,0,.05);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  transition:background 250ms var(--ease);
}
#navbar .inner {
  height:100%; display:flex; align-items:center; justify-content:space-between;
  max-width:72rem; margin:0 auto; padding:0 1.5rem;
}
.logo {
  display:flex; align-items:center; gap:7px; text-decoration:none;
  color:var(--t1); font-family:'Inter',sans-serif; font-weight:800;
  font-size:18.5px; letter-spacing:-.03em;
}
.logo-dot { width:7px; height:7px; border-radius:50%; background:var(--g); }
.nav-links { display:flex; align-items:center; gap:32px; }
.nav-a {
  position:relative; color:rgba(0,0,0,.58); font-size:14px; font-weight:500;
  text-decoration:none; transition:color 200ms;
}
.nav-a::after {
  content:''; position:absolute; bottom:-2px; left:0;
  width:0; height:1px; background:currentColor;
  transition:width 200ms var(--ease);
}
.nav-a:hover { color:var(--t1); }
.nav-a:hover::after { width:100%; }
.nav-cta-wrap { display:flex; align-items:center; gap:12px; }

/* Divisor decorativo logo / nav */
.nav-divider {
  width:1px; height:20px;
  background:rgba(0,0,0,.1);
  transform:rotate(15deg);
  flex-shrink:0;
}

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
#hero {
  background:#ffffff;
  padding:5.5rem 1.5rem 8rem;
  position:relative; overflow:hidden;
}
#hero .grid {
  display:grid;
  grid-template-columns:1.1fr 370px;
  gap:4rem; align-items:center;
}

/* Glow e elemento decorativo "60%" */
.hero-glow {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 65% 75% at 0% 55%, rgba(32,160,80,.07) 0%, transparent 55%);
}
.hero-deco-pct {
  position:absolute;
  right:-2%;
  top:8%;
  font-family:'Inter',sans-serif;
  font-size:22vw;
  font-weight:900;
  color:rgba(32,160,80,.035);
  line-height:1;
  pointer-events:none;
  user-select:none;
  letter-spacing:-0.04em;
  z-index:0;
  animation: hero-deco-in 2s var(--ease) 0.3s both;
}
.hero-bottom-fade { display:none; }
.hero-title-line { stroke-dasharray:200; animation:drawLine 1.4s var(--ease) 1.1s both; }

/* Widget Demo — leve inclinação humana */
.wd-wrap {
  position:relative;
  transform:rotate(1.5deg);
  transition:transform 0.6s var(--ease);
}
.wd-wrap:hover { transform:rotate(0.5deg) translateY(-4px); }
.wd-browser {
  background:var(--ink2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-hero);
}
.wd-bar {
  background:rgba(255,255,255,.025);
  border-bottom:1px solid rgba(255,255,255,.05);
  padding:10px 14px; display:flex; align-items:center; gap:8px;
}
.tls  { display:flex; gap:5px; }
.tl   { width:9px; height:9px; border-radius:50%; }
.tl-r{background:rgba(239,68,68,.35)} .tl-y{background:rgba(234,179,8,.35)} .tl-g{background:rgba(32,160,80,.5)}
.url-bar {
  flex:1; background:rgba(255,255,255,.05); border-radius:5px;
  padding:4px 10px; font-size:10.5px; color:rgba(255,255,255,.3); font-family:monospace;
}
.wd-site { background:#fdfaf6; padding:14px; height:110px; position:relative; overflow:hidden; }
.sk-line { height:7px; background:#e8e3dc; border-radius:3px; margin-bottom:6px; }
.wd-bubble {
  position:absolute; bottom:10px; right:10px;
  width:44px; height:44px; border-radius:50%;
  background:var(--g);
  display:flex; align-items:center; justify-content:center;
  transition:transform .5s var(--ease2), opacity .5s var(--ease);
}
.wd-bubble.hidden { transform:scale(0); opacity:0; }
.wd-bubble:not(.hidden) { animation:pulse-ring 2.2s ease-out infinite; }
.wd-chat { background:#0d0d0d; border-top:1px solid rgba(255,255,255,.05); }
.wd-chat-head { padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.05); display:flex; align-items:center; gap:10px; }
.wd-avatar { width:28px; height:28px; border-radius:50%; background:var(--g); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:#fff; font-family:'Inter',sans-serif; flex-shrink:0; }
.wd-online-dot { width:5px; height:5px; border-radius:50%; background:#22c55e; }
.wd-msgs { padding:12px 14px; display:flex; flex-direction:column; gap:8px; min-height:100px; }
.msg { max-width:85%; padding:8px 12px; border-radius:14px; font-size:11px; line-height:1.55; transition:opacity .3s, transform .3s; }
.msg.hidden { opacity:0; transform:translateY(6px); }
.msg-u { align-self:flex-end; background:var(--g); color:#fff; border-bottom-right-radius:3px; }
.msg-a { align-self:flex-start; background:rgba(255,255,255,.07); color:rgba(255,255,255,.85); border-bottom-left-radius:3px; }
.wd-input-row { padding:8px 14px 12px; }
.wd-input { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:7px 12px; display:flex; align-items:center; justify-content:space-between; }
.wd-send { width:20px; height:20px; border-radius:50%; background:rgba(32,160,80,.3); display:flex; align-items:center; justify-content:center; }

/* Floating badges */
.pay-badge {
  position:absolute; bottom:-14px; left:-14px; background:#fff;
  border:1px solid var(--g200); border-radius:12px; padding:9px 13px;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 8px 32px rgba(32,160,80,.15), 0 2px 8px rgba(0,0,0,.08);
  animation:float 3.5s ease-in-out infinite;
  white-space:nowrap; opacity:0; transition:opacity .5s;
}
.pay-badge.show { opacity:1; }
.pay-badge-icon { width:30px; height:30px; border-radius:8px; background:var(--g50); display:flex; align-items:center; justify-content:center; }
.hero-badge-top {
  position:absolute; top:-8px; right:-8px; background:var(--g); color:#fff;
  font-size:9.5px; font-weight:700; font-family:'Inter',sans-serif;
  padding:5px 10px; border-radius:999px; box-shadow:var(--shadow-green);
  animation:float 3s ease-in-out .5s infinite;
}

/* ═══════════════════════════════════════
   ANALYSIS EXPLAINER
═══════════════════════════════════════ */
.step-cards {
  display:grid;
  grid-template-columns:1fr 1fr 1.2fr 1fr;
  gap:1.25rem;
}

/* Cards: sem border-top colorido, hierarquia via box-shadow */
.step-card {
  background:#fff;
  border:1px solid rgba(0,0,0,.065);
  border-radius:16px; padding:1.5rem;
  position:relative; overflow:visible;
  transition:border-color .3s, box-shadow .3s, transform .3s var(--ease);
}
.step-card:hover {
  border-color:var(--g200);
  transform:translateY(-3px);
}

/* Card 03 destacado — diferenciado */
.step-card.step-card--active {
  border-color:var(--g200);
  box-shadow:0 0 0 1px var(--g200), 0 14px 44px rgba(32,160,80,.13);
}
.step-card.step-card--active:hover {
  transform:translateY(-4px);
  box-shadow:0 0 0 1px var(--g200), 0 20px 52px rgba(32,160,80,.18);
}

/* Número decorativo grande no card */
.step-card-num {
  position:absolute; bottom:12px; right:14px;
  font-size:52px; font-weight:900;
  color:rgba(0,0,0,.028); font-family:'Inter',sans-serif;
  line-height:1; letter-spacing:-0.04em;
  pointer-events:none; user-select:none; z-index:0;
}
.step-card.step-card--active .step-card-num { color:rgba(32,160,80,.07); }

.step-icon-wrap {
  width:44px; height:44px; border-radius:12px; background:var(--g50);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem; font-size:20px; border:1px solid var(--g100);
}
.step-card.step-card--active .step-icon-wrap {
  background:var(--g); border-color:var(--gd);
}
.step-card.step-card--active .step-icon-wrap svg { stroke:#fff !important; }

.step-connector {
  position:absolute; right:-1.45rem; top:44px; color:var(--g200); z-index:1; font-size:16px;
}

/* Linha conectora pontilhada entre cards */
.step-connector-line {
  position:absolute;
  top:50%;
  left:calc(1.5rem + 44px + 10px);
  right:calc(100% - 1.5rem - 44px - 10px + 1.25rem);
  height:1px;
  pointer-events:none;
  z-index:0;
  display:none;
}

/* Dashboard mockup */
.dash-mockup { background:#fff; border:1px solid rgba(0,0,0,.065); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-card); }
.dash-topbar { padding:10px 20px; background:rgba(0,0,0,.02); border-bottom:1px solid rgba(0,0,0,.05); display:flex; align-items:center; justify-content:space-between; }
.dash-body { padding:1.5rem 2rem; display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start; }

/* ═══════════════════════════════════════
   MARQUEE
═══════════════════════════════════════ */
#marquee {
  background:var(--g);
  height:44px; overflow:hidden;
  display:flex; align-items:center;
  position:relative;
  box-shadow:0 4px 24px rgba(32,160,80,.2);
}
.mq-track { display:flex; animation:marquee 32s linear infinite; }
.mq-item  {
  display:inline-flex; align-items:center;
  white-space:nowrap; font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.15em;
  color:rgba(0,0,0,.65); padding:0 1.25rem;
}
.mq-sep   { color:rgba(0,0,0,.25); margin:0 .5rem; font-size:8px; }
.mq-fl    { position:absolute; top:0; bottom:0; width:5rem; pointer-events:none; z-index:1; }
.mq-fl-l  { left:0;  background:linear-gradient(to right,var(--g),transparent); }
.mq-fl-r  { right:0; background:linear-gradient(to left,var(--g),transparent); }

/* ═══════════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════════ */
#como-funciona { padding:5rem 1.5rem 7rem; }

.hiw-row {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4.5rem; align-items:center;
  border-top:1px solid var(--warm-stone);
}
.hiw-row:last-child { border-bottom:1px solid var(--warm-stone); }

/* Espaçamento variável por row — humaniza o ritmo */
.hiw-row:nth-child(1) { padding:5rem 0 3.5rem; }
.hiw-row:nth-child(2) { padding:3rem 0 4rem; }
.hiw-row:nth-child(3) { padding:3.5rem 0 6rem; }

.step-num {
  font-size:5rem; font-weight:900;
  color:rgba(0,0,0,.04); font-family:'Inter',sans-serif;
  line-height:1; letter-spacing:-.04em;
}
.step-tag { font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--gd); }

.mock-win {
  background:var(--ink2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow-medium);
  position:relative;
}
/* Reflection sutil no topo */
.mock-win::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
  z-index:2; pointer-events:none;
}
.mock-bar { background:rgba(255,255,255,.025); border-bottom:1px solid rgba(255,255,255,.05); padding:9px 14px; display:flex; align-items:center; gap:8px; }
.mock-lbl { color:rgba(255,255,255,.2); font-size:10.5px; margin-left:6px; font-family:'Geist',monospace,sans-serif; }

/* ═══════════════════════════════════════
   DIFFERENTIATORS
═══════════════════════════════════════ */
.diff-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; align-items:start; }

.diff-col { border-radius:16px; overflow:hidden; transition:transform .3s var(--ease), opacity .3s; }
.diff-col.neutral { background:#fff; border:1px solid rgba(0,0,0,.07); opacity:.88; }
.diff-col.neutral:hover { opacity:1; transform:translateY(-2px) scale(1.005); }
.diff-col.clinno  {
  background:var(--ink2);
  border:1px solid rgba(32,160,80,.2);
  box-shadow:0 8px 32px rgba(32,160,80,.12);
  border-radius:18px;
  transform:translateY(-8px);
}
.diff-col.clinno:hover { transform:translateY(-11px) scale(1.008); box-shadow:0 14px 44px rgba(32,160,80,.18); }
.diff-head { padding:1.25rem 1.5rem; border-bottom:1px solid rgba(0,0,0,.06); }
.diff-col.clinno .diff-head { border-bottom-color:rgba(255,255,255,.06); }
.diff-body { padding:1.25rem 1.5rem; display:flex; flex-direction:column; gap:.9rem; }
.diff-row  { display:flex; gap:10px; align-items:flex-start; }
.di-x  { width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.06); color:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; font-size:9px; flex-shrink:0; margin-top:1px; }
.di-q  { width:18px; height:18px; border-radius:50%; background:rgba(230,160,0,.1); color:rgba(180,120,0,.8); display:flex; align-items:center; justify-content:center; font-size:9px; flex-shrink:0; margin-top:1px; font-weight:700; }
.di-ok { width:18px; height:18px; border-radius:50%; background:rgba(32,160,80,.15); color:var(--g); display:flex; align-items:center; justify-content:center; font-size:9px; flex-shrink:0; margin-top:1px; }

/* ═══════════════════════════════════════
   MIRROR — Para quem é
═══════════════════════════════════════ */
#mirror-section { padding:6.5rem 1.5rem 7.5rem; }

.mirror-para { display:flex; gap:1rem; align-items:flex-start; }
.mirror-icon { width:22px; height:22px; color:var(--gl); opacity:.45; flex-shrink:0; margin-top:4px; transition:opacity .3s; }
.mirror-para:hover .mirror-icon { opacity:1; }
.mirror-para:hover .mirror-bar  { transform:scaleY(1); }

/* Tamanhos variáveis — cada parágrafo tem peso diferente */
.mirror-text { color:rgba(255,255,255,.7); line-height:1.65; position:relative; padding-left:1.25rem; }
.mirror-para:nth-child(1) .mirror-text { font-size:clamp(1.35rem,2.8vw,2.1rem); }
.mirror-para:nth-child(2) .mirror-text { font-size:clamp(1.2rem,2.5vw,1.85rem); }
.mirror-para:nth-child(3) .mirror-text { font-size:clamp(1.28rem,2.65vw,1.95rem); }
.mirror-para:nth-child(4) .mirror-text { font-size:clamp(1.15rem,2.35vw,1.7rem); }

.mirror-bar {
  position:absolute; left:0; top:3px; bottom:3px;
  border-radius:1px;
  transform:scaleY(0); transform-origin:top;
  transition:transform .5s var(--ease);
}
/* Espessura alternada */
.mirror-para:nth-child(odd)  .mirror-bar { width:3px; background:var(--g); }
.mirror-para:nth-child(even) .mirror-bar { width:2px; background:var(--gl); }

.mirror-accent { color:var(--gl); }

/* ═══════════════════════════════════════
   PRICING
═══════════════════════════════════════ */
#preco { padding:5.5rem 1.5rem 6.5rem; }

.pricing-layout {
  display:grid;
  grid-template-columns:1fr 440px;
  gap:3.5rem; align-items:start;
}
.pricing-card {
  background:var(--ink); border:1px solid rgba(255,255,255,.05);
  border-radius:22px; overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.15);
  position:relative;
}
.pricing-glow {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 50% at 50% 100%, rgba(32,160,80,.1) 0%, transparent 60%);
}
.pc-head { padding:2rem 2rem 1.5rem; border-bottom:1px solid rgba(255,255,255,.05); position:relative; z-index:1; }
.pc-price { font-family:'Inter',sans-serif; font-size:5.5rem; font-weight:900; color:#fff; line-height:.9; letter-spacing:-.04em; }
.pc-calc  { padding:1.75rem 2rem; border-bottom:1px solid rgba(255,255,255,.05); position:relative; z-index:1; }
.pc-cta   { padding:1.5rem 2rem; position:relative; z-index:1; }
.calc-lbl { font-size:9.5px; text-transform:uppercase; letter-spacing:.16em; font-weight:600; color:rgba(255,255,255,.4); margin-bottom:1.25rem; }
.slider-row { margin-bottom:1.25rem; }
.slider-row:last-child { margin-bottom:0; }
.srow-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.srow-label { font-size:12px; color:rgba(255,255,255,.5); }
.srow-val   { font-size:19px; font-weight:900; color:#fff; font-family:'Inter',sans-serif; transition:transform .15s var(--ease2); }
input[type="range"] { width:100%; height:4px; appearance:none; -webkit-appearance:none; background:rgba(255,255,255,.08); border-radius:2px; outline:none; cursor:pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--g); box-shadow:0 0 0 3px rgba(32,160,80,.2); transition:box-shadow .2s; cursor:pointer; }
input[type="range"]::-webkit-slider-thumb:hover { box-shadow:0 0 0 5px rgba(32,160,80,.25); }
input[type="range"]::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--g); border:none; cursor:pointer; }
.calc-results { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:1.25rem; }
.cres { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:10px 12px; text-align:center; }
.cres-lbl { font-size:9px; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,.4); margin-bottom:4px; font-weight:600; }
.cres-val { font-size:13px; font-weight:900; font-family:'Inter',sans-serif; }
.cres-val.hi { color:var(--gl); }
.cres-val.mu { color:rgba(255,255,255,.55); }

.perk-row { display:flex; align-items:center; gap:12px; }
.perk-icon { width:22px; height:22px; border-radius:50%; background:rgba(32,160,80,.1); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s; }
.perk-row:hover .perk-icon { background:var(--g); }
.perk-row:hover .perk-icon svg { stroke:#fff; }
.perk-icon svg { stroke:var(--g); transition:stroke .3s; }

.math-box { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; overflow:hidden; }
.math-top  { padding:9px 16px; background:rgba(0,0,0,.02); border-bottom:1px solid rgba(0,0,0,.05); }
.math-row  { display:flex; justify-content:space-between; align-items:center; padding:11px 16px; border-bottom:1px solid rgba(0,0,0,.04); }
.math-row:last-child { border-bottom:none; }

/* Blockquote de pricing com mais força */
.pricing-blockquote {
  margin-top:2rem;
  padding:1rem 1.25rem;
  border-left:3px solid var(--g);
  background:rgba(32,160,80,.03);
  border-radius:0 8px 8px 0;
}

/* ═══════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════ */
#testi-section { padding:5rem 1.5rem 5.5rem; }

.testi-card {
  display:grid; grid-template-columns:1.15fr .85fr; gap:2.5rem;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:2.25rem;
  transition:opacity .4s, transform .4s, box-shadow .3s;
  background-image:radial-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:22px 22px;
}
.testi-card:hover {
  box-shadow:0 12px 40px rgba(0,0,0,.2);
  transform:translateY(-4px);
}
.testi-right { border-left:1px solid rgba(255,255,255,.06); padding-left:2rem; }
.testi-nav { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:2rem; }
.testi-btn { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; font-size:15px; transition:background .2s; }
.testi-btn:hover { background:rgba(255,255,255,.12); }
.testi-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.2); cursor:pointer; border:none; transition:background .3s, width .3s; }
.testi-dot.active { background:var(--g); width:20px; border-radius:3.5px; }

/* ═══════════════════════════════════════
   FAQ
═══════════════════════════════════════ */
#faq { padding:5.5rem 1.5rem 6.5rem; }

.faq-layout { display:grid; grid-template-columns:1fr 2fr; gap:5rem; align-items:start; }
.faq-item { border-bottom:1px solid var(--warm-stone); }
.faq-item:last-child { border-bottom:none; }
.faq-btn { width:100%; display:flex; align-items:center; justify-content:space-between; padding:1.2rem 0; background:none; border:none; cursor:pointer; text-align:left; gap:.75rem; overflow:hidden; }
.faq-q    { font-size:14.5px; font-weight:600; color:var(--t1); font-family:'Inter',sans-serif; transition:color .2s; min-width:0; flex:1; word-break:break-word; overflow-wrap:break-word; }
.faq-btn:hover .faq-q { color:var(--gdd); }

/* FAQ icon — linha que vira × */
.faq-icon {
  width:22px; height:22px; border-radius:50%;
  border:1px solid rgba(0,0,0,.14);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; position:relative; overflow:hidden;
  transition:border-color .25s, background .25s;
}
.faq-icon::before,
.faq-icon::after {
  content:''; position:absolute;
  width:10px; height:1.5px;
  background:rgba(0,0,0,.5); border-radius:1px;
  transition:transform .3s var(--ease), opacity .25s;
}
.faq-icon::before { transform:rotate(0deg); }
.faq-icon::after  { transform:rotate(90deg); }
.faq-item.open .faq-icon { border-color:var(--g); background:rgba(32,160,80,.06); }
.faq-item.open .faq-icon::before { transform:rotate(45deg); }
.faq-item.open .faq-icon::after  { transform:rotate(-45deg); }
/* Remove o svg original — substituído por CSS */
.faq-icon svg { display:none; }

.faq-body { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .4s var(--ease), opacity .3s; }
.faq-body.open { grid-template-rows:1fr; opacity:1; }
.faq-body-inner { overflow:hidden; }
.faq-a { font-size:13.5px; color:var(--t4); line-height:1.82; padding-bottom:1.2rem; }

/* ═══════════════════════════════════════
   CTA FINAL
═══════════════════════════════════════ */
#cta-final { padding:7.5rem 1.5rem 8.5rem; }

.cta-stat { text-align:center; }
.cta-stat-v { font-size:1.5rem; font-weight:900; color:#fff; font-family:'Inter',sans-serif; }
.cta-stat-l { font-size:11px; color:rgba(255,255,255,.5); margin-top:2px; }

/* Textura diagonal no CTA — diferente das seções dot/grid */
.bg-ink-diagonal {
  background-image:repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.012) 0px,
    rgba(255,255,255,.012) 1px,
    transparent 1px,
    transparent 9px
  );
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
footer { background:var(--ink); border-top:1px solid rgba(255,255,255,.05); padding:3rem 1.5rem; }
footer .inner { max-width:72rem; margin:0 auto; display:flex; flex-direction:column; gap:1.5rem; align-items:center; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:.25rem 1.25rem; }
.fl { color:rgba(255,255,255,.45); font-size:12px; text-decoration:none; padding:.25rem 0; transition:color .2s; }
.fl:hover { color:rgba(255,255,255,.9); }

/* ═══════════════════════════════════════
   SCROLL PROGRESS BAR
═══════════════════════════════════════ */
.scroll-progress-bar {
  position:fixed; top:0; left:0;
  height:2px; z-index:100;
  background:linear-gradient(90deg, var(--g) 0%, #4aba72 60%, #a8e6be 100%);
  transform-origin:left;
  border-radius:0 2px 2px 0;
  transition:width .1s linear;
  pointer-events:none;
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width:960px) {
  #hero .grid        { grid-template-columns:1fr; gap:3rem; }
  .wd-wrap           { transform:none; }
  .wd-wrap:hover     { transform:none; }
  .hero-deco-pct     { display:none; }
  .hiw-row           { grid-template-columns:1fr; gap:2rem; }
  .hiw-row .flip     { order:-1; }
  .diff-grid         { grid-template-columns:1fr; }
  .diff-col.clinno   { transform:none; }
  .pricing-layout    { grid-template-columns:1fr; }
  .testi-card        { grid-template-columns:1fr; gap:1.5rem; }
  .testi-right       { border-left:none; padding-left:0; border-top:1px solid rgba(255,255,255,.06); padding-top:1.5rem; }
  .step-cards        { grid-template-columns:1fr 1fr; }
  .step-connector    { display:none; }
  .mirror-para:nth-child(n) .mirror-text { font-size:clamp(1.1rem,3.5vw,1.5rem); }
  .hiw-row:nth-child(n) { padding:3rem 0; }
}
@media (max-width:640px) {
  .sec             { padding:4rem 1.25rem; }
  #como-funciona   { padding:4rem 1.25rem 5rem; }
  #preco           { padding:4rem 1.25rem 5rem; }
  #faq             { padding:4rem 1.25rem 5rem; }
  #cta-final       { padding:5rem 1.25rem 6rem; }
  .step-cards      { grid-template-columns:1fr; }
  .nav-links, .nav-cta-wrap { display:none; }
  .calc-results    { grid-template-columns:1fr 1fr; }
  .calc-results .cres:last-child { grid-column:1/-1; }
  .dash-body       { grid-template-columns:1fr; }
  .dash-body > div:last-child { display:none; }
  .faq-layout      { grid-template-columns:1fr; gap:2rem; }
  .faq-layout > div:first-child { position:relative !important; top:0 !important; }
  .faq-btn         { justify-content:flex-start; gap:8px; }
  .faq-icon        { margin-left:auto; }
  .faq-q           { font-size:13px; }
  .faq-a           { font-size:12px; word-break:break-word; overflow-wrap:break-word; }
}
@media (prefers-reduced-motion:reduce) {
  .ain { animation:none !important; opacity:1 !important; transform:none !important; }
  .reveal,.reveal-left,.reveal-right,.reveal-scale { opacity:1 !important; transform:none !important; transition:none !important; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}