/* ═══════════════════════════════════════════════════════════════
   ECONEXORA — marcas.css
   © EcoNexora — Jehosua Tepanecatl Caballero. Todos los derechos reservados.
   canary: ecx-css-marcas-2026-08
   ═══════════════════════════════════════════════════════════════

   Estilos EXCLUSIVOS de marcas.html. Van en archivo aparte a proposito:
   style.css tiene 2,378 lineas y lo comparten seis paginas — meterle
   selectores nuevos ahi es la forma mas facil de romper la portada sin
   enterarse. Aqui todo va prefijado `mk-` o dentro de #cotizador.

   La paleta y las fuentes salen de style.css. No se redefinen.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --mk-marino:#123158;
  --mk-cielo:#2596BE;
  --mk-olivo:#99BB65;
  --mk-tinta:#16232E;
  --mk-gris:#5C6B78;
  --mk-ground:#F4F8FB;
  --mk-linea:#DEE7ED;
}

.mk-gris{background:var(--mk-ground)}

/* ── Por qué ─────────────────────────────────────────────────── */
.mk-split{display:grid;gap:48px;grid-template-columns:1.05fr .95fr;align-items:center}
.mk-split-text p{font-size:1.02rem;line-height:1.75;color:var(--mk-gris);margin:0 0 18px}
.mk-lead{font-size:1.28rem!important;line-height:1.6!important;color:var(--mk-tinta)!important;
         font-weight:600}
.mk-firma{border-left:3px solid var(--mk-olivo);padding-left:18px;margin-top:26px!important}
.mk-split-media{position:relative;border-radius:20px;overflow:hidden;
                box-shadow:0 24px 60px rgba(18,49,88,.16)}
.mk-split-media img{width:100%;height:100%;min-height:380px;object-fit:cover;display:block}
.mk-media-cap{position:absolute;left:16px;bottom:14px;color:#fff;font-size:.76rem;
              font-weight:700;letter-spacing:.08em;text-transform:uppercase;
              text-shadow:0 2px 10px rgba(0,0,0,.6)}

/* ── Pasos ───────────────────────────────────────────────────── */
.mk-pasos{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.mk-paso{background:#fff;border:1px solid var(--mk-linea);border-radius:18px;padding:26px 22px;
         position:relative;transition:transform .2s,box-shadow .2s}
.mk-paso:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(18,49,88,.10)}
.mk-paso-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
             border-radius:50%;background:var(--mk-marino);color:#fff;font-weight:800;
             font-size:.95rem;margin-bottom:14px}
.mk-paso h3{margin:0 0 8px;font-size:1.06rem;font-weight:800;color:var(--mk-marino)}
.mk-paso p{margin:0;font-size:.93rem;line-height:1.65;color:var(--mk-gris)}

/* ── El modelo: dos créditos, NUNCA sumados ──────────────────── */
.mk-modelo{display:grid;gap:18px;grid-template-columns:1fr auto 1fr;align-items:stretch}
.mk-mod-card{border-radius:20px;padding:30px 26px;border:1px solid var(--mk-linea);background:#fff}
.mk-mod-marca{border-color:#DCE9C8;background:#F7FBF1}
.mk-mod-ecx{border-color:#CFE6F0;background:#F2F9FC}
.mk-mod-pct{display:block;font-size:2.9rem;font-weight:800;letter-spacing:-1.5px;line-height:1}
.mk-mod-marca .mk-mod-pct{color:#4A6B22}
.mk-mod-ecx .mk-mod-pct{color:var(--mk-cielo)}
.mk-mod-card h3{margin:8px 0 12px;font-size:1.14rem;font-weight:800;color:var(--mk-marino)}
.mk-mod-card p{margin:0 0 10px;font-size:.95rem;line-height:1.65;color:var(--mk-gris)}
.mk-mod-nota{font-size:.86rem!important;opacity:.85;border-top:1px dashed var(--mk-linea);
             padding-top:10px;margin-top:14px!important}
.mk-mod-mas{display:flex;align-items:center;justify-content:center;font-size:2rem;
            font-weight:800;color:var(--mk-gris);opacity:.4;padding:0 4px}
.mk-modelo-cierre{max-width:720px;margin:34px auto 0;text-align:center;font-size:1.02rem;
                  line-height:1.75;color:var(--mk-gris)}

/* ── Cards de beneficio ──────────────────────────────────────── */
.mk-cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.mk-card{background:#fff;border:1px solid var(--mk-linea);border-radius:18px;padding:26px 22px;
         transition:transform .2s,box-shadow .2s,border-color .2s}
.mk-card:hover{transform:translateY(-4px);border-color:var(--mk-cielo);
               box-shadow:0 18px 40px rgba(18,49,88,.10)}
.mk-card-ico{font-size:1.9rem;display:block;margin-bottom:12px}
.mk-card h3{margin:0 0 8px;font-size:1.06rem;font-weight:800;color:var(--mk-marino)}
.mk-card p{margin:0;font-size:.93rem;line-height:1.65;color:var(--mk-gris)}

/* ── Eventos ─────────────────────────────────────────────────── */
.mk-eventos{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.mk-ev{background:#fff;border:1px solid var(--mk-linea);border-radius:20px;padding:0;
       overflow:hidden;display:flex;flex-direction:column}
.mk-ev-top{background:var(--mk-marino);color:#fff;padding:20px 22px}
.mk-ev-fecha{font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
             color:var(--mk-olivo)}
.mk-ev-top h3{margin:6px 0 0;font-size:1.1rem;font-weight:800;line-height:1.35}
.mk-ev-body{padding:20px 22px;flex:1}
.mk-ev-row{display:flex;gap:10px;font-size:.9rem;color:var(--mk-gris);margin-bottom:8px;
           line-height:1.5}
.mk-ev-row b{color:var(--mk-tinta);font-weight:700;flex-shrink:0}
.mk-ev-cta{padding:0 22px 20px}

/* ── Galería ─────────────────────────────────────────────────── */
.mk-galeria{background:var(--mk-marino);padding:76px 0 0}
.mk-gal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px;
             margin-top:40px}
.mk-gal-grid figure{margin:0;overflow:hidden;aspect-ratio:4/3}
.mk-gal-grid img{width:100%;height:100%;object-fit:cover;display:block;
                 filter:saturate(.92);transition:transform .5s,filter .5s}
.mk-gal-grid figure:hover img{transform:scale(1.06);filter:saturate(1.1)}

/* ── Cotizador ───────────────────────────────────────────────── */
#cot-caja{background:#fff;border:1px solid var(--mk-linea);border-radius:22px;padding:34px;
          min-height:240px;box-shadow:0 20px 50px rgba(18,49,88,.07)}
.cot-prog{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
          color:var(--mk-cielo);margin-bottom:12px}
.cot-q{margin:0 0 6px;font-size:1.5rem;font-weight:800;letter-spacing:-.4px;color:var(--mk-marino)}
.cot-ayuda{margin:0 0 20px;font-size:.94rem;color:var(--mk-gris);line-height:1.6}
.cot-ops{display:grid;gap:10px}
.op{background:#fff;color:var(--mk-tinta);border:1px solid var(--mk-linea);border-radius:14px;
    padding:16px 18px;text-align:left;font:inherit;cursor:pointer;display:block;width:100%;
    transition:border-color .15s,background .15s,transform .15s}
.op:hover{border-color:var(--mk-cielo);background:#F0F8FC;transform:translateX(3px)}
.op strong{display:block;font-size:.98rem;font-weight:700}
.op span{display:block;font-size:.85rem;color:var(--mk-gris);margin-top:2px}
.cot-atras{background:transparent;color:var(--mk-gris);border:0;padding:14px 0 0;
           font-size:.9rem;font-weight:600;cursor:pointer}

.cot-lead{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
          color:var(--mk-gris)}
.cot-precio{font-size:3.6rem;font-weight:800;letter-spacing:-2px;color:var(--mk-marino);
            line-height:1.02;margin:8px 0 4px}
.cot-precio-sub{font-size:.94rem;color:var(--mk-gris)}
.cot-paq{font-size:.86rem;color:var(--mk-gris);margin:8px 0 24px;padding-top:12px;
         border-top:1px dashed var(--mk-linea)}
.cot-impulso{background:#F7FBF1;border:1px solid #DCE9C8;border-radius:16px;padding:20px 22px;
             margin-bottom:22px}
.cot-impulso.chico{background:var(--mk-ground);border-color:var(--mk-linea)}
.cot-impulso strong{display:block;font-size:1.16rem;color:#4A6B22;margin-bottom:8px}
.cot-impulso.chico strong{color:var(--mk-marino)}
.cot-impulso p{margin:0;font-size:.92rem;color:var(--mk-gris);line-height:1.65}
.cot-datos{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
           padding:22px 0;border-top:1px solid var(--mk-linea);border-bottom:1px solid var(--mk-linea)}
.cot-datos strong{display:block;font-size:1.5rem;font-weight:800;color:var(--mk-marino)}
.cot-datos span{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
                color:var(--mk-gris)}
.cot-nota{font-size:.86rem;color:var(--mk-gris);margin:16px 0 0;line-height:1.65}
.cot-tiers{margin-top:30px}
.cot-tiers h4{margin:0 0 8px;font-size:1.1rem;font-weight:800;color:var(--mk-marino)}
.cot-tiers table{width:100%;border-collapse:collapse;margin-top:14px}
.cot-tiers td{padding:14px 10px;border-bottom:1px solid var(--mk-linea);font-size:.92rem;
              vertical-align:middle}
.cot-tiers td:first-child{padding-left:0}
.cot-tiers td:last-child{padding-right:0;text-align:right}
.tmini{display:block;font-size:.78rem;color:var(--mk-gris);font-weight:400}

/* Dos créditos, dos colores. El olivo es lo que pone la marca; el azul
   es lo que pone EcoNexora. Nunca se pintan sumados: mezclarlos regala el
   posicionamiento que ese margen no cobrado esta comprando. */
.cred-marca{display:block;color:#4A6B22;font-weight:700}
.cred-ecx{display:block;color:var(--mk-cielo);font-weight:700;margin-top:8px}
.cred-marca .tmini,.cred-ecx .tmini{font-weight:400}
.ahorro{color:#4A6B22;font-weight:700;white-space:nowrap}

/* El Consejo se ve pero no se compra: el candado ES el atractivo. */
.cot-tiers tr.cerrado td{background:var(--mk-ground);opacity:.85}
.candado{font-size:.68rem;font-weight:700;color:var(--mk-gris);white-space:nowrap}

.cot-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:28px}

/* ── Formulario ──────────────────────────────────────────────── */
.mk-form-wrap{max-width:820px}
.activos{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
         margin-bottom:28px}
/* ⚠️ `.act > span{flex:1;min-width:0}` NO es decorativo. Sin el, el
   contenedor del texto se queda en 90px dentro de una tarjeta de 265px y
   las letras salen una por renglon. Ya paso. */
.act{border:1px solid var(--mk-linea);border-radius:14px;padding:15px 17px;background:#fff;
     cursor:pointer;transition:border-color .15s,background .15s;display:flex;gap:12px;
     align-items:flex-start}
.act:hover{border-color:var(--mk-cielo)}
.act.on{border-color:var(--mk-cielo);background:#F0F8FC}
.act input{margin-top:3px;accent-color:var(--mk-cielo);flex-shrink:0}
.act > span{flex:1;min-width:0}
.act strong{display:block;font-size:.95rem;font-weight:700;color:var(--mk-tinta)}
.act > span > span{display:block;font-size:.85rem;color:var(--mk-gris);margin-top:2px}

#form{display:grid;gap:14px;grid-template-columns:1fr 1fr}
#form .full{grid-column:1/-1}
#form label{display:block;font-size:.8rem;font-weight:700;color:var(--mk-gris);margin-bottom:5px}
#form input,#form textarea{width:100%;padding:13px 15px;border:1px solid var(--mk-linea);
                           border-radius:12px;font:inherit;background:#fff;color:var(--mk-tinta)}
#form input:focus,#form textarea:focus{outline:0;border-color:var(--mk-cielo)}
#form textarea{min-height:96px;resize:vertical}
.nota{font-size:.82rem;color:var(--mk-gris);margin:8px 0 0;line-height:1.6}
.err{background:#FBE9E9;color:#C62828;padding:13px 15px;border-radius:12px;font-size:.9rem;
     display:none}
.err.show{display:block}
.ok{background:#F0F7EC;color:#2E7D32;padding:20px 22px;border-radius:16px;font-size:.98rem;
    display:none;line-height:1.65;margin-top:20px}

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:900px){
  .mk-split{grid-template-columns:1fr;gap:30px}
  .mk-split-media img{min-height:260px}
  .mk-modelo{grid-template-columns:1fr}
  .mk-mod-mas{padding:4px 0}
}
@media(max-width:640px){
  #cot-caja{padding:22px 18px;border-radius:18px}
  .cot-precio{font-size:2.7rem}
  .cot-q{font-size:1.24rem}
  #form{grid-template-columns:1fr}
  .cot-tiers td{padding:12px 6px;font-size:.86rem}
}

/* ── Ejemplo con números: la parte que convence ──────────────────
   El feedback fue claro — "el 40% es muy vago". Un porcentaje no se
   entiende; una cuenta con pesos sí. Por eso el modelo se explica con
   $10,000 redondos en vez de con una formula. */
.mk-ejemplo{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--mk-linea);
            border-radius:22px;padding:8px 8px 0;box-shadow:0 20px 50px rgba(18,49,88,.07);
            overflow:hidden}
.mk-ej-titulo{padding:20px 22px 14px;font-size:.78rem;font-weight:700;letter-spacing:.09em;
              text-transform:uppercase;color:var(--mk-gris)}
.mk-ej-fila{display:grid;grid-template-columns:180px 130px 1fr;gap:18px;align-items:start;
            padding:20px 22px;border-top:1px solid var(--mk-linea)}
.mk-ej-etiq{font-weight:800;color:var(--mk-marino);font-size:.95rem;line-height:1.4}
.mk-ej-cifra{font-size:1.75rem;font-weight:800;letter-spacing:-.8px;color:var(--mk-marino);
             line-height:1.1}
.mk-ej-desc{font-size:.92rem;line-height:1.65;color:var(--mk-gris)}
.mk-ej-verde{background:#F7FBF1}
.mk-ej-verde .mk-ej-etiq,.mk-ej-verde .mk-ej-cifra{color:#4A6B22}
.mk-ej-azul{background:#F2F9FC}
.mk-ej-azul .mk-ej-etiq,.mk-ej-azul .mk-ej-cifra{color:var(--mk-cielo)}
.mk-ej-total{background:var(--mk-marino);color:#fff;margin:0 -8px;padding:20px 30px;
             font-size:1rem;line-height:1.6}
.mk-ej-total b{color:var(--mk-olivo)}
.mk-ej-mini{display:block;margin-top:8px;font-size:.86rem;opacity:.8;line-height:1.6}

/* ── Tabla de niveles ───────────────────────────────────────────
   Van visibles y completos. Esconderlos hacia que la pagina prometiera
   "hasta 35%" sin decir que ese nivel es cerrado — que es prometer algo
   que la mayoria no puede tener. */
.mk-tiers-tabla{max-width:860px;margin:44px auto 0}
.mk-tiers-tabla h3{font-size:1.2rem;font-weight:800;color:var(--mk-marino);margin:0 0 14px}
.mk-tiers-tabla table{width:100%;border-collapse:collapse;background:#fff;
                      border:1px solid var(--mk-linea);border-radius:16px;overflow:hidden}
.mk-tiers-tabla th{background:var(--mk-ground);text-align:left;padding:13px 16px;
                   font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
                   color:var(--mk-gris)}
.mk-tiers-tabla td{padding:15px 16px;border-top:1px solid var(--mk-linea);font-size:.92rem;
                   color:var(--mk-gris);vertical-align:top}
.mk-tiers-tabla td b{color:var(--mk-tinta)}
.mk-tiers-tabla tr.mk-destacado td{background:#F7FBF1}
.mk-tiers-tabla tr.mk-destacado td:first-child{box-shadow:inset 3px 0 0 var(--mk-olivo)}
.mk-tiers-tabla tr.cerrado td{background:var(--mk-ground);opacity:.8}

/* ── Programa de apoyo ──────────────────────────────────────────── */
.mk-apoyo{max-width:720px;margin:0 auto;text-align:center;background:#fff;
          border:1px solid var(--mk-linea);border-radius:22px;padding:40px 34px}
.mk-apoyo-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.09em;
              text-transform:uppercase;color:var(--mk-cielo);background:#F0F8FC;
              padding:6px 14px;border-radius:99px;margin-bottom:16px}
.mk-apoyo h2{font-size:1.7rem;font-weight:800;color:var(--mk-marino);margin:0 0 14px;
             letter-spacing:-.5px}
.mk-apoyo p{font-size:1rem;line-height:1.72;color:var(--mk-gris);margin:0 0 14px}
.mk-apoyo-cond{border-top:1px dashed var(--mk-linea);padding-top:16px;font-size:.93rem!important}

/* ── Criterios ──────────────────────────────────────────────────
   El tono importa mas que el contenido: tiene que espantar a una marca
   con un conflicto sin resolver, y pasar desapercibido para todas las
   demas. Por eso cierra diciendo que la mayoria pasa sin enterarse. */
.mk-criterios{background:var(--mk-ground);border:1px solid var(--mk-linea);border-radius:20px;
              padding:32px 30px}
.mk-criterios p{font-size:.98rem;line-height:1.72;color:var(--mk-gris);margin:0 0 18px}
.mk-criterios ul{margin:0 0 18px;padding-left:20px}
.mk-criterios li{font-size:.95rem;line-height:1.7;color:var(--mk-gris);margin-bottom:12px}
.mk-criterios li b{color:var(--mk-tinta)}
.mk-crit-cierre{border-top:1px dashed var(--mk-linea);padding-top:18px;margin-bottom:0!important}

@media(max-width:640px){
  .mk-ej-fila{grid-template-columns:1fr;gap:6px}
  .mk-ej-cifra{font-size:2rem}
  .mk-tiers-tabla{overflow-x:auto}
  .mk-tiers-tabla table{min-width:560px}
}

/* ── Qué incluye / qué está bloqueado ────────────────────────────
   El bloqueo es un mecanismo comercial, no adorno: si declararse chico
   no costara nada, toda marca grande se declararia chica. */
.cot-acceso{margin:22px 0;padding:22px;background:var(--mk-ground);
            border:1px solid var(--mk-linea);border-radius:16px}
.cot-acceso h4{margin:0 0 12px;font-size:.98rem;font-weight:800;color:var(--mk-marino)}
.cot-inc{list-style:none;margin:0;padding:0}
.cot-inc li{position:relative;padding-left:26px;margin-bottom:9px;font-size:.92rem;
            line-height:1.55;color:var(--mk-tinta)}
.cot-inc li::before{content:'✓';position:absolute;left:0;top:0;color:#4A6B22;
                    font-weight:800}
.cot-bloq{margin-top:18px;padding-top:16px;border-top:1px dashed var(--mk-linea)}
.cot-bloq-t{display:block;font-size:.76rem;font-weight:700;letter-spacing:.06em;
            text-transform:uppercase;color:var(--mk-gris);margin-bottom:10px}
.cot-bloq ul{list-style:none;margin:0;padding:0}
.cot-bloq li{position:relative;padding-left:26px;margin-bottom:8px;font-size:.9rem;
             line-height:1.55;color:var(--mk-gris);opacity:.85}
.cot-bloq li::before{content:'🔒';position:absolute;left:0;top:0;font-size:.8rem}

/* La Carta del Futuro: se gana contratando, no se compra. El trato visual
   la separa de todo lo demas a proposito — es un premio, no una promo. */
.cot-carta{margin-top:18px;padding:18px 20px;border-radius:14px;
           background:linear-gradient(135deg,#123158,#1b4a7a);color:#fff}
.cot-carta-t{display:block;font-size:.86rem;font-weight:800;color:var(--mk-olivo);
             margin-bottom:8px}
.cot-carta p{margin:0;font-size:.9rem;line-height:1.65;color:#CBDDEA}
.cot-carta b{color:#fff}

/* ── Bossi debajo del resultado ──────────────────────────────────── */
.cot-bossi{display:flex;gap:16px;align-items:flex-start;margin-top:26px;padding:20px 22px;
           background:#F0F8FC;border:1px solid #CFE6F0;border-radius:16px}
.cot-bossi img{width:52px;height:52px;flex-shrink:0;object-fit:contain}
.cot-bossi p{margin:0 0 8px;font-size:.93rem;line-height:1.65;color:var(--mk-tinta)}
.cot-bossi-mini{font-size:.86rem!important;color:var(--mk-gris)!important;margin-bottom:0!important}
.cot-bossi a{color:var(--mk-cielo);font-weight:700;text-decoration:none}
.cot-bossi a:hover{text-decoration:underline}

@media(max-width:640px){
  .cot-bossi{flex-direction:column;gap:10px}
  .cot-bossi img{width:44px;height:44px}
}

/* ── La escalera de entrada ──────────────────────────────────────
   Antes la pagina solo mostraba el precio del paquete completo, y un
   negocio chico asumia que no le alcanzaba. El dato que faltaba no era
   un descuento: era saber que con UNA cosa chica ya esta dentro. */
.mk-verde{color:var(--mk-olivo)}
.mk-escalera{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
             align-items:stretch}
.mk-esc{background:#fff;border:1px solid var(--mk-linea);border-radius:18px;padding:26px 22px;
        position:relative}
.mk-esc:first-child{border-color:#DCE9C8;background:#F7FBF1}
.mk-esc-precio{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.07em;
               text-transform:uppercase;color:var(--mk-gris);margin-bottom:10px}
.mk-esc:first-child .mk-esc-precio{color:#4A6B22;font-size:.9rem}
.mk-esc h3{margin:0 0 8px;font-size:1.08rem;font-weight:800;color:var(--mk-marino)}
.mk-esc p{margin:0;font-size:.93rem;line-height:1.65;color:var(--mk-gris)}

/* ── Programa de apoyo: nota de cierre ───────────────────────────── */
.mk-apoyo-nota{max-width:720px;margin:30px auto 0;padding:22px 26px;background:#fff;
               border:1px solid var(--mk-linea);border-left:3px solid var(--mk-cielo);
               border-radius:14px;font-size:.98rem;line-height:1.72;color:var(--mk-gris)}
.mk-apoyo-nota strong{color:var(--mk-tinta)}

/* ── Casos borde ─────────────────────────────────────────────────
   Existen porque aplicar la regla al pie de la letra en estos tres
   casos seria absurdo — y un prospecto que ve su caso contemplado
   confia mucho mas que uno al que le prometen flexibilidad en abstracto. */
.mk-casos{display:grid;gap:16px}
.mk-caso{background:#fff;border:1px solid var(--mk-linea);border-radius:18px;padding:26px 24px}
.mk-caso h3{margin:0 0 12px;font-size:1.1rem;font-weight:800;color:var(--mk-marino)}
.mk-caso p{margin:0 0 12px;font-size:.96rem;line-height:1.7;color:var(--mk-gris)}
.mk-caso p:last-child{margin-bottom:0}
.mk-caso-ojo{background:var(--mk-ground);border-radius:12px;padding:14px 16px;
             font-size:.9rem!important}

/* ── Subasta ─────────────────────────────────────────────────────
   El orden importa y es el mensaje: ticket -> negociar -> subastar.
   Subastar primero seria enfrentar aliados; negociar primero los deja
   resolverlo entre ellos, que es como se resuelve la mayoria. */
.mk-subasta{max-width:760px;margin:0 auto;display:grid;gap:0}
.mk-sub-paso{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--mk-linea)}
.mk-sub-paso:last-child{border-bottom:0}
.mk-sub-num{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--mk-marino);
            color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.mk-sub-paso h3{margin:6px 0 8px;font-size:1.08rem;font-weight:800;color:var(--mk-marino)}
.mk-sub-paso p{margin:0;font-size:.95rem;line-height:1.7;color:var(--mk-gris)}

@media(max-width:640px){
  .mk-sub-paso{gap:14px;padding:18px 0}
  .mk-sub-num{width:32px;height:32px;font-size:.9rem}
}

/* ── Los cuatro rangos por monto ─────────────────────────────────
   Eje distinto al de los tiers de membresia, y por eso los nombres no
   se repiten: aqui se mide cuanto contrataste, alla si pagas cuota. */
.mk-rangos{max-width:820px;margin:36px auto 0}
.mk-rangos h3{font-size:1.2rem;font-weight:800;color:var(--mk-marino);margin:0 0 8px}
.mk-rangos-sub{font-size:.96rem;line-height:1.7;color:var(--mk-gris);margin:0 0 18px}
.mk-rangos table{width:100%;border-collapse:collapse;background:#fff;
                 border:1px solid var(--mk-linea);border-radius:16px;overflow:hidden}
.mk-rangos td{padding:16px;border-top:1px solid var(--mk-linea);font-size:.92rem;
              line-height:1.6;color:var(--mk-gris);vertical-align:top}
.mk-rangos tr:first-child td{border-top:0}
.mk-rangos td:first-child{width:210px;color:var(--mk-tinta)}
.mk-rangos td b{color:var(--mk-tinta)}
.mk-rangos td span{display:block;font-size:.8rem;font-weight:700;color:var(--mk-cielo);
                   margin-top:2px}
.mk-rangos tr.mk-destacado td{background:#F7FBF1}
.mk-rangos tr.mk-destacado td:first-child{box-shadow:inset 3px 0 0 var(--mk-olivo)}

.cot-rango{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;
           text-transform:uppercase;color:#fff;background:var(--mk-marino);
           padding:5px 12px;border-radius:99px;margin-bottom:12px}
.cot-carta-mini{margin-top:10px!important;font-size:.82rem!important;opacity:.85}

@media(max-width:640px){
  .mk-rangos td:first-child{width:auto}
  .mk-rangos table{display:block;overflow-x:auto}
}

/* Lo que no aplica en ESE evento. Distinto de lo bloqueado por rango: eso
   se desbloquea pagando mas, esto no se desbloquea con dinero. */
.cot-noaplica{margin-top:18px;padding:16px 18px;background:#FBF4E9;
              border:1px solid #EBDCC4;border-radius:14px}
.cot-noaplica ul{list-style:none;margin:0 0 10px;padding:0}
.cot-noaplica li{position:relative;padding-left:24px;margin-bottom:7px;font-size:.9rem;
                 line-height:1.55;color:#8A6320}
.cot-noaplica li::before{content:'—';position:absolute;left:0;top:0;font-weight:800}
.cot-noaplica p{margin:0;font-size:.84rem;line-height:1.6;color:#8A6320;opacity:.9}

/* Las reglas del rango. Van visibles y no en letra chica a proposito: son
   justo lo que un prospecto pregunta en la junta, y contestarlo antes de
   que lo pregunte es lo que hace que confie en el resto. */
.mk-rangos-reglas{margin-top:20px;padding:20px 22px;background:#fff;
                  border:1px solid var(--mk-linea);border-left:3px solid var(--mk-cielo);
                  border-radius:14px}
.mk-rangos-reglas strong{display:block;font-size:.95rem;color:var(--mk-tinta);
                         margin-bottom:12px}
.mk-rangos-reglas ul{margin:0;padding-left:20px}
.mk-rangos-reglas li{font-size:.92rem;line-height:1.68;color:var(--mk-gris);
                     margin-bottom:10px}
.mk-rangos-reglas li:last-child{margin-bottom:0}
.mk-rangos-reglas li b{color:var(--mk-tinta)}

/* ── Exclusividad de nicho ───────────────────────────────────────
   Solo desde Protagonista, y por NICHO. Una categoria ancha
   ("bebidas") bloquea medio mercado y para la marca vale lo mismo que
   una precisa ("agua embotellada"). */
.mk-exclusiva{max-width:760px;margin:30px auto 0;padding:26px 28px;background:#fff;
              border:1px solid var(--mk-linea);border-radius:18px}
.mk-exclusiva h3{margin:0 0 10px;font-size:1.14rem;font-weight:800;color:var(--mk-marino)}
.mk-exclusiva > p{margin:0 0 16px;font-size:.98rem;line-height:1.7;color:var(--mk-gris)}
.mk-exclusiva ul{margin:0;padding-left:20px}
.mk-exclusiva li{font-size:.93rem;line-height:1.68;color:var(--mk-gris);margin-bottom:11px}
.mk-exclusiva li:last-child{margin-bottom:0}
.mk-exclusiva li b{color:var(--mk-tinta)}

/* ── Contactos ───────────────────────────────────────────────────── */
.mk-contactos{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.mk-cto{display:block;background:#fff;border:1px solid var(--mk-linea);border-radius:18px;
        padding:24px 22px;text-decoration:none;transition:transform .2s,border-color .2s,
        box-shadow .2s}
.mk-cto:hover{transform:translateY(-4px);border-color:var(--mk-cielo);
              box-shadow:0 18px 40px rgba(18,49,88,.10)}
.mk-cto-ico{display:block;font-size:1.7rem;margin-bottom:10px}
.mk-cto strong{display:block;font-size:1.02rem;font-weight:800;color:var(--mk-marino);
               margin-bottom:4px}
.mk-cto span{display:block;font-size:.93rem;color:var(--mk-tinta)}
.mk-cto em{display:block;font-size:.8rem;color:var(--mk-gris);font-style:normal;margin-top:6px}

/* Acceso al panel privado desde la nav pública */
.mk-nav-cuenta{margin-right:10px}
@media(max-width:900px){ .mk-nav-cuenta{display:none} }