/* Tanda de emergencia — cifras y rótulos que quebraban en mobile.
 *
 * Reportados desde un iPhone: la cifra "+1.100" del módulo Scoring partida a mitad del número
 * y el rótulo "HOY" de la calculadora colapsado en "HO/Y". El barrido con quiebres.mjs, en los
 * ocho anchos y entrando a las 7 pantallas de la demo, encontró 14 casos más.
 *
 * LA CAUSA NO ERA FALTA DE nowrap. Era `overflow-wrap: anywhere` en cuatro reglas de
 * responsive.css —puestas en su momento para que nada desbordara a 360—. `anywhere` hace dos
 * cosas, y la segunda no es obvia: parte en cualquier letra, y además cuenta ese punto de
 * corte al calcular el min-content, con lo que el contenedor puede encogerse al ancho de UN
 * CARÁCTER. De ahí salían las tres cosas a la vez: el número partido, el rótulo en vertical y
 * columnas aplastadas a 8 px. Ya está cambiado a `break-word` allá, que parte una palabra sólo
 * si no entra sola y deja el min-content en paz. Eso solo bajó los rótulos partidos por letra
 * a cero.
 *
 * Este archivo cierra lo que quedaba: las cifras que quebraban ENTRE partes ("US$ 40M" en
 * "US$" / "40M"). Un número no quiebra nunca, ni por letra ni por espacio.
 */

/* El selector es el marcador que el propio export usa para decir "esto es una cifra":
 * font-variant-numeric: tabular-nums, que se pone justamente en los números que tienen que
 * alinearse en columna. No hay que inventar una clase ni tocar el markup — la señal ya está
 * escrita en el diseño.
 *
 * Va con !important y después de responsive.css porque hay una regla allá,
 * [style*="white-space: nowrap"] { white-space: normal !important }, que le arranca el nowrap
 * a todo lo que lo declara. */
[style*="font-variant-numeric: tabular-nums"] {
  white-space: nowrap !important;
}

/* ── Rótulos del microchart: el arreglo de raíz ─────────────────────────────
 * Salían UNA LETRA POR LÍNEA: "Rapidez", "Calificación", "Objeciones", "Próximo paso". Es el
 * mismo bug que "+1.100" y "HOY", en su forma más severa, y no estaba en el reporte: lo
 * encontró el barrido.
 *
 * La fila es grid-template-columns: 1fr 78px 34px con gap 11px, o sea 134 px fijos. La tarjeta
 * tenía 142 px de contenido, así que al 1fr del rótulo le quedaban 8. "Calificación" necesita
 * 67 y "Próximo paso" 78.
 *
 * Y la tarjeta medía 142 porque los paddings de escritorio se apilaban sin reducirse en mobile:
 * 366 → 252 → 188 → 142, con 56+56, 32+32 y 22+22 comiéndose 220 px de 366. Por eso el nowrap
 * no servía acá: habría desbordado en vez de partir.
 *
 * No se toca la grilla ni un ancho del contrato: se reducen los tres paddings laterales, que es
 * donde está el problema. El lateral de 18 px tampoco es un valor nuevo — es el que
 * responsive.css ya le aplica a los contenedores hermanos con la misma pinta
 * (padding: 120px 56px → 56px 18px, padding: 0px 56px → 0 18px). Esto completa esa familia de
 * arreglos, que se había salteado estos tres.
 *
 * Medido después: "Calificación" pasa de 8×105 px a 66×15, o sea de doce líneas a una. */
@media (max-width: 767px) {
  [style*="padding: 72px 56px"] {
    box-sizing: border-box !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  [style*="padding: 30px 32px 32px"] {
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  [style*="padding: 20px 22px"] {
    box-sizing: border-box !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Píldoras de eyebrow: cuando el texto se parte, se centra.
 *
 * "Scorix · tres módulos, un sistema" entra en una línea en desktop y en dos en el teléfono. Al
 * partirse quedaba alineado a la izquierda dentro de la píldora, con el H2 y la bajada centrados
 * arriba y abajo: un renglón corto colgado a la izquierda en una columna que por lo demás está
 * centrada. Se lee como un error de armado, no como una decisión.
 *
 * La regla va a las seis píldoras con esta firma, no sólo a la que se rompe hoy. En las otras
 * cinco el texto entra en una línea y `text-align: center` no cambia un píxel —verificado: el
 * diff contra producción a 1240 da 0—. Es el mismo criterio que el reset de box-sizing: una regla
 * que vale para la clase entera envejece mejor que un parche sobre el caso que se notó primero.
 */
[style*="border-radius: 9999px"][style*="background: var(--brand-surface)"] > span:last-child {
  text-align: center;
}