@charset "utf-8";

/* =========================================================================
   3D INFRA & SECURITY - folha de estilo

   Família: divide com o Grupo 3D e o 3D ERP a paleta (grafite e amarelo
   batido), a dupla Raleway + Mulish e o botão em pílula. É por aí que se
   reconhece a empresa.

   Identidade própria - "O PAINEL".
   O site do grupo é uma parede de sinalização: placas de grafite chapadas
   sobre grade técnica. O do ERP é papel claro com cartões brancos em camadas.
   Este é um painel de instrumentação: fundo grafite chapado sem grade, seções
   separadas por filete de 1px que corre de ponta a ponta, e o amarelo
   reservado para indicar ESTADO - o traço que abre a sequência, o número que
   diz "30". Nunca enfeite.

   Cada seção tem uma forma própria: faixa (pilares), grade de filete (riscos),
   régua graduada (trilha do DRS), bloco partido (soluções), pauta vertical
   (agenda), par de cartões (cobertura), texto-e-foto (presença) e formulário.
   Oito seções, oito tratamentos - nenhuma família de layout se repete.

   Os módulos não têm sombra nem preenchimento: são caixas de filete, como
   unidade de rack. Raio curto de propósito - onde o ERP arredonda em 20 e 28,
   aqui é 14 e 20. Arredondar menos lê como equipamento, não como cartão.

   Herdado sem alterar: .chapa, .form, .campo, .isca, .pular, .surge.
   Sem gradiente, sem vidro, sem glow - regra da casa.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root{
  /* constantes da marca - não mudam entre os sites da família */
  --batido:#ffcc29;
  --batido-forte:#f5c01d;
  --batido-claro:#ffd76b;
  --grafite:#363435;
  --grafite-2:#43413f;
  --papel-marca:#f1efee;

  /* superfícies, do fundo para a frente */
  --parede:#1a191a;      /* o grafite da marca puxado para o fundo */
  --parede-2:#211f20;    /* degrau da parede: dá plano às seções */
  --modulo:#242223;      /* caixa de filete */
  --modulo-2:#2b292a;    /* campo interno do módulo */

  /* tinta - todos conferidos sobre --parede */
  --papel:#fefefe;
  --texto:#e4e1df;       /* 13,1:1 */
  --texto-medio:#b0acaa; /*  8,7:1 */
  --texto-mudo:#8f8b89;  /*  5,2:1 - passa AA em corpo pequeno */

  /* filetes: a matéria estrutural deste site */
  --filete:rgba(254,254,254,.13);
  --filete-forte:rgba(254,254,254,.26);
  --filete-batido:rgba(255,204,41,.42);

  /* medidas */
  --calha:clamp(1.25rem,5vw,4rem);
  --max:1280px;
  --ritmo:clamp(4rem,8vw,7rem);
  --trilho-h:64px;

  /* escala de forma, curta de propósito */
  --r-pilula:999px;
  --r-modulo:14px;
  --r-painel:20px;
  --r-etiqueta:6px;

  --curva:cubic-bezier(.16,1,.3,1);
}

/* O site é escuro por decisão, não por preferência do sistema: um painel de
   instrumentação claro seria outra coisa. Só a barra do navegador acompanha. */

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--trilho-h) + 2rem);
  -webkit-text-size-adjust:100%;
  color-scheme:dark;
}

body{
  margin:0;
  background:var(--parede);
  color:var(--texto);
  font-family:"Mulish",system-ui,-apple-system,sans-serif;
  font-weight:500;
  font-size:clamp(1rem,.96rem + .2vw,1.06rem);
  line-height:1.7;
  letter-spacing:-.1px;
  font-variant-numeric:lining-nums tabular-nums;
  text-wrap:pretty;
  padding-top:var(--trilho-h);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:"Raleway",system-ui,sans-serif;
  margin:0;letter-spacing:-.025em;text-wrap:balance;line-height:1.12;
}
h1 strong,h2 strong,h3 strong{font-weight:800;color:var(--papel)}

p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}

:focus-visible{
  outline:2px solid var(--batido);
  outline-offset:3px;
  /* Só vale para links que não declaram raio próprio: pílulas e painéis vêm
     DEPOIS nesta folha e ganham por ordem, com a mesma especificidade. Se
     algum dia este bloco for movido para o fim do arquivo, os botões passam
     a esquadrar ao receber foco. */
  border-radius:2px;
}

.env{width:min(100% - var(--calha)*2,var(--max));margin-inline:auto}
.env--estreito{width:min(100% - var(--calha)*2,880px);margin-inline:auto}

.pular{position:absolute;left:-9999px}
.pular:focus{
  left:1rem;top:1rem;z-index:200;position:fixed;
  background:var(--batido);color:var(--grafite);
  padding:.7rem 1.1rem;font-weight:700;border-radius:var(--r-pilula);
}

/* -------------------------------------------------------------------------
   3. Botão da casa - herdado sem alterar
   ------------------------------------------------------------------------- */
.chapa{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-family:"Raleway",sans-serif;font-weight:700;
  font-size:0.984rem;letter-spacing:.12em;text-transform:uppercase;
  padding:1.05em 1.6em;border:0;border-radius:var(--r-pilula);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  background:var(--batido);color:var(--grafite);
  transition:background .18s ease,transform .18s var(--curva);
}
.chapa .seta{display:inline-block;transition:transform .22s var(--curva)}
.chapa:hover{background:var(--batido-forte)}
.chapa:hover .seta{transform:translate(3px,-3px)}
.chapa:active{transform:translateY(1px)}

.chapa--linha{
  background:transparent;color:var(--papel-marca);
  box-shadow:inset 0 0 0 1px var(--filete-forte);
}
/* Sobre a foto do hero o botão vazado perderia a borda e o texto. Ganha
   corpo próprio e desfoque atrás, com reserva sólida para quem pede menos
   transparência. */
.abertura .chapa--linha{
  background:rgba(26,25,26,.55);
  box-shadow:inset 0 0 0 1px rgba(254,254,254,.42);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.abertura .chapa--linha:hover{
  background:var(--papel-marca);color:var(--grafite);
  box-shadow:inset 0 0 0 1px var(--papel-marca);
}
@media (prefers-reduced-transparency:reduce){
  .abertura .chapa--linha{background:var(--parede-2);backdrop-filter:none}
}
.chapa--linha:hover{
  background:var(--papel-marca);color:var(--grafite);
  box-shadow:inset 0 0 0 1px var(--papel-marca);
}

/* -------------------------------------------------------------------------
   4. Rótulo e cabeça de seção
   O gesto que dá nome ao sistema: um filete de ponta a ponta e, quando o
   título não basta, um rótulo à esquerda e o indicador de estado à direita.
   Sem numeração de seção: ninguém navega por "05", e o número só somava
   decoração fingindo de sistema.
   ------------------------------------------------------------------------- */
.regua{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  border-top:1px solid var(--filete);
  padding-top:.9rem;margin-bottom:clamp(2rem,4vw,3rem);
}
/* Metade das seções não leva rótulo: quando o título já nomeia o assunto, a
   etiqueta em caixa alta acima dele é repetição. Sobra o filete, que é o que
   de fato divide a página. */
.regua--muda{padding-top:0;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.regua__id,.regua__estado{
  font-family:"Raleway",sans-serif;font-weight:700;
  font-size:0.816rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--texto-mudo);white-space:nowrap;
}
.regua__estado{display:inline-flex;align-items:center;gap:.55em}

/* o ponto de estado: o amarelo trabalhando como instrumento */
.ponto{
  width:7px;height:7px;border-radius:50%;
  background:var(--batido);flex:none;
  box-shadow:0 0 0 3px rgba(255,204,41,.16);
}

.cabeca h2{font-size:clamp(1.9rem,1.35rem + 2.4vw,3.1rem);font-weight:300;max-width:24ch}
.cabeca--larga h2{max-width:32ch}
.cabeca p{
  margin-top:1.1rem;color:var(--texto-medio);
  font-size:clamp(1rem,.97rem + .25vw,1.14rem);max-width:56ch;
}

.secao{padding-block:var(--ritmo)}
.secao--plano{background:var(--parede-2)}

/* -------------------------------------------------------------------------
   5. Trilho
   ------------------------------------------------------------------------- */
.trilho{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--trilho-h);
  background:rgba(26,25,26,.86);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--filete);
}
.trilho__env{
  height:100%;width:min(100% - var(--calha)*2,var(--max));margin-inline:auto;
  display:flex;align-items:center;gap:1.25rem;
}
.trilho__marca{flex:none;display:flex;align-items:center;gap:.65rem;text-decoration:none}
.trilho__marca img{height:34px;width:auto}
.trilho__nome{
  font-family:"Raleway",sans-serif;font-weight:800;
  font-size:0.96rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--papel);line-height:1.1;white-space:nowrap;
}
.trilho__nome b{color:var(--batido);font-weight:800}

.trilho__nav{
  margin-left:auto;display:flex;align-items:center;gap:clamp(.8rem,1.45vw,1.9rem);
}
/* `display` numa classe ganha do [hidden] do navegador, e o menu do telefone
   ficava aberto mesmo com hidden aplicado pelo script. Precisa ser explícito. */
.trilho__nav[hidden]{display:none}
.trilho__nav a{
  font-family:"Raleway",sans-serif;font-weight:700;
  font-size:0.864rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-medio);text-decoration:none;
  padding:.4rem 0;position:relative;transition:color .18s ease;
  /* a barra é de uma linha só: nenhum rótulo pode quebrar */
  white-space:nowrap;
}
.trilho__nav a:hover{color:var(--papel)}
.trilho__nav a[aria-current]{color:var(--batido)}
.trilho__nav a[aria-current]::after{
  content:"";position:absolute;left:0;right:0;bottom:-.1rem;height:2px;
  background:var(--batido);border-radius:var(--r-pilula);
}
.trilho__nav .chapa{font-size:0.84rem;padding:.85em 1.35em;color:var(--grafite)}
.trilho__nav .chapa:hover{color:var(--grafite)}
.trilho__nav .chapa::after{display:none}

.trilho__alavanca{
  margin-left:auto;display:none;background:transparent;border:0;cursor:pointer;
  padding:.5rem;color:var(--papel);border-radius:var(--r-etiqueta);
}
.trilho__alavanca svg{width:24px;height:24px;display:block}

/* -------------------------------------------------------------------------
   6. Abertura
   ------------------------------------------------------------------------- */
.abertura{
  padding-block:clamp(4rem,9vw,7rem) clamp(3rem,6vw,5rem);
  position:relative;isolation:isolate;overflow:hidden;
}

/* A foto ocupa o hero inteiro e o título fica por cima. Duas camadas
   separadas de propósito:
     ::before  a imagem, com opacidade, para ela ceder ao texto
     ::after   o véu de legibilidade, mais denso à esquerda, que é onde o
               texto mora. Não é enfeite: é o que faz o título passar em AA
               por cima de uma foto com LED aceso e piso claro.
   Sem a segunda camada, o botão vazado sobre a foto seria ilegível. */
.abertura::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("img/hero-fundo.jpg") center/cover no-repeat;
  background-image:image-set(url("img/hero-fundo.webp") type("image/webp"),
                             url("img/hero-fundo.jpg") type("image/jpeg"));
  opacity:.55;
}
.abertura::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(26,25,26,.94) 0%,rgba(26,25,26,.86) 38%,rgba(26,25,26,.58) 72%,rgba(26,25,26,.5) 100%),
    linear-gradient(to bottom,rgba(26,25,26,.5) 0%,rgba(26,25,26,0) 20%,rgba(26,25,26,.35) 58%,rgba(26,25,26,.92) 100%);
}

@media (max-width:900px){
  .abertura::before{
    background-image:image-set(url("img/hero-fundo-1100.webp") type("image/webp"),
                               url("img/hero-fundo-1100.jpg") type("image/jpeg"));
    opacity:.42;
  }
  /* no celular o texto ocupa a largura toda: o véu deixa de ser direcional */
  .abertura::after{background:rgba(26,25,26,.82)}
}

/* O selo é a porta de volta para o site do grupo, então é link e não
   parágrafo: ganha a seta ↗ da casa, estado de hover e área de clique de
   pílula inteira. Fica com margem própria porque como <a> ele é inline. */
.abertura__selo{
  display:inline-flex;align-items:center;gap:.6em;
  background:rgba(26,25,26,.5);
  font-family:"Raleway",sans-serif;font-weight:700;
  font-size:0.816rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--texto-medio);text-decoration:none;
  border:1px solid var(--filete);border-radius:var(--r-pilula);
  padding:.5em 1.05em;margin-bottom:clamp(1.5rem,3vw,2.25rem);
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.abertura__selo:hover{
  color:var(--papel);
  border-color:var(--filete-forte);
  background:rgba(26,25,26,.75);
}
.abertura__selo .seta{
  display:inline-block;color:var(--batido);
  transition:transform .22s var(--curva);
}
.abertura__selo:hover .seta{transform:translate(2px,-2px)}

.abertura h1{
  font-size:clamp(2.3rem,1.4rem + 4vw,4.35rem);
  font-weight:300;max-width:19ch;
}
.abertura h1 strong{display:block;font-weight:800}

.abertura__texto{
  margin-top:clamp(1.4rem,2.5vw,1.9rem);
  color:var(--texto-medio);
  font-size:clamp(1.05rem,1rem + .35vw,1.25rem);
  max-width:56ch;
}
.abertura__acoes{
  margin-top:clamp(2rem,3.5vw,2.75rem);
  display:flex;flex-wrap:wrap;gap:.9rem;
}

/* os quatro selos, em régua de filete */
.pilares{
  margin-top:clamp(3rem,6vw,4.5rem);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--filete);
}
.pilar{
  padding:1.5rem 1.5rem 0 0;
  border-top:2px solid transparent;margin-top:-1px;
}
.pilar:first-child{border-top-color:var(--batido)}
.pilar b{
  display:block;font-family:"Raleway",sans-serif;font-weight:800;
  font-size:1.14rem;letter-spacing:.02em;color:var(--papel);margin-bottom:.4rem;
}
.pilar span{display:block;color:var(--texto-medio);font-size:1.104rem;line-height:1.55}

/* -------------------------------------------------------------------------
   7. Risco
   ------------------------------------------------------------------------- */
.risco{background:var(--parede-2);padding-block:var(--ritmo)}
.risco__grade{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--filete);
  border:1px solid var(--filete);border-radius:var(--r-modulo);
  /* o overflow recorta a entrada: a primeira caixa aparece vindo de fora
     da moldura em vez de surgir do nada no meio dela */
  overflow:hidden;isolation:isolate;
  margin-top:clamp(2rem,4vw,3rem);
}
.risco__item{background:var(--parede-2);padding:clamp(1.4rem,2.4vw,2rem)}
.risco__item svg{width:26px;height:26px;color:var(--batido);margin-bottom:1rem}
.risco__item b{
  display:block;font-family:"Raleway",sans-serif;font-weight:800;
  font-size:1.02rem;color:var(--papel);margin-bottom:.45rem;
}
.risco__item p{color:var(--texto-mudo);font-size:1.128rem;line-height:1.6}

/* -------------------------------------------------------------------------
   8. Continuidade - a seção que carrega o site
   ------------------------------------------------------------------------- */
/* A trilha do DRS: régua graduada, não grade de cartões.
   Um filete atravessa a seção inteira e cada passo desce de um traço, como
   graduação de instrumento. É o que separa "sequência" de "quatro caixas". */
.trilha{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.25rem,2.5vw,2.5rem);
  border-top:1px solid var(--filete);
}
.trilha__passo{position:relative;padding-top:1.9rem}
/* o traço da graduação, descendo do filete */
.trilha__passo::before{
  content:"";position:absolute;top:0;left:0;width:1px;height:16px;
  background:var(--filete-forte);
}
.trilha__passo:first-child::before{background:var(--batido);width:2px;height:22px}
.trilha__n{
  display:block;font-family:"Raleway",sans-serif;font-weight:800;
  font-size:0.864rem;letter-spacing:.16em;color:var(--batido);margin-bottom:.75rem;
}
.trilha__passo b{
  display:block;font-family:"Raleway",sans-serif;font-weight:800;
  font-size:1.05rem;color:var(--papel);margin-bottom:.5rem;line-height:1.25;
}
.trilha__passo p{color:var(--texto-mudo);font-size:1.128rem;line-height:1.6}

/* o destaque dos trinta dias: o argumento mais forte da página, e o único
   bloco que recebe preenchimento cheio no site inteiro */
.trinta{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  border:1px solid var(--filete-batido);border-radius:var(--r-painel);
  background:var(--modulo);
  padding:clamp(1.75rem,3.5vw,3rem);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
  position:relative;isolation:isolate;overflow:hidden;
}
/* A foto do corredor de datacenter entra AQUI e em nenhum outro lugar,
   porque este é o único bloco que fala de operar no datacenter. Vai como
   matéria de fundo, atrás de um véu chapado: sem gradiente, e escura o
   bastante para o texto passar em AA por cima. */
.trinta::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("img/faixa-datacenter.jpg") center/cover no-repeat;
  background-image:image-set(url("img/faixa-datacenter.webp") type("image/webp"),
                             url("img/faixa-datacenter.jpg") type("image/jpeg"));
  opacity:.62;
}
.trinta::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(26,25,26,.62);
}
.trinta__numero{
  font-family:"Raleway",sans-serif;font-weight:800;
  font-size:clamp(3.5rem,3rem + 5vw,6.5rem);line-height:.85;
  color:var(--batido);letter-spacing:-.04em;
}
.trinta__numero span{
  display:block;font-size:.16em;letter-spacing:.19em;text-transform:uppercase;
  color:var(--texto-medio);margin-top:.7em;
}
.trinta h3{
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.9rem);font-weight:300;
  max-width:26ch;
}
.trinta > div p{
  margin-top:.9rem;color:var(--texto-medio);
  font-size:clamp(1rem,.97rem + .2vw,1.08rem);max-width:58ch;
}

/* -------------------------------------------------------------------------
   9. Serviços
   ------------------------------------------------------------------------- */
.blocos{display:grid;gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(2rem,4vw,3rem)}
.bloco{
  border:1px solid var(--filete);border-radius:var(--r-painel);
  padding:clamp(1.5rem,3vw,2.4rem);
  display:grid;grid-template-columns:minmax(0,20rem) 1fr;
  gap:clamp(1.25rem,3vw,3rem);
  transition:border-color .2s ease;
}
.bloco:hover{border-color:var(--filete-forte)}
.bloco__cabeca{display:flex;flex-direction:column;gap:.85rem}
.bloco__cabeca svg{width:28px;height:28px;color:var(--batido)}
.bloco__cabeca h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);font-weight:800;color:var(--papel)}
.bloco__cabeca p{color:var(--texto-mudo);font-size:1.08rem;line-height:1.6}

.itens{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--filete);
  border:1px solid var(--filete);border-radius:var(--r-modulo);overflow:hidden}
.item{background:var(--parede);padding:1.1rem 1.25rem}
.secao--plano .item{background:var(--parede-2)}
.item b{
  display:block;font-family:"Raleway",sans-serif;font-weight:800;
  font-size:1.128rem;color:var(--texto);margin-bottom:.3rem;
}
.item span{display:block;color:var(--texto-mudo);font-size:1.056rem;line-height:1.55}

/* a tabela do firewall: conteúdo consultivo, tratado como tabela mesmo */
.tabela{width:100%;border-collapse:collapse;margin-top:1.25rem;font-size:1.128rem}
.tabela caption{
  text-align:left;color:var(--texto-mudo);font-size:1.056rem;
  padding-bottom:.9rem;line-height:1.6;
}
.tabela th,.tabela td{
  text-align:left;padding:.85rem 1rem .85rem 0;
  border-bottom:1px solid var(--filete);vertical-align:top;
}
.tabela thead th{
  font-family:"Raleway",sans-serif;font-weight:700;
  font-size:0.792rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--texto-mudo);padding-bottom:.7rem;
}
.tabela tbody th{font-family:"Mulish",sans-serif;font-weight:500;color:var(--texto-medio)}
.tabela tbody td:first-of-type{
  font-family:"Raleway",sans-serif;font-weight:800;color:var(--batido);white-space:nowrap;
}
.tabela td:last-child,.tabela th:last-child{padding-right:0}
.tabela tbody tr:last-child th,.tabela tbody tr:last-child td{border-bottom:0}

/* -------------------------------------------------------------------------
   10. Como funciona
   ------------------------------------------------------------------------- */
/* Foto de apoio da seção de implantação: faixa larga e baixa, entre a cabeça
   e a pauta. Quebra o trecho mais pesado de texto da página. Sem legenda,
   pelo mesmo motivo da foto do hero. */
.vista-faixa{
  margin:clamp(2rem,4vw,3rem) 0 0;
  border:1px solid var(--filete);border-radius:var(--r-painel);
  overflow:hidden;
}
.vista-faixa img{
  width:100%;height:clamp(180px,26vw,300px);object-fit:cover;object-position:center 58%;
  display:block;
}

/* A agenda: linhas de largura inteira, número grande na coluna estreita.
   Um filete por linha, nunca dois - a lista não vira tabela de especificação. */
.agenda{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--filete)}
.agenda__item{
  display:grid;grid-template-columns:clamp(3.5rem,6vw,5.5rem) minmax(0,15rem) 1fr;
  gap:clamp(1rem,2.5vw,2.5rem);align-items:baseline;
  padding:clamp(1.4rem,2.6vw,2.1rem) 0;
  border-bottom:1px solid var(--filete);
}
.agenda__n{
  font-family:"Raleway",sans-serif;font-weight:800;line-height:1;
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.4rem);color:var(--batido);
}
.agenda__item b{
  font-family:"Raleway",sans-serif;font-weight:800;
  font-size:clamp(1.08rem,1rem + .4vw,1.3rem);color:var(--papel);
}
/* 1.08 e não 1.176: a escala de 20% jogava este corpo acima do parágrafo de
   abertura da seção (1.14rem) e invertia a leitura. Mesmo motivo em
   .alcance p, .bloco__cabeca p e .rodape__col a. */
.agenda__item p{color:var(--texto-medio);font-size:1.08rem;line-height:1.65;max-width:58ch}

/* -------------------------------------------------------------------------
   11. Cobertura
   ------------------------------------------------------------------------- */
.cobertura__grade{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.5rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.alcance{
  border:1px solid var(--filete);border-radius:var(--r-painel);
  padding:clamp(1.5rem,3vw,2.25rem);
}
.alcance--nacional{border-color:var(--filete-batido)}
.alcance__rotulo{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:"Raleway",sans-serif;font-weight:700;
  font-size:0.792rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--texto-mudo);margin-bottom:1.1rem;
}
.alcance h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);font-weight:800;color:var(--papel)}
.alcance p:not(.alcance__rotulo){
  margin-top:.75rem;color:var(--texto-medio);font-size:1.08rem;line-height:1.65;
}
.alcance ul{margin-top:1.25rem;display:grid;gap:.6rem}
.alcance li{
  color:var(--texto-mudo);font-size:1.128rem;line-height:1.55;
  padding-left:1.35rem;position:relative;
}
.alcance li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:1px;background:var(--batido);
}

/* -------------------------------------------------------------------------
   12. Presença física
   ------------------------------------------------------------------------- */
.presenca__grade{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,4vw,3.5rem);
  align-items:center;
}
.presenca__foto{
  border:1px solid var(--filete);border-radius:var(--r-painel);overflow:hidden;
  position:relative;
}
.presenca__foto img{width:100%;aspect-ratio:16/9;object-fit:cover;
  filter:brightness(.82) contrast(1.04)}
.presenca__legenda{
  font-family:"Raleway",sans-serif;font-weight:700;
  font-size:0.768rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--texto-mudo);padding:.85rem 1.1rem;
  border-top:1px solid var(--filete);
}
.presenca__numeros{
  margin-top:clamp(1.75rem,3vw,2.5rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;
  border-top:1px solid var(--filete);padding-top:1.5rem;
}
.presenca__numeros b{
  display:block;font-family:"Raleway",sans-serif;font-weight:800;
  font-size:clamp(1.5rem,1.3rem + .9vw,2rem);color:var(--batido);line-height:1;
}
.presenca__numeros span{
  display:block;margin-top:.5rem;color:var(--texto-mudo);
  font-size:0.936rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;
  font-family:"Raleway",sans-serif;font-weight:700;
}

/* -------------------------------------------------------------------------
   13. Contato - painel herdado do Grupo 3D e do ERP
   ------------------------------------------------------------------------- */
.contato{padding-block:var(--ritmo);background:var(--parede-2)}
.contato__grade{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.contato__titulo{font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem);font-weight:300}
.contato__texto{
  margin-top:1.1rem;color:var(--texto-medio);
  font-size:clamp(1rem,.97rem + .25vw,1.1rem);max-width:48ch;
}

.dados{margin-top:clamp(2rem,3.5vw,2.75rem);display:grid;gap:1.35rem}
.dados li{display:grid;grid-template-columns:22px 1fr;gap:.4rem 1rem;align-items:start}
.dados svg{width:20px;height:20px;color:var(--batido);grid-row:span 2;margin-top:.15rem}
.dados b{
  font-family:"Raleway",sans-serif;font-weight:700;
  font-size:0.792rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--texto-mudo);
}
.dados a,.dados span{color:var(--texto);text-decoration:none;font-size:1rem;line-height:1.5}
.dados a:hover{color:var(--batido)}

.form{
  background:var(--grafite);border-radius:var(--r-painel);
  padding:clamp(1.75rem,3vw,2.5rem);
  display:flex;flex-direction:column;
  border:1px solid var(--filete);
}
.form h3{
  font-family:"Raleway",sans-serif;font-weight:800;color:var(--papel-marca);
  font-size:clamp(1.2rem,1.8vw,1.45rem);letter-spacing:-.02em;line-height:1.2;
}
.form > p{margin-top:.55rem;color:#c9c9c9;font-size:1.104rem}
.form__campos{margin-top:1.9rem;display:grid;gap:1.15rem}
.form__campos[hidden]{display:none}

.campo{margin:0}
.campo label{
  display:block;font-family:"Raleway",sans-serif;font-size:0.816rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--batido);
  margin-bottom:.55rem;line-height:1.75;
}
.campo input,.campo textarea{
  width:100%;background:transparent;color:var(--papel-marca);
  border:0;border-bottom:1px solid rgba(255,255,255,.28);border-radius:0;
  padding:.7rem 0;font-family:"Mulish",sans-serif;font-weight:500;font-size:1rem;
  line-height:1;transition:border-color .18s ease;
}
.campo textarea{min-height:6.5rem;resize:vertical;line-height:1.3;display:block}
.campo input:focus,.campo textarea:focus{outline:0;border-bottom-color:var(--batido)}
.campo .obrig{color:var(--batido);text-decoration:none;border:0;margin-left:.2em}

.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__acao{margin-top:.4rem;display:flex}
.form button[type=submit]{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.7em;
  font-family:"Raleway",sans-serif;font-weight:700;font-size:0.984rem;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;
  padding:1.05em 1.7em;border:0;border-radius:var(--r-pilula);cursor:pointer;
  background:var(--batido);color:var(--grafite);
  transition:background .18s ease,opacity .18s ease;
}
.form button[type=submit]:hover{background:var(--batido-forte)}
.form button[type=submit][disabled]{opacity:.55;cursor:progress}

.form__recado{margin-top:1.9rem;color:#c9c9c9;font-size:1rem;line-height:1.65}
.form__recado::before{
  content:"";display:block;width:clamp(46px,6vw,72px);height:3px;
  border-radius:var(--r-pilula);background:var(--batido);margin-bottom:1.15rem;
}
.form__recado strong{color:var(--batido);font-weight:700}
.form__recado--erro::before{background:var(--batido-claro)}
.form__recado--erro strong{color:var(--batido-claro)}

/* -------------------------------------------------------------------------
   14. Rodapé
   ------------------------------------------------------------------------- */
.rodape{border-top:1px solid var(--filete);padding-block:clamp(3rem,5vw,4.5rem) 2rem}
.rodape__grade{
  display:grid;grid-template-columns:minmax(0,1.4fr) 1fr 1fr;
  gap:clamp(2rem,4vw,3.5rem);
}
.rodape__marca img{height:44px;width:auto}
.rodape__end{margin-top:1.5rem;color:var(--texto-mudo);font-size:1.128rem;line-height:1.7}
.rodape__end a{color:var(--texto-medio);text-decoration:none}
.rodape__end a:hover{color:var(--batido)}

.rodape__col h3{
  font-family:"Raleway",sans-serif;font-weight:700;
  font-size:0.792rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--texto-mudo);margin-bottom:1.1rem;
}
.rodape__col ul{display:grid;gap:.7rem}
.rodape__col a{
  color:var(--texto-medio);text-decoration:none;font-size:1.08rem;
  display:inline-flex;gap:.5em;align-items:baseline;
}
.rodape__col a:hover{color:var(--batido)}
.rodape__col a span{color:var(--texto-mudo);font-size:0.984rem}

.rodape__fim{
  margin-top:clamp(2.5rem,4vw,3.5rem);padding-top:1.5rem;
  border-top:1px solid var(--filete);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;
  color:var(--texto-mudo);font-size:1.02rem;
}

/* -------------------------------------------------------------------------
   15. WhatsApp flutuante
   ------------------------------------------------------------------------- */
.zap{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--batido);color:var(--grafite);
  box-shadow:0 8px 28px -8px rgba(0,0,0,.7);
  transition:transform .25s var(--curva),opacity .25s ease;
}
.zap svg{width:27px;height:27px}
.zap--recolhido{opacity:0;transform:scale(.6);pointer-events:none}

/* -------------------------------------------------------------------------
   16. Movimento
   ------------------------------------------------------------------------- */
.surge{
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--curva),transform .6s var(--curva);
}
.surge.visivel{opacity:1;transform:none}
.surge--2{transition-delay:.07s}
.surge--3{transition-delay:.14s}

/* Entrada lateral das quatro caixas de risco.
   Por que existe: os quatro riscos são uma lista que se acumula, e entrar em
   sequência da esquerda para a direita dá a elas a ordem de leitura em vez de
   despejar as quatro de uma vez.
   O detalhe que faz funcionar: cada caixa desliza POR TRÁS da vizinha da
   esquerda, via z-index decrescente. Sem isso, a caixa em movimento pinta o
   próprio fundo por cima da que já assentou e deixa um rastro. */
.desliza{
  position:relative;
  opacity:0;transform:translateX(-52px);
  transition:opacity .45s var(--curva),
             transform .8s var(--curva);
  transition-delay:calc(var(--passo,0) * 110ms);
  z-index:calc(10 - var(--passo,0));
}
.desliza.visivel{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .surge,.desliza{opacity:1;transform:none;transition-delay:0s}
}

/* -------------------------------------------------------------------------
   17. Telas estreitas
   ------------------------------------------------------------------------- */
@media (max-width:1080px){
  .bloco{grid-template-columns:1fr}
  .trinta{grid-template-columns:1fr;gap:1.5rem}
  .trinta__numero{font-size:clamp(3rem,10vw,4.5rem)}
}

@media (max-width:900px){
  .pilares,.risco__grade,.trilha{grid-template-columns:repeat(2,1fr)}
  .risco__grade{border-radius:var(--r-modulo)}
  .presenca__grade,.contato__grade,.cobertura__grade{grid-template-columns:1fr}
  /* a coluna do meio some antes das outras: título sobe para junto do número */
  .agenda__item{grid-template-columns:clamp(3rem,6vw,4.5rem) 1fr}
  .agenda__item b{grid-column:2}
  .agenda__item p{grid-column:2;margin-top:.45rem}
  .rodape__grade{grid-template-columns:1fr 1fr}
  .rodape__marca{grid-column:1/-1}
}

/* 1180 e não 960: depois que os rótulos subiram 20%, a barra com cinco links
   mais a pílula só cabe numa linha a partir daí. Medido: a 1100 sobravam -60px.
   Nav que não cabe vira menu, não vira duas linhas.
   Este número está DUPLICADO no script.js, no matchMedia que controla a
   alavanca. Mexeu aqui, mexa lá. */
@media (max-width:1180px){
  .trilho__alavanca{display:block}
  .trilho__nav{
    position:fixed;inset:var(--trilho-h) 0 auto;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--parede);border-bottom:1px solid var(--filete);
    padding:.5rem var(--calha) 1.5rem;
    max-height:calc(100dvh - var(--trilho-h));overflow-y:auto;
  }
  .trilho__nav a{padding:1rem 0;border-bottom:1px solid var(--filete);font-size:0.984rem}
  .trilho__nav a[aria-current]::after{display:none}
  .trilho__nav .chapa{margin-top:1.25rem;border-bottom:0;justify-content:center}
}

@media (max-width:640px){
  .pilares,.risco__grade,.trilha,.itens{grid-template-columns:1fr}
  /* empilhada, a régua perde o sentido de linha horizontal: o traço passa
     a correr na vertical, à esquerda de cada passo. */
  .trilha{border-top:0}
  .trilha__passo{padding-top:0;padding-left:1.5rem}
  .trilha__passo::before{top:.35rem;width:1px;height:calc(100% - .35rem)}
  .trilha__passo:first-child::before{width:2px;height:calc(100% - .35rem)}
  /* empilhados, os selos perdem a separação que as colunas davam */
  .pilar + .pilar{border-top:1px solid var(--filete);padding-top:1.4rem;margin-top:.6rem}
  .pilar:first-child{border-top-color:var(--batido)}
  .presenca__numeros{grid-template-columns:1fr;gap:1.5rem}
  .rodape__grade{grid-template-columns:1fr}
  .abertura__acoes .chapa{width:100%}
  .pilar{padding-right:0}
  .agenda__item{grid-template-columns:1fr;gap:.6rem}
}