:root{
  --amarelo:#ffd700;
  --amarelo-2:#ffef06;
  --azul:#005498;
  --azul-2:#2e67a4;
  --preto:#1a1a1a;
  --fundo:#f3f3f3;
  --branco:#ffffff;
  --borda:#dcdcdc;
  --erro:#c62828;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--fundo);
  color:var(--preto);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

.tela{
  flex:1;
  width:100%;
  max-width:1140px;
  margin:0 auto;
  padding:56px 28px 40px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:56px;
  align-items:center;
}

.logo{width:250px;max-width:70%;height:auto;margin-bottom:30px}

/* título no padrão da capa */
h1{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:26px}
.h1-linha{
  font-family:'Anton',Impact,sans-serif;
  font-size:clamp(22px,3.4vw,38px);
  letter-spacing:.005em;
  color:var(--preto);
  line-height:1;
}
.ponto{color:var(--amarelo);-webkit-text-stroke:0}
.h1-destaque{
  font-family:'Anton',Impact,sans-serif;
  font-size:clamp(62px,10.5vw,124px);
  line-height:.88;
  letter-spacing:-.01em;
  color:var(--amarelo);
  transform:skewX(-8deg);
  transform-origin:left bottom;
  margin:6px 0 14px;
  text-shadow:2px 3px 0 rgba(0,0,0,.10);
}
.h1-selo{
  font-family:'Anton',Impact,sans-serif;
  font-size:clamp(15px,1.9vw,22px);
  letter-spacing:.06em;
  color:var(--preto);
  background:var(--amarelo);
  padding:7px 26px;
  transform:skewX(-8deg);
}

.sub{font-size:16.5px;color:#4a4a4a;margin-bottom:22px;max-width:42ch}

/* formulário */
.form-lead{display:grid;gap:12px;max-width:430px}
.campo{display:grid;gap:5px}
.campo input{
  width:100%;
  padding:16px 18px;
  border:2px solid var(--borda);
  border-radius:6px;
  background:var(--branco);
  font:inherit;
  font-size:16px;
  color:var(--preto);
  transition:border-color .16s,box-shadow .16s;
}
.campo input::placeholder{color:#9a9a9a}
.campo input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(0,84,152,.14)}
.campo input.invalido{border-color:var(--erro)}
.erro{font-size:12.5px;color:var(--erro);min-height:1px}

.btn{
  width:100%;
  padding:18px 24px;
  border:none;
  border-radius:6px;
  background:linear-gradient(90deg,var(--amarelo),var(--amarelo-2));
  color:var(--preto);
  font-family:'Anton',Impact,sans-serif;
  font-size:20px;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 6px 0 #d8b400;
  transition:transform .12s,box-shadow .12s,filter .16s;
}
.btn:hover{transform:translateY(2px);box-shadow:0 4px 0 #d8b400}
.btn:active{transform:translateY(6px);box-shadow:0 0 0 #d8b400}
.btn:disabled{filter:grayscale(.35) brightness(.95);cursor:wait}

/* capa */
.col-capa{display:flex;justify-content:center}
.capa{
  width:100%;
  max-width:400px;
  height:auto;
  border-radius:4px;
  box-shadow:0 24px 60px rgba(0,0,0,.22);
}

/* barra amarela do rodapé, igual à da capa */
.barra-rodape{height:22px;background:linear-gradient(90deg,var(--amarelo),var(--amarelo-2))}

/* obrigado */
.obrigado{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:56px 28px;text-align:center;
}
.obrigado-inner{max-width:620px}
.obrigado .logo{margin:0 auto 30px;display:block}
.obrigado h1{display:block;font-family:'Anton',Impact,sans-serif;font-size:clamp(34px,5.5vw,58px);line-height:1;margin-bottom:18px}
.obrigado h1 em{font-style:normal;color:var(--amarelo);text-shadow:1px 2px 0 rgba(0,0,0,.10)}
.obrigado p{font-size:16.5px;color:#4a4a4a;margin-bottom:26px}
.obrigado .btn{display:inline-block;width:auto;text-decoration:none;text-align:center}
.link-secundario{display:block;margin-top:18px;font-size:14px;color:var(--azul);text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .tela{grid-template-columns:1fr;gap:26px;padding:26px 22px 30px;text-align:left}
  .col-capa{order:-1}
  .capa{max-width:180px}
  .logo{width:200px;margin-bottom:20px}
  h1{align-items:flex-start;margin-bottom:20px}
  .sub{font-size:15.5px;margin-bottom:18px}
  .form-lead{max-width:none}
}
