/* Demo de la lista de precios, en la página de integraciones. */
.demo-precios { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--blanco); color: var(--noche); }
.demo-precios h2 { max-width: 22ch; }
.precios-intro { max-width: 58ch; margin-top: 1.1rem; font-size: var(--t-lead); line-height: 1.45; }
.precios-aviso { margin-top: .7rem; font-size: .92rem; color: var(--tinta-suave); }
.precios-cuerpo { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: start; margin-top: 2rem; }
.precios-control { display: grid; gap: .9rem; padding: 1.1rem 1.2rem 1.2rem; border-radius: 18px; background: var(--sol); color: var(--noche); }
.precios-control label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-weight: 700; }
.precios-control output { font: 900 2rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.precios-control input[type="range"] { width: 100%; accent-color: var(--noche); min-height: 32px; cursor: pointer; }
.precios-meta { font-size: .9rem; }
.precios-resumen b { font: 900 1.6rem/1 var(--f-display); }
.tabla-precios { overflow-x: auto; border-radius: 18px; background: var(--blanco); border: 1.5px solid var(--noche); }
.tabla-precios table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla-precios th, .tabla-precios td { padding: .7rem .8rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-precios th[scope="row"], .tabla-precios thead th:first-child { text-align: left; }
.tabla-precios thead th { font-size: .8rem; font-weight: 700; }
.tabla-precios tbody tr { border-top: 1px solid color-mix(in srgb, var(--noche) 14%, transparent); }
.tabla-precios .c-margen { font-weight: 700; color: #165636; }
.tabla-precios tr.bajo .c-margen { color: #8A3410; background: #FFF1D6; }
.tabla-precios tr.bajo .c-sugerido { font-weight: 800; color: var(--electrico); }

@media (max-width: 860px) {
  .precios-cuerpo { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .tabla-precios th, .tabla-precios td { padding: .6rem .55rem; }
  .tabla-precios tr > :nth-child(2), .tabla-precios tr > :nth-child(3) { display: none; }
  .tabla-precios th { white-space: normal; }
}