/* ==================================================
   MINERAS DEL BOSQUE
   style.css
================================================== */

:root{

    --bg:#171717;
    --gold:#C2A56A;
    --text:#D8D2C8;
    --white:#F5F2ED;
    --grey:#9B9B9B;
    --line:rgba(194,165,106,.18);

}

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

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

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

    font-weight:300;

    line-height:1.9;

}

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

.hero{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:90px 25px;

}

.logo{

    width:170px;

    margin-bottom:35px;

}

/*==========================
   SOLO QR
==========================*/

.agradecimiento{

    color:var(--gold);

    font-size:1rem;

    letter-spacing:1px;

    margin-bottom:12px;

}

.intro{

    color:var(--grey);

    font-size:.95rem;

    max-width:500px;

    margin-bottom:45px;

}

/*==========================
        TITULOS
==========================*/

.marca{

    max-width:760px;

}

h1{

    font-family:"Cormorant Garamond",serif;

    font-size:4.2rem;

    font-weight:600;

    letter-spacing:3px;

    color:var(--white);

}

.titulo-link{

    color:inherit;

    text-decoration:none;

    transition:.3s;

}

.titulo-link:hover{

    color:var(--gold);

}

.separador{

    width:70px;

    height:1px;

    background:var(--gold);

    margin:28px auto;

}

h2{

    font-family:"Cormorant Garamond",serif;

    font-size:2rem;

    font-weight:400;

    color:var(--gold);

}

.ubicacion{

    margin-top:16px;

    color:var(--grey);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.82rem;

}

.descripcion{

    max-width:720px;

    margin-top:55px;

    font-size:1.1rem;

    line-height:2;

}

/*==========================
        BOTONES
==========================*/

.botones{

    display:flex;

    gap:18px;

    margin-top:55px;

    flex-wrap:wrap;

    justify-content:center;

}

.botones a{

    text-decoration:none;

    color:var(--gold);

    border:1px solid var(--gold);

    padding:14px 32px;

    transition:.3s;

    font-size:.9rem;

    letter-spacing:1px;

}

.botones a:hover{

    background:var(--gold);

    color:var(--bg);

}

/*==========================
        MAIN
==========================*/

main{

    max-width:820px;

    margin:auto;

    padding:0 35px 120px;

}

.bloque{

    text-align:center;

    margin:120px 0;

}

.linea{

    display:block;

    width:60px;

    height:1px;

    background:var(--gold);

    margin:0 auto 35px;

}

.bloque h3{

    font-family:"Cormorant Garamond",serif;

    font-size:3rem;

    font-weight:500;

    color:var(--gold);

    margin-bottom:35px;

}

.bloque p{

    margin-bottom:22px;

}

/*==========================
        FRASE
==========================*/

.frase{

    margin:160px auto;

    text-align:center;

    max-width:700px;

}

.frase p{

    font-family:"Cormorant Garamond",serif;

    font-size:2.2rem;

    color:var(--gold);

    font-style:italic;

    line-height:1.6;

}

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

footer{

    border-top:1px solid var(--line);

    text-align:center;

    padding:70px 20px;

}

.footer-logo{

    font-family:"Cormorant Garamond",serif;

    color:var(--gold);

    font-size:1.7rem;

    letter-spacing:2px;

    margin-bottom:18px;

}

footer p{

    margin:10px 0;

    color:var(--grey);

}

.copyright{

    margin-top:25px;

    font-size:.85rem;

}

/*==========================
        MOVIL
==========================*/

@media(max-width:768px){

.hero{

    padding:70px 25px;

}

.logo{

    width:135px;

}

h1{

    font-size:2.8rem;

}

h2{

    font-size:1.7rem;

}

.descripcion{

    font-size:1rem;

}

.bloque{

    margin:90px 0;

}

.bloque h3{

    font-size:2.2rem;

}

.frase p{

    font-size:1.6rem;

}

.botones{

    flex-direction:column;

    width:100%;

}

.botones a{

    width:100%;

}

}