/*
==================================================================
 MERKATO PLAY V3
 Sistema visual completamente nuevo
==================================================================
*/


:root{

    --mp3-bg:#f2f4fa;
    --mp3-bg-2:#e9edf6;

    --mp3-surface:#fbfbfe;
    --mp3-surface-2:#eff2f8;
    --mp3-surface-3:#e7ebf4;

    --mp3-ink:#161b2a;
    --mp3-text:#353d50;
    --mp3-muted:#778095;

    --mp3-border:#d7ddea;

    --mp3-dark:#11131a;
    --mp3-dark-2:#181b26;

    --mp3-lime:#b9f227;
    --mp3-lime-hover:#c9ff3c;

    --mp3-violet:#7c5cff;
    --mp3-lavender:#ebe6ff;

    --mp3-radius:18px;

    --mp3-shadow:
        0 16px 38px rgba(28,34,54,.09);

    --mp3-shadow-soft:
        0 8px 22px rgba(28,34,54,.06);
}


/* ==============================================================
   RESET
============================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}


html{
    min-height:100%;
    background:var(--mp3-bg);
}


body.mp3-body{

    margin:0;

    min-height:100vh;

    font-family:
        Manrope,
        ui-sans-serif,
        system-ui,
        sans-serif;

    color:var(--mp3-ink);

    background:

        radial-gradient(
            circle at 8% 0%,
            rgba(124,92,255,.09),
            transparent 28%
        ),

        radial-gradient(
            circle at 92% 2%,
            rgba(185,242,39,.055),
            transparent 25%
        ),

        linear-gradient(
            180deg,
            #f7f8fc,
            var(--mp3-bg) 48%,
            #edf0f7
        );
}


[x-cloak]{
    display:none!important;
}


img{
    max-width:100%;
}


a{
    color:inherit;
}


button,
input,
select,
textarea{
    font:inherit;
}


.mp3-page{
    min-height:100vh;
}


.mp3-skip{

    position:fixed;

    left:16px;
    top:-80px;

    z-index:999;

    padding:10px 14px;

    border-radius:10px;

    color:#fff;

    background:var(--mp3-dark);
}


.mp3-skip:focus{
    top:16px;
}


/* Shared alias while pages are rebuilt */

.mp3-container,
.store-container{

    width:min(1180px,calc(100% - 36px));

    margin-inline:auto;
}


/* ==============================================================
   HEADER
============================================================== */

.mp3-header{

    position:sticky;

    top:0;

    z-index:100;

    color:#fff;

    background:
        rgba(17,19,26,.96);

    border-bottom:
        1px solid rgba(255,255,255,.065);

    box-shadow:
        0 10px 28px rgba(15,17,27,.14);

    backdrop-filter:
        blur(18px);
}


.mp3-header::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:2px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(124,92,255,.55) 38%,
            rgba(185,242,39,.75) 72%,
            transparent
        );
}


.mp3-header-inner{

    min-height:72px;

    display:flex;

    align-items:center;

    gap:28px;
}


.mp3-brand{

    display:flex;

    align-items:center;

    flex:0 0 auto;
}


.mp3-brand img{

    display:block;

    width:auto;

    max-width:128px;

    max-height:37px;

    object-fit:contain;
}


.mp3-nav{

    display:flex;

    align-items:center;

    gap:4px;

    margin-left:auto;
}


.mp3-nav a{

    padding:9px 12px;

    border-radius:10px;

    color:#a7aeba;

    font-size:12px;

    font-weight:700;

    text-decoration:none;

    transition:.18s ease;
}


.mp3-nav a:hover{

    color:#fff;

    background:
        rgba(255,255,255,.045);
}


.mp3-nav a.is-active{

    color:#fff;

    background:
        rgba(124,92,255,.13);

    box-shadow:
        inset 0 -2px 0 var(--mp3-lime);
}


.mp3-header-actions{

    display:flex;

    align-items:center;

    gap:8px;
}


/* ==============================================================
   CURRENCY
============================================================== */

.mp3-currency{

    display:flex;

    align-items:center;

    gap:2px;

    padding:3px;

    border-radius:11px;

    background:#090b10;

    border:
        1px solid rgba(255,255,255,.08);
}


.mp3-currency form{
    margin:0;
}


.mp3-currency button{

    min-width:40px;

    height:29px;

    padding:0 9px;

    border:0;

    border-radius:8px;

    color:#8f97a5;

    background:transparent;

    font-size:9px;

    font-weight:800;

    cursor:pointer;
}


.mp3-currency button.is-active{

    color:#171b25;

    background:#edf0f5;
}


/* ==============================================================
   BUTTONS
============================================================== */

.mp3-button,
.store-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    min-height:38px;

    padding:0 14px;

    border:0;

    border-radius:11px;

    font-size:10px;

    font-weight:800;

    text-decoration:none;

    cursor:pointer;

    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


.mp3-button:hover,
.store-btn:hover{
    transform:translateY(-1px);
}


.mp3-button-lime,
.store-btn-primary{

    color:#14190b;

    background:var(--mp3-lime);

    box-shadow:
        0 8px 19px rgba(185,242,39,.13);
}


.mp3-button-lime:hover,
.store-btn-primary:hover{

    background:var(--mp3-lime-hover);
}


.mp3-button-muted,
.store-btn-secondary{

    color:#edf0f4;

    background:
        rgba(255,255,255,.045);

    border:
        1px solid rgba(255,255,255,.08);
}


/* ==============================================================
   WALLET HEADER
============================================================== */

.mp3-wallet-pill{

    display:flex;

    align-items:center;

    gap:8px;

    min-height:38px;

    padding:6px 10px;

    border-radius:11px;

    color:#fff;

    background:
        rgba(255,255,255,.04);

    border:
        1px solid rgba(255,255,255,.075);

    text-decoration:none;
}


.mp3-wallet-status{

    width:7px;

    height:7px;

    flex:0 0 7px;

    border-radius:50%;

    background:var(--mp3-lime);

    box-shadow:
        0 0 11px rgba(185,242,39,.38);
}


.mp3-wallet-pill > span:last-child{

    display:flex;

    flex-direction:column;
}


.mp3-wallet-pill small{

    color:#818998;

    font-size:6px;

    font-weight:800;

    line-height:1;
}


.mp3-wallet-pill strong{

    margin-top:3px;

    color:#f0f2f5;

    font-size:9px;

    line-height:1;
}


/* ==============================================================
   MOBILE HEADER MENU
============================================================== */

.mp3-menu-toggle{

    display:none;

    width:38px;

    height:38px;

    place-items:center;

    padding:0;

    border-radius:10px;

    color:#fff;

    background:
        rgba(255,255,255,.045);

    border:
        1px solid rgba(255,255,255,.08);
}


.mp3-menu-toggle svg{

    width:20px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;
}


.mp3-mobile-menu{

    border-top:
        1px solid rgba(255,255,255,.06);

    background:
        rgba(17,19,26,.98);
}


.mp3-mobile-menu .mp3-container{

    display:grid;

    padding-top:9px;

    padding-bottom:12px;
}


.mp3-mobile-menu a{

    display:flex;

    justify-content:space-between;

    padding:11px 4px;

    color:#c7ccd5;

    border-bottom:
        1px solid rgba(255,255,255,.045);

    font-size:11px;

    font-weight:700;

    text-decoration:none;
}


.mp3-mobile-menu a.is-wallet{
    color:var(--mp3-lime);
}


/* ==============================================================
   MAIN
============================================================== */

.mp3-main{

    min-height:
        calc(100vh - 72px);
}


/*
 Baseline for pages not yet individually rebuilt.
*/

.mp3-main .store-section,
.mp3-main .store-section-compact{

    padding:
        46px 0;

    background:
        transparent;
}


.mp3-main h1,
.mp3-main h2,
.mp3-main h3{

    color:var(--mp3-ink);
}


.mp3-main p{

    color:var(--mp3-muted);
}


/* ==============================================================
   GENERIC V3 SURFACES
   Temporary common language while individual pages are rebuilt.
============================================================== */

.store-card,
.store-form-card,
.store-info-hero,
.store-track-result,
.store-track-summary,
.store-status-card,
.store-faq-item,
.store-contact-method,
.mp-checkout-unified,
.mp-catalog-hero,
.mp-catalog-ribbon-card,
.mk32-account-panel,
.mk32-account-metric,
.mk32-wallet-card{

    color:var(--mp3-ink);

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(240,242,248,.94)
        );

    border:
        1px solid var(--mp3-border);

    border-radius:var(--mp3-radius);

    box-shadow:var(--mp3-shadow-soft);
}


.store-input,
.store-select,
.store-textarea{

    width:100%;

    color:var(--mp3-ink);

    background:#fafbfe;

    border:
        1px solid #ccd3e1;

    border-radius:12px;

    outline:none;
}


.store-input:focus,
.store-select:focus,
.store-textarea:focus{

    border-color:var(--mp3-violet);

    box-shadow:
        0 0 0 3px rgba(124,92,255,.09);
}


/* ==============================================================
   PACKAGE / PAYMENT FALLBACK
============================================================== */

.store-package,
.store-payment-option,
.store-payment-type,
.store-confirm-card{

    color:var(--mp3-ink);

    background:#fbfbfe;

    border:
        1px solid var(--mp3-border);

    border-radius:14px;

    box-shadow:var(--mp3-shadow-soft);
}


.store-package.is-selected,
.store-payment-option.is-selected,
.store-payment-type.is-selected,
.store-confirm-card.is-selected{

    background:var(--mp3-lavender);

    border-color:var(--mp3-violet);

    box-shadow:
        0 0 0 3px rgba(124,92,255,.07);
}


/* ==============================================================
   FOOTER
============================================================== */

.mp3-footer{

    color:#959dac;

    background:

        linear-gradient(
            180deg,
            #11131a,
            #0c0e14
        );

    border-top:
        1px solid rgba(255,255,255,.065);
}


.mp3-footer-grid{

    display:grid;

    grid-template-columns:
        minmax(0,1.5fr)
        minmax(150px,.6fr)
        minmax(170px,.7fr);

    gap:60px;

    padding:
        52px 0 42px;
}


.mp3-footer-brand img{

    max-width:135px;

    max-height:40px;

    object-fit:contain;
}


.mp3-footer-brand p{

    max-width:370px;

    margin:
        16px 0 12px;

    color:#9199a8;

    font-size:11px;

    line-height:1.7;
}


.mp3-footer-brand > span{

    color:#626a78;

    font-size:6px;

    font-weight:900;

    letter-spacing:.17em;
}


.mp3-footer h4{

    margin:0 0 15px;

    color:#f2f3f7;

    font-size:10px;
}


.mp3-footer nav{

    display:grid;

    gap:10px;
}


.mp3-footer nav a{

    color:#99a1af;

    font-size:9px;

    text-decoration:none;
}


.mp3-footer nav a:hover{
    color:var(--mp3-lime);
}


.mp3-footer-bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:
        17px 0 24px;

    color:#666f7d;

    border-top:
        1px solid rgba(255,255,255,.055);

    font-size:7px;
}


/* ==============================================================
   WHATSAPP
============================================================== */

.mp3-whatsapp{

    position:fixed;

    right:20px;

    bottom:22px;

    z-index:80;

    width:48px;

    height:48px;

    display:grid;

    place-items:center;

    border-radius:50%;

    color:#fff;

    background:#21c963;

    box-shadow:
        0 12px 28px rgba(17,110,52,.25);
}


.mp3-whatsapp svg{

    width:23px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.6;
}


/* ==============================================================
   MOBILE DOCK
============================================================== */

.mp3-mobile-dock{
    display:none;
}


/* ==============================================================
   CUSTOMER ACCOUNT
============================================================== */

.mp3-account{

    min-height:100vh;

    color:var(--mp3-ink);

    background:

        radial-gradient(
            circle at 95% 0%,
            rgba(124,92,255,.08),
            transparent 27%
        ),

        linear-gradient(
            180deg,
            #f6f7fb,
            #eef1f7
        );
}


.mp3-account-shell{

    width:min(1240px,calc(100% - 36px));

    margin:0 auto;

    display:grid;

    grid-template-columns:
        230px minmax(0,1fr);

    gap:24px;

    padding:
        28px 0 65px;
}


.mp3-account-sidebar{

    position:sticky;

    top:100px;

    align-self:start;

    padding:18px;

    color:#fff;

    border-radius:20px;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(124,92,255,.16),
            transparent 34%
        ),

        linear-gradient(
            160deg,
            #191c28,
            #11131a
        );

    border:
        1px solid rgba(255,255,255,.07);

    box-shadow:
        0 16px 38px rgba(25,28,43,.16);
}


.mp3-account-user{

    display:flex;

    flex-direction:column;

    padding:
        4px 4px 16px;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}


.mp3-account-user > span{

    color:#737b8b;

    font-size:6px;

    font-weight:900;

    letter-spacing:.14em;
}


.mp3-account-user strong{

    margin-top:8px;

    color:#fff;

    font-size:13px;
}


.mp3-account-user small{

    margin-top:4px;

    overflow:hidden;

    color:#929aa9;

    font-size:7px;

    text-overflow:ellipsis;
}


.mp3-account-balance{

    margin-top:15px;

    padding:14px;

    border-radius:14px;

    background:
        rgba(255,255,255,.045);

    border:
        1px solid rgba(255,255,255,.065);
}


.mp3-account-balance > span{

    color:#7c8494;

    font-size:6px;

    font-weight:900;

    letter-spacing:.12em;
}


.mp3-account-balance strong{

    display:block;

    margin-top:6px;

    color:#fff;

    font-size:22px;

    letter-spacing:-.04em;
}


.mp3-account-balance a{

    display:inline-block;

    margin-top:9px;

    color:var(--mp3-lime);

    font-size:7px;

    font-weight:800;

    text-decoration:none;
}


.mp3-account-nav{

    display:grid;

    gap:4px;

    margin-top:16px;
}


.mp3-account-nav a{

    padding:
        10px 11px;

    border-radius:10px;

    color:#9ba3b1;

    font-size:9px;

    font-weight:700;

    text-decoration:none;
}


.mp3-account-nav a:hover{

    color:#fff;

    background:
        rgba(255,255,255,.045);
}


.mp3-account-nav a.is-active{

    color:#fff;

    background:
        rgba(124,92,255,.15);

    box-shadow:
        inset 3px 0 0 var(--mp3-lime);
}


.mp3-account-logout{

    margin-top:17px;

    padding-top:14px;

    border-top:
        1px solid rgba(255,255,255,.06);
}


.mp3-account-logout button{

    width:100%;

    padding:9px 10px;

    color:#929aa8;

    text-align:left;

    border:0;

    border-radius:9px;

    background:transparent;

    font-size:8px;

    cursor:pointer;
}


.mp3-account-logout button:hover{

    color:#fff;

    background:
        rgba(255,255,255,.04);
}


.mp3-account-content{

    min-width:0;
}


/* ==============================================================
   RESPONSIVE
============================================================== */

@media(max-width:900px){

    .mp3-nav{
        display:none;
    }


    .mp3-menu-toggle{
        display:grid;
    }


    .mp3-header-inner{
        gap:10px;
    }


    .mp3-header-actions{
        margin-left:auto;
    }


    .mp3-wallet-pill,
    .mp3-header-actions > .mp3-button-muted{
        display:none;
    }


    .mp3-account-shell{

        grid-template-columns:1fr;

        width:min(100% - 24px,1240px);
    }


    .mp3-account-sidebar{
        display:none;
    }

}


@media(max-width:760px){

    body.mp3-body,
    .mp3-account{

        padding-bottom:70px;
    }


    .mp3-container,
    .store-container{

        width:min(100% - 24px,1180px);
    }


    .mp3-header-inner{

        min-height:62px;
    }


    .mp3-brand img{

        max-width:112px;

        max-height:32px;
    }


    .mp3-header-actions > .mp3-button-lime{
        display:none;
    }


    .mp3-currency button{

        min-width:35px;

        height:27px;

        padding:0 7px;
    }


    .mp3-footer-grid{

        grid-template-columns:1fr;

        gap:30px;

        padding:
            40px 0 31px;
    }


    .mp3-footer-bottom{

        flex-direction:column;

        align-items:flex-start;

        gap:7px;

        padding-bottom:23px;
    }


    .mp3-mobile-dock{

        position:fixed;

        z-index:95;

        left:8px;
        right:8px;
        bottom:8px;

        height:58px;

        display:grid;

        grid-template-columns:
            repeat(5,1fr);

        align-items:center;

        padding:4px;

        border-radius:17px;

        background:
            rgba(17,19,26,.96);

        border:
            1px solid rgba(255,255,255,.08);

        box-shadow:
            0 14px 34px rgba(14,16,25,.27);

        backdrop-filter:
            blur(18px);
    }


    .mp3-mobile-dock a{

        min-width:0;

        height:48px;

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:center;

        gap:3px;

        border-radius:12px;

        color:#7e8795;

        text-decoration:none;

        font-size:6px;

        font-weight:700;
    }


    .mp3-mobile-dock svg{

        width:18px;

        height:18px;

        fill:none;

        stroke:currentColor;

        stroke-width:1.7;
    }


    .mp3-mobile-dock a.is-active{

        color:#fff;

        background:
            rgba(124,92,255,.12);
    }


    .mp3-mobile-dock a.is-primary{

        color:#151a0b;

        background:var(--mp3-lime);
    }


    .mp3-whatsapp{

        right:14px;

        bottom:79px;

        width:44px;

        height:44px;
    }

}