/* 🌐 Resonancia Contextual — Recomendaciones emocionales */
.resonancia-box {
    margin: var(--space-xl) 0;
    padding: var(--space-lg);
    background: var(--bg-beige);
    border-radius: var(--radius-xl);
}
.resonancia-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}
.resonancia-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--sage-dark);
    font-weight: 500;
    text-align: center;
    margin: 0;
}
.resonancia-mood { font-size: 1.3rem; }
.resonancia-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-sm);
}
.resonancia-card {
    background: white;
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    box-shadow: var(--shadow-card);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.resonancia-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); }
.resonancia-card__tags { display: flex; flex-wrap: wrap; gap: 3px; }
.resonancia-tag--recurso { background: rgba(212,200,216,0.2) !important; color: #9A8BA0 !important; }
.resonancia-card__title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 500;
    line-height: 1.3;
}
.resonancia-card__desc, .resonancia-card__quote {
    font-size: 0.82rem;
    color: var(--text-medium);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}
.resonancia-card__quote {
    font-style: italic;
    border-left: 2px solid var(--sage);
    padding-left: var(--space-xs);
}
.resonancia-card audio { width: 100%; height: 32px; border-radius: 6px; }
.resonancia-link {
    font-size: 0.82rem;
    color: var(--sage-dark);
    font-weight: 500;
    text-decoration: none;
}
.resonancia-link:hover { color: var(--terracotta); }
.resonancia-empty {
    text-align: center;
    padding: var(--space-md);
    color: var(--text-muted);
    font-size: 0.9rem;
    grid-column: 1 / -1;
}
.resonancia-cta {
    text-align: center;
    margin-top: var(--space-md);
    padding: var(--space-sm);
    font-size: 0.9rem;
}
.resonancia-cta a {
    color: var(--sage-dark);
    font-weight: 500;
    text-decoration: none;
}
.resonancia-cta a:hover { color: var(--terracotta); }
@media (max-width: 600px) {
    .resonancia-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .resonancia-card { transition: none !important; }
}