/* ===========================
   BOTONES
   Usados en hero, secciones y CTAs.
=========================== */
.btn-primary{
    display:inline-block;
    background:var(--accent-primary);
    color:var(--text-primary);
    padding:16px 32px;
    border:none;
    border-radius:12px;
    text-decoration:none;
    font-weight:bold;
    font-size:16px;
    cursor:pointer;
    transition:var(--transition-fast);
}

.btn-primary:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 30px var(--glow-primary);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-card:focus-visible{
    outline:2px solid var(--accent-secondary);
    outline-offset:3px;
}

.btn-secondary{
    display:inline-block;
    background:transparent;
    border:1px solid var(--accent-secondary);
    color:var(--accent-secondary);
    padding:16px 32px;
    border-radius:12px;
    text-decoration:none;
    font-weight:bold;
    font-size:16px;
    cursor:pointer;
    transition:var(--transition-fast);
}

.btn-secondary:hover{
    background:rgba(45,169,255,.1);
    transform:translateY(-4px);
}

/* Botón pequeño usado dentro de las tarjetas de curso */
.btn-card{
    display:inline-block;
    width:100%;
    text-align:center;
    background:var(--surface-4);
    color:var(--text-primary);
    border:1px solid var(--border-accent);
    padding:12px 20px;
    border-radius:var(--radius-sm);
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
    transition:var(--transition-fast);
}

.btn-card:hover{
    background:var(--accent-primary);
    border-color:var(--accent-primary);
}