/* ============================================================================
   Contafácil — Home (página principal pública)
   Específico de "/". Depende de brand-tokens.css + marketing.css.
   ============================================================================ */

.mk-hero { padding-top: clamp(2rem, 6vw, 3.5rem); padding-bottom: clamp(2rem, 5vw, 3rem); }
.mk-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .mk-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.mk-hero h1 {
    font-family: 'Gantari', sans-serif; font-weight: 800; letter-spacing: -.02em;
    font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1; margin: 0 0 1.1rem; color: var(--cf-ink);
}
.mk-hero .mk-sub { font-size: 1.08rem; line-height: 1.6; color: var(--cf-muted); max-width: 42ch; margin: 0 0 1.75rem; }
.mk-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; align-items: center; }
.mk-hero-note { font-size: .82rem; color: var(--cf-muted); margin: 0; }

.mk-mock {
    background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: calc(var(--cf-radius) + 4px);
    box-shadow: var(--cf-shadow-md); overflow: hidden;
}
.mk-mock-bar { display: flex; gap: 6px; padding: .8rem 1rem; border-bottom: 1px solid var(--cf-border); background: var(--cf-bg); }
.mk-mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cf-border); }
.mk-mock-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .7rem; }
.mk-mock-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .9rem; background: var(--cf-bg); border: 1px solid var(--cf-border); border-radius: var(--cf-radius-sm); font-family: 'Gantari', sans-serif; font-size: .84rem; }
.mk-mock-row .mk-name { font-weight: 700; color: var(--cf-ink); }
.mk-mock-row .mk-tag { font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; white-space: nowrap; }
.mk-mock-row .mk-tag.mk-ok { background: var(--cf-success-soft, #E9F8EF); color: var(--cf-success); }
.mk-mock-row .mk-tag.mk-run { background: var(--cf-primary-soft); color: var(--cf-primary-700); }

.mk-trust { padding-top: 1.25rem; border-top: 1px solid var(--cf-border); }
.mk-trust-label { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cf-muted); margin: 0 0 .9rem; }
.mk-trust-row { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ── Antes / Después ──────────────────────────────────────────────────────── */
.mk-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 760px) { .mk-compare { grid-template-columns: 1fr; } }
.mk-cmp-col { border-radius: var(--cf-radius); padding: 1.75rem; }
.mk-cmp-before { background: var(--cf-bg); border: 1.5px dashed var(--cf-border); }
.mk-cmp-after { background: var(--cf-surface); border: 1.5px solid var(--cf-primary); box-shadow: var(--cf-shadow-md); }
.mk-cmp-label { display: flex; align-items: center; gap: .6rem; font-family: 'Gantari', sans-serif; font-weight: 800; font-size: 1rem; margin: 0 0 1.25rem; }
.mk-cmp-before .mk-cmp-label { color: var(--cf-muted); }
.mk-cmp-after .mk-cmp-label { color: var(--cf-primary-700); }
.mk-cmp-badge { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mk-cmp-before .mk-cmp-badge { background: var(--cf-border); color: var(--cf-muted); }
.mk-cmp-after .mk-cmp-badge { background: var(--cf-primary); color: #fff; }
.mk-cmp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.mk-cmp-list li { display: flex; align-items: flex-start; gap: .65rem; font-size: .93rem; line-height: 1.5; }
.mk-cmp-before .mk-cmp-list li { color: var(--cf-muted); }
.mk-cmp-before .mk-cmp-list li .mk-glyph { color: var(--cf-muted); }
.mk-cmp-after .mk-cmp-list li .mk-glyph { color: var(--cf-primary); }
.mk-cmp-list .mk-glyph { flex: 0 0 auto; font-weight: 800; margin-top: .1rem; }

/* ── Pasos ────────────────────────────────────────────────────────────────── */
/* ── Franja de planes ─────────────────────────────────────────────────────── */
.mk-plans-strip {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    background: var(--cf-primary-soft); border: 1px solid var(--cf-border); border-radius: var(--cf-radius); padding: 1.5rem 1.75rem;
}
.mk-plans-strip h3 { font-family: 'Gantari', sans-serif; font-size: 1.1rem; font-weight: 800; margin: 0 0 .3rem; color: var(--cf-ink); }
.mk-plans-strip p { font-size: .9rem; color: var(--cf-muted); margin: 0; }

/* ── Testimonios: alinear el carrusel existente a los tokens de marca ──────── */
.testimonials-home .owl-carousel .item { border-radius: var(--cf-radius) !important; box-shadow: var(--cf-shadow); }
.testimonials-home .owl-carousel .item h4 { color: var(--cf-secondary); font-size: 1rem; }