/* Página do Vídeos no Automático pra dono de pequeno negócio (01/11/2026). Usa site.css + b.css + yt.css; aqui só o que é dela. */

/* topo: texto à esquerda, o celular com o anúncio à direita */
.ng-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; text-align: left; }
.ng-hero h1 { font-size: clamp(34px, 4.6vw, 58px); margin: 0; }
.ng-hero .sub { margin-left: 0; }
.ng-hero .cta-hero { align-items: flex-start; }
.ng-segmentos { list-style: none; margin: var(--e5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.ng-segmentos li { font: 400 var(--fs-xs)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t2); border: 1px solid var(--linha); padding: 8px 10px; }
.ng-hero .celular { width: min(330px, 100%); }
.ng-hero > * { min-width: 0; }   /* sem isso o botão longo alarga a coluna e corta o título no celular */

/* como funciona: as fotos, o pedido e o Reels */
.ng-fluxo { display: grid; grid-template-columns: 300px auto 1fr auto 220px; gap: var(--e4); align-items: center; max-width: 1040px; margin: 0 auto; }
.ng-fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ng-fotos img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; border: 1px solid #D6E2BF; }
.ng-seta { font: 400 28px/1 var(--mono); color: #5A8A00; }
.ng-pedido { background: #10140F; color: var(--t1); padding: 18px; font: 400 15px/1.5 var(--mono); }
.ng-pedido span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); margin-bottom: 10px; }
.ng-pedido b { color: var(--lime); font-weight: 400; }
.ng-fluxo .short { max-width: 230px; }
.ng-fluxo-rot { display: grid; grid-template-columns: 300px auto 1fr auto 220px; gap: var(--e4); margin: var(--e4) auto 0; max-width: 1040px; }
.ng-fluxo-rot p { margin: 0; font-size: 15px; color: #3B4535; }
.ng-fluxo-rot p b { display: block; color: #10140F; font-size: 18px; }

/* exemplos: 3 colunas no computador */
.ng-exemplos { grid-template-columns: repeat(3, 1fr); max-width: 760px; }
.ng-exemplos figcaption small { display: block; }

/* requisitos mínimos */
.ng-req { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e3); }
.ng-req li { padding: 20px; border: 1px solid var(--linha); background: var(--asfalto-2); }
.ng-req li i { display: grid; place-items: center; width: 34px; height: 34px; background: var(--lime); color: var(--on-lime); font: 600 18px/1 var(--mono); font-style: normal; }
.ng-req h3 { font-size: 19px; margin-top: var(--e3); }
.ng-req p { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--t2); }
.ng-req-nota { max-width: 760px; margin: var(--e5) auto 0; text-align: center; color: var(--t2); }
.ng-req-nota b { color: var(--t1); font-weight: 500; }

@media (max-width: 900px) {
  .ng-hero { grid-template-columns: 1fr; text-align: center; }
  .ng-hero .sub { margin-inline: auto; }
  .ng-hero .cta-hero { align-items: center; }
  .ng-segmentos { justify-content: center; }
  .ng-hero .celular { width: min(260px, 70vw); }
  .ng-hero .btn { white-space: normal; text-align: center; }
  .ng-fluxo, .ng-fluxo-rot { grid-template-columns: 1fr; }
  .ng-fotos { max-width: 320px; justify-self: center; }
  .ng-fluxo-rot { display: none; }
  .ng-seta { transform: rotate(90deg); justify-self: center; }
  .ng-fluxo .short { justify-self: center; }
  .ng-req { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .ng-req { grid-template-columns: 1fr; } }