/* ==========================================================================
   HCluster — site institucional
   Sem dependências externas: fontes de sistema, zero CDN (premissa de projeto).
   ========================================================================== */

:root{
  --bg:#ffffff;
  --bg-alt:#f4f6fa;
  --bg-fundo:#0b1220;
  --txt:#16202e;
  --txt-fraco:#5a6779;
  --borda:#e2e7f0;
  --card:#ffffff;
  --acento:#1f7ae0;
  --acento-forte:#155eb0;
  --acento-claro:#e8f1fd;
  --ciano:#25c5c5;
  --sombra:0 1px 2px rgba(16,32,56,.06), 0 8px 24px rgba(16,32,56,.06);
  --sombra-alta:0 2px 4px rgba(16,32,56,.08), 0 16px 40px rgba(16,32,56,.10);
  --raio:14px;
  --wrap:1140px;
  --fonte:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1420;
    --bg-alt:#111a29;
    --bg-fundo:#070c15;
    --txt:#e7edf6;
    --txt-fraco:#9aa8bd;
    --borda:#1e2a3d;
    --card:#131d2d;
    --acento:#4d9bf0;
    --acento-forte:#7ab6f7;
    --acento-claro:#152640;
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
    --sombra-alta:0 2px 4px rgba(0,0,0,.34), 0 16px 40px rgba(0,0,0,.36);
  }
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:86px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

body{
  margin:0;
  font-family:var(--fonte);
  font-size:17px;
  line-height:1.65;
  color:var(--txt);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{line-height:1.2; margin:0 0 .5em; letter-spacing:-.02em}
h1{font-size:clamp(2.1rem, 5.2vw, 3.5rem); font-weight:800}
h2{font-size:clamp(1.7rem, 3.6vw, 2.5rem); font-weight:750}
h3{font-size:1.16rem; font-weight:700}
p{margin:0 0 1rem}
img,svg{max-width:100%}
a{color:var(--acento); text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{outline:3px solid var(--acento); outline-offset:3px; border-radius:6px}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px}

.pular{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--acento); color:#fff; padding:12px 20px; border-radius:0 0 8px 0;
}
.pular:focus{left:0}

/* ── Topo ────────────────────────────────────────────────────────────────── */
.topo{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--borda);
}
.topo-in{display:flex; align-items:center; gap:24px; height:72px}

.marca{display:flex; align-items:center; gap:10px; color:var(--txt); text-decoration:none; flex:0 0 auto}
.marca:hover{text-decoration:none}
.marca-icone{width:30px; height:30px; fill:none; stroke:var(--acento); stroke-width:2.1; stroke-linecap:round}
.marca-icone circle{fill:var(--acento); stroke:none}
.marca-txt{font-size:1.32rem; font-weight:800; letter-spacing:-.03em}
.marca-alt{color:var(--acento)}

.nav{margin-left:auto; display:flex; align-items:center; gap:30px}
.nav a{color:var(--txt-fraco); font-size:.97rem; font-weight:600; text-decoration:none}
.nav a:hover{color:var(--acento); text-decoration:none}
.nav-cta{
  background:var(--acento); color:#fff !important; padding:10px 20px; border-radius:999px;
  transition:background .18s ease;
}
.nav-cta:hover{background:var(--acento-forte)}

.menu-btn{
  display:none; margin-left:auto; width:44px; height:44px; padding:10px;
  background:none; border:1px solid var(--borda); border-radius:10px; cursor:pointer;
}
.menu-btn span{display:block; height:2px; background:var(--txt); border-radius:2px; margin:4px 0}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; background:var(--bg-fundo); color:#eaf1fb}
.hero-grade{
  position:absolute; inset:0;
  background-image:
    radial-gradient(900px 400px at 78% -8%, rgba(37,197,197,.20), transparent 60%),
    radial-gradient(700px 380px at 12% 108%, rgba(31,122,224,.26), transparent 62%),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:auto, auto, 52px 52px, 52px 52px;
}
.hero-in{position:relative; padding:clamp(64px,10vw,116px) 24px clamp(56px,8vw,88px)}
.hero h1{color:#fff; max-width:28ch; text-wrap:balance}
.destaque{
  background:linear-gradient(96deg, var(--ciano), #6fb4ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.olho{
  font-size:.8rem; font-weight:750; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ciano); margin:0 0 14px;
}
.hero .chamada{max-width:62ch; font-size:1.1rem; color:#b9c8dd; margin-bottom:34px}

.acoes{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:56px}
.btn{
  display:inline-block; padding:14px 30px; border-radius:999px;
  font-weight:700; font-size:1rem; text-decoration:none;
  transition:transform .16s ease, background .16s ease, border-color .16s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn-1{background:var(--acento); color:#fff}
.btn-1:hover{background:#3d8ee8}
.btn-2{border:1px solid rgba(255,255,255,.28); color:#eaf1fb}
.btn-2:hover{border-color:var(--ciano); color:#fff}

.selos{
  list-style:none; margin:0; padding:26px 0 0; display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  border-top:1px solid rgba(255,255,255,.12);
}
.selos li{display:flex; flex-direction:column}
.selos strong{color:#fff; font-size:1.02rem; font-weight:700}
.selos span{color:#8ba0bb; font-size:.87rem}

/* ── Seções ──────────────────────────────────────────────────────────────── */
.secao{padding:clamp(60px,8vw,100px) 0}
.secao-alt{background:var(--bg-alt)}
.secao-cab{max-width:64ch; margin-bottom:48px}
.secao-cab .olho{color:var(--acento)}
.sub{color:var(--txt-fraco); font-size:1.06rem; margin:0}

/* ── Indústria 4.0 (faixa escura, oferta carro-chefe) ────────────────────── */
.secao-industria{
  position:relative; overflow:hidden;
  background:var(--bg-fundo); color:#e3ecf8;
}
.ind-grade{
  position:absolute; inset:0;
  background-image:
    radial-gradient(760px 420px at 88% 4%, rgba(37,197,197,.16), transparent 62%),
    radial-gradient(620px 380px at 4% 96%, rgba(31,122,224,.20), transparent 64%),
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size:auto, auto, 46px 46px, 46px 46px;
}
.ind-in{position:relative}
.ind-cab{max-width:70ch}
.ind-cab h2{color:#fff}
.ind-sub-claro{color:#adbdd4}

/* Contraste antes/depois */
.ind-contraste{
  display:grid; gap:20px; margin-bottom:52px;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
}
.ind-bloco{
  border-radius:var(--raio); padding:28px 26px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.028);
}
.ind-bloco h3{font-size:1.02rem; letter-spacing:.02em; margin-bottom:1em}
.ind-bloco ul{margin:0; padding-left:0; list-style:none}
.ind-bloco li{
  position:relative; padding-left:28px; margin-bottom:.72em;
  font-size:.96rem; color:#a9bad1; line-height:1.55;
}
.ind-bloco li::before{
  position:absolute; left:0; top:0; font-weight:700;
}
.ind-antes h3{color:#f0a3a3}
.ind-antes li::before{content:"×"; color:#e07b7b; font-size:1.15rem; line-height:1.35}
.ind-depois{border-color:rgba(37,197,197,.32); background:rgba(37,197,197,.055)}
.ind-depois h3{color:var(--ciano)}
.ind-depois li::before{content:"✓"; color:var(--ciano)}

/* Três pilares */
.pilares{
  display:grid; gap:22px; margin-bottom:52px;
  grid-template-columns:repeat(auto-fit, minmax(258px,1fr));
}
.pilar{padding-top:20px; border-top:2px solid var(--ciano)}
.pilar h3{color:#fff; font-size:1.16rem; margin-bottom:.45em}
.pilar p{color:#a9bad1; font-size:.96rem; margin:0}

/* Fontes integradas */
.fontes-bloco{margin-bottom:48px}
.fontes-tit{
  font-size:.82rem; font-weight:750; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ciano); margin-bottom:22px;
}
.fontes{display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(232px,1fr))}
.fonte{
  border-radius:12px; padding:22px 20px;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.028);
}
.fonte h4{margin:0 0 .5em; font-size:1rem; font-weight:700; color:#fff}
.fonte p{margin:0; font-size:.92rem; color:#9db0c9; line-height:1.55}

/* Tecnologias / fabricantes */
.tecnos-bloco{margin-bottom:48px}
.tecnos-intro{max-width:70ch; color:#a9bad1; font-size:.99rem; margin:0 0 26px}
/* gap de 1px + fundo do container = divisores que funcionam com qualquer
   número de colunas, inclusive quando o grid quebra em 2x2 no mobile */
.tecnos{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(206px,1fr));
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--raio); overflow:hidden;
}
.tecno-grupo{padding:24px 22px; background:#0e1725}
.tecno-rot{
  display:block; font-size:.74rem; font-weight:750; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ciano); margin-bottom:10px;
}
.tecno-lista{margin:0; color:#e0eaf7; font-size:.99rem; font-weight:650; line-height:1.5}

/* Certificação */
.cert{
  display:flex; align-items:flex-start; gap:16px; margin-top:20px;
  padding:20px 24px; border-radius:var(--raio);
  border:1px solid rgba(37,197,197,.34); background:rgba(37,197,197,.07);
}
.cert-icone{
  flex:0 0 auto; width:30px; height:30px; margin-top:2px;
  fill:none; stroke:var(--ciano); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.cert-txt{display:flex; flex-direction:column; gap:5px}
.cert-txt strong{color:#fff; font-size:1.02rem; font-weight:700}
.cert-txt span{color:#a9bad1; font-size:.94rem; line-height:1.55}
.cert-lista{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; margin:10px 0 0; padding:0;
}
.cert-lista li{
  padding:5px 13px; border-radius:999px;
  background:rgba(37,197,197,.13); border:1px solid rgba(37,197,197,.36);
  color:#cfeeee; font-size:.86rem; font-weight:650;
}

/* Fecho */
.ind-fecho{max-width:74ch; padding-top:38px; border-top:1px solid rgba(255,255,255,.12)}
.ind-fecho p{color:#b6c6dc; font-size:1.02rem}
.ind-fecho strong{color:#fff}
.ind-status{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; font-size:.95rem !important}
.tag-status{
  display:inline-block; padding:4px 12px; border-radius:999px;
  background:rgba(37,197,197,.14); border:1px solid rgba(37,197,197,.42);
  color:var(--ciano); font-size:.78rem; font-weight:750;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
.ind-fecho .btn{margin-top:14px}

/* ── Cards de serviço ────────────────────────────────────────────────────── */
.cards{display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(288px,1fr))}
.card{
  position:relative; background:var(--card); border:1px solid var(--borda);
  border-radius:var(--raio); padding:30px 26px 26px; box-shadow:var(--sombra);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--sombra-alta); border-color:var(--acento)}
.card-n{
  display:block; font-family:var(--mono); font-size:.82rem; font-weight:700;
  color:var(--acento); letter-spacing:.08em; margin-bottom:12px;
}
.card h3{margin-bottom:.45em}
.card p{color:var(--txt-fraco); font-size:.97rem; margin:0}

/* ── Diferenciais ────────────────────────────────────────────────────────── */
.difs{display:grid; gap:32px; grid-template-columns:repeat(auto-fit, minmax(268px,1fr))}
.dif{padding-left:20px; border-left:3px solid var(--acento)}
.dif h3{margin-bottom:.4em}
.dif p{color:var(--txt-fraco); font-size:.99rem; margin:0}

/* ── Atuação ─────────────────────────────────────────────────────────────── */
.atuacao-in{display:grid; gap:46px; grid-template-columns:1.35fr .95fr; align-items:start}
.modelos{margin:34px 0 0; display:grid; gap:22px}
.modelos div{padding-bottom:20px; border-bottom:1px solid var(--borda)}
.modelos div:last-child{border-bottom:0; padding-bottom:0}
.modelos dt{font-weight:700; margin-bottom:.25em}
.modelos dd{margin:0; color:var(--txt-fraco); font-size:.97rem}

.atuacao-box{
  background:var(--acento-claro); border:1px solid var(--borda);
  border-radius:var(--raio); padding:30px 28px;
}
.atuacao-box h3{margin-bottom:.6em}
.atuacao-box p{font-size:.96rem; color:var(--txt-fraco)}
.atuacao-box strong{color:var(--txt)}
.atuacao-box hr{border:0; border-top:1px solid var(--borda); margin:26px 0}
.passos{margin:0; padding-left:20px; color:var(--txt-fraco); font-size:.96rem}
.passos li{margin-bottom:.5em}

/* ── Contato ─────────────────────────────────────────────────────────────── */
.secao-contato{background:var(--bg-alt)}
.contatos{display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(248px,1fr))}
.contato-card{
  display:flex; flex-direction:column; gap:6px;
  background:var(--card); border:1px solid var(--borda); border-radius:var(--raio);
  padding:26px; color:var(--txt); text-decoration:none; box-shadow:var(--sombra);
  transition:transform .18s ease, border-color .18s ease;
}
a.contato-card:hover{transform:translateY(-3px); border-color:var(--acento); text-decoration:none}
.contato-rot{
  font-size:.76rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase;
  color:var(--acento);
}
.contato-card strong{font-size:1.06rem; font-weight:700; word-break:break-word}

/* ── Rodapé ──────────────────────────────────────────────────────────────── */
.rodape{background:var(--bg-fundo); color:#93a6c0; padding:52px 0 40px}
.rodape-in{display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between}
.rodape-marca .marca-txt{color:#fff; display:block; margin-bottom:8px}
.rodape p{margin:0 0 6px; font-size:.92rem}
.rodape-dados{text-align:right}
.rodape-copy{margin-top:14px !important; color:#63788f; font-size:.86rem !important}

/* ── Responsivo ──────────────────────────────────────────────────────────── */
@media (max-width: 900px){
  .atuacao-in{grid-template-columns:1fr}
}

@media (max-width: 760px){
  body{font-size:16px}
  .menu-btn{display:block}
  .nav{
    position:absolute; top:72px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--borda);
    padding:8px 24px 20px; display:none; box-shadow:var(--sombra);
  }
  .nav.aberto{display:flex}
  .nav a{padding:13px 0; border-bottom:1px solid var(--borda)}
  .nav-cta{
    margin-top:14px; text-align:center; border-bottom:0 !important;
    padding:13px 20px !important;
  }
  .rodape-in{flex-direction:column}
  .rodape-dados{text-align:left}
}