/* ============================================================================
   Contafácil — Página "Planes" (tabla de precios)
   Depende de brand-tokens.css + marketing.css.
   ============================================================================ */

/* new_style.css trae reglas viejas (.tab-content{width:1655px} + zoom:70% en
   algunos anchos) pensadas para la tabla de precios anterior. Se combinan con
   el zoom:90% global del body y achican todo el contenido nuevo. Las anulamos
   acá con el ID, que gana por especificidad sin importar el breakpoint. */
#myTabContent.tab-content { width: 100% !important; zoom: 1 !important; margin-bottom: 0; }

.mk-price-toggle-wrap { text-align: center; margin: 0 0 .5rem; }
.mk-price-toggle { display: inline-flex; align-items: center; gap: .9rem; cursor: pointer; }
.mk-price-toggle .plan_heading {
    font-family: 'Gantari', sans-serif; font-weight: 600; font-size: 1rem;
    color: var(--cf-muted); margin: 0; transition: color .15s;
}
.mk-price-toggle .plan_heading.active { color: var(--cf-ink); }
.mk-price-save { text-align: center; color: var(--cf-primary-700); font-size: .92rem; margin: .6rem 0 2rem; }

/* ── Grilla de precios ────────────────────────────────────────────────────── */
.mk-price-scroll { overflow-x: auto; border: 1px solid var(--cf-border); border-radius: var(--cf-radius); }
.mk-price-grid {
    display: grid;
    grid-template-columns: 200px repeat(4, 190px);
    min-width: 960px;
    width: 100%;
    background: var(--cf-surface);
}
@media (min-width: 1140px) {
    .mk-price-scroll { overflow-x: visible; }
    .mk-price-grid { grid-template-columns: 1.3fr repeat(4, 1fr); min-width: 0; width: 100%; }
}

.mk-price-cell {
    padding: .85rem 1.1rem; display: flex; align-items: center; justify-content: center; gap: .5rem;
    border-bottom: 1px solid var(--cf-border); font-size: .88rem; color: var(--cf-ink);
    text-align: center;
}
/* La columna de etiquetas (izquierda) queda alineada a la izquierda; solo los
   valores de cada plan (columnas 2-5) se centran. */
.mk-price-label-cell { color: var(--cf-muted); font-size: .85rem; justify-content: space-between; text-align: left; }

.mk-price-plan-header { flex-direction: column; align-items: center; text-align: center; gap: .2rem; padding-top: 1.5rem; padding-bottom: 1.25rem; position: relative; }
.mk-price-plan-name { font-family: 'Gantari', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--cf-ink); }
.mk-price-plan-sub { font-size: .78rem; color: var(--cf-muted); min-height: 2.2em; }
.mk-price-plan-price { font-family: 'Gantari', sans-serif; font-weight: 800; font-size: 1.7rem; color: var(--cf-ink); font-variant-numeric: tabular-nums; margin-top: .4rem; }
.mk-price-plan-price sup { font-size: .8rem; font-weight: 700; margin-right: 1px; }
.mk-price-plan-price .mk-per { font-size: .72rem; font-weight: 500; color: var(--cf-muted); }

.mk-price-plan--popular .mk-price-plan-header { background: var(--cf-primary-soft); }
.mk-price-badge {
    position: absolute; top: .5rem; right: .6rem;
    background: var(--cf-secondary); color: #fff; font-size: .62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; padding: .2rem .5rem; border-radius: 999px;
}

.mk-price-check { color: var(--cf-primary); font-weight: 800; flex: 0 0 auto; }
.mk-price-minus { color: var(--cf-border); font-weight: 800; flex: 0 0 auto; }
.mk-price-num { font-weight: 700; color: var(--cf-ink); font-variant-numeric: tabular-nums; }

/* Alinear los botones arriba (no centrado vertical): la columna Free no tiene
   nota debajo y, con justify-content:center heredado, quedaba más abajo que el
   resto. flex-start hace que todos los CTA arranquen a la misma altura. */
.mk-price-cta-cell { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .5rem; padding-top: 1.25rem; padding-bottom: 1.5rem; border-bottom: none; }
.mk-price-cta-cell .btn-primary {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    padding: .7rem 1rem; font-size: .9rem; font-weight: 700;
    border-radius: var(--cf-radius-sm); color: #fff; text-decoration: none;
}
.mk-price-cta-note { font-size: .72rem; color: var(--cf-muted); line-height: 1.4; }

.mk-price-tooltip { position: relative; display: inline-flex; cursor: help; }
.mk-price-tooltip .mk-price-tooltip-icon { color: var(--cf-muted); font-size: .8rem; }
.mk-price-tooltip .mk-price-tooltip-text {
    display: none; position: absolute; z-index: 20; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    width: 240px; background: var(--cf-ink); color: #fff; font-size: .78rem; line-height: 1.4;
    padding: .6rem .75rem; border-radius: var(--cf-radius-sm); box-shadow: var(--cf-shadow-md);
}
.mk-price-tooltip:hover .mk-price-tooltip-text { display: block; }

/* ── Packs de corridas, agrupados por bot ─────────────────────────────────── */
.mk-pack-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (max-width: 700px) { .mk-pack-groups { grid-template-columns: 1fr; } }
.mk-pack-group {
    background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: var(--cf-radius);
    box-shadow: var(--cf-shadow); overflow: hidden;
}
.mk-pack-group-head { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--cf-border); }
.mk-pack-group-head h3 { font-family: 'Gantari', sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--cf-ink); margin: 0; }
.mk-pack-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 1.25rem; border-bottom: 1px solid var(--cf-border); font-size: .92rem;
}
.mk-pack-row:last-child { border-bottom: none; }
.mk-pack-qty { color: var(--cf-ink); font-weight: 600; }
.mk-pack-price { color: var(--cf-primary-700); font-weight: 800; font-variant-numeric: tabular-nums; }