/* ==========================================================================
   CARDS.CSS — Component .card
   Variants: --service (sobre fons fosc), --price, --team
   ========================================================================== */

.card {
   background-color: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   padding: 2.5rem 2rem;
   transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-card-hover);
}

/* --- Variant: Servei (usat sobre fons fosc) --- */
.card--service {
   color: var(--color-text-main);
   text-align: left;
}

.card--service:hover {
   background-color: rgba(255, 255, 255, 0.1);
}

.card__icon {
   width: 52px;
   height: 52px;
   margin-bottom: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   padding: 0.8rem;
}

.card__icon svg {
   width: 100%;
   height: 100%;
   stroke: var(--color-text-main);
   stroke-width: 1.5;
   fill: none;
}

.card__title {
   font-size: 1.4rem;
   font-weight: 600;
   margin-bottom: 1rem;
   color: inherit;
}

.card__desc {
   font-size: 0.95rem;
   line-height: 1.7;
   color: var(--color-text-secondary);
   margin-bottom: 1.5rem;
}

.card__tags {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   margin-bottom: 2rem;
}

.card__tags li {
   font-size: 0.75rem;
   font-weight: 500;
   letter-spacing: 0.5px;
   padding: 0.3rem 0.8rem;
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 20px;
   color: var(--color-text-secondary);
}

/* --- Variant sobre fons clar --- */
.card--light {
   background-color: var(--color-white);
   border-color: rgba(0, 0, 0, 0.06);
   color: var(--color-text-body);
}

.card--light .card__icon {
   border-color: var(--color-accent);
}

.card--light .card__icon svg {
   stroke: var(--color-accent);
}

.card--light .card__desc {
   color: var(--color-grey-muted);
}

.card--light .card__tags li {
   border-color: var(--color-grey-border);
   color: var(--color-grey-muted);
}

.card--light:hover {
   background-color: var(--color-white);
   box-shadow: var(--shadow-card-hover);
}

/* --- Diferenciació visual Psicologia vs Fisioterapia --- */
.card--psico {
   border-top: 3px solid var(--color-accent, #e87d52);
}

.card--fisio {
   border-top: 3px solid #7a9e8e;
}

/* --- Grup de CTAs dins una card (botó + link secundari) --- */
.card__cta-group {
   display: flex;
   align-items: center;
   gap: 1.5rem;
   flex-wrap: wrap;
}

.card__link-secondary {
   font-size: 0.8rem;
   color: rgba(255, 255, 255, 0.45);
   text-decoration: none;
   letter-spacing: 0.3px;
   transition: color 0.2s ease;
   white-space: nowrap;
}

.card__link-secondary:hover {
   color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
   .card {
      padding: 2rem 1.5rem;
   }
}