/* sin zoom por doble toque (al agregar bolitas rápido se hacía zoom); el pellizco sigue funcionando */
html, body, button, a, input, label, .carrusel, .ficha { touch-action: manipulation; }
:root {
  --fondo: #0e0e0f;
  --superficie: #161618;
  --superficie-2: #1d1d20;
  --borde: #2a2a2e;
  --borde-fuerte: #3a3a40;
  --texto: #ecebe7;
  --texto-2: #a3a097;
  --oro: #c9a45c;
  --oro-suave: #c9a45c22;
  --peligro: #e07a6a;
  --radio: 14px;
  --titulo: "Cormorant Garamond", Georgia, serif;
  --ui: "Manrope", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
}
.marca { display: flex; flex-direction: column; line-height: 1.05; white-space: nowrap; }
.marca-nombre { font-family: var(--titulo); font-size: 22px; font-weight: 600; letter-spacing: .02em; }
.marca-sub { font-size: 11px; color: var(--texto-2); letter-spacing: .14em; text-transform: uppercase; }
.pasos { display: flex; align-items: center; gap: 6px; }
.paso-btn {
  display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 4px; cursor: pointer; color: var(--texto-2);
}
.paso-btn .num {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--borde-fuerte);
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
.paso-btn.activo { color: var(--texto); }
.paso-btn.activo .num { border-color: var(--oro); color: var(--oro); }
.paso-btn.hecho .num { background: var(--superficie-2); }
.paso-linea { width: 18px; height: 1px; background: var(--borde-fuerte); }
.paso-btn .txt { font-size: 13px; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) {
  .marca-nombre { font-size: 20px; }
  .pasos { gap: 4px; }
  .paso-linea { width: 10px; }
  .paso-btn .txt { display: none; }
  .paso-btn.activo .txt { display: inline; }
  .marca-sub { display: none; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--borde-fuerte); background: var(--superficie-2);
  font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; color: var(--texto);
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn.primario { background: var(--texto); color: #111; border-color: var(--texto); }
.btn.primario:hover { background: #fff; }
.btn.secundario:hover { border-color: var(--oro); }
.btn.grande { min-height: 52px; font-size: 15px; width: 100%; }
.btn.chico { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-icono {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borde-fuerte); color: var(--texto);
}
.btn-icono.claro { background: rgba(14,14,15,.72); border-color: rgba(255,255,255,.18); }
.btn-icono.activo { border-color: var(--oro); color: var(--oro); }
.enlace { background: none; border: 0; color: var(--oro); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; }

/* ---------- Paso 1: catálogo ---------- */
#paso1 { padding: 20px 16px 120px; max-width: 1180px; margin: 0 auto; }
.intro h1 { font-family: var(--titulo); font-weight: 600; font-size: clamp(30px, 6vw, 44px); line-height: 1.05; margin: 8px 0 8px; }
.intro p { color: var(--texto-2); margin: 0 0 18px; max-width: 60ch; }
.filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.fuente-precios { font-size: 12px; color: var(--texto-2); }
.grupo-chip { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--borde-fuerte); background: var(--superficie); cursor: pointer; font-size: 13px; font-weight: 600;
}
.chip .punto { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); }
.chip[aria-checked="true"] { border-color: var(--oro); background: var(--oro-suave); }
.grupo-titulo { grid-column: 1 / -1; font-family: var(--titulo); font-size: 24px; font-weight: 600; margin: 10px 0 0; display: flex; align-items: baseline; gap: 10px; }
.grupo-titulo small { font-family: var(--ui); font-size: 12px; color: var(--texto-2); font-weight: 500; }
.catalogo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .catalogo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .catalogo { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.tarjeta.con-cantidad { border-color: var(--oro); }
.tarjeta.agotada { opacity: .55; }
.foto { aspect-ratio: 1; display: grid; place-items: center; background: var(--superficie-2); border-radius: 10px; overflow: hidden; }
.foto img { display: block; transition: transform .2s; }
.foto .hueco { border-radius: 50%; background: #2a2a2e; }
.tarjeta h3 { margin: 0; font-size: 14px; font-weight: 600; }
.tarjeta .mm { color: var(--texto-2); font-size: 12px; }
.precio { font-weight: 700; font-size: 15px; }
.precio small { color: var(--texto-2); font-weight: 500; font-size: 11px; }
.agotado-txt { color: var(--texto-2); font-size: 13px; font-weight: 600; }
.contador { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--borde-fuerte); border-radius: 999px; padding: 3px; }
.contador button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--superficie-2); display: grid; place-items: center; cursor: pointer; }
.contador button:disabled { opacity: .35; cursor: not-allowed; }
.contador .ic { width: 16px; height: 16px; }
.contador span { font-weight: 700; min-width: 2ch; text-align: center; }
.nota { color: var(--texto-2); font-size: 12px; margin: 18px 0 0; }
.barra-pie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--superficie); border-top: 1px solid var(--borde);
}
.barra-info { display: flex; flex-direction: column; line-height: 1.2; }
.barra-info span { font-size: 12px; color: var(--texto-2); }
.barra-info strong { font-size: 19px; }

/* ---------- Paso 2: armar ---------- */
.armar { display: grid; grid-template-columns: minmax(0, 1fr); }
.panel, .bloque { min-width: 0; }
.visor { position: relative; height: 58vh; min-height: 340px; background: #121212; border-bottom: 1px solid var(--borde); touch-action: none; }
.visor .lienzo3d { display: block; width: 100%; height: 100%; }
.visor-cargando { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px; background: #262628; color: var(--texto-2); font-size: 13px; transition: opacity .3s; }
.visor-cargando[hidden] { display: none; }
.visor-cargando.salir { opacity: 0; pointer-events: none; }
.carga { width: min(280px, 100%); display: flex; flex-direction: column; gap: 12px; text-align: center; }
.carga-titulo { margin: 0; font-family: var(--titulo); font-size: 24px; font-weight: 600; color: var(--texto); line-height: 1.15; }
.carga-barra { height: 6px; border-radius: 3px; background: var(--borde-fuerte); overflow: hidden; }
.carga-barra i { display: block; height: 100%; width: 100%; background: var(--oro); transform-origin: left; transform: scaleX(0); transition: transform .25s ease-out; }
.carga-barra.indeterminado i { width: 35%; transform: none; animation: carga-vaiven 1.2s ease-in-out infinite alternate; }
@keyframes carga-vaiven { from { margin-left: 0; } to { margin-left: 65%; } }
.carga-pct { margin: 0; font-size: 13px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .carga-barra.indeterminado i { animation: none; margin-left: 32%; } .visor-cargando { transition: none; } }
.visor-acciones { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 8px; }
.visor-ayuda { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; text-align: center; font-size: 12px; color: var(--texto-2); pointer-events: none; }
.visor.claro .visor-ayuda { color: #6d6a63; }
.visor.claro .btn-icono { background: #ffffffcc; color: #222; border-color: #d6d3cc; }
.panel { padding: 8px 16px 32px; }
.bloque { padding: 16px 0; border-bottom: 1px solid var(--borde); }
.bloque h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-2); font-weight: 600; margin: 0 0 10px; }
.bloque-cab { display: flex; align-items: baseline; justify-content: space-between; }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ayuda { color: var(--texto-2); font-size: 12px; margin: 8px 0 0; }
.segmentado { display: flex; padding: 3px; gap: 3px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; }
.segmentado button { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.segmentado button small { display: block; font-weight: 500; font-size: 11px; }
.segmentado button[aria-pressed="true"] { background: var(--superficie-2); color: var(--texto); box-shadow: inset 0 0 0 1px var(--borde-fuerte); }
.muestras { display: flex; gap: 10px; flex-wrap: wrap; }
.muestra { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; font-size: 11px; color: var(--texto-2); padding: 0; }
.muestra i { width: 34px; height: 34px; border-radius: 50%; display: block; border: 1px solid rgba(255,255,255,.2); outline: 2px solid transparent; outline-offset: 2px; }
.muestra[aria-pressed="true"] { color: var(--texto); }
.muestra[aria-pressed="true"] i { outline-color: var(--oro); }
.lista-bolitas { display: flex; flex-direction: column; gap: 8px; }
.fila-bolita { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; }
.fila-bolita .det { display: flex; flex-direction: column; min-width: 0; }
.fila-bolita .det small { color: var(--texto-2); font-size: 12px; }
.fila-bolita .contador { border: 0; padding: 0; gap: 6px; }
.vacio { color: var(--texto-2); font-size: 13px; padding: 8px 0; }
.agregar-rapido { margin-top: 8px; }
.fichas { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.ficha { min-width: 40px; height: 34px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: var(--superficie); cursor: pointer; font-size: 12px; font-weight: 700; }
.ficha[aria-pressed="true"] { border-color: var(--oro); color: var(--oro); }
.mover { display: flex; gap: 8px; }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.interruptor span:first-child { display: flex; flex-direction: column; }
.interruptor small { color: var(--texto-2); font-size: 12px; }
.interruptor { position: relative; }
.interruptor input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pista { width: 46px; height: 28px; border-radius: 999px; background: var(--borde-fuerte); position: relative; flex: none; transition: background .15s; }
.pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--texto); transition: transform .15s; }
.interruptor input:checked + .pista { background: var(--oro); }
.interruptor input:checked + .pista::after { transform: translateX(18px); background: #111; }
.interruptor input:focus-visible + .pista { outline: 2px solid var(--oro); outline-offset: 2px; }
.resumen ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.resumen li { display: flex; justify-content: space-between; gap: 12px; }
.resumen li span:last-child { color: var(--texto-2); white-space: nowrap; }
.total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--borde-fuerte); }
.total strong { font-size: 24px; }
.acciones { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }

@media (min-width: 960px) {
  .armar { grid-template-columns: minmax(0, 1fr) 400px; height: calc(100vh - 61px); }
  .visor { height: 100%; border-bottom: 0; border-right: 1px solid var(--borde); }
  .panel { overflow-y: auto; height: 100%; padding: 8px 24px 32px; }
}

/* ---------- Paso 3: probador ---------- */
.probador { position: fixed; inset: 0; z-index: 50; background: #000; overflow: hidden; }
.ar-raiz { position: absolute; inset: 0; overflow: hidden; }
.ar-envoltura { position: absolute; }
.ar-envoltura.espejo { transform: scaleX(-1); }
.ar-envoltura video, .ar-envoltura .lienzo3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ar-envoltura video { object-fit: fill; }
.ar-envoltura.fusion video { opacity: 0; pointer-events: none; }
.ar-arriba { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
.ar-titulo { font-weight: 600; font-size: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(14,14,15,.72); }
.ar-mensaje { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); margin: 0; max-width: calc(100% - 48px); text-align: center; padding: 12px 18px; border-radius: 14px; background: rgba(14,14,15,.8); border: 1px solid rgba(255,255,255,.14); font-weight: 600; }
.ar-mensaje.error { border-color: var(--peligro); color: #ffd9d2; }
.ar-abajo { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: rgba(14,14,15,.82); border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ar-total { display: flex; flex-direction: column; min-width: 0; }
.ar-total span { font-size: 12px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-total strong { font-size: 18px; }
.ar-botones { display: flex; gap: 8px; flex: none; }

.ar-ajuste { position: absolute; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.btn.claro-ar { background: rgba(14,14,15,.78); border-color: rgba(255,255,255,.2); min-height: 40px; font-size: 13px; }
.ar-ajuste-panel { background: rgba(14,14,15,.85); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ar-fila { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.ar-fila span { font-size: 12px; font-weight: 600; color: var(--texto-2); min-width: 92px; }
.ar-fila .btn-icono { width: 38px; height: 38px; }
.ar-ajuste-panel .enlace { align-self: center; }
/* ---------- Selector de bolitas ---------- */
.contador-total { font-size: 12px; color: var(--texto-2); font-weight: 600; }
.oro-elegir { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 4px; }
.oro-elegir > span { font-size: 13px; color: var(--texto-2); font-weight: 600; }
.muestras.chicas { gap: 8px; }
.muestras.chicas .muestra { flex-direction: row; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--borde-fuerte); border-radius: 999px; font-size: 12px; min-height: 34px; }
.muestras.chicas .muestra i { width: 24px; height: 24px; outline-offset: 1px; }
.muestras.chicas .muestra[aria-pressed="true"] { border-color: var(--oro); }
.carrusel {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 10px 0 10px; margin-top: 4px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.carrusel::-webkit-scrollbar { display: none; }
.carta {
  flex: 0 0 132px; scroll-snap-align: start; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 10px; display: flex; flex-direction: column; gap: 6px;
}
.carta.con-cantidad { border-color: var(--oro); }
.carta.agotada { opacity: .5; }
.carta .foto { aspect-ratio: 1; }
.carta .nombre { display: flex; align-items: baseline; justify-content: space-between; }
.carta .nombre strong { font-size: 16px; }
.carta .nombre span { font-size: 11px; color: var(--texto-2); }
.carta .precio { font-size: 14px; }
.carta .contador { padding: 2px; }
.carta .contador button { width: 34px; height: 34px; }
.carta .contador span { font-size: 15px; }
.ficha { display: inline-flex; align-items: center; gap: 6px; }
.ficha i { width: 12px; height: 12px; border-radius: 50%; display: block; border: 1px solid rgba(255,255,255,.3); }
.ficha small { font-weight: 500; color: var(--texto-2); font-size: 10px; }
.segmentado.chico button { min-height: 34px; }
.opc-puntas { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.solo-movil { display: none; }
.barra-movil { display: none; }
@media (max-width: 959px) {
  .barra-movil {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; align-items: center; gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--superficie); border-top: 1px solid var(--borde);
  }
  .barra-movil .barra-info { flex: 1; min-width: 0; }
  .barra-movil .barra-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .panel { padding-bottom: 96px; }
  .cabecera { position: static; }
  .visor { height: 46vh; min-height: 280px; position: sticky; top: 0; z-index: 2; }
}
.lista-cab { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 0 8px; }
.lista-cab h3 { margin: 0; font-size: 15px; font-weight: 700; }
ol.lista-bolitas { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.item-bolita {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px;
}
.item-bolita .pos { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--texto-2); border: 1px solid var(--borde-fuerte); flex: none; }
.item-bolita .det { display: flex; flex-direction: column; line-height: 1.2; min-width: 74px; flex: 1; }
.item-bolita .det strong { font-size: 15px; }
.item-bolita .det small { color: var(--texto-2); font-size: 11px; }
.item-bolita .oros { display: flex; gap: 6px; }
.item-bolita .oros button { width: 30px; height: 30px; border-radius: 50%; padding: 0; cursor: pointer; border: 1px solid rgba(255,255,255,.2); outline: 2px solid transparent; outline-offset: 2px; }
.item-bolita .oros button[aria-pressed="true"] { outline-color: var(--oro); }
.item-bolita .acc { display: flex; gap: 4px; }
.item-bolita .acc button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--borde-fuerte); background: var(--superficie-2); display: grid; place-items: center; cursor: pointer; }
.item-bolita .acc button:disabled { opacity: .3; cursor: not-allowed; }
.item-bolita .acc .ic { width: 16px; height: 16px; }
.item-bolita.punta { opacity: .9; }
.segmentado.pieza { min-width: 250px; }
.segmentado.pieza button { min-height: 36px; padding: 0 12px; }
.carrusel.tallas { gap: 8px; padding: 6px 0 4px; }
.carrusel.tallas .ficha { flex: 0 0 auto; min-width: 52px; height: 52px; flex-direction: column; justify-content: center; gap: 0; border-radius: 14px; font-size: 15px; scroll-snap-align: start; }
.ar-dedos { position: absolute; top: calc(68px + env(safe-area-inset-top)); left: 0; right: 0; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 0 12px; }
.ar-dedos button { min-height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; background: rgba(14,14,15,.75); color: var(--texto); border: 1px solid rgba(255,255,255,.2); }
.ar-dedos button[aria-pressed="true"] { border-color: var(--oro); color: var(--oro); }
.ar-talla { position: absolute; left: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); padding: 8px 12px; border-radius: 999px; background: rgba(14,14,15,.8); border: 1px solid rgba(255,255,255,.14); font-size: 13px; font-weight: 600; }
@media (max-width: 420px) { .marca-nombre { font-size: 18px; } .segmentado.pieza { min-width: 0; flex: 0 1 222px; } .segmentado.pieza button { padding: 0 8px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Tira de bolitas (vista de frente) ---------- */
.tira-marco { margin-top: 10px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.tira-marco.vacia { background: none; border: 0; }
.tira {
  overflow-x: auto; overflow-y: hidden; padding: 12px 14px 8px; scrollbar-width: thin; scrollbar-color: var(--borde-fuerte) transparent;
  overscroll-behavior-x: contain;
}
.tira::-webkit-scrollbar { height: 6px; }
.tira::-webkit-scrollbar-thumb { background: var(--borde-fuerte); border-radius: 3px; }
.tira-fila { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 2px; min-width: 100%; width: max-content; margin: 0 auto; padding: 0 10px; }
/* el hilo pasa por el centro de las bolitas */
.tira-fila::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--alto) / 2 + 6px - 1px); height: 2px; border-radius: 1px; background: var(--hilo, #c1121f); opacity: .85; }
.tb {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none;
  background: none; border: 0; padding: 0 1px; cursor: pointer; color: var(--texto-2); touch-action: auto;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.tira.manual .tb { cursor: grab; touch-action: pan-y; }
.tb-bola { height: calc(var(--alto) + 12px); min-width: calc(var(--d) + 6px); display: grid; place-items: center; position: relative; }
.tb-bola::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--d) + 10px); height: calc(var(--d) + 10px); transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid transparent; pointer-events: none; }
.tb-bola img { display: block; pointer-events: none; }
.bola-plana { display: block; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); }
.bola-plana.dmt { box-shadow: inset 0 0 0 2px rgba(0,0,0,.18); border-style: dashed; }
.tb small { font-size: 11px; font-weight: 700; line-height: 1; padding-bottom: 2px; white-space: nowrap; }
.tb[aria-pressed="true"] .tb-bola::after { border-color: var(--oro); }
.tb[aria-pressed="true"] small { color: var(--oro); }
.tb:focus-visible { outline: none; }
.tb:focus-visible .tb-bola::after { border-color: var(--texto); }
.tb.hueco .tb-bola > * { visibility: hidden; }
.tb.hueco .tb-bola::after { border: 2px dashed var(--oro); background: var(--oro-suave); }
.tb.hueco small { visibility: hidden; }
.tb.fantasma { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; cursor: grabbing; opacity: .95; }
.tb.fantasma .tb-bola::after { border-color: var(--oro); }
.tira .vacio { margin: 0; text-align: center; }

.editor-bolita { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--borde); border-radius: var(--radio); }
.editor-bolita .eb-vacio { margin: 0; text-align: center; }
.eb-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eb-nombre { display: flex; flex-direction: column; line-height: 1.25; }
.eb-nombre strong { font-size: 15px; }
.eb-nombre small { color: var(--texto-2); font-size: 12px; }
.eb-mover { display: flex; gap: 8px; }
.eb-mover .btn-icono:disabled { opacity: .3; cursor: not-allowed; }
.eb-quitar { align-self: flex-start; }
.eb-quitar .ic { width: 16px; height: 16px; }

/* foto del catálogo: se toca para ver la bolita de cerca */
button.foto { width: 100%; border: 0; padding: 0; cursor: zoom-in; position: relative; color: var(--texto-2); }
button.foto:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.foto .lupa { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--fondo); border: 1px solid var(--borde-fuerte); }
.foto .lupa .ic { width: 15px; height: 15px; }

/* ---------- Visor de una bolita ---------- */
body.con-modal { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.72); display: grid; place-items: center; padding: 24px; }
.modal-caja {
  width: min(760px, 100%); height: min(860px, 100%); background: var(--superficie); border: 1px solid var(--borde-fuerte);
  border-radius: 18px; display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow: hidden;
}
.modal-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mb-titulo { display: flex; flex-direction: column; line-height: 1.15; }
.mb-titulo h2 { margin: 0; font-family: var(--titulo); font-size: 28px; font-weight: 600; }
.mb-titulo span { color: var(--texto-2); font-size: 13px; font-weight: 600; }
.mb-cuerpo { flex: 1; min-height: 0; position: relative; }
.mb-3d { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; background: #1b1b1e; touch-action: none; }
.mb-3d .lienzo-bolita { display: block; width: 100%; height: 100%; }
.mb-ayuda { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; text-align: center; font-size: 12px; color: var(--texto-2); pointer-events: none; }
.mb-real { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 2px 8px; display: flex; flex-direction: column; gap: 14px; }
.mb-pie { display: flex; flex-direction: column; gap: 10px; }
.mb-ar { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overflow-x: hidden; }
.mb-ar .ar-visor { flex: 1; min-height: 200px; width: 100%; border-radius: 14px; background: #1b1b1e; --poster-color: #1b1b1e; }
.mb-ar .ar-boton { position: absolute; left: 12px; right: 12px; bottom: 12px; width: auto; }
.mb-ar .ar-texto p { margin: 0 0 6px; font-size: 13px; color: var(--texto-2); }
.mb-ar .ar-texto strong { color: var(--texto); }
.mb-ar .ar-nota, .mb-ar .ar-no { padding: 10px 12px; border: 1px solid var(--borde-fuerte); border-radius: 12px; }
.mb-ar .ar-no { border-color: var(--peligro); color: #f2cfc8 !important; }
.ar-cargando { margin: auto; color: var(--texto-2); font-size: 14px; }
#mbVerAR[aria-pressed="true"] { border-color: var(--oro); color: var(--oro); }
.mb-pie .ayuda { margin: 0; min-height: 1em; text-align: center; }
.mb-pie .muestras { justify-content: center; }

.real-principal { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0 4px; background: #1b1b1e; border-radius: 14px; }
.real-medida { position: relative; max-width: 100%; }
.real-bola { position: relative; display: flex; align-items: flex-end; }
.real-bola img { display: block; position: absolute; left: 0; bottom: 6px; }
.real-bola .guia { position: absolute; bottom: 0; top: 0; width: 0; border-left: 1px dashed var(--oro); }
.regla { display: block; overflow: visible; }
.regla line { stroke: var(--texto-2); stroke-width: 1; shape-rendering: crispEdges; }
.regla text { fill: var(--texto-2); font-size: 10px; font-family: var(--ui); }
.regla text.unidad { font-size: 10px; }
.real-dato { margin: 2px 0 0; font-size: 13px; font-weight: 600; }
.real-aviso { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--peligro); border-radius: 12px; font-size: 13px; color: #f2cfc8; }
.real-aviso.ok { border-color: var(--borde-fuerte); color: var(--texto-2); }
.real-aviso .btn { flex: none; }
.real-sub { margin: 4px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-2); font-weight: 600; }
.real-fila { display: flex; align-items: flex-end; justify-content: space-around; gap: 6px; padding: 12px 6px; background: #1b1b1e; border-radius: 14px; }
.real-item { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 2px; cursor: pointer; color: var(--texto-2); border-radius: 10px; }
.real-item span { display: flex; align-items: center; justify-content: center; }
.real-item img { display: block; }
.real-item small { font-size: 12px; font-weight: 700; }
.real-item[aria-pressed="true"] { color: var(--oro); box-shadow: inset 0 0 0 1px var(--oro); }

.cal { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 0; }
.cal p { margin: 0; font-size: 14px; color: var(--texto-2); text-align: center; max-width: 46ch; }
.cal-tarjeta { border: 2px solid var(--oro); border-radius: 3.2mm; background: var(--oro-suave); flex: none; border-radius: 12px; }
.cal input[type="range"] { width: min(420px, 100%); accent-color: var(--oro); height: 32px; }
.cal-botones { display: flex; gap: 10px; }

@media (max-width: 699px) {
  .modal { padding: 0; }
  .modal-caja { width: 100%; height: 100%; border-radius: 0; border: 0; padding: calc(12px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom)); }
  .mb-titulo h2 { font-size: 24px; }
}

/* ---------- Diseños de tejido ---------- */
.carrusel.disenos { gap: 8px; padding: 2px 0 4px; margin-top: 0; }
.diseno {
  flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 104px; padding: 10px 8px 8px; border-radius: 12px; border: 1px solid var(--borde-fuerte); background: var(--superficie);
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--texto-2); text-align: center; line-height: 1.2;
}
.diseno[aria-pressed="true"] { border-color: var(--oro); color: var(--texto); }
.icono-diseno { width: 64px; height: 40px; fill: none; stroke: var(--oro); stroke-width: 1.4; }
.icono-diseno .bd { stroke: var(--texto-2); stroke-width: 1.4; stroke-linecap: round; }
.diseno[aria-pressed="true"] .icono-diseno circle { fill: var(--oro-suave); }
#tamFijo { margin-top: 10px; }

/* tira: doble borde (pares arriba/abajo) y ola (alternan) */
.tira[data-forma="doble"] .tira-fila, .tira[data-forma="ola"] .tira-fila { padding-top: calc(var(--alto) * 0.5); padding-bottom: calc(var(--alto) * 0.5); }
.tira[data-forma="doble"] .tira-fila::before, .tira[data-forma="ola"] .tira-fila::before { top: calc(var(--alto) + 6px - 1px); }
.tira[data-forma="doble"] .tb small, .tira[data-forma="ola"] .tb small { display: none; }
.tira .tb.arriba { transform: translateY(calc(var(--alto) * -0.5)); }
.tira .tb.abajo { transform: translateY(calc(var(--alto) * 0.5)); }
.tira[data-forma="doble"] .tb.par { margin-left: calc(-1 * (var(--d) + 8px)); }
.tira[data-forma="doble"] .tb { margin-right: 2px; }
.tira[data-forma="ola"] .tb + .tb { margin-left: calc(-0.3 * var(--d)); }
.tb.fantasma { transform: none; }

/* Dijes */
.dijes-paso { padding: 20px 16px 40px; max-width: 1200px; margin: 0 auto; }
.dijes-cab h1 { margin: 0 0 6px; font-family: var(--titulo); font-size: 32px; font-weight: 600; }
.dijes-cab p { margin: 0 0 18px; color: var(--texto-2); font-size: 14px; }
.dijes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.dije { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.dije-foto { position: relative; display: block; padding: 0; border: 0; background: #efede8; cursor: pointer; aspect-ratio: 900 / 707; }
.dije-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dije-3d { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 7px; border-radius: 999px; background: #161618; color: var(--oro); font-size: 12px; font-weight: 700; border: 1px solid var(--borde-fuerte); }
.dije-3d .ic { width: 15px; height: 15px; }
.dije-info { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.dije-info h3 { margin: 0; font-size: 17px; font-weight: 700; }
.dije-info p { margin: 0; font-size: 13px; color: var(--texto-2); }
.dije-info .btn { width: 100%; }
#modalDije .mb-titulo span { font-size: 12px; }
#mdVista { margin-top: 2px; }
.carga-titulo { text-wrap: balance; font-size: 22px; }

/* Aviso "desliza las bolitas": rectángulo horizontal en amarillo sólido, para que se note */
.aviso-desliza { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; padding: 11px 14px; border-radius: var(--radio); background: #f2c230; color: #1a1400; font-size: 15px; font-weight: 700; text-align: center; }
.aviso-desliza[hidden] { display: none; }
.aviso-desliza span { font-size: 18px; line-height: 1; }

/* Inventario: aviso de pocas unidades y colores/tamaños agotados */
.carta .pocas { margin: -2px 0 6px; font-size: 12px; font-weight: 700; color: #f2c230; }
.muestra.sin-stock { opacity: .45; cursor: not-allowed; }
.muestra.sin-stock i { filter: grayscale(1); }
.aviso-stock { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radio); background: #f2c230; color: #1a1400; font-size: 14px; font-weight: 600; }
.aviso-stock[hidden] { display: none; }
.btn.bloqueado { opacity: .45; pointer-events: none; }

/* Dijes: filtros por tipo */
.filtros-dije { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 14px; scrollbar-width: none; }
.filtros-dije::-webkit-scrollbar { display: none; }
.chip-dije { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borde); color: var(--texto-2); font-size: 14px; font-weight: 600; cursor: pointer; }
.chip-dije small { font-size: 11px; opacity: .7; }
.chip-dije[aria-pressed="true"] { background: #f2c230; border-color: #f2c230; color: #1a1400; }
.dije-info .dije-tipo { margin: -4px 0 0; font-size: 12px; font-weight: 700; color: var(--oro); }

/* Dijes dentro de la manilla */
.opcional { font-size: 13px; font-weight: 500; color: var(--texto-2); }
.carta-dije { flex: 0 0 150px; display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.carta-dije img { width: 100%; aspect-ratio: 900 / 707; object-fit: cover; border-radius: 8px; background: #fff; }
.carta-dije .nombre strong { font-size: 13px; line-height: 1.2; }
.carta-dije .dije-tipo { font-size: 11px; font-weight: 700; color: var(--oro); }
.carta-dije .btn { width: 100%; }
.dijes-elegidos { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dije-elegido { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie); }
.dije-elegido img { width: 64px; height: 50px; object-fit: cover; border-radius: 6px; background: #fff; }
.dije-elegido div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dije-elegido strong { font-size: 14px; }
.dije-elegido small { font-size: 12px; color: var(--texto-2); }

/* Dijes en la manilla: tarjetas chicas para escoger */
.carta-dije { flex: 0 0 104px; padding: 6px; gap: 4px; }
.carta-dije .nombre strong { font-size: 12px; }
.carta-dije .btn { padding: 6px 8px; font-size: 12px; }
.dije-elegido img { width: 48px; height: 38px; }

.aviso-aprox { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radio); background: #f2c230; color: #1a1400; font-size: 14px; font-weight: 600; line-height: 1.35; }

/* Galería de dijes: tarjetas chicas, sin estirarse en computador */
.dijes-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 176px)); justify-content: start; gap: 12px; }
.dije-foto { aspect-ratio: 900 / 707; }
.dije-foto img { object-fit: contain; background: #fff; }
.dije-info { gap: 6px; padding: 8px 10px 10px; }
.dije-info h3 { font-size: 14px; line-height: 1.2; }
.dije-info p { font-size: 11px; }
.dije-info .dije-tipo { font-size: 11px; }
.dije-info .btn { padding: 7px 8px; font-size: 12px; }
.dije-3d { top: 6px; right: 6px; padding: 2px 7px 2px 5px; font-size: 10px; }
.dije-3d .ic { width: 12px; height: 12px; }
@media (max-width: 520px) { .dijes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* tarjetas de dijes dentro de la manilla: la foto no se estira */
.carta-dije { align-self: flex-start; }
.carta-dije img { width: 100%; height: auto; aspect-ratio: 900 / 707; object-fit: contain; flex: 0 0 auto; }
.dije-elegido img { height: 38px; object-fit: contain; }

/* color sin existencias: se puede escoger, solo se marca */
.muestra.sin-stock { opacity: .8; cursor: pointer; }
.muestra small { display: block; font-size: 10px; font-weight: 700; color: #f2c230; }
.muestras.chicas .muestra small { display: inline; margin-left: 4px; }
.carta .pocas { color: #f2c230; }