/* ============================================================
   Auditas — Services
   ============================================================ */
.services {
  position: relative;
  /* Diseño: degradado vertical, abajo #131217 (3.775%) -> arriba #1d2025 (86.699%) */
  background: linear-gradient(to top, var(--black90) 3.775%, var(--black70) 86.699%);
  overflow: hidden;
  isolation: isolate;
}

/* Fondo decorativo (líneas amarillas diagonales) — parallax mouse */
.services__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.services__deco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.9;
}

.services__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-44);
  padding-block: clamp(56px, 7vw, 80px);
}

/* ---- Título ---- */
.services__head { max-width: 666px; text-align: center; color: var(--whitef); }
.services__title {
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  color: var(--whitef);
  margin-bottom: var(--sp-8);
}
.services__subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--whitef);
}

/* ---- Fila de tarjetas ---- */
.services__cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-24);
  width: 100%;
}
/* Orden apilado (<1200px): Revisoría Fiscal primero, luego Auditoría
   Financiera, luego Implementación NIAS — distinto del orden en el
   HTML (que se mantiene tal cual en >=1200px, ver media query abajo). */
.services__cards > :nth-child(1) { order: 2; } /* Auditoría Financiera */
.services__cards > :nth-child(2) { order: 1; } /* Revisoría Fiscal (featured) */
.services__cards > :nth-child(3) { order: 3; } /* Implementación NIAS */

.service-card {
  position: relative; /* ancla del enlace estirado (.card-link) */
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  border: 2px solid var(--gray60);
  border-radius: 16px;
  padding: var(--sp-28);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-28);
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out);
  transform-origin: center;
  will-change: transform;
}
.service-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--gray40);
  box-shadow: var(--sh-dark);
}

.service-card--featured {
  position: relative;
  padding: var(--sp-32);
  border: 4px solid transparent;
  border-radius: 16px;
  /* Interior: vidrio esmerilado oscuro (NO el degradado) */
  background:
    radial-gradient(120% 80% at 26% 14%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 55%) padding-box,
    rgba(20, 22, 28, 0.55) padding-box;
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 14px 16px 34px rgba(0, 0, 0, 0.50);
}
/* Borde con degradado dorado→blanco (solo el contorno; el interior queda translúcido) */
.service-card--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 4px;
  background: linear-gradient(180deg, var(--seyedit) 0%, var(--yelludit) 50%, var(--grayudit) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.service-card--featured:hover {
  transform: translateY(-4px) scale(1.025);
  box-shadow: 16px 20px 42px rgba(0, 0, 0, 0.55);
  /* Su borde real es transparente (el anillo dorado lo pinta ::before):
     anular el border-color gris que hereda del hover de .service-card */
  border-color: transparent;
}

.service-card__title {
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  font-size: 30px;
  color: var(--yelludit);
  text-align: center;
  line-height: 1.1;
}
.service-card__title--lg { font-size: var(--fs-h2); }

/* Enlace "estirado": toda la burbuja lleva a la subpágina del servicio.
   El CTA (Solicitar Información) queda por encima y conserva su acción. */
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.service-card__cta, .cta-box { position: relative; z-index: 2; }

/* ---- Pills ---- */
.service-card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-20); align-items: center; justify-content: center; }
.pill {
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--infodit10);
  border: 2px solid var(--infodit40);
  border-radius: var(--r-s);
  padding: 4px 16px;
  box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.22);
}
.pill__icon { width: 12px; height: 12px; mix-blend-mode: difference; }
.pill__text {
  font-family: var(--font-body);
  font-size: var(--fs-mini);
  color: var(--gray40);
  white-space: nowrap;
  mix-blend-mode: difference;
}

/* ---- Descripción + bullets ---- */
.service-card__desc {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--whitef);
  text-align: center;
  max-width: 318px;
}
.service-card__list { display: flex; flex-direction: column; gap: var(--sp-12); width: 100%; max-width: 318px; }
.service-card__item { display: flex; gap: var(--sp-12); align-items: flex-start; }
.service-card__item .bullet-icon { width: 24px; height: 24px; flex: none; margin-top: 1px; }
.service-card__item span {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--whitef);
  line-height: 1.45;
}

/* ---- CTA tarjetas estándar ---- */
.service-card__cta { display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); width: 100%; margin-top: auto; }
.cta-note { display: inline-flex; align-items: center; gap: var(--sp-4); font-family: var(--font-body); font-size: var(--fs-body); color: var(--whitef); }
.cta-note--bold { font-weight: var(--fw-bold); }
.cta-note__icon { width: 16px; height: 16px; }

.btn-outline {
  font-family: var(--font-title);
  font-weight: var(--fw-reg);
  font-size: 18px;
  color: var(--grayudit);
  border: 2px solid var(--grayudit);
  border-radius: var(--r-s);
  padding: 8px 20px;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
.btn-outline:hover { background: var(--grayudit); color: var(--blackdit); transform: translateY(-2px); }
.btn-outline:active { transform: translateY(0) scale(0.98); }

/* ---- CTA tarjeta destacada ---- */
.cta-box {
  width: 100%;
  max-width: 342px;
  margin-top: auto;
  background: var(--black80);
  border: 2px solid var(--black60);
  border-radius: var(--r-m);
  padding: var(--sp-20);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
}
.btn-featured {
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--blackdit);
  background: var(--yelludit);
  border: 2px solid var(--grayudit);
  border-radius: var(--r-s);
  padding: 8px 20px;
  white-space: nowrap;
  box-shadow: 6px 8px 16px rgba(0, 0, 0, 0.40);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out);
}
/* Hover: conserva las animaciones + cambio sutil de color (Yelludit → Seyedit) */
.btn-featured:hover { transform: translateY(-2px); background: var(--seyedit); box-shadow: 8px 10px 22px rgba(0, 0, 0, 0.46); }
.btn-featured:active { transform: translateY(0) scale(0.98); }

/* ---- "También acompañamos en" ---- */
.services__others { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; max-width: 1087px; }
.services__others-title {
  font-family: var(--font-body);
  font-weight: var(--fw-reg);
  font-size: var(--fs-h3);
  color: var(--whitef);
  text-align: center;
}
.services__others-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; justify-content: center; width: 100%; }
.mini-card {
  flex: 0 1 203px;
  background: var(--black80);
  border: 2px solid var(--gray60);
  border-radius: var(--r-m);
  padding: var(--sp-28);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.mini-card span {
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  color: var(--whitef);
  line-height: 1.3;
}
.mini-card span strong { font-weight: var(--fw-bold); }
.mini-card:hover { transform: translateY(-3px) scale(1.04); border-color: var(--yelludit); box-shadow: var(--sh-dark); }

/* ---- Responsive ----
   Móvil/tablet: tarjetas apiladas (1 columna).
   Escritorio (>=1200px): 3 tarjetas en una sola fila (nowrap), con
   gutters reducidos para que quepan los 1186px del diseño. */
@media (min-width: 1200px) {
  .services .container { padding-inline: clamp(20px, 3vw, 40px); }
  .services__cards {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }
  .service-card { flex: 0 1 372px; width: auto; max-width: 372px; margin-inline: 0; }
  .service-card--featured { flex: 0 1 394px; max-width: 410px; }
  /* Restaura el orden natural del HTML (Auditoría Financiera / Revisoría
     Fiscal / Implementación NIAS) — el reordenamiento de arriba solo
     aplica apilado, en <1200px. */
  .services__cards > :nth-child(1),
  .services__cards > :nth-child(2),
  .services__cards > :nth-child(3) { order: initial; }
}
@media (max-width: 520px) {
  .mini-card { flex: 1 1 140px; padding: var(--sp-20); }
}