:root {
            --violet: #6C4CF1;
            --sky: #0EA5E9;
            --fuchsia: #E879F9;
            --teal: #14B8A6;
            --lime: #84CC16;
            --amber: #F59E0B;
            --rose: #F43F5E;
            --bg: #F5F4F1;
            --surface: #fff;
            --surface-2: #FAF9F7;
            --surface-3: #EDECE7;
            --text: #141320;
            --muted: #6D6A80;
            --faint: #9895A8;
            --line: rgba(20, 19, 32, .10);
            --line2: rgba(20, 19, 32, .06);
            --accent: #6C4CF1;
            --r: 14px;
            --r2: 22px;
            --r3: 30px;
            --rp: 999px;
            --sh1: 0 1px 2px rgba(20, 19, 32, .03), 0 8px 20px -12px rgba(20, 19, 32, .16);
            --sh2: 0 2px 6px rgba(20, 19, 32, .04), 0 20px 44px -20px rgba(20, 19, 32, .24);
            --sh3: 0 36px 80px -28px rgba(20, 19, 32, .34);
            --e: cubic-bezier(.22, 1, .36, 1);
            --sp: cubic-bezier(.2, 1.28, .35, 1);
            --f: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
            --fd: 'Instrument Serif', Georgia, serif;
            --pad: clamp(16px, 2.6vw, 40px)
        }

        html[data-theme=dark] {
            --bg: #0A0910;
            --surface: #141220;
            --surface-2: #1A1828;
            --surface-3: #221F31;
            --text: #F3F2F8;
            --muted: #9E9BB4;
            --faint: #7A7792;
            --line: rgba(255, 255, 255, .11);
            --line2: rgba(255, 255, 255, .06);
            --sh1: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px -14px rgba(0, 0, 0, .8);
            --sh2: 0 3px 8px rgba(0, 0, 0, .5), 0 24px 54px -22px rgba(0, 0, 0, .9);
            --sh3: 0 44px 96px -32px #000
        }

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

        html {
            -webkit-text-size-adjust: 100%;
            scroll-behavior: smooth
        }

        body {
            font-family: var(--f);
            background: var(--bg);
            color: var(--text);
            font-size: 15.5px;
            line-height: 1.55;
            letter-spacing: -.008em;
            -webkit-font-smoothing: antialiased;
            overflow-x: clip;
            min-height: 100dvh;
            transition: background .5s var(--e), color .5s var(--e)
        }

        body.lock {
            overflow: hidden
        }

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

        img {
            object-fit: cover;
            background: var(--surface-3)
        }

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

        button {
            background: none;
            border: 0;
            cursor: pointer;
            text-align: inherit
        }

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

        s {
            text-decoration-thickness: 1.5px
        }

        h1,
        h2,
        h3,
        h4 {
            line-height: 1.12;
            letter-spacing: -.03em;
            font-weight: 800
        }

        :focus-visible {
            outline: 2.5px solid var(--violet);
            outline-offset: 2px;
            border-radius: 7px
        }

        .skip {
            position: fixed;
            left: -999px;
            top: 8px;
            z-index: 300;
            background: var(--surface);
            padding: 10px 16px;
            border-radius: var(--r);
            box-shadow: var(--sh2)
        }

        .skip:focus {
            left: 8px
        }

        body::before {
            content: '';
            position: fixed;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background: radial-gradient(760px 460px at 10% -8%, color-mix(in srgb, var(--violet) 16%, transparent), transparent 70%), radial-gradient(620px 420px at 94% 2%, color-mix(in srgb, var(--teal) 13%, transparent), transparent 70%), radial-gradient(700px 500px at 50% 106%, color-mix(in srgb, var(--amber) 10%, transparent), transparent 72%)
        }

        .grain {
            position: fixed;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            opacity: .05;
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAGFBMVEUAAAAAAIAAAACAAIAAgIAAAICAgIDAwMDz/xw/AAAARElEQVQ4y2NgQAX8DIxgLBoYwMgIwaqBEYc8A0Q1MsK1M2KQZ4TqYkQnywjVx4hHlhGsmxGXTCMmN4ww3TCGqYZxRDcAANk5EwGFyCenAAAAAElFTkSuQmCC");
            background-size: 50px;
        }

        #fx {
            position: fixed;
            inset: 0;
            z-index: 9000;
            pointer-events: none
        }

        #wipe {
            position: fixed;
            inset: 0;
            z-index: 9500;
            pointer-events: none;
            opacity: 0;
            background: var(--surface)
        }

        .app {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: auto 1fr;
            min-height: 100dvh
        }

        .rail {
            width: 256px;
            height: 100dvh;
            position: sticky;
            top: 0;
            display: flex;
            flex-direction: column;
            padding: 18px 12px;
            border-right: 1px solid var(--line);
            background: color-mix(in srgb, var(--surface) 72%, transparent);
            backdrop-filter: blur(24px) saturate(1.4);
            z-index: 40
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 8px 10px 20px
        }

        .bm {
            width: 40px;
            height: 40px;
            border-radius: 13px;
            display: grid;
            place-items: center;
            color: #fff;
            font-weight: 800;
            font-size: 16px;
            background: linear-gradient(140deg, var(--violet), var(--fuchsia) 55%, var(--sky));
            box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--violet) 76%, transparent)
        }

        .bt b {
            display: block;
            font-size: 15.5px;
            font-weight: 800;
            letter-spacing: -.04em;
            line-height: 1.15
        }

        .bt span {
            font-size: 11.5px;
            color: var(--muted)
        }

        .nl {
            font-size: 10.5px;
            text-transform: uppercase;
            letter-spacing: .14em;
            color: var(--faint);
            font-weight: 700;
            padding: 15px 12px 6px
        }

        .ni {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 10px 12px;
            border-radius: var(--r);
            font-weight: 600;
            font-size: 14px;
            color: var(--muted);
            transition: .25s var(--e)
        }

        .ni svg,
        .ni i {
            width: 19px;
            height: 19px;
            flex: none
        }

        .ni:hover {
            background: var(--surface-3);
            color: var(--text);
            transform: translateX(2px)
        }

        .ni.on {
            background: var(--text);
            color: var(--bg)
        }

        .ni .bd {
            margin-left: auto;
            font-size: 11px;
            font-weight: 800;
            background: var(--rose);
            color: #fff;
            padding: 1px 7px;
            border-radius: var(--rp)
        }

        .rf {
            margin-top: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding-top: 12px;
            border-top: 1px solid var(--line)
        }

        .mini {
            display: flex;
            gap: 8px
        }

        .main {
            min-width: 0;
            display: flex;
            flex-direction: column
        }

        .tb {
            position: sticky;
            top: 0;
            z-index: 35;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 11px var(--pad);
            border-bottom: 1px solid var(--line2);
            background: color-mix(in srgb, var(--bg) 80%, transparent);
            backdrop-filter: blur(22px) saturate(1.5)
        }

        .cr {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 13px;
            color: var(--muted);
            font-weight: 600;
            min-width: 0
        }

        .cr a:hover {
            color: var(--text);
            text-decoration: underline
        }

        .cr svg {
            width: 14px;
            height: 14px;
            flex: none;
            opacity: .5
        }

        .cr .here {
            color: var(--text);
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .tba {
            margin-left: auto;
            display: flex;
            gap: 8px;
            align-items: center
        }

        .wrap {
            width: 100%;
            max-width: 1560px;
            margin: 0 auto;
            padding: 26px var(--pad) 90px
        }

        .tabs {
            display: none
        }

        .foot {
            border-top: 1px solid var(--line2);
            padding: 30px var(--pad) 40px;
            font-size: 12.5px;
            color: var(--faint);
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: space-between
        }

        /* componentes */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 11px 18px;
            border-radius: var(--rp);
            font-weight: 700;
            font-size: 14px;
            background: var(--surface-3);
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            transition: transform .34s var(--sp), background .22s var(--e), box-shadow .3s var(--e), color .2s
        }

        .btn svg,
        .btn i {
            width: 17px;
            height: 17px
        }

        .btn:hover {
            transform: translateY(-2px)
        }

        .btn:active {
            transform: translateY(0) scale(.97)
        }

        .bp {
            background: var(--text);
            color: var(--bg);
            box-shadow: var(--sh1)
        }

        html[data-theme=dark] .bp {
            background: #fff;
            color: #141320
        }

        .ba {
            background: var(--accent);
            color: #fff;
            box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--accent) 85%, transparent)
        }

        .bo {
            background: transparent;
            border: 1.5px solid var(--line)
        }

        .blg {
            padding: 15px 26px;
            font-size: 15.5px
        }

        .bsm {
            padding: 8px 14px;
            font-size: 13px
        }

        .btn[disabled] {
            opacity: .45;
            pointer-events: none
        }

        .rip {
            position: absolute;
            border-radius: 50%;
            background: currentColor;
            opacity: .2;
            transform: scale(0);
            animation: rip .6s var(--e) forwards;
            pointer-events: none
        }

        @keyframes rip {
            to {
                transform: scale(2.4);
                opacity: 0
            }
        }

        .ib {
            width: 40px;
            height: 40px;
            border-radius: var(--rp);
            display: grid;
            place-items: center;
            flex: none;
            background: color-mix(in srgb, var(--surface) 84%, transparent);
            border: 1px solid var(--line);
            backdrop-filter: blur(10px);
            position: relative;
            transition: transform .34s var(--sp), background .22s, border-color .22s, color .22s
        }

        .ib svg,
        .ib i {
            width: 18px;
            height: 18px
        }

        .ib:hover {
            transform: translateY(-2px) scale(1.06);
            border-color: var(--text)
        }

        .ib.on {
            background: var(--rose);
            border-color: transparent;
            color: #fff
        }

        .bd2 {
            position: absolute;
            top: -4px;
            right: -4px;
            min-width: 19px;
            height: 19px;
            border-radius: var(--rp);
            background: var(--rose);
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            display: grid;
            place-items: center;
            padding: 0 5px;
            border: 2px solid var(--bg)
        }

        .bd2.pop {
            animation: pop .5s var(--sp)
        }

        @keyframes pop {
            40% {
                transform: scale(1.55)
            }
        }

        .chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border-radius: var(--rp);
            background: var(--surface);
            border: 1px solid var(--line);
            font-size: 13px;
            font-weight: 650;
            transition: transform .3s var(--sp), background .2s, border-color .2s, color .2s
        }

        .chip svg,
        .chip i {
            width: 15px;
            height: 15px
        }

        .chip:hover {
            transform: translateY(-2px);
            border-color: var(--text)
        }

        .chip.on {
            background: var(--text);
            color: var(--bg);
            border-color: transparent
        }

        .chip[data-cat].on {
            background: var(--c);
            color: #fff;
            border-color: transparent
        }

        .pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 10px;
            border-radius: var(--rp);
            font-size: 11.5px;
            font-weight: 750;
            background: color-mix(in srgb, var(--c, var(--violet)) 14%, transparent);
            color: color-mix(in srgb, var(--c, var(--violet)) 74%, var(--text))
        }

        .pill svg,
        .pill i {
            width: 13px;
            height: 13px
        }

        .sect {
            margin: 54px 0 20px;
            display: flex;
            align-items: flex-end;
            gap: 14px;
            flex-wrap: wrap
        }

        .sect .kk {
            font-size: 11.5px;
            font-weight: 800;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--accent)
        }

        .sect h2 {
            font-size: clamp(23px, 3.1vw, 34px);
            flex: 1;
            min-width: 200px;
            margin-top: 4px
        }

        .sect p {
            color: var(--muted);
            font-size: 14px;
            max-width: 52ch;
            margin-top: 6px
        }

        .more {
            margin-left: auto;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-weight: 700;
            font-size: 13.5px;
            color: var(--muted);
            transition: gap .3s var(--sp), color .2s
        }

        .more:hover {
            color: var(--text);
            gap: 11px
        }

        .more svg,
        .more i {
            width: 16px;
            height: 16px
        }

        .rx {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            padding: 6px 2px 18px;
            scrollbar-width: none;
            margin: 0 -2px
        }

        .rx::-webkit-scrollbar {
            display: none
        }

        .rx>* {
            scroll-snap-align: start;
            flex: 0 0 auto;
            width: 264px
        }

        .rx.w>* {
            width: min(430px, 82vw)
        }

        /* producto */
        .grid {
            display: grid;
            gap: 18px
        }

        .g1 {
            grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr))
        }

        .g2 {
            grid-template-columns: repeat(auto-fill, minmax(min(258px, 100%), 1fr))
        }

        .pc {
            position: relative;
            display: flex;
            flex-direction: column;
            transition: transform .5s var(--sp);
            will-change: transform
        }

        .pc:hover {
            transform: translateY(-7px);
            z-index: 5
        }

        .pm {
            position: relative;
            aspect-ratio: var(--ar, 1);
            border-radius: var(--r2);
            overflow: hidden;
            background: var(--surface-3)
        }

        .pm img {
            width: 100%;
            height: 100%;
            transition: transform 1.1s var(--e), filter .5s
        }

        .pm::after {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--c);
            mix-blend-mode: soft-light;
            opacity: .42;
            transition: opacity .5s;
            pointer-events: none
        }

        .pc:hover .pm img {
            transform: scale(1.07)
        }

        .pc:hover .pm::after {
            opacity: .22
        }

        .pc:hover .pm {
            box-shadow: var(--sh2)
        }

        .pm .hit {
            position: absolute;
            inset: 0;
            z-index: 2;
            border-radius: var(--r2)
        }

        .pb {
            position: absolute;
            top: 12px;
            left: 12px;
            z-index: 3;
            background: color-mix(in srgb, var(--surface) 88%, transparent);
            backdrop-filter: blur(12px);
            font-size: 11px;
            font-weight: 800;
            padding: 5px 11px;
            border-radius: var(--rp);
            box-shadow: var(--sh1)
        }

        .po {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 3;
            background: var(--rose);
            color: #fff;
            font-size: 11.5px;
            font-weight: 800;
            padding: 5px 10px;
            border-radius: var(--rp)
        }

        .pm .fav {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 4;
            width: 36px;
            height: 36px;
            opacity: 0;
            transform: scale(.7) translateY(-4px);
            transition: .35s var(--sp)
        }

        .pc:hover .fav,
        .pc:focus-within .fav,
        .pc .fav.on {
            opacity: 1;
            transform: none
        }

        .pc .fav.on {
            background: var(--rose);
            border-color: transparent;
            color: #fff
        }

        .qk {
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 12px;
            z-index: 4;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 11px;
            border-radius: var(--rp);
            background: color-mix(in srgb, var(--text) 93%, transparent);
            color: var(--bg);
            font-weight: 750;
            font-size: 13.5px;
            transform: translateY(160%);
            opacity: 0;
            transition: .45s var(--sp)
        }

        html[data-theme=dark] .qk {
            background: #fff;
            color: #141320
        }

        .qk svg,
        .qk i {
            width: 16px;
            height: 16px
        }

        .pc:hover .qk,
        .pc:focus-within .qk {
            transform: none;
            opacity: 1
        }

        .qk:active {
            transform: scale(.96)
        }

        .stk {
            position: absolute;
            bottom: 12px;
            left: 12px;
            z-index: 3;
            display: flex;
            align-items: center;
            gap: 5px;
            background: color-mix(in srgb, var(--amber) 93%, transparent);
            color: #241a03;
            font-size: 11px;
            font-weight: 800;
            padding: 5px 10px;
            border-radius: var(--rp);
            transition: opacity .3s
        }

        .stk svg,
        .stk i {
            width: 12px;
            height: 12px
        }

        .pc:hover .stk {
            opacity: 0
        }

        .pbd {
            padding: 13px 4px 4px;
            display: flex;
            flex-direction: column;
            gap: 5px
        }

        .ps {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 700;
            color: var(--muted)
        }

        .ps .dt {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--c);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent)
        }

        .ps:hover {
            color: var(--text)
        }

        .pn {
            font-size: 15px;
            font-weight: 700;
            line-height: 1.3;
            letter-spacing: -.02em;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden
        }

        .pn:hover {
            text-decoration: underline
        }

        .pp {
            display: flex;
            align-items: baseline;
            gap: 8px;
            margin-top: 2px
        }

        .pp b {
            font-size: 19px;
            font-weight: 800;
            letter-spacing: -.04em
        }

        .pp s {
            font-size: 13px;
            color: var(--faint)
        }

        .pmt {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 12px;
            color: var(--muted)
        }

        .rate {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-weight: 700;
            color: var(--text)
        }

        .rate svg,
        .rate i {
            width: 13px;
            height: 13px;
            fill: var(--amber);
            color: var(--amber)
        }

        .stars i {
            width: 14px;
            height: 14px;
            fill: var(--amber);
            color: var(--amber)
        }

        .stars i.off {
            fill: none;
            color: var(--line)
        }

        .mas {
            columns: 4;
            column-gap: 18px
        }

        .mas>* {
            break-inside: avoid;
            margin-bottom: 18px;
            display: inline-block;
            width: 100%
        }

        /* tiendas escap
arate */
        .shops {
            display: grid;
            gap: 22px;
            grid-template-columns: repeat(auto-fill, minmax(min(332px, 100%), 1fr))
        }

        .shop {
            position: relative;
            display: flex;
            flex-direction: column;
            border-radius: var(--r3);
            overflow: hidden;
            background: var(--surface);
            border: 1px solid var(--line2);
            box-shadow: var(--sh1);
            transition: transform .55s var(--sp), box-shadow .45s var(--e);
            isolation: isolate
        }

        .shop:hover {
            transform: translateY(-8px) scale(1.008);
            box-shadow: var(--sh3)
        }

        .fc {
            position: relative;
            height: 172px;
            overflow: hidden;
            background: linear-gradient(160deg, color-mix(in srgb, var(--c) 48%, #0c0b12), color-mix(in srgb, var(--c) 84%, #000))
        }

        .fc::before {
            content: '';
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity .6s;
            background: radial-gradient(120px 62px at 26% 0, color-mix(in srgb, var(--c) 92%, #fff), transparent 70%), radial-gradient(140px 72px at 78% 0, color-mix(in srgb, var(--c) 82%, #fff), transparent 70%)
        }

        .shop:hover .fc::before {
            opacity: .8
        }

        .aw {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 26px;
            z-index: 3;
            background: repeating-linear-gradient(90deg, #fff 0 18px, var(--c) 18px 36px);
            transform: translateY(-100%);
            transition: transform .6s var(--sp);
            box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5)
        }

        .shop:hover .aw {
            transform: none
        }

        .aw::after {
            content: '';
            position: absolute;
            bottom: -7px;
            left: 0;
            right: 0;
            height: 8px;
            background: radial-gradient(circle at 9px 0, #fff 8px, transparent 9px) repeat-x;
            background-size: 18px 8px
        }

        .sg {
            position: absolute;
            left: 0;
            right: 0;
            top: 54px;
            text-align: center;
            z-index: 2;
            padding: 0 18px;
            font-family: var(--fd);
            font-size: 26px;
            color: #fff;
            text-shadow: 0 2px 22px rgba(0, 0, 0, .5);
            transition: transform .6s var(--sp)
        }

        .shop:hover .sg {
            transform: translateY(-3px)
        }

        .sg small {
            display: block;
            font-family: var(--f);
            font-size: 10.5px;
            letter-spacing: .16em;
            text-transform: uppercase;
            opacity: .86;
            margin-top: 5px;
            font-weight: 700
        }

        .drs {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 52px;
            display: flex;
            justify-content: center;
            gap: 6px;
            align-items: flex-end
        }

        .drs span {
            width: 26px;
            height: 30px;
            border-radius: 5px 5px 0 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .06))
        }

        .vt {
            background: var(--surface);
            padding: 16px;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 12px
        }

        .sh {
            display: flex;
            gap: 9px;
            padding-bottom: 8px;
            position: relative
        }

        .sh::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 5px;
            border-radius: 3px;
            background: linear-gradient(180deg, var(--surface-3), color-mix(in srgb, var(--c) 26%, var(--surface-3)));
            box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .4)
        }

        .sh i {
            flex: 1;
            aspect-ratio: 1;
            border-radius: 9px;
            overflow: hidden;
            background: var(--surface-3);
            transition: transform .55s var(--sp)
        }

        .sh i img {
            width: 100%;
            height: 100%
        }

        .shop:hover .sh i:nth-child(1) {
            transform: translateY(-7px)
        }

        .shop:hover .sh i:nth-child(2) {
            transform: translateY(-11px);
            transition-delay: .07s
        }

        .shop:hover .sh i:nth-child(3) {
            transform: translateY(-6px);
            transition-delay: .14s
        }

        .ssh {
            display: flex;
            gap: 12px;
            align-items: center
        }

        .sav {
            width: 46px;
            height: 46px;
            border-radius: 15px;
            flex: none;
            display: grid;
            place-items: center;
            font-weight: 800;
            color: #fff;
            font-size: 15px;
            background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 40%, #0b0a12));
            box-shadow: 0 10px 20px -10px var(--c)
        }

        .snm {
            font-weight: 800;
            font-size: 16px;
            letter-spacing: -.03em
        }

        .smt {
            display: flex;
            gap: 7px;
            flex-wrap: wrap;
            align-items: center;
            font-size: 11.5px;
            color: var(--muted);
            font-weight: 650
        }

        .od {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--lime);
            animation: pl 2.4s infinite
        }

        @keyframes pl {

            0%,
            100% {
                box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 60%, transparent)
            }

            50% {
                box-shadow: 0 0 0 6px transparent
            }
        }

        .sds {
            font-size: 13px;
            color: var(--muted);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden
        }

        .sen {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 13px;
            font-weight: 750;
            margin-top: auto;
            opacity: .75;
            transition: gap .3s var(--sp), opacity .3s
        }

        .shop:hover .sen {
            gap: 12px;
            opacity: 1
        }

        .sen svg,
        .sen i {
            width: 16px;
            height: 16px
        }

        /* overlays */
        .sheet {
            position: fixed;
            inset: 0;
            z-index: 120;
            pointer-events: none
        }

        .sheet .sc {
            position: absolute;
            inset: 0;
            background: color-mix(in srgb, #0a0910 48%, transparent);
            backdrop-filter: blur(3px);
            opacity: 0;
            transition: opacity .4s
        }

        .sheet .pn2 {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: min(442px, 100%);
            background: var(--surface);
            box-shadow: var(--sh3);
            transform: translateX(104%);
            transition: transform .52s var(--sp);
            display: flex;
            flex-direction: column
        }

        .sheet.open {
            pointer-events: auto
        }

        .sheet.open .sc {
            opacity: 1
        }

        .sheet.open .pn2 {
            transform: none
        }

        .shd {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 18px 20px;
            border-bottom: 1px solid var(--line)
        }

        .shd h3 {
            font-size: 19px;
            flex: 1
        }

        .sbd {
            overflow-y: auto;
            flex: 1;
            padding: 18px 20px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            overscroll-behavior: contain
        }

        .sft {
            padding: 16px 20px;
            border-top: 1px solid var(--line);
            background: var(--surface-2);
            display: flex;
            flex-direction: column;
            gap: 12px
        }

        .mod {
            position: fixed;
            inset: 0;
            z-index: 130;
            display: grid;
            place-items: center;
            padding: 16px;
            pointer-events: none;
            opacity: 0;
            transition: opacity .3s
        }

        .mod.open {
            pointer-events: auto;
            opacity: 1
        }

        .mod .sc {
            position: absolute;
            inset: 0;
            background: color-mix(in srgb, #0a0910 54%, transparent);
            backdrop-filter: blur(5px)
        }

        .mod .bx {
            position: relative;
            background: var(--surface);
            border-radius: var(--r3);
            box-shadow: var(--sh3);
            width: min(780px, 100%);
            max-height: 88dvh;
            overflow: auto;
            transform: translateY(22px) scale(.96);
            transition: transform .5s var(--sp)
        }

        .mod.open .bx {
            transform: none
        }

        /* carrito */
        .ci {
            display: grid;
            grid-template-columns: 70px 1fr auto;
            gap: 12px;
            padding: 12px;
            border-radius: var(--r2);
            background: var(--surface-2);
            transition: .3s
        }

        .ci img {
            width: 70px;
            height: 70px;
            border-radius: 12px
        }

        .ci.out {
            opacity: 0;
            transform: translateX(30px)
        }

        .ci .nm {
            font-weight: 700;
            font-size: 13.5px;
            line-height: 1.3
        }

        .ci .st {
            font-size: 11.5px;
            color: var(--muted);
            margin-top: 2px
        }

        .qt {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--rp);
            padding: 3px;
            margin-top: 7px
        }

        .qt button {
            width: 26px;
            height: 26px;
            border-radius: var(--rp);
            display: grid;
            place-items: center;
            font-weight: 800;
            transition: .25s var(--sp)
        }

        .qt button:hover {
            background: var(--surface-3);
            transform: scale(1.12)
        }

        .qt span {
            min-width: 24px;
            text-align: center;
            font-weight: 750;
            font-size: 13.5px
        }

        .pg {
            height: 11px;
            border-radius: var(--rp);
            background: var(--surface-3);
            overflow: hidden
        }

        .pg i {
            display: block;
            height: 100%;
            border-radius: var(--rp);
            background: linear-gradient(90deg, var(--violet), var(--teal));
            transition: width .85s var(--sp);
            position: relative;
            overflow: hidden
        }

        .pg i::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
            animation: sw 2.2s infinite
        }

        @keyframes sw {
            to {
                transform: translateX(100%)
            }
        }

        .pg.dn i {
            background: linear-gradient(90deg, var(--lime), var(--teal))
        }

        .sm {
            display: flex;
            flex-direction: column;
            gap: 8px;
            font-size: 13.5px
        }

        .sm div {
            display: flex;
            justify-content: space-between;
            color: var(--muted)
        }

        .sm div b {
            color: var(--text);
            font-weight: 750
        }

        .sm .tt {
            border-top: 1px dashed var(--line);
            padding-top: 10px;
            color: var(--text);
            font-weight: 800;
            font-size: 18px
        }

        .sm .tt b {
            font-size: 22px;
            letter-spacing: -.04em
        }

        /* buscador */
        .sx {
            position: fixed;
            inset: 0;
            z-index: 150;
            background: color-mix(in srgb, var(--bg) 96%, transparent);
            backdrop-filter: blur(28px) saturate(1.4);
            display: flex;
            flex-direction: column;
            opacity: 0;
            pointer-events: none;
            transition: opacity .32s var(--e)
        }

        .sx.open {
            opacity: 1;
            pointer-events: auto
        }

        .sxt {
            padding: clamp(16px, 3.4vw, 40px) var(--pad) 0;
            max-width: 1180px;
            margin: 0 auto;
            width: 100%
        }

        .sb {
            display: flex;
            align-items: center;
            gap: 14px;
            background: var(--surface);
            border: 1.5px solid var(--line);
            border-radius: var(--rp);
            padding: 14px 16px 14px 24px;
            box-shadow: var(--sh2);
            transition: border-color .3s, box-shadow .4s var(--e)
        }

        .sb:focus-within {
            border-color: var(--violet);
            box-shadow: 0 0 0 5px color-mix(in srgb, var(--violet) 14%, transparent), var(--sh2)
        }

        .sb input {
            flex: 1;
            border: 0;
            background: none;
            font-size: clamp(17px, 2.4vw, 23px);
            font-weight: 650;
            letter-spacing: -.03em;
            min-width: 0
        }

        .sb input:focus {
            outline: 0
        }

        .sb kbd {
            font-family: var(--f);
            font-size: 11px;
            font-weight: 700;
            color: var(--faint);
            border: 1px solid var(--line);
            border-radius: 6px;
            padding: 3px 7px;
            background: var(--surface-2)
        }

        .sxb {
            flex: 1;
            overflow-y: auto;
            max-width: 1180px;
            margin: 0 auto;
            width: 100%;
            padding: 26px var(--pad) 60px;
            display: grid;
            grid-template-columns: minmax(240px, 300px) 1fr;
            gap: 36px;
            align-items: start
        }

        .lb {
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--faint);
            margin: 22px 0 10px
        }

        .lb:first-child {
            margin-top: 0
        }

        .sxi {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            border-radius: var(--r);
            font-size: 14px;
            font-weight: 600;
            color: var(--muted);
            width: 100%;
            transition: .25s var(--e)
        }

        .sxi:hover {
            background: var(--surface);
            color: var(--text);
            transform: translateX(3px)
        }

        .sxi svg,
        .sxi i {
            width: 16px;
            height: 16px;
            flex: none;
            opacity: .7
        }

        .sxi .k {
            margin-left: auto;
            font-size: 11px;
            color: var(--faint)
        }

        .sxp {
            display: flex;
            gap: 13px;
            align-items: center;
            padding: 9px;
            border-radius: var(--r2);
            transition: .3s var(--sp)
        }

        .sxp:hover {
            background: var(--surface);
            transform: translateX(4px)
        }

        .sxp img {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            flex: none
        }

        .sxp b {
            font-size: 14.5px;
            font-weight: 700;
            display: block
        }

        .sxp small {
            color: var(--muted);
            font-size: 12.5px
        }

        .itn {
            display: flex;
            align-items: center;
            gap: 9px;
            background: color-mix(in srgb, var(--violet) 10%, transparent);
            border: 1px solid color-mix(in srgb, var(--violet) 24%, transparent);
            border-radius: var(--r2);
            padding: 12px 15px;
            font-size: 13px;
            margin-bottom: 16px;
            flex-wrap: wrap
        }

        .mic {
            display: flex;
            gap: 3px;
            align-items: flex-end;
            height: 18px
        }

        .mic i {
            width: 3px;
            background: var(--rose);
            border-radius: 2px;
            animation: mc .9s infinite ease-in-out
        }

        @keyframes mc {

            0%,
            100% {
                height: 5px
            }

            50% {
                height: 18px
            }
        }

        /* toasts */
        .tst {
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 200;
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: flex-end;
            pointer-events: none
        }

        .toast {
            pointer-events: auto;
            display: flex;
            gap: 12px;
            align-items: flex-start;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--r2);
            padding: 13px 15px;
            box-shadow: var(--sh2);
            width: min(368px, calc(100vw - 36px));
            animation: tin .5s var(--sp) both
        }

        .toast.out {
            animation: tout .34s var(--e) forwards
        }

        @keyframes tin {
            from {
                opacity: 0;
                transform: translateY(20px) scale(.94)
            }
        }

        @keyframes tout {
            to {
                opacity: 0;
                transform: translateX(30px) scale(.96)
            }
        }

        .toast .ti2 {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            flex: none;
            background: color-mix(in srgb, var(--c, var(--violet)) 15%, transparent);
            color: var(--c, var(--violet))
        }

        .toast .ti2 svg,
        .toast .ti2 i {
            width: 18px;
            height: 18px
        }

        .toast b {
            display: block;
            font-size: 13.5px;
            font-weight: 750
        }

        .toast p {
            font-size: 12.5px;
            color: var(--muted);
            line-height: 1.4
        }

        /* filtros */
        .fb {
            position: sticky;
            top: 59px;
            z-index: 30;
            display: flex;
            gap: 9px;
            overflow-x: auto;
            padding: 12px 0;
            scrollbar-width: none;
            background: linear-gradient(180deg, var(--bg) 64%, transparent)
        }

        .fb::-webkit-scrollbar {
            display: none
        }

        .fb>* {
            flex: none
        }

        .fp {
            overflow: hidden;
            max-height: 0;
            opacity: 0;
            transition: max-height .55s var(--e), opacity .35s, margin .4s
        }

        .fp.open {
            max-height: 820px;
            opacity: 1;
            margin-bottom: 18px
        }

        .fg {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 22px;
            padding: 22px;
            border-radius: var(--r2);
            background: var(--surface);
            border: 1px solid var(--line2);
            box-shadow: var(--sh1)
        }

        .fg h4 {
            font-size: 11.5px;
            text-transform: uppercase;
            letter-spacing: .12em;
            color: var(--faint);
            margin-bottom: 12px
        }

        .fc2 {
            display: flex;
            gap: 7px;
            flex-wrap: wrap
        }

        .rg {
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .ro {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            font-weight: 750
        }

        input[type=range] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 6px;
            border-radius: 4px;
            background: var(--surface-3)
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--text);
            border: 4px solid var(--surface);
            box-shadow: var(--sh1);
            cursor: pointer;
            transition: transform .3s var(--sp)
        }

        input[type=range]::-webkit-slider-thumb:hover {
            transform: scale(1.18)
        }

        .seg {
            display: inline-flex;
            background: var(--surface-3);
            border-radius: var(--rp);
            padding: 4px;
            gap: 2px
        }

        .seg button {
            padding: 8px 15px;
            border-radius: var(--rp);
            font-size: 13px;
            font-weight: 650;
            color: var(--muted);
            transition: .3s var(--e)
        }

        .seg button.on {
            background: var(--surface);
            color: var(--text);
            box-shadow: var(--sh1)
        }

        .sw {
            width: 46px;
            height: 27px;
            border-radius: var(--rp);
            background: var(--surface-3);
            position: relative;
            flex: none;
            border: 1px solid var(--line);
            transition: background .3s
        }

        .sw::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 21px;
            height: 21px;
            border-radius: 50%;
            background: var(--surface);
            box-shadow: var(--sh1);
            transition: transform .4s var(--sp)
        }

        .sw.on {
            background: var(--violet);
            border-color: transparent
        }

        .sw.on::after {
            transform: translateX(19px)
        }

        .row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid var(--line2)
        }

        .row:last-child {
            border: 0
        }

        .row .rl {
            flex: 1;
            min-width: 0
        }

        .row .rl b {
            display: block;
            font-size: 14px;
            font-weight: 700
        }

        .row .rl span {
            font-size: 12.5px;
            color: var(--muted)
        }

        /* forms */
        .fld {
            display: flex;
            flex-direction: column;
            gap: 7px
        }

        .fld label {
            font-size: 12.5px;
            font-weight: 700;
            color: var(--muted)
        }

        .fld input,
        .fld select,
        .fld textarea {
            background: var(--surface);
            border: 1.5px solid var(--line);
            border-radius: var(--r);
            padding: 13px 15px;
            font-size: 15px;
            font-weight: 600;
            transition: .3s var(--e);
            width: 100%
        }

        .fld input:focus,
        .fld select:focus,
        .fld textarea:focus {
            outline: 0;
            border-color: var(--violet);
            box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 13%, transparent)
        }

        .fld .er {
            font-size: 12px;
            color: var(--rose);
            font-weight: 650;
            display: none
        }

        .fld.bad input {
            border-color: var(--rose)
        }

        .fld.bad .er {
            display: block;
            animation: shk .4s
        }

        @keyframes shk {

            30%,
            70% {
                transform: translateX(3px)
            }

            50% {
                transform: translateX(-4px)
            }
        }

        /* varios */
        .sk {
            border-radius: var(--r2);
            background: linear-gradient(100deg, var(--surface-3) 30%, color-mix(in srgb, var(--surface-3) 40%, var(--surface)) 50%, var(--surface-3) 70%);
            background-size: 220% 100%;
            animation: skl 1.5s infinite linear
        }

        @keyframes skl {
            to {
                background-position: -220% 0
            }
        }

        .emp {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            text-align: center;
            padding: 64px 24px;
            border-radius: var(--r2);
            background: var(--surface);
            border: 1px dashed var(--line)
        }

        .emp .ei {
            width: 70px;
            height: 70px;
            border-radius: 26px;
            display: grid;
            place-items: center;
            background: color-mix(in srgb, var(--violet) 12%, transparent);
            color: var(--violet)
        }

        .emp .ei svg,
        .emp .ei i {
            width: 32px;
            height: 32px
        }

        .emp h3 {
            font-size: 19px
        }

        .emp p {
            color: var(--muted);
            font-size: 14px;
            max-width: 42ch
        }

        .kpi {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(212px, 100%), 1fr));
            gap: 16px
        }

        .k {
            position: relative;
            padding: 18px;
            border-radius: var(--r2);
            background: var(--surface);
            border: 1px solid var(--line2);
            box-shadow: var(--sh1);
            overflow: hidden
        }

        .k .kl {
            font-size: 12px;
            color: var(--muted);
            font-weight: 650;
            display: flex;
            gap: 7px;
            align-items: center
        }

        .k .kv {
            font-size: 30px;
            font-weight: 800;
            letter-spacing: -.045em;
            margin: 8px 0 4px
        }

        .k .kd {
            font-size: 12px;
            font-weight: 750;
            display: inline-flex;
            gap: 4px;
            align-items: center
        }

        .k .kd svg,
        .k .kd i {
            width: 13px;
            height: 13px
        }

        .up {
            color: var(--lime)
        }

        .dn {
            color: var(--rose)
        }

        .k .spk {
            position: absolute;
            right: 12px;
            bottom: 10px;
            width: 80px;
            height: 34px;
            opacity: .6
        }

        .bars {
            display: flex;
            align-items: flex-end;
            gap: 10px;
            height: 150px
        }

        .bars .b {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            gap: 7px;
            height: 100%
        }

        .bars .b i {
            width: 100%;
            max-width: 44px;
            height: 0;
            border-radius: 9px 9px 4px 4px;
            background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 55%, transparent));
            transition: height 1s var(--sp)
        }

        .bars.in .b i {
            height: var(--h)
        }

        .bars .b span {
            font-size: 11px;
            color: var(--faint);
            font-weight: 700
        }

        .tbl {
            width: 100%;
            border-collapse: collapse;
            font-size: 13.5px
        }

        .tbl th {
            text-align: left;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .1em;
            color: var(--faint);
            padding: 10px 12px;
            border-bottom: 1px solid var(--line)
        }

        .tbl td {
            padding: 12px;
            border-bottom: 1px solid var(--line2);
            vertical-align: middle
        }

        .tbl tr:hover td {
            background: var(--surface-2)
        }

        .dn2 {
            display: flex;
            gap: 6px;
            overflow-x: auto;
            scrollbar-width: none;
            padding-bottom: 4px
        }

        .dn2::-webkit-scrollbar {
            display: none
        }

        .stp {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap
        }

        .stp .s {
            display: flex;
            align-items: center;
            gap: 9px;
            color: var(--faint);
            font-weight: 700;
            font-size: 13px;
            white-space: nowrap
        }

        .stp .s b {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: var(--surface-3);
            font-size: 13px;
            transition: .4s var(--sp)
        }

        .stp .s.on {
            color: var(--text)
        }

        .stp .s.on b {
            background: var(--text);
            color: var(--bg);
            transform: scale(1.08)
        }

        html[data-theme=dark] .stp .s.on b {
            background: #fff;
            color: #141320
        }

        .stp .s.dn b {
            background: var(--lime);
            color: #1a2405
        }

        .stp .ln {
            flex: 1;
            height: 2px;
            background: var(--line);
            border-radius: 2px;
            min-width: 12px
        }

        .stp .ln.dn {
            background: var(--lime)
        }

        .tn {
            display: flex;
            gap: 4px;
            overflow-x: auto;
            border-bottom: 1px solid var(--line);
            margin-bottom: 22px;
            scrollbar-width: none
        }

        .tn::-webkit-scrollbar {
            display: none
        }

        .tn button {
            padding: 12px 15px;
            font-weight: 700;
            font-size: 14px;
            color: var(--muted);
            position: relative;
            white-space: nowrap;
            transition: color .25s
        }

        .tn button::after {
            content: '';
            position: absolute;
            left: 15px;
            right: 15px;
            bottom: -1px;
            height: 2.5px;
            border-radius: 3px;
            background: var(--text);
            transform: scaleX(0);
            transition: transform .4s var(--sp)
        }

        .tn button.on {
            color: var(--text)
        }

        .tn button.on::after {
            transform: none
        }

        .gal {
            display: grid;
            grid-template-columns: 88px 1fr;
            gap: 14px
        }

        .gt {
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .gt button {
            border-radius: 12px;
            overflow: hidden;
            aspect-ratio: 1;
            border: 2px solid transparent;
            transition: .3s var(--sp)
        }

        .gt button.on {
            border-color: var(--text)
        }

        .gt button:hover {
            transform: scale(1.05)
        }

        .gm {
            border-radius: var(--r2);
            overflow: hidden;
            aspect-ratio: 1;
            background: var(--surface-3);
            box-shadow: var(--sh1)
        }

        .gm img {
            width: 100%;
            height: 100%;
            transition: transform .7s var(--e)
        }

        .gm:hover img {
            transform: scale(1.12)
        }

        .vc {
            padding: 9px 15px;
            border-radius: var(--rp);
            border: 1.5px solid var(--line);
            font-size: 13px;
            font-weight: 700;
            background: var(--surface);
            transition: .3s var(--sp)
        }

        .vc:hover {
            transform: translateY(-2px)
        }

        .vc.on {
            border-color: var(--text);
            background: var(--text);
            color: var(--bg)
        }

        .s3 {
            display: flex;
            gap: 10px;
            flex-wrap: wrap
        }

        .s3 .x {
            flex: 1;
            min-width: 120px;
            padding: 14px;
            border-radius: var(--r2);
            background: var(--surface-2);
            border: 1px solid var(--line2);
            display: flex;
            gap: 11px;
            align-items: center
        }

        .s3 .x b {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--accent);
            color: #fff;
            display: grid;
            place-items: center;
            font-size: 13px;
            flex: none
        }

        .s3 .x span {
            font-size: 12.5px;
            font-weight: 700;
            line-height: 1.25
        }

        .wiz {
            display: grid;
            grid-template-columns: 1fr 400px;
            gap: 28px;
            align-items: start
        }

        .pv {
            position: sticky;
            top: 78px;
            display: flex;
            flex-direction: column;
            gap: 16px
        }

        .hero {
            position: relative;
            padding: clamp(30px, 6vw, 78px) 0 12px;
            overflow: hidden
        }

        .hin {
            position: relative;
            z-index: 2;
            max-width: 940px
        }

        .ey {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 7px 15px;
            border-radius: var(--rp);
            background: color-mix(in srgb, var(--violet) 11%, transparent);
            border: 1px solid color-mix(in srgb, var(--violet) 24%, transparent);
            font-size: 12.5px;
            font-weight: 750;
            margin-bottom: 22px
        }

        .hero h1 {
            font-size: clamp(40px, 8.4vw, 88px);
            line-height: .95;
            letter-spacing: -.05em
        }

        .hero h1 em {
            font-family: var(--fd);
            font-style: italic;
            font-weight: 400;
            background: linear-gradient(100deg, var(--violet), var(--fuchsia) 45%, var(--amber));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent
        }

        .hero .sub {
            margin: 20px 0 30px;
            font-size: clamp(15px, 1.8vw, 19px);
            color: var(--muted);
            max-width: 56ch;
            font-weight: 500
        }

        .hst {
            display: flex;
            flex-wrap: wrap;
            gap: 22px;
            margin-top: 34px;
            padding-top: 26px;
            border-top: 1px solid var(--line)
        }

        .hst div b {
            display: block;
            font-size: 23px;
            font-weight: 800;
            letter-spacing: -.04em
        }

        .hst div span {
            font-size: 12px;
            color: var(--muted);
            font-weight: 650
        }

        .sky {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 240px;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 6px;
            z-index: 1;
            opacity: .5;
            padding: 0 10px;
            -webkit-mask-image: linear-gradient(180deg, transparent, #000 42%);
            mask-image: linear-gradient(180deg, transparent, #000 42%)
        }

        .bld {
            width: var(--w);
            height: var(--h);
            border-radius: 8px 8px 0 0;
            position: relative;
            background: linear-gradient(180deg, color-mix(in srgb, var(--c) 34%, var(--surface-3)), var(--surface-3));
            transition: transform .8s var(--e)
        }

        .bld::before {
            content: '';
            position: absolute;
            inset: 16px 8px 0;
            background-image: radial-gradient(circle, color-mix(in srgb, var(--c) 66%, transparent) 1.6px, transparent 2px);
            background-size: 11px 13px;
            animation: lg 6s infinite;
            animation-delay: var(--d)
        }

        .bld::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            border-radius: 8px 8px 0 0;
            background: var(--c)
        }

        @keyframes lg {

            0%,
            100% {
                opacity: .26
            }

            42% {
                opacity: .75
            }
        }

        .hs {
            position: relative;
            max-width: 720px
        }

        .sug {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 16px;
            font-size: 12.5px;
            color: var(--muted);
            align-items: center
        }

        .ct {
            display: grid;
            gap: 14px;
            grid-template-columns: repeat(auto-fill, minmax(min(178px, 100%), 1fr))
        }

        .ctl {
            position: relative;
            padding: 18px;
            border-radius: var(--r2);
            background: var(--surface);
            border: 1px solid var(--line2);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-height: 134px;
            transition: transform .5s var(--sp), box-shadow .4s
        }

        .ctl::before {
            content: '';
            position: absolute;
            right: -30px;
            top: -30px;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: var(--c);
            opacity: .11;
            transition: transform .7s var(--e), opacity .4s
        }

        .ctl:hover {
            transform: translateY(-6px);
            box-shadow: var(--sh2)
        }

        .ctl:hover::before {
            transform: scale(1.5);
            opacity: .2
        }

        .ctl .i2 {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            background: color-mix(in srgb, var(--c) 15%, transparent);
            color: color-mix(in srgb, var(--c) 78%, var(--text))
        }

        .ctl .i2 svg,
        .ctl .i2 i {
            width: 19px;
            height: 19px
        }

        .ctl b {
            font-size: 15px;
            font-weight: 750;
            letter-spacing: -.02em
        }

        .ctl span {
            font-size: 12px;
            color: var(--muted);
            margin-top: auto
        }

        .tk {
            display: flex;
            gap: 34px;
            align-items: center;
            overflow: hidden;
            padding: 14px 0;
            border-block: 1px solid var(--line2);
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)
        }

        .tkn {
            display: flex;
            gap: 34px;
            animation: mr 38s linear infinite;
            white-space: nowrap
        }

        .tk:hover .tkn {
            animation-play-state: paused
        }

        @keyframes mr {
            to {
                transform: translateX(-50%)
            }
        }

        .tk b {
            font-size: 13px;
            color: var(--muted);
            display: inline-flex;
            gap: 8px;
            align-items: center;
            font-weight: 700
        }

        .tk b svg,
        .tk b i {
            width: 15px;
            height: 15px;
            color: var(--amber)
        }

        .ach {
            display: flex;
            gap: 12px;
            align-items: center;
            padding: 13px;
            border-radius: var(--r2);
            background: var(--surface-2);
            border: 1px solid var(--line2);
            opacity: .45;
            transition: .5s var(--e)
        }

        .ach.got {
            opacity: 1;
            border-color: color-mix(in srgb, var(--lime) 42%, transparent);
            background: color-mix(in srgb, var(--lime) 9%, transparent)
        }

        .ach .i3 {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: var(--surface-3);
            color: var(--muted);
            flex: none
        }

        .ach.got .i3 {
            background: var(--lime);
            color: #1a2405
        }

        .ach .i3 svg,
        .ach .i3 i {
            width: 19px;
            height: 19px
        }

        .ach b {
            display: block;
            font-size: 13.5px;
            font-weight: 750
        }

        .ach span {
            font-size: 12px;
            color: var(--muted)
        }

        .tl2 {
            display: flex;
            flex-direction: column
        }

        .tl2 .t2 {
            display: flex;
            gap: 14px;
            position: relative;
            padding-bottom: 20px
        }

        .tl2 .t2:last-child {
            padding-bottom: 0
        }

        .tl2 .t2 .d {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--surface-3);
            border: 3px solid var(--surface);
            flex: none;
            margin-top: 4px;
            z-index: 1;
            box-shadow: 0 0 0 1px var(--line)
        }

        .tl2 .t2.dn .d {
            background: var(--lime)
        }

        .tl2 .t2::before {
            content: '';
            position: absolute;
            left: 6.5px;
            top: 16px;
            bottom: 0;
            width: 1.5px;
            background: var(--line)
        }

        .tl2 .t2:last-child::before {
            display: none
        }

        .tl2 b {
            font-size: 14px;
            font-weight: 750
        }

        .tl2 span {
            font-size: 12.5px;
            color: var(--muted)
        }

        .rcd {
            display: flex;
            gap: 12px;
            padding: 12px;
            border-radius: var(--r2);
            background: var(--surface-2);
            align-items: center;
            transition: transform .4s var(--sp)
        }

        .rcd:hover {
            transform: translateX(4px)
        }

        .rcd img {
            width: 52px;
            height: 52px;
            border-radius: 12px
        }

        .rcd b {
            font-size: 13.5px;
            display: block;
            font-weight: 700
        }

        .rcd small {
            color: var(--muted);
            font-size: 12px
        }

        .cc {
            position: relative;
            border-radius: var(--r2);
            overflow: hidden;
            min-height: 224px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 20px;
            color: #fff;
            isolation: isolate
        }

        .cc img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            transition: transform 1s var(--e)
        }

        .cc::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            background: linear-gradient(180deg, transparent 20%, rgba(8, 7, 14, .84))
        }

        .cc:hover img {
            transform: scale(1.07)
        }

        .cc h3 {
            font-size: 19px
        }

        .cc p {
            font-size: 12.5px;
            opacity: .86;
            margin-top: 4px
        }

        .cc .pill {
            background: rgba(255, 255, 255, .18);
            backdrop-filter: blur(8px);
            color: #fff;
            align-self: flex-start;
            margin-bottom: 10px
        }

        .tip {
            position: relative
        }

        .tip::after {
            content: attr(data-tip);
            position: absolute;
            bottom: calc(100% + 9px);
            left: 50%;
            transform: translateX(-50%) translateY(5px);
            background: var(--text);
            color: var(--bg);
            font-size: 11.5px;
            font-weight: 700;
            padding: 6px 10px;
            border-radius: 8px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: .25s var(--e)
        }

        .tip:hover::after {
            opacity: 1;
            transform: translateX(-50%)
        }

        .cv {
            width: 100%;
            height: 180px
        }

        .cl {
            stroke-dasharray: 2400;
            stroke-dashoffset: 2400;
            animation: dr 1.7s var(--e) forwards
        }

        @keyframes dr {
            to {
                stroke-dashoffset: 0
            }
        }

        /* animaciones */
        [data-rv] {
            opacity: 0;
            transform: translateY(20px) scale(.988);
            transition: opacity .62s var(--e) var(--d, 0ms), transform .78s var(--sp) var(--d, 0ms)
        }

        [data-rv].in {
            opacity: 1;
            transform: none
        }

        #view.vi {
            animation: vin .5s var(--e) both
        }

        @keyframes vin {
            from {
                opacity: 0;
                transform: translateY(10px)
            }
        }

        html.reduce * {
            animation-duration: .001ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .06s !important
        }

        html.reduce [data-rv] {
            opacity: 1 !important;
            transform: none !important
        }

        html.reduce .cl {
            stroke-dasharray: none;
            stroke-dashoffset: 0
        }

        html.reduce .pg i::after {
            display: none
        }

        @media (prefers-reduced-motion:reduce) {
            [data-rv] {
                opacity: 1;
                transform: none
            }

            .cl {
                stroke-dasharray: none;
                stroke-dashoffset: 0
            }
        }

        @media (max-width:1440px) {
            .mas {
                columns: 3
            }
        }

        @media (max-width:1180px) {
            .mas {
                columns: 2
            }

            .wiz {
                grid-template-columns: 1fr
            }

            .pv {
                position: static;
                order: -1
            }

            .sxb {
                grid-template-columns: 1fr;
                gap: 22px
            }

            .sxb .sd {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 0 24px
            }
        }

        @media (max-width:1080px) {
            .app {
                grid-template-columns: 1fr
            }

            .rail {
                display: flex;
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                width: 280px;
                max-width: 85vw;
                z-index: 500;
                background: color-mix(in srgb, var(--surface) 96%, transparent);
                backdrop-filter: blur(20px) saturate(1.5);
                transform: translateX(-104%);
                transition: transform 0.45s var(--sp), box-shadow 0.4s;
            }
            
            .rail.open {
                transform: translateX(0);
                box-shadow: 20px 0 60px rgba(0,0,0,0.15);
            }

            .tabs {
                display: flex;
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 60;
                padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
                background: color-mix(in srgb, var(--surface) 90%, transparent);
                backdrop-filter: blur(24px) saturate(1.6);
                border-top: 1px solid var(--line)
            }

            .tabs a,
            .tabs button {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 3px;
                padding: 7px 2px;
                border-radius: 12px;
                font-size: 10.5px;
                font-weight: 700;
                color: var(--faint);
                position: relative;
                transition: color .25s;
                text-decoration: none;
            }

            .tabs a svg,
            .tabs a i,
            .tabs button svg,
            .tabs button i {
                width: 21px;
                height: 21px;
                transition: transform .45s var(--sp)
            }

            .tabs a.on,
            .tabs button.on {
                color: var(--text)
            }

            .tabs a.on svg,
            .tabs a.on i,
            .tabs button.on svg,
            .tabs button.on i {
                transform: translateY(-2px) scale(1.08)
            }

            .tabs a.on::before,
            .tabs button.on::before {
                content: '';
                position: absolute;
                top: -1px;
                width: 22px;
                height: 3px;
                border-radius: 3px;
                background: var(--violet);
                animation: ti .4s var(--sp)
            }

            @keyframes ti {
                from {
                    transform: scaleX(0);
                    opacity: 0
                }
            }

            .tabs .bd2 {
                position: static;
                border: 0
            }

            .wrap {
                padding-bottom: 124px
            }

            .foot {
                padding-bottom: 112px
            }

            .tst {
                bottom: calc(80px + env(safe-area-inset-bottom));
                right: 12px;
                left: 12px;
                align-items: stretch
            }

            .toast {
                width: 100%
            }

            .sheet .pn2 {
                width: 100%;
                top: auto;
                left: 0;
                right: 0;
                bottom: 0;
                height: 92dvh;
                border-radius: var(--r3) var(--r3) 0 0;
                transform: translateY(104%)
            }

            .sheet.open .pn2 {
                transform: none
            }

            .sheet .pn2::before {
                content: '';
                position: absolute;
                top: 8px;
                left: 50%;
                transform: translateX(-50%);
                width: 42px;
                height: 4px;
                border-radius: 3px;
                background: var(--line);
                z-index: 5
            }

            .shd {
                padding-top: 22px
            }

            .fb {
                top: 58px
            }

            .gal {
                grid-template-columns: 1fr
            }

            .gt {
                flex-direction: row;
                order: 2
            }

            .gt button {
                flex: 1
            }

            .sky {
                height: 160px;
                opacity: .34
            }
        }

        @media (max-width:720px) {
            .mas {
                columns: 1
            }

            .shops {
                grid-template-columns: 1fr
            }

            .sect {
                margin-top: 40px
            }

            .hero {
                padding-top: 14px
            }

            .ct {
                grid-template-columns: repeat(auto-fill, minmax(min(142px, 100%), 1fr))
            }

            .s3 .x {
                min-width: 100%
            }

            .stp .s span {
                display: none
            }

            .k .kv {
                font-size: 26px
            }

            .ci {
                grid-template-columns: 58px 1fr
            }

            .ci img {
                width: 58px;
                height: 58px
            }

            .mod .bx {
                border-radius: var(--r2);
                max-height: 92dvh
            }
        }

        @media (min-width:1900px) {
            .mas {
                columns: 5
            }

            .wrap {
                max-width: 1780px
            }
        }

        [data-desktop-only] { display: grid; }
        [data-mobile-only] { display: none !important; }

        @media (max-width:1080px) {
            [data-desktop-only] { display: none !important; }
            [data-mobile-only] { display: grid !important; }
        }

        /* Performance Optimizations */
        .sect, .card, .grid, .shops {
            content-visibility: auto;
            contain-intrinsic-size: 1px 300px;
        }
        img {
            content-visibility: auto;
        }
        .app {
            will-change: transform;
        }