/* ============================================================
   mini.css — el portal en NIVEL INICIAL (fase 2, tanda B).
   Recreación del paquete «Portal cliente v2» con nivel = mini:
   armazón nuevo (barra lateral, cabecera de página, navegación)
   y las seis pantallas del nivel inicial.

   CONVIVE con el portal de hoy: esta hoja solo se carga cuando
   el acceso apunta a una cuenta en estado `mini` (portal.js).
   Por eso todo cuelga de `.mini`: ni una regla de aquí puede
   alcanzar al portal de un cliente con contraseña.

   Colores y tipografías, de tokens.css (brandbook pág. 13). Los
   pocos valores que el brandbook no tiene —los grises de la
   barra lateral sobre azul noche— están declarados arriba con su
   nombre, no repartidos por el fichero.
   ============================================================ */

.mini {
  --mn-apagado: #8E96B8;      /* metadatos sobre noche */
  --mn-claro: #D3D8EA;        /* enlaces de menú */
  --mn-suave: #B9BFD6;        /* párrafos sobre noche */
  --mn-linea: rgba(255,255,255,.12);
  --mn-panel: rgba(255,255,255,.06);
  --mn-ambar: #E0B84C;
  --mn-ambar-texto: #8F6200;
  --mn-verde-borde: #C3DFCF;
  --mn-rojo-borde: #F1C9C5;
  --mn-azul-borde: #C5CFFA;
  --mn-lateral: 224px;

  display: grid;
  grid-template-columns: var(--mn-lateral) minmax(0, 1fr);
  min-height: 100vh;
  font-family: var(--ms-font);
  color: var(--ms-tinta);
  background: #F4F5FA;
}

/* ===== Barra lateral ===== */
.mn-lateral { background: var(--ms-noche); color: #fff; padding: 20px 12px 16px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.mn-logo { display: flex; align-items: center; gap: 9px; padding: 0 10px; }
.mn-logo .puntos { display: flex; align-items: center; gap: 3px; height: 20px; }
.mn-logo .puntos span { border-radius: 999px; background: var(--ms-azul); display: block; }
.mn-logo .puntos span:nth-child(1) { width: 10px; height: 10px; }
.mn-logo .puntos span:nth-child(2) { width: 6px; height: 6px; opacity: .8; }
.mn-logo .puntos span:nth-child(3) { width: 3px; height: 3px; opacity: .6; }
.mn-logo .letras { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.mn-logo .me { color: var(--mn-apagado); font-weight: 400; }
.mn-logo .suena { color: var(--ms-azul); }

.mn-marca { margin: 20px 0 14px; padding: 12px 0 14px; border-top: 1px solid var(--mn-linea); border-bottom: 1px solid var(--mn-linea); }
.mn-marca .rotulo { padding: 0 10px; font-family: var(--ms-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--mn-apagado); }
/* «nombre largo»: parte en varias líneas, nunca se recorta con puntos
   suspensivos — es el nombre del cliente (decisión 8 del paquete). */
.mn-marca .nombre { padding: 0 10px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-top: 4px; overflow-wrap: anywhere; }
.mn-marca .nivel { padding: 0 10px; font-size: 12px; color: var(--mn-suave); margin-top: 3px; }
.mn-marca .nivel span { color: var(--mn-apagado); }

.mn-nav { display: flex; flex-direction: column; gap: 2px; }
.mn-item { padding: 8px 10px; border-radius: 7px; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 9px; color: var(--mn-claro); font-weight: 500; background: none; border: 0; width: 100%; text-align: left; font-family: inherit; }
.mn-item:hover { background: rgba(255,255,255,.06); }
.mn-item.on { background: var(--ms-azul); color: #fff; font-weight: 700; }
.mn-item.bloqueado { opacity: .75; }
.mn-item .ico { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mn-item .txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-item .dato { font-family: var(--ms-mono); font-size: 10px; color: var(--mn-apagado); display: flex; align-items: center; white-space: nowrap; flex: 0 0 auto; }
.mn-item.on .dato { color: rgba(255,255,255,.7); }

.mn-cta { margin: 0 0 10px; padding: 12px; border-radius: 10px; background: var(--ms-azul); cursor: pointer; border: 0; color: #fff; text-align: left; font-family: inherit; width: 100%; }
.mn-cta.hecha { background: var(--ms-visible); cursor: default; }
.mn-cta .t { font-size: 12px; font-weight: 700; line-height: 1.35; }
.mn-cta .s { font-size: 11px; color: #D3D8EA; margin-top: 4px; line-height: 1.4; }
.mn-cta .a { font-size: 11px; font-weight: 700; margin-top: 8px; }

.mn-relleno { flex: 1 1 auto; min-height: 12px; }
.mn-pie { padding: 12px 10px 0; border-top: 1px solid var(--mn-linea); font-size: 11px; color: var(--mn-apagado); line-height: 1.5; overflow-wrap: anywhere; }
.mn-pie strong { color: #fff; font-weight: 500; }
.mn-pie a { color: #fff; font-weight: 500; text-decoration: none; }
.mn-pie .tour { margin-top: 8px; color: #8FA6FF; cursor: pointer; text-decoration: underline; background: none; border: 0; padding: 0; font: inherit; }
.mn-pie .sesion { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; align-items: baseline; }
.mn-pie .sesion .email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-pie .sesion button { text-decoration: underline; cursor: pointer; color: #fff; white-space: nowrap; background: none; border: 0; padding: 0; font: inherit; }

/* ===== Cuerpo ===== */
.mn-cuerpo { padding: 24px 32px 56px; width: 100%; max-width: 1240px; }
.mn-cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.mn-cabecera .eyebrow { font-family: var(--ms-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-deshab); }
.mn-titulo { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.mn-titulo .barra { width: 4px; height: 22px; border-radius: 2px; background: var(--ms-azul); display: block; flex: 0 0 auto; }
.mn-titulo .t { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; overflow-wrap: anywhere; line-height: 1.2; }
.mn-cab-der { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mn-medicion { font-family: var(--ms-mono); font-size: 12px; color: var(--ms-apoyo); }
.mn-btn-pdf { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 8px; background: var(--ms-azul); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
.mn-btn-pdf:hover { background: var(--ms-azul-hover); color: #fff; }

/* ===== Piezas comunes ===== */
.mn-tarjeta { border: 1px solid var(--ms-borde-claro); border-radius: 12px; background: #fff; padding: 16px 18px; }
.mn-rotulo { font-family: var(--ms-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-deshab); }
.mn-mono { font-family: var(--ms-mono); }
.mn-nota { font-size: 12px; color: var(--ms-apoyo); line-height: 1.5; }
.mn-enlace { font-size: 12px; color: var(--ms-azul); font-weight: 500; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; text-align: left; }
.mn-banda { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 14px; border-radius: 12px; flex-wrap: wrap; font-size: 13px; line-height: 1.5; }
.mn-banda.verde { border: 1px solid var(--mn-verde-borde); border-left: 4px solid var(--ms-visible); background: var(--ms-visible-bg); }
.mn-banda.azul { border: 1px solid var(--mn-azul-borde); border-left: 4px solid var(--ms-azul); background: #F4F6FF; }
.mn-banda .etq { font-family: var(--ms-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.mn-banda.verde .etq { color: var(--ms-visible); }
.mn-banda.azul .etq { color: var(--ms-azul); }
.mn-banda .cuando { margin-left: auto; font-family: var(--ms-mono); font-size: 11px; color: var(--ms-apoyo); }

/* ===== Resumen ===== */
.mn-hero-fila { display: flex; flex-wrap: wrap; gap: 14px; }
.mn-hero { flex: 1.7 1 640px; min-width: 0; background: var(--ms-noche); color: #fff; border-radius: 14px; padding: 26px 28px; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }
.mn-aro-col { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 150px; }
.mn-aro-col .mn-rotulo { color: var(--mn-apagado); font-size: 10px; letter-spacing: .1em; }
.mn-aro { width: 136px; height: 136px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.mn-aro-in { width: 110px; height: 110px; border-radius: 999px; background: var(--ms-noche); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.mn-aro-in .n { font-size: 44px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.mn-aro-in .de { font-family: var(--ms-mono); font-size: 11px; color: var(--mn-apagado); line-height: 1; }
.mn-pildora { padding: 3px 12px; border-radius: 999px; font-family: var(--ms-mono); font-size: 11px; letter-spacing: .04em; }
.mn-hero-texto { flex: 1 1 300px; min-width: 0; }
.mn-hero-texto .intro { font-size: 14px; color: var(--mn-suave); line-height: 1.55; max-width: 36em; }
.mn-hero-texto .titular { font-size: clamp(22px, 2.1vw, 30px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; max-width: 18em; margin-top: 10px; }
.mn-flujo { display: flex; align-items: stretch; gap: 6px; margin-top: 18px; max-width: 460px; flex-wrap: wrap; }
.mn-flujo .paso { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; }
.mn-flujo .flecha { font-family: var(--ms-mono); font-size: 14px; color: var(--mn-apagado); flex: 0 0 auto; }
.mn-flujo .caja { flex: 1 1 0; min-width: 0; padding: 8px 10px; border-radius: 8px; background: var(--mn-panel); border: 1px solid rgba(255,255,255,.14); }
.mn-flujo .caja.fin { background: rgba(179,48,43,.28); border-color: var(--ms-invisible); }
.mn-flujo .caja .n { font-family: var(--ms-mono); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.mn-flujo .caja .l { font-size: 11px; color: var(--mn-suave); margin-top: 4px; line-height: 1.3; }
.mn-boton-fantasma { display: inline-block; margin-top: 18px; padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); font-size: 12px; font-weight: 500; cursor: pointer; background: none; color: #fff; font-family: inherit; }

.mn-comp { flex: 1 1 300px; min-width: 0; border: 1px solid var(--ms-borde-claro); border-radius: 12px; background: #fff; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.mn-sin-comp { padding: 12px 14px; border-radius: 10px; background: var(--ms-fondo-claro); border: 1px dashed var(--ms-borde-claro); font-size: 13px; color: var(--ms-texto-claro); line-height: 1.55; }
.mn-barras { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 11px; padding: 4px 0; }
.mn-barra { display: flex; align-items: center; gap: 10px; }
.mn-barra .nombre { display: flex; align-items: center; gap: 6px; font-size: 12px; flex: 0 0 96px; min-width: 0; }
.mn-barra .nombre .punto { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; }
/* El nombre NO se recorta con puntos suspensivos: es el nombre del cliente
   (decisión 8 del paquete). Parte en varias líneas y la fila crece. */
.mn-barra .nombre .t { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.mn-barra .riel { flex: 1 1 auto; height: 6px; background: var(--ms-papel); border-radius: 999px; }
.mn-barra .lleno { height: 6px; border-radius: 999px; min-width: 2px; }
.mn-barra .valor { font-family: var(--ms-mono); font-size: 10px; flex: 0 0 52px; text-align: right; white-space: nowrap; color: var(--ms-texto-claro); }
.mn-barra .valor b { color: var(--ms-tinta); }
.mn-barra.propia .nombre { font-weight: 700; }
.mn-barra.velada { opacity: .55; cursor: pointer; }
.mn-barra.velada .nombre .t, .mn-barra.velada .valor { filter: blur(3px); }

.mn-porias { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 8px; margin-top: 10px; }
.mn-poria { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; background: var(--ms-fondo-claro); border: 1px solid var(--ms-borde-claro); min-width: 0; }
.mn-poria.futura { border-style: dashed; opacity: .6; }
.mn-poria .logo,
.mn-motor .logo { width: 26px; height: 26px; border-radius: 7px; background: #fff; border: 1px solid var(--ms-borde-claro); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-family: var(--ms-mono); font-size: 11px; font-weight: 700; color: var(--ms-apoyo); }
.mn-poria .logo img,
.mn-motor .logo img { width: 16px; height: 16px; object-fit: contain; display: block; }
.mn-poria .logo .google,
.mn-motor .logo .google { width: 16px; height: 16px; border-radius: 999px; display: block; background: conic-gradient(#EA4335 0 90deg, #FBBC05 90deg 180deg, #34A853 180deg 270deg, #4285F4 270deg 360deg); }
.mn-poria .cuerpo { min-width: 0; flex: 1 1 auto; }
.mn-poria .fila1 { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.mn-poria .ia { font-size: 12px; font-weight: 700; line-height: 1.2; }
.mn-poria .v { font-family: var(--ms-mono); font-size: 12px; font-weight: 700; white-space: nowrap; }
.mn-poria .estado { font-family: var(--ms-mono); font-size: 10px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mn-cita { border: 1px solid var(--ms-borde-claro); border-left: 4px solid var(--ms-eco); border-radius: 12px; background: #fff; padding: 16px 20px; margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; }
.mn-cita .texto { font-size: 15px; line-height: 1.5; font-style: italic; }
.mn-cita .origen { font-family: var(--ms-mono); font-size: 11px; color: var(--ms-apoyo); margin-top: 8px; line-height: 1.5; }

.mn-primero { border: 1px solid var(--ms-borde-claro); border-left: 4px solid var(--ms-visible); border-radius: 12px; background: #fff; padding: 16px 20px; margin-top: 14px; }
.mn-primero .cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mn-primero .cab .t { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.mn-primero .rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 24px; margin-top: 10px; }
.mn-primero .item { display: flex; gap: 10px; font-size: 14px; line-height: 1.55; }
.mn-primero .item .n { font-family: var(--ms-mono); font-size: 12px; font-weight: 700; color: var(--ms-visible); flex: 0 0 auto; padding-top: 2px; }

.mn-diag { margin-top: 14px; padding: 14px; background: var(--ms-papel); border: 1px solid var(--ms-borde-claro); border-radius: 12px; }
.mn-diag .cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.mn-diag .cab .t { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.mn-diag .cab .t span { font-size: 13px; color: var(--ms-apoyo); font-weight: 400; }
.mn-bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.mn-bloque { border: 1px solid var(--ms-borde-claro); border-top: 3px solid var(--ms-invisible); border-radius: 12px; background: #fff; padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; overflow: hidden; text-align: left; font-family: inherit; }
.mn-bloque.plan { border-top-color: var(--ms-visible); }
.mn-bloque .velo { position: absolute; inset: 0; background: rgba(251,251,254,.78); backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px; text-align: center; z-index: 2; }
.mn-bloque .velo .t { font-size: 12px; font-weight: 700; }
.mn-bloque .velo .n { font-size: 11px; color: var(--ms-apoyo); }
.mn-bloque .fila1 { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.mn-bloque .etq { font-family: var(--ms-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--ms-invisible); }
.mn-bloque.plan .etq { color: var(--ms-visible); }
.mn-bloque .pill { padding: 1px 8px; border-radius: 999px; font-family: var(--ms-mono); font-size: 10px; white-space: nowrap; background: var(--ms-papel); color: var(--ms-deshab); }
.mn-bloque.plan .pill { background: var(--ms-visible-bg); color: var(--ms-visible); }
.mn-bloque .tit { font-size: 13px; font-weight: 700; line-height: 1.3; }
.mn-bloque .linea { font-size: 12px; color: var(--ms-texto-claro); line-height: 1.45; }
.mn-bloque .ver { font-size: 12px; color: var(--ms-azul); font-weight: 500; margin-top: auto; }

/* ===== Competidores ===== */
.mn-tabla { border: 1px solid var(--ms-borde-claro); border-radius: 12px; background: #fff; overflow-x: auto; }
.mn-tabla .intro { padding: 12px 18px; border-bottom: 1px solid var(--ms-papel); font-size: 13px; color: var(--ms-texto-claro); line-height: 1.5; }
.mn-fila { display: grid; grid-template-columns: minmax(140px, 1.4fr) repeat(2, minmax(90px, 1fr)); gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--ms-papel); align-items: center; }
.mn-fila.cabeza { padding: 8px 18px; background: var(--ms-fondo-claro); border-bottom: 1px solid var(--ms-borde-claro); font-family: var(--ms-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ms-deshab); }
.mn-fila.cabeza .der, .mn-fila .der { text-align: right; }
.mn-fila .marca { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mn-fila .marca .punto { width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; }
.mn-fila.propia { background: #FDF3F2; }
.mn-fila.propia .marca { font-weight: 700; }
.mn-fila .der { font-family: var(--ms-mono); font-size: 12px; }
.mn-fila.velada { opacity: .7; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mn-fila.velada .borroso { filter: blur(3px); font-size: 13px; }

/* ===== Las preguntas ===== */
.mn-preg-cab { border: 1px solid var(--ms-borde-claro); border-radius: 12px; background: #fff; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ms-texto-claro); line-height: 1.5; }
.mn-preguntas { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.mn-pregunta { border: 1px solid var(--ms-borde-claro); border-radius: 10px; background: #fff; overflow: hidden; }
.mn-pregunta .fila { display: grid; grid-template-columns: 24px minmax(160px, 1fr) auto 18px; gap: 8px; padding: 10px 16px; align-items: center; cursor: pointer; width: 100%; background: none; border: 0; text-align: left; font-family: inherit; }
.mn-pregunta .n { font-family: var(--ms-mono); font-size: 11px; color: var(--ms-deshab); }
.mn-pregunta .p { font-size: 13px; line-height: 1.35; display: block; }
.mn-pregunta .tipo { font-family: var(--ms-mono); font-size: 10px; color: var(--ms-apoyo); margin-top: 2px; display: block; }
.mn-celdas { display: flex; gap: 6px; }
.mn-celda { min-width: 36px; text-align: center; padding: 2px 6px; border-radius: 6px; font-family: var(--ms-mono); font-size: 11px; font-weight: 700; }
.mn-celda.si { background: var(--ms-visible-bg); color: var(--ms-visible); }
.mn-celda.no { background: var(--ms-invisible-bg); color: var(--ms-invisible); }
.mn-celda.vacia { background: var(--ms-papel); color: var(--ms-deshab); }
.mn-pregunta .chevron { font-size: 13px; color: var(--ms-deshab); text-align: right; }
.mn-respuestas { padding: 0 16px 12px 54px; background: var(--ms-fondo-claro); border-top: 1px solid var(--ms-papel); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.mn-respuesta { border: 1px solid var(--ms-papel); border-radius: 10px; background: #fff; padding: 12px 14px; margin-top: 12px; }
.mn-respuesta .cab { display: flex; justify-content: space-between; gap: 8px; }
.mn-respuesta .ia { font-size: 12px; font-weight: 700; }
.mn-respuesta .res { font-family: var(--ms-mono); font-size: 10px; }
.mn-respuesta .texto { font-size: 13px; line-height: 1.5; font-style: italic; color: var(--ms-texto-claro); margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.mn-respuesta .nombra { font-family: var(--ms-mono); font-size: 10px; color: var(--ms-apoyo); margin-top: 8px; overflow-wrap: anywhere; }
.mn-preg-pie { font-family: var(--ms-mono); font-size: 11px; color: var(--ms-apoyo); margin-top: 12px; line-height: 1.6; }

/* ===== Plan ===== */
.mn-contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.mn-contador { border: 1px solid var(--ms-borde-claro); border-radius: 10px; background: #fff; padding: 12px 14px; }
.mn-contador .l { font-family: var(--ms-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.mn-contador .v { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.mn-contador .v .n { font-family: var(--ms-mono); font-size: 26px; font-weight: 700; line-height: 1; }
.mn-contador .v .nota { font-size: 11px; color: var(--ms-apoyo); }
.mn-grupo { border: 1px solid var(--ms-borde-claro); border-radius: 12px; background: #fff; overflow: hidden; margin-top: 12px; }
.mn-grupo .cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 16px; background: var(--ms-fondo-claro); border-bottom: 1px solid var(--ms-papel); flex-wrap: wrap; }
.mn-grupo .cab .t { font-size: 13px; font-weight: 700; }
.mn-grupo .cab .r { font-family: var(--ms-mono); font-size: 11px; color: var(--ms-apoyo); }
.mn-accion { border-bottom: 1px solid var(--ms-papel); }
.mn-accion .fila { display: grid; grid-template-columns: 28px 100px minmax(0, 1fr) auto 20px; gap: 12px; padding: 10px 16px; align-items: center; cursor: pointer; width: 100%; background: none; border: 0; text-align: left; font-family: inherit; }
.mn-accion.abierta .fila { background: var(--ms-papel); }
.mn-accion .num { font-family: var(--ms-mono); font-size: 12px; font-weight: 700; color: var(--ms-azul); }
.mn-accion .estado { display: inline-block; padding: 2px 9px; border-radius: 999px; font-family: var(--ms-mono); font-size: 10px; white-space: nowrap; background: var(--ms-papel); color: var(--ms-azul); }
.mn-accion .tit { font-size: 13px; font-weight: 500; line-height: 1.3; min-width: 0; }
.mn-accion.abierta .tit { font-weight: 700; color: var(--ms-azul); }
.mn-accion .imp { font-family: var(--ms-mono); font-size: 10px; color: var(--ms-azul); white-space: nowrap; }
.mn-accion .chevron { font-size: 13px; color: var(--ms-deshab); text-align: right; }
.mn-detalle { padding: 0 16px 14px 56px; background: var(--ms-papel); }
.mn-detalle .caja { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); background: #fff; border: 1px solid #C9D3F5; border-radius: 10px; overflow: hidden; }
.mn-detalle .col { padding: 14px 16px; border-right: 1px solid var(--ms-papel); }
.mn-detalle .col:last-child { border-right: 0; }
.mn-detalle .col .r { font-family: var(--ms-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-azul); font-weight: 700; }
.mn-detalle .col .t { font-size: 13px; line-height: 1.55; margin-top: 6px; }

.mn-cierre { background: var(--ms-noche); color: #fff; border-radius: 12px; padding: 20px 22px; margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; }
.mn-cierre .r { font-family: var(--ms-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mn-apagado); }
.mn-cierre .t { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; margin-top: 6px; max-width: 36em; }
.mn-cierre .n { font-family: var(--ms-mono); font-size: 11px; color: var(--mn-suave); margin-top: 8px; }

.mn-btn-venta { height: 38px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--ms-azul); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; border: 0; font-family: inherit; }
.mn-btn-venta:hover { background: var(--ms-azul-hover); }
.mn-btn-venta.hecha, .mn-btn-venta.hecha:hover { background: var(--ms-visible); cursor: default; }
.mn-btn-venta.grande { height: 40px; padding: 0 20px; font-size: 14px; }

/* ===== Planes y precios ===== */
.mn-pasos-caja { background: var(--ms-noche); color: #fff; border-radius: 12px; padding: 22px 24px; }
.mn-pasos-caja .cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mn-pasos-caja .cab .t { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.mn-pasos-caja .cab .s { font-size: 12px; color: var(--mn-suave); }
.mn-pasos-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 16px; }
.mn-paso-venta { padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--mn-linea); display: flex; flex-direction: column; gap: 6px; }
.mn-paso-venta.actual { background: var(--ms-azul); border-color: var(--ms-azul); }
.mn-paso-venta.siguiente { border-color: rgba(255,255,255,.4); }
.mn-paso-venta .fila { display: flex; align-items: center; gap: 8px; }
.mn-paso-venta .num { width: 20px; height: 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--ms-mono); font-size: 10px; font-weight: 700; background: rgba(255,255,255,.12); color: var(--mn-suave); flex: 0 0 auto; }
.mn-paso-venta.hecho .num { background: var(--ms-visible); color: #fff; }
.mn-paso-venta.actual .num { background: #fff; color: var(--ms-azul); }
.mn-paso-venta .l { font-size: 13px; font-weight: 700; }
.mn-paso-venta .s { font-size: 11px; line-height: 1.4; color: var(--mn-suave); }
.mn-paso-venta .e { font-family: var(--ms-mono); font-size: 10px; margin-top: auto; color: var(--mn-apagado); }
.mn-paso-venta.hecho .e { color: #7FCBA4; }
.mn-paso-venta.actual .e, .mn-paso-venta.siguiente .e { color: #fff; }

.mn-ofertas { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 12px; margin-top: 12px; align-items: start; }
.mn-oferta-pri { border: 2px solid var(--ms-azul); border-radius: 12px; background: #fff; padding: 22px 24px; position: relative; }
.mn-oferta-pri .cinta { position: absolute; top: -11px; left: 20px; padding: 3px 10px; border-radius: 999px; background: var(--ms-azul); color: #fff; font-family: var(--ms-mono); font-size: 10px; }
.mn-oferta-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.mn-oferta-cab .etq { font-family: var(--ms-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-azul); font-weight: 700; }
.mn-oferta-cab .nombre { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin-top: 4px; }
.mn-oferta-cab .que { font-size: 14px; color: var(--ms-texto-claro); line-height: 1.55; margin-top: 8px; max-width: 36em; }
.mn-precio { text-align: right; flex: 0 0 auto; }
.mn-precio .n { font-family: var(--ms-mono); font-size: 36px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.mn-precio .eur { font-size: 20px; font-weight: 700; }
.mn-precio .per { font-size: 12px; color: var(--ms-apoyo); margin-top: 2px; }
.mn-comparativa { margin-top: 18px; border: 1px solid var(--ms-borde-claro); border-radius: 10px; overflow: hidden; }
.mn-comparativa .fila { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--ms-papel); align-items: center; }
.mn-comparativa .fila.cabeza { padding: 8px 14px; background: var(--ms-fondo-claro); border-bottom: 1px solid var(--ms-borde-claro); font-family: var(--ms-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ms-deshab); }
.mn-comparativa .l { font-size: 13px; }
.mn-comparativa .v { text-align: right; font-family: var(--ms-mono); font-size: 12px; color: var(--ms-deshab); }
.mn-comparativa .v.completa { font-weight: 700; color: var(--ms-azul); }
.mn-oferta-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.mn-oferta-pie .req { font-family: var(--ms-mono); font-size: 11px; color: var(--ms-apoyo); }
.mn-secundarias { display: flex; flex-direction: column; gap: 12px; }
.mn-oferta-sec { border: 1px solid var(--ms-borde-claro); border-radius: 12px; background: #fff; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; opacity: .75; }
.mn-oferta-sec .fila1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mn-oferta-sec .etq { font-family: var(--ms-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-deshab); }
.mn-oferta-sec .precio { display: flex; align-items: baseline; gap: 2px; }
.mn-oferta-sec .precio .n { font-family: var(--ms-mono); font-size: 20px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.mn-oferta-sec .precio .eur { font-size: 13px; font-weight: 700; }
.mn-oferta-sec .precio .per { font-size: 11px; color: var(--ms-apoyo); margin-left: 4px; }
.mn-oferta-sec .nombre { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.mn-oferta-sec .que { font-size: 12px; color: var(--ms-texto-claro); line-height: 1.5; }
.mn-incluye { display: flex; flex-direction: column; gap: 4px; }
.mn-incluye div { display: flex; gap: 7px; font-size: 12px; color: var(--ms-texto-claro); line-height: 1.4; }
.mn-incluye .tic { color: var(--ms-visible); flex: 0 0 auto; }
.mn-oferta-sec .pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.mn-oferta-sec .pie .req { font-family: var(--ms-mono); font-size: 10px; color: var(--ms-deshab); }
.mn-oferta-sec .pie .bloqueado { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--ms-fondo-claro); color: var(--ms-deshab); border: 1.5px solid var(--ms-borde-claro); }
.mn-planes-pie { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 12px; color: var(--ms-apoyo); line-height: 1.5; }

/* ===== Cómo lo medimos ===== */
.mn-formula { background: var(--ms-noche); color: #fff; border-radius: 12px; padding: 22px 24px; }
.mn-formula .fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.mn-formula .caja { padding: 12px 16px; border-radius: 10px; background: var(--mn-panel); border: 1px solid rgba(255,255,255,.14); min-width: 120px; }
.mn-formula .caja.fin { background: var(--ms-azul); border-color: var(--ms-azul); }
.mn-formula .caja .n { font-family: var(--ms-mono); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.mn-formula .caja .l { font-size: 12px; color: var(--mn-suave); margin-top: 4px; line-height: 1.3; }
.mn-formula .op { font-family: var(--ms-mono); font-size: 20px; color: var(--mn-apagado); }
.mn-formula .nota { font-size: 13px; color: var(--mn-suave); margin-top: 14px; line-height: 1.5; max-width: 60em; }
.mn-metodo-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.mn-metodo-tarjeta { border: 1px solid var(--ms-borde-claro); border-top: 3px solid var(--ms-azul); border-radius: 12px; background: #fff; padding: 18px 20px; }
.mn-metodo-tarjeta.roja { border-top-color: var(--ms-invisible); }
.mn-metodo-tarjeta .r { font-family: var(--ms-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-azul); font-weight: 700; }
.mn-metodo-tarjeta.roja .r { color: var(--ms-invisible); }
.mn-metodo-tarjeta .grande { font-family: var(--ms-mono); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; margin-top: 8px; }
.mn-metodo-tarjeta .t { font-size: 13px; line-height: 1.6; color: var(--ms-texto-claro); margin-top: 6px; }
.mn-pasos-cifra { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.mn-paso-cifra { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 10px; border-radius: 8px; background: var(--ms-fondo-claro); }
.mn-paso-cifra.fin { background: var(--ms-papel); }
.mn-paso-cifra .n { font-family: var(--ms-mono); font-size: 11px; font-weight: 700; color: var(--ms-azul); padding-top: 1px; }
.mn-paso-cifra .t { font-size: 13px; font-weight: 700; line-height: 1.35; }
.mn-paso-cifra .d { font-size: 12px; color: var(--ms-texto-claro); line-height: 1.5; margin-top: 2px; }
.mn-ficha { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 12px; margin-top: 10px; font-size: 13px; line-height: 1.45; }
.mn-ficha .k { font-family: var(--ms-mono); font-size: 10px; color: var(--ms-deshab); text-transform: uppercase; padding-top: 3px; }
.mn-ficha .v { overflow-wrap: anywhere; }
.mn-etiquetas { display: flex; gap: 6px 10px; flex-wrap: wrap; }
.mn-etiquetas .e { display: inline-flex; align-items: center; gap: 5px; }
.mn-etiquetas .punto { width: 8px; height: 8px; border-radius: 999px; }
.mn-semaforo { padding: 1px 8px; border-radius: 999px; font-family: var(--ms-mono); font-size: 10px; }
.mn-motores { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.mn-motor { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--ms-papel); border-radius: 8px; background: var(--ms-fondo-claro); }
.mn-motor.futuro { opacity: .55; }
.mn-motor .cuerpo { min-width: 0; flex: 1 1 auto; }
.mn-motor .ia { font-size: 12px; font-weight: 700; }
.mn-motor .modelo { font-family: var(--ms-mono); font-size: 10px; color: var(--ms-apoyo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-motor .nota { font-family: var(--ms-mono); font-size: 10px; color: var(--ms-texto-claro); white-space: nowrap; }

/* ===== Bloqueado ===== */
.mn-bloq-cab { max-width: 760px; }
.mn-bloq-cab .t { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.mn-bloq-cab .s { font-size: 15px; color: var(--ms-texto-claro); line-height: 1.6; margin-top: 12px; }
.mn-muestras { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 26px; }
.mn-muestra { border: 1px solid var(--ms-borde-claro); border-top: 4px solid var(--ms-invisible); border-radius: 12px; background: #fff; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.mn-muestra .fila1 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mn-muestra .num { font-family: var(--ms-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-invisible); font-weight: 700; }
.mn-muestra .tit { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.mn-muestra .preg { font-size: 14px; color: var(--ms-texto-claro); line-height: 1.55; }
.mn-muestra .pie { border-top: 1px solid var(--ms-papel); padding-top: 12px; margin-top: auto; }
.mn-muestra .pie .r { font-family: var(--ms-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ms-deshab); }
.mn-muestra .pie .m { font-size: 13px; line-height: 1.5; margin-top: 6px; padding: 10px 12px; background: var(--ms-invisible-bg); border-radius: 8px; }
.mn-bloq-cierre { background: var(--ms-noche); color: #fff; border-radius: 12px; padding: 24px 26px; margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; }
.mn-bloq-cierre .t { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; max-width: 30em; }
.mn-bloq-cierre .n { font-family: var(--ms-mono); font-size: 11px; color: var(--mn-suave); margin-top: 10px; }
.mn-bloq-cierre .cols { display: flex; flex-direction: column; gap: 8px; }
.mn-bloq-cierre .sub { font-size: 12px; color: var(--mn-suave); text-align: center; cursor: pointer; text-decoration: underline; background: none; border: 0; font-family: inherit; }

.mn-pie-pagina { border-top: 1px solid var(--ms-borde-claro); margin-top: 40px; padding-top: 16px; font-family: var(--ms-mono); font-size: 12px; color: var(--ms-apoyo); }

/* ===== El recorrido guiado ===== */
.mn-tour { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: flex-end; padding: 16px; pointer-events: none; }
.mn-tour-tarjeta { pointer-events: auto; width: min(400px, 100%); border-radius: 16px; background: var(--ms-noche); color: #fff; padding: 18px 20px 16px; box-shadow: 0 30px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.12); animation: tourEntra .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes tourEntra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.mn-tour-puntos { display: flex; gap: 4px; }
.mn-tour-puntos span { flex: 1 1 0; height: 4px; border-radius: 999px; background: rgba(255,255,255,.14); transition: background .3s ease; }
.mn-tour-puntos span.on { background: var(--ms-azul); }
.mn-tour-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; }
.mn-tour-cab .e { font-family: var(--ms-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #8FA6FF; font-weight: 700; }
.mn-tour-cab .c { font-family: var(--ms-mono); font-size: 10px; color: var(--mn-apagado); }
.mn-tour-tarjeta .t { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin-top: 6px; }
.mn-tour-tarjeta .d { font-size: 14px; color: #C5CBE0; line-height: 1.6; margin-top: 8px; }
.mn-tour-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; }
.mn-tour-pie .saltar { font-size: 12px; color: var(--mn-apagado); cursor: pointer; text-decoration: underline; background: none; border: 0; font-family: inherit; }
.mn-tour-pie .botones { display: flex; gap: 8px; }
.mn-tour-pie .atras { height: 36px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); font-size: 13px; cursor: pointer; background: none; color: #fff; font-family: inherit; }
.mn-tour-pie .siguiente { height: 36px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 8px; background: var(--ms-azul); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; border: 0; font-family: inherit; }

/* ===== Móvil: la barra lateral se pliega a una barra superior =====
   Esto NO está en el paquete (el portal se diseñó a 1240 px). Definido
   aquí: por debajo de 900 px la lateral deja de ser columna y pasa a
   barra superior pegajosa con la marca y un botón de menú; al abrirlo,
   la navegación cae como una hoja por debajo de la barra. El pie del
   menú —contacto, recorrido y salir— viaja dentro de esa hoja, que es
   donde el lead lo busca cuando no hay columna. */
@media (max-width: 900px) {
  .mini { grid-template-columns: minmax(0, 1fr); }
  .mn-lateral { position: sticky; top: 0; height: auto; flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px; z-index: 50; overflow: visible; border-bottom: 1px solid var(--mn-linea); }
  .mn-lateral .mn-marca { margin: 0; padding: 0; border: 0; flex: 1 1 auto; min-width: 0; }
  .mn-lateral .mn-marca .rotulo, .mn-lateral .mn-marca .nivel { display: none; }
  .mn-lateral .mn-marca .nombre { padding: 0; font-size: 15px; }
  .mn-logo { padding: 0; flex: 0 0 auto; }
  .mn-logo .letras { font-size: 17px; }
  .mn-hamburguesa { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--mn-linea); background: var(--mn-panel); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; flex: 0 0 auto; }
  .mn-hamburguesa .rayas { display: flex; flex-direction: column; gap: 3px; }
  .mn-hamburguesa .rayas span { width: 14px; height: 2px; background: #fff; border-radius: 2px; }
  .mn-hoja { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--ms-noche); border-bottom: 1px solid var(--mn-linea); padding: 10px 12px 16px; flex-direction: column; gap: 2px; max-height: calc(100vh - 56px); overflow-y: auto; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
  .mn-lateral.abierta .mn-hoja { display: flex; }
  .mn-relleno { display: none; }
  .mn-cuerpo { padding: 18px 16px 48px; }
  .mn-hero { padding: 20px 18px; }
  .mn-ofertas { grid-template-columns: minmax(0, 1fr); }
  .mn-cierre, .mn-bloq-cierre, .mn-cita { grid-template-columns: minmax(0, 1fr); }
  .mn-detalle { padding: 0 12px 14px 12px; }
  .mn-respuestas { padding: 0 12px 12px 12px; }
  .mn-accion .fila { grid-template-columns: 24px minmax(0, 1fr) 20px; grid-template-areas: "num tit chevron" "num estado chevron" "num imp chevron"; gap: 4px 10px; }
  .mn-accion .num { grid-area: num; }
  .mn-accion .estado-caja { grid-area: estado; }
  .mn-accion .tit { grid-area: tit; }
  .mn-accion .imp { grid-area: imp; }
  .mn-accion .chevron { grid-area: chevron; }
  .mn-pregunta .fila { grid-template-columns: 24px minmax(0, 1fr) 18px; grid-template-areas: "n p chevron" "n celdas chevron"; gap: 6px 8px; }
  .mn-pregunta .n { grid-area: n; }
  .mn-pregunta .preg-col { grid-area: p; min-width: 0; }
  .mn-pregunta .mn-celdas { grid-area: celdas; }
  .mn-pregunta .chevron { grid-area: chevron; }
  .mn-tour { padding: 10px; }
  .mn-tour-tarjeta { width: 100%; }
}
@media (min-width: 901px) {
  .mn-hamburguesa { display: none; }
  .mn-hoja { display: contents; }
}