/* MOBILE */
@media (max-width: 768px) {
.nav-desktop {
    display: none;
  }

  /* MENU MOBILE */
.nav-mobile {
  display: flex;
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100vh;
  background: #1c99a1;
  padding: 20px;
  transition: right 0.3s ease;
  z-index: 1001;
}

.nav-mobile a, .drowpdown-toggle {
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  padding-bottom: 4px;
  font-size: 1.1rem;
  font-style: normal;
}

.nav-mobile ul li {
  background: none;
  list-style: none;
}

.nav-mobile a {
  color: #fff;
  display: block;
  padding: 12px 0;
  text-decoration: none;
}

/* BOTÃO MOBILE */
.menu-toggle {
  display: flex;
  font-size: 28px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

button, .dropdown-toggle {
  outline: none;
  color:#fff;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0;
}

.close-menu {
  align-self: start;
  font-size: 28px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  top: 0;
}

.overlay.show {
  display: block;
}

.nav-mobile .dropdown.open > .mobile-dropdown {
  display: block;
}

.logo img {
    width: 8rem; 
    padding-bottom: 0;
    margin: 0;
    padding: 0;
  }

  .dropdown:hover .dropdown-menu {
    display: block;
  }


 .box-main {
    width: 100%;
    display: flex;
    gap: 5px;
   flex-direction: column;
}

/* MOBILE SLIDER */

.hero {
  padding: 10px;
}

.hero-images{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  overflow:hidden;
}

/* todas as imagens ocupam o fundo */

.hero-images .slide{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  box-shadow:none;

  opacity:0;
  transition:opacity 2s ease;
}

/* imagem ativa */

.hero-images .slide.active{
  opacity:1;
}

.btn {
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }



.hero h1 {
    font-size: 1.5rem;
  }

  .hero p {
    font-size: 1rem;
  }

.about h2 {
    font-size: 1.8rem;
  }

  .about p {
    font-size: 1rem;
  }

.card-link:hover .card {
    transform: translateY(-10px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.15);
  }

 .pilares-clinica{
  padding:0.5rem;
}



.card-desc {
    font-size: 1rem;
  }

  .pilares-container{
  max-width:300px;
  gap:10px;
}

.pilar-card{
  max-width:400px;
  padding:0;
}

.pilar-card h2{
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }


.about {
    padding: 1em;
  }

.about h2 {
    margin-bottom: 0.2rem;
    font-size: 1.5rem;
  } 

  .cards {
    padding: 1rem;
    gap: 5px;
  }

  .card {
    padding: 0.5rem;
  }

  .card h3 {
    font-size: 1rem;
    margin: 0;
  }

.card img {
    width: 200px;
    height: 100px;
  }

.servicos {
    padding: 1em;
  
}

.servicos h2 {
    font-size: 1.5rem;
  }
  
.cta {
    padding: 0.5rem;
  }

.cta p {
    font-size: 1rem;
  }

.especialidade-conteudo p {
    font-size: 1rem;
  }

.info-lista li {
   font-size: 1rem;
}

.sobre-container {
    grid-template-columns: 1fr;
  }

  .responsavel-card {
    width: 100%;
    flex-direction: column;
  }

  .responsavel-card img {
    width: 180px;
    height: 250px;
  }

.footer-container{
  justify-content: center;
}

/* sobre */

 .sobre-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .sobre-conteudo h2 {
    font-size: 2rem;
  }

  .especialidades {
    grid-template-columns: 1fr;
  }

  
.especialidade-conteudo {
    max-width: 900px;
    margin: 0 auto;
    padding: 0.1rem 1rem 1rem;
}

/* contato */

.contato-conteudo {
    grid-template-columns: 1fr;
  }

  .contato-header h1 {
    font-size: 2rem;
  }

  .contato-form button {
    width: 100%;
    text-align: center;
  }

  .contato-info li {
    font-size: 1rem;
  }

  .responsavel img {
    width: 300px;
  }

/* especialidades */

.carousel {
    height: 100px;
  }

  .especialidade-conteudo h1 {
    font-size: 2rem;
  }


.footer {
    font-size: 0.9rem;
    padding: 16px;
  }

.footer p {
    margin: 8px 0;
  }
}