/* ===== "Built to be worn 24/7" — portada de www.whoop.com (tools/aplica_w24.py).
   Markup re-escopado .dy-w24 (CSS Modules da www nao portam); visual medido ao
   vivo em 30/07/2026: fundo preto, proxima-nova (ja local no clone), coluna de
   texto + video 1:1, barra de progresso por item. ===== */
.dy-w24{background:#000;color:#fff;font-family:proxima-nova,Arial,Helvetica,sans-serif;
  padding:72px 24px;min-width:0;width:100%;max-width:100%}
.dy-w24 *{box-sizing:border-box}
.dy-w24-in{max-width:1242px;margin:0 auto}
.dy-w24-h{font-size:clamp(34px,5vw,64px);font-weight:600;letter-spacing:-.02em;line-height:1.05;
  margin:0 0 44px;text-align:left}
.dy-w24-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
@media(min-width:900px){.dy-w24-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}
.dy-w24-item{position:relative;padding:18px 0 6px}
.dy-w24-item h3{margin:0}
.dy-w24-item h3 button{appearance:none;background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;color:rgba(255,255,255,.55);font-size:24px;font-weight:600;
  letter-spacing:-.03em;text-align:left;transition:color .25s}
.dy-w24-item.on h3 button{color:#fff}
.dy-w24-item h3 button:hover{color:#fff}
.dy-w24-bar{height:2px;background:rgba(255,255,255,.18);border-radius:2px;margin:14px 0 0;overflow:hidden}
.dy-w24-bar i{display:block;height:100%;width:0;background:#fff;border-radius:2px}
.dy-w24-item.on .dy-w24-bar i{animation:dyW24bar linear forwards;animation-duration:var(--dy-w24-dur,8000ms)}
.dy-w24.paused .dy-w24-bar i{animation-play-state:paused}
@keyframes dyW24bar{from{width:0}to{width:100%}}
.dy-w24-body{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease,opacity .35s ease}
.dy-w24-item.on .dy-w24-body{max-height:200px;opacity:1}
.dy-w24-body p{font-size:clamp(16px,1.7vw,24px);line-height:1.3;font-weight:400;margin:14px 0 6px;
  color:#fff}
.dy-w24-media{position:relative;min-width:0}
.dy-w24-vid{display:none;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:0}
.dy-w24-vid.on{display:block}
.dy-w24-pause{position:absolute;right:14px;bottom:14px;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.45);display:flex;align-items:center;
  justify-content:center;cursor:pointer;padding:0}
.dy-w24-pause svg{width:22px;height:22px}
/* mobile: itens viram slider horizontal (keen-slider do original), video em cima */
@media(max-width:899px){
  .dy-w24{padding:56px 18px}
  .dy-w24-grid{display:flex;flex-direction:column}
  .dy-w24-media{order:0}
  .dy-w24-items{order:1;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 -18px;padding:0 18px}
  .dy-w24-items::-webkit-scrollbar{height:0;display:none}
  .dy-w24-item{flex:0 0 64%;scroll-snap-align:center}
  .dy-w24-item h3 button{font-size:19px}
  .dy-w24-body{max-height:none;opacity:1}
  .dy-w24-item .dy-w24-body p{font-size:14.5px;color:rgba(255,255,255,.75)}
  .dy-w24-item.on .dy-w24-body p{color:#fff}
}