.montserrat-Montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  font-family: Montserrat;
  scroll-behavior: smooth;
}

.navegacion {
  background-color: #eb4937;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#wrapperNavegacion {
  position: sticky;
  top: 0;
  overflow: hidden;
  z-index: 1;
}

.navItems {
  display: flex;
  flex-direction: row;
  color: white;
  font-weight: 600;
  align-items: center;
  justify-content: space-around;
  gap: 3rem;
  cursor: pointer;
  padding-right: 5%;
}

.Portada {
  display: flex;
  align-items: center;
}

.Portada h1 {
  font-weight: 700;
}

#fondoPortada {
  background-image: url(/imgs/fondoPortada.jpg);
  background-size: cover;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-inline: 20%;
  color: white;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding-block: 10%;
  gap: 2%;
  height: 62vh;
  width: 100vw;
}

.mainInfo {
  display: flex;
  flex-direction: column;
  margin-block: 10%;
  align-items: center;
}
.infoSection {
  display: flex;
  flex-direction: row;
  margin-inline: 5%;
  align-items: center;
  gap: 6%;
  text-align: justify;
  margin-block: 5%;
}
.textInfoSection {
  display: flex;
  flex-direction: column;

  max-width: 500px;
}
.infoSection img {
  width: 450px;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}
.infoSection h2 {
  color: #eb4937;
}
.infoSection p {
  color: #0d3b68;
  font-weight: 500;
}
.serviciosSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #eb4937;
}
#contenedorServicios {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 80vw;
}

.cardServicio {
  background-color: white;
  display: flex;
  flex-direction: column;
  margin: 2%;
  align-items: center;
  color: #0d3b68;
  border-radius: 8px;
  padding: 1%;
  font-weight: 600;
  max-width: 200px;
  text-align: center;
}

.cardServicio img {
  width: 175px;
  height: auto;
}

.sectionTitle {
  padding-top: 2.5%;
}

.contactoContent {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  margin-block: 6%;
}

#contactInfo {
  display: flex;
  row-gap: 10%;
  border-radius: 8px;
  border-color: #0d3b68;
  color: #0d3b68;
  border-style: solid;
  height: 10em;
  flex-direction: column;
  justify-content: center;
  padding-inline: 2%;
}

.formContacto {
  display: flex;
  flex-direction: column;
  row-gap: 1%;
}
.formContactoInput {
  display: flex;
  flex-direction: column;
  margin-block: 3%;
}

.formContacto input {
  font-size: 0.95em;
  padding-block: 4%;
  padding-inline: 1%;
  border-style: solid;
  border-radius: 4px;
}
.formContacto textarea {
  padding-inline: 1%;
  border-style: solid;
  border-radius: 4px;
}

.btnContacto {
  width: 100%;
  background-color: #0d3b68;
  border-radius: 8px;
  padding-block: 1%;
  font-size: 1em;
  font-weight: 500;
  color: white;
}

.btnContacto:hover {
  background-color: #1661ac;
}
.footer {
  /*width: 100vw;*/
  background-color: #0d3b68;
  color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-block: 15% 2%;
  justify-content: flex-end;
}
#imagenWeb {
  display: block;
}
#imagenMobile {
  display: none;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 0.5;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInCards {
  0% {
    opacity: 0;
    scale: 0;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .Portada {
    view-timeline-name: --homeScroll;
  }
  .logoPrincipal {
    position: sticky;
    top: 40%;
    animation: fadeOut linear;
    animation-timeline: --homeScroll;
    animation-range: exit 0% exit 100%;
    animation-fill-mode: both;
  }

  .infoSection {
    animation: fadeIn ease-in;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: 400px;
    animation-fill-mode: both;
  }

  .cardServicio {
    animation: fadeInCards ease-in;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: 200px;
    animation-fill-mode: both;
  }
}

@media (max-width: 900px) {
  #fondoPortada {
    height: 80vh;
  }

  #imagenMobile {
    display: block;
  }
  #imagenWeb {
    display: none;
  }
  .infoSection {
    flex-direction: column;
    margin-block: 20%;
  }

  .infoSection img {
    width: 100%;
  }
  .contactoContent {
    flex-direction: column;
  }
  #contenedorServicios {
    display: grid;
    grid-template-columns: auto auto;
    margin-block: 10%;
  }
}