/*
 * teste-vocal.css — estilos da tool de extensão vocal (páginas /teste-vocal/,
 * /en/vocal-range-test/, /es/test-de-voz/). Compartilhado pelos 3 idiomas
 * (1 arquivo cacheável em vez de <style> triplicado). Complementa css/styles.css
 * (chrome do site) — aqui só o miolo interativo (.vrt-*).
 */

.vrt-wrap { max-width: 560px; margin: 0 auto; padding: 0 1.5rem 2rem; }

.vrt-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
}

.vrt-step-title { font-size: 1.25rem; font-weight: 800; margin: 0 0 .5rem; }
.vrt-hint { color: var(--color-text-secondary, #4b5563); margin: 0 0 1.25rem; line-height: 1.5; }

/* Nota detectada ao vivo (feedback grande) */
.vrt-live {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2.5rem, 9vw, 3.5rem);
    font-weight: 800; line-height: 1.2; min-height: 1.3em;
    letter-spacing: .02em;
}
.vrt-flash { color: var(--color-success, #22c55e); transform: scale(1.06); transition: transform .15s; }

/* Medidor de volume */
.vrt-meter { height: 8px; background: var(--color-border, #e5e7eb); border-radius: 4px; overflow: hidden; margin: .75rem auto 1rem; max-width: 320px; }
.vrt-meter > div { height: 100%; width: 0; background: var(--color-primary, #6366f1); transition: width 60ms linear; }

.vrt-status { color: var(--color-text-secondary, #6b7280); font-size: .9rem; min-height: 1.2em; margin: 0 0 .75rem; }
.vrt-best { margin: 0 0 1rem; line-height: 1.5; }
.vrt-error { color: #b91c1c; line-height: 1.5; margin: 0 0 1rem; }

/* Botões */
.vrt-btn {
    display: inline-block; border: 0; cursor: pointer;
    background: var(--color-primary, #6366f1); color: #fff;
    font-weight: 700; font-size: 1.0625rem; font-family: inherit;
    padding: .875rem 2rem; border-radius: 999px; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
}
.vrt-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.vrt-btn:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; }
.vrt-ghost { background: transparent; color: inherit; border: 1px solid var(--color-border, #e5e7eb); }

/* Resultado */
.vrt-range {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.75rem, 6vw, 2.5rem); font-weight: 800; margin: .5rem 0 .25rem;
}
.vrt-range-sub { color: var(--color-text-secondary, #6b7280); margin: 0 0 1.25rem; }
.vrt-type { font-size: 1.125rem; margin: 0 0 .5rem; }
.vrt-type span { color: var(--color-text-secondary, #6b7280); }
.vrt-disclaimer { font-size: .8125rem; color: var(--color-text-secondary, #9ca3af); line-height: 1.45; margin: 0 0 1.25rem; }

.vrt-singers-title { font-size: 1.0625rem; font-weight: 700; margin: 1.25rem 0 .75rem; }
.vrt-singers { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: .5rem; }
.vrt-singer {
    border: 1px solid var(--color-border, #e5e7eb); border-radius: 12px;
    padding: .5rem .875rem; font-size: .9375rem;
}
.vrt-singer span { display: block; color: var(--color-text-secondary, #6b7280); font-size: .8125rem; }

.vrt-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 1rem 0 1.5rem; }

/* CTA pros dois projetos (jogos deste site + app de ouvido absoluto) */
.vrt-cta { border-top: 1px solid var(--color-border, #e5e7eb); padding-top: 1.5rem; }
.vrt-cta h3 { font-size: 1.125rem; font-weight: 800; margin: 0 0 .5rem; }
.vrt-cta p { color: var(--color-text-secondary, #4b5563); margin: 0 0 1rem; line-height: 1.5; }
.vrt-cta-btns { display: flex; flex-direction: column; gap: .625rem; align-items: center; }
.vrt-cta-btns .vrt-btn { min-width: 260px; }
.vrt-cta-btn2 { background: #0ea5e9; } /* distingue o projeto irmão sem rebaixá-lo */

@media (prefers-color-scheme: dark) {
    .vrt-card { box-shadow: none; }
}