/* Como usar: vídeos em moldura de celular ao lado do passo a passo */
.estreito-centro { max-width: 820px; margin: 0 auto; }
.atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 26px 0 10px; }
.atalhos a { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; color: var(--tinta); text-decoration: none; font-weight: 800; font-size: 15px; }
.atalhos a:hover { border-color: var(--vinho); }
.atalhos strong { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--vinho); color: #fff; display: grid; place-items: center; font-size: 14px; }
.como-usar .parte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; padding: 48px 0 8px; border-top: 1px solid var(--linha); margin-top: 40px; scroll-margin-top: 80px; }
.como-usar .parte .texto { max-width: 820px; margin: 0 auto; width: 100%; }
.como-usar .com-video { grid-template-columns: 330px minmax(0, 1fr); }
.como-usar .com-video .texto { margin: 0; }
.como-usar .parte h2 { margin-top: 0; }
.video-celular { margin: 0; position: sticky; top: 90px; }
.video-celular video { width: 100%; height: auto; display: block; border-radius: 30px; border: 10px solid #1C1B22; background: #1C1B22; box-shadow: var(--sombra); }
.video-celular figcaption { text-align: center; font-size: 14px; color: var(--cinza); margin-top: 10px; font-weight: 800; }
.dica { background: #E3F4EE; color: #155C46; border-radius: 12px; padding: 12px 16px; font-size: 15.5px !important; }
.dica.importante { background: #FFF6E6; color: #5B4313; }
.dica a { color: inherit; }
@media (max-width: 860px) {
  .como-usar .com-video { grid-template-columns: minmax(0, 1fr); }
  .video-celular { position: static; max-width: 300px; margin: 0 auto; }
}