body{
    margin: 0;
    padding: 0;
    width: 100%;
}
:root{
    --color-gold: linear-gradient(112deg, #AE8625 5%, #F7EF8A 45%, #D2AC47 85%);
    --color-gray: #231f20;
}
.material-symbols-outlined {
    background: var(--color-gold);
    -webkit-background-clip: text;
    color: transparent;
    font-size: 4em;
    font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24
}
h1,h2,h3,h4,h5,h6,a{
    margin: 0;
}
header{
    z-index: 1;
    background: var(--color-gray);
    width: 100%;
    height: 4vw;
    margin: 0;
    padding: 10px 0;
    position: fixed;
    box-shadow: 0 0 10px black;
    display: flex;
    justify-content: center;
}
.logo{
    background: white;
    display: table;
    position: absolute;
    padding: 1px;
    border-radius: 50%;
    box-shadow: 0 0 10px black;
    width: 8.5rem;
    transition: width 0.7s;
}
.logo_abajo{
    width: 7rem;
}
.logo img{
    display: block;
    margin: 0;
    padding: 0;
    border-radius: 50%;
}
.content{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.content a{
    text-decoration: none;
    margin: 0 15px;
    color: white;
    font-size: clamp(1rem, 1.6vw, 7rem);
    font-family: "Open Sans", serif;
}
.content h1{
    font-family: "Bona Nova SC", serif;
    font-size: clamp(1rem, 2.5vw, 7rem);
}
.container{
    width: 100%;
    height: 100vh;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content1{
    color: var(--color-gray);
    width: 60vw;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.content1 h2{
    font-size: clamp(2.3rem, 5.5vw, 6rem);
    /*font-size: 70px;*/
    font-family: "Outfit", serif;
    font-weight: 400;
}
.content1 h1{
    font-size: clamp(3.9rem, 9.5vw, 12rem);
    font-family: "Bona Nova SC", serif;
    font-weight: 500;
}
.content1 h3{
    font-size: clamp(2.1rem, 5.4vw, 6rem);
    /*font-size: 67px;*/
    font-family: "Outfit", serif;
    font-weight: 300;
}
.content1 h4{
    font-size: clamp(1.8rem, 4vw, 5rem);
    /*font-size: 55px;*/
    font-family: "Nunito Sans", serif;
    font-weight: 10;
}
.container img{
    filter: drop-shadow(4px 6px 12px black);
    border-radius: 50%;
    width: clamp(13rem, 30vw, 30rem);
}
.content1,.content2{
    margin-top: 4%;
}
.container1{
    width: 100%;
    height: 50vh;
    background: var(--color-gray);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cont{
    width: 90%;
    display: block;
}
.content3{
    width: 100%;
}
.content3 h1{
    margin-left: 50px;
    font-size: 50px;
    font-family: "Bona Nova SC", serif;
    font-weight: 500;
    background: var(--color-gold);
    -webkit-background-clip: text;
    color: transparent;  
}
.content4{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 1em;
}
.content4 div{
    font-family: "Nunito Sans", serif;
    font-size: 15px;
    font-weight: 1;
    padding: 23px 20px;
    border: 1px solid white;
}
.container2{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
}
.content5{
    width: 70%;
    height: 100vh;
}
.content5 img{
    display: block;
    width: 100%;
    height: 100vh;
}
.content6{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.content7{
    width: 90%;
    color: var(--color-gray);
}
.content7 h2{
    font-family: "Bona Nova SC", serif;
    font-size: clamp(2.3rem, 2.6vw, 4rem);
    font-weight: 200;
}
.content7 h3{
    font-family: "Nunito Sans", serif;
    font-size: clamp(1.3rem, 1.5vw, 3rem);
    font-weight: 400;
}
.cont1{
    width: 100%;
    margin-bottom: 2em;
}
.cont1 h1{
    font-family: "Bona Nova SC", serif;
    font-size: clamp(2.9rem, 4.5vw, 6rem);
    font-weight: 500;
    color: #231f20;
}
.cont2{
    display: flex;
    gap: 1em;
}
.cont2 div{
    padding: 15px 20px;
    background: #dfdfdf;
}
.cont3{
    margin-top: 1em;
    padding: 15px 20px;
    background: #dfdfdf;
}
.container3{
    background: var(--color-gray);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content8{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cont4{
    width: 90%;
}
.cont5{
    width: 100%;
}
.cont5 h1{
    margin-left: 18px;
    padding: 10px 0;
    font-size: clamp(2.9rem, 4.5vw, 6rem);
    font-weight: 500;
    font-family: "Bona Nova SC", serif;
    background: var(--color-gold);
    -webkit-background-clip: text;
    color: transparent;  
}
.cont6{
    display: flex;
    justify-content: center;
    gap: 1em;
    width: 100%;
}
.cont6 div{
    width: 100%;
    padding: 18px;
}
.cont6 h2{
    font-size: clamp(2.3rem, 2.6vw, 4rem);
    font-weight: 500;
    font-family: "Bona Nova SC", serif;
    background: var(--color-gold);
    -webkit-background-clip: text;
    color: transparent;
}
.cont6 h3{
    margin-top: 1em;
    color: white;
    font-family: "Nunito Sans", serif;
    font-size: clamp(1.3rem, 1.5vw, 3rem);
    font-weight: 400;
    width: 100%;
}
.container4{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    padding: 70px 0;
    text-align: center;
}
.content9{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.cont7{
    gap: 5em;
    display: flex;
    justify-content: center;
    width: 100%;
}
@media (max-width: 960px){
    .logo{
        width: 4rem;
    }
    .container{
        flex-direction: column;
    }
    .content1{
        width: 100%;
    }
    .content1,.content2{
        margin-top: 0;
    }
    .content{
        display: none;
    }
    .container1{
        padding: 3em 0;
        height: auto;
        max-height: 100vh;
    }
    .content3 h1{
        margin: 0;
        text-align: center;
    }
    .content4{
        flex-direction: column;
        gap: 1.5em;
    }
    .container2{
        display: block;
        height: auto;
        min-height: 100vh;
        padding: 2em 0;
    }
    .content5{
        display: none;
    }
    .content7{
        width: 90%;
    }
    .cont1 h1{
        text-align: center;
    }
    .cont2{
        flex-direction: column;
        gap: 2em;
    }
    .cont3{
        margin-top: 2em;
    }
    .container3{
        height: auto;
        padding: 2em 0;
    }
    .content8{
        width: 90%;
    }
    .cont4{
        width: 100%;
    }
    .cont5 h1{
        margin: 0;
        text-align: center;
    }
    .cont6 div{
        padding: 0;
    }
    .cont7{
        flex-direction: column;
    }
}
@media(max-width: 680px){
    .cont6{
        display: block;
        gap: 2em;
    }
    .cont6 div{
        display: flex;
        flex-wrap: wrap;
        margin-top: 2em;
    }
    .cont6 h3{
        margin-top: 0;
    }
}