:root{
  --reel-w: min(420px, 90vw);
  --reel-radius: 18px;
  --orange: #ff7a1a;
  --overlay: rgba(0,0,0,.35);
}

.cuts-page{
  background: var(--bg);
  padding-top: calc(74px + 10px); /* header fixo */
}

/* HERO curto */
.cuts-hero{
  text-align:center;
  padding-top: 8px;
}
.cuts-kicker{
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  margin: 0 0 6px;
}
.cuts-title{
  margin:0 0 6px;
  font-size: clamp(26px, 4vw, 44px);
}
.cuts-title .accent{ color: var(--orange); }
.cuts-sub{
  color: var(--muted);
  margin:0 0 16px;
}

/* REELS */
.reels-wrap{
  display:grid;
  place-items:center;
  padding: 12px 16px 28px;
}

.reel{
  position: relative;
  width: var(--reel-w);
  aspect-ratio: 9/16;
  border-radius: var(--reel-radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0d0d0d;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.reel-video{
  width:100%;
  height:100%;
  object-fit: cover;       /* cobre todo o quadro */
  background:#000;
  display:block;
}

/* UI overlays */
.reel-ui{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows: 1fr auto;
  pointer-events:none; /* só botões recebem eventos */
}

.ui-btn{
  pointer-events:auto;
  border:1px solid var(--line);
  background: color-mix(in srgb, #111 80%, transparent);
  color: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  line-height: 1;
  transition: transform .15s var(--ease), filter .2s var(--ease), background .2s var(--ease);
  backdrop-filter: blur(6px) saturate(120%);
}
.ui-btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.ui-round{ border-radius: 999px; width:42px; height:42px; display:grid; place-items:center; }
.ui-primary{ background: color-mix(in srgb, var(--orange) 35%, #111); }

.ui-right{
  position:absolute;
  right:10px; bottom: 58px;
  display:flex; flex-direction:column; gap:8px;
}

#btnMute{
  position:absolute;
  left:10px; top:10px;
}

.ui-bottom{
  position:absolute; left:0; right:0; bottom:0;
  padding: 10px 12px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.45));
}

.meta{
  display:flex; align-items:center; gap:8px;
  font-size:.95rem;
}
.meta .title{ font-weight:600; }
.meta .sep{ opacity:.45; }

.progress{
  height:3px; width:100%;
  background: rgba(255,255,255,.1);
  border-radius:999px;
  overflow:hidden;
  margin-top:8px;
}
.progress .bar{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--orange), #ffa45a);
  transition: width .2s linear;
}

/* dica */
.hint{
  margin: 12px 0 0;
  font-size:.92rem;
  color: var(--muted);
  text-align:center;
}

/* ===== Responsivo ===== */

/* tablets */
@media (max-width: 920px){
  :root{ --reel-w: min(440px, 92vw); }
}

/* <=428px (base mobile) */
@media (max-width: 428px){
  :root{ --reel-w: min(92vw, 420px); --reel-radius: 14px; }
  .ui-right{ right:8px; bottom: 52px; }
  .ui-round{ width:40px; height:40px; }
  #btnMute{ left:8px; top:8px; }
  .meta{ font-size:.9rem; }
}

/* <=390px (iPhone 13 – seu alvo) */
@media (max-width: 390px){
  .ui-round{ width:38px; height:38px; }
  .ui-right{ bottom:48px; gap:6px; }
  .meta{ font-size:.88rem; }
}

/* <=380px — requisito explicitado */
@media (max-width: 380px){
  :root{ --reel-w: 94vw; }
  .ui-round{ width:36px; height:36px; }
  .ui-bottom{ padding: 8px 10px; }
  .meta{ font-size:.86rem; }
}


/* Botão de volume apenas visual (sem clique) */
#btnMute[aria-disabled="true"]{
  pointer-events: none;      /* inútil */
  cursor: default;
  opacity: .95;
}