/* Indice numerado en mono gris sobre negro (MSCHF) + fotos a sangre con epigrafes minimos (Who Decides War) */
:root{
  --negro:#0b0b0b; --tinta:#ececea; --gris:#8a8a86; --gris-osc:#2a2a28;
  --rojo:#a51e22; --dorado:#ecbe46;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --marca:"Jost", "Futura", "Century Gothic", sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--negro);color:var(--tinta);font-family:var(--mono);-webkit-font-smoothing:antialiased}
body{background:var(--negro);font-size:13px;letter-spacing:.02em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:1px solid var(--dorado);outline-offset:3px}

/* cabecera */
.top{position:fixed;inset:0 0 auto 0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:14px max(16px,env(safe-area-inset-right)) 14px max(16px,env(safe-area-inset-left));
  padding-top:max(14px,env(safe-area-inset-top));color:#fff;text-transform:uppercase;font-size:11px;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0))}
.top .marca img{height:52px;width:auto}
.top nav{display:flex;gap:18px}
.top .der{justify-self:end;display:flex;gap:14px;align-items:center}
.corazon{width:18px;height:auto}
@media (max-width:700px){.top nav{display:none}.top .marca{grid-column:2}.top .der{grid-column:3}.top .marca img{height:44px}}

/* portada a sangre */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.epi{position:absolute;left:0;right:0;bottom:max(26px,env(safe-area-inset-bottom));text-align:center;text-transform:uppercase;font-size:11px;line-height:1.5;color:#fff}
.epi a{border-bottom:1px solid currentColor}

/* banner rotativo */
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity .9s}
.hero .slide.on{opacity:1}
.hero .slide img{width:100%;height:100%;object-fit:cover}
.hero .slide.claro img{object-fit:contain;background:var(--negro)}
.hero .slide .epi{z-index:2}
.puntos{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(26px,env(safe-area-inset-bottom));display:flex;gap:8px;z-index:3}
.puntos button{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4)}
.puntos button[aria-current="true"]{background:#fff}

.banner-fijo{background:#0b0b0b}
.banner-fijo img{object-fit:contain}
.banner-fijo a, .banner-fijo picture{display:block;width:100%;height:100%}
.banner-fijo .epi{bottom:max(18px,env(safe-area-inset-bottom))}

/* destacado bajo el banner */
.destacado{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:18px max(16px,env(safe-area-inset-right)) 18px max(16px,env(safe-area-inset-left));border-top:1px solid var(--gris-osc);border-bottom:1px solid var(--gris-osc);text-transform:uppercase;font-size:11px;color:var(--gris)}
.destacado b{font-family:var(--marca);font-weight:500;font-size:clamp(20px,3vw,34px);text-transform:uppercase;color:var(--dorado);letter-spacing:.08em}
.destacado:hover span:last-child{color:var(--tinta)}
/* categorias */
.categorias{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:#000;padding-top:2px}
.cat{position:relative;aspect-ratio:3/4;max-width:100%;overflow:hidden;text-align:left}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cat:hover img{transform:scale(1.03)}
.cat span{position:absolute;left:14px;bottom:14px;text-transform:uppercase;font-size:11px;color:#fff;background:rgba(0,0,0,.55);padding:6px 8px}
.cat[aria-pressed="true"] span{background:#fff;color:#000}
@media (max-width:700px){.categorias{grid-template-columns:1fr}.cat{aspect-ratio:4/3}}

/* indice de drops */
.indice{padding:90px max(16px,env(safe-area-inset-right)) 70px max(16px,env(safe-area-inset-left))}
.indice h2{font-size:11px;color:var(--gris);text-transform:uppercase;margin-bottom:22px;font-weight:400}
.fila{display:flex;align-items:baseline;gap:12px;border-top:1px solid var(--gris-osc);padding:8px 0;cursor:pointer;width:100%;text-align:left}
.fila:last-child{border-bottom:1px solid var(--gris-osc)}
.fila .n{font-size:10px;color:var(--gris);min-width:34px}
.fila .t{font-size:clamp(28px,6vw,72px);line-height:.95;text-transform:uppercase;color:var(--gris);transition:color .15s}
.fila .p{margin-left:auto;font-size:11px;color:var(--gris);white-space:nowrap}
.fila:hover .t,.fila:focus-visible .t{color:var(--tinta)}
.fila .t{min-width:0;overflow-wrap:anywhere}
@media (max-width:700px){.fila{flex-wrap:wrap;row-gap:4px}.fila .p{margin-left:46px;white-space:normal;line-height:1.5;width:100%}}
.vista{position:fixed;width:260px;pointer-events:none;z-index:15;opacity:0;transition:opacity .15s}
.vista.on{opacity:1}
@media (hover:none){.vista{display:none}}

/* drops a sangre */
.drop{position:relative;height:100svh;min-height:520px;overflow:hidden;cursor:pointer}
.drop img{width:100%;height:100%;object-fit:cover}
.drop.claro img{object-fit:contain;background:var(--negro)}

/* como funciona */
.como{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--gris-osc);border-top:1px solid var(--gris-osc);border-bottom:1px solid var(--gris-osc)}
.como div{background:var(--negro);padding:28px max(16px,env(safe-area-inset-left));min-width:0}
.como b{display:block;font-weight:500;text-transform:uppercase;font-size:11px;margin-bottom:10px}
.como p{color:var(--gris);line-height:1.6;max-width:36ch}
@media (max-width:700px){.como{grid-template-columns:1fr}}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:26px max(16px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));color:var(--gris);font-size:11px;text-transform:uppercase}

/* ficha de producto */
.ficha{position:fixed;inset:0;z-index:30;background:var(--negro);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);overflow:auto}
.ficha[hidden]{display:none!important}
.galeria{display:flex;flex-direction:column;gap:2px;background:#000}
.galeria img{width:100%;height:auto}
.galeria img.modelo{background:radial-gradient(ellipse at 50% 40%,#1d1d1b,#0b0b0b 70%)}
.info{position:sticky;top:0;align-self:start;padding:80px max(16px,env(safe-area-inset-right)) 40px 28px;display:flex;flex-direction:column;gap:18px}
.info .n{color:var(--gris);font-size:11px}
.info h3{font-family:var(--marca);font-weight:500;font-size:clamp(28px,3.6vw,46px);line-height:1.1;text-transform:uppercase;color:var(--dorado);letter-spacing:.06em}
.info .sub{color:var(--gris);line-height:1.6;max-width:40ch}
.info .precio{font-size:16px}
.info .plazo{margin:-4px 0 0;font-size:11px;text-transform:uppercase;color:var(--gris)}
.talles{display:flex;gap:6px;flex-wrap:wrap}
.talles button{border:1px solid var(--gris-osc);min-width:46px;padding:9px 10px;text-transform:uppercase}
.talles button[aria-pressed="true"]{border-color:var(--tinta);background:var(--tinta);color:var(--negro)}
.talles button:disabled{opacity:.3;text-decoration:line-through;cursor:not-allowed}
.talles button.ultima{position:relative;border-color:var(--rojo)}
.talles button.ultima::after{content:"";position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--rojo)}
.ultima-aviso{margin:-4px 0 0;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--rojo);font-weight:600}
.drop .pie .ultima{display:inline-block;align-self:flex-start;margin-top:4px;font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--tinta);background:var(--rojo);padding:2px 6px}
.colores{display:flex;gap:6px;flex-wrap:wrap}
.colores button{border:1px solid var(--gris-osc);padding:9px 12px;text-transform:uppercase}
.colores button[aria-pressed="true"]{border-color:var(--dorado);color:var(--dorado)}
.etq{color:var(--gris);font-size:11px;text-transform:uppercase}
.pronto{padding:90px max(16px,env(safe-area-inset-right)) 70px max(16px,env(safe-area-inset-left));border-top:1px solid var(--gris-osc)}
.pronto h2{font-size:11px;color:var(--gris);text-transform:uppercase;margin-bottom:8px;font-weight:400}
.pronto .bajada{color:var(--gris);line-height:1.6;max-width:52ch;margin-bottom:26px}
.pronto .grilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:#000}
.pronto .tarjeta{position:relative;aspect-ratio:4/5;overflow:hidden;text-align:left;background:var(--negro)}
.pronto .tarjeta img{width:100%;height:100%;object-fit:cover}
.pronto .tarjeta span{position:absolute;left:14px;bottom:14px;text-transform:uppercase;font-size:11px;color:#fff;background:rgba(0,0,0,.7);padding:6px 8px}
@media (max-width:700px){.pronto .grilla{grid-template-columns:1fr}}
.btn{border:1px solid var(--tinta);padding:13px 16px;text-transform:uppercase;text-align:center;width:100%}
.btn:hover{background:var(--tinta);color:var(--negro)}
.btn:disabled{opacity:.35;pointer-events:none}
.detalles{color:var(--gris);line-height:1.7;border-top:1px solid var(--gris-osc);padding-top:14px}
.cerrar{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:31;text-transform:uppercase;font-size:11px;mix-blend-mode:difference;color:#fff}
@media (max-width:800px){.ficha{grid-template-columns:1fr}.info{position:static;padding:24px max(16px,env(safe-area-inset-right)) 60px max(16px,env(safe-area-inset-left))}}

/* carrito */
.carrito{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:40;background:var(--negro);border-left:1px solid var(--gris-osc);display:flex;flex-direction:column;
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) 16px;transform:translateX(100%);transition:transform .25s}
.carrito.on{transform:none}
.carrito header{display:flex;justify-content:space-between;text-transform:uppercase;font-size:11px;padding-bottom:14px;border-bottom:1px solid var(--gris-osc)}
.items{flex:1;overflow:auto;display:flex;flex-direction:column}
.item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--gris-osc);align-items:center}
.item img{width:64px;height:80px;object-fit:cover}
.item .q{display:flex;gap:8px;align-items:center;color:var(--gris)}
.vacio{color:var(--gris);padding:30px 0;line-height:1.6}
.total{display:flex;justify-content:space-between;padding:14px 0;text-transform:uppercase}
.aviso{color:var(--gris);font-size:11px;line-height:1.6;margin-top:10px}
.aviso.error{color:#e0574f}
/* datos de envio antes de ir a mercado pago */
.envio{display:flex;flex-direction:column;gap:10px;overflow:auto}
.envio[hidden]{display:none}
.envio .paso{display:flex;justify-content:space-between;text-transform:uppercase;font-size:11px;margin:0;padding-top:4px}
.envio .paso button{color:var(--gris);text-transform:uppercase;font-size:11px}
.envio label{display:flex;flex-direction:column;gap:4px;text-transform:uppercase;font-size:10px;color:var(--gris)}
.envio input{background:#151514;border:1px solid var(--gris-osc);color:var(--tinta);font:inherit;font-size:16px;text-transform:none;padding:9px 10px;border-radius:0}
.envio input:focus{outline:1px solid var(--dorado);outline-offset:0}
.envio .dos{display:grid;grid-template-columns:1fr 120px;gap:10px}
.carrito.datos .items,.carrito.datos #pagar{display:none}
.subt{display:flex;justify-content:space-between;padding:12px 0 0;text-transform:uppercase;font-size:11px;color:var(--gris)}
.subt s{margin-right:6px}
.envio .codigo{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.envio .codigo button{border:1px solid var(--gris-osc);padding:10px 12px;text-transform:uppercase;font-size:11px}
.cuotasTxt{margin:-6px 0 12px;font-size:11px;text-transform:uppercase;color:var(--gris)}.cuotasTxt b{color:#7bc47f;font-weight:500}.cuotasTxt:empty{display:none}
.codigoOk{margin:0;font-size:11px;text-transform:uppercase;color:#7bc47f}
.codigoOk.error{color:#e0574f}
.velo{position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .2s}
.velo.on{opacity:1;pointer-events:auto}
/* perchero: las prendas de perfil en la barra; al pasar el mouse giran de frente y se balancean */
.perchero{position:relative;min-height:700px;padding:110px 0 40px;border-bottom:1px solid var(--gris-osc);overflow:hidden}
.perchero .cab{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));text-transform:uppercase;font-size:11px;color:var(--gris)}
.escena{position:relative;transition:filter .45s,opacity .45s}
.perchero.aislada .escena{filter:blur(7px) brightness(.75);opacity:.85;pointer-events:none}
.barra{position:relative;margin:46px max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));height:6px;border-radius:3px;
  background:linear-gradient(#9b9b97,#4a4a47 60%,#2a2a28)}
.barra::before,.barra::after{content:"";position:absolute;top:-4px;width:4px;height:14px;border-radius:2px;background:#6d6d69}
.barra::before{left:-2px}.barra::after{right:-2px}
.rack{display:flex;justify-content:center;align-items:flex-start;margin-top:-14px;min-height:380px;perspective:1100px;
  padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));overflow-x:auto;scrollbar-width:none}
.rack::-webkit-scrollbar{display:none}
.colgada{--ancho:300px;position:relative;flex:0 0 74px;height:380px;transition:flex-basis .55s cubic-bezier(.2,.8,.2,1);outline-offset:-6px}
.colgada .giro{position:absolute;top:0;left:50%;width:var(--ancho);margin-left:calc(var(--ancho) / -2);transform-origin:50% 0;
  transform:rotateY(64deg);transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s;filter:brightness(.62)}
.colgada:nth-child(even) .giro{transform:rotateY(-64deg)}
.colgada .gancho{display:block;width:84px;height:46px;margin:0 auto -6px;position:relative;z-index:1}
.colgada img{width:100%;height:300px;object-fit:contain;object-position:50% 0;pointer-events:none;filter:drop-shadow(0 18px 22px rgba(0,0,0,.6))}
.colgada:hover,.colgada:focus-visible,.colgada.on{flex-basis:var(--ancho);z-index:2}
.colgada:hover .giro,.colgada:focus-visible .giro,.colgada.on .giro{transform:none;filter:none;animation:hamaca 1.6s ease-out .1s}
@keyframes hamaca{0%{rotate:0deg}20%{rotate:3.2deg}45%{rotate:-2.2deg}68%{rotate:1.1deg}86%{rotate:-.4deg}100%{rotate:0deg}}
.leyenda{min-height:42px;text-align:center;text-transform:uppercase;font-size:11px;line-height:1.6;color:var(--gris);padding:0 16px}
.leyenda b{display:block;font-family:var(--marca);font-weight:500;text-transform:uppercase;font-size:20px;letter-spacing:.08em;color:var(--dorado);margin-bottom:4px}
/* vista aislada al tocar una prenda */
.sola{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:90px 16px 30px;opacity:0;pointer-events:none;transition:opacity .35s}
.perchero.aislada .sola{opacity:1;pointer-events:auto}
.sola .marco{position:relative;transform-origin:50% 0}
.perchero.aislada .sola .marco{animation:hamaca 2s ease-out}
.sola .gancho{display:block;width:110px;height:60px;margin:0 auto -8px;position:relative;z-index:1}
.sola img{height:min(46vh,340px);width:auto;max-width:min(560px,92vw);object-fit:contain;filter:drop-shadow(0 24px 30px rgba(0,0,0,.7))}
.sola .lado{display:flex;gap:6px}
.sola .lado button{border:1px solid var(--gris-osc);padding:7px 12px;text-transform:uppercase;font-size:11px}
.sola .lado button[aria-pressed="true"]{border-color:var(--dorado);color:var(--dorado)}
.sola .nom{text-align:center;text-transform:uppercase;font-size:11px;color:var(--gris);line-height:1.6}
.sola .nom b{display:block;font-family:var(--marca);font-weight:500;text-transform:uppercase;font-size:clamp(22px,3vw,30px);letter-spacing:.08em;color:var(--dorado);margin-bottom:4px}
.sola .acciones{display:flex;gap:8px;width:min(420px,100%)}
.sola .acciones .btn{padding:11px 12px}
.sola .acciones .volver{border-color:var(--gris-osc);color:var(--gris)}
@media (max-width:700px){
  .perchero{min-height:500px;padding-top:90px;transition:min-height .35s}
  /* en el celu la vista ampliada necesita mas alto: arranca debajo del encabezado fijo */
  .perchero.aislada{min-height:max(780px,100svh)}
  .sola{justify-content:flex-start;padding-top:96px;gap:12px}
  .sola.real img,.sola video{height:min(46vh,360px)}
  .rack{justify-content:flex-start;min-height:300px}
  .colgada{--ancho:220px;flex-basis:58px;height:300px}
  .colgada img{height:220px}
}
/* prendas con video real: el giro lo hace el video (de perfil a frente), sin rotacion CSS */
.colgada.real{--ancho:272px}
.colgada.real .giro{transform:none!important;animation:none!important;filter:drop-shadow(0 16px 18px rgba(0,0,0,.55))}
.barra{z-index:3}
/* sin alfa (Safari) el video trae fondo negro: se recorta al ancho de la percha para no tapar a las vecinas */
.sin-alfa .colgada.real .giro{filter:none;clip-path:inset(0 calc(50% - 40px));transition:clip-path .5s cubic-bezier(.2,.8,.2,1)}
.sin-alfa .colgada.real:hover .giro,.sin-alfa .colgada.real:focus-visible .giro,.sin-alfa .colgada.real.on .giro{clip-path:inset(0 0)}
.colgada.real video{display:block;width:100%;height:346px;object-fit:contain;object-position:50% 0;pointer-events:none}
.sola.real .gancho{display:none}
.sola.real img,.sola video{height:min(50vh,390px);width:auto;max-width:92vw;display:block;filter:none}
.sola video[hidden],.sola img[hidden]{display:none}
@media (max-width:700px){.colgada.real{--ancho:200px}.colgada.real video{height:254px}}
@media (prefers-reduced-motion:reduce){.colgada .giro,.sola .marco{animation:none!important}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* indice agrupado por artista (home) */
.grupo{margin-top:34px}
.grupo:first-of-type{margin-top:0}
.grupo .rotulo{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 0 10px;font-size:11px;text-transform:uppercase;color:var(--gris)}
.grupo .rotulo a:hover{color:var(--tinta)}
.grupo .rotulo b{font-weight:500;color:var(--tinta)}
a.fila{color:inherit}

/* pagina de artista */
.cabeza{padding:120px max(16px,env(safe-area-inset-right)) 34px max(16px,env(safe-area-inset-left));border-bottom:1px solid var(--gris-osc)}
.cabeza .miga{font-size:11px;text-transform:uppercase;color:var(--gris);margin-bottom:18px;display:flex;gap:10px;flex-wrap:wrap}
.cabeza .miga a:hover{color:var(--tinta)}
.cabeza h1{font-size:clamp(46px,12vw,168px);line-height:.88;text-transform:uppercase;font-weight:400;letter-spacing:-.02em;overflow-wrap:anywhere}
.cabeza .bajada{margin-top:18px;color:var(--gris);line-height:1.6;max-width:56ch}
.cabeza .cuenta{margin-top:10px;font-size:11px;text-transform:uppercase;color:var(--gris)}

/* pagina de prenda: la ficha deja de ser modal */
.ficha.pagina{position:relative;inset:auto;z-index:auto;overflow:visible;min-height:100svh}
.ficha.pagina .info{padding-top:110px}
.ficha.pagina .miga{font-size:11px;text-transform:uppercase;color:var(--gris);display:flex;gap:10px;flex-wrap:wrap}
.ficha.pagina .miga a:hover{color:var(--tinta)}
.mas{border-top:1px solid var(--gris-osc);padding-top:14px}
.mas p{font-size:11px;text-transform:uppercase;color:var(--gris);margin-bottom:8px}
.mas a{display:block;padding:6px 0;text-transform:uppercase;border-bottom:1px solid var(--gris-osc)}
.mas a:hover{color:var(--dorado)}
@media (max-width:800px){.ficha.pagina .info{padding-top:24px}.ficha.pagina .galeria{padding-top:70px}}
a.drop{display:block;color:inherit}
.info .titulo-prenda{font-family:var(--marca);font-weight:500;font-size:clamp(28px,3.6vw,46px);line-height:1.1;text-transform:uppercase;color:var(--dorado);letter-spacing:.06em}
.indice#lista-artista{padding-top:40px}

/* perchero tactil: las 6 entran en pantalla, el dedo desliza por la barra (la pagina sigue scrolleando vertical)
   y la prenda que gira no empuja a las vecinas, para que no se muevan bajo el dedo */
@media (hover:none){
  .rack{touch-action:pan-y;overflow-x:hidden;justify-content:center}
  .colgada,.colgada.on,.colgada:hover,.colgada:focus-visible{flex-basis:min(54px,calc((100vw - 32px) / var(--n, 7)))}
  .colgada.on{z-index:3}
  .colgada:focus-visible{outline:none}
}
.colgada .giro{pointer-events:none}

/* drops proximos: fotos desenfocadas como adelanto (el texto queda nitido) */
.pronto .tarjeta{overflow:hidden}
.pronto .tarjeta img{filter:blur(16px) brightness(.8) saturate(1.1);transform:scale(1.12);transition:filter .5s}
.pronto .tarjeta:hover img{filter:blur(11px) brightness(.85) saturate(1.1)}
.ficha.pagina[data-pronto] .galeria{overflow:hidden}
.ficha.pagina[data-pronto] .galeria img{filter:blur(18px) brightness(.8);transform:scale(1.08)}
/* centrado "seguro": si las prendas no entran, el perchero se desliza en vez de cortarse a la izquierda */
.rack{justify-content:flex-start}
.rack > .colgada:first-child{margin-left:auto}
.rack > .colgada:last-child{margin-right:auto}

/* ticketera: al pagar sale un ticket impreso, como el de la espalda de la #001 */
#ticketera{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;align-items:center;justify-content:flex-start;padding:max(70px,10vh) 16px 30px;background:rgba(0,0,0,.78);overflow:auto}
#ticketera.on{display:flex;animation:aparece .25s ease-out}
@keyframes aparece{from{opacity:0}to{opacity:1}}
#ticketera .maquina{position:relative;z-index:2;width:min(380px,100%);background:#1b1b1a;border:1px solid #333331;border-radius:14px;padding:12px 14px 16px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
#ticketera .cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
#ticketera .cab img{height:30px;width:auto}
#ticketera .cerrar-t{font-size:11px;text-transform:uppercase;color:var(--gris)}
#ticketera .estado{display:flex;align-items:center;gap:10px;font-size:12px;text-transform:uppercase;color:var(--tinta)}
#ticketera .estado .monto{margin-left:auto;color:var(--dorado)}
#ticketera .giro-t{width:13px;height:13px;border-radius:50%;border:2px solid #555;border-top-color:var(--tinta);animation:gira .8s linear infinite;flex:none}
@keyframes gira{to{transform:rotate(360deg)}}
#ticketera.listo .giro-t{animation:none;border:0;background:#2fbf5a;position:relative}
#ticketera.listo .giro-t::after{content:"";position:absolute;left:4px;top:2px;width:3px;height:6px;border:solid #0b0b0b;border-width:0 2px 2px 0;transform:rotate(45deg)}
#ticketera .ranura{position:absolute;left:22px;right:22px;bottom:-4px;height:8px;border-radius:4px;background:#050505;box-shadow:inset 0 2px 3px rgba(0,0,0,.9)}
#ticketera .papel{position:relative;z-index:1;width:min(320px,calc(100% - 44px));overflow:hidden;margin-top:-4px}
#ticketera .ticket{transform:translateY(-101%);background:#f3f0e8;color:#111;font-family:var(--mono);font-size:11px;line-height:1.5;text-transform:uppercase;padding:22px 18px 26px;
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x}
#ticketera.imprime .ticket{transform:none;transition:transform 2.5s cubic-bezier(.35,.05,.25,1)}
#ticketera .ticket hr{border:0;border-top:1px dashed #888;margin:10px 0}
#ticketera .ticket .tc{text-align:center}
#ticketera .ticket .tc:first-child{font-size:15px;font-weight:500;letter-spacing:.12em;margin-bottom:2px}
#ticketera .ticket .chico{font-size:10px;color:#555}
#ticketera .ticket .tl{display:flex;justify-content:space-between;gap:12px}
#ticketera .ticket .tl.sub{color:#666;font-size:10px;margin-bottom:6px}
#ticketera .ticket .tl.fuerte{font-weight:600;font-size:12px}
#ticketera .ticket .barras{display:block;width:100%;height:46px;margin:14px 0 4px;fill:#111}
@media (prefers-reduced-motion:reduce){#ticketera.imprime .ticket{transition:none}}

/* portada lookbook: fotos con modelo de cada prenda pasando solas de costado (pausa al pasar el mouse) */
.lookbook{position:relative;height:min(70svh,720px);min-height:420px;overflow:hidden;background:#000;border-top:2px solid #000}
.lookbook .cinta{display:flex;gap:2px;height:100%;width:max-content;animation:cinta calc(var(--cuantas) * 6s) linear infinite}
.lookbook:hover .cinta,.lookbook:focus-within .cinta{animation-play-state:paused}
@keyframes cinta{to{transform:translateX(-50%)}}
.lookbook .look{position:relative;display:block;height:100%;aspect-ratio:4/5;overflow:hidden;flex:none}
.lookbook .look img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s;filter:saturate(.9)}
.lookbook .look:hover img{transform:scale(1.04);filter:saturate(1.05)}
.lookbook .look span{position:absolute;left:12px;bottom:12px;font-size:11px;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.6);padding:6px 8px;opacity:.85;transition:opacity .3s}
.lookbook .look:hover span{opacity:1;background:#fff;color:#000}
@media (max-width:700px){.lookbook{height:62svh;min-height:380px}}
@media (prefers-reduced-motion:reduce){.lookbook .cinta{animation:none}.lookbook{overflow-x:auto}}

/* grilla de prendas: colgada sin fondo -> al pasar el mouse, franjas con el otro lado (o la foto con modelo si no hay colgadas) */
.grilla-prendas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:#000;padding-bottom:2px}
.grilla-prendas .drop{position:static;height:auto;min-height:0;display:flex;flex-direction:column;background:var(--negro);cursor:pointer}
.grilla-prendas .caja{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#1d1d1b,#0b0b0b 70%)}
.grilla-prendas .colg{position:absolute;inset:6% 8% 4%;width:84%;height:90%;object-fit:contain;object-position:50% 0;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s}
.grilla-prendas .colg.foto{inset:0;width:100%;height:100%;object-fit:cover}
.grilla-prendas .franjas{position:absolute;inset:0;display:flex;pointer-events:none}
.grilla-prendas .franjas i{flex:1;background-size:700% 100%;background-repeat:no-repeat;transform:translateY(101%);transition:transform .55s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i) * 45ms)}
.grilla-prendas .drop:hover .franjas i,.grilla-prendas .drop:focus-visible .franjas i,.grilla-prendas .drop.ver .franjas i{transform:none}
.grilla-prendas .drop:hover .colg,.grilla-prendas .drop.ver .colg{transform:scale(.94);opacity:.4}
/* el otro lado de la prenda: siete copias recortadas en franjas, en el mismo lugar que la colgada, que suben escalonadas */
.grilla-prendas .franjas.lado img{position:absolute;inset:6% 8% 4%;width:84%;height:90%;object-fit:contain;object-position:50% 0;transform:translateY(118%);transition:transform .55s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i) * 45ms)}
.grilla-prendas .drop:hover .franjas.lado img,.grilla-prendas .drop:focus-visible .franjas.lado img,.grilla-prendas .drop.ver .franjas.lado img{transform:none}
.grilla-prendas .franjas.lado.modelo img{inset:0;width:100%;height:100%;object-position:50% 100%}
.grilla-prendas .drop:hover .doble .colg,.grilla-prendas .drop:focus-visible .doble .colg,.grilla-prendas .drop.ver .doble .colg{opacity:0}
.grilla-prendas .pie{display:flex;flex-direction:column;gap:4px;padding:12px 12px 16px;text-transform:uppercase;font-size:10px;color:var(--gris);line-height:1.5}
.grilla-prendas .pie b{font-family:var(--marca);font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--tinta)}
.grilla-prendas .drop:hover .pie b{color:var(--dorado)}
@media (max-width:900px){.grilla-prendas{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* portada: foto de campaña a pantalla completa, el menu flota arriba y el texto va sobre la parte oscura */
.portada{position:relative;height:100svh;min-height:560px;max-height:1100px;overflow:hidden;background:#000;color:#fff}
.portada picture,.portada img{position:absolute;inset:0;width:100%;height:100%}
.portada img{object-fit:cover;object-position:15% 50%;animation:acercar 14s ease-out both}
.portada::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.35) 38%,transparent 60%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 30%);pointer-events:none}
.portada .texto{position:absolute;z-index:1;left:max(16px,4vw);bottom:max(48px,9svh);max-width:min(520px,40vw)}
.portada .sobre{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--gris);margin-bottom:14px}
.portada h1{font-family:var(--marca);font-weight:500;text-transform:uppercase;letter-spacing:.06em;line-height:1.02;font-size:clamp(40px,6vw,92px);color:var(--dorado);margin:0}
.portada p{margin:16px 0 26px;font-size:14px;line-height:1.5;color:#d8d8d2;max-width:34ch}
.portada .boton{display:inline-block;border:1px solid #fff;padding:13px 20px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#fff;transition:background .25s,color .25s}
.portada .boton:hover,.portada .boton:focus-visible{background:#fff;color:#000}
@keyframes acercar{from{transform:scale(1.06)}to{transform:scale(1)}}
@media (max-aspect-ratio:4/5){
  .portada img{object-position:50% 100%}
  .portada::after{background:linear-gradient(180deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 24%,transparent 42%),linear-gradient(0deg,rgba(0,0,0,.5),transparent 22%)}
  /* titulo arriba sobre el cielo, boton abajo sobre la vereda: el medio queda libre para los modelos */
  .portada .texto{top:calc(66px + 1.5svh);bottom:22px;right:16px;max-width:none;display:flex;flex-direction:column;align-items:flex-start}
  .portada .sobre{margin-bottom:8px}
  .portada h1{font-size:clamp(28px,8.4vw,48px)}
  .portada p{display:none}
  .portada .boton{margin-top:auto;background:rgba(0,0,0,.45)}
}
@media (prefers-reduced-motion:reduce){.portada img{animation:none}}