: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;padding-bottom:88px;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.container{padding:calc(var(--spacing)*2) var(--spacing)}
.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}.nav-toggle{display:block}}
@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{display:flex;flex-direction:column;overflow:hidden;padding:0}
.project[hidden]{display:none!important}
.project-media{display:block;position:relative;aspect-ratio:1.95/1;margin:0;padding:8px;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden}
.project-media img{width:100%;height:100%;object-fit:cover;object-position:top left;border-radius:12px}
.project-media-stack{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.9fr);grid-template-rows:1fr 1fr;gap:8px}
.project-media-stack img:first-child{grid-row:1/3}
.project-media-abstract{background:linear-gradient(135deg,rgba(14,165,233,.16),rgba(232,121,111,.13));padding:10px}
.abstract-dashboard{height:100%;display:flex;flex-direction:column;gap:9px;min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(31,41,55,.88));padding:12px;color:#f8fafc}
.abstract-header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.abstract-title{font-family:var(--font-display);font-size:clamp(15px,2vw,21px);line-height:1.1}
.abstract-badge{flex:0 0 auto;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:4px 8px;background:rgba(232,121,111,.18);font-size:.7rem;font-weight:700;line-height:1}
.abstract-chips{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.abstract-chip{border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.08);color:#e0f2fe;font-size:.68rem;font-weight:700;line-height:1;padding:5px 7px;white-space:nowrap}
.abstract-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(58px,.75fr);gap:8px;flex:1;min-height:0}
.abstract-panel{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.07);padding:8px}
.abstract-panel-main{display:flex;flex-direction:column;justify-content:space-between}
.abstract-line{display:block;height:6px;border-radius:999px;background:rgba(255,255,255,.18)}
.abstract-line:nth-child(1){width:72%}
.abstract-line:nth-child(2){width:52%}
.abstract-line:nth-child(3){width:84%}
.abstract-bars{display:flex;align-items:end;gap:6px;height:32px;margin-top:6px}
.abstract-bars span{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,rgba(14,165,233,.9),rgba(16,185,129,.65))}
.abstract-bars span:nth-child(1){height:48%}
.abstract-bars span:nth-child(2){height:76%;background:linear-gradient(180deg,rgba(232,121,111,.9),rgba(245,158,11,.68))}
.abstract-bars span:nth-child(3){height:62%}
.abstract-panel-side{display:grid;align-content:center;gap:8px}
.abstract-dot{display:block;height:12px;border-radius:999px;background:rgba(255,255,255,.16)}
.abstract-dot:nth-child(1){width:78%}
.abstract-dot:nth-child(2){width:100%;background:rgba(14,165,233,.3)}
.abstract-dot:nth-child(3){width:62%;background:rgba(232,121,111,.28)}
.project-body{display:flex;flex:1;flex-direction:column;padding:18px}
.project-body h3{margin:0 0 6px;font-size:clamp(18px,2.2vw,22px);line-height:1.25}
.project .tag{color:var(--cor-terciaria);font-size:.88rem;font-weight:700;margin:.1rem 0 .8rem}
.project-confidential{align-self:flex-start;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(232,121,111,.12);color:#f8fafc;font-size:.76rem;font-weight:700;line-height:1.2;padding:5px 9px}
.project-body p{margin:.45rem 0}
.project-body p:last-child{margin-bottom:0}
.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}
/* Contato via WhatsApp */
.contact-whatsapp{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:clamp(20px,3vw,34px)}
.contact-whatsapp h2{font-family:var(--font-display);font-size:clamp(22px,3vw,34px);margin:0 0 8px}
.contact-whatsapp p{max-width:760px;margin:0;opacity:.92}
.contact-cta{font-size:1.05rem;padding:15px 22px;white-space:nowrap}
.whatsapp-float{position:fixed;right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:35;display:inline-flex;align-items:center;gap:10px;background:#25d366;color:#0b1220;text-decoration:none;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:12px 16px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.28);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.whatsapp-float:hover,.whatsapp-float:focus{background:#2fe173;transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.34)}
.whatsapp-float:focus-visible{outline:3px solid rgba(14,165,233,.75);outline-offset:4px}
.whatsapp-float-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(11,18,32,.14);font-size:.78rem;letter-spacing:0;font-weight:800}
.whatsapp-float-text{line-height: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"] .brand{color:#0b1220}
html[data-theme="light"] .menu a{color:#0b1220}
html[data-theme="light"] .chip{color:#0b1220;border-color:rgba(0,0,0,.18)}
html[data-theme="light"] .chip.is-active,html[data-theme="light"] .chip:hover{background:rgba(15,23,42,.08)}
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"] .project-media{background:rgba(15,23,42,.04);border-bottom-color:rgba(0,0,0,.08)}
html[data-theme="light"] .project-media-abstract{background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(232,121,111,.11))}
html[data-theme="light"] .abstract-dashboard{background:linear-gradient(135deg,#fff,#eef2f7);border-color:rgba(15,23,42,.1);color:#0b1220}
html[data-theme="light"] .abstract-badge{background:rgba(232,121,111,.14);border-color:rgba(15,23,42,.12)}
html[data-theme="light"] .abstract-chip{background:rgba(15,23,42,.05);border-color:rgba(15,23,42,.1);color:#075985}
html[data-theme="light"] .abstract-panel{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.08)}
html[data-theme="light"] .abstract-line{background:rgba(15,23,42,.16)}
html[data-theme="light"] .abstract-dot{background:rgba(15,23,42,.14)}
html[data-theme="light"] .project-confidential{background:rgba(232,121,111,.12);border-color:rgba(15,23,42,.12);color:#7f1d1d}
html[data-theme="light"] .carousel{background:#fff;border-color:rgba(0,0,0,.06)}
html[data-theme="light"] .contact-whatsapp{background:#fff;border-color:rgba(0,0,0,.06)}
html[data-theme="light"] .whatsapp-float{color:#052e16}


/* 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%;justify-content:center;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:900px){
  .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:900px){
  .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){
  body{padding-bottom:82px}
  .contact-whatsapp{align-items:stretch;flex-direction:column}
  .contact-cta{justify-content:center;width:100%;white-space:normal}
  .whatsapp-float{right:14px;bottom:14px;width:48px;height:48px;justify-content:center;padding:0}
  .whatsapp-float-icon{width:28px;height:28px;background:transparent}
  .whatsapp-float-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .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;
  }
  .project-media-abstract{padding:8px}
  .abstract-dashboard{gap:7px;padding:10px}
  .abstract-title{font-size:15px}
  .abstract-badge{font-size:.64rem;padding:4px 7px}
  .abstract-chip{font-size:.62rem;padding:4px 6px}
  .abstract-layout{grid-template-columns:minmax(0,1fr) minmax(52px,.7fr);gap:6px}
  .abstract-panel{padding:7px}
}