/* ==========================
   HERO SOBRE MI
========================== */

.about-hero{

    position:relative;

    height:85vh;

    min-height:700px;

    background:url('../images/about-hero.jpg') center center;

    background-size:cover;

    display:flex;

    justify-content:center;

    align-items:center;

}

.about-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(20,8,31,.80),
        rgba(20,8,31,.60)
    );

}

.about-hero-overlay{

    position:relative;

    z-index:2;

    width:900px;

    max-width:90%;

    text-align:center;

}

.about-hero-overlay span{

    color:#E8C76A;

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:15px;

}

.about-hero-overlay h1{

    font-family:'Great Vibes',cursive;

    color:#D4AF37;

    font-size:90px;

    margin:25px 0;

    line-height:1.1;

}

.about-hero-overlay p{

    font-family:'Cormorant Garamond',serif;

    font-style:italic;

    font-size:30px;

    color:white;

    line-height:1.7;

}
/* ==========================
   HISTORIA
========================== */

.history{

    width:90%;

    max-width:1400px;

    margin:120px auto;

}

.history-container{

    display:grid;

    grid-template-columns:45% 55%;

    gap:90px;

    align-items:center;

}

.history-image img{

    width:100%;

    border-radius:30px;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}


.history-image img{

    width:90%;

    border-radius:35px;

    border:2px solid #C9A227;

    padding:6px;

    background:#1a0b26;

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

}

.history-content span{

    color:#E8C76A;

    text-transform:uppercase;

    letter-spacing:4px;

}

.history-content h2{

    font-family:'Great Vibes',cursive;

    font-size:88px;

    line-height:1.15;

    color:#D4AF37;

    margin:20px 0 40px;

}

.history-content p{

    font-family:'Cormorant Garamond',serif;

    font-style:italic;

    font-size:22px;

    line-height:2.1;

    color:#F7F2E9;

    margin-bottom:35px;

}

.history-divider{

    width:180px;

    height:2px;

    background:#C9A227;

    margin:35px 0 45px;

    position:relative;

}

.history-divider::after{

    content:"✦";

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-55%);

    background:#14081F;

    color:#C9A227;

    padding:0 12px;

    font-size:18px;

}