/* GERAIS */

:root {
  --cor-branco: #FFFFFF;
  --cor-azul-escuro: rgb(13, 79, 163);
  --cor-azul-claro: #00AADE;
  --cor-cinza: #707070;
  --cor-fonte-container: #333333;
  --background-container: #E9E9E9;
  --fonte-principal: 'Open sans', sans-serif;
}

body {
  background-color: var(--cor-branco);
  font-family: var(--fonte-principal);
  color: var(--cor-cinza);
  font-size: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top:20px;
}

.center {
  width: 95%;
  /* background-color: red; */
  max-width: 1200px;
  min-width: 280px;
  margin: 0 auto;
  height: auto;
  display: block;
  position: relative;
}


.cabecalho{
  width:100%;
  height: auto;
  text-align: center;
  margin-top: 40px;
}

.logo{
  width:300px;
  height: auto;
  border: 0;
}

.texto {
  /* width:80%; */
  line-height: 160%;
  text-align: center;
  padding: 40px;
  box-sizing: border-box;
}


header{
  margin-top:40px;
}

/* INDEX */

.container-texto-index {
  text-align: center;
  padding-top: 20px;
  width: 80%;
}

.texto-visualizar{
  margin-top:30px;
  margin-bottom:30px;
}

.container-botoes .center {
  display: flex;
  text-decoration: none;
  gap: 60px;
  margin-top:20px;
}

.botao {
  background-color: var(--cor-azul-escuro);
  color: var(--cor-branco);
  font-size: 20px;
  text-decoration: none;
  width: 312px;
  height: 70px;
  border-radius: 10px;
  align-items: center;
}

.botao-acessar{
  cursor: pointer;
}

.botao:hover {
  background-color: var(--cor-azul-claro);
  transition: 0.3s;
}

.texto-botao {
  text-align: center;
}

.links-contatos{
  display: flex;
  flex-direction: column;
  gap:15px;
}

.links-contatos a{
  color: var(--cor-azul-escuro);
  text-decoration: none;
}

.links-contatos a:hover{
  color: var(--cor-azul-claro);
}

/* PÁGINA ÁREA DO MÉDICO */
.container-recado{
  width:50%;
  height: 264px;
  background-color: var(--background-container);
  border-radius:4px;
  box-shadow: rgb(13, 79, 163) 0px 10px 0px 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container-textos-recado{
  width:60%;
  color:var(--cor-fonte-container);
  text-align: center;
}

.container-texto {
  margin-top: 20px;
  margin-bottom: 20px;
}

.container-textos-recado a{
  text-decoration: none;
  color:var(--cor-fonte-container);
  font-weight: bold;
}

.links{
  display: flex;
  flex-direction: column;
}
.links-botao {
  margin-top: 60px;
  text-align: center;
}

.links .links-texto{
  margin-bottom:20px;
}
.botao-acessar {
  width: 120px;
  height: 50px;
  background-color: var(--cor-azul-escuro);
  border-radius: 4px;
  align-items: center;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 0;
}

.botao-acessar:hover {
  background-color: var(--cor-azul-claro);
  transition: 0.3s;
}


.botao-acessar:hover{
  background-color: var(--cor-azul-claro);
  transition: 0.3s;
}

.texto-botao-areas{
  color:var(--cor-branco);
  font-size:18px;
  /* text-decoration: none; */ 
}

.botao-acessar a{
  text-decoration: none;
}


/* PÁGINA ÁREA DO PACIENTE */

.container-recado.paciente{
  box-shadow: none;
  width:60%;
}

.container-texto-paciente {
  line-height: 16px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.container-recado.paciente .center .input input{
  width:450px;
  height: 40px;
  border:1px solid #DDDD;
  margin-bottom:20px;
}

.input{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top:20px;
}

::placeholder{
  font-family: var(--fonte-principal);
  color:var(--cor-cinza);
  font-size: 15px;
  padding: 0px 0px 0px 10px;
}



/* INDEX MQ */

@media(max-width:425px){
  
  .botao{
    width:280px;
    font-size:18px;
  }  
  
  .container-botoes .center{
    display: flex;
    flex-direction: column;
    gap:20px;
  }

}

@media(max-width:440px){
  
  .botao{
    width:280px;
    font-size:18px;
  }  
  
  .container-botoes .center{
    display: flex;
    flex-direction: column;
    gap:20px;
  }

}

@media(max-width:320px){
  .container-texto-index {
    width: 100%;
}
}

/* AREA MÉDICO MQ */

@media (max-width:425px){ 
  .container-recado{
    width:56%;
  }
  .container-textos-recado {
    width: 100%;

}
}

@media (max-width:430px){
  .container-textos-recado {
    width: 90%;
}
}

/* AREA PACIENTE MQ */
@media (max-width:768px){
  .container-recado.paciente .center .input input {
    width: 412px;
}
}

@media (max-width:430px){
  .container-recado.paciente {
    width: 80%;
}
.container-recado.paciente .center .input input {
  width: 280px;
}
}

@media (min-width:425px){
.container-recado.paciente .center .input input {
  width: 280px;
}
}

@media (max-width:375px){
  .container-recado.paciente {
    width: 75%;
}

.container-recado.paciente .center .input input {
  width: 240px;
}
}

@media (max-width: 320px) {
  .container-recado.paciente {
      width: 90%;
} 
.container-recado.paciente .center .input input {
  width: 240px;
}
}


@media (max-width:440px){
  img.banner_medicos{
      width:90%;
  }
}

img.banner_medicos{
  margin-top:30px;
}

/* SEÇÃO CONHEÇA NOSSAS UNIDADES */

.container-unidades{
  padding-top:20px;
}

.container-unidades h6{
  font-size: 1.5em;
  text-align: center;
}

.unidade p.titulo-unidade {
  color: var(--cor-azul-escuro);
  font-weight: 600;
  font-size: 1.25em;
}

.unidade .informacoes p.titulo {
  color: var(--cor-azul-claro);
  font-weight: 600;
  font-size: 1.25em;
}

.todas-unidades {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 30px; 
}

.unidade {
  border: 1px solid rgb(0, 170, 222, 0.5); 
  box-sizing: border-box;
  padding: 20px;
  text-align: left;
  border-radius: 10px;
}

.unidade:nth-child(4) {
  grid-column: 1; 
}

.unidade:nth-child(5) {
  grid-column: 2; 
}

/* .todas-unidades {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  align-items: flex-start; 
  gap: 40px; 
  margin: 0 auto; 
}

.unidade {
  width: 30%; 
  min-width: 250px; 
  box-sizing: border-box; 
  text-align: left; 
} */

.unidade p.titulo-unidade {
  color: var(--cor-azul-escuro);
  font-weight: 600;
  font-size: 1.25em;
}

.unidade .informacoes p.titulo {
  color: var(--cor-azul-claro);
  font-weight: 600;
  font-size: 1.1em;
}

p.descricao {
  width: 95%;
}

@media (max-width: 768px) {

  .todas-unidades {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px; 
    justify-items: center; 
    align-items: center; 
    padding: 20px; 
}

.unidade {
    width: 100%; 
    max-width: 400px; 
    box-sizing: border-box; 
}

  /* .todas-unidades {
      grid-template-columns: 1fr;
      gap: 20px; 
  }

  .unidade {
    width:80%;
      width: 100%; 
  } */

  .unidade:nth-child(5){
      grid-column: 1;
  }
  
  p.descricao{
      width:100%;
  }
}  

/* @media (max-width:440px){
  .todas-unidades{
    gap:30px
  }
  
  .unidade{
    width:80%;
  }
} */