@media screen and (min-width: 0px) {
  .landing-section {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .landing-box {
    width: 90vw;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding-top: 10rem;
    gap: 2rem;
    background-image: url("/img/icons/landing-background-lines-m.svg");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
  }
  .landing-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding-left: 1rem;
    z-index: 1;
  }
  .landing-text-title {
    max-width: 1300px;
    text-align: start;
    font-size: var(--landing-title-size-1-m);
    font-weight: var(--landing-title-weight-1);
    line-height: var(--landing-title-line-height-1-m);

    overflow-y: hidden;
    margin-bottom: 1rem;
  }
  .landing-text-title span {
    color: var(--tag-color-1);
  }
  .landing-text-title img {
    min-width: 2rem;
    max-width: 2.5rem;
    margin-left: 0.4rem;
    margin-bottom: -0.5rem;
  }
  .landing-text-p-text-box {
    width: 100%;
    max-width: 949px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    gap: 1rem;
    flex-wrap: wrap;
  }
  .landing-text-p-text {
    font-size: var(--text-size-1-m);
    font-weight: var(--text-weight-1);
    color: var(--text-color-2);
    max-width: 400px;
  }
  .landing-text-buttons-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .landing-text-button-1,
  .landing-text-button-2 {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
  }
  .landing-text-button-1 a {
    width: 100%;
    padding: var(--button-padding-1);
    background-color: var(--white-color);
    color: var(--dark-color-1);
    font-weight: var(--button-text-weight-1);
    border-radius: var(--button-rounded-1);
  }
  .landing-text-button-2 a {
    width: 100%;
    padding: var(--button-padding-1);
    color: var(--text-color-1);
    border: var(--white-color) solid 1px;
    font-weight: var(--button-text-weight-1);
    border-radius: var(--button-rounded-1);
  }
  .landing-text-button-1 a:hover {
    background-color: var(--dark-color-2);
    color: var(--white-color);
    box-shadow: 1px 1px 10px 4px var(--dark-color-3);
  }
  .landing-text-button-2 a:hover {
    background-color: var(--white-color-2);
    color: var(--dark-color-1);
    box-shadow: 1px 1px 10px 4px var(--dark-color-3);
  }
  .landing-text-data-box {
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;

    gap: 1rem;
    padding: 2rem 0;
    background-image: url("/img/icons/landing-text-data-arrow.svg");
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .landing-text-data-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .landing-text-data-p-text-1 {
    font-size: var(--number-text-size);
    font-weight: 600;
  }
  .landing-text-data-p-text-2 {
    width: fit-content;
    font-size: var(--text-size-1-m);
    font-weight: var(--text-weight-1);
    color: var(--text-color-3);
  }
  .landing-picture {
    width: fit-content;
    max-width: 1400px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;

    gap: 1rem;
    z-index: 0;
  }
  .picture-1,
  .picture-2,
  .picture-3 {
    width: 100%;
    max-width: 34%;
  }
  .picture-1 img,
  .picture-2 img,
  .picture-3 img {
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: ease 0.5s;
  }
  .picture-1 img:hover,
  .picture-2 img:hover,
  .picture-3 img:hover {
    width: 110%;
  }
  .picture-1 img {
    min-height: 100px;
    max-height: 340px;
  }
  .picture-2 img {
    min-height: 200px;
    max-height: 490px;
  }
  .picture-3 img {
    min-height: 300px;
    max-height: 610px;
  }
  .landing-base-line {
    width: 100vw;
    height: 5rem;
    background-image: url("/img/icons/landing-base-line.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .acercade-section {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 7rem 0 0;
  }
  .acercade-box {
    width: 90vw;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 2rem;
  }
  .acercade-picture {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .acercade-picture img {
    width: 100%;
  }
  .acercade-text {
    width: fit-content;
    max-width: 650px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .acercade-text-title {
    font-size: var(--title-size-1);
    font-weight: 300;
    border-left: var(--tag-color-1) solid 2px;

    padding-left: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .acercade-text-title span {
    font-weight: 600;
  }
  .acercade-text-subtitle {
    font-size: var(--subtitle-size-1);
    font-weight: 500;
    margin-bottom: 2rem;
  }
  .acercade-text-subtitle span {
    color: var(--tag-color-1);
  }
  .acercade-text-p-text {
    font-size: var(--text-size-1-m);
    font-weight: 300;
    margin-bottom: 1rem;
    color: var(--text-color-2);
  }
  .acercade-button {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .acercade-button a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 1rem;
    padding: var(--button-padding-1);
    border-radius: var(--button-rounded-1);
    background-color: var(--white-color);
    color: var(--dark-color-1);
    font-size: var(--text-size-1-m);
    font-weight: var(--button-text-weight-1);
  }
  .acercade-button a:hover {
    background-color: var(--white-color-2);
  }
  .acercade-base-line {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("/img/icons/acercade-base-background.svg");
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .acercade-base-box {
    width: 90vw;
    max-width: 1400px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    background-image: url("/img/icons/acercade-base-borders-m.svg");
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
    gap: 4rem;
    padding: 7rem 1rem 4rem;
  }
  .acercade-base-icon {
    width: 100%;
    max-width: 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    gap: 1rem;
  }
  .acercade-base-icon-2 {
    width: 100%;
    max-width: 310px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 2.5rem;
    text-align: center;
    gap: 1rem;
    background-image: url("/img/icons/circle-border.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .portafolio-section {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 7rem 0;
    background-image: url("/img/photos-img/portafolio-background.png"),
      url("/img/icons/base-background.svg");
    background-position: top, bottom;
    background-size: contain, contain;
    background-repeat: no-repeat, no-repeat;
  }
  .portafolio-box {
    width: 90vw;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .portafolio-text {
    width: fit-content;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .portafolio-text-title {
    border-left: var(--tag-color-1) solid 2px;
    font-size: var(--title-size-1);
    font-weight: 300;
    padding-left: 0.5rem;
    margin-bottom: 2rem;
  }
  .portafolio-text-title span {
    font-weight: 600;
  }
  .portafolio-text-p-text {
    font-size: var(--text-size-1-m);
    margin-bottom: 0.5rem;
  }
  .portafolio-text-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: fit-content;
  }
  .portafolio-text-button a {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 0.5rem;
    padding: var(--button-padding-1);
    background-color: var(--white-color);
    color: var(--dark-color-1);
    font-size: var(--text-size-1-m);
    font-weight: 500;
    border-radius: var(--button-rounded-1);
  }
  .portafolio-text-button a:hover {
    background-color: var(--white-color-2);
  }
  .portafolio-cards-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-top: 4rem;
    gap: 4rem;
  }
  .portafolio-card-1 {
    width: 100%;
    max-width: 690px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    background: linear-gradient(#1d1d1d, #1d1d1d) padding-box,
      linear-gradient(to bottom, #7a7a7a, transparent) border-box;
    border: 1px solid transparent;
  }
  .portafolio-card-2 {
    width: 100%;
    max-width: 690px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    background: linear-gradient(#1d1d1d, #1d1d1d) padding-box,
      linear-gradient(to top, #7a7a7a, transparent) border-box;
    border: 1px solid transparent;
  }
  .portafolio-card-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 2rem;
  }
  .portafolio-card-picture {
    width: 100%;
    max-width: 620px;
    max-height: 310px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    overflow: hidden;
    margin-top: 0.5rem;
  }
  .portafolio-card-picture img {
    width: 100%;
    border-radius: 4px;
    object-fit: cover;
    object-position: center;
    transition: ease 0.5s;
  }
  .portafolio-card-picture img:hover {
    width: 110%;
  }
  .portafolio-card-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    margin-top: 1rem;
  }
  .portafolio-card-text-tag {
    font-size: var(--text-size-2-m);
    color: var(--tag-color-1);
    font-weight: 300;
  }
  .portafolio-card-text-title {
    font-size: var(--title-size-1-m);
    font-weight: 400;
    margin-bottom: 1rem;
  }
  .portafolio-card-text-title span {
    font-weight: 700;
  }
  .portafolio-card-text-p-text {
    font-size: var(--text-size-1-m);
    font-weight: 400;
    color: var(--text-color-2);
  }
  .portafolio-card-text-button {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    align-self: flex-start;
    margin: 1rem 0 0;
  }
  .portafolio-card-text-button a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: var(--button-padding-1);
    border-radius: var(--button-rounded-1);
    background-color: var(--white-color);
    /* border-bottom: var(--gray-color-1) solid 1px; */
    color: var(--dark-color-1);
    font-size: var(--text-size-1-m);
    font-weight: 600;
    transition: ease 0.3s;
  }
  .portafolio-card-text-button a:hover {
    color: var(--white-color);
    background-color: var(--tag-color-1);
  }
  .servicios-section {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 7rem 0;
  }
  .servicios-box {
    width: 90vw;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .servicios-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 2rem;
  }
  .servicios-text-title-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .servicios-text-title {
    font-size: var(--title-size-1);
    font-weight: 300;
    border-left: var(--tag-color-1) solid 2px;
    padding-left: 0.5rem;
  }
  .servicios-text-title span {
    font-weight: 600;
    color: var(--text-color-1);
  }
  .servicios-text-p-text {
    font-size: var(--text-size-1-m);
    color: var(--text-color-2);
    margin-top: 2rem;
  }
  .servicios-text-button {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .servicios-text-button a {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    margin-top: 0.5rem;
    gap: 0.5rem;
    border-radius: var(--button-rounded-1);
    padding: var(--button-padding-1);
    background-color: var(--white-color);
    color: var(--dark-color-1);
    font-size: var(--button-text-weight-1);
    font-size: var(--text-size-1-m);
  }
  .servicios-text-button a:hover {
    background-color: var(--white-color-2);
  }
  .servicios-text-picture {
    width: 100%;
    max-width: 840px;
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .servicios-text-picture img {
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
  .servicios-cards {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    margin-top: 7rem;
    padding: 1rem;
    gap: 2rem;
  }
  .servicios-card-1,
  .servicios-card-2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 2rem;
    border-radius: var(--button-rounded-1);
  }
  .servicios-card-1 {
    border-top: var(--tag-color-1) solid 4px;
    background-color: var(--dark-color-2);
    box-shadow: 1px 1px 10px 10px var(--dark-color-3);
  }
  .servicios-card-2 {
    border: var(--gray-color-1) solid 1px;
    background-color: transparent;
  }
  .servicios-card-1 img {
    width: fit-content;
  }
  .servicios-card-title {
    font-size: var(--subtitle-size-1);
    font-weight: 600;
    margin-top: 0.5rem;
  }
  .servicios-card-p-text {
    font-size: var(--text-size-1-m);
    color: var(--text-color-2);
    margin-top: 1rem;
  }
  .servicios-card-button {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-top: 0.5rem;
  }
  .servicios-card-button a {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    font-size: var(--text-size-1-m);
    border-bottom: var(--tag-color-1) solid 1px;
    padding-bottom: 0.2rem;
    transition: ease 0.2s;
  }
  .servicios-card-button a:hover {
    background-color: var(--white-color);
    color: var(--dark-color-1);
    padding: var(--button-padding-1);
    border-radius: var(--button-rounded-1);
    border-bottom: none;
  }
  .reviews-section {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-image: url("/img/photos-img/reviews-background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 7rem 0;
  }
  .reviews-box {
    width: 90vw;
    max-width: 1290px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 4rem;
  }
  .reviews-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .reviews-text-title {
    font-size: var(--title-size-1-m);
    font-weight: 300;
    border-left: var(--tag-color-1) solid 2px;
    padding-left: 0.5rem;
  }
  .reviews-text-title span {
    font-weight: 600;
  }
  .reviews-text-p-text {
    width: 100%;
    max-width: 630px;

    font-size: var(--text-size-1-m);
    margin-top: 2rem;
    color: var(--text-color-2);
  }
  .reviews-text-button {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-top: 0.5rem;
  }
  .reviews-text-button a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 0.5rem;
    font-size: var(--text-size-1-m);
    font-weight: var(--button-text-weight-1);
    background-color: var(--white-color);
    padding: var(--button-padding-1);
    border-radius: var(--button-rounded-1);
    color: var(--dark-color-1);
  }
  .reviews-text-button a:hover {
    background-color: var(--white-color-2);
  }
  .reviews-cards {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 2rem;
  }
  .reviews-card-1,
  .reviews-card-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 2rem;
    border-radius: var(--button-rounded-1);
  }
  .reviews-card-1 {
    background-color: var(--dark-color-2);
    border-top: var(--tag-color-1) solid 4px;
  }
  .reviews-card-2 {
    border: var(--gray-color-1) solid 1px;
  }
  .reviews-card-profile {
    width: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 1rem;
  }
  .reviews-card-profile-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    gap: 0.5rem;
  }
  .reviews-card-profile-p-text {
    font-size: var(--text-size-1-m);
  }
  .reviews-card-profile-text img {
    border-top: var(--gray-color-1) solid 1px;
    padding-top: 0.5rem;
  }
  .reviews-card-p-text {
    margin-top: 1rem;
    font-size: var(--text-size-1-m);
    color: var(--text-color-2);
  }
  .reviews-card-p-text span {
    font-size: var(--title-size-1);
    color: var(--white-color);
    font-weight: 600;
  }
  .usp-section {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 7rem 0;
    background-image: url("/img/icons/base-background.svg");
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .usp-box {
    width: 90vw;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    gap: 4rem;
  }
  .usp-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .usp-text-title {
    font-size: var(--title-size-1-m);
    font-weight: 300;
    border-left: var(--tag-color-1) solid 2px;
    padding-left: 0.5rem;
  }
  .usp-text-title span {
    font-weight: 600;
  }
  .usp-text-p-text {
    font-size: var(--text-size-1-m);
    color: var(--text-color-2);
    margin-top: 2rem;
  }
  .usp-text-list {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .usp-text-list li {
    font-size: var(--text-size-1-m);
    color: var(--text-color-1);
    list-style-type: disc;
    list-style-position: inside;
  }
  .usp-text-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-top: 1rem;
  }
  .usp-text-button a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 0.5rem;
    background-color: var(--white-color);
    color: var(--dark-color-1);
    font-weight: var(--button-text-weight-1);
    font-size: var(--text-size-1-m);
    padding: var(--button-padding-1);
    border-radius: var(--button-rounded-1);
  }
  .usp-text-button a:hover {
    background-color: var(--white-color-2);
  }
  .usp-cards {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;

    gap: 2rem;
  }
  .usp-card-1,
  .usp-card-2 {
    width: 100%;
    max-width: 410px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 2rem;
    border-radius: var(--button-rounded-1);
    gap: 1rem;
  }
  .usp-card-1 {
    background-color: var(--dark-color-2);
    border-top: var(--tag-color-1) solid 4px;
  }
  .usp-card-2 {
    background-color: transparent;
    border: var(--gray-color-1) solid 1px;
  }
  .usp-cards h3 {
      font-weight: 600;
  }
  .usp-card-1-title-box,
  .usp-card-2-title-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
  }
  .blog-section {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 7rem 0;
  }
  .blog-box {
    width: 90vw;
    max-width: 1470px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .blog-text {
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .blog-text-title {
    font-size: var(--title-size-1-m);
    font-weight: 300;
    border-left: var(--tag-color-1) solid 2px;
    padding-left: 0.5rem;
  }
  .blog-text-title span {
    font-weight: 600;
  }
  .blog-text-p-text {
    margin-top: 2rem;
    font-size: var(--text-size-1-m);
    color: var(--text-color-2);
  }
  .blog-text-button {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .blog-text-button a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 0.5rem;
    padding: var(--button-padding-1);
    background-color: var(--white-color);
    font-size: var(--text-size-1-m);
    color: var(--dark-color-1);
    font-weight: var(--button-text-weight-1);
    border-radius: var(--button-rounded-1);
  }
  .blog-text-button a:hover {
    background-color: var(--white-color-2);
  }
  .blog-cards {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-top: 4rem;
    gap: 2rem;
  }
  .blog-card-2,
  .blog-card-1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    border-radius: var(--button-rounded-1);
  }
  .blog-card-2 {
    background-color: transparent;
  }
  .blog-card-2 picture,
  .blog-card-1 picture {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .blog-card-1 picture {
    height: 17rem;
  }
  .blog-card-2 picture {
    height: 13rem;
  }
  .blog-card-2 img,
  .blog-card-1 img {
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
  .blog-card-2-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 2rem;
    border: var(--gray-color-1) solid 1px;
    border-top: none;
  }
  .blog-card-1 {
    background-color: var(--dark-color-2);
  }
  .blog-card-1-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 2rem;
    border-bottom: var(--white-color) solid 4px;
  }
  .blog-card-2-title {
    font-size: var(--subtitle-size-2);
  }
  .blog-card-2-p-text {
    margin-top: 1rem;
    font-size: var(--text-size-1-m);
    color: var(--text-color-2);
  }
  .blog-card-2-info {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    margin-top: 1rem;
  }
  .blog-card-2-base-date {
    font-size: var(--text-size-1-m);
    color: var(--text-color-2);
  }
  .blog-card-2-button {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .blog-card-2-button a {
    font-size: var(--text-size-1-m);
    color: var(--text-color-1);

    transition: ease 0.2s;
    border-bottom: var(--tag-color-1) solid 1px;
    padding-bottom: 0.2rem;
  }
  .blog-card-2-button a:hover {
    background-color: var(--white-color);
    padding: var(--button-padding-1);
    border-radius: var(--button-rounded-1);
    color: var(--dark-color-1);
    font-weight: 500;
  }
  .blog-card-1-title {
    font-size: var(--subtitle-size-2);
  }
  .blog-card-1-p-text {
    margin-top: 1rem;
    font-size: var(--text-size-1-m);
    color: var(--text-color-2);
  }
  .blog-card-1-info {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    margin-top: 1rem;
  }
  .blog-card-1-base-date {
    font-size: var(--text-size-1-m);
    color: var(--text-color-2);
  }
  .blog-card-1-button {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .blog-card-1-button a {
    font-size: var(--text-size-1-m);
    color: var(--text-color-1);

    transition: ease 0.2s;
    border-bottom: var(--tag-color-1) solid 1px;
    padding-bottom: 0.2rem;
  }
  .blog-card-1-button a:hover {
    background-color: var(--white-color);
    padding: var(--button-padding-1);
    border-radius: var(--button-rounded-1);
    color: var(--dark-color-1);
    font-weight: 500;
  }
  .contacto-section {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 7rem 0;
    background-color: var(--dark-color-4);
    background-image: url("/img/icons/base-background.svg");
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .contacto-box {
    width: 90vw;
    max-width: 1450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 4rem;
  }
  .contacto-info {
    width: 100%;
    max-width: 550px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .contacto-info-title {
    font-size: var(--title-size-1-m);
    font-weight: 300;
    border-left: var(--tag-color-1) solid 2px;
    padding-left: 0.5rem;
  }
  .contacto-info-title span {
    font-weight: 600;
  }
  .contacto-info-p-text {
    font-size: var(--text-size-1-m);
    color: var(--text-color-2);
    margin-top: 2rem;
  }
  .contacto-info-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    margin-top: 2rem;
    gap: 1rem;
  }
  .contacto-info-form p {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .contacto-info-form input,
  .contacto-info-form textarea {
    width: 100%;
    background-color: var(--dark-color-2);
    padding: var(--button-padding-1);
    border-radius: var(--button-rounded-1);
    border: var(--gray-color-1) solid 1px;
    font-size: var(--text-size-1-m);
  }
  .contacto-info-form textarea {
    padding-bottom: 4rem;
  }
  .contacto-info-form input:focus,
  .contacto-info-form textarea:focus {
    color: var(--text-color-2);
  }
  .contacto-info-form-button {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .contacto-info-form-button button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-self: flex-start;

    gap: 0.5rem;
    cursor: pointer;
    background-color: var(--white-color);
    color: var(--dark-color-1);
    font-weight: var(--button-text-weight-1);
    font-size: var(--text-size-1-m);
    padding: var(--button-padding-1);
    border-radius: var(--button-rounded-1);
  }
  .contacto-info-form-button button:hover {
    background-color: var(--white-color-2);
  }
  .contacto-links {
    width: 100%;
    max-width: 840px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    gap: 2rem;
    padding: 2rem;
    border: var(--gray-color-1) solid 1px;
    border-radius: var(--button-rounded-1);
  }
  .contacto-links-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .contacto-links-text-title {
    font-size: var(--subtitle-size-2);
    font-weight: 500;
  }
  .contacto-links-text-subtitle {
    font-size: var(--subtitle-size-1);
    font-weight: 600;

    margin-top: 1rem;
    padding-bottom: 0.2rem;
    border-bottom: var(--tag-color-1) solid 1px;
  }
  .contacto-links-text-hours {
    display: flex;
    flex-direction: column;
    font-size: var(--text-size-1-m);

    margin-top: 1rem;
  }
  .contacto-links-text-link {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 0.5rem;
    word-wrap: break-word;
    word-break: break-all;
    margin-top: 1rem;
    color: var(--text-color-2);
    font-size: var(--text-size-1-m);
    font-weight: 500;
  }
  .contacto-links-text-socialmedia {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    margin-top: 1rem;
    gap: 0.5rem;
  }
  .contacto-link-map {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: var(--button-rounded-1);
  }
  .contacto-link-map img {
    width: 100%;
    object-fit: contain;
    object-position: center;
  }
  .banner-section {
    width: 90vw;
    max-width: 1450px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-self: center;

    margin-top: -5rem;
    gap: 1rem;
    padding: 2rem;
    z-index: 9;
    border-radius: var(--button-rounded-1);
    background-color: var(--dark-color-4);
  }
  .banner-title {
    width: 100%;
    font-weight: 300;
    font-size: var(--title-size-1-m);
    border-left: var(--tag-color-1) solid 2px;
    padding-left: 0.5rem;
  }
  .banner-title span {
    font-weight: 600;
  }
  .banner-p-text {
    width: 100%;
    font-size: var(--text-size-1-m);
    color: var(--text-color-2);
  }
  .banner-button {
    width: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .banner-button a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
    gap: 0.5rem;
    padding: var(--button-padding-1);
    border-radius: var(--button-rounded-1);
    font-weight: var(--button-text-weight-1);
    font-size: var(--text-size-1-m);
    color: var(--dark-color-1);
    background-color: var(--white-color);
  }
  .banner-button a:hover {
    background-color: var(--white-color-2);
  }
}

@media screen and (min-width: 740px) {
  .reviews-cards {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
  }
  .reviews-card-1,
  .reviews-card-2 {
    width: 43%;
    max-width: 670px;
  }
  .usp-text {
    max-width: 540px;
  }
  .usp-card-1,
  .usp-card-2 {
    width: 43%;
  }
  .blog-card-1,
  .blog-card-2 {
    max-width: 600px;
  }
  .contacto-links {
    flex-direction: row;
  }
  .contacto-links-text {
    width: 60%;
  }
  .contacto-link-map {
    width: 40%;
  }
  .contacto-link-map img {
    width: fit-content;
  }
}
@media screen and (min-width: 830px) {
  .servicios-card-1,
  .servicios-card-2 {
    max-width: 340px;
  }
}

@media screen and (min-width: 900px) {
  .landing-box {
    background-image: url("/img/icons/landing-background-lines.svg");
    padding-top: 13rem;
  }
  .landing-text-title {
    font-size: var(--landing-title-size-1);
    line-height: var(--landing-title-line-height-1);
  }
  .landing-text-title img {
    max-width: fit-content;
  }
  .landing-text-p-text {
    max-width: 540px;
    font-size: var(--text-size-1);
  }
  .acercade-box {
    flex-direction: row;
  }
  .acercade-base-box {
    flex-direction: row;
    background-image: url("/img/icons/acercade-base-borders.svg");
  }
  .acercade-picture {
    width: 50%;
    max-width: fit-content;
  }
  .acercade-text {
    width: 50%;
    max-width: 650px;
  }
  .portafolio-cards-box {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .portafolio-card-1,
  .portafolio-card-2 {
    width: 40%;
    max-width: 670px;
  }
  .portafolio-card-picture img {
    max-height: 270px;
  }
  .servicios-text {
    flex-direction: row;
  }
  .servicios-text-title-box {
    width: 40%;
    max-width: 540px;
  }
  .servicios-text-picture {
    width: 60%;
  }
  .contacto-box {
    flex-direction: row;
  }
  .banner-title {
    max-width: 500px;
  }
  .banner-p-text {
    max-width: 670px;
  }
}
@media screen and (min-width: 1040px) {
  .landing-picture {
    margin-top: -4rem;
  }
  .blog-cards {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .blog-card-1,
  .blog-card-2 {
    max-width: 410px;
  }
}
@media screen and (min-width: 1110px) {
  .usp-box {
    flex-direction: row;
  }
  .usp-text {
    width: 34%;
  }
  .usp-cards {
    width: 64%;
  }
  .usp-card-1,
  .usp-card-2 {
    width: 47%;
  }
}
@media screen and (min-width: 1200px) {
  .landing-picture {
    margin-top: -7rem;
  }
  .acercade-base-icon {
    max-width: 290px;
  }
  .portafolio-card-1,
  .portafolio-card-2 {
    width: 46%;
  }
  .servicios-text-title-box {
    max-width: 540px;
  }
  .contacto-links-text {
    width: 50%;
  }
  .contacto-link-map {
    width: 50%;
  }
  .banner-section {
    justify-content: space-between;
  }
}
@media screen and (min-width: 1250px) {
  .servicios-card-1,
  .servicios-card-2 {
    max-width: 530px;
  }
}
@media screen and (min-width: 1370px) {
  .landing-picture {
    margin-top: -12rem;
  }
  .acercade-base-box {
    gap: 10rem;
  }
  /* .acercade-base-icon {
    max-width: 190px;
  } */
  .banner-p-text {
    max-width: 470px;
  }
}
@media screen and (min-width: 1500px) {
  .landing-picture {
    margin-top: -16rem;
  }
  .servicios-card-1,
  .servicios-card-2 {
    width: 100%;
    max-width: 39.4375rem;
  }
}