/* LADE SHOP — estilos compartidos (tienda.html, mi-tienda.html, tienda-admin.html) */
@font-face{font-family:'Barlow Condensed';font-weight:500;font-display:swap;src:url(fonts/barlow-condensed-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-weight:100 900;font-display:swap;src:url(fonts/public-sans-latin-wght-normal.woff2) format('woff2')}

:root{
  color-scheme:light;
  --bg:#f6f3ea; --s1:#ffffff; --s2:#efebdf; --s3:#e4dfcf; --line:#ddd6c3; --line2:#c8c0a9;
  --gold:#c99a1e; --gold-hi:#8a6508; --gold-lo:#dcc067; --gold-bg:rgba(201,154,30,.15);
  --ink:#1d1b16; --ink2:#4b473c; --mute:#7c7666;
  --ok:#1b8a4a; --ok-bg:rgba(27,138,74,.12); --bad:#c8352b; --bad-bg:rgba(200,53,43,.1); --warn:#946200;
  --r:10px; --r-sm:6px; --r-lg:16px;
  --font-d:'Barlow Condensed','Arial Narrow','Roboto Condensed',sans-serif;
  --font-b:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap:1320px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--font-b);min-height:100vh;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:700;line-height:1.05;margin:0;letter-spacing:.01em}
h1{font-size:clamp(38px,5vw,64px)} h2{font-size:clamp(26px,3vw,34px)} h3{font-size:22px} h4{font-size:18px}
p{margin:0}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px;border-radius:4px}
::selection{background:var(--gold);color:#000}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--mute)} .ink2{color:var(--ink2)} .gold{color:var(--gold)} .ok{color:var(--ok)} .bad{color:var(--bad)}
.d{font-family:var(--font-d)}
.row{display:flex;align-items:center;gap:12px} .col{display:flex;flex-direction:column;gap:12px}
.between{justify-content:space-between} .wrapflex{flex-wrap:wrap} .grow{flex:1;min-width:0}
.sp8{margin-top:8px}.sp16{margin-top:16px}.sp24{margin-top:24px}.sp32{margin-top:32px}.sp48{margin-top:48px}
.hide{display:none!important}
.ico{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico.fill{fill:currentColor;stroke:none}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--r);
  padding:11px 20px;font-weight:600;font-size:15px;line-height:1.2;transition:background .15s,border-color .15s,transform .05s;white-space:nowrap;background:none}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-gold{background:var(--gold);color:#000} .btn-gold:hover:not([disabled]){background:#e0b53a}
.btn-line{border-color:var(--line2);background:var(--s1)} .btn-line:hover:not([disabled]){border-color:var(--gold);color:var(--gold-hi)}
.btn-ghost{color:var(--ink2)} .btn-ghost:hover{color:var(--ink);background:var(--s2)}
.btn-danger{border-color:var(--bad);color:var(--bad)} .btn-danger:hover{background:var(--bad-bg)}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:var(--r-sm)}
.btn-lg{padding:15px 28px;font-size:16px}
.btn-block{width:100%}
.iconbtn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:none;border:0;color:var(--ink);position:relative}
.iconbtn:hover{background:var(--s2);color:var(--gold-hi)}
.badge{position:absolute;top:2px;right:0;min-width:18px;height:18px;border-radius:9px;background:var(--gold);color:#000;font:700 11px/18px var(--font-b);text-align:center;padding:0 5px}

/* formularios */
.field{display:flex;flex-direction:column;gap:6px}
.field>label,.lbl{font-size:13px;color:var(--ink2);font-weight:500}
.inp,.sel,.txt{width:100%;background:var(--s2);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;color:var(--ink);transition:border-color .15s}
.inp:hover,.sel:hover,.txt:hover{border-color:var(--line2)}
.inp:focus,.sel:focus,.txt:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-bg)}
.txt{min-height:92px;resize:vertical}
.sel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238b8679' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
.hint{font-size:12.5px;color:var(--mute)}
.err-msg{color:var(--bad);font-size:13.5px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.chk{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:14px}
.chk input{accent-color:var(--gold);width:17px;height:17px}
.req{color:var(--bad);margin-left:2px}

/* chips y estados */
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);background:var(--s1);border-radius:999px;padding:8px 15px;font-size:14px;font-weight:500;transition:.15s}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed=true],.chip.on{background:var(--gold);border-color:var(--gold);color:#000}
.chip[disabled]{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 11px;font-size:12.5px;font-weight:600;background:var(--s3);color:var(--ink2)}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.gold{background:var(--gold-bg);color:var(--gold-hi)} .pill.warn{background:rgba(240,184,64,.13);color:var(--warn)}

/* barra superior */
.top,.foot{--bg:#0e0e0d;--s1:#171715;--s2:#1f1f1c;--s3:#2a2a26;--line:#2f2f2a;--line2:#44443d;--gold:#d9ab2e;--gold-hi:#f2cb5c;--gold-lo:#7d6317;--gold-bg:rgba(217,171,46,.14);--ink:#f4f0e6;--ink2:#c4bfb0;--mute:#908b7d;color:var(--ink)}
.top{position:sticky;top:0;z-index:50;background:rgba(14,14,13,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-main{display:flex;align-items:center;gap:22px;height:72px}
.logo{font:700 30px/1 var(--font-d);letter-spacing:.04em;color:var(--gold);white-space:nowrap}
.logo small{display:block;font:500 11px/1 var(--font-b);letter-spacing:.02em;color:var(--mute);margin-top:3px}
.search{position:relative;flex:1;max-width:680px}
.search form{display:flex}
.search .inp{border-radius:var(--r) 0 0 var(--r);border-right:0;padding:12px 16px;background:var(--s2)}
.search .go{border-radius:0 var(--r) var(--r) 0;padding:0 18px;background:var(--gold);color:#000;border:0}
.search .go:hover{background:#e6bd45}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--s1);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.55);z-index:60}
.sugg a{display:flex;align-items:center;gap:10px;padding:11px 16px;font-size:14.5px}
.sugg a:hover,.sugg a[aria-selected=true]{background:var(--s3)}
.sugg .tag{margin-left:auto;font-size:12px;color:var(--gold)}
.top-actions{display:flex;align-items:center;gap:2px;margin-left:auto}
.top-link{padding:8px 12px;font-size:14px;font-weight:500;color:var(--ink2);border-radius:var(--r-sm)}
.top-link:hover{color:var(--gold-hi);background:var(--s2)}
.nav{border-top:1px solid var(--line)}
.nav-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:0 24px;max-width:var(--wrap);margin:0 auto}
.nav-in::-webkit-scrollbar{display:none}
.nav a{padding:12px 14px;font-size:14px;font-weight:500;color:var(--ink2);white-space:nowrap;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--gold-hi);border-color:var(--gold)}
.nav a.hot{color:var(--gold-hi);font-weight:700}

/* secciones */
.sec{padding:40px 0 8px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.sec-h a{font-size:14px;color:var(--gold);font-weight:600} .sec-h a:hover{color:var(--gold-hi)}
.crumbs{font-size:13.5px;color:var(--mute);display:flex;gap:8px;flex-wrap:wrap;padding:20px 0 6px}
.crumbs a:hover{color:var(--gold-hi)}

/* tarjetas de producto */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:18px}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color .15s,transform .15s}
.pcard:hover{border-color:var(--gold-lo)}
.pimg{position:relative;aspect-ratio:1/1;background:var(--s2);display:grid;place-items:center;overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:contain;padding:8px}
.pimg.ph{color:var(--line2)} .pimg.ph .ico{width:54px;height:54px;stroke-width:1.3}
.off{position:absolute;left:10px;top:10px;background:var(--gold);color:#000;font:700 15px/1 var(--font-d);padding:5px 8px;border-radius:5px;letter-spacing:.02em}
.fav{position:absolute;right:8px;top:8px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(0,0,0,.18);border:0;display:grid;place-items:center;color:var(--ink)}
.fav:hover{color:var(--gold-hi)} .fav[aria-pressed=true]{color:var(--gold)} .fav[aria-pressed=true] .ico{fill:currentColor}
.pbody{padding:14px 15px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.ptitle{font-size:14.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink)}
.pcard>a.cover{position:absolute;inset:0;z-index:1}
.pcard .fav{z-index:2}
.price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.price b{font:700 30px/1 var(--font-d);letter-spacing:.01em}
.price s{color:var(--mute);font-size:13.5px}
.price em{font-style:normal;color:var(--ok);font-size:13.5px;font-weight:700}
.ship{font-size:13px;color:var(--ok);font-weight:600}
.store{font-size:12.5px;color:var(--mute);margin-top:auto}
.stars{display:inline-flex;align-items:center;gap:2px;color:var(--gold)}
.stars .ico{width:15px;height:15px}
.stars .off{color:var(--line2)}
.rate{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mute)}

/* carruseles */
.rail-wrap{position:relative}
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 14px;scrollbar-width:none;scroll-behavior:smooth}
.rail::-webkit-scrollbar{display:none}
.rail>.pcard{flex:0 0 232px;scroll-snap-align:start}
.rail-btn{position:absolute;top:38%;z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(0,0,0,.15);color:var(--ink);display:grid;place-items:center}
.rail-btn:hover{border-color:var(--gold);color:var(--gold-hi)}
.rail-btn.l{left:-14px}.rail-btn.r{right:-14px}

/* marcas digitales */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.btile{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--s1);border:1px solid var(--line);transition:border-color .15s,transform .15s}
.btile:hover{border-color:var(--c,var(--gold));transform:translateY(-3px)}
.btile .art{aspect-ratio:5/4;background:var(--c,var(--gold));color:var(--tc,#000);display:grid;place-items:center;font:700 54px/1 var(--font-d);letter-spacing:.02em;position:relative;overflow:hidden}
.btile .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.btile .art::after{content:'';position:absolute;inset:auto -20% -55% -20%;height:70%;background:rgba(0,0,0,.14);border-radius:50%}
.btile .meta{padding:11px 13px 13px}
.btile .meta b{display:block;font-size:15px;line-height:1.25}
.btile .meta span{font-size:13px;color:var(--mute)}
.btile .meta span i{font-style:normal;color:var(--gold-hi);font-weight:700}

/* hero */
.hero{padding:44px 0 36px;border-bottom:1px solid var(--line)}
.hero-in{display:grid;grid-template-columns:minmax(300px,4fr) 7fr;gap:44px;align-items:center}
.hero h1{color:var(--ink)}
.hero h1 span{color:var(--gold)}
.hero p{color:var(--ink2);font-size:17px;max-width:44ch;margin-top:16px}
.hero .pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.hero .pay .pill{background:var(--s2);border:1px solid var(--line)}
.hero .tiles{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.hero .btile .art{font-size:42px;aspect-ratio:1/.82}

.perks{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid var(--line)}
.perk{display:flex;gap:13px;align-items:flex-start;padding:22px 20px;border-right:1px solid var(--line)}
.perk:last-child{border-right:0}
.perks-end{border-top:1px solid var(--line);margin-top:48px}
.perks-end+.sellcta{margin-top:48px}
.perk .ico{color:var(--gold);width:26px;height:26px;margin-top:2px}
.perk b{display:block;font-size:14.5px}.perk span{font-size:13px;color:var(--mute)}

.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.cat{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--s1);font-weight:600}
.cat:hover{border-color:var(--gold);color:var(--gold-hi)} .cat .ico{width:28px;height:28px;color:var(--gold)}
.sellcta{margin:56px 0 24px;border:1px solid var(--gold-lo);border-radius:var(--r-lg);padding:34px 36px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--s1)}
.sellcta h2{color:var(--gold)}.sellcta p{color:var(--ink2);margin-top:6px;max-width:56ch}

/* búsqueda */
.shop-layout{display:grid;grid-template-columns:250px 1fr;gap:32px;align-items:start;padding-top:8px}
.filters{position:sticky;top:132px;display:flex;flex-direction:column;gap:22px}
.fgroup h4{font-size:16px;margin-bottom:9px;color:var(--ink2)}
.fgroup a,.fgroup button.lnk{display:flex;justify-content:space-between;width:100%;background:none;border:0;text-align:left;padding:5px 0;font-size:14px;color:var(--ink2)}
.fgroup a:hover,.fgroup .lnk:hover{color:var(--gold-hi)} .fgroup a.on{color:var(--gold-hi);font-weight:700}
.fgroup small{color:var(--mute)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.pager{display:flex;justify-content:center;gap:6px;margin:36px 0;flex-wrap:wrap}
.pager button{min-width:42px;height:42px;border-radius:var(--r);border:1px solid var(--line);background:var(--s1)}
.pager button.on{background:var(--gold);color:#000;border-color:var(--gold);font-weight:700}
.pager button:hover:not(.on){border-color:var(--gold)}

/* página de producto */
.pdp{display:grid;grid-template-columns:minmax(0,7fr) minmax(320px,4fr);gap:36px;align-items:start;padding-top:10px}
.gallery{display:grid;grid-template-columns:76px 1fr;gap:14px}
.thumbs{display:flex;flex-direction:column;gap:10px}
.thumbs button{border:1px solid var(--line);border-radius:var(--r);background:var(--s2);padding:3px;aspect-ratio:1/1}
.thumbs button[aria-current=true]{border-color:var(--gold)}
.thumbs img{width:100%;height:100%;object-fit:contain}
.mainimg{background:var(--s2);border-radius:var(--r-lg);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.mainimg img{width:100%;height:100%;object-fit:contain;padding:16px}
.buybox{position:sticky;top:132px;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:var(--s1);display:flex;flex-direction:column;gap:16px}
.buybox .price b{font-size:48px}
.pdp h1{font-size:clamp(28px,3vw,38px);line-height:1.1}
.seller{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--gold-bg);color:var(--gold);display:grid;place-items:center;font:700 20px/1 var(--font-d);flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.specs{width:100%;border-collapse:collapse;font-size:14.5px}
.specs td{padding:10px 14px;border-bottom:1px solid var(--line)}
.specs td:first-child{color:var(--mute);width:38%;background:var(--s1)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden}
.qty button{width:36px;height:38px;background:var(--s1);border:0;font-size:18px}
.qty button:hover:not([disabled]){background:var(--s3);color:var(--gold-hi)} .qty button[disabled]{opacity:.35}
.qty span{min-width:38px;text-align:center;font-weight:600}
.hist{display:grid;gap:6px;font-size:13px}
.hist div{display:grid;grid-template-columns:28px 1fr 34px;gap:10px;align-items:center;color:var(--mute)}
.hist i{height:8px;background:var(--s3);border-radius:4px;overflow:hidden;display:block} .hist i b{display:block;height:100%;background:var(--gold)}
.rev{padding:18px 0;border-bottom:1px solid var(--line)}
.qa{padding:14px 0;border-bottom:1px solid var(--line)} .qa .a{margin:8px 0 0 18px;padding-left:14px;border-left:2px solid var(--gold-lo);color:var(--ink2)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto}
.tabs button{background:none;border:0;padding:12px 18px;font-weight:600;color:var(--ink2);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button:hover{color:var(--ink)} .tabs button.on{color:var(--gold-hi);border-color:var(--gold)}

/* página digital */
.dig{display:grid;grid-template-columns:minmax(0,7fr) minmax(320px,4fr);gap:32px;align-items:start;padding-top:12px}
.dig-head{display:flex;gap:22px;align-items:center;padding:24px;border-radius:var(--r-lg);background:var(--s1);border:1px solid var(--line);margin-bottom:22px}
.dig-head .art{width:104px;height:104px;border-radius:var(--r-lg);background:var(--c);color:var(--tc);display:grid;place-items:center;font:700 44px/1 var(--font-d);flex:none;overflow:hidden}
.dig-head .art img{width:100%;height:100%;object-fit:cover}
.step{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:var(--s1);margin-bottom:16px}
.step h3{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.step h3 i{font-style:normal;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#000;display:grid;place-items:center;font:700 17px/1 var(--font-d)}
.amounts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.amt{text-align:left;background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);padding:14px 15px;display:flex;flex-direction:column;gap:3px;transition:.15s}
.amt:hover{border-color:var(--gold)}
.amt[aria-pressed=true]{border-color:var(--gold);background:var(--gold-bg);box-shadow:inset 0 0 0 1px var(--gold)}
.amt b{font-size:15px;font-weight:600} .amt span{font:700 25px/1.1 var(--font-d);color:var(--gold-hi)} .amt s{font-size:12.5px;color:var(--mute)}

/* carrito */
.cart{display:grid;grid-template-columns:minmax(0,7fr) minmax(320px,4fr);gap:32px;align-items:start;padding-top:12px}
.box{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--s1);overflow:hidden}
.box-h{padding:14px 20px;border-bottom:1px solid var(--line);font-weight:600;display:flex;justify-content:space-between;gap:12px}
.line{display:grid;grid-template-columns:84px 1fr auto;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line);align-items:start}
.line:last-child{border-bottom:0}
.line .thumb{width:84px;height:84px;border-radius:var(--r);background:var(--s2);display:grid;place-items:center;overflow:hidden}
.line .thumb img{width:100%;height:100%;object-fit:contain}
.line .thumb.art{font:700 26px/1 var(--font-d)}
.line.off-line{opacity:.6}
.sum{position:sticky;top:132px;padding:24px;display:flex;flex-direction:column;gap:14px}
.sum .r{display:flex;justify-content:space-between;color:var(--ink2)}
.sum .tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:14px}
.sum .tot b{font:700 38px/1 var(--font-d)}
.radio{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line2);border-radius:var(--r);padding:13px 15px;cursor:pointer}
.radio input{accent-color:var(--gold);margin-top:4px}
.radio:has(input:checked){border-color:var(--gold);background:var(--gold-bg)}

/* pedidos */
.ord{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--s1);margin-bottom:16px;overflow:hidden}
.ord-h{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--mute)}
.ord-b{padding:18px 20px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl li{position:relative;padding:0 0 22px 28px}
.tl li::before{content:'';position:absolute;left:5px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--line2)}
.tl li:first-child::before{background:var(--gold);box-shadow:0 0 0 4px var(--gold-bg)}
.tl li::after{content:'';position:absolute;left:9px;top:18px;bottom:0;width:1px;background:var(--line)}
.tl li:last-child::after{display:none}
.tl time{display:block;font-size:12.5px;color:var(--mute)}
.code{font:600 16px/1.3 ui-monospace,Menlo,Consolas,monospace;background:var(--bg);border:1px dashed var(--gold-lo);padding:10px 14px;border-radius:var(--r);word-break:break-all;display:flex;justify-content:space-between;gap:12px;align-items:center}

/* modal, toast, skeleton, vacíos */
.modal-bg{position:fixed;inset:0;background:rgba(20,18,12,.6);z-index:100;display:grid;place-items:center;padding:20px;overflow-y:auto}
.modal{background:var(--s1);border:1px solid var(--line2);border-radius:var(--r-lg);width:100%;max-width:520px;padding:26px;display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 40px);overflow-y:auto}
.modal.wide{max-width:760px}
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;width:max-content;max-width:92vw}
.toast{background:var(--s3);border:1px solid var(--line2);border-left:3px solid var(--gold);padding:12px 18px;border-radius:var(--r);box-shadow:0 12px 40px rgba(60,48,10,.25);font-size:14.5px}
.toast.bad{border-left-color:var(--bad)} .toast.ok{border-left-color:var(--ok)}
.sk{background:linear-gradient(100deg,var(--s2) 30%,var(--s3) 50%,var(--s2) 70%);background-size:300% 100%;animation:sk 1.4s infinite linear;border-radius:var(--r)}
@keyframes sk{to{background-position:-300% 0}}
.empty{text-align:center;padding:64px 20px;border:1px dashed var(--line2);border-radius:var(--r-lg);color:var(--ink2)}
.empty .ico{width:44px;height:44px;color:var(--line2);margin:0 auto 12px}
.empty h3{color:var(--ink);margin-bottom:6px}
.alert{border:1px solid var(--line2);border-left:3px solid var(--gold);background:var(--s1);border-radius:var(--r);padding:14px 16px;font-size:14.5px}
.alert.bad{border-left-color:var(--bad)} .alert.ok{border-left-color:var(--ok)}
.foot{margin-top:72px;background:var(--bg);border-top:1px solid var(--line);padding:30px 0 44px;color:var(--mute);font-size:13.5px}
.foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot a:hover{color:var(--gold-hi)}

/* paneles (vendedor y admin) */
.app{display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;padding:28px 0}
.side{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:2px}
.side button{display:flex;align-items:center;gap:11px;background:none;border:0;border-radius:var(--r);padding:11px 14px;text-align:left;color:var(--ink2);font-weight:500}
.side button:hover{background:var(--s2);color:var(--ink)}
.side button.on{background:var(--gold-bg);color:var(--gold-hi);font-weight:700}
.side .n{margin-left:auto;background:var(--gold);color:#000;border-radius:9px;font:700 11px/18px var(--font-b);padding:0 7px;min-width:18px;text-align:center}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.kpi{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;background:var(--s1)}
.kpi span{font-size:13px;color:var(--mute);display:block}
.kpi b{font:700 36px/1.1 var(--font-d);display:block;margin-top:4px}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--s1)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-weight:600;color:var(--mute);font-size:12.5px;padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:rgba(0,0,0,.03)}
.thumb-sm{width:46px;height:46px;border-radius:var(--r-sm);background:var(--s2);display:grid;place-items:center;overflow:hidden;flex:none}
.thumb-sm img{width:100%;height:100%;object-fit:contain}
.uploads{display:flex;flex-wrap:wrap;gap:10px}
.up{width:92px;height:92px;border-radius:var(--r);border:1px dashed var(--line2);display:grid;place-items:center;color:var(--mute);position:relative;background:var(--s2);overflow:hidden;cursor:pointer}
.up:hover{border-color:var(--gold);color:var(--gold-hi)}
.up img{width:100%;height:100%;object-fit:cover}
.up .x{position:absolute;right:4px;top:4px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.2);border:0;font-size:14px;line-height:1;display:grid;place-items:center}
.vrow{display:grid;grid-template-columns:1fr 110px 40px;gap:10px;margin-bottom:8px}
.login-card{max-width:460px;margin:80px auto;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}

@media (max-width:1100px){
  .hero-in{grid-template-columns:1fr;gap:28px}
  .perks{grid-template-columns:1fr 1fr}.perk:nth-child(2){border-right:0}.perk:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .pdp,.dig,.cart{grid-template-columns:1fr}
  .buybox,.sum{position:static}
  .app{grid-template-columns:1fr}
  .side{position:static;flex-direction:row;overflow-x:auto;gap:6px}.side button{white-space:nowrap}
}
@media (max-width:820px){
  .wrap{padding:0 16px}
  .top-main{flex-wrap:wrap;height:auto;padding:10px 0 8px;gap:8px 10px}
  .search{order:5;flex-basis:100%;max-width:none}
  .top-link{display:none}
  .shop-layout{grid-template-columns:1fr}
  .filters{position:static;flex-direction:row;overflow-x:auto;gap:24px;padding-bottom:6px}
  .fgroup{min-width:200px}
  .gallery{grid-template-columns:1fr}.thumbs{flex-direction:row;order:2;overflow-x:auto}.thumbs button{width:64px;flex:none}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .price b{font-size:26px}.pbody{padding:11px 12px 13px}
  .rail>.pcard{flex-basis:170px}.rail-btn{display:none}
  .g2,.g3{grid-template-columns:1fr}
  .line{grid-template-columns:64px 1fr;}.line .thumb{width:64px;height:64px}.line>.lt{grid-column:2}
  .sellcta{padding:24px}
  .perks{grid-template-columns:1fr}.perk{border-right:0;border-bottom:1px solid var(--line)}
  .buybox .price b{font-size:40px}
  .hero{padding:28px 0 26px}.hero .tiles{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* portada: banner a todo el ancho (imagen limpia, difuminado solo abajo) y accesos encima, como Mercado Libre */
body{overflow-x:clip}
.home-top{display:flex;flex-direction:column}
.home-top #banners{order:0}.home-top #home-hero{order:2}.home-top #accesos{order:3}
.home-top.has-bn #accesos{order:1;position:relative;z-index:3;margin-top:calc(-1 * clamp(70px,7vw,110px))}
.home-top.has-bn #home-hero{border-bottom:0;padding:34px 0 26px}
.bn-wrap{position:relative;left:50%;width:100vw;transform:translateX(-50%)}
.bn-wrap.on{height:clamp(200px,25vw,470px)}
.bn-wrap.sec-bn.on{margin-bottom:-24px}
.bn{position:absolute;inset:0;overflow:hidden;background:var(--bg);
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 58%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 58%,transparent 100%)}
.bn-track{position:absolute;inset:0}
.bn-slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
.bn-slide.on{opacity:1;visibility:visible}
.bn-slide img,.bn-slide video{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.bn-btn{position:absolute;top:36%;transform:translateY(-50%);left:14px;width:46px;height:46px;border:0;cursor:pointer;background:rgba(255,255,255,.92);color:var(--ink);border-radius:50%;display:grid;place-items:center;box-shadow:0 2px 12px rgba(0,0,0,.28);transition:background .2s,transform .2s;z-index:2}
.bn-btn.n{right:14px;left:auto} .bn-btn:hover{background:var(--gold);transform:translateY(-50%) scale(1.08)}
.bn-btn .ico{width:22px;height:22px}
.bn-dots{position:absolute;left:0;right:0;bottom:clamp(84px,8vw,124px);display:flex;justify-content:center;gap:8px;z-index:2}
.bn-dots button{width:9px;height:9px;padding:0;border-radius:5px;border:1px solid rgba(255,255,255,.7);background:rgba(0,0,0,.35);cursor:pointer;transition:width .3s,background .3s}
.bn-dots button.on{background:var(--gold);border-color:var(--gold);width:26px}
/* celular: banner como tarjeta con esquinas redondeadas (imagen completa, sin difuminado), como Mercado Libre */
@media (max-width:640px){
  .bn-wrap{left:0;width:auto;transform:none;margin-top:12px}
  .bn-wrap.on,.bn-wrap.sec-bn.on{height:auto;aspect-ratio:5/2;margin-bottom:0}
  .bn{border-radius:16px;-webkit-mask-image:none;mask-image:none;box-shadow:0 2px 12px rgba(70,55,10,.2)}
  .bn-btn{display:none}.bn-dots{bottom:8px}
  .home-top.has-bn #accesos{margin-top:-18px}
}

/* botones del hero con efecto */
.btn-fx{position:relative;overflow:hidden;isolation:isolate;transition:transform .2s,box-shadow .25s,border-color .2s,color .25s,background-size .35s ease}
.btn-fx::before{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-22deg)}
.btn-fx:hover:not([disabled]){transform:translateY(-3px)}
.btn-fx:active{transform:translateY(0) scale(.98)}
.btn-fx.btn-gold{animation:fx-pulse 2.6s ease-out infinite}
.btn-fx.btn-gold::before{animation:fx-shine 3.6s ease-in-out infinite}
.btn-fx.btn-gold:hover:not([disabled]){box-shadow:0 10px 30px rgba(217,171,46,.5);animation:none}
.btn-fx.btn-line{background-color:rgba(255,255,255,.7);color:var(--ink);background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;background-position:0 0;background-size:0% 100%;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:rgba(0,0,0,.22)}
.btn-fx.btn-line:hover:not([disabled]){background-size:100% 100%;color:#000;border-color:var(--gold);box-shadow:0 10px 28px rgba(217,171,46,.35)}
.btn-fx.btn-line:hover::before{animation:fx-shine .8s ease-in-out 1}
@keyframes fx-shine{0%,55%{left:-70%}100%{left:130%}}
@keyframes fx-pulse{0%{box-shadow:0 0 0 0 rgba(217,171,46,.55)}70%,100%{box-shadow:0 0 0 14px rgba(217,171,46,0)}}
/* categorias con foto */
.cats.pics{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.cat.pic{position:relative;overflow:hidden;padding:0;min-height:130px;align-items:flex-end;background:var(--s2)}
.cat.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.95;transition:transform .3s,opacity .3s}
.cat.pic:hover img{transform:scale(1.06);opacity:1}
.cat.pic span{position:relative;z-index:1;width:100%;padding:34px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff;font-weight:700}
.cat.pic .ico{position:absolute;top:14px;left:14px;opacity:.9}
@media (prefers-reduced-motion:reduce){.bn-slide{transition:none}}

/* ---------- accesos rápidos con foto (inicio) ---------- */
.accesos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.acc{position:relative;display:flex;align-items:flex-end;min-height:150px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(135deg,var(--s2),var(--s1))}
.acc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .25s,transform .35s}
.acc{color:#fff}
.acc::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.05) 72%)}
.acc:hover{border-color:var(--gold)} .acc:hover img{opacity:.78;transform:scale(1.04)}
.acc div{position:relative;z-index:1;padding:16px 18px}
.acc b{display:block;font:700 28px/1 var(--font-d);letter-spacing:.01em}
.acc span{font-size:13px;color:#f2cb5c}
@media (max-width:820px){.accesos{grid-template-columns:1fr}.acc{min-height:110px}}

/* ---------- servicios: paquetes ---------- */
.pkgs{display:flex;flex-direction:column;gap:8px}
.pkg{display:block;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--line2);border-radius:var(--r);background:var(--s2);transition:border-color .15s}
.pkg:hover{border-color:var(--gold)} .pkg[aria-pressed=true]{border-color:var(--gold);background:var(--gold-bg)}
.pkg .top{display:flex;justify-content:space-between;gap:10px;font-weight:600}
.pkg small{display:block;margin-top:4px;color:var(--ink2);font-size:13px}
.price .desde{font-size:12.5px;color:var(--mute);margin-right:6px;font-weight:500}
.pbox{border:1px solid var(--line);border-radius:var(--r);padding:12px;margin:10px 0;display:flex;flex-direction:column;gap:8px}
.prow{display:grid;grid-template-columns:1fr 130px 40px;gap:10px}

/* ---------- servicios: mensajes y entrega de archivos ---------- */
.chat-list{display:flex;flex-direction:column;gap:10px;max-height:46vh;overflow-y:auto;padding:4px 2px}
.msg{max-width:88%;padding:10px 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--s2);align-self:flex-start}
.msg.mine{align-self:flex-end;background:var(--gold-bg);border-color:var(--gold-lo)}
.msg .who{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--mute);margin-bottom:3px}
.msg p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px}
.msg .file{margin-top:8px}
.chat-form{display:flex;flex-direction:column;gap:10px}
@media (max-width:560px){.prow{grid-template-columns:1fr 100px 40px}}

/* tema crema: relieve suave en tarjetas */
.pcard,.cat,.btile,.acc,.perks{box-shadow:0 1px 2px rgba(70,55,10,.06)}
.pcard:hover,.cat:hover,.btile:hover{box-shadow:0 8px 24px rgba(70,55,10,.14)}

/* logo en imagen */
.logo{display:block;line-height:0}
.logo img{height:50px;width:auto;display:block}
@media (max-width:640px){.logo img{height:40px}}

/* menu desplegable de cuenta (tarjeta clara sobre el encabezado oscuro) */
.top-actions{position:relative}
.acct-menu{--bg:#f6f3ea;--s1:#fff;--s2:#efebdf;--line:#e6e0cf;--ink:#1d1b16;--ink2:#4b473c;--mute:#7c7666;--gold-hi:#8a6508;
  position:absolute;right:0;top:calc(100% + 10px);width:300px;max-width:calc(100vw - 24px);background:#fff;color:var(--ink);border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.4);z-index:80;overflow:hidden;animation:acct-in .16s ease-out}
.acct-menu::before{content:"";position:absolute;top:-6px;right:14px;width:12px;height:12px;background:#fff;transform:rotate(45deg)}
.acct-head{position:relative;display:flex;align-items:center;gap:12px;padding:18px 18px 14px;border-bottom:1px solid var(--line);background:#fff}
.acct-av{flex:none;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#e9bf48,#c99a1e);color:#0e0e0d;display:grid;place-items:center;font:700 20px/1 var(--font-d)}
.acct-who{min-width:0}.acct-who b{display:block;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-who small{display:block;color:var(--mute);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-sec{padding:6px 0;border-top:1px solid var(--line)}.acct-head+.acct-sec{border-top:0}
.acct-sec a,.acct-sec button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 18px;background:none;border:0;
  text-align:left;color:var(--ink);font:inherit;font-size:14.5px;cursor:pointer}
.acct-sec a:hover,.acct-sec button:hover{background:var(--s2);color:var(--gold-hi)}
.acct-new{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;background:#c99a1e;color:#0e0e0d;border-radius:20px;padding:2px 8px}
@keyframes acct-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.acct-menu{animation:none}}

/* pagina Mi cuenta (estilo panel lateral + tarjetas) */
.acct-av img,.acct-av.big img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.acct-av{overflow:hidden}
a.acct-head{color:inherit}a.acct-head:hover{background:var(--s2)}
.cta{display:grid;grid-template-columns:240px 1fr;gap:32px;margin-top:28px;align-items:start}
.cta-side{position:sticky;top:150px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 0;overflow:hidden}
.cta-side-h{font-family:var(--font-d);font-size:22px;font-weight:700;padding:10px 20px 8px}
.cta-side a{display:block;padding:10px 20px;color:var(--ink2);font-size:14.5px;border-left:3px solid transparent}
.cta-side a:hover{background:var(--s2);color:var(--ink)}
.cta-side a.on{color:var(--ink);font-weight:600;border-left-color:var(--gold);background:var(--gold-bg)}
.cta-side hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.cta-prof{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.cta-prof h2{margin-bottom:4px}
.acct-av.big{width:84px;height:84px;font-size:36px}
.cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.cta-card{display:flex;flex-direction:column;gap:6px;padding:20px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(70,55,10,.06);transition:transform .15s,box-shadow .2s,border-color .2s}
.cta-card:hover{transform:translateY(-2px);border-color:var(--gold-lo);box-shadow:0 8px 24px rgba(70,55,10,.14)}
.cta-ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gold-bg);color:var(--gold-hi);margin-bottom:6px}
.cta-ic .ico{width:22px;height:22px}
.cta-card b{font-size:16px}.cta-card small{color:var(--mute);font-size:13.5px;line-height:1.4}
.dir-card{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:18px 20px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:12px}
.dir-card .muted{font-size:14px}
@media (max-width:820px){.cta{grid-template-columns:1fr}.cta-side{position:static;display:flex;flex-wrap:wrap;padding:6px}.cta-side-h{width:100%}.cta-side a{border-left:0;border-radius:8px;padding:8px 12px}.cta-side hr{display:none}}

/* mi cuenta: grupos del menu, respuestas, puntos, formulario fiscal, ayuda */
.cta-g{font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--mute);padding:14px 20px 4px}
.cta-resp{margin-top:10px;padding:10px 14px;border-left:3px solid var(--gold);background:var(--gold-bg);border-radius:0 8px 8px 0;font-size:14px}
.cta-resp b{display:block;font-size:12.5px;margin-bottom:2px}
.cta-lp{display:inline-flex;flex-direction:column;gap:2px;padding:22px 34px;border-radius:var(--r-lg);background:linear-gradient(135deg,#1d1b16,#0e0e0d);color:#f4f0e6;border:1px solid var(--gold-lo)}
.cta-lp small{color:#bdb8a9;font-size:13px}.cta-lp b{font-family:var(--font-d);font-size:56px;line-height:1;color:#f2cb5c}.cta-lp span{font-size:13px;color:#bdb8a9}
.cta-pos{color:var(--ok);font-size:18px}.cta-neg{color:var(--bad);font-size:18px}
.fis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.fis-grid label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600}
.req{color:#c8352b}
.faq{background:var(--s1);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;padding:0 18px}
.faq summary{cursor:pointer;padding:15px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--gold-hi);font-size:20px;line-height:1}
.faq[open] summary::after{content:"\2212"}.faq p{margin:0 0 16px;color:var(--ink2);line-height:1.6}

/* portada: titulo y botones centrados, botones en una sola fila */
.home-top #home-hero .hero-in{grid-template-columns:1fr;gap:26px;justify-items:center;text-align:center}
.home-top #home-hero .row{justify-content:center;flex-wrap:nowrap;gap:14px}
.home-top #home-hero .tiles{width:100%;max-width:980px}
.hero .tiles:empty{display:none}
@media (max-width:760px){.home-top #home-hero .row{flex-wrap:wrap}.home-top #home-hero .btn-lg{flex:1 1 100%}}