/* =====================================================================
   BISELL STUDIO — la vista nueva del probador (05/10/2026)
   Solo vive en /bisell/probar/. El probador de 23 (/probador/) no la carga.
   Paleta: Carbón #080808 · Champagne #D4B06A · Hueso #F5F1E7 · Gris óptico #1F1F1F
   Tipos:  Satoshi (títulos) · Inter (interfaz)
   ===================================================================== */
html[data-vista="studio"]{
  --bs-carbon:#080808; --bs-gris:#1f1f1f; --bs-hueso:#f5f1e7; --bs-champ:#d4b06a;
  --bs-champ-2:#e6c987; --bs-champ-3:#b38f4c; --bs-tinta:#17130a;
  --bs-txt2:rgb(242 242 242 / .66); --bs-txt3:rgb(242 242 242 / .44);
  --bs-linea:rgb(242 242 242 / .10); --bs-linea-2:rgb(242 242 242 / .16);
  --bs-vidrio:rgb(16 15 13 / .74); --bs-vidrio-2:rgb(22 21 18 / .84);
  --bs-oro:linear-gradient(180deg,#ead08f 0%,#d4b06a 52%,#bd9853 100%);
  --bs-sombra-oro:0 10px 28px -8px rgb(188 7 0 / .55), inset 0 1px 0 rgb(255 255 255 / .45);
  --bs-ease:cubic-bezier(.22,1,.36,1); --bs-ease-2:cubic-bezier(.65,0,.35,1);
  --bs-f-t:'Satoshi','Inter B',system-ui,sans-serif; --bs-f-u:'Inter B','Inter',system-ui,sans-serif;
  --bs-safe-t:env(safe-area-inset-top,0px); --bs-safe-b:env(safe-area-inset-bottom,0px);
}
html[data-vista="studio"] body{background:var(--bs-carbon);-webkit-tap-highlight-color:transparent}

/* ---------- lo que la vista nueva reemplaza: fuera de la vista, sigue andando ---------- */
html[data-vista="studio"] #intro > *:not(#progSlot),
html[data-vista="studio"] #close,
html[data-vista="studio"] #feMark,
html[data-vista="studio"] #d23,
html[data-vista="studio"] #vrail,
html[data-vista="studio"] #hud,
html[data-vista="studio"] #readout,
html[data-vista="studio"] #comprar,
html[data-vista="studio"] #verCarrito,
html[data-vista="studio"] #av3d,
html[data-vista="studio"] #dock,
html[data-vista="studio"] #progSlot{opacity:0!important;pointer-events:none!important;visibility:hidden!important}
html[data-vista="studio"] #intro{background:transparent!important}

/* ---------- piezas comunes ---------- */
.bs-capa{position:fixed;inset:0;z-index:60;font-family:var(--bs-f-u);color:var(--bs-hueso);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.bs-capa[hidden],.bs-capa [hidden]:not(.pastilla){display:none!important}
.bs-capa button{font:inherit;color:inherit;-webkit-appearance:none;appearance:none;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.bs-capa svg{display:block}
.bs-marca{display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--bs-f-t);font-weight:600;
  font-size:13px;letter-spacing:.42em;padding-left:.42em;color:var(--bs-champ);user-select:none}
.bs-marca i{display:block;width:22px;height:1px;background:linear-gradient(90deg,transparent,rgb(188 7 0 / .7))}
.bs-marca i:last-child{background:linear-gradient(90deg,rgb(188 7 0 / .7),transparent)}
.bs-capa .bs-redondo{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bs-vidrio);
  border:1px solid var(--bs-linea-2);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  transition:transform .25s var(--bs-ease),background .25s,border-color .25s}
.bs-capa .bs-redondo:active{transform:scale(.92)}
.bs-capa .bs-redondo svg{width:20px;height:20px}
.bs-cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  height:56px;border-radius:16px;background:var(--bs-oro)!important;color:var(--bs-tinta)!important;font-weight:600;font-size:16.5px;
  letter-spacing:-.005em;box-shadow:var(--bs-sombra-oro);transition:transform .2s var(--bs-ease),box-shadow .3s,filter .2s}
.bs-cta svg{width:18px;height:18px;transition:transform .35s var(--bs-ease)}
.bs-cta:hover svg{transform:translateX(3px)}
.bs-cta:active{transform:scale(.975);filter:brightness(.97)}
.bs-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / .45) 48%,transparent 66%);
  transform:translateX(-120%);animation:bsBrillo 4.8s 1.6s var(--bs-ease-2) infinite}
@keyframes bsBrillo{0%,62%{transform:translateX(-120%)}86%,100%{transform:translateX(120%)}}
.bs-cta:focus-visible,.bs-capa button:focus-visible{outline:2px solid var(--bs-champ);outline-offset:3px}

/* =====================================================================
   01 · PORTADA
   ===================================================================== */
#bsIntro{z-index:70;display:flex;flex-direction:column;align-items:center;overflow:hidden;
  background:radial-gradient(120% 70% at 50% 34%,#1b1710 0%,#0d0c0a 46%,var(--bs-carbon) 78%)}
#bsIntro .bs-grano{position:absolute;inset:0;opacity:.06;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#bsIntro .bs-top{position:relative;width:100%;display:flex;align-items:center;justify-content:center;
  padding:calc(22px + var(--bs-safe-t)) 18px 0;min-height:66px}
#bsIntro .bs-top .bs-redondo{position:absolute;right:16px;top:calc(12px + var(--bs-safe-t))}
#bsIntro .bs-cuerpo{position:relative;flex:1;width:100%;max-width:440px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:0 26px;gap:0}
.bs-heroe{position:relative;width:min(300px,78vw);aspect-ratio:300/150;margin:0 0 30px}
.bs-heroe .halo{position:absolute;left:50%;top:52%;width:120%;height:150%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgb(188 7 0 / .20),rgb(188 7 0 / .06) 55%,transparent 72%);
  filter:blur(6px);animation:bsHalo 6s ease-in-out infinite}
@keyframes bsHalo{50%{opacity:.65;transform:translate(-50%,-50%) scale(1.06)}}
.bs-heroe svg{position:relative;width:100%;height:100%;overflow:visible}
.bs-heroe .tr{fill:none;stroke:var(--bs-champ);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--l,600);stroke-dashoffset:var(--l,600);animation:bsTrazo 1.7s var(--bs-ease) forwards}
.bs-heroe .tr.fino{stroke-width:1.2;opacity:.55}
.bs-heroe .cristal{fill:url(#bsCristal);opacity:0;animation:bsAparece 1s 1.25s var(--bs-ease) forwards}
.bs-heroe .reflejo{fill:none;stroke:rgb(255 255 255 / .55);stroke-width:1.4;stroke-linecap:round;opacity:0;
  animation:bsAparece .8s 1.6s var(--bs-ease) forwards}
.bs-heroe .medida{opacity:0;animation:bsAparece .9s 1.9s var(--bs-ease) forwards}
.bs-heroe .medida line{stroke:rgb(188 7 0 / .55);stroke-width:1}
.bs-heroe .medida text{fill:var(--bs-champ);font:600 9.5px var(--bs-f-u);letter-spacing:.06em}
.bs-heroe .barre{stroke:url(#bsBarre);stroke-width:2;opacity:0;animation:bsBarre 3.6s 2.4s var(--bs-ease-2) infinite}
@keyframes bsTrazo{to{stroke-dashoffset:0}}
@keyframes bsAparece{to{opacity:1}}
@keyframes bsBarre{0%{opacity:0;transform:translateY(-18px)}12%{opacity:.9}55%{opacity:.9}70%,100%{opacity:0;transform:translateY(118px)}}
#bsIntro h1{margin:0;text-align:center;font-family:var(--bs-f-t);font-weight:600;font-size:clamp(31px,8.6vw,40px);
  line-height:1.06;letter-spacing:-.035em;color:var(--bs-hueso);text-wrap:balance}
#bsIntro h1 em{font-style:normal;background:linear-gradient(180deg,#f0d79c,#d4b06a 60%,#c19a55);-webkit-background-clip:text;
  background-clip:text;color:transparent}
#bsIntro .bs-sub{margin:14px 0 30px;text-align:center;color:var(--bs-txt2);font-size:15.5px;line-height:1.5;max-width:30ch}
#bsIntro .bs-accion{width:100%}
#bsIntro .bs-consent{display:flex;gap:9px;align-items:flex-start;margin:14px 2px 0;color:var(--bs-txt3);font-size:12.2px;line-height:1.5}
#bsIntro .bs-consent svg{flex:none;width:14px;height:14px;margin-top:2px;color:rgb(188 7 0 / .8)}
#bsIntro .bs-otras{display:flex;gap:10px;width:100%;margin-top:22px}
#bsIntro .bs-otras button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:14px;
  border:1px solid var(--bs-linea-2);background:rgb(242 242 242 / .03);color:var(--bs-hueso);font-size:14.5px;font-weight:500;
  transition:background .25s,border-color .25s,transform .2s var(--bs-ease)}
#bsIntro .bs-otras button svg{width:18px;height:18px;color:var(--bs-champ)}
#bsIntro .bs-otras button:hover{background:rgb(242 242 242 / .06);border-color:rgb(188 7 0 / .35)}
#bsIntro .bs-otras button:active{transform:scale(.97)}
#bsIntro .bs-error{min-height:0;margin:12px 0 0;text-align:center;color:#f1b8a0;font-size:13px;line-height:1.45}
#bsIntro .bs-error:empty{display:none}
#bsIntro .bs-pie{position:relative;width:100%;padding:16px 20px calc(18px + var(--bs-safe-b));display:flex;flex-direction:column;
  align-items:center;gap:6px;color:var(--bs-txt3);font-size:11px;letter-spacing:.02em;text-align:center}
#bsIntro .bs-pie a{color:inherit;text-decoration:none;letter-spacing:.24em;font-size:10px;text-transform:uppercase}
#bsIntro .bs-pie a b{color:var(--bs-txt2);font-weight:600}
/* entrada escalonada */
#bsIntro .bs-in{opacity:0;transform:translateY(14px);animation:bsSube .9s var(--bs-ease) forwards}
#bsIntro .bs-in.d1{animation-delay:.15s}#bsIntro .bs-in.d2{animation-delay:.32s}#bsIntro .bs-in.d3{animation-delay:.48s}
#bsIntro .bs-in.d4{animation-delay:.62s}#bsIntro .bs-in.d5{animation-delay:.76s}
@keyframes bsSube{to{opacity:1;transform:none}}
#bsIntro.saliendo{animation:bsSalePortada .55s var(--bs-ease) forwards}
@keyframes bsSalePortada{to{opacity:0;transform:scale(1.03);filter:blur(6px)}}
/* modo regalo: la portada lo dice */
html.bs-regalo #bsIntro h1 em{background:linear-gradient(180deg,#f0d79c,#d4b06a)}

/* =====================================================================
   02 · DETECCIÓN DE ROSTRO
   ===================================================================== */
#bsDetect{z-index:65;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  background:var(--bs-carbon);transition:background .7s var(--bs-ease)}
#bsDetect.camara{background:transparent}
#bsDetect .velo{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .7s var(--bs-ease);
  background:radial-gradient(ellipse var(--ovw,34vh) var(--ovh,46vh) at 50% 43%,transparent 0,transparent 96%,rgb(10 0 2 / .78) 100%)}
#bsDetect.camara .velo{opacity:1}
#bsDetect .bs-top{position:relative;width:100%;display:flex;align-items:center;justify-content:center;
  padding:calc(12px + var(--bs-safe-t)) 16px 0;min-height:58px}
#bsDetect .bs-top .bs-redondo{position:absolute;left:16px;top:calc(8px + var(--bs-safe-t))}
#bsDetect .ovalo{position:absolute;left:50%;top:43%;width:var(--ovw2,62vw);max-width:330px;aspect-ratio:3/4.1;
  transform:translate(-50%,-50%);pointer-events:none}
#bsDetect .ovalo svg{width:100%;height:100%;overflow:visible}
#bsDetect .ovalo .aro{fill:none;stroke:rgb(188 7 0 / .9);stroke-width:1.6;stroke-dasharray:4 7;
  animation:bsGira 14s linear infinite}
#bsDetect .ovalo .aro2{fill:none;stroke:rgb(188 7 0 / .32);stroke-width:1}
#bsDetect .ovalo .cruz line{stroke:rgb(188 7 0 / .5);stroke-width:1}
#bsDetect .ovalo .tick{stroke:var(--bs-champ);stroke-width:2;stroke-linecap:round}
#bsDetect .ovalo .barrido{fill:url(#bsBarrido);animation:bsScan 2.6s var(--bs-ease-2) infinite}
@keyframes bsGira{to{stroke-dashoffset:-220}}
@keyframes bsScan{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(100%);opacity:0}}
#bsDetect.ok .ovalo .aro{stroke-dasharray:none;stroke:var(--bs-champ);stroke-width:2.2;animation:none;filter:drop-shadow(0 0 8px rgb(188 7 0 / .6))}
#bsDetect.ok .ovalo .barrido{animation:none;opacity:0}
#bsDetect .respira{position:absolute;inset:-6%;border-radius:50%;border:1px solid rgb(188 7 0 / .25);
  animation:bsRespira 2.8s ease-in-out infinite}
@keyframes bsRespira{50%{transform:scale(1.04);opacity:.4}}
#bsDetect .abajo{position:relative;width:100%;max-width:440px;padding:0 18px calc(22px + var(--bs-safe-b))}
#bsDetect .tarjeta{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:var(--bs-vidrio-2);
  border:1px solid var(--bs-linea);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 18px 40px -18px rgb(0 0 0 / .8)}
#bsDetect .tarjeta .ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgb(188 7 0 / .35);color:var(--bs-champ)}
#bsDetect .tarjeta .ic svg{width:21px;height:21px}
#bsDetect .tarjeta .tx{flex:1;min-width:0}
#bsDetect .tarjeta b{display:block;font-weight:600;font-size:15px;letter-spacing:-.01em;transition:opacity .25s}
#bsDetect .barra{position:relative;height:4px;border-radius:4px;background:rgb(242 242 242 / .1);margin-top:9px;overflow:hidden}
#bsDetect .barra i{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:var(--bs-oro);
  transition:width .6s var(--bs-ease)}
#bsDetect .barra i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .6),transparent);
  animation:bsCorre 1.4s linear infinite}
@keyframes bsCorre{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
#bsDetect .pct{flex:none;font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--bs-txt2);min-width:34px;text-align:right}
#bsDetect .consejo{display:flex;gap:10px;align-items:center;margin:12px 4px 0;color:var(--bs-txt2);font-size:13px;line-height:1.45}
#bsDetect .consejo svg{flex:none;width:18px;height:18px;color:var(--bs-champ)}
#bsDetect .falla{display:none;gap:10px;margin-top:12px}
#bsDetect.error .falla{display:flex}
#bsDetect.error .barra,#bsDetect.error .pct,#bsDetect.error .ovalo{display:none}
#bsDetect .falla button{flex:1;height:46px;border-radius:13px;border:1px solid var(--bs-linea-2);font-size:14px;font-weight:550}
#bsDetect .falla button.p{background:var(--bs-oro);color:var(--bs-tinta);border:0}
#bsDetect.sale{animation:bsDisuelve .6s var(--bs-ease) forwards}
@keyframes bsDisuelve{to{opacity:0}}

/* =====================================================================
   03 · PROBADOR ACTIVO
   ===================================================================== */
#bsVista{z-index:55;pointer-events:none}
#bsVista > *{pointer-events:auto}
#bsVista .bs-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;
  padding:calc(10px + var(--bs-safe-t)) 14px 34px;background:linear-gradient(180deg,rgb(10 0 2 / .62),rgb(10 0 2 / .25) 60%,transparent);pointer-events:none}
#bsVista .bs-top > *{pointer-events:auto}
#bsVista .bs-top .bs-marca{pointer-events:none;color:#e9cf93;text-shadow:0 1px 10px rgb(0 0 0 / .7)}
#bsVista .pastilla{position:absolute;left:50%;top:calc(64px + var(--bs-safe-t));transform:translateX(-50%);display:flex;
  align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.01em;
  background:var(--bs-vidrio);border:1px solid var(--bs-linea-2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:opacity .4s var(--bs-ease),background .35s,color .35s,border-color .35s;white-space:nowrap}
#bsVista .pastilla i{width:7px;height:7px;border-radius:50%;background:var(--bs-txt3);transition:background .3s,box-shadow .3s}
#bsVista .pastilla.ok{background:rgb(188 7 0 / .92);color:var(--bs-tinta);border-color:transparent}
#bsVista .pastilla.ok i{background:var(--bs-tinta);box-shadow:0 0 0 3px rgb(188 7 0 / .18)}
#bsVista .pastilla.aviso i{background:var(--bs-champ);animation:bsLate 1.2s ease-in-out infinite}
#bsVista .pastilla[hidden]{display:flex;opacity:0;pointer-events:none}
@keyframes bsLate{50%{opacity:.3}}
#bsVista .riel{position:absolute;right:14px;bottom:calc(246px + var(--bs-safe-b));display:flex;flex-direction:column;gap:12px}
@media (max-height:620px){#bsVista .riel{flex-direction:row;bottom:auto;top:calc(104px + var(--bs-safe-t))}}
#bsVista .riel .bs-redondo{width:46px;height:46px;position:relative}
#bsVista .riel .bs-redondo span{position:absolute;right:56px;top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;
  padding:5px 10px;border-radius:8px;background:var(--bs-vidrio-2);font-size:12px;font-weight:550;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s var(--bs-ease)}
@media (hover:hover){#bsVista .riel .bs-redondo:hover span{opacity:1;transform:translateY(-50%)}}
#bsVista .riel .bs-redondo.flash{animation:bsFlash .5s var(--bs-ease)}
@keyframes bsFlash{40%{background:var(--bs-champ);color:var(--bs-tinta)}}
/* el muelle de abajo: carrusel + ficha + carrito */
#bsVista .muelle{position:absolute;left:0;right:0;bottom:0;padding:34px 0 calc(14px + var(--bs-safe-b));
  background:linear-gradient(0deg,rgb(10 0 2 / .82) 0%,rgb(10 0 2 / .6) 60%,transparent);display:flex;flex-direction:column;align-items:center}
#bsVista .carrusel{width:100%;max-width:560px;display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x mandatory;
  justify-content:safe center;padding:6px 16px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
#bsVista .carrusel::-webkit-scrollbar{display:none}
#bsVista .carrusel button{flex:none;scroll-snap-align:center;position:relative;width:80px;height:58px;border-radius:14px;
  background:rgb(22 21 18 / .72);border:1px solid var(--bs-linea);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:grid;place-items:center;transition:transform .45s var(--bs-ease),border-color .3s,box-shadow .35s,background .3s}
#bsVista .carrusel button img{width:86%;height:70%;object-fit:contain;filter:drop-shadow(0 3px 4px rgb(0 0 0 / .5));
  transition:transform .45s var(--bs-ease)}
#bsVista .carrusel button .sin{width:46px;height:20px;color:rgb(188 7 0 / .55)}
#bsVista .carrusel button .sin svg{width:100%;height:100%}
#bsVista .carrusel button[aria-pressed="true"]{border-color:var(--bs-champ);background:rgb(40 34 22 / .8);
  box-shadow:0 0 0 1px rgb(188 7 0 / .45),0 8px 22px -6px rgb(188 7 0 / .55);transform:translateY(-3px) scale(1.06)}
#bsVista .carrusel button[aria-pressed="true"] img{transform:scale(1.06)}
#bsVista .carrusel button[aria-pressed="true"]::after{content:"";position:absolute;bottom:-9px;left:50%;width:4px;height:4px;
  margin-left:-2px;border-radius:50%;background:var(--bs-champ);box-shadow:0 0 6px var(--bs-champ)}
#bsVista .carrusel button.cargando img{opacity:.45}
#bsVista .tarjeta{width:calc(100% - 28px);max-width:460px;margin-top:4px;display:flex;align-items:center;gap:12px;
  padding:11px 12px 11px 14px;border-radius:18px;background:var(--bs-vidrio-2);border:1px solid var(--bs-linea);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
#bsVista .tarjeta .mini{flex:none;width:58px;height:38px;display:grid;place-items:center}
#bsVista .tarjeta .mini img{max-width:100%;max-height:100%;object-fit:contain}
#bsVista .tarjeta .tx{flex:1;min-width:0}
#bsVista .tarjeta .nom{font-family:var(--bs-f-t);font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bsVista .tarjeta .det{color:var(--bs-txt2);font-size:12.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bsVista .tarjeta .precio{font-family:var(--bs-f-t);font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--bs-hueso);
  font-variant-numeric:tabular-nums;white-space:nowrap}
#bsVista .tarjeta .tx,#bsVista .tarjeta .precio,#bsVista .tarjeta .mini{transition:opacity .25s var(--bs-ease),transform .35s var(--bs-ease)}
#bsVista .tarjeta.cambia .tx,#bsVista .tarjeta.cambia .precio,#bsVista .tarjeta.cambia .mini{opacity:0;transform:translateY(5px)}
.bs-corazon{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--bs-txt2);
  transition:color .25s,transform .2s var(--bs-ease)}
.bs-corazon svg{width:21px;height:21px}
.bs-corazon[aria-pressed="true"]{color:var(--bs-champ)}
.bs-corazon[aria-pressed="true"] svg path{fill:currentColor}
.bs-corazon.pop{animation:bsPop .45s var(--bs-ease)}
@keyframes bsPop{35%{transform:scale(1.32)}70%{transform:scale(.92)}}
#bsVista .comprar{width:calc(100% - 28px);max-width:460px;margin-top:10px}
#bsVista .comprar .bs-cta{height:54px}
#bsVista .comprar .bs-cta.hecho{background:linear-gradient(180deg,#2a251a,#1d1a13)!important;color:var(--bs-champ)!important;
  box-shadow:inset 0 0 0 1px rgb(188 7 0 / .55)}
#bsVista .comprar .bs-cta.hecho::after{display:none}
#bsVista .comprar .bs-cta .ok{display:none}
#bsVista .comprar .bs-cta.hecho .ok{display:block;animation:bsTilde .5s var(--bs-ease)}
#bsVista .comprar .bs-cta.hecho .fl{display:none}
@keyframes bsTilde{from{transform:scale(.4);opacity:0}}
/* entrada del probador */
#bsVista.entra .bs-top{animation:bsBaja .8s var(--bs-ease) backwards}
#bsVista.entra .pastilla{animation:bsBajaC .8s .1s var(--bs-ease) backwards}
#bsVista.entra .riel > *{animation:bsLado .7s var(--bs-ease) backwards}
#bsVista.entra .riel > :nth-child(2){animation-delay:.07s}#bsVista.entra .riel > :nth-child(3){animation-delay:.14s}
#bsVista.entra .riel > :nth-child(4){animation-delay:.21s}
#bsVista.entra .muelle{animation:bsSubeM .9s .12s var(--bs-ease) backwards}
@keyframes bsBaja{from{opacity:0;transform:translateY(-16px)}}
@keyframes bsBajaC{from{opacity:0;transform:translate(-50%,-10px)}}
@keyframes bsLado{from{opacity:0;transform:translateX(18px)}}
@keyframes bsSubeM{from{opacity:0;transform:translateY(40px)}}
/* foto congelada / hoja / dialogos nativos encima de todo */
html[data-vista="studio"] #congelada:not(.hide) ~ *{}
html.bs-congelada #bsVista{opacity:0;pointer-events:none}
html.bs-congelada #bsVista *{pointer-events:none}

/* =====================================================================
   04 · FICHA TÉCNICA (hoja)
   ===================================================================== */
#bsFicha{z-index:80;display:flex;align-items:flex-end;justify-content:center}
#bsFicha .fondo{position:absolute;inset:0;background:rgb(0 0 0 / .55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .4s var(--bs-ease)}
#bsFicha .hoja{position:relative;width:100%;max-width:520px;max-height:88vh;overflow:auto;border-radius:26px 26px 0 0;
  background:linear-gradient(180deg,#15130f,#0c0b09 60%);border:1px solid var(--bs-linea);border-bottom:0;
  padding:10px 20px calc(22px + var(--bs-safe-b));transform:translateY(100%);transition:transform .55s var(--bs-ease);
  box-shadow:0 -20px 50px -20px rgb(0 0 0 / .9)}
#bsFicha:not(.abierta){pointer-events:none}
#bsFicha.abierta .fondo{opacity:1}
#bsFicha.abierta .hoja{transform:none}
#bsFicha .asa{width:38px;height:4px;border-radius:4px;background:rgb(242 242 242 / .2);margin:0 auto 10px}
#bsFicha .cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
#bsFicha .cab .bs-marca{font-size:11px}
#bsFicha .foto{position:relative;height:150px;display:grid;place-items:center;margin:6px 0 2px}
#bsFicha .foto::before{content:"";position:absolute;inset:10% 12%;background:radial-gradient(closest-side,rgb(188 7 0 / .16),transparent);
  filter:blur(4px)}
#bsFicha .foto img{position:relative;max-width:88%;max-height:100%;object-fit:contain;filter:drop-shadow(0 14px 18px rgb(0 0 0 / .7));
  animation:bsFlota 6s ease-in-out infinite}
@keyframes bsFlota{50%{transform:translateY(-5px) rotate(-.6deg)}}
#bsFicha .tit{display:flex;align-items:center;gap:10px}
#bsFicha .tit .tx{flex:1}
#bsFicha h3{margin:0;font-family:var(--bs-f-t);font-weight:600;font-size:24px;letter-spacing:-.03em}
#bsFicha .tit p{margin:3px 0 0;color:var(--bs-txt2);font-size:13.5px}
#bsFicha .precio{font-family:var(--bs-f-t);font-weight:600;font-size:18px}
#bsFicha .pestanas{display:flex;gap:6px;margin:16px 0 14px;padding:4px;border-radius:14px;background:rgb(242 242 242 / .05);border:1px solid var(--bs-linea)}
#bsFicha .pestanas button{flex:1;height:36px;border-radius:10px;font-size:13.5px;font-weight:550;color:var(--bs-txt2);
  transition:background .3s var(--bs-ease),color .3s}
#bsFicha .pestanas button[aria-selected="true"]{background:var(--bs-champ);color:var(--bs-tinta)}
#bsFicha .panel{display:none;animation:bsSube .5s var(--bs-ease) both}
#bsFicha .panel.on{display:block}
#bsFicha .plano{border:1px solid var(--bs-linea);border-radius:18px;padding:16px 14px 14px;background:rgb(242 242 242 / .02)}
#bsFicha .plano + .plano{margin-top:10px}
#bsFicha .plano svg{width:100%;height:auto;overflow:visible}
#bsFicha .plano .lin{fill:none;stroke:var(--bs-hueso);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;opacity:.85}
#bsFicha .plano .cota line,#bsFicha .plano .cota path{stroke:var(--bs-champ);stroke-width:1;fill:none}
#bsFicha .plano .cota text{fill:var(--bs-champ);font:600 11px var(--bs-f-u);letter-spacing:.02em}
#bsFicha .datos{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;border-top:1px solid var(--bs-linea)}
#bsFicha .datos div{text-align:center;padding-top:10px}
#bsFicha .datos b{display:block;font-family:var(--bs-f-t);font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#bsFicha .datos span{font-size:11.5px;color:var(--bs-txt2);letter-spacing:.03em}
#bsFicha .rostro{border:1px solid var(--bs-linea);border-radius:18px;padding:18px 16px}
#bsFicha .rostro .fila{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--bs-linea)}
#bsFicha .rostro .fila:last-of-type{border-bottom:0}
#bsFicha .rostro .fila span{color:var(--bs-txt2);font-size:13.5px}
#bsFicha .rostro .fila b{font-family:var(--bs-f-t);font-size:18px;font-weight:600}
#bsFicha .rostro p{margin:10px 0 0;color:var(--bs-txt2);font-size:13px;line-height:1.5}
#bsFicha .veredicto{display:flex;gap:10px;align-items:center;margin-top:12px;padding:12px 14px;border-radius:14px;
  background:rgb(188 7 0 / .1);border:1px solid rgb(188 7 0 / .3);color:var(--bs-hueso);font-size:14px;font-weight:550}
#bsFicha .veredicto svg{flex:none;width:20px;height:20px;color:var(--bs-champ)}
#bsFicha .nota{margin:12px 2px 0;color:var(--bs-txt3);font-size:11.5px;line-height:1.5}
#bsFicha .bs-cta{margin-top:16px}

/* =====================================================================
   aviso flotante (demo del carrito, errores)
   ===================================================================== */
#bsAviso{position:fixed;left:50%;bottom:calc(150px + var(--bs-safe-b));z-index:90;transform:translate(-50%,16px);opacity:0;
  max-width:calc(100% - 40px);display:flex;gap:10px;align-items:center;padding:12px 16px;border-radius:14px;
  background:rgb(20 19 16 / .94);border:1px solid rgb(188 7 0 / .35);color:var(--bs-hueso);font:500 13.5px/1.4 var(--bs-f-u);
  box-shadow:0 18px 40px -16px rgb(0 0 0 / .9);transition:opacity .35s var(--bs-ease),transform .45s var(--bs-ease);pointer-events:none}
#bsAviso.on{opacity:1;transform:translate(-50%,0)}
#bsAviso svg{flex:none;width:18px;height:18px;color:var(--bs-champ)}

/* =====================================================================
   05 · MODO REGALO y pantallas nativas, con la ropa de Bisell
   ===================================================================== */
html[data-vista="studio"] #quien{background:rgb(10 0 2 / .72)!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important}
html[data-vista="studio"] #quien .caja,html[data-vista="studio"] #prep .caja,html[data-vista="studio"] #salir > div,
html[data-vista="studio"] #confirmar > div{background:linear-gradient(180deg,#16140f,#0d0c0a)!important;border:1px solid var(--bs-linea-2)!important;
  border-radius:24px!important;color:var(--bs-hueso)!important;font-family:var(--bs-f-u)!important;box-shadow:0 30px 60px -20px rgb(0 0 0 / .9)!important}
html[data-vista="studio"] #quien .cinta,html[data-vista="studio"] #prep .cinta{background:var(--bs-oro)!important}
html[data-vista="studio"] #quien h2,html[data-vista="studio"] #prep h2,html[data-vista="studio"] #salir h2,html[data-vista="studio"] #salirT,
html[data-vista="studio"] #confT{font-family:var(--bs-f-t)!important;font-weight:600!important;letter-spacing:-.03em!important;color:var(--bs-hueso)!important}
html[data-vista="studio"] #quien p,html[data-vista="studio"] #quien .nota,html[data-vista="studio"] #prep .paso{color:var(--bs-txt2)!important}
html[data-vista="studio"] #quien input{background:rgb(242 242 242 / .05)!important;border:1px solid var(--bs-linea-2)!important;color:var(--bs-hueso)!important;
  border-radius:14px!important;font-family:var(--bs-f-u)!important}
html[data-vista="studio"] #quien input:focus{border-color:var(--bs-champ)!important;outline:none!important;box-shadow:0 0 0 3px rgb(188 7 0 / .2)!important}
html[data-vista="studio"] #quienOk,html[data-vista="studio"] #salirSi,html[data-vista="studio"] #confOk{background:var(--bs-oro)!important;color:var(--bs-tinta)!important;
  border:0!important;border-radius:14px!important;font-family:var(--bs-f-u)!important;font-weight:650!important;box-shadow:var(--bs-sombra-oro)!important}
html[data-vista="studio"] #quienNo,html[data-vista="studio"] #salirNo,html[data-vista="studio"] #confNo,html[data-vista="studio"] #prepVolver{
  background:transparent!important;color:var(--bs-hueso)!important;border:1px solid var(--bs-linea-2)!important;border-radius:14px!important;font-family:var(--bs-f-u)!important}
html[data-vista="studio"] #prep{background:var(--bs-carbon)!important}
html[data-vista="studio"] #prep .hilo{background:rgb(242 242 242 / .1)!important}
html[data-vista="studio"] #prep .hilo::after,html[data-vista="studio"] #prep .hilo::before{background:var(--bs-oro)!important}
html[data-vista="studio"] #toast{font-family:var(--bs-f-u)!important;background:rgb(20 19 16 / .94)!important;color:var(--bs-hueso)!important;
  border:1px solid rgb(188 7 0 / .35)!important;border-radius:14px!important}
/* la foto congelada (después de sacar la foto) */
html[data-vista="studio"] #congFicha{font-family:var(--bs-f-u)!important}
html[data-vista="studio"] #congNombre{font-family:var(--bs-f-t)!important;letter-spacing:-.02em!important}
html[data-vista="studio"] #congComprar.p,html[data-vista="studio"] #congComprar{background:var(--bs-oro)!important;color:var(--bs-tinta)!important;border:0!important}
html[data-vista="studio"] #congCompartir{background:var(--bs-oro)!important;color:var(--bs-tinta)!important;border:0!important;box-shadow:var(--bs-sombra-oro)!important;font-family:var(--bs-f-u)!important;font-weight:600!important}
html[data-vista="studio"] #congCompartir *{color:var(--bs-tinta)!important}
html[data-vista="studio"] #congVolver{background:var(--bs-vidrio)!important;border:1px solid var(--bs-linea-2)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html[data-vista="studio"] #congMarca{color:var(--bs-champ)!important;font-family:var(--bs-f-t)!important;letter-spacing:.42em!important}

/* ---------- escritorio: la vista se centra y respira ---------- */
@media (min-width:760px){
  #bsIntro .bs-cuerpo{max-width:460px}
  #bsVista .riel{right:28px}
  #bsVista .bs-top{padding-left:24px;padding-right:24px}
}
/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .bs-capa *,.bs-capa *::before,.bs-capa *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .bs-heroe .tr{stroke-dashoffset:0}
}

/* modo regalo: la cinta y el marco del motor se reemplazan por la pastilla de arriba */
html[data-vista="studio"] #cinta{display:none!important}
#bsVista .pastilla.regalo{background:rgb(188 7 0 / .16);border-color:rgb(188 7 0 / .5);color:var(--bs-champ)}
#bsVista .pastilla.regalo i{display:none}
#bsVista .pastilla svg{width:15px;height:15px}

/* pantallas bajas (360x640 y menos): la portada entra sin scroll */
@media (max-height:700px){
  .bs-heroe{width:min(250px,68vw);margin-bottom:18px}
  #bsIntro .bs-top{min-height:52px;padding-top:calc(14px + var(--bs-safe-t))}
  #bsIntro .bs-sub{margin:10px 0 20px}
  #bsIntro .bs-otras{margin-top:16px}
  #bsIntro .bs-pie{padding-top:10px}
}
#bsDetect .vacio{display:none;position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:92px;height:92px;
  color:rgb(188 7 0 / .55);animation:bsSube .6s var(--bs-ease) both}
#bsDetect.error .vacio{display:block}

/* =====================================================================
   PRELOADER BISELL — mismo gesto que el de 23: la marca se revela de
   izquierda a derecha con lo que de verdad va cargando, y una luz fina
   acompaña el frente. La portada espera quieta detrás (html.bs-pre).
   ===================================================================== */
#preBs{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;overflow:hidden;cursor:default;font-family:'Satoshi','Inter B',system-ui,sans-serif;
  background:radial-gradient(70% 55% at 50% 47%,#1a150c 0%,#0b0a07 58%,#050505 100%);
  transition:opacity .6s ease,transform .75s cubic-bezier(.2,.7,.2,1),filter .6s ease}
#preBs.fuera{opacity:0;transform:scale(1.035);filter:blur(4px);pointer-events:none}
#preBs .luz{position:absolute;pointer-events:none;will-change:transform}
#preBs .luz.la{width:95vmax;height:60vmax;left:-30vmax;top:-22vmax;
  background:radial-gradient(closest-side,rgb(188 7 0 / .14),rgb(188 7 0 / 0));animation:bsLuzA 11s ease-in-out infinite alternate}
#preBs .luz.lb{width:80vmax;height:55vmax;right:-34vmax;bottom:-26vmax;
  background:radial-gradient(closest-side,rgb(188 7 0 / .09),rgb(188 7 0 / 0));animation:bsLuzB 13s ease-in-out infinite alternate}
#preBs .luz.lc{width:46vmax;height:22vmax;left:calc(50% - 23vmax);top:calc(50% + 4vmax);
  background:radial-gradient(closest-side,rgb(242 242 242 / .05),rgb(242 242 242 / 0));animation:bsLuzC 9s ease-in-out infinite alternate}
@keyframes bsLuzA{to{transform:translate(9vmax,6vmax) scale(1.08)}}
@keyframes bsLuzB{to{transform:translate(-8vmax,-5vmax) scale(1.12)}}
@keyframes bsLuzC{to{transform:translate(0,-3vmax) scale(1.15)}}
#preBs::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 95% at 50% 50%,transparent 52%,rgb(0 0 0 / .72) 100%)}
#preBs .marca-g{position:relative;z-index:1;width:min(30vw,118px);height:auto;color:#d4b06a;overflow:visible}
#preBs .marca-g path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:320;stroke-dashoffset:calc((1 - var(--p,0)) * 320);filter:drop-shadow(0 0 6px rgb(188 7 0 / .35))}
#preBs .logo{position:relative;z-index:1;display:grid;font-weight:600;font-size:clamp(40px,13.5vw,84px);line-height:1;
  letter-spacing:.34em;padding-left:.34em}
#preBs .logo span{grid-area:1/1;white-space:nowrap}
#preBs .fantasma{color:rgb(242 242 242 / .07)}
#preBs .rev{background:linear-gradient(180deg,#f2dca6 0%,#d4b06a 55%,#b48f4b 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  clip-path:inset(-20% calc((1 - var(--p,0)) * 100%) -20% 0);filter:drop-shadow(0 0 18px rgb(188 7 0 / .28))}
#preBs .frente{position:absolute;top:-16%;bottom:-16%;width:2px;left:calc(var(--p,0) * 100%);margin-left:-1px;border-radius:2px;
  background:linear-gradient(180deg,transparent,rgb(255 248 230 / .85),transparent);box-shadow:0 0 14px 3px rgb(188 7 0 / .55);
  opacity:calc(1 - var(--p,0) * var(--p,0) * var(--p,0))}
#preBs .bajada{position:relative;z-index:1;font:500 10.5px/1 'Inter B',system-ui,sans-serif;letter-spacing:.42em;text-indent:.42em;
  text-transform:uppercase;color:rgb(242 242 242 / .55);opacity:calc(.25 + var(--p,0) * .75)}
#preBs .fe{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);transform:translateX(-50%);z-index:1;
  font:500 9px/1.6 'Inter B',system-ui,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:rgb(242 242 242 / .32);white-space:nowrap}
#preBs .fe b{color:rgb(242 242 242 / .6);font-weight:700}
html.bs-pre #bsIntro *,html.bs-pre #bsIntro{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){#preBs .luz{animation:none}#preBs{transition:opacity .3s ease}#preBs.fuera{transform:none;filter:none}}

/* =====================================================================
   "ENCENDER LA CÁMARA": el champagne nace como un punto en el centro
   exacto del botón y crece en círculo hasta llenarlo (el gesto de 23).
   ===================================================================== */
#bsIntro #bsGo{background:rgb(188 7 0 / .07)!important;color:var(--bs-champ)!important;box-shadow:inset 0 0 0 1px rgb(188 7 0 / .55);
  isolation:isolate;transition:color .35s ease .12s,box-shadow .4s,transform .2s var(--bs-ease)}
#bsIntro #bsGo::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:calc(100% + 24px);height:0;padding-bottom:calc(100% + 24px);
  border-radius:50%;background:var(--bs-oro);transform:translate(-50%,-50%) scale(0)}
#bsIntro #bsGo::after{opacity:.5}
#bsIntro #bsGo:hover{box-shadow:inset 0 0 0 1px var(--bs-champ),0 0 24px -6px rgb(188 7 0 / .5)}
#bsIntro #bsGo.llena{color:var(--bs-tinta)!important;box-shadow:var(--bs-sombra-oro)}
#bsIntro #bsGo.llena::before{animation:bsLlenar .75s cubic-bezier(.22,.8,.2,1) both}
#bsIntro #bsGo.llena svg{animation:bsTilde .5s .35s var(--bs-ease) both}
@keyframes bsLlenar{0%{transform:translate(-50%,-50%) scale(0)}8%{transform:translate(-50%,-50%) scale(.045)}
  24%{transform:translate(-50%,-50%) scale(.045)}100%{transform:translate(-50%,-50%) scale(1)}}
#bsIntro #bsGo .pulso{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 rgb(188 7 0 / .45);
  animation:bsPulso 2.6s 2s ease-out infinite}
#bsIntro #bsGo.llena .pulso{display:none}
@keyframes bsPulso{0%{box-shadow:0 0 0 0 rgb(188 7 0 / .4)}70%,100%{box-shadow:0 0 0 12px rgb(188 7 0 / 0)}}
@media (prefers-reduced-motion:reduce){#bsIntro #bsGo.llena::before{animation:none;transform:translate(-50%,-50%) scale(1)}}
#bsIntro #bsGo > span,#bsIntro #bsGo > svg{position:relative;z-index:1}

/* =====================================================================
   PORTADA v2 (05/10 tarde): foto a pantalla completa, logo b + BISELL,
   y abajo solo lo esencial. Pisa la portada anterior.
   ===================================================================== */
#bsIntro{background:var(--bs-carbon);justify-content:flex-end}
#bsIntro .bs-grano,#bsIntro .bs-cuerpo,#bsIntro .bs-pie{display:none}
#bsIntro .fotos{position:absolute;inset:0;overflow:hidden}
#bsIntro .fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;opacity:0;
  transform:scale(1.06);transition:opacity 1.2s var(--bs-ease),transform 7s linear}
#bsIntro .fotos img.on{opacity:1;transform:scale(1)}
#bsIntro .velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgb(10 0 2 / .55) 0%,rgb(10 0 2 / 0) 22%,rgb(10 0 2 / 0) 38%,rgb(10 0 2 / .72) 60%,rgb(10 0 2 / .97) 80%,#080808 100%)}
#bsIntro .bs-top{position:absolute;left:0;right:0;top:0;padding:calc(22px + var(--bs-safe-t)) 18px 0;min-height:auto;justify-content:center}
#bsIntro .lockup{display:flex;align-items:center;gap:10px;color:var(--bs-champ);text-shadow:0 1px 12px rgb(0 0 0 / .5)}
#bsIntro .lockup svg{width:20px;height:24px;filter:drop-shadow(0 1px 6px rgb(0 0 0 / .5))}
#bsIntro .lockup span{font-family:var(--bs-f-t);font-weight:600;font-size:15px;letter-spacing:.38em;padding-left:.1em}
#bsIntro .bs-top .bs-redondo{top:calc(14px + var(--bs-safe-t))}
#bsIntro .abajo{position:relative;width:100%;max-width:460px;padding:0 24px calc(22px + var(--bs-safe-b));display:flex;flex-direction:column;align-items:stretch}
#bsIntro .ceja{margin:0 0 12px;font:500 10.5px/1 var(--bs-f-u);letter-spacing:.34em;text-transform:uppercase;color:rgb(188 7 0 / .9)}
#bsIntro h1{text-align:left;font-size:clamp(36px,10.5vw,48px);line-height:1.02;letter-spacing:-.04em}
#bsIntro .bs-sub{margin:12px 0 0;text-align:left;max-width:none;font-size:14.5px}
#bsIntro .bs-sub:empty{display:none}
#bsIntro .bs-accion{margin-top:26px}
#bsIntro #bsGo{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgb(20 17 11 / .55)!important}
#bsIntro .alt{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
#bsIntro .alt button{display:flex;align-items:center;gap:7px;padding:8px 4px;font-size:14px;font-weight:500;color:var(--bs-hueso);opacity:.86;
  transition:opacity .2s,color .2s}
#bsIntro .alt button:hover{opacity:1;color:var(--bs-champ)}
#bsIntro .alt button svg{width:17px;height:17px;color:var(--bs-champ)}
#bsIntro .alt i{width:3px;height:3px;border-radius:50%;background:var(--bs-txt3)}
#bsIntro .bs-consent{justify-content:center;text-align:center;margin:14px 0 0;font-size:11.5px}
#bsIntro .bs-consent svg{margin-top:1px}
@media (min-width:760px){
  #bsIntro{align-items:flex-start;justify-content:flex-end}
  #bsIntro .fotos{left:auto;width:58%}
  #bsIntro .fotos img{object-position:50% 28%}
  #bsIntro .velo{background:linear-gradient(90deg,#080808 0%,#080808 42%,rgb(10 0 2 / .55) 52%,rgb(10 0 2 / 0) 66%),
    linear-gradient(180deg,rgb(10 0 2 / .45),transparent 22%,transparent 80%,rgb(10 0 2 / .6))}
  #bsIntro .alt{justify-content:flex-start}
  #bsIntro .bs-consent{justify-content:flex-start;text-align:left}
  #bsIntro h1{font-size:56px}
  #bsIntro .bs-top{justify-content:flex-start;padding-left:56px}
  #bsIntro .abajo{margin:0 0 9vh 56px;padding:0}
}
@media (max-height:640px){#bsIntro h1{font-size:34px}#bsIntro .bs-accion{margin-top:18px}#bsIntro .ceja{margin-bottom:8px}}

/* el monograma b en el preloader y en los encabezados */
#preBs .b-g{position:relative;z-index:1;width:min(16vw,62px);height:auto;color:#d4b06a;overflow:visible}
#preBs .b-g path{fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round;stroke-dasharray:140;stroke-dashoffset:calc((1 - var(--p,0)) * 140);
  filter:drop-shadow(0 0 10px rgb(188 7 0 / .35))}
#preBs .b-g .f{stroke:rgb(242 242 242 / .07);stroke-dashoffset:0}
.bs-marca .bmono{display:block;flex:none;width:15px;height:18px;color:var(--bs-champ);margin-right:-2px;background:none!important;padding:0!important;border:0!important}
.bs-marca .bmono svg{width:100%;height:100%}

/* 06/10: "¿Qué foto funciona mejor?" (la guia antes de la galeria) con la ropa de Bisell.
   El tilde verde y las cruces rojas se quedan: son semaforo, no marca. */
html[data-vista="studio"] #guiaFoto{background:rgb(10 0 2 / .9)!important;-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important;color:var(--bs-hueso)!important;font-family:var(--bs-f-u)!important}
html[data-vista="studio"] #guiaFoto .cinta{background:var(--bs-oro)!important}
html[data-vista="studio"] #guiaFoto h2{font-family:var(--bs-f-t)!important;font-weight:600!important;letter-spacing:-.03em!important;color:var(--bs-hueso)!important}
html[data-vista="studio"] #guiaFoto p,html[data-vista="studio"] #guiaFoto figcaption{color:var(--bs-txt2)!important}
html[data-vista="studio"] #guiaFoto figcaption.si{color:var(--bs-hueso)!important}
html[data-vista="studio"] #guiaFoto .tips{border-color:var(--bs-linea-2)!important;border-radius:16px!important;color:var(--bs-txt2)!important}
html[data-vista="studio"] #guiaFoto .tips li::before{background:var(--bs-champ)!important}
html[data-vista="studio"] #guiaFotoOk{background:var(--bs-oro)!important;color:var(--bs-tinta)!important;border-radius:14px!important;font-family:var(--bs-f-u)!important;font-weight:650!important;box-shadow:var(--bs-sombra-oro)!important}
html[data-vista="studio"] #guiaFotoNo{color:var(--bs-txt2)!important;font-family:var(--bs-f-u)!important}

/* sin_precio (marca del cliente) */
#bsPrecio,#bsFPrecio{display:none!important}

/* ===== BRANDEO DE CLIENTE: 23 eyewear — generado por construir.py ===== */
html[data-vista="studio"]{
  --bs-carbon:#0a0002; --bs-hueso:#f2f2f2; --bs-champ:#d6d7d8;
  --bs-champ-2:#f2f2f2; --bs-champ-3:#bc0700; --bs-tinta:#f2f2f2;
  --bs-oro:linear-gradient(180deg,#d40d04 0%,#bc0700 55%,#9a0600 100%); --bs-sombra-oro:0 10px 28px -8px rgb(188 7 0 / .55), inset 0 1px 0 rgb(255 255 255 / .25);
  --bs-vidrio:rgb(10 0 2 / .78); --bs-vidrio-2:#150e0e;
  --bs-f-t:'Plex 23','IBM Plex Sans','Helvetica Neue',Arial,sans-serif; --bs-f-u:'Plex 23','IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
}
/* donde el acento claro era RELLENO con texto oscuro encima: pasa al acento de marca */
#bsFicha .pestanas button[aria-selected="true"],#bsVista .pastilla.ok{background:#bc0700!important;color:#f2f2f2!important}
@keyframes bsFlash{40%{background:#bc0700;color:#f2f2f2}}
#bsVista .carrusel button[aria-pressed="true"]{background:rgb(188 7 0 / .22)}
#bsVista .comprar .bs-cta.hecho{background:#150e0e!important}
.bs-marca .bmono,#bsIntro .lockup svg{width:120px!important;height:18px!important;color:#f2f2f2!important}
#bsIntro .lockup span{letter-spacing:.3em}
/* el resaltado del título: texto claro + subrayado de bloque en el acento (el acento es relleno, no tinta) */
#bsIntro h1 em,html.bs-regalo #bsIntro h1 em{background:none!important;-webkit-text-fill-color:#f2f2f2!important;color:#f2f2f2!important;
  box-shadow:inset 0 -.2em 0 #bc0700;padding:0 .04em}
#bsIntro .ceja{color:#d6d7d8!important}
#preBs .logo-cli{color:#f2f2f2;width:min(46vw,220px);aspect-ratio:6.66;margin:0 auto}
#preBs .logo-cli svg{width:100%;height:100%;display:block}
#bsIntroT .titulo-curvas{display:block;height:132px;width:auto;max-width:100%;color:#f2f2f2}

#bsIntroT .titulo-curvas .sub{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);animation:tcPinta .62s cubic-bezier(.65,.05,.25,1) forwards}
#bsIntroT .titulo-curvas .s0{animation-delay:.95s}#bsIntroT .titulo-curvas .s1{animation-delay:1.35s}
#bsIntroT .titulo-curvas .brillo{animation:tcBrillo 1.1s cubic-bezier(.4,0,.2,1) 2.3s forwards}
#bsIntroT .titulo-curvas .s1 .brillo{animation-delay:2.5s}
@keyframes tcPinta{0%{transform:scaleX(0) skewX(-8deg)}70%{transform:scaleX(1.015)}100%{transform:scaleX(1)}}
@keyframes tcBrillo{from{transform:translateX(0)}to{transform:translateX(5600px)}}
html.bs-pre #bsIntroT .titulo-curvas *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){#bsIntroT .titulo-curvas .sub{transform:none;animation:none}#bsIntroT .titulo-curvas .brillo{display:none}}

@property --tcA{syntax:'<angle>';inherits:false;initial-value:0deg}
#bsIntro #bsGo{box-shadow:inset 0 0 0 1px rgb(188 7 0 / .28)!important;background:rgb(10 0 2 / .55)!important;color:#f2f2f2!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);letter-spacing:.01em}
#bsIntro #bsGo .pulso{position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--tcA),transparent 0 62%,rgb(188 7 0 / .9) 78%,#ff6b5e 84%,rgb(188 7 0 / .9) 88%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:tcOrbita 3.6s linear infinite;opacity:1;transform:none!important;filter:drop-shadow(0 0 6px rgb(188 7 0 / .8))}
#bsIntro #bsGo svg{transition:transform .35s var(--bs-ease);animation:tcFlecha 3.6s var(--bs-ease) 2.6s infinite}
#bsIntro #bsGo:hover svg{transform:translateX(4px)}
#bsIntro #bsGo:active{transform:scale(.985)}
#bsIntro #bsGo.llena .pulso{opacity:0;transition:opacity .3s}
@keyframes tcOrbita{to{--tcA:360deg}}
@keyframes tcFlecha{0%,78%,100%{transform:translateX(0)}86%{transform:translateX(5px)}92%{transform:translateX(0)}96%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){#bsIntro #bsGo .pulso,#bsIntro #bsGo svg{animation:none}}
#bsIntro .fotos img{object-position:62% 30%}

/* 02/11: firma FESTUDIO (reemplaza .bs-consent) */
#bsIntro .bs-firma{display:inline-flex;gap:8px;align-items:center;margin:16px 2px 0;color:var(--bs-txt3);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:color .2s}
#bsIntro .bs-firma svg{width:24px;height:13px;flex:none}
#bsIntro .bs-firma b{font-weight:700;letter-spacing:.24em;font-size:11.5px}
#bsIntro .bs-firma:hover,#bsIntro .bs-firma:focus-visible{color:#fff}
@media (max-width:720px){#bsIntro .bs-firma{align-self:center;justify-content:center}}
#bsIntro .bs-firma span{opacity:.5}