/* The header keeps its three controls at every supported viewport width. */
.header-bar{position:relative;grid-template-columns:1fr auto 1fr;min-height:56px}
#menu-button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);justify-self:center}
.header-cta{display:inline-flex;grid-column:3;justify-self:end}
#site-header.in-footer{transform:translateY(-150%)}
.menu-open #site-header.in-footer{transform:none}
.contact-mobile{display:none}
#site-header{--color-foreground:#eee}
#site-header[data-theme=light]{--color-foreground:#121212}
#inicio .ascii-host,#inicio #ascii-canvas{pointer-events:auto;touch-action:pan-y}
#inicio .ascii-host{cursor:crosshair}

/* Keep the thumbnails together with the heading instead of distributing them
   over a viewport that can be much taller than a normal desktop display. */
.work-sidebar{position:sticky;top:104px;height:auto;max-height:none;overflow:visible;display:flex;flex-direction:column;justify-content:flex-start;gap:24px;padding:0 12px 12px 0}
.work-sidebar h2{font-size:clamp(36px,4vw,64px)}
.work-sidebar nav{gap:8px}
.work-sidebar nav button>div{width:clamp(64px,6.2vw,88px)}
.work-sidebar>div:last-child{margin-top:4px}
.work-grid{align-items:stretch}
.work-sidebar-column{align-self:stretch}
.work-gallery{min-width:0}
.work-gallery .project-card{scroll-margin-top:0}
.mobile-case-nav{display:none}

/* A full-width process composition, with room for the 48px impact displacement. */
.process-layout{grid-column:1 / -1!important;grid-template-columns:repeat(12,minmax(0,1fr))!important}
.process-heading,.process-body{grid-column:1 / -1!important}
.process-heading{margin-bottom:48px}
.process-body{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(64px,7vw,120px);align-items:center}
.process-body>div:first-child{padding-right:48px!important;min-width:0}
#processo .process-steps{max-width:none}
.process-media{height:clamp(460px,62svh,720px);aspect-ratio:auto!important;min-width:0}
.process-images{width:100%}
#processo .process-steps>div:not(.process-dot){scroll-margin-top:120px}

/* Original footer composition: form / central navigation / contacts,
   two independent ASCII paintings, centered copyright and a low-contrast mark. */
footer.reference-footer{position:relative;isolation:isolate;padding:48px 32px 0;min-height:900px;height:100svh;overflow:hidden;background:#121212;color:#eee}
.footer-art{position:absolute;top:12.5%;bottom:0;width:44%;z-index:1;pointer-events:none}
.footer-art-left{left:-2%}.footer-art-right{right:0}
.footer-art canvas{width:100%;height:100%;display:block;pointer-events:auto}
.footer-content{height:100%;display:flex;flex-direction:column;position:relative;z-index:2;pointer-events:none}
.footer-content a,.footer-content button,.footer-content form{pointer-events:auto}
.footer-reference-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:48px;font-family:aktiv-grotesk,sans-serif}
.footer-form-column{grid-column:1 / span 3}
.footer-form-title{font-size:16px;font-weight:500;line-height:24px;margin:0 0 8px}
#contato-formulario{display:flex;flex-direction:column;gap:6px;scroll-margin-top:0}
#contato-formulario input{width:100%;height:40px;padding:8px 12px;border:1px solid #494949;background:#333;color:#eee;outline:none;font:14px aktiv-grotesk,sans-serif;border-radius:0}
#contato-formulario input:focus{border-color:#eee}
#contato-formulario input::placeholder{color:#929292}
.footer-submit{border:0;position:relative;display:flex;width:100%;height:40px;padding:0;background:transparent;color:#121212;cursor:pointer;font:14px GeistMono,monospace;gap:6px;overflow:hidden}
.submit-label{display:grid;place-items:center;background:#eee;flex:1;margin-right:46px;transition:transform .7s cubic-bezier(.76,0,.24,1)}
.submit-plus-leading,.submit-plus-trailing{display:grid;place-items:center;background:#eee;position:absolute;top:0;width:40px;height:40px;font-size:18px;transition:transform .7s cubic-bezier(.76,0,.24,1)}
.submit-plus-leading{left:0;transform:scale(0) rotate(-45deg);transform-origin:left}.submit-plus-trailing{right:0;transform-origin:right}
.footer-submit:hover .submit-label{transform:translateX(46px)}.footer-submit:hover .submit-plus-leading{transform:none}.footer-submit:hover .submit-plus-trailing{transform:scale(0) rotate(-45deg)}
.footer-form-note{font:14px/1.4 aktiv-grotesk,sans-serif;color:#777;margin:0}
#contact-status:empty{display:none}
.footer-availability{margin-top:20px;display:flex;flex-direction:column;gap:8px;font:12px/1.4 GeistMono,monospace;color:#888}
.footer-availability p{display:flex;align-items:baseline;gap:8px;margin:0}
.footer-availability span{flex-shrink:0;width:8px;height:8px;display:inline-block;background:var(--color-brand)}
.footer-reference-nav{grid-column:6 / span 2;display:flex;align-items:center;flex-direction:column;gap:8px;font:14px/24px GeistMono,monospace;color:#888}
.footer-reference-nav a:hover,.footer-reference-contact a:hover{color:#eee}
.footer-reference-contact{grid-column:10 / span 3;display:flex;flex-direction:column;gap:20px;font-size:16px;line-height:24px;color:#888}
.footer-reference-contact>div{display:flex;flex-direction:column;align-items:flex-start}
.footer-reference-contact a{text-decoration:underline;text-underline-offset:5px;overflow-wrap:anywhere}
/* Card do robô caindo (seção 2): sem fundo, só o robô e o vento (atrás e na frente dele). */
/* Como operamos: animações WebGL (assets/operamos-3d.js) no lugar das imagens. */
canvas.operamos-3d{display:block;width:100%;height:100%;background:#0a0d10}
/* Projetos em destaque: capa grande + celular flutuando sobre o canto esquerdo; no hover a página real rola nos dois (assets/projetos-rolagem.js). */
#projetos .proj-vitrine{display:block!important;position:relative;width:100%;aspect-ratio:auto;overflow:visible}
.proj-desk{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#0a0d10}
.proj-desk .proj-rolo img{display:block;width:100%;height:auto}
.proj-capa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
/* celular: corpo com brilho metálico, borda fina, ilha da câmera e botões laterais */
.proj-cel{position:absolute;z-index:3;left:4%;top:15%;width:20%;aspect-ratio:9/19.5;padding:4px;
  border-radius:24px;background:linear-gradient(145deg,#3a3d42 0%,#121315 38%,#0a0a0b 62%,#2a2c30 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 30px 60px -20px rgba(0,0,0,.6);
  animation:cel-flutua 6s ease-in-out infinite}
.proj-cel::before,.proj-cel::after{content:'';position:absolute;width:3px;border-radius:2px;background:#26282c}
.proj-cel::before{right:-2px;top:24%;height:11%}
.proj-cel::after{left:-2px;top:20%;height:6%;box-shadow:0 260% 0 #26282c,0 430% 0 #26282c}
.proj-cel-tela{position:relative;width:100%;height:100%;overflow:hidden;border-radius:20px;background:#000}
.proj-cel-tela::before{content:'';position:absolute;z-index:2;top:2.2%;left:50%;width:30%;height:3.1%;transform:translateX(-50%);border-radius:999px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.proj-cel-tela img{display:block;width:100%;height:auto}
@keyframes cel-flutua{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(-.5deg)}}
.proj-rolo{transform:translateY(0);transition:transform 2.2s cubic-bezier(.16,1,.3,1)!important;will-change:transform}
.proj-vitrine.rolando .proj-capa{opacity:0!important;transform:scale(1.02)}   /* home.css força img{opacity:1!important} */
.proj-vitrine.rolando .proj-rolo{transform:translateY(var(--fim,0))!important;transition:transform var(--dur,28s) cubic-bezier(.22,0,.25,1)!important}
@media(max-width:639px){.proj-cel{width:25%;left:3%;top:10%;padding:3px;border-radius:14px}.proj-cel-tela{border-radius:11px}}
@media(prefers-reduced-motion:reduce){.proj-cel{animation:none}}
/* neutraliza as regras antigas dos cards (zoom de 115% nos filhos do link e imagens a 100% de altura) */
#projetos .project-card .proj-vitrine>div,#projetos .project-card .proj-vitrine:hover>div{transform:none;will-change:auto}
#projetos .project-card .proj-rolo img{height:auto}
#projetos .project-card .proj-vitrine{aspect-ratio:auto}
/* O que fazemos: cada item tem uma animação. No celular fica fixa no item; com mouse vira thumb que segue o cursor. */
#servicos .svc{position:relative}
.svc-thumb{aspect-ratio:16/10;margin-top:16px;overflow:hidden;background:#0a0d10;border:1px solid rgba(0,209,255,.22)}
@media (hover:hover) and (pointer:fine) and (min-width:768px){
  .svc-thumb{position:absolute;left:0;top:0;width:360px;margin:0;z-index:30;pointer-events:none;opacity:0;
    transform:translate(var(--x,0px),var(--y,0px)) scale(.94);transform-origin:left bottom;
    transition:opacity .25s ease,transform .18s cubic-bezier(.2,.7,.2,1)}
  #servicos .svc:hover .svc-thumb{opacity:1;transform:translate(var(--x,0px),var(--y,0px)) scale(1)}
}
/* O robô é maior que o card e passa um pouco por cima do card vizinho (camada 99). */
.queda{position:relative;z-index:99;background:none;overflow:visible!important}
.queda canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.queda-tras{z-index:0}.queda-frente{z-index:2}
.queda .queda-robo{z-index:1;inset:-14% -42% -14% -12%;width:154%;height:128%}
@media(max-width:767px){.queda .queda-robo{inset:-10% -6%;width:112%;height:120%}}
.footer-reference-copyright{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;color:#888;font-size:16px;line-height:24px;margin-top:auto;margin-bottom:auto;padding:56px 0 150px}
/* ESCOMSTUDIO em maiúsculas: a largura do texto é cerca de 6,4 vezes o tamanho da fonte, então a fonte sai da largura útil. */
.footer-reference-wordmark{display:block;position:relative;white-space:nowrap;color:#2b2b2b;font:500 min(calc((100vw - 64px) / 6.55),340px)/.73 aktiv-grotesk,sans-serif;letter-spacing:-.08em;margin-left:-.015em;padding-top:24px;z-index:-1}
.footer-reference-wordmark span{font-weight:400;letter-spacing:-.075em}

@media(min-width:640px){
  #projetos>.hidden{display:block;padding-block:64px}
  #projetos>.lg\:hidden{display:none}
  #projetos .work-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2.4fr);gap:clamp(32px,5vw,80px)}
  #projetos .work-sidebar-column{grid-column:auto;min-width:0}
  #projetos .work-gallery{grid-column:auto;display:flex;flex-direction:column;gap:64px;padding-top:0}
}
@media(min-width:640px) and (max-width:1023px){
  #projetos .grid-container{padding-inline:24px}
  .work-sidebar h2{font-size:38px}
  .work-sidebar nav button>div{width:76px}
  .work-sidebar{top:100px;gap:24px}
  .work-sidebar .text-body{font-size:14px}
  .menu-content nav{font-size:36px}
}
@media(max-width:1023px){
  .header-bar{grid-template-columns:1fr auto 1fr}
  .header-cta{display:inline-flex;font-size:12px;padding-left:38px}
  .header-cta>span{height:32px}.header-cta .split-leading,.header-cta .split-trailing{width:32px}
  .header-cta .split-label{transform:translateX(-38px);padding-inline:10px}
  .header-cta:hover .split-label{transform:none}
  #menu-button{justify-self:center;font-size:12px}
  footer.reference-footer{height:auto;min-height:100svh;padding:40px 24px 0}
  .footer-form-column{grid-column:1 / span 5}
  .footer-reference-nav{grid-column:7 / span 2;align-items:flex-start;font-size:12px}
  .footer-reference-contact{grid-column:10 / span 3;font-size:14px;line-height:22px}
  .footer-reference-copyright{padding-top:160px;padding-bottom:220px}
  .footer-reference-wordmark{font-size:calc((100vw - 48px) / 6.55)}
}
@media(max-width:639px){
  #site-header{inset:12px 16px auto}.wordmark{font-size:23px;letter-spacing:-1.5px;height:24px}.wordmark span{height:24px}.wordmark:hover span,.menu-open .wordmark span{transform:translateY(-24px)}
  .contact-desktop{display:none}.contact-mobile{display:inline}
  .header-cta{font-size:11px}.header-cta .split-label{padding-inline:8px}
  #menu-button{font-size:11px;gap:5px}
  .mobile-case-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;position:sticky;top:88px;z-index:25;padding:12px 0;background:#121212;overflow:visible;margin:0 0 24px}
  .mobile-case-nav button{width:100%;min-width:0;background:none;border:0;opacity:.45;cursor:pointer;padding:0 0 6px;position:relative}
  .mobile-case-nav button[aria-current=true]{opacity:1;border-bottom:3px solid var(--color-brand)}
  .mobile-case-nav img{height:auto;width:100%;aspect-ratio:16/10;object-fit:cover}
  #projetos>.lg\:hidden .project-card{scroll-margin-top:60px}
  footer.reference-footer{padding:40px 16px 0;min-height:max(1050px,100svh)}
  .footer-reference-grid{grid-template-columns:1fr 1fr;gap:32px 16px}
  .footer-form-column{grid-column:1 / -1;max-width:380px}
  .footer-reference-nav{grid-column:1;gap:5px;font-size:12px;align-items:flex-start}
  .footer-reference-contact{grid-column:2;font-size:13px;line-height:21px}
  .footer-art{top:38%;bottom:0;width:90%}
  .footer-art-left{left:-40%}.footer-art-right{right:-40%}
  .footer-reference-copyright{padding-block:150px 190px;font-size:14px;line-height:22px;position:relative;z-index:2;color:#bbb;text-shadow:0 0 6px #121212,0 0 12px #121212,0 0 18px #121212}
  .footer-reference-wordmark{font-size:calc((100vw - 32px) / 6.55)}
}
@media(max-height:760px) and (min-width:640px){
  .work-sidebar{top:96px;gap:16px;max-height:none}
  .work-sidebar h2{font-size:40px}.work-sidebar .text-body{font-size:13px;line-height:1.4}
  .work-sidebar nav{gap:5px}.work-sidebar nav button>div{width:60px}
  .process-heading{margin-bottom:24px}.process-heading h2{font-size:48px}
  .process-media{height:440px}#processo .process-steps{--tw-space-y-reverse:0}#processo .process-step h3{font-size:26px}#processo .process-step p{font-size:14px;line-height:20px}#processo .process-steps> :not(:last-child){margin-bottom:24px}
}
@media(max-height:540px) and (min-width:640px){
  .work-sidebar{top:88px;gap:10px;padding-bottom:0}
  .work-sidebar h2{font-size:28px;line-height:1.1}
  .work-sidebar>div:first-child>p{display:none}
  .work-sidebar .mb-24{margin-bottom:0}
  .work-sidebar nav{gap:4px}
  .work-sidebar nav button>div{width:44px}
}

#padrao .pillar-marker,#servicos .pillar-marker{position:static;flex:none;margin-inline-end:10px}
.testimonials{background:#151515;color:#f4f4f4;padding:clamp(64px,8vw,128px) 0;overflow:hidden}
.testimonials-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;padding-inline:clamp(20px,3vw,48px);margin-bottom:32px}
.testimonials-controls{display:flex;align-items:center;gap:10px;white-space:nowrap;font:12px GeistMono,monospace}
.testimonials-controls button{width:42px;height:42px;border:1px solid #777;background:transparent;color:inherit;cursor:pointer}
.testimonials-controls button:hover{background:var(--color-brand);color:#141414}
.testimonials-track{--card-width:min(72vw,1050px);display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding-inline:calc((100% - var(--card-width))/2)}
.testimonials-track::-webkit-scrollbar{display:none}
.testimonial-card{display:flex;flex:0 0 var(--card-width);flex-direction:column;justify-content:space-between;gap:32px;min-height:clamp(300px,35vw,510px);padding:clamp(24px,4vw,56px);scroll-snap-align:center;background:#232323;border:1px solid #565656;position:relative;isolation:isolate}
.testimonial-card::after{content:"";position:absolute;inset:0;pointer-events:none;border:4px dotted #343434}
.testimonial-card.is-entering::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:repeating-linear-gradient(0deg,#b0bfd026 0 2px,transparent 2px 7px);animation:testimonial-scan .55s ease-out both}
@keyframes testimonial-scan{from{clip-path:inset(0 100% 0 0);opacity:.8}to{clip-path:inset(0);opacity:0}}
.testimonial-text{font-size:clamp(28px,4vw,52px);line-height:1.1;letter-spacing:-.04em}
.testimonial-credit{display:flex;align-items:center;gap:12px;font:12px GeistMono,monospace;text-transform:uppercase}
.testimonial-card small{display:block;color:#a3a3a3}
.testimonial-avatar{display:grid;place-items:center;width:44px;height:44px;border:1px solid #666;border-radius:50%;background:repeating-linear-gradient(#333 0 1px,#222 1px 3px)}
@media(max-width:600px){.testimonials-track{--card-width:84vw;gap:10px}.testimonials-heading{align-items:start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.testimonial-card.is-entering::before{animation:none;opacity:0}}

/* Shared spacing between the metrics and process sections. */
#numeros:has(+ #processo){padding-bottom:0}
#numeros + #processo{padding-top:56px}
@media (min-width:1024px){
  #numeros + #processo, #numeros + #processo > .relative{padding-top:0}
  #numeros + #processo .sticky{align-items:flex-start;padding-top:88px}
}

/* The footer breathes before the next pass through the hero. */
.hero-loop-gap{height:clamp(96px,12vw,176px);background:#151515}

html.has-hero-loop{scrollbar-width:none;overscroll-behavior-y:none}
html.has-hero-loop::-webkit-scrollbar{display:none}
.hero-glass-defs{position:absolute;pointer-events:none}

#hero-continuation > .grid-container{
  opacity:var(--hero-entry-opacity,0);
  transform:translateY(var(--hero-entry-offset,56px));
}
#hero-continuation .ascii-host{
  mask-image:linear-gradient(to bottom,#000 0 var(--hero-entry-edge,-20%),transparent calc(var(--hero-entry-edge,-20%) + 24%));
}

/* digitação dos depoimentos */
.testimonial-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.testimonial-rest{visibility:hidden}
.testimonial-card.is-typing .testimonial-typed::after,.testimonial-card.is-typed .testimonial-typed::after{content:"";position:absolute;width:.055em;height:.86em;margin:.13em 0 0 .05em;background:var(--color-brand)}
.testimonial-card.is-typed .testimonial-typed::after{animation:testimonial-caret 1.06s steps(1) 4 forwards}
@keyframes testimonial-caret{0%{opacity:1}50%,100%{opacity:0}}
[data-theme=light] .section-label,[data-theme=light] .text-brand{color:#00788f}

/* vidro da transição: tela inteira no computador, só o retrato no celular */
html.glass-on #hero-continuation .ascii-host{filter:url(#hero-glass-filter)}
@media(min-width:1024px){
  html.glass-on #hero-continuation,html.glass-on #site-footer{filter:url(#hero-glass-filter)}
  html.glass-on #hero-continuation .ascii-host{filter:none}
}
html.glass-on,html.glass-on body{background:#121212}

/* borboleta voando no hero */
.borboleta-voo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
#hero-continuation .borboleta-voo{opacity:var(--hero-entry-opacity,0)}

/* Projetos em destaque como a referência: miniaturas de 128x72 e imagem grande até a borda direita da tela */
@media(min-width:1024px){
  #projetos .work-grid{grid-template-columns:minmax(260px,1fr) minmax(0,2.9fr)}
  #projetos .work-gallery{margin-right:calc(-1 * var(--site-grid-margin,32px))}
  #projetos .work-sidebar nav{gap:8px}
  #projetos .work-sidebar nav button>div{width:128px!important}
  #projetos .work-gallery .case-caption{padding-right:var(--site-grid-margin,32px)}
}

/* Logotipo oficial pequeno no rodapé */
.footer-logo-small{width:30px;height:30px;object-fit:contain;filter:brightness(0) invert(1);opacity:.8;margin-bottom:10px;transition:opacity .25s ease,transform .25s ease,filter .25s ease;cursor:pointer;pointer-events:auto}
.footer-logo-small:hover{opacity:1;transform:scale(1.15);filter:brightness(0) saturate(100%) invert(69%) sepia(87%) saturate(1914%) hue-rotate(156deg) brightness(103%) contrast(105%)}

/* ========================================================
   CORREÇÃO 1: ROLAGEM DESTRAVADA 100% GARANTIDA
   Sobrescreve o 'height: 100%' herdado de reference.css que
   congelava a altura do documento na altura da janela e impedia
   qualquer rolagem da página.
   ======================================================== */
html {
  height: auto !important;
  min-height: 100% !important;
}
body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}
html:not(.menu-open), body:not(.menu-open) {
  overflow-x: clip;
}
html:not(.carregando):not(.menu-open) {
  overflow-y: auto !important;
}

/* ========================================================
   CORREÇÃO 2: LOGOTIPO NO SUPERIOR ESQUERDO (Identidade ESCOM STUDIO)
   Exibição sólida, legível, condensada e com peso no header,
   evitando que 'STUDIO' fique cortado.
   ======================================================== */
.wordmark {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 7px !important;
  width: auto !important;
  font-family: aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  line-height: 1 !important;
  text-decoration: none !important;
  color: var(--color-foreground, #eee) !important;
  letter-spacing: -0.05em !important;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}
.wordmark:hover {
  opacity: 0.9;
  transform: scale(1.02);
}
.wordmark span {
  transform: none !important;
  height: auto !important;
  flex-shrink: 0 !important;
  transition: none !important;
}
.wordmark span:first-child {
  font-size: clamp(22px, 2.2vw, 28px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.06em !important;
  text-transform: uppercase !important;
  color: var(--color-foreground, #eee) !important;
}
.wordmark span:last-child {
  font-size: clamp(11px, 1.1vw, 13px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  opacity: 0.8 !important;
  color: var(--color-foreground, #eee) !important;
  position: relative;
  top: -2px;
}

/* ========================================================
   CORREÇÃO 3: DISTRIBUIÇÃO DOS TEXTOS DO HERO (Referência Good Studio)
   H1 imponente em 2 linhas harmônicas, parágrafo contido e botões com respiro.
   ======================================================== */
@media(min-width: 1024px) {
  #inicio .grid-span-12.lg\:grid-span-7 {
    width: 100% !important;
    max-width: 62vw !important;
  }
  #inicio .grid-span-12.lg\:grid-span-8 {
    width: 100% !important;
    max-width: none !important;
    grid-column: span 12 / span 12 !important;
  }
  :is(#inicio, #hero-continuation) .hero-title {
    font-size: clamp(56px, 5.8vw, 92px) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.045em !important;
    font-weight: 400 !important;
    max-width: 840px !important;
    width: 100% !important;
    margin-bottom: 24px !important;
  }
  #inicio p.max-w-xl {
    font-size: 17px !important;
    line-height: 1.55 !important;
    max-width: 520px !important;
    color: #a1a1aa !important;
    margin-bottom: 32px !important;
  }
  #inicio .hero-cta {
    margin-right: 8px;
  }
  #inicio .hero-secondary {
    font-size: 15px !important;
    color: #eee !important;
    margin-left: 12px;
  }
  .hero-services {
    font-size: 12px !important;
    letter-spacing: 0.14em !important;
    color: #71717a !important;
    font-family: geist-mono, ui-monospace, monospace !important;
  }
}

/* Logotipo oficial Monograma SVG no header */
.header-bar .wordmark {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  color: #ffffff !important;
  height: 38px !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
}
.header-bar .wordmark:hover {
  transform: scale(1.03) !important;
}
.header-bar .wordmark .header-logo-monogram {
  width: 32px !important;
  height: 32px !important;
  display: block !important;
  fill: currentColor !important;
  flex-shrink: 0 !important;
  transition: color 0.25s ease, transform 0.25s ease !important;
}
.header-bar .wordmark:hover .header-logo-monogram {
  color: #00d1ff !important;
}
.header-bar .wordmark .header-logo-text {
  font-family: aktiv-grotesk, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  color: inherit !important;
  opacity: 0.88 !important;
}
#site-header[data-theme="light"] .wordmark,
#site-header[data-theme="light"].scrolled .wordmark {
  color: #0a0a0a !important;
}
#site-header .wordmark,
#site-header.scrolled .wordmark,
#site-header[data-theme="dark"] .wordmark,
#site-header[data-theme="dark"].scrolled .wordmark {
  color: #ffffff !important;
}
#site-header .header-logo-monogram,
#site-header.scrolled .header-logo-monogram {
  color: #00d1ff !important;
  fill: currentColor !important;
}

/* ========================================================
   CORREÇÃO 4: THUMB DO PROJETO E ELEMENTOS FIXOS
   - No HERO: a thumb do projeto fica no canto inferior direito natural (bottom: 32px);
     o botão de contato e os idiomas ficam posicionados ACIMA dela (bottom: 160px e 248px).
   - FORA DO HERO (ao rolar a página): como a thumb desaparece, o botão de contato
     desce para a base natural (bottom: 28px) e os idiomas descem para (bottom: 114px).
   ======================================================== */
@media(min-width: 1024px) {
  #inicio > .grid-container > a.absolute,
  #hero-continuation > .grid-container > a.absolute {
    right: 32px !important;
    bottom: 32px !important;
    left: auto !important;
    z-index: 20 !important;
    display: flex !important;
  }

  /* Posição padrão quando FORA do Hero (ao rolar a página) */
  #escom-fixo {
    right: 28px !important;
    bottom: 28px !important;
    transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, transform 0.35s ease !important;
  }
  body.fora-do-hero #escom-fixo,
  html.fora-do-hero #escom-fixo {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    visibility: visible !important;
    display: flex !important;
  }
  .ef-idiomas {
    right: 28px !important;
    bottom: 28px !important;
    width: 28px !important;
    gap: 6px !important;
    transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s, transform 0.25s !important;
  }
  body.fora-do-hero .ef-idiomas,
  html.fora-do-hero .ef-idiomas {
    bottom: 104px !important;
  }

  /* NO HERO: Oculta COMPLETAMENTE o botão Fale Conosco (display: none e opacity: 0) */
  body.in-hero #escom-fixo,
  html.in-hero #escom-fixo,
  body:not(.fora-do-hero) #escom-fixo,
  html:not(.fora-do-hero) #escom-fixo {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(24px) scale(0.92) !important;
    visibility: hidden !important;
    display: none !important;
  }
  body.in-hero .ef-idiomas,
  html.in-hero .ef-idiomas,
  body:not(.fora-do-hero) .ef-idiomas,
  html:not(.fora-do-hero) .ef-idiomas {
    bottom: 28px !important;
  }

  /* Tipografia dos botões de idioma: ultra clean, fonte menor (7.5px), mais fina (200) e discreta */
  .ef-idiomas button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, monospace !important;
    font-size: 7.5px !important;
    font-weight: 200 !important;
    line-height: 1 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    padding: 2px 2px !important;
    opacity: 0.28 !important;
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease !important;
  }
  .ef-idiomas button:hover {
    opacity: 0.85 !important;
    transform: rotate(180deg) scale(1.08) !important;
    color: #00e5ff !important;
  }
  .ef-idiomas button[aria-pressed=true] {
    opacity: 0.95 !important;
    font-weight: 400 !important;
    color: #ffffff !important;
  }
}

/* Regra global (todas as telas): Botão Fale Conosco NUNCA aparece no Hero */
body.in-hero #escom-fixo,
html.in-hero #escom-fixo,
body:not(.fora-do-hero) #escom-fixo,
html:not(.fora-do-hero) #escom-fixo {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(24px) scale(0.92) !important;
  visibility: hidden !important;
  display: none !important;
}


/* ========================================================
   SECAO CONSCIENTIZACAO DIGITAL: #presenca-digital
   ======================================================== */
.presenca-section {
  background: #07090e !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
  overflow: hidden !important;
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}
.presenca-section::before {
  content: '' !important;
  position: absolute !important;
  top: -120px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 900px !important;
  height: 350px !important;
  background: radial-gradient(ellipse, rgba(0, 209, 255, 0.12) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

/* HEADER DA SEÇÃO */
.presenca-header {
  margin-bottom: 56px !important;
}
.presenca-header .mono-badge {
  font-family: geist-mono, ui-monospace, monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  color: #00d1ff !important;
  display: inline-block !important;
  margin-bottom: 16px !important;
}
.presenca-header h2 {
  font-size: clamp(28px, 3.2vw, 44px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  color: #ffffff !important;
  margin-bottom: 20px !important;
  max-width: 960px !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#presenca-digital h2 .reveal-mask > span,
#presenca-digital h2 .reveal-mask {
  opacity: 1 !important;
  visibility: visible !important;
}
.presenca-header p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #94a3b8 !important;
  max-width: 740px !important;
  margin: 0 !important;
}

/* GRID EM 3 COLUNAS */
.presenca-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  width: 100% !important;
}
@media (min-width: 768px) {
  .presenca-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }
}
@media (min-width: 1024px) {
  .presenca-grid {
    gap: 32px !important;
  }
}

/* CARDS EM COLUNAS */
.presenca-card {
  background: rgba(13, 17, 24, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  padding: 36px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 28px !important;
  min-height: 340px !important;
  height: 100% !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease !important;
  backdrop-filter: blur(16px) !important;
  position: relative !important;
  overflow: hidden !important;
}
.presenca-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(0, 209, 255, 0.7), transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.35s ease !important;
}
.presenca-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(0, 209, 255, 0.35) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 209, 255, 0.12) !important;
}
.presenca-card:hover::before {
  opacity: 1 !important;
}

/* Topo do Card */
.presenca-card .card-topo {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}
.presenca-card .card-num-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.presenca-card .card-badge {
  font-family: geist-mono, ui-monospace, monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #00d1ff !important;
  letter-spacing: 0.15em !important;
}
.presenca-card .card-status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #00d1ff !important;
  box-shadow: 0 0 8px #00d1ff !important;
  display: inline-block !important;
}
.presenca-card .card-icon {
  opacity: 0.8 !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}
.presenca-card:hover .card-icon {
  opacity: 1 !important;
  transform: scale(1.08) !important;
}

/* Corpo do Card */
.presenca-card .card-corpo {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  flex: 1 !important;
}
.presenca-card .card-title {
  font-size: 21px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  margin: 0 !important;
}
.presenca-card .card-desc {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: #94a3b8 !important;
  margin: 0 !important;
}

/* Rodapé do Card */
.presenca-card .card-rodape {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.presenca-card .card-tag {
  font-family: geist-mono, ui-monospace, monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  color: #00d1ff !important;
  text-transform: uppercase !important;
}
.presenca-card .card-metric {
  font-family: geist-mono, ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: #64748b !important;
}

/* Banner CTA Inferior */
.presenca-cta-banner {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: 40px 36px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(0, 209, 255, 0.08) 0%, rgba(13, 17, 24, 0.95) 100%) !important;
  border: 1px solid rgba(0, 209, 255, 0.22) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  margin-top: 64px !important;
}
@media (min-width: 900px) {
  .presenca-cta-banner {
    flex-direction: row !important;
    align-items: center !important;
  }
  .presenca-cta-banner > div {
    max-width: 68% !important;
  }
}


/* ========================================================
   SEÇÃO CARRO 3D BLUEPRINT & HUD MICROGRAPHICS (ESTILO OUTGRID V2)
   Flutuando livre no fundo escuro da seção, sem moldura retangular.
   ======================================================== */
.car3d-stage {
  position: relative !important;
  width: 100% !important;
  height: clamp(460px, 72svh, 680px) !important;
  max-height: 680px !important;
  margin-top: -32px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}
.car3d-stage canvas[data-car-canvas] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  cursor: grab !important;
}
.car3d-stage canvas[data-car-canvas]:active {
  cursor: grabbing !important;
}
.car3d-stage > svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 10 !important;
}
.car3d-stage [data-car-dots] {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 20 !important;
}
.bp-corner {
  display: none !important;
}

/* ========================================================
   THUMBNAILS CLEAN DE PROJETOS (REFERÊNCIA TRAVELS / AWWWARDS)
   Miniaturas compactas, discretas, com indicador de status
   ======================================================== */
#projetos .work-sidebar nav button > div {
  width: 84px !important;
}
#projetos .case-nav-clean {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: flex-start !important;
}
#projetos .case-thumb-btn {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  cursor: pointer !important;
  outline: none !important;
}
#projetos .case-thumb-box {
  width: 84px !important;
  aspect-ratio: 16/10 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: #0a0d12 !important;
  opacity: 0.35 !important;
  transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important;
}
#projetos .case-thumb-btn:hover .case-thumb-box {
  opacity: 0.8 !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-1px) !important;
}
#projetos .case-thumb-btn[aria-current="true"] .case-thumb-box {
  opacity: 1 !important;
  border-color: rgba(0, 209, 255, 0.7) !important;
  box-shadow: 0 4px 18px rgba(0, 209, 255, 0.25) !important;
}
#projetos nav button::after,
#projetos nav button[aria-current="true"]::after,
#projetos .case-thumb-btn::after,
#projetos .case-thumb-btn[aria-current="true"]::after {
  display: none !important;
  content: none !important;
}
#projetos .case-thumb-indicator {
  width: 8px !important;
  height: 8px !important;
  border-radius: 1px !important;
  background: #00d1ff !important;
  box-shadow: 0 0 10px rgba(0, 209, 255, 0.9) !important;
  display: none !important;
  flex-shrink: 0 !important;
}
#projetos .case-thumb-btn[aria-current="true"] .case-thumb-indicator {
  display: block !important;
}

/* ========================================================
   CARRO 3D BLUEPRINT & MICROGRAPHICS (EXATO OUTGRID V2)
   ======================================================== */
.bp-leader {
  stroke: #00d1ff;
  stroke-width: 1px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.bp-leader.is-on {
  opacity: 0.85;
}
.car-dot {
  opacity: 0;
  pointer-events: none;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  transition: opacity 0.4s ease;
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.car-dot.is-ready {
  opacity: 1;
  pointer-events: auto;
}
.car-dot.is-hidden {
  opacity: 0.22;
}
.car-dot span {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 1px #00d1ff, 0 0 rgba(0, 209, 255, 0.8);
  background: #ffffff;
  border-radius: 50%;
  animation: 1.6s infinite dot-pulse;
  display: block;
}
.car-dot.is-active span {
  background: #00d1ff;
  animation: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 12px #00d1ff;
}
@keyframes dot-pulse {
  0% {
    box-shadow: 0 0 0 1px #00d1ff, 0 0 rgba(0, 209, 255, 0.85);
  }
  100% {
    box-shadow: 0 0 0 1px #00d1ff, 0 0 0 12px rgba(0, 209, 255, 0);
  }
}
.mg {
  z-index: 30;
  border: 1px solid rgba(0, 209, 255, 0.45);
  width: 256px;
  color: #f4f6f9;
  font-family: geist-mono, ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(8, 11, 18, 0.94);
  backdrop-filter: blur(12px);
  padding: 12px 14px 14px;
  font-size: 10px;
  position: absolute;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
}
.mg[hidden] {
  display: none !important;
}
.mg-head {
  color: #00d1ff;
  justify-content: space-between;
  display: flex;
  align-items: center;
}
.mg-head button {
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  padding: 0;
}
.mg-head button:hover {
  color: #ffffff;
}
.mg-title {
  letter-spacing: 0;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  font-family: aktiv-grotesk, sans-serif;
  text-transform: none;
}
.mg-rows {
  margin-top: 8px;
}
.mg-rows div {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  justify-content: space-between;
  gap: 1rem;
  padding: 5px 0;
  display: flex;
}
.mg-rows dt {
  color: rgba(255, 255, 255, 0.55);
}
.mg-rows dd {
  text-align: right;
  color: #ffffff;
  margin: 0;
}
@media (max-width: 767px) {
  .mg {
    width: auto;
    bottom: 1.125rem;
    right: 1.125rem;
    top: auto !important;
    left: 1.125rem !important;
  }
}