/* ==========================================================================
   GRUPO VETUS — Terceirização de Serviços | Curitiba
   ========================================================================== */

:root{
  --navy: #0C2251;
  --navy-deep: #081733;
  --navy-soft: #12305e;
  --blue: #0081BB;
  --blue-bright: #17b5ff;
  --white: #F5F8FC;
  --ink: #0A1830;
  --muted: #A9BEDD;
  --radius: 14px;
  --radius-lg: 26px;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --ease: cubic-bezier(.2,.8,.2,1);
  --header-h: 116px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--navy);
  color:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Montserrat','Inter',sans-serif;
  font-weight:800;
  line-height:1.15;
  margin:0 0 .6em;
  letter-spacing:-.01em;
}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em;color:var(--muted);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
button{font:inherit;background:none;border:none;color:inherit;cursor:pointer;}
svg{fill:currentColor;width:1em;height:1em;}

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:2;
}

.kicker{
  display:inline-block;
  font-family:'Montserrat',sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue-bright);
  margin-bottom:.9rem;
  text-shadow:0 0 14px rgba(23,181,255,.5);
}
.section-head{max-width:760px; margin:0 auto 3.2rem; text-align:center;}
.section-sub{color:var(--muted); font-size:1.02rem;}
.section{position:relative; padding:6.5rem 0; overflow:hidden; scroll-margin-top:var(--header-h);}
#home, #empresa, #solucoes, #terceirizacao, #diferenciais, #fotos, #faq, #contato{scroll-margin-top:var(--header-h);}
.section:nth-of-type(even){background:linear-gradient(180deg, var(--navy-deep), var(--navy));}

/* ---------- Reveal on scroll ---------- */
.reveal-up{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0s);
}
.reveal-up.in-view{opacity:1; transform:translateY(0);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.95rem 1.9rem;
  border-radius:100px;
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  position:relative;
  isolation:isolate;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{
  background:linear-gradient(135deg,var(--blue),#00567d);
  color:#fff;
  box-shadow:0 8px 30px rgba(0,129,187,.45);
}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,129,187,.6);}
.btn-neon{
  background:transparent;
  color:var(--blue-bright);
  border:1.5px solid var(--blue);
  box-shadow:0 0 0 rgba(23,181,255,0);
}
.btn-neon::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 50% 50%, rgba(23,181,255,.35), transparent 70%);
  opacity:0; transition:opacity .35s var(--ease); z-index:-1;
}
.btn-neon:hover{
  color:#fff;
  box-shadow:0 0 18px rgba(23,181,255,.55), 0 0 46px rgba(0,129,187,.4);
  transform:translateY(-3px);
  border-color:var(--blue-bright);
}
.btn-neon:hover::before{opacity:1;}
.btn-lg{padding:1.15rem 2.6rem; font-size:1rem;}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1300;
  height:var(--header-h);
  display:flex; align-items:center;
  background:#fff;
  border-bottom:1px solid rgba(0,129,187,.18);
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.scrolled{
  background:#fff;
  box-shadow:0 10px 40px rgba(0,0,0,.15);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.brand{display:flex; align-items:center; flex-shrink:0; position:relative;}
.brand-logo{
  height:99px; width:auto; /* +50% over the previous 66px */
  /* Crisp white contour around the whole logo silhouette (8-direction
     hard-edged drop-shadow stack — no blur, so it reads as an outline
     rather than a glow). */
  filter:
    drop-shadow(1.6px 0 0 #fff)
    drop-shadow(-1.6px 0 0 #fff)
    drop-shadow(0 1.6px 0 #fff)
    drop-shadow(0 -1.6px 0 #fff)
    drop-shadow(1.2px 1.2px 0 #fff)
    drop-shadow(-1.2px -1.2px 0 #fff)
    drop-shadow(1.2px -1.2px 0 #fff)
    drop-shadow(-1.2px 1.2px 0 #fff);
}

.header-actions{display:flex; align-items:center; gap:1rem; flex-shrink:0;}
.header-cta{
  padding:.75rem 1.5rem;
  font-size:.78rem;
  white-space:nowrap;
  flex-shrink:0;
}
.header-cta:hover, .header-cta:focus-visible{color:var(--blue);}
.header-cta-short{display:none;}

/* Hamburger — same on desktop & mobile */
.hamburger{
  position:relative;
  width:52px; height:52px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border-radius:50%;
  border:1px solid rgba(0,129,187,.4);
  background:rgba(12,34,81,.5);
  z-index:1200;
  flex-shrink:0;
  overflow:hidden;
}
.hamburger .bar{
  position:relative; z-index:2;
  width:22px; height:2px; background:var(--white); border-radius:2px;
  transition:transform .4s var(--ease), opacity .3s var(--ease), background .3s;
}
.hamburger .beam{
  position:absolute; inset:-2px;
  border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 70%, var(--blue-bright) 85%, transparent 100%);
  opacity:.85;
  animation:spin 3.2s linear infinite;
}
.hamburger::after{
  content:""; position:absolute; inset:2px; border-radius:50%; background:rgba(8,23,51,.92);
}
@keyframes spin{to{transform:rotate(360deg);}}
.hamburger.active .bar:nth-child(2){transform:translateY(7px) rotate(45deg);}
.hamburger.active .bar:nth-child(3){opacity:0;}
.hamburger.active .bar:nth-child(4){transform:translateY(-7px) rotate(-45deg);}

/* Nav — hamburger-driven overlay on ALL breakpoints (per brief: desktop = mobile) */
.main-nav{
  position:fixed; inset:0 0 0 auto;
  width:min(420px,92vw);
  height:100vh;
  background:#000;
  border-left:1px solid rgba(0,129,187,.35);
  padding:calc(var(--header-h) + 2rem) 2.2rem 2rem;
  transform:translateX(100%);
  transition:transform .55s var(--ease);
  z-index:1100;
  overflow-y:auto;
  display:flex; flex-direction:column; justify-content:space-between;
}
.main-nav.open{transform:translateX(0);}
.main-nav::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(0,129,187,.25), transparent 60%),
    radial-gradient(500px 400px at 0% 100%, rgba(23,181,255,.12), transparent 60%);
  pointer-events:none;
}
.main-nav ul{display:flex; flex-direction:column; gap:.4rem; position:relative;}
.nav-link{
  display:flex; align-items:center; gap:.9rem;
  padding:.85rem .9rem;
  border-radius:100px;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.02em;
  border:1.5px solid rgba(0,129,187,.3);
  transition:border-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.nav-icon{width:20px; height:20px; flex-shrink:0; color:var(--blue-bright); filter:drop-shadow(0 0 6px rgba(23,181,255,.7));}
.nav-link::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 50% 50%, rgba(23,181,255,.35), transparent 70%);
  opacity:0; transition:opacity .35s var(--ease); z-index:-1;
}
.nav-link:hover, .nav-link:focus-visible{
  color:#fff;
  border-color:var(--blue-bright);
  box-shadow:0 0 18px rgba(23,181,255,.55), 0 0 46px rgba(0,129,187,.4);
  transform:translateY(-2px);
}
.nav-link:hover::before, .nav-link:focus-visible::before{opacity:1;}
.nav-cta{margin-top:2rem; width:100%; position:relative;}

/* Menu beam sweep effect */
.main-nav.open .nav-link{animation:navIn .5s var(--ease) both;}
.main-nav.open ul li:nth-child(1) .nav-link{animation-delay:.05s}
.main-nav.open ul li:nth-child(2) .nav-link{animation-delay:.1s}
.main-nav.open ul li:nth-child(3) .nav-link{animation-delay:.15s}
.main-nav.open ul li:nth-child(4) .nav-link{animation-delay:.2s}
.main-nav.open ul li:nth-child(5) .nav-link{animation-delay:.25s}
.main-nav.open ul li:nth-child(6) .nav-link{animation-delay:.3s}
.main-nav.open ul li:nth-child(7) .nav-link{animation-delay:.35s}
.main-nav.open ul li:nth-child(8) .nav-link{animation-delay:.4s}
@keyframes navIn{from{opacity:0; transform:translateX(24px);} to{opacity:1; transform:translateX(0);}}

/* Nav submenu — "Serviços" expands into links for each service subpage */
.nav-item-sub{position:relative;}
/* font:inherit resets ALL font sub-properties (needed so this <button> picks up
   the surrounding font-family/size like the <a> links do by default) — but that
   also resets font-weight to "inherit" from the parent <li>, which isn't bold,
   overriding .nav-link's own font-weight:600 (same specificity, declared later
   here so it wins). Restore the bold weight explicitly so "Serviços" matches
   the other menu links instead of looking thinner. */
.nav-link-toggle{width:100%; cursor:pointer; background:none; font:inherit; font-weight:600; border-radius:100px;}
.nav-sub-chev{
  margin-left:auto; width:9px; height:9px; border-right:2px solid var(--blue-bright); border-bottom:2px solid var(--blue-bright);
  transform:rotate(45deg); transition:transform .3s var(--ease); flex-shrink:0;
}
.nav-link-toggle[aria-expanded="true"] .nav-sub-chev{transform:rotate(-135deg);}
.nav-submenu{
  max-height:0; overflow:hidden; transition:max-height .4s var(--ease);
  list-style:none; margin:0; padding:0 0 0 1rem;
}
.nav-sublink{
  display:block; padding:.65rem 1rem; margin:.35rem 0; border-radius:100px; font-size:.9rem;
  color:var(--muted); border:1px solid transparent; transition:color .3s, border-color .3s, background .3s;
}
.nav-sublink:hover, .nav-sublink:focus-visible{color:#fff; border-color:rgba(23,181,255,.4); background:rgba(23,181,255,.1);}
.nav-sublink-all{color:var(--blue-bright); font-weight:600;}

.nav-scrim{
  position:fixed; inset:0; background:rgba(4,10,24,.6); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease); z-index:1050;
}
.nav-scrim.show{opacity:1; pointer-events:auto;}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding-top:var(--header-h);
  overflow:hidden;
}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-img{width:100%; height:100%; object-fit:cover; object-position:center 35%;}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,16,38,.5) 0%, rgba(6,16,38,.65) 45%, rgba(6,16,38,.85) 100%),
    linear-gradient(100deg, rgba(12,34,81,.83) 0%, rgba(12,34,81,.5) 38%, rgba(0,129,187,.16) 100%);
}
.hero-scanline{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:.25;
  background:repeating-linear-gradient(180deg, rgba(23,181,255,.08) 0px, transparent 2px, transparent 4px);
}
.hero-content{
  max-width:1180px; padding-top:2rem; padding-bottom:2rem;
  display:flex; align-items:center; gap:2.5rem;
}
.hero-text{max-width:760px; flex:1 1 auto; min-width:0;}
.hero-car{
  flex:0 0 auto;
  width:clamp(220px,26vw,400px);
  height:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(23,181,255,.25));
}
.eyebrow{
  font-family:'Montserrat',sans-serif; font-size:.75rem; font-weight:700;
  letter-spacing:.24em; color:var(--blue-bright); margin-bottom:1.2rem;
  text-shadow:0 0 16px rgba(23,181,255,.6);
}
.hero-title{
  font-size:clamp(2.2rem,5.4vw,3.9rem);
  color:#fff;
  margin-bottom:1rem;
  text-shadow:0 4px 40px rgba(0,0,0,.5);
}
.hero-title .word{display:inline-block; white-space:nowrap;}
.hero-title .sc{display:inline-block; opacity:0;}
.hero-title .sc.on{animation:smokeIn .7s cubic-bezier(0,0,.58,1) both;}
@keyframes smokeIn{
  from{opacity:0; transform:translate3d(-1.1rem,.6rem,0) rotate(8deg) skewX(-12deg) scale(.7); text-shadow:0 0 26px var(--blue-bright), 0 0 60px var(--blue-bright);}
  60%{text-shadow:0 0 14px var(--blue-bright);}
  to{opacity:1; transform:none; text-shadow:0 0 0 transparent;}
}
.hero-question{font-family:'Montserrat',sans-serif; font-weight:600; font-size:1.25rem; color:#fff; margin-bottom:1rem;}
.hero-desc{max-width:600px; font-size:1.02rem;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.6rem;}

/* ==========================================================================
   PIXEL CANVAS BACKGROUND (About / FAQ)
   ========================================================================== */
.about, .faq{background:radial-gradient(1200px 600px at 50% -10%, rgba(0,129,187,.16), transparent 60%), var(--navy-deep);}
.pixel-bg{position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.55;}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:3rem; align-items:center;}
.about-stats{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;}
.stat-card{
  background:linear-gradient(160deg, rgba(0,129,187,.14), rgba(12,34,81,.5));
  border:1px solid rgba(0,129,187,.35);
  border-radius:var(--radius);
  padding:1.6rem 1.2rem;
  text-align:center;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.stat-card:hover{transform:translateY(-6px); box-shadow:0 0 30px rgba(0,129,187,.45);}
.stat-num{display:block; font-family:'Montserrat',sans-serif; font-weight:800; font-size:2.1rem; color:var(--blue-bright); text-shadow:0 0 20px rgba(23,181,255,.5);}
.stat-label{font-size:.82rem; color:var(--muted);}

/* ==========================================================================
   SERVICE CARDS (accordion + neon)
   ========================================================================== */
.service-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem;}
.service-card{
  background:linear-gradient(160deg, rgba(18,48,94,.55), rgba(8,23,51,.75));
  border:1px solid rgba(0,129,187,.28);
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
  transition:box-shadow .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.service-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--ang,0deg), transparent 0 60%, var(--blue-bright), transparent 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .45s var(--ease); pointer-events:none;
  animation:rotateAng 4s linear infinite paused;
}
@keyframes rotateAng{to{--ang:360deg;}}
.service-card.open{border-color:rgba(23,181,255,.55); box-shadow:0 0 40px rgba(0,129,187,.4);}
.service-card.open::after{opacity:1; animation-play-state:running;}
.service-toggle{
  display:flex; align-items:center; gap:1.1rem; width:100%; text-align:left; padding:1.3rem 1.4rem;
}
.service-photo{
  flex-shrink:0; width:72px; height:72px; border-radius:14px; overflow:hidden;
  border:1px solid rgba(0,129,187,.4); box-shadow:0 0 18px rgba(0,129,187,.25);
}
.service-photo img{width:100%; height:100%; object-fit:cover;}
.service-heading{flex:1; min-width:0;}
.service-heading h3{margin:0 0 .2rem; font-size:1.12rem; color:#fff;}
.service-tagline{font-size:.85rem; color:var(--muted);}
.chev{
  flex-shrink:0; width:34px; height:34px; border-radius:50%; border:1px solid rgba(0,129,187,.5);
  position:relative;
  transition:transform .4s var(--ease), background .3s;
}
.chev::before,.chev::after{
  content:""; position:absolute; top:50%; left:50%; width:11px; height:2px; background:var(--blue-bright);
  transform:translate(-50%,-50%);
}
.chev::after{transform:translate(-50%,-50%) rotate(90deg); transition:transform .3s var(--ease);}
.service-card.open .chev::after{transform:translate(-50%,-50%) rotate(0deg);}
.service-card.open .chev{background:rgba(0,129,187,.25); transform:rotate(180deg);}
.service-panel{max-height:0; overflow:hidden; transition:max-height .55s var(--ease);}
.service-panel-inner{padding:0 1.5rem 1.7rem 6.3rem;}
.list-title{color:#fff; font-weight:600; margin-bottom:.5rem;}
.check-list li{
  position:relative; padding-left:1.6rem; margin-bottom:.5rem; color:var(--muted); font-size:.94rem;
}
.check-list li::before{
  content:""; position:absolute; left:0; top:.5em; width:9px; height:9px; border-radius:50%;
  background:var(--blue-bright); box-shadow:0 0 8px var(--blue-bright);
}

/* Homepage service cards — static summary + link to the full service page
   (no more click-to-expand accordion; .service-toggle/.service-panel above
   stay defined only because .chev is shared with the FAQ accordion). */
.service-summary{display:flex; align-items:center; gap:1.1rem; padding:1.3rem 1.4rem 1rem;}
.service-body{padding:0 1.4rem 1.5rem; display:flex; flex-direction:column; gap:1rem;}
.service-body p{margin:0; font-size:.92rem;}
.service-link{align-self:flex-start;}

/* ==========================================================================
   SERVICE SUBPAGE (servico-*.html) — hero, breadcrumb, related services
   ========================================================================== */
.page-hero{padding-top:calc(var(--header-h) + 3rem);}
.page-title{font-size:clamp(1.9rem,4.2vw,3rem); color:#fff;}
.breadcrumb{display:flex; flex-wrap:wrap; gap:.4rem; font-size:.85rem; color:var(--muted); margin-bottom:1.4rem;}
.breadcrumb a{color:var(--blue-bright);}
.related-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; max-width:620px;}
.related-card{
  display:flex; flex-direction:column; gap:.9rem; padding:1.4rem; text-align:left;
  background:rgba(18,48,94,.35); border:1px solid rgba(0,129,187,.22); border-radius:var(--radius);
  transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.related-card:hover{transform:translateY(-6px); border-color:rgba(23,181,255,.55); box-shadow:0 14px 40px rgba(0,129,187,.35);}
.related-card img{width:100%; height:140px; object-fit:cover; border-radius:10px;}
.related-card h3{margin:0; font-size:1.02rem; color:#fff;}
.related-card span{color:var(--blue-bright); font-size:.85rem; font-weight:600;}
@media (max-width:720px){
  .related-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   WHY GRID
   ========================================================================== */
.why-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.4rem;}
.why-card{
  background:rgba(18,48,94,.35); border:1px solid rgba(0,129,187,.22); border-radius:var(--radius);
  padding:2rem 1.5rem; text-align:center; transition:transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.why-card:hover{transform:translateY(-8px); border-color:rgba(23,181,255,.55); box-shadow:0 14px 40px rgba(0,129,187,.35);}
.why-icon{
  width:58px; height:58px; margin:0 auto 1.2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle, rgba(0,129,187,.3), transparent 70%);
  color:var(--blue-bright); filter:drop-shadow(0 0 10px rgba(23,181,255,.6));
}
.why-icon svg{width:28px; height:28px;}
.why-card h3{font-size:1.05rem; color:#fff;}
.why-card p{font-size:.9rem; margin:0;}

/* ==========================================================================
   OUTSOURCING SPLIT
   ========================================================================== */
.outsourcing-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:center;}
.tag-cloud{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0;}
.tag-cloud span{
  padding:.5rem 1rem; border-radius:100px; font-size:.82rem; font-weight:600;
  border:1px solid rgba(0,129,187,.4); color:var(--blue-bright); background:rgba(0,129,187,.08);
}
.outsourcing-visual{
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid rgba(0,129,187,.3);
  box-shadow:var(--shadow); position:relative;
}
.outsourcing-visual::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(6,16,38,.7));
}
.outsourcing-visual img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/4;}

/* ==========================================================================
   FOR WHOM — carousel
   ========================================================================== */
.whom-carousel{position:relative; display:flex; align-items:center; gap:1rem;}
.whom-track{
  display:flex; gap:1.4rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.4rem .2rem 1.6rem; -webkit-overflow-scrolling:touch; scrollbar-width:none; flex:1;
}
.whom-track::-webkit-scrollbar{display:none;}
.whom-card{
  /* Exactly 3 cards per view on desktop: each card's width is (100% of
     the track minus the 2 gaps between 3 cards) / 3. */
  flex:0 0 calc((100% - 2.8rem) / 3); width:auto; scroll-snap-align:start;
  padding:1.8rem; border-radius:var(--radius); background:rgba(18,48,94,.3);
  border-left:3px solid var(--blue); transition:border-color .35s, background .35s, transform .35s, box-shadow .35s;
}
.whom-card:hover{border-left-color:var(--blue-bright); background:rgba(0,129,187,.12); transform:translateY(-6px); box-shadow:0 14px 34px rgba(0,129,187,.3);}
.whom-card h3{font-size:1.05rem; color:#fff;}
.whom-card p{font-size:.9rem; margin:0;}
.carousel-arrow{
  flex-shrink:0; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(0,129,187,.5); background:rgba(12,34,81,.6); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:box-shadow .3s, border-color .3s, transform .3s;
}
.carousel-arrow svg{width:20px; height:20px;}
.carousel-arrow:hover{box-shadow:0 0 20px rgba(23,181,255,.6); border-color:var(--blue-bright); transform:scale(1.06);}
.carousel-dots{display:flex; justify-content:center; gap:.5rem; margin-top:.6rem;}
.carousel-dots .dot{width:9px; height:9px; border-radius:50%; border:none; padding:0; background:rgba(0,129,187,.35); transition:background .3s, transform .3s, box-shadow .3s;}
.carousel-dots .dot.active{background:var(--blue-bright); transform:scale(1.35); box-shadow:0 0 8px var(--blue-bright);}
@media (max-width:900px){
  /* 2 cards per view */
  .whom-card{flex-basis:calc((100% - 1.4rem) / 2);}
}
@media (max-width:640px){
  .carousel-arrow{width:40px; height:40px;}
  /* 1 card per view */
  .whom-card{flex-basis:100%;}
}

/* ==========================================================================
   LOCAL / CITIES
   ========================================================================== */
.local-lead{max-width:820px; margin:0 auto 2rem; text-align:center;}
.local-note{text-align:center; color:var(--blue-bright); font-weight:600;}
.city-list{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-bottom:1.6rem;}
.city-list span{
  padding:.55rem 1.1rem; border-radius:100px; font-size:.85rem;
  background:rgba(0,129,187,.1); border:1px solid rgba(0,129,187,.3); color:var(--white);
  transition:box-shadow .3s, border-color .3s;
}
.city-list span:hover{box-shadow:0 0 16px rgba(23,181,255,.5); border-color:var(--blue-bright);}

/* ==========================================================================
   DIFFERENTIALS
   ========================================================================== */
.diff-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem;}
.diff-item{
  display:flex; align-items:center; gap:1rem; padding:1.3rem 1.5rem; border-radius:var(--radius);
  background:rgba(18,48,94,.3); border:1px solid rgba(0,129,187,.2); font-weight:500; color:#fff;
  transition:transform .35s var(--ease), border-color .35s;
}
.diff-item:hover{transform:translateY(-4px); border-color:rgba(23,181,255,.5);}
.diff-num{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.3rem; color:var(--blue-bright);
  text-shadow:0 0 14px rgba(23,181,255,.5); flex-shrink:0;
}

/* ==========================================================================
   BENEFITS
   ========================================================================== */
.benefits-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem;}
.benefits-list li{
  position:relative; padding:1rem 1rem 1rem 2.6rem; border-radius:12px; background:rgba(18,48,94,.28);
  border:1px solid rgba(0,129,187,.18); color:var(--white); font-size:.95rem;
}
.benefits-list li::before{
  content:"✓"; position:absolute; left:1rem; top:1rem; color:var(--blue-bright); font-weight:800;
  text-shadow:0 0 10px rgba(23,181,255,.6);
}

/* ==========================================================================
   STEPS
   ========================================================================== */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:1.2rem; position:relative;}
.step{
  text-align:center; padding:2rem 1.2rem; border-radius:var(--radius);
  background:rgba(18,48,94,.3); border:1px solid rgba(0,129,187,.2); position:relative;
}
.step-num{
  display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%;
  margin:0 auto 1rem; font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.1rem;
  background:linear-gradient(135deg, var(--blue), #003a55); color:#fff; box-shadow:0 0 20px rgba(0,129,187,.55);
}
.step h3{font-size:.98rem; color:#fff;}
.step p{font-size:.85rem; margin:0;}

/* ==========================================================================
   VISIT / ATTENDANCE / FINAL CTA
   ========================================================================== */
.visit, .attendance, .final-cta, .gallery-teaser{
  text-align:center;
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(0,129,187,.25), transparent 60%),
    linear-gradient(160deg, var(--navy-soft), var(--navy-deep));
}
.visit-inner, .attendance-inner, .final-cta-inner, .gallery-teaser-inner{max-width:760px; margin:0 auto;}
.gallery-teaser-inner .btn{margin-top:1.4rem;}
.attendance-badge{
  display:inline-block; margin:1.4rem 0; padding:.9rem 1.8rem; border-radius:100px;
  border:1px solid var(--blue-bright); color:var(--blue-bright); font-weight:700; font-size:.85rem;
  letter-spacing:.05em; box-shadow:0 0 24px rgba(23,181,255,.4);
}
.attendance-contacts{display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem; margin-top:1rem;}
.attendance-contacts a{color:var(--white); font-weight:600; border-bottom:1px solid transparent; transition:border-color .3s, color .3s;}
.attendance-contacts a:hover{color:var(--blue-bright); border-color:var(--blue-bright);}
.final-cta h2{font-size:clamp(1.7rem,4vw,2.5rem);}
.final-tagline{margin-top:1.6rem; font-style:italic; color:var(--blue-bright);}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery-columns{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; align-items:start; max-width:760px; margin:0 auto;
}
.gallery-col{
  animation:galleryFloat 6s ease-in-out infinite;
  will-change:transform;
}
.gallery-col--up{animation-name:galleryFloatUp;}
.gallery-col--down{animation-name:galleryFloatDown; animation-delay:.9s;}
.gallery-col:nth-child(2){animation-delay:.45s;}
.gallery-col:nth-child(3){animation-delay:1.35s;}
.gallery-col:nth-child(4){animation-delay:1.8s;}
@keyframes galleryFloatUp{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
@keyframes galleryFloatDown{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(14px);}
}
.gallery-item{
  display:block; width:100%; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; position:relative;
  border:1px solid rgba(0,129,187,.25); cursor:zoom-in;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  perspective:600px;
}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), filter .5s;}
.gallery-item::after{
  content:"+"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; color:#fff; background:rgba(6,16,38,.35); opacity:0; transition:opacity .35s var(--ease);
}
.gallery-item:hover{transform:translateY(-8px) rotateY(4deg); box-shadow:0 20px 50px rgba(0,129,187,.4);}
.gallery-item:hover img{transform:scale(1.08);}
.gallery-item:hover::after{opacity:1;}
@media (max-width:900px){
  .gallery-columns{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .gallery-columns{grid-template-columns:1fr; gap:1.2rem;}
  .gallery-col{animation:none;}
}
@media (prefers-reduced-motion:reduce){
  .gallery-col{animation:none;}
}

.lightbox{
  position:fixed; inset:0; background:rgba(3,8,20,.94); z-index:2000; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease); backdrop-filter:blur(6px);
}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox img{max-width:88vw; max-height:84vh; border-radius:10px; box-shadow:0 30px 90px rgba(0,0,0,.6); transform:scale(.92); transition:transform .4s var(--ease);}
.lightbox.open img{transform:scale(1);}
.lightbox-close{position:absolute; top:1.5rem; right:2rem; font-size:2.4rem; color:#fff; line-height:1;}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(0,129,187,.5); color:#fff; display:flex; align-items:center; justify-content:center;
  background:rgba(12,34,81,.5); transition:box-shadow .3s, border-color .3s;
}
.lightbox-nav:hover{box-shadow:0 0 20px rgba(23,181,255,.6); border-color:var(--blue-bright);}
.lightbox-nav.prev{left:1.5rem;}
.lightbox-nav.next{right:1.5rem;}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;}
.testimonial-card{
  padding:2rem; border-radius:var(--radius-lg); background:linear-gradient(160deg, rgba(18,48,94,.5), rgba(8,23,51,.7));
  border:1px solid rgba(0,129,187,.25); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.testimonial-card:hover{transform:translateY(-8px); box-shadow:0 20px 50px rgba(0,129,187,.35);}
.stars{color:#ffc94d; letter-spacing:.15em; margin-bottom:1rem; text-shadow:0 0 10px rgba(255,201,77,.5);}
.testimonial-card p{color:var(--white); font-style:italic;}
.testimonial-author{display:flex; flex-direction:column; margin-top:1.2rem; padding-top:1rem; border-top:1px solid rgba(0,129,187,.2);}
.author-name{font-weight:700; color:#fff; font-size:.92rem;}
.author-role{font-size:.8rem; color:var(--muted);}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:1rem;}
.faq-item{
  border-radius:var(--radius); background:rgba(18,48,94,.32); border:1px solid rgba(0,129,187,.22);
  overflow:hidden; transition:border-color .4s, box-shadow .4s;
}
.faq-item.open{border-color:rgba(23,181,255,.6); box-shadow:0 0 34px rgba(0,129,187,.4);}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.3rem 1.5rem; text-align:left; font-weight:600; color:#fff; font-size:1rem;
}
.faq-q .chev{flex-shrink:0;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .5s var(--ease);}
.faq-a p{padding:0 1.5rem 1.4rem; margin:0; font-size:.94rem;}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:center;}
.contact-list{display:flex; flex-direction:column; gap:1rem; margin-top:1.6rem;}
.contact-row{
  display:flex; align-items:center; gap:.9rem; font-weight:600; padding:.9rem 1.2rem; border-radius:12px;
  background:rgba(18,48,94,.32); border:1px solid rgba(0,129,187,.2); transition:border-color .3s, transform .3s, box-shadow .3s;
}
.contact-row svg{width:20px; height:20px; color:var(--blue-bright); flex-shrink:0;}
.contact-row:hover{border-color:rgba(23,181,255,.55); transform:translateX(6px); box-shadow:0 0 20px rgba(0,129,187,.3);}
.contact-visual{border-radius:var(--radius-lg); overflow:hidden; border:1px solid rgba(0,129,187,.3); box-shadow:var(--shadow);}
.contact-visual img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/4;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background:#000;
  padding:4.5rem 0 0;
  border-top:1px solid rgba(0,129,187,.25);
  position:relative;
}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem;}
.footer-brand{position:relative;}
.footer-brand img{
  height:105px; width:auto; margin-bottom:1rem;
}
.footer-brand p{font-size:.88rem;}
.footer-col h4{color:#fff; font-size:.95rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:1.1rem;}
.footer-col a{display:flex; align-items:center; gap:.7rem; margin-bottom:.85rem; font-size:.9rem; color:var(--muted); transition:color .3s, transform .3s;}
.footer-col a svg{width:17px; height:17px; flex-shrink:0; color:var(--blue-bright); filter:drop-shadow(0 0 6px rgba(23,181,255,.5));}
.footer-col a:hover{color:var(--blue-bright); transform:translateX(4px);}
.footer-menu{display:flex; flex-wrap:wrap; gap:.6rem 1rem; margin-top:.6rem;}
.footer-bottom{
  border-top:1px solid rgba(0,129,187,.18); padding:1.4rem 24px; display:flex; flex-wrap:wrap;
  justify-content:space-between; gap:.6rem; max-width:1240px; margin:0 auto; font-size:.8rem; color:var(--muted);
}
.footer-bottom a{color:var(--blue-bright); font-weight:600;}

/* ==========================================================================
   WHATSAPP FLOATING BUTTON
   ========================================================================== */
.whatsapp-float{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:900;
  display:flex; align-items:center; gap:.7rem;
  background:linear-gradient(135deg,#0081BB,#0C2251);
  color:#fff; padding:.9rem 1.1rem; border-radius:100px;
  box-shadow:0 10px 34px rgba(0,129,187,.5);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  overflow:hidden;
}
.whatsapp-float svg{width:26px; height:26px; flex-shrink:0;}
.whatsapp-float .beam{
  position:absolute; inset:-40%;
  background:conic-gradient(from 0deg, transparent 0 65%, rgba(23,181,255,.9) 78%, transparent 92%);
  animation:spin 3s linear infinite;
  opacity:.7;
}
.whatsapp-float .wa-label{
  position:relative; font-weight:800; font-size:.78rem; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
}
.whatsapp-float svg{position:relative;}
.whatsapp-float:hover{transform:translateY(-4px) scale(1.03); box-shadow:0 16px 46px rgba(23,181,255,.7);}
@media (max-width:640px){
  .whatsapp-float .wa-label{display:none;}
  .whatsapp-float{padding:.9rem;}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .about-grid, .outsourcing-grid, .contact-inner{grid-template-columns:1fr;}
  .outsourcing-visual, .contact-visual{order:-1;}
  .service-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:repeat(3,1fr);}
  .testimonial-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .hero-content{flex-direction:column; align-items:flex-start; gap:1.6rem;}
  .hero-text{max-width:100%;}
  .hero-car{width:min(58vw,300px); align-self:center;}
}
@media (max-width:720px){
  :root{--header-h:92px;}
  .brand-logo{height:78px;}
  .header-actions{gap:.6rem;}
  .header-cta{padding:.6rem 1rem; font-size:.7rem;}
  .section{padding:4.5rem 0;}
  .steps{grid-template-columns:1fr 1fr;}
  .testimonial-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .about-stats{grid-template-columns:1fr 1fr;}
  .service-panel-inner{padding-left:1.5rem;}
  .service-photo{width:56px; height:56px;}
  .hero-ctas{flex-direction:column; align-items:stretch;}
  .hero-ctas .btn{width:100%;}
  .hero-car{width:min(64vw,260px);}
}
@media (max-width:480px){
  .steps{grid-template-columns:1fr;}
  .about-stats{grid-template-columns:1fr;}
  .header-cta-full{display:none;}
  .header-cta-short{display:inline;}
  .header-cta{padding:.6rem .85rem;}
  .hero-car{width:min(70vw,220px);}
}
@media (max-width:360px){
  .header-cta{display:none;}
}

/* ==========================================================================
   DESKTOP NAV — standard horizontal menu bar (≥1280px).
   Below this width (tablet + mobile) the hamburger + slide-in overlay
   above stays exactly as it was — there just isn't room for 8 links in
   a row on narrower screens.
   ========================================================================== */
@media (min-width:1280px){
  .hamburger{display:none;}
  .nav-scrim{display:none;}

  /* The rest of the site caps content at 1240px (.container), but that's
     too tight for 8 spaced-out links + logo + CTA in one row. The header
     is allowed to breathe wider than the page content below it. */
  .header-inner{flex-wrap:nowrap; max-width:1480px;}
  .main-nav{
    position:static;
    inset:auto;
    width:auto; height:auto;
    background:none;
    border-left:0;
    padding:0;
    transform:none;
    transition:none;
    z-index:auto;
    overflow:visible;
    flex:1;
    order:2;
    margin:0 .8rem;
    display:flex; flex-direction:row; align-items:center; justify-content:center;
  }
  .main-nav::before{display:none;}
  /* Direct child only — this must NOT also match the nested .nav-submenu
     list (it's a <ul> too), which needs to stay a vertical dropdown. */
  .main-nav > ul{
    flex-direction:row; flex-wrap:wrap; align-items:center; gap:.55rem; position:relative;
  }
  .main-nav .nav-cta{display:none;} /* redundant with the "Solicite Orçamento" button in the header */
  .header-actions{order:3;}

  /* Text links sit on the white header now (not the black mobile panel),
     so they need their own dark/blue palette — the base .nav-link color
     is near-white (meant for the black panel) and was invisible here. */
  .main-nav .nav-link{
    padding:.6rem .8rem;
    font-size:.92rem;
    color:var(--blue);
    border-color:transparent;
    box-shadow:none;
    transform:none;
    white-space:nowrap;
  }
  .main-nav .nav-link::before{display:none;} /* the neon radial glow was tuned for the dark panel */
  .main-nav .nav-link:hover, .main-nav .nav-link:focus-visible{
    color:var(--navy-deep);
    background:rgba(0,129,187,.1);
    border-color:rgba(0,129,187,.3);
    box-shadow:none;
    transform:none;
  }
  .main-nav .nav-icon{display:none;}
  .main-nav.open .nav-link{animation:none;}

  .nav-link-toggle{width:auto;}
  /* Two classes (.main-nav .nav-submenu) so this beats the base
     ".main-nav ul{position:relative}" rule's specificity (class+type).
     top:100% (no gap) so the mouse never crosses a "dead zone" between
     the button and the dropdown — a gap there breaks :hover before the
     cursor reaches the links inside. */
  .main-nav .nav-submenu{
    position:absolute; top:100%; left:50%;
    transform:translate(-50%,-6px);
    width:max-content; min-width:250px;
    max-height:none !important;
    background:var(--navy-deep);
    border:1px solid rgba(0,129,187,.35);
    border-radius:var(--radius);
    padding:.6rem;
    box-shadow:0 24px 60px rgba(0,0,0,.5);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav-item-sub:hover .nav-submenu,
  .nav-item-sub:focus-within .nav-submenu,
  .nav-link-toggle[aria-expanded="true"] ~ .nav-submenu{
    opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
  }
  .nav-item-sub:hover .nav-sub-chev{transform:rotate(-135deg);}
  .nav-sublink{padding:.6rem .9rem; margin:.15rem 0;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}
