/* =============================================================
   Conect Web — styles.css (v3)
   Redesign premium: base clara + hero/CTA escuros.
   Mapeado sobre as MESMAS classes do HTML atual (nada de markup
   foi removido) — referencia de qualidade: Linear / Vercel / Stripe.
   ============================================================= */

:root{
  /* Superficies claras — base cinza com cards brancos por cima,
     o que cria profundidade em vez de um branco chapado. */
  --bg:#E9EDF4;        /* fundo da pagina (cinza fechado) */
  --bg-subtle:#FFFFFF; /* secoes alternadas (brancas) */
  --bg-muted:#EDF0F5;  /* chips e caixas internas */
  --line:#E2E6ED;
  --line2:#CFD5DF;

  /* Superficies escuras (hero, CTA) */
  --dark:#0B0D14;
  --dark-line:rgba(255,255,255,.12);
  --dark-text:#F8FAFC;
  --dark-muted:rgba(226,232,240,.72);

  /* Texto */
  --text:#111827;
  --muted:#5B6473;
  --muted2:#7A8394;

  /* Marca */
  --brand:#2563EB;
  --brand-ink:#1D4ED8;
  --brand2:#7C3AED;
  --ok:#059669;
  --grad:linear-gradient(135deg, var(--brand), var(--brand2));
  --grad-soft:linear-gradient(140deg, rgba(37,99,235,.10), rgba(124,58,237,.10));

  /* Elevacao */
  --shadow-xs:0 1px 2px rgba(17,24,39,.05);
  --shadow-sm:0 1px 3px rgba(17,24,39,.06), 0 8px 24px -12px rgba(17,24,39,.10);
  --shadow:0 2px 6px rgba(17,24,39,.06), 0 18px 40px -20px rgba(17,24,39,.18);
  --shadow-lg:0 30px 70px -30px rgba(17,24,39,.35);

  --max:1160px;
  --radius:16px;
  --ring:0 0 0 3px rgba(37,99,235,.35);
}

/* Inter auto-hospedada (subset latino) — sem dependencia de terceiros. */
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/inter-400.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/inter-600.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/inter-700.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:800; font-display:swap; src:url("/fonts/inter-800.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:900; font-display:swap; src:url("/fonts/inter-900.woff2") format("woff2"); }

/* Fallback com metricas do Inter — elimina o salto de layout (CLS). */
@font-face{
  font-family:"Inter Fallback"; src:local("Arial");
  ascent-override:90.20%; descent-override:22.48%;
  line-gap-override:0.00%; size-adjust:107.40%;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* Rede de seguranca: nada rola horizontalmente no mobile */
html, body{ max-width:100%; overflow-x:hidden; }
img, svg, table{ max-width:100%; }

body{
  margin:0;
  font-family:Inter,"Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background-color:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* :not(#produtos *) evita que este reset generico vaze para dentro da
   vitrine importada do Lovable (que fica isolada via @scope no seu
   proprio CSS, mas continua alcancavel pelos seletores genericos daqui). */
a:not(#produtos *){ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:rgba(37,99,235,.16); }
.container{ width:min(var(--max),92%); margin:0 auto; }
section[id], main[id]{ scroll-margin-top:80px; }

:focus{ outline:none; }
:focus-visible{ box-shadow:var(--ring); border-radius:8px; outline:2px solid transparent; }

/* Animacao de entrada 100% CSS: roda no load e SEMPRE termina visivel. */
@keyframes revealUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.reveal{ animation:revealUp .55s cubic-bezier(.22,.61,.36,1) both; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* =============================================================
   Tipografia e secoes
   ============================================================= */
:is(h1,h2,h3,h4):not(#produtos *){ margin:0; letter-spacing:-.028em; line-height:1.14; font-weight:800; }
h1{ font-size:clamp(36px,5.2vw,62px); font-weight:900; letter-spacing:-.035em; line-height:1.08; }
h2{ font-size:clamp(27px,3.4vw,42px); }
h3{ font-size:clamp(18px,1.6vw,21px); letter-spacing:-.02em; }

.section{ padding:clamp(60px,7.5vw,108px) 0; }
.section--alt{ background:var(--bg-subtle); border-block:1px solid var(--line); }
.section__head{ max-width:660px; margin:0 auto clamp(34px,4.6vw,56px); text-align:center; }
.section__head h2{ margin:12px 0 14px; }
.section__head p{ margin:0; font-size:17px; color:var(--muted); }

.eyebrow{
  display:inline-block; font-size:12.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--brand);
}
.lead{ font-size:clamp(16px,1.4vw,18.5px); color:var(--muted); }
.lead b{ color:var(--text); font-weight:600; }
.link{ color:var(--brand); font-weight:600; }
.link:hover{ text-decoration:underline; }

/* =============================================================
   Botoes
   ============================================================= */
.btn{
  --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 20px; border-radius:14px;
  font-size:15px; font-weight:600; line-height:1.2; white-space:nowrap;
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd);
  cursor:pointer;
  transition:transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--sm{ padding:9px 15px; font-size:14px; border-radius:11px; }
.btn--lg{ padding:15px 26px; font-size:16px; border-radius:18px; }
.btn--block{ width:100%; }
.btn--primary{ --btn-bg:var(--brand); --btn-fg:#fff; box-shadow:0 1px 2px rgba(37,99,235,.28), 0 12px 26px -14px rgba(37,99,235,.75); }
.btn--primary:hover{ --btn-bg:var(--brand-ink); }
.btn--ghost{ --btn-bg:#fff; --btn-fg:var(--text); --btn-bd:var(--line2); box-shadow:var(--shadow-xs); }
.btn--ghost:hover{ --btn-bd:#C9CDD4; }
.btn--wa{ --btn-bg:#25D366; --btn-fg:#04140A; box-shadow:0 12px 26px -14px rgba(37,211,102,.9); }

/* Botoes sobre fundo escuro (hero e CTA) */
.hero .btn--ghost, .cta .btn--ghost{
  --btn-bg:rgba(255,255,255,.08); --btn-fg:#fff; --btn-bd:rgba(255,255,255,.22);
  backdrop-filter:blur(8px); box-shadow:none;
}
.hero .btn--ghost:hover, .cta .btn--ghost:hover{ --btn-bg:rgba(255,255,255,.14); --btn-bd:rgba(255,255,255,.34); }

/* =============================================================
   Topbar
   ============================================================= */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; }
.brand{ display:inline-flex; align-items:center; gap:11px; flex-shrink:0; }
/* Impede a marca de quebrar em varias linhas quando o menu esta cheio */
.brand__text strong, .brand__text small{ white-space:nowrap; }
.brand__logo{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:var(--grad); color:#fff; font-weight:800; font-size:13.5px; letter-spacing:-.02em;
  box-shadow:0 6px 16px -8px rgba(37,99,235,.9);
}
.brand__text strong{ display:block; font-weight:700; font-size:15.5px; letter-spacing:-.02em; }
.brand__text small{ display:block; font-size:11px; font-weight:500; color:var(--muted2); }

.nav{ display:flex; align-items:center; gap:2px; }
.nav a:not(.btn){
  padding:8px 11px; border-radius:9px; white-space:nowrap;
  font-size:14.5px; font-weight:500; color:var(--muted);
  transition:color .16s ease, background .16s ease;
}
.nav a:not(.btn):hover{ color:var(--text); background:var(--bg-muted); }
.nav .btn{ margin-left:8px; }

.nav__livia{
  display:inline-flex !important; align-items:center; gap:7px;
  margin-left:6px; padding:7px 13px 7px 11px !important;
  background:var(--grad-soft); border:1px solid rgba(37,99,235,.20);
  color:var(--brand-ink) !important; font-weight:700 !important;
}
.nav__livia:hover{ background:var(--grad-soft); border-color:rgba(37,99,235,.36); color:var(--brand-ink) !important; }
.nav__livia-dot{ width:6px; height:6px; border-radius:50%; background:var(--grad); flex-shrink:0; }
.mobile .nav__livia{ background:var(--grad-soft); border:1px solid rgba(37,99,235,.20); color:var(--brand-ink); font-weight:700; margin-bottom:4px; }

.menu{
  display:none; place-items:center; width:40px; height:40px;
  background:#fff; border:1px solid var(--line2); border-radius:10px; cursor:pointer;
}
.menu span{ display:block; width:16px; height:1.5px; background:var(--text); margin:3px 0; border-radius:2px; }

.mobile{ border-top:1px solid var(--line); background:#fff; }
.mobile__inner{ display:flex; flex-direction:column; gap:2px; padding:12px 0 18px; }
.mobile a:not(.btn){ padding:12px 10px; border-radius:10px; font-weight:600; color:var(--muted); }
.mobile a:not(.btn):hover{ background:var(--bg-muted); color:var(--text); }
.mobile .btn{ margin-top:10px; }

/* =============================================================
   Hero (escuro, com glow e grade sutil)
   ============================================================= */
.hero{
  position:relative; overflow:hidden;
  background:var(--dark); color:var(--dark-text);
  padding:clamp(64px,8vw,110px) 0 clamp(70px,8vw,104px);
}
.hero::before{
  content:""; position:absolute; inset:-40% -10% auto; height:120%;
  background:
    radial-gradient(680px 380px at 20% 8%, rgba(37,99,235,.30), transparent 62%),
    radial-gradient(560px 340px at 84% 14%, rgba(124,58,237,.24), transparent 60%);
  pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 0%, #000 22%, transparent 72%);
  pointer-events:none;
}
.hero > .container{ position:relative; z-index:1; }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,4.6vw,60px); align-items:start; }
.hero h1{ color:#fff; margin:0 0 18px; }
.hero h1 .u{
  background:linear-gradient(120deg,#93C5FD 10%,#C4B5FD 58%,#F0ABFC 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero .lead{ color:var(--dark-muted); max-width:540px; margin:0 0 28px; }
.hero .lead b{ color:#fff; }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px; }

/* Badge da Livia no hero — mesmo tamanho dos demais badges da badge-row */
.livia-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px; border-radius:999px; font-size:12.5px; font-weight:600;
  background:linear-gradient(90deg, rgba(37,99,235,.20), rgba(124,58,237,.20));
  border:1px solid rgba(124,58,237,.4); color:#fff; text-decoration:none;
  transition:border-color .2s ease, transform .2s ease;
}
.livia-badge:hover{ border-color:rgba(124,58,237,.65); transform:translateY(-1px); }
.livia-badge__dot{ width:7px; height:7px; border-radius:50%; background:var(--grad); flex-shrink:0; }

/* Badges do hero */
.badge-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.live-badge, .partner-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px; border-radius:999px; font-size:12.5px; font-weight:600;
  background:rgba(255,255,255,.07); border:1px solid var(--dark-line); color:var(--dark-muted);
  backdrop-filter:blur(6px);
}
.live-badge .dot{ width:7px; height:7px; border-radius:50%; background:#34D399; box-shadow:0 0 0 3px rgba(52,211,153,.22); }
.partner-badge::before{
  content:""; width:7px; height:7px; border-radius:2px;
  background:linear-gradient(135deg,#60A5FA,#C4B5FD);
}

.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.chip{
  font-size:12.5px; font-weight:600; color:var(--dark-muted);
  padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--dark-line);
}

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.stat{ padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid var(--dark-line); }
.stat strong{ display:block; font-size:14.5px; font-weight:700; color:#fff; }
.stat span{ display:block; font-size:12.5px; color:var(--dark-muted); margin-top:3px; }

.trustline{ display:flex; gap:18px; flex-wrap:wrap; font-size:13.5px; font-weight:500; color:var(--dark-muted); }
.trustline span{ position:relative; padding-left:23px; }
.trustline span::before{
  content:""; position:absolute; left:0; top:5px; width:15px; height:9px;
  border-left:2px solid #34D399; border-bottom:2px solid #34D399;
  transform:rotate(-45deg); border-radius:1px;
}

/* Painel do hero */
.hero__right{ position:relative; }
.panel{
  border-radius:24px; padding:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border:1px solid var(--dark-line);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
  backdrop-filter:blur(6px);
}
.panel__head strong{ display:block; font-size:15.5px; font-weight:700; color:#fff; }
.panel__head span{ display:block; font-size:13px; color:var(--dark-muted); margin-top:3px; }
.steps{ margin:20px 0; display:flex; flex-direction:column; }
.step{ display:flex; gap:14px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.step:last-child{ border-bottom:none; }
.step__dot{
  width:9px; height:9px; border-radius:50%; margin-top:7px; flex-shrink:0;
  background:linear-gradient(135deg,#60A5FA,#C4B5FD); box-shadow:0 0 0 4px rgba(96,165,250,.14);
}
.step strong{ font-size:14.5px; font-weight:600; color:#fff; }
.step p{ margin:3px 0 0; font-size:13px; color:var(--dark-muted); line-height:1.55; }

/* =============================================================
   Produtos ConectWeb (home) — Livia em destaque + produtos SaaS
   ============================================================= */
.prodhub{ display:flex; flex-direction:column; gap:22px; }

.prodcard{
  background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:26px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:14px;
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.prodcard:hover{ box-shadow:var(--shadow); transform:translateY(-2px); border-color:var(--line2); }
.prodcard__top{ display:flex; flex-direction:column; gap:6px; }
.prodcard__tag{
  align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; color:var(--brand); background:var(--grad-soft); border:1px solid rgba(37,99,235,.16);
}
.prodcard h3{ margin:2px 0 0; font-size:21px; }
.prodcard__tagline{ margin:0; font-size:14.5px; color:var(--muted); line-height:1.55; }
.prodcard .link{ margin-top:auto; }

.prodcard--flagship{
  background:var(--dark); border:none; padding:34px;
  border-radius:26px; box-shadow:0 30px 70px -35px rgba(37,99,235,.55);
  position:relative; overflow:hidden;
}
.prodcard--flagship::before{ content:""; position:absolute; inset:0; background:var(--grad-soft); opacity:.6; pointer-events:none; }
.prodcard--flagship > *{ position:relative; z-index:1; }
.prodcard--flagship h3{ color:#fff; font-size:27px; }
.prodcard--flagship .prodcard__tagline{ color:var(--dark-muted); font-size:16px; }
.prodcard__tag--flagship{ background:var(--grad); color:#fff; border:none; }
.prodcard__list{ list-style:none; margin:2px 0 6px; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:9px 20px; }
.prodcard__list li{ position:relative; padding-left:22px; font-size:14px; color:var(--dark-muted); }
.prodcard__list li::before{
  content:""; position:absolute; left:0; top:6px; width:13px; height:8px;
  border-left:2px solid #93C5FD; border-bottom:2px solid #93C5FD; transform:rotate(-45deg);
}
.prodcard--flagship .btn--primary{ align-self:flex-start; }

.prodhub__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

@media (max-width:900px){
  .prodhub__grid{ grid-template-columns:1fr; }
  .prodcard__list{ grid-template-columns:1fr; }
}

/* =============================================================
   Blocos de destaque (Sistemas / Integracao / Nuvemshop / Trafego)
   ============================================================= */
.sys, .integ, .nuvem{
  display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:stretch;
}
.sys__main, .integ__main, .nuvem__main{
  padding:clamp(24px,3vw,38px); border-radius:22px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.sys__main h3, .integ__main h3, .nuvem__main h3{ font-size:clamp(20px,2vw,25px); margin:0 0 12px; }
.sys__lead, .integ__lead, .nuvem__lead{ color:var(--muted); font-size:15.5px; margin:0 0 22px; }
.sys__lead b, .integ__lead b, .nuvem__lead b{ color:var(--text); font-weight:600; }

/* Listas com marcador de check */
.sys__list, .integ__list, .checklist{ list-style:none; padding:0; margin:0 0 24px; display:grid; gap:12px; }
.integ__list{ grid-template-columns:1fr 1fr; }
.sys__list li, .integ__list li, .checklist li{
  position:relative; padding-left:29px; font-size:14.5px; color:var(--muted); line-height:1.55;
}
.sys__list li b, .integ__list li b, .checklist li b{ color:var(--text); font-weight:600; }
.sys__list li::before, .integ__list li::before, .checklist li::before{
  content:""; position:absolute; left:0; top:2px;
  width:19px; height:19px; border-radius:6px;
  background:var(--grad-soft); border:1px solid rgba(37,99,235,.20);
}
.sys__list li::after, .integ__list li::after, .checklist li::after{
  content:""; position:absolute; left:5.5px; top:7px;
  width:8px; height:4.5px; border-left:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}
.sys__cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* Coluna lateral */
.sys__side{ display:flex; flex-direction:column; gap:16px; }
.sys__case, .integ__case, .nuvem__cert{
  padding:clamp(22px,2.6vw,30px); border-radius:22px;
  background:var(--bg-muted); border:1px solid var(--line);
}
.sys__case{ flex:1; }
.sys__case strong{ display:block; font-size:19px; font-weight:800; letter-spacing:-.02em; }
.sys__case p{ color:var(--muted); font-size:14px; margin:8px 0 14px; }
.sys__note{ padding:18px; border-radius:16px; background:#fff; border:1px solid var(--line); }
.sys__note strong{ display:block; font-size:14.5px; font-weight:700; margin-bottom:4px; }
.sys__note p{ margin:0; font-size:13px; color:var(--muted); }
.integ__case h4{ font-size:16.5px; font-weight:700; margin:0 0 16px; }

/* Cartao do certificado Nuvemshop */
.nuvem__cert{
  display:flex; flex-direction:column; justify-content:center; text-align:center;
  background:var(--dark); border-color:transparent; color:var(--dark-text);
  box-shadow:var(--shadow-lg);
}
.nuvem__seal{
  display:inline-block; align-self:center; margin-bottom:18px;
  font-size:11.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  color:#93C5FD; padding:7px 15px; border-radius:999px;
  background:rgba(96,165,250,.12); border:1px solid rgba(96,165,250,.32);
}
.nuvem__title{ display:block; font-size:18px; font-weight:800; color:#fff; letter-spacing:-.02em; }
.nuvem__who{ color:var(--dark-muted); font-size:14.5px; margin:10px 0 0; }
.nuvem__who b{ color:#fff; font-size:18px; font-weight:700; }
.nuvem__div{ height:1px; background:var(--dark-line); margin:20px auto; width:70%; }
.nuvem__desc{ color:rgba(226,232,240,.6); font-size:12.5px; margin:0; }
.pill--nuvem{ background:var(--grad-soft); border-color:rgba(37,99,235,.22); color:var(--brand); }

/* =============================================================
   Grid de solucoes
   ============================================================= */
.solgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.sol{
  padding:26px; border-radius:20px;
  background:#fff; border:1px solid var(--line);
  transition:border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.sol:hover{ border-color:var(--line2); box-shadow:var(--shadow-sm); transform:translateY(-3px); }
.sol__ico{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  margin-bottom:16px; font-size:15px; font-weight:800; letter-spacing:-.02em;
  color:var(--brand); background:var(--grad-soft); border:1px solid rgba(37,99,235,.16);
  font-variant-numeric:tabular-nums;
}
.sol h3{ font-size:16.5px; font-weight:700; margin:0 0 8px; }
.sol p{ margin:0; font-size:14px; color:var(--muted); line-height:1.6; }

/* =============================================================
   Problemas -> Solucao (diagnostico)
   ============================================================= */
.probgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.prob{
  position:relative; padding:26px 26px 24px; border-radius:20px;
  background:#fff; border:1px solid var(--line);
  transition:border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.prob:hover{ border-color:var(--line2); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.prob__tag{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--muted2); text-transform:uppercase; margin-bottom:10px;
}
.prob__desc{ margin:0 0 16px; font-size:14.5px; color:var(--muted); line-height:1.6; }
.prob__arrow{ font-size:15px; color:var(--brand); margin-bottom:8px; }
.prob__sol{ margin:0; font-size:15px; font-weight:700; color:var(--text); letter-spacing:-.01em; }

/* =============================================================
   Diagrama de fluxo (arquitetura simplificada)
   ============================================================= */
.flow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; }
.flow__node{
  font-size:12px; font-weight:700; padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid var(--dark-line); color:#fff;
  white-space:nowrap;
}
.flow__arrow{ color:var(--dark-muted); font-size:13px; flex-shrink:0; }
.pmock .flow__node{ background:#fff; border:1px solid var(--line); color:var(--text); }
.pmock .flow__arrow{ color:var(--muted2); }

/* =============================================================
   Diferenciais
   ============================================================= */
.diffgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:30px; }
.diff{
  position:relative; padding:22px 22px 22px 54px; border-radius:18px;
  background:#fff; border:1px solid var(--line);
}
.diff::before{
  content:""; position:absolute; left:20px; top:24px;
  width:20px; height:20px; border-radius:6px;
  background:var(--grad-soft); border:1px solid rgba(37,99,235,.20);
}
.diff::after{
  content:""; position:absolute; left:26px; top:29px;
  width:8px; height:4.5px; border-left:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:rotate(-45deg);
}
.diff strong{ display:block; font-size:15px; font-weight:700; margin-bottom:5px; }
.diff p{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.55; }

/* =============================================================
   Stack de tecnologias
   ============================================================= */
.stack{ text-align:center; }
.stack__label{
  display:block; font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted2); margin-bottom:16px;
}
.stack__chips{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.tchip{
  font-size:13.5px; font-weight:600; padding:9px 16px; border-radius:999px;
  background:#fff; border:1px solid var(--line); color:var(--muted);
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.tchip:hover{ border-color:var(--line2); color:var(--text); transform:translateY(-2px); }

/* =============================================================
   Secao escura (vitrine de produtos)
   ============================================================= */
.section--dark{ background:var(--dark); color:var(--dark-text); }
.section--dark .section__head h2{ color:#fff; }
.section--dark .section__head p{ color:var(--dark-muted); }
.section--dark .eyebrow{ color:#93C5FD; }

.section--dark .product{
  background:rgba(255,255,255,.04); border-color:var(--dark-line); box-shadow:none;
}
.section--dark .product:hover{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.20); box-shadow:none;
}
.section--dark .product h3{ color:#fff; }
.section--dark .product__desc{ color:var(--dark-muted); }
.section--dark .tag{ background:rgba(255,255,255,.07); border-color:var(--dark-line); color:var(--dark-muted); }
.section--dark .pill{ background:rgba(96,165,250,.14); border-color:rgba(96,165,250,.30); color:#93C5FD; }
.section--dark .live-badge--light{
  background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.30); color:#6EE7B7;
}
.section--dark .live-badge--light .dot{ background:#34D399; box-shadow:0 0 0 3px rgba(52,211,153,.20); }

/* Mockups claros passam a ler como escuros dentro da secao */
.section--dark .pmock{ background:rgba(255,255,255,.04); border-color:var(--dark-line); }
.section--dark .pmock__chip{ background:rgba(255,255,255,.08); border-color:var(--dark-line); color:var(--dark-muted); }
.section--dark .pmock__card{ background:rgba(255,255,255,.05); border-color:var(--dark-line); }
.section--dark .pmock__ico{ background:rgba(96,165,250,.18); color:#93C5FD; }
.section--dark .pmock__txt b{ color:#fff; }
.section--dark .pmock__txt span{ color:var(--dark-muted); }
.section--dark .pmock__kpi{ background:rgba(255,255,255,.05); border-color:var(--dark-line); }
.section--dark .pmock__kpi b{ color:#fff; }
.section--dark .pmock__kpi span{ color:var(--dark-muted); }

/* =============================================================
   Produtos proprios (destaque SaaS)
   ============================================================= */
.products{ display:grid; gap:20px; }
.product{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,52px); align-items:center;
  padding:clamp(24px,3.2vw,42px); border-radius:26px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.product:hover{ box-shadow:var(--shadow); transform:translateY(-2px); border-color:var(--line2); }
.product:nth-child(even) .product__media{ order:-1; }
.product__eyebrow{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:14px; }
.product h3{ font-size:clamp(22px,2.2vw,29px); margin:0 0 12px; }
.product__desc{ margin:0 0 18px; font-size:15.5px; color:var(--muted); line-height:1.65; }

/* Badge "em producao" sobre fundo claro */
.live-badge--light{
  background:rgba(5,150,105,.08); border-color:rgba(5,150,105,.26); color:var(--ok);
  backdrop-filter:none;
}
.live-badge--light .dot{ background:var(--ok); box-shadow:0 0 0 3px rgba(5,150,105,.16); }

/* Mockup ilustrativo de cada produto */
.pmock{
  display:grid; gap:11px; align-content:start;
  padding:20px; border-radius:20px; min-height:230px;
  background:var(--bg-muted); border:1px solid var(--line);
}
.pmock--dark{ background:var(--dark); border-color:transparent; color:var(--dark-text); box-shadow:var(--shadow-lg); }
.pmock__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pmock__chip{
  display:inline-flex; align-items:center; padding:6px 11px; border-radius:999px;
  font-size:11.5px; font-weight:700; background:#fff; border:1px solid var(--line); color:var(--muted);
}
.pmock--dark .pmock__chip{ background:rgba(255,255,255,.08); border-color:var(--dark-line); color:var(--dark-muted); }
.pmock__card{
  display:flex; align-items:center; gap:12px;
  padding:14px; border-radius:14px; background:#fff; border:1px solid var(--line);
}
.pmock--dark .pmock__card{ background:rgba(255,255,255,.05); border-color:var(--dark-line); }
.pmock__ico{
  width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex-shrink:0;
  background:var(--grad-soft); color:var(--brand);
}
.pmock--dark .pmock__ico{ background:rgba(96,165,250,.18); color:#93C5FD; }
.pmock__ico svg{ width:16px; height:16px; }
.pmock__txt b{ display:block; font-size:13.5px; font-weight:700; }
.pmock__txt span{ display:block; font-size:12px; color:var(--muted); }
.pmock--dark .pmock__txt b{ color:#fff; }
.pmock--dark .pmock__txt span{ color:var(--dark-muted); }
.pmock__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pmock__kpi{ padding:12px 8px; border-radius:12px; text-align:center; background:#fff; border:1px solid var(--line); }
.pmock--dark .pmock__kpi{ background:rgba(255,255,255,.05); border-color:var(--dark-line); }
.pmock__kpi b{ display:block; font-size:13.5px; font-weight:700; letter-spacing:-.02em; }
.pmock--dark .pmock__kpi b{ color:#fff; }
.pmock__kpi span{ display:block; font-size:10.5px; color:var(--muted); margin-top:2px; }
.pmock--dark .pmock__kpi span{ color:var(--dark-muted); }

/* A vitrine "Tecnologia ConectWeb em acao" (#produtos) agora vem
   inteira de /showcase-produtos.css (export do Lovable, isolado via
   @scope) — ver link no <head> do index.html. */

/* =============================================================
   Parcerias oficiais (separado de tecnologias utilizadas)
   Composicao unica sobre fundo escuro — mesma linguagem para os
   dois parceiros, sem contraste claro/escuro entre os cards.
   ============================================================= */
.partners{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.partner{
  border-radius:22px; padding:clamp(30px,3.4vw,46px);
  background:rgba(255,255,255,.04); border:1px solid var(--dark-line);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  transition:background .2s ease, border-color .2s ease;
}
.partner:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); }
.partner__eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  color:#93C5FD; padding:7px 15px; border-radius:999px;
  background:rgba(96,165,250,.12); border:1px solid rgba(96,165,250,.32);
}
/* Pequena area neutra so ao redor do badge Hostinger (que exige fundo
   claro para legibilidade) — o card em volta permanece escuro. */
.partner__badgewrap{
  background:#F3F4F6; border-radius:14px; padding:14px 20px;
  display:inline-flex; align-items:center; justify-content:center;
}
.partner__img{ width:150px; height:auto; display:block; }
.partner h3{ color:#fff; margin:0; font-size:19px; }
.partner p{ color:var(--dark-muted); margin:0; font-size:14.5px; max-width:36ch; }
.partner .link{ font-weight:700; font-size:14.5px; color:#93C5FD; }

@media (max-width:900px){ .partners{ grid-template-columns:1fr; } }

/* =============================================================
   Portfolio
   ============================================================= */
.workgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.work{
  display:flex; flex-direction:column; padding:24px; border-radius:20px;
  background:#fff; border:1px solid var(--line);
  transition:border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.work:hover{ border-color:var(--line2); box-shadow:var(--shadow); transform:translateY(-3px); }
.work__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.work__title{ display:block; font-size:17px; font-weight:700; letter-spacing:-.02em; }
.work__sub{ margin:4px 0 0; font-size:12.5px; color:var(--muted2); }
.work__desc{ flex:1; margin:0 0 16px; font-size:14px; color:var(--muted); line-height:1.6; }
.work__tags{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px; }
.work__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.work__actions .btn{ flex:1; }

.pill{
  display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px;
  font-size:11.5px; font-weight:700; white-space:nowrap;
  background:var(--grad-soft); border:1px solid rgba(37,99,235,.18); color:var(--brand);
}
.tag{
  display:inline-flex; align-items:center; padding:5px 10px; border-radius:8px;
  font-size:12px; font-weight:600;
  background:var(--bg-muted); border:1px solid var(--line); color:var(--muted);
}

/* =============================================================
   Timeline / Processo
   ============================================================= */
.timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.tl{
  display:flex; gap:14px; align-items:flex-start; padding:22px; border-radius:18px;
  background:#fff; border:1px solid var(--line);
  transition:border-color .2s ease, box-shadow .25s ease;
}
.tl:hover{ border-color:var(--line2); box-shadow:var(--shadow-sm); }
.tl__n{
  width:32px; height:32px; flex-shrink:0; border-radius:10px; display:grid; place-items:center;
  background:var(--grad); color:#fff; font-weight:700; font-size:14px;
  box-shadow:0 8px 18px -10px rgba(37,99,235,.9);
}
.tl strong{ display:block; font-size:15px; font-weight:700; letter-spacing:-.015em; }
.tl p{ margin:4px 0 0; font-size:13.5px; color:var(--muted); line-height:1.55; }

/* =============================================================
   CTA escuro + formulario
   ============================================================= */
.section--cta{ background:var(--bg-subtle); border-top:1px solid var(--line); }
.cta{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,54px); align-items:start;
  padding:clamp(28px,4vw,52px); border-radius:28px;
  background:var(--dark); color:var(--dark-text); box-shadow:var(--shadow-lg);
}
.cta::before{
  content:""; position:absolute; inset:auto -10% -60% -10%; height:120%;
  background:radial-gradient(560px 300px at 28% 100%, rgba(37,99,235,.28), transparent 62%),
             radial-gradient(460px 260px at 80% 90%, rgba(124,58,237,.22), transparent 60%);
  pointer-events:none;
}
.cta > *{ position:relative; z-index:1; }
.cta .eyebrow{ color:#93C5FD; }
.cta__left h2{ color:#fff; margin:12px 0 14px; }
.cta__left > p{ color:var(--dark-muted); margin:0 0 22px; font-size:16px; }
.cta__bullets{ display:grid; gap:12px; margin-bottom:20px; }
.cta__bullets div{ position:relative; padding-left:29px; font-size:14.5px; color:var(--dark-muted); }
.cta__bullets div::before{
  content:""; position:absolute; left:0; top:4px; width:14px; height:8px;
  border-left:2px solid #4ADE80; border-bottom:2px solid #4ADE80;
  transform:rotate(-45deg); border-radius:1px;
}
.cta__note{
  padding:15px 16px; border-radius:14px; font-size:13.5px; color:var(--dark-muted);
  background:rgba(255,255,255,.06); border:1px solid var(--dark-line);
}
.cta__note strong{ color:#fff; }

.form{ display:grid; gap:14px; }
.form label{ display:grid; gap:7px; font-size:13px; font-weight:600; color:var(--dark-muted); }
.form input[type="text"], .form select{
  width:100%; padding:13px 14px; border-radius:14px;
  background:rgba(255,255,255,.07); border:1px solid var(--dark-line); color:#fff;
  font-size:15px; font-family:inherit;
  transition:border-color .18s ease, background .18s ease;
}
.form select option{ color:var(--text); }
.form input::placeholder{ color:rgba(226,232,240,.45); }
.form input:focus, .form select:focus{ border-color:#60A5FA; background:rgba(255,255,255,.10); }
.form .check{ grid-auto-flow:column; justify-content:start; align-items:start; gap:10px; font-weight:500; font-size:13px; }
.form .check input{ width:17px; height:17px; margin-top:2px; accent-color:var(--brand); }
.fine{ margin:0; font-size:12px; color:rgba(226,232,240,.55); }

/* =============================================================
   FAQ (funciona com <button> atual e com <details>)
   ============================================================= */
.faq{ max-width:820px; margin:0 auto; display:grid; gap:10px; }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px; border-radius:16px; cursor:pointer; text-align:left; list-style:none;
  background:#fff; border:1px solid var(--line); color:var(--text);
  font-size:15.5px; font-weight:600; font-family:inherit; letter-spacing:-.015em;
  transition:border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::marker{ content:""; }
.faq__q:hover{ border-color:var(--line2); color:var(--brand); box-shadow:var(--shadow-xs); }
.faq__q span{
  font-size:21px; font-weight:300; color:var(--muted2); line-height:1; flex-shrink:0;
  transition:transform .22s ease, color .2s ease;
}
/* Aberto: o "+" gira 45deg e vira um "x" */
.faq__item[open] .faq__q{ border-color:var(--line2); color:var(--brand); }
.faq__item[open] .faq__q span{ transform:rotate(45deg); color:var(--brand); }
/* Compatibilidade com o markup antigo (button + aria-expanded) */
.faq__q[aria-expanded="true"]{ border-color:var(--line2); color:var(--brand); }
.faq__q[aria-expanded="true"] span{ color:var(--brand); }
.faq__a{ padding:2px 20px 18px; }
.faq__a p{ margin:0; font-size:14.5px; color:var(--muted); line-height:1.68; }

/* =============================================================
   Footer
   ============================================================= */
.footer{ background:var(--dark); color:var(--dark-text); padding:52px 0 40px; }
.footer__inner{ display:flex; align-items:flex-start; justify-content:space-between; gap:26px; flex-wrap:wrap; }
.footer strong{ font-size:15.5px; font-weight:700; letter-spacing:-.02em; color:#fff; }
.footer p{ margin:6px 0; font-size:14px; color:var(--dark-muted); }
.footer small{ font-size:13px; color:rgba(226,232,240,.55); }
.footer__links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer__links a{ font-size:14px; font-weight:500; color:var(--dark-muted); }
.footer__links a:hover{ color:#fff; }

/* =============================================================
   Banner de cookies (LGPD)
   ============================================================= */
.cookiebar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:80;
  background:var(--dark); color:var(--dark-text);
  border:1px solid var(--dark-line); border-radius:18px;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.6);
  animation:revealUp .4s ease both;
}
.cookiebar__inner{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  width:min(var(--max),100%); margin:0 auto; padding:18px 22px;
}
.cookiebar__txt{ margin:0; font-size:14px; color:var(--dark-muted); max-width:660px; line-height:1.6; }
.cookiebar__txt a{ color:#93C5FD; font-weight:600; text-decoration:underline; }
.cookiebar__btns{ display:flex; gap:10px; flex-shrink:0; }
.cookiebar .btn--ghost{
  --btn-bg:rgba(255,255,255,.08); --btn-fg:#fff; --btn-bd:rgba(255,255,255,.22); box-shadow:none;
}
.cookiebar .btn--ghost:hover{ --btn-bg:rgba(255,255,255,.14); }

@media (max-width:720px){
  .cookiebar{ bottom:82px; }
  .cookiebar__inner{ padding:16px 18px; }
  .cookiebar__btns{ width:100%; }
  .cookiebar__btns .btn{ flex:1; }
}

/* =============================================================
   Paginas legais (privacidade, termos, cookies)
   ============================================================= */
.legal{ padding:clamp(48px,6vw,84px) 0 clamp(60px,7vw,96px); }
.legal__head{ max-width:760px; margin:0 auto clamp(30px,4vw,46px); }
.legal__head h1{ font-size:clamp(30px,4vw,44px); margin:12px 0 12px; }
.legal__head p{ margin:0; font-size:16.5px; color:var(--muted); }
.legal__updated{ display:inline-block; margin-top:16px; font-size:13px; color:var(--muted2); }

.legal__body{
  max-width:760px; margin:0 auto; padding:clamp(26px,3.4vw,44px);
  background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-sm);
}
.legal__body h2{ font-size:clamp(19px,2vw,23px); margin:36px 0 12px; }
.legal__body h2:first-child{ margin-top:0; }
.legal__body h3{ font-size:16.5px; font-weight:700; margin:22px 0 8px; }
.legal__body p{ margin:0 0 14px; font-size:15px; color:var(--muted); line-height:1.72; }
.legal__body strong{ color:var(--text); font-weight:600; }
.legal__body a{ color:var(--brand); font-weight:600; }
.legal__body a:hover{ text-decoration:underline; }
.legal__body ul{ margin:0 0 16px; padding-left:20px; }
.legal__body li{ margin-bottom:9px; font-size:15px; color:var(--muted); line-height:1.7; }
.legal__body li strong{ color:var(--text); }

.legal__table{ width:100%; border-collapse:collapse; margin:0 0 18px; font-size:14px; }
.legal__table th, .legal__table td{
  text-align:left; padding:11px 12px; border:1px solid var(--line); vertical-align:top;
}
.legal__table th{ background:var(--bg-muted); font-weight:700; color:var(--text); font-size:13px; }
.legal__table td{ color:var(--muted); }

.legal__note{
  padding:16px 18px; border-radius:14px; margin:0 0 18px;
  background:var(--bg-muted); border:1px solid var(--line);
  font-size:14px; color:var(--muted);
}
.legal__note strong{ color:var(--text); }

/* =============================================================
   WhatsApp flutuante + barra mobile
   ============================================================= */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:70;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; box-shadow:0 14px 32px -10px rgba(37,211,102,.8);
  transition:transform .18s ease;
}
.wa-float:hover{ transform:scale(1.06); }

/* =============================================================
   Responsivo
   ============================================================= */
@media (max-width:1000px){
  .solgrid, .diffgrid, .workgrid{ grid-template-columns:repeat(2,1fr); }
  .timeline{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .probgrid{ grid-template-columns:1fr; }
  .flow{ gap:6px; }
  .flow__node{ font-size:11px; padding:7px 10px; }
}
/* Menu horizontal recolhe antes de ficar apertado (o site tem 7 itens) */
@media (max-width:1080px){
  .nav{ display:none; }
  .menu{ display:grid; }
}
@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; gap:40px; }
  .hero__right{ order:-1; }
  .sys, .integ, .nuvem, .cta, .product{ grid-template-columns:1fr; }
  .integ__list{ grid-template-columns:1fr; }
  /* Com a coluna unica, o mockup sempre vai abaixo do texto */
  .product:nth-child(even) .product__media,
  .product .product__media{ order:0; }
}
@media (max-width:720px){
  .nav{ display:none; }
  .menu{ display:grid; }
  .solgrid, .diffgrid, .workgrid, .timeline{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  /* Tabelas das paginas legais rolam em vez de estourar a tela */
  .legal__table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* Botao flutuante um pouco acima da borda, respeitando area segura */
  .wa-float{ bottom:calc(18px + env(safe-area-inset-bottom)); right:16px; }
}