/* ============================================================
   Página inicial, "O que fazemos" (05/10/2026, esboço do Hugo): um cartão por solução com o NOME, a ANIMAÇÃO completa
   (o mesmo filme da página da solução, em versão limpa: sem narração longa, sem placar, sem tela final; recomeça
   sozinho) e o botão "Veja mais" que leva à página. Pouco texto de propósito: dar vontade de ver mais.
   Cartão 01 = a conversa no celular da /ia/ (comum/ia-conversa.css|js; Hugo, 05/10).
   Ordem (Hugo, 06/10/2026): IA, E-commerce, Landing Page, Sistema sob medida, Automações, Integrações e APIs
   (antes E-commerce vinha primeiro; mudou para o menu que gira no celular andar sempre para o mesmo lado).
   Sem backdrop-filter: seis cartões grandes com desfoque pesariam no Safari e no celular (armadilha de 30/09).
   ============================================================ */
.hss{display:flex;flex-direction:column;gap:clamp(44px,6vw,80px);margin-top:clamp(8px,2vw,24px)}
/* divisão entre as soluções (Hugo, 05/10): a mesma linha que desce entre as seções, com o nome da próxima */
.hs-div{flex:none}
.hs{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.2vw,26px);
  padding:clamp(20px,3.2vw,44px) clamp(12px,3vw,40px) clamp(22px,3.4vw,44px);
  border:1px solid var(--stroke);border-radius:clamp(22px,3vw,34px);
  background:linear-gradient(180deg,rgba(157,114,233,.07),rgba(157,114,233,0) 38%),var(--glass);
  box-shadow:var(--inset,none),var(--lift);isolation:isolate}
.hs::before{content:'';position:absolute;left:50%;top:0;width:min(560px,80%);height:1px;translate:-50% 0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.55;pointer-events:none}
.hs-cab{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.hs-n{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.24em;color:var(--accent)}
.hs-cab h3{font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.04;letter-spacing:-.02em}
.hs-filme{width:100%;min-width:0}
.hs .hs-mais{display:inline-flex;align-items:center;gap:10px}
.hs .hs-mais svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease-out)}
.hs .hs-mais:hover svg{transform:translateX(4px)}

/* versão limpa dos filmes dentro do cartão */
.hs .lv-cap span,.hs .iv-cap span,.hs .pv-cap span,.hs .fm-cap span,.hs .ro-cap span,.hs .it-cap span{display:none}
.hs .lv-cap button,.hs .iv-cap button,.hs .pv-cap button,.hs .fm-cap button,.hs .ro-cap button,.hs .it-cap button{align-items:center}
.hs .lv-cap,.hs .iv-cap,.hs .pv-cap,.hs .fm-cap,.hs .ro-cap,.hs .it-cap{margin:0 auto 14px;max-width:440px;gap:8px}
.hs .lv-narra,.hs .iv-narra,.hs .pv-narra,.hs .fm-narra,.hs .ro-narra,.hs .it-narra{min-height:0;margin-bottom:14px}
.hs .lv-n,.hs .iv-n,.hs .pv-n,.hs .fm-n,.hs .ro-n,.hs .it-n,
.hs .lv-narra p,.hs .iv-narra p,.hs .pv-narra p,.hs .fm-narra p,.hs .ro-narra p,.hs .it-narra p{display:none}
.hs .lv-narra strong,.hs .iv-narra strong,.hs .pv-narra strong,.hs .fm-narra strong,.hs .ro-narra strong,.hs .it-narra strong{
  font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--muted);margin:0}
.hs .lv-fim,.hs .iv-fim,.hs .pv-fim,.hs .fm-fim,.hs .ro-fim,.hs .it-fim{display:none!important}
/* botão Pausar em todas as animações (Hugo, 05/10/2026): do rodapé dos filmes fica só ele */
.hs .lv-pe,.hs .iv-pe,.hs .pv-pe,.hs .fm-pe,.hs .ro-pe,.hs .it-pe{justify-content:center;margin-top:10px!important}
.hs .lv-placar,.hs .lv-ctl [data-denovo],.hs .iv-placar,.hs .iv-ctl [data-denovo],.hs .pv-placar,.hs .pv-ctl [data-denovo],.hs .fm-placar,.hs .fm-ctl [data-denovo],.hs .ro-placar,.hs .ro-ctl [data-denovo],.hs .it-placar,.hs .it-ctl [data-denovo]{display:none!important}
.hs .lv-ctl button,.hs .iv-ctl button,.hs .pv-ctl button,.hs .fm-ctl button,.hs .ro-ctl button,.hs .it-ctl button{padding:7px 16px;font-size:.78rem}

@media (max-width:600px){
  .hs{padding-inline:10px;border-radius:22px}
}

/* ---------- Equipe no celular (Hugo, 05/10/2026): 2 cartões lado a lado, como vitrine de produtos ---------- */
@media (max-width:560px){
  .team{grid-template-columns:1fr 1fr;gap:10px}
  .person{border-radius:18px}
  .person-body{padding:10px 12px 12px;gap:3px}
  .person-body h3{font-size:.84rem;line-height:1.25}
  .person .role{font-size:.54rem;letter-spacing:.08em;line-height:1.4}
  .person .initials{font-size:1.5rem}
  .person .reveal{padding:10px;gap:6px}
  .person .reveal p{font-size:.68rem;line-height:1.4}
  .person .skills{gap:4px}
  .person .skills span{font-size:.5rem;padding:3px 6px;letter-spacing:.03em}
}

/* ---------- menu do celular que gira nas soluções (comum/solucoes.js, Hugo 05/10/2026) ---------- */
.nav-sol{display:none}
@media (max-width:820px){
  #nav.nav-solucoes{padding-left:8px}
  #nav.nav-solucoes .brand,#nav.nav-solucoes .menu-btn{display:none}
  #nav.nav-solucoes .nav-sol{display:flex;flex:1;min-width:0;align-items:center;justify-content:space-between;gap:2px;position:relative}
  .nsi{position:relative;z-index:1;display:inline-flex;align-items:center;gap:5px;padding:9px 9px;border-radius:var(--r-pill);
    font-size:.8rem;color:var(--muted);white-space:nowrap;transition:color .35s var(--ease)}
  .nsi .hex{width:15px;height:15px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.6}
  .nsi.on{color:var(--accent)}
  /* a pílula acesa (como a do menu do computador, sem a seta): desliza de um item ao outro e pulsa de leve */
  .nav-sol-luz{position:absolute;left:0;top:50%;height:38px;margin-top:-19px;width:0;border-radius:var(--r-pill);opacity:0;pointer-events:none;
    border:1px solid rgba(157,114,233,.5);background:rgba(157,114,233,.16);box-shadow:0 0 18px -4px rgba(157,114,233,.6);
    transition:transform .45s var(--ease-out),width .45s var(--ease-out),opacity .3s}
  .nav-sol-luz::after{content:'';position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 14px rgba(157,114,233,.45);opacity:0;animation:nsiPulsa 2.4s ease-in-out infinite}
  [data-theme="light"] .nav-sol-luz{background:rgba(130,90,212,.10);border-color:rgba(130,90,212,.45)}
  /* o giro: meia volta para trás, troca, e volta (soma ao translateX que centraliza o menu) */
  #nav.nav-gira-sai{animation:navSai .22s cubic-bezier(.55,0,1,.45) forwards}
  #nav.nav-gira-entra{animation:navEntra .3s cubic-bezier(0,.55,.45,1) forwards}
}
@media (max-width:380px){ .nsi{padding:9px 7px;font-size:.74rem} }
@keyframes navSai{from{transform:translateX(-50%) perspective(700px) rotateX(0)}to{transform:translateX(-50%) perspective(700px) rotateX(90deg)}}
@keyframes navEntra{from{transform:translateX(-50%) perspective(700px) rotateX(-90deg)}to{transform:translateX(-50%) perspective(700px) rotateX(0)}}
@keyframes nsiPulsa{50%{opacity:1}}

/* ---------- Tecnologia (Hugo, 05/10/2026: "melhore essa parte"): garantias + faixa em duas linhas, sem pílulas ---------- */
.tc-garantias{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:clamp(6px,1.5vw,16px) 0 clamp(26px,4vw,44px)}
.tc-garantias>div{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--stroke);border-radius:var(--r-sm);
  background:linear-gradient(135deg,rgba(157,114,233,.08),rgba(157,114,233,0) 60%),var(--glass)}
.tc-garantias i{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--purple-dim)}
.tc-garantias svg{width:19px;height:19px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tc-garantias b{font-weight:500;font-size:.95rem;line-height:1.35}
.tc-faixas{display:flex;flex-direction:column;gap:6px}
.tc-faixas:hover .tc-trilho{animation-play-state:paused}
.tc-linha{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.tc-trilho{display:flex;align-items:center;gap:clamp(18px,2.6vw,34px);width:max-content;padding:6px 0;animation:tcCorre 46s linear infinite}
.tc-volta .tc-trilho{animation-direction:reverse;animation-duration:52s}
.tc-trilho span{font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1.15;letter-spacing:-.01em;white-space:nowrap;color:var(--text)}
.tc-trilho span:nth-of-type(even){color:transparent;-webkit-text-stroke:1px var(--accent)}
.tc-trilho i{flex:none;width:7px;height:7px;transform:rotate(45deg);background:var(--purple);opacity:.75}
@keyframes tcCorre{to{transform:translateX(-50%)}}
@media (max-width:760px){
  .tc-garantias{grid-template-columns:1fr;gap:8px}
  .tc-garantias>div{padding:12px 14px}
  .tc-garantias i{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){ .tc-trilho{animation:none} }
.hs-quadro iframe{display:block;width:100%;border:0;border-radius:18px;background:transparent;color-scheme:normal}