/* =========================================================
   DG Consultoria e Soluções em TI — index.css
   Só o que existe na home. Carregado DEPOIS de styles.css.
   ========================================================= */
/* ---------- Home — ajustes de tipografia ---------- */
h1{font-weight:600}
/* ---------- Hero da home ---------- */
.hero{padding:var(--esp-8xl) 0 var(--esp-8xl)}
.hero-copy .eyebrow{margin-bottom:var(--esp-l)}
.hero-copy h1{margin-bottom:var(--esp-2xl)}
.hero-actions{margin-bottom:var(--esp-2xl)}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--esp-2xs) var(--esp-l);font-family:var(--font-mono);font-size:var(--texto-xs);color:var(--slate-300)}
.hero-meta a{color:var(--slate-300)}
.hero-meta a:hover{color:var(--teal-400)}

/* ================= SEÇÕES DA HOME ================= */
@media (max-width:980px){
  .hero{padding:var(--esp-8xl) 0 var(--esp-6xl)}
  .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%);
  }
}
/* ---------- Dark data band ---------- */
.band-dark{background:var(--navy-950);position:relative}
.band-dark::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at top right, var(--teal600-16), transparent 60%)}
.band-dark .container{position:relative}
.band-dark p{color:var(--slate-300)}
.band-dark .section-head{max-width:820px}
.opportunity-card{
  border-radius:var(--raio-m);padding:var(--esp-xl) var(--esp-xl);
  background:linear-gradient(135deg, var(--navy-900), var(--navy-700));
  border:1px solid var(--teal500-35);margin-top:var(--esp-2xl);
}
.opportunity-card .eyebrow{margin-bottom:var(--esp-s)}
.opportunity-card p{color:var(--white);font-size:var(--texto-lede);font-family:var(--font-display);line-height:1.45}
.opportunity-card .stat-number{color:var(--teal-400)}
.source-note{font-size:var(--texto-xs);color:var(--text-muted);max-width:900px;line-height:1.7;margin-top:var(--esp-s)}
/* ---------- Challenge cards ---------- */
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr)}
.challenge-card .num{font-family:var(--font-mono);font-size:var(--texto-xs);color:var(--teal-600);font-weight:600;margin-bottom:var(--esp-m);display:block}
.challenge-card h3{margin-bottom:var(--esp-xs)}
.challenge-card p{font-size:var(--texto-s)}
@media (max-width:900px){.card-grid-3{grid-template-columns:1fr}}
/* ---------- Quem somos ---------- */
/* Quem somos — coluna de destaques com mais peso e centrada no eixo
   vertical, já que a coluna de texto é bem mais alta. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--esp-5xl);align-items:center}
.feature-list{
  display:flex;flex-direction:column;gap:var(--esp-2xl);
  max-width:34rem;justify-self:center;
}
.feature-item{display:flex;gap:var(--esp-m);align-items:center}
.feature-icon{
  flex-shrink:0;width:56px;height:56px;border-radius:var(--raio-m);background:var(--mist-200);
  display:flex;align-items:center;justify-content:center;color:var(--teal-600);
}
.feature-icon svg{width:26px;height:26px}
.feature-item h3{font-size:var(--texto-xl);margin-bottom:var(--esp-3xs)}
.feature-item p{font-size:var(--texto-corpo)}

/* ---- Entrada em cascata dos três destaques ----
   A .feature-list deixou de ser o alvo do observador: se ela aparecesse
   como bloco, os três surgiriam juntos. Cada item entra na sua vez. */
.js-reveal .feature-item.reveal{transition-delay:calc(var(--ordem, 0) * var(--cascata-passo))}
.js-reveal .feature-item.reveal .feature-icon{
  transform:scale(.8);transition:transform 620ms var(--mola);
  transition-delay:calc(var(--ordem, 0) * var(--cascata-passo) + var(--cascata-eco));
}
.js-reveal .feature-item.reveal.is-visible .feature-icon{transform:scale(1)}
@media (prefers-reduced-motion: reduce){
  .js-reveal .feature-item.reveal,
  .js-reveal .feature-item.reveal .feature-icon{transition-delay:0s !important}
}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:var(--esp-2xl);align-items:start}
  .feature-list{max-width:none;justify-self:stretch}
}
/* ---------- Diferencial comparison ---------- */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--esp-s)}
.compare-title{font-family:var(--font-mono);font-size:var(--texto-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:var(--esp-l);display:block}
.compare-card.bad .compare-title{color:var(--text-muted)}

/* ---- "A abordagem DG" em destaque: célula escura dentro da grade ----
   Mantém a mecânica da .cel-recurso (barra, deslize, lavagem), só troca
   o tema da célula. Gradiente navy-900 → navy-950, o mesmo do card em
   destaque dos modelos de engajamento: com navy-700 no fim, o teal-400
   do título caía para 4,42:1. */
.compare-card.good{
  background:linear-gradient(135deg, var(--navy-900), var(--navy-950));
  color:var(--white);
}
.compare-card.bad{border-right:none} /* o bloco escuro já separa os dois */
.compare-card.good .compare-title{color:var(--teal-400)}
.compare-card.good .compare-title::before{background:var(--branco-14)}
.compare-card.good:hover .compare-title::before{background:var(--teal-400)}
.compare-card.good::after{
  background:linear-gradient(to top, var(--branco-05), transparent);
}
.compare-card ul{display:flex;flex-direction:column;gap:var(--esp-s)}
.compare-card li{display:flex;gap:var(--esp-xs);align-items:flex-start;font-size:var(--texto-ui);line-height:1.5}
.compare-card.bad li{color:var(--navy-700)}
.compare-card.good li{color:var(--mist-200)}
.compare-card li svg{width:18px;height:18px;flex-shrink:0;margin-top:var(--esp-3xs)}
.compare-card.bad li svg{color:var(--coral-500)}
.compare-card.good li svg{color:var(--teal-400)}
@media (max-width:820px){.compare-grid{grid-template-columns:1fr}}
/* ---------- Value model ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:var(--esp-2xl)}
.pillar-card h3{margin-bottom:var(--esp-xs);font-size:var(--texto-xl)}
.pillar-card p{font-size:var(--texto-s)}
.journey-callout{background:var(--mist-100);border-radius:var(--raio-m);padding:var(--esp-xl) var(--esp-xl);display:flex;gap:var(--esp-l);align-items:center}
.journey-callout .eyebrow{margin-bottom:var(--esp-xs)}
.journey-callout p{color:var(--navy-700);font-size:var(--texto-corpo);margin:0}
@media (max-width:900px){.pillars{grid-template-columns:1fr}}
/* ---------- Why DG dark stat band ---------- */
.why-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--esp-4xl);align-items:center}
.why-stats{display:grid;grid-template-columns:1fr 1fr}
.stat-cell .stat-number{display:block;color:var(--white);margin-bottom:var(--esp-xs)}
.stat-cell p{font-size:var(--texto-s);color:var(--slate-300)}
.why-stats .stat-cell .stat-number{font-size:var(--texto-stat)}
@media (max-width:900px){.why-grid{grid-template-columns:1fr;gap:var(--esp-2xl)}}
@media (max-width:520px){.why-stats{grid-template-columns:1fr}}