/* ============================================================================
   Contafácil — Marketing (sitio público)
   Componentes compartidos entre las páginas públicas rediseñadas
   (home, cómo-funciona, planes, nosotros, contacto...).
   Se apoya en los tokens de brand-tokens.css (--cf-*). Se carga DESPUÉS de
   brand-tokens.css vía header.css, así que puede sobreescribirlo si hace falta.
   ============================================================================ */

/* ── Ancho de página ──────────────────────────────────────────────────────
   El contenido se justifica al ancho de la pantalla, con un margen chico
   a los costados (no una columna angosta centrada). El .container de
   Bootstrap en este proyecto ya llega a max-width:1743px; acá solo le
   damos un poco más de aire lateral que los 15px originales. */
.container {
    max-width: 1743px;
    padding-left: clamp(1rem, 3vw, 2.5rem);
    padding-right: clamp(1rem, 3vw, 2.5rem);
}

/* ── Barra de promoción (fija, arriba de todo) ───────────────────────────── */
.mk-promo-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1032;
    background: var(--cf-primary); color: #fff;
    text-align: center; padding: .55rem 1rem;
    font-family: 'Gantari', sans-serif; font-size: .85rem; font-weight: 700;
}
.mk-promo-bar .sep { opacity: .65; margin: 0 .6rem; font-weight: 400; }
@media (max-width: 480px) {
    .mk-promo-bar { font-size: .78rem; padding: .5rem .75rem; }
    .mk-promo-bar .sep { display: block; height: .15rem; margin: 0; }
}

/* Cuando hay promo bar, el navbar fijo existente baja y el contenido
   necesita el margen extra correspondiente. .navbar ya es fixed-top
   (new_style.css) con top:0 — lo corremos por debajo de la promo. */
body.mk-has-promo .navbar.fixed-top { top: 40px; }
body.mk-has-promo .mt-top { margin-top: 220px; } /* 180px original + 40px de promo */
body.mk-has-promo .mt-top-sm { margin-top: 194px; }
@media (max-width: 480px) {
    body.mk-has-promo .navbar.fixed-top { top: 52px; }
    body.mk-has-promo .mt-top { margin-top: 232px; }
    body.mk-has-promo .mt-top-sm { margin-top: 206px; }
}

/* ── Hero simple de página interna (Nosotros, Contacto, Planes, Cómo Funciona) ── */
.mk-page-hero { padding-top: clamp(2rem, 6vw, 3.5rem); padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.mk-page-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.mk-page-hero-grid .mk-content-card { margin-top: 0; }
@media (max-width: 860px) { .mk-page-hero-grid { grid-template-columns: 1fr; gap: 1.25rem; } }
.mk-page-hero h1 {
    font-family: 'Gantari', sans-serif; font-weight: 800; letter-spacing: -.02em;
    font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; margin: 0; color: var(--cf-ink);
}
.mk-page-hero p { font-size: 1.05rem; line-height: 1.6; color: var(--cf-muted); margin: 0; }
.mk-page-hero p a { color: var(--cf-primary-700); font-weight: 700; }
.mk-page-hero.mk-page-hero-center { text-align: center; }
.mk-page-hero.mk-page-hero-center h1 { max-width: 22ch; margin: 0 auto 1rem; }
.mk-page-hero.mk-page-hero-center p { max-width: 56ch; margin: 0 auto; }

/* ── Tarjeta de contenido genérica (para envolver forms, texto largo, etc.) ── */
.mk-content-card {
    background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: var(--cf-radius);
    padding: clamp(1.5rem, 4vw, 2.25rem); box-shadow: var(--cf-shadow);
}
.mk-content-card label.form-label { font-family: 'Gantari', sans-serif; font-weight: 600; color: var(--cf-secondary); font-size: .9rem; }
.mk-content-card .form-control { border-color: var(--cf-border); }
.mk-content-card .form-control:focus { border-color: var(--cf-primary); box-shadow: 0 0 0 .2rem rgba(22,131,240,.18); }

/* ── Eyebrow (etiqueta pequeña tipo badge) ───────────────────────────────── */
.mk-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--cf-primary-700); background: var(--cf-primary-soft);
    padding: .4rem .8rem; border-radius: 999px; margin-bottom: 1.1rem;
}

/* ── Botones extra (el sitio ya tiene .btn-primary celeste vía new_style.css) */
.mk-btn-outline {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: 'Gantari', sans-serif; font-weight: 700; font-size: .95rem;
    padding: .8rem 1.5rem; border-radius: var(--cf-radius-sm);
    border: 1.5px solid var(--cf-border); color: var(--cf-secondary) !important;
    background: transparent; text-decoration: none; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.mk-btn-outline:hover { background: var(--cf-secondary); border-color: var(--cf-secondary); color: #fff !important; }
.mk-btn-ghost-light {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: 'Gantari', sans-serif; font-weight: 700; font-size: .95rem;
    padding: .8rem 1.5rem; border-radius: var(--cf-radius-sm);
    border: 1.5px solid rgba(255,255,255,.4); background: rgba(255,255,255,.14); color: #fff !important;
    text-decoration: none; cursor: pointer; transition: background .15s;
}
.mk-btn-ghost-light:hover { background: rgba(255,255,255,.24); color: #fff !important; }

/* ── Secciones y encabezados de sección ──────────────────────────────────── */
.mk-section { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.mk-section-head { max-width: 640px; margin: 0 auto 2.25rem; }
.mk-section-head h2 {
    font-family: 'Gantari', sans-serif; font-weight: 800; letter-spacing: -.01em;
    font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .6rem; color: var(--cf-ink);
}
.mk-section-head p { color: var(--cf-muted); font-size: 1.05rem; line-height: 1.6; margin: 0; }

/* ── Pasos numerados ("Empezar te lleva tres pasos") ─────────────────────── */
.mk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; counter-reset: mkstep; }
@media (max-width: 760px) { .mk-steps { grid-template-columns: 1fr; } }
.mk-step { display: flex; flex-direction: column; gap: .6rem; }
.mk-step-num {
    counter-increment: mkstep; width: 34px; height: 34px; border-radius: 50%;
    background: var(--cf-secondary); color: #fff; font-family: 'Gantari', sans-serif; font-weight: 800; font-size: .95rem;
    display: flex; align-items: center; justify-content: center;
}
.mk-step-num::before { content: counter(mkstep); }
.mk-step h3 { font-family: 'Gantari', sans-serif; font-size: 1rem; font-weight: 700; margin: 0; color: var(--cf-ink); }
.mk-step p { font-size: .88rem; color: var(--cf-muted); line-height: 1.55; margin: 0; }

/* ── Ícono en tile celeste (para tarjetas de funcionalidades) ────────────── */
.mk-icon-tile {
    width: 46px; height: 46px; border-radius: var(--cf-radius-sm);
    background: var(--cf-primary-soft); color: var(--cf-primary);
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.mk-icon-tile svg { width: 22px; height: 22px; }

/* ── Grilla de funcionalidades ────────────────────────────────────────────── */
.mk-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 860px) { .mk-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mk-feature-grid { grid-template-columns: 1fr; } }
.mk-feature-card {
    background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: var(--cf-radius);
    padding: 1.5rem; box-shadow: var(--cf-shadow); display: flex; flex-direction: column; gap: .9rem;
}
.mk-feature-card h3 { font-family: 'Gantari', sans-serif; font-size: 1.02rem; font-weight: 700; margin: 0; color: var(--cf-ink); }
.mk-feature-card p { font-size: .9rem; line-height: 1.55; color: var(--cf-muted); margin: 0; }

/* ── Banda de CTA final ───────────────────────────────────────────────────── */
.mk-cta-band {
    background: linear-gradient(135deg, var(--cf-secondary), #14204A);
    border-radius: var(--cf-radius); color: #fff;
    padding: clamp(2rem, 5vw, 3rem); text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
}
.mk-cta-band h2 { font-family: 'Gantari', sans-serif; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; max-width: 26ch; margin: 0; }
.mk-cta-band p { color: rgba(255,255,255,.78); max-width: 46ch; margin: 0; }
.mk-cta-band-actions { display: flex; gap: .9rem; flex-wrap: wrap; justify-content: center; }
.mk-cta-band-actions .btn-primary,
.mk-hero-actions .btn-primary {
    display: inline-flex; align-items: center; gap: .5rem; padding: 1rem 2rem;
    font-family: 'Gantari', sans-serif; font-size: 1.05rem; font-weight: 700;
    border-radius: var(--cf-radius-sm); text-decoration: none; color: #fff;
}

/* ── Chip (integraciones, tags) ───────────────────────────────────────────── */
.mk-chip {
    font-family: 'Gantari', sans-serif; font-size: .82rem; font-weight: 700; color: var(--cf-secondary);
    background: var(--cf-secondary-soft, #EEF1F8); border: 1px solid var(--cf-border);
    padding: .4rem .85rem; border-radius: 999px; display: inline-block;
}