:root{--cr:#EFE6D2;--cr2:#E4D8BE;--ti:#1E1A16;--ti2:#2A251F;--ro:#D8452B;--oc:#D9A441;--sa:#B7BFA0;--pad:clamp(18px,4vw,60px);--serif:'Instrument Serif',Georgia,serif;--sans:'Manrope',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ti)}
body{background:var(--cr);color:var(--ti);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip;transition:opacity .45s ease,filter .45s ease}
body.dark{background:var(--ti);color:var(--cr)}
body.leaving{opacity:0;filter:blur(8px)}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.serif{font-family:var(--serif);font-weight:400;line-height:.92;letter-spacing:-.01em}
.serif i{font-style:italic}
/* grano */
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.09;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .3  0 0 0 0 .2  0 0 0 1 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");mix-blend-mode:multiply}
body.dark::after{opacity:.12;mix-blend-mode:overlay}
/* barra */
.top{position:fixed;z-index:50;inset:0 0 auto 0;display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad);mix-blend-mode:difference;color:#fff}
.top a{text-decoration:none}
.logo{font-family:var(--serif);font-size:28px;line-height:1;letter-spacing:-.01em}
.logo i{font-style:italic}
.top nav{display:flex;gap:clamp(14px,2.4vw,32px)}
.top nav a{position:relative;padding:4px 0}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.top nav a:hover::after,.top nav a.on::after{transform:scaleX(1)}
.burger{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;position:relative}
.burger i{position:absolute;left:9px;right:9px;height:2px;background:#fff;transition:transform .3s,top .3s}
.burger i:nth-child(1){top:15px}.burger i:nth-child(2){top:25px}
.menu-open .burger i:nth-child(1){top:20px;transform:rotate(45deg)}
.menu-open .burger i:nth-child(2){top:20px;transform:rotate(-45deg)}
@media(max-width:820px){
  .burger{display:block}
  .top nav{position:fixed;inset:0;z-index:-1;background:var(--ti);flex-direction:column;justify-content:center;align-items:flex-start;padding:0 var(--pad);gap:6px;opacity:0;pointer-events:none;transition:opacity .35s;mix-blend-mode:normal}
  .menu-open .top nav{opacity:1;pointer-events:auto}
  .top nav a{font-family:var(--serif);font-size:clamp(46px,14vw,72px);text-transform:none;letter-spacing:-.01em;color:var(--cr)}
  .menu-open .top{mix-blend-mode:normal;color:var(--cr)}
}
/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--ti);color:var(--cr);text-decoration:none;padding:16px 28px;font:700 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--ti);border-radius:999px;cursor:pointer;transition:background .25s,color .25s,transform .15s}
.btn:hover{background:transparent;color:var(--ti)}
.btn:active{transform:translateY(2px)}
.btn.red{background:var(--ro);border-color:var(--ro);color:var(--cr)}
.btn.red:hover{background:transparent;color:var(--ro)}
.btn.ghost{background:transparent;color:var(--ti)}
.btn.ghost:hover{background:var(--ti);color:var(--cr)}
.dark .btn{background:var(--cr);border-color:var(--cr);color:var(--ti)}
.dark .btn:hover{background:transparent;color:var(--cr)}
.dark .btn.red{background:var(--ro);border-color:var(--ro);color:var(--cr)}
.dark .btn.red:hover{background:transparent;color:var(--ro)}
.dark .btn.ghost{background:transparent;color:var(--cr)}
.dark .btn.ghost:hover{background:var(--cr);color:var(--ti)}
/* revelado */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.lines .ln{display:block;overflow:hidden;padding-bottom:.08em}
.lines .ln>span{display:block;transform:translateY(110%);transition:transform 1.05s cubic-bezier(.2,.8,.2,1)}
.lines.in .ln>span{transform:none}
.lines.in .ln:nth-child(2)>span{transition-delay:.12s}
.lines.in .ln:nth-child(3)>span{transition-delay:.24s}
/* secciones que se funden */
.sec{position:relative;padding:clamp(80px,12vw,170px) var(--pad)}
.bridge-dark{height:clamp(140px,22vw,300px);background:linear-gradient(var(--cr),var(--ti))}
.bridge-cr{height:clamp(140px,22vw,300px);background:linear-gradient(var(--ti),var(--cr))}
.foot{padding:32px var(--pad) 40px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;opacity:.6}
.foot a{text-decoration:none}
/* ===== ventana de detalle de prenda ===== */
.pd{position:fixed;inset:0;z-index:1900;display:grid;place-items:center;padding:18px;background:rgba(20,16,12,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .4s}
.pd.on{opacity:1;pointer-events:auto}
.pd-box{position:relative;width:min(980px,100%);max-height:calc(100dvh - 36px);overflow:auto;display:grid;grid-template-columns:1fr 1fr;background:var(--cr);color:var(--ti);border-radius:30px;transform:translateY(40px) scale(.95);transition:transform .55s cubic-bezier(.2,.9,.25,1.05);box-shadow:0 40px 110px rgba(0,0,0,.5)}
.pd.on .pd-box{transform:none}
.pd-img{display:grid;place-items:end center;background:var(--bg,var(--oc));min-height:420px;padding:28px 20px 0;border-radius:30px 0 0 30px;overflow:hidden}
.pd-img img{max-height:min(66vh,620px);width:auto;max-width:100%;filter:drop-shadow(0 24px 30px rgba(0,0,0,.28))}
.pd-img.jersey{place-items:center;padding:28px}
.pd-info{padding:clamp(26px,4vw,48px);display:flex;flex-direction:column;justify-content:center}
.pd-info .mono{opacity:.6}
.pd-info h3{font-family:var(--serif);font-weight:400;font-size:clamp(42px,6vw,72px);line-height:.92;margin:8px 0 14px}
.pd-info h3 i{font-style:italic}
.pd-info p{opacity:.8;margin-bottom:18px}
.pd-info ul{list-style:none;margin-bottom:26px;display:grid;gap:8px;font-size:15px}
.pd-info li{display:flex;justify-content:space-between;gap:16px;padding-bottom:8px;border-bottom:1px dotted rgba(30,26,22,.3)}
.pd-info li span:first-child{opacity:.6}
.pd-act{display:flex;flex-wrap:wrap;gap:10px}
.pd-x{position:absolute;top:14px;right:14px;z-index:3;width:42px;height:42px;border:0;border-radius:50%;background:rgba(239,230,210,.92);color:var(--ti);font-size:22px;line-height:1;cursor:pointer}
.pd-x:hover{background:var(--ti);color:var(--cr)}
@media(max-width:760px){.pd{align-items:end;padding:10px}.pd-box{grid-template-columns:1fr}.pd-img{border-radius:30px 30px 0 0;min-height:300px}.pd-img img{max-height:44vh}.pd-act .btn{width:100%}}
/* ===== aviso para cotizar (25 s) ===== */
.pm{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:18px;background:rgba(20,16,12,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .4s}
.pm.on{opacity:1;pointer-events:auto}
.pm-box{position:relative;width:min(520px,100%);background:var(--cr);color:var(--ti);border-radius:30px;padding:clamp(28px,5vw,46px);transform:translateY(40px) scale(.94);transition:transform .55s cubic-bezier(.2,.9,.25,1.05);box-shadow:0 40px 100px rgba(0,0,0,.5);overflow:hidden}
.pm.on .pm-box{transform:none}
.pm-box::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:var(--oc);opacity:.5}
.pm-box>*{position:relative}
.pm-x{position:absolute;top:14px;right:16px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(30,26,22,.1);color:var(--ti);font-size:22px;line-height:1;cursor:pointer}
.pm-x:hover{background:var(--ti);color:var(--cr)}
.pm-h{font-family:var(--serif);font-weight:400;font-size:clamp(46px,8.5vw,70px);line-height:.92;margin:10px 0 14px}
.pm-h i{font-style:italic;color:var(--ro)}
.pm-p{opacity:.8;margin-bottom:22px}
.pm-a{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:520px){.pm{align-items:end;padding:10px}.pm-a .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.rv,.lines .ln>span{opacity:1;transform:none;transition:none}body,.pm,.pm-box,.pd,.pd-box{transition:none}}