:root {
    /* Cores */
    --branco-puro: #ffffff;
    --bege-medio: #f6ebda;
    --bege-claro: #f6ebda; /* mesma cor do bege médio, mas pode renomear se necessário */
    --terra-quente: #c35c11;
  
  }
  
  header {
    font-family: "Marcellus", serif;
  }
  
  
  .tira {
    background-color: #833904;
    height: 33px;
    width: 100%;
    font-size: 12px;
  }
  
  .selos img {
    height: 21px;
  }
  
  img.logo-header {
    height: 90px;
  }
  .tira-content {
    display: flex;
    justify-content: space-between;
    height: 33px;
    align-items: center;
  }
  
  header a {
    color:white;
    text-decoration: none;
    text-transform: uppercase;
  }
  a.agend {
    background-color: white;
    color: #C35C11;
    padding: 10px 19px;
    border-radius: 10px;
  }
  .header-content {
    display: flex;
    justify-content: space-between;
    height: 130px;
    align-items: center;
  }
  
  .sub-i {
      display: flex;
      align-items: center;
  }
  .menu1 a {
    margin: 0px 11px;
  }
  .menu1 {
    margin-right: 20px;
  }
  .header {
    height: 130px;
    
    background: var(--terra-transparente, linear-gradient(180deg, #8E3C00 7.35%, #FFFAF2 158.59%));
  
  
  }
  .box {
    display: flex;
    margin: 70px 0px;
    color: var(--terra-quente);
    align-items: flex-start;
    gap: 50px;
    font-family: Manrope;
  }
  
  .box h3 {
    font-family: Marcellus;
    font-size: 48px;
  }
  
  .box.invert-b {
    display: flex;
    flex-direction: row-reverse;
  }
  
  .baixe-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 62px;
    background-color: #F6EBDA;
  }
  
  .baixe-app span {
    color: var(--Terra-Quente-TX, #C35C11);
  
    /* Sub Title */
    font-family: Marcellus;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 16px */
    letter-spacing: 1.92px;
    text-transform: uppercase;
  }
  
  .baixe-app h2 {
    color: var(--Terra-Quente-TX, #C35C11);
  text-align: center;
  font-family: Marcellus;
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 67.2px */
  }
  .baixe-app p {
    color: var(--Terra-Quente-TX, #C35C11);
    text-align: center;
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    width: 70%;
    padding: 30px 0px;
  }
  .baixe-app a img {
    height: 41px;
  }
  
  
  .degrade {
      width: 100%;
      /* background: linear-gradient(180deg, #8E3C00 5.1%, #FFFAF2 86.17%) !important; */
      padding: 90px 0px;
      background-image: url(../img/detalhe1.png) !important;
      background-size: cover;
      background-repeat: no-repeat;
      background-position-x: 100%;
  }
  
  .degrade h3 {
    color: var(--Branco-Puro-TX, #FFF);
    font-family: Marcellus;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    margin-left: 20px;
    margin-bottom: 60px;
  }
  
  .boxe {
    background-color: none;
    border-radius: 10px;
    padding: 25px 34px;
    margin-bottom: 30px;
    width: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .boxe:hover {
    background-color: white;
    color: var(--Terra-Quente-TX, #C35C11) !important;
  }
  
  .boxe:hover span {
    color: var(--Terra-Quente-TX, #C35C11) !important;
  }
  
  .boxe:hover p {
    color: var(--Terra-Quente-TX, #C35C11) !important;
  }
  .b-last span{
    color: var(--Terra-Quente-TX, #C35C11) !important;
  }
  .b-last p{
    color: var(--Terra-Quente-TX, #C35C11) !important;
  }
  
  .boxe span {
    color: white;
    font-family: Marcellus;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    margin-bottom: 13px;
  }
  .boxe p {
    color: white;
  font-family: Manrope;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%; /* 25.6px */
  }
  
  .medicos h2 {
    color: var(--Terra-Quente-TX, #C35C11);
    text-align: center;
    font-family: Marcellus;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 67.2px */
  }
  
  .medicos span {
    color: var(--Terra-Quente-TX, #C35C11);
    text-align: center;
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    width: 80%;
    display: block;
    margin: auto;
    margin-bottom: 90px;
  }
  
  .OLDdocs {
    display: flex;
    gap: 25px;
    max-width: 917px;
    margin: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  #lista-pessoas {
    display: flex;
    gap: 25px;
    max-width: 917px;
    margin: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}


  .doc1 {
    width: 285px;
    height: 671px;
    flex-shrink: 0;
  
  }
  
  .doc1 h4 {
    color: var(--Terra-Quente-TX, #C35C11);
    text-align: center;
    font-family: Marcellus;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 133.333% */
    margin-top: 20px;
  }
  
  .doc1 span {
    color: var(--Terra-Quente-TX, #C35C11);
    text-align: center;
    font-family: Manrope;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    margin-bottom: 11px;
  }
  
    .doc1 p {
      color: var(--Terra-Quente-TX, #C35C11);
    text-align: center;
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 177.778% */
    }
  
  
    .foto-doc {
      width: 285px;
      height: 329px;
      background-image: url(../img/medico1.png);
      background-size: cover;
      border-radius: 6px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
  }
  
  .foto-doc a {
    background-color: white;
    padding: 10px 14px;
    margin-bottom: 18px;
    border-radius: 5px;
    color: var(--Terra-Quente-TX, #C35C11);
    font-family: Marcellus;
    font-size: 9.157px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 9.157px */
    text-transform: uppercase;
    text-decoration: none;
  }
  
  .medicos {
    text-align: center;
  }

  footer {
    background: var(--Bege-Mdio-TX, #F6EBDA);
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  .footer-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 83px 0px;
}

  .footer-f {
    border-top: 1px solid #C35C11;
    color: #C35C11;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    padding: 11px 0px 0px;
    font-family: Manrope;
    font-size: 14px;
}
.upper-f {
    display: flex;
    justify-content: space-between;
}

.t-f {
    color: var(--Primary, #222) !important;
    font-family: Manrope !important;
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 140% !important;
    padding-bottom: 21px;
    display: block;
}

.footer-logo {

}

.f-clinca {
    width: 240px;
}
.f-contatos img, .f-localizacao img { 
    margin-right: 10px;
}
.f-contatos {
}
.f-localizacao {
    width: 240px;
}

.f-contatos span, .f-localizacao span, .itens-c a {
    color: var(--Text, #909090);
    font-family: Manrope;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 24px */
    text-decoration: none;
}

.f-clinca, .f-contatos, .f-localizacao {
    padding-top: 9px;
}


.itens-c {
    display: flex;
    flex-direction: row;
    gap: 13px;
}

.itens-c a {
    float: left;
    margin-bottom: 20px;
}

footer .selos img {
    height: 29px;
    margin-right: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
}



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


.bt-agende {
    background-color: #AB4A03;
    width: 260px;
    margin: auto;
    margin-bottom: 30px;
    color: white;
    font-family: Marcellus;
    font-size: 18px;
    text-decoration: none;
    border-radius: 6px;
    padding: 12px;
}



/* Menu toggle (hamburger icon) */
.menu-toggle {
    display: none;
    font-size: 32px;
    color: white;
    cursor: pointer;
}

/* Esconde o menu e o botão de agendar no mobile por padrão */
.mobile-hidden {
    display: flex;
}

#ver-mais {
    margin-top: 20px;
    border: none;
    background: no-repeat;
    color: #C35C11;
    text-decoration: underline;
    margin-bottom: 50px;
}

.cuida-f {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 76px 0px;
}
.cuida-f span {
    color: var(--Secondary, #232323);
/* Sub Title */
font-family: Marcellus;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 16px */
letter-spacing: 1.92px;
text-transform: uppercase;
}

.cuida-f img {
    height: 38px;
}

.cuida-f h4 {
    color: var(--Primary, #222);
    text-align: center;
    font-family: Marcellus;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 67.2px */
}
.people {
    padding-top: 50px;
}

.cuida-f p {
    color: var(--Terra-Quente-TX, #C35C11);
text-align: center;
font-family: Manrope;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 160%; /* 25.6px */
width: 504px;
}
.box-conteudo {
    display: flex;
    justify-content: space-around;
}
.box-cuidado {
    width: 346px;
    background-color: #FFFAF2;
    text-align: center;
    padding: 40px 27px;
    margin-bottom: 50px;
    border-radius: 10px;
}

.box-cuidado h4 {
    color: var(--Primary, #222);
text-align: center;
font-family: Marcellus;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 33.6px */
}

.box-cuidado p {
    color: var(--Terra-Quente-TX, #C35C11);
    text-align: center;
    font-family: Manrope;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    margin: 33px 0px;
}
.box-cuidado a {
    border-radius: 7px;
    background: var(--Terra-Quente-BG, #AB4A03);
    color: white;
    font-family: Marcellus;
    text-decoration: none;
    padding: 10px 28px;
    text-transform: uppercase;
}

#modal-esp li {
    color: var(--Terra-Quente-TX, #C35C11);
    font-family: Marcellus;
    font-size: 18px;
    line-height: 134%;
    text-transform: capitalize;
    width: 215px;
    margin: 5px;
}

#modal-esp ul {
   
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}

.modal-especialidade {
    max-width: 793px !important;
}


.modal-especialidade .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title-modal {
    color: var(--Primary, #222);
    text-align: center;
    font-family: Marcellus;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 50.4px */
    margin-bottom: 30px;
}
@media (max-width: 768px) {


    .box-conteudo {
        display: flex;
        justify-content: space-around;
        flex-direction: column;
    }


    .cuida-f p {

        width: 100%;

    }
    .boxe {
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    .degrade {

        background-position-x: 0%;

    }

    .degrade h3 {
     
        width: 100%;

        margin: 0px;
        text-align: center;
    }

    .baixe-app p {

        width: 100%;
    }

    .box img {
        width: 90%;
    }

    .box {
        display: flex;
        margin: 70px 0px;
        color: var(--terra-quente);
        gap: 50px;
        font-family: Manrope;
        flex-direction: column;
        align-items: center;
    }
    .box.invert-b {
        display: flex;
        flex-direction: column;
    }

    .box h3 {
        font-family: Marcellus;
        font-size: 48px;
        text-align: center;
        width: 92%;
        margin: auto;
    }

    .box p {
        width: 90%;
        text-align: center;
        margin: auto;
        font-family: Manrope;
        font-size: 18px;
        line-height: 34px;
    }

    .upper-f {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .footer-f {

        display: flex;
    }

    .footer-content {

        padding: 83px 24px;

    }

    .footer-logo .selos img {
        height: 42px;
    }

    .footer-logo img {
        margin-bottom: 30px;
    }
    .t-f {
        margin-top: 36px;
    }
    .f-localizacao {
        width: 100%;
        margin-bottom: 70px;
    }
    img.logo-header {
        height: 53px;
    }


    .menu1, .agend {
        display: none;
        flex-direction: column;
        background-color: var(--terra-quente);
        position: absolute;
        top: 130px;
        right: 0;
        width: 100%;
        text-align: center;
        padding: 20px 0;
        z-index: 999;
    }

    .menu1 a, .agend {
        color: white;
        padding: 10px 0;
        text-transform: uppercase;
        text-decoration: none;
    }

    .menu-toggle {
        display: block;
    }

    .menu1.show, .agend.show {
        display: flex;
    }
}