/*  
Theme Name: Shesla Nutri
Theme URI: https://sheslanutri.com.br/
Author: Mustache
Author URI: https://mustache.com.br
*/

*{font-family: "Montserrat", sans-serif;} :root{--verde: #A2A185; --amarelo: #FFAD00; --salmom: #BE6E53; --areia: #AE9985;} html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset, figure {margin: 0; padding: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; } img {max-width: 100%; height: auto; } @media screen {img { width: auto;} } img.alignleft, img.aligncenter, img.alignright, img.alignnone {margin-bottom: 15px; } .alignleft {float: left; margin-right: 30px; } .alignright {float: right; margin-left: 30px; } .aligncenter {text-align: center; display: block; margin-left: auto; margin-right: auto; } .wp-caption {text-align: center; margin-bottom: 15px; max-width: 100%; } .wp-caption-text {font-style: italic; font-size: 95%; line-height: 120%; margin: 6px 0; } .clearfix:after, .widget li:after, #body:after, #footer:after, footer:after, .pagenav:after, #main-nav:after, .menu:after, .gallery:after, #content:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix, .widget li, #body, #footer, footer, .pagenav, #main-nav, .menu, .gallery, #content{ display: block; zoom: 1; } .clear {clear: both; } .left {float: left; } .right {float: right; } .textleft {text-align: left; } .textright {text-align: right; } .textcenter {text-align: center; } body {color: #000; background: #fff;} a, a:hover {color: #000; text-decoration: none; outline: none; } p {margin: 0; padding: 0;} ul, ol{list-style: none;} li {margin: 0; padding: 0;} h1, h2, h3, h4, h5, h6 {margin: 0px;} h1 {font-size: 2rem; } h2 {font-size: 1.8rem; } h3 {font-size: 1.6rem; } h4 {font-size: 1.4rem; } h5 {font-size: 1.2rem; } h6 {font-size: 1rem; } html{scroll-behavior: smooth;} section{scroll-margin-top: 90px;}

/*Menu */
.header{
    background: var(--verde); 
    width: 100%; 
    z-index: 99999; 
    padding: 30px;
    & .logo{padding: 0;
        & img{margin: 0px auto; display: block; width: auto; height: 60px;}
    }
}

/*Hero*/
.topo{position: relative;
    & img{width: 100%; display: block;}
    & img.onda{position: absolute; width: 100%; bottom: 0}
}

/*Sobre*/
.metodo{
    padding: 0px 15% 80px;
    background: url(images/bgdepoimentos.jpg) bottom center no-repeat;
    background-size: 101%;
    & .intro{ 
        display: flex; 
        flex-direction: row; 
        flex-wrap: wrap; 
        justify-content: space-between; 
        align-items: center;
        gap: 15px; 

    & .foto{
        width: calc(43% - 15px);
    }

    & .textos{
        width: calc(55% - 15px);

        & h2{color: var(--salmom); font-size: clamp(1.4rem, 2.5rem, 3rem); line-height: 1; font-weight: 700; margin: 0}

        & p{font-size: clamp(1rem, 1.1rem, 1.2rem); line-height: 1.5; margin: 15px 0}

        & button{background: var(--verde); padding: 10px 30px; border: 0; outline: none; border-radius: 5px; margin: 20px 0 0; color: #fff; font-weight: 700; display: block; transition: .3s;
            &:hover{background: var(--salmom); }
        }
    }

    & .pilares{width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 80px auto;
        & .bgverde{background: var(--verde) color: #fff;} 
        & .bgamarelo{background: var(--amarelo); color: #5F2816;} 
        & .bgsalmom{background: var(--salmom); color: #fff;} 
        & .bgareia{background: var(--areia); color: #fff;}
        & .pilar{width: calc(33.333% - 20px); padding: 40px; border-radius: 25px;
        
        & h3{font-weight: 600; font-size: clamp(2rem, 6rem, 7rem);}
        & h4{font-weight: 600; font-size: clamp(1rem, 1.1rem, 1.2rem); margin: 5px 0;}
        & p{font-size: clamp(.9rem, 1rem, 1.2rem); line-height: 1.5rem;}

    }
    & button{background: var(--verde); padding: 10px 30px; border: 0; outline: none; border-radius: 5px; margin: 40px auto 0; color: #fff; font-weight: 700; display: block; transition: .3s;
        &:hover{background: var(--salmom); }
    }
    }
            }
    & .dizem{
        & h3{color: var(--salmom); font-size: clamp(1.4rem, 2.5rem, 3rem); line-height: 1.3; font-weight: 700; margin: 0 auto 50px; text-align: center;}

        & button{background: var(--amarelo); padding: 10px 30px; border: 0; outline: none; border-radius: 5px; margin: 60px auto 0; color: #5F2816; font-weight: 700; display: block; transition: .3s;
            &:hover{background: var(--verde); color: #fff;}
        }

        & .depoimentos{display: flex; flex-direction: row; flex-wrap: wrap; gap: 20px;
        
        & .depoimento{
            background: var(--areia);
            color: #fff;
            padding: 50px;
            border-radius: 30px;
            width: calc(50% - 20px);
            font-size: clamp(.9rem, 1rem, 1.1rem);
            line-height: 1.7;
            & p{
                margin: 0;
            }

            & h4{
                font-weight: 600;
                margin: 10px 0 0;

            }
        }
        }

    }
}

/*Pagina*/
.pagina{padding: 100px 10%; min-height: 60vh;} 
.pagina .titulo {margin: 0 auto 20px;color: var(--azul);font-weight: 700; font-size: 3rem;}
.pagina ul{list-style: none; margin: 5px 0px; }
.pagina ul li{margin: 5px 0;}
.pagina img{margin: 15px 0px; display: block; max-width: 100%; width: max-content;}
.pagina p {margin: 15px 0; font-size: 1.2rem; line-height: 2rem; font-weight: 300;}
.pagina a{color: var(--cinza); text-decoration: none;}
.pagina a:hover{color: var(--amarelo); text-decoration: none;}
.pagina strong{color: var(--amarelo); font-weight: 600;}
.pagina blockquote{background: #fbfbfb; padding: 26px 40px 26px 60px; border-radius: 5px; font-weight: 500; border-radius: 10px; font-size: 1.1rem; line-height: 1.8rem; margin: 20px 0px; text-align: left}
.pagina iframe{width: 100%; min-height: 450px; margin: 15px 0px;}
.pagina .wp-block-image figcaption {margin-bottom: 1em; margin-top:0; text-align: center; font-size: .8rem; font-weight: 400; font-style: italic; background: #f6f6f6; padding: 8px 5px; }
.pagina h1, .pagina h2, .pagina h3, .pagina h4, .pagina h5, .pagina h6{color: var(--azul); margin: 15px 0; font-weight: 600;}
.pagina input, .pagina  textarea, .pagina  select{font-weight: 500; padding: 10px 0px 10px; transition: .2s; border: 0; border-bottom: solid 1px #ddd;  width: 100%; background: #fff; }
.pagina textarea {line-height: 150%; transition: .2s; height: 100px;}
.pagina textarea:focus, .pagina input[type=text]:focus{outline: none;}
.pagina input[type=submit] {background: var(--azul); color: #fff; border: none; padding: 10px 70px;  width: auto; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.pagina input[type=submit]:hover{background: var(--amarelo);}
.pagina label{width: 100%; font-size: 1rem; font-weight: 600; color: #555;  }
.pagina input:focus-within{ background: #fff; border-bottom: solid 1px var(--amarelo);}
.pagina input:focus, .pagina select {outline: none; }
.pagina textarea:focus-within{ background: #fff; border-bottom: solid 1px var(--amarelo);}
.pagina input[type=submit]:focus-within{background: var(--azul);  color: #fff; border: none;}
.pagina .wpcf7-response-output { width: 100%!important; border-radius: 5px!important; padding: 20 20px!important; line-height: 1.3rem!important; font-size: 1rem!important; font-weight: 500!important; text-align: center!important; margin: 0!important;}

/*Sobre*/
.sobre{padding: 60px 15%; display: flex; justify-content: space-between; align-items: center; gap: 30px;}
.sobre img{width: calc(45% - 30px); height: auto;}
.sobre .textos{width: calc(55% - 30px);}
.sobre .textos h2{color: var(--salmom); font-size: clamp(2rem, 2.4rem, 3rem); line-height: 1; font-weight: 700; margin: 0 0 5px}
.sobre .textos p{margin: 15px 0; font-size: clamp(.9rem, 1rem, 1.2rem); line-height: 1.7;}
.sobre .textos button{background: var(--verde); padding: 10px 30px; border: 0; outline: none; border-radius: 5px; margin: 30px 0 0; color: #fff; font-weight: 700; display: block; transition: .3s;}
.sobre .textos button:hover{background: var(--salmom); }

/*Pacotes*/
.pacotes{padding: 60px 10%;}
.pacotes h2{text-align: center; font-size: clamp(1.4rem, 2.8rem, 3rem); font-weight: 700; margin: 0 auto 10px;color: var(--salmom);}
.pacotes p.intro{max-width: 100%; width: 800px; font-size: clamp(1rem, 1.2rem, 1.4rem); text-align: center; line-height: 1.5; margin: 0 auto 60px}
.pacotes .lista{display: flex; flex-direction: row; flex-wrap: wrap; gap: 40px;}
.pacotes .lista .pacote{box-shadow: -1px 1px 20px 6px #e1e1e18c; border-radius: 25px; padding: 40px; width: calc(50% - 40px);}
.pacotes .lista .pacote img{max-width: 100%; display: block; width: max-content; margin: 0 0 15px}
.pacotes .lista .pacote h3{font-size: clamp(1.2rem, 1.6rem, 2rem); color: var(--salmom); font-weight: 600; margin: 0 0 10px; line-height: 1.5;}
.pacotes .lista .pacote p{font-size: clamp(1rem, 1rem, 1.4rem); line-height: 1.5rem; margin: 0}
.pacotes button{background: var(--amarelo); padding: 10px 30px; border: 0; outline: none; border-radius: 5px; margin: 60px auto 0; color: #5F2816; font-weight: 700; display: block; transition: .3s;}
.pacotes button:hover{background: var(--verde); color: #fff;}

/*Instagram*/
.instagram{border-bottom: solid 20px var(--salmom);}

/*Rodape*/
.footer {background: var(--verde); width: 100%;font-size: .95rem;  padding: 80px 5%; display: flex; justify-content: space-around; align-items: center;} 
.footer img.logo{width: max-content; max-width: 350px; height: auto; margin: 10px 0}
.footer .redes{width: max-content; display: flex; justify-content: flex-end; align-items: center; gap: 15px; margin: 0 0 0 auto;} 
.footer .redes .item{transition: 0.3s;} 
.footer .redes .item svg{width: 60px;}
.footer .redes .item:hover{filter: brightness(105%);}
.footer img.logo-copy {display: block;margin: 15px auto 0; width: 40px; margin-top: 40px; filter: grayscale(100%) brightness(100);}

@media (max-width: 1600px){
    .metodo { padding: 0px 7% 60px;}
    .sobre { padding: 60px 10% 20px;}
}

@media screen and (max-width: 1024px) {
    .metodo {
        & .intro {
            & .pilares {
                & .pilar {
                    width: 100%;
                    padding: 40px;
                    border-radius: 25px;
                }
            }
        }
    }
    .metodo {
        & .dizem {
            & .depoimentos {
                & .depoimento {
                    width: 100%;
                }
            }
        }
    }
    .pacotes .lista .pacote{width: 100%;}
    .sobre {
        flex-direction: column-reverse;
        flex-wrap: wrap;

        & .textos{
            width: 100%;
        }

        & img {
            width: 70%;
            height: auto;
            margin: 30px 0 0;
        }
    }
    .metodo {
        background-size: auto 350px;
        & .intro {
            & .foto {
                width: 70%;
                margin-bottom: 30px;
            }
            & .textos {
                width: 100%;
            }
        }
    }
 }


@media screen and (max-width: 480px) {
    .metodo {
        & .intro {
            & .foto {
                width: 100%;
                margin-bottom: 15px;
            }
            & .textos {
                & h2 {
                    font-size: 1.6rem;
                }
                & p{
                    font-size: 1rem;
                }
            }
            & .pilares {
                margin: 40px auto;

                & .pilar {
                    width: 100%;
                    padding: 30px;
                    border-radius: 25px;
                }
                & button {
                    margin: 30px auto 0;
            }
        }
    }
    & .dizem{
        & h3{font-size: 1.8rem; margin-bottom: 20px;}
        & .depoimentos {
            & .depoimento {
                padding: 35px;
                & p{
                    font-size: .9rem;
                }
                & h4{
                    font-size: 1.2rem;
                }
            }
        }
        & button{
            margin-top: 20px;
        }
    }
    } 
    .sobre .textos h2{
        font-size: 1.8rem;
        line-height: 1.4;
    }
    .sobre .textos button{
        margin-top: 20px;
    }
    .sobre img{
        width: 100%;
    }
    .pacotes {
        padding: 20px 30px 40px;

        & h2{
            font-size: 1.8rem;
        }

       p.intro{
        font-size: .95rem;
        margin-bottom: 30px;
       }
    }
    .pacotes .lista .pacote h3{
        font-size: 1.2rem; line-height: 1.3; margin: 5px 0
    }
    .footer {
        flex-direction: column; 
        padding: 50px 10%;
        img.logo{width: 100%;}
        & .redes { margin: 20px auto 0;
            &.item svg {
            width: 40px;
        }
        }
    }
}