/* ============================================================
   La ficha del artículo · el corte vivo, el resumen tocable,
   las acciones y la lista para cotizar.
   Usa los tokens de estilos.css; aquí solo se añaden los del corte.
   ============================================================ */
:root{
  /* El hueco del corte es oscuro en los DOS temas (--vp-cav), así que el
     fluido es claro en los dos: un azul oscuro sobre gris oscuro no se ve. */
  --cv-fl-aire:#9AD8FF;
  --cv-fl-epdm:#4DB4F5;
  --cv-fl-fkm:#E7A957;
  --cv-fl-ptfe:#BDA2F0;
  --cv-piloto:#F1BE55;
  --cv-tension:#ff4d4d;
  --cv-raya:light-dark(rgba(0,0,0,.30), rgba(0,0,0,.42));
  --cv-filete:light-dark(#14181d,#0a0c0f);
  --cv-papel:light-dark(#fbfbfc,#0e1217);
  --cv-cuadricula:light-dark(rgba(17,24,39,.055),rgba(255,255,255,.04));
  /* la escala de movimiento del sistema: 160 / 320 / 620 y dos curvas */
  --e-salida:cubic-bezier(.19,1,.22,1);
  --e-suave:cubic-bezier(.22,1,.36,1);
}

/* ---------- la composición ---------- */
.ficha2{display:grid;gap:22px 34px;align-items:start;
  grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);
  grid-template-rows:auto auto 1fr;
  grid-template-areas:"cab cab" "escena lado" "escena specs"}
.ficha2 .f2-cab{grid-area:cab}
.ficha2 .f2-escena{grid-area:escena;margin-top:0}
.ficha2 .f2-lado{grid-area:lado;display:flex;flex-direction:column;gap:18px;min-width:0}
.ficha2 .f2-specs{grid-area:specs;min-width:0}
/* sin corte, la foto ocupa el sitio de la escena */
.ficha2:not(.ficha2--concorte){grid-template-areas:"cab lado" "specs specs";
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ficha2:not(.ficha2--concorte) .f2-cab{flex-direction:column;align-items:stretch}
.ficha2:not(.ficha2--concorte) .f2-cab__foto{width:min(100%,420px)}

.f2-cab{display:flex;gap:20px;align-items:center;min-width:0}
.ficha2 .f2-cab__foto{position:static;max-width:none;flex:none;width:132px}
.ficha2--concorte .f2-cab__foto .ficha-art__foto{border-radius:12px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.f2-cab__tx{min-width:0;flex:1}
.ficha2 .ficha-art__codigo{margin:10px 0 0}
.ficha2 h2{font-size:clamp(21px,2.3vw,27px)}

/* ---------- la escena ---------- */
/* 🔴 Un sticky dentro de una rejilla se sujeta a la REJILLA entera, no a su
   celda: con la ficha técnica en una fila propia debajo, el corte bajaba con
   el scroll y se montaba encima de ella (lo vio Mario, 21 sep). Ahora el corte
   ocupa la columna izquierda ENTERA y la ficha técnica va a la derecha, bajo
   el resumen: no queda nada debajo que pisar. Y solo se pega si cabe en la
   ventana; un sticky más alto que la pantalla se queda cortado por abajo. */
.f2-escena{padding:14px 16px 14px;align-self:start}
@media (min-width:901px) and (min-height:900px){
  .f2-escena{position:sticky;top:96px}
}
.f2-escena__caja{background:
    linear-gradient(var(--cv-cuadricula) 1px,transparent 1px) 0 0/100% 22px,
    linear-gradient(90deg,var(--cv-cuadricula) 1px,transparent 1px) 0 0/22px 100%,
    var(--cv-papel);
  border:1px solid var(--linea-2);border-radius:11px;overflow:hidden}
.f2-escena__caja svg.corte-vivo{width:100%;height:auto;display:block;max-height:62vh}
/* en escritorio el mando «Sin/Con tensión» tiene que caber SIN bajar: a 1440×900 quedaba en
   894–934. Lo de encima del corte mide 317 px fijos, así que el tope se resta en píxeles;
   un porcentaje de la ventana no lo garantiza. */
@media (min-width:901px){
  .f2-escena__caja svg.corte-vivo{max-height:max(320px,calc(100svh - 400px))}
}
.f2-escena .ficha-corte__cotas{width:100%;height:100%}

.cv-todo path,.cv-todo rect{vector-effect:non-scaling-stroke}
.cv-metal{stroke:var(--cv-filete);stroke-width:1.4;stroke-linejoin:round}
.cv-metal-laton .cv-metal{fill:var(--mat-laton)}
.cv-metal-inox .cv-metal{fill:var(--mat-inox)}
.cv-cuerpos .cv-escape.cv-metal{fill:var(--mat-gris)}
.cv-fijos .cv-metal{fill:var(--mat-fijo)}
.cv-raya{fill:url(#cvRaya);stroke:none;pointer-events:none}
.cv-raya-l{stroke:var(--cv-raya);stroke-width:.34;vector-effect:none}
.cv-linea{fill:none;stroke:var(--cv-filete);stroke-width:1.1}
.cv-tornillos{fill:var(--cv-filete)}
.cv-cavs path{fill:var(--vp-cav);stroke:none}
.cv-gris{fill:var(--mat-fijo);stroke:var(--cv-filete);stroke-width:1.2}
.cv-tubo{fill:var(--mat-gris);stroke:var(--cv-filete);stroke-width:1.2}
.cv-acero{fill:var(--mat-acero);stroke:var(--cv-filete);stroke-width:1.2}
.cv-junta,.cv-membrana{stroke:#000000aa;stroke-width:1}
.cv-ju-cr .cv-junta,.cv-ju-cr .cv-membrana{fill:var(--vp-junta-cr)}
.cv-ju-nbr .cv-junta,.cv-ju-nbr .cv-membrana{fill:var(--vp-junta-nbr)}
.cv-ju-epdm .cv-junta,.cv-ju-epdm .cv-membrana{fill:var(--vp-junta-epdm)}
.cv-ju-fkm .cv-junta,.cv-ju-fkm .cv-membrana{fill:var(--vp-junta-fkm)}
.cv-ju-ptfe .cv-junta,.cv-ju-ptfe .cv-membrana{fill:var(--vp-junta-ptfe)}
.cv-ju-ruby .cv-junta,.cv-ju-ruby .cv-membrana{fill:var(--vp-junta-ruby)}
.cv-piloto,.cv-bleed{fill:var(--vp-cav);stroke:none}
.cv-vastago{fill:var(--mat-acero);stroke:var(--cv-filete);stroke-width:1}
.cv-muelle{fill:none;stroke:var(--mat-muelle);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.cv-carcasa{fill:var(--mat-carcasa);stroke:var(--cv-filete);stroke-width:1.3}
.cv-espiras{fill:none;stroke:var(--mat-cobre);stroke-width:2.2;opacity:.85;transition:opacity 160ms var(--e-suave)}
.cv-conector{fill:var(--mat-conector);stroke:var(--cv-filete);stroke-width:1.1}
.cv-tension .cv-espiras{opacity:1;stroke:var(--mat-cobre-on)}
/* 07: la bobina no se mueve, así que no va en rojo: con tensión se encienden sus espiras */
#cv-glow{display:none}
#cv-golpe{fill:var(--vp-destello);opacity:0;pointer-events:none}
.cv-atex rect{fill:var(--vp-atex-caja);stroke:var(--vp-atex-borde);stroke-width:.8}
.cv-atex text{fill:var(--vp-atex-texto);font-family:var(--mono);font-weight:700}

/* el fluido: el color lo decide la junta, como en el resto de la herramienta */
.cv-fl-aire{--cv-fl:var(--cv-fl-aire)} .cv-fl-epdm{--cv-fl:var(--cv-fl-epdm)}
.cv-fl-fkm{--cv-fl:var(--cv-fl-fkm)}   .cv-fl-ptfe{--cv-fl:var(--cv-fl-ptfe)}
.cv-z{fill:var(--cv-fl);stroke:none}
.cv-gas{--cv-z-op:.34} .cv-liquido{--cv-z-op:.52}   /* 07: con .20 la presión no se leía en foto fija */
.cv-zona .cv-z{opacity:var(--cv-z-op)}
.cv-zs{fill:var(--cv-fl);fill-opacity:var(--cv-z-op);opacity:0;stroke:none}
.cv-p{fill:var(--cv-fl);opacity:0;pointer-events:none}
.cv-liquido .cv-p{fill:color-mix(in srgb,var(--cv-fl) 55%,#fff)}
.cv-p-pil,.cv-p-com{fill:#fff}
.cv-oculto path{fill:none;stroke:var(--cv-fl);stroke-width:1.4;stroke-dasharray:5 4;opacity:.95}
.cv-oculto__banda{fill:var(--cv-fl);opacity:.16;stroke:none}

/* el detalle ampliado del asiento */
.cv-lupa path,.cv-lupa circle{vector-effect:non-scaling-stroke}
.cv-lupa__fondo{fill:var(--cv-papel)}
.cv-lupa__aro{fill:none;stroke:var(--vp-cota-linea);stroke-width:1.6}
.cv-lupa__zona{fill:none;stroke:var(--vp-cota-linea);stroke-width:1.1;stroke-dasharray:3 3}
.cv-lupa__guia{fill:none;stroke:var(--vp-cota-linea);stroke-width:1.1;stroke-dasharray:3 3}
.cv-lupa__t{font-family:var(--mono);fill:var(--vp-cota-texto);paint-order:stroke;stroke:var(--vp-halo);stroke-width:3px;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* señalar una pieza desde la leyenda */
.cv-senala [data-pieza],.cv-senala .cv-raya{opacity:.28;transition:opacity 160ms var(--e-suave)}
.cv-senala .cv-cavs [data-pieza]{opacity:1}
.cv-senala .cv-ahora,.cv-senala .cv-bobina-g.cv-ahora [data-pieza],
.cv-senala .cv-ahora [data-pieza]{opacity:1}
.cv-senala .cv-ahora{stroke:#ffd166;stroke-width:2.6;animation:cvLate 620ms var(--e-suave) infinite alternate}
@keyframes cvLate{to{stroke-width:4.4}}

/* cotas y bocas, en píxeles */
.cv-cota{stroke:var(--vp-cota-linea);fill:none;stroke-width:1}
.cv-cota-h{stroke:var(--vp-halo);fill:none;stroke-width:3.4;opacity:.75;stroke-linecap:round}
.cv-cota-f{fill:var(--vp-cota-linea);stroke:var(--vp-halo);stroke-width:1.6;paint-order:stroke}
.cv-cota-t{font-family:var(--mono);font-size:12px;fill:var(--vp-cota-texto);
  paint-order:stroke;stroke:var(--vp-halo);stroke-width:3px;stroke-linejoin:round}
.cv-boca circle{fill:#0b0e12;stroke:#fff;stroke-width:1.4}
.cv-boca text{font-family:var(--mono);font-size:12px;font-weight:700;fill:#fff}
.cv-boca path{fill:#fff;opacity:.9}

/* ---------- el mando ---------- */
.f2-mando{display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:center;margin-top:12px}
.f2-mando:empty{display:none}
.f2-conm{display:inline-flex;background:var(--sup);border:1px solid var(--linea);border-radius:999px;padding:3px;gap:2px}
.f2-conm button{appearance:none;border:0;background:none;color:var(--tx-2);font:600 12.5px/1 var(--sans);
  padding:0 14px;min-height:40px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.f2-conm button i{width:8px;height:8px;border-radius:50%;background:var(--tx-3);flex:none}
.f2-conm button[aria-pressed="true"]{background:var(--tx);color:var(--fondo)}
.f2-conm button[aria-pressed="true"][data-e="1"] i{background:var(--cv-tension);box-shadow:0 0 0 3px rgba(255,77,77,.25)}
.f2-conm button[aria-pressed="true"][data-e="0"] i{background:var(--fondo)}
.f2-mando__lado{display:flex;align-items:center;gap:10px;justify-content:flex-end;min-width:0}
.f2-auto{appearance:none;border:1px solid var(--linea);background:var(--sup);color:var(--tx-2);
  font:400 12px/1 var(--mono);min-height:40px;padding:0 13px;border-radius:999px;cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.f2-auto[aria-pressed="true"]{border-color:var(--marca);color:var(--marca-viva)}
.f2-simb{flex:none;color:var(--tx-2)}
.f2-simb .s-caja{fill:none;stroke:currentColor;stroke-width:1.3}
.f2-simb .s-act{fill:var(--marca-tenue);stroke:var(--marca-viva)}
.f2-simb .s-l{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.f2-simb text{font:10.5px var(--mono);fill:currentColor}   /* ×1,15 del viewBox = 12 px */
.f2-relato{grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;background:var(--sup);
  border:1px solid var(--linea-2);border-radius:11px;padding:11px 13px;min-height:74px}
.f2-relato__e{flex:none;font:700 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:6px 9px;border-radius:6px;background:var(--sup-2);color:var(--tx-2);white-space:nowrap}
.f2-relato--abierta .f2-relato__e{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.f2-relato--cerrada .f2-relato__e{background:var(--marca-tenue);color:var(--marca-viva)}
.f2-relato p{font-size:13.5px;line-height:1.5;color:var(--tx-2)}
.f2-relato p b{color:var(--tx);font-weight:600}

.f2-leyenda{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.f2-leyenda:empty{display:none}
/* el-salto 06: qué representa el color del fluido (un ejemplo por junta) */
.f2-fluido{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--tx-2)}
.f2-fluido:empty{display:none}
.f2-fluido__m{flex:none;width:14px;height:14px;border-radius:3px;background:var(--cv-fl);border:1px solid var(--linea)}
.f2-leyenda button{appearance:none;border:1px solid var(--linea);background:transparent;color:var(--tx-2);
  font:400 11.5px/1 var(--sans);padding:0 11px;min-height:32px;border-radius:8px;cursor:pointer}
.f2-leyenda button:hover,.f2-leyenda button[aria-pressed="true"]{border-color:#c99700;color:var(--tx);background:color-mix(in srgb,#ffd166 18%,transparent)}
.f2-leyenda__l{font:10px/32px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);margin-right:2px}

/* ---------- el resumen tocable ---------- */
.f2-res{background:var(--sup);border:1px solid var(--linea);border-radius:15px;padding:16px 16px 8px}
.f2-res:empty{display:none}
.f2-res__t{font-size:14.5px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px;display:flex;flex-direction:column;gap:2px}
.f2-res__t small{font:400 12px/1.4 var(--sans);color:var(--tx-3);letter-spacing:0}
.f2-dato{display:grid;grid-template-columns:86px 1fr;gap:10px;align-items:start;padding:10px 0;border-top:1px solid var(--linea-2)}
.f2-dato--sigue{border-top:0;padding-top:0}
.f2-dato__n{font:10.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3);padding-top:11px;display:flex;flex-direction:column;gap:2px}
.f2-dato__n small{font-size:9.5px;text-transform:none;letter-spacing:0;color:var(--tx-3);opacity:.85}
.f2-dato__ops{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.f2-op{display:inline-flex;flex-direction:column;justify-content:center;min-height:40px;padding:4px 13px;border-radius:10px;
  border:1px solid var(--linea);background:var(--fondo);color:var(--tx);text-decoration:none;
  font:600 13.5px/1.15 var(--mono);cursor:pointer;transition:border-color 160ms var(--e-suave),transform 160ms var(--e-suave);max-width:100%}
.f2-op small{font:400 10px/1.25 var(--sans);color:var(--tx-3);margin-top:2px;max-width:21ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.f2-op:hover{border-color:var(--marca);transform:translateY(-1px)}
a.f2-op:active{transform:scale(.97)}
.f2-op--yo{background:var(--tx);color:var(--fondo);border-color:var(--tx);cursor:default}
.f2-op--yendo{border-color:var(--marca);background:var(--marca-tenue)}
.f2-op__unica{font-size:11.5px;color:var(--tx-3);align-self:center}
.f2-cambio{margin:2px 0 10px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--ok) 12%,transparent);
  color:var(--tx);font-size:12.5px;line-height:1.45;display:flex;gap:10px;align-items:center;justify-content:space-between}
.f2-cambio b{font-family:var(--mono);font-weight:600}
.f2-cambio button{appearance:none;border:0;background:none;color:var(--aire);font:600 12px var(--sans);cursor:pointer;white-space:nowrap;min-height:32px}

/* ---------- las acciones ---------- */
.f2-acc{display:grid;grid-template-columns:auto 1fr;gap:8px}
.f2-cant__rot{grid-column:1/-1;font:600 11.5px var(--sans);color:var(--tx-2);margin-bottom:-2px}
.f2-suma{grid-column:1/-1;margin:0;padding:8px 10px;border-radius:9px;background:var(--sup-2);color:var(--tx-2);font-size:12.5px;line-height:1.45}
.f2-suma[hidden]{display:none}
.f2-suma b{color:var(--tx);font-family:var(--mono);font-weight:700}
.f2-suma a{color:var(--aire)}
.f2-cant{display:inline-flex;align-items:center;border:1px solid var(--linea);border-radius:11px;background:var(--sup);overflow:hidden}
.f2-cant button{appearance:none;border:0;background:none;color:var(--tx);width:40px;min-height:46px;font-size:19px;cursor:pointer}
.f2-cant button:hover{background:var(--sup-2)}
.f2-cant input{width:44px;border:0;background:none;color:var(--tx);text-align:center;font:600 15px var(--mono);min-height:46px;outline-offset:-2px}
.f2-b{appearance:none;border:1px solid var(--linea);background:var(--sup);color:var(--tx);border-radius:11px;min-height:46px;
  padding:0 16px;font:600 13.5px/1.2 var(--sans);cursor:pointer;text-align:center}
.f2-b:hover{border-color:var(--tx-3)}
.f2-b--lista{background:var(--tx);color:var(--fondo);border-color:var(--tx)}
.f2-b--lista.f2-b--hecho{background:var(--ok);border-color:var(--ok);color:var(--fondo)}
.f2-b--cot{grid-column:1/-1;background:#1faa59;border-color:#1faa59;color:#fff}
.f2-b--cot:hover{background:#178f4a;border-color:#178f4a}
.f2-b--enl{grid-column:1/-1;font-weight:400;color:var(--tx-2)}
.f2-acc__nota{grid-column:1/-1;font-size:12px;color:var(--tx-3);min-height:18px;overflow-wrap:anywhere}
.f2-acc__nota a{color:var(--aire)}

.f2-llevar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--mono);font-size:12px;color:var(--tx-3)}
.f2-specs__t{font-size:14.5px;font-weight:700;margin-bottom:10px}

/* ---------- la lista: acceso en cabecera y vista ---------- */
.cab__lista{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--linea);
  color:var(--tx-2);text-decoration:none;font:600 12px var(--sans);margin-left:auto;margin-right:10px;background:var(--sup)}
.cab__lista b{font:700 11px var(--mono);background:var(--marca);color:#fff;border-radius:999px;min-width:19px;height:19px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.cab__lista[data-n="0"] b{background:var(--sup-2);color:var(--tx-3)}
.cab__lista--late{animation:cabLate 620ms var(--e-salida)}
@keyframes cabLate{40%{transform:scale(1.12)}}

.lista{max-width:860px;margin:0 auto;padding-bottom:84px}
.lista h2{font-size:24px;letter-spacing:-.02em}
.lista__sub{color:var(--tx-3);margin:4px 0 18px}
.lista__vacia{background:var(--sup);border:1px dashed var(--linea);border-radius:13px;padding:22px;color:var(--tx-2)}
.lista__filas{display:flex;flex-direction:column;gap:8px}
.lista__fila{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;background:var(--sup);
  border:1px solid var(--linea);border-radius:13px;padding:10px 12px 10px 15px}
.lista__fila a{color:var(--tx);text-decoration:none;min-width:0}
.lista__fila a b{font:600 14px var(--mono);display:block}
.lista__fila a span{font-size:12.5px;color:var(--tx-3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista__quitar{appearance:none;border:0;background:none;color:var(--tx-3);cursor:pointer;width:40px;height:40px;border-radius:9px;font-size:17px}
.lista__quitar:hover{background:var(--sup-2);color:var(--marca-viva)}
.lista__pie{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.lista__t{font:10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.lista__paises{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.lista__pais{appearance:none;border:1px solid #1faa59;background:color-mix(in srgb,#1faa59 10%,var(--sup));color:var(--tx);
  border-radius:12px;min-height:54px;padding:6px 14px;cursor:pointer;display:flex;gap:10px;align-items:center;text-align:left;font:600 13.5px var(--sans)}
.lista__pais:hover{background:color-mix(in srgb,#1faa59 22%,var(--sup))}
.lista__pais small{display:block;font:400 11px var(--sans);color:var(--tx-3)}
.lista__pais span:first-child{font-size:20px}
.lista__otras{display:flex;flex-wrap:wrap;gap:8px}
.lista__recibida{background:color-mix(in srgb,var(--aire) 12%,transparent);border-radius:12px;padding:12px 14px;margin-bottom:14px;
  display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:13.5px}

/* el botón flotante se aparta mientras las acciones de la ficha están en pantalla */
body.f2-acc-vista #remate .remate__b,body.f2-acc-vista #remate .remate__cambiar{opacity:0;pointer-events:none;transform:translateY(8px)}
#remate .remate__b{transition:opacity 160ms var(--e-suave),transform 160ms var(--e-suave),padding 320ms var(--e-suave),gap 320ms var(--e-suave)}

/* ---------- móvil ---------- */
@media (max-width:900px){
  .ficha2,.ficha2:not(.ficha2--concorte){grid-template-columns:minmax(0,1fr);grid-template-areas:"cab" "escena" "lado" "specs";gap:16px}
  .ficha2:not(.ficha2--concorte){grid-template-areas:"cab" "lado" "specs"}
  .f2-escena{padding:12px 12px 12px}
  .ficha2 .f2-cab__foto{width:84px}
  .f2-cab{gap:13px;align-items:flex-start}
}
@media (max-width:520px){
  .f2-mando{grid-template-columns:1fr}
  .f2-conm{width:100%}
  .f2-conm button{flex:1;justify-content:center;padding:0 8px}
  .f2-mando__lado{justify-content:space-between}
  .f2-dato{grid-template-columns:1fr;gap:6px}
  .f2-dato__n{padding-top:0;flex-direction:row;gap:7px;align-items:baseline}
  .f2-dato--sigue .f2-dato__n{margin-top:2px}
  .f2-relato{flex-direction:column;gap:7px;min-height:118px}
  .lista__fila{grid-template-columns:1fr auto;row-gap:6px}
  .lista__fila a{grid-column:1/-1}
  .cab__lista span{display:none}
}
.f2-aviso{grid-column:1/-1;margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--sup-2);
  border-left:3px solid var(--aire);color:var(--tx-2);font-size:13px;line-height:1.45}
.f2-aviso b{color:var(--tx)}
/* la foto del producto se amplía: <dialog> nativo, a su tamaño real y no más */
.ficha-art__foto--amplia{cursor:zoom-in}
.ficha-art__foto--amplia:focus-visible{outline:2px solid var(--aire);outline-offset:3px}
.f2-foto-d{margin:auto;padding:0;border:1px solid var(--linea);border-radius:16px;background:var(--sup);color:var(--tx);
  width:min(380px,calc(100vw - 24px));max-width:none;overflow:visible}
.f2-foto-d::backdrop{background:rgba(6,8,11,.72)}
.f2-foto-d__img{display:block;width:100%;height:auto;max-width:380px;border-radius:16px;background:#fff}
.f2-foto-d__x{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:50%;border:1px solid var(--linea);
  background:var(--sup);color:var(--tx);font:400 26px/1 var(--sans);cursor:pointer}
html:has(.f2-foto-d[open]){overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .cv-senala .cv-ahora{animation:none}
  .cab__lista--late{animation:none}
}

/* ============================================================
   herramientas-molde 07 · el ciclo en cuatro pasos
   ============================================================ */
/* Rojo SOLO en lo que se mueve en este paso. Las clases van en #cv-todo, así
   que la lupa (un <use> de él) las hereda. */
.cv-paso-2 #cv-movil .cv-embolo,.cv-paso-2 #cv-nucleo path{stroke:var(--mat-mueve);stroke-width:2.6}
.cv-paso-2 .cv-muelle{stroke:var(--mat-mueve)}
/* en la directa la junta sube CON el núcleo: las dos en rojo en el paso 2; en el 3 habla el aire */
.cv-paso-2 #cv-movil .cv-junta{stroke:var(--mat-mueve);stroke-width:2.6}
.cv-paso-3 .cv-membrana,.cv-paso-3 #cv-plato path{stroke:var(--mat-mueve);stroke-width:2.2}
.cv-paso-1 .cv-espiras{stroke-width:3}

/* El fluido cambia de tono con la presión: entrada saturada, salida más
   clara, escape en otro tono. Se lee en una foto fija, sin animar nada. */
#cv-z2 .cv-z{fill:color-mix(in srgb,var(--cv-fl) 55%,var(--cv-papel))}
.cv-oculto path{stroke:var(--cv-escape)}
.cv-oculto__banda{fill:var(--cv-escape)}
:root{--cv-escape:light-dark(#B06BD8,#C9A0F0)}

/* el recorrido: ‹ deslizador › ×0,25 */
.f2-rec{display:flex;align-items:center;gap:8px;margin-top:12px}
.f2-rec__b,.f2-rec__vel{appearance:none;flex:none;min-width:44px;height:44px;border-radius:12px;
  border:1px solid var(--linea);background:var(--sup);color:var(--tx);font:600 18px/1 var(--sans);cursor:pointer}
.f2-rec__vel{font:600 12.5px/1 var(--mono);padding:0 10px}
.f2-rec__vel[aria-pressed="true"]{border-color:var(--marca);color:var(--marca-viva);background:var(--marca-tenue)}
.f2-rec__b:focus-visible,.f2-rec__vel:focus-visible,.f2-rec input:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.f2-rec__pista{position:relative;flex:1;min-width:0;height:44px;display:flex;align-items:center}
.f2-rec input[type=range]{width:100%;margin:0;accent-color:var(--marca);height:44px;cursor:pointer}
.f2-rec__marcas{position:absolute;left:0;right:0;top:-2px;height:12px;pointer-events:none}
.f2-rec__marcas{top:50%;height:14px;margin-top:-7px}
.f2-rec__marcas span{position:absolute;width:2px;height:14px;margin-left:-1px;border-radius:1px;background:var(--tx-3);opacity:.55}
.f2-relato--paso .f2-relato__e{background:color-mix(in srgb,var(--mat-mueve) 14%,transparent);color:var(--mat-mueve)}

/* el campo de la bobina (paso 1): líneas cerradas que corren */
.cv-campo rect{fill:none;stroke:var(--mat-cobre-on);stroke-width:1.3;stroke-dasharray:5 4;
  animation:cvCampo 900ms linear infinite}
@keyframes cvCampo{to{stroke-dashoffset:-18}}
@media (prefers-reduced-motion:reduce){.cv-campo rect{animation:none}}

/* la lista fija de los cuatro pasos: solo se enciende el número en curso */
.f2-relato{flex-direction:column;gap:10px}
.f2-relato__cab{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--tx)}
.f2-relato__cab b{font-weight:600}
.f2-pasos{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.f2-pasos li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;
  font-size:13.5px;line-height:1.45;color:var(--tx-3);transition:color 160ms var(--e-suave)}
.f2-pasos__n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font:700 12px/1 var(--mono);border:1.5px solid var(--linea);color:var(--tx-3);background:var(--sup)}
.f2-pasos li.is-hecho{color:var(--tx-2)}
.f2-pasos li.is-hecho .f2-pasos__n{border-color:var(--tx-2);color:var(--tx-2)}
.f2-pasos li.is-ahora{color:var(--tx)}
.f2-pasos li.is-ahora .f2-pasos__n{background:var(--mat-mueve);border-color:var(--mat-mueve);color:#fff}
.f2-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 07 · el guiado con el corte nuevo (modo compacto) */
.cv-metal-neutro .cv-metal{fill:color-mix(in srgb,var(--mat-inox) 55%,var(--cv-papel))}
.cv-fantasma{opacity:.55;stroke-dasharray:3 3;fill-opacity:.35}
.cv-sin-fluido .cv-zona,.cv-sin-fluido #cv-particulas,.cv-sin-fluido .cv-zs,.cv-sin-fluido .cv-oculto{display:none}
.cv-recien{animation:cvRecien 620ms var(--e-suave)}
/* un golpe de BRILLO, como el guiado de siempre: el rojo es solo de lo que se mueve en el ciclo */
@keyframes cvRecien{0%{filter:brightness(2.4) saturate(1.15)}100%{filter:brightness(1) saturate(1)}}
@media (prefers-reduced-motion:reduce){.cv-recien{animation:none}}
/* en móvil el dibujo del guiado cabe en 30vh: la lupa no llegaría a 12 px */
@media (max-width:1080px){.cv-compacto ~ .cv-lupa,.g3__valv-caja .cv-lupa{display:none}}

/* 07 · el núcleo fijo y la tercera vía (Mario, 25 sep: opción A) */
.cv-alojamiento,.cv-eje{fill:var(--vp-cav);stroke:none}
#cv-golpe-sup{fill:var(--vp-destello);opacity:0;pointer-events:none}

/* 07 · al cambiar la conexión en el guiado, la pieza entra de menor a mayor */
.cv-entra{animation:cvEntra 620ms var(--e-salida) both;transform-origin:50% 62%}
@keyframes cvEntra{from{transform:scale(.72);opacity:.35}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.cv-entra{animation:none}}

/* 07 · la biestable: el disco que el catálogo dibuja (01F pág. 1.13), el paso
   «sin corriente, se mantiene» en verde, y el pulso de cierre con el campo al revés */
.cv-reten{fill:var(--mat-reten);stroke:var(--cv-filete);stroke-width:1.1}
.cv-raya2{fill:url(#cvRaya2);stroke:none;pointer-events:none}
.cv-bi.cv-paso-4 .cv-reten{stroke:var(--mat-sujeta);stroke-width:2.8}
.cv-bi.cv-paso-4 #cv-movil .cv-embolo{stroke:var(--mat-sujeta);stroke-width:2.2}
.cv-pol-neg .cv-campo rect{stroke:var(--mat-pol-neg);animation-direction:reverse}
.cv-pol-neg.cv-tension .cv-espiras{stroke:var(--mat-pol-neg)}
.f2-pasos li.is-sujeta .f2-pasos__n{background:var(--mat-sujeta);border-color:var(--mat-sujeta);color:#fff}

/* 07 · el rayado propio del disco, que se lea sobre su color en los dos temas */
.cv-raya2{fill:url(#cvRaya2)}
#cvRaya2 line{stroke:light-dark(rgba(255,255,255,.55),rgba(0,0,0,.5));stroke-width:.3}
/* la leyenda de colores, junto al del fluido */
.f2-fluido{flex-wrap:wrap}
.f2-colores{display:inline-flex;flex-wrap:wrap;gap:6px 14px;margin-left:6px}
.f2-colores>span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx-2)}
.f2-colores__m{width:14px;height:4px;border-radius:2px;flex:none}
.f2-colores__m--mueve{background:var(--mat-mueve)}
.f2-colores__m--sujeta{background:var(--mat-sujeta)}
.f2-colores__m--pol-neg{background:var(--mat-pol-neg)}
.g3__valv-pie .f2-colores{display:flex;margin:6px 0 0}