@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&family=Prata&display=swap");
.titulo, .principal div h1, .clases div h1, .servicios div h1, .sobre div h1 {
  font-size: 3.4em;
  font-family: "Prata"; }

/*Resets*/
*,
*::before,
*::after {
  margin: 0px;
  border: 0px;
  box-sizing: border-box;
  padding-inline-start: 0px;
  margin-block-start: 0px;
  padding-inline-end: 0px;
  margin-block-end: 0px; }

/*Body*/
body {
  font-family: "Open Sans";
  font-size: 62.5%;
  padding: 5px 10% 20px 10%;
  min-height: 100vh; }
  body a {
    text-decoration: none;
    color: #000000; }
    body a:visited {
      color: #000000; }
 

@media screen and (max-width: 720px) {
  body {
    width: 100vw; } }

@media screen and (min-width: 721px) and (max-width: 1024px) {
  main {
    padding-bottom: 3vh; } }

header {
  margin-bottom: 20px; }
  header nav {
    text-align: left;
    font-size: 1.8em;
    display: flex;
    flex-direction: row;
    justify-content: space-between; }
    header nav ul {
      list-style-type: none;
      display: flex;
      flex-direction: row;
      justify-content: space-between; }
      header nav ul li {
        margin-left: 55px; }

#miniMenu {
  display: none; }

.paginaSeleccionada {
  font-weight: 600; }

@media screen and (max-width: 720px) {
  header nav ul {
    display: none; }
  #miniMenu {
    display: block;
    text-align: right; }
    #miniMenu:hover .subMenu {
      margin: 10px 0px 0px 0px;
      display: flex;
      flex-direction: column;
      display: block; }
  .subMenu > li {
    margin: 0px; } }

footer {
  text-align: center;
  position: fixed;
  width: 80vw;
  background-color: #FFFFFF;
  bottom: 0px;
  padding-bottom: 9px; }
  footer a {
    text-decoration: none;
    font-size: 1.6em;
    margin-left: 0vw;
    margin-right: 0vw; }
    footer a.linkedin {
      text-decoration: none;
      font-size: 1.6em;
      margin-left: 10vw;
      margin-right: 10vw; }
    footer a:visited {
      color: #000000; }
    footer a:hover {
      color: #414141; }

@media screen and (max-width: 720px) {
  footer {
    padding-top: 5vh;
    position: relative;
    width: 80vw; } }

@media screen and (min-width: 721px) and (max-width: 1024px) {
  footer {
    padding-top: 2vh; } }

.principal {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 2%;
  justify-content: center;
  margin-top: 9vh; }
  .principal div p {
    font-family: "Prata";
    font-size: 2.2em; }

.textoDerecha {
  text-align: right; }

.textoAbajo {
  align-self: end; }

.lineaAbajo {
  border-bottom: 2px solid #000000; }

.lineaArriba {
  border-top: 2px solid #000000; }

@media screen and (max-width: 720px) {
  .principal {
    grid-template-columns: 1fr;
    text-align: center; }
  .textoDerecha {
    text-align: center; } }

@media screen and (min-width: 721px) and (max-width: 1024px) {
  .principal {
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 1vh; } }

.clases {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  grid-column-gap: 2%;
  justify-content: center;
  margin-top: 9vh; }
  .clases div h1 .lineaArriba {
    border-top: 2px solid #000000; }
  .clases div p {
    font-family: "Prata";
    font-size: 2.2em; }
    .clases div p .texto {
      font-family: "Open Sans";
      font-size: 1.6em;
      text-align: justify; }
  .clases div .textoAbajo {
    align-self: end; }
  .clases p.texto {
    font-family: "Open Sans";
    font-size: 1.6em;
    text-align: justify; }

@media screen and (max-width: 900px) {
  .clases {
    grid-template-areas: "titulo" "foto" "subtitulo" "texto";
    grid-template-columns: 1fr; }
    .clases div h1 {
      grid-area: titulo; }
    .clases div picture {
      grid-area: foto; }
    .clases div p {
      grid-area: subtitulo; }
    .clases > p {
      grid-area: texto; } }

.contacto {
  display: grid;
  grid-template-areas: "form texto" "form foto";
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 2%;
  margin-top: 9vh; }
  .contacto form {
    grid-area: form;
    font-family: "Open Sans";
    font-size: 2em; }
  .contacto div {
    grid-area: texto;
    font-family: "Prata";
    font-size: 2.2em;
    text-align: right; }
  .contacto picture {
    grid-area: foto;
    text-align: right; }
  .contacto form {
    display: flex;
    flex-direction: column;
    gap: 1vh; }
    .contacto form input, .contacto form span, .contacto form select, .contacto form textarea, .contacto form button {
      font-family: "Open Sans";
      font-size: 0.7em;
      background-color: #DDDDDD;
      padding: 3%; }
    .contacto form textarea {
      min-height: 30vh; }
    .contacto form button {
      cursor: grab; }

@media screen and (max-width: 900px) {
  .contacto {
    grid-template-areas: "form" "texto" "foto";
    grid-template-columns: 1fr; }
    .contacto picture img {
      max-width: 95%; } }

.portfolio ul {
  display: flex;
  justify-content: space-around;
  margin-top: 6vh;
  margin-bottom: 6vh; }
  .portfolio ul li {
    list-style-type: none;
    display: inline;
    font-family: "Open Sans";
    font-size: 2.8em;
    margin-left: 0%; }

.portfolio article h1 {
  font-family: "Prata";
  text-align: left;
  font-size: 3.8em; }

@media screen and (max-width: 900px) {
  .portfolio {
    grid-template-columns: 1fr; }
    .portfolio ul {
      justify-content: space-between; }
      .portfolio ul li {
        font-size: 2em; }
    .portfolio img {
      width: 100%; } }

.servicios {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
  grid-column-gap: 2%;
  justify-content: center;
  margin-top: 9vh; }
  .servicios div h1.lineaAbajo {
    border-bottom: 2px solid #000000; }
  .servicios div p {
    font-family: "Prata";
    font-size: 2.2em; }
  .servicios div.textoDerecha {
    text-align: right; }
  .servicios p.texto {
    font-family: "Open Sans";
    font-size: 1.6em;
    text-align: justify; }

@media screen and (max-width: 900px) {
  .servicios {
    grid-template-columns: 1fr; } }

.sobre {
  display: grid;
  grid-template-areas: "foto titulo" "foto texto";
  grid-template-columns: 1fr 3fr;
  grid-column-gap: 2%;
  grid-row-gap: 20px;
  justify-content: center;
  margin-top: 9vh; }
  .sobre picture {
    grid-area: foto; }
  .sobre div {
    grid-area: titulo; }
    .sobre div h2 {
      font-size: 2.2em;
      font-family: "Prata";
      margin-top: -10px;
      border-bottom: 2px solid #000000;
      padding-right: 7px;
      width: fit-content; }
  .sobre p {
    font-family: "Open Sans";
    font-size: 1.6em;
    grid-area: texto;
    text-align: justify; }

@media screen and (max-width: 900px) {
  .sobre {
    grid-template-areas: "titulo" "foto" "texto";
    grid-template-columns: 1fr; } }