/*==================================================
COSVIN FRAMEWORK
HERO
Version 1.3.0
==================================================*/

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background-image:
        linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.45)),
        url("/wp-content/themes/cosvin/assets/images/hero/background.webp");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

/* El header es fijo. La portada ocupa solo el viewport restante para que el
   mensaje, título y botones nunca queden detrás del menú con ningún zoom. */
body.home .hero{

    min-height:calc(100vh - var(--cosvin-header-offset,230px));

}

body.home .hero-row{

    min-height:calc(100vh - var(--cosvin-header-offset,230px));

    padding-top:0;

}

.hero .container{

    max-width:var(--container);

}

.hero-row{

    min-height:100vh;

    padding-top:120px;

}

.hero .row{

    --bs-gutter-x:2rem;

}

.hero .col-lg-7{

    max-width:620px;

}

.hero .col-lg-5{

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

/*==================================
TEXTOS
==================================*/

.hero h1{

    font-size:var(--font-size-5xl);

    line-height:.95;

    font-weight:900;

    text-transform:uppercase;

    color:var(--text-white);

    margin-bottom:var(--space-32);

}

.hero p{

    font-size:var(--font-size-lg);

    line-height:1.7;

    max-width:560px;

    color:var(--text-light);

    margin-bottom:var(--space-40);

}

.hero .badge{

    font-size:var(--font-size-sm);

    padding:10px 18px;

    border-radius:50px;

    background:var(--color-secondary);

    color:var(--text-white);

    margin-bottom:var(--space-24);

}

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

.hero .btn{

    min-width:220px;

}

/*==================================
IMAGEN
==================================*/

.hero img{

    max-width:none !important;

    animation:float 5s ease-in-out infinite;

}

.hero-image{

    width:820px;

    max-width:none;

    margin-right:-120px;

    filter:drop-shadow(var(--shadow-neon));

}

/*==================================
ANIMACIÓN
==================================*/

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

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

@media (max-width:1200px){

    .hero h1{

        font-size:4rem;

    }

    .hero-image{

        width:650px;

        margin-right:-40px;

    }

}

@media (max-width:992px){

    .hero{

        text-align:center;

    }

    .hero-row{

        padding-top:180px;

    }

    .hero .col-lg-7{

        max-width:100%;

    }

    .hero .col-lg-5{

        justify-content:center;

        margin-top:60px;

    }

    .hero-image{

        width:500px;

        margin-right:0;

    }

    .hero h1{

        font-size:3.5rem;

    }

}

@media (max-width:768px){

    .hero h1{

        font-size:2.8rem;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-image{

        width:360px;

    }

    .hero .btn{

        width:100%;

        margin-bottom:var(--space-16);

    }

}