/* Mi Contabilidad — página de venta (webcol.net/mi-contabilidad). Usa los tokens de design-system.css. */

.mc-hero { padding-top: calc(var(--nav-height, 72px) + 4rem); }

.mc-plans { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 880px; margin: 0 auto; }
@media (min-width: 760px) { .mc-plans { grid-template-columns: 1fr 1fr; } }

.mc-plan {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 16px);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.mc-plan--main { border-color: var(--color-border-accent); box-shadow: 0 0 0 1px var(--color-accent-subtle), 0 20px 60px -30px var(--color-accent-glow); }
.mc-plan__name { font-size: var(--text-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin: 0; }
.mc-plan__price { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; margin: 0; }
.mc-plan__amount { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 800; color: var(--color-text-primary); line-height: 1.1; }
.mc-plan__period { color: var(--color-text-secondary); font-size: var(--text-small); }
.mc-plan__desc { color: var(--color-text-secondary); margin: 0; }
.mc-plan .wc-product-card__list { margin: 0; }

.mc-buy { max-width: 560px; margin: 0 auto; }
.mc-buy .wc-form { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg, 16px); padding: 1.75rem; }

.mc-options { display: grid; gap: 0.75rem; border: 0; padding: 0; margin: 0; }
.mc-options legend { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; }
.mc-option {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.9rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    cursor: pointer; text-transform: none !important; letter-spacing: normal !important;
    font-size: var(--text-small) !important; color: var(--color-text-primary) !important; font-weight: 500 !important;
}
.mc-option:has(input:checked) { border-color: var(--color-border-accent); background: var(--color-accent-subtle); }
.wc-form .mc-option input { width: auto; margin-top: 3px; accent-color: var(--color-accent); appearance: auto; -webkit-appearance: auto; }
.mc-option small { display: block; color: var(--color-text-secondary); font-weight: 400; margin-top: 2px; }

.mc-consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--text-small) !important; text-transform: none !important; letter-spacing: normal !important; color: var(--color-text-secondary) !important; font-weight: 400 !important; cursor: pointer; }
.wc-form .mc-consent input { width: auto; margin-top: 3px; accent-color: var(--color-accent); appearance: auto; -webkit-appearance: auto; }
.mc-consent a { color: var(--color-accent); }

.mc-hint { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }
.mc-notice {
    display: flex; gap: 0.6rem; align-items: flex-start;
    padding: 0.85rem 1rem; border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-accent); background: var(--color-accent-subtle);
    color: var(--color-text-primary); font-size: var(--text-small); margin: 0;
}
.mc-notice svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--color-accent); margin-top: 1px; }
.mc-error { color: var(--color-error); font-size: var(--text-small); margin: 0; min-height: 1.2em; }
#mc-submit[disabled] { opacity: 0.55; cursor: not-allowed; }

.mc-faq { max-width: 760px; margin: 0 auto; display: grid; gap: 0.75rem; }
.mc-faq details { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1rem 1.2rem; }
.mc-faq summary { cursor: pointer; font-weight: 600; color: var(--color-text-primary); }
.mc-faq details p { color: var(--color-text-secondary); margin: 0.75rem 0 0; }

.mc-status { max-width: 640px; margin: 0 auto; text-align: center; }
.mc-status__icon { width: 64px; height: 64px; margin: 0 auto 1.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent-subtle); border: 1px solid var(--color-border-accent); }
.mc-status__icon svg { width: 30px; height: 30px; color: var(--color-accent); }
.mc-status[data-estado="rechazado"] .mc-status__icon { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.35); }
.mc-status[data-estado="rechazado"] .mc-status__icon svg { color: var(--color-error); }
.mc-status [data-show] { display: none; }
.mc-status[data-estado="aprobado"] [data-show~="aprobado"],
.mc-status[data-estado="pendiente"] [data-show~="pendiente"],
.mc-status[data-estado="rechazado"] [data-show~="rechazado"] { display: block; }
.mc-status .wc-steps { text-align: left; margin-top: 2rem; }

/* Páginas legales (términos, política de datos) */
.mc-legal { max-width: 760px; margin: 0 auto; color: var(--color-text-secondary); line-height: 1.7; }
.mc-legal h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); font-weight: 800; line-height: 1.15; color: var(--color-text-primary); margin: 0.5rem 0 0.5rem; }
.mc-legal h2 { font-size: 1.15rem; font-weight: 700; color: var(--color-text-primary); margin: 2.25rem 0 0.75rem; }
.mc-legal p, .mc-legal ul { margin: 0 0 1rem; }
.mc-legal ul { padding-left: 1.25rem; list-style: disc; }
.mc-legal li::marker { color: var(--color-accent); }
.mc-legal li { margin-bottom: 0.4rem; }
.mc-legal strong { color: var(--color-text-primary); }
.mc-legal a { color: var(--color-accent); }
.mc-legal code { font-size: 0.9em; color: var(--color-text-primary); }
.mc-legal__eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin: 0 !important; }
.mc-legal__meta { font-size: var(--text-small); color: var(--color-text-muted); margin-bottom: 2rem !important; }
.mc-legal__back { margin-top: 3rem !important; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }