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

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


/* TITULO 1 SECCION NUESTROS SERVICIOS */

    .nuestros_servicios {
        width: 100%; /* establece el ancho completo de la seccion */
        min-height: min(100vh, 850px); /* limita la altura minima para evitar espacios excesivos en pantallas altas */
        display: flex; /* organiza los elementos mediante una estructura flexible */
        flex-direction: column; /* distribuye los elementos verticalmente */
        justify-content: center; /* centra verticalmente el contenido cuando existe espacio disponible */
        align-items: center; /* centra horizontalmente los elementos */
        padding: 3.5rem 5%; /* establece espacios internos independientes de la altura de la pantalla */
        box-sizing: border-box; /* incluye el padding dentro de las dimensiones */
        background-color: #f8f4ee; /* establece el fondo crema 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) {

        .nuestros_servicios {
            padding: 3rem 4%; /* ajusta los espacios internos para notebooks */
        }

    }


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

        .nuestros_servicios {
            min-height: 0; /* permite adaptar la altura segun el contenido de las tarjetas */
            padding: 3rem 4%; /* mantiene espacios internos estables en tablets */
        }        

    }


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

        .nuestros_servicios {
            padding: 2.5rem 4%; /* ajusta los espacios internos para tablets verticales */
        }

    }


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

        .nuestros_servicios {
            padding: 2.5rem 5%; /* establece los espacios internos de los dispositivos 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) {

        /* Sin media */

    }


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

        .nuestros_servicios {
            padding: 2rem 5%; /* reduce los espacios internos en pantallas pequeñas */
        }

    }


/* TITULO 2 ENCABEZADO NUESTROS SERVICIOS */

    .encabezado_nuestros_servicios {
        width: 75%; /* establece el ancho del encabezado */
        display: flex; /* organiza los elementos horizontalmente */
        justify-content: center; /* centra horizontalmente los elementos */
        align-items: center; /* centra verticalmente los elementos */
        gap: 1.5vw; /* establece la separacion horizontal de los elementos */
        margin-bottom: 2rem; /* separa el encabezado de las tarjetas */
    }

    .linea_izquierda_nuestros_servicios {
        flex: 1; /* permite utilizar el espacio horizontal disponible */
        height: 1.5px; /* establece el grosor de la linea decorativa */
        background-color: #c99746; /* establece el color dorado de la linea */
    }

    .titulo_nuestros_servicios {
        color: #c59341; /* establece el color dorado del titulo */
        font-family: 'Raleway', sans-serif; /* establece la tipografia Raleway */
        font-size: 3rem; /* establece un tamaño independiente de la altura de la pantalla */
        font-weight: 500; /* establece el grosor del titulo */
        line-height: 1.2; /* mantiene una separacion adecuada entre lineas */
        white-space: nowrap; /* evita que el titulo se divida en varias lineas */
    }

    .linea_derecha_nuestros_servicios {
        flex: 1; /* permite utilizar el espacio horizontal disponible */
        height: 1.5px; /* establece el grosor de la linea decorativa */
        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_nuestros_servicios {
            width: 85%; /* aumenta el espacio disponible para el encabezado */
        }

        .titulo_nuestros_servicios {
            font-size: 2.6rem; /* ajusta el tamaño del titulo para notebooks */
        }

    }


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

        .encabezado_nuestros_servicios {
            width: 90%; /* aumenta el ancho disponible del encabezado */
            gap: 2vw; /* ajusta la separacion horizontal */
        }

        .titulo_nuestros_servicios {
            font-size: 2.3rem; /* mantiene el titulo proporcionado en tablets altas */
        }

    }


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

        .encabezado_nuestros_servicios {
            width: 95%; /* utiliza casi todo el ancho disponible */
        }

        .titulo_nuestros_servicios {
            font-size: 2rem; /* adapta el titulo a tablets verticales */
            white-space: normal; /* permite dividir el titulo cuando sea necesario */
            text-align: center; /* centra el titulo cuando ocupa varias lineas */
        }

    }


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

        .encabezado_nuestros_servicios {
            width: 100%; /* utiliza el ancho completo disponible */
            gap: 3vw; /* ajusta la separacion entre el titulo y las lineas */
            margin-bottom: 1.5rem; /* reduce la separacion con las tarjetas */
        }

        .titulo_nuestros_servicios {
            font-size: 1.7rem; /* establece un tamaño legible para dispositivos 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) {

        .titulo_nuestros_servicios {
            font-size: 1.6rem; /* ajusta ligeramente el tamaño del titulo */
        }
    }


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

        .titulo_nuestros_servicios {
            font-size: 1.5rem; /* adapta el titulo a pantallas pequeñas */
        }

    }


/* TITULO 3 CONTENEDOR TARJETAS NUESTROS SERVICIOS */

    .contenedor_tarjetas_nuestros_servicios {
        width: 90%; /* establece el ancho del contenedor de las tarjetas */
        display: grid; /* organiza las tarjetas mediante una cuadricula */
        grid-template-columns: repeat(5, minmax(0, 1fr)); /* distribuye cinco tarjetas en columnas iguales */
        grid-auto-rows: auto; /* permite que las filas se adapten al contenido */
        gap: 1.5vw; /* establece la separacion entre las tarjetas */
        justify-content: center; /* centra horizontalmente las tarjetas */
        align-items: stretch; /* mantiene las tarjetas de cada fila con la misma altura */
    }


    .tarjeta_telecomunicaciones_nuestros_servicios,
    .tarjeta_inmobiliaria_nuestros_servicios,
    .tarjeta_familia_nuestros_servicios,
    .tarjeta_laborales_nuestros_servicios,
    .tarjeta_civiles_nuestros_servicios {
        min-width: 0; /* permite adaptar las tarjetas al ancho de sus columnas */
        min-height: 300px; /* establece una altura minima estable */
        display: flex; /* organiza los elementos mediante una estructura flexible */
        flex-direction: column; /* distribuye los elementos verticalmente */
        justify-content: center; /* centra verticalmente los elementos */
        align-items: center; /* centra horizontalmente los elementos */
        padding: 1.5rem 0.75rem; /* establece espacios internos independientes de la altura */
        box-sizing: border-box; /* incluye el padding dentro de las dimensiones */
        background-color: #ffffff; /* establece el fondo blanco de las tarjetas */
        border-radius: 14px; /* redondea las esquinas de las tarjetas */
        box-shadow: 0 2px 4px rgba(42, 32, 26, 0.10); /* agrega 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_telecomunicaciones_nuestros_servicios:hover,
    .tarjeta_inmobiliaria_nuestros_servicios:hover,
    .tarjeta_familia_nuestros_servicios:hover,
    .tarjeta_laborales_nuestros_servicios:hover,
    .tarjeta_civiles_nuestros_servicios:hover {
        transform: translateY(-8px) scale(1.02); /* eleva ligeramente la tarjeta */
        box-shadow: 0 16px 32px rgba(60, 45, 30, 0.20); /* aumenta la sombra al posicionar el cursor */
    }

    .imagen_telecomunicaciones_nuestros_servicios,
    .imagen_inmobiliaria_nuestros_servicios,
    .imagen_familia_nuestros_servicios,
    .imagen_laborales_nuestros_servicios,
    .imagen_civiles_nuestros_servicios {
        width: 100%; /* permite utilizar el ancho disponible de la tarjeta */
        max-width: 170px; /* limita el ancho maximo de las imagenes */
        height: 170px; /* establece una altura estable para las imagenes */
        object-fit: contain; /* mantiene las imagenes completas sin recortarlas */
        flex-shrink: 0; /* evita que las imagenes se compriman */
    }

    .linea_telecomunicaciones_nuestros_servicios,
    .linea_inmobiliaria_nuestros_servicios,
    .linea_familia_nuestros_servicios,
    .linea_laborales_nuestros_servicios,
    .linea_civiles_nuestros_servicios {
        width: 90%; /* establece el ancho de las lineas decorativas */
        height: 1px; /* establece el grosor de las lineas */
        margin-top: 1rem; /* separa las lineas de las imagenes */
        margin-bottom: 1rem; /* separa las lineas de los textos */
        background-color: #c99746; /* establece el color dorado */
        flex-shrink: 0; /* evita que las lineas reduzcan sus dimensiones */
    }

    .texto_telecomunicaciones_nuestros_servicios,
    .texto_inmobiliaria_nuestros_servicios,
    .texto_familia_nuestros_servicios,
    .texto_laborales_nuestros_servicios,
    .texto_civiles_nuestros_servicios {
        color: #c59341; /* establece el color dorado del texto */
        font-family: 'Raleway', sans-serif; /* establece la tipografia Raleway */
        font-size: 1.1rem; /* establece un tamaño estable para los textos */
        font-weight: 600; /* establece el grosor del texto */
        line-height: 1.3; /* mantiene una separacion adecuada entre lineas */
        text-align: center; /* centra horizontalmente los textos */
    }

    /* 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_nuestros_servicios {
            width: 94%; /* aumenta el ancho disponible para las tarjetas */
            grid-template-columns: repeat(6, minmax(0, 1fr)); /* permite distribuir tres tarjetas arriba y dos centradas abajo */
            column-gap: 1vw; /* ajusta la separacion horizontal */
            row-gap: 1.5rem; /* establece una separacion vertical estable */
        }

        .tarjeta_telecomunicaciones_nuestros_servicios,
        .tarjeta_inmobiliaria_nuestros_servicios,
        .tarjeta_familia_nuestros_servicios,
        .tarjeta_laborales_nuestros_servicios,
        .tarjeta_civiles_nuestros_servicios {
            min-height: 310px; /* mantiene una altura uniforme */
            padding: 1.5rem 1rem; /* ajusta los espacios internos */
        }

        .texto_telecomunicaciones_nuestros_servicios,
        .texto_inmobiliaria_nuestros_servicios,
        .texto_familia_nuestros_servicios,
        .texto_laborales_nuestros_servicios,
        .texto_civiles_nuestros_servicios {
            font-size: 1.05rem; /* ajusta el tamaño del texto */
        }


        /* SUBTITULO 1 ASESORIA TELECOMUNICACIONES */

            .tarjeta_telecomunicaciones_nuestros_servicios {
                grid-column: 1 / 3; /* posiciona la tarjeta en la primera fila */
            }


        /* SUBTITULO 2 ASESORIA INMOBILIARIA */

            .tarjeta_inmobiliaria_nuestros_servicios {
                grid-column: 3 / 5; /* posiciona la tarjeta en el centro de la primera fila */
            }


        /* SUBTITULO 3 ASESORIA CAUSAS DE FAMILIA */

            .tarjeta_familia_nuestros_servicios {
                grid-column: 5 / 7; /* posiciona la tarjeta al final de la primera fila */
            }


        /* SUBTITULO 4 ASESORIA CAUSAS LABORALES */

            .tarjeta_laborales_nuestros_servicios {
                grid-column: 2 / 4; /* centra la primera tarjeta de la segunda fila */
            }


        /* SUBTITULO 5 ASESORIA CAUSAS CIVILES */

            .tarjeta_civiles_nuestros_servicios {
                grid-column: 4 / 6; /* centra la segunda tarjeta de la segunda fila */
            }


    }


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

        .contenedor_tarjetas_nuestros_servicios {
            width: 92%; /* establece el ancho disponible para las tarjetas */
            grid-template-columns: repeat(4, minmax(0, 1fr)); /* permite distribuir dos tarjetas por fila */
            column-gap: 1.25vw; /* ajusta la separacion horizontal */
        }

        .tarjeta_telecomunicaciones_nuestros_servicios,
        .tarjeta_inmobiliaria_nuestros_servicios,
        .tarjeta_familia_nuestros_servicios,
        .tarjeta_laborales_nuestros_servicios,
        .tarjeta_civiles_nuestros_servicios {
            grid-column: span 2; /* permite que cada tarjeta ocupe la mitad de la cuadricula */
            min-height: 320px; /* mantiene una altura estable independientemente del alto de la pantalla */
        }


        /* SUBTITULO 5 ASESORIA CAUSAS CIVILES */

            .tarjeta_civiles_nuestros_servicios {
                grid-column: 2 / 4; /* centra la ultima tarjeta */
            }

    }


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

        .contenedor_tarjetas_nuestros_servicios {
            width: 94%; /* aprovecha el ancho disponible */
            row-gap: 1.25rem; /* establece una separacion uniforme entre las filas */
        }

        .tarjeta_telecomunicaciones_nuestros_servicios,
        .tarjeta_inmobiliaria_nuestros_servicios,
        .tarjeta_familia_nuestros_servicios,
        .tarjeta_laborales_nuestros_servicios,
        .tarjeta_civiles_nuestros_servicios {
            min-height: 300px; /* adapta la altura de las tarjetas */
            padding: 1.25rem 1rem; /* ajusta los espacios internos */
        }

        .imagen_telecomunicaciones_nuestros_servicios,
        .imagen_inmobiliaria_nuestros_servicios,
        .imagen_familia_nuestros_servicios,
        .imagen_laborales_nuestros_servicios,
        .imagen_civiles_nuestros_servicios {
            height: 155px; /* reduce ligeramente la altura de las imagenes */
        }

    }


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

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

        .tarjeta_telecomunicaciones_nuestros_servicios,
        .tarjeta_inmobiliaria_nuestros_servicios,
        .tarjeta_familia_nuestros_servicios,
        .tarjeta_laborales_nuestros_servicios,
        .tarjeta_civiles_nuestros_servicios {
            grid-column: auto; /* elimina las posiciones utilizadas en las cuadriculas anteriores */
            min-height: 280px; /* ajusta la altura minima para dispositivos moviles */
            padding: 1.25rem 1rem; /* establece los espacios internos de las tarjetas */
        }

        .imagen_telecomunicaciones_nuestros_servicios,
        .imagen_inmobiliaria_nuestros_servicios,
        .imagen_familia_nuestros_servicios,
        .imagen_laborales_nuestros_servicios,
        .imagen_civiles_nuestros_servicios {
            max-width: 190px; /* limita el ancho de las imagenes */
            height: 160px; /* establece una altura estable */
        }

        .texto_telecomunicaciones_nuestros_servicios,
        .texto_inmobiliaria_nuestros_servicios,
        .texto_familia_nuestros_servicios,
        .texto_laborales_nuestros_servicios,
        .texto_civiles_nuestros_servicios {
            font-size: 1.1rem; /* mantiene un tamaño legible en dispositivos 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) {

        .contenedor_tarjetas_nuestros_servicios {
            gap: 1rem; /* ajusta la separacion vertical entre tarjetas */
        }

    }


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

        .tarjeta_telecomunicaciones_nuestros_servicios,
        .tarjeta_inmobiliaria_nuestros_servicios,
        .tarjeta_familia_nuestros_servicios,
        .tarjeta_laborales_nuestros_servicios,
        .tarjeta_civiles_nuestros_servicios {
            min-height: 260px; /* adapta la altura minima a pantallas pequeñas */
            padding: 1rem; /* reduce los espacios internos */
        }

        .imagen_telecomunicaciones_nuestros_servicios,
        .imagen_inmobiliaria_nuestros_servicios,
        .imagen_familia_nuestros_servicios,
        .imagen_laborales_nuestros_servicios,
        .imagen_civiles_nuestros_servicios {
            height: 145px; /* adapta la altura de las imagenes */
        }

        .texto_telecomunicaciones_nuestros_servicios,
        .texto_inmobiliaria_nuestros_servicios,
        .texto_familia_nuestros_servicios,
        .texto_laborales_nuestros_servicios,
        .texto_civiles_nuestros_servicios {
            font-size: 1rem; /* ajusta el tamaño del texto */
        }

    }


/* TITULO 4 MODALES NUESTROS SERVICIOS */

    .modal_telecomunicaciones_nuestros_servicios,
    .modal_inmobiliaria_nuestros_servicios,
    .modal_familia_nuestros_servicios,
    .modal_laborales_nuestros_servicios,
    .modal_civiles_nuestros_servicios {
        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 el ancho completo de la pantalla */
        height: 100vh; /* establece la altura completa de la pantalla */
        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 */
        background-color: rgba(42, 32, 26, 0.55); /* establece el fondo semitransparente */
        z-index: 99999; /* mantiene el modal sobre los demas elementos */
        box-sizing: border-box; /* incluye los espacios internos dentro de las dimensiones */
    }

    .contenido_modal_telecomunicaciones_nuestros_servicios,
    .contenido_modal_inmobiliaria_nuestros_servicios,
    .contenido_modal_familia_nuestros_servicios,
    .contenido_modal_laborales_nuestros_servicios,
    .contenido_modal_civiles_nuestros_servicios {
        position: relative; /* permite posicionar los elementos internos */
        width: 70%; /* establece el ancho general del modal */
        max-width: 1000px; /* limita el ancho maximo del modal */
        height: min(70vh, 640px); /* mantiene la altura proporcional con un limite para pantallas altas */
        max-height: calc(100dvh - 24px); /* evita que el modal supere la altura visible */
        display: flex; /* organiza la imagen y la informacion horizontalmente */
        box-sizing: border-box; /* incluye los espacios internos dentro de las dimensiones */
        background-color: #ffffff; /* establece el fondo blanco del modal */
        border-radius: 14px; /* redondea las esquinas del modal */
        box-shadow: 0 5px 15px rgba(42, 32, 26, 0.20); /* agrega una sombra suave */
        overflow: hidden; /* evita que los elementos sobresalgan del modal */
    }

    .imagen_modal_telecomunicaciones_nuestros_servicios,
    .imagen_modal_inmobiliaria_nuestros_servicios,
    .imagen_modal_familia_nuestros_servicios,
    .imagen_modal_laborales_nuestros_servicios,
    .imagen_modal_civiles_nuestros_servicios {
        width: 44%; /* establece el ancho del panel de imagen */
        height: 100%; /* ocupa toda la altura disponible del modal */
        overflow: hidden; /* evita que la imagen sobresalga del contenedor */
        flex-shrink: 0; /* evita que el panel reduzca su tamaño */
    }

    .imagen_modal_telecomunicaciones_nuestros_servicios img,
    .imagen_modal_inmobiliaria_nuestros_servicios img,
    .imagen_modal_familia_nuestros_servicios img,
    .imagen_modal_laborales_nuestros_servicios img,
    .imagen_modal_civiles_nuestros_servicios img {
        width: 100%; /* establece el ancho completo de la imagen */
        height: 100%; /* establece la altura completa de la imagen */
        display: block; /* elimina espacios inferiores de la imagen */
        object-fit: cover; /* adapta la imagen al panel sin deformarla */
    }

    .informacion_modal_telecomunicaciones_nuestros_servicios,
    .informacion_modal_inmobiliaria_nuestros_servicios,
    .informacion_modal_familia_nuestros_servicios,
    .informacion_modal_laborales_nuestros_servicios,
    .informacion_modal_civiles_nuestros_servicios {
        position: relative; /* permite posicionar los elementos internos */
        width: 56%; /* establece el ancho del panel informativo */
        height: 100%; /* ocupa toda la altura disponible del modal */
        min-height: 0; /* permite ajustar el contenido dentro del panel */
        display: flex; /* organiza los elementos mediante una estructura flexible */
        flex-direction: column; /* distribuye los elementos verticalmente */
        justify-content: flex-start; /* posiciona la informacion desde la parte superior */
        padding: min(7vh, 55px) 4vw min(4vh, 33px) 4vw; /* controla los espacios internos en pantallas altas */
        overflow-y: auto; /* permite desplazar la informacion cuando supera el espacio disponible */
        box-sizing: border-box; /* incluye los espacios internos dentro de las dimensiones */
    }

    .boton_cerrar_modal_telecomunicaciones_nuestros_servicios,
    .boton_cerrar_modal_inmobiliaria_nuestros_servicios,
    .boton_cerrar_modal_familia_nuestros_servicios,
    .boton_cerrar_modal_laborales_nuestros_servicios,
    .boton_cerrar_modal_civiles_nuestros_servicios {
        position: absolute; /* posiciona el boton respecto al contenedor informativo */
        top: 1.5vh; /* establece la separacion superior del boton */
        right: 1.2vw; /* establece la separacion derecha del boton */
        width: 35px; /* establece el ancho del boton */
        height: 35px; /* establece la altura del boton */
        display: flex; /* organiza internamente el 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 predeterminado */
        background-color: transparent; /* mantiene el fondo transparente */
        color: #c59341; /* establece el color dorado del simbolo */
        font-family: 'Raleway', sans-serif; /* establece la tipografia Raleway */
        font-size: 32px; /* establece el tamaño del simbolo */
        font-weight: 400; /* establece el grosor del simbolo */
        line-height: 1; /* controla la altura de linea */
        cursor: pointer; /* muestra el cursor de seleccion */
    }

    .boton_cerrar_modal_telecomunicaciones_nuestros_servicios:hover,
    .boton_cerrar_modal_inmobiliaria_nuestros_servicios:hover,
    .boton_cerrar_modal_familia_nuestros_servicios:hover,
    .boton_cerrar_modal_laborales_nuestros_servicios:hover,
    .boton_cerrar_modal_civiles_nuestros_servicios:hover {
        color: #9f7021; /* oscurece el simbolo al posicionar el cursor */
    }

    .encabezado_modal_telecomunicaciones_nuestros_servicios,
    .encabezado_modal_inmobiliaria_nuestros_servicios,
    .encabezado_modal_familia_nuestros_servicios,
    .encabezado_modal_laborales_nuestros_servicios,
    .encabezado_modal_civiles_nuestros_servicios {
        width: 100%; /* establece el ancho completo del encabezado */
        display: flex; /* organiza los elementos horizontalmente */
        justify-content: center; /* centra horizontalmente los elementos */
        align-items: center; /* centra verticalmente los elementos */
        gap: 1.2vw; /* establece la separacion entre los elementos */
        margin-bottom: min(3vh, 24px); /* limita la separacion inferior del encabezado */
    }

    .linea_izquierda_modal_telecomunicaciones_nuestros_servicios,
    .linea_izquierda_modal_inmobiliaria_nuestros_servicios,
    .linea_izquierda_modal_familia_nuestros_servicios,
    .linea_izquierda_modal_laborales_nuestros_servicios,
    .linea_izquierda_modal_civiles_nuestros_servicios,
    .linea_derecha_modal_telecomunicaciones_nuestros_servicios,
    .linea_derecha_modal_inmobiliaria_nuestros_servicios,
    .linea_derecha_modal_familia_nuestros_servicios,
    .linea_derecha_modal_laborales_nuestros_servicios,
    .linea_derecha_modal_civiles_nuestros_servicios {
        width: 3.5vw; /* establece el ancho de las lineas decorativas */
        height: 1px; /* establece el grosor de las lineas */
        background-color: #c99746; /* establece el color dorado de las lineas */
        flex-shrink: 0; /* evita que las lineas reduzcan su tamaño */
    }

    .titulo_principal_modal_telecomunicaciones_nuestros_servicios,
    .titulo_principal_modal_inmobiliaria_nuestros_servicios,
    .titulo_principal_modal_familia_nuestros_servicios,
    .titulo_principal_modal_laborales_nuestros_servicios,
    .titulo_principal_modal_civiles_nuestros_servicios {
        color: #c59341; /* establece el color dorado del titulo */
        font-family: 'Raleway', sans-serif; /* establece la tipografia Raleway */
        font-size: min(3vh, 23px); /* limita el crecimiento del titulo en pantallas altas */
        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 */
    }

    .subtitulo_modal_telecomunicaciones_nuestros_servicios,
    .subtitulo_modal_inmobiliaria_nuestros_servicios,
    .subtitulo_modal_familia_nuestros_servicios,
    .subtitulo_modal_laborales_nuestros_servicios,
    .subtitulo_modal_civiles_nuestros_servicios {
        width: 100%; /* establece el ancho completo del subtitulo */
        margin-bottom: min(4vh, 32px); /* controla la separacion inferior en pantallas altas */
        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 tamaño del subtitulo */
        font-weight: 600; /* establece el grosor del texto */
        line-height: 1.5; /* establece la separacion vertical entre lineas */
        text-align: justify; /* mantiene el texto justificado */
    }

    .texto_modal_telecomunicaciones_nuestros_servicios,
    .texto_modal_inmobiliaria_nuestros_servicios,
    .texto_modal_familia_nuestros_servicios,
    .texto_modal_laborales_nuestros_servicios,
    .texto_modal_civiles_nuestros_servicios {
        width: 100%; /* establece el ancho completo del contenido */
        color: #7e6340; /* establece el color del texto informativo */
        font-family: 'Raleway', sans-serif; /* establece la tipografia Raleway */
        font-size: min(2vh, 16px); /* limita el tamaño del texto en pantallas altas */
        font-weight: 400; /* establece el grosor normal del texto */
        line-height: 1.45; /* establece la separacion entre lineas */
        text-align: justify; /* mantiene el texto justificado */
    }

    .texto_modal_telecomunicaciones_nuestros_servicios ul,
    .texto_modal_inmobiliaria_nuestros_servicios ul,
    .texto_modal_familia_nuestros_servicios ul,
    .texto_modal_laborales_nuestros_servicios ul,
    .texto_modal_civiles_nuestros_servicios ul {
        margin: 0; /* elimina los margenes predeterminados de las listas */
        padding-left: 1.3vw; /* establece el espacio izquierdo de las listas */
    }

    .texto_modal_telecomunicaciones_nuestros_servicios li,
    .texto_modal_inmobiliaria_nuestros_servicios li,
    .texto_modal_familia_nuestros_servicios li,
    .texto_modal_laborales_nuestros_servicios li,
    .texto_modal_civiles_nuestros_servicios li {
        margin-bottom: min(0.6vh, 8px); /* establece una separacion controlada entre elementos */
    }


    /* SUBTITULO 1 MODAL TELECOMUNICACIONES */

        /* sin estilos */


    /* SUBTITULO 2 MODAL INMOBILIARIA */

        /* sin estilos */


    /* SUBTITULO 3 MODAL FAMILIA */

        .texto_modal_familia_nuestros_servicios {
            line-height: 1.35; /* ajusta la separacion vertical del texto de familia */
        }


    /* SUBTITULO 4 MODAL LABORALES */

        .texto_modal_laborales_nuestros_servicios {
            line-height: 1.35; /* ajusta la separacion vertical del texto laboral */
        }


    /* SUBTITULO 5 MODAL CIVILES */

        .texto_modal_civiles_nuestros_servicios {
            line-height: 1.4; /* ajusta la separacion vertical del texto civil */
        }



    /* 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_telecomunicaciones_nuestros_servicios,
        .contenido_modal_inmobiliaria_nuestros_servicios,
        .contenido_modal_familia_nuestros_servicios,
        .contenido_modal_laborales_nuestros_servicios,
        .contenido_modal_civiles_nuestros_servicios {
            width: 76%; /* recupera el ancho original del modal */
            max-width: 950px; /* limita el ancho maximo */
            height: min(74vh, 640px); /* conserva la altura original con un limite para pantallas altas */
        }

        .imagen_modal_telecomunicaciones_nuestros_servicios,
        .imagen_modal_inmobiliaria_nuestros_servicios,
        .imagen_modal_familia_nuestros_servicios,
        .imagen_modal_laborales_nuestros_servicios,
        .imagen_modal_civiles_nuestros_servicios {
            width: 38%; /* reduce el ancho del panel de imagen */
        }

        .informacion_modal_telecomunicaciones_nuestros_servicios,
        .informacion_modal_inmobiliaria_nuestros_servicios,
        .informacion_modal_familia_nuestros_servicios,
        .informacion_modal_laborales_nuestros_servicios,
        .informacion_modal_civiles_nuestros_servicios {
            width: 62%; /* establece el ancho destinado a la informacion */
            padding: min(4.5vh, 40px) 3vw min(3vh, 30px) 3vw; /* mantiene los espacios originales con limites */
        }

    }


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

        .contenido_modal_telecomunicaciones_nuestros_servicios,
        .contenido_modal_inmobiliaria_nuestros_servicios,
        .contenido_modal_familia_nuestros_servicios,
        .contenido_modal_laborales_nuestros_servicios,
        .contenido_modal_civiles_nuestros_servicios {
            width: 82%; /* establece el ancho original del modal */
            height: min(76vh, 640px); /* conserva la altura original y evita un crecimiento excesivo */
        }

        .imagen_modal_telecomunicaciones_nuestros_servicios,
        .imagen_modal_inmobiliaria_nuestros_servicios,
        .imagen_modal_familia_nuestros_servicios,
        .imagen_modal_laborales_nuestros_servicios,
        .imagen_modal_civiles_nuestros_servicios {
            width: 34%; /* establece el ancho del panel de imagen */
        }

        .informacion_modal_telecomunicaciones_nuestros_servicios,
        .informacion_modal_inmobiliaria_nuestros_servicios,
        .informacion_modal_familia_nuestros_servicios,
        .informacion_modal_laborales_nuestros_servicios,
        .informacion_modal_civiles_nuestros_servicios {
            width: 66%; /* establece el ancho del panel informativo */
            padding: min(3.5vh, 35px) 3vw min(3vh, 28px) 3vw; /* controla los espacios internos del contenido */
        }

    }


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

        .contenido_modal_telecomunicaciones_nuestros_servicios,
        .contenido_modal_inmobiliaria_nuestros_servicios,
        .contenido_modal_familia_nuestros_servicios,
        .contenido_modal_laborales_nuestros_servicios,
        .contenido_modal_civiles_nuestros_servicios {
            width: 82%; /* establece el ancho original del modal */
            height: min(88vh, 640px); /* recupera la altura original con un limite para tablets altas */
            flex-direction: column; /* posiciona la imagen arriba y la informacion debajo */
        }

        .imagen_modal_telecomunicaciones_nuestros_servicios,
        .imagen_modal_inmobiliaria_nuestros_servicios,
        .imagen_modal_familia_nuestros_servicios,
        .imagen_modal_laborales_nuestros_servicios,
        .imagen_modal_civiles_nuestros_servicios {
            width: 100%; /* establece el ancho completo del panel de imagen */
            height: 28%; /* reserva el 28% de la altura del modal para la imagen */
        }

        .informacion_modal_telecomunicaciones_nuestros_servicios,
        .informacion_modal_inmobiliaria_nuestros_servicios,
        .informacion_modal_familia_nuestros_servicios,
        .informacion_modal_laborales_nuestros_servicios,
        .informacion_modal_civiles_nuestros_servicios {
            width: 100%; /* establece el ancho completo del panel informativo */
            height: 72%; /* reserva el 72% de la altura para la informacion */
            padding: 3.5vh 6vw 3vh 6vw; /* ajusta los espacios internos para tablets */
            overflow-y: auto; /* permite desplazar la informacion cuando sea necesario */
        }

    }


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

        .contenido_modal_telecomunicaciones_nuestros_servicios,
        .contenido_modal_inmobiliaria_nuestros_servicios,
        .contenido_modal_familia_nuestros_servicios,
        .contenido_modal_laborales_nuestros_servicios,
        .contenido_modal_civiles_nuestros_servicios {
            width: 90%; /* recupera el ancho original del modal */
            height: min(84vh, 640px); /* recupera la altura original con un limite para pantallas altas */
        }

        .imagen_modal_telecomunicaciones_nuestros_servicios,
        .imagen_modal_inmobiliaria_nuestros_servicios,
        .imagen_modal_familia_nuestros_servicios,
        .imagen_modal_laborales_nuestros_servicios,
        .imagen_modal_civiles_nuestros_servicios {
            height: 23%; /* reserva el 23% de la altura para la imagen */
        }

        .informacion_modal_telecomunicaciones_nuestros_servicios,
        .informacion_modal_inmobiliaria_nuestros_servicios,
        .informacion_modal_familia_nuestros_servicios,
        .informacion_modal_laborales_nuestros_servicios,
        .informacion_modal_civiles_nuestros_servicios {
            height: 77%; /* reserva el 77% de la altura para la informacion */
            padding: 4vh 8vw 2.5vh 8vw; /* establece los espacios internos del panel */
        }

        .boton_cerrar_modal_telecomunicaciones_nuestros_servicios,
        .boton_cerrar_modal_inmobiliaria_nuestros_servicios,
        .boton_cerrar_modal_familia_nuestros_servicios,
        .boton_cerrar_modal_laborales_nuestros_servicios,
        .boton_cerrar_modal_civiles_nuestros_servicios {
            top: 1vh; /* ajusta la posicion superior del boton */
            right: 2vw; /* ajusta la posicion derecha del boton */
            width: 28px; /* establece el ancho del boton */
            height: 28px; /* establece la altura del boton */
            font-size: 25px; /* ajusta el tamaño del simbolo de cierre */
        }

        .encabezado_modal_telecomunicaciones_nuestros_servicios,
        .encabezado_modal_inmobiliaria_nuestros_servicios,
        .encabezado_modal_familia_nuestros_servicios,
        .encabezado_modal_laborales_nuestros_servicios,
        .encabezado_modal_civiles_nuestros_servicios {
            gap: 2vw; /* reduce la separacion entre las lineas y el titulo */
            margin-bottom: 2vh; /* establece la separacion inferior del encabezado */
            padding-right: 18px; /* reserva espacio para el boton de cierre */
            box-sizing: border-box; /* incluye el padding dentro de las dimensiones */
        }

        .linea_izquierda_modal_telecomunicaciones_nuestros_servicios,
        .linea_izquierda_modal_inmobiliaria_nuestros_servicios,
        .linea_izquierda_modal_familia_nuestros_servicios,
        .linea_izquierda_modal_laborales_nuestros_servicios,
        .linea_izquierda_modal_civiles_nuestros_servicios,
        .linea_derecha_modal_telecomunicaciones_nuestros_servicios,
        .linea_derecha_modal_inmobiliaria_nuestros_servicios,
        .linea_derecha_modal_familia_nuestros_servicios,
        .linea_derecha_modal_laborales_nuestros_servicios,
        .linea_derecha_modal_civiles_nuestros_servicios {
            width: 4vw; /* ajusta el ancho de las lineas decorativas */
        }

        .titulo_principal_modal_telecomunicaciones_nuestros_servicios,
        .titulo_principal_modal_inmobiliaria_nuestros_servicios,
        .titulo_principal_modal_familia_nuestros_servicios,
        .titulo_principal_modal_laborales_nuestros_servicios,
        .titulo_principal_modal_civiles_nuestros_servicios {
            font-size: min(1.7vh, 16px); /* recupera el tamaño compacto del titulo */
            white-space: normal; /* permite dividir el titulo cuando sea necesario */
            line-height: 1.25; /* mantiene una separacion adecuada entre lineas */
        }

        .subtitulo_modal_telecomunicaciones_nuestros_servicios,
        .subtitulo_modal_inmobiliaria_nuestros_servicios,
        .subtitulo_modal_familia_nuestros_servicios,
        .subtitulo_modal_laborales_nuestros_servicios,
        .subtitulo_modal_civiles_nuestros_servicios {
            margin-bottom: 2.5vh; /* establece la separacion inferior del subtitulo */
            font-size: min(1.8vh, 16px); /* recupera el tamaño compacto del subtitulo */
            line-height: 1.45; /* establece la separacion entre lineas */
            text-align: justify; /* mantiene el texto justificado */
        }

        .texto_modal_telecomunicaciones_nuestros_servicios,
        .texto_modal_inmobiliaria_nuestros_servicios,
        .texto_modal_familia_nuestros_servicios,
        .texto_modal_laborales_nuestros_servicios,
        .texto_modal_civiles_nuestros_servicios {
            font-size: min(1.7vh, 15px); /* recupera el tamaño compacto del texto */
            text-align: justify; /* mantiene el contenido justificado */
        }

    }


    /* 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_telecomunicaciones_nuestros_servicios,
        .contenido_modal_inmobiliaria_nuestros_servicios,
        .contenido_modal_familia_nuestros_servicios,
        .contenido_modal_laborales_nuestros_servicios,
        .contenido_modal_civiles_nuestros_servicios {
            width: 91%; /* establece el ancho original del modal */
            height: min(84vh, 640px); /* mantiene la altura proporcional con un limite */
        }

        .imagen_modal_telecomunicaciones_nuestros_servicios,
        .imagen_modal_inmobiliaria_nuestros_servicios,
        .imagen_modal_familia_nuestros_servicios,
        .imagen_modal_laborales_nuestros_servicios,
        .imagen_modal_civiles_nuestros_servicios {
            height: 22%; /* reserva el 22% de la altura para la imagen */
        }

        .informacion_modal_telecomunicaciones_nuestros_servicios,
        .informacion_modal_inmobiliaria_nuestros_servicios,
        .informacion_modal_familia_nuestros_servicios,
        .informacion_modal_laborales_nuestros_servicios,
        .informacion_modal_civiles_nuestros_servicios {
            height: 78%; /* reserva el 78% de la altura para la informacion */
            padding: 4vh 8vw 2.5vh 8vw; /* establece los espacios internos del panel */
        }

        .titulo_principal_modal_telecomunicaciones_nuestros_servicios,
        .titulo_principal_modal_inmobiliaria_nuestros_servicios,
        .titulo_principal_modal_familia_nuestros_servicios,
        .titulo_principal_modal_laborales_nuestros_servicios,
        .titulo_principal_modal_civiles_nuestros_servicios {
            font-size: min(2vh, 16px); /* ajusta el tamaño del titulo para moviles medianos */
        }

    }


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

        .contenido_modal_telecomunicaciones_nuestros_servicios,
        .contenido_modal_inmobiliaria_nuestros_servicios,
        .contenido_modal_familia_nuestros_servicios,
        .contenido_modal_laborales_nuestros_servicios,
        .contenido_modal_civiles_nuestros_servicios {
            width: 92%; /* recupera el ancho original del modal */
            height: min(85vh, 640px); /* recupera la altura del 85% con un limite para pantallas altas */
        }

        .imagen_modal_telecomunicaciones_nuestros_servicios,
        .imagen_modal_inmobiliaria_nuestros_servicios,
        .imagen_modal_familia_nuestros_servicios,
        .imagen_modal_laborales_nuestros_servicios,
        .imagen_modal_civiles_nuestros_servicios {
            height: 21%; /* reserva el 21% de la altura para la imagen */
        }

        .informacion_modal_telecomunicaciones_nuestros_servicios,
        .informacion_modal_inmobiliaria_nuestros_servicios,
        .informacion_modal_familia_nuestros_servicios,
        .informacion_modal_laborales_nuestros_servicios,
        .informacion_modal_civiles_nuestros_servicios {
            height: 79%; /* reserva el 79% de la altura para la informacion */
            padding: 4vh 8vw 2.5vh 8vw; /* recupera los espacios internos del diseño original */
        }

        .titulo_principal_modal_telecomunicaciones_nuestros_servicios,
        .titulo_principal_modal_inmobiliaria_nuestros_servicios,
        .titulo_principal_modal_familia_nuestros_servicios,
        .titulo_principal_modal_laborales_nuestros_servicios,
        .titulo_principal_modal_civiles_nuestros_servicios {
            font-size: min(2vh, 16px); /* mantiene el tamaño compacto del titulo */
            white-space: normal; /* permite dividir el titulo cuando sea necesario */
            line-height: 1.25; /* establece la separacion vertical entre lineas */
        }

        .linea_izquierda_modal_telecomunicaciones_nuestros_servicios,
        .linea_izquierda_modal_inmobiliaria_nuestros_servicios,
        .linea_izquierda_modal_familia_nuestros_servicios,
        .linea_izquierda_modal_laborales_nuestros_servicios,
        .linea_izquierda_modal_civiles_nuestros_servicios,
        .linea_derecha_modal_telecomunicaciones_nuestros_servicios,
        .linea_derecha_modal_inmobiliaria_nuestros_servicios,
        .linea_derecha_modal_familia_nuestros_servicios,
        .linea_derecha_modal_laborales_nuestros_servicios,
        .linea_derecha_modal_civiles_nuestros_servicios {
            width: 5vw; /* ajusta el ancho de las lineas decorativas */
        }

        .subtitulo_modal_telecomunicaciones_nuestros_servicios,
        .subtitulo_modal_inmobiliaria_nuestros_servicios,
        .subtitulo_modal_familia_nuestros_servicios,
        .subtitulo_modal_laborales_nuestros_servicios,
        .subtitulo_modal_civiles_nuestros_servicios {
            font-size: min(1.7vh, 15px); /* recupera el tamaño del subtitulo en pantallas pequeñas */
            line-height: 1.4; /* establece la separacion entre lineas */
            text-align: justify; /* mantiene el texto justificado */
        }

        .texto_modal_telecomunicaciones_nuestros_servicios,
        .texto_modal_inmobiliaria_nuestros_servicios,
        .texto_modal_familia_nuestros_servicios,
        .texto_modal_laborales_nuestros_servicios,
        .texto_modal_civiles_nuestros_servicios {
            font-size: min(1.6vh, 14px); /* recupera el tamaño original del texto en 360px */
            line-height: 1.4; /* establece la separacion entre lineas */
            text-align: justify; /* mantiene el contenido justificado */
        }

    }

/* TITULO 5 BOTON VER SERVICIOS */

    .boton_ver_servicios {
        width: 200px; /* establece el ancho del boton */
        height: 42px; /* establece la altura del boton */
        margin-top: 2rem; /* establece una separacion superior independiente de la altura */
        padding: 0; /* elimina los espacios internos adicionales */
        background: linear-gradient(135deg, #d4a64f, #b8862e); /* establece el degradado dorado */
        border: none; /* elimina el borde del boton */
        border-radius: 6px; /* redondea las esquinas del boton */
        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); /* agrega una sombra suave */
    }

    .boton_ver_servicios:hover {
        background: linear-gradient(135deg, #c99746, #9f7021); /* modifica el degradado al posicionar 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 
*/