/* ==========================================================================
   FMDB — Especialistas em Banco de Dados
   Tema clean/business com modo claro e escuro (alterna por horário ou manual).
   Cores e estilos são controlados por variáveis semânticas em :root.
   ========================================================================== */

/* ---------- Tokens de tema ---------- */
:root{
  /* superfícies / texto (modo claro) */
  --bg:        #ffffff;
  --bg-alt:    #f4f7fb;
  --surface:   #ffffff;
  --surface-2: #f1f5fa;
  --text:      #0f1b2d;
  --heading:   #0b1626;
  --muted:     #54627a;
  --border:    #e5eaf1;
  --border-2:  #d7deea;

  /* marca */
  --accent:        #1f5fd6;   /* azul corporativo */
  --accent-strong: #1849a8;   /* hover */
  --accent-soft:   rgba(31,95,214,.08);
  --accent-contrast:#ffffff;
  --ok:            #1f9d6b;

  /* sombras */
  --shadow-sm: 0 1px 2px rgba(15,27,45,.06), 0 1px 3px rgba(15,27,45,.05);
  --shadow:    0 6px 20px rgba(15,27,45,.08);
  --shadow-lg: 0 18px 50px rgba(15,27,45,.12);

  /* layout */
  --container: 1180px;
  --radius:    14px;
  --radius-sm: 10px;

  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Plus Jakarta Sans', var(--font-body);

  color-scheme: light;
}

:root[data-theme="dark"]{
  --bg:        #0b1220;
  --bg-alt:    #0e1626;
  --surface:   #121c30;
  --surface-2: #182338;
  --text:      #e8eef8;
  --heading:   #f4f7fc;
  --muted:     #9aa8c0;
  --border:    #233148;
  --border-2:  #2c3c57;

  --accent:        #4f8df9;
  --accent-strong: #6ba0fb;
  --accent-soft:   rgba(79,141,249,.14);
  --accent-contrast:#0b1220;
  --ok:            #34d399;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 22px 60px rgba(0,0,0,.5);

  color-scheme: dark;
}

/* suaviza a troca de tema */
:root{ --t: background-color .3s ease, border-color .3s ease, color .3s ease; }

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; overflow-x:clip; max-width:100% }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  transition:var(--t);
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--accent); text-decoration:none; transition:color .2s }
a:hover{ color:var(--accent-strong) }
h1,h2,h3,h4,h5,h6{ font-family:var(--font-head); color:var(--heading); margin:0 0 .5em; line-height:1.2; font-weight:700 }
p{ margin:0 0 1em }
ul{ margin:0; padding:0 }

/* ---------- Layout ---------- */
.container{ max-width:var(--container); margin:0 auto; padding:0 24px }
.section{ padding:88px 0; transition:var(--t) }
.section--alt{ background:var(--bg-alt) }
.section--tight{ padding:56px 0 }

.section-head{ max-width:680px; margin-bottom:48px }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center }
.eyebrow{
  display:inline-block; font-family:var(--font-body); font-weight:700;
  font-size:13px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.section-title{ font-size:clamp(28px,4vw,42px); margin:0 0 14px }
.section-sub{ color:var(--muted); font-size:18px; margin:0 }

.grid{ display:grid; gap:24px }
.grid-2{ grid-template-columns:repeat(2,1fr) }
.grid-3{ grid-template-columns:repeat(3,1fr) }
.grid-4{ grid-template-columns:repeat(4,1fr) }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:15px; line-height:1;
  padding:14px 26px; border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; transition:.2s; white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:var(--accent-contrast); border-color:var(--accent) }
.btn-primary:hover{ background:var(--accent-strong); border-color:var(--accent-strong); color:var(--accent-contrast); transform:translateY(-1px); box-shadow:var(--shadow) }
.btn-outline{ background:transparent; color:var(--text); border-color:var(--border-2) }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent) }
.btn-ghost{ background:var(--surface-2); color:var(--text) }
.btn-ghost:hover{ color:var(--accent) }
.btn-wa{ background:#1faf53; color:#fff; border-color:#1faf53 }
.btn-wa:hover{ background:#178a42; border-color:#178a42; color:#fff; transform:translateY(-1px) }
.btn-lg{ padding:17px 32px; font-size:16px }
.btn-sm{ padding:10px 18px; font-size:14px }
.btn-block{ width:100% }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  transition:var(--t);
}
.header-inner{ display:flex; align-items:center; gap:24px; height:72px }
.brand{ display:inline-block; font-family:var(--font-head); font-weight:800; font-size:28px; color:var(--heading); letter-spacing:-.01em }
.brand:hover{ color:var(--heading) }
.brand-accent{ color:var(--accent) }
.brand-mark{
  width:38px; height:38px; border-radius:10px; flex:0 0 auto;
  display:grid; place-items:center; color:#fff; font-size:17px;
  background:linear-gradient(135deg,var(--accent),#2b7be0);
  box-shadow:var(--shadow-sm);
}
.brand-mark.dark-on{ } /* placeholder */
.nav{ margin-left:auto }
.nav-list{ display:flex; align-items:center; gap:28px; list-style:none }
.nav-link{ font-weight:500; font-size:15px; color:var(--text) }
.nav-link:hover{ color:var(--accent) }
.nav-link.active{ color:var(--accent); font-weight:600 }
.header-actions{ display:flex; align-items:center; gap:12px }
.theme-toggle{
  width:40px; height:40px; border-radius:10px; border:1px solid var(--border-2);
  background:var(--surface); color:var(--text); cursor:pointer; display:grid; place-items:center;
  font-size:16px; transition:.2s;
}
.theme-toggle:hover{ color:var(--accent); border-color:var(--accent) }
.nav-toggle{
  display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--border-2);
  background:var(--surface); color:var(--text); font-size:18px; cursor:pointer;
  position:relative; z-index:80;
}
/* fundo escurecido atrás do menu mobile — toque fora fecha */
.nav-backdrop{ position:fixed; inset:0; background:rgba(2,6,15,.55); z-index:65; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s }
.nav-backdrop.open{ opacity:1; visibility:visible }
body.nav-open{ overflow:hidden }
body.nav-open .wa-float{ display:none }

/* ---------- Hero ---------- */
.hero{ padding:84px 0 72px; position:relative; overflow:hidden }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 60% at 85% 0%, var(--accent-soft), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, var(--accent-soft), transparent 70%);
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center }
.hero-title{ font-size:clamp(34px,5vw,56px); line-height:1.05; letter-spacing:-.02em; margin:18px 0 20px }
.hero-title .hl{ color:var(--accent) }
.hero-sub{ font-size:19px; color:var(--muted); max-width:30em; margin:0 0 28px }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:26px }
.hero-trust{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; color:var(--muted); font-size:14px }
.hero-trust .dot{ width:5px; height:5px; border-radius:50%; background:var(--ok) }

.chip{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:13px;
  padding:7px 14px; border-radius:999px; background:var(--accent-soft); color:var(--accent);
}

/* painel de "monitoramento" do hero (clean, sem ser futurista) */
.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.panel-top{ display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--border); background:var(--surface-2) }
.panel-top .lights{ display:flex; gap:6px }
.panel-top .lights span{ width:11px; height:11px; border-radius:50% }
.panel-top .lights span:nth-child(1){ background:#e0625b }
.panel-top .lights span:nth-child(2){ background:#e3b341 }
.panel-top .lights span:nth-child(3){ background:#3fb56b }
.panel-top .panel-title{ font-size:13px; color:var(--muted); font-weight:600 }
.panel-body{ padding:8px 18px 18px }
.panel-row{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--border) }
.panel-row:last-child{ border-bottom:0 }
.panel-row .db{ display:flex; align-items:center; gap:11px; font-weight:600; color:var(--heading); min-width:0 }
.panel-row .db i{ color:var(--accent) }
.panel-row .meta{ margin-left:auto; text-align:right; font-size:13px; color:var(--muted) }
.status{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ok) }
.status .pulse{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(31,157,107,.5); animation:pulse 2.2s infinite }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(31,157,107,0) } 100%{ box-shadow:0 0 0 0 rgba(31,157,107,0) } }

/* ---------- Cartões genéricos ---------- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s, border-color .2s;
  height:100%;
}
.card.hover:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--accent) 40%, var(--border)) }
.icon-badge{
  width:54px; height:54px; border-radius:13px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); font-size:22px; margin-bottom:18px;
}
.card h3{ font-size:20px; margin:0 0 8px }
.card p{ color:var(--muted); font-size:15px; margin:0 }
.card-link{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-weight:600; font-size:14px }
.card-link i{ transition:transform .2s }
.card-link:hover i{ transform:translateX(3px) }

/* ---------- Tecnologias ---------- */
.tech-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px }
.tech-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px 18px; text-align:center; box-shadow:var(--shadow-sm); transition:.2s;
}
.tech-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 45%, var(--border)); box-shadow:var(--shadow) }
.tech-card i{ font-size:30px; color:var(--accent); margin-bottom:12px }
.tech-name{ font-family:var(--font-head); font-weight:700; color:var(--heading); font-size:16px }
.tech-desc{ font-size:13px; color:var(--muted); margin-top:4px }

/* logos das marcas — sem caixa; coloridos no claro, brancos no escuro */
.tech-logo{
  height:64px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
/* P&B sólido por padrão (preto no claro), cor cheia no hover do card */
.tech-logo img{
  max-height:44px; max-width:150px; width:auto; height:auto; object-fit:contain;
  filter:brightness(0); opacity:.85; transition:filter .3s, opacity .3s;
}
.tech-card:hover .tech-logo img{ filter:none; opacity:1 }
/* no escuro: branco sólido por padrão */
:root[data-theme="dark"] .tech-logo img{ filter:brightness(0) invert(1); opacity:.92 }
:root[data-theme="dark"] .tech-card:hover .tech-logo img{ filter:none; opacity:1 }

/* tamanho ÓTICO por logo (cada marca tem proporção diferente) */
.tech-logo img[src*="oracle"]     { max-width:172px; max-height:30px }
.tech-logo img[src*="sqlserver"]  { max-width:54px;  max-height:42px }
.tech-logo img[src*="postgresql"] { max-width:52px;  max-height:46px }
.tech-logo img[src*="db2"]        { max-width:120px; max-height:42px }
.tech-logo img[src*="informix"]   { max-width:152px; max-height:34px }

/* faixa de logos — estilo do template original: P&B, acende colorido no hover */
.logo-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:34px 56px; padding:8px 0 }
.logo-strip img{ width:auto; height:auto; object-fit:contain; filter:brightness(0); opacity:.78; transition:filter .25s, opacity .25s }
.logo-strip img:hover{ filter:none; opacity:1 }
:root[data-theme="dark"] .logo-strip img{ filter:brightness(0) invert(1); opacity:.82 }
:root[data-theme="dark"] .logo-strip img:hover{ filter:none; opacity:1 }
/* proporção ótica por logo (wordmarks por largura, ícones por altura) */
.logo-strip img[src*="oracle"]     { width:168px }
.logo-strip img[src*="sqlserver"]  { height:42px }
.logo-strip img[src*="postgresql"] { height:46px }
.logo-strip img[src*="db2"]        { height:40px }
.logo-strip img[src*="informix"]   { height:34px }
@media(max-width:600px){ .logo-strip{ gap:28px 40px } .logo-strip img{ max-width:60vw } .logo-strip img[src*="oracle"]{ width:140px } .logo-strip img[src*="postgresql"],.logo-strip img[src*="sqlserver"]{ height:38px } }
.brand-logo{ height:26px; width:auto; display:inline-block; vertical-align:middle }
.partner-badge{
  display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
  color:var(--ok); background:rgba(31,157,107,.1); padding:5px 12px; border-radius:999px; margin-top:10px;
}
.logo-chip{
  height:46px; min-width:60px; flex:0 0 auto; display:flex; align-items:center; justify-content:flex-start;
}
.logo-chip img{
  max-height:30px; max-width:120px; width:auto; height:auto; object-fit:contain;
  filter:brightness(0); opacity:.82; transition:filter .3s, opacity .3s;
}
.card:hover .logo-chip img{ filter:none; opacity:1 }
:root[data-theme="dark"] .logo-chip img{ filter:brightness(0) invert(1); opacity:.92 }
:root[data-theme="dark"] .card:hover .logo-chip img{ filter:none; opacity:1 }
/* tamanho ótico por logo */
.logo-chip img[src*="oracle"]     { max-width:118px; max-height:20px }
.logo-chip img[src*="sqlserver"]  { max-width:36px;  max-height:30px }
.logo-chip img[src*="postgresql"] { max-width:34px;  max-height:32px }
.logo-chip img[src*="db2"]        { max-width:84px;  max-height:30px }
.logo-chip img[src*="informix"]   { max-width:108px; max-height:24px }

/* ---------- Equipe ---------- */
.team-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px }
.team-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column }
.team-card.hover{ transition:transform .2s, box-shadow .2s, border-color .2s }
.team-card.hover:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--accent) 40%, var(--border)) }
.team-top{ display:flex; gap:18px; align-items:center; margin-bottom:18px }
.team-avatar{ position:relative; width:84px; height:84px; border-radius:18px; flex:0 0 auto; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); font-family:var(--font-head); font-weight:800; font-size:28px; overflow:hidden }
.team-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.team-name{ margin:0 0 2px; font-size:21px }
.team-role{ color:var(--accent); font-weight:600; font-size:14px }
.team-bio{ color:var(--muted); font-size:15px; margin:0 0 14px }
.team-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px }
.team-tag{ font-size:12px; font-weight:600; background:var(--surface-2); color:var(--text); padding:5px 11px; border-radius:999px }
.team-links{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap }
@media(max-width:760px){ .team-grid{ grid-template-columns:1fr } }

/* ---------- Estatísticas ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center }
.stat-num{ font-family:var(--font-head); font-weight:800; font-size:clamp(34px,4vw,46px); color:var(--accent); line-height:1 }
.stat-label{ color:var(--muted); font-size:15px; margin-top:6px }

/* ---------- Passos (como funciona) ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step }
.step{ position:relative; padding-top:8px }
.step-num{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-contrast); font-family:var(--font-head); font-weight:800; font-size:18px; margin-bottom:16px;
}
.step h3{ font-size:19px; margin:0 0 6px }
.step p{ color:var(--muted); margin:0; font-size:15px }

/* ---------- Faixa de CTA ---------- */
.cta-band{
  background:linear-gradient(135deg,var(--accent),#2b7be0); color:#fff;
  border-radius:var(--radius); padding:48px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:30px; flex-wrap:wrap;
}
.cta-band h2{ color:#fff; font-size:clamp(24px,3vw,32px); margin:0 0 6px }
.cta-band p{ color:rgba(255,255,255,.9); margin:0; font-size:17px }
.cta-band .cta-actions{ margin-left:auto; display:flex; gap:14px; flex-wrap:wrap }
.cta-band .btn-outline{ color:#fff; border-color:rgba(255,255,255,.6) }
.cta-band .btn-outline:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:#fff }
.cta-band .btn-primary{ background:#fff; color:var(--accent); border-color:#fff }
.cta-band .btn-primary:hover{ background:#f0f4ff; color:var(--accent) }

/* ---------- Depoimento ---------- */
.quote-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:40px; box-shadow:var(--shadow-sm); max-width:820px; margin:0 auto; text-align:center }
.quote-stars{ color:#f0a52a; font-size:16px; margin-bottom:18px; display:flex; gap:5px; justify-content:center }
.quote-text{ font-size:21px; line-height:1.6; color:var(--heading); font-family:var(--font-head); font-weight:500; margin:0 0 24px }
.quote-author{ display:flex; align-items:center; gap:14px; justify-content:center }
.quote-avatar{ width:52px; height:52px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center; color:var(--accent); font-weight:700 }
.quote-name{ font-weight:700; color:var(--heading) }
.quote-role{ color:var(--muted); font-size:14px }

/* ---------- Cabeçalho de página interna ---------- */
.page-head{ padding:64px 0; background:var(--bg-alt); border-bottom:1px solid var(--border); text-align:center }
.page-head h1{ font-size:clamp(30px,4vw,44px); margin:0 0 10px }
.breadcrumb{ color:var(--muted); font-size:14px; display:flex; gap:8px; justify-content:center; align-items:center }
.breadcrumb i{ font-size:11px }

/* ---------- Texto legal (privacidade) ---------- */
.legal{ max-width:820px; margin:0 auto }
.legal h2{ font-size:22px; margin:38px 0 12px }
.legal h2:first-of-type{ margin-top:0 }
.legal p,.legal li{ color:var(--muted); font-size:15.5px }
.legal ul{ padding-left:20px; display:flex; flex-direction:column; gap:8px; margin:0 0 16px }
.legal a{ color:var(--accent) }
.legal .pending{ display:inline-block; background:rgba(240,165,42,.16); color:#c47d10; border:1px dashed #e0a52a; border-radius:6px; padding:1px 8px; font-weight:600; font-size:14px }
:root[data-theme="dark"] .legal .pending{ color:#f0b450 }
.legal-updated{ color:var(--muted); font-size:14px; margin-top:28px; font-style:italic }

/* ---------- Lista de checagens ---------- */
.check-list{ list-style:none; display:flex; flex-direction:column; gap:12px }
.check-list li{ display:flex; gap:11px; align-items:flex-start; color:var(--text) }
.check-list li i{ color:var(--ok); margin-top:4px }

/* ---------- Formulário ---------- */
.form{ display:flex; flex-direction:column; gap:16px }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.field label{ display:block; font-size:14px; font-weight:600; margin-bottom:7px; color:var(--text) }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border-radius:var(--radius-sm); border:1px solid var(--border-2);
  background:var(--surface); color:var(--text); font-family:var(--font-body); font-size:15px; transition:.15s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.field input::placeholder,.field textarea::placeholder{ color:var(--muted); opacity:.7 }
.form-note{ font-size:13px; color:var(--muted) }
.form-feedback{ display:none; padding:14px 16px; border-radius:var(--radius-sm); font-size:14px; font-weight:500 }
.form-feedback.ok{ display:block; background:rgba(31,157,107,.12); color:var(--ok); border:1px solid rgba(31,157,107,.3) }
.form-feedback.err{ display:block; background:rgba(224,98,91,.12); color:#d9534f; border:1px solid rgba(224,98,91,.3) }

/* ---------- Caixa de contato (info) ---------- */
.info-item{ display:flex; gap:15px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--border) }
.info-item:last-child{ border-bottom:0 }
.info-item .icon-badge{ margin-bottom:0; width:46px; height:46px; font-size:18px }
.info-item h4{ margin:0 0 2px; font-size:16px }
.info-item p,.info-item a{ margin:0; color:var(--muted); font-size:15px }

/* ---------- Planos ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch }
.plan{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; position:relative }
.plan.featured{ border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-6px) }
.plan-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--accent-contrast); font-size:12px; font-weight:700; padding:5px 16px; border-radius:999px }
.plan h3{ font-size:21px; margin:0 0 4px }
.plan .plan-sub{ color:var(--muted); font-size:14px; margin:0 0 20px }
.plan .plan-price{ font-family:var(--font-head); font-weight:800; font-size:38px; color:var(--heading); line-height:1 }
.plan .plan-price small{ font-size:15px; font-weight:500; color:var(--muted) }
.plan .check-list{ margin:24px 0; flex:1 }
.plan .check-list li{ font-size:14.5px }

/* ---------- Acordeão (FAQ) ---------- */
.accordion{ display:flex; flex-direction:column; gap:12px; max-width:840px; margin:0 auto }
.acc-item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden }
.acc-head{ width:100%; text-align:left; background:none; border:0; color:var(--heading); font-family:var(--font-head); font-weight:600; font-size:17px; padding:20px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; cursor:pointer }
.acc-head i{ color:var(--accent); transition:transform .25s; flex:0 0 auto }
.acc-item.open .acc-head i{ transform:rotate(180deg) }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .3s ease }
.acc-inner{ padding:0 22px 22px; color:var(--muted) }

/* ---------- Rodapé ---------- */
.site-footer{ background:var(--bg-alt); border-top:1px solid var(--border); padding:64px 0 28px; transition:var(--t) }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px }
.footer-brand p{ color:var(--muted); font-size:14.5px; margin:14px 0 18px; max-width:30ch }
.footer-col h4{ font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 16px }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:11px }
.footer-col a{ color:var(--text); font-size:15px }
.footer-col a:hover{ color:var(--accent) }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:15px; margin-bottom:11px }
.footer-contact i{ color:var(--accent); margin-top:4px }
.social{ display:flex; gap:10px; margin-top:6px }
.social a{ width:38px; height:38px; border-radius:10px; background:var(--surface); border:1px solid var(--border); display:grid; place-items:center; color:var(--text) }
.social a:hover{ background:var(--accent); color:#fff; border-color:var(--accent) }
.footer-bottom{ margin-top:44px; padding-top:22px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:13.5px }

/* ---------- WhatsApp flutuante ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:80;
  width:58px; height:58px; border-radius:50%; background:#25d366; color:#fff;
  display:grid; place-items:center; font-size:27px; box-shadow:0 10px 30px rgba(37,211,102,.45);
  transition:transform .2s;
}
.wa-float:hover{ transform:scale(1.08); color:#fff }

/* ---------- Utilidades ---------- */
.text-center{ text-align:center }
.mt-0{ margin-top:0 }
.muted{ color:var(--muted) }
@media(max-width:880px){ .hide-sm{ display:none !important } }

/* ---------- Robustez mobile (anti-overflow horizontal) ---------- */
.hero-grid>*,.grid>*,.footer-grid>*,.plans>*,.stats>*,.steps>*,.tech-grid>*,.team-grid>*,.info-item>*{ min-width:0 }
.card{ min-width:0; overflow-wrap:anywhere }
.card>div[style*="display:flex"]{ min-width:0 }
.card>div[style*="display:flex"]>div{ min-width:0 }
.hero-title,.section-title,.section-sub,.page-head h1{ overflow-wrap:anywhere }
.info-item>div{ min-width:0 }
.info-item h4,.info-item p,.info-item a{ overflow-wrap:anywhere }
.footer-contact li,.footer-contact a,.footer-contact span,.footer-col a{ overflow-wrap:anywhere }
.legal{ overflow-wrap:break-word }
.legal .pending{ max-width:100%; overflow-wrap:anywhere; white-space:normal }
.acc-head{ min-width:0; overflow-wrap:anywhere }

/* ---------- Responsivo ---------- */
@media(max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:40px }
  .hero-visual{ order:0 }
  .grid-4{ grid-template-columns:repeat(2,1fr) }
  .tech-grid{ grid-template-columns:repeat(3,1fr) }
  .stats{ grid-template-columns:repeat(2,1fr); gap:32px }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px }
}
@media(max-width:760px){
  .section{ padding:60px 0 }
  .grid-2,.grid-3,.grid-4,.steps,.plans{ grid-template-columns:1fr }
  .form-row{ grid-template-columns:1fr }
  .cta-band{ padding:32px } .cta-band .cta-actions{ margin-left:0; width:100% }
  .tech-grid{ grid-template-columns:repeat(2,1fr) }
  .footer-grid{ grid-template-columns:1fr }
  .plan.featured{ transform:none }

  /* mobile: esconde o painel decorativo (texto + CTA primeiro) e mostra só 4 serviços */
  .hero-visual{ display:none }
  #servicos .grid-4>.card:nth-child(n+5){ display:none }

  /* painel do hero: permite quebrar/encolher (não estoura a coluna) */
  .panel{ max-width:100% }
  .panel-row{ flex-wrap:wrap; gap:6px 14px }
  .panel-row .meta{ margin-left:auto; min-width:0; text-align:right }

  /* navegação mobile off-canvas — fechado fica em right:-100% + hidden,
     então NUNCA estica o documento (causa-raiz do overflow) */
  .nav{ position:fixed; top:0; bottom:0; right:-100%; left:auto; width:78%; max-width:320px; background:var(--bg);
        border-left:1px solid var(--border); visibility:hidden; transition:right .3s, visibility .3s;
        padding:84px 28px; z-index:70; margin-left:0 }
  .nav.open{ right:0; visibility:visible; box-shadow:var(--shadow-lg) }
  .nav-list{ flex-direction:column; align-items:flex-start; gap:22px }
  .nav-toggle{ display:grid; place-items:center; order:3 }
  .header-actions{ margin-left:auto }
}
@media(max-width:420px){
  .tech-grid{ grid-template-columns:1fr 1fr }
  .footer-grid{ grid-template-columns:1fr }
  .stats{ grid-template-columns:1fr 1fr }
}

/* ==========================================================================
   Blog — índice (cards) + artigo (corpo de leitura). Usa os mesmos tokens,
   então o modo escuro sai de graça.
   ========================================================================== */

/* ---------- Índice ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px }
.blog-grid>*{ min-width:0 }
.post-card{ display:flex; flex-direction:column; padding:0; overflow:hidden; color:var(--text) }
.post-card:hover{ color:var(--text) }
.post-cover{ aspect-ratio:16/9; background:var(--surface-2); overflow:hidden; flex:0 0 auto }
.post-cover img{ width:100%; height:100%; object-fit:cover }
.post-body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1 }
.post-card.no-cover .post-body{ padding-top:26px }
.post-meta{ color:var(--muted); font-size:13.5px; margin-bottom:9px; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center }
.post-card h3{ font-size:19px; line-height:1.3; margin:0 0 9px; color:var(--heading) }
.post-card p{ color:var(--muted); font-size:15px; margin:0 0 16px; flex:1 }
.post-card .team-tags{ margin:0 0 14px }
.post-readmore{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14px; color:var(--accent); margin-top:auto }
.post-readmore i{ transition:transform .2s }
.post-card:hover .post-readmore i{ transform:translateX(3px) }
.blog-empty{ text-align:center; color:var(--muted); padding:40px 0 }

/* ---------- Artigo ---------- */
.article-head{ max-width:760px; margin:0 auto 30px }
.article-head .breadcrumb{ justify-content:flex-start; margin-bottom:18px; flex-wrap:wrap }
.article-head h1{ font-size:clamp(28px,4.4vw,42px); line-height:1.16; margin:0 0 14px; overflow-wrap:anywhere }
.article-meta{ color:var(--muted); font-size:14.5px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-bottom:24px }
.article-hero{ margin:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border) }
.article-hero img{ width:100%; height:auto }

.article{ max-width:760px; margin:0 auto; font-size:17px; line-height:1.78; color:var(--text); overflow-wrap:break-word }
.article>*{ min-width:0 }
.article>*:first-child{ margin-top:0 }
.article h2{ font-size:26px; margin:42px 0 14px; color:var(--heading) }
.article h3{ font-size:21px; margin:32px 0 10px; color:var(--heading) }
.article p{ margin:0 0 18px }
.article ul,.article ol{ padding-left:22px; margin:0 0 18px; display:flex; flex-direction:column; gap:9px; color:var(--text) }
.article li{ line-height:1.7 }
.article a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px }
.article a:hover{ color:var(--accent-strong) }
.article blockquote{ margin:24px 0; padding:14px 22px; border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--heading); font-style:italic }
.article blockquote p:last-child{ margin:0 }
.article figure{ margin:26px 0 }
.article img{ width:100%; border-radius:var(--radius); border:1px solid var(--border) }
.article figcaption{ color:var(--muted); font-size:14px; text-align:center; margin-top:9px }
.article code{ font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.92em; background:var(--surface-2); padding:2px 6px; border-radius:6px }
.article pre{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px; overflow:auto; margin:0 0 18px }
.article pre code{ background:none; padding:0 }
.article hr{ border:0; border-top:1px solid var(--border); margin:34px 0 }
.article-back{ max-width:760px; margin:34px auto 0 }
.article-back a{ display:inline-flex; align-items:center; gap:8px; font-weight:600 }

@media(max-width:980px){ .blog-grid{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:760px){
  .blog-grid{ grid-template-columns:1fr }
  .article{ font-size:16px }
  .article h2{ font-size:23px }
  .article h3{ font-size:19px }
}