* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat';
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #4a6a8a ;
  height: 11rem;
  color: #E5E5E5;
}

.header__title {
  font-weight: 400;
  font-size: 2.2rem;
}

  .social-btn {
    box-sizing: content-box;
    display: flex;
    width: 150px;
    align-items: center;
    justify-content: space-between;
    padding-left: 35px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    margin-bottom: 5px;
    position: relative;
    left: -145px;
    transition: left 1s;
  }
  .social-btn:hover {
    left: -10px;
    transition: left 1s;
  }
  
  .social {
    z-index: 6000;
    position: fixed;
    top: 70%;
  }
  .social a {
    text-decoration: none;
  }
  
  .color-telegram {
    background-color: #0084c6;
  }
  .color-gmail {
    background-color: #d14836;
  }
  .color-whatsapp {
    background-color: #24cc63;
  }
  
  .google-font {
    font-family: "Lato", sans-serif;
    font-size: 1.25rem;
  }
  
  .social-btn img {
    width: 40px;
  }
  
  .social-btn p {
    color: white;
  
    margin-top: 0px;
    margin-bottom: 0px;
  }
  
  
  .icons8-gmail {
    order: 2;
    display: inline-block;
    width: 38px;
    height: 38px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAADHUlEQVR4nO2Zu2sUURTGZ9cQtTCiNmmMD0iXwkgQQW2ECFqYQhGCYmetgil8YqV1OhVFUUQUFUxrKqNoRP0HFBEFDYL4wMeur5+czRlz9+7M3NmZ3cko88GSnfO453zzOPebjecVKFCgwD8NYBVwBDgFHJLjHPS0GjgGnAaOAv1RwXOB8wTjKrA40+69Wk9LgGshPV0A5gUlXdSACnAG2K9/v6r9JbAuQxLrtabgi94h+/SqSI+CS3bSJnV8lMto+ZYB99T/AzgAlNtIoAwc1lqCu0CPFdMPfFL/oOm4qcaRkMU7gJPGZR0HuttAolvX9nFCaofEjmjMddM4pcY65gHJJqbqzkZ6EoNGHzU44uVOEbwxjb/UGHnLWFcEzQs9azEJdOgafg+3YxIp+z00NBijqI8SsBf4rseTwIoEJJYCE8bzd9xoMHY/iYkYx2uA52r+AOxogsRW4J3mvgI2pO3HPNN9TSXOzPoxdf0GRmVPcuxXoxoruCVruOrYkF6jiMiesachy4oLsJd0xlc15DHQGxDXqz40VnJKcev4kB6N/S2QiI8bwKK/AVacbbekxFMNkzm/0/BtA96r7wWwNsEJWwBctpsNIjJsbDTPgIFmiGhMF3DFWPOsfnyIr8uxRg2WbUB7QnscbogzDcBy4L49SeISMdbcDXz2c4BvMuli5tag3/0JWbFvW+fUCnggx/Shrk90N9SnhR+5BkkQEaZryjAIHCROIoZ9yBqRTRFJCmbgi0bpYSgszklEfT0q3Ey0WzSaaBCNiYhYMiI3ojERETtO8RbY7LUIwEbgtVkgbj/hhtkVjeNZErFF40NgZUrR+FNH/ZzMiOReNHrNJk7bFlo/EMi7//yINQL3KFedthMJ2X2fhIhGUQ0PglRDLohEiMZdhm97WtGYGZEQ0XhOP6lEY+ZEWi0aZ51IK0SjlxciSUFBRFFckRaDpCf2f7oiVbV1tqJAWhCjjkodQcU0inoVHIwikxciQKf+N00waf8S7os4J7IiEhP1L3fAFv0x2r/NwnAnAyITjh6qKj5b9oZaoECBAgW8JPgDs0dfKHdnMjwAAAAASUVORK5CYII=")
      50% 50% no-repeat;
    background-size: 100%;
  }
  
  .icons8-whatsapp {
    order: 2;
    display: inline-block;
    width: 38px;
    height: 38px;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNTAiIGhlaWdodD0iNTAiCnZpZXdCb3g9IjAgMCA1MCA1MCIKc3R5bGU9IiBmaWxsOiNmZmZmZmY7Ij48cGF0aCBkPSJNIDI1IDIgQyAxMi4zMDk1MzQgMiAyIDEyLjMwOTUzNCAyIDI1IEMgMiAyOS4wNzkwOTcgMy4xMTg2ODc1IDMyLjg4NTg4IDQuOTg0Mzc1IDM2LjIwODk4NCBMIDIuMDM3MTA5NCA0Ni43MzA0NjkgQSAxLjAwMDEgMS4wMDAxIDAgMCAwIDMuMjQwMjM0NCA0Ny45NzA3MDMgTCAxNC4yMTA5MzggNDUuMjUxOTUzIEMgMTcuNDM0NjI5IDQ2Ljk3MjkyOSAyMS4wOTI1OTEgNDggMjUgNDggQyAzNy42OTA0NjYgNDggNDggMzcuNjkwNDY2IDQ4IDI1IEMgNDggMTIuMzA5NTM0IDM3LjY5MDQ2NiAyIDI1IDIgeiBNIDI1IDQgQyAzNi42MDk1MzQgNCA0NiAxMy4zOTA0NjYgNDYgMjUgQyA0NiAzNi42MDk1MzQgMzYuNjA5NTM0IDQ2IDI1IDQ2IEMgMjEuMjc4MDI1IDQ2IDE3Ljc5MjEyMSA0NS4wMjk2MzUgMTQuNzYxNzE5IDQzLjMzMzk4NCBBIDEuMDAwMSAxLjAwMDEgMCAwIDAgMTQuMDMzMjAzIDQzLjIzNjMyOCBMIDQuNDI1NzgxMiA0NS42MTcxODggTCA3LjAwMTk1MzEgMzYuNDI1NzgxIEEgMS4wMDAxIDEuMDAwMSAwIDAgMCA2LjkwMjM0MzggMzUuNjQ2NDg0IEMgNS4wNjA2ODY5IDMyLjUyMzU5MiA0IDI4Ljg5MDEwNyA0IDI1IEMgNCAxMy4zOTA0NjYgMTMuMzkwNDY2IDQgMjUgNCB6IE0gMTYuNjQyNTc4IDEzIEMgMTYuMDAxNTM5IDEzIDE1LjA4NjA0NSAxMy4yMzg0OSAxNC4zMzM5ODQgMTQuMDQ4ODI4IEMgMTMuODgyMjY4IDE0LjUzNTU0OCAxMiAxNi4zNjk1MTEgMTIgMTkuNTkzNzUgQyAxMiAyMi45NTUyNzEgMTQuMzMxMzkxIDI1Ljg1NTg0OCAxNC42MTMyODEgMjYuMjI4NTE2IEwgMTQuNjE1MjM0IDI2LjIyODUxNiBMIDE0LjYxNTIzNCAyNi4yMzA0NjkgQyAxNC41ODg0OTQgMjYuMTk1MzI5IDE0Ljk3MzAzMSAyNi43NTIxOTEgMTUuNDg2MzI4IDI3LjQxOTkyMiBDIDE1Ljk5OTYyNiAyOC4wODc2NTMgMTYuNzE3NDA1IDI4Ljk2NDY0IDE3LjYxOTE0MSAyOS45MTQwNjIgQyAxOS40MjI2MTIgMzEuODEyOTA5IDIxLjk1ODI4MiAzNC4wMDc0MTkgMjUuMTA1NDY5IDM1LjM0OTYwOSBDIDI2LjU1NDc4OSAzNS45NjY3NzkgMjcuNjk4MTc5IDM2LjMzOTQxNyAyOC41NjQ0NTMgMzYuNjExMzI4IEMgMzAuMTY5ODQ1IDM3LjExNTQyNiAzMS42MzIwNzMgMzcuMDM4Nzk5IDMyLjczMDQ2OSAzNi44NzY5NTMgQyAzMy41NTI2MyAzNi43NTU4NzYgMzQuNDU2ODc4IDM2LjM2MTExNCAzNS4zNTE1NjIgMzUuNzk0OTIyIEMgMzYuMjQ2MjQ4IDM1LjIyODczIDM3LjEyMzA5IDM0LjUyNDcyMiAzNy41MDk3NjYgMzMuNDU1MDc4IEMgMzcuNzg2NzcyIDMyLjY4ODI0NCAzNy45Mjc1OTEgMzEuOTc5NTk4IDM3Ljk3ODUxNiAzMS4zOTY0ODQgQyAzOC4wMDM5NzYgMzEuMTA0OTI3IDM4LjAwNzIxMSAzMC44NDc2MDIgMzcuOTg4MjgxIDMwLjYwOTM3NSBDIDM3Ljk2OTMxMSAzMC4zNzExNDggMzcuOTg5NTgxIDMwLjE4ODY2NCAzNy43Njc1NzggMjkuODI0MjE5IEMgMzcuMzAyMDA5IDI5LjA1OTgwNCAzNi43NzQ3NTMgMjkuMDM5ODUzIDM2LjIyNDYwOSAyOC43Njc1NzggQyAzNS45MTg5MzkgMjguNjE2Mjk3IDM1LjA0ODY2MSAyOC4xOTEzMjkgMzQuMTc1NzgxIDI3Ljc3NTM5MSBDIDMzLjMwMzg4MyAyNy4zNTk5MiAzMi41NDg5MiAyNi45OTE5NTMgMzIuMDgzOTg0IDI2LjgyNjE3MiBDIDMxLjc5MDIzOSAyNi43MjA0ODggMzEuNDMxNTU2IDI2LjU2ODM1MiAzMC45MTQwNjIgMjYuNjI2OTUzIEMgMzAuMzk2NTY5IDI2LjY4NTU1MyAyOS44ODU0NiAyNy4wNTg5MzMgMjkuNTg3ODkxIDI3LjUgQyAyOS4zMDU4MzcgMjcuOTE4MDY5IDI4LjE3MDM4NyAyOS4yNTgzNDkgMjcuODI0MjE5IDI5LjY1MjM0NCBDIDI3LjgxOTYxOSAyOS42NDk1NDQgMjcuODQ5NjU5IDI5LjY2MzM4MyAyNy43MTI4OTEgMjkuNTk1NzAzIEMgMjcuMjg0NzYxIDI5LjM4MzgxNSAyNi43NjExNTcgMjkuMjAzNjUyIDI1Ljk4NjMyOCAyOC43OTQ5MjIgQyAyNS4yMTE1IDI4LjM4NjE5MiAyNC4yNDIyNTUgMjcuNzgyNjM1IDIzLjE4MTY0MSAyNi44NDc2NTYgTCAyMy4xODE2NDEgMjYuODQ1NzAzIEMgMjEuNjAzMDI5IDI1LjQ1NTk0OSAyMC40OTcyNzIgMjMuNzExMTA2IDIwLjE0ODQzOCAyMy4xMjUgQyAyMC4xNzE5MzcgMjMuMDk3MDQgMjAuMTQ1NjQzIDIzLjEzMDkwMSAyMC4xOTUzMTIgMjMuMDgyMDMxIEwgMjAuMTk3MjY2IDIzLjA4MDA3OCBDIDIwLjU1Mzc4MSAyMi43Mjg5MjQgMjAuODY5NzM5IDIyLjMwOTUyMSAyMS4xMzY3MTkgMjIuMDAxOTUzIEMgMjEuNTE1MjU3IDIxLjU2NTg2NiAyMS42ODIzMSAyMS4xODE0MzcgMjEuODYzMjgxIDIwLjgyMjI2NiBDIDIyLjIyMzk1NCAyMC4xMDY0NCAyMi4wMjMxMyAxOS4zMTg3NDIgMjEuODE0NDUzIDE4LjkwNDI5NyBMIDIxLjgxNDQ1MyAxOC45MDIzNDQgQyAyMS44Mjg4NjMgMTguOTMxMDE0IDIxLjcwMTU3MiAxOC42NTAxNTcgMjEuNTY0NDUzIDE4LjMyNjE3MiBDIDIxLjQyNjk0MyAxOC4wMDEyNjMgMjEuMjUxNjYzIDE3LjU4MDAzOSAyMS4wNjQ0NTMgMTcuMTMwODU5IEMgMjAuNjkwMDMzIDE2LjIzMjUwMSAyMC4yNzIwMjcgMTUuMjI0OTEyIDIwLjAyMzQzOCAxNC42MzQ3NjYgTCAyMC4wMjM0MzggMTQuNjMyODEyIEMgMTkuNzMwNTkxIDEzLjkzNzY4NCAxOS4zMzQzOTUgMTMuNDM2OTA4IDE4LjgxNjQwNiAxMy4xOTUzMTIgQyAxOC4yOTg0MTcgMTIuOTUzNzE3IDE3Ljg0MDc3OCAxMy4wMjI0MDIgMTcuODIyMjY2IDEzLjAyMTQ4NCBMIDE3LjgyMDMxMiAxMy4wMjE0ODQgQyAxNy40NTA2NjggMTMuMDA0NDMyIDE3LjA0NTAzOCAxMyAxNi42NDI1NzggMTMgeiBNIDE2LjY0MjU3OCAxNSBDIDE3LjAyODExOCAxNSAxNy40MDgyMTQgMTUuMDA0NzAxIDE3LjcyNjU2MiAxNS4wMTk1MzEgQyAxOC4wNTQwNTYgMTUuMDM1ODUxIDE4LjAzMzY4NyAxNS4wMzcxOTIgMTcuOTcwNzAzIDE1LjAwNzgxMiBDIDE3LjkwNjcxMyAxNC45Nzc5NzIgMTcuOTkzNTMzIDE0Ljk2ODI4MiAxOC4xNzk2ODggMTUuNDEwMTU2IEMgMTguNDIzMDk4IDE1Ljk4ODAxIDE4Ljg0MzE3IDE2Ljk5OTI0OSAxOS4yMTg3NSAxNy45MDAzOTEgQyAxOS40MDY1NCAxOC4zNTA5NjEgMTkuNTgyMjkyIDE4Ljc3MzgxNiAxOS43MjI2NTYgMTkuMTA1NDY5IEMgMTkuODYzMDIxIDE5LjQzNzEyMiAxOS45MzkwNzcgMTkuNjIyMjk1IDIwLjAyNzM0NCAxOS43OTg4MjggTCAyMC4wMjczNDQgMTkuODAwNzgxIEwgMjAuMDI5Mjk3IDE5LjgwMjczNCBDIDIwLjExNTgzNyAxOS45NzM0ODMgMjAuMTA4MTg1IDE5Ljg2NDE2NCAyMC4wNzgxMjUgMTkuOTIzODI4IEMgMTkuODY3MDk2IDIwLjM0MjY1NiAxOS44Mzg0NjEgMjAuNDQ1NDkzIDE5LjYyNSAyMC42OTE0MDYgQyAxOS4yOTk5OCAyMS4wNjU4MzggMTguOTY4NDUzIDIxLjQ4MzQwNCAxOC43OTI5NjkgMjEuNjU2MjUgQyAxOC42Mzk0MzkgMjEuODA3MDcgMTguMzYyNDIgMjIuMDQyMDMyIDE4LjE4OTQ1MyAyMi41MDE5NTMgQyAxOC4wMTYyMjEgMjIuOTYyNTc4IDE4LjA5NzA3MyAyMy41OTQ1NyAxOC4zNzUgMjQuMDY2NDA2IEMgMTguNzQ1MDMyIDI0LjY5NDYgMTkuOTY0NDA2IDI2LjY3OTMwNyAyMS44NTkzNzUgMjguMzQ3NjU2IEMgMjMuMDUyNzYgMjkuMzk5Njc4IDI0LjE2NDU2MyAzMC4wOTU5MzMgMjUuMDUyNzM0IDMwLjU2NDQ1MyBDIDI1Ljk0MDkwNiAzMS4wMzI5NzMgMjYuNjY0MzAxIDMxLjMwNjYwNyAyNi44MjYxNzIgMzEuMzg2NzE5IEMgMjcuMjEwNTQ5IDMxLjU3Njk1MyAyNy42MzA2NTUgMzEuNzI0NjcgMjguMTE5MTQxIDMxLjY2NjAxNiBDIDI4LjYwNzYyNyAzMS42MDczNjYgMjkuMDI4NzggMzEuMzEwOTc5IDI5LjI5Njg3NSAzMS4wMDc4MTIgTCAyOS4yOTg4MjggMzEuMDA1ODU5IEMgMjkuNjU1NjI5IDMwLjYwMTM0NyAzMC43MTU4NDggMjkuMzkwNzI4IDMxLjIyNDYwOSAyOC42NDQ1MzEgQyAzMS4yNDYxNjkgMjguNjUyMTMxIDMxLjIzOTEwOSAyOC42NDYyMzEgMzEuNDA4MjAzIDI4LjcwNzAzMSBMIDMxLjQwODIwMyAyOC43MDg5ODQgTCAzMS40MTAxNTYgMjguNzA4OTg0IEMgMzEuNDg3MzU2IDI4LjczNjQ3NCAzMi40NTQyODYgMjkuMTY5MjY3IDMzLjMxNjQwNiAyOS41ODAwNzggQyAzNC4xNzg1MjYgMjkuOTkwODg5IDM1LjA1MzU2MSAzMC40MTc4NzUgMzUuMzM3ODkxIDMwLjU1ODU5NCBDIDM1Ljc0ODIyNSAzMC43NjE2NzQgMzUuOTQyMTEzIDMwLjg5Mzg4MSAzNS45OTIxODggMzAuODk0NTMxIEMgMzUuOTk1NTcyIDMwLjk4MjUxNiAzNS45OTg5OTIgMzEuMDc3ODYgMzUuOTg2MzI4IDMxLjIyMjY1NiBDIDM1Ljk1MTI1OCAzMS42MjQyOTIgMzUuODQzOSAzMi4xODAyMjUgMzUuNjI4OTA2IDMyLjc3NTM5MSBDIDM1LjUyMzU4MiAzMy4wNjY3NDYgMzQuOTc1MDE4IDMzLjY2NzY2MSAzNC4yODMyMDMgMzQuMTA1NDY5IEMgMzMuNTkxMzg4IDM0LjU0MzI3NyAzMi43NDkzMzggMzQuODUyNTE0IDMyLjQzNzUgMzQuODk4NDM4IEMgMzEuNDk5ODk2IDM1LjAzNjU5MSAzMC4zODY2NzIgMzUuMDg3MDI3IDI5LjE2NDA2MiAzNC43MDMxMjUgQyAyOC4zMTYzMzYgMzQuNDM3MDM2IDI3LjI1OTMwNSAzNC4wOTI1OTYgMjUuODkwNjI1IDMzLjUwOTc2NiBDIDIzLjExNDgxMiAzMi4zMjU5NTYgMjAuNzU1NTkxIDMwLjMxMTUxMyAxOS4wNzAzMTIgMjguNTM3MTA5IEMgMTguMjI3Njc0IDI3LjY0OTkwOCAxNy41NTI1NjIgMjYuODI0MDE5IDE3LjA3MjI2NiAyNi4xOTkyMTkgQyAxNi41OTI4NjYgMjUuNTc1NTg0IDE2LjM4MzUyOCAyNS4yNTEwNTQgMTYuMjA4OTg0IDI1LjAyMTQ4NCBMIDE2LjIwNzAzMSAyNS4wMTk1MzEgQyAxNS44OTcyMDIgMjQuNjA5ODA1IDE0IDIxLjk3MDg1MSAxNCAxOS41OTM3NSBDIDE0IDE3LjA3Nzk4OSAxNS4xNjg0OTcgMTYuMDkxNDM2IDE1LjgwMDc4MSAxNS40MTAxNTYgQyAxNi4xMzI3MjEgMTUuMDUyNDk1IDE2LjQ5NTYxNyAxNSAxNi42NDI1NzggMTUgeiI+PC9wYXRoPjwvc3ZnPg==")
      50% 50% no-repeat;
    background-size: 100%;
  }
  
.nav::before {
  content: "☰"; /* Icono de menú */
  font-size: 2rem;
  cursor: pointer;
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #FFF;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
  display: block;
  padding-top: 15px;
  padding-bottom: 15px;
}

.container {
  display: flex;
  justify-content: space-between;
}

.nav-list {
  padding-left: 5%;
}

.nav-contact {
  padding-right: 5%;
}

.nav-list, .nav-contact {
  display: flex;
  align-items: center;
  list-style: none;
}

.nav-item, .nav-contact-item {
  padding: 8px;
}

.nav-item {
  color: #000;
  font-weight: 500;
  font-size: larger;
}

.nav-item:hover {
  color: #4a6a8a;
}

.nav-item {
  text-decoration: none;
}

.contacto-list {
  display: none;
  list-style: none;
  margin-top: 5px;
  background: #fff;
  border-radius: 5px;
  position: absolute;
}

.contacto-list li {
  padding: 10px 10px 10px 10px;
}

.contacto-list a {
  text-decoration: none;
  color: #000;
  display: block;
}

.contacto-list a:hover {
 color: #7494b4;
}

.contacto-list.active {
  display: block;
}

.container-inicio {
  height: 70vh;
  background-image: url("images/paisaje-sierras-italia-desenfocado.jpeg");
  background-position: center bottom; 
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-color: #3398e6;
  position: relative;
}

.information {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.6);
  width: 60%;
  height: 75%;
  border-radius: 40px;
  display: flex;
  align-items: center;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  padding-left: 5%;
  padding-right: 5%;
  overflow: hidden;
}

@media (min-height: 800px) {
  .information {
    max-height: 450px;
  }
}

.text {
  color: #293a4a;
  font-weight: 550;
  font-size: 1.2rem;
  text-align: center;
}

@media (max-width: 900px) {
  .text {
    font-size: 1.1rem;
  }
}

@media (min-width: 1700px) {
  .text {
    font-size: 1.5rem;
  }
}

.a, .b {
  display: none;
}
/*
.container-images {
  position: relative;
  height: 70vh;
}

.image {
  position: absolute;
  bottom: 0;
}

.a {
  max-width: 310px;
  left: 10%;
  bottom: -17%;
}

.b {
  max-width: 310px;
  right: 13%;
  bottom: -12%;
}
*/

.container-swiper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(#ECEFFE, #a0bccc);
}
.card-wrapper {
  max-width: 1100px;
  margin: 0 60px 35px;
  padding: 20px 10px;
  overflow: hidden;
}

.card-list .card-item {
  list-style: none;
}

.card-list .card-item .card-link {
  user-select: none;
  display: block;
  background-color: #FFF;
  padding: 18px;
  border-radius: 12px;
  text-decoration: none;
  border: 2px solid transparent;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
  transition: 0.2s ease;
}

.card-list .card-item .card-link:hover {
  border-color: #007bff;
}

.card-list .card-link .card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
}

.card-list .card-link .badge {
  padding: 8px 16px;
  font-size: 0.95rem;
  color: #363A5F;
  font-weight: 500;
  margin: 16px 0 18px;
  background: #DDE4FF;
  width: fit-content;
  border-radius: 50px;
}

.card-list .card-link .card-title {
  font-size: 1rem;
  color: #000;
  font-weight: 600;
}

.card-list .card-link .card-button {
  height: 35px; 
  width: 110px;
  color: #007bff;
  border-radius: 50px;
  margin: 30px 0 5px;
  background: none;
  cursor: pointer;
  border: 2px solid #007bff;
  transition: 0.4s ease;
}

.card-link:hover .card-button {
  color: #FFF;
  background: #007bff;
}

.form-title {
  text-align: center;
  margin: 0;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-weight: 100;
  font-size: 22px;
  padding: 10px;
}

.form {
  box-shadow: 6px, 6px, 55px, #1112;
  margin-top: 50px;
  margin-left: 0;
  background-color: #007bff;
  border-radius: 70px;
  width: 400px; /* Ancho del formulario */
  padding: 20px;
  background: #ffffff; /* Fondo blanco */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05); /* cambie las sombras por unas mas claras. son las mismas que uso en los elementos de arriba, es para que tenga mas coherencia visual */
  margin: 50px auto; /* Centrar en la página */
  border: 2px solid  #007bff; /* Borde con color atractivo */
  z-index: 100;
}

.form_input {
  padding: 6px 20px;
}

input, textarea {
  font-family: 'Inter', sans-serif;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 12px;
  border: 1px solid #666;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05); /* cambie las sombras por unas mas claras. son las mismas que uso en los elementos de arriba, es para que tenga mas coherencia visual */
  background-color: transparent;
  border-radius: 4px;
  color: #0d0d0d;
}

.form_input-textarea {
  min-width: 100%;
  resize: none;
  min-height: 100px;
  max-height: 200px;
  font-family: sans-serif;
}

.container_formulario {
  width: 100%;
  height: 100vh;
  background-image: url('images/paisaje_nublado_con_gata_italia.jpeg'); /* Imagen de fondo */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.form {
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  background: #ffffff;
  border-radius: 10px;
  width: 400px;
  padding: 20px;
  border: 2px solid #007bff;
  margin: 50px auto;
}

.form_input {
  padding: 6px 20px;
}

input, textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 12px;
  border: 1px solid #666;
  border-radius: 4px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  font-family: 'Inter', sans-serif;
}

textarea {
  min-height: 100px;
  max-height: 200px;
  resize: none;
}

input:focus, textarea:focus {
  outline: none; /* Quita el borde predeterminado */
  border-color: #007bff; /* Color azul que ya usas en otros elementos */
}

.opcion-button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.opcion-button:hover {
  background-color: #0056b3;
}

.form_button {
  width: 100%;
  padding: 10px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.form_button:hover {
  background-color: #218838;
}

.references {
  background-color: #a0bccc;
  padding: 10%;
}

.references-title {
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.references-text {
  font-size: 1.2rem;
  color: #464d70;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

.references {
  background-color: #a0bccc;
  padding: 10%;
}

.references-title {
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.slider-frame {
  width: 100vw;   /* Ocupa todo el ancho de la pantalla */
  max-width: 100%; /* Asegura que no sobrepase el ancho */
  height: 70vh;   /* Ocupa la mitad de la pantalla en altura */
  max-height: 600px; /* Limita el tamaño vertical */
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.slider-frame ul {
  display: flex;
  padding: 0;
  width: 500%;
  height: 100%;
  animation: slide 15s infinite ease-in-out;
}

.slider-frame li {
  list-style: none;
  width: 100%;
}

.slider-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Mantiene la imagen ajustada sin distorsión */
}

/* ANIMACIÓN */
@keyframes slide {
  0% { margin-left: 0%; }
  16% { margin-left: 0%; }

  20% { margin-left: -100%; }
  36% { margin-left: -100%; }

  40% { margin-left: -200%; }
  56% { margin-left: -200%; }

  60% { margin-left: -300%; }
  76% { margin-left: -300%; }

  80% { margin-left: -400%; }
  96% { margin-left: -400%; }

  /* Transición suave al volver a la primera imagen */
  100% { margin-left: 0%; }
}


/* MEDIA QUERIES PARA DIFERENTES DISPOSITIVOS */

/* Para pantallas grandes (PC y laptops) */
@media (min-width: 1024px) {
  .slider-frame {
    height: 60vh; /* Un poco más grande en pantallas grandes */
  }
}

/* Para tablets */
@media (max-width: 1023px) {
  .slider-frame {
    height: 50vh; /* Ajuste en tablets */
  }
}

/* Para celulares */
@media (max-width: 768px) {
  .slider-frame {
    height: 40vh; /* Reduce la altura en celulares */
  }
}

@media (max-width: 768px) {
  .nav {
    padding: 0;
  }

  .nav::before {
    display: block;
    z-index: 100;
  }

  .nav .container {
    display: none;
  }

  .nav.active .container {
    background-color: #fff;
    position: absolute;
    display: flex;
    align-items: start;
    width: 240px;
    padding-top: 100px;
    height: 100vh;
  }

  .nav.active .nav-list {
    flex-direction: column;
    display: flex;
    align-items: start;
  }

  .nav-list li {
    margin-bottom: 30%;
  }

  .contacto-btn {
    display: none;
  }

  .contacto-list{
    display: flex;
    flex-direction: column;
    left: 0;
  }

  .bottom {
    margin-top: -40px;
  }

  .contacto-list li {
    margin: 0; /* Elimina cualquier margen */
    padding: 10px; /* Opcional, por si hay algún espacio interno */
  }


  .nav.active ~ .container-inicio,
  .nav.active ~ .container-swiper,
  .nav.active ~ .container_formulario,
  .nav.active ~ .references {
    filter: brightness(0.5);
    transition: filter 0.4s ease;
    pointer-events: none; /* Evita la interacción con los elementos */
  }

  .form {
    width: 300px;
  }

  .card-list .card-link .card-title {
    font-size: 0.8rem;
  }

  .card-list .card-link .badge {
    font-size: 0.8rem;
  }

  .container-inicio {
    background-size: auto;
  }

  .information {
    width: 70%;
  }

  .references-title {
    font-size: 1.5rem;

  }

  .nav.active ~ .social {
    display: none;
  }

}

@media (max-width: 430px) {
  .information {
    width: 80%;
    height: 80%;
    padding-left: 7%;
    padding-right: 7%;
  }

  .text {
    font-size: 1rem;
  }
}


.footer {
  background-color: #4a6a8a;
  color: white;
  text-align: center;
  padding: 1rem 0;
  margin-top: 2rem;
}

.container-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-social {
  list-style: none;
  display: flex;
  gap: 1rem;
  padding: 0;
  margin-top: 0.5rem;
}

.footer-social li {
  display: inline;
}

.footer-social a {
  color: white;
  font-size: 1.5rem;
  transition: color 0.3s;
}

.footer-social a:hover {
  color: #e0e0e0;
}




/* 
.color1 { #ab8052; }  Marrón claro 
.color2 { #a0bfdb; }  Celeste 
.color3 { #7e5032; }  Marrón oscuro 
.color4 { #7494b4; }  Azul medio 
.color5 { #a0bccc; }  Azul claro 
.color6 { #4a6a8a; }  Azul oscuro 
.color7 { #ffffff; }  Blanco 
.color8 { #8c8c8c; }  Gris 
*/