/*** General ***/

html, body {
    margin: 0 auto;
    font-family: Arial,'Times New Roman';
    /*font-family: 'Montserrat', sans-serif;*/
}

/***************** HEADER **********************/
.header {
    background-color: white;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 125px;
    box-shadow: 0px 6px 18px -7px rgba(0,0,0,0.25);
    gap: 1rem;
}

.logo {
    grid-column: 2/4;
    align-self: center;
}

.logo img {
    width: 25rem;
}

.registro {
    grid-column: 6/9;
    align-self: center;
    justify-self: center;
}

.registro h1 {
    color: #7bc9fb;
    font-size: 1.5rem;
}

.idiomas {
    display: flex;
    grid-column: 10/12;
    align-self: center;
    justify-self: flex-end;
    gap: 3rem;
}

/***************** INTRODUCCIÓN *********************/
.introduccion {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 200px;
    gap: 1rem;
    margin-top: 3rem;
}

.volverinicio {
    grid-column: 2/4;
    grid-row: 1
}

.texto {
    grid-column: 3/11;
    grid-row: 2;
    text-align: center;
}

.text p {
    font-weight: 400;
    font-size: 1rem;
}

/*************** responsive ***************/
/******* escritorios anchos ********/
@media (max-width: 1200px) {
.logo img {
    width: 12rem;
}

.registro h1 {
    font-size: 1.2rem;
}

.idiomas img {
    width: 2.5rem;
}
 }

 /****** tablets *******/
 @media (max-width: 1024px) {
.header {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 100px;
}

.introduccion {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 50px 150px;
}

.logo {
    grid-column: 1/3;
    margin-left: 2rem;
}

.logo img {
    width: 10rem;
}

.registro {
    grid-column: 3/7;
    align-self: center;
    justify-self: center;
}

.registro h1 {
    font-size: 1.2rem;
}

.idiomas {
    grid-column: 7/9;
    margin-right: 2rem;
    gap: 2rem;
}

.volverinicio {
    grid-column: 1/5;
    font-size: 0.9rem;
    margin-left: 2rem;
}

.texto {
    grid-column: 1/9;
    font-size: 0.9rem;
    margin: 0 2rem 0 2rem;
}

 }

 /***** tablets en vertical *****/
 @media (max-width: 768px) {
.registro {
    grid-column: 4/7;
}

.registro h1 {
    font-size: 1rem;
}

.idiomas {
    display:grid;
    gap: 1rem;
}

.volverinicio {
    grid-column: 1/8;
    margin-left: 2rem;
}

.texto {
    grid-column: 1/9;
    margin: 0 2rem 0 2rem;
}
 }

  /***** móviles landscape *****/
  @media (max-width: 599px) {
.logo {
    margin-left: 1rem;
}

.logo img {
    width: 8rem;
}

.registro h1 {
    font-size: .9rem;
}

.idiomas img {
    width: 2rem;
}

.idiomas {
    margin-right: 1rem;
}

.volverinicio {
    margin-left: 1rem;
}

.texto {
    margin: 0 1rem 0 1rem;
}
  }

/***** móviles portrait *****/
@media (max-width: 479px) {
.logo img {
    width: 7rem;
}

.registro h1 {
    font-size: .7rem;
}

.idiomas {
    gap: .5rem;
}

.idiomas img {
    width: 1.5rem;
}

.volverinicio a {
    font-size: .8rem;
}

.texto p {
    font-size: .8rem;
}
}