/* ============================================================
   Cart — slide-out side drawer
   Additive: touches no existing rule in style.css. Every value
   resolves to a :root token; no literals.

   Layering (extends the four-step scale in style.css):
     refract 3 · topbar 50 · drawer 90 · CART 100/101 · veil 200 · skip 300
   ============================================================ */

/* ── the trigger: count in the top bar ──────────────────── */
.cart-btn{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  background:none; border:1px solid var(--rose-lt); border-radius:4px;
  color:var(--rose-deep); font-family:var(--sans); font-size:var(--t-sm);
  font-weight:300; letter-spacing:.01em; padding:10px 20px; cursor:pointer;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.cart-btn:hover{ background:var(--rose-deep); border-color:var(--rose-deep); color:#FFF9F5; }
.cart-btn__n{
  min-width:20px; height:20px; padding:0 6px; border-radius:99px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--rose-deep); color:#FFF9F5;
  font-size:var(--t-label); letter-spacing:.06em; font-weight:400;
  font-variant-numeric:tabular-nums;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.cart-btn:hover .cart-btn__n{ background:#FFF9F5; color:var(--rose-deep); }
.cart-btn__n[data-empty]{ opacity:.34; }

/* ── add-to-cart CTAs ───────────────────────────────────────
   They reuse .link-fine — the page's signature affordance — but they
   act instead of navigating, so they are <button>. A button does not
   inherit the page font or box, hence the reset. No visual change:
   these must stay indistinguishable from the links beside them. */
button.link-fine{
  background:none; border:0; margin:0; padding:0 0 9px;
  font-family:var(--sans); font-weight:300; line-height:inherit; color:inherit;
  cursor:pointer; text-align:left;
}

/* ── the backdrop: glass over the page ──────────────────── */
.cart-veil{
  position:fixed; inset:0; z-index:100;
  background:rgba(38,37,33,.20);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  opacity:0; pointer-events:none;
  transition:opacity .62s var(--ease);
}
.cart-veil.is-on{ opacity:1; pointer-events:auto; }

/* ── the drawer ─────────────────────────────────────────── */
.cart{
  position:fixed; top:0; right:0; bottom:0; z-index:101;
  width:100%;
  display:flex; flex-direction:column;
  background:var(--paper);
  border-left:1px solid var(--line);
  transform:translateX(100%);
  visibility:hidden;
}
.cart.is-open{ visibility:visible; }

/* head and foot stay put; only the body scrolls */
.cart__head{
  flex:none; display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; padding:clamp(26px,3.4vw,38px) clamp(22px,3vw,36px) clamp(20px,2.4vw,28px);
  border-bottom:1px solid var(--line);
}
.cart__title{ font-family:var(--serif); font-size:var(--fs-h2b); line-height:1.16; letter-spacing:-.024em; }
.cart__count{
  display:block; margin-top:9px;
  font-family:var(--sans); font-size:var(--t-label); font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.cart__x{
  flex:none; width:42px; height:42px; display:grid; place-items:center;
  background:none; border:1px solid var(--line); border-radius:10px;
  color:var(--ink-2); cursor:pointer;
  transition:border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.cart__x:hover{ border-color:var(--rose-lt); color:var(--rose-deep); transform:rotate(90deg); }
.cart__x .ico{ width:18px; height:18px; }

/* ── the list ───────────────────────────────────────────── */
.cart__body{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding:0 clamp(22px,3vw,36px);
}
.cart__list > li{ border-bottom:1px solid var(--line); }
.cart__list > li:last-child{ border-bottom:0; }

.ci{
  display:grid; grid-template-columns:clamp(74px,9vw,92px) 1fr; gap:clamp(16px,2vw,24px);
  padding:clamp(22px,2.6vw,30px) 0;
}
.ci__plate{
  border-radius:4px; overflow:hidden; background:var(--paper-2);
  aspect-ratio:4/5; align-self:start;
}
.ci__plate img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.ci:hover .ci__plate img{ transform:scale(1.02); }
/* the Metodología services have no photography — they carry their drawn icon
   instead, at the same optical line weight as everywhere else on the page */
.ci__plate--icon{ display:grid; place-items:center; }
.ci__plate--icon .ico{ width:34px; height:34px; color:var(--rose-deep); }

.ci__b{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.ci__kind{
  font-size:var(--t-label); font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
}
.ci__t{ font-family:var(--serif); font-size:var(--fs-h3); line-height:1.16; letter-spacing:-.022em; max-width:24ch; }
.ci__row{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:6px; }

/* quantity — two signs and a tabular figure, nothing more */
.qty{ display:inline-flex; align-items:center; gap:2px; }
.qty__b{
  width:30px; height:30px; display:grid; place-items:center;
  background:none; border:1px solid var(--line); border-radius:4px;
  color:var(--ink-2); cursor:pointer; font-family:var(--sans); font-size:var(--t-md);
  transition:border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
.qty__b:hover:not(:disabled){ border-color:var(--rose-lt); color:var(--rose-deep); }
.qty__b:disabled{ opacity:.34; cursor:default; }
.qty__n{
  min-width:34px; text-align:center; font-size:var(--t-md);
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.ci__p{ font-size:var(--t-md); color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* remove — a fine link, not a bin icon */
.ci__rm{
  align-self:flex-start; margin-top:2px; padding:0 0 4px; background:none; border:0;
  font-family:var(--sans); font-size:var(--t-sm); font-weight:300; color:var(--ink-3);
  cursor:pointer; position:relative;
}
.ci__rm::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--rose-lt); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.ci__rm:hover{ color:var(--rose-deep); }
.ci__rm:hover::after{ transform:scaleX(1); }

/* ── empty state ────────────────────────────────────────── */
.cart__empty{
  flex:1 1 auto; display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:26px; padding:clamp(34px,6vw,64px) clamp(26px,4vw,44px);
}
.cart.is-empty .cart__empty{ display:flex; }
.cart.is-empty .cart__body,
.cart.is-empty .cart__sum{ display:none; }

.cart__crystal{ width:clamp(108px,20vw,142px); height:auto; }
.cart__crystal--float{ animation:cristal 7.5s var(--ease-soft) infinite alternate; }
@keyframes cristal{ from{ transform:translateY(4px); } to{ transform:translateY(-6px); } }

.cart__emptyT{
  font-family:var(--serif); font-style:italic; font-size:var(--fs-quote-sm);
  line-height:1.46; letter-spacing:-.015em; color:var(--ink); max-width:22ch;
}
.cart__emptyP{ font-size:var(--t-md); color:var(--ink-2); max-width:34ch; }

/* ── paid state ─────────────────────────────────────────────
   The third state of the drawer. Payment is what unlocks the
   conversation, so WhatsApp lives here and nowhere earlier in
   the flow. Same furniture as the empty state, warmer ground. */
.cart__done{
  flex:1 1 auto; display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:22px; padding:clamp(34px,6vw,64px) clamp(26px,4vw,44px);
  background:var(--sage-soft);
}
.cart.is-done .cart__done{ display:flex; }
.cart.is-done .cart__body,
.cart.is-done .cart__sum,
.cart.is-done .cart__empty{ display:none; }

.cart__doneBadge{
  display:inline-block; padding:4px 13px; border-radius:99px;
  border:1px solid var(--rose-deep); color:var(--rose-deep);
  font-size:var(--t-label); font-weight:400; letter-spacing:.16em; text-transform:uppercase;
}
.cart__doneT{
  font-family:var(--serif); font-size:var(--fs-h2b); line-height:1.16; letter-spacing:-.024em;
  color:var(--ink); max-width:18ch;
}
.cart__doneP{ font-size:var(--t-md); color:var(--ink-2); max-width:34ch; }
/* compound, so it beats .cart__cta's own margin regardless of source order */
.cart__done .cart__cta{ width:100%; max-width:320px; margin-top:4px; }
.cart__doneFine{ font-size:var(--t-sm); color:var(--ink-3); max-width:32ch; }

/* ── summary + foot ─────────────────────────────────────── */
.cart__sum{
  flex:none; background:var(--sage-soft);
  border-top:1px solid var(--line);
  padding:clamp(24px,3vw,34px) clamp(22px,3vw,36px) clamp(22px,2.6vw,30px);
}
/* the page's own section furniture: hairline rule closed by an accent end-tick */
.cart__rule{ position:relative; height:1px; background:var(--line); margin-bottom:18px; }
.cart__rule::before{
  content:''; position:absolute; left:0; bottom:0; width:1px; height:11px; background:var(--rose);
}
.cart__line{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:5px 0; font-size:var(--t-md); color:var(--ink-2);
}
.cart__line--total{
  margin-top:8px; padding-top:16px; border-top:1px solid var(--rose-lt);
  color:var(--ink);
}
.cart__line--total dt{ font-size:var(--t-label); font-weight:400; letter-spacing:.2em; text-transform:uppercase; }
.cart__line--total dd{
  font-family:var(--serif); font-size:var(--fs-h3); letter-spacing:-.022em;
  font-variant-numeric:tabular-nums;
}
.cart__line dd{ margin:0; font-variant-numeric:tabular-nums; }

.cart__note{
  margin-top:14px; font-size:var(--t-sm); color:var(--ink-3); line-height:1.62;
}
.cart__note span{
  display:inline-block; margin-right:8px; padding:3px 11px; border-radius:99px;
  border:1px solid var(--rose-deep); color:var(--rose-deep);
  font-size:var(--t-label); font-weight:400; letter-spacing:.16em; text-transform:uppercase;
}

.cart__cta{
  width:100%; margin-top:18px;
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  background:var(--rose-deep); color:#FFF9F5; border:0; border-radius:4px;
  padding:16px 30px; cursor:pointer; text-decoration:none;   /* also styles the <a> WhatsApp variant */
  font-family:var(--sans); font-size:var(--t-md); font-weight:300; letter-spacing:.01em;
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.cart__cta:hover{ background:var(--ink); transform:translateY(-2px); }
.cart__cta .ico{ width:1.2em; height:1.2em; }

.cart__trust{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:13px; font-size:var(--t-fine); letter-spacing:.05em; color:var(--ink-3);
}
.cart__trust .ico{ width:13px; height:13px; }

.cart__back{
  display:block; width:100%; margin-top:14px; padding:0; background:none; border:0;
  font-family:var(--sans); font-size:var(--t-sm); font-weight:300; color:var(--ink-3);
  cursor:pointer; text-align:center;
}
.cart__back:hover{ color:var(--rose-deep); }

/* Touch: the stepper and the remove link are sized for a pointer. On a
   coarse pointer the hit area grows past the 24px floor — the stepper for
   real, the remove link through an invisible overlay so the fine underline
   stays glued to its text instead of drifting down with the padding. */
@media (pointer:coarse){
  .qty__b{ width:40px; height:40px; }
  .ci__rm::before{ content:''; position:absolute; left:0; right:0; top:-12px; bottom:-12px; }
}

/* ── responsive ─────────────────────────────────────────── */
/* the top bar drops its labels at 1080 — the cart trigger follows the
   same rule as .topbar__cta so the bar never crowds, keeping the count */
@media (max-width:1080px){
  .cart-btn > span:not(.cart-btn__n){ display:none; }
  .cart-btn{ padding:11px 14px; }
}
@media (min-width:620px){
  .cart{ width:min(78vw,440px); }
}
@media (min-width:1080px){
  .cart{ width:min(36vw,520px); }
}

/* Short viewports — landscape phones, small windows. Head plus summary
   alone can exceed the height, which would strand the CTA off-screen with
   nothing to scroll. Below this the drawer stops being three fixed bands
   and becomes one continuous scroll, so the action is always reachable. */
@media (max-height:680px){
  .cart{ overflow-y:auto; overscroll-behavior:contain; }
  .cart__body{ overflow:visible; flex:0 0 auto; }
  .cart__head{ padding-top:clamp(18px,3vw,26px); padding-bottom:16px; }
  .cart__sum{ padding-top:20px; padding-bottom:20px; }
  .cart__title{ font-size:var(--fs-h3); }
  .cart.is-empty .cart__empty{ padding-top:clamp(24px,5vw,40px); padding-bottom:clamp(24px,5vw,40px); }
}

/* ── reveal start-states (JS clears them) ───────────────── */
.js .cart__list > li,
.js .cart__sum,
.js .cart__empty > *,
.js .cart__done > *{ opacity:0; }

/* ── reduced motion: parity, same policy as the rest of the page ── */
@media (prefers-reduced-motion:reduce){
  .cart__list > li,
  .cart__sum,
  .cart__empty > *,
  .cart__done > *{ opacity:1 !important; transform:none !important; }
  .cart-veil{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(38,37,33,.42); }
  .cart__crystal--float{ animation:none; }
  .ci__plate img,
  .cart__x:hover,
  .cart__cta:hover{ transition:none; transform:none; }
}