/* ==========================================================================
   Sabiensys — folha de estilo única do site
   Sem framework, sem build, sem JavaScript.

   Movimento (tudo em CSS):
   - as animações ligadas à rolagem ficam dentro de @supports: em navegador sem
     suporte o conteúdo simplesmente aparece, sem animar;
   - reveal usa `translate`/`opacity` (não `transform`), para não brigar com os
     efeitos de hover, que usam `transform`;
   - prefers-reduced-motion desliga tudo no fim do arquivo.
   ========================================================================== */

:root{
  --azul:#0F2C4C; --azul-esc:#0A1F36;
  --laranja:#D2530F;                 /* detalhes: linhas, números, marcadores */
  --laranja-bt:#BF4A0C;              /* fundo de botão (contraste AA com texto branco) */
  --laranja-bt-h:#A33F09;
  --papel:#F7F5F1; --branco:#fff; --linha:#DAD5CB;
  --texto:#22262B; --texto-sv:#5B6570;
  --sobre-escuro:#D3DDE7;            /* texto secundário sobre azul escuro */
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",Arial,sans-serif;
  --larg:1080px; --gut:24px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sombra:0 12px 30px rgba(10,31,54,.10);
}

/* ---- base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--texto);background:var(--papel);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--azul-esc);margin:0;line-height:1.14;text-wrap:balance}
p,li{text-wrap:pretty}
p{margin:0}
a{color:inherit}
::selection{background:rgba(210,83,15,.22)}
:focus-visible{outline:2px solid var(--laranja);outline-offset:3px}
[id]{scroll-margin-top:96px}
.faixa{max-width:var(--larg);margin:0 auto;padding:0 var(--gut)}
.pular{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--azul-esc);color:#fff;padding:10px 16px;border-radius:2px}
.pular:focus{left:8px}

/* ---- cabeçalho ----------------------------------------------------------- */
.cab{position:relative;z-index:50;background:rgba(247,245,241,.96);border-bottom:1px solid var(--linha);view-transition-name:cabecalho}
@media(min-width:760px){.cab{position:sticky;top:0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}
.cab .faixa{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 24px;padding-top:14px;padding-bottom:12px}
.marca{display:block;line-height:0;text-decoration:none}
.marca img{display:block;height:44px;width:auto}
.menu{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 26px;width:100%}
@media(min-width:760px){.menu{width:auto;justify-content:flex-end}}
.menu a{--sub:var(--linha);padding:8px 0;font-size:14.5px;text-decoration:none;color:var(--texto-sv);
        background:linear-gradient(var(--sub),var(--sub)) left bottom/0 2px no-repeat;
        transition:color .2s,background-size .3s var(--ease)}
.menu a:hover{color:var(--azul-esc);background-size:100% 2px}
.menu a[aria-current="page"]{--sub:var(--laranja);color:var(--azul-esc);background-size:100% 2px}
@media(max-width:480px){.menu{gap:0 10px}.menu a{font-size:14px}}
@media(max-width:360px){.menu{gap:0 6px}.menu a{font-size:13px}}

/* ---- botões -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;padding:14px 26px 14px 28px;background:var(--laranja-bt);border:1px solid var(--laranja-bt);color:#fff;
     text-decoration:none;font-size:15px;font-weight:600;border-radius:2px;
     transition:background .2s,border-color .2s,transform .25s var(--ease),box-shadow .25s}
.btn::after{content:"→";content:"→" / "";margin-left:12px;transition:transform .25s var(--ease)}
.btn:hover{background:var(--laranja-bt-h);border-color:var(--laranja-bt-h);transform:translateY(-2px);box-shadow:0 8px 18px rgba(163,63,9,.35)}
.btn:hover::after{transform:translateX(4px)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.voltar::after{content:none}
.btn-sec{display:inline-block;padding:13px 2px;color:#fff;text-decoration:none;font-size:15px;font-weight:500;border-bottom:1px solid rgba(255,255,255,.45);transition:border-color .2s}
.btn-sec:hover{border-bottom-color:#fff}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:36px}
@media(max-width:480px){.acoes{gap:14px 20px}.btn{padding:14px 20px 14px 22px}.btn::after{margin-left:10px}}

/* ---- hero da home -------------------------------------------------------- */
.hero-home{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:72px 0 64px;background:var(--azul-esc)}
.hero-home::after{content:"";position:absolute;inset:-3%;z-index:-2;                     /* textura (zoom bem lento) */
           background:url("../img/texturas/textura-hero.webp") center/cover no-repeat;
           animation:zoomlento 32s ease-in-out infinite alternate}
.hero-home::before{content:"";position:absolute;inset:0;z-index:-1;                      /* degradê p/ o texto branco */
           background:linear-gradient(90deg,rgba(10,31,54,.95) 0%,rgba(10,31,54,.88) 45%,rgba(10,31,54,.62) 100%)}
@media(min-width:760px){.hero-home{padding:124px 0 108px}}
.hero-texto h1{color:#fff;font-size:clamp(34px,5.2vw,56px);max-width:19ch;letter-spacing:-.01em}
.hero-texto p{max-width:62ch;margin-top:22px;color:var(--sobre-escuro);font-size:clamp(16.5px,1.6vw,19px)}
.linha-laranja{width:48px;height:3px;margin-bottom:26px;background:var(--laranja)}

/* entrada do hero, em sequência */
.hero-texto>*{animation:subir .9s var(--ease) both}
.hero-texto .linha-laranja{animation:tracar-linha .7s .1s var(--ease) both}
.hero-texto h1{animation-delay:.12s}
.hero-texto p{animation-delay:.28s}
.hero-texto .acoes{animation-delay:.44s}

/* ---- topo das páginas internas ------------------------------------------- */
.topo{padding:40px 0 52px;border-bottom:1px solid var(--linha)}
.topo.sem-borda{border-bottom:0}
.trilha{font-size:13px;color:var(--texto-sv);margin-bottom:28px}
.trilha a{color:var(--texto-sv);text-decoration:none}
.trilha a:hover{color:var(--azul-esc);text-decoration:underline}
.topo h1{font-size:clamp(30px,4.4vw,46px);max-width:22ch;letter-spacing:-.005em}
.topo p{max-width:64ch;margin-top:18px;color:var(--texto-sv);font-size:17px}
.topo .btn{margin-top:30px}

/* ---- seções -------------------------------------------------------------- */
.sec{padding:56px 0;border-bottom:1px solid var(--linha)}
@media(min-width:760px){.sec{padding:80px 0}}
.sec.clara{background:var(--branco)}
.sec h2{font-size:clamp(24px,3vw,32px);max-width:26ch}
h2.menor{font-size:22px}
.sec>.faixa>h2::before,.cta-bloco>.faixa>h2::before{content:"";display:block;width:36px;height:3px;margin-bottom:18px;background:var(--laranja)}
.intro{max-width:64ch;margin-top:14px;color:var(--texto-sv);font-size:16.5px}

/* ---- ícones (quadradinho: mantém o traço azul visível em qualquer fundo) -- */
.ico{display:block;flex:none;width:52px;height:52px;padding:12px;background:#fff;border:1px solid var(--linha);border-radius:2px;transition:border-color .25s}
.sec.clara .ico{background:var(--papel)}

/* ---- grades e cartões ---------------------------------------------------- */
.grade{display:grid;gap:20px;margin-top:44px;grid-template-columns:1fr}
@media(min-width:720px){.grade.g2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grade.g3{grid-template-columns:repeat(3,1fr)}}
.cartao{display:block;position:relative;padding:28px;background:#fff;border:1px solid var(--linha);border-radius:2px;text-decoration:none;color:inherit;
        transition:border-color .25s,box-shadow .3s,transform .3s var(--ease)}
.sec.clara .cartao{background:var(--papel)}
.cartao .ico{margin-bottom:22px}
.cartao h3{margin-bottom:8px;font-family:var(--sans);font-size:18px;font-weight:600;line-height:1.3;color:var(--azul-esc)}
.cartao p{color:var(--texto-sv);font-size:15px}
a.cartao:hover{border-color:var(--azul-esc);box-shadow:var(--sombra);transform:translateY(-4px)}
a.cartao:hover .ico{border-color:var(--laranja)}
a.cartao::after{content:"→";content:"→" / "";position:absolute;top:34px;right:28px;font-size:20px;line-height:1;color:var(--laranja);transition:transform .25s var(--ease)}
a.cartao:hover::after{transform:translateX(5px)}

/* ---- como trabalhamos ---------------------------------------------------- */
.etapas{counter-reset:e;list-style:none;padding:0;margin:44px 0 0;display:grid;gap:30px;grid-template-columns:1fr}
@media(min-width:760px){.etapas{grid-template-columns:repeat(3,1fr);gap:40px}}
.etapas li{position:relative;counter-increment:e;padding-top:18px;border-top:2px solid var(--azul-esc)}
.etapas li::before{content:"0" counter(e);display:block;margin-bottom:12px;font-family:var(--serif);font-size:30px;font-weight:600;line-height:1;color:var(--laranja)}
.etapas h3{margin-bottom:8px;font-family:var(--sans);font-size:17px;font-weight:600;color:var(--azul-esc)}
.etapas p{color:var(--texto-sv);font-size:15px}

/* ---- bloco de chamada (fundo azul escuro + engrenagem da marca ao fundo) - */
.cta-bloco{position:relative;isolation:isolate;overflow:hidden;padding:64px 0;background:var(--azul-esc);color:#fff;border-bottom:0}
@media(min-width:760px){.cta-bloco{padding:88px 0}}
.cta-bloco::after{content:"";position:absolute;z-index:-1;right:-120px;top:50%;width:340px;height:340px;margin-top:-170px;opacity:.045;
           background:url("../img/logo/engrenagem-marca.png") center/contain no-repeat;animation:giro 140s linear infinite}
@media(min-width:760px){.cta-bloco::after{right:-140px;width:520px;height:520px;margin-top:-260px}}
.cta-bloco h2{max-width:26ch;color:#fff}
.cta-bloco .intro{color:var(--sobre-escuro)}
.cta-bloco .btn{margin-top:32px}

/* ---- soluções (catálogo de produtos) -------------------------------------- */
/* 1 coluna no celular, 2 a partir de 640px, 3 a partir de 980px. Todos os cards têm a
   mesma estrutura (título, descrição, botão); só os que têm render ganham a moldura de foto. */
.grade.catalogo{grid-template-columns:1fr;margin-top:0}
@media(min-width:640px){.grade.catalogo{grid-template-columns:repeat(2,1fr);align-items:start}}   /* 2 colunas: cada card com a sua altura (evita card de texto esticado ao lado de um com foto) */
@media(min-width:980px){.grade.catalogo{grid-template-columns:repeat(3,1fr);align-items:stretch}}  /* 3 colunas: linhas homogêneas (3 com foto / 3 de texto) */
.produto{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--linha);border-radius:2px;
         transition:border-color .25s,box-shadow .3s,transform .3s var(--ease)}
.produto:hover,.produto:focus-within{border-color:var(--azul-esc)}
.produto:hover{box-shadow:var(--sombra);transform:translateY(-4px)}
.produto-foto{margin:0;background:#fff;border-bottom:1px solid var(--linha);overflow:hidden}
.produto-foto img{display:block;width:100%;aspect-ratio:3/2;object-fit:contain;padding:14px;transition:transform .7s var(--ease)}
.produto:hover .produto-foto img{transform:scale(1.03)}
.produto-foto figcaption{padding:0 16px 12px;font-size:12px;color:var(--texto-sv)}
.produto-corpo{display:flex;flex:1;flex-direction:column;padding:28px}
.produto-corpo .ico{margin-bottom:22px}
.produto:hover .ico{border-color:var(--laranja)}
.produto h2{max-width:none;margin-bottom:10px;font-size:clamp(20px,2vw,22px)}
.produto p{margin-bottom:22px;color:var(--texto-sv);font-size:15px}
.produto .saiba{align-self:flex-start;margin-top:auto}
.produto .saiba::before{content:"";position:absolute;inset:0}          /* card inteiro clicável */
.produto:hover .saiba{color:var(--laranja-bt)}
.produto:hover .saiba::after{transform:translateX(4px)}
.saiba{display:inline-block;margin-top:22px;padding-bottom:2px;border-bottom:1px solid var(--laranja);font-size:15px;font-weight:500;color:var(--azul-esc);text-decoration:none;transition:color .2s}
.saiba::after{content:"→";content:"→" / "";display:inline-block;margin-left:8px;transition:transform .25s var(--ease)}
.saiba:hover{color:var(--laranja-bt)}
.saiba:hover::after{transform:translateX(4px)}

/* ---- setores ------------------------------------------------------------- */
.destaques{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:800px){.destaques{grid-template-columns:1fr 1fr}}
.destaque{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:460px;padding:32px;overflow:hidden;color:#fff;background:var(--azul-esc);border-radius:2px}
.destaque::after{content:"";position:absolute;inset:0;z-index:-2;background:center/cover no-repeat;transition:transform 1s var(--ease)}
.destaque::before{content:"";position:absolute;inset:0;z-index:-1;
          background:linear-gradient(0deg,rgba(10,31,54,.96) 0%,rgba(10,31,54,.88) 52%,rgba(10,31,54,.5) 100%)}
.destaque-dc::after{background-image:url("../img/texturas/textura-data-center.webp")}
.destaque-agro::after{background-image:url("../img/texturas/textura-agro.webp")}
.destaque:hover::after{transform:scale(1.06)}
.destaque .ico{align-self:flex-start;margin-bottom:auto}
.destaque h2{max-width:none;margin:40px 0 12px;font-size:clamp(22px,2.4vw,26px);color:#fff}
.destaque p{color:var(--sobre-escuro);font-size:15.5px}
.sub{margin-top:64px;font-size:22px}
.sub+.grade{margin-top:28px}

/* ---- serviços ------------------------------------------------------------ */
.escopo{margin-top:36px;border-top:1px solid var(--linha)}
.escopo>div{display:grid;grid-template-columns:52px 1fr;gap:6px 22px;align-items:start;padding:26px 0;border-bottom:1px solid var(--linha)}
.escopo h3{margin-bottom:6px;font-family:var(--sans);font-size:19px;font-weight:600;color:var(--azul-esc)}
.escopo p{max-width:66ch;color:var(--texto-sv);font-size:15.5px}

/* ---- contato ------------------------------------------------------------- */
.checklist{list-style:none;max-width:860px;margin:30px 0 0;padding:0;display:grid;gap:14px 44px;grid-template-columns:1fr}
@media(min-width:760px){.checklist{grid-template-columns:1fr 1fr}}
.checklist li{position:relative;padding-left:26px;color:var(--texto-sv);font-size:15.5px}
.checklist li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;background:var(--laranja);border-radius:1px}
.dados{display:grid;gap:28px;margin-top:40px;grid-template-columns:1fr}
@media(min-width:900px){.dados{grid-template-columns:repeat(3,1fr);gap:32px}}
.dado{padding-top:24px;border-top:1px solid rgba(255,255,255,.22)}
.dado .ico{margin-bottom:20px}
.dado span{display:block;margin-bottom:8px;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:#9FB0C0}
.dado strong,.dado a{display:block;font-size:16px;font-weight:500;line-height:1.55;color:#fff;text-decoration:none}
.dado a:hover{text-decoration:underline}
.dado strong+strong{margin-top:4px}

/* ---- rodapé -------------------------------------------------------------- */
.rodape{padding:56px 0 28px;border-top:1px solid var(--linha);font-size:14px;color:var(--texto-sv)}
.rodape .cols{display:grid;gap:36px;grid-template-columns:1fr}
@media(min-width:800px){.rodape .cols{grid-template-columns:1.5fr 1fr 1.3fr;gap:48px}}
.rodape img{display:block;height:40px;width:auto;margin-bottom:16px}
.rodape .tit{margin-bottom:14px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--azul-esc)}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rodape a{color:var(--texto-sv);text-decoration:none;transition:color .2s}
.rodape a:hover{color:var(--azul-esc);text-decoration:underline}
.rodape .legal{margin-top:44px;padding-top:20px;border-top:1px solid var(--linha);font-size:13px}

/* ==========================================================================
   MOVIMENTO
   ========================================================================== */
@keyframes subir{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes tracar-linha{from{width:0}to{width:48px}}
@keyframes zoomlento{to{transform:scale(1.08)}}
@keyframes giro{to{transform:rotate(360deg)}}
@keyframes revelar{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes tracar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sombra-cab{from{box-shadow:0 0 0 rgba(10,31,54,0)}to{box-shadow:0 8px 24px rgba(10,31,54,.09)}}

/* cabeçalho ganha sombra ao rolar */
@supports (animation-timeline:scroll()){
  .cab{animation:sombra-cab linear both;animation-timeline:scroll(root);animation-range:0 140px}
}

/* elementos entram na tela conforme a rolagem */
@supports (animation-timeline:view()){
  .sec>.faixa>h2,.sec>.faixa>.intro,.grade>*,.etapas li,.destaque,.escopo>div,.dado,.checklist li,.cta-bloco .faixa>*{
    animation:revelar ease-out both;animation-timeline:view();animation-range:entry 0% entry 55%}
  .grade>:nth-child(3n+2),.destaque:nth-child(2){animation-range:entry 8% entry 63%}
  .grade>:nth-child(3n+3){animation-range:entry 16% entry 71%}
  /* etapas: a linha superior "se desenha" */
  .etapas li{border-top-color:var(--linha)}
  .etapas li::after{content:"";position:absolute;left:0;top:-2px;width:100%;height:2px;background:var(--azul-esc);transform-origin:left;
                    animation:tracar linear both;animation-timeline:view();animation-range:entry 20% entry 80%}
}

/* transição suave entre páginas (o cabeçalho fica parado) */
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

/* ---- quem pede menos movimento não recebe nenhum ------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}