/* Botões padronizados das páginas /conteudos/
   Mesma identidade dos ds-btn (pill, padding generoso, hover com translateY)
   adaptada para fundos claros. */

.ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem 1.4rem;
    border-radius: 25px;
    border: 1.5px solid transparent;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
    white-space: nowrap;
}

.ct-btn:hover { transform: translateY(-2px); text-decoration: none; }
.ct-btn:disabled,
.ct-btn.disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.ct-btn i { font-size: .9em; }

.ct-btn-sm {
    padding: .35rem .85rem;
    font-size: .78rem;
    border-radius: 20px;
    border-width: 1px;
}

.ct-btn-lg {
    padding: .8rem 1.9rem;
    font-size: 1rem;
    border-radius: 28px;
}

/* Primário — gradiente roxo/azul (cor de marca dos conteúdos) */
.ct-btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    box-shadow: 0 4px 16px rgba(102, 126, 234, .35);
}
.ct-btn-primary:hover { color: #fff; box-shadow: 0 6px 24px rgba(102, 126, 234, .5); }

/* Sobre fundo escuro (hero gradient): inverte para botão claro */
.ct-btn-on-dark {
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}
.ct-btn-on-dark:hover { color: #1a1a1a; box-shadow: 0 6px 24px rgba(0, 0, 0, .22); }

/* Ghost sobre fundo escuro */
.ct-btn-ghost-light {
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
}
.ct-btn-ghost-light:hover { background: rgba(255, 255, 255, .25); color: #fff; }

/* Outline neutro para fundos claros */
.ct-btn-outline {
    background: transparent;
    color: #4b5563;
    border-color: #d1d5db;
}
.ct-btn-outline:hover { background: #f3f4f6; color: #1f2937; border-color: #9ca3af; }

/* Outline primário */
.ct-btn-outline-primary {
    background: transparent;
    color: #667eea;
    border-color: #667eea;
}
.ct-btn-outline-primary:hover { background: #667eea; color: #fff; }

/* Outline de aviso */
.ct-btn-outline-warning {
    background: transparent;
    color: #d97706;
    border-color: #f59e0b;
}
.ct-btn-outline-warning:hover { background: #f59e0b; color: #fff; }

/* Outline de sucesso */
.ct-btn-outline-success {
    background: transparent;
    color: #10b981;
    border-color: #10b981;
}
.ct-btn-outline-success:hover { background: #10b981; color: #fff; }

/* Outline perigo */
.ct-btn-outline-danger {
    background: transparent;
    color: #ef4444;
    border-color: #ef4444;
}
.ct-btn-outline-danger:hover { background: #ef4444; color: #fff; }

/* Perigo sólido */
.ct-btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 4px 16px rgba(239, 68, 68, .35);
}
.ct-btn-danger:hover { color: #fff; box-shadow: 0 6px 24px rgba(239, 68, 68, .5); }

/* Aviso (compra com WCoins, etc.) */
.ct-btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    box-shadow: 0 4px 16px rgba(245, 158, 11, .35);
}
.ct-btn-warning:hover { color: #fff; box-shadow: 0 6px 24px rgba(245, 158, 11, .5); }

/* Estado neutro / cancelado */
.ct-btn-secondary {
    background: #6b7280;
    color: #fff;
}
.ct-btn-secondary:hover { background: #4b5563; color: #fff; }

/* Variante "follow" (sólido cinza quando já segue) */
.ct-btn-following {
    background: #e5e7eb;
    color: #374151;
    border-color: #d1d5db;
}
.ct-btn-following:hover { background: #d1d5db; color: #111827; }