:root{
    --azulE: #041f32;
    --verdeE: #5ba439;
    --laranjaE: #ef8320;
    --salmaoE: #fdcfb7;
    --branco: #bececb;
    --salmaoC: #bf9a94;
    --verdeC: #0D580A;
    --teste: #ecd0b4;


    /*serviços*/

    --cinza100: rgb(100, 100, 100); 
    --cinza240: rgb(240, 240, 240);
    --vermelho: #ff0000;
    --azul: #0073B4;
    --roxo: #8706B2;
    --laranja: #FF7A00;
    --verde: #4A7C1D;
    --verdeTitulo: #02aa02;

    /*Livro*/

    --corLivro: #1a4f61;
    --corlivroDark: #var(--corLivro)

    /*Index*/
    --card-fundo: #f6f4e8;
    --depofundo: #F6F4E8;
    --card1: #F5DCDC;
    --card2:#C9D6EE;
    --card3: #DFFBDC;
    --comprarCard-hover: #D94B18;
    --comprarCard: #F29727;
    --emagrecimentoFundo: #ECE9DA;
    --programasFundo: #ECE9DA;
    --cardProgramas-cor: #f6f4e8;


    /*Modo dark e modo escuro*/
    
    --dark-branco: #0b102c; /* Fundo escuro */
    --dark-texto: #f7f7f7; /* Texto claro */
    --dark-cinza: #1C1C1C; /* Cinza escuro */
    --dark-card-fundo: #061724; /* Fundo do cartão escuro */
    --dark-card: #5C5C5C; /* Fundo do cartão */
    --dark-depo-fundo: #061724; /* Fundo dos depoimentos */
    --dark-azul: #071f30;
    --dark-texto: #0AA76A;
}



body.dark-mode .depoimentos {
    background-color: var(--dark-depo-fundo);
    color: var(--dark-texto)
}

body.dark-mode .programas {
    background-color: var(--dark-card-fundo);
    color: var(--dark-texto)
}

body.dark-mode .card-planos{
    background-color: var(--dark-cinza);
    color: var(--dark-texto)
}

body.dark-mode .programas-emagrecimento{
    background-color: var(--dark-cinza);
    color: var(--dark-texto)
}

body.dark-mode .card-programas{
    background-color: #2B2B2B ;
    color: var(--dark-texto);
}

body.dark-mode .card-programas .card-cima h5{
    border-bottom: 12px solid rgb(79, 165, 1);
}

body.dark-mode .card-cima{
    border-bottom: 2px solid var(--dark-card-fundo);
}

body.dark-mode .depo{
    background-color: #2B2B2B;
}

body.dark-mode .depoAutor{
    color: #852e2e;
    
}

body.dark-mode .depo a:hover{
    color: var(--dark-texto);
}

body.dark-mode .card{
    color: var(--dark-texto);
    background-color: var(--dark-cinza);
    box-shadow: 10px 5px 5px rgb(61, 61, 61);
}

body.dark-mode .card-grafico{
    color: var(--dark-texto);
    background-color: #2B2B2B;
}

body.dark-mode .servicos{
    background-color: var(--dark-cinza);
}

body.dark-mode .servicos.servicosInvertido{
    background-color: var(--dark-card-fundo);
}

body.dark-mode .tServicos{
    background-color: var(--dark-cinza);
    color: #e9e9e9 ;
}

body.dark-mode .tServicos h1{
    color: var(--dark-texto) ;
}



body.dark-mode #pediatrica, body.dark-mode #clinica, body.dark-mode #comunitaria,body.dark-mode #esportiva, body.dark-mode #obesidade {
    color: var(--dark-texto);
}

body.dark-mode .servicos p{
    color: #cecdcd;
}








*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto Condensed", sans-serif;
    scroll-behavior: smooth;
    outline: none;
    
    
}

h3{
    font-size: 2.3rem;
}

p{
    font-size: 1.1rem;
}


header{
    background: linear-gradient(135deg, rgba(48, 48, 48, 0.274), rgba(0, 0, 0, 0.596));
    z-index: 2;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    font-size: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.botaoVoltarIndex{
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 3rem;
    height: 3rem;
    background-color: #00830748;
    border: 1px solid rgb(117, 117, 117);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.botaoVoltarIndex img{
    width: 2rem;
    transition: .5s;
    
}

.botaoVoltarIndex img:hover{
    transform: translateX(-10%);
}



header img{
    height: 90%;
    
}

nav ul{
    display: flex;
    align-items: center;
    gap: 1.8rem;
    list-style: none;
    
}

nav li a{
    display: inline-block;
    color: rgb(255, 255, 255);
    text-decoration: none;
    padding: 0.3rem;
    transition: .5s;
}

.login-btn{
    border: 1px solid #02aa02;
    border-radius: 5px;
    padding: 0rem 0.4rem;
}

.Seta-subir{
    padding: 0.5rem;
    outline: none;
    border: none;
    
    background-color: #166C06;
    border-radius: 50%;
    cursor: pointer;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    height: 60px;
    width: 60px;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.Seta-subir.active{
    z-index: 3;
    opacity: 1;
    visibility: visible;
}

.Seta-subir img{
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    right: 0.1,5rem;
    transition: 0.5s;
}

.Seta-subir img:hover{
    transform: translateY(-20%);
}

#paginaAtual, nav li a:hover{
    color: #02aa02;
    
}

nav li .login-btn:hover{
    border: 1px solid rgb(253, 252, 252);
}

.login-cadastro img{
    position: relative;
    top: 0.3rem;
}


.drop-menu{
    position: absolute;
    box-shadow: 0 0 2px black;
    display: none;
    background: linear-gradient(135deg, rgba(48, 48, 48, 0.274), rgba(0, 0, 0, 0.596));
    border-radius: 5%;
}
.drop-menu a{
    display: block;
}

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

header .hamburgue{
    width: 56px;
    height: 56px;
    cursor: pointer;
    position: relative;
    display: none;
    
}

header .hamburgue:before{
    content: "";
    position: absolute;
    top: 58%;
    left: 60%;
    transform: translate(-50% , -50%);
    width: 50%;
    height: 2px;
    border-radius: 1px;
    background-color: #000;
    transition: .7s ease;
}

header .hamburgue::after{
    content: "";
    position: absolute;
    top: 42%;
    left: 36%;
    transform: translate(-50% , -50%);
    width: 50%;
    height: 2px;
    background-color: #000;
    transition: .7s ease;
}

.hamburgue.hamburgue.active-hamburgue{
    &::after{
        top: 50%;
        left: 50%;
    
        transform: translate(-50%, -50%) rotate(135deg);
    
      }
    
      &::before{
          top: 50%;
          left: 50%;
      
          transform: translate(-50%, -50%) rotate(-315deg);
      }
     ;
    }

.banner{
    width: 100%;
    
} 

.banner1{
    width: 100%;
    height: 100svh;
    object-fit: cover;
}

.banner .bannerTelaInicio{
    z-index: -2;
    position: absolute;
    
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    object-fit: cover;
}

.banner .Textos{
    margin-left: 3rem;
    z-index: 2;
    width: 32%;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}

.banner .Textos .linkTitulo{
    
    width: 3rem;
    margin-top: 1rem;
}

.banner .Textos .linkTitulo img{
    width: 100%;
    opacity: 0;
    animation: seta-animada 4s ease infinite;
}

@keyframes seta-animada {

    0%{
        opacity: 0;
    }

    50%{
        opacity: 1;
    }

    100%{
        opacity: 0;
    }

}

.banner .Textos .palavrasInicio{
    background: linear-gradient(224.78deg, rgb(4, 156, 24) 20%, #29e603 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-size: 1.2rem;
}



.Textos .titulo-principal{
    color:  rgb(180, 225, 255);
    font-size: 3.2rem;
    line-height: 100%;
}



.Textos .subtitulo{
    font-size: 1.2rem;
    color: rgb(0, 0, 0);
    font-weight: 500;
}

.Textos .subtitulo a{
    text-decoration: none;
    color: rgb(180, 225, 255);
}



.banner .texto2 .tituloPrincipal-servicos{
    background: linear-gradient(224.78deg, rgb(185, 26, 26) 9%, rgb(202, 99, 99) 95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.7rem;
    line-height: 100%;
}

.banner .texto2 .seta{
    width: 3rem;
    margin-top: 1rem;
    

}

.banner .texto2 .seta .linkTitulo img{
    width: 100%;
    animation: seta-animada 4s ease infinite;
    
}



.banner .img2{
    width: 100%;
    height: 100svh;
    object-fit: cover;
    margin-bottom: -0.6rem;
    
}

.banner .texto2{
    width: 33%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 0.5rem;
    right: 8rem;
}

.banner .Texto-sobre, .banner .Texto-exame, .banner .Texto-contatos{
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 0.5rem;
    left: 3rem;
}

.banner .Texto-contatos{
    top: 1rem;
}

.banner .Texto-sobre .linkTitulo img, .banner .Texto-exame .seta img, .banner .Texto-contatos .seta img{
    width: 100%;
    animation: seta-animada 4s ease infinite;
}

.banner .Texto-sobre .tituloPrincipal-sobre{
    color: #02aa02;
    font-size: 2.7rem;
    line-height: 100%;
}

.banner .Texto-sobre .seta, .banner .Texto-exame .seta, .banner .Texto-contatos .seta{
    width: 3rem;
    margin-top: 1rem;
}

.banner .Texto-exame h1{
    color: #fff;
    font-size: 2.7rem;
    line-height: 100%;
}

.banner .Texto-exame{
    width: 40%;
}

.banner .Texto-contatos h1{
    background: linear-gradient(224.78deg, #FCB040 8.12%, #FFBD59 92.21%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.7rem;
    line-height: 100%;
}



/*card-planos-------*/

.card-planos{
    background-color: var(--card-fundo);
    padding-bottom: 8rem;
}

.planos{
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
    height: 100%;
    margin: auto;
    max-width: 75rem;
    
}

.planos h2{
    margin-top: 3rem;
    font-size: 2.30rem;
}

.planos .card h2{
    font-size: 2.25rem;

}

.planos .card h3{
    font-size: 1.85rem;
}

.planos .card p{
    font-size: 1.20rem;
}

.planos h1{
    text-align: center;
}

.plano{
    display: grid;
    gap: 8rem;
    grid-template-columns: repeat(3, 1fr);
    
}

.card-interno{
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    flex-direction: row;
    
}

.card{
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 15px;
    padding: 1.5rem 2rem;
    gap: 1.25rem;
    align-items: start;
    display: grid;
    flex: 1 1 14rem;
    flex-wrap: wrap;
    transition: .4s;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    box-shadow: 10px 5px 5px rgb(170, 180, 180);;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.planos .card h2{
    text-align: center;
}

.btn-espaço{
    display: flex;
    align-items: end;
    justify-content: center;
    width: 20rem;
    margin-top: 5rem;
}
    
.comprar-btn{
    align-self: end;
 
    padding: 0.5rem 0.7rem;
    width: 100%;

    border-radius: 15px;
    text-decoration: none;
    background-color: var(--comprarCard);
    color: #000;
    text-transform: uppercase;
    text-align: center;
    transition: 0.5s;
}

.comprar-btn:hover{
    background-color: var(--comprarCard-hover);
    color: #fff;
}



.card1:hover{
    background-color: var(--card1);
    color: #000000;
}

.card2:hover{
    background-color: var(--card2);
    color: #000000;
}

.card3:hover{
    background-color: var(--card3);
    color: #000000;
    
}

/*card programas------------------------*/

.programas{
    padding-inline-start: 5rem;
    padding-inline-end: 5rem;
    padding-top: 8rem;
    padding-bottom: 8rem;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    width: 100%;
    background-color: var(--programasFundo);
    

}

.programas h2{
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.75rem;
}

.card-programas-layout{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: min(100vw, 1280px);
    margin: auto;
    gap: 1.75rem;
 
}

.card-cima{
    display: flex;
    padding-inline-start: 2rem;
    padding-inline-end: 2rem;
    padding-bottom: 3rem;
    justify-content: space-between;
    border-bottom: 2px solid rgb(236, 233, 218);
}



.card-baixo h5{
    font-size: 1.75rem;
    line-height: 1.75rem;
    
}

.card-programas{
    width: 100%;
    height: 100%;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.25rem;
    background-color: var(--cardProgramas-cor);
    padding: 2rem 0;
    
}

.card-programas img{
    height: 2rem;
}

.card-programas .card-cima h5{
    font-size: 1.5rem;
    line-height: 1.75rem;
    
    border-bottom: 12px solid rgb(177, 243, 167);
    padding-bottom: 0.5rem;
}

.card-baixo{
    padding: 1rem 0;
  
    padding-inline-start: 2rem;
    padding-inline-end: 2rem;
}

.a-servicos{
    text-decoration: none;
    padding: 0.4rem;
    border-radius: 20px;
    font-size: 1.7rem;
}

/*Carousel serviços-----*/

.carousel {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
     transition: transform 1s ease-in-out;
}



.slide-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: rgb(104, 138, 169);
    display: flex;
    align-items: center;
    justify-content: center;
}



.slide {
    min-width: 100%;
    transition: transform 0.9s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Setas de navegação */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    color: white;
    padding: 0.5rem;
    cursor: pointer;
    user-select: none;
    z-index: 1;
}

.imgBannerServicos{
    width: 100%;
}

.slide .imgBannerServicos2{
    width: 100%;
}

.slide .imgBannerServicos2{
    display: none;
}

.left-arrow {
    left: 0;
}

.right-arrow {
    right: 0;
}


.botaoBanner1,
.botaoBanner2,
.botaoBanner3, 
.botaoBanner4,
.botaoBanner5{
    position: absolute;
    top: 70%;
    margin-left: -37%;
    text-decoration: none;
    font-size: 1.5rem;
    padding: 0.5rem;
    border-radius: 10px;
    transition: all 0.5s;
}

.botaoBanner1{
    border: 1px solid #ba4648;
    color: #ba4648;
}

.botaoBanner1:hover{
    color: white;
    background-color: #ba4648;
}

.botaoBanner2{
    border: 1px solid #6b994f;
    color: #6b994f;
}

.botaoBanner2:hover{
    background-color: #6b994f;
    color: white;
}

.botaoBanner3{
    border: 1px solid #376440;
    color: #376440;
}

.botaoBanner3:hover{
    background-color: #376440;
    color: white;
}

.botaoBanner4{
    border: 1px solid #ba4648;
    color: #ba4648;
}

.botaoBanner4:hover{
    color: white;
    background-color: #ba4648;
}

.botaoBanner5{
    border: 1px solid #a4c25c;
    color: #a4c25c;
}

.botaoBanner5:hover{
    color: white;
    background-color: #a4c25c;
}

/*grafico*/

.programas-emagrecimento{
    padding: 6rem 0 ;
    background-color: var(--emagrecimentoFundo);
}

.programas-emagrecimento h2{
    font-size: 2.75rem;
    text-align: center;
}

.emagrecimento{
    flex-direction: row;
    gap: 2rem;
    margin-top: 10rem;
}


.cardEgrafico{
    flex-direction: row;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

.cards-grafico{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.card-grafico{
    display: flex;
    flex-direction: column;
    gap: 44px;
    background-color: #f6f4e8;
    padding: 32px;
    max-width: 26rem;
    border-radius: 44px;
}

.card-grafico p{
    font-size: 20px;
    line-height: 20px;
    font-weight: 600;
}



.card-graficoCima{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: row;
    gap: 0.2rem;
}

.card-graficoCima h6{
    font-size: 25px;   
}

.card-graficoCima img{
    width: 5rem;
    height: 5rem;
}

#grafico-normal{
    display: block;
}

#graficoDark{
    display: none;
}

.imagem-grafico{
    height: 50rem;
    width: 40rem;
}

.imagem-grafico img{
    height: 100%;
    width: 100%;
}




/*depoimentos-----------------*/
.depoimentos{
    padding: 2rem;
    background-color: var(--depofundo);
    
}

.depoimentos h2{
    text-align: center;
    margin-bottom: 0.1rem;
    font-size: 2.30rem;
}

.depoimentos p{
    text-align: center;
    font-weight: 600;
}

.depoimentos-p{
    margin-bottom: 3rem;
}





.componente-flex{
    display: flex;
    gap: 2;
    flex-wrap: wrap;
    justify-content: center;
}

.depo{
    width: 31%;
    border-radius: 3%;
    background-color: #ECE9DA;
    position: relative;
    display: flex;
    margin: 0.8rem;
    flex-direction: column;
    align-items: center;
    padding: 1.8rem 1.8rem 3.2rem 1%;
}

.depoResponsivo{
    display: none;
}

.depoAutor{
    margin-top: 1rem;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;

}

.depoLocal{
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 9rem;
}

.depoInsta{
    position: absolute;
    bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: #adadad;
}

.instaImg{
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.depotextCentro{
    margin-top: 2rem;
    text-transform: uppercase;
}

.depotextCentro a{
    text-decoration: none;
}

/*footer------*/

footer{
    background-color: #443e3e;
    padding: 1.5rem 5%;
    
}

footer .footer-logo img{
    display: inline-flex;
    opacity: 70%;
    height: 5rem;
    filter: grayscale(100%);
    transition: filter .5s;

}

footer .footer-logo img:hover{
    filter: grayscale(0);
    
}



footer nav{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid var(--cinza100);
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 1rem 0 0 0;
}

footer nav a{
    text-decoration: none;
    color: #dddddd;
    font-size: 1.5rem;
    transition: .5s;
    
}   

footer .faleConosco{
    border-top: 1px solid var(--cinza100);
    border-bottom: 1px solid var(--cinza100);   
    margin: 1rem 0;
    padding: 1rem 0;
}

footer .faleConosco a{
    text-decoration: none;
    color: #dddddd;
    font-size: 1.5rem;
    transition: .5s;
}

footer .faleConosco a:hover, footer nav a:hover{
    color: #fff;
}

/*----tela sobre---*/

.titulo-sobre{
    padding: 1.5rem 0 ;
    text-align: center;
}

.titulo-sobre h1{
    color: var(--verdeTitulo);
    font-size: 2.9rem;
}

.livro{
    width: 85%;
   margin: auto;
    margin-bottom: 3rem;
    padding: 1rem;
    overflow: hidden;
}


.livro p{
    font-size: 1.5rem;
    z-index: 1;
}


.livroTotal{
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    perspective: 120rem;
    padding: 1rem;
    position: relative;
    

}

.livroTotal .pagina{
    position: absolute;
    top: auto;
    right: 0;
    width: 50%;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: left;
    transform: rotate(0);
    transition: transform 1s;
}

.livroTotal .setaDireita {
    position: absolute;
    height: 7%;
    aspect-ratio: 80 / 130;
    bottom: 7%;
    right: 7%;
    animation: setaDireita 2s infinite;
   
}

@keyframes setaDireita{

    0%, 100%{
        right: 7%;
    }

    50%{
        right: 9%;
    }
}

.livroTotal .setaEsquerda{
    position: absolute;
    height: 7%;
    aspect-ratio: 80 / 130;
    bottom: 7%;
    left: 7%; 
    animation: setaEsquerda 2s infinite;   
}

@keyframes setaEsquerda{

    0%, 100%{
        left: 7%;
    }

    50%{
        left: 9%;
    }
}

.livroTotal .setaDireita *, .livroTotal .setaEsquerda *{
    fill:none;
    stroke: rgba(255,255,255,0.7);
    stroke-width: 1vw;
    stroke-linecap:round;
    stroke-linejoin:round;
}



.livroTotal .frente, .livroTotal .verso{
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 3rem rgba(0,0,0,0.3);
    color: #fff;
    -webkit-perspective: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0,0,0);
    visibility: visible;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    perspective: 120rem;
    cursor: pointer;
    

}


.livroTotal .frente{
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0 1vw 1vw 0;
}

.livroTotal #p1 h4{
    text-align: center;
    background-image: linear-gradient(rgb(210,0,0), rgb(180,0,0));
    padding: 5%;
    border-radius: 1vw;
}

.livroTotal #p1 p{
    text-align: center;
    padding: 5%;
    background-color: rgba(255,255,255,0.9);
    margin: 0.5vw 0 0 0;
    color: var(--cinza100);
    border-radius: 0.5vw;
}

.servico .livroTotal #p1 .frente{
    background-image: url("img/Livro/abrir-livro.svg");
    justify-content: center;
}

.livroTotal #p1 .frente {
    background-image: url("img/Livro/abrir-livro.svg");
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15%;
}



.livroTotal .verso{
    transform: rotateY(180deg);
    border-radius: 1vw 0 01vw;
    
}



.livroTotal #p1 .verso {
    background-image: radial-gradient(circle at -60% 100%, rgb(255, 230, 0) 35%, rgb(200, 150, 0) 75%);
}

.livroTotal #p1 .retMeio1{
    left: -32%;
    background-image: linear-gradient(rgb(0, 170, 230), rgb(0,115,160));
    user-select: none;
}

.livroTotal #p1 .retMeio2{
    right: -20%;
    background-color: var(--corLivro);
    user-select: none;
}

.livroTotal #p1 .logo-sobre {
    position: absolute;
    width: 70%;
    user-select: none;
}

.livroTotal #p1 .logo-sobre {
    transform: translateZ(4rem) rotateZ(8deg);
    left: 13%;
    top: 17%;
    animation: logo-sobre 5s infinite;
}

@keyframes logo-sobre{

    0%, 100%{
        left: 13%;
    }

    50%{
        left: 18%;
    }

}

/*pagina2*/

.livroTotal #p2 .frente{
    background-color: var(--corLivro);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 15%;   
}

.livroTotal #p2 .rets, .livroTotal #p1 .rets{
    position: absolute;
    inset: 0;
    overflow: hidden;
    user-select: none;
}

.livroTotal #p1 .rets{
    border-radius: 1vw 0 0 1vw;
}

.livroTotal #p2 .rets{
    border-radius: 0 1vw 1vw 0;
}

.livroTotal #p2 .retMeio1, .livroTotal #p2 .retMeio2, .livroTotal #p1 .retMeio1, .livroTotal #p1 .retMeio2{
    position: absolute;
    width: 40%;
    top: 0;
    bottom: 0;
    transform: skewX(10deg);
    user-select: none;
}

.livroTotal #p2 .retMeio1{
    right: -32%;
    background-color: var(--corLivro);
}

.livroTotal #p2 .retMeio2{
    left: -20%;
    background-color: var(--corLivro);
}

.livroTotal .controleN64 {
    position: absolute;
    width: 60%;
    bottom: 10%;
    left: 14%;
    transform: translateZ(4rem) rotateZ(15deg);
    animation: controle64 5s infinite;
    user-select: none;
}

@keyframes controle64{

    0%, 100%{
        left: 14%;
    }

    50%{
        left: 24%;
    }
}

.livroTotal #p2 h4{
    color: var(--verdeTitulo);
    text-align: center;
}

.livroTotal #p2 .sombra {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.3);
    user-select: none;
}

.livroTotal #p2 .verso{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 15%;
    background-color: var(--corLivro);
   
}

.livroTotal .reflexo1, .livroTotal .reflexo2{
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    user-select: none;
}

.livroTotal .reflexo1 .reflexo{
    width: 100%;
    height: 60%;
    background-color: white;
    opacity: 0.2;
    --pInicial: -67%;
    --pFinal: -95%;
    transform: translateX(var(--pInicial)) skewX(45deg);
    animation: reflexoGame 30s infinite;
    user-select: none;
}

.livroTotal .reflexo2 .reflexo{
    width: 100%;
    height: 110%;
    background-color: white;
    opacity: 0.2;
    --pInicial: -130%;
    --pFinal: -67%;
    transform: translateX(var(--pInicial)) skewX(45deg);
    animation: reflexoGame 30s infinite;
    user-select: none;
}

@keyframes reflexoGame{

    0%, 100%{
        transform: translateX(var(--pInicial)) skewX(45deg);
    }

    50%{
        transform: translateX(var(--pFinal)) skewX(45deg); 
    }
}

.livroTotal h4{
    font-size: 2vw;
    color: var(--verdeTitulo);
    transform: translateZ(3rem);
    -webkit-backface-visibility: hidden;
    visibility:visible;
    backface-visibility: hidden;
}

/*pagina 3*/

.livroTotal #p3 .frente {
    background-color: var(--corLivro);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 15%;
}

.livroTotal #p3 h4 {
    color: var(--verdeTitulo);
}

.livroTotal #p3 .verso {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 15%;
    background-color: var(--corLivro);
}

.livroTotal #p4 .frente {
    background-color: var(--corLivro);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 15%;
}

.livroTotal #p4 .verso {
    background-color: var(--corLivro);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 15%;
}

.livroTotal #p5 .frente {
    background-color: var(--corLivro);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 15%;
}

.livroTotal #p5 .verso, .servico .livroTotal #p1 .frente {
    background-image: url(img/Livro/fechar-livro.svg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 15%;
}

/*nossos serviços---*/

.titulo{
    font-size: 2.9rem;
}

/*Cabeçalho*/



/*Tela de serviços*/

.tServicos{
    text-align: center;
    padding: 1.5rem 0;
    background-color: var(--emagrecimentoFundo);
}

.tServicos h1{
    margin: 0.8rem 0;
    color: var(--verdeTitulo);
}

.servicos{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 4%;
    background-color: var(--emagrecimentoFundo);
}

.servicos .ladoTexto{
    width: 45%;
}

.servicos .ladoImagem{
    width: 45%;
    margin: 0 0 0 17%;
}

.servicos.servicosInvertido .ladoImagem{
    margin: 0 0 0 10%;
}

 .servicos.servicosInvertido{
    flex-direction: row-reverse;
    background-color: var(--cardProgramas-cor);
}

.largura70{
    width: 70%;
    animation: largura70 6s infinite;
    
}

@keyframes largura70{
    0%, 100%{
        margin-top: 10%;
    }

    50%{
        margin-left: 17%;
    }
}

.largura80{
    width: 80%;
    
    animation: largura80 5s infinite ;
}

@keyframes largura80{
    0%, 100%{
        o: 13%;
    }

    50%{
        margin-left: -18%;
    }

}

.servicos p{
    margin: 0.4rem 0 0 0;
    font-size: 1.5rem;
}

#clinica{
    color: var(--vermelho);
    font-size: 2.7rem;
}

#pediatrica{
    color: var(--azul);
    font-size: 2.7rem;
}

#comunitaria{
    color: var(--roxo);
    font-size: 2.7rem;
}

#esportiva{
    color: var(--laranja);
    font-size: 2.7rem;
}

#obesidade{
    color: var(--verde);
    font-size: 2.7rem;
}

/*---------imc-------*/

.Calculadora-imc{
    background-color: #677d61;
    display: flex;
    padding: 8rem;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: #fff;
}

.hide{
    display: none !important;
}

.container-imc{
    min-width: 400px;
    min-height: 400px;
    background-color: #1b2c1e;
    border-radius: 15px;
    padding: 2rem;
}

/*-----------------FORMULARIO DO IMC*------------------------*/



#Calc-container img{
    width: 5rem;
}

.imgImc{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.form-inputs{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.form-control{
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-bottom: 1rem;
}

.form-control label{
    font-weight: bold;
    margin-bottom: 0.6rem;
    color: #fff;
}

.form-control input{
    padding: 0.7rem 0.5rem;
    
    font-weight: bold;
    border-radius: 5px;
    outline: none;
    letter-spacing: 2px;
}

.form-control input:focus{
    background-color: #d8d8d8;
}



.action-control{
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    gap: 1rem;
}

#clear-btn, #calc-btn,  #back-btn{
    text-transform: uppercase;
    padding: 1rem 0.5rem;
    background-color: var(--verdeTitulo);
    border: none;
    border-radius: 5px;
    color: #fff ;
    cursor:pointer; /*Aparece o ponteiro do mouse quando passar em cima do botão*/
    opacity: 0.9;
    flex: 1;
}

#clear-btn:hover, #calc-btn:hover, #back-btn:hover{
    opacity: 0.4;
}

.button a:hover{
    opacity: 0.4;
}

#clear-btn{
    border: none;
    border-radius: 5px;
    background-color: #444;
}

    /*Tabela*/

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

#imc-number{
    font-size: 2.4rem;
    margin-bottom: 0.6rem;
}

#imc-info{
    font-size: 1.4rem;
    color: #CCC;
}

#result-container h3{
    margin-top: 1rem;
    color: #DFDFDF; 
}

#imc-table{
    margin: 1.5rem 0;
    font-size: 0.8rem;
}

.table-header{
    font-weight: bold;
    color: #CCC;
}

.table-header, .table-data{
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #444;
}

.table-header h4, .table-data p{
    flex: 1;
}



#back-btn{
    align-self: center;
}

.button{
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    gap: 1rem;
}

.Avaliacao{
    border-radius: 5px;
    text-transform: uppercase;
    background-color: var(--verdeTitulo);
    border: none;
    color: #fff ;
    cursor:pointer; /*Aparece o ponteiro do mouse quando passar em cima do botão*/
    flex: 1;
    text-decoration: none;
}

.Avaliacao:hover{
    opacity: 0.9;
}


.good{
    color: #12db34;
}

.low{
    color: #dbc12d;
}

.medium{
    color: #db612d;
}

.high{
    color: #b80a04;
}

/*Telas de Login*/

.logoform{
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 2rem;
}

.logoform img{
    width: 80%;
}

.cadastro{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: linear-gradient(0deg, rgba(142,153,142,1) 0%, rgba(236,253,236,1) 41%, rgba(237,255,237,1) 100%);
}

.cadastro .ladoImagemCadastro{
    width: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 1rem;
}

.cadastro .paiImg{
    display: flex;
    justify-content: center;
}

.cadastro .ladoImagemCadastro img{
    width: 75%;
}

.cadastro .ladoForm{
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.cadastro .formulario{
    width: 80%;
    background-color: #ffffff;
    border: 1px solid rgb(202, 202, 202);
    box-shadow: 1px 1px 20px 6px rgb(201 201 201);
    padding: 1rem 3rem;
    border-radius: 10px;
}

.mErro{
    color: red;
    display: none;
}


.cadastro label{
    display: block;
    margin-top: 1.4rem;
    color: black;
}

.cadastro input{
    color: black;
    font-size: 14px;
    width: 100%;
    padding: 0.6rem 0.3rem;
    border-radius: 12px;
    outline: none;
    border: 1px solid black;
    letter-spacing: 1px;
    background-color: rgb(230, 230, 230);
    transition: all 0.5s;
}



.cadastro input:hover{
    background-color: #f3f3f3;
}

.cadastro input:focus{
    border: 1px solid var(--verde);
    background-color: white;
}

.botoesCadastro{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.botao1, .botao2, .btnLogar{
    font-size: 14px;
    color: black;
    width: 70%;
    padding: 0.5rem;
    border-radius: 16px;
    outline: none;
    border: 1px solid black;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.botao1, .btnLogar{
    margin-top: 3rem;
    margin-bottom: 1rem;
    background-color: #037e03;
    color: white;
}
.botao2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.botao2 img{
    width: 1.5rem;
}

.P1{
    font-size: 1rem;
}

.formulario h1{
    font-size: 2.2rem;
}

.botoesCadastro a{
    color: #0055d4;
    text-decoration: none;
}

.senhaForm a {
    text-decoration: none;
    color: #0055d4;
    margin-top: 4px;
    font-size: 0.9rem;
}

.senhaForm{
    display: flex;
    justify-content: flex-end;
}

input.error, textarea.error, select.error {
    border: 2px solid red;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

.mErro {
    color: red;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

/*barra acessibilidade*/

.barra-acessibilidade{
    width: 360px;
    height: 100%;
    display: block !important;
    border: none !important;
    background-color: #fff;
    max-height: unset !important;
    overflow: unset !important;
    
}

.barra-acessibilidade{
    width: 100%;
    max-width: 525px;
}

#idn-menu{
    position: fixed;
    top: 0;
    margin: 0;
    padding: 0;
    z-index: 100000;
    visibility: visible;

}

#idn-menu{
    left: -36rem;
    right: auto;
    transition: left 1s;
    background-color: #c0beae;
   
}

.header-barra{
    height: 98px;
    display: block;
    position: relative;
    background-color: #c0beae;
    margin-bottom: 3rem;
}

.organizar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    bottom: 6rem;
}

.img-acessibilidade1{
    height: 100%;
    width: 100%;
}

.img-acessibilidade2{
    display: none;
}

.header-barra button{
    display: inline-block;
    cursor: pointer;
    overflow: initial;
    border: none;
    background: 0 0;
    height: 3rem;
    width: 3rem;
}

.header-barra button img{
    height: 100%;
    background-color: transparent;
}



.barra-acessibilidade .header-barra select{
    cursor: pointer;
    border: none;
    line-height: 1rem;
    color: #000000;
    padding: 0 5px !important;
    margin: 0;
    width: 200px;
    min-width: auto;
    height: 1.3rem;
    background: linear-gradient(45deg, #36344d 0%, #4e4c5e 100%) !important;
    text-align: left;
    font-size: 14px;
    margin-left: 1rem;
    border-radius: 5px;
}

.h2-acessibilidade{
    display: block;
    text-align: center;
    position: absolute;
    top: 55px;
    left: 191px;
    color: #fff;
    text-align: center;
}

.barra-acessibilidade .corpo-barra{
    padding: 0 15px 30px 15px;
}

.card-barra{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 19px;
    
}

.barra-acessibilidade .card-barra button{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100px;
    position: relative;
    overflow: hidden;
    width: 100%;
    background:  0 0;
    text-align: center;
    padding: 4px 2px;
    cursor: pointer;
    max-width: initial;
    border: 1px solid #ddddea;
    border-radius: 13px;
}


.footer-barra{
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    background-color: rgb(18, 18, 18);
    z-index: 100;
}

.footer-barra .btnDesligar-barra{
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    text-align: center;
    height: 3.125rem;
    
}

.footer-barra .btnDesligar-barra button{
    background:  0 0;
    border: none;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    
}

.footer-barra2{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: rgba(0, 0, 0, .2);
    height: 35px;
    color: #fff;
    
}


.barra-acessibilidade .card-barra button img{
    height: 5rem;
}

#alteraCorDark{  
    display: flex;
    justify-content: center;
    align-items: center;
}



#alteraCorDark img:last-child{
    display: none;
}



#alteraCorDark img:first-child{
    display: none;
}

#alteraCorDark img:first-child{
    display: block;
}


.vLibras-barra{
    display: none;
}



.AumentarDiminuir-zoom img:first-child{
    display: block;
}

.AumentarDiminuir-zoom img:last-child{
    display: none;
}

.AumentarDiminuir-zoom:last-child{
    display: block;
}

.tooltip {
    background-color: rgba(0, 0, 0, 0.7); /* Fundo escuro semi-transparente */
    color: white; /* Texto branco */
    padding: 5px 10px; /* Espaçamento */
    border-radius: 5px; /* Bordas arredondadas */
    position: absolute; /* Posição absoluta */
    z-index: 1000; /* Certifica-se que a tooltip fica acima de outros elementos */
}



.ler-imagemAlt img:first-child{
    display: block;
}

.ler-imagemAlt img:last-child{
    display: none;
}

#destacar-links img:first-child{
    display: block;
}

#destacar-links img:last-child{
    display: none;
}


.btn-acessibilidade{
    position: fixed;
    padding: 15px;
    left: 0;
    bottom: 0;
    z-index: 10;

}

.btn-acessibilidade button{
    cursor: pointer;
    background: transparent;
    border: none;
    
    padding: 1rem;
    height: 5rem;
    width: 6rem;
    
    
}

.btn-acessibilidade button img{
    height: 4rem;
    width: 5rem;
    object-fit: cover;
    border-radius: 100%;
    transition: all 0.5s;
}

.btn-acessibilidade button img:hover{
    height: 4.4rem;
}





 
/*contatos--------------------*/
.Contatos{
    padding: 3rem;
    background-color: rgb(250, 250, 250);
}

.txtContato{
    margin: 0.7rem 0 3rem 0;
    text-align: center;
    font-size: 1.3rem;
}

.Contatos h2{
    text-align: center;
    font-size: 2.5rem;
    color: #037e03;
}

.formularioContato form{
    display: flex;
    flex-direction: column;
}

.formularioContato form input, .formularioContato form textarea, .formularioContato form select, .formularioContato form option {
    padding: 1rem 0.9rem 0.8rem 0.9rem;
    letter-spacing: 1px;
    background-color: rgb(250, 250, 250);
    border: 1px solid rgb(168, 168, 168);
    border-radius: 10px;
    outline: none;
    width: 100%;
    font-size: 1.1rem;
    transition: all .5s;
}

.formularioContato form input:focus, .formularioContato form textarea:focus, .formularioContato form select:focus, .formularioContato form option:focus{
    border: 1px solid rgb(4, 134, 0) ;
    box-shadow: 4px 4px 10px #c8c7c7;   
}


.formularioContato .span-required{
    color: red;
    display: none;
}



  



.form-paiBtn{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.form-paiBtn button{
    font-size: 1.1rem;
    width: auto;
    color: #fff;
    border: none;
    border-radius: 5px;
    outline: none;
    padding: 0.4rem;
    background-color: rgb(4, 134, 0) ;
    transition: 0.5s;
    cursor: pointer;
}

.form-paiBtn button:hover{
    background-color: red;
}





.formularioContato form textarea{
    resize: none;
    height: 9rem;
}

.linhaFormulario{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1rem;
    position: relative;
    margin-bottom: 1.6rem;
}

.linhaFormulario label::after{
    content: ' *';
    color: red;
}

.linhaFormulario label{
    color: rgb(4, 134, 0);
    position: absolute;
    left: 0.8rem;
    top: -0.7rem;
    font-size: 1.2rem;
    padding: 0 0.4rem;
    background-color: white;
    background-color: rgb(250, 250, 250);
}




/*tela de exames-----------*/
.campo{
    display: flex;
    margin-top: 0.9rem;
}

.campo label{
margin: 0.5rem 0.5rem 0 0;
width: 6rem;
}

.campo input[type="text"] {
width: 80%;
padding: 8px 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.3s;
}

.vr{
display: flex;
flex-direction: column  ;
width: 40%;
}


.corpo-exames{
background-color: rgb(255, 255, 255);
padding: 1.5rem;
border-radius: 10px;
margin: 0 1rem;
}

.tExame{
margin: 1rem;
color: #000000;
}

.tExame2{
color: #000000;
font-size: 2rem;
margin-top: 3rem;
}

.pExame{
color: rgb(0, 88, 13);
text-align: end;
}

span{
color: rgb(0, 88, 13);
}

.campoOB input{
width: 30%;
padding: 8px 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.3s;
}



.campoOB{
margin-top: 1rem;
}

.btn-exames{
width: 5rem;
background-color: green;
border: none;
padding: 0.4rem;
font-size: 1.2rem;
border-radius: 5px;
color: white;
transition: all 0.5s;
margin-top: 1rem;
}

.btn-exames:hover{
color: black
}


  /*Cardapio personalizado---------*/

  .formCardapio .e{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 24rem;
    object-fit: cover;
}
.textoTcardapio{
    width: 100%;
    position: absolute;
    top: 15rem;

}

  .tituloCardapio{
    font-size: 3.5rem;
    font-weight: 500;
    color: white;
  }

  .pCardapio{
    color: #00ff00;
    font-size: 1.5rem;
  }
  .bannerCardapio .imagemCardapio{
    width: 100%;
    height: 100svh;
    object-fit: cover;
    z-index: -2;
    
  }

  .bannerCardapio{
    position: relative;
    width: 100%;
    height: 100%;
    transition: opacity 1s ease; 
    
  }

  .bannerCardapio img {
    transition: transform 0.3s ease;
}

.Cardapio-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -35rem;
    
}

.CardapioPersonalizado.visible {
    top: 0; /* Move para o topo da tela */
    opacity: 1; /* Torna visível */
    pointer-events: auto;
    /* Deixa de usar position absolute para seguir o fluxo normal da página */
}


/* @keyframes animaCardapio {
    0% {
        top: 50vh; 
        left: 50%;
    }

    25% {
        top: 45vh; 
        left: 48%; 
    }

    50% {
        top: 50vh;
        left: 39%;
    }

    75% {
        top: 40vh; 
        left: 55%; 
    }

    95% {
        top: 50vh; 
        left: 55%;
    }

    100% {
        top: 50vh;
        left: 50%; 
    }
} */


  .bannerCardapio .Cardapio-icone {
    position: absolute;
    cursor: pointer;

    height: 14rem;
    transition: opacity 0.5s ease; /* Transição rápida de opacidade */
  
    
}

.bannerCardapio .Cardapio-icone img{
    height: 100%;
}

.bannerCardapio.zoom-background img {
    transform: scale(1.1); /* Aplica o zoom ao plano de fundo */
    opacity: 0; /* Faz o plano de fundo desaparecer */
    transition: transform 0.7s ease, opacity 1.5s ease; /* Transição suave para o fundo */
}

.bannerCardapio.hidden {
    opacity: 0; /* Torna o banner invisível */
    pointer-events: none; /* Desabilita a interação com o banner */
}







.balloon {
    position: absolute;
    left: 52%;
    top: 60%;
    width: 15rem;
    padding: 10px 15px; /* Espaçamento interno */
    background-color: #f0f0f0; /* Cor do balão */
    border: 2px solid #ccc; /* Bordas do balão */
    border-radius: 10px; /* Bordas arredondadas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidade */
    color: #333; /* Cor do texto */
    font-size: 14px; /* Tamanho do texto */
    transition: opacity 0.5s ease; /* Transição rápida de opacidade */
    opacity: 1; /* Inicialmente visível */

}


.balloon::after {
    content: '';
    position: absolute;
    bottom: -10px; /* Posição da ponta */
    left: 20px; /* Ajuste horizontal da ponta */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px; /* Tamanho do triângulo */
    border-color: #f0f0f0 transparent transparent transparent; /* Cor da ponta */
}

.balloon::before {
    content: '';
    position: absolute;
    bottom: -12px; /* Posição da borda da ponta */
    left: 18px; /* Ajuste horizontal da borda */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12px 0 12px; /* Tamanho do triângulo */
    border-color: #ccc transparent transparent transparent; /* Cor da borda da ponta */
}

.CardapioPersonalizado {
    position: absolute;
    top: 100%; /* Inicialmente fora da tela */
    left: 50%;
    transform: translateX(-50%);
    height: 20rem;
    background-color: rgba(0, 0, 0, 0.8);
    
    text-align: center;
    width: 100%;
    opacity: 0; /* Inicialmente invisível */
    transition: opacity 0.5s ease, top 0.5s ease; /* Transições mais rápidas de opacidade e posição */
}

.formCardapio{
    position: relative;
    background: rgb(115,98,66);
background: linear-gradient(90deg, rgba(115,98,66,1) 0%, rgba(150,124,101,1) 35%, rgba(204,156,106,1) 100%)
}

.formCardapio form{
    flex-direction: column;
    display: flex;
}

.formCardapio form input[type="text"], .formCardapio form input[type="number"], .formCardapio form input[type="date"]{
    padding: 0.4rem 0.4rem;
    letter-spacing: 1px;
    background-color: rgb(250, 250, 250);
    border: 1px solid rgb(168, 168, 168);
    border-radius: 8px;
    outline: none;
    width: 100%;
    font-size: 1.1rem;
    transition: all .5s;
}

.formCardapio form .labelInput{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 1.5rem;
    font-size: 1.4rem;
}

.nomeEdata{
    display: flex;
    align-items: center;
    gap: 2rem;
}

.campoNome{
    width: 70%;
}

.campoData{
    width: 30%;
}

.radioB{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

.rd{
    width: 1rem;
    height: 1rem;
}

.labelM, .labelF{
    width: 4rem;
    font-size: 1.3rem;
}

.fundoForm-1{
        z-index: 1;
        background-color: #ffffff;
        padding: 1rem;
        margin: 24rem 0.5rem 2rem 0.5rem;
        border-radius: 0 0 10px 10px;
}

.labelOpt{
    font-size: 1.3rem;
    font-weight: 400;
}

.botaoDeOpcao{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1rem;
    border: 1px solid rgb(170, 170, 170);
    border-radius: 10px;
    padding: 1rem;
    background-color: #eeeeee;
}
 /* Estilo básico para os radio buttons */
.botaoDeOpcao input[type="radio"] {
    display: none;  /* Esconde os radio buttons padrão */
}

/* Estilo do "X" quando o botão de opção for marcado */
.botaoDeOpcao input[type="radio"]:checked + label::before {
    content: "(X)";  /* Exibe o "X" quando selecionado */
    font-size: 24px;
    color: red;
    display: inline-block;
    margin-right: 10px;
}

/* Estilo do "O" quando o botão de opção NÃO for marcado */
.botaoDeOpcao input[type="radio"]:not(:checked) + label::before {
    content: "(  )";  /* Exibe o "O" quando não selecionado */
    font-size: 24px;
    color: #999;
    font-weight: bold;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
}

.formSimNao{
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.linha{
    width: 100%;
    border: 1px solid rgb(104, 104, 104);
    margin-bottom: 1rem;
}


/* Oculta o campo extra por padrão */
.botaoDeOpcao .campo-extra {
    display: none;
    margin-bottom: 1rem;
}

.Peso, .Peso-chegar{
    background-color: #9ecc32;
    width: 40%;
    border-radius: 10px;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 32px;
}

.selectCardapio{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    padding: 0.3rem;
    font-size: 1rem;
    border-radius: 8px;
}


.formCardapio form span{
    font-size: 2rem;
}


.CardapioPersonalizado .Peso{
    padding: 2rem;
}

.cardPeso{
    display: flex;
    justify-content: space-between;
    padding: 0 10%;
    margin-bottom: 3rem;
}

.character{
    width: 100%;
    margin: 1rem 0rem 1rem 0rem;
    transition: all 0.3s ease;
}

.character img{
    width: 25%;
    margin: auto;
    height: 24rem;
}

.slider-container {
    margin: 0 ;
    text-align: center;
}

input[type="range"] {
    width: 100%;
    margin-top: 20px;
}



.formCardapio input[type="submit"]{
    border-radius: 8px;
    background-color: #02aa02;
    color: rgb(255, 255, 255);
    border: none;
    font-size: 1.3rem;
    padding: 0.5rem;
    transition: all 0.5s;
    border: 1px solid #006b00;
    cursor: pointer;
}

.formCardapio input[type="submit"]:hover{
    background-color: #008600;
    border-radius: 25px;
    font-size: 1.4rem;
}

/* Define a animação para o livro */
@keyframes aparecerDoCéu {
    0% {
        transform: translateY(-100vh); /* Inicia acima da tela */
        opacity: 0; /* Inicialmente invisível */
    }
    100% {
        transform: translateY(0); /* Finaliza na posição original */
        opacity: 1; /* Fica totalmente visível */
    }
}

/* Classe que será aplicada ao livro */
#livro-cardapio {
    
    animation: aparecerDoCéu 1s ease-out forwards; /* Aplica a animação com duração de 1 segundo */
}




@keyframes sairParaOCéu {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100vh);
        opacity: 0;
    }
}



/* footer da tela de CardapioPersonalizado */

.faleConosco{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo{
    display: flex;
    align-items: flex-start;
}



@media screen and (max-width:1300px) {
    .livro{
        padding: 1rem;
        width: 100%;
    }

    .livroTotal p {
        font-size: 2vw;
    }

    .livroTotal h4 {
        font-size: 3.5vw;
    }

    .livroTotal .setaDireita *, .livroTotal .setaEsquerda *{
        stroke-width: 4vw;
    } 
      
    
}


@media screen and (max-width: 1200px) {
    .planos{
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
    height: 100%;
    margin: auto;
    max-width: 75rem;
   
    }

    .depo{
    width: 40%;
    
    }


    .cardEgrafico{
        gap: 2rem;
    }

    .imagem-grafico{
        height: 40rem;
        width: 30rem;
    }

    .formulario{
        width: 90%;
    }

    .cadastro .ladoImagemCadastro img {
        width: 90%;
    }

}








@media screen and ( max-width:950px) {


    .slide .imgBannerServicos{
        display: none;
    }

    .slide .imgBannerServicos2{
        display: flex;
    }








    /*Index------------------*/
    
    header img{
        height: 80%;
    }

    header .hamburgue{
        display: flex;
        z-index: 100;
        
    }

    header nav ul{
            flex-direction: column;
            gap: 2;
            position: fixed;
            width: 100%;
            top: 0;
            /* left: 0; */
            right: -100% ;
            padding: 1rem;
            background-color: #5a5555;
            color: #000;
            bottom: 0;
            transition: right 1s;   
            font-size: 24px;  
            z-index: 100;
           
    }

    .drop-menu{
        
        background: linear-gradient(135deg, rgb(48, 48, 48), rgba(0, 0, 0, 0.87));
    }

     li a{
        padding: 2rem;
        
    }

    .login-cadastro img{
        display: none;
    }

    
    .plano{
        grid-template-columns: repeat(2, 1fr);
        
    }

    .planos h1{
        font-size: 2.12rem;
    }

    

    .cServico{
        width: calc(51% - 1rem);
    }

    .titulo{
        font-size: 2.12rem;
    }

    .depo{
        width: 80%;
        padding: 1rem;
    }

    .depoimentos h2{
        font-size: 2rem;
    }

    



    /*livro-----------------*/
    
     .livro{
        padding: 1rem;
        width: 100%;
    }

    .livroTotal p {
        font-size: 2vw;
    }

    .livroTotal h4 {
        font-size: 3.5vw;
    }

    .livroTotal .setaDireita *, .livroTotal .setaEsquerda *{
        stroke-width: 4vw;
    }   

    /*serviços--------*/

    .titulo{
        font-size: 2.7rem;
    }

    .servicos, .servicos.servicosInvertido{
        flex-direction: column-reverse;
        padding: 3rem 5%;
    }

    .servicos .ladoImagem, .servicos.servicosInvertido .ladoImagem{
        width: 80%;
    }

    .servicos.servicosInvertido .ladoImagem{
        margin: 0 0 0 25%;
    }

    .servicos .ladoImagem{
        margin: 0 0 0 25%;
    }

    .servicos .ladoTexto{
        width: 100%;
    }


    .cadastro .ladoImagemCadastro{
        display: none;
    }

    .cadastro .ladoForm{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .formulario{
        width: 80%;
    }    

    input{
        width: 100%;
    }

    .titulo-sobre h1{
        font-size: 2.5rem;
    }

    .card-programas-layout{
        grid-template-columns: repeat(1, 1fr);
        width: 80%;
        flex-direction: row;
     
    }

    .programas-emagrecimento h2 {
        font-size: 2rem;
    }

    
    .cardEgrafico{
        flex-direction: column-reverse;

    }

    .banner .texto2{
        right: 1rem;
    }

    .banner .texto2 .tituloPrincipal-servicos{
        font-size: 2.5rem;
    }

    .banner .Textos{
        margin-left: 2rem;
        width: 91%;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    /* CardapioPersonalizado */
    
    .cardPeso{
        flex-direction: column;
        padding: 0;
    }
    
    .Peso, .Peso-chegar{
        width: 100%;
    }

    .banner .Texto-sobre{
        margin-left: -1rem;
        width: 91%;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .banner .Texto-exame, .banner .Texto-contatos{
       justify-content: center;
       display: flex;
       align-items: center;
       text-align: center;
       width: 91%;
       margin-left: -1rem;
    }

    

    
    
}

@media screen and ( max-width:650px){

    .tituloCardapio{
        font-size: 3.1rem;
        font-weight: 500;
        color: white;
      }
    
      .pCardapio{
        color: #00ff00;
        font-size: 1.3rem;
      }

    .programas{
        padding-inline-start: 0rem;
        padding-inline-end: 0rem;
    }

    .livroTotal p {
        font-size: 1.5vw;
    }

    .livroTotal h4 {
        font-size: 3vw;
    }

    .livroTotal .setaDireita *, .livroTotal .setaEsquerda *{
        stroke-width: 4vw;
    }   

    .titulo{
        font-size: 2.5rem;
    }

    h3{
        font-size: 2rem;
    }
    
    p{
        font-size: 1rem;
    }

    .titulo-sobre h1{
        font-size: 2rem;
    }

    .planos h2{
        font-size: 2rem;
    }

    .programas h2{
        font-size: 2rem;
    }

    .barra-acessibilidade{
        width: 100%;
        max-width: 325px;
    }

    .h2-acessibilidade {
        display: block;
        text-align: center;
        position: absolute;
        top: 70px;
        left: 110px;
       font-size: 19px;
    }

   

    .programas-emagrecimento h2 {
        font-size: 1.5rem;
    }

    .img-acessibilidade2{
        display: block;
        height: 100%;
        width: 100%;
    }

    .img-acessibilidade1{
        display: none;
    }
    
    
    .formulario{
        width: 70%;
    }

    .formulario h1{
        font-size: 2rem;
    }
    
    .botao1, .botao2{
        font-size: 0.9rem;
    }

    .banner .texto2{
        width: 88%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        top: 0.5rem;
        right: 1.5rem;
    }

    .banner .texto2 .tituloPrincipal-servicos{
        font-size: 2rem;
        text-align: center;
    }



    .Textos .titulo-principal{
        font-size: 2.2rem;
    }

    .banner .Textos{
        margin-left: 1.5rem;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .botaoBanner1,
    .botaoBanner2,
    .botaoBanner3, 
    .botaoBanner4,
    .botaoBanner5{
        font-size: 1rem;
    }

    .tExame{
        font-size: 1.8rem;
    }   

    .tExame2{
        font-size: 1.8rem;
    }

    .banner .Texto-sobre{
        font-size: 2.2rem;
    }

    .banner .Texto-exame h1, .banner .Texto-contatos h1{
        font-size: 2.2rem;
        
    }

}




@media screen and ( max-width:500px) {

    .tituloCardapio{
        font-size: 2.7rem;
        font-weight: 500;
        color: white;
      }
    
      .pCardapio{
        color: #00ff00;
        font-size: 1.1rem;
      }

    .programas{
        padding-inline-start: 1rem;
        padding-inline-end: 1rem;
    }

    .programas h2 {
        font-size: 2rem;
    }

    header img{
        height: 60%;
    }

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

    .cServico{
        width: calc(88% - 1rem);
    }

    .titulo{
        font-size: 2rem;
    }

    .depo{
        width: 100%;
     
    }
    
    .container{
        min-width: 100px
    }

    #Calc-container img{
        width: 3rem;
    }

    .conteudo{
        width: 70%;
    }

    .conteudo h1{
        font-size: 1rem;
    }

    .img-contato img{
        width: 20%;
    }
    
    .titulo-sobre h1{
        font-size: 1.5rem;
    }

    .planos h2{
        font-size: 2rem;
        text-align: center;
    }

    .card-programas-layout{
        grid-template-columns: repeat(1, 1fr);
        width: 100%;
        flex-direction: row;
     
    }

    .programas h2{
        font-size: 1.7rem;
    }

    .imagem-grafico{
        height: 30rem;
        width: 20rem;
    }

    .programas-emagrecimento h2 {
        font-size: 1.5rem;
    }

    .card-graficoCima img{
        width: 3rem;
        height: 3rem;
    }


    .cadastro .formulario{
        width: 75%;
        padding: 1rem;
    }

    .balloon {
        width: 10rem;
    }
    
    .banner .Texto-sobre{
        font-size: 1rem;
    }

    .banner .Texto-exame h1, .banner .Texto-contatos h1{
        font-size: 1.5rem;
    }

}


@media screen and (max-width: 400px){

    .titulo{
        font-size: 2.3rem;
    }

    h3{
        font-size: 1.8rem;
    }
    
    p{
        font-size: 1rem;
    }

    .conteudo h1{
        font-size: 0.7rem;
    }

    .img-contato img{
        width: 10%;
    }

    .titulo-sobre h1{
        font-size: 1.2rem;
    }

    

    .planos h2{
        font-size: 1.5rem;
    }

    .programas h2{
        font-size: 1.3rem;
    }

    .card-programas-layout{
        grid-template-columns: repeat(1, 1fr);
        width: 100%;
        flex-direction: row;
     
    }

    .card-programas .card-baixo h5{
        font-size: 1rem;
        
    }

    .imagem-grafico{
        height: 30rem;
        width: 14rem;
    }

    .programas-emagrecimento h2 {
        font-size: 1rem;
    }

    .h2-acessibilidade {
        display: block;
        text-align: center;
        position: absolute;
        top: 70px;
        left: 99px;
       font-size: 17px;
    }

    .formulario{
        width: 80%;
    }

    .formulario h1{
        font-size: 2rem;
    }
    
    .botao1, .botao2{
        font-size: 0.8rem;
    }

    .botaoBanner1,
    .botaoBanner2,
    .botaoBanner3, 
    .botaoBanner4,
    .botaoBanner5{
        font-size: 0.6rem;
    }

    .balloon {
        width: 8rem;
    }

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

    input{
        width: 100%;
    }

    .vr{
        width: 100%;
    }

    label{
        width: 100%;
    }

    .campoOB input{
        width: 100%;
    }

    .tExame{
        font-size: 1.4rem;
    }   

    .tExame2{
        font-size: 1.4rem;
    }

}