/* portada centrada */
.hh-hero{position:relative;overflow:hidden;isolation:isolate}
.hh-hero .hh-wrap{position:relative;z-index:2;display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:0!important}
.hh-hero .hh-wrap>div:first-child{display:contents}
.hh-hero .hh-eyebrow{order:1;margin:0 0 10px!important;justify-content:center}
.hh-hero h1.hh-display{order:2;font-size:clamp(56px,8.5vw,128px)!important;line-height:.95!important;margin:0!important;white-space:nowrap}
.hh-hero h1.hh-display br{display:none}
.hh-hero h1.hh-display .hh-amp{margin:0 .22em 0 0!important}
.hh-hero .hh-lead{order:3;margin:14px auto 0!important;max-width:520px}
.hh-hero .hh-ctas{display:none!important}
.hh-hero .hh-versus{display:none!important}
.hh-hero #hhr{order:4;margin:8px auto 0}
.hh-hero .hh-rating{order:5;justify-content:center;margin-top:6px}
.hh-hero::before{z-index:0;left:50%!important;right:auto!important;top:62%!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:min(1100px,110vw)!important;height:min(1100px,110vw)!important;transition:opacity .7s ease}
.hh-hero[data-hhr]::before{opacity:0}
@media (max-width:600px){.hh-hero h1.hh-display{white-space:normal;font-size:clamp(48px,15vw,72px)!important}}
/* fondo con foto */
#hhr-bg{position:absolute!important;inset:0!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;z-index:1;pointer-events:none}
#hhr-bg i{position:absolute;inset:-24px;background-size:cover;background-position:center;filter:blur(7px) saturate(1.1) brightness(.5);transform:scale(1.12);opacity:0;transition:opacity .7s ease,transform 1.4s cubic-bezier(.2,.8,.2,1)}
#hhr-bg i:nth-child(1){filter:blur(6px) saturate(1.15) brightness(.9) contrast(1.1)}
#hhr-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 75% 65% at 50% 55%,rgba(9,8,12,.05),rgba(9,8,12,.6) 100%);opacity:0;transition:opacity .7s ease}
.hh-hero[data-hhr="0"] #hhr-bg i:nth-child(1),.hh-hero[data-hhr="1"] #hhr-bg i:nth-child(2){opacity:1;transform:scale(1.04)}
.hh-hero[data-hhr] #hhr-bg::after{opacity:1}
/* perchero */
#hhr{--slot:clamp(230px,24vw,330px);--sw:calc(var(--slot)*.29);--ease:cubic-bezier(.2,.8,.2,1);position:relative;width:100%;max-width:560px;color:#f2f0f6;font-family:Roboto,sans-serif}
#hhr .rail{position:relative}
#hhr .rail::before,#hhr .rail::after{content:"";position:absolute;top:34px;width:12px;height:21px;background:linear-gradient(90deg,#4a4655,#8a8596 45%,#3d3947);z-index:3;border-radius:3px;pointer-events:none}
#hhr .rail::before{left:0}#hhr .rail::after{right:0}
#hhr .track{position:relative;display:flex;justify-content:center;padding:44px 16px 24px}
#hhr .track::before{content:"";position:absolute;top:40px;left:0;right:0;height:9px;background:linear-gradient(#6d6878,#3b3745 55%,#1d1a24);border-radius:5px;box-shadow:0 6px 14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.28)}
#hhr .slot{position:relative;flex:0 0 var(--sw);width:var(--sw);transform:translateX(var(--sh,0px));transition:transform .55s var(--ease);z-index:1;background:none!important;border:0!important;padding:0!important;margin:0!important;box-shadow:none!important;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:0}
#hhr .slot+.slot{margin-left:calc(var(--slot)*.12)!important}
#hhr .slot.on{z-index:2}
#hhr .garment{position:relative;width:var(--slot);margin-inline:calc((var(--sw) - var(--slot))/2);aspect-ratio:1/1.1;transform-origin:50% 0;animation:hhr-sway 6s ease-in-out infinite;animation-delay:var(--d,0s);transition:transform .55s var(--ease);pointer-events:none}
@keyframes hhr-sway{0%,100%{rotate:-.7deg}50%{rotate:.7deg}}
#hhr .slot.on .garment{transform:scale(1.08);animation-play-state:paused;rotate:0deg}
#hhr .ph{position:absolute;left:0;right:0;top:36px;display:flex;justify-content:center;transition:opacity .4s ease,transform .55s var(--ease);pointer-events:none}
#hhr .pw{position:relative}
#hhr .ph.side .pw,#hhr .slot.on .ph.front .pw{pointer-events:auto}
#hhr .hk{position:absolute;left:var(--hx,50%);top:-52px;width:34px;height:110px;transform:translateX(-50%);overflow:visible;pointer-events:none}
#hhr .ph img{position:relative;display:block;width:100%;height:auto;max-width:none;-webkit-user-drag:none;user-select:none;filter:drop-shadow(0 22px 22px rgba(0,0,0,.55))}
#hhr .ph.side .pw{width:34%;--hx:59.5%}
#hhr .ph.side img{transform:scaleX(.74);transform-origin:86% 0}
#hhr .ph.front .pw{width:90%;--hx:50%}
#hhr .ph.front{opacity:0;transform:scale(.94)}
#hhr .slot.on .ph.front{opacity:1;transform:none}
#hhr .slot.on .ph.side{opacity:0;transform:scaleX(.6)}
#hhr .tag{position:absolute;z-index:3;left:50%;top:40px;margin-left:10px;background:#6528f7;color:#fff;font:600 10px Roboto,sans-serif;letter-spacing:.08em;padding:4px 8px;transform-origin:0 0;transition:transform .5s var(--ease),margin .5s var(--ease);pointer-events:none}
#hhr .slot.on .tag{margin-left:40px;transform:rotate(-4deg)}
#hhr .cap{text-align:center;min-height:104px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 16px 0}
#hhr .cap .c{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#a78bfa;font-weight:500}
#hhr .cap .n{font-family:Anton,Impact,sans-serif;font-size:28px;line-height:1.05;text-transform:uppercase;letter-spacing:.02em}
#hhr .cap .p{font-size:14px;color:#c9c4d4}
#hhr .cap .hhr-hint{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8d8799;padding-top:24px}
#hhr .cap .hh-btn{margin-top:6px;cursor:pointer;border:0}
#hhr .cap>*{animation:hhr-in .35s var(--ease) both}
@keyframes hhr-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#hhr .dots{display:flex;gap:8px;justify-content:center;padding:4px 0 10px}
#hhr .dots i{width:6px;height:6px;border-radius:3px;background:#3a3547;transition:width .3s,background .3s}
#hhr .dots i.on{width:22px;background:#6528f7}
@media (max-width:921px){#hhr{--slot:min(68vw,300px);margin-top:12px}}
/* vista de prenda */
#hhr-ov{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:16px;background:rgba(6,5,9,.78);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;font-family:Roboto,sans-serif;color:#f2f0f6}
#hhr-ov.open{opacity:1;visibility:visible}
#hhr-ov .sheet{width:min(640px,100%);text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateY(14px) scale(.97);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
#hhr-ov.open .sheet{transform:none}
#hhr-ov .big{width:min(520px,84vw);height:54vh;display:grid;place-items:center}
#hhr-ov .big img{display:block;max-width:100%;max-height:54vh;width:auto;height:auto;filter:drop-shadow(0 30px 30px rgba(0,0,0,.6));animation:hhr-pop .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes hhr-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
#hhr-ov .c{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#a78bfa;font-weight:500}
#hhr-ov .n{font-family:Anton,Impact,sans-serif;font-size:clamp(26px,5vw,38px);line-height:1.05;text-transform:uppercase;letter-spacing:.02em}
#hhr-ov .p{font-size:15px;color:#c9c4d4}
#hhr-ov .sides{display:flex;border:1px solid #2e2a38;margin-top:6px}
#hhr-ov .sides button{font:500 11px Roboto,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8d8799;background:none!important;border:0!important;padding:10px 18px!important;cursor:pointer;transition:color .2s,background .25s;border-radius:0!important;box-shadow:none!important}
#hhr-ov .sides button:hover{color:#f2f0f6}
#hhr-ov .sides button[aria-pressed="true"]{background:#6528f7!important;color:#fff}
#hhr-ov .acts{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap;justify-content:center}
#hhr-ov .ghost{background:none!important;border:1px solid #f2f0f6!important;color:#f2f0f6!important;cursor:pointer}
#hhr-ov .ghost:hover{background:rgba(255,255,255,.08)!important}
#hhr-ov .x,#hhr-ov .ar{position:absolute;width:44px;height:44px;display:grid;place-items:center;background:none!important;border:1px solid #2e2a38!important;color:#f2f0f6!important;cursor:pointer;padding:0!important;border-radius:0!important;transition:border-color .2s,color .2s}
#hhr-ov .x:hover,#hhr-ov .ar:hover{border-color:#6528f7!important;color:#a78bfa!important}
#hhr-ov svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
#hhr-ov .x{top:max(20px,env(safe-area-inset-top));right:20px}
#hhr-ov .ar{top:50%;transform:translateY(-50%)}
#hhr-ov .prev{left:20px}#hhr-ov .next{right:20px}
@media (max-width:700px){#hhr-ov .big{height:46vh}#hhr-ov .big img{max-height:46vh}#hhr-ov .ar{top:auto;bottom:max(20px,env(safe-area-inset-bottom));transform:none}}
@media (prefers-reduced-motion:reduce){#hhr .garment{animation:none}}
#hhr-ov .acts .hh-btn{display:inline-flex;align-items:center;justify-content:center;min-width:170px;height:46px;padding:0 22px!important;font:600 13px Roboto,sans-serif;text-decoration:none}
#hhr-ov .acts .go{background:#6528f7!important;color:#fff!important;border:1px solid #6528f7!important}
#hhr-ov .ar.prev{left:max(20px,env(safe-area-inset-left,0px))}#hhr-ov .ar.next{right:max(20px,env(safe-area-inset-right,0px))}
#hhr .ph.side .pw{width:30%;--hx:var(--hxs,62%);transform:translateX(calc((50% - var(--hxs,62%)) * 1))}
#hhr .ph.side img{transform:none}
#hhr .slot:nth-child(1){--hxs:62%}#hhr .slot:nth-child(2){--hxs:63%}
#hhr .tag{left:auto;right:50%;margin-left:0;margin-right:14px;transform-origin:100% 0;transition:transform .5s var(--ease),margin .5s var(--ease)}
#hhr .slot.on .tag{margin-left:0;margin-right:46px;transform:rotate(4deg)}
@media (max-width:600px){
.hh-hero{padding-block:22px 36px}
.hh-hero .hh-eyebrow{margin:0 0 6px!important;font-size:11px}
.hh-hero h1.hh-display{white-space:nowrap!important;font-size:clamp(38px,12vw,54px)!important}
.hh-hero h1.hh-display .hh-amp{margin:0 .18em 0 0!important}
.hh-hero .hh-lead{font-size:13px;margin-top:8px!important;max-width:320px}
.hh-hero #hhr{margin-top:0;--slot:min(62vw,260px)}
#hhr .track{padding-top:38px}
#hhr .cap{min-height:96px}
#hhr-ov .sheet{gap:6px}
}
#hhr-ov .acts .hh-btn,#hhr .cap .hh-btn{text-transform:none!important;letter-spacing:.02em!important}
/* perchero más grande */
#hhr{--slot:clamp(270px,28vw,400px);max-width:680px}
@media (max-width:921px){#hhr{--slot:min(74vw,340px)}}
@media (max-width:600px){.hh-hero #hhr{--slot:min(70vw,290px)}}
/* perchero más fino e integrado */
#hhr .track::before{top:42px;left:4%;right:4%;height:5px;border-radius:3px;background:linear-gradient(180deg,#e4e1ea 0%,#a29daf 35%,#4a4656 70%,#8c879a 100%);box-shadow:0 1px 0 rgba(255,255,255,.08),0 14px 22px rgba(0,0,0,.55);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
#hhr .rail::before,#hhr .rail::after{top:-10px;width:2px;height:54px;border-radius:1px;background:linear-gradient(180deg,rgba(160,155,175,0),#8f8a9e 60%,#b7b2c4);box-shadow:none}
#hhr .rail::before{left:20%}#hhr .rail::after{right:20%;left:auto}
#hhr .hk path:first-child{stroke:rgba(0,0,0,.5);stroke-width:3.6}
#hhr .hk path:last-child{stroke:#cbc6d6;stroke-width:1.7}
#hhr .garment .ph img{filter:drop-shadow(0 18px 18px rgba(0,0,0,.45)) drop-shadow(0 2px 3px rgba(0,0,0,.35))}
#hhr .slot.on .garment .ph img{filter:drop-shadow(0 28px 30px rgba(0,0,0,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.35))}
/* etiqueta colgante */
#hhr .tag{top:58px;margin-right:6px;padding:5px 7px 4px;background:#f2f0f6;color:#14111b;font:700 9px Roboto,sans-serif;letter-spacing:.06em;border-radius:1px;box-shadow:0 4px 10px rgba(0,0,0,.35);transform:rotate(-6deg)}
#hhr .tag::before{content:"";position:absolute;right:4px;top:-17px;width:1px;height:17px;background:rgba(242,240,246,.55);transform:rotate(-28deg);transform-origin:bottom}
#hhr .tag::after{content:"";position:absolute;right:3px;top:3px;width:3px;height:3px;border-radius:50%;background:#14111b}
#hhr .slot.on .tag{margin-right:12px;transform:rotate(-3deg)}
#hhr .rail::before,#hhr .rail::after{top:16px;height:28px}
/* igualar alturas: la foto lateral y trasera de la blanca son más altas en proporción */
#hhr .slot:nth-child(2) .ph.side .pw{width:28.5%}
#hhr .slot:nth-child(2) .ph.front .pw{width:84%}
/* perchas en 3D que pasan por detrás de la barra */
#hhr .track::before{z-index:5}
#hhr .hk{width:40px;height:140px;top:var(--hkt,-80px);filter:drop-shadow(1.5px 3px 2px rgba(0,0,0,.55))}
#hhr .hk path{fill:none;stroke-linecap:round;stroke-linejoin:round}
#hhr .hk .hk-s{stroke:#1d1a24;stroke-width:4}
#hhr .hk .hk-m{stroke:url(#hhr-metal);stroke-width:2.8}
#hhr .hk .hk-h{stroke:rgba(255,255,255,.6);stroke-width:.7}
#hhr .hk{--hkt:-57px}
/* perchas cortas: el gancho por delante, la punta por detrás de la barra */
#hhr .track::before{z-index:auto}
#hhr .ph{top:26px}
#hhr .hk{width:34px;height:40px;--hkt:-34px;filter:drop-shadow(1px 2px 1.5px rgba(0,0,0,.5))}
#hhr .tag{top:46px}
/* sudaderas más grandes */
#hhr{--slot:clamp(300px,33vw,480px);max-width:820px}
@media (max-width:921px){#hhr{--slot:min(80vw,380px)}}
@media (max-width:600px){.hh-hero #hhr{--slot:min(76vw,320px)}}
#hhr .cap{height:150px!important;min-height:0!important;overflow:visible}
/* menos hueco bajo el perchero: caja ajustada a la sudadera girada y laterales algo mayores */
#hhr .garment{aspect-ratio:1/.95}
#hhr .track{padding-bottom:6px}
#hhr .ph.side .pw{width:35%}
#hhr .slot:nth-child(2) .ph.side .pw{width:33.2%}
#hhr .cap .hhr-hint{padding-top:6px}
#hhr .dots{padding:0 0 8px}