@import 'InfoMarcas.WebApp.Client.cn0uld8y88.bundle.scp.css';
@import '_content/InfoMarcas.DesignSystem/InfoMarcas.DesignSystem.ruo21kmgj8.bundle.scp.css';
@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';
@import '_content/ReactorBlazorQRCodeScanner/ReactorBlazorQRCodeScanner.boasv5qmh0.bundle.scp.css';

/* /Components/Account/StaticCountryPhonePicker.razor.rz.scp.css */
*[b-m2b26jbpp0] {
    padding: 0;
}

.im-select-box label[b-m2b26jbpp0] {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-style: normal;
    font-size: var(--font-size-body);
    line-height: 20px;
}

.im-select-box input[b-m2b26jbpp0]::placeholder {
    color: var(--color-neutral-500, #5F5F5F);
}

.im-selected-option.color-ligth-gray-vector[b-m2b26jbpp0] {
    border: 1px solid var(--color-border-input, #7B7B7B);
    padding: 8px 12px;
}

.im-selected-option .arrow[b-m2b26jbpp0] {
    height: 8px;
    margin-left: 4px;
    transition: transform 0.2s ease-out;
}

.im-selected-option .active .arrow[b-m2b26jbpp0] {
    transform: translateY(-50%) rotate(-180deg);
}

.im-select-box[b-m2b26jbpp0] {
    position: relative;
}

.im-select-box input[b-m2b26jbpp0] {
    padding-left: 4px;
    width: 100%;
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans', sans-serif);
    font-size: 16px;
    line-height: 1.3;
    color: var(--color-neutral-800, #262626);
    border: 1px solid transparent;
    outline: none;
}

.im-selected-option[b-m2b26jbpp0] {
    background-color: #ffffff;
    overflow: hidden;
    display: flex;
    gap: 12px;
    align-items: center;
}

.im-selected-option div[b-m2b26jbpp0] {
    position: relative;
    display: flex;
    cursor: pointer;
}

.im-selected-option svg[b-m2b26jbpp0] {
    height: 25px;
    width: auto;
    margin-right: 8px;
}

.im-selected-option div.active[b-m2b26jbpp0]::after {
    transform: translateY(-50%) rotate(225deg);
}

.im-select-box .im-options[b-m2b26jbpp0] {
    z-index: 1000;
    position: absolute;
    top: 100%;
    margin-top: 4px;
    width: 80%;
    background-color: #fff;
    border-radius: .5rem;
    display: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.im-select-box .im-options.active[b-m2b26jbpp0] {
    display: block;
}

.im-select-box .im-options[b-m2b26jbpp0]::before {
    position: absolute;
    content: "";
    left: 1rem;
    top: -1.1rem;
    width: 0;
    height: 0;
    border: .6rem solid transparent;
    border-bottom-color: var(--color-accent, #1a2c3d);
}

input.im-search-box[b-m2b26jbpp0] {
    background-color: var(--color-accent, #1a2c3d);
    color: #fff;
    border-radius: .5rem .5rem 0 0;
    padding: 1.4rem 1rem;
    caret-color: white;
    width: 100%;
    box-sizing: border-box;
}

input.im-search-box[b-m2b26jbpp0]::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.im-select-box ol[b-m2b26jbpp0] {
    list-style: none;
    max-height: 23rem;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

.im-select-box ol[b-m2b26jbpp0]::-webkit-scrollbar {
    width: 0.6rem;
}

.im-select-box ol[b-m2b26jbpp0]::-webkit-scrollbar-thumb {
    width: 0.4rem;
    height: 3rem;
    background-color: #c3c3c9;
    border-radius: .4rem;
}

.im-select-box ol li[b-m2b26jbpp0] {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.im-select-box ol li.hide[b-m2b26jbpp0] {
    display: none;
}

.im-select-box ol li:not(:last-child)[b-m2b26jbpp0] {
    border-bottom: .1rem solid #eee;
}

.im-select-box ol li:hover[b-m2b26jbpp0] {
    background-color: lightcyan;
}

.im-select-box ol li.country-separator[b-m2b26jbpp0] {
    padding: 0 1rem;
    cursor: default;
    pointer-events: none;
}

.im-select-box ol li.country-separator:hover[b-m2b26jbpp0] {
    background-color: transparent;
}

.im-select-box ol li.country-separator hr[b-m2b26jbpp0] {
    border: none;
    border-top: 1px solid #ccc;
    margin: 0;
}

.im-select-box ol li div[b-m2b26jbpp0] {
    display: flex;
    align-items: center;
    gap: 0;
}

.im-select-box ol li .country-name[b-m2b26jbpp0] {
    margin-left: .6rem;
    font-family: var(--font-primary, 'Nunito Sans', sans-serif);
    font-size: 0.95rem;
}

.im-select-box ol li .country-code[b-m2b26jbpp0] {
    color: #888;
    font-size: 0.9rem;
    white-space: nowrap;
    margin-left: 0.5rem;
}

.im-selected-option.color-ligth-gray-vector.border-radius-4[b-m2b26jbpp0] {
    height: 40px;
    border-radius: 4px;
}

.phone-prefix[b-m2b26jbpp0] {
    white-space: nowrap;
    color: var(--color-neutral-500, #5F5F5F);
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans', sans-serif);
    font-size: 16px;
    user-select: none;
}

.im-code-menu[b-m2b26jbpp0] {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.im-code-menu-country[b-m2b26jbpp0] {
    display: flex;
    align-items: center;
}

.im-code-menu-country img[b-m2b26jbpp0] {
    vertical-align: middle;
}

.im-picker-arrow-container[b-m2b26jbpp0] {
    display: flex;
    align-items: center;
}

@media(max-width: 787px) {
    .im-select-box .im-options[b-m2b26jbpp0] {
        width: 100%;
    }
}
/* /Components/Layout/Footer.razor.rz.scp.css */
.site-footer[b-8ku5dwbbr7] {
    background-color: var(--color-base-black, #000);
    color: var(--color-base-white);
    padding: 32px 24px;
    font-family: var(--font-primary);
}

/* Estrutura base */
.footer-row[b-8ku5dwbbr7] {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    width: 100%;
}

    .footer-row:last-child[b-8ku5dwbbr7] {
        margin-bottom: 0;
    }

/* Links */
.footer-links[b-8ku5dwbbr7] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    margin: 0;
    justify-content: center;
    list-style: none;
}

    .footer-links a[b-8ku5dwbbr7] {
        color: var(--color-base-white);
        text-decoration: none;
        font-size: var(--font-size-body);
    }

        .footer-links a:hover[b-8ku5dwbbr7] {
            text-decoration: underline;
        }

/* Social icons */
.social-icon[b-8ku5dwbbr7] {
    width: 32px;
    height: 32px;
}

.social-icon-link[b-8ku5dwbbr7] {
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Store buttons (Figma-faithful) */
.store-btn[b-8ku5dwbbr7] {
    display: inline-flex;
    align-items: center;
    gap: 7.5px;
    width: 137px;
    height: 40px;
    padding: 0.5px 15.5px;
    background-color: var(--color-base-black, #000);
    border: 0.5px solid var(--color-base-white, #fff);
    border-radius: 8.75px;
    text-decoration: none;
    box-sizing: border-box;
}

.store-btn-icon[b-8ku5dwbbr7] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.store-btn-text[b-8ku5dwbbr7] {
    display: flex;
    flex-direction: column;
    height: 25px;
    min-width: 0;
}

.store-btn-subtitle[b-8ku5dwbbr7] {
    font-family: var(--font-primary);
    font-size: 7.5px;
    font-weight: var(--font-weight-regular, 400);
    line-height: 10px;
    color: var(--color-base-white, #fff);
    opacity: 0.9;
    white-space: nowrap;
}

.store-btn-title[b-8ku5dwbbr7] {
    font-family: var(--font-primary);
    font-size: 12.5px;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 17.5px;
    letter-spacing: -0.2808px;
    color: var(--color-base-white, #fff);
    white-space: nowrap;
    margin-top: -2.5px;
}

/* Copyright */
.footer-copyright[b-8ku5dwbbr7] {
    text-align: center;
    font-size: var(--font-size-body);
    opacity: 0.8;
}

/* =========================
   Breakpoints
   ========================= */

/* Desktop (≥1024px) */
@media (min-width: 1024px) {
    .site-footer[b-8ku5dwbbr7] {
        padding: 40px 48px;
    }

    .footer-row.main[b-8ku5dwbbr7] {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "logo apps social"
            "links links links";
        align-items: center;
        gap: 24px 32px;
        max-width: 1200px;
        margin-inline: auto;
        text-align: initial;
    }

    .footer-logo[b-8ku5dwbbr7] {
        grid-area: logo;
        justify-self: anchor-center;
    }

    .footer-apps[b-8ku5dwbbr7] {
        grid-area: apps;
        justify-self: center;
        text-align: center;
    }

    .footer-social[b-8ku5dwbbr7] {
        grid-area: social;
        justify-self: anchor-center;
        text-align: right;
        display: flex;
        align-items: flex-end;
    }

        .footer-social[b-8ku5dwbbr7]  p {
            margin-bottom: 14px;
        }

    .footer-apps-buttons[b-8ku5dwbbr7] {
        display: flex;
        gap: 8px;
        justify-content: center;
        align-items: center;
    }

    .social-icons[b-8ku5dwbbr7] {
        display: flex;
        gap: 0;
        justify-content: flex-end;
    }

        .social-icons[b-8ku5dwbbr7]  a:first-child {
            padding: 8px 0 8px 8px;
        }

        .social-icons[b-8ku5dwbbr7]  a:last-child {
            padding: 8px 8px 8px 0;
        }

    .social-icon[b-8ku5dwbbr7] {
        width: 40px;
        height: 40px;
    }

    .footer-links[b-8ku5dwbbr7] {
        grid-area: links;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px 32px;
        list-style: none;
        padding: 16px 0;
        margin: 12px auto 0;
        border-top: 1px solid var(--gray-color-neutral-700,#434343);
        border-bottom: 1px solid var(--gray-color-neutral-700,#434343);
        width: min(1120px,88vw);
    }

        .footer-links li[b-8ku5dwbbr7] {
            display: inline-flex;
            align-items: center;
            position: relative;
            padding-left: 14px;
        }

            .footer-links li[b-8ku5dwbbr7]::before {
                content: "•";
                position: absolute;
                left: 0;
                line-height: 1;
                color: var(--color-base-white);
                opacity: .9;
            }

        .footer-links a[b-8ku5dwbbr7] {
            font-weight: var(--font-weight-regular);
        }

    .footer-copyright[b-8ku5dwbbr7] {
        text-align: center;
    }
}


/* Tablet Landscape (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .site-footer[b-8ku5dwbbr7] {
        padding: 32px 34px;
    }

    .footer-row.main[b-8ku5dwbbr7] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 0;
    }

    .footer-apps[b-8ku5dwbbr7] {
        margin: 0 0 16px 0;
        text-align: center;
    }

    .footer-apps-buttons[b-8ku5dwbbr7] {
        display: flex;
        gap: 8px;
        justify-content: center;
        align-items: center;
    }

    .footer-social[b-8ku5dwbbr7] {
        margin: 12px 0 0 0;
    }

    .social-icons[b-8ku5dwbbr7] {
        display: flex;
        justify-content: center;
    }

    .social-icon[b-8ku5dwbbr7] {
        width: 36px;
        height: 36px;
    }

    .footer-links[b-8ku5dwbbr7] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px 16px;
        list-style: none;
        padding: 24px 0;
        margin: 24px 0;
        border-top: 1px solid var(--gray-color-neutral-700, #434343);
        border-bottom: 1px solid var(--gray-color-neutral-700, #434343);
        width: 100%;
        max-width: 980px;
    }

        .footer-links li[b-8ku5dwbbr7] {
            display: inline-flex;
            align-items: center;
            position: relative;
            padding-left: 14px;
        }

            .footer-links li[b-8ku5dwbbr7]::before {
                content: "•";
                position: absolute;
                left: 0;
                line-height: 1;
                color: var(--color-base-white);
                opacity: .9;
            }

        .footer-links a[b-8ku5dwbbr7] {
            font-weight: var(--font-weight-regular);
        }

    .footer-row:last-child[b-8ku5dwbbr7] {
        justify-content: center;
    }

    .footer-row .footer-copyright[b-8ku5dwbbr7] {
        width: 100%;
        border-top: 1px solid var(--gray-color-neutral-700, #434343);
        margin-top: 24px;
        padding-top: 16px;
        text-align: center;
    }
}



/* Tablet Portrait (390px–767px) */
@media (min-width: 390px) and (max-width: 767px) {
    .footer-row.main[b-8ku5dwbbr7] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 0px;
    }

    .footer-links[b-8ku5dwbbr7] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px 16px;
        margin: 24px 0 24px 0;
        padding: 24px 0;
        border-top: 1px solid var(--gray-color-neutral-700, #434343);
        border-bottom: 1px solid var(--gray-color-neutral-700, #434343);
        list-style: none;
    }

        .footer-links li[b-8ku5dwbbr7] {
            display: inline-flex;
            align-items: center;
            position: relative;
            padding-left: 14px;
            list-style: none !important;
        }

            .footer-links li[b-8ku5dwbbr7]::before {
                content: '•';
                position: absolute;
                left: 0;
                line-height: 1;
                font-family: var(--font-primary);
                font-size: inherit;
                color: var(--color-base-white);
                opacity: .9;
            }

        .footer-links a[b-8ku5dwbbr7] {
            font-weight: var(--font-weight-regular);
            text-decoration: none;
        }

    .footer-apps[b-8ku5dwbbr7] {
        margin: 0 0 16px 0;
        text-align: center;
    }

    .footer-apps-buttons[b-8ku5dwbbr7] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

    .footer-social[b-8ku5dwbbr7] {
        margin: 12px 0 0 0;
    }

    .social-icons[b-8ku5dwbbr7] {
        display: flex;
        justify-content: center;
    }

    .social-icon[b-8ku5dwbbr7] {
        width: 36px;
        height: 36px;
    }

    .footer-row:last-child[b-8ku5dwbbr7] {
        justify-content: center;
    }

    .footer-row .footer-copyright[b-8ku5dwbbr7] {
        width: 100%;
        border-top: 1px solid var(--gray-color-neutral-700, #434343);
        margin-top: 24px;
        padding-top: 16px;
    }
}

/* Mobile (≤489px) */
@media (max-width: 489px) {
    .site-footer[b-8ku5dwbbr7] {
        padding: 24px 16px;
    }

    .footer-row.main[b-8ku5dwbbr7] {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .footer-logo[b-8ku5dwbbr7] {
        margin-bottom: 0;
    }

    .footer-links[b-8ku5dwbbr7] {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
        width: 100%;
        list-style: none;
        padding: 24px 0;
        margin: 0;
        border-top: 1px solid var(--gray-color-neutral-700, #434343);
        border-bottom: 1px solid var(--gray-color-neutral-700, #434343);
    }

        .footer-links li[b-8ku5dwbbr7] {
            border: none;
            padding-left: 0;
            position: static;
        }

            .footer-links li[b-8ku5dwbbr7]::before {
                content: none;
            }

            .footer-links li:last-child[b-8ku5dwbbr7] {
                border-bottom: none;
            }

        .footer-links a[b-8ku5dwbbr7] {
            font-weight: var(--font-weight-regular);
        }

    .footer-apps[b-8ku5dwbbr7] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        text-align: center;
        margin: 0;
    }

        .footer-apps p[b-8ku5dwbbr7] {
            margin-bottom: 0;
            font-weight: var(--font-weight-bold, 700);
            font-size: 14px;
            line-height: 20px;
        }

    .footer-apps-buttons[b-8ku5dwbbr7] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

        .footer-apps-buttons a[b-8ku5dwbbr7] {
            margin: 0;
        }

    .footer-social[b-8ku5dwbbr7] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        text-align: center;
        margin: 0;
    }

        .footer-social p[b-8ku5dwbbr7] {
            margin-bottom: 0;
            font-weight: var(--font-weight-bold, 700);
            font-size: 14px;
            line-height: 20px;
        }

    .social-icons[b-8ku5dwbbr7] {
        display: flex;
        justify-content: center;
        gap: 8px;
    }

    .footer-copyright[b-8ku5dwbbr7] {
        margin-top: 0;
        padding-top: 24px;
        border-top: 1px solid var(--gray-color-neutral-700, #434343);
        font-size: 14px;
        line-height: 20px;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Menu sandwiche lateral fixo */
.new-nav-menu-item[b-c3lq61w6yp] {
    display: flex;
    gap: 8px;
    margin-block: 6px;
    padding-inline: 5px;
    cursor: pointer;
}

.navbar-search-box input[b-c3lq61w6yp]::placeholder {
    color: var(--color-neutral-500, #5F5F5F);
    font-size: 16px;
}

.new-nav-menu-container[b-c3lq61w6yp] {
    position: absolute;
    top: 60px;
    right: -1rem;
    min-width: 292px;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 8px rgba(0,0,0,0.08);
    z-index: 9999;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border-radius: 0 0 0 8px;
}

/* Desktop e tablet: limitar largura do menu dropdown */
@media (min-width: 768px) {
    .new-nav-menu-container[b-c3lq61w6yp] {
        width: 320px;
        height: auto;
        max-width: 320px;
        right: 0;
        left: auto;
        padding: 1rem;
        border-radius: 0 0 0 8px;
    }
}

.navbar-toggler[b-c3lq61w6yp] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

    .navbar-toggler:checked[b-c3lq61w6yp] {
        background-color: rgba(255, 255, 255, 0.5);
    }

.top-row[b-c3lq61w6yp] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-c3lq61w6yp] {
    font-size: 1.1rem;
}

.bi[b-c3lq61w6yp] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.nav-item[b-c3lq61w6yp] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-c3lq61w6yp] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-c3lq61w6yp] {
        padding-bottom: 1rem;
    }

    .nav-item[b-c3lq61w6yp]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

    .nav-item[b-c3lq61w6yp]  a.active {
        background-color: rgba(255,255,255,0.37);
        color: white;
    }

    .nav-item[b-c3lq61w6yp]  .nav-link:hover {
        background-color: rgba(255,255,255,0.1);
        color: white;
    }

.nav-scrollable[b-c3lq61w6yp] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-c3lq61w6yp] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-c3lq61w6yp] {
        display: none;
    }

    .nav-scrollable[b-c3lq61w6yp] {
        display: block;
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* Mobile-only and Desktop-only classes */
.mobile-only[b-c3lq61w6yp] {
    display: block;
}

.desktop-only[b-c3lq61w6yp] {
    display: none;
}

.brand-logo-mobile[b-c3lq61w6yp] {
    display: inline-flex;
}

.brand-logo-desktop[b-c3lq61w6yp] {
    display: none;
}

@media (min-width: 768px) {
    .mobile-only[b-c3lq61w6yp] {
        display: none;
    }

    .desktop-only[b-c3lq61w6yp] {
        display: block;
    }

    .brand-logo-mobile[b-c3lq61w6yp] {
        display: none;
    }

    .brand-logo-desktop[b-c3lq61w6yp] {
        display: inline-flex;
    }
}

/* ── Mobile slide animations (< 768px) ── */
@keyframes navSlideIn-b-c3lq61w6yp {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes navSlideOut-b-c3lq61w6yp {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

@keyframes backdropFadeIn-b-c3lq61w6yp {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes backdropFadeOut-b-c3lq61w6yp {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@media (max-width: 767.98px) {
    [b-c3lq61w6yp] #navmenu-dropdown[data-open="true"] > .new-nav-menu-container {
        animation: navSlideIn-b-c3lq61w6yp 0.3s ease forwards;
    }

    [b-c3lq61w6yp] #navmenu-dropdown[data-open="true"] > .nav-menu-backdrop {
        animation: backdropFadeIn-b-c3lq61w6yp 0.3s ease forwards;
    }

    [b-c3lq61w6yp] #navmenu-dropdown[data-closing="true"] > .new-nav-menu-container {
        animation: navSlideOut-b-c3lq61w6yp 0.3s ease forwards;
    }

    [b-c3lq61w6yp] #navmenu-dropdown[data-closing="true"] > .nav-menu-backdrop {
        animation: backdropFadeOut-b-c3lq61w6yp 0.3s ease forwards;
    }
}
/* /Components/Pages/Account/CompletaTuRegistro.razor.rz.scp.css */
/* ── Page container ── */
.complete-register-container[b-gla4nzfwqr] {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 16px;
}

@media(min-width: 0px) {
    .complete-register-container[b-gla4nzfwqr] {
        max-width: 358px;
    }
}

@media(min-width: 768px){
    .complete-register-container[b-gla4nzfwqr] {
        max-width: 720px;
    }
}

@media(min-width: 1024px) {
    .complete-register-container[b-gla4nzfwqr] {
        max-width: 720px;
    }
}

@media(min-width: 1400px){
    .complete-register-container[b-gla4nzfwqr] {
        max-width: 720px;
    }
}

/* ── Content wrapper ── */
.cr-content[b-gla4nzfwqr] {
    display: flex;
    flex-direction: column;
}

/* ── Header / title ── */
.cr-header[b-gla4nzfwqr] {
    margin-bottom: 40px;
}

.cr-title[b-gla4nzfwqr] {
    font-family: var(--font-family-Poppins, "Poppins"), sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: #000;
    margin: 0;
}

/* ── Form ── */
.cr-form[b-gla4nzfwqr] {
    display: flex;
    flex-direction: column;
}

/* ── Fields block ── */
.cr-fields[b-gla4nzfwqr] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Two-column name / password rows ── */
.name-container[b-gla4nzfwqr],
.password-container[b-gla4nzfwqr] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* ── Form group ── */
.form-group[b-gla4nzfwqr] {
    display: flex;
    flex-direction: column;
}

.form-group label[b-gla4nzfwqr] {
    display: block;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans"), sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: #262626;
    margin-bottom: 8px;
}

/* ── Inputs ── */
.form-group .form-control[b-gla4nzfwqr] {
    width: 100%;
    padding: 8px 12px;
    min-height: 40px;
    border: 1px solid var(--color-border-input, #7B7B7B);
    border-radius: 4px;
    background: #fff;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans"), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    color: #000;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.form-group .form-control:focus[b-gla4nzfwqr] {
    outline: none;
    border-color: #1952A6;
    box-shadow: 0 0 0 2px rgba(25, 82, 166, 0.15);
}

/* ── Submit row ── */
.cr-submit-row[b-gla4nzfwqr] {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.cr-submit-container[b-gla4nzfwqr] {
    width: 100%;
}

/* ── Password field wrapper (input + toggle) ── */
.password-field-wrapper[b-gla4nzfwqr] {
    position: relative;
    display: flex;
    align-items: center;
}

.password-field-wrapper .form-control[b-gla4nzfwqr] {
    padding-right: 44px;
}

.password-toggle-btn[b-gla4nzfwqr] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle-btn .eye-open[b-gla4nzfwqr] {
    display: none;
}

.password-toggle-btn.visible .eye-closed[b-gla4nzfwqr] {
    display: none;
}

.password-toggle-btn.visible .eye-open[b-gla4nzfwqr] {
    display: block;
}

/* ── Password hint (no background box) ── */
.password-hint[b-gla4nzfwqr] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    background: none;
    padding: 0;
    border-radius: 0;
}

.password-hint .hint-icon[b-gla4nzfwqr] {
    flex-shrink: 0;
}

/* Default: show info icon, hide error icon */
.password-hint .hint-icon-error[b-gla4nzfwqr] {
    display: none;
}

.password-hint span:not(.hint-icon):not(.hint-icon-info):not(.hint-icon-error)[b-gla4nzfwqr] {
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans"), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #1952A6;
}

/* Error state: swap icons and turn text red */
.password-hint.is-error .hint-icon-info[b-gla4nzfwqr] {
    display: none;
}

.password-hint.is-error .hint-icon-error[b-gla4nzfwqr] {
    display: block;
}

.password-hint.is-error span:not(.hint-icon):not(.hint-icon-info):not(.hint-icon-error)[b-gla4nzfwqr] {
    color: var(--color-feedback-negative-700, #A61919);
}


/* ── Field error spacing (8px below input) ── */
[b-gla4nzfwqr] .field-error {
    margin-top: 8px;
}

/* ── Error border on inputs ── */
.form-group.has-error .form-control[b-gla4nzfwqr] {
    border-color: var(--color-feedback-negative-700, #A61919);
}

.form-group.has-error .password-field-wrapper .form-control[b-gla4nzfwqr] {
    border-color: var(--color-feedback-negative-700, #A61919);
}

/* ── Blazor validation messages (hidden; JS handles UX) ── */
.text-danger[b-gla4nzfwqr] {
    color: #B91C1C;
    font-size: 12px;
    margin-top: 4px;
    display: none;
}

/* ── Status messages ── */
.message-container[b-gla4nzfwqr] {
    margin-top: 1rem;
    padding: 12px 16px;
    border-radius: 4px;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans"), sans-serif;
    font-size: 14px;
}

.message-container.error[b-gla4nzfwqr] {
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
    color: #B91C1C;
}

.message-container.success[b-gla4nzfwqr] {
    background-color: #F0FDF4;
    border: 1px solid #BBF7D0;
    color: #15803D;
}

/* ── Error-state container ── */
.error-container[b-gla4nzfwqr] {
    text-align: center;
    padding: 2rem;
}

.error-container p[b-gla4nzfwqr] {
    color: #B91C1C;
    margin-bottom: 1rem;
}

.error-container a[b-gla4nzfwqr] {
    color: #1952A6;
    text-decoration: underline;
}

/* ── SSR Toast ── */
.ssr-toast[b-gla4nzfwqr] {
    position: fixed;
    top: calc(3.5rem + 40px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 4px;
    background: var(--background-color-surface-app, #fafafa);
    border: 1px solid var(--feedback-positive-color-feedback-positive-700, #278B12);
    color: #000;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans"), sans-serif;
    font-size: 14px;
    z-index: 9999;
    box-shadow: 0px 20px 20px -4px rgba(0, 0, 0, 0.08),
                0px 8px 8px -2px rgba(0, 0, 0, 0.04);
    width: 442px;
    max-width: calc(100vw - 32px);
}

.ssr-toast-bar[b-gla4nzfwqr] {
    align-self: stretch;
    width: 4px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--feedback-positive-color-feedback-positive-700, #278B12);
}

.ssr-toast-icon[b-gla4nzfwqr] {
    flex-shrink: 0;
    font-size: 32px;
    color: var(--feedback-positive-color-feedback-positive-700, #278B12);
    line-height: 1;
}

.ssr-toast-body[b-gla4nzfwqr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px;
    min-width: 0;
}

.ssr-toast-title[b-gla4nzfwqr] {
    font-weight: 700;
    font-size: 16px;
    color: #000;
    line-height: 1.3;
}

.ssr-toast-text[b-gla4nzfwqr] {
    font-weight: 400;
    font-size: 14px;
    color: #000;
    line-height: 20px;
}

.ssr-toast-close[b-gla4nzfwqr] {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    color: #262626;
    font-size: 24px;
    line-height: 1;
}

.ssr-toast-close:hover[b-gla4nzfwqr] {
    color: #000;
}

/* ── Desktop (≥768px) ── */
@media (min-width: 768px) {
    .complete-register-container[b-gla4nzfwqr] {
        padding: 80px 0;
    }

    .cr-header[b-gla4nzfwqr] {
        margin-bottom: 56px;
    }

    .cr-fields[b-gla4nzfwqr] {
        gap: 32px;
    }

    .name-container[b-gla4nzfwqr],
    .password-container[b-gla4nzfwqr] {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .cr-submit-container[b-gla4nzfwqr] {
        width: 352px;
    }
}
/* /Components/Pages/Account/Login.razor.rz.scp.css */
body[b-rpz4pokzre] {
    background-color: var(--color-primary);
}

/* ── Wrapper / Container ── */
.login-wrapper[b-rpz4pokzre] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 80px 16px;
}


.login-container[b-rpz4pokzre] {
    width: 100%;
    max-width: 480px;
    padding-bottom:32px;
}

@media (max-width: 768px) {
    .login-container[b-rpz4pokzre] {
        max-width: 368px;
    }
}
/* ── Content (EditForm direct child container) ── */
.login-content[b-rpz4pokzre] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* ── Form fields + forgot password ── */
.form-fields-group[b-rpz4pokzre] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* ── Inputs area (phone section + password section) ── */
.inputs-group[b-rpz4pokzre] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* ── Title + Phone section (gap 56px between title and phone input) ── */
.title-phone-section[b-rpz4pokzre] {
    display: flex;
    flex-direction: column;
    gap: 56px;
    width: 100%;
}

/* ── Single input field (label + input + error) ── */
.input-field[b-rpz4pokzre] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 488px;
    min-width: 0;
}

/* ── Title ── */
.login-title[b-rpz4pokzre] {
    font-family: var(--font-family-Poppins, "Poppins", sans-serif);
    font-size: 20px;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 24px;
    color: var(--color-base-black, #000);
    margin: 0;
}

/* ── Field label ── */
.field-label[b-rpz4pokzre] {
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans", sans-serif);
    font-size: 16px;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.2;
    color: var(--color-neutral-800, #262626);
    display: block;
}

/* ── Recovery link ── */
.recovery-link[b-rpz4pokzre] {
    color: var(--color-feedback-info-700, #1952A6);
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans", sans-serif);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--font-weight-regular, 400);
    line-height: 20px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    background-color: transparent;
    border: 0;
}

/* ── Button area ── */
.button-area[b-rpz4pokzre] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

.create-account-btn[b-rpz4pokzre] {
    display: inline-flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    background: none;
    border: 1px solid var(--color-neutral-400, #9D9D9D);
    cursor: pointer;
}

.create-account-btn.is-disabled[b-rpz4pokzre] {
    pointer-events: none;
    opacity: 0.65;
}

    .create-account-btn span[b-rpz4pokzre] {
        color: var(--color-neutral-400, #9D9D9D);
        text-align: center;
        font-family: var(--font-family-Poppins, "Poppins", sans-serif);
        font-size: 14px;
        font-style: normal;
        font-weight: var(--font-weight-medium, 500);
        line-height: 20px;
    }


/* ── Password input: contrato de campo del DS (era el único campo crudo
     de Login — heredaba el borde #CED4DA de Bootstrap) ── */
.password-input-wrapper input.form-control[b-rpz4pokzre] {
    width: 100%;
    min-height: var(--input-min-height, 40px);
    padding: 8px 12px;
    border: 1px solid var(--input-border, #7B7B7B);
    border-radius: var(--input-radius, 4px);
    background-color: var(--input-bg, #FFF);
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans", sans-serif);
    font-size: 16px;
    line-height: 1.3;
    color: var(--input-text, #000);
}

    .password-input-wrapper input.form-control:focus[b-rpz4pokzre] {
        border-color: var(--input-border-focus, #077574);
        box-shadow: 0 0 0 1px var(--input-border-focus, #077574);
        outline: none;
    }

/* Error border state for password input */
.password-input-wrapper.has-error input[b-rpz4pokzre] {
    border-color: var(--color-feedback-negative-700, #A61919);
}

    .password-input-wrapper.has-error input:focus[b-rpz4pokzre] {
        border-color: var(--color-feedback-negative-700, #A61919);
        box-shadow: 0 0 0 1px var(--color-feedback-negative-700, #A61919);
    }

/* ── Password input wrapper for toggle ── */
.password-input-wrapper[b-rpz4pokzre] {
    position: relative;
    display: flex;
    align-items: center;
}

    .password-input-wrapper input[b-rpz4pokzre] {
        padding-right: 40px;
        margin-bottom: 0;
    }

.password-toggle-btn[b-rpz4pokzre] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

    .password-toggle-btn .eye-open[b-rpz4pokzre] {
        display: none;
    }

    .password-toggle-btn .eye-closed[b-rpz4pokzre] {
        display: block;
    }

    .password-toggle-btn.visible .eye-open[b-rpz4pokzre] {
        display: block;
    }

    .password-toggle-btn.visible .eye-closed[b-rpz4pokzre] {
        display: none;
    }

/* ── Responsive: Tablet Portrait (≤ 834px) ── */
@media (max-width: 834px) {
    .login-wrapper[b-rpz4pokzre] {
        padding-top: 60px;
    }
}

/* ── Responsive: Mobile (≤ 480px) ── */
@media (max-width: 480px) {
    .login-wrapper[b-rpz4pokzre] {
        padding-top: 40px;
        padding-bottom: 32px;
    }

    .title-phone-section[b-rpz4pokzre] {
        gap: 32px;
    }
}
/* /Components/Pages/Account/Logout.razor.rz.scp.css */
.logout-container[b-atonr28123] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.logout-content[b-atonr28123] {
    text-align: center;
    padding: 2rem;
}

.logout-content p[b-atonr28123] {
    margin-top: 1rem;
    color: #666;
    font-size: 1.1rem;
}
/* /Components/Pages/Account/Recuperacion.razor.rz.scp.css */
.recuperacion-wrapper[b-9fr2cqautp] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 80px 16px;
}

@media(max-width: 1023px) {
    .recuperacion-wrapper[b-9fr2cqautp] {
        padding-bottom: 160px;
    }
}

.recuperacion-container[b-9fr2cqautp] {
    width: 100%;
    max-width: 480px;
    padding-bottom: 32px;
}

@media (max-width: 767px) {
    .recuperacion-container[b-9fr2cqautp] {
        max-width: 358px;
    }
}

.form-group[b-9fr2cqautp] {
    margin-bottom: 24px !important;
}

.back-link[b-9fr2cqautp] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-base-black, #000);
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 14px;
    font-weight: var(--font-weight-medium, 500);
    line-height: 20px;
    text-decoration: none;
    margin-bottom: 16px;
}

.phone-picker-wrapper[b-9fr2cqautp] {
    --phone-focus-border-color: var(--color-border-input-focus, #077574);
    --phone-focus-ring: none;
    --phone-focus-outline: 2px solid var(--color-border-input-focus, #077574);
    --phone-focus-outline-offset: 2px;
    --phone-focus-radius: 8px;
    --phone-error-outline: none;
    --phone-error-outline-offset: 0;
    --phone-error-focus-outline: var(--phone-focus-outline);
    --phone-error-focus-outline-offset: var(--phone-focus-outline-offset);
    --phone-error-focus-ring: var(--phone-focus-ring);
}

.phone-picker-wrapper[b-9fr2cqautp]  .im-selected-option {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.phone-picker-wrapper[b-9fr2cqautp]  .im-selected-option:focus-within,
.phone-picker-wrapper[b-9fr2cqautp]  .im-selected-option:active {
    border-color: var(--phone-focus-border-color);
    box-shadow: var(--phone-focus-ring);
    border-radius: var(--phone-focus-radius);
    outline: var(--phone-focus-outline);
    outline-offset: var(--phone-focus-outline-offset);
}

.phone-picker-wrapper.has-error[b-9fr2cqautp]  .im-selected-option {
    border-color: var(--color-feedback-negative-700, #A61919);
    outline: var(--phone-error-outline);
    outline-offset: var(--phone-error-outline-offset);
    box-shadow: none;
}

.phone-picker-wrapper.has-error[b-9fr2cqautp]  .im-selected-option:focus-within,
.phone-picker-wrapper.has-error[b-9fr2cqautp]  .im-selected-option:active {
    border-color: var(--color-feedback-negative-700, #A61919);
    outline: var(--phone-error-focus-outline);
    outline-offset: var(--phone-error-focus-outline-offset);
    box-shadow: var(--phone-error-focus-ring);
}

.field-label[b-9fr2cqautp] {
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans", sans-serif);
    font-size: 16px;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.2;
    color: var(--color-neutral-800, #262626);
    display: block;
    margin-bottom: 8px;
}

.password-field-wrapper[b-9fr2cqautp] {
    position: relative;
    display: flex;
    align-items: center;
}

    .password-field-wrapper .form-control[b-9fr2cqautp] {
        padding-right: 44px;
    }

.password-toggle-btn[b-9fr2cqautp] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .password-toggle-btn .eye-open[b-9fr2cqautp] {
        display: none;
    }

    .password-toggle-btn.visible .eye-closed[b-9fr2cqautp] {
        display: none;
    }

    .password-toggle-btn.visible .eye-open[b-9fr2cqautp] {
        display: block;
    }

.password-hint[b-9fr2cqautp] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    background: none;
    padding: 0;
    border-radius: 0;
}

    .password-hint .hint-icon[b-9fr2cqautp] {
        flex-shrink: 0;
    }

    .password-hint .hint-icon-error[b-9fr2cqautp] {
        display: none;
    }

    .password-hint span:not(.hint-icon):not(.hint-icon-info):not(.hint-icon-error)[b-9fr2cqautp] {
        font-family: var(--font-family-Nunito-Sans, "Nunito Sans"), sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: #1952A6;
    }

    .password-hint.is-error .hint-icon-info[b-9fr2cqautp] {
        display: none;
    }

    .password-hint.is-error .hint-icon-error[b-9fr2cqautp] {
        display: block;
    }

    .password-hint.is-error span:not(.hint-icon):not(.hint-icon-info):not(.hint-icon-error)[b-9fr2cqautp] {
        color: var(--color-feedback-negative-700, #A61919);
    }

.form-group.has-error .input-44[b-9fr2cqautp],
.form-group.has-error .input-44:focus[b-9fr2cqautp],
.form-group.has-error .input-44:active[b-9fr2cqautp] {
    border-color: var(--color-feedback-negative-700, #A61919) !important;
    box-shadow: none !important;
}

/* ── Field error spacing (8px below input) ── */
[b-9fr2cqautp] .field-error {
    margin-top: 8px;
}

/* Invalid code: closer to OTP inputs and farther from validate button */
[b-9fr2cqautp] .field-error.otp-error-invalid {
    margin-top: 0;
    margin-bottom: 16px;
}

/* Too many attempts: message appears well separated below the buttons */
[b-9fr2cqautp] .field-error.otp-error-too-many {
    margin-top: 24px;
}

.confirm-button-container[b-9fr2cqautp] {
    width: 100%;
    margin-top: 16px;
}

.message-container[b-9fr2cqautp] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 14px;
    line-height: 20px;
}

    .message-container.error[b-9fr2cqautp] {
        background-color: var(--Feedback-Error-color-feedback-error-50, #FEF2F2);
        border: 1px solid var(--Feedback-Error-color-feedback-error-200, #FECACA);
        color: var(--Feedback-Error-color-feedback-error-700, #B91C1C);
    }

    .message-container.success[b-9fr2cqautp] {
        background-color: var(--Feedback-Success-color-feedback-success-50, #F0FDF4);
        border: 1px solid var(--Feedback-Success-color-feedback-success-200, #BBF7D0);
        color: var(--Feedback-Success-color-feedback-success-700, #15803D);
    }

/* Verification code digit inputs */
.section-divider[b-9fr2cqautp] {
    width: 100%;
    height: 1px;
    background-color: var(--color-border-containers, #e5e7eb);
    margin-bottom: 24px;
}

.verification-section[b-9fr2cqautp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

    .verification-section label[b-9fr2cqautp] {
        font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
        font-size: 16px;
        font-weight: 700;
        line-height: 20px;
        color: var(--color-neutral-800, #262626);
        text-align: center;
        margin-bottom: 0 !important;
    }

.verification-digits[b-9fr2cqautp] {
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.digit-input[b-9fr2cqautp] {
    flex: 1 0 0;
    max-width: 56px;
    height: 40px;
    min-height: 40px;
    border: 1px solid var(--color-border-input, #7B7B7B);
    border-radius: 4px;
    background-color: var(--color-base-white, #FFF);
    text-align: center;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 18px;
    line-height: 1;
    color: var(--color-neutral-800, #262626);
    padding: 8px;
    outline: none;
}

    .digit-input:focus[b-9fr2cqautp] {
        border-color: var(--color-primary, #0DAC66);
    }

    .digit-input.digit-error[b-9fr2cqautp] {
        border-color: var(--color-feedback-negative-700, #A61919);
    }

/* Verification buttons */
.verification-buttons[b-9fr2cqautp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    margin-top: 8px;
}

    .verification-buttons .btn[b-9fr2cqautp] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px;
        border-radius: 4px;
        font-family: Poppins, var(--font-secondary, sans-serif);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        cursor: pointer;
        white-space: nowrap;
    }

    .verification-buttons .btn-validate[b-9fr2cqautp] {
        background-color: var(--Primary-color-brand-primary-200, #B7FBDC);
        color: var(--color-neutral-400, #9D9D9D);
        border: none;
        width: 100%;
        order: 1;
    }

        .verification-buttons .btn-validate:not(:disabled)[b-9fr2cqautp] {
            background-color: var(--Primary-color-brand-primary-600, #0DAC66);
            color: #fff;
        }

    .verification-buttons .btn-resend[b-9fr2cqautp] {
        background-color: transparent;
        color: var(--color-neutral-400, #9D9D9D);
        border: 1px solid var(--color-neutral-400, #9D9D9D);
        width: 100%;
        order: 2;
    }



.ssr-toast[b-9fr2cqautp] {
    position: fixed;
    top: calc(3.5rem + 40px);
    left: 50%;
    transform: translate(-50%, -12px);
    opacity: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 4px;
    background: var(--background-color-surface-app, #fafafa);
    border: 1px solid var(--feedback-positive-color-feedback-positive-700, #278B12);
    color: #000;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans"), sans-serif;
    font-size: 14px;
    z-index: 9999;
    box-shadow: 0px 20px 20px -4px rgba(0, 0, 0, 0.08), 0px 8px 8px -2px rgba(0, 0, 0, 0.04);
    width: 358px;
    max-width: calc(100vw - 32px);
    transition: transform 220ms ease, opacity 220ms ease;
}

    .ssr-toast.is-visible[b-9fr2cqautp] {
        transform: translate(-50%, 0);
        opacity: 1;
    }

.ssr-toast-bar[b-9fr2cqautp] {
    align-self: stretch;
    width: 4px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--feedback-positive-color-feedback-positive-700, #278B12);
}

.ssr-toast-icon[b-9fr2cqautp] {
    flex-shrink: 0;
    font-size: 32px;
    color: var(--feedback-positive-color-feedback-positive-700, #278B12);
    line-height: 1;
}

.ssr-toast-body[b-9fr2cqautp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px;
    min-width: 0;
}

.ssr-toast-title[b-9fr2cqautp] {
    font-weight: 700;
    font-size: 16px;
    color: #000;
    line-height: 1.3;
}

.ssr-toast-text[b-9fr2cqautp] {
    font-weight: 400;
    font-size: 14px;
    color: #000;
    line-height: 20px;
}

.ssr-toast-close[b-9fr2cqautp] {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    color: #262626;
    font-size: 24px;
    line-height: 1;
}

    .ssr-toast-close:hover[b-9fr2cqautp] {
        color: #000;
    }
/* /Components/Pages/Account/Registro.razor.rz.scp.css */
body[b-wemmmddt5j] {
    background-color: var(--color-primary);
}

/* ── Wrapper / Container ── */
.registro-wrapper[b-wemmmddt5j] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 80px 16px;
}

.registro-container[b-wemmmddt5j] {
    width: 100%;
    max-width: 480px;
    padding-bottom: 32px;
}

@media(max-width: 767px) {
    .registro-container[b-wemmmddt5j] {
        width: 358px;
    }
}

.registro-container[b-wemmmddt5j]  form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 32px;
}

/* ── Content (EditForm direct child container) ── */
.registro-content[b-wemmmddt5j] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* ── Form fields + terms ── */
.form-fields-group[b-wemmmddt5j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* ── Title + Phone section (gap 56px between title and phone input) ── */
.title-phone-section[b-wemmmddt5j] {
    display: flex;
    flex-direction: column;
    gap: 56px;
    width: 100%;
}

/* ── Title ── */
.registro-title[b-wemmmddt5j] {
    font-family: var(--font-family-Poppins, "Poppins", sans-serif);
    font-size: 20px;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 24px;
    color: var(--color-base-black, #000);
    margin: 0;
}


/* ── Terms ── */
.terms-group[b-wemmmddt5j] {
    margin-bottom: 0;
}

.terms-checkbox-container[b-wemmmddt5j] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border-radius: 4px;
}

    .terms-checkbox-container[b-wemmmddt5j]  .terms-checkbox {
        width: 18px;
        height: 18px;
        cursor: pointer;
        flex-shrink: 0;
        accent-color: #343330;
        margin: 3px;
    }

.terms-label[b-wemmmddt5j] {
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans", sans-serif);
    font-size: 16px;
    font-style: normal;
    font-weight: var(--font-weight-regular, 400);
    line-height: 24px;
    color: var(--color-base-black, #000);
    cursor: pointer;
    margin: 0;
}

.terms-link[b-wemmmddt5j] {
    color: var(--color-feedback-info-700, #1952A6);
    text-decoration: underline;
}

/* ── Button area ── */
.button-area[b-wemmmddt5j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

    .button-area .btn[b-wemmmddt5j] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px;
        border-radius: 4px;
        font-family: var(--font-family-Poppins, "Poppins", sans-serif);
        font-size: 14px;
        font-weight: var(--font-weight-medium, 500);
        line-height: 20px;
        border: none;
        background-color: var(--color-brand-primary-200, #B7FBDC);
        color: var(--color-neutral-400, #9D9D9D);
        cursor: pointer;
        transition: background-color 0.2s;
    }

        .button-area .btn:not(:disabled)[b-wemmmddt5j] {
            background-color: var(--color-brand-primary-600, #0DAC66);
            color: #fff;
        }

/* ── Input matching Figma specs ── */
.registro-container .form-control[b-wemmmddt5j] {
    border: 1px solid var(--color-border-input, #7B7B7B);
    border-radius: 4px;
    min-height: 40px;
    padding: 8px 12px;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans", sans-serif);
    font-size: 16px;
    line-height: 1.3;
    color: var(--color-neutral-800, #262626);
    background-color: var(--color-base-white, #FFF);
}

.registro-container .phone-picker-wrapper[b-wemmmddt5j] {
    --phone-focus-border-color: var(--input-border-focus, #077574);
    --phone-focus-ring: 0 0 0 1px var(--input-border-focus, #077574);
    --phone-focus-outline: none;
}

    .registro-container .form-control:focus[b-wemmmddt5j] {
        border-color: var(--input-border-focus, #077574);
        box-shadow: 0 0 0 1px var(--input-border-focus, #077574);
        outline: none;
    }

    .registro-container .form-control[b-wemmmddt5j]::placeholder {
        color: var(--color-neutral-500, #5F5F5F);
    }

/* ── Section divider ── */
.section-divider[b-wemmmddt5j] {
    width: 100%;
    height: 1px;
    background-color: var(--color-border-containers, #e5e7eb);
}

/* ── Verification code section ── */
.verification-section[b-wemmmddt5j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .verification-section label[b-wemmmddt5j] {
        font-family: var(--font-family-Nunito-Sans, "Nunito Sans", sans-serif);
        font-size: 16px;
        font-weight: var(--font-weight-bold, 700);
        line-height: 20px;
        color: var(--color-neutral-800, #262626);
        text-align: center;
    }

.verification-digits[b-wemmmddt5j] {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.digit-input[b-wemmmddt5j] {
    flex: 1 0 0;
    max-width: 56px;
    height: 40px;
    min-height: 40px;
    border: 1px solid var(--color-border-input, #7B7B7B);
    border-radius: 4px;
    background-color: var(--color-base-white, #FFF);
    text-align: center;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans", sans-serif);
    font-size: 18px;
    line-height: 1;
    color: var(--color-neutral-800, #262626);
    padding: 8px;
    outline: none;
}

    .digit-input:focus[b-wemmmddt5j] {
        border-color: var(--color-primary, #0DAC66);
    }

    .digit-input.digit-error[b-wemmmddt5j] {
        border-color: var(--color-feedback-negative-700, #A61919);
    }

.verification-buttons[b-wemmmddt5j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

    .verification-buttons .btn[b-wemmmddt5j] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px;
        border-radius: 4px;
        font-family: var(--font-family-Poppins, "Poppins", sans-serif);
        font-size: 14px;
        font-weight: var(--font-weight-medium, 500);
        line-height: 20px;
        cursor: pointer;
        white-space: nowrap;
    }

    .verification-buttons .btn-validate[b-wemmmddt5j] {
        background-color: var(--color-brand-primary-200, #B7FBDC);
        color: var(--color-neutral-400, #9D9D9D);
        border: none;
        width: 100%;
    }

        .verification-buttons .btn-validate:not(:disabled)[b-wemmmddt5j] {
            background-color: var(--color-brand-primary-600, #0DAC66);
            color: #fff;
        }

    .verification-buttons .btn-resend[b-wemmmddt5j] {
        background-color: transparent;
        color: var(--color-neutral-400, #9D9D9D);
        border: 1px solid var(--color-neutral-400, #9D9D9D);
        width: 100%;
    }

        .verification-buttons .btn-resend:disabled[b-wemmmddt5j] {
            opacity: 0.5;
            cursor: not-allowed;
        }

    .verification-buttons .btn-validate:disabled[b-wemmmddt5j] {
        cursor: not-allowed;
    }

/* ── Responsive: Tablet Portrait (≤ 834px) ── */
@media (max-width: 834px) {
    .registro-wrapper[b-wemmmddt5j] {
        padding-top: 60px;
    }
}

/* ── Responsive: Mobile (≤ 480px) ── */
@media (max-width: 480px) {
    .registro-wrapper[b-wemmmddt5j] {
        padding-top: 40px;
        padding-bottom: 32px;
    }

    .title-phone-section[b-wemmmddt5j] {
        gap: 32px;
    }
}
/* /Components/Pages/Benefits/BeneficioDetalleSsr.razor.rz.scp.css */
/* ── BeneficioDetalleSsr – scoped CSS ── */

.ssr-beneficio-content[b-aw6b22icxw] {
    max-width: 45rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-inline: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

.beneficio-detalle-inner[b-aw6b22icxw] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Saldo ── */
.saldo-container[b-aw6b22icxw] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem .5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border-input);
    background: var(--color-brand-primary-100);
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.08);
    margin: 0;
}

.saldo-title[b-aw6b22icxw] {
    color: var(--color-base-black);
    text-align: center;
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: 1.5rem;
}

.saldo-item[b-aw6b22icxw] {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.saldo-item img[b-aw6b22icxw] {
    max-width: 2rem;
    width: 100%;
}

.saldo-value[b-aw6b22icxw] {
    color: var(--color-base-black);
    font-family: var(--font-secondary);
    font-size: 2rem;
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: 2rem;
}

/* ── Promo card container ── */
.promo-container[b-aw6b22icxw] {
    margin: 0 auto;
    max-width: 600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.promo-shell[b-aw6b22icxw] {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.promo-scale-box[b-aw6b22icxw] {
    transform-origin: top left;
}

.promo-scale-box > *[b-aw6b22icxw] {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Condiciones ── */
.condiciones-container[b-aw6b22icxw] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
}

.condiciones-title[b-aw6b22icxw] {
    color: var(--gray-color-neutral-800);
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: 1.5rem;
}

.condiciones-description[b-aw6b22icxw] {
    color: var(--gray-color-neutral-800);
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 130%;
}

/* ── Canjear box ── */
.canjear-container[b-aw6b22icxw] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    border: 1px solid var(--color-border-container);
    border-radius: .5rem;
    background: var(--color-base-white);
}

.canjear-container h3[b-aw6b22icxw] {
    color: var(--gray-color-neutral-800);
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: 1.5rem;
    margin: 0;
}

.canjear-header[b-aw6b22icxw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.canjear-container span[b-aw6b22icxw] {
    color: var(--gray-color-neutral-800);
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 130%;
}

.canjear-container hr[b-aw6b22icxw] {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-border-container);
}

/* ── Estrella confirmed ── */
.estrella-confirmed[b-aw6b22icxw] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.estrella-confirmed img[b-aw6b22icxw] {
    width: 1.35rem;
    height: 1.35rem;
}

.cantidad-confirmada[b-aw6b22icxw] {
    color: var(--gray-color-neutral-800);
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: 1.5rem;
}

/* ── Star input ── */
.ssr-star-input[b-aw6b22icxw] {
    width: 120px;
    height: 40px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border-input, #7B7B7B);
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-color-neutral-800);
    background: var(--color-base-white);
    text-align: center;
    -moz-appearance: textfield;
}

.ssr-star-input[b-aw6b22icxw]::-webkit-outer-spin-button,
.ssr-star-input[b-aw6b22icxw]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ssr-star-input:focus[b-aw6b22icxw] {
    outline: 2px solid var(--color-brand-primary-500, #6200ea);
    outline-offset: -1px;
    border-color: transparent;
}

/* ── Buttons ── */
.buttons-container[b-aw6b22icxw] {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
}

.btn-ssr[b-aw6b22icxw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.btn-ssr-primary[b-aw6b22icxw] {
    background-color: var(--color-brand-primary-500, #6200ea);
    color: var(--color-base-white);
}

.btn-ssr-primary:hover[b-aw6b22icxw] {
    background-color: var(--color-brand-primary-600, #5000c0);
}

.btn-ssr-primary:disabled[b-aw6b22icxw] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-ssr-outlined[b-aw6b22icxw] {
    background-color: transparent;
    color: var(--color-brand-primary-500, #6200ea);
    border: 1px solid var(--color-brand-primary-500, #6200ea);
}

.btn-ssr-outlined:hover[b-aw6b22icxw] {
    background-color: var(--color-brand-primary-100, #f3e5f5);
}

.btn-ssr-full[b-aw6b22icxw] {
    width: 100%;
}

/* ── Status messages ── */
.status-message[b-aw6b22icxw] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: 130%;
}

.status-success[b-aw6b22icxw] {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.status-success i[b-aw6b22icxw] {
    font-size: 1.25rem;
}

.status-error[b-aw6b22icxw] {
    background-color: #fbe9e7;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.status-error i[b-aw6b22icxw] {
    font-size: 1.25rem;
}

/* ── Confirm dialog overlay ── */
.ssr-dialog-overlay[b-aw6b22icxw] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ssr-dialog[b-aw6b22icxw] {
    background: var(--color-base-white, #fff);
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.ssr-dialog-header[b-aw6b22icxw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.ssr-dialog-header label[b-aw6b22icxw] {
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-color-neutral-800);
}

.ssr-dialog p[b-aw6b22icxw] {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    color: var(--gray-color-neutral-800);
    line-height: 150%;
    margin: 0 0 1.5rem;
}

.ssr-dialog-footer[b-aw6b22icxw] {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
}

.close-button-style[b-aw6b22icxw] {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-button[b-aw6b22icxw] {
    font-size: 1.25rem;
    color: var(--gray-color-neutral-800);
}

/* ── Utility ── */
.no-margin-b[b-aw6b22icxw] {
    margin-bottom: 0;
}

.f-bold[b-aw6b22icxw] {
    font-weight: var(--font-weight-bold);
}

@media (max-width: 480px) {
    .ssr-beneficio-content[b-aw6b22icxw] {
        padding-inline: 1rem;
        padding-top: 1rem;
    }
    .canjear-container[b-aw6b22icxw] {
        padding: 1rem;
    }
}
/* /Components/Pages/Benefits/MisEstrellasYBeneficiosSsr.razor.rz.scp.css */
/* ── MisEstrellasYBeneficiosSsr – scoped CSS ── */

.ssr-benefits-content[b-duy6nsor4n] {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    padding-inline: 24px;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 2rem;
}

@media (max-width: 768px) {
    .ssr-benefits-content[b-duy6nsor4n] {
        padding-inline: 16px;
    }
}

/* ── Saldo ── */
.saldo-container[b-duy6nsor4n] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem .5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border-input);
    background: var(--color-brand-primary-100);
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.08);
    margin-bottom: 1rem;
}

.saldo-title[b-duy6nsor4n] {
    color: var(--color-base-black);
    text-align: center;
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: 1.5rem;
}

.saldo-item[b-duy6nsor4n] {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.saldo-item img[b-duy6nsor4n] {
    max-width: 2rem;
    width: 100%;
}

.saldo-value[b-duy6nsor4n] {
    color: var(--color-base-black);
    font-family: var(--font-secondary);
    font-size: 2rem;
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: 2rem;
}

/* ── Subtitle ── */
.subtitle[b-duy6nsor4n] {
    color: var(--gray-color-neutral-800);
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: 130%;
    margin: 0;
}

/* ── Tabs ── */
.tabs-grid[b-duy6nsor4n] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 1rem;
}

.tab-selector-wrapper[b-duy6nsor4n] {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid var(--color-border-input, #7B7B7B);
    border-radius: 8px;
    cursor: pointer;
    gap: 4px;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    color: inherit;
}

.tab-selector-wrapper:hover[b-duy6nsor4n] {
    text-decoration: none;
    color: inherit;
}

.tab-selector-wrapper.selected[b-duy6nsor4n] {
    background-color: var(--color-brand-primary-300);
}

.tab-radio-label[b-duy6nsor4n] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
}

.tab-radio[b-duy6nsor4n] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--color-border-input, #7B7B7B);
    display: inline-block;
    flex-shrink: 0;
}

.tab-radio-active[b-duy6nsor4n] {
    border-color: var(--color-brand-primary-500, #6200ea);
    background: var(--color-brand-primary-500, #6200ea);
    box-shadow: inset 0 0 0 3px #fff;
}

/* ── Benefits grid ── */
.benefits-grid[b-duy6nsor4n] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 769px) {
    .benefits-grid[b-duy6nsor4n] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.benefit-card[b-duy6nsor4n] {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--color-border-container);
    border-radius: 8px;
    background: #fff;
}

.benefit-link[b-duy6nsor4n] {
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s;
}

.benefit-link:hover[b-duy6nsor4n] {
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.benefit-thumb[b-duy6nsor4n] {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.benefit-thumb img[b-duy6nsor4n] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.benefit-main[b-duy6nsor4n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.benefit-title[b-duy6nsor4n] {
    font-weight: 700;
    color: var(--gray-color-neutral-800);
}

.benefit-branch[b-duy6nsor4n] {
    font-size: 14px;
    color: #555;
}

.benefit-desc[b-duy6nsor4n] {
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.benefit-meta[b-duy6nsor4n] {
    font-size: 12px;
    color: #666;
    margin-top: 6px;
}

/* ── Empty state ── */
.empty-state[b-duy6nsor4n] {
    text-align: center;
    color: #666;
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    padding: 2rem 1rem;
}
/* /Components/Pages/Brands/SumarMarcaSsr.razor.rz.scp.css */
/* ============================================================
   SumarMarcaSsr – Scoped responsive styles
   Fixes horizontal overflow and adds proper visual structure
   for mobile / tablet / desktop.
   ============================================================ */

/* ---- Page wrapper ---- */
.sumar-marca-page[b-mwhojio9fs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 1 0 0;
    min-height: 0;
    padding: 80px 24px;
    box-sizing: border-box;
}

@media (max-width: 575.98px) {
    .sumar-marca-page[b-mwhojio9fs] {
        padding: 40px 16px;
    }
}

/* ---- Form card (no card chrome per Figma — just a content container) ---- */
.sumar-marca-card[b-mwhojio9fs] {
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    padding-bottom: 32px;
}

/* ---- Title ---- */
.sumar-marca-title[b-mwhojio9fs] {
    font-family: var(--font-family-Poppins, "Poppins"), sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    color: #000;
}

/* ---- Section subtitle ---- */
.sumar-marca-subtitle[b-mwhojio9fs] {
    color: #000;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans"), sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 16px 0 8px;
    padding: 0;
    width: 100%;
}

.sumar-marca-subtitle:first-of-type[b-mwhojio9fs] {
    margin-top: 0;
}

/* ---- Labels ---- */
.sumar-marca-label[b-mwhojio9fs] {
    display: block;
    color: var(--gray-color-neutral-800, #262626);
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans"), sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 4px;
}

/* ---- Form fields grid ---- */
.sumar-marca-fields[b-mwhojio9fs] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
}

@media (min-width: 576px) {
    .sumar-marca-fields[b-mwhojio9fs] {
        grid-template-columns: 1fr 1fr;
    }
}

.sumar-marca-fields .field-full[b-mwhojio9fs] {
    grid-column: 1 / -1;
}

/* ---- Inputs & selects ---- */
.sumar-marca-card .form-control[b-mwhojio9fs],
.sumar-marca-card select[b-mwhojio9fs] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

/* ---- Plan label ---- */
.sumar-marca-plan[b-mwhojio9fs] {
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans"), sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: var(--gray-color-neutral-800, #262626);
    margin: 0;
}

/* ---- Submit area ---- */
.sumar-marca-submit[b-mwhojio9fs] {
    margin-top: 8px;
    width: 100%;
}

.sumar-marca-submit hr[b-mwhojio9fs] {
    margin: 16px 0;
    border-color: #e0e0e0;
}

.sumar-marca-cancel-text[b-mwhojio9fs] {
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans"), sans-serif;
    font-size: 14px;
    color: #666;
    margin-top: 10px;
}

/* ---- Center block (login / error / success) ---- */
.sumar-marca-center[b-mwhojio9fs] {
    text-align: center;
    padding-top: 40px;
}

/* ---- Admin read-only (logged-in user) ---- */
.admin-info-readonly[b-mwhojio9fs] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    margin-bottom: 8px;
}

@media (min-width: 576px) {
    .admin-info-readonly[b-mwhojio9fs] {
        grid-template-columns: 1fr 1fr;
    }
}

.admin-info-item[b-mwhojio9fs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-info-value[b-mwhojio9fs] {
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans"), sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #000;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #D4D4D4;
    border-radius: 6px;
}

/* ---- Premium upsell card ---- */
.premium-upsell-card[b-mwhojio9fs] {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-top: 12px;
    max-width: 400px;
}

.premium-upsell-header[b-mwhojio9fs] {
    background: #000;
    color: #fff;
    padding: 10px 20px;
    font-family: var(--font-family-Poppins, "Poppins"), sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
}

.premium-upsell-content[b-mwhojio9fs] {
    padding: 20px 24px 24px;
}

.premium-upsell-price[b-mwhojio9fs] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 8px;
}

.premium-upsell-amount[b-mwhojio9fs] {
    font-family: var(--font-family-Poppins, "Poppins"), sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--color-primary, #0A7287);
    line-height: 1;
}

.premium-upsell-period[b-mwhojio9fs] {
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans"), sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.premium-upsell-includes[b-mwhojio9fs] {
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans"), sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0 0 12px;
}

.premium-upsell-features[b-mwhojio9fs] {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.premium-upsell-features li[b-mwhojio9fs] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans"), sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #000;
}

.premium-upsell-features li i[b-mwhojio9fs] {
    font-size: 1.2rem;
    color: #0A7287;
    flex-shrink: 0;
    margin-top: 2px;
}

.premium-upsell-no-contracts[b-mwhojio9fs] {
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans"), sans-serif;
    font-size: 14px;
    color: #000;
    text-align: center;
    margin: 0 0 12px;
}

.premium-upsell-cta[b-mwhojio9fs] {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans"), sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.premium-upsell-cta:hover[b-mwhojio9fs] {
    background: #222;
    color: #fff;
    text-decoration: none;
}

/* ---- Submit button ---- */
.sumar-marca-submit-btn[b-mwhojio9fs] {
    background-color: #32E696;
    border: none;
    border-radius: 4px;
    color: #000;
    font-family: var(--font-family-Poppins, "Poppins"), sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    width: 100%;
}

.sumar-marca-submit-btn:disabled[b-mwhojio9fs] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.sumar-marca-submit-btn:hover:not(:disabled)[b-mwhojio9fs] {
    background-color: #28d488;
}

/* ============================================================
   Phone verification step (anonymous users)
   ============================================================ */

.phone-step-content[b-mwhojio9fs] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.phone-step-group[b-mwhojio9fs] {
    display: flex;
    flex-direction: column;
    gap: 56px;
    width: 100%;
}

.phone-step-fields[b-mwhojio9fs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.phone-step-buttons[b-mwhojio9fs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

/* ── Terms group (matches Registro styling) ── */
.terms-group[b-mwhojio9fs] {
    margin-bottom: 0;
}

.terms-checkbox-container[b-mwhojio9fs] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border-radius: 4px;
}

.terms-checkbox-container[b-mwhojio9fs]  .terms-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: #343330;
    margin: 3px;
}

.terms-label[b-mwhojio9fs] {
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans", sans-serif);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: #000;
    cursor: pointer;
    margin: 0;
}

.terms-link[b-mwhojio9fs] {
    color: var(--color-feedback-info-700, #1952A6);
    text-decoration: underline;
}

/* ── Section divider ── */
.section-divider[b-mwhojio9fs] {
    width: 100%;
    height: 1px;
    background-color: var(--color-border-containers, #e5e7eb);
}

/* ── Verification code section ── */
.verification-section[b-mwhojio9fs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.verification-section label[b-mwhojio9fs] {
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans", sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: var(--color-neutral-800, #262626);
    text-align: center;
}

.verification-digits[b-mwhojio9fs] {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.digit-input[b-mwhojio9fs] {
    flex: 1 0 0;
    max-width: 56px;
    height: 40px;
    min-height: 40px;
    border: 1px solid var(--color-border-input, #7B7B7B);
    border-radius: 4px;
    background-color: #FFF;
    text-align: center;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans", sans-serif);
    font-size: 18px;
    line-height: 1;
    color: var(--color-neutral-800, #262626);
    padding: 8px;
    outline: none;
}

.digit-input:focus[b-mwhojio9fs] {
    border-color: var(--color-primary, #0DAC66);
}

.digit-input.digit-error[b-mwhojio9fs] {
    border-color: var(--color-feedback-negative-700, #A61919);
}

.verification-buttons[b-mwhojio9fs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

.otp-error-message[b-mwhojio9fs] {
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans", sans-serif);
    font-size: 14px;
    color: var(--color-feedback-negative-700, #A61919);
    text-align: center;
    display: block;
    margin-top: 4px;
}
/* /Components/Pages/Calificacion/CalificacionPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
   CalificacionPage – Scoped CSS
   
   Since the wizard steps are now child components, all selectors
   targeting elements inside sub-components use ::deep to pierce
   Blazor CSS isolation boundaries.
   ═══════════════════════════════════════════════════════════ */

/* ── Step indicator (direct child of CalificacionPage) ── */
.current-steps[b-3upapr192i] {
    margin-bottom: 12px;
    font-family: Poppins, var(--font-secondary, sans-serif);
    font-size: 14px;
    line-height: 20px;
    color: var(--color-neutral-800, #262626);
}

/* ── Wizard content container (direct child) ── */
.wizard-content-col[b-3upapr192i] {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding-top: 16px;
    padding-bottom: 40px;
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════
   ::deep selectors — target elements inside sub-components
   ═══════════════════════════════════════════════════════════ */

/* ── Company card (Figma: ListItemHistorialDeAtencion / calificar) ── */
[b-3upapr192i] .company-card {
    display: flex;
    align-items: center;
    max-width: 488px;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--Border-containers, #E5E7EB);
    border-radius: 8px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

[b-3upapr192i] .company-card__layout {
    display: flex;
    gap: 16px;
    align-items: center;
    flex: 1 0 0;
    min-width: 0;
}

[b-3upapr192i] .company-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    min-width: 80px;
    padding: 4px;
    border: 1px solid var(--Border-containers, #E5E7EB);
    border-radius: 4px;
    background: var(--Primary-color-brand-primary-50, #effef7);
    box-sizing: border-box;
    overflow: hidden;
}

[b-3upapr192i] .company-card__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

[b-3upapr192i] .company-card__logo svg {
    width: 48px;
    height: 48px;
}

[b-3upapr192i] .company-card__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 0 0;
    min-width: 0;
}

[b-3upapr192i] .company-card__name {
    font-family: "Nunito Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #262626;
    margin: 0;
}

[b-3upapr192i] .company-card__detail {
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    color: #262626;
    margin: 0;
}

/* ── Step Experience Type (Figma structure) ── */
[b-3upapr192i] .step-exp__group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
    padding: 8px 0;
}

[b-3upapr192i] .step-exp__banner-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

[b-3upapr192i] .step-exp__banner {
    width: 100%;
}

[b-3upapr192i] .step-exp__banner img {
    width: 100%;
    border-radius: 16px;
    display: block;
}

[b-3upapr192i] .step-exp__title-row {
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    padding-top: 16px;
}

[b-3upapr192i] .step-exp__title {
    font-family: Poppins, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: #262626;
    margin: 0;
    flex: 1;
}

[b-3upapr192i] .step-exp__radio-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
    padding: 8px 0;
}

[b-3upapr192i] .step-exp__radio-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
    padding: 8px 0;
}

[b-3upapr192i] .step-exp__radio-label label {
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #000;
    margin: 0;
    padding-bottom: 8px;
    display: block;
}

[b-3upapr192i] .step-exp__radio-item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

[b-3upapr192i] .step-exp__radio-item input[type='radio'] {
    accent-color: black;
    width: 24px;
    height: 24px;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

[b-3upapr192i] .step-exp__radio-item label {
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    color: #000;
    margin: 0;
    cursor: pointer;
}

[b-3upapr192i] .logo-container img {
    border: 1px solid var(--light-gray-vector);
    border-radius: 5px;
    padding: 4px;
}

[b-3upapr192i] .stars img {
    margin-inline: 2px;
}

[b-3upapr192i] .calificacion-item {
    padding-inline: 8px;
    margin-inline: 0;
}

[b-3upapr192i] .calificacion-item p {
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: var(--color-neutral-800, #262626);
    margin-top: 0;
    margin-bottom: 8px;
}

[b-3upapr192i] .calificacion-item .faces-container {
    display: flex;
    gap: 16px;
    align-items: center;
    cursor: pointer;
}

[b-3upapr192i] .calificacion-item .faces-container span {
    display: inline-flex !important;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
}

[b-3upapr192i] .calificacion-item .faces-container span img {
    height: 33px !important;
    width: 33px !important;
    opacity: 0.8;
}

[b-3upapr192i] .comentario-container {
    width: 100%;
    margin: 0;
    padding: 0;
    margin-top: 16px;
}

[b-3upapr192i] .comentario-container label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: var(--color-neutral-800, #262626);
}

[b-3upapr192i] .comentario-container button {
    float: inline-end;
}

[b-3upapr192i] .comentario-container textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border-input, #7B7B7B);
    border-radius: 4px;
    resize: none;
    transition: border-color 0.3s;
    background-color: var(--color-base-white, #FFF);
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 16px;
    line-height: 1.3;
    color: var(--color-neutral-800, #262626);
    min-height: 120px;
}

[b-3upapr192i] .comentario-container textarea:focus {
    border: 1px solid var(--color-primary, #0DAC66);
    outline: none;
}

[b-3upapr192i] input[type='radio'] {
    accent-color: black !important;
    width: 20px;
    height: 20px;
}

[b-3upapr192i] .feature-icon-wrapper {
    display: flex;
    padding: 12px;
    width: 56px;
    height: 56px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 40px;
    border: 4px solid #FAFAFA;
    background: #32E696;
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.08);
    color: #FFFFFF;
    font-size: 1.5rem;
}

[b-3upapr192i] .prize-container {
    display: flex;
    gap: 26px;
    padding-inline: 16px;
    padding-block: 16px;
    border-radius: 8px;
    background-color: #f0f0f0;
}

[b-3upapr192i] .prize-image-container {
    border-radius: 8px;
    align-content: center;
    max-width: 40%;
}

[b-3upapr192i] .prize-image-container img {
    width: 100%;
}

[b-3upapr192i] .info-text {
    margin-bottom: 0px;
}

[b-3upapr192i] .prize-info-container .brand-name {
    font-family: Poppins, var(--font-secondary);
    font-size: 16px;
    font-weight: 700;
    color: #494848;
    line-height: normal;
    margin-bottom: 0px;
}

[b-3upapr192i] .prize-info-container .prize-discount {
    font-family: Poppins, var(--font-secondary);
    font-weight: 700;
    line-height: .95;
    color: #32E696;
    font-size: 45px;
    margin-block: 16px;
}

[b-3upapr192i] .prize-info-container .info-text {
    font-family: Poppins, var(--font-secondary);
    font-weight: 400;
    line-height: .95;
    font-size: 8px;
}

[b-3upapr192i] .prize-text {
    font-family: Poppins, var(--font-secondary);
    font-size: 10px;
    font-weight: 700;
    color: #494848;
    line-height: normal;
    margin-bottom: 0px;
}

[b-3upapr192i] .extra-stars {
    color: var(--Primary-color-brand-primary-600, #0DAC66);
    text-align: center;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 16px;
    font-style: normal;
    font-weight: var(--font-weight-bold, 700);
    line-height: 130%;
    margin-bottom: 0px;
}

@media (max-width: 768px) {
    [b-3upapr192i] .ruleta-container-extern {
        margin-top: 24px;
    }
}

@media (min-width: 769px) {
    [b-3upapr192i] .ruleta-container-extern {
        margin-top: 24px;
    }
}

/* ── Branch/Employee search dropdown ── */
[b-3upapr192i] .branch-search-container,
[b-3upapr192i] .employee-search-container,
[b-3upapr192i] .referral-search-container {
    position: relative;
}

[b-3upapr192i] .branch-dropdown {
    position: absolute;
    z-index: 100;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--light-gray, #ccc);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

[b-3upapr192i] .branch-option {
    padding: 10px 12px;
    cursor: pointer;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    line-height: 20px;
}

[b-3upapr192i] .branch-option:hover {
    background-color: var(--color-primary-light, #e6f9f0);
}

/* ── Dialog overlay (SSR replacement for Syncfusion Dialog) ── */
[b-3upapr192i] .dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    justify-content: center;
    align-items: center;
}

[b-3upapr192i] .dialog-container {
    background: #fff;
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

[b-3upapr192i] .dialog-header h5 {
    font-family: Poppins, var(--font-secondary);
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 16px;
    color: #1E1E1E;
}

[b-3upapr192i] .dialog-body {
    margin-bottom: 24px;
}

[b-3upapr192i] .dialog-footer {
    text-align: center;
}

/* ── Toast ── */
[b-3upapr192i] .toast-ssr {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    background: #333;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ── Wizard nav divider ── */
[b-3upapr192i] .wizard-nav__divider {
    border: none;
    border-top: 1px solid var(--Border-containers, #E5E7EB);
    margin: 0;
}

/* ── Wizard nav buttons ── */
[b-3upapr192i] .wizard-nav__buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

[b-3upapr192i] .wizard-nav__buttons .btn {
    min-width: 120px;
}

/* ── Step info row (employee/referral icon + text) ── */
[b-3upapr192i] .step-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

[b-3upapr192i] .step-info-icon {
    flex-shrink: 0;
}

[b-3upapr192i] .step-info-text {
    flex: 1;
    min-width: 0;
}

[b-3upapr192i] .step-info-text p {
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    line-height: 1.35;
    color: var(--color-neutral-800, #262626);
}

[b-3upapr192i] .step-info-text p strong {
    font-weight: 700;
}

/* ── Button styles (matching Figma design system) ── */
[b-3upapr192i] .btn-primary-ds {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    min-width: 120px;
    background-color: var(--Primary-color-brand-primary-400, #32E696);
    color: #000;
    border: none;
    border-radius: 4px;
    font-family: Poppins, var(--font-secondary, sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
}

[b-3upapr192i] .btn-primary-ds:hover {
    background-color: #28c882;
    color: #000;
}

[b-3upapr192i] .btn-primary-ds:disabled {
    background-color: var(--Primary-color-brand-primary-200, #B7FBDC);
    color: var(--color-neutral-400, #9D9D9D);
    cursor: not-allowed;
}

[b-3upapr192i] .btn-secondary-ds {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    background-color: #fff;
    color: var(--Primary-color-brand-primary-600, #0DAC66);
    border: 2px solid var(--Primary-color-brand-primary-600, #0DAC66);
    border-radius: 4px;
    font-family: Poppins, var(--font-secondary, sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

[b-3upapr192i] .btn-secondary-ds:hover {
    background-color: #f0f0f0;
}

[b-3upapr192i] .btn-outline-ds {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    background-color: transparent;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: Poppins, var(--font-secondary, sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    transition: background-color 0.2s;
}

[b-3upapr192i] .btn-outline-ds:hover {
    background-color: #f5f5f5;
}

/* ── Star cursor ── */
[b-3upapr192i] .faces-container span {
    cursor: pointer;
}

/* ── Wheel (matching Figma: 280x280 centered) ── */
[b-3upapr192i] .wheel-container {
    position: relative;
    display: inline-block;
}

[b-3upapr192i] .wheel-container #wheel {
    width: 280px;
    height: 280px;
}

[b-3upapr192i] .wheel-container #spin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -40%);
    z-index: 2;
    width: 30%;
    aspect-ratio: 1 / 1;
    background-image: url('/Images/ruleta/indicador-ruleta.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    user-select: none;
    pointer-events: none;
    cursor: default;
    margin: 0;
}

/* ── Shadow container (matches ContainerWithShadow) ── */
[b-3upapr192i] .shadow-container {
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ── Rating items container ── */
[b-3upapr192i] #rating-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Form control matching Figma input specs ── */
[b-3upapr192i] .wizard-step .form-control {
    border: 1px solid var(--color-border-input, #7B7B7B);
    border-radius: 4px;
    min-height: 40px;
    padding: 8px 12px;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 16px;
    line-height: 1.3;
    color: var(--color-neutral-800, #262626);
    background-color: var(--color-base-white, #FFF);
}

[b-3upapr192i] .wizard-step .form-control:focus {
    border-color: var(--color-primary, #0DAC66);
    box-shadow: none;
    outline: none;
}

[b-3upapr192i] .wizard-step .form-control::placeholder {
    color: var(--color-neutral-500, #5F5F5F);
}

/* ── Finalizar button (full width on mobile, min-width on desktop) ── */
[b-3upapr192i] .finalizar-button {
    width: 100%;
}

/* ── Name fields alignment ── */
[b-3upapr192i] #name-fields .form-group {
    margin-bottom: 0;
}

[b-3upapr192i] #name-fields .form-group + .form-group {
    margin-top: 0;
}

[b-3upapr192i] #name-fields .form-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Search input with icon ── */
[b-3upapr192i] .search-input-wrapper {
    position: relative;
}

[b-3upapr192i] .search-input-wrapper .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-neutral-500, #5F5F5F);
    font-size: 18px;
    pointer-events: none;
    z-index: 1;
}

[b-3upapr192i] .search-input-wrapper .form-control {
    padding-left: 36px;
}

/* ── Identificate step (phone verification) ── */
[b-3upapr192i] #step-identificate .form-control {
    border: 1px solid var(--color-border-input, #7B7B7B);
    border-radius: 4px;
    min-height: 40px;
    padding: 8px 12px;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 16px;
    line-height: 1.3;
    color: var(--color-neutral-800, #262626);
    background-color: var(--color-base-white, #FFF);
}

[b-3upapr192i] #step-identificate .form-control:focus {
    border-color: var(--color-primary, #0DAC66);
    box-shadow: none;
    outline: none;
}

/* ── Mobile responsive (Figma: 16px padding, 358px content) ── */
@media (max-width: 767px) {
    .wizard-content-col[b-3upapr192i] {
        max-width: 100%;
        padding-inline: 16px;
        box-sizing: border-box;
    }

    /* Wizard nav – stack buttons vertically on mobile */
    [b-3upapr192i] .wizard-nav__buttons {
        flex-direction: column;
        gap: 8px;
    }

    [b-3upapr192i] .wizard-nav__buttons .btn {
        width: 100%;
        min-width: unset;
        justify-content: center;
    }

    /* Step info row – shrink icon on small screens */
    [b-3upapr192i] .step-info-row {
        gap: 10px;
    }

    [b-3upapr192i] .step-info-text p {
        font-size: 14px;
        line-height: 1.3;
    }

    /* Feature icon – slightly smaller on mobile */
    [b-3upapr192i] .feature-icon-wrapper {
        width: 48px;
        height: 48px;
        padding: 10px;
    }

    /* Shadow container (CompanyCard) – full width with side spacing */
    [b-3upapr192i] .shadow-container {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Prize container – stack vertically on narrow screens */
    [b-3upapr192i] .prize-container {
        gap: 16px;
        padding-inline: 12px;
        box-sizing: border-box;
    }

    /* Wheel container – prevent overflow */
    [b-3upapr192i] .wheel-container #wheel {
        max-width: 100%;
        height: auto;
    }

    /* Dialog container – respect mobile safe area */
    [b-3upapr192i] .dialog-container {
        width: calc(100% - 32px);
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Form controls – full width within padded container */
    [b-3upapr192i] .wizard-step .form-control {
        width: 100%;
        box-sizing: border-box;
    }

    /* Branch/Employee/Referral dropdowns – contain within bounds */
    [b-3upapr192i] .branch-dropdown {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Identificate step – phone container */
    [b-3upapr192i] #step-identificate .form-control {
        width: 100%;
        box-sizing: border-box;
    }

    /* Textarea – respect container width */
    [b-3upapr192i] .comentario-container textarea {
        box-sizing: border-box;
    }

    /* Name fields – stack on small screens */
    [b-3upapr192i] #name-fields .form-inline {
        flex-wrap: wrap;
    }

    /* Ruleta container – center and constrain */
    [b-3upapr192i] .ruleta-container-extern {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
}
/* /Components/Pages/Home/HomePage.razor.rz.scp.css */
/*.home-container {
    max-width: 1780px;
    margin: 0 auto;
    padding: 2rem 1rem;
}*/

[b-rq0xl1jpfx] .content-container {
    margin: 3rem 0;
    display: flex;
    flex-direction: column;
    border-radius: var(--4, 16px);
    border: 1px solid var(--Border-color-border-container, #E5E7EB);
    background: var(--Background-color-surface-app, #FAFAFA);
    /* Shadow/shadow.surface.lg */
    padding: var(--10, 40px);
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.08);
    gap: var(--6, 24px);
}

/* Tablet Landscape: 768–1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    [b-rq0xl1jpfx] .content-container {
        padding: 40px;
    }
}

[b-rq0xl1jpfx] .content-title {
    font-family: 'Poppins', sans-serif;
    font-weight: var(--font-weight-semibold);
    font-style: normal;
    font-size: var(--font-size-display);
    line-height: 130%;
    letter-spacing: 0%;
    color: var(--color-neutral-800);
}

/* Body background gradient is set via inline <style> in HomePage.razor.
   ::deep body does NOT work in scoped CSS because <body> is an ancestor
   of the component, not a descendant. Top gradient uses px stops
   (body-height-independent). Bottom green uses calc() from the bottom. */

.home-container[b-rq0xl1jpfx] {
    position: relative;
    overflow: visible;
    isolation: isolate;
}

.home-footer-star[b-rq0xl1jpfx] {
    --ornament-size: 800px;
    --ornament-size-height: 450px;
    position: absolute;
    bottom: calc(var(--ornament-size-height) / 2);
    left: calc(50% - var(--ornament-size) / 2);
    transform: translateY(50%);
    width: var(--ornament-size);
    height: var(--ornament-size-height);
    pointer-events: none;
    z-index: -1;
}


@media (max-width: 1023px) {
    .home-footer-star[b-rq0xl1jpfx] {
        --ornament-size: 450px;
        --ornament-size-height: 250px;
    }
}

@media (max-width: 768px) {
    .home-footer-star[b-rq0xl1jpfx] {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   STATIC CONTAINER — fixed width per breakpoint tier.
   Extra viewport space becomes margins ("borda grande").
   ══════════════════════════════════════════════════════════════════ */

/* Mobile: < 390px — fluid (screens smaller than design target) */
@media (max-width: 389px) {
    .home-container[b-rq0xl1jpfx] {
        max-width: 100% !important;
        margin: 0 auto;
        padding: 1rem 16px 2rem 16px !important;
    }
}

/* Tablet Portrait: 390–767px — locked at 390px */
@media (min-width: 390px) and (max-width: 767px) {
    .home-container[b-rq0xl1jpfx] {
        max-width: 390px !important;
        margin: 0 auto;
        padding: 1rem 19px 2rem 19px !important;
    }
}

/* Tablet Landscape: 768–1023px — locked at 768px */
@media (min-width: 768px) {
    .home-container[b-rq0xl1jpfx] {
        max-width: 768px !important;
        margin: 0 auto;
        padding: 1rem 24px 2rem 24px !important;
    }
}

/* Desktop compact: 1024–1399px — locked at 1024px */
@media (min-width: 1024px) {
    .home-container[b-rq0xl1jpfx] {
        max-width: 944px !important;
        margin: 0 auto;
        padding: 2rem 40px 2rem 40px !important;
    }
}

/* Desktop full: >= 1400px — locked at 1260px */
@media (min-width: 1400px) {
    .home-container[b-rq0xl1jpfx] {
        max-width: 1340px !important;
        margin: 0 auto;
        padding: 2rem 40px 2rem 40px !important;
    }
}

/* Slick slider fine-tune */
/* moved to design-system.css */

/* /Components/Pages/Home/Sections/BannerProximamente.razor.rz.scp.css */
/* =====================================================================
   BannerProximamente – Scoped CSS
   
   Container with position:relative so the GIF overlay sits on top
   of the static placeholder. GIF starts at opacity 0 and transitions
   to opacity 1 when the .loaded class is added by JS.
   ===================================================================== */

.banner-proximamente-wrapper[b-jjsiwt2r4l] {
    --banner-gif-inset-block: 0px;
    --banner-gif-inset-inline: 0px;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    margin: 2rem 0;
}

/* Static placeholder fills the wrapper naturally */
.banner-proximamente-placeholder[b-jjsiwt2r4l] {
    position: relative;
    z-index: 1;
}

/* Flatten inner container margin/border-radius (wrapper handles it) */
.banner-proximamente-placeholder > :first-child[b-jjsiwt2r4l] {
    margin: 0;
    border-radius: 0;
}

/* GIF overlay — sits on top, hidden until loaded */
.proximamente-gif[b-jjsiwt2r4l] {
    position: absolute;
    /* top: var(--banner-gif-inset-block); */
    right: var(--banner-gif-inset-inline);
    bottom: 0;
    left: var(--banner-gif-inset-inline);
    width: calc(100% - (var(--banner-gif-inset-inline) * 2));
    height: calc(100% - (var(--banner-gif-inset-block) * 2));
    object-fit: contain;
    z-index: 2;
    opacity: 0;
    border-radius: inherit;
    transition: opacity 500ms ease-in-out, inset 350ms ease-in-out, width 350ms ease-in-out, height 350ms ease-in-out;
    pointer-events: none;
}

/* When JS adds .loaded, fade the GIF in */
.proximamente-gif.loaded[b-jjsiwt2r4l] {
    opacity: 1;
    pointer-events: auto;
}

.banner-proximamente-wrapper.gif-ready[data-gif-variant='desktop'][b-jjsiwt2r4l] {
    --banner-gif-inset-block: clamp(10px, 1.6vw, 18px);
    --banner-gif-inset-inline: clamp(12px, 2.2vw, 28px);
}

.banner-proximamente-wrapper.gif-ready[data-gif-variant='mobile'][b-jjsiwt2r4l] {
    --banner-gif-inset-block: clamp(10px, 2.5vw, 18px);
    --banner-gif-inset-inline: clamp(10px, 2.5vw, 18px);
}

/* ── Mobile ─── */
@media (max-width: 630px) {
    .banner-proximamente-wrapper[b-jjsiwt2r4l] {
        border-radius: 12px;
        margin: 1.5rem 0;
    }

    .banner-proximamente-wrapper.gif-ready[data-gif-variant='desktop'][b-jjsiwt2r4l],
    .banner-proximamente-wrapper.gif-ready[data-gif-variant='mobile'][b-jjsiwt2r4l] {
        --banner-gif-inset-block: clamp(8px, 2vw, 14px);
        --banner-gif-inset-inline: clamp(8px, 2vw, 14px);
    }
}
/* /Components/Pages/Home/Sections/HomeAgregarNegocio.razor.rz.scp.css */

.agregar-negocio-container[b-mpiuk2n9ey] {
    display: flex;
    align-items: stretch;
    max-width: 1260px;
    margin: 2.25rem auto;
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}

/* Left (text) column */
.agregar-texto[b-mpiuk2n9ey] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1 0 0;
    min-width: 0;
    min-height: 0;
    padding: 80px 92px;
    gap: 16px;
    background: var(--color-brand-primary-400, #32e696);
    color: var(--color-base-black, #000);
    overflow: hidden;
}

/* ── Background variants based on Home state ── */
.home-empty .agregar-texto[b-mpiuk2n9ey] {
    background: var(--color-base-white, #fff);
}

.home-with-brands .agregar-texto[b-mpiuk2n9ey] {
    background: var(--color-brand-primary-400, #32e696);
}

.home-empty .agregar-btn[b-mpiuk2n9ey] {
    background: var(--color-brand-primary-400, #32e696);
    color: var(--color-base-black, #000);
}

.agregar-content[b-mpiuk2n9ey] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}

.agregar-info[b-mpiuk2n9ey] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    color: var(--color-base-black, #000);
}

    .agregar-info h3[b-mpiuk2n9ey] {
        margin: 0;
        font-family: var(--font-secondary, 'Poppins', sans-serif);
        font-weight: var(--font-weight-semibold, 600);
        font-size: 36px;
        line-height: 1.2;
        color: var(--color-base-black, #000);
    }

    .agregar-info span[b-mpiuk2n9ey] {
        display: block;
        font-family: var(--font-primary, 'Nunito Sans', sans-serif);
        font-weight: var(--font-weight-regular, 400);
        font-size: 20px;
        line-height: 1.2;
        color: var(--color-base-black, #000);
    }

/* Button */
.agregar-btn[b-mpiuk2n9ey] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    height: 36px;
    padding: 8px 16px;
    gap: 8px;
    background: var(--color-base-white, #fff);
    border-radius: 4px;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-base-black, #000);
    text-decoration: none;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}

    .agregar-btn:hover[b-mpiuk2n9ey] {
        opacity: 0.85;
    }

/* Right (image) column – desktop: fixed 664px */
.agregar-negocio-img[b-mpiuk2n9ey] {
    flex: 0 0 664px;
    max-width: 664px;
    min-height: 376px;
    position: relative;
    aspect-ratio: 664 / 376;
}

    .agregar-negocio-img img[b-mpiuk2n9ey] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        pointer-events: none;
    }

/* ── Landscape 1400px – 1024px ───────────────────────────────── */
@media (max-width: 1399px) and (min-width: 1024px) {
    .agregar-negocio-container[b-mpiuk2n9ey] {
        background: var(--color-brand-primary-400, #32e696);
        align-items: center;
        height: 256px;
    }

    .agregar-texto[b-mpiuk2n9ey] {
        padding: 24px 40px;
        gap: 24px;
        min-width: 400px;
        align-self: stretch;
        background: transparent;
    }

/*    .home-empty .agregar-texto {
        background: transparent;
    }*/

    .home-with-brands .agregar-texto[b-mpiuk2n9ey] {
        background: transparent;
    }

    .agregar-content[b-mpiuk2n9ey] {
        gap: 24px;
    }

    .agregar-info[b-mpiuk2n9ey] {
        gap: 20px;
    }

        .agregar-info h3[b-mpiuk2n9ey] {
            font-size: 24px;
            line-height: 1.3;
        }

        .agregar-info span[b-mpiuk2n9ey] {
            font-size: 16px;
            line-height: 1.3;
        }

    .agregar-btn[b-mpiuk2n9ey] {
        height: 36px;
        padding: 8px 24px;
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
    }

    /* Image: shrink-0, aspect 296/188, full height, rounded right */
    .agregar-negocio-img[b-mpiuk2n9ey] {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        min-height: 0;
        max-height: none;
        height: 256px;
        aspect-ratio: 296 / 188;
        border-radius: 0 16px 16px 0;
        overflow: hidden;
    }
}

/* ── Portrait 1023px – 768px ─────────────────────────────────── */
@media (max-width: 1023px) and (min-width: 768px) {
    .agregar-negocio-container[b-mpiuk2n9ey] {
        margin: 2rem auto;
        height: 194px;
    }

    .agregar-texto[b-mpiuk2n9ey] {
        padding: 24px 40px;
        gap: 16px;
        align-self: stretch;
    }

    .agregar-content[b-mpiuk2n9ey] {
        gap: 16px;
    }

    .agregar-info[b-mpiuk2n9ey] {
        gap: 0;
        line-height: 1.3;
    }

        .agregar-info h3[b-mpiuk2n9ey] {
            font-size: 24px;
            line-height: 1.3;
        }

        .agregar-info span[b-mpiuk2n9ey] {
            font-size: 16px;
            line-height: 1.3;
        }

    .agregar-btn[b-mpiuk2n9ey] {
        height: auto;
        padding: 8px;
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
    }

    /* Image: aspect 296/188, flex: 1 0 0, full height */
    .agregar-negocio-img[b-mpiuk2n9ey] {
        flex: 1 0 0;
        width: auto;
        max-width: none;
        min-height: 0;
        max-height: none;
        height: 194px;
        aspect-ratio: 296 / 188;
    }
}

/* ── Mobile <= 767px: stack image on top, text below ─────────── */
@media (max-width: 767px) {
    .agregar-negocio-container[b-mpiuk2n9ey] {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 100%;
        margin: 1.25rem auto;
        border-radius: 16px;
    }

    /* image on top */
    .agregar-negocio-img[b-mpiuk2n9ey] {
        order: 0;
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        height: 188px;
        min-height: 188px;
        aspect-ratio: auto;
        position: relative;
    }

        .agregar-negocio-img img[b-mpiuk2n9ey] {
            object-position: center;
        }

    .agregar-texto[b-mpiuk2n9ey] {
        order: 1;
        flex: 0 0 auto;
        padding: 30px;
        gap: 24px;
        justify-content: flex-end;
        width: 100%;
    }

    .agregar-content[b-mpiuk2n9ey] {
        gap: 24px;
    }

    .agregar-info[b-mpiuk2n9ey] {
        gap: 12px;
    }

        .agregar-info h3[b-mpiuk2n9ey] {
            font-size: 28px;
            line-height: 1.2;
            max-width: 252px;
        }

        .agregar-info span[b-mpiuk2n9ey] {
            font-size: 16px;
            line-height: 1.2;
        }

    .agregar-btn[b-mpiuk2n9ey] {
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
        height: auto;
    }
}

/* ── Skeleton shimmer for text placeholders ──────────────────────── */
@keyframes skeleton-shimmer-b-mpiuk2n9ey {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}

.skeleton-shimmer[b-mpiuk2n9ey] {
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.02) 50%, rgba(0,0,0,0.06) 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer-b-mpiuk2n9ey 1.5s infinite ease-in-out;
    border-radius: 6px;
}

/* ── Full skeleton container ──────────────────────────────────────── */
.agregar-skeleton-container[b-mpiuk2n9ey] {
    display: grid;
    grid-template-columns: 60% 40%;
    align-items: stretch;
    margin: 2.25rem auto;
    border-radius: 1rem;
    overflow: hidden;
    background: #e8e8e8;
    min-height: 220px;
}

.agregar-skel-left[b-mpiuk2n9ey] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 1.5rem 5.25rem;
}

.agregar-skel-right[b-mpiuk2n9ey] {
    width: 100%;
    height: 100%;
    min-height: 220px;
}

.agregar-skel-img[b-mpiuk2n9ey] {
    width: 100%;
    height: 100%;
    min-height: 220px;
    border-radius: 0;
}

.agregar-skeleton-title[b-mpiuk2n9ey] {
    width: 80%;
    height: 36px;
    max-width: 400px;
}

.agregar-skeleton-subtitle[b-mpiuk2n9ey] {
    width: 60%;
    height: 24px;
    max-width: 300px;
}

.agregar-skeleton-btn[b-mpiuk2n9ey] {
    width: 140px;
    height: 44px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .agregar-skeleton-container[b-mpiuk2n9ey] {
        grid-template-columns: 1fr;
        max-width: 354px;
    }

    .agregar-skel-right[b-mpiuk2n9ey] {
        order: -1;
        min-height: 188px;
        height: 188px;
    }

    .agregar-skel-left[b-mpiuk2n9ey] {
        padding: 2rem;
    }
}
/* /Components/Pages/Home/Sections/HomeCalificar.razor.rz.scp.css */
/* ── Banner container ──────────────────────────────────────────────── */
.calificar-container[b-3uel7q3ugm] {
    margin: 3rem 0;
    background: var(--color-base-white, white);
    border-radius: var(--4, 16px);
    overflow: visible;
}

.calificar-content[b-3uel7q3ugm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--10, 40px);
    padding: 12px 96px;
}

/* ── Text area ─────────────────────────────────────────────────────── */
.calificar-texto[b-3uel7q3ugm] {
    flex: 1;
    font-family: 'Poppins', sans-serif;
    max-width: 670px;
}

.calificar-desktop-title[b-3uel7q3ugm] {
    font-family: 'Poppins', sans-serif;
    font-weight: var(--font-weight-semibold, 600);
    font-size: 36px;
    line-height: 32px;
    color: var(--color-base-black, black);
    margin: 0;
}

.calificar-mobile-group[b-3uel7q3ugm] {
    display: none;
}

.calificar-cta-btn[b-3uel7q3ugm] {
    display: none;
}

/* ── Wheel area with green accent block ────────────────────────────── */
.calificar-wheel-area[b-3uel7q3ugm] {
    position: relative;
    width: 351px;
    height: 260px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: var(--4, 16px);
    padding: var(--10, 40px) 0;
}

.calificar-green-block[b-3uel7q3ugm] {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 282px;
    height: 170px;
    background: var(--color-brand-primary-400, #32e696);
    border-radius: 0 16px 16px 0;
}

.roleta-img[b-3uel7q3ugm] {
    position: relative;
    z-index: 1;
}

    .roleta-img img[b-3uel7q3ugm] {
        width: 250px;
        height: 250px;
        border-radius: 50%;
        box-shadow: 0 2.646px 2.646px rgba(0, 0, 0, 0.16);
    }

/* ── Mobile (≤767px) ───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .calificar-container[b-3uel7q3ugm] {
        background: var(--color-surface-app, #FAFAFA);
        border: 1px solid var(--color-border-container, #E5E7EB);
        margin: 3rem 0;
        position: relative;
        overflow: hidden;
    }

    .calificar-content[b-3uel7q3ugm] {
        flex-direction: column;
        padding: 0;
        gap: 0;
        align-items: center;
    }

    .calificar-wheel-area[b-3uel7q3ugm] {
        position: relative;
        order: -1;
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px 0 16px;
        border-radius: 0;
        top: auto;
        left: auto;
        transform: none;
    }

    .calificar-green-block[b-3uel7q3ugm] {
        display: block;
        position: absolute;
        left: 10%;
        right: 0;
        top: auto;
        transform: none;
        width: 80%;
        height: 50%;
        border-radius: 16px;
    }

    .roleta-img img[b-3uel7q3ugm] {
        width: 224px;
        height: 224px;
    }

    .calificar-texto[b-3uel7q3ugm] {
        padding: 1rem 1.5rem 2rem;
        text-align: center;
        max-width: 400px;
    }

    .calificar-desktop-title[b-3uel7q3ugm] {
        font-size: 24px;
        line-height: 26px;
        max-width: 280px;
    }

    .calificar-mobile-group[b-3uel7q3ugm] {
        display: none;
    }

    .calificar-cta-btn[b-3uel7q3ugm] {
        display: none;
    }
}

/* ── Tablet (768px – 1024px) ───────────────────────────────────────── */
@media (min-width: 768px) {
    .calificar-content[b-3uel7q3ugm] {
        padding: 5px 38px;
        gap: 48px;
    }

    .calificar-desktop-title[b-3uel7q3ugm] {
        font-size: 28px;
        line-height: 32px;
    }

    .calificar-wheel-area[b-3uel7q3ugm] {
        width: 280px;
        height: 220px;
    }

    .calificar-green-block[b-3uel7q3ugm] {
        width: 220px;
        height: 140px;
    }

    .roleta-img img[b-3uel7q3ugm] {
        width: 200px;
        height: 200px;
    }

    .roleta-img[b-3uel7q3ugm] {
        right: 0px !important;
    }
}

@media(min-width: 1024px) {
    .calificar-desktop-title[b-3uel7q3ugm] {
        font-size: 28px;
    }

    .calificar-content[b-3uel7q3ugm] {
        gap: 10px;
        padding: 2px 40px;
    }

    .roleta-img[b-3uel7q3ugm] {
        right: 60px !important;
    }
}

@media (min-width: 1400px) {
    .calificar-desktop-title[b-3uel7q3ugm] {
        font-size: 36px;
    }

    .calificar-content[b-3uel7q3ugm] {
        gap: 10px;
        padding: 32px 96px !important;
    }

    .roleta-img[b-3uel7q3ugm] {
        right: 90px !important;
    }

        .roleta-img img[b-3uel7q3ugm] {
            width: 250px !important;
            height: 250px !important;
        }

    .calificar-green-block[b-3uel7q3ugm] {
        width: 280px;
        height: 170px;
    }
}

/* ── Skeleton shimmer ──────────────────────────────────────────────── */
@keyframes skeleton-shimmer-b-3uel7q3ugm {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}

.skeleton-shimmer[b-3uel7q3ugm] {
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.02) 50%, rgba(0,0,0,0.06) 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer-b-3uel7q3ugm 1.5s infinite ease-in-out;
    border-radius: 6px;
}

.calificar-skeleton-container[b-3uel7q3ugm] {
    margin: 3rem 0;
    border-radius: 16px;
    background: #e8e8e8;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0px;
    min-height: 260px;
}

.calificar-skel-content[b-3uel7q3ugm] {
    display: flex;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.calificar-skel-circle[b-3uel7q3ugm] {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    flex-shrink: 0;
}

.calificar-skel-text[b-3uel7q3ugm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.calificar-skeleton-title[b-3uel7q3ugm] {
    width: 80%;
    height: 40px;
    max-width: 400px;
}

.calificar-skeleton-subtitle[b-3uel7q3ugm] {
    width: 60%;
    height: 28px;
    max-width: 300px;
}

@media (max-width: 630px) {
    .calificar-skeleton-container[b-3uel7q3ugm] {
        flex-direction: column;
        margin-top: 8.5rem;
        min-height: auto;
        padding: 1.5rem;
    }

    .calificar-skel-content[b-3uel7q3ugm] {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .calificar-skel-circle[b-3uel7q3ugm] {
        width: 160px;
        height: 160px;
    }

    .calificar-skel-text[b-3uel7q3ugm] {
        align-items: flex-start;
        width: 100%;
    }
}
/* /Components/Pages/Home/Sections/HomeCarouselSkeleton.razor.rz.scp.css */
/* =====================================================================
   HomeCarouselSkeleton – Shimmer skeleton styles
   ===================================================================== */

/* Shimmer animation */
@keyframes skeleton-shimmer-b-r2d6a0pj87 {
    0% {
        background-position: -400px 0;
    }
    100% {
        background-position: 400px 0;
    }
}

.skeleton-shimmer[b-r2d6a0pj87] {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer-b-r2d6a0pj87 1.5s infinite ease-in-out;
}

/* Title placeholder */
.skeleton-title[b-r2d6a0pj87] {
    width: 220px;
    height: 28px;
    border-radius: 6px;
}

/* Carousel row */
.skeleton-carousel[b-r2d6a0pj87] {
    display: flex;
    gap: 16px;
    overflow: hidden;
}

/* Individual card skeleton */
.skeleton-card[b-r2d6a0pj87] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    border: 1px solid var(--color-border-container, #E5E7EB);
    border-radius: 0.5rem;
    background: #fff;
}

.skeleton-card-image[b-r2d6a0pj87] {
    width: 100%;
    aspect-ratio: 1;
    max-width: 240px;
    border-radius: 0.25rem;
}

.skeleton-card-body[b-r2d6a0pj87] {
    margin-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.skeleton-line[b-r2d6a0pj87] {
    height: 14px;
    border-radius: 4px;
}

.skeleton-line-lg[b-r2d6a0pj87] {
    width: 70%;
    height: 18px;
}

.skeleton-line-md[b-r2d6a0pj87] {
    width: 55%;
}

.skeleton-line-sm[b-r2d6a0pj87] {
    width: 40%;
}

/* Responsive: hide extra cards on smaller viewports */
/* Desktop compact (1024–1399): show 3 */
@media (max-width: 1399px) {
    .skeleton-card:nth-child(n+4)[b-r2d6a0pj87] {
        display: none;
    }
}

/* Tablet Landscape (768–1023): show 2 */
@media (max-width: 1023px) {
    .skeleton-card:nth-child(n+3)[b-r2d6a0pj87] {
        display: none;
    }
}

/* Tablet Portrait + Mobile: show 1 (static 390px container) */
@media (max-width: 767px) {
    .skeleton-card:nth-child(n+2)[b-r2d6a0pj87] {
        display: none;
    }
}
/* /Components/Pages/Home/Sections/HomeConfiables.razor.rz.scp.css */
.content-container[b-6tx11mmxle] {
    gap: 8px;
}

.content-header[b-6tx11mmxle] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.content-title[b-6tx11mmxle] {
    color: var(--gray-color-neutral-800, #262626);
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 24px;
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: 130%;
    margin: 0;
}

.btn-ver-todas[b-6tx11mmxle] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    color: var(--color-brand-primary-700, #0E8752);
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 14px;
    font-weight: var(--font-weight-medium, 500);
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
}

    .btn-ver-todas:hover[b-6tx11mmxle] {
        opacity: 0.85;
    }

    .btn-ver-todas svg[b-6tx11mmxle] {
        flex-shrink: 0;
    }

.footer-ver-mas[b-6tx11mmxle] {
    display: none;
    justify-content: center;
}

.btn-ver-mas-footer[b-6tx11mmxle] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    border: 1.5px solid var(--color-brand-primary-700, #0E8752);
    border-radius: 999px;
    color: var(--color-brand-primary-700, #0E8752);
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 14px;
    font-weight: var(--font-weight-medium, 500);
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
}

    .btn-ver-mas-footer:hover[b-6tx11mmxle] {
        opacity: 0.85;
    }

.confiable-card-wrapper[b-6tx11mmxle] {
    min-width: 0;
}

.ds-carousel-dots[b-6tx11mmxle] {
    padding: 16px 0 0 0;
}

/* ── Tablet Landscape (768–1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
    .content-title[b-6tx11mmxle] {
        font-size: 20px;
        line-height: 24px;
    }

    .btn-ver-todas[b-6tx11mmxle] {
        font-size: 14px;
        line-height: 20px;
    }
}

/* Desktop compact: 3 columns */

/* Tablet Portrait + Mobile: 1 column (static 390px container) */
@media (max-width: 767px) {
    .confiables-grid[b-6tx11mmxle] {
        grid-template-columns: 1fr;
    }

    .content-title[b-6tx11mmxle] {
        font-size: 15px;
        line-height: 120%;
    }

    .btn-ver-todas[b-6tx11mmxle] {
        display: none;
    }

    .footer-ver-mas[b-6tx11mmxle] {
        display: flex;
    }

    .ds-carousel-viewport[b-6tx11mmxle] {
        padding: 2px 0 16px 0;
    }

    .ds-carousel-dots[b-6tx11mmxle] {
        padding: 0 0 0 0;
    }

    .content-container[b-6tx11mmxle] {
        gap: 20px;
        padding: 24px 40px;
    }
}
/* /Components/Pages/Home/Sections/HomeExperienceSkeleton.razor.rz.scp.css */
/* =====================================================================
   HomeExperienceSkeleton – Shimmer skeleton matching RecentExperiencesCard
   ===================================================================== */

@keyframes skeleton-shimmer-b-0hmklkyypp {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

.skeleton-shimmer[b-0hmklkyypp] {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer-b-0hmklkyypp 1.5s infinite ease-in-out;
}

/* Title placeholder */
.skeleton-title[b-0hmklkyypp] {
    width: 260px;
    height: 28px;
    border-radius: 6px;
}

/* Carousel row */
.skeleton-experience-carousel[b-0hmklkyypp] {
    display: flex;
    gap: 16px;
    overflow: hidden;
}

/* Card matching .experience-container */
.skeleton-exp-card[b-0hmklkyypp] {
    flex: 1 1 0;
    min-width: 288px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--color-border-container, #E5E7EB);
    background: #FFF;
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.08);
    height: 500px;
    overflow: hidden;
}

/* ── Company header (logo + name) ────────────────────────────────── */
.skeleton-exp-header[b-0hmklkyypp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.skeleton-exp-logo[b-0hmklkyypp] {
    width: 64px;
    height: 64px;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.skeleton-exp-company-name[b-0hmklkyypp] {
    width: 55%;
    height: 20px;
    border-radius: 4px;
}

/* ── User section (avatar + role/name) ───────────────────────────── */
.skeleton-exp-user[b-0hmklkyypp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.skeleton-exp-avatar[b-0hmklkyypp] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-exp-user-info[b-0hmklkyypp] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.skeleton-exp-role[b-0hmklkyypp] {
    width: 50px;
    height: 14px;
    border-radius: 4px;
}

.skeleton-exp-name[b-0hmklkyypp] {
    width: 100px;
    height: 18px;
    border-radius: 4px;
}

/* ── Rating rows ─────────────────────────────────────────────────── */
.skeleton-exp-ratings[b-0hmklkyypp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    flex: 1;
}

.skeleton-exp-rating-row[b-0hmklkyypp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.skeleton-exp-label[b-0hmklkyypp] {
    width: 40%;
    height: 14px;
    border-radius: 4px;
}

.skeleton-exp-stars[b-0hmklkyypp] {
    width: 100px;
    height: 16px;
    border-radius: 4px;
}

/* ── Comment block ───────────────────────────────────────────────── */
.skeleton-exp-comment[b-0hmklkyypp] {
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid var(--color-border-container, #E5E7EB);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-exp-comment-line[b-0hmklkyypp] {
    width: 100%;
    height: 14px;
    border-radius: 4px;
}

.skeleton-exp-comment-short[b-0hmklkyypp] {
    width: 65%;
}

/* ── Responsive: hide extra cards ────────────────────────────────── */
/* Desktop compact (1024–1399): show 3 */
@media (max-width: 1399px) {
    .skeleton-exp-card:nth-child(n+4)[b-0hmklkyypp] {
        display: none;
    }
}

/* Tablet Landscape (768–1023): show 2 */
@media (max-width: 1023px) {
    .skeleton-exp-card:nth-child(n+3)[b-0hmklkyypp] {
        display: none;
    }
}

/* Tablet Portrait + Mobile: show 1 (static 390px container) */
@media (max-width: 767px) {
    .skeleton-exp-card:nth-child(n+2)[b-0hmklkyypp] {
        display: none;
    }

    .skeleton-exp-card[b-0hmklkyypp] {
        max-width: 288px;
        margin: 0 auto;
    }
}
/* /Components/Pages/Home/Sections/HomeHeaderBanner.razor.rz.scp.css */
/* ===================================================================
   HomeHeaderBanner – Figma "Home con marcas" hero banner
   Desktop 1920×580 · Tablet Landscape 1024×309
   Tablet Portrait 768×232 · Mobile 390×510
   =================================================================== */

/* ── Mobile-first (< 768px) ─────────────────────────────────────── */
.header-banner[b-wgeq6y3jhn] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.banner-content[b-wgeq6y3jhn] {
    display: flex;
    flex-direction: column-reverse;
    gap: 16px;
    align-items: center;
    width: 100%;
}

.banner-image[b-wgeq6y3jhn] {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .banner-image img[b-wgeq6y3jhn] {
        max-width: 100%;
        height: auto;
        display: block;
    }

.banner-text[b-wgeq6y3jhn] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 4px;
    font-family: var(--font-family-Poppins, 'Poppins', sans-serif);
}

.banner-title[b-wgeq6y3jhn] {
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-base-black, #000);
    max-width: 250px;
}

.banner-text .text-strong[b-wgeq6y3jhn] {
    color: var(--color-base-black, #000);
    font-weight: 900;
    line-height: 1.15;
    font-size: 28px;
    -webkit-text-stroke: 0.5px var(--color-base-black, #000);
}

@media (max-width: 767px) {
    .banner-title[b-wgeq6y3jhn] {
        font-size: 28px;
        max-width: 240px;
    }

    .banner-text .text-strong[b-wgeq6y3jhn] {
        font-size: 24px;
    }
}

/* ── Tablet Portrait (768px – 1023px) ───────────────────────────── */
@media (min-width: 768px) {
    .header-banner[b-wgeq6y3jhn] {
        min-height: 232px;
    }

    .banner-content[b-wgeq6y3jhn] {
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        gap: 0px;
    }

    .banner-image[b-wgeq6y3jhn] {
        flex: 0 0 45%;
        max-width: 45%;
        justify-content: flex-start;
    }

        .banner-image img[b-wgeq6y3jhn] {
            width: 100%;
            height: auto;
            max-width: 420px;
        }

    .banner-text[b-wgeq6y3jhn] {
        text-align: center;
        align-items: center;
    }

    .banner-title[b-wgeq6y3jhn] {
        font-size: 20px;
        max-width: 100%;
    }

    .banner-text .text-strong[b-wgeq6y3jhn] {
        font-size: 20px;
    }
}

/* ── Tablet Landscape (1024px – 1199px) ─────────────────────────── */
@media (min-width: 1024px) {
    .banner-content[b-wgeq6y3jhn] {
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        gap: 3%;
    }

    .banner-image[b-wgeq6y3jhn] {
        flex: 0 0 45%;
        max-width: 45%;
        justify-content: flex-start;
    }

        .banner-image img[b-wgeq6y3jhn] {
            width: 100%;
            height: auto;
            max-width: 500px;
        }

    .banner-text[b-wgeq6y3jhn] {
        text-align: center;
        align-items: center;
    }

    .banner-title[b-wgeq6y3jhn] {
        font-size: 24px;
        max-width: 100%;
    }

    .banner-text .text-strong[b-wgeq6y3jhn] {
        font-size: 28px;
    }
}


/* ── XL Desktop (≥ 1400px) ──────────────────────────────────────── */
@media (min-width: 1400px) {
    .banner-title[b-wgeq6y3jhn] {
        font-size: 48px;
        text-align: center;
        max-width: 400px;
    }

    .banner-text .text-strong[b-wgeq6y3jhn] {
        font-size: 53px;
        width: 650px;
    }

    .banner-image img[b-wgeq6y3jhn] {
        width: 100%;
        height: auto;
        max-width: 700px;
    }
}

/* ── Skeleton shimmer for text placeholders ──────────────────────── */
@keyframes skeleton-shimmer-b-wgeq6y3jhn {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}

.skeleton-shimmer[b-wgeq6y3jhn] {
    background: linear-gradient(90deg, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.15) 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer-b-wgeq6y3jhn 1.5s infinite ease-in-out;
    border-radius: 6px;
}

/* Full hero image skeleton placeholder */
.skel-hero-image[b-wgeq6y3jhn] {
    width: 320px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .skel-hero-image[b-wgeq6y3jhn] {
        width: 100%;
        max-width: 420px;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .skel-hero-image[b-wgeq6y3jhn] {
        width: 100%;
        max-width: 500px;
    }
}

@media (min-width: 1200px) {
    .skel-hero-image[b-wgeq6y3jhn] {
        width: 100%;
        max-width: 670px;
    }
}

.banner-title-skeleton[b-wgeq6y3jhn] {
    width: 340px;
    max-width: 80%;
    height: 28px;
}

.banner-subtitle-skeleton[b-wgeq6y3jhn] {
    width: 280px;
    max-width: 70%;
    height: 24px;
    margin-top: 6px;
}

.banner-subtitle-short[b-wgeq6y3jhn] {
    width: 200px;
    max-width: 50%;
}

@media (min-width: 1200px) {
    .banner-title-skeleton[b-wgeq6y3jhn] {
        height: 42px;
        width: 500px;
    }

    .banner-subtitle-skeleton[b-wgeq6y3jhn] {
        height: 32px;
        width: 380px;
    }

    .banner-subtitle-short[b-wgeq6y3jhn] {
        width: 280px;
    }
}
/* /Components/Pages/Home/Sections/HomePromociones.razor.rz.scp.css */
.content-title[b-t41jrv69yr] {
    color: var(--gray-color-neutral-800, #262626);
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 24px;
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    line-height: 130%;
    margin: 0;
}

.content-header[b-t41jrv69yr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.btn-ver-todas[b-t41jrv69yr] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    color: var(--color-brand-primary-700, #0E8752);
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 14px;
    font-weight: var(--font-weight-medium, 500);
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
}

.btn-ver-todas:hover[b-t41jrv69yr] {
    opacity: 0.85;
}

.btn-ver-todas svg[b-t41jrv69yr] {
    flex-shrink: 0;
}

.content-container[b-t41jrv69yr] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--Background-color-surface-app, #FAFAFA);
    border: 1px solid var(--Border-color-border-container, #E5E7EB);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}

/* === GRID: 2 columns on desktop/tablet, 1 on mobile === */
.promotions-grid[b-t41jrv69yr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    width: 100%;
}

/* Links inside grid */
.promo-link[b-t41jrv69yr] {
    text-decoration: none;
    color: inherit;
    display: block;
    min-width: 0;
    /* SCRUM-568: la card elige su variante de Figma por el ancho de esta celda. */
    container: promo-card / inline-size;
}

.footer-ver-mas[b-t41jrv69yr] {
    display: none;
    justify-content: center;
}

.btn-ver-mas-footer[b-t41jrv69yr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    border: 1.5px solid var(--color-brand-primary-700, #0E8752);
    border-radius: 999px;
    color: var(--color-brand-primary-700, #0E8752);
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 14px;
    font-weight: var(--font-weight-medium, 500);
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
}

    .btn-ver-mas-footer:hover[b-t41jrv69yr] {
        opacity: 0.85;
    }

/* Tablet Landscape: 768–1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .content-title[b-t41jrv69yr] {
        font-size: 20px;
        line-height: 24px;
    }

    .btn-ver-todas[b-t41jrv69yr] {
        font-size: 14px;
        padding: 8px;
    }

    .content-container[b-t41jrv69yr] {
        gap: 24px;
        padding: 24px;
    }

    .promotions-grid[b-t41jrv69yr] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

/* Mobile: single column */
@media (max-width: 767px) {
    .content-title[b-t41jrv69yr] {
        font-size: 16px;
        line-height: 120%;
    }

    .content-container[b-t41jrv69yr] {
        padding: 24px 16px;
        border-radius: 12px;
    }

    .promotions-grid[b-t41jrv69yr] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .btn-ver-todas[b-t41jrv69yr] {
        display: none;
    }

    .footer-ver-mas[b-t41jrv69yr] {
        display: flex;
    }
}
/* /Components/Pages/Home/Sections/HomePromoSkeleton.razor.rz.scp.css */
/* =====================================================================
   HomePromoSkeleton – Shimmer skeleton styles for promo/sorteo grids
   ===================================================================== */

@keyframes skeleton-shimmer-b-gxrmztv713 {
    0% {
        background-position: -400px 0;
    }
    100% {
        background-position: 400px 0;
    }
}

.skeleton-shimmer[b-gxrmztv713] {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer-b-gxrmztv713 1.5s infinite ease-in-out;
}

/* Title placeholder */
.skeleton-title[b-gxrmztv713] {
    width: 280px;
    height: 28px;
    border-radius: 6px;
}

/* 2-column grid matching new layout */
.skeleton-promo-grid[b-gxrmztv713] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
}

.skeleton-promo-card[b-gxrmztv713] {
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 0.75rem;
}

@media (max-width: 700px) {
    .skeleton-promo-grid[b-gxrmztv713] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Home/Sections/HomeProximamente.razor.rz.scp.css */
.proximamente-container[b-7mimaqo0e9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-brand-primary-400);
    border-radius: 0;
    padding: 60px 40px;
    margin: 0;
    text-align: center;
    min-height: 240px;
}

.proximamente-icon[b-7mimaqo0e9] {
    margin-bottom: 16px;
    color: #FFFFFF;
}

.proximamente-icon svg[b-7mimaqo0e9] {
    width: 96px;
    height: 96px;
}

.proximamente-title[b-7mimaqo0e9] {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.3;
    color: #1A1A1A;
    margin: 0;
}

/* ── Tablet Landscape ─── */
@media (min-width: 767px) and (max-width: 1023px) {
    .proximamente-container[b-7mimaqo0e9] {
        padding: 48px 32px;
        min-height: 200px;
    }

    .proximamente-title[b-7mimaqo0e9] {
        font-size: 24px;
    }
}

/* ── Tablet Portrait ─── */
@media (min-width: 390px) and (max-width: 767px) {
    .proximamente-container[b-7mimaqo0e9] {
        padding: 40px 24px;
        min-height: 180px;
    }

    .proximamente-title[b-7mimaqo0e9] {
        font-size: 22px;
    }

    .proximamente-icon svg[b-7mimaqo0e9] {
        width: 80px;
        height: 80px;
    }
}

/* ── Mobile ─── */
@media (max-width: 630px) {
    .proximamente-container[b-7mimaqo0e9] {
        padding: 48px 24px;
        min-height: 200px;
        border-radius: 0;
        margin: 0;
    }

    .proximamente-title[b-7mimaqo0e9] {
        font-size: 24px;
    }

    .proximamente-icon svg[b-7mimaqo0e9] {
        width: 80px;
        height: 80px;
    }
}
/* /Components/Pages/Home/Sections/HomeRecentExperiences.razor.rz.scp.css */
.ds-carousel-dots[b-b0exfmxvwd] {
    padding: 16px 0 0 0;
}

.content-container[b-b0exfmxvwd] {
    gap: 8px;
}

.experience-card-wrapper[b-b0exfmxvwd] {
    min-width: 0;
}

/* Desktop compact: ≤ 1399px → 3 columns */
/* Tablet Portrait + Mobile: ≤ 767px (static 390px container) */
@media (max-width: 767px) {
    .content-container[b-b0exfmxvwd] {
        padding: 24px 40px;
        gap: 8px;
    }

    .content-title[b-b0exfmxvwd] {
        font-size: 16px;
    }

    .ds-carousel-dots[b-b0exfmxvwd] {
        padding: 0;
    }
}
/* /Components/Pages/Home/Sections/HomeSorteos.razor.rz.scp.css */
/* ===================================================================
   HomeSorteos – Home-specific styles for the sorteos section
   =================================================================== */

.content-container[b-vc1hta6btj] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Title ───────────────────────────────────────────────────────── */
.content-title[b-vc1hta6btj] {
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-color-neutral-800, #262626);
    line-height: 130%;
    margin: 0;
}

/* ── Header ──────────────────────────────────────────────────────── */
.content-header[b-vc1hta6btj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.btn-ver-todas[b-vc1hta6btj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    color: var(--color-brand-primary-700, #0E8752);
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 14px;
    font-weight: var(--font-weight-medium, 500);
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
}

.btn-ver-todas:hover[b-vc1hta6btj] {
    opacity: 0.85;
}

.btn-ver-todas svg[b-vc1hta6btj] {
    flex-shrink: 0;
}

/* ── Grid ────────────────────────────────────────────────────────── */
.sorteos-grid[b-vc1hta6btj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    width: 100%;
}

/* ── Links ───────────────────────────────────────────────────────── */
.sorteo-link[b-vc1hta6btj] {
    text-decoration: none;
    color: inherit;
    display: block;
    min-width: 0;
    /* SCRUM-568: la card elige su variante de Figma por el ancho de esta celda. */
    container: promo-card / inline-size;
}

/* ── Tablet ──────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .content-title[b-vc1hta6btj] {
        font-size: 20px;
    }

    .btn-ver-todas[b-vc1hta6btj] {
        font-size: 14px;
    }
}

/* ── Footer Ver más (hidden by default, shown on mobile) ─────── */
.footer-ver-mas[b-vc1hta6btj] {
    display: none;
    justify-content: center;
}

.btn-ver-mas-footer[b-vc1hta6btj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    border: 1.5px solid var(--color-brand-primary-700, #0E8752);
    border-radius: 999px;
    color: var(--color-brand-primary-700, #0E8752);
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 14px;
    font-weight: var(--font-weight-medium, 500);
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
}

.btn-ver-mas-footer:hover[b-vc1hta6btj] {
    opacity: 0.85;
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .content-container[b-vc1hta6btj] {
        padding: 24px 16px;
    }

    .content-title[b-vc1hta6btj] {
        font-size: 16px;
        line-height: 120%;
    }

    .sorteos-grid[b-vc1hta6btj] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .btn-ver-todas[b-vc1hta6btj] {
        display: none;
    }

    .footer-ver-mas[b-vc1hta6btj] {
        display: flex;
    }
}
/* /Components/Pages/Home/Sections/HomeSumasEstrellas.razor.rz.scp.css */
.sumas-estrellas-container[b-hetzx95hn1] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-brand-primary-400);
    border-radius: 16px;
    overflow: hidden;
    margin-top: 16px;
}

.estrellas-img[b-hetzx95hn1] {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.estrellas-ilustracion[b-hetzx95hn1] {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
    object-position: left top;
    margin-top: -6px;
    transform: scale(1.01);
    transform-origin: top center;
}

/* Mobile/desktop image toggle */
.estrellas-ilustracion-desktop-xl[b-hetzx95hn1] {
    display: none;
}

.estrellas-ilustracion-desktop[b-hetzx95hn1] {
    display: none;
}

.estrellas-ilustracion-mobile[b-hetzx95hn1] {
    display: block;
}

.estrellas-texto[b-hetzx95hn1] {
    width: 100%;
    min-width: 0;
    padding: 20px 16px 24px;
}

/* Star = Peso equivalency – centered below the illustration */
.estrella-equivalencia[b-hetzx95hn1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--color-brand-primary-50, #effef7);
    border-radius: 9999px;
    margin: 16px auto;
    width: max-content;
    align-self: center;
}

.estrella-equiv-icon[b-hetzx95hn1] {
    width: 40px;
    height: auto;
}

.flag-icon[b-hetzx95hn1] {
    width: 30px;
    height: auto;
}

.equiv-text[b-hetzx95hn1] {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: 24px;
    color: var(--color-base-black, #000);
    line-height: 1;
}

.estrellas-info h3[b-hetzx95hn1] {
    color: var(--color-base-black, #000);
    font-family: var(--font-family-Poppins, Poppins);
    font-size: clamp(20px, 5vw, 24px);
    font-style: normal;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.3;
    letter-spacing: 0;
    margin: 0;
    text-align: center;
}

.estrellas-info.text-center[b-hetzx95hn1] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
}

.estrellas-info span[b-hetzx95hn1] {
    color: var(--color-base-black, #000);
}

.estrellas-gift-text[b-hetzx95hn1] {
    display: block;
    margin-top: 18px;
    color: var(--color-base-white, #fff);
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 16px;
    font-weight: var(--font-weight-extrabold, 800);
    font-style: normal;
    line-height: 24px;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.estrellas-btn[b-hetzx95hn1] {
    margin-top: 12px;
    text-align: center;
    align-self: start;
}

.estrellas-cta-link[b-hetzx95hn1] {
    text-decoration: none;
    display: block;
    width: 100%;
}

/* Mobile: badge above, button + gift text side by side */
.with-cta .estrellas-texto[b-hetzx95hn1] {
    display: flex;
    flex-direction: column;
}

.with-cta .estrellas-info[b-hetzx95hn1] {
    order: 1;
}

.with-cta .estrella-equivalencia[b-hetzx95hn1] {
    order: 2;
}

.with-cta .estrellas-cta-row[b-hetzx95hn1] {
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    width: 100%;
    min-width: 0;
}

    .with-cta .estrellas-cta-row .estrellas-btn[b-hetzx95hn1] {
        margin-top: 0;
        width: 100%;
    }

    .with-cta .estrellas-cta-row .estrellas-gift-text[b-hetzx95hn1] {
        margin-top: 0;
        text-align: center;
    }

:host[b-hetzx95hn1] (.btn-regular-secondary) {
    width: 100%;
    display: block;
}

@media (min-width: 1024px) {
    .sumas-estrellas-container[b-hetzx95hn1] {
        flex-direction: row;
        align-items: stretch;
        min-height: 200px;
    }

    .estrellas-img[b-hetzx95hn1] {
        flex: 0 0 50%;
        /*        padding-right: 5rem !important;*/
        min-height: 100%;
    }

    .estrellas-ilustracion[b-hetzx95hn1] {
        flex: 1;
        min-height: 200px;
        object-fit: cover;
        object-position: left top;
        transform: scale(1.01);
        transform-origin: top left;
    }

    .estrellas-ilustracion-desktop-xl[b-hetzx95hn1] {
        display: none;
    }

    .estrellas-ilustracion-desktop[b-hetzx95hn1] {
        display: block;
    }

    .estrellas-ilustracion-mobile[b-hetzx95hn1] {
        display: none;
    }

    .estrellas-texto[b-hetzx95hn1] {
        flex: 1;
        min-height: 200px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .estrellas-info.text-center[b-hetzx95hn1] {
        width: 100%;
    }

    .estrellas-info h3[b-hetzx95hn1] {
        font-size: 24px;
        text-align: start;
        max-width: 390px;
    }

    /* ── Logged-in state overrides at 1024px ── */
    .sumas-estrellas-container:not(.with-cta) .estrella-equivalencia[b-hetzx95hn1] {
        position: static;
        margin: 8px 0 0;
        align-self: flex-start;
    }

    .sumas-estrellas-container:not(.with-cta) .estrellas-info h3[b-hetzx95hn1] {
        font-size: 28px;
        line-height: 1.2;
        text-align: start;
        max-width: 410px;
    }

    .estrellas-info span[b-hetzx95hn1] {
        color: var(--color-base-black, #000);
        font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
        font-size: 24px;
        text-align: start;
        font-weight: var(--font-weight-regular, 400);
        line-height: 120%;
        display: block;
        margin-top: 20px;
    }

        .estrellas-info span.estrellas-gift-text[b-hetzx95hn1] {
            color: var(--color-base-white, #fff);
            font-style: normal;
            text-align: start;
            font-weight: var(--font-weight-extrabold, 800);
        }

    .estrellas-btn[b-hetzx95hn1] {
        margin-top: 0;
        margin-left: 0;
    }

    :host[b-hetzx95hn1] (.btn-regular-secondary) {
        width: auto;
        flex-shrink: 0;
    }

    /* ── Not-logged-in (with-cta) overrides ── */
    .with-cta[b-hetzx95hn1] {
        align-items: center;
    }

        .with-cta .estrellas-texto[b-hetzx95hn1] {
            flex: 1 0 0%;
            min-width: 0;
            padding: 24px;
            align-items: flex-start;
            gap: 0;
        }

        .with-cta .estrellas-info[b-hetzx95hn1] {
            width: 100%;
            order: unset;
        }

            .with-cta .estrellas-info h3[b-hetzx95hn1] {
                font-family: var(--font-family-Poppins, Poppins);
                font-size: 24px;
                font-weight: var(--font-weight-semibold, 600);
                line-height: 1;
                letter-spacing: 0;
                text-align: start;
                max-width: none;
                margin: 0;
            }

        .with-cta .estrellas-cta-row[b-hetzx95hn1] {
            order: unset;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 24px;
            margin-top: 24px;
            width: 100%;
            min-width: 0;
        }

            .with-cta .estrellas-cta-row .estrellas-btn[b-hetzx95hn1] {
                margin-top: 0;
                margin-left: 0;
                width: auto;
            }

            .with-cta .estrellas-cta-row .estrellas-gift-text[b-hetzx95hn1] {
                color: var(--color-base-white, #fff);
                font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
                flex: 1 1 auto;
                min-width: 0;
                font-size: 16px;
                font-weight: var(--font-weight-extrabold, 800);
                line-height: 24px;
                text-align: start;
                white-space: normal;
                overflow-wrap: anywhere;
                margin-top: 0;
            }

            .with-cta .estrellas-cta-row .estrellas-btn[b-hetzx95hn1] {
                margin-top: 0;
                margin-left: 0;
            }

        .with-cta .estrella-equivalencia[b-hetzx95hn1] {
            order: unset;
            position: static;
            margin: 12px 0 0;
            align-self: flex-start;
            padding: 3px 8px;
        }

        .with-cta .estrella-equiv-icon[b-hetzx95hn1] {
            width: 18px;
        }

        .with-cta .flag-icon[b-hetzx95hn1] {
            width: 16px;
        }

        .with-cta .equiv-text[b-hetzx95hn1] {
            font-size: 13px;
            line-height: 16px;
        }
}

/* 768–1024 px: badge flows naturally below the text */
@media (min-width: 768px) {
    .estrella-equivalencia[b-hetzx95hn1] {
        position: static;
        margin: 32px 0 0;
        align-self: self-start;
    }

    .estrellas-texto[b-hetzx95hn1] {
        min-width: 0;
        padding: 20px 16px;
    }

    .estrellas-info h3[b-hetzx95hn1] {
        max-width: 590px;
        text-align: start !important;
    }

    .estrellas-info.text-center[b-hetzx95hn1] {
        height: 3rem;
    }

    .text-center h3[b-hetzx95hn1] {
        align-self: self-start !important;
    }

    .estrella-equiv-icon[b-hetzx95hn1] {
        width: 18px;
    }

    .flag-icon[b-hetzx95hn1] {
        width: 16px;
    }

    .equiv-text[b-hetzx95hn1] {
        font-size: 13px;
    }

    .estrellas-img[b-hetzx95hn1] {
        padding-right: 1rem;
    }

    /* ── with-cta: badge above, btn + gift side by side ── */
    .with-cta .estrellas-texto[b-hetzx95hn1] {
        min-width: 0;
        padding: 20px 16px;
        padding: 0px 0px;
        margin-top: 0;
        align-items: flex-start;
    }

    .with-cta .estrellas-info[b-hetzx95hn1] {
        order: 1;
    }

        .with-cta .estrellas-info h3[b-hetzx95hn1] {
            max-width: none;
            text-align: start !important;
        }

    .with-cta .estrella-equivalencia[b-hetzx95hn1] {
        order: 2;
        position: static;
        margin: 8px 0 0;
        align-self: flex-start;
        padding: 3px 8px;
    }

    .with-cta .estrellas-cta-row[b-hetzx95hn1] {
        order: 3;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        margin-top: 12px;
        width: auto;
    }

        .with-cta .estrellas-cta-row .estrellas-btn[b-hetzx95hn1] {
            margin-top: 0;
            margin-left: 0;
            width: auto;
        }

        .with-cta .estrellas-cta-row .estrellas-gift-text[b-hetzx95hn1] {
            margin-top: 0;
            text-align: start;
            font-size: 14px;
            white-space: normal;
            overflow-wrap: anywhere;
        }

}

@media (min-width: 768px) {
    .sumas-estrellas-container[b-hetzx95hn1] {
        flex-direction: row;
        align-items: stretch;
        min-height: 200px;
    }

    .estrellas-btn[b-hetzx95hn1]  .e-btn {
        padding: 8px 12px !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        font-family: "Poppins" !important;
        height: 36px !important;
    }

    .estrellas-img[b-hetzx95hn1] {
        flex: 0 0 50%;
        min-height: 200px;
    }

    .estrellas-ilustracion[b-hetzx95hn1] {
        flex: 1;
        min-height: 200px;
        object-fit: cover;
        object-position: left top;
        transform: scale(1.01);
        transform-origin: top left;
    }

    .estrellas-ilustracion-desktop-xl[b-hetzx95hn1] {
        display: none;
    }

    .estrellas-ilustracion-desktop[b-hetzx95hn1] {
        display: block;
    }

    .estrellas-ilustracion-mobile[b-hetzx95hn1] {
        display: none;
    }

    .estrellas-texto[b-hetzx95hn1] {
        flex: 1;
        padding: 0px 12px 0px 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .estrellas-info h3[b-hetzx95hn1] {
        font-size: 20px;
        line-height: 24px;
        text-align: center;
    }

    .estrellas-info span[b-hetzx95hn1] {
        font-size: 16px;
        font-style: italic;
        line-height: 120%;
        display: block;
        margin-top: 8px;
    }

        .estrellas-info span.estrellas-gift-text[b-hetzx95hn1] {
            color: var(--color-base-white, #fff);
            font-style: normal;
            font-size: 13px;
            font-weight: var(--font-weight-extrabold, 800);
        }

    .with-cta .estrellas-cta-row .estrellas-gift-text[b-hetzx95hn1] {
        font-size: 13px;
    }

    .estrellas-btn[b-hetzx95hn1] {
        margin-top: 12px;
    }

    :host[b-hetzx95hn1] (.btn-regular-secondary) {
        width: auto;
        flex-shrink: 0;
    }

    .estrellas-gift-text[b-hetzx95hn1] {
        font-size: 13px;
    }

    /* ── Logged-in state: badge below text ── */
    .sumas-estrellas-container:not(.with-cta) .estrella-equivalencia[b-hetzx95hn1] {
        position: static;
        margin: 12px 0 0;
        align-self: flex-start;
    }

    .sumas-estrellas-container:not(.with-cta) .estrellas-info h3[b-hetzx95hn1] {
        font-size: 20px;
        line-height: 1.3;
        text-align: start;
    }
}

@media (max-width: 767px) {
    .estrellas-ilustracion[b-hetzx95hn1] {
        min-height: 160px;
        margin-bottom: 3px;
    }

    .estrella-equiv-icon[b-hetzx95hn1] {
        width: 24px;
    }

    .flag-icon[b-hetzx95hn1] {
        width: 22px;
    }

    .equiv-text[b-hetzx95hn1] {
        font-size: 16px;
    }

    .estrellas-texto[b-hetzx95hn1] {
        padding: 16px 20px 20px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .estrellas-info h3[b-hetzx95hn1] {
        font-size: 24px;
        line-height: 130%;
        max-width: 300px;
        text-align: center;
    }

    .estrellas-info span[b-hetzx95hn1] {
        font-size: 1.1em;
        font-style: italic;
        line-height: 18px;
        display: block;
        margin-top: 8px;
    }

        .estrellas-info span.estrellas-gift-text[b-hetzx95hn1] {
            color: var(--color-base-white, #fff);
            font-style: normal;
            font-weight: var(--font-weight-extrabold, 800);
        }

    .estrellas-gift-text[b-hetzx95hn1] {
        font-size: 16px;
    }

    .estrellas-btn[b-hetzx95hn1] {
        margin-top: 10px;
        align-self: center !important;
    }

    .estrellas-cta-row[b-hetzx95hn1] {
        flex-direction: column-reverse !important;
        margin-top: 0 !important;
    }

    .estrellas-btn[b-hetzx95hn1]  button {
        width: 100% !important;
        max-width: 400px !important;
    }
}

@media(min-width: 1024px) {
    .estrellas-btn[b-hetzx95hn1]  .e-btn {
        padding: 8px 16px !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        font-family: "Poppins" !important;
        height: 36px !important;
    }
}

/* Home CTA parity with selected Figma button (node 3074:27748). */
.with-cta .estrellas-cta-row .estrellas-btn[b-hetzx95hn1] {
    width: 139px;
    margin-top: 0;
}

    /* (override de paridad Figma eliminado: apuntaba a button.e-btn.btn-secondary.regular
       pero BtnSecondary con Href renderiza <a> con clase "large" — nunca aplicó) */

@media (max-width: 767px) {
    .with-cta .estrellas-cta-row .estrellas-btn[b-hetzx95hn1] {
        width: 100%;
        max-width: none;
    }

}

/* ── >1400 px: badge on the left below stars, text/btn on the right ── */
@media (min-width: 1400px) {
    .estrellas-ilustracion-desktop-xl[b-hetzx95hn1] {
        display: block;
    }

    .estrellas-ilustracion-desktop[b-hetzx95hn1] {
        display: none;
    }

    .estrellas-ilustracion-mobile[b-hetzx95hn1] {
        display: none;
    }

    .estrellas-img[b-hetzx95hn1] {
        padding-right: 1rem !important;
    }

    .with-cta .estrellas-texto[b-hetzx95hn1] {
        padding: 24px 40px;
    }

    .with-cta .estrellas-info h3[b-hetzx95hn1] {
        font-size: 40px;
        max-width: 470px;
    }

    .with-cta .estrella-equivalencia[b-hetzx95hn1] {
        position: absolute;
        left: 55px;
        bottom: 20px;
        order: unset;
        margin: 0;
        background: var(--color-base-white, #fff);
        padding: 6px 14px;
        border-radius: 9999px;
        align-self: auto;
        z-index: 1;
    }

    .with-cta .estrellas-cta-row[b-hetzx95hn1] {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 16px;
        margin-top: 24px;
    }

        .with-cta .estrellas-cta-row .estrellas-gift-text[b-hetzx95hn1] {
            font-size: 24px;
            font-weight: var(--font-weight-extrabold, 800);
            white-space: nowrap;
        }

    .with-cta .estrella-equiv-icon[b-hetzx95hn1] {
        width: 30px;
    }

    .with-cta .equiv-text[b-hetzx95hn1] {
        font-size: 22px;
        line-height: 28px;
    }

    .estrellas-btn[b-hetzx95hn1]  .e-btn {
        padding: 6px 4px !important;
        font-weight: 700 !important;
        font-family: "Poppins" !important;
    }

    /* ── Logged-in state: badge at bottom-left over the stars image ── */
    .sumas-estrellas-container:not(.with-cta) .estrella-equivalencia[b-hetzx95hn1] {
        position: absolute;
        left: 53px;
        bottom: 20px;
        margin: 0;
        align-self: auto;
        background: var(--color-base-white, #fff);
        padding: 6px 14px;
        border-radius: 9999px;
        z-index: 1;
    }

    .sumas-estrellas-container:not(.with-cta) .estrella-equiv-icon[b-hetzx95hn1] {
        width: 28px;
    }

    .sumas-estrellas-container:not(.with-cta) .flag-icon[b-hetzx95hn1] {
        width: 23px;
    }

    .sumas-estrellas-container:not(.with-cta) .equiv-text[b-hetzx95hn1] {
        font-size: 22px;
        line-height: 28px;
    }

    .sumas-estrellas-container:not(.with-cta) .estrellas-info h3[b-hetzx95hn1] {
        font-size: 40px;
        line-height: 1;
        text-align: start;
        max-width: none;
    }

    .sumas-estrellas-container:not(.with-cta) .estrellas-texto[b-hetzx95hn1] {
        padding: 24px 40px;
    }
}

/* ── Skeleton shimmer for text placeholders ──────────────────────── */
@keyframes skeleton-shimmer-b-hetzx95hn1 {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}

.skeleton-shimmer[b-hetzx95hn1] {
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.02) 50%, rgba(0,0,0,0.06) 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer-b-hetzx95hn1 1.5s infinite ease-in-out;
    border-radius: 6px;
}

/* ── Full skeleton container ──────────────────────────────────────── */
.estrellas-skeleton-container[b-hetzx95hn1] {
    display: flex;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 16px;
    background: #e8e8e8;
    min-height: 200px;
}

.estrellas-skel-left[b-hetzx95hn1] {
    flex: 0 0 40%;
    min-height: 200px;
}

.estrellas-skel-wave[b-hetzx95hn1] {
    width: 100%;
    height: 100%;
    min-height: 200px;
    border-radius: 0;
}

.estrellas-skel-right[b-hetzx95hn1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 40px;
    justify-content: center;
}

.estrellas-skeleton-title[b-hetzx95hn1] {
    width: 80%;
    height: 40px;
    max-width: 450px;
}

.estrellas-skeleton-subtitle[b-hetzx95hn1] {
    width: 60%;
    height: 24px;
    max-width: 300px;
}

.estrellas-skeleton-btn[b-hetzx95hn1] {
    width: 180px;
    height: 44px;
    border-radius: 8px;
}

.estrellas-skeleton-gift[b-hetzx95hn1] {
    width: 200px;
    height: 18px;
}

@media (max-width: 767px) {
    .estrellas-skeleton-container[b-hetzx95hn1] {
        flex-direction: column;
    }

    .estrellas-skel-left[b-hetzx95hn1] {
        flex: none;
        min-height: 160px;
    }

    .estrellas-skel-right[b-hetzx95hn1] {
        padding: 16px 20px 20px;
    }
}
/* /Components/Pages/MainMenu/MainMenuResponsiveSsr.razor.rz.scp.css */
/* ── Back component replica (static SSR) ── */

.back-button[b-67amiw7sed] {
    display: flex;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 4px;
    border: 1px solid var(--color-base-black, #000);
    background-color: transparent;
    cursor: pointer;
}

.back-button svg[b-67amiw7sed],
.back-button img[b-67amiw7sed] {
    width: 32px;
    height: 32px;
}

.back-container .back-text[b-67amiw7sed] {
    color: var(--gray-color-neutral-800, #262626);
    font-family: var(--font-family-Poppins, Poppins);
    font-size: 20px;
    font-style: normal;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 24px;
}

.back-container[b-67amiw7sed] {
    align-items: center;
    gap: 14px;
}

.back-divider[b-67amiw7sed] {
    width: 100%;
}

@media (max-width: 768px) {
    .back-divider[b-67amiw7sed] {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

/* ── ItemMainMenu replica (static SSR, sem scoped CSS do DesignSystem) ── */

.item-main-menu-link[b-67amiw7sed] {
    text-decoration: none;
    color: inherit;
}

.item-main-menu-link:hover[b-67amiw7sed] {
    text-decoration: none;
    color: inherit;
}

.item-main-menu[b-67amiw7sed] {
    display: flex;
    width: auto !important;
    min-width: 0 !important;
    height: auto;
    padding: 16px;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    border: 2px solid var(--gray-color-neutral-100, #E9E9E9);
    background: var(--color-base-white, #FFF);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.item-main-menu:hover[b-67amiw7sed] {
    border-radius: 8px;
    border: 2px solid var(--gray-color-neutral-100, #E9E9E9);
    background: var(--color-brand-primary-100, #DAFEED);
}

.item-main-menu .text[b-67amiw7sed] {
    color: var(--gray-color-neutral-800, #262626);
    font-family: var(--font-family-Poppins, Poppins);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 16px;
    letter-spacing: -0.28px;
}

.item-main-menu .logo[b-67amiw7sed] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-main-menu .logo img[b-67amiw7sed] {
    max-width: 24px;
    height: auto;
}

/* ── Grid layout ── */

.main-menu-container[b-67amiw7sed] {
    display: flex;
    justify-content: center;
    width: 100%;
}

.main-menu-grid[b-67amiw7sed] {
    display: grid !important;
    gap: 16px;
    width: 100%;
    border-radius: 12px;
    justify-items: stretch;
}

/* Desktop (4 colunas) */
@media (min-width: 769px) {
    .main-menu-grid[b-67amiw7sed] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet Portrait (2 colunas) */
@media (min-width: 391px) and (max-width: 768px) {
    .main-menu-grid[b-67amiw7sed] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (1 coluna) */
@media (max-width: 390px) {
    .main-menu-grid[b-67amiw7sed] {
        display: grid !important;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 769px) {
    .back-container[b-67amiw7sed] {
        padding: 12px 16px 0;
    }

    .back-divider[b-67amiw7sed] {
        margin: 8px 16px 4px;
    }

    .main-menu-responsive .main-menu-grid[b-67amiw7sed] {
        display: flex;
    }

    .main-menu-grid[b-67amiw7sed] {
        display: flex !important;
        flex-direction: column;
        gap: 12px !important;
    }

    .main-menu-container[b-67amiw7sed] {
        display: flex !important;
        padding: 8px 16px 16px !important;
    }

    .item-main-menu[b-67amiw7sed] {
        padding: 14px 16px;
    }

    .item-main-menu .logo img[b-67amiw7sed] {
        max-width: 28px !important;
        width: 28px !important;
    }
}
/* /Components/Pages/Packs/PackCheckoutPage.razor.rz.scp.css */
/* Styles moved to /wwwroot/css/stripe-payments.css (global, non-scoped) */
/* /Components/Pages/Packs/PacksPage.razor.rz.scp.css */
/* =====================================================================
   PacksPage – Scoped SSR Styles
   Faithful reproduction of the Figma "Packs" page design.
   Four pack types: equipo (#0a7287), ventas (#07b59a),
   fidelización (#0dac66), full (#000000).
   ===================================================================== */

/* ── Page Container ── */
.packs-page[b-6edfspys99] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-top: 64px;
    padding-bottom: 96px;
    width: 100%;
    background: #ededed;
}

/* ── Hero Section ── */
.packs-hero[b-6edfspys99] {
    width: 100%;
    margin: 0 auto;
}

.packs-hero-frame[b-6edfspys99] {
    position: relative;
    width: 100%;
    max-width: 992px;
    min-height: 592px;
    margin: 0 auto;
}

.packs-hero-inner[b-6edfspys99] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding-bottom: 32px;
    min-height: 560px;
}

/* ── Title Bar (back + "Packs") ── */
.packs-title-bar[b-6edfspys99] {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 186.876px;
    padding-bottom: 16px;
    margin-bottom: 0;
    z-index: 1;
}

.packs-back-button[b-6edfspys99] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid #000;
    border-radius: 4px;
    background: transparent;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
    /* Sirve tanto para el enlace como para el botón que usa el historial. */
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.packs-back-button:hover[b-6edfspys99] {
    background: #f5f5f5;
}

.packs-title-label[b-6edfspys99] {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: #262626;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Hero Text ── */
.packs-hero-text[b-6edfspys99] {
    flex: 0 0 405.124px;
    width: 405.124px;
    max-width: 405.124px;
}

.packs-hero-heading[b-6edfspys99] {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: #000;
    margin: 0 0 24px;
}

.packs-hero-description[b-6edfspys99] {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    color: #000;
    width: 312px;
    max-width: 312px;
    margin: 0;
}

/* ── Hero Card ── */
.packs-hero-card[b-6edfspys99] {
    flex: 0 0 320px;
    width: 320px;
}

/* ── Combina Packs Section ── */
.packs-combina[b-6edfspys99] {
    width: 100%;
    margin: 0 auto;
}

.packs-combina-inner[b-6edfspys99] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: stretch;
    width: 100%;
    max-width: 992px;
    margin: 0 auto;
}

.packs-combina-divider[b-6edfspys99] {
    width: 100%;
    height: 1px;
    background: #9D9D9D;
}

.packs-combina-header[b-6edfspys99] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 465px;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

.packs-combina-title[b-6edfspys99] {
    font-size: 24px;
    line-height: 1.3;
    color: #000;
    margin: 0;
}

.packs-combina-title-normal[b-6edfspys99] {
    font-weight: 500;
}

.packs-combina-title strong[b-6edfspys99] {
    font-weight: 700;
}

.packs-combina-subtitle[b-6edfspys99] {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    color: #000;
    margin: 0;
    max-width: 425px;
}

.packs-combina-cards[b-6edfspys99] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
    justify-content: flex-start;
}

/* Tablet layout is hidden by default */
.packs-combina-cards--tablet[b-6edfspys99] {
    display: none;
}

.packs-tablet-row[b-6edfspys99] {
    display: flex;
    gap: 16px;
    justify-content: center;
    width: 100%;
}

.packs-tablet-row--center[b-6edfspys99] {
    justify-content: center;
}

.pack-card-link[b-6edfspys99] {
    text-decoration: none;
    color: inherit;
    display: block;
    flex-shrink: 0;
}

.pack-card-link:hover[b-6edfspys99] {
    text-decoration: none;
    color: inherit;
}

.pack-card-link:hover .pack-card-body[b-6edfspys99] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/*
 * DOM restructuring fix: HTML spec forbids <a> inside <a>.
 * The browser auto-closes the outer <a class="pack-card-link"> when it
 * encounters inner <a> tags (buy CTA / cancel link), creating empty
 * <a> fragments as siblings of <div class="pack-card">.
 * We hide those 0-width fragments so they don't create extra flex gaps.
 * Inside card-body, the <a> wraps header+features as one flex child.
 * Using display:contents makes its children become direct flex children
 * so justify-content:space-between distributes gaps correctly (3 children).
 */
.packs-combina-cards > a.pack-card-link[b-6edfspys99] {
    display: none;
}

.pack-card-body > a.pack-card-link[b-6edfspys99] {
    display: contents;
}

/* =====================================================================
   Card de pack

   El componente se fue a wwwroot/css/pack-card.css, una hoja global, para
   que la promo de Suscripción use exactamente estas reglas y no una copia
   suya: «hay que tomar los estilos de referencia de la página de packs»
   (Carolina, 15/10, SCRUM-213). Acá quedan solo las reglas propias de esta
   pantalla: el enlace que envuelve la card y los breakpoints de abajo.
   ===================================================================== */

.pack-card-actions .pack-card-link[b-6edfspys99],
.packs-combina .pack-card-actions .pack-card-link[b-6edfspys99] {
    width: 100%;
}

/* =====================================================================
   Responsive Styles
   ===================================================================== */

/* ── Desktop/tablet horizontal (1400px to 1024px) ── */
@media (max-width: 1400px) {

    .packs-hero[b-6edfspys99],
    .packs-combina[b-6edfspys99] {
        box-sizing: border-box;
        padding: 0 80px;
    }

    .packs-hero-frame[b-6edfspys99],
    .packs-combina-inner[b-6edfspys99] {
        max-width: 864px;
    }

    .packs-combina-cards[b-6edfspys99] {
        gap: 16px;
    }

    .packs-combina .pack-card-link[b-6edfspys99] {
        width: auto;
    }

    .packs-combina .pack-card[b-6edfspys99] {
        width: 277px;
        height: 580px;
    }

    .packs-combina .pack-card-title[b-6edfspys99] {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 54px;
    }

    .packs-combina .card-ventas .pack-card-title[b-6edfspys99] {
        font-size: 19.908px;
    }

    .packs-combina .card-ventas .pack-card-description[b-6edfspys99] {
        min-height: 63.704px;
        font-size: 15.926px;
    }

    .packs-combina .card-ventas .pack-feature-text[b-6edfspys99] {
        font-size: 11.945px;
    }

    .packs-combina .card-ventas .pack-card-price[b-6edfspys99] {
        gap: 7.963px;
    }

    .packs-combina .card-ventas .pack-price-amount[b-6edfspys99] {
        min-width: 111.482px;
        min-height: 31.852px;
        font-size: 31.852px;
        line-height: 31.852px;
    }

    .packs-combina .card-ventas .pack-price-period[b-6edfspys99],
    .packs-combina .card-ventas .pack-cancel-text[b-6edfspys99] {
        font-size: 13.935px;
    }

    .packs-combina .card-ventas .pack-cta-button[b-6edfspys99] {
        height: 35.834px;
        font-size: 15.85px;
        line-height: 23.779px;
    }

    .packs-combina .card-equipo .pack-card-title[b-6edfspys99] {
        white-space: normal;
        text-overflow: clip;
        overflow: visible;
    }

    .packs-combina .card-equipo .pack-card-body[b-6edfspys99] {
        padding: 40px 20px 24px;
    }

    .packs-combina .card-fidelizacion .pack-card-title[b-6edfspys99] {
        white-space: normal;
        text-overflow: clip;
        overflow: visible;
    }
}

/* ── Tablet/mobile grande (1024px to 768px) ── */
@media (max-width: 1023px) {

    .packs-hero[b-6edfspys99],
    .packs-combina[b-6edfspys99] {
        padding: 0 clamp(0px, calc((100vw - 672px) / 2), 24px);
    }

    .packs-hero-frame[b-6edfspys99],
    .packs-combina-inner[b-6edfspys99] {
        max-width: 720px;
    }

    .packs-hero-frame[b-6edfspys99] {
        min-height: 592px;
    }

    .packs-hero-inner[b-6edfspys99] {
        gap: 40px;
    }

    .packs-hero-text[b-6edfspys99] {
        flex-basis: 298px;
        width: 298px;
        max-width: 298px;
    }

    .packs-hero-card[b-6edfspys99] {
        width: 320px;
    }

    .packs-title-bar[b-6edfspys99] {
        left: 31px;
    }

    .packs-hero-description[b-6edfspys99] {
        width: 312px;
        max-width: 312px;
    }

    .packs-combina-cards[b-6edfspys99] {
        gap: 24px;
        width: 100%;
    }

    .packs-combina-cards--flat[b-6edfspys99] {
        display: none;
    }

    .packs-combina-cards--tablet[b-6edfspys99] {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
        align-items: center;
    }

    .packs-tablet-row[b-6edfspys99] {
        display: flex;
        gap: 24px;
        justify-content: center;
        width: 100%;
    }

    .packs-tablet-row--center[b-6edfspys99] {
        justify-content: center;
    }

    .packs-combina .pack-card-link[b-6edfspys99] {
        width: auto;
    }

    .packs-combina .pack-card[b-6edfspys99] {
        width: 320px;
        height: 560px;
    }

    .packs-combina .pack-card-title[b-6edfspys99] {
        min-height: auto;
    }
}

/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {
    .packs-page[b-6edfspys99] {
        padding-top: 24px;
        padding-bottom: 48px;
        gap: 48px;
    }

    .packs-hero[b-6edfspys99],
    .packs-combina[b-6edfspys99] {
        padding: 0 16px;
    }

    .packs-hero-frame[b-6edfspys99],
    .packs-combina-inner[b-6edfspys99] {
        max-width: 358px;
    }

    .packs-hero-frame[b-6edfspys99] {
        min-height: auto;
    }

    .packs-title-bar[b-6edfspys99] {
        position: static;
        margin-bottom: 32px;
        left: auto;
    }

    .packs-hero-inner[b-6edfspys99] {
        flex-direction: column;
        gap: 40px;
        align-items: center;
        min-height: auto;
        padding: 0 24px 0;
    }

    .packs-hero-heading[b-6edfspys99] {
        font-size: 24px;
        text-align: center;
    }

    .packs-hero-description[b-6edfspys99] {
        width: 310px;
        max-width: 310px;
        text-align: center;
    }

    .packs-hero-text[b-6edfspys99] {
        flex-basis: auto;
        width: 310px;
        max-width: 310px;
    }

    .packs-combina-inner[b-6edfspys99] {
        gap: 24px;
    }


    .packs-combina-header[b-6edfspys99] {
        width: 260px;
    }

    .packs-combina-subtitle[b-6edfspys99] {
        font-size: 16px;
        max-width: 310px;
    }

    .packs-combina-cards[b-6edfspys99] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    .packs-combina-cards--flat[b-6edfspys99] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    .packs-combina-cards--tablet[b-6edfspys99] {
        display: none;
    }

    .packs-hero-card[b-6edfspys99],
    .packs-combina .pack-card[b-6edfspys99] {
        width: 320px;
    }

    /* El título que envuelve y el padding angosto del cuerpo se fueron a
       pack-card.css con el resto del componente: no eran de esta pantalla
       —no estaban acotados a .packs-combina— y la promo los necesita igual. */
}

/* ── Quick-Pay Modal Overlay ── */
.packs-qp-overlay[b-6edfspys99] {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    animation: packs-qp-fade-in-b-6edfspys99 0.2s ease-out;
}

@keyframes packs-qp-fade-in-b-6edfspys99 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.packs-qp-modal[b-6edfspys99] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 358px;
    max-width: 90vw;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid var(--color-border-input, #7B7B7B);
    background: var(--color-surface-app, #FAFAFA);
    box-shadow: 0px 8px 8px -2px rgba(0, 0, 0, 0.04),
                0px 20px 20px -4px rgba(0, 0, 0, 0.08);
    animation: packs-qp-slide-up-b-6edfspys99 0.25s ease-out;
}

@keyframes packs-qp-slide-up-b-6edfspys99 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.packs-qp-cvv-eye[b-6edfspys99] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.packs-qp-cvv-eye:hover[b-6edfspys99] {
    color: #333;
}

/* Ensure the CVV wrapper in the modal has relative positioning for the eye */
.packs-qp-modal .stored-card-cvv-wrapper[b-6edfspys99] {
    position: relative;
}

/* Quick-pay CTA button should look like the normal CTA (remove default button chrome) */
button[data-quickpay-pack][b-6edfspys99] {
    cursor: pointer;
    border: none;
    text-align: center;
}

@media (max-width: 480px) {
    .packs-qp-modal[b-6edfspys99] {
        width: calc(100vw - 32px);
        max-width: none;
    }
}

/* ── Add-Card view inside quick-pay overlay ── */
.packs-qp-addcard[b-6edfspys99] {
    width: 406px;
}

.packs-qp-addcard .stored-card-header[b-6edfspys99] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.packs-qp-addcard .stored-card-title[b-6edfspys99] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #000;
    margin: 0;
}

.packs-qp-addcard .stored-card-close[b-6edfspys99] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.packs-qp-addcard-error[b-6edfspys99] {
    color: #DC2626;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding: 8px 12px;
    margin-top: 12px;
    background: #FEF2F2;
    border-radius: 6px;
}

.packs-qp-addcard-loading[b-6edfspys99] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 0 0;
    border-top: 1px solid #e5e7eb;
    margin-top: 16px;
}

.packs-qp-addcard-loading .processing-spinner[b-6edfspys99] {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #32E696;
    border-radius: 50%;
    animation: packs-qp-spin-b-6edfspys99 0.7s linear infinite;
}

.packs-qp-addcard-loading p[b-6edfspys99] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #434343;
    margin: 0;
}

@keyframes packs-qp-spin-b-6edfspys99 {
    to { transform: rotate(360deg); }
}

/* "+Agregar" pill button in contratar modal */
[b-6edfspys99] .stored-card-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid #000;
    border-radius: 24px;
    padding: 4px 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #000;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

[b-6edfspys99] .stored-card-add-btn:hover {
    background-color: #B7FBDC;
}

@media (max-width: 480px) {
    .packs-qp-addcard[b-6edfspys99] {
        width: calc(100vw - 32px);
        max-width: none;
    }
}
/* /Components/Pages/PaginaOficial/PaginaOficialPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   PaginaOficialPage – Scoped CSS
   Matches "Página oficial" Figma (Módulo 4)
   ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   Skeleton shimmer animation & elements
   ═══════════════════════════════════════════════════ */

@keyframes skeleton-shimmer-b-pwvku23g9u {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

.skeleton-shimmer[b-pwvku23g9u] {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer-b-pwvku23g9u 1.5s infinite ease-in-out;
    border-radius: 4px;
}

/* ── Back header skeleton ── */
.skel-back-icon[b-pwvku23g9u] {
    width: 36px;
    height: 36px;
    border-radius: 4px;
}

.skel-back-text[b-pwvku23g9u] {
    width: 140px;
    height: 20px;
}

/* ── Brand header skeleton ── */
.skel-header-box[b-pwvku23g9u] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    /* Igual que .box.header-box, para que el streaming no cambie el alto. */
    min-height: 140px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--color-border-container, #E5E7EB);
}

.skel-header-left[b-pwvku23g9u] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
    min-width: 280px;
}

.skel-logo[b-pwvku23g9u] {
    width: 180px;
    height: 88px;
    border-radius: 4px;
    flex-shrink: 0;
}

.skel-brand-info[b-pwvku23g9u] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.skel-line[b-pwvku23g9u] {
    height: 14px;
    border-radius: 4px;
}

.skel-line-name[b-pwvku23g9u]   { width: 55%; height: 18px; }
.skel-line-rubro[b-pwvku23g9u]  { width: 35%; }
.skel-line-contact[b-pwvku23g9u] { width: 45%; }

.skel-stars-row[b-pwvku23g9u] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.skel-star[b-pwvku23g9u] {
    width: 16px;
    height: 16px;
    border-radius: 2px;
}

.skel-line-rating[b-pwvku23g9u] {
    width: 50px;
    height: 16px;
    margin-left: 4px;
}

.skel-header-actions[b-pwvku23g9u] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.skel-action-icon[b-pwvku23g9u] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* ── Tab skeleton ── */
.skel-tab[b-pwvku23g9u] {
    pointer-events: none;
}

.skel-tab-radio[b-pwvku23g9u] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.skel-tab-text[b-pwvku23g9u] {
    width: 80px;
    height: 16px;
}

/* ── Carousel skeleton ── */
.skel-carousel[b-pwvku23g9u] {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 200px;
    border-radius: 8px;
}

/* ── Sidebar skeleton ── */
.skel-sidebar[b-pwvku23g9u] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--color-border-container, #E5E7EB);
}

.skel-sidebar-title[b-pwvku23g9u] {
    width: 60%;
    height: 20px;
}

.skel-promo-card[b-pwvku23g9u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skel-promo-img[b-pwvku23g9u] {
    width: 100%;
    height: 120px;
    border-radius: 6px;
}

.skel-promo-lines[b-pwvku23g9u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skel-promo-line-lg[b-pwvku23g9u] { width: 90%; }
.skel-promo-line-md[b-pwvku23g9u] { width: 60%; }
.skel-promo-line-sm[b-pwvku23g9u] { width: 40%; }

/* ── Bottom experiences skeleton ── */
.skel-exp-title[b-pwvku23g9u] {
    width: 220px;
    height: 24px;
    margin-bottom: 12px;
}

.skel-exp-row[b-pwvku23g9u] {
    display: flex;
    gap: 16px;
    overflow: hidden;
}

.skel-exp-card-wrap[b-pwvku23g9u] {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--color-border-container, #E5E7EB);
    background: #fff;
    height: 180px;
}

.skel-exp-avatar[b-pwvku23g9u] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skel-exp-lines[b-pwvku23g9u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skel-exp-lines .skel-line[b-pwvku23g9u] {
    height: 12px;
}

/* ── Responsive skeleton ── */
@media (max-width: 768px) {
    .skel-header-box[b-pwvku23g9u] {
        flex-direction: column;
    }

    .skel-header-left[b-pwvku23g9u] {
        min-width: 0;
        max-width: 100%;
    }

    .skel-logo[b-pwvku23g9u] {
        width: 120px;
        height: 64px;
    }

    .skel-header-actions[b-pwvku23g9u] {
        width: 100%;
        justify-content: space-evenly;
        padding-top: 12px;
        border-top: 1px solid var(--color-border-container, #E5E7EB);
    }

    .skel-exp-row[b-pwvku23g9u] {
        flex-direction: column;
    }
}

@media (max-width: 400px) {
    .skel-header-box[b-pwvku23g9u] {
        padding: 12px;
        gap: 12px;
    }

    .skel-header-left[b-pwvku23g9u] {
        gap: 12px;
    }

    .skel-logo[b-pwvku23g9u] {
        width: 88px;
        height: 56px;
    }
}

/* ── Content wrapper (vertical rhythm) ── */
[b-pwvku23g9u] .content {
    gap: 16px !important;
}

/* ── Back header ── */
.back-header[b-pwvku23g9u] {
    padding: 12px 0;
}

.back-link[b-pwvku23g9u] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

    .back-link i[b-pwvku23g9u] {
        font-size: 20px;
        display: flex;
        padding: 8px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 4px;
        border: 1px solid var(--color-base-black, #000);
    }

/* ── Divider (between brand header and tabs) ── */
.page-divider[b-pwvku23g9u] {
    width: 100%;
    height: 1px;
    border: none;
    background-color: var(--color-border-container, #E5E7EB);
    margin: 0;
}

/* ── Hidden radio inputs (CSS-only tab switching) ── */
.tab-radio[b-pwvku23g9u] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ── Two-column layout ── */
.page[b-pwvku23g9u] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.left-col[b-pwvku23g9u] {
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 256px); /* 240px sidebar + 16px gap */
}

.page-main-only .left-col[b-pwvku23g9u] {
    max-width: 100%;
}

/* Sin sidebar, el ancho extra sólo lo toma el carrusel desde 1024 (Figma 2875:273936 lo lleva a 864,
   y 2875:273872 a 920). En tablet portrait el diseño lo deja en su ancho y lo centra
   (2875:273917: 486 dentro de 720). Las pestañas sí ocupan todo el ancho en ambos casos.
   Importa porque el slide tiene proporción 9:16: cada píxel de ancho de más son 1,78 de alto. */
@media (max-width: 1023.98px) {
    .page-main-only .big-content[b-pwvku23g9u] {
        max-width: 486px;
        margin-inline: auto;
    }
}

/* El ancho de la galería de 1024 para arriba, medido en el marco de Figma que corresponde a
   cada tamaño. Es el "para que no quede tan gigante y larga" que Carolina pidió el 09/10, y
   que el 15/10 volvió a reportar sin ver arreglado: el primer intento consiguió las dos
   columnas pero las dejó un 30% más grandes que el diseño.

   Los números salen del contenedor de las dos imágenes, no de la columna de la página:

     Tablet Landscape (marco de 1024)  ->  608 = 296 x 2 + 16 de separación, alto 530
     Desktop          (marco de 1920)  ->  664 = 324 x 2 + 16 de separación, alto 578

   El 864 y el 920 que había acá antes no salían de ningún nodo de esta galería. El alto no se
   fija: sale de la proporción 9:16 del slide, que da 576 y 526 contra los 578 y 530 del
   diseño — dos y cuatro píxeles, que es el redondeo de los marcos.

   El tope va sobre el carrusel y no sobre .big-content, que lo comparte con la pestaña de
   Reseñas: capar ahí movería la grilla de SCRUM-134.

   Y no cuelga de page-main-only, que es el error que Carolina siguió viendo el 16/10. Esa
   clase marca «página sin bloque lateral», así que el tope se apagaba justo en las marcas con
   promociones al costado —medido en infomarcas.com a 1440: 808 de galería y 396 por imagen,
   contra los 664 y 324 del diseño—. El nodo que ella linkeó, 2743-229329, ES la variante con
   promociones y muestra las dos imágenes en 664: el tope vale en los dos casos.

   Con una sola imagen cargada tampoco hay que tocar nada: el modificador --una de
   SsrOfficialPageCarousel la deja en (100% - 16px) / 2, o sea los mismos 296 y 324 que
   tendría si hubiera dos. */
@media (min-width: 1024px) and (max-width: 1399.98px) {
    [b-pwvku23g9u] .official-carousel-wrapper {
        max-width: 608px;
        margin-inline: auto;
    }
}

@media (min-width: 1400px) {
    [b-pwvku23g9u] .official-carousel-wrapper {
        max-width: 664px;
        margin-inline: auto;
    }
}

.right-col[b-pwvku23g9u] {
    width: 240px;
    flex-shrink: 0;
    align-self: stretch;
}

/* ── Tabs Row (Box Radio Buttons – Figma) ── */
.tabs-row[b-pwvku23g9u] {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.tab-box[b-pwvku23g9u] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 72px;
    padding: 16px;
    /* El reboot de Bootstrap da margin-bottom:.5rem a todo <label>: inflaba la fila
       a 80px y provocaba un salto de 8px al reemplazar el skeleton (que usa <div>). */
    margin-bottom: 0;
    background: #fff;
    border: 1px solid var(--color-border-input, #7B7B7B);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s ease;
    user-select: none;
    box-sizing: border-box;
}

.tab-text[b-pwvku23g9u] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: #000;
}

/* ── Custom radio icon (circle) ── */
.tab-radio-icon[b-pwvku23g9u] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--color-border-input, #7B7B7B);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* ── Active tab via :checked sibling ── */
#tab-contenido:checked ~ .page .tabs-row .tab-box:first-child[b-pwvku23g9u],
#tab-resenas:checked ~ .page .tabs-row .tab-box:last-child[b-pwvku23g9u] {
    background: var(--color-brand-primary-300, #7FF6C1);
}

#tab-contenido:checked ~ .page .tabs-row .tab-box:first-child .tab-radio-icon[b-pwvku23g9u],
#tab-resenas:checked ~ .page .tabs-row .tab-box:last-child .tab-radio-icon[b-pwvku23g9u] {
    border-color: #000;
}

#tab-contenido:checked ~ .page .tabs-row .tab-box:first-child .tab-radio-icon[b-pwvku23g9u]::after,
#tab-resenas:checked ~ .page .tabs-row .tab-box:last-child .tab-radio-icon[b-pwvku23g9u]::after {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #000;
}

/* ── Disabled tab via :disabled sibling (SCRUM-126, Figma 2875:232227).
      Debe ir después de las reglas :checked: con misma especificidad, en el caso
      checked+disabled (marca sin datos) gana el estilo deshabilitado. ── */
#tab-contenido:disabled ~ .page .tabs-row .tab-box:first-child[b-pwvku23g9u],
#tab-resenas:disabled ~ .page .tabs-row .tab-box:last-child[b-pwvku23g9u] {
    background: #fff;
    border-color: var(--color-neutral-400, #9D9D9D);
    cursor: default;
    pointer-events: none;
}

#tab-contenido:disabled ~ .page .tabs-row .tab-box:first-child .tab-radio-icon[b-pwvku23g9u],
#tab-resenas:disabled ~ .page .tabs-row .tab-box:last-child .tab-radio-icon[b-pwvku23g9u] {
    border-color: var(--color-neutral-400, #9D9D9D);
}

#tab-contenido:disabled ~ .page .tabs-row .tab-box:first-child .tab-radio-icon[b-pwvku23g9u]::after,
#tab-resenas:disabled ~ .page .tabs-row .tab-box:last-child .tab-radio-icon[b-pwvku23g9u]::after {
    content: none;
}

#tab-contenido:disabled ~ .page .tabs-row .tab-box:first-child .tab-text[b-pwvku23g9u],
#tab-resenas:disabled ~ .page .tabs-row .tab-box:last-child .tab-text[b-pwvku23g9u] {
    color: var(--color-neutral-400, #9D9D9D);
}

/* ── Tab content switching ── */
.tab-panel-contenido[b-pwvku23g9u] {
    display: block;
}

.tab-panel-resenas[b-pwvku23g9u] {
    display: none;
}

#tab-resenas:checked ~ .page .tab-panel-contenido[b-pwvku23g9u] {
    display: none;
}

#tab-resenas:checked ~ .page .tab-panel-resenas[b-pwvku23g9u] {
    display: block;
}

.tab-panel-visible[b-pwvku23g9u] {
    display: block;
}

/* Hide bottom experiences section when Reseñas tab active */
#tab-resenas:checked ~ .experiences-bottom[b-pwvku23g9u] {
    display: none;
}

/* ── Estado vacío (SCRUM-126, Figma 5774:129759) ──
   El Alert viene entero del Design System: color, borde, radio, sombra, padding y
   tipografías son los de la spec. Lo único que queda acá es desarmar el margen inferior que
   Bootstrap le pone al propio .alert — está cargado globalmente en App.razor y el CSS
   aislado del componente no declara margen en ese elemento, así que no lo pisa.

   El margen del <p> interno ya lo resuelve el componente desde SCRUM-483, que llegó con
   main: ahí .alert-message declara margin: 0. Esa mitad vivía acá y se fue. Si alguna vez
   el componente declara también el suyo, esta regla entera sobra. */
.empty-state[b-pwvku23g9u]  .alert {
    margin-bottom: 0;
}

/* ── Content box ── */
.box[b-pwvku23g9u] {
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--color-border-container, #E5E7EB);
    min-height: 24px;
}

.big-content[b-pwvku23g9u] {
    width: 100%;
}

/* La caja del carrusel no lleva tarjeta: ni fondo blanco, ni borde, ni esquinas redondeadas.
   En el nodo 2743-229329 las dos imágenes y los puntitos apoyan directo sobre el fondo de la
   página, sin nada que las envuelva.

   Es lo que pidió Carolina el 16/10 —«hay que sacarle el fondo blanco a la caja»— y también
   lo que resuelve su «se ven como si fuesen 1 sola»: la separación entre las dos ya medía los
   16 del diseño, pero compartiendo una misma tarjeta blanca se leían como una tira. Sin
   tarjeta, cada imagen queda suelta.

   Los puntitos no necesitan regla propia: están dentro de esta caja, y al quedar transparente
   pasan a verse sobre el fondo de la página, que es donde los pone el nodo.

   Va sobre box-contentainer y no sobre «.tab-panel-contenido .box»: esa clase la llevan las
   dos cajas del carrusel, la real y la del esqueleto de carga, y solo ellas. Colgando de la
   pestaña, el esqueleto seguía blanco y la tarjeta desaparecía de golpe al terminar el
   streaming. Las otras cajas de la pantalla —la de marca inexistente y la cabecera del
   esqueleto— no la llevan y siguen con tarjeta; el panel de Reseñas no tiene caja ninguna,
   es la grilla directa.

   Le gana a .box sin pelear especificidad: valen lo mismo y esta va después. */
.box-contentainer[b-pwvku23g9u] {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    background: transparent;
    border: 0;
    border-radius: 0;
    /* Sin margin-bottom: el ritmo entre secciones lo da el gap:16px de ::deep .content.
       Sumaba 16px extra (48 en total donde el Figma pide 16). */
}

/* ── Experiences grid (Reseñas tab) ── */
.experiences-grid[b-pwvku23g9u] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
    /* Todas las filas del mismo alto, el de la card más alta. Es lo que antes daba el
       height: 360px clavado en la card, pero sin cortar a la que no entra: acá el alto lo
       fija el contenido y no un número (SCRUM-134). */
    grid-auto-rows: 1fr;
}

/* AC#8 (SCRUM-130): sin sidebar, la grilla de reseñas usa 4 columnas en desktop.
   Envuelto en media query: por especificidad (0,3,0) esta regla les ganaría a los
   breakpoints responsive de abajo (0,2,0) en todos los anchos si viviera suelta. */
/* Baja de 1025 a 1024 en el mismo movimiento: con el corte de arriba en 1023.98, dejarlo en 1025
   habria dejado el ancho 1024 sin ninguna banda que lo gobierne. */
@media (min-width: 1024px) {
    .page-main-only .experiences-grid[b-pwvku23g9u] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

[b-pwvku23g9u] .experience-grid-item {
    width: 100%;
    min-width: 0;
}

/* ── Paginador de reseñas (SCRUM-134) ────────────────────────────────────────
   Mismos valores que el paginador del DesignSystem (Molecules/Pagination.razor.css,
   nodo de Figma 3147:79067), con clases propias de esta pantalla.

   No se reusa aquel componente por dos motivos. Es interactivo —@onclick— y esta
   página es SSR sin interactividad Blazor, así que sus clicks no harían nada. Y sus
   clases (.page-nav, .page-number, .page-list) aparecen en 13 a 17 archivos del repo:
   sacarlas de su hoja aislada para compartirlas cambiaría la cascada de todas esas
   pantallas, que está fuera de este ticket. */
.reviews-pagination[b-pwvku23g9u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    padding: 16px 8px 8px;
    margin-top: 16px;
    border-top: 1px solid var(--color-border-container, #E5E7EB);
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
}

.reviews-pagination[hidden][b-pwvku23g9u] {
    display: none;
}

[b-pwvku23g9u] .reviews-page-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Anterior y siguiente: cuadrado de 40 con borde negro y caret de 24. El padding es 7
   y no 8 porque Figma dibuja el borde por dentro y CSS lo suma por fuera. */
[b-pwvku23g9u] .reviews-page-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    border: 1px solid var(--color-base-black, #000);
    border-radius: 4px;
    background: transparent;
    color: var(--color-base-black, #000);
    line-height: 0;
    cursor: pointer;
    transition: background .15s ease;
}

[b-pwvku23g9u] .reviews-page-nav i {
    font-size: 24px;
}

[b-pwvku23g9u] .reviews-page-nav:disabled {
    opacity: .45;
    cursor: default;
}

/* Números: 32x32 sin borde; el activo en el color de acento. */
[b-pwvku23g9u] .reviews-page-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-base-black, #000);
    background: transparent;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

[b-pwvku23g9u] .reviews-page-number.active {
    border-radius: 4px;
    background: var(--color-accent-500, #0A7287);
    color: var(--color-base-white, #FFF);
}

[b-pwvku23g9u] .reviews-page-number:not(.active):hover,
[b-pwvku23g9u] .reviews-page-nav:not(:disabled):hover {
    background: #F0FAF7;
}

[b-pwvku23g9u] .reviews-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-base-black, #000);
    user-select: none;
}

[b-pwvku23g9u] .reviews-page-nav:focus-visible,
[b-pwvku23g9u] .reviews-page-number:focus-visible {
    outline: 2px solid var(--color-accent-500, #0A7287);
    outline-offset: 2px;
}

@media (max-width: 575px) {
    .reviews-pagination[b-pwvku23g9u] {
        gap: 8px;
    }

    [b-pwvku23g9u] .reviews-page-list {
        gap: 4px;
    }
}

/* La card de reseña dentro de la grilla (SCRUM-134).
   El ajuste va acotado a esta pantalla y no al componente, que también dibuja la home y
   el bloque de "Experiencias recientes" de más abajo. El mock al que apunta Carolina es
   el de esta pantalla (nodo 2875-261445); de la home no tenemos uno que diga lo mismo. */
[b-pwvku23g9u] .experience-grid-item .experience-container {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    /* Llena la fila en vez de medir 360 fijos. Con el alto clavado y overflow: hidden, una
       reseña con muchos ítems se cortaba por abajo: el mock declara la card "Ajustado", o
       sea que crece con su contenido. Las filas quedan parejas igual, por grid-auto-rows:
       1fr más arriba, que es lo que daba el alto fijo sin el recorte. */
    height: 100%;
    /* El componente trae 8; el mock de esta pantalla pide 2. */
    border-radius: 2px;
}

/* ── Bottom experiences section ── */
.content-container[b-pwvku23g9u] {
    /* Sin margin-top: no colapsa con el gap flex del contenedor y duplicaba la
       separacion. El ritmo lo da ::deep .content { gap: 16px }. */
}

/* ── Placeholder ── */
.placeholder-wrapper[b-pwvku23g9u] {
    width: 100%;
    min-height: 200px;
}

.placeholder-img-icon-container[b-pwvku23g9u] {
    width: 60px;
    height: 60px;
}

.container-img[b-pwvku23g9u] {
    min-width: 100%;
    min-height: 100%;
    display: flex;
    background-color: #EFFEF7;
    justify-content: center;
    align-items: center;
}

/* ═══════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════ */

/* El corte va en 1023.98 y no en 1024 porque `max-width` es inclusivo y 1024 es un breakpoint
   diseñado (Figma "Tablet Landscape", 940:312428). Además el JS del carrusel ya corta en
   1023/1024 y trata 1024 como desktop: con el corte inclusivo, CSS y JS quedaban en
   desacuerdo sobre ese mismo pixel.

   Acá vivía además un angostamiento del bloque lateral a 220 para tablet vertical. No existe
   en el diseño: el marco Tablet Portrait lo tiene en 240, igual que Landscape y Desktop
   (2875-177244). La regla base ya da 240 y descuenta 256 de la columna izquierda, así que
   alcanzó con sacarlo. */
@media (max-width: 1023.98px) {
    .experiences-grid[b-pwvku23g9u] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .page[b-pwvku23g9u] {
        flex-direction: column;
    }

    .left-col[b-pwvku23g9u] {
        order: 1;
        width: 100%;
        max-width: 100%;
    }

    .right-col[b-pwvku23g9u] {
        order: 2;
        width: 100%;
    }

    .experiences-grid[b-pwvku23g9u] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    /* El switch no se achica en mobile: el Figma pide gap 16, padding 16 y texto 16px
       en los 4 breakpoints (las 32 instancias de Box Radio Buttons), y a 390px entran
       justo 2x171 + 16 = 358. El CSS base ya cumple, asi que no hay override aca. */
    .experiences-grid[b-pwvku23g9u] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Título de la vista en la fila de volver (SCRUM-126). El tamaño, la familia y el peso
   salen de las utilidades; acá van los dos valores que la spec de Figma fija y no tienen
   utilidad: line-height 1.2 y el color de texto. Nodo 940:312350, estilo
   "Title/Poppins/Semibold/20". */
.back-title[b-pwvku23g9u] {
    line-height: 1.2;
    color: #262626;
    /* 600 a mano y no con la utilidad .f-semibold, que en app.css:450 vale 500 — eso es
       Medium, no SemiBold. Corregir la utilidad repintaría toda la plataforma, así que
       queda anotado como deuda aparte y acá se usa el valor que pide la spec. */
    font-weight: 600;
}
/* /Components/Pages/PaginaOficial/Sections/SsrBrandHeaderBox.razor.rz.scp.css */
.box.header-box[b-of43qvlxaj] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    /* Figma 940:312434 dibuja el bloque a 140 sin padding y con el contenido a ras (logo en x=0,
       iconos cerrando en x=864). Estos 16px vienen de `.box`, la clase de panel de la pagina, y son
       la diferencia entre los 140 del diseno y los 172 que mide el bloque. Quitarlos solo aca
       desalinea el cabezal del resto de los paneles, asi que la decision es de diseno. */
    padding: 16px;
    min-height: 140px;
    box-sizing: border-box;
    max-width: 100%;
    overflow: visible;
}

/* Figma 0:4 dentro de 940:312434: 140x140 fijo, y es el elemento que fija el alto del bloque
   (140 de logo = 140 de bloque). El tope anterior de 88 venia del skeleton, no del diseno:
   se tomo cuando la instancia de Figma todavia no devolvia hijos que medir. */
.brand-logo[b-of43qvlxaj] {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    border-radius: 4px;
    object-fit: contain;
    border: 1px solid var(--color-border-container, #E5E7EB);
    background: #EFFEF7;
}

/* Un logo cuya URL no resuelve dejaba el recuadro de 140x140 con la imagen rota, y SCRUM-128
   pide que un dato que no esta no reserve espacio. La clase la agrega pagina-oficial-ssr.js
   cuando la carga falla: el marcado no puede saberlo, solo el navegador. */
.brand-logo.is-broken[b-of43qvlxaj] {
    display: none;
}

/* Figma 0:10: columna de 122px centrada en los 140 del logo. Adentro hay tres grupos
   —nombre+rubro, telefono+email, rating— separados por 8px; dentro de cada grupo las lineas
   van pegadas. Con un gap uniforme salian cuatro separaciones en vez de dos: 16px de mas. */
.brand-info[b-of43qvlxaj] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 200px;
}

.brand-info > .rubro-text + .contact-text[b-of43qvlxaj],
.brand-info > h2 + .contact-text[b-of43qvlxaj],
.brand-info > .rating-line[b-of43qvlxaj] {
    margin-top: 8px;
}

.brand-info h2[b-of43qvlxaj],
.brand-info p[b-of43qvlxaj] {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Alturas de linea de Figma 0:10, que son las que suman los 122 de la columna:
   nombre 22 + rubro 26 + 8 + telefono 17 + email 17 + 8 + rating 24. */
.brand-info h2[b-of43qvlxaj] {
    line-height: 22px;
}

.rubro-text[b-of43qvlxaj] {
    color: #555;
    font-weight: 400;
    line-height: 26px;
}

.contact-text[b-of43qvlxaj] {
    color: #262626;
    line-height: 17px;
}

.rating-line[b-of43qvlxaj] {
    line-height: 24px;
}

/* Figma 0:10 arranca en y=9 dentro de los 140 del logo: la columna de texto va centrada,
   no alineada arriba. El gap de 16 es el que separa el logo del texto (140 -> x=156). */
.header-left[b-of43qvlxaj] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 280px;
}

.header-actions[b-of43qvlxaj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.header-actions a[b-of43qvlxaj],
.header-actions span[b-of43qvlxaj],
.header-actions label[b-of43qvlxaj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    max-width: 80px;
    cursor: pointer;
    transition: color .15s ease;
    color: #262626;
    text-decoration: none;
    /* Bootstrap declara `label { margin-bottom: 5px; font-weight: bold }`. La fila mezcla
       <a> (WhatsApp, teléfono, sitio) con <label> (ubicación, horarios, compartir), así que
       solo la mitad de los iconos arrastraba ese margen: con align-items:center, el margen
       entra en la caja y corría esos tres respecto de los otros. Es el desalineado vertical
       que reportó Carolina el 2026-08-15 en SCRUM-126.
       Mismo origen que el alto de fila del switch anotado en
       docs/auditoria-pagina-oficial-figma.md, donde el reboot ya había mordido. */
    margin: 0;
    font-weight: normal;
}

.header-actions i[b-of43qvlxaj] {
    font-size: 24px;
    line-height: 1;
}

.header-actions a:hover[b-of43qvlxaj],
.header-actions span:hover[b-of43qvlxaj],
.header-actions label:hover[b-of43qvlxaj] {
    color: #0A7287;
}

.rating-line[b-of43qvlxaj] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 0;
    font-size: 16px;
}

.rating-line .rating-text[b-of43qvlxaj] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: #262626;
}

.rating-line .badges[b-of43qvlxaj] {
    display: inline-flex;
    gap: 4px;
    height: 24px;
    align-items: center;
}

.rating-line .badges i[b-of43qvlxaj] {
    font-size: 16px;
}

.rating-line .followers[b-of43qvlxaj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: #262626;
}

.rating-line .followers i[b-of43qvlxaj] {
    font-size: 16px;
}

/* ═══════════════════════════════════════════════════
   CSS-only pop-ups (ubicación · horarios · compartir)
   Hidden radios + <label> triggers + `:checked ~` reveal.
   ═══════════════════════════════════════════════════ */

.hb-toggle[b-of43qvlxaj] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.hb-backdrop[b-of43qvlxaj] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1000;
}

.hb-popup[b-of43qvlxaj] {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 1px solid var(--neutral-200, #e2e2e2);
    /* Figma: el Dialog mide 358 de ancho fijo, radio 8 y 24 de margen interior.
       Los tres pop-ups son instancias del mismo componente —dirección 358×206,
       compartir 358×224, horarios 358×177—, así que va en la clase compartida.
       Medido sobre el render: caja 356 px y 23 px de margen a cada lado. */
    border-radius: 8px;
    padding: 24px;
    width: min(358px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
}

/* Reveal backdrop + the matching pop-up when its radio is checked */
#hb-ubicacion:checked ~ .hb-backdrop[b-of43qvlxaj],
#hb-horarios:checked ~ .hb-backdrop[b-of43qvlxaj],
#hb-compartir:checked ~ .hb-backdrop[b-of43qvlxaj] {
    display: block;
}

#hb-ubicacion:checked ~ .hb-popup-ubicacion[b-of43qvlxaj],
#hb-horarios:checked ~ .hb-popup-horarios[b-of43qvlxaj],
#hb-compartir:checked ~ .hb-popup-compartir[b-of43qvlxaj] {
    display: block;
}

.hb-popup-head[b-of43qvlxaj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.hb-popup-title[b-of43qvlxaj] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #262626;
}

.hb-popup-close[b-of43qvlxaj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #7B7B7B;
    padding: 4px;
}

.hb-popup-close i[b-of43qvlxaj] {
    font-size: 20px;
    line-height: 1;
}

.hb-popup-close:hover[b-of43qvlxaj] {
    color: #262626;
}

/* ── Ubicación pop-up ── */
.hb-address[b-of43qvlxaj] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #262626;
    margin-bottom: 0;
}

/* Segunda línea: barrio y ciudad, en negrita (Figma 2880:98507). El espacio al
   botón vive en .hb-directions-btn para que quede igual haya o no localidad. */
.hb-address-locality[b-of43qvlxaj] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: #262626;
    margin-top: 4px;
    margin-bottom: 0;
}

/* Botón "Cómo llegar". Valores medidos sobre el render de Figma 2880:98507:
   fill #32E696, texto negro, ~3 px de curvatura, alto 40 y ancho 310 — que es
   358 menos los 24 de margen interior de cada lado, o sea todo el ancho.
   El botón que había antes tenía tres valores que no son los del diseño: el
   verde 300 (#7FF6C1) en vez del 400, texto #262626 en vez de negro y radio 8.

   Se toman los tokens del Design System en vez de la clase .btn-primary: esa
   clase está definida tres veces en la app —Bootstrap la pinta azul, app.css le
   impone height:48px, y recién design-system.css le pone el verde—, así que
   usarla acá arrastraba esa colisión y el botón salía de 48 px. */
.hb-directions-btn[b-of43qvlxaj] {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    /* El aire hasta la dirección vive acá para que sea el mismo haya o no localidad. */
    margin-top: 16px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--btn-radius, 4px);
    background: var(--btn-primary-bg, #32E696);
    color: var(--btn-primary-text, #000);
    font-family: var(--font-family-Poppins, Poppins);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease;
}

.hb-directions-btn:hover[b-of43qvlxaj] {
    background: var(--btn-primary-bg-hover, #28CC84);
}

.hb-directions-btn i[b-of43qvlxaj] {
    font-size: 18px;
}

/* ── Horarios pop-up ── */
.hb-hours-table[b-of43qvlxaj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hb-hours-row[b-of43qvlxaj] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.hb-hours-day[b-of43qvlxaj] {
    min-width: 150px;
    font-weight: 400;
    color: #262626;
}

.hb-hours-value[b-of43qvlxaj] {
    font-weight: 700;
    color: #262626;
}

/* ── Compartir pop-up ── */
.hb-share-link-box[b-of43qvlxaj] {
    display: flex;
    align-items: center;
    border: 1px solid var(--neutral-300, #d5d5d5);
    border-radius: 8px;
    padding: 8px 12px;
    background: #fff;
}

.hb-share-input[b-of43qvlxaj] {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
    color: #262626;
    background: transparent;
}

/* Figma 940:312341: el campo lleva el ícono de copiar adentro, a la derecha.
   Comparte el cableado de pagina-oficial-ssr.js con el botón de abajo: el script
   engancha todos los [data-copy-share] y marca cada uno con copyBound, así que
   tener dos no lo rompe ni lo duplica. */
.hb-share-inline-copy[b-of43qvlxaj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0 0 0 8px;
    color: #262626;
    cursor: pointer;
}

.hb-share-inline-copy i[b-of43qvlxaj] {
    font-size: 20px;
}

/* Medido sobre el render de Figma: los tres botones ocupan 44 px y van cada 64,
   o sea 20 de separación. Antes estaban en 52 con 16. */
.hb-share-actions[b-of43qvlxaj] {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 16px;
}

.hb-share-btn[b-of43qvlxaj] {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-base-black, #000);
    border-radius: 8px;
    background: #fff;
    color: #262626;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease;
}

.hb-share-btn:hover[b-of43qvlxaj] {
    background: var(--neutral-100, #f4f4f4);
}

.hb-share-btn i[b-of43qvlxaj] {
    font-size: 22px;
}

@media (max-width: 764px) {
    .box.header-box[b-of43qvlxaj] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-left[b-of43qvlxaj] {
        min-width: 0;
        flex-shrink: 1;
        max-width: 100%;
    }

    .brand-info[b-of43qvlxaj] {
        min-width: 0;
        flex-shrink: 1;
        overflow-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
    }

    /* Figma mantiene el logo en 140x140 tambien en mobile (940:312238 -> 0:4), con el texto
       angostado a 202. Ahi no entra mientras la caja tenga los 16px de padding de `.box`:
       140 + 16 de gap + 202 = 358, que es el ancho completo del contenedor. Se achica como
       concesion a ese padding, cuadrado para no deformar; sube a 140 cuando se resuelva. */
    .brand-logo[b-of43qvlxaj] {
        width: 120px;
        height: 120px;
    }

    .header-actions[b-of43qvlxaj] {
        order: 2;
        width: 100%;
        justify-content: space-evenly;
        /* Sin línea divisoria entre los íconos y el bloque de la marca: Carolina la
           pidió quitar el 2026-10-09. Se deja el aire que la acompañaba. */
        padding: .75rem .25rem .25rem;
        margin-top: .5rem;
        position: relative;
    }

    .rating-line[b-of43qvlxaj] {
        flex-wrap: wrap;
    }
}

@media (max-width: 400px) {
    .box.header-box[b-of43qvlxaj] {
        padding: 12px;
        gap: 12px;
    }

    .header-left[b-of43qvlxaj] {
        gap: 12px;
    }

    .brand-logo[b-of43qvlxaj] {
        width: 88px;
        height: 88px;
    }
}

/* ── Aviso de "link copiado" (Figma 5894-48197, SCRUM-128) ──
   Mismo lenguaje que el toast de Suscripción —borde de 1px en el verde de feedback positivo,
   fondo de superficie y radio 4— pero de una sola línea: 442 de ancho y 56 de alto. Lo enciende
   pagina-oficial-ssr.js sacándole el atributo hidden; en el HTML arranca con hidden puesto, así
   que si el JS no corre no se ve nada roto: simplemente no hay aviso, y el elemento tampoco
   queda colgado en el árbol de accesibilidad. */
.hb-copy-toast[b-of43qvlxaj] {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: grid;
    grid-template-columns: 4px 32px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    width: 442px;
    /* 100% y no 100vw: 100vw incluye la barra de scroll, y con ella el margen de 16 a cada
       lado quedaba en 8. Para un elemento fijo, 100% es el ancho visible sin la barra. */
    max-width: calc(100% - 32px);
    min-height: 56px;
    /* 7, no 8. El diseño deja 8 desde el borde visible, y border-box cuenta adentro el 1px del
       borde: 1 + 7 dan esos 8. De paso la fila interior queda en 56 − 2 − 14 = 40, que es justo
       lo que miden la barra de color y el botón de cerrar; con 8 quedaba en 38,4 y la barra se
       veía corta. Las medidas del nodo cierran la caja sin sobrar nada:
       4 + 8 + 32 + 8 + 326 + 8 + 40 = 426, más 8 a cada lado = 442. */
    padding: 7px;
    box-sizing: border-box;
    border: 1px solid var(--color-feedback-positive-700, #278B12);
    border-radius: 4px;
    background: var(--color-surface-app, #FAFAFA);
    /* Las dos capas, como PaymentToast. Con una sola el aviso se despegaba menos del fondo
       que los otros toasts de la aplicación, que es contra lo que se lo compara. */
    box-shadow: 0px 8px 8px -2px rgba(0, 0, 0, 0.04),
                0px 20px 20px -4px rgba(0, 0, 0, 0.08);
    animation: hb-copy-toast-in-b-of43qvlxaj 0.3s ease-out;
}

/* Entra deslizándose desde la derecha, igual que PaymentToast. No hace falta cuidarse de que
   el nombre choque con el de ese componente: Blazor le agrega el sufijo de aislamiento también
   a los @keyframes —en la página sale como hb-copy-toast-in-b-05lh9vm0q6—. El prefijo queda
   igual porque es lo que se lee en el inspector. */
@keyframes hb-copy-toast-in-b-of43qvlxaj {
    from {
        opacity: 0;
        transform: translateX(50%);
    }
    to {
        opacity: 1;
        transform: translateX(-50%);
    }
}

/* En pantallas angostas baja a 16, como todos los toasts de la aplicación. El max-width no se
   copia de PaymentToast —que usa 90vw— porque el de arriba ya descuenta la barra de scroll y
   no hace falta un segundo criterio para lo mismo. */
@media (max-width: 768px) {
    .hb-copy-toast[b-of43qvlxaj] {
        top: 16px;
    }
}

/* El atributo hidden es lo único que lo apaga, pero el display:none tiene que ser explícito: la
   regla de arriba declara display:grid y le ganaría al display:none que el navegador trae por
   omisión para [hidden]. */
.hb-copy-toast[hidden][b-of43qvlxaj] {
    display: none;
}

.hb-copy-toast-accent[b-of43qvlxaj] {
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    background: var(--color-feedback-positive-700, #278B12);
}

/* ── Variante de error (Figma 6061-43467) ────────────────────────────────────────────────
   El mismo componente con el rojo de feedback. La clase la pone pagina-oficial-ssr.js, igual
   que ya destapa el aviso. */
.hb-copy-toast.is-error[b-of43qvlxaj] {
    border-color: var(--color-feedback-negative-700, #A61919);
}

.hb-copy-toast.is-error .hb-copy-toast-accent[b-of43qvlxaj] {
    background: var(--color-feedback-negative-700, #A61919);
}

/* Un ícono por vez. El de error arranca apagado y la variante lo prende, apagando el otro. */
.hb-copy-toast .hb-copy-toast-icon--error[b-of43qvlxaj] {
    display: none;
}

.hb-copy-toast.is-error .hb-copy-toast-icon--ok[b-of43qvlxaj] {
    display: none;
}

.hb-copy-toast.is-error .hb-copy-toast-icon--error[b-of43qvlxaj] {
    display: block;
}

/* Los íconos son los de Phosphor en peso Fill, que es lo que usa el diseño: CheckCircle y
   XCircle. A 32px pintan un disco de 26, igual que el nodo; dibujados a mano nos salían de 24.
   La fuente ya la carga App.razor. */
.hb-copy-toast-icon[b-of43qvlxaj] {
    font-size: 32px;
    line-height: 1;
    display: block;
}

.hb-copy-toast-icon--ok[b-of43qvlxaj] {
    color: var(--color-feedback-positive-700, #278B12);
}

.hb-copy-toast-icon--error[b-of43qvlxaj] {
    color: var(--color-feedback-negative-700, #A61919);
}

.hb-copy-toast-text[b-of43qvlxaj] {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    /* El negro base, no el neutral 800: así lo definen las dos variantes del componente y así
       lo usa PaymentToast, que es el toast de la casa. */
    color: var(--color-base-black, #000000);
}

/* 40 de ancho y toda la fila de alto, que es el Icon Button del diseño. No es estético: es el
   área que hay que tocar para cerrar el aviso, y en celular 24 contra 40 se nota. */
.hb-copy-toast-close[b-of43qvlxaj] {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    width: 40px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 24px;
    line-height: 1;
    /* La equis va en el gris, no en negro: es al revés que el texto. A 24px el glifo de
       Phosphor pinta 15, que es lo que mide el del diseño dentro de su caja de 24. */
    color: var(--gray-color-neutral-800, #262626);
}

/* El nodo no define el hover —el cerrar es un Icon Button con una propiedad State y el diseño
   que mandó Carolina muestra solo Default—, así que se toma de PaymentToast, que es de donde
   ya salen la posición, la entrada y la duración del aviso. */
.hb-copy-toast-close:hover[b-of43qvlxaj] {
    background: var(--color-neutral-50, #F5F5F5);
}
/* /Components/Pages/PaginaOficial/Sections/SsrOfficialPageCarousel.razor.rz.scp.css */
/* Wrapper — no visual chrome: Figma 2743:229318 draws the slides straight onto the page
   background, with no card, shadow or rounded corners around them. */
.official-carousel-wrapper[b-tvag1kfzw5] {
    width: 100%;
}

/* Una sola imagen: del ancho de UNA columna del modo 2-up, y en la columna de la izquierda.
   Se expresa como fraccion y no en pixeles para que valga con barra lateral y sin ella —
   608 da 296, 664 da 324 — y va desde 1024, que es el mismo umbral a partir del cual el
   carrusel muestra dos por vista. Por debajo ya es 1-up y el ancho lo fija la pagina.

   Va a la izquierda y no centrada. Lo dice la descripcion del ticket —«si hay un numero
   impar de imagenes, en desktop y tablet landscape la ultima vista mostraria 1 imagen
   sola»— y lo muestra el mock que Carolina marco «como deberia verse» el 16/10: la lamina
   arranca en el mismo borde que la pestaña «Contenido». Una sola imagen ocupa el casillero
   de la izquierda, no el medio. El margin-inline: auto que la centraba se fue.

   El tope va sobre el .ds-carousel y no sobre el wrapper a proposito: el wrapper ya lleva
   un max-width desde PaginaOficialPage.razor.css (608 y 664, los del diseno) y dos
   max-width sobre el mismo elemento se resuelven por especificidad, que ahi la gana la
   regla de la pagina. Separados, el wrapper define la columna y esto la mitad. */
@media (min-width: 1024px) {
    .official-carousel-wrapper--una > .ds-carousel[b-tvag1kfzw5] {
        max-width: calc((100% - 16px) / 2);
    }
}

/* The slide is the box the design defines (296.67 x 530 in Figma = 9:16), and the image fills it.
   Without a ratio on the box, the flex line takes its height from the tallest image and
   `align-items: stretch` drags every other image to that height — a 800x400 photo rendered at
   296x592, four times off its own proportions. */
[b-tvag1kfzw5] .ds-carousel-track {
    align-items: flex-start;
}

[b-tvag1kfzw5] .ds-carousel-slide {
    aspect-ratio: 9 / 16;
}

/* Slide images: cover the box instead of being stretched to fit it. */
[b-tvag1kfzw5] .slide-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Figma puts the dots 16px below the slides (carousel ends at y=618, dots start at y=634).
   The shared viewport padding exists to keep card shadows from being clipped; there are no
   cards here, so it only adds 16px that the design does not have. */
[b-tvag1kfzw5] .ds-carousel-viewport {
    padding: 0;
}

[b-tvag1kfzw5] .ds-carousel-dots {
    padding: 16px 0 0;
}

[b-tvag1kfzw5] .slide-desktop {
    display: block;
}

[b-tvag1kfzw5] .slide-mobile {
    display: none;
}

/* Placeholder when no images */
.placeholder-wrapper[b-tvag1kfzw5] {
    width: 100%;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #EFFEF7;
    border-radius: 12px;
}

.placeholder-img-icon-container[b-tvag1kfzw5] {
    width: 60px;
    height: 60px;
    opacity: 0.5;
}

.container-img[b-tvag1kfzw5] {
    min-width: 100%;
    display: flex;
    background-color: #EFFEF7;
    justify-content: center;
    align-items: center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
    [b-tvag1kfzw5] .slide-desktop {
        display: none !important;
    }

    [b-tvag1kfzw5] .slide-mobile {
        display: block !important;
    }
}

@media (max-width: 768px) {
    .placeholder-wrapper[b-tvag1kfzw5] {
        min-height: 150px;
        border-radius: 8px;
    }

    .placeholder-img-icon-container[b-tvag1kfzw5] {
        width: 48px;
        height: 48px;
    }
}
/* /Components/Pages/PaginaOficial/Sections/SsrPromosSidebar.razor.rz.scp.css */
.promos-desktop[b-s29eqd662l] {
    gap: 12px;
}

.promos-mobile[b-s29eqd662l] {
    display: none;
}

/* Medidas del nodo del bloque, iguales en los tres marcos: Tablet Portrait (2875-177244, el
   que Carolina linkeó el 09/10), Tablet Landscape (2875-260698) y Desktop (2875-213253).
   240 de ancho, radio 4, padding 6 arriba y abajo por 4 a los lados, y 6 de separación.

   El radio venía de 16 por un error mío: el 29/09 reporté que el mock pedía 4, Carolina
   contestó que eran 16 y me retracté sin volver a mirar. Los tres marcos dicen 4.

   La sombra no se toca: no está en discusión y el nodo no la contradice. */
.psb[b-s29eqd662l] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-radius: 4px;
    border: 1px solid var(--Border-color-border-container, #E5E7EB);
    background: var(--Background-color-surface-app, #FAFAFA);
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.08);
    padding: 6px 4px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.psb__title[b-s29eqd662l] {
    padding: 0;
}

.promociones-top[b-s29eqd662l] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
    color: #000;
}

.psb__general[b-s29eqd662l] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 0;
}

.psb__sorteo[b-s29eqd662l] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 0;
}

.psb__item[b-s29eqd662l] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 0;
    border-bottom: none;
}

    .psb__item:last-of-type[b-s29eqd662l] {
        border-bottom: none;
    }

.psb__more[b-s29eqd662l] {
    display: flex;
    justify-content: center;
    padding: 4px 0 0 0;
}

/* "Ver más": el borde va del mismo verde que el texto, brand-primary-700 (#0E8752), y no del
   menta brand-primary-400 (#32E696) que tenía. Medido sobre el render del nodo que señaló
   Carolina (Figma 2875-177244): el muestreo da #2B9567, que es más oscuro que el menta —y
   mezclar con el blanco del fondo solo puede aclarar, nunca oscurecer—, mientras que #0E8752
   mezclado con blanco da (38,147,99), prácticamente ese valor. El menta quedaba casi invisible
   contra el fondo claro de la card (SCRUM-130). */
.ver-mas-link[b-s29eqd662l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border: 1px solid var(--color-brand-primary-700, #0E8752);
    border-radius: 999px;
    background: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-brand-primary-700, #0E8752);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease;
}

.ver-mas-link:hover[b-s29eqd662l] {
    background: var(--color-brand-primary-100, #DAFEED);
}

/* ── Cards compactas del sidebar (SCRUM-130 AC#7, Figma 2875:203792) ──
   Las cards canónicas ya son horizontales (imagen a la izquierda con
   flex-basis); aquí solo se fijan a la escala compacta del Figma
   (~104px de alto, miniatura 74px) porque sus media queries son de
   viewport y no conocen la columna de 240px. En mobile el sidebar va a
   ancho completo, así que rigen los estilos mobile nativos de cada card. */
@media (min-width: 768px) {
    [b-s29eqd662l] .visualizacion-container-espefico,
    [b-s29eqd662l] .sorteo-card-container,
    [b-s29eqd662l] .visualizacion-container {
        /* Alto mínimo del Figma; crece si la fila de precio o el banner
           necesitan envolver (mejor crecer que recortar contenido). */
        height: auto !important;
        min-height: 104px !important;
        border-radius: 10px !important;
    }

    [b-s29eqd662l] .container-img-especifica,
    [b-s29eqd662l] .sorteo-card-container .image-container,
    [b-s29eqd662l] .brand-img-container {
        flex: 0 0 74px !important;
    }

    /* La card de descuento de marca entra acá desde SCRUM-130, Carolina el 16/10 («lo sigo
       viendo mal en estilos»). Las otras dos ya estaban; esta se dibujaba entera y medía
       206x286 contra los 207x103 del nodo 2875-177244.

       Con Compact el componente arranca en su variante size=mobile —la que declara el nodo—,
       que a tamaño real es 288x155. Lo que queda es bajarla a la columna de 206: la miniatura
       cuadrada como en el nodo, y la tipografía a la misma escala que las otras dos.

       company-subtitle no se toca: la variante compacta ya la deja en 10, igual que acá. */
    [b-s29eqd662l] .visualizacion-container {
        padding: 8px !important;
        gap: 8px !important;
    }

    [b-s29eqd662l] .brand-img-container {
        width: 74px !important;
        height: 74px !important;
    }

    [b-s29eqd662l] .visualizacion-container .promo-top-accent {
        height: 4px !important;
    }

    [b-s29eqd662l] .visualizacion-container .company-name {
        font-size: 13px !important;
    }

    [b-s29eqd662l] .visualizacion-container .percentage-discount {
        font-size: 22px !important;
        line-height: 24px !important;
    }

    [b-s29eqd662l] .visualizacion-container .description {
        font-size: 10px !important;
    }

    [b-s29eqd662l] .container-text-especifico,
    [b-s29eqd662l] .sorteo-card-container .card-content {
        padding: 10px !important;
        gap: 6px !important;
    }

    [b-s29eqd662l] .text-group {
        gap: 4px !important;
    }

    [b-s29eqd662l] .brand-name {
        font-size: 13px !important;
    }

    [b-s29eqd662l] .promotion-title,
    [b-s29eqd662l] .sorteo-title {
        font-size: 11px !important;
    }

    [b-s29eqd662l] .sorteo-card-container .description,
    [b-s29eqd662l] .description-text {
        font-size: 10px !important;
    }

    [b-s29eqd662l] .logo-container,
    [b-s29eqd662l] .logo-surface {
        width: 32px !important;
        height: 32px !important;
        left: 8px !important;
    }

    [b-s29eqd662l] .sorteo-card-container .logo-img {
        width: 32px !important;
        height: 32px !important;
    }

    [b-s29eqd662l] .value-field {
        gap: 4px !important;
        flex-wrap: wrap !important;
    }

    [b-s29eqd662l] .price-text {
        font-size: 13px !important;
    }

    [b-s29eqd662l] .value-field span.plus-sign {
        font-size: 12px !important;
    }

    [b-s29eqd662l] .text-stars-container {
        width: auto !important;
        height: 22px !important;
        padding: 0 6px !important;
        gap: 3px !important;
        border-radius: 6px !important;
    }

    [b-s29eqd662l] .icon-container {
        font-size: 14px !important;
        width: 14px !important;
        height: 14px !important;
    }

    [b-s29eqd662l] .stars-value {
        font-size: 10px !important;
    }

    [b-s29eqd662l] .info-banner {
        min-height: 24px !important;
        height: auto !important;
        padding: 3px 5px !important;
        border-radius: 6px !important;
        gap: 3px !important;
        flex-wrap: wrap !important;
    }

    [b-s29eqd662l] .date-group {
        min-width: 0 !important;
    }

    [b-s29eqd662l] .sorteo-text {
        font-size: 11px !important;
    }

    [b-s29eqd662l] .date-text {
        font-size: 9px !important;
    }

    [b-s29eqd662l] .calendar-icon {
        width: 11px !important;
        height: 11px !important;
    }
}

@media (max-width: 767px) {
    .psb[b-s29eqd662l] {
        min-width: 0;
        border: none;
        box-shadow: none;
        background: transparent;
    }

    .psb__general[b-s29eqd662l] {
        justify-content: center;
    }

    [b-s29eqd662l] .promos-desktop {
        display: none !important;
    }

    [b-s29eqd662l] .promos-mobile {
        display: block !important;
    }

    .psb__item[b-s29eqd662l] {
        padding: 0px;
    }
}

/* ── Proporción de la miniatura en pantallas angostas (SCRUM-130) ──
   Debajo de 768px el bloque pasa a ancho completo y hasta ahora no tenía ningún ajuste
   propio: la miniatura conserva su ancho pero estira el alto con la card, que crece cuando
   el texto envuelve. Medido en la aplicación a 375px: una foto apaisada de proporción 1.5
   terminaba en un recuadro de 0.51, o sea una tira vertical con dos tercios de la imagen
   recortados. No se deforma —todas usan object-fit: cover— pero se ve rota, que es lo que
   reportó Carolina ("prestar especial atención al responsive y proporción de las cards").

   Se la deja cuadrada y anclada arriba: el recorte queda parejo y la card puede crecer sin
   arrastrarla. De 768 para arriba no se toca nada: ahí ya rige el bloque compacto de arriba,
   que da 74x104 y coincide con el mock. */
@media (max-width: 767.98px) {
    [b-s29eqd662l] .container-img-especifica,
    [b-s29eqd662l] .sorteo-card-container .image-container {
        aspect-ratio: 1 / 1;
        align-self: flex-start;
        overflow: hidden;
    }
}
/* /Components/Pages/PaginaOficial/Sections/SsrRecentExperiences.razor.rz.scp.css */
/* ── Header: titulo + CTA inline (Figma 2875:201215) ──
   La fila mide 36 en el diseño, altura que le da el botón; al reemplazar el Button del Design
   System por un <button> desnudo se perdió esa caja y la fila quedó en la altura del texto (~24).
   El margen inferior es 8 y no 16 porque el viewport del carrusel aporta otros 16: entre los dos
   dan los 24 que Figma pone entre la cabecera y las tarjetas. */
.exp-header[b-blxbeai6qo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 36px;
    margin-bottom: 8px;
}

/* Figma usa Poppins acá, no Nunito Sans: el Design System ya lo expone como --font-secondary.
   Título SemiBold 16 (no 18) y CTA Medium 14 (no Bold 16). */
.content-title[b-blxbeai6qo] {
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 0;
}

/* CTA inline (>=768): texto verde plano + chevron, sin subrayado, sin borde. */
.btn-see-all-inline[b-blxbeai6qo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    min-height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-brand-primary-700, #0E8752);
    padding: 0;
    white-space: nowrap;
}

.see-all-chevron[b-blxbeai6qo] {
    font-size: 20px;
    line-height: 1;
}

.content-container[b-blxbeai6qo] {
    width: 100%;
}

.cards-grid[b-blxbeai6qo] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1rem;
    row-gap: 1.5rem;
}

.cards-grid__item[b-blxbeai6qo] {
    width: 100%;
}

@media (max-width: 1024px) {
    .cards-grid[b-blxbeai6qo] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .cards-grid[b-blxbeai6qo] {
        grid-template-columns: 1fr;
    }
}

/* ── CTA pill "Ver todas las reseñas" (solo mobile, Figma 2875:173721) ──
   Oculto en >=768 (ahi manda el CTA inline del header). */
.see-all-reviews-container[b-blxbeai6qo] {
    display: none;
    justify-content: center;
    margin-top: 24px;
}

.btn-see-all-reviews[b-blxbeai6qo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 20px;
    background: transparent;
    border: 1px solid var(--color-brand-primary-700, #0E8752);
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    color: var(--color-brand-primary-700, #0E8752);
}

@media (max-width: 767px) {
    .btn-see-all-inline[b-blxbeai6qo] {
        display: none;
    }

    .see-all-reviews-container[b-blxbeai6qo] {
        display: flex;
    }
}

/* ── Tarjeta de experiencia en el contexto de la Página Oficial ──────────────
   RecentExperiencesCard es compartida con la Home, donde cada reseña es de una
   marca distinta y el logo y el nombre de la empresa sí identifican de quién se
   habla. Acá todas las reseñas son de la misma marca —la de la página—, por eso
   Figma (2875:202628) arranca la tarjeta directo en "Cliente:" y dedica ese
   espacio a filas de ítems. El ::deep queda acotado a este componente, así que
   la Home y la grilla de reseñas no se ven afectadas. */
[b-blxbeai6qo] .experience-container .img-container,
[b-blxbeai6qo] .experience-container [data-testid="company-name"] {
    display: none;
}

/* La tarjeta no tiene alto fijo en el diseño: crece con la cantidad de ítems de la reseña.
   Los 258.54 de Tablet Landscape corresponden a una reseña de ~6 ítems, mientras que la de
   Mobile con 11 ítems (2875:175324) mide 387. Por eso va como mínimo y no como alto: fijarlo
   recortaría reseñas largas contra el overflow:hidden de la tarjeta. Los 360 que tenía eran un
   número clavado que no sale de ningún nodo. */
[b-blxbeai6qo] .experience-container {
    height: auto;
    min-height: 258.54px;
    /* Llena el slide. El componente se topea en 288 porque la Home lo usa a ancho fijo; acá
       el ancho lo da el carrusel y con el tope la tarjeta quedaba angosta dentro de su
       hueco: a 1500 de ventana el slide mide 344,7 y la tarjeta 288, o sea 57px de aire a
       la derecha de cada una. Es lo que fotografió Carolina el 09/10 —"revisemos los
       estilos la sección de reseñas en la parte de contenido"— y de paso lo que hacía que
       los rótulos largos se cortaran con puntos suspensivos antes de tiempo. */
    width: 100%;
    max-width: none;
}

/* Geometría interior, medida en 2875:175324:
   fila de 24 con gap 4 (las filas abren en y = 0, 28, 56, 84...), y 20px entre la línea de
   cliente y la lista. La fila estaba en 21.6 porque su alto salía del texto (16px x 1.3) en vez
   de estar declarado, así que once ítems acumulaban ~26px de desfase. */
[b-blxbeai6qo] .experiencias-item {
    min-height: 24px;
}

[b-blxbeai6qo] .experience-container {
    gap: 20px;
}

/* Figma pone los puntos a 32 de las tarjetas (cierran en y=358.54, los dots abren en y=390.54).
   A diferencia del carrusel de contenido, acá el padding de 16 del viewport sí hace falta: estas
   tarjetas llevan sombra y el overflow:hidden se la recortaría. Por eso se baja el padding propio
   de los dots de 32 a 16, y no se toca el viewport. */
[b-blxbeai6qo] .ds-carousel-dots {
    padding: 16px 0 0;
}
/* /Components/Pages/Payment/CheckoutSsr.razor.rz.scp.css */
/* ================================================================
   CheckoutSsr — Scoped styles for the PCI Vault checkout page.
   Mobile-first responsive design, aligned with InfoMarcas design system.
   Tokens: Nunito Sans (body), Poppins (headings), --primary-green-*
   ================================================================ */

/* ── Page Layout ── */

.checkout-page[b-2x0ld98rli] {
    display: flex;
    justify-content: center;
    padding: 32px 16px 64px;
    min-height: 70vh;
    background: var(--color-surface-app, #FAFAFA);
}

.checkout-container[b-2x0ld98rli] {
    width: 100%;
    max-width: 480px;
}

/* ── Brand Header ── */

.checkout-brand-header[b-2x0ld98rli] {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

.checkout-logo-link[b-2x0ld98rli] {
    display: inline-block;
    text-decoration: none;
}

.checkout-logo[b-2x0ld98rli] {
    height: 32px;
    width: auto;
    opacity: 0.85;
    transition: opacity 0.2s;
}

.checkout-logo-link:hover .checkout-logo[b-2x0ld98rli] {
    opacity: 1;
}

/* ── Navigation Bar ── */

.checkout-nav[b-2x0ld98rli] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
}

.checkout-back-btn[b-2x0ld98rli] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--radius-md, 8px);
    background: var(--color-base-white, #FFFFFF);
    color: var(--color-neutral-700, #434343);
    text-decoration: none;
    border: 1px solid var(--color-neutral-100, #E9E9E9);
    transition: all 0.15s ease;
    font-size: 18px;
    margin-top: 2px;
}

.checkout-back-icon[b-2x0ld98rli] {
    width: 20px;
    height: 20px;
    display: block;
}

.checkout-back-btn:hover[b-2x0ld98rli] {
    background: var(--color-neutral-50, #F5F5F5);
    border-color: var(--color-neutral-200, #D9D9D9);
    color: var(--color-neutral-800, #262626);
    text-decoration: none;
}

.checkout-nav-text[b-2x0ld98rli] {
    flex: 1;
}

.checkout-title[b-2x0ld98rli] {
    font-family: var(--font-family-Poppins, 'Poppins'), sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--color-neutral-900, #111827);
    margin: 0 0 2px;
    line-height: 1.3;
}

.checkout-subtitle[b-2x0ld98rli] {
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
    font-size: 14px;
    color: var(--color-neutral-400, #9D9D9D);
    margin: 0;
    font-weight: 400;
}

/* ── Plan Summary Card ── */

.checkout-summary-card[b-2x0ld98rli] {
    background: var(--color-base-white, #FFFFFF);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--color-neutral-100, #E9E9E9);
    margin-bottom: 20px;
    overflow: hidden;
}

.summary-header[b-2x0ld98rli] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--primary-green-50, #F5FFFC);
    border-bottom: 1px solid var(--primary-green-100, #D6FFF1);
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-green-700, #007A52);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-body[b-2x0ld98rli] {
    padding: 16px 20px;
}

.summary-line[b-2x0ld98rli] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.summary-label[b-2x0ld98rli] {
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
    font-size: 14px;
    color: var(--color-neutral-500, #5F5F5F);
}

.summary-value[b-2x0ld98rli] {
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-neutral-800, #262626);
}

.summary-divider[b-2x0ld98rli] {
    height: 1px;
    background: var(--color-neutral-100, #E9E9E9);
    margin: 10px 0;
}

.summary-line--total .summary-label[b-2x0ld98rli] {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-neutral-800, #262626);
}

.summary-price[b-2x0ld98rli] {
    font-family: var(--font-family-Poppins, 'Poppins'), sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-green-600, #00A36D);
    line-height: 1;
}

.summary-currency[b-2x0ld98rli] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-neutral-400, #9D9D9D);
}

/* ── Form Card ── */

.checkout-form-card[b-2x0ld98rli] {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    border: 1px solid #e5e7eb;
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-section-header[b-2x0ld98rli] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section-icon[b-2x0ld98rli],
.form-section-lock[b-2x0ld98rli] {
    display: none;
}

.form-section-title[b-2x0ld98rli] {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: #000;
}

/* ── PCI Vault PCD Form overrides ── */
/* Overrides moved to /css/pcivault-form.css (global) to bypass Svelte scoped CSS */

/* ── Field Groups (legacy/test fallback) ── */

.checkout-fields[b-2x0ld98rli] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.field-group[b-2x0ld98rli] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label[b-2x0ld98rli] {
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-neutral-600, #555555);
    letter-spacing: 0.2px;
}

.field-input-wrapper[b-2x0ld98rli] {
    position: relative;
    display: flex;
    align-items: center;
}

.field-icon[b-2x0ld98rli] {
    position: absolute;
    left: 14px;
    font-size: 18px;
    color: var(--color-neutral-300, #C4C4C4);
    pointer-events: none;
    transition: color 0.2s;
    z-index: 1;
}

.field-input[b-2x0ld98rli] {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
    font-size: 15px;
    color: var(--color-neutral-800, #262626);
    background: var(--color-neutral-50, #F5F5F5);
    border: 1.5px solid var(--color-neutral-200, #D9D9D9);
    border-radius: var(--radius-md, 8px);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.field-input--with-icon[b-2x0ld98rli] {
    padding-left: 42px;
}

.field-input:focus[b-2x0ld98rli] {
    outline: none;
    border-color: var(--primary-green-400, #3FE0AB);
    box-shadow: 0 0 0 3px rgba(8, 204, 139, 0.12);
    background: var(--color-base-white, #FFFFFF);
}

.field-input:focus ~ .field-icon[b-2x0ld98rli],
.field-input-wrapper:focus-within .field-icon[b-2x0ld98rli] {
    color: var(--primary-green-500, #08CC8B);
}

.field-input[b-2x0ld98rli]::placeholder {
    color: var(--color-neutral-300, #C4C4C4);
    font-weight: 400;
}

.field-select[b-2x0ld98rli] {
    height: 48px;
    padding: 0 14px;
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
    font-size: 15px;
    color: var(--color-neutral-800, #262626);
    background: var(--color-neutral-50, #F5F5F5);
    border: 1.5px solid var(--color-neutral-200, #D9D9D9);
    border-radius: var(--radius-md, 8px);
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239D9D9D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
    flex: 1;
}

.field-select:focus[b-2x0ld98rli] {
    outline: none;
    border-color: var(--primary-green-400, #3FE0AB);
    box-shadow: 0 0 0 3px rgba(8, 204, 139, 0.12);
    background-color: var(--color-base-white, #FFFFFF);
}

.field-row[b-2x0ld98rli] {
    display: flex;
    gap: 14px;
}

.field-group--half[b-2x0ld98rli] {
    flex: 1;
}

.field-expiry-row[b-2x0ld98rli] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.field-expiry-separator[b-2x0ld98rli] {
    font-size: 18px;
    color: var(--color-neutral-300, #C4C4C4);
    font-weight: var(--font-weight-regular, 400);
    user-select: none;
}

/* ── Submit Button ── */

.checkout-submit-btn[b-2x0ld98rli] {
    width: 100%;
    background: #32E696;
    color: #000;
    border: none;
    border-radius: 4px;
    padding: 8px;
    min-width: 120px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.checkout-submit-btn:hover:not(:disabled)[b-2x0ld98rli] {
    opacity: 0.9;
}

.checkout-submit-btn:active:not(:disabled)[b-2x0ld98rli] {
    opacity: 0.85;
}

.checkout-submit-btn:disabled[b-2x0ld98rli] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Trust Footer ── */

.checkout-trust[b-2x0ld98rli] {
    margin-top: 24px;
    text-align: center;
}

.trust-badges[b-2x0ld98rli] {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 12px;
}

.trust-badge[b-2x0ld98rli] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-neutral-400, #9D9D9D);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.trust-badge .ph[b-2x0ld98rli] {
    font-size: 14px;
    color: var(--primary-green-500, #08CC8B);
}

.trust-text[b-2x0ld98rli] {
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
    font-size: 12px;
    color: var(--color-neutral-400, #9D9D9D);
    line-height: 1.5;
    margin: 0;
    max-width: 360px;
    margin-inline: auto;
}

.trust-text strong[b-2x0ld98rli] {
    color: var(--color-neutral-500, #5F5F5F);
}

/* ── Processing Spinner ── */

.checkout-processing[b-2x0ld98rli] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 40px 24px;
}

.processing-spinner[b-2x0ld98rli] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-neutral-100, #E9E9E9);
    border-top-color: var(--primary-green-500, #08CC8B);
    border-radius: 50%;
    animation: checkout-spin-b-2x0ld98rli 0.7s linear infinite;
}

.processing-text[b-2x0ld98rli] {
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-neutral-700, #434343);
    margin: 0;
}

.processing-hint[b-2x0ld98rli] {
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
    font-size: 13px;
    color: var(--color-neutral-400, #9D9D9D);
    margin: 0;
}

@keyframes checkout-spin-b-2x0ld98rli {
    to { transform: rotate(360deg); }
}

/* ── Result Panels ── */

.checkout-result[b-2x0ld98rli] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 40px 24px;
    text-align: center;
}

.result-icon[b-2x0ld98rli] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.result-icon--success[b-2x0ld98rli] {
    background: var(--primary-green-50, #F5FFFC);
    color: var(--primary-green-500, #08CC8B);
}

.result-icon--error[b-2x0ld98rli] {
    background: #FEF2F2;
    color: #EF4444;
}

.result-title[b-2x0ld98rli] {
    font-family: var(--font-family-Poppins, 'Poppins'), sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--color-neutral-800, #262626);
}

.result-text[b-2x0ld98rli] {
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
    font-size: 14px;
    color: var(--color-neutral-500, #5F5F5F);
    margin: 0;
}

.checkout-btn-retry[b-2x0ld98rli] {
    margin-top: 8px;
    padding: 10px 28px;
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
    font-size: 14px;
    font-weight: 600;
    background: var(--color-base-white, #FFFFFF);
    color: var(--color-neutral-700, #434343);
    border: 1.5px solid var(--color-neutral-200, #D9D9D9);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: all 0.15s;
}

.checkout-btn-retry:hover[b-2x0ld98rli] {
    background: var(--color-neutral-50, #F5F5F5);
    border-color: var(--color-neutral-300, #C4C4C4);
}

/* ── State Panels (Error / Login) ── */

.checkout-state-panel[b-2x0ld98rli] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px;
    gap: 16px;
    background: var(--color-base-white, #FFFFFF);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--color-neutral-100, #E9E9E9);
}

.checkout-state-icon[b-2x0ld98rli] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.checkout-state-icon--error[b-2x0ld98rli] {
    background: #FEF2F2;
    color: #EF4444;
}

.checkout-state-icon--info[b-2x0ld98rli] {
    background: var(--primary-green-50, #F5FFFC);
    color: var(--primary-green-500, #08CC8B);
}

.checkout-state-title[b-2x0ld98rli] {
    font-family: var(--font-family-Poppins, 'Poppins'), sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-neutral-900, #111827);
    margin: 0;
}

.checkout-state-text[b-2x0ld98rli] {
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
    font-size: 14px;
    color: var(--color-neutral-500, #5F5F5F);
    margin: 0;
    max-width: 300px;
    line-height: 1.5;
}

.checkout-btn-back[b-2x0ld98rli] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 10px 24px;
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-neutral-700, #434343);
    background: var(--color-base-white, #FFFFFF);
    border: 1.5px solid var(--color-neutral-200, #D9D9D9);
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    transition: all 0.15s;
}

.checkout-btn-back:hover[b-2x0ld98rli] {
    background: var(--color-neutral-50, #F5F5F5);
    border-color: var(--color-neutral-300, #C4C4C4);
    text-decoration: none;
    color: var(--color-neutral-800, #262626);
}

.checkout-btn-primary[b-2x0ld98rli] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    padding: 12px 36px;
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-base-white, #FFFFFF);
    background: linear-gradient(135deg, var(--primary-green-500, #08CC8B), var(--primary-green-400, #3FE0AB));
    border: none;
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    transition: transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 4px 14px rgba(8, 204, 139, 0.3);
}

.checkout-btn-primary:hover[b-2x0ld98rli] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(8, 204, 139, 0.35);
    text-decoration: none;
    color: var(--color-base-white, #FFFFFF);
}

/* ── Responsive ── */

/* ── Toast Notifications ── */

.checkout-toast-container[b-2x0ld98rli] {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 442px;
    padding: 0 16px;
    pointer-events: none;
}

/* Note: toast children are injected dynamically — use ::deep to pierce scoped CSS */
[b-2x0ld98rli] .checkout-toast {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #FAFAFA;
    border-radius: 4px;
    box-shadow: 0px 20px 20px -4px rgba(0, 0, 0, 0.08), 0px 8px 8px -2px rgba(0, 0, 0, 0.04);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-16px);
    animation: checkout-toast-in-b-2x0ld98rli 0.3s ease forwards;
}

[b-2x0ld98rli] .checkout-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

[b-2x0ld98rli] .checkout-toast--exiting {
    animation: checkout-toast-out-b-2x0ld98rli 0.25s ease forwards;
}

[b-2x0ld98rli] .checkout-toast--error {
    border: 1px solid #DC2626;
}

[b-2x0ld98rli] .checkout-toast--success {
    border: 1px solid #278B12;
}

[b-2x0ld98rli] .checkout-toast-accent {
    width: 4px;
    align-self: stretch;
    border-radius: 8px;
    flex-shrink: 0;
}

[b-2x0ld98rli] .checkout-toast--success .checkout-toast-accent {
    background: #278B12;
}

[b-2x0ld98rli] .checkout-toast--error .checkout-toast-accent {
    background: #DC2626;
}

[b-2x0ld98rli] .checkout-toast-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

[b-2x0ld98rli] .checkout-toast-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 8px;
}

[b-2x0ld98rli] .checkout-toast-title {
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin: 0;
    line-height: 1.2;
}

[b-2x0ld98rli] .checkout-toast-description {
    font-family: var(--font-family-Nunito-Sans, 'Nunito Sans'), sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #000;
    margin: 0;
    line-height: 20px;
}

[b-2x0ld98rli] .checkout-toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    line-height: 0;
    transition: opacity 0.15s;
}

[b-2x0ld98rli] .checkout-toast-close:hover {
    opacity: 0.7;
}

@keyframes checkout-toast-in-b-2x0ld98rli {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes checkout-toast-out-b-2x0ld98rli {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-16px);
    }
}

/* ── Submit Button Loading State ── */

[b-2x0ld98rli] .checkout-submit-btn--loading {
    background: var(--color-neutral-200, #D9D9D9) !important;
    color: var(--color-neutral-400, #9D9D9D) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

[b-2x0ld98rli] .checkout-btn-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid var(--color-neutral-300, #C4C4C4);
    border-top-color: var(--color-neutral-500, #5F5F5F);
    border-radius: 50%;
    animation: checkout-spin-b-2x0ld98rli 0.7s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@media (max-width: 576px) {
    .checkout-toast-container[b-2x0ld98rli] {
        top: 12px;
        max-width: 100%;
        padding: 0 12px;
    }
}

@media (max-width: 576px) {
    .checkout-page[b-2x0ld98rli] {
        padding: 16px 12px 32px;
    }

    .checkout-container[b-2x0ld98rli] {
        max-width: 100%;
    }

    .checkout-brand-header[b-2x0ld98rli] {
        margin-bottom: 20px;
    }

    .checkout-logo[b-2x0ld98rli] {
        height: 26px;
    }

    .checkout-nav[b-2x0ld98rli] {
        gap: 10px;
        margin-bottom: 16px;
    }

    .checkout-back-btn[b-2x0ld98rli] {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 16px;
    }

    .checkout-title[b-2x0ld98rli] {
        font-size: 18px;
    }

    .checkout-subtitle[b-2x0ld98rli] {
        font-size: 13px;
    }

    .checkout-summary-card .summary-body[b-2x0ld98rli] {
        padding: 12px 14px;
    }

    .checkout-summary-card .summary-header[b-2x0ld98rli] {
        padding: 12px 14px;
        font-size: 12px;
    }

    .summary-price[b-2x0ld98rli] {
        font-size: 18px;
    }

    .checkout-form-card[b-2x0ld98rli] {
        padding: 16px;
    }

    .form-section-title[b-2x0ld98rli] {
        font-size: 18px;
    }

    .field-row[b-2x0ld98rli] {
        flex-direction: column;
        gap: 18px;
    }

    .field-input[b-2x0ld98rli],
    .field-select[b-2x0ld98rli] {
        height: 44px;
        font-size: 14px;
    }

    .checkout-submit-btn[b-2x0ld98rli] {
        font-size: 14px;
    }

    .checkout-trust[b-2x0ld98rli] {
        margin-top: 16px;
    }

    .trust-badges[b-2x0ld98rli] {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    .trust-badge[b-2x0ld98rli] {
        font-size: 10px;
    }

    .trust-text[b-2x0ld98rli] {
        font-size: 11px;
        max-width: 100%;
    }

    .checkout-state-panel[b-2x0ld98rli] {
        padding: 32px 16px;
    }

    .checkout-state-icon[b-2x0ld98rli] {
        width: 56px;
        height: 56px;
        font-size: 28px;
    }

    .checkout-state-title[b-2x0ld98rli] {
        font-size: 18px;
    }

    .checkout-processing[b-2x0ld98rli] {
        padding: 32px 16px;
    }

    .checkout-result[b-2x0ld98rli] {
        padding: 32px 16px;
    }

    .result-icon[b-2x0ld98rli] {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .result-title[b-2x0ld98rli] {
        font-size: 16px;
    }
}

@media (max-width: 360px) {
    .checkout-page[b-2x0ld98rli] {
        padding: 12px 8px 24px;
    }

    .checkout-form-card[b-2x0ld98rli] {
        padding: 14px 10px 12px;
    }

    .checkout-title[b-2x0ld98rli] {
        font-size: 16px;
    }

    .summary-price[b-2x0ld98rli] {
        font-size: 16px;
    }

    .trust-badges[b-2x0ld98rli] {
        gap: 8px;
    }

    .trust-badge[b-2x0ld98rli] {
        font-size: 9px;
    }
}
/* /Components/Pages/Payment/MedioCobroSsr.razor.rz.scp.css */
.layout-page[b-xtl9urxtyt] {
    display: flex;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 16px;
    flex-direction: column;
    gap: 16px;
}

.subscription-section[b-xtl9urxtyt] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    align-self: stretch;
}

.section-title[b-xtl9urxtyt] {
    margin: 0 0 8px 0;
    color: #1a1a1a;
}

.section-description[b-xtl9urxtyt] {
    color: #666;
    font-size: 14px;
    margin: 0;
}

.loading-container[b-xtl9urxtyt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    color: #666;
    gap: 12px;
}

.spinner[b-xtl9urxtyt] {
    width: 32px;
    height: 32px;
    border: 3px solid #e0e0e0;
    border-top-color: var(--color-primary, #00C896);
    border-radius: 50%;
    animation: spin-b-xtl9urxtyt 1s linear infinite;
}

@keyframes spin-b-xtl9urxtyt {
    to { transform: rotate(360deg); }
}

/* ── Card list ── */
.cards-list[b-xtl9urxtyt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-item[b-xtl9urxtyt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    gap: 12px;
}

.card-item--default[b-xtl9urxtyt] {
    background: #f0faf6;
    border-color: var(--color-primary, #00C896);
    border-width: 2px;
}

.card-info[b-xtl9urxtyt] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.card-details[b-xtl9urxtyt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.card-brand-row[b-xtl9urxtyt] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-brand-name[b-xtl9urxtyt] {
    font-weight: 600;
    font-size: 15px;
    text-transform: capitalize;
}

.default-badge[b-xtl9urxtyt] {
    font-size: 10px;
    background: var(--color-primary, #00C896);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
    text-transform: uppercase;
}

.card-number[b-xtl9urxtyt] {
    font-size: 14px;
    color: #333;
    font-family: monospace;
}

.card-expiry[b-xtl9urxtyt], .card-holder[b-xtl9urxtyt] {
    font-size: 12px;
    color: #888;
}

.card-actions[b-xtl9urxtyt] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.card-action-btn[b-xtl9urxtyt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #e0e0e0;
    background: white;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.card-action-btn:hover[b-xtl9urxtyt] {
    background: #f5f5f5;
}

.card-action-btn--default[b-xtl9urxtyt] {
    color: #1a73e8;
    border-color: #1a73e8;
}

.card-action-btn--default:hover[b-xtl9urxtyt] {
    background: #e8f0fe;
}

.card-action-btn--delete[b-xtl9urxtyt] {
    color: #d93025;
    border-color: #d93025;
}

.card-action-btn--delete:hover[b-xtl9urxtyt] {
    background: #fce8e6;
}

.used-for-renewal[b-xtl9urxtyt] {
    font-size: 11px;
    color: #888;
    max-width: 120px;
    text-align: right;
}

.add-card-section[b-xtl9urxtyt] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Empty states ── */
.no-card-message[b-xtl9urxtyt],
.no-brand-message[b-xtl9urxtyt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
    background: #f5f5f5;
    border-radius: 8px;
    gap: 12px;
}

.message-icon[b-xtl9urxtyt] { font-size: 48px; }

.no-card-message p[b-xtl9urxtyt],
.no-brand-message p[b-xtl9urxtyt] {
    margin: 0;
    color: #666;
}

.message-hint[b-xtl9urxtyt] {
    font-size: 13px;
    color: #999;
}

/* ── Alerts ── */
.success-alert[b-xtl9urxtyt] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    border-radius: 8px;
    color: #3c763d;
    gap: 10px;
}

.error-alert[b-xtl9urxtyt] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    color: #721c24;
    gap: 10px;
}

.success-icon[b-xtl9urxtyt], .error-icon[b-xtl9urxtyt] { font-size: 18px; }

@media (max-width: 576px) {
    .layout-page[b-xtl9urxtyt] {
        padding: 12px;
        gap: 12px;
    }

    .subscription-section[b-xtl9urxtyt] {
        padding: 16px;
    }

    .card-item[b-xtl9urxtyt] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px;
    }

    .card-info[b-xtl9urxtyt] {
        width: 100%;
    }

    .card-actions[b-xtl9urxtyt] {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .used-for-renewal[b-xtl9urxtyt] {
        max-width: none;
        text-align: left;
    }

    .card-brand-name[b-xtl9urxtyt] {
        font-size: 14px;
    }

    .card-number[b-xtl9urxtyt] {
        font-size: 13px;
    }

    .no-card-message[b-xtl9urxtyt],
    .no-brand-message[b-xtl9urxtyt] {
        padding: 28px 16px;
    }

    .add-card-section[b-xtl9urxtyt] {
        width: 100%;
    }

    .add-card-section .btn[b-xtl9urxtyt] {
        width: 100%;
        text-align: center;
    }

    .success-alert[b-xtl9urxtyt],
    .error-alert[b-xtl9urxtyt] {
        padding: 10px 12px;
        font-size: 13px;
    }
}

@media (max-width: 360px) {
    .layout-page[b-xtl9urxtyt] {
        padding: 8px;
    }

    .subscription-section[b-xtl9urxtyt] {
        padding: 12px;
        border-radius: 8px;
    }

    .card-icon .ph-bold[b-xtl9urxtyt] {
        font-size: 24px !important;
    }

    .section-description[b-xtl9urxtyt] {
        font-size: 13px;
    }
}
/* /Components/Pages/Planes/PlanesLandingPage.razor.rz.scp.css */
/* =====================================================================
   PlanesLandingPage - Scoped SSR Styles
   Mobile-First Approach (min-width)
   Figma breakpoints: Mobile 390 / Tablet Portrait 768 / 
                      Tablet Landscape 1024 / Desktop 1400+
   ===================================================================== */

/* -- Unified page gradient wrapper -- */
.planes-gradient-wrapper[b-c1qk9dgl7w] {
    background: linear-gradient(180deg,
            #23C97F 0%,
            #32E696 320px,
            #B8F6DB 580px,
            #E9E9E9 760px,
            #E9E9E9 100%);
    overflow-x: clip;
}

/* ================================================================
   MOBILE SECTION (Base Styles) (< 768px)
   ================================================================ */

.hero-section[b-c1qk9dgl7w] {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 510px;
}

.hero-inner[b-c1qk9dgl7w] {
    display: block;
    position: relative;
    max-width: 100%;
    padding: 0;
    height: 100%;
    z-index: 1;
}

.hero-text-desktop[b-c1qk9dgl7w] {
    display: none;
}

.hero-text-mobile[b-c1qk9dgl7w] {
    display: contents;
}

.d-block[b-c1qk9dgl7w] {
    display: block;
}

.hero-text[b-c1qk9dgl7w] {
    position: absolute;
    top: 42px;
    left: 50%;
    transform: translateX(-50%);
    width: 295px;
    max-width: 295px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.hero-title[b-c1qk9dgl7w] {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: #0D1319;
    text-align: center;
    margin: 0;
    max-width: 295px;
}

.hero-subtitle[b-c1qk9dgl7w] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2;
    color: #0D1319;
    text-align: center;
    margin: 0;
    max-width: 295px;
}

.hero-mockup[b-c1qk9dgl7w] {
    position: absolute;
    top: 201px;
    left: 3.87%;
    right: 3.87%;
    width: 358px;
    margin: 0 auto;
    height: 276px;
    flex-shrink: 0;
}

.hero-deco[b-c1qk9dgl7w] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 269px;
    pointer-events: none;
}

.hero-mockup-img[b-c1qk9dgl7w] {
    position: absolute;
    top: 1px;
    left: 15.22%;
    width: 69.91%;
    height: 275px;
    object-fit: contain;
}

.video-cta-section[b-c1qk9dgl7w] {
    width: 100%;
    padding: 16px 0 0;
    position: relative;
}

.video-cta-inner[b-c1qk9dgl7w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    max-width: 358px;
    margin: 0 auto;
    padding: 0 16px;
    position: relative;
    z-index: 1;
}

.video-placeholder[b-c1qk9dgl7w] {
    flex-shrink: 0;
    width: 100%;
    max-width: 358px;
    height: 180px;
    background: var(--color-brand-primary-50, #EFFEF7);
    border: 1px solid var(--border-containers, #E5E7EB);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-placeholder video[b-c1qk9dgl7w] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-wrapper[b-c1qk9dgl7w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 358px;
    width: 100%;
    gap: 0;
    padding-top: 40px;
}

.cta-flags-row[b-c1qk9dgl7w] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.cta-flag-img[b-c1qk9dgl7w] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.cta-title[b-c1qk9dgl7w] {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #000;
    margin: 0 0 12px 0;
}

.cta-subtitle[b-c1qk9dgl7w] {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #000;
    margin: 0 0 32px 0;
}

.cta-button[b-c1qk9dgl7w] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #32E696;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    width: 100%;
    max-width: 100%;
    height: 40px;
    padding: 8px 24px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s, transform 0.15s;
}

.cta-button:hover[b-c1qk9dgl7w] {
    background-color: #28d489;
    color: #000;
    transform: translateY(-1px);
}

.bottom-gradient-section[b-c1qk9dgl7w] {
    width: 100%;
    height: 96px;
    background: linear-gradient(180deg,
            #E9E9E9 0%,
            #C8F2DF 38%,
            #7BE9BF 72%,
            #32E696 88%,
            #23C97F 100%);
}

.whatsapp-button[b-c1qk9dgl7w] {
    position: fixed;
    bottom: 70px;
    right: 20px;
    z-index: 1000;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.whatsapp-button img[b-c1qk9dgl7w] {
    width: 35px;
    height: 35px;
}

.whatsapp-button:hover[b-c1qk9dgl7w] {
    transform: scale(1.1);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}


/* ================================================================
   TABLET PORTRAIT (min-width: 768px)
   ================================================================ */
@media (min-width: 768px) {
    .hero-section[b-c1qk9dgl7w] {
        height: 232px;
    }

    .hero-inner[b-c1qk9dgl7w] {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        max-width: 589px;
        gap: 16px;
        padding: 0 16px;
        margin: 0 auto;
    }

    .hero-mockup[b-c1qk9dgl7w] {
        position: relative;
        width: 277px;
        height: 214px;
        top: auto;
        left: auto;
        right: auto;
        margin: 0;
    }

    .hero-deco[b-c1qk9dgl7w] {
        top: 0;
        left: 0;
        width: 100%;
        height: 207px;
    }

    .hero-mockup-img[b-c1qk9dgl7w] {
        top: 1px;
        left: 34px;
        width: 210px;
        height: 212px;
    }

    .hero-text[b-c1qk9dgl7w] {
        position: static;
        transform: none;
        align-items: center;
        text-align: center;
        max-width: 258px;
        gap: 4px;
        width: 258px;
    }

    .hero-text-desktop[b-c1qk9dgl7w] {
        display: contents;
    }

    .hero-text-mobile[b-c1qk9dgl7w] {
        display: none;
    }

    .hero-title[b-c1qk9dgl7w] {
        font-size: 20px;
        max-width: 258px;
    }

    .hero-subtitle[b-c1qk9dgl7w] {
        font-size: 16px;
        max-width: 227px;
    }

    .video-cta-section[b-c1qk9dgl7w] {
        padding: 40px 0 48px;
    }

    .video-cta-inner[b-c1qk9dgl7w] {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        max-width: 100%;
        padding: 0 16px;
    }

    .video-placeholder[b-c1qk9dgl7w] {
        max-width: 420px;
        height: 211px;
    }

    .cta-wrapper[b-c1qk9dgl7w] {
        max-width: 420px;
    }
}

/* ================================================================
   TABLET LANDSCAPE (min-width: 1024px)
   ================================================================ */
@media (min-width: 1024px) {
    .hero-section[b-c1qk9dgl7w] {
        height: 311px;
    }

    .hero-inner[b-c1qk9dgl7w] {
        max-width: 789px;
        gap: 12px;
        padding: 0 16px;
    }

    .hero-mockup[b-c1qk9dgl7w] {
        width: 371px;
        height: 287px;
    }

    .hero-deco[b-c1qk9dgl7w] {
        top: 16px;
        height: 277px;
    }

    .hero-mockup-img[b-c1qk9dgl7w] {
        top: 0;
        left: 46px;
        width: 281px;
        height: 284px;
    }

    .hero-text[b-c1qk9dgl7w] {
        align-items: center;
        text-align: center;
        max-width: 369px;
        gap: 8px;
        width: 368.55px;
    }

    .hero-title[b-c1qk9dgl7w] {
        font-size: 28px;
        text-align: center;
        margin: 0;
        max-width: 361px;
    }

    .hero-subtitle[b-c1qk9dgl7w] {
        font-size: 20px;
        text-align: center;
        margin: 0;
        max-width: 284px;
    }

    .video-cta-section[b-c1qk9dgl7w] {
        padding: 85px 0 60px;
    }

    .video-cta-inner[b-c1qk9dgl7w] {
        flex-direction: row;
        align-items: center;
        max-width: 970px;
        gap: 46px;
        padding: 0 24px;
    }

    .video-placeholder[b-c1qk9dgl7w] {
        width: 415px;
        height: 208px;
    }

    .cta-wrapper[b-c1qk9dgl7w] {
        align-items: flex-start;
        text-align: left;
        max-width: 357px;
        gap: 24px;
        padding-top: 0;
    }

    .cta-flags-row[b-c1qk9dgl7w] {
        justify-content: flex-start;
        gap: 7px;
        margin-bottom: 0;
    }

    .cta-flag-img[b-c1qk9dgl7w] {
        width: 23px;
        height: 23px;
    }

    .cta-title[b-c1qk9dgl7w] {
        font-size: 28px;
        line-height: 1.2;
        margin: 0;
    }

    .cta-subtitle[b-c1qk9dgl7w] {
        font-size: 20px;
        line-height: 1.2;
        margin: 0;
    }

    .cta-button[b-c1qk9dgl7w] {
        width: 100%;
        max-width: 357px;
        height: 34px;
        padding: 8px 24px;
        font-size: 14px;
        font-weight: 600;
    }

    .bottom-gradient-section[b-c1qk9dgl7w] {
        height: 121px;
    }
}

/* ================================================================
   DESKTOP (min-width: 1400px)
   ================================================================ */
@media (min-width: 1400px) {
    .hero-section[b-c1qk9dgl7w] {
        height: 580px;
    }

    .hero-inner[b-c1qk9dgl7w] {
        max-width: 1472px;
        gap: 24px;
        padding: 0 24px;
    }

    .hero-mockup[b-c1qk9dgl7w] {
        width: 605px;
        height: 470px;
    }

    .hero-deco[b-c1qk9dgl7w] {
        height: 453px;
    }

    .hero-mockup-img[b-c1qk9dgl7w] {
        left: 75px;
        width: 459px;
        height: 463px;
    }

    .hero-text[b-c1qk9dgl7w] {
        max-width: 688px;
        width: auto;
        gap: 25px;
        align-items: center;
        text-align: center;
    }

    .hero-title[b-c1qk9dgl7w] {
        font-size: 52px;
        max-width: 670px;
        text-align: center;
    }

    .hero-subtitle[b-c1qk9dgl7w] {
        font-size: 40px;
        max-width: 691px;
        text-align: center;
    }

    .video-cta-section[b-c1qk9dgl7w] {
        padding: 190px 0 80px;
    }

    .video-cta-inner[b-c1qk9dgl7w] {
        max-width: 1326px;
        gap: 160px;
    }

    .video-placeholder[b-c1qk9dgl7w] {
        width: 560px;
        max-width: 560px;
        height: 281px;
    }

    .cta-wrapper[b-c1qk9dgl7w] {
        max-width: 606px;
        gap: 32px;
    }

    .cta-flag-img[b-c1qk9dgl7w] {
        width: 24px;
        height: 24px;
    }

    .cta-title[b-c1qk9dgl7w] {
        font-size: 36px;
    }

    .cta-subtitle[b-c1qk9dgl7w] {
        font-size: 28px;
    }

    .cta-button[b-c1qk9dgl7w] {
        font-size: 20px;
        width: 404px;
        max-width: 404px;
        height: 56px;
    }

    .bottom-gradient-section[b-c1qk9dgl7w] {
        height: 180px;
    }
}
/* /Components/Pages/Planes/PlanesVerificacion.razor.rz.scp.css */
/* ============================================================
   PlanesVerificacion – Scoped responsive styles
   Phone verification gate from /planes landing page.
   ============================================================ */

/* ---- Page wrapper ---- */
.planes-verificacion-page[b-3p2zztyk0k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 1 0 0;
    min-height: 0;
    padding: 80px 24px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .planes-verificacion-page[b-3p2zztyk0k] {
        padding: 40px 16px;
    }
}

/* ---- Form card ---- */
.planes-verificacion-card[b-3p2zztyk0k] {
    width: 100%;
    max-width: 358px;
    box-sizing: border-box;
    padding-bottom: 32px;
}

/* ---- Title ---- */
.planes-verificacion-title[b-3p2zztyk0k] {
    font-family: var(--font-family-Poppins, "Poppins"), sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    color: #000;
}

/* ============================================================
   Phone verification step
   ============================================================ */

.phone-step-content[b-3p2zztyk0k] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.phone-step-group[b-3p2zztyk0k] {
    display: flex;
    flex-direction: column;
    gap: 56px;
    width: 100%;
}

.phone-step-fields[b-3p2zztyk0k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.phone-step-buttons[b-3p2zztyk0k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

/* ── Terms group ── */
.terms-group[b-3p2zztyk0k] {
    margin-bottom: 0;
}

.terms-checkbox-container[b-3p2zztyk0k] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border-radius: 4px;
}

.terms-checkbox-container[b-3p2zztyk0k]  .terms-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: #343330;
    margin: 3px;
}

.terms-label[b-3p2zztyk0k] {
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans", sans-serif);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: #000;
    cursor: pointer;
    margin: 0;
}

.terms-link[b-3p2zztyk0k] {
    color: var(--color-feedback-info-700, #1952A6);
    text-decoration: underline;
}

/* ── Section divider ── */
.section-divider[b-3p2zztyk0k] {
    width: 100%;
    height: 1px;
    background-color: var(--color-border-containers, #e5e7eb);
}

/* ── Verification code section ── */
.verification-section[b-3p2zztyk0k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.verification-section label[b-3p2zztyk0k] {
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans", sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: var(--color-neutral-800, #262626);
    text-align: center;
}

.verification-digits[b-3p2zztyk0k] {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.digit-input[b-3p2zztyk0k] {
    flex: 1 0 0;
    max-width: 56px;
    height: 40px;
    min-height: 40px;
    border: 1px solid var(--color-border-input, #7B7B7B);
    border-radius: 4px;
    background-color: #FFF;
    text-align: center;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans", sans-serif);
    font-size: 18px;
    line-height: 1;
    color: var(--color-neutral-800, #262626);
    padding: 8px;
    outline: none;
}

.digit-input:focus[b-3p2zztyk0k] {
    border-color: var(--color-primary, #0DAC66);
}

.digit-input.digit-error[b-3p2zztyk0k] {
    border-color: var(--color-feedback-negative-700, #A61919);
}

.verification-buttons[b-3p2zztyk0k] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

.otp-error-message[b-3p2zztyk0k] {
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans", sans-serif);
    font-size: 14px;
    color: var(--color-feedback-negative-700, #A61919);
    text-align: center;
    display: block;
    margin-top: 4px;
}
/* /Components/Pages/Search/BuscarSsr.razor.rz.scp.css */
/* ===== BuscarSsr – SSR Search Page Styles ===== */

.buscar-ssr-page[b-8mto5mfs7x] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Result text ── */
.result-text-container[b-8mto5mfs7x] {
    color: var(--gray-color-neutral-800, #262626);
    font-family: var(--font-primary, 'Nunito Sans', sans-serif);
    font-size: 16px;
    font-weight: var(--font-weight-regular, 400);
    line-height: 1.3;
    margin-bottom: 25px;
}

.promo-link[b-8mto5mfs7x]  .visualizacion-container-espefico {
    box-shadow: 0px 1px 4px 0px #00000040;
}

.promo-link[b-8mto5mfs7x]  .visualizacion-container {
    box-shadow: 0px 1px 4px 0px #00000040;
}

.promo-link[b-8mto5mfs7x]  .sorteo-card-container {
    box-shadow: 0px 1px 4px 0px #00000040;
}

.result-text-line[b-8mto5mfs7x] {
    margin: 0;
}

.result-text[b-8mto5mfs7x] {
    font-family: var(--font-primary, 'Nunito Sans', sans-serif);
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.3;
}

.no-results-message[b-8mto5mfs7x] {
    text-align: center;
    padding: 2rem 1rem;
}

    .no-results-message h3[b-8mto5mfs7x] {
        color: var(--gray-color-neutral-800);
        font-family: var(--font-secondary);
        font-weight: var(--font-weight-semibold);
    }

    .no-results-message p[b-8mto5mfs7x] {
        color: var(--color-neutral-600, #6b7280);
    }

/* ── Mobile-only divider (between result text and filters) ── */
.search-mobile-divider[b-8mto5mfs7x] {
    display: none;
    border: none;
    height: 1px;
    background-color: var(--gray-color-neutral-400, #9D9D9D);
    margin: 0;
    width: 100%;
}

/* ── Search Filter Row ── */
.search-filter-row[b-8mto5mfs7x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-filter-group[b-8mto5mfs7x] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 0;
}

.search-filter-label[b-8mto5mfs7x] {
    font-family: var(--font-primary, 'Nunito Sans', sans-serif);
    font-size: 16px;
    font-weight: var(--font-weight-regular, 400);
    color: var(--gray-color-neutral-800, #262626);
    line-height: 1.2;
    white-space: nowrap;
}

/* ── SSR Custom Dropdown ── */
.ssr-dropdown[b-8mto5mfs7x] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

/* Variante FILTRO del DS (tokens --filter-* en design-system.css) */
.ssr-dropdown__trigger[b-8mto5mfs7x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--filter-height, 44px);
    padding: 0 16px 0 24px;
    border: var(--filter-border-width, 2px) solid var(--filter-border, #0DAC66);
    border-radius: var(--filter-radius, 8px);
    background: var(--filter-bg, #fff);
    color: var(--filter-text, #000);
    font-family: var(--filter-font, 'Poppins', sans-serif);
    font-size: 16px;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
    gap: 8px;
    outline: none;
}

.ssr-dropdown__trigger:focus-visible[b-8mto5mfs7x] {
    box-shadow: 0 0 0 2px var(--filter-focus-ring, #0DAC66);
}

.ssr-dropdown__text[b-8mto5mfs7x] {
    overflow: visible;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    text-align: left;
}

.ssr-dropdown__chevron[b-8mto5mfs7x] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
    fill: currentColor;
}

.ssr-dropdown--open .ssr-dropdown__chevron[b-8mto5mfs7x] {
    transform: rotate(180deg);
}

.ssr-dropdown__menu[b-8mto5mfs7x] {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: var(--color-base-white, #fff);
    border: 1px solid var(--color-border-container, #E5E7EB);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 100;
    overflow: hidden;
}

.ssr-dropdown--open .ssr-dropdown__menu[b-8mto5mfs7x] {
    display: block;
}

.ssr-dropdown__option[b-8mto5mfs7x] {
    display: flex;
    align-items: center;
    padding: 10px 24px;
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 16px;
    font-weight: var(--font-weight-regular, 400);
    color: var(--gray-color-neutral-800, #262626);
    cursor: pointer;
    transition: background-color 0.15s ease;
    user-select: none;
}

.ssr-dropdown__option:hover[b-8mto5mfs7x] {
    background-color: var(--color-brand-primary-50, #effef7);
}

.ssr-dropdown__option--selected[b-8mto5mfs7x] {
    background-color: var(--color-brand-primary-600, #0DAC66);
    color: #fff;
    font-weight: var(--font-weight-semibold, 600);
}

.ssr-dropdown__option--selected:hover[b-8mto5mfs7x] {
    background-color: var(--color-brand-primary-600, #0DAC66);
    color: #fff;
}

/* ── Single-filter layout (Marcas / Sorteos – no sub-filter) ── */
.search-filter-row--single[b-8mto5mfs7x] {
    justify-content: flex-start;
    max-width: calc(50% - 8px);
}

.search-filter-row--single .search-filter-group[b-8mto5mfs7x] {
    flex: 1 1 0;
    max-width: none;
    gap: 8px;
}

@media (max-width: 768px) {
    .search-filter-row[b-8mto5mfs7x] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .search-filter-group[b-8mto5mfs7x] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }

    .ssr-dropdown[b-8mto5mfs7x] {
        flex: none;
        width: 100%;
    }

    .search-filter-row--single[b-8mto5mfs7x] {
        max-width: none;
    }

    .search-filter-row--single .search-filter-group[b-8mto5mfs7x] {
        max-width: none;
    }
}

/* ── Results wrapper ── */
.results-wrapper[b-8mto5mfs7x] {
    min-width: 0;
}

/* ── Brands Grid ── */
.marcas-grid[b-8mto5mfs7x] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 577px) {
    .marcas-grid[b-8mto5mfs7x] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Brand Card ── */
.brand-card[b-8mto5mfs7x] {
    display: block;
    background: var(--color-base-white, #fff);
    color: var(--gray-color-neutral-800, #262626);
    border: 1px solid var(--color-border-container, #E5E7EB);
    border-radius: 8px;
    padding: 20px 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: box-shadow .2s ease, transform .2s ease;
    text-decoration: none;
    min-width: 0;
    overflow: hidden;
}

    .brand-card:hover[b-8mto5mfs7x] {
        box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
        transform: translateY(-1px);
        text-decoration: none;
        color: var(--gray-color-neutral-800, #262626);
    }

.card-header[b-8mto5mfs7x] {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
}

.brand-logo[b-8mto5mfs7x] {
    width: 80px;
    min-width: 80px;
    height: 80px;
    border-radius: 4px;
    border: 1px solid var(--color-border-container, #E5E7EB);
    overflow: hidden;
    flex-shrink: 0;
    background: transparent;
}

    .brand-logo img[b-8mto5mfs7x] {
        width: 80px;
        height: 80px;
        object-fit: contain;
    }

.brand-logo-fallback[b-8mto5mfs7x] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--color-brand-primary-50, #effef7);
    border: 1px solid var(--color-border-container, #E5E7EB);
    color: var(--color-brand-primary, #0DAC66);
    font-family: var(--font-secondary, 'Poppins', sans-serif);
    font-size: 2rem;
    font-weight: 700;
    user-select: none;
}

.brand-head[b-8mto5mfs7x] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .brand-head p[b-8mto5mfs7x] {
        margin: 0;
    }

.brand-name[b-8mto5mfs7x] {
    color: var(--gray-color-neutral-800, #262626);
    font-family: var(--font-primary, 'Nunito Sans', sans-serif);
    font-size: 18px;
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.2;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-sub[b-8mto5mfs7x] {
    color: var(--gray-color-neutral-800, #262626);
    font-family: var(--font-primary, 'Nunito Sans', sans-serif);
    font-size: 16px;
    font-weight: var(--font-weight-regular, 400);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none;
}

.brand-body[b-8mto5mfs7x] {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rating-row[b-8mto5mfs7x] {
    display: flex;
    align-items: center;
    gap: 4px 8px;
    flex-wrap: wrap;
}

.rating-row[b-8mto5mfs7x]  .stars {
    flex-shrink: 0;
}

.rating-value[b-8mto5mfs7x] {
    font-family: var(--font-primary, 'Nunito Sans', sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.review-count[b-8mto5mfs7x] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-primary, 'Nunito Sans', sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.person-ico[b-8mto5mfs7x] {
    font-size: 16px;
}

.phones-row[b-8mto5mfs7x] {
    display: flex;
    align-items: flex-start;
    gap: 64px;
    width: 100%;
}

.phone[b-8mto5mfs7x] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

    .phone img[b-8mto5mfs7x] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

.phone-number[b-8mto5mfs7x] {
    color: var(--gray-color-neutral-800, #262626);
    font-family: var(--font-primary, 'Nunito Sans', sans-serif);
    font-size: 16px;
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.addr[b-8mto5mfs7x] {
    margin: 0;
    font-family: var(--font-primary, 'Nunito Sans', sans-serif);
    font-size: 16px;
    line-height: 1.2;
    color: var(--gray-color-neutral-800, #262626);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* ── Card bottom group (address2 + status/badge row) ── */
.card-bottom-group[b-8mto5mfs7x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.card-bottom-row[b-8mto5mfs7x] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
}

.status-container[b-8mto5mfs7x] {
    display: flex;
    align-items: center;
    gap: 0 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}

.benefit-badge[b-8mto5mfs7x] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.benefit-star[b-8mto5mfs7x] {
    width: 24px;
    height: 24px;
}

.benefit-value[b-8mto5mfs7x] {
    font-family: var(--font-primary, 'Nunito Sans', sans-serif);
    font-size: 18px;
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.2;
    color: var(--gray-color-neutral-800, #262626);
}

.go-chip[b-8mto5mfs7x] {
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
}

    .go-chip img[b-8mto5mfs7x] {
        width: 32px;
        height: 32px;
    }

/* ── Promotions/Sorteos Grid ── */
.promotions-grid[b-8mto5mfs7x] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    width: auto;
    padding: 4px;
    margin: -4px;
}

@media (max-width: 576px) {
    .promotions-grid[b-8mto5mfs7x] {
        grid-template-columns: 1fr;
    }
}

.promo-link[b-8mto5mfs7x] {
    text-decoration: none;
    color: inherit;
    display: block;
    min-width: 0;
    /* SCRUM-568: la card elige su variante de Figma por el ancho de esta celda. */
    container: promo-card / inline-size;
}

    .promo-link:hover[b-8mto5mfs7x] {
        text-decoration: none;
        color: inherit;
    }

/* ── No results panel ── */
.no-results[b-8mto5mfs7x] {
    padding: 20px;
    text-align: center;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
}

/* ── Pagination ── */
.pagination-nav[b-8mto5mfs7x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 8px 8px;
    border-top: 1px solid var(--color-border-container, #E5E7EB);
    margin-top: 16px;
    flex-wrap: wrap;
}

.pagination-numbers[b-8mto5mfs7x] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Page number links (no border) */
.pagination-btn[b-8mto5mfs7x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #000;
    font-family: var(--font-primary, 'Nunito Sans', sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}

    .pagination-btn:hover[b-8mto5mfs7x] {
        background: rgba(10, 114, 135, 0.1);
        text-decoration: none;
        color: #000;
    }

    .pagination-btn.active[b-8mto5mfs7x] {
        background: var(--color-accent-500, #0A7287);
        border: none;
        color: #fff;
        border-radius: 4px;
        font-weight: 700;
        cursor: default;
    }

    .pagination-btn.active:hover[b-8mto5mfs7x] {
        background: var(--color-accent-500, #0A7287);
    }

/* Nav arrow buttons (prev/next) */
.pagination-btn--nav[b-8mto5mfs7x] {
    min-width: auto;
    padding: 8px;
    border: 1px solid #000;
    border-radius: 4px;
    background: transparent;
    color: #000;
}

    .pagination-btn--nav:hover[b-8mto5mfs7x] {
        background: rgba(0, 0, 0, 0.05);
        color: #000;
    }

    .pagination-btn--nav .material-symbols-outlined[b-8mto5mfs7x] {
        font-size: 24px;
    }

.pagination-ellipsis[b-8mto5mfs7x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    user-select: none;
}

/* ── Mobile-specific overrides (≤576px) ── */
@media (max-width: 768px) {
    .result-text-container[b-8mto5mfs7x] {
        margin-bottom: 0;
    }

    .search-mobile-divider[b-8mto5mfs7x] {
        display: block;
        margin: 17px 0;
    }

    .phones-row[b-8mto5mfs7x] {
        gap: 16px;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .pagination-btn[b-8mto5mfs7x] {
        min-width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .pagination-btn--nav[b-8mto5mfs7x] {
        padding: 6px;
    }

        .pagination-btn--nav .material-symbols-outlined[b-8mto5mfs7x] {
            font-size: 20px;
        }

    .pagination-nav[b-8mto5mfs7x] {
        gap: 8px;
    }

    .pagination-numbers[b-8mto5mfs7x] {
        gap: 4px;
    }
}
/* /Components/Pages/Subscriptions/SubscriptionSsr.razor.rz.scp.css */
.layout-page[b-qady53x82o] {
    display: flex;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 16px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.go-back[b-qady53x82o] {
    display: flex;
    align-items: center;
    align-content: center;
    gap: 16px;
    align-self: stretch;
    flex-wrap: wrap;
}

.mobile-back[b-qady53x82o] {
    display: flex;
}

.desktop-back[b-qady53x82o] {
    display: none;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.accordion-container[b-qady53x82o] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--2, 8px);
    align-self: stretch;
    border-radius: 8px;
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.08);
}

.container-content[b-qady53x82o] {
    display: flex;
    width: 100%;
    max-width: 480px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--8, 32px);
    align-self: stretch;
}

.subscription-cta[b-qady53x82o] {
    width: 100%;
}

.compact-upgrade-btn[b-qady53x82o] {
    width: 100%;
    margin: 0;
}

@media (min-width: 768px) {
    .mobile-back[b-qady53x82o] {
        display: none;
    }

    .desktop-back[b-qady53x82o] {
        display: flex;
    }
}

.resumen-container[b-qady53x82o] {
    display: flex;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--8, 32px);
    align-self: stretch;
}

.resumen-content[b-qady53x82o] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--2, 8px);
    align-self: stretch;
}

.table-row[b-qady53x82o] {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
}

.resumen-left[b-qady53x82o] {
    display: flex;
    height: 52px;
    min-width: 104px;
    padding: var(--spacing-4, 16px) var(--2, 8px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--1, 4px);
    flex: 1 0 0;
    border-bottom: 1px solid var(--color-neutral-400, #9D9D9D);
}

.resumen-right[b-qady53x82o] {
    display: flex;
    width: 104px;
    height: 52px;
    min-width: 104px;
    padding: var(--spacing-4, 16px) var(--1, 4px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: var(--1, 4px);
    border-bottom: 1px solid var(--color-neutral-400, #9D9D9D);
}

.resumen-left.total[b-qady53x82o], .resumen-right.total[b-qady53x82o] {
    border-bottom: none;
}

.partner-container[b-qady53x82o] {
    display: flex;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--4, 16px);
    align-self: stretch;
}

.partner-item[b-qady53x82o] {
    display: flex;
    width: 100%;
    max-width: 480px;
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid var(--Border-Containers, #E5E7EB);
    background: var(--color-base-white, #FFF);
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.08);
}

.partner-header[b-qady53x82o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.partner-details[b-qady53x82o] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    align-self: stretch;
}

.detail-row[b-qady53x82o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.total-row[b-qady53x82o] {
    margin-top: 8px;
    padding-top: 8px;
}

.nombre-partner[b-qady53x82o] {
    color: var(--gray-color-neutral-800, #262626);
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 18px;
    font-style: normal;
    font-weight: var(--font-weight-bold, 700);
    line-height: 130%;
}

.date-partner[b-qady53x82o] {
    color: var(--gray-color-neutral-800, #262626);
    text-align: right;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 18px;
    font-style: normal;
    font-weight: var(--font-weight-bold, 700);
    line-height: 130%;
}

.text-marcas[b-qady53x82o] {
    color: var(--gray-color-neutral-800, #262626);
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 16px;
    font-style: normal;
    font-weight: var(--font-weight-regular, 400);
    line-height: 130%;
}

.value-marcas[b-qady53x82o] {
    color: var(--gray-color-neutral-800, #262626);
    text-align: right;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 16px;
    font-style: normal;
    font-weight: var(--font-weight-regular, 700);
    line-height: 130%;
}

.total-partner[b-qady53x82o] {
    color: var(--color-base-black, #000);
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 16px;
    font-style: normal;
    font-weight: var(--font-weight-bold, 700);
    line-height: 130%;
}

.value-total-partner[b-qady53x82o] {
    color: var(--color-base-black, #000);
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 16px;
    font-style: normal;
    font-weight: var(--font-weight-bold, 700);
    line-height: 130%;
    text-align: right;
}

.medio-container[b-qady53x82o] {
    margin-top: 10px;
    display: flex;
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--2, 8px);
    align-self: stretch;
}

.medio-title[b-qady53x82o] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 0;
    align-self: stretch;
    overflow: hidden;
    color: var(--gray-color-neutral-800, #262626);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 18px;
    font-style: normal;
    font-weight: var(--font-weight-bold, 700);
    line-height: 130%;
}

.medio-row[b-qady53x82o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.medio-button[b-qady53x82o] {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: 1px solid #000;
    border-radius: 4px;
}

.medio-buttom-typo[b-qady53x82o] {
    color: var(--color-base-black, #000);
    text-align: center;
    font-family: var(--font-family-Poppins, Poppins);
    font-size: 16px;
    font-style: normal;
    font-weight: var(--font-weight-medium, 500);
    line-height: 24px;
}

.tarjeta-container[b-qady53x82o] {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 0 0;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    border-radius: 8px;
    border: 1px solid var(--Border-inputs, #7B7B7B);
    background: var(--color-brand-primary-300, #7FF6C1);
}

h3[b-qady53x82o], h4[b-qady53x82o] {
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

hr[b-qady53x82o] {
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Subscription Status Card */
.subscription-status-card[b-qady53x82o] {
    display: flex;
    width: 100%;
    max-width: 480px;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-brand-primary-300, #7FF6C1) 0%, var(--color-brand-primary-400, #4EE8A0) 100%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.subscription-status-card.no-subscription[b-qady53x82o] {
    background: var(--gray-color-neutral-100, #F5F5F5);
    border: 1px dashed var(--gray-color-neutral-400, #9D9D9D);
    text-align: center;
}

.subscription-status-card.no-subscription .status-content[b-qady53x82o] {
    align-items: center;
    width: 100%;
}

.status-header[b-qady53x82o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.status-header h4[b-qady53x82o] {
    margin: 0;
    color: var(--gray-color-neutral-800, #262626);
}

.status-badge[b-qady53x82o] {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.status-active[b-qady53x82o] {
    background: var(--color-success-100, #D1FAE5);
    color: var(--color-success-700, #047857);
}

.status-badge.status-canceled[b-qady53x82o] {
    background: var(--color-error-100, #FEE2E2);
    color: var(--color-error-700, #B91C1C);
}

.status-badge.status-past-due[b-qady53x82o] {
    background: var(--color-warning-100, #FEF3C7);
    color: var(--color-warning-700, #B45309);
}

.status-badge.status-trialing[b-qady53x82o] {
    background: var(--color-info-100, #DBEAFE);
    color: var(--color-info-700, #1D4ED8);
}

.status-content[b-qady53x82o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.plan-info[b-qady53x82o] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}

.plan-name[b-qady53x82o] {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-color-neutral-800, #262626);
}

.plan-amount[b-qady53x82o] {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-color-neutral-700, #404040);
}

.period-info[b-qady53x82o] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
}

.period-label[b-qady53x82o] {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-color-neutral-600, #525252);
}

.period-dates[b-qady53x82o] {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-color-neutral-800, #262626);
}

.days-remaining[b-qady53x82o] {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-color-neutral-800, #262626);
}

.days-remaining .text-warning[b-qady53x82o] {
    color: var(--color-warning-600, #D97706);
}

.days-remaining .text-danger[b-qady53x82o] {
    color: var(--color-error-600, #DC2626);
}

.cancel-notice[b-qady53x82o] {
    font-size: 13px;
    padding: 8px 12px;
    background: rgba(251, 191, 36, 0.2);
    border-radius: 6px;
    color: var(--color-warning-700, #B45309);
}

/* Payment Method Card */
.payment-method-card[b-qady53x82o] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.card-icon[b-qady53x82o] {
    font-size: 24px;
}

.card-details[b-qady53x82o] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-brand[b-qady53x82o] {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-color-neutral-800, #262626);
}

.card-expiry[b-qady53x82o] {
    font-size: 12px;
    color: var(--gray-color-neutral-600, #525252);
}

.text-warning[b-qady53x82o] {
    color: var(--color-warning-600, #D97706) !important;
}

.text-danger[b-qady53x82o] {
    color: var(--color-error-600, #DC2626) !important;
}

/* Pending Payments Section */
.pending-payments-section[b-qady53x82o] {
    display: flex;
    width: 100%;
    max-width: 480px;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border: 1px solid var(--color-warning-300, #FCD34D);
}

.pending-payments-section h4[b-qady53x82o] {
    margin: 0;
    color: var(--color-warning-800, #92400E);
}

.pending-description[b-qady53x82o] {
    font-size: 14px;
    color: var(--color-warning-700, #B45309);
    margin: 0;
}

.pending-payment-card[b-qady53x82o] {
    display: flex;
    width: 100%;
    padding: 12px;
    flex-direction: column;
    gap: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--color-warning-200, #FDE68A);
}

.pending-payment-card.expired[b-qady53x82o] {
    opacity: 0.6;
    background: rgba(255, 255, 255, 0.5);
}

.pending-header[b-qady53x82o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pending-amount[b-qady53x82o] {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-color-neutral-800, #262626);
}

.pending-status[b-qady53x82o] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.pending-status.status-pending[b-qady53x82o] {
    background: var(--color-warning-100, #FEF3C7);
    color: var(--color-warning-700, #B45309);
}

.pending-status.status-completed[b-qady53x82o] {
    background: var(--color-success-100, #D1FAE5);
    color: var(--color-success-700, #047857);
}

.pending-status.status-expired[b-qady53x82o] {
    background: var(--color-error-100, #FEE2E2);
    color: var(--color-error-700, #B91C1C);
}

.pending-details[b-qady53x82o] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pending-date[b-qady53x82o], .pending-expiry[b-qady53x82o] {
    font-size: 12px;
    color: var(--gray-color-neutral-600, #525252);
}

.complete-payment-btn[b-qady53x82o] {
    margin-top: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}

/* Payment Method Modal - not used in SSR, kept for reference */
.modal-overlay[b-qady53x82o] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-container[b-qady53x82o] {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Payment Success Message */
.payment-success-message[b-qady53x82o] {
    display: flex;
    width: 100%;
    max-width: 480px;
    padding: 16px;
    align-items: flex-start;
    gap: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    border: 1px solid var(--color-success-300, #6EE7B7);
}

.success-icon[b-qady53x82o] {
    display: flex;
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: var(--color-success-500, #10B981);
    color: white;
    font-size: 18px;
    font-weight: bold;
    flex-shrink: 0;
}

.success-content[b-qady53x82o] {
    flex: 1;
}

.success-content strong[b-qady53x82o] {
    display: block;
    color: var(--color-success-800, #065F46);
    font-size: 16px;
    margin-bottom: 4px;
}

.success-content p[b-qady53x82o] {
    margin: 0;
    font-size: 14px;
    color: var(--color-success-700, #047857);
}

/* Account Type Card */
.account-type-card[b-qady53x82o] {
    display: flex;
    width: 100%;
    max-width: 480px;
    padding: 24px;
    flex-direction: column;
    gap: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.account-type-card.free[b-qady53x82o] {
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    border: 2px solid #D1D5DB;
}

.account-type-card.premium[b-qady53x82o] {
    background: linear-gradient(135deg, #7FF6C1 0%, #4EE8A0 100%);
    border: 2px solid #10B981;
}

.account-type-header[b-qady53x82o] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.account-type-icon[b-qady53x82o] {
    display: flex;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    font-size: 24px;
}

.account-type-card.free .account-type-icon[b-qady53x82o] {
    background: #E5E7EB;
}

.account-type-card.premium .account-type-icon[b-qady53x82o] {
    background: rgba(255, 255, 255, 0.5);
}

.account-type-info h3[b-qady53x82o] {
    margin: 0 0 4px 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-color-neutral-800, #262626);
}

.account-description[b-qady53x82o] {
    margin: 0;
    font-size: 14px;
    color: var(--gray-color-neutral-600, #525252);
}

.account-features[b-qady53x82o] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature-item[b-qady53x82o] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feature-icon[b-qady53x82o] {
    display: flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.feature-icon.check[b-qady53x82o] {
    background: var(--color-success-100, #D1FAE5);
    color: var(--color-success-700, #047857);
}

.feature-icon.x[b-qady53x82o] {
    background: var(--color-error-100, #FEE2E2);
    color: var(--color-error-700, #B91C1C);
}

.feature-icon.limit[b-qady53x82o] {
    background: var(--color-warning-100, #FEF3C7);
    color: var(--color-warning-700, #B45309);
}

.feature-text[b-qady53x82o] {
    font-size: 14px;
    color: var(--gray-color-neutral-700, #404040);
}

.upgrade-btn[b-qady53x82o] {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    background: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.upgrade-btn:hover[b-qady53x82o] {
    background: #333;
}

/* Subscription Details Card */
.subscription-details-card[b-qady53x82o] {
    display: flex;
    width: 100%;
    max-width: 480px;
    padding: 20px;
    flex-direction: column;
    gap: 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--Border-Containers, #E5E7EB);
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.08);
}

.subscription-header[b-qady53x82o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.subscription-header h4[b-qady53x82o] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.subscription-info[b-qady53x82o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-row[b-qady53x82o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #F3F4F6;
}

.info-row:last-child[b-qady53x82o] {
    border-bottom: none;
}

.info-label[b-qady53x82o] {
    font-size: 14px;
    color: var(--gray-color-neutral-600, #525252);
}

.info-value[b-qady53x82o] {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-color-neutral-800, #262626);
}

/* Pending Payments Card */
.pending-payments-card[b-qady53x82o] {
    display: flex;
    width: 100%;
    max-width: 480px;
    padding: 16px;
    flex-direction: column;
    gap: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border: 1px solid var(--color-warning-300, #FCD34D);
}

.pending-payments-card h4[b-qady53x82o] {
    margin: 0;
    color: var(--color-warning-800, #92400E);
}

.pending-payment-item[b-qady53x82o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    gap: 12px;
}

.pending-info[b-qady53x82o] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pending-amount[b-qady53x82o] {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-color-neutral-800, #262626);
}

.pending-date[b-qady53x82o] {
    font-size: 12px;
    color: var(--gray-color-neutral-600, #525252);
}

/* Brands Section */
.brands-section[b-qady53x82o] {
    display: flex;
    width: 100%;
    max-width: 480px;
    flex-direction: column;
    gap: 12px;
}

.brands-section h4[b-qady53x82o] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-color-neutral-800, #262626);
}

.brand-item[b-qady53x82o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--Border-Containers, #E5E7EB);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.brand-info[b-qady53x82o] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-name[b-qady53x82o] {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-color-neutral-800, #262626);
}

.brand-stats[b-qady53x82o] {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--gray-color-neutral-600, #525252);
}

.no-brands-message[b-qady53x82o] {
    padding: 24px;
    text-align: center;
    background: #F9FAFB;
    border-radius: 8px;
    border: 1px dashed #D1D5DB;
}

.no-brands-message p[b-qady53x82o] {
    margin: 0;
    color: var(--gray-color-neutral-600, #525252);
}

/* SSR Pagination */
.ruleta-pagination[b-qady53x82o] {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.page-number[b-qady53x82o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-color-neutral-800, #262626);
    border: 1px solid var(--Border-Containers, #E5E7EB);
    background: #fff;
}

.page-number.active[b-qady53x82o] {
    background: var(--color-primary, #0A7287);
    color: #fff;
    border-color: var(--color-primary, #0A7287);
    pointer-events: none;
}

.page-nav[b-qady53x82o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 18px;
    color: var(--gray-color-neutral-600, #525252);
    border: 1px solid var(--Border-Containers, #E5E7EB);
    background: #fff;
}

.page-nav:hover[b-qady53x82o], .page-number:hover[b-qady53x82o] {
    background: var(--gray-color-neutral-100, #F5F5F5);
}

/* ── Mobile Responsiveness ── */

@media (max-width: 576px) {
    .layout-page[b-qady53x82o] {
        padding: 12px;
        gap: 12px;
    }

    .container-content[b-qady53x82o] {
        gap: 20px;
    }

    .subscription-details-card[b-qady53x82o] {
        padding: 16px;
    }

    .subscription-header[b-qady53x82o] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .subscription-header h4[b-qady53x82o] {
        font-size: 16px;
    }

    .info-row[b-qady53x82o] {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 10px 0;
    }

    .info-label[b-qady53x82o] {
        font-size: 12px;
    }

    .info-value[b-qady53x82o] {
        font-size: 14px;
    }

    .brand-item[b-qady53x82o] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px;
    }

    .brand-info[b-qady53x82o] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .brand-name[b-qady53x82o] {
        font-size: 14px;
    }

    .brand-stats[b-qady53x82o] {
        gap: 12px;
        font-size: 12px;
    }

    .partner-item[b-qady53x82o] {
        padding: 10px 12px;
    }

    .nombre-partner[b-qady53x82o],
    .date-partner[b-qady53x82o] {
        font-size: 14px;
    }

    .text-marcas[b-qady53x82o],
    .value-marcas[b-qady53x82o] {
        font-size: 13px;
    }

    .total-partner[b-qady53x82o],
    .value-total-partner[b-qady53x82o] {
        font-size: 14px;
    }

    .partner-header[b-qady53x82o] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .medio-container[b-qady53x82o] {
        margin-top: 8px;
    }

    .medio-row[b-qady53x82o] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .medio-title[b-qady53x82o] {
        font-size: 16px;
    }

    .medio-buttom-typo[b-qady53x82o] {
        font-size: 14px;
    }

    .tarjeta-container[b-qady53x82o] {
        padding: 12px;
    }

    .card-brand[b-qady53x82o] {
        font-size: 14px;
    }

    .pending-payment-item[b-qady53x82o] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .pending-payment-item .btn[b-qady53x82o] {
        width: 100%;
        text-align: center;
    }

    .no-brands-message[b-qady53x82o] {
        padding: 16px;
    }

    .ruleta-pagination[b-qady53x82o] {
        flex-wrap: wrap;
    }

    .page-number[b-qady53x82o],
    .page-nav[b-qady53x82o] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .account-type-card[b-qady53x82o] {
        padding: 16px;
        gap: 16px;
    }

    .account-type-header[b-qady53x82o] {
        gap: 12px;
    }

    .account-type-icon[b-qady53x82o] {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .account-type-info h3[b-qady53x82o] {
        font-size: 18px;
    }

    .subscription-status-card[b-qady53x82o] {
        padding: 12px;
    }

    .plan-info[b-qady53x82o] {
        flex-direction: column;
        gap: 4px;
    }

    .plan-name[b-qady53x82o] {
        font-size: 16px;
    }

    .plan-amount[b-qady53x82o] {
        font-size: 14px;
    }

    .cancel-notice[b-qady53x82o] {
        font-size: 12px;
    }

    h3[b-qady53x82o], h4[b-qady53x82o] {
        font-size: 16px;
    }
}
}