/* ═══════════════════════════════════════════════════════════════
   Fatormix — nova versão · Fábrica de Sites
   Assinatura: a barra coral como espinha estrutural.
   (A 1ª versão usava o × do logo como marcador. Ronaldo apontou, com
    razão, que um × vermelho antes de um item lê como "removido/errado"
    e inverte o sentido numa lista do que a agência FAZ. A cor da marca
    permanece; o glifo saiu.)
   Paleta e logo preservados do site original (INVENTARIO.md).
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:"Bricolage";src:url("../fonts/bricolage.woff2")format("woff2");
  font-weight:500 800;font-display:swap}
@font-face{font-family:"Plex";src:url("../fonts/plex-400.woff2")format("woff2");
  font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url("../fonts/plex-600.woff2")format("woff2");
  font-weight:600;font-display:swap}
@font-face{font-family:"PlexMono";src:url("../fonts/plexmono-500.woff2")format("woff2");
  font-weight:500;font-display:swap}

:root{
  /* cores do site original, com tons derivados para contraste */
  --marinho:#0a0a40;
  --marinho-fundo:#070730;
  --marinho-borda:#1e1e5c;
  --coral:#e42c4a;           /* acento da marca — marcas, bordas, display */
  --coral-forte:#c81e3a;     /* derivado: fundo de botão com texto branco (5,7:1) */
  --papel:#f6f4f0;
  --papel-fundo:#ffffff;
  --tinta:#14142e;
  --tinta-suave:#55556e;
  --linha:#dedae2;

  --display:"Bricolage",system-ui,sans-serif;
  --corpo:"Plex",system-ui,-apple-system,sans-serif;
  --mono:"PlexMono",ui-monospace,SFMono-Regular,monospace;

  --e1:.5rem; --e2:1rem; --e3:1.5rem; --e4:2.5rem; --e5:4rem; --e6:6rem;
  --largura:72rem;
  --raio:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);
  font:400 1.0625rem/1.65 var(--corpo);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;
  letter-spacing:-.025em;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0}

:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.pular{position:absolute;left:-9999px}
.pular:focus{left:var(--e2);top:var(--e2);z-index:99;background:var(--coral-forte);
  color:#fff;padding:var(--e1) var(--e2);border-radius:var(--raio)}

/* ── estrutura ────────────────────────────────────────────── */
.limite{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--e3)}
.campo{padding-block:clamp(3.5rem,9vw,6rem)}
.campo--marinho{background:var(--marinho);color:#fff}
.campo--branco{background:var(--papel-fundo)}

/* ── a barra coral como marcador de seção (a assinatura) ─── */
.marcador{display:flex;align-items:center;gap:.6rem;margin:0 0 var(--e3);
  font:500 .8125rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-suave)}
.marcador::before{content:"";width:1.6rem;height:3px;background:var(--coral);
  border-radius:2px;flex:0 0 auto}
.campo--marinho .marcador{color:#b9b9d6}

/* ── topo ─────────────────────────────────────────────────── */
.topo{background:var(--marinho);position:sticky;top:0;z-index:20}
.topo__interno{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3);padding-block:.9rem}
.topo__logo{flex:0 0 auto}
.topo__logo img{width:150px;height:45px}
.menu{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,1.8rem);
  list-style:none;flex-wrap:wrap;justify-content:flex-end}
.menu a{color:#e7e7f4;text-decoration:none;font-size:.9375rem;
  padding-block:.4rem;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current]{border-bottom-color:var(--coral)}
.menu__acao a{background:var(--coral-forte);color:#fff;border-radius:var(--raio);
  padding:.55rem 1rem;border-bottom:0}
.menu__acao a:hover{background:var(--coral);border-bottom:0}

/* ── hero ─────────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;overflow:hidden;
  background:var(--marinho);color:#fff;
  padding-block:clamp(3.5rem,10vw,7rem) clamp(3rem,8vw,5.5rem);
  border-bottom:1px solid var(--marinho-borda)}
.hero h1{font-size:clamp(2.35rem,7.2vw,4.6rem);max-width:17ch;margin-bottom:var(--e3)}
/* Imagem original do cliente ao fundo, em transparência sobre o marinho.
   Usa <img> e NÃO background-image via custom property: url() dentro de
   var() resolve relativo ao ARQUIVO CSS, não ao HTML — o caminho virava
   assets/css/assets/img/… e a imagem sumia sem erro nenhum. */
.hero__fundo{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__fundo img{width:100%;height:100%;object-fit:cover;opacity:.32}
.hero--img::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(102deg,var(--marinho) 4%,rgba(10,10,64,.86) 38%,rgba(10,10,64,.30) 100%)}
.hero__marca{width:3.5rem;height:4px;background:var(--coral);border-radius:2px;
  margin-bottom:var(--e3)}
.hero__lead{font-size:clamp(1.0625rem,2.3vw,1.3125rem);max-width:56ch;
  color:#cfcfe6;margin-bottom:var(--e4)}
.hero__servicos{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  font:500 .875rem/1.4 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:#9d9dc4;margin-bottom:var(--e4)}
.hero__servicos .op{color:var(--coral);font-family:var(--display);
  font-size:1.15rem;font-weight:800}

/* ── botões ───────────────────────────────────────────────── */
.btn{display:inline-block;font-family:var(--corpo);font-weight:600;
  font-size:1.0625rem;padding:.9rem 1.6rem;border-radius:var(--raio);
  text-decoration:none;transition:background .15s,color .15s}
.btn--acao{background:var(--coral-forte);color:#fff}
.btn--acao:hover{background:var(--coral)}
.btn--linha{border:1px solid var(--marinho-borda);color:#fff}
.btn--linha:hover{background:#12123f}
.campo--branco .btn--linha,.campo--papel .btn--linha{border-color:var(--linha);color:var(--tinta)}
.campo--branco .btn--linha:hover{background:var(--papel)}
.botoes{display:flex;flex-wrap:wrap;gap:var(--e2)}

/* ── títulos de seção ─────────────────────────────────────── */
.titulo{font-size:clamp(1.75rem,4vw,2.6rem);max-width:22ch;margin-bottom:var(--e3)}
.resposta{font-size:clamp(1.0625rem,2vw,1.1875rem);max-width:62ch;
  color:var(--tinta-suave);margin-bottom:var(--e3)}
.campo--marinho .resposta{color:#c3c3dd}
.texto{max-width:62ch}
.texto+.texto{margin-top:var(--e2)}

/* ── serviços ─────────────────────────────────────────────── */
.grade{display:grid;gap:var(--e2);grid-template-columns:1fr;margin-top:var(--e4)}
@media(min-width:40rem){.grade{grid-template-columns:1fr 1fr}}
.servico{display:block;background:var(--papel-fundo);border:1px solid var(--linha);
  border-radius:var(--raio);padding:var(--e3);text-decoration:none;color:inherit;
  transition:border-color .15s,transform .15s}
.servico:hover{border-color:var(--coral);transform:translateY(-2px)}
.campo--branco .servico{background:var(--papel)}
.servico{position:relative;padding-top:calc(var(--e3) + 4px)}
.servico::before{content:"";position:absolute;top:0;left:0;width:3.5rem;height:4px;
  background:var(--coral);border-radius:0 0 2px 0;transition:width .18s}
.servico:hover::before{width:100%}
.servico__nome{font-family:var(--display);font-weight:700;font-size:1.3125rem;
  letter-spacing:-.02em;margin-bottom:.55rem}
.servico__txt{color:var(--tinta-suave);font-size:.9688rem;line-height:1.6}

/* ── etapas numeradas (sequência real: 01 precede 02) ─────── */
.etapas{list-style:none;display:grid;gap:var(--e3);margin-top:var(--e4);
  grid-template-columns:1fr}
@media(min-width:48rem){.etapas{grid-template-columns:repeat(4,1fr);gap:var(--e2)}}
.etapa{border-top:2px solid var(--coral);padding-top:var(--e2)}
.campo--marinho .etapa{border-top-color:var(--coral)}
.etapa__n{font:500 .8125rem/1 var(--mono);color:var(--coral);
  letter-spacing:.1em;display:block;margin-bottom:.7rem}
.etapa__nome{font-family:var(--display);font-weight:700;font-size:1.125rem;
  letter-spacing:-.015em;margin-bottom:.5rem}
.etapa__txt{font-size:.9375rem;line-height:1.6;color:var(--tinta-suave)}
.campo--marinho .etapa__txt{color:#b9b9d6}

/* ── frentes complementares (cards) ───────────────────────
   Eram lista de 3 colunas: itens de 1 a 4 linhas deixavam a grade
   irregular e a seção desandava. Card com altura igual resolve. */
.frentes{list-style:none;display:grid;gap:var(--e2);grid-template-columns:1fr;
  margin-top:var(--e4)}
@media(min-width:38rem){.frentes{grid-template-columns:1fr 1fr}}
@media(min-width:62rem){.frentes{grid-template-columns:repeat(3,1fr)}}
.frente{position:relative;background:var(--papel-fundo);border:1px solid var(--linha);
  border-radius:var(--raio);padding:var(--e3);padding-top:calc(var(--e3) + 4px);
  font-size:1rem;line-height:1.5;font-weight:600;display:flex;align-items:center;
  min-height:6.5rem}
.frente::before{content:"";position:absolute;top:0;left:0;width:2.5rem;height:4px;
  background:var(--coral);border-radius:0 0 2px 0}
.campo--branco .frente{background:var(--papel)}
.campo--marinho .frente{background:#0d0d4d;border-color:var(--marinho-borda);color:#fff}

/* ── conteúdo com imagem ──────────────────────────────────── */
.dupla{display:grid;gap:var(--e4);align-items:center;grid-template-columns:1fr}
@media(min-width:52rem){.dupla{grid-template-columns:1.15fr .85fr;gap:var(--e5)}}
.dupla img{border-radius:var(--raio)}

/* ── FAQ ──────────────────────────────────────────────────── */
.faq{margin-top:var(--e4);border-top:1px solid var(--linha)}
.campo--marinho .faq{border-top-color:var(--marinho-borda)}
.faq__item{border-bottom:1px solid var(--linha);padding-block:var(--e3)}
.campo--marinho .faq__item{border-bottom-color:var(--marinho-borda)}
.faq__p{font-family:var(--display);font-weight:700;font-size:1.1875rem;
  letter-spacing:-.015em;margin-bottom:.6rem}
.faq__r{color:var(--tinta-suave);max-width:64ch}
.campo--marinho .faq__r{color:#c3c3dd}

/* ── chamada final ────────────────────────────────────────── */
.chamada{text-align:center}
.chamada .titulo{margin-inline:auto}
.chamada .resposta{margin-inline:auto}
.chamada .botoes{justify-content:center}

/* ── contato ──────────────────────────────────────────────── */
.contato{display:grid;gap:var(--e3);grid-template-columns:1fr;margin-top:var(--e4)}
@media(min-width:44rem){.contato{grid-template-columns:1fr 1fr}}
.contato__bloco{border:1px solid var(--marinho-borda);border-radius:var(--raio);
  padding:var(--e3)}
.contato__rot{font:500 .75rem/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:#9d9dc4;margin-bottom:.8rem}
.contato__val{font-family:var(--display);font-weight:700;font-size:1.375rem;
  letter-spacing:-.02em}
.contato__val a{text-decoration:none;border-bottom:2px solid var(--coral)}
.redes{list-style:none;display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:.9rem}
.redes a{color:#cfcfe6;text-decoration:none;border-bottom:1px solid var(--marinho-borda);
  font-size:.9375rem;padding-bottom:2px}
.redes a:hover{border-bottom-color:var(--coral);color:#fff}

/* ── trilha ───────────────────────────────────────────────── */
.trilha{padding-block:var(--e2);font-size:.875rem;color:var(--tinta-suave);
  background:var(--papel-fundo);border-bottom:1px solid var(--linha)}
.trilha ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem}
.trilha li:not(:last-child)::after{content:"/";color:var(--linha);margin-left:.45rem}
.trilha a{color:var(--tinta-suave)}

/* ── rodapé ───────────────────────────────────────────────── */
.rodape{background:var(--marinho-fundo);color:#b9b9d6;padding-block:var(--e5) var(--e3);
  font-size:.9375rem}
.rodape__grade{display:grid;gap:var(--e4);grid-template-columns:1fr}
@media(min-width:44rem){.rodape__grade{grid-template-columns:1.3fr 1fr 1fr}}
.rodape__tit{font:500 .75rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin-bottom:var(--e2)}
.rodape ul{list-style:none;display:grid;gap:.55rem}
.rodape a{color:#b9b9d6;text-decoration:none}
.rodape a:hover{color:#fff;text-decoration:underline}
.rodape__logo{width:150px;height:45px;margin-bottom:var(--e2)}
.rodape__fim{margin-top:var(--e5);padding-top:var(--e3);
  border-top:1px solid var(--marinho-borda);font-size:.875rem;color:#8b8bb0}

/* ── movimento, com respeito ──────────────────────────────── */
@media(prefers-reduced-motion:no-preference){
  .hero h1,.hero__lead,.hero__servicos,.hero .botoes{
    animation:sobe .5s cubic-bezier(.2,.7,.3,1) backwards}
  .hero__lead{animation-delay:.06s}
  .hero__servicos{animation-delay:.12s}
  .hero .botoes{animation-delay:.18s}
}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── correções do QA (13/08) ───────────────────────────────
   1. header de 212px no celular: o menu quebrava em 3 linhas e o topo
      fixo comia 28% da tela. O CTA saiu de dentro da <ul> e virou irmão
      do <nav>: no celular ele divide a fileira 1 com o logo e os links
      ficam na fileira 2. (A primeira tentativa usou position:absolute e
      o botão cobriu o "x" do logo — remendo trocado por estrutura.)
   2. alvos de toque abaixo de 44px no menu, no rodapé e nas redes. */
.topo__acao{order:3;background:var(--coral-forte);color:#fff;
  border-radius:var(--raio);padding:.85rem 1.15rem;text-decoration:none;
  font-family:var(--corpo);font-weight:600;font-size:.9375rem;flex:0 0 auto}
.topo__acao:hover{background:var(--coral)}
.topo nav{order:2;margin-left:auto}
.menu a{padding-block:.8rem}
@media(max-width:51.99rem){
  .topo{position:static}
  .topo__interno{flex-wrap:wrap;gap:.5rem var(--e2);padding-block:.7rem}
  .topo__logo img{width:130px;height:39px}
  .topo__acao{order:2}
  .topo nav{order:3;width:100%;margin-left:0;
    border-top:1px solid var(--marinho-borda);padding-top:.15rem}
  .menu{justify-content:flex-start;gap:1.15rem}
}
.rodape ul{gap:.1rem}
.rodape ul a{display:inline-block;padding-block:.8rem}
.redes{gap:.4rem 1.1rem}
.redes a{display:inline-block;padding-block:.7rem;border-bottom:0;
  text-decoration:underline;text-decoration-color:var(--marinho-borda);
  text-underline-offset:4px}
.redes a:hover{text-decoration-color:var(--coral)}
.contato__val a{display:inline-block;padding-block:.5rem}
/* rótulo curto do CTA no celular: "Falar no WhatsApp" (200px) não cabe
   ao lado do logo em 360px e empurrava o header para uma 3ª fileira */
.so-largo{display:none}
@media(min-width:52rem){.so-largo{display:inline}}
/* âncora com header fixo: sem isso o topo do destino fica coberto */
[id]{scroll-margin-top:6.5rem}

/* ── imagem de apoio nas páginas de serviço ───────────────── */
.ilustra{display:flex;justify-content:center;align-items:center}
.ilustra img{max-height:20rem;width:auto}
.dupla--inverso{direction:rtl}
.dupla--inverso>*{direction:ltr}