*{
    font-family: 'Helvetica';
    margin: 0;
    box-sizing: border-box;

}

body{
    background-color: rgb(252, 252, 252);
}

header{
    display: flex;
    align-items: center;
    margin-left: 20px;
    margin-right: 20px;
}

a{
    text-decoration: none;
    color: rgb(1, 79, 168);
    transition: 2s ease;
    margin-left: 30px;
}

a:hover {
    transform: scale(1.3);
}

header img {
    height: 80px;
}

nav{
    margin-left: auto;
}

hr {
    border: 1px solid gray;
    margin-left: 20px;
    margin-right: 20px;
}

article{
    background-image: url(./IMG/portada.jpg);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 2);
    color: white;
    height: 60vh;
    align-content: end;
    padding: 20px;
    grid-column: span 3;
    grid-row: 1;

}

.todo{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(3, 5fr);
    grid-gap: 0px;
}

aside hr {
    border: 1px solid rgb(1, 79, 168);
    width: 10%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 22px;
}

aside {
    text-align: center;
    width: 95%;
    grid-row: 2;
    grid-column: span 3;
    margin-left: 20px;
    margin-right: 20px;
}

.griddestacadas{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    margin-top: 25px;
    grid-gap: 60px;
}

.uno, .dos, .tres {
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 2);
    background-color: white;
    text-align: left;
}

img{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.uno {
    grid-column: 1;
    grid-row: 1;
}

.dos{
    grid-column: 2;
    grid-row: 1;
}

.tres {
    grid-column: 3;
    grid-row: 1;

}
.uno img{
    height: 45%;

}
.dos img{
    height: 45%;

}
.tres img{
    height: 45%;

}
.uno hr {
    width: 90%;
    border: 1px solid rgb(204, 203, 203);
}
.dos hr {
    width: 90%;
    border: 1px solid rgb(204, 203, 203);
}
.tres hr {
    width: 90%;
    border: 1px solid rgb(204, 203, 203);
}

.uno h3 {
    color: rgb(1, 79, 168);
    margin: 10px;
}


.dos h3 {
    color: rgb(1, 79, 168);
    margin: 10px;
}


.tres h3 {
    color: rgb(1, 79, 168);
    margin: 10px;
}

.uno p {
    color: rgb(209, 209, 209);
    margin: 10px;
    font-size: large;
}

.dos p {
    color: rgb(209, 209, 209);
    margin: 10px;
}

.tres p {
    color: rgb(209, 209, 209);
    margin: 10px;
}

.uno b {
    color: rgb(1, 79, 168);
    margin: 10px;
    font-size: x-large;
}

.dos b {
    color: rgb(1, 79, 168);
    margin: 10px;
    font-size: x-large;
}

.tres b {
    color: rgb(1, 79, 168);
    margin: 10px;
    font-size: x-large;
}

.propiedades {
    display: flex;
    flex-direction: row;
    gap: 50px ;
    width: 90%;
    margin-top: 30px;
    margin-left: 27px;
    
}

.first {
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.72);
    border-radius: 15px;

}

.second {
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.72);
    border-radius: 15px;

}

.third {
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.72);
    border-radius: 15px;

}

.fourth {
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.72);
    border-radius: 15px;

}

.first img {
    height: 270px;
    margin-bottom: 20px;
}

.second img {
    height: 270px;
    margin-bottom: 20px;

}

.third img {
    height: 270px;
    margin-bottom: 20px;

}

.fourth img {
    height: 270px;
    margin-bottom: 20px;

}

.nose h1 {
    color:rgb(1, 79, 168) ;
}

.nose {
    text-align: center;
    margin-top: 30px;
    grid-row: 3;
    grid-column: span 3;
    overflow: hidden;
    height: auto;
    box-sizing: content-box;
}

.nose hr {
    border: 1px solid rgb(1, 79, 168);
    width: 10%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 22px;
}

.first p {
    margin-top: 20px;
    margin-bottom: 20px;
    color: rgb(129, 129, 129);
}

.second  p {
    margin-top: 20px;
    margin-bottom: 20px;
    color: rgb(129, 129, 129);

}

.third  p {
    margin-top: 20px;
    margin-bottom: 20px;
    color: rgb(129, 129, 129);

}

.fourth  p {
    margin-top: 20px;
    margin-bottom: 20px;
    color: rgb(129, 129, 129);

}


.first h3 {
    color:rgb(1, 79, 168) ;

}

.second  h3 {
    color:rgb(1, 79, 168) ;


}

.third  h3 {
    color:rgb(1, 79, 168) ;

}

.fourth  h3 {
    color:rgb(1, 79, 168) ;


}

.abajo {
    background-color:rgb(2, 59, 124)  ;
    color: white;
    display: flex;
    flex-direction: column;
    grid-row: 4;
    grid-column: span 3;
    height: 200px;
    text-align: center;
    padding: 20px;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 15px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 1);
    gap: 35px;
}

.abajo input {
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    height: 60px;
    border-radius: 10px;
    color: white;
    box-shadow: 0 0 3px rgba(0, 0, 0, 1);
    border: none;
    background-color:rgb(58, 115, 180)  ;
    transition: 2s;

}

.abajo input:hover {
    transform: scale(1.3);
}

footer {
    background-color:rgb(2, 59, 124)  ;
    margin: 0;
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    color: white}


.encima {
        display: flex;
        flex-direction: row;
        gap: 20px;
        margin-bottom: 10px;
}
.encima div{
    width: 200px;

}

.encima div p {
    margin-top: 10px;
}

.encima div hr {
width: 100%;
border: 1px solid rgba(0, 89, 255, 0.726);}

.debajo hr{
    width: 100%;
    border: 1px solid rgba(0, 89, 255, 0.726);
    margin-bottom: 15px;
}

.debajo {
    margin-bottom: 10px;
}