/* Layout: sticky header with search, catalog with filter sidebar, outfit builder with live board, side drawers for menu and cart.
   Color: concrete (bg), ink (fg), cobalt (accent), tile grey for product photos, WhatsApp green only on WhatsApp actions.
   Type: Bricolage Grotesque for display, Figtree for text. */
:root{
  --bg:#EDEDEA; --surface:#F8F8F6; --fg:#15171C; --muted:#5C606A; --line:#D2D3CE;
  --accent:#2B3FE0; --accent-fg:#FFFFFF; --accent-soft:#DDE0FA;
  --tile:#DEDFDA; --gs:rgba(21,23,28,.5);
  --good:#1B7448; --warn:#A8560A; --bad:#B3261E;
  --wa:#1E9E50; --wa-fg:#FFFFFF; --scrim:rgba(12,14,18,.55);
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --text:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#101216; --surface:#1A1D24; --fg:#ECECE8; --muted:#A1A5AE; --line:#2C3039;
  --accent:#8E9BFF; --accent-fg:#0E1020; --accent-soft:#252B52;
  --tile:#262A33; --gs:rgba(255,255,255,.45);
  --good:#5FD39A; --warn:#F0A24A; --bad:#FF8A80;
  --wa:#25D366; --wa-fg:#06210F; --scrim:rgba(0,0,0,.65); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#101216; --surface:#1A1D24; --fg:#ECECE8; --muted:#A1A5AE; --line:#2C3039;
  --accent:#8E9BFF; --accent-fg:#0E1020; --accent-soft:#252B52;
  --tile:#262A33; --gs:rgba(255,255,255,.45);
  --good:#5FD39A; --warn:#F0A24A; --bad:#FF8A80;
  --wa:#25D366; --wa-fg:#06210F; --scrim:rgba(0,0,0,.65); color-scheme:dark}

[hidden]{display:none!important}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:16px/1.5 var(--text);padding-inline:0;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.02em;line-height:1.02}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,3vw,32px)}
section{scroll-margin-top:120px}
.sec{padding-block:clamp(44px,7vw,88px)}
.sec h2{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:780}
.sec .lede{color:var(--muted);max-width:56ch;margin-top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:10px;background:var(--accent);color:var(--accent-fg);font-weight:650;text-decoration:none;border:1.5px solid var(--accent);transition:transform .12s,filter .12s}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--fg)}
.btn.wa{background:var(--wa);border-color:var(--wa);color:var(--wa-fg)}
.btn.sm{min-height:36px;padding:6px 14px;font-size:.9rem}
.btn[disabled]{opacity:.45;pointer-events:none}
.ico{width:20px;height:20px;flex:none}
.link{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:12px 24px;padding-block:12px}
.logo{font-family:var(--display);font-weight:800;font-size:1.7rem;letter-spacing:-.04em;text-decoration:none;line-height:1}
.logo i{color:var(--accent);font-style:normal}
.search{position:relative;max-width:560px;width:100%;justify-self:center}
.search input,.field input{width:100%;min-height:44px;padding:10px 14px 10px 42px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);outline:none}
.search input:focus,.field input:focus{border-color:var(--accent)}
.search svg,.field svg{position:absolute;left:14px;top:50%;translate:0 -50%;width:18px;height:18px;color:var(--muted);pointer-events:none}
.actions{display:flex;gap:4px}
.ib{position:relative;width:44px;height:44px;display:grid;place-items:center;border-radius:12px}
.ib:hover{background:var(--surface)}
.ib .n{position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding-inline:5px;border-radius:9px;background:var(--accent);color:var(--accent-fg);font-size:.72rem;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.ib .n:empty{display:none}
.topnav{display:flex;gap:2px}
.topnav a{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border-radius:999px;font-weight:600;font-size:.95rem;text-decoration:none;color:var(--muted)}
.topnav a:hover{color:var(--fg);background:var(--surface)}
.topnav a[aria-current="page"]{color:var(--fg);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line)}
@media (max-width:1040px){.topnav{display:none}.top .wrap{grid-template-columns:auto minmax(0,1fr) auto}}
@media (max-width:760px){.top .wrap{grid-template-columns:minmax(0,1fr) auto}.search{grid-column:1/-1;grid-row:2;max-width:none}}

/* hero */
.hero{padding-block:clamp(28px,5vw,64px) clamp(36px,6vw,72px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(2.7rem,7.4vw,5.6rem);font-weight:800;font-variation-settings:"wdth" 82}
.hero p.sub{margin-top:18px;font-size:1.12rem;color:var(--muted);max-width:44ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.perks{display:flex;flex-wrap:wrap;gap:8px 22px;margin:28px 0 0;padding:0;list-style:none;font-size:.92rem;color:var(--muted)}
.perks li{display:flex;align-items:center;gap:8px}
.perks svg{width:16px;height:16px;color:var(--accent)}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.collage .t{border-radius:18px;display:grid;place-items:center;aspect-ratio:4/5;overflow:hidden}
.collage .t:nth-child(1){grid-row:span 2;aspect-ratio:auto;background:#E9C14A}
.collage .t:nth-child(2){background:#47638A}
.collage .t:nth-child(3){background:#E7B9C0}
.collage svg{width:68%}
.collage .t:nth-child(1) svg{width:74%}
.collage .t:nth-child(1){--gs:rgba(21,23,28,.5)}
.collage .t:nth-child(2){--gs:rgba(255,255,255,.55)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.collage{max-width:460px}}

/* catalog */
.head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:8px 24px}
#count{color:var(--muted);font-variant-numeric:tabular-nums}
.bar{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;align-items:center}
.field{position:relative;flex:1 1 280px;min-width:0}
.dd{position:relative}
.dd-btn,.sel{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);font-weight:550}
.dd-btn:hover,.sel:hover{border-color:var(--fg)}
.dd-btn[aria-expanded="true"]{border-color:var(--accent)}
.dd-btn .k{background:var(--accent);color:var(--accent-fg);border-radius:999px;font-size:.75rem;padding:1px 8px;font-weight:700}
.dd-btn .k:empty{display:none}
.dd-panel{position:absolute;z-index:20;top:calc(100% + 8px);left:0;width:min(340px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.dd-panel h4{margin:14px 0 8px;font-size:.82rem;font-weight:650;color:var(--muted)}
.dd-panel h4:first-child{margin-top:0}
.dd-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.sz{display:flex;flex-wrap:wrap;gap:6px}
.sz label,.szb{position:relative;min-width:46px;height:40px;padding-inline:10px;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;font-weight:600;font-size:.92rem;background:var(--bg);font-variant-numeric:tabular-nums}
.sz input{position:absolute;opacity:0;inset:0;cursor:pointer}
.sz label:has(input:checked),.szb.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.sz label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.szb[disabled]{opacity:.4;text-decoration:line-through;cursor:not-allowed}
select.sel{appearance:none;padding-right:16px}
.cats{display:flex;gap:8px;overflow-x:auto;padding-block:16px 4px;scrollbar-width:thin}
.cats button{flex:none;min-height:40px;padding:6px 16px;border-radius:999px;border:1.5px solid var(--line);font-weight:600;font-size:.93rem}
.cats button:hover{border-color:var(--fg)}
.cats button[aria-selected="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:3px 6px 3px 12px;border-radius:999px;background:var(--accent-soft);font-size:.86rem;font-weight:600}
.chip button{width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
.chip button:hover{background:var(--accent);color:var(--accent-fg)}
.chip svg{width:12px;height:12px}
.layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:32px;margin-top:20px;align-items:start}
#filters{position:sticky;top:132px;display:flex;flex-direction:column;gap:22px;padding-right:8px}
#filters h4{margin:0 0 10px;font-size:.84rem;font-weight:650;color:var(--muted)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{min-height:36px;padding:4px 14px;border:1.5px solid var(--line);border-radius:999px;font-weight:600;font-size:.9rem}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.hint{font-size:.8rem;color:var(--muted);margin-top:6px}
.sw{display:flex;flex-wrap:wrap;gap:8px}
.sw button{width:32px;height:32px;border-radius:50%;border:2px solid var(--bg);box-shadow:0 0 0 1.5px var(--line);position:relative}
.sw button[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--accent)}
.sw.s button{width:22px;height:22px;border-width:1.5px}
.sw.m button{width:28px;height:28px}
.rng{width:100%;accent-color:var(--accent)}
.rng-l{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.chk{display:flex;align-items:center;gap:10px;min-height:34px;cursor:pointer;font-size:.95rem}
.chk input{width:18px;height:18px;accent-color:var(--accent)}
.only-m{display:none}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  #filters{position:static;display:none;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
  #filters.open{display:flex}
  .only-m{display:inline-flex}
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px 16px}
.card{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0}
.tile{position:relative;display:grid;place-items:center;aspect-ratio:4/5;background:var(--tile);border-radius:16px;overflow:hidden;width:100%;transition:filter .15s}
.tile svg{width:64%;transition:transform .25s}
.card:hover .tile svg{transform:scale(1.05)}
.badge{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:700;background:var(--fg);color:var(--bg)}
.badge.of{background:var(--accent);color:var(--accent-fg)}
.badge.ul{background:var(--warn);color:#fff}
.heart{position:absolute;top:6px;right:6px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--fg);z-index:2}
.heart:hover{background:var(--surface)}
.heart svg{width:20px;height:20px}
.heart[aria-pressed="true"]{color:var(--bad)}
.heart[aria-pressed="true"] svg{fill:currentColor}
.card h3{font-family:var(--text);font-size:1rem;font-weight:650;letter-spacing:0;line-height:1.25}
.card .m{display:flex;gap:10px;font-size:.82rem;color:var(--muted)}
.price{display:flex;align-items:baseline;gap:8px;font-weight:700;font-variant-numeric:tabular-nums}
.price s{font-weight:500;color:var(--muted);font-size:.88rem}
.price .off{font-size:.78rem;color:var(--good);font-weight:700}
.talles{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.talles b{color:var(--fg);background:var(--accent-soft);border-radius:4px;padding:0 3px}
.empty{grid-column:1/-1;padding:48px 20px;text-align:center;border:1.5px dashed var(--line);border-radius:16px}
.empty h3{font-size:1.5rem}
.empty p{color:var(--muted);margin:8px 0 18px}

/* outfit */
.of{background:var(--surface);border-block:1px solid var(--line)}
.of-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;margin-top:32px;align-items:start}
.of-layout>*,.layout>*,.loc>*,.about>*{min-width:0}
.slot{padding-block:20px;border-top:1px solid var(--line)}
.slot:first-child{border-top:0;padding-top:0}
.slot-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.slot-h h3{font-family:var(--text);font-size:1.05rem;font-weight:700;letter-spacing:0}
.scroller{display:flex;gap:10px;overflow-x:auto;padding:12px 2px 8px;scrollbar-width:thin}
.opt{flex:none;width:88px;text-align:left;display:flex;flex-direction:column;gap:6px}
.opt .tile{border-radius:12px;border:2px solid transparent}
.opt .tile svg{width:70%}
.opt:hover .tile svg{transform:none}
.opt[aria-pressed="true"] .tile{border-color:var(--accent)}
.opt span{font-size:.74rem;line-height:1.2;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sel-box{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:12px;background:var(--bg);margin-top:6px}
.sel-box .nm{display:flex;justify-content:space-between;gap:12px;font-weight:650}
.sel-box label.t{font-size:.8rem;color:var(--muted);display:block;margin-bottom:6px}
.board{position:sticky;top:132px;background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:18px}
.flat{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"a b" "c d" "e e";gap:10px}
.flat .t{background:var(--tile);border-radius:12px;display:grid;place-items:center;aspect-ratio:1;position:relative;overflow:hidden}
.flat .t svg{width:62%}
.flat .t.ph{background:transparent;border:1.5px dashed var(--line);color:var(--muted);font-size:.8rem;text-align:center;padding:8px}
.flat .t:nth-child(1){grid-area:a}.flat .t:nth-child(2){grid-area:b}.flat .t:nth-child(3){grid-area:c}.flat .t:nth-child(4){grid-area:d}
.flat .t:nth-child(5){grid-area:e;aspect-ratio:2.6}
.flat .t:nth-child(5) svg{width:30%}
.flat .t small{position:absolute;left:8px;bottom:6px;font-size:.7rem;font-weight:650;color:var(--muted)}
.tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;font-weight:700}
.tot strong{font-family:var(--display);font-size:1.7rem;font-variant-numeric:tabular-nums}
.board .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.board .row .btn{flex:1 1 auto}
@media (max-width:940px){.of-layout{grid-template-columns:1fr}.board{position:static}}

/* how */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:32px 0 0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;padding-top:18px;border-top:2px solid var(--fg)}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:800;font-size:2.4rem;color:var(--accent);line-height:1;display:block;margin-bottom:10px}
.steps h3{font-family:var(--text);font-size:1.12rem;letter-spacing:0;font-weight:700;margin-bottom:6px}
.steps p{color:var(--muted)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.about .prose p{margin-top:14px;max-width:58ch}
.vals{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
.vals li{padding:18px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px}
.vals li:last-child{border-bottom:1px solid var(--line)}
.vals b{font-family:var(--display);font-size:1.3rem;letter-spacing:-.01em;line-height:1.1}
.vals span{color:var(--muted)}
@media (max-width:820px){.about{grid-template-columns:1fr}.vals li{grid-template-columns:1fr;gap:4px}}

/* location */
.loc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,48px);margin-top:32px;align-items:stretch}
.info{display:flex;flex-direction:column;gap:20px}
.info dl{margin:0;display:grid;gap:14px}
.info dt{font-size:.82rem;color:var(--muted);font-weight:600}
.info dd{margin:2px 0 0;font-weight:600;font-size:1.05rem}
.hrs{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;font-variant-numeric:tabular-nums;font-weight:500;font-size:1rem}
.hrs span:nth-child(odd){color:var(--muted)}
.map{position:relative;min-height:340px;border-radius:20px;overflow:hidden;background:var(--tile);border:1px solid var(--line)}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map .pin{position:absolute;left:52%;top:46%;translate:-50% -100%;display:flex;flex-direction:column;align-items:center}
.map .pin b{background:var(--fg);color:var(--bg);padding:6px 12px;border-radius:999px;font-size:.85rem;white-space:nowrap}
.map .pin svg{position:static;width:30px;height:38px;color:var(--accent)}
.map .go{position:absolute;right:12px;bottom:12px}
@media (max-width:820px){.loc{grid-template-columns:1fr}}

/* faq */
.faq{margin-top:28px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:650;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:18px;height:18px;transition:rotate .2s;flex:none}
.faq details[open] summary svg{rotate:180deg}
.faq details p{padding:0 0 20px;color:var(--muted);max-width:68ch}

footer{border-top:1px solid var(--line);padding-block:36px 96px;color:var(--muted);font-size:.92rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 40px}
footer b{color:var(--fg)}
footer nav{display:flex;flex-wrap:wrap;gap:6px 20px}
footer a{text-decoration:none}
footer a:hover{color:var(--fg);text-decoration:underline}

/* floating whatsapp */
.fab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:25;display:flex;align-items:center;gap:10px;min-height:54px;padding:0 20px 0 16px;border-radius:999px;background:var(--wa);color:var(--wa-fg);font-weight:700;text-decoration:none;box-shadow:0 10px 28px rgba(0,0,0,.28)}
.fab svg{width:26px;height:26px}
@media (max-width:520px){.fab span{display:none}.fab{padding:0 14px}}

/* panels */
.scrim{position:fixed;inset:0;z-index:50;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
.panel{position:fixed;top:0;right:0;z-index:60;height:100%;width:min(440px,100%);background:var(--bg);border-left:1px solid var(--line);transform:translateX(100%);visibility:hidden;transition:transform .26s ease,visibility 0s .26s;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.panel.open{transform:none;visibility:visible;transition:transform .26s ease}
.p-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
.p-head h3{font-size:1.5rem}
.p-body{flex:1;overflow-y:auto;padding:20px;min-height:0}
.p-foot{padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--surface)}
.menu a.big{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;font-family:var(--display);font-size:1.7rem;font-weight:720;letter-spacing:-.02em}
.menu a.big small{display:block;font-family:var(--text);font-size:.82rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:2px}
.menu a.big:hover{color:var(--accent)}
.menu a.big svg{width:20px;height:20px;flex:none;color:var(--muted)}
.menu .mini{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.menu .search{margin-bottom:12px;max-width:none}

/* cart */
.line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.line .tile{border-radius:10px;aspect-ratio:1}
.line .tile svg{width:68%}
.line h4{margin:0;font-size:.95rem;font-weight:650;line-height:1.25}
.line .d{font-size:.82rem;color:var(--muted);margin-top:2px}
.line .pr{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;margin-top:8px}
.qty button{width:32px;height:32px;font-weight:700}
.qty span{min-width:26px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.rm{font-size:.8rem;color:var(--muted);text-decoration:underline;margin-top:6px;display:block;margin-left:auto}
.fg{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.fg>label,.fg>legend{font-weight:650;font-size:.92rem}
fieldset.fg{border:0;padding:0;margin:18px 0 0;min-width:0}
.in{width:100%;min-height:44px;padding:10px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);outline:none}
.in:focus{border-color:var(--accent)}
.in.err{border-color:var(--bad)}
.errm{color:var(--bad);font-size:.84rem}
.opts{display:flex;flex-direction:column;gap:8px}
.op{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;background:var(--surface)}
.op:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.op input{margin-top:4px;accent-color:var(--accent)}
.op b{display:block;font-weight:650}
.op small{color:var(--muted);display:block}
.op .pp{margin-left:auto;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.sum{display:grid;gap:6px;font-variant-numeric:tabular-nums}
.sum div{display:flex;justify-content:space-between;gap:12px}
.sum .disc{color:var(--good);font-weight:600}
.sum .tt{font-family:var(--display);font-size:1.6rem;font-weight:800;margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}
.msg{white-space:pre-wrap;word-break:break-word;font:.86rem/1.5 var(--text);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;margin:14px 0 0;max-height:280px;overflow:auto}
.ok{display:inline-flex;align-items:center;gap:8px;color:var(--good);font-weight:700}
.ok svg{width:20px;height:20px}
.emptyc{text-align:center;padding:48px 8px}
.emptyc h4{font-family:var(--display);font-size:1.5rem;margin:0 0 8px}
.emptyc p{color:var(--muted);margin-bottom:18px}

/* modal */
.modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:var(--scrim)}
.modal>.box{position:relative;background:var(--bg);border-radius:22px;width:min(920px,100%);max-height:calc(100% - 8px);overflow-y:auto;border:1px solid var(--line)}
.modal .x{position:absolute;top:10px;right:10px;z-index:3;background:var(--surface);border-radius:50%;width:40px;height:40px;display:grid;place-items:center}
.pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding:20px}
.pd .tile{aspect-ratio:1;border-radius:16px}
.pd .tile svg{width:62%}
.pd h2{font-size:clamp(1.6rem,3vw,2.2rem);padding-right:36px}
.pd .stack{display:flex;flex-direction:column;gap:16px}
.pd .lbl{font-size:.82rem;font-weight:650;color:var(--muted);margin-bottom:8px;display:flex;justify-content:space-between;gap:8px}
.pd .lbl button{color:var(--accent);font-weight:600;text-decoration:underline}
.pd .actions2{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pd .qty{margin-top:0}
.combo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.combo button{text-align:left;font-size:.78rem;display:flex;flex-direction:column;gap:6px;line-height:1.25}
.combo .tile{aspect-ratio:1;border-radius:10px}
.combo .tile svg{width:66%}
@media (max-width:700px){.pd{grid-template-columns:1fr;padding:16px}}
.gd{padding:24px}
.gd h2{font-size:2rem;padding-right:40px}
.gd .tblw{overflow-x:auto;margin-top:16px}
.gd table{border-collapse:collapse;width:100%;min-width:420px;font-variant-numeric:tabular-nums}
.gd th,.gd td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:.92rem}
.gd th{color:var(--muted);font-weight:600}
.gd h3{font-family:var(--text);font-size:1rem;letter-spacing:0;margin-top:26px}
.calc{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px;padding:16px;border-radius:14px;background:var(--surface)}
.calc .in{width:140px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:90;background:var(--fg);color:var(--bg);padding:12px 20px;border-radius:12px;font-weight:600;max-width:calc(100% - 32px);box-shadow:0 12px 30px rgba(0,0,0,.3)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.badge.so{background:var(--muted);color:var(--bg)}
.card.out .tile{filter:grayscale(.7) opacity(.7)}
.star{position:absolute;right:10px;bottom:8px;color:var(--warn);font-size:1.05rem;line-height:1}
.toast{z-index:120}
/* ---------- carousel ---------- */
.car{position:relative;min-width:0}
.car-stage{position:relative;aspect-ratio:5/6;max-height:min(72vh,700px);width:100%;border-radius:26px;overflow:hidden;background:var(--tile)}
.slide{position:absolute;inset:0;background:var(--bg);display:grid;grid-template-rows:minmax(0,1fr) auto;opacity:0;transform:translateX(7%);pointer-events:none;transition:opacity .55s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.slide.on{opacity:1;transform:none;pointer-events:auto}
.slide.out{transform:translateX(-7%)}
.slide-art{position:relative;display:grid;place-items:center;padding:7% 8% 0;min-height:0}
.slide-art .art{display:grid;place-items:center;width:100%;height:100%;transform:scale(.9) rotate(-3deg);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.slide.on .slide-art .art{transform:none}
.slide-art .art svg{width:min(72%,340px);max-height:100%;filter:drop-shadow(0 18px 24px rgba(0,0,0,.18))}
.slide-art .pimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide .badge{top:16px;left:16px;z-index:2}
.slide-flag{position:absolute;top:16px;right:16px;z-index:2;padding:3px 12px;border-radius:999px;background:var(--surface);color:var(--fg);font-size:.76rem;font-weight:700}
.slide-info{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;padding:16px 22px 22px;position:relative;z-index:2}
.slide-info>*{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .6s ease}
.slide.on .slide-info>*{opacity:1;transform:none;transition-delay:.3s}
.slide-info h3{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:760;margin-top:2px}
.slide-info .m{display:flex;gap:10px;font-size:.84rem;color:var(--muted)}
.slide-info .price{font-size:1.15rem;margin-top:6px}
.car-bar{display:flex;align-items:center;gap:18px;margin-top:14px}
.segs{flex:1;display:flex;gap:6px;min-width:0}
.seg-b{flex:1;height:22px;display:flex;align-items:center}
.seg-b .track{width:100%;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.seg-b .fill{display:block;height:100%;width:0;background:var(--fg)}
.seg-b.done .fill{width:100%}
.seg-b.cur .fill{animation:carfill 5.2s linear forwards}
.car.paused .seg-b.cur .fill{animation-play-state:paused}
@keyframes carfill{from{width:0}to{width:100%}}
.car-ctl{display:flex;align-items:center;gap:4px}
.car-n{font-size:.84rem;color:var(--muted);margin-right:8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.car-ctl button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line)}
.car-ctl button:hover{border-color:var(--fg)}
.car-ctl svg{width:16px;height:16px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tilelink{position:relative;display:flex;flex-direction:column;gap:6px;padding:26px 28px;border:1.5px solid var(--line);border-radius:22px;text-decoration:none;background:var(--surface);transition:border-color .15s,transform .15s}
.tilelink:hover{border-color:var(--fg);transform:translateY(-2px)}
.tilelink .tl-t{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:780;letter-spacing:-.02em;line-height:1}
.tilelink .tl-d{color:var(--muted);max-width:36ch}
.tilelink svg{position:absolute;right:26px;top:28px;width:28px;height:28px;color:var(--accent)}
@media (max-width:760px){.two{grid-template-columns:1fr}}
/* ---------- admin ---------- */
#adm{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.a-top{display:flex;align-items:center;gap:14px;padding:10px clamp(12px,2vw,24px);background:var(--surface);border-bottom:1px solid var(--line)}
.a-top .logo{font-size:1.4rem}
.a-sub{font-weight:650;color:var(--muted)}
.a-sp{flex:1}
.a-body{flex:1;min-height:0;display:grid;grid-template-columns:208px minmax(0,1fr)}
.a-nav{display:flex;flex-direction:column;gap:4px;padding:14px 10px;border-right:1px solid var(--line);background:var(--surface);overflow-y:auto}
.a-nav button{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 14px;border-radius:10px;font-weight:600;text-align:left;color:var(--muted)}
.a-nav button svg{width:20px;height:20px;flex:none}
.a-nav button:hover{background:var(--bg);color:var(--fg)}
.a-nav button[aria-current="page"]{background:var(--fg);color:var(--bg)}
.a-nav .n{margin-left:auto;background:var(--accent);color:var(--accent-fg);border-radius:999px;font-size:.74rem;padding:1px 8px;font-weight:700;font-variant-numeric:tabular-nums}
.a-main{overflow-y:auto;padding:clamp(14px,2.4vw,28px);min-width:0}
@media (max-width:820px){
  .a-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .a-nav{order:2;flex-direction:row;border-right:0;border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));justify-content:space-around;overflow-x:auto}
  .a-nav button{flex-direction:column;gap:2px;font-size:.72rem;padding:6px 8px;min-width:58px;justify-content:center;text-align:center;min-height:52px;position:relative}
  .a-nav .n{position:absolute;top:2px;right:6px;margin:0}
  .a-sub{display:none}
}
.a-h{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:780;margin-bottom:16px;line-height:1.05}
.a-h small{display:block;font-family:var(--text);font-size:.9rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:6px}
.a-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.a-kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:left;display:flex;flex-direction:column;gap:4px;min-width:0}
.a-kpi:hover{border-color:var(--fg)}
.a-kpi b{font-family:var(--display);font-size:1.9rem;font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.02em}
.a-kpi span{color:var(--muted);font-size:.86rem}
.a-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;min-width:0}
.a-card h3{font-family:var(--text);font-size:1rem;letter-spacing:0;margin-bottom:12px;font-weight:700}
.a-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px;margin-top:12px}
.a-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);width:100%;text-align:left;min-width:0}
.a-row:first-of-type{border-top:0;padding-top:0}
.a-row .g{flex:1;min-width:0}
.a-row .g b{display:block;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-row .g span{font-size:.84rem;color:var(--muted)}
.a-row .tt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.a-muted{color:var(--muted);font-size:.9rem}
.a-banner{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:16px;border-radius:14px;background:var(--accent-soft);margin-bottom:16px}
.a-banner p{flex:1 1 280px}
.a-bars{display:flex;flex-direction:column;gap:10px}
.a-bars div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;font-size:.9rem}
.a-bars i{grid-column:1/-1;display:block;height:8px;border-radius:4px;background:var(--accent)}
.a-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px;align-items:center}
.a-bar .a-in{flex:1 1 220px}
.a-bar select.a-in{flex:0 1 auto}
.a-in{min-height:42px;padding:8px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);outline:none;min-width:0;width:100%}
.a-bar .a-in{width:auto}
.a-in:focus{border-color:var(--accent)}
.a-in.err{border-color:var(--bad)}
.a-num{width:92px;min-height:36px;padding:4px 8px;border:1.5px solid var(--line);border-radius:8px;background:var(--bg);text-align:right;font-variant-numeric:tabular-nums}
.a-num:focus{border-color:var(--accent);outline:none}
.a-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.a-pills button{min-height:36px;padding:4px 14px;border-radius:999px;border:1.5px solid var(--line);font-weight:600;font-size:.88rem}
.a-pills button:hover{border-color:var(--fg)}
.a-pills button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.a-pills i{font-style:normal;opacity:.7;margin-left:6px;font-variant-numeric:tabular-nums}
.a-tw{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.a-t{width:100%;border-collapse:collapse;font-size:.92rem;min-width:760px}
.a-t th{text-align:left;font-weight:600;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);font-size:.8rem;white-space:nowrap}
.a-t td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.a-t tr:last-child td{border-bottom:0}
.a-t tbody tr[data-a]:hover{background:var(--bg);cursor:pointer}
.a-t .r{text-align:right;font-variant-numeric:tabular-nums}
.a-t .c{text-align:center}
.a-t .nm{display:flex;align-items:center;gap:10px;min-width:200px}
.a-t .nm b{display:block;font-weight:650;line-height:1.2}
.a-t .nm span{font-size:.8rem;color:var(--muted)}
.a-t s{color:var(--muted);font-size:.82rem;margin-left:6px}
.st{--c:var(--muted);display:inline-block;padding:2px 10px;border-radius:999px;font-size:.78rem;font-weight:700;color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent);white-space:nowrap}
.st-nuevo,.st-enviado{--c:var(--accent)}
.st-confirmado,.st-preparando{--c:var(--warn)}
.st-entregado{--c:var(--good)}
.st-cancelado{--c:var(--bad)}
.a-th{width:44px;height:52px;border-radius:8px;background:var(--tile);display:grid;place-items:center;position:relative;overflow:hidden;flex:none}
.a-th svg{width:70%}
.a-sw{width:42px;height:24px;border-radius:999px;background:var(--line);position:relative;transition:background .15s;flex:none}
.a-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--bg);transition:translate .15s}
.a-sw[aria-checked="true"]{background:var(--good)}
.a-sw[aria-checked="true"]::after{translate:18px 0}
.a-star{font-size:1.3rem;line-height:1;color:var(--muted);width:36px;height:36px;border-radius:8px}
.a-star:hover{background:var(--bg)}
.a-star[aria-pressed="true"]{color:var(--warn)}
.a-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;border-radius:14px;background:var(--accent-soft);margin-bottom:12px}
.a-bulk b{margin-right:4px}
.a-bulk label{display:flex;align-items:center;gap:6px;font-weight:600}
.a-stk{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:12px}
.a-sc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:12px;min-width:0}
.a-sc header{display:flex;align-items:center;gap:12px}
.a-sc header .g{flex:1;min-width:0}
.a-sc header b{display:block;line-height:1.2}
.a-sc header span{font-size:.82rem;color:var(--muted)}
.a-sz{display:flex;flex-wrap:wrap;gap:8px}
.a-stp{display:flex;flex-direction:column;align-items:center;gap:4px;border:1.5px solid var(--line);border-radius:10px;padding:6px 6px;min-width:66px;background:var(--bg)}
.a-stp.low{border-color:var(--warn)}
.a-stp.zero{border-color:var(--bad)}
.a-stp label{font-weight:700;font-size:.82rem}
.a-stp input{width:48px;text-align:center;border:0;background:transparent;font:inherit;font-weight:650;font-variant-numeric:tabular-nums;padding:2px 0;-moz-appearance:textfield}
.a-stp input:focus{outline:2px solid var(--accent);border-radius:4px}
.a-stp div{display:flex;gap:4px}
.a-stp div button{width:28px;height:28px;border-radius:7px;background:var(--surface);border:1px solid var(--line);font-weight:700}
.a-stp div button:hover{border-color:var(--fg)}
.a-pos{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.a-pos-r{position:sticky;top:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:14px;max-height:calc(100dvh - 90px);overflow-y:auto}
.a-pos-r h3{font-family:var(--display);font-size:1.5rem}
@media (max-width:1000px){.a-pos{grid-template-columns:minmax(0,1fr)}.a-pos-r{position:static;max-height:none}}
.a-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.a-pt{display:flex;flex-direction:column;gap:6px;text-align:left;padding:8px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}
.a-pt:hover{border-color:var(--fg)}
.a-pt[disabled]{opacity:.5;pointer-events:none}
.a-pt .a-th{width:100%;height:auto;aspect-ratio:1}
.a-pt b{font-size:.84rem;line-height:1.2;font-weight:650}
.a-pt span{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.a-ln{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:8px 0;border-top:1px solid var(--line);font-size:.92rem}
.a-ln:first-of-type{border-top:0}
.a-ln b{font-weight:650}
.a-ln .d{grid-column:1;color:var(--muted);font-size:.82rem}
.a-ln .q{grid-column:1;display:flex;align-items:center;gap:8px;margin-top:4px}
.a-ln .q button{width:28px;height:28px;border-radius:7px;border:1px solid var(--line);font-weight:700}
.a-ln .q button.rm{width:auto;padding:0 8px;border:0;text-decoration:underline;color:var(--muted);font-weight:500}
.a-ln .p{grid-row:1/span 2;grid-column:2;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.a-fl{display:flex;flex-direction:column;gap:6px}
.a-fl>label,.a-fl>span.l{font-weight:650;font-size:.86rem}
.a-sum{display:grid;gap:4px;font-variant-numeric:tabular-nums}
.a-sum div{display:flex;justify-content:space-between;gap:12px}
.a-sum .tt{font-family:var(--display);font-size:1.8rem;font-weight:800;padding-top:8px;border-top:1px solid var(--line);margin-top:4px}
.a-sum .ds{color:var(--good);font-weight:600}
.am{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px;background:var(--scrim)}
.am .box{position:relative;background:var(--bg);border-radius:20px;width:min(780px,100%);max-height:calc(100% - 8px);overflow-y:auto;border:1px solid var(--line);padding:22px}
.am .x{position:absolute;top:12px;right:12px;z-index:3;background:var(--surface);border-radius:50%;width:40px;height:40px;display:grid;place-items:center}
.am .x svg{width:18px;height:18px}
.am h2{font-size:1.7rem;padding-right:48px;margin-bottom:14px}
.am h2 small{display:inline-flex;margin-left:10px;vertical-align:middle}
.a-f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.a-f .full{grid-column:1/-1}
@media (max-width:620px){.a-f{grid-template-columns:minmax(0,1fr)}}
.a-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px;margin-bottom:16px}
.a-info dt{font-size:.78rem;color:var(--muted);font-weight:600}
.a-info dd{margin:2px 0 0;font-weight:600;overflow-wrap:anywhere}
.a-steps{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.a-steps button{min-height:38px;padding:4px 14px;border-radius:999px;border:1.5px solid var(--line);font-weight:650;font-size:.9rem}
.a-steps button:hover{border-color:var(--fg)}
.a-steps button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.a-rc{font:.84rem/1.55 ui-monospace,Menlo,Consolas,monospace;background:var(--surface);border:1px dashed var(--line);border-radius:10px;padding:16px;white-space:pre-wrap;word-break:break-word}
.a-ph{width:120px;aspect-ratio:4/5;border-radius:10px;background:var(--tile);position:relative;overflow:hidden;display:grid;place-items:center;font-size:.8rem;color:var(--muted);text-align:center;padding:6px}
.a-ph svg{width:70%}
.a-chk{display:flex;align-items:center;gap:10px;min-height:38px;font-weight:600;cursor:pointer}
.a-chk input{width:18px;height:18px;accent-color:var(--accent)}
.a-del{color:var(--bad);font-weight:650}
.a-chart text{fill:var(--muted);font-family:var(--text);font-size:11px}
.a-jump{display:none}
@media (max-width:1000px){.a-jump{display:flex;position:sticky;bottom:6px;margin:12px 0 0 auto;z-index:3;box-shadow:0 10px 26px rgba(0,0,0,.28)}}