*{
    box-sizing: border-box;
    width: 100%;
}
body{
    font-family: "Poppins", sans-serif;
}
nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#menu_navar{
    display: none;
}

.centrar{
    text-align: center;
}

@keyframes show {
    from{
        opacity: 0;
        scale: 25%;
    }

    to{
        opacity: 1;
        scale: 100%;
    }
}

img{
    view-timeline-name: --image;
    view-timeline-axis: block;

    animation-timeline: --image;
    animation-name: show;

    animation-range: entry 25% cover 30% ;
    animation-fill-mode: both;
}

h4,li,a,div,select{
    font-family: "Poppins", sans-serif;
}

a{
    text-decoration: none;
}
.logo{
    width: 30%;
    text-align: center;
}
.logo h1{
    font-weight: 700;
    font-size: 28px;
    color:#ffffff;
}

.logo h1 span{
    font-size: 15px;
}


.cabecera {
    background-image: url('/img/cabezera.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
    
}
.fondo_cabecera{
   background-color: #0A369D;
   padding: 6px 0px;
}
.menu{
    text-align: center;
    display: flex;
    justify-content: space-around;
}
.menu a{
    color:#ffffff;
    text-decoration: none;
}


.titulo{
    width: 35%;
    margin: 7rem 3rem;
}
.titulo h4{
    margin-bottom: 1.5rem;
}
.titulo h3{
    font-weight: 800;
    font-size: 35px;
}
.titulo p{
    margin-top: 1.5rem;
    font-size: 25px;
    font-weight: 500;
}

.titulo button{
    border: 0px;
    border-radius: 50px;
    background-color: #AFD9D5;
    padding: 13px 10px;
    width: 35%;
    font-weight: 700;
    font-size: 20px;
    margin-top: 3rem;
    margin-left: 7rem;
}

.alinear_abajo{
    padding-top: 29rem;
}

.letra_inicio h4{
    color: #24AEF2;
    font-weight: 600;
    font-size: 30px;
}

.letra_inicio span{
    color:#2623C1;
    font-weight: 600;
}


.titulo_venta h3{
    color: #000000;
    font-weight: 900;
}

.alienar_canales h4{
    margin: 15px 0px;
}

.imagen_medio img{
    width: 90%;
    border-radius: 10px;
}
.icon_medio img{
    width: 20%;
}

.icono_sistema ul li{
    list-style: none;
    line-height: 70px;
    font-weight: 600;
    color:#24AEF2;
}

.icono_sistema img{
    width: 20%;
}

.img_empresa{
    display: flex;
}
.img_empresa li{
    list-style: none;
}

.azul {
    color:#2623C1;
    font-weight: 700;
    text-transform: uppercase;
}

.alinearTextoNosotros{
   padding-top: 2.8rem;
}

.btn_enviar{
    background-color: #2623C1;
    color:#ffffff;
    border: 0px;
    border-radius: 5px;
    padding: 5px 0px;
}

.btn_enviar:hover{
    background-color: #24AEF2;
}

.borde_soluciones{
    background-color: #E4E4E7;
    padding: 1rem 0.5rem 4rem 0.5rem;
    /* height: 350px; */
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
}
.borde_soluciones h4{
    font-size: 18px;
}

.noso_ul ul li{
    line-height: 35px;
}

.altura{
    height: 40rem;
}
.altura:hover{
    transition: all 0.5s ease;
    transform: scale(1.1);
}

.plan01{
    background-color: #E4E4E7;
    padding: 1rem 0.5rem 1rem 0.5rem;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

.plan02{
    background-color: #E4E4E7;
    padding: 1rem 0.5rem 1rem 0.5rem;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

.plan03{
    background-color: #E4E4E7;
    padding: 1rem 0.5rem 1rem 0.5rem;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
    margin: 10px 0px;
}
footer{
    background-color: #0A369D;
    margin-top: 50px;
}
footer ul li{
    list-style: none;
    color:#ffffff;
    font-size: 15px;
    line-height: 28px;
   
}

footer ul li h1{
    font-size: 28px;
}

footer ul li span{
    font-size: 13px;
}

footer ul{
    padding: 35px 0px;
}

@media (max-width: 1199px) and (min-width:992px) {
    .cabecera {
        height: 50vh;
    }
    .titulo button{
        margin-left: 0rem;
        padding: 8px 25px 8px 15px;
        font-size: 17px;
        margin-top: 0.6rem;
        font-weight: 500;
    }
}
@media (max-width: 991px) and (min-width:768px) {
    .cabecera {
        height: 50vh;
    }

      /* index */
    .titulo{
        width: 40%;
        margin: 4rem 0.5rem;
    }
    .titulo h3{
        font-size: 20px;
        font-weight: 700;
    }
    .titulo p{
        font-size: 18px;
    }

    .titulo button{
        margin-left: 0rem;
        padding: 8px 25px 8px 15px;
        font-size: 17px;
        margin-top: 0.6rem;
        font-weight: 500;
    }

    .logo{
        width: 30%;
        
    }
    .logo h1{
        font-size: 25px;
        font-weight: 600;
        margin-bottom: 0px;
    }

    .logo h1 span{
        font-size: 15px;
        font-weight: 400;
    }


    .logo_modal {
        font-size: 20px;
        width: 40%;
        color: #0A369D;
        font-weight: 600;
    }

    .logo_modal span{
        font-size: 13px;
        color:#24AEF2
    }

     /* PAGINA SOLUCIONES */
     .borde_soluciones{
        margin: 5px 0px;
    }

    .alinearTextoNosotros{
       margin: 0px auto;
    }

    /* nosotros */
    .imagen_medio{
        text-align: center;
    }
}


@media (max-width: 767px) and (min-width:540px) {
    #menu_navar{
        display: block;
        text-align: end;
        color:#ffffff;
        font-size: 30px;
    }
    .cabecera {
        height: 50vh;
    }
     /* index */
     .titulo{
        width: 90%;
        margin: 1.7rem 0.5rem;
    }
    .titulo h3{
        font-size: 20px;
        font-weight: 700;
    }
    .titulo p{
        font-size: 18px;
    }

    .titulo button{
        margin-left: 0rem;
        padding: 10px 10px;
        font-size: 17px;
        margin-top: 0.6rem;
    }

    .menu{
        display: none;
    }

    .fondo_cabecera{
        padding: 10px 15px;
    }

    .fondo_menu{
        background-color: #0A369D;
    }

 
    .navbar-nav li{
        margin: 5px 0px;
        padding: 10px 10px;
    }

    .navbar-nav li a{
        color: #ffffff;
        font-weight: 600;
        text-transform: uppercase;
    }

    .navbar-nav li:hover{
        background-color: #24AEF2;
        padding: 10px 10px;
    }

    .alinear_navbar{
        display: flex;
        align-items: center;
        width: 100%;
    }
    .logo{
        text-align: left;
    }

    .logo{
        width: 80%;
    }
    .logo h1{
        font-size: 30px;
        font-weight: 600;
        margin-bottom: 0px;
    }

    .logo h1 span{
        font-size: 15px;
        font-weight: 400;
    }


    .logo_modal {
        font-size: 20px;
        width: 40%;
        color: #0A369D;
        font-weight: 600;
    }

    .logo_modal span{
        font-size: 13px;
        color:#24AEF2
    }

     /* PAGINA SOLUCIONES */
     .borde_soluciones{
        margin: 5px 0px;
    }

    .alinearTextoNosotros{
       margin: 0px auto;
    }
}
@media (max-width: 539px) {
    #menu_navar{
        display: block;
        text-align: end;
        color:#ffffff;
        font-size: 30px;
    }
    .cabecera {
        height: 60vh;
    }
    .menu{
        display: none;
    }

    .fondo_cabecera{
        padding: 10px 15px;
    }

    .fondo_menu{
        background-color: #0A369D;
    }

 
    .navbar-nav li{
        margin: 5px 0px;
        padding: 10px 10px;
    }

    .navbar-nav li a{
        color: #ffffff;
        font-weight: 600;
        text-transform: uppercase;
    }

    .navbar-nav li:hover{
        background-color: #24AEF2;
        padding: 10px 10px;
    }

    .alinear_navbar{
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 0px;
    }
    .logo{
        text-align: left;
    }
    .logo h1{
        font-size: 20px;
        font-weight: 600;
    }

    .logo h1 span{
        font-size: 13px;
        font-weight: 400;
    }


    .logo_modal {
        font-size: 20px;
        width: 70%;
        color: #0A369D;
        font-weight: 600;
    }

    .logo_modal span{
        font-size: 13px;
        color:#24AEF2
    }
   
    
    /* INICIO */

    .alienar_canales{
        margin: 0px;
        text-align: center;
    }
    .revertir{
        display: flex;
        flex-direction: column-reverse;
        margin: 0.2rem 0rem;
    }
    .letra_inicio h4{
        font-size: 25px;
    }

    .letra_inicio span{
        font-size: 25px;
    }
    /* PAGINA SOLUCIONES */
    .borde_soluciones{
        margin: 5px 0px;
    }

    .alinearTextoNosotros{
       margin: 0px auto;
    }

    /* nostros */
    .imagen_medio{
        text-align: center;
    }

    /* index */
    .titulo{
        width: 90%;
        margin: 1.7rem 0.5rem;
    }
    .titulo h3{
        font-size: 20px;
        font-weight: 700;
    }
    .titulo p{
        font-size: 18px;
    }

    .titulo button{
        margin-left: 0rem;
        padding: 10px 10px;
        font-size: 17px;
        margin-top: 0.6rem;
        font-weight: 500;
        font-size: 16px;
    }


    /* precio */
    .plan01{
        background-color: #E4E4E7;
        padding: 1rem 0.5rem 1rem 0.5rem;
        border-top-left-radius: 40px;
        border-bottom-right-radius: 40px;
        margin: 10px 0px;
    }

    .plan02{
        background-color: #E4E4E7;
        padding: 1rem 0.5rem 1rem 0.5rem;
        border-top-left-radius: 40px;
        border-bottom-right-radius: 40px;
        margin: 10px 0px;
    }

    .plan03{
        background-color: #E4E4E7;
        padding: 1rem 0.5rem 1rem 0.5rem;
        border-top-left-radius: 40px;
        border-bottom-right-radius: 40px;
        margin: 10px 0px;
    }

    footer ul{
        padding: 0px;
    }
}