/* Estilo básico del navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1); /* Fondo semitransparente */
    backdrop-filter: blur(10px); /* Efecto de desenfoque para el vidrio */
    transition: background-color 0.3s, top 0.3s;
    z-index: 1000;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  /* Estilo cuando el navbar cambia de color */
  .navbar.scrolled {
    background-color: #000000; /* Fondo oscuro cuando se hace scroll */
    backdrop-filter: blur(0px); /* Efecto de desenfoque menor cuando se hace scroll */
  }
  
  /* Cambiar color de los enlaces dentro de la barra de navegación, excepto .navlink-2 */
  .navbar.scrolled a:not(.navlink-2, .navlink, .tab-menu), /* Enlaces fuera del dropdown y .navlink-2 */
  .navbar.scrolled .navbar .brxe-dropdown { /* Botón del dropdown */
    color: #ffffff !important; /* Cambiar color de los enlaces y botones a blanco */
  }
  
  /* Cambiar el color del icono dentro del botón de dropdown */
  .navbar.scrolled .navbar .brxe-dropdown .icon {
    filter: invert(1) hue-rotate(180deg) !important; /* Invertir el color del icono del dropdown */
  }
  
  /* Estilo para la imagen */
  .navbar.scrolled .image-inverted {
    filter: invert(1) hue-rotate(180deg); /* Invierte los colores y ajusta el matiz de la imagen */
  }
  
  /* Estilo cuando el navbar se oculta */
  .navbar.hidden {
    top: -100px; /* Se mueve fuera de la pantalla */
  }
  
  /* Estilo inicial del dropdown */
/* Estilo inicial del dropdown */
.dropdown span,
.dropdown button {
  color: black; /* Color de texto e iconos inicial (negro) */
  transition: color 0.3s ease; /* Transición suave para el cambio de color */
}
.dropdown{
    background-color: transparent;
}
/* Cambiar el color de la tipografía y los iconos a blanco cuando se haya alcanzado los 100vh */
.dropdown.scrolled span:not(.navlink-2):not(.navlink):not(.tab):not(.tab-menu span),
.dropdown.scrolled button :not(.navlink-2):not(.navlink):not(.tab):not(.tab-menu) {
  color: white !important;  /* Color de texto e iconos cambiado a blanco */
}

  
.title__integraciones em{
    font-family: "mori",sans-serif;
    font-optical-sizing: auto;
  font-weight: 400; 
  font-size:48px !important;
  background:#ff9e0d;
  padding: 8px 16px 6px 16px;
  border-radius:4px;
  color:#000000;
  margin-bottom: 0px !important;
}
.gsap-button {
    font-family: inherit; 
    max-width: 350px!important;
    display: inline-flex;
    justify-content: center;
    position: relative;
    overflow: hidden; 
    padding: 16px 32px;
    font-size: 16px;
    background-color: transparent; 
    color: #000000;
    border: 2px solid #000000; 
    border-radius: 100px 100px 100px 100px; 
    cursor: pointer;
    white-space: nowrap;
    z-index: 1; 
    transition: color 0.2s ease, border-color 0.2s ease;
}

/* Clase específica para el texto del botón */
.gsap-button-text {
    position: relative; /* Asegura que el texto esté posicionado correctamente */
    z-index: 3; /* Siempre por encima del círculo */
    pointer-events: none; /* Evita que el texto interfiera con los eventos del mouse */
    transition: transform 0.2s ease, filter 0.2s ease; /* Transición para el cambio de color con filtro */
}

/* Estilo del círculo */
.hover-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px; /* Tamaño inicial pequeño */
    height: 10px; /* Tamaño inicial pequeño */
    background:linear-gradient(90deg, #414345, #000000);
    ; /* Color negro para el relleno */
    border-radius: 100px 0 100px 100px; /* Forma circular */
    pointer-events: none; /* No interferir con los eventos del mouse */
    transform: translate(-50%, -50%) scale(0); /* Posición inicial fuera de vista */
    opacity: 0; /* Invisible inicialmente */
    z-index: 2; /* Asegura que el círculo esté detrás del texto */
    transition: transform 0.1s ease, opacity 0.1s ease; /* Animación más rápida */
}

.button__card {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 16px;
    background: none;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .button__card .text {
    font-weight: 400;
    color: #000000;
    transition: color 0.4s cubic-bezier(0.8, 0, 0.2, 1), 
                font-weight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .button__card .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #000000;
    background: transparent;
    padding: 8px;
    transition: background-color 0.4s, 
                transform 0.4s, 
                color 0.4s, 
                padding 0.4s;
    will-change: transform, background-color, padding, color;
  }
  
  .button__card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: #000000;
    transition: width 0.4s;
    z-index: -1;
  }
  
  .button__card:hover .text {
    color: #e0e0e0;
    font-weight: 600;
  }
  
  .button__card:hover .icon {
    transform: rotate(-36deg);
    color: #000000;
    background: #e0e0e0;
    padding: 8px 12px;
  }
  
  .button__card:hover::after {
    width: 100%;
    left: 0;
    right: auto;
  }
  
  .button__card--contrast {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 16px;
    background: none;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .button__card--contrast .text {
    font-weight: 400;
    color: #e0e0e0;
    transition: color 0.4s cubic-bezier(0.8, 0, 0.2, 1),
                font-weight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .button__card--contrast .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #e0e0e0;
    background: transparent;
    padding: 8px;
    transition: background-color 0.4s,
                transform 0.4s,
                color 0.4s,
                padding 0.4s;
    will-change: transform, background-color, padding, color;
  }
  
  .button__card--contrast::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #ff5722, #e65100);
    transition: width 0.4s;
    z-index: -1;
  }
  
  .button__card--contrast:hover .text {
    color: #000000;
    font-weight: 600;
  }
  
  .button__card--contrast:hover .icon {
    transform: rotate(-36deg);
    color: #000000;
    background: #e0e0e0;
    padding: 8px 12px;
  }
  
  .button__card--contrast:hover::after {
    width: 100%;
    left: 0;
    right: auto;
  }
  
#fluxwebs-canvas {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

/* Contenedor principal del fondo */
.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden; /* Asegura que los elementos no se salgan del contenedor */
    z-index: -1; /* Coloca el fondo detrás del contenido principal */
    background: linear-gradient(62deg, #FBAB7E 0%, #ff7b00 100%); /* Gradiente de fondo */
    filter: brightness(1) contrast() saturate(); /* Ajusta el brillo, contraste y saturación */
}

/* Elementos flotantes dentro del fondo */
.bg-element {
    position: absolute;
    width: 60vw; /* Tamaño de los elementos */
    height: 60vw;
    background: rgba(255, 255, 255, 0.2); /* Color blanco translúcido */
    border-radius: 50%; /* Forma circular */
    filter: blur(20px) brightness(1.2) contrast(1.3); /* Ajusta el desenfoque y el brillo */
    mix-blend-mode: screen; /* Mezcla los colores para que sean más visibles */
    background-image: url('https://www.transparenttextures.com/patterns/asfalt-dark.png'); /* Textura de ruido */
    background-size: cover; /* Asegura que la textura cubra todo el elemento */
    animation: float 10s infinite ease-in-out; /* Animación de movimiento */
    opacity: 0.4; /* Aumenta la visibilidad */
}

/* Animación para los elementos flotantes */
@keyframes float {
    0% {
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(-100px) translateX(100px);
    }
    100% {
        transform: translateY(0) translateX(0);
    }
}

/* Animación personalizada para el nuevo elemento */
@keyframes roam {
    0% {
        top: 0;
        left: 0;
        transform: scale(1);
    }
    25% {
        top: 20%;
        left: 100%;
        transform: scale(1.2);
    }
    50% {
        top: 80%;
        left: 60%;
        transform: scale(1.5);
    }
    75% {
        top: 20%;
        left: 10%;
        transform: scale(1.2);
    }
    100% {
        top: 0;
        left: 0;
        transform: scale(1);
    }
}

/* Variaciones para diferentes elementos */
.bg-element:nth-child(1) {
    top: 10%;
    left: 0%;
    animation-duration: 12s; /* Movimiento lento */
}

.bg-element:nth-child(2) {
    top: 20%;
    left: 35%;
    animation-duration: 15s; /* Movimiento más lento */
}

.bg-element:nth-child(3) {
    top: 70%;
    left: 80%;
    animation-duration: 18s; /* Movimiento más lento */
}

.bg-element:nth-child(4) {
    top: 50%;
    left: 10%;
    animation-duration: 20s; /* Movimiento más lento */
}

/* Nuevo elemento con movimiento personalizado */
.bg-element:nth-child(5) {
    width: 20vw;
    height: 20vw;
    top: 0;
    left: 0;
    animation: roam 40s infinite ease-in-out; /* Movimiento personalizado */
    background: rgba(124, 124, 124, 0.815); /* Aumentar la visibilidad del aro */
    border: 4px solid rgba(255, 255, 255, 0.753); /* Añadir un borde difuminado */
    filter: blur(15px); /* Ajustar el desenfoque */
    opacity: 0.8; /* Más visible */
}

.bg2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden; /* Asegura que los elementos no se salgan del contenedor */
    z-index: -1; /* Coloca el fondo detrás del contenido principal */
    background: linear-gradient(62deg, #2c2c2c 0%, #1a1a1a 100%); /* Gradiente oscuro */
    filter: brightness(0.8) contrast(1.2) saturate(0.8); /* Ajusta el brillo, contraste y saturación */
}

/* Elementos flotantes dentro del fondo bg2 */
.bg2-element {
    position: absolute;
    width: 40vw; /* Tamaño de los elementos */
    height: 40vw;
    background: rgba(70, 70, 70, 0.3); /* Gris más claro */
    border-radius: 50%; /* Forma circular */
    filter: blur(20px) brightness(1.2) contrast(2); /* Mayor brillo y contraste */
    mix-blend-mode: multiply; /* Mezcla los colores para un efecto más oscuro */
    background-image: url('https://www.transparenttextures.com/patterns/asfalt-dark.png'); /* Textura de ruido */
    background-size: cover; /* Asegura que la textura cubra todo el elemento */
    animation: float2 12s infinite ease-in-out; /* Nueva animación de movimiento */
    opacity: 0.6; /* Más visible */
}

/* Nueva animación para los elementos flotantes en bg2 */
@keyframes float2 {
    0% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-200px) translateX(-200px); /* Movimiento más amplio */
    }
    50% {
        transform: translateY(300px) translateX(300px); /* Movimiento más amplio */
    }
    75% {
        transform: translateY(-200px) translateX(200px); /* Movimiento más amplio */
    }
    100% {
        transform: translateY(0) translateX(0);
    }
}


/* Elementos flotantes dentro del fondo bg2 */
.bg2-element {
    position: absolute;
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8); /* Gris más brillante */
    filter: blur(20px) brightness(2) contrast(3); /* Mayor brillo y contraste */
    mix-blend-mode: screen; /* Mezcla mejor con el fondo oscuro */
    background-image: url('https://www.transparenttextures.com/patterns/asfalt-dark.png');
    background-size: cover;
    animation: float2 12s infinite ease-in-out;
    opacity: 0.85; /* Más opaco para una mayor visibilidad */
}

/* Variaciones para diferentes elementos en bg2 */
.bg2-element:nth-child(1) {
    top: 5%;
    left: 10%;
    animation-duration: 14s;
    background: rgba(255, 255, 255, 1); /* Más blanco para mayor visibilidad */
    filter: blur(15px) brightness(2.2) contrast(3.2);
}

.bg2-element:nth-child(2) {
    top: 30%;
    left: 50%;
    animation-duration: 16s;
    background: rgba(240, 240, 240, 0.65);
    filter: blur(18px) brightness(2.4) contrast(3.5);
}

.bg2-element:nth-child(3) {
    top: 60%;
    left: 70%;
    animation-duration: 18s;
    background: rgba(230, 230, 230, 0.7);
    filter: blur(20px) brightness(2.5) contrast(3.8);
}

.bg2-element:nth-child(4) {
    top: 40%;
    left: 20%;
    animation-duration: 20s;
    background: rgba(220, 220, 220, 0.75);
    filter: blur(25px) brightness(2.6) contrast(4);
}

/* Elemento especial con roam2 */
.bg2-element:nth-child(5) {
    width: 20vw;
    height: 20vw;
    top: 10%;
    left: 10%;
    animation: roam2 35s infinite ease-in-out;
    background: rgba(255, 255, 255, 0.3);
    border: 8px solid rgba(255, 255, 255, 0.8);
    filter: blur(15px) brightness(2.7) contrast(4.2);
    opacity: 0.95; /* Más visible */
    z-index: 5;
}


/* Nueva animación personalizada para el child 5 en bg2 */
@keyframes roam2 {
    0% {
        top: 10%;
        left: 10%;
        transform: scale(1);
    }
    25% {
        top: 40%;
        left: 90%;
        transform: scale(1.4);
    }
    50% {
        top: 80%;
        left: 60%;
        transform: scale(1.8);
    }
    75% {
        top: 20%;
        left: 20%;
        transform: scale(1.4);
    }
    100% {
        top: 10%;
        left: 10%;
        transform: scale(1);
    }
}

/* Contenedor principal */
.parent {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px !important;
  height: 500px!important;
  background: transparent;
   
}

/* Elemento "arter" */
.arter {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
 
  pointer-events: none; /* Evita que interfiera con el mouse */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: left 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55),
              top 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.texto-animado {
  overflow: hidden;
  display: inline-block;
  height: auto;
}

.tarjeta-animada {
  position: relative;
  background: #000;
  overflow: hidden;
  margin-bottom: 2rem;
  height: 0;
  min-height: 0;
  max-height: 250px;
  transition: background 0.3s;
}

/* Barrido negro encima del contenido */
.tarjeta-animada::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 0%;
  background: #000;
  z-index: 2;
  opacity: 1;
  transition:
    height 1.2s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.2s linear 1.2s;
  pointer-events: none;
}

/* Cuando termina el barrido, se desvanece */
.tarjeta-animada.barrido-completo::before {
  height: 100%;
  opacity: 0;
}

/* El contenido de la tarjeta debe estar debajo del barrido */
.tarjeta-animada > * {
  position: relative;
  z-index: 1;
  color: #222; /* Color inicial del texto */
  transition: color 0.1s;
}

/* Texto blanco cuando el barrido lo cubre */
.tarjeta-animada.barrido-txt-blanco > * {
  color: #fff !important;
}

/* Fondo negro definitivo */
.tarjeta-animada.barrido-completo {
  background: #000;
  color: #fff;
}

.tarjetas-contenedor {
  width: 50vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.tarjeta-animada {
  position: relative;
  background: #ececec;
  overflow: hidden;
  padding: 1rem !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  margin-bottom: 2rem;
  height: 0; /* Importante para la animación */
  transition: background 0.3s;
  min-height: 0;
  max-height: 250px;
}

.tarjeta-animada::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 0%;
  background: #fff;
  z-index: 1;
  transition: height 1.2s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}

.tarjeta-animada.barrido-completo::before {
  height: 100%;
}

.marquee-container {
  width: 100vw; /* o el ancho que desees */
  overflow: hidden;
  white-space: nowrap;
}

.marquee-text {
  display: inline-block;
  font-size: 96px;
  font-weight: 400;
  text-transform: uppercase;
  color: #000;
  white-space: nowrap;
  will-change: transform;
}
.marquee-text em{
  display: inline-block;
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 96px;
  text-transform: none;
  color: #000 !important;
  white-space: nowrap;
  will-change: transform;
}