@charset "utf-8";

/* =========================================================================
   3D ERP - folha de estilo

   Família: divide com o Grupo 3D 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: onde o site do grupo é uma parede técnica com placas de
   grafite chapadas, o do ERP é claro, arredondado e em camadas. As seções
   escuras entram como lajes levantadas do papel, os módulos aparecem em nuvem
   de pastilhas e os títulos de seção usam contraste de peso dentro da linha,
   não uma segunda linha em Light. Sem grade técnica de fundo.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root{
  /* constantes da marca */
  --batido:#ffcc29;
  --batido-forte:#f5c01d;
  --batido-claro:#ffd76b;
  --grafite:#363435;
  --grafite-2:#43413f;
  --grafite-fundo:#2b292a;
  --papel-marca:#f1efee;

  /* papéis semânticos - tema claro */
  --fundo:#f7f6f5;
  --fundo-2:#eeecea;
  --cartao:#ffffff;
  --texto:#2b292a;
  --texto-medio:#63605d;
  --texto-mudo:#8a8683;
  --escuro:#2f2d2e;          /* laje escura sobre o papel */
  --escuro-2:#3b3839;        /* campo interno da laje */
  --escuro-texto:#e8e5e3;
  --escuro-mudo:#a8a4a1;
  --escuro-filete:rgba(255,255,255,.12);
  --filete:#e2dfdc;
  --filete-forte:#cdc9c6;
  --sombra:0 2px 4px -2px rgba(43,41,42,.06),0 16px 40px -24px rgba(43,41,42,.35);
  --sombra-alta:0 4px 8px -4px rgba(43,41,42,.1),0 28px 64px -32px rgba(43,41,42,.45);

  /* medidas */
  --calha:clamp(1.25rem,5vw,4rem);
  --max:1280px;
  --ritmo:clamp(4rem,8vw,7.5rem);
  --trilho-h:66px;
  --borda:clamp(10px,1.4vw,18px);

  /* escala de forma, uma só:
     controle e pastilha = pílula; cartão = 20; laje e painel = 28;
     campo de formulário = linha, sem raio (igual ao do grupo) */
  --r-pilula:999px;
  --r-cartao:20px;
  --r-laje:clamp(24px,3.2vw,40px);
  --r-painel:28px;

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

@media (prefers-color-scheme:dark){
  :root{
    --fundo:#1a1919;
    --fundo-2:#211f20;
    --cartao:#262424;
    --texto:#f4f2f1;
    --texto-medio:#b5b1ae;
    --texto-mudo:#8a8683;
    --escuro:#2a2829;
    --escuro-2:#353233;
    --escuro-texto:#eceae8;
    --escuro-mudo:#a8a4a1;
    --filete:#333131;
    --filete-forte:#474444;
    --sombra:0 2px 4px -2px rgba(0,0,0,.5),0 16px 40px -24px rgba(0,0,0,.8);
    --sombra-alta:0 4px 8px -4px rgba(0,0,0,.55),0 28px 64px -32px rgba(0,0,0,.9);
  }
}

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

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

body{
  margin:0;
  background:var(--fundo);
  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;
  text-wrap:pretty;
  padding-top:calc(var(--trilho-h) + var(--borda) + .4rem);
  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;
}
/* a ênfase mora dentro da linha: mesma família, peso maior. */
h1 strong,h2 strong,h3 strong{font-weight:800}

p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

::selection{background:var(--batido);color:var(--grafite)}
:focus-visible{outline:2px solid var(--batido);outline-offset:3px;border-radius:6px}

.env{max-width:var(--max);margin-inline:auto;padding-inline:var(--calha)}
.env--estreito{max-width:56rem}

.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. Vocabulário
   ------------------------------------------------------------------------- */

/* legenda: caixa alta travada, o rótulo herdado do grupo */
.legenda{
  font-family:"Raleway",sans-serif;
  font-size:.7rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;line-height:1;
}

/* selo: a pastilha de abertura, no lugar da etiqueta chapada do grupo */
.selo{
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--cartao);color:var(--texto);
  box-shadow:inset 0 0 0 1px var(--filete),var(--sombra);
  border-radius:var(--r-pilula);
  padding:.55em 1.05em .55em .7em;
  font-family:"Raleway",sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.02em;
}
.selo i{color:var(--batido);font-size:1.05rem}
.selo--gravado{
  background:rgba(255,255,255,.08);color:var(--escuro-texto);
  box-shadow:inset 0 0 0 1px var(--escuro-filete);
}

/* chapa: o botão da casa */
.chapa{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-family:"Raleway",sans-serif;font-weight:700;
  font-size:.82rem;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),box-shadow .18s ease;
}
.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--vazada{
  background:var(--cartao);color:var(--texto);
  box-shadow:inset 0 0 0 1px var(--filete-forte);
}
.chapa--vazada:hover{background:var(--fundo-2)}
.chapa--linha{
  background:transparent;color:var(--papel-marca);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
}
.chapa--linha:hover{
  background:var(--papel-marca);color:var(--grafite);
  box-shadow:inset 0 0 0 1px var(--papel-marca);
}

/* elo: o link com seta que fecha um bloco, no padrão do Bling */
.elo{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:"Raleway",sans-serif;font-weight:700;font-size:.92rem;
  color:var(--texto);text-decoration:none;
  padding-bottom:.35rem;border-bottom:2px solid var(--batido);
  transition:gap .2s var(--curva);
}
.elo:hover{gap:.85em}

/* laje: a seção escura levantada do papel */
.laje{
  background:var(--escuro);color:var(--escuro-texto);
  border-radius:var(--r-laje);
  padding-block:var(--ritmo);
  margin-inline:var(--borda);
  overflow:hidden;
}

/* cabeça de seção centralizada */
.cabeca{max-width:44rem;margin-inline:auto;text-align:center}
.cabeca h2{
  font-weight:500;
  font-size:clamp(1.85rem,3.6vw,2.85rem);
  line-height:1.14;
}
.cabeca p{
  margin-top:1.1rem;color:var(--texto-medio);
  max-width:38em;margin-inline:auto;
}
.cabeca--gravada h2{color:var(--papel-marca)}
.cabeca--gravada p{color:var(--escuro-mudo)}
.cabeca .selo{margin-bottom:1.35rem}

/* -------------------------------------------------------------------------
   4. Trilho
   Pílula clara: a do grupo é grafite. É a primeira diferença que se vê.
   ------------------------------------------------------------------------- */
.trilho{
  position:fixed;top:var(--borda);left:0;right:0;z-index:100;
  padding-inline:var(--borda);pointer-events:none;
}
.trilho__env{
  max-width:var(--max);margin-inline:auto;
  min-height:var(--trilho-h);pointer-events:auto;
  background:var(--cartao);border-radius:var(--r-pilula);
  padding:.5rem .6rem .5rem clamp(1.1rem,2.2vw,1.6rem);
  display:flex;align-items:center;gap:clamp(.8rem,2.4vw,2rem);
  box-shadow:inset 0 0 0 1px var(--filete),var(--sombra);
}
.trilho__marca{display:flex;align-items:center;flex:none;text-decoration:none}
.trilho__marca img{width:clamp(92px,10vw,116px)}
.trilho__marca--escuro{display:none}
@media (prefers-color-scheme:dark){
  .trilho__marca--claro{display:none}
  .trilho__marca--escuro{display:flex}
}
.trilho__nav{display:flex;gap:clamp(.9rem,2vw,1.9rem);margin-left:auto}
.trilho__nav a{
  font-family:"Raleway",sans-serif;font-size:.88rem;font-weight:700;
  color:var(--texto-medio);text-decoration:none;
  padding:.5rem 0;position:relative;transition:color .18s ease;
}
.trilho__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--batido);transform:scaleX(0);transform-origin:left;
  transition:transform .24s var(--curva);
}
.trilho__nav a:hover,.trilho__nav a[aria-current="true"]{color:var(--texto)}
.trilho__nav a:hover::after,.trilho__nav a[aria-current="true"]::after{transform:scaleX(1)}
.trilho__fone{
  font-family:"Raleway",sans-serif;font-weight:700;font-size:.88rem;
  color:var(--texto);text-decoration:none;white-space:nowrap;
  padding-left:clamp(.9rem,2vw,1.5rem);
  border-left:1px solid var(--filete);
}
.trilho__fone:hover{color:var(--batido-forte)}
.trilho__acao{font-size:.72rem;padding:.95em 1.4em}
.trilho__alavanca{
  display:none;margin-left:auto;
  background:transparent;border:0;cursor:pointer;
  color:var(--texto);padding:.55rem;border-radius:var(--r-pilula);
  font-size:1.4rem;line-height:1;
}

/* -------------------------------------------------------------------------
   5. Abertura
   ------------------------------------------------------------------------- */
.abertura{padding-block:clamp(1.75rem,4vw,3.5rem) clamp(3rem,6vw,4.5rem)}
.abertura__grade{
  display:grid;gap:clamp(2.25rem,4.5vw,4rem);
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:center;
}
.abertura__titulo{
  margin-top:1.4rem;font-weight:500;
  font-size:clamp(2.2rem,4.2vw,3.1rem);line-height:1.08;
}
/* a ênfase abre a segunda linha: o título fecha em duas, sempre */
.abertura__titulo strong{display:block}
.abertura__texto{
  margin-top:1.25rem;max-width:32em;color:var(--texto-medio);
  font-size:clamp(1.05rem,.98rem + .35vw,1.18rem);line-height:1.62;
}
.abertura__acoes{
  margin-top:clamp(1.5rem,2.6vw,2rem);
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.1rem;
}
.abertura__nota{
  display:flex;align-items:center;gap:.5em;
  font-size:.88rem;color:var(--texto-mudo);
}
.abertura__nota i{color:var(--batido-forte);font-size:1.05rem}

/* seletor de setor: o cartão claro que abre os cinco sistemas */
.seletor{
  background:var(--cartao);border-radius:var(--r-painel);
  padding:clamp(1.1rem,2.2vw,1.6rem);
  box-shadow:inset 0 0 0 1px var(--filete),var(--sombra-alta);
}
.seletor__topo{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.35rem .6rem 1.1rem;
}
.seletor__topo .legenda{color:var(--texto-mudo)}
.seletor__topo small{font-size:.76rem;color:var(--texto-mudo)}
.porta{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:.1rem 1rem;
  width:100%;text-align:left;cursor:pointer;
  background:transparent;border:0;border-radius:var(--r-cartao);
  padding:.85rem .9rem;text-decoration:none;color:inherit;
  transition:background .18s ease;
}
.porta:hover{background:var(--fundo-2)}
.porta > i:first-child{
  grid-row:1 / span 2;
  font-size:1.35rem;color:var(--texto);
  width:2.6rem;height:2.6rem;border-radius:var(--r-pilula);
  background:var(--fundo-2);
  display:grid;place-items:center;
  transition:background .18s ease,color .18s ease;
}
.porta:hover > i:first-child{background:var(--batido);color:var(--grafite)}
.porta__nome{font-family:"Raleway",sans-serif;font-weight:700;font-size:1.02rem}
.porta__leg{grid-column:2;font-size:.85rem;color:var(--texto-medio);line-height:1.4}
.porta__seta{
  grid-row:1 / span 2;grid-column:3;
  color:var(--texto-mudo);font-size:1.05rem;
  transition:transform .22s var(--curva),color .18s ease;
}
.porta:hover .porta__seta{transform:translate(3px,-3px);color:var(--texto)}

/* -------------------------------------------------------------------------
   6. Console dos sistemas
   ------------------------------------------------------------------------- */
.console{margin-top:0}
.abas{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.35rem 1.75rem;
  margin-top:clamp(2.25rem,4vw,3.25rem);
  padding-bottom:.2rem;
  border-bottom:1px solid var(--escuro-filete);
}
.abas__b{
  background:transparent;border:0;cursor:pointer;
  font-family:"Raleway",sans-serif;font-weight:700;font-size:1rem;
  color:var(--escuro-mudo);
  padding:.85rem .3rem;position:relative;
  display:inline-flex;align-items:center;gap:.55em;
  transition:color .18s ease;
}
.abas__b i{font-size:1.2rem}
.abas__b::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  border-radius:var(--r-pilula);background:var(--batido);
  transform:scaleX(0);transform-origin:center;
  transition:transform .26s var(--curva);
}
.abas__b:hover{color:var(--papel-marca)}
.abas__b[aria-selected="true"]{color:var(--papel-marca)}
.abas__b[aria-selected="true"]::after{transform:scaleX(1)}

.ficha{margin-top:clamp(2rem,3.5vw,2.75rem);text-align:center}
.ficha[hidden]{display:none}
.ficha__lema{
  font-family:"Raleway",sans-serif;font-weight:500;
  font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.2;
  color:var(--papel-marca);max-width:22em;margin-inline:auto;
}
.ficha__quem{
  margin-top:1rem;color:var(--escuro-mudo);
  max-width:40em;margin-inline:auto;
}
/* nuvem de pastilhas: a lista de módulos não vira tabela nem coluna de itens */
.ficha__mods{
  list-style:none;margin:clamp(1.75rem,3vw,2.5rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;
}
.ficha__mods li{
  display:inline-flex;align-items:center;gap:.55em;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px var(--escuro-filete);
  border-radius:var(--r-pilula);
  padding:.6rem 1.05rem;
  font-size:.9rem;color:#dcd9d7;
}
.ficha__mods i{color:var(--batido);font-size:1.05rem}
.ficha__acao{margin-top:clamp(1.85rem,3vw,2.5rem)}

/* -------------------------------------------------------------------------
   6.A Demonstração
   O quadro imita o produto por dentro, então fica numa moldura neutra: nada
   de grafite nem amarelo aqui, para o visitante ler aquilo como o sistema.
   ------------------------------------------------------------------------- */
.demo{padding-block:var(--ritmo) 0}
.quadro-demo{
  margin-top:clamp(2rem,3.5vw,3rem);
  border-radius:var(--r-painel);
  overflow:hidden;background:#f4f7f9;
  box-shadow:inset 0 0 0 1px var(--filete),var(--sombra-alta);
}
.quadro-demo iframe{
  display:block;width:100%;border:0;
  height:clamp(560px,64vh,720px);
}
/* no telefone o conteúdo empilha, então o quadro precisa de mais altura */
@media (max-width:768px){
  .quadro-demo iframe{height:clamp(600px,80vh,760px)}
}
.demo__acao{margin-top:clamp(1.5rem,2.5vw,2rem);display:flex;justify-content:center}

/* -------------------------------------------------------------------------
   7. Recursos: faixa de cartões
   ------------------------------------------------------------------------- */
.recursos{padding-block:var(--ritmo)}
.recursos__faixa{
  margin-top:clamp(2.25rem,4vw,3.25rem);
  display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(272px,1fr);
  gap:clamp(.9rem,1.5vw,1.25rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.75rem;
  scrollbar-width:thin;
}
.recurso{
  scroll-snap-align:start;
  background:var(--cartao);border-radius:var(--r-cartao);
  box-shadow:inset 0 0 0 1px var(--filete),var(--sombra);
  padding:clamp(1.4rem,2.2vw,1.75rem);
  display:flex;flex-direction:column;gap:.7rem;
}
.recurso i{
  font-size:1.35rem;color:var(--grafite);
  width:2.8rem;height:2.8rem;border-radius:var(--r-pilula);
  background:var(--batido);display:grid;place-items:center;
  margin-bottom:.35rem;
}
.recurso h3{font-weight:700;font-size:1.1rem;line-height:1.25}
.recurso p{font-size:.94rem;line-height:1.6;color:var(--texto-medio)}
.recurso__lista{
  list-style:none;margin:.35rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.35rem;
}
/* setas da faixa: só aparecem quando há mais cartão do que cabe na tela */
.setas{display:flex;gap:.6rem;margin-top:1.25rem}
.setas[hidden]{display:none}
.seta-b{
  width:2.9rem;height:2.9rem;border-radius:var(--r-pilula);
  background:var(--cartao);cursor:pointer;border:0;
  box-shadow:inset 0 0 0 1px var(--filete-forte);
  display:grid;place-items:center;font-size:1.15rem;color:var(--texto);
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.seta-b:hover:not([disabled]){background:var(--batido);color:var(--grafite);box-shadow:none}
.seta-b[disabled]{opacity:.35;cursor:default}

.recurso__lista li{
  font-family:"Raleway",sans-serif;font-weight:700;
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--fundo-2);color:var(--texto-medio);
  padding:.4em .75em;border-radius:var(--r-pilula);
}

/* -------------------------------------------------------------------------
   8. Destaques alternados
   ------------------------------------------------------------------------- */
.destaques{padding-block:0 var(--ritmo);display:grid;gap:clamp(1rem,2vw,1.5rem)}
.destaque{
  background:var(--cartao);border-radius:var(--r-painel);
  box-shadow:inset 0 0 0 1px var(--filete),var(--sombra);
  padding:clamp(1.75rem,3.4vw,3rem);
  display:grid;gap:clamp(1.5rem,3vw,3rem);
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  align-items:center;
}
.destaque--invertido{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
.destaque--invertido .destaque__texto{order:2}
.destaque h3{
  font-weight:500;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.2;
}
.destaque p{margin-top:.9rem;color:var(--texto-medio);max-width:34em}
.destaque .elo{margin-top:1.4rem}
/* painel de apoio: pastilhas grandes que ilustram o assunto sem simular tela */
.destaque__painel{
  background:var(--fundo-2);border-radius:var(--r-cartao);
  padding:clamp(1.25rem,2.4vw,1.75rem);
  display:flex;flex-wrap:wrap;gap:.55rem;
}
.destaque__painel span{
  display:inline-flex;align-items:center;gap:.5em;
  background:var(--cartao);border-radius:var(--r-pilula);
  box-shadow:inset 0 0 0 1px var(--filete);
  padding:.6rem 1rem;font-size:.9rem;
}
.destaque__painel i{color:var(--batido-forte);font-size:1.05rem}

/* -------------------------------------------------------------------------
   9. Implantação
   ------------------------------------------------------------------------- */
.etapas{
  list-style:none;margin:clamp(2.5rem,4.5vw,3.5rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.25rem,2.4vw,2rem);
  counter-reset:etapa;
}
.etapa{
  counter-increment:etapa;
  padding-top:2.9rem;position:relative;
}
.etapa::before{
  content:counter(etapa,decimal-leading-zero);
  position:absolute;top:0;left:0;
  font-family:"Raleway",sans-serif;font-weight:800;font-size:.86rem;
  color:var(--grafite);background:var(--batido);
  width:2.1rem;height:2.1rem;border-radius:var(--r-pilula);
  display:grid;place-items:center;
}
.etapa h3{font-weight:700;font-size:1.08rem;color:var(--papel-marca);margin-bottom:.55rem}
.etapa p{color:var(--escuro-mudo);font-size:.94rem;line-height:1.6}

/* -------------------------------------------------------------------------
   10. Por que o 3D ERP
   ------------------------------------------------------------------------- */
.porque{padding-block:var(--ritmo)}
.porque__grade{
  display:grid;gap:clamp(2rem,4vw,4rem);
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:start;
}
.porque__titulo{font-weight:500;font-size:clamp(1.85rem,3.6vw,2.7rem);line-height:1.12}
.porque__texto{margin-top:1.15rem;color:var(--texto-medio);max-width:30em}
.porque__acao{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.75rem}

.pilares{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.pilares li{
  background:var(--cartao);border-radius:var(--r-cartao);
  box-shadow:inset 0 0 0 1px var(--filete);
  padding:1.35rem 1.5rem;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3rem 1.1rem;
}
.pilares i{
  grid-row:1 / span 2;font-size:1.3rem;color:var(--grafite);
  width:2.6rem;height:2.6rem;border-radius:var(--r-pilula);
  background:var(--batido);display:grid;place-items:center;
}
.pilares h3{font-weight:700;font-size:1.06rem}
.pilares p{color:var(--texto-medio);font-size:.94rem;line-height:1.6}

/* -------------------------------------------------------------------------
   11. Contato
   O formulário é o mesmo do Grupo 3D: painel grafite, rótulo amarelo em caixa
   alta, campo em linha e recado no lugar dos campos quando o envio conclui.
   ------------------------------------------------------------------------- */
.contato{padding-block:0 var(--ritmo)}
.contato__grade{
  display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
}
.contato__titulo{font-weight:500;font-size:clamp(1.85rem,3.6vw,2.7rem);line-height:1.12}
.contato__texto{margin-top:1.1rem;color:var(--texto-medio);max-width:28em}

.dados{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.15rem}
.dados li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.1rem .9rem}
.dados i{grid-row:1 / span 2;color:var(--batido-forte);font-size:1.3rem;line-height:1.2}
.dados b{
  font-family:"Raleway",sans-serif;font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--texto-mudo);
}
.dados span,.dados a{font-size:.98rem;text-decoration:none}
.dados a{border-bottom:1px solid var(--filete-forte)}
.dados a:hover{border-color:var(--texto)}

.form{
  background:var(--grafite);border-radius:var(--r-painel);
  padding:clamp(1.75rem,3vw,2.5rem);
  display:flex;flex-direction:column;
  box-shadow:var(--sombra-alta);
}
.form h3{
  font-family:"Raleway",sans-serif;font-weight:700;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:.92rem}
.form__campos{margin-top:1.9rem;display:grid;gap:1.15rem}
/* o display:grid da classe vence o [hidden] do navegador; explicitar resolve */
.form__campos[hidden]{display:none}
.campo label{
  display:block;font-family:"Raleway",sans-serif;font-size:.68rem;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::placeholder,.campo textarea::placeholder{color:#aeabaa}
.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}
/* campo-isca: robô preenche, gente não vê */
.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:.82rem;
  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)}

/* -------------------------------------------------------------------------
   12. Chamada final e rodapé
   ------------------------------------------------------------------------- */
.fecho{
  text-align:center;padding-block:clamp(3.25rem,6vw,5rem);
}
.fecho h2{
  font-weight:500;font-size:clamp(1.85rem,3.8vw,2.9rem);line-height:1.12;
  color:var(--papel-marca);max-width:20em;margin-inline:auto;
}
.fecho p{margin-top:1.1rem;color:var(--escuro-mudo);max-width:34em;margin-inline:auto}
.fecho__acoes{
  margin-top:1.9rem;display:flex;flex-wrap:wrap;
  justify-content:center;gap:.75rem;
}

.rodape{padding-block:clamp(2.75rem,5vw,3.75rem) clamp(1.5rem,2.5vw,2rem)}
.rodape__grade{
  display:grid;gap:clamp(2rem,4vw,3rem);
  grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,.85fr));
  padding-bottom:clamp(2rem,3.5vw,2.75rem);
  border-bottom:1px solid var(--filete);
}
.rodape__marca img{width:clamp(150px,17vw,190px);margin-bottom:1.1rem}
.rodape__marca--escuro{display:none}
@media (prefers-color-scheme:dark){
  .rodape__marca--claro{display:none}
  .rodape__marca--escuro{display:block}
}
.rodape p{font-size:.92rem;line-height:1.65;color:var(--texto-medio);max-width:28em}
.rodape h3{
  font-family:"Raleway",sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--texto-mudo);
  margin-bottom:1.05rem;
}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.rodape a{text-decoration:none;font-size:.92rem;color:var(--texto-medio)}
.rodape a:hover{color:var(--texto)}
.rodape__fim{
  padding-top:1.5rem;display:flex;flex-wrap:wrap;
  gap:.6rem 1.5rem;align-items:center;justify-content:space-between;
  font-size:.82rem;color:var(--texto-mudo);
}

/* -------------------------------------------------------------------------
   13. Movimento
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .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}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .surge{opacity:1;transform:none}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* -------------------------------------------------------------------------
   14. Colapso
   ------------------------------------------------------------------------- */
@media (max-width:1040px){
  .abertura__grade{grid-template-columns:1fr}
  .destaque,.destaque--invertido{grid-template-columns:1fr}
  .destaque--invertido .destaque__texto{order:0}
  .porque__grade{grid-template-columns:1fr}
  .contato__grade{grid-template-columns:1fr}
  .etapas{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem}
  .rodape__grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rodape__id{grid-column:1 / -1}
}

@media (max-width:860px){
  /* a pílula fica em uma linha só: marca à esquerda, alavanca à direita */
  .trilho__env{position:relative;flex-wrap:nowrap}
  .trilho__nav{
    position:absolute;top:calc(100% + .5rem);left:0;right:0;
    flex-direction:column;gap:0;margin-left:0;
    background:var(--cartao);border-radius:var(--r-painel);
    padding:.4rem clamp(1rem,4vw,1.4rem);
    box-shadow:inset 0 0 0 1px var(--filete),var(--sombra-alta);
  }
  .trilho__nav[hidden]{display:none}
  .trilho__nav a{padding:.95rem 0;border-bottom:1px solid var(--filete)}
  .trilho__nav a:last-child{border-bottom:0}
  .trilho__nav a::after{display:none}
  .trilho__alavanca{display:block}
  .trilho__fone,.trilho__acao{display:none}
  /* a ação volta como último item dentro do menu aberto */
  .trilho__nav .chapa{
    margin:.9rem 0 1rem;width:100%;
    font-size:.72rem;padding:1em 1.4em;
    color:var(--grafite);border-bottom:0;
  }
}
@media (min-width:861px){
  .trilho__nav .chapa{display:none}
}

@media (max-width:768px){
  :root{--trilho-h:60px}
  body{font-size:1rem}
  .abertura__titulo{font-size:clamp(2.05rem,8.6vw,2.7rem)}
  .abertura__acoes .chapa{width:100%}
  .abertura__nota{width:100%}
  .abas{gap:.25rem .9rem}
  .abas__b{font-size:.92rem;padding:.7rem .2rem}
  .abas__b i{display:none}
  .ficha__acao .chapa{width:100%}
  .recursos__faixa{grid-auto-columns:minmax(248px,84%)}
  .etapas{grid-template-columns:1fr;row-gap:1.75rem}
  .rodape__grade{grid-template-columns:1fr}
  .fecho__acoes .chapa{width:100%}
  .laje{margin-inline:0;border-radius:0}
}