html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh; /* Força a altura ser exatamente a da tela visível */
    overflow: hidden; /* Garante que nada exceda a tela (remove scrollbar) */

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

    background-color: #c4e3dd;

  }


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

/* 1. O Container Principal */
#bloco1 {
    width: 100%;
    color: #2e4049;
    position: relative;


    /* ESPAÇAMENTOS GERAIS */
    padding-top: calc(100vw * (350/1920)); 
    padding-bottom: calc(100vw * (50/1920));
    
    /* POSICIONAMENTO NA TELA:
       Aqui definimos que o formulário começa "empurrado" para a esquerda.
       Se quiser mais para o centro, aumente o 15%. Se quiser mais para a borda, diminua. */
    padding-left: 5%; 
    padding-right: 5%;
}

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

#bloco1 .borderRowdiv {
    padding: 0;
}

/* 3. A Linha (Flexbox) */
/* Força o alinhamento horizontal do Label + Input */
#bloco1 .borderRowdiv > div {
    display: flex;           
    align-items: center;     /* Centraliza verticalmente */
    justify-content: flex-start; 
    margin-bottom: calc(100vw * (20/1920)); /* Espaço entre as linhas do form */
}

#bloco1 .margem {
    padding-top: calc(100vw * (20/1920));
    padding-left: calc(100vw * (420/1920));
}

/* 4. O Rótulo (Nome / E-mail) */
#bloco1 h3 {
    /* ESTILO DA FONTE */
    font-family: "Arial Narrow", "Roboto Condensed", "Impact", sans-serif;
    font-weight: 700;       
    font-style: italic;     
    color: #000;            
    font-size: calc(100vw * (30/1920)); 
    line-height: 1;
    white-space: nowrap;     
    float: none !important;

    /* ALINHAMENTO E LARGURA FIXA
       Isso é fundamental: definimos uma largura fixa para o texto.
       Assim, "Nome completo" e "E-mail" ocupam o mesmo espaço horizontal,
       fazendo com que as caixas de input comecem exatamente na mesma linha vertical. */
    width: calc(100vw * (250/1920)); 
    text-align: right;       /* Texto alinhado à direita (perto do input) */
    margin: 0;
    margin-right: 15px;      /* Distância entre o texto e o input */
}

/* 5. O Campo de Digitação (Input) */
#bloco1 .inputPopup {
    /* ESTILO VISUAL */
    background-color: #fff; /* Cinza claro */
    border: 1px solid #e6e3e3; 
    outline: none;
    color: #333;
    
    /* Arredondamento */
    border-radius: calc(100vw * (10/1920)); 
    -webkit-border-radius: calc(100vw * (10/1920));
    -moz-border-radius: calc(100vw * (10/1920));

    /* DIMENSÕES PROPORCIONAIS */
    height: calc(100vw * (55/1920));
    padding: 0 calc(100vw * (20/1920));
    font-size: calc(100vw * (25/1920));
    
    /* COMPORTAMENTO */
    box-sizing: border-box;
    width: 100%; 
}

/* Container do input (para controlar a largura máxima da caixa) */
#bloco1 div[style*="overflow: hidden"] {
    flex-grow: 0;    
    width: calc(100vw * (600/1920)); /* Largura da caixa de texto */
}

/* 6. Botões (Anexar e Enviar) */
/* Container para alinhar os botões com os inputs */
.botoes-container {
    /* Margem à esquerda = Largura do Label + Margem do Label 
       Isso faz os botões ficarem alinhados com o começo das caixas de texto */
    margin-left: calc((100vw * (250/1920)) + 15px); 
    
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#bloco1 .btnImagem {
    width: calc(100vw * (310/1920));
    height: auto;
    cursor: pointer;
}

#bloco1 .btnEnvio {
    width: calc(100vw * (310/1920)); 
    height: auto;
    cursor: pointer;
}

/*******umalive*******/

#umalive
{
    background: #029893;
    color:#ffffff;
    padding: calc(100vw * (30/1920)) calc(100vw * (70/1920));
}

/********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;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    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;
}