/* Forrest Mozzie do Brasil — folha única.
   Cores e tipografia vêm do pacote de marca (2026/Marca/Forrest_Mozzie_Brasil).
   Sem framework de propósito: o site é estático e precisa durar sem manutenção. */
:root{
  --teal:#0B5D6B; --lima:#93D82F; --cerrado:#063340; --sereno:#F4F8F2;
  --tinta:#0A2029; --sec:#5A7078; --linha:#D5E2DE; --branco:#fff;
  --larg:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;color:var(--tinta);
  line-height:1.6;font-size:17px;background:var(--branco)}
.env{max-width:var(--larg);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:'Outfit',system-ui,sans-serif;line-height:1.15;color:var(--cerrado)}
h1{font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3.2vw,2.2rem);margin-bottom:.6em}
h3{font-size:1.15rem;margin-bottom:.4em}
a{color:var(--teal)}
p{margin-bottom:1em}

/* topo */
header{position:sticky;top:0;background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--linha);z-index:50}
header .env{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-top:14px;padding-bottom:14px}
header img{height:38px;display:block}
nav ul{display:flex;gap:26px;list-style:none;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--tinta);font-size:.95rem}
nav a:hover,nav a[aria-current]{color:var(--teal)}
.menu{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--cerrado)}

/* abertura */
.capa{background:linear-gradient(160deg,var(--cerrado),var(--teal));color:#fff;
  padding:88px 0 96px}
.capa h1{color:#fff;max-width:19ch}
.capa .apoio{font-size:1.2rem;max-width:56ch;margin-top:22px;color:#dbeae6}
.botoes{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-block;padding:14px 26px;border-radius:6px;text-decoration:none;
  font-weight:600;font-size:1rem}
.btn-1{background:var(--lima);color:var(--cerrado)}
.btn-2{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-1:hover{background:#a6e348}
.btn-2:hover{border-color:#fff}

/* blocos */
section{padding:76px 0}
section.claro{background:var(--sereno)}
.intro{max-width:62ch;margin-bottom:44px;color:var(--sec);font-size:1.08rem}
.grade{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--linha);border-radius:10px;padding:26px}
.card .n{font-family:'Outfit',sans-serif;font-size:2.4rem;color:var(--teal);
  line-height:1;margin-bottom:8px;display:block}
.card p{color:var(--sec);font-size:.97rem;margin:0}
.card a{font-size:.95rem;font-weight:600;text-decoration:none}

/* passos */
.passos{counter-reset:p}
.passo{display:flex;gap:20px;align-items:flex-start;margin-bottom:26px}
.passo::before{counter-increment:p;content:counter(p);flex:0 0 42px;height:42px;
  background:var(--lima);color:var(--cerrado);border-radius:50%;display:grid;
  place-items:center;font-family:'Outfit',sans-serif;font-weight:600}
.passo p{margin:0;color:var(--sec)}
.passo b{color:var(--tinta)}

/* evidência */
.fonte{font-size:.86rem;color:var(--sec);margin-top:10px;display:block}
.fonte a{color:var(--sec)}

/* pilares */
.pilar{border-left:3px solid var(--lima);padding-left:20px}
.pilar h3{color:var(--teal)}
.pilar p{color:var(--sec);font-size:.97rem;margin:0}

/* chamada */
.chamada{background:var(--cerrado);color:#fff;text-align:center}
.chamada h2{color:#fff}
.chamada p{max-width:52ch;margin:0 auto 28px;color:#cfe0dc}

/* rodapé */
footer{background:var(--tinta);color:#93a7ad;padding:56px 0 34px;font-size:.9rem}
footer img{height:34px;margin-bottom:18px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px}
footer h4{color:#fff;font-size:.95rem;margin-bottom:12px;font-family:'Outfit',sans-serif}
footer a{color:#93a7ad;text-decoration:none;display:block;margin-bottom:7px}
footer a:hover{color:#fff}
.legal{border-top:1px solid #1e3238;margin-top:34px;padding-top:20px;font-size:.83rem}
.legal a{display:inline;margin-bottom:0}

@media(max-width:860px){
  .g3,.g4{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
  nav ul{display:none;flex-direction:column;width:100%}
  nav.aberto ul{display:flex}
  .menu{display:block}
  header .env{flex-wrap:wrap}
  section{padding:52px 0}
}


/* ---- fotos da operação ------------------------------------------------
   Acervo próprio (Jacarezinho, Ortigueira e Mauá da Serra, 2020-2024).
   🔴 Nenhuma legenda promete resultado nem repete percentual: a regra dos
   números vale para a foto como vale para o texto. */
.faixa-fotos{display:grid;gap:22px;margin-top:34px;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.foto{margin:0}
.foto img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  border-radius:10px;background:var(--sereno)}
.foto figcaption{font-size:14.5px;color:var(--sec);padding-top:10px;line-height:1.45}
.foto-larga{margin:30px 0 0}
.foto-larga img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block;
  border-radius:12px;background:var(--sereno)}
.foto-larga figcaption{font-size:14.5px;color:var(--sec);padding-top:10px}
@media(max-width:640px){
  .foto-larga img{aspect-ratio:4/3}
}


/* ---- capa com foto ----------------------------------------------------
   Duas colunas: o texto fica sobre o teal sólido (contraste conhecido) e a
   foto ocupa a coluna ao lado, sem overlay e sem esticar. */
.capa-grade{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.capa-foto{margin:0}
.capa-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.capa-foto figcaption{font-size:13.5px;color:#a8c4c2;padding-top:11px;line-height:1.45}
@media(max-width:900px){
  .capa-grade{grid-template-columns:1fr;gap:34px}
  .capa-foto{order:-1}
  .capa-foto img{aspect-ratio:16/10}
}


/* ---- ficha institucional (razao social, CNPJ, endereco) ---------------
   A classe era usada na pagina Contato sem NENHUMA regra: rotulo e valor
   sairam colados ("Razao socialBrazil Mozzie..."). */
.ficha table{border-collapse:collapse;width:100%;max-width:660px}
.ficha td{padding:10px 0;vertical-align:top;border-top:1px solid var(--linha)}
.ficha tr:first-child td{border-top:0}
.ficha td:first-child{width:152px;padding-right:24px;color:var(--sec);
  font-size:.93rem;white-space:nowrap}
@media(max-width:520px){
  .ficha td:first-child{width:112px;padding-right:14px}
}

/* ---- capa rotativa ----------------------------------------------------
   Motor herdado do site da Ágili (adhero/adtrack/adslide/adnav/addots):
   a faixa desliza por translateX e o autoplay corre a cada 6 s. */
.adhero{position:relative;overflow:hidden}
.adtrack{display:flex;transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
.adslide{min-width:100%;padding:74px 0 88px}
.adnav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.34);color:#fff;font-size:20px;line-height:1;
  cursor:pointer;display:grid;place-items:center;transition:background .2s}
.adnav:hover{background:rgba(255,255,255,.32)}
.adnav:focus-visible{outline:2px solid var(--lima);outline-offset:3px}
.adprev{left:18px}
.adnext{right:18px}
.addots{position:absolute;left:0;right:0;bottom:20px;z-index:4;
  display:flex;justify-content:center;gap:9px}
.addots button{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.55);background:transparent;transition:background .2s}
.addots button.on{background:var(--lima);border-color:var(--lima)}
.addots button:focus-visible{outline:2px solid var(--lima);outline-offset:3px}
@media(max-width:900px){
  .adslide{padding:54px 0 74px}
  .adnav{width:34px;height:34px;font-size:17px}
  .adprev{left:8px}
  .adnext{right:8px}
}
/* quem pediu menos movimento não recebe deslize nem autoplay (o JS também confere) */
@media(prefers-reduced-motion:reduce){
  .adtrack{transition:none}
}