/* ==============================
   RESET
============================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:#FCFBF8;

    color:#4E554D;

    font-family:'Poppins',sans-serif;

    overflow-x:hidden;

}

/* ==============================
   CORES
============================== */

:root{

    --verde:#66755F;

    --verde2:#8C9B82;

    --verde3:#DCE5D7;

    --bege:#F5F1EA;

    --branco:#FCFBF8;

    --texto:#4E554D;

}

/* ==============================
   CONTAINER
============================== */

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}

/* ==============================
   MENU
============================== */

.menu{

position:fixed;

top:25px;

left:50%;

transform:translateX(-50%);

width:90%;

max-width:1250px;

height:64px;

padding:0 50px;

display:flex;

align-items:center;

justify-content:center;

background:rgba(255,255,255,.08);

backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,.12);

border-radius:60px;

box-shadow:
0 10px 45px rgba(0,0,0,.03);

z-index:999;

transition:.4s;

}

border:1px solid rgba(255,255,255,.55);

box-shadow:0 12px 35px rgba(0,0,0,.05);

.hero{

padding:140px 9% 80px;

}

.menu .botao{

    padding:12px 28px;

    border-radius:999px;

    background:#75865F;

    color:#fff;

    font-size:.88rem;

    font-weight:500;

    box-shadow:0 8px 24px rgba(90,105,70,.18);

    transition:.35s;

}

.menu .botao:hover{

    transform:translateY(-2px);

    background:#667554;

}

.logo img{

height:56px;

width:auto;

transition:.4s;

opacity:.92;

}

.logo img:hover{

transform:rotate(8deg) scale(1.05);

}

.menu ul{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:70px;

    list-style:none;

    margin:0;

    padding:0;

}

.menu a{

    font-size:.95rem;

    font-weight:500;

    letter-spacing:1.2px;

    text-transform:uppercase;

    color:#67765B;
    
    text-decoration:none;

    transition:.35s;

    position:relative;

}

.menu a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:#8A9A7B;

transition:.35s;

border-radius:10px;

}

.menu a:hover::after{

width:100%;

}

.menu a:hover{

    color:var(--verde);

}

/* ==============================
   HERO
============================== */

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:120px 8%;
    position:relative;
    overflow:hidden;
}

.hero::after{
    content:"";
    position:absolute;

    width:650px;
    height:650px;

    right:-180px;
    top:-60px;

    background:url("assets/flower-xl.png") no-repeat center;
    background-size:contain;

    opacity:0.25;   /* só para teste */
    z-index:1;

    border:2px solid red; /* TEMPORÁRIO */
}

/* Manchas orgânicas */

.hero::before{

...
}

.hero .organic-bg{

    position:absolute;

    right:-220px;

    bottom:-180px;

    width:500px;

    height:500px;

    background:#EEF2EB;

    border-radius:44% 56% 38% 62%;

    opacity:.7;

    z-index:-1;

}

.hero::after{

    content:"";

    width:500px;

    height:500px;

    background:#EEF2EB;

    position:absolute;

    right:-220px;

    bottom:-180px;

    border-radius:44% 56% 38% 62%;

    opacity:.7;

    z-index:-1;

}

.hero-texto{

    max-width:560px;

    padding-left:180px;

    position:relative;

    z-index:2;

}

.sobre-subtitulo{

    color:#8B937D;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.82rem;

    margin-bottom:30px;

}

.hero h1{

    font-family:"Cormorant Garamond",serif;

    font-size:6.2rem;

    font-weight:500;

    line-height:.88;

    color:#6A7759;

    margin-bottom:18px;

    letter-spacing:1px;

}

.hero p{

    font-size:19px;

    line-height:34px;

    max-width:520px;

    margin-bottom:45px;

}

.botao{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 38px;

border-radius:999px;

background:#75865F;

color:white;

font-weight:500;

transition:.35s;

box-shadow:

0 14px 28px rgba(90,105,70,.15);

}

.botao:hover{

transform:translateY(-3px);

background:#647352;

}

.botao:hover{

    transform:translateY(-3px);

    background:#586852;

    box-shadow:0 15px 30px rgba(102,117,95,.25);

}

.hero-logo{

    width:40%;

    display:flex;

    justify-content:center;

}

.logo img{

height:42px;

width:auto;

}

@keyframes flutuar{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ==============================
   SEÇÕES
============================== */

section{

    padding:85px 0;

}

#sobre{

    padding-top:70px;

    padding-bottom:40px;

}

h2{

    text-align:center;

    font-family:"Cormorant Garamond";

    color:var(--verde);

    font-size:52px;

    margin-bottom:25px;

}

.linha{

    width:90px;

    height:3px;

    background:var(--verde2);

    margin:0 auto 45px;

    border-radius:10px;

}

/* ==============================
   CARDS
============================== */
.ramo-card{

    width:58px;

    height:58px;

    object-fit:contain;

    display:block;

    margin-bottom:18px;

}

.card{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
    180deg,
    #74866C 0%,
    #66755F 100%
    );

    border-radius:22px;

    padding:28px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    transition:.45s;

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}
.card:hover{

    transform:translateY(-10px);

    box-shadow:0 28px 60px rgba(0,0,0,.08);

}

.card h3{

    color:#FCFBF8;

    font-size:34px;

    font-family:"Cormorant Garamond";

    font-weight:500;

    margin-bottom:8px;

}

.linha-card{

    width:45px;

    height:2px;

    background:#75865F;

    opacity:.25;

    margin-bottom:14px;

}

.card p{

    color:rgba(252,251,248,.88);
    
    line-height:1.65;

    font-size:15px;

}

.card::before{

    content:"";

    position:absolute;

    top:22px;

    right:22px;

    width:40px;

    height:1px;

    background:rgba(255,255,255,.18);

}

/*==================================================
CONTATO
==================================================*/

#contato{

    position:relative;

    padding:110px 9%;

    background:#FCFBF8;

    overflow:hidden;

}



.contato-grid{

    display:grid;

    grid-template-columns:repeat(2,280px);

    justify-content:center;

    gap:40px;

    margin-top:70px;

}

.contato-card{

    height:180px;

    display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

    text-decoration:none;

    background:white;

    border:1px solid rgba(103,117,95,.18);

    border-radius:38px;

    color:#66755F;

    font-family:"Cormorant Garamond";

    font-size:2rem;

    transition:.35s;

    box-shadow:

        0 15px 35px rgba(0,0,0,.05);
        
    position:relative;
    
    overflow:visible;

}

.contato-card h3{

    margin:0 0 8px 0;

    font-family:"Cormorant Garamond", serif;

    font-size:2rem;

    font-weight:500;

    color:#66755F;
    
    text-align:center;

}

.contato-card p{

    margin-top:8px;

    font-size:1.40rem;

    color:#8B937D;

    letter-spacing:.3px;

    text-align:center;

}

.contato-card::before{

    content:"";

    width:50px;

    height:2px;

    background:#A2AF97;

    border-radius:10px;

    margin-bottom:18px;

    display:block;

}

.contato-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 25px 50px rgba(0,0,0,.10);

    background:#F8FAF5;

}

.ramo-esquerdo{

    position:absolute;

    width:170px;

    top:-45px;

    left:-55px;

    opacity:.55;

    z-index:5;

    pointer-events:none;

}

.ramo-direito{

    position:absolute;

    width:170px;

    top:-45px;

    right:-55px;

    opacity:.55;

    z-index:5;

    pointer-events:none;

}

/*========================================
FOOTER
=========================================*/

.footer-logo{

    display:flex;

    justify-content:center;

    margin-bottom:18px;

}

.footer-logo img{

    width:230px;

    filter:none;

    opacity:1;

}

.footer-direitos{

    text-align:center;

    color:white;

    font-size:.85rem;

    letter-spacing:1px;

    opacity:.9;

}

/* ==============================
   RESPONSIVO
============================== */

@media(max-width:1000px){

.hero{

flex-direction:column;

text-align:center;

}

.hero-texto{

width:100%;

}

.hero-logo{

width:100%;

margin-top:60px;

}

.cards{

grid-template-columns:1fr;

}

.menu{

padding:20px;

}

.menu ul{

gap:20px;

font-size:14px;

}

.menu nav a{

    color:#6B775C;

    text-decoration:none;

    font-size:.92rem;

    font-weight:500;

    letter-spacing:.5px;

    transition:.3s;

}

.menu nav a:hover{

    color:#556347;

}

nav ul{

    display:flex;

    gap:42px;

    list-style:none;

    align-items:center;

}

.hero h1{

font-size:56px;

}

/* ======================================
   MENU AO ROLAR
====================================== */

.menu{

    transition:.4s;

}

.menu-scroll{

    padding:18px 8%;

    background:rgba(252,251,248,.98);

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

/* ======================================
   ANIMAÇÕES
====================================== */

section{

    opacity:0;

    transform:translateY(60px);

    transition:1s;

}

section.mostrar{

    opacity:1;

    transform:translateY(0);

}

.hero-bg{

position:absolute;

top:0;

left:0;

width:100%;

z-index:-2;

opacity:.35;

}

.flores-esquerda{

position:absolute;

left:-50px;

top:40px;

width:120px;

opacity:.18;

}

.divider{

display:block;

width:100%;

margin-top:-5px;

margin-bottom:-5px;

}

.photo-wrapper{

    width:470px;

    height:530px;

    position:relative;

    overflow:hidden;

    border-radius:
        44% 56% 46% 54% /
        22% 24% 76% 78%;
      
    box-shadow:
        0 25px 55px rgba(70,80,60,.12);

}

.photo-wrapper img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center 10%;

    display:block;

}

.logo img{

width:72px;

transition:.4s;

}

.logo img:hover{

transform:scale(1.05);

}

/* ===========================================
FLOR HERO
=========================================== */

.hero::after{

    content:"";

    position:absolute;

    right:-180px;

    top:-120px;

    width:700px;

    height:700px;

    background-image:url("assets/flower-xl.png");

    background-repeat:no-repeat;

    background-size:contain;

    opacity:.15;

    z-index:0;

    pointer-events:none;

}
.hero{

    min-height:100vh;

    display:grid;

    grid-template-columns:55% 45%;

    align-items:center;

    gap:20px;

    padding:0 9%;

    position:relative;

    overflow:hidden;

}

.hero-flor{

position:absolute;

left:-220px;

top:50%;

transform:translateY(-50%);

z-index:0;

}

.hero-flor img{

width:980px;

opacity:.40;

max-width:none;

pointer-events:none;

user-select:none;

}

.hero-bg{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

object-fit:cover;

opacity:.28;

z-index:-1;

pointer-events:none;

}

.hero::before{

    content:"";

    position:absolute;

    right:0;

    top:0;

    width:220px;

    height:100%;

    background:linear-gradient(
        to right,
        rgba(248,246,242,0),
        rgba(248,246,242,1)
    );

    z-index:2;

    pointer-events:none;

}

/*==================================================
ESPAÇAMENTO DAS SEÇÕES
==================================================*/

section{

    padding:85px 9%;

}

/*==============================
ASSINATURA
==============================*/

.assinatura{

margin-top:55px;

}

.assinatura img{

width:170px;

opacity:.30;

transition:.4s;

}

.assinatura img:hover{

opacity:.45;

}

/*=====================================
LOGO HERO
======================================*/

.hero-logo-principal{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    position:relative;

    z-index:2;

}

.hero-logo-principal img{

    width:380px;

    max-width:100%;

}

.menu.scrolled{

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(18px);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

/*==================================================
SOBRE MIM
==================================================*/

#sobre{

    position:relative;

    background:#EAEFDF;

    padding:70px 9% 45px;

    overflow:hidden;

}

#sobre::after{

    content:"";

    position:absolute;

    top:-40px;

    right:-40px;

    width:320px;

    height:320px;

    background:url("assets/flower-3.png") no-repeat center;

    background-size:contain;

    opacity:.80;

    pointer-events:none;

    z-index:1;

}

#sobre::before{

    content:"";

    position:absolute;

    bottom:-50px;

    left:-60px;

    width:360px;

    height:360px;

    background:url("assets/flower-3.png") no-repeat center;

    background-size:contain;

    transform:scaleX(-1);

    opacity:.80;

    pointer-events:none;

    z-index:1;

}

.sobre-grid{

    position:relative;
    
    z-index:2;
    
    display:grid;

    grid-template-columns:430px 1fr;

    gap:90px;

   align-items:start;
   
   padding-bottom:0;

}

.sobre-divider{

    display:none;

    justify-content:center;

    margin-top:-10px;
    
    margin-bottom:0;

}

.sobre-divider img{

    width:520px;

    max-width:100%;

}

/*==================================================
COLUNA DE TEXTO
==================================================*/

.sobre-texto{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.sobre-tag{

    font-size:.82rem;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#8D927F;

    margin-bottom:18px;

}

.sobre-texto h2{

    font-size:3rem;

    margin-bottom:18px;

}

.sobre-texto p{

    max-width:560px;

    line-height:2;

    color:#666;

    margin-bottom:26px;
    
    font-size:1.05rem;

}

.sobre-floral{

    position:absolute;

    right:-80px;

    top:-40px;

    width:240px;

    opacity:.08;

    pointer-events:none;

}

/*=============================
BOTÃO SOBRE MIM
==============================*/

#sobre .botao{

    margin-top:35px;

    margin-left:55px;

}

.botao-lattes{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 34px;

    margin-left:35px;

    margin-bottom:18px;

    border-radius:999px;

   background:#A5B49A;

    color:white;

    font-weight:500;

    transition:.35s;

    box-shadow:
        0 10px 22px rgba(102,117,95,.12);

}

.botao-lattes:hover{

   background:#95A58A;

    transform:translateY(-2px);

}

/*=====================================
FOOTER
======================================*/

footer{

    background:linear-gradient(
        180deg,
        #70806A 0%,
        #66755F 100%
    );

    padding:18px 20px 8px;

    text-align:center;

    position:relative;

    overflow:hidden;

}

footer::before{

    content:"";

    position:absolute;

    left:-70px;

    bottom:-40px;

    width:230px;

    height:230px;

    background:url("assets/leaves-1.png");

    background-repeat:no-repeat;

    background-size:contain;

    opacity:.12;

}

footer::after{

    content:"";

    position:absolute;

    right:-120px;

    top:-30px;

    width:300px;

    height:300px;

    background:url("assets/leaves-1.png");

    background-repeat:no-repeat;

    background-size:contain;

    transform:scaleX(-1);

    opacity:.12;

}

.footer-logo{

    margin:0;

    padding:0;

    line-height:0;

}

.footer-logo img{

    width:200px;

    margin:0;

    display:block;

}

.footer-direitos{

    margin-top:8px;

    margin-bottom:0;

    font-size:.75rem;

    opacity:.85;

}

/*==================================================
ESPECIALIDADES
==================================================*/

#especialidades{

    position:relative;

    background:#FCFBF8;

    padding:120px 8%;

    overflow:hidden;
    
     background:linear-gradient(
        180deg,
        #F7F6F2 0%,
        #FCFBF8 100%
    );

}

/* Flores */

#especialidades::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:url("assets/floralz.png") no-repeat center;

    background-size:contain;

    left:-20px;

    top:-80px;

    opacity:.50;

    z-index:0;

}

#especialidades::after{

    content:"";

    position:absolute;

    width:920px;

    height:920px;

    background:url("assets/zfloral.png") no-repeat center;

    background-size:contain;

    right:-110px;

    bottom:-60px;

    opacity:.70;

    z-index:0;

}

.titulo-especialidades{

    position:relative;

    z-index:2;

    text-align:center;

}

.titulo-especialidades h2{

    font-family:"Cormorant Garamond";

    font-size:3.2rem;

    font-weight:500;

    color:#66755F;

}

#especialidades .linha{

    margin:12px auto 45px;

}

/*==================================================
ATENDIMENTOS
==================================================*/

#atendimentos{

    background:linear-gradient(
    180deg,
    #70806A 0%,
    #66755F 100%
);

    color:white;

    padding:100px 9%;

    position:relative;

    overflow:hidden;

}

#atendimentos h2{

    color:white;

}

.atendimento-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:50px;

    margin-top:70px;

}

.atendimento-item{

    text-align:center;

}

.atendimento-item h3{

    font-family:"Cormorant Garamond";

    font-size:1.8rem;

    font-weight:500;

    margin-bottom:8px;

    position:relative;

}

.atendimento-item h3::after{

    content:"";

    display:block;

    width:48px;

    height:2px;

    background:#A5B19A;

    margin:12px auto 0;

    border-radius:10px;

}

.linha{

    width:90px;

    height:3px;

    background:#9BA88F;

    margin:20px auto 35px;

    border-radius:10px;

}

.atendimento-item p{

    line-height:1.9;

    color:rgba(255,255,255,.88);

}

#atendimentos::before{

    content:"";

    position:absolute;

    left:-80px;

    bottom:-40px;

    width:280px;

    height:280px;

    background:url("assets/leaves-1.png");

    background-repeat:no-repeat;

    background-size:contain;

    opacity:.20;

}

#atendimentos::after{

    content:"";

    position:absolute;

    right:-170px;

    bottom:-90px;

    width:430px;

    height:430px;

    background:url("assets/leaves-1.png");

    background-repeat:no-repeat;

    background-size:contain;

    transform:scaleX(-1);

    opacity:.20;

    pointer-events:none;

}

.sobre-profissao{

    display:block;

    width:100%;

    text-align:center;

    font-size:.82rem;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#8C937D;

    margin:0 auto 28px;

    font-weight:500;

}

.sobre-texto{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.sobre-profissao{

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:4px;

    color:#8C937D;

    margin-top:-6px;

    margin-bottom:28px;

    font-weight:500;

}

/*==================================================
COMO FUNCIONA
==================================================*/

#como-funciona{

    position:relative;

    background:#FCFBF8;

    padding:100px 9%;

    overflow:hidden;

}


.caminho{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:40px;

    margin-top:80px;

    position:relative;

    align-items:start;
    
    z-index:2;

}

.bolinha{

    position:relative;

    z-index:2;

    width:105px;

    height:105px;

    margin:0 auto 28px;

    border-radius:50%;

    background:linear-gradient(
        145deg,
        #97A58D,
        #7C8C74
    );

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:

        0 14px 28px rgba(0,0,0,.12);

}

.caminho::before{

    content:"";

    position:absolute;

    top:48px;

    left:12%;

    right:12%;

    height:4px;

    background:#C7D1BF;

    z-index:1;

    border-radius:20px;

}

.bolinha img{

    width:60px;

    height:60px;

    display:block;

}

.passo:hover .bolinha{

    transform:translateY(-6px) scale(1.05);

    box-shadow:
        0 18px 38px rgba(0,0,0,.18),
        inset 0 2px 8px rgba(255,255,255,.30);

}

.passo:hover .bolinha img{

    transform:scale(1.08);

}

.passo h3{

    font-family:"Cormorant Garamond";

    color:#66755F;

    font-size:1.85rem;

    font-weight:500;

    margin-bottom:10px;

}

.etapa{

    color:#97A58D;

    font-size:.90rem;

    letter-spacing:3px;

    font-weight:600;

    margin-right:8px;

    vertical-align:middle;

}

.passo p{

    font-size:.95rem;

    line-height:1.75;

    color:#666;

    max-width:220px;

    margin:auto;

}

.passo{

    position:relative;

    width:100%;

    text-align:center;

}


/*==================================================
FAQ
==================================================*/

#faq{

    position:relative;

    padding:110px 9%;

    background:linear-gradient(
        135deg,
        #6F7E68,
        #64715E
    );

    overflow:hidden;

}

/* Flores */

#faq::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    background:url("assets/florz.png") no-repeat center;

    background-size:contain;

    top:-90px;

    left:-50px;

    opacity:.12;

    z-index:0;

}

#faq::after{

    content:"";

    position:absolute;

    width:620px;

    height:620px;

    background:url("assets/zflor.png") no-repeat center;

    background-size:contain;

    bottom:-120px;

    right:-60px;

    opacity:.18;

    z-index:0;

}

.titulo-faq{

    position:relative;

    z-index:2;

    text-align:center;

    margin-bottom:70px;

}

.titulo-faq h2{

    font-family:"Cormorant Garamond";

    font-size:3.3rem;

    color:#FCFBF8;

    font-weight:500;

}

.titulo-faq .linha{

    width:80px;

    height:2px;

    margin:18px auto 25px;

    background:#D7DDCF;

}

.titulo-faq p{

    color:#E8ECE3;

    max-width:620px;

    margin:auto;

    line-height:1.8;

    font-size:1.05rem;

}

.faq-container{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

}

.faq-item{

    margin-bottom:18px;

}

.faq-pergunta{

    width:100%;

    background:linear-gradient(
        180deg,
        #9EAB93,
        #8F9D85
    );

    color:#FCFBF8;

    border:none;

    border-radius:16px;

    padding:18px 28px;

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-family:"Poppins";

    font-size:1.05rem;

    font-weight:500;

    transition:.35s;

    box-shadow:
        0 10px 22px rgba(0,0,0,.14);

}

.faq-pergunta:hover{

    background:linear-gradient(
        180deg,
        #AAB79F,
        #97A58D
    );

    transform:translateY(-2px);

}

.faq-pergunta span{

    width:34px;

    height:34px;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:1.5rem;

    transition:.35s;

}

.faq-resposta{

    background:#F7F6F2;

    border-left:5px solid #C9D3C1;

    color:#596257;

    max-height:0;

    overflow:hidden;

    padding:0 30px;

    border-radius:0 0 16px 16px;

    line-height:1.9;

    transition:
        max-height .45s ease,
        padding .35s ease;

    box-shadow:
        0 12px 22px rgba(0,0,0,.08);

}

.faq-resposta.ativa{

    padding:24px 30px 28px;

    margin-top:0;

    margin-bottom:16px;

}

.mapa-especialidades{

    position:relative;
    
    z-index:2;
    
    display:grid;

    grid-template-columns:repeat(3,1fr);

    grid-template-rows:repeat(2,180px);

    align-items:center;

    justify-items:center;

    gap:60px;

    max-width:900px;

    margin:60px auto 0;

}

.blob{

    display:flex;

    justify-content:center;

    align-items:center;

    color:#66755F;

    font-family:"Cormorant Garamond";

    font-size:2rem;

    border-radius:
        46% 54% 48% 52% /
        54% 46% 52% 48%;

    box-shadow:
        0 18px 35px rgba(0,0,0,.08);

    transition:
        transform .30s ease,
        box-shadow .30s ease,
        background .30s ease;

}

.blob:hover{

    transform:translateY(-8px);

    box-shadow:
        0 24px 45px rgba(0,0,0,.12);

}

.blob h3{

    margin:0;

    font-weight:500;

    font-size:2rem;

}

.luto{

    width:260px;

    height:190px;

    background:linear-gradient(
        145deg,
        #97A58D,
        #7D8B74
    );

    color:white;

    border-radius:48% 52% 44% 56%;
}

.luto h3{

    color:white;

    font-size:2.8rem;

}

/* posições */

.ansiedade{

    grid-column:1;

    grid-row:1;

}

.luto{

    grid-column:2;

    grid-row:1;

}

.depressao{

    grid-column:3;

    grid-row:1;

}

.autoestima{

    grid-column:1;

    grid-row:2;

}

.perdas{

    grid-column:3;

    grid-row:2;

}

.ansiedade{

    width:215px;
height:165px;

    border-radius:45% 55% 48% 52%;

    grid-column:1;
    grid-row:1;

}

.luto{

    width:270px;
    height:200px;

    border-radius:
    42% 58% 46% 54% /
    58% 42% 56% 44%;

    background:linear-gradient(145deg,#98A68E,#7F8F76);

    color:white;

    grid-column:2;
    grid-row:1;
    
     transform:translateY(70px);

}

.depressao{

    width:215px;
height:165px;

    border-radius:52% 48% 58% 42%;

    grid-column:3;
    grid-row:1;

}

.autoestima{

    width:215px;
height:165px;

    border-radius:56% 44% 48% 52%;

    grid-column:1;
    grid-row:2;

}

.perdas{

   width:215px;
height:165px;

    border-radius:44% 56% 52% 48%;

    grid-column:3;
    grid-row:2;

}

.ansiedade{

    background:linear-gradient(
180deg,
#EAF0E5,
#DCE6D4
);

}

.autoestima{

    background:linear-gradient(
180deg,
#EEF4EA,
#E1EADF
);

}

.depressao{

background:linear-gradient(
180deg,
#E3EBDD,
#D5E0CD
);
}

.perdas{

    background:linear-gradient(
180deg,
#E8EFE2,
#D9E3D3
);

}

/*==================================================
RESPONSIVO
==================================================*/

@media (max-width:768px){

body{
    background:red !important;
}