/* Planes v3 (Básico, Pro y Cadena): lista de funciones con ✅ y 🔒, el Pro destacado y el mensaje del dinero.
   Lo usan la portada, el registro, la activación y «Mi plan». */

/* ---------- Lista de funciones (partial _PlanFeatures) ---------- */
.plan-features { list-style: none; padding: 0; margin: 0; font-size: .9rem; color: var(--cocoa); }
.plan-features li { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; line-height: 1.35; }
.plan-features .pf-ico { flex: 0 0 1.35em; text-align: center; font-size: .95em; line-height: 1.35; }
.plan-features .pf-txt { min-width: 0; }
.plan-features .pf-txt small { display: block; color: var(--muted); font-size: .8em; line-height: 1.3; margin-top: 1px; }
.plan-features .pf-lock { color: var(--muted); }
.plan-features .pf-lock a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.plan-features .pf-lock a:hover { color: var(--brand-deep); }
.plan-features .pf-txt .pf-upsell { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; font-weight: 800; font-size: .74em;
    background: #fff3d6; color: #7a4a00; }
.plan-features .pf-note { color: var(--muted); }
.plan-features .pf-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: .7em; font-weight: 800; vertical-align: 1px;
    background: var(--basil-soft); color: #173d27; white-space: nowrap; }
.plan-features.compact { font-size: .8rem; }
.plan-features.compact li { padding: 3px 0; }

/* ---------- Registro: el Pro destacado y lo que incluye el plan elegido ---------- */
/* El recomendado solo lleva su estrella; el relleno y el borde fuerte son SOLO del plan elegido (antes se veían iguales). */
.pp-opt.featured .pp-card { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); background: var(--paper); }
.pp-opt input:checked + .pp-card, .pp-opt.featured input:checked + .pp-card {
    border: 2px solid var(--brand); background: var(--brand-soft);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent), 0 16px 32px -22px color-mix(in srgb, var(--brand) 80%, transparent); }
.pp-opt .pp-card[data-chosen]::before { content: none; }
.pp-opt input:checked + .pp-card[data-chosen]::before {
    content: "✓ " attr(data-chosen); position: absolute; top: -11px; left: 10px; z-index: 1; padding: 2px 9px; border-radius: 999px;
    background: var(--brand); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.pp-opt input:not(:checked) + .pp-card { opacity: .9; }
.pp-opt:hover input:not(:checked) + .pp-card { opacity: 1; border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.pp-opt .pp-badge.star { background: linear-gradient(90deg, var(--saffron), var(--brand)); }
.pp-features { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--cream); border: 1px solid var(--line); }
.pp-features[hidden] { display: none; }
.pp-features-head { display: block; font-size: .8rem; font-weight: 800; color: var(--espresso); }
.pp-features-price { display: block; font-size: .76rem; font-weight: 700; color: var(--basil); margin-bottom: 4px; }
.pp-money { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 0 2px; color: var(--basil); font-size: .84rem; font-weight: 700; line-height: 1.35; }
.pp-trial small { opacity: .85; }

/* ---------- Activación: tres planes ---------- */
@media (min-width: 768px) { .activate-plans.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Pagar con tarjeta (Stripe) o con Mercado Pago */
.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.pay-method { position: relative; margin: 0; cursor: pointer; }
.pay-method input { position: absolute; opacity: 0; pointer-events: none; }
.pay-method > span { display: flex; gap: 10px; align-items: flex-start; height: 100%; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--paper); }
.pay-method > span > .bi { font-size: 1.4rem; color: var(--cocoa); line-height: 1; margin-top: 2px; }
.pay-method b { display: block; font-size: .95rem; }
.pay-method small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.3; }
.pay-method input:checked + span { border: 2px solid var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.pay-method input:checked + span > .bi { color: var(--brand); }
.pay-method input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--brand) 40%, transparent); }
[data-method-only][hidden] { display: none !important; }
.activate-fold.unfolded > summary { display: none; }
.activate-fold.plan-fold > .activate-fold-body { padding: 14px 12px 12px; }
.activate-fold.plan-fold > summary small { font-size: .78rem; }
.activate-method { border-top: 1px solid var(--line); padding-top: 18px; }
.activate-mp .form-control { max-width: 420px; }
.activate-plans .pp-slogan { font-size: .78rem; color: var(--cocoa); font-weight: 600; line-height: 1.3; }
.activate-plans .pp-opt.featured .pp-slogan { color: var(--brand-deep); }
.activate-plans .pp-note { font-size: .74rem; color: var(--muted); line-height: 1.25; }
.activate-plans .plan-features { margin-top: 8px; }
@media (max-width: 767.98px) {
    /* site.css esconde las listas en el celular; la de ✅ y 🔒 sí se ve, a lo ancho de la tarjeta. */
    .activate-plans .pp-card ul.plan-features { display: block; flex: 1 0 100%; }
    .activate-plans .pp-slogan, .activate-plans .pp-note { flex: 1 0 100%; }
}

/* ---------- «Mi plan» ---------- */
.plan-card.featured { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--brand) 80%, transparent); }
.plan-card.current { outline: 3px solid color-mix(in srgb, var(--espresso) 22%, transparent); outline-offset: -1px; }
.plan-card .plan-slogan { font-weight: 700; color: var(--brand-deep); }
.plan-card .price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.plan-star { background: linear-gradient(90deg, var(--saffron), var(--brand)); color: #fff; }
.plan-change-hint { display: block; margin-top: 6px; font-size: .78rem; line-height: 1.3; color: var(--muted); }
.plan-change-hint .bi { color: var(--basil); }
.plans-change-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-radius: 14px; background: var(--cream); border: 1px solid var(--line); color: var(--cocoa); font-size: .86rem; line-height: 1.4; }
.plans-change-note .bi { color: var(--brand); margin-top: 2px; }
.money-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--basil-soft); color: #173d27; font-size: .9rem; line-height: 1.45; }
.money-note .bi { color: var(--basil); font-size: 1.3rem; line-height: 1; margin-top: 2px; }
.money-note strong { display: block; font-size: 1rem; }
.plan-trial-note { font-size: .82rem; color: var(--muted); }

/* ---------- Comparación de planes: el Pro y la Cadena solo muestran lo que suman ---------- */
.plan-features .pf-base { margin: 0 0 6px; padding: 8px 12px; border-radius: 12px; font-weight: 800; color: #173d27; background: var(--basil-soft); }
.plan-features .pf-base .pf-ico { font-size: .9em; }
.plan-features .pf-plus { font-weight: 700; color: var(--espresso); }
.plan-features .pf-plus .pf-txt small { font-weight: 500; }
.plan-features.incremental .pf-plus .pf-ico { font-size: 1.05em; }
.plan-features.compact .pf-base { padding: 5px 9px; font-size: .95em; }
/* «Se paga solo con N pedidos directos al mes»: la cuenta que vende el plan, al final de la tarjeta. */
.plan-features .pf-payback { margin-top: 10px; padding: 9px 12px; border-radius: 12px; font-weight: 800; color: #6b3a00; background: #fff1d6; border: 1px dashed #f0b45c; }
.plan-features .pf-payback .pf-ico { font-size: 1em; }

/* Registro más corto (oct-2026): el plan plegado en una línea («Tu plan: Pro · 7 días gratis… · Cambiar»). */
.plan-fold { border: 1px solid var(--line, #ece2d3); border-radius: 16px; background: var(--paper, #fffdf9); }
.plan-fold > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; font-size: .92rem; color: var(--cocoa, #5d4737); }
.plan-fold > summary::-webkit-details-marker { display: none; }
.plan-fold > summary > .bi { color: var(--c2b-orange, #eb7115); }
.plan-fold > summary strong { color: var(--espresso, #2a1b12); }
.plan-fold-change { margin-left: auto; font-style: normal; font-weight: 800; color: var(--brand, #d76112); white-space: nowrap; }
.plan-fold[open] > summary { border-bottom: 1px solid var(--line, #ece2d3); }
.plan-fold[open] .plan-fold-change { visibility: hidden; }
.plan-fold > .plan-pick { padding: 12px 12px 0; margin-bottom: 0 !important; }

/* Forma de pago del plan: lista para elegir, como en cualquier tienda (nada viene marcado). */
.pay-pick { border: 0; padding: 0; margin: 0; min-width: 0; }
.pay-pick-title { font-size: 1rem; font-weight: 800; color: var(--espresso, #2a1b12); margin-bottom: 8px; float: none; width: auto; }
.pay-list { border: 1.5px solid var(--line, #ece2d3); border-radius: 16px; background: var(--paper, #fffdf9); overflow: hidden; }
.pay-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin: 0; cursor: pointer; border-top: 1px solid var(--line, #ece2d3); transition: background .15s; }
.pay-row:first-child { border-top: 0; }
.pay-row[hidden] { display: none; }
.pay-row input { position: absolute; opacity: 0; pointer-events: none; }
.pay-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--brand, #d76112) 10%, transparent); color: var(--brand-deep, #a3460a); font-size: 1.25rem; }
.pay-ico-mp { background: #e6f4fd; color: #0a6fb5; }
.pay-txt { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.pay-txt b { display: block; font-size: .95rem; color: var(--espresso, #2a1b12); }
.pay-txt small { display: block; font-size: .78rem; color: var(--muted, #8a7867); margin-top: 2px; }
.pay-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c9bba8; flex: none; background: #fff; transition: all .15s; }
.pay-row:hover:not(.is-disabled) { background: color-mix(in srgb, var(--brand, #d76112) 5%, transparent); }
.pay-row:has(input:checked) { background: var(--brand-soft, #fdeee2); }
.pay-row:has(input:checked) .pay-radio { border-color: var(--brand, #d76112); background: var(--brand, #d76112); box-shadow: inset 0 0 0 4px #fff; }
.pay-row:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--brand, #d76112) 40%, transparent); outline-offset: -3px; }
.pay-row.is-disabled { cursor: not-allowed; }
.pay-row.is-disabled .pay-ico, .pay-row.is-disabled .pay-txt b, .pay-row.is-disabled .pay-radio { opacity: .5; }
.pay-soon { font-style: normal; font-size: .68rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: #eef1f4; color: #5b6570; margin-left: 6px; vertical-align: 2px; }
.pay-pick-error { margin-top: 8px; font-size: .85rem; font-weight: 700; color: #b42318; }
.pay-pick-error[hidden] { display: none; }
.pay-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.pay-marks img { display: block; box-sizing: border-box; height: 26px; width: auto; }
.pay-marks .pay-mark-chip { background: #fff; border: 1px solid #ddd5c9; border-radius: 5px; padding: 5px 7px; }
.pay-marks .pay-mark-mastercard { padding: 4px 8px; }
.pay-ico-logo { background: #fff; border: 1px solid var(--line, #ece2d3); }
.pay-ico-logo img { display: block; max-width: 34px; max-height: 28px; width: auto; height: auto; }