/* ============================================================
   MinerOS Hub — TIENDA
   Escaparate de ASICs: tarjetas con datos, matchmaker, filtros,
   ficha lateral y comparador. Negro y oro del sitio; el peso lo
   llevan las cifras, no la decoración.
   ============================================================ */

/* ---------- hero ---------- */
.sh-hero .intro{max-width:640px}
.sh-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.sh-trust{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;margin-top:38px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}
/* Una línea de luz recorre el bloque cada pocos segundos: el guiño al dato en
   vivo que sostiene la página, sin ruido. */
.sh-trust::after{content:"";position:absolute;left:0;top:0;height:1px;width:38%;pointer-events:none;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:trustSweep 7s cubic-bezier(.4,0,.3,1) 1.4s infinite}
@keyframes trustSweep{0%{transform:translateX(-110%);opacity:0}12%{opacity:.9}55%{opacity:.9}70%,100%{transform:translateX(300%);opacity:0}}
.sh-tr{display:flex;flex-direction:column;gap:3px;padding:16px 18px;background:var(--card);transition:background .25s}
.sh-tr:hover{background:color-mix(in oklab,var(--gold) 4%,var(--card))}
/* Iconos de línea del propio sistema, no emoji. Se dibujan solos al aparecer. */
.sh-tr-i,.sh-w-i{display:inline-grid;place-items:center;width:38px;height:38px;margin-bottom:9px;border-radius:11px;background:rgba(231,189,90,.07);border:1px solid var(--border-gold);color:var(--gold)}
.sh-tr-i svg,.sh-w-i svg{width:20px;height:20px}
.sh-tr-i svg *,.sh-w-i svg *{stroke-dasharray:120;stroke-dashoffset:120;animation:icDraw 1.1s cubic-bezier(.3,.8,.3,1) forwards}
.sh-trust .sh-tr:nth-child(2) .sh-tr-i svg *{animation-delay:.12s}
.sh-trust .sh-tr:nth-child(3) .sh-tr-i svg *{animation-delay:.24s}
.sh-trust .sh-tr:nth-child(4) .sh-tr-i svg *{animation-delay:.36s}
@keyframes icDraw{to{stroke-dashoffset:0}}
.sh-tr-i.btc{color:var(--gold)}
.sh-tr-i.btc svg{width:21px;height:21px}
.sh-tr b{font-size:.9rem}
.sh-tr span{font-size:.78rem;color:var(--text-2)}
.sh-tr a{color:var(--gold-2);text-decoration:none;border-bottom:1px solid transparent}
.sh-tr a:hover{border-bottom-color:var(--gold)}
.sh-sec{padding:64px 0}
.sh-sec .sec-head{margin-bottom:26px}

/* ---------- matchmaker ----------
   Tres pasos numerados. El número es la guía: se enciende en oro cuando el
   paso queda resuelto, y las opciones son botones anchos y legibles. */
.sh-mm{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden}
.sh-mm-step{display:flex;gap:18px;padding:24px 26px;border-bottom:1px solid var(--border)}
.sh-mm-step:last-of-type{border-bottom:0}
.sh-mm-n{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;margin-top:2px;border-radius:50%;border:1px solid var(--border);background:var(--bg-2);color:var(--text-muted);font-family:var(--mono);font-size:.86rem;font-weight:700;transition:.25s}
.sh-mm-step.done .sh-mm-n{border-color:var(--gold);background:var(--gold);color:#1a1407}
.sh-mm-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.sh-mm-c>label{font-family:var(--display);font-size:1.06rem;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.sh-mm-opts{display:flex;flex-wrap:wrap;gap:9px}
.sh-mm-opts button{position:relative;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;color:var(--text-2);font:inherit;font-size:.95rem;padding:12px 18px;min-height:50px;cursor:pointer;transition:border-color .2s,color .2s,background .2s,transform .2s cubic-bezier(.2,.7,.3,1)}
.sh-mm-opts button:hover{border-color:var(--border-gold);color:var(--text);transform:translateY(-2px)}
.sh-mm-opts button.on{border-color:var(--gold);background:linear-gradient(180deg,var(--gold),color-mix(in oklab,var(--gold) 82%,#000));color:#1a1407;font-weight:700;box-shadow:0 6px 18px rgba(231,189,90,.22)}
.sh-mm-opts.goals button{font-size:.92rem}
/* Campo de tarifa: la cifra es el protagonista, con el símbolo y la unidad
   dentro del propio marco para que no haya duda de qué se escribe. */
.sh-mm-field{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;background:var(--bg-2);border:1px solid var(--border);border-radius:14px;padding:0 18px;height:64px;transition:border-color .2s,box-shadow .2s}
.sh-mm-field:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-glow)}
.sh-mm-field .cur{font-family:var(--display);font-size:1.35rem;font-weight:700;color:var(--gold)}
.sh-mm-field input{width:132px;background:none;border:0;color:var(--text);font-family:var(--display);font-size:1.75rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;padding:0}
.sh-mm-field input:focus{outline:none}
.sh-mm-field input::placeholder{color:var(--text-muted);font-weight:400}
.sh-mm-field .unit{font-family:var(--mono);font-size:.82rem;color:var(--text-muted);white-space:nowrap}
.sh-mm-quick{display:flex;flex-wrap:wrap;gap:7px}
.sh-mm-quick button{background:none;border:1px solid var(--border);border-radius:999px;color:var(--text-muted);font-family:var(--mono);font-size:.76rem;padding:8px 14px;min-height:38px;cursor:pointer;transition:.18s}
.sh-mm-quick button:hover{border-color:var(--border-gold);color:var(--gold)}
.sh-mm-quick button.on{border-color:var(--gold);background:var(--gold-glow);color:var(--gold);font-weight:700}
.sh-mm-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:20px 26px;background:var(--bg-2);border-top:1px solid var(--border)}
.sh-mm-act .btn{min-height:52px;font-size:.95rem}
.sh-mm-prog{display:flex;align-items:center;gap:10px}
.sh-mm-prog i{display:block;width:88px;height:4px;border-radius:99px;background:var(--border);position:relative;overflow:hidden}
.sh-mm-prog i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--gold);border-radius:99px;transition:width .4s cubic-bezier(.2,.7,.3,1)}
.sh-mm-prog em{font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--text-muted)}
.sh-mm-out{margin-top:18px}
.sh-mm-note{color:var(--text-2);font-size:.95rem;border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin:0}
.sh-mm-eye{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);margin-bottom:10px}
.sh-mm-best{background:linear-gradient(140deg,color-mix(in oklab,var(--gold) 8%,var(--card)),var(--card) 62%);border:1px solid var(--border-gold);border-radius:16px;padding:24px}
.sh-mm-bh{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px}
.sh-mm-bh b{font-family:var(--display);font-size:1.6rem;letter-spacing:-.02em}
.sh-mm-bh span{font-family:var(--mono);font-size:.76rem;color:var(--text-2)}
.sh-mm-bp{font-family:var(--display);font-size:2rem;font-weight:800;letter-spacing:-.03em;color:var(--gold);margin-top:6px;font-variant-numeric:tabular-nums}
.sh-mm-bw{color:var(--text-2);font-size:.9rem;margin:10px 0 0;max-width:620px}
.sh-mm-bw em{font-style:normal;color:var(--text);font-weight:600}
.sh-mm-ba{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.sh-mm-ba .btn{cursor:pointer}
.sh-mm-best{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:24px;align-items:center}
.sh-mm-bc{min-width:0}
.sh-mm-img,.sh-mm-th{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,color-mix(in oklab,var(--gold) 12%,transparent),transparent 70%),var(--bg-2);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.sh-mm-img{aspect-ratio:1;width:100%}
.sh-mm-img img,.sh-mm-th img{width:100%;height:100%;object-fit:contain;padding:8%}
.sh-mm-img.empty small,.sh-mm-th.empty small{font-family:var(--mono);font-size:.62rem;color:var(--text-muted);text-align:center;padding:6px}
.sh-mm-th{flex:0 0 56px;width:56px;height:56px;border-radius:10px}
.sh-mm-th img{padding:6%}
.sh-mm-th.empty small{font-size:.5rem;line-height:1.2}
@media(max-width:640px){.sh-mm-best{grid-template-columns:minmax(0,1fr)}.sh-mm-img{max-width:220px;margin:0 auto}}
.sh-mm-rest{margin-top:20px}
.sh-mm-alt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;width:100%;text-align:left;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:8px;color:var(--text);font:inherit;cursor:pointer;transition:.18s}
.sh-mm-alt:hover{border-color:var(--border-gold)}
.sh-mm-alt b{font-size:1rem}
.sh-mm-alt span{font-family:var(--mono);font-size:.72rem;color:var(--text-2)}
.sh-mm-alt em{margin-left:auto;font-style:normal;font-family:var(--mono);font-weight:700;color:var(--gold)}

/* ---------- barra de tarifa ---------- */
.sh-rate{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:16px 20px;margin:0 0 16px;border:1px solid var(--border-gold);border-radius:14px;background:linear-gradient(120deg,color-mix(in oklab,var(--gold) 6%,var(--card)),var(--card) 55%)}
.sh-rate-t{display:flex;flex-direction:column;gap:3px;min-width:0;max-width:420px}
.sh-rate-t b{font-family:var(--display);font-size:1rem}
.sh-rate-t span{font-size:.8rem;color:var(--text-2)}
.sh-rate-in{display:flex;align-items:center;gap:8px;margin-left:auto}
.sh-rate-in label{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.sh-rate-in input{width:104px;min-height:44px;background:var(--bg-2);border:1px solid var(--border);border-radius:11px;color:var(--text);font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 12px}
.sh-rate-in input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
.sh-chips{display:flex;gap:6px;flex-wrap:wrap}
.sh-chips button{background:none;border:1px solid var(--border);border-radius:999px;color:var(--text-muted);font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;padding:8px 12px;min-height:36px;cursor:pointer;transition:.18s}
.sh-chips button:hover{border-color:var(--border-gold);color:var(--gold)}
.sh-chips button.on{border-color:var(--gold);color:#1a1407;background:var(--gold)}
.sh-hp{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--text-muted)}
.sh-hp b{color:var(--gold)}

/* ---------- barra de estado + ventas ---------- */
.sh-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
/* `.st-meta` viene de tienda.css con `flex:1;min-width:0`, que en una fila
   estrecha significa "encogeme a cero" en vez de "bajame de linea": el
   bloque se aplastaba a una columna de 100px con el texto partido palabra a
   palabra, y el boton de WhatsApp quedaba pegado al lado como si lo tapara.
   Aqui se le devuelve su ancho natural y se le permite envolver de verdad. */
.sh-bar .st-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;flex:1 1 auto;min-width:min(100%,260px)}
@media(max-width:1023px){
  /* ============================================================
     UNA ACCION PRINCIPAL POR TARJETA (punto 19 del brief)
     ------------------------------------------------------------
     Medido: 6 tarjetas con 4 acciones cada una, 51 de los 77 controles
     de la pagina en una sola seccion. El catalogo se leia como una
     rejilla de botones con fotos entre medias.

     Se ocultan las dos que YA existen en la ficha, a un toque:
       .sc-cl  "Calcular mi operacion"  -> esta en la ficha, y ademas
               saca al usuario de la tienda a mitad de la compra
       .sc-wa  "Cotizar este ASIC"      -> esta en la ficha, debajo de
               los datos con los que se decide si cotizar

     Quedan las dos que no se pueden mover: "Ver detalles", que abre la
     ficha con ambas dentro, y "Comparar", que es una seleccion entre
     tarjetas y no tiene sentido dentro de una.

     Se usa `display:none` y no `visibility` ni opacidad: asi salen
     tambien del orden de tabulacion y del arbol de accesibilidad. Un
     boton que se ve tachado pero sigue siendo enfocable es peor que no
     tenerlo.
     ============================================================ */
  .sc .sc-cl,.sc .sc-wa{display:none}
  /* Flex con envoltura y no grid: con `grid-column` la colocacion
     automatica no retrocede y los dos botones caian en filas distintas
     —medido: la tarjeta crecia a 430px—. Con `flex-wrap`, dos hijos al
     50% comparten linea siempre. */
  /* La colocacion de las dos filas de accion NO se decide aqui: vive en
     `mobile-system.css`, que se inyecta despues y lleva `!important`.
     Intentarlo desde esta hoja fue una carrera de especificidad que se
     pierde sola. Aqui solo queda el area de toque. */
  .sc .sc-more,.sc .sc-cmp{min-height:44px}
  /* Los selectores de potencia son la eleccion principal de la tarjeta
     —de que version se compra— y median 34px. */
  .sc .sc-var button{min-height:44px;padding:0 14px}
}

@media(max-width:767px){
  /* En movil los dos bloques no compiten: la barra se convierte en dos filas
     completas, y el boton ocupa el ancho porque es la accion de la seccion. */
  .sh-bar{display:grid;grid-template-columns:1fr;gap:12px}
  .sh-bar .st-meta{min-width:0;gap:7px 12px}
  .sh-bar .wa-btn{width:100%;justify-content:center}
}

/* ---------- herramientas ---------- */
.sh-tools{margin-bottom:18px}
.sh-tools-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sh-search{display:flex;align-items:center;gap:9px;flex:1 1 260px;min-width:220px;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:0 14px;min-height:46px}
.sh-search span{color:var(--gold-2);font-size:1.05rem}
.sh-search input{flex:1;min-width:0;background:none;border:0;color:var(--text);font:inherit;min-height:44px}
.sh-search input:focus{outline:none}
.sh-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
.sh-sortbox{display:flex;align-items:center;gap:8px}
.sh-sortbox label{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.sh-sortbox select{min-height:46px;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;color:var(--text);font:inherit;font-size:.88rem;padding:0 12px;cursor:pointer}
.sh-sortbox select:focus{outline:none;border-color:var(--gold)}
.sh-fbtn,.sh-clear{background:none;border:1px solid var(--border);border-radius:12px;color:var(--text-2);font:inherit;font-size:.86rem;min-height:46px;padding:0 16px;cursor:pointer;transition:.18s}
.sh-fbtn:hover,.sh-clear:hover{border-color:var(--gold);color:var(--gold)}
.sh-fbtn.on{border-color:var(--gold);color:var(--gold);background:var(--gold-glow)}
.sh-fpanel{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 22px;margin-top:14px;padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.sh-fpanel[hidden]{display:none}
.sh-fgroup>span{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.sh-fchips{display:flex;flex-wrap:wrap;gap:6px}
.sh-fchips button{background:none;border:1px solid var(--border);border-radius:999px;color:var(--text-2);font-family:var(--mono);font-size:.64rem;letter-spacing:.04em;padding:7px 11px;min-height:34px;cursor:pointer;transition:.18s}
.sh-fchips button:hover{border-color:var(--border-gold);color:var(--gold)}
.sh-fchips button.on{border-color:var(--gold);background:var(--gold);color:#1a1407;font-weight:700}
.sh-count{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--text-muted);margin:16px 0 0}

/* ---------- rejilla ---------- */
.sh-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(284px,1fr))}
.sc{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s,box-shadow .22s;animation:scIn .45s calc(var(--i,0)*40ms) both cubic-bezier(.2,.7,.3,1)}
@keyframes scIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sh-grid.noanim .sc{animation:none}
.sc:hover{transform:translateY(-4px);border-color:var(--border-gold);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.sc.picked{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.sc-ph{position:relative;aspect-ratio:1/1;background:linear-gradient(180deg,#fff,#f2f3f5 78%,#e9eaee);border-bottom:1px solid var(--border);overflow:hidden}
.sc-ph.empty{background:linear-gradient(180deg,#f6f7f9,#e8eaee)}
.sc-ph image-slot:not([src]){opacity:0}
.sc-ph:has(image-slot[src]) .sc-none{display:none}
.sc-none{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:11px;text-align:center;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#7d838d;z-index:1;pointer-events:none}
.sc-none small{font-size:.54rem;letter-spacing:.1em;color:#a3a8b1;text-transform:none}

/* ---- distintivo de maquina recien entrada, sin foto todavia ----
   La caja de la foto es casi blanca (degradado de estudio), asi que el
   dorado de marca no se lee encima: la pastilla invierte el contraste y
   lleva el dorado de fondo con tinta oscura, que es como funciona el resto
   del sistema.
   El movimiento es un brillo que recorre la pastilla, no un parpadeo: dice
   "esto acaba de llegar" sin pedir atencion cada segundo. */
.sc-new{position:relative;display:inline-grid;place-items:center;
  padding:9px 20px;border-radius:999px;overflow:hidden;
  background:linear-gradient(135deg,var(--gold,#e7bd5a),#caa23f);
  box-shadow:0 6px 18px -8px rgba(176,133,32,.75),inset 0 0 0 1px rgba(255,255,255,.45);
  animation:scNewIn .5s cubic-bezier(.2,.9,.3,1) both}
.sc-new i{position:relative;z-index:1;font-style:normal;
  font-family:var(--mono);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#241905}
/* El brillo va en un pseudo-elemento para animar solo `transform`: animar el
   fondo obligaria a repintar la pastilla en cada fotograma. */
.sc-new::after{content:"";position:absolute;top:0;bottom:0;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  animation:scNewSheen 2.9s cubic-bezier(.4,0,.6,1) 1.1s infinite}
@keyframes scNewIn{from{opacity:0;transform:translateY(7px) scale(.9)}to{opacity:1;transform:none}}
@keyframes scNewSheen{0%{transform:translateX(-240%)}55%,100%{transform:translateX(340%)}}
@media(prefers-reduced-motion:reduce){
  .sc-new{animation:none}
  .sc-new::after{display:none}
}
/* El hueco de imagen ignora el padding del host (su marco es inset:0), así que
   la foto llegaba al borde y el equipo se veía recortado: se mete por dentro. */
.sc-ph image-slot{transition:transform .55s cubic-bezier(.2,.7,.3,1);position:absolute;left:14px;top:14px;width:calc(100% - 28px);height:calc(100% - 28px);padding:0}
.sc:hover .sc-ph image-slot{transform:scale(1.055)}
.sc-glow{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);width:64%;height:12%;background:radial-gradient(closest-side,rgba(20,22,28,.22),transparent 74%);pointer-events:none;opacity:.9;transition:opacity .22s,width .45s ease}
.sc:hover .sc-glow{opacity:1;width:72%}
.sc-tags{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;z-index:2;pointer-events:none}
.sc-tag{font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:5px 10px;background:rgba(255,255,255,.88);border:1px solid rgba(18,20,26,.14);color:#3d4046}
.sc-tag.best{background:var(--gold);border-color:var(--gold);color:#1a1407;font-weight:700}
.sc-tag.out{background:#fdeceb;border-color:#e7bdb9;color:#a3352c}
/* Score: pastilla abajo a la derecha de la foto. Arriba a la derecha aparecen
   los controles del hueco de imagen al pasar el cursor y se pisaban. */
.sc-score{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;background:rgba(10,11,14,.86);border:1px solid rgba(231,189,90,.45);backdrop-filter:blur(3px);white-space:nowrap}
.sc-score b{font-family:var(--display);font-size:1.02rem;font-weight:800;line-height:1;color:var(--gold)}
.sc-score em{font-style:normal;font-family:var(--mono);font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;color:#a9a59c;line-height:1}
.sc-score.hi{border-color:#3fbf78}.sc-score.hi b{color:#63d29a}
.sc-score.lo{border-color:#5a4620}.sc-score.lo b{color:#caa23f}
.sc-b{display:flex;flex-direction:column;gap:11px;padding:16px 18px 18px;flex:1}
.sc-b h3{margin:0;font-family:var(--display);font-size:1.14rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.sc-var{display:flex;flex-wrap:wrap;gap:6px}
.sc-var button{background:none;border:1px solid var(--border);border-radius:999px;color:var(--text-muted);font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;padding:6px 10px;min-height:34px;cursor:pointer;transition:.18s}
.sc-var button:hover{border-color:var(--border-gold);color:var(--gold)}
.sc-var button.on{border-color:var(--gold);color:#1a1407;background:var(--gold);font-weight:700}
.sc-var button[data-sold]:not(.on){opacity:.45;text-decoration:line-through}
.sc-specs{display:flex;flex-wrap:wrap;gap:6px}
.sc-specs span{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;color:var(--text-2);border:1px solid var(--border);border-radius:999px;padding:4px 9px}
.sc-specs .cool{color:var(--text-muted)}
.sc-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:auto}
.sc-price b{font-family:var(--display);font-size:1.66rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sc-price em{font-style:normal;font-family:var(--mono);font-size:.68rem;color:var(--text-muted)}
.sc-ref{width:100%;font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.sc.sold .sc-price b{font-size:1.05rem;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase}
.sc-vd{display:flex;align-items:center;gap:9px;font-size:.86rem;padding:10px 12px;border-radius:11px;border:1px solid var(--border);background:var(--bg-2)}
.sc-vd .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--text-muted)}
.sc-vd b{font-variant-numeric:tabular-nums}
.sc-vd.good{border-color:#26543c;background:color-mix(in oklab,#3fbf78 9%,var(--bg-2))}
.sc-vd.good .dot{background:#3fbf78;animation:vdPulse 2.6s ease-out infinite}
@keyframes vdPulse{0%{box-shadow:0 0 0 0 rgba(63,191,120,.55)}70%{box-shadow:0 0 0 8px rgba(63,191,120,0)}100%{box-shadow:0 0 0 0 rgba(63,191,120,0)}}
.sc-vd.good b{color:#63d29a}
.sc-vd.thin{border-color:#5a4620;background:color-mix(in oklab,var(--gold) 8%,var(--bg-2))}
.sc-vd.thin .dot{background:var(--gold)}.sc-vd.thin b{color:var(--gold)}
.sc-vd.bad{border-color:#5a2b28;background:color-mix(in oklab,#c0433c 8%,var(--bg-2))}
.sc-vd.bad .dot{background:#c0433c}.sc-vd.bad b{color:#e0716a}
.sc-vd small{margin-left:auto;color:var(--text-muted);font-size:.72rem;white-space:nowrap}
/* ¿es para ti?: las tres bandas, y la del usuario encendida */
.sc-fit{display:flex;flex-direction:column;gap:4px;font-size:.76rem;color:var(--text-muted);border-left:2px solid var(--border);padding-left:11px}
.sc-fit em{font-style:normal;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.sc-fit .f{position:relative;padding-left:14px}
.sc-fit .f::before{content:"";position:absolute;left:0;top:.44em;width:7px;height:7px;border-radius:50%;background:var(--text-muted);opacity:.45}
.sc-fit .f.ok::before{background:#3fbf78}
.sc-fit .f.mid::before{background:var(--gold)}
.sc-fit .f.bad::before{background:#c0433c}
.sc-fit .you{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--text-2);margin-top:2px}
.sc-fit.ok{border-left-color:#3fbf78}.sc-fit.ok .f.ok{color:#63d29a}
.sc-fit.mid{border-left-color:var(--gold)}.sc-fit.mid .f.mid{color:var(--gold)}
.sc-fit.bad{border-left-color:#c0433c}.sc-fit.bad .f.bad{color:#e0716a}
.sc-act{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sc-act>*{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;border-radius:11px;text-decoration:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--border);text-align:center;cursor:pointer;transition:.18s}
.sc-more{background:none;color:var(--text);font-family:var(--mono)}
.sc-more:hover{border-color:var(--gold);color:var(--gold)}
.sc-wa{background:var(--gold);border-color:var(--gold);color:#1a1407;font-weight:700}
.sc-wa:hover{filter:brightness(1.08)}
.sc-wa.off{background:none;border-color:var(--border);color:var(--text-muted);font-weight:500;cursor:not-allowed}
.sc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sc-cl,.sc-cmp{background:none;border:0;padding:0;color:var(--text-muted);font:inherit;font-size:.78rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color .18s}
.sc-cl:hover,.sc-cmp:hover{color:var(--gold)}
.sc.picked .sc-cmp{color:var(--gold)}
.wa-ic{display:block;width:18px;height:18px;flex:none;border-radius:50%;background:#fff;padding:2px;box-sizing:content-box;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
@keyframes waPop{0%{transform:scale(1)}32%{transform:scale(1.2) rotate(-7deg)}62%{transform:scale(.97) rotate(3deg)}100%{transform:scale(1)}}
@keyframes waRing{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}100%{box-shadow:0 0 0 11px rgba(37,211,102,0)}}
.sc-wa:hover .wa-ic,.wa-btn:hover .wa-ic{animation:waPop .62s cubic-bezier(.2,.7,.3,1),waRing 1.25s ease-out .15s infinite}
.wa-btn{display:inline-flex;align-items:center;gap:9px}
.wa-btn .wa-ic{width:20px;height:20px}

/* ---------- transparencia de precio ---------- */
.sh-price-note{margin-top:22px;border:1px solid var(--border);border-left:2px solid var(--gold-2);border-radius:12px;padding:16px 18px;background:var(--card)}
.sh-price-note b{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-bottom:6px}
.sh-price-note p{margin:0;font-size:.86rem;color:var(--text-2);max-width:760px}

/* ---------- por qué ---------- */
.sh-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.sh-w{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px;transition:border-color .25s,transform .25s cubic-bezier(.2,.7,.3,1)}
.sh-w:hover{border-color:var(--border-gold);transform:translateY(-3px)}
.sh-w:hover .sh-w-i{background:var(--gold);color:#1a1407;border-color:var(--gold)}
.sh-w-i{transition:background .25s,color .25s,border-color .25s}
.sh-w b{display:block;font-family:var(--display);font-size:1.02rem;margin-bottom:8px}
.sh-w p{margin:0;font-size:.88rem;color:var(--text-2)}

/* ---------- checklist ---------- */
.sh-two{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;align-items:start}
.sh-pre-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.sh-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.sh-check li{display:flex;flex-direction:column;gap:3px;padding:16px 18px 16px 44px;background:var(--card);position:relative}
.sh-check li::before{content:"✓";position:absolute;left:18px;top:16px;color:var(--gold);font-family:var(--mono);font-size:.9rem}
.sh-check b{font-size:.95rem}
.sh-check span{font-size:.84rem;color:var(--text-2)}

/* ---------- hosting ---------- */
.sh-host{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;background:linear-gradient(140deg,color-mix(in oklab,var(--gold) 7%,var(--card)),var(--card) 60%);border-color:var(--border-gold)}
.sh-host h2{font-size:1.7rem;margin:8px 0 8px}
.sh-host p{color:var(--text-2);max-width:620px;margin:0;font-size:.94rem}

/* ---------- FAQ ---------- */
.sh-faq{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.sh-fq{background:var(--card)}
.sh-fq summary{cursor:pointer;padding:17px 20px;font-size:.98rem;font-weight:600;list-style:none;display:flex;align-items:center;gap:12px;min-height:46px}
.sh-fq summary::-webkit-details-marker{display:none}
.sh-fq summary::after{content:"+";margin-left:auto;color:var(--gold);font-family:var(--mono);font-size:1.1rem}
.sh-fq[open] summary::after{content:"–"}
.sh-fq[open] summary{color:var(--gold)}
.sh-fq p{margin:0;padding:0 20px 20px;font-size:.9rem;color:var(--text-2);max-width:780px}

/* ---------- ficha lateral ---------- */
.sh-dr-scrim{position:fixed;inset:0;z-index:1200;background:rgba(6,6,8,.72);backdrop-filter:blur(3px);opacity:0;transition:opacity .26s}
.sh-dr-scrim.on{opacity:1}
.sh-dr{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);z-index:1210;display:flex;flex-direction:column;background:var(--bg);border-left:1px solid var(--border-gold);box-shadow:-30px 0 80px rgba(0,0,0,.6);transform:translateX(102%);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
/* ALTURA REAL DEL VIEWPORT EN EL MOVIL.

   `top:0;bottom:0` sobre un elemento fijo se resuelve contra el viewport
   GRANDE: el que hay cuando la barra de URL del navegador esta oculta. Al
   abrir la ficha esa barra suele estar visible, asi que el cajon se
   dimensiona ~100px mas alto que lo que se ve y su parte inferior queda
   por debajo del borde de la pantalla.

   El efecto es peor que un recorte. `.sd-body` es `flex:1`, asi que su
   altura se calcula sobre esa medida inflada: si el contenido cabe en el
   cajon "grande" pero no en el visible, `scrollHeight` iguala a
   `clientHeight`, el navegador decide que ahi no hay nada que desplazar y
   el gesto pasa al body, que esta bloqueado con `position:fixed`. El
   usuario arrastra y no se mueve nada.

   `dvh` es la unidad que sigue a la barra de URL mientras aparece y
   desaparece, que es justo lo que hace falta aqui. El `@supports` deja el
   comportamiento anterior en navegadores que no la tengan. */
@supports(height:100dvh){
  .sh-dr{bottom:auto;height:100dvh}
}
.sh-dr.on{transform:none}
/* Con la ficha abierta el body pasa a `position:fixed` y el documento deja
   de desbordar, asi que la barra de scroll desaparece y el contenido se
   ensancha unos 15px de golpe. Reservar el hueco siempre evita ese salto
   lateral. Va aqui y no en una hoja compartida porque esta hoja solo la
   carga la tienda, que es la unica pagina con el bloqueo. */
html{scrollbar-gutter:stable}

/* Bloqueo de la pagina con la ficha abierta.

   Antes era `body{overflow:hidden}` a secas, y eso tenia dos fallos:
   el body perdia su contexto de scroll y la pagina saltaba arriba al
   abrir la ficha, y en iOS `overflow:hidden` sobre el body no bloquea
   nada, asi que el gesto se iba al documento ya reseteado. El usuario
   intentaba bajar a ver los detalles del minero y se lo llevaba al
   principio de la tienda.

   `position:fixed` con `top:-<scrollY>px` congela la pagina EN SU SITIO:
   el desplazamiento sigue visualmente donde estaba y el unico elemento
   que se mueve es `.sd-body`, que tiene su propio `overflow-y:auto`.
   `tienda-detail.js` guarda la posicion al abrir y la restituye al
   cerrar; sin ese `top` en linea esta regla sola volveria arriba. */
body.sh-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}
.sd-top{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-bottom:1px solid var(--border)}
.sd-ti{display:flex;flex-direction:column;gap:3px;min-width:0}
.sd-ti b{font-family:var(--display);font-size:1.24rem;letter-spacing:-.02em}
.sd-ti span{font-family:var(--mono);font-size:.72rem;color:var(--text-2)}
.sd-x{margin-left:auto;background:none;border:1px solid var(--border);border-radius:10px;color:var(--text-muted);font-size:1rem;width:40px;height:40px;cursor:pointer;flex:none}
.sd-x:hover{border-color:var(--gold);color:var(--gold)}
.sd-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding:20px 20px 28px;display:flex;flex-direction:column;gap:16px}
.sd-body::-webkit-scrollbar{width:10px}
.sd-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;border:3px solid var(--bg)}
.sd-body::-webkit-scrollbar-thumb:hover{background:var(--border-gold)}
.sd-body h4{margin:6px 0 0;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2)}
.sd-hero{position:relative;aspect-ratio:5/4;max-height:min(44vh,300px);min-height:190px;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#fff,#eceef1);display:flex;align-items:center;justify-content:center;padding:14px;box-sizing:border-box;flex:none}
/* La foto se ajusta al hueco: con width/height al 100 % el navegador resolvía
   la altura contra la caja sin el tope y la imagen salía recortada. */
.sd-hero img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;padding:0}
/* El hueco del detalle es una fila flex: se apila para que la pastilla y su
   linea de apoyo queden centradas una sobre otra. La regla generica de
   `.sd-hero.empty span` ya no aplica al distintivo, que trae su propio color. */
.sd-hero.empty{flex-direction:column;gap:10px}
.sd-hero.empty .sd-new-p{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:#a3a8b1}
.sd-hero.empty .sc-new{padding:10px 24px}
.sd-hero.empty .sc-new i{font-size:.74rem}
.sd-hero.empty span:not(.sc-new):not(.sd-new-p){font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#7d838d}
.sd-score{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:999px;background:rgba(10,11,14,.88);border:1px solid rgba(231,189,90,.5);white-space:nowrap}
.sd-score b{font-family:var(--display);font-size:1.1rem;font-weight:800;color:var(--gold);line-height:1}
.sd-score em{font-style:normal;font-family:var(--mono);font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;color:#a9a59c;line-height:1}
.sd-score.hi{border-color:#3fbf78}.sd-score.hi b{color:#63d29a}
.sd-score.lo{border-color:#5a4620}.sd-score.lo b{color:#caa23f}
.sd-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}
.sd-price b{font-family:var(--display);font-size:2rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sd-price em{font-style:normal;font-family:var(--mono);font-size:.8rem;color:var(--text-muted)}
.sd-price span{width:100%;font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.sd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.sd-sp{display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:var(--card)}
.sd-sp em{font-style:normal;font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.sd-sp b{font-family:var(--mono);font-size:1rem;font-variant-numeric:tabular-nums}
.sd-sp .pos{color:#63d29a}.sd-sp .neg{color:#e0716a}
.sd-na{color:var(--text-muted);font-family:var(--mono);font-size:.76rem}
.sd-kwh{display:flex;align-items:center;gap:9px}
.sd-kwh label{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.sd-kwh input{width:110px;min-height:44px;background:var(--bg-2);border:1px solid var(--border);border-radius:11px;color:var(--text);font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 12px}
.sd-kwh input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
.sd-note{margin:0;font-size:.85rem;color:var(--text-2);border:1px solid var(--border);border-radius:11px;padding:12px 14px}
.sd-scen{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.sd-sc{display:flex;flex-direction:column;gap:2px;padding:11px 8px;background:var(--card);text-align:center}
.sd-sc em{font-style:normal;font-family:var(--mono);font-size:.62rem;color:var(--text-muted)}
.sd-sc b{font-family:var(--mono);font-size:.86rem}
.sd-sc .pos{color:#63d29a}.sd-sc .neg{color:#e0716a}
.sd-sc span{font-size:.6rem;color:var(--text-muted)}
.sd-fit ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.sd-fit li{position:relative;padding-left:16px;font-size:.85rem;color:var(--text-muted)}
.sd-fit li::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px;border-radius:50%;opacity:.5;background:var(--text-muted)}
.sd-fit li.ok::before{background:#3fbf78}.sd-fit li.mid::before{background:var(--gold)}.sd-fit li.bad::before{background:#c0433c}
.sd-fit.ok li.ok{color:#63d29a}.sd-fit.mid li.mid{color:var(--gold)}.sd-fit.bad li.bad{color:#e0716a}
.sd-fit .you{display:block;margin-top:8px;font-family:var(--mono);font-size:.66rem;color:var(--text-2)}
.sd-how summary{cursor:pointer;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--gold-2)}
.sd-how p{margin:8px 0 0;font-size:.82rem;color:var(--text-2)}
.sd-links{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--border);padding-top:14px}
.sd-links a,.sd-links button{background:none;border:1px solid var(--border);border-radius:999px;color:var(--text-2);font:inherit;font-size:.8rem;padding:9px 14px;min-height:42px;text-decoration:none;cursor:pointer;transition:.18s}
.sd-links a:hover,.sd-links button:hover{border-color:var(--gold);color:var(--gold)}
.sd-links button:disabled{opacity:.55;cursor:default;border-color:var(--border-gold);color:var(--gold)}
.sd-disc{margin:0;font-size:.76rem;color:var(--text-muted)}
.sd-cta{position:relative;padding:14px 20px;border-top:1px solid var(--border);background:var(--bg-2);flex:none}
/* Aviso de que arriba queda contenido: el panel es alto y en pantallas cortas
   parecía que la ficha acababa donde acaba la vista. */
.sd-cta::before{content:"";position:absolute;left:0;right:0;top:-26px;height:26px;pointer-events:none;background:linear-gradient(transparent,var(--bg))}
.sd-cta .btn,.sd-cta .off{width:100%;justify-content:center;min-height:52px}
.sd-cta .off{display:flex;align-items:center;cursor:not-allowed}

/* ---------- comparador ---------- */
.sh-cmp{position:fixed;left:0;right:0;bottom:0;z-index:1100;transform:translateY(102%);transition:transform .32s cubic-bezier(.2,.7,.3,1);background:var(--bg-2);border-top:1px solid var(--border-gold);box-shadow:0 -20px 50px rgba(0,0,0,.5)}
.sh-cmp.on{transform:none}
.sh-cmp-in{max-width:1180px;margin:0 auto;padding:16px 20px 20px}
.sh-cmp-h{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.sh-cmp-h b{font-family:var(--display);font-size:1rem}
.sh-cmp-calc{margin-left:auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);text-decoration:none;border-bottom:1px solid transparent}
.sh-cmp-calc:hover{border-bottom-color:var(--gold)}
.sh-cmp-h button{background:none;border:1px solid var(--border);border-radius:9px;color:var(--text-muted);font:inherit;font-size:.78rem;padding:8px 13px;min-height:40px;cursor:pointer}
.sh-cmp-h button:hover{border-color:var(--gold);color:var(--gold)}
.sh-cmp-sc{overflow:auto;max-height:52vh}
.sh-cmp table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px}
.sh-cmp th,.sh-cmp td{padding:9px 8px;border-bottom:1px solid var(--border);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sh-cmp th:first-child,.sh-cmp td:first-child{text-align:left;color:var(--text-muted);font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase}
.sh-cmp thead th{position:sticky;top:0;background:var(--bg-2);font-family:var(--display);font-size:.94rem;color:var(--text)}
.sh-cmp thead th span{display:block;font-family:var(--mono);font-size:.62rem;font-weight:400;color:var(--text-muted)}
.sh-cmp td.win{color:var(--gold);font-weight:700}
.sh-cmp .hint{margin:12px 0 0;font-size:.8rem;color:var(--text-muted)}

/* Aparición al entrar en pantalla. Una vez, y sin tocar nada si el sistema
   pide movimiento reducido. */
[data-rv]{opacity:0;transform:translateY(18px)}
[data-rv].in{opacity:1;transform:none;transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.3,1)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .sh-two{grid-template-columns:1fr;gap:26px}
  .sh-sec{padding:48px 0}
}
@media(max-width:640px){
  .sh-mm-step{flex-direction:column;gap:12px;padding:20px}
  .sh-mm-act{padding:18px 20px}
  .sh-mm-opts button{flex:1 1 calc(50% - 5px);justify-content:center;text-align:center;padding:12px 12px}
  .sh-mm-field{width:100%;align-self:stretch;height:60px;padding:0 14px}
  .sh-mm-field input{flex:1;width:auto;font-size:1.5rem}
  .sh-rate-in{margin-left:0;width:100%}
  .sh-rate-in input{flex:1;width:auto}
  .sh-tools-top{gap:8px}
  .sh-sortbox{flex:1 1 100%}
  .sh-sortbox select{flex:1}
  .sh-grid{grid-template-columns:1fr}
  .sh-dr{width:100%;border-left:0}
  .sd-scen{grid-template-columns:repeat(2,1fr)}
  .sh-cmp-sc{max-height:46vh}
  .sh-host{flex-direction:column;align-items:flex-start}
  .sh-host .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .sc,.sh-cmp,.sh-dr,.sh-dr-scrim{animation:none;transition:none}
  .sc-wa:hover .wa-ic,.wa-btn:hover .wa-ic{animation:none}
  .sh-trust::after,.sc-vd.good .dot{animation:none}
  .sh-tr-i svg *,.sh-w-i svg *{animation:none;stroke-dashoffset:0}
  [data-rv]{opacity:1;transform:none}
}