@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

#test-wlp{
  display: none;
}

body p, h2{
  font-family: 'Poppins', monospace;
}

#fullpage .section { height: 100vh; }
.fp-warning, .fp-watermark {
    display: none !important;
}

.contenedor {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}



/* Animaciones */
@keyframes levitar {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px); /* sube 15px */
  }
}
@keyframes zoom {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03); /* sube 15px */
  }
}
@keyframes levitar_x {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-15px); /* sube 15px */
  }
}
/* Animaciones */


/* Presentacion */
.Presentacion .flechita{
  width: 50px;
  position: absolute;
  bottom: 26px;
  left: 49%;
  animation: levitar 1s ease-in-out infinite;
}
/* Presentacion */


/*Agencia*/
.png.uno {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.Agencia .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  max-width: 1450px
}

.Agencia .png.dos, .Agencia .texto {
  position: relative;
  width: 50%;
  max-width: 60%;
}

.Agencia .png.dos {
  width: 55%;
  animation: levitar 3s ease-in-out infinite;
}
/*Agencia*/




/*Trayectoria*/
.Trayectoria .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  max-width: 1600px;
}

.Trayectoria .png.dos, .Trayectoria .texto {
  position: relative;
  width: 50%;
  max-width: 60%;
}

.Trayectoria .texto{
  left: -50px;
}

.Trayectoria .png.dos {
  width: 70%; 
  animation: levitar_x 3s ease-in-out infinite;
}
/*Trayectoria*/




/*Equipos*/
.Equipo .container{
  height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1400px;
}
.Equipo .png{
  width: 100%;
}
/*Equipos*/





/*Instalaciones*/
.Instalaciones .container{
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: 10% !important;
}

.Instalaciones .instalacion-wrapper{
  position: relative;
  width: 50%;
  max-width: 60%;
}

.Instalaciones .instalacion{
  display: block;
  width: 100%;
  height: auto;
}

.Instalaciones .video{
    position: absolute;
    top: 50%;
    left: 58%;
    width: 75%;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: contain;
}
/*Instalaciones*/




/*Servicio*/
.Servicio .container{
    height: 100%;
    display: flex;
    align-items: center;
}
.Servicio .derecha{
  position: absolute;
  right: 0;
  height: 100%;
}
.Servicio .texto{
  position: absolute;
  top: 15%;
  left: 15%;
  width: 26%;
  max-width: 370px;
}

/*Servicio*/




/* Marketing - 3 fotos en fila */
.Marketing .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 60px;
  flex-direction: row-reverse;
}
.Marketing .contenedor{
  display: flex;
  justify-content: center;
}
.Marketing .box{
  height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}
.Marketing .texto{
  width: 100%;
  max-width: 700px;
}

.Marketing .opciones-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.Marketing .opciones{
  width: 70%;
  max-width: 500px;
}

.Marketing .box_texto{
  display: flex;
  justify-content: end;
}

/* Animaciones sutiles para 3 imágenes en .Marketing .opciones */

@keyframes moverDerecha {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}

@keyframes moverIzquierda {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-10px); }
}

/* Primera imagen - mueve a la derecha */
.Marketing .opciones-container img:nth-child(1) {
  animation: moverDerecha 4s ease-in-out infinite;
}

/* Segunda imagen - mueve a la izquierda */
.Marketing .opciones-container img:nth-child(2) {
  animation: moverIzquierda 4s ease-in-out infinite;
}

/* Tercera imagen - mueve a la derecha */
.Marketing .opciones-container img:nth-child(3) {
  animation: moverDerecha 4s ease-in-out infinite;
}

/* Marketing*/




/* Webs*/
.Webs .web_texto{
 display: flex;
    margin-top: 10%;
    max-width: 800px;
    width: 100%;
}
.Webs .container{
  width: 100%;
  max-width: 1450px;
}
/* Webs*/




/* Webs2*/
.Webs2 .container{
    height: 100%;
    position: absolute;
    align-content: center;
    margin-left: 12%;
    width: 35%;
    max-width: 900px;
}
.Webs2 .web_texto{
  width: 100%;
}
/* Webs2*/




/* Tiendas */
.Tiendas .contenedor{
  display: flex;
}
.Tiendas .box{
  height: 100%;
  position: relative;
  align-content: center;
  max-width: 1450px;
  margin: 0 auto;
}
.Tiendas .opciones-container {
  display: flex;
  gap: 50px;
}
.Tiendas .texto{
  margin-left: 0%;
  width: 75%;
  margin-top: 0%;
}
/* Aplica levitación a todas las imágenes dentro de opciones */
.Tiendas .opciones-container img.opciones {
  width: 40%;
  animation: levitar 3s ease-in-out infinite;
}
/* Primer imagen margin -10px */
.Tiendas .opciones-container img.opciones:nth-child(1) {
  position: relative;
  top: -50px;
}
/* Segunda imagen margin +10px */
.Tiendas .opciones-container img.opciones:nth-child(2) {
  position: relative;
  top: 50px;
}

/* Tiendas */




/* Tiendas 2*/
.Tiendas2 .web_texto{
  max-width: 710px;
  width: 60%;
}
.Tiendas2 .container{
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.Tiendas2 .png{
  animation: levitar 3s ease-in-out infinite;
  height: 100%;
  margin-left: -180px;
  width: auto;
  max-height: 90%;
}
/* Tienda





/* Clientes */
.Clientes .contenedor {
  align-content: center;
}
.Clientes .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  margin-top: -50px;
}
.Clientes .box {
  display: flex;
  gap: 2%;
  justify-content: center;
  width: 80%;
  margin: 0 auto;
}
.Clientes .caja {
  z-index: 2;
  flex: 0 0 30%;
  aspect-ratio: 197 / 267;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #000000;
  text-align: center;
  font-family: Arial, sans-serif;
  border-radius: 12px;
  position: relative; /* Para posicionar el PNG dentro */
}
.Clientes .caja.cuatro {
  position: relative;
}
.Clientes .caja h2 {
  margin: 0;
  font-size: clamp(60px, 2.5vw, 60px);
  font-weight: bold;
}
.Clientes .caja.uno h2 {
  color: #FF0088;
}
.Clientes .caja.dos h2 {
  color: #F9544F;
}
.Clientes .caja.tres h2 {
  color: #FF9501;
}
.Clientes .caja p {
  margin: -2px 0 0 0;
  font-size: clamp(20px, 1.2vw, 30px);
  text-transform: uppercase;
  font-weight: 200;
}
/* PNG pegado a caja cuatro */
.Clientes .caja.cuatro .png {
  position: absolute;
  right: -40%;
  top: 50%;
  transform: translateY(-50%);
  width: 47%;
  height: auto;
  z-index: 1;
}
/* Imágenes adicionales */
.Clientes .container img.web_texto {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}
.Clientes .caja h2 {
    overflow: hidden;
    height: 1.2em;
    position: relative;
}
.counter-wrapper {
    display: inline-block;
    overflow: hidden;
    height: 1.2em;
    position: relative;
    vertical-align: bottom;
}
.counter-number {
    display: inline-block;
    opacity: 0;
}
/* Delays escalonados para cada caja */
.Clientes .caja h2 {
    overflow: hidden;
    height: 1.2em;
    position: relative;
}
.counter-wrapper {
    display: inline-block;
    overflow: hidden;
    height: 1.2em;
    position: relative;
    vertical-align: bottom;
}
.counter-number {
    display: inline-block;
    opacity: 0;
}
/* Clientes */




/* Seo */
.Seo .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  max-width: 1450px;
}

.Seo .png.dos, .Seo .texto {
  position: relative;
  width: 50%;
  max-width: 60%;
}

.Seo .png.dos {
  width: auto;
  height: 75%;
  animation: levitar_x 3s ease-in-out infinite;
}
/* Seo */





/* Seo2 */
.Seo2 .container{
  height: 100%;
  position: absolute;
  align-content: center;
  margin-left: 10%;
  width: 40%;
  max-width: 900px;
}
.Seo2 .seo_texto{
  width: 100%;
}
.texto_flotando{
  position: absolute;
  right: -100%;
  top: 35%;
  animation: zoom 3s ease-in-out infinite;
}
/* Seo2 */




/*Redes*/
.Redes .container{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
  max-width: 1450px;
}

.Redes .redes-wrapper{
  position: relative;
  width: 50%;
  max-width: 60%;
}

.Redes .redes{
  display: block;
  position: absolute;
  width: 58%;
  z-index: 2;
  top: -339px;
  height: 736px;
  left: 21%;
}

.Redes .video{
  position: absolute;
  top: 50%;
  border-radius: 50px 50px 0px 0px;
  left: 50%;
  width: 53%;
  aspect-ratio: 9 / 16;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: contain;
}
/*Redes*/




/* Redes2 */
.Redes2 .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 60px;
  flex-direction: row-reverse;
}
.Redes2 .contenedor{
  display: flex;
  justify-content: center;
}
.Redes2 .box{
  height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1459px;
  margin: 0 auto;
}
.Redes2 .texto{
  width: 100%;
  max-width: 700px;
}

.Redes2 .opciones-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columnas */
  grid-auto-rows: auto;
  gap: 20px;
  justify-items: center;
  align-items: center;
  
}
.Redes2 .opciones{
  width: 100%;
  max-width: 300px;
  transform: scale(1);
  transition: 0.3s ease-in-out;
}

.Redes2 .box_texto{
  display: flex;
  justify-content: center;
}

.Redes2 .opciones:hover{
  transform: scale(1.03);
  transition: 0.3s ease-in-out;
}

/* Redes 2*/




/* Videos */
.Videos .container{
    height: 100%;
    position: absolute;
    align-content: center;
    margin-left: 12%;
    width: 40%;
    max-width: 900px;
}
.Videos .video_texto{
  width: 100%;
}
/* Videos */



/* Videos */

.Videos2 .container{
  height: 100%;
  display: flex;
  align-items: center;
  margin: 0 auto;
  max-width: 1450px;
  width: 100%;
}

/* Box1 izquierda, Box2 derecha */
.Videos2 .box1{
    flex: 1;
    padding-right: 40px;
    height: 100%;
    align-content: center;
}

.Videos2 .box2{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

/* Texto de la izquierda */
.Videos2 .video_texto{
  width: 100%;
  margin-left: 6%;
  max-width: 900px;
}

/* Cada item de vídeo (marco + imagen) */
.Videos2 .video-item{
  width: 100%;
  max-width: 450px;
  text-decoration: none;
}

/* Contenedor marco + vídeo */
.Videos2 .video-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* ajusta a la forma de tu marco */
}

/* Marco siempre encima */
.Videos2 .marco_video{
  position: absolute;
  inset: 0;
  width: 100%;
  
  object-fit: cover;
  z-index: 2;
}

/* Imagen del vídeo debajo, ajustada */
.Videos2 .opciones{
  position: absolute;
  inset: 8%;
  width: 95%;
  height: 111%;
  left: 3%;
  top: 4%;
  object-fit: cover;
  z-index: 1;
  border-radius: 8px;
}

/* Botón debajo de las dos imágenes */
.Videos2 .video-boton{
  margin-top: 10px;
}

.Videos2 .video-boton .video_texto{
  max-width: 250px;
}

.Videos2 .foto_boton{
  transform: scale(1);
  transition: 0.3s ease-in-out;
}
.Videos2 .foto_boton:hover{
  transform: scale(1.05);
  transition: 0.3s ease-in-out;
}



/* ===================== */
/* Popup de vídeo global */
/* ===================== */

.video-modal{
  position: fixed;
  inset: 0;
  display: none;              /* oculto por defecto */
  align-items: center;
  justify-content: center;
  z-index: 9999;              /* por encima de fullpage/menu */
}

.video-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.8);
}

.video-modal-content{
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 1000px;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

.video-modal-close{
  position: absolute;
  top: 8px;
  right: 16px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  z-index: 2;
}

/* Wrapper 16:9 para iframe/video */
.video-modal-iframe-wrapper{
  position: relative;
  width: 100%;
  padding-top: 56.25%;        /* 16:9 */
}

.video-modal-iframe-wrapper iframe,
.video-modal-iframe-wrapper video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}




/* Videos */



/* IA */
.IA .web_texto{
  max-width: 640px;
  width: 35%;
  left: -4%;
}
.IA .container{
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.IA .png{
  animation: levitar 3s ease-in-out infinite;
  height: 100%;
  margin-left: -40px;
  width: auto;
  max-height: 85%;
}
/* IA */


/* IA2 */
.IA2 .container{
    height: 100%;
    position: absolute;
    align-content: center;
    margin-left: 12%;
    width: 40%;
    max-width: 900px;
}
.IA2 .web_texto{
  width: 100%;
}
.IA2 .net{
  width: 20%;
  position: absolute;
  display: flex;
  flex-direction: column;
  bottom: 6%;
  margin: 0 auto;
  left: 105%;
  animation: levitar 3s ease-in-out infinite;
}
.net .cabeza{
  position: absolute;
  z-index: 2;
  margin-top: -57%;
  width: 100%;
  animation: cabeza 6s ease-in-out infinite;
}
.IA2 .sombra {
  position: absolute;
  bottom: 1%;
 
  width: 35%;
  animation: sombra 3s ease-in-out infinite;
  transform-origin: center center;
  z-index: 1;
}

/* Animaciones */
@keyframes levitar {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px); /* sube 15px */
  }
}
@keyframes sombra {
  0%, 100% {
    transform: translateY(-15);
    transform: scale(1);
  }
  50% {
    transform: translateY(0); /* sube 15px */
    transform: scale(0.5);
  }
}
@keyframes cabeza {
  0%, 100% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(0deg); /* sube 15px */
  }
}

/* IA2 */

/* Marcas */
.Marcas .container{
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  max-width: 1450px;
}
.Marcas .png{
  width:  100%;
  height: auto;
}
/* Marcas */

/* Podcast */
.Podcast .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 60px;
}

.Podcast .box1 {
  position: relative;
  width: 50%;
  left: -15%;
  max-width: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Podcast .marco {
  position: absolute;
  width: 210%;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.Podcast .youtube-video {
  position: absolute;
  width: 140%;
  aspect-ratio: 16 / 9;
  z-index: 2;
  border-radius: 8px;
}

.Podcast .box2 {
  margin-right: -21%;
  width: 40%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
}

.Podcast .box2 .texto {
  width: 100%;
  height: auto;
}

.Podcast .box2 .boton {
  width: 100%;
  max-width: 480px;
  margin-top: 25px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.Podcast .box2 .boton:hover {
  transform: scale(1.05);
}
.ytp-chrome-top-buttons{
  display: none !important;
}

/* Podcast */





/* Footer */
.Footer .contenedor {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Footer .container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-width: 80vw;      /* ancho máximo relativo a pantalla */
}

/* bloque superior: logo + contacto */
.Footer .bloque{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

/* logo izquierda */
.Footer .box1{
  display: flex;
  justify-content: flex-end;
}
.Footer .logo{
  width: 50vw;
  max-width: 360px;
  height: auto;
}

/* datos de contacto derecha (en columna) */
.Footer .box2{
  display: flex;
  flex-direction: column;
  gap: 1.5vw;           /* separación proporcional */
}

.Footer .contacto-item .opciones{
    width: 60vw;
    max-width: 310px;
    height: auto;
}

/* redes abajo centradas */
.Footer .redes{
  width: 100%;
  display: flex;
  align-items: center;
  margin: 3vh auto 0;
  gap: 2vw;
  justify-content: center;
}

.Footer .opcion_redes{
  
  height: auto;
}
/* Footer */













/* ===================================================================
MENÚ LATERAL - SISTEMA OPTIMIZADO
================================================================ */

.degradado {
  height: 100%;
  width: 20%;
  z-index: 2;
  right: 0;
  position: fixed;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

#menuContainer:hover .degradado {
  opacity: 1;
}

#menuContainer {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 250px;
  height: 100%;
  cursor: pointer;
  z-index: 9999;
  align-content: center;
}

#menuLateral {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 30px;
  position: relative;
  float: right;
}

#menuLateral li {
  margin: 15px 0;
  position: relative;
  width: 30px;
  height: 30px;
}

#menuLateral li a {
  display: block;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
  pointer-events: all;
  z-index: 10;
}

#menuLateral li p {
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  color: white;
  font-size: 16px;
  opacity: 1;
  transition: all 0.3s ease;
  white-space: nowrap;
  pointer-events: auto;
}

#menuLateral li.active p {
  font-weight: bold;
}

#menuLateral li.active a {
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.9);
  right: 5px;
}

#menuContainer:hover #menuLateral li.active p {
  font-weight: bold;
  font-size: 16px;
}

/* HOVER: Punto y texto se agrandan igual que .active */
#menuLateral li:hover a {
  width: 20px !important;
  height: 20px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8) !important;
  right: 5px !important;
}

#menuContainer:hover #menuLateral li:hover p {
  font-weight: bold;
  font-size: 16px;
}

.degradado {
  position: absolute;
  top: 0;
  right: -30px;
  bottom: 0;
  width: 220px;
  height: 100%;
  transition: opacity 0.5s ease-in-out;
  z-index: 5;
}





/* ===================================================================
Blur Menu
================================================================ */

/* BLUR DEGRADADO PARA EL MENÚ */
#menuContainer::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 100%;

  background: linear-gradient(
    to left, 
    rgb(0 0 0 / 67%) 0%, 
    rgb(0 0 0 / 45%) 30%, 
    rgba(0, 0, 0, 0.1) 95%, 
    transparent 100%);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  /* Máscara también de derecha a izquierda */
  /* mask-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.8) 30%,
    rgba(0, 0, 0, 0.3) 60%,
    transparent 100%
  ); */
  -webkit-mask-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 1) 54%,
    rgba(0, 0, 0, 0.8) 65%,
    rgba(0, 0, 0, 0.3) 83%,
    transparent 100%
  );
  
  pointer-events: none;
    z-index: -1;
  }
  #menuContainer::before {
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  #menuContainer.blur-active::before {
    opacity: 1;
  }



  #menuContainer.color-agencia::before {
    background: linear-gradient(
      to left, 
      rgb(255 128 0 / 67%) 0%, 
      rgb(255 128 0 / 45%) 30%, 
      rgba(255, 128, 0, 0.1) 95%, 
      transparent 100%
    );
  }
  
  #menuContainer.color-webs::before {
    background: linear-gradient(
      to left, 
      rgb(255 128 0 / 67%) 0%, 
      rgb(255 128 0 / 45%) 30%, 
      rgba(255, 128, 0, 0.1) 95%, 
      transparent 100%
    );
  }
  #menuContainer.color-seo::before {
    background: linear-gradient(
      to left, 
      rgb(255 128 0 / 67%) 0%, 
      rgb(255 128 0 / 45%) 30%, 
      rgba(255, 128, 0, 0.1) 95%, 
      transparent 100%
    );
  }
  

  #menuContainer.color-marketing::before {
    background: linear-gradient(
      to left, 
      rgb(255 64 119) 0%, 
      rgba(255, 0, 136, 0.45) 30%, 
      rgba(255, 0, 162, 0.1) 95%, 
      transparent 100%
    );
  } 

  #menuContainer.color-redes::before {
    background: linear-gradient(
      to left, 
      rgb(255 64 119) 0%, 
      rgba(255, 0, 136, 0.45) 30%, 
      rgba(255, 0, 162, 0.1) 95%, 
      transparent 100%
    );
  } 
  #menuContainer.color-ia2::before {
        background: linear-gradient(
          to left,
          rgb(69 182 166) 0%,
          rgb(62 181 164) 30%, 
          rgb(47 176 157) 95%, 
          transparent 100%);
  } 
/* ===================================================================
Blur Menu
================================================================ */





/* ===================================================================
   COLORES POR SECCIÓN - OPTIMIZADO
   ================================================================ */

/* Sistema base: se aplica filter y color juntos */
#menuContainer[class*='color-'] #menuLateral li a,
#menuContainer[class*='color-'] #menuLateral li p {
  transition: all 0.3s ease;
}

/* Presentación - Rosa */
#menuContainer.color-presentacion #menuLateral li a {
  background: #f95450;
  filter: none;
}
#menuContainer.color-presentacion #menuLateral li p {
  color: #f95450;
  filter: none;
}

/* Agencia - Blanco con sombra */
#menuContainer.color-agencia #menuLateral li a {
  background: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}
#menuContainer.color-agencia #menuLateral li p {
  color: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}

/* Trayectoria - Blanco sin sombra */
#menuContainer.color-trayectoria #menuLateral li a,
#menuContainer.color-trayectoria #menuLateral li p {
  filter: none;
}
#menuContainer.color-trayectoria #menuLateral li a {
  background: #ffffff;
}
#menuContainer.color-trayectoria #menuLateral li p {
  color: #ffffff;
}

/* Equipo - Blanco sin sombra */
#menuContainer.color-equipo1 #menuLateral li a {
  background: #ffffff;
  filter: none;
}
#menuContainer.color-equipo1 #menuLateral li p {
  color: #ffffff;
  filter: none;
}

/* Instalaciones - Blanco con sombra */
#menuContainer.color-instalaciones #menuLateral li a {
  background: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}
#menuContainer.color-instalaciones #menuLateral li p {
  color: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}

/* Servicios - Blanco con sombra */
#menuContainer.color-servicios #menuLateral li a {
  background: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}
#menuContainer.color-servicios #menuLateral li p {
  color: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}

/* Marketing - Blanco con sombra */
#menuContainer.color-marketing #menuLateral li a {
  background: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}
#menuContainer.color-marketing #menuLateral li p {
  color: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}

/* Webs - Blanco con sombra */
#menuContainer.color-webs #menuLateral li a {
  background: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}
#menuContainer.color-webs #menuLateral li p {
  color: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}

/* Tiendas - Rosa */
#menuContainer.color-tiendas #menuLateral li a {
  background: #f95450;
  filter: none;
}
#menuContainer.color-tiendas #menuLateral li p {
  color: #f95450;
  filter: none;
}

/* Clientes - Blanco con sombra */
#menuContainer.color-clientes #menuLateral li a {
  background: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}
#menuContainer.color-clientes #menuLateral li p {
  color: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}

/* SEO - Blanco con sombra */
#menuContainer.color-seo #menuLateral li a {
  background: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}
#menuContainer.color-seo #menuLateral li p {
  color: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}

/* Redes - Blanco con sombra */
#menuContainer.color-redes #menuLateral li a {
  background: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}
#menuContainer.color-redes #menuLateral li p {
  color: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}

/* Videos - Blanco con sombra */
#menuContainer.color-videos #menuLateral li a {
  background: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}
#menuContainer.color-videos #menuLateral li p {
  color: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}

/* Videos2 - Naranja */
#menuContainer.color-videos2 #menuLateral li a {
  background: #ff870f;
  filter: none;
}
#menuContainer.color-videos2 #menuLateral li p {
  color: #ff870f;
  filter: none;
}

/* IA - Verde azulado */
#menuContainer.color-ia #menuLateral li a {
  background: #00B795;
  filter: none;
}
#menuContainer.color-ia #menuLateral li p {
  color: #00B795;
  filter: none;
}

/* IA2 - Blanco con sombra */
#menuContainer.color-ia2 #menuLateral li a {
  background: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}
#menuContainer.color-ia2 #menuLateral li p {
  color: #ffffff;
  filter: drop-shadow(1px 1px 1px rgba(48, 48, 48, 0.4));
}

/* Marcas - Naranja */
#menuContainer.color-marcas #menuLateral li a {
  background: #ff9501;
  filter: none;
}
#menuContainer.color-marcas #menuLateral li p {
  color: #ff9501;
  filter: none;
}

/* Podcast - Rojo */
#menuContainer.color-podcast #menuLateral li a {
  background: #ff424c;
  filter: none;
}
#menuContainer.color-podcast #menuLateral li p {
  color: #ff424c;
  filter: none;
}

/* Footer - Rojo */
#menuContainer.color-footer #menuLateral li a {
  background: #ff424c;
  filter: none;
}
#menuContainer.color-footer #menuLateral li p {
  color: #ff424c;
  filter: none;
}

/* Colores por sección */
/* MENÚ LATERAL */









/* AVISO DE ORIENTACIÓN */
#orientationWarning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  z-index: 999999;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

#orientationWarning.active {
  display: flex;
}

.warning-content {
  text-align: center;
  color: white;
  max-width: 500px;
  animation: fadeInScale 0.5s ease-out;
}

.rotate-icon {
  width: 120px;
  height: 120px;
  margin: 0 auto 30px;
  animation: rotate360 2s ease-in-out infinite;
  filter: brightness(0) invert(1);
}

.warning-content h2 {
  font-size: clamp(24px, 5vw, 36px);
  margin-bottom: 20px;
  font-weight: 600;
  color: #ffffff;
}

.warning-content p {
  font-size: clamp(16px, 3vw, 18px);
  line-height: 1.6;
  margin-bottom: 15px;
  color: #cccccc;
}

.device-message {
  margin-top: 30px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  border-left: 4px solid #ff0088;
  font-size: clamp(14px, 2.5vw, 16px);
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rotate360 {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(90deg);
  }
}

/* Ocultar el contenido principal cuando el aviso está activo */
body.orientation-locked #fullpage,
body.orientation-locked #menuContainer {
  display: none;
}


/* AVISO DE ORIENTACIÓN */