@charset "utf-8";
/* ====================== FIM CONFIGURAÇÃO UNICODE ===================== */
/* ========================= FONTES IMPORTADAS ========================= */
@import url(https://fonts.googleapis.com/css?family=Nunito:200,300,regular,500,600,700,800,900,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
/* ======================= FIM FONTES IMPORTADAS ======================= */
/* ======================= CONFIGURAÇÕES GLOBAIS ======================= */
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}
body {
    width: 100vw!important;
    overflow-x: hidden;
}
/* ===================== FIM CONFIGURAÇÕES GLOBAIS ===================== */
/* =============================== ROOT ================================ */
:root {
    /* Variáveis da cor azul */
    --azure: #E8F1F3;
    --azul: #0346F2;
    --carolina_blue: #1C9CD7;
    --celadon_blue: #247BA0;
    --sapphire_blue: #014990;
    --prussian_blue: #002F5B;
    --índigo_blue: #001030;
    --space: #010b1c;
    /* Variável da cor vermelha */
    --vermelho: #DA251C;
    --tomate: #FF814D;
    /* Variáveis da cor verde */
    --verde-azulado: #009a9f;
    --verde: #30EA66;
    --laranja: #F28116;
    --amarelo: #FCBF02;
    --cinza-clarinho: #F8F8F8;
    --azul-claro: #6E93f7;
    --azul-claro2: #4070F4;
    --winter: #A1E1F6;
    /* Variável da cor cinza */
    --cinza: #424242;
    --cinza-claro: #F2F2F2;
    --cinza-medio: #A9A9A9;
    --cinza-dark: #333333;
    --cinza-escuro: #171717;
    /* Variável da cor roxa */
    --roxo: #431096;
    --roxo2: #26003E;
    /* Variável da cor rosa */
    --rosa: #EE2C68;
    /* Variável da cor marrom */
    --marrom: #C97F66;
    /* Variáveis das fontes */
    --Nunito: 'Nunito', sans-serif;
}
/* ============================= FIM ROOT ============================== */
/* =============================== BLOG ================================ */
.blog {
    width: 100vw;
    margin: 0 auto;
    height: 50vh;
}
.banner-parallax {
    display: flex;
    height: 50vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* cria o efeito parallax */
}
.banner-parallax.first {
    background-image: url('../img/reabilitação.png');
}
.banner-parallax.second {
    background-image: url('../img/Banner\ -\ Acompanhamento.png');
}
.banner-parallax.third {
    background-image: url('../img/Banner\ -\ Intelectual.png');
}
.banner-parallax.fourth {
    background-image: url('../img/Banner\ -\ Alzheimer.png');
}
.banner-parallax.fifth {
    background-image: url('../img/Item-5.png');
}
.banner-parallax.sixth {
    background-image: url('../img/Banner\ -\ Demencia.png');
}
.banner-parallax.seventh {
    background-image: url('../img/Banner\ -\ Distúrbios.png');
}
.banner-parallax.eighth {
    background-image: url('../img/Banner\ -\ Paralisia.png');
}
.banner-parallax.nineth {
    background-image: url('../img/Banner\ -\ Cuidados.png');
}
@media (max-width: 720px) {
    .banner-parallax.second {
        background-image: url('../img/paciente.jpg');
    }
    .banner-parallax.third {
        background-image: url('../img/intelectual.jpg');
        background-position: 80% 20%;
    }
    .banner-parallax.fourth {
        background-image: url('../img/Banner\ -\ Alzheimer.png');
        background-position: 80% 20%;
    }
    .banner-parallax.eighth {
        background-position: 30% 20%;
    }
    .banner-parallax.nineth {
        background-position: 60% 0%;
    }
}
.banner-parallax::before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
    background: rgba(0, 0, 0, 0.258);
}
.texto-blog {
    z-index: 2;
    position: absolute;
    top: 50%;
}
.texto-blog h1 {
    font: 700 40px var(--Nunito);
    color: white;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.144);
    text-align: center;
}
/* ============================= FIM BLOG ============================= */
main {
    position: relative;
    margin: 50px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    column-gap: 50px;
    width: 100%;
}
@media only screen and (min-width: 1300px) {
    .main {
        max-width: 1240px;
    }
}
@media only screen and (min-width: 1300px) {
    .main {
        max-width: 1240px;
        width: 100%;
    }
}
@media (min-width: 1200px) {
    .main {
        max-width: 1140px;
    }
}
@media (min-width: 992px) {
    .main {
        max-width: 960px;
    }
    .blog-item {
        max-width: 50%;
    }
}
@media (min-width: 768px) {
    .main {
        max-width: 720px;
    }
}
@media (min-width: 576px) {
    .main {
        max-width: 540px;
    }
}
/* ============================= BLOG ITEM ============================= */
.blog-item {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}
.blog-item .container {
    position: relative;
    margin-bottom: 48px;
    background: #fff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    border-radius: 15px;
    padding: 15px;
    transition: 0.3s;
}
.blog-item .texto-item {
    padding: 10px 15px 20px;
}
@media (max-width:720px) {
    .blog-item .texto-item h1,
    .blog-item .texto-item h2,
    h3 {
        font: 700 18px var(--Nunito) !important;
    }
}
.blog-item .texto-item h1 {
    font: 700 26px var(--Nunito);
    margin: 4px 0 10px;
    line-height: 35px;
}
.blog-item .data-item,
.icone-data {
    color: var(--space);
    margin-bottom: 22px;
    font: 400 13px var(--Nunito);
}
.blog-item .data-item>span:not(:last-child) {
    margin-right: 12px;
}
.icone-data i {
    margin-right: 3px;
    color: var(--vermelho);
}
.blog-item p, .blog-item ul {
    font: 400 16px var(--Nunito);
    line-height: 1.7rem;
    color: var(--cinza);
    margin-bottom: 20px;
}
.blog-item ul {
    padding-left: 30px;
}
.blog-item ul li {
    margin-bottom: 8px;
    list-style: disc;
}
.blog-item .texto-item h2 {
    font: 700 22px var(--Nunito);
    margin-bottom: 15px;
    color: var(--space);
}
.blog-item .texto-item h3 {
    font: 700 20px var(--Nunito);
    margin-bottom: 15px;
    color: var(--space);
}
.blog-item .texto-item .container-img {
    width: 100%;
    height: 200px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.092);
    margin-bottom: 30px;
}
.blog-item .texto-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 .blog-item .destaque{
    font: 900 25px var(--Nunito);
    background-color: var(--rosa);
    color: white;
    text-align: center;
    padding: 15px 10px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
 }
 @media (max-width:520px){
    .blog-item .destaque{
        font: 900 20px var(--Nunito);
    }
 }
.blog-item .blog-button {
    display: inline-block;
    margin-top: 20px;
    font: 700 15px var(--Nunito);
    transition: .5s;
}
.blog-item .blog-button i {
    transition: .5s;
    margin-left: 5px;
}
.blog-item .blog-button span:hover {
    color: var(--vermelho);
}
.blog-item .blog-button:hover i {
    padding-left: 10px;
}
.blog-item .goBack{
    position: absolute;
    bottom: 15px; right: 15px;
    border: none;
    border: 1px solid transparent;
    background-color: var(--vermelho);
    padding: 8px 12px;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    transition: .4s;
}
.blog-item .goBack:hover{
    border: 1px solid var(--vermelho);
    background-color: transparent;
    color: var(--vermelho);
}
.swiper {
    width: 100%;
    height: auto;
    padding: 0 15px;
    box-sizing: border-box;
    margin-bottom: 20px;
}
@media (max-width:720px) {
    .swiper {
        width: 90%;
    }
    .explorar {
        text-align: center;
    }
    .swiper-slide {
        height: 180px !important;
    }
}
.swiper-slide {
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
    width: 210px;
    height: 150px;
}
.swiper-slide a img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swiper-slide span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #00000094 100%);
    font: 400 16px var(--Nunito);
    color: white;
    text-shadow: 0 0 10px black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    padding: 0 10px 20px;
    box-sizing: border-box;
}
/* =========================== FIM BLOG ITEM =========================== */
/* =============================== POSTS =============================== */
section.posts {
    padding: 40px 30px 40px;
    margin-bottom: 48px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    height: fit-content;
    position: sticky;
    top: 100px;
    max-width: 360px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}
section.posts .container-posts {
    display: flex;
    align-items: start;
    justify-content: center;
}
section.posts h2 {
    display: inline-block;
    font: 600 20px var(--Nunito);
    color: var(--space);
}
section.posts .hr {
    display: block;
    width: 100px;
    height: 2px;
    background-color: var(--vermelho);
    margin: 8px 0 40px;
}
section.posts .texto-post p {
    font: 500 15px var(--Nunito);
    transition: .4s;
    color: var(--space);
    margin-bottom: 5px;
}
section.posts .texto-post p:hover {
    color: var(--vermelho);
}
section.posts .img-post {
    width: 150px;
    height: 45px;
    border-radius: 5px;
    overflow: hidden;
    padding-right: 15px;
}
section.posts .img-post img {
    max-width: 100%;
    height: auto;
    overflow-clip-margin: content-box;
    overflow: clip;
}
aside .texto-aside {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
    text-align: center;
}
aside .container-aside {
    width: 100%;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
}
aside .container-aside img {
    width: 100px;
    height: 100px;
}
aside span {
    font: 700 15px var(--Nunito);
}
aside button {
    color: white;
    text-shadow: black;
    background-color: var(--amarelo);
    padding: 15px 20px;
    border: 1px solid transparent;
    transition: all .5s;
    font: 400 14px var(--Nunito);
    letter-spacing: 1px;
    cursor: pointer;
}
aside button:hover {
    background-color: transparent;
    color: var(--amarelo);
    border: 1px solid var(--amarelo);
}
/* ============================= FIM POSTS ============================= */
/* ============================ SCROLL REVEAL ========================== */
.container,
.texto-aside {
    visibility: hidden;
}
/* ========================= FIM SCROLL REVEAL ======================== */