@charset "utf-8";
/* CSS Document */

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

.page-hero{

    position: relative;

    height: 42vh;

    min-height: 340px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    color: #fff;

    text-align: center;

}

.page-hero::before{

    content: "";

    position: absolute;

    inset: 0;

    background-position: center center;

    background-size: cover;

    background-repeat: no-repeat;

    transform: scale(1);

    transition: transform 8s ease;

}

.page-hero:hover::before{

    transform: scale(1.05);

}

.page-hero::after{

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        rgba(0,0,0,.60),
        rgba(0,0,0,.55)
    );

}

.page-hero .container{

    position: relative;

    z-index: 5;

    max-width: 900px;

    padding: 0 20px;

}

.page-hero span{

    display:inline-block;

    color:#F4C400;

    font-size:15px;

    font-weight:600;

    letter-spacing:4px;

    margin-bottom:18px;

    text-transform:uppercase;

}

.page-hero h1{

    font-size:56px;

    font-weight:700;

    line-height:1.15;

    margin-bottom:18px;

}

.page-hero p{

    font-size:20px;

    line-height:1.8;

    max-width:760px;

    margin:auto;

    opacity:.95;

}

/*==================================================
            FONDOS
==================================================*/

.empresa-hero::before{

    background-image:url("../img/hero2.jpg");

}

.productos-hero::before{

    background-image:url("../img/hero1.jpg");

}

.galeria-hero::before{

    background-image:url("../img/hero4.jpg");

}

.contacto-hero::before{

    background-image:url("../img/hero3.jpg");

}


/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:992px){

.page-hero{

height:38vh;

min-height:300px;

}

.page-hero h1{

font-size:42px;

}

.page-hero p{

font-size:17px;

}

}

@media(max-width:768px){

.page-hero{

height:34vh;

min-height:260px;

}

.page-hero span{

font-size:13px;

letter-spacing:2px;

}

.page-hero h1{

font-size:34px;

}

.page-hero p{

font-size:15px;

line-height:1.6;

}

}