/* ===========================================================
   TABLET VERTICAL
=========================================================== */

@media (max-aspect-ratio:9/20) and  (orientation:portrait){
.hero{

    background-image:url("../img/Index/Flaco-movil.jpg");
    width: auto;
    height: 100vh;
    object-fit: contain;
   background-position: center;
}

img{
    height: 34%;
    width: 30%;
}

.contenido{

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    gap:25px;

    width:100%;

}

.boton{

    border:none;

    padding:0;

}

.subtitulo{

    font-size:20px;

}

h1{

    font-size:18px;

}

.btn{

    width:220px;
    height:55px;

}
}
/* ===========================================================
   TABLET VERTICAL copia
=========================================================== */

@media (min-aspect-ratio:9/20) and  (orientation:portrait){
.hero{

    background-image:url("../img/Index\ Flaco-movil.jpg");
    /* background-size:cover;
    background-position:center;
    justify-content:center;
    align-items:center;
    padding:0; */
    width: 100vw;
    height: auto;
    object-fit: contain;
    background-position: top;

}

.contenido{

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    gap:25px;

    width:100%;

}

img{
    height: 32%;
    width: 32%;
}

.boton{

    border:none;

    padding:0;

}

.subtitulo{

    font-size:20px;


}

h1{

    font-size:18px;
}
.btn{

    width:220px;
    height:55px;

}
}
/* ===========================================================
   TABLET HORIZONTAL
=========================================================== */

@media (max-aspect-ratio:16/9) and (orientation:landscape){

.hero{

    background-image:url("../img/Index\ Flaco-tablet.jpg");
    width: auto;
    height: 100vh;
    object-fit: contain;
   background-position: left;
}
img{
    height: 38%;
    width: 35%;
}
.contenido{
    flex-direction:row;
    margin-left: 20%;
    gap:35px;
}

.boton{
    border-left:1px solid #8cc9a8;
    padding-left:30px;
}

.subtitulo{
    font-size:20px;
}

h1{
    font-size:20px;
}
}
/* ===========================================================
   TABLET HORIZONTAL copia
=========================================================== */

@media (min-aspect-ratio:16/9) and (orientation:landscape){

.hero{

    background-image:url("../img/Index\ Flaco-tablet.jpg");
    width: 100vw;
    height: auto;
    object-fit: contain;
    background-position:top;
}
.contenido{
    flex-direction:row;
    margin-left: 20%;
    gap:35px;
}
img{
    height: 38%;
    width: 35%;
}

.boton{
    border-left:1px solid #8cc9a8;
    padding-left:30px;
}

.subtitulo{
    font-size:20px;
}

h1{
    font-size:20px;
}
}