/* 
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: #F7F5F0; /* 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: 90%; /* mantiene el ancho alineado al contenedor de tarjetas */
        display: flex; /* permite distribuir los elementos del encabezado */
        flex-direction: column; /* coloca la linea dorada encima del titulo */
        justify-content: center; /* organiza el contenido del encabezado */
        align-items: flex-start; /* alinea el titulo a la izquierda */
        gap: 0.65rem; /* establece la separacion entre linea y titulo */
        margin-bottom: 1.75rem; /* separa el encabezado de las tarjetas */
    }

    .linea_izquierda_nuestros_servicios {
        width: 95px; /* limita la linea dorada del encabezado */
        height: 1.5px; /* establece el grosor de la linea */
        flex: none; /* evita que la linea se estire */
        background-color: #99813D; /* utiliza el dorado envejecido */
    }

    .titulo_nuestros_servicios {
        color: #182B3A; /* mantiene el azul tinta corporativo */
        font-family: 'Raleway', sans-serif; /* mantiene la tipografia actual */
        font-size: 3rem; /* establece el tamaño del titulo */
        font-weight: 500; /* mantiene el grosor original */
        line-height: 1.2; /* mantiene un interlineado proporcionado */
        white-space: normal; /* permite adaptarse a pantallas reducidas */
        text-align: left; /* mantiene alineado el titulo a la izquierda */
    }

    .linea_derecha_nuestros_servicios {
        display: none; /* oculta la segunda linea de la version anterior */
    }

    /* 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: 94%; /* alinea el encabezado al ancho de las tarjetas */
        }

        .titulo_nuestros_servicios {
            font-size: 2.6rem; /* adapta el titulo a notebooks */
        }

    }

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

        .encabezado_nuestros_servicios {
            width: 92%; /* iguala el ancho de las tarjetas */
        }

        .titulo_nuestros_servicios {
            font-size: 2.3rem; /* adapta el titulo a tablets */
        }

    }

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

        .encabezado_nuestros_servicios {
            width: 94%; /* mantiene el encabezado alineado */
        }

        .titulo_nuestros_servicios {
            font-size: 2rem; /* adapta el titulo a tablets verticales */
        }

    }

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

        .encabezado_nuestros_servicios {
            width: 100%; /* utiliza el espacio disponible en moviles */
            margin-bottom: 1.5rem; /* ajusta la separacion inferior */
        }

        .titulo_nuestros_servicios {
            font-size: 1.7rem; /* mantiene el titulo legible */
        }

    }

    /* 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 el 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 disponible para las tarjetas */
        display: grid; /* organiza las cinco tarjetas en una cuadricula */
        grid-template-columns: minmax(0, 1.8fr) repeat(2, minmax(0, 1fr)); /* una tarjeta grande y dos columnas pequeñas */
        grid-template-rows: repeat(2, minmax(205px, auto)); /* crea dos filas para las tarjetas pequeñas */
        gap: 12px; /* separa las tarjetas uniformemente */
        align-items: stretch; /* estira las tarjetas hasta llenar sus celdas */
    }

    .tarjeta_telecomunicaciones_nuestros_servicios,
    .tarjeta_inmobiliaria_nuestros_servicios,
    .tarjeta_familia_nuestros_servicios,
    .tarjeta_laborales_nuestros_servicios,
    .tarjeta_civiles_nuestros_servicios {
        position: relative; /* permite ubicar la flecha decorativa dentro de la tarjeta */
        min-width: 0; /* evita desbordamientos dentro de la cuadricula */
        min-height: 0; /* permite que la altura dependa de la fila */
        display: flex; /* organiza icono y texto verticalmente */
        flex-direction: column; /* mantiene los elementos uno debajo de otro */
        justify-content: flex-start; /* alinea el contenido arriba */
        align-items: flex-start; /* alinea el contenido a la izquierda */
        padding: 1.5rem 1.4rem 3rem; /* deja espacio para la flecha inferior */
        box-sizing: border-box; /* incluye el borde dentro del tamaño */
        background-color: #ffffff; /* mantiene las tarjetas blancas */
        border: 1px solid rgba(153, 129, 61, 0.25); /* incorpora un borde dorado discreto */
        border-radius: 14px; /* utiliza esquinas rectas como la referencia */
        box-shadow: 0 1px 3px rgba(42, 32, 26, 0.05); /* agrega una sombra muy suave */
        cursor: pointer; /* conserva el comportamiento clicable */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* mantiene un efecto suave */
    }

    .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(-4px); /* eleva ligeramente la tarjeta */
        box-shadow: 0 8px 18px rgba(60, 45, 30, 0.12); /* suaviza la sombra al pasar el cursor */
    }

    .tarjeta_telecomunicaciones_nuestros_servicios::after,
    .tarjeta_inmobiliaria_nuestros_servicios::after,
    .tarjeta_familia_nuestros_servicios::after,
    .tarjeta_laborales_nuestros_servicios::after,
    .tarjeta_civiles_nuestros_servicios::after {
        content: '→'; /* dibuja una flecha decorativa sin cambiar el PHP */
        position: absolute; /* posiciona la flecha respecto a la tarjeta */
        right: 18px; /* separa la flecha del borde derecho */
        bottom: 14px; /* separa la flecha del borde inferior */
        font-size: 2rem; /* establece un tamaño visible */
        line-height: 1; /* evita un espacio vertical innecesario */
        color: #182B3A; /* utiliza el azul tinta corporativo */
        pointer-events: none; /* deja que el clic lo reciba la tarjeta */
    }

    .imagen_telecomunicaciones_nuestros_servicios,
    .imagen_inmobiliaria_nuestros_servicios,
    .imagen_familia_nuestros_servicios,
    .imagen_laborales_nuestros_servicios,
    .imagen_civiles_nuestros_servicios {
        width: 120px; /* aumenta el ancho de los iconos */
        max-width: 100%; /* impide que el icono sobresalga */
        height: 120px; /* aumenta el alto de los iconos */
        object-fit: contain; /* mantiene las proporciones sin deformar */
        flex-shrink: 0; /* evita que el icono se comprima */
        margin-bottom: 0.4rem; /* mantiene la separacion con el titulo */
    }

    .linea_telecomunicaciones_nuestros_servicios,
    .linea_inmobiliaria_nuestros_servicios,
    .linea_familia_nuestros_servicios,
    .linea_laborales_nuestros_servicios,
    .linea_civiles_nuestros_servicios {
        display: none; /* mantiene ocultas las lineas internas */
    }

    .texto_telecomunicaciones_nuestros_servicios,
    .texto_inmobiliaria_nuestros_servicios,
    .texto_familia_nuestros_servicios,
    .texto_laborales_nuestros_servicios,
    .texto_civiles_nuestros_servicios {
        color: #182B3A; /* mantiene el azul tinta corporativo */
        font-family: 'Raleway', sans-serif; /* conserva la tipografia del sitio */
        font-size: 1.4rem; /* adapta los titulos a las tarjetas pequeñas */
        font-weight: 600; /* mantiene un grosor legible */
        line-height: 1.25; /* permite titulos en varias lineas */
        text-align: left; /* alinea los titulos a la izquierda */
    }

    .tarjeta_telecomunicaciones_nuestros_servicios {
        grid-column: 1; /* coloca telecomunicaciones en la columna izquierda */
        grid-row: 1 / span 2; /* hace que ocupe las dos filas */
        padding: 2rem 2rem 3rem; /* amplía el espacio interior de la tarjeta principal */
        border-color: #99813D; /* destaca la tarjeta principal con borde dorado */
    }

    .imagen_telecomunicaciones_nuestros_servicios {
        width: 130px; /* hace más grande el icono principal */
        height: 130px; /* conserva las proporciones del icono */
        margin-bottom: 0.75rem; /* separa icono y titulo principal */
    }

    .texto_telecomunicaciones_nuestros_servicios {
        font-size: clamp(1.5rem, 2vw, 2rem); /* destaca el titulo de telecomunicaciones */
        font-weight: 600; /* mantiene el grosor corporativo */
        line-height: 1.2; /* permite distribuir el titulo en dos lineas */
    }

    .descripcion_telecomunicaciones_nuestros_servicios {
        width: 95%;
        margin-top: 1rem; /* separa la descripcion del titulo principal */
        margin-bottom: 2rem; /* reserva espacio antes de la flecha */
        color: #45494D; /* utiliza gris oscuro para el texto explicativo */
        font-family: 'Raleway', sans-serif; /* mantiene la tipografia del proyecto */
        font-size: 1.2rem; /* mantiene la descripcion legible */
        font-weight: 400; /* distingue la descripcion del titulo */
        line-height: 1.5; /* facilita la lectura del texto */
        text-align: justify; /* alinea la descripcion a la izquierda */
    }

    /* 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%; /* aprovecha mejor el ancho disponible */
            grid-template-columns: minmax(0, 1.55fr) repeat(2, minmax(0, 1fr)); /* conserva el bloque principal y dos columnas */
            grid-template-rows: repeat(2, minmax(185px, auto)); /* ajusta las filas a notebooks */
            gap: 12px; /* mantiene la separacion entre tarjetas */
        }

        .tarjeta_telecomunicaciones_nuestros_servicios,
        .tarjeta_inmobiliaria_nuestros_servicios,
        .tarjeta_familia_nuestros_servicios,
        .tarjeta_laborales_nuestros_servicios,
        .tarjeta_civiles_nuestros_servicios {
            min-height: 0; /* permite adaptar el alto de cada tarjeta */
            padding: 1.2rem 1rem 2.75rem; /* ajusta el espacio interno */
        }

        .texto_telecomunicaciones_nuestros_servicios,
        .texto_inmobiliaria_nuestros_servicios,
        .texto_familia_nuestros_servicios,
        .texto_laborales_nuestros_servicios,
        .texto_civiles_nuestros_servicios {
            font-size: 1.08rem; /* ajusta los titulos para notebooks */
        }

        /* SUBTITULO 1 ASESORIA TELECOMUNICACIONES */

            .tarjeta_telecomunicaciones_nuestros_servicios {
                grid-column: 1; /* conserva la columna izquierda */
                grid-row: 1 / span 2; /* conserva la altura de dos filas */
                padding: 3rem 3rem 3rem; /* mantiene el espacio del bloque grande */
            }

            .texto_telecomunicaciones_nuestros_servicios {
                font-size: 1.3rem; /* destaca el titulo principal */
            }

            .descripcion_telecomunicaciones_nuestros_servicios{
                font-size: 1.1rem;
                width: 100%;
            }

        /* SUBTITULO 2 ASESORIA INMOBILIARIA */

            .tarjeta_inmobiliaria_nuestros_servicios {
                grid-column: 2; /* coloca inmobiliaria arriba a la derecha */
                grid-row: 1; /* mantiene la primera fila */
            }

        /* SUBTITULO 3 ASESORIA CAUSAS DE FAMILIA */

            .tarjeta_familia_nuestros_servicios {
                grid-column: 3; /* coloca familia junto a inmobiliaria */
                grid-row: 1; /* mantiene la primera fila */
            }

        /* SUBTITULO 4 ASESORIA CAUSAS LABORALES */

            .tarjeta_laborales_nuestros_servicios {
                grid-column: 2; /* coloca laboral debajo de inmobiliaria */
                grid-row: 2; /* mantiene la segunda fila */
            }

        /* SUBTITULO 5 ASESORIA CAUSAS CIVILES */

            .tarjeta_civiles_nuestros_servicios {
                grid-column: 3; /* coloca civil debajo de familia */
                grid-row: 2; /* mantiene la segunda fila */
            }

    }


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

    .contenedor_tarjetas_nuestros_servicios {
        width: 92%; /* mantiene margenes laterales */
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* organiza dos tarjetas por fila */
        grid-template-rows: auto; /* adapta las filas al contenido */
        grid-auto-rows: auto; /* permite crear filas adicionales */
        gap: 12px; /* mantiene la separacion entre tarjetas */
    }

    .tarjeta_telecomunicaciones_nuestros_servicios,
    .tarjeta_inmobiliaria_nuestros_servicios,
    .tarjeta_familia_nuestros_servicios,
    .tarjeta_laborales_nuestros_servicios,
    .tarjeta_civiles_nuestros_servicios {
        display: grid; /* organiza los elementos horizontalmente */
        grid-template-columns: 84px minmax(0, 1fr); /* reserva espacio para el icono y el titulo */
        grid-template-rows: auto; /* adapta la altura al contenido */
        align-items: center; /* centra verticalmente los elementos */
        align-content: center; /* centra el conjunto dentro de la tarjeta */
        column-gap: 12px; /* separa el icono del titulo */
        grid-column: auto; /* elimina las posiciones de escritorio */
        grid-row: auto; /* elimina las posiciones de escritorio */
        min-height: 160px; /* mantiene una altura proporcionada */
        padding: 1rem 1rem 1rem; /* reserva espacio para la flecha */
    }

    .imagen_telecomunicaciones_nuestros_servicios,
    .imagen_inmobiliaria_nuestros_servicios,
    .imagen_familia_nuestros_servicios,
    .imagen_laborales_nuestros_servicios,
    .imagen_civiles_nuestros_servicios {
        grid-column: 1; /* coloca el icono a la izquierda */
        grid-row: 1; /* mantiene el icono junto al titulo */
        width: 130px; /* establece el ancho del icono */
        height: 130px; /* establece el alto del icono */
        margin-bottom: 0; /* elimina la separacion inferior anterior */
    }

    .texto_telecomunicaciones_nuestros_servicios,
    .texto_inmobiliaria_nuestros_servicios,
    .texto_familia_nuestros_servicios,
    .texto_laborales_nuestros_servicios,
    .texto_civiles_nuestros_servicios {
        grid-column: 2; /* coloca el titulo a la derecha */
        grid-row: 1; /* lo alinea con el icono */
        min-width: 0; /* permite adaptar el texto */
        margin: 0; /* elimina margenes adicionales */
        text-align: left; /* mantiene los titulos alineados a la izquierda */
        font-size: 1.4rem; /* mantiene un tamaño legible */
    }

    /* SUBTITULO 1 ASESORIA TELECOMUNICACIONES */

        .tarjeta_telecomunicaciones_nuestros_servicios {
            grid-column: 1 / -1; /* ocupa las dos columnas */
            grid-row: auto; /* elimina la altura de dos filas */
            grid-template-columns: 112px minmax(0, 1fr); /* icono y titulo principal */
            grid-template-rows: auto auto; /* reserva una fila para la descripcion */
            row-gap: 14px; /* separa la descripcion */
            min-height: 250px; /* mantiene destacada la tarjeta */
            padding: 1.5rem 2.5rem 2.8rem; /* establece espacios internos */
        }

        .imagen_telecomunicaciones_nuestros_servicios {
            width: 105px; /* destaca el icono principal */
            height: 105px; /* mantiene sus proporciones */
        }

        .texto_telecomunicaciones_nuestros_servicios {
            font-size: 1.55rem; /* destaca el titulo */
            line-height: 1.25; /* controla el interlineado */
        }

        .descripcion_telecomunicaciones_nuestros_servicios {
            grid-column: 1 / -1; /* ocupa todo el ancho de la tarjeta */
            grid-row: 2; /* coloca la descripcion debajo */
            width: 100%; /* aprovecha el espacio disponible */
            margin: 0; /* elimina margenes anteriores */
            text-align: justify; /* mantiene una lectura natural */
            font-size: 1rem;
        }

}


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

    .contenedor_tarjetas_nuestros_servicios {
        width: 94%; /* aprovecha el espacio disponible */
        gap: 12px; /* mantiene la separacion */
    }

    .tarjeta_telecomunicaciones_nuestros_servicios,
    .tarjeta_inmobiliaria_nuestros_servicios,
    .tarjeta_familia_nuestros_servicios,
    .tarjeta_laborales_nuestros_servicios,
    .tarjeta_civiles_nuestros_servicios {
        grid-template-columns: 76px minmax(0, 1fr); /* adapta el espacio del icono */
        min-height: 145px; /* reduce ligeramente la altura */
        padding: 1rem 1rem 1rem; /* reserva espacio para la flecha */
        grid-template-columns: 105px minmax(0, 1fr); /* adapta el espacio del icono */
        min-height: 155px; /* establece una altura minima mas compacta */
        padding: 20px 20px 15px 10px; /* reduce el espacio superior e inferior */    }

    .texto_telecomunicaciones_nuestros_servicios,
    .texto_inmobiliaria_nuestros_servicios,
    .texto_familia_nuestros_servicios,
    .texto_laborales_nuestros_servicios,
    .texto_civiles_nuestros_servicios {
        grid-column: 2; /* coloca el titulo a la derecha */
        grid-row: 1; /* lo alinea con el icono */
        min-width: 0; /* permite adaptar el texto */
        margin: 0; /* elimina margenes adicionales */
        text-align: left; /* mantiene los titulos alineados a la izquierda */
        font-size: 1.1rem; /* mantiene un tamaño legible */
    }

    .imagen_telecomunicaciones_nuestros_servicios,
    .imagen_inmobiliaria_nuestros_servicios,
    .imagen_familia_nuestros_servicios,
    .imagen_laborales_nuestros_servicios,
    .imagen_civiles_nuestros_servicios {

        width: 100px; /* mantiene los iconos visibles */
        height: 100px; /* reduce el espacio vertical que ocupan */
        object-fit: contain; /* evita deformaciones */
    }

    .tarjeta_telecomunicaciones_nuestros_servicios {
        grid-template-columns: 95px minmax(0, 1fr); /* mantiene el icono principal destacado */
        min-height: 225px; /* reserva espacio para la descripcion */
        padding: 1.5rem 2.5rem 2.8rem; /* establece espacios internos */
    }

    .imagen_telecomunicaciones_nuestros_servicios {
        width: 90px; /* mantiene el icono principal mas grande */
        height: 90px; /* mantiene sus proporciones */
    }

    .texto_telecomunicaciones_nuestros_servicios {
        font-size: 1.35rem; /* adapta el titulo */
    }

}


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

    .contenedor_tarjetas_nuestros_servicios {
        grid-template-columns: 1fr; /* vuelve a una sola columna */
    }

    .tarjeta_telecomunicaciones_nuestros_servicios,
    .tarjeta_inmobiliaria_nuestros_servicios,
    .tarjeta_familia_nuestros_servicios,
    .tarjeta_laborales_nuestros_servicios,
    .tarjeta_civiles_nuestros_servicios {
        grid-column: 1; /* ocupa todo el ancho disponible */
        grid-template-columns: 72px minmax(0, 1fr); /* icono y titulo en horizontal */
        min-height: 125px; /* mantiene las tarjetas compactas */
    }

    .tarjeta_telecomunicaciones_nuestros_servicios {
        grid-column: 1 / -1; /* mantiene la tarjeta principal */
        min-height: 220px; /* reserva espacio para la descripcion */
    }

    .imagen_telecomunicaciones_nuestros_servicios,
    .imagen_inmobiliaria_nuestros_servicios,
    .imagen_familia_nuestros_servicios,
    .imagen_laborales_nuestros_servicios,
    .imagen_civiles_nuestros_servicios {

        width: 100px; /* mantiene los iconos visibles */
        height: 100px; /* reduce el espacio vertical que ocupan */
        object-fit: contain; /* evita deformaciones */
    }

    .texto_telecomunicaciones_nuestros_servicios,
    .texto_inmobiliaria_nuestros_servicios,
    .texto_familia_nuestros_servicios,
    .texto_laborales_nuestros_servicios,
    .texto_civiles_nuestros_servicios {
        grid-column: 2; /* coloca el titulo a la derecha */
        grid-row: 1; /* lo alinea con el icono */
        min-width: 0; /* permite adaptar el texto */
        margin: 0; /* elimina margenes adicionales */
        text-align: left; /* mantiene los titulos alineados a la izquierda */
        font-size: 1.2rem; /* mantiene un tamaño legible */
    }

    .descripcion_telecomunicaciones_nuestros_servicios {
        grid-column: 1 / -1; /* ocupa todo el ancho de la tarjeta */
        grid-row: 2; /* coloca la descripcion debajo */
        width: 100%; /* aprovecha el espacio disponible */
        margin: 0; /* elimina margenes anteriores */
        text-align: justify; /* mantiene una lectura natural */
        font-size: 1rem;
    }


}


@media (max-width: 414px) {

    .tarjeta_telecomunicaciones_nuestros_servicios,
    .tarjeta_inmobiliaria_nuestros_servicios,
    .tarjeta_familia_nuestros_servicios,
    .tarjeta_laborales_nuestros_servicios,
    .tarjeta_civiles_nuestros_servicios {
        grid-template-columns: 64px minmax(0, 1fr); /* adapta icono y titulo */
        min-height: 115px; /* mantiene las tarjetas compactas */
        padding: 1rem 0.9rem 0.9rem; /* adapta los espacios internos */
        column-gap: 10px; /* mantiene la separacion horizontal */
    }

    .imagen_telecomunicaciones_nuestros_servicios,
    .imagen_inmobiliaria_nuestros_servicios,
    .imagen_familia_nuestros_servicios,
    .imagen_laborales_nuestros_servicios,
    .imagen_civiles_nuestros_servicios {
        width: 60px; /* adapta los iconos a pantallas pequeñas */
        height: 60px; /* mantiene las proporciones */
    }

    .texto_telecomunicaciones_nuestros_servicios,
    .texto_inmobiliaria_nuestros_servicios,
    .texto_familia_nuestros_servicios,
    .texto_laborales_nuestros_servicios,
    .texto_civiles_nuestros_servicios {
        font-size: 1rem; /* mantiene los titulos legibles */
    }

    .tarjeta_telecomunicaciones_nuestros_servicios {
        grid-template-columns: 65px minmax(0, 1fr); /* mantiene icono y titulo en horizontal */
        grid-template-rows: auto auto; /* organiza la descripcion debajo */
        min-height: 0; /* adapta la altura al contenido */
        padding: 18px 15px 42px; /* optimiza el espacio interior */
        column-gap: 10px; /* separa el icono del titulo */
        row-gap: 12px; /* separa la descripcion */
        align-content: start; /* organiza el contenido desde arriba */
    }

    .texto_telecomunicaciones_nuestros_servicios {
        font-size: 1.08rem; /* mantiene el titulo proporcionado */
        line-height: 1.3; /* mejora el interlineado */
    }

    .descripcion_telecomunicaciones_nuestros_servicios {
        grid-column: 1 / -1; /* aprovecha todo el ancho de la tarjeta */
        grid-row: 2; /* coloca la descripcion debajo del encabezado */
        width: 100%; /* ocupa el espacio disponible */
        margin: 0; /* elimina margenes adicionales */
        font-size: 0.92rem; /* adapta ligeramente la descripcion */
        line-height: 1.5; /* conserva una lectura comoda */
        text-align: justify; /* evita espacios grandes entre palabras */
    }

}


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

    .tarjeta_telecomunicaciones_nuestros_servicios,
    .tarjeta_inmobiliaria_nuestros_servicios,
    .tarjeta_familia_nuestros_servicios,
    .tarjeta_laborales_nuestros_servicios,
    .tarjeta_civiles_nuestros_servicios {
        grid-template-columns: 64px minmax(0, 1fr); /* adapta icono y titulo */
        min-height: 115px; /* mantiene las tarjetas compactas */
        padding: 1rem 0.9rem 0.9rem; /* adapta los espacios internos */
        column-gap: 10px; /* mantiene la separacion horizontal */
    }

    .imagen_telecomunicaciones_nuestros_servicios,
    .imagen_inmobiliaria_nuestros_servicios,
    .imagen_familia_nuestros_servicios,
    .imagen_laborales_nuestros_servicios,
    .imagen_civiles_nuestros_servicios {
        width: 60px; /* adapta los iconos a pantallas pequeñas */
        height: 60px; /* mantiene las proporciones */
    }

    .texto_telecomunicaciones_nuestros_servicios,
    .texto_inmobiliaria_nuestros_servicios,
    .texto_familia_nuestros_servicios,
    .texto_laborales_nuestros_servicios,
    .texto_civiles_nuestros_servicios {
        font-size: 1rem; /* mantiene los titulos legibles */
    }

    .tarjeta_telecomunicaciones_nuestros_servicios {
        grid-template-columns: 65px minmax(0, 1fr); /* mantiene icono y titulo en horizontal */
        grid-template-rows: auto auto; /* organiza la descripcion debajo */
        min-height: 0; /* adapta la altura al contenido */
        padding: 18px 15px 42px; /* optimiza el espacio interior */
        column-gap: 10px; /* separa el icono del titulo */
        row-gap: 12px; /* separa la descripcion */
        align-content: start; /* organiza el contenido desde arriba */
    }

    .texto_telecomunicaciones_nuestros_servicios {
        font-size: 1.08rem; /* mantiene el titulo proporcionado */
        line-height: 1.3; /* mejora el interlineado */
    }

    .descripcion_telecomunicaciones_nuestros_servicios {
        grid-column: 1 / -1; /* aprovecha todo el ancho de la tarjeta */
        grid-row: 2; /* coloca la descripcion debajo del encabezado */
        width: 100%; /* ocupa el espacio disponible */
        margin: 0; /* elimina margenes adicionales */
        font-size: 0.92rem; /* adapta ligeramente la descripcion */
        line-height: 1.5; /* conserva una lectura comoda */
        text-align: justify; /* evita espacios grandes entre palabras */
    }

}


/* 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 {
        grid-template-columns: 64px minmax(0, 1fr); /* adapta icono y titulo */
        min-height: 115px; /* mantiene las tarjetas compactas */
        padding: 1rem 0.9rem 0.9rem; /* adapta los espacios internos */
        column-gap: 10px; /* mantiene la separacion horizontal */
    }

    .imagen_telecomunicaciones_nuestros_servicios,
    .imagen_inmobiliaria_nuestros_servicios,
    .imagen_familia_nuestros_servicios,
    .imagen_laborales_nuestros_servicios,
    .imagen_civiles_nuestros_servicios {
        width: 60px; /* adapta los iconos a pantallas pequeñas */
        height: 60px; /* mantiene las proporciones */
    }

    .texto_telecomunicaciones_nuestros_servicios,
    .texto_inmobiliaria_nuestros_servicios,
    .texto_familia_nuestros_servicios,
    .texto_laborales_nuestros_servicios,
    .texto_civiles_nuestros_servicios {
        font-size: 1rem; /* mantiene los titulos legibles */
    }

    .tarjeta_telecomunicaciones_nuestros_servicios {
        grid-template-columns: 65px minmax(0, 1fr); /* mantiene icono y titulo en horizontal */
        grid-template-rows: auto auto; /* organiza la descripcion debajo */
        min-height: 0; /* adapta la altura al contenido */
        padding: 18px 15px 42px; /* optimiza el espacio interior */
        column-gap: 10px; /* separa el icono del titulo */
        row-gap: 12px; /* separa la descripcion */
        align-content: start; /* organiza el contenido desde arriba */
    }

    .texto_telecomunicaciones_nuestros_servicios {
        font-size: 1.08rem; /* mantiene el titulo proporcionado */
        line-height: 1.3; /* mejora el interlineado */
    }

    .descripcion_telecomunicaciones_nuestros_servicios {
        grid-column: 1 / -1; /* aprovecha todo el ancho de la tarjeta */
        grid-row: 2; /* coloca la descripcion debajo del encabezado */
        width: 100%; /* ocupa el espacio disponible */
        margin: 0; /* elimina margenes adicionales */
        font-size: 0.92rem; /* adapta ligeramente la descripcion */
        line-height: 1.5; /* conserva una lectura comoda */
        text-align: justify; /* evita espacios grandes entre palabras */
    }

}



/* 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: #99813D; /* 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: #182B3A; /* 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: #182B3A; /* 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, 25px); /* controla la separacion inferior en pantallas altas */
        color: #2F3B46; /* establece el color dorado del subtitulo */
        font-family: 'Raleway', sans-serif; /* establece la tipografia Raleway */
        font-size: min(2.2vh, 15px); /* 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 */
        letter-spacing: 1px;
    }


    .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: #45494D; /* establece el color del texto informativo */
        font-family: 'Raleway', sans-serif; /* establece la tipografia Raleway */
        font-size: min(2vh, 15px); /* 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: left; /* mantiene el texto alineado a la izquierda */
        letter-spacing: 1px; /* establece la separacion entre letras */
    }

    .item_modal_telecomunicaciones_nuestros_servicios,
    .item_modal_inmobiliaria_nuestros_servicios,
    .item_modal_familia_nuestros_servicios,
    .item_modal_laborales_nuestros_servicios,
    .item_modal_civiles_nuestros_servicios {
        position: relative; /* permite posicionar las viñetas doradas */
        padding-left: 20px; /* reserva espacio a la izquierda para las viñetas */
        margin-bottom: 5px; /* establece una separacion pequeña entre elementos */
        line-height: 1.45; /* mantiene una lectura comoda */
        text-align: left; /* mantiene el texto alineado a la izquierda */
    }
    .viñeta_modal_telecomunicaciones_nuestros_servicios,
    .viñeta_modal_inmobiliaria_nuestros_servicios,
    .viñeta_modal_familia_nuestros_servicios,
    .viñeta_modal_laborales_nuestros_servicios,
    .viñeta_modal_civiles_nuestros_servicios
    {
        position: absolute; /* permite ubicar la viñeta junto al texto */
        left: 0; /* coloca la viñeta al inicio del elemento */
        top: 7px; /* alinea la viñeta con la primera linea del texto */
        width: 4px; /* establece el ancho de la viñeta */
        height: 4px; /* establece la altura de la viñeta */
        border-radius: 50%; /* convierte la viñeta en un circulo */
        background-color: #99813D; /* establece el color dorado corporativo */
    }
    .negrita_modal_telecomunicaciones_nuestros_servicios,
    .negrita_modal_inmobiliaria_nuestros_servicios,
    .negrita_modal_familia_nuestros_servicios,
    .negrita_modal_laborales_nuestros_servicios,
    .negrita_modal_civiles_nuestros_servicios {
        display: inline; /* mantiene el titulo y la descripcion en la misma linea */
        font-weight: 700; /* destaca las palabras anteriores a los dos puntos */
    }


    /* 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: left; /* 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: left; /* 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, #99813D, #806B32);
        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 */
        display: none;
    }

    .boton_ver_servicios:hover {
        background: linear-gradient(135deg, #8A7437, #685527);
    }

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