/* p-herramientas.css · /sistema/herramientas/ · solo tokens (sin hex sueltos, sin sombras, sin degradados, sin rebotes) · prefijos hf- hr- hp- hn- */

/* ---- los cinco pasos: el estado de reposo es el final; .is-playing hace la entrada ---- */
.hf-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;padding:var(--s-24) var(--s-24) 56px}
.hf-step{position:relative;padding-right:var(--s-16);min-width:0}
.hf-sw{--w:18px;position:relative;display:block;width:var(--w);height:calc(var(--w) * var(--sw-alto));border-radius:var(--r-pill);border:var(--borde-encendido) solid var(--control-hecho);background:var(--control-hecho)}
.hf-sw b{position:absolute;left:50%;top:2px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--fondo)}
.hf-step:last-child .hf-sw{border-color:var(--acento);background:var(--acento)}
.hf-ln{position:absolute;left:30px;top:27px;width:calc(100% - 42px);height:var(--borde-encendido);background:var(--borde-control)}
.hf-tx{margin-top:var(--s-24)}
.hf-n{margin:0 0 var(--s-4);font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2)}
.hf-tx h3{font-size:var(--t-19);letter-spacing:var(--trk-19);margin:0 0 var(--s-8)}
.hf-tx p:not(.hf-n){margin:0;font-size:var(--t-15);color:var(--texto-2);max-width:none}
.hf-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-12)}
.hf-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-pill);border:var(--borde-ancho) solid var(--borde);background:var(--fondo);font-size:var(--t-12);color:var(--texto-2);white-space:nowrap}
.hf-chip svg,.hf-chip .hr-mask{flex:none}
@keyframes hf-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hf-fade{from{opacity:0}to{opacity:1}}
@keyframes hf-cap{from{background:transparent;border-color:var(--control-apagado)}}
@keyframes hf-perilla{from{transform:translateY(36px);background:var(--control-apagado)}}
.is-playing .hf-step .hf-tx{animation:hf-in var(--dur-entrada) var(--mov-entrada) calc(150ms + var(--i) * 520ms) backwards}
.is-playing .hf-step .hf-sw{animation:hf-cap var(--dur-estado) var(--mov-estado) calc(300ms + var(--i) * 520ms) backwards}
.is-playing .hf-step .hf-sw b{animation:hf-perilla var(--dur-estado) var(--mov-estado) calc(300ms + var(--i) * 520ms) backwards}
@media (prefers-reduced-motion:reduce){
  .is-playing .hf-step .hf-tx{animation:hf-fade var(--dur-fundido) linear backwards}
  .is-playing .hf-step .hf-sw,.is-playing .hf-step .hf-sw b{animation:none}}
@media (max-width:860px){
  .hf-flow{grid-template-columns:minmax(0,1fr);padding:var(--s-24) var(--s-16) 64px}
  .hf-step{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:var(--s-16);padding:0 0 var(--s-24)}
  .hf-tx{margin-top:0}
  .hf-ln{left:8.25px;top:62px;bottom:6px;width:var(--borde-encendido);height:auto}}

/* ---- la lista: grupos en dos columnas, una fila por herramienta ---- */
.hr-filtros{margin-bottom:var(--s-32)}
#hr-lista{column-count:2;column-gap:var(--s-48)}
.hr-grupo{break-inside:avoid;margin-bottom:var(--s-32)}
.hr-gh{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 var(--s-16);align-items:baseline;padding-bottom:var(--s-12)}
.hr-gn{font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);color:var(--texto-2);font-variant-numeric:tabular-nums}
.hr-gh h3{font-size:var(--t-24)}
.hr-gh p{grid-column:2;margin:2px 0 0;font-size:var(--t-15);color:var(--texto-2);max-width:none}
.hr-fila{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:var(--s-16);padding:var(--s-16) 0;border-top:var(--borde-ancho) solid var(--borde);align-items:start}
.hr-grupo .hr-fila:last-child{border-bottom:var(--borde-ancho) solid var(--borde)}
.hr-logo{grid-row:1/4;width:44px;height:44px;border-radius:var(--r-campo);background:var(--superficie);display:grid;place-items:center;color:var(--texto)}
.hr-mask{display:block;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.hr-nom{grid-column:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s-12)}
.hr-nom b{font-size:var(--t-17);line-height:1.3}
.hr-nom span{font-size:var(--t-15);color:var(--texto-2)}
.hr-sirve,.hr-cuando{grid-column:2;margin:var(--s-4) 0 0;font-size:var(--t-15);line-height:var(--lh-cuerpo);max-width:none;color:var(--texto)}
.hr-cuando{color:var(--texto-2)}
.hr-cuando::before{content:attr(data-k);font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;margin-right:var(--s-8)}
@media (max-width:900px){#hr-lista{column-count:1}}

/* ---- aplicado: el código y las tres piezas ---- */
.hp-cod-row{align-items:start;gap:var(--s-48)}
.hp-cod-row .code{font-size:var(--t-17)}
.hp-paso{display:flex;align-items:center;gap:var(--s-8);margin:var(--s-16) 0 0;font-size:var(--t-15);color:var(--texto-2);max-width:none}
.hp-reglas{list-style:none;margin:0;padding:0}
.hp-reglas li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--s-12);padding:var(--s-12) 0;border-top:var(--borde-ancho) solid var(--borde);font-size:var(--t-15);line-height:var(--lh-cuerpo);max-width:none;color:var(--texto-2)}
.hp-reglas li:last-child{border-bottom:var(--borde-ancho) solid var(--borde)}
.hp-reglas .n{font-variant-numeric:tabular-nums;font-weight:var(--bold);color:var(--texto-2)}
.hp-reglas b{color:var(--texto)}
.hp-fm{display:flex;flex-wrap:wrap;gap:var(--s-24);align-items:flex-end;margin:var(--s-32) 0 var(--s-16)}
.hp-acc{align-items:center;margin-top:0}
.hp-acc .muted{margin-left:var(--s-8)}
.hp-f{--h:300px;margin:0;width:min(100%,calc(var(--h) * var(--r)));min-width:0}
.hp-f figcaption{margin-top:var(--s-12);font-size:var(--t-15);color:var(--texto)}
@media (max-width:620px){.hp-f{--h:240px}}

/* ---- fotos: antes y después ---- */
.hf-foto{align-items:start;gap:var(--s-48)}
.hf-comp{position:relative;width:100%;max-width:520px;aspect-ratio:4/3;border-radius:var(--r-captura);overflow:hidden;border:var(--borde-ancho) solid var(--borde);background:var(--superficie);user-select:none;-webkit-user-select:none}
.hf-comp img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.hf-comp img.b{clip-path:inset(0 0 0 var(--p))}
.hf-tir{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:var(--blanco);pointer-events:none}
.hf-tir::after{content:"";position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--blanco);border:var(--borde-encendido) solid var(--tinta)}
.hf-et{position:absolute;bottom:12px;font-size:var(--t-12);font-weight:var(--bold);padding:4px 10px;border-radius:var(--r-pill);background:var(--blanco);color:var(--tinta);pointer-events:none}
.hf-et.a{left:12px}.hf-et.b{right:12px}
.hf-comp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.hf-comp:focus-within{outline:var(--foco-ancho) solid var(--acento);outline-offset:2px}
.hf-uso{margin-top:var(--s-16);font-size:var(--t-15)}
.hf-foto .acciones .muted{margin-left:var(--s-8)}

/* ---- la puerta: cuatro nodos, el visto bueno encendido ---- */
.hp-flujo{display:flex;align-items:stretch;gap:var(--s-8)}
.hp-n{flex:1 1 0;min-width:0;background:var(--superficie);border-radius:var(--r-tarjeta);padding:var(--s-16);display:flex;flex-direction:column;gap:6px;border:var(--borde-encendido) solid transparent}
.hp-ni{width:36px;height:36px;border-radius:var(--r-pill);background:var(--fondo);display:grid;place-items:center;color:var(--texto);margin-bottom:var(--s-8)}
.hp-n b{font-size:var(--t-17);line-height:1.25}
.hp-n>span:last-child{font-size:var(--t-15);color:var(--texto-2)}
.hp-ok{background:var(--acento-suave);border-color:var(--acento)}
.hp-ar{display:grid;place-items:center;flex:none;color:var(--texto-2)}
@media (max-width:760px){.hp-flujo{flex-direction:column}.hp-ar{transform:rotate(90deg);height:24px}}

/* ---- lo que no se hace ---- */
.hn-nos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-32) var(--medianil)}
@media (max-width:1000px){.hn-nos{grid-template-columns:minmax(0,1fr)}}
.hn-par{min-width:0}
.hn-t{margin:0 0 var(--s-12);font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2)}
.hn-par .pair{gap:var(--s-16)}
@media (max-width:480px){.hn-par .pair{grid-template-columns:minmax(0,1fr)}}
.hn-mini{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-8);padding:var(--s-16);background:var(--fondo);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-tarjeta);overflow:hidden;text-align:center;color:var(--texto)}
.dont .hn-mini{border-color:var(--texto-3)}
.hn-arch{display:inline-block;border:var(--borde-ancho) solid var(--borde-control);border-radius:var(--r-campo);padding:6px 12px;font-size:var(--t-15)}
.hn-sal{font-size:var(--t-12);color:var(--texto-2);max-width:200px;line-height:1.35}
.hn-cod{display:block;white-space:pre;font-size:var(--t-12);line-height:1.5;text-align:left;color:var(--texto);background:var(--superficie);border-radius:var(--r-campo);padding:10px 12px;max-width:100%;overflow:hidden}
.hn-cod b{color:var(--acento-texto)}
.hn-cod u{text-underline-offset:3px;font-weight:var(--bold)}
.hn-nom{font-size:var(--t-15);font-weight:var(--bold)}
.hn-chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-pill);border:var(--borde-ancho) solid var(--borde-control);font-size:var(--t-12);color:var(--texto-2)}
.hn-rev{font-size:var(--t-15);font-weight:var(--bold)}
.hn-pts{display:flex;gap:8px}
.hn-pts i{display:block;width:14px;height:14px;border-radius:50%;border:var(--borde-encendido) solid var(--control-apagado)}
.hn-pts i.on{background:var(--control-hecho);border-color:var(--control-hecho)}
.hn-sub{font-size:var(--t-19);font-weight:var(--bold);letter-spacing:var(--trk-19)}
.hn-sub b{color:var(--acento-texto)}
.hn-neon{display:inline-block;padding:8px 12px;border-radius:6px;background:var(--tinta);color:var(--papel);font-size:var(--t-12);font-weight:var(--bold);letter-spacing:.06em;-webkit-text-stroke:.6px var(--encendido)}

/* tabla de descargas: nombres y botones en una línea */
#descargas .tabla td:first-child,#descargas .tabla td:last-child{white-space:nowrap}

/* en celular el botón «Copiar» va en su propia franja y no tapa el código */
@media (max-width:700px){.code{padding-top:var(--s-48)}}

/* titulares de portada sin palabra suelta */
.hero h1{text-wrap:balance}

/* títulos de sección en una línea (el tope de 46 em los partía y dejaba una palabra sola) */
.sec-head{max-width:min(100%,64em)}
.sec-head h2{text-wrap:balance}