/* ==========================================================================
   ITS — Inteligência • Tecnologia • Sustentabilidade
   Identidade: laranja ITS + carvão profundo, traços de circuito, cortes
   chanfrados (eco do flyer institucional).
   ========================================================================== */

:root{
  --laranja:        #F26F21;
  --laranja-vivo:   #FF8434;
  --laranja-escuro: #C9530F;
  --carvao:         #1B1A1F;
  --carvao-2:       #232227;
  --papel:          #F7F5F1;
  --papel-2:        #EFEBE4;
  --tinta:          #232227;
  --tinta-suave:    #5C5A60;
  --branco:         #FFFFFF;

  --fonte-titulo: "Poppins", sans-serif;
  --fonte-texto:  "DM Sans", sans-serif;

  --chanfro: 28px; /* corte diagonal recorrente do flyer */
  --transicao: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:160px; /* fallback; o JS ajusta para a altura real do header */ }
body{
  margin:0;
  font-family:var(--fonte-texto);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--tinta);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--fonte-titulo); line-height:1.12; margin:0; }
h2{ font-size:clamp(1.75rem,3.4vw,2.6rem); font-weight:700; letter-spacing:-.01em; }
h2 em{ font-style:normal; color:var(--laranja); }
.ponto{ color:var(--laranja); }
.container{ width:min(1160px,92%); margin-inline:auto; }
.secao{ padding:clamp(4.5rem,9vw,7.5rem) 0; }

/* textura de grão sutil sobre todo o site */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* rótulos de seção */
.rotulo{
  font-family:var(--fonte-titulo); font-weight:600; font-size:.8rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--laranja);
  margin:0 0 .9rem; display:flex; align-items:center; gap:.9rem;
}
.rotulo::after{ content:""; flex:0 0 56px; height:2px; background:var(--laranja);
  clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,0 100%); }
.rotulo--claro{ color:var(--laranja-vivo); }

/* ===================== botões ===================== */
.botao{
  font-family:var(--fonte-titulo); font-weight:600; font-size:.95rem;
  text-decoration:none; display:inline-block; padding:.95rem 2rem;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:transform .25s var(--transicao), background .25s, color .25s, box-shadow .25s;
}
.botao--cheio{ background:var(--laranja); color:var(--branco); }
.botao--cheio:hover{ background:var(--laranja-vivo); transform:translateY(-3px); box-shadow:0 14px 30px -10px rgba(242,111,33,.55); }
.botao--vazado{ color:var(--branco); box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
.botao--vazado:hover{ box-shadow:inset 0 0 0 2px var(--laranja); color:var(--laranja-vivo); transform:translateY(-3px); }
.botao--mini{ padding:.6rem 1.4rem; font-size:.85rem; }

/* ===================== header ===================== */
.topo{
  position:sticky; top:0; z-index:100;
  background:var(--papel);
  border-bottom:1px solid rgba(35,34,39,.08);
  transition:box-shadow .3s;
}
.topo.rolou{ box-shadow:0 10px 30px -18px rgba(27,26,31,.35); }
.topo__inner{ display:flex; align-items:center; justify-content:space-between; padding:.4rem 0; }
.topo__logo img{ width:210px; height:auto; }
.topo__nav{ display:flex; align-items:center; gap:2.1rem; }
.topo__nav a:not(.botao){
  font-family:var(--fonte-titulo); font-weight:500; font-size:.92rem;
  text-decoration:none; color:var(--tinta); position:relative; padding:.3rem 0;
}
.topo__nav a:not(.botao)::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--laranja); transition:width .3s var(--transicao);
}
.topo__nav a:not(.botao):hover::after{ width:100%; }
.topo__menu{ display:none; background:none; border:0; cursor:pointer; padding:.5rem; }
.topo__menu span{ display:block; width:26px; height:2.5px; background:var(--tinta); margin:5px 0; transition:.3s; }

/* ===================== hero ===================== */
.hero{
  position:relative; background:var(--carvao); color:var(--branco);
  padding:clamp(4.5rem,9vw,7.5rem) 0 clamp(5rem,10vw,8rem);
  clip-path:polygon(0 0,100% 0,100% calc(100% - clamp(28px,4vw,56px)),0 100%);
  overflow:hidden;
}
.hero::before{ /* brilho laranja difuso */
  content:""; position:absolute; right:-12%; top:-25%; width:60%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(242,111,33,.22), transparent 65%);
  pointer-events:none;
}
.hero__circuito{
  position:absolute; right:0; top:0; height:115%; aspect-ratio:1; opacity:.5;
  pointer-events:none;
}
.traco path{ stroke:var(--laranja); stroke-width:2.5;
  stroke-dasharray:1200; stroke-dashoffset:1200; animation:tracar 3.2s 1.4s var(--transicao) forwards; }
.no circle,.no rect{ fill:var(--laranja); opacity:0; animation:acender .5s 2s forwards; }
@keyframes tracar{ to{ stroke-dashoffset:0; } }
@keyframes acender{ to{ opacity:1; } }

.hero__grid{
  position:relative; display:grid; grid-template-columns:1.25fr .85fr;
  gap:clamp(2.5rem,5vw,5rem); align-items:center;
}
.selo{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  font-family:var(--fonte-titulo); font-weight:600; font-size:.78rem;
  letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.85);
  margin:0 0 1.6rem;
}
.selo i{ width:7px; height:7px; background:var(--laranja); border-radius:50%; }
.hero h1{
  font-size:clamp(2.1rem,4.6vw,3.7rem); font-weight:800; letter-spacing:-.02em;
}
.hero h1 em{ font-style:normal; color:var(--laranja);
  background:linear-gradient(180deg,var(--laranja-vivo),var(--laranja));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero__linha{
  width:140px; height:3px; background:var(--laranja); margin:1.8rem 0;
  position:relative;
}
.hero__linha::after{
  content:""; position:absolute; right:-12px; top:50%; translate:0 -50%;
  width:11px; height:11px; border:3px solid var(--laranja); border-radius:50%;
}
.hero__paragrafo{ color:rgba(255,255,255,.78); max-width:54ch; margin:.9rem 0; }
.hero__paragrafo strong{ color:var(--branco); }
.hero__acoes{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.2rem; }

/* painel de pilares (lado direito do hero) */
.hero__painel{
  display:grid; gap:.9rem; position:relative; z-index:1;
}
.pilar{
  display:flex; gap:1.1rem; align-items:center;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(6px);
  padding:1.05rem 1.3rem;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  transition:background .3s, border-color .3s, transform .3s var(--transicao);
}
.pilar:hover{ background:rgba(242,111,33,.12); border-color:rgba(242,111,33,.5); transform:translateX(8px); }
.pilar__icone{
  flex:0 0 52px; height:52px; display:grid; place-items:center;
  background:var(--laranja); color:var(--branco); border-radius:50%;
}
.pilar__icone svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pilar h3{ font-size:1rem; font-weight:700; color:var(--branco); letter-spacing:.01em; }
.pilar p{ margin:.15rem 0 0; font-size:.86rem; color:rgba(255,255,255,.65); }

/* ===================== faixa marquee ===================== */
.faixa{
  background:var(--laranja); color:var(--branco); overflow:hidden;
  padding:.85rem 0; margin-top:calc(-1 * clamp(28px,4vw,56px));
  transform:rotate(-1deg) scale(1.02); transform-origin:center;
  position:relative; z-index:5;
  box-shadow:0 18px 40px -22px rgba(242,111,33,.7);
}
.faixa__trilho{ display:flex; width:max-content; animation:correr 26s linear infinite; }
.faixa__trilho span{
  font-family:var(--fonte-titulo); font-weight:700; font-size:1rem;
  letter-spacing:.18em; text-transform:uppercase; white-space:nowrap;
  display:flex; align-items:center;
}
.faixa__trilho i{ font-style:normal; margin:0 1.6rem; font-size:.7rem; opacity:.8; }
@keyframes correr{ to{ transform:translateX(-50%); } }

/* ===================== soluções ===================== */
.secao__cabeca{ max-width:640px; margin-bottom:clamp(2.5rem,5vw,4rem); }
.solucoes__grade{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
}
.cartao{
  position:relative; background:var(--branco); padding:2.4rem 1.9rem 2.1rem;
  clip-path:polygon(var(--chanfro) 0,100% 0,100% calc(100% - var(--chanfro)),calc(100% - var(--chanfro)) 100%,0 100%,0 var(--chanfro));
  border-top:4px solid var(--laranja);
  box-shadow:0 24px 50px -30px rgba(27,26,31,.25);
  transition:transform .35s var(--transicao), box-shadow .35s;
}
.cartao:hover{ transform:translateY(-10px); box-shadow:0 34px 60px -28px rgba(242,111,33,.4); }
.cartao__num{
  position:absolute; top:1.2rem; right:1.4rem;
  font-family:var(--fonte-titulo); font-weight:800; font-size:2.6rem;
  color:var(--papel-2); line-height:1; user-select:none;
}
.cartao__icone{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:var(--laranja); color:var(--branco); margin-bottom:1.4rem;
  transition:transform .35s var(--transicao);
}
.cartao:hover .cartao__icone{ transform:rotate(-8deg) scale(1.08); }
.cartao__icone svg{ width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cartao h3{ font-size:1.22rem; font-weight:700; margin-bottom:.7rem; }
.cartao h3 strong{ color:var(--laranja); }
.cartao > p{ color:var(--tinta-suave); font-size:.95rem; margin:0 0 1.2rem; }
.lista{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.lista li{
  position:relative; padding-left:1.7rem; font-size:.93rem; color:var(--tinta);
}
.lista li::before{
  content:""; position:absolute; left:0; top:.36em; width:15px; height:15px;
  border-radius:50%; background:var(--laranja);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm-1 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm-1 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ===================== resultados (seção escura) ===================== */
.resultados{
  position:relative; background:var(--carvao); color:var(--branco); overflow:hidden;
  clip-path:polygon(0 clamp(20px,3vw,44px),100% 0,100% 100%,0 100%);
  padding-top:calc(clamp(4.5rem,9vw,7.5rem) + clamp(20px,3vw,44px));
}
.resultados__circuito{ position:absolute; left:0; bottom:-5%; height:90%; aspect-ratio:1; opacity:.35; pointer-events:none; }
.resultados__grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:center; }
.resultados h2{ color:var(--branco); }
.resultados__paragrafo{ color:rgba(255,255,255,.75); margin:1.2rem 0 2rem; max-width:48ch; }
.resultados__lista{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.resultados__lista li{
  display:flex; align-items:center; gap:1.1rem;
  background:rgba(255,255,255,.045); border-left:3px solid var(--laranja);
  padding:1rem 1.3rem; font-family:var(--fonte-titulo); font-weight:500; font-size:.98rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
  transition:background .3s, transform .3s var(--transicao);
}
.resultados__lista li:hover{ background:rgba(242,111,33,.14); transform:translateX(8px); }
.resultados__lista svg{
  flex:0 0 30px; height:30px; fill:none; stroke:var(--laranja-vivo);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}

/* ===================== por que a ITS ===================== */
.porque{ background:var(--papel); }
.porque__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:center; }
.porque__paragrafo{ color:var(--tinta-suave); max-width:50ch; }
.porque__paragrafo strong{ color:var(--tinta); }
.porque__lista{ list-style:none; margin:0; padding:0; counter-reset:item; display:grid; gap:1rem; }
.porque__lista li{
  counter-increment:item; position:relative;
  background:var(--branco); padding:1.15rem 1.4rem 1.15rem 4.4rem;
  font-family:var(--fonte-titulo); font-weight:500; font-size:.98rem;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  box-shadow:0 18px 40px -28px rgba(27,26,31,.3);
  transition:transform .3s var(--transicao), box-shadow .3s;
}
.porque__lista li:hover{ transform:translateX(10px); box-shadow:0 22px 44px -24px rgba(242,111,33,.45); }
.porque__lista li::before{
  content:"0" counter(item);
  position:absolute; left:1.3rem; top:50%; translate:0 -50%;
  font-family:var(--fonte-titulo); font-weight:800; font-size:1.25rem; color:var(--laranja);
}

/* ===================== contato ===================== */
.contato{ background:var(--papel-2); padding-bottom:clamp(5rem,10vw,8rem); }
.contato__caixa{
  background:linear-gradient(135deg,var(--laranja) 0%,var(--laranja-escuro) 100%);
  color:var(--branco);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4.5rem);
  padding:clamp(2.5rem,5.5vw,4.5rem);
  clip-path:polygon(var(--chanfro) 0,100% 0,100% calc(100% - var(--chanfro)),calc(100% - var(--chanfro)) 100%,0 100%,0 var(--chanfro));
  box-shadow:0 40px 80px -40px rgba(201,83,15,.6);
  position:relative; overflow:hidden;
}
.contato__caixa::before{ /* padrão de circuito sutil */
  content:""; position:absolute; inset:0; opacity:.12; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='white' stroke-width='1.5'%3E%3Cpath d='M10 60h30l15-15V10M60 110V80l15-15h35'/%3E%3Ccircle cx='55' cy='10' r='4'/%3E%3Ccircle cx='110' cy='65' r='4'/%3E%3C/svg%3E");
}
.contato__chamada{ position:relative; }
.contato h2{ color:var(--branco); margin:.2rem 0 .9rem; }
.contato .ponto{ color:var(--carvao); }
.contato__chamada p:last-child{ color:rgba(255,255,255,.9); margin:0; }
.contato .rotulo--claro{ color:rgba(255,255,255,.95); }
.contato .rotulo--claro::after{ background:rgba(255,255,255,.8); }
.contato__lista{ list-style:none; margin:0; padding:0; display:grid; gap:1.05rem; position:relative; align-content:center; }
.contato__lista li{ display:flex; gap:1rem; align-items:flex-start; font-size:1rem; }
.contato__lista a{ color:var(--branco); text-decoration:none; font-weight:500; border-bottom:1px solid rgba(255,255,255,.35); transition:border-color .25s; }
.contato__lista a:hover{ border-color:var(--branco); }
.contato__lista svg{
  flex:0 0 24px; height:24px; margin-top:.1rem;
  fill:none; stroke:var(--branco); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* ===================== rodapé ===================== */
.rodape{ background:var(--carvao); color:rgba(255,255,255,.65); padding:3.2rem 0 2.4rem; }
.rodape__inner{ display:grid; gap:1.4rem; justify-items:center; text-align:center; }
.rodape__marca img{ width:110px; filter:drop-shadow(0 0 18px rgba(242,111,33,.25)); }
.rodape__marca p{
  font-family:var(--fonte-titulo); font-weight:600; font-size:.72rem;
  letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.8); margin:.9rem 0 0;
}
.rodape__marca i{ font-style:normal; color:var(--laranja); font-size:.6rem; margin:0 .4rem; }
.rodape__slogan{ font-family:var(--fonte-titulo); font-weight:500; color:var(--laranja-vivo); font-size:.95rem; margin:0; }
.rodape__copy{ font-size:.82rem; margin:0; opacity:.7; }

/* ===================== animações de entrada ===================== */
.revela{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--transicao), transform .8s var(--transicao);
  transition-delay:calc(var(--i,0) * 90ms);
}
.revela.visivel{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .revela{ opacity:1; transform:none; transition:none; }
  .faixa__trilho{ animation:none; }
  .traco path{ animation:none; stroke-dashoffset:0; }
  .no circle,.no rect{ animation:none; opacity:1; }
  html{ scroll-behavior:auto; }
}

/* ===================== responsivo ===================== */
@media (max-width:980px){
  .hero__grid,.resultados__grid,.porque__grid,.contato__caixa{ grid-template-columns:1fr; }
  .solucoes__grade{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
  .hero__circuito{ opacity:.22; }
}
@media (max-width:760px){
  .topo__menu{ display:block; }
  .topo__nav{
    position:fixed; inset:0 0 auto 0; top:0; padding:6.5rem 8% 2.5rem;
    flex-direction:column; align-items:flex-start; gap:1.4rem;
    background:var(--papel); box-shadow:0 30px 60px -20px rgba(27,26,31,.35);
    transform:translateY(-110%); transition:transform .4s var(--transicao);
    z-index:-1;
  }
  .topo__nav.aberto{ transform:none; }
  .topo__menu.aberto span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .topo__menu.aberto span:nth-child(2){ opacity:0; }
  .topo__menu.aberto span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
  .faixa__trilho span{ font-size:.82rem; }
}