/**
 * Case Study — métricas hero + testimonio
 * Usado en posts de trabajos-realizados (cuerpo del post via Custom HTML block).
 *
 * Variables verificadas en variavista-theme/style.css (root, líneas 20-86):
 *   --vv-blue (#38A1DB)  → accent canónico de la marca
 *   --space-2..--space-8 → escala de espaciado en uso
 *   --text-sm / --text-lg → escala tipográfica fluida
 *   --text-primary / --text-secondary → colores de texto
 *
 * Notas:
 *   - El theme referencia var(--accent) en algunas plantillas pero NO lo
 *     define en :root. Usamos --vv-blue como valor real con fallback a #38A1DB.
 *   - .glass ya está definido globalmente en style.css; estas reglas SOLO
 *     añaden el layout específico de los componentes de caso de éxito.
 *   - Mobile (<640px): el grid colapsa a una columna.
 */

/* ============================================================
   MÉTRICAS HERO BAR — grid 3 cols con valores grandes
   ============================================================ */
.vv-case-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    padding: var(--space-6);
    margin: var(--space-8) 0;
    text-align: center;
}

.vv-case-metric__value {
    display: block;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--vv-blue, #38A1DB);
    line-height: 1;
    letter-spacing: -0.02em;
    font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
}

.vv-case-metric__label {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

/* ============================================================
   TESTIMONIO — blockquote glass con border-left de marca
   ============================================================ */
.vv-testimonial {
    padding: var(--space-6);
    margin: var(--space-8) 0;
    border-left: 3px solid var(--vv-blue, #38A1DB);
    border-radius: 0 12px 12px 0;
}

.vv-testimonial p {
    font-size: var(--text-lg);
    font-style: italic;
    margin-bottom: var(--space-3);
    line-height: 1.6;
    color: var(--text-primary);
}

.vv-testimonial footer {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-style: normal;
}

.vv-testimonial footer strong {
    color: var(--text-primary);
}

/* ============================================================
   MOBILE — stack vertical
   ============================================================ */
@media (max-width: 640px) {
    .vv-case-metrics {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        padding: var(--space-5);
    }

    .vv-case-metric {
        padding: var(--space-3) 0;
    }
}