#das-studio-rack { color-scheme: light; --paper:#ebe7dd; --ink:#202629; --muted:#747b7a; --lime:#a9e91e; --metal:#3c4143; --header-h:clamp(68px,8.7vw,100px); }
    #das-studio-rack * { box-sizing:border-box; }
    #das-studio-rack { color:var(--ink); background:var(--paper); font-family:Arial,Helvetica,sans-serif; }
    #das-studio-rack button { font:inherit; -webkit-tap-highlight-color:transparent; }
    #das-studio-rack { min-height:100svh; overflow:hidden; background:linear-gradient(180deg,#f0ede5 0%,var(--paper) 100%); }
    #das-studio-rack .topbar { position:relative; height:var(--header-h); display:flex; justify-content:flex-end; align-items:center; padding:0 clamp(22px,6vw,90px); border-bottom:1px solid rgb(32 38 41 / 12%); }
    #das-studio-rack .top-note,#das-studio-rack .caption { font-size:9px; font-weight:700; letter-spacing:.17em; }
    #das-studio-rack .top-note { color:#747b7a; font-size:12px; letter-spacing:.18em; }
    #das-studio-rack .rack-main { min-height:calc(100svh - var(--header-h)); display:flex; flex-direction:column; align-items:center; padding:clamp(50px,7vh,85px) 20px 22px; }
    #das-studio-rack .intro { position:relative; z-index:2; text-align:center; }
    #das-studio-rack h2 { margin:0; color:var(--ink); font-size:clamp(44px,7.7vw,88px); font-weight:800; letter-spacing:-.075em; line-height:1.02; }
    #das-studio-rack h2 em { color:#8ebc17; font-family:Georgia,'Times New Roman',serif; font-size:1.02em; font-weight:400; white-space:nowrap; }
    #das-studio-rack .intro-copy { margin:14px 0 0; color:#687170; font-size:clamp(12px,1.45vw,17px); letter-spacing:.35em; line-height:1.5; text-transform:uppercase; }
    #das-studio-rack .intro-copy::after { display:block; width:60px; height:2px; margin:21px auto 0; background:#91c216; content:''; }
    #das-studio-rack .turntable { --piece-h:clamp(330px,53vh,460px); --spacing:clamp(125px,17vw,170px); position:relative; width:min(1120px,100%); height:calc(var(--piece-h) + 38px); margin:8px auto 0; isolation:isolate; }
    #das-studio-rack .rail { position:absolute; z-index:0; top:32px; left:7.5%; right:7.5%; height:8px; border:1px solid #282d2f; border-radius:5px; background:linear-gradient(180deg,#737979 0%,#343a3c 40%,#242a2c 58%,#646b6b 100%); box-shadow:0 3px 5px rgb(30 34 35 / 25%), inset 0 1px 1px rgb(255 255 255 / 24%); }
    #das-studio-rack .rail::before,#das-studio-rack .rail::after { position:absolute; top:-8px; width:12px; height:21px; border:1px solid #3f4546; border-radius:4px; background:linear-gradient(90deg,#252a2c,#89908f 48%,#343a3c); box-shadow:0 2px 3px rgb(20 25 27 / 22%); content:''; }
    #das-studio-rack .rail::before { left:-6px; } #das-studio-rack .rail::after { right:-6px; }
    #das-studio-rack .rail-screw { position:absolute; top:30px; z-index:1; width:4px; height:4px; border:1px solid #a5aaa7; border-radius:50%; background:#33393b; }
    #das-studio-rack .rail-screw.left { left:calc(7.5% - 2px); } #das-studio-rack .rail-screw.right { right:calc(7.5% - 2px); }
    #das-studio-rack .garment-slot { position:absolute; inset:0 auto 0 50%; width:0; z-index:2; transition:transform 360ms cubic-bezier(.2,.7,.3,1); }
    #das-studio-rack .garment-slot.black { transform:translateX(calc(-1 * var(--spacing) + var(--push, 0px))); }
    #das-studio-rack .garment-slot.white { transform:translateX(var(--push, 0px)); }
    #das-studio-rack .garment-slot.blue { transform:translateX(calc(var(--spacing) + var(--push, 0px))); }
    #das-studio-rack .turntable[data-active="black"] .garment-slot.white { --push:45px; }
    #das-studio-rack .turntable[data-active="black"] .garment-slot.blue { --push:50px; }
    #das-studio-rack .turntable[data-active="white"] .garment-slot.black { --push:-50px; }
    #das-studio-rack .turntable[data-active="white"] .garment-slot.blue { --push:50px; }
    #das-studio-rack .turntable[data-active="blue"] .garment-slot.black { --push:-50px; }
    #das-studio-rack .turntable[data-active="blue"] .garment-slot.white { --push:-45px; }
    #das-studio-rack .turntable[data-active="black"] .garment-slot.black,
    #das-studio-rack .turntable[data-active="white"] .garment-slot.white,
    #das-studio-rack .turntable[data-active="blue"] .garment-slot.blue { z-index:3; }
    #das-studio-rack .garment-control { position:absolute; z-index:2; top:calc(30px - var(--piece-h) * .0375); left:0; width:calc(var(--piece-h) * .29); height:var(--piece-h); padding:0; transform:translateX(calc(-50% + var(--slide, 0px))); border:0; outline:0; background:transparent; cursor:pointer; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
    #das-studio-rack .garment-control:focus-visible { width:calc(var(--piece-h) * .8); }
    @media (min-width:701px) and (hover:hover) and (pointer:fine) { #das-studio-rack .garment-control:hover { width:calc(var(--piece-h) * .8); } }
    #das-studio-rack .garment-control:focus-visible { outline:2px solid var(--lime); outline-offset:3px; border-radius:16px; }
    #das-studio-rack .garment-image { position:absolute; display:block; left:50%; top:0; width:calc(var(--piece-h) * .8); height:100%; transform:translateX(-50%); object-fit:contain; object-position:center center; -webkit-user-drag:none; pointer-events:none; }
    #das-studio-rack .garment-control.white-shirt .garment-image { filter:drop-shadow(0 1px 1px rgb(40 45 43 / 15%)); }
    #das-studio-rack .hanger-wire { position:absolute; left:50%; top:0; width:calc(var(--piece-h) * .8); height:100%; transform:translateX(-50%); pointer-events:none; }
    #das-studio-rack .instruction { display:flex; align-items:center; justify-content:center; gap:9px; margin:0; border:1px solid rgb(40 46 47 / 18%); border-radius:99px; padding:9px 16px; background:rgb(255 255 255 / 88%); box-shadow:0 4px 14px rgb(26 31 32 / 5%); color:#3f4746; font-size:12px; }
    #das-studio-rack .instruction-icon { color:#87b817; font-size:17px; line-height:1; }
    #das-studio-rack .mobile-hint { display:none; }
    #das-studio-rack .caption { margin:13px 0 0; color:#848b86; font-size:8px; text-align:center; }
    #das-studio-rack .caption span { padding:0 4px; color:#9acb1a; }
    @media (max-width:700px) {
      #das-studio-rack .topbar { height:58px; padding:0 18px; }
      #das-studio-rack .top-note { position:absolute; left:50%; transform:translateX(-50%); font-size:9px; letter-spacing:.14em; white-space:nowrap; }
      #das-studio-rack .rack-main { min-height:calc(100svh - 58px); padding:25px 12px 18px; }
      #das-studio-rack h2 { font-size:clamp(34px,9.2vw,46px); }
      #das-studio-rack .intro-copy { max-width:310px; margin:11px auto 0; font-size:10px; letter-spacing:.18em; }
      #das-studio-rack .intro-copy::after { width:48px; margin-top:15px; }
      #das-studio-rack .turntable { --piece-h:clamp(255px,38svh,300px); --spacing:clamp(72px,23vw,88px); --focus-far:clamp(110px,37vw,136px); width:100%; margin-top:2px; }
      #das-studio-rack .turntable[data-active="black"] .garment-slot.black { --push:var(--spacing); }
      #das-studio-rack .turntable[data-active="black"] .garment-slot.white { --push:calc(-1 * var(--focus-far)); }
      #das-studio-rack .turntable[data-active="black"] .garment-slot.blue { --push:calc(var(--focus-far) - var(--spacing)); }
      #das-studio-rack .turntable[data-active="white"] .garment-slot.black { --push:calc(var(--spacing) - var(--focus-far)); }
      #das-studio-rack .turntable[data-active="white"] .garment-slot.blue { --push:calc(var(--focus-far) - var(--spacing)); }
      #das-studio-rack .turntable[data-active="blue"] .garment-slot.black { --push:calc(var(--spacing) - var(--focus-far)); }
      #das-studio-rack .turntable[data-active="blue"] .garment-slot.white { --push:var(--focus-far); }
      #das-studio-rack .turntable[data-active="blue"] .garment-slot.blue { --push:calc(-1 * var(--spacing)); }
      #das-studio-rack .rail { top:27px; left:4.5%; right:4.5%; height:7px; }
      #das-studio-rack .rail-screw { top:25px; } #das-studio-rack .rail-screw.left { left:calc(4.5% - 2px); } #das-studio-rack .rail-screw.right { right:calc(4.5% - 2px); }
      #das-studio-rack .garment-control, #das-studio-rack .garment-control:focus-visible { top:calc(25px - var(--piece-h) * .0375); width:min(calc(var(--piece-h) * .29),calc(var(--spacing) - 4px)); max-width:none; }
      #das-studio-rack .turntable[data-active] .garment-control { transform:translateX(-50%); }
      #das-studio-rack .instruction { padding:9px 15px; font-size:12px; }
      #das-studio-rack .desktop-hint { display:none; } #das-studio-rack .mobile-hint { display:inline; }
      #das-studio-rack .caption { margin-top:11px; font-size:7px; }
    }
    @media (max-width:380px) {
      #das-studio-rack .turntable { --piece-h:clamp(245px,78vw,280px); --spacing:clamp(72px,23vw,88px); }
    }
    @media (hover:none), (pointer:coarse) {
      #das-studio-rack .desktop-hint { display:none; } #das-studio-rack .mobile-hint { display:inline; }
    }
    @media (prefers-reduced-motion:reduce) { #das-studio-rack .garment-slot { transition:none; } }
    #das-studio-rack h2{font-family:Arial,Helvetica,sans-serif}
  
/* Computadores com mouse: a versão de toque conserva o tamanho aprovado. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  #das-studio-rack .top-note { font-size: 13px; }
  #das-studio-rack h2 { font-size: clamp(58px, 6.4vw, 112px); }
  #das-studio-rack .intro-copy {
    max-width: none;
    font-size: clamp(15px, 1.25vw, 20px);
  }
  #das-studio-rack .turntable {
    --piece-h: clamp(460px, 74vh, 720px);
    --spacing: clamp(175px, 15vw, 250px);
    width: min(1560px, 100%);
  }
  #das-studio-rack .rail { left: 5%; right: 5%; }
  #das-studio-rack .rail-screw.left { left: calc(5% - 2px); }
  #das-studio-rack .rail-screw.right { right: calc(5% - 2px); }
  #das-studio-rack .turntable[data-active="black"] .garment-slot.white { --push: 64px; }
  #das-studio-rack .turntable[data-active="black"] .garment-slot.blue { --push: 70px; }
  #das-studio-rack .turntable[data-active="white"] .garment-slot.black { --push: -70px; }
  #das-studio-rack .turntable[data-active="white"] .garment-slot.blue { --push: 70px; }
  #das-studio-rack .turntable[data-active="blue"] .garment-slot.black { --push: -70px; }
  #das-studio-rack .turntable[data-active="blue"] .garment-slot.white { --push: -64px; }
  #das-studio-rack .instruction { padding: 12px 20px; font-size: 15px; }
  #das-studio-rack .instruction-icon { font-size: 21px; }
  #das-studio-rack .caption { max-width: none; font-size: 10px; }
}

/* A quarta camiseta só existe visualmente em computadores com mouse. */
#das-studio-rack .garment-slot.brown { display: none; }
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  #das-studio-rack .turntable {
    --piece-h: min(720px, max(460px, 74vh), 48vw);
    --spacing: clamp(112px, 13vw, 230px);
  }
  #das-studio-rack .garment-control { width: min(calc(var(--piece-h) * .29), calc(var(--spacing) - 4px)); }
  #das-studio-rack .garment-slot.black { transform: translateX(calc(-1.5 * var(--spacing) + var(--push, 0px))); }
  #das-studio-rack .garment-slot.white { transform: translateX(calc(-.5 * var(--spacing) + var(--push, 0px))); }
  #das-studio-rack .garment-slot.blue { transform: translateX(calc(.5 * var(--spacing) + var(--push, 0px))); }
  #das-studio-rack .garment-slot.brown { display: block; transform: translateX(calc(1.5 * var(--spacing) + var(--push, 0px))); }
  #das-studio-rack .turntable[data-active="brown"] .garment-slot.brown { z-index: 3; }
  #das-studio-rack .turntable[data-active="black"] .garment-slot.white,
  #das-studio-rack .turntable[data-active="black"] .garment-slot.blue,
  #das-studio-rack .turntable[data-active="black"] .garment-slot.brown,
  #das-studio-rack .turntable[data-active="white"] .garment-slot.blue,
  #das-studio-rack .turntable[data-active="white"] .garment-slot.brown,
  #das-studio-rack .turntable[data-active="blue"] .garment-slot.brown { --push: 100px; }
  #das-studio-rack .turntable[data-active="white"] .garment-slot.black,
  #das-studio-rack .turntable[data-active="blue"] .garment-slot.black,
  #das-studio-rack .turntable[data-active="blue"] .garment-slot.white,
  #das-studio-rack .turntable[data-active="brown"] .garment-slot.black,
  #das-studio-rack .turntable[data-active="brown"] .garment-slot.white,
  #das-studio-rack .turntable[data-active="brown"] .garment-slot.blue { --push: -100px; }
}

/* Cinco peças no computador; as duas adicionais não aparecem em telas de toque. */
#das-studio-rack .garment-slot.light-blue { display: none; }
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  #das-studio-rack .turntable {
    --piece-h: min(720px, max(460px, 74vh), 44vw);
    --spacing: clamp(90px, 12vw, 230px);
    --rack-push: clamp(50px, 5vw, 90px);
  }
  #das-studio-rack .garment-slot.light-blue { display: block; transform: translateX(calc(-2 * var(--spacing) + var(--push, 0px))); }
  #das-studio-rack .garment-slot.black { transform: translateX(calc(-1 * var(--spacing) + var(--push, 0px))); }
  #das-studio-rack .garment-slot.white { transform: translateX(var(--push, 0px)); }
  #das-studio-rack .garment-slot.blue { transform: translateX(calc(var(--spacing) + var(--push, 0px))); }
  #das-studio-rack .garment-slot.brown { transform: translateX(calc(2 * var(--spacing) + var(--push, 0px))); }
  #das-studio-rack .turntable[data-active="light-blue"] .garment-slot.light-blue { z-index: 3; }
  #das-studio-rack .turntable[data-active="light-blue"] .garment-slot.black,
  #das-studio-rack .turntable[data-active="light-blue"] .garment-slot.white,
  #das-studio-rack .turntable[data-active="light-blue"] .garment-slot.blue,
  #das-studio-rack .turntable[data-active="light-blue"] .garment-slot.brown,
  #das-studio-rack .turntable[data-active="black"] .garment-slot.white,
  #das-studio-rack .turntable[data-active="black"] .garment-slot.blue,
  #das-studio-rack .turntable[data-active="black"] .garment-slot.brown,
  #das-studio-rack .turntable[data-active="white"] .garment-slot.blue,
  #das-studio-rack .turntable[data-active="white"] .garment-slot.brown,
  #das-studio-rack .turntable[data-active="blue"] .garment-slot.brown { --push: var(--rack-push); }
  #das-studio-rack .turntable[data-active="black"] .garment-slot.light-blue,
  #das-studio-rack .turntable[data-active="white"] .garment-slot.light-blue,
  #das-studio-rack .turntable[data-active="white"] .garment-slot.black,
  #das-studio-rack .turntable[data-active="blue"] .garment-slot.light-blue,
  #das-studio-rack .turntable[data-active="blue"] .garment-slot.black,
  #das-studio-rack .turntable[data-active="blue"] .garment-slot.white,
  #das-studio-rack .turntable[data-active="brown"] .garment-slot.light-blue,
  #das-studio-rack .turntable[data-active="brown"] .garment-slot.black,
  #das-studio-rack .turntable[data-active="brown"] .garment-slot.white,
  #das-studio-rack .turntable[data-active="brown"] .garment-slot.blue { --push: calc(-1 * var(--rack-push)); }
}


/* O espaço entre as palavras vem do próprio texto, sem margem extra. */
.proposal .editorial-services .mixed-title i {
  margin-left: 0;
}

#das-studio-rack svg.instruction-icon { display: block; width: 20px; height: 20px; flex: 0 0 20px; }