/* ==========================================================================
   toniferra.com — página de empresa (empresa.html)
   Requiere css/styles.css y css/interior.css cargados antes.
   ========================================================================== */

/* ---------- Servicios (fondo blanco) ---------- */
.services {
  padding: 5rem 2rem;
  background: #fff;
  border-top: 1px solid var(--color-border);
}
.services__grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.9rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(15, 23, 42, .08);
  border-color: var(--color-brand);
}
.service-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(99, 102, 241, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.service-card__title { font-size: 1.3rem; font-weight: 600; margin-bottom: .6rem; color: var(--color-dark); }
.service-card__text { color: var(--color-text-muted); font-size: .95rem; line-height: 1.65; }

/* Tarjeta destacada de IA (oscura) */
.service-card--featured { background: var(--color-dark); border-color: var(--color-dark); }
.service-card--featured:hover { box-shadow: 0 14px 40px rgba(99, 102, 241, .35); }
.service-card--featured .service-card__title { color: #fff; }
.service-card--featured .service-card__text { color: var(--color-text-soft); }
.service-card__badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: 1rem;
  padding: .28rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(99, 102, 241, .5);
  background: rgba(99, 102, 241, .14);
  color: #c7d2fe;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
}

/* ---------- IA destacada (fondo oscuro) ---------- */
.ia-features { padding: 5rem 2rem; background: var(--color-dark); color: #fff; }
.ia-features .section-head__lead { color: var(--color-text-soft); }
.ia-features__badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(99, 102, 241, .5);
  background: rgba(99, 102, 241, .14);
  color: #c7d2fe;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.ia-features__grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}
.ia-card {
  background: var(--color-dark-soft);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 1.6rem;
}
.ia-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(99, 102, 241, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .9rem;
}
.ia-card__icon .icon { width: 22px; height: 22px; stroke: var(--color-indigo-soft); }
.ia-card__title { font-size: 1.08rem; font-weight: 600; margin-bottom: .4rem; }
.ia-card__text { color: var(--color-text-soft); font-size: .9rem; line-height: 1.6; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .services, .ia-features { padding-left: 1.5rem; padding-right: 1.5rem; }
}