/* =====================================================================
   1) Fonte e Reset
   ---------------------------------------------------------------------
   - Importa a família "Noto Sans".
   - Remove margens/paddings padrão e usa border-box para facilitar
     o cálculo de larguras/alturas em todos os elementos.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

* { padding: 0; margin: 0; box-sizing: border-box; }
body { margin: 0; font-family: 'Noto Sans', sans-serif !important; width: 100%; height: 100vh; }
body * { box-sizing: border-box; }

/* Se tiver um elemento com id="fixo", ele ficará fixo na tela */
#fixo { position: fixed; }

/* =====================================================================
   2) Layout base (desktop) – duas colunas
   ---------------------------------------------------------------------
   - .main-login: contêiner principal em flex com fundo azul.
   - .left-login: coluna esquerda (animação/ilustração).
   - .right-login: coluna direita (formulário).
   - As variantes *2 existem só por compatibilidade com páginas antigas.
   ===================================================================== */
.main-login {
  width: 100vw;
  height: 100vh;
  background: #0277de;                 /* fundo azul do container principal */
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-login {                           /* coluna esquerda (imagem/animação) */
  width: 60%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.left-login2 {                          /* variante mantida por compatibilidade */
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* tamanho padrão de imagens/players na coluna esquerda no desktop */
.left-login-image,
.left-login2-image { width: 70%; }

.right-login {                          /* coluna direita (formulário) */
  width: 40%;
  height: 100%;
  display: grid;
  background: #f9f9f9;                  /* painel em cinza claro */
  justify-content: center;
  padding: 0;                            /* respiros finos entram no @media desktop */
}

.right-login2 {                         /* variante mantida por compatibilidade */
  width: 60%;
  height: 100%;
  display: grid;
  background: #fff;
  justify-content: center;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
}

/* utilitário de margem interna para envolver o conteúdo */
.margem { margin: 50px 40px 140px 40px; }

/* =====================================================================
   3) Formulário – campos, rótulos e botão
   ---------------------------------------------------------------------
   - Cada .frm-row agrupa um rótulo e um input.
   - Inputs têm sombra leve e cantos arredondados.
   - Botão de submit é forçado a ficar azul.
   ===================================================================== */
.frm-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 12px 0;
}

/* campos de texto/número (não afeta o submit) */
.frm-row > input:not([type="submit"]) {
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 15px 20px;
  background: #fff;
  color: #999;
  font-size: 12pt;
  box-shadow: 0 5px 15px #e4ddddc5;
  outline: none;
}

.frm-row > label { color: #0277de; margin-bottom: 10px; font-size: 23px; }
.frm-row > input::placeholder { color: #999; }

/* estilo base para botões em geral */
.form-butom {
  border: none;
  outline: none;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 40px -12px #0277de;
  font-family: 'Noto Sans', sans-serif;
  height: 45px;
  padding-top: 0;
}

/* força o botão de submit a ficar azul e com texto branco */
.frm-row > input[type="submit"],
.frm-row > input[type="submit"].btn-link,
input[type="submit"].form-butom,
.form-butom[type="submit"],
.form-butom.btn-link {
  background: #0277de !important;
  color: #fff !important;
  border: none;
  box-shadow: 0 10px 40px -12px #0277de;
  transition: background-color .15s ease-in-out;
  appearance: none; -webkit-appearance: none;
}

.frm-row > input[type="submit"]:hover,
.form-butom.btn-link:hover { background: #0366c7 !important; }

/* textos auxiliares dentro do form */
.frm-row .msg { color: #f0fffff5; }
.card-login p { color: #7a748a; font-size: 12px; }

/* =====================================================================
   4) Desktop – respiros do painel do formulário
   ---------------------------------------------------------------------
   - Acrescenta espaços laterais no painel direito.
   - Dá um espaço leve dentro do bloco de formulário.
   ===================================================================== */
@media only screen and (min-width: 901px) {
  .right-login { padding: 40px; }      /* respiro nas bordas do painel */
  .divform     { padding: 8px 12px; }  /* respiro interno do bloco do form */
}

/* =====================================================================
   5) Responsivo geral
   ---------------------------------------------------------------------
   - Ajustes suaves em telas < 950px (ex.: cards/form ocupam mais espaço).
   - Faixa 600–700px: exemplo de “folga” extra ao redor da arte se necessário.
   ===================================================================== */
@media only screen and (max-width: 950px) {
  .card-login { width: 85%; }
  .divform { width: 100%; padding: 10%; }
}

@media only screen and (min-width: 600px) and (max-width: 700px) {
  .left-login-image,
  .left-login2-image {
    padding-left: 200px !important;
    padding-right: 200px !important;
  }
}

/* =====================================================================
   6) Mobile (≤600px)
   ---------------------------------------------------------------------
   Objetivos:
   - Trocar o fundo azul pelo cinza claro do painel para toda a página.
   - Reordenar a hierarquia: [logo] → [imagem esquerda] → [form].
   - Garantir respiro lateral no formulário e títulos mais próximos dos campos.
   ===================================================================== */
@media only screen and (max-width: 600px) {
  /* fundo geral da página e do container */
  body { background: #f9f9f9 !important; }
  .main-login {
    background: #f9f9f9 !important;
    flex-direction: column;     /* empilha as duas colunas */
    align-items: center;        /* centraliza horizontalmente */
    justify-content: flex-start !important; /* cola no topo */
    padding-top: 0 !important;
  }

  /* painel esquerdo herda o mesmo fundo e aparece no mobile */
  .left-login { background: #f9f9f9 !important; }

  /* “achata” os wrappers para poder reordenar o conteúdo interno */
  .right-login { display: contents; }
  .divform     { display: contents; }

  /* logo no topo: centralizada, com respiro mínimo */
  .logo {
    order: -2;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 4px 0 6px !important;
    margin: 0 !important;
  }
  .logotipo {
    width: min(58vw, 300px) !important; /* aumenta levemente a logo no mobile */
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* imagem/anim da coluna esquerda logo após a logo */
  .left-login {
    display: flex !important;
    order: -1;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
    overflow: visible;
  }
  .left-login-image {
    display: block;
    width: min(62vw, 320px) !important; /* tamanho móvel da arte/anim */
    height: auto !important;
    max-height: 40vh;
    object-fit: contain;
    margin: 0 auto;
  }

  /* conteúdo e formulário vêm em seguida */
  .consult { order: 0; width: 100%; text-align: center; }
  form     { order: 1; width: 100%; }

  /* respiro lateral agradável para os campos e para o botão */
  form {
    padding-left: 7vw;
    padding-right: 7vw;
    box-sizing: border-box;
  }

  /* respiro vertical entre linhas do formulário */
  .frm-row { margin: 14px 0; }

  /* botão ocupa toda a largura disponível do form */
  .frm-row > input[type="submit"],
  .frm-row > input[type="submit"].btn-link { width: 100%; }

  /* painéis ocupam 100% no mobile */
  .right-login,
  .right-login2 {
    width: 100%;
    height: auto;
  }

  /* título “Consulte sua Visita” proporcional à tela no mobile */
  .consult { font-size: 5vw !important; }
}

/* reduz o espaço abaixo de “Consulte sua Visita” só no mobile */
@media only screen and (max-width: 600px) {
  .consult { padding-bottom: 10px !important; }          /* menos espaço abaixo do título */
  .consult h1, .consult h2, .consult h3 {
    margin: 0 0 8px !important;                          /* remove a margem padrão grande */
    line-height: 1.2;
  }
}

/* =====================================================================
   7) Utilitários finais
   ---------------------------------------------------------------------
   - Estilos auxiliares para logo/rodapé/botões, usados em várias telas.
   ===================================================================== */
.logo { align-items: center; padding-bottom: 5%; padding-top: 20%; width: 100%; } /* espaçamento da logo no desktop */
.logotipo { width: 100%; }
.footer { width: 100%; }

.form-butom:hover { transition-delay: 150ms; background-color: #0366c7; }

.Copyright { text-align: center; width: 100%; }

/* Botões/links genéricos (quando usados fora do form principal) */
.btn { color: #fff; text-decoration: none; width: 100%; height: 100%; margin-top: 20px; }
.btn-link {
  text-decoration: none;
  width: 100%;
  text-align: center;
  font-family: 'Noto Sans', sans-serif;
  font-size: 20px;
  border-radius: 10px;
  background: #0277de;
  color: #fff;
  letter-spacing: 3px;
}
.btn-link a:link { text-decoration: none; }

/* título no desktop: largura total, respiro e tamanho em vw */
.consult { width: 100%; padding-bottom: 20%; font-size: 1.5vw; }