/* ============================================================
   Garage — complemento para páginas de isca (material gratuito)
   Carregado DEPOIS de base.css, só nas páginas que capturam e-mail.
   Não altera nenhuma regra do chassi: só acrescenta o formulário.
   ============================================================ */

.captura{border:1px solid var(--borda);border-top:4px solid var(--linha);
  background:#fff;padding:30px;max-width:34em}
.captura .campo{margin:0 0 16px}
.captura .campo label{display:block;font-family:"IBM Plex Mono",monospace;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--linha-texto);
  font-weight:600;margin:0 0 7px}
.captura .campo input{width:100%;font:inherit;font-size:18px;color:var(--tinta);
  background:var(--papel2);border:1px solid var(--borda);border-radius:3px;
  padding:13px 14px;min-height:50px}
.captura .campo input:focus{outline:3px solid var(--linha-neg);outline-offset:2px;
  border-color:var(--linha);background:#fff}

.consent{display:flex;gap:11px;align-items:flex-start;margin:20px 0 22px;
  font-size:16px;color:var(--tinta2);line-height:1.5}
.consent input{margin-top:4px;flex:0 0 auto;width:19px;height:19px;accent-color:var(--acao)}
.consent a{color:var(--linha-texto)}

.captura .btn{width:100%;text-align:center}
.captura-nota{margin:16px 0 0;max-width:34em}

/* fecho: o formulário centralizado repete a captura no fim da página */
.fecho .captura{margin:0 auto;text-align:left}

/* barra do celular numa página sem preço */
.barraMob .p.gratis{font-size:20px;letter-spacing:.02em}

@media (max-width:640px){
  .captura{padding:22px}
}

.captura .dica{margin:6px 0 0;font-family:"IBM Plex Mono",monospace;font-size:12.5px;
  letter-spacing:.02em;color:var(--tinta2)}

/* -------- estados de validação -------- */
.captura .campo.com-erro input{border-color:var(--acao);background:#fff}
.captura .campo.com-erro label{color:var(--acao)}
.msg-erro{margin:7px 0 0;font-family:"IBM Plex Mono",monospace;font-size:13px;
  letter-spacing:.02em;color:var(--acao);font-weight:600}
.msg-sugestao{margin:7px 0 0;font-size:15.5px;color:var(--tinta2)}
.msg-sugestao button{font:inherit;font-weight:600;color:var(--linha-texto);
  background:none;border:0;border-bottom:1px solid currentColor;
  padding:0;cursor:pointer}
.msg-sugestao button:hover{color:var(--acao)}
.consent.com-erro{color:var(--acao)}
.consent.com-erro input{outline:2px solid var(--acao);outline-offset:2px}

/* -------- capa com banner -------- */
/* O chassi corta a capa em 2:1. Os banners da isca sao compostos em
   16:9, entao a proporcao e ajustada aqui, so nas paginas de isca. */
.capa{display:block}
.capa img{aspect-ratio:16/9}