/* ════════════════════════════════════════════════════════════════════
   Catálogo en esfera (prototipo del 24-Sep-2026, página aparte desde el 17-Oct)
   ════════════════════════════════════════════════════════════════════
   El concepto es el de shoe-finder-wine.vercel.app; la piel es el ADN de la
   marca (negrobot/ADN_DISENO_WEB.md): negro, casquillos detrás, rojo #a00302,
   Ethnocentric en el nombre, esquinas de 2 px, cero resplandores.

   La referencia es una píldora blanca sobre fondo claro. Aquí todo se invierte
   y se cuadra: la barra de filtros es una caja grafito de 2 px con el filtro
   activo en rojo sólido, igual que en la página principal. */

.esfera-pagina{overflow:hidden;height:100vh;height:100dvh;
  overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}

/* ---------- cabecera ---------- */
.esfera-cabecera{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;
  align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;
  box-shadow:inset 0 3px 0 #a00302;pointer-events:none}
.esfera-marca{display:flex;align-items:center;gap:10px;text-decoration:none;pointer-events:auto}
.esfera-marca img{height:28px;width:auto;display:block}
.esfera-marca span{font-family:'Ethnocentric',sans-serif;text-transform:uppercase;
  font-size:clamp(8px,2.4vw,11px);letter-spacing:.07em;color:#fafafa}
.esfera-seccion{margin:0;font-family:'Outfit',sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;color:#a3a3a3}
.esfera-seccion span{color:#a00302;margin-right:6px}

/* ---------- curvas de nivel ---------- */
.esfera-curvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ---------- la escena ---------- */
.esfera-escena{position:fixed;inset:0;z-index:5;cursor:grab;overflow:hidden}
.esfera-escena.arrastrando{cursor:grabbing}

/* Cada producto. El JS le pone el transform en cada cuadro; acá solo lo que
   no cambia. Sin transición CSS: el movimiento lo lleva el lazo, y una
   transición encima lo haría ir a destiempo. */
.obj{position:absolute;left:0;top:0;padding:0;margin:0;border:0;background:none;
  cursor:pointer;will-change:transform,opacity;transform-origin:center center;
  -webkit-tap-highlight-color:transparent}
.obj img{display:block;width:100%;height:100%;object-fit:contain;
  pointer-events:none;-webkit-user-drag:none}
.obj:focus-visible{outline:2px solid #a00302;outline-offset:6px}

/* Luz de contra (pedido del dueño, 24-Sep-2026). Los productos son oscuros
   sobre un fondo negro y se perdían. Como en una foto de producto, una luz
   blanca suave DESDE ATRÁS: un foco tenue en el fondo detrás de cada uno y un
   filo blanco finito que recorta la silueta, más la sombra negra que lo
   asienta. Es luz de estudio, blanca y baja; no es el halo de color (neón)
   que el ADN prohíbe. Va en TODO el catálogo: primero fue solo en las armas,
   y el dueño la pidió también en la munición. Se afina con las tres
   variables. */
.obj{--luz-fondo:.27;--luz-filo:.6;--luz-halo:.34}
.obj::before{content:'';position:absolute;left:-22%;right:-22%;top:-38%;bottom:-38%;
  z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,var(--luz-fondo)),
    rgba(255,255,255,calc(var(--luz-fondo) * .35)) 55%,rgba(255,255,255,0))}
.obj img{filter:drop-shadow(0 0 1px rgba(255,255,255,var(--luz-filo)))
  drop-shadow(0 0 9px rgba(255,255,255,var(--luz-halo)))
  drop-shadow(0 10px 14px rgba(0,0,0,.6))}
/* ...y respira: sube y baja muy despacio (pedido del dueño, 24-Sep). Solo
   late el foco del fondo, que lo anima la tarjeta gráfica sin costo; el filo
   queda fijo. Todos van al mismo compás: el JS le da a cada producto la fase
   del reloj de la página cuando aparece (--fase). Sin eso cada uno
   arrancaría su ciclo al entrar y titilarían desordenados. El ciclo (5 s)
   está repetido en RESPIRO, en el .js: si se cambia, cambiar los dos. */
.obj::before{will-change:opacity;animation:respirar 5s ease-in-out var(--fase,0s) infinite}
@keyframes respirar{0%,100%{opacity:1}50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.obj::before{animation:none}}
/* Lo agotado se ve, pero apagado: se puede pedir aviso desde la ficha. */
.obj.agotado img{filter:grayscale(1) brightness(.55)
  drop-shadow(0 0 1px rgba(255,255,255,calc(var(--luz-filo) * .7)))
  drop-shadow(0 0 9px rgba(255,255,255,calc(var(--luz-halo) * .7)))
  drop-shadow(0 10px 14px rgba(0,0,0,.6))}

/* La foto enfocada, nítida (21-Oct-2026, ver nitidez() en catalogo.js): la
   de 900 px encima de la caja escalada, en el mismo lugar y tamaño, con la
   misma luz de contra; --k escala las sombras como las escala la caja. La
   caja de abajo esconde su foto (no su foco de luz) cuando esta ya se ve. */
.foto-nitida{position:absolute;left:0;top:0;z-index:2500;pointer-events:none;object-fit:contain;
  opacity:0;--k:1;--luz-filo:.6;--luz-halo:.34;
  filter:drop-shadow(0 0 calc(1px * var(--k)) rgba(255,255,255,var(--luz-filo)))
    drop-shadow(0 0 calc(9px * var(--k)) rgba(255,255,255,var(--luz-halo)))
    drop-shadow(0 calc(10px * var(--k)) calc(14px * var(--k)) rgba(0,0,0,.6))}
.foto-nitida.visible{opacity:1;transition:opacity .15s}
.foto-nitida.agotado{filter:grayscale(1) brightness(.55)
  drop-shadow(0 0 calc(1px * var(--k)) rgba(255,255,255,calc(var(--luz-filo) * .7)))
  drop-shadow(0 0 calc(9px * var(--k)) rgba(255,255,255,calc(var(--luz-halo) * .7)))
  drop-shadow(0 calc(10px * var(--k)) calc(14px * var(--k)) rgba(0,0,0,.6))}
.obj.nitido img{opacity:0;transition:opacity .1s .15s}

/* ---------- ficha del producto enfocado ---------- */
.esfera-ficha{position:fixed;left:50%;bottom:118px;z-index:20;transform:translateX(-50%);
  width:min(92vw,420px);text-align:center;background:rgba(17,17,17,.9);
  border:1px solid #262626;border-top:3px solid #a00302;border-radius:2px;
  padding:18px 20px 20px}
.esfera-ficha[hidden]{display:none}
.esfera-ficha-marca{margin:0 0 6px;font-family:'Outfit',sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;color:#a00302}
.esfera-ficha-nombre{margin:0 0 8px;font-family:'Ethnocentric',sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:0;font-size:clamp(1rem,4.2vw,1.35rem);
  color:#fafafa;line-height:1.15}
.esfera-ficha-precio{margin:0 0 14px;font-family:'Outfit',sans-serif;font-size:.95rem;color:#e5e5e5}
.esfera-ficha-precio small{display:block;color:#a3a3a3;font-size:.8rem;margin-top:2px}
.esfera-ficha-cta{display:block;width:100%;text-align:center;border-radius:2px}
.esfera-cerrar{position:absolute;top:10px;right:10px;width:30px;height:30px;
  line-height:28px;padding:0;text-align:center;cursor:pointer;color:#a3a3a3;
  background:#171717;border:1px solid #262626;border-radius:2px;font-size:17px}
.esfera-cerrar:hover{color:#fafafa;border-color:#a00302}

/* ---------- minimapa ---------- */
.esfera-mapa{position:fixed;right:18px;bottom:96px;z-index:20;display:grid;gap:5px;
  padding:9px;background:rgba(17,17,17,.9);border:1px solid #262626;border-radius:2px}
.esfera-mapa i{display:block;width:5px;height:5px;background:#404040}
.esfera-mapa i.vacio{background:transparent}
.esfera-mapa i.aqui{background:#a00302}

/* ---------- barra de filtros ---------- */
.esfera-filtros{position:fixed;left:50%;bottom:22px;z-index:25;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;padding:6px;max-width:calc(100vw - 24px);
  overflow-x:auto;background:rgba(17,17,17,.92);border:1px solid #262626;border-radius:2px;
  scrollbar-width:none}
.esfera-filtros::-webkit-scrollbar{display:none}
.esfera-grupo{display:flex;gap:4px}
.esfera-grupo button{font-family:'Outfit',sans-serif;font-weight:700;font-size:.8rem;
  letter-spacing:.03em;padding:9px 14px;white-space:nowrap;cursor:pointer;
  color:#a3a3a3;background:transparent;border:1px solid transparent;border-radius:2px}
.esfera-grupo button:hover{color:#fafafa;border-color:#262626}
.esfera-grupo button.activo{color:#fff;background:#a00302;border-color:#a00302}
.esfera-separador{width:1px;align-self:stretch;background:#262626;margin:0 4px}
/* +/− : el globo entero o la cámara cerca. */
.esfera-zoom{flex:none;width:36px;height:36px;padding:0;cursor:pointer;
  font-family:'Outfit',sans-serif;font-weight:800;font-size:1.25rem;line-height:1;
  color:#fafafa;background:#171717;border:1px solid #262626;border-radius:2px}
.esfera-zoom:hover{border-color:#a00302}
.esfera-zoom[aria-pressed="true"]{background:#a00302;border-color:#a00302}

.esfera-pista{position:fixed;left:50%;bottom:82px;z-index:15;transform:translateX(-50%);
  margin:0;white-space:nowrap;font-family:'Outfit',sans-serif;font-size:.75rem;color:#737373;
  transition:opacity .4s ease}
.esfera-pista.oculta{opacity:0}

@media (max-width:600px){
  .esfera-ficha{bottom:104px}
  .esfera-mapa{display:none}
  .esfera-grupo button{padding:8px 11px;font-size:.75rem}
}
@media (prefers-reduced-motion:reduce){
  .esfera-pista{transition:none}
}