/* ============================= */
/* NAVBAR */
/* ============================= */

.navbar{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  padding:12px 0;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  z-index: 1000;
}

.navbar.scrolled{
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.nav-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-family: var(--font-title);

  transform: translateX(-8px);
}

.brand-mark{
  width:12px;
  height:12px;
  border-radius:999px;
  background: var(--accent);
  box-shadow:0 0 0 6px rgba(207,174,120,.18);
}

.brand-name{
  display:flex;
  align-items:center;
  margin-top:-50px;
}

.brand-name img{
  height:180px;
  width:auto;
  margin-left:-50px;
  display:block;
  
}

/* ============================= */
/* PAGE */
/* ============================= */

.page{
  padding-top:0;
  opacity:1;
  transform:translateY(0);
  transition:opacity .5s ease, transform .5s ease;
}

.page.exit{
  opacity:0;
  transform:translateY(-40px);
}

/* ============================= */
/* MENU TRIGGER */
/* ============================= */

.menu-trigger{
  display:flex;
  align-items:center;
  gap:10px;
  background:none;
  border:none;
  cursor:pointer;
  font-weight:600;
  color:#000;
  margin-top:30px;
}

.menu-trigger,
.menu-trigger:hover,
.menu-trigger:focus,
.menu-trigger:active{
  background:transparent !important;
  box-shadow:none !important;
}

/* ============================= */
/* HAMBURGER (INTACTO) */
/* ============================= */

.hamburger{
  width:22px;
  height:16px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:height .25s cubic-bezier(.22,1,.36,1);
  background:transparent;
}

.hamburger span{
  display:block;
  width:100%;
  height:2px;
  background:#000;
  border-radius:2px;
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}

.menu-trigger:hover .hamburger{
  height:20px;
}

/* ============================= */
/* MENU OVERLAY (RESTAURADO FUNCIONAL) */
/* ============================= */

.menu-overlay{
  position:fixed;
  inset:0;
  background:#0f1e3d;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(100%);
  transition:transform .7s cubic-bezier(.77,0,.175,1);
  z-index:3000;
  overflow:hidden;
}

.menu-overlay.active{
  transform:translateY(0);
}

.menu-overlay.exit{
  transform:translateY(-100%);
}

.menu-overlay.reset{
  transition:none !important;
  transform:translateY(100%) !important;
}

.menu-bg-preview{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}

.menu-fullscreen{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:30px;
  font-size:44px;
  font-family: var(--font-title);
  transform:translateY(40px);
  opacity:0;
  transition:all .6s ease;
}

.menu-overlay.active .menu-fullscreen{
  transform:translateY(0);
  opacity:1;
  transition-delay:.3s;
}

.menu-fullscreen a{
  color:#fff;
  transition:opacity .3s ease;
}

.menu-fullscreen:hover a{
  opacity:.3;
}

.menu-fullscreen a:hover{
  opacity:1 !important;
}

/* ============================= */
/* HERO (REFERÊNCIA AJUSTADA) */
/* ============================= */

.hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:#f7f7f7;
}

/* removemos overlay antigo */
.hero-bg{ display:none; }
.hero-overlay{ display:none; }

/* TRIBE GIGANTE VISÍVEL */
.hero-watermark{
  position:absolute;
  top:-20%;
  left:0;

  font-family: var(--font-title);
  font-size:46vw;
  font-weight:700;
  letter-spacing:-1.8vw;

  color:#ffffff;

  opacity:.70; /* mais visível */
   /* dá contraste suave automático */

  z-index:1;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}

.hero-grid{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.hero-title{
  font-family: var(--font-title);
  font-size:34px;
  line-height:1.05;
  letter-spacing:-1px;
  margin-bottom:14px;
}

.hero-subtitle{
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
  margin-bottom:18px;
  max-width:52ch;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.hero-meta{
  display:flex;
  gap:14px;
  margin-top:18px;
  flex-wrap:wrap;
}

.meta-item{
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.7);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.meta-label{
  display:block;
  font-size:12px;
  color:rgba(0,0,0,.55);
}

.meta-value{
  display:block;
  font-weight:600;
  font-size:13px;
  margin-top:3px;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (min-width:768px){
  .hero-title{ font-size:44px; }
}

@media (min-width:1024px){

  .hero-grid{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:30px;
  }

  .hero-copy{ max-width:560px; }

  .hero-title{ font-size:58px; }

  .hero-watermark{
    font-size:37vw;
    top:-27%;
  }

}

.hero-workers{
  position:absolute;
  right:-80px;
  bottom:0;
 

  width:100%;
  max-width:950px;

  z-index:3;
}

.hero-workers img{
  width:100%;
  height:auto;
  display:block;
}

/* ============================= */
/* MENU HEADER */
/* ============================= */

.menu-header{
  position:absolute;
  top:28px;
  left:40px;
  right:40px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  z-index:5;
}

.menu-logo img{
  height:180px;
  width:auto;
  filter:brightness(0) invert(1);
  margin-top:-70px;
  margin-left:-50px;
}

/* CLOSE */

.menu-close-btn{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:-60px;

  background:none;
  border:none;
  color:#fff;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;

  cursor:pointer;
}

.menu-close-icon{
  font-size:25px;
  margin-top:-3px;
}

/* MENU LABEL */

.menu-label{
  position:absolute;
  top:120px;
  left:50%;
  transform:translateX(-50%);

  font-size:16px;
  letter-spacing:.35em;
  color:rgba(255,255,255,.5);
}

/* AJUSTE DOS LINKS */

.menu-fullscreen{
  margin-top:10px;
}

/* =========================================================
   MENU - HOVER FADE + CINEMATIC REVEAL (FORÇADO)
   Cole no FINAL do layout.css
========================================================= */

/* garante que cada link seja "bloco" para o hover ficar certinho */
#menuOverlay .menu-fullscreen a{
  display:block;
  will-change: transform, opacity;
}

/* ---------- HOVER FADE (igual referência) ---------- */
#menuOverlay.active .menu-fullscreen:hover a{
  opacity:.28 !important;
  transition: opacity .35s ease !important;
}

#menuOverlay.active .menu-fullscreen a:hover{
  opacity:1 !important;
}

/* ---------- CINEMATIC REVEAL (com animation, não transition) ---------- */
/* estado base (antes de abrir) */
#menuOverlay .menu-fullscreen a{
  opacity:0;
  transform: translateY(26px);
}

/* quando abre: anima cada item */
#menuOverlay.active .menu-fullscreen a{
  animation: menuItemReveal .7s cubic-bezier(.22,1,.36,1) both;
}

/* delays em cascata */
#menuOverlay.active .menu-fullscreen a:nth-child(1){ animation-delay: .18s; }
#menuOverlay.active .menu-fullscreen a:nth-child(2){ animation-delay: .28s; }
#menuOverlay.active .menu-fullscreen a:nth-child(3){ animation-delay: .38s; }
#menuOverlay.active .menu-fullscreen a:nth-child(4){ animation-delay: .48s; }
#menuOverlay.active .menu-fullscreen a:nth-child(5){ animation-delay: .58s; }
#menuOverlay.active .menu-fullscreen a:nth-child(6){ animation-delay: .68s; }

@keyframes menuItemReveal{
  from{ opacity:0; transform: translateY(26px); }
  to  { opacity:1; transform: translateY(0); }
}

/* ============================= */
/* CLOSE BUTTON HOVER EFFECT */
/* ============================= */

.menu-close-btn{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:opacity .3s ease;
}

/* efeito hover no texto */
.menu-close-btn:hover{
  opacity:.7;
}

/* ============================= */
/* ROTATION X */
/* ============================= */

.menu-close-icon{
  display:inline-block;
  font-size:20px;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}

/* gira ao passar mouse */
.menu-close-btn:hover .menu-close-icon{
  transform:rotate(180deg);
}

/* volta ao sair */
.menu-close-btn .menu-close-icon{
  transform:rotate(0deg);
}

/* ==================================================
   PREMIUM SILVER SCROLLBAR
   estilo agência / estúdio premium
================================================== */

/* Chrome / Edge / Safari */

::-webkit-scrollbar{
  width:12px;
}

::-webkit-scrollbar-track{
  background:#f1f1f1;
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(
    180deg,
    #e5e5e5 0%,
    #cfcfcf 40%,
    #b8b8b8 60%,
    #dcdcdc 100%
  );
  border-radius:20px;
  border:2px solid #f1f1f1;
  box-shadow:
    inset 0 0 6px rgba(255,255,255,.6),
    inset 0 0 3px rgba(0,0,0,.1);
  transition:all .35s ease;
}

/* hover metálico */

::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(
    180deg,
    #f2f2f2 0%,
    #c8c8c8 50%,
    #a8a8a8 100%
  );
}

/* Firefox */

*{
  scrollbar-width:thin;
  scrollbar-color:#b5b5b5 #f1f1f1;
}


/* ================================= */
/* SERVICES PREVIEW */
/* ================================= */

.services-preview{
padding:120px 0;
background:#f7f7f7;
}

.services-title{
text-align:center;
font-size:34px;
margin-bottom:60px;
font-family:var(--font-title);
}


/* GRID */

.services-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:26px;
}


/* CARD */

.service-card{
position:relative;
overflow:hidden;
border-radius:14px;
display:block;
}


.service-card img{
width:100%;
height:320px;
object-fit:cover;
display:block;

transition:transform .6s cubic-bezier(.22,1,.36,1);
}


/* OVERLAY */

.service-overlay{
position:absolute;
left:0;
bottom:0;
width:100%;

padding:30px;

background:linear-gradient(
180deg,
transparent,
rgba(0,0,0,.65)
);

color:#fff;

transition:all .4s ease;
}


/* TITULO */

.service-overlay h3{
font-size:24px;
margin-bottom:6px;
transform:translateY(10px);
opacity:.9;

transition:all .4s ease;
}


/* TEXTO */

.service-overlay p{
font-size:14px;
opacity:.85;

transform:translateY(14px);
transition:all .4s ease;
}


/* HOVER */

.service-card:hover img{
transform:scale(1.05);
}


.service-card:hover .service-overlay{

background:linear-gradient(
180deg,
rgba(12,32,74,.55),
rgba(12,32,74,.85)
);

}


/* ANIMAÇÃO TEXTO */

.service-card:hover h3{
transform:translateY(0);
opacity:1;
}

.service-card:hover p{
transform:translateY(0);
opacity:1;
}


/* BOTÃO */

.services-more{
margin-top:40px;
text-align:center;
}

@media (max-width:900px){

.services-grid{
grid-template-columns:1fr;
}

.service-card img{
height:260px;
}

}
/* ================================= */
/* CTA SECTION */
/* ================================= */

.cta-section{
padding:160px 0 140px;
text-align:center;
background:#f7f7f7;
}

.cta-label{
font-size:12px;
letter-spacing:.35em;
color:#999;
margin-bottom:16px;
text-transform:uppercase;
}

.cta-big{
font-size:72px;
font-weight:700;
color:#0a0a0a;

display:inline-flex;
align-items:center;
gap:16px;

position:relative;

transition:all .35s ease;
}

/* underline animation */

.cta-big::after{

content:"";
position:absolute;
left:0;
bottom:-10px;

width:0;
height:2px;

background:#000;

transition:width .4s cubic-bezier(.22,1,.36,1);

}

.cta-big:hover::after{
width:100%;
}

.cta-arrow{
font-size:60px;
transition:transform .35s ease;
}

.cta-big:hover .cta-arrow{
transform:translateX(6px);
}


/* ================================= */
/* HOW WE THINK */
/* ================================= */

.thinking-section{
padding:120px 0;
background:#f7f7f7;
}

.thinking-title{
text-align:center;
font-size:42px;
margin-bottom:10px;
}

.thinking-subtitle{
text-align:center;
color:#666;
margin-bottom:60px;
}


/* GRID */

.thinking-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}


/* CARD */

.thinking-card{

background:#fff;
border-radius:12px;
overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,.05);

transition:transform .4s ease, box-shadow .4s ease;

}


.thinking-card img{

width:100%;
height:200px;
object-fit:cover;

transition:transform .5s ease;

}


.thinking-content{

padding:28px;

}


.thinking-content h3{

font-size:20px;
margin-bottom:6px;

}


.thinking-content p{

color:#666;
font-size:14px;

}


.thinking-arrow{

display:block;
margin-top:20px;
font-size:20px;

transition:transform .3s ease;

}


/* HOVER */

.thinking-card:hover{

transform:translateY(-6px);

box-shadow:0 18px 40px rgba(0,0,0,.08);

}


.thinking-card:hover img{

transform:scale(1.05);

}


.thinking-card:hover .thinking-arrow{

transform:translateX(6px);

}

/* ============================= */
/* GALLERY */
/* ============================= */

.gallery-section{

padding:120px 0 60px;

}

.gallery-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.gallery-grid img{

width:100%;
height:260px;
object-fit:cover;

border-radius:8px;

transition:transform .4s ease;

}

.gallery-grid img:hover{

transform:scale(1.03);

}



/* ============================= */
/* CTA READY */
/* ============================= */

.cta-final{

padding:60px 0 80px;
text-align:center;

}

.cta-ready{

font-size:48px;
font-weight:700;

position:relative;

display:inline-flex;
align-items:center;
gap:10px;

color:#111;

}

.cta-ready::after{

content:"";
position:absolute;

bottom:-8px;
left:0;

width:0;
height:2px;

background:#000;

transition:.35s;

}

.cta-ready:hover::after{

width:100%;

}



/* ============================= */
/* FOOTER */
/* ============================= */

.footer-main{

border-top:1px solid #e5e5e5;

padding:70px 0;

}

.footer-grid{

display:grid;
grid-template-columns:1.2fr 1fr 1fr;

gap:60px;

}

.footer-col h4{

font-size:20px;
margin-bottom:16px;

}

.footer-col p{

color:#666;
line-height:1.6;

}

.footer-col ul{

list-style:none;
padding:0;

}

.footer-col li{

margin-bottom:12px;

}

.footer-col a{

color:#111;
text-decoration:none;

transition:.3s;

}

.footer-col a:hover{

text-decoration:underline;

}



/* ============================= */
/* SUBFOOTER */
/* ============================= */

.subfooter{

background:#f2f2f2;



font-size:14px;

}



.footer-logo{

height:80px !important;
width:100%;
margin-left:-30px;


}

.sub-left{

display:flex;
align-items:center;
gap:0px;

}

.sub-right{

color:#444;

}

/* SUBFOOTER */

.subfooter{

background:#f2f2f2;
padding:30px 0;
border-top:1px solid #e5e5e5;

}

.subfooter-grid{

display:grid;
grid-template-columns:1fr 1fr 1fr;

align-items:center;

}

/* BLOCO ESQUERDA */

.sub-left{

grid-column:1;

display:flex;
align-items:center;
gap:16px;

}

.footer-logo{

height:32px;
width:auto;
display:block;

}

.sub-left p{

margin:0;
font-size:14px;
color:#444;

}

/* BLOCO DIREITA */

.sub-right{

grid-column:3;
justify-self:end;

font-size:14px;
color:#444;

}

/* ================================= */
/* REVEAL ANIMATION SYSTEM */
/* ================================= */

.reveal{

opacity:0;
transform:translateY(40px);

animation:revealFade 1.1s cubic-bezier(.16,1,.3,1) forwards;

}

/* delays */

.delay-1{ animation-delay:.1s; }
.delay-2{ animation-delay:.25s; }
.delay-3{ animation-delay:.4s; }
.delay-4{ animation-delay:.55s; }
.delay-5{ animation-delay:.7s; }

@keyframes revealFade{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}


/* ================================= */
/* SECTION SOFT REVEAL */
/* ================================= */

.services-preview,
.cta-section,
.thinking-section,
.gallery-section,
.cta-final{

opacity:0;
transform:translateY(60px);

animation:sectionReveal 1.2s cubic-bezier(.16,1,.3,1) forwards;

}

.services-preview{ animation-delay:.2s; }
.cta-section{ animation-delay:.35s; }
.thinking-section{ animation-delay:.45s; }
.gallery-section{ animation-delay:.55s; }
.cta-final{ animation-delay:.65s; }

@keyframes sectionReveal{

from{
opacity:0;
transform:translateY(60px);
}

to{
opacity:1;
transform:translateY(0);
}

}


/* ================================= */
/* CARD IMAGE PREMIUM REVEAL */
/* ================================= */

.service-card img,
.thinking-card img,
.gallery-grid img{

opacity:0;
transform:scale(.96);

animation:imageReveal 1.3s cubic-bezier(.16,1,.3,1) forwards;

}

@keyframes imageReveal{

from{
opacity:0;
transform:scale(.96);
}

to{
opacity:1;
transform:scale(1);
}

}

/* SCROLL REVEAL */

.reveal{

opacity:0;
transform:translateY(70px) scale(.98);

transition:
opacity 1.2s cubic-bezier(.16,1,.3,1),
transform 1.2s cubic-bezier(.16,1,.3,1);

}

.reveal.visible{

opacity:1;
transform:translateY(0) scale(1);

}

/* delays */

.delay-1{ transition-delay:.15s }
.delay-2{ transition-delay:.3s }
.delay-3{ transition-delay:.45s }
.delay-4{ transition-delay:.6s }



/* ===== SCROLL REVEAL ===== */

.reveal{
  opacity:0 !important;
  transform:translateY(70px) scale(.98) !important;

  transition:
    opacity 1.2s cubic-bezier(.16,1,.3,1),
    transform 1.2s cubic-bezier(.16,1,.3,1);
}

.reveal.visible{
  opacity:1 !important;
  transform:translateY(0) scale(1) !important;
}

/* delays suaves */
.delay-1{ transition-delay:.15s }
.delay-2{ transition-delay:.30s }
.delay-3{ transition-delay:.45s }
.delay-4{ transition-delay:.60s }


/* ============================== */
/* CINEMATIC SCROLL REVEAL */
/* ============================== */

.reveal{

opacity:0;
transform:translateY(80px) scale(.96);

transition:

opacity 1.3s cubic-bezier(.16,1,.3,1),
transform 1.3s cubic-bezier(.16,1,.3,1);

will-change:transform,opacity;

}

.reveal.visible{

opacity:1;
transform:translateY(0) scale(1);

}


/* CASCATA (stagger) */

.delay-1{transition-delay:.15s}
.delay-2{transition-delay:.3s}
.delay-3{transition-delay:.45s}
.delay-4{transition-delay:.6s}
.delay-5{transition-delay:.75s}


/* CINEMATIC REVEAL */

.reveal{
opacity:0;
transform:translateY(60px);
transition:
opacity 1.2s cubic-bezier(.16,1,.3,1),
transform 1.2s cubic-bezier(.16,1,.3,1);
}

.reveal.visible{
opacity:1;
transform:translateY(0);
}

/* STAGGER */

.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.24s}
.delay-3{transition-delay:.36s}
.delay-4{transition-delay:.48s}
.delay-5{transition-delay:.60s}


/* IMAGE MICRO ZOOM */

.reveal img{
transform:scale(1.06);
transition:
transform 1.4s cubic-bezier(.16,1,.3,1),
opacity 1.2s cubic-bezier(.16,1,.3,1);
}

.reveal.visible img{
transform:scale(1);
}


/* ================================= */
/* SCROLL CINEMATIC REVEAL */
/* ================================= */

[data-reveal] > *{
opacity:0;
transform:translateY(60px);
transition:
opacity 1.1s cubic-bezier(.16,1,.3,1),
transform 1.1s cubic-bezier(.16,1,.3,1);
}

/* cascata suave */

[data-reveal] > *:nth-child(1){transition-delay:.15s}
[data-reveal] > *:nth-child(2){transition-delay:.30s}
[data-reveal] > *:nth-child(3){transition-delay:.45s}
[data-reveal] > *:nth-child(4){transition-delay:.60s}
[data-reveal] > *:nth-child(5){transition-delay:.75s}
[data-reveal] > *:nth-child(6){transition-delay:.90s}

[data-reveal].visible > *{
opacity:1;
transform:translateY(0);
}

/* micro zoom nas imagens */

[data-reveal] > *{
opacity:0;
transform:translateY(80px);
transition:
opacity 1.6s cubic-bezier(.16,1,.3,1),
transform 1.6s cubic-bezier(.16,1,.3,1);
}

[data-reveal].visible img{
transform:scale(1);
}

/* ============================= */
/* PORTFOLIO HERO */
/* ============================= */

.portfolio-hero{

padding:180px 0 120px;
background:#f7f7f7;
text-align:center;

}

.portfolio-title{

font-size:64px;
font-family:var(--font-title);
letter-spacing:-2px;

}

.portfolio-subtitle{

margin-top:20px;
color:var(--muted);
font-size:18px;

}



/* ============================= */
/* PORTFOLIO GRID */
/* ============================= */

.portfolio-cards{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;

}



.portfolio-card{

position:relative;
overflow:hidden;
border-radius:6px;

}



.portfolio-card img{

width:100%;
height:520px;
object-fit:cover;

transition:transform 1.2s cubic-bezier(.16,1,.3,1);

}



.portfolio-overlay{

position:absolute;
inset:0;

display:flex;
flex-direction:column;
justify-content:flex-end;

padding:40px;

background:linear-gradient(
transparent,
rgba(0,0,0,.7)
);

color:#fff;

transition:background .6s ease;

}



.portfolio-overlay h3{

font-size:26px;
margin-bottom:6px;

}



.portfolio-overlay p{

opacity:.7;

}



.portfolio-arrow{

margin-top:12px;
display:inline-block;

opacity:0;
transform:translateY(10px);

transition:.4s;

}



/* ============================= */
/* HOVER ANIMATION */
/* ============================= */

.portfolio-card:hover img{

transform:scale(1.08);

}



.portfolio-card:hover .portfolio-arrow{

opacity:1;
transform:translateY(0);

}



/* ============================= */
/* CTA */
/* ============================= */

.portfolio-cta{

padding:140px 0;

}

@media (max-width:900px){

.portfolio-cards{

grid-template-columns:1fr;

}

.portfolio-card img{

height:420px;

}

.portfolio-title{

font-size:42px;

}

}

/* ============================= */
/* PORTFOLIO WATERMARK */
/* ============================= */

.portfolio-hero{
position:relative;
overflow:hidden;
}

.portfolio-watermark{

position:absolute;
top:-30%;
left:0;

font-family:var(--font-title);
font-size:30vw;
font-weight:700;

letter-spacing:-1.5vw;

color:#ffffff;
opacity:.55;

mix-blend-mode:overlay;

pointer-events:none;
user-select:none;

z-index:0;

}

/* ============================ */
/* SERVICE PAGE */
/* ============================ */

.service-hero{

position:relative;
padding:180px 0 120px;
background:#f7f7f7;
text-align:center;
overflow:hidden;

}

.service-watermark{

position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);

font-family:var(--font-title);
font-size:20vw;
font-weight:700;

letter-spacing:-1vw;

color:rgba(255,255,255,.18);

pointer-events:none;
user-select:none;

z-index:0;

}

.service-title{

font-size:64px;
font-family:var(--font-title);
letter-spacing:-2px;

position:relative;
z-index:2;

}

.service-subtitle{

margin-top:20px;
color:var(--muted);
font-size:18px;

position:relative;
z-index:2;

}



.service-image{

padding:100px 0;

}

.service-image-wrapper{

overflow:hidden;
border-radius:6px;

}

.service-image img{

width:100%;
height:620px;
object-fit:cover;

transition:transform 1.4s cubic-bezier(.16,1,.3,1);

}

.service-image-wrapper:hover img{

transform:scale(1.06);

}



.service-description-section{

padding:120px 0;
background:#fff;

}

.service-description{

max-width:720px;
margin:auto;

font-size:18px;
line-height:1.7;

color:#444;

}



.service-cta{

padding:140px 0;

}

.service-blocks{
padding:120px 0;
}

.service-block{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
margin-bottom:120px;
}

.service-image img{
width:100%;
border-radius:10px;
}

.service-content h3{
font-size:34px;
margin-bottom:20px;
}

.service-content ul{
padding-left:20px;
}

.service-content li{
margin-bottom:10px;
color:#666;
}

.service-content p{
margin-top:20px;
color:#666;
line-height:1.6;
}



@media(max-width:900px){

.service-block{
grid-template-columns:1fr;
gap:40px;
}

}


.service-watermark{
position:absolute;

top:10%;
left:10%;

transform:translate(-50%,-50%);

font-size:310px;
font-weight:700;
letter-spacing:10px;

color:#ffffff;

opacity:0.05;

pointer-events:none;
user-select:none;

z-index:0;
}

.service-hero .container{
position:relative;
z-index:2;
}

.service-image{
position:relative;
overflow:hidden;
}

.service-image img{
width:100%;
display:block;
}

.service-image-overlay{
position:absolute;
top:0;
right:0;
width:40%;
height:100%;

background:linear-gradient(
to right,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.1) 40%,
rgba(255,255,255,0.6) 70%,
rgba(255,255,255,1) 100%
);

pointer-events:none;
}


.about-premium{
padding:140px 0;
}

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:100px;
align-items:center;
}

.about-image{
position:relative;
overflow:hidden;
border-radius:8px;
}

.about-image img{
width:100%;
display:block;
}

.image-fade{
position:absolute;
top:0;
right:0;
width:40%;
height:100%;
background:linear-gradient(
to right,
rgba(255,255,255,0),
rgba(255,255,255,0.4)
);
}

.about-content h2{
font-size:38px;
margin-bottom:25px;
}

.about-content p{
margin-bottom:18px;
line-height:1.8;
color:#666;
}

.about-stats{
display:flex;
gap:50px;
margin-top:35px;
}

.stat h3{
font-size:34px;
margin-bottom:5px;
}

.stat p{
font-size:14px;
color:#888;
}



.contact-premium{
padding:140px 0;
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:100px;
align-items:start;
}

.contact-info h2{
font-size:36px;
margin-bottom:20px;
}

.contact-info p{
margin-bottom:18px;
color:#666;
line-height:1.8;
}

.contact-details p{
margin-bottom:20px;
}



.contact-form form{
display:flex;
flex-direction:column;
gap:20px;
}

.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
width:100%;
padding:14px;
border:1px solid #ddd;
font-size:15px;
border-radius:4px;
}

.contact-form textarea{
height:140px;
}

.btn-quote{
background:#000;
color:#fff;
padding:16px;
border:none;
font-size:16px;
cursor:pointer;
transition:.3s;
}

.btn-quote:hover{
opacity:.8;
}

.form-success{
background:#e8f7ee;
border:1px solid #b9e3c6;
padding:18px;
margin-bottom:40px;
color:#2a7a48;
}

.form-error{
background:#fdeaea;
border:1px solid #f1bcbc;
padding:18px;
margin-bottom:40px;
color:#8b2d2d;
}


/* ============================= */
/* INSTAGRAM GRID */
/* ============================= */

.insta-card{
position:relative;
overflow:hidden;
display:block;
border-radius:8px;
}

.insta-card img{
width:100%;
height:260px;
object-fit:cover;
display:block;

transition:transform .4s ease;
}

.insta-overlay{

position:absolute;
inset:0;

background:rgba(0,0,0,.55);

display:flex;
align-items:center;
justify-content:center;

opacity:0;

transition:opacity .3s ease;

}

.insta-like{

color:#fff;
font-size:18px;
font-weight:600;

}

.insta-card:hover img{
transform:scale(1.05);
}

.insta-card:hover .insta-overlay{
opacity:1;
}


/* ============================= */
/* INSTAGRAM FOLLOW BUTTON */
/* ============================= */

.insta-follow{
text-align:center;
margin-top:40px;
}

.btn-insta{

display:inline-block;

font-size:18px;
font-weight:600;

color:#111;

position:relative;

transition:.3s;

}

.btn-insta::after{

content:"";

position:absolute;
left:0;
bottom:-6px;

width:0;
height:2px;

background:#111;

transition:.4s cubic-bezier(.22,1,.36,1);

}

.btn-insta:hover::after{
width:100%;
}


/* ========================================
MOBILE FIXES
Ajustes completos versão mobile
======================================== */

@media (max-width:768px){

/* remove scroll horizontal */

html, body{
overflow-x:hidden;
max-width:100%;
}


/* container com respiro lateral */

.container{
padding-left:20px;
padding-right:20px;
}


/* header mobile */

.header{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 20px;
}


/* menu hamburger */

.menu-toggle,
.hamburger{
margin-right:10px;
}


/* logo tamanho mobile */

.logo img{
max-width:140px;
}


/* HERO LAYOUT */

.hero-grid{
grid-template-columns:1fr;
gap:30px;
}


/* ordem hero */

.hero-copy{
order:1;
}

.hero-workers{
order:2;
text-align:center;
}


/* imagem workers */

.hero-workers img{
max-width:280px;
margin:auto;
}


/* título hero */

.hero-title{
font-size:34px;
line-height:1.2;
}


/* subtitulo hero */

.hero-subtitle{
font-size:16px;
}


/* botões hero */

.hero-actions{
flex-direction:column;
gap:12px;
}

.hero-actions .btn{
width:100%;
text-align:center;
}


/* cards meta */

.hero-meta{
grid-template-columns:1fr;
gap:12px;
}

}


/* ========================================
GLOBAL SAFETY FIXES
======================================== */

/* imagens nunca quebram layout */

img{
max-width:100%;
height:auto;
display:block;
}


/* box model seguro */

*{
box-sizing:border-box;
}


/* =========================
HERO MOBILE CORREÇÃO
========================= */

@media (max-width:768px){

.hero-grid{
display:grid;
grid-template-columns:1.2fr 1fr;
align-items:end;
gap:10px;
}

/* texto principal */

.hero-title{
font-size:32px;
line-height:1.2;
}

/* subtítulo */

.hero-subtitle{
font-size:16px;
margin-top:10px;
}

/* trabalhadores */

.hero-workers{
display:flex;
align-items:flex-end;
justify-content:flex-end;
}

.hero-workers img{
max-width:220px;
height:auto;
}

/* botões abaixo */

.hero-actions{
grid-column:1 / -1;
display:flex;
flex-direction:column;
gap:10px;
margin-top:20px;
}

.hero-actions .btn{
width:100%;
padding:14px;
font-size:16px;
}

/* cards abaixo */

.hero-meta{
grid-column:1 / -1;
margin-top:15px;
}

}

/* =========================================
HERO MOBILE PREMIUM
========================================= */

@media (max-width:768px){

.hero-grid{
display:flex;
flex-direction:column;
gap:20px;
}

/* título */

.hero-title{
font-size:32px;
line-height:1.2;
margin-bottom:10px;
}

/* subtitulo */

.hero-subtitle{
font-size:16px;
color:#666;
max-width:100%;
}

/* trabalhadores destaque */

.hero-workers{
order:2;
display:flex;
justify-content:center;
margin-top:10px;
}

.hero-workers img{
width:100%;
max-width:340px;
height:auto;
}

/* botões abaixo da imagem */

.hero-actions{
order:3;
display:flex;
flex-direction:column;
gap:12px;
margin-top:10px;
}

.hero-actions .btn{
width:100%;
padding:16px;
font-size:16px;
border-radius:40px;
}

/* cards meta */

.hero-meta{
order:4;
display:grid;
grid-template-columns:1fr;
gap:12px;
margin-top:10px;
}

}

/* ========================================
HERO MOBILE LAYOUT FINAL
======================================== */

@media (max-width:768px){

/* remover cards no mobile */

.hero-meta{
display:none;
}


/* reorganizar hero */

.hero-grid{
display:flex;
flex-direction:column;
}


/* titulo */

.hero-title{
font-size:32px;
line-height:1.2;
margin-bottom:10px;
}


/* subtitulo */

.hero-subtitle{
font-size:16px;
color:#666;
}


/* trabalhadores */

.hero-workers{
order:2;
display:flex;
justify-content:flex-end;
margin-top:10px;
}

.hero-workers img{
width:100%;
max-width:320px;
height:320px;
}


/* botões */

.hero-actions{
order:3;
display:flex;
flex-direction:column;
gap:12px;
margin-top:15px;
}

.hero-actions .btn{
width:100%;
padding:16px;
font-size:16px;
border-radius:40px;
}

}

/* ========================================
HERO MOBILE — TRABALHADORES EM DESTAQUE
======================================== */

@media (max-width:768px){

/* reorganiza o hero */

.hero-grid{
display:flex;
flex-direction:column;
position:relative;
}


/* trabalhadores */

.hero-workers{
order:2;
position:relative;
display:flex;
justify-content:flex-end;
margin-top:10px;
margin-bottom:-40px;
}

/* imagem grande */

.hero-workers img{
width:150%;
max-width:none;
height:auto;
transform:translateX(20%);
}

/* botões ficam abaixo */

.hero-actions{
order:3;
display:flex;
flex-direction:column;
gap:12px;
margin-top:30px;
}


/* ========================================
HERO MOBILE AJUSTE FINAL
======================================== */

@media (max-width:768px){

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
align-items:end;
gap:10px;
}

/* texto */

.hero-copy{
grid-column:1;
}

/* imagem trabalhadores */

.hero-workers{
grid-column:2;
display:flex;
align-items:flex-end;
justify-content:flex-end;
}

.hero-workers img{
width:160%;
max-width:none;
height:auto;
transform:translateX(20%);
}

/* botões abaixo */

.hero-actions{
grid-column:1 / -1;
display:flex;
flex-direction:column;
gap:12px;
margin-top:20px;
}

.hero-actions .btn{
width:100%;
padding:16px;
border-radius:40px;
font-size:16px;
}

/* remover cards no mobile */

.hero-meta{
display:none;
}

}

/* =================================
HERO MOBILE CORREÇÃO FINAL
================================= */

@media (max-width:768px){

.hero-grid{
display:flex;
flex-direction:column;
}

/* título */

.hero-title{
font-size:32px;
line-height:1.2;
}

/* subtítulo */

.hero-subtitle{
font-size:16px;
color:#666;
margin-bottom:10px;
}

/* trabalhadores - fica entre texto e botões */

.hero-workers{
order:2;
display:flex;
justify-content:flex-end;
margin-top:10px;
margin-bottom:10px;
}

.hero-workers img{
width:120%;
max-width:none;
height:auto;
transform:translateX(20%);
}

/* botões abaixo */

.hero-actions{
order:3;
display:flex;
flex-direction:column;
gap:12px;
}

.hero-actions .btn{
width:100%;
padding:16px;
border-radius:40px;
}

/* esconder cards no mobile */

.hero-meta{
display:none;
}

}

/* HERO MOBILE – ordem correta e imagem grande */

@media (max-width:768px){

.hero-grid{
display:flex;
flex-direction:column;
}

/* texto primeiro */
.hero-copy{
order:1;
}

/* trabalhadores logo após texto */
.hero-workers{
order:2;
display:flex;
justify-content:flex-end;
margin-top:10px;
margin-bottom:10px;
}

/* imagem grande e colada à direita */
.hero-workers img{
width:130%;
max-width:none;
height:auto;
transform:translateX(25%);
}

/* botões depois da imagem */
.hero-actions{
order:3;
display:flex;
flex-direction:column;
gap:12px;
}

/* esconder cards no mobile */
.hero-meta{
display:none;
}

}
@media (max-width:768px){

.hero-workers{
display:flex;
justify-content:flex-end;
margin:10px 0 20px 0;
}

.hero-workers img{
width:150%;
max-width:none;
height:auto;
transform:translateX(25%);
}

.hero-meta{
display:none;
}

}

@media (max-width:768px){

.hero-workers{
display:flex;
justify-content:flex-end;
margin:0px 0 0px 0;
overflow:hidden;
}

.hero-workers img{
width:200%;
max-width:none;
height:auto;
transform:translateX(35%);
margin-top:-95px;
}

.hero-meta{
display:none;
}

}

@media (max-width:768px){

.hero{
padding-top:70px;
}

}

@media (max-width:768px){

.hero-subtitle{
margin-bottom:5px;
}

}

.hero-actions .btn{
width:100%;
padding:16px;
border-radius:40px;
font-size:16px;
}

/* remover cards no mobile */

.hero-meta{
display:none;
}

}

/* =========================
MOBILE STACK FIX
========================= */

@media (max-width:768px){

/* HOW WE THINK */

.thinking-grid{
display:flex !important;
flex-direction:column;
gap:24px;
}

.thinking-card{
width:100%;
}


/* INSTAGRAM */

.gallery-grid{
display:flex !important;
flex-direction:column;
gap:20px;
}

.insta-card{
width:100%;
}


/* SERVICES (caso também precise) */

.services-grid{
display:flex;
flex-direction:column;
gap:24px;
}

.service-card{
width:100%;
}


/* FOOTER */

.footer-grid{
display:flex;
flex-direction:column;
gap:30px;
}

}

/* =========================
CTA MOBILE FIX
========================= */

@media (max-width:768px){

.cta-section{
padding:80px 20px;
text-align:center;
}

.cta-label{
font-size:12px;
letter-spacing:3px;
margin-bottom:20px;
}

.cta-big{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:20px;

font-size:44px;
line-height:1.1;
text-align:center;
}

.cta-arrow{
font-size:32px;
transform:none;
}

}

/* =========================
FOOTER MOBILE FIX
========================= */

@media (max-width:768px){

.footer-grid{
display:flex !important;
flex-direction:column;
align-items:center;
text-align:center;
gap:40px;
}

.footer-grid > div{
width:100%;
max-width:420px;
}

.footer-grid h3{
text-align:center;
}

.footer-grid p,
.footer-grid a{
text-align:center;
}

.footer-bottom{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:20px;
}

}

.footer-grid{
padding-top:40px;
}

.footer-grid h3{
font-size:22px;
margin-bottom:10px;
}

/* =========================
FOOTER BOTTOM MOBILE FIX
========================= */

@media (max-width:768px){

.footer-bottom{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:16px;
padding:30px 20px;
}

.footer-bottom > *{
width:100%;
}

.footer-bottom img{
margin-bottom:10px;
}

.footer-bottom p{
margin:0;
font-size:14px;
line-height:1.5;
}

}

/* =========================
FOOTER MOBILE FIX
========================= */

@media (max-width:768px){

/* FOOTER PRINCIPAL */

.footer-grid{
display:flex;
flex-direction:column;
gap:40px;
}

.footer-col{
width:100%;
}

.footer-col h4{
margin-bottom:12px;
}

.footer-col ul{
padding:0;
margin:0;
}

.footer-col li{
margin-bottom:8px;
}


/* SUBFOOTER */

.subfooter-grid{
display:flex;
flex-direction:column;
gap:20px;
}

.sub-left{
display:flex;
flex-direction:column;
gap:10px;
}

.sub-right{
font-size:14px;
line-height:1.5;
}

.footer-logo{
width:120px;
}

}


/* =========================
HERO WATERMARK MOBILE
========================= */

@media (max-width:768px){

.hero-watermark{
display:block;
position:absolute;

top:90px;
left:50%;

transform:translateX(-50%);

font-size:120px;
font-weight:800;

letter-spacing:10px;

color:#000;
opacity:0.05;

pointer-events:none;
z-index:0;
}

.hero-copy{
position:relative;
z-index:2;
}

}
/* HERO WATERMARK MOBILE FIX */

@media (max-width:768px){

.hero{
position:relative;
overflow:hidden;
}

.hero-watermark{
position:absolute;

top:320px;
left:10%;

transform:translateX(-50%);

font-size:120px;
font-weight:800;
letter-spacing:8px;

color:#ffffff;      /* branco */
opacity:0.08;       /* transparência */

z-index:0;          /* atrás */

pointer-events:none;
}

/* garante que texto fique na frente */

.hero-copy{
position:relative;
z-index:2;
}

.hero-workers{
position:relative;
z-index:2;
}

}


/* =========================
SERVICES WATERMARK MOBILE
========================= */

@media (max-width:768px){

.portfolio-hero{
position:relative;
overflow:hidden;
}

.portfolio-watermark{
position:absolute;

top:75px;
left:13%;

transform:translateX(-50%);

font-size:90px;
font-weight:800;
letter-spacing:8px;

color:#fff;
opacity:0.06;

z-index:0;
pointer-events:none;
}

/* garante que título fique acima */

.portfolio-title,
.portfolio-subtitle{
position:relative;
z-index:2;
}

}


/* =========================
SERVICE PAGE MOBILE FIX
========================= */

@media (max-width:768px){

/* WATERMARK TRIBE */

.service-hero{
position:relative;
overflow:hidden;
}

.service-watermark{
position:absolute;

top:70px;
left:15%;

transform:translateX(-50%);

font-size:20vw;        /* pequeno e proporcional */
font-weight:800;
letter-spacing:8px;

color:#ffffff;
opacity:0.05;

z-index:0;
pointer-events:none;
}

/* garante que título fique na frente */

.service-title,
.service-subtitle{
position:relative;
z-index:2;
}


/* DIMINUIR ESPAÇO ANTES DA PRIMEIRA IMAGEM */

.service-blocks{
padding-top:20px;
}

.service-block:first-child{
margin-top:0;
}

}

/* =========================
ABOUT PAGE MOBILE FIX
========================= */

@media (max-width:768px){

/* transforma grid em coluna */

.about-grid{
display:flex;
flex-direction:column;
gap:30px;
}

/* imagem */

.about-image{
width:100%;
overflow:hidden;
}

.about-image img{
width:100%;
height:auto;
display:block;
}

/* conteúdo */

.about-content{
width:100%;
}

/* estatísticas */

.about-stats{
display:flex;
flex-direction:column;
gap:20px;
margin-top:20px;
}

.stat{
text-align:left;
}

}

.stat h3{
font-size:32px;
}

/* =========================
ABOUT STATS MOBILE IMPROVEMENT
========================= */

@media (max-width:768px){

.about-stats{
display:flex;
flex-direction:column;
align-items:center;
gap:35px;
margin-top:40px;
}

.stat{
text-align:center;
max-width:220px;
}

.stat h3{
font-size:38px;
font-weight:700;
margin-bottom:6px;
}

.stat p{
font-size:14px;
color:#777;
letter-spacing:0.5px;
}

}

/* =========================
CONTACT PAGE MOBILE FIX
========================= */

@media (max-width:768px){

/* grid vira coluna */

.contact-grid{
display:flex;
flex-direction:column;
gap:40px;
}

/* bloco de texto */

.contact-info{
width:100%;
}

.contact-info h2{
font-size:28px;
margin-bottom:15px;
}

.contact-info p{
font-size:15px;
line-height:1.6;
}

/* detalhes contato */

.contact-details{
margin-top:25px;
display:flex;
flex-direction:column;
gap:18px;
}

/* formulário */

.contact-form{
width:100%;
}

/* inputs em coluna */

.form-row{
display:flex;
flex-direction:column;
gap:15px;
margin-bottom:15px;
}

/* campos */

.contact-form input,
.contact-form select,
.contact-form textarea{
width:100%;
font-size:15px;
padding:14px;
}

/* textarea */

.contact-form textarea{
min-height:130px;
resize:vertical;
}

/* botão */

.btn-quote{
width:100%;
margin-top:10px;
}

}


/* =========================
MENU OVERLAY PREMIUM
========================= */

.menu-overlay{

position:fixed;
inset:0;

background: radial-gradient(
circle at center,
#16233b 0%,
#0f1a2d 40%,
#0b1423 70%,
#070c16 100%
);

z-index:9999;
overflow:hidden;

}

/* navegação */

.menu-fullscreen{

position:relative;

display:flex;
flex-direction:column;

gap:26px;

margin-left:160px;
margin-top:120px;

}

/* links */

.menu-fullscreen a{

font-size:36px;
font-weight:500;

color:#cfd6df;
text-decoration:none;

transition:all .35s ease;

position:relative;

}

.menu-fullscreen a:hover{
color:white;
}

/* =========================
BARRA LUMINOSA
========================= */

.menu-fullscreen::before{

content:"";

position:absolute;

left:-60px;
top:0;

width:2px;
height:260px;

background:linear-gradient(
180deg,
rgba(255,255,255,0),
rgba(255,255,255,0.9),
rgba(255,255,255,0)
);

opacity:.25;

}

/* indicador */

.menu-indicator{

position:absolute;

left:-60px;
top:0;

width:2px;
height:60px;

background:linear-gradient(
180deg,
rgba(255,255,255,0),
rgba(255,255,255,1),
rgba(255,255,255,0)
);

border-radius:4px;

transition:transform .35s cubic-bezier(.4,0,.2,1);

}

/* efeito hover nos links */

.menu-fullscreen a:nth-child(1):hover ~ .menu-indicator{
transform:translateY(0px);
}

.menu-fullscreen a:nth-child(2):hover ~ .menu-indicator{
transform:translateY(66px);
}

.menu-fullscreen a:nth-child(3):hover ~ .menu-indicator{
transform:translateY(132px);
}

.menu-fullscreen a:nth-child(4):hover ~ .menu-indicator{
transform:translateY(198px);
}

.menu-fullscreen a:nth-child(5):hover ~ .menu-indicator{
transform:translateY(264px);
}

/* =========================
PREVIEW IMAGE
========================= */

.menu-bg-preview{

position:absolute;

right:0;
top:0;

width:50%;
height:100%;

background-size:cover;
background-position:center;

opacity:.25;

transition:opacity .5s ease, transform .6s ease;

}

/* =========================
MENU MOBILE
========================= */

@media (max-width:768px){

.menu-fullscreen{

margin-left:40px;
margin-top:140px;

gap:20px;

}

/* tamanho dos links */

.menu-fullscreen a{

font-size:28px;

}

/* esconde barra luminosa no mobile */

.menu-indicator{
display:block;
}

.menu-fullscreen::before{
display:none;
}

/* preview ocupa tela inteira */

.menu-bg-preview{

width:100%;
opacity:.18;

}

}

/* =========================
MENU OVERLAY PREMIUM
========================= */

.menu-overlay{

position:fixed;
inset:0;

background:rgba(10,10,10,0.88);

backdrop-filter:blur(10px);

z-index:9999;
overflow:hidden;

}

/* imagem preview */

.menu-bg-preview{

position:absolute;

right:0;
top:0;

width:55%;
height:100%;

background-size:cover;
background-position:center;

opacity:.35;

transition:opacity .6s ease;

}

/* faixa escura central */

.menu-overlay::before{

content:"";

position:absolute;

left:0;
top:0;

width:65%;
height:100%;

background:linear-gradient(
90deg,
rgba(0,0,0,0.95) 0%,
rgba(0,0,0,0.85) 40%,
rgba(0,0,0,0.55) 70%,
rgba(0,0,0,0) 100%
);

pointer-events:none;

}

/* menu links */

.menu-fullscreen{

position:relative;

display:flex;
flex-direction:column;

gap:26px;

margin-left:160px;
margin-top:120px;

z-index:2;

}

/* links */

.menu-fullscreen a{

font-size:38px;

color:#cfcfcf;
text-decoration:none;

transition:all .35s ease;

}

.menu-fullscreen a:hover{

color:white;

}

/* barra luminosa */

.menu-indicator{

position:absolute;

left:-60px;

width:2px;
height:60px;

background:linear-gradient(
180deg,
rgba(255,255,255,0),
rgba(255,255,255,1),
rgba(255,255,255,0)
);

transition:transform .35s ease;

}

/* =========================
MENU MOBILE LAYOUT
========================= */

@media (max-width:768px){

.menu-fullscreen{

margin-left:0;
margin-top:120px;

padding-left:30px;

align-items:flex-start;

}

/* alinhamento com a palavra MENU */

.menu-label{

padding-left:30px;

}

/* tamanho dos links */

.menu-fullscreen a{

font-size:30px;

}

/* esconder imagem inicialmente */

.menu-bg-preview{

opacity:0;
width:100%;

}

}


/* =========================
CONSTRUCTION GRID
========================= */

#constructionGrid{
position:absolute;
top:0;
left:0;

width:100%;
height:100%;

z-index:0;
opacity:0.15;

pointer-events:none;
}

.hero{
position:relative;
overflow:hidden;
}

/* GRID ANIMATION HERO */

#constructionGrid{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

opacity:0.05;

}

/* garantir que hero seja relativo */

.hero{
position:relative;
}


/* ========================================
HERO LIGHT EFFECT (LUZ ATRAVESSANDO HERO)
======================================== */

.hero{
position:relative;
overflow:hidden;
}

.hero::after{

content:"";

position:absolute;

top:-20%;
left:-80%;

width:60%;
height:140%;

pointer-events:none;

background:linear-gradient(
90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.25) 50%,
rgba(255,255,255,0) 100%
);

transform:skewX(-25deg);

animation:heroLightMove 8s linear infinite;

z-index:20;

}

@keyframes heroLightMove{

0%{
left:-80%;
}

100%{
left:140%;
}

}



/* ========================================
CONSTRUCTION DUST BETWEEN SECTIONS
======================================== */

section.section-dust{
position:relative;
overflow:hidden;
}

section.section-dust::before{

content:"";

position:absolute;

top:-100px;
left:0;

width:100%;
height:200px;

pointer-events:none;

z-index:1;

/* partículas cinza + branco */

background-image:

radial-gradient(circle, rgba(120,120,120,0.9) 3px, transparent 3px),
radial-gradient(circle, rgba(220,220,220,0.9) 3px, transparent 3px),
radial-gradient(circle, rgba(180,180,180,0.9) 4px, transparent 4px);

background-size:
120px 120px,
160px 160px,
200px 200px;

background-position:
0 0,
40px 60px,
80px 20px;

animation:dustMove 14s linear infinite;

}

@keyframes dustMove{

0%{
transform:translateY(60px);
}

100%{
transform:translateY(-80px);
}

}

/* ========================================
ARCHITECTURAL BLUEPRINT LINES
efeito entre seções
======================================== */

section.section-dust{
position:relative;
overflow:hidden;
}

/* linhas técnicas */

section.section-dust::before{

content:"";

position:absolute;

top:-120px;
left:0;

width:100%;
height:240px;

pointer-events:none;

/* grid técnico */

background-image:

linear-gradient(rgba(200,200,200,0.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(200,200,200,0.4) 1px, transparent 1px);

background-size:80px 80px;

animation:blueprintMove 18s linear infinite;

opacity:3;

}

/* movimento */

@keyframes blueprintMove{

0%{
transform:translateY(80px);
}

100%{
transform:translateY(-120px);
}

}

.hero-workers::after{

content:"";

position:absolute;
bottom:0;
left:0;

width:100%;
height:120px;

background:linear-gradient(
to bottom,
rgba(255,255,255,0),
rgba(255,255,255,1)
);

}
/* ========================================
BLUEPRINT LINES - MOBILE FIX
======================================== */

@media (max-width:768px){

section.section-dust::before{

top:-60px;

height:140px;

background-size:50px 50px;

opacity:.6;

}

}

/* ========================================
HERO IMAGE FADE - MOBILE
======================================== */

@media (max-width:768px){

.hero-workers::after{

height:80px;

background:linear-gradient(
to bottom,
rgba(255,255,255,0),
rgba(255,255,255,1)
);

}

}

/* 🔥 FORÇA CONTEÚDO VISÍVEL SEMPRE */
#pageTransition{
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}


/* 🔥 FORÇA CONTEÚDO VISÍVEL SEMPRE */
#pageTransition{
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* 🔥 GARANTE QUE NUNCA SOME */
#pageTransition{
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}


/* 🔥 DESATIVA ANIMAÇÃO NO BACK (SOLUÇÃO DEFINITIVA) */
html.is-back #menuOverlay{
  transition: none !important;
  transform: translateY(100%) !important;
  opacity: 0 !important;
}