@font-face {
  font-family: garet-normal;
  src: url(../fuentes/Garet-Book.otf); }
@font-face {
  font-family: garet-bold;
  src: url(../fuentes/Garet-Heavy.otf); }
header {
  width: 100%; }
  header .navbar-dark {
    display: none;
    margin: 0; }
    @media screen and (max-width: 1070px) {
      header .navbar-dark {
        display: block; } }
  header nav.nav-menu {
    width: 90%;
    max-width: 100%;
    margin: 20px 20px;
    position: absolute;
    background-color: transparent;
    display: flex;
    z-index: 99;
    justify-content: space-between; }
    header nav.nav-menu .image img {
      width: 7vw; }
      @media screen and (max-width: 1070px) {
        header nav.nav-menu .image img {
          display: none; } }
    @media screen and (max-width: 1070px) {
      header nav.nav-menu {
        display: none; } }
    header nav.nav-menu ul {
      overflow: hidden;
      list-style: none; }
      @media screen and (max-width: 1070px) {
        header nav.nav-menu ul {
          width: 23%;
          position: relative;
          top: 10vw;
          transition: right 0.8s ease; } }
      header nav.nav-menu ul .select a {
        cursor: pointer; }
      header nav.nav-menu ul li {
        float: left;
        font-family: garet-normal;
        cursor: pointer; }
        @media screen and (max-width: 1070px) {
          header nav.nav-menu ul li {
            display: block;
            position: relative;
            float: none;
            opacity: 0;
            transform: translateX(50px);
            animation: slideIn 1s forwards; }
          @keyframes slideIn {
            from {
              opacity: 0;
              transform: translateX(50px); }
            to {
              opacity: 1;
              transform: translateX(0); } } }
        header nav.nav-menu ul li a {
          color: white;
          padding: 20px;
          display: block;
          text-decoration: none;
          transition: .3s;
          cursor: pointer;
          font-size: 1.5vw; }
          @media screen and (max-width: 1070px) {
            header nav.nav-menu ul li a {
              padding-right: 20px;
              text-align: right; } }
          header nav.nav-menu ul li a:hover {
            color: #4681ff; }
        header nav.nav-menu ul li button {
          border: none;
          background-color: transparent;
          color: white;
          transition: .3s; }
          header nav.nav-menu ul li button:hover {
            color: #4681ff; }
        header nav.nav-menu ul li .dropdown-content {
          position: absolute;
          opacity: 0;
          visibility: hidden;
          padding-left: 15px;
          width: 20vw;
          transition: opacity 0.3s ease, visibility 0.3s ease; }
          header nav.nav-menu ul li .dropdown-content a {
            transition: .3s;
            padding: 5px;
            cursor: pointer; }
            header nav.nav-menu ul li .dropdown-content a:hover {
              color: #4681ff; }
        header nav.nav-menu ul li .visible {
          opacity: 1;
          visibility: visible; }
    header nav.nav-menu ul.open {
      right: 0; }

@font-face {
  font-family: garet-normal;
  src: url(../fuentes/Garet-Book.otf); }
@font-face {
  font-family: garet-bold;
  src: url(../fuentes/Garet-Heavy.otf); }
ul {
  margin: 0px;
  padding: 0px; }

.footer-section {
  background: black;
  position: relative;
  border-top: solid 1px white; }

.footer-cta {
  border-bottom: 1px solid #373636; }

.single-cta i {
  background: linear-gradient(90deg, rgba(36, 24, 255, 0.719) 0%, rgba(68, 68, 255, 0.726) 35%, rgba(77, 225, 255, 0.822) 100%);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 30px;
  float: left;
  margin-top: 8px; }

.cta-text {
  padding-left: 15px;
  display: inline-block; }

.cta-text h4 {
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 2px; }

.cta-text span {
  color: #d6d6d6;
  font-size: 15px; }

.footer-content {
  position: relative;
  z-index: 2; }

.footer-pattern img {
  position: absolute;
  top: 0;
  left: 0;
  height: 330px;
  background-size: cover;
  background-position: 100% 100%; }

.footer-logo {
  margin-bottom: 30px; }

.footer-logo img {
  width: 40%; }

.footer-text p {
  margin-bottom: 14px;
  font-size: 14px;
  color: #d6d6d6;
  line-height: 28px; }

.footer-social-icon span {
  color: white;
  display: block;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 20px; }

.footer-social-icon a {
  color: white;
  font-size: 16px;
  margin-right: 15px; }

.footer-widget-heading h3 {
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 40px;
  position: relative; }

.footer-widget-heading h3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -15px;
  height: 2px;
  width: 50px;
  background: linear-gradient(90deg, rgba(36, 24, 255, 0.719) 0%, rgba(68, 68, 255, 0.726) 35%, rgba(77, 225, 255, 0.822) 100%); }

.footer-widget ul li {
  display: inline-block;
  float: left;
  width: 50%;
  margin-bottom: 12px; }

.footer-widget ul li a:hover {
  background: linear-gradient(90deg, rgba(36, 24, 255, 0.719) 0%, rgba(68, 68, 255, 0.726) 35%, rgba(77, 225, 255, 0.822) 100%);
  -webkit-background-clip: text;
  color: transparent; }

.footer-widget ul li a {
  color: #d6d6d6;
  text-transform: capitalize; }

.subscribe-form {
  position: relative;
  overflow: hidden; }

.subscribe-form input {
  width: 100%;
  padding: 14px 28px;
  background: #373636;
  border: 1px solid #373636;
  color: white;
  border: none; }

.subscribe-form button {
  position: absolute;
  right: 0;
  background: linear-gradient(90deg, rgba(36, 24, 255, 0.719) 0%, rgba(68, 68, 255, 0.726) 35%, rgba(77, 225, 255, 0.822) 100%);
  padding: 13px 20px;
  top: 0;
  border: none; }

.subscribe-form button i {
  color: white;
  font-size: 22px;
  transform: rotate(-6deg); }

.copyright-area {
  background: #202020;
  padding: 25px 0; }

.copyright-text p {
  margin: 0;
  font-size: 14px;
  color: #d6d6d6; }

.copyright-text p a {
  color: #4681ff; }

.footer-menu li {
  display: inline-block;
  margin-left: 20px; }

.footer-menu li:hover a {
  color: #4681ff; }

.footer-menu li a {
  font-size: 14px;
  color: #d6d6d6; }

@font-face {
  font-family: garet-normal;
  src: url(../fuentes/Garet-Book.otf); }
@font-face {
  font-family: garet-bold;
  src: url(../fuentes/Garet-Heavy.otf); }
.bannerInicio {
  background-image: url(../img/bannerInicio.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  height: 45vw;
  padding-left: 2vw;
  gap: 40px;
  mask-image: linear-gradient(black 65%, transparent); }
  .bannerInicio h1 {
    font-size: 4.8vw;
    font-family: garet-bold;
    color: white;
    animation-duration: 2s; }
    .bannerInicio h1 span {
      background: linear-gradient(90deg, #0e1e40 0%, #4681ff 40%, #00d4ff 100%);
      -webkit-background-clip: text;
      color: transparent; }

.nosotrosInicio {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding-inline: 3vw;
  padding-block: 5.5vw; }
  .nosotrosInicio .nosotrosText {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-inline: 1vw; }
    .nosotrosInicio .nosotrosText h2 {
      font-family: garet-bold;
      color: white;
      font-size: 2.7vw; }
    .nosotrosInicio .nosotrosText p {
      color: #d6d6d6;
      font-family: garet-normal;
      font-weight: 800; }
  .nosotrosInicio .nosotrosImagen img {
    width: 100%;
    border-radius: 30px; }

.serviciosInicio {
  padding-block: 5.5vw; }
  .serviciosInicio .tituloServicio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-block: 1.4vw; }
    .serviciosInicio .tituloServicio h4 {
      width: 30%; }
    .serviciosInicio .tituloServicio h2 {
      font-family: garet-bold;
      color: white;
      font-size: 4vw; }
    .serviciosInicio .tituloServicio p {
      font-family: garet-normal;
      font-weight: 800;
      width: 60%;
      text-align: center;
      color: #d6d6d6;
      font-size: 1.5vw; }
  .serviciosInicio .serviciosCards {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(4, 1fr);
    padding-block: 3vw;
    gap: 30px;
    padding-inline: 2vw; }
    .serviciosInicio .serviciosCards .servicioCard {
      background: linear-gradient(145deg, #0f1628 0%, #182033 25%, #0d121e 50%, #1b253c 75%, #10182b 100%);
      padding: 1.2vw 1vw 3vw 1.2vw;
      border-radius: 15px;
      box-shadow: rgba(255, 255, 255, 0.027) 0px 1px 3px 0px, rgba(255, 255, 255, 0.055) 0px 0px 0px 1px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      transition: all .3s;
      border: solid 1px #1a2d52; }
      .serviciosInicio .serviciosCards .servicioCard:hover {
        background-color: #141925c5;
        border-bottom: solid 2px white;
        transform: translateY(-15px); }
      .serviciosInicio .serviciosCards .servicioCard .iconServicio {
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 2.5vw;
        padding: .5vw;
        width: 25%;
        border-radius: 10px;
        background: #3f5efb;
        background: linear-gradient(90deg, #3f5efb 0%, #fc466b 100%); }
        .serviciosInicio .serviciosCards .servicioCard .iconServicio i {
          position: relative;
          top: 4px; }
      .serviciosInicio .serviciosCards .servicioCard h3 {
        font-family: garet-bold;
        color: white; }
      .serviciosInicio .serviciosCards .servicioCard p {
        font-family: garet-normal;
        color: #d6d6d6;
        font-weight: 800;
        font-size: 1.2vw; }
      .serviciosInicio .serviciosCards .servicioCard a button {
        background-color: transparent;
        color: white;
        border: none;
        transition: all .4s; }
        .serviciosInicio .serviciosCards .servicioCard a button i {
          position: relative;
          top: 3px; }
        .serviciosInicio .serviciosCards .servicioCard a button:hover {
          color: #4681ff; }

.proyectosInicio {
  padding-block: 5.5vw;
  text-align: center; }
  .proyectosInicio .tituloProyectos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px; }
    .proyectosInicio .tituloProyectos h4 {
      width: 30%; }
    .proyectosInicio .tituloProyectos h2 {
      font-family: garet-bold;
      color: white;
      font-size: 4vw; }
    .proyectosInicio .tituloProyectos p {
      font-family: garet-normal;
      font-weight: 800;
      font-size: 1.5vw;
      width: 60%;
      text-align: center;
      color: #d6d6d6; }
  .proyectosInicio .proyectosCards {
    display: grid;
    justify-items: center;
    align-items: center;
    padding-inline: 2vw;
    padding-block: 5vw;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; }
    .proyectosInicio .proyectosCards .proyectoCard {
      background: linear-gradient(145deg, #0f1628 0%, #182033 25%, #0d121e 50%, #1b253c 75%, #10182b 100%);
      box-shadow: rgba(255, 255, 255, 0.027) 0px 1px 3px 0px, rgba(255, 255, 255, 0.055) 0px 0px 0px 1px;
      border-radius: 15px;
      text-align: left; }
      .proyectosInicio .proyectosCards .proyectoCard .imagenProyecto {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        height: 15vw;
        border-radius: 10px 10px 0 0; }
      .proyectosInicio .proyectosCards .proyectoCard .parrafoProyecto {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 1.2vw 1.2vw 2vw 1.2vw; }
        .proyectosInicio .proyectosCards .proyectoCard .parrafoProyecto h3 {
          font-family: garet-bold;
          color: white;
          font-size: 1.6rem; }
        .proyectosInicio .proyectosCards .proyectoCard .parrafoProyecto p {
          font-family: garet-normal;
          color: #d6d6d6; }

.laboratorioInicio {
  mask-image: linear-gradient(black 65%, transparent);
  padding-block: 5.5vw; }
  .laboratorioInicio .tituloLaboratorio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px; }
    .laboratorioInicio .tituloLaboratorio h4 {
      width: 30%; }
    .laboratorioInicio .tituloLaboratorio h2 {
      font-family: garet-bold;
      color: white;
      font-size: 4vw; }
    .laboratorioInicio .tituloLaboratorio p {
      font-family: garet-normal;
      font-weight: 800;
      font-size: 1.5vw;
      width: 60%;
      text-align: center;
      color: #d6d6d6; }
  .laboratorioInicio .laboratorioCards {
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    padding-block: 5vw;
    padding-inline: 2vw;
    gap: 30px; }
    .laboratorioInicio .laboratorioCards .laboratorioCard {
      background: linear-gradient(145deg, #0f1628 0%, #182033 25%, #0d121e 50%, #1b253c 75%, #10182b 100%);
      padding: 2vw;
      border-radius: 20px;
      box-shadow: rgba(255, 255, 255, 0.027) 0px 1px 3px 0px, rgba(255, 255, 255, 0.055) 0px 0px 0px 1px;
      display: flex;
      flex-direction: column;
      gap: 10px; }
      .laboratorioInicio .laboratorioCards .laboratorioCard .iconLab i {
        font-size: 3vw;
        color: white; }
      .laboratorioInicio .laboratorioCards .laboratorioCard h3 {
        font-family: garet-bold;
        font-size: 2.1vw;
        color: white; }
      .laboratorioInicio .laboratorioCards .laboratorioCard p {
        font-family: garet-normal;
        color: #d6d6d6;
        font-weight: 800; }

.contacto {
  background: black;
  background: linear-gradient(180deg, black 13%, #0c0d11 30%, #090c12 61%, #0d1724 100%, #05172f 100%, #101424 100%);
  background-size: cover;
  padding-block: 7vw;
  padding-inline: 2vw;
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(2, 1fr); }
  .contacto .contactoText {
    display: flex;
    flex-direction: column;
    gap: 25px; }
    .contacto .contactoText h2 {
      font-family: garet-bold;
      color: white;
      font-size: 2.7vw; }
    .contacto .contactoText p {
      font-family: garet-normal;
      font-weight: 800;
      color: #d6d6d6;
      font-size: 1.5vw; }
    .contacto .contactoText .chat {
      display: flex;
      gap: 40px; }
      .contacto .contactoText .chat .icon {
        position: relative;
        top: 6px; }
        .contacto .contactoText .chat .icon span {
          background: #eeaeca;
          background: linear-gradient(90deg, #eeaeca 0%, #94bbe9 100%);
          padding: 1.5vw;
          border-radius: 50px; }
          .contacto .contactoText .chat .icon span i {
            font-size: 2vw;
            position: relative;
            top: 8px; }
      .contacto .contactoText .chat .text h5 {
        font-family: garet-bold;
        color: white;
        font-size: 1.8vw; }
      .contacto .contactoText .chat .text p {
        font-size: 1.3vw; }
  .contacto .contactoForm form {
    background: linear-gradient(145deg, #0f1628 0%, #182033 25%, #0d121e 50%, #1b253c 75%, #10182b 100%);
    padding: 2.5vw 4vw 3vw 3vw;
    width: 40vw;
    border-radius: 20px;
    box-shadow: rgba(255, 255, 255, 0.123) 0px 1px 3px 0px, rgba(255, 255, 255, 0.171) 0px 0px 0px 1px; }
    .contacto .contactoForm form h3 {
      font-family: garet-bold;
      color: white;
      font-size: 2vw; }
    .contacto .contactoForm form .form2 {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(2, 1fr);
      padding-block: 2vw; }
    .contacto .contactoForm form input {
      width: 100%;
      margin-bottom: 2vw;
      padding: .6vw 0 .6vw .6vw;
      border-radius: 7px;
      border: none;
      background-color: #141925c5;
      box-shadow: rgba(255, 255, 255, 0.123) 0px 1px 3px 0px, rgba(255, 255, 255, 0.171) 0px 0px 0px 1px;
      color: white; }
    .contacto .contactoForm form input[type=submit] {
      transition: all .3s ease-in-out;
      font-family: garet-normal;
      font-weight: 800; }
      .contacto .contactoForm form input[type=submit]:hover {
        background-color: #4681ff;
        color: #0d121e;
        border: solid 1px white; }
    .contacto .contactoForm form textarea {
      width: 100%;
      margin-bottom: 2vw;
      padding: .6vw 0 0 .6vw;
      border-radius: 7px;
      border: none;
      background-color: #141925c5;
      box-shadow: rgba(255, 255, 255, 0.123) 0px 0px 0px 0px, rgba(255, 255, 255, 0.171) 0px 0px 0px 1px;
      color: white;
      height: 10vw; }
    .contacto .contactoForm form label {
      font-family: garet-bold;
      color: white;
      font-size: 1.2vw; }

@font-face {
  font-family: garet-normal;
  src: url(../fuentes/Garet-Book.otf); }
@font-face {
  font-family: garet-bold;
  src: url(../fuentes/Garet-Heavy.otf); }
.portafolioGrafico .banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-top: 10vw;
  padding-bottom: 6vw; }
  .portafolioGrafico .banner .portafolioButton {
    text-align: center;
    border: solid 1px #4681ff;
    border-radius: 50px;
    background-color: rgba(70, 129, 255, 0.164); }
    .portafolioGrafico .banner .portafolioButton p {
      margin: 0;
      padding-inline: 10px;
      padding-block: 5px;
      color: #4681ff;
      z-index: 3; }
  .portafolioGrafico .banner .portafolioTitulo {
    text-align: center;
    padding-block: 1.6vw; }
    .portafolioGrafico .banner .portafolioTitulo .focus-in-contract {
      -webkit-animation: focus-in-contract 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
      animation: focus-in-contract 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
@-webkit-keyframes focus-in-contract {
  0% {
    letter-spacing: 1em;
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0; }
  100% {
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1; } }
@keyframes focus-in-contract {
  0% {
    letter-spacing: 1em;
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0; }
  100% {
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1; } }
    .portafolioGrafico .banner .portafolioTitulo h2 {
      color: white;
      font-family: garet-bold;
      font-size: 4.5rem; }
      .portafolioGrafico .banner .portafolioTitulo h2 .d1 {
        background: linear-gradient(90deg, #fdfdfd 0%, #83bbe9 40%, #00d4ff 100%);
        -webkit-background-clip: text;
        color: transparent; }
      .portafolioGrafico .banner .portafolioTitulo h2 .d2 {
        background: linear-gradient(90deg, white 0%, white 80%, #8edeee 100%);
        -webkit-background-clip: text;
        color: transparent; }
      .portafolioGrafico .banner .portafolioTitulo h2 .d3 {
        background: linear-gradient(90deg, #d0e7f7 0%, #83bbe9 40%, #00d4ff 100%);
        -webkit-background-clip: text;
        color: transparent; }
  .portafolioGrafico .banner .buttonsBanner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; }
    .portafolioGrafico .banner .buttonsBanner .b1 button {
      border: none; }
      .portafolioGrafico .banner .buttonsBanner .b1 button .iconExp {
        position: relative;
        font-size: 1rem; }
.portafolioGrafico .especialidades {
  padding-block: 6vw;
  text-align: center;
  background: black;
  background: linear-gradient(180deg, black 13%, #0c0d11 30%, #090c12 61%, #0d1724 100%, #05172f 100%, #101424 100%); }
  .portafolioGrafico .especialidades h3 {
    font-family: garet-bold;
    color: white;
    font-size: 2.9rem; }
  .portafolioGrafico .especialidades .especialidadesCards {
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    padding-block: 6vw;
    gap: 20px;
    margin-inline: 4vw; }
    .portafolioGrafico .especialidades .especialidadesCards .cardEspe {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 15px;
      height: 55vh;
      width: 90%;
      border-radius: 10px;
      box-shadow: rgba(255, 255, 255, 0.027) 0px 1px 3px 0px, rgba(255, 255, 255, 0.055) 0px 0px 0px 1px;
      border: solid 1px #1a2d52;
      background: linear-gradient(145deg, #0f1628 0%, #182033 25%, #0d121e 50%, #1b253c 75%, #10182b 100%);
      transition: all .4s; }
      .portafolioGrafico .especialidades .especialidadesCards .cardEspe h4 {
        font-family: garet-bold;
        font-size: 1.6rem;
        color: white; }
      .portafolioGrafico .especialidades .especialidadesCards .cardEspe p {
        font-family: garet-normal;
        font-weight: 800;
        color: #d6d6d6;
        font-size: 1rem;
        padding-inline: 1vw; }
      .portafolioGrafico .especialidades .especialidadesCards .cardEspe .iconoCardEspe {
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 2rem;
        padding: 1vw;
        height: 12vh;
        width: 20%;
        border-radius: 50px;
        background: #3f5efb;
        background: linear-gradient(90deg, #3f5efb 0%, #fc466b 100%); }
        .portafolioGrafico .especialidades .especialidadesCards .cardEspe .iconoCardEspe i {
          position: relative;
          top: 2px; }
      .portafolioGrafico .especialidades .especialidadesCards .cardEspe:hover {
        background-color: #141925c5;
        border-bottom: solid 2px white;
        transform: translateY(-15px); }
.portafolioGrafico .galeriaProyectos {
  text-align: center;
  padding-block: 6vw; }
  .portafolioGrafico .galeriaProyectos h3 {
    font-family: garet-bold;
    color: white;
    font-size: 2.9rem; }
  .portafolioGrafico .galeriaProyectos .botonesGaleria {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-top: 2vw; }
    .portafolioGrafico .galeriaProyectos .botonesGaleria li {
      list-style: none; }
  .portafolioGrafico .galeriaProyectos .cardsGaleria.active {
    display: grid; }
  .portafolioGrafico .galeriaProyectos .cardsGaleria {
    display: none;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    padding-block: 6vw;
    gap: 20px;
    padding-inline: 3vw; }
    .portafolioGrafico .galeriaProyectos .cardsGaleria .cardGaleria .vistaProyecto {
      width: 100%; }
      .portafolioGrafico .galeriaProyectos .cardsGaleria .cardGaleria .vistaProyecto img {
        width: 100%; }
    .portafolioGrafico .galeriaProyectos .cardsGaleria .cardGaleria .infoProyecto {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: linear-gradient(145deg, #0f1628 0%, #182033 25%, #0d121e 50%, #1b253c 75%, #10182b 100%);
      height: 25vh;
      border: solid 1px #1a2d52;
      border-radius: 0px 0px 10px 10px; }
      .portafolioGrafico .galeriaProyectos .cardsGaleria .cardGaleria .infoProyecto h4 {
        font-family: garet-bold;
        color: white;
        font-size: 1.4rem; }
      .portafolioGrafico .galeriaProyectos .cardsGaleria .cardGaleria .infoProyecto p {
        font-family: garet-normal;
        font-weight: 800;
        font-size: 1rem;
        color: white; }
.portafolioGrafico .procesoGrafico {
  text-align: center;
  padding-block: 6vw; }
  .portafolioGrafico .procesoGrafico h3 {
    font-family: garet-bold;
    color: white;
    font-size: 2.9rem; }
  .portafolioGrafico .procesoGrafico .procesosCards {
    padding-block: 6vw;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px; }
    .portafolioGrafico .procesoGrafico .procesosCards .procesoCard {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10px; }
      .portafolioGrafico .procesoGrafico .procesosCards .procesoCard .iconoProceso {
        background-color: #4681ff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        height: 12vh;
        width: 22%; }
        .portafolioGrafico .procesoGrafico .procesosCards .procesoCard .iconoProceso i {
          color: white;
          padding: 20px;
          font-size: 1.7rem; }
      .portafolioGrafico .procesoGrafico .procesosCards .procesoCard h5 {
        font-family: garet-bold;
        color: white;
        font-size: 1.4rem; }
      .portafolioGrafico .procesoGrafico .procesosCards .procesoCard p {
        font-family: garet-normal;
        font-weight: 800;
        font-size: 1rem;
        color: white; }
.portafolioGrafico .testimonios {
  text-align: center; }
  .portafolioGrafico .testimonios h3 {
    font-family: garet-bold;
    color: white;
    font-size: 2.9rem; }
  .portafolioGrafico .testimonios .testimoniosCards {
    display: grid;
    justify-items: center;
    align-items: center;
    text-align: left;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding-inline: 2vw;
    padding-block: 6vw; }
    .portafolioGrafico .testimonios .testimoniosCards .testimonioCard {
      border: solid 1px #1a2d52;
      background: linear-gradient(145deg, #0f1628 0%, #182033 25%, #0d121e 50%, #1b253c 75%, #10182b 100%);
      height: 50vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: start;
      padding-inline: 2vw;
      border-radius: 10px; }
      .portafolioGrafico .testimonios .testimoniosCards .testimonioCard .testimonioStar {
        color: #4681ff;
        font-size: 1.2rem; }
      .portafolioGrafico .testimonios .testimoniosCards .testimonioCard p {
        font-family: garet-normal;
        font-weight: 800;
        font-size: 1rem;
        color: #d6d6d6; }
      .portafolioGrafico .testimonios .testimoniosCards .testimonioCard h6 {
        font-family: garet-normal;
        font-weight: 800;
        font-size: 1rem;
        color: #4681ff; }
.portafolioGrafico .formGrafico {
  background: black;
  background: linear-gradient(180deg, black 13%, #0c0d11 30%, #090c12 61%, #0d1724 100%, #05172f 100%, #101424 100%);
  padding-block: 6vw;
  text-align: center; }
  .portafolioGrafico .formGrafico h3 {
    font-family: garet-bold;
    color: white;
    font-size: 2.9rem; }
  .portafolioGrafico .formGrafico form {
    display: flex;
    flex-direction: column;
    border: solid 1px #1a2d52;
    background: linear-gradient(145deg, #0f1628 0%, #182033 25%, #0d121e 50%, #1b253c 75%, #10182b 100%);
    margin-inline: 30vw;
    padding-inline: 3vw;
    padding-bottom: 5vw;
    padding-top: 2vw;
    gap: 20px;
    border-radius: 10px; }
    .portafolioGrafico .formGrafico form h4 {
      font-family: garet-bold;
      font-size: 1.6rem;
      color: white; }
    .portafolioGrafico .formGrafico form .inputsDatos {
      width: 100%;
      display: flex;
      gap: 10px; }
      .portafolioGrafico .formGrafico form .inputsDatos input {
        width: 100%;
        padding: .3vw;
        background-color: #141925c5;
        box-shadow: rgba(255, 255, 255, 0.123) 0px 1px 3px 0px, rgba(255, 255, 255, 0.171) 0px 0px 0px 1px;
        border: none;
        color: white; }
    .portafolioGrafico .formGrafico form textarea {
      width: 100%;
      padding: .3vw;
      background-color: #141925c5;
      box-shadow: rgba(255, 255, 255, 0.123) 0px 1px 3px 0px, rgba(255, 255, 255, 0.171) 0px 0px 0px 1px;
      border: none; }

@font-face {
  font-family: garet-normal;
  src: url(../fuentes/Garet-Book.otf); }
@font-face {
  font-family: garet-bold;
  src: url(../fuentes/Garet-Heavy.otf); }
.web .web-header {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../img_general/bannerWeb.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 55vw; }
  .web .web-header .web-header-text {
    margin: 0 0 0 5vw;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 20px; }
    .web .web-header .web-header-text h1 {
      font-family: garet-bold;
      font-size: 3rem;
      width: 40vw; }
    .web .web-header .web-header-text p {
      font-family: garet-normal;
      font-size: 1.2rem; }
    .web .web-header .web-header-text button {
      width: 20vw;
      padding-block: 1vw;
      border: none; }
  .web .web-header .web-header-image {
    text-align: center; }
    .web .web-header .web-header-image img {
      position: relative;
      border-radius: 5px;
      transition: .4s; }
      .web .web-header .web-header-image img:hover {
        transform: translateY(-25px); }
    .web .web-header .web-header-image .webImg1 {
      width: 35%;
      left: 150px;
      bottom: 60px;
      z-index: 2;
      border: solid 5px #121111;
      transform: rotate(-10deg); }
    .web .web-header .web-header-image .webImg2 {
      width: 45%;
      left: 10px;
      top: 60px;
      transform: rotate(10deg); }
.web .web-services {
  background-color: #121111; }
  .web .web-services h2,
  .web .web-services .web-services-desc {
    text-align: center;
    color: white; }
  .web .web-services h2 {
    font-size: 2.9rem;
    font-family: garet-bold; }
  .web .web-services .web-services-desc {
    font-family: garet-normal;
    font-size: 1.2rem;
    margin-inline: 8vw; }
  .web .web-services .web-services-cards {
    margin-top: 6vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-inline: 2vw; }
    .web .web-services .web-services-cards .web-services-cards-card {
      border: 1px #4681ff solid;
      padding: 3vw;
      position: relative;
      color: white;
      display: flex;
      flex-direction: column;
      gap: 20px; }
      .web .web-services .web-services-cards .web-services-cards-card h3 {
        font-family: garet-bold;
        z-index: 2; }
      .web .web-services .web-services-cards .web-services-cards-card p {
        font-family: garet-normal;
        z-index: 2; }
      .web .web-services .web-services-cards .web-services-cards-card button {
        width: 9vw;
        border: none;
        background-color: transparent;
        z-index: 2; }
        .web .web-services .web-services-cards .web-services-cards-card button a {
          cursor: pointer; }
        .web .web-services .web-services-cards .web-services-cards-card button i {
          position: relative;
          top: 3px; }
      .web .web-services .web-services-cards .web-services-cards-card:before {
        content: " ";
        position: absolute;
        background-color: white;
        width: 100%;
        height: 100%;
        opacity: 0;
        left: 0;
        top: 0;
        z-index: 0;
        transition: .4s; }
      .web .web-services .web-services-cards .web-services-cards-card:hover:before {
        opacity: 1; }
      .web .web-services .web-services-cards .web-services-cards-card:hover {
        color: #121111; }
      .web .web-services .web-services-cards .web-services-cards-card:hover button a {
        color: #121111; }
.web .web-info {
  background-image: url(../img_general/fondoWeb2.png);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 10vw;
  padding-bottom: 1vw; }
  .web .web-info .web-info-image {
    text-align: center;
    margin-inline: 50px;
    padding-block: 40px;
    border-radius: 40px;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; }
    .web .web-info .web-info-image img {
      width: 95%;
      border-radius: 10px; }
  .web .web-info .web-info-text {
    color: white; }
    .web .web-info .web-info-text h2 {
      font-family: garet-bold;
      font-size: 3.5rem; }
    .web .web-info .web-info-text p {
      font-family: garet-normal;
      margin-right: 4vw; }
.web .galeriaProyectos {
  text-align: center;
  padding-block: 6vw; }
  .web .galeriaProyectos h3 {
    font-family: garet-bold;
    color: white;
    font-size: 2.9rem; }
  .web .galeriaProyectos .botonesGaleria {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-top: 2vw; }
    .web .galeriaProyectos .botonesGaleria li {
      list-style: none; }
  .web .galeriaProyectos .cardsGaleria.active {
    display: grid; }
  .web .galeriaProyectos .cardsGaleria {
    display: none;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    padding-block: 6vw;
    gap: 20px;
    padding-inline: 3vw; }
    .web .galeriaProyectos .cardsGaleria .cardGaleria {
      cursor: pointer; }
      .web .galeriaProyectos .cardsGaleria .cardGaleria .vistaProyecto {
        width: 100%;
        cursor: pointer; }
        .web .galeriaProyectos .cardsGaleria .cardGaleria .vistaProyecto img {
          width: 100%;
          cursor: pointer; }
      .web .galeriaProyectos .cardsGaleria .cardGaleria .infoProyecto {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: linear-gradient(145deg, #0f1628 0%, #182033 25%, #0d121e 50%, #1b253c 75%, #10182b 100%);
        height: 25vh;
        border: solid 1px #1a2d52;
        border-radius: 0px 0px 10px 10px; }
        .web .galeriaProyectos .cardsGaleria .cardGaleria .infoProyecto h4 {
          font-family: garet-bold;
          color: white;
          font-size: 1.4rem; }
        .web .galeriaProyectos .cardsGaleria .cardGaleria .infoProyecto p {
          font-family: garet-normal;
          font-weight: 800;
          font-size: 1rem;
          color: white; }
.web .cotizar {
  background: black;
  background: linear-gradient(180deg, black 13%, #0c0d11 30%, #090c12 61%, #0d1724 100%, #05172f 100%, #101424 100%);
  padding-block: 6vw;
  text-align: center; }
  .web .cotizar h3 {
    font-family: garet-bold;
    color: white;
    font-size: 2.9rem; }
  .web .cotizar p {
    font-family: garet-normal;
    color: white;
    font-size: 1.1rem;
    margin-inline: 15vw; }

@font-face {
  font-family: garet-normal;
  src: url(../fuentes/Garet-Book.otf); }
@font-face {
  font-family: garet-bold;
  src: url(../fuentes/Garet-Heavy.otf); }
.marketing .bannerMarketing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  padding-top: 10vw;
  padding-bottom: 6vw; }
  .marketing .bannerMarketing .focus-in-contract {
    -webkit-animation: focus-in-contract 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: focus-in-contract 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
@-webkit-keyframes focus-in-contract {
  0% {
    letter-spacing: 1em;
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0; }
  100% {
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1; } }
@keyframes focus-in-contract {
  0% {
    letter-spacing: 1em;
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0; }
  100% {
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1; } }
  .marketing .bannerMarketing h2 {
    color: white;
    font-family: garet-bold;
    font-size: 4.5rem; }
  .marketing .bannerMarketing .buttonsBanner {
    display: flex;
    gap: 20px; }
.marketing .queHacemos {
  padding-block: 6vw;
  text-align: center;
  background: black;
  background: linear-gradient(180deg, black 13%, #0c0d11 30%, #090c12 61%, #0d1724 100%, #05172f 100%, #101424 100%); }
  .marketing .queHacemos h3 {
    font-family: garet-bold;
    color: white;
    font-size: 2.9rem; }
  .marketing .queHacemos .serviciosM {
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    margin-block: 4vw;
    margin-top: 6vw;
    gap: 20px;
    margin-inline: 3vw; }
    .marketing .queHacemos .serviciosM .card {
      width: 100%;
      height: 40vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 15px;
      background: linear-gradient(145deg, #0f1628 0%, #182033 25%, #0d121e 50%, #1b253c 75%, #10182b 100%);
      transition: all .4s ease-in-out; }
      .marketing .queHacemos .serviciosM .card:hover {
        transform: scale(1.01);
        background: linear-gradient(145deg, #10182b 0%, #1b253c 25%, #0d121e 50%, #182033 75%, #0f1628 100%); }
      .marketing .queHacemos .serviciosM .card:hover .iconoServiciosM {
        transform: translateX(-10vw); }
      .marketing .queHacemos .serviciosM .card .iconoServiciosM {
        position: relative;
        color: #4681ff;
        font-size: 1.7rem;
        transition: all .4s ease-in-out; }
      .marketing .queHacemos .serviciosM .card h4 {
        font-family: garet-bold;
        color: white;
        font-size: 1.4rem; }
      .marketing .queHacemos .serviciosM .card p {
        font-family: garet-normal;
        font-size: .9rem;
        color: #d6d6d6; }
.marketing .planes {
  padding-block: 6vw;
  text-align: center; }
  .marketing .planes h3 {
    font-family: garet-bold;
    color: white;
    font-size: 2.9rem; }
  .marketing .planes .planesContainer {
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    margin-block: 6vw;
    margin-inline: 3vw;
    gap: 20px; }
    .marketing .planes .planesContainer .plan {
      background: linear-gradient(145deg, #0f1628 0%, #182033 25%, #0d121e 50%, #1b253c 75%, #10182b 100%);
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 20px;
      border-radius: 15px; }
      .marketing .planes .planesContainer .plan h4 {
        font-family: garet-bold;
        font-size: 1.8rem;
        color: #4681ff; }
      .marketing .planes .planesContainer .plan p {
        font-family: garet-bold;
        font-size: 2rem;
        color: white; }
      .marketing .planes .planesContainer .plan .beneficios {
        display: flex;
        flex-direction: column;
        color: #d6d6d6;
        font-family: garet-normal;
        text-align: left;
        font-weight: 700;
        gap: 10px; }
        .marketing .planes .planesContainer .plan .beneficios li::marker {
          color: #4681ff; }
.marketing .porqueElegirnos {
  padding-block: 6vw;
  text-align: center; }
  .marketing .porqueElegirnos h3 {
    font-family: garet-bold;
    color: white;
    font-size: 2.9rem; }
  .marketing .porqueElegirnos .razones {
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    margin-block: 6vw;
    gap: 15px; }
    .marketing .porqueElegirnos .razones .razon {
      background-color: #141925c5;
      width: 80%;
      height: 20vh;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 15px; }
      .marketing .porqueElegirnos .razones .razon span {
        font-family: garet-bold;
        color: white;
        font-size: 1.3rem; }
        .marketing .porqueElegirnos .razones .razon span i {
          color: #4681ff;
          font-size: 1.3rem;
          position: relative;
          top: 3px;
          right: 10px; }
.marketing .solicitar {
  background: black;
  background: linear-gradient(180deg, black 13%, #0c0d11 30%, #090c12 61%, #0d1724 100%, #05172f 100%, #101424 100%);
  padding-block: 6vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 15px; }
  .marketing .solicitar h3 {
    font-family: garet-bold;
    color: white;
    font-size: 2.9rem;
    margin-inline: 7vw; }
  .marketing .solicitar p {
    font-family: garet-normal;
    color: white;
    font-size: 1.1rem;
    margin-inline: 15vw; }
  .marketing .solicitar .buttonsBanner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px; }

@font-face {
  font-family: garet-normal;
  src: url(../fuentes/Garet-Book.otf); }
@font-face {
  font-family: garet-bold;
  src: url(../fuentes/Garet-Heavy.otf); }
body,
html,
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: url(../img_general/cursor.png), auto; }
  body a,
  html a,
  * a {
    text-decoration: none;
    color: white; }

*::selection {
  background-color: #747379;
  color: #0e0e0e; }

body {
  background-color: #0c0c0c;
  overflow-x: hidden; }
  body point {
    color: #e12222; }

html {
  max-width: 100%; }

a .buttons {
  position: relative;
  padding: 1.5vw;
  font-family: garet-bold;
  font-weight: 700;
  background: #3c31d6;
  color: white;
  letter-spacing: 2px;
  font-size: 1.2rem;
  border: none;
  border-radius: 15px;
  transition: all .4s; }
  a .buttons:hover {
    transform: scale(1.07);
    border: solid 3px white; }
  a .buttons i {
    position: relative;
    top: 4px; }

.buttons2 {
  position: relative;
  padding: 1.3vw;
  font-family: garet-bold;
  font-weight: 700;
  background-color: #3c31d6;
  color: white;
  letter-spacing: 1px;
  font-size: 1rem;
  border: none;
  border-radius: 15px;
  transition: all .4s; }
  .buttons2:hover {
    transform: scale(1.07);
    border: solid 3px white; }
  .buttons2 i {
    position: relative;
    top: 2px; }

.buttons3 {
  position: relative;
  padding: 1.3vw;
  font-family: garet-bold;
  font-weight: 700;
  background-color: #ffffff;
  color: #0c0c0c;
  font-size: 1.1vw;
  border: none;
  border-radius: 15px;
  transition: all .4s; }
  .buttons3:hover {
    transform: scale(1.07);
    border: solid 3px #4681ff; }
  .buttons3 i {
    position: relative;
    top: 2px; }

.subtitulos {
  text-align: center;
  width: 40%;
  color: white;
  font-size: 1.3vw;
  padding: 1vw;
  border-radius: 50px;
  font-family: garet-normal;
  font-weight: 700;
  border-bottom: 1px solid #4681ff; }

.textColor {
  background: linear-gradient(90deg, #0e1e40 0%, #4681ff 40%, #00d4ff 100%);
  -webkit-background-clip: text;
  color: transparent; }

.parrafoComun {
  font-family: garet-normal;
  font-weight: 800;
  color: #d6d6d6;
  margin-inline: 20vw;
  font-size: 1.3rem; }

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