body[data-propuesta=huella] #clientes .banda__pieza{--esq:clamp(8px,1.9cqw,18px);--pl:clamp(6px,1.3cqw,13px);--revela:.5s;--curva:cubic-bezier(.3,.7,.2,1)}body[data-propuesta=huella] #clientes .banda__pieza[data-proyecto=atelier]{--lw:25;--lh:19.73;--ls:.44}body[data-propuesta=huella] #clientes .banda__pieza[data-proyecto=jornada]{--lw:40;--lh:12.55;--ls:.42}body[data-propuesta=huella] #clientes .banda__pieza[data-proyecto=dj]{--lw:19;--lh:15.93;--ls:.46}body[data-propuesta=huella] #clientes .banda__marco{container-type:inline-size;background:#0b0b0a;outline:1px solid rgba(255,255,255,.07);outline-offset:-1px}body[data-propuesta=huella] #clientes .banda__velo{position:absolute;inset:0;opacity:1;transition:opacity var(--revela) ease;pointer-events:none}body[data-propuesta=huella] #clientes .banda__duo{display:block;width:100%;height:100%;max-width:none;object-fit:cover}body[data-propuesta=huella] #clientes .banda__velo:after{content:"";position:absolute;inset:0;background:url(./portfolio/img/clientes-duotono/grano.png) 0 0/128px 128px repeat}body[data-propuesta=huella] #clientes .banda__placa{position:absolute;left:var(--esq);top:var(--esq);width:calc(var(--lw) * var(--ls) * 1cqw + 2 * var(--pl));height:calc(var(--lh) * var(--ls) * 1cqw + 2 * var(--pl));border-radius:max(6px,calc(var(--banda-radio,22px) - var(--esq)));background:#080808cc;box-shadow:0 0 0 1px #ffffff0f;opacity:0;transition:opacity calc(var(--revela) * .7) ease;pointer-events:none}body[data-propuesta=huella] #clientes .banda__logo{position:absolute;left:calc(var(--esq) + var(--pl));top:calc(var(--esq) + var(--pl));width:calc(var(--lw) * 1cqw);height:calc(var(--lh) * 1cqw);transform-origin:0 0;--al-centro:translate( calc(50cqw - var(--esq) - var(--pl) - var(--lw) * .5cqw), calc(33.3333cqw - var(--esq) - var(--pl) - var(--lh) * .5cqw)) scale(1);--en-esquina:translate(0px,0px) scale(var(--ls));transform:var(--al-centro);transition:transform var(--revela) var(--curva);pointer-events:none}body[data-propuesta=huella] #clientes .banda__logo img{display:block;width:100%;height:100%;max-width:none}body[data-propuesta=huella] #clientes .proyecto-nombre{opacity:.42;transition:opacity var(--revela) ease}body[data-propuesta=huella] #clientes .banda__pieza--viva .banda__velo{opacity:0}body[data-propuesta=huella] #clientes .banda__pieza--viva .banda__placa{opacity:1;transition-delay:.18s}body[data-propuesta=huella] #clientes .banda__pieza--viva .banda__logo{transform:var(--en-esquina)}body[data-propuesta=huella] #clientes .banda__pieza--viva .proyecto-nombre{opacity:1}body[data-propuesta=huella] #clientes .banda__pieza:focus-visible .banda__velo{opacity:0}body[data-propuesta=huella] #clientes .banda__pieza:focus-visible .banda__placa{opacity:1}body[data-propuesta=huella] #clientes .banda__pieza:focus-visible .banda__logo{transform:var(--en-esquina)}body[data-propuesta=huella] #clientes .banda__pieza:focus-visible .proyecto-nombre{opacity:1}@media(hover:hover){body[data-propuesta=huella] #clientes .banda__pieza:hover .banda__velo{opacity:0}body[data-propuesta=huella] #clientes .banda__pieza:hover .banda__placa{opacity:1;transition-delay:.18s}body[data-propuesta=huella] #clientes .banda__pieza:hover .banda__logo{transform:var(--en-esquina)}body[data-propuesta=huella] #clientes .banda__pieza:hover .proyecto-nombre{opacity:1}body[data-propuesta=huella] #clientes .banda:has(.banda__pieza:hover) .banda__pieza--viva:not(:hover) .banda__velo{opacity:1}body[data-propuesta=huella] #clientes .banda:has(.banda__pieza:hover) .banda__pieza--viva:not(:hover) .banda__placa{opacity:0;transition-delay:0s}body[data-propuesta=huella] #clientes .banda:has(.banda__pieza:hover) .banda__pieza--viva:not(:hover) .banda__logo{transform:var(--al-centro)}body[data-propuesta=huella] #clientes .banda:has(.banda__pieza:hover) .banda__pieza--viva:not(:hover) .proyecto-nombre{opacity:.42}}html body[data-propuesta=huella] #clientes .banda:has(.banda__pieza:hover) .banda__pieza:not(:hover) .banda__marco{filter:none}@media(prefers-reduced-motion:reduce){body[data-propuesta=huella] #clientes .banda__logo{transition:none}}@media(hover:none){@supports (animation-timeline:view()){body[data-propuesta=huella] #clientes .banda__pieza{view-timeline:--pieza inline}body[data-propuesta=huella] #clientes .banda__pieza .banda__velo{animation:revela-velo linear both;animation-timeline:--pieza;transition:none}body[data-propuesta=huella] #clientes .banda__pieza .banda__placa{animation:revela-placa linear both;animation-timeline:--pieza;transition:none}body[data-propuesta=huella] #clientes .banda__pieza .banda__logo{animation:revela-logo linear both;animation-timeline:--pieza;transition:none}body[data-propuesta=huella] #clientes .banda__pieza .proyecto-nombre{animation:revela-nombre linear both;animation-timeline:--pieza;transition:none}}}@keyframes revela-velo{0%,25%{opacity:1}38%,62%{opacity:0}75%,to{opacity:1}}@keyframes revela-placa{0%,30%{opacity:0}40%,60%{opacity:1}70%,to{opacity:0}}@keyframes revela-logo{0%,25%{transform:var(--al-centro)}38%,62%{transform:var(--en-esquina)}75%,to{transform:var(--al-centro)}}@keyframes revela-nombre{0%,25%{opacity:.42}38%,62%{opacity:1}75%,to{opacity:.42}}body[data-propuesta=huella] #clientes .banda__pieza .banda__velo{opacity:1!important;animation:none!important;transition:none!important}body[data-propuesta=huella] #clientes .banda__pieza .banda__placa{opacity:0!important;animation:none!important}body[data-propuesta=huella] #clientes .banda__pieza .banda__logo{transform:var(--al-centro)!important;animation:none!important;transition:none!important}body[data-propuesta=huella] #clientes .banda__pieza:hover .banda__marco{box-shadow:0 26px 70px #0000008c,0 0 0 1px #ffffff24}body[data-propuesta=huella] #clientes .banda__marco:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffffd9;transform:scaleX(0);transform-origin:0 50%;pointer-events:none;z-index:3}body[data-propuesta=huella] #clientes .banda__pieza--parada .banda__marco:after{transform:scaleX(1);transition:transform 2s linear}@media(prefers-reduced-motion:reduce){body[data-propuesta=huella] #clientes .banda__pieza--parada .banda__marco:after{transition:none;transform:scaleX(1);opacity:.6}}
