/* EA Systems — ea-systems.dev.br
   Identidade 6A: #0B57A4 marca · #0B3C70 texto · #4A535E apoio · #F4F4F1 fundo
   Tipografia Archivo. */

:root{
  --marca:#0B57A4;
  --texto:#0B3C70;
  --apoio:#4A535E;
  --nota:#6B7480;
  --branco:#FFFFFF;
  --claro:#F7F9FB;
  --lavado:#EAF1F8;
  --linha:#E4E7EB;
  --linha-forte:#D6DCE3;
  --linha-media:#DDE3EA;
  --tracejado:#C4CCD6;

  --lado:56px;
  --maxw:1200px;
  --raio:5px;
  --raio-m:8px;
  --raio-g:10px;
}

/* Contêiner central sem elemento extra: acima de --maxw o padding lateral
   cresce e empurra o conteúdo para o meio; abaixo, vira a margem de --lado.
   O fundo continua sangrando de ponta a ponta. */
.topo,
.hero,
.secao,
.rodape{padding-inline:max(var(--lado), (100% - var(--maxw)) / 2)}

*,*::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(--branco);
  color:var(--texto);
  font-family:Archivo,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}

a{color:var(--marca);text-decoration:none}
a:hover{color:var(--texto)}

:focus-visible{outline:2px solid #2E8BD1;outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--marca);color:var(--branco);
  padding:12px 20px;font-weight:600;
}
.skip:focus{left:0;color:var(--branco)}

/* ---------------- tipografia ---------------- */

h1,h2,h3,h4{color:var(--texto);margin:0;letter-spacing:-.03em;line-height:1.15;text-wrap:pretty}
h1{font-size:clamp(34px,5.2vw,52px);font-weight:700;letter-spacing:-.04em;line-height:1.05}
h2{font-size:clamp(26px,3.6vw,34px);font-weight:600}
h3{font-size:19px;font-weight:600;letter-spacing:-.02em}
h4{font-size:15px;font-weight:600;letter-spacing:-.02em}

p{margin:0}

.rotulo{
  font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--marca);margin:0;
}
.rotulo-cinza{color:var(--nota);font-size:11.5px;letter-spacing:.08em}

.nota{font-size:13px;font-weight:500;color:var(--nota)}

.chamada{font-size:18px;line-height:1.6;color:var(--apoio);max-width:520px}

/* ---------------- botões ---------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border-radius:var(--raio);
  font-size:15px;font-weight:600;font-family:inherit;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn-mini{padding:10px 18px;font-size:14px}

.btn-cheio{background:var(--marca);color:var(--branco)}
.btn-cheio:hover{background:var(--texto);color:var(--branco)}

.btn-vazio{border-color:var(--tracejado);color:var(--texto);background:var(--branco)}
.btn-vazio:hover{border-color:var(--marca);color:var(--marca)}

.btn-contorno-azul{border-color:var(--marca);color:var(--marca);background:transparent}
.btn-contorno-azul:hover{background:var(--marca);color:var(--branco)}

.acoes{display:flex;flex-wrap:wrap;gap:12px}

/* ---------------- cabeçalho ---------------- */

.topo{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--linha);
  padding-block:14px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.marca{display:flex;flex:none}
.marca img{height:34px;width:auto}

.topo nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:500}
.topo nav > a{color:var(--apoio)}
.topo nav > a:hover{color:var(--marca)}
.topo nav > a.btn{color:var(--branco)}

/* ---------------- seções ---------------- */

.secao{padding-block:88px;display:flex;flex-direction:column;gap:44px}
.secao-clara{background:var(--claro);border-block:1px solid var(--linha)}

.cabecalho-secao{display:flex;flex-direction:column;gap:12px;max-width:640px}

/* ---------------- hero ---------------- */

.hero{
  padding-block:104px 88px;
  display:flex;flex-wrap:wrap;gap:56px;align-items:center;
  background:var(--claro);border-bottom:1px solid var(--linha);
}
.hero-texto{flex:1 1 440px;min-width:min(380px,100%);display:flex;flex-direction:column;gap:26px}
.hero-arte{flex:1 1 400px;min-width:min(340px,100%);display:flex;justify-content:center}

.janela{
  margin:0;width:100%;max-width:480px;
  border:1px solid var(--linha-media);border-radius:var(--raio-g);
  background:var(--branco);overflow:hidden;
}
.janela-barra{
  padding:12px 16px;border-bottom:1px solid var(--linha);
  display:flex;align-items:center;gap:8px;
}
.bolinha{width:9px;height:9px;border-radius:50%;background:var(--linha-forte);flex:none}
.janela-url{font-size:11px;color:#9AA1A9;margin-left:8px}
/* ancorado no canto superior esquerdo: o corte tira a borda direita da
   captura em vez de decepar a barra lateral do app */
.janela-tela{height:300px;overflow:hidden}
.janela-tela img{width:100%;height:100%;object-fit:cover;object-position:top left}

/* ---------------- produto em destaque ---------------- */

.destaque{
  background:var(--branco);border:1px solid var(--linha-media);
  border-radius:var(--raio-g);overflow:hidden;
  display:flex;flex-wrap:wrap;
}

/* coluna da marca: painel lavado que isola a logo do resto do conteúdo */
.destaque-marca{
  flex:1 1 340px;min-width:min(280px,100%);max-width:430px;
  background:var(--lavado);border-right:1px solid var(--linha);
  padding:40px 36px;
  display:flex;flex-direction:column;justify-content:space-between;gap:36px;
}
/* o cartão cresce com a coluna e centra a logo, em vez de deixar um vão
   entre ela e a linha de plataformas */
.destaque-logo{
  flex:1;min-height:200px;
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-m);
  padding:32px 28px;display:flex;align-items:center;justify-content:center;
}
.destaque-logo img{width:100%;max-width:230px;height:auto}

.destaque-plataformas{display:flex;flex-direction:column;gap:6px}
.rotulo-mini{
  font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--nota);
}
.plataformas{font-size:14.5px;font-weight:500;color:var(--marca)}

/* coluna do conteúdo */
.destaque-texto{
  flex:1 1 460px;min-width:min(340px,100%);
  padding:44px;display:flex;flex-direction:column;gap:22px;justify-content:center;
}
/* linha longa cansa: 62 caracteres é o limite confortável de leitura */
.destaque-texto > p{color:var(--apoio);line-height:1.65;max-width:62ch}
.destaque-texto h3{
  font-size:clamp(28px,3.4vw,38px);font-weight:700;
  letter-spacing:-.035em;color:var(--marca);
}

.destaque-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tarja{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--branco);background:var(--marca);padding:6px 12px;border-radius:999px;
}
.tarja-ponto{
  width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;
  animation:pulso 2.4s ease-in-out infinite;
}
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.3}}
.destaque-url{font-size:14.5px;font-weight:500;margin-left:auto}

.fichas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.fichas li{
  font-size:13px;font-weight:500;color:var(--texto);
  background:var(--branco);border:1px solid var(--linha-forte);
  border-radius:999px;padding:8px 15px;
}

/* a régua separa a leitura da ação */
.destaque-acao{
  border-top:1px solid var(--linha);padding-top:24px;margin-top:2px;
  display:flex;align-items:center;flex-wrap:wrap;gap:18px;
}
.seta{transition:transform .18s ease}
.btn:hover .seta{transform:translateX(3px)}

/* ---------------- galeria de telas ---------------- */

.galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.tela{
  border:1px solid var(--linha);border-radius:var(--raio-m);
  overflow:hidden;background:var(--branco);
}
.tela-arte{height:170px;overflow:hidden}
.tela-arte img{width:100%;height:100%;object-fit:cover;object-position:top center}
.tela-texto{padding:18px 20px;display:flex;flex-direction:column;gap:5px}
.tela-texto p{font-size:13.5px;color:var(--nota)}

/* ---------------- próximo produto ---------------- */

.proximo{
  border:1px dashed var(--tracejado);border-radius:var(--raio-g);
  padding:36px 40px;background:#FBFCFD;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
}
.proximo > div{display:flex;flex-direction:column;gap:8px;max-width:520px}
.proximo-titulo{font-size:20px;font-weight:600;letter-spacing:-.025em}
.proximo p:last-child{font-size:15px;line-height:1.6;color:var(--apoio)}
.proximo .btn{flex:none}

/* ---------------- etapas ---------------- */

.etapas{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;
}
.etapa{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-m);
  padding:32px;display:flex;flex-direction:column;gap:14px;
}
.numero{font-size:13px;font-weight:700;color:var(--marca);font-variant-numeric:tabular-nums}
.etapa p{font-size:15px;line-height:1.6;color:var(--apoio)}

/* ---------------- contato ---------------- */

.contato{flex-direction:row;flex-wrap:wrap;gap:48px;align-items:flex-start}
.contato-texto{flex:1 1 380px;min-width:min(320px,100%);display:flex;flex-direction:column;gap:18px}
.contato-texto > p{font-size:16px;line-height:1.65;color:var(--apoio);max-width:460px}

.canais{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;
  font-size:16px;font-weight:500}

.formulario{
  flex:1 1 380px;min-width:min(320px,100%);
  border:1px solid var(--linha);border-radius:var(--raio-g);
  padding:32px;display:flex;flex-direction:column;gap:16px;
}
.campo{display:flex;flex-direction:column;gap:7px}
.campo label{font-size:13px;font-weight:600;color:var(--texto)}
.campo input,.campo textarea{
  font-family:inherit;font-size:15px;color:var(--texto);
  padding:13px 14px;border:1px solid var(--linha-forte);border-radius:var(--raio);
  background:var(--branco);
}
.campo textarea{resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:#9AA1A9}
.campo input:focus,.campo textarea:focus{border-color:var(--marca)}

/* armadilha anti-robô: fora da tela, invisível para quem enxerga */
.furtivo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.nota-forma{line-height:1.5}

/* ---------------- rodapé ---------------- */

.rodape{
  background:var(--texto);padding-block:56px;
  display:flex;flex-wrap:wrap;gap:32px;
  justify-content:space-between;align-items:flex-start;
}
.rodape-marca{display:flex;flex-direction:column;gap:14px}
.rodape-marca img{height:32px;width:auto}
.rodape-marca p{font-size:14px;color:rgba(255,255,255,.7)}

.rodape-listas{display:flex;flex-wrap:wrap;gap:56px}
.rodape-listas > div{display:flex;flex-direction:column;gap:10px;font-size:14px}
.rodape-listas a{color:var(--branco)}
.rodape-listas a:hover{color:rgba(255,255,255,.75)}
.rotulo-rodape{
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.copyright{font-size:13px;color:rgba(255,255,255,.5)}

/* ---------------- telas menores ---------------- */

@media (max-width:900px){
  :root{--lado:28px}
  .topo nav > a:not(.btn){display:none}
  /* empilhado, a divisa entre as colunas passa a ser horizontal e o painel
     ocupa a linha inteira — o teto de largura só vale lado a lado */
  .destaque-marca{
    max-width:none;
    border-right:none;border-bottom:1px solid var(--linha);
    padding:32px 28px;flex-direction:row;align-items:center;gap:28px;
  }
  .destaque-logo{min-height:0}
  .destaque-logo{flex:1 1 auto}
  .destaque-plataformas{flex:0 1 auto;text-align:right}
  .destaque-texto{padding:32px 28px}
  .destaque-url{margin-left:0}
}

@media (max-width:620px){
  .destaque-marca{flex-direction:column;align-items:stretch}
  .destaque-plataformas{text-align:left}
}

@media (max-width:560px){
  .hero{padding-block:64px 56px}
  .secao{padding-block:64px}
  .acoes .btn,.proximo .btn{flex:1 1 100%}
  .proximo{padding:28px 24px}
  .formulario{padding:24px 20px}
  .rodape{padding-block:44px}
}