:root {
        --color-fondo: #052340;
        --color-fondov2: #fff;
        --color-texto-principal: #f8f9fa;
        --color-texto-secundario: #adb5bd;
    }

        
        
        .separador-imagen {
            /* Fondo de la imagen */
            background-size: cover; /* Ajusta la imagen para cubrir todo el espacio */
            background-position: center center; /* Centra la imagen */
            background-repeat: no-repeat; /* Evita que la imagen se repita */

            /* Altura del separador */
            display: flex; /* Para centrar contenido si lo hay */
            align-items: center;
            justify-content: center;

            /* Sombras */
            /* Sombra azul suave arriba */
            box-shadow: 
                /* 0 -10px 15px -3px rgba(0, 128, 197, 0.1), sombra superior */
                /* 0 10px 15px -3px rgba(0, 128, 197, 0.1); /* sombra inferior */
            
            /* Nota: Los valores de RGBA para la sombra (0, 128, 197) corresponden a tu color #0080c5 */
            /* El último valor (0.3) es la opacidad. Puedes ajustarlo. */
        }

        /* Opcional: Estilos para el contenido dentro del separador si lo añades */
        .contenido-separador {
            text-align: center;
            /* Otros estilos de texto si es necesario */
        }

        .fntColor01{color:#052340;}
        .fntColor02{color:#0080c5;}
        .fntColor03{color:#4797c6;}
        .fntColor04{color:#8ac3e8;}
        .fntColor05{color:#ff5a43;}
        .fntColor06{color:#bebebe;}
        .fntColor07{color:#ffffff;}


        /**************************************************************/
        /*********************** CONTACTO *****************************/
        /*********************//***************************************/

            #contacto {
                background-image: url('../images/fondos/fondo_999.png');
                background-size: cover;          /* La imagen cubrirá todo el div */
                background-position: center center; /* Centra la imagen */
                background-repeat: no-repeat;    /* Evita que la imagen se repita */
                min-height: 600px;               /* Altura mínima para asegurar que el fondo se vea */
                position: relative;              /* Importante para el overlay */
                padding-top: 80px;               /* Espacio arriba y abajo del contenido */
                padding-bottom: 80px;
            }

            #contacto::before { /* Esto es para el overlay oscuro que ayuda a la legibilidad del texto */
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0); /* Color negro con 50% de opacidad */
                z-index: 1; /* Asegúrate de que el overlay esté debajo del contenido pero encima de la imagen */
            }

            #contacto > .row { /* Asegura que tu contenido y formulario estén encima del overlay */
                position: relative;
                z-index: 2;
            }

            /* Si tu texto dentro de la sección de contacto es claro, esto no es necesario */
            /* Pero si el texto por defecto es oscuro y el fondo de imagen también, puedes forzar el texto a blanco */
            #contacto h2, #contacto p, #contacto a.btn-outline-light {
                color: #fff !important; /* Fuerza el color blanco para el texto */
            }
            #contacto p.text-white-50 { /* Si tienes texto con opacidad, ajústalo también */
                color: rgba(255, 255, 255, 0.8) !important;
            }

        /**************************************************************/
        /*********************** CLIENTES *****************************/
        /*********************//***************************************/

        .client-logo-circle {
            width: 150px;  /* Define el ancho del círculo. Ajusta este valor para un tamaño mayor o menor. */
            height: 150px; /* La altura debe ser igual al ancho para un círculo perfecto. */
            border-radius: 50%; /* ¡Esto crea la forma circular! */
            overflow: hidden; /* Muy importante para recortar el logo a la forma del círculo */
            display: flex; /* Usamos flexbox para centrar la imagen dentro del círculo */
            justify-content: center;
            align-items: center;
            background-color: #f8f9fa; /* Un fondo blanco-grisáceo suave para el círculo */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Una sombra sutil para el círculo */
            margin: 0 auto; /* Centra el círculo dentro de su columna si el 'col' es más ancho */
        }

        .client-logo-img {
            max-width: 100%;   /* Limita el tamaño de la imagen dentro del círculo (80% del círculo) */
            max-height: 100%;  /* Limita la altura de la imagen dentro del círculo */
            object-fit: contain; /* Ajusta la imagen para que quepa dentro del círculo sin cortarse */
            /* Puedes probar 'object-fit: cover;' si quieres que la imagen llene el círculo y no te importa que se recorte */
            filter: brightness(0.95); /* Opcional: Oscurece un poco los logos blancos para que destaquen en fondo claro */
        }

        /* Media query para ajustar el tamaño del círculo en pantallas más pequeñas si es necesario */
        @media (max-width: 767.98px) {
            .client-logo-circle {
                width: 120px; /* Más pequeño en móviles */
                height: 120px;
            }
        }