/* SEO */

/* Performance e Core Web Vitals */
img {
    max-width: 100%;
    height: auto;
    
}

/* Otimização de fontes */
@font-face {
    font-family: 'CustomFont';
    src: url('font.woff2') format('woff2');
    font-display: swap; /* Evita bloqueio de renderização */
}



html {
  scroll-behavior: smooth;
}

* {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* 
  border: 1px solid red !important;
  box-sizing: border-box !important; */
}

.container-menu {
  display: grid;
  grid-template-columns: 0.4fr 1.6fr 1.6fr 0.4fr;
  grid-template-rows: 0.4fr 1.8fr 0.8fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "logo . menu-principal . "
    "banner-principal banner-principal banner-principal banner-principal";

  display: flex;

  background-color: rgb(230, 225, 218);
}

.logo {
  grid-area: logo;
  padding: 0rem 0rem 0rem 6rem;
}

.logo img {
  width: 30%;
  margin: 2rem;
}

.menu-principal {
  grid-area: menu-principal;
  align-self: center;
}

.menu-principal ul {
  display: flex;
  list-style: none;
}

.menu-principal li {
  margin: 1rem;
  font-size: 1rem;
  font-weight: 600;
}

.menu-principal a {
  text-decoration: none;
  color: #573a46;
}

.menu-principal a:hover {
  fill: rgb(30, 210, 60);
}

.whatsapp-menu {
  align-self: center;
  font-size: 2rem;
  margin: 0rem 0rem 0rem 2rem;
}

.whatsapp-menu i {
  color: rgb(35, 146, 35);
}

.whatsapp-menu:hover {
  fill: crimson;
}

/* SECAO BANNER PRINCIPAL */

.banner-principal {
  grid-area: banner-principal;
}

.banner-principal img {
  width: 100%;
  height: 60vh;
  background-size: cover;
}

/* SECAO QUEMS SOMOS */

.quem-somos {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 36vh;
  margin: 4rem 0rem 0rem 0rem;
}

.titulo-quem-somos h2 {
  font-size: 3rem;
  font-weight: 800;
  color: rgb(82, 79, 77);
  padding: 0rem 0rem 0rem 8rem;
}

.titulo-quem-somos h3 {
  padding: 0rem 0rem 0rem 8rem;
}

.texto-quem-somos p {
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 6rem 0rem 4rem;
}

.conheca-terapias {
  margin: 0rem 0rem 0rem 0rem;
}

.conheca-terapias button {
  background-color: darkgreen;
  width: 22rem;
  height: 3rem;
  color: #ffffff;
  font-size: 1.2rem;
  border: none;
}

/* SEPARADOR 1 */

.hr3 {
  border: 0;
  height: 2px;
  background-image: linear-gradient(to right, transparent, #ccc, transparent);
  margin: 0rem 0rem 2rem 0rem;
}

/* SECAO TERAPIAS */

#terapias {
  display: grid;
  grid-template-columns: 0.4fr 1fr 1fr 0.4fr;
  grid-template-rows: 0.2fr 0.8fr;
  gap: 0;
  grid-template-areas:
    " . titulo-terapias . . "
    " . texto-acupuntura descricao-acupuntura . "
    " . texto-tuina descricao-tuina . "
    " . texto-gestante descricao-gestante . "
    " . texto-miofascial descricao-miofascial . ";
}

.titulo-terapias {
  grid-area: titulo-terapias;
  font-size: 3rem;
  font-weight: 800;
  color: rgb(82, 79, 77);
}

.card-acupuntura {
  background-color: card-acupuntura;
  display: flex;
  flex-direction: row;
}

.texto-acupuntura {
  grid-area: texto-acupuntura;
  margin: 2rem 0rem 2rem 0rem;
  color: #000000;
  background-color: #f29100;
  padding: 2rem 2rem 2rem 2rem;
}

.descricao-acupuntura {
  grid-area: descricao-acupuntura;
  align-self: center;
  margin: 2rem 2rem 2rem 2rem;
  padding: 0rem 1.4rem 0rem 1.4rem;
}

.texto-tuina {
  grid-area: texto-tuina;
  align-self: center;
  padding: 2rem 2rem 2rem 2rem;
}

.descricao-tuina {
  grid-area: descricao-tuina;
  margin: 2rem 0rem 2rem 0rem;
  align-self: center;
  margin: 2rem 2rem 2rem 2rem;
  padding: 0rem 1.4rem 0rem 1.4rem;
}

.texto-gestante {
  grid-area: texto-gestante;
  align-self: center;
  padding: 2rem 2rem 2rem 2rem;
  background-color: #f29100;
  color: #000000;
}

.descricao-gestante {
  grid-area: descricao-gestante;
  margin: 2rem 0rem 2rem 0rem;
  align-self: center;
  margin: 2rem 2rem 2rem 2rem;
  padding: 0rem 1.4rem 0rem 1.4rem;
}

.texto-miofascial {
  grid-area: texto-miofascial;
  align-self: center;
  padding: 2rem 2rem 2rem 2rem;
}

.descricao-miofascial {
  grid-area: descricao-miofascial;
  margin: 2rem 0rem 2rem 0rem;
  align-self: center;
  margin: 2rem 2rem 2rem 2rem;
  padding: 0rem 1.4rem 0rem 1.4rem;
}

/* GALERIA DE FOTOS */

.swiper {
  width: 100%;
  height: 60vh;
  position: relative;
  background-size: cover;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #444;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* AGENDE SUA CONSULTA 1 */

.agendar-consulta {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgb(67, 117, 63);

  margin: 4rem 0rem 4rem 0rem;
}

.agendar-consulta h2 {
  display: flex;
  color: #e5c0a3;
  justify-content: space-around;
  padding: 1rem 0rem 1rem 0rem;
}

.agendar-consulta a i {
  display: flex;
  justify-content: space-around;
  padding: 0rem 0rem 1rem 0rem;
  color: #ffffff;
  font-size: 3rem;
}

/* SECAO BENEFICIOS */

.beneficio {
  width: 100%;
}

.titulo-beneficios {
  width: 100%;
  margin: 0rem 0rem 2rem 0rem;
  padding: 0rem 0rem 0rem 14rem;
}

.titulo-beneficios h2 {
  display: flex;

  font-size: 3rem;
  font-weight: 800;
  color: rgb(82, 79, 77);
}

.titulo-beneficios p {
  font-size: 1.2rem;
  font-weight: 600;
}

.beneficios {
  width: 100%;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0rem 0rem 14rem;
}

.acupuntura {
  display: flex;
  justify-content: space-around;
  width: 40%;
  margin: 4rem 0rem 2rem 0rem;
}

.acupuntura h2 {
  background-color: rgb(187, 165, 148);
  align-content: center;
  text-align: center;
}

.acupuntura p {
  background-color: rgb(66, 110, 30);
  padding: 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}

.tuina {
  display: flex;
  justify-content: space-around;
  width: 40%;
  margin: 2rem 0rem 2rem 0rem;
}

.tuina h2 {
  background-color: rgb(187, 165, 148);
  align-content: center;
  text-align: center;
}

.tuina p {
  background-color: rgb(66, 110, 30);
  padding: 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}

.terapia-gestantes {
  display: flex;
  justify-content: space-around;
  width: 40%;
  margin: 2rem 0rem 2rem 0rem;
}

.terapia-gestantes h2 {
  background-color: rgb(187, 165, 148);
  align-content: center;
  text-align: center;
}

.terapia-gestantes p {
  background-color: rgb(66, 110, 30);
  padding: 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}

.liberacao-miofascial {
  display: flex;
  justify-content: space-around;
  width: 40%;
  margin: 2rem 0rem 2rem 0rem;
}

.liberacao-miofascial h2 {
  background-color: rgb(187, 165, 148);
  align-content: center;
  text-align: center;
}

.liberacao-miofascial p {
  background-color: rgb(66, 110, 30);
  padding: 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}

/* SECAO DEPOIMENTOS */

.depo {
  display: flex;
  margin: 6rem 0rem 4rem 0rem;
}

.titulo-depo h2 {
  margin: 0rem 0rem 0rem 14rem;
  font-size: 3rem;
  font-weight: 800;
  color: rgb(82, 79, 77);
}

.titulo-depo h3 {
  margin: 0rem 0rem 4rem 14rem;
}

.card-depo-1 {
  display: flex;
  flex-direction: column;
  justify-content: space-center;
  width: 12rem;
  margin: 0rem 2rem 0rem 0rem;
  padding: 2rem 2rem 2rem 2rem;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  transform: translateY(-5px);
}

.card-depo {
  display: flex;
}

.card-depo-1 img {
  width: 120%;
  height: auto;
  margin: 0rem 0rem 2rem 0rem;
}

/* PROFISSIONAL */

.professional-section {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 4rem 0rem 4rem 0rem;
  padding: 0rem 8rem 0rem 14rem;
}

.professional-info h2 {
  display: flex;
  font-size: 3rem;
  font-weight: 800;
  line-height: 2.6rem;
  color: rgb(82, 79, 77);
  width: 10rem;
}

.professional-info {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.professional-info p {
  font-size: 1rem;
  font-weight: 500;
  margin: 1rem 0rem 0rem 0rem;
  padding: 0rem 2rem 0rem 0rem;
}

.professional-section img {
  width: 80%;
  margin: 0rem 0rem 0rem 1rem;
}

/* AGENDAMENTO */

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

.bg-agendamento {
  background-color: rgb(67, 117, 63);
  height: 36vh;
  padding: 1rem 0rem 1rem 0rem;
}

.bg-agendamento h1 {
  margin: 1rem 0rem 0rem 0rem;
  color: rgb(252, 227, 89);
}

.bg-agendamento h2 {
  margin: 2rem 0rem 0rem 0rem;
  color: antiquewhite;
}

.bg-agendamento h3 {
  color: rgb(252, 227, 89);
  text-shadow: #444 solid;
}

.bg-agendamento button {
  width: 20rem;
  height: 2.8rem;
  margin: 2rem;
  font-size: 1rem;
  font-weight: 700;
  color: #444;
}

.bg-agendamento button a {
  color: darkgreen;
  text-decoration: none;
}

/* SECAO CONTATO E LOCALIZAÇÃO */

#contact {
  width: 100%;
}

.titulo-contato h2 {
  margin: 4rem 0rem 0rem 0rem;
  padding: 0rem 0rem 0rem 14rem;
  font-size: 3rem;
  font-weight: 800;
  color: rgb(82, 79, 77);
}

.titulo-contato h3 {
  margin: 0.4rem 0rem 4rem 0rem;
  padding: 0rem 0rem 0rem 14rem;
}

.contato {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-around;
}

.contato .maps {
  margin: 0rem 8rem 0rem 0rem;
}

.logo-contato {
  width: 60%;
  align-self: center;
}

.logo-contato img {
  width: 60%;
  margin: 0rem 0rem 0rem 6rem;
}

.informacoes {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
}

.informacoes p {
  align-self: center;
  width: 70%;
  line-height: 1.4rem;
}

.informacoes i {
  font-size: 2rem;
  color: rgb(67, 117, 63);
}

.informacoes h3 {
  margin: 0rem 0rem 0rem 0rem;
  align-self: center;
}

/* RODAPE */

.rodape {
  background-color: #e5c0a3;
  width: 100%;
  height: 18vh;
  margin: 2rem 0rem 1rem 0rem;
}

.rodape p {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 1rem;
  padding: 1rem 0rem 0rem 0rem;
}

.rodape i {
  font-size: 2rem;
  margin: 1rem 0rem 1rem 0rem;
}

.rodape a {
  text-decoration: none;
  color: rgb(77, 58, 160);
}

/* RESPONSIVIDADE */

/* Media Query para Tablet (768px ou maior) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* CONTAINER PRINCIPAL */

  .container-menu {
    width: 100%;
    height: 26vh;
    display: flex;
    text-align: center;
    flex-direction: column;
  }

  /* MENU CABECALHO */

  .container-menu .logo {
    width: 80%;
    margin: 2rem 0rem 0rem 0rem;
  }

  .logo img {
    margin: 0rem 0rem 0rem 0rem;
  }

  .whatsapp-menu {
    align-self: center;
    font-size: 2rem;
    margin: 0rem 0rem 0rem rem;
  }

  /* SECAO QUEM SOMOS */

  .quem-somos {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 36vh;
    margin: 4rem 0rem 0rem 0rem;
  }

  .texto-quem-somos p {
    padding: 0rem 6rem 0rem 8rem;
    width: 46rem;
  }

  .conheca-terapias {
    padding: 0rem 0rem 4rem 8rem;
    display: flex;
    flex-direction: row;
  }

  .conheca-terapias button {
    background-color: darkgreen;
    width: 22rem;
    height: 3rem;

    color: #ffffff;
    font-size: 1.2rem;
    border: none;
  }

  /* BENEFICIOS */

  .beneficio {
    width: 100%;
  }

  .beneficios {
    justify-content: center;
    width: 100%;
    padding: 0rem 4rem 0rem 4rem;
  }

  .acupuntura {
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin: 4rem 0rem 2rem 0rem;
  }

  .tuina {
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin: 2rem 0rem 2rem 0rem;
  }

  .terapia-gestantes {
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin: 2rem 0rem 2rem 0rem;
  }

  .terapia-gestantes h2 {
    background-color: rgb(187, 165, 148);
    align-content: center;
    text-align: center;
    padding: 0rem 2rem 0rem 0rem;
  }

  .liberacao-miofascial {
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin: 2rem 0rem 2rem 0rem;
  }

  .liberacao-miofascial h2 {
    background-color: rgb(187, 165, 148);
    align-content: center;
    text-align: center;
    padding: 0rem 3rem 0rem 0rem;
  }

  /* DEPOIMENTOS */

  /* SECAO DEPOIMENTOS */

  .depo {
    display: flex;

    margin: 6rem 0rem 4rem 0rem;
    width: 100%;
  }

  .titulo-depo h2 {
    margin: 0rem 0rem 0rem 4rem;
    font-size: 3rem;
    font-weight: 800;
    color: rgb(82, 79, 77);
  }

  .titulo-depo h3 {
    margin: 0rem 0rem 4rem 4rem;
  }

  .card-depo {
    display: flex;
    flex-direction: column;
  }

  .card-depo-1 {
    display: flex;
    flex-direction: column;
    justify-content: space-center;
    width: 14rem;
    margin: 0rem 2rem 0rem 0rem;
    padding: 2rem 2rem 2rem 2rem;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transform: translateY(-5px);
  }

  .card-depo-1 img {
    width: 120%;
    height: auto;
    margin: 0rem 0rem 2rem 0rem;
  }

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

  .bg-agendamento {
    background-color: rgb(67, 117, 63);
    height: 30vh;
    padding: 1rem 0rem 1rem 0rem;
  }


  /* SECAO PROFISSIONAL */

  .professional-section {
  
  padding: 0rem 8rem 0rem 4rem;
}

  /* SECAO CONTATO E LOCALIZAÇÃO */

  #contact {
    width: 100%;
  }

  .titulo-contato h2 {
    margin: 4rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 4rem;
    font-size: 3rem;
    font-weight: 800;
    color: rgb(82, 79, 77);
  }

  .titulo-contato h3 {
    margin: 0.4rem 0rem 4rem 0rem;
    padding: 0rem 0rem 0rem 4rem;
  }

  .contato {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
  }

  .contato .maps {
    margin: 0rem 4rem 0rem 0rem;
  }

  .logo-contato {
    width: 100%;
    align-self: center;
  }

  .logo-contato img {
    width: 60%;
    margin: 0rem 0rem 0rem 4rem;
  }

  .informacoes {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }

  .informacoes p {
    align-self: center;
    width: 90%;
    line-height: 1.4rem;
  }

  /* RODAPE */

  .rodape {
    background-color: #e5c0a3;
    width: 100%;
    height: 14vh;
    margin: 2rem 0rem 1rem 0rem;
  }
}

/* ESTILOS PARA SMARTPHONES */

@media screen and (min-width: 320px) and (max-width: 767px) {
  .container-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .logo {
    width: 100%;
  }

  .menu-principal {
    display: flex;
    flex-direction: column;
  }

  .menu-principal ul {
    flex-direction: column;
    padding: 0rem 0rem 0rem 8rem;
  }

  /* MENU CABECALHO */

  .whatsapp-menu {
    align-self: center;
    font-size: 2rem;
    text-align: center;
    margin: 0rem 0rem 2rem 0rem;
  }

  /* QUEM SOMOS */

  .quem-somos {
    display: flex;
    flex-direction: column;
    height: 60vh;
    margin: 4rem 0rem 4rem 0rem;
  }

  .titulo-quem-somos h2 {
    font-size: 3rem;
    font-weight: 800;
    color: rgb(82, 79, 77);
    padding: 0rem 0rem 0rem 8rem;
    line-height: 2.6rem;
  }

  .titulo-quem-somos h3 {
    padding: 2rem 2rem 0rem 2rem;
    text-align: center;
  }

  .texto-quem-somos p {
    margin: 2rem 0rem 2rem 0rem;
    padding: 0rem 3rem 0rem 3rem;
  }

  .conheca-terapias {
    margin: 0rem 0rem 0rem 1rem;
  }

  .conheca-terapias button {
    background-color: darkgreen;
    width: 22rem;
    height: 3rem;
    color: #ffffff;
    font-size: 1.2rem;
    border: none;
  }

  /* TERAPIAS */

  #terapias {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .terapias p {
    margin: 0rem 1.6rem 0rem 1.6rem;
  }

  /* AGENDE SUA CONSULTA */

  .agendar-consulta {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
  }

  .agendar-consulta h2 {
    padding: 1rem 2rem 1rem 2rem;
  }

  .agendar-consulta a {
    text-decoration: none;
  }

  /* BENEFICIOS */

  .beneficio {
    width: 100%;
    margin: 0rem 0rem 0rem 0rem;
  }

  .titulo-beneficios {
    display: flex;
    flex-direction: column;
    padding: 0rem 0rem 0rem 2rem;
  }

  .beneficios {
    width: 100%;
    padding: 0rem 0rem 0rem 2rem;
  }

  .acupuntura {
    display: flex;
    flex-direction: column;
    width: 100%;

    padding: 0rem 2rem 0rem 0rem;
  }

  .tuina {
    display: flex;
    flex-direction: column;
    width: 100%;

    padding: 0rem 2rem 0rem 0rem;
  }

  .terapia-gestantes {
    display: flex;
    flex-direction: column;
    width: 100%;

    padding: 0rem 2rem 0rem 0rem;
  }

  .liberacao-miofascial {
    display: flex;
    flex-direction: column;
    width: 100%;

    padding: 0rem 2rem 0rem 0rem;
  }

  /* DEPOIMENTOS */

  .depo {
    display: flex;
    flex-direction: column;
  }

  .titulo-depo h2 {
    margin: 0rem 0rem 0rem 2rem;
    font-size: 3rem;
    font-weight: 800;
    color: rgb(82, 79, 77);
  }

  .titulo-depo h3 {
    margin: 0rem 0rem 4rem 2rem;
  }

  .card-depo {
    display: flex;
    flex-direction: column;
  }

  .card-depo-1 {
    width: 60%;
  }


  /* SECAO PROFISSIONAL */

.professional-section {
  
  padding: 0rem 8rem 0rem 4rem;
}


  /* AGENDE SUA CONSULTA */

  .bg-agendamento {
    background-color: rgb(67, 141, 67);
    height: 50vh;
  }

  .bg-agendamento h3 {
    padding: 1rem 1rem 0rem 1rem;
  }

  /* CONTATO E LOCALIZAÇÃO */

  .contato {
    display: flex;

    flex-direction: column;
  }

  .titulo-contato h2 {
    padding: 0rem 0rem 0rem 2rem;
    line-height: 2.8rem;
  }

  .titulo-contato h3 {
    padding: 0rem 0rem 0rem 2rem;
  }

  .informacoes {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
  }

  .informacoes i {
    margin: 0rem 0rem 2rem 0rem;
  }

  .conheca-terapias {
    width: 100%;
  }

  /* SECAO PROFISSIONAL  */

  .professional-section {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
}