/* ============================================================
   CARD.CSS
   ============================================================ */

/* ----------------------------------------------------------
   FEATURE CARD
   Estilos base de íconos y texto. El tratamiento de fondo y
   borde se define en features.css con mayor especificidad.
---------------------------------------------------------- */
.card--feature {
  padding: var(--spacing-xl);
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--border-width) solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
  transition: box-shadow var(--duration-normal) var(--ease-smooth),
              transform var(--duration-normal) var(--ease-smooth),
              border-color var(--duration-normal) var(--ease-smooth),
              background-color var(--duration-normal) var(--ease-smooth);
}

.card--feature:hover {
  background-color: var(--glass-bg-hover);
  border-color: var(--glass-border-strong);
  transform: translateY(-8px);
  box-shadow: var(--glass-shadow), 0 12px 40px rgba(0, 0, 0, 0.3);
  cursor: default;
}

.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-md);
  font-size: 1.6rem;
}

/* Azul — pre-registros, reportes */
.feature__icon--blue {
  background-color: rgba(59, 130, 246, 0.12);
  color: var(--color-primary-light);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
}

/* Cyan */
.feature__icon--cyan {
  background-color: rgba(6, 182, 212, 0.10);
  color: var(--color-secondary);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.12);
}

/* Verde */
.feature__icon--green {
  background-color: rgba(16, 185, 129, 0.10);
  color: var(--color-success);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.12);
}

.feature__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.feature__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* ----------------------------------------------------------
   PRICING CARD
---------------------------------------------------------- */
.card--pricing {
  padding: var(--spacing-lg);
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--border-width) solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  transition: border-color var(--duration-normal) var(--ease-smooth),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

@media (min-width: 1024px) {
  .card--pricing {
    padding: var(--spacing-xl);
    gap: var(--spacing-md);
  }
}

.card--pricing:hover {
  border-color: var(--glass-border-strong);
}

/* Featured — borde brillante + glow azul */
.card--pricing-featured {
  background-color: rgba(59, 130, 246, 0.06);
  border: var(--border-width-strong) solid rgba(59, 130, 246, 0.4);
  box-shadow: var(--glass-shadow), var(--glow-primary);
}

@media (min-width: 1024px) {
  .card--pricing-featured {
    transform: scale(1.02);
  }
}

.card--pricing-featured:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--glass-shadow), 0 0 60px rgba(59, 130, 246, 0.35);
}

.pricing__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  color: #ffffff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 0.25rem 0.9rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--glow-primary);
}

.pricing__plan {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-tertiary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pricing__price {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
}

@media (min-width: 1024px) {
  .pricing__price {
    font-size: var(--font-size-4xl);
  }
}

.pricing__period {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
}

.pricing__subtext {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: calc(var(--spacing-xs) * -1);
}

.pricing__features {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  flex: 1;
}

.pricing__features li {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.pricing__features li i {
  color: var(--color-success);
  font-size: 1rem;
  flex-shrink: 0;
}

.pricing__cta {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

/* ----------------------------------------------------------
   TESTIMONIAL CARD
---------------------------------------------------------- */
.card--testimonial {
  padding: var(--spacing-xl);
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--border-width) solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  transition: border-color var(--duration-normal) var(--ease-smooth),
              background-color var(--duration-normal) var(--ease-smooth);
}

.card--testimonial:hover {
  background-color: var(--glass-bg-hover);
  border-color: var(--glass-border-strong);
}

.testimonial__stars {
  display: flex;
  gap: 2px;
  color: var(--color-warning);
  font-size: 1rem;
}

.card--testimonial blockquote p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  font-style: italic;
}

.testimonial__footer {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: auto;
}

.testimonial__avatar {
  font-size: 2.5rem;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

.testimonial__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial__info strong {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.testimonial__info span {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}