#search {
    position: absolute;
    top: 100%;
    /* Justo debajo del navbar */
    right: 5%;
    /* Ajusta según donde esté el input */
    width: 300px;
    max-height: 400px;
    overflow-y: auto;

    /* Efecto Glassmorphism */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    z-index: 1000;
    display: none;
    /* Oculto por defecto, tu JS debería hacer el toggle */
}

/* Estilizar la tabla interna para que no parezca tabla */
.search-table {
    width: 100%;
    border-collapse: collapse;
}

.search-table td {
    padding: 0;
}

.search-table a {
    display: block;
    padding: 12px 20px;
    color: #4b5563;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.search-table a:hover {
    background-color: rgba(30, 58, 138, 0.05);
    /* Tono azul custom */
    color: #1e3a8a;
    padding-left: 25px;
    /* Pequeño efecto de desplazamiento */
}

/*[======================== Nuevo INFO========================] */
.bento-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease;
}

.bento-card:hover {
    transform: translateY(-5px);
}

.bg-light-blue {
    background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%);
    border: 1px solid #e0e7ff;
}

/*[======================== Nuevo HERO Borrar?========================] */

/* Ajustes para el video de fondo */
.object-fit-cover {
    object-fit: cover;
}

.hero-asdati {
   height: 650px ;
}

.min-w-100 {
    min-width: 100%;
}

.min-h-100 {
    min-height: 100%;
}

.z-0 {
    z-index: 0;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.z-3 {
    z-index: 3;
}

/* Asegurar que el hero ocupe la pantalla completa si se desea */
.vh-100 {
    height: 100vh !important;
}

/* Estilo para que el texto resalte sobre el video */
.txt-lideres {
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
}

.txt-lideres1 {
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
}

.writing-mode-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 900;
    letter-spacing: 5px;
    opacity: 0.6;
}

.hero-content {
    position: relative;
    bottom: 55px !important;
}
/*[======================== Estilos Infografía ========================] */

  .header-section {
      text-align: center;
      padding: 40px 0;
  }

  .header-title {
      color: #1a3a5a;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
  }

  /* The main container for the stepped layout */
  .coverage-container {
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
  }

  /* Banner Styles */
  .banner-row {
      display: flex;
      align-items: flex-start;
      margin-bottom: 10px;
      position: relative;
  }

  .banner-label {
      color: white;
      font-weight: 700;
      padding: 15px 30px;
      min-width: 380px;/*320*/
      position: relative;
      font-size: 1.5rem;
      line-height: 0.9;
      box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
      z-index: 2;
  }

  /* Ribbon fold effect */
  .banner-label::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -15px;
      border-style: solid;
      border-width: 15px 15px 0 0;
      z-index: -1;
  }

  /* Connecting Lines */
  .connector-line {
      flex-grow: 1;
      height: 2px;
      border-top: 2px dashed #999;
      margin: 30px 20px 0;
      align-self: flex-start;
  }

  /* Badge/Tag Styles */
  .services-area {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding-top: 15px;
      flex-basis: 60%;
  }

  .service-tag {
      background-color: #3498db;
      color: white;
      padding: 6px 15px;
      border-radius: 20px;
      font-size: 0.9rem;
      font-weight: 500;
      white-space: nowrap;
  }

  /* Specific Colors & Offsets */
  /* Logistica */
  .bg-logistica {
      background-color: #2980b9;
  }

  .bg-logistica::after {
      border-color: #1c5982 transparent transparent transparent;
  }

  .logistica-row {
      margin-left: 0;
  }

  /* Plan Vallejo */
  .bg-vallejo {
      background-color: #95c5a6;
  }

  .bg-vallejo::after {
      border-color: #6a9177 transparent transparent transparent;
  }

  .vallejo-row {
      margin-left: 0px;
  }

  .vallejo-tag {
      background-color: #95c5a6;
  }

  /* Régimen Cambiario */
  .bg-cambiario {
      background-color: #a2d149;
  }

  .bg-cambiario::after {
      border-color: #729633 transparent transparent transparent;
  }

  .cambiario-row {
      margin-left:0px;
  }

  .cambiario-tag {
      background-color: #a2d149;
  }

  /* Comercializadora */
  .bg-comercial {
      background-color: #9b59b6;
  }

  .bg-comercial::after {
      border-color: #6c3e7f transparent transparent transparent;
  }

  .comercial-row {
      margin-left: 0px;
  }

  .comercial-tag {
      background-color: #9b59b6;
  }

  /* Sub-categories for Logistica */
  .sub-cat {
      font-size: 1rem;
      display: block;
      margin-top: 5px;
      font-weight: 400;
  }


    /* Button-like Tags with Tooltips */
 .tag-lila {
     background-color: #9b59b6;
     /*#0a91bc*/
     color: white;
     padding: 8px 18px;
     border-radius: 50px;
     font-size: 0.85rem;
     font-weight: 500;
     border: none;
     transition: transform 0.2s, background-color 0.2s;
     cursor: pointer;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
 }

 .tag-lila:hover {
     transform: translateY(-2px);
     filter: brightness(1.1);
 }


    .tag-azul  {
        background-color: #3498db;/*#0a91bc*/
        color: white;
        padding: 8px 18px;
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 500;
        border: none;
        transition: transform 0.2s, background-color 0.2s;
        cursor: pointer;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
    }
 .tag-azul:hover {
     transform: translateY(-2px);
     filter: brightness(1.1);
 }

    .tag-azul-oscuro {
        background-color: #0a91bc;
        color: white;
        padding: 8px 18px;
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 500;
        border: none;
        transition: transform 0.2s, background-color 0.2s;
        cursor: pointer;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
    }
 .tag-azul-oscuro:hover {
     transform: translateY(-2px);
     filter: brightness(1.1);
 }
   
.tag-verde {
    background-color: #95c5a6;
    color: white;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    transition: transform 0.2s, background-color 0.2s;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
}
    
.tag-verde:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}


.tag-verde-limon {
    background-color: #a2d149;
    color: white;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    transition: transform 0.2s, background-color 0.2s;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
}

.tag-verde-limon:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}




 /* Tooltip Customization */
 .tooltip-inner {
     background-color: #1a3a5a;
     padding: 8px 12px;
     font-size: 0.8rem;
 }




  /* Responsive adjustments */
  @media (max-width: 992px) {

   
   
    .banner-row {
          flex-direction: column;
          margin-left: 0 !important;
          margin-bottom: 30px;
      }

      .connector-line {
          display: none;
      }

      .banner-label {
          width: 100%;
          min-width: auto;
      }

      .services-area {
          padding-left: 20px;
          padding-top: 10px;
      }
/*[==============================Productos y Servicios==============================] */ 


.waves-bottom {
    position: relative;
    bottom: -90px !important;
}

.tit-prods-servs {
            /* padding: 5px;
            font-size: 21px;
            font-family: 'Impact';
            color: #0a234f;
            background-color: #00cc00;
            position: relative;
            z-index: 8;
            text-align: center; */
            height: 40px;
        }
/*[==============================Quiénes Somos==============================] */
  }


/*[======================== Termina Estilos Infografía ========================] */


/*[======================== Estilos LogoSlider ========================] */

/* INFINITE LOGO CAROUSEL CSS */
@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.logos {
    overflow: hidden;
    padding: 60px 0;
    background: white;
    white-space: nowrap;
    position: relative;
}

.logos:before,
.logos:after {
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    /* content: ""; */
    z-index: 2;
}



.logos:hover .logos-slide {
    animation-play-state: paused;
}

.logos-slide {
    display: inline-block;
    animation: 35s slide infinite linear;
}

.logos-slide img {
    height: 50px;
    margin: 0 40px;
}
/* TERMINA LOGO CAROUSEL CSS */


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



@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.logos {
    overflow: hidden;
    padding: 60px 0;
    background: white;
    white-space: nowrap;
    position: relative;

}



/* .logos:before,
.logos:after {
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    content: "";
    z-index: 2;
} */

.logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

.logos:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}

.logos:hover .logos-slide {
    animation-play-state: paused;
}

.logos-slide {
    display: inline-block;
    animation: 35s slide infinite linear;
}

.logos-slide img {
    height: 50px;
    margin: 0 40px;
}

/* ==================================== */


.logo-slider {
    padding: 20px;
    overflow: hidden;
    max-width: 100%;/*900px*/
    width: 100%;
    margin: 0 auto;
    position: relative;
    display: flex;

    &:hover div {
        animation-play-state: paused;
    }

    div {
        display: flex;
        position: relative;
        animation: marquee 20s linear infinite;
        justify-content: space-around;
    }

    img {
        display: block;
        /* min-width: var(--image-size);
        height: var(--image-size); */
        /* margin: 0 1vw;  */
    }

    &:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: linear-gradient(to right, white, rgba(white, 0) 80px, rgba(white, 0) calc(100% - 80px), white);
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/*[======================== Termina Estilos de LogoSlider ========================] */

/*[======================== Estilos de Ondas ========================] */

/* Estilos para las Ondas 1(Waves) */
.onde {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -72px;
    /*Fix for safari gap*/
    min-height: 100px;
    max-height: 150px;
    overflow: hidden;
    clip-path: polygon(M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352Z);
    
}


/* Animation */

.parallaxonde>use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallaxonde>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.parallaxonde>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.parallaxonde>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.parallaxonde>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

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

/*Shrinking for mobile*/
@media (max-width: 768px) {
    .onde {
        height: 40px;
        min-height: 40px;
        margin-top: 56px;
    }

/* .onde {
    height: 40px;
    min-height: 40px;
    margin-top: 56px;
} */

.waves-bottom {
    position: relative;
    top:172px !important;
}
}

/* Estilos para las Ondas 2(Waves) */
.waves-container {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 10;
}

.waves {
    position: relative;
    display: block;
    width: 100%;
    height: 60px;
    /* Altura de las ondas */
    bottom:21px;
}

.waves-top-qsomos {
    position: relative;
    top: -150px;
}

.waves-bottom{
    position: relative;
    bottom: -169px;
}

.parallax>use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.parallax>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
    fill: rgba(255, 255, 255, 0.7);
}

.parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
    fill: rgba(255, 255, 255, 0.5);
}

.parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
    fill: rgba(255, 255, 255, 0.3);
}

.parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
    fill: #f2f2f2;/*#fff*/
    /* Color de fondo de la siguiente sección (blanco) */
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

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

.onda-video{
    position: relative;
    top: 50px;
}

.onda-video-top {
    position: relative;
    bottom: 200px;
}


.onda-footer {
    position: relative;
    top:5px;/*50px*/
}

.ondafooter_int{
    position: relative;
    margin: auto;
    bottom: 50px;  
    --bs-gutter-x: 0px;
}
/*  BUSCADOR ESTILOS CSS */
/*----------BUSCADOR-----------*/

.search {/*content-table*/
   z-index:10 ;
    width: 80%;
    max-width: 80%;
    margin: auto;
   /*  background-color: aqua; */
    background-color: #fff;
    padding: 0 10px;
    padding-bottom: 5px;
    max-height: 500px;
    overflow: hidden;
    display: none;
}

/* PENDIENTE CAMBIAR */
/* tbody tr td{
		
		width:50%;

	} */

.search-table {
    width:100%;/*100%*/

}

tbody tr td a {
    /* align-content: center !important; */
    text-decoration: none;
    font-size: 14px;
    color: #057BF5;
    display:inline-block;
    width: 100%;/*100%*/
    height:100%;/*00%*/
    padding: 20px 0;
   /*  padding-left: 20px;  */
    align-items: center;
    text-align: center;
 /* border: 2px solid #fff; */

}


tbody tr td a:hover {
    color: aliceblue;
    background-color: #052F87;
    width: 100%;
}


.content-table::-webkit-scrollbar {
    /*background: rgba(0,0,0,0);*/
    width: 10px;
}

.content-table::-webkit-scrollbar-track {
    background: #C1C1C1;
}

.content-table::-webkit-scrollbar-button {
    background: #C1C1C1;
}


.content-table::-webkit-scrollbar-button-thumb {
    background: #C1C1C1;
}


.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate {

display: none;
}

/*  BUSCADOR ESTILOS CSS */

          /* WhatsApp floating button */
          #whatsapp-btn {
              position: fixed;
              right: 24px;
              bottom: 24px;
              width: 56px;
              height: 56px;
              border-radius: 50%;
              background: #25D366;
              color: #fff;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              text-decoration: none;
              box-shadow: 0 10px 30px rgba(2, 6, 23, 0.35);
              z-index: 9999;
              transform: translateY(16px);
              opacity: 0;
              transition: transform .36s cubic-bezier(.2, .9, .2, 1), opacity .36s;
          }
    
          #whatsapp-btn.show {
              transform: none;
              opacity: 1;
          }
    
          #whatsapp-btn:hover {
              transform: translateY(-6px) scale(1.04);
          }
    
          #whatsapp-btn .bi {
              font-size: 1.5rem;
          }
    
          @media (prefers-reduced-motion: reduce) {
              #whatsapp-btn {
                  transition: none !important;
                  transform: none !important;
                  opacity: 1 !important;
              }
          }




 
 .animsition-loading-1 {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  }
  
  
  body {
            font-family: 'Inter', sans-serif;
            color: #333;
            background-color: #fff;
        }

        /* Colores personalizados */
        :root {
            /*--bs-custom-green-light: #00ff00;  Verde brillante #48a62a*/
        /*--bs-custom-green-light: #00ff00; Verde brillante */
            --bs-custom-green-light: #48a62a; 
            --bs-custom-green-dark: #00cc00;
            --bs-custom-blue-default: #0d2d5c; /* Azul oscuro principal */
            --bs-custom-blue-light: #1e3a8a;
            --bs-custom-blue-dark: #0a234f;
        }

        .bg-custom-green-light { background-color: var(--bs-custom-green-light) !important; }
        .bg-custom-blue-default { background-color: var(--bs-custom-blue-default) !important; }
        .bg-custom-blue-dark { background-color: var(--bs-custom-blue-dark) !important; }
        .text-custom-blue-dark { color: var(--bs-custom-blue-dark) !important; }
        .border-custom-blue-light { border-color: var(--bs-custom-blue-light) !important; }



/*[ BREAKPOINTS ]
/* [========================[CELULAR]========================]*/

/* @media (min-width: 428px) and (max-width: 768px) */
@media (max-width: 480px) {

/* [===================SECCIÓN HERO=======================] */

.interactive-container {
    display: none !important;
}   


.hero-asdati{   
height: 850px ;
}


.hero-content{
position: relative;
top:10px;
}


.txt-lideres {
    display: none;
}


.txt-lideres1{
    display: block !important;
    font-family: 'Impact';
    font-size: 2.3rem !important;
    text-align: center;
    line-height: 0.9 !important;
    position: relative;
    margin: auto !important;
    bottom: 50px;
}

.txt-azul-md {
    text-align: center !important;
    line-height: 1.2;
    position: relative;
    font-size: 18px !important;
    bottom: 40px;
}

.angelnet {
    position: relative;
    max-width: 60% !important;
    top:-30px !important;
    margin: auto !important;
}

.dati {
    height: 150px !important; 
    z-index: 120;
    bottom: 16px;
    margin-left: 130px;
    /* left: 95%; */
}

.slide-info{
    position: relative;
}


.splide {
    position: relative;
    visibility: hidden;
    max-width:100%;
    margin: auto;
}

.bg_main_cuadro {
   display: inline-block;
    position: relative !important;
    top: 17px; 
    margin: auto !important;
    right: 21%;
    height: 250px;
    text-align: center;
}


.tit-software-servicios  {
    width: 50% !important;
    display: inline-block;
    font-size: 21px !important;
    top: 180px !important;
    padding-top: 10px !important;
}

.hero-bg{
background-image: url(../img/main_pic_428.png) !important;
}



.caja-txt-azul-sm{
    display: none;
}


.txt-azul-sm {
    text-align: justify !important;
    line-height: 1.2;
    position: relative;
    font-size: 21px !important;
    top: 20px;
}

    .txt-azul{
    position: relative!important;
    top:16px !important;
    }

   

.ingreso-cliente-text {
    position: relative !important;
    bottom: 50px !important;
    font-size: 14px!important;
    display: inline-block !important;
    line-height: 0.8;
}
.hero-wave{
    position: relative;
}

/* [===============SECCIÓN ESPECIALISTAS==================] */


.tit-especialistas {
/*     position: relative!important; */
    display: block !important;
    border-top: 2px solid #0a234f !important;
    border-right: 2px solid #0a234f!important;
    border-bottom: 2px solid #0a234f!important;
    border-left: 2px solid #0a234f!important;
    border-radius: 32px 32px 32px 32px !important;
    padding: 5px !important;
}


.tit-SS{
   display:block!important;
   position: relative;
   text-align: center;
   margin: auto;
}

.logo-clq{
    display: inline-block !important;
    text-align: center !important;
    position: relative;
    z-index: 5;
    vertical-align: center;
    border-top: 0px solid #23234f !important;
    border-right: 0px solid #0a234f !important;
}

.box-logo-clq{
    display: none !important;
    text-align: center !important;
    position: relative;
    z-index: 5;
    vertical-align: center;
    border-top: 0px solid #23234f !important;
    border-right: 0px solid #0a234f!important;
}

.tit-clq{
    display: block !important;
    text-align: center !important;
    font-size: 18px !important;
}

.txt-clq{
    display: block !important;
    text-align: center !important;
    font-size: 14px !important;
}

.mini-txt-clq{
    font-size: 13px !important;
}

.tit-uniban {
   
    text-align: center !important;
    font-size: 18px !important;
}

.txt-uniban {
    display: block !important;
    text-align: center !important;
    font-size: 14px !important;
}


.mini-txt-uniban {
font-size: 13px !important;
}


/* [===============CLIENTES==================] */

.tit-clientes-aprob{

    font-size: 16px !important;
    line-height: 1 !important;
    padding-top: 8px;

}

/* [===============QUIÉNES SOMOS==================] */

.txt-qsomos {
    font-size: 0.8 rem !important;
    /* font-family: 'GalanoGrotesque';
    color: #0a234f; */
    line-height: 1 !important;
    text-align: center !important;
    position: relative;
    bottom: 10px !important;
   
}

.waves-top-qsomos {
    position: relative;
    top: -144px;
}

/* [===============PRODUCTOS Y SERVICIOS==================] */

  .tit-servicio {
      font-family: 'Impact';
      color: #0a234f;
      font-size: 25px !important;
      text-align: center;
      /* border-bottom: 5px solid #00cc00; */
  }


.tit-prods-servs {
    position: relative;
    top: 20px !important;
    padding-bottom: 15px;
    font-size: 17px !important;
    position: relative;
    z-index: 8;
    text-align: center;

}

.servicio {
    margin-bottom: 150px !important;
}

/* [===============SECCIÓN ESTADÍSTICAS==================] */

/* .stats-bg {
    margin: auto;
    text-align: left;
    padding-left: 20px;

} */

.waves-stats{
position: relative;
top:20px !important;
}


.stat-tit {
    margin: auto !important;
    text-align:center !important;
}


.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #000000;
    margin-bottom: 10px;
}



.stat-label {
    font-size: 1rem !important;
    line-height: 1;
    text-align: center !important;
    opacity: 0.8;
}

.onda-video-top{
    position: relative;
    bottom:150px !important;
}


/* [===============SECCIÓN CONTACTO==================] */

.years{
text-align: center !important;
}

.tag-experiencia{
display: block !important;
text-align: center !important;
}

.plan-vallejo{
text-align: center !important;
width: 100% !important;
}

#navbarNav{
text-align: center;
}

/* [=============================SECCIÓN-SERVICIOS-SM============================] */

.section-title{
font-size: 24px !important;
text-align:center;
line-height: 1;
}

.tit-plan-vallejo-w {
font-size: 24px !important;
text-align: center !important;
}

    .tit-servicio{
    font-family: 'Impact';
    color: #0a234f;
    font-size: 28px;
    text-align: center;
    border-bottom: 5px solid #00cc00;   
    }

.caption-servicios {
   font-size: 16px !important;
}



.servicio{
margin-bottom: 35px;
}

/* .txt-servicios {
    font-family: 'Impact';
    color: #0a234f;
    font-size: 16px;
    text-align: center;
    border-bottom: 5px solid #00cc00;
} */



.tit-plan-vallejo{
font-size:24px !important;
text-align: center !important;
}

.txt-plan-vallejo {
font-size: 16px !important;
font-family: 'Galano Grotesque Medium';
color: #0a234f;
text-align:center !important;
line-height: 1;
padding: 5px;
font-weight: bold;
}

.txt-comercio{
text-align: justify;
}

.imagen-txt-plan-vallejo{
display: inline-block;
position: relative;
display: none;
}

.imagen-txt-plan-vallejo-sm {
position: relative;
z-index: 4;
padding: 8px;
max-height: 150px;
display: block !important;
}

/* FOOTER */

}

.tit-footer-menu {
    font-family: 'GalanoGrotesque';
    font-size: 1.1rem;
    color: rgb(30, 58, 138);
    text-align: center;
    /* text-decoration: underline 2px solid #fff !important; */
}

.separador-menu-footer {
    border-left: 0px solid #ffffff ;
}

.footer-links {
    font-family: 'GalanoGrotesque';
    color: rgb(30, 58, 138);
    /* text-align: center; */
    margin: auto;
    /* width: 50%; */
    /* display: block; */
}

.logo-asdati{
display: block;
text-align: center;
}

/* Estadísticas  */

/* .stats-bg {
    margin: auto;
    text-align: left;
    padding-left: 20px;

} */


.scroll-style {
    font-size: 4rem;
    font-weight: bold;
    text-align:left;
    margin: 40px 0;
    color: #000000;
    /* text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); */
    letter-spacing: 2px;
}



.stats{
/* text-align: left; */
border-right:1px solid #c1c1c1 ;
/* border-width: 1px;
border-color: #c1c1c1; */
/* display: inline-block;
width: 100%; */
/* gap: 10px; */
/* grid-template-columns: 1fr 1fr 1fr; */
/* grid-column: span 3; */
}


.divider{
    width:1.5px;
    height: 100%;
    position: relative;
    background: #6e6e6e;
}

.stat-box {
    padding: 5px;
    /* border-radius: 10px; */
    text-align: left;
    /* border: 1px solid rgba(255, 255, 255, 0.3); */
}



.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #000000;
    margin-bottom: 10px;
}

.stat-tit{
text-align: left;
padding-left: 20px;

}

.stat-label {
    font-size: 0.8rem;
    text-align: left;
    opacity: 0.8;
}

/* [=============================SECCIÓN-SERVICIOS-SM============================] */







/* //////////////////////////////-TERMINA ESTILOS CELULAR-/////////////////////////////*/

/*[ BACK TO TOP ]
/* ///////////////////////////////////////////////////////////*/ 
#upBtn{ 
    position: fixed; 
    bottom: 2rem; 
    right: 2rem;
    transition: opacity 0.5s;
    opacity: 0;
    cursor: pointer;
}

/*[ BACK TO TOP ]
///////////////////////////////////////////////////////////*/

 
    .Logo{
        display: inline-flex;
        position: relative;
        bottom: 15px;
    }


    .BG-logo{
     background-color: #f2f2f2;
     }   
    


/* ===================PERSISTENT LINKS====================== */
/* //////////////////////////////////////////////////////////// */

#marker {
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 55px;
    border-bottom: 5px solid #48a22d;
  /*   background: linear-gradient(0deg, #08f9ff33, transparent); */
    transition: 0.5s;
    pointer-events: none;
    filter: drop-shadow(0 5px 25px #08f9ff);
}

/* ===================PERSISTENT LINKS====================== */
  .txt-links {
    font-family: 'Impact';
    color: #0a234f;
    font-size: 1rem;/*0.8rem*/
    /* text-decoration:2px #0a234f underline !important; */
    }  


    .btn-custom-blue {
        /* display: inline-flexbox; */
        background-color: var(--bs-custom-blue-dark);
        color: #fff;
        font-weight: bold;
        border-radius: 2rem;
        padding: 0.75rem 1.5rem;
        border: none;
        z-index: 3;
        position: relative;
        top:3px;
        border-radius: 16px;
        outline: 1px solid #00ffff;
        outline-offset: -5px;
            /* Offset the outline 5px outwards */
    }

    .btn-custom-blue:hover {
        background-color: var(--bs-custom-blue-light);
        color: #fff;
       
    }

    /* Texto vertical */
    .writing-mode-vertical {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        white-space: nowrap;
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%) rotate(180deg);
        color: rgba(255, 255, 255, 0.5);
        font-size: 2.5rem;
        font-weight: 900;
        letter-spacing: 0.2em;
    }

        /* Fondos con imágenes (usando placeholders) */
        .hero-bg {
            background-image: url('../img/main_pic.jpg');
            opacity: 1;
            background-size: cover;
            background-position: center;
            height: 550px; /* Altura fija para el hero */
        }
        .containers-bg {
            background-image: url('../img/bg_qsomos.png');
            background-size: cover;
            background-position: center;
            background-attachment: fixed; /* Efecto Parallax */
            height: 400px;
        }
        .subscribe-bg {
            background-image: url('../img/bg_subscribe.png');
            background-size: cover;
            background-position: center;
            position: relative;
        }
        .subscribe-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
           /*  background-color: var(--bs-custom-blue-dark); */
           /*  opacity: 0.8; */
        }
/*Submenu*/


/* Submenu 2º nivel */
/* .dropdown-submenu {
    position: relative;

} */

/* .dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
    min-width: 12rem;
} */

/* Flecha derecha para submenu */
/* .dropdown-submenu>.dropdown-toggle::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .5rem;
    vertical-align: 0.2em;
    border-top: .3em solid transparent;
    border-bottom: .3em solid transparent;
    border-left: .4em solid currentColor;
    transform: translateY(-0.1em);
   
} */

/* En móvil mostrar submenus dentro del flujo */
@media (max-width: 991.98px) {
    /* .dropdown-submenu>.dropdown-menu {
        left: 0;
        position: relative;
        margin-left: 0;
    } */
}


/*Submenu*/
        /* Formulario de suscripción con estilo oscuro */
        .subscribe-form .form-control {
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.4);
            color: #fff;
        }
        .subscribe-form .form-control::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }
        .subscribe-form .form-control:focus {
            background-color: rgba(255, 255, 255, 0.15);
            border-color: var(--bs-custom-green-light);
            box-shadow: 0 0 0 0.25rem rgba(0, 255, 0, 0.25);
        }

        /* Flechas de slider (decorativas) */
        .slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.3);
            border: none;
            color: #fff;
            font-size: 1.5rem;
            padding: 0.75rem 1rem;
            border-radius: 50%;
            display: none; /* Oculto por defecto, se podría mostrar en md */
            z-index: 10;
        }
        .slider-arrow.left { left: 1rem; }
        .slider-arrow.right { right: 1rem; }
        @media (min-width: 768px) {
            .slider-arrow { display: block; }
        }

        /* Quitar el estilo de lista para los íconos de Font Awesome en el footer */
        .footer-social-icons li {
            list-style: none;
        }

      /* Software y servicios  */

        .bg_main_cuadro {
        background-color: #66d7ff;/*#00ffff*/
        outline:1px solid #00ffff;
        opacity: 0.8;
        max-width:320px;
        position: relative;
        margin: auto;
        }

        .btn-software-servicios{
        z-index: 5;
      /* width:320px; */
        display:inline-flexbox;
        padding: 1px;
        font-size: 21px;
        color:#ffffff;
        text-shadow:3px 3px #009245;
        background-color: #48a62a;
        border-radius:50px;
        position:relative;
        text-align: center;
        bottom: 35px;
        font-family: 'GalanoGrotesque';
        outline: 1px solid #009245;
        outline-offset: -5px;/* Offset the outline 5px outwards */
        line-height: 8;
        }

        .tit-software-servicios {
        width:25%;
        position: absolute;
        z-index: 8;
        padding-top: 15px;
        font-size: 21px;
        color: #ffffff;
        text-shadow: 3px 3px #009245;
        background-color: #48a62a;
        border-radius: 50px;
        text-align: center;
        font-family: 'GalanoGrotesque';
        outline: 1px solid #009245;
        outline-offset: -5px;/* Offset the outline 5px outwards */
        line-height: 0.9;
        top:18px
        }

        .ingreso-cliente-text{
         font-family: 'GalanoGrotesque';
         color:#00ffff;
         font-size: 16px;
         font-weight: 200;
        opacity: 0.9;
        }


        .txt-lideres {
        font-family: 'Impact';
        color: #0a234f;
        font-size:45px;/*3rem*/
        line-height: 1 !important;
        }

        .txt-lideres1 {
        display: none;
        }

      .txt-asdati {
       font-family: 'Impact';
       color: #cccccc;
       font-size: 2rem;
       }

      .txt-azul {
       color: #0a234f;
       font-family: 'GalanoGrotesque';
       letter-spacing: -1px;
       line-height: 1.2;
       font-size: 15px;
       }


       .txt-azul-md {
        color: #0a234f;
        font-family: 'GalanoGrotesque';
        letter-spacing: -1px;
        line-height: 0.9;
        font-size: 18px !important;/*NEW*/
       }

       .angelnet {
       z-index: 999;
       position: relative;
       top: 10px;
       max-width: 40%;
       filter: drop-shadow(1px 1px 1px #fff);
      }


       .dati{
        display: inline-flex;
        position:relative;
        /* width:100%; */
        height: 180px;
       }

/* The wrapper that holds the image and tooltip */
.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
    z-index: 999;
}

/* Style for the actual tooltip box */
.tooltip-text {
    visibility: hidden;
    width: 140px;
    background-color:#4472c4;
    color: #ffffff;
    text-align: center;
    border-radius: 21px;
    padding: 8px;
    position: absolute;
    bottom: 100%;
    border-bottom: var(--h) solid #4472c4;
    /* Position it above the image */
    left: 50%;
    margin-left: -30px;
    /* Center it (half of the width) */
    /* Fade-in effect */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Create a small arrow at the bottom of the tooltip */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 30%;
    line-height: 0.5;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #4472c4 transparent transparent transparent;
}

/* Show the tooltip when hovering over the container */
.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
   
}


/* =================tooltip================= */




/* =================tooltip================= */

        .tit-SS{
        background-color: #48a22d;
        color: #0a234f;/*#0a234f*/
        font-family: 'GalanoGrotesque';
        font-size: 12px;
        font-weight: 500;
        display: inline-block;
        padding:3px;
        }

        .txt-azul-sm {
        color: #0a234f;
        font-family: 'GalanoGrotesque';
        font-size: 14px;
        letter-spacing: -1px;
        line-height: 0.9;
        }

        .tit-azul-sm-2{
        color: #2e3192;
        font-family: 'GalanoGrotesque';
        font-size: 14px;
        font-weight: 400;
        display: inline-flex;
        position: relative;
        }

        .txt-azul-sm-2 {
        color: #0a234f;
        font-family: 'GalanoGrotesque';
        font-size: 14px;
        display: inline-block;
        text-align: justify;
        }

        .caja-txt-azul-sm {
        border-top: 2px solid #0a234f;
        border-right: 2px solid #0a234f;
        padding: 2px; 
        position: relative;
        width: 88%;
        }

        .cuadro-especialistas{
        background-color: #f2f2f2;
        }

        .tit-especialistas{
        position: relative;
        display: inline-block;
        font-family: 'GalanoGrotesque';
        border-top: 2px solid #0a234f;
        border-right:2px solid #0a234f ;
        border-bottom: 2px solid #0a234f;
        border-radius: 0px 32px 0px 0px;
        padding: 16px;
        line-height: 0.9;
        }

      

/* ==========SOFTWARE Y SERVICIOS==========  */

/* =================TESTIMONIOS================= */
    .BG-test{
    background-color: #e6e6e6;
    }

/*     .logo-clq {
    display: none;
} */


    .box-logo-clq{
    border-top: 0px solid #23234f;
    border-right: 2px solid #0a234f;
    min-height: 150px;
    display: inline-flex;
    }

    .tit-clq{
    color: #002b89;/* #f27d00*/
    font-family: 'GalanoGrotesque';
    font-size: 14px;
    font-weight: 300;
    }
    .txt-clq{
    color: #002b89;/* #f27d00*/
    font-family: 'GalanoGrotesque';
    font-size: 10px;
    line-height: 1;
    text-align: justify;
    }

    .mini-txt-clq {
        color: #002b89;/* #f27d00*/
        font-family: 'GalanoGrotesque';
        font-size: 9px;
        line-height: 1;
    }

    .tit-uniban {
        color: #008340;
        font-family: 'GalanoGrotesque';
        font-size: 14px;
        font-weight: 300;
    }

    .txt-uniban {
        color: #008340;
        font-family: 'GalanoGrotesque';
        font-size: 10px;
        line-height: 1;
        text-align: justify;
    }

    .mini-txt-uniban {
        color: #008340;
        font-family: 'GalanoGrotesque';
        font-size: 9px;
        /* line-height: 1; */
    }
/* =================TESTIMONIOS================= */

/* =================TIT CLIENTES APROBADOS================= */

  .Bg-clientes-aprob {
      display: inline-block;
      background-color:#48a62a ;/* #00cc00*/
      border-radius: 0px 0px 21px 21px;
  }


    .tit-clientes-aprob {
        font-family: 'GalanoGrotesque';
        font-size: 21px;
        /* background-color: #00cc00; */
        color: #23234f;
        font-weight: 300;
        display: inline-block;
        position: relative;
        margin-top: 3px;
    }
  /* =================TIT CLIENTES APROBADOS================= */

  /* =================QUIENES SOMOS================= */

  .BG-qsomos{
   background-image: url("../img/bg_qsomos.png");
   background-color: #e6e6e6;
   background-repeat: no-repeat;
   background-size: cover;
    background-attachment: fixed;/* Efecto Parallax */
      
        height: 400px;
  } 
  
  
  .tit-qsomos{
    /* background-color: #00ff00; */
    color: #fff;/*#0a234f*/
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    text-align: center;
    }

    .txt-qsomos{
     font-size: 14px;
     font-family: 'GalanoGrotesque';
     color: #0a234f;
     line-height: 1.2;
     text-align: justify;
    }


/* =================QUIENES SOMOS================= */

/* =================VIDEO================= */

.bg-video{
 background-color: #fff;/*#808080*/
}

/* =================VIDEO================= */


/* =================CONTAINER BG================= */
  .containers-bg {
      background-image: url("../img/bg_qsomos.png");
      background-color: #e6e6e6;
      background-repeat: no-repeat;
      background-size: cover;
  }
/* =================CONTAINER BG================= */

/* =================PRODUCTOS Y SERVICIOS================= */

.bg-prods-serv{
background-color: #e6e6e6;
bottom: 600px;
/* grid-gap: 10px; */
}


.tit-prods-servs {
padding: 5px;
font-size: 21px;
font-family: 'Impact';
color: #0a234f;
background-color: #00cc00;
position: relative;
z-index: 8;
text-align: center;
}

.txt-servicios{
font-family: 'Impact';
color: #0a234f;
font-size: 21px;
text-align: center;
border-bottom: 5px solid #00cc00;
text-decoration: none !important;
text-decoration: underline;
}

.caption-servicios{
font-family: 'GalanoGrotesque';
font-size: 14px;
text-align: center;
display: inline-block;
align-items: center;
line-height: 1;
padding: 5px;
}

/* =================PRODUCTOS Y SERVICIOS================= */

/* =================FORMULARIO================= */
.subscribe{
/* font-family: 'GalanoGrotesque'; */
font-family: 'Impact';
color: #0a234f;
font-weight: 800;
font-size: 3rem;
text-align: center;
padding: 8px;
}

.disclaimer{
font-size: 9px;
color: #fff;
text-align: center;
}

.tag-bol{
font-family: 'GalanoGrotesque';
color: #0a234f;
font-size:1.3rem ;
text-align: center;
}

.years{
font-family: 'GalanoGrotesque';
color:#fff;
font-size: 5rem;
font-weight: bolder;
position: relative;
top: 35px;
}

.tag-experiencia{
font-family: 'GalanoGrotesque';
color: #fff;
font-size: 2.8rem;
font-weight: lighter;
text-align: center;
display: inline-block;
}

.plan-vallejo{
background-color: #0a234f;
font-family: 'GalanoGrotesque';
color: #fff;
font-size: 24px;
width: 250px;
padding: 8px;
display:inline;
text-align: center;
position: relative;
}

.btn-contact {
background-color: var(--bs-custom-green-light);
font-family: 'impact';
color: #000;
padding: 0.3rem;/*0.5rem*/
background-color:#48a62a ;/*  #00cc00*/
border-radius: 0px;
text-decoration: none;
display: inline-block;
}

.btn-contact:hover {
background-color: var(--bs-custom-green-dark);
color: #fff;
}

.btn-boletin {
background-color: var(--bs-custom-green-light);
font-family: 'impact';
color: #000;
/* font-weight: bold; */
border-radius: 2rem;
/* padding: 0.75rem 1.5rem; */
border: none;
background-color:#48a62a ;/* #00ff00*/
border-radius: 0px;
font-size: 1rem;
}

.txt-contacto {
    position: relative;
    display: inline-block;
    border-radius:21px ;
    background-color: #23234f;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
    padding: 16px;
    text-align: center;
    align-items: center;
    bottom: 21px;
    text-shadow: #000 1px 1px;
}

.btn-boletin:hover {
background-color: var(--bs-custom-green-dark);
color: #fff;
}

/* =================FOOTER================= */

.bg-footer{
background-image:url('../img/bg_footer.png');
background-repeat: no-repeat;
background-size: cover;
}

.tit-footer-menu{
font-family: 'GalanoGrotesque';
font-size: 1.2rem;
color: rgb(30, 58, 138);
text-decoration: none ;
}

.separador-menu-footer{
display:table-cell;
border-left:2px solid #fff ;
line-height: 0.8;
align-content: center;

}


.footer-links{
font-family: 'GalanoGrotesque';
color: rgb(30, 58, 138);
text-align: left;


}

.tit-footer-brand{
color: #fff;
font-family: 'GalanoGrotesque';
font-size: 1.5rem;

}

.footer-info{
color: #fff;
font-family: 'GalanoGrotesque';
font-size: 0.9rem;
line-height: 1;
}
/* =================FOOTER================= */



/* [==================================PLAN VALLEJOS STYLES=============================] */

    .bg-plan-vallejo{
    background-image:url(../img/main_pic_explicacion_plan_vallejo.jpg) !important;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.8;
    }

    .I-plan_vallejo{
    background-color: #08f9ff;
    height: 200px;
    position: relative;
    }

    .D-plan_vallejo{
    position: relative;
    background-color: #e562b7;
    height:200px;
    }


    .titulos{
    font-family: 'Impact';
    color: #0a234f;
    font-size: 2rem;
    text-align: center;
    line-height: 0.4;
    }



.main-container-vallejo{
    display:inline-flex;
    margin:auto;
    width: 90%;
    padding: 40px;
    position: relative;
    background-color: #fff;
    border-radius: 20px;
    z-index: 3;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03);
}

.cuadro-azul{
    position: relative;
    background-color: #0a234f;
    width: 30px;
    height: 30px;
    z-index: 8;
    opacity: 0.90;
    top:21px;
    right:5px;
}
.tit-plan-vallejo-big {
    font-family: 'GalanoGrotesque';
    font-size: 2.5rem;/*45px*/
    color: #0a234f;
    font-weight: bold;
    margin: 10px;
    line-height: 0.5;
    /* text-decoration: underline #008340; */
}

.tit-blanco-big {
    font-family: 'GalanoGrotesque';
    font-size: 2.5rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 0.9;
}

.txt-blanco-big {
    font-size: 1rem;
    font-family: 'Galano Grotesque Medium';
    color: #fff;
}

.txt-blanco {
    /* font-size: 14px; */
    font-family: 'Galano Grotesque Medium';
    margin: auto;
    color: #fff;
    position: relative;
    width: 90%;
}

.tit-plan-vallejo {
    font-family: 'GalanoGrotesque';
    font-size: 25px;
    color: #0a234f;
    font-weight: bold;
    /*padding: 10px; */
    line-height: 0.9;
    /* text-decoration: underline #008340; */
    text-align: left;
}




.txt-plan-vallejo-big {
    font-size: 14px;
    font-family: 'Galano Grotesque Medium';
    color: #0a234f;
    margin-left: 25px;
    line-height: 1.2;
    position: relative;
}


.txt-plan-vallejo{
    font-size: 14px;
    font-family: 'Galano Grotesque Medium';
    color:#0a234f;
    /* margin-left: 16px; */
    text-align: justify;
    line-height: 1.2;
    position: relative;
    padding: 5px;
}

.imagen-txt-plan-vallejo-sm {
   display: none;
}

.imagen-txt-plan-vallejo{
    position: relative;
    z-index: 4;
    padding: 8px;
    max-height:fit-content;
}

.imagen-txt-plan-vallejo-bg {
   background-image: url(../img/plan-vallejo_bg.jpg);
   background-repeat: no-repeat;
   background-position:right;
}

/* Estilos software plan vallejo */

.main-container-software {
    margin: auto;
    width: 90%;
    padding: 10px;
    position: relative;
    /* background-color: #0a234f; */
    z-index: 3;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03);
}


.imagen-txt-software-vallejo-bg {
    background-image: url(../img/software-p-vallejo.jpg);
    background-repeat: no-repeat;
    background-position: right;
}



.tit-plan-vallejo-w {
    font-family: 'GalanoGrotesque';
    font-size: 21px;
    color: #fff;
    font-weight: bold;
    padding: 10px;
    line-height: 0.;
    /* text-decoration: underline #008340; */
    /* left: 5%; */
    text-align: left;
}


.tit-plan-vallejo-big-w {
    font-family: 'GalanoGrotesque';
    font-size: 45px;
    color: #fff;
    font-weight: bold;
    padding: 10px;
    line-height: 1;
    /* text-decoration: underline #008340; */
    /* left: 5%; */
 
}


.txt-plan-vallejo-w {
    font: size 14px;
    font-family: 'Galano Grotesque Medium';
   /*  font-family: 'GalanoGrotesque'; */
    color: #fff;
    margin-left:16px ;
    line-height: 1.2;
    position: relative;
}

.subtitulo{
font-family: 'Galano Grotesque Alt';
font-size: 21px;
}

/* Estilos comercializadora */
.imagen-comercializadora-bg {
    background-image: url(../img/comercializadora-bg.png);
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
}

.txt-comercio {
    font: size 14px;
    font-family: 'Galano Grotesque Medium';
    color: #0d2d5c;
    margin-left: 16px;
    line-height: 1.2;
    position: relative;
}


.tit-comercial-big {
    font-family: 'GalanoGrotesque';
    font-size: 45px;
    color: #fff ;/*#0a234f*/
    font-weight: bold;
    padding: 30px;
    line-height: 0.5;
    /* text-decoration: underline #008340; */
}

/* LOGÍSTICA EXPORTACIÓN */

.imagen-logistica-bg {
    background-image: url(../img/comercializadora-bg.png) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.8;
}


.imagen-otros-bg {
    background-image: url(../img/comercializadora-bg.png) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.8;
}

/*==================TITULO SECCIÓN====================*/
/* .section-title {
    text-align: center;
    padding-bottom: 30px;
} */


.section-title {
    font-family: 'GalanoGrotesque';
    font-size: 45px;
    color: #fff;
    font-weight: bold;
    padding: 30px;
}

/* .section-title ::before,
.section-title ::after {
    content: "" !important;
    width: 50px;
    height: 2px;
    padding: 0px, 5px, 0px, 5px;
    background: #fff;/*#a3bd31
    display: inline-block;
    vertical-align: middle;
} */

.section-title ::before,
.section-title ::after  {
    content: "" !important;
    width: 50px;
    height: 2px;
    padding: 0px, 5px, 0px, 5px;
    background: #fff;
    /*3498db*/
    display: inline-block;
    vertical-align: middle;
}


/*==================TITULO SECCIÓN====================*/

/* [=======================================SERVICIOS==========================================] */

/* ==========================================
   TOOLTIPS PARA INFOGRAFÍA MÓVIL (TARJETAS)
   ========================================== */
@media (max-width: 991px) {

    /* 1. Preparar la tarjeta para recibir toques */
    .hotspot-cel {
        position: relative;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* 2. Estilo del Tooltip superpuesto */
    .tooltip-mobile {
        display: none !important;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 95%;
        background-color: #0a234f;
        color: #ffffff;
        text-align: left;
        padding: 20px;
        border-radius: 12px;
        font-size: 14px;
        line-height: 1.4;
        z-index: 1055 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        transition: opacity 0.2s ease;
    }

    /* 3. Activador de visibilidad */
    .hotspot-cel.activo-movil .tooltip-mobile {
        display: block !important;
        opacity: 1;
        visibility: visible;
    }

    /* 4. Backdrop invisible que bloquea el resto de la página */
    .tooltip-mobile-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;
        /* Por debajo del tooltip, por encima del sitio */
        display: none;
        background: rgba(0, 0, 0, 0.4);
        /* Fondo semi-oscuro */
        backdrop-filter: blur(2px);
        /* Efecto difuminado moderno */
    }

    .tooltip-mobile-backdrop.activo {
        display: block;
    }
}