@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body {
  font-family: 'Montserrat';
  background-color: #fff;
  color: #4a4a4a;
}


.input:focus {
  border-color: #3ceef1;
}

/* Navbar com leve sombra */
.navbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.navbar-item img {
  max-height: 48px;
  object-fit: contain;
}

.navbar-item.has-text-weight-semibold:hover {
  color: #478d88;
}

/********************************************************
 * SLIDER - COBRINDO TODA A LARGURA DA TELA
 ********************************************************/
section#slider {
  width: 100%;
  padding: 0; /* Remove padding padrão da section */
  margin: 0;
  position: relative;
}

.slider-container {
  width: 100%;
  height: 42vh; /* Altura relativa à viewport (ajuste se desejar) */
  min-height: 350px; /* Garantia mínima para telas muito pequenas */
  max-height: 700px; /* Limite para telas muito grandes */
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slide {
  width: 100%;
  height: 100%;
  display: none;   /* cada slide fica oculto até ficar "is-active" */
  position: absolute;
  top: 0;
  left: 0;
}

/* Torna o slide ativo visível */
.slide.is-active {
  display: block;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 0.8s ease-in-out;
}

/* CONTEÚDO SOBREPOSTO NO SLIDE (texto/botão) */
.banner-content {
  position: absolute;
  top: 50%;      /* Centraliza verticalmente */
  left: 50%;     /* Centraliza horizontalmente */
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 1rem 2rem;  
}

/* Textos no banner (opcional: sombra para leitura mais fácil) */
.banner-content .title,
.banner-content .subtitle {
  color: #f3f3f3;
}

/* Margem no botão se quiser espaço abaixo do texto */
.banner-content .button {
  margin-top: 0.75rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  color: #1a1a1a;
}

/* Botões de navegação do slider */
.slider-nav {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  pointer-events: none; /* para não bloquear cliques na imagem */
}
.slider-nav button {
  pointer-events: all;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease-in-out;
}
.slider-nav button:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

/* Bolinhas de indicação do slide atual */
.slider-dots {
  position: absolute;       
  bottom: 1rem;            
  left: 50%;              
  transform: translateX(-50%);
  z-index: 2;             
  display: flex;
  gap: 0.5rem;    
  background-color: transparent;         
}

.slider-dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #bbb;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.slider-dots .active {
  background-color: #555;
}
/********************************************************
 * SEÇÃO DE CRECHES
 ********************************************************/
#creches {
  padding: 3rem 1.5rem;
  background-color: #fff;
  margin-top: 0; /* Caso precise alinhar com slider */
}
#creches .title {
  margin-bottom: 1.5rem;
}
/* Campo de pesquisa */
#searchCreches {
  max-width: 400px;
  margin-bottom: 1.5rem;
}

/* Cards de creches */
.creche-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.creche-card:hover {
  transform: translateY(-4px);
}

.creche-card .card-image img {
  object-fit: cover;
  height: 180px;
  width: 100%;
}

.creche-card .card-content .subtitle {
  margin-bottom: 1rem;
}

.title:not(.is-spaced)+.subtitle {
  margin-top: 0.5rem;
}

.button.is-link {
  background-color: #359b94;
}
.button.is-link:hover {
  background-color: #0d7f81;
}

/********************************************************
 * MODAL DE LISTA DE ESPERA
 ********************************************************/
.modal-card {
  border-radius: 8px;
  overflow: hidden;
}
.modal-card-head,
.modal-card-foot {
  background-color: #f7f7f7;
  border: none;
}



/********************************************************
 * SEÇÃO DE CONSULTA DE PROTOCOLOS
 ********************************************************/

section#consulta-protocolo {
  padding: 10rem 1.5rem;
  border-top: 1px solid #ddd;
  background: 
    url("../img/bg_consulta.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.form-box {
  background-color: #fff;
  padding: 3rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  
}
.form-box .title.is-4 {
  margin-bottom: 3rem;
}

/********************************************************
 * SEÇÃO RESPONSIVO
 ********************************************************/

/* Coluna esquerda: imagem de fundo cobrindo toda a metade */
.responsivo-bg-col {
  background: url("../img/mockup_response.png") center center no-repeat;
  background-size: cover;
}

/********************************************************
 * SEÇÃO DE CONTATO
 ********************************************************/
#contato {
  background-color: #eeeeee;
  padding: 4rem 1.5rem;
}

/********************************************************
 * RODAPÉ
 ********************************************************/
footer.footer {
  background-color: #004b74;
  color: #fff;
}
footer.footer p {
  margin: 0;
  padding: 1.5rem 0;
  font-size: 0.95rem;
}