/* 
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_elegirnos .CSS ----------------------
   ------------------------------------------------------------------------------------------------------------- */

   /* IMPORTACION DE FUENTE RALEWAY */

@font-face {
    font-family: 'Raleway'; /* establece el nombre de la fuente que podrá utilizar el sitio */
    src: url('/rmc_web_nueva/fuentes/fuentes_google/fuente_raleway.ttf') format('truetype'); /* establece la ruta del archivo de fuente y su formato */
    font-weight: 100 900; /* permite utilizar los diferentes grosores disponibles de la fuente */
    font-style: normal; /* establece el estilo normal de la fuente */
}


/* TITULO 1 SECCION ELEGIRNOS */

    /* contiene los elementos principales de la seccion elegirnos */
    .seccion_elegirnos {
        width: 100%; /* establece el ancho completo de la seccion */
        height: 100vh; /* establece la altura de la seccion */
        display: flex; /* permite organizar los elementos internos mediante flexbox */
        flex-direction: column; /* organiza los elementos internos verticalmente */
        justify-content: center; /* centra los elementos verticalmente */
        align-items: center; /* centra los elementos horizontalmente */
        padding: 5vh 5vw; /* establece el espacio interno de la seccion */
        box-sizing: border-box; /* incluye el padding dentro de las dimensiones definidas */
        background-color: #ffffff; /* establece el fondo blanco de la seccion */
    }


/* TITULO 2 ENCABEZADO ELEGIRNOS */

    /* contiene el titulo y las lineas decorativas de la seccion */
    .encabezado_elegirnos {
        width: 75%; /* establece el ancho del encabezado */
        display: flex; /* permite organizar los elementos horizontalmente */
        justify-content: center; /* centra los elementos del encabezado */
        align-items: center; /* alinea verticalmente los elementos */
        gap: 1.5vw; /* establece la separacion entre los elementos */
        margin-bottom: 5vh; /* establece el espacio inferior del encabezado */
    }

    /* muestra la linea decorativa izquierda */
    .linea_izquierda_elegirnos {
        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 */
    }

    /* muestra el titulo principal */
    .titulo_elegirnos {
        color: #c59341; /* establece el color 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 */
    }

    /* muestra la linea decorativa derecha */
    .linea_derecha_elegirnos {
        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 ELEGIRNOS */

    /* contiene las tarjetas correspondientes a las caracteristicas de la empresa */
    .contenedor_tarjetas_elegirnos {
        width: 80%; /* establece el ancho del contenedor de tarjetas */
        display: grid; /* permite organizar las tarjetas mediante una cuadricula */
        grid-template-columns: repeat(4, 1fr); /* establece cuatro columnas de igual proporcion */
        gap: 2vw; /* establece la separacion entre las tarjetas */
        justify-content: center; /* centra la cuadricula horizontalmente */
        align-items: stretch; /* permite que las tarjetas ocupen la altura disponible */
    }


    /* SUBTITULO 1 EXPERIENCIA COMPROBADA */

        /* contiene la tarjeta de experiencia comprobada */
        .tarjeta_experiencia_elegirnos {
            height: 50vh; /* establece la altura de la tarjeta */
            display: flex; /* permite organizar los elementos internos mediante flexbox */
            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 padding dentro de las dimensiones */
            background: #f8f4ee; /* establece el fondo de la tarjeta */
            border-radius: 14px; /* redondea las esquinas de la tarjeta */
            box-shadow: 0 2px 4px rgba(42, 32, 26, 0.10); /* agrega una sombra suave */
            cursor: pointer; /* indica que la tarjeta puede seleccionarse */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* suaviza las animaciones */

        }

        .tarjeta_experiencia_elegirnos: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 */
        }

        /* muestra la imagen de experiencia comprobada */
        .imagen_experiencia_elegirnos {
            width: 14vw; /* establece el ancho de la imagen */
            height: 29vh; /* establece la altura de la imagen */
            object-fit: contain; /* mantiene las proporciones de la imagen */
            flex-shrink: 0; /* evita que la imagen reduzca su tamaño */
        }

        /* muestra la linea decorativa de la tarjeta */
        .linea_experiencia_elegirnos {
            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 */
        }

        /* muestra el nombre de la caracteristica */
        .texto_experiencia_elegirnos {
            color: #c59341; /* establece el color 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 el espacio entre las lineas */
            text-align: center; /* centra el texto */
        }


    /* SUBTITULO 2 ANALISIS ESTRATEGICO */

        /* contiene la tarjeta de analisis estrategico */
        .tarjeta_analisis_elegirnos {
            height: 50vh; /* establece la altura de la tarjeta */
            display: flex; /* permite organizar los elementos internos mediante flexbox */
            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 padding dentro de las dimensiones */
            background: #f8f4ee; /* establece el fondo de la tarjeta */
            border-radius: 14px; /* redondea las esquinas de la tarjeta */
            box-shadow: 0 2px 4px rgba(42, 32, 26, 0.10); /* agrega una sombra suave */
            cursor: pointer; /* indica que la tarjeta puede seleccionarse */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* suaviza las animaciones */
        }

        .tarjeta_analisis_elegirnos: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 */
        }

        /* muestra la imagen de analisis estrategico */
        .imagen_analisis_elegirnos {
            width: 14vw; /* establece el ancho de la imagen */
            height: 29vh; /* establece la altura de la imagen */
            object-fit: contain; /* mantiene las proporciones de la imagen */
            flex-shrink: 0; /* evita que la imagen reduzca su tamaño */
        }

        /* muestra la linea decorativa de la tarjeta */
        .linea_analisis_elegirnos {
            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 */
        }

        /* muestra el nombre de la caracteristica */
        .texto_analisis_elegirnos {
            color: #c59341; /* establece el color 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 el espacio entre las lineas */
            text-align: center; /* centra el texto */
        }


    /* SUBTITULO 3 CONFIDENCIALIDAD ABSOLUTA */

        /* contiene la tarjeta de confidencialidad absoluta */
        .tarjeta_confidencialidad_elegirnos {
            height: 50vh; /* establece la altura de la tarjeta */
            display: flex; /* permite organizar los elementos internos mediante flexbox */
            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 padding dentro de las dimensiones */
            background: #f8f4ee; /* establece el fondo de la tarjeta */
            border-radius: 14px; /* redondea las esquinas de la tarjeta */
            box-shadow: 0 2px 4px rgba(42, 32, 26, 0.10); /* agrega una sombra suave */
            cursor: pointer; /* indica que la tarjeta puede seleccionarse */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* suaviza las animaciones */
        }

        .tarjeta_confidencialidad_elegirnos: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 */
        }

        /* muestra la imagen de confidencialidad absoluta */
        .imagen_confidencialidad_elegirnos {
            width: 14vw; /* establece el ancho de la imagen */
            height: 29vh; /* establece la altura de la imagen */
            object-fit: contain; /* mantiene las proporciones de la imagen */
            flex-shrink: 0; /* evita que la imagen reduzca su tamaño */
        }

        /* muestra la linea decorativa de la tarjeta */
        .linea_confidencialidad_elegirnos {
            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 */
        }

        /* muestra el nombre de la caracteristica */
        .texto_confidencialidad_elegirnos {
            color: #c59341; /* establece el color 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 el espacio entre las lineas */
            text-align: center; /* centra el texto */
        }


    /* SUBTITULO 4 ORIENTACION A RESULTADOS */

        /* contiene la tarjeta de orientacion a resultados */
        .tarjeta_resultados_elegirnos {
            height: 50vh; /* establece la altura de la tarjeta */
            display: flex; /* permite organizar los elementos internos mediante flexbox */
            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 padding dentro de las dimensiones */
            background: #f8f4ee; /* establece el fondo de la tarjeta */
            border-radius: 14px; /* redondea las esquinas de la tarjeta */
            box-shadow: 0 2px 4px rgba(42, 32, 26, 0.10); /* agrega una sombra suave */
            cursor: pointer; /* indica que la tarjeta puede seleccionarse */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* suaviza las animaciones */
        }

        .tarjeta_resultados_elegirnos: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 */
        }

        /* muestra la imagen de orientacion a resultados */
        .imagen_resultados_elegirnos {
            width: 14vw; /* establece el ancho de la imagen */
            height: 29vh; /* establece la altura de la imagen */
            object-fit: contain; /* mantiene las proporciones de la imagen */
            flex-shrink: 0; /* evita que la imagen reduzca su tamaño */
        }

        /* muestra la linea decorativa de la tarjeta */
        .linea_resultados_elegirnos {
            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 */
        }

        /* muestra el nombre de la caracteristica */
        .texto_resultados_elegirnos {
            color: #c59341; /* establece el color 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 el espacio entre las lineas */
            text-align: center; /* centra el texto */
        }


/* TITULO 4 MODAL EXPERIENCIA COMPROBADA */

    /* contiene el fondo del modal de experiencia comprobada */
    .fondo_modal_experiencia_elegirnos {
        width: 100%; /* establece el ancho completo del fondo modal */
        height: 100%; /* establece la altura completa del fondo modal */
        position: fixed; /* mantiene el modal fijo respecto a la ventana */
        top: 0; /* posiciona el modal en la parte superior */
        left: 0; /* posiciona el modal en el extremo izquierdo */
        display: none; /* mantiene oculto el modal inicialmente */
        justify-content: center; /* centra horizontalmente el contenido */
        align-items: center; /* centra verticalmente el contenido */
        background-color: rgba(25, 20, 16, 0.72); /* establece el fondo oscurecido */
        z-index: 9999; /* coloca el modal sobre los demas elementos */
        box-sizing: border-box; /* incluye padding dentro de las dimensiones */
        padding: 2vh 2vw; /* establece el espacio interno del fondo */
    }


    /* SUBTITULO 1 CONTENEDOR IMAGEN MODAL EXPERIENCIA */

        /* contiene las partes principales del modal */
        .contenido_modal_experiencia_elegirnos {
            width: 70%; /* establece el ancho del contenido modal */
            max-width: 1000px; /* limita el ancho maximo del contenido */
            height: 70vh; /* establece la altura del contenido */
            display: flex; /* organiza las partes del modal horizontalmente */
            overflow: hidden; /* oculta el contenido que sobresalga */
            background-color: #ffffff; /* establece el fondo blanco del contenido */
            border-radius: 14px; /* redondea las esquinas del contenido */
            box-shadow: 0 18px 55px rgba(20, 16, 12, 0.24); /* agrega sombra al contenido */
            box-sizing: border-box; /* incluye el padding y borde dentro de las dimensiones */
        }

        /* contiene la imagen del modal */
        .contenedor_imagen_modal_experiencia_elegirnos {
            width: 44%; /* establece el ancho del contenedor de imagen */
            height: 100%; /* ocupa toda la altura del modal */
            flex-shrink: 0; /* evita que el contenedor reduzca su tamaño */
            background-color: #f8f4ee; /* establece el fondo del contenedor de imagen */
        }

        /* muestra la imagen del modal */
        .imagen_modal_experiencia_elegirnos {
            width: 100%; /* ocupa todo el ancho del contenedor */
            height: 100%; /* ocupa toda la altura del contenedor */
            display: block; /* elimina el espacio generado por elementos inline */
            object-fit: cover; /* ajusta la imagen cubriendo el contenedor */
        }


    /* SUBTITULO 2 INFORMACION MODAL EXPERIENCIA */

        /* contiene la informacion del modal */
        .informacion_modal_experiencia_elegirnos {
            width: 56%; /* establece el ancho de la informacion */
            height: 100%; /* ocupa toda la altura del modal */
            position: relative; /* permite posicionar elementos internos de forma absoluta */
            padding: 7vh 4vw 4vh 4vw; /* establece el espacio interno de la informacion */
            box-sizing: border-box; /* incluye el padding dentro de las dimensiones */
            overflow-y: auto; /* permite desplazamiento vertical cuando sea necesario */
        }


        /* SUB-SUBTITULO 1 BOTON CERRAR MODAL EXPERIENCIA */

            /* permite cerrar el modal */
            .boton_cerrar_modal_experiencia_elegirnos {
                position: absolute; /* permite posicionar el boton dentro de la informacion */
                top: 2vh; /* establece la posicion superior del boton */
                right: 2vw; /* establece la posicion derecha del boton */
                padding: 0; /* elimina el espacio interno del boton */
                border: none; /* elimina el borde del boton */
                background-color: transparent; /* mantiene transparente el fondo */
                color: #7a6858; /* establece el color del simbolo */
                font-family: Arial, Helvetica, sans-serif; /* establece la fuente del boton */
                font-size: 30px; /* establece el tamaño del simbolo */
                font-weight: 300; /* establece el grosor del simbolo */
                line-height: 1; /* establece la altura de linea */
                cursor: pointer; /* indica que el boton puede seleccionarse */
            }

            .boton_cerrar_modal_experiencia_elegirnos:hover {
                color: #c59341; /* cambia el color al pasar el cursor */
            }


        /* SUB-SUBTITULO 2 ENCABEZADO MODAL EXPERIENCIA */

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

            /* muestra la linea decorativa izquierda */
            .linea_izquierda_modal_experiencia_elegirnos {
                flex: 1; /* permite ocupar el espacio disponible */
                height: 1px; /* establece el grosor de la linea */
                background-color: #c99746; /* establece el color de la linea */
            }

            /* muestra el titulo del modal */
            .titulo_modal_experiencia_elegirnos {
                color: #c59341; /* establece el color 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 altura de linea */
                text-align: center; /* centra el titulo */
                white-space: nowrap; /* evita que el titulo se divida */
            }

            /* muestra la linea decorativa derecha */
            .linea_derecha_modal_experiencia_elegirnos {
                flex: 1; /* permite ocupar el espacio disponible */
                height: 1px; /* establece el grosor de la linea */
                background-color: #c99746; /* establece el color de la linea */
            }


        /* SUB-SUBTITULO 3 SUBTITULO MODAL EXPERIENCIA */

            /* muestra el subtitulo del modal */
            .subtitulo_modal_experiencia_elegirnos {
                color: #c59341; /* establece el color 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.45; /* establece la altura de linea */
                text-align: justify; /* justifica el texto */
                margin-bottom: 4vh; /* establece el espacio inferior */
            }


        /* SUB-SUBTITULO 4 TEXTO MODAL EXPERIENCIA */

            /* muestra los aspectos relacionados con la experiencia */
            .texto_modal_experiencia_elegirnos {
                margin: 0; /* elimina el margen predeterminado de la lista */
                padding-left: 1.5vw; /* establece el espacio izquierdo de la lista */
                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 */
                line-height: 1.45; /* establece la altura de linea */
                text-align: justify; /* justifica el contenido */
            }

            .texto_modal_experiencia_elegirnos li {
                margin-bottom: 1.1vh; /* establece el espacio inferior de cada elemento */
            }


/* TITULO 5 MODAL ANALISIS ESTRATEGICO */

    /* contiene el fondo del modal de analisis estrategico */
    .fondo_modal_analisis_elegirnos {
        width: 100%; /* establece el ancho completo del fondo modal */
        height: 100%; /* establece la altura completa del fondo modal */
        position: fixed; /* mantiene el modal fijo respecto a la ventana */
        top: 0; /* posiciona el modal en la parte superior */
        left: 0; /* posiciona el modal en el extremo izquierdo */
        display: none; /* mantiene oculto el modal inicialmente */
        justify-content: center; /* centra horizontalmente el contenido */
        align-items: center; /* centra verticalmente el contenido */
        background-color: rgba(25, 20, 16, 0.72); /* establece el fondo oscurecido */
        z-index: 9999; /* coloca el modal sobre los demas elementos */
        box-sizing: border-box; /* incluye padding dentro de las dimensiones */
        padding: 2vh 2vw; /* establece el espacio interno del fondo */
    }


    /* SUBTITULO 1 CONTENEDOR IMAGEN MODAL ANALISIS */

        /* contiene las partes principales del modal */
        .contenido_modal_analisis_elegirnos {
            width: 70%; /* establece el ancho del contenido modal */
            max-width: 1000px; /* limita el ancho maximo del contenido */
            height: 70vh; /* establece la altura del contenido */
            display: flex; /* organiza las partes del modal horizontalmente */
            overflow: hidden; /* oculta el contenido que sobresalga */
            background-color: #ffffff; /* establece el fondo blanco del contenido */
            border-radius: 14px; /* redondea las esquinas del contenido */
            box-shadow: 0 18px 55px rgba(20, 16, 12, 0.24); /* agrega sombra al contenido */
            box-sizing: border-box; /* incluye el padding y borde dentro de las dimensiones */
        }

        /* contiene la imagen del modal */
        .contenedor_imagen_modal_analisis_elegirnos {
            width: 44%; /* establece el ancho del contenedor de imagen */
            height: 100%; /* ocupa toda la altura del modal */
            flex-shrink: 0; /* evita que el contenedor reduzca su tamaño */
            background-color: #f8f4ee; /* establece el fondo del contenedor de imagen */
        }

        /* muestra la imagen del modal */
        .imagen_modal_analisis_elegirnos {
            width: 100%; /* ocupa todo el ancho del contenedor */
            height: 100%; /* ocupa toda la altura del contenedor */
            display: block; /* elimina el espacio generado por elementos inline */
            object-fit: cover; /* ajusta la imagen cubriendo el contenedor */
        }


    /* SUBTITULO 2 INFORMACION MODAL ANALISIS */

        /* contiene la informacion del modal */
        .informacion_modal_analisis_elegirnos {
            width: 56%; /* establece el ancho de la informacion */
            height: 100%; /* ocupa toda la altura del modal */
            position: relative; /* permite posicionar elementos internos */
            padding: 7vh 4vw 4vh 4vw; /* establece el espacio interno */
            box-sizing: border-box; /* incluye el padding dentro de las dimensiones */
            overflow-y: auto; /* permite desplazamiento vertical */
        }


        /* SUB-SUBTITULO 1 BOTON CERRAR MODAL ANALISIS */

            /* permite cerrar el modal */
            .boton_cerrar_modal_analisis_elegirnos {
                position: absolute; /* permite posicionar el boton */
                top: 2vh; /* establece la posicion superior */
                right: 2vw; /* establece la posicion derecha */
                padding: 0; /* elimina el espacio interno */
                border: none; /* elimina el borde */
                background-color: transparent; /* mantiene transparente el fondo */
                color: #7a6858; /* establece el color del boton */
                font-family: Arial, Helvetica, sans-serif; /* establece la fuente */
                font-size: 30px; /* establece el tamaño */
                font-weight: 300; /* establece el grosor */
                line-height: 1; /* establece la altura de linea */
                cursor: pointer; /* indica que puede seleccionarse */
            }

            .boton_cerrar_modal_analisis_elegirnos:hover {
                color: #c59341; /* cambia el color al pasar el cursor */
            }


        /* SUB-SUBTITULO 2 ENCABEZADO MODAL ANALISIS */

            /* contiene el encabezado y las lineas decorativas */
            .encabezado_modal_analisis_elegirnos {
                width: 100%; /* ocupa todo el ancho */
                display: flex; /* organiza los elementos horizontalmente */
                align-items: center; /* centra verticalmente los elementos */
                justify-content: center; /* centra horizontalmente los elementos */
                gap: 1vw; /* establece la separacion */
                margin-bottom: 3vh; /* establece el espacio inferior */
            }

            /* muestra la linea decorativa izquierda */
            .linea_izquierda_modal_analisis_elegirnos {
                flex: 1; /* ocupa el espacio disponible */
                height: 1px; /* establece el grosor */
                background-color: #c99746; /* establece el color */
            }

            /* muestra el titulo del modal */
            .titulo_modal_analisis_elegirnos {
                color: #c59341; /* establece el color */
                font-family: 'Raleway', sans-serif; /* establece la fuente */
                font-size: 3vh; /* establece el tamaño */
                font-weight: 600; /* establece el grosor */
                line-height: 1.2; /* establece la altura de linea */
                text-align: center; /* centra el titulo */
                white-space: nowrap; /* evita dividir el titulo */
            }

            /* muestra la linea decorativa derecha */
            .linea_derecha_modal_analisis_elegirnos {
                flex: 1; /* ocupa el espacio disponible */
                height: 1px; /* establece el grosor */
                background-color: #c99746; /* establece el color */
            }


        /* SUB-SUBTITULO 3 SUBTITULO MODAL ANALISIS */

            /* muestra el subtitulo del modal */
            .subtitulo_modal_analisis_elegirnos {
                color: #c59341; /* establece el color */
                font-family: 'Raleway', sans-serif; /* establece la fuente */
                font-size: 2.2vh; /* establece el tamaño */
                font-weight: 600; /* establece el grosor */
                line-height: 1.45; /* establece la altura de linea */
                text-align: justify; /* justifica el texto */
                margin-bottom: 4vh; /* establece el espacio inferior */
            }


        /* SUB-SUBTITULO 4 TEXTO MODAL ANALISIS */

            /* muestra los aspectos relacionados con el analisis */
            .texto_modal_analisis_elegirnos {
                margin: 0; /* elimina el margen de la lista */
                padding-left: 1.5vw; /* establece el espacio izquierdo */
                color: #7e6340; /* establece el color */
                font-family: 'Raleway', sans-serif; /* establece la fuente */
                font-size: 2vh; /* establece el tamaño */
                line-height: 1.45; /* establece la altura de linea */
                text-align: justify; /* justifica el contenido */
            }

            .texto_modal_analisis_elegirnos li {
                margin-bottom: 1.1vh; /* establece el espacio inferior */
            }


/* TITULO 6 MODAL CONFIDENCIALIDAD ABSOLUTA */

    /* contiene el fondo del modal de confidencialidad absoluta */
    .fondo_modal_confidencialidad_elegirnos {
        width: 100%; /* establece el ancho completo del fondo */
        height: 100%; /* establece la altura completa del fondo */
        position: fixed; /* mantiene el modal fijo */
        top: 0; /* posiciona el modal en la parte superior */
        left: 0; /* posiciona el modal en el extremo izquierdo */
        display: none; /* mantiene oculto el modal inicialmente */
        justify-content: center; /* centra horizontalmente el contenido */
        align-items: center; /* centra verticalmente el contenido */
        background-color: rgba(25, 20, 16, 0.72); /* establece el fondo oscurecido */
        z-index: 9999; /* coloca el modal sobre otros elementos */
        box-sizing: border-box; /* incluye padding en las dimensiones */
        padding: 2vh 2vw; /* establece el espacio interno */
    }


    /* SUBTITULO 1 CONTENEDOR IMAGEN MODAL CONFIDENCIALIDAD */

        /* contiene las partes principales del modal */
        .contenido_modal_confidencialidad_elegirnos {
            width: 70%; /* establece el ancho */
            max-width: 1000px; /* limita el ancho */
            height: 70vh; /* establece la altura */
            display: flex; /* organiza horizontalmente */
            overflow: hidden; /* oculta contenido sobrante */
            background-color: #ffffff; /* establece el fondo */
            border-radius: 14px; /* redondea las esquinas */
            box-shadow: 0 18px 55px rgba(20, 16, 12, 0.24); /* agrega sombra */
            box-sizing: border-box; /* incluye el padding y borde */
        }

        /* contiene la imagen del modal */
        .contenedor_imagen_modal_confidencialidad_elegirnos {
            width: 44%; /* establece el ancho */
            height: 100%; /* ocupa toda la altura */
            flex-shrink: 0; /* evita reduccion */
            background-color: #f8f4ee; /* establece el fondo */
        }

        /* muestra la imagen del modal */
        .imagen_modal_confidencialidad_elegirnos {
            width: 100%; /* ocupa todo el ancho */
            height: 100%; /* ocupa toda la altura */
            display: block; /* establece el comportamiento del elemento */
            object-fit: cover; /* cubre el contenedor */
        }


    /* SUBTITULO 2 INFORMACION MODAL CONFIDENCIALIDAD */

        /* contiene la informacion del modal */
        .informacion_modal_confidencialidad_elegirnos {
            width: 56%; /* establece el ancho */
            height: 100%; /* ocupa toda la altura */
            position: relative; /* permite posicionar elementos internos */
            padding: 7vh 4vw 4vh 4vw; /* establece el espacio interno */
            box-sizing: border-box; /* incluye padding */
            overflow-y: auto; /* permite desplazamiento vertical */
        }


        /* SUB-SUBTITULO 1 BOTON CERRAR MODAL CONFIDENCIALIDAD */

            /* permite cerrar el modal */
            .boton_cerrar_modal_confidencialidad_elegirnos {
                position: absolute; /* permite posicionamiento */
                top: 2vh; /* establece posicion superior */
                right: 2vw; /* establece posicion derecha */
                padding: 0; /* elimina espacio interno */
                border: none; /* elimina borde */
                background-color: transparent; /* mantiene fondo transparente */
                color: #7a6858; /* establece color */
                font-family: Arial, Helvetica, sans-serif; /* establece fuente */
                font-size: 30px; /* establece tamaño */
                font-weight: 300; /* establece grosor */
                line-height: 1; /* establece altura */
                cursor: pointer; /* indica interaccion */
            }

            .boton_cerrar_modal_confidencialidad_elegirnos:hover {
                color: #c59341; /* cambia el color */
            }


        /* SUB-SUBTITULO 2 ENCABEZADO MODAL CONFIDENCIALIDAD */

            /* contiene el encabezado y las lineas decorativas */
            .encabezado_modal_confidencialidad_elegirnos {
                width: 100%; /* ocupa todo el ancho */
                display: flex; /* organiza elementos */
                align-items: center; /* centra verticalmente */
                justify-content: center; /* centra horizontalmente */
                gap: 1vw; /* establece separacion */
                margin-bottom: 3vh; /* establece espacio inferior */
            }

            /* muestra la linea decorativa izquierda */
            .linea_izquierda_modal_confidencialidad_elegirnos {
                flex: 1; /* ocupa espacio disponible */
                height: 1px; /* establece grosor */
                background-color: #c99746; /* establece color */
            }

            /* muestra el titulo del modal */
            .titulo_modal_confidencialidad_elegirnos {
                color: #c59341; /* establece color */
                font-family: 'Raleway', sans-serif; /* establece fuente */
                font-size: 3vh; /* establece tamaño */
                font-weight: 600; /* establece grosor */
                line-height: 1.2; /* establece altura */
                text-align: center; /* centra texto */
                white-space: nowrap; /* evita saltos */
            }

            /* muestra la linea decorativa derecha */
            .linea_derecha_modal_confidencialidad_elegirnos {
                flex: 1; /* ocupa espacio disponible */
                height: 1px; /* establece grosor */
                background-color: #c99746; /* establece color */
            }


        /* SUB-SUBTITULO 3 SUBTITULO MODAL CONFIDENCIALIDAD */

            /* muestra el subtitulo del modal */
            .subtitulo_modal_confidencialidad_elegirnos {
                color: #c59341; /* establece color */
                font-family: 'Raleway', sans-serif; /* establece fuente */
                font-size: 2.2vh; /* establece tamaño */
                font-weight: 600; /* establece grosor */
                line-height: 1.45; /* establece altura */
                text-align: justify; /* justifica */
                margin-bottom: 4vh; /* establece espacio */
            }


        /* SUB-SUBTITULO 4 TEXTO MODAL CONFIDENCIALIDAD */

            /* muestra los aspectos relacionados con la confidencialidad */
            .texto_modal_confidencialidad_elegirnos {
                margin: 0; /* elimina margen */
                padding-left: 1.5vw; /* establece sangria */
                color: #7e6340; /* establece color */
                font-family: 'Raleway', sans-serif; /* establece fuente */
                font-size: 2vh; /* establece tamaño */
                line-height: 1.45; /* establece altura */
                text-align: justify; /* justifica */
            }

            .texto_modal_confidencialidad_elegirnos li {
                margin-bottom: 1.1vh; /* establece espacio inferior */
            }


/* TITULO 7 MODAL ORIENTACION A RESULTADOS */

    /* contiene el fondo del modal de orientacion a resultados */
    .fondo_modal_resultados_elegirnos {
        width: 100%; /* establece el ancho */
        height: 100%; /* establece la altura */
        position: fixed; /* mantiene el modal fijo */
        top: 0; /* posiciona arriba */
        left: 0; /* posiciona a la izquierda */
        display: none; /* oculta inicialmente */
        justify-content: center; /* centra horizontalmente */
        align-items: center; /* centra verticalmente */
        background-color: rgba(25, 20, 16, 0.72); /* establece el fondo */
        z-index: 9999; /* coloca sobre otros elementos */
        box-sizing: border-box; /* incluye padding */
        padding: 2vh 2vw; /* establece espacio interno */
    }


    /* SUBTITULO 1 CONTENEDOR IMAGEN MODAL RESULTADOS */

        /* contiene las partes principales del modal */
        .contenido_modal_resultados_elegirnos {
            width: 70%; /* establece el ancho */
            max-width: 1000px; /* limita el ancho */
            height: 70vh; /* establece la altura */
            display: flex; /* organiza horizontalmente */
            overflow: hidden; /* oculta sobrantes */
            background-color: #ffffff; /* establece el fondo */
            border-radius: 14px; /* redondea esquinas */
            box-shadow: 0 18px 55px rgba(20, 16, 12, 0.24); /* agrega sombra */
            box-sizing: border-box; /* incluye dimensiones internas */
        }

        /* contiene la imagen del modal */
        .contenedor_imagen_modal_resultados_elegirnos {
            width: 44%; /* establece el ancho */
            height: 100%; /* ocupa toda la altura */
            flex-shrink: 0; /* evita reduccion */
            background-color: #f8f4ee; /* establece el fondo */
        }

        /* muestra la imagen del modal */
        .imagen_modal_resultados_elegirnos {
            width: 100%; /* ocupa todo el ancho */
            height: 100%; /* ocupa toda la altura */
            display: block; /* establece el comportamiento */
            object-fit: cover; /* cubre el contenedor */
        }


    /* SUBTITULO 2 INFORMACION MODAL RESULTADOS */

        /* contiene la informacion del modal */
        .informacion_modal_resultados_elegirnos {
            width: 56%; /* establece el ancho */
            height: 100%; /* ocupa toda la altura */
            position: relative; /* permite posicionamiento interno */
            padding: 7vh 4vw 4vh 4vw; /* establece espacio interno */
            box-sizing: border-box; /* incluye padding */
            overflow-y: auto; /* permite desplazamiento */
        }


        /* SUB-SUBTITULO 1 BOTON CERRAR MODAL RESULTADOS */

            /* permite cerrar el modal */
            .boton_cerrar_modal_resultados_elegirnos {
                position: absolute; /* permite posicionamiento */
                top: 2vh; /* establece posicion superior */
                right: 2vw; /* establece posicion derecha */
                padding: 0; /* elimina espacio interno */
                border: none; /* elimina borde */
                background-color: transparent; /* mantiene fondo transparente */
                color: #7a6858; /* establece color */
                font-family: Arial, Helvetica, sans-serif; /* establece fuente */
                font-size: 30px; /* establece tamaño */
                font-weight: 300; /* establece grosor */
                line-height: 1; /* establece altura */
                cursor: pointer; /* indica interaccion */
            }

            .boton_cerrar_modal_resultados_elegirnos:hover {
                color: #c59341; /* cambia color */
            }


        /* SUB-SUBTITULO 2 ENCABEZADO MODAL RESULTADOS */

            /* contiene el encabezado y las lineas decorativas */
            .encabezado_modal_resultados_elegirnos {
                width: 100%; /* ocupa todo el ancho */
                display: flex; /* organiza elementos */
                align-items: center; /* centra verticalmente */
                justify-content: center; /* centra horizontalmente */
                gap: 1vw; /* establece separacion */
                margin-bottom: 3vh; /* establece espacio inferior */
            }

            /* muestra la linea decorativa izquierda */
            .linea_izquierda_modal_resultados_elegirnos {
                flex: 1; /* ocupa espacio disponible */
                height: 1px; /* establece grosor */
                background-color: #c99746; /* establece color */
            }

            /* muestra el titulo del modal */
            .titulo_modal_resultados_elegirnos {
                color: #c59341; /* establece color */
                font-family: 'Raleway', sans-serif; /* establece fuente */
                font-size: 3vh; /* establece tamaño */
                font-weight: 600; /* establece grosor */
                line-height: 1.2; /* establece altura */
                text-align: center; /* centra texto */
                white-space: nowrap; /* evita saltos */
            }

            /* muestra la linea decorativa derecha */
            .linea_derecha_modal_resultados_elegirnos {
                flex: 1; /* ocupa espacio disponible */
                height: 1px; /* establece grosor */
                background-color: #c99746; /* establece color */
            }


        /* SUB-SUBTITULO 3 SUBTITULO MODAL RESULTADOS */

            /* muestra el subtitulo del modal */
            .subtitulo_modal_resultados_elegirnos {
                color: #c59341; /* establece color */
                font-family: 'Raleway', sans-serif; /* establece fuente */
                font-size: 2.2vh; /* establece tamaño */
                font-weight: 600; /* establece grosor */
                line-height: 1.45; /* establece altura */
                text-align: justify; /* justifica */
                margin-bottom: 4vh; /* establece espacio */
            }


        /* SUB-SUBTITULO 4 TEXTO MODAL RESULTADOS */

            /* muestra los aspectos relacionados con los resultados */
            .texto_modal_resultados_elegirnos {
                margin: 0; /* elimina margen */
                padding-left: 1.5vw; /* establece sangria */
                color: #7e6340; /* establece color */
                font-family: 'Raleway', sans-serif; /* establece fuente */
                font-size: 2vh; /* establece tamaño */
                line-height: 1.45; /* establece altura */
                text-align: justify; /* justifica */
            }

            .texto_modal_resultados_elegirnos li {
                margin-bottom: 1.1vh; /* establece espacio inferior */
            }


/* TITULO 8 BOTON CONOCER MAS */

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

    .boton_conocer_mas:hover {
        background: linear-gradient(135deg, #c99746, #9f7021); /* cambia el degradado al pasar el cursor */
    }


/* -------------------------------------------------------------------------------------------------------------
   -------------------------------------- FIN ITred Spa seccion_elegirnos .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 
*/