/* 
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('/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 */

/* TITULO 1 SECCION ELEGIRNOS */

    .seccion_elegirnos {
        width: 100%; /* establece el ancho completo de la seccion */
        height: auto; /* permite que la altura se adapte al contenido */
        min-height: min(100vh, 850px); /* limita la altura minima en pantallas muy altas */
        display: flex; /* organiza los elementos mediante flexbox */
        flex-direction: column; /* distribuye los elementos verticalmente */
        justify-content: center; /* centra verticalmente el contenido */
        align-items: center; /* centra horizontalmente el contenido */
        padding: min(5vh, 48px) 5vw; /* controla los espacios internos en pantallas altas */
        box-sizing: border-box; /* incluye el padding dentro de las dimensiones */
        background-color: #ffffff; /* establece el fondo blanco de la seccion */
    }


    /* pantallas grandes (monitores Full HD+, iMac, monitores gaming QHD/4K) */
    @media (min-width: 1441px) {

        /* Sin media */

    }


    /* notebooks grandes (1600x900, 1920x1080) */
    @media (max-width: 1440px) {

        /* Sin media */

    }


    /* notebooks comunes (1366x768, MacBook Air/Pro) */
    @media (max-width: 1200px) {

        /* Sin media */

    }


    /* tablets horizontales / pantallas medianas (iPad Pro en horizontal, notebooks pequeños) */
    @media (max-width: 992px) {

        .seccion_elegirnos {
            min-height: 0; /* permite adaptar la altura al contenido de las tarjetas */
            padding: 3rem 4vw; /* establece espacios internos independientes de la altura */
        }

    }


    /* tablets verticales (iPad clásico, tablets Android estándar) */
    @media (max-width: 768px) {

        .seccion_elegirnos {
            padding: 2.5rem 4vw; /* ajusta los espacios internos para tablets */
            overflow-x: hidden; /* evita el desplazamiento horizontal */
        }

    }


    /* móviles extragrandes (pantallas compactas y dispositivos de gran tamaño) */
    @media (max-width: 576px) {

        .seccion_elegirnos {
            padding: 2.5rem 4vw; /* adapta los espacios internos para dispositivos moviles */
        }

    }


    /* móviles medianos (iPhone 12/13/14, Android gama media) */
    @media (max-width: 390px) {

        /* Sin media */

    }


    /* móviles pequeños (Android estándar, iPhone SE) */
    @media (max-width: 360px) {

        /* Sin media */

    }



/* TITULO 2 ENCABEZADO ELEGIRNOS */

    .encabezado_elegirnos {
        width: 75%; /* establece el ancho del encabezado */
        display: flex; /* organiza los elementos horizontalmente */
        justify-content: center; /* centra horizontalmente el encabezado */
        align-items: center; /* alinea verticalmente los elementos */
        gap: 1.5vw; /* establece la separacion entre los elementos */
        margin-bottom: min(5vh, 40px); /* limita la separacion inferior en pantallas altas */
    }

    .linea_izquierda_elegirnos {
        flex: 1; /* permite que la linea utilice el espacio disponible */
        height: 1.5px; /* establece el grosor de la linea */
        background-color: #c99746; /* establece el color dorado de la linea */
    }

    .titulo_elegirnos {
        color: #c59341; /* establece el color dorado del titulo */
        font-family: 'Raleway', sans-serif; /* establece la tipografia Raleway */
        font-size: min(6vh, 3rem); /* limita el crecimiento del titulo en pantallas altas */
        font-weight: 500; /* establece el grosor del titulo */
        line-height: 1.2; /* mantiene la separacion entre lineas */
        white-space: nowrap; /* evita que el titulo se divida en varias lineas */
    }

    .linea_derecha_elegirnos {
        flex: 1; /* permite que la linea utilice el espacio disponible */
        height: 1.5px; /* establece el grosor de la linea */
        background-color: #c99746; /* establece el color dorado de la linea */
    }


    /* pantallas grandes (monitores Full HD+, iMac, monitores gaming QHD/4K) */
    @media (min-width: 1441px) {

        /* Sin media */

    }


    /* notebooks grandes (1600x900, 1920x1080) */
    @media (max-width: 1440px) {

        /* Sin media */

    }


    /* notebooks comunes (1366x768, MacBook Air/Pro) */
    @media (max-width: 1200px) {

        .encabezado_elegirnos {
            width: 85%; /* aumenta el ancho disponible del encabezado */
        }

        .titulo_elegirnos {
            font-size: min(5.5vh, 2.75rem); /* mantiene el tamaño anterior con un limite */
        }

    }


    /* tablets horizontales / pantallas medianas (iPad Pro en horizontal, notebooks pequeños) */
    @media (max-width: 992px) {

        .encabezado_elegirnos {
            width: 90%; /* adapta el ancho del encabezado */
        }

        .titulo_elegirnos {
            font-size: min(5vh, 2.5rem); /* evita que el titulo crezca excesivamente */
        }

    }


    /* tablets verticales (iPad clásico, tablets Android estándar) */
    @media (max-width: 768px) {

        .encabezado_elegirnos {
            width: 95%; /* utiliza una mayor parte del ancho disponible */
            margin-bottom: min(4vh, 28px); /* controla la separacion respecto a las tarjetas */
        }

        .titulo_elegirnos {
            font-size: min(4.5vh, 2.1rem); /* ajusta el titulo para tablets */
        }

    }


    /* móviles extragrandes (pantallas compactas y dispositivos de gran tamaño) */
    @media (max-width: 576px) {

        .encabezado_elegirnos {
            width: 100%; /* utiliza todo el ancho disponible */
            gap: 2vw; /* ajusta la separacion entre los elementos */
            margin-bottom: min(3vh, 22px); /* reduce la separacion con las tarjetas */
        }

        .titulo_elegirnos {
            font-size: min(4vh, 1.8rem); /* mantiene el titulo proporcionado en moviles */
        }

    }


    /* móviles medianos (iPhone 12/13/14, Android gama media) */
    @media (max-width: 390px) {

        /* Sin media */

    }


    /* móviles pequeños (Android estándar, iPhone SE) */
    @media (max-width: 360px) {

        /* Sin media */

    }


/* TITULO 3 CONTENEDOR TARJETAS ELEGIRNOS */

    .contenedor_tarjetas_elegirnos {
        width: 80%; /* establece el ancho del contenedor de tarjetas */
        display: grid; /* organiza las tarjetas mediante una cuadricula */
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* distribuye cuatro columnas iguales */
        gap: 2vw; /* establece la separacion entre las tarjetas */
        justify-content: center; /* centra horizontalmente la cuadricula */
        align-items: stretch; /* mantiene las tarjetas de cada fila con igual altura */
    }

    .tarjeta_experiencia_elegirnos,
    .tarjeta_analisis_elegirnos,
    .tarjeta_confidencialidad_elegirnos,
    .tarjeta_resultados_elegirnos {
        min-width: 0; /* permite ajustar las tarjetas a las columnas */
        height: auto; /* permite que la altura se adapte al contenido */
        min-height: min(50vh, 330px); /* limita la altura minima de las tarjetas */
        display: flex; /* organiza los elementos mediante flexbox */
        flex-direction: column; /* distribuye los elementos verticalmente */
        justify-content: center; /* centra verticalmente los elementos */
        align-items: center; /* centra horizontalmente los elementos */
        padding: min(4vh, 32px) 1vw; /* controla los espacios internos de las tarjetas */
        box-sizing: border-box; /* incluye el padding dentro de las dimensiones */
        background-color: #f8f4ee; /* establece el fondo crema de las tarjetas */
        border-radius: 14px; /* redondea las esquinas de las tarjetas */
        box-shadow: 0 2px 4px rgba(42, 32, 26, 0.10); /* establece una sombra suave */
        cursor: pointer; /* muestra el cursor de seleccion */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* suaviza los cambios visuales */
    }

    .tarjeta_experiencia_elegirnos:hover,
    .tarjeta_analisis_elegirnos:hover,
    .tarjeta_confidencialidad_elegirnos:hover,
    .tarjeta_resultados_elegirnos:hover {
        transform: translateY(-8px) scale(1.02); /* eleva ligeramente las tarjetas */
        box-shadow: 0 16px 32px rgba(60, 45, 30, 0.20); /* aumenta la sombra al posicionar el cursor */
    }

    .imagen_experiencia_elegirnos,
    .imagen_analisis_elegirnos,
    .imagen_confidencialidad_elegirnos,
    .imagen_resultados_elegirnos {
        width: min(14vw, 180px); /* limita el ancho de las imagenes */
        max-width: 100%; /* evita que las imagenes sobresalgan de las tarjetas */
        height: min(29vh, 180px); /* controla la altura de las imagenes */
        object-fit: contain; /* muestra las imagenes completas sin recortarlas */
        flex-shrink: 0; /* evita que las imagenes reduzcan su tamaño */
    }

    .linea_experiencia_elegirnos,
    .linea_analisis_elegirnos,
    .linea_confidencialidad_elegirnos,
    .linea_resultados_elegirnos {
        width: 90%; /* establece el ancho de las lineas decorativas */
        height: 1px; /* establece el grosor de las lineas */
        margin-top: min(3vh, 20px); /* limita la separacion superior */
        margin-bottom: min(3vh, 20px); /* limita la separacion inferior */
        background-color: #c99746; /* establece el color dorado de las lineas */
        flex-shrink: 0; /* evita que las lineas reduzcan su tamaño */
    }

    .texto_experiencia_elegirnos,
    .texto_analisis_elegirnos,
    .texto_confidencialidad_elegirnos,
    .texto_resultados_elegirnos {
        color: #c59341; /* establece el color dorado de los textos */
        font-family: 'Raleway', sans-serif; /* establece la tipografia Raleway */
        font-size: min(2.5vh, 1.15rem); /* limita el crecimiento del texto */
        font-weight: 600; /* establece el grosor del texto */
        line-height: 1.25; /* establece la separacion entre lineas */
        text-align: center; /* centra los textos horizontalmente */
    }


    /* SUBTITULO 1 EXPERIENCIA COMPROBADA */

        /* sin estilos especificos */


    /* SUBTITULO 2 ANALISIS ESTRATEGICO */

        /* sin estilos especificos */


    /* SUBTITULO 3 CONFIDENCIALIDAD ABSOLUTA */

        /* sin estilos especificos */


    /* SUBTITULO 4 ORIENTACION A RESULTADOS */

        /* sin estilos especificos */



    /* pantallas grandes (monitores Full HD+, iMac, monitores gaming QHD/4K) */
    @media (min-width: 1441px) {

        /* Sin media */

    }


    /* notebooks grandes (1600x900, 1920x1080) */
    @media (max-width: 1440px) {

        /* Sin media */

    }


    /* notebooks comunes (1366x768, MacBook Air/Pro) */
    @media (max-width: 1200px) {

        .contenedor_tarjetas_elegirnos {
            width: 90%; /* aumenta el ancho disponible para las tarjetas */
            grid-template-columns: repeat(2, minmax(0, 1fr)); /* distribuye las tarjetas en dos columnas */
        }

        .tarjeta_experiencia_elegirnos,
        .tarjeta_analisis_elegirnos,
        .tarjeta_confidencialidad_elegirnos,
        .tarjeta_resultados_elegirnos {
            min-height: min(44vh, 300px); /* controla la altura de las tarjetas */
        }

        .imagen_experiencia_elegirnos,
        .imagen_analisis_elegirnos,
        .imagen_confidencialidad_elegirnos,
        .imagen_resultados_elegirnos {
            width: min(18vw, 170px); /* ajusta el ancho de las imagenes */
            height: min(24vh, 155px); /* limita su altura */
        }

        .texto_experiencia_elegirnos,
        .texto_analisis_elegirnos,
        .texto_confidencialidad_elegirnos,
        .texto_resultados_elegirnos {
            font-size: min(2.2vh, 1.05rem); /* mantiene el tamaño original con un limite */
        }

    }


    /* tablets horizontales / pantallas medianas (iPad Pro en horizontal, notebooks pequeños) */
    @media (max-width: 992px) {

        .tarjeta_experiencia_elegirnos,
        .tarjeta_analisis_elegirnos,
        .tarjeta_confidencialidad_elegirnos,
        .tarjeta_resultados_elegirnos {
            min-height: min(42vh, 290px); /* evita alturas excesivas en tablets altas */
        }

        .imagen_experiencia_elegirnos,
        .imagen_analisis_elegirnos,
        .imagen_confidencialidad_elegirnos,
        .imagen_resultados_elegirnos {
            width: min(24vw, 190px); /* adapta el ancho de las imagenes */
            height: min(23vh, 150px); /* limita la altura de las imagenes */
        }

    }


    /* tablets verticales (iPad clásico, tablets Android estándar) */
    @media (max-width: 768px) {

        .contenedor_tarjetas_elegirnos {
            gap: 1.25rem 3vw; /* establece separaciones estables entre tarjetas */
        }

        .tarjeta_experiencia_elegirnos,
        .tarjeta_analisis_elegirnos,
        .tarjeta_confidencialidad_elegirnos,
        .tarjeta_resultados_elegirnos {
            min-height: min(38vh, 270px); /* controla la altura de las tarjetas */
            padding: min(2.5vh, 22px) 2vw; /* limita sus espacios internos */
        }

        .imagen_experiencia_elegirnos,
        .imagen_analisis_elegirnos,
        .imagen_confidencialidad_elegirnos,
        .imagen_resultados_elegirnos {
            width: min(28vw, 175px); /* adapta el ancho de las imagenes */
            height: min(19vh, 125px); /* controla la altura de las imagenes */
        }

        .texto_experiencia_elegirnos,
        .texto_analisis_elegirnos,
        .texto_confidencialidad_elegirnos,
        .texto_resultados_elegirnos {
            font-size: min(2.3vh, 1rem); /* establece el tamaño de los textos */
        }

    }


    /* móviles extragrandes (pantallas compactas y dispositivos de gran tamaño) */
    @media (max-width: 576px) {

        .contenedor_tarjetas_elegirnos {
            width: 100%; /* utiliza todo el ancho disponible */
            grid-template-columns: 1fr; /* organiza las tarjetas en una sola columna */
            gap: 1.25rem; /* establece una separacion vertical estable */
        }

        .tarjeta_experiencia_elegirnos,
        .tarjeta_analisis_elegirnos,
        .tarjeta_confidencialidad_elegirnos,
        .tarjeta_resultados_elegirnos {
            min-height: min(36vh, 250px); /* limita la altura de las tarjetas en moviles */
            padding: min(3vh, 24px) 4vw; /* controla los espacios internos */
        }

        .imagen_experiencia_elegirnos,
        .imagen_analisis_elegirnos,
        .imagen_confidencialidad_elegirnos,
        .imagen_resultados_elegirnos {
            width: min(55vw, 200px); /* establece el ancho de las imagenes */
            height: min(20vh, 140px); /* controla la altura de las imagenes */
        }

        .texto_experiencia_elegirnos,
        .texto_analisis_elegirnos,
        .texto_confidencialidad_elegirnos,
        .texto_resultados_elegirnos {
            font-size: min(2.4vh, 1.05rem); /* mantiene los textos proporcionados */
        }

    }


    /* móviles grandes (iPhone 11, iPhone Plus/Max, Android grandes) */
    @media (max-width: 414px) {

        /* Sin media */

    }


    /* móviles medianos (iPhone 12/13/14, Android gama media) */
    @media (max-width: 390px) {

        /* Sin media */

    }


    /* móviles pequeños (Android estándar, iPhone SE) */
    @media (max-width: 360px) {

        /* Sin media */

    }


/* TITULO 4 MODALES ELEGIRNOS */

    .fondo_modal_experiencia_elegirnos,
    .fondo_modal_analisis_elegirnos,
    .fondo_modal_confidencialidad_elegirnos,
    .fondo_modal_resultados_elegirnos {
        position: fixed; /* mantiene el modal fijo sobre la pagina */
        top: 0; /* posiciona el modal desde el borde superior */
        left: 0; /* posiciona el modal desde el borde izquierdo */
        width: 100%; /* ocupa todo el ancho de la pantalla */
        height: 100vh; /* establece la altura completa como respaldo */
        height: 100dvh; /* utiliza la altura visible del dispositivo */
        display: none; /* mantiene el modal oculto inicialmente */
        justify-content: center; /* centra horizontalmente el contenido */
        align-items: center; /* centra verticalmente el contenido */
        padding: 2vh 2vw; /* establece espacios alrededor del contenido */
        background-color: rgba(25, 20, 16, 0.72); /* establece el fondo oscurecido */
        z-index: 99999; /* mantiene el modal sobre los demas elementos */
        box-sizing: border-box; /* incluye el padding dentro de las dimensiones */
    }

    .contenido_modal_experiencia_elegirnos,
    .contenido_modal_analisis_elegirnos,
    .contenido_modal_confidencialidad_elegirnos,
    .contenido_modal_resultados_elegirnos {
        width: 70%; /* establece el ancho general del modal */
        max-width: 1000px; /* limita el ancho maximo */
        height: min(70vh, 640px); /* limita la altura del modal en pantallas altas */
        max-height: calc(100dvh - 24px); /* evita que sobrepase la pantalla visible */
        display: flex; /* organiza la imagen y la informacion horizontalmente */
        overflow: hidden; /* evita que el contenido sobresalga del modal */
        background-color: #ffffff; /* establece el fondo blanco */
        border-radius: 14px; /* redondea las esquinas del modal */
        box-shadow: 0 18px 55px rgba(20, 16, 12, 0.24); /* establece una sombra alrededor del modal */
        box-sizing: border-box; /* incluye los espacios dentro de las dimensiones */
    }

    .contenedor_imagen_modal_experiencia_elegirnos,
    .contenedor_imagen_modal_analisis_elegirnos,
    .contenedor_imagen_modal_confidencialidad_elegirnos,
    .contenedor_imagen_modal_resultados_elegirnos {
        width: 44%; /* establece el ancho del panel de imagen */
        height: 100%; /* ocupa toda la altura del modal */
        flex-shrink: 0; /* evita que el panel reduzca su tamaño */
        background-color: #f8f4ee; /* establece el fondo crema del panel */
        overflow: hidden; /* evita que la imagen sobresalga */
    }

    .imagen_modal_experiencia_elegirnos,
    .imagen_modal_analisis_elegirnos,
    .imagen_modal_confidencialidad_elegirnos,
    .imagen_modal_resultados_elegirnos {
        width: 100%; /* ocupa el ancho completo del panel */
        height: 100%; /* ocupa la altura completa del panel */
        display: block; /* elimina espacios inferiores de la imagen */
        object-fit: cover; /* cubre el panel sin deformar la imagen */
    }

    .informacion_modal_experiencia_elegirnos,
    .informacion_modal_analisis_elegirnos,
    .informacion_modal_confidencialidad_elegirnos,
    .informacion_modal_resultados_elegirnos {
        position: relative; /* permite posicionar los elementos internos */
        width: 56%; /* establece el ancho del panel informativo */
        height: 100%; /* ocupa toda la altura disponible */
        min-height: 0; /* permite ajustar el contenido dentro del panel */
        padding: min(7vh, 55px) 4vw min(4vh, 32px) 4vw; /* limita los espacios internos en pantallas altas */
        box-sizing: border-box; /* incluye el padding dentro de las dimensiones */
        overflow-y: auto; /* permite desplazar el contenido cuando sea necesario */
    }

    .boton_cerrar_modal_experiencia_elegirnos,
    .boton_cerrar_modal_analisis_elegirnos,
    .boton_cerrar_modal_confidencialidad_elegirnos,
    .boton_cerrar_modal_resultados_elegirnos {
        position: absolute; /* posiciona el boton dentro del panel informativo */
        top: min(2vh, 16px); /* limita la separacion superior */
        right: 2vw; /* establece la separacion derecha */
        width: 35px; /* establece el ancho del boton */
        height: 35px; /* establece la altura del boton */
        display: flex; /* organiza el contenido del boton */
        justify-content: center; /* centra horizontalmente el simbolo */
        align-items: center; /* centra verticalmente el simbolo */
        padding: 0; /* elimina los espacios internos */
        border: none; /* elimina el borde del boton */
        background-color: transparent; /* mantiene el fondo transparente */
        color: #7a6858; /* establece el color del simbolo */
        font-family: Arial, Helvetica, sans-serif; /* establece la tipografia del boton */
        font-size: 30px; /* establece el tamaño del simbolo */
        font-weight: 300; /* establece el grosor del simbolo */
        line-height: 1; /* controla la altura de linea */
        cursor: pointer; /* muestra el cursor de seleccion */
    }

    .boton_cerrar_modal_experiencia_elegirnos:hover,
    .boton_cerrar_modal_analisis_elegirnos:hover,
    .boton_cerrar_modal_confidencialidad_elegirnos:hover,
    .boton_cerrar_modal_resultados_elegirnos:hover {
        color: #c59341; /* cambia el color al posicionar el cursor */
    }

    .encabezado_modal_experiencia_elegirnos,
    .encabezado_modal_analisis_elegirnos,
    .encabezado_modal_confidencialidad_elegirnos,
    .encabezado_modal_resultados_elegirnos {
        width: 100%; /* ocupa el ancho completo del contenedor */
        display: flex; /* organiza los elementos horizontalmente */
        justify-content: center; /* centra horizontalmente los elementos */
        align-items: center; /* centra verticalmente los elementos */
        gap: 1vw; /* establece la separacion entre los elementos */
        margin-bottom: min(3vh, 24px); /* limita la separacion inferior */
        box-sizing: border-box; /* incluye los espacios dentro de las dimensiones */
    }

    .linea_izquierda_modal_experiencia_elegirnos,
    .linea_izquierda_modal_analisis_elegirnos,
    .linea_izquierda_modal_confidencialidad_elegirnos,
    .linea_izquierda_modal_resultados_elegirnos {
        flex: 1; /* permite utilizar el espacio disponible */
        height: 1px; /* establece el grosor de las lineas */
        background-color: #c99746; /* establece el color dorado */
    }

    .titulo_modal_experiencia_elegirnos,
    .titulo_modal_analisis_elegirnos,
    .titulo_modal_confidencialidad_elegirnos,
    .titulo_modal_resultados_elegirnos {
        min-width: 0; /* permite adaptar el titulo al espacio disponible */
        color: #c59341; /* establece el color dorado del titulo */
        font-family: 'Raleway', sans-serif; /* establece la tipografia Raleway */
        font-size: min(3vh, 24px); /* limita el crecimiento del titulo */
        font-weight: 600; /* establece el grosor del titulo */
        line-height: 1.2; /* establece la separacion entre lineas */
        text-align: center; /* centra horizontalmente el titulo */
        white-space: nowrap; /* mantiene el titulo en una sola linea cuando existe espacio */
    }

    .linea_derecha_modal_experiencia_elegirnos,
    .linea_derecha_modal_analisis_elegirnos,
    .linea_derecha_modal_confidencialidad_elegirnos,
    .linea_derecha_modal_resultados_elegirnos {
        flex: 1; /* permite utilizar el espacio disponible */
        height: 1px; /* establece el grosor de las lineas */
        background-color: #c99746; /* establece el color dorado */
    }

    .subtitulo_modal_experiencia_elegirnos,
    .subtitulo_modal_analisis_elegirnos,
    .subtitulo_modal_confidencialidad_elegirnos,
    .subtitulo_modal_resultados_elegirnos {
        margin-bottom: min(4vh, 32px); /* controla la separacion inferior */
        color: #c59341; /* establece el color dorado del subtitulo */
        font-family: 'Raleway', sans-serif; /* establece la tipografia Raleway */
        font-size: min(2.2vh, 18px); /* limita el crecimiento del subtitulo */
        font-weight: 600; /* establece el grosor del texto */
        line-height: 1.45; /* establece la separacion vertical entre lineas */
        text-align: justify; /* mantiene el texto justificado */
        hyphens: auto; /* permite dividir palabras cuando sea necesario */
    }

    .texto_modal_experiencia_elegirnos,
    .texto_modal_analisis_elegirnos,
    .texto_modal_confidencialidad_elegirnos,
    .texto_modal_resultados_elegirnos {
        margin: 0; /* elimina los margenes predeterminados de las listas */
        padding-left: 1.25rem; /* establece una sangria estable para las listas */
        color: #7e6340; /* establece el color del contenido */
        font-family: 'Raleway', sans-serif; /* establece la tipografia Raleway */
        font-size: min(2vh, 17px); /* limita el crecimiento de los textos */
        line-height: 1.45; /* establece la separacion vertical entre lineas */
        text-align: justify; /* mantiene el contenido justificado */
        hyphens: auto; /* permite dividir palabras para mejorar la lectura */
        overflow-wrap: break-word; /* evita desbordamientos de palabras largas */
    }

    .texto_modal_experiencia_elegirnos li,
    .texto_modal_analisis_elegirnos li,
    .texto_modal_confidencialidad_elegirnos li,
    .texto_modal_resultados_elegirnos li {
        margin-bottom: min(1.1vh, 9px); /* limita la separacion entre elementos */
    }


    /* SUBTITULO 1 MODAL EXPERIENCIA COMPROBADA */

        /* sin estilos */


    /* SUBTITULO 2 MODAL ANALISIS ESTRATEGICO */

        /* sin estilos */


    /* SUBTITULO 3 MODAL CONFIDENCIALIDAD ABSOLUTA */

        /* sin estilos */


    /* SUBTITULO 4 MODAL ORIENTACION A RESULTADOS */

        /* sin estilos */


    .boton_conocer_mas {
        width: 250px; /* establece el ancho del boton */
        max-width: 100%; /* evita que el boton supere el ancho disponible */
        height: 42px; /* establece la altura del boton */
        margin-top: min(4vh, 30px); /* controla la separacion superior del boton */
        padding: 0; /* elimina los espacios internos */
        background: linear-gradient(135deg, #d4a64f, #b8862e); /* establece el fondo degradado */
        border: none; /* elimina el borde */
        border-radius: 6px; /* redondea las esquinas */
        color: #ffffff; /* establece el color blanco del texto */
        font-family: 'Raleway', sans-serif; /* establece la tipografia Raleway */
        font-size: 16px; /* establece el tamaño del texto */
        font-weight: 700; /* establece el grosor del texto */
        cursor: pointer; /* muestra el cursor de seleccion */
        box-shadow: 0 3px 8px rgba(184, 134, 46, 0.25); /* establece una sombra suave */
    }

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



    /* pantallas grandes (monitores Full HD+, iMac, monitores gaming QHD/4K) */
    @media (min-width: 1441px) {

        /* Sin media */

    }


    /* notebooks grandes (1600x900, 1920x1080) */
    @media (max-width: 1440px) {

        /* Sin media */

    }


    /* notebooks comunes (1366x768, MacBook Air/Pro) */
    @media (max-width: 1200px) {

        .contenido_modal_experiencia_elegirnos,
        .contenido_modal_analisis_elegirnos,
        .contenido_modal_confidencialidad_elegirnos,
        .contenido_modal_resultados_elegirnos {
            width: 76%; /* mantiene el ancho original del modal */
            max-width: 950px; /* limita el ancho maximo */
            height: min(70vh, 640px); /* conserva la altura original con un limite */
        }

        .contenedor_imagen_modal_experiencia_elegirnos,
        .contenedor_imagen_modal_analisis_elegirnos,
        .contenedor_imagen_modal_confidencialidad_elegirnos,
        .contenedor_imagen_modal_resultados_elegirnos {
            width: 38%; /* reduce el ancho destinado a la imagen */
        }

        .informacion_modal_experiencia_elegirnos,
        .informacion_modal_analisis_elegirnos,
        .informacion_modal_confidencialidad_elegirnos,
        .informacion_modal_resultados_elegirnos {
            width: 62%; /* aumenta el ancho destinado a la informacion */
            padding: min(4.5vh, 40px) 3vw min(3vh, 28px) 3vw; /* limita los espacios internos */
        }

        .encabezado_modal_experiencia_elegirnos,
        .encabezado_modal_analisis_elegirnos,
        .encabezado_modal_confidencialidad_elegirnos,
        .encabezado_modal_resultados_elegirnos {
            margin-top: min(2vh, 16px); /* limita la separacion superior del encabezado */
        }

    }


    /* tablets horizontales / pantallas medianas (iPad Pro en horizontal, notebooks pequeños) */
    @media (max-width: 992px) {

        .contenido_modal_experiencia_elegirnos,
        .contenido_modal_analisis_elegirnos,
        .contenido_modal_confidencialidad_elegirnos,
        .contenido_modal_resultados_elegirnos {
            width: 82%; /* mantiene el ancho original del modal */
            height: min(76vh, 640px); /* limita la altura en tablets altas */
        }

        .contenedor_imagen_modal_experiencia_elegirnos,
        .contenedor_imagen_modal_analisis_elegirnos,
        .contenedor_imagen_modal_confidencialidad_elegirnos,
        .contenedor_imagen_modal_resultados_elegirnos {
            width: 34%; /* reduce el espacio destinado a la imagen */
        }

        .informacion_modal_experiencia_elegirnos,
        .informacion_modal_analisis_elegirnos,
        .informacion_modal_confidencialidad_elegirnos,
        .informacion_modal_resultados_elegirnos {
            width: 66%; /* aumenta el espacio destinado a la informacion */
            padding: min(3.5vh, 32px) 3vw min(3vh, 24px) 3vw; /* controla los espacios internos */
        }

        .encabezado_modal_experiencia_elegirnos,
        .encabezado_modal_analisis_elegirnos,
        .encabezado_modal_confidencialidad_elegirnos,
        .encabezado_modal_resultados_elegirnos {
            margin-top: min(3vh, 22px); /* controla la separacion superior del encabezado */
        }

        .titulo_modal_experiencia_elegirnos,
        .titulo_modal_analisis_elegirnos,
        .titulo_modal_confidencialidad_elegirnos,
        .titulo_modal_resultados_elegirnos {
            white-space: normal; /* permite dividir titulos largos */
            overflow-wrap: break-word; /* evita que los titulos sobresalgan */
        }

    }


    /* tablets verticales (iPad clásico, tablets Android estándar) */
    @media (max-width: 768px) {

        .contenido_modal_experiencia_elegirnos,
        .contenido_modal_analisis_elegirnos,
        .contenido_modal_confidencialidad_elegirnos,
        .contenido_modal_resultados_elegirnos {
            width: 82%; /* mantiene el ancho original del modal */
            height: min(88vh, 640px); /* conserva la altura anterior con un limite */
            flex-direction: column; /* coloca la imagen arriba y la informacion debajo */
        }

        .contenedor_imagen_modal_experiencia_elegirnos,
        .contenedor_imagen_modal_analisis_elegirnos,
        .contenedor_imagen_modal_confidencialidad_elegirnos,
        .contenedor_imagen_modal_resultados_elegirnos {
            width: 100%; /* ocupa el ancho completo del modal */
            height: 28%; /* reserva la parte superior para la imagen */
            flex: 0 0 28%; /* conserva la proporcion del panel de imagen */
        }

        .informacion_modal_experiencia_elegirnos,
        .informacion_modal_analisis_elegirnos,
        .informacion_modal_confidencialidad_elegirnos,
        .informacion_modal_resultados_elegirnos {
            width: 100%; /* ocupa el ancho completo del modal */
            height: auto; /* permite adaptar la altura al espacio restante */
            min-height: 0; /* permite el desplazamiento interno */
            flex: 1; /* ocupa el espacio restante debajo de la imagen */
            padding: 3.5vh 6vw 3vh 6vw; /* mantiene los espacios originales */
            overflow-y: auto; /* permite desplazar los textos cuando sea necesario */
        }

        .encabezado_modal_experiencia_elegirnos,
        .encabezado_modal_analisis_elegirnos,
        .encabezado_modal_confidencialidad_elegirnos,
        .encabezado_modal_resultados_elegirnos {
            gap: 2vw; /* ajusta la separacion entre los elementos */
            margin-top: 0; /* elimina el desplazamiento heredado de tablets horizontales */
            margin-bottom: 2vh; /* establece la separacion inferior */
        }

        .linea_izquierda_modal_experiencia_elegirnos,
        .linea_izquierda_modal_analisis_elegirnos,
        .linea_izquierda_modal_confidencialidad_elegirnos,
        .linea_izquierda_modal_resultados_elegirnos,
        .linea_derecha_modal_experiencia_elegirnos,
        .linea_derecha_modal_analisis_elegirnos,
        .linea_derecha_modal_confidencialidad_elegirnos,
        .linea_derecha_modal_resultados_elegirnos {
            flex: 0 0 8vw; /* establece un ancho controlado para las lineas */
        }

        .titulo_modal_experiencia_elegirnos,
        .titulo_modal_analisis_elegirnos,
        .titulo_modal_confidencialidad_elegirnos,
        .titulo_modal_resultados_elegirnos {
            font-size: min(2.6vh, 19px); /* mantiene el tamaño anterior con un limite */
            white-space: normal; /* permite dividir los titulos */
        }

        .subtitulo_modal_experiencia_elegirnos,
        .subtitulo_modal_analisis_elegirnos,
        .subtitulo_modal_confidencialidad_elegirnos,
        .subtitulo_modal_resultados_elegirnos {
            margin-bottom: 2.5vh; /* mantiene la separacion inferior */
            font-size: min(2vh, 16px); /* limita el tamaño de los subtitulos */
        }

        .texto_modal_experiencia_elegirnos,
        .texto_modal_analisis_elegirnos,
        .texto_modal_confidencialidad_elegirnos,
        .texto_modal_resultados_elegirnos {
            font-size: min(1.9vh, 16px); /* controla el tamaño de los textos */
        }

        .boton_cerrar_modal_experiencia_elegirnos,
        .boton_cerrar_modal_analisis_elegirnos,
        .boton_cerrar_modal_confidencialidad_elegirnos,
        .boton_cerrar_modal_resultados_elegirnos {
            top: 12px; /* establece la separacion superior */
            right: 15px; /* establece la separacion derecha */
            font-size: 28px; /* ajusta el tamaño del simbolo */
        }

        .boton_conocer_mas {
            width: 230px; /* ajusta el ancho del boton */
            height: 40px; /* ajusta la altura del boton */
            margin-top: min(3vh, 24px); /* controla la separacion superior */
        }

    }


    /* móviles extragrandes (pantallas compactas y dispositivos de gran tamaño) */
    @media (max-width: 576px) {

        .contenido_modal_experiencia_elegirnos,
        .contenido_modal_analisis_elegirnos,
        .contenido_modal_confidencialidad_elegirnos,
        .contenido_modal_resultados_elegirnos {
            width: 90%; /* mantiene el ancho original del modal */
            height: min(84vh, 640px); /* mantiene la altura proporcional con un limite */
        }

        .contenedor_imagen_modal_experiencia_elegirnos,
        .contenedor_imagen_modal_analisis_elegirnos,
        .contenedor_imagen_modal_confidencialidad_elegirnos,
        .contenedor_imagen_modal_resultados_elegirnos {
            height: 23%; /* reserva el 23% de la altura para la imagen */
            flex-basis: 23%; /* establece la proporcion de la imagen */
        }

        .informacion_modal_experiencia_elegirnos,
        .informacion_modal_analisis_elegirnos,
        .informacion_modal_confidencialidad_elegirnos,
        .informacion_modal_resultados_elegirnos {
            padding: 4vh 10vw 2.5vh 10vw; /* mantiene los espacios del diseño movil */
        }

        .boton_cerrar_modal_experiencia_elegirnos,
        .boton_cerrar_modal_analisis_elegirnos,
        .boton_cerrar_modal_confidencialidad_elegirnos,
        .boton_cerrar_modal_resultados_elegirnos {
            top: 1vh; /* ajusta la separacion superior */
            right: 2vw; /* ajusta la separacion derecha */
            width: 28px; /* establece el ancho del boton */
            height: 28px; /* establece la altura del boton */
            font-size: 25px; /* ajusta el tamaño del simbolo */
        }

        .encabezado_modal_experiencia_elegirnos,
        .encabezado_modal_analisis_elegirnos,
        .encabezado_modal_confidencialidad_elegirnos,
        .encabezado_modal_resultados_elegirnos {
            gap: 2vw; /* mantiene la separacion entre los elementos */
            margin-bottom: 2vh; /* establece la separacion inferior */
            padding-right: 18px; /* reserva espacio para el boton cerrar */
            box-sizing: border-box; /* incluye el padding dentro del ancho */
        }

        .linea_izquierda_modal_experiencia_elegirnos,
        .linea_izquierda_modal_analisis_elegirnos,
        .linea_izquierda_modal_confidencialidad_elegirnos,
        .linea_izquierda_modal_resultados_elegirnos,
        .linea_derecha_modal_experiencia_elegirnos,
        .linea_derecha_modal_analisis_elegirnos,
        .linea_derecha_modal_confidencialidad_elegirnos,
        .linea_derecha_modal_resultados_elegirnos {
            flex-basis: 5vw; /* reduce el ancho de las lineas decorativas */
        }

        .titulo_modal_experiencia_elegirnos,
        .titulo_modal_analisis_elegirnos,
        .titulo_modal_confidencialidad_elegirnos,
        .titulo_modal_resultados_elegirnos {
            font-size: min(2vh, 16px); /* recupera el tamaño compacto de los titulos */
            white-space: normal; /* permite dividir titulos largos */
            line-height: 1.25; /* ajusta la separacion entre lineas */
        }

        .subtitulo_modal_experiencia_elegirnos,
        .subtitulo_modal_analisis_elegirnos,
        .subtitulo_modal_confidencialidad_elegirnos,
        .subtitulo_modal_resultados_elegirnos {
            margin-bottom: 2.5vh; /* establece la separacion inferior */
            font-size: min(1.8vh, 15px); /* mantiene el tamaño del subtitulo */
            line-height: 1.45; /* mantiene la separacion entre lineas */
            text-align: justify; /* mantiene el texto justificado */
        }

        .texto_modal_experiencia_elegirnos,
        .texto_modal_analisis_elegirnos,
        .texto_modal_confidencialidad_elegirnos,
        .texto_modal_resultados_elegirnos {
            font-size: min(1.7vh, 15px); /* recupera el tamaño compacto del contenido */
            text-align: justify; /* mantiene el texto justificado */
        }

        .boton_conocer_mas {
            width: 220px; /* ajusta el ancho del boton */
            height: 40px; /* establece la altura del boton */
            font-size: max(13px, min(1.5vh, 15px)); /* mantiene el texto legible en moviles */
        }

    }


    /* móviles grandes (iPhone 11, iPhone Plus/Max, Android grandes) */
    @media (max-width: 414px) {

        /* Sin media */

    }


    /* móviles medianos (iPhone 12/13/14, Android gama media) */
    @media (max-width: 390px) {

        .contenido_modal_experiencia_elegirnos,
        .contenido_modal_analisis_elegirnos,
        .contenido_modal_confidencialidad_elegirnos,
        .contenido_modal_resultados_elegirnos {
            width: 91%; /* mantiene el ancho original del modal */
            height: min(84vh, 640px); /* limita la altura del modal */
        }

        .contenedor_imagen_modal_experiencia_elegirnos,
        .contenedor_imagen_modal_analisis_elegirnos,
        .contenedor_imagen_modal_confidencialidad_elegirnos,
        .contenedor_imagen_modal_resultados_elegirnos {
            height: 22%; /* reserva el 22% de la altura para la imagen */
            flex-basis: 22%; /* establece la proporcion del panel de imagen */
        }

        .informacion_modal_experiencia_elegirnos,
        .informacion_modal_analisis_elegirnos,
        .informacion_modal_confidencialidad_elegirnos,
        .informacion_modal_resultados_elegirnos {
            padding: 4vh 10vw 2.5vh 10vw; /* mantiene los espacios internos */
        }

        .titulo_modal_experiencia_elegirnos,
        .titulo_modal_analisis_elegirnos,
        .titulo_modal_confidencialidad_elegirnos,
        .titulo_modal_resultados_elegirnos {
            font-size: min(2.3vh, 16px); /* controla el tamaño de los titulos */
        }

    }


    /* móviles pequeños (Android estándar, iPhone SE) */
    @media (max-width: 360px) {

        .contenido_modal_experiencia_elegirnos,
        .contenido_modal_analisis_elegirnos,
        .contenido_modal_confidencialidad_elegirnos,
        .contenido_modal_resultados_elegirnos {
            width: 92%; /* mantiene el ancho original del modal */
            height: min(85vh, 640px); /* conserva la altura anterior con un limite */
        }

        .contenedor_imagen_modal_experiencia_elegirnos,
        .contenedor_imagen_modal_analisis_elegirnos,
        .contenedor_imagen_modal_confidencialidad_elegirnos,
        .contenedor_imagen_modal_resultados_elegirnos {
            height: 21%; /* reserva el 21% de la altura para la imagen */
            flex-basis: 21%; /* establece la proporcion del panel de imagen */
        }

        .informacion_modal_experiencia_elegirnos,
        .informacion_modal_analisis_elegirnos,
        .informacion_modal_confidencialidad_elegirnos,
        .informacion_modal_resultados_elegirnos {
            padding: 4vh 10vw 2.5vh 10vw; /* mantiene los espacios internos del diseño original */
        }

        .titulo_modal_experiencia_elegirnos,
        .titulo_modal_analisis_elegirnos,
        .titulo_modal_confidencialidad_elegirnos,
        .titulo_modal_resultados_elegirnos {
            font-size: min(2vh, 16px); /* mantiene el titulo compacto */
            white-space: normal; /* permite dividir titulos largos */
            line-height: 1.25; /* ajusta la separacion vertical */
        }

        .linea_izquierda_modal_experiencia_elegirnos,
        .linea_izquierda_modal_analisis_elegirnos,
        .linea_izquierda_modal_confidencialidad_elegirnos,
        .linea_izquierda_modal_resultados_elegirnos,
        .linea_derecha_modal_experiencia_elegirnos,
        .linea_derecha_modal_analisis_elegirnos,
        .linea_derecha_modal_confidencialidad_elegirnos,
        .linea_derecha_modal_resultados_elegirnos {
            flex-basis: 5vw; /* mantiene el ancho reducido de las lineas */
        }

        .subtitulo_modal_experiencia_elegirnos,
        .subtitulo_modal_analisis_elegirnos,
        .subtitulo_modal_confidencialidad_elegirnos,
        .subtitulo_modal_resultados_elegirnos {
            font-size: min(1.7vh, 14px); /* recupera el tamaño del subtitulo */
            line-height: 1.4; /* mantiene la separacion entre lineas */
            text-align: justify; /* conserva el texto justificado */
        }

        .texto_modal_experiencia_elegirnos,
        .texto_modal_analisis_elegirnos,
        .texto_modal_confidencialidad_elegirnos,
        .texto_modal_resultados_elegirnos {
            font-size: min(1.6vh, 14px); /* recupera el tamaño del contenido en 360px */
            line-height: 1.4; /* ajusta la separacion entre lineas */
            text-align: justify; /* mantiene el contenido justificado */
        }

    }

/* -------------------------------------------------------------------------------------------------------------
   -------------------------------------- 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 
*/