/* =========================================================
   WeConecta · Design System
   Vanilla CSS. Sem build, sem dependências.
   Ordem: tokens → base → utilitários → componentes → páginas → responsivo
   ========================================================= */

/* ---------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------- */
:root{
  /* Marca: extraída do logo (nuvem em gradiente laranja→vermelho) */
  --brand:        #f2622c;
  --brand-600:    #dd4f1c;
  --brand-700:    #b93f14;
  --brand-400:    #f7913c;
  --brand-300:    #fbb86f;
  --brand-tint:   #fff4ee;
  --brand-soft:   #ffe6d6;
  --grad:         linear-gradient(135deg, #f0492e 0%, #f7a13c 100%);
  --grad-soft:    linear-gradient(135deg, #fff2ea 0%, #fff8f0 100%);

  /* Neutros: frios, leitura "produto de software" */
  --ink:          #14161f;
  --ink-2:        #232838;
  --ink-3:        #394054;
  --muted:        #626b80;
  --muted-2:      #8d95a8;

  --bg:           #ffffff;
  --soft:         #f7f8fc;
  --soft-2:       #eff2f8;
  --line:         #e7eaf2;
  --line-2:       #d8dde9;

  /* Semânticos */
  --ok:           #12a150;
  --ok-soft:      #e6f7ee;
  --warn:         #b4690e;
  --warn-soft:    #fdf3e2;
  --danger:       #d9483b;
  --wa:           #25d366;

  /* Forma */
  --r-sm:         10px;
  --r:            14px;
  --r-lg:         20px;
  --r-xl:         28px;

  --sh-xs:        0 1px 2px rgba(20,22,31,.05);
  --sh-sm:        0 1px 2px rgba(20,22,31,.05), 0 3px 10px rgba(20,22,31,.04);
  --sh:           0 6px 24px rgba(20,22,31,.08);
  --sh-lg:        0 20px 52px rgba(20,22,31,.14);
  --sh-brand:     0 8px 24px rgba(242,98,44,.28);

  /* Tipografia */
  --ff-display:   'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff:           'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ff-mono:      ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Layout */
  --container:    1200px;
  --header-h:     78px;
  --ease:         cubic-bezier(.22,.61,.36,1);
  --ease-out:     cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------
   2. BASE
   --------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 18px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--ff);
  font-size:16px;
  line-height:1.62;
  color:var(--ink-3);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.no-scroll,body.nav-open{ overflow:hidden; }

h1,h2,h3,h4,h5{
  font-family:var(--ff-display);
  color:var(--ink);
  margin:0;
  line-height:1.16;
  font-weight:700;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.nowrap{ white-space:nowrap; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
strong{ font-weight:650; color:var(--ink-2); }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
svg use{ pointer-events:none; }
/* :where() zera a especificidade: o tamanho de cada componente (.c-ico svg, .fab svg...) vence */
svg:where(:not(.sprite):not(.raw)){
  width:1em; height:1em; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  flex-shrink:0;
}

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.container-sm{ max-width:920px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--brand); color:#fff; padding:10px 18px; border-radius:0 0 10px 0; font-weight:600;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--brand-soft); color:var(--ink); }

/* ---------------------------------------------------------
   3. UTILITÁRIOS
   --------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .75s var(--ease-out), transform .75s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.section{ position:relative; padding:96px 0; }
.section.tight{ padding:60px 0; }
.section.soft{ background:var(--soft); }
.section.tinted{ background:linear-gradient(180deg,#fff 0%, var(--brand-tint) 100%); }
/* Fundo quente com trama de pontos: quebra a alternância branco/cinza */
.section.warm{ background:linear-gradient(180deg,#fffaf6 0%, #fff 100%); overflow:hidden; }
.section.warm::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(242,98,44,.12) 1px, transparent 0);
  background-size:24px 24px;
  mask-image:radial-gradient(70% 60% at 50% 0%, #000, transparent);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0%, #000, transparent);
}
.section.warm > .container{ position:relative; }

.section-head{ text-align:center; max-width:760px; margin:0 auto 52px; }
.section-head.left{ text-align:left; margin-inline:0; }
.section-head h2{ font-size:clamp(30px,3.8vw,46px); letter-spacing:-.03em; }
.section-head p{ margin-top:16px; color:var(--muted); font-size:17px; }
/* Título à esquerda, texto de apoio à direita: varia o ritmo das seções centralizadas */
.section-head.split{
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); align-items:end; gap:20px 64px;
  max-width:none; margin:0 0 56px; text-align:left;
}
.section-head.split p{ margin:0; padding-bottom:6px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 14px 6px 11px; border-radius:999px;
  background:var(--brand-tint); border:1px solid var(--brand-soft);
  font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; line-height:1.3;
  color:var(--brand-700); margin-bottom:18px;
}
.eyebrow::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--grad); flex-shrink:0;
  box-shadow:0 0 0 3px rgba(242,98,44,.16);
}
.eyebrow.center{ justify-content:center; }
.eyebrow.plain::before{ display:none; }
.band-dark .eyebrow,.eyebrow.on-dark{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:var(--brand-300); }

.badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px; border-radius:999px; font-size:12.2px; font-weight:650;
  background:var(--brand-tint); color:var(--brand-700); border:1px solid var(--brand-soft);
}
.badge .i{ width:13px; height:13px; }
.badge.neutral{ background:var(--soft-2); color:var(--muted); border-color:var(--line); }
.badge.ok{ background:var(--ok-soft); color:var(--ok); border-color:#c7ecd8; }
.badge.soon{ background:var(--warn-soft); color:var(--warn); border-color:#f4e2c2; }
/* Em homologação: construído e em validação. Azul, para não se confundir com "Em breve" */
.badge.homolog{ background:#ebf2ff; color:#2457c5; border-color:#cfdefb; }

/* ---------------------------------------------------------
   4. BOTÕES
   --------------------------------------------------------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; border-radius:11px; font-size:14.8px; font-weight:650;
  border:1.5px solid transparent; white-space:nowrap; cursor:pointer; overflow:hidden;
  transition:transform .22s var(--ease), box-shadow .28s var(--ease),
             background-color .22s, border-color .22s, color .22s;
}
.btn .i{ width:1.08em; height:1.08em; transition:transform .28s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn:hover .i.arrow{ transform:translateX(3px); }

.btn-primary{ background:var(--grad); color:#fff; box-shadow:var(--sh-brand); background-size:140% 140%; background-position:0% 50%; }
.btn-primary:hover{ background-position:100% 50%; box-shadow:0 14px 32px rgba(242,98,44,.38); }

.btn-outline{ background:#fff; color:var(--ink); border-color:var(--line-2); }
.btn-outline:hover{ border-color:var(--brand); color:var(--brand-600); box-shadow:0 8px 22px rgba(20,22,31,.08); }

.btn-ghost{ background:transparent; color:var(--ink-2); font-weight:600; }
.btn-ghost:hover{ background:var(--soft-2); color:var(--brand-600); }

.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:var(--ink-2); box-shadow:0 12px 28px rgba(20,22,31,.28); }

.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ background:var(--brand-tint); color:var(--brand-700); }

.btn-wa{ background:var(--wa); color:#fff; box-shadow:0 8px 22px rgba(37,211,102,.28); }
.btn-wa:hover{ background:#1eb857; }

.btn-lg{ padding:15px 28px; font-size:15.6px; border-radius:12px; }
.btn-sm{ padding:9px 16px; font-size:13.6px; border-radius:9px; }
.btn-block{ width:100%; }

.link-more{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--brand-600); font-size:14.2px; font-weight:650; padding:0;
  transition:gap .25s var(--ease), color .2s;
}
.link-more .i{ width:1em; height:1em; transition:transform .25s var(--ease); }
.link-more:hover{ color:var(--brand-700); gap:11px; }
.link-more:hover .i{ transform:translateX(2px); }

/* ---------------------------------------------------------
   5. HEADER + NAV
   --------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease), border-color .3s, background-color .3s;
}
.site-header.stuck{
  background:rgba(255,255,255,.95);
  border-bottom-color:var(--line);
  box-shadow:0 4px 22px rgba(20,22,31,.06);
}
.header-inner{ display:flex; align-items:center; gap:22px; min-height:var(--header-h); }

/* Logo oficial (assets/img/logo-weconecta.png, 472×132, 3x da altura exibida) */
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand-logo{ display:block; height:44px; width:auto; }

.main-nav{ margin-left:auto; }
.nav-list{ display:flex; align-items:center; gap:2px; }

.nav-link{
  position:relative; display:inline-flex; align-items:center; gap:5px;
  padding:9px 13px; font-size:14.6px; font-weight:550; color:var(--ink-3); white-space:nowrap;
  border-radius:9px; transition:color .2s, background-color .2s;
}
.nav-link::after{
  content:''; position:absolute; left:13px; right:13px; bottom:1px; height:2px;
  background:var(--grad); border-radius:2px;
  transform:scaleX(0); transform-origin:center; transition:transform .3s var(--ease);
}
.nav-link:hover{ color:var(--brand-600); }
.nav-link:hover::after,.nav-link.is-active::after{ transform:scaleX(1); }
.nav-link.is-active{ color:var(--brand-600); font-weight:650; }
.nav-link .chev{ width:14px; height:14px; transition:transform .25s var(--ease); opacity:.6; }
.has-drop:hover .chev,.drop-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); opacity:1; }

.has-drop{ position:relative; }
.has-drop::before{ content:''; position:absolute; top:100%; left:0; right:0; height:14px; }
.dropdown{
  position:absolute; top:calc(100% + 12px); left:50%; translate:-50% 0;
  width:380px; padding:10px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
}
.has-drop:hover > .dropdown,.dropdown.open{ opacity:1; visibility:visible; transform:translateY(0); }

.dropdown a{
  display:flex; gap:13px; align-items:flex-start; padding:11px 12px; border-radius:12px;
  transition:background-color .2s, transform .22s var(--ease);
}
.dropdown a:hover{ background:var(--brand-tint); transform:translateX(3px); }
.d-ico{
  display:grid; place-items:center; width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:var(--brand-tint); color:var(--brand-600); transition:background .22s, color .22s;
}
.d-ico svg{ width:18px; height:18px; }
.dropdown a:hover .d-ico{ background:var(--grad); color:#fff; }
.dropdown a strong{ display:block; font-size:14.2px; font-weight:650; color:var(--ink); }
.dropdown a em{ display:block; font-size:12.6px; font-style:normal; color:var(--muted); line-height:1.45; margin-top:1px; }
.drop-foot{
  margin:8px 2px 2px; padding:11px 12px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12.8px; color:var(--muted);
}
.dropdown a.is-active{ background:var(--soft); }
.dropdown .drop-foot a{ align-items:center; gap:7px; padding:6px 10px; }

/* Mega menu "Soluções": as duas soluções lado a lado */
.dropdown.mega{ left:-16px; translate:0 0; width:min(720px, calc(100vw - 48px)); padding:12px; }
.mega-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mega-col{ display:grid; align-content:start; gap:2px; }
.dropdown .mega-head{
  align-items:center; gap:12px; margin-bottom:6px; padding:12px 14px;
  background:var(--grad-soft); border:1px solid var(--brand-soft); border-radius:14px;
}
.dropdown .mega-head:hover{ transform:none; border-color:var(--brand-300); background:var(--brand-tint); }
.mega-mark{
  display:grid; place-items:center; width:40px; height:40px; border-radius:12px; flex-shrink:0;
  background:var(--grad); color:#fff; box-shadow:var(--sh-brand);
}
.mega-mark svg{ width:21px; height:21px; }
.dropdown .mega-head strong.wordmark{ font-size:19px; font-weight:800; line-height:1.1; }
.dropdown .mega-head em{ margin-top:2px; }
.mega-go{
  margin-left:auto; width:17px; height:17px; color:var(--brand-600); opacity:.45;
  transition:transform .22s var(--ease), opacity .2s;
}
.mega-head:hover .mega-go{ opacity:1; transform:translateX(3px); }

.header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-actions-mobile{ display:none; }

.hamburger{
  display:none; width:44px; height:44px; border:1px solid var(--line-2); border-radius:11px;
  place-items:center; color:var(--ink); transition:border-color .2s, color .2s, background .2s;
}
.hamburger svg{ width:22px; height:22px; }
.hamburger .ico-close{ display:none; }
.hamburger:hover{ border-color:var(--brand); color:var(--brand); }
body.nav-open .hamburger .ico-menu{ display:none; }
body.nav-open .hamburger .ico-close{ display:block; }
.nav-scrim{
  position:fixed; inset:var(--header-h) 0 0 0; background:rgba(20,22,31,.42);
  z-index:95; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
}
.nav-scrim.show{ opacity:1; visibility:visible; }

/* ---------------------------------------------------------
   6. HERO
   --------------------------------------------------------- */
.hero{ position:relative; overflow:hidden; background:var(--bg); }
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(760px 420px at 82% 8%, rgba(247,161,60,.16), transparent 62%),
    radial-gradient(640px 380px at 6% 0%, rgba(240,73,46,.10), transparent 60%),
    linear-gradient(180deg,#fffaf6 0%, #ffffff 72%);
}
.hero::after{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(circle at 1px 1px, rgba(20,22,31,.055) 1px, transparent 0);
  background-size:26px 26px;
  mask-image:linear-gradient(180deg,#000 0%, transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%, transparent 78%);
}
.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center;
  padding-block:60px 72px;
}
.hero-copy h1{ font-size:clamp(36px,4.9vw,57px); letter-spacing:-.035em; }
.hero-copy .lead{ margin-top:22px; font-size:17.4px; color:var(--muted); max-width:540px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:34px; }
.hero-marks{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:30px;
  font-size:13.6px; color:var(--muted); font-weight:550;
}
.hero-marks span{ display:inline-flex; align-items:center; gap:8px; }
.hero-marks .i{ width:16px; height:16px; color:var(--ok); stroke-width:2.4; }

/* Hero interno (páginas secundárias) */
.page-hero{ position:relative; overflow:hidden; padding:72px 0 68px; background:var(--soft); border-bottom:1px solid var(--line); }
.page-hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(680px 340px at 78% 0%, rgba(247,161,60,.18), transparent 64%),
             linear-gradient(180deg, #fffaf6 0%, var(--soft) 100%);
}
/* Páginas sem visual no hero: anéis e trama de pontos ocupam o lado direito vazio */
.page-hero:not(.split)::after{
  content:''; position:absolute; right:-140px; top:50%; width:640px; height:640px; translate:0 -50%;
  border-radius:50%; pointer-events:none;
  background:
    radial-gradient(circle at center, rgba(242,98,44,.18) 0 70px, transparent 71px),
    repeating-radial-gradient(circle, transparent 0 52px, rgba(242,98,44,.16) 52px 53px);
  mask-image:radial-gradient(closest-side, #000 50%, transparent);
  -webkit-mask-image:radial-gradient(closest-side, #000 50%, transparent);
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero h1{ font-size:clamp(31px,4.2vw,46px); max-width:840px; }
.page-hero p{ margin-top:18px; font-size:17px; color:var(--muted); max-width:660px; }
.crumbs{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted-2); margin-bottom:16px; }
.crumbs a:hover{ color:var(--brand-600); }
.crumbs .i{ width:13px; height:13px; opacity:.6; }
.page-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* ---------------------------------------------------------
   7. MOCKUPS (UI desenhada em CSS, sem imagens externas)
   --------------------------------------------------------- */
.mock{
  position:relative; border-radius:var(--r-xl); background:#fff;
  border:1px solid var(--line); box-shadow:var(--sh-lg); overflow:hidden;
}
.mock-bar{
  display:flex; align-items:center; gap:7px; padding:12px 16px;
  background:var(--soft); border-bottom:1px solid var(--line);
}
.mock-dot{ width:9px; height:9px; border-radius:50%; background:var(--line-2); }
.mock-dot:nth-child(1){ background:#f6685e; }
.mock-dot:nth-child(2){ background:#f7b955; }
.mock-dot:nth-child(3){ background:#4fc47c; }
.mock-url{
  margin-left:10px; flex:1; min-width:0; height:22px; border-radius:6px; background:#fff;
  border:1px solid var(--line); display:block; padding:0 10px; line-height:20px;
  font-size:10.8px; color:var(--muted-2); font-family:var(--ff-mono);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Conversa WhatsApp */
.chat{ background:#ece5dd; padding:16px 14px; display:grid; gap:9px; }
.chat-head{
  display:flex; align-items:center; gap:11px; padding:11px 14px;
  background:#075e54; color:#fff;
}
.chat-head .av{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.22);
  display:grid; place-items:center; font-size:13px; font-weight:700;
}
.chat-head strong{ display:block; font-size:13.6px; color:#fff; font-weight:650; }
.chat-head small{ display:block; font-size:11px; opacity:.75; }
.bub{
  max-width:82%; padding:9px 13px; border-radius:12px; font-size:13.4px; line-height:1.5;
  background:#fff; color:#2b3140; box-shadow:0 1px 1px rgba(0,0,0,.07); position:relative;
  animation:bubIn .45s var(--ease-out) both;
}
.bub.me{ margin-left:auto; background:#d9fdd3; }
.bub.has-btns{ overflow:hidden; }
.bub .t{ display:block; text-align:right; font-size:10px; color:var(--muted-2); margin-top:3px; }
/* Botões interativos do WhatsApp (o paciente toca, não digita número) */
.bub .btns{ display:grid; gap:1px; margin:9px -13px -9px; }
.bub .wbtn{
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 10px; background:#fff; color:#0a7cff;
  font-size:13px; font-weight:600; border-top:1px solid rgba(0,0,0,.09);
}
.bub .wbtn:first-child{ border-radius:0; }
.bub .wbtn:last-child{ border-radius:0 0 12px 12px; }
.bub .wbtn svg{ width:14px; height:14px; }
@keyframes bubIn{ from{ opacity:0; transform:translateY(9px) scale(.97); } to{ opacity:1; transform:none; } }
.chat .bub:nth-child(2){ animation-delay:.15s; }
.chat .bub:nth-child(3){ animation-delay:.3s; }
.chat .bub:nth-child(4){ animation-delay:.45s; }
.chat .bub:nth-child(5){ animation-delay:.6s; }
.typing{ display:inline-flex; gap:4px; align-items:center; padding:3px 0; }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--muted-2); animation:blink 1.3s infinite; }
.typing i:nth-child(2){ animation-delay:.18s; }
.typing i:nth-child(3){ animation-delay:.36s; }
@keyframes blink{ 0%,60%,100%{ opacity:.28; } 30%{ opacity:1; } }

/* Painel / agenda */
.panel{ padding:18px; display:grid; gap:14px; background:#fff; }
.panel-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.panel-row h4{ font-size:14.5px; }
.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.kpi{ background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:12px; }
.kpi b{ display:block; font-family:var(--ff-display); font-size:20px; color:var(--ink); line-height:1.1; }
.kpi span{ display:block; font-size:11px; color:var(--muted); margin-top:3px; }
.kpi .delta{ display:inline-flex; align-items:center; gap:3px; font-size:10.6px; font-weight:700; color:var(--ok); margin-top:5px; }

.slots{ display:grid; gap:8px; }
.slot{
  display:flex; align-items:center; gap:11px; padding:10px 12px;
  border:1px solid var(--line); border-radius:11px; background:#fff;
  transition:border-color .22s, transform .22s var(--ease), box-shadow .22s;
}
.slot:hover{ border-color:var(--brand-soft); transform:translateX(3px); box-shadow:var(--sh-xs); }
.slot .hh{ font-family:var(--ff-mono); font-size:12px; font-weight:600; color:var(--ink); width:42px; }
.slot .nm{ flex:1; font-size:12.8px; color:var(--ink-3); }
.slot .st{ font-size:10.4px; font-weight:700; padding:3px 9px; border-radius:999px; letter-spacing:.03em; }
.st.ok{ background:var(--ok-soft); color:var(--ok); }
.st.wait{ background:var(--warn-soft); color:var(--warn); }
.st.free{ background:var(--brand-tint); color:var(--brand-700); }
.st.high{ background:#fdeceb; color:#c0392b; }
.st.mid{ background:var(--warn-soft); color:var(--warn); }
.st.low{ background:var(--ok-soft); color:var(--ok); }

.bars{ display:flex; align-items:flex-end; gap:6px; height:74px; }
.bars i{ flex:1; height:40%; background:var(--soft-2); border-radius:5px 5px 2px 2px; transition:height .8s var(--ease-out); }
.bars i.on{ background:var(--grad); }

/* Cartão de saúde */
.hcard{ padding:18px; background:linear-gradient(170deg,#fff 0%,var(--brand-tint) 100%); display:grid; gap:13px; }
.hcard-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.gauge{ position:relative; height:9px; border-radius:999px; background:var(--soft-2); overflow:hidden; }
.gauge i{ position:absolute; inset:0 auto 0 0; border-radius:999px; background:linear-gradient(90deg,#12a150,#f7b955,#e8503f); }
.gauge-marks{ display:flex; justify-content:space-between; font-size:10.4px; color:var(--muted-2); }
.hcard-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.hcell{ background:#fff; border:1px solid var(--line); border-radius:11px; padding:10px 11px; }
.hcell b{ display:block; font-size:12.6px; color:var(--ink); }
.hcell span{ display:block; font-size:10.8px; color:var(--muted); }

/* Editor de fluxo */
.flowmap{ position:relative; background:var(--soft); padding:20px; min-height:230px; }
.flowmap::before{
  content:''; position:absolute; inset:0; opacity:.55;
  background-image:radial-gradient(circle at 1px 1px, rgba(20,22,31,.09) 1px, transparent 0);
  background-size:18px 18px;
}
.node{
  position:relative; z-index:2; background:#fff; border:1px solid var(--line-2); border-radius:11px;
  padding:9px 12px; font-size:12.2px; font-weight:600; color:var(--ink); box-shadow:var(--sh-xs);
  display:inline-flex; align-items:center; gap:8px; transition:border-color .22s, box-shadow .22s, transform .22s;
}
.node:hover{ border-color:var(--brand); box-shadow:var(--sh-sm); transform:translateY(-2px); }
.node .dotc{ width:7px; height:7px; border-radius:50%; background:var(--grad); }
.node.alt .dotc{ background:var(--ok); }
.flow-rows{ position:relative; z-index:2; display:grid; gap:16px; }
.flow-rows .r{ display:flex; gap:12px; flex-wrap:wrap; }
.flow-rows .r.indent{ padding-left:34px; }
.wire{ position:absolute; left:26px; top:34px; bottom:34px; width:2px; background:var(--line-2); z-index:1; }

@media (prefers-reduced-motion: reduce){ .bub{ animation:none; } }

.hero-visual{ position:relative; }
.hero-visual::before{
  content:''; position:absolute; inset:8% -6% 4% 10%; z-index:-1; border-radius:60px;
  background:var(--grad); opacity:.18; filter:blur(60px);
}
.hero-visual::after{
  content:''; position:absolute; z-index:-1; width:180px; height:180px; left:-40px; bottom:-30px;
  background-image:radial-gradient(circle at 2px 2px, rgba(242,98,44,.35) 1.4px, transparent 0);
  background-size:16px 16px;
  mask-image:radial-gradient(closest-side, #000 40%, transparent);
  -webkit-mask-image:radial-gradient(closest-side, #000 40%, transparent);
}

/* Tríptico do hero: um card por serviço da plataforma */
.svc-stack{ display:grid; gap:15px; }
.svc-stack .mock{
  border-radius:var(--r-lg);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.svc-stack .mock:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:var(--brand-soft); }
.svc-stack .mock:nth-child(1){ margin-right:46px; }
.svc-stack .mock:nth-child(2){ margin-left:46px; }
.svc-stack .mock:nth-child(3){ margin-right:24px; }

.svc-head{
  display:flex; align-items:center; gap:11px; padding:12px 15px;
  background:var(--soft); border-bottom:1px solid var(--line);
}
.svc-ico{
  display:grid; place-items:center; width:32px; height:32px; border-radius:9px;
  background:var(--grad); color:#fff; flex-shrink:0;
  transition:transform .3s var(--ease);
}
.svc-ico svg{ width:17px; height:17px; }
.svc-stack .mock:hover .svc-ico{ transform:scale(1.08) rotate(-4deg); }
.svc-head strong{ display:block; font-family:var(--ff-display); font-size:13.6px; color:var(--ink); line-height:1.2; }
.svc-head small{ display:block; font-size:11.2px; color:var(--muted); }
.svc-head .badge{ margin-left:auto; flex-shrink:0; padding:4px 9px; font-size:10.8px; }
.svc-stack .panel{ padding:14px 15px; gap:10px; }
.svc-stack .chat{ padding:13px 12px; gap:7px; }
.svc-stack .bub{ font-size:12.6px; padding:8px 12px; }
.svc-stack .bub .wbtn{ font-size:12.2px; padding:8px 10px; }
.svc-stack .flowmap{ padding:15px; min-height:0; }
.svc-stack .flow-rows{ gap:11px; }
.svc-stack .node{ font-size:11.4px; padding:7px 10px; }

@media (max-width:1024px){
  .svc-stack .mock:nth-child(n){ margin-inline:0; }
}

/* ---------------------------------------------------------
   7b. GALERIA DE TELAS (+ lightbox)
   --------------------------------------------------------- */
.shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.shot{ margin:0; }
.shot button{
  display:block; width:100%; padding:0; overflow:hidden; cursor:zoom-in;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-sm); position:relative;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.shot button:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:var(--brand-soft); }
.shot img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top center; display:block; }
.shot button::after{
  content:''; position:absolute; inset:0; background:rgba(20,22,31,.34);
  opacity:0; transition:opacity .3s var(--ease);
}
.shot .zoom{
  position:absolute; z-index:2; left:50%; top:50%; translate:-50% -50%;
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:#fff; color:var(--brand-600); box-shadow:var(--sh);
  opacity:0; transform:translate(-50%,-50%) scale(.85);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.shot .zoom svg{ width:21px; height:21px; }
.shot button:hover::after{ opacity:1; }
.shot button:hover .zoom,.shot button:focus-visible .zoom{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.shot figcaption{
  margin-top:12px; font-size:13.4px; color:var(--ink-3); font-weight:550; line-height:1.45;
}
.shot figcaption em{ display:block; font-style:normal; font-size:12.4px; color:var(--muted); font-weight:400; }

.lightbox{ position:fixed; inset:0; z-index:220; display:none; }
.lightbox.open{ display:grid; place-items:center; padding:28px; }
.lightbox-backdrop{ position:absolute; inset:0; background:rgba(20,22,31,.82); backdrop-filter:blur(5px); animation:fadeIn .25s var(--ease); }
.lightbox figure{
  position:relative; z-index:2; margin:0; max-width:min(1180px,100%); max-height:100%;
  display:flex; flex-direction:column; gap:14px; animation:popIn .3s var(--ease-out);
}
.lightbox img{
  width:100%; max-height:calc(100vh - 150px); object-fit:contain;
  border-radius:var(--r); background:#fff; box-shadow:var(--sh-lg);
}
.lightbox figcaption{ text-align:center; color:rgba(255,255,255,.86); font-size:14.2px; }
.lightbox .lb-close{
  position:absolute; top:-16px; right:-16px; z-index:3; display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%; background:#fff; color:var(--ink);
  box-shadow:var(--sh-lg); transition:background .2s, color .2s, transform .25s var(--ease);
}
.lightbox .lb-close svg{ width:20px; height:20px; }
.lightbox .lb-close:hover{ background:var(--brand); color:#fff; transform:rotate(90deg); }
.lightbox .lb-nav{
  position:absolute; z-index:3; top:50%; translate:0 -50%; display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff;
  border:1px solid rgba(255,255,255,.22); transition:background .22s, transform .22s var(--ease);
}
.lightbox .lb-nav svg{ width:22px; height:22px; }
.lightbox .lb-nav.prev{ left:-62px; transform:rotate(90deg); }
.lightbox .lb-nav.next{ right:-62px; transform:rotate(-90deg); }
.lightbox .lb-nav:hover{ background:var(--brand); border-color:transparent; }

@media (max-width:900px){
  .shots{ grid-template-columns:repeat(2,1fr); }
  .lightbox .lb-nav.prev{ left:4px; }
  .lightbox .lb-nav.next{ right:4px; }
  .lightbox .lb-close{ top:-14px; right:-4px; }
}
@media (max-width:560px){
  .shots{ grid-template-columns:1fr; }
  .lightbox.open{ padding:16px; }
}

/* ---------------------------------------------------------
   7c. CREDENCIAIS (faixa escura de embasamento)
   --------------------------------------------------------- */
.creds{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:var(--ink); padding:34px 38px; margin-bottom:32px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px 32px;
}
.creds::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(620px 320px at 88% 0%, rgba(242,98,44,.28), transparent 62%),
             radial-gradient(420px 260px at 4% 100%, rgba(247,161,60,.14), transparent 62%);
}
.creds::after{
  content:''; position:absolute; inset:0; opacity:.3;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(80% 80% at 50% 50%, #000, transparent);
  -webkit-mask-image:radial-gradient(80% 80% at 50% 50%, #000, transparent);
}
.cred{ position:relative; z-index:2; }
.cred .ci{
  display:grid; place-items:center; width:40px; height:40px; border-radius:11px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14);
  color:var(--brand-400); margin-bottom:14px;
  transition:background .3s var(--ease), color .3s, transform .3s var(--ease);
}
.cred .ci svg{ width:20px; height:20px; }
.cred:hover .ci{ background:var(--grad); border-color:transparent; color:#fff; transform:translateY(-3px); }
.cred h4{
  font-family:var(--ff-display); font-size:15.4px; font-weight:700; color:#fff;
  letter-spacing:-.01em; margin-bottom:8px;
}
.cred p{ font-size:13.4px; color:rgba(255,255,255,.66); line-height:1.6; }
.cred p strong{ color:rgba(255,255,255,.92); font-weight:650; }

.creds.five{ grid-template-columns:repeat(5,1fr); gap:22px 24px; }
.creds.five .cred h4{ font-size:14.6px; }
.creds.five .cred p{ font-size:12.8px; }
@media (max-width:1100px){ .creds.five{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){ .creds{ grid-template-columns:1fr 1fr; padding:30px 28px; } .creds.five{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .creds{ grid-template-columns:1fr; padding:26px 22px; gap:22px; } }

/* ---------------------------------------------------------
   7d. CAMINHOS DE INTEGRAÇÃO (duas rotas lado a lado)
   --------------------------------------------------------- */
.paths{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.path{
  position:relative; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-xl);
  padding:32px 30px; box-shadow:var(--sh-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.path:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:var(--brand-soft); }
.path.is-featured{ border-color:var(--brand); box-shadow:0 16px 40px rgba(242,98,44,.16); }
.path-flag{
  position:absolute; top:-13px; left:30px;
  padding:5px 14px; border-radius:999px; background:var(--grad); color:#fff;
  font-size:11.2px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  box-shadow:var(--sh-brand); white-space:nowrap;
}
.path-head{ display:flex; align-items:flex-start; gap:14px; }
.path-ico{
  display:grid; place-items:center; width:48px; height:48px; border-radius:14px; flex-shrink:0;
  background:var(--brand-tint); color:var(--brand-600);
  transition:background .3s, color .3s, transform .3s var(--ease);
}
.path-ico svg{ width:24px; height:24px; }
.path:hover .path-ico{ background:var(--grad); color:#fff; transform:translateY(-2px) scale(1.05); }
.path-head h3{ font-size:19px; }
.path-head p{ margin-top:6px; font-size:13.8px; color:var(--muted); line-height:1.55; }

.path .timeline{ margin-top:20px; }
.path .timeline::before{ left:15px; top:10px; bottom:10px; }
.path .tl-item{ grid-template-columns:32px 1fr; gap:15px; padding:10px 0; }
.path .tl-dot{ width:32px; height:32px; font-family:var(--ff-display); font-size:13px; font-weight:800; }
.path .tl-body h3{ font-size:15px; }
.path .tl-body p{ margin-top:5px; font-size:13.4px; }
.path-foot{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
.path-foot .tag{ font-size:12px; }

@media (max-width:900px){ .paths{ grid-template-columns:1fr; gap:30px; } }
@media (max-width:560px){ .path{ padding:26px 22px; } .path-flag{ left:22px; } }

/* ---------------------------------------------------------
   8. CARDS GENÉRICOS
   --------------------------------------------------------- */
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 24px; box-shadow:var(--sh-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:var(--brand-soft); }
.card h3{ font-size:18.5px; }
.card p{ margin-top:10px; font-size:14.4px; color:var(--muted); line-height:1.62; }

.c-ico{
  display:grid; place-items:center; width:48px; height:48px; border-radius:14px;
  background:var(--brand-tint); color:var(--brand-600); margin-bottom:18px;
  transition:transform .35s var(--ease), background .35s, color .35s;
}
.c-ico svg{ width:23px; height:23px; }
.card:hover .c-ico{ background:var(--grad); color:#fff; transform:translateY(-3px) scale(1.05); }

.card-list{ display:grid; gap:9px; margin-top:16px; }
.card-list li{ display:flex; gap:9px; align-items:flex-start; font-size:13.8px; color:var(--ink-3); }
.card-list .i{ width:15px; height:15px; color:var(--brand); stroke-width:2.4; flex-shrink:0; margin-top:4px; }

/* Card com destaque no topo */
.card.accent::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px; border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:var(--grad); opacity:0; transition:opacity .3s;
}
.card.accent:hover::before{ opacity:1; }

/* ---------------------------------------------------------
   9. PRODUTOS (linhas alternadas)
   --------------------------------------------------------- */
.prod{ padding:64px 0; border-bottom:1px solid var(--line); }
.prod:nth-child(even){ background:var(--soft); }
.prod-grid{ display:grid; grid-template-columns:1fr 1.06fr; gap:56px; align-items:center; }
.prod:nth-child(even) .prod-media{ order:-1; }
.prod h2,.prod-grid > div > h2{ font-size:clamp(26px,3.1vw,36px); }
.prod .lead,.prod-grid .lead{ margin-top:16px; font-size:16.4px; color:var(--muted); }
.prod-feats{ display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin:26px 0 28px; }
.prod-feats li{ display:flex; gap:10px; align-items:flex-start; font-size:14.2px; color:var(--ink-3); }
.prod-feats .i{ width:16px; height:16px; color:var(--brand); stroke-width:2.4; flex-shrink:0; margin-top:4px; }
.prod-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.prod-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.tag{
  padding:5px 11px; border-radius:8px; font-size:11.8px; font-weight:600;
  background:var(--soft-2); color:var(--muted); border:1px solid var(--line);
  transition:background .22s, color .22s, border-color .22s;
}
.prod:hover .tag,.card:hover .tag{ border-color:var(--line-2); }
.tag:hover{ background:var(--brand-tint); color:var(--brand-700); border-color:var(--brand-soft); }

/* ---------------------------------------------------------
   10. MÓDULOS (grade com estado)
   --------------------------------------------------------- */
.mod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.mod-group{ margin-bottom:36px; }
.mod-group:last-child{ margin-bottom:0; }
.mod-group > h3{
  display:flex; align-items:center; gap:13px; margin-bottom:18px;
  font-size:19.5px; font-weight:700; color:var(--ink); letter-spacing:-.015em;
}
.mod-group > h3::before{ content:''; width:5px; height:22px; border-radius:3px; background:var(--grad); flex-shrink:0; }
.mod-group > h3::after{ content:''; flex:1; height:1px; background:var(--line); }
.mod{
  position:relative; display:flex; flex-direction:column; text-align:left; width:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px 20px;
  box-shadow:var(--sh-xs); cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s;
}
.mod:hover{ transform:translateY(-5px); box-shadow:var(--sh); border-color:var(--brand); }
.mod-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.m-ico{
  display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  background:var(--brand-tint); color:var(--brand-600); transition:background .25s, color .25s;
}
.m-ico svg{ width:21px; height:21px; }
.mod:hover .m-ico{ background:var(--grad); color:#fff; }
.mod h3{ font-size:17.4px; }
.mod p{ margin-top:8px; font-size:13.6px; color:var(--muted); line-height:1.58; flex:1; }
.mod .link-more{ margin-top:16px; font-size:13.2px; }
.mod.is-soon{ background:var(--soft); }
.mod.is-soon .m-ico{ background:var(--soft-2); color:var(--muted); }
.mod.is-soon:hover .m-ico{ background:var(--muted); color:#fff; }

/* ---------------------------------------------------------
   11. SEGMENTOS
   --------------------------------------------------------- */
/* Controle segmentado: um trilho só, a aba ativa em tinta */
.seg-tabs{
  display:flex; gap:4px; width:fit-content; max-width:100%; margin:0 auto 34px; padding:6px;
  background:#fff; border:1px solid var(--line); border-radius:999px; box-shadow:var(--sh-sm);
  overflow-x:auto; scrollbar-width:none;
}
.seg-tabs::-webkit-scrollbar{ display:none; }
.seg-tab{
  display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border-radius:999px; flex-shrink:0;
  font-size:14px; font-weight:600; color:var(--muted); white-space:nowrap;
  transition:background-color .25s var(--ease), color .25s, box-shadow .25s;
}
.seg-tab .i{ width:17px; height:17px; }
.seg-tab:hover{ color:var(--ink); background:var(--soft); }
.seg-tab.active{ background:var(--ink); color:#fff; box-shadow:0 6px 16px rgba(20,22,31,.18); }
.seg-tab.active .i{ color:var(--brand-400); }

.seg-panel{ display:none; }
.seg-panel.active{ display:block; animation:fadeUp .45s var(--ease-out); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* Texto à esquerda; os números num painel quente colado na borda do cartão */
.seg-body{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh);
}
.seg-body h3{ font-size:clamp(23px,2.6vw,30px); }
.seg-body > div > p{ margin-top:14px; color:var(--muted); font-size:15.6px; }
.seg-body > div:first-child{ padding:48px; }
.seg-body > .seg-stats{
  position:relative; gap:0; align-content:stretch; padding:28px;
  background:var(--grad-soft); border-left:1px solid var(--brand-soft);
}
.seg-body > .seg-stats::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(242,98,44,.14) 1px, transparent 0);
  background-size:20px 20px;
  mask-image:radial-gradient(80% 70% at 100% 0%, #000, transparent);
  -webkit-mask-image:radial-gradient(80% 70% at 100% 0%, #000, transparent);
}
/* Os quatro números em lista: termo em destaque à esquerda, explicação à direita */
.seg-body > .seg-stats{ grid-template-columns:1fr; padding:16px 44px; }
.seg-body > .seg-stats .seg-stat{
  position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:6px 24px;
  background:transparent; border:0; border-radius:0; padding:22px 0;
}
.seg-body > .seg-stats .seg-stat + .seg-stat{ border-top:1px solid rgba(242,98,44,.18); }
.seg-body > .seg-stats .seg-stat:hover{ transform:none; }
.seg-body > .seg-stats .seg-stat b{
  font-size:clamp(22px,2.2vw,28px); letter-spacing:-.03em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.seg-body > .seg-stats .seg-stat span{ margin:0; font-size:14px; line-height:1.5; }
.seg-pains{ display:grid; gap:11px; margin:24px 0; }
.seg-pains li{ display:flex; gap:11px; align-items:flex-start; font-size:14.2px; }
.seg-pains .i{ width:18px; height:18px; color:var(--brand); flex-shrink:0; margin-top:3px; }
.seg-stats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.seg-stat{
  background:var(--soft); border:1px solid var(--line); border-radius:var(--r); padding:18px;
  transition:border-color .25s, transform .25s var(--ease);
}
.seg-stat:hover{ border-color:var(--brand-soft); transform:translateY(-3px); }
.seg-stat b{ display:block; font-family:var(--ff-display); font-size:26px; color:var(--ink); line-height:1.1; }
.seg-stat span{ display:block; font-size:12.6px; color:var(--muted); margin-top:5px; }

/* ---------------------------------------------------------
   12. PASSOS / TIMELINE
   --------------------------------------------------------- */
/* Trilha conectada: número em destaque, linha ligando um passo ao próximo */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; counter-reset:step; }
.step{ position:relative; display:flex; flex-direction:column; align-items:flex-start; }
.step::before{
  content:''; position:absolute; top:25px; left:66px; right:-22px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--brand-300), var(--line-2));
}
.step:last-child::before{ display:none; }
.step .num{
  counter-increment:step; position:relative; z-index:1; display:grid; place-items:center;
  width:52px; height:52px; border-radius:16px; margin-bottom:22px;
  background:#fff; color:var(--brand-600); border:1.5px solid var(--brand-soft);
  box-shadow:0 8px 22px rgba(242,98,44,.12);
  font-family:var(--ff-display); font-weight:800; font-size:19px; letter-spacing:-.02em;
  transition:background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.step .num::after{ content:counter(step, decimal-leading-zero); }
.step:hover .num{ background:var(--grad); color:#fff; border-color:transparent; transform:translateY(-3px); }
.step h3{ font-size:18px; }
.step p{ margin-top:10px; font-size:14.2px; color:var(--muted); line-height:1.62; }
.step .when{
  order:-1; position:absolute; top:13px; right:0;
  padding:4px 10px; border-radius:999px; background:var(--soft-2);
  font-size:10.8px; font-weight:700; color:var(--ink-3); letter-spacing:.05em; text-transform:uppercase;
}
.section.soft .step .when,.section.warm .step .when,.section.tinted .step .when{ background:#fff; border:1px solid var(--line); }

.timeline{ display:grid; gap:0; position:relative; }
.timeline::before{ content:''; position:absolute; left:19px; top:14px; bottom:14px; width:2px; background:var(--line); }
.tl-item{ position:relative; display:grid; grid-template-columns:40px 1fr; gap:20px; padding:16px 0; }
.tl-dot{
  position:relative; z-index:2; display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%; background:#fff;
  border:2px solid var(--line); color:var(--brand-600);
  transition:border-color .3s, background .3s, color .3s, transform .3s var(--ease);
}
.tl-dot svg{ width:18px; height:18px; }
.tl-item:hover .tl-dot{ border-color:transparent; background:var(--grad); color:#fff; transform:scale(1.07); }
.tl-body h3{ font-size:17px; }
.tl-body p{ margin-top:7px; font-size:14.2px; color:var(--muted); }

/* ---------------------------------------------------------
   13. PLANOS
   --------------------------------------------------------- */
.plan-toggle{
  display:inline-flex; align-items:center; gap:6px; padding:5px; border-radius:999px;
  background:var(--soft-2); border:1px solid var(--line); margin:0 auto 12px; position:relative;
}
.plan-toggle button{
  position:relative; z-index:2; padding:9px 20px; border-radius:999px; font-size:13.8px; font-weight:650;
  color:var(--muted); transition:color .25s;
}
.plan-toggle button.active{ color:#fff; }
.plan-toggle .knob{
  position:absolute; z-index:1; top:5px; bottom:5px; left:5px; border-radius:999px;
  background:var(--grad); box-shadow:var(--sh-brand);
  transition:transform .32s var(--ease), width .32s var(--ease);
}
.toggle-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:44px; }
.toggle-note{ font-size:12.8px; color:var(--muted); }
.toggle-note b{ color:var(--ok); }

.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.plan{
  position:relative; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-xl);
  padding:32px 28px; box-shadow:var(--sh-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.plan:hover{ transform:translateY(-7px); box-shadow:var(--sh-lg); border-color:var(--brand-soft); }
.plan.featured{
  border-color:var(--brand); box-shadow:0 18px 44px rgba(242,98,44,.18);
  transform:scale(1.025);
}
.plan.featured:hover{ transform:scale(1.025) translateY(-7px); }
.plan-flag{
  position:absolute; top:-13px; left:50%; translate:-50% 0;
  padding:5px 15px; border-radius:999px; background:var(--grad); color:#fff;
  font-size:11.4px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:var(--sh-brand); white-space:nowrap;
}
.plan h3{ font-size:20px; }
.plan .plan-for{ margin-top:7px; font-size:13.4px; color:var(--muted); min-height:40px; }
.plan-price{ margin:22px 0 6px; display:flex; align-items:flex-end; gap:5px; flex-wrap:wrap; }
.plan-price .cur{ font-size:16px; font-weight:650; color:var(--muted); margin-bottom:7px; }
.plan-price .val{
  font-family:var(--ff-display); font-size:44px; font-weight:800; color:var(--ink);
  line-height:1; letter-spacing:-.035em;
}
.plan-price .per{ font-size:13.6px; color:var(--muted); margin-bottom:6px; }
.plan-price.custom .val{ font-size:30px; }
.plan-old{ font-size:12.8px; color:var(--muted-2); min-height:19px; }
.plan-old s{ opacity:.8; }
.plan .btn{ margin:20px 0 22px; }
.plan-feats{ display:grid; gap:11px; padding-top:22px; border-top:1px solid var(--line); }
.plan-feats li{ display:flex; gap:10px; align-items:flex-start; font-size:13.9px; color:var(--ink-3); }
.plan-feats .i{ width:15px; height:15px; color:var(--ok); stroke-width:2.6; flex-shrink:0; margin-top:4px; }
.plan-feats li.off{ color:var(--muted-2); }
.plan-feats li.off .i{ color:var(--line-2); }
.plan-note{ margin-top:18px; font-size:12.2px; color:var(--muted-2); line-height:1.55; }

/* Calculadora */
.calc{
  display:grid; grid-template-columns:1.15fr .85fr; gap:0;
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh); background:#fff;
}
.calc-form{ padding:36px; }
.calc-form h3{ font-size:22px; }
.calc-form > p{ margin-top:10px; font-size:14.2px; color:var(--muted); }
.calc-field{ margin-top:24px; }
.calc-field label{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:13.6px; font-weight:650; color:var(--ink-2); margin-bottom:11px; }
.calc-field label b{ font-family:var(--ff-display); font-size:17px; color:var(--brand-600); }
input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px;
  background:var(--soft-2); outline:none; cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:#fff; border:3px solid var(--brand); box-shadow:var(--sh-sm); cursor:grab;
  transition:transform .2s var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover{ transform:scale(1.14); }
input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:#fff;
  border:3px solid var(--brand); box-shadow:var(--sh-sm); cursor:grab;
}
.calc-opts{ display:flex; flex-wrap:wrap; gap:9px; }
.calc-out{ padding:36px; background:var(--ink); color:#fff; display:flex; flex-direction:column; }
.calc-out h4{ color:#fff; font-size:14px; font-weight:600; opacity:.65; letter-spacing:.05em; text-transform:uppercase; }
.calc-total{ margin-top:16px; display:flex; align-items:flex-end; gap:6px; }
.calc-total .cur{ font-size:17px; opacity:.7; margin-bottom:9px; }
.calc-total .val{ font-family:var(--ff-display); font-size:46px; font-weight:800; line-height:1; letter-spacing:-.035em; }
.calc-total .per{ font-size:14px; opacity:.65; margin-bottom:7px; }
.calc-break{ margin-top:24px; display:grid; gap:11px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); }
.calc-break li{ display:flex; justify-content:space-between; gap:12px; font-size:13.4px; }
.calc-break li span{ opacity:.7; }
.calc-break li b{ font-weight:650; color:#fff; }
.calc-break li.sum{ padding-top:12px; margin-top:2px; border-top:1px solid rgba(255,255,255,.14); font-size:14.4px; }
.calc-out .btn{ margin-top:auto; }
.calc-out .hint{ margin-top:14px; font-size:11.6px; opacity:.55; line-height:1.55; }

/* Comparativo */
.compare-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; box-shadow:var(--sh-sm); }
table.compare{ width:100%; border-collapse:collapse; min-width:720px; }
table.compare th,table.compare td{ padding:14px 18px; text-align:left; font-size:14px; border-bottom:1px solid var(--line); }
table.compare thead th{
  position:sticky; top:0; background:var(--soft); font-family:var(--ff-display); font-size:14.5px;
  color:var(--ink); font-weight:700; border-bottom:1px solid var(--line-2); z-index:2;
}
table.compare thead th:not(:first-child),table.compare td:not(:first-child){ text-align:center; width:150px; }
table.compare tbody tr{ transition:background .2s; }
table.compare tbody tr:hover{ background:var(--brand-tint); }
table.compare td:first-child{ color:var(--ink-2); font-weight:550; }
table.compare .grp td{ background:var(--soft); font-family:var(--ff-display); font-weight:700; color:var(--ink); font-size:13px; letter-spacing:.06em; text-transform:uppercase; }
table.compare .yes{ color:var(--ok); }
table.compare .no{ color:var(--line-2); }
table.compare svg{ width:18px; height:18px; stroke-width:2.4; }

/* ---------------------------------------------------------
   14. FAQ
   --------------------------------------------------------- */
/* Acordeão em fios, sem caixa por pergunta */
.faq{ display:grid; max-width:840px; margin-inline:auto; border-top:1px solid var(--line-2); }
.faq-item{ border-bottom:1px solid var(--line-2); transition:border-color .25s; }
.faq-item.open{ border-bottom-color:var(--brand-300); }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%;
  padding:22px 2px; text-align:left; font-size:17px; font-weight:650; line-height:1.35;
  font-family:var(--ff-display); color:var(--ink); letter-spacing:-.01em; transition:color .2s;
}
.faq-q:hover{ color:var(--brand-600); }
.faq-q .i{
  width:34px; height:34px; padding:8px; border-radius:50%; flex-shrink:0;
  background:var(--brand-tint); color:var(--brand-600); stroke-width:2;
  transition:transform .3s var(--ease), background-color .25s, color .25s;
}
.faq-q:hover .i{ background:var(--brand-soft); }
.faq-item.open .faq-q .i{ transform:rotate(180deg); background:var(--grad); color:#fff; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a p{ padding:0 60px 24px 2px; font-size:15px; color:var(--muted); line-height:1.7; }

/* Home: título e atalho à esquerda, perguntas à direita */
.faq-split{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px 72px; align-items:start; }
.faq-split .section-head{ position:sticky; top:calc(var(--header-h) + 32px); margin:0; }
.faq-split .faq{ max-width:none; margin:0; }
.faq-split .section-head .btn{ margin-top:28px; }

/* ---------------------------------------------------------
   15. BANDAS ESCURAS / CTA
   --------------------------------------------------------- */
.band-dark{ position:relative; background:var(--ink); color:#fff; overflow:hidden; }
.band-dark::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(680px 380px at 84% 12%, rgba(242,98,44,.26), transparent 62%),
             radial-gradient(520px 300px at 8% 96%, rgba(247,161,60,.14), transparent 62%);
}
.band-dark::after{
  content:''; position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(80% 80% at 50% 50%, #000, transparent);
  -webkit-mask-image:radial-gradient(80% 80% at 50% 50%, #000, transparent);
}
.band-dark .container{ position:relative; z-index:2; }
.band-dark h2,.band-dark h3{ color:#fff; }
.band-dark p{ color:rgba(255,255,255,.72); }
.band-dark .section-head p{ color:rgba(255,255,255,.72); }

.metrics{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-block:1px solid rgba(255,255,255,.1);
}
.metric{ position:relative; padding:34px 28px 32px; }
.metric + .metric{ border-left:1px solid rgba(255,255,255,.1); }
.metric::before{
  content:''; position:absolute; top:-1px; left:28px; width:36px; height:2px; background:var(--grad);
}
.metric b{
  display:block; font-family:var(--ff-display); font-size:clamp(38px,4.4vw,56px);
  font-weight:800; line-height:1; letter-spacing:-.04em; white-space:nowrap;
  background:linear-gradient(135deg,#fff 30%, var(--brand-300)); -webkit-background-clip:text;
  background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.metric span{ display:block; margin-top:14px; font-size:14.2px; line-height:1.55; color:rgba(255,255,255,.66); max-width:230px; }

/* Case de cliente na faixa escura: logo em chip branco (a marca do cliente não
   depende do contraste do fundo), linha de apoio e os dois valores financeiros. */
.case-logo{
  display:block; margin:0 auto 22px; height:58px; width:auto;
  padding:11px 20px; background:#fff; border-radius:14px;
}
.case-foot{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 44px;
  align-items:center; margin-top:34px;
}
.case-foot > p{ margin:0; max-width:470px; font-size:15px; line-height:1.65; color:rgba(255,255,255,.72); }
.case-foot > p strong{ color:#fff; font-weight:650; }
.case-money{ display:flex; flex-wrap:wrap; gap:14px; }
.case-money div{
  padding:16px 22px; border-radius:var(--r);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
}
.case-money b{
  display:block; font-family:var(--ff-display); font-size:25px; font-weight:800;
  line-height:1.1; letter-spacing:-.03em; color:var(--brand-300);
}
.case-money span{ display:block; margin-top:5px; font-size:12.8px; color:rgba(255,255,255,.62); }
@media (max-width:860px){
  .case-foot{ grid-template-columns:1fr; }
}

.cta-band{
  position:relative; overflow:hidden; border-radius:32px;
  background:var(--ink); padding:60px 64px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:34px; flex-wrap:wrap;
  box-shadow:0 30px 70px rgba(20,22,31,.22);
}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(620px 360px at 92% 10%, rgba(242,98,44,.42), transparent 64%),
             radial-gradient(420px 260px at 0% 100%, rgba(247,161,60,.14), transparent 62%);
}
/* Anéis concêntricos: o "sinal" saindo da marca */
.cta-band::after{
  content:''; position:absolute; z-index:1; right:-160px; top:50%; width:620px; height:620px; translate:0 -50%;
  border-radius:50%; pointer-events:none;
  background:repeating-radial-gradient(circle, transparent 0 46px, rgba(255,255,255,.08) 46px 47px);
  mask-image:radial-gradient(closest-side, #000 55%, transparent);
  -webkit-mask-image:radial-gradient(closest-side, #000 55%, transparent);
}
.cta-band > *{ position:relative; z-index:2; }
.cta-band h2{ color:#fff; font-size:clamp(27px,3.4vw,40px); max-width:640px; letter-spacing:-.03em; }
.cta-band p{ margin-top:14px; color:rgba(255,255,255,.72); font-size:16.4px; max-width:560px; }
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------------------------------------------------------
   16. LOGOS / PROVA SOCIAL
   --------------------------------------------------------- */
.logos{ padding:34px 0 10px; }
.logos p{ text-align:center; font-size:12.4px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); margin-bottom:22px; }
.logos-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 34px; }
.logo-chip{
  display:inline-flex; align-items:center; gap:9px; padding:9px 17px; border-radius:11px;
  background:#fff; border:1px solid var(--line); font-family:var(--ff-display);
  font-size:14.4px; font-weight:700; color:var(--muted); letter-spacing:-.01em;
  transition:all .28s var(--ease); filter:grayscale(1); opacity:.72;
}
.logo-chip .i{ width:17px; height:17px; }
.logo-chip:hover{ filter:none; opacity:1; color:var(--ink); border-color:var(--brand-soft); transform:translateY(-3px); box-shadow:var(--sh-sm); }

/* Faixa contínua de clientes, parceiros e editais: discreta, uma linha só */
.logo-strip{ padding:40px 0; border-block:1px solid var(--line); background:var(--bg); }
.logo-strip .cap{
  display:block; text-align:center; margin-bottom:22px;
  font-size:12.8px; font-weight:650; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted-2);
}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track{ display:flex; width:max-content; animation:marquee 58s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-row{
  display:flex; align-items:center; gap:58px; padding-right:58px; flex-shrink:0;
}
/* Caixa máxima em vez de altura fixa: normaliza marcas largas e quadradas na mesma
   régua óptica, sem precisar de uma classe por logo. As larguras batem no limite de
   largura; as quadradas, no de altura. */
.marquee-row img{
  width:auto; height:auto; max-height:46px; max-width:132px; object-fit:contain; flex-shrink:0;
  filter:grayscale(1); opacity:.42;
  transition:filter .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
.marquee-row img:hover{ filter:none; opacity:1; transform:scale(1.06); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

@media (prefers-reduced-motion: reduce){
  .marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .marquee-track{ animation:none; }
}
@media (max-width:640px){
  .logo-strip{ padding:36px 0; }
  .marquee-row{ gap:38px; padding-right:38px; }
  .marquee-row img{ max-height:36px; max-width:104px; }
}

/* Editorial: o primeiro depoimento em destaque, os outros dois empilhados ao lado */
.quotes{ display:grid; grid-template-columns:1.2fr 1fr; gap:22px; }
.quote{
  position:relative; display:flex; flex-direction:column;
  background:var(--soft); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:30px 30px 26px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.quote:hover{ transform:translateY(-4px); box-shadow:var(--sh); border-color:var(--brand-soft); }
.quote .qi{ width:30px; height:30px; color:var(--brand); opacity:.55; margin-bottom:14px; }
.quote p{ margin-bottom:24px; font-size:15.4px; color:var(--ink-2); line-height:1.7; }
.quote footer{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:18px; border-top:1px solid var(--line-2); }

.quote:first-child{
  grid-row:span 2; overflow:hidden; padding:44px 44px 36px;
  background:var(--ink); border-color:transparent;
}
.quote:first-child::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 320px at 100% 0%, rgba(242,98,44,.3), transparent 62%);
}
.quote:first-child > *{ position:relative; }
.quote:first-child:hover{ border-color:transparent; box-shadow:0 26px 60px rgba(20,22,31,.26); }
.quote:first-child .qi{ width:46px; height:46px; opacity:1; color:var(--brand-400); margin-bottom:26px; }
.quote:first-child p{
  font-family:var(--ff-display); font-size:clamp(22px,2.3vw,31px); font-weight:600;
  line-height:1.45; letter-spacing:-.02em; color:#fff;
}
.quote:first-child p{ margin-bottom:40px; }
.quote:first-child footer{ border-top-color:rgba(255,255,255,.14); }
.quote:first-child footer strong{ color:#fff; }
.quote:first-child footer small{ color:rgba(255,255,255,.6); }
.avatar{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  background:var(--grad); color:#fff; font-family:var(--ff-display); font-weight:800; font-size:15px;
}
.quote footer strong{ display:block; font-size:13.8px; color:var(--ink); }
.quote footer small{ display:block; font-size:12.4px; color:var(--muted); }

/* ---------------------------------------------------------
   17. FORMULÁRIOS
   --------------------------------------------------------- */
.field{ display:block; margin-bottom:17px; border:0; padding:0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field label,.field legend{ display:block; font-size:13.2px; font-weight:650; color:var(--ink-2); margin-bottom:7px; padding:0; }
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px; font:inherit; font-size:14.6px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line-2); border-radius:11px;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d95a8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:17px; padding-right:40px; }
.field textarea{ resize:vertical; min-height:110px; }
.field input::placeholder,.field textarea::placeholder{ color:#aeb5c4; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--muted-2); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(242,98,44,.13);
}
.field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:var(--danger); background:#fef8f7; }
.err{ display:none; margin-top:6px; font-size:12.4px; color:var(--danger); }
.field.invalid .err{ display:block; }
.form-note{ margin-top:14px; font-size:12.2px; color:var(--muted-2); text-align:center; line-height:1.55; }
.form-note a{ text-decoration:underline; text-underline-offset:2px; }
.form-note a:hover{ color:var(--brand-600); }

.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ position:relative; cursor:pointer; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:inline-block; padding:9px 15px; border-radius:999px; font-size:13.2px; font-weight:550;
  border:1.5px solid var(--line-2); background:#fff; color:var(--ink-3);
  transition:all .22s var(--ease);
}
.chip:hover span{ border-color:var(--brand); color:var(--brand-600); transform:translateY(-1px); }
.chip input:checked + span{ background:var(--grad); border-color:transparent; color:#fff; box-shadow:var(--sh-brand); }
.chip input:focus-visible + span{ outline:2px solid var(--brand); outline-offset:2px; }

.form-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:36px; box-shadow:var(--sh);
}
.form-card h3{ font-size:22px; }
.form-card > p{ margin:10px 0 24px; font-size:14.2px; color:var(--muted); }

/* ---------------------------------------------------------
   18. CONTATO
   --------------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:52px; align-items:start; }
.contact-list{ display:grid; gap:13px; margin:28px 0; }
.contact-list li{ display:flex; align-items:center; gap:14px; font-size:15px; }
.ct-ico{
  display:grid; place-items:center; width:44px; height:44px; border-radius:13px;
  background:#fff; border:1px solid var(--line); color:var(--brand-600); flex-shrink:0;
  transition:background .25s, color .25s, transform .25s var(--ease), border-color .25s;
}
.ct-ico svg{ width:20px; height:20px; }
.contact-list li:hover .ct-ico{ background:var(--grad); color:#fff; border-color:transparent; transform:translateY(-2px); }
.contact-list b{ display:block; font-size:12.4px; color:var(--muted-2); font-weight:650; text-transform:uppercase; letter-spacing:.06em; }
.contact-list a,.contact-list span.v{ font-size:14.8px; color:var(--ink-2); transition:color .2s; }
.contact-list a:hover{ color:var(--brand-600); }

/* ---------------------------------------------------------
   19. FOOTER
   --------------------------------------------------------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.66); }
.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.15fr; gap:36px;
  padding:62px 24px 46px;
}
.f-brand p{ margin:18px 0 20px; font-size:13.8px; color:rgba(255,255,255,.6); line-height:1.65; max-width:290px; }
.socials{ display:flex; gap:10px; }
.socials a{
  display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.7); background:rgba(255,255,255,.04);
  transition:all .24s var(--ease);
}
.socials a[hidden]{ display:none; }
.socials a svg{ width:19px; height:19px; }
.socials a:hover{ background:var(--grad); border-color:transparent; color:#fff; transform:translateY(-3px); }

.f-col h4{ font-family:var(--ff-display); font-size:13.6px; font-weight:700; color:#fff; margin-bottom:17px; letter-spacing:.02em; }
.f-col li{ margin-bottom:10px; }
.f-col a{ font-size:13.8px; color:rgba(255,255,255,.6); transition:color .2s, padding-left .24s var(--ease); }
.f-col a:hover{ color:var(--brand-400); padding-left:4px; }
.f-col .soon{ font-size:10px; margin-left:6px; padding:2px 6px; border-radius:5px; background:rgba(255,255,255,.09); color:rgba(255,255,255,.5); }
.f-contact li{ display:flex; align-items:flex-start; gap:10px; font-size:13.6px; color:rgba(255,255,255,.6); }
.f-contact .i{ width:16px; height:16px; color:var(--brand-400); flex-shrink:0; margin-top:4px; }

.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); }
.footer-bottom .container{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding-block:20px; font-size:12.6px; color:rgba(255,255,255,.45);
}
.footer-bottom a:hover{ color:var(--brand-400); }
.f-legal{ display:flex; gap:18px; flex-wrap:wrap; }

/* ---------------------------------------------------------
   20. FABS / MODAIS / TOAST
   --------------------------------------------------------- */
.fab{
  position:fixed; right:22px; z-index:80; display:grid; place-items:center;
  width:54px; height:54px; border-radius:50%; color:#fff; box-shadow:var(--sh-lg);
  transition:transform .28s var(--ease), opacity .28s, visibility .28s, background-color .22s;
}
.fab svg{ width:26px; height:26px; }
.fab:hover{ transform:translateY(-4px) scale(1.05); }
.fab.whats{ bottom:22px; background:var(--wa); }
.fab.whats::after{
  content:''; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.55); opacity:0; } }
.fab.whats:hover{ background:#1eb857; }
.fab.top{ bottom:88px; width:44px; height:44px; background:var(--ink); opacity:0; visibility:hidden; }
.fab.top svg{ width:20px; height:20px; }
.fab.top.show{ opacity:1; visibility:visible; }
.fab.top:hover{ background:var(--brand); }
@media (prefers-reduced-motion: reduce){ .fab.whats::after{ animation:none; } }

.modal{ position:fixed; inset:0; z-index:200; display:none; }
.modal.open{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(20,22,31,.6); backdrop-filter:blur(4px); animation:fadeIn .25s var(--ease); }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.modal-box{
  position:relative; z-index:2; width:min(700px, calc(100% - 32px));
  max-height:calc(100vh - 56px); overflow-y:auto;
  margin:28px auto; background:#fff; border-radius:var(--r-xl); padding:38px;
  box-shadow:var(--sh-lg); animation:popIn .34s var(--ease-out);
}
.modal-box.slim{ width:min(580px, calc(100% - 32px)); padding:0; overflow:hidden; }
@keyframes popIn{ from{ opacity:0; transform:translateY(26px) scale(.98); } to{ opacity:1; transform:none; } }
.modal-close{
  position:absolute; top:16px; right:16px; z-index:3; display:grid; place-items:center;
  width:36px; height:36px; border-radius:50%; background:var(--soft-2); color:var(--ink);
  transition:background .2s, color .2s, transform .25s var(--ease);
}
.modal-close svg{ width:19px; height:19px; }
.modal-close:hover{ background:var(--brand); color:#fff; transform:rotate(90deg); }
.modal-head{ margin-bottom:24px; padding-right:40px; }
.modal-head h3{ font-size:25px; }
.modal-head p{ margin-top:9px; font-size:14.4px; color:var(--muted); }
.modal-actions{ display:flex; gap:12px; justify-content:flex-end; margin-top:24px; flex-wrap:wrap; }
.modal-actions.center{ justify-content:center; }
.modal-success{ text-align:center; padding:22px 0; }
.modal-success .ok-mark{
  display:grid; place-items:center; width:68px; height:68px; margin:0 auto 20px;
  border-radius:50%; background:var(--ok-soft); color:var(--ok);
}
.modal-success .ok-mark svg{ width:34px; height:34px; stroke-width:2.4; }
.modal-success h3{ font-size:24px; }
.modal-success p{ margin-top:11px; color:var(--muted); font-size:14.8px; }

.info-top{ padding:30px 32px 0; }
.info-hero{
  height:168px; display:grid; place-items:center; color:#fff;
  background:var(--ink); position:relative; overflow:hidden;
}
.info-hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(420px 240px at 70% 20%, rgba(242,98,44,.42), transparent 65%);
}
.info-hero .hero-ico{
  position:relative; z-index:2; display:grid; place-items:center;
  width:70px; height:70px; border-radius:20px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px);
}
.info-hero .hero-ico svg{ width:32px; height:32px; }
.info-body{ padding:26px 32px 32px; }
.info-body h3{ font-size:23px; }
.info-body > p{ margin-top:11px; font-size:14.8px; color:var(--muted); line-height:1.68; }
.info-list{ display:grid; gap:10px; margin-top:20px; }
.info-list li{ display:flex; gap:11px; align-items:flex-start; font-size:14.2px; }
.info-list .i{ width:16px; height:16px; color:var(--brand); stroke-width:2.4; flex-shrink:0; margin-top:4px; }
.info-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }

.toast{
  position:fixed; left:50%; bottom:28px; translate:-50% 0; z-index:250;
  display:flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:13px; background:var(--ink); color:#fff; font-size:14px;
  box-shadow:var(--sh-lg); opacity:0; visibility:hidden; transform:translateY(16px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  max-width:calc(100% - 32px);
}
.toast .i{ width:18px; height:18px; color:var(--ok); stroke-width:2.4; }
.toast.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---------------------------------------------------------
   21. RESPONSIVO
   --------------------------------------------------------- */
@media (max-width:1180px){
  .nav-link{ padding:9px 10px; font-size:14px; }
  .header-actions .btn{ padding:10px 15px; font-size:13.8px; }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1.1fr; }
  .footer-grid .f-col.f-hide-md{ display:none; }
}

@media (max-width:1024px){
  :root{ --header-h:70px; }
  /* backdrop-filter faz o header virar o bloco de contenção do drawer (position:fixed),
     e o menu abria com altura zero. No mobile o header fica branco sólido. */
  .site-header,.site-header.stuck{ background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .hamburger{ display:grid; margin-left:auto; }
  .header-actions{ display:none; }

  .main-nav{
    position:fixed; inset:var(--header-h) 0 0 auto; width:min(380px,88vw); z-index:96;
    background:#fff; border-left:1px solid var(--line); box-shadow:var(--sh-lg);
    padding:22px; overflow-y:auto;
    transform:translateX(105%); transition:transform .36s var(--ease);
  }
  .main-nav.open{ transform:translateX(0); }
  .nav-list{ flex-direction:column; align-items:stretch; gap:2px; }
  .nav-link{ width:100%; justify-content:space-between; padding:13px 13px; font-size:15.2px; border-radius:11px; }
  .nav-link::after{ display:none; }
  .nav-link:hover,.nav-link.is-active{ background:var(--brand-tint); }
  .has-drop::before{ display:none; }
  .dropdown{
    position:static; width:100%; translate:none; transform:none; box-shadow:none;
    border:0; border-left:2px solid var(--brand-soft); border-radius:0; margin:2px 0 8px 13px;
    padding:0 0 0 6px; opacity:1; visibility:visible; display:none;
  }
  .has-drop:hover > .dropdown{ display:none; }
  .dropdown.open{ display:block; animation:slideDown .3s var(--ease); }
  @keyframes slideDown{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
  .drop-foot{ display:none; }
  .dropdown.mega{ width:100%; padding:0 0 0 6px; }
  .mega-grid{ grid-template-columns:1fr; gap:12px; }
  .dropdown .mega-head{ margin:4px 0 0; padding:10px 12px; }
  .mega-mark{ width:34px; height:34px; border-radius:10px; box-shadow:none; }
  .mega-mark svg{ width:18px; height:18px; }
  .dropdown .mega-head strong.wordmark{ font-size:17px; }
  .nav-actions-mobile{ display:grid; gap:10px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }

  .hero-inner{ grid-template-columns:1fr; gap:44px; padding-block:52px 68px; }
  .hero-copy .lead{ max-width:none; }
  .hero-visual{ max-width:520px; margin-inline:auto; width:100%; }

  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .prod-grid{ grid-template-columns:1fr; gap:38px; }
  .prod:nth-child(even) .prod-media{ order:0; }
  .prod-media{ max-width:560px; }
  .seg-body{ grid-template-columns:1fr; }
  .seg-body > div:first-child{ padding:34px; }
  .seg-body > .seg-stats{ border-left:0; border-top:1px solid var(--brand-soft); padding:8px 34px; }
  .steps{ grid-template-columns:repeat(2,1fr); gap:40px 28px; }
  .section-head.split{ grid-template-columns:1fr; gap:0; margin-bottom:44px; }
  .section-head.split p{ margin-top:16px; padding:0; max-width:680px; }
  .faq-split{ grid-template-columns:1fr; gap:32px; }
  .faq-split .section-head{ position:static; }
  .calc{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .plan.featured{ transform:none; }
  .plan.featured:hover{ transform:translateY(-7px); }
  .contact-grid{ grid-template-columns:1fr; gap:38px; }
  .metrics{ grid-template-columns:repeat(2,1fr); }
  .metric:nth-child(3){ border-left:0; }
  .metric:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.1); }
  .metric:nth-child(n+3)::before{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; }
  .footer-grid .f-col.f-hide-md{ display:block; }
  .f-brand{ grid-column:1/-1; }
}

@media (min-width:641px) and (max-width:1024px){
  .steps:not(.three) .step:nth-child(2n)::before{ display:none; }
}

@media (max-width:860px){
  .grid-3,.mod-grid,.quotes{ grid-template-columns:repeat(2,1fr); }
  .prod-feats{ grid-template-columns:1fr; }
  .cta-band{ padding:44px 34px; }
  .cta-band::after{ right:-280px; opacity:.6; }
  .page-hero:not(.split)::after{ display:none; }
  /* Trilha de 3 passos vira vertical */
  .steps.three .step{ padding-left:74px; min-height:52px; }
  .steps.three .step .num{ position:absolute; left:0; top:0; margin:0; }
  .steps.three .step::before{ top:64px; bottom:-18px; left:25px; right:auto; width:2px; height:auto; background:linear-gradient(180deg, var(--brand-300), var(--line-2)); }
  .steps.three .step .when{ position:static; margin-bottom:8px; }
}

@media (max-width:640px){
  .section{ padding:64px 0; }
  .section.tight{ padding:40px 0; }
  .section-head{ margin-bottom:34px; }
  .section-head.split{ margin-bottom:34px; }
  .mod-group{ margin-bottom:30px; }
  .mod-group > h3{ font-size:17.5px; margin-bottom:14px; }
  .eyebrow{ font-size:11.4px; }
  .grid,.grid-2,.grid-3,.grid-4,.mod-grid,.quotes{ grid-template-columns:1fr; gap:16px; }
  .quote:first-child{ grid-row:auto; padding:32px 26px 26px; }
  .steps{ grid-template-columns:1fr; gap:30px; }
  /* Trilha vertical: número à esquerda, fio descendo até o próximo */
  .steps .step{ padding-left:74px; min-height:52px; }
  .steps .step .num{ position:absolute; left:0; top:0; margin:0; }
  .steps .step::before{ top:64px; bottom:-22px; left:25px; right:auto; width:2px; height:auto; background:linear-gradient(180deg, var(--brand-300), var(--line-2)); }
  .steps .step .when{ position:static; margin-bottom:8px; }
  .seg-stats{ grid-template-columns:1fr 1fr; }
  .hero-cta .btn,.page-hero-cta .btn,.cta-actions .btn{ width:100%; }
  .hero-copy h1{ font-size:clamp(31px,8vw,40px); }
  .field-row{ grid-template-columns:1fr; }
  .modal-box{ padding:28px 22px; margin:14px auto; border-radius:var(--r-lg); }
  .modal-actions .btn{ flex:1; }
  .form-card,.calc-form,.calc-out{ padding:26px 22px; }
  .seg-body > div:first-child{ padding:26px 22px; }
  .seg-body > .seg-stats{ grid-template-columns:1fr; padding:4px 22px; }
  .seg-body > .seg-stats .seg-stat{ grid-template-columns:1fr; padding:18px 0; }
  .seg-tabs{ margin-inline:0; justify-content:flex-start; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; padding:48px 24px 36px; }
  .footer-bottom .container{ justify-content:center; text-align:center; }
  .cta-band{ padding:36px 24px; border-radius:24px; flex-direction:column; align-items:flex-start; }
  .cta-band::after{ display:none; }
  .fab{ right:14px; }
  .fab.whats{ width:50px; height:50px; }
  .svc-head{ padding:11px 13px; }
  .svc-head small{ display:none; }
  .metric{ padding:26px 16px 24px; }
  .metric::before{ left:16px; }
  .faq-q{ font-size:15.6px; padding:18px 0; }
  .faq-a p{ padding-right:0; }
}

@media (max-width:420px){
  .container{ padding-inline:18px; }
  .brand-logo{ height:38px; }
  .seg-stats{ grid-template-columns:1fr; }
  .metrics{ grid-template-columns:1fr; }
  .metric + .metric{ border-left:0; border-top:1px solid rgba(255,255,255,.1); }
  .metric::before{ display:none; }
}

/* ---------------------------------------------------------
   22. IMPRESSÃO
   --------------------------------------------------------- */
@media print{
  .site-header,.fab,.modal,.toast,.cta-band,.nav-scrim{ display:none !important; }
  .reveal{ opacity:1; transform:none; }
  body{ color:#000; }
}

/* ---------------------------------------------------------
   23. SOLUÇÕES (WePrevent e WeAgenda)
   --------------------------------------------------------- */
.sol + .sol{ margin-top:44px; }
.sol-intro{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:auto 1fr auto; gap:18px 24px; align-items:center;
  padding:26px 28px; margin-bottom:20px; border-radius:var(--r-xl);
  background:var(--ink); color:#fff;
}
.sol-intro::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(560px 280px at 92% 0%, rgba(242,98,44,.30), transparent 62%);
}
.sol-intro > *{ position:relative; z-index:2; }
.sol-mark{
  display:grid; place-items:center; width:56px; height:56px; border-radius:16px;
  background:var(--grad); color:#fff; box-shadow:var(--sh-brand);
}
.sol-mark svg{ width:27px; height:27px; }
.sol-kicker{
  display:block; margin-bottom:4px;
  font-size:11.8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-300);
}
.sol-title{ color:#fff; font-size:26px; letter-spacing:-.02em; }
.sol-intro p{ margin-top:6px; max-width:680px; font-size:14.6px; color:rgba(255,255,255,.72); }
.sol-intro .btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28); }
.sol-intro .btn-outline:hover{ border-color:var(--brand-400); color:var(--brand-300); }
.sol-num{
  display:block; font-size:11.4px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-600);
}

.badges{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; }

/* Bento da solução: painel escuro + módulos na mesma peça, separados por fio.
   Substitui "banner + grade de cards soltos" na home e na página de soluções. */
.sol-bento{
  display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,2fr);
  background:#fff; border:1px solid var(--line); border-radius:32px; overflow:hidden;
  box-shadow:0 24px 60px rgba(20,22,31,.08);
}
.sol-bento + .sol-bento{ margin-top:32px; }
.sol-bento.flip{ grid-template-columns:minmax(0,2fr) minmax(300px,.72fr); }
.sol-bento.flip .sol-panel{ order:2; }

.sol-panel{
  position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start;
  padding:40px 36px; background:var(--ink); color:#fff;
}
.sol-panel::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(460px 340px at 100% 0%, rgba(242,98,44,.36), transparent 64%),
             radial-gradient(360px 260px at 0% 100%, rgba(247,161,60,.12), transparent 62%);
}
/* Ícone da solução em marca d'água, cortado pelo canto do painel */
.sol-panel .sol-deco{
  position:absolute; right:-54px; bottom:-54px; width:230px; height:230px;
  color:rgba(255,255,255,.05); stroke-width:1.1; pointer-events:none;
}
.sol-panel > :not(.sol-deco){ position:relative; }
.sol-panel .sol-mark{ margin-bottom:26px; }
.sol-panel .sol-kicker{ margin-bottom:6px; }
.sol-panel .sol-title.wordmark{ font-size:clamp(32px,3.2vw,40px); line-height:1.05; }
.sol-panel p{ margin-top:14px; font-size:15px; line-height:1.65; color:rgba(255,255,255,.72); }
.sol-facts{ display:grid; gap:10px; margin:24px 0 30px; }
.sol-facts li{ display:flex; gap:10px; align-items:flex-start; font-size:13.8px; line-height:1.5; color:rgba(255,255,255,.84); }
.sol-facts .i{ width:16px; height:16px; margin-top:2px; color:var(--brand-400); stroke-width:2.4; flex-shrink:0; }
.sol-panel .btn{ margin-top:auto; }
.sol-panel .btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28); }
.sol-panel .btn-outline:hover{ border-color:var(--brand-400); color:var(--brand-300); }

/* Painel largo, em cima dos módulos (WeAgenda: 8 células não cabem ao lado de um painel) */
.sol-bento.wide{ grid-template-columns:1fr; }
.sol-bento.wide .sol-panel{
  display:grid; grid-template-columns:auto minmax(0,1.25fr) minmax(0,1fr); column-gap:30px; align-items:start;
  padding:40px 44px;
}
.sol-bento.wide .sol-mark{ grid-column:1; grid-row:1/5; margin:0; }
.sol-bento.wide .sol-kicker{ grid-column:2; grid-row:1; }
.sol-bento.wide .sol-title{ grid-column:2; grid-row:2; }
.sol-bento.wide .sol-panel p{ grid-column:2; grid-row:3; max-width:580px; }
.sol-bento.wide .sol-panel .btn{ grid-column:2; grid-row:4; justify-self:start; margin:26px 0 0; }
.sol-bento.wide .sol-facts{
  grid-column:3; grid-row:1/5; align-self:center; gap:14px; margin:0; padding:6px 0 6px 34px;
  border-left:1px solid rgba(255,255,255,.12);
}
.sol-bento.wide .sol-facts li{ font-size:14.6px; }
.sol-bento.wide .sol-deco{ right:-50px; bottom:-90px; width:260px; height:260px; }

/* Grade "colada": células sem caixa própria numa peça só. O fio entre as células é a
   sombra de 1px de cada uma caindo no gap de 1px; a borda da peça corta as de fora.
   Funciona com qualquer número de colunas e com .reveal em cada célula. */
.mod-grid.joined,.sol-bento .mod-grid{ gap:1px; }
.mod-grid.joined{ background:#fff; border:1px solid var(--line); border-radius:28px; overflow:hidden; box-shadow:var(--sh-sm); }
.mod-grid.joined .mod,.sol-bento .mod,
.mod-grid.joined .mod:hover,.sol-bento .mod:hover{
  border:0; border-radius:0; transform:none;
  box-shadow:1px 0 0 var(--line), 0 1px 0 var(--line), 1px 1px 0 var(--line);
}
.mod-grid.joined .mod,.sol-bento .mod{ background:#fff; padding:30px 32px; }
.mod-grid.joined .mod:hover,.sol-bento .mod:hover{ background:var(--brand-tint); }
.mod-grid.joined .mod.is-soon{ background:var(--soft); }
.mod-grid.joined .mod.is-soon:hover{ background:var(--soft-2); }

.sol-bento .mod-grid{ grid-template-columns:repeat(2,1fr); align-content:stretch; }
.sol-bento .mod-grid.one{ grid-template-columns:1fr; }
.sol-bento .mod-grid.four{ grid-template-columns:repeat(4,1fr); }
.sol-bento .mod-grid.four .mod,.mod-grid.joined.four .mod{ padding:28px 26px; }
.sol-bento .mod.is-soon{ background:var(--soft); }
.sol-bento .mod.is-soon:hover{ background:var(--soft-2); }
.sol-bento .mod h3{ font-size:18px; }
.sol-bento .mod .link-more .i{ transition:transform .25s var(--ease); }
.sol-bento .mod:hover .link-more .i{ transform:translateX(4px); }

/* Módulo em linha (coluna única): ícone | texto | selo */
.sol-bento .mod-grid.one .mod{
  display:grid; grid-template-columns:52px minmax(0,1fr) auto; column-gap:22px; align-items:start; padding:30px 34px;
}
.sol-bento .mod-grid.one .mod-top{ display:contents; }
.sol-bento .mod-grid.one .m-ico{ grid-row:1/4; width:52px; height:52px; border-radius:15px; }
.sol-bento .mod-grid.one .m-ico svg{ width:25px; height:25px; }
.sol-bento .mod-grid.one .badge{ grid-column:3; grid-row:1; }
.sol-bento .mod-grid.one h3{ grid-column:2; grid-row:1; align-self:center; font-size:19px; }
.sol-bento .mod-grid.one p{ grid-column:2/4; grid-row:2; font-size:14.6px; }
.sol-bento .mod-grid.one .link-more{ grid-column:2; grid-row:3; }

.sol-bento .mod.mod-cta{ justify-content:center; background:var(--grad-soft); cursor:default; }
.sol-bento .mod.mod-cta:hover{ background:var(--grad-soft); }
.sol-bento .mod.mod-cta h3{ color:var(--ink); }
.sol-bento .mod.mod-cta p{ color:var(--muted); flex:0; }
.sol-bento .mod.mod-cta .btn{ align-self:flex-start; width:auto; margin-top:18px; }

/* Página de soluções: banner da WePrevent e linhas de módulo na mesma peça */
.sol-stack{
  border:1px solid var(--line); border-radius:32px; overflow:hidden; background:#fff;
  box-shadow:0 24px 60px rgba(20,22,31,.08);
}
.sol-stack > .sol-intro{ margin:0; border-radius:0; padding:34px 36px; }
.sol-stack > .mrow{ margin:0; border:0; border-radius:0; box-shadow:none; }
.sol-stack > .mrow + .mrow{ border-top:1px solid var(--line); }
.sol-stack > .mrow:hover{ transform:none; box-shadow:none; }

/* Responsivo do bento fica aqui, depois das regras base: na seção 21 ele perderia na cascata */
@media (max-width:1024px){
  .sol-bento,.sol-bento.flip{ grid-template-columns:1fr; }
  .sol-bento.flip .sol-panel{ order:0; }
  .sol-panel,.sol-bento.wide .sol-panel{ display:flex; padding:34px; }
  .sol-panel .btn,.sol-bento.wide .sol-panel .btn{ margin:4px 0 0; }
  .sol-bento.wide .sol-mark{ margin-bottom:22px; }
  .sol-bento.wide .sol-facts{ margin:22px 0 26px; padding-left:0; border-left:0; }
  .sol-bento .mod-grid.four{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .sol-bento,.sol-stack{ border-radius:24px; }
  .sol-panel,.sol-bento.wide .sol-panel{ padding:28px 24px; }
  .sol-bento .mod-grid,.sol-bento .mod-grid.one,.sol-bento .mod-grid.four{ grid-template-columns:1fr; }
  .sol-bento .mod,.sol-bento .mod-grid.one .mod,.sol-bento .mod-grid.four .mod{ display:flex; flex-direction:column; padding:24px; }
  .sol-bento .mod-grid.one .mod-top{ display:flex; }
  .sol-bento .mod-grid.one h3{ align-self:auto; font-size:18px; }
  .sol-bento .mod-grid.one .m-ico{ width:42px; height:42px; border-radius:12px; }
  .sol-bento .mod-grid.one .m-ico svg{ width:21px; height:21px; }
  .sol-stack > .sol-intro{ padding:24px; grid-template-columns:1fr; }
  .sol-stack > .sol-intro .sol-mark{ width:48px; height:48px; border-radius:14px; }
}

.mod-grid.four{ grid-template-columns:repeat(4,1fr); }
.mod.mod-cta{
  background:var(--ink); border-color:transparent; cursor:default; justify-content:center;
}
.mod.mod-cta h3{ color:#fff; }
.mod.mod-cta p{ color:rgba(255,255,255,.68); flex:0; }
.mod.mod-cta .btn{ margin-top:16px; }
.mod.mod-cta:hover{ transform:translateY(-5px); border-color:transparent; box-shadow:var(--sh-lg); }
/* Dentro da grade colada, o fundo claro de .mod e o hover tinto venceriam o escuro */
.mod-grid.joined .mod.mod-cta,.mod-grid.joined .mod.mod-cta:hover{ background:var(--ink); }

/* Linha de módulo: recursos | setor público | setor privado */
.mrow{
  display:grid; grid-template-columns:1.15fr 1fr 1fr; margin-bottom:16px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-sm); transition:box-shadow .3s var(--ease), border-color .3s, transform .3s var(--ease);
}
.mrow:hover{ box-shadow:var(--sh); border-color:var(--brand-soft); transform:translateY(-3px); }
.mrow > div{ padding:22px 24px; }
.mrow > div + div{ border-left:1px solid var(--line); background:var(--soft); }
.mrow-head{ display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.mrow h3{ font-size:17.5px; }
.mrow h4{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px; padding:5px 12px 5px 10px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  font-family:var(--ff); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
}
.mrow h4::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--grad); }
.mrow > div:last-child h4::before{ background:var(--ink-3); }
.mrow .sol-num{ color:var(--brand-600); }
.mrow ul{ display:grid; gap:9px; }
.mrow li{ display:flex; gap:9px; font-size:13.6px; line-height:1.5; color:var(--ink-3); }
.mrow li .i{ width:15px; height:15px; margin-top:3px; flex-shrink:0; color:var(--brand); stroke-width:2.4; }
.mrow .link-more{ margin-top:16px; }

@media (max-width:1100px){
  .mod-grid.four{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .mrow{ grid-template-columns:1fr; }
  .mrow > div + div{ border-left:0; border-top:1px solid var(--line); }
}
@media (max-width:760px){
  .sol-intro{ grid-template-columns:auto 1fr; padding:22px; }
  .sol-intro .btn{ grid-column:1/-1; justify-self:start; }
}
@media (max-width:640px){
  .mod-grid.four{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------
   24. MARCA DAS SOLUÇÕES
   "We" na cor do texto, o nome da solução no gradiente da marca.
   --------------------------------------------------------- */
.wordmark{ font-family:var(--ff-display); font-weight:800; letter-spacing:-.03em; }
.wordmark b{
  font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.sol-title.wordmark{ font-size:30px; }

/* ---------------------------------------------------------
   25. HERO DIVIDIDO (páginas de produto)
   Texto à esquerda, tela do produto à direita, fatos-chave embaixo.
   --------------------------------------------------------- */
.page-hero.split{ padding:52px 0 64px; }
.page-hero-grid{ display:grid; grid-template-columns:1.06fr .94fr; gap:56px; align-items:center; }
.page-hero.split h1{ font-size:clamp(30px,3.6vw,44px); }
.page-hero-grid > div > p{ max-width:600px; }
.page-hero-visual{ position:relative; }
.page-hero-visual::before{
  content:''; position:absolute; inset:10% -4% -6% 12%; z-index:-1;
  border-radius:48px; background:var(--grad); opacity:.14; filter:blur(46px);
}
.page-hero-visual p{ margin:0; font-size:inherit; max-width:none; }

.hero-facts{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 28px; margin:34px 0 0; padding-top:24px;
  border-top:1px solid var(--line-2); max-width:620px;
}
.hero-facts dt{
  font-family:var(--ff-display); font-size:23px; font-weight:800; line-height:1.1;
  letter-spacing:-.025em; color:var(--ink);
}
.hero-facts dd{ margin:4px 0 0; font-size:12.8px; line-height:1.45; color:var(--muted); }

.mock.narrow{ max-width:390px; margin-inline:auto; }
.prod-media .mock + .mock{ margin-top:18px; }

.hcard-title{ display:block; font-family:var(--ff-display); font-size:16px; font-weight:700; color:var(--ink); }
.hcard-sub{ display:block; font-size:11.6px; color:var(--muted); }
.hcard-foot{ display:flex; align-items:center; gap:8px; font-size:11.8px; font-weight:600; color:var(--ok); }
.hcard-foot .i{ width:15px; height:15px; stroke-width:2.2; }

@media (max-width:1024px){
  .page-hero-grid{ grid-template-columns:1fr; gap:42px; }
  .page-hero-visual{ width:100%; max-width:540px; }
}
@media (max-width:640px){
  .page-hero.split{ padding:38px 0 48px; }
  .hero-facts{ grid-template-columns:1fr 1fr; gap:16px 20px; }
  .hero-facts dt{ font-size:20px; }
}

/* ---------------------------------------------------------
   26. ARQUITETURA EM CAMADAS (home)
   Conversa → predição de risco → execução. O ponto que corre no
   conector é o dado atravessando as camadas.
   --------------------------------------------------------- */
.layers{ display:grid; grid-template-columns:1fr 44px 1.16fr 44px 1fr; align-items:stretch; }
.layer{
  position:relative; display:flex; flex-direction:column;
  padding:28px 26px; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.layer:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:var(--brand-soft); }
.layer-ico{
  display:grid; place-items:center; width:46px; height:46px; border-radius:13px; margin-bottom:18px;
  background:var(--brand-tint); color:var(--brand-600);
}
.layer-ico svg{ width:23px; height:23px; }
.layer-num{ display:block; font-size:11.6px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-600); }
.layer h3{ margin-top:5px; font-size:19.5px; }
.layer > p{ margin-top:10px; font-size:14px; line-height:1.62; color:var(--muted); }
.layer .prod-tags{ margin-top:auto; padding-top:20px; }

.layer.core{ background:var(--ink); border-color:transparent; box-shadow:0 26px 60px rgba(20,22,31,.24); overflow:hidden; }
.layer.core::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(420px 260px at 90% 0%, rgba(242,98,44,.34), transparent 64%);
}
.layer.core > *{ position:relative; z-index:2; }
.layer.core:hover{ border-color:transparent; box-shadow:0 30px 70px rgba(20,22,31,.3); }
.layer.core .layer-ico{ background:var(--grad); color:#fff; box-shadow:var(--sh-brand); }
.layer.core .layer-num{ color:var(--brand-300); }
.layer.core h3{ color:#fff; }
.layer.core > p{ color:rgba(255,255,255,.7); }
.layer.core .tag{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.82); }

.layer-link{ position:relative; }
.layer-link::before{
  content:''; position:absolute; left:6px; right:6px; top:50%; border-top:2px dashed var(--line-2);
}
.layer-link::after{
  content:''; position:absolute; top:50%; left:6px; width:9px; height:9px; margin-top:-4.5px;
  border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px rgba(242,98,44,.16);
  animation:layerFlow 2.6s var(--ease) infinite;
}
.layer-link + .layer + .layer-link::after{ animation-delay:1.3s; }
@keyframes layerFlow{
  0%{ left:6px; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ left:calc(100% - 15px); opacity:0; }
}
@keyframes layerFlowY{
  0%{ top:6px; opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } 100%{ top:calc(100% - 15px); opacity:0; }
}

.layers-foot{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:28px; }
.layers-foot span{
  display:inline-flex; align-items:center; gap:10px; padding:9px 18px; border-radius:999px;
  background:#fff; border:1px solid var(--line); font-size:13.4px; color:var(--muted);
}
.layers-foot .wordmark{ font-size:15px; color:var(--ink); }

.layer-demo{ margin-top:20px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); }
.layer-demo.chat{ padding:12px; gap:7px; }
.layer-demo .bub{ max-width:92%; padding:8px 12px; font-size:12.4px; }
.layer-demo .bub .wbtn{ padding:7px 10px; font-size:12px; }
.layer-demo.slots{ gap:7px; border:0; border-radius:0; overflow:visible; }
.layer-demo .slot{ padding:8px 10px; }
.layer-demo .slot .nm{ font-size:12.2px; }

@media (max-width:1024px){
  .layers{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
  .layer-link{ height:40px; }
  .layer-link::before{ left:50%; right:auto; top:6px; bottom:6px; border-top:0; border-left:2px dashed var(--line-2); }
  .layer-link::after{ left:50%; top:6px; margin:0 0 0 -4.5px; animation-name:layerFlowY; }
}
@media (prefers-reduced-motion: reduce){
  .layer-link::after{ animation:none; top:50%; left:50%; margin:-4.5px 0 0 -4.5px; }
}

/* ---------------------------------------------------------
   27. EXPLICABILIDADE (quanto cada fator pesou no score)
   A largura da barra vem de --w no HTML: style="--w:62%".
   --------------------------------------------------------- */
.score{
  margin-top:20px; padding:16px 16px 14px; border-radius:var(--r);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}
.score-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px;
  font-size:12px; color:rgba(255,255,255,.6);
}
.score-top b{ font-family:var(--ff-display); font-size:26px; font-weight:800; line-height:1; letter-spacing:-.03em; color:#fff; }
.shap{ display:grid; gap:10px; }
.shap-row{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 36px; align-items:center; gap:12px;
  font-size:12.4px; color:var(--ink-3);
}
.shap-row span{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.shap-row i{ position:relative; height:7px; border-radius:999px; background:var(--soft-2); overflow:hidden; }
.shap-row i::before{
  content:''; position:absolute; inset:0 auto 0 0; width:var(--w,50%); border-radius:inherit;
  background:var(--grad); transition:width 1.1s var(--ease-out) .25s;
}
.shap-row i.neg::before{ background:var(--ok); }
.shap-row em{ font-style:normal; font-family:var(--ff-mono); font-size:11.6px; font-weight:600; text-align:right; color:var(--brand-700); }
.shap-row i.neg + em{ color:var(--ok); }
.reveal:not(.in) .shap-row i::before{ width:0; }
.shap-note{ font-size:11.6px; color:var(--muted-2); }
@media (max-width:480px){
  /* No celular o rótulo vai para cima da barra, em vez de ser cortado com reticências */
  .shap-row{ grid-template-columns:minmax(0,1fr) 36px; row-gap:5px; }
  .shap-row span{ grid-column:1/-1; white-space:normal; }
}
.score .shap-row{ color:rgba(255,255,255,.76); }
.score .shap-row i{ background:rgba(255,255,255,.1); }
.score .shap-row em{ color:var(--brand-300); }
.score .shap-row i.neg + em{ color:#5fd49a; }

/* O mesmo score dentro de um mockup claro (páginas de solução): desfaz as cores do painel escuro */
.panel .score{ background:var(--soft); border-color:var(--line); }
.panel .score-top{ color:var(--muted); }
.panel .score-top b{ color:var(--ink); }
.panel .score .shap-row{ color:var(--ink-3); }
.panel .score .shap-row i{ background:var(--soft-2); }
.panel .score .shap-row em{ color:var(--brand-700); }
.panel .score .shap-row i.neg + em{ color:var(--ok); }

/* ---------------------------------------------------------
   28. NOTA (o que o produto é, o que não é, o que ainda não tem)
   --------------------------------------------------------- */
.note{
  display:flex; gap:12px; align-items:flex-start; margin:6px 0 26px; padding:16px 20px;
  background:var(--soft); border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:var(--r); font-size:13.6px; line-height:1.62; color:var(--ink-3);
}
.note > .i{ width:18px; height:18px; margin-top:2px; color:var(--brand); }
.note strong{ color:var(--ink); }
.note.soon{ border-left-color:var(--warn); }
.note.soon > .i{ color:var(--warn); }

/* ---------------------------------------------------------
   29. MAPA DA PLATAFORMA (fim das páginas de produto)
   Bloco idêntico nas 5 páginas; o main.js marca o módulo atual.
   --------------------------------------------------------- */
.suite{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.suite-col{ padding:20px; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-sm); }
.suite-head{ display:flex; align-items:center; gap:14px; padding:6px 8px 18px; margin-bottom:8px; border-bottom:1px solid var(--line); }
.suite-head .sol-kicker{ margin:0 0 3px; color:var(--muted-2); }
.suite-head .wordmark{ display:block; font-size:23px; line-height:1.1; color:var(--ink); }
.sol-mark.sm{ width:46px; height:46px; border-radius:14px; flex-shrink:0; }
.sol-mark.sm svg{ width:22px; height:22px; }
.suite-link{
  display:flex; align-items:center; gap:14px; padding:12px; border-radius:14px;
  transition:background-color .2s, transform .22s var(--ease);
}
.suite-link:hover{ background:var(--brand-tint); transform:translateX(3px); }
.suite-link:hover .d-ico,.suite-link.is-current .d-ico{ background:var(--grad); color:#fff; }
.suite-link strong{ display:block; font-size:14.6px; font-weight:650; color:var(--ink); }
.suite-link em{ display:block; margin-top:1px; font-size:12.8px; font-style:normal; line-height:1.45; color:var(--muted); }
.suite-link > .i{
  margin-left:auto; width:17px; height:17px; color:var(--brand-600); opacity:.35;
  transition:opacity .2s, transform .22s var(--ease);
}
.suite-link:hover > .i{ opacity:1; transform:translateX(2px); }
.suite-link.is-current{ background:var(--soft); transform:none; }
.suite-link.is-current::after{
  content:'Você está aqui'; margin-left:auto; flex-shrink:0; padding:4px 10px; border-radius:999px;
  font-size:11px; font-weight:700; white-space:nowrap; background:var(--ink); color:#fff;
}
.suite-link.is-current > .i{ display:none; }
@media (max-width:860px){ .suite{ grid-template-columns:1fr; } }
@media (max-width:420px){ .suite-link.is-current::after{ display:none; } }

/* ---------------------------------------------------------
   30. UTILITÁRIOS DE CONTEÚDO (substituem estilo inline)
   --------------------------------------------------------- */
.hero-copy .badge + h1{ margin-top:18px; }
.fine{ max-width:760px; margin:26px auto 0; text-align:center; font-size:12.6px; line-height:1.6; color:var(--muted-2); }
.hero .fine{ grid-column:1/-1; max-width:none; margin:0; text-align:left; font-size:12.4px; }
.band-dark .fine{ color:rgba(255,255,255,.45); }
.center-cta{ margin-top:32px; text-align:center; }
.label{
  display:block; font-family:var(--ff); font-size:11.6px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted-2);
}
.path .label{ margin-top:18px; }
.label + .prod-tags{ margin-top:10px; }
.sub-h{ margin-top:30px; font-size:16px; }
.sub-h + .seg-pains{ margin-top:14px; }
.card.combo{ padding:28px; }
.combo .card-list{ margin-top:6px; }
.combo .seg-stats{ margin-top:26px; }
.badge.xs{ padding:2px 8px; margin-left:4px; font-size:10.6px; vertical-align:1px; }
.paths.spaced{ margin-top:32px; }
.steps.spaced{ margin-top:56px; }
.prod-feats.one{ grid-template-columns:1fr; margin-top:22px; }
.steps.three{ grid-template-columns:repeat(3,1fr); }
@media (max-width:860px){ .steps.three{ grid-template-columns:1fr; gap:22px; } }

.card.dark{ display:flex; flex-direction:column; justify-content:center; background:var(--ink); border-color:transparent; }
.card.dark:hover{ border-color:transparent; }
.card.dark h3{ color:#fff; }
.card.dark p{ color:rgba(255,255,255,.68); }
.card.dark .c-ico{ background:rgba(255,255,255,.09); color:var(--brand-400); }
.card.dark .btn{ margin-top:20px; }

.card.on-dark{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); box-shadow:none; }
.card.on-dark:hover{ border-color:rgba(255,255,255,.24); box-shadow:none; }
.card.on-dark h3{ color:#fff; font-size:17px; }
.card.on-dark p{ color:rgba(255,255,255,.62); }
.card.on-dark .c-ico{ background:rgba(255,255,255,.09); color:var(--brand-400); }

/* Versão clara: painel quente, sem caixa dentro de caixa; itens separados por fio */
.creds.light{ background:var(--grad-soft); border:1px solid var(--brand-soft); box-shadow:none; padding:30px 12px 32px; gap:0; }
.creds.spaced{ margin:56px 0 0; }
.creds.light::before{ background:radial-gradient(560px 280px at 92% 0%, rgba(247,161,60,.16), transparent 62%); }
.creds.light::after{ display:none; }
.creds.light .cred{ padding:4px 24px; }
.creds.light .cred + .cred{ border-left:1px solid rgba(242,98,44,.16); }
.creds.light .ci{ background:#fff; border-color:var(--brand-soft); color:var(--brand-600); box-shadow:0 6px 16px rgba(242,98,44,.1); }
.creds.light .cred:hover .ci{ background:var(--grad); border-color:transparent; color:#fff; }
.creds.light h4{ color:var(--ink); }
.creds.light p{ color:var(--muted); }
.creds-label{
  position:relative; z-index:2; grid-column:1/-1; margin:0 24px 22px; padding-bottom:18px;
  border-bottom:1px solid rgba(242,98,44,.16);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-family:var(--ff-display); font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.01em;
}
.creds-label small{ font-family:var(--ff); font-size:13px; font-weight:500; color:var(--muted); letter-spacing:0; }
/* O rótulo é o 1º filho: na grade de 3 colunas a 1ª coluna é 3n+2, na de 2 colunas é 2n */
@media (max-width:1100px){
  .creds.light{ row-gap:28px; }
  .creds.light.five .cred:nth-child(3n+2){ border-left:0; }
}
@media (max-width:900px){
  .creds.light.five .cred:nth-child(3n+2){ border-left:1px solid rgba(242,98,44,.16); }
  .creds.light.five .cred:nth-child(2n){ border-left:0; }
}
@media (max-width:560px){
  .creds.light,.creds.light.five{ grid-template-columns:1fr; padding:24px 4px; row-gap:0; }
  .creds.light .cred,.creds.light.five .cred:nth-child(n){ border-left:0; }
  .creds.light .cred + .cred{ border-top:1px solid rgba(242,98,44,.16); padding-top:20px; margin-top:20px; }
}

/* Status do mockup também fora da linha de agenda (ex.: título do painel) */
.panel-row .st{ flex-shrink:0; padding:3px 9px; border-radius:999px; font-size:10.4px; font-weight:700; letter-spacing:.03em; }

/* ---------------------------------------------------------
   31. PEÇAS COLADAS E DETALHE
   Grades de cards viram uma peça só, com fio entre as células,
   em vez de caixas soltas lado a lado. Mesma técnica da
   .mod-grid.joined (seção 23): sombra de 1px no gap de 1px.
   --------------------------------------------------------- */
.grid.joined{
  gap:1px; background:#fff; border:1px solid var(--line); border-radius:28px; overflow:hidden;
  box-shadow:var(--sh-sm);
}
.grid.joined > .card,.grid.joined > .card:hover{
  border:0; border-radius:0; transform:none;
  box-shadow:1px 0 0 var(--line), 0 1px 0 var(--line), 1px 1px 0 var(--line);
}
.grid.joined > .card{ padding:34px 32px; }
.grid.joined > .card:hover{ background:#fffaf6; }
.grid.joined > .card.accent::before{ border-radius:0; }
.grid.joined > .card.dark,.grid.joined > .card.dark:hover{ background:var(--ink); }

.band-dark .grid.joined{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.12); box-shadow:none; }
.band-dark .grid.joined > .card,.band-dark .grid.joined > .card:hover{
  background:transparent;
  box-shadow:1px 0 0 rgba(255,255,255,.12), 0 1px 0 rgba(255,255,255,.12), 1px 1px 0 rgba(255,255,255,.12);
}
.band-dark .grid.joined > .card:hover{ background:rgba(255,255,255,.04); }

/* Ícone de card com mais presença */
.c-ico{ width:52px; height:52px; border-radius:16px; background:var(--grad-soft); border:1px solid var(--brand-soft); }
.c-ico svg{ width:24px; height:24px; }
.card.on-dark .c-ico,.card.dark .c-ico{ border-color:rgba(255,255,255,.12); }

/* Na grade de 2 colunas, a última célula ímpar ocupa a linha inteira */
@media (max-width:860px){
  .grid-3.joined > :last-child:nth-child(odd),
  .mod-grid.joined:not(.four) > :last-child:nth-child(odd){ grid-column:1/-1; }
}
@media (max-width:640px){
  .grid.joined,.mod-grid.joined{ border-radius:22px; gap:1px; }
  .grid.joined > .card,.mod-grid.joined .mod{ padding:26px 22px; }
}

/* Timeline de detalhe (Como funciona): título à esquerda, texto à direita, fio entre etapas */
.timeline.detail::before{ left:27px; top:34px; bottom:34px; background:linear-gradient(180deg, var(--brand-300), var(--line-2)); }
.timeline.detail .tl-item{ grid-template-columns:56px 1fr; gap:28px; padding:26px 0; }
.timeline.detail .tl-item + .tl-item{ border-top:1px solid var(--line); }
.timeline.detail .tl-dot{
  width:56px; height:56px; border-radius:16px; border:1px solid var(--brand-soft);
  background:#fff; box-shadow:0 8px 20px rgba(242,98,44,.12);
}
.timeline.detail .tl-dot svg{ width:22px; height:22px; }
.timeline.detail .tl-body{ display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:8px 36px; align-items:start; padding-top:4px; }
.timeline.detail .tl-body h3{ font-size:19px; line-height:1.3; }
.timeline.detail .tl-body p{ margin:0; font-size:15px; line-height:1.7; }
@media (max-width:760px){
  .timeline.detail .tl-body{ grid-template-columns:1fr; }
  .timeline.detail .tl-body p{ margin-top:4px; }
}
@media (max-width:480px){
  .timeline.detail::before{ left:21px; }
  .timeline.detail .tl-item{ grid-template-columns:44px 1fr; gap:16px; }
  .timeline.detail .tl-dot{ width:44px; height:44px; border-radius:13px; }
}

/* Segmentos: a combinação recomendada vira um painel quente, os números em branco */
.card.combo{ background:var(--grad-soft); border-color:var(--brand-soft); box-shadow:none; }
.card.combo:hover{ transform:none; box-shadow:var(--sh); border-color:var(--brand-300); }
.combo .seg-stat{ background:#fff; border-color:var(--brand-soft); }
.combo .seg-stat b{ font-size:22px; }

/* ---------------------------------------------------------
   32. GESTÃO DE FILAS NO SUS (seções de prefeituras + chamada da home)
   A chamada .spotlight aparece na home e leva para
   segmento-municipios#gestao-de-filas. Lá e na WeAgenda, .dims são
   as 4 dimensões e .we-fit liga cada item ao módulo que o atende.
   --------------------------------------------------------- */
/* Ponto do eyebrow pulsando: sinaliza conteúdo em destaque */
.eyebrow.live::before{ animation:livePulse 2.2s var(--ease) infinite; }
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(242,98,44,.45); }
  70%{ box-shadow:0 0 0 9px rgba(242,98,44,0); }
  100%{ box-shadow:0 0 0 0 rgba(242,98,44,0); }
}
@media (prefers-reduced-motion: reduce){ .eyebrow.live::before{ animation:none; } }

.spotlight{
  position:relative; overflow:hidden; border-radius:32px;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:36px 60px; align-items:center;
  padding:56px 60px; background:var(--ink); color:#fff;
  box-shadow:0 30px 70px rgba(20,22,31,.22);
}
.spotlight::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(680px 400px at 0% 0%, rgba(242,98,44,.42), transparent 62%),
             radial-gradient(540px 340px at 100% 100%, rgba(247,161,60,.2), transparent 62%);
}
.spotlight::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(80% 80% at 50% 50%, #000, transparent);
  -webkit-mask-image:radial-gradient(80% 80% at 50% 50%, #000, transparent);
}
.spotlight > *{ position:relative; z-index:2; }
.spotlight h2{ color:#fff; font-size:clamp(28px,3.5vw,44px); letter-spacing:-.03em; }
.spotlight p{ margin-top:16px; max-width:540px; font-size:16.4px; color:rgba(255,255,255,.74); }
.spot-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.spotlight .btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28); }
.spotlight .btn-outline:hover{ border-color:var(--brand-400); color:var(--brand-300); }
.spot-list{
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg); overflow:hidden;
  background:rgba(255,255,255,.04); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.spot-list li{
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; align-items:center; padding:18px 22px;
  transition:background-color .25s;
}
.spot-list li + li{ border-top:1px solid rgba(255,255,255,.1); }
.spot-list li:hover{ background:rgba(255,255,255,.05); }
.spot-list .ci{
  display:grid; place-items:center; width:44px; height:44px; border-radius:13px;
  background:var(--grad); color:#fff; box-shadow:var(--sh-brand);
}
.spot-list .ci svg{ width:21px; height:21px; }
.spot-list strong{ display:block; font-family:var(--ff-display); font-size:15.6px; font-weight:700; color:#fff; }
.spot-list div span{ display:block; margin-top:2px; font-size:13.2px; line-height:1.5; color:rgba(255,255,255,.64); }

@media (max-width:1024px){
  .spotlight{ grid-template-columns:1fr; padding:44px 38px; }
}
@media (max-width:640px){
  .spotlight{ padding:32px 22px; border-radius:24px; }
  .spot-cta .btn{ width:100%; }
  .spot-list li{ padding:15px 16px; gap:14px; }
}

/* Visão do gestor: célula de fechamento em gradiente dentro da grade escura */
.band-dark .layer-num{ color:var(--brand-300); margin:-4px 0 6px; }
.card.on-dark p strong{ color:#fff; }
.band-dark .grid.joined > .card.grad-cell,
.band-dark .grid.joined > .card.grad-cell:hover{ background:var(--grad); }
.card.grad-cell{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.card.grad-cell h3{ color:#fff; font-size:21px; }
.card.grad-cell p{ color:rgba(255,255,255,.9); }
.card.grad-cell .btn{ margin-top:22px; }

/* Dimensões A–D: as que o documento marca como prioridade ganham borda e selo */
.dims{ display:grid; grid-template-columns:1fr 1fr; gap:28px 24px; align-items:start; }
.dim{
  position:relative; padding:34px 32px 18px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.dim:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--brand-soft); }
.dim.key{ border:1.5px solid var(--brand); box-shadow:0 16px 40px rgba(242,98,44,.16); }
.dim.key:hover{ border-color:var(--brand); }
.dim-head{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.dim-letter{
  display:grid; place-items:center; width:56px; height:56px; border-radius:16px; flex-shrink:0;
  background:var(--grad-soft); border:1px solid var(--brand-soft); color:var(--brand-600);
  font-family:var(--ff-display); font-size:26px; font-weight:800; line-height:1;
}
.dim.key .dim-letter{ background:var(--grad); border-color:transparent; color:#fff; box-shadow:var(--sh-brand); }
.dim-head .label{ margin-bottom:4px; }
.dim-head h3{ font-size:21px; }
.dim-list li{ padding:18px 0; border-top:1px solid var(--line); }
.dim-list h4{ font-size:15.6px; letter-spacing:-.01em; }
.dim-list p{ margin-top:6px; font-size:14.2px; line-height:1.62; color:var(--muted); }

/* "Na WeConecta": selo de status + módulo que atende o item */
.we-fit{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 9px; margin-top:12px;
  font-size:13px; font-weight:600; color:var(--ink-3);
}
.we-fit .badge{ padding:3px 10px; font-size:11.2px; }
.we-fit a,.we-fit button{ color:var(--brand-600); text-decoration:underline; text-decoration-color:var(--brand-soft); text-underline-offset:3px; }
.we-fit a:hover,.we-fit button:hover{ color:var(--brand-700); text-decoration-color:currentColor; }
.we-fit .badge + span,.we-fit .badge + a,.we-fit .badge + button{ margin-right:6px; }

@media (max-width:900px){ .dims{ grid-template-columns:1fr; gap:34px; } }
@media (max-width:640px){ .dim{ padding:30px 22px 12px; } .dim .path-flag{ left:22px; } }

/* Entrega final: o número grande puxa a leitura de cada célula */
.deliver-fig{
  display:block; margin-bottom:18px; white-space:nowrap;
  font-family:var(--ff-display); font-size:clamp(36px,3.6vw,48px); font-weight:800; line-height:1; letter-spacing:-.04em;
  background:linear-gradient(135deg,#fff 30%, var(--brand-300)); -webkit-background-clip:text;
  background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}

/* ---------------------------------------------------------
   33. PROBLEMA → O QUE A SOLUÇÃO FAZ
   Primeira seção depois do hero em home, soluções, segmentos e
   produtos. Uma peça só: o problema no painel escuro à esquerda,
   o que a solução faz à direita. A home empilha duas linhas.
   --------------------------------------------------------- */
.problem{
  border-radius:32px; overflow:hidden; background:#fff;
  border:1px solid var(--line); box-shadow:var(--sh-lg);
}
.problem-row{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); }
.pb-pain{ position:relative; overflow:hidden; padding:52px 56px; background:var(--ink); color:rgba(255,255,255,.74); }
.pb-pain::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 320px at 0% 0%, rgba(217,72,59,.34), transparent 64%);
}
.pb-pain > *{ position:relative; }
.pb-fix{ position:relative; padding:52px 56px 44px 64px; }
.problem-row + .problem-row > .pb-pain{ border-top:1px solid rgba(255,255,255,.1); }
.problem-row + .problem-row > .pb-fix{ border-top:1px solid var(--line); }

/* A seta em cima da emenda entre o problema e a solução */
.pb-fix::before{
  content:''; position:absolute; z-index:2; top:50%; left:-22px; width:44px; height:44px; margin-top:-22px;
  border-radius:50%; box-shadow:var(--sh-brand), 0 0 0 6px #fff;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/20px no-repeat, var(--grad);
}

.pb-tag{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  padding:6px 13px 6px 10px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; line-height:1.3;
}
.pb-tag .i{ width:14px; height:14px; }
.pb-pain .pb-tag{ background:rgba(217,72,59,.16); border:1px solid rgba(217,72,59,.4); color:#ffab9f; }
.pb-fix .pb-tag{ background:var(--ok-soft); border:1px solid #c7ecd8; color:var(--ok); }

.pb-pain h2,.pb-pain h3{ color:#fff; letter-spacing:-.03em; }
.pb-pain h2{ font-size:clamp(26px,3vw,38px); }
.pb-pain h3{ font-size:clamp(22px,2.4vw,30px); }
.pb-pain > p{ margin-top:16px; font-size:16px; line-height:1.66; }
.pb-pain p strong{ color:#fff; }

/* Número que dimensiona o problema */
.pb-fig{ display:flex; align-items:center; gap:16px; margin-top:26px; }
.pb-fig b{
  flex-shrink:0; font-family:var(--ff-display); font-size:clamp(38px,4vw,52px); font-weight:800; line-height:1; letter-spacing:-.04em;
  background:linear-gradient(135deg,#ffb3a6 10%, var(--brand-300)); -webkit-background-clip:text;
  background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.pb-fig span{ font-size:14px; line-height:1.5; color:rgba(255,255,255,.66); }

.pb-pains{ margin-top:24px; display:grid; gap:10px; }
.pb-pains li{ display:flex; gap:11px; align-items:flex-start; font-size:14.6px; line-height:1.5; color:rgba(255,255,255,.82); }
.pb-pains .i{ width:17px; height:17px; margin-top:2px; color:#ff8a7a; }

.fix-list li{ display:grid; grid-template-columns:42px minmax(0,1fr); gap:16px; padding:16px 0; }
.fix-list li + li{ border-top:1px solid var(--line); }
.fix-list .fx-ico{
  display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  background:var(--brand-tint); border:1px solid var(--brand-soft); color:var(--brand-600);
}
.fix-list .fx-ico svg{ width:20px; height:20px; }
.fix-list strong{ display:block; font-family:var(--ff-display); font-size:16.4px; font-weight:700; color:var(--ink); }
.fix-list strong .badge{ margin-left:6px; vertical-align:2px; }
.fix-list .fx-txt{ display:block; margin-top:3px; font-size:14.4px; line-height:1.58; color:var(--muted); }
.pb-fix .link-more{ display:inline-flex; margin-top:12px; }

@media (max-width:960px){
  .problem-row{ grid-template-columns:1fr; }
  .pb-pain{ padding:40px 36px 48px; }
  .pb-fix{ padding:44px 36px 32px; }
  .problem-row + .problem-row > .pb-pain{ border-top:0; }
  /* Empilhado, a seta desce para a emenda horizontal e aponta para baixo */
  .pb-fix::before{ top:-22px; left:50%; margin:0 0 0 -22px; transform:rotate(90deg); }
}
@media (max-width:640px){
  .problem{ border-radius:24px; }
  .pb-pain{ padding:32px 22px 40px; }
  .pb-fix{ padding:40px 22px 24px; }
  .pb-fig{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ---------------------------------------------------------
   34. NORMATIVAS (WeAgenda e prefeituras)
   Cada cartão: a norma, o que ela cobra e onde a plataforma entra.
   --------------------------------------------------------- */
.norms{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.norm{
  position:relative; display:flex; flex-direction:column; padding:32px 32px 26px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-sm);
}
.norm.key{ border:1.5px solid var(--brand); box-shadow:0 16px 40px rgba(242,98,44,.14); }
.norm-id{ font-family:var(--ff-mono); font-size:12.4px; font-weight:600; color:var(--brand-700); }
.norm h3{ margin-top:8px; font-size:20px; }
.norm > p{ margin:10px 0 18px; font-size:14.6px; line-height:1.64; color:var(--muted); }
/* margin-top:auto alinha o "onde entra" no pé dos cartões da mesma linha */
.norm-fit{
  display:flex; gap:10px; align-items:flex-start; margin-top:auto; padding-top:18px; border-top:1px solid var(--line);
  font-size:14px; line-height:1.55; color:var(--ink-3);
}
.norm-fit .i{ width:18px; height:18px; margin-top:1px; color:var(--ok); }
.norm-fit strong{ color:var(--ink); }
#normativas .fine a{ text-decoration:underline; text-underline-offset:3px; }
#normativas .fine a:hover{ color:var(--brand-600); }
@media (max-width:900px){ .norms{ grid-template-columns:1fr; } }
@media (max-width:640px){ .norm{ padding:26px 22px 22px; } }

/* ---------------------------------------------------------
   35. TEXTO LEGAL (política de privacidade)
   Texto corrido: a base zera margem e lista, aqui elas voltam.
   --------------------------------------------------------- */
.legal{ max-width:760px; color:var(--ink-3); font-size:16px; line-height:1.75; }
.legal h2{ font-size:22px; margin:48px 0 14px; color:var(--ink); }
.legal h2:first-child{ margin-top:0; }
.legal p + p, .legal p + ul, .legal ul + p{ margin-top:14px; }
.legal ul{ list-style:disc; padding-left:22px; }
.legal li + li{ margin-top:8px; }
.legal a{ color:var(--brand-600); text-decoration:underline; text-underline-offset:3px; }
.legal a:hover{ color:var(--brand-700); }
.legal .updated{ font-size:14px; color:var(--ink-3); opacity:.8; margin-bottom:32px; }
@media (max-width:640px){ .legal{ font-size:15.5px; } .legal h2{ font-size:20px; margin-top:40px; } }