/* =========================================
   PALETA DE COLORES SOLUXPRO (BASADA EN LOGO REAL)
========================================= */
  :root {
      /* Color principal (Rojo Vino/Borgoña del logo) para botones y acentos */
      /*--main-color: #3f0810 !important;*/
      --main-color: #3d36f4 !important;

      /* Azul Noche/Marino Profundo para fondos principales */
      --color-one: #070540 !important;
      --color-two: #080921 !important;

      /* Gris Pizarra/Plomo para bloques secundarios y estructuras */
      --color-three: rgb(189, 189, 189) !important;
      --color-four: #333740 !important;
      /* Fondo del Footer */

      /* Gris Plata para textos resaltados, iconos y contrastes */
      --color-five: #dddbda !important;
      --color-six: #7e7d88 !important;

      /* Un fondo ultra oscuro para que los paneles SCADA sigan brillando */
      --color-seven: #050810 !important;

      /* Texto general en Gris Plata para que resalte sobre los fondos oscuros */
      --text-color: #dddbda !important;

      /* Color como marron */
      --color-brown: rgb(20, 20, 20);
  }

  /* Gradiente de la cabecera (Azul Noche a Rojo Vino) */
  .header-top {
      background: linear-gradient(to right, #070540 0%, #3f0810 100%) !important;
  }

  .fa-gears::before {
      content: "\f085";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
  }

  .fa-ruler::before {
      content: "\f546";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
  }

  .fa-microchip::before {
      content: "\f2db";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
  }

  @media only screen and (min-width: 991px) {
      .colum-stack {
          margin-top: -270px !important;
      }

  }

  /* Estilo General de la Sección Metodologia */
  .workflow-section {
      position: relative;
      padding: 80px 0px 50px;
      padding-bottom: 100px;
  }

  .workflow-inner {
      position: relative;
      padding: 40px 25px;
      border-radius: 12px;
      text-align: center;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 500ms ease;
      height: 100%;
      z-index: 1;
  }

  .workflow-inner:hover {
      background: rgba(var(--main-color-rgb), 0.05);
      border-color: var(--main-color);
      transform: translateY(-10px);
  }

  /* Número de paso en transparente */
  .step-number {
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 50px;
      font-weight: 900;
      color: rgba(255, 255, 255, 0.05);
      line-height: 1em;
  }

  /* Iconos con el color principal de tu marca */
  .workflow-inner .icon-box {
      position: relative;
      font-size: 40px;
      color: var(--main-color);
      margin-bottom: 25px;
      transition: all 500ms ease;
  }

  .workflow-inner:hover .icon-box {
      transform: scale(1.1) !important;
      text-shadow: 0 0 20px rgba(var(--main-color-rgb), 0.5) !important;
  }

  .workflow-inner h4 {
      color: var(--white-color);
      font-weight: 700;
      margin-bottom: 15px;
  }

  .workflow-inner p {
      color: var(--color-six);
      /* Color gris suave de tus textos */
      font-size: 16px;
      line-height: 1.6em;
  }

  /* Aplicar la animación a la flecha en pantallas grandes */
  @media (min-width: 992px) {
      .workflow-block:not(:last-child) .arrow {
          position: absolute;
          top: 50%;
          right: -15px;
          transform: translateY(-50%);
          font-size: 20px;
          color: var(--main-color);
          z-index: 10;
          animation: moveArrow 2s infinite ease-in-out;
      }
  }

  @media (max-width: 991px) {
      .workflow-block {
          margin-bottom: 30px;
      }

      .arrow {
          display: none;
      }
  }

  /* Animación de la flecha */
  @keyframes moveArrow {

      0%,
      100% {
          right: -15px;
          opacity: 0.5;
      }

      50% {
          right: -25px;
          opacity: 1;
      }
  }

  /* Blog de cuestionario */
  .accordion .acc-content .text {
      line-height: 1.8em !important;
      color: #b5b5b5 !important;
  }

  .accordion .acc-btn {
      font-weight: 600 !important;
      font-size: 18px !important;
      transition: all 300ms ease !important;
  }

  .accordion .acc-btn:hover {
      color: var(--main-color);
  }

  /* Imagen de ing */
  .cta-one_image-outer .image img {
      animation: swing-move 6s ease-in-out infinite;
  }

  @keyframes swing-move {
      0% {
          transform: translate(0, 0) rotate(0deg);
      }

      25% {
          transform: translate(5px, -10px) rotate(2deg);
      }

      50% {
          transform: translate(0, -15px) rotate(0deg);
      }

      75% {
          transform: translate(-5px, -10px) rotate(-2deg);
      }

      100% {
          transform: translate(0, 0) rotate(0deg);
      }
  }

  /* =========================================
   GLOW INDUSTRIAL (Reemplazo de pattern-3.png)
========================================= */
  .slider-one_pattern-three {
      /* Desactivamos la imagen anterior por si acaso quedó algo residual */
      background-image: none !important;

      /* Posición detrás de los paneles HMI */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      /* Centrado absoluto */
      z-index: 0;

      /* Forma y Color (Tu azul #3d36f4) */
      width: 600px;
      /* Tamaño del resplandor */
      height: 600px;
      background-color: #3d36f4;
      border-radius: 50%;

      /* El truco de la magia: Difuminado extremo y Opacidad */
      filter: blur(120px);
      /* Difumina los bordes hasta que parece una sombra de luz */
      opacity: 0.15;
      /* Aquí controlas la intensidad. 0.15 es sutil, 0.3 es fuerte */

      /* Animación de "respiración" suave (opcional pero muy SCADA) */
      animation: pulseGlow 4s infinite alternate ease-in-out;
  }

  /* Efecto de palpitación de energía */
  @keyframes pulseGlow {
      0% {
          opacity: 0.15;
          transform: translate(-50%, -50%) scale(0.9);
      }

      100% {
          opacity: 0.25;
          transform: translate(-50%, -50%) scale(1.1);
      }
  }

  /* Aseguramos que el contenido HMI esté por encima de la sombra de luz */
  .slider-one_image-outer {
      position: relative;
      z-index: 5;
  }

  /* =========================================
   BOT ASISTENTE ANIMADO (Call to Action)
========================================= */
  .slider-one_bot-indicator {
      margin-left: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      /* Espacio entre flecha y bot */
  }

  /* La Flecha que señala al botón */
  .bot-arrow {
      color: #dddbda;
      /* Gris plata */
      font-size: 24px;
      /* Animación de empuje hacia la izquierda */
      animation: pointLeft 1.5s infinite ease-in-out;
  }

  @keyframes pointLeft {

      0%,
      100% {
          transform: translateX(0);
          opacity: 0.5;
          color: #dddbda;
      }

      50% {
          transform: translateX(-10px);
          opacity: 1;
          color: #f59e0b;
          /* Se pinta de rojo vino al empujar */
      }
  }

  /* La carcasa del Robot */
  .bot-core {
      width: 60px;
      height: 60px;
      background: #070832;
      /* Tu Azul Noche */
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #dddbda;
      /* Bot plata */
      font-size: 26px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
      position: relative;
      /* Animación de flotar en el aire */
      animation: floatBot 3s infinite ease-in-out;
  }

  /* Movimiento de levitación */
  @keyframes floatBot {

      0%,
      100% {
          transform: translateY(0px);
      }

      50% {
          transform: translateY(-8px);
      }
  }

  /* Parpadeo del LED */
  @keyframes botBlink {

      0%,
      20% {
          opacity: 0.3;
      }

      100% {
          opacity: 1;
      }
  }

  /* Efectos */
  /* =========================================
   ANIMACIÓN DE ENTRADA (WIDGETS HMI)
========================================= */
  /* 1. ESTADO INICIAL (Slide inactivo - Caja Oculta a la izquierda) */
  .slider-one .slider-one_graph {
      clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%) !important;
      transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1) !important;
  }

  /* 2. ESTADO FINAL (Slide Activo - Caja se revela de izq a derecha) */
  .slider-one .swiper-slide-active .slider-one_graph {
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
      transition-delay: 700ms !important;
  }

  /* BONUS: Hacemos lo mismo para el cuadrito pequeño de arriba (Velocidad/Temp) */
  .slider-one .slider-one_percentage {
      clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%) !important;
      transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1) !important;
  }

  .slider-one .swiper-slide-active .slider-one_percentage {
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
      transition-delay: 1000ms !important;
      /* Sale un poquito después que el PLC */
  }

  /* =========================================
   PORTADA A PANTALLA COMPLETA (100VH) - CENTRADO PERFECTO
========================================= */
  /* 1. Forzamos la altura en el contenedor principal */
  .slider-one {
      height: 100vh !important;
      min-height: 850px !important;
  }

  /* 2. Le decimos al carrusel que herede esa altura completa */
  .slider-one .main-slider,
  .slider-one .swiper-wrapper {
      height: 100% !important;
  }

  /* 3. Centramos el contenido de cada diapositiva */
  .slider-one .swiper-slide {
      height: 100% !important;
      display: flex !important;
      align-items: center !important;

      /* ¡El truco de magia! Le damos un "empujón" hacia abajo (padding) 
       del mismo tamaño de tu Header para que quede perfectamente centrado a la vista */
      padding-top: 180px !important;
  }

  /* 4. Evitamos que el contenedor se encoja */
  .slider-one .auto-container {
      width: 100% !important;
  }

  /* Ajuste de seguridad para pantallas pequeñas */
  @media (max-height: 850px) {
      .slider-one {
          height: auto !important;
          padding-bottom: 50px;
      }

      .slider-one .swiper-slide {
          height: auto !important;
          padding-top: 150px !important;
      }
  }

  /* =========================================
   AJUSTE PERFECTO PARA TELÉFONOS (MÓVILES)
========================================= */
  @media (max-width: 768px) {

      /* Reducimos el empujón superior porque el menú móvil es más pequeño */
      .slider-one .swiper-slide {
          padding-top: 60px !important;
          padding-bottom: 40px !important;
          /* Damos un respiro abajo */
          height: auto !important;
          /* Dejamos que crezca si el contenido apilado es muy largo */
          min-height: 100vh !important;
      }

      .slider-one {
          height: auto !important;
          min-height: 100vh !important;
      }

      /* Centramos el texto en móviles para que se vea más profesional */
      .slider-one_content-inner {
          text-align: center;
      }

      /* Centramos también los botones y el bot asistente en móviles */
      .slider-one_button {
          justify-content: center !important;
          margin-bottom: 40px;
          /* Separamos los botones del panel HMI de abajo */
      }
  }

  @media (max-width: 480px) {
      .slider-one {
          padding-bottom: 20px !important;
      }
  }

  /* =========================================
   CURVA DE TRANSICIÓN (Slider -> Servicios)
========================================= */

  /* =========================================
   CORTE DIAGONAL INDUSTRIAL (Slider -> Servicios)
========================================= */

  /* 1. Ocultamos cualquier curva o imagen vieja de la plantilla */
  .slider-one::before,
  .slider-one::after,
  .slider-one .shape {
      display: none !important;
  }

  /* 2. Le damos un corte geométrico estilo "placa de metal" */
  .services-one {
      /* Quitamos el border-radius para evitar curvas */
      border-radius: 0 !important;

      /* El láser: Corta la caja en diagonal (arranca abajo a la izq, sube a la derecha) */
      clip-path: polygon(0 6vw, 100% 0, 100% 100%, 0 100%) !important;

      /* Subimos la sección para que el corte tape el slider azul */
      margin-top: -6vw !important;
      position: relative;
      z-index: 10;

      /* Empujamos el texto hacia abajo para que respire */
      padding-top: 140px !important;
  }

  /* 3. Ajuste del ángulo para teléfonos celulares */
  @media (max-width: 768px) {
      .services-one {
          /* En celular hacemos el corte un poco más inclinado */
          clip-path: polygon(0 8vw, 100% 0, 100% 100%, 0 100%) !important;
          margin-top: -8vw !important;
          padding-top: 80px !important;
      }
  }

  /* =========================================
   APAGAR SOMBRAS DESBORDADAS EN MÓVILES
========================================= */
  @media (max-width: 768px) {

      /* Ocultamos las manchas de luz para que el corte diagonal sea de color sólido */
      .slider-one_pattern-two,
      .slider-one_pattern-three {
          display: none !important;
      }

      /* Por seguridad, forzamos a que nada se salga del slider */
      .slider-one {
          overflow: hidden !important;
      }
  }

  /* =========================================
   ICONOS DE SERVICIOS (Reemplazo de PNGs por FontAwesome)
========================================= */

  /* 1. Estilo para el Icono Principal */
  .service-block_two-icon i {
      font-size: 50px;
      /* Tamaño del icono */
      color: #3d36f4;
      transition: all 0.3s ease;
  }

  /* 2. Estilo para la "Marca de Agua" de fondo */
  .service-block_two-sideicon {
      background-image: none !important;
      /* Matamos la imagen vieja */
      position: absolute;
      right: -10px;
      bottom: -10px;
      z-index: 0;
  }

  .service-block_two-sideicon i {
      font-size: 120px;
      /* Lo hacemos gigante */
      /* Color Gris Plata con muchísima transparencia para que parezca sombra */
      color: rgba(126, 125, 136, 0.15);
      transition: all 0.5s ease;
  }

  /* 3. Efecto al pasar el mouse por encima de la tarjeta */
  .service-block_two-inner:hover .service-block_two-icon i {
      color: #3d36f4;
      /* El icono principal cambia a Azul Noche */
      transform: scale(1.1);
      /* Crece un poquito */
  }

  .service-block_two-inner:hover .service-block_two-sideicon i {
      color: rgba(211, 204, 205, 0.1);
      /* La marca de agua se tiñe de rojo vino suave */
      transform: scale(1.2) rotate(-5deg);
      /* Crece y se inclina sutilmente */
  }

  /* Aseguramos que el texto quede por encima de la marca de agua */
  .service-block_two-heading,
  .service-block_two-text {
      position: relative;
      z-index: 2;
  }

  /* =========================================
   ENTORNO INDUSTRIAL PARA EL ACTA
========================================= */

  /* Aseguramos que el contenedor sea el jefe de la posición */
  .about-one_tab-image {
      position: relative;
      z-index: 1;
      overflow: visible !important;
      /* Permitimos que los efectos "salgan" un poco */
  }

  /* Forzamos que la imagen original esté por ENCIMA de todo lo nuevo */
  .about-one_tab-image img {
      position: relative;
      z-index: 10;
      border: 2px solid rgba(255, 255, 255, 0.1);
      /* Borde sutil de panel */
      border-radius: 8px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
      /* Sombra proyectada real y fuerte */
  }

  /* ====== 1. EL RESPLANDOR DE ENERGÍA BLUE TECH ====== */
  /* Crea una "mancha" de luz azul detrás, dando profundidad */
  .industrial-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 120%;
      /* Más grande que la imagen */
      height: 120%;
      background: radial-gradient(circle, #3d36f4 0%, rgba(7, 5, 64, 0) 70%);
      opacity: 0.25;
      /* Muy suave */
      filter: blur(40px);
      /* Difuminado máximo */
      z-index: 2;
      /* Por detrás de la imagen */
  }

  /* ====== 2. LA PLACA DE ACERO MECANIZADA ====== */
  /* Simula una placa de metal con un patrón de panal industrial */
  /* ====== 2. LA PLACA MECANIZADA (Ajustada al Azul de la imagen) ====== */
  .industrial-plate {
      position: absolute;
      top: -15px;
      left: -15px;
      width: calc(100% + 30px);
      height: calc(100% + 30px);

      /* Patrón de puntos tecnológicos (estilo panel perforado) */
      background-image: radial-gradient(rgba(61, 54, 244, 0.15) 1px, transparent 1px);
      background-size: 15px 15px;
      border-radius: 12px;
      /* Borde brillante con tu azul eléctrico para fusionarse con la imagen */
      z-index: 3;
  }

  /* ====== 3. LOS ENGRANAJES DE AUTOMATIZACIÓN ====== */
  .industrial-gears {
      position: absolute;
      right: -25px;
      bottom: -25px;
      z-index: 4;
  }

  .industrial-gears i {
      font-size: 140px;
      /* Cambiamos el rojo por tu azul eléctrico translúcido para que combine */
      color: rgba(61, 54, 244, 0.15);
      transform: rotate(-15deg);
  }

  /* =========================================
   ILUMINACIÓN DE TESTIMONIOS (Glow Effect)
========================================= */

  /* Limpiamos la caja principal y le damos posición */
  .testimonial-one .inner-container {
      position: relative;
      background-image: none !important;
      /* Aseguramos que la imagen vieja muera */

      z-index: 1;
      overflow: hidden;
      /* Para que la luz no se salga de la caja */
  }

  /* Creamos el resplandor luminoso usando la pseudoclase ::before */
  .testimonial-one .inner-container::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      /* Qué tan ancha es la luz */
      height: 80%;
      /* Qué tan alta es la luz */

      /* Tu Azul Eléctrico como fuente de luz principal */
      background: radial-gradient(ellipse at center, rgba(65, 60, 212, 0.4) 0%, rgba(65, 60, 212, 0) 70%);

      /* Difuminado extremo para que parezca luz y no una mancha de pintura */
      filter: blur(80px);

      z-index: -1;
      /* Lo enviamos al fondo, detrás de los textos y tarjetas */
  }

  /* Ajuste opcional para darle un borde de "cristal" sutil a las tarjetas */
  .testimonial-block_one-inner {
      border: 1px solid rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(5px);
      /* Si los navegadores lo soportan, el fondo brillará a través */
  }



  /*1. VARIABLES Y FONDOS GLOBALES (Modo Oscuro) 
========================================= */
  /* Aplicamos el fondo oscuro a todas las secciones para que sea uniforme */
  .services-one,
  .about-one,
  .choose-one,
  .steps-one,
  .testimonial-one,
  .faq-one {
      background-color: var(--color-brown) !important;
  }

  .scada-section {
      background-color: #0b0f19;
      padding-top: 80px;
      padding-bottom: 120px;
  }

  /* Ajuste de márgenes responsivos (Grandes en PC, pequeños en móviles) */
  .about-one {
      padding-bottom: 90px;
  }

  .faq-one {
      padding-top: 110px;
  }

  .steps-one {
      padding-bottom: 100px;
  }

  @media (max-width: 768px) {

      /* En teléfonos, reducimos a la mitad esos márgenes gigantes */
      .about-one {
          padding-bottom: 40px;
      }

      .faq-one {
          padding-top: 50px;
      }

      .steps-one {
          padding-bottom: 50px;
      }
  }

  /* =========================================
   ALINEACIÓN RESPONSIVE: MÓVILES Y TABLETS
========================================= */

  @media (max-width: 991px) {

      /* --- SECCIÓN QUIÉNES SOMOS --- */
      .about-one .auto-container .row {
          display: flex;
          flex-direction: column-reverse;
          /* Pone el texto arriba y la imagen del acta abajo */
      }

      .about-one_content-outer {
          padding-left: 0 !important;
          margin-top: 40px;
          margin-bottom: 50px;
      }

      /* Centramos SOLO los títulos */
      .about-one_content-outer .sec-title {
          text-align: center;
      }

      /* Justificamos los párrafos para una lectura más formal */
      .about-one_content-outer p {
          text-align: justify;
          padding-left: 10px;
          padding-right: 10px;
      }

      /* Centramos las estrellitas de calidad */
      .about-one_options {
          justify-content: center;
          margin-top: 20px;
      }

      /* Centramos la imagen del acta y sus elementos industriales */
      .about-one_tab-outer {
          display: flex;
          justify-content: center;
          margin-left: 0 !important;
      }

      /* --- SECCIÓN STACK TECNOLÓGICO (STEPS) --- */
      .steps-one .sec-title,
      .steps-one .sec-title_heading {
          text-align: center !important;
      }

      .steps-one_button {
          text-align: center !important;
          float: none !important;
          margin-bottom: 40px;
      }

      .steps-one .colum-stack {
          margin-top: 0 !important;
      }

      .step-block_one-inner {
          padding: 30px 20px !important;
      }
  }

  /* =========================================
   AJUSTE DE ESCALA PARA HMI EN SLIDERS (MÓVIL)
   (Versión Corregida: Banda transportadora a salvo 🛡️)
========================================= */
  @media (max-width: 768px) {

      /* 1. Escalamos el contenedor principal */
      .slider-one .slider-one_image-outer {
          transform: scale(0.7);
          transform-origin: top center;
          margin-top: 40px !important;
          margin-bottom: -180px !important;
          width: 100% !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          gap: 20px !important;
      }

      /* 2. Apuntamos SOLO a los paneles grandes, dejando en paz las animaciones internas */
      .slider-one .hmi-mini-plc,
      .slider-one .hmi-dashboard,
      .slider-one .hmi-conveyor-stats,
      .slider-one .slider-one_graph,
      .slider-one .slider-one_percentage {
          left: 0 !important;
          right: 0 !important;
          top: 0 !important;
          bottom: 0 !important;
          position: relative !important;
          margin: 0 !important;
      }

      /* 3. Columna de imagen sin forzar la altura */
      .slider-one .slider-one_image-column {
          overflow: visible !important;
          display: block !important;
          min-height: auto !important;
          padding-bottom: 0 !important;
      }

      /* 4. Límite de ancho para el Dashboard */
      .slider-one .hmi-dashboard {
          max-width: 90vw !important;
      }
  }

  /* =========================================
   PARCHE DE ESPACIADO: PANTALLAS INTERMEDIAS (490px a 768px)
========================================= */
  @media (min-width: 490px) and (max-width: 768px) {
      .slider-one .slider-one_image-outer {
          /* Aumentamos el margen negativo para comernos el exceso de espacio fantasma en tablets pequeñas */
          margin-bottom: -260px !important;
      }
  }

  /* =========================================
   TEXTO CORTO PARA BOTÓN EN MÓVILES (Slider)
========================================= */
  @media (max-width: 490px) {

      /* 1. Ajustamos el tamaño físico del botón para que no estorbe */
      .slider-one .template-btn {
          padding: 10px 22px !important;
      }

      /* 2. Ocultamos el texto original "Solicitar Cotización" reduciendo su fuente a cero */
      .slider-one .template-btn .text-one,
      .slider-one .template-btn .text-two {
          font-size: 0 !important;
      }

      /* 3. Inyectamos la palabra corta "Cotizar" con el tamaño de letra correcto */
      .slider-one .template-btn .text-one::after,
      .slider-one .template-btn .text-two::after {
          content: "Cotizar";
          font-size: 15px !important;
      }
  }

  /* =========================================
   ESTILOS DE PANEL INDUSTRIAL PARA SWEETALERT
========================================= */
  .swal-tech-popup {
      border: 1px solid rgba(61, 54, 244, 0.4);
      /* Borde con tu azul corporativo */
      box-shadow: 0 0 25px rgba(61, 54, 244, 0.15) !important;
      /* Resplandor tecnológico */
      border-radius: 4px !important;
      /* Bordes más rectos, menos infantiles */
  }

  .swal-tech-title {
      font-family: 'Inter', sans-serif !important;
      text-transform: uppercase;
      font-size: 1.4rem !important;
      letter-spacing: 1px;
  }

  .swal-tech-btn {
      border-radius: 2px !important;
      font-weight: 600 !important;
      letter-spacing: 1px;
      text-transform: uppercase;
      box-shadow: 0 4px 15px rgba(61, 54, 244, 0.3);
      transition: all 0.3s ease;
  }

  .swal-tech-btn:hover {
      box-shadow: 0 6px 20px rgba(61, 54, 244, 0.6);
      transform: translateY(-2px);
  }

  /* ==================== BADGE "PRÓXIMAMENTE" EN MENÚ ==================== */
  .menu-item-coming-soon {
      position: relative;
  }

  .menu-item-coming-soon .disabled-link {
      position: relative !important;
      display: inline-block;
  }

  .menu-item-coming-soon .coming-soon-badge {
      position: absolute !important;
      top: -3px !important;
      /* Sube más */
      right: -38px !important;
      /* Ajuste a la derecha */
      background: #3d36f4 !important;
      color: #ffffff !important;
      font-size: 7px !important;
      font-weight: 700 !important;
      padding: 3px 7px !important;
      border-radius: 30px !important;
      line-height: 1 !important;
      white-space: nowrap !important;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4) !important;
      z-index: 100 !important;
      letter-spacing: 0.8px !important;
      transform: translateY(0) !important;
      width: 90px !important;
  }

  /* Efecto al pasar el mouse */
  .menu-item-coming-soon:hover .coming-soon-badge {
      transform: translateY(-2px) scale(1.08) !important;
      transition: all 0.3s ease !important;
  }

  /* Desactiva el enlace */
  .disabled-link {
      pointer-events: none !important;
      opacity: 0.9 !important;
      cursor: default !important;
  }

  @media (max-width: 1023px) {
      .menu-item-coming-soon .coming-soon-badge {
          right: 1px !important;
          width: 70px !important;
      }
  }