html {
    font-size: 62.5%;
    font-family: "Roboto", sans-serif;
}
/*especificaciones 320px*/
@media (min-width: 320px) {
.detalles {
    width: 40%;
    display: block;
}       
.imagen {
    width: 100%;
}
.imagen img {
    width: 100%;
}
.tittle {
    font-size: 1.6rem;
    color: #00667A;
    margin: 15px 0px;
    font-weight: bold;
}
.textoesp {
    width: 100%;  
}
.textoesp h1 {
    font-size: 1.6rem;
    color: #00667A;
    margin-bottom: 30px;
    font-weight: bold;
}
.textoesp ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
}
.parrafoesp {
    font-size: 0.8rem;
    color: #012229;
}
.textoespsubup {
    padding-bottom: 15px;
    font-weight: bold;
    font-size: 0.8rem;
    color: #012229;
}
.textoespup {
    padding-bottom: 15px;
    font-size: 0.8rem;
    color: #012229;
}
.textoespti {
    padding: 15px 0px;
    font-weight: bold;
    font-size: 0.8rem;
    color: #012229;
}
.textoespsub {
    padding: 15px 0px;
    font-size: 0.8rem;
    color: #012229;
}
}
/*especificaciones 768px*/
@media (min-width: 768px) {
.detalles {
    width: 75%;
    display: flex;
}    
.imagen {
    width: 30%;
    margin-right: 30px;
}
.imagen img {
    width: 100%;
}
.tittle {
    font-size: 2.4rem;
    color: #00667A;
    margin-bottom: 30px;
    font-weight: bold;
}
.textoesp {
    width: 70%;  
}
.textoesp h1 {
    font-size: 3.6rem;
    color: #00667A;
    margin-bottom: 30px;
    font-weight: bold;
}
.textoesp ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
}
.parrafoesp {
    font-size: 1.6rem;
    color: #012229;
}
.textoespsubup {
    padding-bottom: 15px;
    font-weight: bold;
    font-size: 1.6rem;
    color: #012229;
}
.textoespup {
    padding-bottom: 15px;
    font-size: 1.6rem;
    color: #012229;
}
.textoespti {
    padding: 15px 0px;
    font-weight: bold;
    font-size: 1.6rem;
    color: #012229;
}
.textoespsub {
    padding: 15px 0px;
    font-size: 1.6rem;
    color: #012229;
}
}
/*especificaciones 1920px*/
@media (min-width: 1920px) {
.detalles {
    width: 50%;
    display: flex;
}    
.imagen {
    width: 30%;
    margin-right: 30px;
}
.imagen img {
    width: 100%;
}
.tittle {
    font-size: 2.4rem;
    color: #00667A;
    margin-bottom: 30px;
    font-weight: bold;
}
.textoesp {
    width: 70%;  
}
.textoesp h1 {
    font-size: 3.6rem;
    color: #00667A;
    margin-bottom: 30px;
    font-weight: bold;
}
.textoesp ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
}
.textoespsubup {
    padding-bottom: 15px;
    font-weight: bold;
    font-size: 1.6rem;
    color: #012229;
}
.textoespup {
    padding-bottom: 15px;
    font-size: 1.6rem;
    color: #012229;
}
.parrafoesp {
    font-size: 1.6rem;
    color: #012229;
}
.textoespti {
    padding: 15px 0px;
    font-weight: bold;
    font-size: 1.6rem;
    color: #012229;
}
.textoespsub {
    padding: 15px 0px;
    font-size: 1.6rem;
    color: #012229;
}
}