@import url(fonts.css);
@import url(variables.css);

body {
  font-family: var(--font-medium);
  font-size: var(--f-normal);
  font-weight: normal;
  line-height: var(--lh-text);
  color: var(--base-custom);
}

section {
  padding-top: var(--s-big);
  padding-bottom: var(--s-big);
}

a {
  color: var(--main-custom);
  transition: var(--tr-normal);
}

h1,
h2,
h3 {
  font-family: var(--font-light);
  line-height: var(--lh-title);

  & strong {
    font-family: var(--font-strong);
    font-weight: normal;
  }
}

h1 {
  font-size: var(--f-title);
  letter-spacing: -1px;
}

h2 {
  font-size: var(--f-subtitle);
}

h3 {
  font-size: var(--f-minititle);
}

h6,
.h6 {
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-size: var(--f-small);
  letter-spacing: var(--ls-title);
  overflow: hidden;

  & span {
    position: relative;
    display: inline-block;

    &::before,
    &::after {
      content: "";
      display: block;
      background: gray;
      height: 1px;
      position: absolute;
      top: 45%;
      opacity: 0.2;
    }

    &::before {
      right: calc(100% + 7px);
      left: -9000px;
    }

    &::after {
      left: calc(100% + 7px);
      right: -9000px;
    }
  }
}

strong {
  font-family: var(--font-strong);
  font-weight: normal;
}

.ul-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;

  & img {
    max-width: 100%;
  }
}

.ul-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--s-normal);
  height: 100%;
}

.ul-modal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 5px;
  margin-bottom: var(--s-normal);

  & a {
    text-decoration: none;
    color: var(--base-custom);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 5px;
    transition: var(--tr-small);

    & img {
      width: var(--s-plus);
      height: auto;
    }

    &:hover {
      color: var(--main-custom);
      gap: 10px;
    }
  }
}

.pre-p {
  &::before {
    content: "";
    display: inline-block;
    height: 2px;
    width: var(--s-normal);
    background: var(--gray-custom);
    margin: 0 5px 5px 0;
    opacity: 0.5;
  }
}

.link {
  text-decoration: none;
  border-bottom: dashed 1px var(--main-custom);
  background: url(../images/icon-info.svg) no-repeat 0 4px;
  padding-left: var(--s-plus);
  outline: none;
  border: none;
  color: var(--main-custom);

  &:hover {
    color: var(--base-custom);
  }
}

.link-big {
  font-family: var(--font-strong);
  color: var(--base-custom);
  text-decoration: none;

  &:hover {
    color: var(--main-custom);
  }
}

.link-phone {
  text-align: right;
  line-height: 0.9em;
  display: flex;
  flex-direction: column;

  & strong {
    display: block;
    font-weight: normal;
  }

  & small {
    font-family: var(--font-medium);
    font-size: var(--f-small);
    opacity: 0.6;
  }
}

.custom-divider {
  position: relative;
  font-family: var(--font-medium);
  font-size: var(--f-small);
  opacity: 0.6;
  text-align: center;

  &::before,
  &::after {
    content: "";
    display: block;
    height: 10px;
    width: 1px;
    background-color: var(--gray-custom);
    margin: 0 auto;
  }
}

.claim {
  & strong {
    display: block;
    margin-bottom: var(--s-small);
    margin-top: var(--s-small);
  }
  & small {
    display: block;
    line-height: var(--lh-text);
  }
}

.logo-header {
  width: var(--s-logo-);
  display: inline-flex;
  transition: var(--tr-normal);

  & img {
    max-width: 100%;
    transition: var(--tr-normal);
  }
}

.btn {
  display: inline-flex;
  width: auto;
  font-size: var(--f-normal);
  font-family: var(--font-medium);
  color: var(--main-custom);
  background: white;
  border-radius: var(--br-big);
  padding: var(--s-small) var(--s-plus);

  & span {
    background: url(../images/icon-link.svg) no-repeat right center;
    display: inline-block;
    padding-right: var(--s-normal);
    transition: var(--tr-small);
  }

  &:hover {
    & span {
      padding-right: var(--s-plus);
    }
  }
}

.btn-primary {
  background: var(--main-custom);
  border-color: var(--main-custom);
  color: white;

  &:hover {
    background: var(--base-custom);
    border-color: var(--base-custom);
  }
}

.btn-white {
  & span {
    background: url(../images/icon-link-color.svg) no-repeat right center;
  }
}

.btn-sm {
  font-size: var(--f-footer);
}

.btn-whatsapp {
  background: var(--green-custom);
  padding: 0;
  width: var(--s-extra);
  height: var(--s-extra);
  display: flex;
  align-items: center;
  justify-content: center;

  & img {
    max-width: 60%;
  }

  &:hover {
    background: var(--base-custom);
  }
}

.btn-close {
  background: var(--main-custom);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--br-big);
  opacity: 1;
  transition: var(--tr-normal);
  padding: var(--s-normal) !important;

  &::before {
    content: "";
    width: var(--s-normal);
    height: var(--s-normal);
    background: url(../images/icon-close.svg) no-repeat center center;
    display: block;
  }

  &:hover {
    opacity: 1;
    background-color: var(--base-custom);
  }
}

.feature {
  display: flex;
  flex-direction: row;
  gap: var(--s-small);
  align-items: center;
  justify-content: flex-start;
  font-size: var(--f-footer);
  line-height: var(--lh-text-small);
  margin-bottom: var(--s-small);
  margin-top: var(--s-small);

  & img {
    width: var(--s-extra-big);
    height: auto;
  }

  & p {
    margin: 0;
  }
}

.swiper {
  width: 100%;
  height: 70px;
  position: relative;
  margin-bottom: var(--s-normal);

  & .swiper-slide {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    & img {
      max-width: 100%;
      height: auto;
    }
  }
}

.card-link {
  text-decoration: none;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  flex-direction: column;
  color: white;
  background: var(--base-custom);
  border: none;
  position: relative;
  overflow: hidden;
  margin: 0 0 var(--s-normal);

  & figure {
    line-height: 0;
    margin: 0;

    & img {
      width: 100%;
      height: auto;
      transition: var(--tr-normal);
      filter: grayscale(1);
      opacity: 0.6;
    }
  }

  & .card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    padding: var(--s-plus);
    transition: var(--tr-normal);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    & .btn {
      position: absolute;
      right: var(--s-plus);
      top: var(--s-plus);
      opacity: 0;
      transition: var(--tr-normal);
    }

    & h2 {
      position: relative;
      z-index: 2;
      transition: var(--tr-normal);
    }

    & p {
      position: relative;
      z-index: 2;
      margin: 0;

      &.pre-p {
        &::before {
          background: white;
        }
      }
    }

    &::after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background: var(--base-gr);
      z-index: 1;
      opacity: 0.85;
    }
  }

  &:hover {
    & figure {
      & img {
        transform: scale(1.1);
        filter: grayscale(0);
        opacity: 1;
      }
    }

    & .card-body {
      padding-bottom: var(--s-medium);

      & h2 {
        margin-bottom: var(--s-normal);
      }

      & .btn {
        opacity: 1;
      }
    }
  }
}

.card-link--01 {
  & .card-body {
    &::after {
      background: var(--main-gr);
    }
  }
}

.card-link--02 {
  & .card-body {
    &::after {
      background: var(--yellow-gr);
    }
  }
}

.card-link--03 {
  & .card-body {
    &::after {
      background: var(--blue-gr);
    }
  }
}

.main-footer {
  padding-top: 0;
  padding-bottom: var(--s-big);
  font-size: var(--f-footer);

  & p {
    & img {
      margin: -10px 5px 0 0;
    }
  }

  & a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.main-header {
  padding-top: var(--s-normal);
  padding-bottom: var(--s-normal);
  transition: var(--tr-small);
}

.main-header--scrolled {
  background: var(--white-header-gr);
  padding-top: var(--s-small);
  padding-bottom: var(--s-small);

  & .logo-header {
    width: var(--s-logo-mobile);
  }
}

.s-hero {
  padding-top: var(--s-header);
  padding-bottom: 0;
}

.s-features {
  padding-top: 0;
  padding-bottom: var(--s-normal);
}

.s-logos {
  & .container {
    &::after {
      content: "";
      display: block;
      background: gray;
      height: 1px;
      width: 100%;
      opacity: 0.2;
    }
  }
}

.bgcustom-body {
  position: fixed;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  overflow: hidden;

  & ::after {
    display: block;
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90%;
    background: var(--white-gr);
  }

  & .bgcustom-body--content {
    width: 1600px;
    height: 1600px;
    position: absolute;
    top: 0;
    background: url(../images/bg-body.svg) no-repeat center top;
    background-size: contain;
    animation: rotating 2s;
    animation-timing-function: ease-in-out;
    margin-top: -10%;
  }
}

.appear {
  opacity: 0;
}

.modal-service {
  & .modal-content {
    border: none;
    border-radius: var(--br-normal);
  }

  & .modal-header {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 2;
    border: none;

    & .btn-close {
      margin: -30px -30px 0 auto;
    }
  }

  & .modal-body {
    padding: 0;

    & .row {
      margin: 0;
    }

    & figure {
      margin: 0;
      line-height: 0;
      border-radius: var(--br-normal) 0 0 var(--br-normal);
      overflow: hidden;
      height: 100%;

      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    & .modal-body--content {
      padding: var(--s-extra) var(--s-medium) var(--s-medium);
    }
  }
}
@media (max-width: 1024px) {
  .col-display {
    display: none;
  }
}

@media (max-width: 993px) {
  h1 {
    font-size: var(--f-subtitle);
  }

  h3 {
    font-size: var(--f-responsivetitle);
  }
}

@media (max-width: 768px) {
  body {
    font-size: var(--f-mobile);
  }
  .modal-service {
    & .modal-header {
      & .btn-close {
margin: -22px -22px 0 auto;
      }
    }
    & .modal-body {
      & .modal-body--content {
        padding: var(--s-medium) var(--s-normal) var(--s-normal) var(--s-normal);

        & h2 {
          font-size: var(--f-responsivetitle);
        }
      }
    }
  }

  .bgcustom-body {
    & .bgcustom-body--content {
      width: 600px;
      height: 600px;
    }
  }

  h1 {
    font-size: var(--f-minititle);
  }
  h2 {
    font-size: 1.3em;
  }

  .claim {
    & small {
      font-size: var(--f-mobile);
    }
  }

  section {
    padding-top: var(--s-normal);
    padding-bottom: var(--s-normal);
  }

  .main-header {
    padding-top: var(--s-small);
    padding-bottom: var(--s-small);
  }

  .logo-header {
    max-width: var(--s-logo-mobile);
  }

  .main-footer {
    padding-bottom: var(--s-normal);
  }

  .s-hero {
    padding-top: var(--s-extra-big);
  }

  .btn-whatsapp {
    position: fixed;
    right: var(--s-normal);
    bottom: var(--s-normal);
  }

  .custom-divider--display {
    display: none;
  }

  .ul-header {
    gap: 0;
  }
}

/* --- Animaciones --- */

@keyframes rotating {
  from {
    transform: rotate(80deg) translate(120px, 140px);
    opacity: 0;
  }
  to {
    transform: rotate(0deg) translate(0px, 0px);
    opacity: 1;
  }
}