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

.main-content{
    padding: 0;
}

.banner{
    color: #fff;
    text-align: center;
    background: #316FF6;
    padding: 30px 60px;
}

.banner-content{
    background: #fff;
    border-radius: 20px;
    padding: 15px;
}

.img-box{
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(/assets/img/banner/fondo2.jpeg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    padding: 20px;
}

.img-box H2{
    font-size: 2rem;
    padding: 20px 0;
}

.img-box p:nth-child(2),
.img-box p:nth-child(3){
    margin-bottom: 20px;
}

.img-box .left{
    text-align: start;
    padding-left: 100px;
}

.img-box .left:last-child{
    margin: 20px 0;
}

.bxs-tag-alt{
    color: blue;
}

.bxs-hand-right{
    color: yellow;
}


/* 3. CELULAR EN PORTRAIT (768px o menos, vertical) */
@media screen and (max-width: 767px) and (orientation: portrait) {
  .banner{
        padding: 87px 10px 30px 10px;   
    }

    .img-box H2{
    font-size: 1.5rem;
    }

    .img-box p:nth-child(2),
    .img-box p:nth-child(3){
        margin-bottom: 10px;
    }

    .img-box .left{
        text-align: start;
        padding-left: 0px;
    }
}

/* 4. CELULAR EN LANDSCAPE (Horizontal) */
/* Se detecta cuando el ancho es mayor al alto en pantallas pequeñas */
@media screen and (max-width: 900px) and (orientation: landscape) {
  .banner{
        padding: 70px 10px 30px 10px;   
    }

    .img-box H2{
    font-size: 1.5rem;
    }

    .img-box p{
        font-size: .55rem;
    }

    .img-box p:nth-child(2),
    .img-box p:nth-child(3){
        margin-bottom: 10px;
    }

    .img-box .left{
        text-align: start;
        padding-left: 0px;
    }
}


.banner,
.banner-content,
.img-box {
  max-width: 100%;
  overflow-x: hidden;
}

.img-box h2,
.img-box p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}