/* =========================================================
   OLHA SÃO PAULO — Soluções Empresariais
   Tokens: azul #1D6FD1 · verde #2E9E4F · laranja #F0A23A
           grafite #16212B · dourado #C9871F · fundo #F6F8FA
   ========================================================= */

:root{
  --azul: #1D6FD1;
  --azul-escuro: #0E3F70;
  --verde: #2E9E4F;
  --verde-escuro: #1E6B37;
  --laranja: #F0A23A;
  --laranja-escuro: #C97A16;
  --dourado: #C9871F;
  --grafite: #16212B;
  --grafite-suave: #4B5B68;
  --fundo: #F6F8FA;
  --branco: #FFFFFF;
  --linha: #E3E8EC;

  --fonte-display: 'Sora', sans-serif;
  --fonte-corpo: 'Inter', sans-serif;
  --fonte-destaque: 'Fraunces', serif;

  --raio: 14px;
  --sombra: 0 12px 32px -12px rgba(14, 35, 66, 0.18);
  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--fonte-corpo);
  color: var(--grafite);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--fonte-display); margin:0; line-height:1.15; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--fonte-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background: currentColor;
  display:inline-block;
}

/* ===== Botões ===== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 15px;
  border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primario{
  background: var(--laranja);
  color: var(--grafite);
  box-shadow: 0 10px 24px -8px rgba(240,162,58,0.55);
}
.btn-primario:hover{ background: var(--laranja-escuro); color: var(--branco); }
.btn-fantasma{
  background: transparent;
  border-color: rgba(255,255,255,0.55);
  color: var(--branco);
}
.btn-fantasma:hover{ background: rgba(255,255,255,0.12); border-color: #fff; }
.btn-outline-escuro{
  background: transparent;
  border-color: var(--grafite);
  color: var(--grafite);
}
.btn-outline-escuro:hover{ background: var(--grafite); color: var(--branco); }
.btn-whats{
  background: #25D366;
  color: #06341C;
  box-shadow: 0 10px 24px -8px rgba(37,211,102,0.5);
}
.btn-whats:hover{ background:#1DAE54; color:#fff; }

/* ===== Topbar (discreta, acima do menu) ===== */
.topbar{
  background: var(--grafite);
  color: rgba(255,255,255,0.7);
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 26px;
  height: 36px;
}
.topbar a{
  display:inline-flex; align-items:center; gap:6px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
  transition: color .15s ease;
}
.topbar a:hover{ color:#fff; }
.topbar svg{ opacity:0.75; flex-shrink:0; }

/* ===== Header ===== */
.header{
  position: sticky;
  top:0;
  z-index: 200;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 78px;
  gap: 24px;
}
.marca{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.marca img{ height: 44px; width:auto; }
.nav{
  display:flex;
  align-items:center;
  gap: 28px;
}
.nav a{
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--grafite-suave);
  padding: 8px 2px;
  position:relative;
  transition: color .15s ease;
}
.nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:2px;
  background: var(--laranja);
  transition: width .2s ease;
}
.nav a:hover, .nav a.ativo{ color: var(--grafite); }
.nav a:hover::after, .nav a.ativo::after{ width:100%; }
.nav a.nav-ajuda{
  display:inline-flex; align-items:center; gap:6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--linha);
  color: var(--grafite-suave);
}
.nav a.nav-ajuda:hover{ border-color: var(--azul); color: var(--azul); }
.nav a.nav-ajuda::after{ display:none; }

.menu-toggle{
  display:none;
  background:none; border:none;
  width:32px; height:24px;
  position:relative;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:""; position:absolute; left:0;
  width:100%; height:2.5px; background: var(--grafite);
  border-radius: 2px; transition: all .2s ease;
}
.menu-toggle span{ top:11px; }
.menu-toggle span::before{ top:-9px; }
.menu-toggle span::after{ top:9px; }

/* ===== HERO / Carrossel rotativo ===== */
.hero{
  position:relative;
  height: 640px;
  overflow:hidden;
  background: var(--grafite);
}
.hero .container{ position:relative; width:100%; height:100%; }
.hero-slide{
  position:absolute; inset:0;
  display:flex; align-items:center;
  opacity:0; visibility:hidden;
  transform: translateX(24px);
  transition: opacity .7s ease, transform .8s ease, visibility 0s linear .7s;
}
.hero-slide.ativo{
  opacity:1; visibility:visible;
  transform: translateX(0);
  transition: opacity .7s ease, transform .8s ease;
}
.hero-slide::before{
  content:"";
  position:absolute; inset:0;
  background: var(--slide-cor, var(--azul-escuro));
  opacity: 0.94;
  z-index:0;
}
.hero-swoosh{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  opacity:0.35;
  pointer-events:none;
}
.hero-conteudo{
  position:relative; z-index:2;
  max-width: 640px;
}
.hero-slide-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items:center;
  width:100%;
  position:relative; z-index:2;
  padding: 0 0 44px;
}
.hero-slide-grid .hero-conteudo{ max-width:none; padding: 0; }
.hero-visual{
  position:relative;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  border-radius: 22px;
  padding: 34px 30px;
  animation: entrar-direita .8s ease .15s both;
}
.hero-visual-icone{
  width:72px; height:72px; border-radius:18px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  margin-bottom:22px;
}
.hero-visual-icone svg{ width:34px; height:34px; }
.hero-visual h3{ color:#fff; font-size:19px; margin-bottom:18px; font-family: var(--fonte-display); }
.hero-visual-lista{ display:flex; flex-direction:column; gap:13px; }
.hero-visual-item{ display:flex; align-items:center; gap:10px; font-size:14px; color:rgba(255,255,255,0.85); }
.hero-visual-item svg{ flex-shrink:0; color: var(--laranja); }
.hero-conteudo .eyebrow{ color: var(--laranja); margin-bottom:20px; }
.hero-conteudo h1{
  color:#fff;
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight:700;
  margin-bottom:18px;
  text-wrap: balance;
}
.hero-conteudo p{
  color: rgba(255,255,255,0.82);
  font-size: 17px;
  line-height:1.65;
  margin-bottom: 34px;
  max-width: 480px;
}
.hero-acoes{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-nav{
  position:absolute;
  left:0; right:0; bottom:34px;
  z-index:3;
  display:flex; justify-content:center; align-items:center;
  gap:22px;
}
.hero-dots{ display:flex; gap:10px; }
.hero-dot{
  width:32px; height:4px; border-radius:4px;
  background: rgba(255,255,255,0.3);
  border:none; padding:0; position:relative; overflow:hidden;
}
.hero-dot.ativo{ background: rgba(255,255,255,0.3); }
.hero-dot.ativo::after{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:100%;
  background: var(--laranja);
  animation: preencher 6s linear forwards;
}
@keyframes preencher{ from{ width:0; } to{ width:100%; } }
.hero-setas{ display:flex; gap:10px; }
.hero-seta{
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.4);
  background: transparent; color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, border-color .2s ease;
}
.hero-seta:hover{ background: rgba(255,255,255,0.15); border-color:#fff; }

/* ===== Seção genérica ===== */
.secao{ padding: 96px 0; }
.secao-cabecalho{ max-width: 620px; margin-bottom: 56px; }
.secao-cabecalho.centro{ margin-left:auto; margin-right:auto; text-align:center; }
.secao-cabecalho .eyebrow{ color: var(--azul); margin-bottom:16px; }
.secao-cabecalho h2{ font-size: clamp(26px, 3.2vw, 38px); margin-bottom:14px; }
.secao-cabecalho p{ color: var(--grafite-suave); font-size:16.5px; line-height:1.65; }

.secao-clara{ background: var(--branco); }
.secao-escura{ background: var(--grafite); color:#fff; }
.secao-escura .secao-cabecalho p{ color: rgba(255,255,255,0.72); }

/* ===== Trilha das soluções (elemento assinatura) ===== */
.trilha-wrap{ position:relative; padding-top: 20px; }
.trilha-svg{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }
.trilha-grade{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}
.parada{
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 30px 22px;
  display:flex; flex-direction:column; gap:14px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.parada:hover{ transform: translateY(-6px); box-shadow: var(--sombra); border-color: transparent; }
.parada-numero{
  font-family: var(--fonte-display);
  font-size: 12.5px; font-weight:700;
  color: var(--parada-cor, var(--azul));
  letter-spacing: 0.08em;
}
.parada-icone{
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--parada-cor, var(--azul)) 14%, white);
  color: var(--parada-cor, var(--azul));
}
.parada-icone svg{ width:24px; height:24px; }
.parada h3{ font-size:17px; }
.parada p{ font-size:14px; color: var(--grafite-suave); line-height:1.55; }
.parada-link{
  margin-top:auto;
  font-family: var(--fonte-display);
  font-weight:700; font-size:13.5px;
  color: var(--parada-cor, var(--azul));
  display:inline-flex; align-items:center; gap:6px;
}

/* ===== Faixa de tagline ===== */
.faixa-tagline{
  padding: 64px 0;
  text-align:center;
  background: linear-gradient(120deg, var(--azul-escuro), var(--verde-escuro));
  position:relative;
  overflow:hidden;
}
.faixa-tagline p{
  font-family: var(--fonte-destaque);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 38px);
  color:#fff;
  position:relative; z-index:1;
}

/* ===== Grade de vantagens ===== */
.vantagens{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.vantagem{ padding: 8px 4px; }
.vantagem-icone{
  width:44px; height:44px; border-radius:10px;
  background: rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; color: var(--laranja);
}
.vantagem h3{ color:#fff; font-size:17px; margin-bottom:8px; }
.vantagem p{ color: rgba(255,255,255,0.68); font-size:14.5px; line-height:1.6; }

/* ===== Página interna: hero de área ===== */
.hero-area{
  position:relative;
  padding: 78px 0 90px;
  background: var(--area-cor, var(--azul));
  overflow:hidden;
  color:#fff;
}
.hero-area .container{ position:relative; z-index:2; }
.hero-area-conteudo{ max-width: 600px; }
.hero-area .eyebrow{ color: rgba(255,255,255,0.85); margin-bottom:18px; }
.hero-area h1{ font-size: clamp(30px,4vw,44px); margin-bottom:16px; text-wrap: balance; }
.hero-area p.lead{ font-size:17px; line-height:1.65; color: rgba(255,255,255,0.86); max-width:520px; margin-bottom:30px; }
.hero-area-acoes{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-area-swoosh{ position:absolute; inset:0; opacity:0.22; z-index:1; }
.migalha{ font-size:13.5px; color: rgba(255,255,255,0.7); margin-bottom:22px; display:flex; gap:8px; align-items:center; }
.migalha a:hover{ color:#fff; }

/* ===== Grade de recursos ===== */
.recursos{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.recurso{
  background: var(--branco);
  border:1px solid var(--linha);
  border-radius: var(--raio);
  padding: 28px 24px;
}
.recurso-icone{
  width:46px; height:46px; border-radius:12px;
  background: color-mix(in srgb, var(--area-cor, var(--azul)) 12%, white);
  color: var(--area-cor, var(--azul));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.recurso h3{ font-size:16.5px; margin-bottom:8px; }
.recurso p{ font-size:14px; color: var(--grafite-suave); line-height:1.6; }

/* ===== Lista de benefícios com check ===== */
.beneficios-lista{ display:flex; flex-direction:column; gap:16px; }
.beneficio-item{ display:flex; gap:14px; align-items:flex-start; }
.beneficio-check{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background: color-mix(in srgb, var(--area-cor, var(--azul)) 16%, white);
  color: var(--area-cor, var(--azul));
  display:flex; align-items:center; justify-content:center;
  margin-top:2px;
}
.beneficio-item p{ font-size:15px; line-height:1.6; color: var(--grafite); }
.beneficio-item strong{ font-family: var(--fonte-display); }

.duas-colunas{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items:center;
}
.painel-lateral{
  background: var(--fundo);
  border-radius: var(--raio);
  padding: 36px;
  border: 1px solid var(--linha);
}
.painel-lateral h3{ font-size:15px; text-transform:uppercase; letter-spacing:0.06em; color: var(--grafite-suave); margin-bottom:20px; }
.painel-item{ display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--linha); font-size:14.5px; }
.painel-item:last-child{ border-bottom:none; }
.painel-item span:first-child{ color: var(--grafite-suave); }
.painel-item span:last-child{ font-family: var(--fonte-display); font-weight:700; }

/* ===== CTA final ===== */
.cta-final{
  background: var(--grafite);
  border-radius: 24px;
  padding: 56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 40px;
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
}
.cta-final h2{ color:#fff; font-size: clamp(22px,2.8vw,32px); max-width:520px; }
.cta-final p{ color: rgba(255,255,255,0.7); margin-top:10px; max-width:480px; font-size:15px; }
.cta-acoes{ display:flex; gap:14px; flex-wrap:wrap; }

/* ===== Footer ===== */
.rodape{ background: #0F1922; color: rgba(255,255,255,0.75); padding: 68px 0 28px; }
.rodape-grade{
  display:grid;
  grid-template-columns: 1.3fr 0.9fr 0.9fr 1.1fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.rodape-marca img{ height:40px; margin-bottom:16px; }
.rodape-marca p{ font-size:14px; line-height:1.6; max-width:280px; color: rgba(255,255,255,0.55); }
.rodape h4{ color:#fff; font-size:13.5px; text-transform:uppercase; letter-spacing:0.07em; margin-bottom:20px; }
.rodape ul{ display:flex; flex-direction:column; gap:12px; }
.rodape a{ font-size:14.5px; transition: color .15s ease; }
.rodape a:hover{ color:#fff; }
.rodape-contato li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; }
.rodape-contato svg{ flex-shrink:0; margin-top:2px; color: var(--laranja); }
.rodape-base{
  padding-top: 26px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color: rgba(255,255,255,0.45);
  flex-wrap:wrap; gap:12px;
}
.rodape-tagline{ font-family: var(--fonte-destaque); font-style:italic; color: rgba(255,255,255,0.6); }

/* ===== WhatsApp flutuante ===== */
.whats-flutuante{
  position: fixed; right:24px; bottom:24px; z-index:300;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px -6px rgba(37,211,102,0.6);
  transition: transform .2s ease;
}
.whats-flutuante:hover{ transform: scale(1.08); }

/* ===== Hero de área com mockup de monitor ===== */
.hero-area-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items:center;
}
.chips-recursos{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:22px;
}
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  font-family: var(--fonte-display);
  font-size: 12.5px;
  font-weight:600;
  color: #fff;
}
.chip svg{ flex-shrink:0; opacity:0.85; }

.foto-frame{
  position:relative;
  padding: 10px 6px 10px;
  animation: entrar-direita .8s ease .15s both;
}
.foto-frame-corpo{
  position:relative;
  z-index:1;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 40px 70px -28px rgba(0,0,0,0.55);
  animation: flutuar 5s ease-in-out infinite;
  transition: transform .35s ease, box-shadow .35s ease;
}
.foto-frame-corpo img{ width:100%; display:block; }
.foto-frame:hover .foto-frame-corpo{ transform: scale(1.015); box-shadow: 0 46px 80px -26px rgba(0,0,0,0.6); }
.balao-flutuante{
  position:absolute;
  z-index:5;
  background: rgba(10,14,20,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 16px 30px -12px rgba(0,0,0,0.5);
  max-width: 190px;
  opacity:0;
  animation: entrar-baixo .6s ease both;
}
.balao-flutuante strong{
  display:block;
  font-family: var(--fonte-display);
  font-size: 12.5px;
  color:#fff;
  margin-bottom:2px;
}
.balao-flutuante span{ font-size:11.5px; color:rgba(255,255,255,0.65); }
.balao-1{ top: 16px; left: 16px; animation-delay: .7s; }
.balao-2{ bottom: 22px; right: 16px; animation-delay: .95s; }

@keyframes entrar-direita{
  from{ opacity:0; transform: translateX(26px); }
  to{ opacity:1; transform: translateX(0); }
}
@keyframes entrar-baixo{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes flutuar{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@keyframes entrar-cima{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform: translateY(0); }
}
.anim-entrar{ opacity:0; animation: entrar-cima .7s ease both; }

@media (max-width: 1240px) and (min-width: 981px){
  .nav{ gap: 16px; }
  .nav a{ font-size: 13.3px; white-space: nowrap; }
}
@media (max-width: 980px){
  .hero-area-grid{ grid-template-columns: 1fr; }
  .foto-frame{ max-width:480px; margin: 8px auto 0; }
  .balao-1{ left:0; }
  .balao-2{ right:0; }
}
@media (max-width: 640px){
  .balao-flutuante{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .foto-frame, .balao-flutuante, .anim-entrar{ animation: none; opacity:1; }
  .foto-frame-corpo{ animation: none; }
}

/* ===== Painel administrativo (imagem + texto) ===== */
.painel-imagem{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--linha);
  box-shadow: var(--sombra);
}
.painel-imagem img{ width:100%; display:block; }
.badge-novo{
  display:inline-block;
  background: var(--laranja);
  color: var(--grafite);
  font-family: var(--fonte-display);
  font-weight:700;
  font-size: 10.5px;
  letter-spacing:0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left:8px;
  vertical-align:middle;
}

/* ===== Checklist de relatórios (2 colunas) ===== */
.checklist-grade{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
}
.checklist-item{
  display:flex; align-items:center; gap:12px;
  font-size:15px;
  padding: 6px 0;
}
.checklist-check{
  flex-shrink:0; width:24px; height:24px; border-radius:50%;
  background: color-mix(in srgb, var(--area-cor, var(--azul)) 14%, white);
  color: var(--area-cor, var(--azul));
  display:flex; align-items:center; justify-content:center;
}

/* ===== Cards de integração (com foto) ===== */
.integra-grade{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.integra-card{
  background: var(--branco);
  border:1px solid var(--linha);
  border-radius: var(--raio);
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.integra-card:hover{ transform: translateY(-5px); box-shadow: var(--sombra); }
.integra-foto{
  height: 110px;
  display:flex; align-items:center; justify-content:center;
  background: var(--fundo);
  padding: 10px;
}
.integra-foto img{ max-height:100%; max-width:100%; object-fit:contain; }
.integra-card-texto{ padding: 18px 20px 22px; }
.integra-card h3{ font-size:15px; margin-bottom:6px; }
.integra-card p{ font-size:13.5px; color: var(--grafite-suave); line-height:1.55; }

@media (max-width: 980px){
  .integra-grade{ grid-template-columns: 1fr 1fr; }
  .checklist-grade{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .integra-grade{ grid-template-columns: 1fr; }
}

/* ===== Hero premium (Criação de Sites / Publicidade) ===== */
:root{
  --dourado-claro: #E4BB6B;
  --escuro-1: #0A0D12;
  --escuro-2: #171B22;
}
.hero-premium{
  position:relative;
  padding: 84px 0 70px;
  background: radial-gradient(120% 140% at 15% 0%, #1B2230 0%, var(--escuro-1) 55%), var(--escuro-1);
  color:#fff;
  overflow:hidden;
}
.hero-premium::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(1px 1px at 20% 30%, rgba(228,187,107,0.35) 1px, transparent 1px),
                     radial-gradient(1px 1px at 70% 60%, rgba(228,187,107,0.25) 1px, transparent 1px),
                     radial-gradient(1px 1px at 40% 80%, rgba(228,187,107,0.2) 1px, transparent 1px);
  background-size: 260px 260px;
  opacity:0.6;
}
.hero-premium .container{ position:relative; z-index:2; }
.parceria-lockup{
  display:flex; align-items:center; gap:16px;
  margin-bottom:34px;
}
.parceria-lockup img{ height:34px; }
.parceria-x{ color:rgba(255,255,255,0.35); font-family: var(--fonte-display); font-weight:700; }
.parceria-nexa{ font-family: var(--fonte-display); font-weight:700; font-size:19px; letter-spacing:0.03em; color:#fff; }
.hero-premium .eyebrow{ color: var(--dourado-claro); margin-bottom:18px; }
.hero-premium h1{ font-size: clamp(32px,4.4vw,52px); margin-bottom:18px; }
.hero-premium h1 em{ font-style:normal; color: var(--dourado-claro); }
.hero-premium p.lead{ color: rgba(255,255,255,0.72); font-size:17px; line-height:1.65; max-width:560px; margin-bottom:30px; }
.btn-dourado{
  background: linear-gradient(120deg, #E4BB6B, #C9942F);
  color: #1A1204;
  box-shadow: 0 10px 26px -8px rgba(228,187,107,0.45);
}
.btn-dourado:hover{ background: linear-gradient(120deg, #F0CC85, #D6A53C); }

/* ===== Marquee de serviços ===== */
.marquee-faixa{
  background: var(--escuro-2);
  border-top: 1px solid rgba(228,187,107,0.18);
  border-bottom: 1px solid rgba(228,187,107,0.18);
  overflow:hidden;
  padding: 18px 0;
}
.marquee-trilho{
  display:flex;
  width: max-content;
  animation: marquee-rolar 28s linear infinite;
}
.marquee-trilho span{
  display:inline-flex; align-items:center; gap:14px;
  font-family: var(--fonte-display);
  font-weight:600;
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  padding: 0 28px;
  white-space:nowrap;
}
.marquee-trilho span::after{
  content:"✦";
  color: var(--dourado-claro);
  font-size:11px;
  margin-left:28px;
}
@keyframes marquee-rolar{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ===== Cards de preço ===== */
.precos-grade{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.preco-card{
  background: var(--escuro-2);
  border: 1px solid rgba(228,187,107,0.22);
  border-radius: 18px;
  padding: 32px 28px;
  display:flex; flex-direction:column; gap:16px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.preco-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 50px -20px rgba(228,187,107,0.25); border-color: rgba(228,187,107,0.5); }
.preco-card.destaque{ border-color: var(--dourado-claro); position:relative; }
.preco-selo{
  position:absolute; top:-13px; left:28px;
  background: var(--dourado-claro);
  color:#1A1204;
  font-family: var(--fonte-display);
  font-weight:700; font-size:11px;
  letter-spacing:0.05em;
  padding: 4px 12px;
  border-radius: 999px;
}
.preco-icone{
  width:46px; height:46px; border-radius:12px;
  background: rgba(228,187,107,0.12);
  border: 1px solid rgba(228,187,107,0.3);
  color: var(--dourado-claro);
  display:flex; align-items:center; justify-content:center;
}
.preco-card h3{ color:#fff; font-size:17px; }
.preco-card p.preco-desc{ color: rgba(255,255,255,0.6); font-size:14px; line-height:1.55; }
.preco-valor{ margin-top:auto; padding-top:10px; border-top:1px solid rgba(255,255,255,0.1); }
.preco-valor .rotulo{ display:block; font-size:12px; color: rgba(255,255,255,0.5); margin-bottom:4px; }
.preco-valor .numero{ font-family: var(--fonte-display); font-weight:800; font-size:30px; color:#fff; }
.preco-valor .numero small{ font-size:15px; font-weight:600; color: rgba(255,255,255,0.6); }
.preco-card .btn{ margin-top:14px; justify-content:center; }

/* ===== Galeria de portfólio ===== */
.portfolio-grade{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.portfolio-card{
  display:block;
  background: var(--escuro-2);
  border: 1px solid rgba(228,187,107,0.18);
  border-radius: 16px;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.portfolio-card:hover{ transform: translateY(-6px); box-shadow: 0 22px 46px -20px rgba(228,187,107,0.3); border-color: rgba(228,187,107,0.5); }
.portfolio-capa{
  height: 160px;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.portfolio-capa::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,0.16), transparent 60%);
}
.portfolio-capa span{
  font-family: var(--fonte-display);
  font-weight:800;
  font-size: 26px;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.02em;
  position:relative; z-index:1;
  text-align:center;
  padding: 0 18px;
}
.portfolio-info{ padding: 18px 20px 22px; }
.portfolio-info h3{ color:#fff; font-size:15.5px; margin-bottom:6px; }
.portfolio-info p{ font-size:13px; color: rgba(255,255,255,0.55); }
.portfolio-info .portfolio-link{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:12px;
  font-family: var(--fonte-display);
  font-weight:700; font-size:12.5px;
  color: var(--dourado-claro);
}
@media (max-width: 980px){
  .portfolio-grade{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .portfolio-grade{ grid-template-columns: 1fr; }
}

/* ===== Cards de plano (fundo claro) ===== */
.planos-grade{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}
.plano-card{
  position:relative;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 16px;
  padding: 28px 22px 24px;
  display:flex; flex-direction:column; gap:14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.plano-card:hover{ transform: translateY(-5px); box-shadow: var(--sombra); border-color: transparent; }
.plano-card.destaque{ border-color: var(--area-cor); }
.plano-selo{
  position:absolute; top:-12px; left:22px;
  background: var(--area-cor);
  color:#fff;
  font-family: var(--fonte-display);
  font-weight:700; font-size:10.5px;
  letter-spacing:0.04em;
  padding: 4px 12px;
  border-radius: 999px;
}
.plano-icone{
  width:42px; height:42px; border-radius:11px;
  background: color-mix(in srgb, var(--area-cor) 14%, white);
  color: var(--area-cor);
  display:flex; align-items:center; justify-content:center;
}
.plano-card h3{ font-size:16px; }
.plano-sub{ font-size:12.5px; color: var(--grafite-suave); margin-top:-10px; }
.plano-lista{ display:flex; flex-direction:column; gap:7px; }
.plano-lista li{ display:flex; gap:7px; align-items:flex-start; font-size:13px; color: var(--grafite-suave); line-height:1.4; }
.plano-lista svg{ flex-shrink:0; color: var(--area-cor); margin-top:2px; }
.plano-preco{ margin-top:auto; padding-top:12px; border-top:1px solid var(--linha); }
.plano-preco .valor{ font-family: var(--fonte-display); font-weight:800; font-size:23px; color: var(--grafite); }
.plano-preco .nota{ display:block; font-size:11.5px; color: var(--grafite-suave); }
.plano-card .btn{ margin-top:4px; justify-content:center; font-size:13px; padding:10px 16px; }

/* ===== Assistente de Ajuda (chat) ===== */
.chat-widget{
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 20px;
  box-shadow: var(--sombra);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height: 560px;
}
.chat-cabecalho{
  background: linear-gradient(120deg, var(--azul), var(--azul-escuro));
  padding: 18px 22px;
  display:flex; align-items:center; gap:14px;
  flex-shrink:0;
}
.chat-avatar{
  width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center;
  color:#fff; flex-shrink:0;
}
.chat-cabecalho-info{ color:#fff; }
.chat-cabecalho-info strong{ display:block; font-family: var(--fonte-display); font-size:16px; }
.chat-cabecalho-status{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:rgba(255,255,255,0.8); }
.chat-cabecalho-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:#3FE07A; display:inline-block; }
.chat-corpo{
  flex:1;
  overflow-y:auto;
  padding: 20px;
  display:flex; flex-direction:column; gap:14px;
  background: var(--fundo);
}
.chat-msg{ display:flex; gap:10px; max-width:88%; }
.chat-msg-bot{ align-self:flex-start; }
.chat-msg-usuario{ align-self:flex-end; flex-direction:row-reverse; }
.chat-bolha{
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 14px;
  line-height:1.55;
}
.chat-msg-bot .chat-bolha{
  background: var(--branco);
  border: 1px solid var(--linha);
  color: var(--grafite);
  border-bottom-left-radius:4px;
}
.chat-msg-usuario .chat-bolha{
  background: var(--azul);
  color:#fff;
  border-bottom-right-radius:4px;
}
.chat-bolha a{ color: var(--laranja-escuro); font-weight:700; text-decoration:underline; }
.chat-msg-usuario .chat-bolha a{ color:#fff; }
.chat-sugestoes{
  display:flex; flex-wrap:wrap; gap:8px;
  padding: 0 20px 16px;
  background: var(--fundo);
  flex-shrink:0;
}
.chat-sugestao{
  background: var(--branco);
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  padding: 8px 15px;
  font-family: var(--fonte-display);
  font-size: 13px;
  font-weight:600;
  color: var(--azul);
  display:inline-flex; align-items:center; gap:6px;
  transition: border-color .15s ease, background .15s ease;
}
.chat-sugestao:hover{ border-color: var(--azul); background: rgba(29,111,209,0.06); }
.chat-rodape{
  display:flex; gap:10px;
  padding: 14px;
  border-top: 1px solid var(--linha);
  background: var(--branco);
  flex-shrink:0;
}
.chat-input{
  flex:1;
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  padding: 11px 18px;
  font-family: var(--fonte-corpo);
  font-size: 14px;
  color: var(--grafite);
  outline:none;
  transition: border-color .15s ease;
}
.chat-input:focus{ border-color: var(--azul); }
.chat-enviar{
  width:44px; height:44px; border-radius:50%;
  background: var(--azul);
  color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition: background .15s ease, transform .15s ease;
}
.chat-enviar:hover{ background: var(--azul-escuro); transform: scale(1.05); }
.chat-digitando{ display:flex; gap:4px; padding: 4px 2px; }
.chat-digitando span{
  width:6px; height:6px; border-radius:50%;
  background: var(--grafite-suave);
  opacity:0.4;
  animation: digitando 1.2s infinite ease-in-out;
}
.chat-digitando span:nth-child(2){ animation-delay:.2s; }
.chat-digitando span:nth-child(3){ animation-delay:.4s; }
@keyframes digitando{ 0%,60%,100%{ opacity:0.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

.faq-lista{ display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 14px;
  overflow:hidden;
}
.faq-pergunta{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px;
  padding: 17px 20px;
  background:none; border:none; text-align:left;
  font-family: var(--fonte-display);
  font-weight:600; font-size:15px;
  color: var(--grafite);
  cursor:pointer;
}
.faq-pergunta svg{ flex-shrink:0; color: var(--grafite-suave); transition: transform .2s ease; }
.faq-item.aberto .faq-pergunta svg{ transform: rotate(180deg); }
.faq-resposta{
  max-height:0;
  overflow:hidden;
  transition: max-height .3s ease;
}
.faq-item.aberto .faq-resposta{ max-height:200px; }
.faq-resposta p{ padding: 0 20px 18px; font-size:14px; color: var(--grafite-suave); line-height:1.6; }
.faq-resposta a{ color: var(--azul); font-weight:600; }

@media (max-width: 980px){
  .chat-widget{ height: 500px; }
}

/* ===== Scroll reveal ===== */
.revelar{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.revelar.em-vista{ opacity:1; transform: translateY(0); }

@media (max-width: 980px){
  .precos-grade{ grid-template-columns: 1fr; }
}

/* ===== Grade de módulos (ERP) ===== */
.modulos-grade{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.modulo-card{
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 26px 22px;
  display:flex; flex-direction:column; gap:12px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.modulo-card:hover{ transform: translateY(-5px); box-shadow: var(--sombra); border-color: transparent; }
.modulo-icone{
  width:42px; height:42px; border-radius:10px;
  background: color-mix(in srgb, var(--area-cor, var(--azul)) 14%, white);
  color: var(--area-cor, var(--azul));
  display:flex; align-items:center; justify-content:center;
}
.modulo-icone svg{ width:22px; height:22px; }
.modulo-card h3{ font-size:15.5px; }
.modulo-card p{ font-size:13.5px; color: var(--grafite-suave); line-height:1.55; }

@media (max-width: 980px){
  .modulos-grade{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .modulos-grade{ grid-template-columns: 1fr; }
}
@media (max-width: 980px){
  .nav{ display:none; }
  .topbar{ display:none; }
  .menu-toggle{ display:block; }
  .hero{ height: 820px; }
  .hero-slide-grid{ grid-template-columns: 1fr; gap:32px; padding: 28px 0 96px; }
  .hero-visual{ max-width:420px; }
  .trilha-grade{ grid-template-columns: 1fr 1fr; }
  .trilha-svg{ display:none; }
  .vantagens{ grid-template-columns: 1fr; gap:36px; }
  .recursos{ grid-template-columns: 1fr 1fr; }
  .duas-colunas{ grid-template-columns: 1fr; }
  .rodape-grade{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .header .container{ height:72px; }
  .marca img{ height:36px; }
  .hero{ height: 760px; }
  .hero-visual{ padding: 26px 22px; }
  .secao{ padding: 64px 0; }
  .trilha-grade{ grid-template-columns: 1fr; }
  .recursos{ grid-template-columns: 1fr; }
  .cta-final{ padding: 36px 24px; }
  .rodape-grade{ grid-template-columns: 1fr; gap:32px; }
  .rodape-base{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 420px){
  .hero{ height: 920px; }
}

/* Menu mobile */
.nav-mobile{
  display:none;
  position:fixed; inset: 84px 0 0 0;
  background: var(--branco);
  z-index:190;
  padding: 20px 24px 40px;
  overflow-y:auto;
}
.nav-mobile.aberto{ display:block; }
.nav-mobile a{
  display:block;
  padding: 16px 0;
  border-bottom: 1px solid var(--linha);
  font-family: var(--fonte-display);
  font-weight:600; font-size:17px;
}
.nav-mobile .btn{ margin-top:24px; width:100%; justify-content:center; }

/* ===== Popup flutuante do assistente Sofia ===== */
.chat-lancador{
  position: fixed;
  right: 24px;
  bottom: 94px;
  z-index: 300;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--azul), var(--azul-escuro));
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px -6px rgba(29,111,209,0.55);
  transition: transform .2s ease;
  border: none;
}
.chat-lancador:hover{ transform: scale(1.08); }
.chat-lancador .ponto-notificacao{
  position:absolute; top:2px; right:2px;
  width:12px; height:12px; border-radius:50%;
  background: var(--laranja);
  border: 2px solid #fff;
}

.chat-popup{
  position: fixed;
  right: 24px;
  bottom: 164px;
  z-index: 300;
  width: 350px;
  max-width: calc(100vw - 32px);
  height: 500px;
  max-height: calc(100vh - 200px);
  background: var(--branco);
  border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.35);
  border: 1px solid var(--linha);
  display: none;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .25s ease, transform .25s ease;
}
.chat-popup.aberto{ display:flex; opacity:1; transform: translateY(0); }
.chat-popup .chat-cabecalho{ position:relative; flex-shrink:0; }
.chat-popup-fechar{
  position:absolute; top:14px; right:14px;
  width:28px; height:28px; border-radius:50%;
  background: rgba(255,255,255,0.18);
  border:none; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1;
}
.chat-popup-fechar:hover{ background: rgba(255,255,255,0.3); }
.chat-popup .chat-widget{ height:100%; border:none; border-radius:0; box-shadow:none; }

@media (max-width: 640px){
  .chat-lancador{ right:16px; bottom:88px; width:52px; height:52px; }
  .chat-popup{ right:16px; left:16px; width:auto; bottom:150px; }
}