/* ============================================================
   Inklo Pay — LP B2B para Prestadores (clínicas e hospitais)
   Sistema visual CANÔNICO da Inklo (home + LPs por ICP)
   roxo #79577A · âmbar #FCB144 (texto #9C6008) · lavanda #E8DEEB · Montserrat
   Mobile-first | Cross-browser
   ============================================================ */

/* -------- TOKENS (fonte de verdade da marca) -------- */
:root {
  /* Roxo — primária */
  --roxo-900:#3F2C41; --roxo-700:#5E4360; --roxo:#79577A; --roxo-300:#B49AB5;
  --lav:#E8DEEB; --lav-50:#F5F1F6;
  /* Âmbar — acento/CTA (texto sobre claro = --amber-ink) */
  --amber:#FCB144; --amber-300:#FFC76B; --amber-700:#D98E1E; --amber-ink:#9C6008;
  /* Verde — audiência paciente */
  --pac:#2E8B6F; --pac-dark:#1F6B52; --pac-line:#CDE8DC; --pac-bg:#E9F3EE;
  /* Co-brand (uso restrito) */
  --md-teal:#038E83;
  /* Neutros */
  --ink:#212529; --muted:#6C757D; --bg:#FFFFFF; --bg-soft:#F6F5F7; --border:#E7E2EA;
  --success:#2E7D5B;
  /* WhatsApp */
  --wa:#25D366; --wa-dark:#1DAE51;
  /* Layout / forma / sombra */
  --maxw:1120px; --gutter:24px; --r:12px; --card-r:14px; --card-pad:24px;
  --card-sh:0 6px 20px rgba(63,44,65,.07); --card-sh-hover:0 16px 38px rgba(63,44,65,.12);
  --header-h:70px;
  --font-sans:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* -------- Reset & base -------- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
main section[id]{ scroll-margin-top:78px; }
body {
  font-family:var(--font-sans); color:var(--ink); background:var(--bg);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:clip; overflow-wrap:break-word;
}
a { color:inherit; text-decoration:none; }
img, svg { display:block; max-width:100%; height:auto; }
button { font-family:inherit; cursor:pointer; border:none; background:none; padding:0; }
:focus-visible { outline:3px solid var(--roxo); outline-offset:2px; border-radius:6px; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
section { padding:32px 0; }
/* anti-overflow: filhos de grid podem encolher abaixo do conteúdo */
.hero-grid>*, .showcase>*, .benefits-split>*, .md-grid>*, .prod-flow>li { min-width:0; }

/* -------- Tipografia -------- */
h1,h2,h3,h4 { color:var(--roxo-900); font-weight:700; line-height:1.18; letter-spacing:-.01em; }
h2 { font-size:clamp(26px,3.4vw,38px); font-weight:800; }
h2 .am { color:var(--amber-ink); }
h3 { font-size:19px; font-weight:600; }

.eyebrow {
  display:flex; align-items:center; gap:10px; font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--roxo); margin-bottom:16px;
}
.eyebrow::before { content:""; width:26px; height:2px; background:var(--amber); }
.eyebrow--center { justify-content:center; }

.sec-head { text-align:center; max-width:720px; margin:0 auto 32px; }
.sec-head .eyebrow { justify-content:center; }
.sec-title { font-size:clamp(24px,3.4vw,36px); font-weight:800; color:var(--roxo-900); margin:0 0 12px; letter-spacing:-.01em; line-height:1.2; }
.sec-title .am { color:var(--amber-ink); }
.sec-sub { font-size:clamp(14px,1.3vw,17px); color:var(--muted); line-height:1.6; margin:0; }
/* títulos e subtítulos de seção em uma linha só no desktop; quebram normal no mobile */
@media(min-width:1001px){ .sec-head{max-width:none} .sec-title,.sec-sub{white-space:nowrap} }
.micro { font-size:12px; color:var(--muted); line-height:1.55; margin-top:14px; }
.disclaimer { font-size:12px; color:var(--muted); line-height:1.55; }
.disclaimer--light { color:rgba(255,255,255,.55); }
.mt-md { margin-top:22px; }

/* -------- Botões -------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-weight:600; font-size:15px; padding:13px 24px;
  border-radius:var(--r); border:1.5px solid transparent; cursor:pointer;
  transition:background-color .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; white-space:nowrap;
}
.btn .arw { transition:transform .18s; }
.btn:hover .arw { transform:translateX(3px); }
.btn--sm { padding:12px 18px; font-size:13.5px; }
.btn--lg { padding:16px 26px; font-size:16px; }
.btn-amber { background:var(--amber); color:var(--roxo-900); }
.btn-amber:hover { background:var(--amber-700); color:#fff; }
.btn-roxo { background:var(--roxo); color:#fff; }
.btn-roxo:hover { background:var(--roxo-700); color:#fff; }
.btn-outline-w { background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn-outline-w:hover { background:rgba(255,255,255,.12); color:#fff; }
.btn-lav { background:var(--lav-50); color:var(--roxo-700); border-color:var(--lav); }
.btn-lav:hover { background:var(--lav); color:var(--roxo-900); }
.btn-wa { background:var(--wa); color:#fff; }
.btn-wa:hover { background:var(--wa-dark); color:#fff; }

/* icon boxes */
.icobox { width:46px; height:46px; border-radius:12px; background:var(--lav-50); display:flex; align-items:center; justify-content:center; color:var(--roxo); margin:0 auto 16px; }
.ico { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* -------- Fundos de seção -------- */
.alt { background:var(--bg-soft); }
.roxo-sec { background:var(--roxo-900); color:#fff; padding:30px 0; }
.roxo-sec h2, .roxo-sec .eyebrow, .roxo-sec .sec-title { color:#fff; }
.roxo-sec .sec-title .am, .roxo-sec h2 .am { color:var(--amber); }
.roxo-sec .eyebrow::before { background:var(--amber); }
.dark-sec { background:var(--roxo-900); background-image:linear-gradient(135deg,var(--roxo-900) 0%,#302331 100%); color:#fff; padding:36px 0; }
.dark-sec .sec-title { color:#fff; }
.dark-sec .sec-sub { color:rgba(255,255,255,.72); }
.dark-sec .eyebrow { color:#fff; }
.dark-sec .eyebrow::before { background:var(--amber); }

/* ============================================================
   HEADER
   ============================================================ */
header.nav { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); -webkit-backdrop-filter:saturate(180%) blur(8px); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--border); transition:box-shadow .2s ease; }
header.nav.scrolled { box-shadow:0 6px 20px rgba(63,44,65,.08); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:16px; }
.brand { display:flex; align-items:center; gap:9px; }
.brand img { height:26px; width:auto; }
.brand .plabel { font-size:15px; font-weight:800; color:var(--roxo); letter-spacing:-.01em; }
.nav-links { display:flex; gap:26px; }
.nav-links a { font-size:14.5px; font-weight:500; color:var(--ink); white-space:nowrap; }
.nav-links a:hover { color:var(--roxo); }
.nav-cta-mobile { display:none; }
.nav-cta { display:flex; align-items:center; gap:18px; }
.nav-enter { font-size:14.5px; font-weight:600; color:var(--roxo-700); white-space:nowrap; }
.nav-cta .btn { white-space:nowrap; }
.menu-btn { display:none; background:none; border:0; font-size:22px; color:var(--roxo-700); cursor:pointer; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position:relative; overflow:hidden; color:#fff;
  padding:64px 0 56px; background-color:var(--roxo-900);
  background-image:
    radial-gradient(120% 130% at 88% 4%, rgba(121,87,122,.55) 0%, rgba(63,44,65,0) 56%),
    radial-gradient(78% 70% at 4% 98%, rgba(252,177,68,.13) 0%, rgba(63,44,65,0) 55%),
    linear-gradient(158deg,#4A3550 0%,#3F2C41 68%,#3A2A3C 100%);
}
/* fundo do hero: textura de pontos mascarada */
.hero::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.15) 1.3px,transparent 1.7px); background-size:24px 24px; -webkit-mask:radial-gradient(120% 92% at 50% 34%,#000 26%,transparent 76%); mask:radial-gradient(120% 92% at 50% 34%,#000 26%,transparent 76%); opacity:.6; }
.hero .wrap { position:relative; z-index:1; }
.hero .wave { z-index:1; }
/* motion do hero: aurora atrás do roxo */
.hero-aurora { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hero-aurora .sheen { position:absolute; left:50%; top:50%; width:150%; height:170%; transform:translate(-50%,-50%); border-radius:46%; filter:blur(44px); opacity:.9; will-change:transform; background:conic-gradient(from 0deg,rgba(252,177,68,0) 0deg,rgba(252,177,68,.22) 52deg,rgba(150,100,190,.28) 128deg,rgba(252,177,68,0) 202deg,rgba(110,76,134,.26) 288deg,rgba(252,177,68,0) 360deg); animation:sheenspin 20s linear infinite; }
.hero-aurora i { position:absolute; display:block; border-radius:50%; filter:blur(40px); mix-blend-mode:screen; will-change:transform,opacity; }
.hero-aurora .a1 { width:400px; height:400px; left:-8%; top:-16%; background:radial-gradient(circle at 50% 50%,#A874D0,rgba(168,116,208,0) 70%); animation:aur1 10s ease-in-out infinite; }
.hero-aurora .a2 { width:440px; height:440px; left:52%; top:-14%; background:radial-gradient(circle at 50% 50%,#F0A93E,rgba(240,169,62,0) 68%); animation:aur2 9s ease-in-out infinite; }
.hero-aurora .a3 { width:460px; height:460px; left:14%; bottom:-26%; background:radial-gradient(circle at 50% 50%,#8A5CB0,rgba(138,92,176,0) 70%); animation:aur3 12s ease-in-out infinite; }
@keyframes sheenspin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes aur1 { 0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.34} 50%{transform:translate3d(120px,84px,0) scale(1.22);opacity:.72} }
@keyframes aur2 { 0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.3} 50%{transform:translate3d(-112px,72px,0) scale(1.16);opacity:.64} }
@keyframes aur3 { 0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.34} 50%{transform:translate3d(98px,-98px,0) scale(1.22);opacity:.68} }
@media (prefers-reduced-motion: reduce){ .hero-aurora i, .hero-aurora .sheen { animation:none; } }
/* CTAs vivos: breathe + shimmer */
.cta-live { position:relative; overflow:hidden; }
.cta-live::before { content:""; position:absolute; top:0; left:0; width:55%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); animation:ctaShim 3.4s ease-in-out infinite; pointer-events:none; z-index:0; }
.btn-amber.cta-live { animation:ctaBreatheAmber 2.6s ease-in-out infinite; }
.btn-roxo.cta-live { animation:ctaBreatheRoxo 2.6s ease-in-out infinite; }
.cta-live:hover { transform:translateY(-2px); }
@keyframes ctaBreatheAmber { 0%,100%{box-shadow:0 8px 22px rgba(217,142,30,.40)} 50%{box-shadow:0 13px 40px rgba(217,142,30,.62)} }
@keyframes ctaBreatheRoxo { 0%,100%{box-shadow:0 8px 22px rgba(121,87,122,.40)} 50%{box-shadow:0 13px 40px rgba(94,67,96,.60)} }
@keyframes ctaShim { 0%{transform:translateX(-170%) skewX(-12deg)} 55%,100%{transform:translateX(370%) skewX(-12deg)} }
@media(prefers-reduced-motion:reduce){ .btn-amber.cta-live, .btn-roxo.cta-live { animation:none; } .cta-live::before { display:none; } }
.hero-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center; }
.hero .eyebrow { color:#fff; font-size:14px; }
.hero .eyebrow::before { background:var(--amber); }
.hero h1 { font-size:clamp(32px,4.8vw,52px); font-weight:800; line-height:1.14; letter-spacing:-.01em; margin:0 0 16px; color:#fff; text-shadow:0 2px 18px rgba(40,28,42,.35); }
.hero h1 .am { color:var(--amber); }
.hero .sub { font-size:clamp(16px,1.5vw,20px); color:rgba(255,255,255,.92); line-height:1.6; font-weight:500; margin:0 0 20px; max-width:52ch; }
.hero .sub strong { color:#fff; font-weight:700; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; }
.hero .micro { font-size:11px; margin:16px 0 0; color:rgba(255,255,255,.7); max-width:60ch; }
.hero .wave { position:absolute; bottom:-1px; left:0; width:100%; line-height:0; }
.hero .wave svg { width:100%; height:56px; display:block; }

/* hero — chip de exemplo (prova-de-mecanismo, com rótulos de compliance) */
.hero-stack { display:flex; flex-direction:column; align-items:flex-start; }
.hero-ex {
  display:flex; flex-direction:column; gap:9px; margin-top:16px; width:100%; max-width:420px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:14px;
  padding:14px 16px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.hero-ex .xt { font-size:10px; font-weight:700; letter-spacing:.09em; color:var(--amber); }
.hero-ex .xr { display:flex; justify-content:space-between; align-items:baseline; gap:18px; }
.hero-ex .xr .l { font-size:13px; color:rgba(255,255,255,.74); min-width:0; }
.hero-ex .xr .v { font-size:18px; font-weight:800; color:#fff; white-space:nowrap; flex:none; }
.hero-ex .xd { height:1px; background:rgba(255,255,255,.16); }
.hero-ex .xp { display:flex; flex-direction:column; gap:2px; }
.hero-ex .xp .l { font-size:13px; color:rgba(255,255,255,.74); }
.hero-ex .xp .l .ex { font-style:normal; color:rgba(255,255,255,.5); }
.hero-ex .xp .v { font-size:18px; font-weight:800; color:var(--amber); white-space:nowrap; }
.hero-ex .xf { display:flex; align-items:center; gap:8px; font-size:11.5px; color:rgba(255,255,255,.74); line-height:1.4; }
.hero-ex .xf .dot { width:7px; height:7px; border-radius:50%; background:#43BE92; flex:none; }

/* hero — visual (mockup de celular) */
.hero-visual { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.hero-visual svg.hero-sim { width:100%; max-width:460px; height:auto; display:block; }
.hero-visual .seal {
  font-size:10.5px; font-weight:600; color:rgba(255,255,255,.82);
  background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.18);
  padding:5px 11px; border-radius:99px; white-space:nowrap; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
/* desktop: título ocupa a largura toda no topo; mock desce para o canto inferior direito */
@media(min-width:901px){
  .hero-grid{ display:block; position:relative; min-height:512px; }
  .hero h1{ max-width:none; }
  .hero .sub{ max-width:56%; }
  .hero-stack{ max-width:56%; }
  .hero-visual{ position:absolute; right:0; bottom:0; width:45%; max-width:492px; margin:0; }
}

/* ============================================================
   PROVA SOCIAL (strip)
   ============================================================ */
.proof-strip { padding:14px 0; border-bottom:1px solid var(--border); background:#fff; }
.proof-strip .row { display:flex; align-items:center; justify-content:center; gap:6px 16px; flex-wrap:wrap; text-align:center; }
.proof-strip a, .proof-strip span.pi { display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:700; color:var(--roxo-900); }
.proof-strip .dot { width:8px; height:8px; border-radius:50%; background:var(--success); flex:none; }
.proof-strip .sep { width:1px; height:15px; background:var(--border); }

/* ============================================================
   PROBLEMA → SOLUÇÃO (seção única)
   ============================================================ */
.ps-grid { display:grid; grid-template-columns:1fr 56px 1fr; align-items:start; gap:0; }
.ps-pain, .ps-sol { min-width:0; }
.ps-pain { align-self:stretch; display:flex; flex-direction:column; }
.ps-label { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--roxo); margin-bottom:8px; }
.ps-h { font-size:clamp(15px,1.6vw,19px); font-weight:800; color:var(--roxo-900); line-height:1.25; letter-spacing:-.01em; margin-bottom:14px; }
.ps-h .am { color:var(--amber-ink); }
.ps-arrow { align-self:stretch; justify-self:center; width:1px; min-height:120px; background:var(--roxo-300); }
.ps-card { height:230px; margin-bottom:6px; }
.ps-pain .chips { display:flex; flex-direction:column; gap:10px; margin:0; }
.ps-pain .chip { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:11px 14px; box-shadow:var(--card-sh); }
.ps-pain .chip .icobox { margin:0; width:38px; height:38px; flex:none; }
.ps-pain .chip span { font-weight:600; color:var(--ink); font-size:15px; }
.ps-pain .prob-art { max-width:455px; margin:22px auto 0; width:100%; }
.prob-art svg { width:100%; height:auto; display:block; }
.prob-art .pulse { animation:accpulse 2.4s ease-in-out infinite; }
@keyframes accpulse { 0%,100%{opacity:.3} 50%{opacity:.75} }
.sol-media { position:relative; border:1px solid var(--border); border-radius:14px; overflow:hidden; height:292px; background:linear-gradient(180deg,rgb(240,236,237) 0%,rgb(240,236,237) 42%,rgb(171,152,173) 50%,rgb(106,71,113) 67%,rgb(98,66,106) 100%); box-shadow:var(--card-sh); }
.sol-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center; padding:16px 24px; }
.plist { display:flex; flex-direction:column; gap:12px; list-style:none; margin:18px 0 0; padding:0; }
.prow { display:flex; gap:14px; align-items:center; }
.prow .icobox { margin:0; flex:none; width:44px; height:44px; }
.prow b { color:var(--roxo-900); font-size:15px; margin-right:6px; }
.prow .pd { display:inline; font-size:14px; color:var(--muted); }
.ps-grid > .reveal:nth-child(2) { transition-delay:.07s; }
.ps-grid > .reveal:nth-child(3) { transition-delay:.14s; }
@media (prefers-reduced-motion: reduce){ .prob-art .pulse { animation:none; } }
@media(max-width:900px){
  .ps-grid { grid-template-columns:1fr; gap:18px; }
  .ps-arrow { align-self:center; justify-self:center; width:80px; min-height:0; height:1px; margin:4px auto; }
}

/* Como funciona — timeline de ícones (seção escura) */
.timeline { list-style:none; display:grid; grid-template-columns:repeat(5,1fr); margin:0; padding:0; }
.timeline li { position:relative; text-align:center; padding:0 10px; }
.timeline li::after { content:""; position:absolute; top:27px; left:50%; width:100%; height:2px; background:rgba(252,177,68,.32); z-index:0; }
.timeline li:last-child::after { display:none; }
.tl-node { position:relative; z-index:1; width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.06); border:2px solid var(--amber); display:flex; align-items:center; justify-content:center; color:var(--amber); margin:0 auto 14px; }
.tl-node .ico { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.timeline li.tl-pay .tl-node { background:var(--amber); color:var(--roxo-900); box-shadow:0 8px 22px rgba(252,177,68,.4); }
.tl-n { display:block; font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--amber); margin-bottom:4px; }
.tl-c h4 { font-size:15px; color:#fff; margin-bottom:6px; font-weight:700; letter-spacing:-.01em; }
.tl-c p { font-size:13px; color:rgba(255,255,255,.72); max-width:22ch; margin:0 auto; line-height:1.5; }
.tl-c .k { color:var(--amber); font-weight:700; }
.timeline li.reveal:nth-child(2){transition-delay:.06s}
.timeline li.reveal:nth-child(3){transition-delay:.12s}
.timeline li.reveal:nth-child(4){transition-delay:.18s}
.timeline li.reveal:nth-child(5){transition-delay:.24s}
@media(max-width:900px){
  .timeline { grid-template-columns:1fr; max-width:440px; margin:0 auto; }
  .timeline li { text-align:left; display:grid; grid-template-columns:56px 1fr; gap:16px; padding:0 0 24px 0; align-items:start; }
  .tl-node { margin:0; }
  .tl-c p { max-width:none; margin:0; }
  .timeline li::after { top:56px; left:27px; width:2px; height:100%; }
}

/* ============================================================
   MÉTRICAS (faixa roxa)
   ============================================================ */
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; text-align:center; }
.metric .mn { font-size:34px; font-weight:800; color:#fff; line-height:1; }
.metric .mn .am { color:var(--amber); }
.metric .ml { font-size:13px; color:rgba(255,255,255,.7); margin-top:8px; line-height:1.45; }

/* ============================================================
   PRODUCT SHOWCASE
   ============================================================ */
.showcase { display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; margin-bottom:48px; }
.showcase:last-of-type { margin-bottom:0; }
.showcase__visual img { border-radius:var(--card-r); box-shadow:var(--card-sh-hover); border:1px solid var(--border); }
.showcase__visual svg.ui-mock { width:100%; height:auto; display:block; border-radius:var(--card-r); box-shadow:var(--card-sh-hover); border:1px solid var(--border); }
.showcase__label { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--roxo); margin-bottom:8px; }
.showcase__title { font-size:clamp(20px,2.4vw,26px); font-weight:800; color:var(--roxo-900); margin:0 0 12px; letter-spacing:-.01em; line-height:1.25; }
.showcase__copy { font-size:15px; color:var(--muted); line-height:1.6; margin:0 0 16px; }
.showcase__list { list-style:none; padding:0; margin:0; }
.showcase__list li { display:flex; gap:10px; padding:6px 0; font-size:14px; color:var(--ink); line-height:1.45; }
.showcase__list li::before { content:"✓"; color:var(--roxo); font-weight:700; flex-shrink:0; }
/* Produto — fluxo do prestador (3 passos, seção clara) */
.prod-flow { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:0 0 44px; padding:0; }
.prod-flow li { position:relative; text-align:center; padding:0 14px; }
.prod-flow li::after { content:""; position:absolute; top:26px; left:50%; width:100%; height:2px; background:var(--lav); z-index:0; }
.prod-flow li:last-child::after { display:none; }
.pf-ic { position:relative; z-index:1; width:52px; height:52px; border-radius:14px; background:linear-gradient(160deg,#FFD583,#F1A62B); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; box-shadow:0 8px 18px rgba(217,142,30,.28); }
.pf-ic svg { width:26px; height:26px; stroke:#3A2410; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.pf-n { display:block; font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--amber-ink); margin-bottom:4px; }
.pf-c h4 { font-size:16px; color:var(--roxo-900); margin:0 0 6px; font-weight:800; letter-spacing:-.01em; }
.pf-c p { font-size:14px; color:var(--muted); max-width:26ch; margin:0 auto; line-height:1.5; }
.pf-c .k { color:var(--amber-ink); font-weight:700; }
.prod-flow li.reveal:nth-child(2){transition-delay:.08s}
.prod-flow li.reveal:nth-child(3){transition-delay:.16s}

/* ============================================================
   VANTAGENS (split prestador / paciente) — tríade de público
   ============================================================ */
.benefits-split { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1020px; margin:0 auto; }
.benefits-block { position:relative; overflow:hidden; background:#fff; border:1px solid var(--border); border-radius:var(--card-r); padding:30px 26px; box-shadow:var(--card-sh); }
.benefits-block::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; }
.benefits-block--prestador::before { background:linear-gradient(90deg,var(--amber),var(--amber-700)); }
.benefits-block--paciente::before { background:linear-gradient(90deg,#43BE92,var(--pac-dark)); }
.benefits-block__role { display:table; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:4px 11px; border-radius:99px; margin:0 auto 14px; }
.benefits-block--prestador .benefits-block__role { color:var(--amber-ink); background:#FFF1D6; }
.benefits-block--paciente .benefits-block__role { color:var(--pac-dark); background:var(--pac-bg); }
.benefits-block__title { font-size:clamp(18px,2vw,22px); font-weight:800; color:var(--roxo-900); margin:0 0 14px; letter-spacing:-.01em; }
.benefits-block__list { list-style:none; padding:0; margin:0; }
.benefit-item { display:flex; gap:14px; align-items:center; padding:13px 0; border-top:1px solid rgba(63,44,65,.07); }
.benefit-item:first-child { border-top:none; padding-top:2px; }
.benefit-item__icon { flex:0 0 auto; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; }
.benefit-item__icon svg { width:46px; height:46px; display:block; }
.benefit-item__title { font-size:15px; font-weight:700; color:var(--roxo-900); margin:0 0 2px; line-height:1.3; }
.benefit-item__desc { font-size:14px; color:var(--muted); line-height:1.45; margin:0; }

/* ============================================================
   CASE MATER DEI
   ============================================================ */

.md { background:linear-gradient(135deg,var(--md-teal) 0%,var(--roxo) 100%); color:#fff; border-radius:var(--card-r); padding:20px; overflow:hidden; }
.md .eyebrow { color:#fff; margin-bottom:8px; }
.md .eyebrow::before { background:var(--amber); }
.md h2 { color:#fff; font-size:clamp(24px,3vw,30px); text-align:center; }
.md .sub { color:rgba(255,255,255,.92); font-size:14px; margin-top:8px; }
.md-lockup { display:flex; align-items:center; gap:18px; margin-bottom:12px; }
.md-lockup img { height:28px; width:auto; display:block; }
.md-lockup .div { width:1px; height:26px; background:rgba(255,255,255,.3); flex:none; }
.md-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; margin-top:10px; }
.md-col .q { margin-bottom:14px; }
.q { border-left:2px solid var(--amber); padding-left:20px; }
.q p { font-size:15px; line-height:1.5; color:#fff; margin:0 0 10px; }
.q .who { font-size:13px; font-weight:600; color:var(--amber); }
.md-source { display:inline-flex; align-items:center; gap:8px; margin-top:6px; font-size:13px; font-weight:600; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.28); border-radius:99px; padding:8px 14px; transition:background .15s; }
.md-source:hover { background:rgba(255,255,255,.1); }
.md-source svg { width:18px; height:18px; flex:none; }
.md-source .arw { color:var(--amber); }
.md-press-label { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); }
.md .media { margin-top:10px; }
.md .media a { border:1px solid rgba(255,255,255,.18); border-radius:10px; overflow:hidden; font-size:13px; color:rgba(255,255,255,.92); line-height:1.4; background:rgba(255,255,255,.04); display:flex; flex-direction:column; }
.md .media a .thumb { width:100%; height:92px; object-fit:cover; display:block; background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.14); }
.md .media a .mbody { padding:13px 15px; }
.md .media a .src { display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); margin-bottom:6px; }
.md .media a:hover { background:rgba(255,255,255,.1); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width:800px; margin:0 auto; }
.faq details { border-bottom:1px solid var(--border); }
.faq details summary { list-style:none; cursor:pointer; padding:16px 4px; font-weight:600; font-size:15px; color:var(--roxo-900); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq details summary::-webkit-details-marker { display:none; }
.faq details summary .pm { color:var(--amber-700); font-size:22px; flex:none; transition:.2s; line-height:1; }
.faq details[open] summary .pm { transform:rotate(45deg); }
.faq details .a { padding:0 4px 16px; color:var(--muted); font-size:14px; max-width:72ch; line-height:1.6; }

/* ============================================================
   CTA FINAL
   ============================================================ */
.final-cta { text-align:center; }
.final-cta .eyebrow { justify-content:center; }
.final-cta h2 { color:#fff; margin:0 auto; font-size:clamp(24px,2.9vw,32px); }
.final-cta h2 .am { color:var(--amber); }
.final-cta p { color:rgba(255,255,255,.82); font-size:16px; margin:10px auto 0; max-width:60ch; }
.final-cta .hero-cta { justify-content:center; margin-top:18px; }
.final-cta .legal { margin-top:16px; font-size:12.5px; color:rgba(255,255,255,.7); }
.final-cta .legal a { color:#fff; text-decoration:underline; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { background:var(--roxo-900); color:rgba(255,255,255,.72); padding:34px 0 22px; font-size:14px; border-top:1px solid rgba(255,255,255,.08); }
footer .cols { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; margin-bottom:24px; }
footer .fbrand img { height:24px; margin-bottom:14px; }
footer .fbrand p { max-width:34ch; color:rgba(255,255,255,.72); }
footer .social { display:flex; gap:10px; margin-top:18px; }
footer .social a { width:34px; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.78); }
footer .social a:hover { background:rgba(255,255,255,.1); color:#fff; }
footer .social svg { width:18px; height:18px; fill:currentColor; }
footer h4 { color:#fff; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
footer a { color:rgba(255,255,255,.72); display:block; margin-bottom:9px; }
footer a:hover { color:var(--amber); }
footer .legal { border-top:1px solid rgba(255,255,255,.15); padding-top:18px; font-size:11.5px; line-height:1.6; color:rgba(255,255,255,.5); }
footer .legal p { margin-bottom:10px; color:rgba(255,255,255,.5); }
footer .legal strong { color:rgba(255,255,255,.75); }

/* ============================================================
   STICKY CTA + WHATSAPP FLOAT
   ============================================================ */
.sticky-cta { display:none; position:fixed; left:0; right:0; bottom:0; z-index:60; gap:10px; padding:10px 16px; background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-top:1px solid var(--border); box-shadow:0 -6px 20px rgba(63,44,65,.10); }
.sticky-cta .btn { flex:1; }
.whatsapp-float { position:fixed; right:18px; bottom:18px; z-index:55; width:54px; height:54px; border-radius:50%; background:var(--wa); box-shadow:0 8px 22px rgba(37,211,102,.4); display:flex; align-items:center; justify-content:center; }
.whatsapp-float svg { width:30px; height:30px; fill:#fff; }

/* ============================================================
   MOTION — reveal on-scroll
   ============================================================ */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity:1; transform:none; }
.metrics>.reveal:nth-child(2){ transition-delay:.07s; }
.metrics>.reveal:nth-child(3){ transition-delay:.14s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .nav-links { display:none; }
  .nav-cta { display:none; }              /* CTAs de desktop saem do header no mobile (vão pro menu + sticky) */
  .menu-btn { display:block; margin-left:auto; }
  .nav-links.open { display:flex; position:absolute; top:var(--header-h); left:0; right:0; flex-direction:column; gap:0; background:#fff; border-bottom:1px solid var(--border); padding:8px 24px 16px; box-shadow:0 12px 26px rgba(63,44,65,.12); z-index:49; }
  .nav-links.open a { padding:13px 0; border-bottom:1px solid var(--border); font-size:15px; }
  .nav-links.open a:last-child { border-bottom:0; }
  .nav-links.open .nav-cta-mobile { display:block; color:var(--roxo-700); font-weight:700; }
  /* hero: título primeiro, imagem depois; ritmo compacto */
  .hero { padding:40px 0 40px; }
  .hero-grid { grid-template-columns:1fr; gap:24px; }
  .hero-visual { max-width:300px; margin:4px auto 0; }
  .hero h1 { margin-bottom:14px; }
  .hero .sub { max-width:none; margin-bottom:20px; }
  .showcase, .benefits-split, .md-grid { grid-template-columns:1fr; }
  .showcase { margin-bottom:32px; }
  .prod-flow { grid-template-columns:1fr; gap:24px; max-width:420px; margin:0 auto 36px; }
  .prod-flow li { text-align:left; display:grid; grid-template-columns:52px 1fr; gap:16px; align-items:center; padding:0; }
  .pf-ic { margin:0; }
  .pf-c p { max-width:none; margin:0; }
  .prod-flow li::after { display:none; }
  footer .cols { grid-template-columns:1fr 1fr; }
}
@media(max-width:640px){
  .metrics { grid-template-columns:1fr; gap:22px; }
  .hero-cta { flex-direction:column; }
  .hero-cta .btn { width:100%; }
  .hero-ex { max-width:100%; }
  /* selo no roxo: respiro, não encostar na borda */
  .hero-visual { margin-bottom:6px; }
  .hero-visual .seal { font-size:10px; padding:5px 12px; white-space:normal; text-align:center; }
  /* faixa de prova: textos mais leves, cada um em 1 linha, sem divisor vertical solto */
  .proof-strip { padding:16px 0; }
  .proof-strip .row { gap:10px; }
  .proof-strip .sep { display:none; }
  .proof-strip a, .proof-strip span.pi { font-size:12.5px; font-weight:600; }
  .sticky-cta { display:flex; }
  .whatsapp-float { bottom:78px; }
  footer .cols { grid-template-columns:1fr 1fr; }
  footer .cols>div:first-child { grid-column:1/-1; }
}

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