#herramientas{background:#fff}
#herramientas .tool-controls{display:flex;align-items:center;justify-content:center;gap:24px;color:var(--blue);font-size:.9rem}
#herramientas .tool-controls button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:white;color:var(--blue);font-size:1.3rem;cursor:pointer}
#herramientas .tool-controls button:disabled{opacity:.3;cursor:default}
#herramientas .tool-track{--tile:164px;display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:36px max(0px,calc(50% - var(--tile)/2));scrollbar-width:thin;scrollbar-color:var(--line) transparent;position:relative}
#herramientas .tool-choice{flex:0 0 var(--tile);margin-inline:-4px;scroll-snap-align:center;border:0;border-bottom:2px solid transparent;background:none;padding:12px 8px 18px;cursor:pointer;color:var(--blue);font:inherit;font-size:1rem;opacity:1;transform:none}
#herramientas .tool-choice[aria-pressed=true]{border-bottom-color:var(--orange)}
#herramientas .tool-face{display:block;transform-origin:center;transform-style:preserve-3d;backface-visibility:hidden;transform:perspective(380px) rotateY(var(--page-turn,0deg)) scale(var(--focus-scale,.6));opacity:var(--focus-opacity,.32);filter:saturate(var(--focus-saturation,.55));transition:transform .12s linear,opacity .12s linear,filter .12s linear}
#herramientas .tool-choice:focus-visible,#herramientas .tool-controls button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
#herramientas .tool-logo-frame{height:84px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:18px}
#herramientas .tool-logo-frame img{width:120px;height:64px;object-fit:contain}
#herramientas .tool-logo-frame img.padded{height:140px;width:140px;max-width:none}
#herramientas .tool-projects{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;gap:0;max-width:100%;margin:28px auto 0;height:110px;align-items:center;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
#herramientas .tool-project{display:flex;flex:0 0 auto;flex-wrap:nowrap;align-items:center;justify-content:center;gap:18px;height:64px;border-right:1px solid var(--line);padding:0 26px}
#herramientas .tool-project img{width:112px;height:44px;object-fit:contain;flex:0 0 112px}
#herramientas .tool-hours{font-size:1.25rem;font-weight:600;color:#111;white-space:nowrap;font-variant-numeric:tabular-nums}
#herramientas .tool-legend{font-size:.82rem;color:var(--muted);text-align:center;margin:28px 0 0}
#herramientas .matrix-logo{display:block;flex:0 0 112px;width:112px;height:40px;background-image:url('horas-proyecto-herramientas.png');background-size:921.6px 614.4px;background-repeat:no-repeat}
#herramientas .matrix-logo.yum{background-position:-30px -421px}
#herramientas .matrix-logo.julian{background-position:-30px -458px}
#herramientas .matrix-logo.target{background-position:-30px -497px}
@media(max-width:700px){
 #herramientas .tool-track{--tile:112px;gap:0;padding-top:24px;padding-bottom:24px}
 #herramientas .tool-choice{font-size:.875rem;padding-left:3px;padding-right:3px}
 #herramientas .tool-logo-frame{height:70px}
 #herramientas .tool-logo-frame img{width:90px;height:56px}
 #herramientas .tool-project{gap:14px;padding:0 20px}
 #herramientas .tool-hours{font-size:1.15rem}
}
#herramientas .tool-project:last-child{border-right:0}
@media(prefers-reduced-motion:reduce){#herramientas .tool-face{transition:none}}

/* Keep page geometry while removing its visible frame. */
#herramientas .tool-face{background:transparent;border:1px solid transparent;border-radius:8px;padding:16px 4px;box-sizing:border-box}

#herramientas .tools-intro{font-family:inherit;font-size:1rem;font-weight:400;line-height:inherit}

/* Keep original illustration intact; display only the edited heading region. */
#herramientas .discovery-figure{position:relative}
#herramientas .discovery-label{position:absolute;left:60.5%;top:27.8%;width:20%;height:6.5%;overflow:hidden;background:#fff;pointer-events:none}
#herramientas .discovery-label img{position:absolute;width:500%;max-width:none;height:auto;left:-307.5%;top:-427.6923%}

/* Floating brand silhouettes and a single vertical client list. */
#herramientas .tool-track{--tile:128px;gap:0}
#herramientas .tool-choice{padding-left:0;padding-right:0;margin-inline:-6px}
#herramientas .tool-face{border:0;border-radius:0;background:transparent;box-shadow:none;padding:16px 0}
#herramientas .tool-logo-frame{overflow:visible}
#herramientas .tool-logo-crop{display:block;position:relative;overflow:hidden;flex:none}
#herramientas .tool-logo-crop img{position:absolute;max-width:none;object-fit:fill}
#herramientas .tool-projects{display:block;width:min(100%,460px);max-width:460px;height:auto;min-height:64px;overflow:visible;margin:28px auto 0}
#herramientas .tool-project{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;justify-content:initial;height:76px;gap:24px;padding:16px 0;border-right:0;border-bottom:1px solid var(--line)}
#herramientas .tool-project img,#herramientas .tool-project .matrix-logo{justify-self:start;object-position:left center}
#herramientas .tool-hours{justify-self:end;text-align:right}
@media(max-width:700px){
 #herramientas .tool-track{--tile:102px;gap:0}
 #herramientas .tool-choice{margin-inline:-7px}
 #herramientas .tool-logo-crop{transform:scale(.86)}
 #herramientas .tool-project{padding:16px 0;gap:24px}
}

/* Reduce only client artwork; retain each row and column geometry. */
#herramientas .tool-project img,#herramientas .tool-project .matrix-logo{transform:scale(.6);transform-origin:left center}