@font-face{font-family:"Archivo";src:url(fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/plexmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/plexmono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#000; --fg:#fff; --mute:#a8a8a8; --line:rgba(255,255,255,.3); --grid:rgba(255,255,255,.07);
  --pad:clamp(20px,5vw,64px); --max:1240px;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
.inv{--bg:#fff;--fg:#000;--mute:#555;--line:rgba(0,0,0,.35);--grid:rgba(0,0,0,.06)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;background:#000}
body{margin:0;background:#000;color:#fff;font-family:var(--sans);font-size:17px;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.sec{background-color:var(--bg);color:var(--fg);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:64px 64px}
.wrap{width:100%;max-width:calc(var(--max) + var(--pad)*2);margin-inline:auto;padding-inline:var(--pad)}
.display{font-weight:900;font-stretch:125%;text-transform:uppercase;line-height:1;letter-spacing:0;margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* barra de demo */
.demobar{background:#fff;color:#000;font-size:13px;line-height:1.3}
.demobar .wrap{display:flex;gap:10px 18px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-block:9px}
.demobar p{margin:0}
.demobar .acts{display:flex;gap:8px}
.demobar a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid #000;text-decoration:none;transition:background .2s,color .2s}
.demobar a:hover{background:#000;color:#fff}
.demobar a.solid{background:#000;color:#fff}
.demobar a.solid:hover{background:#fff;color:#000}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:#000;color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.mark{display:block;text-decoration:none;font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:14px;line-height:1.1}
.nav ul{display:flex;gap:32px;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;font-weight:500;font-size:15px;padding:8px 0;border-bottom:1px solid transparent;transition:border-color .2s}
.nav ul a:hover{border-color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;border:1.5px solid var(--fg);background:var(--fg);color:var(--bg);font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,transform .12s;-webkit-tap-highlight-color:transparent}
.btn:hover{background:transparent;color:var(--fg)}
.btn:active{transform:translateY(2px)}
.btn.ghost{background:transparent;color:var(--fg)}
.btn.ghost:hover{background:var(--fg);color:var(--bg)}
.btn.small{min-height:42px;padding:0 18px;font-size:15px}
.nav .btn{background:#fff;color:#000;border-color:#fff}
.nav .btn:hover{background:transparent;color:#fff}
.btn[disabled]{opacity:.35;pointer-events:none}

/* hero */
.hero{padding-block:clamp(44px,8vw,110px) clamp(56px,8vw,120px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
.hero h1{font-size:clamp(2.6rem,6.4vw,5.6rem)}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line>span{display:block}
.hero .sub2{margin:clamp(18px,2.4vw,28px) 0 0;font-weight:800;font-stretch:112%;font-size:clamp(1.1rem,2vw,1.6rem);line-height:1.25}
.hero p.lead{max-width:34em;margin:14px 0 0;font-size:clamp(16px,1.4vw,19px);color:var(--mute)}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px)}
.hang{container-type:inline-size;position:relative;padding-top:6px}
.hang::before{content:"";position:absolute;left:0;right:0;top:6px;height:0;border-top:1.5px solid #fff}
.hang-row{display:flex;align-items:flex-start;justify-content:space-between;gap:2.5cqw;padding-inline:1.5cqw}
.hang-item{min-width:0;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0}
.hang-item .string{width:1.5px;background:#fff;height:var(--len)}
.tag{position:relative;width:100%;padding:18cqw 0 0;color:#000;background:#fff;clip-path:polygon(18% 0,82% 0,100% 12%,100% 100%,0 100%,0 12%)}
.tag::before{content:"";position:absolute;left:50%;top:4.2cqw;width:4cqw;height:4cqw;margin-left:-2cqw;border-radius:50%;background:#000}
.tag .in{padding:0 6% 9%;display:block;min-width:0}
.tag small{display:block;font-family:var(--mono);font-size:max(11px,3.1cqw);line-height:1.2}
.tag b{display:block;font-weight:900;font-stretch:100%;line-height:1;margin:1.4cqw 0 2cqw;white-space:nowrap}
.tag span.n{display:block;font-family:var(--mono);font-size:max(10.5px,2.7cqw);line-height:1.25;color:#444}
.hang-item.a{flex:0 0 25cqw;--len:6cqw}
.hang-item.b{flex:0 0 29.5cqw;--len:16cqw}
.hang-item.c{flex:0 0 34cqw;--len:3cqw}
.hang-item.a .tag b{font-size:6.6cqw}
.hang-item.b .tag b{font-size:6.4cqw}
.hang-item.c .tag b{font-size:7.2cqw}
.hang-note{margin:clamp(20px,3vw,36px) 0 0;font-family:var(--mono);font-size:13px;color:var(--mute)}

/* lista */
section.block{padding-block:clamp(72px,10vw,150px)}
.lista{border-top:1px solid rgba(255,255,255,.4)}
.lista h2,.armar h2,.pedir h2,.donde h2{font-size:clamp(1.9rem,4.2vw,3.5rem)}
.lista .head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.lista .head p{margin:0;max-width:30em;color:var(--mute)}
.grupo{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:8px 48px;padding-block:clamp(22px,3vw,36px);border-top:1px solid var(--line)}
.grupo h3{margin:0;font-size:clamp(1.1rem,1.9vw,1.5rem);font-weight:900;font-stretch:125%;text-transform:uppercase}
.fila{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;align-items:baseline;padding:16px 14px;margin-inline:-14px;border-bottom:1px solid rgba(255,255,255,.16);transition:background .18s,color .18s}
.fila:last-child{border-bottom:0}
.fila:hover{background:#fff;color:#000}
.fila:hover small{color:#555}
.fila strong{font-weight:800;font-stretch:112%;font-size:clamp(1.05rem,1.8vw,1.35rem)}
.fila small{display:block;grid-column:1;color:var(--mute);font-size:15px;line-height:1.35;transition:color .18s}
.fila .p{grid-column:2;grid-row:1/span 2;font-family:var(--mono);font-weight:500;font-size:clamp(1.25rem,2.2vw,1.7rem);align-self:center;white-space:nowrap}
.regla{margin-top:clamp(28px,4vw,48px);border:1.5px solid #fff;padding:clamp(18px,2.6vw,28px) clamp(20px,3vw,36px);background:#000}
.regla p{margin:0;font-weight:800;font-stretch:112%;font-size:clamp(1.05rem,1.9vw,1.45rem);line-height:1.25}

/* armar (blanco) */
.armar .head{max-width:30em;position:sticky;top:110px}
.armar .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start}
.armar .head p{margin:18px 0 0;color:var(--mute);max-width:34em}
.panel{border:1.5px solid #000;width:100%;background:#fff}
.prog{height:6px;background:rgba(0,0,0,.14)}
.prog i{display:block;height:100%;width:25%;background:#000;transition:width .45s cubic-bezier(.3,.7,.2,1)}
.step{display:none;padding:clamp(20px,3.4vw,40px)}
.step.on{display:block}
.step h3{margin:0 0 6px;font-size:clamp(1.25rem,2.4vw,1.8rem);font-weight:900;font-stretch:118%;text-transform:uppercase;line-height:1.1}
.step .sub{margin:0 0 22px;color:var(--mute);font-size:15px}
.items{list-style:none;margin:0;padding:0}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:14px 0;border-top:1px solid rgba(0,0,0,.2)}
.item:first-child{border-top:0}
.item .nm{font-weight:800;font-stretch:110%;font-size:1.05rem;line-height:1.2}
.item .ds{display:block;font-weight:400;font-stretch:100%;font-size:14px;color:var(--mute);margin-top:2px}
.item .sum{grid-column:1;font-family:var(--mono);font-size:14px;min-height:1.4em}
.qty{grid-column:2;grid-row:1/span 2;display:flex;align-items:center;border:1.5px solid #000}
.qty button{width:48px;height:48px;background:transparent;border:0;cursor:pointer;font-size:24px;line-height:1;color:#000;transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent}
.qty button:hover:not([disabled]){background:#000;color:#fff}
.qty button[disabled]{opacity:.28;cursor:default}
.qty output{min-width:40px;text-align:center;font-family:var(--mono);font-size:1.1rem}
.item.pop .qty output{animation:pop .3s ease}
@keyframes pop{50%{transform:scale(1.25)}}
.tot{margin-top:18px;border-top:1.5px solid #000;padding-top:16px;font-family:var(--mono);font-size:15px}
.tot div{display:flex;justify-content:space-between;gap:16px;padding:3px 0}
.tot .big{font-family:var(--sans);font-weight:900;font-stretch:118%;font-size:clamp(1.5rem,3vw,2.1rem);padding-top:8px}
.tot small{display:block;margin-top:8px;color:var(--mute);font-family:var(--sans);font-size:14px}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.fld{display:block;margin-top:6px}
.fld input,.fld select{width:100%;height:56px;padding:0 16px;background:#fff;color:#000;border:1.5px solid #000;border-radius:0;font:inherit;font-size:18px}
.fld input::placeholder{color:#8a8a8a}
.fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#000 50%),linear-gradient(135deg,#000 50%,transparent 50%);background-position:calc(100% - 22px) 25px,calc(100% - 16px) 25px;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.fld input:focus,.fld select:focus{outline:3px solid #000;outline-offset:2px}
.tel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:10px}
.err{min-height:1.4em;margin:8px 0 0;color:#000;font-weight:700;font-size:14px;text-decoration:underline}
.err.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.ok svg{width:84px;height:84px;margin-bottom:14px;color:#000}
.ok circle,.ok path{stroke-dasharray:var(--L,300);stroke-dashoffset:var(--L,300)}
.ok.draw circle{animation:draw .6s ease-out forwards}
.ok.draw path{animation:draw .45s .5s ease-out forwards}
.ok.done circle,.ok.done path{stroke-dashoffset:0}
@keyframes draw{to{stroke-dashoffset:0}}
.ok .sum2{margin:14px 0 0;padding:16px;border:1px solid #000;font-family:var(--mono);font-size:14px;line-height:1.55;white-space:pre-wrap}

/* pedir / dónde */
.pedir{border-top:1px solid rgba(255,255,255,.4)}
.pedir .grid,.donde .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.pedir p{margin:0 0 18px;max-width:30em;color:var(--mute)}
.pedir p.big{font-size:clamp(1.2rem,2.2vw,1.7rem);line-height:1.25;font-weight:700;font-stretch:108%;color:#fff}
.pedir .acts{margin-top:8px}
.donde .grid{align-items:end}
.donde p{margin:0;max-width:28em;color:var(--mute)}

/* footer */
footer{background:#000;color:#fff;padding-block:clamp(48px,7vw,96px) 28px;overflow:hidden;border-top:1px solid rgba(255,255,255,.4)}
footer .big{font-size:min(6.4vw,6rem);line-height:.95;margin:0 0 clamp(28px,4vw,56px)}
footer .row{display:flex;gap:14px 36px;flex-wrap:wrap;justify-content:space-between;border-top:1px solid rgba(255,255,255,.3);padding-top:20px;font-size:14px}
footer a{text-decoration-thickness:1px;text-underline-offset:3px}

/* flotante */
.fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:40;display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 20px;background:#fff;color:#000;border:1.5px solid #000;font-weight:800;text-decoration:none;box-shadow:0 0 0 1.5px #fff;transition:transform .15s}
.fab:hover{transform:translateY(-2px)}
.fab:active{transform:translateY(2px)}
.fab svg{width:22px;height:22px}

@media (max-width:900px){
  .armar .wrap,.hero .wrap,.lista .head,.pedir .grid,.donde .grid,.grupo{grid-template-columns:minmax(0,1fr)}
  .armar .head{position:static;margin-bottom:8px}
  .nav ul{display:none}
  .grupo{gap:6px}
}
@media (max-width:560px){
  body{font-size:16px}
  .demobar .acts a{padding:0 11px}
  .mark{font-size:12.5px}
  .nav .btn{min-height:42px;padding:0 14px;font-size:15px}
  .hero h1{font-size:clamp(2.2rem,11vw,3rem)}
  .fab span{display:none}
  .fab{padding:0;width:56px;justify-content:center}
  .tel{grid-template-columns:minmax(0,1fr)}
  .fila .p{font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ok circle,.ok path{stroke-dashoffset:0}
}
.galeria .gfoto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--fg);border:2px solid var(--fg);margin-top:clamp(24px,4vw,48px)}
.galeria figure{margin:0;background:#fff;overflow:hidden;aspect-ratio:3/4}
.galeria img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1);filter:grayscale(1) contrast(1.05)}
.galeria figure:hover img{transform:scale(1.06);filter:none}
.pfoto{margin:clamp(20px,3vw,36px) 0;border:2px solid var(--fg);background:#fff}
.pfoto img{display:block;width:100%;height:auto}
.pfoto figcaption{font-family:var(--mono);font-size:13px;padding:10px 14px;background:var(--bg);color:var(--mute);border-top:2px solid var(--fg)}
@media(max-width:560px){.galeria .gfoto{grid-template-columns:repeat(2,minmax(0,1fr))}}