@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

.cc-wrap{
  --ink:#1c1e1a;
  --paper:#f4f2ec;
  --paper-2:#eae6db;
  --steel:#33495a;
  --steel-2:#4d6a80;
  --amber:#c97a3d;
  --amber-deep:#8a4f23;
  --line:#c9c3b3;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  box-sizing:border-box;
}
.cc-wrap *{box-sizing:border-box;}

/* HEAD */
.cc-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:28px 32px 18px;border-bottom:2px solid var(--ink);
  gap:16px;flex-wrap:wrap;
}
.cc-eyebrow{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-deep);margin:0 0 6px;}
.cc-h1{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(22px,3vw,32px);margin:0;line-height:1.05;}
.cc-sub{font-size:14px;color:#5a5a52;margin:8px 0 0;max-width:480px;line-height:1.55;}
.cc-ref{font-family:'JetBrains Mono',monospace;font-size:12px;color:#7a7567;text-align:right;line-height:1.6;}

/* HERO */
.cc-hero{padding:24px 32px 0;}
.cc-hero-frame{
  border:1px solid var(--line);background:#fff;border-radius:4px;
  padding:14px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;
}
.cc-hero-img{width:260px;max-width:100%;display:block;border-radius:2px;flex:none;object-fit:contain;}
.cc-hero-text{flex:1;min-width:200px;}
.cc-hero-text p{font-size:13px;color:#5a5a52;line-height:1.6;margin:0 0 10px;}
.cc-legend{display:flex;flex-wrap:wrap;gap:8px;}
.cc-legend span{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  border:1px solid var(--line);border-radius:20px;padding:4px 10px;color:var(--steel);
}

/* BODY GRID */
.cc-body{display:grid;grid-template-columns:1.3fr 1fr;gap:0;}
@media(max-width:900px){.cc-body{grid-template-columns:1fr;}}

/* FORM */
.cc-form{padding:28px 32px;border-right:1px solid var(--line);}
@media(max-width:900px){.cc-form{border-right:none;border-bottom:1px solid var(--line);}}
.cc-loading{font-size:14px;color:#8a8576;padding:20px 0;}

/* CATEGORÍA */
.cc-cat{border-bottom:1px solid var(--line);padding:20px 0;}
.cc-cat:first-child{padding-top:0;}
.cc-cat-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.cc-num{
  width:28px;height:28px;border-radius:50%;background:var(--steel);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-size:13px;font-weight:600;flex:none;
}
.cc-cat-title{font-family:'Oswald',sans-serif;font-size:15px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;}
.cc-cat-title span{display:block;font-family:'Inter',sans-serif;font-size:12px;font-weight:400;text-transform:none;color:#7a7567;letter-spacing:0;margin-top:1px;}
.cc-empty{font-size:13px;color:#a39d8c;font-style:italic;}

/* TARJETAS DE PRODUCTO */
.cc-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;}
.cc-card{
  border:1px solid var(--line);border-radius:4px;background:#fff;
  padding:8px;cursor:pointer;text-align:left;
  transition:border-color .12s ease,box-shadow .12s ease;
  display:flex;flex-direction:column;gap:6px;
}
.cc-card:hover{border-color:var(--steel-2);}
.cc-card.is-selected{border-color:var(--amber-deep);box-shadow:0 0 0 2px var(--amber-deep);}
.cc-card-img{
  width:100%;aspect-ratio:1/1;border:1px solid var(--line);border-radius:3px;
  overflow:hidden;background:#f7f5f0;display:flex;align-items:center;justify-content:center;
}
.cc-card-img img{width:100%;height:100%;object-fit:contain;display:block;}
.cc-card-img .cc-no-img{font-size:11px;color:#a39d8c;text-align:center;padding:8px;}
.cc-card-name{font-size:12px;line-height:1.3;display:flex;align-items:center;gap:6px;margin-top:2px;}
.cc-swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.15);flex:none;}
.cc-card-price{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--amber-deep);font-weight:500;}

/* RESUMEN */
.cc-summary{padding:28px 32px;background:var(--paper-2);display:flex;flex-direction:column;}
.cc-summary-title{font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#5a5a52;margin:0 0 16px;}
.cc-rows{flex:1;}
.cc-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:9px 0;border-bottom:1px dashed var(--line);align-items:center;}
.cc-row .l{color:#5a5a52;}
.cc-row .r{font-family:'JetBrains Mono',monospace;text-align:right;display:flex;align-items:center;gap:5px;}
.cc-row .r.empty{color:#a39d8c;font-style:italic;}
.cc-dot{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.15);flex:none;}

.cc-total{margin-top:18px;background:var(--ink);color:var(--paper);border-radius:3px;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;}
.cc-total .l{font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;}
.cc-total .r{font-family:'JetBrains Mono',monospace;font-size:26px;color:var(--amber);}
.cc-total .r.bump{opacity:.3;}
.cc-cta{margin-top:16px;width:100%;height:48px;border:none;border-radius:3px;background:var(--amber-deep);color:#fff;font-family:'Oswald',sans-serif;font-size:14px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .15s;}
.cc-cta:hover{background:#723f1a;}
.cc-note{font-size:11px;color:#8a8576;margin-top:10px;line-height:1.5;}