@import url("../_CORE_/css/background_home.css");
@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@400;500;800&family=Roboto:wght@400;500&display=swap');

body {
    width: 100vw;
    height: 100vh;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    margin: 0; padding: 0;
    color: white;
    background-color: rgb(240, 13, 255, .8);
    opacity: 0;
    font-family: var(--font_prime);
}
.entrada_suave {
    animation: entrada_suave 1.5s linear forwards;
}
  @keyframes entrada_suave {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }

:root{
    --font_prime : 'Mitr', 'verdana', sans-serif;
    --font_secun: 'Roboto', sans-serif;
}

.logo_home{
    display: flex; justify-content: center; align-items: center;
    width: auto; aspect-ratio: 1/1;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
}
.logo_home img{ width: 220px; aspect-ratio: 1/1;}
.logo_home span{ 
    margin: 0 auto;
    padding-top: .5em;
    font-family: var(--font_prime); 
    font-size: 1.3rem;
    line-height:1.3rem;
    text-align: center; 
}
.foto_home, .hero_home{
    display: flex; justify-content: center; align-items: center;
    width: 50vw;
    height: 100vh;
}
.foto_home{
    position: absolute;
    height: 100vh;
    background-image: url('../home/home_idpocket.png');
    background-size: cover;
    background-position: center;
}
.caption_box{
    position: absolute; bottom: 0;
    display: flex;  flex-wrap: wrap; align-items: center;
    width: calc(50vw - 5%);
    height: auto; min-height: 200px;
    padding-bottom: 5em;
}
.foto_caption{
    border-radius: .3em;
    font-size: 5rem;
    line-height: 4rem;
    font-family: var(--font_prime);
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 0, 0, 1);
}
.foto_caption_detalle{
    display: flex; justify-content: center; align-items: center;
    width: 100%;
    height: auto;
    margin-top: .5em;
    padding: .5em;
    font-family: var(--font_prime);
    font-size: 2.3rem;
    background-color: rgb(240, 13, 255, .8);
    text-align: center;
    line-height: 1.8rem;
    border-radius: .3em;
}
.caption_box{
    width: calc(80vw);
}
.foto_home{
    position: relative;
    background-position: calc(center);
    width: 100%;
    height: 100%;
}
.hero_home{
    width: 100vw;
    height: auto;
}
.foto_caption{
    font-size: 7rem;
    line-height: 6rem;
}
.foto_caption_detalle{
    font-size: 4rem;
    line-height: 4rem;
    padding: .2em 1em;
}   
.logo_home{
    position: absolute; top: 0; right: 0;
    width: 300px;
    margin: 2em;
}
.logo_home span{
    font-size: 3rem;
    line-height: 3rem;
}
.cta{
    display: flex; justify-content: center; align-items: center;
    width: 100%;
    height: auto;
    padding: .5em;
}
.cta img{ width: 90px; height: auto;}
.cta a{
    display: flex; justify-content: center; align-items: center;
    width: auto;
    height: auto;
    margin-top: .5em;
    padding: .3em .5em;
    font-size: 4rem;
    line-height: 4rem;
    font-weight: 500;
    text-transform: capitalize;
    color: rgb(191, 28, 197);
    background-color: #ffde1c;
    cursor: pointer;
    text-decoration: none;
    border-radius: .5em;
}
.cta a:hover{ scale: 1.05; transition: all .3s ease;}
.tienda_group{
    display: flex; flex-wrap: wrap; justify-content: center;
    width: 100vw;
    height: 50vh;
    overflow: hidden;
    overflow-y: scroll;
    box-sizing: border-box;
}
.tienda_group{
    display: flex; flex-wrap: wrap; justify-content: center;
    width: 100%;
    height: calc(100%);
    overflow: hidden;
    overflow-y: scroll;
    box-sizing: border-box;
}
.tienda_box{
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    width: 100%;
    height: auto;
}
.tienda_card:hover{scale: 1.05;}
.tienda_card img{ scale: 1.01; width: 100%; height: auto; object-fit: cover; object-position: top center;}
.tienda_card{
    width: 290px; aspect-ratio: 9/16;
    margin: 1em;
    border-radius: .8em;
    overflow: hidden;
    transition: all .3s ease;
    cursor: pointer;
}
.sub_titulo {
    width: 100%;
    margin-top: .5em;
    font-family: var(--font_prime);
    font-size: 5rem;
    line-height: 5rem;
    text-align: center;
}
.caracteristicas_box{
    display: flex; flex-wrap: wrap; justify-content: center;
    width: 100%;
    min-height: 300px;
}
.caracteristicas_group{
    display: flex; flex-wrap: wrap; justify-content: center;
    width: 100%;
    min-height: 50px;
    margin: 1em;
    margin-top: 3em;
}
.caracteristicas_group video{
    width: 100%;
    border-radius: 1em;
}
/* === */
.caracteristicas_card{
    display: flex; align-items: center;
    width: 400px;
    height: auto;
    margin: .6em;
    padding: 1em;
    border-radius: .8em;
    background-color: rgb(191, 28, 197)
}
.caracteristicas_icon{
    display: flex; 
    width: 50%; aspect-ratio: 1/1;
    padding: .5em; 
    background-color: #ffde1c;
    border-radius: .5em;
}
.caracteristicas_icon svg{
    width: auto;
    stroke: rgb(191, 28, 197);
}
.caracteristicas_text{
    width: 100%;
    padding-left: .5em;
    font-size: 2.8rem;
    line-height: 2.8rem;
    font-family: var(--font_prime);
}

@media (min-width: 1200px) {
    .hero_home{
        position: relative;
        display: flex; flex-wrap: wrap;
    }
    .logo_home{
        width: 150px; aspect-ratio: 1/1;
    }
    .logo_home img{ width: 110px; aspect-ratio: 1/1;}
    .logo_home span{ 
        width: max-content;
        margin: 0 auto;
        padding-top: .5em;
        font-family: var(--font_prime); 
        font-size: 1.3rem;
        line-height: 1.3rem;
        text-align: center; 
    }
    .foto_home, .hero_home{
        display: flex; justify-content: center; align-items: center;
        width: 50vw;
        height: 100vh;
    }
    .foto_home{
        height: 100vh;
        background-image: url('../home/home_idpocket.png');
        background-size: cover;
        background-position: center;
    }
    .caption_box{
        position: absolute; bottom: 0;
        display: flex;  flex-wrap: wrap; align-items: center;
        margin-bottom: 2em;
        width: calc(50vw - 5%);
        height: auto; min-height: 200px;
    }
    .cta{
        display: flex; justify-content: center; align-items: center;
        width: 100%;
        height: auto;
        padding: .5em;
    }
    .cta img{ width: 40px; height: auto;}
    .cta a{
        display: flex; justify-content: center; align-items: center;
        width: auto;
        height: auto;
        padding: .4em .5em;
        font-size: 1.8rem;
        line-height: 1.8rem;
        font-weight: 500;
        text-transform: capitalize;
        color: rgb(191, 28, 197);
        cursor: pointer;
        text-decoration: none;
        border-radius: .5em;
    }
    .cta a:hover{ scale: 1.05; transition: all .3s ease;}
    .foto_caption{
        padding: calc(55%) 0 0 .5em;
        border-radius: .3em;
        font-size: 5rem;
        line-height: 4rem;
        font-family: var(--font_prime);
        text-shadow: 0 0 10px rgba(0, 0, 0, 1);
    }
    .foto_caption_detalle{
        display: flex; justify-content: center; align-items: center;
        width: 100%;
        height: auto;
        margin-top: .5em;
        padding: .5em;
        font-family: var(--font_prime);
        font-size: 2.3rem;
        background-color: rgb(240, 13, 255, .8);
        text-align: center;
        line-height: 1.8rem;
        border-radius: .3em;
    }
    .tienda_titulo{
        position: absolute; top: 0; right: 0;
        display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
        width: 100%;
        height: auto;
        margin-top: .5em;
        font-family: var(--font_prime);
        font-size: 2.5rem;
        text-align: center;
    }
    .tienda_group{
        display: flex; flex-wrap: wrap; justify-content: center;
        width: 100%;
        height: calc(100%);
        overflow: hidden;
        overflow-y: scroll;
        box-sizing: border-box;
    }
    .tienda_box{
        display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
        width: 100%;
        height: auto;
    }
    .tienda_card:hover{scale: 1.05;}
    .tienda_card img{ scale: 1.01; width: 100%; height: auto; object-fit: cover; object-position: top center;}
    .tienda_card{
        width: 160px; aspect-ratio: 9/16;
        margin: 1em;
        border-radius: .8em;
        overflow: hidden;
        transition: all .3s ease;
        cursor: pointer;
    }
    .sub_titulo {
        width: 100%;
        margin-top: 1.5em;
        font-family: var(--font_prime);
        font-size: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
    }
    .caracteristicas_box{
        display: flex; flex-wrap: wrap; justify-content: center;
        width: 100%;
        min-height: 300px;
    }
    .caracteristicas_group{
        display: flex; flex-wrap: wrap; justify-content: center;
        width: 100%;
        min-height: 50px;
        margin: 1em;
    }
    .caracteristicas_group video{
        width: 100%;
        border-radius: 1em;
    }
    .caracteristicas_card{
        display: flex; align-items: center;
        width: 150px;
        height: auto;
        margin: .6em;
        padding: 1em .5em;
        border-radius: .8em;
        background-color: rgb(191, 28, 197)
    }
    .caracteristicas_icon{
        display: flex; 
        width: 50%; aspect-ratio: 1/1;
        padding: .5em; 
        background-color: #ffde1c;
        border-radius: .5em;
    }
    .caracteristicas_icon svg{
        width: auto;
        stroke: rgb(191, 28, 197);
    }
    .caracteristicas_text{
        width: 100%;
        padding-left: .5em;
        font-size: 1rem;
        line-height: 1rem;
        font-family: var(--font_prime);
    }





    

}