#mp2026{--mp-azul:#0B5ED7;--mp-tinta:#0B2B4B;--mp-gris:#5A6B7C;--mp-linea:#E4EAF1;--mp-verde:#1B8A5A}

/* ---------- Rejilla de planes: fila centrada, tarjetas de igual alto ---------- */
#mp2026 .mp-planes{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:24px;margin:10px auto 30px;max-width:1200px}
#mp2026 .mp-card{position:relative;flex:1 1 240px;max-width:340px;display:flex;flex-direction:column;justify-content:space-between;
  background:#fff;border:1px solid var(--mp-linea);border-radius:18px;padding:36px 24px 26px;text-align:center;
  box-shadow:0 2px 10px rgba(11,43,75,.05);transition:transform .18s ease,box-shadow .18s ease}
#mp2026 .mp-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(11,43,75,.10)}
/* borde de 1px + anillo: se ve como 2px pero mantiene la geometría igual que las demás tarjetas,
   así los botones quedan alineados al píxel */
#mp2026 .mp-card--destacada{border:1px solid var(--mp-azul);box-shadow:0 0 0 1px var(--mp-azul),0 14px 34px rgba(11,94,215,.16)}
#mp2026 .mp-card--destacada:hover{box-shadow:0 18px 40px rgba(11,94,215,.22)}
#mp2026 .mp-card--elite{background:linear-gradient(160deg,#0B2B4B,#123A66);border-color:#0B2B4B}

/* ---------- Badge superpuesto en el borde superior ---------- */
#mp2026 .mp-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--mp-azul);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;padding:6px 16px;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 16px rgba(11,94,215,.35)}

/* ---------- Nombre del plan con icono SVG ---------- */
#mp2026 .mp-nombre{display:flex;align-items:center;justify-content:center;gap:9px;margin:0;font-size:13px;font-weight:800;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--mp-gris)}
#mp2026 .mp-ico{width:28px;height:28px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:#EAF2FE;flex:0 0 28px}
#mp2026 .mp-ico svg{width:16px;height:16px;fill:none;stroke:var(--mp-azul);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#mp2026 .mp-ico--micro{background:#EAF7EF}
#mp2026 .mp-ico--micro svg{stroke:var(--mp-verde)}
#mp2026 .mp-ico--elite{background:rgba(255,215,0,.16)}
#mp2026 .mp-ico--elite svg{stroke:#FFD700}
#mp2026 .mp-card--elite .mp-nombre{color:#CFE0F2}

/* ---------- Precio ---------- */
#mp2026 .mp-precio{margin:16px 0 2px;font-size:38px;font-weight:800;letter-spacing:-1px;color:var(--mp-tinta);line-height:1}
#mp2026 .mp-periodo{margin:0 0 22px;font-size:13px;color:var(--mp-gris)}
#mp2026 .mp-card--elite .mp-precio{color:#fff}
#mp2026 .mp-card--elite .mp-periodo{color:#AFC3D8}

/* ---------- Características (crecen para empujar el botón al fondo) ---------- */
#mp2026 .mp-lista{list-style:none;padding:0;margin:0 0 22px;text-align:left;flex:1 1 auto}
#mp2026 .mp-lista li{display:flex;align-items:flex-start;gap:9px;padding:9px 0;font-size:13.5px;line-height:1.35;
  color:#33475B;border-bottom:1px solid #F2F5F9}
#mp2026 .mp-lista li:last-child{border-bottom:0}
#mp2026 .mp-lista li.mp-no{color:#93A2B2}
#mp2026 .mp-lista svg{flex:0 0 16px;width:16px;height:16px;margin-top:1px;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mp2026 .mp-lista li.mp-si svg{stroke:var(--mp-verde);stroke-width:2.4}
#mp2026 .mp-lista li.mp-no svg{stroke:#B9C4CF;stroke-width:2.2}
#mp2026 .mp-card--elite .mp-lista li{color:#DCE8F4;border-bottom-color:rgba(255,255,255,.10)}
#mp2026 .mp-card--elite .mp-lista li.mp-no{color:#8FA6BC}
#mp2026 .mp-card--elite .mp-lista li.mp-si svg{stroke:#7FD1A8}

/* ---------- Formulario y campos ---------- */
#mp2026 .mp-form{margin:0;display:flex;flex-direction:column;gap:10px}
#mp2026 .mp-input{width:100%;box-sizing:border-box;padding:12px 14px;margin:0;border:1px solid #D7DEE7;border-radius:10px;
  font-family:inherit;font-size:14px;color:#243447;background:#fff;transition:border-color .15s ease,box-shadow .15s ease}
#mp2026 .mp-input::placeholder{color:#93A2B2}
#mp2026 .mp-input:focus{outline:none;border-color:var(--mp-azul);box-shadow:0 0 0 3px rgba(11,94,215,.15)}

/* ---------- Botones de acción ---------- */
#mp2026 .mp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:14px 18px;margin:0;
  border:0;border-radius:12px;background:var(--mp-azul);color:#fff;font-family:inherit;font-size:15px;font-weight:700;
  cursor:pointer;transition:background .15s ease,transform .12s ease,box-shadow .15s ease}
#mp2026 .mp-btn:hover{background:#0A54C2;transform:translateY(-1px);box-shadow:0 8px 20px rgba(11,94,215,.25)}
#mp2026 .mp-btn:focus-visible{outline:3px solid rgba(11,94,215,.35);outline-offset:2px}
#mp2026 .mp-btn svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#mp2026 .mp-btn--destacado{background:var(--mp-tinta)}
#mp2026 .mp-btn--destacado:hover{background:#123A66;box-shadow:0 8px 20px rgba(11,43,75,.28)}

/* ---------- Franjas de confianza y medios de pago ---------- */
#mp2026 .mp-confianza{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;padding:16px 20px;margin:0 0 14px;
  background:#F1FBF4;border:1px solid #CDEBD8;border-radius:14px;color:#155F3E;font-size:14px;font-weight:600}
#mp2026 .mp-confianza span{display:inline-flex;align-items:center;gap:7px}
#mp2026 .mp-confianza svg{width:15px;height:15px;fill:none;stroke:#1B8A5A;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#mp2026 .mp-pagos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px 12px;color:#7A8A99;font-size:13.5px;padding:4px 0 28px}
#mp2026 .mp-pagos .mp-candado{display:inline-flex;align-items:center;gap:7px;color:#5A6B7C;font-weight:600}
#mp2026 .mp-pagos svg{width:15px;height:15px;fill:none;stroke:#5A6B7C;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#mp2026 .mp-pagos em{font-style:normal;background:#fff;border:1px solid var(--mp-linea);border-radius:999px;padding:5px 13px;color:#5A6B7C}

/* ---------- Pantallas pequeñas ---------- */
@media (max-width:640px){
  #mp2026 .mp-card{flex:1 1 100%;max-width:100%;padding:34px 20px 24px}
  #mp2026 .mp-precio{font-size:34px}
}