.product-mark {
    align-items: center;
    text-decoration: none;
}

.product-mark__logo {
    display: block;
    width: min(160px, 100%);
    height: auto;
    max-height: 44px;
    object-fit: contain;
    object-position: left center;
}

/* Los mismos componentes de botón se usan tanto en <button> como en <a>.
 * Normalizamos aquí la presentación para que los CTA no hereden subrayado,
 * line-height ni comportamiento inline del navegador. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-decoration: none;
    line-height: 1.1;
    white-space: nowrap;
}

.button:visited {
    text-decoration: none;
}

.button--compact {
    min-height: 36px;
    padding-inline: var(--space-3);
    font-size: 0.78rem;
}

.alert--success {
    border-color: color-mix(in srgb, var(--status-success) 48%, var(--border-subtle));
    background: color-mix(in srgb, var(--status-success) 12%, var(--surface-2));
    color: #b8ebd0;
}

.alert--warning {
    border-color: color-mix(in srgb, var(--status-warning) 48%, var(--border-subtle));
    background: color-mix(in srgb, var(--status-warning) 12%, var(--surface-2));
    color: #f0d792;
}