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

html,
body{
    width:100%;
    min-height:100vh;
}

body{
    font-family:'Montserrat',sans-serif;

    background-image:url('../images/fondo_veyra.png');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    overflow:hidden;
    position:relative;
}

/* Profundidad suave */

body::before{
    content:'';

    position:absolute;
    inset:0;

    background:
    radial-gradient(
        circle at center,
        rgba(255,255,255,0) 35%,
        rgba(0,0,0,.06) 100%
    );

    z-index:1;
}

.hero{
    position:relative;
    z-index:2;

    min-height:100vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:40px;
}

/* Logo */

.logo{
    width:450px;
    max-width:90%;

    display:block;

    margin-bottom:0px;
}

/* Línea vertical */

.gold-line{
    width:1px;
    height:55px;

    background:#c8a56a;

    margin-bottom:35px;
}

/* Título */

h1{
    font-size:clamp(1.4rem,2vw,2.7rem);

    font-weight:300;

    letter-spacing:12px;

    color:#1f1f1f;

    margin-bottom:25px;

    text-transform:uppercase;
}

/* Línea horizontal */

.small-line{
    width:60px;
    height:1px;

    background:#c8a56a;

    margin-bottom:30px;
}

/* Texto */

p{
    max-width:620px;

    font-size:1rem;

    line-height:2;

    color:#666666;

    margin-bottom:55px;
}

/* Próximamente */

.coming{
    color:#c8a56a;

    font-size:1rem;

    font-weight:500;

    letter-spacing:12px;

    text-transform:uppercase;
}

/* Animación elegante */

.logo,
.gold-line,
h1,
.small-line,
p,
.coming{
    opacity:0;

    animation:fadeUp 1s ease forwards;
}

.logo{
    animation-delay:.2s;
}

.gold-line{
    animation-delay:.4s;
}

h1{
    animation-delay:.6s;
}

.small-line{
    animation-delay:.8s;
}

p{
    animation-delay:1s;
}

.coming{
    animation-delay:1.2s;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* Tablet */

@media (max-width:992px){

    .logo{
        width:220px;
    }

    h1{
        letter-spacing:8px;
    }

}

/* Celular */

@media (max-width:768px){

    @media (max-width:768px){

    .hero{
        transform:none;
        padding:25px;
    }

    .logo{
       width:min(380px,95vw);

        margin-bottom:25px;
    }

    .gold-line{
        height:40px;
        margin-bottom:25px;
    }

    h1{
        font-size:1rem;
        letter-spacing:4px;
        line-height:1.5;

        margin-bottom:20px;
    }

    .small-line{
        width:50px;
        margin-bottom:20px;
    }

    p{
        max-width:320px;

        font-size:.95rem;
        line-height:1.8;

        margin-bottom:35px;
    }

    .coming{
        font-size:.85rem;
        letter-spacing:6px;
    }

}

}