/* ===================================================================
   Natural Food — Shop / Cart / Checkout / Auth
   Usa los tokens globales de :root (paper, ink, accent, radios, easing)
   =================================================================== */

/* ---------- SHOP GRID ---------- */
.shop-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.4vw,30px); margin-top:clamp(30px,4vw,46px);
}
@media(max-width:900px){ .shop-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .shop-grid{ grid-template-columns:1fr; } }

.pc{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .42s var(--ease-oil), box-shadow .42s var(--ease-oil), border-color .42s var(--ease-oil);
}
.pc:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -28px rgba(28,24,19,.4); border-color:var(--line-2); }
.pc-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); }
.pc-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease-oil); }
.pc:hover .pc-media img{ transform:scale(1.07); }
.pc-badge{
  position:absolute; top:13px; left:13px; z-index:2;
  font-family:var(--sans); font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper); background:var(--accent-ink); padding:6px 11px; border-radius:var(--r-pill);
}
.pc-body{ padding:clamp(15px,1.8vw,20px); display:flex; flex-direction:column; gap:3px; flex:1; }
.pc-name{ font-family:var(--serif); font-weight:500; font-size:clamp(18px,1.9vw,21px); color:var(--ink); line-height:1.1; letter-spacing:-.01em; }
.pc-cat{ font-family:var(--sans); font-size:12.5px; color:var(--ink-3); letter-spacing:.01em; }
.pc-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:16px; }
.pc-price{ font-family:var(--serif); font-size:23px; color:var(--ink); }
.pc-price small{ font-family:var(--sans); font-size:12px; color:var(--ink-3); }
.pc-add{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:14px; color:var(--accent-ink);
  background:var(--accent-soft); border:1px solid transparent; border-radius:var(--r-pill);
  padding:9px 16px; transition:background .28s var(--ease-oil), color .28s var(--ease-oil), transform .2s var(--ease-spring);
}
.pc-add svg{ width:15px; height:15px; }
.pc-add:hover{ background:var(--accent-ink); color:var(--paper); }
.pc-add:active{ transform:scale(.94); }
.pc-add.added{ background:var(--accent); color:var(--paper); }

/* ---------- NAV icons + cart count ---------- */
.icon-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:var(--r-pill); cursor:pointer;
  color:var(--ink); background:transparent; border:1px solid transparent;
  transition:background .28s var(--ease-oil), border-color .28s var(--ease-oil);
}
.icon-btn:hover{ background:var(--accent-soft); }
.icon-btn svg{ width:18px; height:18px; }
.cart-count{
  position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 5px;
  display:none; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:700; font-size:10.5px; color:var(--paper);
  background:var(--accent-ink); border-radius:var(--r-pill); border:2px solid var(--paper);
}
.cart-count.show{ display:inline-flex; }
.cart-count.bump{ animation:countbump .4s var(--ease-spring); }
@keyframes countbump{ 0%{transform:scale(1)} 40%{transform:scale(1.5)} 100%{transform:scale(1)} }

/* ---------- OVERLAYS (shared) ---------- */
.ov-back{
  position:fixed; inset:0; z-index:1000; background:rgba(28,24,19,.46);
  backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .4s var(--ease-oil), visibility .4s;
}
.ov-back.open{ opacity:1; visibility:visible; }
body.no-scroll{ overflow:hidden; }

/* ---------- CART DRAWER ---------- */
.cart{
  position:fixed; top:0; right:0; z-index:1001; height:100%; width:min(440px,92vw);
  background:var(--paper); display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .5s var(--ease-oil);
  box-shadow:-30px 0 60px -30px rgba(28,24,19,.5);
}
.cart.open{ transform:translateX(0); }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:24px 26px; border-bottom:1px solid var(--line); }
.cart-head h3{ font-family:var(--serif); font-weight:500; font-size:24px; color:var(--ink); }
.x-btn{ cursor:pointer; width:38px; height:38px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; transition:background .25s, transform .2s var(--ease-spring); }
.x-btn:hover{ background:var(--paper-2); } .x-btn:active{ transform:scale(.92); }
.x-btn svg{ width:16px; height:16px; }
.cart-items{ flex:1; overflow-y:auto; padding:10px 26px; }
.ci{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); }
.ci-img{ width:64px; height:64px; border-radius:var(--r-md); object-fit:cover; background:var(--paper-2); }
.ci-name{ font-family:var(--serif); font-size:16.5px; color:var(--ink); line-height:1.15; }
.ci-cat{ font-family:var(--sans); font-size:12px; color:var(--ink-3); margin-top:2px; }
.ci-qty{ display:inline-flex; align-items:center; gap:0; margin-top:10px; border:1px solid var(--line-2); border-radius:var(--r-pill); overflow:hidden; }
.ci-qty button{ width:28px; height:28px; cursor:pointer; background:var(--surface); border:none; color:var(--ink); font-size:16px; line-height:1; transition:background .2s; }
.ci-qty button:hover{ background:var(--accent-soft); }
.ci-qty span{ min-width:28px; text-align:center; font-family:var(--sans); font-weight:600; font-size:13.5px; color:var(--ink); }
.ci-right{ display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; }
.ci-price{ font-family:var(--serif); font-size:17px; color:var(--ink); }
.ci-del{ cursor:pointer; background:none; border:none; color:var(--ink-3); font-size:12px; font-family:var(--sans); text-decoration:underline; padding:0; transition:color .2s; }
.ci-del:hover{ color:var(--accent-ink); }
.cart-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; padding:40px; color:var(--ink-2); }
.cart-empty svg{ width:44px; height:44px; color:var(--ink-3); }
.cart-foot{ border-top:1px solid var(--line); padding:22px 26px 26px; background:var(--surface); }
.cart-line{ display:flex; justify-content:space-between; font-family:var(--sans); font-size:14px; color:var(--ink-2); margin-bottom:9px; }
.cart-total{ display:flex; justify-content:space-between; align-items:baseline; margin:14px 0 4px; }
.cart-total span{ font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); }
.cart-total b{ font-family:var(--serif); font-weight:500; font-size:28px; color:var(--ink); }
.ship-note{ font-family:var(--sans); font-size:12.5px; color:var(--accent-ink); margin-bottom:16px; }
.btn-full{ width:100%; justify-content:center; }

/* ---------- CHECKOUT MODAL ---------- */
.co{ position:fixed; inset:0; z-index:1002; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .4s var(--ease-oil), visibility .4s; }
.co.open{ opacity:1; visibility:visible; }
.co-modal{ background:var(--paper); width:min(900px,100%); max-height:92vh; border-radius:var(--r-xl); overflow:hidden; display:flex; flex-direction:column; transform:translateY(24px) scale(.98); transition:transform .5s var(--ease-oil); box-shadow:0 40px 90px -40px rgba(28,24,19,.6); }
.co.open .co-modal{ transform:none; }
.co-top{ display:flex; align-items:center; justify-content:space-between; padding:22px 30px; border-bottom:1px solid var(--line); }
.co-steps{ display:flex; gap:8px; align-items:center; font-family:var(--sans); font-size:13px; color:var(--ink-3); flex-wrap:wrap; }
.co-steps .st{ display:inline-flex; align-items:center; gap:7px; }
.co-steps .st b{ width:22px; height:22px; border-radius:var(--r-pill); background:var(--paper-2); color:var(--ink-3); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.co-steps .st.active{ color:var(--ink); } .co-steps .st.active b{ background:var(--accent-ink); color:var(--paper); }
.co-steps .st.done b{ background:var(--accent); color:var(--paper); }
.co-steps .sep{ width:18px; height:1px; background:var(--line-2); }
.co-body{ display:grid; grid-template-columns:1.3fr 1fr; gap:0; overflow:hidden; flex:1; min-height:0; }
@media(max-width:720px){ .co-body{ grid-template-columns:1fr; } .co-aside{ display:none; } }
.co-main{ padding:clamp(22px,3vw,34px); overflow-y:auto; }
.co-aside{ background:var(--surface); border-left:1px solid var(--line); padding:clamp(22px,3vw,30px); overflow-y:auto; }
.co-main h3{ font-family:var(--serif); font-weight:500; font-size:26px; color:var(--ink); margin-bottom:6px; }
.co-main .sub{ font-family:var(--sans); font-size:14px; color:var(--ink-2); margin-bottom:22px; }
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-grid .full{ grid-column:1 / -1; }
.fld{ display:flex; flex-direction:column; gap:6px; }
.fld label{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--ink-2); }
.fld input, .fld select{ font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:12px 14px; transition:border-color .2s, box-shadow .2s; width:100%; }
.fld input:focus, .fld select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.fld input.err{ border-color:#C0492F; box-shadow:0 0 0 3px rgba(192,73,47,.12); }
.fld .msg{ font-family:var(--sans); font-size:11.5px; color:#C0492F; min-height:14px; }
.co-aside h4{ font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:18px; }
.sum-item{ display:grid; grid-template-columns:46px 1fr auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.sum-item img{ width:46px; height:46px; border-radius:var(--r-sm); object-fit:cover; }
.sum-item .n{ font-family:var(--sans); font-size:13.5px; color:var(--ink); line-height:1.2; }
.sum-item .q{ font-family:var(--sans); font-size:12px; color:var(--ink-3); }
.sum-item .p{ font-family:var(--serif); font-size:15px; color:var(--ink); }
.sum-line{ display:flex; justify-content:space-between; font-family:var(--sans); font-size:13.5px; color:var(--ink-2); margin-top:12px; }
.sum-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; padding-top:16px; border-top:1px solid var(--line-2); }
.sum-total span{ font-family:var(--sans); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); }
.sum-total b{ font-family:var(--serif); font-weight:500; font-size:26px; color:var(--ink); }

/* payment placeholder (Stripe) */
.pay-box{ border:1px solid var(--line-2); border-radius:var(--r-md); padding:20px; background:var(--surface-2); margin-top:6px; }
.pay-head{ display:flex; align-items:center; gap:9px; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.pay-head svg{ width:16px; height:16px; color:var(--accent-ink); }
.pay-note{ font-family:var(--sans); font-size:12.5px; color:var(--ink-2); line-height:1.5; }
.pay-mock{ display:flex; gap:10px; margin-top:16px; opacity:.55; pointer-events:none; }
.pay-mock .pm-card{ flex:1; height:44px; border:1px dashed var(--line-2); border-radius:var(--r-sm); background:repeating-linear-gradient(100deg,transparent,transparent 8px,var(--paper-2) 8px,var(--paper-2) 9px); }
.co-actions{ display:flex; gap:12px; margin-top:24px; }
.co-back{ background:none; border:1px solid var(--line-2); color:var(--ink); border-radius:var(--r-pill); padding:14px 22px; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:14px; transition:background .2s; }
.co-back:hover{ background:var(--paper-2); }

/* confirmation */
.co-done{ text-align:center; padding:clamp(34px,6vw,64px) clamp(22px,4vw,50px); max-width:560px; margin:0 auto; }
.co-done .tick{ width:74px; height:74px; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-ink); display:inline-flex; align-items:center; justify-content:center; margin-bottom:22px; }
.co-done .tick svg{ width:34px; height:34px; }
.co-done h3{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,3.5vw,40px); color:var(--ink); line-height:1.05; margin-bottom:12px; }
.co-done p{ font-family:var(--sans); font-size:15px; color:var(--ink-2); line-height:1.6; }
.co-order{ font-family:var(--sans); font-weight:700; color:var(--ink); }
.co-flag{ display:inline-block; margin-top:18px; font-family:var(--sans); font-size:12.5px; color:var(--accent-ink); background:var(--accent-soft); padding:8px 14px; border-radius:var(--r-pill); }

/* ---------- AUTH MODAL ---------- */
.auth{ position:fixed; inset:0; z-index:1002; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .4s var(--ease-oil), visibility .4s; }
.auth.open{ opacity:1; visibility:visible; }
.auth-modal{ background:var(--paper); width:min(420px,100%); border-radius:var(--r-xl); overflow:hidden; transform:translateY(20px) scale(.98); transition:transform .5s var(--ease-oil); box-shadow:0 40px 90px -40px rgba(28,24,19,.6); }
.auth.open .auth-modal{ transform:none; }
.auth-pad{ padding:clamp(26px,4vw,36px); }
.auth-head{ text-align:center; margin-bottom:24px; }
.auth-head h3{ font-family:var(--serif); font-weight:500; font-size:28px; color:var(--ink); }
.auth-head p{ font-family:var(--sans); font-size:13.5px; color:var(--ink-2); margin-top:6px; }
.auth-tabs{ display:flex; background:var(--paper-2); border-radius:var(--r-pill); padding:4px; margin-bottom:24px; }
.auth-tabs button{ flex:1; cursor:pointer; border:none; background:none; font-family:var(--sans); font-weight:600; font-size:14px; color:var(--ink-2); padding:10px; border-radius:var(--r-pill); transition:background .3s var(--ease-oil), color .3s; }
.auth-tabs button.active{ background:var(--surface-2); color:var(--ink); box-shadow:0 2px 8px -3px rgba(28,24,19,.2); }
.oauth-btn{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:14.5px; color:var(--ink); background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:13px; margin-bottom:11px; transition:background .25s, transform .2s var(--ease-spring); }
.oauth-btn:hover{ background:var(--paper-2); } .oauth-btn:active{ transform:scale(.98); }
.oauth-btn svg, .oauth-btn img{ width:18px; height:18px; }
.auth-div{ display:flex; align-items:center; gap:14px; margin:18px 0; color:var(--ink-3); font-family:var(--sans); font-size:12px; }
.auth-div::before, .auth-div::after{ content:""; flex:1; height:1px; background:var(--line); }
.auth-modal .fld{ margin-bottom:13px; }
.auth-foot{ text-align:center; font-family:var(--sans); font-size:12px; color:var(--ink-3); margin-top:18px; line-height:1.5; }
.auth-hint{ font-family:var(--sans); font-size:11.5px; color:var(--accent-ink); background:var(--accent-soft); border-radius:var(--r-sm); padding:9px 12px; text-align:center; margin-top:4px; }

/* account chip when logged in */
.acct-chip{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:13.5px; color:var(--ink); background:var(--accent-soft); border:none; border-radius:var(--r-pill); padding:8px 8px 8px 14px; }
.acct-chip .av{ width:26px; height:26px; border-radius:var(--r-pill); background:var(--accent-ink); color:var(--paper); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }

/* ---------- TOAST ---------- */
.toast-wrap{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:1100; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
.toast{ display:flex; align-items:center; gap:10px; background:var(--ink); color:var(--paper); font-family:var(--sans); font-size:14px; padding:13px 20px; border-radius:var(--r-pill); box-shadow:0 18px 40px -18px rgba(28,24,19,.6); transform:translateY(20px); opacity:0; transition:transform .4s var(--ease-spring), opacity .4s; }
.toast.show{ transform:translateY(0); opacity:1; }
.toast svg{ width:17px; height:17px; color:var(--accent-bright); }

@media(prefers-reduced-motion:reduce){ .cart,.co-modal,.auth-modal,.ov-back,.co,.auth,.toast,.quiz-modal,.det-modal{ transition:none; } .pc-media img{ transition:none; } }

/* ===================================================================
   DIFERENCIADORES — quiz · trazabilidad · clean label · suscripción · impacto
   =================================================================== */

/* ---------- enriquecido de fichas (.pc) ---------- */
.pc-clean{
  position:absolute; bottom:12px; right:12px; z-index:2; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--sans); font-weight:800; font-size:13px; color:var(--ink);
  background:rgba(251,248,241,.86); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.6); border-radius:var(--r-pill);
  padding:5px 11px 5px 8px; box-shadow:var(--sh-1);
  transition:transform .25s var(--ease-spring), box-shadow .25s var(--ease-oil);
}
.pc-clean svg{ width:14px; height:14px; color:var(--accent-ink); }
.pc-clean:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.pc-trace{
  margin-top:12px; cursor:pointer; align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-weight:600; font-size:12.5px; color:var(--ink-2);
  background:none; border:none; padding:0; transition:color .2s var(--ease-oil);
}
.pc-trace svg{ width:14px; height:14px; color:var(--accent-ink); }
.pc-trace:hover{ color:var(--accent-ink); }

/* ---------- suscripción (carrito) ---------- */
.sub-box{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); padding:14px; margin-bottom:16px; }
.sub-head{ display:flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:700; font-size:12.5px; color:var(--ink); margin-bottom:11px; }
.sub-head svg{ width:16px; height:16px; color:var(--accent-ink); }
.sub-opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.sub-opt{ cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 6px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); transition:border-color .2s, background .2s, transform .15s var(--ease-spring); }
.sub-opt .so-l{ font-family:var(--sans); font-weight:600; font-size:12.5px; color:var(--ink); text-align:center; line-height:1.15; }
.sub-opt .so-n{ font-family:var(--sans); font-weight:800; font-size:11px; color:var(--accent-ink); }
.sub-opt:hover{ border-color:var(--accent); } .sub-opt:active{ transform:scale(.96); }
.sub-opt.on{ border-color:var(--accent-ink); background:var(--accent-soft); }
.sub-note{ font-family:var(--sans); font-size:11.5px; color:var(--accent-ink); margin-top:9px; }
.cart-line.disc span{ color:var(--accent-ink); font-weight:600; }

/* ---------- QUIZ "Estado → Cesta" ---------- */
.quiz,.det{ position:fixed; inset:0; z-index:1002; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .4s var(--ease-oil), visibility .4s; }
.quiz.open,.det.open{ opacity:1; visibility:visible; }
.quiz-modal{ position:relative; background:var(--paper); width:min(680px,100%); max-height:92vh; overflow-y:auto; border-radius:var(--r-xl); transform:translateY(24px) scale(.98); transition:transform .5s var(--ease-oil); box-shadow:0 40px 90px -40px rgba(28,24,19,.6); }
.quiz.open .quiz-modal{ transform:none; }
.quiz-x,.det-x{ position:absolute; top:16px; right:16px; z-index:5; }
.quiz-pad{ padding:clamp(26px,4vw,44px); }
.quiz-eye{ display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); }
.quiz-eye svg{ width:15px; height:15px; }
.quiz-title{ font-family:var(--serif); font-weight:500; font-size:clamp(26px,3.6vw,38px); line-height:1.05; letter-spacing:-.015em; color:var(--ink); margin:12px 0 6px; }
.quiz-title em{ font-style:italic; color:var(--accent-ink); }
.quiz-sub{ font-family:var(--sans); font-size:14.5px; color:var(--ink-2); line-height:1.5; margin-bottom:22px; }
.quiz-bens{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
@media(max-width:560px){ .quiz-bens{ grid-template-columns:1fr; } }
.qb{ cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:4px; padding:16px 18px; border:1.5px solid var(--line-2); border-radius:var(--r-md); background:var(--surface); transition:border-color .22s var(--ease-oil), background .22s, transform .18s var(--ease-spring), box-shadow .22s; }
.qb:hover{ border-color:var(--accent); box-shadow:var(--sh-1); transform:translateY(-2px); }
.qb.on{ border-color:var(--accent-ink); background:var(--accent-soft); box-shadow:0 0 0 3px var(--accent-soft); }
.qb-l{ font-family:var(--serif); font-weight:500; font-size:20px; color:var(--ink); }
.qb-c{ font-family:var(--sans); font-size:13px; color:var(--ink-2); line-height:1.35; }
.quiz-diets{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px; }
.qd{ cursor:pointer; font-family:var(--sans); font-weight:600; font-size:14px; color:var(--ink); background:var(--surface); border:1.5px solid var(--line-2); border-radius:var(--r-pill); padding:10px 18px; transition:border-color .2s, background .2s, transform .15s var(--ease-spring); }
.qd:hover{ border-color:var(--accent); } .qd:active{ transform:scale(.96); }
.qd.on{ border-color:var(--accent-ink); background:var(--accent-soft); color:var(--accent-ink); }
.quiz-budget{ margin-bottom:28px; }
.quiz-budget label{ display:block; font-family:var(--sans); font-weight:600; font-size:13.5px; color:var(--ink-2); margin-bottom:12px; }
.quiz-budget label b{ font-family:var(--serif); font-size:18px; color:var(--ink); }
.quiz-budget input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px; background:var(--line-2); outline:none; }
.quiz-budget input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:var(--accent-ink); border:3px solid var(--paper); box-shadow:var(--sh-1); cursor:pointer; }
.quiz-budget input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--accent-ink); border:3px solid var(--paper); cursor:pointer; }
.qb-scale{ display:flex; justify-content:space-between; font-family:var(--sans); font-size:11.5px; color:var(--ink-3); margin-top:8px; }
.quiz-actions{ display:flex; gap:11px; justify-content:flex-end; flex-wrap:wrap; }
@media(max-width:560px){ .quiz-actions{ flex-direction:column-reverse; } .quiz-actions .btn{ width:100%; justify-content:center; } }
.quiz-basket{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.qr{ display:grid; grid-template-columns:56px 1fr auto; gap:13px; align-items:center; padding:11px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.qr img{ width:56px; height:56px; border-radius:var(--r-sm); object-fit:cover; }
.qr-n{ font-family:var(--serif); font-size:16px; color:var(--ink); line-height:1.1; }
.qr-c{ font-family:var(--sans); font-size:12px; color:var(--ink-3); margin:2px 0 4px; }
.qr-why{ cursor:pointer; background:none; border:none; padding:0; font-family:var(--sans); font-weight:600; font-size:12px; color:var(--accent-ink); }
.qr-why:hover{ text-decoration:underline; }
.qr-r{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.qr-p{ font-family:var(--serif); font-size:17px; color:var(--ink); }
.qr-x{ cursor:pointer; width:26px; height:26px; border-radius:50%; border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink-3); display:inline-flex; align-items:center; justify-content:center; transition:color .2s, border-color .2s; }
.qr-x svg{ width:13px; height:13px; } .qr-x:hover{ color:var(--coral-ink,#7E2B2A); border-color:var(--coral,#F0726E); }
.quiz-total{ display:flex; align-items:baseline; justify-content:space-between; padding:14px 2px 20px; }
.quiz-total span{ font-family:var(--sans); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); }
.quiz-total b{ font-family:var(--serif); font-weight:500; font-size:28px; color:var(--ink); }

/* ---------- FICHA / TRAZABILIDAD / CLEAN LABEL ---------- */
.det-modal{ position:relative; background:var(--paper); width:min(880px,100%); max-height:92vh; overflow-y:auto; border-radius:var(--r-xl); transform:translateY(24px) scale(.98); transition:transform .5s var(--ease-oil); box-shadow:0 40px 90px -40px rgba(28,24,19,.6); }
.det.open .det-modal{ transform:none; }
.det-grid{ display:grid; grid-template-columns:0.92fr 1.08fr; }
@media(max-width:740px){ .det-grid{ grid-template-columns:1fr; } }
.det-media{ position:relative; min-height:280px; background:var(--paper-2); }
.det-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media(max-width:740px){ .det-media{ aspect-ratio:16/10; min-height:0; } }
.det-badges{ position:absolute; left:14px; bottom:14px; display:flex; flex-wrap:wrap; gap:6px; }
.det-ben{ font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--paper); background:var(--accent-ink); padding:5px 10px; border-radius:var(--r-pill); }
.det-body{ padding:clamp(22px,3vw,34px); }
.det-cat{ font-family:var(--sans); font-size:12.5px; color:var(--ink-3); }
.det-name{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,3vw,32px); color:var(--ink); line-height:1.05; letter-spacing:-.015em; margin:4px 0 8px; }
.det-desc{ font-family:var(--sans); font-size:15px; color:var(--ink-2); line-height:1.55; margin:0 0 20px; }
.cl-box{ border:1px solid var(--line); border-radius:var(--r-md); padding:18px; background:var(--surface-2); margin-bottom:18px; }
.cl-top{ display:flex; align-items:center; gap:15px; margin-bottom:15px; }
.cl-ring{ flex:none; }
.cl-title{ font-family:var(--serif); font-weight:500; font-size:19px; color:var(--ink); }
.cl-note{ font-family:var(--sans); font-size:12.5px; color:var(--ink-2); margin-top:2px; }
.cl-flags{ display:flex; flex-direction:column; gap:8px; }
.cl-flag{ display:flex; align-items:center; gap:9px; font-family:var(--sans); font-size:13.5px; color:var(--ink); }
.cl-flag svg{ width:18px; height:18px; flex:none; padding:2px; border-radius:50%; }
.cl-flag.yes svg{ color:#fff; background:var(--accent-ink); } .cl-flag.no svg{ color:#fff; background:var(--ink-3); }
.cl-flag.no span{ color:var(--ink-3); }
.cl-reasons{ list-style:none; margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:7px; }
.cl-reasons li{ position:relative; padding-left:18px; font-family:var(--sans); font-size:13px; color:var(--ink-2); line-height:1.4; }
.cl-reasons li::before{ content:""; position:absolute; left:2px; top:7px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.trace{ margin-bottom:20px; }
.trace-h{ display:flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); margin-bottom:13px; }
.trace-h svg{ width:16px; height:16px; color:var(--accent-ink); }
.trace-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.tc{ background:var(--surface); padding:12px 14px; }
.tc-l{ font-family:var(--sans); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.tc-v{ font-family:var(--sans); font-weight:600; font-size:14.5px; color:var(--ink); margin-top:3px; }
.det-buy{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:6px; }
.det-price{ font-family:var(--serif); font-size:30px; color:var(--ink); }

/* ---------- recibo de impacto (confirmación) ---------- */
.impact{ text-align:left; border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px; background:var(--surface); margin:22px auto 0; max-width:440px; }
.impact-h{ display:flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); margin-bottom:14px; }
.impact-h svg{ width:16px; height:16px; color:var(--accent-ink); }
.impact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.imp{ text-align:center; }
.imp-n{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,4vw,30px); color:var(--ink); line-height:1; }
.imp-c{ font-family:var(--sans); font-size:11px; color:var(--ink-2); margin-top:6px; line-height:1.25; }
.impact-foot{ font-family:var(--sans); font-size:11px; color:var(--ink-3); margin-top:14px; text-align:center; }