@layer components{.salon-room{background:var(--wall-salon);color:var(--ma-paper);--salon-scale:clamp(.34px, .22px + .021vw, .52px);--salon-gap-x:clamp(20px, 3.2vw, 56px)}.salon-room :focus-visible,.salon-detail :focus-visible{outline:2px solid var(--ma-blue);outline-offset:3px}.salon-filter{border-radius:var(--ma-radius-control);min-height:44px;color:var(--ma-paper);transition:background-color .16s var(--ease-out), color .16s var(--ease-out), border-color .16s var(--ease-out);border:1px solid #f7f5f180;padding:0 1rem;font-size:.875rem;font-weight:500}.salon-filter:hover{border-color:var(--ma-paper)}.salon-filter[aria-pressed=true]{background:var(--ma-paper);border-color:var(--ma-paper);color:var(--ma-ink);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);border-radius:0}.salon-filter[aria-pressed=true]:focus-visible{clip-path:none;border-radius:var(--ma-radius-control)}.salon-wall{justify-content:center;align-items:center;column-gap:var(--salon-gap-x);isolation:isolate;flex-wrap:wrap;row-gap:clamp(6rem,4.5rem + 3vw,8.5rem);padding-bottom:6rem;display:flex}.salon-piece{width:min(100%, max(8.5rem, calc(var(--w-mm) * var(--salon-scale))));position:relative}.salon-piece:before{content:"";top:50%;left:calc(var(--salon-gap-x) / -2);right:calc(var(--salon-gap-x) / -2);z-index:-1;pointer-events:none;background:#ede6d629;height:1px;position:absolute}.salon-piece__btn{cursor:zoom-in;transform-origin:50% 0;width:100%;display:block}.salon-piece__frame{filter:drop-shadow(.4rem .8rem 1.2rem #0000006b);width:100%;transition:transform .16s var(--ease-out);background:#323b36;display:block}.salon-piece__img{width:100%;height:100%;display:block}@media (pointer:fine){.salon-piece__btn:hover .salon-piece__frame{transform:translateY(-4px)}}.salon-piece__pie{width:100%;line-height:1.3;position:absolute;top:calc(100% + .85rem);left:0}.salon-exit{border-top:1px solid #f7f5f12e}.salon-detail{background:var(--wall-salon);width:100%;max-width:none;height:100%;max-height:none;color:var(--ma-paper);overscroll-behavior:contain;border:0;margin:0;padding:0;position:fixed;inset:0}.salon-detail::backdrop{background:#14141499}.salon-detail__layout{--maxh:52svh;grid-template-columns:minmax(0,1fr);grid-template-areas:"bar""stage""info";gap:1.5rem;min-height:100%;padding:16px 20px 32px;display:grid}.salon-detail__bar{grid-area:bar;justify-content:space-between;align-items:center;gap:1rem;display:flex}.salon-detail__stage{grid-area:stage;justify-content:center;align-items:center;display:flex}.salon-detail__img{aspect-ratio:var(--a);width:min(100%, calc(var(--maxh) * var(--a)));filter:drop-shadow(.6rem 1rem 1.6rem #00000073);height:auto;display:block}.salon-detail__info{grid-area:info;max-width:34rem}.salon-detail__ficha{border-top:1px solid #f7f5f133;gap:0;display:grid}.salon-detail__ficha>div{border-bottom:1px solid #f7f5f133;grid-template-columns:9rem 1fr;gap:1rem;padding-block:.6rem;display:grid}.salon-detail__ficha dt{font-family:var(--ma-font-sans);letter-spacing:.12em;text-transform:uppercase;color:#ede6d6d9;align-self:center;font-size:.75rem;font-weight:600;font-stretch:75%}.salon-detail__ficha dd{font-family:var(--ma-font-sans);font-variant-numeric:tabular-nums;color:var(--cotton);font-stretch:87.5%}@media (min-width:1024px){.salon-detail__layout{--maxh:calc(100dvh - 9rem);grid-template:"bar bar""stage info"1fr/minmax(0,1fr) minmax(20rem,26rem);column-gap:48px;padding:20px 48px 40px}.salon-detail__info{align-self:end;padding-bottom:1rem}}}@media (prefers-reduced-motion:no-preference){.salon-piece.is-hang .salon-piece__btn{animation:salon-hang .56s var(--ease-settle) backwards;animation-delay:calc(.22s + var(--i) * 40ms)}.salon-piece.is-hang .salon-piece__pie{animation:salon-fade .32s var(--ease-out) backwards;animation-delay:calc(.42s + var(--i) * 40ms)}.salon-piece__img,.salon-detail__img{animation:salon-fade .24s var(--ease-out) backwards}}@keyframes salon-hang{0%{opacity:0;transform:translateY(-12px)rotate(-.8deg)}60%{opacity:1;transform:translateY(1px)rotate(.25deg)}to{transform:none}}@keyframes salon-fade{0%{opacity:0}}:root[data-salon-vt] body>header,:root[data-salon-vt] .ma-cinta-rule{view-transition-name:none!important}:root[data-salon-vt=flip] .salon-piece{view-transition-name:var(--vt)}:root[data-salon-vt=flip]::view-transition-group(*){animation-duration:.32s;animation-timing-function:var(--ease-settle)}:root[data-salon-vt=flip]::view-transition-old(*):only-child{animation:salon-vt-out .2s var(--ease-out) both}:root[data-salon-vt=flip]::view-transition-new(*):only-child{animation:salon-vt-in .32s var(--ease-settle) both}:root[data-salon-vt=flip]::view-transition-old(root){animation-duration:.32s}:root[data-salon-vt=flip]::view-transition-new(root){animation-duration:.32s}:root[data-salon-vt=fade]::view-transition-old(root){animation-duration:.32s}:root[data-salon-vt=fade]::view-transition-new(root){animation-duration:.32s}:root[data-salon-vt=detail]::view-transition-group(salon-detail){animation-duration:.48s;animation-timing-function:var(--ease-settle)}:root[data-salon-vt=detail]::view-transition-old(salon-detail){height:100%}:root[data-salon-vt=detail]::view-transition-new(salon-detail){height:100%}:root[data-salon-vt=detail]::view-transition-old(root){animation-duration:.32s}:root[data-salon-vt=detail]::view-transition-new(root){animation-duration:.32s}@keyframes salon-vt-out{to{opacity:0;transform:scale(.96)}}@keyframes salon-vt-in{0%{opacity:0;transform:scale(.96)}}
