/* 
Sitio Web Creado por ITred Spa.
Direccion: Guido Reni #4190
Pedro Aguirre Cerda - Santiago - Chile
contacto@itred.cl o itred.spa@gmail.com
https://www.itred.cl
Creado, Programado y Diseñado por ITred Spa.
BPPJ 
*/


/* -------------------------------------------------------------------------------------------------------------
   ------------------------------------- INICIO ITred Spa seccion_nuestros_servicios .CSS ----------------------
   ------------------------------------------------------------------------------------------------------------- */

 /* IMPORTACION DE FUENTE RALEWAY */

/* IMPORTACION DE FUENTE RALEWAY */
@font-face {
    font-family: 'Raleway';
    src: url('fuentes/fuentes_google/fuente_raleway.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

/* TITULO 1 NUESTROS SERVICIOS */

    /* contiene el espacio exterior que integra la seccion de nuestros servicios */
    .contenedor_nuestros_servicios {
        width: 100%; /* establece el ancho completo del contenedor */
        height: 100vh; /* establece el alto completo de la ventana */
        background: #f8f4ee; /* establece el fondo crema de la seccion */
        position: relative; /* establece el posicionamiento relativo del contenedor */
        overflow: hidden; /* oculta los elementos que sobresalen del contenedor */
    }

    /* contiene y organiza verticalmente la seccion de nuestros servicios */
    .nuestros_servicios {
        width: 100%; /* establece el ancho completo del contenido */
        height: 100%; /* establece el alto completo del contenedor */
        display: flex; /* activa la distribucion flexible de los elementos */
        flex-direction: column; /* organiza los elementos en direccion vertical */
        justify-content: center; /* centra los elementos verticalmente */
        align-items: center; /* centra los elementos horizontalmente */
        position: relative; /* establece el posicionamiento relativo del contenido */
    }


/* TITULO 2 ENCABEZADO NUESTROS SERVICIOS */

    /* contiene y distribuye el titulo junto a las lineas decorativas */
    .encabezado_nuestros_servicios {
        width: 75%; /* establece el ancho del encabezado */
        display: flex; /* activa la distribucion flexible del encabezado */
        justify-content: center; /* centra los elementos horizontalmente */
        align-items: center; /* centra los elementos verticalmente */
        gap: 1.5vw; /* establece la separacion entre los elementos */
        margin-bottom: 5vh; /* establece el espacio inferior del encabezado */
    }

    /* establece la linea decorativa ubicada a la izquierda del titulo */
    .linea_izquierda_nuestros_servicios {
        flex: 1; /* permite que la linea ocupe el espacio disponible */
        height: 1.5px; /* establece el grosor de la linea */
        background-color: #c99746; /* establece el color dorado de la linea */
    }

    /* establece el diseño del titulo principal de la seccion */
    .titulo_nuestros_servicios {
        color: #c59341; /* establece el color dorado del titulo */
        font-family: 'Raleway', sans-serif; /* establece la fuente del titulo */
        font-size: 6vh; /* establece el tamaño del titulo */
        font-weight: 500; /* establece el grosor del titulo */
        white-space: nowrap; /* evita que el titulo se divida en varias lineas */
    }

    /* establece la linea decorativa ubicada a la derecha del titulo */
    .linea_derecha_nuestros_servicios {
        flex: 1; /* permite que la linea ocupe el espacio disponible */
        height: 1.5px; /* establece el grosor de la linea */
        background-color: #c99746; /* establece el color dorado de la linea */
    }


/* TITULO 3 CONTENEDOR TARJETAS NUESTROS SERVICIOS */

    /* contiene y distribuye horizontalmente las tarjetas de las asesorias */
    .contenedor_tarjetas_nuestros_servicios {
        width: 90%; /* establece el ancho del contenedor de tarjetas */
        display: grid; /* activa la distribucion mediante cuadricula */
        grid-template-columns: repeat(5, 1fr); /* establece cinco columnas iguales */
        grid-auto-rows: 50vh; /* establece el alto automatico de las filas */
        gap: 1.5vw; /* establece la separacion entre las tarjetas */
        justify-content: center; /* centra la cuadricula horizontalmente */
        align-items: stretch; /* permite que las tarjetas ocupen el alto disponible */
    }


    /* SUBTITULO 1 ASESORIA TELECOMUNICACIONES */

        /* establece el diseño de la tarjeta de telecomunicaciones */
        .tarjeta_telecomunicaciones_nuestros_servicios {
            height: 50vh; /* establece el alto de la tarjeta */
            display: flex; /* activa la distribucion flexible de la tarjeta */
            flex-direction: column; /* organiza los elementos verticalmente */
            align-items: center; /* centra los elementos horizontalmente */
            padding: 4vh 1vw; /* establece el espacio interno de la tarjeta */
            box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
            background-color: #ffffff; /* establece el fondo blanco de la tarjeta */
            border-radius: 14px; /* redondea las esquinas de la tarjeta */
            box-shadow: 0 2px 4px rgba(42, 32, 26, 0.10); /* establece la sombra de la tarjeta */
            cursor: pointer; /* indica que la tarjeta es seleccionable */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* suaviza las transiciones de la tarjeta */
        }

        /* modifica la tarjeta al posicionar el cursor */
        .tarjeta_telecomunicaciones_nuestros_servicios:hover {
            transform: translateY(-8px) scale(1.02); /* eleva y aumenta ligeramente la tarjeta */
            box-shadow: 0 16px 32px rgba(60, 45, 30, 0.20); /* aumenta la sombra durante el desplazamiento */
        }

        /* establece el tamaño del icono de telecomunicaciones */
        .imagen_telecomunicaciones_nuestros_servicios {
            width: 14vw; /* establece el ancho de la imagen */
            height: 29vh; /* establece el alto de la imagen */
            object-fit: contain; /* mantiene la proporcion de la imagen */
            flex-shrink: 0; /* evita que la imagen reduzca su tamaño */
        }

        /* establece la linea decorativa de la tarjeta de telecomunicaciones */
        .linea_telecomunicaciones_nuestros_servicios {
            width: 90%; /* establece el ancho de la linea */
            height: 1px; /* establece el grosor de la linea */
            margin-top: 3vh; /* establece el espacio superior de la linea */
            margin-bottom: 3vh; /* establece el espacio inferior de la linea */
            background-color: #c99746; /* establece el color dorado de la linea */
            flex-shrink: 0; /* evita que la linea reduzca su tamaño */
        }

        /* establece el diseño del texto de telecomunicaciones */
        .texto_telecomunicaciones_nuestros_servicios {
            color: #c59341; /* establece el color dorado del texto */
            font-family: 'Raleway', sans-serif; /* establece la fuente del texto */
            font-size: 2.5vh; /* establece el tamaño del texto */
            font-weight: 600; /* establece el grosor del texto */
            line-height: 1.25; /* establece la separacion entre lineas */
            text-align: center; /* centra el texto horizontalmente */
        }


    /* SUBTITULO 2 ASESORIA INMOBILIARIA */

        /* establece el diseño de la tarjeta inmobiliaria */
        .tarjeta_inmobiliaria_nuestros_servicios {
            height: 50vh; /* establece el alto de la tarjeta */
            display: flex; /* activa la distribucion flexible de la tarjeta */
            flex-direction: column; /* organiza los elementos verticalmente */
            align-items: center; /* centra los elementos horizontalmente */
            padding: 4vh 1vw; /* establece el espacio interno de la tarjeta */
            box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
            background-color: #ffffff; /* establece el fondo blanco de la tarjeta */
            border-radius: 14px; /* redondea las esquinas de la tarjeta */
            box-shadow: 0 2px 4px rgba(42, 32, 26, 0.10); /* establece la sombra de la tarjeta */
            cursor: pointer; /* indica que la tarjeta es seleccionable */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* suaviza las transiciones de la tarjeta */
        }

        /* modifica la tarjeta al posicionar el cursor */
        .tarjeta_inmobiliaria_nuestros_servicios:hover {
            transform: translateY(-8px) scale(1.02); /* eleva y aumenta ligeramente la tarjeta */
            box-shadow: 0 16px 32px rgba(60, 45, 30, 0.20); /* aumenta la sombra durante el desplazamiento */
        }

        /* establece el tamaño del icono inmobiliario */
        .imagen_inmobiliaria_nuestros_servicios {
            width: 14vw; /* establece el ancho de la imagen */
            height: 29vh; /* establece el alto de la imagen */
            object-fit: contain; /* mantiene la proporcion de la imagen */
            flex-shrink: 0; /* evita que la imagen reduzca su tamaño */
        }

        /* establece la linea decorativa de la tarjeta inmobiliaria */
        .linea_inmobiliaria_nuestros_servicios {
            width: 90%; /* establece el ancho de la linea */
            height: 1px; /* establece el grosor de la linea */
            margin-top: 3vh; /* establece el espacio superior de la linea */
            margin-bottom: 3vh; /* establece el espacio inferior de la linea */
            background-color: #c99746; /* establece el color dorado de la linea */
            flex-shrink: 0; /* evita que la linea reduzca su tamaño */
        }

        /* establece el diseño del texto inmobiliario */
        .texto_inmobiliaria_nuestros_servicios {
            color: #c59341; /* establece el color dorado del texto */
            font-family: 'Raleway', sans-serif; /* establece la fuente del texto */
            font-size: 2.5vh; /* establece el tamaño del texto */
            font-weight: 600; /* establece el grosor del texto */
            line-height: 1.25; /* establece la separacion entre lineas */
            text-align: center; /* centra el texto horizontalmente */
        }


    /* SUBTITULO 3 ASESORIA CAUSAS DE FAMILIA */

        /* establece el diseño de la tarjeta de familia */
        .tarjeta_familia_nuestros_servicios {
            height: 50vh; /* establece el alto de la tarjeta */
            display: flex; /* activa la distribucion flexible de la tarjeta */
            flex-direction: column; /* organiza los elementos verticalmente */
            align-items: center; /* centra los elementos horizontalmente */
            padding: 4vh 1vw; /* establece el espacio interno de la tarjeta */
            box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
            background-color: #ffffff; /* establece el fondo blanco de la tarjeta */
            border-radius: 14px; /* redondea las esquinas de la tarjeta */
            box-shadow: 0 2px 4px rgba(42, 32, 26, 0.10); /* establece la sombra de la tarjeta */
            cursor: pointer; /* indica que la tarjeta es seleccionable */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* suaviza las transiciones de la tarjeta */
        }

        /* modifica la tarjeta al posicionar el cursor */
        .tarjeta_familia_nuestros_servicios:hover {
            transform: translateY(-8px) scale(1.02); /* eleva y aumenta ligeramente la tarjeta */
            box-shadow: 0 16px 32px rgba(60, 45, 30, 0.20); /* aumenta la sombra durante el desplazamiento */
        }

        /* establece el tamaño del icono de familia */
        .imagen_familia_nuestros_servicios {
            width: 14vw; /* establece el ancho de la imagen */
            height: 29vh; /* establece el alto de la imagen */
            object-fit: contain; /* mantiene la proporcion de la imagen */
            flex-shrink: 0; /* evita que la imagen reduzca su tamaño */
        }

        /* establece la linea decorativa de la tarjeta de familia */
        .linea_familia_nuestros_servicios {
            width: 90%; /* establece el ancho de la linea */
            height: 1px; /* establece el grosor de la linea */
            margin-top: 3vh; /* establece el espacio superior de la linea */
            margin-bottom: 3vh; /* establece el espacio inferior de la linea */
            background-color: #c99746; /* establece el color dorado de la linea */
            flex-shrink: 0; /* evita que la linea reduzca su tamaño */
        }

        /* establece el diseño del texto de familia */
        .texto_familia_nuestros_servicios {
            color: #c59341; /* establece el color dorado del texto */
            font-family: 'Raleway', sans-serif; /* establece la fuente del texto */
            font-size: 2.5vh; /* establece el tamaño del texto */
            font-weight: 600; /* establece el grosor del texto */
            line-height: 1.25; /* establece la separacion entre lineas */
            text-align: center; /* centra el texto horizontalmente */
        }


    /* SUBTITULO 4 ASESORIA CAUSAS LABORALES */

        /* establece el diseño de la tarjeta laboral */
        .tarjeta_laborales_nuestros_servicios {
            height: 50vh; /* establece el alto de la tarjeta */
            display: flex; /* activa la distribucion flexible de la tarjeta */
            flex-direction: column; /* organiza los elementos verticalmente */
            align-items: center; /* centra los elementos horizontalmente */
            padding: 4vh 1vw; /* establece el espacio interno de la tarjeta */
            box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
            background-color: #ffffff; /* establece el fondo blanco de la tarjeta */
            border-radius: 14px; /* redondea las esquinas de la tarjeta */
            box-shadow: 0 2px 4px rgba(42, 32, 26, 0.10); /* establece la sombra de la tarjeta */
            cursor: pointer; /* indica que la tarjeta es seleccionable */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* suaviza las transiciones de la tarjeta */
        }

        /* modifica la tarjeta al posicionar el cursor */
        .tarjeta_laborales_nuestros_servicios:hover {
            transform: translateY(-8px) scale(1.02); /* eleva y aumenta ligeramente la tarjeta */
            box-shadow: 0 16px 32px rgba(60, 45, 30, 0.20); /* aumenta la sombra durante el desplazamiento */
        }

        /* establece el tamaño del icono laboral */
        .imagen_laborales_nuestros_servicios {
            width: 14vw; /* establece el ancho de la imagen */
            height: 29vh; /* establece el alto de la imagen */
            object-fit: contain; /* mantiene la proporcion de la imagen */
            flex-shrink: 0; /* evita que la imagen reduzca su tamaño */
        }

        /* establece la linea decorativa de la tarjeta laboral */
        .linea_laborales_nuestros_servicios {
            width: 90%; /* establece el ancho de la linea */
            height: 1px; /* establece el grosor de la linea */
            margin-top: 3vh; /* establece el espacio superior de la linea */
            margin-bottom: 3vh; /* establece el espacio inferior de la linea */
            background-color: #c99746; /* establece el color dorado de la linea */
            flex-shrink: 0; /* evita que la linea reduzca su tamaño */
        }

        /* establece el diseño del texto laboral */
        .texto_laborales_nuestros_servicios {
            color: #c59341; /* establece el color dorado del texto */
            font-family: 'Raleway', sans-serif; /* establece la fuente del texto */
            font-size: 2.5vh; /* establece el tamaño del texto */
            font-weight: 600; /* establece el grosor del texto */
            line-height: 1.25; /* establece la separacion entre lineas */
            text-align: center; /* centra el texto horizontalmente */
        }


    /* SUBTITULO 5 ASESORIA CAUSAS CIVILES */

        /* establece el diseño de la tarjeta civil */
        .tarjeta_civiles_nuestros_servicios {
            height: 50vh; /* establece el alto de la tarjeta */
            display: flex; /* activa la distribucion flexible de la tarjeta */
            flex-direction: column; /* organiza los elementos verticalmente */
            align-items: center; /* centra los elementos horizontalmente */
            padding: 4vh 1vw; /* establece el espacio interno de la tarjeta */
            box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
            background-color: #ffffff; /* establece el fondo blanco de la tarjeta */
            border-radius: 14px; /* redondea las esquinas de la tarjeta */
            box-shadow: 0 2px 4px rgba(42, 32, 26, 0.10); /* establece la sombra de la tarjeta */
            cursor: pointer; /* indica que la tarjeta es seleccionable */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* suaviza las transiciones de la tarjeta */
        }

        /* modifica la tarjeta al posicionar el cursor */
        .tarjeta_civiles_nuestros_servicios:hover {
            transform: translateY(-4px); /* eleva ligeramente la tarjeta */
            box-shadow: 0 12px 26px rgba(60, 45, 30, 0.12); /* aumenta la sombra durante el desplazamiento */
        }

        /* establece el tamaño del icono civil */
        .imagen_civiles_nuestros_servicios {
            width: 14vw; /* establece el ancho de la imagen */
            height: 29vh; /* establece el alto de la imagen */
            object-fit: contain; /* mantiene la proporcion de la imagen */
            flex-shrink: 0; /* evita que la imagen reduzca su tamaño */
        }

        /* establece la linea decorativa de la tarjeta civil */
        .linea_civiles_nuestros_servicios {
            width: 90%; /* establece el ancho de la linea */
            height: 1px; /* establece el grosor de la linea */
            margin-top: 3vh; /* establece el espacio superior de la linea */
            margin-bottom: 3vh; /* establece el espacio inferior de la linea */
            background-color: #c99746; /* establece el color dorado de la linea */
            flex-shrink: 0; /* evita que la linea reduzca su tamaño */
        }

        /* establece el diseño del texto civil */
        .texto_civiles_nuestros_servicios {
            color: #c59341; /* establece el color dorado del texto */
            font-family: 'Raleway', sans-serif; /* establece la fuente del texto */
            font-size: 2.5vh; /* establece el tamaño del texto */
            font-weight: 600; /* establece el grosor del texto */
            line-height: 1.25; /* establece la separacion entre lineas */
            text-align: center; /* centra el texto horizontalmente */
        }


/* TITULO 4 MODAL TELECOMUNICACIONES */

    /* establece el fondo general del modal y lo mantiene oculto inicialmente */
    .modal_telecomunicaciones_nuestros_servicios {
        width: 100%; /* establece el ancho completo del modal */
        height: 100%; /* establece el alto completo del modal */
        position: fixed; /* fija el modal respecto a la ventana */
        top: 0; /* posiciona el modal en el extremo superior */
        left: 0; /* posiciona el modal en el extremo izquierdo */
        display: none; /* oculta el modal inicialmente */
        justify-content: center; /* centra el contenido horizontalmente */
        align-items: center; /* centra el contenido verticalmente */
        background-color: rgba(25, 20, 16, 0.72); /* establece el fondo oscuro transparente */
        z-index: 9999; /* coloca el modal sobre los demas elementos */
        box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
        padding: 2vh 2vw; /* establece el espacio interior del modal */
    }

    /* establece el diseño de la tarjeta flotante del modal */
    .contenido_modal_telecomunicaciones_nuestros_servicios {
        position: relative; /* permite posicionar elementos internos */
        width: 70%; /* establece el ancho del contenido */
        max-width: 1000px; /* limita el ancho maximo del contenido */
        height: 70vh; /* establece el alto del contenido */
        display: flex; /* distribuye la imagen y la informacion */
        box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
        background-color: #ffffff; /* establece el fondo blanco del contenido */
        border-radius: 14px; /* redondea las esquinas del contenido */
        box-shadow: 0 5px 15px rgba(42, 32, 26, 0.20); /* establece la sombra del contenido */
        overflow: hidden; /* oculta los elementos que sobresalen */
    }


    /* SUBTITULO 1 IMAGEN MODAL TELECOMUNICACIONES */

        /* establece el espacio destinado a la imagen */
        .imagen_modal_telecomunicaciones_nuestros_servicios {
            width: 44%; /* establece el ancho del contenedor de imagen */
            height: 100%; /* establece el alto completo del contenedor */
            overflow: hidden; /* oculta las partes sobresalientes de la imagen */
            flex-shrink: 0; /* evita que el contenedor reduzca su tamaño */
        }

        /* establece el tamaño y ajuste de la imagen */
        .imagen_modal_telecomunicaciones_nuestros_servicios img {
            width: 100%; /* ocupa todo el ancho del contenedor */
            height: 100%; /* ocupa todo el alto del contenedor */
            display: block; /* elimina el espacio adicional de imagen inline */
            object-fit: cover; /* adapta la imagen manteniendo su proporcion */
        }


    /* SUBTITULO 2 INFORMACION MODAL TELECOMUNICACIONES */

        /* contiene y organiza la informacion ubicada al lado derecho */
        .informacion_modal_telecomunicaciones_nuestros_servicios {
            position: relative; /* permite posicionar el boton de cierre */
            width: 56%; /* establece el ancho del contenido informativo */
            height: 100%; /* establece el alto completo del contenido */
            display: flex; /* activa la distribucion flexible */
            flex-direction: column; /* organiza la informacion verticalmente */
            justify-content: flex-start; /* inicia el contenido desde arriba */
            padding: 7vh 4vw 4vh 4vw; /* establece el espacio interior del contenido */
            box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
        }

        /* establece el diseño del boton de cierre */
        .boton_cerrar_modal_telecomunicaciones_nuestros_servicios {
            position: absolute; /* posiciona el boton dentro del contenido */
            top: 1.5vh; /* establece la posicion superior del boton */
            right: 1.2vw; /* establece la posicion derecha del boton */
            width: 35px; /* establece el ancho del boton */
            height: 35px; /* establece el alto del boton */
            display: flex; /* activa la distribucion flexible del boton */
            justify-content: center; /* centra el simbolo horizontalmente */
            align-items: center; /* centra el simbolo verticalmente */
            padding: 0; /* elimina el espacio interno adicional */
            border: none; /* elimina el borde del boton */
            background-color: transparent; /* mantiene transparente el fondo */
            color: #c59341; /* establece el color dorado del simbolo */
            font-family: 'Raleway', sans-serif; /* establece la fuente del simbolo */
            font-size: 32px; /* establece el tamaño del simbolo */
            font-weight: 400; /* establece el grosor del simbolo */
            line-height: 1; /* establece la altura de linea del simbolo */
            cursor: pointer; /* indica que el boton es seleccionable */
        }

        /* modifica el boton de cierre al posicionar el cursor */
        .boton_cerrar_modal_telecomunicaciones_nuestros_servicios:hover {
            color: #9f7021; /* cambia el color del simbolo al pasar el cursor */
        }

        /* contiene el titulo principal y las lineas decorativas */
        .encabezado_modal_telecomunicaciones_nuestros_servicios {
            width: 100%; /* ocupa todo el ancho disponible */
            display: flex; /* activa la distribucion flexible */
            justify-content: center; /* centra los elementos horizontalmente */
            align-items: center; /* centra los elementos verticalmente */
            gap: 1.2vw; /* establece la separacion entre los elementos */
            margin-bottom: 3vh; /* establece el espacio inferior del encabezado */
        }

        /* establece la linea decorativa izquierda del modal */
        .linea_izquierda_modal_telecomunicaciones_nuestros_servicios {
            width: 3.5vw; /* establece el ancho de la linea */
            height: 1px; /* establece el grosor de la linea */
            background-color: #c99746; /* establece el color dorado de la linea */
            flex-shrink: 0; /* evita que la linea reduzca su tamaño */
        }

        /* establece el titulo principal del modal */
        .titulo_principal_modal_telecomunicaciones_nuestros_servicios {
            color: #c59341; /* establece el color dorado del titulo */
            font-family: 'Raleway', sans-serif; /* establece la fuente del titulo */
            font-size: 3vh; /* establece el tamaño del titulo */
            font-weight: 600; /* establece el grosor del titulo */
            line-height: 1.2; /* establece la separacion entre lineas */
            text-align: center; /* centra el titulo */
            white-space: nowrap; /* evita que el titulo se divida */
        }

        /* establece la linea decorativa derecha del modal */
        .linea_derecha_modal_telecomunicaciones_nuestros_servicios {
            width: 3.5vw; /* establece el ancho de la linea */
            height: 1px; /* establece el grosor de la linea */
            background-color: #c99746; /* establece el color dorado de la linea */
            flex-shrink: 0; /* evita que la linea reduzca su tamaño */
        }

        /* establece el subtitulo del modal */
        .subtitulo_modal_telecomunicaciones_nuestros_servicios {
            width: 100%; /* ocupa todo el ancho disponible */
            margin-bottom: 4vh; /* establece el espacio inferior del subtitulo */
            color: #c59341; /* establece el color dorado del subtitulo */
            font-family: 'Raleway', sans-serif; /* establece la fuente del subtitulo */
            font-size: 2.2vh; /* establece el tamaño del subtitulo */
            font-weight: 600; /* establece el grosor del subtitulo */
            line-height: 1.5; /* establece la separacion entre lineas */
            text-align: justify; /* distribuye el texto uniformemente */
        }

        /* establece el contenido informativo del modal */
        .texto_modal_telecomunicaciones_nuestros_servicios {
            width: 100%; /* ocupa todo el ancho disponible */
            color: #7e6340; /* establece el color del texto */
            font-family: 'Raleway', sans-serif; /* establece la fuente del texto */
            font-size: 2vh; /* establece el tamaño del texto */
            font-weight: 400; /* establece el grosor del texto */
            line-height: 1.45; /* establece la separacion entre lineas */
            text-align: justify; /* distribuye el texto uniformemente */
        }

        /* establece la posicion general de la lista */
        .texto_modal_telecomunicaciones_nuestros_servicios ul {
            margin: 0; /* elimina el margen predeterminado de la lista */
            padding-left: 1.3vw; /* establece la sangria de la lista */
        }

        /* establece el espacio entre los elementos de la lista */
        .texto_modal_telecomunicaciones_nuestros_servicios li {
            margin-bottom: 0.8vh; /* establece el espacio inferior de cada elemento */
        }

        /* elimina el margen inferior del ultimo elemento */
        .texto_modal_telecomunicaciones_nuestros_servicios li:last-child {
            margin-bottom: 0; /* elimina el espacio inferior del ultimo elemento */
        }


/* TITULO 5 MODAL INMOBILIARIA */

    /* establece el fondo general del modal y lo mantiene oculto inicialmente */
    .modal_inmobiliaria_nuestros_servicios {
        width: 100%; /* establece el ancho completo del modal */
        height: 100%; /* establece el alto completo del modal */
        position: fixed; /* fija el modal respecto a la ventana */
        top: 0; /* posiciona el modal en el extremo superior */
        left: 0; /* posiciona el modal en el extremo izquierdo */
        display: none; /* oculta el modal inicialmente */
        justify-content: center; /* centra el contenido horizontalmente */
        align-items: center; /* centra el contenido verticalmente */
        background-color: rgba(25, 20, 16, 0.72); /* establece el fondo oscuro transparente */
        z-index: 9999; /* coloca el modal sobre los demas elementos */
        box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
        padding: 2vh 2vw; /* establece el espacio interior del modal */
    }

    /* establece el diseño de la tarjeta flotante del modal */
    .contenido_modal_inmobiliaria_nuestros_servicios {
        position: relative; /* permite posicionar elementos internos */
        width: 70%; /* establece el ancho del contenido */
        max-width: 1000px; /* limita el ancho maximo del contenido */
        height: 70vh; /* establece el alto del contenido */
        display: flex; /* distribuye la imagen y la informacion */
        box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
        background-color: #ffffff; /* establece el fondo blanco del contenido */
        border-radius: 14px; /* redondea las esquinas del contenido */
        box-shadow: 0 5px 15px rgba(42, 32, 26, 0.20); /* establece la sombra del contenido */
        overflow: hidden; /* oculta los elementos que sobresalen */
    }


    /* SUBTITULO 1 IMAGEN MODAL INMOBILIARIA */

        /* establece el espacio destinado a la imagen */
        .imagen_modal_inmobiliaria_nuestros_servicios {
            width: 44%; /* establece el ancho del contenedor de imagen */
            height: 100%; /* establece el alto completo del contenedor */
            overflow: hidden; /* oculta las partes sobresalientes de la imagen */
            flex-shrink: 0; /* evita que el contenedor reduzca su tamaño */
        }

        /* establece el tamaño y ajuste de la imagen */
        .imagen_modal_inmobiliaria_nuestros_servicios img {
            width: 100%; /* ocupa todo el ancho del contenedor */
            height: 100%; /* ocupa todo el alto del contenedor */
            display: block; /* elimina el espacio adicional de imagen inline */
            object-fit: cover; /* adapta la imagen manteniendo su proporcion */
        }


    /* SUBTITULO 2 INFORMACION MODAL INMOBILIARIA */

        /* contiene y organiza la informacion ubicada al lado derecho */
        .informacion_modal_inmobiliaria_nuestros_servicios {
            position: relative; /* permite posicionar el boton de cierre */
            width: 56%; /* establece el ancho del contenido informativo */
            height: 100%; /* establece el alto completo del contenido */
            display: flex; /* activa la distribucion flexible */
            flex-direction: column; /* organiza la informacion verticalmente */
            justify-content: flex-start; /* inicia el contenido desde arriba */
            padding: 7vh 4vw 4vh 4vw; /* establece el espacio interior del contenido */
            box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
        }

        /* establece el diseño del boton de cierre */
        .boton_cerrar_modal_inmobiliaria_nuestros_servicios {
            position: absolute; /* posiciona el boton dentro del contenido */
            top: 1.5vh; /* establece la posicion superior del boton */
            right: 1.2vw; /* establece la posicion derecha del boton */
            width: 35px; /* establece el ancho del boton */
            height: 35px; /* establece el alto del boton */
            display: flex; /* activa la distribucion flexible del boton */
            justify-content: center; /* centra el simbolo horizontalmente */
            align-items: center; /* centra el simbolo verticalmente */
            padding: 0; /* elimina el espacio interno adicional */
            border: none; /* elimina el borde del boton */
            background-color: transparent; /* mantiene transparente el fondo */
            color: #c59341; /* establece el color dorado del simbolo */
            font-family: 'Raleway', sans-serif; /* establece la fuente del simbolo */
            font-size: 32px; /* establece el tamaño del simbolo */
            font-weight: 400; /* establece el grosor del simbolo */
            line-height: 1; /* establece la altura de linea del simbolo */
            cursor: pointer; /* indica que el boton es seleccionable */
        }

        /* modifica el boton de cierre al posicionar el cursor */
        .boton_cerrar_modal_inmobiliaria_nuestros_servicios:hover {
            color: #9f7021; /* cambia el color del simbolo al pasar el cursor */
        }

        /* contiene el titulo principal y las lineas decorativas */
        .encabezado_modal_inmobiliaria_nuestros_servicios {
            width: 100%; /* ocupa todo el ancho disponible */
            display: flex; /* activa la distribucion flexible */
            justify-content: center; /* centra los elementos horizontalmente */
            align-items: center; /* centra los elementos verticalmente */
            gap: 1.2vw; /* establece la separacion entre los elementos */
            margin-bottom: 3vh; /* establece el espacio inferior del encabezado */
        }

        /* establece la linea decorativa izquierda del modal */
        .linea_izquierda_modal_inmobiliaria_nuestros_servicios {
            width: 3.5vw; /* establece el ancho de la linea */
            height: 1px; /* establece el grosor de la linea */
            background-color: #c99746; /* establece el color dorado de la linea */
            flex-shrink: 0; /* evita que la linea reduzca su tamaño */
        }

        /* establece el titulo principal del modal */
        .titulo_principal_modal_inmobiliaria_nuestros_servicios {
            color: #c59341; /* establece el color dorado del titulo */
            font-family: 'Raleway', sans-serif; /* establece la fuente del titulo */
            font-size: 3vh; /* establece el tamaño del titulo */
            font-weight: 600; /* establece el grosor del titulo */
            line-height: 1.2; /* establece la separacion entre lineas */
            text-align: center; /* centra el titulo */
            white-space: nowrap; /* evita que el titulo se divida */
        }

        /* establece la linea decorativa derecha del modal */
        .linea_derecha_modal_inmobiliaria_nuestros_servicios {
            width: 3.5vw; /* establece el ancho de la linea */
            height: 1px; /* establece el grosor de la linea */
            background-color: #c99746; /* establece el color dorado de la linea */
            flex-shrink: 0; /* evita que la linea reduzca su tamaño */
        }

        /* establece el subtitulo del modal */
        .subtitulo_modal_inmobiliaria_nuestros_servicios {
            width: 100%; /* ocupa todo el ancho disponible */
            margin-bottom: 4vh; /* establece el espacio inferior del subtitulo */
            color: #c59341; /* establece el color dorado del subtitulo */
            font-family: 'Raleway', sans-serif; /* establece la fuente del subtitulo */
            font-size: 2.2vh; /* establece el tamaño del subtitulo */
            font-weight: 600; /* establece el grosor del subtitulo */
            line-height: 1.5; /* establece la separacion entre lineas */
            text-align: justify; /* distribuye el texto uniformemente */
        }

        /* establece el contenido informativo del modal */
        .texto_modal_inmobiliaria_nuestros_servicios {
            width: 100%; /* ocupa todo el ancho disponible */
            color: #7e6340; /* establece el color del texto */
            font-family: 'Raleway', sans-serif; /* establece la fuente del texto */
            font-size: 2vh; /* establece el tamaño del texto */
            font-weight: 400; /* establece el grosor del texto */
            line-height: 1.45; /* establece la separacion entre lineas */
            text-align: justify; /* distribuye el texto uniformemente */
        }

        /* establece la posicion general de la lista */
        .texto_modal_inmobiliaria_nuestros_servicios ul {
            margin: 0; /* elimina el margen predeterminado de la lista */
            padding-left: 1.3vw; /* establece la sangria de la lista */
        }

        /* establece el espacio entre los elementos de la lista */
        .texto_modal_inmobiliaria_nuestros_servicios li {
            margin-bottom: 0.8vh; /* establece el espacio inferior de cada elemento */
        }

        /* elimina el margen inferior del ultimo elemento */
        .texto_modal_inmobiliaria_nuestros_servicios li:last-child {
            margin-bottom: 0; /* elimina el espacio inferior del ultimo elemento */
        }


/* TITULO 6 MODAL FAMILIA */

    /* establece el fondo general del modal y lo mantiene oculto inicialmente */
    .modal_familia_nuestros_servicios {
        width: 100%; /* establece el ancho completo del modal */
        height: 100%; /* establece el alto completo del modal */
        position: fixed; /* fija el modal respecto a la ventana */
        top: 0; /* posiciona el modal en el extremo superior */
        left: 0; /* posiciona el modal en el extremo izquierdo */
        display: none; /* oculta el modal inicialmente */
        justify-content: center; /* centra el contenido horizontalmente */
        align-items: center; /* centra el contenido verticalmente */
        background-color: rgba(25, 20, 16, 0.72); /* establece el fondo oscuro transparente */
        z-index: 9999; /* coloca el modal sobre los demas elementos */
        box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
        padding: 2vh 2vw; /* establece el espacio interior del modal */
    }

    /* establece el diseño de la tarjeta flotante del modal */
    .contenido_modal_familia_nuestros_servicios {
        position: relative; /* permite posicionar elementos internos */
        width: 70%; /* establece el ancho del contenido */
        max-width: 1000px; /* limita el ancho maximo del contenido */
        height: 70vh; /* establece el alto del contenido */
        display: flex; /* distribuye la imagen y la informacion */
        box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
        background-color: #ffffff; /* establece el fondo blanco del contenido */
        border-radius: 14px; /* redondea las esquinas del contenido */
        box-shadow: 0 5px 15px rgba(42, 32, 26, 0.20); /* establece la sombra del contenido */
        overflow: hidden; /* oculta los elementos que sobresalen */
    }


    /* SUBTITULO 1 IMAGEN MODAL FAMILIA */

        /* establece el espacio destinado a la imagen */
        .imagen_modal_familia_nuestros_servicios {
            width: 44%; /* establece el ancho del contenedor de imagen */
            height: 100%; /* establece el alto completo del contenedor */
            overflow: hidden; /* oculta las partes sobresalientes de la imagen */
            flex-shrink: 0; /* evita que el contenedor reduzca su tamaño */
        }

        /* establece el tamaño y ajuste de la imagen */
        .imagen_modal_familia_nuestros_servicios img {
            width: 100%; /* ocupa todo el ancho del contenedor */
            height: 100%; /* ocupa todo el alto del contenedor */
            display: block; /* elimina el espacio adicional de imagen inline */
            object-fit: cover; /* adapta la imagen manteniendo su proporcion */
        }


    /* SUBTITULO 2 INFORMACION MODAL FAMILIA */

        /* contiene y organiza la informacion ubicada al lado derecho */
        .informacion_modal_familia_nuestros_servicios {
            position: relative; /* permite posicionar el boton de cierre */
            width: 56%; /* establece el ancho del contenido informativo */
            height: 100%; /* establece el alto completo del contenido */
            display: flex; /* activa la distribucion flexible */
            flex-direction: column; /* organiza la informacion verticalmente */
            justify-content: flex-start; /* inicia el contenido desde arriba */
            padding: 7vh 4vw 4vh 4vw; /* establece el espacio interior del contenido */
            box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
        }

        /* establece el diseño del boton de cierre */
        .boton_cerrar_modal_familia_nuestros_servicios {
            position: absolute; /* posiciona el boton dentro del contenido */
            top: 1.5vh; /* establece la posicion superior del boton */
            right: 1.2vw; /* establece la posicion derecha del boton */
            width: 35px; /* establece el ancho del boton */
            height: 35px; /* establece el alto del boton */
            display: flex; /* activa la distribucion flexible del boton */
            justify-content: center; /* centra el simbolo horizontalmente */
            align-items: center; /* centra el simbolo verticalmente */
            padding: 0; /* elimina el espacio interno adicional */
            border: none; /* elimina el borde del boton */
            background-color: transparent; /* mantiene transparente el fondo */
            color: #c59341; /* establece el color dorado del simbolo */
            font-family: 'Raleway', sans-serif; /* establece la fuente del simbolo */
            font-size: 32px; /* establece el tamaño del simbolo */
            font-weight: 400; /* establece el grosor del simbolo */
            line-height: 1; /* establece la altura de linea del simbolo */
            cursor: pointer; /* indica que el boton es seleccionable */
        }

        /* modifica el boton de cierre al posicionar el cursor */
        .boton_cerrar_modal_familia_nuestros_servicios:hover {
            color: #9f7021; /* cambia el color del simbolo al pasar el cursor */
        }

        /* contiene el titulo principal y las lineas decorativas */
        .encabezado_modal_familia_nuestros_servicios {
            width: 100%; /* ocupa todo el ancho disponible */
            display: flex; /* activa la distribucion flexible */
            justify-content: center; /* centra los elementos horizontalmente */
            align-items: center; /* centra los elementos verticalmente */
            gap: 1.2vw; /* establece la separacion entre los elementos */
            margin-bottom: 3vh; /* establece el espacio inferior del encabezado */
        }

        /* establece la linea decorativa izquierda del modal */
        .linea_izquierda_modal_familia_nuestros_servicios {
            width: 3.5vw; /* establece el ancho de la linea */
            height: 1px; /* establece el grosor de la linea */
            background-color: #c99746; /* establece el color dorado de la linea */
            flex-shrink: 0; /* evita que la linea reduzca su tamaño */
        }

        /* establece el titulo principal del modal */
        .titulo_principal_modal_familia_nuestros_servicios {
            color: #c59341; /* establece el color dorado del titulo */
            font-family: 'Raleway', sans-serif; /* establece la fuente del titulo */
            font-size: 3vh; /* establece el tamaño del titulo */
            font-weight: 600; /* establece el grosor del titulo */
            line-height: 1.2; /* establece la separacion entre lineas */
            text-align: center; /* centra el titulo */
            white-space: nowrap; /* evita que el titulo se divida */
        }

        /* establece la linea decorativa derecha del modal */
        .linea_derecha_modal_familia_nuestros_servicios {
            width: 3.5vw; /* establece el ancho de la linea */
            height: 1px; /* establece el grosor de la linea */
            background-color: #c99746; /* establece el color dorado de la linea */
            flex-shrink: 0; /* evita que la linea reduzca su tamaño */
        }

        /* establece el subtitulo del modal */
        .subtitulo_modal_familia_nuestros_servicios {
            width: 100%; /* ocupa todo el ancho disponible */
            margin-bottom: 4vh; /* establece el espacio inferior del subtitulo */
            color: #c59341; /* establece el color dorado del subtitulo */
            font-family: 'Raleway', sans-serif; /* establece la fuente del subtitulo */
            font-size: 2.2vh; /* establece el tamaño del subtitulo */
            font-weight: 600; /* establece el grosor del subtitulo */
            line-height: 1.5; /* establece la separacion entre lineas */
            text-align: justify; /* distribuye el texto uniformemente */
        }

        /* establece el contenido informativo del modal */
        .texto_modal_familia_nuestros_servicios {
            width: 100%; /* ocupa todo el ancho disponible */
            color: #7e6340; /* establece el color del texto */
            font-family: 'Raleway', sans-serif; /* establece la fuente del texto */
            font-size: 2vh; /* establece el tamaño del texto */
            font-weight: 400; /* establece el grosor del texto */
            line-height: 1.35; /* establece la separacion entre lineas */
            text-align: justify; /* distribuye el texto uniformemente */
        }

        /* establece la posicion general de la lista */
        .texto_modal_familia_nuestros_servicios ul {
            margin: 0; /* elimina el margen predeterminado de la lista */
            padding-left: 1.3vw; /* establece la sangria de la lista */
        }

        /* establece el espacio entre los elementos de la lista */
        .texto_modal_familia_nuestros_servicios li {
            margin-bottom: 0.8vh; /* establece el espacio inferior de cada elemento */
        }

        /* elimina el margen inferior del ultimo elemento */
        .texto_modal_familia_nuestros_servicios li:last-child {
            margin-bottom: 0; /* elimina el espacio inferior del ultimo elemento */
        }


/* TITULO 7 MODAL LABORALES */

    /* establece el fondo general del modal y lo mantiene oculto inicialmente */
    .modal_laborales_nuestros_servicios {
        width: 100%; /* establece el ancho completo del modal */
        height: 100%; /* establece el alto completo del modal */
        position: fixed; /* fija el modal respecto a la ventana */
        top: 0; /* posiciona el modal en el extremo superior */
        left: 0; /* posiciona el modal en el extremo izquierdo */
        display: none; /* oculta el modal inicialmente */
        justify-content: center; /* centra el contenido horizontalmente */
        align-items: center; /* centra el contenido verticalmente */
        background-color: rgba(25, 20, 16, 0.72); /* establece el fondo oscuro transparente */
        z-index: 9999; /* coloca el modal sobre los demas elementos */
        box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
        padding: 2vh 2vw; /* establece el espacio interior del modal */
    }

    /* establece el diseño de la tarjeta flotante del modal */
    .contenido_modal_laborales_nuestros_servicios {
        position: relative; /* permite posicionar elementos internos */
        width: 70%; /* establece el ancho del contenido */
        max-width: 1000px; /* limita el ancho maximo del contenido */
        height: 70vh; /* establece el alto del contenido */
        display: flex; /* distribuye la imagen y la informacion */
        box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
        background-color: #ffffff; /* establece el fondo blanco del contenido */
        border-radius: 14px; /* redondea las esquinas del contenido */
        box-shadow: 0 5px 15px rgba(42, 32, 26, 0.20); /* establece la sombra del contenido */
        overflow: hidden; /* oculta los elementos que sobresalen */
    }


    /* SUBTITULO 1 IMAGEN MODAL LABORALES */

        /* establece el espacio destinado a la imagen */
        .imagen_modal_laborales_nuestros_servicios {
            width: 44%; /* establece el ancho del contenedor de imagen */
            height: 100%; /* establece el alto completo del contenedor */
            overflow: hidden; /* oculta las partes sobresalientes de la imagen */
            flex-shrink: 0; /* evita que el contenedor reduzca su tamaño */
        }

        /* establece el tamaño y ajuste de la imagen */
        .imagen_modal_laborales_nuestros_servicios img {
            width: 100%; /* ocupa todo el ancho del contenedor */
            height: 100%; /* ocupa todo el alto del contenedor */
            display: block; /* elimina el espacio adicional de imagen inline */
            object-fit: cover; /* adapta la imagen manteniendo su proporcion */
        }


    /* SUBTITULO 2 INFORMACION MODAL LABORALES */

        /* contiene y organiza la informacion ubicada al lado derecho */
        .informacion_modal_laborales_nuestros_servicios {
            position: relative; /* permite posicionar el boton de cierre */
            width: 56%; /* establece el ancho del contenido informativo */
            height: 100%; /* establece el alto completo del contenido */
            display: flex; /* activa la distribucion flexible */
            flex-direction: column; /* organiza la informacion verticalmente */
            justify-content: flex-start; /* inicia el contenido desde arriba */
            padding: 7vh 4vw 4vh 4vw; /* establece el espacio interior del contenido */
            box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
        }

        /* establece el diseño del boton de cierre */
        .boton_cerrar_modal_laborales_nuestros_servicios {
            position: absolute; /* posiciona el boton dentro del contenido */
            top: 1.5vh; /* establece la posicion superior del boton */
            right: 1.2vw; /* establece la posicion derecha del boton */
            width: 35px; /* establece el ancho del boton */
            height: 35px; /* establece el alto del boton */
            display: flex; /* activa la distribucion flexible del boton */
            justify-content: center; /* centra el simbolo horizontalmente */
            align-items: center; /* centra el simbolo verticalmente */
            padding: 0; /* elimina el espacio interno adicional */
            border: none; /* elimina el borde del boton */
            background-color: transparent; /* mantiene transparente el fondo */
            color: #c59341; /* establece el color dorado del simbolo */
            font-family: 'Raleway', sans-serif; /* establece la fuente del simbolo */
            font-size: 32px; /* establece el tamaño del simbolo */
            font-weight: 400; /* establece el grosor del simbolo */
            line-height: 1; /* establece la altura de linea del simbolo */
            cursor: pointer; /* indica que el boton es seleccionable */
        }

        /* modifica el boton de cierre al posicionar el cursor */
        .boton_cerrar_modal_laborales_nuestros_servicios:hover {
            color: #9f7021; /* cambia el color del simbolo al pasar el cursor */
        }

        /* contiene el titulo principal y las lineas decorativas */
        .encabezado_modal_laborales_nuestros_servicios {
            width: 100%; /* ocupa todo el ancho disponible */
            display: flex; /* activa la distribucion flexible */
            justify-content: center; /* centra los elementos horizontalmente */
            align-items: center; /* centra los elementos verticalmente */
            gap: 1.2vw; /* establece la separacion entre los elementos */
            margin-bottom: 3vh; /* establece el espacio inferior del encabezado */
        }

        /* establece la linea decorativa izquierda del modal */
        .linea_izquierda_modal_laborales_nuestros_servicios {
            width: 3.5vw; /* establece el ancho de la linea */
            height: 1px; /* establece el grosor de la linea */
            background-color: #c99746; /* establece el color dorado de la linea */
            flex-shrink: 0; /* evita que la linea reduzca su tamaño */
        }

        /* establece el titulo principal del modal */
        .titulo_principal_modal_laborales_nuestros_servicios {
            color: #c59341; /* establece el color dorado del titulo */
            font-family: 'Raleway', sans-serif; /* establece la fuente del titulo */
            font-size: 3vh; /* establece el tamaño del titulo */
            font-weight: 600; /* establece el grosor del titulo */
            line-height: 1.2; /* establece la separacion entre lineas */
            text-align: center; /* centra el titulo */
            white-space: nowrap; /* evita que el titulo se divida */
        }

        /* establece la linea decorativa derecha del modal */
        .linea_derecha_modal_laborales_nuestros_servicios {
            width: 3.5vw; /* establece el ancho de la linea */
            height: 1px; /* establece el grosor de la linea */
            background-color: #c99746; /* establece el color dorado de la linea */
            flex-shrink: 0; /* evita que la linea reduzca su tamaño */
        }

        /* establece el subtitulo del modal */
        .subtitulo_modal_laborales_nuestros_servicios {
            width: 100%; /* ocupa todo el ancho disponible */
            margin-bottom: 4vh; /* establece el espacio inferior del subtitulo */
            color: #c59341; /* establece el color dorado del subtitulo */
            font-family: 'Raleway', sans-serif; /* establece la fuente del subtitulo */
            font-size: 2.2vh; /* establece el tamaño del subtitulo */
            font-weight: 600; /* establece el grosor del subtitulo */
            line-height: 1.5; /* establece la separacion entre lineas */
            text-align: justify; /* distribuye el texto uniformemente */
        }

        /* establece el contenido informativo del modal */
        .texto_modal_laborales_nuestros_servicios {
            width: 100%; /* ocupa todo el ancho disponible */
            color: #7e6340; /* establece el color del texto */
            font-family: 'Raleway', sans-serif; /* establece la fuente del texto */
            font-size: 2vh; /* establece el tamaño del texto */
            font-weight: 400; /* establece el grosor del texto */
            line-height: 1.35; /* establece la separacion entre lineas */
            text-align: justify; /* distribuye el texto uniformemente */
        }

        /* establece la posicion general de la lista */
        .texto_modal_laborales_nuestros_servicios ul {
            margin: 0; /* elimina el margen predeterminado de la lista */
            padding-left: 1.3vw; /* establece la sangria de la lista */
        }

        /* establece el espacio entre los elementos de la lista */
        .texto_modal_laborales_nuestros_servicios li {
            margin-bottom: 0.8vh; /* establece el espacio inferior de cada elemento */
        }

        /* elimina el margen inferior del ultimo elemento */
        .texto_modal_laborales_nuestros_servicios li:last-child {
            margin-bottom: 0; /* elimina el espacio inferior del ultimo elemento */
        }


/* TITULO 8 MODAL CIVILES */

    /* establece el fondo general del modal y lo mantiene oculto inicialmente */
    .modal_civiles_nuestros_servicios {
        width: 100%; /* establece el ancho completo del modal */
        height: 100%; /* establece el alto completo del modal */
        position: fixed; /* fija el modal respecto a la ventana */
        top: 0; /* posiciona el modal en el extremo superior */
        left: 0; /* posiciona el modal en el extremo izquierdo */
        display: none; /* oculta el modal inicialmente */
        justify-content: center; /* centra el contenido horizontalmente */
        align-items: center; /* centra el contenido verticalmente */
        background-color: rgba(25, 20, 16, 0.72); /* establece el fondo oscuro transparente */
        z-index: 9999; /* coloca el modal sobre los demas elementos */
        box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
        padding: 2vh 2vw; /* establece el espacio interior del modal */
    }

    /* establece el diseño de la tarjeta flotante del modal */
    .contenido_modal_civiles_nuestros_servicios {
        position: relative; /* permite posicionar elementos internos */
        width: 70%; /* establece el ancho del contenido */
        max-width: 1000px; /* limita el ancho maximo del contenido */
        height: 70vh; /* establece el alto del contenido */
        display: flex; /* distribuye la imagen y la informacion */
        box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
        background-color: #ffffff; /* establece el fondo blanco del contenido */
        border-radius: 14px; /* redondea las esquinas del contenido */
        box-shadow: 0 5px 15px rgba(42, 32, 26, 0.20); /* establece la sombra del contenido */
        overflow: hidden; /* oculta los elementos que sobresalen */
    }


    /* SUBTITULO 1 IMAGEN MODAL CIVILES */

        /* establece el espacio destinado a la imagen */
        .imagen_modal_civiles_nuestros_servicios {
            width: 44%; /* establece el ancho del contenedor de imagen */
            height: 100%; /* establece el alto completo del contenedor */
            overflow: hidden; /* oculta las partes sobresalientes de la imagen */
            flex-shrink: 0; /* evita que el contenedor reduzca su tamaño */
        }

        /* establece el tamaño y ajuste de la imagen */
        .imagen_modal_civiles_nuestros_servicios img {
            width: 100%; /* ocupa todo el ancho del contenedor */
            height: 100%; /* ocupa todo el alto del contenedor */
            display: block; /* elimina el espacio adicional de imagen inline */
            object-fit: cover; /* adapta la imagen manteniendo su proporcion */
        }


    /* SUBTITULO 2 INFORMACION MODAL CIVILES */

        /* contiene y organiza la informacion ubicada al lado derecho */
        .informacion_modal_civiles_nuestros_servicios {
            position: relative; /* permite posicionar el boton de cierre */
            width: 56%; /* establece el ancho del contenido informativo */
            height: 100%; /* establece el alto completo del contenido */
            display: flex; /* activa la distribucion flexible */
            flex-direction: column; /* organiza la informacion verticalmente */
            justify-content: flex-start; /* inicia el contenido desde arriba */
            padding: 7vh 4vw 4vh 4vw; /* establece el espacio interior del contenido */
            box-sizing: border-box; /* incluye el relleno dentro de las dimensiones */
        }

        /* establece el diseño del boton de cierre */
        .boton_cerrar_modal_civiles_nuestros_servicios {
            position: absolute; /* posiciona el boton dentro del contenido */
            top: 1.5vh; /* establece la posicion superior del boton */
            right: 1.2vw; /* establece la posicion derecha del boton */
            width: 35px; /* establece el ancho del boton */
            height: 35px; /* establece el alto del boton */
            display: flex; /* activa la distribucion flexible del boton */
            justify-content: center; /* centra el simbolo horizontalmente */
            align-items: center; /* centra el simbolo verticalmente */
            padding: 0; /* elimina el espacio interno adicional */
            border: none; /* elimina el borde del boton */
            background-color: transparent; /* mantiene transparente el fondo */
            color: #c59341; /* establece el color dorado del simbolo */
            font-family: 'Raleway', sans-serif; /* establece la fuente del simbolo */
            font-size: 32px; /* establece el tamaño del simbolo */
            font-weight: 400; /* establece el grosor del simbolo */
            line-height: 1; /* establece la altura de linea del simbolo */
            cursor: pointer; /* indica que el boton es seleccionable */
        }

        /* modifica el boton de cierre al posicionar el cursor */
        .boton_cerrar_modal_civiles_nuestros_servicios:hover {
            color: #9f7021; /* cambia el color del simbolo al pasar el cursor */
        }

        /* contiene el titulo principal y las lineas decorativas */
        .encabezado_modal_civiles_nuestros_servicios {
            width: 100%; /* ocupa todo el ancho disponible */
            display: flex; /* activa la distribucion flexible */
            justify-content: center; /* centra los elementos horizontalmente */
            align-items: center; /* centra los elementos verticalmente */
            gap: 1.2vw; /* establece la separacion entre los elementos */
            margin-bottom: 3vh; /* establece el espacio inferior del encabezado */
        }

        /* establece la linea decorativa izquierda del modal */
        .linea_izquierda_modal_civiles_nuestros_servicios {
            width: 3.5vw; /* establece el ancho de la linea */
            height: 1px; /* establece el grosor de la linea */
            background-color: #c99746; /* establece el color dorado de la linea */
            flex-shrink: 0; /* evita que la linea reduzca su tamaño */
        }

        /* establece el titulo principal del modal */
        .titulo_principal_modal_civiles_nuestros_servicios {
            color: #c59341; /* establece el color dorado del titulo */
            font-family: 'Raleway', sans-serif; /* establece la fuente del titulo */
            font-size: 3vh; /* establece el tamaño del titulo */
            font-weight: 600; /* establece el grosor del titulo */
            line-height: 1.2; /* establece la separacion entre lineas */
            text-align: center; /* centra el titulo */
            white-space: nowrap; /* evita que el titulo se divida */
        }

        /* establece la linea decorativa derecha del modal */
        .linea_derecha_modal_civiles_nuestros_servicios {
            width: 3.5vw; /* establece el ancho de la linea */
            height: 1px; /* establece el grosor de la linea */
            background-color: #c99746; /* establece el color dorado de la linea */
            flex-shrink: 0; /* evita que la linea reduzca su tamaño */
        }

        /* establece el subtitulo del modal */
        .subtitulo_modal_civiles_nuestros_servicios {
            width: 100%; /* ocupa todo el ancho disponible */
            margin-bottom: 4vh; /* establece el espacio inferior del subtitulo */
            color: #c59341; /* establece el color dorado del subtitulo */
            font-family: 'Raleway', sans-serif; /* establece la fuente del subtitulo */
            font-size: 2.2vh; /* establece el tamaño del subtitulo */
            font-weight: 600; /* establece el grosor del subtitulo */
            line-height: 1.5; /* establece la separacion entre lineas */
            text-align: justify; /* distribuye el texto uniformemente */
        }

        /* establece el contenido informativo del modal */
        .texto_modal_civiles_nuestros_servicios {
            width: 100%; /* ocupa todo el ancho disponible */
            color: #7e6340; /* establece el color del texto */
            font-family: 'Raleway', sans-serif; /* establece la fuente del texto */
            font-size: 2vh; /* establece el tamaño del texto */
            font-weight: 400; /* establece el grosor del texto */
            line-height: 1.4; /* establece la separacion entre lineas */
            text-align: justify; /* distribuye el texto uniformemente */
        }

        /* establece la posicion general de la lista */
        .texto_modal_civiles_nuestros_servicios ul {
            margin: 0; /* elimina el margen predeterminado de la lista */
            padding-left: 1.3vw; /* establece la sangria de la lista */
        }

        /* establece el espacio entre los elementos de la lista */
        .texto_modal_civiles_nuestros_servicios li {
            margin-bottom: 0.8vh; /* establece el espacio inferior de cada elemento */
        }

        /* elimina el margen inferior del ultimo elemento */
        .texto_modal_civiles_nuestros_servicios li:last-child {
            margin-bottom: 0; /* elimina el espacio inferior del ultimo elemento */
        }


/* TITULO 9 BOTON VER SERVICIOS */

    /* establece el diseño del boton utilizado para acceder a la pagina de servicios */
    .boton_ver_servicios {
        width: 250px; /* establece el ancho del boton */
        height: 42px; /* establece el alto del boton */
        margin-top: 4vh; /* establece el espacio superior del boton */
        padding: 0; /* elimina el espacio interno adicional */
        background: linear-gradient(135deg, #d4a64f, #b8862e); /* establece el degradado del boton */
        border: none; /* elimina el borde del boton */
        border-radius: 6px; /* redondea las esquinas del boton */
        color: #ffffff; /* establece el color del texto */
        font-family: 'Raleway', sans-serif; /* establece la fuente del boton */
        font-size: 16px; /* establece el tamaño del texto */
        font-weight: 700; /* establece el grosor del texto */
        cursor: pointer; /* indica que el boton es seleccionable */
        box-shadow: 0 3px 8px rgba(184, 134, 46, 0.25); /* establece la sombra del boton */
    }

    /* modifica el boton ver servicios al posicionar el cursor */
    .boton_ver_servicios:hover {
        background: linear-gradient(135deg, #c99746, #9f7021); /* cambia el degradado al pasar el cursor */
    }
/* -------------------------------------------------------------------------------------------------------------
   -------------------------------------- FIN ITred Spa seccion_nuestros_servicios .CSS ------------------------
   ------------------------------------------------------------------------------------------------------------- */


/* 
Sitio Web Creado por ITred Spa.
Direccion: Guido Reni #4190
Pedro Aguirre Cerda - Santiago - Chile
contacto@itred.cl o itred.spa@gmail.com
https://www.itred.cl
Creado, Programado y Diseñado por ITred Spa.
BPPJ 
*/