/* ==========================================================================
   DEA DIGITAL — Design System (Dark)
   Direção: editorial de performance sobre fundo quase preto. Prova por dado,
   geometria em "pílula" herdada do próprio logo (o encaixe C+D) como
   assinatura visual recorrente. Magenta como acento de ação, navy como
   acento secundário — nunca como cor de fundo/texto nesta versão.
   Display: Fraunces. Body: Manrope. Dados/rótulos: JetBrains Mono.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,600;9..144,700;9..144,900&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* Cor — paleta oficial da marca, reorganizada pro modo dark */
  --c-magenta:     #E10057;
  --c-magenta-dim: #ff2d78;
  --c-navy:        #13376E;
  --c-navy-accent: #4C7FE0;
  --c-charcoal:    #2E364B;
  --c-slate:       #8A93AC;

  --c-bg:          #0A0C10;
  --c-surface:     #14161D;
  --c-surface-2:   #1B1E27;
  --c-text:        #F2F3F6;
  --c-line:        rgba(242,243,246,.08);
  --c-line-strong: rgba(242,243,246,.16);

  /* Tipografia */
  --f-display: 'Fraunces', serif;
  --f-body:    'Manrope', sans-serif;
  --f-mono:    'JetBrains Mono', monospace;

  /* Layout */
  --container-w: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --pill: 999px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

body{
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--f-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--c-magenta); color:#fff;}
:focus-visible{outline:2px solid var(--c-magenta); outline-offset:3px;}

.container{width:100%; max-width:var(--container-w); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);}

/* ==========================================================================
   Tipografia
   ========================================================================== */
h1{font-family:var(--f-h1, var(--f-display)); font-weight:600; line-height:1.08; letter-spacing:-.01em; color:var(--c-text);}
h2,h3,h4{font-family:var(--f-h2, var(--f-display)); font-weight:600; line-height:1.08; letter-spacing:-.01em; color:var(--c-text);}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-btn, var(--f-mono)); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-magenta);
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--c-magenta);}

.h-display{font-size:clamp(2.4rem, 6vw, 5.2rem); font-weight:600;}
.h-section{font-size:clamp(1.9rem, 4vw, 3rem); font-weight:600;}
.h-card{font-size:1.25rem; font-weight:600; font-family:var(--f-h2, var(--f-display)); color:var(--c-text);}
.lede{font-size:clamp(1.05rem, 1.6vw, 1.25rem); color:var(--c-slate); font-weight:400; max-width:640px;}
.body-sm{font-size:.92rem; color:var(--c-slate);}
.text-magenta{color:var(--c-magenta);}
.font-mono{font-family:var(--f-btn, var(--f-mono));}

/* ==========================================================================
   Botões — geometria em pílula, herdada do logo
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px;
  font-family:var(--f-btn, var(--f-mono)); font-size:13px; letter-spacing:.04em;
  border-radius:var(--pill);
  border:1.5px solid transparent;
  transition:all .3s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--c-magenta); color:#fff;}
.btn-primary:hover{background:var(--c-magenta-dim); transform:translateY(-1px); box-shadow:0 8px 24px -6px rgba(225,0,87,.55);}
.btn-ghost{border-color:var(--c-line-strong); color:var(--c-text);}
.btn-ghost:hover{border-color:var(--c-navy-accent); background:var(--c-navy-accent); color:#fff; box-shadow:0 8px 24px -6px rgba(76,127,224,.4);}
.btn i{transition:transform .3s var(--ease);}
.btn:hover i{transform:translateX(4px);}

/* ==========================================================================
   Pílula — o elemento de assinatura.
   ========================================================================== */
.pill-tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:var(--pill);
  background:rgba(225,0,87,.12); color:var(--c-magenta-dim);
  font-family:var(--f-btn, var(--f-mono)); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
}

/* ==========================================================================
   Navbar — preenchimento por sublinhado (sem fundo em pílula)
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:500;
  background:rgba(10,12,16,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-line);
  padding:18px 0;
}
.nav .container{display:flex; align-items:center; justify-content:space-between;}
.nav-logo img{height:36px; width:auto;}
.nav-links{display:flex; align-items:center; gap:8px;}
.nav-links a:not(.btn){
  position:relative;
  font-family:var(--f-btn, var(--f-mono)); font-size:12px; letter-spacing:.04em;
  color:var(--c-slate); padding:10px 14px;
  transition:color .25s var(--ease);
}
.nav-links a:not(.btn)::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px;
  height:2px; background:var(--c-magenta);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav-links a:not(.btn):hover{color:var(--c-text);}
.nav-links a:not(.btn):hover::after{transform:scaleX(1);}
.nav-links a:not(.btn).active{color:var(--c-magenta);}
.nav-links a:not(.btn).active::after{transform:scaleX(1);}
.nav-cta{margin-left:10px; flex-shrink:0;}
.nav-toggle{display:none; background:none; border:0; color:var(--c-text); font-size:22px;}

@media (max-width:991px){
  /* .nav-links não é mais usado no mobile — o bloco abaixo assume esse papel,
     como elemento próprio, anexado direto ao <body> (fora do .nav), eliminando
     de vez qualquer risco de herança de estilo ou bug de containing-block. */
  .nav-links{display:none;}
  .nav-toggle{display:inline-flex;}
}

/* ==========================================================================
   Menu mobile — bloco independente, injetado pelo app.js direto no <body>
   ========================================================================== */
.mobile-menu{
  display:none;
  position:fixed; inset:0; top:71px;
  background:var(--c-bg);
  z-index:600;
  flex-direction:column; justify-content:center; align-items:center; gap:8px;
  padding:24px;
  transform:translateX(100%);
  transition:transform .45s var(--ease);
}
.mobile-menu.open{display:flex; transform:translateX(0);}
.mobile-nav-link{
  font-family:var(--f-btn, var(--f-mono)); font-size:16px; letter-spacing:.04em;
  color:var(--c-slate); padding:16px; text-align:center; width:100%;
  transition:color .25s var(--ease);
}
.mobile-nav-link:hover{color:var(--c-text);}
.mobile-nav-link.active{color:var(--c-magenta);}
.mobile-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; margin-top:16px;
  font-family:var(--f-btn, var(--f-mono)); font-size:13px; letter-spacing:.04em;
  background:var(--c-magenta); color:#fff; border-radius:var(--pill);
  transition:all .3s var(--ease);
}
.mobile-cta:hover{background:var(--c-magenta-dim);}
.mobile-cta i{transition:transform .3s var(--ease);}
.mobile-cta:hover i{transform:translateX(4px);}

/* ==========================================================================
   Sections
   ========================================================================== */
.section{padding:110px 0;}
.section-tight{padding:70px 0;}
.bg-navy{background:linear-gradient(180deg, var(--c-surface), var(--c-bg)); color:var(--c-text); position:relative;}
.bg-navy::before{content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(225,0,87,.10), transparent 65%); pointer-events:none;}
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4{color:#fff;}
.bg-navy .lede{color:rgba(242,243,246,.68);}
.bg-surface{background:var(--c-surface); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line);}

.reveal{opacity:0; transform:translateY(24px) scale(.985); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.is-visible{opacity:1; transform:translateY(0) scale(1);}
.reveal-delay-1{transition-delay:.08s;}
.reveal-delay-2{transition-delay:.16s;}
.reveal-delay-3{transition-delay:.24s;}

/* ==========================================================================
   Hero Slider (Banner Full) — rotação automática, editável no admin
   ========================================================================== */
.hero{position:relative; min-height:92vh; min-height:92dvh; overflow:hidden; display:flex; align-items:flex-end;}
.hero-slider{position:absolute; inset:0; z-index:0;}
.hero-slide{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  padding-bottom:100px; opacity:0; visibility:hidden; transition:opacity 1.1s var(--ease);
}
.hero-slide.active{opacity:1; visibility:visible; z-index:1;}
.hero-slide .hero-bg{position:absolute; inset:0; z-index:0;}
.hero-slide .hero-bg img{width:100%; height:100%; object-fit:cover; opacity:.5;}

/* Vídeo de fundo (YouTube) — cobre a área igual a imagem faz com object-fit,
   usando a técnica de sobredimensionar + centralizar o iframe. A imagem
   continua por baixo, sempre, como alternativa caso o vídeo não carregue. */
.hero-video-wrap{position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:.55;}
.hero-video-wrap iframe{
  position:absolute; top:50%; left:50%;
  width:177.78vh; height:56.25vw; /* proporção 16:9 calculada nos dois sentidos */
  min-width:100%; min-height:100%;
  transform:translate(-50%,-50%);
  border:none;
}
.hero-slide .hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 75% 15%, rgba(225,0,87,.16), transparent 55%),
    linear-gradient(0deg, var(--c-bg) 5%, rgba(10,12,16,.55) 55%, rgba(10,12,16,.35) 100%);
}
.hero-content{position:relative; z-index:2; max-width:900px;}

/* Entrada escalonada — anima de novo a cada troca de slide, não só no load */
@keyframes heroFadeUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
.hero-slide.active .eyebrow{animation:heroFadeUp .7s var(--ease) both;}
.hero-slide.active .hero-title{animation:heroFadeUp .8s var(--ease) .08s both;}
.hero-slide.active .lede{animation:heroFadeUp .8s var(--ease) .16s both;}
.hero-slide.active .hero-actions{animation:heroFadeUp .8s var(--ease) .24s both;}
@media (prefers-reduced-motion: reduce){
  .hero-slide.active .eyebrow, .hero-slide.active .hero-title, .hero-slide.active .lede, .hero-slide.active .hero-actions{animation:none;}
}

/* Base do parallax — leve zoom permanente pra não sobrar borda ao deslocar */
.hero-bg img{transform:scale(1.08); transform-origin:center; will-change:transform;}

/* Decoração discreta de "dados/performance" — puramente ornamental */
.hero-data-deco{position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none;}
.hero-data-deco .dot{position:absolute; width:5px; height:5px; border-radius:50%; background:var(--c-magenta); opacity:.35; animation:dotFloat 6s ease-in-out infinite;}
.hero-data-deco .d1{top:18%; right:22%; animation-delay:0s;}
.hero-data-deco .d2{top:32%; right:12%; animation-delay:1.2s;}
.hero-data-deco .d3{top:48%; right:28%; animation-delay:2.4s;}
.hero-data-deco .d4{top:24%; right:6%; animation-delay:3.6s; background:var(--c-navy-accent);}
.hero-data-deco .d5{top:58%; right:16%; animation-delay:4.8s; background:var(--c-navy-accent);}
@keyframes dotFloat{ 0%,100%{transform:translateY(0); opacity:.25;} 50%{transform:translateY(-14px); opacity:.55;} }
.hero-data-lines{position:absolute; top:12%; right:0; width:min(420px,40vw); height:auto; opacity:.5;}
@media (max-width:900px){ .hero-data-deco{display:none;} }
@media (prefers-reduced-motion: reduce){ .hero-data-deco .dot{animation:none;} }
.hero-title{margin:22px 0 24px;}
.hero-title em{font-style:italic; color:var(--c-magenta);}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px;}

.hero-dots{position:absolute; left:var(--gutter); bottom:34px; z-index:5; display:flex; gap:10px;}
.hero-dot{width:26px; height:3px; border:none; background:rgba(242,243,246,.25); border-radius:2px; transition:all .3s var(--ease);}
.hero-dot.active{background:var(--c-magenta); width:40px;}
.hero-dot:hover{background:rgba(242,243,246,.5);}

/* ==========================================================================
   Toggle Antes/Depois — seção própria logo abaixo do hero
   ========================================================================== */
.toggle-section{padding:70px 0 30px;}
.toggle-demo{
  padding:28px 30px; background:var(--c-surface);
  border:1px solid var(--c-line); border-radius:28px;
  max-width:640px;
  box-shadow:0 20px 60px -30px rgba(0,0,0,.5);
}
.toggle-demo-row{display:flex; align-items:center; gap:18px;}
.toggle-switch{
  position:relative; width:64px; height:34px; flex-shrink:0;
  background:var(--c-charcoal); border-radius:var(--pill); cursor:pointer;
  transition:background .35s var(--ease);
}
.toggle-switch.on{background:var(--c-magenta);}
.toggle-switch .knob{
  position:absolute; top:3px; left:3px; width:28px; height:28px;
  background:#fff; border-radius:50%;
  transition:transform .35s var(--ease);
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.toggle-switch.on .knob{transform:translateX(30px);}
.toggle-label{font-family:var(--f-btn, var(--f-mono)); font-size:12px; letter-spacing:.04em; color:var(--c-slate);}
.toggle-label b{color:var(--c-text); display:block; font-size:14px; margin-top:2px;}
.toggle-demo-content{margin-top:22px; padding-top:20px; border-top:1px dashed var(--c-line-strong); min-height:64px;}
.toggle-demo-content .state{display:none;}
.toggle-demo-content .state.active{display:block;}
.toggle-demo-content p{font-family:var(--f-h2, var(--f-display)); font-size:1.15rem; color:var(--c-text); font-weight:500;}
.toggle-demo-content .state.before p::before{content:'✕ '; color:var(--c-slate);}
.toggle-demo-content .state.after p::before{content:'✓ '; color:var(--c-magenta);}

/* ==========================================================================
   Indicadores (faixa de números da empresa)
   ========================================================================== */
.indicators{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--c-line); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line);}
.indicator{background:var(--c-bg); padding:36px var(--gutter); text-align:center;}
.indicator .num{font-family:var(--f-h2, var(--f-display)); font-weight:700; font-size:clamp(2rem,4vw,2.8rem); color:var(--c-text);}
.indicator .num span{color:var(--c-magenta);}
.indicator .lbl{font-family:var(--f-btn, var(--f-mono)); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-slate); margin-top:8px;}
@media (max-width:767px){ .indicators{grid-template-columns:repeat(2,1fr);} }

/* ==========================================================================
   Cards em pílula — serviços, cases
   ========================================================================== */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
@media (max-width:991px){ .grid-3{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .grid-3,.grid-2{grid-template-columns:1fr;} }

.card{
  background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:28px; padding:38px 32px;
  transition:all .35s var(--ease);
}
.card:hover{border-color:var(--c-magenta); box-shadow:0 24px 50px -30px rgba(225,0,87,.3); transform:translateY(-4px) scale(1.02);}
.card .ic{
  width:52px; height:52px; border-radius:var(--pill);
  background:rgba(225,0,87,.12); color:var(--c-magenta);
  display:flex; align-items:center; justify-content:center; font-size:22px;
  margin-bottom:22px; transition:all .35s var(--ease);
}
.card:hover .ic{background:var(--c-magenta); color:#fff;}
.card p{color:var(--c-slate); font-size:.94rem; margin-top:10px;}
.card .card-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-btn, var(--f-mono)); font-size:11px; letter-spacing:.04em;
  color:var(--c-text); margin-top:20px; opacity:0; transform:translateX(-6px);
  transition:all .3s var(--ease);
}
.card:hover .card-link{opacity:1; transform:translateX(0);}

/* Case card — imagem + selo de resultado opcional (aparece só quando preenchido) */
.case-card{
  border-radius:28px; overflow:hidden; border:1px solid var(--c-line); background:var(--c-surface);
  transition:all .35s var(--ease);
}
.case-card:hover{box-shadow:0 24px 60px -30px rgba(0,0,0,.6); transform:translateY(-4px) scale(1.015);}
.case-card .media{aspect-ratio:4/3; overflow:hidden; position:relative; background:var(--c-line);}
.case-card .media img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease);}
.case-card:hover .media img{transform:scale(1.05);}
.case-card .metric-badge{
  position:absolute; top:16px; left:16px;
  background:var(--c-magenta); color:#fff; padding:8px 16px; border-radius:var(--pill);
  font-family:var(--f-btn, var(--f-mono)); font-size:12px; font-weight:600;
}
.case-card .body{padding:26px 28px;}

/* ==========================================================================
   Grade "Full" de Cases — mosaico de ponta a ponta da tela, 4 colunas,
   sem respiro entre os quadros (só uma costura de 1px como divisor sutil).
   Usa a mesma técnica já aplicada nos Indicadores.
   ========================================================================== */
.grid-full{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--c-line);
  width:100%;
}
.grid-full .case-card{border-radius:0; border:none; background:var(--c-bg);}
.grid-full .case-card:hover{transform:none; box-shadow:none;}
.grid-full .case-card .media{border-radius:0; aspect-ratio:1/1;}
.grid-full .case-card .body{padding:20px 22px;}
@media (max-width:900px){ .grid-full{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .grid-full{grid-template-columns:1fr;} }
.case-card .cat{font-family:var(--f-btn, var(--f-mono)); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-magenta); margin-bottom:8px;}

/* ==========================================================================
   Metodologia — timeline conectada. Os nós ativam (cinza → magenta) conforme
   entram na tela, aproveitando o sistema de reveal já existente.
   ========================================================================== */
.method-timeline{position:relative;}
.method-timeline::before{
  content:''; position:absolute; left:25px; top:26px; bottom:26px; width:2px;
  background:var(--c-line-strong); z-index:0;
}
.method-row{position:relative; display:grid; grid-template-columns:52px 1fr; gap:24px; padding:24px 0; align-items:flex-start; border-bottom:none;}
.method-num{
  position:relative; z-index:1; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-h2, var(--f-display)); font-size:1.05rem; font-weight:700;
  background:var(--c-surface-2); border:1.5px solid var(--c-line-strong); color:var(--c-slate);
  transition:all .6s var(--ease);
}
.method-row.is-visible .method-num{background:var(--c-magenta); border-color:var(--c-magenta); color:#fff; transform:scale(1.06);}
.method-row h4{font-size:1.15rem; margin-bottom:6px; padding-top:4px;}
.method-row p{color:var(--c-slate); font-size:.92rem; max-width:520px;}

/* ==========================================================================
   CTA final
   ========================================================================== */
.cta-final{position:relative; padding:130px 0; text-align:center; overflow:hidden;}
.cta-final .container{position:relative;}
.cta-final .h-display{margin:0 auto 30px;}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{padding:64px 0 26px; background:var(--c-surface); color:var(--c-text); border-top:1px solid var(--c-line);}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px;}
.footer-brand img{height:30px; margin-bottom:16px;}
.footer-brand p{color:var(--c-slate); font-size:.9rem; max-width:280px;}
.footer h5{font-family:var(--f-btn, var(--f-mono)); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--c-slate); margin-bottom:16px;}
.footer li{margin-bottom:10px;}
.footer a{color:var(--c-text); font-size:.9rem; transition:color .3s;}
.footer a:hover{color:var(--c-magenta);}
.footer-social{display:flex; gap:10px; margin-top:16px;}
.footer-social a{
  width:36px; height:36px; border:1px solid var(--c-line-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease);
}
.footer-social a:hover{border-color:var(--c-magenta); background:var(--c-magenta);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:22px; border-top:1px solid var(--c-line);
  font-family:var(--f-btn, var(--f-mono)); font-size:11px; color:var(--c-slate);
}

/* ==========================================================================
   Page hero — páginas internas
   ========================================================================== */
.page-hero{padding:160px 0 70px; position:relative; overflow:hidden;}
.page-hero .hero-pill-bg{top:-200px; right:-200px;}
.page-hero .h-display{margin-top:20px; max-width:820px;}
.page-hero .lede{margin-top:22px;}
.page-hero-bg{position:absolute; inset:0; z-index:0; display:none;}
.page-hero-bg.has-img{display:block;}
.page-hero-bg::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,12,16,.65) 0%, var(--c-bg) 100%);}
.page-hero-bg img{width:100%; height:100%; object-fit:cover; opacity:.45;}
.page-hero .container{position:relative; z-index:1;}
.hero-pill-bg{
  position:absolute; top:-180px; right:-160px; width:640px; height:640px;
  border-radius:50%; background:radial-gradient(circle, rgba(225,0,87,.14), transparent 70%);
  pointer-events:none;
}

/* ==========================================================================
   Explorador de serviços — acordeão (CropTab-like)
   ========================================================================== */
.explorer{border-top:1px solid var(--c-line);}
.explorer-item{border-bottom:1px solid var(--c-line);}
.explorer-head{
  width:100%; display:flex; align-items:center; gap:24px;
  padding:30px 4px; background:none; border:none; text-align:left; color:inherit;
  transition:padding .3s var(--ease);
}
.explorer-num{font-family:var(--f-btn, var(--f-mono)); font-size:13px; color:var(--c-slate);}
.explorer-title{flex:1; font-family:var(--f-h2, var(--f-display)); font-size:clamp(1.2rem,2.4vw,1.7rem); font-weight:600; color:var(--c-text);}
.explorer-icon{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--c-line-strong);
  display:flex; align-items:center; justify-content:center; color:var(--c-text);
  transition:all .35s var(--ease); flex-shrink:0;
}
.explorer-item[data-open="true"] .explorer-icon{background:var(--c-magenta); border-color:var(--c-magenta); color:#fff; transform:rotate(135deg);}
.explorer-item[data-open="true"] .explorer-head{padding-top:34px;}
.explorer-body{max-height:0; overflow:hidden; transition:max-height .5s var(--ease);}
.explorer-item[data-open="true"] .explorer-body{max-height:340px;}
.explorer-body-inner{padding:0 4px 34px 60px;}
.explorer-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
@media (max-width:640px){
  .explorer-head{gap:14px;}
  .explorer-body-inner{padding-left:4px;}
  .explorer-item[data-open="true"] .explorer-body{max-height:520px;}
}

/* ==========================================================================
   Filtros (Cases)
   ========================================================================== */
.filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin:40px 0 46px;}
.filter-btn{
  padding:10px 20px; border:1px solid var(--c-line-strong); border-radius:var(--pill);
  font-family:var(--f-btn, var(--f-mono)); font-size:11px; letter-spacing:.04em;
  color:var(--c-slate); background:transparent; transition:all .3s var(--ease);
}
.filter-btn:hover{color:var(--c-text); border-color:var(--c-text);}
.filter-btn.active{background:var(--c-magenta); border-color:var(--c-magenta); color:#fff;}

/* ==========================================================================
   Faixa de clientes — cantos quadrados (sem pílula), pedido explícito
   ========================================================================== */
.clients-strip{display:flex; flex-wrap:wrap; gap:14px;}
.client-chip{
  padding:14px 26px; border:1px solid var(--c-line); border-radius:4px;
  background:var(--c-surface); font-family:var(--f-h2, var(--f-display)); font-weight:600; color:var(--c-text);
  display:flex; align-items:center; justify-content:center;
}
.client-chip img{max-height:28px; width:auto;}

/* ==========================================================================
   Galeria de Equipe (Sobre) — blocos de 3 em 3
   ========================================================================== */
.team-card{
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:24px; overflow:hidden;
  transition:all .35s var(--ease);
}
.team-card:hover{border-color:var(--c-magenta); transform:translateY(-4px) scale(1.015);}
.team-card .photo{aspect-ratio:1/1; overflow:hidden; background:var(--c-charcoal);}
.team-card .photo img{width:100%; height:100%; object-fit:cover;}
.team-card .info{padding:22px 24px;}
.team-card .name{font-family:var(--f-h2, var(--f-display)); font-size:1.1rem; font-weight:600; color:var(--c-text);}
.team-card .role{font-family:var(--f-btn, var(--f-mono)); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-magenta); margin-top:4px;}
.team-card .socials{display:flex; gap:10px; margin-top:16px;}
.team-card .socials a{
  width:34px; height:34px; border:1px solid var(--c-line-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--c-text);
  transition:all .3s var(--ease);
}
.team-card .socials a:hover{background:var(--c-magenta); border-color:var(--c-magenta);}

/* ==========================================================================
   Case detalhe
   ========================================================================== */
.case-hero-img{width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:28px;}
.case-gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px;}
.case-gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:20px;}
@media (max-width:640px){.case-gallery{grid-template-columns:1fr;}}

.metric-callout{
  background:var(--c-surface-2); border:1px solid var(--c-line-strong); color:var(--c-text); border-radius:28px; padding:32px 30px; margin-bottom:26px;
}
.metric-callout .val{font-family:var(--f-h2, var(--f-display)); font-size:2.4rem; font-weight:700; color:var(--c-magenta);}
.metric-callout .lbl{font-family:var(--f-btn, var(--f-mono)); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-slate); margin-top:6px;}
.metric-callout .ctx{font-size:.88rem; color:var(--c-slate); margin-top:12px;}

.case-meta-list{border-top:1px solid var(--c-line);}
.case-meta-list .row-item{
  display:flex; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--c-line);
  font-family:var(--f-btn, var(--f-mono)); font-size:12px;
}
.case-meta-list .row-item span:first-child{color:var(--c-slate); text-transform:uppercase; letter-spacing:.06em;}

/* ==========================================================================
   Formulário (Contato)
   ========================================================================== */
.form-group{margin-bottom:22px;}
.form-group label{display:block; font-family:var(--f-btn, var(--f-mono)); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-slate); margin-bottom:9px;}
.form-control-dea{
  width:100%; background:var(--c-surface); border:1px solid var(--c-line-strong); border-radius:16px;
  color:var(--c-text); font-family:var(--f-body); font-size:1rem; padding:14px 18px;
  transition:border-color .3s var(--ease);
}
.form-control-dea:focus{outline:none; border-color:var(--c-magenta);}
.form-control-dea::placeholder{color:var(--c-slate); opacity:.7;}
textarea.form-control-dea{resize:vertical; min-height:120px;}
select.form-control-dea option{background:var(--c-surface); color:var(--c-text);}

.contact-info-item{display:flex; gap:18px; padding:24px 0; border-bottom:1px solid var(--c-line);}
.contact-info-item .ic{
  width:44px; height:44px; border-radius:var(--pill); background:rgba(225,0,87,.12);
  display:flex; align-items:center; justify-content:center; color:var(--c-magenta); flex-shrink:0;
}
.contact-info-item h5{font-family:var(--f-btn, var(--f-mono)); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--c-slate); margin-bottom:6px;}
.contact-info-item p{font-size:.98rem; color:var(--c-text);}

.form-status{font-family:var(--f-btn, var(--f-mono)); font-size:12px; padding:14px 18px; border-radius:16px; margin-top:16px; display:none;}
.form-status.show{display:block;}
.form-status.ok{background:rgba(46,204,113,.12); color:#5fd88f; border:1px solid rgba(46,204,113,.3);}
.form-status.err{background:rgba(225,0,87,.1); color:var(--c-magenta-dim); border:1px solid rgba(225,0,87,.25);}

/* ==========================================================================
   Botão flutuante de WhatsApp
   ========================================================================== */
.whatsapp-float{
  position:fixed; right:24px; bottom:24px; z-index:400;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:28px;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.whatsapp-float:hover{transform:scale(1.08); box-shadow:0 16px 36px -6px rgba(37,211,102,.7); color:#fff;}
@media (max-width:600px){
  .whatsapp-float{right:16px; bottom:16px; width:52px; height:52px; font-size:25px;}
}

/* Transição de página: o overlay (#pageTransitionOverlay) e seu CSS crítico
   vivem inline no <head> de cada página — precisa estar presente desde o
   primeiro frame, antes deste arquivo externo carregar. Ver app.js. */

.mt-0{margin-top:0 !important;}
.mb-0{margin-bottom:0 !important;}

/* ==========================================================================
   FAQ — acordeão simples
   ========================================================================== */
.faq-list{border-top:1px solid var(--c-line);}
.faq-item{border-bottom:1px solid var(--c-line);}
.faq-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 4px; background:none; border:none; text-align:left; color:inherit;
}
.faq-head h4{font-size:1.05rem; font-weight:600; font-family:var(--f-h2, var(--f-display)); color:var(--c-text);}
.faq-head .ic{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--c-line-strong);
  display:flex; align-items:center; justify-content:center; color:var(--c-slate); flex-shrink:0;
  transition:all .3s var(--ease);
}
.faq-item[data-open="true"] .faq-head .ic{background:var(--c-magenta); border-color:var(--c-magenta); color:#fff; transform:rotate(135deg);}
.faq-body{max-height:0; overflow:hidden; transition:max-height .45s var(--ease);}
.faq-item[data-open="true"] .faq-body{max-height:260px;}
.faq-body p{padding:0 4px 26px; color:var(--c-slate); font-size:.94rem; max-width:680px;}

/* ==========================================================================
   Carrossel de Equipe — autoplay + setas sutis
   ========================================================================== */
.team-carousel{position:relative;}
.team-track-wrap{overflow:hidden;}
.team-track{display:flex; gap:24px; transition:transform .55s var(--ease);}
.team-track .team-card{flex:0 0 calc((100% - 48px) / 3);}
@media (max-width:900px){ .team-track .team-card{flex:0 0 calc((100% - 24px) / 2);} }
@media (max-width:560px){ .team-track .team-card{flex:0 0 100%;} }
.team-carousel-nav{display:flex; justify-content:center; gap:12px; margin-top:28px;}
.team-nav-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--c-line-strong);
  background:transparent; color:var(--c-text); display:flex; align-items:center; justify-content:center;
  transition:all .3s var(--ease); font-size:15px;
}
.team-nav-btn:hover{border-color:var(--c-magenta); color:var(--c-magenta);}
.team-nav-btn:disabled{opacity:.3; cursor:default; pointer-events:none;}

/* ==========================================================================
   Lightbox — visualização ampliada da galeria de cases
   ========================================================================== */
.lightbox-overlay{
  position:fixed; inset:0; z-index:2000; background:rgba(6,7,10,.94);
  display:none; align-items:center; justify-content:center; padding:40px;
  backdrop-filter:blur(6px);
}
.lightbox-overlay.open{display:flex;}
.lightbox-overlay img{max-width:min(1100px,90vw); max-height:86vh; object-fit:contain; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.6);}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:fixed; background:rgba(20,22,29,.8); border:1px solid var(--c-line-strong); color:#fff;
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:18px; transition:all .25s var(--ease);
}
.lightbox-close{top:24px; right:24px;}
.lightbox-prev{left:24px; top:50%; transform:translateY(-50%);}
.lightbox-next{right:24px; top:50%; transform:translateY(-50%);}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{border-color:var(--c-magenta); color:var(--c-magenta);}
.case-gallery img, .case-hero-img{cursor:zoom-in;}
@media (max-width:640px){
  .lightbox-prev{left:10px;} .lightbox-next{right:10px;} .lightbox-close{top:10px; right:10px;}
}

/* ==========================================================================
   Ilustração "Progresso do projeto" — box Como trabalhamos (Home)
   ========================================================================== */
.progress-card{
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:28px;
  padding:32px 30px; position:relative; overflow:hidden;
}
.progress-card::before{content:''; position:absolute; inset:0; background:radial-gradient(circle at 100% 0%, rgba(225,0,87,.10), transparent 55%); pointer-events:none;}
.progress-card-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; position:relative;}
.progress-card-head span{font-family:var(--f-btn, var(--f-mono)); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-slate);}
.progress-steps{display:flex; gap:10px; margin-bottom:28px; position:relative;}
.progress-step{
  flex:1; text-align:center; padding:14px 6px; border-radius:16px; background:var(--c-surface-2);
  border:1px solid var(--c-line);
}
.progress-step .badge-step{
  width:30px; height:30px; border-radius:50%; margin:0 auto 8px; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-btn, var(--f-mono)); font-size:12px; font-weight:600;
  background:var(--c-charcoal); color:var(--c-slate);
}
.progress-step.done .badge-step{background:var(--c-magenta); color:#fff;}
.progress-step .lbl{font-size:10px; font-family:var(--f-btn, var(--f-mono)); color:var(--c-slate); text-transform:uppercase; letter-spacing:.04em;}
.progress-list{display:flex; flex-direction:column; gap:12px; position:relative;}
.progress-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-radius:14px; background:var(--c-surface-2); border:1px solid var(--c-line);
  font-size:.88rem;
}
.progress-row .status{
  font-family:var(--f-btn, var(--f-mono)); font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--pill);
}
.progress-row .status.ativo{background:rgba(46,204,113,.14); color:#5fd88f;}
.progress-row .status.andamento{background:rgba(225,0,87,.14); color:var(--c-magenta-dim);}