/* =========================================================
   DG Consultoria e Soluções em TI — servicos.css
   Só o que existe na página de serviços. Carregado DEPOIS de styles.css.
   ========================================================= */
/* ---------- Hero da página de serviços ---------- */
.hero{padding:var(--esp-8xl) 0 var(--esp-6xl)}
.hero-copy .eyebrow{margin-bottom:var(--esp-m)}
.hero-copy h1{margin-bottom:var(--esp-m)}
.hero-copy .lede{color:var(--slate-300)}
.hero-actions{margin-top:var(--esp-xl)}

/* ============= SEÇÕES DA PÁGINA DE SERVIÇOS ============= */
@media (max-width:980px){
  .hero{padding:var(--esp-8xl) 0 var(--esp-5xl)}
  .hero-copy{max-width:100%}
  .hero::before{
    background:
      radial-gradient(ellipse 70% 50% at 80% 10%, var(--teal400-22), transparent 62%),
      linear-gradient(180deg, var(--navy950-75) 0%, var(--navy950-90) 55%, var(--navy950-90) 100%);
  }
}
/* ---------- Services grid ---------- */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--esp-l)}
.service-card{
  background:var(--white);border:1px solid var(--mist-300);border-radius:var(--raio-m);padding:var(--esp-xl) var(--esp-l);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s ease;
  display:flex;flex-direction:column;height:100%;
}
.service-card:hover{transform:translateY(-6px);box-shadow:0 24px 44px -24px var(--navy900-22);border-color:var(--teal-600)}
.service-card .num{font-family:var(--font-mono);color:var(--teal-600);font-weight:600;font-size:var(--texto-xs);margin-bottom:var(--esp-m)}
.service-card.flagship{background:linear-gradient(135deg, var(--navy-900), var(--navy-700));border-color:var(--branco-08)}
.service-card.flagship h3,.service-card.flagship p{color:var(--white)}
.service-card.flagship p{color:var(--slate-300)}
.service-card.flagship .num{color:var(--teal-400)}
.service-card h3{margin-bottom:var(--esp-xs);font-size:var(--texto-l)}
.service-card p{font-size:var(--texto-s);flex-grow:1;margin-bottom:var(--esp-m)}
.service-link{font-family:var(--font-mono);font-size:var(--texto-xs);font-weight:600;color:var(--teal-600);display:inline-flex;align-items:center;gap:var(--esp-2xs)}
.service-card.flagship .service-link{color:var(--teal-400)}
.service-link svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.service-card:hover .service-link svg{transform:translateX(4px)}
.service-more{
  grid-column:1/-1;border:1px dashed var(--teal-600);border-radius:var(--raio-m);padding:var(--esp-l) var(--esp-xl);
  display:flex;justify-content:space-between;align-items:center;gap:var(--esp-m);flex-wrap:wrap;
  background:var(--teal600-05);
}
.service-more p{color:var(--navy-700);font-size:var(--texto-ui);margin:0;max-width:70ch}
.service-more strong{color:var(--teal-600)}
@media (max-width:980px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.services-grid{grid-template-columns:1fr}}
/* ---------- Service deep-dive ---------- */
.deepdive{background:var(--mist-100)}
.deepdive-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--esp-4xl);align-items:center}
.deepdive-stat{
  background:linear-gradient(135deg, var(--navy-900), var(--navy-700));border:1px solid var(--branco-08);
  border-radius:var(--raio-m);padding:var(--esp-2xl) var(--esp-xl);color:var(--white);margin-bottom:var(--esp-m);
}
.deepdive-stat .stat-number{font-size:var(--texto-3xl);color:var(--teal-400);display:block;margin-bottom:var(--esp-xs)}
.deepdive-stat p{color:var(--slate-300);font-size:var(--texto-s)}
.deepdive-stat .src{font-size:var(--texto-2xs);color:var(--text-muted-dark);margin-top:var(--esp-s);display:block}
.step-list{display:flex;flex-direction:column}
.step-item{display:flex;gap:var(--esp-l);padding:var(--esp-xl) 0;border-bottom:1px solid var(--mist-300);align-items:center}
.step-item:last-child{border-bottom:none}
.step-index{
  font-family:var(--font-mono);font-weight:600;color:var(--teal-600);font-size:var(--texto-corpo);
  width:44px;height:44px;border-radius:var(--raio-full);border:1px solid var(--teal-600);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.step-item h3{font-size:var(--texto-xl);margin-bottom:var(--esp-2xs)}
.step-item p{font-size:var(--texto-corpo)}
/* ---- Etapas do deepdive: mesma cascata da timeline ----
   O wrapper da coluna deixou de ser .reveal: se ele aparecesse inteiro,
   as etapas surgiriam juntas. Quem entra em sequência é o eyebrow
   (--ordem:0) e cada etapa depois dele. */
.js-reveal .step-item.reveal,
.js-reveal .eyebrow-bloco.reveal{transition-delay:calc(var(--ordem, 0) * var(--cascata-passo))}
.js-reveal .step-item.reveal .step-index{
  transform:scale(.8);transition:transform 620ms var(--mola);
  transition-delay:calc(var(--ordem, 0) * var(--cascata-passo) + var(--cascata-eco));
}
.js-reveal .step-item.reveal.is-visible .step-index{transform:scale(1)}
@media (prefers-reduced-motion: reduce){
  .js-reveal .step-item.reveal,
  .js-reveal .eyebrow-bloco.reveal,
  .js-reveal .step-item.reveal .step-index{transition-delay:0s !important}
}
.deepdive-copy > p{margin-bottom:var(--esp-m)}
@media (max-width:900px){.deepdive-grid{grid-template-columns:1fr;gap:var(--esp-2xl);align-items:start}}
/* ---------- Execution cards ---------- */
.exec-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.exec-card{scroll-margin-top:110px}
.exec-card h3{margin-bottom:var(--esp-s);font-size:var(--texto-l)}
.exec-card ul{display:flex;flex-direction:column;gap:var(--esp-xs)}
.exec-card li{display:flex;gap:var(--esp-xs);font-size:var(--texto-s);color:var(--text-muted);align-items:flex-start}
.exec-card li svg{width:15px;height:15px;color:var(--teal-600);flex-shrink:0;margin-top:var(--esp-3xs)}
@media (max-width:900px){.exec-grid{grid-template-columns:1fr}}
/* ---------- Method timeline ---------- */
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}

/* ---- Entrada em cascata das etapas ----
   Cada etapa é observada individualmente pelo IntersectionObserver que
   o site já usa. No desktop as cinco entram na tela juntas, então quem
   escalona é o transition-delay. No celular a timeline é vertical e
   cada uma dispara sozinha, ao chegar na viewport.
   O contêiner também é observado, mas só para desenhar a linha — ele
   não pode desaparecer, senão as cinco voltariam a surgir de uma vez. */
.js-reveal .timeline.reveal{opacity:1;transform:none}
.timeline::before{transform-origin:left center}
.js-reveal .timeline.reveal::before{transform:scaleX(0);transition:transform 1.6s var(--ease)}
.js-reveal .timeline.reveal.is-visible::before{transform:scaleX(1)}
.js-reveal .timeline-item.reveal{transition-delay:calc(var(--ordem, 0) * var(--cascata-passo))}
.js-reveal .timeline-item.reveal .timeline-dot{
  transform:scale(.8);transition:transform 620ms var(--mola);
  transition-delay:calc(var(--ordem, 0) * var(--cascata-passo) + var(--cascata-eco));
}
.js-reveal .timeline-item.reveal.is-visible .timeline-dot{transform:scale(1)}
@media (prefers-reduced-motion: reduce){
  .js-reveal .timeline-item.reveal,
  .js-reveal .timeline-item.reveal .timeline-dot,
  .js-reveal .timeline.reveal::before{transition-delay:0s !important}
  .js-reveal .timeline.reveal::before{transform:scaleX(1)}
}
.timeline::before{content:"";position:absolute;top:19px;left:0;right:0;height:1px;background:var(--mist-300)}
.timeline-item{position:relative;padding:0 var(--esp-m) 0 0}
.timeline-dot{
  width:40px;height:40px;border-radius:var(--raio-full);background:var(--white);border:1.5px solid var(--teal-600);color:var(--teal-600);
  font-family:var(--font-mono);font-weight:600;display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--esp-l);position:relative;z-index:1;font-size:var(--texto-s);
}
.timeline-item h3{font-size:var(--texto-corpo);margin-bottom:var(--esp-2xs)}
.timeline-item p{font-size:var(--texto-s)}
@media (max-width:980px){
  .timeline{grid-template-columns:1fr;gap:0}
  .timeline::before{top:0;bottom:0;left:19px;right:auto;width:1px;height:auto}
  .timeline::before{transform-origin:center top}
  .js-reveal .timeline.reveal::before{transform:scaleY(0)}
  .js-reveal .timeline.reveal.is-visible::before{transform:scaleY(1)}
  .timeline-item{padding:0 0 var(--esp-2xl) var(--esp-4xl)}
  .timeline-dot{position:absolute;left:0;top:0;margin-bottom:0}
}
/* ---------- Engagement models ----------
   Tratamento inspirado no padrão de tabela de planos do reui/shadcn:
   bandeja com gradiente sutil, cards comuns sem moldura e um card em
   destaque elevado, escuro e com anel. Cores todas do sistema DG. */
.model-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--esp-l);
  background:linear-gradient(180deg,var(--mist-100),var(--mist-200));
  border:1px solid var(--mist-300);border-radius:var(--raio-m);
  padding:var(--esp-s);align-items:stretch;
}
.model-card{
  display:flex;flex-direction:column;
  border:none;background:transparent;box-shadow:none;
  border-radius:var(--raio-m);padding:var(--esp-xl);
  text-align:left;position:relative;
}
.model-card.featured{
  background:linear-gradient(180deg,var(--navy-900),var(--navy-950));
  box-shadow:0 0 0 2px var(--navy-900), 0 24px 48px -24px var(--navy900-50);
  transform:scale(1.045);z-index:1;color:var(--white);
}
.model-card.featured h3{color:var(--white)}
.model-card.featured p{color:var(--slate-300)}
.model-tag{
  align-self:flex-start;
  font-family:var(--font-mono);font-size:var(--texto-2xs);
  letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--teal-600);background:var(--white);
  border:1px solid var(--mist-300);border-radius:var(--raio-pill);
  padding:var(--esp-3xs) var(--esp-xs);margin-bottom:var(--esp-m);
}
.model-card.featured .model-tag{
  background:var(--teal-600);color:var(--white);border-color:var(--teal-600);
}
.model-card h3{font-size:var(--texto-2xl);margin-bottom:var(--esp-xs)}
.model-card p{font-size:var(--texto-s)}
@media (max-width:900px){
  .model-grid{grid-template-columns:1fr;gap:var(--esp-xs)}
  .model-card.featured{transform:none}
}

@media (max-width:640px){.hero{padding-top:var(--esp-7xl)}}