/* ============================================================
   SITALIA — abogados.css
   Estilos específicos de bufete de abogados.
   El grueso del look viene de theme-nordic.css.
   ============================================================ */

/* ── Áreas de práctica — grid de cards ─────────────────── */
.areas-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: 56px;
}
@media (max-width: 880px) { .areas-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .areas-grid { grid-template-columns: 1fr; } }

.area-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px;
  transition: border-color .15s;
}
.area-card:hover { border-color: var(--text); }
.area-icon { width: 32px; height: 32px; color: var(--text); margin-bottom: 16px; }
.area-title {
  font-size: 17px; font-weight: 500; color: var(--text);
  letter-spacing: -.01em; margin-bottom: 8px;
}
.area-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* ── Diferenciadores: bloque oscuro con números grandes ─── */
.dif-section {
  background: var(--bg-dark); color: #fff;
  padding: 120px 0;
}
.dif-section .section-eyebrow { color: rgba(255,255,255,.5); }
.dif-section .section-title { color: #fff; }
.dif-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 56px; margin-top: 56px;
}
@media (max-width: 720px) { .dif-stats { grid-template-columns: 1fr; gap: 40px; } }
.dif-stat-num {
  font-size: 56px; font-weight: 300; color: #fff;
  letter-spacing: -.02em; line-height: 1; margin-bottom: 12px;
}
.dif-stat-label { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.5; }

/* ── Proceso de trabajo ─────────────────────────────────── */
.proceso-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; margin-top: 56px;
}
@media (max-width: 880px) { .proceso-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .proceso-grid { grid-template-columns: 1fr; } }
.proceso-step { padding-top: 16px; border-top: 2px solid var(--text); }
.proceso-num {
  font-size: 11px; letter-spacing: .2em;
  color: var(--text-soft); font-weight: 600; margin-bottom: 12px;
}
.proceso-step-title { font-size: 15px; font-weight: 500; color: var(--text); margin-bottom: 8px; }
.proceso-step-desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; }