html{scroll-behavior:smooth}
body{margin:0;background:#0a0c10;color:#e7ecef;font-family:'Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#8be9dd;text-decoration:none}a:hover{color:#c3f5ee}
summary::-webkit-details-marker{display:none}
summary{list-style:none}
input::placeholder,textarea::placeholder{color:rgba(231,236,239,.35)}
input:focus,textarea:focus{outline:none;border-color:rgba(110,231,216,.5)!important}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes glowPulse{0%,100%{opacity:.55}50%{opacity:.9}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@media (max-width:900px){
.svc-grid{display:none!important}
.svc-chips{display:flex!important}
.stack-col{gap:16px!important}
.stack-label{margin-bottom:7px!important;font-size:10.5px!important}
.stack-chips{gap:6px!important}
.stack-chip{padding:6px 11px!important;font-size:12px!important;border-radius:7px!important}
.nav-links{display:none!important}
.nav-burger{display:flex!important}
.mob-panel.open{display:flex!important}
.hero-grid{grid-template-columns:repeat(2,1fr)!important}
.grid3{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column!important;grid-auto-columns:84%!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;padding:14px 4px 18px!important;margin-left:-4px!important;margin-right:-4px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.grid3::-webkit-scrollbar{display:none}
.grid3 > *{scroll-snap-align:center;min-width:0}
.proc-grid{grid-template-columns:repeat(2,1fr)!important;row-gap:36px!important}
.proc-line{display:none!important}
.split2{grid-template-columns:1fr!important;gap:44px!important}
.sticky-col{position:static!important}
.grid4{grid-template-columns:repeat(2,1fr)!important}
.adv-cell{padding:16px 16px!important;display:flex;align-items:baseline;gap:9px}
.adv-glyph{font-size:11px!important}
.adv-title{margin-top:0!important;font-size:13.5px!important}
.adv-desc{display:none!important}
}
@media (max-width:600px){
.form2{grid-template-columns:1fr!important}
.btn-row{flex-direction:column!important;align-items:stretch!important}
.btn-row a{text-align:center}
}

.hv1:hover{color:#fff !important}
.hv2:hover{color:#0a0c10 !important;box-shadow:0 0 24px rgba(110,231,216,.35) !important;transform:translateY(-1px) !important}
.hv3:hover{color:#0a0c10 !important;box-shadow:0 0 32px rgba(110,231,216,.4) !important;transform:translateY(-2px) !important}
.hv4:hover{color:#fff !important;border-color:rgba(255,255,255,.3) !important;background:rgba(255,255,255,.06) !important}
.hv5:hover{border-color:rgba(110,231,216,.35) !important;background:rgba(110,231,216,.045) !important;transform:translateY(-4px) !important;box-shadow:0 16px 40px rgba(0,0,0,.35) !important}
.hv6:hover{background:rgba(110,231,216,.08) !important;transform:translateY(-4px) !important}
.hv7:hover{transform:translateY(-5px) !important;box-shadow:0 20px 50px rgba(0,0,0,.4) !important}
.hv8:hover{color:#0a0c10 !important;box-shadow:0 0 26px rgba(110,231,216,.4) !important}
.hv9:hover{border-color:rgba(110,231,216,.3) !important;transform:translateY(-5px) !important;box-shadow:0 20px 50px rgba(0,0,0,.4) !important}
.hv10:hover{color:#fff !important;border-color:rgba(255,255,255,.32) !important}
.hv11:hover{background:rgba(110,231,216,.12) !important;box-shadow:0 0 20px rgba(110,231,216,.25) !important}
.hv12:hover{border-color:rgba(110,231,216,.45) !important;color:#fff !important;background:rgba(110,231,216,.07) !important;transform:translateY(-2px) !important}
.hv13:hover{background:#10141b !important}
.hv14:hover{border-color:rgba(110,231,216,.3) !important;transform:translateY(-6px) !important;box-shadow:0 20px 50px rgba(0,0,0,.4) !important}
.hv15:hover{background:rgba(255,255,255,.03) !important}
.hv16:hover{color:#0a0c10 !important;box-shadow:0 0 36px rgba(110,231,216,.45) !important;transform:translateY(-2px) !important}
.hv17:hover{border-color:rgba(110,231,216,.35) !important;background:rgba(110,231,216,.04) !important}
.hv18:hover{box-shadow:0 0 28px rgba(110,231,216,.4) !important;transform:translateY(-1px) !important}

/* =================================================================
   Adições da conversão para versão hospedável.
   O layout acima é o do fonte, intocado — inclusive as classes hv,
   que existem porque style="" não suporta :hover.
   ================================================================= */

/* o cabeçalho é position:fixed com 64px: sem isto as âncoras param embaixo dele */
html{scroll-padding-top:82px}
/* clip, nunca hidden (CLAUDE.md §7.1) */
body{overflow-x:clip}
[hidden]{display:none !important}
img{display:block;max-width:100%}

/* acessibilidade — piso do §15 */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:14px 22px;border-radius:0 0 10px 0;background:#6ee7d8;color:#0a0c10;font:600 14px 'Instrument Sans',sans-serif}
.skip-link:focus{left:0;color:#0a0c10}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid #6ee7d8;outline-offset:3px;border-radius:6px}

/* height:auto é obrigatório nas duas regras de imagem abaixo: o atributo HTML
   height vira a propriedade CSS height, e aspect-ratio só age quando um dos
   eixos é auto — sem isso a imagem renderiza na altura natural e os cards
   da grade ficam desalinhados.

   cards de projeto: eram <div onclick>, agora são <button> de verdade.
   Reset do estilo nativo do botão — o visual continua vindo do style="" inline. */
.proj-card{display:block;width:100%;padding:0;margin:0;font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none}
.proj-card__img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;background:#0e1117;border-bottom:1px solid rgba(255,255,255,.06)}

/* modal de projeto: <dialog> nativo (Esc, foco preso e devolução de foco) */
#projModal{width:100%;max-width:920px;max-height:90vh;padding:0;overflow:auto;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#0d1015;box-shadow:0 40px 100px rgba(0,0,0,.6);color:#e7ecef}
#projModal::backdrop{background:rgba(6,8,11,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#mImg{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;background:#0e1117;border-bottom:1px solid rgba(255,255,255,.08)}

/* ---- cards de projeto: alturas iguais ----
   O <li> é item de grade e já esticava para a altura da linha, mas o <button>
   dentro dele só tinha a altura do próprio conteúdo (medido: 296/339/296px).
   Como o card visível — borda, fundo, arredondamento — é o botão, o primeiro e
   o último apareciam menores que o do meio. */
#projetos .grid3>li{display:flex}
#projetos .proj-card{flex:1;display:flex;flex-direction:column}
#projetos .proj-card>div{flex:1}

/* ---- entrega express: CTA sempre rente à base do card ----
   O botão era só o último elemento do fluxo. Quando um card quebrava o texto em
   mais linhas que o vizinho, o CTA descia junto (medido em 320px: 302/288/302).

   Quem cresce é a lista de itens (o último <div> do card), e não o próprio
   <a>: o link carrega margin-top:28px inline, que venceria um margin-top:auto
   vindo da folha de estilo. Empurrando pelo irmão anterior, o respiro de 28px
   do design é preservado. */
#express .grid3>*{display:flex;flex-direction:column}
#express .grid3>*>div:last-of-type{flex-grow:1}

/* ---- desempenho de rolagem ----
   overscroll-behavior impede que o fim do carrossel encadeie a rolagem para a
   página: sem isto, o gesto "vaza" e a página dá um tranco no meio do arrasto. */
.grid3{overscroll-behavior-x:contain}

@media (max-width:900px){
  /* backdrop-filter é recomposto a cada quadro de rolagem. Com carrossel
     arrastando sob um cabeçalho fixo desfocado, o navegador refaz o blur da
     faixa inteira a cada frame — é a causa mais provável do congelamento de
     alguns segundos em aparelho mediano. No mobile o blur sai e o fundo fica
     mais opaco: visual praticamente igual, custo por quadro perto de zero. */
  [style*="backdrop-filter"]{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  /* opaco: sem blur, transparência deixa o conteúdo atravessar a barra */
  .site-header{background:#0a0c10!important}
  .mob-panel{background:#0a0c10}
  #projModal::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(6,8,11,.94)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  [class*="hv"]:hover{transform:none !important}
}