/* Calculadora v8.5 (07-10-2026, estetica-landing.md § 34) · la cuenta abierta, compacta.
   Operador: "si uno los abre, no se haga tan largo, especialmente el cuanto vale para ti … compresión visual sin perder datos
   importantes ni saturar al cliente". Vive dentro del plegable #cuenta (columna de ~420 px también en escritorio), así que
   tiene UNA forma para los dos anchos:
   1) Las tres barras en un panel gris bajo: rótulo y valor en una fila, la barra de 34 px debajo, sin los extremos rotulados.
   2) Resultado en la tarjeta petróleo: «Hoy facturas al mes» con la cifra grande y los pedidos debajo.
   3) Medio punto y el 20% que garantizo en DOS fichas lado a lado: rótulo corto, la tasa de → a en su pastilla y la cifra
      grande; la cifra se achica con el ancho de la ficha (cqi) para que el máximo (+$150.000.000) no se salga.
   4) Sale la nota de abajo del botón (la garantía está escrita al lado, y la ficha del 20% la nombra).
   Mismos ids que la v8.0: cV cC cT · oV oC oT · rHoy rPed rTasaHoy rMedioDe rMedioA rMedio rVeinteDe rVeinteA rVeinte · calcBoton. */

.cx-intro { margin: 0 0 8px; font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.cx { display: grid; gap: 8px; }

/* ---------- 1 · Los datos ---------- */
.cx-datos { background: var(--gris-1); border-radius: 14px; padding: 10px 14px 4px; }
.cx-campo + .cx-campo { margin-top: 2px; }
.cx-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cx-fila label { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--texto); }
.cx-fila output { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.2; color: var(--texto); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-barra { --p: 50%; display: block; width: 100%; height: 34px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.cx-barra::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(var(--texto), var(--texto)) 0 0 / var(--p) 100% no-repeat, var(--borde); }
.cx-barra::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--fondo); border: 2px solid var(--texto); box-shadow: 0 1px 4px rgba(30,47,56,.25); }
.cx-barra::-moz-range-track { height: 6px; border-radius: 999px; background: var(--borde); }
.cx-barra::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--texto); }
.cx-barra::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--fondo); border: 2px solid var(--texto); box-shadow: 0 1px 4px rgba(30,47,56,.25); }
.cx-barra:focus { outline: none; }
.cx-barra:focus-visible { outline: 3px solid var(--texto); outline-offset: 2px; border-radius: 8px; }

/* ---------- 2 · El resultado ---------- */
.cx-res { background: var(--texto); color: #fff; border-radius: 14px; padding: 12px 14px 14px; font-variant-numeric: tabular-nums; }
.cx-res p { margin: 0; }
.cx-eti { font-size: 13px; line-height: 1.3; color: #C3CCD1; }
.cx-cifra { margin: 2px 0 0 !important; font-family: 'Poppins', sans-serif; font-weight: 700; line-height: 1.1; }
#rHoy { display: block; font-size: 34px; color: #fff; }
#rHoy.largo { font-size: 27px; }
.cx-mes { margin-top: 2px !important; font-size: 13px; line-height: 1.35; color: #C3CCD1; }
.cx-vale { margin: 10px 0 6px !important; font-size: 12px; line-height: 1.35; color: #C3CCD1; }

/* ---------- 3 · Las dos mejoras, lado a lado ---------- */
.cx-mejoras { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 0 0 10px; }
.cx-mejoras > div { container-type: inline-size; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 8px 10px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.06); }
.cx-mejoras dt { font-size: 12.5px; line-height: 1.3; color: #C3CCD1; }
.cx-std { display: table; margin-top: 4px; padding: 0 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,.55); color: #fff; font-size: 11px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.cx-mejoras dd { margin: 0; white-space: nowrap; }
/* .cx-res delante: plegables.css pinta de petróleo todo <b> dentro de .v7-faq .pleg-txt (por eso el +$600.000 no se veía desde la v8.3) */
.cx-res .cx-mejoras dd b { display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: min(21px, 12cqi); line-height: 1.25; color: #fff; }
/* el marcador de § 24 (etiqueta blanca) va en medio punto: el naranja queda solo para el botón y el H1 */
.cx-res .cx-mejoras dd b.dz-marcador { color: var(--texto); }

.cx-res .boton { width: 100%; min-height: 46px; padding: 11px 16px; white-space: normal; }

/* ---------- Historial ----------
   v8.0 (07-10): sin estándar fijo; cifra grande = lo que factura hoy; debajo la línea del rubro y dos FILAS (medio punto con
   marcador, el 20% de la garantía); nota «Lo que te garantizo por escrito…» bajo el botón; extremos rotulados bajo cada barra
   (500 / 200.000 · 0,2% / 5% · $5.000 / $150.000); barras de 44 px; intro «¿Te falta tráfico? Antes de pagar más, mueve las
   barras con los números de tu tienda.»; en escritorio, datos y resultado a dos columnas (anulado por landing.css § v8.3).
   Alto abierto 922 px a 390 y 869 a 1440. v7.9 y v7.7: ver estetica-landing.md § 28 y § 26. */