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


.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.25),
        rgba(0,0,0,.75)
    );

}



.hero small{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    color:#f6dfb0;

    font-family:"Cinzel",serif;

    letter-spacing:5px;

    font-size:13px;

}



.hero small::before,
.hero small::after{


    content:"";

    width:70px;

    height:1px;

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

}



.hero h1{


    margin:35px 0;


    font-family:
    "Great Vibes",
    cursive;


    font-size:
    clamp(80px,12vw,150px);


    font-weight:400;


    line-height:1;


    color:white;


}



.hero h1 span{


    color:#e7c98b;


    margin:0 20px;


}



.hero p{


    display:inline-block;


    padding:15px 35px;


    border-radius:50px;


    color:white;


    font-family:"Cinzel",serif;


    letter-spacing:3px;


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


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


    backdrop-filter:blur(10px);


}

.view-btnn{

    position:absolute;

    left:50%;

    bottom:28px;

    transform:translateX(-50%);

    z-index:30;

    padding:12px 24px;

    font-size:14px;

    font-weight:700;

    border:none;

    border-radius:999px;

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

    color:#172033;

    cursor:pointer;

    transition:.35s;

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

}

.view-btnn:hover{

    transform:translateX(-50%) translateY(-3px);

}

.view-btnn.hidden{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

/* =====================================
 NOVAS FUNÇÕES DO HERO
===================================== */

.music-toggle{

    position:fixed;

    left:22px;

    bottom:22px;

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    color:#172033;

    cursor:pointer;

    z-index:999;

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

    transition:.35s;

    opacity:0;

    visibility:hidden;

}

.music-toggle.show{

    opacity:1;

    visibility:visible;

}

.music-toggle:hover{

    transform:scale(1.08);

}

.music-toggle i{

    font-size:18px;

}

body.lock-scroll{

    overflow:hidden;

    height:100vh;

}

/* =====================================
   WELCOME COMPONENT
===================================== */


.welcome-container{


    position:relative;


    background:

    linear-gradient(
        180deg,
        #ffffff,
        #fdfbf8
    );


    padding:90px 70px;


    border-radius:45px;


    box-shadow:

    0 35px 100px rgba(0,0,0,.08);


    border:

    1px solid rgba(212,175,55,.12);


    overflow:hidden;


}





/* detalhe dourado superior */


.welcome-container::before{


    content:"";


    position:absolute;


    top:0;

    left:50%;


    transform:translateX(-50%);


    width:180px;


    height:2px;


    background:

    linear-gradient(
        90deg,
        transparent,
        #d4af37,
        transparent
    );


}






/* coração */


.heart{


    width:95px;


    height:95px;


    margin:auto;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:


    linear-gradient(

        135deg,

        #d4af37,

        #f3dfaa

    );


    color:white;


    font-size:40px;


    box-shadow:


    0 20px 40px rgba(212,175,55,.25);


    animation:

    welcomePulse 3s infinite;


}




@keyframes welcomePulse{


    0%,100%{

        transform:scale(1);

    }


    50%{

        transform:scale(1.08);

    }


}






/* etiqueta */


.welcome small{


    display:block;


    margin-top:40px;


    font-family:

    "Cinzel",
    serif;


    letter-spacing:6px;


    font-size:12px;


    color:#b08d45;


    text-transform:uppercase;


}






/* título principal */


.welcome h2{


    margin:35px auto;


    max-width:900px;


    font-family:

    "Cormorant Garamond",
    serif;


    font-size:


    clamp(42px,5vw,72px);


    font-weight:400;


    line-height:1.15;


    letter-spacing:.5px;


    color:#1c2434;


}






/* texto */


.welcome p{


    max-width:760px;


    margin:auto;


    font-family:

    "Cormorant Garamond",
    serif;


    font-size:26px;


    font-weight:300;


    line-height:1.9;


    color:#667085;


}






/* =====================================
   VERSÍCULO
===================================== */


.verse-card{


    position:relative;


    margin-top:55px;


    padding:45px 40px;


    background:


    rgba(255,255,255,.85);


    border-radius:35px;


    border:


    1px solid rgba(212,175,55,.25);


    text-align:center;


    box-shadow:


    0 20px 60px rgba(0,0,0,.05);


}




/* aspas decorativas */


.verse-card::before{


    content:"“";


    position:absolute;


    top:-25px;


    left:35px;


    font-family:

    "Cormorant Garamond",
    serif;


    font-size:90px;


    color:

    rgba(212,175,55,.25);


}





.verse-icon{


    font-size:38px;


    color:#d4af37;


}






.verse-card blockquote{


    margin:25px 0;


    font-family:

    "Cormorant Garamond",
    serif;


    font-size:30px;


    font-weight:400;


    font-style:italic;


    line-height:1.7;


    color:#3f4654;


}






.verse-card span{


    font-family:

    "Cinzel",
    serif;


    color:#b08d45;


    font-size:14px;


    letter-spacing:2px;


}





/* =====================================
   MOBILE
===================================== */


@media(max-width:768px){


    .welcome-container{


        padding:60px 25px;


        border-radius:30px;


    }



    .heart{


        width:75px;


        height:75px;


        font-size:30px;


    }



    .welcome h2{


        font-size:42px;


    }



    .welcome p{


        font-size:21px;


    }



    .verse-card{


        padding:35px 20px;


    }



    .verse-card blockquote{


        font-size:24px;


    }


}

.person-card{


    padding:40px;


    background:white;


    border-radius:35px;


    border:
    1px solid #eee2cd;


}



.person-card img{


    width:180px;


    height:180px;


    border-radius:50%;


    object-fit:cover;


    border:
    6px solid #e8d3a3;


}



.person-card h3{


    margin:25px 0;


    font-family:
    "Great Vibes",
    cursive;


    font-size:55px;


    font-weight:400;


    color:#172033;


}

.person-card p{


    font-family:
    "Cormorant Garamond",
    serif;


    font-size:22px;


    line-height:1.8;


    color:#667085;


}