/* Component: Button */
.btn {
    display: inline-block;
    padding: var(--space-xs) var(--space-m);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    /* Con `color-scheme: light dark` el navegador pinta los <button> sin fondo
       declarado con su gris de sistema. Las variantes ponen el suyo; la base
       parte de transparente para que ese gris no se cuele nunca. */
    background-color: transparent;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    line-height: 1.2;
}

/* El levantamiento solo con puntero real: en táctil :hover se queda "pegado"
   tras el toque y el botón seguía flotando después de pulsarlo. */
@media (hover: hover) {
    .btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }
}

.btn--primary {
    background-color: var(--action-strong);
    color: var(--action-strong-ink);
}

/* Hover en el relleno oscuro reforzado y no en --action-hover: con el dorado
   medio el rótulo claro caía a 2,2:1 en modo oscuro; --action-strong-hover lo
   mantiene en ≥5,3:1 en los dos temas. */
.btn--primary:hover {
    background-color: var(--action-strong-hover);
    color: var(--action-strong-ink);
}

.btn--brand {
    background-color: var(--action-strong);
    color: var(--action-strong-ink);
}

.btn--outline {
    border-color: var(--border-accent);
    color: var(--link);
}

/* Mismo relleno que el hover de .btn--primary, por el mismo contraste */
.btn--outline:hover {
    background-color: var(--action-strong-hover);
    color: var(--action-strong-ink);
}

.btn--gold {
    background-color: var(--action);
    color: var(--action-ink);
}

/* Al pasar por encima vuelca al relleno oscuro: si solo se oscureciera el
   dorado, el rótulo en tinta caería por debajo de AA (3,6:1). */
.btn--gold:hover {
    background-color: var(--action-strong);
    color: var(--action-strong-ink);
}

/* Secundario de la familia dorada, pareja de .btn--gold: la jerarquía la marca el PESO
   (relleno vs. solo trazo), no un cambio de familia de color.
   Hay DOS variantes porque el dorado no puede resolver los dos tipos de superficie con el mismo
   tono: sobre superficie clara el rótulo va en la tinta cálida (el dorado claro se quedaba en
   3,98:1, por debajo del 4,5:1 de AA) y sobre superficie oscura va en dorado claro (8,2:1),
   donde la tinta sería invisible. Elegir por el fondo sobre el que se pinta el botón. */

/* Superficie clara (crema, blanco): tarjetas de suscripción, caja del último número, .dlbox */
.btn--gold-out {
    border-color: var(--border-accent);
    color: var(--text-strong);
    background: transparent;
}

/* Superficie oscura (tinta): autopromo de suscripción */
.btn--gold-out--on-dark {
    border-color: var(--accent-on-ink);
    color: var(--accent-on-ink);
}

.btn--sm {
    padding: 9px 15px;
    /* En rem, para que respete el tamaño de letra del navegador, y en el suelo
       de 12px de las etiquetas. */
    font-size: 0.75rem;
}

/* Botón a ancho de su contenedor (CTA de las tarjetas de suscripción, formularios en móvil) */
.btn--block {
    display: block;
    width: 100%;
}

.btn--gold-out:hover {
    background-color: var(--accent-soft);
    color: var(--action-ink);
}