/* ============================================================
   Nebula Code — protótipo V4
   Tokens conforme NebulaCode_Brand_Guideline.pdf (manual oficial):
     Roxo Cósmico #6D28D9 · Azul Profundo #1E40AF · Ciano Vibrante #22D3EE
     Tipografia (as 3 do manual): Orbitron (primária) vive no LOGO, que é imagem;
     Rajdhani (secundária) nos títulos; Exo 2 (alternativa) no corpo.
     A hierarquia vem do contraste de LARGURA (condensada × normal), não de peso alto.
   Nomeados por papel, não por aparência.
   ============================================================ */
:root{
  /* Paleta oficial da marca */
  --marca:#6D28D9;            /* Roxo Cósmico — primária */
  --marca-forte:#1E40AF;      /* Azul Profundo — secundária */
  --marca-suave:#F3EEFE;      /* derivada clara do roxo, para fundos */
  --acento:#22D3EE;           /* Ciano Vibrante — SÓ sobre fundo escuro (1.81:1 no branco) */

  --superficie:#ffffff;
  --superficie-2:#f7f6fc;
  --superficie-escura:#0F1535;
  --superficie-escura-2:#1A1F4A;

  --texto-forte:#101425;
  --texto:#333a52;
  --texto-suave:#5f6982;
  --texto-inverso:#ffffff;
  --texto-inverso-suave:#c3c9ea;

  --linha:#e4e2f0;
  --linha-escura:#2b3166;

  --alerta:#b45309;
  --alerta-fundo:#fef6e7;

  /* Tipografia oficial */
  --fonte-display:"Rajdhani",system-ui,sans-serif;   /* títulos e kicker — Orbitron vive só no logo (imagem) */
  --fonte-corpo:"Exo 2",system-ui,sans-serif;        /* corpo de texto */

  --e1:4px; --e2:8px; --e3:16px; --e4:24px; --e5:40px; --e6:64px; --e7:96px;
  --raio:12px; --raio-g:20px;
  --largura-max:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--superficie);color:var(--texto);
  font-family:var(--fonte-corpo);font-size:17px;font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--marca);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--marca);outline-offset:3px;border-radius:4px}

h1,h2{font-family:var(--fonte-display);color:var(--texto-forte);line-height:1.1;
  letter-spacing:-.01em;margin:0 0 var(--e3)}
h1{font-size:clamp(2.3rem,5vw,3.9rem);font-weight:700}
h2{font-size:clamp(1.75rem,3.3vw,2.6rem);font-weight:700}
h3,h4{font-family:var(--fonte-display);color:var(--texto-forte);line-height:1.22;margin:0 0 var(--e3)}
h3{font-size:1.32rem;font-weight:600;letter-spacing:0}
p{margin:0 0 var(--e3);max-width:68ch}

.pular{position:absolute;left:-9999px;top:0;background:var(--marca);color:#fff;
  padding:var(--e2) var(--e3);z-index:200}
.pular:focus{left:var(--e3);top:var(--e3)}

.env{width:min(var(--largura-max),100% - 32px);margin-inline:auto}
section{padding-block:var(--e7)}
@media(max-width:700px){section{padding-block:var(--e6)}}

.escura{background:var(--superficie-escura);color:var(--texto-inverso-suave)}
.escura h2,.escura h3,.escura h1{color:var(--texto-inverso)}
.clara-2{background:var(--superficie-2)}

.kicker{font-family:var(--fonte-display);max-width:none;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--marca);margin-bottom:var(--e2)}
.escura .kicker{color:var(--acento)} /* ciano so em fundo escuro: 1.81:1 no branco reprova */
.lead{font-size:1.12rem;font-weight:400;color:var(--texto-suave);max-width:62ch}
.escura .lead{color:var(--texto-inverso-suave)}

/* ---------- Botões: um estilo por papel ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--e2);font-family:var(--fonte-corpo);
  font-weight:600;font-size:1rem;letter-spacing:.005em;padding:14px 26px;border-radius:var(--raio);
  border:2px solid transparent;cursor:pointer;transition:transform .15s,background .15s;
  text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primario{background:var(--marca);color:#fff}
.btn-primario:hover{background:var(--marca-forte);color:#fff}
.btn-secundario{background:transparent;color:var(--marca);border-color:var(--linha)}
.escura .btn-secundario{color:var(--texto-inverso);border-color:var(--linha-escura)}

/* ---------- Topo ---------- */
.topo{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--linha)}
.topo .env{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e4);min-height:112px;padding-block:var(--e2)}
.marca{display:inline-flex;align-items:center;flex:none}
.marca:hover{text-decoration:none;opacity:.85}
/* Manual de marca: margem minima de 16px ao redor do logotipo */
.marca-img{height:78px;width:auto;padding:0 var(--e3);box-sizing:content-box}
.rodape .marca-img{height:62px;padding-left:0}
@media(max-width:700px){.marca-img{height:52px;padding-left:0}
  .rodape .marca-img{height:58px}}
.menu{display:flex;gap:var(--e4);list-style:none;margin:0;padding:0}
.menu a{color:var(--texto);font-weight:500;font-size:1rem}
.menu a:hover{color:var(--marca)}
.abre-menu{display:none;background:none;border:1px solid var(--linha);
  border-radius:var(--raio);padding:10px 14px;font-size:1.1rem;cursor:pointer}
@media(max-width:960px){
  .menu,.topo .btn{display:none}
  .abre-menu{display:block}
  .menu.aberto{display:flex;position:absolute;inset:112px 0 auto;flex-direction:column;
    background:var(--superficie);padding:var(--e3);gap:var(--e3);
    border-bottom:1px solid var(--linha)}
}

/* ---------- Hero ---------- */
.hero{padding-block:var(--e7) var(--e6);background:
  radial-gradient(ellipse 70% 90% at 82% -10%,var(--marca-suave),transparent 65%)}
.hero h1 em{font-style:normal;color:var(--marca);display:block}
.hero-acoes{display:flex;gap:var(--e3);flex-wrap:wrap;margin-top:var(--e5)}

/* ---------- Faixa de confiança ---------- */
.confianca{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--linha);border:1px solid var(--linha);
  border-radius:var(--raio-g);overflow:hidden;margin-top:var(--e6)}
.confianca div{background:var(--superficie);padding:var(--e4)}
.confianca strong{display:block;font-family:var(--fonte-display);font-weight:600;font-size:1.22rem;
  color:var(--texto-forte);margin-bottom:var(--e1)}
.confianca span{font-size:.88rem;color:var(--texto-suave)}

/* ---------- Grades ---------- */
.grade-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e4)}
.grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4)}
.cabeca{max-width:760px;margin-bottom:var(--e5)}
.cabeca-centro{text-align:center;margin-inline:auto}
/* Dentro de um cabeçalho centralizado, todo filho centraliza no MESMO eixo */
.cabeca-centro > *{margin-inline:auto}
.cabeca-centro .lead,.cabeca-centro p{max-width:62ch}

.cartao{background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--raio-g);padding:var(--e4)}
.escura .cartao{background:var(--superficie-escura-2);border-color:var(--linha-escura)}
.cartao p{font-size:.97rem;margin-bottom:0;color:var(--texto-suave)}
.escura .cartao p{color:var(--texto-inverso-suave)}

/* ---------- Produtos ---------- */
.produto{display:flex;flex-direction:column;gap:var(--e2);
  border:1px solid var(--linha);border-radius:var(--raio-g);padding:var(--e4);
  background:var(--superficie);transition:border-color .15s,transform .15s}
.produto:hover{border-color:var(--marca);transform:translateY(-3px)}
.produto h3{margin-bottom:var(--e1)}
.selo{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 10px;border-radius:99px;
  background:var(--marca-suave);color:var(--marca-forte)}
.selo-operacao{background:#e6f9f4;color:#0f766e}
.produto-lista{list-style:none;padding:0;margin:var(--e2) 0 0;font-size:.92rem;
  color:var(--texto-suave)}
.produto-lista li{padding-left:18px;position:relative;margin-bottom:6px}
.produto-lista li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--acento)}

/* ---------- Método ---------- */
.passos{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--linha-escura);border-radius:var(--raio-g);overflow:hidden}
.passo{background:var(--superficie-escura-2);padding:var(--e4)}
.passo i{font-style:normal;color:var(--acento);font-weight:700;font-size:.85rem}
.passo b{display:block;margin:var(--e3) 0 var(--e1);color:var(--texto-inverso)}
.passo span{font-size:.88rem}

/* ---------- Depoimentos ---------- */
.depo{border:1px solid var(--linha);border-radius:var(--raio-g);padding:var(--e4);
  background:var(--superficie);display:flex;flex-direction:column}
.depo blockquote{margin:0 0 var(--e4);font-size:1rem;color:var(--texto)}
.depo figcaption{margin-top:auto;font-size:.88rem;color:var(--texto-suave)}
.depo figcaption b{display:block;color:var(--texto-forte);font-weight:600;font-size:1rem}

/* ---------- Marcador de informação ausente ---------- */
.falta{display:block;background:var(--alerta-fundo);border:1px dashed var(--alerta);
  color:var(--alerta);border-radius:var(--raio);padding:var(--e2) var(--e3);
  font-size:.85rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  margin-block:var(--e2)}

/* ---------- CTA final ---------- */
.cta{background:var(--marca-forte);border-radius:var(--raio-g);
  padding:var(--e6) var(--e5);color:#fff;text-align:center}
.cta h2{color:#fff;margin-bottom:var(--e3)}
.cta p{color:var(--texto-inverso-suave);margin-inline:auto;max-width:78ch}
.cta .btn-primario{background:#fff;color:var(--marca-forte);margin-top:var(--e4)}
.cta .btn-primario:hover{background:var(--marca-suave);color:var(--marca-forte)}

/* ---------- Rodapé ---------- */
.rodape{background:var(--superficie-escura);color:var(--texto-inverso-suave);
  padding-block:var(--e6) var(--e4);font-size:.95rem}
.rodape h4{color:var(--texto-inverso);font-size:.86rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:var(--e3)}
.rodape ul{list-style:none;padding:0;margin:0}
.rodape li{margin-bottom:10px}
.rodape a{color:var(--texto-inverso-suave)}
.rodape a:hover{color:#fff}
.rodape-fim{margin-top:var(--e5);padding-top:var(--e4);
  border-top:1px solid var(--linha-escura);display:flex;justify-content:space-between;
  gap:var(--e3);flex-wrap:wrap;font-size:.85rem}

@media(max-width:900px){
  .grade-3,.grade-2,.confianca,.passos{grid-template-columns:1fr}
  .confianca,.passos{border-radius:var(--raio)}
}
@media(min-width:701px) and (max-width:900px){
  .grade-3,.grade-2,.confianca{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Linhagem da marca: 4 marcos com logotipo ---------- */
.linhagem{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e4);
  position:relative;margin-top:var(--e5);list-style:none;padding:0}
.linhagem::before{content:"";position:absolute;left:12.5%;right:12.5%;top:13px;height:2px;
  background:linear-gradient(90deg,var(--linha),var(--marca));z-index:0}
.elo{position:relative;z-index:1;text-align:center}
.elo-ponto{width:26px;height:26px;border-radius:50%;margin:0 auto var(--e4);
  background:var(--superficie-2);border:2px solid var(--linha);display:grid;place-items:center}
.elo-atual .elo-ponto{background:var(--marca);border-color:var(--marca)}
.elo-atual .elo-ponto::after{content:"";width:9px;height:9px;border-radius:50%;background:#fff}

/* o logotipo é a prova visual da era — altura uniforme, largura livre */
.elo-logo{height:40px;width:auto;max-width:100%;object-fit:contain;
  display:block;margin:0 auto var(--e3);
  filter:grayscale(1) opacity(.45);transition:filter .25s,opacity .25s}
.elo:hover .elo-logo{filter:grayscale(0) opacity(1)}
.elo-atual .elo-logo{filter:none}

.elo .ano{display:block;font-family:var(--fonte-display);font-size:.82rem;font-weight:700;
  color:var(--marca);letter-spacing:.08em}
.elo b{display:block;font-family:var(--fonte-display);font-weight:600;
  color:var(--texto-forte);font-size:1.12rem;margin-top:2px}
.elo .nota{display:block;font-size:.92rem;color:var(--texto-suave);margin-top:var(--e2)}

@media(max-width:900px){
  .linhagem{grid-template-columns:repeat(2,1fr);gap:var(--e5) var(--e4)}
  .linhagem::before{display:none}
}
@media(max-width:560px){
  .linhagem{grid-template-columns:1fr}
  .elo{display:grid;grid-template-columns:26px 1fr;gap:var(--e3);text-align:left;align-items:start}
  .elo-ponto{margin:0}
  .elo-logo{margin-left:0}
}

/* ---------- Ícones oficiais do site (flaticon_mycollection) ---------- */
@font-face{
  font-family:"flaticon_mycollection";
  src:url("../fonts/flaticon_mycollection.woff2") format("woff2"),
      url("../fonts/flaticon_mycollection.woff") format("woff");
  font-display:swap;
}
[class^="flaticon-"],[class*=" flaticon-"]{
  font-family:"flaticon_mycollection"!important;
  font-style:normal;font-weight:normal;line-height:1;
  -webkit-font-smoothing:antialiased;
}
.flaticon-ip-address:before{content:"\f11a"}
.flaticon-email-2:before{content:"\f113"}
.flaticon-phone-call:before{content:"\f10d"}
.flaticon-facebook-app-symbol:before{content:"\f101"}
.flaticon-instagram:before{content:"\f103"}
.flaticon-linkedin:before{content:"\f105"}
.flaticon-whatsapp:before{content:"\f109"}

@media(max-width:560px){
  .produto-topo{flex-wrap:wrap;gap:var(--e2);min-height:0}
  .produto-logo{height:46px;max-width:160px}
}


/* ---------- Insights, Cases e Contato ---------- */
.sr-apenas{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.chips{display:flex;gap:var(--e2);flex-wrap:wrap;margin-bottom:var(--e5)}
.chip{font-family:var(--fonte-corpo);font-size:.95rem;font-weight:500;padding:9px 18px;
  border-radius:999px;border:1px solid var(--linha);background:var(--superficie);
  color:var(--texto-suave);cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--marca);color:var(--marca)}
.chip.ativo{background:var(--marca);border-color:var(--marca);color:#fff}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4)}
.post{border:1px solid var(--linha);border-radius:var(--raio-g);overflow:hidden;
  background:var(--superficie);display:flex;flex-direction:column;transition:.15s}
.post:hover{border-color:var(--marca);transform:translateY(-3px)}
.post-img{width:100%;height:180px;object-fit:cover;display:block}
.post-img-vazia{background:linear-gradient(135deg,var(--marca-suave),#e8f6fb)}
.post-corpo{padding:var(--e4);display:flex;flex-direction:column;gap:var(--e2)}
.post-meta{font-size:.85rem;color:var(--texto-suave);margin:0}
.post-tema{color:var(--marca);font-weight:600}
.post-corpo h3{margin:0}
.post-corpo p:last-child{margin:0;font-size:.97rem;color:var(--texto-suave)}

.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4)}
.case{border:1px solid var(--linha);border-radius:var(--raio-g);overflow:hidden;
  background:var(--superficie);display:flex;flex-direction:column;transition:.15s}
.case:hover{border-color:var(--marca);transform:translateY(-3px)}
.case-img{width:100%;height:150px;object-fit:contain;background:var(--superficie-2);
  padding:var(--e3);display:block}
.case-img-vazia{height:150px;background:linear-gradient(135deg,var(--marca-suave),#e8f6fb)}
.case-corpo{padding:var(--e4);display:flex;flex-direction:column;gap:var(--e1)}
.case-corpo h3{margin:0}
.case-corpo p:last-child{margin:0;font-size:.97rem;color:var(--texto-suave)}

.contato-bloco{margin-bottom:var(--e4)}
.contato-rotulo{font-family:var(--fonte-display);font-size:.8rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--texto-suave);margin:0 0 var(--e1)}
.contato-valor{margin:0;font-size:1.05rem;color:var(--texto-forte)}

.form{display:flex;flex-direction:column;gap:var(--e3);max-width:520px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:.95rem;font-weight:600;color:var(--texto-forte)}
.campo input,.campo textarea{font-family:var(--fonte-corpo);font-size:1rem;
  padding:12px 14px;border:1px solid var(--linha);border-radius:var(--raio);
  background:var(--superficie);color:var(--texto)}
.campo input:focus,.campo textarea:focus{outline:3px solid var(--marca);outline-offset:2px;
  border-color:var(--marca)}
.form .btn{align-self:flex-start}
.form-retorno{font-size:.95rem;color:var(--marca-forte)}

@media(max-width:900px){.posts,.cases{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.posts,.cases{grid-template-columns:1fr}}

/* Colunas de navegação alinhadas à direita: fecham a moldura do rodapé,
   já que os rótulos são curtos e deixavam vazio à direita. */

/* ---------- Documento legal (termos, políticas) ---------- */
.documento{max-width:76ch}
.documento h2{font-size:1.25rem;margin-top:var(--e5);margin-bottom:var(--e2);
  padding-top:var(--e3);border-top:1px solid var(--linha)}
.documento h2:first-child{margin-top:0;padding-top:0;border-top:0}
.documento p{font-size:1rem;color:var(--texto);margin-bottom:var(--e3)}
.documento ul,.documento ol{margin:0 0 var(--e3);padding-left:22px;color:var(--texto)}
.documento li{margin-bottom:var(--e2);font-size:1rem}
.documento b,.documento strong{color:var(--texto-forte);font-weight:600}
.documento a{text-decoration:underline}

/* ---------- Documento legal com índice lateral ---------- */
.doc-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--e6);
  align-items:start}
.doc-indice{position:sticky;top:130px;border-left:2px solid var(--linha);
  padding-left:var(--e4);max-height:calc(100vh - 170px);overflow-y:auto}
.doc-indice-titulo{font-family:var(--fonte-display);font-size:.78rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave);
  margin:0 0 var(--e3)}
.doc-indice ol{list-style:none;margin:0;padding:0;counter-reset:sec}
.doc-indice li{margin-bottom:10px;line-height:1.35}
.doc-indice a{font-size:.9rem;color:var(--texto-suave);text-decoration:none;display:block}
.doc-indice a:hover,.doc-indice a:focus-visible{color:var(--marca)}
.doc-indice a.ativo{color:var(--marca);font-weight:600}
/* h1 do documento nao precisa quebrar em 2 linhas */
.doc-hero h1 em{display:inline}
.doc-hero h1{max-width:24ch;text-wrap:balance}
@media(max-width:1080px){
  .doc-grid{grid-template-columns:1fr}
  .doc-indice{position:static;max-height:none;border-left:0;padding-left:0;
    border-top:1px solid var(--linha);padding-top:var(--e4);margin-top:var(--e5)}
  .doc-indice ol{columns:2;column-gap:var(--e4)}
}
@media(max-width:560px){.doc-indice ol{columns:1}}

/* ============================================================
   Rodapé — duas faixas.
   Faixa 1: marca (esquerda) + contato (direita).
   Faixa 2: navegação em linha única.
   Sem colunas de largura arbitrária e com um só eixo por faixa.
   ============================================================ */
.rodape-topo{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--e5) var(--e6)}
.rodape-marca{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e4);
  flex:1 1 auto;min-width:0}
/* O PNG do logo tem ~11,3% de margem transparente à esquerda (medido: x=56 de 496).
   Endereço e redes recebem o mesmo recuo para alinhar com o desenho, não com a borda
   do arquivo. Valor = largura renderizada (170px) x 56/496. */
.rodape-marca > .rodape-contato,
.rodape-marca > .redes{margin-left:19px}

.rodape-contato{font-style:normal;max-width:none}
.rodape-contato p{margin:0 0 6px;font-size:.92rem;line-height:1.6;max-width:none;
  color:var(--texto-inverso-suave)}
.rodape-contato p:last-child{margin-bottom:0}
.rodape-contato a{color:var(--texto-inverso)}
.rodape-contato i{color:var(--acento);font-size:.8rem;margin-right:5px}
.rodape-contato .sep{margin:0 8px;opacity:.45}

.redes{display:flex;gap:var(--e2)}

.rodape-legal{flex:0 0 auto;text-align:right;min-width:0;
  /* começa na linha do endereço, não na do logo: altura do logo + gap da coluna */
  margin-top:calc(62px + var(--e4))}
.rodape-legal h4{color:var(--texto-inverso);font-size:.8rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;margin:0 0 var(--e3);
  font-family:var(--fonte-display)}
.rodape-legal ul{list-style:none;margin:0;padding:0}
.rodape-legal li{margin-bottom:10px}
.rodape-legal a{font-size:.92rem;color:var(--texto-inverso-suave)}
.rodape-legal a:hover{color:#fff}

.rodape-fim{margin-top:var(--e5);padding-top:var(--e4);
  border-top:1px solid var(--linha-escura);display:flex;justify-content:space-between;
  gap:var(--e3);flex-wrap:wrap;font-size:.85rem}

@media(max-width:900px){
  .grade-3,.grade-2,.confianca,.passos{grid-template-columns:1fr}
  .confianca,.passos{border-radius:var(--raio)}
}
@media(min-width:701px) and (max-width:900px){
  .grade-3,.grade-2,.confianca{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Logos de produto e screenshots (assets oficiais) ---------- */
/* Cabeçalho do card: logo à esquerda, selo à direita, na mesma linha */
.produto-topo{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3);margin-bottom:var(--e4);min-height:56px}
.produto-logo{height:56px;width:auto;max-width:190px;object-fit:contain;
  object-position:left center;flex:0 1 auto}
.produto-topo .selo{margin:0;flex:none;align-self:center}
.escura .produto-logo{filter:brightness(0) invert(1)}
.produto-tela{width:100%;border:1px solid var(--linha);border-radius:var(--raio);
  margin-top:var(--e3);display:block}
.produto-figura{margin:0}
.produto-figura figcaption{font-size:.88rem;color:var(--texto-suave);margin-top:var(--e2)}

/* ---------- Rodapé: blocos de contato e redes ---------- */
.redes a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid var(--linha-escura);
  color:var(--texto-inverso);transition:background .15s,border-color .15s}
.redes a svg{display:block}
.redes a:hover{background:var(--marca);border-color:var(--marca);text-decoration:none}

/* ---------- Ícones oficiais do site (flaticon_mycollection) ---------- */
@font-face{
  font-family:"flaticon_mycollection";
  src:url("../fonts/flaticon_mycollection.woff2") format("woff2"),
      url("../fonts/flaticon_mycollection.woff") format("woff");
  font-display:swap;
}
[class^="flaticon-"],[class*=" flaticon-"]{
  font-family:"flaticon_mycollection"!important;
  font-style:normal;font-weight:normal;line-height:1;
  -webkit-font-smoothing:antialiased;
}
.flaticon-ip-address:before{content:"\f11a"}
.flaticon-email-2:before{content:"\f113"}
.flaticon-phone-call:before{content:"\f10d"}
.flaticon-facebook-app-symbol:before{content:"\f101"}
.flaticon-instagram:before{content:"\f103"}
.flaticon-linkedin:before{content:"\f105"}
.flaticon-whatsapp:before{content:"\f109"}

@media(max-width:560px){
  .produto-topo{flex-wrap:wrap;gap:var(--e2);min-height:0}
  .produto-logo{height:46px;max-width:160px}
}


/* ---------- Insights, Cases e Contato ---------- */
.sr-apenas{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.chips{display:flex;gap:var(--e2);flex-wrap:wrap;margin-bottom:var(--e5)}
.chip{font-family:var(--fonte-corpo);font-size:.95rem;font-weight:500;padding:9px 18px;
  border-radius:999px;border:1px solid var(--linha);background:var(--superficie);
  color:var(--texto-suave);cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--marca);color:var(--marca)}
.chip.ativo{background:var(--marca);border-color:var(--marca);color:#fff}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4)}
.post{border:1px solid var(--linha);border-radius:var(--raio-g);overflow:hidden;
  background:var(--superficie);display:flex;flex-direction:column;transition:.15s}
.post:hover{border-color:var(--marca);transform:translateY(-3px)}
.post-img{width:100%;height:180px;object-fit:cover;display:block}
.post-img-vazia{background:linear-gradient(135deg,var(--marca-suave),#e8f6fb)}
.post-corpo{padding:var(--e4);display:flex;flex-direction:column;gap:var(--e2)}
.post-meta{font-size:.85rem;color:var(--texto-suave);margin:0}
.post-tema{color:var(--marca);font-weight:600}
.post-corpo h3{margin:0}
.post-corpo p:last-child{margin:0;font-size:.97rem;color:var(--texto-suave)}

.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4)}
.case{border:1px solid var(--linha);border-radius:var(--raio-g);overflow:hidden;
  background:var(--superficie);display:flex;flex-direction:column;transition:.15s}
.case:hover{border-color:var(--marca);transform:translateY(-3px)}
.case-img{width:100%;height:150px;object-fit:contain;background:var(--superficie-2);
  padding:var(--e3);display:block}
.case-img-vazia{height:150px;background:linear-gradient(135deg,var(--marca-suave),#e8f6fb)}
.case-corpo{padding:var(--e4);display:flex;flex-direction:column;gap:var(--e1)}
.case-corpo h3{margin:0}
.case-corpo p:last-child{margin:0;font-size:.97rem;color:var(--texto-suave)}

.contato-bloco{margin-bottom:var(--e4)}
.contato-rotulo{font-family:var(--fonte-display);font-size:.8rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--texto-suave);margin:0 0 var(--e1)}
.contato-valor{margin:0;font-size:1.05rem;color:var(--texto-forte)}

.form{display:flex;flex-direction:column;gap:var(--e3);max-width:520px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:.95rem;font-weight:600;color:var(--texto-forte)}
.campo input,.campo textarea{font-family:var(--fonte-corpo);font-size:1rem;
  padding:12px 14px;border:1px solid var(--linha);border-radius:var(--raio);
  background:var(--superficie);color:var(--texto)}
.campo input:focus,.campo textarea:focus{outline:3px solid var(--marca);outline-offset:2px;
  border-color:var(--marca)}
.form .btn{align-self:flex-start}
.form-retorno{font-size:.95rem;color:var(--marca-forte)}

@media(max-width:900px){.posts,.cases{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.posts,.cases{grid-template-columns:1fr}}

/* Colunas de navegação alinhadas à direita: fecham a moldura do rodapé,
   já que os rótulos são curtos e deixavam vazio à direita. */

/* ---------- Documento legal (termos, políticas) ---------- */
.documento{max-width:76ch}
.documento h2{font-size:1.25rem;margin-top:var(--e5);margin-bottom:var(--e2);
  padding-top:var(--e3);border-top:1px solid var(--linha)}
.documento h2:first-child{margin-top:0;padding-top:0;border-top:0}
.documento p{font-size:1rem;color:var(--texto);margin-bottom:var(--e3)}
.documento ul,.documento ol{margin:0 0 var(--e3);padding-left:22px;color:var(--texto)}
.documento li{margin-bottom:var(--e2);font-size:1rem}
.documento b,.documento strong{color:var(--texto-forte);font-weight:600}
.documento a{text-decoration:underline}

/* ---------- Documento legal com índice lateral ---------- */
.doc-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--e6);
  align-items:start}
.doc-indice{position:sticky;top:130px;border-left:2px solid var(--linha);
  padding-left:var(--e4);max-height:calc(100vh - 170px);overflow-y:auto}
.doc-indice-titulo{font-family:var(--fonte-display);font-size:.78rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave);
  margin:0 0 var(--e3)}
.doc-indice ol{list-style:none;margin:0;padding:0;counter-reset:sec}
.doc-indice li{margin-bottom:10px;line-height:1.35}
.doc-indice a{font-size:.9rem;color:var(--texto-suave);text-decoration:none;display:block}
.doc-indice a:hover,.doc-indice a:focus-visible{color:var(--marca)}
.doc-indice a.ativo{color:var(--marca);font-weight:600}
/* h1 do documento nao precisa quebrar em 2 linhas */
.doc-hero h1 em{display:inline}
.doc-hero h1{max-width:24ch;text-wrap:balance}
@media(max-width:1080px){
  .doc-grid{grid-template-columns:1fr}
  .doc-indice{position:static;max-height:none;border-left:0;padding-left:0;
    border-top:1px solid var(--linha);padding-top:var(--e4);margin-top:var(--e5)}
  .doc-indice ol{columns:2;column-gap:var(--e4)}
}
@media(max-width:560px){.doc-indice ol{columns:1}}

/* ============================================================
   Rodapé — duas faixas.
   Faixa 1: marca (esquerda) + contato (direita).
   Faixa 2: navegação em linha única.
   Sem colunas de largura arbitrária e com um só eixo por faixa.
   ============================================================ */


/* Itens de grid/flex não podem estourar o container no mobile:
   o padrão min-width:auto impede o encolhimento abaixo do conteúdo. */
.grade-2 > *,.grade-3 > *,.confianca > *,.passos > *,
.posts > *,.cases > *,.doc-grid > *{min-width:0}
.cartao,.produto,.post,.case,.confianca div,.passo{overflow-wrap:break-word}

@media(max-width:820px){
  .rodape-topo{flex-direction:column;gap:var(--e5)}
  .rodape-legal{text-align:left;margin-top:0}
  .rodape-contato .sep{display:none}
  .rodape-contato p i:not(:first-child){display:block;margin-top:6px}
}

/* ============================================================
   Hero da Home — fundo escuro.
   A arte foi criada sobre navy: o brilho dos nós depende desse fundo.
   Em vez de recortar a imagem (que apaga o glow), o hero inteiro assume
   o escuro e a imagem sangra até a borda direita, sem máscara.
   ============================================================ */
.hero-home{position:relative;overflow:hidden;background:var(--superficie-escura);
  padding-block:var(--e7)}
.hero-home > .env{position:relative;z-index:2}

.hero-visual{
  position:absolute;right:0;top:0;height:100%;width:62%;
  object-fit:cover;object-position:left center;
  z-index:0;pointer-events:none;
  /* dissolve só na borda esquerda, para o texto respirar */
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 22%,#000 55%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 22%,#000 55%);
}

/* texto invertido */
.hero-home h1{color:var(--texto-inverso)}
.hero-home h1 em{color:#a78bfa}          /* roxo claro: 7.0:1 sobre #0F1535 */
.hero-home .kicker{color:var(--acento)}
.hero-home .lead{color:var(--texto-inverso-suave);max-width:52ch}
.hero-home .btn-secundario{color:var(--texto-inverso);border-color:var(--linha-escura)}
.hero-home .btn-secundario:hover{border-color:var(--acento);color:var(--acento)}

/* faixa de confiança dentro do hero escuro */
.hero-home .confianca{background:var(--linha-escura);border-color:var(--linha-escura)}
.hero-home .confianca div{background:var(--superficie-escura-2)}
.hero-home .confianca strong{color:var(--texto-inverso)}
.hero-home .confianca span{color:var(--texto-inverso-suave)}

@media(max-width:1100px){.hero-visual{width:70%;opacity:.7}
  .hero-home .lead{max-width:none}}
@media(max-width:820px){
  .hero-visual{width:100%;opacity:.28;
    -webkit-mask-image:none;mask-image:none}
}

/* ---------- Ícones da seção de problema ---------- */
.cartao-icone{display:flex;flex-direction:column}
/* ícone e título lado a lado: o título ocupa o vazio à direita do ícone */
.cartao-topo{display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e3)}
.cartao-topo h3{margin:0}
.icone-problema{width:76px;height:76px;object-fit:contain;display:block;flex:none;
  margin-left:-6px}
@media(max-width:560px){.icone-problema{width:64px;height:64px}}

/* Cabeçalho que precisa de mais largura para o título não quebrar */
.cabeca-larga{max-width:1100px}
.cabeca-larga .lead{max-width:none}

/* ============================================================
   Serviços — as 6 frentes agrupadas pelas 3 etapas do ciclo.
   Layout horizontal (ícone + texto), não grade de cards: a
   estrutura em etapas é o que diferencia esta seção da anterior.
   ============================================================ */
.secao-servicos .cabeca-larga{margin-bottom:var(--e5)}

.etapas{display:flex;flex-direction:column;gap:var(--e5)}

.etapa{display:grid;grid-template-columns:240px 1fr;gap:var(--e5);align-items:start;
  padding-block:0}
.etapa + .etapa{padding-top:var(--e5);border-top:1px solid var(--linha-escura)}

.etapa-cabeca{position:static}
.etapa-num{display:block;font-family:var(--fonte-display);font-size:.85rem;font-weight:700;
  letter-spacing:.14em;color:var(--acento);margin-bottom:var(--e2)}
.etapa-cabeca h3{color:var(--texto-inverso);font-size:1.45rem;margin:0 0 var(--e2)}
.etapa-cabeca p{font-size:.95rem;color:var(--texto-inverso-suave);margin:0;max-width:30ch}

.etapa-itens{display:flex;flex-direction:column;gap:var(--e3)}

.servico{display:flex;gap:var(--e4);align-items:center;
  background:var(--superficie-escura-2);border:1px solid var(--linha-escura);
  border-radius:var(--raio-g);padding:var(--e4);transition:border-color .2s,transform .2s}
.servico:hover{border-color:var(--marca);transform:translateX(4px)}
.servico img{width:104px;height:104px;object-fit:contain;flex:none;
  align-self:center}
.servico h4{color:var(--texto-inverso);font-size:1.15rem;margin:0 0 6px}
.servico p{font-size:.97rem;color:var(--texto-inverso-suave);margin:0;max-width:62ch}
.servico .quando{margin-top:var(--e2);font-size:.9rem;color:var(--acento)}

.servicos-cta{margin-top:var(--e5);text-align:right;max-width:none}
.servicos-cta a{color:var(--texto-inverso)}
.servicos-cta a:hover{color:var(--acento)}

@media(max-width:900px){
  .etapa{grid-template-columns:1fr;gap:var(--e4)}
  .etapa-cabeca{position:static}
  .etapa-cabeca p{max-width:none}
  .servicos-cta{text-align:left}
}
@media(max-width:560px){
  .servico{flex-direction:column;align-items:flex-start;gap:var(--e3)}
  .servico img{width:84px;height:84px}
}

/* ===== BLOCO DE OPERACAO + METODO ==========================================
   As duas secoes escuras formam UM bloco continuo com uma unica imagem de
   fundo. O veu escuro por cima garante o contraste do texto independente da
   arte; sem ele a legibilidade ficaria refem da luminancia da imagem.       */
.bloco-operacao{position:relative;isolation:isolate;background:var(--superficie-escura)}
.bloco-operacao::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:
    /* veu: mais opaco a esquerda/centro, onde vive o texto */
    linear-gradient(100deg,
      rgba(15,21,53,.86) 0%,
      rgba(15,21,53,.84) 42%,
      rgba(15,21,53,.80) 72%,
      rgba(15,21,53,.78) 100%),
    url("../img/fundo-operacao.jpg");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
}
/* as secoes ficam acima do veu e perdem o fundo chapado proprio,
   senao tapariam a imagem */
.bloco-operacao > .escura-sobre-fundo{position:relative;z-index:1;background:transparent}

/* achatamento vertical: o par ocupava mais que uma tela inteira em molduras */
.bloco-operacao > .escura-sobre-fundo{padding-block:var(--e6) 0}      /* 64px topo */
.bloco-operacao > .secao-metodo{padding-block:var(--e5) var(--e6)}    /* 40px / 64px */
.bloco-operacao .cabeca{margin-bottom:var(--e4)}                      /* 40px -> 24px */
/* leads usam a faixa inteira para nao quebrar em linhas curtas.
   linha fica longa (~140 caracteres), aceito por serem textos de apoio
   de 1-2 linhas, nao corpo de leitura continua. */
.bloco-operacao .cabeca,
.bloco-operacao .cabeca-larga{max-width:none}
.bloco-operacao .cabeca .lead,
.bloco-operacao .cabeca-larga .lead{max-width:none}

@media(max-width:700px){
  .bloco-operacao > .escura-sobre-fundo{padding-block:var(--e5) 0}
  .bloco-operacao > .secao-metodo{padding-block:var(--e4) var(--e5)}
}

/* ===== CASES: logo do cliente no cartao ===================================
   Os 6 logos tem proporcoes muito diferentes (0.85 a 4.57). Caixa de ALTURA
   fixa + object-fit:contain normaliza opticamente: cada um ocupa a altura ou
   a largura, o que vier primeiro, e todos ficam com peso visual comparavel.
   Sem isso, o Tecsidel (4.57) apareceria como um fio e o ASTS (0.85) dominaria. */
.case-cartao{display:flex;flex-direction:column}
/* arquivos em img/cases/recortados/ ja vem SEM a margem branca do original,
   entao a altura da caixa controla o tamanho real do logo. Os originais em
   img/cases/ seguem intactos para a pagina cases.html. */
.case-logo{
  /* o cartao e flex-column: sem align-self o stretch estica a caixa da imagem
     para a largura toda e o logo desalinha do texto */
  align-self:flex-start;
  /* sem <h3> o logo identifica sozinho o cliente, entao ganha mais presenca */
  height:42px;width:auto;max-width:100%;
  object-fit:contain;object-position:left center;
  margin-bottom:var(--e3);
  mix-blend-mode:multiply;   /* funde o fundo branco do logo com o cartao */
}
/* logos largos (Tecsidel 4.2, Resource 3.5, Isban 3.4) ficariam gigantes em
   largura com a mesma altura dos quadrados; limitar a largura os equaliza */
.case-logo[width="407"],.case-logo[width="340"],.case-logo[width="328"],
.case-logo[width="391"],.case-logo[width="529"]{max-width:176px}
/* logos verticais/quadrados (ASTS 0.86, Editora 0.90, Renovias 1.33) ficam
   pequenos com a altura dos horizontais; mais altura os equaliza opticamente */
.case-logo[width="128"]{height:56px}
/* ASTS e Editora Tres sao simbolos compactos: precisam de mais altura para
   ter o mesmo peso optico dos logotipos horizontais */
.case-logo[width="83"],.case-logo[width="86"]{height:68px}
@media(max-width:560px){.case-logo{height:36px}
  .case-logo[width="128"]{height:48px}
  .case-logo[width="83"],.case-logo[width="86"]{height:56px}}

/* Editora Tres: o simbolo grafico nao identifica a empresa sozinho,
   entao o nome acompanha o logo na mesma linha */
.case-marca{display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e3)}
.case-marca .case-logo{margin-bottom:0}
.case-marca b{font-family:var(--fonte-display);font-size:1.15rem;
  font-weight:600;color:var(--texto-forte);line-height:1.2}

/* ===== DEPOIMENTOS ========================================================
   O depoimento e a voz de outra pessoa: a frase-chave vem primeiro, em corpo
   maior, e o restante fica como contexto. Sem foto - o original usava retratos
   de banco de imagens que nao correspondiam aos depoentes reais; o logo do
   cliente identifica com honestidade e amarra com a secao de Cases. */
.depo{position:relative;background:var(--superficie)}
.depo blockquote{margin:0 0 var(--e4);padding-top:var(--e4)}
/* aspa tipografica como elemento grafico, nao como texto lido */
.depo blockquote::before{
  content:"\201C";position:absolute;top:2px;left:var(--e4);
  font-family:var(--fonte-display);font-size:4.2rem;line-height:1;
  color:var(--marca);opacity:.22;pointer-events:none}
.depo-chave{font-size:1.12rem;line-height:1.45;color:var(--texto-forte);
  font-weight:500;margin-bottom:var(--e3);max-width:none}
.depo-resto{font-size:.95rem;color:var(--texto-suave);margin-bottom:0;max-width:none}

/* logo ACIMA da assinatura: lado a lado, o logo horizontal (104px) deixava
   so 134px para o nome e o cargo quebrava em 5 linhas */
.depo figcaption{display:block;margin-top:auto;
  padding-top:var(--e3);border-top:1px solid var(--linha)}
.depo-logo{height:28px;width:auto;max-width:120px;margin-bottom:var(--e2);
  object-fit:contain;object-position:left center;mix-blend-mode:multiply}
/* ASTS e vertical: mesma altura dos horizontais o deixaria minusculo */
.depo-logo[width="83"]{height:40px;max-width:40px}
@media(max-width:900px){.depo blockquote::before{font-size:3.4rem}}

/* cabecalho dos depoimentos usa a faixa inteira: com 760px/62ch o lead
   quebrava em 2 linhas sobrando ~530px vazios a direita */
section[aria-labelledby="t-depo"] .cabeca,
section[aria-labelledby="t-depo"] .cabeca .lead{max-width:none}

/* ===== INSIGHTS ==========================================================
   Reusa .posts/.post da pagina insights.html (mesma linguagem visual).
   Os cards NAO sao links: ainda nao existem paginas individuais de post
   (so titulo, imagem e resumo). Criar href agora levaria a 404. */
#insights .cabeca,#insights .cabeca .lead{max-width:none}
.insights-cta{margin-top:var(--e5);text-align:right;max-width:none}

/* ===== INSIGHTS: fundo escuro com imagem =================================
   Rede de nos conectados remetendo a aprendizado/descoberta. O veu por cima
   garante o contraste independente da arte; os cards viram escuros para as
   fotos dos posts ganharem destaque em vez de disputar com o fundo. */
.bloco-fecho{position:relative;isolation:isolate;background:var(--superficie-escura)}
.bloco-fecho::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(100deg,
      rgba(15,21,53,.90) 0%,
      rgba(15,21,53,.86) 45%,
      rgba(15,21,53,.84) 75%,
      rgba(15,21,53,.88) 100%),
    url("../img/fundo-insights.jpg");
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
}
.bloco-fecho > .escura-sobre-fundo{position:relative;z-index:1;background:transparent}
.bloco-fecho > #insights{padding-block:var(--e7)}

/* cards de post sobre fundo escuro */
.bloco-fecho .post{background:var(--superficie-escura-2);border-color:var(--linha-escura)}
.bloco-fecho .post-corpo h3{color:var(--texto-inverso)}
.bloco-fecho .post-corpo p:last-child,
.bloco-fecho .post-meta{color:var(--texto-inverso-suave)}
.bloco-fecho .post-tema{color:var(--acento)}   /* ciano so em fundo escuro */
.bloco-fecho .insights-cta a{color:var(--texto-inverso)}

@media(max-width:700px){.bloco-fecho > #insights{padding-block:var(--e6)}}

/* ===== CABECALHO DAS PAGINAS DE DOCUMENTO ================================
   O h1 tinha max-width:24ch (quebrava mesmo sem o <br>) e o lead herdava
   62ch da regra global. Na faixa de 1200px ambos cabem em uma linha. */
.doc-hero h1{max-width:none}
.doc-hero .lead{max-width:none}

/* ===== FUNDO DAS PAGINAS DE DOCUMENTO ====================================
   Documento juridico longo (a pagina de termos tem ~16.400px) em que o hero
   ocupava so 1,8% da altura: 98% da leitura acontecia sem elemento visual.
   A arte vive nas BORDAS e o centro fica limpo - o texto precisa ser lido
   com atencao, entao o fundo e um sussurro, nao um grafismo. */
body.pagina-documento{
  background-image:url("../img/fundo-documento.jpg");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:fixed;   /* acompanha o scroll */
}
/* o hero ja tem o gradiente radial proprio; sobre a imagem ele so sujaria */
body.pagina-documento .doc-hero{background:none}
/* o indice lateral precisa se destacar do fundo agora texturizado */
body.pagina-documento .doc-indice{background:rgba(255,255,255,.92);
  border-radius:var(--raio);padding:var(--e3);backdrop-filter:blur(3px)}
/* sobre a textura, o cinza-claro padrao cai a 3.68:1 (AA exige 4.5:1);
   estes tres usam o cinza do corpo, que passa */
body.pagina-documento .doc-hero .lead,
body.pagina-documento .doc-indice-titulo,
body.pagina-documento .doc-indice a{color:var(--texto)}

@media(max-width:900px){
  /* fixed e caro em repintura e falha no iOS: no mobile a imagem rola junto */
  body.pagina-documento{background-attachment:scroll;background-size:100% auto}
}
@media (prefers-reduced-motion:reduce){
  body.pagina-documento{background-attachment:scroll}
}

/* ===== PAGINA EMPRESA =====================================================
   .linhagem-frase era usada no HTML sem regra no CSS: herdava 62ch e
   alinhamento a esquerda, colando na timeline (margin-top 0) e destoando
   do cabecalho centralizado da secao. */
.linhagem-frase{margin:var(--e5) auto 0;max-width:72ch;text-align:center;
  color:var(--texto-suave)}

/* valores com icone: reusa .cartao-icone/.cartao-topo ja existentes */
.cartao-topo img{width:64px;height:64px;object-fit:contain;flex:none}

/* equipe sem foto: as do site atual sao de banco de imagens e nao
   correspondem as pessoas reais. Iniciais identificam sem falsear. */
.pessoa-ini{display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;margin-bottom:var(--e3);
  background:var(--marca-suave);color:var(--marca);
  font-family:var(--fonte-display);font-weight:700;font-size:1.25rem;
  letter-spacing:.02em}

/* "Onde estamos": mesma linguagem dos blocos escuros da home */
.bloco-onde{position:relative;isolation:isolate;background:var(--superficie-escura)}
.bloco-onde::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(100deg,rgba(15,21,53,.90) 0%,rgba(15,21,53,.86) 50%,rgba(15,21,53,.88) 100%),
    url("../img/fundo-insights.jpg");
  background-size:cover,cover;background-position:center,center;
  background-repeat:no-repeat,no-repeat}
.bloco-onde > .escura-sobre-fundo{position:relative;z-index:1;background:transparent}

/* pagina Empresa: cabecalhos usam a faixa inteira, como na home.
   O lead do hero tinha 236 caracteres e quebrava em 4 linhas com 62ch. */
body.pagina-empresa .cabeca,
body.pagina-empresa .cabeca .lead,
body.pagina-empresa .hero .lead{max-width:none}

/* Marcos: o ano vira ancora visual. Sao 12 cartoes de texto puro - a maior
   secao da pagina; o ano em destaque da ritmo de leitura sem exigir 12 imagens. */
.marco{position:relative;padding-top:var(--e6)}   /* 64px: o ano ocupa ate 58px */
.marco-ano{position:absolute;top:var(--e4);left:var(--e4);
  font-family:var(--fonte-display);font-size:2.1rem;font-weight:700;
  line-height:1;color:var(--marca);opacity:.20;letter-spacing:-.02em}
.marco h3{position:relative;font-size:1.12rem}
/* o ano ja aparece como grafismo; no texto ele fica so para leitor de tela */
.sr-ano{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== PAGINAS INTERNAS: mesmo padrao visual da home =====================
   Cabecalhos usam a faixa inteira (na home isso tirou as quebras de linha)
   e os blocos escuros ganham imagem de fundo com veu de contraste. */
body.pagina-servicos .cabeca,
body.pagina-servicos .cabeca .lead,
body.pagina-servicos .hero .lead,
body.pagina-produtos .cabeca,
body.pagina-produtos .cabeca .lead,
body.pagina-produtos .hero .lead,
body.pagina-cases .cabeca,
body.pagina-cases .cabeca .lead,
body.pagina-cases .hero .lead,
body.pagina-insights .cabeca,
body.pagina-insights .cabeca .lead,
body.pagina-insights .hero .lead,
body.pagina-contato .cabeca,
body.pagina-contato .cabeca .lead,
body.pagina-contato .hero .lead{max-width:none}

.bloco-metodo,.bloco-prod,.bloco-cases,.bloco-contato{
  position:relative;isolation:isolate;background:var(--superficie-escura)}
.bloco-metodo::before,.bloco-prod::before,.bloco-cases::before,.bloco-contato::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-size:cover,cover;background-position:center,center;
  background-repeat:no-repeat,no-repeat}
.bloco-metodo::before,.bloco-cases::before{
  background-image:linear-gradient(100deg,rgba(15,21,53,.90) 0%,rgba(15,21,53,.86) 50%,rgba(15,21,53,.88) 100%),
    url("../img/fundo-operacao.jpg")}
.bloco-prod::before,.bloco-contato::before{
  background-image:linear-gradient(100deg,rgba(15,21,53,.90) 0%,rgba(15,21,53,.86) 50%,rgba(15,21,53,.88) 100%),
    url("../img/fundo-insights.jpg")}
.bloco-metodo > .escura-sobre-fundo,.bloco-prod > .escura-sobre-fundo,
.bloco-cases > .escura-sobre-fundo,.bloco-contato > .escura-sobre-fundo{
  position:relative;z-index:1;background:transparent}

/* a marcacao tem fundo creme proprio: dentro de bloco escuro ela herdava
   o texto claro de .escura e caia para 1.52:1 (ilegivel) */
.escura .falta,.escura .cartao .falta,[class*="bloco-"] .falta{color:var(--alerta)}

/* ===== PAGINA EMPRESA ====================================================
   Projeto: continuidade -> o que a sustenta -> quem confiou -> conduta ->
   o que produz hoje -> onde fica -> conversar. */

/* hero proprio (mesma mecanica do hero da home) */
.hero-empresa{padding-block:var(--e7)}
.hero-empresa .hero-visual{mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.45) 26%,#000 58%)}
.hero-empresa h1 em{color:#a78bfa;display:block}
.hero-empresa .confianca{margin-top:var(--e6)}

/* .etapas nasceu para fundo escuro (secao de servicos da home);
   aqui a travessia usa a mesma estrutura em fundo claro */
.etapas-claras .etapa + .etapa{border-top-color:var(--linha)}
.etapas-claras .etapa-num{color:var(--marca)}
.etapas-claras .etapa-cabeca h3{color:var(--texto-forte)}
.etapas-claras .etapa-periodo{font-family:var(--fonte-display);font-weight:600;
  font-size:.92rem;color:var(--marca);margin:0 0 var(--e2)}
.etapas-claras .etapa-itens{display:grid;gap:var(--e3)}
.etapas-claras .marco{padding-top:var(--e6)}
.etapas-claras .marco h4{font-family:var(--fonte-display);font-size:1.12rem;
  font-weight:600;color:var(--texto-forte);margin:0 0 var(--e2);position:relative}

/* clientes: o link fecha a grade alinhado a direita, como em servicos */
.clientes-cta{margin-top:var(--e5);text-align:right;max-width:none}
.case-cartao p b{color:var(--marca);font-weight:600}

/* depoimento solo sob a grade de clientes */
.depo-solo{max-width:760px;margin:var(--e6) auto 0}

/* bloco escuro da conduta: o pico visual vai para onde ha argumento */
.bloco-conduta{position:relative;isolation:isolate;background:var(--superficie-escura)}
.bloco-conduta::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(100deg,rgba(15,21,53,.90) 0%,rgba(15,21,53,.86) 50%,rgba(15,21,53,.88) 100%),
    url("../img/fundo-operacao.jpg");
  background-size:cover,cover;background-position:center,center;
  background-repeat:no-repeat,no-repeat}
.bloco-conduta > .escura-sobre-fundo{position:relative;z-index:1;background:transparent}
.missao{font-family:var(--fonte-display);font-size:1.35rem;line-height:1.45;
  font-weight:500;color:var(--texto-inverso);max-width:60ch;
  margin:0 0 var(--e6);padding-left:var(--e4);border-left:3px solid var(--acento)}

/* cartoes-ponte para servicos e produtos */
.ponte{display:flex;flex-direction:column}
.ponte-lista{list-style:none;margin:0 0 var(--e4);padding:0;
  display:flex;flex-wrap:wrap;gap:var(--e2) var(--e3)}
.ponte-lista li{font-size:.92rem;color:var(--texto-suave);
  padding-left:var(--e3);position:relative}
.ponte-lista li::before{content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--marca)}
.ponte-cta{margin:auto 0 0;max-width:none}

/* onde estamos: faixa compacta, sem pico visual */
.secao-onde-compacta{padding-block:var(--e5)}
.onde-faixa{display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--e5) var(--e6);flex-wrap:wrap}
.onde-faixa h2{font-size:1.5rem;margin:0}
.onde-endereco{font-style:normal;font-size:.95rem;color:var(--texto-suave);text-align:right}
.onde-endereco span{display:block;margin-top:var(--e2);font-size:.9rem}

/* cabecalhos da pagina usam a faixa inteira */
body.pagina-empresa .cabeca,body.pagina-empresa .cabeca .lead,
body.pagina-empresa .hero .lead{max-width:none}

@media(max-width:900px){
  .onde-faixa{flex-direction:column;align-items:flex-start}
  .onde-endereco{text-align:left}
  .clientes-cta{text-align:left}
}

/* a frase de cada ato herdava a cor clara de .etapa-cabeca (fundo escuro)
   e ficava em 1.63:1 sobre branco */
.etapas-claras .etapa-cabeca p{color:var(--texto-suave)}
.etapas-claras .etapa-cabeca .etapa-periodo{color:var(--marca)}

/* ===== EMPRESA · secao "Duas frentes" ====================================
   Era a unica secao da pagina sem elemento visual: dois cartoes de texto
   puro na secao que precisa converter para Servicos e Produtos.
   Os icones e logos ja existiam e nao estavam sendo usados aqui. */
.frentes{gap:var(--e5)}
.frente{display:flex;flex-direction:column;
  border:1px solid var(--linha);border-radius:var(--raio-g);
  padding:var(--e5);background:var(--superficie);
  transition:border-color .2s,transform .2s}
.frente:hover{border-color:var(--marca);transform:translateY(-3px)}
.frente-topo h3{font-size:1.5rem;margin:0 0 var(--e3)}
.frente-topo p{color:var(--texto-suave);margin-bottom:var(--e4)}
.frente-rotulo{font-family:var(--fonte-display);font-size:.76rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--marca);margin:0 0 var(--e2)}

/* seis servicos: icone + nome, duas colunas */
.frente-itens{list-style:none;margin:0 0 var(--e4);padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e4)}
/* mesmo tratamento de card dos produtos: sem isso a lista da esquerda ficava
   107px mais curta e o margin-top:auto do CTA abria 159px de vazio */
.frente-itens li{display:flex;align-items:center;gap:var(--e3);min-width:0;
  padding:var(--e3);border:1px solid var(--linha);border-radius:var(--raio);
  background:var(--superficie-2)}
.frente-itens img{width:44px;height:44px;object-fit:contain;flex:none}
.frente-itens span{font-size:.92rem;color:var(--texto);line-height:1.3}

/* quatro produtos: logo + o que faz */
.frente-produtos-lista{list-style:none;margin:0 0 var(--e4);padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e4)}
.frente-produtos-lista li{display:flex;flex-direction:column;gap:var(--e3);
  align-items:flex-start;padding:var(--e4) var(--e3);border:1px solid var(--linha);
  border-radius:var(--raio);background:var(--superficie-2)}
.frente-produtos-lista img{height:38px;width:auto;max-width:100%;
  object-fit:contain;object-position:left center;mix-blend-mode:multiply}
.frente-produtos-lista span{font-size:.86rem;color:var(--texto-suave)}

.frente-cta{margin:auto 0 0;max-width:none}

@media(max-width:900px){
  .frente-itens,.frente-produtos-lista{grid-template-columns:1fr}
  .frente{padding:var(--e4)}
}

/* ===== PAGINA SERVICOS ===================================================
   As 6 frentes em fundo claro. .servico nasceu para o bloco escuro da home:
   sem estas regras o texto sairia branco sobre cinza. */
.etapas-claras .servico{background:var(--superficie);border-color:var(--linha);
  display:block;padding:var(--e5)}
.etapas-claras .servico h4{font-family:var(--fonte-display);font-size:1.32rem;
  font-weight:600;color:var(--texto-forte);margin:0 0 var(--e3)}
.etapas-claras .servico p{color:var(--texto-suave)}
.etapas-claras .servico .quando{color:var(--marca);font-weight:500;
  padding:var(--e3);background:var(--marca-suave);border-radius:var(--raio);
  margin-bottom:var(--e4)}

/* os 4 blocos de profundidade de cada frente */
.frente-bloco{margin-bottom:var(--e4)}
.frente-bloco:last-child{margin-bottom:0}
.frente-rot{font-family:var(--fonte-display);font-size:.78rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave);
  margin:0 0 var(--e2)}
.frente-onde{background:var(--superficie-2);border-left:3px solid var(--marca);
  padding:var(--e3) var(--e4);border-radius:0 var(--raio) var(--raio) 0}
.frente-onde p{margin:0;color:var(--texto)}

/* icone da frente ao lado do titulo */
.frente-topo-ico{display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e3)}
.frente-topo-ico img{width:56px;height:56px;object-fit:contain;flex:none}
.frente-topo-ico h4{margin:0}

/* §2 diagnostico: pares sintoma -> frente */
.sintomas{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e4)}
.sintoma{display:flex;flex-direction:column;gap:var(--e2)}
.sintoma-fala{font-size:1.08rem;color:var(--texto-forte);font-weight:500;
  line-height:1.4;margin:0}
.sintoma-frente{font-family:var(--fonte-display);font-weight:600;
  color:var(--marca);margin:0}
.sintoma p:last-of-type{font-size:.94rem;color:var(--texto-suave);margin:0 0 var(--e2)}
.sintoma a{margin-top:auto;font-size:.94rem}

/* §4 produtos como circuito fechado */
.circuito{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e4)}
.circuito-item{background:var(--superficie-escura-2);border:1px solid var(--linha-escura);
  border-radius:var(--raio-g);padding:var(--e4)}
.circuito-item img{height:32px;width:auto;max-width:140px;object-fit:contain;
  object-position:left center;margin-bottom:var(--e3);
  filter:brightness(0) invert(1)}
.circuito-frentes{font-size:.88rem;color:var(--acento);margin:0 0 var(--e2)}
.circuito-item p{color:var(--texto-inverso-suave);font-size:.94rem;margin:0}
.circuito-ancoras{margin-top:var(--e3);font-size:.84rem}
.circuito-ancoras a{color:var(--acento);margin-right:var(--e3)}

/* §6 linha das verticais sem logo */
.verticais-extra{font-size:.94rem;color:var(--texto-suave);max-width:none;
  margin-top:var(--e4);padding-top:var(--e4);border-top:1px solid var(--linha)}

body.pagina-servicos .cabeca,body.pagina-servicos .cabeca .lead,
body.pagina-servicos .hero .lead{max-width:none}

@media(max-width:900px){
  .sintomas,.circuito{grid-template-columns:1fr}
  .etapas-claras .servico{padding:var(--e4)}
}

/* .missao, .passos e os CTAs nasceram no bloco escuro da home: em fundo
   claro o texto saia em 1:1 (invisivel). Estas regras valem so onde o
   componente NAO esta dentro de um bloco escuro. */
body.pagina-servicos section:not(.escura) > .env > .missao{
  color:var(--texto);border-left-color:var(--marca)}
body.pagina-servicos section:not(.escura) .passo{background:var(--superficie-2);
  border:1px solid var(--linha)}
body.pagina-servicos section:not(.escura) .passo b{color:var(--texto-forte)}
body.pagina-servicos section:not(.escura) .passo span{color:var(--texto-suave)}
body.pagina-servicos section:not(.escura) .passo i{color:var(--marca)}
body.pagina-servicos section:not(.escura) .passos{background:var(--linha)}
body.pagina-servicos .clara-2 .servicos-cta a,
body.pagina-servicos section:not(.escura) .servicos-cta a{color:var(--marca)}
.bloco-prod .insights-cta a{color:var(--acento)}

/* hero de servicos: so o lead recebe limite. O H1 fica sem max-width —
   com 14ch ele quebrava em 4 linhas e empurrava a arte para fora do enquadramento. */
body.pagina-servicos .hero .lead{max-width:62ch}
@media(max-width:900px){
  body.pagina-servicos .hero .lead{max-width:none}
}

/* ============================================================
   LOGOS DE CLIENTE COM CANAL ALFA (recortados nesta rodada)
   Os 9 logos originais (1,4,5,6,7,11,13,14,15.png) sao JPG/PNG
   SEM transparencia e dependem de mix-blend-mode:multiply para
   fundir o fundo branco no cartao. Os 13 recortados nesta rodada
   ja tem alfa real: o multiply sobre eles ESCURECE a arte, porque
   nao ha fundo branco a neutralizar. A classe abaixo os isenta.
   ============================================================ */
.case-logo.logo-alfa{mix-blend-mode:normal}

/* Equilibrio optico por proporcao — substitui os seletores por
   width= exato, que so contemplavam os 9 arquivos antigos.
   Logo muito largo vira um fio com altura unica; logo quadrado
   domina o cartao. A largura maxima compensa. */
.case-logo.logo-largo{max-width:176px}      /* proporcao > 3 : White Martins, Exchange, YMF */
.case-logo.logo-quadrado{height:58px}       /* proporcao < 1.2 : GE */

/* logos compactos (Leroy Merlin 1.66, ARSESP 1.41, Via Varejo 1.81) ficam
   pequenos demais com 42px e o texto interno some; mais altura os iguala
   opticamente aos logotipos horizontais */
.case-logo.logo-compacto{height:56px}

/* Santander: o vermelho E a marca, nao fundo removivel. Sem respiro o
   retangulo sangra ate a borda do cartao e destoa dos logos transparentes. */
.case-logo.logo-caixa{height:38px;padding:0;border-radius:3px}

@media(max-width:560px){
  .case-logo.logo-quadrado{height:50px}
  .case-logo.logo-compacto{height:48px}
  .case-logo.logo-caixa{height:32px}
}

/* ============================================================
   ANO DE ATUACAO NO CARD DE CLIENTE (pagina Empresa)
   O card e flex-column: margin-top:auto empurra o ano para o
   rodape, entao cards de texto curto e longo alinham o ano na
   mesma linha de base. Fica a direita, separado por um filete.
   ============================================================ */
.case-ano{
  margin-top:auto;                    /* cola no rodape do cartao */
  align-self:flex-end;                /* a direita */
  padding-top:var(--e3);
  font-family:var(--fonte-display);
  font-size:.95rem;font-weight:700;
  letter-spacing:.04em;
  color:var(--marca);
  font-variant-numeric:tabular-nums;  /* digitos de mesma largura alinham entre cards */
}
/* o filete acompanha a largura do cartao, nao a do numero.
   A cor vem aqui porque `.cartao p` (cinza) tem especificidade maior
   que `.case-ano` sozinha e vencia a cascata. */
.case-cartao .case-ano{
  width:100%;text-align:right;
  border-top:1px solid var(--linha);
  margin-top:auto;
  color:var(--marca);
}

/* ============================================================
   EMPRESA — MARCOS DA TRAVESSIA
   O ano estava a opacity .20: virava quase invisivel e a secao
   (a maior da pagina, 2.337px de texto puro) ficava sem ancora
   de leitura. Aqui ele ganha presenca e o cartao ganha borda na
   cor da marca — o destaque vem do proprio conteudo, nao de um
   ornamento lateral.
   ============================================================ */
.etapas-claras .marco .marco-ano{
  opacity:1;
  /* fonte mais clara que o roxo cheio: a leitura fica no titulo,
     o ano ancora sem competir */
  color:color-mix(in srgb, var(--marca) 42%, transparent);
  font-size:1.9rem;
}
/* folga sobre o titulo: o ano e posicionado em absoluto e o padding
   original foi dimensionado para uma fonte menor */
.etapas-claras .marco{padding-top:calc(var(--e6) + 8px)}
/* contorno no PROPRIO numero (nao uma caixa em volta): o miolo fica
   claro e o traco roxo desenha o algarismo. Sem caixa, a altura do ano
   nao muda e ele nao invade o titulo. */
.etapas-claras .marco .marco-ano{
  -webkit-text-stroke:1.5px color-mix(in srgb, var(--marca) 70%, transparent);
  paint-order:stroke fill;   /* traco atras do preenchimento: nao come o miolo */
}

/* ============================================================
   SERVICOS — HERO MAIS COMPACTO
   Medido: hero 924px + header 113px = 1.037px numa tela de 900px,
   ou seja 137px alem da dobra. E a arte (1600x1067, proporcao 1,5)
   era esticada a 893x924 (proporcao 0,97) com object-fit:cover —
   o corte comia as laterais da peca.
   Correcoes: padding menor, lead menor, e `contain` no lugar de
   `cover` para a arte aparecer inteira.
   ============================================================ */
/* mesmo respiro do hero de empresa (96px simetricos). O valor tinha sido
   reduzido para caber na dobra quando o lead ocupava 6 linhas; com o texto
   atual em 4 linhas, cabe com o padding padrao. */
body.pagina-servicos .hero{padding-block:var(--e7)}

/* texto explicativo mais compacto */
/* mesmo padrao do hero de empresa: lead sem limite de largura (a arte tem
   mascara que a dissolve a esquerda, entao o texto pode ocupar a coluna toda) */
body.pagina-servicos .hero .lead{max-width:none}

/* a arte cabe inteira: contain respeita a proporcao 1,5 e nao corta */
body.pagina-servicos .hero .hero-visual{
  width:50%;
  height:auto;
  top:56%;                      /* desce: libera a faixa do lead */
  transform:translateY(-50%);
  object-fit:contain;
  object-position:right center;
  max-height:76%;
}

@media(max-width:900px){
  body.pagina-servicos .hero .hero-visual{
    position:static;transform:none;width:100%;max-height:none;margin-top:var(--e4);
  }
  body.pagina-servicos .hero .lead{max-width:none;font-size:1rem}
}

/* ============================================================
   SERVICOS — SECAO DIAGNOSTICO
   Medido: a fala do cliente e o nome da frente saiam com o MESMO
   tamanho (15,52px) e a MESMA cor (cinza) — `.cartao p` vence
   `.sintoma-fala` na cascata. Sem distincao, o cartao vira um
   bloco de texto uniforme e a leitura nao tem ancora.
   Aqui: a fala ganha peso de citacao, a frente vira etiqueta da
   cor da marca, e o bloco de fecho se separa da grade.
   ============================================================ */

/* 1. a FALA e a ancora: maior, escura, com aspas que pesam */
.sintomas .sintoma .sintoma-fala{
  font-size:1.1rem;
  color:var(--texto-forte);
  font-weight:500;
  line-height:1.45;
}

/* 2. a FRENTE e a resposta: etiqueta a DIREITA, alinhada ao link */
.sintomas .sintoma .sintoma-frente{
  font-size:.82rem;
  color:var(--marca);
  font-family:var(--fonte-display);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  align-self:flex-end;
  text-align:right;
  margin-top:calc(var(--e2) * -1 + 2px);
}

/* 3. borda com a cor da marca (era cinza-claro 1px, sem presenca),
   e o link fecha o cartao a direita, na mesma vertical da frente */
.sintomas .sintoma{
  padding:var(--e4);
  border:1px solid color-mix(in srgb, var(--marca) 16%, var(--linha));
  box-shadow:0 1px 2px color-mix(in srgb, var(--marca) 5%, transparent);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.sintomas .sintoma:hover{
  border-color:color-mix(in srgb, var(--marca) 45%, transparent);
  box-shadow:0 6px 20px color-mix(in srgb, var(--marca) 12%, transparent);
  transform:translateY(-2px);
}
.sintomas .sintoma a{
  align-self:flex-end;
  text-align:right;
}

/* 4. o bloco de fecho estava a 0px da grade (parecia um 7o cartao)
   e com 684px contra 1200px — desalinhado. Vale nas DUAS seccoes que
   usam esse fecho: o diagnostico (clara) e os produtos (escura). */
body.pagina-servicos section:not(.escura) > .env > .missao,
body.pagina-servicos .bloco-prod section.escura > .env > .missao{
  margin-top:var(--e5);
  max-width:none;
}

@media(prefers-reduced-motion:reduce){
  .sintomas .sintoma{transition:none}
  .sintomas .sintoma:hover{transform:none}   /* mantem borda e sombra, tira o deslocamento */
}

/* ============================================================
   SERVICOS — AJUSTES FINOS
   (a) DIAGNOSTICO: a etiqueta da frente flutuava — 53px do topo em
       5 cartoes e 78px no Mentoring (fala de 2 linhas). Fixando-a
       no rodape, ao lado do link, ela para de depender do texto.
   (b) SEIS FRENTES: os rotulos saiam em cinza 15,52px, o MESMO
       tamanho do corpo — por isso nao marcavam. E o texto quebrava
       antes da largura util do cartao (920px).
   ============================================================ */

/* (a) frente e link na MESMA linha, no rodape do cartao */
.sintomas .sintoma{position:relative}
.sintomas .sintoma .sintoma-frente{
  align-self:auto;
  text-align:left;
  order:99;                      /* vai para o fim do flex-column */
  margin:0;
  position:absolute;
  left:var(--e4);
  bottom:var(--e4);
  line-height:1.5;
}
.sintomas .sintoma a{
  margin-top:auto;
  align-self:flex-end;
}

/* (b) rotulos das frentes: menores, em caixa alta e na cor da marca */
.etapas-claras .servico .frente-rot{
  font-size:.74rem;
  font-weight:700;
  color:var(--marca);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0 0 6px;
}
/* titulo da frente com mais peso */
.etapas-claras .servico .frente-topo-ico h4{
  font-size:1.42rem;
  font-weight:700;
  letter-spacing:-.01em;
}
/* o texto usa a largura util do cartao (era quebrado antes da hora).
   O "Quando contratar" estava preso a 543px num cartao de 840px uteis:
   quebrava em 2 e ate 3 linhas com quase 300px sobrando ao lado. */
.etapas-claras .servico .frente-bloco p{max-width:none}
.etapas-claras .servico .frente-onde p{max-width:none}
.etapas-claras .servico .quando{max-width:none}

/* ============================================================
   CASES — CARTAO DE PROJETO
   O cartao antigo usava img/cases/N.png (logo dentro de caixa
   branca) sobre fundo cinza: a moldura engolia a marca. Agora
   usa os recortados com alfa, como home e empresa.
   ============================================================ */
.pagina-cases .case{display:flex;flex-direction:column;overflow:hidden}
/* `display:flex` sobrescreve o atributo [hidden] (que so vale com display
   padrao): sem esta regra o filtro marca hidden e o cartao continua visivel. */
.pagina-cases .case[hidden],
.pagina-insights .post[hidden]{display:none}
.pagina-cases .case-topo{
  display:flex;align-items:center;
  min-height:92px;
  padding:var(--e4) var(--e4) 0;
}
.pagina-cases .case-marca-img{
  height:40px;width:auto;max-width:170px;
  object-fit:contain;object-position:left center;
  mix-blend-mode:multiply;          /* logos antigos sem alfa */
}
/* os recortados nesta rodada ja tem alfa: multiply os escureceria */
.pagina-cases .case-marca-img[src*="leroy-merlin"],
.pagina-cases .case-marca-img[src*="santander"],
.pagina-cases .case-marca-img[src*="ge.png"],
.pagina-cases .case-marca-img[src*="via-varejo"],
.pagina-cases .case-marca-img[src*="white-martins"],
.pagina-cases .case-marca-img[src*="arsesp"],
.pagina-cases .case-marca-img[src*="rota-bandeiras"],
.pagina-cases .case-marca-img[src*="schneider"],
.pagina-cases .case-marca-img[src*="pucrs"],
.pagina-cases .case-marca-img[src*="ssparaiso"],
.pagina-cases .case-marca-img[src*="ymf"],
.pagina-cases .case-marca-img[src*="pixelhouse"],
.pagina-cases .case-marca-img[src*="exchange"],
.pagina-cases .case-marca-img[src*="unesp"],
.pagina-cases .case-marca-img[src*="fesp-uemg"],
.pagina-cases .case-marca-img[src*="qualisoft"]{mix-blend-mode:normal}
/* logo quadrado (GE, brasao) precisa de mais altura p/ mesmo peso optico */
.pagina-cases .case-marca-img[width="96"],
.pagina-cases .case-marca-img[width="88"],
.pagina-cases .case-marca-img[width="86"],
.pagina-cases .case-marca-img[width="83"]{height:54px}

.pagina-cases .case-corpo{padding:var(--e3) var(--e4) var(--e4);display:flex;flex-direction:column;gap:6px}
.pagina-cases .case-corpo h3{font-size:1.12rem;margin:0}
.pagina-cases .case-corpo > p:last-child{font-size:.94rem;color:var(--texto-suave);margin:0}
/* meta: categoria a esquerda, ano a direita */
.pagina-cases .post-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--e2);margin:0}
.pagina-cases .case-ano-tag{
  font-family:var(--fonte-display);font-size:.8rem;font-weight:700;
  color:var(--marca);letter-spacing:.03em;font-variant-numeric:tabular-nums;
}
@media(max-width:560px){
  .pagina-cases .case-marca-img{height:34px}
  .pagina-cases .case-ano-tag{font-size:.74rem}
}

/* .missao nasceu para fundo escuro (herda cor clara). Na pagina de cases
   ela aparece em secao clara: contraste medido 1,07:1 — ilegivel. */
body.pagina-cases section:not(.escura) > .env > .missao{
  color:var(--texto);
  margin-top:var(--e5);
  max-width:none;
}

/* ============================================================
   CASES — CARTOES DE "COMO LER ESTA LISTA"
   Reusam .sintoma, mas la a etiqueta e posicionada em absoluto no
   rodape (par com o link "Ver a frente"). Aqui NAO ha link, entao
   ela colidia com a descricao: 12px de sobreposicao em 3 dos 4.
   Neste contexto a etiqueta qualifica o cartao — vai para o TOPO,
   antes do titulo, como um selo.
   ============================================================ */
.pagina-cases .sintomas .sintoma,
.pagina-insights .sintomas .sintoma{position:static;padding:var(--e4)}
.pagina-cases .sintomas .sintoma .sintoma-frente,
.pagina-insights .sintomas .sintoma .sintoma-frente,
.pagina-contato .sintomas .sintoma .sintoma-frente{
  position:static;
  order:-1;                       /* sobe: vira selo acima do titulo */
  align-self:flex-start;
  text-align:left;
  margin:0 0 2px;
}
.pagina-cases .sintomas .sintoma .sintoma-fala,
.pagina-insights .sintomas .sintoma .sintoma-fala{margin:0 0 4px}
.pagina-cases .sintomas .sintoma p:not([class]),
.pagina-insights .sintomas .sintoma p:not([class]){margin:0}

/* .verticais-extra nasceu para fundo claro (cinza medio). Na pagina de
   cases a secao virou escura: contraste medido 3,25:1 — reprova em AA. */
.pagina-cases .escura .verticais-extra{color:var(--texto-inverso-suave)}

/* ============================================================
   CASES — CARTOES DE SETOR (verticais)
   Antes: titulo + um bloco de 5 linhas que misturava nomes de
   cliente e descricao do trabalho. A informacao mais forte — a
   QUANTIDADE de clientes por setor — estava so no lead da secao.
   Agora: numero em destaque, titulo, o que foi feito, e os nomes
   separados por ponto no rodape.
   ============================================================ */
.vertical-card{display:flex;flex-direction:column;gap:var(--e2)}
.vertical-card .vertical-num{
  font-family:var(--fonte-display);
  font-size:2.6rem;font-weight:700;line-height:1;
  color:var(--acento);
  font-variant-numeric:tabular-nums;
  margin:0 0 -4px;
}
.vertical-card h3{margin:0;font-size:1.18rem}
.vertical-card .vertical-desc{margin:0;font-size:.94rem}
/* os nomes fecham o cartao, separados do texto por um filete */
.vertical-card .vertical-nomes{
  margin-top:auto;
  padding-top:var(--e3);
  border-top:1px solid var(--linha-escura);
  font-size:.86rem;
  line-height:1.5;
  color:var(--texto-inverso-suave);
}
@media(max-width:560px){
  .vertical-card .vertical-num{font-size:2.1rem}
}

/* ============================================================
   POST DO BLOG (pagina de artigo)
   ============================================================ */
.post-artigo{max-width:78ch}
.post-artigo h2{font-size:1.62rem;margin:var(--e5) 0 var(--e3)}
.post-artigo h2:first-child{margin-top:0}
.post-artigo h3{font-size:1.22rem;margin:var(--e4) 0 var(--e2)}
.post-artigo p{margin:0 0 var(--e3);line-height:1.7}
.post-artigo ul,.post-artigo ol{margin:0 0 var(--e3) 1.2em;line-height:1.7}
.post-artigo li{margin-bottom:6px}
/* :not(.btn) — a regra de link do artigo pintava tambem os botoes, deixando
   o texto do .btn-primario da mesma cor do fundo (invisivel). */
.post-artigo a:not(.btn){color:var(--marca);text-decoration:underline;text-underline-offset:3px}
.post-artigo img{border-radius:var(--raio);margin:var(--e3) 0}
.post-artigo pre,.post-artigo .code-box{
  background:var(--superficie-escura);color:var(--texto-inverso);
  padding:var(--e3);border-radius:var(--raio);overflow-x:auto;
  font-size:.88rem;line-height:1.55;margin:0 0 var(--e3);
}
.post-artigo code{font-size:.9em}
.post-artigo blockquote{
  margin:0 0 var(--e3);padding:var(--e3) var(--e4);
  border-left:3px solid var(--marca);background:var(--superficie-2);
  border-radius:0 var(--raio) var(--raio) 0;
}
.post-artigo .feature-card,.post-artigo .blog-conclusion{
  background:var(--superficie-2);border:1px solid var(--linha);
  border-radius:var(--raio);padding:var(--e4);margin:0 0 var(--e3);
}
.pagina-post .hero .post-meta{margin-top:var(--e3);color:var(--texto-inverso-suave)}
.pagina-post .hero .kicker a{color:inherit}
@media(max-width:900px){.post-artigo{max-width:none}}

/* o rotulo do rodape era <h4> apos <h2>, saltando nivel (WCAG). Virou <h2>
   com a mesma aparencia — a hierarquia e semantica, o tamanho e visual. */
.rodape-legal .rodape-titulo{font-size:.95rem;font-weight:600;margin:0 0 var(--e2)}

/* comentarios dentro do bloco de codigo vinham em cinza do tema antigo:
   3,74:1 sobre o fundo escuro — reprova em AA. */
.post-artigo pre .comment,.post-artigo .code-box .comment,
.post-artigo pre .token.comment,.post-artigo code .comment{
  color:#9aa4c7;   /* 5,1:1 sobre --superficie-escura */
  font-style:italic;
}
/* a etiqueta de categoria herdou cor de fundo do tema antigo */
.pagina-post .category-badge{
  display:inline-block;padding:.2em .7em;border-radius:999px;
  background:color-mix(in srgb, var(--marca) 14%, transparent);
  color:var(--marca);font-size:.8rem;font-weight:700;
  font-family:var(--fonte-display);letter-spacing:.06em;text-transform:uppercase;
}

/* blocos herdados do tema antigo do blog: vinham com texto BRANCO porque la
   ficavam sobre fundo escuro. No V4 estao em secao clara — 1:1 de contraste. */
/* `.blog-hero .category-badge` do tema antigo tem a mesma especificidade e vem
   depois no arquivo: vencia por ordem. Duas classes no seletor resolvem. */
body.pagina-post .blog-hero .category-badge,
body.pagina-post .category-badge{color:var(--marca)}
.post-artigo .blog-conclusion h3,
.post-artigo .blog-conclusion p,
.post-artigo .feature-card h3,
.post-artigo .feature-card p{color:var(--texto)}
.post-artigo .blog-conclusion h3,
.post-artigo .feature-card h3{color:var(--texto-forte)}
/* o <h2> do rodape (antes <h4>) herdou a cor escura do tema claro */
.rodape-legal .rodape-titulo{color:var(--texto-inverso)}

/* a capa do post e FOTO (nao composicao com espaco negativo): a mascara do
   hero-empresa nao basta e o H1 caia sobre a imagem. Aqui a foto recua para
   a direita e escurece, garantindo leitura do titulo. */
.pagina-post .hero-visual{
  width:52%;
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 22%,#000 62%);
  filter:brightness(.62) saturate(.9);
}
.pagina-post .hero h1{max-width:20ch}
.pagina-post .hero .lead{max-width:56ch}
@media(max-width:900px){
  .pagina-post .hero-visual{width:100%;filter:brightness(.5)}
  .pagina-post .hero h1,.pagina-post .hero .lead{max-width:none}
}

/* ==========================================================================
   Post do blog — classes herdadas do template antigo na migração do corpo.
   O HTML já as usava, mas o CSS não existia no V4: métricas viravam linhas
   soltas, botões viravam texto corrido e o bloco de código colapsava.
   ========================================================================== */

/* métricas do artigo (eram 3 linhas coladas no parágrafo seguinte) */
.post-artigo .stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--e3);margin:0 0 var(--e4);padding:0;list-style:none;
}
.post-artigo .stat-item{
  background:var(--superficie-2);border:1px solid var(--linha);
  border-radius:var(--raio);padding:var(--e3);text-align:center;
}
.post-artigo .stat-number{
  display:block;font-family:var(--fonte-titulo,inherit);
  font-size:1.9rem;font-weight:700;line-height:1.1;color:var(--marca);
}
.post-artigo .stat-label{
  display:block;margin-top:6px;font-size:.9rem;color:var(--texto-suave);
}

/* caixa de destaque do artigo */
.post-artigo .highlight-box{
  background:var(--superficie-2);border:1px solid var(--linha);
  border-left:3px solid var(--marca);
  border-radius:var(--raio);padding:var(--e4);margin:0 0 var(--e3);
}
.post-artigo .highlight-box > :last-child{margin-bottom:0}

/* par de botões da conclusão (antes: "Conhecer o Avizuaí Fale Conosco" corrido) */
.post-artigo .blog-acoes{
  display:flex;flex-wrap:wrap;gap:var(--e2);margin:var(--e3) 0 0;
}

/* compartilhar: os <a> vinham vazios porque o ícone era do tema antigo */
.post-artigo .share-section{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--e2);
  margin:var(--e4) 0;padding-top:var(--e3);border-top:1px solid var(--linha);
}
.post-artigo .share-rotulo{font-size:.9rem;color:var(--texto-suave)}
.post-artigo .share-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid var(--linha);border-radius:50%;
  color:var(--texto-suave);background:var(--superficie);
  transition:color .18s,border-color .18s,background-color .18s;
}
.post-artigo .share-btn svg{width:17px;height:17px;fill:currentColor}
.post-artigo .share-btn:hover,.post-artigo .share-btn:focus-visible{
  color:var(--marca);border-color:var(--marca);
  background:color-mix(in srgb, var(--marca) 8%, transparent);
}

/* voltar para o índice (o destino "Notícias" não existe no V4).
   Vive na mesma linha do compartilhar; margin-left:auto empurra à direita. */
.post-artigo .voltar-insights{
  margin-left:auto;font-weight:600;color:var(--marca);white-space:nowrap;
}
/* em tela estreita o link nao cabe ao lado dos icones e quebra para a linha
   de baixo; sem o respiro proprio ele encosta neles. */
@media(max-width:560px){
  .post-artigo .voltar-insights{margin-left:0;margin-top:var(--e2)}
}

/* ícone decorativo do tema antigo, sem glifo no V4: não ocupa espaço */
.post-artigo .feature-icon{display:none}

/* ==========================================================================
   Componentes dos posts migrados (lote de 10).
   Mesma origem do bloco anterior: classes do template antigo que o corpo do
   artigo usa e o V4 não tinha. Tudo escopado em .post-artigo.
   ========================================================================== */

/* --- grades de números (variantes do mesmo padrão do piloto) --- */
.post-artigo .stats-row,.post-artigo .stat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--e3);margin:0 0 var(--e4);
}
.post-artigo .stat-box,.post-artigo .stat-card{
  background:var(--superficie-2);border:1px solid var(--linha);
  border-radius:var(--raio);padding:var(--e3);text-align:center;
}
.post-artigo .stat-value{
  display:block;font-size:1.7rem;font-weight:700;line-height:1.15;color:var(--marca);
}
.post-artigo .stat-box .stat-label,.post-artigo .stat-card .stat-label{
  display:block;margin-top:4px;font-size:.88rem;color:var(--texto-suave);
}

/* --- cartão numerado de tendência --- */
.post-artigo .trend-card{
  position:relative;background:var(--superficie-2);border:1px solid var(--linha);
  border-radius:var(--raio);padding:var(--e4);margin:0 0 var(--e3);
}
.post-artigo .trend-number{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin-bottom:var(--e2);
  border-radius:50%;background:var(--marca);color:#fff;
  font-weight:700;font-size:1rem;
}
.post-artigo .trend-card h3{margin-top:0}

/* --- seção com cartão + caixa de leitura --- */
.post-artigo .section-card{
  background:var(--superficie-2);border:1px solid var(--linha);
  border-radius:var(--raio);padding:var(--e4);margin:0 0 var(--e3);
}
.post-artigo .section-card > :last-child{margin-bottom:0}
.post-artigo .insight-box,.post-artigo .opportunity,.post-artigo .warning{
  border-radius:var(--raio);padding:var(--e3);margin:var(--e3) 0 0;
  background:color-mix(in srgb, var(--marca) 6%, transparent);
  border-left:3px solid var(--marca);
}
.post-artigo .warning{
  background:color-mix(in srgb, #b45309 8%, transparent);border-left-color:#b45309;
}
.post-artigo .insight-box h5,.post-artigo .opportunity h5,.post-artigo .warning h5{
  margin:0 0 6px;font-size:.92rem;font-weight:700;letter-spacing:.02em;
}
.post-artigo .insight-box > :last-child,
.post-artigo .opportunity > :last-child,
.post-artigo .warning > :last-child{margin-bottom:0}

/* --- tabela de dados --- */
.post-artigo .data-table{
  width:100%;border-collapse:collapse;margin:0 0 var(--e3);font-size:.94rem;
}
.post-artigo .data-table th,.post-artigo .data-table td{
  padding:10px 12px;border-bottom:1px solid var(--linha);text-align:left;
}
.post-artigo .data-table thead th{
  background:var(--superficie-2);font-weight:700;font-size:.88rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--texto-suave);
}
.post-artigo .data-table tr.highlight-row td{
  background:color-mix(in srgb, var(--marca) 7%, transparent);font-weight:600;
}
/* tabela larga rola sozinha no celular, sem empurrar a pagina */
.post-artigo .tabela-rolavel{overflow-x:auto;margin:0 0 var(--e3)}

/* --- linha do tempo / processo --- */
.post-artigo .process-timeline,.post-artigo .timeline-card+.timeline-card{margin-top:var(--e2)}
.post-artigo .process-step,.post-artigo .timeline-card{
  position:relative;background:var(--superficie-2);border:1px solid var(--linha);
  border-left:3px solid var(--marca);
  border-radius:var(--raio);padding:var(--e3) var(--e4);margin:0 0 var(--e2);
}
.post-artigo .process-step h4,.post-artigo .timeline-card h3{margin-top:0}
.post-artigo .process-step > :last-child,
.post-artigo .timeline-card > :last-child{margin-bottom:0}
.post-artigo .year-badge{
  display:inline-block;margin-bottom:6px;padding:3px 10px;border-radius:999px;
  background:var(--marca);color:#fff;font-size:.8rem;font-weight:700;
}

/* --- case com resultados --- */
.post-artigo .case-study{
  background:var(--superficie-2);border:1px solid var(--linha);
  border-radius:var(--raio);padding:var(--e4);margin:0 0 var(--e3);
}
.post-artigo .case-study h3{margin-top:0}
.post-artigo .case-results{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:var(--e2);margin-top:var(--e3);
}
.post-artigo .result-item{
  background:var(--superficie);border:1px solid var(--linha);
  border-radius:var(--raio);padding:var(--e3) var(--e2);text-align:center;
}
.post-artigo .result-value{
  display:block;font-size:1.5rem;font-weight:700;color:var(--marca);line-height:1.15;
}
.post-artigo .result-label{display:block;margin-top:4px;font-size:.84rem;color:var(--texto-suave)}

/* --- lista de verificação --- */
.post-artigo .checklist{
  background:var(--superficie-2);border:1px solid var(--linha);
  border-radius:var(--raio);padding:var(--e4);margin:0 0 var(--e3);
}
.post-artigo .checklist h4{margin-top:0}
.post-artigo .checklist ul{margin-bottom:0}

/* --- benefícios --- */
.post-artigo .benefit-card{
  background:var(--superficie-2);border:1px solid var(--linha);
  border-radius:var(--raio);padding:var(--e3);margin:0 0 var(--e2);
}
.post-artigo .benefit-card h4{margin-top:0}
.post-artigo .benefit-card > :last-child{margin-bottom:0}

/* --- citação da marca --- */
.post-artigo .quote-box{
  border-left:3px solid var(--marca);padding:var(--e3) var(--e4);
  margin:0 0 var(--e3);background:var(--superficie-2);border-radius:var(--raio);
}
.post-artigo .quote-box p{font-size:1.05rem;font-style:italic;margin-bottom:var(--e2)}
.post-artigo .quote-author{display:block;font-size:.9rem;font-weight:600;color:var(--texto-suave)}

/* --- valores da marca --- */
.post-artigo .values-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--e3);margin:0 0 var(--e4);
}
.post-artigo .value-item{
  background:var(--superficie-2);border:1px solid var(--linha);
  border-radius:var(--raio);padding:var(--e3);
}
.post-artigo .value-item h5{margin:0 0 6px;font-size:1rem}
.post-artigo .value-item > :last-child{margin-bottom:0}

/* --- amostras de cor: o hexadecimal é o conteúdo; o fundo vem do style inline --- */
.post-artigo .brand-colors{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:var(--e2);margin:0 0 var(--e4);
}
.post-artigo .color-swatch{
  min-height:74px;display:flex;align-items:flex-end;justify-content:center;
  padding:8px;border:1px solid var(--linha);border-radius:var(--raio);
  font-size:.8rem;font-weight:600;
}
/* A amostra pode ser clara (#3ea3f8 da a 2,69:1 com texto branco). Sombra NAO
   conta para o calculo WCAG, entao o rotulo ganha uma TARJA SOLIDA escura:
   o contraste passa a ser medido contra ela (>= 4,5:1), qualquer que seja a
   cor da amostra atras. */
.post-artigo .swatch-cod{
  display:inline-block;padding:3px 9px;border-radius:999px;
  background:rgba(12,14,30,.88);   /* tarja solida: o contraste e medido contra ELA */
  color:#fff;line-height:1.35;
}
/* o card "Gradient" nao traz cor inline: recebe o gradiente da marca */
.post-artigo .color-swatch:not([style]){
  background:linear-gradient(115deg,#080a37,#1f14c7 55%,#3ea3f8);
}

/* --- etiquetas de contexto --- */
.post-artigo .location-tag,.post-artigo .health-badge,
.post-artigo .pix-badge,.post-artigo .law-badge{
  display:inline-block;margin:0 0 var(--e2);padding:4px 12px;border-radius:999px;
  background:color-mix(in srgb, var(--marca) 10%, transparent);
  color:var(--marca);font-size:.82rem;font-weight:600;
}

/* realce de sintaxe do bloco de codigo (o tema antigo trazia .keyword/.string
   sem CSS no V4 — o codigo aparecia todo na mesma cor). */
.post-artigo pre .keyword,.post-artigo code .keyword{color:#c7a6ff;font-weight:600}
.post-artigo pre .string,.post-artigo code .string{color:#9ae6b4}

/* 3 faixas de preco por localizacao: no template antigo eram 3 colunas
   (col-md-4). Sem a grade do Bootstrap, empilhariam verticalmente. */
.post-artigo .segmentos-grade{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--e3);margin:0 0 var(--e3);
}
.post-artigo .segmentos-grade .highlight-box{margin:0}
.post-artigo .segmentos-grade h5{margin:0 0 6px;font-size:.95rem}
.post-artigo .segmentos-grade p{margin:0 0 var(--e2);font-size:.92rem}

/* ==========================================================================
   Formulario de contato — validacao, retorno e aviso LGPD.
   (.form-retorno ja existia, sem estados; aqui entram os estados e as classes
   que o JS cria. A duplicata da regra base foi sinalizada, nao removida.)
   ========================================================================== */
.form-retorno{display:block;margin-top:var(--e2);min-height:1.2em}
.form-retorno.ok{color:#15803d}
.form-retorno.erro{color:#b91c1c}
.form-retorno.aviso{color:#b45309}
.form-retorno a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* mensagem por campo (criada pelo JS ao validar) */
.campo-erro{margin:6px 0 0;font-size:.86rem;color:#b91c1c}
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"]{
  border-color:#b91c1c;
  box-shadow:0 0 0 3px color-mix(in srgb, #b91c1c 12%, transparent);
}

/* aviso de tratamento de dados */
/* fora da coluna do formulario: em largura total o aviso cabe em 1 linha na
   maioria dos monitores. max-width:none porque a regra generica de <p> o
   limitava a ~62ch, forcando 3 linhas. */
.form-lgpd{
  margin-top:var(--e4);line-height:1.5;color:var(--texto-suave);
  max-width:none;text-align:center;
  /* .75rem = 12px: medido, o texto ocupa 1123px dos 1200px da grade e fica
     em UMA linha. Em .84rem media 1258px e quebrava. */
  font-size:.75rem;white-space:nowrap;
}
/* abaixo de ~1240px nao cabe em uma linha: volta a quebrar em vez de
   estourar a largura e criar scroll horizontal. */
@media(max-width:1240px){
  .form-lgpd{white-space:normal;font-size:.8rem}
}
.form-lgpd a{color:var(--marca);text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   Contato — FAQ e saída da prova social (classes novas desta página).
   ========================================================================== */
.faq{display:grid;gap:var(--e2);max-width:80ch}
.faq-item{
  background:var(--superficie-2);border:1px solid var(--linha);
  border-radius:var(--raio);padding:var(--e3) var(--e4);
}
.faq-item summary{
  cursor:pointer;font-weight:600;color:var(--texto-forte);
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--e2);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-size:1.3rem;font-weight:400;color:var(--marca);line-height:1;flex:none;
}
.faq-item[open] summary::after{content:"–"}
.faq-item summary:focus-visible{outline:2px solid var(--marca);outline-offset:3px;border-radius:4px}
.faq-item p{margin:var(--e2) 0 0;color:var(--texto-suave)}
.faq-item a{color:var(--marca);text-decoration:underline;text-underline-offset:3px}

/* saída da prova social para as páginas que aprofundam */
/* uma regra generica de <p> impunha max-width ~62ch: o texto centralizava
   dentro de uma caixa estreita e aparecia deslocado a esquerda da grade. */
.confianca-saida{margin-top:var(--e3);font-size:.95rem;text-align:center;max-width:none}
.confianca-saida a{color:var(--marca);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   Contato — ajustes de layout das seções novas.
   ========================================================================== */

/* As 3 etapas empilhavam em coluna única (.etapas é flex-column), gastando
   1,12 tela só nelas. Como são passos curtos e paralelos, viram 3 colunas:
   a leitura passa a ser comparativa e a seção cabe numa tela. */
.pagina-contato .etapas-claras{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--e3);align-items:start;
}
.pagina-contato .etapas-claras .marco{
  padding:var(--e4);background:var(--superficie-2);
  border:1px solid var(--linha);border-radius:var(--raio);
}
/* o numero e position:absolute no layout de linha do tempo original; dentro
   do card ele precisa entrar no fluxo, senao fica em cima do titulo. */
.pagina-contato .etapas-claras .marco .marco-ano{
  position:static;display:block;margin:0 0 var(--e2);
  font-size:1.6rem;line-height:1;
}
.pagina-contato .etapas-claras .marco h3{margin:0 0 var(--e2);font-size:1.05rem}
.pagina-contato .etapas-claras .marco p{margin:0}

/* .confianca é repeat(4,1fr) por causa da home, que tem 4 blocos. Aqui são 3
   e sobrava uma coluna vazia à direita. */
.pagina-contato .confianca{grid-template-columns:repeat(3,1fr)}

@media(max-width:900px){
  .pagina-contato .etapas-claras{grid-template-columns:1fr}
  .pagina-contato .confianca{grid-template-columns:1fr}
}

/* honeypot: precisa existir no DOM e ficar fora da vista e do foco.
   display:none nao serve — parte dos robos ignora campo oculto assim. */
.campo-oculto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* A seção de canais + formulário ganhou fundo escuro. A classe .escura não
   previa campos de formulário (nenhuma outra página tem form em fundo escuro),
   então os controles precisam de tratamento próprio — sem isso ficariam
   brancos sobre escuro, com contraste invertido. */
.pagina-contato .escura .contato-rotulo{color:var(--texto-inverso-suave)}
.pagina-contato .escura .contato-valor{color:var(--texto-inverso)}
.pagina-contato .escura .contato-valor a{color:var(--acento)}
.pagina-contato .escura .campo label{color:var(--texto-inverso)}
.pagina-contato .escura .campo input,
.pagina-contato .escura .campo textarea{
  background:var(--superficie-escura-2);
  border-color:var(--linha-escura);
  color:var(--texto-inverso);
}
.pagina-contato .escura .campo input::placeholder,
.pagina-contato .escura .campo textarea::placeholder{color:var(--texto-inverso-suave)}
.pagina-contato .escura .campo input:focus-visible,
.pagina-contato .escura .campo textarea:focus-visible{
  border-color:var(--acento);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 25%, transparent);
  outline:none;
}
.pagina-contato .escura .form-lgpd{color:var(--texto-inverso-suave)}
.pagina-contato .escura .form-lgpd a{color:var(--acento)}
.pagina-contato .escura .form-retorno a{color:var(--acento)}
/* erros precisam de tom claro para contrastar com o fundo escuro */
.pagina-contato .escura .campo-erro{color:#fca5a5}
.pagina-contato .escura .form-retorno.erro{color:#fca5a5}
.pagina-contato .escura .form-retorno.aviso{color:#fcd34d}
.pagina-contato .escura .form-retorno.ok{color:#86efac}
.pagina-contato .escura .campo input[aria-invalid="true"],
.pagina-contato .escura .campo textarea[aria-invalid="true"]{
  border-color:#fca5a5;
  box-shadow:0 0 0 3px color-mix(in srgb, #fca5a5 18%, transparent);
}

/* Hero de Produtos: o lead herdava max-width:none das paginas internas e
   ocupava 1200px, atravessando a arte (a imagem comeca em ~547px). No trecho
   claro da foto o texto ficava ilegivel. Limita a largura a faixa livre. */
body.pagina-produtos .hero .lead{max-width:40ch}
@media(max-width:900px){
  body.pagina-produtos .hero .lead{max-width:none}
}