/* ============================================================
   ESTILO LIBRE — Movimiento y taller de la portada
   Todo lo que oculta contenido depende de html.fx-on, que solo pone fx.js.
   ============================================================ */
/* Transición entre páginas del mismo sitio */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fxOut .22s ease both}
::view-transition-new(root){animation:fxIn .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes fxOut{to{opacity:0;transform:translateY(-14px) scale(.992)}}
@keyframes fxIn{from{opacity:0;transform:translateY(22px)}}
#header{view-transition-name:fx-header}
#radio-player{view-transition-name:fx-player}

.fx-progress{position:fixed;left:0;right:0;top:0;height:3px;background:#111;mix-blend-mode:difference;filter:invert(1);transform:scaleX(0);transform-origin:0 50%;z-index:100002;pointer-events:none}

/* Aparecer */
.fx-on .fx{transition:opacity .75s cubic-bezier(.2,.7,.2,1) var(--fx-d,0s),transform .75s cubic-bezier(.2,.7,.2,1) var(--fx-d,0s),translate .3s}
.fx-on .fx-rise:not(.fx-in){opacity:0;transform:translateY(26px)}
.fx-on .fx-card:not(.fx-in){opacity:0;transform:translateY(42px) scale(.97)}
.fx-on .fx-side:not(.fx-in){opacity:0;transform:translateX(-40px)}
.fx-on .fx-zoom:not(.fx-in){opacity:0;transform:scale(.88)}
.fx-on .sp-card.fx-in,.fx-on .sp-tile.fx-in,.fx-on .hm-card.fx-in{transition:transform .28s ease-out,opacity .75s}
.fx-on .sp-head h2{overflow:visible}
.fx-w{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:top;padding-top:.08em;margin-top:-.08em}
.fx-c{display:inline-block;transition:transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--i)*22ms)}
.fx-on .sp-head:not(.fx-in) .fx-c{transform:translateY(110%) rotate(6deg)}
.fx-on .sp-head{opacity:1!important;transform:none!important}

/* Tarjetas */
.sp-card,.sp-tile,.hm-card{will-change:auto;transform-style:preserve-3d}
.fx-glare{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.2),rgba(255,255,255,0) 55%)}
.sp-card:hover .fx-glare,.sp-tile:hover .fx-glare,.hm-card:hover .fx-glare{opacity:1}
.sp-card__media,.sp-tile__img,.hm-card__img{position:relative}
.sp-card:hover,.sp-tile:hover{box-shadow:0 26px 44px -28px rgba(0,0,0,.45)}
.sp-tile__img img,.sp-card__media img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.sp-tile:hover .sp-tile__img img{transform:scale(1.08) rotate(-1.5deg)}

/* Botones: la tinta barre de lado a lado */
.sp-btn{position:relative;overflow:hidden;isolation:isolate;transition:translate .25s ease-out,background .2s,color .2s,border-color .2s}
.sp-btn::after{content:"";position:absolute;inset:0;z-index:-1;background:#fff;mix-blend-mode:difference;transform:translateX(-101%);transition:transform .42s cubic-bezier(.7,0,.2,1);pointer-events:none}
.sp-btn:hover::after{transform:translateX(0)}

/* Carrusel */
.fx-trail{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hs__stage,.hs__ghost{transition:translate .5s ease-out}
.hs__slide.is-center img{animation:fxFloat 6s ease-in-out infinite}
@keyframes fxFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-.6deg)}}
.fx-swap{animation:fxSwap .55s cubic-bezier(.2,.8,.2,1)}
@keyframes fxSwap{from{opacity:0;transform:translateY(16px);letter-spacing:.12em}}

/* Cintas en movimiento */
.fx-tapes{position:relative;height:clamp(92px,11vw,150px);margin-top:56px;overflow:hidden;pointer-events:none}
.fx-tape{position:absolute;left:-5%;width:110%;padding:.5em 0;overflow:hidden;font-family:var(--ff-display);font-size:clamp(20px,2.7vw,36px);line-height:1;letter-spacing:.08em;white-space:nowrap}
.fx-tape--a{top:18%;background:#111;color:#fff;transform:rotate(-2.2deg);z-index:2}
.fx-tape--b{top:32%;background:#fff;color:#111;border-block:2px solid #111;transform:rotate(1.8deg)}
.fx-tape__run{display:inline-flex;gap:1.1em;animation:fxTape 32s linear infinite}
.fx-tape--b .fx-tape__run{animation-direction:reverse}
.fx-tape__run i{font-style:normal;opacity:.45}
@keyframes fxTape{to{transform:translateX(-50%)}}

/* Pie */
.fx-giant{font-family:var(--ff-display);font-size:clamp(34px,9.2vw,176px);line-height:.92;letter-spacing:.02em;text-align:center;white-space:nowrap;overflow:hidden;color:#fff;padding-top:.16em;transform:translateY(30%);opacity:0;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity 1.2s}
.fx-giant.fx-in{transform:none;opacity:1}
@media (max-width:760px){.fx-giant{font-size:17vw;line-height:1;padding-bottom:.1em}.fx-giant span{display:block}}

/* Cursor */
.fx-cursor{position:fixed;left:0;top:0;z-index:100001;width:0;height:0;pointer-events:none}
.fx-cursor span{position:absolute;left:-9px;top:-9px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#000;font-family:var(--ff-head);font-size:0;letter-spacing:1.5px;text-transform:uppercase;transition:width .25s,height .25s,left .25s,top .25s,opacity .2s}
.fx-cursor:not(.is-view){mix-blend-mode:difference}
.fx-cursor.is-view span{background:#111;color:#fff}
.fx-cursor.is-link span{left:-22px;top:-22px;width:44px;height:44px}
.fx-cursor.is-view span{left:-38px;top:-38px;width:76px;height:76px;font-size:13px}
.fx-cursor.is-off span{opacity:0}

/* ---------- Aerógrafo (compartido) ---------- */
.pz-airbrush{display:block;width:100%;height:auto;overflow:visible}
.pz-airbrush__paint{fill:var(--paint,#00aeef)}
.pz-airbrush__trigger{transition:transform .12s;transform-origin:133px 80px}

/* ---------- Taller de la portada ---------- */
.lab{--paint:#00aeef;position:relative;background:#0c0c0c;color:#fff;overflow:hidden;isolation:isolate}
.lab::before{content:"";position:absolute;inset:-20%;z-index:-1;background:radial-gradient(38% 42% at var(--bx,72%) 40%,color-mix(in srgb,var(--paint) 26%,transparent),transparent 70%);transition:background .5s;pointer-events:none}
.lab::after{content:"TALLER";position:absolute;left:-.04em;bottom:-.17em;z-index:-1;font-family:var(--ff-display);font-size:clamp(120px,26vw,420px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);pointer-events:none}
.lab__in{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(24px,4vw,64px);align-items:center;padding-top:clamp(40px,6vw,84px);padding-bottom:clamp(40px,6vw,84px)}
.lab__kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-head);font-size:12px;font-weight:600;letter-spacing:2.6px;text-transform:uppercase;color:#fff;margin-bottom:14px}
.lab__kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--paint);box-shadow:0 0 14px 3px var(--paint);transition:background .3s,box-shadow .3s}
.lab h2{font-family:var(--ff-display);font-size:clamp(50px,7.4vw,112px);font-weight:400;line-height:.86;letter-spacing:.015em;margin:0 0 16px;color:#fff;text-transform:uppercase}
.lab h2 span{display:block}
.lab h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px #fff}
.lab h2 b{font-weight:400;color:var(--paint);transition:color .3s}
.lab__lead{max-width:44ch;margin:0 0 20px;font-size:17px;line-height:1.45;color:rgba(255,255,255,.72)}
.lab-kinds{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.lab-kind{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;padding:8px 14px;cursor:pointer;font-family:var(--ff-head);font-size:13px;letter-spacing:1px;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s}
.lab-kind:hover{border-color:#fff}
.lab-kind.is-on{background:#fff;color:#111;border-color:#fff}
.lab-field{display:flex;gap:6px;margin-bottom:10px}
.lab-field input[type=text]{flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.26);color:#fff;padding:12px 13px;font-family:var(--ff-body);font-size:17px;border-radius:0;outline:none;transition:border-color .2s}
.lab-field input[type=text]::placeholder{color:rgba(255,255,255,.5)}
.lab-field input[type=text]:focus{border-color:#fff}
.lab-upload{display:inline-flex;align-items:center;gap:8px;padding:0 15px;border:1px solid rgba(255,255,255,.3);cursor:pointer;font-family:var(--ff-head);font-size:12.5px;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap;transition:background .2s,color .2s}
.lab-upload:hover{background:#fff;color:#111}
.lab__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:18px}
.lab__price{font-family:var(--ff-display);font-size:32px;letter-spacing:.5px;line-height:1}
.lab__price small{display:block;font-family:var(--ff-head);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:3px}
.lab-go{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#111;padding:16px 26px;font-family:var(--ff-head);font-size:14px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;transition:translate .25s ease-out,background .2s,color .2s}
.lab-go:hover{background:var(--paint);color:#fff}
.lab-go i{transition:transform .25s}
.lab-go:hover i{transform:translateX(5px)}

.lab__bench{min-width:0}
.lab-stage{position:relative;aspect-ratio:1/1;background:#f4f4f2;overflow:hidden;box-shadow:0 40px 90px -40px color-mix(in srgb,var(--paint) 55%,#000);transition:box-shadow .4s}
.lab-stage canvas{display:block;width:100%;height:100%;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.lab-tool{position:absolute;left:0;top:0;width:clamp(120px,22%,190px);pointer-events:none;z-index:3;transition:opacity .25s;will-change:transform}
/* La punta de la boquilla queda exactamente en el puntero */
.lab-tool .pz-airbrush{transform-origin:2.7% 64%;transform:translate(-2.7%,-64%) rotate(-24deg);transition:transform .15s}
.is-spraying .lab-tool .pz-airbrush{animation:abBuzz .09s linear infinite}
.is-spraying .pz-airbrush__trigger{transform:translateY(5px)}
@keyframes abBuzz{0%{transform:translate(-2.7%,-64%) rotate(-24deg)}50%{transform:translate(calc(-2.7% + .5px),calc(-64% - .5px)) rotate(-24.3deg)}100%{transform:translate(-2.7%,-64%) rotate(-24deg)}}
.lab.is-hover .lab-stage,.lab.is-hover .lab-stage canvas{cursor:none}
.lab-tip{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;padding:7px 13px;background:rgba(17,17,17,.9);color:#fff;font-size:14px;white-space:nowrap;pointer-events:none;transition:opacity .3s}
.lab.is-used .lab-tip{opacity:0}
.lab-bar{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:11px 12px;background:#191919;border:1px solid #2a2a2a;border-top:0}
.lab-swatches{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.lab-swatches button{width:25px;height:25px;border-radius:50%;padding:0;background:var(--sw);border:2px solid rgba(255,255,255,.2);cursor:pointer;transition:transform .15s}
.lab-swatches button:hover{transform:scale(1.14)}
.lab-swatches button.is-on{border-color:#fff;box-shadow:0 0 0 2px #191919,0 0 0 3px #fff}
.lab-more-color{position:relative;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;border:1px dashed rgba(255,255,255,.5);font-size:11px;overflow:hidden;cursor:pointer}
.lab-more-color input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.lab-bar label.lab-range{display:flex;align-items:center;gap:8px;font-family:var(--ff-head);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.7)}
.lab-range input{width:90px;accent-color:#fff}
.lab-icon{margin-left:auto;background:none;border:1px solid rgba(255,255,255,.28);color:#fff;padding:7px 11px;cursor:pointer;font-family:var(--ff-head);font-size:11.5px;letter-spacing:.8px;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
.lab-icon:hover{background:#fff;color:#111}
.lab-arm{display:none;width:100%;justify-content:center;background:#fff;color:#111;border:0;padding:11px;font-family:var(--ff-head);font-size:13px;letter-spacing:1px;text-transform:uppercase;align-items:center;gap:8px}
.lab-arm[aria-pressed=true]{background:var(--paint);color:#fff}
.lab [hidden]{display:none!important}
@media (pointer:coarse){.lab-arm{display:inline-flex}}
@media (max-width:900px){
  .lab__in{grid-template-columns:minmax(0,1fr)}
  .lab__bench{order:-1}
  .lab__copy{order:2}
  .lab h2{font-size:clamp(48px,14vw,84px)}
  .lab-stage{margin-inline:-20px;width:calc(100% + 40px);max-width:none}
  .lab-bar{margin-inline:-20px;border-inline:0}
}
@media (prefers-reduced-motion:reduce){.lab-tool .pz-airbrush,.hs__slide.is-center img,.fx-tape__run{animation:none!important}}

/* ---------- Políticas ---------- */
.pol{max-width:820px}
.pol h2{font-family:var(--ff-display);font-size:30px;font-weight:400;letter-spacing:1px;margin:30px 0 10px;scroll-margin-top:90px}
.pol p{font-size:17.5px;line-height:1.6;margin:0 0 12px}
.pol a{text-decoration:underline}
.pol__nav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.pol__nav a{border:1px solid #111;padding:6px 12px;font-family:var(--ff-head);font-size:13px;letter-spacing:.6px;text-transform:uppercase;text-decoration:none}
.pol__nav a:hover{background:#111;color:#fff}

/* ---------- Celular: la barra superior ocupa una sola línea ---------- */
@media (max-width:760px){
  .info-bar .social-bar{display:none}
  .info-bar{padding:0;overflow:hidden}
  .info-bar .info-items{display:flex;flex-wrap:nowrap;gap:18px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;padding:8px 0}
  .info-bar .info-items::-webkit-scrollbar{display:none}
  .info-bar .info-item{flex:0 0 auto}
}

/* ---------- Arma tu combo ---------- */
.sp-combo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"img head" "img cart" "pick pick";gap:18px 44px;align-items:start}
.sp-combo__img{grid-area:img;position:relative;display:grid;gap:6px;aspect-ratio:1/1;padding:16px;background:var(--sp-bg);overflow:hidden}
.sp-combo__img img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(0,0,0,.2));animation:comboPop .32s ease-out}
.sp-combo__img[data-n="2"],.sp-combo__img[data-n="4"]{grid-template-columns:1fr 1fr}
.sp-combo__img[data-n="2"]{grid-template-rows:1fr}
.sp-combo__img[data-n="3"]{grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr}
.sp-combo__img[data-n="3"] img:first-child{grid-row:1/3}
.sp-combo__img[data-n="4"]{grid-template-rows:1fr 1fr}
.sp-combo__img[data-n="5"],.sp-combo__img[data-n="6"]{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr}
.sp-combo__img[data-n="0"]{place-items:center}
.sp-combo__empty{font-family:var(--ff-head);font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--sp-mute)}
@keyframes comboPop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sp-combo__img img{animation:none}}
.sp-combo__head{grid-area:head}
.sp-combo__head h2{margin:8px 0 10px;font-family:var(--ff-display);font-size:clamp(34px,4vw,54px);font-weight:400;letter-spacing:1.5px;line-height:1;color:var(--sp-ink)}
.sp-combo__head p{margin:0;font-size:18px;line-height:1.45;color:var(--sp-mute)}
.sp-combo__cart{grid-area:cart;min-width:0}
.sp-combo__list{margin:0;padding:0;list-style:none;border-top:1px solid #cfcfcf}
.sp-combo__list li{display:grid;grid-template-columns:54px minmax(0,1fr) auto 32px;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #cfcfcf}
.sp-combo__list li>img{width:54px;height:54px;object-fit:contain;background:var(--sp-bg)}
.sp-combo__info>b{display:block;font-family:var(--ff-head);font-size:14.5px;font-weight:500;line-height:1.25;text-transform:uppercase;color:var(--sp-ink)}
.sp-combo__opts{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.sp-combo__opts:empty{display:none}
.sp-combo__opt{height:32px;padding:0 6px;border:1px solid #bdbdbd;background:#fff;color:#111;font-size:14px;max-width:120px}
.sp-combo__opt.is-missing{border:2px solid #c8102e}
.sp-combo__price{text-align:right;white-space:nowrap;line-height:1.2;color:var(--sp-ink)}
.sp-combo__price s{display:block;font-size:13.5px;color:var(--sp-mute)}
.sp-combo__price b{font-family:var(--ff-head);font-size:15.5px}
.sp-combo__rm{width:32px;height:32px;border:0;background:none;color:var(--sp-ink);cursor:pointer}
.sp-combo__rm:hover{background:#111;color:#fff}
.sp-combo__sum{margin:12px 0 0}
.sp-combo__sum div{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:16.5px;color:var(--sp-mute)}
.sp-combo__sum dt,.sp-combo__sum dd{margin:0}
.sp-combo__sum .is-total{padding-top:8px;font-family:var(--ff-display);font-size:30px;letter-spacing:1px;color:var(--sp-ink)}
.sp-combo__msg{margin:6px 0;min-height:20px;font-size:15.5px;color:#c8102e}
.sp-combo__add{width:100%;justify-content:center}
.sp-combo__add:disabled{opacity:.45;cursor:not-allowed}
.sp-combo__pick{grid-area:pick;min-width:0;margin-top:14px;padding-top:18px;border-top:1px solid #111}
.sp-combo__bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.sp-combo__chips{display:flex;flex-wrap:wrap;gap:5px}
.sp-combo__chips button{padding:7px 13px;border:1px solid #bdbdbd;background:#fff;color:#111;cursor:pointer;font-family:var(--ff-head);font-size:13px;letter-spacing:.7px;text-transform:uppercase}
.sp-combo__chips button:hover{border-color:#111}
.sp-combo__chips button.is-on{background:#111;color:#fff;border-color:#111}
.sp-combo__nav{display:flex;gap:5px;flex:none}
.sp-combo__nav button{width:38px;height:38px;border:1px solid #111;background:#fff;color:#111;cursor:pointer}
.sp-combo__nav button:hover{background:#111;color:#fff}
.sp-combo__rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;padding-bottom:8px}
.sp-combo__tile{flex:0 0 172px;display:flex;flex-direction:column;gap:5px;padding:0;border:0;background:none;color:var(--sp-ink);text-align:left;cursor:pointer;scroll-snap-align:start}
.sp-combo__tile[hidden]{display:none}
.sp-combo__pic{position:relative;display:block;aspect-ratio:1/1;background:var(--sp-bg);border:2px solid transparent;transition:border-color .15s}
.sp-combo__pic img{width:100%;height:100%;padding:9px;object-fit:contain;transition:transform .2s}
.sp-combo__tile:hover .sp-combo__pic img{transform:scale(1.05)}
.sp-combo__pic i{position:absolute;top:6px;right:6px;display:none;place-items:center;width:24px;height:24px;background:#111;color:#fff;font-size:12px}
.sp-combo__tile.is-on .sp-combo__pic{border-color:#111}
.sp-combo__tile.is-on .sp-combo__pic i{display:grid}
.sp-combo__name{font-family:var(--ff-head);font-size:13.5px;line-height:1.25;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-combo__tile b{font-family:var(--ff-head);font-size:14.5px}
@media (max-width:900px){
  .sp-combo{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "img" "pick" "cart";gap:14px}
  .sp-combo__img{aspect-ratio:4/3}
  .sp-combo__pick{margin-top:0}
  .sp-combo__nav{display:none}
  .sp-combo__chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .sp-combo__chips button{flex:none}
  .sp-combo__tile{flex-basis:138px}
  .sp-combo__opt{height:38px}
}