/* ============================================================
   ATAWEB Soluções Digitais — estilo base
   Tokens extraídos da identidade do painel (painel.ataweb.com.br)
   ============================================================ */

:root{
  /* Marca */
  --azul:#014070;          /* cor do logo — âncora da marca */
  --azul-fundo:#012B4C;    /* profundidade, faixas escuras */
  --azul-claro:#8FB4CE;    /* traços, apoios */
  --azul-borda:#a9c6dc;
  --azul-nevoa:#EDF3F8;    /* fundo de seção */
  --azul-papel:#F2F6FA;
  --quase-branco:#fafcfe;

  /* Acento quente — único ponto de calor da página */
  --ambar:#A85312;
  --ambar-claro:#FEF1E6;

  /* Estados (mesmo uso do painel) */
  --verde:#17703C;
  --verde-claro:#E3F5E9;
  --vermelho:#A32020;

  /* Texto */
  --tinta:#0E1C28;
  --tinta-media:#41576B;
  --tinta-fraca:#6E8598;

  --branco:#ffffff;
  --raio:10px;
  --sombra:0 1px 2px rgba(1,64,112,.05), 0 14px 34px -22px rgba(1,64,112,.35);
  --largura:1100px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}

body{
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16.5px;
  line-height:1.6;
  color:var(--tinta);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Bricolage Grotesque','Archivo',system-ui,sans-serif;
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.12;
  color:var(--azul);
}

a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--ambar);
  outline-offset:3px;
  border-radius:4px;
}
img{max-width:100%;height:auto;display:block}

.container{max-width:var(--largura);margin:0 auto;padding:0 24px}
.secao{padding:76px 0}
.secao--nevoa{background:var(--azul-nevoa)}
.secao--papel{background:var(--azul-papel)}

/* ---------- Rótulo de seção ---------- */
.rotulo{
  font-size:12px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ambar);
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.rotulo::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--azul-borda);
}
.titulo-secao{font-size:clamp(26px,3.4vw,36px);margin-bottom:12px}
.chamada{
  font-size:17.5px;
  color:var(--tinta-media);
  max-width:720px;
  margin-bottom:34px;
}

/* ---------- Cabeçalho ---------- */
.cabecalho{
  border-bottom:1px solid var(--azul-borda);
  background:var(--branco);
  position:sticky;
  top:0;
  z-index:50;
}
.cabecalho .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:14px;
  padding-bottom:14px;
}
.marca img{height:40px;width:auto}
.menu{display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:500}
.menu a{color:var(--tinta-media)}
.menu a:hover{color:var(--azul);text-decoration:none}
.menu a.ativo{color:var(--azul);font-weight:700}

/* ---------- Botões ---------- */
.botao{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-weight:600;
  font-size:15px;
  padding:12px 22px;
  border-radius:var(--raio);
  border:1.5px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  cursor:pointer;
}
.botao:hover{text-decoration:none}
.botao--azul{background:var(--azul);color:var(--branco)}
.botao--azul:hover{background:var(--azul-fundo)}
.botao--ambar{background:var(--ambar);color:var(--branco)}
.botao--ambar:hover{background:#8d4310}
.botao--linha{border-color:var(--azul-borda);color:var(--azul);background:transparent}
.botao--linha:hover{border-color:var(--azul);background:var(--azul-papel)}
.botao--claro{background:var(--branco);color:var(--azul)}
.botao--claro:hover{background:var(--azul-papel)}

/* ---------- Topo (hero) ---------- */
.topo{
  background:linear-gradient(165deg,var(--azul) 0%,var(--azul-fundo) 100%);
  color:var(--quase-branco);
  padding:76px 0 68px;
  position:relative;
  overflow:hidden;
}
.topo h1{
  color:var(--branco);
  font-size:clamp(33px,5vw,52px);
  max-width:15ch;
}
.topo h1 span{color:var(--azul-claro)}
.topo .subtitulo{
  font-size:18.5px;
  color:rgba(250,252,254,.82);
  max-width:56ch;
  margin-top:20px;
}
.selo-topo{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  border:1px solid rgba(143,180,206,.45);
  border-radius:999px;
  padding:7px 15px;
  margin-bottom:26px;
  color:var(--azul-claro);
}
.selo-topo i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--ambar);
  display:inline-block;
}

/* ---------- Portas (elemento de assinatura) ---------- */
/* Duas entradas de igual peso: o site tem dois públicos que não se misturam */
.portas{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:44px;
}
.porta{
  background:rgba(250,252,254,.025);
  border:1px solid rgba(143,180,206,.35);
  border-radius:var(--raio);
  padding:24px 26px;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.porta:hover{
  background:rgba(250,252,254,.13);
  border-color:var(--azul-claro);
  transform:translateY(-2px);
  text-decoration:none;
}
.porta .p-quem{
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--azul-claro);
}
.porta h2{
  font-size:22px;
  color:var(--branco);
  margin:6px 0 8px;
}
.porta p{font-size:14.5px;color:rgba(250,252,254,.78)}
.porta .p-seta{
  display:inline-block;
  margin-top:14px;
  font-size:14px;
  font-weight:600;
  color:var(--ambar);
}

/* ---------- Cartões ---------- */
.grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grade-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cartao{
  background:var(--branco);
  border:1px solid var(--azul-borda);
  border-radius:var(--raio);
  padding:26px;
  box-shadow:var(--sombra);
}
.cartao h3{font-size:20px;margin-bottom:8px}
.cartao p{font-size:15px;color:var(--tinta-media)}
.cartao .etiqueta{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:var(--azul-papel);
  color:var(--azul);
  border-radius:999px;
  padding:4px 11px;
  margin-bottom:13px;
}
.cartao .etiqueta--ambar{background:var(--ambar-claro);color:var(--ambar)}

/* ---------- Faixa escura ---------- */
.faixa-azul{
  background:var(--azul);
  color:var(--quase-branco);
  border-radius:var(--raio);
  padding:34px;
}
.faixa-azul h2{color:var(--branco)}
.faixa-azul p{color:rgba(250,252,254,.85);max-width:64ch}

/* ---------- Rodapé ---------- */
.rodape{
  background:var(--azul-fundo);
  color:rgba(250,252,254,.72);
  padding:48px 0 30px;
  font-size:14.5px;
  margin-top:0;
}
.rodape a{color:var(--azul-claro)}
.rodape .colunas{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:34px;
  margin-bottom:32px;
}
.rodape h4{
  font-size:12px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--branco);
  margin-bottom:12px;
}
.rodape ul{list-style:none}
.rodape li{margin-bottom:7px}
.rodape img{height:26px;filter:brightness(0) invert(1);opacity:.92;margin-bottom:14px}
.rodape .legal{
  border-top:1px solid rgba(143,180,206,.22);
  padding-top:18px;
  font-size:13px;
  color:rgba(250,252,254,.5);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

/* ---------- Formulário ---------- */
.campo{margin-bottom:16px}
.campo label{
  display:block;
  font-size:13.5px;
  font-weight:600;
  color:var(--tinta-media);
  margin-bottom:6px;
}
.campo input,.campo select,.campo textarea{
  width:100%;
  font-family:inherit;
  font-size:15.5px;
  color:var(--tinta);
  background:var(--branco);
  border:1.5px solid var(--azul-borda);
  border-radius:var(--raio);
  padding:11px 14px;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;
  border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(1,64,112,.12);
}
.campo textarea{min-height:130px;resize:vertical}
.consentimento{
  display:flex;
  gap:11px;
  align-items:flex-start;
  font-size:13.5px;
  color:var(--tinta-media);
  background:var(--azul-papel);
  border:1px solid var(--azul-borda);
  border-radius:var(--raio);
  padding:14px 16px;
  margin-bottom:18px;
}
.consentimento input{margin-top:3px;flex-shrink:0;width:auto}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .grade-3{grid-template-columns:1fr 1fr}
  .rodape .colunas{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .secao{padding:54px 0}
  .topo{padding:56px 0 50px}
  .portas,.grade-3,.grade-2,.rodape .colunas{grid-template-columns:1fr}
  .menu{gap:16px;font-size:13.5px;flex-wrap:wrap;justify-content:flex-end}
  .cabecalho{position:static}
}

/* ============================================================
   Blocos da home reestruturada
   ============================================================ */

/* ---------- Faixa de clientes (wordmark) ---------- */
.clientes{border-top:1px solid var(--azul-borda);border-bottom:1px solid var(--azul-borda);background:var(--quase-branco);padding:26px 0}
.clientes .titulo-faixa{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-fraca);text-align:center;margin-bottom:16px}
.clientes .marcas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 34px}
.clientes .marcas span{font-family:'Bricolage Grotesque','Archivo',sans-serif;font-weight:600;font-size:17px;letter-spacing:-.015em;color:var(--azul);opacity:.62}

/* ---------- Três frentes ---------- */
.frente{background:var(--branco);border:1px solid var(--azul-borda);border-radius:var(--raio);padding:28px;box-shadow:var(--sombra);display:flex;flex-direction:column}
.frente .f-num{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ambar);margin-bottom:10px}
.frente h3{font-size:23px;margin-bottom:8px}
.frente > p{font-size:15px;color:var(--tinta-media);margin-bottom:16px}
.frente ul{list-style:none;margin-top:auto}
.frente li{font-size:14.5px;color:var(--tinta-media);padding:7px 0 7px 22px;position:relative;border-top:1px solid var(--azul-nevoa)}
.frente li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;border-radius:2px;background:var(--azul-claro)}

/* ---------- Destaque de produto (Comércio Local) ---------- */
.destaque{background:linear-gradient(160deg,var(--azul) 0%,var(--azul-fundo) 100%);color:var(--quase-branco);border-radius:var(--raio);padding:38px;position:relative;overflow:hidden}
.destaque::before{content:"";position:absolute;right:-90px;bottom:-110px;width:340px;height:340px;border-radius:50%;border:1.5px solid rgba(143,180,206,.2);pointer-events:none}
.destaque .d-topo{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.destaque .d-selo{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;background:var(--ambar);color:#fff;border-radius:999px;padding:5px 13px}
.destaque .d-local{font-size:13px;color:var(--azul-claro);font-weight:600;letter-spacing:.04em}
.destaque h2{color:#fff;font-size:clamp(26px,3.4vw,36px);max-width:20ch}
.destaque > p{color:rgba(250,252,254,.85);max-width:62ch;margin-top:14px;font-size:16.5px}
.destaque .d-itens{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(143,180,206,.3);border:1px solid rgba(143,180,206,.3);border-radius:var(--raio);overflow:hidden;margin:28px 0 26px}
.destaque .d-item{background:rgba(1,43,76,.55);padding:16px 18px}
.destaque .d-item strong{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;color:#fff;margin-bottom:2px}
.destaque .d-item span{font-size:13px;color:rgba(250,252,254,.7);line-height:1.45}

/* ---------- Produtos ---------- */
.produto{background:var(--branco);border:1px solid var(--azul-borda);border-radius:var(--raio);padding:24px;box-shadow:var(--sombra)}
.produto .p-nome{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.produto h3{font-size:19.5px}
.produto .p-tipo{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-fraca)}
.produto p{font-size:14.5px;color:var(--tinta-media)}

/* ---------- Mentoria ---------- */
.mentoria{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--azul-borda);border-radius:var(--raio);overflow:hidden;background:var(--branco);box-shadow:var(--sombra)}
.mentoria .m-texto{padding:34px}
.mentoria .m-lista{background:var(--azul-papel);padding:34px;border-left:1px solid var(--azul-borda)}
.mentoria h2{font-size:clamp(24px,3vw,31px);margin-bottom:12px}
.mentoria .m-texto p{font-size:16px;color:var(--tinta-media);margin-bottom:12px}
.mentoria h4{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ambar);margin-bottom:14px}
.mentoria ul{list-style:none}
.mentoria li{font-size:14.5px;color:var(--tinta-media);padding:9px 0 9px 24px;position:relative;border-bottom:1px dashed var(--azul-borda)}
.mentoria li:last-child{border-bottom:none}
.mentoria li::before{content:"→";position:absolute;left:0;color:var(--ambar);font-weight:700}

/* ---------- Fecho ---------- */
.fecho{text-align:center;padding:16px 0}
.fecho h2{font-size:clamp(28px,4vw,42px);max-width:22ch;margin:0 auto 16px}
.fecho p{font-size:18px;color:var(--tinta-media);max-width:60ch;margin:0 auto 26px}

@media (max-width:900px){
  .destaque .d-itens{grid-template-columns:1fr 1fr}
  .mentoria{grid-template-columns:1fr}
  .mentoria .m-lista{border-left:none;border-top:1px solid var(--azul-borda)}
}
@media (max-width:680px){
  .destaque{padding:26px}
  .destaque .d-itens{grid-template-columns:1fr}
  .mentoria .m-texto,.mentoria .m-lista{padding:24px}
  .clientes .marcas{gap:12px 22px}
  .clientes .marcas span{font-size:15px}
}

/* ---------- Laços de infinito no topo ---------- */
.infinito{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.infinito path{
  fill:none;
  stroke:var(--azul-claro);
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:0;
  animation:tracar var(--dur,18s) linear var(--atraso,0s) infinite;
}
.topo .container{position:relative;z-index:1}
@keyframes tracar{
  0%   {stroke-dashoffset:1; opacity:0}
  12%  {opacity:.15}
  58%  {stroke-dashoffset:0; opacity:.15}
  84%  {stroke-dashoffset:0; opacity:0}
  100% {stroke-dashoffset:0; opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .infinito path{opacity:.13;stroke-dashoffset:0}
}

/* ---------- Palavra no centro do infinito ---------- */
.inf-palavra{
  font-family:'Bricolage Grotesque','Archivo',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  fill:var(--azul-claro);
  opacity:.55;
}
@media (max-width:900px){ .inf-palavra{display:none} }

/* ---------- Topo centralizado, orbe e vidro ---------- */
.topo{display:flex;align-items:center;min-height:76vh;padding:72px 0}
.topo h1{max-width:none;font-size:clamp(30px,4.1vw,46px);white-space:nowrap}
.topo .subtitulo{max-width:60ch;margin-left:auto;margin-right:auto}
.topo .selo-topo{margin-bottom:22px}

.orbe{
  position:absolute;top:50%;left:50%;
  width:min(1200px,125%);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,
    rgba(143,180,206,.42),
    rgba(1,64,112,.04),
    rgba(168,83,18,.26),
    rgba(88,150,190,.32),
    rgba(143,180,206,.42));
  filter:blur(110px);opacity:.38;
  pointer-events:none;z-index:0;
  animation:orbitar 30s linear infinite;
}
@keyframes orbitar{
  0%{transform:translate(-50%,-50%) rotate(0deg) scale(1)}
  50%{transform:translate(-50%,-50%) rotate(180deg) scale(1.18)}
  100%{transform:translate(-50%,-50%) rotate(360deg) scale(1)}
}

.vidro{
  position:relative;z-index:2;
  max-width:860px;margin:0 auto;text-align:center;
  padding:36px 46px 34px;border-radius:18px;
  background:rgba(250,252,254,.025);
  backdrop-filter:blur(7px) saturate(112%);
  -webkit-backdrop-filter:blur(7px) saturate(112%);
  border:1px solid rgba(143,180,206,.12);
  box-shadow:0 30px 80px -50px rgba(0,0,0,.5);
}
.vidro::before{content:"";position:absolute;top:-1px;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(250,252,254,.5),transparent)}
.vidro::after{content:"";position:absolute;bottom:-1px;left:22%;right:22%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(250,252,254,.25),transparent)}

@media (prefers-reduced-motion:reduce){.orbe{animation:none}}
@media (max-width:680px){
  .topo{min-height:auto;padding:48px 0}
  .vidro{padding:30px 22px;border-radius:16px}
}

@media (max-width:820px){ .topo h1{white-space:normal} }

/* ---------- Faixa de clientes: logos ---------- */
.clientes{padding:34px 0}
.clientes .marcas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:26px 46px}
.clientes .marcas img{height:44px;width:auto;opacity:.62;transition:opacity .2s ease}
.clientes .marcas img:hover{opacity:1}
@media (max-width:680px){
  .clientes .marcas{gap:22px 30px}
  .clientes .marcas img{height:34px}
}

/* ---------- Faixa de clientes: desfile ---------- */
.marcas-viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marcas-trilha{display:flex;align-items:center;width:max-content;animation:desfilar 52s linear infinite}
.marcas-viewport:hover .marcas-trilha{animation-play-state:paused}
.marcas-trilha img{height:42px;width:auto;margin-right:58px;opacity:.6;flex-shrink:0}
@keyframes desfilar{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marcas-trilha{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .marcas-trilha img:nth-child(n+9){display:none}
}
@media (max-width:680px){ .marcas-trilha img{height:32px;margin-right:38px} }
.rotulo::after{background:rgba(168,83,18,.32)}

/* ============================================================
   PALCOS — as três frentes com interface simulada
   ============================================================ */
.palco{padding:52px 0}
.palco--claro{background:var(--azul-nevoa)}
.palco-grade{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.palco-grade--invertida .palco-texto{order:2}
.palco-grade--invertida .palco-visual{order:1}

.palco-num{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ambar);margin-bottom:10px;
}
.palco-texto h3{font-size:clamp(26px,3.2vw,34px);margin-bottom:10px}
.palco-lead{font-size:17.5px;color:var(--tinta);font-weight:600;margin-bottom:12px}
.palco-texto > p{font-size:15.5px;color:var(--tinta-media);margin-bottom:18px}
.palco-lista{list-style:none;border-top:1px solid var(--azul-borda)}
.palco-lista li{
  font-size:14.5px;color:var(--tinta-media);padding:9px 0 9px 24px;
  position:relative;border-bottom:1px solid var(--azul-borda);
}
.palco-lista li::before{
  content:"";position:absolute;left:2px;top:17px;
  width:8px;height:8px;border-radius:2px;background:var(--azul-claro);
}
.palco-visual{display:flex;justify-content:center;align-items:center;min-height:1px}

/* ---------- Mock 1: celular ---------- */
.mock-fone{position:relative;width:290px;flex-shrink:0}
.fone-tela{
  background:var(--branco);border:9px solid var(--azul-fundo);border-radius:34px;
  overflow:hidden;box-shadow:0 30px 60px -34px rgba(1,64,112,.55);
}
.fone-topo{
  display:flex;align-items:center;gap:10px;padding:14px 15px;
  background:var(--azul);color:var(--quase-branco);
}
.fone-av{width:31px;height:31px;border-radius:50%;background:var(--azul-claro);flex-shrink:0}
.fone-quem strong{display:block;font-size:13.5px;font-weight:600;color:#fff;line-height:1.2}
.fone-quem small{font-size:11px;color:rgba(250,252,254,.7)}
.fone-chat{padding:16px 13px 22px;background:var(--azul-papel);min-height:330px}
.bolha{
  max-width:82%;font-size:13px;line-height:1.45;padding:9px 12px;
  border-radius:13px;margin-bottom:9px;
  opacity:0;transform:translateY(9px);
  animation:surgir .5s ease-out var(--d,0s) forwards;
}
.bolha.loja{background:var(--branco);color:var(--tinta);border:1px solid var(--azul-borda);border-bottom-left-radius:4px}
.bolha.cliente{background:var(--azul);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.bolha.digitando{display:flex;gap:4px;width:auto;max-width:62px;padding:12px}
.bolha.digitando i{
  width:6px;height:6px;border-radius:50%;background:var(--azul-claro);
  animation:pontinho 1.3s ease-in-out infinite;
}
.bolha.digitando i:nth-child(2){animation-delay:.18s}
.bolha.digitando i:nth-child(3){animation-delay:.36s}
@keyframes surgir{to{opacity:1;transform:translateY(0)}}
@keyframes pontinho{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.etiqueta-flutua{
  position:absolute;right:-40px;bottom:52px;
  display:flex;align-items:center;gap:10px;
  background:var(--branco);border:1px solid var(--azul-borda);border-radius:12px;
  padding:11px 15px;box-shadow:0 18px 40px -22px rgba(1,64,112,.5);
  opacity:0;animation:surgir .6s ease-out 4.6s forwards;
}
.etiqueta-flutua strong{display:block;font-size:13px;color:var(--verde);font-weight:700;line-height:1.2}
.etiqueta-flutua small{font-size:11.5px;color:var(--tinta-fraca)}
.ef-ponto{width:9px;height:9px;border-radius:50%;background:var(--verde);flex-shrink:0;box-shadow:0 0 0 4px var(--verde-claro)}

/* ---------- Mock 2: fluxo + IA ---------- */
.mock-fluxo{position:relative;width:100%;max-width:430px;padding-left:6px}
.fluxo-trilho{position:absolute;left:24px;top:26px;bottom:112px;width:2px;background:var(--azul-borda);overflow:hidden}
.fluxo-pulso{
  position:absolute;left:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--ambar);box-shadow:0 0 0 4px rgba(168,83,18,.16);
  animation:descer 3.6s ease-in-out infinite;
}
@keyframes descer{0%{top:-10px;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}

.fluxo-nos{display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}
.no-fluxo{
  display:flex;align-items:center;gap:14px;
  background:var(--branco);border:1px solid var(--azul-borda);border-radius:12px;
  padding:12px 16px;box-shadow:var(--sombra);
  opacity:0;transform:translateX(-10px);
  animation:entrar .5s ease-out var(--d,0s) forwards;
}
@keyframes entrar{to{opacity:1;transform:translateX(0)}}
.no-ic{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--azul-papel);color:var(--azul);
  font-weight:800;font-size:13px;border:1px solid var(--azul-borda);
}
.no-ic--ia{background:var(--ambar);color:#fff;border-color:var(--ambar);font-size:11.5px;letter-spacing:.04em}
.no-ic--ok{background:var(--verde-claro);color:var(--verde);border-color:var(--verde);font-size:15px}
.no-fluxo strong{display:block;font-size:14px;color:var(--tinta);line-height:1.25}
.no-fluxo small{font-size:12px;color:var(--tinta-fraca)}

.cartao-ia{
  margin:16px 0 0 48px;background:var(--azul);color:var(--quase-branco);
  border-radius:12px;padding:16px 18px;box-shadow:0 22px 44px -26px rgba(1,64,112,.6);
  opacity:0;animation:surgir .6s ease-out 3.2s forwards;
}
.ia-topo{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:#fff;margin-bottom:13px}
.ia-selo{
  background:var(--ambar);color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;
  border-radius:5px;padding:3px 7px;
}
.ia-metrica{display:grid;grid-template-columns:100px 1fr 38px;gap:10px;align-items:center;margin-bottom:8px;font-size:12px}
.ia-metrica span{color:rgba(250,252,254,.78)}
.ia-metrica b{text-align:right;color:#fff;font-size:12.5px}
.ia-metrica .barra{height:5px;border-radius:3px;background:rgba(250,252,254,.16);overflow:hidden}
.ia-metrica .barra i{display:block;height:100%;width:0;border-radius:3px;background:var(--azul-claro);animation:encher 1.1s ease-out var(--d,0s) forwards}
@keyframes encher{to{width:var(--v,50%)}}
.ia-nota{font-size:12px;color:#F6D9C0;margin-top:12px;padding-top:11px;border-top:1px solid rgba(250,252,254,.16)}

/* ---------- Mock 3: painel ---------- */
.mock-painel{
  width:100%;max-width:470px;background:var(--branco);
  border:1px solid var(--azul-borda);border-radius:13px;overflow:hidden;
  box-shadow:0 34px 66px -34px rgba(1,64,112,.5);
}
.painel-barra{display:flex;align-items:center;gap:6px;padding:11px 14px;background:var(--azul-papel);border-bottom:1px solid var(--azul-borda)}
.painel-barra i{width:9px;height:9px;border-radius:50%;background:var(--azul-borda)}
.painel-url{margin-left:12px;font-size:11.5px;color:var(--tinta-fraca);letter-spacing:.02em}
.painel-corpo{padding:18px}

.painel-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.kpi{background:var(--azul-papel);border:1px solid var(--azul-borda);border-radius:10px;padding:11px 12px}
.kpi small{display:block;font-size:11px;color:var(--tinta-fraca);margin-bottom:3px}
.kpi strong{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:16px;color:var(--azul);line-height:1.15}
.kpi .alta{font-size:11px;color:var(--verde);font-weight:700}

.painel-grafico{height:96px;margin-bottom:16px}
.painel-grafico svg{width:100%;height:100%;display:block}
.g-linha{stroke-dasharray:420;stroke-dashoffset:420;animation:tracar-g 2s ease-out .3s forwards}
.g-area{opacity:0;animation:surgir 1s ease-out 1.4s forwards}
@keyframes tracar-g{to{stroke-dashoffset:0}}

.painel-barras{display:flex;align-items:flex-end;gap:8px;height:78px;margin-bottom:18px;padding-bottom:2px}
.painel-barras .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:5px}
.painel-barras i{display:block;width:100%;height:0;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--azul-claro),var(--azul));animation:crescer .9s cubic-bezier(.22,1,.36,1) var(--d,0s) forwards}
.painel-barras small{font-size:10px;color:var(--tinta-fraca);text-align:center}
@keyframes crescer{to{height:var(--h,50%)}}

.painel-origem{border-top:1px solid var(--azul-borda);padding-top:14px}
.or-linha{display:grid;grid-template-columns:92px 1fr 34px;gap:10px;align-items:center;margin-bottom:8px;font-size:12px}
.or-linha span{color:var(--tinta-media)}
.or-linha b{text-align:right;color:var(--azul);font-size:12.5px}
.barra-h{height:6px;border-radius:3px;background:var(--azul-nevoa);overflow:hidden}
.barra-h i{display:block;height:100%;width:0;border-radius:3px;background:var(--azul);animation:encher 1.1s ease-out var(--d,0s) forwards}

/* ---------- Responsivo e acessibilidade ---------- */
@media (prefers-reduced-motion:reduce){
  .bolha,.no-fluxo,.cartao-ia,.etiqueta-flutua{opacity:1;transform:none;animation:none}
  .ia-metrica .barra i{width:var(--v,50%);animation:none}
  .barra-h i{width:var(--v,50%);animation:none}
  .painel-barras i{height:var(--h,50%);animation:none}
  .g-linha{stroke-dashoffset:0;animation:none}
  .g-area{opacity:1;animation:none}
  .fluxo-pulso,.bolha.digitando i{animation:none}
}
@media (max-width:980px){
  .palco-grade,.palco-grade--invertida{grid-template-columns:1fr;gap:38px}
  .palco-grade--invertida .palco-texto{order:1}
  .palco-grade--invertida .palco-visual{order:2}
  .etiqueta-flutua{right:-18px}
  .cartao-ia{margin-left:0}
}
@media (max-width:680px){
  .palco{padding:38px 0}
  .mock-fone{width:250px}
  .fone-chat{min-height:290px}
  .etiqueta-flutua{right:auto;left:50%;transform:translateX(-50%);bottom:-26px}
  .painel-kpis{grid-template-columns:1fr}
  .fluxo-trilho{display:none}
}

/* ---------- Comparativo: ferramentas soltas x sistema ---------- */
.comparo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px 0 8px}
.comparo-lado{background:var(--branco);border:1px solid var(--azul-borda);border-radius:var(--raio);padding:22px}
.comparo-lado--nosso{border:1.5px solid var(--azul);box-shadow:var(--sombra)}
.c-titulo{display:block;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-fraca);margin-bottom:14px}
.comparo-lado--nosso .c-titulo{color:var(--ambar)}
.c-pecas{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.c-pecas span{font-size:13px;color:var(--tinta-media);background:var(--azul-nevoa);border:1px dashed var(--azul-borda);border-radius:8px;padding:8px 13px}
.c-bloco{display:flex;flex-direction:column;gap:3px;margin-bottom:14px}
.c-camada{font-size:13px;font-weight:600;color:var(--azul);background:var(--azul-papel);border:1px solid var(--azul-borda);padding:10px 14px;text-align:center}
.c-camada:first-child{border-radius:8px 8px 2px 2px}
.c-camada--base{border-radius:2px 2px 8px 8px;background:var(--azul);color:#fff;border-color:var(--azul)}
.c-nota{font-size:13.5px;color:var(--tinta-media)}
@media (max-width:820px){ .comparo{grid-template-columns:1fr} }

/* ---------- Mock: o sistema inteiro num login ---------- */
.mock-sistema{width:100%;max-width:520px;background:var(--branco);border:1px solid var(--azul-borda);border-radius:13px;overflow:hidden;box-shadow:0 36px 70px -34px rgba(1,64,112,.52)}
.sis-barra{display:flex;align-items:center;gap:11px;padding:11px 14px;background:var(--azul);color:#fff}
.sis-marca{width:26px;height:26px;border-radius:7px;background:var(--ambar);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sis-nome{font-size:12.5px;font-weight:600;flex:1}
.sis-ia{font-size:10.5px;font-weight:700;letter-spacing:.06em;background:rgba(250,252,254,.16);border-radius:5px;padding:3px 8px}
.sis-corpo{display:grid;grid-template-columns:158px 1fr;min-height:340px}
.sis-menu{background:var(--azul-fundo);padding:12px 0;overflow:hidden}
.sis-grupo{display:block;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(143,180,206,.75);padding:11px 14px 5px}
.sis-item{display:block;font-size:11.5px;color:rgba(250,252,254,.82);padding:5px 14px;line-height:1.5}
.sis-item.ativo{background:rgba(250,252,254,.14);color:#fff;font-weight:700;box-shadow:inset 2px 0 0 var(--ambar)}
.sis-tela{padding:16px;background:var(--azul-papel)}
.sis-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.sis-kpi{background:var(--branco);border:1px solid var(--azul-borda);border-radius:9px;padding:9px 11px}
.sis-kpi small{display:block;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-fraca);margin-bottom:2px}
.sis-kpi strong{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;color:var(--azul)}
.sis-aviso{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:var(--tinta-media);background:var(--branco);border:1px solid var(--azul-borda);border-radius:9px;padding:10px 12px;margin-bottom:12px;line-height:1.4}
.sis-ponto{width:7px;height:7px;border-radius:50%;background:var(--verde);flex-shrink:0;margin-top:4px;box-shadow:0 0 0 3px var(--verde-claro)}
.sis-trilho{display:flex;gap:4px;margin-bottom:12px}
.sis-trilho .et{flex:1;font-size:8.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--tinta-fraca);text-align:center;padding-top:9px;border-top:2px solid var(--azul-borda)}
.sis-trilho .et.feito{color:var(--verde);border-top-color:var(--verde);font-weight:700}
.sis-rodape{font-size:11.5px;color:var(--tinta-fraca);text-align:center;padding-top:10px;border-top:1px dashed var(--azul-borda)}
@media (max-width:520px){.sis-corpo{grid-template-columns:1fr}.sis-menu{display:none}.sis-kpis{grid-template-columns:1fr}}

.sis-marca{background:rgba(250,252,254,.22);border:1px dashed rgba(250,252,254,.5);position:relative}
.sis-marca::after{content:"logo";font-size:7.5px;font-weight:700;letter-spacing:.06em;color:rgba(250,252,254,.85);text-transform:uppercase}

/* ---------- Painel vivo: interacao ---------- */
.mock-sistema[data-vivo] .sis-corpo{min-height:392px}
.sis-bloco{margin-bottom:2px}
.sis-grupo{display:block;width:100%;text-align:left;background:none;border:0;cursor:default;font-family:inherit;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(143,180,206,.75);padding:11px 14px 5px}
.sis-item{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;font-family:inherit;font-size:11.5px;color:rgba(250,252,254,.82);padding:6px 14px;line-height:1.5;transition:background .15s ease,color .15s ease}
.sis-item:hover{background:rgba(250,252,254,.09);color:#fff}
.sis-item.ativo{background:rgba(250,252,254,.14);color:#fff;font-weight:700;box-shadow:inset 2px 0 0 var(--ambar)}
.sis-item:focus-visible{outline:2px solid var(--ambar);outline-offset:-2px}

.tela{display:none}
.tela.ativa{display:block;animation:trocaTela .28s ease-out}
@keyframes trocaTela{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.ped{background:var(--branco);border:1px solid var(--azul-borda);border-radius:9px;padding:11px 13px;margin-bottom:9px}
.ped-topo{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.ped-topo strong{font-size:12.5px;color:var(--azul)}
.ped-topo b{margin-left:auto;font-size:13px;color:var(--tinta)}
.ped small{font-size:11px;color:var(--tinta-fraca);display:block;margin-bottom:9px}
.tag{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:5px;padding:3px 7px}
.tag.paga{background:var(--verde-claro);color:var(--verde)}
.tag.prep{background:var(--ambar-claro);color:var(--ambar)}
.tag.off{background:var(--azul-nevoa);color:var(--tinta-fraca)}

.prod-linha{display:flex;align-items:center;gap:11px;background:var(--branco);border:1px solid var(--azul-borda);border-radius:9px;padding:10px 12px;margin-bottom:8px}
.prod-linha .mini{width:34px;height:34px;border-radius:7px;background:var(--azul-nevoa);border:1px solid var(--azul-borda);flex-shrink:0}
.prod-linha strong{display:block;font-size:12.5px;color:var(--tinta);line-height:1.25}
.prod-linha small{font-size:11px;color:var(--tinta-fraca)}
.prod-linha .tag{margin-left:auto}

.tela-desc{padding:8px 2px}
.td-selo{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ambar);margin-bottom:8px}
.td-nome{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;color:var(--azul);margin-bottom:8px;line-height:1.2}
.td-texto{font-size:13.5px;color:var(--tinta-media);line-height:1.55}

.sis-dica{font-size:12px;color:var(--tinta-fraca);text-align:center;padding:11px 14px;background:var(--azul-papel);border-top:1px solid var(--azul-borda)}
.sis-toggle{display:none}

@media (max-width:640px){
  .mock-sistema[data-vivo] .sis-corpo{grid-template-columns:1fr;min-height:0}
  .sis-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--azul-fundo);color:#fff;border:0;border-top:1px solid rgba(250,252,254,.14);font-family:inherit;font-size:12.5px;font-weight:700;padding:13px 15px;cursor:pointer}
  .sis-toggle span{font-weight:500;color:var(--azul-claro);font-size:12px}
  .sis-toggle::after{content:"";width:7px;height:7px;border-right:2px solid var(--azul-claro);border-bottom:2px solid var(--azul-claro);transform:rotate(45deg);margin-left:9px;transition:transform .2s ease}
  .sis-toggle[aria-expanded="true"]::after{transform:rotate(-135deg)}
  .sis-menu{display:none;max-height:270px;overflow-y:auto}
  .sis-menu.aberto{display:block}
  .sis-kpis{grid-template-columns:1fr 1fr}
}

/* ---------- Caos: cinco ferramentas separadas ---------- */
.caos{position:relative;height:260px;margin-bottom:16px}
.jan{position:absolute;background:var(--branco);border:1px solid var(--azul-borda);border-radius:8px;box-shadow:0 12px 26px -16px rgba(1,64,112,.4);overflow:hidden;width:152px}
.jan-topo{display:flex;align-items:center;gap:4px;padding:6px 8px;background:var(--azul-nevoa);border-bottom:1px solid var(--azul-borda)}
.jan-topo i{width:5px;height:5px;border-radius:50%;background:var(--azul-borda)}
.jan-topo span{margin-left:5px;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-fraca)}
.jan-corpo{padding:9px}
.esq-linha{height:5px;border-radius:3px;background:var(--azul-nevoa);margin-bottom:5px}
.esq-linha.curta{width:58%}
.jan-dado{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:13px;color:var(--azul);margin-top:6px}
.jan-dado.alerta{color:var(--vermelho)}
.jan-obs{display:block;font-size:9px;color:var(--tinta-fraca);margin-top:4px;line-height:1.3}
.grade-cel{display:grid;grid-template-columns:1fr 1fr;gap:3px;font-size:9.5px;color:var(--tinta-media)}
.grade-cel b{font-size:9px;color:var(--tinta-fraca);text-transform:uppercase;letter-spacing:.04em}
.grade-cel .erro{color:var(--vermelho);font-weight:700}
.falha{display:inline-block;font-size:9.5px;font-weight:700;color:var(--vermelho);background:#FDE7E7;border-radius:4px;padding:3px 7px}
.jan-preco{display:block;font-size:9px;font-weight:700;color:var(--tinta-fraca);background:var(--azul-papel);border-top:1px dashed var(--azul-borda);padding:5px 9px;letter-spacing:.03em}

.jan--site{top:0;left:0;transform:rotate(-3deg);z-index:2}
.jan--planilha{top:16px;left:128px;transform:rotate(2.4deg);z-index:4}
.jan--crm{top:6px;left:262px;transform:rotate(-1.6deg);z-index:3}
.jan--disp{top:132px;left:44px;transform:rotate(2deg);z-index:5}
.jan--rel{top:120px;left:196px;transform:rotate(-2.6deg);z-index:1}

.caos-soma{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;border-top:1px dashed var(--azul-borda);padding-top:12px;margin-bottom:12px}
.caos-soma span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-fraca)}
.caos-soma b{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;color:var(--vermelho)}
.caos-soma small{font-size:11.5px;color:var(--tinta-fraca);width:100%}

@media (max-width:820px){
  .caos{height:auto;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
  .jan{position:static;transform:none;width:calc(50% - 6px)}
}

/* ---------- Lado "o nosso": entrega pronta ---------- */
.pronto{margin-bottom:14px}
.pr-linha{display:flex;align-items:flex-start;gap:11px;padding:10px 0;border-bottom:1px solid var(--azul-nevoa)}
.pr-linha:last-child{border-bottom:0}
.pr-ok{width:21px;height:21px;border-radius:6px;background:var(--verde-claro);color:var(--verde);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.pr-ok--sob{background:var(--ambar-claro);color:var(--ambar);font-size:14px}
.pr-linha strong{display:block;font-size:14px;color:var(--azul);line-height:1.3}
.pr-linha small{font-size:12.5px;color:var(--tinta-media);line-height:1.45}
.pr-linha--sob strong{color:var(--ambar)}
.caos-soma--nosso b{color:var(--azul)}
/* corrige o #REF! saindo da janela da planilha */
.jan--planilha{width:132px}
.grade-cel{font-size:9px}

/* ---------- Cenarios alternados na camada 02 ---------- */
.mock-cenarios{position:relative;width:100%;max-width:440px}
.cen-abas{display:flex;gap:5px;margin-bottom:16px;background:var(--branco);border:1px solid var(--azul-borda);border-radius:10px;padding:4px}
.cen-aba{flex:1;font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--tinta-media);background:none;border:0;border-radius:7px;padding:8px 6px;cursor:pointer;transition:background .18s ease,color .18s ease}
.cen-aba:hover{background:var(--azul-nevoa)}
.cen-aba.ativa{background:var(--azul);color:#fff}
.cen-aba:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}
.cen-palco{display:none;position:relative;padding-left:6px}
.cen-palco.ativa{display:block}
.cen-palco .fluxo-trilho{top:26px;bottom:108px}
.cen-palco .cartao-ia{opacity:1;animation:none;margin:16px 0 0 48px}
.cen-palco.ativa .no-fluxo{opacity:0;animation:entrar .45s ease-out var(--d,0s) forwards}
.cen-palco.ativa .ia-metrica .barra i{width:0;animation:encher 1s ease-out var(--d,0s) forwards}
@media (prefers-reduced-motion:reduce){
  .cen-palco .no-fluxo{opacity:1;animation:none}
  .cen-palco .ia-metrica .barra i{width:var(--v,50%);animation:none}
}
@media (max-width:980px){ .cen-palco .cartao-ia{margin-left:0} }
@media (max-width:520px){ .cen-aba{font-size:10.5px;padding:8px 4px} }

/* ---------- Painel: visual corrigido ---------- */
.pg-topo{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.pg-topo span{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-fraca)}
.pg-topo b{font-size:12px;color:var(--verde);font-weight:700}
.painel-grafico{height:auto;margin-bottom:16px}
.painel-grafico svg{height:108px}
.g-grade{stroke:var(--azul-nevoa);stroke-width:1;stroke-dasharray:3 4}
.g-eixo{stroke:var(--azul-borda);stroke-width:1.4}
.g-ponto{fill:#fff;stroke:var(--azul);stroke-width:2.5;opacity:0}
.pg-meses{display:flex;justify-content:space-between;margin-top:5px}
.pg-meses span{font-size:9.5px;color:var(--tinta-fraca)}

/* barras com base e trilho */
.painel-barras{align-items:stretch;border-bottom:1.4px solid var(--azul-borda);padding-bottom:0;height:92px;margin-bottom:14px}
.painel-barras .col{position:relative;justify-content:flex-end}
.painel-barras .col::before{content:"";position:absolute;left:0;right:0;top:0;bottom:19px;background:var(--azul-nevoa);border-radius:4px}
.painel-barras i{position:relative;z-index:1}
.painel-barras small{padding-top:5px}

/* animacoes so quando a secao entra na tela */
.painel-barras i,.barra-h i,.g-linha,.g-area,.g-ponto{animation-play-state:paused}
.visivel .painel-barras i,.visivel .barra-h i,.visivel .g-linha,.visivel .g-area,.visivel .g-ponto{animation-play-state:running}
.g-ponto{animation:pulsar 2.4s ease-out 2.2s infinite}
@keyframes pulsar{0%{opacity:1;r:4}55%{opacity:1;r:4}70%{opacity:.35;r:7}100%{opacity:1;r:4}}
@media (prefers-reduced-motion:reduce){.g-ponto{opacity:1;animation:none}}

/* ---------- Modelos de contratacao ---------- */
.modelos{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.modelo{position:relative;background:var(--branco);border:1px solid var(--azul-borda);border-radius:var(--raio);padding:28px 26px 24px;box-shadow:var(--sombra)}
.modelo--destaque{border:1.5px solid var(--azul);box-shadow:0 26px 54px -30px rgba(1,64,112,.45)}
.mo-selo{position:absolute;top:-11px;left:26px;font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;background:var(--azul);color:#fff;border-radius:999px;padding:5px 13px}
.mo-selo--alt{background:var(--branco);color:var(--tinta-fraca);border:1px solid var(--azul-borda)}
.modelo h3{font-size:22px;margin-bottom:6px}
.mo-lead{font-size:15.5px;font-weight:600;color:var(--ambar);margin-bottom:16px}
.mo-lista{list-style:none;border-top:1px solid var(--azul-nevoa);margin-bottom:16px}
.mo-lista li{position:relative;font-size:14px;color:var(--tinta-media);line-height:1.5;padding:10px 0 10px 26px;border-bottom:1px solid var(--azul-nevoa)}
.mo-lista li::before{content:"\2713";position:absolute;left:0;top:10px;width:17px;height:17px;border-radius:5px;background:var(--verde-claro);color:var(--verde);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.mo-lista li b{color:var(--azul)}
.mo-quem{font-size:13.5px;color:var(--tinta-fraca);font-style:italic}
.mo-rodape{margin-top:22px;text-align:center;font-size:14.5px;color:var(--tinta-media);border-top:1px dashed var(--azul-borda);padding-top:18px}
@media (max-width:820px){ .modelos{grid-template-columns:1fr;gap:26px} }

/* ---------- Produtos: dois cards largos ---------- */
.produtos-dois{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.prod-card{background:var(--branco);border:1px solid var(--azul-borda);border-radius:var(--raio);padding:28px 26px 26px;box-shadow:var(--sombra);display:flex;flex-direction:column}
.pc-topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.pc-topo h3{font-size:24px}
.pc-tipo{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ambar);background:var(--ambar-claro);border-radius:999px;padding:4px 11px}
.pc-lead{font-size:16.5px;font-weight:600;color:var(--azul);line-height:1.35;margin-bottom:12px}
.pc-texto{font-size:14.5px;color:var(--tinta-media);margin-bottom:16px}
.pc-itens{list-style:none;border-top:1px solid var(--azul-nevoa);margin-bottom:20px}
.pc-itens li{position:relative;font-size:14px;color:var(--tinta-media);padding:9px 0 9px 24px;border-bottom:1px solid var(--azul-nevoa)}
.pc-itens li::before{content:"";position:absolute;left:3px;top:16px;width:7px;height:7px;border-radius:2px;background:var(--azul-claro)}
.prod-card .botao{align-self:flex-start;margin-top:auto}
@media (max-width:820px){ .produtos-dois{grid-template-columns:1fr} }

/* logo dos produtos no topo do card */
.pc-topo{align-items:center}
.pc-logo{width:46px;height:46px;object-fit:contain;flex-shrink:0}
.pc-topo h3{flex:1}
@media (max-width:520px){ .pc-logo{width:38px;height:38px} }

/* ---------- Rodape em card ---------- */
.rodape{background:var(--azul-nevoa);padding:0 24px 30px;margin-top:0}
.rodape-caixa{position:relative;max-width:var(--largura);margin:0 auto;background:var(--azul-fundo);border-top:1px solid rgba(143,180,206,.28);border-radius:28px 28px 0 0;padding:56px 44px 26px;overflow:hidden}
.rodape-caixa::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:150px;background:radial-gradient(60% 100% at 50% 0%,rgba(143,180,206,.16),transparent 70%);pointer-events:none}
.rodape-brilho{position:absolute;top:0;left:50%;transform:translateX(-50%);width:34%;height:1px;background:linear-gradient(90deg,transparent,rgba(143,180,206,.85),transparent);filter:blur(.4px)}
.rodape-interno{position:relative;display:grid;grid-template-columns:1fr 2fr;gap:44px}

.rodape-marca,.rd-col{opacity:0;transform:translateY(-8px);filter:blur(4px)}
.rodape-marca.visivel,.rd-col.visivel{opacity:1;transform:none;filter:none;transition:opacity .8s ease var(--d,0s),transform .8s ease var(--d,0s),filter .8s ease var(--d,0s)}
.rodape-marca img{height:28px;filter:brightness(0) invert(1);opacity:.94;margin-bottom:16px}
.rodape-marca p{font-size:14px;color:rgba(250,252,254,.72);line-height:1.55;margin-bottom:16px;max-width:38ch}
.rodape-marca small{font-size:12.5px;color:rgba(250,252,254,.45)}

.rodape-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.rd-col h4{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.rd-col ul{list-style:none}
.rd-col li{margin-bottom:9px}
.rd-col a{font-size:14px;color:rgba(250,252,254,.7);transition:color .25s ease}
.rd-col a:hover{color:#fff;text-decoration:none}
.rd-social a{display:inline-flex;align-items:center;gap:8px}
.rd-social svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

.rodape-legal{position:relative;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid rgba(143,180,206,.2);font-size:12.5px;color:rgba(250,252,254,.45)}

@media (max-width:980px){
  .rodape-interno{grid-template-columns:1fr;gap:36px}
  .rodape-cols{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:600px){
  .rodape{padding:0 14px 20px}
  .rodape-caixa{padding:40px 24px 22px;border-radius:20px 20px 0 0}
  .rodape-legal{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .rodape-marca,.rd-col{opacity:1;transform:none;filter:none}
}

/* rodape em toda a largura */
.rodape{background:var(--azul-fundo);padding:0}
.rodape-caixa{max-width:none;border-radius:0;padding:0;background:transparent;border-top:1px solid rgba(143,180,206,.4)}
.rodape-interno{max-width:var(--largura);margin:0 auto;padding:60px 24px 0}
.rodape-legal{max-width:var(--largura);margin:40px auto 0;padding:20px 24px 30px}
.rodape-caixa::before{width:46%;height:170px}
@media (max-width:600px){
  .rodape-interno{padding:42px 20px 0}
  .rodape-legal{padding:18px 20px 24px;margin-top:30px}
}

/* cantos superiores arredondados no rodape full-width */
.rodape{background:var(--azul-nevoa)}
.rodape-caixa{background:var(--azul-fundo);border-radius:32px 32px 0 0;overflow:hidden}
@media (max-width:600px){ .rodape-caixa{border-radius:22px 22px 0 0} }

/* marca do CL e acoes no bloco de destaque */
.d-marca{position:absolute;right:36px;top:50%;transform:translateY(-50%);width:210px;height:auto;opacity:.09;pointer-events:none;z-index:0}
.destaque > *{position:relative;z-index:1}
.d-acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.botao--claro-linha{background:transparent;border-color:rgba(143,180,206,.55);color:#fff}
.botao--claro-linha:hover{background:rgba(250,252,254,.1);border-color:var(--azul-claro)}
@media (max-width:900px){ .d-marca{display:none} }

/* CL alinhado ao topo direito do bloco de destaque */
.destaque{position:relative}
.d-marca{position:absolute;right:38px;left:auto;top:34px;transform:none;width:150px;height:auto;opacity:.11;pointer-events:none;z-index:0}
@media (max-width:900px){ .d-marca{display:none} }

/* ---------- Contato ---------- */
.contato-grade{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:start}
.contato-texto .titulo-secao{margin-bottom:12px}
.contato-nota{font-size:14.5px;color:var(--tinta-media);border-left:3px solid var(--ambar);padding-left:14px}
.contato-form{background:var(--branco);border:1px solid var(--azul-borda);border-radius:var(--raio);padding:26px;box-shadow:var(--sombra)}
.campo-duplo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.opcional{font-size:11px;font-weight:600;color:var(--tinta-fraca);text-transform:none;letter-spacing:0}
.mel{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.contato-form .botao{width:100%;justify-content:center;margin-top:2px}
.contato-form .botao:disabled{opacity:.65;cursor:default}
.form-aviso{font-size:13.5px;margin-top:12px;text-align:center;min-height:1px}
.form-aviso.ok{color:var(--verde);font-weight:600}
.form-aviso.erro{color:var(--vermelho);font-weight:600}
@media (max-width:900px){ .contato-grade{grid-template-columns:1fr;gap:28px} }
@media (max-width:520px){ .campo-duplo{grid-template-columns:1fr} }

/* ---------- Passos de replicacao e chamada final ---------- */
.passos{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:26px 0 8px}
.passo-item{background:var(--branco);border:1px solid var(--azul-borda);border-radius:var(--raio);padding:20px 18px;box-shadow:var(--sombra);position:relative}
.passo-item::after{content:"";position:absolute;right:-8px;top:32px;width:14px;height:1.5px;background:var(--azul-borda)}
.passo-item:last-child::after{display:none}
.pi-n{display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:13px;color:var(--ambar);background:var(--ambar-claro);border-radius:7px;padding:4px 10px;margin-bottom:11px}
.passo-item p{font-size:13.5px;color:var(--tinta-media);line-height:1.45}

.chamada-final{margin-top:30px;background:linear-gradient(160deg,var(--azul),var(--azul-fundo));border-radius:var(--raio);padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;box-shadow:var(--sombra)}
.chamada-final h3{color:#fff;font-size:23px;margin-bottom:6px}
.chamada-final p{color:rgba(250,252,254,.82);font-size:15px;max-width:56ch}
.chamada-final .botao{flex-shrink:0}

@media (max-width:900px){ .passos{grid-template-columns:1fr 1fr} .passo-item::after{display:none} }
@media (max-width:560px){ .passos{grid-template-columns:1fr} .chamada-final{padding:24px} }

/* rodape com tres colunas */
.rodape-cols--tres{grid-template-columns:repeat(3,1fr);gap:32px}
@media (max-width:980px){ .rodape-cols--tres{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .rodape-cols--tres{grid-template-columns:1fr;gap:26px} }

/* ---------- Quem conduz ---------- */
.quem{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:start}
.quem-foto{position:relative}
.quem-foto img{width:100%;border-radius:var(--raio);display:block;box-shadow:0 26px 52px -28px rgba(1,64,112,.5)}
.quem-foto::after{content:"";position:absolute;inset:0;border-radius:var(--raio);box-shadow:inset 0 0 0 1px rgba(1,64,112,.14)}
.quem-texto h2{font-size:clamp(26px,3.2vw,34px);margin-bottom:2px}
.quem-cargo{font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ambar);margin-bottom:16px}
.quem-texto p{font-size:15.5px;color:var(--tinta-media);margin-bottom:12px;max-width:66ch}
.quem-paises{margin-top:20px;padding-top:18px;border-top:1px solid var(--azul-borda)}
.qp-titulo{display:block;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-fraca);margin-bottom:11px}
.qp-lista{display:flex;flex-wrap:wrap;gap:8px}
.qp-lista span{font-size:13.5px;font-weight:600;color:var(--azul);background:var(--azul-papel);border:1px solid var(--azul-borda);border-radius:999px;padding:6px 14px}
@media (max-width:820px){ .quem{grid-template-columns:1fr;gap:26px} .quem-foto{max-width:200px} }

/* bandeiras nos paises */
.qp-lista span{display:inline-flex;align-items:center;gap:7px}
.qp-lista i{font-style:normal;font-size:15px;line-height:1;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}

/* ---------- Video de fundo do hero ---------- */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.45;pointer-events:none}
.hero-veu{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(165deg,rgba(1,64,112,.6),rgba(1,43,76,.8))}
.topo .orbe{z-index:1}
.topo .infinito{z-index:1}
.topo .container{z-index:3}
@media (prefers-reduced-motion:reduce){ .hero-video{display:none} }
@media (max-width:680px){ .hero-video{opacity:.22} }

/* linha viva abaixo da faixa de clientes */
.clientes{position:relative;border-bottom:none}
.clientes::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,
    var(--azul-borda) 0%,
    var(--azul) 22%,
    var(--ambar) 50%,
    var(--azul) 78%,
    var(--azul-borda) 100%);
  background-size:220% 100%;
  animation:correLinha 9s ease-in-out infinite;
}
@keyframes correLinha{
  0%{background-position:120% 0}
  50%{background-position:-20% 0}
  100%{background-position:120% 0}
}
@media (prefers-reduced-motion:reduce){
  .clientes::after{animation:none;background-position:50% 0}
}

/* ---------- Menu mobile ---------- */
.hamburguer{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0 9px;background:none;border:1px solid var(--azul-borda);border-radius:9px;cursor:pointer}
.hamburguer span{display:block;height:2px;width:100%;background:var(--azul);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.hamburguer.ativo span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburguer.ativo span:nth-child(2){opacity:0}
.hamburguer.ativo span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:820px){
  .cabecalho{position:sticky;top:0}
  .cabecalho .container{flex-wrap:wrap;position:relative}
  .hamburguer{display:flex}
  .menu{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;margin-top:12px;padding-top:8px;border-top:1px solid var(--azul-borda)}
  .menu.aberto{display:flex}
  .menu a{padding:13px 4px;font-size:15.5px;border-bottom:1px solid var(--azul-nevoa)}
  .menu a:last-child{border-bottom:none}
}

/* ---------- Polimento 1: faixa de clientes com presenca ---------- */
.clientes{background:linear-gradient(180deg,#fff,var(--quase-branco));padding:42px 0 40px;border-top:1px solid var(--azul-borda)}
.clientes .titulo-faixa{margin-bottom:24px;color:var(--tinta-media);font-size:11px}
.clientes .titulo-faixa::before,.clientes .titulo-faixa::after{content:"";display:inline-block;width:26px;height:1px;background:var(--azul-borda);vertical-align:middle;margin:0 12px}
.marcas-trilha img{opacity:.55;transition:opacity .3s ease,filter .3s ease}
.marcas-viewport:hover .marcas-trilha img{opacity:.4}
.marcas-trilha img:hover{opacity:1}

/* ---------- Polimento 2: botoes com resposta de toque ---------- */
.botao{
  transform:translateY(0);
  box-shadow:0 1px 2px rgba(1,64,112,.08);
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .12s ease,box-shadow .2s ease;
}
.botao:hover{transform:translateY(-1.5px)}
.botao--azul:hover{box-shadow:0 8px 18px -8px rgba(1,64,112,.55)}
.botao--ambar:hover{box-shadow:0 8px 18px -8px rgba(168,83,18,.6)}
.botao--claro:hover,.botao--linha:hover{box-shadow:0 8px 18px -10px rgba(1,64,112,.4)}
.botao:active{transform:translateY(0);box-shadow:0 1px 2px rgba(1,64,112,.14);transition-duration:.05s}
@media (prefers-reduced-motion:reduce){
  .botao,.botao:hover,.botao:active{transform:none;transition:background .15s ease,color .15s ease}
}

/* ---------- Polimento 3: revelacao ao rolar ---------- */
.revela{opacity:0;transform:translateY(10px)}
.revela.dentro{opacity:1;transform:none;transition:opacity .6s ease var(--rd,0s),transform .6s cubic-bezier(.22,1,.36,1) var(--rd,0s)}
@media (prefers-reduced-motion:reduce){
  .revela{opacity:1;transform:none}
}

/* ---------- Polimento 4: tipografia com eixo optico ---------- */
h1,h2,h3{font-variation-settings:'opsz' 32,'wdth' 100}
.hero-video ~ .container h1,.topo h1{font-variation-settings:'opsz' 88,'wdth' 96;letter-spacing:-.032em;font-weight:600}
.titulo-secao{font-variation-settings:'opsz' 60,'wdth' 98;letter-spacing:-.026em}
.palco-texto h3,.destaque h2,.chamada-final h3,.quem-texto h2{font-variation-settings:'opsz' 48,'wdth' 99;letter-spacing:-.022em}
.cartao h3,.frente h3,.modelo h3,.pc-topo h3,.rd-col h4{font-variation-settings:'opsz' 20,'wdth' 100;letter-spacing:-.012em}
.kpi strong,.sis-kpi strong,.caos-soma b,.fres .v,.hero-stat .v{font-variation-settings:'opsz' 24,'wdth' 92;letter-spacing:-.02em;font-feature-settings:'tnum' 1}
.palco-num,.rotulo,.eyebrow,.c-titulo,.mo-selo{font-feature-settings:'ss01' 1}