/* Reset básico */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--cyan-8);
  background: #fff;
}

:root{
  --cyan-8: #0D1B1B;
  --primary: #359EFF;
  --gray-97: #F5F7F8;
  --gray-46: #6B7280;
  --azure-84: #D1D5DB;
  --cyan-45: #4C9A9A;
  --shadow: 0 1px 0 rgba(0,0,0,.02);
  --radius-8: 8px;
  --radius-12: 12px;
}

.container{
  max-width: 950px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Topbar */
.topbar{
  padding-top: 16px;
  border-bottom: 1.41px solid rgba(229,231,235,.5);
  background: #fff;
}
.topbar__inner{
  display: flex;
  align-items: center;
  min-height: 42px;
}
.topbar__cta{
  display: inline-flex;
  align-items: center;
  gap: 12.52px;
}
.topbar__text{
  font-size: 21.92px;
  line-height: 20px;
  font-weight: 400;
}

/* Hero */
.page{
  padding: 30px 0 0px;
}
.hero__card{
  background: rgba(245,247,248,.8);
  border: 1px solid var(--azure-84);
  border-radius: var(--radius-8);
  backdrop-filter: blur(2px);
  padding: 10px 16px;
  box-shadow: var(--shadow);
}
.hero__title{
  margin: 0;
  font-size: 29px;
  line-height: 35px;
  font-weight: 700;
}
.hero__subtitle{
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 15px;
  color: var(--gray-46);
}

/* Card/Form */
.card{
  margin-top: 0px;
  padding: 12px 16px 16px;
  border-radius: 14px;
  border: 1px solid rgba(229,231,235,.8);
  background: #fff;
}
.grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}
.field{ display: flex; flex-direction: column; gap: 8px; }

.label{
  font-size: 16px;
  line-height: 8px;
  font-weight: 500;
}
.label-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hint{
  font-size: 14px;
  line-height: 15px;
  color: #9CA3AF;
}

.input{
  height: 42px;
  width: 100%;
  padding: 10px 10px;
  border-radius: var(--radius-8);
  border: 1px solid var(--azure-84);
  background: var(--gray-97);
  color: var(--cyan-8);
  font-size: 16px;
  outline: none;
}
.input::placeholder{ color: #9CA3AF; }
.input:focus{
  border-color: rgba(53,158,255,.65);
  box-shadow: 0 0 0 4px rgba(53,158,255,.18);
}
.select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #1E1E1E 50%),
    linear-gradient(135deg, #1E1E1E 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.input-with-icon{
  position: relative;
}
.input-with-icon .input{
  padding-right: 44px;
}
.icon{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #111;
  opacity: .85;
  display: inline-flex;
}

/* Larguras por coluna (desktop) */
.col-2{ grid-column: span 2; }
.col-3{ grid-column: span 3; }
.col-4{ grid-column: span 4; }
.col-5{ grid-column: span 5; }
.col-7{ grid-column: span 7; }
.col-8{ grid-column: span 8; }

.divider{
  margin: 10px 0 10px;
  border-top: 1px solid rgba(229,231,235,.8);
}
.section-title{
  font-size: 20px;
  line-height: 14px;
  font-weight: 700;
  margin: 0 0 10px;
}

/* Ações */
.actions{
  margin-top: 10px;
  padding: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.w-full{ width: 100%; }

.safe{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--gray-46);
  font-size: 12px;
  line-height: 8px;
}
.safe__icon{ display: inline-flex; }

/* Botões */
.btn{
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-12);
  background: transparent;
  color: var(--cyan-8);
  font-weight: 700;
}
.btn--primary{
  background: var(--primary);
}
.btn--primary:hover{ filter: brightness(.98); }
.btn--lg{
  height: 40px;
  padding: 0 25.05px;
  font-size: 21.92px;
  line-height: 31.31px;
}
.btn--md{
  height: 40px;
  padding: 0 24px;
  font-size: 18px;
  line-height: 28px;
}

/* Footer */
.footer{
  padding: 0px 0 0px;
}
.footer__inner{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}
.footer__copy{
  color: var(--gray-46);
  font-size: 14px;
  line-height: 5px;
}
.footer__links{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 11.25px;
  line-height: 5px;
}
.link{
  color: var(--cyan-45);
  text-decoration: underline;
}
.dot{ color: var(--cyan-45); }

/* Responsivo */
@media (max-width: 1100px){
  .col-7{ grid-column: span 12; }
  .col-8{ grid-column: span 12; }
  .col-5{ grid-column: span 12; }
  .col-4{ grid-column: span 12; }
  .col-3{ grid-column: span 12; }
  .col-2{ grid-column: span 12; }
  .page{ padding-top: 28px; }
  .topbar__inner{ justify-content: flex-start; }
}

@media (max-width: 520px){
  .topbar__text{ font-size: 18px; line-height: 26px; }
  .btn--lg{ font-size: 18px; }
}