@font-face{font-family:"Poppins";font-weight:300;font-style:normal;font-display:swap;src:url(fonts/poppins-300.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Roboto";font-weight:100 900;font-style:normal;font-display:swap;src:url(fonts/roboto.woff2) format("woff2")}

:root{
  --black:#000;
  --white:#fff;
  --text:#333;
  --sub:#dadada;
  --label:#e0e0e0;
  --field:#666;
  --field-border:#69727d;
  --red:#f00;
  --font:"Roboto",sans-serif;
  --font-form:"Poppins",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{line-height:1.15;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--text);font-family:var(--font);font-size:1rem;font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased}
img{border:0;max-width:100%;height:auto;display:block}
p,h2{margin:0}

.container{max-width:1140px;margin:0 auto;display:flex;flex-wrap:wrap}
.col{position:relative;display:flex;flex-direction:column;width:100%}

/* topo */
.topo{background:var(--black);padding:20px}
.col-logo{justify-content:center;padding:10px}
.col-titulo{padding:20px}
.topo h2{color:var(--white);font-size:2rem;font-weight:600;line-height:1;margin-bottom:20px}
.topo p{color:var(--white);margin-bottom:14px}

/* conteúdo */
.conteudo{padding:20px}
.col-texto{padding:20px}
.col-texto p{font-size:18px;font-weight:300;color:#000;margin-bottom:15px}
.col-texto p:last-child{margin-bottom:12px}
.col-texto b{font-weight:400}
.col-form{animation:fadeIn 1.25s both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.form-box{background:var(--black);border-radius:10px;padding:30px;margin:5px 10px;height:100%}
.form-box h2{font-family:var(--font-form);font-size:40px;font-weight:300;line-height:1;color:var(--white);text-align:center;margin-bottom:20px}
.form-sub{font-family:var(--font-form);font-size:16px;font-weight:400;line-height:32px;color:var(--sub);text-align:center;margin-bottom:20px}
form{margin:0 -5px -10px}
.campo{padding:0 5px;margin-bottom:10px}
.campo label{display:block;color:var(--label);padding-bottom:7px;line-height:1}
.campo input,.campo select{display:block;width:100%;min-height:40px;padding:5px 16px;background:var(--white);border:1px solid var(--field-border);border-radius:100px;color:var(--field);font-family:var(--font);font-size:15px;line-height:1.4}
.campo input::placeholder{color:inherit;opacity:.6}
.campo input:focus,.campo select:focus{outline:0;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .1)}
.select{position:relative;display:flex}
.select select{font-size:16px;appearance:none;-webkit-appearance:none;padding-inline-end:34px}
.caret{position:absolute;right:10px;top:50%;width:13px;height:13px;transform:translateY(-50%);fill:var(--field);pointer-events:none}
button{display:block;width:calc(100% - 10px);min-height:40px;margin:12px 5px 0;padding:0;background:transparent;color:var(--white);border:3px solid var(--red);border-radius:100px;font-family:var(--font);font-size:15px;font-weight:500;line-height:1;cursor:pointer;transition:background-color .3s}
button:hover{background:var(--red)}

/* tablet e desktop */
@media(min-width:768px){
  .col-logo{width:19.474%}
  .col-titulo{width:80.526%}
  .col-texto{width:59.999%;padding:50px}
  .col-form{width:39.957%;margin:0}
  .form-box{margin:0}
}

@media(min-width:768px) and (max-width:1024px){
  .container{max-width:1024px}
}

/* mobile */
@media(max-width:767px){
  .col-texto{padding:20px}
  .form-box h2{font-size:32px}
}