@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap");
.bootstrap p, .cajas .cajaX p {
  font-size: 0.8rem;
  font-family: "Open Sans", sans-serif;
}
@media (max-width: 768px) {
  .bootstrap p, .cajas .cajaX p {
    font-size: 1rem;
  }
}
@media (max-width: 575px) {
  .bootstrap p, .cajas .cajaX p {
    font-size: 0.5rem;
  }
}

.contenedor1 .link, .cajas .cajaX .link {
  font-size: 0.8rem;
  font-weight: bold;
  color: rgb(2, 88, 22);
  font-family: "Open Sans", sans-serif;
}
.contenedor1 .link:hover, .cajas .cajaX .link:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  z-index: 10;
}
@media (max-width: 575px) {
  .contenedor1 .link, .cajas .cajaX .link {
    font-size: 0.6rem;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0; /* Quita el margen por defecto del cuerpo de la página */
}

.nav-underline {
  font-size: 1.5rem;
}
@media (max-width: 1024px) {
  .nav-underline {
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
  }
}

header {
  background-image: linear-gradient(to top, #b3ffab 0%, #12fff7 100%);
  padding: 2rem;
}
@media (max-width: 1024px) {
  header {
    max-width: auto;
    padding: auto;
  }
}

.card {
  background-color: #ffffff;
  border-radius: 10%;
  overflow: hidden;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.card {
  /* Sección de la imagen */
}
.card .noti-img {
  position: relative;
  height: 10rem;
  width: 100%;
}
.card .noti-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card {
  /* Bloque de texto interno */
}
.card .contenido {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  font-family: "Merriweather", serif;
}
.card .contenido h2 {
  font-size: 1rem;
  color: black;
  margin-bottom: 1rem;
  line-height: 1.4;
}
.card .contenido p {
  font-size: 0.8rem;
  color: #555555;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.card .fecha {
  font-size: 0.8rem;
  color: #888888;
  margin-bottom: 1rem;
}

/* Botón/Enlace de redirección */
.read-more-btn {
  margin-top: auto; /* Alinea el botón siempre al fondo de la tarjeta */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #222222;
  color: #ffffff;
  text-decoration: none;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  transition: background-color 0.2s ease;
}
.read-more-btn:hover {
  background-color: #007bff;
  transform: translateX(0.5rem);
}

.read-more-btn span {
  margin-left: 0.5rem;
  transition: transform 0.2s ease;
}

h2 {
  font-size: 1.5rem;
  text-align: center;
  text-decoration: underline;
  font-family: "Merriweather", serif;
  margin: 0.5rem;
}
@media (max-width: 768px) {
  h2 {
    font-size: 1rem;
  }
}
@media (max-width: 575px) {
  h2 {
    font-size: 0.8rem;
  }
}
h2 .merriweather {
  font-family: "Merriweather", serif;
}

.fondoinicio {
  background-image: url(../img/fotoPrincipal.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  /*background-attachment: fixed;*/
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  aspect-ratio: 16/9;
}
@media (max-width: 1024px) {
  .fondoinicio {
    aspect-ratio: 4/3;
  }
}
@media (max-width: 768px) {
  .fondoinicio {
    aspect-ratio: 1/1;
  }
}
@media (max-height: 450px) and (orientation: landscape) {
  .fondoinicio {
    aspect-ratio: 16/9;
  }
}
.fondoinicio .title {
  font-size: 4rem;
  text-align: start;
  font-weight: bold;
  margin: 0;
  padding: 2rem;
  color: rgb(83, 229, 117);
  font-family: "Open Sans", sans-serif;
}
@media (max-width: 768px) {
  .fondoinicio .title {
    font-size: 2rem;
  }
}
.fondoinicio .textoinicio {
  font-size: 1.2rem;
  font-weight: bold;
  color: rgb(191, 239, 202);
  text-align: start;
  gap: 1rem;
  margin: 0.5rem;
  padding: 0.5rem;
  max-width: 40rem;
  font-family: "Open Sans", sans-serif;
}
@media (max-width: 768px) {
  .fondoinicio .textoinicio {
    font-size: 1rem;
    font-weight: normal;
    max-width: 30rem;
  }
}
@media (max-width: 575px) {
  .fondoinicio .textoinicio {
    font-size: 0.8rem;
    max-width: 25rem;
  }
}
.fondoinicio .textoinicio .opensans {
  font-family: "Open Sans", sans-serif;
}
.fondoinicio .textinferior {
  position: relative;
  bottom: auto;
  left: auto;
  font-size: 1rem;
  color: whitesmoke;
  text-align: start;
  margin-top: 1.5rem;
  display: block;
  font-family: "Open Sans", sans-serif;
  padding: 17rem 1rem 0.5rem 0.5rem;
}
@media (max-width: 575px) {
  .fondoinicio .textinferior {
    font-size: 0.5rem;
  }
}
@media (max-height: 450px) and (orientation: landscape) {
  .fondoinicio .textinferior {
    margin-top: 1.5rem;
  }
}

.title2 {
  font-size: 3rem;
  margin: 1rem;
  padding: 2rem;
  color: rgb(4, 141, 36);
  font-family: "Merriweather", serif;
}
@media (max-width: 768px) {
  .title2 {
    font-size: 2rem;
  }
}
@media (max-width: 575px) {
  .title2 {
    font-size: 1.5rem;
  }
}

.textpage1 {
  font-size: 1.5rem;
  text-align: center;
  gap: 1rem;
  margin: 0.5rem;
  padding: 0.5rem;
  font-family: "Open Sans", sans-serif;
}
@media (max-width: 768px) {
  .textpage1 {
    font-size: 1rem;
  }
}

.bootstrap {
  max-width: 70rem;
  margin: auto;
  height: auto;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1024px) {
  .bootstrap {
    width: 90%;
    max-width: 50rem;
    margin: 1.5rem auto;
  }
}
@media (max-width: 768px) {
  .bootstrap {
    max-width: 35rem;
  }
}
@media (max-width: 575px) {
  .bootstrap {
    max-width: 25rem;
    margin: 1rem;
  }
}
@media (max-height: 450px) and (orientation: landscape) {
  .bootstrap {
    max-width: 90% !important;
    width: 40rem;
    margin: 1.5rem auto !important;
  }
}
.bootstrap img {
  width: 100%;
  display: block;
  height: 40rem;
  object-fit: cover;
  object-position: cover;
}
@media (max-width: 1024px) {
  .bootstrap img {
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    margin-top: 2rem;
  }
}
@media (max-width: 768px) {
  .bootstrap img {
    aspect-ratio: 4/3;
    object-fit: cover;
  }
}
@media (max-width: 575px) {
  .bootstrap img {
    aspect-ratio: 1/1;
    object-fit: cover;
  }
}
@media (max-height: 450px) and (orientation: landscape) {
  .bootstrap img {
    aspect-ratio: 16/9;
    object-fit: cover;
    margin-top: 1rem;
    height: auto;
  }
}
/*page2*/
.contenedor1 {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-template-areas: "seccion1 seccion2 seccion3";
  width: 100%;
  height: 70vh;
  position: relative;
  margin: 0.5rem;
  gap: 0.5rem;
}
@media (max-width: 1024px) {
  .contenedor1 {
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    grid-template-areas: "seccion1 seccion2" "seccion3 seccion3";
    width: 90%;
    height: auto;
    margin: 0.5rem auto;
    gap: 0.5rem;
  }
}
@media (max-width: 768px) {
  .contenedor1 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "seccion1" "seccion2" "seccion3";
    margin: auto;
    padding: 0.5rem;
    width: 80%;
    height: auto;
  }
}
@media (max-height: 450px) and (orientation: landscape) {
  .contenedor1 {
    width: 90%;
    padding: 1rem;
    gap: 1.5rem;
  }
}
.contenedor1 .seccion1 {
  grid-area: seccion1;
  background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%);
  border-radius: 20%;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /*centro horizontal*/
  align-items: center; /* Alinea todo al centro */
}
@media (max-width: 768px) {
  .contenedor1 .seccion1 {
    height: auto;
    padding: 0.5rem;
  }
}
.contenedor1 .seccion2 {
  grid-area: seccion2;
  background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%);
  border-radius: 20%;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /*centro horizontal*/
  align-items: center; /* Alinea todo al centro */
}
@media (max-width: 768px) {
  .contenedor1 .seccion2 {
    height: auto;
    padding: 0.5rem;
  }
}
.contenedor1 .seccion3 {
  grid-area: seccion3;
  background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%);
  border-radius: 20%;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /*centro horizontal*/
  align-items: center; /* Alinea todo al centro */
}
@media (max-width: 768px) {
  .contenedor1 .seccion3 {
    height: auto;
    padding: 0.5rem;
  }
}
.contenedor1 .fotoseccion {
  border-radius: 10%;
  width: 25vw;
  height: 30vh;
  background-size: cover;
}
@media (max-width: 768px) {
  .contenedor1 .fotoseccion {
    width: 35vw;
    height: 20vh;
  }
}
@media (max-width: 575px) {
  .contenedor1 .fotoseccion {
    width: 35vw;
    height: 15vh;
  }
}
.contenedor1 .textseccion {
  font-size: 0.8rem;
  font-family: "Open Sans", sans-serif;
  text-align: center;
  margin: 0.3rem;
}
@media (max-width: 575px) {
  .contenedor1 .textseccion {
    font-size: 0.6rem;
  }
}
@media (max-height: 450px) and (orientation: landscape) {
  .contenedor1 .textseccion {
    margin: auto;
  }
}
.contenedor1 .cortesia {
  margin-top: auto;
  font-size: 0.6rem;
  text-align: end;
  font-family: "Open Sans", sans-serif;
}
@media (max-width: 575px) {
  .contenedor1 .cortesia {
    font-size: 0.5rem;
  }
}

.cajas {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas: "cajaY cajaX";
  width: 100%;
  position: relative;
  gap: 0.5rem;
  align-items: stretch;
  background-image: linear-gradient(to top, #fddb92 0%, #d1fdff 100%);
}
@media (max-width: 1024px) {
  .cajas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
  }
}
@media (max-width: 575px) {
  .cajas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0.5rem;
  }
}
.cajas .cajaX {
  grid-area: cajaX;
  display: flex;
  flex-direction: column;
  justify-content: center; /*centro horizontal*/
  align-items: center; /* Alinea todo al centro */
  height: 100%;
  padding: 1rem;
}
.cajas .cajaX .textocaja {
  font-size: 1.2rem;
  font-family: "Open Sans", sans-serif;
  margin: 0.5rem;
}
@media (max-width: 1024px) {
  .cajas .cajaX .textocaja {
    margin: auto;
  }
}
@media (max-width: 575px) {
  .cajas .cajaX .textocaja {
    font-size: 0.8rem;
  }
}
.cajas .cajaY {
  grid-area: cajaY;
  display: flex;
  flex-direction: column;
  justify-content: center; /*centro horizontal*/
  align-items: center; /* Alinea todo al centro */
  height: 100%;
  padding: 1rem;
}
.cajas .fotocaja {
  max-width: 100%; /* Evita que se salga de los costados */
  max-height: 80vh; /* Ajustá este porcentaje según el alto que quieras que ocupe */
  object-fit: contain;
  border-radius: 10%;
}
@media (max-width: 575px) {
  .cajas .fotocaja {
    width: 100%;
    height: 20vh;
    object-fit: cover;
  }
}

.contenedor2 {
  display: grid;
  grid-template-rows: 1fr, repeat(5, 1fr);
  grid-template-areas: "caja1" "caja2" "caja3" "caja4" "caja5" "caja6";
  width: 100%;
  position: relative;
  margin: 0.5rem auto;
  gap: 2rem;
}
@media (max-width: 1024px) {
  .contenedor2 {
    grid-template-columns: 50% 50%;
    grid-template-rows: repeat(3, 33%);
    grid-template-areas: "caja1 caja6" "caja2 caja4" "caja5 caja3";
    width: 100%;
    position: relative;
    margin: 1rem auto;
    height: auto;
    gap: 2rem;
  }
}
@media (max-width: 768px) {
  .contenedor2 {
    display: grid;
    width: 100%;
    margin: 0.5rem auto;
    height: auto;
  }
}
@media (max-width: 575px) {
  .contenedor2 {
    display: block;
    margin: auto;
    width: 80%;
    height: auto;
  }
}
@media (max-height: 450px) and (orientation: landscape) {
  .contenedor2 {
    display: block;
    position: relative;
    width: 90%;
    height: auto;
    grid-template-rows: none;
    grid-template-areas: none;
    padding: 1.5rem auto;
    gap: 3rem auto;
  }
}
.contenedor2 .caja1 {
  grid-area: caja1;
  border-radius: 5%;
  animation: slide-in-left 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
.contenedor2 .caja2 {
  grid-area: caja2;
  border-radius: 5%;
  animation: slide-in-right 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
.contenedor2 .caja3 {
  grid-area: caja3;
  border-radius: 5%;
  animation: slide-in-left 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
.contenedor2 .caja4 {
  grid-area: caja4;
  border-radius: 5%;
  animation: slide-in-right 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
.contenedor2 .caja5 {
  grid-area: caja5;
  border-radius: 5%;
  animation: slide-in-left 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
.contenedor2 .caja6 {
  grid-area: caja6;
  border-radius: 5%;
  animation: slide-in-right 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

/*page3*/
.noticias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
  padding: 1rem;
  margin: auto;
  width: 100%;
  align-items: center;
}

/*Comerciantes*/
.comerciantes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
  padding: 1rem;
  margin: auto;
  width: 100%;
  align-items: center;
}

.servicio {
  background-color: #ffffff;
  border-radius: 10%;
  display: flex;
  flex-direction: column;
  justify-content: center; /*centro horizontal*/
  align-items: center; /* Alinea todo al centro */
  margin: auto;
  padding: 1rem;
  border: solid black;
  font-family: "Open Sans", sans-serif;
}
.servicio img {
  border-radius: 50%;
  height: 15rem;
  width: 15rem;
}
@media (max-width: 575px) {
  .servicio img {
    height: 10rem;
    width: 10rem;
  }
}
.servicio h2 {
  font-size: 1.5rem;
  font-weight: bolder;
  color: rgb(46, 43, 43);
}
@media (max-width: 575px) {
  .servicio h2 {
    font-size: 1rem;
  }
}
.servicio ul {
  color: rgb(2, 88, 22);
}
.servicio p {
  font-size: 1rem;
  text-align: center;
  font-style: oblique;
}
.servicio a {
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bolder;
  color: rgb(46, 43, 43);
}
@media (max-width: 575px) {
  .servicio a {
    font-size: 1rem;
  }
}
.servicio a:hover {
  color: rgb(2, 88, 22);
}
.servicio .enlace {
  font-size: 1.5rem;
  font-weight: bolder;
  color: rgb(46, 43, 43);
}
@media (max-width: 575px) {
  .servicio .enlace {
    font-size: 1rem;
  }
}

/*page4*/
.page4 {
  display: flex;
  flex-direction: column;
  justify-content: center; /*centro horizontal*/
  align-items: center; /* Alinea todo al centro */
}
.page4 .item {
  font-size: 3rem;
  color: rgb(83, 229, 117);
  align-content: center;
}
@media (max-width: 575px) {
  .page4 .item {
    font-size: 2rem;
  }
}
.page4 .item:hover {
  color: whitesmoke;
}
.page4 .text {
  font-size: 2rem;
  color: rgb(83, 229, 117);
}
@media (max-width: 575px) {
  .page4 .text {
    font-size: 1.5rem;
  }
}
.page4 .text:hover {
  color: whitesmoke;
}

.fotofinal {
  background-image: url(../img/final.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  width: 100%;
  min-height: 100vh;
  position: relative;
}
@media (max-width: 768px) {
  .fotofinal {
    height: 60vh;
  }
}

footer {
  background-image: linear-gradient(to top, #b3ffab 0%, #12fff7 100%);
  padding: 1.5rem;
}
@media (max-width: 1024px) {
  footer {
    padding: 1rem;
    margin-top: 2.5rem;
  }
}
footer .textofooter {
  font-size: 1rem;
  text-align: center;
  padding: 0.5rem;
  font-family: "Open Sans", sans-serif;
}
@media (max-width: 575px) {
  footer .textofooter {
    font-size: 0.8rem;
  }
}
footer .opensans {
  font-family: "Open Sans", sans-serif;
}

/*# sourceMappingURL=estilos.css.map */