/* Public floating visual layer */

:root {
    --pub-bg: #030817;
    --pub-card: rgba(15, 23, 42, .72);
    --pub-card-strong: rgba(17, 25, 43, .88);
    --pub-line: rgba(148, 163, 184, .18);
    --pub-text: #f8fbff;
    --pub-muted: #8d9ab3;
    --pub-cyan: #22d3ee;
    --pub-blue: #2563eb;
    --pub-blue-hover: #1d4ed8;
    --pub-purple: #7c5cff;
    --pub-pink: #ff5d8f;
    --pub-mint: #24d8a7;
}

html {
    background: var(--pub-bg);
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 0%, rgba(34, 211, 238, .16), transparent 30%),
        radial-gradient(circle at 88% 6%, rgba(124, 92, 255, .20), transparent 28%),
        linear-gradient(135deg, #020617 0%, #040918 48%, #140b33 100%) !important;
    color: var(--pub-text);
    font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgba(124, 92, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 211, 238, .045) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .06));
    pointer-events: none;
}

.es-navbar {
    width: min(100% - 28px, 1220px);
    margin: 14px auto 0;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 999px;
    background: rgba(3, 8, 23, .66) !important;
    box-shadow: 0 22px 64px rgba(0, 0, 0, .26);
    backdrop-filter: blur(20px) saturate(150%);
}

.es-navbar .container {
    max-width: none;
    padding-inline: 18px;
}

.navbar-brand img {
    max-height: 32px;
    filter: drop-shadow(0 12px 18px rgba(34, 211, 238, .1));
}

.es-language-switch {
    border: 1px solid rgba(148, 163, 184, .18) !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 34px rgba(0, 0, 0, .18) !important;
}

.es-language-switch a {
    color: rgba(226, 232, 240, .72) !important;
}

.es-btn-primary,
.pricing-cta,
button.es-btn-primary {
    border: 0 !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    background: var(--pub-blue) !important;
    box-shadow: 0 18px 44px rgba(37, 99, 235, .28) !important;
}

.es-btn-primary:hover,
.pricing-cta:hover {
    color: #ffffff !important;
    background: var(--pub-blue-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 24px 56px rgba(37, 99, 235, .38) !important;
}

.btn-outline-light {
    border-color: rgba(226, 232, 240, .32) !important;
    background: rgba(255, 255, 255, .04) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
}

main > .py-5 {
    padding-top: clamp(2rem, 7vw, 5rem) !important;
}

.badge {
    border: 1px solid rgba(34, 211, 238, .24) !important;
    background: rgba(34, 211, 238, .08) !important;
    color: #9eefff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.display-3,
.display-4,
.pricing-hero h1 {
    color: #fff;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
}

.lead,
.text-secondary,
.pricing-description,
.price-cycle {
    color: var(--pub-muted) !important;
}

.rounded-5,
.pricing-card,
.saving-card,
.es-card-preview {
    border-radius: 28px !important;
}

.pricing-card,
.saving-card,
.es-card-preview,
.col-md-5 .rounded-5,
.col-lg-4 .rounded-5,
.col-lg-5 > .rounded-5,
#formulario {
    border: 1px solid var(--pub-line) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .026)),
        var(--pub-card) !important;
    box-shadow: 0 34px 92px rgba(0, 0, 0, .34) !important;
    backdrop-filter: blur(18px) saturate(140%);
}

.pricing-card {
    min-height: 100%;
    isolation: isolate;
}

.pricing-card::before,
.col-lg-5 > .rounded-5::before,
#formulario::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(circle at 12% 0%, rgba(34, 211, 238, .15), transparent 35%),
        radial-gradient(circle at 94% 0%, rgba(124, 92, 255, .16), transparent 38%);
    pointer-events: none;
}

.pricing-card,
.col-lg-5 > .rounded-5,
#formulario {
    position: relative;
}

.pricing-card:hover,
.col-lg-5 > .rounded-5:hover,
.es-card-preview:hover {
    border-color: rgba(34, 211, 238, .32) !important;
    box-shadow: 0 42px 110px rgba(0, 0, 0, .42) !important;
    transform: translateY(-3px);
}

.pricing-switch {
    background: rgba(255, 255, 255, .07) !important;
    border-color: rgba(148, 163, 184, .16) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.billing-toggle.active {
    background: var(--pub-blue) !important;
    color: #ffffff !important;
}

.form-label {
    color: rgba(248, 250, 252, .9);
    font-size: .82rem;
    font-weight: 850;
}

.form-control,
.form-select {
    min-height: 46px;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    border-radius: 16px !important;
    background: rgba(226, 232, 240, .96) !important;
    color: #07111f !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(34, 211, 238, .6) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, .12), 0 18px 38px rgba(0, 0, 0, .22) !important;
}

.alert {
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .22);
}

/* Public landing page */
.min-vh-100 {
    background:
        radial-gradient(circle at 16% 8%, rgba(34, 211, 238, .18), transparent 30%),
        radial-gradient(circle at 82% 12%, rgba(124, 92, 255, .22), transparent 28%),
        linear-gradient(135deg, #020617, #07111f 54%, #170b32) !important;
}

#formulario {
    border-radius: 30px !important;
}

/* Client public card */
.portal-language-switch {
    filter: drop-shadow(0 18px 32px rgba(0, 0, 0, .22));
}

.portal-page {
    background-size: 46px 46px, 46px 46px, auto, auto !important;
}

.profile-card {
    border-radius: 34px !important;
    border-color: rgba(118, 151, 205, .25) !important;
    box-shadow: 0 42px 120px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
    backdrop-filter: blur(18px) saturate(145%);
}

.avatar {
    box-shadow: 0 24px 54px rgba(0, 0, 0, .26), 0 0 0 8px rgba(255, 255, 255, .035) !important;
}

.service,
.landing-card {
    border-radius: 20px !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .04);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.service:hover,
.landing-card:hover {
    border-color: color-mix(in srgb, var(--accent, #22d3ee) 52%, transparent) !important;
    transform: translateY(-2px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .06);
}

@media (max-width: 767.98px) {
    .es-navbar {
        width: calc(100% - 18px);
        margin-top: 9px;
        border-radius: 22px;
    }

    .es-navbar .container {
        gap: .7rem;
    }

    .navbar-brand img {
        max-height: 28px;
    }

    .display-3,
    .display-4 {
        font-size: clamp(2.2rem, 12vw, 3.25rem) !important;
    }

    .pricing-card,
    .col-md-5 .rounded-5,
    .col-lg-4 .rounded-5,
    .col-lg-5 > .rounded-5,
    #formulario,
    .profile-card {
        border-radius: 24px !important;
    }
}