/* Tienda de merch (24 oct 2026). Solo la cargan /merch/, sus fichas y el carrito.
   La grilla muestra el diseno sobre negro, el color de las prendas. La ficha muestra la prenda
   en grande, con el fondo del tema (merch_web.py arma una version oscura y una clara). */
.mx-s{padding:40px 0 64px}
.mx-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap}
.mx-top .sec{margin-bottom:22px}
.mx-s .bt.mx-cb{width:auto;margin:0 0 22px;min-height:48px;font-size:16px;padding-right:20px;gap:12px}
.mx-n{display:inline-block;min-width:1.4em;text-align:center;font-variant-numeric:tabular-nums;color:var(--g2)}
.mx-fl{flex-wrap:wrap;gap:8px 22px;margin:8px 0 26px}
.mx-fl .filtro span{margin-left:6px;font-size:12px;color:var(--g2);font-variant-numeric:tabular-nums}
.mx-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:28px 16px}
.mx{display:block;color:inherit;text-decoration:none}
.mx-i{aspect-ratio:1;background:#000;overflow:hidden}
.mx-i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .32s cubic-bezier(.16,1,.3,1)}
.mx:hover .mx-i img{transform:scale(1.03)}
.mx-m{margin:12px 0 2px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--g2)}
.mx h3{margin:0;font-size:18px;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.mx:hover h3{color:var(--rjt)}
.mx-p{margin:4px 0 0;font-size:15px;color:var(--g1);font-variant-numeric:tabular-nums}
/* ficha */
.mx-f{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:48px;align-items:start}
.mx-fig{display:grid;gap:28px}
.mx-v{margin:0}.mx-v img{display:block;width:100%;height:auto}
.mx-v figcaption{margin:10px 0 0;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--g2)}
.mx-s .t-osc{display:none}
:root[data-theme="dark"] .mx-s .t-cla{display:none}:root[data-theme="dark"] .mx-s .t-osc{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .mx-s .t-cla{display:none}:root:not([data-theme]) .mx-s .t-osc{display:block}}
.mx-vd img{max-width:640px;border:1px solid var(--gl)}
.mx-va img{max-width:640px}
@media (min-width:901px){.mx-d{position:sticky;top:110px}}
.mx-d .st a{color:inherit}.mx-d .st a:hover{color:var(--rjt)}
.mx-d .sec{margin-bottom:12px}
.mx-pr{font-size:20px;font-weight:500;margin:0 0 26px;font-variant-numeric:tabular-nums}
.mx-dl{margin:0 0 30px}
.mx-add{display:grid;gap:20px}
.mx-t{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mx-t legend{font-size:13px;color:var(--g2);margin:0 0 10px;padding:0}
.mx-t label{position:relative}
.mx-t input{position:absolute;opacity:0;width:1px;height:1px}
.mx-t span{display:flex;align-items:center;justify-content:center;min-width:52px;height:46px;padding:0 12px;border:1px solid var(--bd);font-size:15px;font-weight:500;cursor:pointer}
.mx-t label:hover span{border-color:var(--ng)}
.mx-t input:checked+span{background:var(--ng);color:var(--bl);border-color:var(--ng)}
.mx-t input:focus-visible+span{outline:2px solid var(--rj);outline-offset:3px}
.mx-q input{max-width:120px}
.mx-add .bt{margin:0}
.mx-msg{margin:0;min-height:1.5em;font-size:15px;color:var(--g1)}
.mx-msg.err{color:var(--rjt)}
.mx-d>.bt.mx-cb{margin:8px 0 0}
.mx-nota{font-size:14px;line-height:1.5;color:var(--g2);margin:18px 0 0;max-width:46ch}
/* carrito */
.mx-car .sec{margin-bottom:26px}
.mx-car .st a{color:inherit}
.mx-lista{display:grid;max-width:820px}
.mx-fila{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:6px 20px;align-items:center;padding:16px 0;border-top:1px solid var(--gl)}
.mx-fila:last-child{border-bottom:1px solid var(--gl)}
.mx-fila img{grid-row:span 2;width:72px;height:72px;object-fit:cover;background:#000;display:block}
.mx-fila b{font-weight:500;font-size:16px}
.mx-fila b a{color:inherit}.mx-fila b a:hover{color:var(--rjt)}
.mx-fila .mx-v{font-size:14px;color:var(--g2);margin:2px 0 0}
.mx-lp{text-align:right;font-variant-numeric:tabular-nums;font-size:15px}
.mx-ctl{grid-column:2 / -1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mx-ctl button{font:inherit;font-size:15px;background:none;color:var(--ng);border:1px solid var(--bd);min-width:40px;height:40px;padding:0 12px;cursor:pointer}
.mx-ctl button:hover{border-color:var(--ng)}
.mx-ctl button.mx-x{margin-left:auto;font-size:13px;letter-spacing:.04em}
.mx-ctl button.mx-x:hover{border-color:var(--rj);color:var(--rjt)}
.mx-ctl output{min-width:2em;text-align:center;font-variant-numeric:tabular-nums}
.mx-vacio{font-size:18px;color:var(--g1);margin:0 0 18px}
.mx-car>.bt{width:auto}
.mx-tot{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;max-width:820px;padding:22px 0 30px}
.mx-tot span{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--g2)}
.mx-tot b{font-size:24px;font-weight:500;font-variant-numeric:tabular-nums}
.mx-tot small{flex-basis:100%;font-size:14px;color:var(--g2)}
.mx-h2{font-size:clamp(20px,2.4vw,26px);font-weight:500;letter-spacing:-.015em;margin:12px 0 0}
.mx-co .bt:disabled{opacity:.45;cursor:not-allowed}
.mx-ok{display:grid;gap:16px;justify-items:start;max-width:640px;margin:0 0 80px}
.mx-ok p.mx-cod{font-size:clamp(28px,4vw,40px);font-weight:500;letter-spacing:-.02em;margin:0;color:var(--ng)}
.mx[hidden],.mx-tot[hidden],.mx-ok[hidden]{display:none}
.mx-ok pre{font:inherit;font-size:17px;line-height:1.55;white-space:pre-wrap;margin:0;padding:16px 18px;border-left:1px solid var(--rj);background:var(--sup)}
.mx-ok p{margin:0;font-size:16.5px;line-height:1.55;color:var(--g1)}
.mx-ok .bt{width:auto}
@media (max-width:900px){.mx-f{grid-template-columns:1fr;gap:28px}
 /* en pantalla angosta las vistas se deslizan de lado y el nombre y la compra quedan a la vista */
 .mx-fig{grid-auto-flow:column;grid-auto-columns:86%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none;margin:0 -16px;padding:0 16px}
 .mx-fig::-webkit-scrollbar{display:none}.mx-v{scroll-snap-align:start}.mx-vd img,.mx-va img{max-width:none}}
@media (max-width:700px){.mx-s{padding:24px 0 48px}.mx-g{grid-template-columns:1fr 1fr;gap:22px 10px}.mx h3{font-size:15.5px}.mx-m{font-size:11px;letter-spacing:.04em}
 .mx-fila{grid-template-columns:56px minmax(0,1fr) auto;gap:4px 12px}.mx-fila img{width:56px;height:56px}}
@media (prefers-reduced-motion:reduce){.mx-i img{transition:none}}
/* tienda por linea y diseno (24 oct 2026, segunda vuelta). Una fila por diseno con sus prendas al lado */
.mx-fls{display:grid;gap:10px;margin:8px 0 34px}
.mx-fls .mx-fl{margin:0;align-items:baseline}
.mx-fl b{font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--g2);min-width:64px}
.mx-ln{margin:0 0 56px}.mx-ln[hidden]{display:none}
.mx-lh{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;font-size:clamp(22px,2.6vw,30px);font-weight:500;letter-spacing:-.015em;margin:0 0 6px;padding:0 0 14px;border-bottom:1px solid var(--rj)}
.mx-lh span{font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--g2)}
.mx-hd,.mx-r{display:grid;grid-template-columns:minmax(170px,1.15fr) repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.mx-hd{padding:12px 0 8px;font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--g2)}
.mx-r{padding:12px 0;border-top:1px solid var(--gl)}.mx-r[hidden]{display:none}
.mx-dz{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center;align-self:center}
.mx-dz img{width:72px;height:72px;object-fit:cover;background:#000;display:block}
.mx-dz h3{margin:0;font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.mx-dz p{margin:3px 0 0;font-size:13px;color:var(--g2)}
.mx-c{display:grid;gap:2px;color:inherit;text-decoration:none}
.mx-ci{display:block;height:clamp(120px,12vw,176px);overflow:hidden;margin:0 0 6px}
.mx-ci img{width:100%;height:100%;object-fit:contain;object-position:left center;transition:transform .32s cubic-bezier(.16,1,.3,1)}
a.mx-c:hover .mx-ci img{transform:scale(1.04)}
a.mx-c:hover .mx-m{color:var(--rjt)}
.mx-c .mx-m{margin:0;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ng)}
.mx-c .mx-p{font-size:13px;color:var(--g2)}
.mx-tienda[data-p] :is(.mx-hd,.mx-r){grid-template-columns:minmax(170px,1.15fr) minmax(0,1fr) minmax(0,2fr)}
.mx-tienda[data-p="poleron"] :is(.mx-c,.mx-hd span[data-v]):not([data-v="poleron"]),
.mx-tienda[data-p="polera"] :is(.mx-c,.mx-hd span[data-v]):not([data-v="polera"]),
.mx-tienda[data-p="tote"] :is(.mx-c,.mx-hd span[data-v]):not([data-v="tote"]){display:none}
.mx-d .st a+a,.mx-d .st a{color:inherit}
.mx-pl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;align-items:start}
.mx-pl .mx-v img{max-width:none}
.mx-pln{grid-column:1 / -1;margin:0;font-size:13.5px;color:var(--g2)}
.mx-otros{margin:22px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mx-otros p{flex-basis:100%;margin:0 0 2px;font-size:13px;color:var(--g2)}
.mx-otros a{display:inline-flex;align-items:center;height:40px;padding:0 14px;border:1px solid var(--bd);color:var(--ng);font-size:14px;font-weight:500;text-decoration:none}
.mx-otros a:hover{border-color:var(--ng)}
@media (max-width:700px){
 .mx-hd{display:none}
 .mx-r,.mx-tienda[data-p] .mx-r{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px;padding:16px 0}
 .mx-ci{height:auto;aspect-ratio:3/4}.mx-ci img{object-position:center}
 .mx-dz{grid-column:1 / -1;grid-template-columns:48px 1fr}.mx-dz img{width:48px;height:48px}
 .mx-c .mx-m{font-size:10.5px;letter-spacing:.04em}.mx-c .mx-p{font-size:11.5px}
 .mx-tienda[data-p] .mx-r{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .mx-pl{grid-column:auto}
}
/* en el carrusel del telefono las vistas del plano se suman como una vista mas */
@media (max-width:900px){.mx-fig .mx-pl{display:contents}.mx-fig .mx-pln{display:none}}
@media (prefers-reduced-motion:reduce){.mx-ci img{transition:none}}
@media (min-width:701px){.mx-c .mx-m{display:none}}