@font-face {
  font-family: 'Basics';
  src: url('../fonts/basics.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'LetterMagic';
  src: url('../fonts/lettermagic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Black';
  src: url('../fonts/Montserrat/static/Montserrat-Black.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'BlackItalic';
  src: url('../fonts/Montserrat/static/Montserrat-BlackItalic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Bold';
  src: url('../fonts/Montserrat/static/Montserrat-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BoldItalic';
  src: url('../fonts/Montserrat/static/Montserrat-BoldItalic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'ExtraBold';
  src: url('../fonts/Montserrat/static/Montserrat-ExtraBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ExtraBoldItalic';
  src: url('../fonts/Montserrat/static/Montserrat-ExtraBoldItalic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'ExtraLight';
  src: url('../fonts/Montserrat/static/Montserrat-ExtraLight.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}



@font-face {
  font-family: 'ExtraLightItalic';
  src: url('../fonts/Montserrat/static/Montserrat-ExtraLightItalic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}



@font-face {
  font-family: 'Italic';
  src: url('../fonts/Montserrat/static/Montserrat-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Light';
  src: url('../fonts/Montserrat/static/Montserrat-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'LightItalic';
  src: url('../fonts/Montserrat/static/Montserrat-LightItalic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}



@font-face {
  font-family: 'Medium';
  src: url('../fonts/Montserrat/static/Montserrat-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}



@font-face {
  font-family: 'MediumItalic';
  src: url('../fonts/Montserrat/static/Montserrat-MediumItalic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Regular';
  src: url('../fonts/Montserrat/static/Montserrat-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'SemiBold';
  src: url('../fonts/Montserrat/static/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}



@font-face {
  font-family: 'SemiBoldItalic';
  src: url('../fonts/Montserrat/static/Montserrat-SemiBoldItalic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}



@font-face {
  font-family: 'Thin';
  src: url('../fonts/Montserrat/static/Montserrat-Thin.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'ThinItalic';
  src: url('../fonts/Montserrat/static/Montserrat-ThinItalic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Italic-VariableFont_wght';
  src: url('../fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'VariableFont_wght';
  src: url('../fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


body {
    font-family: 'Regular', sans-serif;
}


body.fade-out {
  visibility: hidden;
  transition: visibility 0.5s;
}


header {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.nav-link{ margin-right: 120px; font-weight: 200;}

.basics{ font-family: 'Basics'; font-weight: bold;}
.letter{ font-family: 'LetterMagic'; font-weight: bold;}

.regular{ font-family: 'Regular', sans-serif;; }
.medium{ font-family: 'Medium', sans-serif;; }
.light{ font-family: 'Light', sans-serif;; }

.bgb0d2f0 {
    background-color: #b0d2f0 !important;
}
.full-height {
  height: 100vh;
  display: none; /* Oculta el contenido y no ocupa espacio */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 2s ease-in-out, background-color 2s ease-in-out;
}

.full-height2 {
  height: 100vh;
  display: none; /* Oculta el contenido y no ocupa espacio */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 2s ease-in-out, background-color 2s ease-in-out;
}

.full-height2 {
  display: none; /* Oculta por defecto todas las secciones */
  opacity: 0;
  transition: opacity 2s; /* Transición de opacidad de 2 segundos */
}

.full-height2.active {
  display: flex; /* Muestra la sección activa como flex */
  opacity: 1;
}

.website1{ height:40px; z-index:999; margin-left:-180px; margin-bottom:-40px; }
.website2{ height:40px; z-index:999; margin-left:180px; margin-top:-25px; }

.active {
  display: flex; /* Muestra el contenido */
  opacity: 1;
}



.txtb0d2f0{ color: #b0d2f0; }

.tit {
    font-size: 50px;
    line-height: 1.1;
}

.frase {
    font-size: 20px;
}

.text-white {
    color: #fff;
}



.nav-item a {
    color: #fff !important;
    text-transform: uppercase;
    font-size: 1.5em;
}


.h2frase {
    color: #fff;
    text-transform: uppercase;
    font-size: 50px;
    text-align: center;
    font-family: 'Italic';
    font-family: 'Light', sans-serif;
}

.hablemos {
    color: #fff;
    text-transform: uppercase;
    font-size: 70px;
    text-align: center;
    letter-spacing: 1.5;

}

.clientes {
    font-family: 'Basics', sans-serif;
    font-size: 40px; /* Asegúrate de que el tamaño sea consistente */
}

.section-proposito {
  height: 100vh;
}

.text-secondary {
  color: #f8b7ad!important;
  top: 50%!important;
  bottom: 50%!important;
}

.bgf8b7ad {
  background-color: #f8b7ad;
}

.fraseproposito {
  top: 0;
  right: 0;
  width: 100vh;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(90deg);
  transform-origin: left top;
}




.fraseproposito h2 {
  margin: 0;
  color: white;
}

.bgf6cc94 {
  background-color: #f6cc94;
}

.section-hablemos {
  padding: 20px;
}

.section-hablemos a {
    color: #fff;
    text-decoration: none;
}

.section-hablemos a:hover {
    color: #fff;
    text-decoration: none;
}

.img-logotipos-clientes {
    height: 250px;
}

.portafolio {
    margin: 60px 0px;
    padding: 0px 15px; /* Ajustado para asegurar consistencia de márgenes */
}

.img-portafolio {
    margin: 8px 0px;
    max-width: 100%;
    height: auto; /* Mantiene la proporción de la imagen */
    display: block;
}

.img-logotipo-portafolio {
    width: 280px;
    height: auto;
    margin-top: 50px;
}

.main-container {
  position: relative;
  max-width: 100%; /* Ajusta según sea necesario */
}

.container.portafolio {
  padding: 10px; /* Añadir padding para ajustar el margen si es necesario */
}

.icon-container-home {
  position: absolute;
  top: 50%;
  right: 10px; /* Ajusta la distancia del margen derecho */
  transform: translateY(-50%);
  z-index: 10; /* Asegura que el ícono esté sobre las imágenes */
}

.icon-container {
  position: absolute;
  top: 50%;
  right: 20px; /* Ajusta la distancia del margen derecho */
  transform: translateY(-50%);
  z-index: 10; /* Asegura que el ícono esté sobre las imágenes */
}

.icon-container-video {
  position: absolute;
  top: 45%;
  right: 20px; /* Ajusta la distancia del margen derecho */
  transform: translateY(-50%);
  z-index: 10; /* Asegura que el ícono esté sobre las imágenes */
}



.home-icon {
  width: 150px; /* Ajusta el tamaño del ícono según sea necesario */
}

.home-icon-home {
  width: 170px; /* Ajusta el tamaño del ícono según sea necesario */
}

.colimg{ padding: 0!important;}


.portada_cluster{ background: #642432; }
.portada_macifer{ background: #f3ece3; }

.video-container-macifer {
  background-color: #082E54;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-container-amazcala {
  background-color: #973637;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-container-cluster {
  background-color: #642432;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-wrapper-macifer {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  background-color: #082E54;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-wrapper-amazcala {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  background-color: #973637;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-wrapper-cluster {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  background-color: #642432;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-overlay-macifer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #082E54;
}

.video-overlay-amazcala {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #973637;
}

.video-overlay-cluster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #642432;
}

.play-button {
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}

.play-icon {
  width: 60px; /* Ajusta el tamaño del ícono de play */
  height: auto;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-hablemos {
  padding: 40px 0;
  color: #ffffff;
}



.footer-link {
  color: #ffffff;
  font-size: 20pt;
  text-decoration: none;
  margin: 10px 0;
  display: block;
  transition: color 0.3s;
  line-height: 20px;
  font-weight: 300;
}

.footer-link:hover {
  color: #ffd700; /* Puedes elegir otro color para el hover */
}



.footer-link:last-child {
  margin-bottom: 0;
}

.bgf6cc94 {
  background-color: #f6cc94;
}

.mt-3 {
  margin-top: 1rem;
}

.estrella_2{ height: 45px;}
.estrella_1{ height: 75px; z-index: 999; margin-top: -50px; margin-left: -20px;}

.subtit{ font-family: 'LetterMagic', sans-serif;
text-transform: uppercase!important; font-weight: 300;
font-size: 40px; color: #b0d2f0!important; }


.mayus{ font-family: 'Basics', sans-serif;
text-transform: uppercase!important;
font-size: 55px; color: #b0d2f0!important; z-index: 999;}
.cenos{ margin-left: -8px;}
.sobre{ font-family: 'Medium', sans-serif; color: #b0d2f0!important; }
.contemos{ color: #b0d2f0!important; font-size:16pt!important; margin-top:0px;}
.somos2{ color:#b0d2f0; font-size:16pt; }
.textocontemos{ font-size: 16pt; text-align:justify; }
.strategy{ height: 500px; }

.weare{ color: #fff; font-family: 'Basics', sans-serif; font-size: 90pt; line-height: 95px; margin-top: 50px;}
.somos{ color: #fff; font-size: 25pt;  text-align: right; line-height: 35px;}

.home{ height: 500px;}

::placeholder {
     color: #f6cc94;
     font-weight: bold!important;
   }
   .form{ padding: 50px;}
   /* Estilo para los inputs */
   .input-agata, .textarea-agata {
     background-color: #fff;
     color: #f6cc94!important;
     border: none;
     border-radius: 35px;
     height: 65px;
     padding: 10px;
     font-size: 20px;
     width: 100%;
     margin-bottom: 20px;
     padding:20px;
   }
   .enviar{ color: #fff; font-weight: 200;}
   /* Estilo específico para textarea */
   .textarea-agata {
     height: 250px;
     resize: none; /* Para evitar que el usuario cambie el tamaño del textarea */
   }

   /* Ajuste de colores y fuentes de input y textarea */
   .input-agata:focus, .textarea-agata:focus {
     outline: none;
     border-color: #f6cc94;
     box-shadow: 0 0 5px rgba(246, 204, 148, 0.5);
   }

  .img-logo{ height: 150px!important; margin-left: 100px;}




@media (min-width: 768px) {
  .footer-link {
    display: inline-block;
  }
}

@media (max-width: 800px){

  .textocontemos{ font-size: 13pt; text-align: justify; margin: 8px; }
  
  .contemos{ font-size: 13pt;}

  .somos2{ color:#b0d2f0; font-size:10pt; margin-top: 10px; margin-left: 20px;}

  .proposito{ margin-top: 10px;}

  .website1{ height:40px; z-index:999; margin-left:-140px; margin-bottom:-40px; }
  .website2{ height:40px; z-index:999; margin-left:140px; margin-top:-25px; }

  .full-height {
    height: 90vh;
    display: none; /* Oculta el contenido y no ocupa espacio */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 2s ease-in-out, background-color 2s ease-in-out;
  }

  .full-height2 {
    height: 100vh;
    display: none; /* Oculta el contenido y no ocupa espacio */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 2s ease-in-out, background-color 2s ease-in-out;
  }

  .active {
    display: flex; /* Muestra el contenido */
    opacity: 1;
  }

  /* Transición para cambiar el color de fondo */
  #step9.full-height {
    background: none; /* Configura un fondo inicial si es necesario */
  }

  #step9.active {
    background: url('../img/fondo-de-pantalla-creativo.webp') no-repeat center center;
    background-size: cover;
  }



  .form{ padding: 10px;}
  .estrella_1{ height: 35px; z-index: 999; margin-top: -30px; margin-left: -10px;}
  .weare{ color: #fff; font-family: 'Basics', sans-serif; font-size: 35pt; line-height: 40px;}
  .strategy{ height: 250px; }
  .home{ height: 400px;}
  .somos{ color: #fff; font-size: 16pt;  text-align: right; line-height: 26px; margin-top: 20px;}
  .tit {
      font-size: 20px;
      line-height: 1.1;
  }
  .nav-link{ margin-right: 0px;}
  .section-proposito {
    height: 50vh;
  }

  .fraseproposito {
    top: 0;
    right: 0;
    width: 50vh;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(90deg);
    transform-origin: left top;
  }

     .img-logo{ height: 70px!important; margin-left: 10px;}

  .img-logotipos-clientes {
      height: 120px;
  }

  .portafolio {
      margin: 60px 0px;
      padding: 0px 20px!important; /* Ajustado para asegurar consistencia de márgenes */
  }

  .home-icon {
    width: 70px; /* Ajusta el tamaño del ícono según sea necesario */
  }

  .home-icon-home {
    width: 60px; /* Ajusta el tamaño del ícono según sea necesario */
  }

  .icon-container-home {
    right: -10px!important;
  }

  .icon-container-video {
    position: absolute;
    top: 58%;
    right: 0!important; /* Ajusta la distancia del margen derecho */
    transform: translateY(-50%);
    z-index: 10; /* Asegura que el ícono esté sobre las imágenes */
  }

  .icon-container {
    right: 0!important;
  }


  .estrella_2{ height: 25px;}

  .subtit{ 
  text-transform: uppercase!important;
  font-size: 20px; color: #b0d2f0!important; }


  .mayus{ font-family: 'Basics', sans-serif;
  text-transform: uppercase!important;
  font-size: 28px; color: #b0d2f0!important; z-index: 999; margin-left: -5px;}
  .cenos{ margin-left: -3px;}

    .clientes{ font-family: 'Basics', sans-serif;
      font-size: 20px; }

      .h2frase {
          color: #fff;
          text-transform: uppercase;
          font-size: 20px;
          text-align: center;
          font-family: 'Italic';
          line-height: 30px;
          font-family: 'Light', sans-serif;
      }

      .hablemos {
          color: #fff;
          text-transform: uppercase;
          font-size: 45px;
          text-align: center;
      }

      .frase {
          font-size: 20px;
      }


      .footer-link {
        color: #ffffff;
        font-size: 16pt;
        text-decoration: none;
        margin: 10px 0;
        display: block;
        transition: color 0.3s;
      }


}

.paddsomos{ padding: 0px; }

@media (min-width: 1440px) {
  /* Estilos para pantallas grandes */

  .paddsomos{ padding: 0px; }
}


@media (min-width: 1600px) {
  /* Estilos para pantallas aún más grandes */
  .paddsomos{ padding: 0px 250px; }
}

@media (min-width: 1920px) {
  /* Estilos para pantallas 4K */
  .paddsomos{ padding: 0px 250px; }
}