/* Página comercial — estrutura "do roteiro ao vídeo". Usa só os tokens de base.css. */

/* abertura */
.abertura{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"titulo video" "resto video";column-gap:56px;align-items:center;padding:var(--e-6) 0 var(--e-9)}
.abertura .titulo{grid-area:titulo;align-self:end}
.abertura .resto{grid-area:resto;align-self:start}
.abertura .celular{grid-area:video}
.abertura h1 b{font-weight:400;color:var(--c-marca)}
.abertura .lide{margin-top:var(--e-5)}
.abertura .lide strong{color:var(--c-texto);font-weight:400}

.contexto{margin-top:var(--e-6);padding:var(--e-4) var(--e-5);border:1px solid var(--c-dado-fraco);background:var(--c-superficie);max-width:560px}
.contexto[hidden]{display:none}
.contexto-titulo{margin:var(--e-1) 0 var(--e-2);color:var(--c-texto);font-size:var(--t-18)}

.preco{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:2px;margin:var(--e-6) 0 var(--e-4)}
.preco .agora{font-size:var(--t-36);font-weight:400;letter-spacing:-.02em;white-space:nowrap}
.preco .depois,.preco s{color:var(--c-texto-2)}

.lista-form{display:grid;gap:var(--e-4);max-width:560px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-3)}

.prova{margin-top:var(--e-6);padding-top:var(--e-5);border-top:var(--borda);font-size:var(--t-14);color:var(--c-texto-2);max-width:56ch}
.prova strong{color:var(--c-texto);font-weight:400}
.prova small{display:block;margin-top:var(--e-2);font-size:13px;color:var(--c-texto-3)}

.celular{position:relative;aspect-ratio:9/16;border:1px solid var(--c-dado-fraco);background:#000;box-shadow:var(--sombra-2),0 0 0 6px rgba(12,20,36,.9)}
.celular video{width:100%;height:100%;object-fit:cover}
.celular figcaption{position:absolute;left:0;right:0;bottom:-30px;font-size:13px;color:var(--c-texto-2)}

/* seções */
section{padding:var(--e-9) 0;border-top:var(--borda)}
.intro{margin-top:var(--e-4);color:var(--c-texto-2);max-width:60ch;font-size:var(--t-18)}

/* do roteiro ao vídeo */
.passos{list-style:none;margin-top:var(--e-7);display:grid;gap:28px}
.passo{display:grid;grid-template-columns:minmax(0,1fr) 40px 200px;gap:20px;align-items:center}
.passo .codigo{transition:border-color .5s var(--ease-saida)}
.passo.ativo .codigo{border-color:var(--c-dado-fraco)}
.codigo .ch{color:var(--c-texto-3)}
.passo p.faz{margin-top:10px;font-size:var(--t-14);color:var(--c-texto-2)}
.seta{height:1px;background:linear-gradient(90deg,var(--c-linha),var(--c-dado));position:relative}
.seta::after{content:"";position:absolute;right:-1px;top:-4px;border:4.5px solid transparent;border-left:7px solid var(--c-dado);border-right:0}
.quadro{position:relative;aspect-ratio:9/16;border:var(--borda);overflow:hidden;background:#000}
.quadro img{width:100%;height:100%;object-fit:cover}
/* o único momento de movimento: uma linha de render varre o quadro quando ele entra */
.quadro::after{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--c-dado);box-shadow:0 2px 14px rgba(92,225,255,.45);opacity:0}
.passo.ativo .quadro::after{animation:varre 1.1s var(--ease-saida) both}
@keyframes varre{0%{top:-2px;opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}

/* linha de produção */
.linha-producao{list-style:none;margin-top:var(--e-7);position:relative;max-width:760px}
.linha-producao::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--c-marca-fraca)}
.linha-producao li{position:relative;padding:0 0 26px 34px}
.linha-producao li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:11px;border:1px solid var(--c-marca);background:var(--c-fundo)}
.linha-producao li:last-child::before{background:var(--c-marca)}
.linha-producao b{font-weight:400}
.linha-producao code{font-family:var(--f-mono);font-size:12.5px;color:var(--c-dado);margin-left:8px}
.linha-producao p{margin-top:4px;font-size:15px;color:var(--c-texto-2);max-width:60ch}

/* listas de itens */
.duas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;margin-top:var(--e-7)}
.itens{list-style:none}
.itens li{padding:var(--e-4) 0;border-bottom:var(--borda)}
.itens li:first-child{border-top:var(--borda)}
.itens b{font-weight:400}
.itens p{margin-top:4px;font-size:15px;color:var(--c-texto-2)}
.itens.quem,.itens.precisa{margin-top:var(--e-6);max-width:760px}
.quer-dado{margin-top:var(--e-5)}
.extras li{display:grid;grid-template-columns:1fr auto;gap:var(--e-4);align-items:baseline}
.extras .valor{font-family:var(--f-mono);font-size:var(--t-14);color:var(--c-texto)}
h3{font-weight:400;font-size:var(--t-18);margin-bottom:14px}
h3 + p.nota{margin:-6px 0 14px;font-size:var(--t-14);color:var(--c-texto-2)}

.perguntas{margin-top:var(--e-6);max-width:760px}
.fim .lista-form{margin-top:var(--e-6)}

/* notebook e tablet */
@media (max-width:1023px){
  .abertura{column-gap:var(--e-6);grid-template-columns:minmax(0,1fr) 240px}
  .passo{grid-template-columns:minmax(0,1fr) 28px 160px;gap:var(--e-3)}
}
@media (max-width:859px){
  .abertura{grid-template-columns:1fr;grid-template-areas:"titulo" "resto" "video";padding:var(--e-3) 0 var(--e-8)}
  .abertura .celular{max-width:260px;width:100%;justify-self:center;margin-top:var(--e-7)}
  .abertura .resto{display:flex;flex-direction:column}
  .abertura .resto .preco{order:-2;margin-top:var(--e-5)}
  .abertura .resto .lista-form{order:-1}
  .abertura .resto .contexto{order:-3;margin-top:var(--e-5)}
  .duas{grid-template-columns:1fr;gap:var(--e-7)}
}
@media (max-width:639px){
  section{padding:var(--e-8) 0}
  .campos{grid-template-columns:1fr}
  .passo{grid-template-columns:minmax(0,1fr) 112px;gap:14px;align-items:start}
  .passo .seta{display:none}
  .passo .codigo{font-size:12px;padding:14px}
  .abertura .lide{font-size:var(--t-16);margin-top:var(--e-4)}
  .abertura h1{font-size:2.1rem}
  .intro{font-size:var(--t-16)}
}