/* Idoloweb Tienda Remeras | capa Web3: movimiento, mouse, profundidad | idoloweb.com */
@property --mr-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--mr-mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;--sy:0}
.mr-body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--mr-border) 1px,transparent 1px),linear-gradient(90deg,var(--mr-border) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 75%);opacity:.55}
#mr-net{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.mr-glow{position:fixed;left:0;top:0;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle,color-mix(in srgb,var(--mr-accent) 30%,transparent),color-mix(in srgb,var(--mr-accent-2) 10%,transparent) 45%,transparent 70%);will-change:transform}
.mr-glow.is-on{opacity:1}
.mr-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:300;background:linear-gradient(90deg,var(--mr-accent),var(--mr-accent-2),var(--mr-accent-3))}
main,.mr-footer{position:relative;z-index:1}
.mr-header{position:sticky;top:0;z-index:150}
.mr-section--alt{background:color-mix(in srgb,var(--mr-surface) 72%,transparent);backdrop-filter:blur(6px)}
.mr-footer{background:color-mix(in srgb,var(--mr-surface) 85%,transparent)}

/* Botón claro/oscuro: un solo botón dentro de la cabecera */
.mr-header__actions #idcod{position:static!important;inset:auto!important;transform:none!important;margin:0!important;float:none!important;z-index:auto!important;background:none!important;border:0!important;padding:0!important;box-shadow:none!important;width:auto!important;height:auto!important}
.mr-header__actions #idcod:not([hidden]){display:inline-flex!important}
.mr-header__actions .idcod__btn{width:42px!important;height:42px!important;min-width:42px;padding:0!important;border-radius:50%!important;border:1px solid var(--mr-border)!important;background:var(--mr-surface)!important;color:var(--mr-text)!important;display:inline-grid!important;place-items:center;cursor:pointer;box-shadow:none!important;transition:transform .25s var(--mr-ease)}
.mr-header__actions .idcod__btn:hover{transform:rotate(18deg) scale(1.06)}
.mr-header__actions .idcod__label{display:none!important}
.mr-header__actions .idcod__btn svg{width:20px;height:20px;flex:none}

/* Hero web3 */
.mr-hero{perspective:1200px}
.mr-aurora{transform:translate3d(0,calc(var(--sy)*.12px),0)}
.mr-eyebrow,.mr-tag{font-family:var(--mr-mono)}
.mr-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--mr-border);border-radius:8px;font-size:.74rem;letter-spacing:.06em;color:var(--mr-muted);background:var(--mr-glass);backdrop-filter:blur(8px)}
.mr-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mr-accent-3);box-shadow:0 0 0 4px color-mix(in srgb,var(--mr-accent-3) 25%,transparent);animation:mr-pulse 2s infinite}
@keyframes mr-pulse{50%{box-shadow:0 0 0 8px transparent}}
.mr-hero h1 span:nth-child(2){background-size:200% 100%;animation:mr-shift 6s linear infinite}
.mr-hero h1 span:nth-child(3){-webkit-text-stroke:2px var(--mr-text);color:transparent}
@keyframes mr-shift{to{background-position:200% 0}}
.mr-hero__art{transform-style:preserve-3d}
.mr-tee{transition:transform .25s var(--mr-ease);will-change:transform}
.mr-tee .mr-photo{border-radius:28px;width:100%;aspect-ratio:4/5}
.mr-stats{display:flex;flex-wrap:wrap;gap:22px;margin-top:38px;font-family:var(--mr-mono);font-size:.8rem;color:var(--mr-muted)}
.mr-stats b{display:block;color:var(--mr-text);font-family:var(--mr-display);font-size:1.5rem}

/* Tarjetas holográficas con inclinación */
.mr-card,.mr-product,.mr-stage,.mr-poster{transform-style:preserve-3d;transition:transform .2s var(--mr-ease),box-shadow .35s}
.mr-card,.mr-poster{border:1px solid transparent!important;
  background:linear-gradient(var(--mr-surface),var(--mr-surface)) padding-box,conic-gradient(from var(--mr-ang),color-mix(in srgb,var(--mr-accent) 70%,transparent),var(--mr-border),color-mix(in srgb,var(--mr-accent-3) 70%,transparent),var(--mr-border),color-mix(in srgb,var(--mr-accent-2) 70%,transparent),color-mix(in srgb,var(--mr-accent) 70%,transparent)) border-box;
  animation:mr-spin 8s linear infinite}
.mr-section--alt .mr-card{background:linear-gradient(var(--mr-bg),var(--mr-bg)) padding-box,conic-gradient(from var(--mr-ang),color-mix(in srgb,var(--mr-accent) 70%,transparent),var(--mr-border),color-mix(in srgb,var(--mr-accent-3) 70%,transparent),var(--mr-border),color-mix(in srgb,var(--mr-accent-2) 70%,transparent),color-mix(in srgb,var(--mr-accent) 70%,transparent)) border-box}
@keyframes mr-spin{to{--mr-ang:360deg}}
.mr-glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),transparent 60%);opacity:0;transition:opacity .25s}
.is-tilting>.mr-glare{opacity:1}

/* Imágenes */
.mr-photo{display:block;width:100%;height:100%;object-fit:cover}
.mr-posters{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 20px}
.mr-poster{position:relative;display:block;border-radius:26px;overflow:hidden;aspect-ratio:4/5;text-decoration:none;color:#fff}
.mr-poster .mr-photo,.mr-poster svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--mr-ease)}
.mr-poster:hover .mr-photo,.mr-poster:hover svg{transform:scale(1.08)}
.mr-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,3,15,.85),transparent 55%)}
.mr-poster span{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;font-family:var(--mr-display);font-weight:700;font-size:1.2rem}
.mr-poster em{display:block;font-family:var(--mr-mono);font-style:normal;font-weight:400;font-size:.72rem;opacity:.8;margin-top:4px;letter-spacing:.08em}

/* Botones magnéticos */
.mr-btn{will-change:transform}
.mr-btn--primary{background-size:200% 100%;transition:transform .25s var(--mr-ease),box-shadow .35s,background-position .6s}
.mr-btn--primary:hover{background-position:100% 0;box-shadow:0 14px 40px -10px var(--mr-accent-2)}

@media (max-width:900px){.mr-posters{grid-template-columns:1fr 1fr}.mr-glow{display:none}}
@media (max-width:520px){.mr-posters{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){#mr-net,.mr-glow{display:none}.mr-card,.mr-poster{animation:none}}

/* Carruseles de productos */
.mr-car__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.mr-car__nav{display:flex;gap:8px}
.mr-car__nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--mr-border);background:var(--mr-surface);color:var(--mr-text);cursor:pointer;font-size:1.2rem;transition:.25s var(--mr-ease)}
.mr-car__nav button:hover{background:linear-gradient(120deg,var(--mr-accent),var(--mr-accent-2));color:#fff;border-color:transparent;transform:scale(1.08)}
.mr-track{display:flex;gap:18px;list-style:none;margin:0;padding:6px 4px 24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.mr-track::-webkit-scrollbar{display:none}
.mr-slide{flex:0 0 clamp(220px,24%,300px);scroll-snap-align:start}
.mr-slide--wide{flex-basis:clamp(240px,26%,320px)}
.mr-pcard{position:relative;display:block;height:100%;background:var(--mr-surface);border:1px solid var(--mr-border);border-radius:24px;overflow:hidden;transition:transform .3s var(--mr-ease),box-shadow .3s}
.mr-pcard:hover{transform:translateY(-6px);box-shadow:var(--mr-shadow)}
.mr-pcard__img{display:block;aspect-ratio:4/5;background:var(--mr-surface-2);overflow:hidden}
.mr-pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--mr-ease)}
.mr-pcard:hover .mr-pcard__img img{transform:scale(1.07)}
.mr-badge{position:absolute;top:12px;left:12px;z-index:2;padding:6px 12px;border-radius:999px;font-family:var(--mr-mono);font-size:.74rem;font-weight:700;color:#fff;background:linear-gradient(120deg,var(--mr-accent-2),var(--mr-accent))}
.mr-badge--new{background:linear-gradient(120deg,var(--mr-accent-3),var(--mr-accent))}
.mr-pcard__b{padding:16px 18px 18px}
.mr-pcard__t{display:block;font-weight:700;text-decoration:none;margin-bottom:4px}
.mr-pcard .mr-price{margin-bottom:14px}
.mr-pcard .mr-price del{color:var(--mr-muted);font-weight:400;margin-right:6px}
.mr-pcard .mr-price ins{text-decoration:none}
.mr-add{display:block;text-align:center;padding:11px 14px;border-radius:999px;font-weight:700;text-decoration:none;background:linear-gradient(120deg,var(--mr-accent),var(--mr-accent-2));color:#fff!important;transition:transform .25s var(--mr-ease),box-shadow .3s}
.mr-add:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px var(--mr-accent-2)}
.mr-add.loading{opacity:.6}.mr-add.added::after{content:" ✓"}
.mr-pcard a.added_to_cart{display:none}
.mr-skel{aspect-ratio:3/4;border-radius:24px;border:1px dashed var(--mr-border);display:grid;place-items:center;text-align:center;padding:24px;color:var(--mr-muted);background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,var(--mr-accent) 10%,transparent) 50%,transparent 70%) 0 0/200% 100%;animation:mr-sheen 3s linear infinite}
@keyframes mr-sheen{to{background-position:-200% 0}}
.mr-look{position:relative;display:block;aspect-ratio:3/4;border-radius:24px;overflow:hidden}
.mr-look .mr-photo,.mr-look svg{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--mr-ease)}
.mr-look:hover .mr-photo{transform:scale(1.07)}
.mr-look::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,3,15,.55),transparent 45%)}
.mr-look span{position:absolute;left:16px;bottom:14px;z-index:2;color:#fff;font-family:var(--mr-mono);font-size:.72rem;letter-spacing:.08em}
.mr-deal{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;border-radius:32px;padding:clamp(28px,5vw,60px);color:#fff;background:linear-gradient(120deg,#6d28d9,#e11d74 60%,#0891b2);background-size:200% 100%;animation:mr-shift 10s linear infinite;overflow:hidden;position:relative}
.mr-deal h2{font-family:var(--mr-display);font-weight:900;font-size:clamp(1.8rem,4.4vw,3.2rem);line-height:1.05;margin:0 0 12px;letter-spacing:-.03em}
.mr-deal p{margin:0 0 22px;opacity:.9;max-width:46ch}
.mr-deal .mr-btn{background:#fff;color:#14101f!important;border-color:transparent}
.mr-deal__art{display:flex;gap:14px;justify-content:center}
.mr-deal__art .mr-photo{width:46%;aspect-ratio:3/4;border-radius:22px;box-shadow:0 30px 50px -20px rgba(0,0,0,.5)}
.mr-deal__art .mr-photo:last-child{margin-top:34px}
@media (max-width:900px){.mr-slide,.mr-slide--wide{flex-basis:70%}.mr-deal{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.mr-skel,.mr-deal{animation:none}.mr-track{scroll-behavior:auto}}

/* Menú con desplegable */
.mr-nav li{position:relative}
.mr-nav .sub{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;display:block;padding:8px;background:var(--mr-bg);border:1px solid var(--mr-border);border-radius:18px;box-shadow:var(--mr-shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s var(--mr-ease);z-index:20}
.mr-nav .has-sub:hover>.sub,.mr-nav .has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:none}
.mr-nav .sub a{border-radius:12px;white-space:nowrap}
/* Las dos remeras del hero flotan solas y siguen al mouse */
.mr-tee>*{animation:mr-bob 7s ease-in-out infinite;display:block}
.mr-tee--b>*{animation-delay:-3.5s}
@keyframes mr-bob{50%{transform:translateY(-16px) rotate(1.6deg)}}
@media (max-width:900px){
  .mr-nav{max-height:calc(100vh - 68px);overflow:auto}
  .mr-nav .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 14px;background:none;min-width:0}
}

/* Logo */
.mr-logo{display:inline-flex;align-items:center;color:var(--mr-text)}
.mr-logo-svg{height:44px;width:auto;display:block}
.mr-footer .mr-logo-svg{height:52px}
@media (max-width:520px){.mr-logo-svg{height:38px}}

/* Logo animado (sin recortes: el brillo va dentro del propio SVG) */
.mr-logo{position:relative;padding:2px 4px;transition:transform .35s var(--mr-ease)}
.mr-logo-svg{overflow:visible}
.mr-logo-svg .lg-icon{transform-box:fill-box;transform-origin:50% 55%;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.mr-logo-svg .lg-star{transform-box:fill-box;transform-origin:center;animation:lg-twinkle 3.2s ease-in-out infinite}
.mr-logo-svg .lg-mi{transition:transform .4s var(--mr-ease);transform-box:fill-box;transform-origin:50% 100%}
.mr-logo-svg .lg-re{transition:transform .4s var(--mr-ease) .05s;transform-box:fill-box;transform-origin:0 100%}
.mr-logo-svg .lg-shine-g{animation:lg-sweep 7s ease-in-out 2s infinite}
.mr-logo:hover{transform:translateY(-2px)}
.mr-logo:hover .lg-icon{transform:rotate(-10deg) scale(1.1)}
.mr-logo:hover .lg-star{animation:lg-spin .8s ease}
.mr-logo:hover .lg-mi{transform:translateY(-4px) scale(1.04)}
.mr-logo:hover .lg-re{transform:translateX(2px) scale(1.01)}
.mr-logo:hover .lg-shine-g{animation:lg-sweep .9s ease}
@keyframes lg-sweep{0%{transform:translateX(0)}14%,100%{transform:translateX(620px)}}
@keyframes lg-twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.28) rotate(18deg)}}
@keyframes lg-spin{to{transform:rotate(360deg) scale(1.3)}}

/* Redes sociales del pie */
.mr-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.mr-social__hint{font-size:.8rem;color:var(--mr-muted);margin-top:16px}
.mr-soc{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--mr-border);background:var(--mr-bg);color:var(--mr-text)!important;text-decoration:none;animation:soc-float 4.5s ease-in-out infinite;animation-delay:calc(var(--i)*-.6s);transition:background .3s,color .3s,transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.mr-soc svg{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.mr-soc::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--c);opacity:0;transform:scale(.8)}
.mr-soc:hover{background:var(--c);border-color:transparent;color:#fff!important;transform:translateY(-6px) scale(1.14);box-shadow:0 14px 28px -10px var(--c);animation-play-state:paused}
.mr-soc--instagram:hover{background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7)}
.mr-soc:hover svg{transform:rotate(-12deg) scale(1.12)}
.mr-soc:hover::after{animation:soc-ring .9s ease-out infinite}
@keyframes soc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes soc-ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.7)}}
/* Enlaces del pie */
.mr-footer ul a{position:relative;display:inline-block;transition:transform .3s var(--mr-ease),color .3s}
.mr-footer ul a::before{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:linear-gradient(90deg,var(--mr-accent),var(--mr-accent-2));transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--mr-ease)}
.mr-footer ul a:hover{transform:translateX(6px);color:var(--mr-text)}
.mr-footer ul a:hover::before{transform:scaleX(1)}
.mr-powered{transition:opacity .3s,letter-spacing .3s}.mr-powered:hover{letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){.mr-soc,.lg-star,.lg-shine-g{animation:none!important}}