/* ═══════════════════════════════════════════════════════════════════
   TARJETAS — cards.css
   ──────────────────────────────────────────────────────────────────
   Todos los tipos de tarjetas del sitio.
   PRINCIPIO: Single Responsibility — cada bloque .card-* es independiente.
   PRINCIPIO: Open/Closed — agregar nueva tarjeta = nueva clase, sin tocar
   las existentes.

   Tarjetas disponibles:
   .service-img-card  → tarjeta con imagen vertical (Mantenimiento, etc.)
   .service-card      → tarjeta de servicio con ícono emoji
   .why-card          → tarjeta "¿Por qué elegirnos?" con número
   .saint-stat-card   → tarjeta estadística sobre fondo oscuro
   .product-card      → tarjeta de producto con imagen + descripción
   ═══════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   TARJETA DE SERVICIO CON IMAGEN (del sitio original)
   Imagen vertical con overlay de texto en la parte inferior.
   Usada en: sección Servicios (grid de 4 imágenes)
   ──────────────────────────────────────────────────────────────── */
.service-img-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 3 / 4;   /* Mantiene proporción vertical */
}
.service-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.service-img-card:hover img {
  transform: scale(1.05);
}
/* Overlay degradado en la parte inferior */
.service-img-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    0deg,
    rgba(15, 43, 76, 0.90) 0%,
    rgba(15, 43, 76, 0.30) 60%,
    transparent 100%
  );
  padding: 28px 20px 22px;
}
.service-img-overlay h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 4px;
}
.service-img-overlay p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────────
   TARJETA DE SERVICIO CON ÍCONO
   Tarjeta blanca con emoji/ícono + título + descripción.
   Usada en: sección Servicios (grid de 6 tarjetas Colombia)
   ──────────────────────────────────────────────────────────────── */
.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}
/* Barra de color en la parte superior (visible al hover) */
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-teal));
  opacity: 0;
  transition: opacity 0.3s;
}
.service-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.service-card:hover::before {
  opacity: 1;
}
/* Contenedor del ícono */
.service-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--color-accent-pale), #D1FAE5);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
}
.service-icon .bi {
  font-size: 22px;
  color: var(--color-accent);
  line-height: 1;
}
.service-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}
.service-card p {
  font-size: 14px;
  color: var(--color-gray-600);
  line-height: 1.7;
}

/* ────────────────────────────────────────────────────────────────
   TARJETA "¿POR QUÉ ELEGIRNOS?"
   Tarjeta horizontal con número + título + texto.
   Usada en: sección Nosotros / ¿Por qué CDP?
   ──────────────────────────────────────────────────────────────── */
.why-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  border: 1px solid var(--color-gray-200);
  transition: var(--transition-base);
}
.why-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent-pale);
}
/* Número circular */
.why-number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--color-primary);
  color: var(--color-highlight);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}
.why-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 6px;
}
.why-card p {
  font-size: 14px;
  color: var(--color-gray-600);
  line-height: 1.65;
}

/* ────────────────────────────────────────────────────────────────
   TARJETA ESTADÍSTICA (sección SAINT)
   Tarjeta semitransparente sobre fondo oscuro con número grande.
   Usada en: sección SAINT (fondo azul navy)
   ──────────────────────────────────────────────────────────────── */
.saint-stat-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  transition: var(--transition-base);
}
.saint-stat-card:hover {
  background: rgba(255, 255, 255, 0.10);
}
/* Número grande */
.stat-number {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  color: var(--color-highlight);
  line-height: 1;
  margin-bottom: 8px;
}
/* Etiqueta debajo del número */
.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  line-height: 1.4;
}

/* ────────────────────────────────────────────────────────────────
   TARJETA DE PRODUCTO / SOLUCIÓN
   Tarjeta con imagen en la parte superior + cuerpo de texto.
   Usada en: sección Soluciones (AdminSoft, SAINT+CDP)
   ──────────────────────────────────────────────────────────────── */
.product-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-base);
}
.product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
/* Imagen de la tarjeta */
.product-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
/* Cuerpo de la tarjeta */
.product-body {
  padding: 32px;
}
/* Badge de categoría */
.product-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}
/* Variante para SAINT (fondo oscuro) */
.product-card.saint .product-badge {
  background: var(--color-primary);
  color: var(--color-highlight);
}
/* Variante para AdminSoft (fondo verde pálido) */
.product-card.adminsoft .product-badge {
  background: var(--color-accent-pale);
  color: var(--color-accent);
}
.product-card h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--color-primary);
  margin-bottom: 6px;
}
/* Subtítulo de a quién va dirigido el producto */
.product-for {
  font-size: 14px;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 12px;
}
.product-card p {
  font-size: 14px;
  color: var(--color-gray-600);
  line-height: 1.7;
  margin-bottom: 20px;
}
/* Lista de características con check */
.product-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-features li {
  font-size: 13px;
  color: var(--color-gray-600);
  padding-left: 22px;
  position: relative;
}
.product-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}