.borde{
    width: 100%;
    height: 90vh;
    /* border: 2px solid black; */
}
.comp{
    width: 100%;
    max-width: 1200px;
    min-width: 300px;
    height: 100%;
    display: flex;
    flex-flow: column;
    /* background-color: black; */
    padding: 20px;
    margin: auto;
}
/* A */
.a{
    /* background-color:blue ; */
    flex: 1;
    display: flex;
    padding: 20px;
}
.a1{
    /* background-color: white; */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    
    padding: 40px;
    
}
.atitulo{
    /* flex: 1; */
    font-size: 40px;
}
.atexto{
    /* flex: 1; */
    font-size: 20px;
}   

.a2{
    /* background-color: red; */
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 10px;
}
.a2 > div{
    flex: 1;    
    text-align: center;
    /* background-color: black;     */
    display: flex;
}


.a21{
    justify-content: start;
    width: 100%;
}
.rate-c{
    background-color:skyblue;
    width: 50%;
    height: 100px;  
    border-radius: 15px;  
}
.a21{
    justify-content: start;
}
.a22{
    /* background-color:skyblue; */
    justify-content: center;
}
.a23{
    /* background-color:skyblue; */
    justify-content: end;
}


.rate-c >h3{
    font-size: 40px;
    margin-bottom: 10px;
}
.rate-c>p{
    font-size: 23px;
}

/* tarjeta */
.tarjeta-header{
    display: flex;    
}
.tarjeta-header > picture>img{
    width: 90px;
    border-radius: 40px;
    /* border: 2px white solid; */
}
.tarjeta-text{
    padding: 10px;
    margin-bottom: 15px;
}
.tarjeta-texto>p{
    font-size: 20px;
}
.tarjeta-text> h1{
    font-size: 30px;
    font-weight: 400;
}
.tarjeta-text>p{
    font-weight: 100;
    font-size: 20px;
}


/* B */
.b{
    flex: 1;
    /* background-color: yellow; */
    padding: 20px;
    display: flex;    
    gap: 30px;
    color: white;
}
.b > div{
    display: flex;    
    height: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    border-radius: 20px;
    padding: 20px;background-color: black;
}
.b1{
    flex: 1;
    
}
.b2{
    flex: 1;
    /* background-color: red; */
}
.b3{
    flex: 1;
    /* background-color: blue; */
}
@media (max-width:846px) {
    .a{
        flex-direction: column;
    }
    .atitulo{
        font-size: 80px;
        margin-bottom: 20px;
    }
    .atexto{
        font-size: 40px;
    }
    .a1{
        aspect-ratio: 2/1;
        text-align: center;
    }
    .b{
        flex-direction: column;
        aspect-ratio: 1/1;
    }
    .a2{
        aspect-ratio: 0.8/1;
    }
    .a2 > div{
        /* background-color:green; */
        justify-content: center;
        align-items: center;
    }
    .a2 > div > .rate-c{
        width: 70%;
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 25px;
    }
    .rate-c>h3{
        font-size: 60px;
    }
    .rate-c>p{
        font-size: 35px;
    }
    .b{
        height: 1000px;
    }
    .b > div {
        padding: 80px;        
    }
    .b1{
        height: 300px !important;
    }
}


@media (max-width:1130px) {
    .rate-c>p{
        font-size: 20px;
    }
}