/* ===========================================================
   ZelusFlow - estilo de todas as paginas do site
   versao do site: 10.3  -  TEMA CLARO

   ESTE ARQUIVO VALE PARA O SITE INTEIRO.
   Mudou uma cor aqui, mudou em todas as paginas de uma vez.

   POR QUE O TEMA CLARO
   Fundo escuro passa ar de produto tecnico, para quem entende de
   tecnologia. O publico daqui e o contrario: barbeiro, manicure,
   mecanico, dono de pet shop. Claro le mais facil no celular, no sol,
   e transmite "simples de usar" - que e exatamente o que precisa ser
   dito. E o caminho que ClickUp, Pipedrive, Monday e HubSpot seguem.

   O QUE CONTINUA ESCURO, DE PROPOSITO
   O celular desenhado (.fone) e o video. Aparelho e escuro no mundo
   real, e o contraste com a pagina clara puxa o olho justamente para
   onde a conversa acontece.

   CONTRASTE
   Cada cor de texto foi conferida contra o fundo em que ela aparece:
   texto principal 16,8:1, secundario 6,1:1, verde de texto 5,4:1,
   ambar do selo 5,5:1. O minimo da norma (WCAG AA) e 4,5:1.
   O verde da marca (#00A651) rende 3,2:1 - por isso ele so aparece
   em titulo grande e em bloco preenchido, nunca em texto pequeno.
   =========================================================== */
:root{
  /* marca */
  --verde:#00A651;          /* blocos preenchidos e titulo grande */
  --verde-claro:#22c96f;    /* SO sobre fundo escuro (celular, video) */
  --verde-txt:#067a40;      /* verde legivel sobre branco */
  --verde-fundo:#e8f6ee;    /* preenchimento suave */
  --amarelo:#FFC800;        /* so como cor de fundo ou icone */
  --amarelo-txt:#8a6200;    /* ambar legivel sobre branco */
  --amarelo-fundo:#fff6dc;
  /* superficies */
  --fundo:#ffffff;
  --fundo2:#f3f8f5;         /* faixa alternada, com um toque de verde */
  --card:#ffffff;
  --borda:#e3eae6;
  --borda-forte:#cfdcd5;
  /* texto */
  --txt:#0f2119;
  --muted:#56665e;
  /* sombras: cinza esverdeado, nunca preto puro - preto sobre branco
     suja a cor e da aspecto de caixa colada na pagina */
  --sombra-1:0 1px 2px rgba(16,40,30,.06), 0 4px 12px rgba(16,40,30,.05);
  --sombra-2:0 2px 6px rgba(16,40,30,.07), 0 12px 28px rgba(16,40,30,.08);
  --sombra-3:0 18px 46px rgba(16,40,30,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--txt);
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
h1,h2,h3{line-height:1.2;margin:0 0 14px}
/* 25/09/2026: reduzido de clamp(30px,5.2vw,54px). O titulo da home ficou
   mais comprido ("Sistema para pequenos negocios") e quebrava em seis
   linhas em tela media, virando uma coluna estreita e feia.
   Mexa nos TRES numeros juntos: o do meio (vw) e quem manda na maior parte
   das telas; os outros dois so seguram os extremos. */
/* text-wrap:balance deixa as linhas do titulo com largura parecida, em vez
   de tres linhas cheias e uma com duas palavras. E ele que substitui os
   <br> que havia no HTML - com <br> a quebra era fixa e sobrava buraco em
   telas de outra largura. */
h1{font-size:clamp(27px,4.4vw,46px);font-weight:800;letter-spacing:-.5px;text-wrap:balance}
h2{font-size:clamp(24px,3.6vw,38px);font-weight:800;letter-spacing:-.3px}
h3{font-size:19px;font-weight:700}
p{margin:0 0 14px}
.sub{color:var(--muted);font-size:clamp(15px,1.9vw,19px)}
/* Destaque dentro do titulo. Sao textos GRANDES, por isso o verde da
   marca pode ser usado aqui; em texto pequeno ele nao passa no
   contraste e a regra e usar --verde-txt. */
.g{color:var(--verde)} .a{color:var(--amarelo-txt)}

/* ---------- topo ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--borda)}
/* Tres colunas: logo na esquerda, menu no meio da PAGINA e uma coluna vazia
   do outro lado so para equilibrar - senao o menu cai no meio do que sobrou. */
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px 0}
.nav img{height:68px;width:auto}
.nav .links{display:flex;gap:22px;justify-self:center;font-size:14px;color:var(--muted)}
.nav .links a{text-decoration:none}
.nav .links a:hover{color:var(--verde-txt)}
.nav .btn{width:auto}
@media(max-width:860px){.nav .links{display:none}.nav{grid-template-columns:auto}}

/* ---------- botoes ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;text-decoration:none;
  font-weight:700;font-size:16px;padding:14px 26px;border-radius:999px;transition:transform .15s,box-shadow .15s}
.btn-zap{background:linear-gradient(135deg,#00A651,#12b862);color:#04240f;
  box-shadow:0 6px 18px rgba(0,166,81,.28)}
.btn-zap:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,166,81,.38)}
.btn-linha{background:#fff;color:var(--txt);border:1px solid var(--borda-forte);padding:13px 24px}
.btn-linha:hover{border-color:var(--verde);color:var(--verde-txt)}
/* Foco visivel: quem navega pelo teclado precisa enxergar onde esta. */
.btn:focus-visible,.mapa a:focus-visible,.nav .links a:focus-visible,.faq summary:focus-visible{
  outline:3px solid var(--verde);outline-offset:3px;border-radius:999px}
.btn-sm{font-size:14px;padding:10px 18px}
/* O botao do topo e menor de proposito: quem manda ali e a marca, nao ele.
   Os botoes grandes ficam no meio da pagina, onde a pessoa ja quer clicar. */
.btn-topo{font-size:13px;padding:9px 16px;box-shadow:none}
.btn-topo:hover{transform:none;box-shadow:0 6px 18px rgba(0,166,81,.35)}

/* ---------- hero ---------- */
.hero{position:relative;padding:70px 0 40px;overflow:hidden}
.hero::before{content:"";position:absolute;width:760px;height:760px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,166,81,.10),transparent 62%);top:-320px;right:-220px;pointer-events:none}
.hero::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,200,0,.16),transparent 65%);bottom:-260px;left:-180px;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
@media(max-width:960px){.hero .wrap{grid-template-columns:1fr;gap:34px}}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--amarelo-txt);
  background:var(--amarelo-fundo);border:1px solid #f2dfa6;padding:7px 15px;border-radius:999px;margin-bottom:20px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.mini{display:flex;gap:20px;flex-wrap:wrap;margin-top:24px;font-size:13px;color:var(--muted)}
.mini b{color:var(--txt)}

/* ---------- celular do hero ---------- */
/* O celular continua ESCURO na pagina clara, de proposito: aparelho e
   escuro no mundo real, e o contraste puxa o olho para a conversa.

   ATENCAO: por ser a UNICA ilha escura do site, ele precisa declarar a
   propria cor de texto. Sem a linha "color" abaixo, tudo aqui dentro
   herda o texto escuro do body e some no fundo escuro do aparelho. */
.fone{color:#eaf2ea;width:min(300px,100%);margin:0 auto;background:#0b1118;border:9px solid #202c38;border-radius:34px;
  padding:14px 12px 18px;box-shadow:0 24px 54px rgba(16,40,30,.26)}
.fone .topo{display:flex;align-items:center;gap:9px;padding:0 4px 12px;border-bottom:1px solid #1b2733;margin-bottom:12px}
.fone .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--verde),var(--amarelo))}
.fone .nome{font-size:13px;font-weight:700}
.fone .on{font-size:11px;color:var(--verde-claro)}
.bal{max-width:82%;padding:9px 13px;border-radius:14px;font-size:13px;margin-bottom:9px;animation:sobe .5s both}
.bal.cli{background:#22303d;color:#e7eef4;border-bottom-left-radius:4px}
.bal.bot{background:linear-gradient(135deg,#0e7a43,#0aa055);color:#f2fbf5;border-bottom-right-radius:4px;margin-left:auto}
.bal:nth-child(2){animation-delay:.15s}.bal:nth-child(3){animation-delay:.5s}
.bal:nth-child(4){animation-delay:.9s}.bal:nth-child(5){animation-delay:1.3s}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- secoes ---------- */
section{padding:76px 0}
.centro{text-align:center;max-width:760px;margin:0 auto 46px}
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g3,.g2{grid-template-columns:1fr}}
/* No claro a borda preta some e o cartao fica "colado". Quem separa o
   cartao do fundo aqui e a sombra, nao a linha. */
.card{background:var(--card);border:1px solid var(--borda);border-radius:16px;padding:24px;
  box-shadow:var(--sombra-1);transition:transform .18s,border-color .18s,box-shadow .18s}
.card:hover{transform:translateY(-4px);border-color:#b6ddc7;box-shadow:var(--sombra-2)}
.ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--verde-fundo);margin-bottom:14px}
.ico svg{width:24px;height:24px;stroke:var(--verde-txt);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card p{color:var(--muted);font-size:15px;margin:0}
.faixa{background:var(--fundo2);border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)}

/* ---------- destaque (diferenciais) ---------- */
.dest{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:70px}
.dest:nth-child(even) .txt{order:2}
@media(max-width:860px){.dest{grid-template-columns:1fr;gap:26px}.dest:nth-child(even) .txt{order:0}}
.selo{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--amarelo-txt);margin-bottom:10px}
.lista{list-style:none;padding:0;margin:16px 0 0}
.lista li{position:relative;padding-left:28px;margin-bottom:9px;color:var(--muted);font-size:15px}
.lista li::before{content:"";position:absolute;left:0;top:8px;width:16px;height:16px;border-radius:50%;
  background:var(--verde-fundo);box-shadow:inset 0 0 0 1.5px var(--verde)}
.lista li::after{content:"";position:absolute;left:5px;top:12px;width:5px;height:8px;border:solid var(--verde-txt);
  border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---------- marcas de IA ---------- */
.marcas{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.marca{font-size:13px;font-weight:600;padding:8px 15px;border-radius:999px;background:var(--fundo2);
  border:1px solid var(--borda);color:var(--muted)}
.marca:hover{border-color:#e8c250;color:var(--amarelo-txt);background:var(--amarelo-fundo)}

/* ---------- comparativo ---------- */
.tab{width:100%;border-collapse:collapse;background:var(--card);border-radius:16px;overflow:hidden;
  border:1px solid var(--borda);box-shadow:var(--sombra-1);font-size:15px}
.tab th,.tab td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--borda)}
.tab th{background:var(--fundo2);font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.tab th:nth-child(2){color:var(--verde-txt)}
.tab td:first-child{color:var(--muted)}
.tab tr:last-child td{border-bottom:0}
.sim{color:var(--verde-txt);font-weight:700}
.nao{color:var(--muted)}
.tab-rolar{overflow-x:auto}

/* ---------- perguntas frequentes ----------
   Sanfona feita com <details>: abre e fecha sozinho, sem JavaScript.
   IMPORTANTE: o texto da resposta aqui embaixo tem que ser IGUAL ao do
   bloco FAQPage la em cima. Se mudar um, mude o outro - o Google compara. */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{background:var(--card);border:1px solid var(--borda);border-radius:14px;padding:0 20px;
  box-shadow:var(--sombra-1);transition:border-color .18s,box-shadow .18s}
.faq details[open]{border-color:#b6ddc7;box-shadow:var(--sombra-2)}
.faq summary{cursor:pointer;list-style:none;padding:17px 30px 17px 0;font-weight:700;font-size:16px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:2px;top:24px;width:9px;height:9px;
  border:solid var(--verde-txt);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:27px}
.faq .resp{color:var(--muted);font-size:15px;padding:0 0 18px;margin:0}

/* ---------- formulario ---------- */
.form-box{background:linear-gradient(165deg,#f2fbf5,#ffffff);border:1px solid #c9e6d5;
  border-radius:22px;padding:38px;max-width:640px;margin:0 auto;box-shadow:var(--sombra-3)}
.form-box label{display:block;font-size:13px;font-weight:600;margin:14px 0 6px;color:var(--muted)}
.form-box input,.form-box select{width:100%;padding:13px 15px;border-radius:11px;background:#fff;
  border:1px solid var(--borda-forte);color:var(--txt);font-size:15px;font-family:inherit}
/* Anel em volta do campo ativo, alem da cor: quem nao distingue verde
   tambem precisa enxergar em qual campo esta escrevendo. */
.form-box input:focus,.form-box select:focus{outline:0;border-color:var(--verde);
  box-shadow:0 0 0 3px rgba(0,166,81,.18)}
.escondido{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-box .btn{width:100%;justify-content:center;margin-top:22px}
.aviso{font-size:13px;margin-top:14px;text-align:center;min-height:20px}
.aviso.erro{color:#b3261e}.aviso.ok{color:var(--verde-txt)}

/* ---------- rodape ---------- */
/* A folga de baixo e maior de proposito: o botao do WhatsApp flutua fixo no
   canto inferior direito e, sem essa sobra, ele cobria o e-mail de contato. */
footer{border-top:1px solid var(--borda);padding:34px 0 58px;color:var(--muted);font-size:14px}
/* Logo no canto, o texto do meio centralizado na pagina: a terceira coluna
   vazia existe so para equilibrar a largura e o texto cair no meio de verdade. */
.foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.foot img{justify-self:start}
.foot span:nth-of-type(1){text-align:center}
@media(max-width:520px){
  .foot{grid-template-columns:1fr;gap:8px;text-align:center;justify-items:center}
  .foot span{justify-self:center !important}
}

/* ---------- botao flutuante ---------- */
.zap-fixo{position:fixed;right:20px;bottom:20px;z-index:60;width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg,var(--verde),var(--verde-claro));display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,166,81,.42);animation:pulsa 2.4s infinite}
@keyframes pulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.zap-fixo svg{width:30px;height:30px;fill:#06210f}
.revelar{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s}

/* ---------- celular ---------- */
@media(max-width:640px){
  .wrap{padding:0 16px}
  section{padding:52px 0}
  .hero{padding:44px 0 30px}
  .centro{margin-bottom:34px}
  .card{padding:20px}
  .form-box{padding:24px 20px;border-radius:18px}
  .btn{width:100%;justify-content:center}      /* dedo grande, botao grande */
  .nav img{height:52px}
  .btn-topo{font-size:12px;padding:8px 13px}
  .btn-topo .txt-longo{display:none}
  .mini{gap:10px;flex-direction:column;align-items:center}
  .dest{margin-bottom:46px}
  .tab th,.tab td{padding:12px 12px;font-size:14px}
  #comecar{padding-bottom:110px}               /* espaco para o botao flutuante */
  .zap-fixo{width:54px;height:54px;right:16px;bottom:16px}
}
@media(prefers-reduced-motion:reduce){
  .revelar,.bal{transition:none;animation:none;opacity:1;transform:none}
  .zap-fixo{animation:none}
}
.revelar.visivel{opacity:1;transform:none}

/* ============================================================
   PAGINAS DE SEGMENTO  (eletricista, barbearia, manicure...)
   Sao paginas mais enxutas que a inicial: titulo menor, sem a
   coluna do celular ao lado do texto e com menos respiro.
   Para usar, basta escrever <body class="segmento">.
   ============================================================ */
.segmento h1{font-size:clamp(28px,4.6vw,46px)}
.segmento h2{font-size:clamp(23px,3.4vw,34px)}
.segmento section{padding:66px 0}
.segmento .hero{padding:34px 0 40px}
.segmento .hero::before{top:-340px}
.segmento .hero .wrap{display:block}
.segmento .hero .caixa{max-width:820px}
.segmento .fone{width:min(320px,100%)}
.segmento .bal{max-width:84%;animation:none}
@media(max-width:640px){.segmento section{padding:48px 0}}

/* caminho de migalhas: "ZelusFlow > Sistema para eletricista" */
.migalha{font-size:13px;color:var(--muted);padding:16px 0 0}
.migalha a{color:var(--muted);text-decoration:none}
.migalha a:hover{color:var(--verde-txt)}

/* dois botoes lado a lado, logo abaixo do titulo */
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* bloco de duas colunas: texto de um lado, celular do outro */
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:860px){.dupla{grid-template-columns:1fr;gap:26px}}

/* etapas do funil, em fileira */
.etapas{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
@media(max-width:760px){.etapas{grid-template-columns:repeat(2,1fr)}}
.etapa{background:var(--card);border:1px solid var(--borda);border-radius:14px;padding:16px;text-align:center;box-shadow:var(--sombra-1)}
.etapa b{display:block;font-size:14px;margin-bottom:4px}
.etapa span{font-size:12px;color:var(--muted)}

/* ---------- mapa do site, no rodape ----------
   Nao e enfeite: e assim que o Google encontra as paginas novas e
   distribui forca entre elas. Toda pagina criada entra nesta lista. */
/* ---------- mapa do rodape ----------
   Antes era uma tira cinza e miuda, meio apagada de proposito. Virou a porta
   de entrada dos segmentos: quem desce a home ate o fim esta procurando "isso
   serve para o MEU ramo?", e e aqui que ele acha. Cada pagina virou um botao,
   com letra grande o bastante para ler de longe e alvo grande o bastante para
   o dedo no celular. Vale tambem para o Google, que le um link interno forte
   para cada segmento em todas as paginas do site.

   "Inicio" e "Duvidas" sao os unicos que NAO sao segmento - por isso ficam
   discretos nas pontas (primeiro e ultimo), sem virar botao. Isso e feito por
   posicao, sem classe nova, para nao ter de mexer no HTML de 12 paginas. */
/* NO COMPUTADOR: uma linha so. Se a letra e o espacamento fossem fixos, o
   ultimo item caia sozinho para a linha de baixo e a faixa ficava torta.
   Entao nowrap proibe a quebra e clamp() encolhe letra e folga conforme a
   tela aperta. "safe center" centraliza quando cabe.

   NO CELULAR ISSO NAO SERVE, e a regra muda logo abaixo (@media 960px).
   O motivo: a lista inteira tem quase 1000px e a tela do celular tem 375.
   Com nowrap, 6 dos 10 segmentos ficavam FORA da tela - e a barra de rolagem
   estava escondida, entao ninguem tinha como saber que dava para arrastar.
   Link que ninguem ve nao serve nem para a pessoa nem para o Google. */
.mapa{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(4px,.62vw,7px);
  justify-content:center;justify-content:safe center;
  padding-bottom:24px;margin-bottom:20px;border-bottom:1px solid var(--borda);
  font-size:clamp(13px,1.2vw,15px);opacity:1;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.mapa::-webkit-scrollbar{display:none}

/* ---------- mapa do rodape no celular e no tablet ----------
   Abaixo de 960px a faixa QUEBRA em varias linhas, centralizada. Os 10
   segmentos aparecem todos de uma vez, sem precisar arrastar nada.
   Os botoes passam de 37px para 46px de altura: 44px e o minimo que a
   norma recomenda para alvo de dedo, e 37 estava abaixo disso. */
@media(max-width:960px){
  .mapa{flex-wrap:wrap;justify-content:center;overflow-x:visible;
    gap:8px;font-size:14px;padding-bottom:22px}
  .mapa a{padding:13px 15px;line-height:1.25}
  /* "Inicio" e "Duvidas" seguem discretos, mas com area de toque igual */
  .mapa a:first-child,.mapa a:last-child{padding:13px 10px}
}
/* A letra continua em 15px (era 12,5px antes de tudo isto). O que encolheu foi
   a FOLGA: 12px nas laterais do botao no lugar de 17, e 7px entre eles no lugar
   de 10. Foi o suficiente para a linha inteira caber com folga - antes ela
   estourava por uns 15px, e era so por causa disso que "Duvidas" caia sozinho
   na linha de baixo. */
.mapa a{color:var(--txt);text-decoration:none;font-weight:600;line-height:1.2;
  display:inline-block;white-space:nowrap;flex:0 0 auto;
  padding:10px clamp(8px,1.05vw,12px);border:1px solid var(--borda);
  border-radius:999px;background:var(--fundo2);
  transition:color .15s,border-color .15s,background .15s,transform .15s}
.mapa a:hover{color:var(--verde-txt);border-color:var(--verde);
  background:var(--verde-fundo);transform:translateY(-2px)}
/* A pagina em que a pessoa esta fica marcada: ver onde se esta e metade de
   saber para onde ir. O atributo aria-current e posto pelo zf.js. */
.mapa a[aria-current="page"]{color:var(--verde-txt);border-color:var(--verde);
  background:var(--verde-fundo)}
.mapa a:first-child,.mapa a:last-child{background:none;border-color:transparent;
  color:var(--muted);font-weight:500;padding:10px 4px}
.mapa a:first-child:hover,.mapa a:last-child:hover{color:var(--verde-txt);transform:none}
.mapa b{font-weight:600}

/* ---------- assinatura do rodape ----------
   "(c) 2026 ZelusFlow" e, logo abaixo, os links obrigatorios
   de Termos de uso e Privacidade, separados por uma barra. */
.assinatura{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.assinatura .legais{font-size:13px}
.assinatura .legais a{color:var(--muted);text-decoration:none}
.assinatura .legais a:hover{color:var(--verde-txt)}
/* ---------- video de demonstracao ----------
   Serve tanto para video em pe (gravacao de celular) quanto deitado: a altura
   e limitada pela tela e a largura acompanha, entao nenhum dos dois estoura.
   "preload=metadata" no HTML: o navegador so busca a duracao, nao o video
   inteiro - quem nao apertar o play nao gasta internet nem espera nada. */
/* Dentro de uma coluna (video ao lado do texto) ele nao precisa do limite de
   760px: quem manda no tamanho passa a ser a propria coluna. */
.videoreal{max-width:760px;margin:0 auto}
.dupla .videoreal{max-width:100%}
.videoreal video{display:block;width:auto;max-width:100%;max-height:70vh;margin:0 auto;
  border-radius:14px;border:1px solid var(--borda);background:#0b1118;
  box-shadow:var(--sombra-3)}
.videoreal figcaption{color:var(--muted);font-size:14px;text-align:center;margin-top:12px;line-height:1.5}
.videoreal figcaption b{color:var(--txt)}

/* Redes sociais do rodape: circulos discretos, so o desenho da marca.
   Ficam abaixo dos links legais, centralizados como o resto da assinatura. */
.redes{display:flex;gap:10px;margin-top:8px}
.redes a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--borda);color:var(--muted);
  transition:color .15s,border-color .15s,transform .15s}
.redes a:hover{color:var(--verde-txt);border-color:var(--verde);transform:translateY(-2px)}
.redes svg{width:17px;height:17px;fill:currentColor}
/* Contato por e-mail: ocupa a terceira coluna do rodape, que antes ficava
   vazia so para o "© 2026" cair no centro. No celular vira mais uma linha. */
.foot .contato{justify-self:end;display:flex;align-items:center;gap:7px;font-size:13.5px}
.foot .contato a{color:var(--muted);text-decoration:none}
.foot .contato a:hover{color:var(--verde-txt)}
.foot .contato svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;color:var(--muted)}
@media(max-width:760px){
  .foot .contato{justify-self:center}
  /* No celular o e-mail e a ultima linha do rodape, entao precisa de mais
     folga do que no computador para nao ficar embaixo do balao. */
  footer{padding-bottom:92px}
  /* Circulos das redes: 34px e alvo pequeno demais para o dedo. No celular
     sobem para 44px, que e o minimo recomendado. O desenho continua do
     mesmo tamanho - quem cresce e a area que aceita o toque. */
  .redes{gap:14px}
  .redes a{width:44px;height:44px}
  /* O e-mail tambem e link: precisa de altura de toque, nao so de texto. */
  .foot .contato{min-height:44px;font-size:15px}
}

/* ---------- captura de tela do sistema ----------
   Prova de que existe e funciona. Vale mais que qualquer texto.
   A sombra e a borda dao o ar de janela de programa. */
.captura{margin-top:20px}
.captura img{width:100%;height:auto;display:block;border-radius:12px;
  border:1px solid var(--borda);box-shadow:var(--sombra-3)}
.captura figcaption{margin:10px 2px 0;font-size:13px;color:var(--muted);text-align:center}
.captura figcaption b{color:var(--verde-txt);font-weight:600}

/* ---------- ilustracao de secao ----------
   Figura que abre uma secao. Nao leva moldura nem sombra de proposito: ela ja
   vem com fundo branco e cartoes desenhados dentro, entao uma borda por fora
   viraria "caixa dentro de caixa". O limite de largura evita que no monitor
   grande ela fique maior que o texto que explica. */
/* Ela nao e a estrela da secao: quem manda sao os cartoes logo abaixo. Por
   isso fica mais estreita que a coluna de texto - grande demais, ela rouba a
   atencao e faz o titulo parecer pequeno. */
.ilustra{margin:0 auto 30px;max-width:560px}
.ilustra img{width:100%;height:auto}
@media(max-width:640px){.ilustra{max-width:340px;margin:0 auto 22px}}