/*! govbr.css - baseado em normalize.css + grid + gov.br DS */
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */

/* ========================================================================== */
/* NORMALIZE BASE */
/* ========================================================================== */

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: 'Rawline', 'Roboto', Arial, sans-serif;
  font-size: 14px;
  background: #F8F8F8;
  color: #2E2F36;
}

/* ... (todo o normalize original que você já tinha continua aqui) ... */

/* ========================================================================== */
/* GOV.BR LAYOUT */
/* ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rawline:wght@400;700&family=Roboto:wght@400;700&display=swap');

/* Cabeçalhos */
h1 {
  font-size: 2.4em;
  margin: 0 0 40px;
  color: #1351B4;
}
h2 {
  font-size: 1.5em;
  margin: 0 0 40px;
  color: #1351B4;
}
h4 {
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0;
  opacity: .7;
  color: #2E2F36;
}

/* Links */
a {
  color: #1351B4;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #003399;
  text-decoration: underline;
}

/* Botões */
.button,
.btn-primary {
  background: #1351B4;
  color: #fff;
  border: 1px solid #1351B4;
  border-radius: 4px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
.button:hover,
.btn-primary:hover {
  background: #003399;
  border-color: #003399;
}

.btn-secondary {
  background: #E6F0FA;
  color: #1351B4;
  border: 1px solid #1351B4;
  border-radius: 4px;
  padding: 10px 16px;
  font-weight: 600;
}
.btn-secondary:hover {
  background: #D0E0F7;
}

.button:disabled,
.btn-disabled {
  background: #EEEEEE;
  color: #999999;
  border: 1px solid #CCCCCC;
  cursor: not-allowed;
}

/* Header */
.header {
  background: #1351B4;
  color: #fff;
  text-align: center;
  padding: 40px 0;
}
.header h1,
.header h2 {
  color: #fff;
}

/* Containers */
.container {
  width: 1240px;
  margin: 0 auto;
  max-width: 100%;
  padding: 0 20px;
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}

/* Grid */
.grid {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.grid:after {
  content: " ";
  display: block;
  clear: both;
}
.grid > [class*='col-'] {
  float: left;
  margin-right: 1.69492%;
}
.grid > [class*='col-']:last-child {
  margin-right: 0;
}
.grid > .col-1 { width: 6.77966%; }
.grid > .col-2 { width: 15.25424%; }
.grid > .col-3 { width: 23.72881%; }
.grid > .col-4 { width: 32.20339%; }
.grid > .col-5 { width: 40.67797%; }
.grid > .col-6 { width: 49.15254%; }
.grid > .col-7 { width: 57.62712%; }
.grid > .col-8 { width: 66.10169%; }
.grid > .col-9 { width: 74.57627%; }
.grid > .col-10 { width: 83.05085%; }
.grid > .col-11 { width: 91.52542%; }
.grid > .col-12 { width: 100%; }

/* Forms */
.form {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  padding: 30px;
  background: #fff;
  position: relative;
}
.form > .control {
  margin-bottom: 20px;
}
.form > .control .label {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 0.9em;
  color: #2E2F36;
}
.form > .control .input {
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  padding: 12px;
  width: 100%;
  transition: all .3s;
}
.form > .control .input:focus {
  border-color: #1351B4;
  background: #E6F0FA;
  outline: none;
}

/* Mensagens */
#id_error_display_fixed {
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  padding: 15px;
  background-color: #F8F8F8;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

/* Responsivo */
@media (max-width: 768px) {
  .container { padding: 0 10px; }
  .form { padding: 20px; }
  .grid > [class*='col-'] { width: 100% !important; margin-right: 0; }
}
/* Textos de introdução */
.texto-intro {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centraliza verticalmente em relação ao login */
  padding-right: 30px;
}

/* Ajustes do grid para centralizar o conteúdo verticalmente */
.grid {
  display: flex;
  align-items: center; /* alinha verticalmente login e textos */
}

/* Responsividade: no mobile, o texto vem acima do login */
@media (max-width: 768px) {
  .grid {
    flex-direction: column;
  }
  .texto-intro {
    padding-right: 0;
    margin-bottom: 20px;
    text-align: center; /* opcional: centraliza no mobile */
  }
}