:root {
    --black: #000000;
    --bg: #080808;
    --bg-2: #0d0d0d;

    --surface: #121212;
    --surface-2: #181818;
    --surface-3: #202020;

    --gray: #8f9491;
    --charcoal: #474747;
    --white: #ffffff;

    --orange: #FC6625;
    --orange-soft: #ff8550;

    --lime: #FC6625;

    --cyan: #59D8FF;
    --cyan-light: #b7efff;
    --cyan-deep: #178ccc;

    --danger: #ff765e;

    --line: rgba(255,255,255,.085);
    --line-strong: rgba(255,255,255,.14);

    --display: "Space Grotesk", sans-serif;
    --body: "Manrope", sans-serif;

    --max: 1320px;

    --mx: 50vw;
    --my: 30vh;

    --shadow:
        0 26px 70px rgba(0,0,0,.34);
}


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    position: relative;

    margin: 0;
    min-width: 320px;

    color: var(--white);
    font-family: var(--body);

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(252,102,37,.08),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #080808,
            #0b0b0b 62%,
            #070707
        );
}

/* luz ambiental controlada por JS */
body::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            500px circle at var(--mx) var(--my),
            rgba(252,102,37,.065),
            transparent 66%
        );
}

body::after {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: .16;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size:
        64px 64px;
}

button,
input {
    font: inherit;
}

button {
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

.mi-container {
    width: min(
        calc(100% - 42px),
        var(--max)
    );

    margin-inline: auto;
}


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

.mi-header {
    position: sticky;
    top: 0;

    z-index: 100;

    height: 70px;

    background:
        rgba(5,5,5,.90);

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

    backdrop-filter:
        blur(20px)
        saturate(130%);
}

.mi-header::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 100%;
    height: 1px;

    opacity: .65;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--orange) 25%,
            transparent 50%,
            rgba(252,102,37,.35) 76%,
            transparent 100%
        );

    background-size: 200% 100%;

    animation:
        mi-header-flow 10s linear infinite;
}

@keyframes mi-header-flow {
    to {
        background-position: -200% 0;
    }
}

.mi-header-inner {
    height: 100%;

    display: flex;
    align-items: center;

    gap: 30px;
}


/* brand */

.mi-brand {
    display: flex;
    align-items: center;

    gap: 15px;
}

.mi-brand-lockup {
    position: relative;

    width: 177px;
    height: 48px;

    display: block;
}

/*
   Usamos el logo REAL como máscara.
   Así el lettering pasa a blanco sin modificar el PNG original.
*/
.mi-brand-white {
    position: absolute;
    inset: 0;

    background: white;

    -webkit-mask:
        url('/assets/brand/modo-insano-logo.png')
        center / contain no-repeat;

    mask:
        url('/assets/brand/modo-insano-logo.png')
        center / contain no-repeat;
}

/* tapamos el diamante blanco de la máscara con el naranja real */
.mi-brand-orange-diamond {
    position: absolute;

    right: 0;
    top: 50%;

    width: 34px;
    height: 34px;

    object-fit: contain;

    transform:
        translateY(-50%);

    filter:
        drop-shadow(
            0 0 10px rgba(252,102,37,.20)
        );
}

.mi-brand-logo,
.mi-brand-mark,
.mi-brand-copy {
    display: none;
}

.mi-brand-powered {
    padding-left: 14px;

    color: #777d79;

    border-left:
        1px solid rgba(255,255,255,.11);

    font-size: 8px;
    font-weight: 500;
}

.mi-brand-powered strong {
    color: #b3b7b4;

    font-size: 8px;
    font-weight: 800;
}


/* navigation */

.mi-nav {
    display: flex;
    align-items: center;

    gap: 27px;

    margin-left: auto;
}

.mi-nav a {
    position: relative;

    color: #9b9f9c;

    font-size: 10px;
    font-weight: 700;

    transition:
        color .18s ease;
}

.mi-nav a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: var(--orange);

    border-radius: 20px;

    transform:
        translateX(-50%);

    transition:
        width .20s ease;
}

.mi-nav a:hover {
    color: white;
}

.mi-nav a:hover::after {
    width: 20px;
}


/* online */

.mi-header-actions {
    display: flex;
    align-items: center;

    gap: 14px;
}

.mi-system-status {
    display: flex;
    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    color: #d9ff75;

    background:
        rgba(252,102,37,.08);

    border:
        1px solid rgba(252,102,37,.14);

    border-radius: 999px;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .05em;
}

.mi-system-status i {
    width: 7px;
    height: 7px;

    background: var(--lime);
    border-radius: 50%;

    box-shadow:
        0 0 0 4px rgba(252,102,37,.07),
        0 0 14px rgba(252,102,37,.50);

    animation:
        mi-online-pulse 2.2s ease-in-out infinite;
}

@keyframes mi-online-pulse {
    50% {
        box-shadow:
            0 0 0 7px rgba(252,102,37,0),
            0 0 19px rgba(252,102,37,.65);
    }
}


/* hamburger */

.mi-mobile-menu {
    display: none;

    position: relative;
}

.mi-menu-trigger {
    width: 41px;
    height: 41px;

    display: grid;
    place-content: center;

    gap: 5px;

    cursor: pointer;

    list-style: none;

    background: #151515;

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

    border-radius: 12px;
}

.mi-menu-trigger::-webkit-details-marker {
    display: none;
}

.mi-menu-trigger span {
    width: 17px;
    height: 2px;

    display: block;

    background: #d8dad8;

    border-radius: 10px;
}

.mi-menu-panel {
    position: absolute;

    right: 0;
    top: 47px;

    width: 190px;

    padding: 7px;

    background: #171717;

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

    border-radius: 15px;

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

.mi-menu-panel a {
    display: block;

    padding: 10px 11px;

    color: #bbb;

    border-radius: 9px;

    font-size: 10px;
    font-weight: 600;
}

.mi-menu-panel a:hover {
    color: white;

    background: #222;
}


/* =========================================================
   HERO
   ========================================================= */

.mi-hero {
    padding: 22px 0 12px;

    background: transparent;
}

.mi-hero::before,
.mi-hero-grid-bg,
.mi-hero-glow,
.mi-hero-word,
.mi-hero-proof {
    display: none;
}

.mi-hero-inner {
    position: relative;

    min-height: 215px;

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

    align-items: center;

    padding: 32px 43px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 77% 15%,
            rgba(252,102,37,.14),
            transparent 31%
        ),
        linear-gradient(
            120deg,
            #0b0b0b 0%,
            #121212 54%,
            #191919 100%
        );

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

    border-radius: 25px;

    box-shadow:
        0 26px 70px rgba(0,0,0,.26);
}

/* diagonal esports */
.mi-hero-inner::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 125%;

    right: 13%;
    top: -12%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(252,102,37,.07),
            rgba(252,102,37,.015)
        );

    transform:
        skewX(-22deg);

    border-left:
        1px solid rgba(252,102,37,.15);
}

/* fondo dinámico */
.mi-hero-inner::after {
    content: "";

    position: absolute;

    right: -50px;
    top: -85px;

    width: 330px;
    height: 330px;

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

    border-radius: 50%;

    box-shadow:
        0 0 0 52px rgba(255,255,255,.012),
        0 0 0 104px rgba(255,255,255,.008);

    animation:
        mi-orbit-breathe 7s ease-in-out infinite;
}

@keyframes mi-orbit-breathe {
    50% {
        transform:
            scale(1.06);
    }
}

.mi-hero-copy {
    position: relative;
    z-index: 4;
}

.mi-eyebrow,
.mi-primary-action {
    display: none;
}

.mi-hero h1 {
    max-width: 720px;

    margin: 0;

    color: white;

    font-family: var(--display);
    font-size:
        clamp(38px,4vw,56px);

    font-weight: 700;

    line-height: 1.015;
    letter-spacing: -.055em;
}

.mi-hero h1 span {
    display: block;

    color: var(--orange);
}

.mi-hero-copy p {
    margin: 14px 0 0;

    color: #9b9f9c;

    font-size: 12px;
    font-weight: 500;
}


/* hero crystal */

.mi-hero-art {
    position: relative;
    z-index: 5;

    width: 250px;
    height: 160px;

    justify-self: end;

    background: transparent;

    border: 0;

    transform: none;
}

.mi-hero-art::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 116px;
    height: 98px;

    transform:
        translate(-50%,-50%)
        rotate(-3deg);

    clip-path:
        polygon(
            21% 0,
            79% 0,
            100% 31%,
            50% 100%,
            0 31%
        );

    background:
        linear-gradient(
            146deg,
            rgba(255,255,255,.90) 0 12%,
            transparent 12%
        ),
        linear-gradient(
            35deg,
            transparent 0 48%,
            rgba(255,255,255,.40) 49% 52%,
            transparent 53%
        ),
        linear-gradient(
            -35deg,
            transparent 0 48%,
            rgba(255,255,255,.28) 49% 52%,
            transparent 53%
        ),
        linear-gradient(
            135deg,
            var(--cyan-light),
            var(--cyan) 42%,
            #258ee0 70%,
            #0b579e
        );

    filter:
        drop-shadow(
            0 0 12px rgba(89,216,255,.45)
        )
        drop-shadow(
            0 22px 23px rgba(0,0,0,.52)
        );

    animation:
        mi-crystal-float
        4.6s ease-in-out infinite;
}

.mi-hero-art::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 7px;

    width: 150px;
    height: 24px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(89,216,255,.30),
            transparent 68%
        );

    filter: blur(8px);

    animation:
        mi-crystal-shadow
        4.6s ease-in-out infinite;
}

@keyframes mi-crystal-float {
    50% {
        transform:
            translate(-50%,-58%)
            rotate(2deg);
    }
}

@keyframes mi-crystal-shadow {
    50% {
        opacity: .62;
        transform:
            translateX(-50%)
            scale(.82);
    }
}

.mi-orbit,
.mi-hero-shard,
.mi-art-code,
.mi-coordinate {
    display: none;
}


/* =========================================================
   COMMERCE
   ========================================================= */

.mi-commerce {
    padding:
        8px 0 80px;
}

.mi-checkout-grid {
    display: grid;

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

    gap: 20px;

    align-items: start;
}

.mi-flow {
    min-width: 0;
}


/* Main application surface */

.mi-recharge {
    position: relative;

    margin: 0 0 16px;

    padding: 28px;

    overflow: hidden;

    background:
        radial-gradient(
            500px circle at var(--local-x,10%) var(--local-y,0%),
            rgba(252,102,37,.045),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            #141414,
            #0f0f0f
        );

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

    border-radius: 22px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.22);
}

.mi-recharge::before {
    content: "";

    position: absolute;

    left: 0;
    top: 29px;

    width: 3px;
    height: 74px;

    background:
        linear-gradient(
            var(--orange),
            rgba(252,102,37,0)
        );
}


/* =========================================================
   HEADINGS
   ========================================================= */

.mi-section-head,
.mi-products-head {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 22px;
}

.mi-section-head {
    margin-bottom: 22px;
}

.mi-products-head {
    align-items: flex-end;

    margin: 27px 0 16px;
    padding-top: 24px;

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

.mi-section-index {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 8px;
}

.mi-section-index span {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    color: white;
    background: var(--orange);

    border-radius: 8px;

    font-size: 8px;
    font-weight: 900;

    box-shadow:
        0 5px 15px rgba(252,102,37,.19);
}

.mi-section-index i {
    width: 18px;
    height: 1px;

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

.mi-section-index small,
.mi-kicker {
    color: #777d79;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .085em;
}

.mi-section-head h2,
.mi-products-head h2,
.mi-payment-panel h2,
.mi-modal h2 {
    margin: 0;

    font-family: var(--display);
    font-weight: 700;

    letter-spacing: -.045em;
}

.mi-section-head h2,
.mi-products-head h2 {
    font-size:
        clamp(26px,2.7vw,36px);
}

.mi-section-head p {
    max-width: 620px;

    margin: 8px 0 0;

    color: #858a87;

    font-size: 10px;
    line-height: 1.65;
}

.mi-remove,
.mi-text-action {
    padding: 0;

    color: #777;
    background: transparent;

    border: 0;

    cursor: pointer;

    font-size: 8px;
    font-weight: 700;
}


/* =========================================================
   INPUTS
   ========================================================= */

.mi-fields {
    display: grid;
    gap: 13px;
}

.mi-fields-two {
    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);
}

.mi-field-group > label {
    display: block;

    margin-bottom: 7px;

    color: #9da19e;

    font-size: 8px;
    font-weight: 800;
}

.mi-field-shell {
    position: relative;

    height: 54px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        #202020;

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

    border-radius: 13px;

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

.mi-field-shell:hover {
    background: #232323;

    border-color:
        rgba(255,255,255,.15);
}

.mi-field-shell:focus-within {
    background: #252525;

    border-color: var(--orange);

    box-shadow:
        0 0 0 4px rgba(252,102,37,.075),
        0 12px 30px rgba(0,0,0,.20);

    transform:
        translateY(-1px);
}

.mi-field-shell input {
    width: 100%;
    height: 100%;

    padding:
        0 56px 0 15px;

    color: white;
    background: transparent;

    border: 0;
    outline: 0;

    font-size: 11px;
    font-weight: 600;
}

.mi-field-shell input::placeholder {
    color: #646965;
}

.mi-field-shell > span {
    position: absolute;

    right: 11px;

    padding: 5px 7px;

    color: #949995;
    background: #2d2d2d;

    border-radius: 7px;

    font-size: 7px;
    font-weight: 800;
}

.mi-currency {
    padding: 6px 8px;

    color: #101400;
    background: var(--lime);

    border-radius: 8px;

    font-size: 8px;
    font-weight: 900;

    box-shadow:
        0 0 17px rgba(252,102,37,.12);
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

.mi-products {
    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 11px;
}

.mi-product,
.mi-pass,
.mi-payment-method {
    position: relative;
    cursor: pointer;
}

.mi-product > input,
.mi-pass > input,
.mi-payment-method > input {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}


/* card */

.mi-product-surface {
    --rx: 0deg;
    --ry: 0deg;

    position: relative;

    min-height: 170px;

    display: flex;
    flex-direction: column;

    padding: 15px;

    overflow: hidden;

    transform:
        perspective(750px)
        rotateX(var(--rx))
        rotateY(var(--ry))
        translateZ(0);

    transform-style:
        preserve-3d;

    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(89,216,255,.055),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #252525,
            #191919
        );

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

    border-radius: 18px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);

    transition:
        transform .14s ease-out,
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

/* profundidad cyan */
.mi-product-surface::before {
    content: "";

    position: absolute;

    width: 115px;
    height: 115px;

    right: -48px;
    top: -45px;

    opacity: .70;

    background:
        radial-gradient(
            circle,
            rgba(89,216,255,.15),
            transparent 70%
        );

    transition:
        opacity .20s ease,
        transform .25s ease;
}

/* reflejo */
.mi-product-surface::after {
    content: "";

    position: absolute;

    top: -30%;
    left: -70%;

    width: 35%;
    height: 160%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.055),
            transparent
        );

    transform:
        skewX(-18deg);

    transition:
        left .55s cubic-bezier(.2,.75,.25,1);
}

.mi-product:hover
.mi-product-surface {
    border-color:
        rgba(89,216,255,.22);

    box-shadow:
        0 18px 35px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.mi-product:hover
.mi-product-surface::after {
    left: 140%;
}

.mi-product:hover
.mi-product-surface::before {
    opacity: 1;

    transform:
        scale(1.13);
}

.mi-product:has(input:checked)
.mi-product-surface {
    border-color: var(--orange);

    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(252,102,37,.11),
            transparent 37%
        ),
        linear-gradient(
            145deg,
            #292321,
            #191919
        );

    box-shadow:
        0 0 0 3px rgba(252,102,37,.08),
        0 20px 40px rgba(0,0,0,.29);
}


/* popular cards gain more personality */
.mi-product:has(.mi-product-tag)
.mi-product-surface {
    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(252,102,37,.09),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #282522,
            #1a1a1a
        );
}


/* top */

.mi-product-top {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: space-between;

    transform:
        translateZ(12px);
}

.mi-product-top > span {
    color: #838784;

    font-size: 7px;
    font-weight: 800;
}

.mi-product-top b,
.mi-pass-select {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    color: #929693;

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

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

    border-radius: 9px;

    font-size: 14px;
}

.mi-product:has(input:checked)
.mi-product-top b {
    color: white;
    background: var(--orange);

    border-color: var(--orange);

    font-size: 0;

    box-shadow:
        0 6px 16px rgba(252,102,37,.23);
}

.mi-product:has(input:checked)
.mi-product-top b::after {
    content: "✓";

    font-size: 11px;
    font-weight: 900;
}


/* number */

.mi-product-qty {
    position: relative;
    z-index: 4;

    margin-top: 16px;

    color: white;

    font-family: var(--display);
    font-size: 34px;
    font-weight: 700;

    line-height: .95;
    letter-spacing: -.05em;

    transform:
        translateZ(18px);
}

.mi-product-unit {
    position: relative;
    z-index: 4;

    margin-top: 4px;

    color: #777d79;

    font-size: 7px;
    font-weight: 700;
}


/* bottom */

.mi-product-bottom {
    position: relative;
    z-index: 4;

    margin-top: auto;

    padding-top: 14px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    transform:
        translateZ(15px);
}

.mi-product-bottom > strong {
    color: var(--lime);

    font-family: var(--display);
    font-size: 21px;
    font-weight: 700;

    letter-spacing: -.035em;

    text-shadow:
        0 0 20px rgba(252,102,37,.12);
}


/* =========================================================
   3D FREE FIRE STYLE CYAN DIAMOND
   ========================================================= */

.mi-product-mini-art {
    position: relative;

    width: 55px;
    height: 47px;

    display: grid;
    place-items: center;

    isolation: isolate;
}

.mi-product-mini-art img {
    display: none;
}

/* glow */
.mi-product-mini-art::after {
    content: "";

    position: absolute;

    width: 46px;
    height: 18px;

    left: 50%;
    bottom: -1px;

    z-index: -1;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(89,216,255,.44),
            transparent 69%
        );

    filter:
        blur(7px);
}

/* faceted gemstone */
.mi-product-mini-art::before {
    content: "";

    width: 46px;
    height: 39px;

    display: block;

    clip-path:
        polygon(
            21% 0,
            79% 0,
            100% 34%,
            50% 100%,
            0 34%
        );

    background:
        linear-gradient(
            151deg,
            rgba(255,255,255,.96) 0 10%,
            transparent 11%
        ),
        linear-gradient(
            35deg,
            transparent 0 48%,
            rgba(255,255,255,.52) 49% 51%,
            transparent 52%
        ),
        linear-gradient(
            -35deg,
            transparent 0 48%,
            rgba(255,255,255,.30) 49% 51%,
            transparent 52%
        ),
        linear-gradient(
            90deg,
            transparent 0 48.5%,
            rgba(255,255,255,.30) 49% 51%,
            transparent 51.5%
        ),
        linear-gradient(
            135deg,
            #d1f6ff 0%,
            #72dbff 22%,
            #38b9f3 50%,
            #178bd2 76%,
            #075998 100%
        );

    filter:
        drop-shadow(
            0 0 8px rgba(89,216,255,.46)
        )
        drop-shadow(
            0 9px 9px rgba(0,0,0,.28)
        );

    transition:
        transform .22s cubic-bezier(.2,.75,.25,1),
        filter .22s ease;
}

.mi-product:hover
.mi-product-mini-art::before {
    transform:
        translateY(-3px)
        rotate(-3deg)
        scale(1.07);

    filter:
        drop-shadow(
            0 0 13px rgba(89,216,255,.60)
        )
        drop-shadow(
            0 11px 11px rgba(0,0,0,.30)
        );
}


/* badge */

.mi-product-tag {
    position: absolute;

    left: 14px;
    bottom: -1px;

    padding: 5px 8px;

    color: white;
    background: var(--orange);

    border-radius:
        7px 7px 0 0;

    font-size: 6px;
    font-weight: 900;

    box-shadow:
        0 -5px 15px rgba(252,102,37,.12);
}


/* =========================================================
   PASSES
   ========================================================= */

.mi-subsection {
    display: flex;
    align-items: center;

    gap: 10px;

    margin:
        27px 0 13px;
}

.mi-subsection > span {
    width: 4px;
    height: 31px;

    background:
        linear-gradient(
            var(--orange),
            #A9360B
        );

    border-radius: 99px;
}

.mi-subsection div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.mi-subsection strong {
    font-size: 11px;
    font-weight: 800;
}

.mi-subsection small {
    color: #777c79;

    font-size: 8px;
}

.mi-passes {
    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 10px;
}

.mi-pass-surface {
    --rx: 0deg;
    --ry: 0deg;

    min-height: 96px;

    display: grid;

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

    align-items: center;

    gap: 10px;

    padding: 11px;

    transform:
        perspective(700px)
        rotateX(var(--rx))
        rotateY(var(--ry));

    background:
        linear-gradient(
            145deg,
            #202020,
            #181818
        );

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

    border-radius: 16px;

    transition:
        transform .14s ease-out,
        border-color .18s ease,
        box-shadow .18s ease;
}

.mi-pass:hover
.mi-pass-surface {
    border-color:
        rgba(255,255,255,.16);

    box-shadow:
        0 15px 30px rgba(0,0,0,.22);
}

.mi-pass:has(input:checked)
.mi-pass-surface {
    border-color: var(--orange);

    box-shadow:
        0 0 0 3px rgba(252,102,37,.07);
}

.mi-pass-art {
    width: 51px;
    height: 59px;

    display: grid;
    place-items: center;

    overflow: hidden;

    background: #111;

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

    border-radius: 12px;
}

.mi-pass-art img {
    max-width: 46px;
    max-height: 53px;

    object-fit: contain;
}

.mi-pass-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.mi-pass-copy small {
    color: #747976;

    font-size: 6px;
    font-weight: 800;
}

.mi-pass-copy strong {
    overflow: hidden;

    font-size: 9px;
    font-weight: 700;
}

.mi-pass-copy b {
    color: var(--lime);

    font-family: var(--display);
    font-size: 15px;
    font-weight: 700;
}

.mi-pass:has(input:checked)
.mi-pass-select {
    color: white;
    background: var(--orange);

    border-color: var(--orange);

    font-size: 0;
}

.mi-pass:has(input:checked)
.mi-pass-select::after {
    content: "✓";

    font-size: 10px;
}


/* another player */

.mi-add-recharge {
    width: 100%;
    min-height: 48px;

    margin-top: 15px;

    cursor: pointer;

    color: #8e938f;
    background: #151515;

    border:
        1px dashed rgba(255,255,255,.13);

    border-radius: 14px;

    font-size: 8px;
    font-weight: 800;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.mi-add-recharge:hover {
    color: white;
    background: #1b1b1b;

    border-color:
        rgba(252,102,37,.50);
}


/* =========================================================
   PAYMENT
   ========================================================= */

.mi-checkout-aside {
    position: sticky;
    top: 91px;
}

.mi-payment-panel {
    position: relative;

    padding: 24px 21px;

    overflow: hidden;

    color: white;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(252,102,37,.035),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #181818,
            #111
        );

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

    border-radius: 21px;

    box-shadow:
        0 24px 58px rgba(0,0,0,.25);
}

.mi-payment-panel::after {
    content: "";

    position: absolute;

    right: 0;
    top: 0;

    width: 75px;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--lime)
        );
}

.mi-payment-panel h2 {
    margin-top: 7px;

    color: white;

    font-size: 25px;
}

.mi-payment-intro {
    margin: 7px 0 17px;

    color: #777d79;

    font-size: 9px;
}

.mi-payment-methods {
    display: grid;

    gap: 8px;
}

.mi-payment-surface {
    min-height: 62px;

    display: grid;

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

    align-items: center;

    gap: 10px;

    padding: 9px 10px;

    background: #202020;

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

    border-radius: 13px;

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

.mi-payment-method:hover
.mi-payment-surface {
    transform:
        translateX(3px);

    background: #242424;

    border-color:
        rgba(255,255,255,.14);
}

.mi-payment-method:has(input:checked)
.mi-payment-surface {
    background:
        rgba(252,102,37,.07);

    border-color: var(--orange);

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

.mi-payment-type {
    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    color: #dedfdd;
    background: #292929;

    border-radius: 10px;

    font-size: 7px;
    font-weight: 900;
}

.mi-payment-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.mi-payment-copy strong {
    color: white;

    font-size: 10px;
    font-weight: 800;
}

.mi-payment-copy small {
    color: #747976;

    font-size: 7px;
}

.mi-radio {
    width: 16px;
    height: 16px;

    border:
        2px solid #555a57;

    border-radius: 50%;
}

.mi-payment-method:has(input:checked)
.mi-radio {
    background: #111;

    border:
        5px solid var(--orange);
}


/* total */

.mi-total {
    margin-top: 20px;

    padding:
        18px 0 15px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

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

.mi-total > span {
    display: flex;
    flex-direction: column;

    color: #777c79;

    font-size: 8px;
    font-weight: 800;
}

.mi-total small {
    margin-top: 4px;

    color: #656a67;

    font-size: 7px;
}

.mi-total > strong {
    color: var(--lime);

    font-family: var(--display);
    font-size: 34px;
    font-weight: 700;

    line-height: 1;
    letter-spacing: -.05em;

    text-shadow:
        0 0 22px rgba(252,102,37,.10);
}


/* buttons */

.mi-button {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    padding: 0 17px;

    cursor: pointer;

    border: 0;
    border-radius: 13px;

    font-size: 9px;
    font-weight: 900;

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

.mi-button:hover:not(:disabled) {
    transform:
        translateY(-2px);
}

.mi-button:disabled {
    cursor: not-allowed;
    opacity: .37;
}

.mi-button-primary {
    color: #111600;

    background:
        linear-gradient(
            105deg,
            #bfff22,
            var(--lime)
        );

    box-shadow:
        0 13px 28px rgba(252,102,37,.12);
}

.mi-button-primary:hover:not(:disabled) {
    box-shadow:
        0 17px 35px rgba(252,102,37,.20);
}

.mi-button-secondary {
    color: white;
    background: #252525;

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

.mi-desktop-cta {
    width: 100%;
}

.mi-desktop-cta b {
    margin-left: auto;

    font-size: 16px;
}


/* security */

.mi-security {
    margin-top: 12px;

    display: flex;
    align-items: center;

    gap: 8px;

    color: #707572;
}

.mi-security > span {
    color: var(--lime);

    filter:
        drop-shadow(
            0 0 5px rgba(252,102,37,.35)
        );
}

.mi-security div {
    display: flex;
    flex-direction: column;
}

.mi-security strong {
    color: #8c918d;

    font-size: 7px;
    font-weight: 900;
}

.mi-security small {
    font-size: 7px;
}


/* =========================================================
   PENDING
   ========================================================= */

.mi-pending {
    margin-bottom: 15px;

    padding: 17px 19px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    color: white;
    background: #171717;

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

    border-radius: 17px;
}

.mi-pending > div:first-child {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.mi-pending > div:first-child > strong {
    font-family: var(--display);

    font-size: 18px;
}

.mi-pending p {
    margin: 0;

    color: #777c79;

    font-size: 9px;
}

.mi-pending-actions {
    display: flex;
    align-items: center;

    gap: 12px;
}


/* =========================================================
   ERRORS
   ========================================================= */

.mi-error {
    margin-top: 6px;

    color: #ff9a7a;

    font-size: 8px;
}

.mi-error-product {
    margin-top: 10px;
}

.mi-error-panel {
    margin-bottom: 13px;
    padding: 11px;

    color: #ffb09a;
    background:
        rgba(255,90,56,.08);

    border:
        1px solid rgba(255,90,56,.17);

    border-radius: 10px;

    font-size: 9px;
}


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

.mi-footer {
    color: white;

    background: #050505;

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

.mi-footer::before {
    display: none;
}

.mi-footer-grid {
    min-height: 185px;

    padding:
        40px 0 30px;

    display: grid;

    grid-template-columns:
        1.2fr 1fr .7fr;

    gap: 44px;
}

.mi-footer-logo {
    width: 177px;

    filter:
        brightness(0)
        invert(1);
}

.mi-footer-grid > div:first-child > p {
    max-width: 280px;

    margin: 13px 0 0;

    color: #777c79;

    font-size: 9px;
    line-height: 1.7;
}

.mi-footer-links {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 28px;
}

.mi-footer-links > div,
.mi-footer-powered {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.mi-footer-links strong,
.mi-footer-powered > span {
    color: #696e6b;

    font-size: 7px;
    font-weight: 800;
}

.mi-footer-links a {
    color: #a5aaa6;

    font-size: 9px;
}

.mi-footer-links a:hover {
    color: var(--lime);
}

.mi-footer-powered img {
    width: 112px;
    max-height: 44px;

    object-fit: contain;
    object-position: left center;
}

.mi-footer-bottom {
    min-height: 57px;

    padding: 13px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

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

.mi-footer-bottom p {
    margin: 0;

    color: #5d625f;

    font-size: 7px;
}

.mi-footer-bottom > span {
    color: #666b68;

    font-size: 8px;
}


/* =========================================================
   MODAL
   ========================================================= */

.mi-modal-backdrop {
    position: fixed;
    inset: 0;

    z-index: 200;

    display: grid;
    place-items: center;

    padding: 20px;

    background:
        rgba(0,0,0,.78);

    backdrop-filter:
        blur(12px);
}

.mi-modal {
    width: min(620px,100%);
    max-height: calc(100vh - 40px);

    overflow: auto;

    padding: 25px;

    color: white;

    background:
        linear-gradient(
            145deg,
            #1b1b1b,
            #111
        );

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

    border-radius: 22px;

    box-shadow:
        0 38px 100px rgba(0,0,0,.55);
}

.mi-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 18px;

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

.mi-modal-head h2 {
    margin-top: 5px;

    font-size: 28px;
}

.mi-modal-head p {
    margin: 6px 0 0;

    color: #777c79;

    font-size: 9px;
}

.mi-modal-close {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    cursor: pointer;

    flex-shrink: 0;

    color: #bbb;
    background: #252525;

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

    border-radius: 11px;

    font-size: 20px;
}

.mi-review-list {
    margin-top: 17px;

    display: grid;
    gap: 7px;
}

.mi-review-item {
    min-height: 67px;

    display: grid;

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

    align-items: center;

    gap: 11px;

    padding: 9px;

    background: #202020;

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

    border-radius: 13px;
}

.mi-review-art {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    background: #151515;

    border-radius: 10px;
}

.mi-review-art img {
    max-width: 41px;
    max-height: 41px;

    object-fit: contain;
}

.mi-review-copy {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.mi-review-copy strong {
    font-size: 10px;
}

.mi-review-copy small {
    color: #777c79;

    font-size: 7px;
}

.mi-review-price {
    color: var(--lime);

    font-family: var(--display);
    font-size: 16px;
    font-weight: 700;
}

.mi-review-summary {
    margin-top: 14px;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 7px;
}

.mi-review-summary > div {
    padding: 11px;

    background: #1e1e1e;

    border-radius: 11px;
}

.mi-review-summary span,
.mi-review-total span {
    display: block;

    margin-bottom: 4px;

    color: #777c79;

    font-size: 7px;
    font-weight: 800;
}

.mi-review-summary strong {
    font-size: 9px;
}

.mi-review-total {
    margin-top: 8px;

    padding:
        16px 0 14px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

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

.mi-review-total strong {
    color: var(--lime);

    font-family: var(--display);
    font-size: 31px;
    font-weight: 700;
}

.mi-modal-primary {
    width: 100%;
}

.mi-modal-warning {
    margin-top: 11px;

    color: #777c79;

    font-size: 7px;
    line-height: 1.6;

    text-align: center;
}


/* payment banners */

.mi-payment-banner {
    margin: 13px 0;
    padding: 11px;

    color: #f4ce75;

    background:
        rgba(255,190,55,.07);

    border:
        1px solid rgba(255,190,55,.15);

    border-radius: 10px;

    font-size: 8px;
}

.mi-payment-banner[data-tone="success"] {
    color: #d8ff72;

    background:
        rgba(252,102,37,.07);

    border-color:
        rgba(252,102,37,.15);
}

.mi-payment-banner[data-tone="error"] {
    color: #ff9c84;

    background:
        rgba(255,90,56,.07);

    border-color:
        rgba(255,90,56,.15);
}


/* recurrente must remain light */

.mi-payment-frame-shell {
    position: relative;

    min-height: 420px;

    margin-top: 14px;

    overflow: hidden;

    background: white;

    border-radius: 14px;
}

.mi-payment-frame,
.mi-payment-frame iframe {
    width: 100%;
    min-height: 420px;
}

.mi-payment-frame iframe {
    display: block;

    border: 0;
    background: white;
}

.mi-payment-loader {
    position: absolute;
    inset: 0;

    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;

    color: #222;
    background: #f4f4f4;
}

.mi-payment-loader strong {
    font-size: 10px;
}

.mi-payment-loader small {
    color: #777;

    font-size: 8px;
}

.mi-spinner {
    width: 28px;
    height: 28px;

    border:
        3px solid #ddd;

    border-top-color:
        var(--orange);

    border-radius: 50%;

    animation:
        mi-spin .7s linear infinite;
}

@keyframes mi-spin {
    to {
        transform:
            rotate(360deg);
    }
}

.mi-payment-result {
    padding:
        30px 8px 18px;

    text-align: center;
}

.mi-result-icon {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    margin:
        0 auto 14px;

    color: #111;
    background: var(--lime);

    border-radius: 15px;

    font-size: 21px;
    font-weight: 900;

    box-shadow:
        0 0 28px rgba(252,102,37,.16);
}

.mi-payment-result p {
    max-width: 410px;

    margin:
        7px auto 20px;

    color: #777c79;

    font-size: 9px;
    line-height: 1.6;
}


/* bank */

.mi-bank-amount {
    margin:
        18px 0 12px;

    padding: 16px;

    background: #202020;

    border-radius: 13px;
}

.mi-bank-amount span {
    display: block;

    color: #777c79;

    font-size: 7px;
}

.mi-bank-amount strong {
    display: block;

    margin-top: 3px;

    color: var(--lime);

    font-family: var(--display);
    font-size: 32px;
}

.mi-bank-info {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px;

    background: #202020;

    border-radius: 13px;
}

.mi-bank-info > span {
    width: 42px;
    height: 38px;

    display: grid;
    place-items: center;

    color: #101400;
    background: var(--lime);

    border-radius: 10px;

    font-size: 7px;
    font-weight: 900;
}

.mi-bank-info strong {
    font-size: 10px;
}

.mi-bank-info p {
    margin: 3px 0 0;

    color: #777c79;

    font-size: 8px;
}


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

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

[data-mi-reveal] {
    opacity: 1;
    transform: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1080px) {

    .mi-checkout-grid {
        grid-template-columns:
            minmax(0,1fr)
            315px;
    }

    .mi-products {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .mi-passes {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


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

@media (max-width: 820px) {

    .mi-container {
        width:
            min(calc(100% - 22px),var(--max));
    }

    .mi-header {
        height: 61px;
    }

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

    .mi-brand-lockup {
        width: 143px;
        height: 40px;
    }

    .mi-brand-orange-diamond {
        width: 28px;
        height: 28px;
    }

    .mi-brand-powered,
    .mi-nav,
    .mi-system-status {
        display: none;
    }

    .mi-mobile-menu {
        display: block;

        margin-left: auto;
    }


    /* compact app hero */

    .mi-hero {
        padding-top: 10px;
        padding-bottom: 8px;
    }

    .mi-hero-inner {
        min-height: 140px;

        display: block;

        padding:
            20px 18px;

        border-radius: 18px;
    }

    .mi-hero h1 {
        max-width: 77%;

        font-size:
            clamp(27px,8vw,36px);

        line-height: 1.01;
    }

    .mi-hero-copy p {
        max-width: 70%;

        margin-top: 8px;

        font-size: 8px;
        line-height: 1.4;
    }

    .mi-hero-art {
        position: absolute;

        right: -2px;
        bottom: -4px;

        width: 124px;
        height: 114px;
    }

    .mi-hero-art::before {
        width: 69px;
        height: 59px;
    }

    .mi-hero-art::after {
        width: 90px;
        height: 18px;

        bottom: 7px;
    }


    .mi-commerce {
        padding-top: 5px;
        padding-bottom: 95px;
    }

    .mi-checkout-grid {
        display: block;
    }

    .mi-recharge {
        padding: 20px 15px;

        border-radius: 18px;
    }

    .mi-checkout-aside {
        position: static;
    }

    .mi-payment-panel {
        margin-top: 12px;

        border-radius: 18px;
    }

    .mi-fields-two {
        grid-template-columns: 1fr;
    }

    .mi-products {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 8px;
    }

    .mi-passes {
        grid-template-columns: 1fr;
    }

    .mi-product-surface {
        min-height: 149px;

        padding: 12px;

        border-radius: 15px;

        transform: none !important;
    }

    .mi-product-qty {
        font-size: 27px;
    }

    .mi-product-bottom > strong {
        font-size: 17px;
    }

    .mi-product-mini-art {
        width: 45px;
        height: 39px;
    }

    .mi-product-mini-art::before {
        width: 37px;
        height: 32px;
    }

    .mi-desktop-cta {
        display: none;
    }


    /* floating app bar */

    .mi-mobile-dock {
        position: fixed;

        left: 9px;
        right: 9px;
        bottom: 9px;

        z-index: 90;

        min-height: 64px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 12px;

        padding:
            8px 9px
            calc(8px + env(safe-area-inset-bottom));

        background:
            rgba(18,18,18,.94);

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

        border-radius: 18px;

        box-shadow:
            0 18px 45px rgba(0,0,0,.50);

        backdrop-filter:
            blur(18px);
    }

    .mi-mobile-dock > div {
        display: flex;
        flex-direction: column;

        padding-left: 6px;
    }

    .mi-mobile-dock > div span {
        color: #747976;

        font-size: 6px;
        font-weight: 800;
    }

    .mi-mobile-dock > div strong {
        color: var(--lime);

        font-family: var(--display);
        font-size: 21px;
        font-weight: 700;
    }

    .mi-mobile-dock .mi-button {
        min-width: 135px;
        min-height: 47px;
    }


    .mi-footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .mi-footer-powered {
        grid-column: 1 / -1;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .mi-container {
        width:
            min(calc(100% - 16px),var(--max));
    }

    .mi-hero-inner {
        min-height: 132px;

        padding:
            18px 15px;
    }

    .mi-hero h1 {
        max-width: 75%;

        font-size: 26px;
    }

    .mi-hero-copy p {
        max-width: 68%;

        font-size: 7.5px;
    }

    .mi-hero-art {
        width: 108px;
        height: 101px;
    }

    .mi-hero-art::before {
        width: 61px;
        height: 52px;
    }

    .mi-section-head h2,
    .mi-products-head h2 {
        font-size: 24px;
    }

    .mi-products-head {
        margin-top: 22px;
    }

    .mi-product-surface {
        min-height: 142px;
    }

    .mi-product-qty {
        font-size: 25px;
    }

    .mi-product-bottom > strong {
        font-size: 16px;
    }

    .mi-footer-grid {
        grid-template-columns: 1fr;

        gap: 28px;
    }

    .mi-footer-powered {
        grid-column: auto;
    }

    .mi-footer-bottom {
        align-items: flex-start;
        flex-direction: column;

        gap: 9px;
    }

    .mi-pending {
        display: block;
    }

    .mi-pending-actions {
        margin-top: 12px;
    }

    .mi-modal-backdrop {
        align-items: end;

        padding: 7px;
    }

    .mi-modal {
        width: 100%;
        max-height: calc(100vh - 14px);

        padding:
            20px 14px;

        border-radius:
            21px 21px 14px 14px;
    }

    .mi-review-summary {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}


/* === MI SIMPLE DIAMOND START === */

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.mi-brand-orange-diamond {
    display: none !important;
}


/* ---------------------------------------------------------
   HERO DIAMOND
   limpio, sólido, glow premium
   --------------------------------------------------------- */

.mi-hero-art::before {
    width: 120px;
    height: 108px;

    transform:
        translate(-50%, -50%);

    clip-path:
        polygon(
            24% 0%,
            76% 0%,
            100% 30%,
            50% 100%,
            0% 30%
        );

    background:
        radial-gradient(
            circle at 30% 18%,
            rgba(255,255,255,.88) 0 8%,
            rgba(255,255,255,.20) 9% 16%,
            transparent 17%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.26) 0%,
            rgba(255,255,255,.08) 18%,
            rgba(255,255,255,0) 36%
        ),
        linear-gradient(
            145deg,
            #dff8ff 0%,
            #92e5ff 20%,
            #52cbff 45%,
            #279de6 68%,
            #126fc5 84%,
            #0a5298 100%
        );

    border-radius: 6px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        inset -10px -16px 20px rgba(0,33,70,.18);

    filter:
        drop-shadow(0 0 12px rgba(89,216,255,.60))
        drop-shadow(0 0 28px rgba(89,216,255,.22))
        drop-shadow(0 18px 24px rgba(0,0,0,.42));

    animation:
        mi-clean-diamond-float 4.8s ease-in-out infinite,
        mi-clean-diamond-pulse 1.9s ease-in-out infinite;
}

.mi-hero-art::after {
    width: 148px;
    height: 26px;

    bottom: 6px;

    background:
        radial-gradient(
            ellipse,
            rgba(89,216,255,.52),
            rgba(89,216,255,.18) 45%,
            transparent 72%
        );

    filter: blur(10px);

    animation:
        mi-clean-diamond-shadow 4.8s ease-in-out infinite,
        mi-clean-diamond-glow 1.9s ease-in-out infinite;
}


/* ---------------------------------------------------------
   PRODUCT DIAMOND
   --------------------------------------------------------- */

.mi-product-mini-art {
    width: 58px;
    height: 50px;
}

.mi-product-mini-art::before {
    width: 42px;
    height: 38px;

    clip-path:
        polygon(
            24% 0%,
            76% 0%,
            100% 30%,
            50% 100%,
            0% 30%
        );

    background:
        radial-gradient(
            circle at 30% 18%,
            rgba(255,255,255,.92) 0 8%,
            rgba(255,255,255,.18) 9% 15%,
            transparent 16%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.28) 0%,
            rgba(255,255,255,.06) 18%,
            rgba(255,255,255,0) 36%
        ),
        linear-gradient(
            145deg,
            #e4f9ff 0%,
            #95e7ff 20%,
            #56d0ff 46%,
            #2aa9ef 68%,
            #1678cb 84%,
            #0a5599 100%
        );

    border-radius: 4px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.46),
        inset -6px -9px 12px rgba(0,33,70,.15);

    filter:
        drop-shadow(0 0 8px rgba(89,216,255,.62))
        drop-shadow(0 0 18px rgba(89,216,255,.22))
        drop-shadow(0 8px 10px rgba(0,0,0,.28));

    animation:
        mi-clean-diamond-float-mini 2.8s ease-in-out infinite,
        mi-clean-diamond-pulse-mini 1.55s ease-in-out infinite;
}

.mi-product-mini-art::after {
    width: 46px;
    height: 18px;

    background:
        radial-gradient(
            ellipse,
            rgba(89,216,255,.58),
            rgba(89,216,255,.20) 46%,
            transparent 74%
        );

    filter: blur(8px);

    animation:
        mi-clean-diamond-glow-mini 1.55s ease-in-out infinite;
}

.mi-product:hover .mi-product-mini-art::before {
    transform:
        translateY(-3px) scale(1.06);
}


/* ---------------------------------------------------------
   ANIMACIONES
   --------------------------------------------------------- */

@keyframes mi-clean-diamond-float {
    0%, 100% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }
    50% {
        transform:
            translate(-50%, -56%)
            scale(1.025);
    }
}

@keyframes mi-clean-diamond-pulse {
    0%, 100% {
        filter:
            drop-shadow(0 0 12px rgba(89,216,255,.60))
            drop-shadow(0 0 28px rgba(89,216,255,.22))
            drop-shadow(0 18px 24px rgba(0,0,0,.42));
    }
    50% {
        filter:
            drop-shadow(0 0 16px rgba(89,216,255,.75))
            drop-shadow(0 0 36px rgba(89,216,255,.32))
            drop-shadow(0 18px 24px rgba(0,0,0,.42));
    }
}

@keyframes mi-clean-diamond-shadow {
    0%, 100% {
        transform:
            translateX(-50%) scale(1);
        opacity: .80;
    }
    50% {
        transform:
            translateX(-50%) scale(.84);
        opacity: 1;
    }
}

@keyframes mi-clean-diamond-glow {
    0%, 100% { opacity: .78; }
    50% { opacity: 1; }
}

@keyframes mi-clean-diamond-float-mini {
    0%, 100% {
        transform:
            translateY(0) scale(1);
    }
    50% {
        transform:
            translateY(-2px) scale(1.03);
    }
}

@keyframes mi-clean-diamond-pulse-mini {
    0%, 100% {
        filter:
            drop-shadow(0 0 8px rgba(89,216,255,.62))
            drop-shadow(0 0 18px rgba(89,216,255,.22))
            drop-shadow(0 8px 10px rgba(0,0,0,.28));
    }
    50% {
        filter:
            drop-shadow(0 0 11px rgba(89,216,255,.78))
            drop-shadow(0 0 24px rgba(89,216,255,.30))
            drop-shadow(0 8px 10px rgba(0,0,0,.28));
    }
}

@keyframes mi-clean-diamond-glow-mini {
    0%, 100% {
        opacity: .82;
        transform:
            translateX(-50%) scale(1);
    }
    50% {
        opacity: 1;
        transform:
            translateX(-50%) scale(1.12);
    }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 820px) {
    .mi-hero-art::before {
        width: 74px;
        height: 66px;
    }

    .mi-hero-art::after {
        width: 92px;
        height: 18px;
    }

    .mi-product-mini-art {
        width: 48px;
        height: 42px;
    }

    .mi-product-mini-art::before {
        width: 35px;
        height: 31px;
    }

    .mi-product-mini-art::after {
        width: 38px;
        height: 14px;
    }
}

/* === MI SIMPLE DIAMOND END === */



/* === MI PRODUCT COMPACT LAYOUT START === */

/*
|--------------------------------------------------------------------------
| PRODUCT TILE COMPACTO
|--------------------------------------------------------------------------
|
| Arriba:
|   POPULAR (solo cuando exista badge)                +
|
| Centro:
|   110     DIAMANTE
|
| Abajo:
|   DIAMANTES                                  Q8.50
|
*/

.mi-product-surface {
    min-height: 134px;

    display: grid;

    grid-template-columns:
        max-content
        58px
        minmax(0, 1fr);

    grid-template-rows:
        27px
        1fr
        auto;

    column-gap: 9px;
    row-gap: 0;

    padding: 13px 14px 12px;
}


/* ---------------------------------------------------------
   PARTE SUPERIOR
   --------------------------------------------------------- */

.mi-product-top {
    grid-column: 1 / -1;
    grid-row: 1;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    margin: 0;
}


/* quitamos completamente el DIAMANTES superior */

.mi-product-top > span {
    display: none !important;
}


/* botón + */

.mi-product-top b {
    position: relative;
    z-index: 5;
}


/* ---------------------------------------------------------
   BADGE POPULAR
   ocupa ahora el lugar del texto eliminado
   --------------------------------------------------------- */

.mi-product-tag {
    position: absolute;

    left: 14px;
    top: 14px;

    right: auto;
    bottom: auto;

    z-index: 6;

    padding: 5px 8px;

    color: white;
    background: var(--orange);

    border-radius: 7px;

    font-size: 6px;
    font-weight: 900;
    line-height: 1;

    box-shadow:
        0 5px 15px rgba(252,102,37,.18);
}


/* ---------------------------------------------------------
   CANTIDAD
   --------------------------------------------------------- */

.mi-product-qty {
    grid-column: 1;
    grid-row: 2;

    align-self: center;

    margin: 0;

    color: white;

    font-size: 33px;
    line-height: .94;
}


/* ---------------------------------------------------------
   DIAMANTE al lado de la cantidad
   --------------------------------------------------------- */

.mi-product-bottom {
    display: contents;
}

.mi-product-mini-art {
    grid-column: 2;
    grid-row: 2;

    align-self: center;
    justify-self: start;

    width: 52px;
    height: 45px;

    margin: 0;
}

.mi-product-mini-art::before {
    width: 40px;
    height: 36px;
}

.mi-product-mini-art::after {
    width: 44px;
    height: 16px;
}


/* ---------------------------------------------------------
   DIAMANTES inferior
   ahora más visible + cyan
   --------------------------------------------------------- */

.mi-product-unit {
    grid-column: 1 / 3;
    grid-row: 3;

    align-self: end;

    margin: 4px 0 0;

    color: #59D8FF;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .055em;

    text-shadow:
        0 0 12px rgba(89,216,255,.18);
}


/* ---------------------------------------------------------
   PRECIO
   --------------------------------------------------------- */

.mi-product-bottom > strong {
    grid-column: 3;
    grid-row: 2 / 4;

    align-self: end;
    justify-self: end;

    padding-bottom: 1px;

    color: var(--lime);

    font-size: 21px;
    line-height: 1;
}


/* ---------------------------------------------------------
   SELECTED
   --------------------------------------------------------- */

.mi-product:has(input:checked)
.mi-product-surface {
    transform:
        perspective(750px)
        rotateX(var(--rx))
        rotateY(var(--ry))
        translateY(-2px);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 820px) {

    .mi-product-surface {
        min-height: 121px;

        grid-template-columns:
            max-content
            46px
            minmax(0,1fr);

        grid-template-rows:
            25px
            1fr
            auto;

        padding:
            11px 11px 10px;
    }

    .mi-product-tag {
        left: 11px;
        top: 11px;

        padding: 4px 6px;

        font-size: 5.5px;
    }

    .mi-product-qty {
        font-size: 27px;
    }

    .mi-product-mini-art {
        width: 42px;
        height: 37px;
    }

    .mi-product-mini-art::before {
        width: 33px;
        height: 29px;
    }

    .mi-product-mini-art::after {
        width: 36px;
        height: 13px;
    }

    .mi-product-unit {
        margin-top: 3px;

        font-size: 7px;
    }

    .mi-product-bottom > strong {
        font-size: 18px;
    }
}


/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .mi-product-surface {
        min-height: 116px;

        grid-template-columns:
            max-content
            41px
            minmax(0,1fr);

        padding:
            10px 10px 9px;
    }

    .mi-product-tag {
        left: 10px;
        top: 10px;
    }

    .mi-product-qty {
        font-size: 25px;
    }

    .mi-product-mini-art {
        width: 37px;
        height: 33px;
    }

    .mi-product-mini-art::before {
        width: 29px;
        height: 26px;
    }

    .mi-product-mini-art::after {
        width: 32px;
        height: 11px;
    }

    .mi-product-unit {
        font-size: 6.5px;
    }

    .mi-product-bottom > strong {
        font-size: 16px;
    }
}

/* === MI PRODUCT COMPACT LAYOUT END === */




/* =========================================================
   ADMIN-MANAGED VISUAL MEDIA
   ========================================================= */

.mi-hero-has-banner {
    background-image:
        linear-gradient(
            90deg,
            rgba(4,4,4,.94) 0%,
            rgba(4,4,4,.82) 33%,
            rgba(4,4,4,.35) 57%,
            rgba(4,4,4,.08) 100%
        ),
        var(--mi-hero-banner);

    background-size:cover;
    background-position:center center;
}

.mi-hero-has-banner::before {
    background:
        linear-gradient(
            90deg,
            rgba(252,102,37,.08),
            transparent
        );
}

.mi-hero-has-banner .mi-hero-art {
    display:none;
}

.mi-payment-type img {
    width:32px;
    max-height:29px;

    object-fit:contain;
}

@media(max-width:820px) {

    .mi-hero-has-banner {
        background-position:68% center;
    }

}


/* =========================================================
   QUITAR FILTRO OSCURO DEL HERO
   ========================================================= */

.mi-hero-has-banner::before,
.mi-hero-has-banner::after {
    display: none !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
}

.mi-hero-has-banner {
    background-image: var(--mi-hero-banner) !important;
}



/* =========================================================
   MI · IDENTIFICACION MINIMAL
   ========================================================= */

.mi-recharge > .mi-section-head:first-child {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px !important;
}

/* Mantener 01 visible */
.mi-recharge > .mi-section-head:first-child .mi-step {
    display: inline-flex !important;
}

/* Quitar IDENTIFICACIÓN */
.mi-recharge > .mi-section-head:first-child .mi-card-kicker {
    display: none !important;
}

/* Cambiar título por ID y Correo */
.mi-recharge > .mi-section-head:first-child h2 {
    margin: 0 !important;
    font-size: 0 !important;
}

.mi-recharge > .mi-section-head:first-child h2::after {
    content: "Ingresa tu ID";
    color: #fff;
    font-family: var(--display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.03em;
}

/* Quitar explicación */
.mi-recharge > .mi-section-head:first-child p {
    display: none !important;
}

/* Campos */
.mi-recharge > .mi-fields:first-of-type {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

/* Etiquetas más visibles */
.mi-recharge > .mi-fields:first-of-type
.mi-field-group > label {
    color: #d5d8d6 !important;
    font-size: 0 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    margin-bottom: 8px !important;
}

.mi-recharge > .mi-fields:first-of-type
.mi-field-group:first-child > label::after {
    content: "Ingrese ID";
    font-size: 10px;
    letter-spacing: .04em;
}

.mi-recharge > .mi-fields:first-of-type
.mi-field-group:nth-child(2) > label::after {
    content: "Correo";
    font-size: 10px;
    letter-spacing: .04em;
}

/* === MI OBSIDIAN ACID START === */

/* =========================================================
   MODO INSANO · OBSIDIAN + ACID
   Gaming commerce / urban tactical
   ========================================================= */

:root {
    --mi-obsidian: #050506;
    --mi-graphite: #101318;
    --mi-gunmetal: #191E24;

    --mi-acid: #FC6625;
    --mi-cyan-new: #59D8FF;

    --mi-white-new: #F4F7F8;
    --mi-steel: #818A93;

    /* aliases del tema anterior */
    --orange: #FC6625;
    --lime: #FC6625;
    --cyan: #59D8FF;

    --mi-orange: #FC6625;
    --mi-lime: #FC6625;
    --mi-cyan: #59D8FF;
}

html,
body {
    background: var(--mi-obsidian) !important;
    color: var(--mi-white-new);
    color-scheme: dark;
}


/* =========================================================
   CANVAS
   Planos diagonales muy sutiles, no cyberpunk
   ========================================================= */

.mp-main,
.mi-commerce {
    background:
        linear-gradient(
            132deg,
            transparent 0 61%,
            rgba(89,216,255,.018) 61% 62%,
            transparent 62%
        ),
        linear-gradient(
            28deg,
            transparent 0 76%,
            rgba(252,102,37,.012) 76% 77%,
            transparent 77%
        ),
        var(--mi-obsidian) !important;
}


/* =========================================================
   GRANDES SUPERFICIES
   Menos SaaS / más hardware gaming
   ========================================================= */

.mp-recharge-card,
.mp-payment-card,
.mi-recharge,
.mi-payment-panel {
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(89,216,255,.025),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #151A20,
            #0D1014
        ) !important;

    border:
        1px solid rgba(244,247,248,.085) !important;

    border-radius: 12px !important;

    box-shadow:
        0 24px 55px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}


/* =========================================================
   NUMEROS DE SECCION
   ========================================================= */

.mp-step,
.mi-step {
    min-width: 29px;
    height: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 6px;

    color: #050506 !important;
    background: var(--mi-acid) !important;

    border: 0 !important;
    border-radius: 4px !important;

    font-weight: 900 !important;
    letter-spacing: .04em;
}

.mp-card-kicker,
.mi-card-kicker {
    color: var(--mi-steel) !important;
}

.mp-section-hint,
.mi-currency {
    color: var(--mi-cyan-new) !important;
}


/* =========================================================
   CAMPOS ID / CORREO
   ========================================================= */

.mp-field-wrap > span,
.mi-field-group > label {
    color: #C8CDD2 !important;
}

.mp-field-row {
    background: #0B0E12 !important;

    border:
        1px solid rgba(244,247,248,.10) !important;

    border-radius: 8px !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.mp-field-row .mp-field {
    background: transparent !important;
    border: 0 !important;
}

.mp-field-wrap > .mp-field,
.mi-field-shell {
    background: #0B0E12 !important;

    border:
        1px solid rgba(244,247,248,.10) !important;

    border-radius: 8px !important;

    color: var(--mi-white-new) !important;
}

.mp-field-row:focus-within,
.mp-field-wrap > .mp-field:focus,
.mi-field-shell:focus-within {
    border-color:
        rgba(252,102,37,.78) !important;

    box-shadow:
        inset 3px 0 0 var(--mi-acid),
        0 0 0 3px rgba(252,102,37,.045) !important;
}

.mp-field::placeholder,
.mi-field-shell input::placeholder {
    color: #505862 !important;
}

.mp-field-badge {
    color: var(--mi-cyan-new) !important;

    background:
        rgba(89,216,255,.055) !important;

    border-color:
        rgba(89,216,255,.15) !important;
}


/* =========================================================
   PRODUCTOS · INVENTORY SLOTS
   ========================================================= */

.mp-product-ui,
.mi-product-surface {
    background:
        radial-gradient(
            circle at 92% 5%,
            rgba(89,216,255,.035),
            transparent 34%
        ),
        linear-gradient(
            150deg,
            #171D23,
            #0D1116
        ) !important;

    border:
        1px solid rgba(244,247,248,.09) !important;

    border-radius: 0 !important;

    clip-path:
        polygon(
            0 0,
            calc(100% - 15px) 0,
            100% 15px,
            100% 100%,
            10px 100%,
            0 calc(100% - 10px)
        );

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}

.mp-product-card:hover .mp-product-ui,
.mi-product:hover .mi-product-surface {
    border-color:
        rgba(89,216,255,.34) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.mp-product-card:has(input:checked)
.mp-product-ui,
.mi-product:has(input:checked)
.mi-product-surface {
    border-color:
        var(--mi-acid) !important;

    background:
        radial-gradient(
            circle at 90% 7%,
            rgba(252,102,37,.075),
            transparent 37%
        ),
        linear-gradient(
            150deg,
            #1A2027,
            #101419
        ) !important;

    box-shadow:
        inset 3px 0 0 var(--mi-acid),
        0 0 0 2px rgba(252,102,37,.035) !important;
}


/* selector */

.mp-product-check,
.mi-product-top b,
.mi-pass-select {
    background: #151A20 !important;

    border:
        1px solid rgba(244,247,248,.12) !important;

    border-radius: 5px !important;
}

.mp-product-card:has(input:checked)
.mp-product-check,
.mi-product:has(input:checked)
.mi-product-top b,
.mi-pass:has(input:checked)
.mi-pass-select {
    color: #090909 !important;

    background:
        var(--mi-acid) !important;

    border-color:
        var(--mi-acid) !important;

    box-shadow:
        0 6px 18px rgba(252,102,37,.12) !important;
}


/* nombre / cantidad */

.mp-product-name,
.mi-product-qty {
    color:
        var(--mi-white-new) !important;
}


/* precio normal = blanco */

.mp-product-price,
.mi-product-bottom > strong,
.mi-pass-copy b {
    color:
        var(--mi-white-new) !important;

    text-shadow: none !important;
}


/* precio seleccionado = acid */

.mp-product-card:has(input:checked)
.mp-product-price,
.mi-product:has(input:checked)
.mi-product-bottom > strong,
.mi-pass:has(input:checked)
.mi-pass-copy b {
    color:
        var(--mi-acid) !important;

    text-shadow:
        0 0 18px rgba(252,102,37,.10) !important;
}


/* diamante */

.mp-product-art img,
.mi-product-mini-art {
    filter:
        drop-shadow(
            0 0 8px rgba(89,216,255,.20)
        );
}


/* popular */

.mp-product-badge:not(.mp-product-badge-ghost),
.mi-product-tag {
    color: #090909 !important;

    background:
        var(--mi-acid) !important;

    border-color:
        var(--mi-acid) !important;

    box-shadow:
        none !important;
}

.mp-product-badge-ghost {
    color: #77818A !important;
    background: transparent !important;
}


/* =========================================================
   PASES
   ========================================================= */

.mi-pass-surface {
    background:
        linear-gradient(
            145deg,
            #151A20,
            #0D1116
        ) !important;

    border-color:
        rgba(244,247,248,.085) !important;
}

.mi-pass:hover
.mi-pass-surface {
    border-color:
        rgba(89,216,255,.30) !important;
}

.mi-pass:has(input:checked)
.mi-pass-surface {
    border-color:
        var(--mi-acid) !important;

    background:
        linear-gradient(
            145deg,
            #192027,
            #101419
        ) !important;
}


/* =========================================================
   METODOS DE PAGO
   ========================================================= */

.mp-payment-ui,
.mi-payment-surface {
    background:
        #0D1116 !important;

    border:
        1px solid rgba(244,247,248,.085) !important;

    border-radius: 0 !important;

    clip-path:
        polygon(
            0 0,
            calc(100% - 9px) 0,
            100% 9px,
            100% 100%,
            7px 100%,
            0 calc(100% - 7px)
        );
}

.mp-payment-option:hover
.mp-payment-ui,
.mi-payment-method:hover
.mi-payment-surface {
    background:
        #12171D !important;

    border-color:
        rgba(89,216,255,.25) !important;
}

.mp-payment-option:has(input:checked)
.mp-payment-ui,
.mi-payment-method:has(input:checked)
.mi-payment-surface {
    background:
        rgba(252,102,37,.045) !important;

    border-color:
        var(--mi-acid) !important;

    box-shadow:
        inset 3px 0 0 var(--mi-acid) !important;
}

.mp-payment-icon,
.mi-payment-type {
    color:
        #DCE3E7 !important;

    background:
        #171D23 !important;

    border-radius:
        6px !important;
}

.mp-payment-radio,
.mi-radio {
    border-color:
        #5F6973 !important;
}

.mp-payment-option:has(input:checked)
.mp-payment-radio,
.mi-payment-method:has(input:checked)
.mi-radio {
    background:
        var(--mi-acid) !important;

    border-color:
        var(--mi-acid) !important;

    box-shadow:
        inset 0 0 0 4px #0D1116 !important;
}


/* =========================================================
   TOTAL
   ========================================================= */

.mp-total-card {
    border-top-color:
        rgba(244,247,248,.09) !important;
}

.mp-total-card strong,
.mp-mobile-dock strong,
.mi-total > strong {
    color:
        var(--mi-acid) !important;

    text-shadow:
        0 0 24px rgba(252,102,37,.09) !important;
}


/* =========================================================
   CTA
   ========================================================= */

.mp-button-primary,
.mi-button-primary {
    color:
        #090909 !important;

    background:
        linear-gradient(
            105deg,
            #FF7A3D,
            var(--mi-acid)
        ) !important;

    border: 0 !important;

    border-radius:
        0 !important;

    clip-path:
        polygon(
            0 0,
            calc(100% - 11px) 0,
            100% 11px,
            100% 100%,
            11px 100%,
            0 calc(100% - 11px)
        );

    box-shadow:
        0 12px 28px rgba(252,102,37,.10) !important;
}

.mp-button-primary:hover:not(:disabled),
.mi-button-primary:hover:not(:disabled) {
    filter:
        brightness(1.06);

    box-shadow:
        0 15px 34px rgba(252,102,37,.16) !important;
}


/* =========================================================
   SEGURIDAD / ONLINE
   ========================================================= */

.mp-secure-note > span,
.mi-security > span {
    color:
        var(--mi-acid) !important;
}

.mi-v13-online i {
    background:
        var(--mi-acid) !important;

    box-shadow:
        0 0 10px rgba(252,102,37,.35) !important;
}


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

.mp-mobile-dock,
.mi-mobile-dock {
    background:
        rgba(13,17,22,.95) !important;

    border-color:
        rgba(244,247,248,.10) !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.55) !important;
}


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

.mi-footer,
.mp-footer {
    background:
        #07090C !important;

    border-top-color:
        rgba(244,247,248,.07) !important;
}


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

@media (max-width: 820px) {

    .mp-recharge-card,
    .mp-payment-card,
    .mi-recharge,
    .mi-payment-panel {
        border-radius:
            10px !important;
    }

    .mp-product-ui,
    .mi-product-surface {
        clip-path:
            polygon(
                0 0,
                calc(100% - 11px) 0,
                100% 11px,
                100% 100%,
                8px 100%,
                0 calc(100% - 8px)
            );
    }

}

/* === MI OBSIDIAN ACID END === */

/* === MI HERO GAMING TYPE START === */

.mi-hero h1,
.mp-hero h1 {
    font-family: "Rajdhani", sans-serif !important;

    font-weight: 700 !important;

    line-height: .91 !important;

    letter-spacing: -.035em !important;

    font-feature-settings:
        "kern" 1,
        "liga" 1;

    text-wrap: balance;
}

.mi-hero h1 strong,
.mp-hero h1 strong,
.mi-hero h1 span,
.mp-hero h1 span {
    font-family: inherit !important;
    font-weight: 700 !important;
}

/* Le da un poco más de presencia al título sin hacerlo gigante */
@media (min-width: 821px) {
    .mi-hero h1,
    .mp-hero h1 {
        font-size:
            clamp(39px, 3.5vw, 57px) !important;
    }
}

@media (max-width: 820px) {
    .mi-hero h1,
    .mp-hero h1 {
        line-height: .94 !important;
        letter-spacing: -.025em !important;
    }
}

/* === MI HERO GAMING TYPE END === */

/* === MI HERO FRAME START === */

.mi-hero-has-banner {
    background-position:
        var(--mi-hero-x, 50%)
        var(--mi-hero-y, 50%) !important;

    background-size:
        cover !important;
}

@media (max-width: 820px) {

    .mi-hero-has-banner {
        background-position:
            var(
                --mi-hero-mobile-x,
                var(--mi-hero-x, 50%)
            )
            var(
                --mi-hero-mobile-y,
                var(--mi-hero-y, 50%)
            ) !important;
    }

}

/* === MI HERO FRAME END === */


/* === MI ORANGE BRAND FINAL START === */

:root {
    --mi-acid: #FC6625;

    --orange: #FC6625;
    --mi-orange: #FC6625;

    --lime: #FC6625;
    --mi-lime: #FC6625;

    --mi-brand-accent: #FC6625;

    --cyan: #59D8FF;
    --mi-cyan: #59D8FF;
}

/* === MI ORANGE BRAND FINAL END === */


/* === MI SILVER STONE SURFACES START === */

/* =========================================================
   SILVER / STONE SURFACES
   Quitamos el tinte azul de los cuadros
   ========================================================= */

:root {
    --mi-silver-1: #2D3137;
    --mi-silver-2: #23272D;
    --mi-silver-3: #1A1D22;
    --mi-stone-1:  #14171B;
    --mi-stone-2:  #101216;
    --mi-stroke-soft: rgba(255,255,255,.10);
    --mi-stroke-strong: rgba(255,255,255,.14);
}


/* tarjetas grandes */
.mp-recharge-card,
.mp-payment-card,
.mi-recharge,
.mi-payment-panel {
    background:
        linear-gradient(
            145deg,
            var(--mi-silver-1) 0%,
            var(--mi-silver-2) 20%,
            var(--mi-silver-3) 52%,
            var(--mi-stone-1) 78%,
            var(--mi-stone-2) 100%
        ) !important;

    border:
        1px solid var(--mi-stroke-soft) !important;

    box-shadow:
        0 24px 55px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}


/* productos */
.mp-product-ui,
.mi-product-surface {
    background:
        linear-gradient(
            145deg,
            #30343A 0%,
            #272B31 18%,
            #1F2328 46%,
            #171A1F 72%,
            #111318 100%
        ) !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03) !important;
}

.mp-product-card:hover .mp-product-ui,
.mi-product:hover .mi-product-surface {
    background:
        linear-gradient(
            145deg,
            #353A41 0%,
            #2B3036 18%,
            #21262C 46%,
            #191D22 72%,
            #121419 100%
        ) !important;

    border-color:
        rgba(255,255,255,.18) !important;
}

.mp-product-card:has(input:checked) .mp-product-ui,
.mi-product:has(input:checked) .mi-product-surface {
    background:
        linear-gradient(
            145deg,
            #373C43 0%,
            #2D3238 18%,
            #23282E 46%,
            #1B1F24 72%,
            #13151A 100%
        ) !important;

    border-color:
        #FC6625 !important;

    box-shadow:
        inset 3px 0 0 #FC6625,
        0 0 0 2px rgba(252,102,37,.05) !important;
}


/* métodos de pago */
.mp-payment-ui,
.mi-payment-surface {
    background:
        linear-gradient(
            145deg,
            #2B2F35 0%,
            #22262B 28%,
            #191C21 70%,
            #121419 100%
        ) !important;

    border:
        1px solid rgba(255,255,255,.10) !important;
}

.mp-payment-option:hover .mp-payment-ui,
.mi-payment-method:hover .mi-payment-surface {
    background:
        linear-gradient(
            145deg,
            #32363D 0%,
            #272C32 28%,
            #1C2025 70%,
            #14171B 100%
        ) !important;

    border-color:
        rgba(255,255,255,.16) !important;
}

.mp-payment-option:has(input:checked) .mp-payment-ui,
.mi-payment-method:has(input:checked) .mi-payment-surface {
    background:
        linear-gradient(
            145deg,
            #343940 0%,
            #2A2F35 28%,
            #20252A 70%,
            #15181D 100%
        ) !important;

    border-color:
        #FC6625 !important;

    box-shadow:
        inset 3px 0 0 #FC6625 !important;
}


/* pases */
.mi-pass-surface {
    background:
        linear-gradient(
            145deg,
            #2D3137 0%,
            #24282D 25%,
            #1B1F24 68%,
            #121418 100%
        ) !important;

    border-color:
        rgba(255,255,255,.09) !important;
}

.mi-pass:hover .mi-pass-surface {
    border-color:
        rgba(255,255,255,.15) !important;
}

.mi-pass:has(input:checked) .mi-pass-surface {
    border-color:
        #FC6625 !important;

    box-shadow:
        inset 3px 0 0 #FC6625 !important;
}


/* campos */
.mp-field-row,
.mp-field-wrap > .mp-field,
.mi-field-shell {
    background:
        linear-gradient(
            180deg,
            #1C2025 0%,
            #14181C 100%
        ) !important;

    border:
        1px solid rgba(255,255,255,.11) !important;
}

.mp-field-row:focus-within,
.mp-field-wrap > .mp-field:focus,
.mi-field-shell:focus-within {
    border-color:
        rgba(252,102,37,.80) !important;

    box-shadow:
        inset 3px 0 0 #FC6625,
        0 0 0 3px rgba(252,102,37,.05) !important;
}


/* icon boxes internos */
.mp-payment-icon,
.mi-payment-type,
.mp-product-check,
.mi-product-top b,
.mi-pass-select {
    background:
        linear-gradient(
            145deg,
            #2A2E34 0%,
            #20242A 100%
        ) !important;

    border:
        1px solid rgba(255,255,255,.10) !important;
}


/* total / dock */
.mp-mobile-dock,
.mi-mobile-dock {
    background:
        linear-gradient(
            145deg,
            rgba(34,38,44,.96),
            rgba(16,18,22,.96)
        ) !important;
}

/* === MI SILVER STONE SURFACES END === */


/* =========================================================
   MODO INSANO — NEW COMMERCE UI V5
   2026-09-06
   ========================================================= */

:root {
    --mi-v5-orange: #ff5a0a;
    --mi-v5-orange-hover: #e94d00;

    --mi-v5-black: #0a0a0b;
    --mi-v5-dark: #151517;
    --mi-v5-dark-2: #202023;

    --mi-v5-white: #ffffff;
    --mi-v5-surface: #f5f5f4;
    --mi-v5-surface-2: #ececea;

    --mi-v5-gray: #858589;
    --mi-v5-border: rgba(10, 10, 11, .10);
}


/* ---------- GLOBAL ---------- */

html {
    scroll-behavior: smooth;
}

body {
    background:
        linear-gradient(
            180deg,
            #eeeeec 0,
            #f5f5f3 520px,
            #f7f7f6 100%
        ) !important;

    color: var(--mi-v5-black);
}

.mi-app {
    background: transparent !important;
}


/* ---------- CONTAINER ---------- */

.mi-container {
    width: min(1380px, calc(100% - 64px));
    margin-inline: auto;
}


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

.mi-header {
    position: relative !important;
    z-index: 100;

    background:
        rgba(10, 10, 11, .98) !important;

    border-bottom:
        1px solid rgba(255, 255, 255, .08) !important;

    box-shadow: none !important;
}

.mi-header-inner {
    min-height: 72px !important;
}

.mi-nav {
    gap: 34px !important;
}

.mi-nav a {
    color:
        rgba(255, 255, 255, .66) !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    letter-spacing: .08em !important;
    text-transform: uppercase;

    transition:
        color .2s ease;
}

.mi-nav a:hover {
    color: #fff !important;
}

.mi-system-status {
    border:
        1px solid rgba(255, 255, 255, .10) !important;

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

    color:
        rgba(255, 255, 255, .72) !important;

    border-radius: 999px !important;
}

.mi-system-status i {
    background:
        var(--mi-v5-orange) !important;
}


/* =========================================================
   HERO V5
   ========================================================= */

.mi-hero-v5 {
    position: relative;

    padding:
        24px 0 0 !important;

    min-height: 0 !important;

    overflow: visible !important;

    background:
        transparent !important;
}

.mi-hero-v5-shell {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, .87fr)
        minmax(460px, 1.13fr);

    min-height: 390px;

    overflow: hidden;

    background:
        #f2f2f0;

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

    border-radius:
        24px 24px 10px 10px;

    box-shadow:
        0 18px 60px rgba(0, 0, 0, .07);
}


/* ---------- COPY ---------- */

.mi-hero-v5-copy {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        56px 34px 56px 64px;
}

.mi-hero-v5-meta {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

    color:
        #717175;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .17em;
}

.mi-hero-v5-meta i {
    width: 24px;
    height: 1px;

    background:
        rgba(0, 0, 0, .18);
}

.mi-hero-v5-dot {
    width: 7px;
    height: 7px;

    background:
        var(--mi-v5-orange);

    border-radius: 50%;
}

.mi-hero-v5-copy h1 {
    max-width: 650px;

    margin: 0;

    color:
        var(--mi-v5-black);

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(46px, 4.6vw, 74px);

    font-weight: 700;

    line-height: .92;

    letter-spacing: -.065em;
}

.mi-hero-v5-copy h1 span {
    color:
        var(--mi-v5-orange);
}

.mi-hero-v5-copy p {
    max-width: 490px;

    margin:
        24px 0 0;

    color:
        #67676b;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.65;
}

.mi-hero-v5-actions {
    display: flex;
    align-items: center;

    gap: 24px;

    margin-top: 30px;
}

.mi-hero-v5-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 26px;

    min-height: 48px;

    padding:
        0 22px;

    background:
        var(--mi-v5-orange);

    color:
        #fff !important;

    border-radius:
        9px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .08em;

    text-decoration: none;

    transition:
        transform .18s ease,
        background .18s ease;
}

.mi-hero-v5-primary:hover {
    background:
        var(--mi-v5-orange-hover);

    transform:
        translateY(-2px);
}

.mi-hero-v5-primary span {
    font-size: 17px;
    line-height: 1;
}

.mi-hero-v5-note {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.mi-hero-v5-note strong {
    color:
        #29292b;

    font-size: 9px;

    letter-spacing: .12em;
}

.mi-hero-v5-note small {
    color:
        #98989b;

    font-size: 9px;

    letter-spacing: .08em;
}


/* ---------- VISUAL ---------- */

.mi-hero-v5-visual {
    position: relative;

    min-height: 390px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #29292c 0%,
            #151517 52%,
            #080809 100%
        );
}

.mi-hero-v5-visual::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(242, 242, 240, .95) 0%,
            rgba(242, 242, 240, .28) 11%,
            transparent 32%
        );

    pointer-events: none;
}

.mi-hero-v5-visual.has-banner::after {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        var(--mi-hero-banner);

    background-size:
        cover;

    background-position:
        center 32%;

    background-repeat:
        no-repeat;

    opacity:
        .92;

    filter:
        saturate(.72)
        contrast(1.03);

    transform:
        scale(1.015);
}

.mi-hero-v5-visual-grid {
    position: absolute;
    inset: 0;

    z-index: 2;

    opacity: .09;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .14) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .14) 1px,
            transparent 1px
        );

    background-size:
        48px 48px;

    mask-image:
        linear-gradient(
            to left,
            #000,
            transparent
        );
}

.mi-hero-v5-label {
    position: absolute;
    z-index: 5;

    top: 24px;
    right: 24px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        8px 10px;

    background:
        rgba(10, 10, 11, .64);

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

    border-radius:
        7px;

    backdrop-filter:
        blur(10px);
}

.mi-hero-v5-label span {
    color:
        var(--mi-v5-orange);

    font-size: 9px;
    font-weight: 800;
}

.mi-hero-v5-label strong {
    color:
        #fff;

    font-size: 9px;

    letter-spacing: .10em;
}

.mi-hero-v5-diamond {
    position: absolute;

    z-index: 5;

    left: 25px;
    bottom: 22px;

    display: grid;
    place-items: center;

    width: 64px;
    height: 64px;

    background:
        rgba(10, 10, 11, .72);

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

    border-radius:
        12px;

    backdrop-filter:
        blur(14px);
}

.mi-hero-v5-diamond img {
    width: 43px;
    height: 43px;

    object-fit: contain;
}

.mi-hero-v5-corner {
    position: absolute;

    z-index: 5;

    right: 24px;
    bottom: 24px;

    color:
        rgba(255, 255, 255, .52);

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .18em;
}


/* ---------- HERO STRIP ---------- */

.mi-hero-v5-strip {
    position: relative;
    z-index: 7;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 32px;

    min-height: 62px;

    padding:
        0 20px;

    margin-top:
        8px;

    background:
        #111113;

    border-radius:
        10px;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .10);
}

.mi-hero-v5-strip-main {
    display: flex;
    align-items: center;

    gap: 9px;

    white-space: nowrap;
}

.mi-hero-v5-strip-main span {
    padding:
        6px 8px;

    background:
        var(--mi-v5-orange);

    color:
        #fff;

    border-radius:
        5px;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .08em;
}

.mi-hero-v5-strip-main strong {
    color:
        #fff;

    font-size: 10px;

    letter-spacing: .08em;
}

.mi-hero-v5-strip-items {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 30px;
}

.mi-hero-v5-strip-items span {
    display: flex;
    align-items: center;

    gap: 7px;

    color:
        rgba(255, 255, 255, .48);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .08em;
}

.mi-hero-v5-strip-items i {
    width: 4px;
    height: 4px;

    background:
        var(--mi-v5-orange);

    border-radius:
        50%;
}

.mi-hero-v5-strip > a {
    display: flex;
    align-items: center;

    gap: 12px;

    color:
        rgba(255, 255, 255, .70);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .08em;

    text-decoration: none;
}

.mi-hero-v5-strip > a span {
    color:
        var(--mi-v5-orange);

    font-size: 14px;
}


/* =========================================================
   COMMERCE AREA
   ========================================================= */

.mi-commerce {
    position: relative;

    margin-top:
        34px !important;

    padding-bottom:
        70px;
}


/* ---------- PRODUCT HEADER ---------- */

.mi-products-head {
    border-bottom:
        1px solid var(--mi-v5-border) !important;
}

.mi-products-head h2 {
    color:
        var(--mi-v5-black) !important;
}

.mi-currency {
    background:
        #111113 !important;

    color:
        #fff !important;

    border-radius:
        7px !important;

    border:
        0 !important;
}


/* =========================================================
   DIAMOND CARDS
   ========================================================= */

.mi-products {
    gap:
        12px !important;
}

.mi-product-surface {
    background:
        #fff !important;

    border:
        1px solid rgba(0, 0, 0, .09) !important;

    border-radius:
        13px !important;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .035) !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}

.mi-product:hover
.mi-product-surface {
    transform:
        translateY(-2px);

    border-color:
        rgba(255, 90, 10, .42) !important;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .07) !important;
}

.mi-product input:checked
+ .mi-product-surface {
    border-color:
        var(--mi-v5-orange) !important;

    box-shadow:
        0 0 0 2px
        rgba(255, 90, 10, .10) !important;
}

.mi-product-top {
    color:
        #9a9a9d !important;
}

.mi-product-top b {
    color:
        var(--mi-v5-orange) !important;
}

.mi-product-qty {
    color:
        #111113 !important;
}

.mi-product-unit {
    color:
        #939397 !important;
}

.mi-product-bottom strong {
    color:
        #111113 !important;
}

.mi-product-tag {
    background:
        var(--mi-v5-orange) !important;

    color:
        #fff !important;

    border:
        0 !important;
}


/* =========================================================
   PASSES
   ========================================================= */

.mi-pass-surface {
    background:
        #fff !important;

    border:
        1px solid rgba(0, 0, 0, .09) !important;

    border-radius:
        13px !important;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .035) !important;
}

.mi-pass input:checked
+ .mi-pass-surface {
    border-color:
        var(--mi-v5-orange) !important;

    box-shadow:
        0 0 0 2px
        rgba(255, 90, 10, .10) !important;
}


/* =========================================================
   GENERAL CARDS / INPUT AREAS
   ========================================================= */

.mi-commerce input[type="text"],
.mi-commerce input[type="email"],
.mi-commerce input[type="number"] {
    border-radius:
        10px !important;
}

.mi-button:not(.mi-button-secondary) {
    background:
        var(--mi-v5-orange) !important;

    border-color:
        var(--mi-v5-orange) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .mi-container {
        width:
            min(100% - 36px, 1380px);
    }

    .mi-hero-v5-shell {
        grid-template-columns:
            1fr 1fr;

        min-height:
            360px;
    }

    .mi-hero-v5-copy {
        padding:
            46px 28px 46px 40px;
    }

    .mi-hero-v5-visual {
        min-height:
            360px;
    }

    .mi-hero-v5-strip-items {
        gap:
            16px;
    }

}


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

@media (max-width: 760px) {

    .mi-container {
        width:
            calc(100% - 24px);
    }


    /* HEADER */

    .mi-header-inner {
        min-height:
            62px !important;
    }

    .mi-nav,
    .mi-system-status {
        display:
            none !important;
    }


    /* HERO */

    .mi-hero-v5 {
        padding-top:
            12px !important;
    }

    .mi-hero-v5-shell {
        display: grid;

        grid-template-columns:
            1fr;

        min-height:
            0;

        border-radius:
            17px 17px 8px 8px;
    }

    .mi-hero-v5-copy {
        order: 2;

        padding:
            24px 20px 26px;

        background:
            #f3f3f1;
    }

    .mi-hero-v5-meta {
        margin-bottom:
            13px;

        font-size:
            8px;
    }

    .mi-hero-v5-copy h1 {
        font-size:
            clamp(38px, 12.5vw, 54px);

        line-height:
            .91;
    }

    .mi-hero-v5-copy p {
        max-width:
            92%;

        margin-top:
            15px;

        font-size:
            12px;

        line-height:
            1.55;
    }

    .mi-hero-v5-actions {
        align-items:
            stretch;

        gap:
            13px;

        margin-top:
            20px;
    }

    .mi-hero-v5-primary {
        flex: 1;

        min-height:
            44px;

        padding:
            0 15px;

        gap:
            12px;
    }

    .mi-hero-v5-note {
        justify-content:
            center;
    }


    /* MOBILE HERO IMAGE */

    .mi-hero-v5-visual {
        order: 1;

        min-height:
            180px;

        background:
            #111113;
    }

    .mi-hero-v5-visual.has-banner::after {
        background-position:
            center 28%;

        opacity:
            .95;
    }

    .mi-hero-v5-visual::before {
        background:
            linear-gradient(
                0deg,
                rgba(243, 243, 241, .22),
                transparent 24%
            );
    }

    .mi-hero-v5-label {
        top:
            12px;

        right:
            12px;
    }

    .mi-hero-v5-diamond {
        left:
            12px;

        bottom:
            12px;

        width:
            48px;

        height:
            48px;
    }

    .mi-hero-v5-diamond img {
        width:
            33px;

        height:
            33px;
    }

    .mi-hero-v5-corner {
        display:
            none;
    }


    /* STRIP */

    .mi-hero-v5-strip {
        display: flex;

        min-height:
            49px;

        padding:
            0 13px;

        gap:
            12px;

        overflow:
            hidden;
    }

    .mi-hero-v5-strip-main {
        flex:
            1;
    }

    .mi-hero-v5-strip-main strong {
        font-size:
            8px;
    }

    .mi-hero-v5-strip-items {
        display:
            none;
    }

    .mi-hero-v5-strip > a {
        font-size:
            8px;

        white-space:
            nowrap;
    }


    /* COMMERCE */

    .mi-commerce {
        margin-top:
            22px !important;

        padding-bottom:
            45px;
    }


    /* CARDS */

    .mi-products {
        gap:
            9px !important;
    }

    .mi-product-surface,
    .mi-pass-surface {
        border-radius:
            11px !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 410px) {

    .mi-container {
        width:
            calc(100% - 18px);
    }

    .mi-hero-v5-visual {
        min-height:
            162px;
    }

    .mi-hero-v5-copy {
        padding:
            21px 17px 23px;
    }

    .mi-hero-v5-copy h1 {
        font-size:
            39px;
    }

    .mi-hero-v5-copy p {
        max-width:
            100%;
    }

    .mi-hero-v5-note {
        display:
            none;
    }

    .mi-hero-v5-primary {
        width:
            100%;
    }

    .mi-hero-v5-strip-main strong {
        display:
            none;
    }

}



/* ============================================================
   MODO INSANO — V5.1 HERO HARD RESET
   ============================================================ */

.mi-app main .mi-hero.mi-hero-v5 {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 24px 0 0 !important;

    background: #eeeeec !important;

    overflow: visible !important;
}


/* ============================================================
   HERO PRINCIPAL
   ============================================================ */

.mi-app main .mi-hero-v5
.mi-container.mi-hero-v5-shell {

    position: relative !important;

    display: grid !important;

    grid-template-columns:
        minmax(390px, 43%)
        minmax(0, 57%) !important;

    width: min(1380px, calc(100% - 64px)) !important;
    max-width: 1380px !important;

    height: 390px !important;
    min-height: 390px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background: #f2f2f0 !important;

    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 22px 22px 10px 10px !important;

    box-shadow:
        0 20px 60px rgba(0,0,0,.08) !important;

    overflow: hidden !important;

    isolation: isolate !important;
}


/* ============================================================
   COPY IZQUIERDA
   ============================================================ */

.mi-app main .mi-hero-v5
.mi-hero-v5-copy {

    position: relative !important;
    inset: auto !important;

    z-index: 10 !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;

    width: auto !important;
    height: 100% !important;

    margin: 0 !important;

    padding:
        48px 36px 48px 54px !important;

    background: #f2f2f0 !important;

    transform: none !important;
}

.mi-app main .mi-hero-v5
.mi-hero-v5-meta {

    position: static !important;

    display: flex !important;
    align-items: center !important;

    gap: 9px !important;

    width: auto !important;

    margin:
        0 0 18px !important;

    padding: 0 !important;

    color: #77777b !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    letter-spacing: .15em !important;

    transform: none !important;
}

.mi-app main .mi-hero-v5
.mi-hero-v5-copy h1 {

    position: static !important;

    width: auto !important;
    max-width: 600px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #111113 !important;

    font-family:
        "Space Grotesk",
        sans-serif !important;

    font-size:
        clamp(48px, 4.3vw, 72px) !important;

    line-height: .91 !important;

    letter-spacing: -.065em !important;

    text-align: left !important;

    transform: none !important;
}

.mi-app main .mi-hero-v5
.mi-hero-v5-copy h1 span {

    display: inline !important;

    color: #ff5a0a !important;
}

.mi-app main .mi-hero-v5
.mi-hero-v5-copy p {

    position: static !important;

    width: auto !important;
    max-width: 480px !important;

    margin:
        22px 0 0 !important;

    padding: 0 !important;

    color: #66666b !important;

    font-size: 14px !important;
    line-height: 1.6 !important;

    text-align: left !important;

    transform: none !important;
}


/* ============================================================
   CTA
   ============================================================ */

.mi-app main .mi-hero-v5
.mi-hero-v5-actions {

    position: static !important;

    display: flex !important;
    align-items: center !important;

    gap: 20px !important;

    margin:
        28px 0 0 !important;

    padding: 0 !important;

    transform: none !important;
}

.mi-app main .mi-hero-v5
.mi-hero-v5-primary {

    position: static !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 24px !important;

    width: auto !important;
    min-width: 170px !important;

    height: 48px !important;
    min-height: 48px !important;

    margin: 0 !important;

    padding:
        0 20px !important;

    background: #ff5a0a !important;

    color: #fff !important;

    border: 0 !important;
    border-radius: 8px !important;

    font-size: 10px !important;
    font-weight: 800 !important;

    letter-spacing: .08em !important;

    text-decoration: none !important;

    transform: none !important;
}

.mi-app main .mi-hero-v5
.mi-hero-v5-note {

    position: static !important;

    display: flex !important;
    flex-direction: column !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

.mi-app main .mi-hero-v5
.mi-hero-v5-note strong {

    color: #202023 !important;

    font-size: 9px !important;
}

.mi-app main .mi-hero-v5
.mi-hero-v5-note small {

    color: #99999d !important;

    font-size: 8px !important;
}


/* ============================================================
   VISUAL DERECHA
   ============================================================ */

.mi-app main .mi-hero-v5
.mi-hero-v5-visual {

    position: relative !important;
    inset: auto !important;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    height: 390px !important;
    min-height: 390px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            135deg,
            #39393e 0%,
            #222226 45%,
            #0d0d0f 100%
        ) !important;

    transform: none !important;

    clip-path: none !important;
}


/* transición entre blanco y oscuro */

.mi-app main .mi-hero-v5
.mi-hero-v5-visual::before {

    content: "" !important;

    position: absolute !important;

    z-index: 4 !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background:
        linear-gradient(
            90deg,
            #f2f2f0 0%,
            rgba(242,242,240,.82) 6%,
            rgba(242,242,240,.18) 18%,
            transparent 35%
        ) !important;

    pointer-events: none !important;
}


/* banner real */

.mi-app main .mi-hero-v5
.mi-hero-v5-visual.has-banner::after {

    content: "" !important;

    position: absolute !important;

    z-index: 2 !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    background-image:
        var(--mi-hero-banner) !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center center !important;

    background-size:
        cover !important;

    opacity: .95 !important;

    transform: none !important;

    filter:
        saturate(.80)
        contrast(1.04) !important;
}


/* que NINGUNA imagen vieja pueda hacerse gigante */

.mi-app main .mi-hero-v5 img {

    position: static !important;

    max-width: 100% !important;
    max-height: 100% !important;

    transform: none !important;
}


/* ============================================================
   ELEMENTOS DECORATIVOS
   ============================================================ */

.mi-app main .mi-hero-v5
.mi-hero-v5-visual-grid {

    position: absolute !important;

    z-index: 3 !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    opacity: .08 !important;
}

.mi-app main .mi-hero-v5
.mi-hero-v5-label {

    position: absolute !important;

    z-index: 10 !important;

    top: 20px !important;
    right: 20px !important;

    left: auto !important;
    bottom: auto !important;

    width: auto !important;

    transform: none !important;
}

.mi-app main .mi-hero-v5
.mi-hero-v5-diamond {

    position: absolute !important;

    z-index: 10 !important;

    left: 22px !important;
    bottom: 22px !important;

    top: auto !important;
    right: auto !important;

    width: 58px !important;
    height: 58px !important;

    padding: 8px !important;

    background:
        rgba(10,10,11,.70) !important;

    border:
        1px solid rgba(255,255,255,.15) !important;

    border-radius: 11px !important;

    transform: none !important;
}

.mi-app main .mi-hero-v5
.mi-hero-v5-diamond img {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
}

.mi-app main .mi-hero-v5
.mi-hero-v5-corner {

    position: absolute !important;

    z-index: 10 !important;

    right: 22px !important;
    bottom: 22px !important;

    top: auto !important;
    left: auto !important;

    width: auto !important;

    transform: none !important;
}


/* ============================================================
   STRIP
   ============================================================ */

.mi-app main .mi-hero-v5
.mi-container.mi-hero-v5-strip {

    position: relative !important;

    z-index: 20 !important;

    display: grid !important;

    grid-template-columns:
        auto 1fr auto !important;

    align-items: center !important;

    gap: 28px !important;

    width: min(1380px, calc(100% - 64px)) !important;
    max-width: 1380px !important;

    height: 60px !important;
    min-height: 60px !important;

    margin:
        8px auto 0 !important;

    padding:
        0 20px !important;

    background:
        #111113 !important;

    border: 0 !important;
    border-radius: 9px !important;

    overflow: hidden !important;

    transform: none !important;
}


/* ============================================================
   AREA DE COMPRA
   ============================================================ */

.mi-app main {
    background:
        #eeeeec !important;
}

.mi-app main
.mi-commerce {

    position: relative !important;

    width:
        min(1380px, calc(100% - 64px)) !important;

    max-width:
        1380px !important;

    margin:
        30px auto 0 !important;

    padding-bottom:
        70px !important;

    background:
        transparent !important;
}


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

@media (max-width: 760px) {

    .mi-app main
    .mi-hero.mi-hero-v5 {

        padding:
            10px 0 0 !important;
    }


    .mi-app main
    .mi-hero-v5
    .mi-container.mi-hero-v5-shell {

        display: flex !important;
        flex-direction: column !important;

        width:
            calc(100% - 20px) !important;

        height: auto !important;
        min-height: 0 !important;

        border-radius:
            16px 16px 8px 8px !important;
    }


    /* IMAGEN ARRIBA */

    .mi-app main
    .mi-hero-v5
    .mi-hero-v5-visual {

        order: 1 !important;

        width: 100% !important;

        height: 185px !important;
        min-height: 185px !important;
    }


    .mi-app main
    .mi-hero-v5
    .mi-hero-v5-visual.has-banner::after {

        background-size:
            cover !important;

        background-position:
            center center !important;
    }


    /* COPY ABAJO */

    .mi-app main
    .mi-hero-v5
    .mi-hero-v5-copy {

        order: 2 !important;

        width: 100% !important;
        height: auto !important;

        padding:
            23px 18px 25px !important;
    }


    .mi-app main
    .mi-hero-v5
    .mi-hero-v5-copy h1 {

        font-size:
            clamp(39px, 12vw, 52px) !important;

        line-height:
            .91 !important;
    }


    .mi-app main
    .mi-hero-v5
    .mi-hero-v5-copy p {

        margin-top:
            14px !important;

        font-size:
            12px !important;
    }


    .mi-app main
    .mi-hero-v5
    .mi-hero-v5-actions {

        width: 100% !important;

        margin-top:
            20px !important;
    }


    .mi-app main
    .mi-hero-v5
    .mi-hero-v5-primary {

        flex: 1 !important;
    }


    .mi-app main
    .mi-hero-v5
    .mi-container.mi-hero-v5-strip {

        display: flex !important;

        width:
            calc(100% - 20px) !important;

        height: 50px !important;
        min-height: 50px !important;

        margin-top:
            7px !important;

        padding:
            0 13px !important;
    }


    .mi-app main
    .mi-hero-v5
    .mi-hero-v5-strip-items {

        display:
            none !important;
    }


    .mi-app main
    .mi-commerce {

        width:
            calc(100% - 20px) !important;

        margin-top:
            20px !important;
    }

}


@media (max-width: 420px) {

    .mi-app main
    .mi-hero-v5
    .mi-hero-v5-visual {

        height: 165px !important;
        min-height: 165px !important;
    }


    .mi-app main
    .mi-hero-v5
    .mi-hero-v5-copy h1 {

        font-size:
            39px !important;
    }


    .mi-app main
    .mi-hero-v5
    .mi-hero-v5-note {

        display:
            none !important;
    }

}



/* ============================================================
   MODO INSANO V6
   SIMPLE TOP-UP / SHARK + CHARCOAL + ORANGE + LIME
   ============================================================ */

:root {
    --v6-bg: #24282d;
    --v6-bg-deep: #1d2024;

    --v6-panel: #2d3238;
    --v6-panel-2: #333940;
    --v6-card: #383e45;
    --v6-field: #22262b;

    --v6-border: rgba(255,255,255,.08);

    --v6-white: #f5f6f7;
    --v6-muted: #969da5;

    --v6-orange: #ff5a0a;
    --v6-orange-dark: #e94c00;

    --v6-lime: #b9ff45;
}


/* ============================================================
   BASE
   ============================================================ */

html,
body,
.mi-app,
.mi-app main {
    background: var(--v6-bg) !important;
}

body {
    color: var(--v6-white) !important;
}


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

.mi-header {
    background: #111214 !important;

    border-bottom:
        1px solid rgba(255,90,10,.25) !important;
}

.mi-header-inner {
    min-height: 66px !important;
}


/* ============================================================
   HERO V6
   ============================================================ */

.mi-app main .mi-hero.mi-hero-v6 {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 18px 0 0 !important;

    background: transparent !important;

    overflow: visible !important;
}


.mi-app main
.mi-hero-v6
.mi-hero-v6-shell {

    position: relative !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, .95fr) !important;

    width:
        min(1380px, calc(100% - 64px)) !important;

    max-width: 1380px !important;

    height: 245px !important;
    min-height: 245px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: var(--v6-panel) !important;

    border:
        1px solid var(--v6-border) !important;

    border-radius: 18px !important;

    box-shadow:
        0 16px 38px rgba(0,0,0,.14) !important;
}


/* COPY */

.mi-app main
.mi-hero-v6
.mi-hero-v6-copy {

    position: relative !important;

    z-index: 4 !important;

    display: flex !important;
    flex-direction: column !important;

    justify-content: center !important;
    align-items: flex-start !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    padding:
        34px 44px !important;

    background:
        linear-gradient(
            110deg,
            #30353b 0%,
            #30353b 74%,
            rgba(48,53,59,.25) 100%
        ) !important;
}


.mi-app main
.mi-hero-v6
.mi-hero-v6-copy h1 {

    position: static !important;

    max-width: 600px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--v6-white) !important;

    font-family:
        "Space Grotesk",
        sans-serif !important;

    font-size:
        clamp(37px, 3.3vw, 54px) !important;

    line-height: .97 !important;

    letter-spacing: -.055em !important;

    text-align: left !important;

    transform: none !important;
}


.mi-app main
.mi-hero-v6
.mi-hero-v6-copy h1 span {

    display: block !important;

    margin-top: 3px !important;

    color: var(--v6-orange) !important;
}


.mi-app main
.mi-hero-v6
.mi-hero-v6-copy p {

    position: static !important;

    max-width: 480px !important;

    margin:
        18px 0 0 !important;

    padding: 0 !important;

    color: #b6bbc1 !important;

    font-size: 14px !important;
    font-weight: 500 !important;

    line-height: 1.5 !important;

    text-align: left !important;

    transform: none !important;
}


/* ARTWORK */

.mi-app main
.mi-hero-v6
.mi-hero-v6-art {

    position: relative !important;

    width: 100% !important;
    height: 245px !important;

    min-height: 245px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background:
        #17191c !important;
}


.mi-app main
.mi-hero-v6
.mi-hero-v6-art.has-banner::before {

    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    background-image:
        var(--mi-hero-banner) !important;

    background-repeat:
        no-repeat !important;

    background-size:
        cover !important;

    background-position:
        center 34% !important;

    filter:
        saturate(.68)
        contrast(1.04)
        brightness(.88) !important;

    transform:
        scale(1.01) !important;
}


.mi-app main
.mi-hero-v6
.mi-hero-v6-art::after {

    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    background:
        linear-gradient(
            90deg,
            var(--v6-panel) 0%,
            rgba(45,50,56,.72) 10%,
            rgba(45,50,56,.10) 30%,
            transparent 52%
        ) !important;

    pointer-events: none !important;
}


/* ============================================================
   COMMERCE
   ============================================================ */

.mi-app main
.mi-commerce {

    width:
        min(1380px, calc(100% - 64px)) !important;

    max-width: 1380px !important;

    margin:
        22px auto 0 !important;

    padding-bottom:
        70px !important;

    background: transparent !important;
}


/* ============================================================
   SECCIONES / PANELES
   ============================================================ */

/*
   Conservamos la estructura actual y oscurecemos
   las superficies principales.
*/

.mi-commerce section,
.mi-commerce article {
    border-color:
        var(--v6-border) !important;
}


/* encabezados */

.mi-products-head {
    border-color:
        var(--v6-border) !important;
}

.mi-products-head h2,
.mi-products-head strong,
.mi-subsection strong {
    color:
        var(--v6-white) !important;
}

.mi-products-head small,
.mi-subsection small {
    color:
        var(--v6-muted) !important;
}


/* moneda */

.mi-currency {
    background:
        #1b1e22 !important;

    color:
        var(--v6-lime) !important;

    border:
        1px solid rgba(185,255,69,.20) !important;

    border-radius:
        7px !important;
}


/* ============================================================
   INPUTS
   ============================================================ */

.mi-commerce input[type="text"],
.mi-commerce input[type="email"],
.mi-commerce input[type="number"],
.mi-commerce select,
.mi-commerce textarea {

    background:
        var(--v6-field) !important;

    color:
        var(--v6-white) !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    box-shadow:
        none !important;
}

.mi-commerce input::placeholder,
.mi-commerce textarea::placeholder {

    color:
        #707780 !important;
}


/* focus */

.mi-commerce input:focus,
.mi-commerce select:focus,
.mi-commerce textarea:focus {

    border-color:
        rgba(255,90,10,.75) !important;

    box-shadow:
        0 0 0 3px
        rgba(255,90,10,.09) !important;
}


/* ============================================================
   PRODUCTOS
   ============================================================ */

.mi-products {
    gap: 11px !important;
}


.mi-product-surface {

    background:
        var(--v6-card) !important;

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

    border-radius:
        12px !important;

    box-shadow:
        0 5px 14px rgba(0,0,0,.10) !important;
}


.mi-product:hover
.mi-product-surface {

    border-color:
        rgba(255,90,10,.55) !important;

    transform:
        translateY(-2px) !important;
}


.mi-product input:checked
+ .mi-product-surface {

    border-color:
        var(--v6-orange) !important;

    box-shadow:
        0 0 0 2px
        rgba(255,90,10,.12) !important;
}


/* textos */

.mi-product-top {
    color:
        #a6abb1 !important;
}

.mi-product-top b {
    color:
        var(--v6-orange) !important;
}


.mi-product-qty {

    color:
        var(--v6-white) !important;
}


.mi-product-unit {

    color:
        #9ca2a9 !important;
}


/* PRECIO = toque lima */

.mi-product-bottom strong {

    color:
        var(--v6-lime) !important;

    text-shadow:
        0 0 18px
        rgba(185,255,69,.08);
}


.mi-product-tag {

    background:
        var(--v6-orange) !important;

    color:
        #fff !important;

    border:
        0 !important;
}


/* ============================================================
   PASES
   ============================================================ */

.mi-pass-surface {

    background:
        var(--v6-card) !important;

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

    border-radius:
        12px !important;

    box-shadow:
        0 5px 14px rgba(0,0,0,.10) !important;
}


.mi-pass input:checked
+ .mi-pass-surface {

    border-color:
        var(--v6-orange) !important;

    box-shadow:
        0 0 0 2px
        rgba(255,90,10,.12) !important;
}


.mi-pass-copy strong {

    color:
        var(--v6-white) !important;
}


.mi-pass-copy small {

    color:
        var(--v6-lime) !important;
}


/* ============================================================
   BOTONES
   ============================================================ */

.mi-button:not(.mi-button-secondary) {

    background:
        var(--v6-orange) !important;

    color:
        #fff !important;

    border-color:
        var(--v6-orange) !important;
}


.mi-button:not(.mi-button-secondary):hover {

    background:
        var(--v6-orange-dark) !important;

    border-color:
        var(--v6-orange-dark) !important;
}


/* ============================================================
   PEQUEÑOS ACENTOS LIMA
   ============================================================ */

.mi-system-status i {

    background:
        var(--v6-lime) !important;

    box-shadow:
        0 0 10px
        rgba(185,255,69,.38) !important;
}


.mi-error {

    border-left-color:
        var(--v6-orange) !important;
}


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

@media (max-width: 760px) {

    .mi-header-inner {
        min-height:
            58px !important;
    }


    /* HERO MUCHO MÁS PEQUEÑO */

    .mi-app main
    .mi-hero.mi-hero-v6 {

        padding:
            10px 0 0 !important;
    }


    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-shell {

        display: grid !important;

        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(120px, .75fr) !important;

        width:
            calc(100% - 20px) !important;

        height:
            168px !important;

        min-height:
            168px !important;

        border-radius:
            14px !important;
    }


    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-copy {

        order:
            1 !important;

        width:
            100% !important;

        height:
            168px !important;

        padding:
            20px 6px 20px 18px !important;

        background:
            var(--v6-panel) !important;
    }


    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-copy h1 {

        font-size:
            clamp(27px, 8.2vw, 34px) !important;

        line-height:
            .96 !important;

        letter-spacing:
            -.05em !important;
    }


    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-copy p {

        max-width:
            220px !important;

        margin-top:
            12px !important;

        font-size:
            10.5px !important;

        line-height:
            1.4 !important;
    }


    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-art {

        order:
            2 !important;

        width:
            100% !important;

        height:
            168px !important;

        min-height:
            168px !important;
    }


    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-art.has-banner::before {

        background-size:
            cover !important;

        background-position:
            61% center !important;
    }


    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-art::after {

        background:
            linear-gradient(
                90deg,
                var(--v6-panel) 0%,
                rgba(45,50,56,.58) 14%,
                transparent 48%
            ) !important;
    }


    /* COMPRA MÁS CERCA DEL HERO */

    .mi-app main
    .mi-commerce {

        width:
            calc(100% - 20px) !important;

        margin-top:
            12px !important;

        padding-bottom:
            92px !important;
    }


    .mi-products {

        gap:
            8px !important;
    }


    .mi-product-surface,
    .mi-pass-surface {

        border-radius:
            10px !important;
    }

}


/* móvil pequeño */

@media (max-width: 400px) {

    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-shell {

        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(105px, .65fr) !important;

        height:
            154px !important;

        min-height:
            154px !important;
    }


    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-copy {

        height:
            154px !important;

        padding:
            17px 4px 17px 15px !important;
    }


    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-art {

        height:
            154px !important;

        min-height:
            154px !important;
    }


    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-copy h1 {

        font-size:
            27px !important;
    }


    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-copy p {

        font-size:
            9.5px !important;
    }

}



/* ============================================================
   MODO INSANO V6.1 — SIMPLE TOP UP
   ============================================================ */


/* ============================================================
   TIPOGRAFIA
   Space Grotesk = títulos
   Manrope = UI, productos, números y precios
   ============================================================ */

body,
button,
input,
select,
textarea,
.mi-product,
.mi-pass,
.mi-payment-method {
    font-family:
        "Manrope",
        sans-serif !important;
}

h1,
h2,
h3,
.mi-products-head h2,
.mi-subsection strong {
    font-family:
        "Space Grotesk",
        sans-serif !important;
}

.mi-product-qty,
.mi-product-bottom strong,
.mi-pass-copy strong,
.mi-pass-copy small,
.mi-currency {
    font-family:
        "Manrope",
        sans-serif !important;

    font-variant-numeric:
        tabular-nums !important;

    letter-spacing:
        -.025em !important;
}


/* ============================================================
   SUPERFICIES MÁS PLANAS
   ============================================================ */

.mi-product-surface,
.mi-pass-surface {
    background:
        #343a40 !important;

    background-image:
        none !important;

    box-shadow:
        none !important;

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

.mi-product:hover .mi-product-surface,
.mi-pass:hover .mi-pass-surface {
    background:
        #383e44 !important;
}


/* Precio lima = acento, no protagonista */

.mi-product-bottom strong,
.mi-pass-copy small {
    color:
        #b9ff45 !important;

    text-shadow:
        none !important;
}


/* ============================================================
   EMAIL EN RESUMEN
   ============================================================ */

.mi-review-email {
    margin:
        18px 0 16px;

    padding:
        14px;

    background:
        #24292e;

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

    border-radius:
        10px;
}

.mi-review-email label {
    display:
        block;

    margin-bottom:
        4px;

    color:
        #f6f7f8;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        13px;

    font-weight:
        700;
}

.mi-review-email p {
    margin:
        0 0 10px;

    color:
        #858c94;

    font-size:
        10px;

    line-height:
        1.45;
}

.mi-review-email input {
    display:
        block;

    width:
        100%;

    min-height:
        44px;

    padding:
        0 13px;

    background:
        #191d21 !important;

    color:
        #f7f7f7 !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    border-radius:
        8px;

    outline:
        none;

    font-family:
        "Manrope",
        sans-serif !important;

    font-size:
        13px;
}

.mi-review-email input:focus {
    border-color:
        #ff5a0a !important;

    box-shadow:
        0 0 0 3px
        rgba(255,90,10,.10) !important;
}

.mi-review-email-error {
    margin-top:
        7px;

    color:
        #ff8050;

    font-size:
        10px;
}


/* ============================================================
   HERO MÁS SECUNDARIO EN DESKTOP
   ============================================================ */

.mi-app main
.mi-hero-v6
.mi-hero-v6-shell {
    height:
        205px !important;

    min-height:
        205px !important;
}

.mi-app main
.mi-hero-v6
.mi-hero-v6-copy {
    padding:
        28px 40px !important;
}

.mi-app main
.mi-hero-v6
.mi-hero-v6-copy h1 {
    font-size:
        clamp(33px, 2.9vw, 47px) !important;
}

.mi-app main
.mi-hero-v6
.mi-hero-v6-copy p {
    margin-top:
        13px !important;

    font-size:
        12px !important;
}

.mi-app main
.mi-hero-v6
.mi-hero-v6-art {
    height:
        205px !important;

    min-height:
        205px !important;
}


/* ============================================================
   COMERCIO MÁS JUNTO
   ============================================================ */

.mi-app main
.mi-commerce {
    margin-top:
        14px !important;
}

.mi-subsection small {
    color:
        #80878e !important;
}


/* ============================================================
   MOBILE — EXPERIENCIA DE RECARGA RÁPIDA
   ============================================================ */

@media (max-width: 760px) {

    /*
     * HERO:
     * Ya no parece anuncio.
     */

    .mi-app main
    .mi-hero.mi-hero-v6 {
        padding-top:
            7px !important;
    }

    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-shell {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(105px, .75fr) !important;

        width:
            calc(100% - 12px) !important;

        height:
            122px !important;

        min-height:
            122px !important;

        border-radius:
            10px !important;
    }

    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-copy {
        height:
            122px !important;

        padding:
            13px 3px 13px 14px !important;
    }

    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-copy h1 {
        max-width:
            195px !important;

        font-size:
            clamp(22px, 6.8vw, 28px) !important;

        line-height:
            .98 !important;

        letter-spacing:
            -.045em !important;
    }

    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-copy p {
        max-width:
            180px !important;

        margin-top:
            8px !important;

        font-size:
            8.5px !important;

        line-height:
            1.35 !important;
    }

    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-art {
        height:
            122px !important;

        min-height:
            122px !important;
    }

    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-art.has-banner::before {
        background-position:
            62% center !important;
    }


    /*
     * Compra casi pegada al Hero.
     */

    .mi-app main
    .mi-commerce {
        width:
            calc(100% - 12px) !important;

        margin-top:
            8px !important;

        padding-bottom:
            88px !important;
    }


    /*
     * Títulos.
     */

    .mi-products-head h2 {
        font-size:
            21px !important;

        letter-spacing:
            -.04em !important;
    }

    .mi-subsection {
        margin-top:
            16px !important;
    }

    .mi-subsection small {
        display:
            none !important;
    }


    /* ========================================================
       DIAMANTES — UNA SOLA COLUMNA HORIZONTAL
       ======================================================== */

    .mi-products {
        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:
            7px !important;

        width:
            100% !important;
    }

    .mi-product {
        display:
            block !important;

        width:
            100% !important;

        min-width:
            0 !important;

        margin:
            0 !important;
    }

    .mi-product-surface {
        position:
            relative !important;

        display:
            grid !important;

        grid-template-columns:
            50px minmax(0, 1fr) auto !important;

        grid-template-rows:
            auto auto !important;

        align-items:
            center !important;

        column-gap:
            10px !important;

        width:
            100% !important;

        min-height:
            72px !important;

        padding:
            9px 12px !important;

        border-radius:
            9px !important;

        overflow:
            hidden !important;
    }

    /*
     * "DIAMANTES +" superior ya no hace falta.
     */

    .mi-product-top {
        display:
            none !important;
    }

    /*
     * Dejar que imagen/precio entren al grid principal.
     */

    .mi-product-bottom {
        display:
            contents !important;
    }

    .mi-product-mini-art {
        grid-column:
            1 !important;

        grid-row:
            1 / 3 !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            46px !important;

        height:
            46px !important;

        margin:
            0 !important;

        background:
            rgba(255,255,255,.035) !important;

        border-radius:
            8px !important;
    }

    .mi-product-mini-art img {
        width:
            37px !important;

        height:
            37px !important;

        object-fit:
            contain !important;
    }

    .mi-product-qty {
        grid-column:
            2 !important;

        grid-row:
            1 !important;

        align-self:
            end !important;

        margin:
            0 !important;

        color:
            #f5f6f7 !important;

        font-size:
            18px !important;

        font-weight:
            800 !important;

        line-height:
            1 !important;
    }

    .mi-product-unit {
        grid-column:
            2 !important;

        grid-row:
            2 !important;

        align-self:
            start !important;

        margin:
            4px 0 0 !important;

        color:
            #7f878f !important;

        font-family:
            "Manrope",
            sans-serif !important;

        font-size:
            8px !important;

        font-weight:
            700 !important;

        letter-spacing:
            .08em !important;
    }

    .mi-product-bottom > strong {
        grid-column:
            3 !important;

        grid-row:
            1 / 3 !important;

        align-self:
            center !important;

        justify-self:
            end !important;

        margin:
            0 !important;

        padding-left:
            8px !important;

        color:
            #b9ff45 !important;

        font-family:
            "Manrope",
            sans-serif !important;

        font-size:
            16px !important;

        font-weight:
            800 !important;

        white-space:
            nowrap !important;
    }

    .mi-product-tag {
        top:
            5px !important;

        right:
            7px !important;

        left:
            auto !important;

        bottom:
            auto !important;

        padding:
            3px 5px !important;

        font-family:
            "Manrope",
            sans-serif !important;

        font-size:
            6px !important;

        border-radius:
            4px !important;
    }


    /* ========================================================
       PASES — TAMBIÉN HORIZONTALES
       ======================================================== */

    .mi-passes {
        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:
            7px !important;
    }

    .mi-pass {
        width:
            100% !important;

        min-width:
            0 !important;
    }

    .mi-pass-surface {
        display:
            grid !important;

        grid-template-columns:
            76px minmax(0, 1fr) !important;

        align-items:
            center !important;

        gap:
            11px !important;

        width:
            100% !important;

        min-height:
            76px !important;

        padding:
            8px 11px !important;

        border-radius:
            9px !important;
    }

    .mi-pass-art {
        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            72px !important;

        height:
            56px !important;

        margin:
            0 !important;

        overflow:
            hidden !important;

        background:
            #252a2f !important;

        border-radius:
            7px !important;
    }

    .mi-pass-art img {
        display:
            block !important;

        width:
            100% !important;

        height:
            100% !important;

        object-fit:
            contain !important;
    }

    .mi-pass-copy {
        min-width:
            0 !important;

        margin:
            0 !important;
    }

    .mi-pass-copy strong {
        color:
            #f3f4f5 !important;

        font-size:
            13px !important;

        font-weight:
            700 !important;

        line-height:
            1.25 !important;
    }

    .mi-pass-copy small {
        display:
            block !important;

        margin-top:
            5px !important;

        color:
            #b9ff45 !important;

        font-size:
            14px !important;

        font-weight:
            800 !important;
    }


    /*
     * El resumen también compacto.
     */

    .mi-review-email {
        margin:
            12px 0 !important;

        padding:
            12px !important;

        border-radius:
            8px !important;
    }

    .mi-review-email input {
        min-height:
            42px !important;
    }

}


/* ============================================================
   MOBILE MUY PEQUEÑO
   ============================================================ */

@media (max-width: 390px) {

    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-shell {
        height:
            114px !important;

        min-height:
            114px !important;
    }

    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-copy,
    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-art {
        height:
            114px !important;

        min-height:
            114px !important;
    }

    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-copy h1 {
        font-size:
            22px !important;
    }

    .mi-product-surface {
        min-height:
            68px !important;
    }

}



/* ============================================================
   MODO INSANO V7 — SIMPLE COMMERCE FLOW
   ============================================================ */

:root {
    --v7-bg: #24292e;
    --v7-panel: #20252a;
    --v7-card: #343a40;
    --v7-card-hover: #3a4148;
    --v7-field: #191d21;

    --v7-border: rgba(255,255,255,.085);
    --v7-orange: #ff5a0a;
    --v7-lime: #b9ff45;

    --v7-white: #f5f6f7;
    --v7-muted: #858d95;
}


/* ============================================================
   TITULOS
   ============================================================ */

.mi-products-head h2,
.mi-payment-panel h2 {
    margin: 0 !important;

    font-family:
        "Space Grotesk",
        sans-serif !important;

    font-weight: 700 !important;

    letter-spacing:
        -.045em !important;

    color:
        var(--v7-white) !important;
}


.mi-payment-intro {
    display: none !important;
}


/* ============================================================
   PRODUCTOS UNIFICADOS
   ============================================================ */

.mi-products-unified {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 9px !important;

    width: 100% !important;
}


.mi-product-unified {
    display: block !important;

    width: 100% !important;

    min-width: 0 !important;
}


.mi-product-unified > input {
    position: absolute !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


.mi-product-unified
.mi-product-surface {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
        58px minmax(0, 1fr) auto !important;

    grid-template-rows:
        1fr !important;

    align-items: center !important;

    gap: 11px !important;

    width: 100% !important;

    min-height: 88px !important;

    margin: 0 !important;

    padding:
        11px 13px !important;

    background:
        var(--v7-card) !important;

    background-image:
        none !important;

    border:
        1px solid var(--v7-border) !important;

    border-radius:
        10px !important;

    box-shadow:
        none !important;

    clip-path:
        none !important;

    cursor: pointer !important;

    overflow: hidden !important;

    transition:
        border-color .16s ease,
        background .16s ease,
        transform .16s ease !important;
}


.mi-product-unified:hover
.mi-product-surface {
    background:
        var(--v7-card-hover) !important;

    border-color:
        rgba(255,90,10,.38) !important;
}


.mi-product-unified
input:checked
+ .mi-product-surface {
    background:
        #3a4046 !important;

    border-color:
        var(--v7-orange) !important;

    box-shadow:
        0 0 0 1px
        rgba(255,90,10,.16) !important;
}


/* imagen individual */

.mi-product-art-slot {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 56px !important;
    height: 56px !important;

    margin: 0 !important;

    overflow: hidden !important;

    background:
        rgba(0,0,0,.14) !important;

    border:
        1px solid rgba(255,255,255,.045) !important;

    border-radius:
        9px !important;
}


.mi-product-art-slot img {
    display: block !important;

    width: 50px !important;
    height: 50px !important;

    max-width: 100% !important;

    object-fit: contain !important;

    margin: 0 !important;

    filter: none !important;

    transform: none !important;
}


/* información */

.mi-product-info {
    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    min-width: 0 !important;

    gap: 4px !important;
}


.mi-product-title {
    display: block !important;

    margin: 0 !important;

    color:
        var(--v7-white) !important;

    font-family:
        "Manrope",
        sans-serif !important;

    font-size: 16px !important;

    font-weight: 800 !important;

    line-height: 1.15 !important;

    letter-spacing:
        -.025em !important;
}


.mi-product-meta {
    color:
        var(--v7-muted) !important;

    font-family:
        "Manrope",
        sans-serif !important;

    font-size: 7px !important;

    font-weight: 700 !important;

    letter-spacing:
        .09em !important;
}


.mi-product-price {
    align-self: center !important;

    justify-self: end !important;

    margin: 0 !important;

    padding-left: 7px !important;

    color:
        var(--v7-lime) !important;

    font-family:
        "Manrope",
        sans-serif !important;

    font-size: 16px !important;

    font-weight: 800 !important;

    font-variant-numeric:
        tabular-nums !important;

    white-space: nowrap !important;

    letter-spacing:
        -.03em !important;
}


/* badge */

.mi-product-unified
.mi-product-tag {
    position: absolute !important;

    top: 6px !important;
    right: 6px !important;

    left: auto !important;
    bottom: auto !important;

    padding:
        3px 5px !important;

    background:
        var(--v7-orange) !important;

    color: #fff !important;

    border-radius:
        4px !important;

    font-family:
        "Manrope",
        sans-serif !important;

    font-size:
        5.5px !important;

    font-weight:
        800 !important;
}


/* estilos antiguos que ya no necesitamos */

.mi-passes,
.mi-subsection {
    display: none !important;
}


/* ============================================================
   METODO DE PAGO
   ============================================================ */

.mi-payment-panel {
    background:
        var(--v7-panel) !important;

    border:
        1px solid var(--v7-border) !important;

    border-radius:
        12px !important;

    box-shadow:
        none !important;
}


.mi-payment-panel::after {
    display: none !important;
}


.mi-payment-methods {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap:
        8px !important;

    margin-top:
        15px !important;
}


.mi-payment-method {
    width: 100% !important;

    min-width: 0 !important;
}


.mi-payment-method > input {
    position:
        absolute !important;

    opacity:
        0 !important;
}


.mi-payment-surface {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
        36px minmax(0, 1fr) 16px !important;

    align-items:
        center !important;

    gap:
        8px !important;

    width:
        100% !important;

    min-height:
        70px !important;

    padding:
        9px !important;

    background:
        var(--v7-card) !important;

    background-image:
        none !important;

    border:
        1px solid var(--v7-border) !important;

    border-radius:
        9px !important;

    box-shadow:
        none !important;

    clip-path:
        none !important;

    transition:
        background .16s ease,
        border-color .16s ease !important;
}


.mi-payment-method:hover
.mi-payment-surface {
    background:
        var(--v7-card-hover) !important;

    border-color:
        rgba(255,90,10,.35) !important;
}


.mi-payment-method:has(input:checked)
.mi-payment-surface {
    background:
        #3a4046 !important;

    border-color:
        var(--v7-orange) !important;

    box-shadow:
        0 0 0 1px
        rgba(255,90,10,.14) !important;
}


.mi-payment-type {
    display: flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        36px !important;

    height:
        36px !important;

    margin:
        0 !important;

    background:
        #252a2f !important;

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

    border-radius:
        7px !important;
}


.mi-payment-type img {
    max-width:
        26px !important;

    max-height:
        26px !important;

    object-fit:
        contain !important;
}


.mi-payment-copy {
    display:
        block !important;

    min-width:
        0 !important;
}


.mi-payment-copy strong {
    display:
        block !important;

    color:
        var(--v7-white) !important;

    font-family:
        "Manrope",
        sans-serif !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    line-height:
        1.2 !important;
}


.mi-payment-copy small {
    display:
        none !important;
}


/* ============================================================
   TOTAL
   ============================================================ */

.mi-total {
    margin-top:
        14px !important;

    padding-top:
        13px !important;

    border-top:
        1px solid var(--v7-border) !important;
}


.mi-total > strong {
    color:
        var(--v7-lime) !important;

    font-family:
        "Manrope",
        sans-serif !important;

    font-variant-numeric:
        tabular-nums !important;
}


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

@media (max-width: 760px) {

    /*
     * Productos: una sola columna horizontal.
     */

    .mi-products-unified {
        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:
            6px !important;
    }


    .mi-product-unified
    .mi-product-surface {
        grid-template-columns:
            52px minmax(0, 1fr) auto !important;

        min-height:
            68px !important;

        gap:
            9px !important;

        padding:
            7px 9px !important;

        border-radius:
            8px !important;
    }


    .mi-product-art-slot {
        width:
            50px !important;

        height:
            50px !important;

        border-radius:
            7px !important;
    }


    .mi-product-art-slot img {
        width:
            44px !important;

        height:
            44px !important;
    }


    .mi-product-title {
        font-size:
            14px !important;
    }


    .mi-product-meta {
        font-size:
            6.5px !important;
    }


    .mi-product-price {
        font-size:
            14px !important;
    }


    /*
     * Métodos de pago: dos columnas también en teléfono.
     */

    .mi-payment-panel {
        padding:
            14px !important;

        border-radius:
            10px !important;
    }


    .mi-payment-panel h2 {
        font-size:
            20px !important;
    }


    .mi-payment-methods {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:
            7px !important;

        margin-top:
            10px !important;
    }


    .mi-payment-surface {
        grid-template-columns:
            32px minmax(0, 1fr) 13px !important;

        min-height:
            62px !important;

        gap:
            6px !important;

        padding:
            7px !important;

        border-radius:
            8px !important;
    }


    .mi-payment-type {
        width:
            31px !important;

        height:
            31px !important;
    }


    .mi-payment-type img {
        max-width:
            23px !important;

        max-height:
            23px !important;
    }


    .mi-payment-copy strong {
        font-size:
            8.5px !important;
    }


    /*
     * Dock flotante.
     *
     * Cuando el total real del checkout entra en pantalla,
     * el dock flotante se retira.
     */

    .mi-mobile-dock {
        transition:
            opacity .20s ease,
            transform .20s ease !important;
    }


    .mi-mobile-dock.is-parked {
        opacity:
            0 !important;

        transform:
            translateY(115%) !important;

        pointer-events:
            none !important;
    }


    .mi-footer {
        padding-bottom:
            24px !important;
    }

}


/* ============================================================
   MOVIL ESTRECHO
   ============================================================ */

@media (max-width: 380px) {

    .mi-payment-surface {
        grid-template-columns:
            29px minmax(0, 1fr) 11px !important;

        padding:
            6px !important;
    }


    .mi-payment-type {
        width:
            28px !important;

        height:
            28px !important;
    }


    .mi-payment-copy strong {
        font-size:
            8px !important;
    }

}



/* ============================================================
   MODO INSANO V7.1 — HERO SOFT BLEND + ARCTIC GRAY SURFACES
   ============================================================ */

:root {
    --v71-surface-main: #3f464e;
    --v71-surface-soft: #49515a;
    --v71-surface-card: #535c66;
    --v71-surface-card-hover: #5b6570;
    --v71-border: rgba(255,255,255,.09);
}


/* ============================================================
   HERO — más vivo y con mezcla más suave
   ============================================================ */

.mi-app main
.mi-hero-v6
.mi-hero-v6-shell {
    background: var(--v71-surface-main) !important;

    border: 1px solid rgba(255,255,255,.10) !important;
}


/* lado izquierdo */
.mi-app main
.mi-hero-v6
.mi-hero-v6-copy {
    background:
        linear-gradient(
            90deg,
            rgba(63,70,78,.98) 0%,
            rgba(63,70,78,.96) 38%,
            rgba(63,70,78,.88) 62%,
            rgba(63,70,78,.58) 82%,
            rgba(63,70,78,.18) 100%
        ) !important;
}


/* lado derecho base */
.mi-app main
.mi-hero-v6
.mi-hero-v6-art {
    background: #454c54 !important;
}


/* QUITAR filtro oscuro fuerte de la imagen */
.mi-app main
.mi-hero-v6
.mi-hero-v6-art.has-banner::before {
    filter:
        saturate(.98)
        contrast(1.02)
        brightness(1.03) !important;

    transform: scale(1.01) !important;
}


/* degradado mucho más largo y sutil */
.mi-app main
.mi-hero-v6
.mi-hero-v6-art::after {
    background:
        linear-gradient(
            90deg,
            rgba(63,70,78,.96) 0%,
            rgba(63,70,78,.90) 7%,
            rgba(63,70,78,.78) 14%,
            rgba(63,70,78,.58) 22%,
            rgba(63,70,78,.36) 31%,
            rgba(63,70,78,.18) 42%,
            rgba(63,70,78,.08) 52%,
            rgba(63,70,78,.03) 61%,
            transparent 74%
        ) !important;
}


/* ============================================================
   PANELES GRANDES — mismo color ambos
   ============================================================ */

.mi-recharge-card,
.mi-payment-panel {
    background:
        linear-gradient(
            180deg,
            rgba(63,70,78,.98) 0%,
            rgba(58,65,73,.98) 100%
        ) !important;

    border:
        1px solid var(--v71-border) !important;
}


/* quitar sensación de panel distinto a la derecha */
.mi-payment-panel::before,
.mi-payment-panel::after {
    display: none !important;
}


/* ============================================================
   TARJETAS INTERNAS — un poco más claras
   ============================================================ */

.mi-product-unified
.mi-product-surface,
.mi-payment-surface {
    background: var(--v71-surface-card) !important;

    border:
        1px solid rgba(255,255,255,.10) !important;
}

.mi-product-unified:hover
.mi-product-surface,
.mi-payment-method:hover
.mi-payment-surface {
    background: var(--v71-surface-card-hover) !important;
}

.mi-product-unified
input:checked
+ .mi-product-surface,
.mi-payment-method:has(input:checked)
.mi-payment-surface {
    background: #606a74 !important;
}


/* ============================================================
   MOBILE — mezcla más suave también
   ============================================================ */

@media (max-width: 760px) {

    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-copy {
        background:
            linear-gradient(
                90deg,
                rgba(63,70,78,.98) 0%,
                rgba(63,70,78,.94) 52%,
                rgba(63,70,78,.62) 80%,
                rgba(63,70,78,.18) 100%
            ) !important;
    }

    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-art::after {
        background:
            linear-gradient(
                90deg,
                rgba(63,70,78,.94) 0%,
                rgba(63,70,78,.72) 18%,
                rgba(63,70,78,.36) 34%,
                rgba(63,70,78,.12) 48%,
                transparent 64%
            ) !important;
    }

}



/* ============================================================
   MODO INSANO V7.2
   INVERTED SURFACES + NATURAL HERO BLEND
   ============================================================ */

:root {

    /*
     * Panel general:
     * Arctic / Steel gray.
     */
    --v72-section: #3c434a;

    /*
     * Tarjetas interiores:
     * mismo oscuro que antes dominaba
     * los paneles generales.
     */
    --v72-item: #20252a;
    --v72-item-hover: #252b30;
    --v72-item-selected: #292f35;

    --v72-border: rgba(255,255,255,.085);

    /*
     * Hero.
     */
    --v72-hero-base: #353b41;
}


/* ============================================================
   PANELES GENERALES
   ID + PRODUCTOS + METODO DE PAGO
   ============================================================ */

/*
 * El bloque izquierdo completo.
 */
.mi-recharge-card {
    background:
        var(--v72-section) !important;

    background-image:
        none !important;

    border:
        1px solid var(--v72-border) !important;

    box-shadow:
        none !important;
}


/*
 * El bloque derecho de pago.
 */
.mi-payment-panel {
    background:
        var(--v72-section) !important;

    background-image:
        none !important;

    border:
        1px solid var(--v72-border) !important;

    box-shadow:
        none !important;
}


/*
 * Evitar overlays antiguos en el panel derecho.
 */
.mi-payment-panel::before,
.mi-payment-panel::after {
    display:
        none !important;
}


/* ============================================================
   TARJETAS DE PRODUCTOS
   AHORA OSCURAS
   ============================================================ */

.mi-product-unified
.mi-product-surface {

    background:
        var(--v72-item) !important;

    background-image:
        none !important;

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

    box-shadow:
        none !important;
}


.mi-product-unified:hover
.mi-product-surface {

    background:
        var(--v72-item-hover) !important;

    border-color:
        rgba(255,90,10,.38) !important;
}


.mi-product-unified
input:checked
+ .mi-product-surface {

    background:
        var(--v72-item-selected) !important;

    border-color:
        #ff5a0a !important;

    box-shadow:
        0 0 0 1px rgba(255,90,10,.15) !important;
}


/*
 * El pequeño recuadro de la imagen
 * todavía un poco más profundo.
 */
.mi-product-art-slot {

    background:
        #181c20 !important;

    border:
        1px solid rgba(255,255,255,.055) !important;
}


/* ============================================================
   METODOS DE PAGO
   TARJETAS INTERIORES OSCURAS
   ============================================================ */

.mi-payment-surface {

    background:
        var(--v72-item) !important;

    background-image:
        none !important;

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

    box-shadow:
        none !important;
}


.mi-payment-method:hover
.mi-payment-surface {

    background:
        var(--v72-item-hover) !important;

    border-color:
        rgba(255,90,10,.38) !important;
}


.mi-payment-method:has(input:checked)
.mi-payment-surface {

    background:
        var(--v72-item-selected) !important;

    border-color:
        #ff5a0a !important;

    box-shadow:
        0 0 0 1px rgba(255,90,10,.15) !important;
}


.mi-payment-type {

    background:
        #181c20 !important;

    border-color:
        rgba(255,255,255,.06) !important;
}


/* ============================================================
   PLAYER ID
   ============================================================ */

/*
 * Como el panel ahora es más claro,
 * el input vuelve a ser una superficie oscura.
 */
.mi-commerce input[type="text"],
.mi-commerce input[type="email"],
.mi-commerce input[type="number"] {

    background:
        #1b2024 !important;

    color:
        #f5f6f7 !important;

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


/* ============================================================
   SEPARADORES SOBRE EL NUEVO GRIS
   ============================================================ */

.mi-recharge-card hr,
.mi-products-head,
.mi-total {

    border-color:
        rgba(255,255,255,.085) !important;
}


/* ============================================================
   HERO
   ============================================================ */

/*
 * Base única para que la unión tenga exactamente
 * el mismo tono y no exista una "costura".
 */
.mi-app main
.mi-hero-v6
.mi-hero-v6-shell {

    position:
        relative !important;

    background:
        var(--v72-hero-base) !important;

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

    overflow:
        hidden !important;
}


/*
 * Texto.
 *
 * Ya no hacemos aquí un degradado brusco.
 * Dejamos una base prácticamente uniforme.
 */
.mi-app main
.mi-hero-v6
.mi-hero-v6-copy {

    position:
        relative !important;

    z-index:
        4 !important;

    background:
        var(--v72-hero-base) !important;
}


/*
 * Imagen: COLORES NATURALES.
 *
 * Quitamos brillo artificial, oscuridad,
 * desaturación y contraste adicional.
 */
.mi-app main
.mi-hero-v6
.mi-hero-v6-art.has-banner::before {

    filter:
        none !important;

    opacity:
        1 !important;

    transform:
        scale(1.005) !important;

    background-size:
        cover !important;

    background-position:
        center center !important;
}


/*
 * Esta es la transición real.
 *
 * Los primeros puntos son exactamente
 * iguales al fondo del texto, después
 * desaparece MUY gradualmente.
 *
 * Así ya no debe verse una línea vertical.
 */
.mi-app main
.mi-hero-v6
.mi-hero-v6-art::after {

    content:
        "" !important;

    position:
        absolute !important;

    z-index:
        3 !important;

    inset:
        0 !important;

    pointer-events:
        none !important;

    background:
        linear-gradient(
            90deg,

            rgba(53,59,65,1.00) 0%,
            rgba(53,59,65,.99) 5%,
            rgba(53,59,65,.97) 10%,
            rgba(53,59,65,.92) 16%,
            rgba(53,59,65,.84) 23%,
            rgba(53,59,65,.72) 31%,
            rgba(53,59,65,.58) 39%,
            rgba(53,59,65,.43) 48%,
            rgba(53,59,65,.29) 57%,
            rgba(53,59,65,.18) 66%,
            rgba(53,59,65,.10) 74%,
            rgba(53,59,65,.045) 82%,
            rgba(53,59,65,.015) 89%,
            transparent 96%
        ) !important;
}


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

@media (max-width: 760px) {

    /*
     * En teléfono necesitamos que la imagen
     * empiece a aparecer un poco antes,
     * porque el ancho disponible es menor.
     */

    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-art::after {

        background:
            linear-gradient(
                90deg,

                rgba(53,59,65,1.00) 0%,
                rgba(53,59,65,.98) 7%,
                rgba(53,59,65,.92) 15%,
                rgba(53,59,65,.80) 24%,
                rgba(53,59,65,.63) 34%,
                rgba(53,59,65,.45) 44%,
                rgba(53,59,65,.29) 54%,
                rgba(53,59,65,.16) 64%,
                rgba(53,59,65,.07) 74%,
                rgba(53,59,65,.02) 83%,
                transparent 92%
            ) !important;
    }


    .mi-product-unified
    .mi-product-surface,
    .mi-payment-surface {

        background:
            var(--v72-item) !important;
    }

}


/* ============================================================
   MODO INSANO V7.3
   CORRECT INNER PANEL + AIR + MOBILE HERO
   ============================================================ */


/* ============================================================
   1. COLUMNA IZQUIERDA EXTERIOR
   NO DEBE SER UNA TARJETA
   ============================================================ */

/*
 * Este fue el cuadro gris extra que apareció.
 * Lo regresamos a transparente.
 */
.mi-checkout-grid > :first-child:not(.mi-checkout-aside) {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* ============================================================
   2. TARJETA REAL:
   INGRESA TU ID + PRODUCTOS
   ============================================================ */

/*
 * Buscamos el contenedor DIRECTO de la cuadrícula de productos.
 * Ese es el rectángulo interior que realmente queremos aclarar.
 */
.mi-checkout-grid
> :first-child
*:has(> .mi-products-unified) {
    background: #3c434a !important;
    background-image: none !important;

    border: 1px solid rgba(255,255,255,.085) !important;

    box-shadow: none !important;
}


/*
 * Compatibilidad si el contenedor usa la clase antigua.
 */
.mi-checkout-grid
.mi-recharge-card {
    background: #3c434a !important;
    background-image: none !important;

    border-color: rgba(255,255,255,.085) !important;

    box-shadow: none !important;
}


/*
 * Evitar overlays oscuros sobre ese panel.
 */
.mi-checkout-grid
> :first-child
*:has(> .mi-products-unified)::before,

.mi-checkout-grid
> :first-child
*:has(> .mi-products-unified)::after {
    background-image: none !important;
}


/* ============================================================
   3. PRODUCTOS
   OSCUROS, PERO CON MÁS AIRE
   ============================================================ */

.mi-products-unified {
    gap: 11px !important;
    margin-top: 17px !important;
}


.mi-product-unified
.mi-product-surface {
    background: #20252a !important;

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


/*
 * Separación visual un poco más cómoda
 * entre título y cuadrícula.
 */
.mi-products-head {
    margin-bottom: 4px !important;
    padding-bottom: 14px !important;
}


/*
 * La división entre ID y productos respira más.
 */
.mi-checkout-grid
> :first-child
*:has(> .mi-products-unified)
> hr {
    margin-top: 22px !important;
    margin-bottom: 22px !important;
}


/* ============================================================
   4. MOBILE
   ============================================================ */

@media (max-width: 760px) {

    /*
     * Sin caja exterior gris.
     */
    .mi-checkout-grid
    > :first-child:not(.mi-checkout-aside) {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }


    /*
     * Solo el bloque real ID + productos queda Arctic Gray.
     */
    .mi-checkout-grid
    > :first-child
    *:has(> .mi-products-unified),

    .mi-checkout-grid
    .mi-recharge-card {
        background: #3c434a !important;
        background-image: none !important;

        border:
            1px solid rgba(255,255,255,.085) !important;
    }


    /*
     * Más separación entre productos.
     * Suficiente para que no parezcan pegados,
     * sin hacer la página exageradamente larga.
     */
    .mi-products-unified {
        gap: 9px !important;
        margin-top: 15px !important;
    }


    /*
     * Mantener cada producto oscuro.
     */
    .mi-product-unified
    .mi-product-surface {
        background: #20252a !important;
    }


    /* ========================================================
       HERO MOBILE
       ======================================================== */

    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-shell {
        position: relative !important;

        display: block !important;

        height: 122px !important;
        min-height: 122px !important;

        overflow: hidden !important;

        background: #353b41 !important;
    }


    /*
     * Texto más pequeño y ordenado.
     * Ya no debe ocupar prácticamente todo el Hero.
     */
    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-copy {
        position: relative !important;

        z-index: 5 !important;

        width: 56% !important;
        height: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        padding:
            12px 0 12px 15px !important;

        background: transparent !important;
    }


    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-copy h1 {
        width: 100% !important;
        max-width: 205px !important;

        margin: 0 !important;

        font-size: 22px !important;
        line-height: .98 !important;

        letter-spacing: -.045em !important;
    }


    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-copy h1 span {
        display: block !important;

        margin-top: 3px !important;
    }


    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-copy p {
        max-width: 180px !important;

        margin:
            8px 0 0 !important;

        font-size: 9.5px !important;
        line-height: 1.3 !important;
    }


    /*
     * Damos mucho más espacio horizontal al arte.
     * Puede extenderse por debajo del texto porque
     * el degradado hará la transición.
     */
    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-art {
        position: absolute !important;

        z-index: 1 !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        width: 72% !important;
        height: 100% !important;
    }


    /*
     * PUNTO IMPORTANTE:
     * ya NO usamos COVER en teléfono.
     *
     * CONTAIN permite ver la composición completa
     * y evita que solo aparezca un personaje/corte.
     */
    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-art.has-banner::before {
        inset: 0 !important;

        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: right center !important;

        filter: none !important;
        opacity: 1 !important;

        transform: none !important;
    }


    /*
     * Blend largo desde el fondo hacia la imagen.
     * No oscurece la imagen completa.
     */
    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-art::after {
        content: "" !important;

        position: absolute !important;
        inset: 0 !important;

        z-index: 3 !important;

        pointer-events: none !important;

        background:
            linear-gradient(
                90deg,
                #353b41 0%,
                rgba(53,59,65,.98) 8%,
                rgba(53,59,65,.92) 16%,
                rgba(53,59,65,.78) 26%,
                rgba(53,59,65,.58) 37%,
                rgba(53,59,65,.38) 48%,
                rgba(53,59,65,.21) 58%,
                rgba(53,59,65,.10) 68%,
                rgba(53,59,65,.035) 78%,
                transparent 88%
            ) !important;
    }

}


/* ============================================================
   5. MOBILE MUY PEQUEÑO
   ============================================================ */

@media (max-width: 390px) {

    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-copy h1 {
        font-size: 20px !important;
        max-width: 180px !important;
    }

    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-copy p {
        font-size: 9px !important;
    }

    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-art {
        width: 74% !important;
    }

}



/* ============================================================
   MODO INSANO V7.4
   HERO OPTIMIZED + SUBTLE MOTION
   ============================================================ */

/*
 * Desktop / default:
 * usa la versión optimizada desktop.
 */
.mi-app main
.mi-hero-v6
.mi-hero-v6-art.has-banner::before {
    background-image: var(--mi-hero-banner) !important;

    will-change: transform !important;
    transform-origin: center center !important;

    animation: miHeroFloat 14s ease-in-out infinite !important;
}


/*
 * Mobile:
 * usa la versión optimizada mobile.
 */
@media (max-width: 760px) {
    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-art.has-banner::before {
        background-image: var(--mi-hero-banner-mobile, var(--mi-hero-banner)) !important;
    }
}


/*
 * Movimiento sutil, no invasivo.
 */
@keyframes miHeroFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1.01);
    }
    50% {
        transform: translate3d(-10px, -4px, 0) scale(1.03);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1.01);
    }
}


/*
 * Accesibilidad:
 * si el usuario prefiere menos animación, se apaga.
 */
@media (prefers-reduced-motion: reduce) {
    .mi-app main
    .mi-hero-v6
    .mi-hero-v6-art.has-banner::before {
        animation: none !important;
        transform: none !important;
    }
}



/* ============================================================
   MODO INSANO V7.5
   MOBILE 3x3 + SMART CHECKOUT
   ============================================================ */


/* Desktop:
   el wrapper no cambia el layout actual */
.mi-checkout-anchor {
    display: contents;
}


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

@media (max-width: 760px) {


    /* ========================================================
       PRODUCTOS — 3 COLUMNAS x 3 FILAS
       ======================================================== */

    .mi-products-unified {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 7px !important;

        width: 100% !important;

        margin-top: 14px !important;
    }


    .mi-product-unified {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
    }


    .mi-product-unified
    .mi-product-surface {

        position: relative !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;

        width: 100% !important;

        min-width: 0 !important;
        min-height: 126px !important;

        padding:
            9px 5px 8px !important;

        border-radius:
            9px !important;

        text-align:
            center !important;

        background:
            #20252a !important;
    }


    /* imagen */

    .mi-product-art-slot {

        flex:
            0 0 auto !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            48px !important;

        height:
            45px !important;

        margin:
            0 auto 6px !important;

        padding:
            3px !important;
    }


    .mi-product-art-slot img {

        display:
            block !important;

        width:
            100% !important;

        height:
            100% !important;

        object-fit:
            contain !important;
    }


    /* texto */

    .mi-product-info {

        display:
            block !important;

        width:
            100% !important;

        min-width:
            0 !important;

        text-align:
            center !important;
    }


    .mi-product-title {

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            100% !important;

        min-height:
            24px !important;

        margin:
            0 !important;

        font-size:
            10px !important;

        line-height:
            1.08 !important;

        letter-spacing:
            -.025em !important;

        white-space:
            normal !important;

        text-align:
            center !important;
    }


    /*
     * En esta presentación no necesitamos repetir
     * DIAMANTES / MEMBRESÍA debajo.
     */
    .mi-product-meta {
        display:
            none !important;
    }


    /* precio */

    .mi-product-price {

        display:
            block !important;

        width:
            100% !important;

        margin-top:
            auto !important;

        padding-top:
            5px !important;

        font-size:
            13.5px !important;

        line-height:
            1 !important;

        text-align:
            center !important;
    }


    /* badges */

    .mi-product-tag {

        top:
            4px !important;

        right:
            4px !important;

        max-width:
            50px !important;

        padding:
            2px 4px !important;

        font-size:
            5px !important;

        line-height:
            1 !important;
    }


    /* ========================================================
       CHECKOUT NATURAL
       TOTAL + COMPRAR
       ======================================================== */

    .mi-checkout-anchor {

        display:
            grid !important;

        grid-template-columns:
            minmax(0, .82fr)
            minmax(140px, 1.18fr) !important;

        align-items:
            stretch !important;

        width:
            100% !important;

        margin:
            15px 0 0 !important;

        overflow:
            hidden !important;

        border:
            1px solid rgba(255,255,255,.10) !important;

        border-radius:
            14px !important;

        background:
            #1a1f23 !important;

        box-shadow:
            0 10px 24px rgba(0,0,0,.12) !important;
    }


    /* quitar comportamiento antiguo del total */

    .mi-checkout-anchor
    .mi-total {

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            flex-start !important;

        justify-content:
            center !important;

        width:
            100% !important;

        min-height:
            62px !important;

        margin:
            0 !important;

        padding:
            8px 12px !important;

        border:
            0 !important;

        background:
            transparent !important;
    }


    .mi-checkout-anchor
    .mi-total > span {

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            flex-start !important;

        margin:
            0 0 4px !important;

        font-size:
            6.5px !important;

        line-height:
            1.1 !important;

        text-align:
            left !important;
    }


    .mi-checkout-anchor
    .mi-total small {

        margin-top:
            2px !important;

        font-size:
            5.5px !important;
    }


    .mi-checkout-anchor
    .mi-total > strong {

        display:
            block !important;

        margin:
            0 !important;

        font-size:
            22px !important;

        line-height:
            1 !important;

        color:
            #ff641d !important;

        text-align:
            left !important;
    }


    /* ========================================================
       BOTÓN COMPRAR NATURAL
       ======================================================== */

    /*
     * Antes mi-desktop-cta estaba escondido en teléfono.
     * Ahora lo necesitamos porque será el botón estacionado.
     */
    .mi-checkout-anchor
    .mi-desktop-cta {

        display:
            flex !important;

        visibility:
            visible !important;

        opacity:
            1 !important;

        pointer-events:
            auto !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            100% !important;

        height:
            100% !important;

        min-height:
            62px !important;

        margin:
            0 !important;

        padding:
            0 15px !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        font-size:
            10px !important;

        font-weight:
            800 !important;

        letter-spacing:
            .025em !important;
    }


    /* flecha del botón natural */

    .mi-checkout-anchor
    .mi-desktop-cta b {

        margin-left:
            auto !important;

        padding-left:
            8px !important;
    }


    /* ========================================================
       DOCK FLOTANTE
       ======================================================== */

    /*
     * Mantiene el mismo lenguaje visual
     * que el nuevo checkout natural.
     */
    .mi-mobile-dock {

        border:
            1px solid rgba(255,255,255,.10) !important;

        border-radius:
            14px !important;

        background:
            #1a1f23 !important;
    }


    .mi-mobile-dock
    .mi-button {

        font-size:
            10px !important;

        font-weight:
            800 !important;

        letter-spacing:
            .025em !important;
    }

}


/* ============================================================
   MOBILE PEQUEÑO
   MANTENEMOS 3 COLUMNAS
   ============================================================ */

@media (max-width: 380px) {

    .mi-products-unified {
        gap:
            5px !important;
    }


    .mi-product-unified
    .mi-product-surface {

        min-height:
            120px !important;

        padding:
            8px 4px 7px !important;
    }


    .mi-product-art-slot {

        width:
            43px !important;

        height:
            41px !important;
    }


    .mi-product-title {

        min-height:
            22px !important;

        font-size:
            8.8px !important;
    }


    .mi-product-price {

        font-size:
            12px !important;
    }

}