/* ==========================================================================
   /@arroba/divulgar — central de divulgacao do perfil do criador
   Prefixo .dvg-* (docs/design.md §2). Acentos com papel (mesma familia do
   instrutor.css): teal/mint = marca e link · amber = QR/offline ·
   sky = alcance/textos · violet = site/embed
   ========================================================================== */

:root {
    --dvg-ink:    #071a18;
    --dvg-ink-2:  #0d2b27;
    --dvg-teal:   #14b8a6;
    --dvg-mint:   #5eead4;
    --dvg-amber:  #f59e0b;
    --dvg-sky:    #38bdf8;
    --dvg-violet: #8b5cf6;
}

/* ---------- Hero compacto ---------- */
.dvg-hero {
    border-radius: var(--radius-lg, 16px);
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, .92);
    background:
        radial-gradient(40rem 24rem at 88% 0%, rgba(56, 189, 248, .16), transparent 60%),
        radial-gradient(36rem 24rem at 0% 100%, rgba(20, 184, 166, .28), transparent 62%),
        linear-gradient(160deg, var(--dvg-ink-2), var(--dvg-ink) 60%, #04110f);
}

.dvg-voltar {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1.1rem;
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
    color: rgba(255, 255, 255, .72);
    transition: color .2s ease;
}

.dvg-voltar svg { width: .9rem; height: .9rem; }
.dvg-voltar:hover { color: #fff; }

.dvg-hero-inner {
    display: flex;
    align-items: flex-start;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    max-width: 62rem;
}

.dvg-avatar {
    width: 4.5rem;
    height: 4.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(94, 234, 212, .45);
}

.dvg-avatar-iniciais {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

/* Paleta das iniciais (pareia com DepoimentoAvatar::cor — copia local do
   instrutor.css: esta pagina nao carrega aquele arquivo) */
.ins-cor-0 { background: #0d9488; }
.ins-cor-1 { background: #7c3aed; }
.ins-cor-2 { background: #d97706; }
.ins-cor-3 { background: #0284c7; }
.ins-cor-4 { background: #dc2626; }
.ins-cor-5 { background: #16a34a; }
.ins-cor-6 { background: #db2777; }
.ins-cor-7 { background: #4f46e5; }

.dvg-eyebrow {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dvg-mint);
    margin: 0 0 .3rem;
}

.dvg-h1 {
    font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1.08;
    letter-spacing: -.025em;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-wrap: balance;
}

.dvg-lead {
    margin: .5rem 0 0;
    max-width: 34rem;
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
    text-wrap: pretty;
}

.dvg-hero-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.1rem;
}

/* ---------- Botoes ---------- */
.dvg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.75rem;
    padding: .55rem 1.2rem;
    border-radius: var(--radius-full, 999px);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .2s ease, transform .2s ease;
}

/* O display:inline-flex acima vence o [hidden] da UA — os botoes de Web Share nascem
   hidden e so devem aparecer quando navigator.share/canShare existe (JS da pagina). */
.dvg-btn[hidden] { display: none !important; }

.dvg-btn svg { width: 1rem; height: 1rem; }

.dvg-btn-primario {
    color: #04110f;
    background: var(--dvg-mint);
    border-color: var(--dvg-mint);
}

.dvg-btn-primario:hover { background: #99f6e4; transform: translateY(-1px); }

.dvg-btn-ghost {
    color: rgba(255, 255, 255, .88);
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .22);
}

.dvg-btn-ghost:hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); }

/* Botao dentro de card (fundo claro/escuro pelos tokens) */
.dvg-btn-mini {
    min-height: 2.375rem;
    padding: .4rem .9rem;
    font-size: .8125rem;
    color: var(--text);
    background: var(--bg-2);
    border-color: var(--border);
}

.dvg-btn-mini:hover { background: var(--border); transform: translateY(-1px); }

/* "Enviar" (folha de compartilhar do sistema) e a acao que a central quer que a
   pessoa use — mandar o material pra alguem vale mais que guardar no disco.
   Ganha o teal da marca; "Baixar" fica de apoio, neutro. */
.dvg-btn-share {
    color: var(--dvg-teal);
    background: rgba(20, 184, 166, .12);
    border-color: rgba(20, 184, 166, .38);
}

.dvg-btn-share:hover {
    background: rgba(20, 184, 166, .2);
    border-color: var(--dvg-teal);
}

/* "Gerar vídeo": sozinho na linha ate o arquivo existir, entao pede destaque */
.dvg-btn-gerar {
    color: #04110f;
    background: var(--dvg-mint);
    border-color: var(--dvg-mint);
    font-weight: 600;
}

.dvg-btn-gerar:hover { background: #99f6e4; transform: translateY(-1px); }

/* Enquanto o servidor codifica (segundos): trava o clique repetido e mostra que
   esta trabalhando, em vez de o botao so ficar com um texto diferente. */
.dvg-btn.is-ocupado,
.dvg-btn[data-ocupado] {
    pointer-events: none;
    opacity: .85;
    animation: dvgPulsa 1.4s ease-in-out infinite;
}

@keyframes dvgPulsa {
    0%, 100% { opacity: .85; }
    50% { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    .dvg-btn.is-ocupado,
    .dvg-btn[data-ocupado] { animation: none; }
}

.dvg-copiado, .dvg-copiado:hover { background: rgba(20, 184, 166, .16); border-color: var(--dvg-teal); color: var(--dvg-teal); }

/* ---------- Secoes ---------- */
/* width:100%: o .main-content e flex-column (mesma pegadinha do instrutor.css) */
.dvg-sec { width: 100%; margin: 0 auto 2.75rem; max-width: 62rem; }

.dvg-eyebrow-sec {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 .3rem;
}

.dvg-h2 {
    font-size: clamp(1.3rem, 1rem + 1.4vw, 1.7rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1rem;
    text-wrap: balance;
}

.dvg-nota {
    margin: .9rem 0 0;
    font-size: .8125rem;
    color: var(--muted);
    max-width: 42rem;
    text-wrap: pretty;
}

.dvg-nota-topo { margin: -.4rem 0 1rem; }

/* ---------- Cards ---------- */
.dvg-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 14px);
    padding: 1.25rem;
}

.dvg-card-titulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 .35rem;
}

.dvg-card-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 10px;
    flex-shrink: 0;
    color: var(--c, var(--primary));
    background: color-mix(in srgb, var(--c, var(--primary)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--c, var(--primary)) 28%, transparent);
}

.dvg-card-ic svg { width: 1.1rem; height: 1.1rem; }

.dvg-card-dica {
    font-size: .8125rem;
    color: var(--muted);
    margin: 0 0 .9rem;
    text-wrap: pretty;
}

.dvg-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1.25rem;
}

/* ---------- Linha de copiar link ---------- */
.dvg-linha-copiar {
    display: flex;
    gap: .5rem;
    align-items: stretch;
}

.dvg-linha-copiar input {
    flex: 1;
    min-width: 0;
    padding: .55rem .8rem;
    font-size: .875rem;
    font-family: inherit;
    color: var(--text);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

/* ---------- QR ---------- */
.dvg-qr-linha {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.dvg-qr {
    flex-shrink: 0;
    width: 9.5rem;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #fff; /* zona quieta do QR: sempre clara, nos 2 temas */
}

.dvg-qr svg { display: block; width: 100%; height: auto; }

.dvg-qr-acoes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    min-width: 0;
}

.dvg-qr-nota {
    font-size: .75rem;
    color: var(--muted);
    margin: .2rem 0 0;
    max-width: 16rem;
    text-wrap: pretty;
}

/* ---------- Canais diretos ---------- */
.dvg-canais {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
    gap: .75rem;
}

.dvg-canal {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 2.75rem;
    padding: .6rem 1rem;
    border-radius: 12px;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.dvg-canal svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }

.dvg-canal:hover { transform: translateY(-2px); }

/* Cor institucional de cada canal SO no icone (fundo segue os tokens) */
.dvg-canal-whatsapp svg { color: #22c55e; }
.dvg-canal-telegram svg { color: #38bdf8; }
.dvg-canal-x svg        { color: var(--text); }
.dvg-canal-facebook svg { color: #3b82f6; }
.dvg-canal-linkedin svg { color: #2563eb; }
.dvg-canal-email svg    { color: var(--dvg-amber); }

.dvg-canal-whatsapp:hover { border-color: #22c55e; background: rgba(34, 197, 94, .08); }
.dvg-canal-telegram:hover { border-color: #38bdf8; background: rgba(56, 189, 248, .08); }
.dvg-canal-x:hover        { border-color: var(--text); }
.dvg-canal-facebook:hover { border-color: #3b82f6; background: rgba(59, 130, 246, .08); }
.dvg-canal-linkedin:hover { border-color: #2563eb; background: rgba(37, 99, 235, .08); }
.dvg-canal-email:hover    { border-color: var(--dvg-amber); background: rgba(245, 158, 11, .08); }

/* ---------- Textos prontos ---------- */
.dvg-textos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.25rem;
}

.dvg-texto { display: flex; flex-direction: column; }

.dvg-texto-titulo {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 .2rem;
}

.dvg-texto .dvg-card-dica { margin-bottom: .6rem; }

.dvg-texto-body {
    flex: 1;
    margin: 0 0 .9rem;
    padding: .75rem .9rem;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--text-2);
    background: var(--bg-2);
    border: 1px dashed var(--border);
    border-radius: 10px;
    text-wrap: pretty;
}

/* ---------- Materiais (cartoes de imagem + previa) ---------- */
.dvg-materiais {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1.25rem;
    align-items: start;
}

.dvg-material {
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
}

.dvg-material img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--bg-2);
}

.dvg-material figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    padding: .8rem 1rem 1rem;
}

.dvg-material strong { font-size: .875rem; color: var(--text); }
.dvg-material figcaption > span { font-size: .75rem; color: var(--muted); }

.dvg-material-acoes {
    display: flex;
    gap: .5rem;
    width: 100%;
    margin-top: .35rem;
}

/* ---------- Cartao animado (MP4) ---------- */
/* O <video> ocupa exatamente o lugar do <img> dos outros cartoes, pra fila de
   materiais nao dar pulo quando o video ainda nao foi gerado e o poster entra
   no lugar dele. */
.dvg-material video {
    display: block;
    width: 100%;
    height: auto;
    background: var(--bg-2);
}

/* Selo "vídeo" no canto, pra distinguir do cartao estatico ao lado */
.dvg-material-video { position: relative; }

.dvg-material-video::before {
    content: '▶ vídeo';
    position: absolute;
    top: .55rem;
    left: .55rem;
    z-index: 1;
    padding: .2rem .5rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #f8fafc;
    background: rgba(11, 18, 32, .72);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.dvg-material-dica {
    width: 100%;
    margin-top: .5rem;
    font-size: .6875rem !important;
    line-height: 1.45;
    color: var(--muted);
}

/* ---------- Previa do link compartilhado ---------- */
.dvg-preview {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 14px);
    padding: 1.1rem;
}

.dvg-preview-titulo {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--muted);
    margin: 0 0 .75rem;
}

.dvg-preview-bolha {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px 12px 12px 4px; /* forma de balao de mensagem */
    overflow: hidden;
    max-width: 20rem;
}

.dvg-preview-bolha img { display: block; width: 100%; height: auto; }

.dvg-preview-meta {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .6rem .75rem .75rem;
}

.dvg-preview-meta strong {
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--text);
}

.dvg-preview-meta span {
    font-size: .75rem;
    line-height: 1.4;
    color: var(--text-2);
}

.dvg-preview-meta small {
    font-size: .6875rem;
    color: var(--muted);
    text-transform: lowercase;
}

/* ---------- Badges (botao pro site) ---------- */
.dvg-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1.25rem;
}

.dvg-badge-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem;
    margin-bottom: .75rem;
    border-radius: 10px;
    /* xadrez neutro: mostra o badge sobre "qualquer fundo" */
    background:
        linear-gradient(45deg, var(--bg-2) 25%, transparent 25%, transparent 75%, var(--bg-2) 75%),
        linear-gradient(45deg, var(--bg-2) 25%, var(--surface) 25%, var(--surface) 75%, var(--bg-2) 75%);
    background-size: 18px 18px;
    background-position: 0 0, 9px 9px;
    border: 1px solid var(--border);
}

.dvg-badge textarea {
    width: 100%;
    margin-bottom: .75rem;
    padding: .6rem .75rem;
    font-size: .75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    line-height: 1.5;
    color: var(--text-2);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    resize: vertical;
}

/* ---------- Metricas (so o dono) ---------- */
.dvg-metricas-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.dvg-stat {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 14px);
    border-left: 3px solid var(--c, var(--primary));
}

.dvg-stat-num {
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
}

.dvg-stat-label { font-size: .8125rem; color: var(--muted); }

.dvg-metricas-vazio {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--text-2);
    text-wrap: pretty;
}

.dvg-barra-linha {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) 3.5rem;
    align-items: center;
    gap: .75rem;
    padding: .45rem 0;
}

.dvg-barra-rotulo { font-size: .8125rem; font-weight: 600; color: var(--text); }

.dvg-barra-trilha {
    display: block;
    height: .5rem;
    border-radius: 999px;
    background: var(--bg-2);
    overflow: hidden;
}

.dvg-barra {
    display: block;
    height: 100%;
    min-width: .5rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--dvg-teal), var(--dvg-mint));
}

.dvg-barra-qtd {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--text);
    text-align: right;
}

/* ---------- Revelacao no scroll (so com JS vivo) ---------- */
.dvg-js .dvg-rv {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}

.dvg-js .dvg-rv.is-in { opacity: 1; transform: none; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    .dvg-hero-inner { flex-direction: column; }
    .dvg-hero-acoes .dvg-btn { width: 100%; }
    .dvg-linha-copiar { flex-direction: column; }
    .dvg-qr-linha { flex-direction: column; align-items: center; text-align: center; }
    .dvg-qr { width: 11rem; }
    .dvg-qr-acoes { align-items: center; }
    .dvg-barra-linha { grid-template-columns: 5.5rem minmax(0, 1fr) 3rem; gap: .5rem; }
}

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
    .dvg-btn, .dvg-canal, .dvg-card { transition: none; }
    .dvg-btn:hover, .dvg-canal:hover { transform: none; }
    .dvg-js .dvg-rv { opacity: 1; transform: none; transition: none; }
}