/* =========================================================
   Inventi Engenharia — Landing Page
   Design system
   --navy           #173A6D   primary
   --navy-deep      #0F2A50   hero/dark surfaces
   --navy-soft      #1F4A86   hovers
   --amber          #E0A93B   accent / highlight
   --ink            #0E1726   body text on light
   --muted          #5B6577   secondary text
   --line           #E5E8EE
   --bg             #FFFFFF
   --bg-alt         #F6F7FA
   Type: Poppins (300/400/500/600/700)
   ========================================================= */

:root{
  --navy:#0E2D57;
  --navy-deep:#0A2244;
  --navy-soft:#19437A;
  --navy-08:rgba(14,45,87,.08);
  --navy-90:rgba(10,34,68,.92);
  --amber:#C46D36;
  --amber-soft:#E5A26C;
  --ink:#0E1726;
  --muted:#5B6577;
  --line:#E5E8EE;
  --bg:#FFFFFF;
  --bg-alt:#F6F7FA;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 6px 18px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05);
  --shadow-lg:0 20px 40px rgba(15,23,42,.12), 0 8px 16px rgba(15,23,42,.08);
  --radius:10px;
  --radius-lg:14px;
  --maxw:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  font-family:'Poppins', system-ui, -apple-system, sans-serif;
  font-weight:400;
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ---------- Type scale ---------- */
.eyebrow{
  display:inline-block;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--amber);
}
.eyebrow.on-dark{color:var(--amber-soft)}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;font-weight:600;line-height:1.2;margin:0;color:var(--ink);text-wrap:balance}
.h-display{font-size:clamp(2rem, 4.2vw, 3.25rem); font-weight:700; letter-spacing:-.02em; line-height:1.1}
.h-section{font-size:clamp(1.85rem, 3.2vw, 2.5rem); font-weight:600; letter-spacing:-.015em; color:var(--navy)}
.h-card{font-size:1.0625rem; font-weight:600; letter-spacing:-.005em}
.lead{font-size:1rem;color:var(--muted);max-width:62ch;text-wrap:pretty}
.small{font-size:.8125rem;color:var(--muted)}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.mob-br{display:none}
section{padding:88px 0;position:relative}
.section-head{text-align:center;max-width:680px;margin:0 auto 56px}
.section-head .eyebrow{margin-bottom:14px}
.section-head h2{margin-bottom:14px}
.section-head .lead{margin:0 auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;
  font-size:.875rem;font-weight:500;letter-spacing:.01em;
  border-radius:999px;
  transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
/* Global icon span (consistent centering) */
[data-icon]{display:inline-flex;align-items:center;justify-content:center;line-height:0}
[data-icon] svg{display:block}

.btn svg, .btn .ico, .btn [data-icon]{flex:0 0 auto}
.btn [data-icon] svg{width:16px;height:16px}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-soft);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-accent{background:var(--amber);color:#fff;font-weight:600}
/* mobile drawer brand swap (light panel) */
.mobile-drawer .brand .logo-white{display:none}
.mobile-drawer .brand .logo-blue{display:block}
.btn-accent:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);filter:brightness(1.03)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-glass{
  background:rgba(255,255,255,.06);
  color:#fff;border:none;
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.btn-glass:hover{background:rgba(255,255,255,.12);transform:translateY(-1px);box-shadow:0 8px 22px rgba(20,55,110,.35)}
.btn-whatsapp{background:#25D366;color:#fff}
.btn-whatsapp:hover{background:#1ebe5a;transform:translateY(-1px);box-shadow:var(--shadow-md)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:70;
  transition:background .6s ease, box-shadow .6s ease;
  padding:16px 0;
}
.site-header.scrolled{background:rgba(255,255,255,.96);backdrop-filter:saturate(160%) blur(8px);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;gap:32px}
.nav .brand{margin-right:auto}
.brand{display:flex;align-items:center;gap:10px;position:relative}
.brand img{height:38px;width:auto;display:block;transition:opacity .5s ease}
.brand .logo-white{display:block}
.brand .logo-blue{display:block;position:absolute;inset:0;opacity:0;pointer-events:none}
.site-header.scrolled .brand .logo-white{opacity:0}
.site-header.scrolled .brand .logo-blue{opacity:1}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0}
.nav-links a{
  font-size:.85rem;font-weight:500;color:rgba(255,255,255,.92);
  padding:6px 0;transition:color .5s ease;
}
.nav-links a:hover, .nav-links a.active{color:var(--amber)}
.site-header.scrolled .nav-links a{color:var(--ink)}
.site-header.scrolled .nav-links a:hover,
.site-header.scrolled .nav-links a.active{color:var(--amber)}
.nav-cta{display:flex;align-items:center;gap:10px}

.menu-toggle{display:none;width:40px;height:40px;border-radius:8px;color:#fff;align-items:center;justify-content:center;transition:color .5s ease;position:relative}
.menu-toggle .mt-icon{display:grid;place-items:center;width:100%;height:100%}
.menu-toggle .mt-close{display:none}
.site-header.scrolled .menu-toggle{color:var(--ink)}
.menu-toggle svg{width:22px;height:22px}

/* mobile drawer — slides from top */
.mobile-drawer{
  position:fixed;inset:0;background:rgba(10,28,58,.55);z-index:60;
  opacity:0;visibility:hidden;transition:opacity .3s ease, visibility .3s ease;
}
.mobile-drawer.open{opacity:1;visibility:visible}
.mobile-drawer .panel{
  position:absolute;top:0;left:0;right:0;
  background:#fff;padding:0;
  display:flex;flex-direction:column;align-items:center;
  transform:translateY(-100%);transition:transform .35s cubic-bezier(.22,.61,.36,1);
  padding-top:80px;padding-bottom:36px;
  gap:0;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.mobile-drawer.open .panel{transform:translateY(0)}
.drawer-head{
  display:flex;justify-content:flex-end;align-items:center;
  width:100%;padding:0 24px;
  position:absolute;top:0;left:0;right:0;
  height:72px;
}
.drawer-close{
  width:40px;height:40px;border-radius:8px;
  color:var(--ink);display:grid;place-items:center;
  transition:color .2s;
}
.drawer-close svg{width:22px;height:22px}
.drawer-close:hover{color:var(--navy)}
.mobile-drawer a{
  display:block;text-align:center;
  padding:12px 24px;font-size:1rem;font-weight:600;
  color:var(--navy);
  transition:color .2s;
}
.mobile-drawer a:hover{color:var(--amber)}
/* CTA inside drawer — match desktop nav button exactly */
.mobile-drawer a.btn,
.mobile-drawer .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  padding:11px 22px;
  margin-top:22px;
  align-self:center;
  font-size:.875rem;
  font-weight:600;
  color:#fff;
  background:var(--amber);
  border-radius:999px;
  letter-spacing:.01em;
}
.mobile-drawer a.btn:hover,
.mobile-drawer .btn:hover{color:#fff;filter:brightness(1.03);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.mobile-drawer .btn [data-icon] svg{width:16px;height:16px}

/* When drawer is open, force header into "light" mode (blue logo, dark toggle) */
body.drawer-open .site-header .brand .logo-white{opacity:0}
body.drawer-open .site-header .brand .logo-blue{opacity:1}
/* keep the toggle visible while the drawer is open, but swap its icon to a chevron-up (“collapse”) */
body.drawer-open .site-header .menu-toggle{color:var(--ink)}
body.drawer-open .menu-toggle .mt-open{display:none}
body.drawer-open .menu-toggle .mt-close{display:grid}
/* the in-panel close button is no longer used — the header toggle handles both directions */
.drawer-close{display:none}

/* ---------- Hero ---------- */
.hero{
  min-height:100vh;padding:120px 0 40px;position:sticky;top:0;z-index:0;color:#fff;
  display:flex;align-items:center;
  background:linear-gradient(180deg, rgba(10,34,68,.82) 0%, rgba(10,34,68,.90) 100%), url('assets/hero_fundo_01.webp') center/cover no-repeat;
}
/* Sections after the hero scroll over the sticky hero */
.services, .portfolio, .about, .contact, .footer{position:relative;z-index:1}

/* Explore indicator at hero bottom */
.hero-explore{
  position:absolute;left:50%;bottom:28px;
  transform:translateX(-50%);
  display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  color:rgba(255,255,255,.55);
  font-size:.66rem;letter-spacing:.36em;text-transform:uppercase;font-weight:500;
  text-decoration:none;
  transition:color .25s ease;
  z-index:2;
}
.hero-explore .lbl{line-height:1}
.hero-explore svg{width:18px;height:18px;animation:exploreBounce 2.2s ease-in-out infinite}
.hero-explore:hover{color:#fff}
.hero-explore:hover svg{animation-play-state:paused}
@keyframes exploreBounce{
  0%, 100%{transform:translateY(0); opacity:.7}
  50%{transform:translateY(6px); opacity:1}
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 75% 30%, rgba(196,109,54,.14), transparent 55%);
  pointer-events:none;
}
.hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.hero-copy h1{color:#fff;margin:14px 0 32px}
.hero-copy p{font-size:1rem;color:rgba(255,255,255,.82);max-width:46ch;margin:0 0 32px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:flex;gap:36px;margin-top:48px;border-top:1px solid rgba(255,255,255,.15);padding-top:28px}
.hero-stats .item .n{font-size:1.5rem;font-weight:600;color:#fff;letter-spacing:-.01em}
.hero-stats .item .l{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:4px}

.hero-cards{display:grid;gap:20px;padding-left:38px}
.hero-card{
  position:relative;
  background:rgba(255,255,255,.06);
  border:none;
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-radius:14px;
  padding:24px 24px 24px 60px;
  display:flex;flex-direction:column;gap:8px;
  transition:transform .3s ease, background .3s ease;
  text-decoration:none;color:inherit;cursor:pointer;
}
.hero-card:hover{transform:translateX(10px);background:rgba(255,255,255,.10)}
.hero-card .ico{
  position:absolute;
  left:-32px;top:50%;transform:translateY(-50%);
  width:64px;height:64px;border-radius:50%;
  background:#2F5DA8;
  color:#fff;
  display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(20,55,110,.30);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.hero-card:hover .ico{
  box-shadow:0 10px 26px rgba(20,55,110,.45);
}
.hero-card .ico svg{width:28px;height:28px}
.hero-card h3{color:#fff;font-size:1.02rem;margin:0;font-weight:600;letter-spacing:.01em}
.hero-card p{
  font-size:.88rem;color:rgba(255,255,255,.78);margin:0;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(3 * 1.55 * .88rem);
}
/* boost specificity to win over .reveal-stagger.in > * transform */
.reveal-stagger.in > .hero-card:hover{transform:translateX(10px)}

/* ---------- Section: Services ---------- */
.services{background:var(--bg-alt)}
.carousel{position:relative}
.carousel-track-wrap{overflow:hidden}
.carousel-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);
  gap:24px;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.service-card{
  background:#fff;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:border-color .3s ease, box-shadow .35s ease;
  cursor:pointer;
  /* Portrait 3:4 */
  aspect-ratio:3 / 4;
}
.service-card:hover{border-color:var(--line)}
.service-card .img{aspect-ratio:16/9;overflow:hidden;background:#dfe3eb;flex:0 0 auto}
.service-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.service-card:hover .img img{transform:scale(1.08)}
.service-card .body{
  padding:28px 26px 26px;display:flex;flex-direction:column;gap:14px;flex:1 1 auto;min-height:0;
  background:#fff;
  transition:background-color .35s ease;
}
.service-card h3{font-size:1.1rem;font-weight:600;color:var(--navy-deep);transition:color .35s ease}
.service-card p{font-size:.9rem;color:var(--muted);margin:0;flex:1;line-height:1.6;transition:color .35s ease}
.service-card .more{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.72rem;font-weight:600;color:var(--navy);letter-spacing:.14em;text-transform:uppercase;
  margin-top:6px;
  transition:color .35s ease;
}
.service-card .more svg{transition:transform .2s ease, color .35s ease;width:14px;height:14px}
.service-card:hover .more svg{transform:translateX(3px)}
.service-card:hover .body{background:var(--navy-deep)}
.service-card:hover h3{color:#fff}
.service-card:hover p{color:rgba(255,255,255,.78)}
.service-card:hover .more{color:#fff}

.carousel-controls{display:flex;justify-content:center;gap:10px;margin-top:28px;align-items:center}
.carousel-btn{
  width:42px;height:42px;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--navy);
  display:grid;place-items:center;transition:all .2s ease;
}
.carousel-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.carousel-btn:disabled{opacity:.4;cursor:not-allowed;background:#fff;color:var(--muted)}
.carousel-btn svg{width:18px;height:18px}
.carousel-dots{display:flex;gap:6px;margin:0 12px}

/* Services: arrows beside the cards — default sits OUTSIDE the container/page edge */
.services-carousel .carousel-stage{position:relative;display:flex;align-items:center;gap:18px}
.services-carousel .carousel-stage .carousel-track-wrap{flex:1 1 auto;min-width:0}
.services-carousel .carousel-btn.side{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:46px;height:46px;
  box-shadow:0 1px 2px rgba(15,23,42,.06);
}
.services-carousel .carousel-btn.side.prev{left:-72px}
.services-carousel .carousel-btn.side.next{right:-72px}
@media (max-width:1344px){
  .services-carousel .carousel-btn.side.prev{left:-22px}
  .services-carousel .carousel-btn.side.next{right:-22px}
}
@media (max-width:1280px){
  .services-carousel .carousel-btn.side.prev{left:6px}
  .services-carousel .carousel-btn.side.next{right:6px}
}
.dot{width:7px;height:7px;border-radius:50%;background:#cdd3de;transition:all .2s ease;cursor:pointer}
.dot.active{background:var(--navy);width:22px;border-radius:4px}

/* ---------- Methodology timeline (inside Services section) ---------- */
.methodology{margin-top:120px}
.methodology-head{text-align:center;max-width:680px;margin:0 auto 56px}
.methodology-head .eyebrow{margin-bottom:14px}
.methodology-head .h-section{margin:0 0 18px}
.methodology-head .lead{margin:0 auto;max-width:none}

/* ---------- Results row (abaixo da timeline) ---------- */
.results-row{
  list-style:none;margin:80px auto 0;padding:0;
  max-width:880px;
  display:grid;grid-template-columns:repeat(3, 1fr);
  align-items:stretch;
}
.results-row .result{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:8px 28px;
  text-align:center;
  position:relative;
}
.results-row .result + .result{
  border-left:1px solid rgba(15,35,71,.10);
}
.results-row .result:first-child{padding-left:0}
.results-row .result:last-child{padding-right:0}
.results-row .ico{
  flex:0 0 auto;
  width:44px;height:44px;
  color:var(--amber);
  display:grid;place-items:center;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.04));
}
.results-row .ico svg{width:42px;height:42px;stroke-width:1.4}
.results-row .text{display:flex;flex-direction:column;align-items:center}
.results-row .text h4{
  margin:0 0 6px;
  font-family:'Poppins',sans-serif;
  font-size:1.05rem;font-weight:600;
  color:var(--navy-deep);
  letter-spacing:-.005em;
  line-height:1.2;
}
.results-row .text p{
  margin:0;
  font-size:.86rem;font-weight:400;
  color:var(--muted);
  line-height:1.5;
  max-width:24ch;
}

/* ---------- Process timeline (vertical, 5 steps — alternating sides) ---------- */
.proc-tl{
  list-style:none;margin:0 auto;padding:0;
  max-width:880px;position:relative;
}
.proc-step{
  position:relative;
  display:grid;
  grid-template-columns:1fr 48px 1fr;
  align-items:center;
  column-gap:40px;
  min-height:120px;
  padding:14px 0;
}
/* alternating full-bleed band on rows 2 and 4 */
.proc-step:nth-child(even)::before{
  content:"";position:absolute;
  top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;
  background:rgba(14,45,87,.04);
  z-index:0;
}
.proc-step > *{position:relative;z-index:1}

/* dashed vertical line — through center of nodes (column 2 = perfectly centered) */
.proc-tl::before{
  content:"";position:absolute;
  top:74px;bottom:74px;           /* clip to first/last node centers */
  left:50%;transform:translateX(-50%);
  border-left:2px dashed var(--navy);
  opacity:.30;
  z-index:0;
  pointer-events:none;
}

/* base glyph + content cells (positions overridden per row below) */
.proc-glyph{
  width:48px;height:48px;
  color:var(--navy);
  opacity:.20;
  transition:opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.proc-glyph svg{width:100%;height:100%;display:block}
.proc-step:hover .proc-glyph{opacity:.48;transform:scale(1.06)}

/* ODD rows — glyph on the LEFT of the line, content on the RIGHT */
.proc-step:nth-child(odd) .proc-glyph{
  grid-column:1;justify-self:end;
}
.proc-step:nth-child(odd) .proc-content{
  grid-column:3;justify-self:start;text-align:left;
}
.proc-step:nth-child(odd) .proc-desc{margin-right:auto}

/* EVEN rows — content on the LEFT of the line, glyph on the RIGHT */
.proc-step:nth-child(even) .proc-glyph{
  grid-column:3;justify-self:start;
}
.proc-step:nth-child(even) .proc-content{
  grid-column:1;justify-self:end;text-align:right;
}
.proc-step:nth-child(even) .proc-desc{margin-left:auto}

.proc-node{
  grid-column:2;
  width:48px;height:48px;border-radius:50%;
  background:var(--navy);color:#fff;
  display:grid;place-items:center;
  font-size:1rem;font-weight:700;
  box-shadow:0 4px 14px rgba(14,45,87,.28), 0 0 0 6px var(--bg-alt);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.proc-step:nth-child(even) .proc-node{
  /* ring matches the banded background so node "sits on" the line cleanly */
  box-shadow:0 4px 14px rgba(14,45,87,.28), 0 0 0 6px #EEF0F4;
}
.proc-step:hover .proc-node{transform:scale(1.08)}

.proc-content{padding-left:0}
.proc-title{
  font-size:1.05rem;font-weight:600;color:var(--navy-deep);
  letter-spacing:-.005em;line-height:1.3;
  transition:color .3s ease;
}
.proc-step:hover .proc-title{color:var(--amber)}
.proc-desc{
  font-size:.86rem;font-weight:400;color:var(--muted);
  line-height:1.6;margin:4px 0 0;max-width:46ch;
}

@media (max-width:760px){
  .proc-tl{max-width:560px}
  .proc-step{
    grid-template-columns:44px 1fr;
    column-gap:20px;
    padding:18px 0 18px 8px;
    min-height:auto;
  }
  .proc-glyph{display:none}
  /* collapse alternating to a single left-aligned column on mobile */
  .proc-step:nth-child(odd)  .proc-content,
  .proc-step:nth-child(even) .proc-content{
    grid-column:2;justify-self:start;text-align:left;
  }
  .proc-step:nth-child(odd)  .proc-desc,
  .proc-step:nth-child(even) .proc-desc{margin:4px 0 0}
  .proc-node{
    grid-column:1;
    width:40px;height:40px;font-size:.92rem;
    box-shadow:0 4px 14px rgba(14,45,87,.28), 0 0 0 5px var(--bg-alt);
  }
  .proc-step:nth-child(even) .proc-node{
    box-shadow:0 4px 14px rgba(14,45,87,.28), 0 0 0 5px #EEF0F4;
  }
  .proc-title{font-size:.98rem}
  .proc-desc{font-size:.82rem}
  .proc-tl::before{
    left:calc(8px + 20px); /* center of 40px node = 20px from row left, plus 8px padding */
    top:38px;bottom:38px;
    transform:none;
  }
}

.tl-wrap{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:56px;
  width:100%;
  margin:8px auto 0;
}
/* horizontal spine — spans the full content width with soft fade-in/out at the edges */
.tl-wrap::before{
  content:"";
  position:absolute;
  left:0;right:0;
  top:64px;
  transform:translateY(-50%);
  height:6px;border-radius:3px;
  background:linear-gradient(90deg,
    transparent 0%,
    #5C8AC4 8%,
    #2F5DA8 34%,
    #0E2D57 66%,
    #0A2244 92%,
    transparent 100%);
  z-index:0;
}
.tl-row{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  position:relative;z-index:1;
}
.tl-num{
  display:block;
  font-family:'Poppins',sans-serif;
  font-size:1.35rem;font-weight:700;letter-spacing:.04em;
  color:var(--navy);opacity:.45;line-height:1;
  margin-bottom:14px;
  transition:opacity .3s ease, color .3s ease;
}
.tl-row:hover .tl-num{opacity:1;color:var(--amber)}
@media (hover:none){.tl-row:hover .tl-num{opacity:.45;color:var(--navy)}}
.tl-circle{
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(15,35,71,.18);
  margin-bottom:22px;
  transition:transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.tl-row:hover .tl-circle{
  transform:scale(1.08);
  box-shadow:0 0 0 10px rgba(14,45,87,.08), 0 10px 28px rgba(15,35,71,.20);
  filter:brightness(1.10);
}
@media (hover:none){
  .tl-row:hover .tl-circle{transform:none;box-shadow:0 6px 20px rgba(15,35,71,.18);filter:none}
}
.tl-circle svg{
  width:28px;height:28px;
  stroke:#fff;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.tl-content{max-width:240px}
.tl-item-title{
  font-family:'Poppins',sans-serif;
  font-size:1.02rem;font-weight:600;
  color:var(--navy-deep);letter-spacing:-.005em;line-height:1.25;
  display:block;margin-bottom:10px;
  transition:color .3s ease;
}
.tl-row:hover .tl-item-title{color:var(--amber)}
@media (hover:none){.tl-row:hover .tl-item-title{color:var(--navy-deep)}}
.tl-item-desc{
  font-size:.78rem;color:var(--muted);font-weight:400;
  line-height:1.65;margin:0;
  transition:color .3s ease;
}
.tl-row:hover .tl-item-desc{color:var(--ink)}
@media (hover:none){.tl-row:hover .tl-item-desc{color:var(--muted)}}

/* Pills variant — usado na etapa 01 (Projeto Conceitual) */
.tl-content-pills{max-width:260px;width:100%}
.tl-content-pills .tl-item-title{margin-bottom:18px}
.tl-pills{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;align-items:stretch;
  gap:8px;width:100%;
}
.tl-pill{
  font-family:'Poppins',sans-serif;
  font-size:.74rem;font-weight:500;
  line-height:1.4;color:var(--navy-deep);
  text-align:center;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(46,93,168,.08);
  border:0;
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
.tl-row:hover .tl-pill{
  background:rgba(46,93,168,.13);
  color:var(--navy-deep);
}

/* ---------- CTA strip (faixa full-width abaixo da timeline) ---------- */
.cta-strip{
  /* full-bleed: escape o .container e ocupa a largura inteira;
     consome a padding-bottom da section para encostar na próxima */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-top:112px;
  margin-bottom:-88px;
  position:relative;
  color:#fff;
  background-color:var(--navy-deep);
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:40px 40px;
  background-position:0 0;
  height:200px;
  overflow:hidden;
}
.cta-strip-inner{
  width:100%;
  max-width:1000px;
  height:100%;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:48px;
}
.cta-strip-mark{
  flex:0 0 auto;
  height:100%;
  display:flex;
  align-items:center;
}
.cta-strip-logo{
  display:block;
  height:200px;
  width:auto;
  aspect-ratio:593 / 1080;
}
.cta-strip-copy{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.cta-strip-title{
  color:#fff;
  margin:0 0 10px;
  max-width:22ch;
  font-size:clamp(1.45rem, 2.2vw, 1.85rem);
  line-height:1.18;
}
.cta-strip-sub{
  font-size:.95rem;font-weight:400;
  color:rgba(255,255,255,.72);
  line-height:1.55;max-width:54ch;
  margin:0;
}
.cta-strip-btn{
  flex:0 0 auto;
  align-self:center;
  width:235px;
  height:80px;
  padding:0 22px;
  border-radius:999px;
  font-size:1.02rem;font-weight:600;
  letter-spacing:-.005em;
  line-height:1.25;
  white-space:normal;
  text-align:left;
  box-shadow:0 10px 28px rgba(201,123,63,.28);
  gap:12px;
  justify-content:flex-start;
}
.cta-strip-btn-lbl{display:inline-block}
.cta-strip-btn [data-icon]{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:35px;height:35px}
.cta-strip-btn [data-icon] svg,
.cta-strip-btn svg{width:35px;height:35px;stroke-width:1.6}
.cta-strip-results{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:18px;
  border-left:1px solid rgba(255,255,255,.10);
  padding-left:40px;
}
.cta-strip-results li{
  display:flex;align-items:center;gap:14px;
}
.cta-strip-results .ico{
  /* icon sits directly on the background — no circle, no fill */
  width:30px;height:30px;
  background:none;border:0;border-radius:0;
  color:var(--amber);
  display:grid;place-items:center;flex:0 0 auto;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.20));
}
.cta-strip-results .ico svg{width:28px;height:28px;stroke-width:1.5}
.cta-strip-results .lbl{
  font-size:.95rem;font-weight:500;color:#fff;letter-spacing:.005em;
}

@media (max-width:860px){
  .cta-strip{margin-top:80px;height:auto}
  .cta-strip-inner{
    flex-direction:column;
    align-items:center;
    gap:34px;
    padding:0 24px 40px;
    text-align:center;
  }
  .cta-strip-mark{
    height:150px;
    margin-left:0;
    align-self:center;
  }
  .cta-strip-logo{height:150px}
  .cta-strip-copy{align-items:center;text-align:center}
  .cta-strip-title{max-width:none;font-size:2.1rem;line-height:1.18}
  .cta-strip-sub{margin:0 auto;max-width:42ch}
  .cta-strip-btn{
    align-self:center;
    padding:14px 24px;
    white-space:normal;
    text-align:left;
    max-width:100%;
  }
  .cta-strip-btn-lbl{line-height:1.25}
  .cta-strip-btn-lbl br{display:inline}
}
@media (max-width:680px){
  .cta-strip{margin-bottom:-64px}
}
@media (max-width:480px){
  .cta-strip{margin-top:64px}
  .cta-strip-inner{padding:0 20px 52px;gap:38px}
  .cta-strip-mark{margin-left:0;height:128px}
  .cta-strip-logo{height:128px}
  .cta-strip-title{font-size:1.95rem}
  .cta-strip-sub{font-size:.92rem}
}

/* responsive: tablets/mobile — no intermediate vertical-centered timeline.
   The mobile accordion form (defined further down in its own @media block) takes over directly. */
@media (max-width:980px){
  .methodology{margin-top:80px}
  .results-row{
    grid-template-columns:1fr;
    max-width:420px;
    margin-bottom:56px;
    gap:0;
  }
  .results-row .result{
    padding:18px 4px;
    border-left:none;
    gap:16px;
  }
  .results-row .result + .result{
    border-left:none;
    border-top:1px solid rgba(15,35,71,.10);
  }
  .results-row .result:first-child{padding-top:0}
  .results-row .result:last-child{padding-bottom:0}
  .results-row .ico{width:40px;height:40px}
  .results-row .ico svg{width:38px;height:38px}
}

/* ---------- Portfolio ---------- */
.portfolio{background:#fff}
.portfolio .section-head{text-align:left;max-width:none;margin:0 0 48px}
.portfolio .section-head .lead{margin-left:0;max-width:62ch}
.portfolio .carousel-track-wrap{overflow:hidden}
/* Portfolio: arrows beside cards (same pattern as services — fully outside the page edge) */
.portfolio-carousel .carousel-stage{position:relative;display:flex;align-items:center;gap:18px}
.portfolio-carousel .carousel-stage .carousel-track-wrap{flex:1 1 auto;min-width:0}
.portfolio-carousel .carousel-btn.side{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:46px;height:46px;
  box-shadow:0 1px 2px rgba(15,23,42,.06);
}
.portfolio-carousel .carousel-btn.side.p-prev{left:-72px}
.portfolio-carousel .carousel-btn.side.p-next{right:-72px}
@media (max-width:1344px){
  .portfolio-carousel .carousel-btn.side.p-prev{left:-22px}
  .portfolio-carousel .carousel-btn.side.p-next{right:-22px}
}
@media (max-width:1280px){
  .portfolio-carousel .carousel-btn.side.p-prev{left:6px}
  .portfolio-carousel .carousel-btn.side.p-next{right:6px}
}
.portfolio-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);
  gap:24px;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.portfolio-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:3/4;cursor:pointer;background:transparent;
  border:none;
}
.portfolio-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.portfolio-card .label{
  position:absolute;left:22px;right:22px;bottom:22px;
  display:flex;flex-direction:column;gap:4px;color:#fff;z-index:2;
  transition:transform .25s ease;
}
.portfolio-card .client{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);font-weight:600;
  opacity:0;transition:opacity .15s ease;
}
.portfolio-card .title{
  font-size:1.05rem;font-weight:600;line-height:1.3;
  transform:scale(0.82);
  transform-origin:bottom left;
}

.portfolio-card .seemore{
  position:absolute;left:22px;bottom:22px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:.72rem;font-weight:600;color:#fff;
  text-transform:uppercase;letter-spacing:.14em;
  opacity:0;transition:opacity .15s ease;z-index:2;
}
.portfolio-card .seemore svg{width:14px;height:14px}
.portfolio-card::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top, rgba(14,45,87,.85) 0%, rgba(14,45,87,.20) 33%, rgba(14,45,87,.15) 50%, rgba(14,45,87,.15) 100%);
  transition:opacity .25s ease;
}
.portfolio-card::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(14,45,87,.92);
  opacity:0;transition:opacity .2s ease;
}
.portfolio-card:hover img{transform:scale(1.04)}
.portfolio-card:hover::before{opacity:0}
.portfolio-card:hover::after{opacity:1}
.portfolio-card:hover .client{opacity:1}
.portfolio-card:hover .title{transform:scale(1)}
.portfolio-card:hover .label{transform:translateY(-32px)}
.portfolio-card:hover .seemore{opacity:1}

/* clients carousel */
.clients{margin-top:80px;padding-top:8px}
.clients-head{text-align:center;max-width:680px;margin:0 auto 44px}
.clients-head .h-section{margin:0 0 12px}
.clients-head .lead{margin:0 auto;color:var(--muted)}
.logos-strip{overflow:hidden;position:relative;mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);-webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)}
.logos-track{display:flex;gap:72px;width:max-content;animation:scroll 60s linear infinite;align-items:center}
@media (hover:hover){
  .logos-track:hover{animation-play-state:paused}
}
.logos-track .logo{
  flex:0 0 auto;height:56px;display:flex;align-items:center;justify-content:center;
  filter:grayscale(1) opacity(.55);
  transition:filter .4s ease, transform .5s ease;
}
.logos-track .logo img{max-height:100%;width:auto;max-width:160px;object-fit:contain}
.logos-track .logo:hover{filter:grayscale(0) opacity(1)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 36px))}}

/* ---------- About ---------- */
.about{
  background:linear-gradient(180deg, rgba(10,34,68,.88), rgba(10,34,68,.94)), url('assets/sobre_fundo_01.webp') center/cover fixed no-repeat;
  color:#fff;
  padding:112px 0;
}
.about h2{color:#fff}
.about .section-head .h-section{color:#fff}
.about .lead{color:rgba(255,255,255,.78)}
.about-eyebrow{display:inline-block;margin-bottom:14px}
.about-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:72px;align-items:center}
.about-left{display:flex;flex-direction:column}
.about-left .h-section{margin:0 0 28px;text-align:left;font-size:clamp(2rem, 3.4vw, 2.75rem)}
.about-text{margin-top:0}
.about-text p{color:rgba(255,255,255,.84);font-size:.95rem;line-height:1.75;margin:0 0 18px;max-width:60ch}
.about-text p:last-child{margin-bottom:0}
.about-pills{display:flex;flex-direction:column;gap:16px;margin-top:8px;--pill-h:84px}
.pill{
  display:flex;align-items:center;gap:20px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  border:none;
  padding:0 30px 0 0;
  height:var(--pill-h);
  border-radius:9999px;
  transition:transform .3s ease, background .3s ease;
}
.pill:hover{background:rgba(255,255,255,.10);transform:translateX(10px)}
.pill .ico{
  width:var(--pill-h);height:var(--pill-h);
  border-radius:50%;
  background:#2F5DA8;color:#fff;
  display:grid;place-items:center;
  flex:0 0 auto;
}
.pill .ico svg{width:26px;height:26px;stroke-width:1.6}
.pill .text{display:flex;flex-direction:column;gap:5px;min-width:0;justify-content:center}
.pill h4{font-size:1.05rem;font-weight:600;color:#fff;margin:0;letter-spacing:.01em;line-height:1.25}
.pill p{
  font-size:.85rem;color:rgba(255,255,255,.72);margin:0;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* boost specificity to win over .reveal-stagger.in > * transform */
.reveal-stagger.in > .pill:hover{transform:translateX(10px)}

.mvv{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:120px}
.mvv-card{
  position:relative;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  border:none;
  border-radius:var(--radius-lg);padding:60px 28px 32px;
  text-align:center;
  transition:transform .3s ease;
}
/* boost specificity to win over .reveal-stagger.in > * transform */
.reveal-stagger.in > .mvv-card:hover,
.mvv .mvv-card:hover{transform:translateY(-6px)}
.mvv-card .ico{
  width:64px;height:64px;border-radius:50%;
  background:var(--amber);color:#fff;
  display:grid;place-items:center;
  border:none;
  position:absolute;top:-32px;left:50%;
  transform:translateX(-50%);
  transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.mvv-card:hover .ico{
  /* counter the card's translateY(-6px) so the circle stays visually still while it scales */
  transform:translateX(-50%) translateY(6px) scale(1.14);
  box-shadow:0 0 28px rgba(196,109,54,.55), 0 0 12px rgba(229,162,108,.45);
  filter:brightness(1.08);
}
.mvv-card .ico svg{width:26px;height:26px}
.mvv-card h3{color:#fff;font-size:1.1rem;margin:0 0 14px;font-weight:600;letter-spacing:.01em}
.mvv-card p{font-size:.9rem;color:rgba(255,255,255,.84);margin:0;line-height:1.65;text-wrap:pretty}
.mvv-card ul{padding:0;margin:0 auto;list-style:none;display:inline-block;text-align:left}
.mvv-card ul li{font-size:.9rem;color:rgba(255,255,255,.92);padding:6px 0;display:flex;align-items:center;gap:10px}
.mvv-card ul li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);flex:0 0 auto}

/* ---------- Contact ---------- */
.contact{background:var(--bg-alt)}
.contact .container{position:relative}
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start}
.contact-left .eyebrow{margin-bottom:14px}
.contact-left h2{margin-bottom:18px}
.contact-left .lead{margin:0 0 36px;font-size:1rem;color:var(--muted);max-width:38ch}
.contact-info{display:flex;flex-direction:column;gap:22px;margin:0}
.info-item{
  display:flex;align-items:center;gap:16px;
  background:transparent;border:none;padding:0;
  transition:transform .25s ease;
}
.info-item:hover{transform:translateX(3px);box-shadow:none}
.info-item .ico{
  width:42px;height:42px;border-radius:50%;background:rgba(196,109,54,.10);color:var(--amber);
  display:grid;place-items:center;flex:0 0 auto;
}
.info-item .ico svg{width:18px;height:18px;display:block}
.info-item .value{font-size:1rem;font-weight:500;color:var(--navy)}
.info-item .value a{color:var(--navy);transition:color .2s ease}
.info-item .value a:hover{color:var(--amber)}
.info-item .sub{font-size:.82rem;color:var(--muted);margin-top:2px}

.form-card{
  background:#fff;border-radius:var(--radius-lg);padding:36px;
  box-shadow:var(--shadow-md);border:1px solid var(--line);
}
.form-card h3{font-size:1.25rem;font-weight:600;margin:0 0 4px;color:var(--navy-deep)}
.form-card .form-sub{font-size:.875rem;color:var(--muted);margin:0 0 24px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.field{position:relative;display:flex;flex-direction:column}
.field label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:6px}
.field label .req{color:var(--amber);margin-left:2px;font-weight:600;opacity:.85}
.field input, .field textarea{
  font-family:inherit;font-size:.92rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);
  padding:11px 14px;border-radius:8px;
  transition:border .2s ease, box-shadow .2s ease;outline:none;width:100%;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus, .field textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-08)}
.field.error input, .field.error textarea{border-color:#D63B3B;box-shadow:0 0 0 3px rgba(214,59,59,.08)}
.field .err{font-size:.72rem;color:#D63B3B;margin-top:5px;display:none}
.field.error .err{display:block}
/* placeholders */
.field input::placeholder, .field textarea::placeholder{color:#A3ABBA;font-weight:400;opacity:1}
/* submit smaller, right-aligned, orange */
.form-card .submit-row{display:flex;justify-content:flex-end;margin-top:18px}
.form-card .submit{
  width:auto;background:var(--amber);color:#fff;font-weight:600;
  padding:10px 22px;font-size:.85rem;
}
.form-card .submit:hover{background:#B36130;box-shadow:var(--shadow-md)}
.form-success{
  display:none;background:rgba(34,167,109,.08);border:1px solid rgba(34,167,109,.3);
  color:#1e7a4d;padding:14px;border-radius:10px;font-size:.88rem;margin-top:14px;text-align:center;
}
.form-success.show{display:block}
.form-error{
  display:none;background:rgba(200,50,50,.08);border:1px solid rgba(200,50,50,.3);
  color:#a02020;padding:14px;border-radius:10px;font-size:.88rem;margin-top:14px;text-align:center;
}
.form-error.show{display:block}
.char-counter{
  display:block;text-align:right;font-size:.78rem;color:#9aa0aa;margin-top:4px;
}
.char-counter.near-limit{color:#c06000;}

/* ---------- Footer ---------- */
.footer{background:var(--navy-deep);color:rgba(255,255,255,.74);padding:56px 0 22px;font-size:.875rem}
.footer-stack{display:flex;flex-direction:column;align-items:center;gap:28px;margin-bottom:36px}
.footer-brand{display:inline-flex}
.footer-brand img{height:38px;width:auto;display:block}
.footer-nav{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:36px;
}
.footer-nav a{
  color:rgba(255,255,255,.78);font-size:.88rem;font-weight:500;letter-spacing:.01em;
  transition:color .25s ease;
}
.footer-nav a:hover{color:var(--amber)}
.footer-contact{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px;
}
.footer-contact .fc-item{
  display:inline-flex;align-items:center;gap:10px;
  color:rgba(255,255,255,.78);font-size:.88rem;
  transition:color .25s ease;
}
.footer-contact .fc-item:hover{color:var(--amber)}
.footer-contact .fc-item svg{width:14px;height:14px;color:var(--amber);flex:0 0 auto}
.fc-sep{
  display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--amber);opacity:.85;flex:0 0 auto;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-top:22px;
  display:flex;justify-content:center;align-items:center;
  flex-wrap:wrap;gap:14px;
}
.footer-bottom .legal{font-size:.78rem;color:rgba(255,255,255,.5)}

/* ---------- Floating Whatsapp ---------- */
.wa-fab{
  position:fixed;bottom:24px;right:24px;z-index:40;
  width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(37,211,102,.4);
  transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.wa-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 32px rgba(37,211,102,.5)}
.wa-fab svg{width:30px;height:30px}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(15,23,40,.65);backdrop-filter:blur(4px);
  z-index:100;display:none;align-items:center;justify-content:center;
  padding:24px;
}
.modal-overlay.open{display:flex;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  background:#fff;border-radius:16px;
  width:760px;max-width:100%;
  height:min(950px, 94vh);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  animation:slideUp .35s cubic-bezier(.22,.61,.36,1);
}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal .close{
  position:absolute;top:16px;right:16px;z-index:2;
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.95);
  display:grid;place-items:center;color:var(--ink);
  box-shadow:var(--shadow-sm);transition:all .2s ease;
}
.modal .close:hover{background:var(--navy);color:#fff;transform:rotate(90deg)}
.modal .close svg{width:18px;height:18px}
.modal .hero-img{flex:0 0 auto;aspect-ratio:3/1;background:#dfe3eb;overflow:hidden;position:relative}
.modal.is-project .hero-img{aspect-ratio:16/9}
.modal .hero-img img{width:100%;height:100%;object-fit:cover}
.modal .body{flex:1 1 auto;overflow-y:auto;padding:36px 40px 40px;scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.22) transparent}
.modal .body::-webkit-scrollbar{width:8px}
.modal .body::-webkit-scrollbar-button{display:none;width:0;height:0}
.modal .body::-webkit-scrollbar-track{background:transparent;margin:8px 0}
.modal .body::-webkit-scrollbar-thumb{background:rgba(15,23,42,.22);border-radius:4px}
.modal .body::-webkit-scrollbar-thumb:hover{background:rgba(15,23,42,.36)}

/* Project modal: hero carousel */
.modal-carousel{position:relative;overflow:hidden}
.modal-carousel .mc-track{display:flex;width:100%;height:100%;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.modal-carousel .mc-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;display:block}
.modal-carousel .mc-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;
  background:rgba(15,23,40,.55);color:#fff;
  display:grid;place-items:center;border:none;cursor:pointer;
  transition:background .2s ease;z-index:2;
}
.modal-carousel .mc-btn:hover{background:rgba(15,23,40,.82)}
.modal-carousel .mc-btn svg{width:18px;height:18px}
.modal-carousel .mc-prev{left:14px}
.modal-carousel .mc-next{right:14px}
.modal-carousel .mc-dots{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;z-index:2;
}
.modal-carousel .mc-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--navy-deep);
  opacity:.5;cursor:pointer;
  transition:all .2s ease;
  box-shadow:0 0 0 1px rgba(255,255,255,.55);
}
.modal-carousel .mc-dot.active{opacity:1;background:var(--navy);width:24px;border-radius:4px}

/* Project modal: service tags */
.modal .modal-tags{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-bottom:22px;
}
.modal .modal-tags .modal-tag{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.64rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);
  padding:6px 11px 5px;
  border:1px solid rgba(14,45,87,.18);
  border-radius:999px;
  background:rgba(14,45,87,.04);
  line-height:1.2;
}
.modal .body .eyebrow{margin-bottom:10px;color:var(--amber)}
.modal .body h3{font-size:1.55rem;font-weight:600;color:var(--navy-deep);margin:0 0 18px;line-height:1.25;letter-spacing:-.005em}
.modal .body .desc{font-size:.95rem;color:var(--muted);line-height:1.75;margin:0 0 28px}
.modal .body h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);font-weight:700;margin:0 0 14px}
.modal .body ul{list-style:none;padding:0;margin:0;display:grid;gap:0}
.modal .body ul li{
  display:flex;gap:14px;align-items:flex-start;
  font-size:.92rem;line-height:1.6;color:var(--muted);
  padding:9px 0;
  border-bottom:none;
}
.modal .body ul li::before{
  content:"";flex:0 0 auto;
  width:0;height:0;
  border-style:solid;border-width:5px 0 5px 7px;
  border-color:transparent transparent transparent var(--amber);
  margin-top:.55em;
}

body.modal-open{overflow:hidden}

/* ---------- Privacy Policy Modal ---------- */
.privacy-body h3{
  margin-bottom:6px;
}
.privacy-body .privacy-update{
  font-size:.78rem;color:#9aa0aa;
  margin:0 0 28px;letter-spacing:.02em;
}
.privacy-body h4{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);font-weight:700;
  margin:28px 0 12px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.privacy-body h4:first-of-type{margin-top:0;padding-top:0;border-top:none}
.privacy-body p{
  font-size:.93rem;color:var(--muted);line-height:1.75;
  margin:0 0 12px;
}
.privacy-body p:last-child{margin-bottom:0}
.privacy-body strong{color:var(--navy-deep);font-weight:600}
.privacy-body a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.privacy-body a:hover{color:var(--amber)}
.modal .body .privacy-list{
  list-style:none;padding:0;
  margin:8px 0 14px;
  display:grid;gap:0;
}
.modal .body .privacy-list li{
  display:block;
  font-size:.92rem;color:var(--muted);line-height:1.55;
  padding:5px 0 5px 16px;position:relative;
  border-bottom:none;
}
.modal .body .privacy-list li::before{
  content:"";display:block;position:absolute;left:0;top:.72em;
  width:5px;height:5px;border-radius:50%;
  border-style:none;border-width:0;
  background:var(--navy);opacity:.55;
}

/* ---------- Footer privacy link ---------- */
.privacy-link{
  background:none;border:none;padding:0;cursor:pointer;
  font-size:.78rem;color:rgba(255,255,255,.4);font-family:inherit;
  text-decoration:underline;text-underline-offset:3px;
  transition:color .2s;
}
.privacy-link:hover{color:rgba(255,255,255,.75)}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:all .7s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-stagger > *{opacity:0;transform:translateY(16px);transition:all .6s ease}
.reveal-stagger.in > *{opacity:1;transform:translateY(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.15s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.25s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.35s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.45s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.55s}

/* Timeline reveal — surge etapa por etapa, mais lento e nítido */
.tl-stagger > .tl-row{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.tl-stagger.in > .tl-row{opacity:1;transform:translateY(0)}
.tl-stagger.in > .tl-row:nth-child(1){transition-delay:.05s}
.tl-stagger.in > .tl-row:nth-child(2){transition-delay:.35s}
.tl-stagger.in > .tl-row:nth-child(3){transition-delay:.65s}
.tl-stagger.in > .tl-row:nth-child(4){transition-delay:.95s}
.tl-stagger.in > .tl-row:nth-child(5){transition-delay:1.25s}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero{padding:120px 0 60px}
  .hero .container{grid-template-columns:1fr;gap:60px}
  /* clear the icon that protrudes ~26px to the left of each card */
  .hero-cards{grid-template-columns:1fr;gap:14px;padding-left:30px}
  .hero-card{
    min-width:0;
    padding:16px 18px 16px 40px;
    border-radius:16px;
    display:flex;
    flex-direction:column;
    transition:background .3s ease;
  }
  /* compact circular icon, always vertically centered on the full card height */
  .hero-card .ico{
    width:52px;height:52px;
    left:-26px;
  }
  .hero-card .ico svg{width:24px;height:24px}
  /* title row holds the label + chevron, kept on one line */
  .hero-card h3{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:.96rem;
    line-height:1.2;
    white-space:nowrap;
  }
  /* chevron indicator on the right of the title */
  .hero-card h3::after{
    content:"";
    flex:0 0 auto;
    width:16px;height:16px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-position:center;
    background-repeat:no-repeat;
    background-size:16px 16px;
    opacity:.6;
    transition:transform .3s ease, opacity .25s ease;
  }
  .hero-card.is-open h3::after{transform:rotate(180deg);opacity:1}
  .hero-card p{
    display:block;
    -webkit-line-clamp:unset;
    overflow:hidden;
    min-height:0; /* flex item: cancel default min-height:auto so max-height:0 collapses */
    margin:0;
    font-size:.86rem;
    line-height:1.55;
    max-height:0;
    opacity:0;
    padding-top:0;
    transition:max-height .4s cubic-bezier(.22,.61,.36,1), opacity .25s ease, padding-top .35s ease;
  }
  .hero-card.is-open p{
    max-height:360px;
    opacity:1;
    padding-top:12px;
  }
  /* keep the slide-right hover effect off on touch — tap should feel like an expand, not a nudge */
  .hero-card:hover,
  .reveal-stagger.in > .hero-card:hover{transform:none}
  .hero-copy h1{margin:14px 0 28px}
  .hero .h-display{font-size:2.5rem;line-height:1.1}
  /* about: pill description wraps to 2 lines; ico circle centered within the pill's imaginary left half-circle */
  .mob-br{display:inline}
  .about{padding:88px 0}
  .about-pills{--pill-h:104px}
  .pill{
    align-items:center;
    padding:14px 22px 14px 0;
    height:var(--pill-h);
    min-height:0;
    position:relative;
  }
  .pill .ico{
    width:var(--pill-h);
    height:var(--pill-h);
    background:transparent;
    border-radius:0;
    display:grid;
    place-items:center;
    position:relative;
    flex:0 0 auto;
  }
  .pill .ico::before{
    content:"";
    grid-area:1/1;
    width:72px;
    height:72px;
    background:#2F5DA8;
    border-radius:50%;
    align-self:center;
    justify-self:center;
  }
  .pill .ico > *{
    grid-area:1/1;
    align-self:center;
    justify-self:center;
    position:relative;
    z-index:1;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .pill p{
    white-space:normal;
    overflow:hidden;
    text-overflow:clip;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    min-height:calc(.85rem * 1.4 * 2);
  }
  .carousel-track{grid-auto-columns:calc((100% - 24px)/2)}
  .portfolio-track{grid-auto-columns:calc((100% - 24px)/2)}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .mvv{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:48px}
  .footer-contact{flex-direction:column;gap:14px}
  .footer-contact .fc-sep{display:none}
}
@media (max-width:680px){
  section{padding:64px 0}

  /* ---- About pills on mobile: rounded-rectangle, no icon circle, generous internal padding, no hover ---- */
  .about-pills{--pill-h:auto;gap:16px}
  .pill{
    gap:16px;
    padding:22px 22px;
    height:auto;
    border-radius:18px;
  }
  .pill .ico{
    width:44px;
    height:44px;
  }
  /* drop the navy circle behind the icon — icon sits directly on the pill */
  .pill .ico::before{display:none}
  .pill .ico svg{width:28px;height:28px;stroke-width:1.6}
  .pill h4{
    font-size:1rem;
    line-height:1.25;
    margin-bottom:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .pill p{
    font-size:.82rem;
    line-height:1.45;
    -webkit-line-clamp:2;
    min-height:calc(.82rem * 1.45 * 2);
  }
  /* keep <br class="mob-br"> hint as inline so descriptions reliably break to two lines */
  .pill p .mob-br{display:inline}
  /* remove hover effects on mobile (no translateX, no background lift) */
  .pill:hover,
  .reveal-stagger.in > .pill:hover{
    transform:none;
    background:rgba(255,255,255,.06);
  }

  /* clients carousel: speed up the logos marquee on mobile */
  .logos-track{animation-duration:35s}
  /* contact form: center the submit button on mobile */
  .form-card .submit-row{justify-content:center}
  /* footer bottom: stack legal + privacy link vertically, both centered; drop the orange dot */
  .footer-bottom{flex-direction:column;gap:10px;text-align:center}
  .footer-bottom .fc-sep{display:none}
  .footer-bottom .legal{text-align:center}
  /* Evita overflow horizontal do email em telas pequenas */
  .info-item{gap:12px;min-width:0}
  .info-item > div:last-child{min-width:0;flex:1 1 auto}
  .info-item .value{font-size:.9rem;overflow-wrap:anywhere}
  .nav-links{display:none}
  .nav-cta .btn{display:none}
  .menu-toggle{display:flex}
  .hero-stats{gap:20px}
  .hero-stats .item .n{font-size:1.25rem}
  .carousel-track{grid-auto-columns:100%}
  .portfolio-track{grid-auto-columns:100%}
  .form-row{grid-template-columns:1fr}
  .modal .body{padding:24px}
  .modal .body h3{font-size:1.2rem}
  .footer-nav{gap:22px}

  /* ---- Carousels: arrows out of cards, smaller, no circle ---- */
  .services-carousel,
  .portfolio-carousel{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "track track track"
      "prev  dots  next";
    column-gap:6px;
    row-gap:18px;
    align-items:center;
  }
  .services-carousel .carousel-stage,
  .portfolio-carousel .carousel-stage{display:contents;gap:0}
  .services-carousel .carousel-track-wrap,
  .portfolio-carousel .carousel-track-wrap{grid-area:track;min-width:0}
  .services-carousel .carousel-controls,
  .portfolio-carousel .carousel-controls{grid-area:dots;margin-top:0;justify-self:center}
  .services-carousel .carousel-btn.side.prev,
  .portfolio-carousel .carousel-btn.side.p-prev{grid-area:prev;justify-self:start}
  .services-carousel .carousel-btn.side.next,
  .portfolio-carousel .carousel-btn.side.p-next{grid-area:next;justify-self:end}
  .services-carousel .carousel-btn.side,
  .portfolio-carousel .carousel-btn.side{
    position:static;
    transform:none;
    width:32px;height:32px;
    background:transparent;
    border:none;
    box-shadow:none;
    color:var(--navy);
    left:auto;right:auto;
  }
  .services-carousel .carousel-btn.side:hover,
  .portfolio-carousel .carousel-btn.side:hover{
    background:transparent;color:var(--amber);border:none;
  }
  .services-carousel .carousel-btn.side svg,
  .portfolio-carousel .carousel-btn.side svg{width:24px;height:24px}

  /* ---- Portfolio cards on mobile: no hover, label + “ver detalhes” shown at rest ---- */
  .portfolio-card{cursor:pointer}
  .portfolio-card .title{transform:none;font-size:1.05rem;line-height:1.3}
  .portfolio-card .label{transform:translateY(-32px)}
  .portfolio-card .seemore{opacity:1}
  .portfolio-card .client{opacity:1}
  .portfolio-card::after{display:none}
  .portfolio-card:hover img{transform:none}
  .portfolio-card:hover::before{opacity:1}
  .portfolio-card:hover::after{opacity:0}
  .portfolio-card:hover .label{transform:translateY(-32px)}
  /* same gradient family as desktop (linear-gradient to top, navy fading up),
     tuned with stronger lower stops so title + “ver detalhes” stay legible at rest */
  .portfolio-card::before{
    background:linear-gradient(to top,
      rgba(14,45,87,.92) 0%,
      rgba(14,45,87,.72) 28%,
      rgba(14,45,87,.30) 60%,
      rgba(14,45,87,.15) 100%);
  }

  /* ---- CTA banner: more breathing room above and below the WhatsApp button ---- */
  .cta-strip-inner{padding:0 24px 60px;gap:44px}
  .cta-strip-btn{margin-top:6px}

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

  /* ---- Timeline → accordion on mobile (applies from tablet down, replacing the old intermediate form) ---- */
  .methodology{margin-top:64px}
  .tl-wrap{
    grid-template-columns:1fr;
    gap:0;
    max-width:380px;
    margin:0 auto;
    padding-left:0;
  }
  /* remove the original full-length spine — we draw per-row segments so the line stops at the last circle */
  .tl-wrap::before{display:none}
  .tl-row{
    position:relative;
    display:grid;
    /* shifted left: smaller num + tighter gaps free up space for pills on the right of the spine */
    grid-template-columns:22px 44px 1fr 20px;
    grid-template-areas:
      "num circ title chev"
      ".   .    desc  desc";
    column-gap:10px;
    row-gap:0;
    align-items:center;
    text-align:left;
    padding:24px 0;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  /* spine segment from this circle's center down to next row's circle center; hidden on last row.
     left = col1(22) + gap(10) + half_circle(22) - half_width(2) = 52 */
  .tl-row::after{
    content:"";
    position:absolute;
    left:52px;
    top:46px; /* padding-top(24) + half_circle(22) */
    width:4px;
    height:100%;
    background:linear-gradient(180deg, rgba(46,93,168,.55), rgba(14,45,87,.55));
    z-index:0;
    pointer-events:none;
  }
  .tl-row:last-child::after{display:none}
  /* chevron expand icon */
  .tl-row::before{
    content:"";
    grid-area:chev;
    width:16px;height:16px;
    align-self:center;
    justify-self:center;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2D57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-position:center;
    background-repeat:no-repeat;
    background-size:16px 16px;
    opacity:.5;
    transition:transform .25s ease, opacity .25s ease;
    z-index:1;
  }
  .tl-row.is-open::before{transform:rotate(180deg);opacity:1}
  .tl-num{
    grid-area:num;
    margin:0;
    font-size:.82rem;
    font-weight:700;
    color:var(--navy);
    opacity:.55;
    text-align:right;
    line-height:1;
  }
  .tl-row.is-open .tl-num{opacity:1;color:var(--amber)}
  .tl-row.is-open .tl-item-title{color:var(--amber)}
  .tl-circle{
    grid-area:circ;
    width:44px;height:44px;
    margin:0;
    justify-self:center;
    box-shadow:0 4px 14px rgba(15,35,71,.22), 0 0 0 4px rgba(246,247,250,.95);
    z-index:1;
  }
  /* mobile hover/open: just grow the circle slightly — no extra ring behind the icon */
  .tl-row.is-open .tl-circle{
    transform:scale(1.08);
    box-shadow:0 4px 14px rgba(15,35,71,.22), 0 0 0 4px rgba(246,247,250,.95);
    filter:none;
  }
  .tl-circle svg{width:22px;height:22px;stroke-width:1.8}
  .tl-content{display:contents;max-width:none}
  .tl-content-pills{display:contents}
  .tl-content-pills .tl-item-title{margin-bottom:0}
  .tl-item-title{
    grid-area:title;
    font-size:1.05rem;
    font-weight:600;
    margin:0;
    line-height:1.2;
    letter-spacing:-.005em;
  }
  /* pills hidden by default; revealed when row is expanded.
     they sit on the right side of the spine (cols title+chev), never overlapping the timeline line */
  .tl-pills{
    grid-area:desc;
    margin:14px 0 6px;
    gap:8px;
    align-items:stretch;
    display:none;
  }
  .tl-row.is-open .tl-pills{display:flex}
  .tl-pill{
    text-align:left;
    font-size:.74rem;
    padding:9px 14px;
    line-height:1.45;
    border-radius:999px;
  }
  /* hide desc-text variant on mobile (timeline uses pills variant only) */
  .tl-item-desc{display:none}

  /* ---- WhatsApp FAB on mobile: smaller + hidden until past the hero ---- */
  .wa-fab{width:48px;height:48px;bottom:18px;right:18px;
    opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);pointer-events:none}
  .wa-fab svg{width:22px;height:22px}
  body.past-hero .wa-fab{opacity:1;visibility:visible;transform:none;pointer-events:auto}

  /* ---- HERO on mobile: title up top, the two buttons sitting lower and a bit larger ---- */
  .hero{
    position:static;
    min-height:100vh;
    /* slim bottom padding so the CTAs sit close to the bottom of the section */
    padding:96px 0 32px;
    align-items:stretch;
  }
  .hero .container{gap:0}
  .hero-copy{
    min-height:calc(100vh - 128px);
    display:flex;
    flex-direction:column;
  }
  /* title positioned in the upper third of the available space — not floating dead-center */
  .hero-copy h1{
    flex:0 0 auto;
    margin:0;
    padding-top:14vh;
  }
  /* two stacked, full-width pill buttons — pushed to the bottom with auto top margin */
  .hero-actions{
    margin-top:auto;
    flex:0 0 auto;
    padding-top:32px;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }
  .hero-actions .btn{
    width:100%;
    justify-content:center;
    padding:18px 22px;
    font-size:1.02rem;
    border-radius:999px;
  }
  /* cards removed entirely on mobile */
  .hero-cards{display:none}
  .hero-explore{display:none}

  /* ---- Contact form on mobile: always visible (skip the reveal-on-scroll fade) ---- */
  .contact .reveal{opacity:1;transform:none;visibility:visible}
  /* ---- Hero copy on mobile: skip the reveal-on-scroll fade (always visible) ---- */
  .hero-copy.reveal{opacity:1;transform:none;visibility:visible}

  /* ---- Clients logos on mobile: full-color, press-to-pause ---- */
  .logos-track .logo{filter:none;opacity:1}
  .logos-track .logo:hover{filter:none;opacity:1}
  .logos-track.is-pressed{animation-play-state:paused}
}

/* ---- Contact info on very small phones: shrink the icon circles uniformly
   so the email never wraps. all `.info-item .ico` share the same rule —
   phone, email, etc. end up identical in size.
   Font sizes are inherited from the (max-width:680px) rule (.9rem) — not overridden. ---- */
@media (max-width:400px){
  .info-item{gap:10px}
  .info-item .ico{width:34px;height:34px}
  .info-item .ico svg{width:15px;height:15px}
}
@media (max-width:680px){

  /* ---- MVV: horizontal carousel with peek of next card ---- */
  .mvv{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
    gap:12px;
    margin-top:80px;
    margin-inline:-24px;
    /* top padding leaves room for icon hanging above each card (top:-32px).
       horizontal padding of 10vw centers each card while letting the
       neighbouring card(s) peek ~10vw on each side. */
    padding:46px 10vw 16px;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
    cursor:grab;
  }
  .mvv:active{cursor:grabbing}
  .mvv::-webkit-scrollbar{display:none;width:0;height:0}
  .mvv-card{
    flex:0 0 80vw;
    scroll-snap-align:center;
    /* keep desktop padding so the icon overlap looks identical */
    padding:60px 26px 30px;
    touch-action:pan-x;
  }
  /* keep desktop icon style — circle straddles the top edge */
  .reveal-stagger.in > .mvv-card:hover,
  .mvv .mvv-card:hover{transform:none}
  .mvv-card:hover .ico{
    transform:translateX(-50%) scale(1.08);
  }
}