html, body {
  margin: 0;
  background-color: #c3e2dc;
  padding: 0;
  width: 100%;
  height: 100vh; /* altura da tela visível */
  /* overflow: hidden; */
}

/******* bloco1a *******/
#bloco1a{
  padding: 0;
  margin: 0;
  background-color: #011b40;

  --header-side-pad: clamp(18px, 5vw, 110px);
  --header-topbottom-pad: clamp(10px, 2vw, 13px);
}

#bloco1a .container-fluid{
  padding-left: var(--header-side-pad);
  padding-right: var(--header-side-pad);
  padding-top: var(--header-topbottom-pad);
  padding-bottom: var(--header-topbottom-pad);
}

#bloco1a .row{
  display: flex;
  align-items: center;
}

#bloco1a .divLogo,
#bloco1a .divLogo2{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#bloco1a .imgLogo{
  width: clamp(120px, 14vw, 250px);
  height: auto;
}

#bloco1a .imgLogo2{
  width: clamp(80px, 8vw, 130px);
  height: auto;
}

/* MENU */
#bloco1a .menu{
  color: #ffffff;
  padding: clamp(12px, 1.6vw, 22px) 0;
  font-size: clamp(14px, 1.05vw, 20px);
  line-height: 1.2;

  display: flex;
  align-items: center;
  justify-content: center;
}

#bloco1a .menu table{
  margin: 0 auto;
}

#bloco1a .menu td{
  padding: 0 clamp(8px, 1.4vw, 18px);
}

/* Links */
#bloco1a a{
  color: #ffffff;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  padding: 6px 10px;
}

#bloco1a a:hover{
  color: #ffffff;
  text-decoration: underline;
}

@media (max-width: 992px){

  #bloco1a .row{
      display: block;
  }

  #bloco1a{
      --header-side-pad: clamp(14px, 4vw, 28px);
  }

  #bloco1a .menu{
      display: block;
      text-align: center;
      padding: 10px 0;
      font-size: clamp(14px, 2.2vw, 18px);
      line-height: 1.35;
  }

  #bloco1a .menu table,
  #bloco1a .menu tbody,
  #bloco1a .menu tr{
      display: block;
      width: 100%;
  }

  #bloco1a .menu td{
      display: inline-block;
      padding: 6px 8px;
  }

  #bloco1a .divLogo,
  #bloco1a .divLogo2{
      padding: 10px 0;
  }
}


/******* BLOCO 1 *******/

/* Container principal */
#bloco1 {
  width: 100%;
  color: #2e4049;
  position: relative;

  background-image: url("../images/login.png");
  background-size: cover;
  height: calc(100vw * (1080/1920));
  background-position: top center;
  background-repeat: no-repeat;

  background-color: #c4e3dd;

  /* espaçamentos gerais */
  padding-top: calc(100vw * (350/1920));
  padding-bottom: calc(100vw * (50/1920));

  /* margens laterais padrão */
  padding-left: clamp(24px, 7vw, 140px);
  padding-right: clamp(18px, 5vw, 110px);

}

/* Limpeza */
#bloco1 .borderRow {
  border: none;
  background: transparent;
  border-radius: 0;
}

#bloco1 .borderRowdiv {
  padding: 0;
}

/* Linha do form */
#bloco1 .borderRowdiv > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: calc(100vw * (20/1920));
}

/* labels (se ainda estiverem no HTML) */
#bloco1 h3 {
  font-family: "Arial Narrow", "Roboto Condensed", "Impact", sans-serif;
  font-weight: 500;
  font-style: italic;
  color: #000;
  font-size: clamp(18px, 2.2vw, 30px);
  line-height: 1;
  white-space: nowrap;
  float: none !important;

  width: calc(100vw * (250/1920));
  text-align: right;
  margin: 0;
  margin-right: 15px;
}

/* input */
#bloco1 .inputPopup {
  background-color: #fff;
  border: 1px solid #e6e3e3;
  outline: none;
  color: #333;

  border-radius: clamp(4px, 0.35vw, 10px);

  /* mais alto no desktop */
  height: clamp(28px, 2.4vw, 80px);

  /* padding base (mobile você disse que está ok) */
  padding: 0 clamp(6px, 0.6vw, 20px);

  /* fonte */
  font-size: clamp(12px, 1vw, 25px);

  box-sizing: border-box;
  width: 100%;
}

/* container do input */
#bloco1 div[style*="overflow: hidden"] {
  flex-grow: 0;
  width: calc(100vw * (600/1920));
}

/* botão */
#bloco1 .btnEnvio {
  width: clamp(90px, 13vw, 250px);
  height: auto;
  cursor: pointer;
}

/* bloco onde está o botão (no seu HTML é a div com class="margem") */
#bloco1 .margem {
  padding-top: calc(100vw * (20/1920));
  padding-left: calc(100vw * (420/1920));
}

/* mensagens */
#bloco1 .label-login {
  padding-right: 0;
}


/* =========================================================
 ✅ DESKTOP: centralizar inputs + botão na faixa esquerda
 (entre margem esquerda e o início do PRA)
 ========================================================= */
@media (min-width: 992px) {

/* 1) reserva área do lado direito para o PRA/arte */
#bloco1{
  padding-right: clamp(520px, 42vw, 860px);
}

/* 2) coluna do form centralizada dentro da faixa esquerda */
#bloco1 .borderRowdiv{
  width: 100%;
  max-width: clamp(420px, 34vw, 620px);
  margin-left: auto;
  margin-right: auto;
}

/* 3) inputs ocupam 100% da coluna */
#bloco1 div[style*="overflow: hidden"]{
  width: 100%;
  flex-grow: 1;
  min-width: 0;
}

/* 4) botão centralizado em relação aos inputs */
#bloco1 .margem{
  padding-left: 0;
  display: flex;
  justify-content: center;
}

#bloco1 .btnEnvio{
  display: block;
  margin: 0 auto;
  width: clamp(160px, 14vw, 260px);
}

/* 5) padding-left maior no desktop (como você pediu anteriormente) */
#bloco1 .inputPopup{
  padding-left: clamp(18px, 1.4vw, 32px);
}
}


/* =========================
 MOBILE (mantido / organizado)
 ========================= */
@media (max-width: 768px) {

#bloco1{
  background-image: url("../images/login_mobiler.jpg");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;

  min-height: 100vh;
  height: auto;

  /* desce o form para baixo da arte do background */
  padding-top: clamp(500px, 95vw, 700px);

  padding-bottom: clamp(24px, 6vw, 40px);
  padding-left: 5%;
  padding-right: 5%;
}

/* centraliza as linhas */
#bloco1 .borderRowdiv > div{
  justify-content: center;
  align-items: center;
}

/* labels (se existirem) */
#bloco1 h3{
  width: auto;
  min-width: 85px;
  white-space: nowrap;
  text-align: left;
  margin-right: 8px;
  font-size: clamp(14px, 4vw, 18px);
  line-height: 1;
}

/* inputs menores */
#bloco1 div[style*="overflow: hidden"]{
  width: min(88vw, 360px);
  flex-grow: 0;
}

#bloco1 .inputPopup{
  height: clamp(32px, 7vw, 42px);
  font-size: clamp(13px, 3.6vw, 16px);
  padding: 0 10px;
}

/* botão central no mobile */
#bloco1 .margem{
  padding-left: 0;
  padding-top: clamp(16px, 4vw, 26px);
  text-align: center;
  display: block;
}

#bloco1 .btnEnvio{
  display: block;
  margin: 0 auto;
  width: clamp(100px, 35vw, 160px);
}

/* mensagens */
#bloco1 .label-login{
  text-align: center;
}
}


/******* umalive *******/
#umalive{
  background-color:#011b40;
  color:#84c8b3;

  padding: 30px 100px;

  box-sizing: border-box;
  width: 100%;
}

#umalive .row,
#umalive .container-fluid{
  margin: 0;
}

/* até 991px */
@media (max-width: 991px){
  #umalive{
      padding: 26px 40px;
  }
}

/* até 768px */
@media (max-width: 768px){
  #umalive{
      padding: 24px 28px;
      display: none;
  }
}

/* até 590px */
@media (max-width: 590px){
  #umalive{
      padding: 22px 20px;
  }
}

/* até 575px */
@media (max-width: 575px){
  #umalive{
      padding: 20px 20px;
  }
}

/* até 480px */
@media (max-width: 480px){
  #umalive{
      padding: 18px 20px;
  }
}


/******** popup *********/
.popup {
  background-color: RGB(0,0,0,0.5);
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  color: #000;
  z-index: 9999;
}

.popup h3 {
  color: #462c6e;
}

#popupFoto {
  position: absolute;
  background-color: #fff;
  width: calc(100vw * (800/1920));
  height: calc(100vw * (320/1920));
  left: calc(50vw - (100vw * (400/1920)));
  top: calc(100vw * (30/1920));
  padding: 10px 0;
}

#popupFoto2 {
  position: absolute;
  background-color: #fff;
  width: calc(100vw * (800/1920));
  height: calc(100vw * (320/1920));
  left: calc(50vw - (100vw * (400/1920)));
  top: calc(100vw * (30/1920));
  padding: 10px 0;
}

.popup .inputPopup {
  font-family: 'Klavika-Regular',Helvetica,Arial,sans-serif;
  background-color: #fff;
  border: 1px solid #462c6e;
  box-shadow: 0 0 0 0;
  outline: none;
  color: #000;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vw * (35/1920));
  margin-bottom: calc(100vw * (10/1920));
}

.popup .btnFecharPopup {
  font-family: 'Klavika-Bold',Helvetica,Arial,sans-serif;
  background-color: transparent;
  box-shadow: 0 0 0 0;
  margin: 0;
  padding: 0;
  outline: none;
  border: 0px;
  color: #462c6e;
  font-size: calc(100vw * (18/1920));
}

.btnAcessar {
  font-family: 'Klavika-Bold',Helvetica,Arial,sans-serif;
  font-size: calc(100vw * (22/1920));
  background-color: #462c6e;
  box-shadow: 0 0 0 0;
  outline: none;
  border: 0px;
  color: #fff;
  padding: calc(100vw * (5/1920)) calc(100vw * (30/1920));
}

.fonteAzul {
  color: #046dc0;
}