/* =====================================================================
   CARRITO SITEWIDE (widget flotante "Mi cita") · usado por /cart.js
   Extraído de servicios-de-mirada/mockup.css para poder incluirse en
   cualquier página del sitio sin duplicar reglas. Depende únicamente
   de las variables globales definidas en /styles.css (--ink, --rosa-100,
   --grad-warm, --r-md, --r-lg, --r-pill, --sh-sm, --sh-md, --sh-lg,
   --sh-glow, --font-sans, --font-display, --grad-text, --magenta-ink).
   ===================================================================== */
.mc-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:1200;background:var(--ink);color:#fff;font-family:var(--font-sans);font-weight:400;font-size:.86rem;padding:.8em 1.3em;border-radius:var(--r-pill);box-shadow:var(--sh-md);opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.mc-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.mc-upsell{position:fixed;inset:0;z-index:1300;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(67,48,58,.72);backdrop-filter:blur(6px)}
.mc-upsell.open{display:flex}
/* max-height + overflow-y:auto: si el contenido (texto largo, nota de precio,
   etc.) no cabe en pantallas chicas/bajas, la tarjeta se vuelve scrollable en
   vez de recortar silenciosamente lo de abajo (nota de precio, "Seguir
   agregando") fuera del área visible. */
.mc-upsell-card{position:relative;width:min(92vw,440px);max-height:calc(100vh - 40px);overflow-y:auto;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:clamp(24px,4.5vw,32px);text-align:center}
.mc-upsell-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:none;background:var(--rosa-50);box-shadow:var(--sh-sm);cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.mc-upsell-eyebrow{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-display);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta-ink);background:var(--rosa-100);padding:.45em 1em;border-radius:var(--r-pill);margin-bottom:14px}
.mc-upsell h4{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.1rem,3vw,1.32rem);color:var(--ink);margin-bottom:.4em;line-height:1.2}
.mc-upsell h4 .em{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.mc-upsell-sub{color:var(--ink-soft);font-size:.86rem;margin-bottom:18px;line-height:1.5}
.mc-upsell-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md);margin-bottom:16px;box-shadow:var(--sh-sm)}
.mc-upsell-item{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:var(--r-md);background:rgba(255,255,255,.7);border:1.5px solid var(--rosa-100);margin-bottom:16px;text-align:left}
.mc-upsell-item.is-added{border-color:var(--rosa);box-shadow:var(--sh-sm)}
.mc-upsell-item .n{flex:1;font-size:.9rem;font-weight:400;color:var(--ink)}
.mc-upsell-item .p{font-family:var(--font-display);font-size:.86rem;color:var(--ink-soft);white-space:nowrap}
.mc-upsell-item .p.mc-p-disc{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.2}
.mc-upsell-item .p.mc-p-disc s{font-size:.72rem;color:var(--ink-faint);font-weight:400}
.mc-upsell-item .p.mc-p-disc .mc-tag{font-style:normal;font-family:var(--font-sans);font-weight:400;font-size:.68rem;letter-spacing:.02em;color:#fff;background:var(--grad-warm);padding:.2em .55em;border-radius:var(--r-pill);margin-left:2px}
.mc-upsell-online{font-size:.78rem;color:var(--magenta-ink);margin:-6px 0 16px;line-height:1.4}
.mc-upsell-skip{display:block;margin:0 auto;background:none;border:none;cursor:pointer;font-family:var(--font-sans);font-size:.84rem;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.mc-upsell-skip:hover{color:var(--magenta)}

.mc-fab{display:none;align-items:center;gap:8px;position:fixed;right:20px;bottom:20px;z-index:1100;font-family:var(--font-sans);font-weight:400;font-size:.9rem;color:#fff;background:var(--grad-warm);border:none;padding:.85em 1.3em;border-radius:var(--r-pill);box-shadow:var(--sh-glow);cursor:pointer}
.mc-fab b{background:rgba(255,255,255,.3);border-radius:50%;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:.76rem;padding:0 5px}
.mc-panel{position:fixed;right:20px;bottom:84px;z-index:1150;width:min(90vw,340px);max-height:70vh;overflow-y:auto;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:18px;display:none}
.mc-panel.open{display:block}
.mc-panel-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-sans);font-weight:400;font-size:.92rem;color:var(--ink);margin-bottom:12px}
.mc-panel-close{background:none;border:none;font-size:1.3rem;line-height:1;cursor:pointer;color:var(--ink-soft)}
.mc-countdown{display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:center;background:var(--rosa-100);border-radius:var(--r-md);padding:10px 12px;margin-bottom:12px}
.mc-countdown-txt{font-size:.8rem;color:var(--magenta-ink);line-height:1.35}
.mc-countdown-txt b{font-family:var(--font-display);font-size:.95rem}
.mc-countdown-claim{font-size:.82rem;padding:.6em 1em}
.mc-panel-list{display:grid;gap:8px;margin-bottom:12px}
.mc-panel-item{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink);border-bottom:1px solid rgba(236,63,154,.08);padding-bottom:8px}
.mc-panel-item .n{flex:1}
.mc-panel-item .p{color:var(--ink-soft);white-space:nowrap;font-family:var(--font-display)}
.mc-panel-rm{background:none;border:none;color:var(--ink-faint);font-size:1.1rem;line-height:1;cursor:pointer;padding:0 2px}
.mc-panel-total{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-display);font-size:1rem;color:var(--ink);margin-bottom:14px}
.mc-panel-total b{font-size:1.2rem;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mc-panel-note{font-size:.74rem;color:var(--ink-faint);margin-top:10px;line-height:1.4;text-align:center}

.mc-panel,.mc-upsell-card{
  background:
    radial-gradient(circle at 20% 16%, rgba(255,255,255,.6) 0%, transparent 30%),
    linear-gradient(150deg,#fff,rgba(213,200,248,.14) 60%,rgba(246,201,227,.1));
}