/* ============================================================
   CRIMINAL MAMBO · CHECKOUT RÁPIDO v1 (2026-09-19)
   Ficha de compra pensada para vender: foto grande, 3 pasos
   (prenda → calidad → color/talle) y la info larga en
   desplegables para que el cliente decida YA.
   ============================================================ */

/* ---------- FOTO: grande y con zoom ---------- */
.modal-img-wrap{
  position:relative;
  background:#0a0a0a;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-right:1px solid var(--border-2);
  padding:10px;
}
.modal-img{
  width:100%;height:100%;max-height:none;padding:0;
  position:relative;cursor:zoom-in;overflow:hidden;
}
/* Sin recorte: la caja de la imagen calza exacta en el contenedor y
   object-fit:contain la muestra completa (letterbox), nunca cortada. */
.modal-img img,.modal-img svg{
  position:absolute;inset:0;
  width:100%;height:100%;padding:0;
  object-fit:contain;display:block;
}
.modal-zoom-hint{
  position:absolute;right:10px;bottom:10px;
  background:rgba(0,0,0,.72);
  border:1px solid var(--border-2);
  color:#fff;font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;
  padding:5px 9px;border-radius:20px;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:5px;
  backdrop-filter:blur(2px);
}
.modal-zoom-hint:hover{border-color:var(--red);color:var(--red)}

/* ---------- Descuentos bien a la vista (decisor de compra) ---------- */
.modal-ahorro{
  background:linear-gradient(135deg,rgba(255,200,0,.10),rgba(227,6,19,.05));
  border:1px solid rgba(255,200,0,.4);border-radius:9px;
  padding:9px 11px;margin:-4px 0 14px;
  font-size:12px;color:var(--gray);line-height:1.5;
}
.modal-ahorro b{
  color:var(--yellow);font-size:16px;
  font-family:Impact,'Arial Black',sans-serif;letter-spacing:.2px;
}
.modal-ahorro-extra{
  display:block;margin-top:3px;font-size:10.5px;color:#fff;font-weight:700;
}
.modal-ahorro-badge{
  display:inline-block;background:var(--red);color:#fff;
  font-size:9.5px;font-weight:900;letter-spacing:.5px;
  padding:2px 6px;border-radius:10px;vertical-align:middle;
}

/* ---------- Numerito de paso ---------- */
.cm-step{
  display:inline-grid;place-items:center;
  width:17px;height:17px;border-radius:4px;
  background:var(--red);color:#fff;
  font-size:10px;font-weight:900;line-height:1;
  margin-right:6px;vertical-align:1px;
}

/* ---------- PASO 1: tipo de prenda ---------- */
.tipo-prenda{margin-bottom:16px}
.tipo-prenda-title{
  font-size:11px;text-transform:uppercase;font-weight:900;letter-spacing:1px;
  color:var(--gray);margin-bottom:8px;
}
.tipo-prenda-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
}
.tipo-prenda-card{
  background:var(--bg);border:2px solid var(--border-2);border-radius:9px;
  padding:10px 6px 8px;cursor:pointer;color:#fff;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:border-color .15s,background .15s,transform .1s;
}
.tipo-prenda-card:active{transform:scale(.97)}
.tipo-prenda-card:hover{border-color:#444}
.tipo-prenda-card.active{border-color:var(--red);background:rgba(227,6,19,.09)}
.tipo-prenda-card .tp-icon{font-size:24px;line-height:1.1}
.tipo-prenda-card .tp-icon img{width:34px;height:34px;object-fit:contain;display:block}
.tipo-prenda-card .tp-nombre{
  font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.4px;
  text-align:center;line-height:1.2;
}
.tipo-prenda-card .tp-precio{
  font-size:13.5px;font-weight:900;color:var(--yellow);line-height:1.2;
  font-family:Impact,'Arial Black',sans-serif;letter-spacing:.2px;
}
.tipo-prenda-card.active .tp-precio{color:#fff}

/* ---------- PASO 3: color y talle ---------- */
.modal-paso3{margin-bottom:6px}

/* ---------- Desplegables de información ---------- */
.cm-acc-group{
  margin:6px 0 14px;border:1px solid var(--border-2);border-radius:10px;overflow:hidden;
}
.cm-acc + .cm-acc{border-top:1px solid var(--border-2)}
.cm-acc-btn{
  width:100%;background:var(--bg);border:0;color:#fff;
  font-family:inherit;font-size:11.5px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;
  padding:12px 14px;text-align:left;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.cm-acc-btn:hover{background:var(--bg-2)}
.cm-acc-btn.open{color:var(--yellow)}
.cm-acc-arrow{color:var(--red);font-size:13px}
.cm-acc-body{
  display:none;padding:0 14px 13px;
  color:var(--gray);font-size:12px;line-height:1.6;
}
.cm-acc-body.open{display:block}
.cm-acc-body strong{color:#fff}

/* ---------- Zoom a pantalla completa ---------- */
.cm-zoom{
  position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.96);
  display:none;align-items:center;justify-content:center;padding:16px;
}
.cm-zoom.open{display:flex}
.cm-zoom img{max-width:100%;max-height:88vh;object-fit:contain;display:block}
.cm-zoom-close{
  position:absolute;top:14px;right:14px;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  color:#fff;font-size:16px;cursor:pointer;
}
.cm-zoom-tip{
  position:absolute;bottom:16px;left:0;right:0;text-align:center;
  color:var(--gray-dark);font-size:10.5px;text-transform:uppercase;letter-spacing:1px;
}

/* ============================================================
   MÓVIL / TABLET CHICA (≤860px)
   ============================================================ */
@media (max-width:860px){
  .modal-img-wrap{
    width:100%;aspect-ratio:auto;height:42svh;min-height:230px;
    border-right:none;border-bottom:1px solid var(--border-2);padding:8px;
  }
  .modal-img{max-height:100%}
  .modal-zoom-hint{right:8px;bottom:8px}

  .modal-title{font-size:19px;line-height:1.15}
  .modal-price{font-size:26px;margin-bottom:10px}
  .modal-ahorro{margin:-4px 0 14px}

  .tipo-prenda-grid{gap:6px}
  .tipo-prenda-card{padding:9px 4px 7px;border-radius:8px}
  .tipo-prenda-card .tp-icon{font-size:22px}
  .tipo-prenda-card .tp-nombre{font-size:9.5px}
  .tipo-prenda-card .tp-precio{font-size:13px}

  /* CTA siempre a la vista: el cliente no tiene que buscar el botón */
  .modal-actions{
    position:sticky;bottom:0;z-index:5;
    background:#000;
    padding:10px 0 12px;margin:14px 0 0;
    border-top:1px solid var(--border-2);
    gap:8px;align-items:stretch;
  }
  .modal-actions .qty-input{flex:0 0 auto;height:46px}
  .modal-actions .btn-add{flex:1 1 auto;min-height:46px;font-size:13px}

  .cm-acc-group{margin-top:14px}
  .cm-acc-btn{padding:13px 12px;font-size:11px}
  .cm-acc-body{font-size:12.5px}
}

@media (max-width:400px){
  .tipo-prenda-card .tp-nombre{font-size:9px}
  .tipo-prenda-card .tp-precio{font-size:12px}
  .modal-img-wrap{height:40svh;min-height:200px}
}

/* ---------- Bloque de ahorro del carrito ---------- */
.cm-ahorro-box{
  background:linear-gradient(135deg,rgba(255,200,0,.10),rgba(227,6,19,.06));
  border:1px solid rgba(255,200,0,.45);
  border-radius:10px;padding:12px;margin:0 0 10px;
}
.cm-ahorro-head{
  font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--yellow);margin-bottom:6px;
}
.cm-ahorro-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 0;border-top:1px solid rgba(255,255,255,.07);
}
.cm-ahorro-row:first-of-type{border-top:0}
.cm-ahorro-row-dest{
  background:rgba(227,6,19,.10);border:1px solid rgba(227,6,19,.35);
  border-radius:8px;padding:8px;margin-top:6px;
}
.cm-ahorro-lbl{font-size:11.5px;color:#fff;font-weight:800;line-height:1.3}
.cm-ahorro-sub{font-size:10px;color:var(--gray);margin-top:2px}
.cm-ahorro-val{text-align:right;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.cm-ahorro-tachado{font-size:10.5px;color:var(--gray-dark);text-decoration:line-through}
.cm-ahorro-val strong{font-size:17px;color:var(--yellow);font-family:Impact,'Arial Black',sans-serif;letter-spacing:.2px}
.cm-ahorro-row-dest .cm-ahorro-val strong{color:#fff}
.cm-ahorro-ahorro{font-size:9.5px;color:#25D366;font-weight:800}
.cm-ahorro-nudge{
  margin-top:8px;background:rgba(227,6,19,.12);border:1px dashed var(--red);
  border-radius:8px;padding:8px 10px;font-size:11px;color:#fff;text-align:center;line-height:1.35;
}
.cm-ahorro-nudge b{color:var(--yellow)}
.cm-ahorro-foot{font-size:9.5px;color:var(--gray-dark);margin-top:7px;text-align:center}