/* ---------- deslizador de rango (compartido) ----------
   Estilo base del riel y el pulgar del <input type=range>; hoy lo usa el
   deslizador de horas de la calculadora nueva (.calc2-slider). El resto del
   bloque de la calculadora EMBEBIDA vieja (.calcsec, .calc-grid, .calc-left,
   .panel*, .dims, .field, .slider-row, .vol*, .res-*) se retiró: era CSS
   muerto tras el rediseño a calculadora.html. */
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--stone-2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--glow-dk);cursor:pointer;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--glow-dk);
  cursor:pointer;border:3px solid #fff}
/* .note: texto de bajo peso ("es orientación por volumen…") que app.js
   imprime en la ficha de producto, bajo la banda de volumen. Único
   superviviente del bloque viejo de la calculadora. */
.note{font-size:12px;color:var(--ink-mid);margin-top:14px;line-height:1.5}
/* ============================================================
   calculadora.html — layout de tres zonas: rail · plano · zócalo
   Solo estilo; la lógica de cálculo sigue en app.js/calculadora.js.
   Colores por token; los tonos propios (--deep-rail, --paper) están en
   :root. Los translúcidos son rgba de esos tokens (glow #4FE3C1, ink
   #0A2422, deep-rail #0E2E2C), misma convención que el resto del archivo.
   El zócalo va sobre --ink (oscuro): ahí los acentos son --glow, no
   --glow-aa (que es para texto sobre fondo claro). */
/* Cabecera a los bordes de la ventana en TODAS las páginas: se quita el
   tope de 1200px del .wrap conservando el padding lateral (var(--wrap-pad)).
   Antes esto vivía condicionado a body.pg-calc; ahora es global. La franja
   de instalador (.util) tenía la misma regla; se quitó con ella al sacarla
   del marcado — el botón/ícono de instalador ahora vive dentro de .mast. */
.mast .wrap{max-width:none}
/* El pie se suma al mismo ancho de ventana completa (2026-10-13, pedido de
   Patricio): "Piscina Go..." arranca en el mismo eje que el logo y el
   último enlace termina en el mismo eje que la hamburguesa. No se alinea
   con la franja de confianza de index.html (envío, garantía...), que se
   queda en la columna de contenido (--wrap-max, hoy 1400px) a propósito —
   Patricio lo aceptó así. */
.foot .wrap{max-width:none}

/* Una sola L oscura SOLO en calculadora.html: cabecera, rail, zócalo y pie
   comparten --ink, así la página queda con dos superficies (tinta y papel)
   sin costuras. Las reglas base de .mast y .foot (globales, en --deep) NO se
   tocan: las otras páginas siguen igual. El rail y el zócalo (.calc2-rail,
   .calc2-res) son clases exclusivas de esta página y pasan a --ink abajo. */
body.pg-calc .mast{background:var(--ink)}
/* Zócalo y pie comparten --ink y se fundían en un solo bloque sin costura.
   El hairline en --glow al 28% (mismo tono que .calc2-field) articula dónde
   termina uno y empieza el otro; los divisores verticales del zócalo
   (.rescol, border-left) ya llegan hasta el borde inferior de .calc2-res por
   diseño de grid (stretch), así que terminan EXACTO en este hairline sin
   tocarlos aparte. El pie baja su padding vertical para leerse como franja
   delgada de cierre, no como una sección más. */
body.pg-calc .foot{background:var(--ink);border-top:1px solid rgba(79,227,193,.28);
  padding:14px 0}

/* Solo calculadora.html (body.pg-calc) es una columna que llena el alto real
   del viewport: el pie queda pegado al fondo aunque haya poco contenido, y el
   bloque rail+plano (.calc2) crece para llenar el sobrante. Sin esto quedaba
   una franja clara (el --stone del body) debajo del pie en ventanas altas. */
body.pg-calc{min-height:100dvh;display:flex;flex-direction:column}
body.pg-calc .calc2{flex:1 0 auto}
.calc2{display:flex;align-items:stretch;min-height:clamp(440px,62vh,640px)}
/* Abajo de 820px el circuito se apaga (ver dibujar() en calculadora.html) y
   el papel ya no necesita llenar el alto sobrante del viewport: se quita el
   flex-grow de .calc2 (que en desktop lo hereda de body.pg-calc .calc2 más
   abajo) para que el bloque rail+plano mida solo lo que pide su contenido,
   en vez de estirar el papel y dejar cuadrícula vacía debajo del dibujo. */
@media(max-width:820px){
  .calc2{flex-direction:column;min-height:0}
  body.pg-calc .calc2{flex:none}
}

/* Rail de entradas */
/* Ancho del rail = --calc-rail (compartido con la 1ª columna del zócalo).
   El padding izquierdo usa --wrap-pad para que "HERRAMIENTA" caiga en el
   mismo eje x que el logo de la cabecera y que "MOTOBOMBA" del zócalo. */
.calc2-rail{flex:0 0 var(--calc-rail);background:var(--ink);color:var(--stone);
  padding:34px 26px 34px var(--wrap-pad);display:flex;flex-direction:column}
@media(max-width:820px){.calc2-rail{flex:none;width:100%}}
.calc2-rail h1{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(26px,2.6vw,32px);
  font-weight:700;letter-spacing:-.02em;line-height:1.05;margin-bottom:12px}
.calc2-intro{font-size:14px;line-height:1.5;color:rgba(235,233,226,.8);margin-bottom:22px}
.calc2-fields{display:flex;flex-direction:column}
.calc2-field{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 0;border-bottom:1px solid rgba(79,227,193,.28)}
.calc2-field label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(235,233,226,.82)}
.calc2-field input{width:86px;text-align:right;background:transparent;border:none;color:var(--stone);
  font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:600;padding:0}
.calc2-field input:focus-visible{color:var(--glow)}
.calc2-slider{margin:24px 0}
.calc2-slider label{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(235,233,226,.82);margin-bottom:12px}
.calc2-slider label b{color:var(--glow);font-weight:600}
.calc2-slider input[type=range]{width:100%;accent-color:var(--glow-dk)}
/* Volumen: lectura, NO caja, entre dos hairlines — como el display de una
   calculadora física (por eso sube, arriba de los campos). Se quitó la caja
   sólida menta y el margin-top:auto. El número va en mono —toda cifra del
   sitio va en mono— y en --glow sobre la tinta; el rótulo en --stone atenuado. */
.calc2-vol{margin:4px 0 22px;padding:16px 0;
  border-top:1px solid rgba(79,227,193,.35);border-bottom:1px solid rgba(79,227,193,.35)}
.calc2-vol-l{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(235,233,226,.7);margin-bottom:6px}
/* word-spacing negativo: el texto ("80 m³") lo arma app.js con un solo
   espacio normal, pero en mono a 34px el glifo de espacio es ancho y se lee
   como un hueco excesivo entre el número y la unidad. Cierra solo ESE hueco,
   sin tocar el espaciado entre dígitos (letter-spacing no serviría, afecta
   parejo a todos los caracteres). */
.calc2-vol-v{display:block;font-family:'IBM Plex Mono',monospace;font-size:34px;font-weight:600;
  line-height:1;color:var(--glow);word-spacing:-.3em}

/* Plano: papel con cuadrícula de dos niveles; dos filas (planta+fichas /
   corte), misma escala (la fija el JS en background-size y en el tamaño de
   cada dibujo). */
.calc2-plan{flex:1;min-width:0;position:relative;background:var(--paper);overflow:hidden}
/* El papel abraza el contenido en vez de estirarse: sin flex-grow, su alto
   sale de .calc2-canvas, que deja de ser position:absolute (así vuelve a
   contar en el flujo normal en vez de colapsar a 0 de alto). */
@media(max-width:820px){.calc2-plan{flex:none;min-height:0}}
/* Cuadrícula en dos niveles: líneas finas de 1 m al ~10% y líneas reforzadas
   cada 5 m al ~22%. Cuatro capas; el JS fija los cuatro tamaños (s, s, 5s,
   5s) para mantener las dos rejillas en fase. Las reforzadas van primero
   (encima) para ganarle a la fina donde coinciden. Todas comparten el mismo
   origen (background-position = el padding) para no desfasarse. */
.calc2-canvas{position:absolute;inset:0;
  background-image:linear-gradient(to right,rgba(14,46,44,.22) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(14,46,44,.22) 1px,transparent 1px),
                   linear-gradient(to right,rgba(14,46,44,.10) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(14,46,44,.10) 1px,transparent 1px);
  background-position:46px 38px;
  /* justify-content:center reparte el sobrante de alto arriba y abajo del
     bloque de dibujo (fila 1 + fila 2), en vez de dejarlo caer entero abajo
     como con flex-start. La nota de escala vive FUERA de este contenedor
     (hermana en .calc2-plan, anclada al pie del papel) así que no la mueve. */
  display:flex;flex-direction:column;justify-content:center;gap:48px;padding:38px 46px}
/* Regla declarada DESPUÉS de la base de .calc2-canvas (misma especificidad,
   gana por orden): abajo de 820px vuelve a flujo normal, así su alto real
   cuenta para el de .calc2-plan (que ya no crece con flex, ver arriba). */
@media(max-width:820px){.calc2-canvas{position:static}}
/* Abajo de 900px de alto (laptop de 13" con la ventana sin maximizar) el
   papel se queda sin presupuesto vertical antes que sin ancho: el padding
   vertical y el gap entre filas bajan para recuperar algo de ese alto. Solo
   en desktop (min-width:821px, el mismo quiebre que MOBILE_BP en el
   <script>): en móvil el papel ya abraza su contenido y la escala no depende
   del alto. Los mismos números (22/26) viven en PAD_Y_SHORT/GAP_SHORT del
   <script> de calculadora.html — si se ajustan aquí, ajustarlos también ahí.
   background-position vertical se mueve junto con el padding para no
   desfasar la cuadrícula (su origen es siempre el padding, ver arriba). */
@media(min-width:821px) and (max-height:900px){
  .calc2-canvas{padding:22px 46px;gap:26px;background-position:46px 22px}
}
.calc2-row{position:relative;min-width:0}
/* Fila 1: planta a la izquierda, fichas a la derecha alineadas por arriba
   con el borde superior de la planta (align-items:flex-start). */
.calc2-row-top{display:flex;align-items:flex-start;gap:24px}
/* Fila 2 también flex, para que el pfig del corte se encoja a su ancho y la
   cota de profundidad se pegue a su borde derecho (si fuera bloque, el pfig
   ocuparía toda la fila y la cota saldría volando a la derecha). */
.calc2-row-bottom{display:flex}
/* Fichas apiladas (bomba arriba, filtro abajo): una sola columna del ancho
   de una tarjeta, pegada al borde derecho del papel. margin-left:auto empuja
   la columna contra ese borde (el gap:24px de la fila sigue de piso mínimo
   contra la planta); margin-right:24px es el mismo margen de papel que ya
   usan las figuras a escala (ver MARGIN en el <script>). */
.calc2-promo{flex:0 0 auto;display:flex;flex-direction:column;gap:16px;
  margin-left:auto;margin-right:24px}
@media(max-width:820px){.calc2-promo{display:none}}
/* Tarjetas de producto: mismo lenguaje que .card/.pcard (fondo claro, borde,
   hover con elevación), en versión chica sobre el papel del plano. */
.promo-card{flex:0 0 166px;width:166px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:6px;overflow:hidden;text-decoration:none;color:var(--ink);
  box-shadow:0 1px 2px rgba(10,36,34,.06);transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}
.promo-card:hover,.promo-card:focus-visible{transform:translateY(-2px);box-shadow:0 12px 26px rgba(10,36,34,.16)}
/* Placeholder de imagen igual que .card-img/.pcard-img: agua.jpg + tono.
   No hay foto por producto todavía. */
.promo-img{position:relative;height:84px;background:var(--deep-2)}
.promo-img .ph{position:absolute;inset:0;background:url('../assets/agua.jpg') center/cover}
.promo-img .tone{position:absolute;inset:0;background:linear-gradient(160deg,rgba(8,49,47,.34),rgba(79,227,193,.12))}
.promo-body{display:flex;flex-direction:column;gap:2px;padding:12px 14px}
.promo-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--glow-aa)}
.promo-name{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:700;line-height:1.15;margin-top:3px}
.promo-price{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600;color:var(--ink)}
.promo-go{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:var(--glow-aa);margin-top:6px}
.pfig{position:relative;flex:0 0 auto}
.pshape{position:relative;box-sizing:border-box}
/* Planta: vista de arriba. Relleno menta muy tenue y, además del borde
   exterior, una línea interior a 6px que lee como el brocal. */
.pshape-planta{border:2px solid var(--deep-rail);background:rgba(79,227,193,.16)}
.pshape-planta::before{content:'';position:absolute;inset:6px;border:1px solid rgba(14,46,44,.4)}
/* Corte: la lámina de agua real. La cubeta se traza solo en costados y fondo
   (sin borde superior: la superficie queda abierta). El cuerpo de agua son
   dos capas planas (más denso arriba, más tenue en el tercio inferior), con
   un corte duro entre ellas, sin degradado. */
.pshape-corte{border:1.8px solid var(--deep-rail);border-top:none;
  background:linear-gradient(to bottom,rgba(79,227,193,.34) 0 66.67%,rgba(79,227,193,.18) 66.67% 100%)}
/* Superficie del agua: línea --glow sólida sobre el borde de arriba. */
.pshape-corte::before{content:'';position:absolute;left:0;right:0;top:0;height:2.4px;background:var(--glow)}
/* Regla de profundidad sobre el muro interior izquierdo del corte. Las
   marcas las genera el JS (paso 0.5 * s); aquí solo su aspecto: --deep-rail
   al 55%, cortas cada 0.5 m y más largas en los metros enteros. */
.corte-rule{position:absolute;left:0;top:0;bottom:0;width:12px}
.rule-tick{position:absolute;left:0;height:1px;width:7px;background:rgba(14,46,44,.55)}
.rule-tick-m{width:12px}
.rule-lbl{position:absolute;left:16px;transform:translateY(-50%);
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.04em;
  color:rgba(14,46,44,.7);white-space:nowrap;background:rgba(237,233,222,.72);padding:0 3px;border-radius:2px}
/* Cotas de dibujo técnico: línea de cota con remates a 45°, líneas de
   extensión hasta el borde de la figura y el número sentado sobre la línea
   con un hueco (fondo papel). La de profundidad ya NO es coral: pasa a
   --deep-rail al 70% (el coral queda reservado a mayoreo e instalador). */
.dim-num{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.06em;
  color:rgba(14,46,44,.75);white-space:nowrap;position:absolute;background:var(--paper)}
.dim-line{position:absolute;background:rgba(14,46,44,.55)}
/* remates a 45° en los dos extremos de cada línea de cota */
.dim-line::before,.dim-line::after{content:'';position:absolute;background:rgba(14,46,44,.55);
  width:1px;height:9px;transform:rotate(45deg)}
/* Cota de largo: horizontal, bajo la planta */
.dim-largo{position:absolute;left:0;right:0;top:calc(100% + 14px);height:0}
.dim-largo .dim-line{left:0;right:0;top:0;height:1px}
.dim-largo .dim-line::before{left:0;top:-4px}
.dim-largo .dim-line::after{right:0;top:-4px}
.dim-largo::before,.dim-largo::after{content:'';position:absolute;top:-14px;width:1px;height:18px;background:rgba(14,46,44,.3)}
.dim-largo::before{left:0}
.dim-largo::after{right:0}
.dim-largo .dim-num{left:50%;top:0;transform:translate(-50%,-50%);padding:0 6px}
/* Cota de ancho: vertical, a la izquierda de la planta */
.dim-ancho{position:absolute;top:0;bottom:0;left:-14px;width:0}
.dim-ancho .dim-line{top:0;bottom:0;left:0;width:1px}
.dim-ancho .dim-line::before{top:0;left:-4px}
.dim-ancho .dim-line::after{bottom:0;left:-4px}
.dim-ancho::before,.dim-ancho::after{content:'';position:absolute;left:0;width:16px;height:1px;background:rgba(14,46,44,.3)}
.dim-ancho::before{top:0}
.dim-ancho::after{bottom:0}
.dim-ancho .dim-num{top:50%;left:0;transform:translate(-50%,-50%);padding:2px 3px}
/* Cota de profundidad: vertical, a la derecha del corte, en --deep-rail 70%.
   A diferencia de las otras dos, NO lleva líneas de extensión: dejan libre la
   banda junto a la pared derecha para que la tubería del retorno suba sin
   cruzarla. Conserva su línea de cota, los remates a 45° y el número. */
.dim-prof{position:absolute;top:0;bottom:0;right:-14px;width:0}
.dim-prof .dim-line{top:0;bottom:0;right:0;width:1px}
.dim-prof .dim-line::before{top:0;right:-4px}
.dim-prof .dim-line::after{bottom:0;right:-4px}
.dim-prof .dim-num{top:50%;right:0;transform:translate(50%,-50%);padding:2px 3px;color:rgba(14,46,44,.7)}

/* Circuito de recirculación sobre el corte. El SVG lo genera el JS (bocas,
   tubería, flechas y equipo); aquí solo el aspecto. Trazo grueso en --deep-3
   con esquinas redondeadas. overflow visible porque la tubería y el equipo se
   salen del cuadro del corte (la alberca sí va a escala, el equipo NO: ver
   circuito() en el <script>). El equipo y las bocas se rellenan de --paper
   para "tapar" la cuadrícula detrás de ellos. El único cruce de tubos (donde
   el retorno sube cruzando el corredor de succión) no se tapa: el trazo de la
   succión da un salto (arco) en su propio path, ver circuito() en el
   <script> de calculadora.html — así la cuadrícula queda íntegra debajo. */
.corte-scene{position:relative}
.circuit{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.circuit .pipe{fill:none;stroke:var(--deep-3);stroke-width:4.5;stroke-linejoin:round;stroke-linecap:round}
.circuit .ground{stroke:rgba(14,46,44,.5);stroke-width:1.5}
.circuit .arrow{fill:var(--deep-3)}
.circuit .port{fill:var(--paper);stroke:var(--deep-3);stroke-width:2}
.circuit .equip rect,.circuit .equip circle{fill:var(--paper);stroke:var(--deep-3);stroke-width:2}
.circuit .equip-lbl{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.02em;
  fill:rgba(14,46,44,.7);text-anchor:middle}
.circuit .flow-lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.04em;
  fill:var(--deep-3);text-anchor:middle}
.plan-note{position:absolute;left:46px;bottom:14px;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.06em;color:rgba(14,46,44,.55)}
/* Línea de caudal que sustituye al circuito abajo de 820px (ver dibujar() en
   calculadora.html: el circuito no se dibuja y el JS pone este texto en su
   lugar, reusando el mismo caudal que el rótulo de escritorio). En flujo
   normal, después de #canvas: le da a .calc2-plan el alto que necesita para
   dejarle sitio a .plan-note sin encimarse. Oculto por defecto (JS lo
   muestra); en desktop [hidden] lo saca del flujo, así que no le agrega
   padding a nadie ahí. */
.calc2-caudal-mob{padding:0 46px 30px;font-family:'IBM Plex Mono',monospace;
  font-size:13px;font-weight:600;color:rgba(14,46,44,.75)}

/* Zócalo de resultados: 4 columnas sobre --ink, divididas por hairlines. La
   1ª columna mide --calc-rail (lo mismo que el rail), así su divisor cae
   exacto sobre el borde derecho del rail a cualquier ancho; las otras tres
   se reparten el resto. La 1ª celda sangra a --wrap-pad (mismo eje del logo
   y de "HERRAMIENTA") y la última cierra con --wrap-pad a la derecha. */
.calc2-res{display:grid;grid-template-columns:var(--calc-rail) repeat(3,1fr);background:var(--ink);color:var(--stone)}
@media(max-width:820px){.calc2-res{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.calc2-res{grid-template-columns:1fr}}
.rescol{padding:26px 24px 16px;display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--line-lt)}
.rescol:first-child{border-left:none;padding-left:var(--wrap-pad)}
.rescol:last-child{padding-right:var(--wrap-pad)}
@media(max-width:820px){.rescol:nth-child(odd){border-left:none}}
@media(max-width:520px){.rescol{border-left:none;border-top:1px solid var(--line-lt)}.rescol:first-child{border-top:none}}
/* Jerarquía: el rótulo baja a --stone atenuado y el valor se queda en
   --glow, para que cada celda lea en dos planos y no tres acentos iguales. */
.rescol-k{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(235,233,226,.7)}
.rescol-v{font-family:'IBM Plex Mono',monospace;font-size:clamp(17px,1.6vw,21px);font-weight:600;
  color:var(--glow);line-height:1.15}
.rescol-go{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--glow);text-decoration:none}
.rescol-go:hover,.rescol-go:focus-visible{text-decoration:underline}
.rescol-msg{font-size:12px;line-height:1.45;color:rgba(235,233,226,.7)}
.rescol-msg a{color:var(--glow);font-weight:600}

/* Barra fija de resultados (abajo de 820px): mismo patrón visual y de
   comportamiento que .prod-barra en la ficha de producto (fondo oscuro,
   desliza desde abajo, clase is-visible la pone un IntersectionObserver —
   ver css/09-producto.css y el <script> de calculadora.html). Aquí la tinta
   es --ink, la misma que ya usan .calc2-rail y .calc2-res en esta página,
   para no meter una segunda tinta oscura (--deep) donde no hace falta.
   Oculta en escritorio por completo. */
.calcbar{display:none}
@media(max-width:820px){
  .calcbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--ink);justify-content:center;align-items:center;
    gap:8px;padding:14px var(--wrap-pad);box-shadow:0 -6px 20px rgba(0,0,0,.18);
    transform:translateY(100%);transition:transform var(--t-slow) var(--ease)}
  .calcbar.is-visible{transform:translateY(0)}
  .calcbar-item{display:flex;align-items:baseline;gap:6px;font-family:'IBM Plex Mono',monospace;white-space:nowrap}
  /* separador "·" entre datos — mismo glifo que ya usa la marca y el pie
     para unir dos textos cortos, no uno nuevo. */
  .calcbar-item+.calcbar-item::before{content:'·';margin-right:4px;color:rgba(235,233,226,.45)}
  .calcbar-k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(235,233,226,.65)}
  /* 14px (no 15): el caso más largo (volumen de tres cifras + "Silver 1.5
     HP" + filtro) raspa el borde a 360px con el gap ya angosto de arriba. */
  .calcbar-item b{font-size:14px;font-weight:600;color:var(--glow)}
  /* Reserva el alto de la barra al pie de la página: con la barra encima, el
     pie nunca queda tapado al llegar al fondo del scroll. */
  body.pg-calc .foot{padding-bottom:64px}
}
/* Abajo de ~380px (Galaxy S8/S20 angosto, 360px) el caso más largo sigue
   raspando el borde aun con el ajuste de arriba: se quitan las etiquetas
   "Bomba"/"Filtro" y quedan solo los valores, que ya se entienden por su
   posición (segundo y tercer dato de la barra). */
@media(max-width:380px){.calcbar-k{display:none}}
@media(prefers-reduced-motion:reduce){.calcbar{transition:none}}