/* Seção de vídeos: vídeo principal "do bruto ao pronto" + 6 cards de diferencial */

/* ---- vídeo principal ---- */
#videos .flow-main{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:34px;align-items:center;margin-bottom:46px;
}
#videos .flow-main .eyebrow{
  display:inline-block;padding:7px 10px;background:#0d0b12;color:#f2a65a;border:2px solid #4b3f66;
  font-family:"Press Start 2P","Courier New",monospace;font-size:9px;letter-spacing:0;line-height:1.4;box-shadow:3px 3px 0 #dd7136;
}
#videos .flow-main h4{
  margin:16px 0 14px;font-family:"Press Start 2P","Courier New",monospace;font-weight:400;letter-spacing:0;text-transform:uppercase;
  font-size:clamp(14px,1.7vw,22px);line-height:1.6;text-shadow:4px 4px 0 rgba(221,113,54,.5);
}
#videos .flow-main-copy>p{font-family:"VT323","Courier New",monospace;font-size:24px;line-height:1.1;max-width:44ch}
#videos .flow-main .flow-player{
  border:4px solid #0d0b12;box-shadow:inset 4px 4px 0 #4b3f66,inset -4px -4px 0 #120f1b,8px 8px 0 #0d0b12,8px 8px 0 2px #dd7136;margin:0;
}

/* relógio da edição (argumento de venda) */
#videos .flow-clock{
  display:inline-flex;align-items:center;gap:12px;margin-top:20px;padding:10px 14px;
  background:#0d0b12;border:3px solid #4b3f66;box-shadow:4px 4px 0 #dd7136;color:#fff;
}
#videos .flow-clock span{font-family:"Press Start 2P","Courier New",monospace;font-size:9px;line-height:1.5;letter-spacing:0}
#videos .flow-clock .flow-clock-tag{padding:3px 5px;background:#f2a65a;color:#0d0b12;font-size:7px}
#videos .flow-clock b{font-family:"Press Start 2P","Courier New",monospace;font-weight:400;font-size:18px;color:#b7c79a;background:#1b2a14;padding:5px 8px;letter-spacing:0;border:3px solid #0d0b12}

/* ---- grade 3 × 2 ---- */
#videos .flow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
#videos .flow-card{display:flex;flex-direction:column}
#videos .flow-card .video-caption{flex:1}
#videos .flow-card .flow-player{margin:4px 4px 0;border-bottom:4px solid #0d0b12}

/* ---- player (compartilhado) ---- */
#videos .flow-player{position:relative;aspect-ratio:16/9;background:#202022;overflow:hidden}
#videos .flow-player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0d0b12;display:block}
#videos .flow-player .video-placeholder{position:absolute;inset:0}
#videos .flow-player.has-video .video-placeholder{display:none}
#videos .flow-play{
  position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:pointer;z-index:2;
}
#videos .flow-play:disabled{cursor:not-allowed}
#videos .flow-play:focus-visible{outline:3px dashed #f2a65a;outline-offset:-6px}
#videos .flow-player.is-playing .flow-play::after{
  content:"❚❚";position:absolute;right:12px;top:12px;padding:5px 6px;background:#0d0b12;color:#f2a65a;
  font-family:"Press Start 2P","Courier New",monospace;font-size:8px;opacity:0;transition:none;
}
#videos .flow-player.is-playing:hover .flow-play::after{opacity:1}
#videos .flow-player:not(.has-video) .video-play{opacity:.45}
#videos .flow-player.has-video:not(.is-playing)::before{
  content:"▶";position:absolute;inset:0;display:grid;place-items:center;z-index:1;pointer-events:none;
  font-family:"Press Start 2P","Courier New",monospace;font-size:28px;color:#f2a65a;text-shadow:3px 3px 0 #0d0b12;background:rgba(13,11,18,.35);
}
/* barra de 3 etapas: antes / processo / depois */
#videos .flow-stages{z-index:3;pointer-events:none}
#videos .flow-stages i{transition:none}
#videos .flow-stages i.on{background:#dd7136!important;box-shadow:inset 0 3px 0 #f6a26f,0 0 0 2px #0d0b12}
#videos .flow-player.has-video .flow-stages{position:absolute;left:14px;right:14px;bottom:12px;display:flex;gap:5px}

/* aviso e botão de som */
#videos .flow-hint{
  position:absolute;left:10px;top:10px;z-index:3;padding:5px 7px;background:#dd7136;color:#0d0b12;border:3px solid #0d0b12;
  font-family:"Press Start 2P","Courier New",monospace;font-size:7px;line-height:1.4;box-shadow:3px 3px 0 #0d0b12;pointer-events:none;
}
#videos .flow-sound{
  position:absolute;right:10px;bottom:30px;z-index:4;padding:7px 9px;background:#262034;color:#fff;border:3px solid #0d0b12;border-radius:0;cursor:pointer;
  font-family:"Press Start 2P","Courier New",monospace;font-size:7px;line-height:1.4;box-shadow:inset 2px 2px 0 #4b3f66,3px 3px 0 #0d0b12;
}
#videos .flow-sound[aria-pressed="true"]{background:#dd7136;color:#0d0b12}
#videos .flow-sound:hover{transform:translate(-1px,-1px)}
#videos .flow-sound:active{transform:translate(2px,2px);box-shadow:none}
#videos .flow-player.has-video .flow-sound{display:block}

/* ---- celular: cards em carrossel ---- */
.flow-dots{display:none}
@media (max-width:860px){
  #videos .flow-main{grid-template-columns:1fr;gap:26px}
}
@media (max-width:760px){
  #videos .flow-grid{
    display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 2px 18px;margin:0 -2px;
    scrollbar-width:thin;scrollbar-color:#dd7136 #0d0b12;
  }
  #videos .flow-card{flex:0 0 84%;scroll-snap-align:center}
  #videos .flow-dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
  #videos .flow-dots i{width:12px;height:12px;background:#2c2540;border:2px solid #0d0b12;box-shadow:2px 2px 0 #0d0b12}
  #videos .flow-dots i.on{background:#dd7136}
  #videos .video-caption h4{font-size:11px;word-break:keep-all;overflow-wrap:break-word}
}
@media (prefers-reduced-motion:reduce){#videos .flow-sound:hover{transform:none}}

/* ---- painel aberto ao clicar num cartão ---- */
#videos .flow-card{cursor:pointer}
#videos .flow-card:focus-visible{outline:3px dashed #f2a65a;outline-offset:4px}
#videos .flow-card .flow-play{pointer-events:none}
.flow-modal{
  width:min(980px,94vw);max-height:90vh;padding:0;overflow:auto;color:#fff;
  background:#1b1626;border:4px solid #0d0b12;border-radius:0;
  box-shadow:inset 4px 4px 0 #4b3f66,inset -4px -4px 0 #120f1b,10px 10px 0 #0d0b12,10px 10px 0 3px #dd7136;
  scrollbar-color:#dd7136 #0d0b12;scrollbar-width:thin;
}
.flow-modal[open]{animation:px-unfold-modal .36s steps(6,end) both}
@keyframes px-unfold-modal{from{clip-path:inset(50% 0 50% 0)}to{clip-path:inset(0 0 0 0)}}
.flow-modal::backdrop{background:rgba(13,11,18,.82)}
.flow-modal-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:26px;padding:26px;align-items:center}
.flow-modal-media{position:relative;aspect-ratio:16/9;background:#202022;border:4px solid #0d0b12;box-shadow:0 0 0 3px #4b3f66,6px 6px 0 3px #0d0b12;overflow:hidden}
.flow-modal-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0d0b12}
.flow-modal-media .video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.flow-modal-media .video-play{width:48px;height:48px;padding:12px;box-sizing:content-box;border:3px solid #a96e43;fill:none;stroke:#f2a65a;stroke-width:1.5;shape-rendering:crispEdges}
.flow-modal-media .video-coming{font-family:"Press Start 2P","Courier New",monospace;font-size:10px;color:#f2a65a;animation:px-blink 1.2s steps(2,start) infinite}
.flow-modal-media .video-window{position:absolute;top:13px;left:15px;display:flex;gap:4px}
.flow-modal-media .video-window i{width:5px;height:5px;background:#6f5c50}
.flow-modal-media .video-lines{position:absolute;bottom:14px;left:17px;right:17px;display:flex;gap:5px}
.flow-modal-media .video-lines i{flex:1;height:6px;background:#755943;box-shadow:0 0 0 2px #0d0b12}
.flow-modal-media .flow-hint{position:absolute;left:10px;top:10px;z-index:3;padding:5px 7px;background:#dd7136;color:#0d0b12;border:3px solid #0d0b12;font-family:"Press Start 2P","Courier New",monospace;font-size:7px;line-height:1.4}
.flow-modal-copy .video-caption{padding:0}
.flow-modal-copy .mini-label{display:inline-block;padding:5px 8px;background:#0d0b12;color:#f2a65a;border:2px solid #4b3f66;font-family:"Press Start 2P","Courier New",monospace;font-size:8px;line-height:1.5;letter-spacing:0;box-shadow:3px 3px 0 #dd7136}
.flow-modal-copy h4{margin:16px 0 10px;font-family:"Press Start 2P","Courier New",monospace;font-weight:400;font-size:clamp(12px,1.6vw,16px);line-height:1.7;letter-spacing:0;text-transform:uppercase;color:#fff;text-shadow:3px 3px 0 #0d0b12}
.flow-modal-copy p{margin:0;font-family:"VT323","Courier New",monospace;font-size:24px;line-height:1.15;color:#cdbfe6}
.flow-modal-copy .flow-modal-alt{margin-top:16px;padding-top:12px;border-top:3px dashed #4b3f66;font-size:20px;color:#f2a65a}
.flow-modal-copy .flow-modal-alt::before{content:"▶ ";font-family:"Press Start 2P","Courier New",monospace;font-size:9px}
.flow-modal-close{
  position:sticky;float:right;top:10px;margin:10px 10px 0 0;z-index:5;width:38px;height:38px;cursor:pointer;
  background:#dd7136;color:#0d0b12;border:3px solid #0d0b12;border-radius:0;
  box-shadow:inset 2px 2px 0 #f6a26f,inset -2px -2px 0 #9a4617,3px 3px 0 #0d0b12;
  font-family:"Press Start 2P","Courier New",monospace;font-size:14px;line-height:1;
}
.flow-modal-close:hover{transform:translate(-1px,-1px)}
.flow-modal-close:active{transform:translate(3px,3px);box-shadow:none}
.flow-modal-close:focus-visible{outline:3px dashed #f2a65a;outline-offset:3px}
@media (max-width:760px){.flow-modal-grid{grid-template-columns:1fr;padding:18px;gap:18px}}
@media (prefers-reduced-motion:reduce){.flow-modal[open]{animation:none}}