* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

@keyframes efectoZoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.efectoZoom{
    animation: efectoZoom 2s infinite ease-in-out;
}
/*modal nuestros clientes*/
/*modal home*/
.slide-modal,
.slide-home-hand {
  position: absolute;
  top: 50%;
  right: 30%;
  transform: translateY(-50%);
  z-index: 9999;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.hand-univ-omni{
  position: absolute;
  top: 20%;
  left: 132%;
  width: 80%;
  transform: translateY(-50%);
  z-index: 9999;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.hand-univ-omni.visible{
  opacity:1;
  pointer-events:auto;
  transform: translateY(-50%) scale(1.05);
}

.hand-univ-omni2{
  position: absolute;
  top: 60%;
  left: 132%;
  width: 80%;
  transform: translateY(-50%);
  z-index: 9999;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.hand-univ-omni2.visible{
  opacity:1;
  pointer-events:auto;
  transform: translateY(-50%) scale(1.05);
}

/*modal casos de exito slide 1*/
.hand-c-e-1{
  position: absolute;
  top: 20%;
  right: 30%;
  z-index: 9999;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
/*modal casos de exito slide 2 al 4*/
.hand-c-e-2,
.hand-c-e-3,
.hand-c-e-4,
.slide-blog-articulos{
  position: absolute;
  top: 700%;
  left: 30%;
  z-index: 9999;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.modal-swipe-icon {
  width: 30%;
  height: auto;
  animation: bounceRight 1s ease-in-out infinite;
}
.slide-home-hand,
.slide-modal.visible,
.hand-c-e-1,
.hand-c-e-2,
.hand-c-e-3,
.hand-c-e-4,
.slide-blog-articulos {
  opacity: 1;
  transform: translateY(-50%) scale(1.05);
}



@keyframes bounceRight {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(15px); }
  100% { transform: translateX(0); }
}

.hidden {
  display: none;
}

@media (max-width: 768px){
  .slide-home-hand{
    left: 35%;
    top: 40%;
    width: 70%;
    height: auto;
  }
  .hand-c-e-1{
    left: 35%;
    top: 40%;
    width: 70%;
    height: auto;
  }
  .hand-c-e-2,
  .hand-c-e-3,
  .hand-c-e-4{
    top: 500%;
    left: 25%;
    width: 50%;
  }
  .slide-blog-articulos{
    position: absolute;
    top: 2200%;
    left: 35%;
  }
}

 /* ------------------- Tipografia ------------------- */

@font-face {
    font-family: 'AvantBold';
    src: url('../assets/fonts/ITCAvantGardeStd-Bold.otf') format('truetype');
}

/* Estilos para pantalla login y video principal */

.videoLogin {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;   
  object-fit: cover;
  z-index: -1; 
}

.buHomCont {
  position: absolute;
  top: 6rem;
  left: 6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  z-index: 1;
}

.buttonHome,
.flechaButton {
  height: 4rem;
  width: auto;
  transition: transform 0.3s ease;
}

.buHomCont:hover .buttonHome {
  transform: scale(1.1);
}

.buHomCont:hover .flechaButton {
  transform:translateX(50px);
}

@media (max-width: 768px) {
  .buttonHome {
    height: 2rem;
  }

  .flechaButton {
    height: 1.2rem;
  }

  .buHomCont {
    top: 3rem;
    left: 3rem;
    gap: 0.3rem;
  }
}

/* Estilos para navbar */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3rem;
  background-color: white;
  font-family: 'Segoe UI', sans-serif;
  box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.05);
}

.logoNav {
  height: 80px;
  width: auto;
}

.navbar a.buttonsNav {
  color: #4b4b4b;
  text-decoration: none;
  font-weight: 700;
  margin: 0 1rem;
  font-size: 1.3rem;
  transition: color 0.3s ease;
}

.navbar a.buttonsNav:hover {
  color: #ffb300; 
}

.hamburger {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-links {
  display: flex;
  gap: 6rem;
}


/* Media Queries para navbar*/
@media (max-width: 900px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.5rem 1rem;
    position: relative;
  }

  .logoNav{
    height: 60px;
    width: auto;
  }

  .hamburger {
    display: block;
    position: absolute;
    top: 1rem;
    right: 2rem;
    z-index: 10;
  }

  .nav-links {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
  flex-direction: column;
  width: 100%;
  gap: 5rem;
}

  .nav-links.active {
  max-height: 1000px; 
}

  .buttonsNav {
    font-size: 1rem;
    margin: 5rem 0;
  } 
}

@media (max-width: 768px) {
  .nav-links {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    flex-direction: column;
    width: 100%;
    gap: 6.2rem;
  }
}

@media (max-width: 430px) {
  .nav-links {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    flex-direction: column;
    width: 100%;
    gap: 6.2rem;
  }
}

@media (max-width: 320px) {
  .nav-links {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    flex-direction: column;
    width: 100%;
    gap: 2.6rem;
  }
}

/* Estilos para pagina HOME*/

/*Primera sección*/
.body-home {
  position: relative;
  width: 100%;
  height: auto;
}

.transpar-cont-hom-1{
  width: 25%;
  height: auto;
}

.bg-home {
  position: absolute;
  height: 100%;
  width: 100%;
}

.man-home {
  position: absolute;
  width: 46.6%;
  height: auto;
  right: -0.1%;
}

.title-home-img {
  position: absolute;
  width: 50%;
  height: auto;
  left: 3%;
  top: 24%;
}

.button-down-home {
  position: absolute;
  width: 8%;
  height: auto;
  bottom: 5%;
  left: 46%;
}

/*Segundas sección*/

.section2-home {
  position: relative;
  width: 100%;
  height: 100%;
}

.transp-home2{
  width: 30%;
  height: auto;
}

.image-home2{
  position: absolute;
  width: 100%;
  height: auto;
  right: 0%;
}

.title-home2{
  position: absolute;
  width: 40%;
  height: auto;
  top: 10%;
  left: 3%;
}

.texto-home2{
  position: absolute;
  width: 50%;
  height: auto;
  top: 35%;
  left: 3%;
}

/*Tercera sección*/
.scroll-horizontal-home {
  display: flex;
  scroll-snap-type: x mandatory;
  width: 100%;
  height: 100%;
  overflow-x: scroll; 
  scroll-behavior: smooth;
  scrollbar-width: none; 
  -ms-overflow-style: none; 
}

.scroll-horizontal-home.no-scroll-snap{
  scroll-snap-type: none;
}

.scroll-horizontal-home::-webkit-scrollbar {
  display: none;
}

.slide-home {
  position: relative;
  flex: none;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  overflow: visible;
  display: block;
}

.slide-home::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
}

.bg-slide {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.person-slide {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 120%;
  object-fit: contain;
  z-index: 10;
}

.title-slide {
  position: absolute;
  top: 25%;
  right: 5%;
  width: 40%;
  object-fit: contain;
  z-index: 2;
}

.text-slide {
  position: absolute;
  top: 55%;
  right: 5%;
  width: 40%;
  object-fit: contain;
  z-index: 2;
}

.boton-slide-right{
  position: absolute;
  top: 41%;
  right: 4%;
  width: 3%;
  height: auto;
}

.boton-slide-left{
  position: absolute;
  top: 41%;
  left: 1%;
  width: 3%;
  height: auto;
  z-index: 10;
}

/*Cuarta seccion HOME*/
.slide-home-alt {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.tranp-home-sec4{
  width: 50%;
  height: auto;
}

.bg-slide-alt {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0%;
  left: 0%;
}

.texto-izquierdo {
  position: absolute;
  top: 10%;
  left: 3%;
  width: 40%;
  z-index: 2;
}

.esquema-centro {
  position: absolute;
  top: 40%;
  left: 16%;
  width: 70%;
  z-index: 2;
}

.chica-circular {
  position: absolute;
  top: -14%;
  right: -5%;
  width: 58%;
  z-index: 1;
}

.texto-cta {
  position: absolute;
  top: 33%;
  right: 2%;
  width: 25%;
  z-index: 2;
}

.mano-izquierda {
  position: absolute;
  bottom: 11%;
  left: 0%;
  height: 45%;
  z-index: 2;
}

.mano-derecha {
  position: absolute;
  bottom: 0;
  right: 5%;
  height: 46%;
  z-index: 2;
}

/*Section Home5*/

.slide-home-omni {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
}

.tranp-home-sec5{
  width: 26%;
  height: auto;
}

.bg-omni {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0%;
  left: 0%;
}

.imagen-mujer {
  position: absolute;
  top: -10%;
  left: 28%;
  width: 45%;
}

.texto-1 {
  position: absolute;
  top: 14%;
  left: 3%;
  width: 30%;
}

.texto-2 {
  position: absolute;
  top: 14%;
  right: 2%;
  width: 25%;
}

.texto-3 {
  position: absolute;
  top: 58%;
  right: 3%;
  width: 20%;
}

.bullet-1 {
  position: absolute;
  top: 30%;
  left: 30%;
  width: 3%;
  height: auto;
}

.bullet-2 {
  position: absolute;
  top: 20%;
  right: 33%;
  width: 3%;
  height: auto;
}

.bullet-3 {
  position: absolute;
  top: 57%;
  right: 25.5%;
  width: 3%;
  height: auto;
}

/*Section home6*/

.slide-home-vision {
  position: relative;
  width: 100%;
  height: auto;
  min-height: unset;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.transp-home-sec6{
  width: 24%;
  height: auto;
}

.bg-vision {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
}

.titulo-vision {
  position: absolute;
  top: 8%;
  left: 5%;
  width: 40%;
  z-index: 2;
}

.texto-vision {
  position: absolute;
  top: 35%;
  left: 5%;
  width: 45%;
  z-index: 2;
}

.imagen-vision {
  position: absolute;
  top: 0%;
  right: 0%;
  width: 50%;
  z-index: 2;
}  
/*Section home 7*/

.slide-home-universo {
  position: relative;
  width: 100%;
  height: 100%;
}

.transp-home-sec7{
  width: 35%;
  height: auto;
  z-index: -1;
}

.universo {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  z-index: 1;
}

.circulos-universo {
  position: absolute;
  top: 0.6%;
  left: 50%;
  transform: translateX(-50%);
  width: 89%;
  z-index: 2;
}

.faro-centro {
  position: absolute;
  bottom: 0%;
  left: 49.5%;
  transform: translateX(-50%);
  width: 21%;
  z-index: 2;
}

.titulo-centro {
  position: absolute;
  bottom: 12%;
  left: 48%;
  transform: translateX(-50%);
  width: 18%;
  z-index: 2;
}

.titulo-arco-superior {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  width: 25%;
  z-index: 2;
}

.titulo-arco-inferior {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translateX(-50%) rotate(2deg);
  width: 30%;
  z-index: 2;
}

/* iconos y textos universo omnicanal*/

.i-awareness{
  position: absolute;
  top: 3%;
  right: 30%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto
}

.t-awareness{
  position: absolute;
  top: 14%;
  right: 27.6%;
  z-index: 10;
  width: 11%;
  display: block;
  margin: auto;
}

.i-pr {
  position: absolute;
  top: 80%;
  right: 6%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto
}

.t-pr{
  position: absolute;
  top: 91%;
  right: 7.5%;
  z-index: 10;
  width: 3%;
  display: block;
  margin: auto;
}

.i-awareness-pos{
  position: absolute;
  top: 3%;
  left: 30%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto
}

.t-awareness-pos{
  position: absolute;
  top: 14%;
  left: 27.5%;
  z-index: 10;
  width: 10.5%;
  display: block;
  margin: auto;
}

.i-intent{
  position: absolute;
  top: 55%;
  right: 24%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto
}

.t-intent{
  position: absolute;
  top: 66%;
  right: 23.7%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto;
}

.i-cobranding{
  position: absolute;
  top: 50%;
  left: 35%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto
}

.t-cobranding{
  position: absolute;
  top: 61%;
  left: 35%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto;
}

.i-endomark{
  position: absolute;
  top: 50%;
  right: 36%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto
}

.t-endomark{
  position: absolute;
  top: 61%;
  right: 35.5%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto;
}

.i-contendiovalor{
  position: absolute;
  top: 60%;
  left: 5%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto  
}

.t-contendiovalor{
  position: absolute;
  top: 71%;
  left: 5%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto;
}

.i-experiential{
  position: absolute;
  top: 60%;
  right: 6%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto  
}

.t-experiential{
  position: absolute;
  top: 71%;
  right: 6%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto;
}

.i-demosyexpos{
  position: absolute;
  top: 83%;
  left: 23%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto 
}

.t-demosyexpos{
  position: absolute;
  top: 94%;
  left: 23%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto;
}

.i-shopper{
  position: absolute;
  top: 83%;
  right: 24%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto 
}

.t-shopper{
  position: absolute;
  top: 94%;
  right: 23.8%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto;
}

.i-influencer{
  position: absolute;
  top: 80%;
  left: 5.5%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto
}

.t-influencer{
  position: absolute;
  top: 91%;
  left: 5%;
  z-index: 10;
  width: 7%;
  display: block;
  margin: auto;
}

.i-identication{
  position: absolute;
  top: 28%;
  right: 25%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto
}

.t-identication{
  position: absolute;
  top: 39%;
  right: 23.9%;
  z-index: 10;
  width: 8%;
  display: block;
  margin: auto;
}

.i-inovacion{
  position: absolute;
  top: 75%;
  right: 32%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto
}

.t-inovacion{
  position: absolute;
  top: 86%;
  right: 31.9%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto;
}

.i-mpop{
  position: absolute;
  top: 55%;
  left: 22%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto
}

.t-mpop{
  position: absolute;
  top: 66%;
  left: 22%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto;
}

.i-packaging{
  position: absolute;
  top: 75%;
  left: 30.5%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto
}

.t-packaging{
  position: absolute;
  top: 86%;
  left: 30.5%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto;
}

.i-potenci{
  position: absolute;
  top: 28%;
  left: 25%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto
}

.t-potenci{
  position: absolute;
  top: 39%;
  left: 24%;
  z-index: 10;
  width: 8%;
  display: block;
  margin: auto;
}

.i-ohh{
  position: absolute;
  top: 38%;
  right: 10%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto
}

.t-ohh{
  position: absolute;
  top: 49%;
  right: 11.5%;
  z-index: 10;
  width: 3%;
  display: block;
  margin: auto;
}

.i-programatic{
  position: absolute;
  top: 38%;
  left: 8.8%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto
}

.t-programatic{
  position: absolute;
  top: 49%;
  left: 7.3%;
  z-index: 10;
  width: 9%;
  display: block;
  margin: auto;
}

.i-seo{
  position: absolute;
  top: 17%;
  left: 17%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto
}

.t-seo{
  position: absolute;
  top: 28%;
  left: 17%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto;
}

.i-tva{
  position: absolute;
  top: 17%;
  right: 19%;
  z-index: 10;
  width: 6%;
  display: block;
  margin: auto
}

.t-tva{
  position: absolute;
  top: 28%;
  right: 19.5%;
  z-index: 10;
  width: 5%;
  display: block;
  margin: auto;
}

.logo-on-media {
  position: absolute;
  width: 100px;
  z-index: 4;
}

.logo-on-media.izq {
  top: 20%;
  left: 5%;
  height: 13%;
  width: auto;
}

.logo-on-media.der {
  top: 20%;
  right: 6%;
  height: 13%;
  width: auto;
}

.lineas-der{
  position: absolute;
  width: 27%;
  z-index:2;
  top: 10%;
  right: 3%;
  transform: rotate(0deg);
}

.lineas-izq{
  position: absolute;
  width: 27%;
  z-index: 2;
  top: 10%;
  left: 2%;
  transform: rotate(0deg);
}

/* Responsive section home */

@media (max-width: 768px) {
  .transpar-cont-hom-1{
    width: 67%;
    height: auto;
  }

  .button-down-home{
    visibility: hidden;
  }

  .man-home {
    width: 100%;
    height: auto;
    bottom: -1%;
    left: 0%;
  }

  .title-home-img {
    top: 5%;
    left: 10%;
    width: 80%;
  }

  .bg-home {
    height: 100%;
    width: auto;
    bottom: 0%;
    left: 8%;
  }

  /*segunda section*/

  .transp-home2{
    width: 74%;
    height: auto;
  }

  .image-home2{
    bottom: 0;
  }

  .title-home2{
    width: 60%;
    height: auto;
    top: 2%;
    left: 29%;
  }

  .texto-home2{
    width: 80%;
    height: auto;
    left: 13%;
    top: 17%;
  }

  /* Tercera section */

  .scroll-horizontal-home {
    width: 100vw;
    height: 100vh;
  }

  .slide-home {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .transp-slide-sec1{
    width: 10%;
    height: 10%;
  }
 
  .bg-slide {
    width: 100%;
    height: 100%;
  }
  .person-slide{
    width: 122%;
    height: auto;
    bottom: 0%;
    left: 0%;
  } 

  .title-slide {
    width: 60%;
    height: auto;
    top: 2%;
    left: 20%;
  }

  .text-slide {
    width: 60%;
    height: auto;
    top: 20%;
    left: 20%;
  }
  
  /* Cuarta section */

  .tranp-home-sec4{
    width: 74%;
    height: auto;
  }

  .bg-slide-alt{
    width: 100%;
    height: 100%;
  }

  .chica-circular{
    width: 65%;
    height: auto;
    left: 18%;
  }

  .texto-cta{
    width: 40%;
    height: auto;
    top: 20%;
    left: 32%;
  }

  .mano-derecha{
    width: 25%;
    height: auto;
    bottom: 0%;
    right: 0%;
  }

  .esquema-centro{
    width: 90%;
    height: auto;
    left: 4%;
    top: 55%;
  }

  .mano-izquierda{
    width: 30%;
    height: auto;
    bottom: 0%;
    left: 0%;
  }

  .texto-izquierdo{
    width: 60%;
    height: auto;
    top: 37%;
    left: 20%;
    z-index: 10;
  }

  /* Sexta Section */

  .tranp-home-sec5{
    width: 74%;
    height: auto;
  }

  .bg-omni{
    width: 100%;
    height: 100%;
  }

  .imagen-mujer{
    width: 75%;
    height: auto;
    top: 6%;
    left: 13%;
  }

  .texto-1{
    width: 40%;
    height: auto;
    top: 5%;
  }

  .bullet-1{
    width: 5%;
    height: auto;
    left: 28%;
    top: 15%;
  }

  .texto-2{
    width: 35%;
    height: auto;
    top: 74%;
    left: 63%;
  }

  .texto-3{
    width: 30%;
    height: auto;
    top: 72%;
    left: 3%;
  }

  .bullet-2{
    width: 5%;
    height: auto;
    left: 19%;
    top: 60%;
  }

  .bullet-3{
    width: 5%;
    height: auto;
    left: 77%;
    top: 60%;
  }

  /* septima section*/

  .transp-home-sec6{
    width: 74%;
    height: auto;
  }

  .bg-vision{
    width: 101%;
    height: 100%;
  }

  .imagen-vision{
    width: 90%;
    height: auto;
    top: 21%;
  }

  .titulo-vision{
    width: 80%;
    height: auto;
    top: 0%;
    left: 11%;
  }

  .texto-vision{
    width: 65%;
    height: auto;
    top: 16%;
    left: 12%;
  }

  
}


@media (max-width: 430px) {
  .transpar-cont-hom-1{
    width: 93vw;
    height: auto;
    overflow: hidden;
  }

  .button-down-home{
    visibility: hidden;
  }

  .man-home {
    width: 120%;
    height: auto;
    bottom: -1%;
    left: -15%;
  }

  .title-home-img {
    top: 5%;
    left: 5%;
    width: 90%;
  }

  .bg-home {
    height: 150%;
    width: auto;
    top: -38%;
    left: -55%;
    z-index: -1;
  }

  /*segunda section*/

  .transp-home2{
    width: 100vw;
    height: 100vh;
  }

  .image-home2{
    bottom: 0;
  }

  .title-home2{
    width: 100%;
    height: auto;
    top: 5%;
    left: 15%;
  }

  .texto-home2{
    width: 95%;
    height: auto;
    left: 5%;
    top: 25%;
  }

  /* Tercera section */

  .scroll-horizontal-home {
    width: 100vw;
    height: 100vh;
  }

  .slide-home {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .transp-slide-sec1{
    width: 10%;
    height: 10%;
  }
 
  .bg-slide {
    width: 100%;
    height: 100%;
  }
  .person-slide{
    width: 150%;
    height: auto;
    bottom: 0%;
    left: -5%;
  } 

  .title-slide {
    width: 95%;
    height: auto;
    top: 5%;
    left: 4%;
  }

  .text-slide {
    width: 95%;
    height: auto;
    top: 23%;
    left: 4%;
  }
  
  /* Cuarta section */

  .tranp-home-sec4{
    width: 100vw;
    height: 100vh;
  }

  .bg-slide-alt{
    width: 100%;
    height: 100%;
  }

  .chica-circular{
    width: 100%;
    height: auto;
    left: 1%;
    top: -9%;
  }

  .texto-cta{
    width: 70%;
    height: auto;
    top: 22%;
    left: 21%;
  }

  .mano-derecha{
    width: 30%;
    height: auto;
    bottom: 0%;
    right: -7%;
  }

  .esquema-centro{
    width: 100%;
    height: auto;
    left: 0%;
    top: 60%;
  }

  .mano-izquierda{
    width: 40%;
    height: auto;
    bottom: 2%;
    left: 0%;
  }

  .texto-izquierdo{
    width: 85%;
    height: auto;
    top: 42%;
    left: 8%;
    z-index: 10;
  }

  /* Sexta Section */

  .tranp-home-sec5{
    width: 100vw;
    height: 100vh;
  }

  .bg-omni{
    width: 100%;
    height: 100%;
  }

  .imagen-mujer{
    width: 90%;
    height: auto;
    top: 20%;
    left: 5%;
  }

  .texto-1{
    width: 60%;
    height: auto;
    top: 10%;
    left: 5%;
  }

  .bullet-1{
    width: 7%;
    height: auto;
    left: 20%;
    top: 27%;
  }

  .texto-2{
    width: 45%;
    height: auto;
    top: 72%;
    left: 52%;
  }

  .texto-3{
    width: 40%;
    height: auto;
    top: 72%;
    left: 3%;
  }

  .bullet-2{
    width: 7%;
    height: auto;
    left: 16%;
    top: 63.5%;
  }

  .bullet-3{
    width: 7%;
    height: auto;
    left: 77%;
    top: 63.5%;
  }

  /* septima section*/

  .transp-home-sec6{
    width: 100vw;
    height: 100vh;
  }

  .bg-vision{
    width: 100%;
    height: 80%;
    top: 20%;
  }

  .imagen-vision{
    width: 100%;
    height: auto;
    top: 44%;
  }

  .titulo-vision{
    width: 90%;
    height: auto;
    top: 8%;
    left: 5%;
  }

  .texto-vision{
    width: 90%;
    height: auto;
    top: 22%;
    left: 5%;
  }

  /* Section home 7 */

  .slide-home-universo {
    position: relative;
    width: 100vw;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .transp-home-sec7{
    width: 300vw;
    height: 100vh;
    z-index: -1;
  }

  .universo {
    position: absolute;
    width: 300%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: 1;
  }

  .circulos-universo {
    position: absolute;
    top: 0.6%;
    left: 0%;
    width: 290%;
    height: 100%;
    left: 152%;
    z-index: 2;
  }

  .faro-centro {
    position: absolute;
    bottom: 0%;
    left: 150%;
    width: 70%;
    height: auto;
    z-index: 2;
  }

  .titulo-centro {
    position: absolute;
    bottom: 12%;
    left: 145%;
    width: 60%;
    z-index: 2;
  }

  .titulo-arco-superior {
    position: absolute;
    top: 3%;
    left: 150%;
    width: 70%;
    z-index: 2;
  }

  .titulo-arco-inferior {
    position: absolute;
    top: 32%;
    left: 117%;
    transform:rotate(2deg);
    width: 70%;
    z-index: 2;
  }

  /* iconos y textos universo omnicanal*/

  .i-awareness{
    position: absolute;
    top: 3%;
    left: 190%;
    z-index: 10;
    width: 18%;
  }

  .t-awareness{
    position: absolute;
    top: 13%;
    left: 178%;
    z-index: 10;
    width: 41%;
  }

  .i-pr {
    position: absolute;
    top: 80%;
    left: 278%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto
  }

  .t-pr{
    position: absolute;
    top: 90%;
    left: 281%;
    z-index: 10;
    width: 10%;
    display: block;
    margin: auto;
  }

  .i-awareness-pos{
    position: absolute;
    top: 3%;
    left: 93%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto
  }

  .t-awareness-pos{
    position: absolute;
    top: 13%;
    left: 82%;
    z-index: 10;
    width: 38%;
    display: block;
    margin: auto;
  }

  .i-intent{
    position: absolute;
    top: 57%;
    left: 220%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto
  }

  .t-intent{
    position: absolute;
    top: 67%;
    left: 220%;
    z-index: 10;
    width: 20%;
    display: block;
    margin: auto;
  }

  .i-cobranding{
    position: absolute;
    top: 50%;
    left: 103%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto
  }

  .t-cobranding{
    position: absolute;
    top: 60%;
    left: 100%;
    z-index: 10;
    width: 23%;
    display: block;
    margin: auto;
  }

  .i-endomark{
    position: absolute;
    top: 50%;
    left: 180%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto
  }

  .t-endomark{
    position: absolute;
    top: 60%;
    left: 179%;
    z-index: 10;
    width: 26%;
    display: block;
    margin: auto;
  }

  .i-contendiovalor{
    position: absolute;
    top: 60%;
    left: 10%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto  
  }

  .t-contendiovalor{
    position: absolute;
    top: 70%;
    left: 7%;
    z-index: 10;
    width: 25%;
    display: block;
    margin: auto;
  }

  .i-experiential{
    position: absolute;
    top: 60%;
    left: 272%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto  
  }

  .t-experiential{
    position: absolute;
    top: 70%;
    left: 271%;     
    z-index: 10;
    width: 20%;
    display: block;
    margin: auto;
  }

  .i-demosyexpos{
    position: absolute;
    top: 83%;
    left: 65%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto 
  }

  .t-demosyexpos{
    position: absolute;
    top: 93%;
    left: 63%;
    z-index: 10;
    width: 22%;
    display: block;
    margin: auto;
  }

  .i-shopper{
    position: absolute;
    top: 83%;
    left: 218%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto 
  }

  .t-shopper{
    position: absolute;
    top: 93%;
    left: 216%;
    z-index: 10;
    width: 24%;
    display: block;
    margin: auto;
  }

  .i-influencer{
    position: absolute;
    top: 80%;
    left: 8%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto
  }

  .t-influencer{
    position: absolute;
    top: 90%;
    left: 6%;
    z-index: 10;
    width: 25%;
    display: block;
    margin: auto;
  }

  .i-identication{
    position: absolute;
    top: 28%;
    left: 210%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto
  }

  .t-identication{
    position: absolute;
    top: 38%;
    left: 207%;
    z-index: 10;
    width: 26%;
    display: block;
    margin: auto;
  }

  .i-inovacion{
    position: absolute;
    top: 75%;
    left: 192%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto
  }

  .t-inovacion{
    position: absolute;
    top: 85%;
    left: 189%;
    z-index: 10;
    width: 26%;
    display: block;
    margin: auto;
  }

  .i-mpop{
    position: absolute;
    top: 55%;
    left: 65%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto
  }

  .t-mpop{
    position: absolute;
    top: 65%;
    left: 64%;
    z-index: 10;
    width: 20%;
    display: block;
    margin: auto;
  }

  .i-packaging{
    position: absolute;
    top: 75%;
    left: 90%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto
  }

  .t-packaging{
    position: absolute;
    top: 85%;
    left: 89%;
    z-index: 10;
    width: 22%;
    display: block;
    margin: auto;
  }

  .i-potenci{
    position: absolute;
    top: 28%;
    left: 70%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto
  }

  .t-potenci{
    position: absolute;
    top: 38%;
    left: 67%;
    z-index: 10;
    width: 25%;
    display: block;
    margin: auto;
  }

  .i-ohh{
    position: absolute;
    top: 38%;
    left: 260%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto
  }

  .t-ohh{
    position: absolute;
    top: 48%;
    left: 263%;
    z-index: 10;
    width: 13%;
    display: block;
    margin: auto;
  }

  .i-programatic{
    position: absolute;
    top: 38%;
    left: 21%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto
  }

  .t-programatic{
    position: absolute;
    top: 48%;
    left: 12%;
    z-index: 10;
    width: 35%;
    display: block;
    margin: auto;
  }

  .i-seo{
    position: absolute;
    top: 17%;
    left: 50%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto
  }

  .t-seo{
    position: absolute;
    top: 27%;
    left: 48%;
    z-index: 10;
    width: 22%;
    display: block;
    margin: auto;
  }

  .i-tva{
    position: absolute;
    top: 17%;
    left: 232%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto
  }

  .t-tva{
    position: absolute;
    top: 27%;
    left: 233%;
    z-index: 10;
    width: 18%;
    display: block;
    margin: auto;
  }

  .logo-on-media {
    position: absolute;
    width: 100px;
    left: 270%;
    z-index: 4;
  }

  .logo-on-media.izq {
    top: 20%;
    left: 5%;
    height: 13%;
    width: auto;
  }

  .logo-on-media.der {
    top: 20%;
    right: 6%;
    height: 13%;
    width: auto;
  }

  .lineas-der{
    position: absolute;
    width: 100%;
    z-index:2;
    top: 6%;
    left: 195%;
    transform: rotate(-4deg);
  }

  .lineas-izq{
    position: absolute;
    width: 100%;
    z-index: 2;
    top: 6%;
    left: 4%;
    transform: rotate(4deg);
  }

}

@media (max-width: 320px) {
  .transpar-cont-hom-1{
    width: 80vw;
    height: auto;
    overflow: hidden;
  }

  .button-down-home{
    visibility: hidden;
  }

  .man-home {
    width: 120%;
    height: auto;
    bottom: -1%;
    left: -15%;
  }

  .title-home-img {
    top: 5%;
    left: 5%;
    width: 90%;
  }

  .bg-home {
    height: 100%;
    width: auto;
    top: 0%;
    left: 0%;
    z-index: -1;
  }

  /* Sexta Section */

  .tranp-home-sec5{
    width: 100vw;
    height: 100vh;
  }

  .bg-omni{
    width: 100%;
    height: 100%;
  }

  .imagen-mujer{
    width: 90%;
    height: auto;
    top: 20%;
    left: 5%;
  }

  .texto-1{
    width: 60%;
    height: auto;
    top: 10%;
    left: 5%;
  }

  .bullet-1{
    width: 7%;
    height: auto;
    left: 20%;
    top: 28%;
  }

  .texto-2{
    width: 45%;
    height: auto;
    top: 80%;
    left: 52%;
  }

  .texto-3{
    width: 40%;
    height: auto;
    top: 79%;
    left: 3%;
  }

  .bullet-2{
    width: 7%;
    height: auto;
    left: 16%;
    top: 71%;
  }

  .bullet-3{
    width: 7%;
    height: auto;
    left: 77%;
    top: 71%;
  }
}

/* Nuestros clientes seccion 1*/

.n-clientes-sec1{
  width: 100%;
  height: auto;
  position: relative;
  display: block;
}

.n-clie-sec1-transp{
  width: 26%;
  height: 100%;
}

.n-clientes-manos-wrapper {
  overflow: hidden;
 }

.n-clientes-manos{
  position: absolute;
  top: 0%;
  width: 67%;
  height: auto;
  z-index: 2;
}

.n-clientes-texto{
  position: absolute;
  top: 20%;
  width: 40%;
  left: 50%;
  height: auto;
}

.n-clientes-decorativo {
  position: absolute;
  bottom: 0%;
  width: 45%;
  height: auto;
  right: 6.5%;
  z-index: 0;
}

@media (max-width: 768px) {
  .n-clientes-sec1 {
    width: 100vw;
    height: 88vh;
    position: relative;
    overflow: hidden;
  }

  .n-clientes-manos-wrapper {
    position: absolute;
    top: 40%;
    left: 0;
    width: 150%;
    z-index: 1;
  }

  .n-clientes-manos {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    z-index: 2;
  }

  .n-clientes-manos-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, white 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 3;
  }

  .n-clientes-texto {
    position: absolute;
    top: 15%;
    left: 5%;
    width: 90%;
    height: auto;
    z-index: 4;
  }

  .n-clientes-decorativo {
    visibility: hidden;
  }
}


@media (max-width: 480px) {

  .n-clie-sec1-transp{
    width: 100vw;
    height: 100vh;
  }

}

/* Nuestros clientes seccion 2*/

.n-clientes-sec2{
  width: 100%;
  height: auto;
  position: relative;
}

.n-c-transp-sec2{
  width: 10vw;
  height: 4vh;
}

.n-clientes-fondo2{
  width: 100%;
  height: auto;  
}

.carousel {
  position: absolute;
  width: 100%;
  margin: auto;
  overflow: hidden;
  top: 10%;
  transform: translateX(0%);
}

input[type="radio"] {
  display: none;
}

.carousel-wrapper {
  overflow: visible;
  width: 50%;
}

.slides {
  display: flex;
  width: 200%; /* 2 slides = 200% */
  transition: transform 0.5s ease-in-out;
}

.slide {
  width: 100%;
  flex-shrink: 0;
  padding: 2rem 1rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 2rem;
  justify-items: center;
  align-items: center;
}

.grid img {
  width: 40%;
  height: auto;
  object-fit: contain;
}


/* NAV DOTS */
.nav-dots {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 8rem;
}

.nav-dots label {
  width: 20px;
  height: 20px;
  background-color: #666;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.3s;
}

#slide1:checked ~ .carousel-wrapper .slides {
  transform: translateX(0%);
}

#slide2:checked ~ .carousel-wrapper .slides {
  transform: translateX(-100%);
}

#slide3:checked ~ .carousel-wrapper .slides {
  transform: translateX(-200%);
}

#slide4:checked ~ .carousel-wrapper .slides {
  transform: translateX(-300%);
}

#slide1:checked ~ .nav-dots label[for="slide1"],
#slide2:checked ~ .nav-dots label[for="slide2"],
#slide3:checked ~ .nav-dots label[for="slide3"],
#slide4:checked ~ .nav-dots label[for="slide4"] {
  background-color: #333;
}


@media (max-width: 768px) {

  .carousel {
    position: relative;
    top: auto;
    transform: none;
    overflow: visible;
  }

  .carousel-wrapper {
    width: 100%;
  }

  .n-clientes-sec2{
    position: relative;
    width: 100vw;
    height: auto;
  }

  .n-clientes-fondo2{
    position: absolute;
    width: 100vw;
    height: auto;
    left: 0%;
    top: 85%;
  }

  .slides {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 3rem;
    justify-items: center;
    align-items: center;
    padding: 1rem;
    width: 100%;
    margin-bottom: 45%;
    transform: none !important;
  }

  .slide {
    all: unset; 
    display: contents; 
  }

  .grid {
    display: contents; 
  }

  .grid img {
    width: 80%;
    max-width: 100px;
    height: auto;
    object-fit: contain;
  }

  .nav-dots,
  input[type="radio"] {
    display: none !important;
  }
}


/* Nuestros clientes seccion 3*/

.container-title-nc3{
   position: relative;
  width: 100%;
  height: auto;
}

.transp-nc-title{
  width: 8%;
  height: 100%;
}

.title-ns-1{
  position: absolute;
  top: 10%;
  width: 30%;
  left: 35%;
  z-index: 10;
}

.n-clientes-sec3{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1.5rem;              
  padding: 1rem 1rem 8rem; 
  scrollbar-width: none;
}

.n-clientes-sec3::-webkit-scrollbar {
  display: none;
}

.carousel-wrapper-2{
  display: flex;
  gap: 2rem;
}

.slide-2 {
  flex: 0 0 calc(50% - 0.5rem); 
  scroll-snap-align: end;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}


.grid-2 {
  display: flex;
  align-items: center;
  gap: 1rem;
  width:100%;
}

.logo-nc-1{
   width: 30%;
   margin-left: 10%;
}

.testimonio-nc-1 {
  max-width: 60%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 768px){

  
  .slide-2{
    flex: 0 0 100%;
    scroll-snap-align: start;      
    justify-content: center;
  }

  
  .grid-2{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
  }

  
  .logo-nc-1{
    width: 55%;        
    margin-left: 0;
  }

  .testimonio-nc-1{
    max-width: 80%;
    margin-left: 70px;
  }


  .n-clientes-sec3{
    padding: 1rem 1rem 4rem;
    scroll-snap-type: x proximity; 
  }

  
  .title-ns-1{
    position: static;
    width: 70%;
    margin: 0 auto 1.5rem;
    display: block;
  }
}

/* Seccion Nuestra metodologia*/

/* seccion 1 */

.n-metodologia-sec1{
  position: relative;
  height: auto;
  width: 100%;
}

.transpar-cont-sec1{
  width: 26%;
  height: auto;
}

.fondo-nm-1{
  position: absolute;
  height: 100%;
  width: 100%;
}

.image-nm-1{
  position: absolute;
  width: 44%;
  height: auto;
  right: 0;
}

.titulo-nm-1{
  position: absolute;
  width: 50%;
  height: auto;
  left: 3%;
  top: 20%;
}

.texto-nm-1{
  position: absolute;
  width: 45%;
  height: auto;
  left: 4%;
  top: 40%;
}

.boton-nm-1{
  position: absolute;
  width: 8%;
  height: auto;
  bottom: 5%;
  left: 46%;
}

@media (max-width: 768px) {
  .transpar-cont-sec1{
    width: 100vw;
    height: 88vh;
  }

  .fondo-nm-1{
    position: absolute;
    width: 150%;
    height: 60%;
    top: 40%;
    left: -50%;
  }

  .image-nm-1{
    position: absolute;
    width: 100%;
    height: auto;
    right: 0%;
    top: 35%;
  }

  .titulo-nm-1{
    position: absolute;
    width: 100%;
    height: auto;
    left: 4%;
    top: 5%;
  }

  .texto-nm-1{
    position: absolute;
    width: 90%;
    height: auto;
    left: 10%;
    top: 15%;
  }

  .boton-nm-1{
    visibility: hidden;
  }
}               

/*Seccion 2*/

.n-metodologia-sec2{
  position: relative;
  height: auto;
  width: 100%;
}

.transpar-cont{
  width: 30%;
  height: auto;
}

.fondo-nm-2{
  position: absolute;
  width: 100%;
  height: 100%;
}

.texto-nm-2{
  position: absolute;
  width: 100%;
  height: auto;
  top: 15%;
  left: 2.5%;
}

.adopcion-nm-2{
  position: absolute;
  width: 15%;
  height: auto;
  top: 50%;
  left: 55%;
  z-index: 10;
}

.conversion-nm-2{
  position: absolute;
  width: 15%;
  height: auto;
  top: 50%;
  left: 30%;
  z-index: 10;
}

.apropiacion-nm-2{
  position: absolute;
  width: 15%;
  height: auto;
  top: 50%;
  left: 80%;
  z-index: 10
}

.diferenciacion-nm-2{
  position: absolute;
  width: 15%;
  height: auto;
  top: 50%;
  left: 5%;
  z-index: 10
}

@media (max-width: 768px) {
  .transpar-cont{
    width: 100vw;
    height: 100vh;
  }

  .fondo-nm-2{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
  }

  .texto-nm-2{
    position: absolute;
    width: 90%;
    height: auto;
    top: 10%;
    left: 5%;
  }

  .adopcion-nm-2{
    position: absolute;
    width: 40%;
    height: auto;
    top: 70%;
    left: 55%;
    z-index: 10;
  }

  .conversion-nm-2{
    position: absolute;
    width: 40%;
    height: auto;
    top: 40%;
    left: 55%;
    z-index: 10;
  }

  .apropiacion-nm-2{
    position: absolute;
    width: 40%;
    height: auto;
    top: 70%;
    left: 5%;
    z-index: 10;
  }

  .diferenciacion-nm-2{
    position: absolute;
    width: 40%;
    height: auto;
    top: 40%;
    left: 5%;
    z-index: 10;
  }
}

/* Seccion 3 */

.n-metodologia-sec3{
  position: relative;
  height: auto;
  width: 100%;
  overflow: visible;
}

.transpar-cont-sec3{
  width: 25%;
  height: auto;
}

.fondo-nm-3{
  position: absolute;
  width: 100%;
  height: 100%;
}

.imagen-nm-3{
  position: absolute;
  top: -10%;
  left:35%;
  width: 30%;
  height: auto;
  z-index: 10;
}

.titulo-nm-3{
  position: absolute;
  top: 15%;
  left: 35.5%;
  width: 30%;
  height: auto;
  z-index: 10;
}

.semicircle{
  width: 50%;
  height: auto;
}

.i-dialogo-nm-3{
  position: absolute;
  top: 8%;
  left: 25%;
  width: 8%;
  height: auto;
  z-index: 10;
}

.t-dialogo-nm-3{
  position: absolute;
  top: 14%;
  left: 14%;
  width: 10%;
  height: auto;
  z-index: 10;
}

.i-dimensionamiento-nm-3{
  position: absolute;
  top: 50%;
  left: 30%;
  width: 8%;
  height: auto;
  z-index: 10;
}

.t-dimensionamiento-nm-3{
  position: absolute;
  top: 58%;
  left: 15%;
  width: 15%;
  height: auto;
  z-index: 10;
}

.i-desarrollo-nm-3{
  position: absolute;
  top: 50%;
  left: 61.5%;
  width: 8%;
  height: auto;
  z-index: 10;
}

.t-desarrollo-nm-3{
  position: absolute;
  top: 59%;
  left: 71%;
  width: 13%;
  height: auto;
  z-index: 10;
}

.i-definicion-nm-3{
  position: absolute;
  top: 8%;
  left: 66%;
  width: 8%;
  height: auto;
  z-index: 10;
}

.t-definicion-nm-3{
  position: absolute;
  top: 14%;
  left: 75%;
  width: 13%;
  height: auto;
  z-index: 10;
}

@media (max-width: 768px){
  .transpar-cont-sec3{
    width: 100vw;
    height: 100vh;
  }

  .fondo-nm-3{
    position: absolute;
    width: auto;
    height: 100%;
    top: 0%;
    left: 0%;
  }

  .imagen-nm-3{
    position: absolute;
    top: 30%;
    left: 5%;
    width: 90%;
    height: auto;
    z-index: 10;
  }

  .titulo-nm-3{
    position: absolute;
    top: 48%;
    left: 16%;
    width: 70%;
    height: auto;
    z-index: 10;
  }

  .i-dialogo-nm-3{
    position: absolute;
    top: 28%;
    left: 10%;
    width: 18%;
    height: auto;
    z-index: 10;
  }
  .i-dimensionamiento-nm-3{
    position: absolute;
    top: 69%;
    left: 10%;
    width: 18%;
    height: auto;
    z-index: 10;
  }
  .i-desarrollo-nm-3{
    position: absolute;
    top: 69%;
    left: 72%;
    width: 18%;
    height: auto;
    z-index: 10;
  }
  .i-definicion-nm-3{
    position: absolute;
    top: 28%;
    left: 72%;
    width: 18%;
    height: auto;
    z-index: 10;
  }

  .t-dialogo-nm-3{
    position: absolute;
    top: 21%;
    left: 2%;
    width: 30%;
    height: auto;
    z-index: 10;
  }
  .t-dimensionamiento-nm-3{
    position: absolute;
    top: 80%;
    left: 2%;
    width: 45%;
    height: auto;
    z-index: 10;
  }
  .t-desarrollo-nm-3{
    position: absolute;
    top: 80%;
    left: 60%;
    width: 38%;
    height: auto;
    z-index: 10;
  }
  .t-definicion-nm-3{
    position: absolute;
    top: 21%;
    left: 61%;
    width: 37%;
    height: auto;
    z-index: 10;
  }
}

/* Seccion 4 */

.n-metodologia-sec4{
  position: relative;
  height: auto;
  width: 100%;
}

.transpar-cont-sec4{
   width: 30%;
  height: auto;
}

.fondo-nm-4{
  position: absolute;
  height: 100%;
  width: 100%;
}

.faro-nm-4{
  position: absolute;
  height: 77.5%;
  width: auto;
  top: 22.5%;
  left: 38.5%;
  z-index: 10;
}

.estra-omni-nm-4{
  position: absolute;
  height: 40%;
  width: auto;
  top: 3%;
  left: 40%;
  z-index: 9;
}

.circulo-nm-4{
  position: absolute;
  height: 90%;
  width: auto;
  top: 7%;
  left: 28%;
  z-index: 8;
}

.metricas-nm-4{
  position: absolute;
  height: 15%;
  width: auto;
  top: 13%;
  left: 32.5%;
  z-index: 10;
}

.resultados-nm-4{
  position: absolute;
  height: 20%;
  width: auto;
  top: 2%;
  left: 25%;
  z-index: 8;
}

.sesion-place-nm-4{
  position: absolute;
  height: 15%;
  width: auto;
  top: 30%;
  left: 26%;
  z-index: 10;
}

.estrategia-comuni-nm-4{
  position: absolute;
  height: 30%;
  width: auto;
  top: 20%;
  left: 14%;
  z-index: 8;
}

.como-nm-4{
  position: absolute;
  height: 15%;
  width: auto;
  top: 58%;
  left: 26%;
  z-index: 10;
}

.defin-marca-nm-4{
  position: absolute;
  height: 25%;
  width: auto;
  top: 52%;
  left: 11%;
}

.sesion-brand-nm-4{
  position: absolute;
  height: 15%;
  width: auto;
  top: 80%;
  left: 33%;
  z-index: 10;
}

.brandsight-nm-4{
  position: absolute;
  height: 15%;
  width: auto;
  top: 80%;
  left: 60%;
  z-index: 10;
}

.quien-nm-4{
  position: absolute;
  height: 15%;
  width: auto;
  top: 65%;
  left: 67%;
  z-index: 10;
}

.segmentacion-nm-4{
  position: absolute;
  height: 25%;
  width: auto;
  top: 65%;
  left: 71%;
  z-index: 8;
}

.que-nm-4{
  position: absolute;
  height: 15%;
  width: auto;
  top: 44%;
  left: 69%;
  z-index: 10;
}

.entendimiento-nm-4{
  position: absolute;
  height: 30%;
  width: auto;
  top: 35%;
  left: 74%;
  z-index: 8;
}

.porque-nm-4{
  position: absolute;
  height: 15%;
  width: auto;
  top: 12%;
  left: 63%;
  z-index: 10;
}

.oportunidades-mercado-nm-4{
  position: absolute;
  height: 30%;
  width: auto;
  top: 4%;
  left: 69%;
  z-index: 8;
}

@media (max-width: 768px) {

  .n-metodologia-sec4{
    position: relative;
    width: 100vw;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .transpar-cont-sec4{
    width: 300vw;
    height: 100vh;
    z-index: -1;
  }

  .fondo-nm-4{
    position: absolute;
    width: 300%;
    height: 100%;
    top: 0%;
    left: 0%;
    z-index: 1;
  }

  .faro-nm-4{
    position: absolute;
    height: 80%;
    width: auto;
    top: 20%;
    left: 103%;
    z-index: 10;
  }

  .estra-omni-nm-4{
    position: absolute;
    height: 35%;
    width: auto;
    top: 2%;
    left: 114%;
    z-index: 9;
  }

  .circulo-nm-4{
    position: absolute;
    height: 90%;
    width: auto;
    top: 7%;
    left: 60%;
    z-index: 8;
  }

  .metricas-nm-4{
    position: absolute;
    height: auto;
    width: 30%;
    top: 5%;
    left: 75%;
    z-index: 10;
  }

  .resultados-nm-4{
    position: absolute;
    height: auto;
    width: 40%;
    top: -3%;
    left: 42%;
    z-index: 8;
  }

  .sesion-place-nm-4{
    position: absolute;
    height: auto;
    width: 30%;
    top: 28%;
    left: 50%;
    z-index: 10;
  }

  .estrategia-comuni-nm-4{
   position: absolute;
   height: auto;
   width: 50%;
   top: 18%;
   left: 13%;
   z-index :8; 
 }

 .como-nm-4{
   position: absolute;
   height: auto;
   width: 30%;
   top: 55%;
   left: 55%;
   z-index :10; 
 }

 .defin-marca-nm-4{
   position: absolute;
   height: auto;
   width: 58%;
   top:52%;
   left: 4%;
   z-index: 8;
 }

 .sesion-brand-nm-4{
   position: absolute;
   height: auto;
   width: 30%;
   top: 80%;
   left: 80%;
  }

  .brandsight-nm-4{
   position: absolute;
   height: auto;
   width: 30%;
   top: 80%;
   left: 185%;
  }

  .quien-nm-4{
   position: absolute;
   height: auto;
   width: 30%;
   top: 60%;
   left: 210%;
  }

  .segmentacion-nm-4{
   position: absolute;
   height: auto;
   width: 63%;
   top: 62%;
   left: 230%;
  }

  .que-nm-4{
   position: absolute;
   height: auto;
   width: 30%;
   top: 35%;
   left: 210%;
  }

  .entendimiento-nm-4{
   position: absolute;
   height: auto;
   width: 60%;
   top: 32%;
   left: 232%;
  }

  .porque-nm-4{
   position: absolute;
   height: auto;
   width: 30%;
   top: 5%;
   left: 190%;
  }

  .oportunidades-mercado-nm-4{
   position: absolute;
   height: auto;
   width: 75%;
   top: 5%;
   left: 213%;
  }

}

/* seccion 5*/

.n-metodologia-sec5{
  position: relative;
  width: 100%;
  height: auto;
}

.transp-nm-sec5{
  width: 27%;
  height: auto;
}

.fondo-nm-5{
  position : absolute;
  width: 100%;
  height: 100%;
  bottom: 0%;
}

.image-nm-5{
  position: absolute;
  top: 1%;
  right: 0%;
  width: 57%;
  height: auto;
}

.titulo-nm-5{
  position: absolute;
  top: 2%;
  left: 2%;
  width: 45%;
  height: auto;
}

.texto-nm-5{
  position: absolute;
  bottom: 2%;
  left: 2%;
  width: 50%;
  height: auto;
}

@media (max-width: 768px){
  
  .n-metodologia-sec5{
    position: relative;
    width: 100%;
    height: 100%;
  }

  .transp-nm-sec5{
    width: 100vw;
    height: 100vh;
  }

  .fondo-nm-5{
    position: absolute;
    width: 230%;
    height: 60%;
    right: -35%;
    top: 43%;
  }

  .image-nm-5{
    position: absolute;
    top: 55%;
    right: 0%;
    width: 100%;
    height: auto;
  }

  .titulo-nm-5{
    position: absolute;
    top: 5%;
    left: 3%;
    width: 100%;
    height: auto;
  }

  .texto-nm-5{
    position: absolute;
    top: 25%;
    left: 3%;
    width: 100%;
    height: auto; 
  }
}

/* Seccion 6 */

.n-metodologia-sec6{
  position: relative;
  width: 100%;
  height: auto;
  display: inline-block;
  overflow: hidden;
}

.fondo-nm-6{
  width: 100%;
  display: block;
}

.tarjeta-azul-nm-6{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fondo-azul-nm6{
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  opacity: 0.8;
  transition: top 0.5s ease;
  z-index: 1;
}

.texto-nm-6{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease 0.3s;
  z-index: 2;
}

.n-metodologia-sec6:hover .tarjeta-azul-nm-6 {
  pointer-events: auto;
}

.n-metodologia-sec6:hover .fondo-azul-nm6{
  top: 0;
}

.n-metodologia-sec6:hover .texto-nm-6{
  opacity: 1;
}

/* seccion 7 */

.n-metodologia-sec7{
  position: relative;
  width: 100%;
  height: auto;
  display: inline-block;
  overflow: hidden;
}

.fondo-nm-7{
  width: 100%;
  display: block;
}

.tarjeta-rojo-nm-7{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fondo-rojo-nm-7{
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  opacity: 0.8;
  transition: top 0.5s ease;
  z-index: 1;
}

.texto-nm-7{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease 0.3s;
  z-index: 2;
}

.n-metodologia-sec7:hover .tarjeta-rojo-nm-7{
  pointer-events: auto;
}

.n-metodologia-sec7:hover .fondo-rojo-nm-7{
  top: 0;
}

.n-metodologia-sec7:hover .texto-nm-7{
  opacity: 1;
}

/* seccion 8 */

.n-metodologia-sec8{
  position: relative;
  width: 100%;
  height: auto;
  display: inline-block;
  overflow: hidden;
}

.fondo-nm-8{
  width: 100%;
  display: block;
}

.tarjeta-guinda-nm-8{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fondo-guinda-nm-8{
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  opacity: 0.8;
  transition: top 0.5s ease;
  z-index: 1;
}

.texto-nm-8{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease 0.3s;
  z-index: 2;
}

.n-metodologia-sec8:hover .tarjeta-guinda-nm-8 {
  pointer-events: auto;
}

.n-metodologia-sec8:hover .fondo-guinda-nm-8{
  top: 0;
}

.n-metodologia-sec8:hover .texto-nm-8{
  opacity: 1;
}

/* seccion 9 */

.n-metodologia-sec9{
  position: relative;
  width: 100%;
  height: auto;
  display: inline-block;
  overflow: hidden;
}

.fondo-nm-9{
  width: 100%;
  display: block;
}

.tarjeta-amarillo-nm-9{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fondo-amarillo-nm-9{
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  opacity: 0.8;
  transition: top 0.5s ease;
  z-index: 1;
}

.texto-nm-9{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease 0.3s;
  z-index: 2;
}

.n-metodologia-sec9:hover .tarjeta-amarilla-nm-9 {
  pointer-events: auto;
}

.n-metodologia-sec9:hover .fondo-amarillo-nm-9{
  top: 0;
}

.n-metodologia-sec9:hover .texto-nm-9{
  opacity: 1;
}

/* seccion 10 */

.n-metodologia-sec10{
  position: relative;
  width: 100%;
  height: auto;
  display: inline-block;
  overflow: hidden;
}

.fondo-nm-10{
  width: 100%;
  display: block;
}

.tarjeta-verde-nm-10{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fondo-verde-nm-10{
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  opacity: 0.8;
  transition: top 0.5s ease;
  z-index: 1;
}

.texto-nm-10{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease 0.3s;
  z-index: 2;
}

.n-metodologia-sec10:hover .tarjeta-verde-nm-10 {
  pointer-events: auto;
}

.n-metodologia-sec10:hover .fondo-verde-nm-10{
  top: 0;
}

.n-metodologia-sec10:hover .texto-nm-10{
  opacity: 1;
}


@media (max-width: 768px) {
  .tarjeta-azul-nm-6,
  .tarjeta-rojo-nm-7,
  .tarjeta-guinda-nm-8,
  .tarjeta-amarilla-nm-9,
  .tarjeta-verde-nm-10 {
    pointer-events: auto;
  }

  .fondo-azul-nm6,
  .fondo-rojo-nm-7,
  .fondo-guinda-nm-8,
  .fondo-amarillo-nm-9,
  .fondo-verde-nm-10 {
    top: 0 !important;
    opacity: 0.8 !important;
    transition: none !important;
  }

  .texto-nm-6,
  .texto-nm-7,
  .texto-nm-8,
  .texto-nm-9,
  .texto-nm-10 {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* Page Conoce nuestro proceso */

/* seccion 1 */

.n-proceso-sec1{
  position: relative;
  width: 100%;
  height: auto;
}

.transp-sec1{
  width: 25%;
  height: auto;
}

.image-np-sec1{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
}

.amarillo-np-sec1{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
}

.texto-np-sec1{
  position: absolute;
  width: 50%;
  height: auto;
  top: 30%;
  left: 26%;
}

.flecha-np-sec1{
  position: absolute;
  width: 10%;
  height: auto;
  bottom: 20%;
  left: 45.5%;
}

/* seccion 2 */

.n-proceso-sec2{
  position: relative;
  width: 100%;
  height: auto;
}

.transp-np-sec2{
  width: 80%;
  height: auto;
}

.c-dialogo-np-sec2{
  position: absolute;
  width: 100%;
  height: 24%;
  top: 1%;
  left: 3%;
}

.dialogo-np-sec2{
  position: absolute;
  width: 15%;
  height: auto;
  top: 2.5%;
  left: 30%;
}

.d-dialogo-np-sec2{
  position: absolute;
  width: 24%;
  height: auto;
  top: 2%;
  left: -4%;
}

.t-dialogo-np-sec2{
  position: absolute;
  width: 45%;
  height: auto;
  top: 6%;
  left: 32%;
}

.c-dimensi-np-sec2{
  position: absolute;
  width: 100%;
  height: 24%;
  top: 25%;
  left: 3%;
}

.dimensi-np-sec2{
  position: absolute;
  width: 35%;
  height: auto;
  top: 27%;
  left: 30%;
}

.d-dimensi-np-sec2{
  position: absolute;
  width: 24%;
  height: auto;
  top: 26%;
  left: -4%;
}

.t-dimensi-np-sec2{
  position: absolute;
  width: 55%;
  height: auto;
  top: 32%;
  left: 32%;
}

.c-desarrollo-np-sec2{
  position: absolute;
  width: 100%;
  height: 24%;
  top: 50%;
  left: 3%;
}

.desarrollo-np-sec2{
  position: absolute;
  width: 20%;
  height: auto;
  top: 52%;
  left: 30%;
}

.d-desarrollo-np-sec2{
  position: absolute;
  width: 24%;
  height: auto;
  top: 51%;
  left: -4%;
}

.t-desarrollo-np-sec2{
  position: absolute;
  width: 50%;
  height: auto;
  top: 57%;
  left: 32%;
}

.c-defini-np-sec2{
  position: absolute;
  width: 100%;
  height: 24%;
  top: 75%;
  left: 3%;
}

.defini-np-sec2{
  position: absolute;
  width: 18%;
  height: auto;
  top: 77%;
  left: 30%;
}

.d-defini-np-sec2{
  position: absolute;
  width: 24%;
  height: auto;
  top: 76%;
  left: -4%;
}

.t-defini-np-sec2{
  position: absolute;
  width: 50%;
  height: auto;
  top: 81%;
  left: 32%;
}

/* Subsecciones de nuestra metodologia*/

/* Estilos generales para primera seccion de colores */

.sub-secc-n-metod{
  position: relative;
  width: 100%;
  height: auto;
}

.transp-subsecc{
  width: 25%;
  height: auto;
}

.image-fondo-subsecc{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
}

.color-subsecc{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  opacity: 0.8;
}

.texto-subsecc{
  position: absolute;
  width: 50%;
  height: auto;
  top: 30%;
  left: 26%
}

.boton-subsecc-azul{
  position: absolute;
  width: 10%;
  height: auto;
  bottom: 10%;
  left: 45.5%;
}

.boton-subsecc-rojo{
  position: absolute;
  width: 10%;
  height: auto;
  bottom: 10%;
  left: 45.5%;
}

.boton-subsecc-guinda{
  position: absolute;
  width: 10%;
  height: auto;
  bottom: 10%;
  left: 45.5%;
}

.boton-subsecc-amarillo{
  position: absolute;
  width: 10%;
  height: auto;
  bottom: 10%;
  left: 45.5%;
}

.boton-subsecc{
  position: absolute;
  width: 10%;
  height: auto;
  bottom: 10%;
  left: 45.5%;
}

/* Sub seccion azul Discovery */

.transp-met-sec2{
  width: 28%;
  height: auto;
}

.circulo-discov-sec2{
  position: absolute;
  width: 40%;
  height: auto;
  top: -16%;
  right: 0%;
  z-index: -1;
}

.texto-discov-sec2{
  position: absolute;
  width: 60%;
  height: auto;
  top: 10%;
  left: 4%;
}

.cuadro1-discovery-sec2{
  position: absolute;
  width: 25%;
  height: auto;
  bottom: 5%;
  left: 8%
}

.cuadro2-discovery-sec2{
  position: absolute;
  width: 25%;
  height: auto;
  bottom: 5%;
  left: 40%
}

@media (max-width: 768px){

  .boton-subsecc-azul{
    visibility: hidden;
  }

  .transp-met-sec2{
    width: 100vw;
    height: 60vh;
  }

  .circulo-discov-sec2{
    width: 50%;
    top: -5%;
  }

  .texto-discov-sec2{
    width: 60%;
    top: 15%;
    left: 2%;
  }

  .cuadro1-discovery-sec2{
    width: 45%;
    left: 5%;
    top: 60%;
  }

  .cuadro2-discovery-sec2{
    width: 45%;
    left: 50%;
    top: 60%;
  }

}

/* Subseccion rojo branday */

.transp-brand-sec2{ 
  width: 40%;
  height: auto;
}

.circulo-brand-sec2{
  position: absolute;
  width: 40%;
  height: auto;
  top: -11%;
  right: 0%;
  z-index: -1;
}

.texto-brand-sec2{
  position: absolute;
  width: 55%;
  height: auto;
  top: 6%;
  left: 3%;
  z-index: 1;
}

.cuadro1-brand-sec2{
  position: absolute;
  width: 25%;
  height: auto;
  top: 53%;
  left: 1%;
  z-index: 1;
}

.cuadro2-brand-sec2{
  position: absolute;
  width: 25%;
  height: auto;
  top: 53%;
  left: 25%;
  z-index: 1;
}

.cuadro3-brand-sec2{
  position: absolute;
  width: 25%;
  height: auto;
  top: 53%;
  right: 25%;
  z-index: 1;
}

.cuadro4-brand-sec2{
  position: absolute;
  width: 25%;
  height: auto;
  top: 53%;
  right: 1%;
  z-index: 1;
}

.texto2-brand-sec2{
  position: absolute;
  width: 70%;
  height: auto;
  bottom: 0%;
  left: 3%;
  z-index: 1;
}

@media (max-width: 768px){

  .boton-subsecc-rojo{
    visibility: hidden;
  }

  .transp-brand-sec2{
    width: 100vw;
    height: 50vh;
  }

  .circulo-brand-sec2{
    width: 50%;
    top: -8%;
  }

  .texto-brand-sec2{
    width: 58%;
    top: 15%;
    left: 2%;
  }

  .cuadro1-brand-sec2,
  .cuadro2-brand-sec2,
  .cuadro3-brand-sec2,
  .cuadro4-brand-sec2{
    top: 62%;
  }

}

/* Subseccion placemat */

.transp-place-sec2{
  width: 35%;
  height: auto;
}

.circulo-place-sec2{
  position: absolute;
  width: 40%;
  height: auto;
  top: -14%;
  right: 0%;
  z-index: -1;
}

.texto-place-sec2{
  position: absolute;
  width: 50%;
  height: auto;
  top: 8%;
  left: 8%;
  z-index: -1;
}

.cuadro1-place-sec2{
  position: absolute;
  width: 25%;
  height: auto;
  top: 62%;
  left: 10%;
  z-index: -1;
}

.cuadro2-place-sec2{
  position: absolute;
  width: 25%;
  height: auto;
  top: 62%;
  left: 40%;
  z-index: -1;
}

@media (max-width: 768px){
  .boton-subsecc-guinda{
    visibility: hidden;
  }

  .texto-subsecc{
    top: 40%;
  }

  .transp-place-sec2{
    width: 100vw;
    height: 55vh;
  }

  .circulo-place-sec2{
    width: 48%;
    top: -6%;
  }

  .texto-place-sec2{
    width: 58%;
    left: 3%;
    top: 10%;
  }

  .cuadro1-place-sec2{
    width: 45%;
    left: 5%;
    top: 55%;
  }

  .cuadro2-place-sec2{
    width: 45%;
    left: 50%;
    top: 55%;
  }

}
/* Sub section Bussinnes Ideation*/

.transp-buss-sec2{
  width: 30%;
  height: auto;
}

.texto-buss-sec2{
  position: absolute;
  width: 60%;
  height: auto;
  top: 15%;
  left: 4%;
}

.circulo-buss-sec2{
  position: absolute;
  width: 40%;
  height: auto;
  top: -15%;
  right: 0%;
  z-index: -1;
}

.cuadro1-buss-sec2{
  position: absolute;
  width: 30%;
  height: auto;
  top: 45%;
  left: 5%;
}

.cuadro2-buss-sec2{
  position: absolute;
  width: 30%;
  height: auto;
  top: 45%;
  left: 37%;
}

@media (max-width: 768px){
  .boton-subsecc-amarillo{
    visibility: hidden;
  }

  .transp-buss-sec2{
    width: 100vw;
    height: 55vh;
  }

  .circulo-buss-sec2{
    width: 50%;
    top: -6%;
  }

  .texto-buss-sec2{
    width: 60%;
    left: 2%;
  }

  .cuadro1-buss-sec2{
    width: 45%;
    left: 5%;
    top: 58%;
  }

  .cuadro2-buss-sec2{
    width: 45%;
    left: 50%;
    top: 58%;
  }
}

/* Sub section performance */

.transp-perfor-sec2{
  width: 30%;
  height: auto;
}

.texto-perfor-sec2{
  position: absolute;
  width: 55%;
  height: auto;
  top: 15%;
  left: 5%;
}

.circulo-perfor-sec2{
  position: absolute;
  width: 40%;
  height: auto;
  top: -15%;
  right: 0%;
  z-index: -1;
}

.cuadro1-perfor-sec2{
  position: absolute;
  width: 30%;
  height: auto;
  top: 50%;
  left: 5%;
}

.cuadro2-perfor-sec2{
  position: absolute;
  width: 30%;
  height: auto;
  top: 50%;
  left: 35%;
}

@media (max-width: 768px){
  .boton-subsecc{
    visibility: hidden;
  }

  .transp-perfor-sec2{
    width: 100vw;
    height: 55vh;
  }

  .circulo-perfor-sec2{
    width: 49%;
    top: -7%;
  }

  .texto-perfor-sec2{
    width: 60%;
    left: 2%;;
  }

  .cuadro1-perfor-sec2{
    width: 45%;
    left: 5%;
    top: 59%;
  }

  .cuadro2-perfor-sec2{
    width: 45%;
    left: 50%;
    top: 59%;
  }
}

/* Pagina Casos exito */
/* Primera seccion Slide */

.c-exi-scroll-sec1{
  display: flex;
  scroll-snap-type: x mandatory;
  width: 100%;
  height: 100%;
  overflow-x: scroll; 
  scroll-behavior: smooth;
  scrollbar-width: none; 
  -ms-overflow-style: none;  
}

.c-exi-scroll-sec1::-webkit-scrollbar {
  display: none;
}

.transp-slide-sec1{
  width: 26%;
  height: 100%;
}

.slide-vista-sec1 {
  position: relative;
  flex: none;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  overflow: hidden;
}

.c-exi-slide-fondo {
  position: absolute;
  top: 8%;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.c-exi-slide-image {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 110%;
  object-fit: contain;
  z-index: 1;
}

.c-exi-slide-image2 {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 120%;
  object-fit: contain;
  z-index: 1;
}

.c-exi-slide-text {
  position: absolute;
  top: 28%;
  left: 2%;
  width: 60%;
  z-index: 2;
}

.c-exi-slide-text2 {
  position: absolute;
  top: 25%;
  right: 5%;
  width: 55%;
  object-fit: contain;
  z-index: 10;
}

@media (max-width: 768px) {
  .transp-slide-sec1 {
    width: 100vw;
    height: 89vh;
  }

  .c-exi-slide-fondo{
    width: 100%;
    height: 100%;;
  }

  .c-exi-slide-image{
    width: 140%;
    height: auto;
    right: 0%;
  }

  .c-exi-slide-image2{
    width: 120%;
    height: auto;
  }

  .c-exi-slide-text{
    width: 90%;
    top: 12%;
    left: 6%;
  }

  .c-exi-slide-text2{
    width: 90%;
    top: 10%;
  }
}

/* Estilos Scroll Consumo Casos de Exito */

.container-title-scroll{
  position: relative;
  width: 100%;
  height: 100%;
}

.title-transp-scroll{
  width: 1%;
  height: auto;
}

.image-title-scroll
{
  position: absolute;
  width: 25%;
  height: auto;
  transform: translateX(150%);
  top: 80%;
}

.container-scroll-consumo{
  display: flex;
  gap: 1%;
  overflow-x: auto;            
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
  
  --nav-btn: clamp(36px, 4.5vw, 56px);
  --nav-gap: 8px;
  --gutter: calc(var(--nav-btn) + var(--nav-gap));
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}
.container-scroll-consumo::-webkit-scrollbar{ display:none; }

.container-scroll-consumo{
  display: flex;
  gap: 1%;
}

.logo-consumo{
  flex: 0 0 33%;
  width: 70%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-consumo > img{
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

.espaciador-final {
  flex: 0 0 0.1%; 
}

.modal-root{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center; z-index:1000;
}
.modal-root.is-open{ display:flex; }

.modal-overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55); backdrop-filter:blur(2px);
}

.modal-dialog{
  position:relative; background:#fff;
  width:min(70%); max-height:85vh; overflow-y:auto;
  border-radius:20px; padding:2rem 2.25rem 2.25rem;
  box-shadow:0 10px 40px -5px rgba(0,0,0,.35);
  animation:pop .35s ease;
}
@keyframes pop{0%{transform:translateY(20px) scale(.95);opacity:0;}100%{transform:none;opacity:1;}}

.modal-close{
  position:absolute; top:.75rem; right:.75rem;
  width:40px; height:40px; border:none; border-radius:50%;
  background:#f2f2f2; cursor:pointer; font-size:1.4rem; font-weight:600;
}
.modal-close:hover{ background:#FAB51B; color:#fff; }

.modal-title{ margin:0 0 1rem; font-size:clamp(1.4rem,2vw,2rem); }
.modal-content{ display:flex; flex-direction:column; gap:1rem; font-size:.95rem; line-height:1.45; }
.modal-content img{ max-width:100%; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.12); }

@media (max-width: 768px){
  
  .scroll-btn{ display:none !important; }


  .c-exi-scroll-consumo{
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .container-scroll-consumo{
    padding-inline: 12px;        
    gap: 14px;                   
    scroll-snap-type: x proximity;
  }

  .logo-consumo{
    flex: 0 0 31vw !important;  
    width: auto !important;
  }
  .logo-consumo > img{
    width: 84% !important;      
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }
  .image-title-scroll
  {
    position: absolute;
    width: 50%;
    height: auto;
    transform: translateX(50%);
    top: 80%;
  }
}

@media (max-width: 430px){
  .container-scroll-consumo{ gap: 16px; }
  .logo-consumo{ flex-basis: 64vw !important; }
  .logo-consumo > img{ width: 50% !important; }
}

@media (max-width: 360px){
  .logo-consumo{ flex-basis: 60vw !important; }
  .logo-consumo > img{ width: 50% !important;
 }
}

/* Estilos blog*/
/* Estilos blog sec1*/

.blog-sec1{
  position: relative;
  width: 100%;
  height: 100%;
}

.transp-blog-sec1{
  width: 26%;
  height: auto;
}

.fondo-blog-sec1{
  position: absolute;
  width: 75%;
  height: 100%;
  top: 0%;
}

.image-blog-sec1{
  position: absolute;
  width: 45%;
  height: auto;
  top: 10%;
  right: 0%;
}

.titulo-blog-sec1{
  position: absolute;
  width: 40%;
  height: auto;
  top: 5%;
  left: 5%;
}

.texto-blog-sec1{
  position: absolute;
  width: 50%;
  height: auto;
  top: 58%;
  left: 5%;
}

@media (max-width: 768px){
  .transp-blog-sec1{
    width: 100vw;
    height: 89vh;
  }

  .fondo-blog-sec1{
    width: 180%;
    height: auto;
    right: 0%;
    top: 44%;
  }

  .image-blog-sec1{
    width: 115%;
    top: 42%;
  }

  .titulo-blog-sec1{
    width: 80%;
    left: 10%;
  }

  .texto-blog-sec1{
    width: 100%;
    top: 35%;
    left: 10%;
  }
}

/* Estilos blog sec2 */

.blog-sec2{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.transp-blog-sec2{
  width: 23%;
  height: auto;
}

.fondo-blog-sec2{
  position: absolute;
  width: 100%;
  height: 100%;
}

.image-blog-sec2{
  position: absolute;
  width: 48%;
  height: auto;
  top: -12%;
  left: -5%;
  z-index: 10;
}

.boton-blog-sec2{
  position: absolute;
  width: 30%;
  height: auto;
  bottom: 5%;
  right: 24.5%;
  z-index: 10;
}

.titulo-blog-sec2{
  position: absolute;
  width: 50%;
  height: auto;
  top: 5%;
  right: 5%;
}

.texto-blog-sec2{
  position: absolute;
  width: 50%;
  height: auto;
  top: 43%;
  right: 4.6%;
}

@media (max-width: 768px){
  .transp-blog-sec2{
    width: 100vw;
    height: 100vh;
  }

  .fondo-blog-sec2{
    width: 137%;
    height: 120%;
    transform: translateX(-50%) rotate(90deg);
    left: 0%;
  }

  .image-blog-sec2{
    width: 90%;
    left: 5%;
    top: -7%;
  }

  .boton-blog-sec2{
    width: 80%;
    left: 10%;
    top: 80%;
  }

  .titulo-blog-sec2{
    width: 80%;
    top: 45%;
  }

  .texto-blog-sec2{
    width: 95%;
    top: 60%;
    left: 5%;
  }
}

/* Estilos Blog sec3 */

.blog-sec3{
  position: relative;
  width: 100%;
  height: 100%;
}

.b-title-transp-scroll{
  width: 1%;
  height: auto;
}

.image-blog-scroll
{
  position: absolute;
  width: 25%;
  height: auto;
  transform: translateX(150%);
  top: 80%;
}

.b-exi-scroll-consumo{
  width: 100vw;    
  overflow-x: auto;  
  overflow-y: hidden;
  white-space: nowrap; 
  padding: 6%;
  background-color: white;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.b-exi-scroll-consumo::-webkit-scrollbar {
  display: none;
}

.b-container-scroll-consumo{
  display: flex;
  gap: 5%;
}

.b-logo-consumo{
  flex: 0 0 auto;
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.b-logo-consumo img{
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

.container-blog-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vw;
}

.boton-blog-sec3{
  transform: translateX(15%);
}

.espaciador-final {
  flex: 0 0 0.1%; 
}

@media (max-width: 768px){
  .b-container-scroll-consumo{
    width: 100vw;
    height: 60vh;
  }

  .b-logo-consumo{
    width: 90%;
    margin-top: 2rem;
  }

  .image-blog-scroll{
    width: 60%;
    transform: translateX(36%);
  }
}

/* Estilos pagina contact */

.container-page-contact{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
  overflow: visible;
}

.grafic-section-contact{
  position: relative;
  width: 100%;
  height: auto;
}

.transp-form-graf{
  width: 70%;
  height: auto;
}

.texto-contact3{
  position: absolute;
  width: 60%;
  height: auto;
  top: 3%;
  left: 3%;
}

.image-contact3{
  position: absolute;
  width: 220%;
  height: 100%;
  top: 0%;
  left: -1%;
  z-index: 2;
}

.fomr-section-contact{
  position: relative;
  width: 100%;
  height: auto;
}

.fondo-form{
  width: 100%;
  height: auto;
  z-index: 0;
}

.container-in-form{
  position: absolute;
  width: 75%;
  height: auto;
  top: 5%;
  left: 15%;
  z-index: 2;
}

.container-text-image-form{
  position: relative;
  width: 100%;
  height: auto;
}

.transp-form-text{
  width: 15%;
  height: auto;
}

.image-text-form{
  position: absolute;
  width: 70%;
  height: auto;
  top: 20%;
}

.formulario-direccion form{
  display: flex;
  flex-direction: column;
  gap: 1vw;
  left: 2vw;
}

.label-form-contact{
  font-family: AvantBold;
}

.boton-send-form{
  background-color: #FAB51B;
  color: white;
  padding: 3%;
  border-radius: 20px;
  font-size: x-large;
  font-weight: bold;
}

.input-form-contact{
  padding: 3%;
  border-radius: 20px;
}

.input-content-form-contact{
  padding: 6%;
  border-radius: 20px;
}

@media (max-width: 768px){
  .container-page-contact{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0px;
  overflow: visible;
}

.transp-form-graf{
  width: 70%;
  height: auto;
}

.texto-contact3{
  position: absolute;
  width: 70%;
  height: auto;
  top: 3%;
  left: 3%;
}

.image-contact3{
  position: absolute;
  width: 200%;
  height: 100%;
  top: 5%;
  left: -1%;
  z-index: -1;
}

.image-text-form{
  width: 90%;
  left: 5%;
  top: 2%;
}

}

.back-subsecc{
  position: absolute;
  width: 13%;
  height: auto;
  top:77%;
  left: 4%;
  transition: transform 0.3s ease
}

.back-subsecc:hover{
  transform:translateX(60px);
}

/* Estilos para footer */

.footer {
  background-image: url('../assets/img/FONDOFOOTER.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 4rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  color: white;
  font-family: 'Segoe UI', sans-serif;
  align-items: center;
  justify-items: center;

}

.logoFooter {
  width: 220px;
  height: auto;
}

.footer-main {
  gap: 5rem;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: start;
}

.buttonfooter {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0.5rem 1.2rem;
  border-radius: 5px;
  color: white;
  font-weight: 500;
  text-decoration: none;
  width: fit-content;
}

.buttonfooter:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

/* Contacto */
.footer-contact h3 {
  margin-bottom: 0.3rem;
  font-weight: bold;
}

.footer-contact p {
  margin-bottom: 0.3rem;
}

.footer-contact .email {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.social-icons a img {
  height: 28px;
  margin-right: 1rem;
  transition: transform 0.3s ease;
}

.social-icons a img:hover {
  transform: scale(1.1);
}

/* Responsive */
@media (max-width: 768px) {
  .footer-main {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
  }

  .footer-contact,
  .footer-links {
    align-items: center;
  }

  .logoFooter {
    width: 160px;
  }
}

.transition-fade {
  transition: opacity 0.6s ease;
}

@media (max-width: 430px) {
  .footer {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1rem;
    text-align: center;
  }

  .footer-logo {
    justify-self: center;
  }

  .footer-main {
    display: none; /* oculta la columna de links */
  }

  .footer-contact {
    justify-self: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0rem;
  }

  .footer-contact h3,
  .footer-contact p,
  .footer-contact .email {
    font-size: 0.9rem;
    line-height: 1.2;
  }

  .footer-contact .buttonfooter {
    font-size: 0.9rem;
    padding: 0.4rem 1rem;
  }

  .social-icons {
    margin-top: 0.5rem;
  }

  .social-icons a img {
    height: 24px;
    margin-right: 0.8rem;
  }

  .logoFooter {
    width: 100px;
  }
}

:root{
  --nav-btn: clamp(36px, 4.5vw, 56px);
  --nav-gap: 8px;
  --gutter: calc(var(--nav-btn) + var(--nav-gap));
}

.c-exi-scroll-consumo{
  width: 100%;
  position: relative;        
  padding: 6%;
  background: #fff;
  isolation: isolate;         
}

.container-scroll-consumo{
  display: flex;
  gap: 1%;
  overflow-x: auto;           
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-inline: var(--gutter);       
  scroll-padding-inline: var(--gutter);
  width: 100%;
}
.container-scroll-consumo::-webkit-scrollbar{ display:none; }

.scroll-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--nav-btn);
  height: var(--nav-btn);
  border: none; border-radius: 999px;
  background: rgba(255,255,255,.94); color:#111;
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
  display: grid; place-items: center;
  cursor: pointer; z-index: 5; pointer-events: auto;
  transition: background .2s, transform .2s, color .2s;
}
.scroll-btn.left  { left: 12px; }
.scroll-btn.right { right: 12px; }
.scroll-btn:hover{ background:#FAB51B; color:#fff; transform: translateY(-50%) scale(1.05); }
.scroll-btn:disabled{ opacity:.35; cursor: default; }

.logo-consumo{ flex: 0 0 33%; width: 70%; display:flex; align-items:center; justify-content:center; }
.logo-consumo > img{ max-width:70%; max-height:70%; object-fit:contain; }

.container-title-scroll{ position: relative; z-index: 7; }

@media (hover:none) and (pointer:coarse){ .scroll-btn{ display:none; } }

.container-scroll-consumo > a.logo-consumo{
  flex: 0 0 33%;
  width: 70%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container-scroll-consumo > a.logo-consumo > img{
  width: auto;
  height: auto;
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  display: block;
}

.container-scroll-consumo img.logo-consumo{
  flex: none !important;
  width: auto !important;
  height: auto !important;
  max-width: 70% !important;
  max-height: 70% !important;
  display: block !important;
  object-fit: contain !important;
}