/* ============================================================
   CineDar — Página de producto /Producto/{code}
   Réplica de docs/references/checkout-product-reference.png.
   Solo la carga Views/Producto/Detalle.cshtml (via @section Styles).
   Comparte topbar/footer/beneficios de home.css (_HomeLayout).
   ============================================================ */

.pd-wrap {
    max-width: 1200px;
    margin: 1.4rem auto 0;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 1.2rem;
    align-items: start;
}

.pd-main { min-width: 0; }

/* ---------- Breadcrumb ---------- */
.pd-breadcrumb {
    font-size: .82rem;
    color: var(--cd-muted);
    display: flex;
    gap: .5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.pd-breadcrumb a { color: var(--cd-muted); }
.pd-breadcrumb a:hover { color: #fff; }
.pd-breadcrumb strong { color: var(--cd-text); }

/* ---------- Encabezado ---------- */
.pd-header {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.pd-logo-box {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: #120d20;
    border: 1px solid var(--ac-soft);
    box-shadow: 0 0 18px var(--ac-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pd-logo-box img { max-width: 82%; max-height: 82%; object-fit: contain; }
.pd-logo-letter { font-size: 2rem; font-weight: 900; color: var(--ac); }

.pd-header-text h1 { font-size: 2.2rem; font-weight: 800; margin: 0; }
.pd-header-text p { color: var(--cd-muted); margin: 0; }

.pd-header-badges { display: flex; gap: .5rem; flex-wrap: wrap; margin-left: auto; }

.pd-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .74rem;
    font-weight: 600;
    border-radius: 10px;
    padding: .45rem .7rem;
    border: 1px solid;
}

.pd-badge-purple { color: #c4b5fd; border-color: rgba(139, 92, 246, .5); background: rgba(139, 92, 246, .1); }
.pd-badge-green { color: #86efac; border-color: rgba(34, 197, 94, .5); background: rgba(34, 197, 94, .08); }
.pd-badge-gold { color: var(--cd-gold-hi); border-color: rgba(212, 168, 67, .45); background: rgba(212, 168, 67, .08); }

/* ---------- Ofertas ---------- */
.pd-empty {
    background: var(--cd-surface);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    padding: 1.4rem;
    text-align: center;
    color: var(--cd-muted);
}

.pd-offers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    gap: .9rem;
}

.pd-offer {
    position: relative;
    background: #0d0a17;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    padding: 1rem;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.pd-offer:hover { border-color: var(--ac-soft); }

.pd-offer.selected {
    border-color: var(--ac);
    box-shadow: 0 0 20px var(--ac-dim), 0 0 6px var(--ac-soft);
}

.pd-offer.pd-agotado {
    cursor: default;
    filter: saturate(.25) brightness(.72);
}

/* C27 — .pd-actions solo existe para el móvil. Aquí se disuelve: la cantidad y el botón vuelven a
   ser hijos directos de .pd-offer y el diseño de escritorio queda exactamente como estaba. */
.pd-actions { display: contents; }

/* C28 — .mc-pays, igual: solo existe para poner los métodos en fila en móvil. Disuelto aquí, el
   escritorio conserva sus tres grupos etiquetados con una tarjeta por fila. */
.mc-pays { display: contents; }

/* C29 — la cabecera del modal ("Tu compra" + ×) es de móvil. En escritorio el carrito es una
   columna normal de la página: no es modal y no hay nada que cerrar. */
.mc-modal-bar { display: none; }

/* C31 — pareja larga/corta del consentimiento. Por defecto manda la de escritorio. */
.mc-terms-corta { display: none; }

.pd-popular {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(95deg, #7c3aed, #2563eb);
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    border-radius: 20px;
    padding: .25rem .7rem;
    white-space: nowrap;
    box-shadow: 0 0 12px rgba(124, 58, 237, .6);
}

.pd-offer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }

.pd-offer-ic {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ac-dim);
    border: 1px solid var(--ac-soft);
    color: var(--ac);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.pd-offer-ic img { max-width: 70%; max-height: 70%; object-fit: contain; }

.pd-estado {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
    border-radius: 8px;
    padding: .25rem .55rem;
}

.pd-estado.ok { color: #86efac; background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .5); }
.pd-estado.no { color: #fca5a5; background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .5); }

.pd-offer h3 { font-size: 1.02rem; font-weight: 700; margin: 0; }
.pd-offer-sub { color: var(--cd-muted); font-size: .78rem; margin-top: .1rem; }

.pd-price { display: flex; align-items: baseline; gap: .3rem; margin: .55rem 0; flex-wrap: wrap; }
.pd-price .pd-cur { color: var(--ac); font-weight: 800; font-size: 1rem; }
.pd-price .pd-amount { font-size: 1.55rem; font-weight: 800; color: #fff; }
.pd-price .pd-code { color: var(--cd-muted); font-size: .72rem; }
.pd-price .pd-old { color: var(--cd-muted); font-size: .82rem; text-decoration: line-through; margin-left: .3rem; }

.pd-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .65rem; }

.pd-chip {
    font-size: .64rem;
    font-weight: 600;
    border-radius: 7px;
    padding: .22rem .5rem;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #14101f;
    color: var(--cd-text);
}

.pd-chip.c-purple { color: #c4b5fd; border-color: rgba(139, 92, 246, .4); }
.pd-chip.c-green { color: #86efac; border-color: rgba(34, 197, 94, .4); }
.pd-chip.c-blue { color: #93c5fd; border-color: rgba(59, 130, 246, .4); }
.pd-chip.c-red { color: #fca5a5; border-color: rgba(239, 68, 68, .4); }
.pd-chip.c-gold { color: var(--cd-gold-hi); border-color: rgba(212, 168, 67, .4); }
.pd-chip.c-muted { color: var(--cd-muted); }

.pd-qty { display: flex; align-items: center; gap: .45rem; margin-bottom: .7rem; font-size: .78rem; color: var(--cd-muted); }

.pd-qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: #17132a;
    color: #fff;
    font-weight: 700;
    line-height: 1;
}

.pd-qty-btn:disabled { opacity: .4; }

.pd-qty-value {
    width: 42px;
    text-align: center;
    background: #17132a;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    padding: .25rem 0;
}

.pd-btn-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    padding: .6rem;
    border-radius: 10px;
    border: 1px solid rgba(139, 92, 246, .7);
    background: linear-gradient(95deg, #7c3aed, #2563eb);
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    box-shadow: 0 0 14px rgba(124, 58, 237, .45);
}

.pd-btn-add:hover { color: #fff; filter: brightness(1.12); }

.pd-btn-add:disabled, .pd-btn-add[disabled] {
    background: #241f33;
    border-color: rgba(255, 255, 255, .15);
    color: var(--cd-muted);
    box-shadow: none;
    filter: none;
    cursor: not-allowed;
}

/* ---------- Renovación automática (C45: los "Términos y condiciones" se quitaron de la página de
   producto por pedido del cliente; siguen en el carrito de pago) ---------- */
.pd-block {
    background: var(--cd-surface);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    padding: 1rem 1.1rem;
}

/* Bloque suelto (antes convivía con Términos en .pd-row-2). El margen superior lo separa de las
   ofertas. Se oculta por completo cuando la oferta no trae la renovación ACTIVA por defecto
   (atributo [hidden] que pone product-detail.js). */
.pd-renew { margin-top: 1rem; }
.pd-renew[hidden] { display: none !important; }

.pd-block-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    font-size: .9rem;
}

.pd-block-head .cd-ic { color: var(--cd-purple); }
.pd-block-head small { color: var(--cd-muted); }
.pd-block p { color: var(--cd-muted); font-size: .8rem; margin: 0; }

/* Switch */
.pd-switch { margin-left: auto; position: relative; display: inline-block; width: 46px; height: 24px; }
.pd-switch input { opacity: 0; width: 0; height: 0; }
.pd-switch span {
    position: absolute; inset: 0; border-radius: 24px;
    background: #241f33; border: 1px solid rgba(255, 255, 255, .18);
    transition: background .15s;
}
.pd-switch span::before {
    content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
    background: #9d97b5; top: 2px; left: 3px; transition: transform .15s, background .15s;
}
.pd-switch input:checked + span { background: linear-gradient(95deg, #7c3aed, #2563eb); border-color: rgba(139, 92, 246, .7); }
.pd-switch input:checked + span::before { transform: translateX(21px); background: #fff; }
.pd-switch input:disabled + span { opacity: .4; }

/* ---------- Producto seleccionado ---------- */
.pd-selected-info {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.6rem;
    margin-top: 1rem;
    font-size: .82rem;
    color: var(--cd-muted);
}

.pd-selected-info strong { color: var(--cd-text); }

/* ---------- Relacionados (carrusel) ---------- */
.pd-related-title { font-size: 1.05rem; font-weight: 700; margin: 1.6rem 0 .7rem; }
.pd-related-title span { color: var(--cd-purple); }

.pd-related-wrap { position: relative; }

.pd-related {
    display: flex;
    gap: .8rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: .3rem;
    /* Sin scrollbar visible: el movimiento es automático y con flechas. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pd-related::-webkit-scrollbar { display: none; }

.pd-rel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(13, 10, 23, .92);
    border: 1px solid rgba(139, 92, 246, .65);
    color: #c4b5fd;
    font-size: 1.35rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: .2rem;
    box-shadow: 0 0 14px rgba(124, 58, 237, .45);
    transition: box-shadow .15s, color .15s;
}

.pd-rel-arrow:hover {
    color: #fff;
    box-shadow: 0 0 20px rgba(124, 58, 237, .8), 0 0 6px rgba(139, 92, 246, .6);
}

.pd-rel-prev { left: -10px; }
.pd-rel-next { right: -10px; }

.pd-related-card {
    flex: 0 0 170px;
    scroll-snap-align: start;
    background: #0d0a17;
    border: 1px solid var(--ac-soft);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 12px var(--ac-dim);
}

.pd-related-art {
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 20%, var(--ac-dim), transparent 70%),
        linear-gradient(180deg, #191030, #0d0a17);
    background-size: cover;
    background-position: center;
}

.pd-related-name { color: var(--ac); font-weight: 800; text-shadow: 0 0 10px var(--ac-dim); }

.pd-related-body { padding: .6rem .7rem .8rem; display: flex; flex-direction: column; gap: .15rem; }
.pd-related-body strong { font-size: .82rem; }
.pd-related-body small { color: var(--cd-muted); font-size: .72rem; }

.pd-related-btn {
    margin-top: .45rem;
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    color: var(--cd-text);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    padding: .35rem;
}

.pd-related-btn:hover { color: #fff; border-color: var(--ac); box-shadow: 0 0 8px var(--ac-dim); }

/* ---------- Panel lateral ---------- */
.pd-side { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .9rem; }

.pd-saldo { display: flex; align-items: center; gap: .7rem; border-color: rgba(139, 92, 246, .4); }

.pd-avatar {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
}

.pd-saldo-text { display: flex; flex-direction: column; line-height: 1.25; font-size: .78rem; color: var(--cd-muted); }
.pd-saldo-text strong { font-size: 1.4rem; color: #fff; }
.pd-saldo-text small { font-size: .68rem; }
.pd-wallet-ic { width: 26px; height: 26px; color: var(--cd-purple); margin-left: auto; }

.pd-pays { display: flex; gap: .45rem; margin: .5rem 0 .8rem; }

.pd-btn-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    padding: .7rem;
    border-radius: 10px;
    border: none;
    background: linear-gradient(95deg, #7c3aed, #ec4899);
    color: #fff;
    font-weight: 800;
}

.pd-btn-pay:disabled { opacity: .55; cursor: not-allowed; }

.pd-or { text-align: center; color: var(--cd-muted); font-size: .74rem; margin: .6rem 0; }

.pd-btn-wsp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    padding: .65rem;
    border-radius: 10px;
    background: linear-gradient(95deg, #059669, #16a34a);
    color: #fff;
    font-weight: 800;
    opacity: .8;
}

.pd-btn-wsp:hover { color: #fff; }

.pd-capture { margin-top: .8rem; font-size: .78rem; }
.pd-capture label { display: block; margin-bottom: .35rem; font-weight: 600; }
.pd-capture input {
    width: 100%;
    font-size: .72rem;
    color: var(--cd-muted);
    background: #17132a;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    padding: .4rem;
}

.pd-btn-request {
    display: block;
    width: 100%;
    margin-top: .8rem;
    padding: .6rem;
    border-radius: 10px;
    background: transparent;
    border: 1px solid rgba(139, 92, 246, .6);
    color: #c4b5fd;
    font-weight: 700;
}

.pd-btn-request:disabled { opacity: .55; cursor: not-allowed; }

.pd-side-note { text-align: center; color: var(--cd-muted); font-size: .72rem; margin: .5rem 0 0; }

/* ---------- Confirmación de compra (/Compra/{orderNumber}) ---------- */
.cf-wrap { max-width: 620px; margin: 2.2rem auto 0; padding: 0 1rem; }

.cf-card {
    background: var(--cd-surface);
    border: 1px solid rgba(34, 197, 94, .45);
    border-radius: 16px;
    padding: 1.8rem 1.6rem;
    text-align: center;
    box-shadow: 0 0 26px rgba(34, 197, 94, .12);
}

.cf-check { width: 64px; height: 64px; margin: 0 auto .8rem; color: #22c55e; filter: drop-shadow(0 0 14px rgba(34, 197, 94, .6)); }
.cf-check svg { width: 100%; height: 100%; }

.cf-card h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: .3rem; }
.cf-numero { color: var(--cd-muted); font-size: .85rem; margin-bottom: 1.2rem; }

.cf-detalle { text-align: left; margin: 0 0 1rem; }
.cf-detalle > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: .88rem;
}
.cf-detalle dt { color: var(--cd-muted); font-weight: 500; }
.cf-detalle dd { margin: 0; font-weight: 600; }
.cf-total { color: #fff; font-size: 1.05rem; }
.cf-saldo { color: #86efac; }

.cf-badge-pendiente {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
    border-radius: 8px;
    padding: .25rem .55rem;
    color: var(--cd-gold-hi);
    background: rgba(212, 168, 67, .12);
    border: 1px solid rgba(212, 168, 67, .5);
}

.cf-nota { color: var(--cd-muted); font-size: .8rem; }

.cf-acciones { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }

/* Error de compra (banner en /Producto) */
.pd-alert-err {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .55);
    color: #fca5a5;
    border-radius: 12px;
    padding: .7rem 1rem;
    margin-bottom: 1rem;
    font-size: .86rem;
}

/* ---------- Toast "Agregado al carrito" ----------
   C64 — la MISMA tarjeta centrada en PC y en celular (antes en escritorio era una barrita pegada
   abajo del todo, tan discreta que el cliente no se enteraba de que el producto había entrado).
   El diseño ya existía para móvil: aquí pasa a ser el único, y el bloque @media que lo definía
   aparte desapareció. La palomita y el rojo de error están más abajo. */
.pd-toast {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(.9);
    width: max-content;
    max-width: min(84vw, 330px);
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: .98rem;
    line-height: 1.35;
    padding: 1.2rem 1.5rem;
    border-radius: 20px;
    background: linear-gradient(165deg, rgba(32, 24, 58, .97), rgba(17, 13, 33, .97));
    border: 1px solid rgba(139, 92, 246, .5);
    box-shadow: 0 26px 80px rgba(0, 0, 0, .62), 0 0 46px rgba(124, 58, 237, .38);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity .28s ease, transform .36s cubic-bezier(.2, .9, .28, 1.25);
    z-index: 1080;
}

.pd-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Palomita en círculo — solo en éxito (los errores conservan su rojo, sin check). */
.pd-toast:not(.pd-toast-err)::before {
    content: "✓";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto .6rem;
    font-size: 1.55rem;
    font-weight: 900;
    color: #fff;
    border-radius: 50%;
    background: linear-gradient(150deg, #22c55e, #16a34a);
    box-shadow: 0 8px 22px rgba(34, 197, 94, .5);
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .pd-wrap { grid-template-columns: minmax(0, 1fr); }
    .pd-side { position: static; }
    .pd-header-badges { margin-left: 0; }
}

@media (max-width: 575.98px) {
    .pd-header-text h1 { font-size: 1.6rem; }
    .pd-offers { grid-template-columns: minmax(0, 1fr); }
    .pd-selected-info { flex-direction: column; gap: .3rem; }
}

/* Enlaces "Recargar" (D1) */
.pd-recargar {
    display: inline-block;
    margin-top: .25rem;
    font-size: .74rem;
    font-weight: 700;
    color: #22d3ee;
    text-decoration: none;
}
.pd-recargar:hover { color: #fff; text-decoration: underline; }
.cf-recargar {
    margin-left: .5rem;
    font-size: .78rem;
    font-weight: 700;
    color: #22d3ee;
    text-decoration: none;
}
.cf-recargar:hover { color: #fff; text-decoration: underline; }

/* Aviso "agregado al carrito" (D2) */
.pd-cart-ok {
    background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .45);
    color: #86efac; border-radius: 10px; padding: .6rem .8rem; margin-bottom: .7rem; font-size: .85rem;
}
.pd-cart-ok-links { margin-top: .35rem; display: flex; gap: .5rem; align-items: center; font-size: .82rem; }
.pd-cart-ok-links a { color: #22d3ee; font-weight: 700; text-decoration: none; }
.pd-cart-ok-links a:hover { color: #fff; text-decoration: underline; }
.pd-cart-ok-links span { color: rgba(255,255,255,.3); }

/* D3: carrusel — servicio actual resaltado + estados */
.pd-related-card { cursor: pointer; transition: transform .1s, border-color .12s; }
.pd-related-card:hover { transform: translateY(-2px); }
.pd-related-actual { outline: 2px solid var(--ac, #22d3ee); outline-offset: 1px; }
.pd-related-tag {
    position: absolute; top: .4rem; left: .4rem; z-index: 2;
    background: rgba(34, 211, 238, .9); color: #04121a; font-size: .6rem; font-weight: 800;
    padding: .12rem .4rem; border-radius: 6px; letter-spacing: .04em;
}
#pd-fragment.pd-loading { opacity: .45; transition: opacity .1s; pointer-events: none; }
/* Error: rojo y SIN palomita (la regla :not(.pd-toast-err) de arriba ya la excluye). */
.pd-toast.pd-toast-err {
    background: linear-gradient(95deg, #b91c1c, #ef4444);
    border-color: rgba(239, 68, 68, .55);
    box-shadow: 0 26px 80px rgba(0, 0, 0, .62), 0 0 46px rgba(239, 68, 68, .3);
}

/* ============================================================
   D3 — Mini carrito lateral en /Producto
   ============================================================ */
.mc {
    background: linear-gradient(180deg, #141026, #0d0a1a);
    border: 1px solid rgba(139, 92, 246, .28);
    border-radius: 16px; padding: 1rem; color: #ece9f7;
    display: flex; flex-direction: column; gap: .6rem;
}
.mc-head { display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
.mc-head svg { width: 20px; height: 20px; color: #22d3ee; }
.mc-head strong { flex: 1; }
.mc-count { background: linear-gradient(95deg, #7c3aed, #22d3ee); color: #04121a; font-size: .7rem; font-weight: 800; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; }
.mc-head-total, .mc-chevron { display: none; }

.mc-saldo { display: flex; justify-content: space-between; align-items: center; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.25); border-radius: 10px; padding: .5rem .7rem; font-size: .82rem; }
.mc-saldo span { color: #9d97b5; }
.mc-saldo b { color: #22d3ee; font-size: 1rem; }

.mc-items { display: flex; flex-direction: column; gap: .4rem; max-height: 240px; overflow-y: auto; }
.mc-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: .6rem; background: rgba(255,255,255,.03); border-radius: 9px; padding: .5rem .6rem; }
.mc-item-off { border: 1px solid rgba(239,68,68,.4); }
.mc-item-logo { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; border: 1px solid rgba(255,255,255,.1); background: #0b0714; color: #f43f5e; font-weight: 900; }
.mc-item-logo img { width: 100%; height: 100%; object-fit: cover; }
.mc-item-info { min-width: 0; display: flex; flex-direction: column; }
.mc-item-name { font-size: .84rem; font-weight: 600; }
.mc-item-info small { color: #9d97b5; font-size: .72rem; }
.mc-aviso { color: #fca5a5 !important; }
.mc-item-sub { font-weight: 700; font-size: .85rem; white-space: nowrap; }

.mc-total { display: flex; justify-content: space-between; align-items: center; padding-top: .3rem; border-top: 1px solid rgba(255,255,255,.1); }
.mc-total b { color: #22d3ee; font-size: 1.15rem; }
.mc-empty { color: #9d97b5; font-size: .82rem; text-align: center; padding: .8rem 0; }
.mc-insuf { color: #fcd34d; font-size: .8rem; }

.mc-btn { display: block; width: 100%; text-align: center; border: none; cursor: pointer; border-radius: 10px; font-weight: 700; font-size: .88rem; padding: .6rem; color: #fff; }
.mc-btn-pay { background: linear-gradient(95deg, #7c3aed, #2563eb); }
.mc-btn-pay:hover { filter: brightness(1.12); }
.mc-btn-cyan { background: linear-gradient(95deg, #0891b2, #22d3ee); color: #04121a; text-decoration: none; }
.mc-btn-cyan:hover { color: #04121a; filter: brightness(1.08); }
.mc-btn-yape { background: #742384; }
.mc-btn-yape:hover { filter: brightness(1.12); }
.mc-pay-form { margin: 0; }
.mc-link { display: block; text-align: center; color: #9d97b5; font-size: .8rem; text-decoration: none; margin-top: .2rem; }
.mc-link:hover { color: #fff; }
.mc-anon { text-align: center; }

/* Móvil: barra sticky inferior expandible */
@media (max-width: 900px) {
    .pd-side { position: static; }
    /* C22 — el minicarrito se APOYA sobre la barra inferior en vez de quedar debajo de ella.
       Antes la barra solo existía en el Inicio justo por este choque; ahora está en todas y, sin
       esto, se comía 501px del panel —incluido "Pagar ahora con saldo", que además dejaba de
       recibir el clic—. --cd-bnav-oc = lo que ocupa la barra, y solo existe donde la barra existe:
       de 768px para arriba el respaldo 0px devuelve el `bottom: 0` de siempre. */
    #pd-minicart {
        position: fixed; left: 0; right: 0; bottom: var(--cd-bnav-oc, 0px); z-index: 40;
        max-height: 80vh; overflow: hidden;
        transform: translateY(calc(100% - 68px));
        transition: transform .22s ease;
    }
    body.mc-open #pd-minicart { transform: translateY(0); }
    #pd-minicart .mc {
        border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.5);
        max-height: 80vh; overflow-y: auto;
    }
    .mc-head { position: sticky; top: 0; cursor: pointer; padding-bottom: .4rem; }
    .mc-head-total { display: inline; color: #22d3ee; font-weight: 800; margin-left: auto; }
    .mc-head strong { flex: 0 0 auto; }
    .mc-chevron { display: inline; color: #9d97b5; transition: transform .2s; }
    body.mc-open .mc-chevron { transform: rotate(180deg); }
    body { padding-bottom: 72px; }
}

/* D3 — Modal Yape manual */
.yape-modal { background: linear-gradient(180deg, #1a1030, #0d0a1a); border: 1px solid rgba(139,92,246,.4); border-radius: 16px; color: #ece9f7; }
.yape-modal-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.yape-modal-head strong { font-size: 1.05rem; }
.yape-x { background: none; border: none; color: #9d97b5; font-size: 1.5rem; cursor: pointer; line-height: 1; }
.yape-x:hover { color: #fff; }
.yape-modal-body { padding: 1.2rem; }
.yape-note { color: #9d97b5; font-size: .82rem; margin-bottom: .8rem; }
.yape-config { color: #fcd34d; text-align: center; }
.yape-qr { display: grid; place-items: center; margin-bottom: .8rem; }
.yape-qr img { width: 190px; height: 190px; object-fit: contain; background: #fff; border-radius: 12px; padding: 6px; }
.yape-info { display: flex; justify-content: center; gap: 1.4rem; margin-bottom: .9rem; font-size: .84rem; }
.yape-info div { display: flex; flex-direction: column; align-items: center; }
.yape-info span { color: #9d97b5; font-size: .72rem; }
#yape-form { display: flex; flex-direction: column; }
#yape-form label { font-size: .74rem; color: #9d97b5; margin: .5rem 0 .2rem; }
#yape-form input { background: #0f0b1e; border: 1px solid rgba(255,255,255,.15); border-radius: 9px; color: #ece9f7; padding: .5rem .7rem; font-size: .9rem; }
#yape-form input:focus { outline: none; border-color: #a855f7; }
#yape-send { margin-top: .9rem; }
.yape-msg { font-size: .78rem; margin-top: .5rem; }
.yape-msg.err { color: #fca5a5; }

/* D3.1 — botón eliminar item del mini carrito */
.mc-item-right { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.mc-item-del { background: none; border: none; color: #9d97b5; cursor: pointer; padding: .15rem; display: grid; place-items: center; border-radius: 6px; }
.mc-item-del svg { width: 16px; height: 16px; }
.mc-item-del:hover { color: #ef4444; background: rgba(239,68,68,.12); }
.mc-item-del:disabled { opacity: .5; cursor: default; }

/* D3.1 — captura en el modal Yape */
.yape-req { color: #fca5a5; }
.yape-hint { color: #9d97b5; font-size: .72rem; margin-top: .2rem; }
#yape-form input[type="file"] { padding: .4rem; font-size: .8rem; color: #cbd5e1; }
#yape-form input[type="file"]::file-selector-button {
    background: #241f33; border: 1px solid rgba(255,255,255,.2); color: #ece9f7;
    border-radius: 7px; padding: .3rem .6rem; margin-right: .5rem; cursor: pointer; font-size: .78rem;
}
#yape-form input[type="file"]::file-selector-button:hover { border-color: #a855f7; }

/* D3.2 — total destacado en el modal de compra por Yape */
.yape-info .yape-total { border-bottom: 1px dashed rgba(255,255,255,.18); padding-bottom: .4rem; margin-bottom: .1rem; }
.yape-info .yape-total b { color: #34d399; font-size: 1.05rem; }

/* D3.3.1 — botones de método tipo "card" en el mini carrito (agrupados) */
.mc-paysec-label { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: #8d86a6; margin: .75rem .1rem .35rem; }
.mc-paybtn { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
    border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: .6rem .7rem; margin-bottom: .45rem;
    background: rgba(255,255,255,.03); color: #ece9f7; cursor: pointer; transition: border-color .12s, transform .06s, background .12s; }
button.mc-paybtn:hover { border-color: var(--mc-cyan, #22d3ee); transform: translateY(-1px); background: rgba(255,255,255,.05); }
.mc-paybtn-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    font-size: .95rem; font-weight: 800; color: #fff; background: rgba(139,92,246,.2); }
.mc-paybtn-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.mc-paybtn-txt b { font-size: .86rem; }
.mc-paybtn-txt small { color: #9d97b5; font-size: .72rem; }
.mc-paybtn-go { flex: 0 0 auto; font-weight: 700; font-size: .78rem; color: var(--mc-cyan, #22d3ee); white-space: nowrap; }
/* Marcas por método */
.mc-paybtn-card .mc-paybtn-ic { background: linear-gradient(135deg, #7c3aed, #2563eb); }
.mc-paybtn-yapeauto .mc-paybtn-ic, .mc-paybtn-yapeman .mc-paybtn-ic { background: #742384; }
.mc-ic-pp { background: #fff !important; color: #003087 !important; font-style: italic; font-size: .78rem; }
.mc-paybtn-off { cursor: default; opacity: .72; border-style: dashed; }
.mc-paybtn-off:hover { transform: none; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.03); }

/* C11.5-D — Aquí estaba el panel .mc-testcreds (tarjeta 4111, CVV y Yape de prueba). Eliminado:
   mostraba datos de juguete a cualquier cliente con sesión iniciada.
   Lo sustituye un aviso de ambiente visible SOLO para administradores. */
.mc-sandbox-warn { margin: -.15rem 0 .55rem; padding: .5rem .6rem; border-radius: 10px;
    border: 1px dashed rgba(252,211,77,.5); background: rgba(252,211,77,.08);
    font-size: .74rem; display: flex; flex-direction: column; gap: .15rem; }
.mc-sandbox-warn b { color: #fcd34d; }
.mc-sandbox-warn span { color: #cbd5e1; }

/* D5.3.1 — aviso de datos requeridos en el mini carrito (bloquea el pago). */
.mc-datos-aviso { padding: .6rem .7rem; border-radius: 10px; border: 1px solid rgba(252, 211, 77, .5); background: rgba(252, 211, 77, .08); margin: .3rem 0 .1rem; }
.mc-datos-aviso-head { font-size: .82rem; font-weight: 700; margin-bottom: .25rem; }
.mc-datos-aviso p { font-size: .76rem; color: #fcd34d; margin: 0 0 .5rem; }
.mc-btn-block { width: 100%; display: block; text-align: center; }

/* ==================== D5.8.0 C3.2 — aceptacion de Terminos en el mini carrito ==================== */
.mc-terms { margin: .5rem 0 .2rem; padding: .55rem .6rem; border: 1px solid rgba(139, 92, 246, .28); border-radius: 10px; background: rgba(139, 92, 246, .06); }
.mc-terms-warn { font-size: .72rem; color: #fcd34d; margin: 0 0 .4rem; }
.mc-terms-link { background: none; border: none; color: var(--cd-cyan, #22d3ee); font-size: .78rem; font-weight: 600; cursor: pointer; padding: 0 0 .35rem; text-decoration: underline; }
.mc-terms-check { display: flex; align-items: flex-start; gap: .45rem; font-size: .74rem; color: var(--cd-text, #e7e7ef); cursor: pointer; line-height: 1.3; }
.mc-terms-check input { margin-top: .15rem; flex: none; width: 16px; height: 16px; cursor: pointer; }

/* Modal "Ver Terminos y condiciones" (construido por JS) */
.pd-terms-ov { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.pd-terms-ov[hidden] { display: none; }
.pd-terms-back { position: absolute; inset: 0; background: rgba(4, 3, 10, .74); backdrop-filter: blur(4px); }
.pd-terms-card { position: relative; width: min(640px, 96vw); max-height: 86vh; overflow: auto; background: linear-gradient(180deg, #14102a, #0d0a1a); border: 1px solid rgba(139, 92, 246, .3); border-radius: 16px; padding: 1.2rem 1.3rem; }
.pd-terms-x { position: absolute; top: .6rem; right: .8rem; background: none; border: none; color: var(--cd-muted, #9a97b5); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.pd-terms-x:hover { color: #fff; }
.pd-terms-card h3 { margin: 0 0 .8rem; font-size: 1.1rem; font-weight: 800; }
.pd-terms-doc { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: .7rem; margin-top: .7rem; }
.pd-terms-doc:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.pd-terms-doc h4 { margin: 0 0 .35rem; font-size: .9rem; font-weight: 700; color: var(--cd-cyan, #67e8f9); }
.pd-terms-doc p { margin: 0; font-size: .84rem; color: var(--cd-text, #e7e7ef); white-space: pre-wrap; word-break: break-word; }
body.pd-noscroll { overflow: hidden; }

@media (max-width: 560px) {
    .pd-terms-card { padding: 1rem; }
    .mc-terms-check { font-size: .72rem; }
}

/* ============================================================
   C27 — MÓVIL (≤767.98px): la tarjeta de plan de la referencia.

   Mismo corte de "celular" que el resto del sitio. Era el diseño de escritorio comprimido: seis
   bloques apilados (icono+estado / título / precio / chips / cantidad / botón) = 301px por plan,
   así que comparar cuatro planes —que es justo lo que se viene a hacer aquí— costaba tres
   pantallas de scroll. La referencia los pone en tres filas:

       [★] Netflix Compartido        AGOTADO
           1 pantalla • HD          S/ 12.00
       [chips]
       [− 1 +]      [Añadir al carrito]

   Todo CSS: el marcado ya traía cada dato, solo estaba apilado. Así el fragmento que /Producto
   intercambia por AJAX al cambiar de servicio sigue funcionando igual.
   ============================================================ */
@media (max-width: 767.98px) {
    .pd-offer {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "ic    nombre estado"
            "ic    sub    precio"
            "chips chips  chips"
            "acc   acc    acc";
        align-items: center;
        gap: .25rem .6rem;
        padding: .75rem .8rem;
    }
    /* Cantidad y botón, en la MISMA fila. Van dentro de .pd-actions y no sueltos en la rejilla
       porque, sueltos, la cantidad compartiría columna con el icono y la ensancharía a 96px,
       separando el título del plan de su logo. */
    .pd-actions { grid-area: acc; display: flex; align-items: center; gap: .5rem; margin-top: .3rem; }
    .pd-actions .pd-btn-add { flex: 1 1 auto; }
    /* Disuelve la cabecera: el icono y el estado pasan a ser items de la rejilla del plan y así
       pueden separarse (uno a cada extremo). Juntos no podrían: son hermanos dentro de ella. */
    .pd-offer-head { display: contents; }
    .pd-offer-ic { grid-area: ic; width: 34px; height: 34px; }
    .pd-estado { grid-area: estado; justify-self: end; align-self: center; }
    .pd-offer > h3 { grid-area: nombre; align-self: end; margin: 0; font-size: .92rem; }
    .pd-offer-sub { grid-area: sub; align-self: start; margin: 0; font-size: .68rem; }

    .pd-price { grid-area: precio; justify-self: end; align-self: start; margin: 0; gap: .2rem; }
    .pd-amount { font-size: 1.05rem; }
    /* "PEN" al lado del símbolo es redundante y aquí roba el ancho del precio. */
    .pd-code { display: none; }
    .pd-old { font-size: .62rem; }

    .pd-chips { grid-area: chips; gap: .25rem; margin: .35rem 0 .1rem; }
    .pd-chip { font-size: .58rem; padding: .16rem .4rem; }

    /* C45 — el bloque de "Términos y condiciones" se ELIMINÓ de la página de producto (ya no existe
       .pd-terms-block en el markup): los Términos reales, con su casilla de aceptación, viven en el
       carrito de pago. Y "Renovación automática" (.pd-renew) ahora se muestra solo cuando la oferta
       trae la renovación ACTIVA por defecto; el JS la oculta con [hidden] cuando está en OFF (el
       checkbox queda desmarcado => autoRenovar=false, sin renovación silenciosa). */

    .pd-qty { margin: 0; gap: .3rem; flex: 0 0 auto; }
    .pd-qty > span { display: none; }   /* el "Cantidad" sobra: los −/+ ya lo dicen */
    .pd-qty-btn { width: 28px; height: 28px; }
    .pd-qty-value { width: 30px; }
    .pd-btn-add { margin: 0; padding: .55rem .7rem; font-size: .78rem; }

    /* ---------- C29 — El carrito es un MODAL, y lo abre "Añadir al carrito" ----------
       Historia: era un panel fijo abajo que asomaba 68px y habia que descubrir que se desplegaba
       (C28 lo bajo al flujo, abierto). Ahora va a modal, como el de donacion: la pagina se queda
       limpia con los planes, y al anadir se abre encima TODO lo de la compra —carrito, los 4
       metodos y los Terminos— con sitio de sobra. Asi los Terminos dejan de comerse la pagina sin
       tener que recortar su texto, que es el consentimiento de WhatsApp y no se puede resumir.

       z-index 100: por encima de la cabecera y de la barra inferior (las dos en 50), y por debajo
       del overlay de Terminos (1200) y de Culqi (~2147483000), que deben poder abrirse ENCIMA. */
    #pd-minicart {
        position: fixed;
        inset: 0;
        bottom: 0;
        z-index: 100;
        display: none;
        /* .pd-side ya es `flex-direction: column`, así que quien baja la hoja al fondo es
           justify-content (el eje principal), no align-items: con column, align-items alinea en
           HORIZONTAL y dejaba la hoja pegada arriba, sin fondo oscuro visible. */
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
        max-height: none;
        overflow: visible;
        margin: 0;
        transform: none !important;   /* gana al translateY del panel plegado y al de body.mc-open */
        background: rgba(4, 3, 10, .74);
        backdrop-filter: blur(4px);
    }
    body.pd-cart-open #pd-minicart { display: flex; }
    /* Hoja inferior: sube desde abajo, como es costumbre en movil. */
    #pd-minicart .mc {
        width: 100%;
        max-height: 88vh;
        overflow-y: auto;
        border-radius: 18px 18px 0 0;
        animation: pd-cart-up .22s ease-out;
    }
    /* .mc es flex en columna: al topar con el max-height de la hoja, sus hijos se encogen. La
       lista de articulos, que ademas lleva su propio overflow, se quedaba en 52px de 110 y
       escondia el articulo y su papelera justo cuando hay que revisar lo que se compra. Que no
       encoja: quien scrollea es la hoja entera. */
    #pd-minicart .mc-items {
        flex-shrink: 0;
        max-height: none;
        overflow: visible;
    }
    /* La cabecera "Mi carrito · S/ 5.00 ▲" era el tirador del desplegable: dentro del modal sobra.
       El total y el saldo siguen dentro, en su fila. */
    #pd-minicart .mc-head { display: none; }
    /* El hueco que reservaba el body para el panel plegado ya no hace falta. */
    body { padding-bottom: 0; }
    /* Con el modal abierto, el fondo no se mueve. */
    body.pd-cart-open { overflow: hidden; }

    /* Sticky dentro de la hoja: la × sigue a mano aunque se baje por los métodos de pago. */
    .mc-modal-bar {
        position: sticky; top: 0; z-index: 2;
        display: flex; align-items: center; justify-content: space-between;
        margin: -.9rem -.9rem .6rem;   /* muerde el padding de .mc para pegarse a los bordes */
        padding: .7rem .9rem;
        background: var(--cd-surface, #0d0a17);
        border-bottom: 1px solid var(--cd-line, rgba(139, 92, 246, .28));
        border-radius: 18px 18px 0 0;
    }
    .mc-modal-tit { font-weight: 800; font-size: .92rem; color: #fff; }
    .mc-modal-x {
        width: 32px; height: 32px; border-radius: 50%;
        border: 1px solid var(--cd-line, rgba(139, 92, 246, .28));
        background: rgba(255, 255, 255, .05); color: #cbd5e1;
        font-size: 1.2rem; line-height: 1; cursor: pointer;
        display: grid; place-items: center;
    }
    @keyframes pd-cart-up { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }

    /* ---------- C31 — Terminos en UNA linea ----------
       Medían 172px de las tres piezas: aviso ámbar (35) + consentimiento (75) + mensaje de
       bloqueo (30). El consentimiento se queda —solo cambia por su versión corta, que sigue
       nombrando las DOS cosas que sella: Términos y WhatsApp—, y el texto íntegro sigue a un
       toque en "Ver Términos y condiciones", que ya existía. Las otras dos piezas se aprietan:
       no son consentimiento, son aviso e instrucción. */
    .mc-terms-larga { display: none; }
    .mc-terms-corta { display: block; font-size: .72rem; line-height: 1.3; }
    .mc-terms-corta b { color: #c4b5fd; font-weight: 800; }
    .mc-terms-check { align-items: center; gap: .5rem; }
    /* El enlace para leerlo entero, arriba y bien visible: es el camino a la letra pequeña. */
    .mc-terms-link { font-size: .72rem; padding: 0; margin-bottom: .35rem; }
    .mc-terms-warn { font-size: .64rem; line-height: 1.3; margin: 0 0 .35rem; }
    .terms-gate-msg { font-size: .64rem; line-height: 1.3; margin-top: .35rem; }

    /* ---------- Los 4 metodos EN FILA, bajo un solo titulo ---------- */
    .mc-pays {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .35rem;
        margin: .5rem 0 .2rem;
    }
    /* Los tres titulos ("Pago automatico" / "Pago manual" / "Otros") se cambian por uno solo, como
       la referencia. El ::before lo pone la rejilla, asi no hay que tocar el marcado. */
    .mc-pays .mc-paysec-label { display: none; }
    .mc-pays::before {
        content: "MÉTODOS DE PAGO";
        grid-column: 1 / -1;
        order: -1;
        font-size: .58rem; font-weight: 800; letter-spacing: .1em;
        color: var(--cd-muted, #9d97b5);
        margin-bottom: .1rem;
    }
    /* El panel de datos de prueba (solo sandbox) va INTERCALADO en el marcado, entre Yape
       automático y Yape manual. Como ocupa la fila entera, partía la rejilla en dos y dejaba los
       métodos en filas distintas. `order` lo manda al final sin tocar el marcado ni el escritorio. */
    .mc-pays .mc-paybtn { order: 0; }
    /* Tarjeta vertical: icono, nombre y detalle, como la referencia. */
    .mc-pays .mc-paybtn {
        flex-direction: column; align-items: flex-start;
        gap: .3rem; margin: 0; padding: .5rem .4rem;
        min-width: 0; text-align: left;
    }
    .mc-pays .mc-paybtn-ic { width: 26px; height: 26px; font-size: .7rem; flex: 0 0 auto; }
    .mc-pays .mc-paybtn-txt { min-width: 0; }
    .mc-pays .mc-paybtn-txt b { font-size: .58rem; line-height: 1.15; display: block; }
    .mc-pays .mc-paybtn-txt small { font-size: .48rem; line-height: 1.2; display: block; }
    /* "Pagar →" sobra: la tarjeta entera ya es el boton, y en 80px no cabe. */
    .mc-pays .mc-paybtn-go { display: none; }
    /* Los datos de prueba (solo sandbox) no son un metodo: a su propia fila y detras de los cuatro. */
    .mc-pays .mc-sandbox-warn { grid-column: 1 / -1; order: 1; }
}

/* ==================== D5.8.0 C3.4 — bloqueo de pagos hasta aceptar Terminos ==================== */
.terms-gate-msg { margin: .45rem 0 0; font-size: .72rem; color: #fcd34d; line-height: 1.3; }
.terms-gate-msg[hidden] { display: none; }
/* Boton de pago realmente deshabilitado por Terminos (ademas de button.disabled): apariencia. */
.is-terms-locked, button.is-terms-locked, .mc-paybtn.is-terms-locked { opacity: .5; cursor: not-allowed; filter: grayscale(.25); }
/* Brillo pulsante del checkbox mientras NO se acepta; se apaga al marcar (clase .terms-accepted). */
.mc-terms:not(.terms-accepted) .js-terms-accept,
.cart-terms:not(.terms-accepted) .js-terms-accept {
    outline: 2px solid rgba(139, 92, 246, .85); outline-offset: 2px; border-radius: 4px;
    animation: terms-glow 1.5s ease-in-out infinite;
}
@keyframes terms-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, .6); }
    50% { box-shadow: 0 0 0 7px rgba(139, 92, 246, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .mc-terms:not(.terms-accepted) .js-terms-accept,
    .cart-terms:not(.terms-accepted) .js-terms-accept { animation: none; }
}

/* ===== C14-G — botón "PLIN, YAPE QR" (celeste) en el mini carrito ===== */
.mc-paybtn-qr { border-color: rgba(56, 189, 248, .45); background: rgba(56, 189, 248, .06); }
button.mc-paybtn-qr:hover { border-color: #38bdf8; background: rgba(56, 189, 248, .12); }
.mc-paybtn-qr .mc-paybtn-txt b { color: #7dd3fc; }
.mc-paybtn-qr .mc-paybtn-go { color: #38bdf8; }
.mc-ic-qr { background: linear-gradient(135deg, #0284c7, #38bdf8); color: #fff; }

/* ============================================================================
   C44 — Ofertas en FILAS horizontales (rediseño a pedido del cliente).
   Cada oferta: [logo] [info: título + badges + chips] [cantidad] [precio] [botones].
   Va al final para ganar por orden a las reglas de tarjeta de arriba.
   ============================================================================ */
.pd-offers { grid-template-columns: 1fr; gap: .8rem; }

.pd-offer {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto auto minmax(150px, auto);
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.1rem;
    cursor: pointer;
}
.pd-offer.selected { box-shadow: 0 0 0 1px var(--ac-soft), 0 0 18px var(--ac-dim); }

/* Logo del servicio */
.pd-offer-logo { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #0b0714; border: 1px solid rgba(255,255,255,.08); }
.pd-offer-logo img { width: 100%; height: 100%; object-fit: cover; }
.pd-offer-logo-ini { font-size: 1.6rem; font-weight: 800; color: var(--ac); }

/* Info: título + badges + chips */
.pd-offer-info { min-width: 0; }
.pd-offer-titlebar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.pd-offer-titlebar h3 { font-size: 1.05rem; font-weight: 800; margin: 0; color: #fff; }
.pd-tag { display: inline-flex; align-items: center; gap: .25rem; font-size: .66rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; padding: .18rem .5rem; border-radius: 6px; }
.pd-tag-green { background: rgba(34,197,94,.16); color: #4ade80; }
.pd-tag-purple { background: rgba(139,92,246,.18); color: #c4b5fd; }
.pd-offer-info .pd-chips { margin: .45rem 0 0; }
.pd-offer .pd-estado[hidden] { display: none !important; }

/* Cantidad */
.pd-offer .pd-qty { flex-direction: column; align-items: center; gap: .3rem; margin: 0; }
.pd-offer .pd-qty > .pd-qty-btn, .pd-offer .pd-qty > .pd-qty-value { display: inline-block; }
.pd-qty-min { font-size: .66rem; color: var(--cd-muted); }
/* fila real de −/valor/+ dentro de la columna cantidad */
.pd-offer .pd-qty { display: grid; grid-template-columns: 30px 40px 30px; grid-auto-rows: auto; justify-items: center; align-items: center; column-gap: .25rem; }
.pd-offer .pd-qty .pd-qty-minus { grid-column: 1; }
.pd-offer .pd-qty .pd-qty-value { grid-column: 2; }
.pd-offer .pd-qty .pd-qty-plus { grid-column: 3; }
.pd-offer .pd-qty .pd-qty-min { grid-column: 1 / -1; }

/* Precio */
.pd-offer .pd-price { margin: 0; justify-content: flex-end; white-space: nowrap; }

/* Botones apilados */
.pd-offer-btns { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }
.pd-offer-btns .pd-btn-add, .pd-offer-btns .pd-btn-pay { margin: 0; width: 100%; justify-content: center; }
/* "Comprar ahora" (pd-pay) visible SIEMPRE (antes era solo móvil). */
.pd-offer-btns .pd-btn-pay { display: inline-flex; }
.pd-offer-btns .pd-lbl-cart { display: none; }   /* en fila cabe el texto completo */

/* Responsive: en pantallas chicas la fila se apila. */
@media (max-width: 720px) {
    .pd-offer { grid-template-columns: 48px 1fr; grid-template-areas: "logo info" "qty price" "btns btns"; row-gap: .7rem; }
    .pd-offer-logo { grid-area: logo; width: 48px; height: 48px; }
    .pd-offer-info { grid-area: info; }
    .pd-offer .pd-qty { grid-area: qty; justify-self: start; }
    .pd-offer .pd-price { grid-area: price; justify-self: end; }
    .pd-offer-btns { grid-area: btns; flex-direction: row; }
    .pd-offer-btns .pd-btn-add, .pd-offer-btns .pd-btn-pay { flex: 1 1 0; }
}

/* ============================================================================
   Carrito y pasarela bajo demanda.
   La página de producto queda a ancho completo y el MiniCarrito solo aparece
   como modal después de "Comprar ahora" o "Agregar al carrito".
   ============================================================================ */
.pd-wrap {
    max-width: 1240px;
    grid-template-columns: minmax(0, 1fr);
}

#pd-minicart {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    flex-direction: row;
    /* El cliente lo pidió EN MEDIO DE LA PANTALLA: modal centrado (antes era cajón a la derecha). */
    justify-content: center;
    align-items: center;
    max-height: none;
    overflow: hidden;
    margin: 0;
    padding: 1rem;
    transform: none !important;
    background: rgba(4, 3, 10, .76);
    backdrop-filter: blur(4px);
}

body.pd-cart-open {
    overflow: hidden;
}

body.pd-cart-open #pd-minicart {
    display: flex;
}

#pd-minicart .mc {
    width: min(460px, 96vw);
    height: auto;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
    animation: pd-cart-pop .2s ease-out;
}
@keyframes pd-cart-pop { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }

#pd-minicart .mc-head {
    display: none;
}

#pd-minicart .mc-items {
    flex-shrink: 0;
}

.mc-modal-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -.9rem -.9rem .75rem;
    padding: .85rem .95rem;
    background: rgba(15, 11, 30, .97);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.mc-modal-tit {
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
}

.mc-modal-x {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    color: #c8c4d7;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.mc-modal-x:hover {
    border-color: rgba(139, 92, 246, .7);
    color: #fff;
}

@keyframes pd-cart-from-right {
    from { transform: translateX(28px); opacity: .65; }
    to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 767.98px) {
    #pd-minicart {
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
        overflow: visible;
    }

    #pd-minicart .mc {
        width: 100%;
        height: auto;
        max-height: 88vh;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
        animation: pd-cart-up .22s ease-out;
    }
}

/* Botón inferior que aparece al agregar productos y lleva al carrito completo. */
.pd-paytotal-bar {
    display: none;
}

.pd-paytotal-mobile {
    display: none;
}

.pd-paytotal-bar.is-visible {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--cd-bnav-oc, 0px);
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .9rem 1rem;
    border: 0;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-decoration: none;
}

.pd-paytotal-bar svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

body.pd-has-cart {
    padding-bottom: calc(var(--cd-bnav-oc, 0px) + 56px) !important;
}

body.pd-cart-open .pd-paytotal-bar {
    display: none;
}

/* Diego: la barra inferior "COMPRAR/PAGAR TOTAL" se OCULTA por completo (PC y móvil). El pago se
   hace desde el ícono del carrito de arriba (que ahora resalta con brillo cuando hay productos).
   Sin barra no se reserva su espacio: el padding vuelve a 0 para no dejar hueco al fondo. */
.pd-paytotal-bar.is-visible { display: none !important; }
body.pd-has-cart { padding-bottom: 0 !important; }

/* Restauración móvil: conserva el resumen; el logo y el enlace directo a /Carrito
   son mejoras exclusivas de escritorio. */
@media (max-width: 767.98px) {
    /* La barra inferior ya se oculta globalmente (regla de arriba, PC+móvil); aquí solo queda el
       intercambio de etiqueta por si algún día se reactivara. */
    .pd-paytotal-desktop {
        display: none;
    }

    .pd-paytotal-mobile {
        display: inline;
    }

    .mc-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .5rem;
        padding: .45rem .6rem;
    }

    .mc-item-logo {
        display: none;
    }
}

/* ============================================================
   Checkout modal — REFRESCO ELEGANTE (solo estética).
   El cliente pidió un aspecto "más bonito y elegante".
   No cambia el flujo de compra ni los métodos de pago.
   ============================================================ */
#pd-minicart .mc {
    background:
        radial-gradient(135% 95% at 50% -12%, #1d1638 0%, #130f27 44%, #0a0716 100%);
    border: 1px solid rgba(168, 132, 255, .28);
    border-radius: 20px;
    padding: 1.1rem;
    gap: .7rem;
    box-shadow:
        0 34px 90px rgba(0, 0, 0, .62),
        0 4px 18px rgba(124, 58, 237, .18),
        inset 0 1px 0 rgba(255, 255, 255, .06);
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 132, 255, .4) transparent;
}

    #pd-minicart .mc::-webkit-scrollbar {
        width: 8px;
    }

    #pd-minicart .mc::-webkit-scrollbar-thumb {
        background: rgba(168, 132, 255, .32);
        border-radius: 8px;
    }

    #pd-minicart .mc::-webkit-scrollbar-track {
        background: transparent;
    }

/* Cabecera. */
.mc-modal-bar {
    margin: -1.1rem -1.1rem .85rem;
    padding: .9rem 1.1rem;
    background: linear-gradient(180deg, rgba(28, 21, 52, .98), rgba(19, 14, 34, .72));
    border-bottom: 1px solid rgba(168, 132, 255, .18);
    border-radius: 20px 20px 0 0;
}

.mc-modal-tit {
    font-size: 1.14rem;
    font-weight: 800;
    letter-spacing: -.01em;
    background: linear-gradient(90deg, #ffffff, #d8caff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mc-modal-x {
    transition: background .14s, color .14s, border-color .14s, transform .2s;
}

    .mc-modal-x:hover {
        background: rgba(244, 63, 94, .15);
        border-color: rgba(244, 63, 94, .5);
        color: #fff;
        transform: rotate(90deg);
    }

/* Ítem del carrito: leve realce al pasar el mouse. */
.mc-item {
    border: 1px solid transparent;
    transition: background .12s, border-color .12s;
}

    .mc-item:hover {
        background: rgba(255, 255, 255, .05);
        border-color: rgba(168, 132, 255, .18);
    }

/* Total: número en degradé, más protagonismo. */
.mc-total {
    margin-top: .1rem;
    padding: .6rem .15rem .2rem;
    border-top: 1px dashed rgba(255, 255, 255, .1);
}

    .mc-total > span {
        color: #c9c3e0;
        font-weight: 600;
    }

    .mc-total b {
        font-size: 1.42rem;
        font-weight: 900;
        letter-spacing: -.01em;
        background: linear-gradient(90deg, #a855f7 0%, #22d3ee 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

/* Etiqueta de sección "Elige tu forma de pago". */
.mc-paysec-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .95rem .15rem .55rem;
    color: #a79fc4;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
}

    .mc-paysec-label::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
        opacity: .55;
    }

/* Métodos de pago: tarjetas premium con elevación al hover. */
.mc-paybtn {
    border-radius: 14px;
    padding: .74rem .82rem;
    margin-bottom: .5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    border: 1px solid rgba(255, 255, 255, .1);
    transition: border-color .14s, transform .1s, box-shadow .16s, background .16s;
}

    button.mc-paybtn:hover,
    a.mc-paybtn:hover {
        border-color: rgba(168, 132, 255, .55);
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(124, 58, 237, .26);
        background: linear-gradient(180deg, rgba(168, 132, 255, .13), rgba(255, 255, 255, .02));
    }

.mc-paybtn-ic {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .32);
}

.mc-paybtn-txt b {
    font-size: .9rem;
    letter-spacing: -.005em;
}

.mc-paybtn-go {
    display: inline-flex;
    align-items: center;
    transition: transform .16s, color .14s;
}

    button.mc-paybtn:hover .mc-paybtn-go,
    a.mc-paybtn:hover .mc-paybtn-go {
        transform: translateX(3px);
        color: #fff;
    }

/* Botón "Pagar con saldo". */
.mc-btn-pay {
    border-radius: 12px;
    padding: .74rem;
    letter-spacing: .01em;
    box-shadow: 0 10px 24px rgba(124, 58, 237, .3);
    transition: transform .1s, box-shadow .16s, filter .16s;
}

    .mc-btn-pay:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(124, 58, 237, .4);
        filter: brightness(1.06);
    }

/* Sello de confianza al pie (lo agrega el componente MiniCarrito). */
.mc-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: .5rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: #8f88a8;
    font-size: .74rem;
}

    .mc-secure svg {
        width: 14px;
        height: 14px;
        color: #34d399;
        flex: none;
    }

/* ============================================================================
   CHECKOUT "FINALIZAR COMPRA" — dos columnas (reemplaza el layout angosto).
   Estas reglas van al final: al empatar en especificidad con las anteriores,
   ganan. Solo estética + layout; los flujos de cobro no cambian.
   ============================================================================ */
#pd-minicart .mc {
    width: min(940px, 96vw);
    max-height: 92vh;
    padding: 0;
    gap: 0;
    border-radius: 20px;
    background: radial-gradient(120% 70% at 50% -8%, #171225 0%, #0f0c1d 46%, #0a0714 100%);
    border: 1px solid rgba(139, 92, 246, .24);
    box-shadow: 0 36px 96px rgba(0, 0, 0, .64), inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* ---- Cabecera ---- */
.mc-hd {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.15rem;
    background: linear-gradient(180deg, rgba(23, 18, 37, .99), rgba(15, 12, 29, .96));
    border-bottom: 1px solid rgba(139, 92, 246, .18);
    border-radius: 20px 20px 0 0;
}

.mc-hd-ic {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 12px;
    background: rgba(139, 92, 246, .16);
    border: 1px solid rgba(139, 92, 246, .4);
    color: #c4b5fd;
}

    .mc-hd-ic svg { width: 22px; height: 22px; }

.mc-hd-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.mc-hd-tit {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.15;
    background: linear-gradient(90deg, #ffffff, #d8caff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mc-hd-sub { font-size: .8rem; color: #8b86a0; }

/* ---- Rejilla de dos columnas ---- */
.mc-co {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 14px;
    padding: 1.1rem;
    align-items: start;
}

.mc-co-left,
.mc-co-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ---- Saldo ---- */
.mc-saldo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin: 0;
    padding: .65rem .85rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
}

    .mc-saldo span {
        display: flex;
        align-items: center;
        gap: .5rem;
        color: #c9c3e0;
        font-size: .86rem;
    }

    .mc-saldo span svg { width: 18px; height: 18px; color: #8b86a0; flex: none; }

    .mc-saldo b { color: #22d3ee; font-size: 1rem; }

/* ---- Resumen de pedido ---- */
.mc-summary {
    padding: .85rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .08);
}

.mc-summary-tit { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .55rem; }

.mc-summary .mc-items { display: flex; flex-direction: column; }

.mc-summary .mc-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 0;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

    .mc-summary .mc-item:last-child { border-bottom: 0; }

    .mc-summary .mc-item:hover { background: none; }

.mc-summary .mc-item-logo {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 9px;
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-weight: 700;
}

    .mc-summary .mc-item-logo img { width: 100%; height: 100%; object-fit: cover; }

.mc-summary .mc-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.mc-summary .mc-item-name { color: #fff; font-size: .88rem; font-weight: 600; }

.mc-summary .mc-item-info small { color: #8b86a0; font-size: .74rem; }

.mc-summary .mc-item-info small.mc-aviso { color: #fcd34d; }

.mc-summary .mc-item-right { display: flex; align-items: center; gap: .5rem; flex: none; }

.mc-summary .mc-item-sub { color: #fff; font-size: .88rem; }

.mc-summary .mc-item-del {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #6f6a82;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .mc-summary .mc-item-del svg { width: 15px; height: 15px; }

    .mc-summary .mc-item-del:hover { background: rgba(244, 63, 94, .14); color: #fda4af; }

.mc-subtotal {
    display: flex;
    justify-content: space-between;
    margin-top: .65rem;
    color: #8b86a0;
    font-size: .82rem;
}

.mc-summary .mc-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .5rem;
    padding: .5rem 0 0;
    border-top: 1px dashed rgba(255, 255, 255, .12);
}

    .mc-summary .mc-total > span { color: #e9e5f5; font-weight: 600; font-size: 1.02rem; }

    .mc-summary .mc-total b {
        font-size: 1.4rem;
        font-weight: 900;
        letter-spacing: -.01em;
        background: linear-gradient(90deg, #a855f7, #22d3ee);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

/* ---- Términos ---- */
#pd-minicart .mc-terms {
    padding: .7rem .85rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .08);
}

/* ---- Aviso de saldo insuficiente / bloqueo ---- */
.mc-insuf {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .8rem;
    border-radius: 12px;
    background: rgba(245, 158, 11, .1);
    border: 1px solid rgba(245, 158, 11, .4);
    color: #fcd34d;
    font-size: .82rem;
}

    .mc-insuf svg { width: 18px; height: 18px; flex: none; }

    .mc-insuf b { color: #fde68a; font-weight: 700; }

/* ---- Enlaces auxiliares ---- */
.mc-links { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: 0 .1rem; }

.mc-link-recargar { color: #7fe9f5; font-size: .82rem; text-decoration: none; }

    .mc-link-recargar:hover { text-decoration: underline; }

#pd-minicart .mc-link { color: #8b86a0; font-size: .8rem; text-decoration: none; margin: 0; }

    #pd-minicart .mc-link:hover { color: #c9c3e0; }

/* ---- Cabecera de la columna de pago ---- */
.mc-pay-head { display: flex; flex-direction: column; }

.mc-pay-head-tit { font-size: 1rem; font-weight: 700; color: #fff; }

.mc-pay-head-sub { font-size: .78rem; color: #8b86a0; }

/* ---- Filas de método (radio) ---- */
.mc-methods { display: flex; flex-direction: column; gap: 9px; }

.mc-mrow {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .72rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .1);
    cursor: pointer;
    transition: border-color .14s, background .14s, transform .08s;
}

    .mc-mrow:hover { border-color: rgba(168, 132, 255, .45); }

    .mc-mrow:active { transform: scale(.995); }

    .mc-mrow:focus-within { outline: 2px solid rgba(168, 132, 255, .55); outline-offset: 2px; }

.mc-mradio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.mc-mrow:has(.mc-mradio:checked) {
    background: rgba(139, 92, 246, .1);
    border-color: rgba(139, 92, 246, .7);
    box-shadow: 0 8px 22px rgba(124, 58, 237, .18);
}

.mc-mrow-ic {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 9px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .32);
}

    .mc-mrow-ic svg { width: 18px; height: 18px; }

.mc-ic-card { background: #1e293b; color: #60a5fa; }
.mc-ic-y { background: #7b2ff7; color: #fff; }
.mc-ic-qr { background: #0e7490; color: #a5f3fc; }
.mc-ic-binance { background: #111827; color: #F0B90B; }
.mc-ic-saldo { background: #0f766e; color: #99f6e4; }

.mc-mrow-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }

    .mc-mrow-tx b { color: #fff; font-size: .86rem; font-weight: 600; }

    .mc-mrow-tx small { color: #8b86a0; font-size: .72rem; }

.mc-mrow-dot {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .28);
    transition: border-color .14s;
}

.mc-mrow:has(.mc-mradio:checked) .mc-mrow-dot { border-color: #a855f7; }

    .mc-mrow:has(.mc-mradio:checked) .mc-mrow-dot::after {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #a855f7;
    }

/* ---- Aviso Sandbox ---- */
#pd-minicart .mc-sandbox-warn {
    border: 1px dashed rgba(139, 92, 246, .45);
    border-radius: 12px;
    padding: .55rem .75rem;
    color: #c4b5fd;
    font-size: .76rem;
    line-height: 1.4;
}

    #pd-minicart .mc-sandbox-warn b { color: #ddd0ff; font-weight: 700; display: block; }

/* ---- Botón Finalizar compra ---- */
.mc-btn-finalizar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    margin-top: .2rem;
    padding: .85rem;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    box-shadow: 0 12px 30px rgba(124, 58, 237, .42);
    color: #fff;
    font-size: .96rem;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform .1s, box-shadow .16s, filter .16s;
}

    .mc-btn-finalizar svg { width: 17px; height: 17px; }

    .mc-btn-finalizar:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(124, 58, 237, .5); filter: brightness(1.05); }

    .mc-btn-finalizar:active { transform: translateY(0); }

/* Atenúa Finalizar mientras los Términos estén presentes y NO aceptados (sigue clicable:
   al pulsarlo, el handler muestra el aviso y enfoca la casilla). */
.mc:has(.mc-terms:not(.terms-accepted)) .mc-btn-finalizar { opacity: .55; }

/* Disparadores reales de cobro: ocultos (conservan handlers + gate de Términos). */
.mc-real-triggers { display: none; }

/* ---- Mensaje cuando el pago está bloqueado (datos/ítems) ---- */
.mc-pay-blocked {
    padding: .8rem .9rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px dashed rgba(255, 255, 255, .14);
    color: #a79fc4;
    font-size: .84rem;
}

/* ---- Pie de confianza (3 sellos) ---- */
.mc-trust {
    display: flex;
    justify-content: space-between;
    gap: .4rem;
    margin-top: .35rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.mc-trust-it { display: flex; align-items: center; gap: .35rem; color: #8b86a0; font-size: .68rem; }

    .mc-trust-it svg { width: 16px; height: 16px; flex: none; }

    .mc-trust-it:nth-child(1) svg { color: #34d399; }
    .mc-trust-it:nth-child(2) svg { color: #60a5fa; }
    .mc-trust-it:nth-child(3) svg { color: #a855f7; }

    .mc-trust-it span { display: flex; flex-direction: column; line-height: 1.2; }

    .mc-trust-it b { color: #c9c3e0; font-weight: 600; }

/* Lista de pedidos: se ven ~5; el resto entra con scroll interno. */
.mc-summary .mc-items {
    max-height: 300px;
    overflow-y: auto;
    margin-right: -.3rem;
    padding-right: .3rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 132, 245, .4) transparent;
}

    .mc-summary .mc-items::-webkit-scrollbar { width: 7px; }

    .mc-summary .mc-items::-webkit-scrollbar-thumb { background: rgba(168, 132, 245, .32); border-radius: 7px; }

    .mc-summary .mc-items::-webkit-scrollbar-track { background: transparent; }

/* Stepper +/− de cantidad. */
.mc-qty {
    display: inline-flex;
    align-items: center;
    flex: none;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 9px;
    overflow: hidden;
    background: rgba(255, 255, 255, .03);
}

.mc-qty-btn {
    display: grid;
    place-items: center;
    width: 24px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #c9c3e0;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .mc-qty-btn:hover:not(:disabled) { background: rgba(168, 132, 245, .2); color: #fff; }

    .mc-qty-btn:disabled { opacity: .3; cursor: default; }

.mc-qty-val {
    min-width: 24px;
    text-align: center;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
}

/* ---- Móvil: una sola columna ---- */
@media (max-width: 767.98px) {
    #pd-minicart .mc { width: 100%; max-height: 90vh; }

    .mc-co { grid-template-columns: 1fr; gap: 12px; padding: .9rem; }

    .mc-hd { padding: .85rem .95rem; }

    .mc-hd-tit { font-size: 1.08rem; }

    .mc-trust { flex-direction: column; gap: .5rem; }

    /* En móvil la lista puede ocupar más alto (el modal es más angosto y alto). */
    .mc-summary .mc-items { max-height: 46vh; }
}

/* La animación de entrada del modal corre SOLO al abrir (clase transitoria pd-cart-opening en
   <body>), NO en cada refresco del contenido → el modal permanece firme al cambiar cantidad o
   quitar ítems (antes se reproducía el "pop" en cada re-render y parpadeaba). */
#pd-minicart .mc { animation: none; }

body.pd-cart-opening #pd-minicart .mc { animation: pd-cart-pop .2s ease-out; }

@media (max-width: 767.98px) {
    body.pd-cart-opening #pd-minicart .mc { animation: pd-cart-up .22s ease-out; }
}