/* --------------------------------------------------------------------------
   Cards y superficies
   -------------------------------------------------------------------------- */

.any-card {
    border-radius: var(--bs-border-radius-lg);
}

.any-card .card-body {
    text-align: left;
}

.any-hero {
    border-radius: var(--bs-border-radius-xl);
}

/* --------------------------------------------------------------------------
   Heroes con fotografía
   -------------------------------------------------------------------------- */

.any-hero-media {
    --any-hero-overlay: linear-gradient(
        90deg,
        rgba(var(--any-hero-overlay-rgb), 0.92) 0%,
        rgba(var(--any-hero-overlay-rgb), 0.68) 48%,
        rgba(var(--any-hero-overlay-rgb), 0.18) 100%
    );
    --any-hero-position: center;

    color: #fff;
    background-image: var(--any-hero-overlay), var(--any-hero-image);
    background-repeat: no-repeat;
    background-position: center, var(--any-hero-position);
    background-size: cover;
}

.any-hero-overlay-strong {
    --any-hero-overlay: linear-gradient(
        90deg,
        rgba(var(--any-hero-overlay-rgb), 0.97) 0%,
        rgba(var(--any-hero-overlay-rgb), 0.82) 48%,
        rgba(var(--any-hero-overlay-rgb), 0.30) 100%
    );
}

/* --------------------------------------------------------------------------
   Paleta interactiva
   -------------------------------------------------------------------------- */

:root {
    --any-hero-overlay-rgb: 0, 59, 117;
    --any-interactive-color: var(--any-brand-primary);
    --any-interactive-hover-color: var(--any-brand-secondary);
    --any-interactive-hover-text: var(--any-brand-primary);
    --any-outline-color: var(--any-interactive-color);
    --any-link-color: var(--any-brand-primary);
    --any-link-hover-color: var(--any-brand-secondary);
    --any-section-icon-bg: #cfe2ff;
    --any-section-icon-color: var(--any-brand-primary);
}

[data-bs-theme='dark'] {
    --any-interactive-color: color-mix(in srgb, var(--any-brand-primary) 80%, #000);
    --any-interactive-hover-color: color-mix(in srgb, var(--any-brand-secondary) 80%, #000);
    --any-interactive-hover-text: #fff;
    --any-outline-color: color-mix(in srgb, var(--any-brand-primary) 55%, #fff);
    --any-link-color: var(--any-brand-secondary);
    --any-link-hover-color: #a9e2fa;
    --any-section-icon-bg: #004785;
    --any-section-icon-color: var(--any-brand-secondary);
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.any-button,
.any-button-outline {
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.any-button {
    color: #fff !important;
    background-color: var(--any-interactive-color);
    border-color: var(--any-interactive-color);
}

.any-button-outline {
    color: var(--any-outline-color) !important;
    background-color: transparent;
    border-color: var(--any-outline-color);
}

.any-button:hover,
.any-button:focus,
.any-button:active,
.any-button-outline:hover,
.any-button-outline:focus,
.any-button-outline:active {
    color: var(--any-interactive-hover-text) !important;
    background-color: var(--any-interactive-hover-color);
    border-color: var(--any-interactive-hover-color);
}