:root{
  --cor-primaria:#0f172a;--cor-secundaria:#e8796f;--cor-terciaria:#0ea5e9;
  --cor-clara:#f9fafb;--cor-escura:#1f2937;
  --ok:#10b981;--alert:#f59e0b;--error:#ef4444;
  --radius:16px;--shadow:0 10px 30px rgba(0,0,0,.15);
  --spacing:clamp(16px,2vw,28px);--container:1200px;
  --font-display:"Montserrat",system-ui,sans-serif;
  --font-base:"Open Sans",ui-sans-serif,system-ui;
}
@media (prefers-color-scheme: light){:root{color-scheme:light;}}
@media (prefers-color-scheme: dark){:root{color-scheme:dark;}}
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--cor-primaria);color:var(--cor-clara);font:16px/1.6 var(--font-base);}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:auto;padding:0 var(--spacing)}
.site-header{position:sticky;top:0;background:rgba(15,23,42,.8);backdrop-filter:blur(8px);z-index:10;border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--cor-clara);text-decoration:none}
.menu{display:flex;gap:14px;list-style:none;margin:0;padding:0}
.menu a{color:var(--cor-clara);text-decoration:none;padding:8px 10px;border-radius:10px}
.menu a:focus,.menu a:hover{background:rgba(255,255,255,.08)}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:22px}
.btn{border:0;border-radius:12px;padding:12px 18px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn.primary{background:var(--cor-secundaria);color:#fff;box-shadow:var(--shadow)}
.btn.secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.2)}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.2);padding:8px 10px}
.section{padding:calc(var(--spacing)*2) 0}
.section-head{margin-bottom:18px}
.section-head h2{font-family:var(--font-display);font-size:clamp(20px,3vw,32px);margin:0 0 6px}
.lead{opacity:.9}
.grid{display:grid;gap:var(--spacing)}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.grid.four,.grid.three{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid.four,.grid.three,.grid.two{grid-template-columns:1fr}/*.menu{display:none}*/.nav-toggle{display:block}}
.card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:18px;box-shadow:0 1px 0 rgba(255,255,255,.05);transform:translateY(0);transition:transform .25s ease,box-shadow .25s ease,background .25s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.icon-card .icon{font-size:28px;margin-bottom:8px}
.hero{position:relative;isolation:isolate;padding:100px 0 70px;overflow:hidden}
.hero h1{font-family:var(--font-display);font-size:clamp(28px,5vw,48px);margin:0 0 10px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.hero-bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(600px 200px at 10% 20%, rgba(232,121,111,.15), transparent 60%),
  radial-gradient(500px 200px at 80% 10%, rgba(14,165,233,.18), transparent 60%),
  radial-gradient(500px 200px at 50% 100%, rgba(255,255,255,.06), transparent 60%);
}
.values{padding-left:18px}
.kpis .kpi{display:flex;flex-direction:column;align-items:center;gap:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:20px}
.kpis .kpi span{font-family:var(--font-display);font-size:clamp(22px,5vw,36px)}
.chip{background:transparent;border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:20px;padding:8px 12px;cursor:pointer}
.chip.is-active,.chip:hover{background:rgba(255,255,255,.08)}
.project .tag{opacity:.8;font-size:.9rem;margin:.2rem 0 .6rem}
.services{display:grid;gap:8px;padding-left:18px}
.carousel{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04)} 
.carousel-track{display:flex;gap:40px;padding:18px;animation:slide var(--carousel-duration,28s) linear infinite;will-change:transform}
.carousel:hover .carousel-track,.carousel:focus-within .carousel-track{animation-play-state:paused}
.carousel li{white-space:nowrap;opacity:.8}
@keyframes slide{
  0%,12%{transform:translateX(0)} /* pausa inicial para ler o 1º item */
  88%,100%{transform:translateX(var(--carousel-end,-50%))} /* pausa final para suavizar o loop */
}
.site-footer{border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);padding:22px 0}
.footer-grid{display:grid;gap:12px;align-items:center;grid-template-columns:1fr auto auto}
.footer-grid a{color:#fff;opacity:.9;margin-right:14px;text-decoration:none}
.brandline{display:flex;align-items:center;gap:8px}
/* Form */
label{display:flex;flex-direction:column;gap:6px}
input,textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:12px;padding:12px;outline:0}
input:focus,textarea:focus{border-color:var(--cor-terciaria);box-shadow:0 0 0 3px rgba(14,165,233,.2)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--error)}
.actions{display:flex;gap:12px;align-items:center}
#formStatus{min-height:24px}
/* Loader */
#loader{position:fixed;inset:0;pointer-events:none;opacity:0;background:rgba(15,23,42,.6);backdrop-filter:blur(2px);transition:opacity .2s}
#loader.show{opacity:1}
/* Light theme */
html[data-theme="light"] body{background:var(--cor-clara);color:#0b1220}
html[data-theme="light"] .site-header{background:rgba(249,250,251,.8);border-bottom-color:rgba(0,0,0,.06)}
html[data-theme="light"] .menu a{color:#0b1220}
html[data-theme="light"] .btn.secondary,.btn.ghost{color:inherit}
html[data-theme="light"] .card{background:#fff;border-color:rgba(0,0,0,.06)}
html[data-theme="light"] .carousel{background:#fff;border-color:rgba(0,0,0,.06)}
html[data-theme="light"] input, html[data-theme="light"] textarea{background:#fff;color:#111;border-color:rgba(0,0,0,.12)}


/* Clientes — lista estática minimalista */
.client-list{display:flex;flex-wrap:wrap;gap:18px 26px;list-style:none;margin:0;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);padding:18px 22px}
.client-list li{position:relative;padding-left:14px;opacity:.9}
.client-list li::before{content:"•";position:absolute;left:0;top:0;opacity:.6}
html[data-theme="light"] .client-list{background:#fff;border-color:rgba(0,0,0,.06)}

.client-list a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.client-list a:hover,.client-list a:focus{border-bottom-color:currentColor;outline:none}
/* Consultoria IA */
.consultoria .badge{
  background:var(--cor-secundaria);color:#fff;
  padding:4px 8px;border-radius:8px;font-size:.8rem;margin-left:6px}
.tier{display:flex;flex-direction:column;gap:14px}
.tier h3{margin:0;font-size:clamp(18px,2.5vw,24px)}
.price{font-family:var(--font-display);
  font-size:clamp(22px,5vw,32px);margin:0}
.price span{color:var(--cor-terciaria)}
.tier ul{padding-left:18px;line-height:1.45}
.btn.full{width:100%;text-align:center}
.tier.highlight{border:2px solid var(--cor-terciaria)}
.guarantee{margin-top:22px;font-size:.9rem;opacity:.9}
html[data-theme="light"] .tier.highlight{border-color:var(--cor-primaria)}
/* Destaque no menu para a Consultoria */
.menu a.cta-menu{
  background:var(--cor-secundaria);
  color:#fff !important;
  padding:8px 14px;
  border-radius:12px;
  font-weight:600;
}
.menu a.cta-menu:hover,
.menu a.cta-menu:focus{
  background:var(--cor-terciaria);
}
html[data-theme="light"] .menu a.cta-menu{
  color:#fff !important;
}
/* ======= MOBILE MENU OFF-CANVAS ======= */
/* ======= FIX: OFF-CANVAS FULL-WIDTH ======= */
@media (max-width:620px){
  .site-header{z-index:40}               /* garante topo */
  .menu{
    position:fixed !important;           /* tira influência do .container */
    top:0; left:0; width:100vw; height:100vh;
    flex-direction:column;
    gap:22px;
    background:var(--cor-primaria);
    padding:84px 24px 40px;              /* 64px header + 20px respiro */
    transform:translateX(-100%);
    transition:transform .3s ease;
    display:flex !important;             /* override qualquer display:none */
    overflow-y:auto;                     /* scroll interno se lista crescer */
    z-index:45;                          /* acima do header */
  }
  .menu.open{ transform:translateX(0) }

  .menu li{width:100%}
  .menu a{display:block;width:100%;padding:14px;font-size:1.15rem}
  body.menu-open{overflow:hidden}        /* trava fundo */
}/* ======= FIX: OFF-CANVAS FULL-WIDTH ======= */
@media (max-width:620px){
  .site-header{z-index:40}               /* garante topo */
  .menu{
    position:fixed !important;           /* tira influência do .container */
    top:0; left:0; width:100vw; height:100vh;
    flex-direction:column;
    gap:22px;
    background:var(--cor-primaria);
    padding:84px 24px 40px;              /* 64px header + 20px respiro */
    transform:translateX(-100%);
    transition:transform .3s ease;
    display:flex !important;             /* override qualquer display:none */
    overflow-y:auto;                     /* scroll interno se lista crescer */
    z-index:45;                          /* acima do header */
  }
  .menu.open{ transform:translateX(0) }

  .menu li{width:100%}
  .menu a{display:block;width:100%;padding:14px;font-size:1.15rem}
  body.menu-open{overflow:hidden}        /* trava fundo */
}

/* ======= FOOTER – responsivo ======= */
@media (max-width:620px){
  .footer-grid{
    grid-template-columns:1fr;      /* uma coluna */
    text-align:center;
    gap:18px;
  }
  .footer-grid nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px 18px;
  }
  .footer-grid nav a{
    padding:4px 0;
  }
  .brandline{
    justify-content:center;
  }
}