/* Estilos de página: home (protótipo home.html). */
/* Hero: título em duas linhas na largura do grid */
.hero h1 .ln{padding-bottom:.16em;margin-bottom:-.1em}
.hero h1{grid-column:1/-1;font-size:clamp(40px,7.2vw,104px)}
@media (min-width:861px){.hero h1 .ln span{white-space:nowrap}}
/* Hero: miniatura do vídeo */
.hero-foot{align-items:end}
.reel-zone{grid-column:1/3;align-self:end;position:relative}
.reel{all:unset;box-sizing:border-box;position:relative;display:block;width:100%;aspect-ratio:16/9;cursor:pointer;will-change:transform;transform:translate3d(var(--tx,0px),var(--ty,0px),0) rotate(var(--rot,0deg))}
.reel-media{position:absolute;inset:0;overflow:hidden;background:var(--teal-500)}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08) translate3d(var(--ix,0px),var(--iy,0px),0);transition:transform .2s linear}
.reel video:not([src]){display:none}
.reel-ph{position:absolute;inset:-20%;background:
  radial-gradient(40% 60% at 30% 40%,rgba(11,11,11,.35),transparent 70%),
  radial-gradient(35% 50% at 75% 65%,rgba(255,255,255,.35),transparent 70%),
  var(--teal-500);animation:reelDrift 9s var(--ease) infinite alternate}
.reel-ph.big{inset:0;animation-duration:12s}
@keyframes reelDrift{0%{transform:translate(-6%,-3%) scale(1)}50%{transform:translate(5%,4%) scale(1.08)}100%{transform:translate(-2%,6%) scale(1.02)}}
.reel-play{position:absolute;left:var(--px,50%);top:var(--py,50%);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:9999px;background:var(--ink-950);color:var(--ink-100);display:grid;place-items:center;transform:scale(.4);opacity:0;transition:transform .45s var(--ease-soft),opacity .25s var(--ease)}
.reel-play svg{margin-left:3px}
.reel:hover .reel-play,.reel:focus-visible .reel-play{transform:scale(1);opacity:1}
.reel:focus-visible{outline:2px solid var(--teal-500);outline-offset:4px}
.reel-cap{display:block;margin-top:10px;font-size:13px}
@media (hover:none){.reel-play{transform:scale(1);opacity:1;left:50%;top:50%}}
@media (max-width:860px){.reel-zone{grid-column:1/-1;width:min(240px,60%)}}

/* Player */
.reel-dlg{border:0;padding:0;margin:auto;background:transparent;width:min(1200px,92vw);max-width:none;max-height:none;overflow:visible}
.reel-dlg::backdrop{background:rgba(11,11,11,.92);backdrop-filter:blur(6px)}
.reel-dlg[open]{animation:dlgIn .5s var(--ease-soft)}
@keyframes dlgIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.reel-box{position:relative}
.reel-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--teal-500)}
.reel-stage video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.reel-stage video:not([src]){display:none}
.reel-note{position:absolute;left:20px;bottom:18px;color:var(--ink-950);opacity:.7}
.reel-x{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;top:-56px;right:0;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--ink-600);color:var(--ink-100);transition:background .2s var(--ease),transform .3s var(--ease-soft)}
.reel-x:hover{background:var(--ink-800);transform:rotate(90deg)}
.reel-x:focus-visible{outline:2px solid var(--teal-500);outline-offset:3px}

/* Método: barra de progresso clicável */
.m-prog{margin-top:clamp(40px,6vw,72px);display:grid;gap:12px}
.m-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.m-bar button{all:unset;cursor:pointer;height:18px;position:relative}
.m-bar button::before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:var(--border);transition:background .4s var(--ease),transform .3s var(--ease-soft)}
.m-bar button:hover::before{background:var(--border-strong);transform:scaleY(2)}
.m-bar button.on::before{background:var(--text)}
.m-bar button.now::before{background:var(--accent)}
.m-bar button:focus-visible{outline:2px solid var(--state);outline-offset:2px}
.m-count{font-variant-numeric:tabular-nums}
@media (max-width:860px){.m-prog{display:none}}

/* Método: o que você recebe */
.rec{align-self:start;border-top:1px solid var(--border)}
.rec > .meta{display:block;padding:12px 0 4px;font-size:14px}
.rec ul{list-style:none;margin:0;padding:0}
.rec li{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:15px;line-height:1.45}
.rec li:last-child{border-bottom:0}
.rec li::before{content:"";grid-row:1/3;width:8px;height:8px;margin-top:7px;border:1px solid currentColor;transform:rotate(45deg);opacity:.5}
.stage.is-on .rec li::before{border-color:var(--accent);opacity:1}
.rec b{font-weight:500;color:inherit}
.rec li span{color:var(--muted)}
.stage.is-on .rec li span{color:var(--text-2)}

/* Vídeo fixo: só o hover muda. A prévia em loop entra quando o arquivo chegar. */
.reel{transform:none!important;will-change:auto}
.reel-play{left:50%!important;top:50%!important}
.reel video{transform:scale(1);transition:transform .8s var(--ease-soft)}
.reel:hover video{transform:scale(1.04)}
.reel-media::after{content:"";position:absolute;inset:0;background:rgba(11,11,11,0);transition:background .3s var(--ease)}
.reel:hover .reel-media::after{background:rgba(11,11,11,.12)}
/* Depoimentos no mobile: sem a lista de nomes, arraste para os lados */
@media (max-width:860px){.q-list{display:none!important}.q-stage{touch-action:pan-y;margin-top:40px}.q-ctrl{margin-top:32px}}