:root {
  --alado-blue: #0074a8;
  --alado-text: #4b4b4d;
}

* {
  box-sizing: border-box;
}

.field-input {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid #dbe3ea;
  background: #fff;
  padding: .85rem 1rem;
  color: #1f2937;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.field-input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 4px rgba(2,132,199,.12);
}

/* BASE */
.signature-card {
  position: relative;
  width: 2172px;
  height: 724px;
  overflow: hidden;
  background-color: #ffffff;
  background-image: url('https://alado.app.br/email/assets/background.png');
  background-size: 2172px 724px;
  background-repeat: no-repeat;
  background-position: center;
  font-family: Gantari, Arial, Helvetica, sans-serif;
  flex: 0 0 auto;

  /* padrão */
  --sig-name-top: 79px;
  --sig-role-top: 140px;
  --sig-company-top: 188px;
  --sig-email-top: 315px;
  --sig-site-top: 396px;
  --sig-phone-top: 400px;
}

/* TELA / MODAL - ficou perfeito */
.signature-card--screen {
  --sig-name-top: 79px;
  --sig-role-top: 140px;
  --sig-company-top: 188px;
  --sig-email-top: 295px;
  --sig-site-top: 376px;
  --sig-phone-top: 457px;
}

/* EXPORTAÇÃO PNG - ajuste independente */
.signature-card--export {
  --sig-name-top: 79px;
  --sig-role-top: 148px;
  --sig-company-top: 180px;
  --sig-email-top: 284px;
  --sig-site-top: 365px;
  --sig-phone-top: 446px;
}

.sig-name,
.sig-role,
.sig-company,
.sig-email,
.sig-site,
.sig-phone {
  position: absolute;
  white-space: nowrap;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.sig-name {
  left: 1311px;
  top: var(--sig-name-top);
  width: 732px;
  color: var(--alado-blue);
  font-family: Gantari, Arial, Helvetica, sans-serif;
  font-size: 66px;
  font-weight: 800;
}

.sig-role {
  left: 1311px;
  top: var(--sig-role-top);
  width: 722px;
  color: var(--alado-text);
  font-family: Rubik, Arial, Helvetica, sans-serif;
  font-size: 36px;
  font-weight: 500;
}

.sig-company {
  left: 1311px;
  top: var(--sig-company-top);
  width: 680px;
  color: var(--alado-blue);
  font-family: Gantari, Arial, Helvetica, sans-serif;
  font-size: 36px;
  font-weight: 500;
}

.sig-email {
  left: 1420px;
  top: var(--sig-email-top);
  width: 573px;
  color: #3f3f46;
  font-family: Gantari, Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 500;
}

.sig-site {
  left: 1420px;
  top: var(--sig-site-top);
  width: 573px;
  color: #3f3f46;
  font-family: Gantari, Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 500;
}

.sig-phone {
  left: 1420px;
  top: var(--sig-phone-top);
  width: 573px;
  color: #3f3f46;
  font-family: Gantari, Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 500;
}

/* PRÉVIAS */
.scale-preview {
  transform: scale(.47);
  transform-origin: top left;
  margin-right: -1151px;
  margin-bottom: -384px;
}

.scale-modal {
  transform: scale(.50);
  transform-origin: top left;
  margin-right: -1086px;
  margin-bottom: -362px;
}

/* ÁREA OCULTA DE EXPORTAÇÃO */
.export-stage {
  position: fixed;
  left: -99999px;
  top: 0;
  width: 2172px;
  height: 724px;
  overflow: hidden;
  background: #ffffff;
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 1200px) {
  .scale-preview {
    transform: scale(.38);
    margin-right: -1347px;
    margin-bottom: -449px;
  }

  .scale-modal {
    transform: scale(.42);
    margin-right: -1260px;
    margin-bottom: -420px;
  }
}

@media (max-width: 860px) {
  .scale-preview {
    transform: scale(.26);
    margin-right: -1607px;
    margin-bottom: -536px;
  }

  .scale-modal {
    transform: scale(.26);
    margin-right: -1607px;
    margin-bottom: -536px;
  }
}