/* Vista de producto */
.prod:not(.sk){cursor:pointer}
.migas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--gris);padding:18px 0 16px}
.migas a{color:var(--gris);transition:color .2s}
.migas a:hover{color:var(--azul);text-decoration:underline}
.migas .sep{opacity:.55}
.migas [aria-current]{color:var(--texto);font-weight:500}
.prod-vista{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px;padding-bottom:64px;align-items:start}
.galeria{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:start}
.miniaturas{display:flex;flex-direction:column;gap:10px}
.mini{flex:none;width:76px;height:76px;border-radius:8px;border:2px solid transparent;background:#F4F5F7;overflow:hidden;padding:0;position:relative;transition:border-color .2s}
.mini img{width:100%;height:100%;object-fit:cover}
.mini.on{border-color:var(--azul)}
.mini:not(.on):hover{border-color:#B9C3DA}
.mini.mas{display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;color:var(--azul);border:1px solid #CFD3D9;background:#fff}
.principal{position:relative;aspect-ratio:1/1;border-radius:12px;background:#F4F5F7;overflow:hidden}
.principal img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .25s}
.principal img.cambia{opacity:0}
.sin-img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--gris);font-size:14px}
.ampliar{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.92);padding:8px 14px;border-radius:20px;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.ampliar svg{width:14px;height:14px;stroke:var(--azul);fill:none;stroke-width:2}
.ficha h1{font-size:clamp(26px,3vw,36px);line-height:1.15;font-weight:700}
.f-desc{margin:12px 0;color:#4A4E55;line-height:1.55;font-size:16px}
.f-cod{font-size:13px;color:var(--gris)}
.f-precio{font-size:30px;font-weight:700;margin-top:18px}
.f-precio s{font-size:16px;font-weight:400;color:var(--gris);margin-right:8px}
#visor{position:fixed;inset:0;background:rgba(10,14,25,.93);z-index:95;display:flex;align-items:center;justify-content:center}
#visor img{max-width:88vw;max-height:86vh;object-fit:contain}
#visor button{position:absolute;color:#fff;font-size:44px;line-height:1;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}
#visor button:hover{background:rgba(255,255,255,.14)}
#vCerrar{top:16px;right:16px}#vAnt{left:16px;top:50%;transform:translateY(-50%)}#vSig{right:16px;top:50%;transform:translateY(-50%)}
#vCont{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#fff;font-size:13px;opacity:.8}
@media (max-width:900px){
  .prod-vista{grid-template-columns:1fr;gap:24px}
  .galeria{grid-template-columns:1fr}
  .miniaturas{flex-direction:row;order:2;overflow-x:auto}
  .mini{width:64px;height:64px}
}


/* Compra del producto: opciones en cadena, caja animada, escala y botón */
.f-sub{font-size:20px;font-weight:700;margin:28px 0 12px}
.pasos{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.paso-opc.entra{animation:aparece .5s ease both}
@keyframes aparece{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.paso-t{font-size:14px;font-weight:700;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid #CFD3D9;background:#fff;border-radius:20px;padding:8px 18px;font-size:14px;transition:background .2s,border-color .2s}
.chip:hover{border-color:#8FA7DD}
.chip.on{background:#E6EEFF;border-color:#2F5FD0;color:#0B2D7A}
.compra{position:relative;margin-top:24px;padding:2px;overflow:hidden}
.escala{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #D8DDE8;border-radius:8px;overflow:hidden;font-size:14px}
.escala th{background:#E8EEF9;font-weight:700;padding:10px;font-size:13px}
.escala td{text-align:center;padding:10px;border-top:1px solid #E3E5E9;transition:background .25s}
.escala tr.on td{background:#EEF3FF}
.off{color:var(--rojo);font-weight:500;margin-left:4px}
.compra-fila{display:flex;gap:16px;align-items:stretch;margin-top:20px;flex-wrap:wrap}
.cantidad{display:flex;align-items:center;border:1px solid #CFD3D9;border-radius:8px;height:50px}
.cantidad button{width:48px;height:100%;font-size:22px;color:var(--azul)}
.cantidad button:hover{background:#F2F3F5}
.cantidad input{width:64px;height:100%;border:0;border-left:1px solid #E3E5E9;border-right:1px solid #E3E5E9;text-align:center;font:inherit;font-size:16px;-moz-appearance:textfield;outline:0}
.cantidad input::-webkit-outer-spin-button,.cantidad input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.btn-comprar{flex:1;min-width:200px;height:50px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--rojo);color:#fff;font-weight:700;font-size:16px;border-radius:8px;transition:background .2s}
.btn-comprar:hover{background:var(--rojo-osc)}
.btn-comprar svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8}
.caja-anim{position:absolute;left:0;top:0;pointer-events:none;z-index:2}
.caja-anim svg{display:block;width:100%;height:100%}
@media (max-width:520px){.pasos{grid-template-columns:1fr}}