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

/* IMPORTACION DE FUENTE RALEWAY */

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


/* TITULO 1 SECCION ESTUDIO */

    .contenedor_nosotros {
        width: 100%; /* establece el ancho completo de la seccion */
        height: auto; /* permite que la altura se adapte al contenido */
        min-height: 100vh; /* mantiene una altura minima equivalente a la pantalla en escritorio */
        background-color: #ffffff; /* establece el fondo blanco de la seccion */
        position: relative; /* permite controlar la posicion de los componentes internos */
        overflow: hidden; /* evita que los elementos sobresalgan de la seccion */
        box-sizing: border-box; /* incluye los espacios internos dentro de las dimensiones */
    }


    /* SUBTITULO 1 CONTENIDO ESTUDIO */

        .nosotros {
            width: 100%; /* establece el ancho completo del contenido */
            min-height: 100vh; /* mantiene la altura minima de la seccion en escritorio */
            display: flex; /* organiza el contenido mediante una estructura flexible */
            align-items: stretch; /* permite que ambas columnas ocupen la misma altura */
            position: relative; /* establece una referencia para los elementos internos */
        }

        .info_nosotros_izquierda {
            width: 50%; /* establece el ancho de la columna izquierda */
            flex: 0 0 50%; /* mantiene la proporcion de la columna */
            display: flex; /* organiza los elementos mediante una estructura flexible */
            flex-direction: column; /* distribuye los elementos verticalmente */
            justify-content: center; /* centra verticalmente el contenido */
            padding: 3rem 5vw; /* establece espacios internos estables y proporcionales */
            box-sizing: border-box; /* incluye el padding dentro del ancho */
            gap: 1.75rem; /* establece una separacion vertical independiente de la altura */
            z-index: 2; /* mantiene el contenido sobre los elementos decorativos */
        }

        .linea_titulo_sobre_nosotros {
            width: 14vw; /* establece el ancho proporcional de la linea decorativa */
            height: 2px; /* establece un grosor uniforme */
            background-color: #c59341; /* establece el color dorado de la linea */
        }

        .titulo_sobre_nosotros {
            position: relative; /* permite posicionar elementos relacionados */
            font-size: clamp(2.5rem, 3.4vw, 3.75rem); /* adapta el titulo al ancho con limites de tamaño */
            font-weight: 500; /* establece el grosor de la fuente */
            font-family: 'Raleway', sans-serif; /* establece la tipografia Raleway */
            color: #182B3A; /* establece el color dorado corporativo */
            margin: 0; /* elimina los margenes predeterminados */
            line-height: 1.2; /* establece una separacion adecuada entre lineas */
        }

        .linea_texto_sobre_nosotros {
            width: 15%; /* establece el ancho completo de la linea */
            height: 2px; /* establece un grosor uniforme */
            background-color: #99813D; /* establece el color dorado de la linea */
        }


        /* SUB-SUBTITULO 1 TEXTO ESTUDIO */

            .texto_descripcion {
                position: relative; /* permite posicionar elementos relacionados */
                font-size: 1.35rem; /* establece un tamaño de texto independiente de la altura */
                line-height: 1.8; /* mantiene una separacion adecuada entre las lineas */
                font-family: 'Raleway', sans-serif; /* establece la tipografia Raleway */
                color: #45494D; /* establece el color gris corporativo */
                margin: 0; /* elimina los margenes predeterminados */
                text-align: justify; /* mantiene el texto justificado */

            }

            .texto_resaltado {
                font-weight: bold; /* establece el texto en negrita */
                color: #182B3A; /* mantiene el color dorado corporativo */
                font-family: 'Raleway', sans-serif; /* establece la tipografia Raleway */
                font-size: 1.4rem; /* establece un tamaño uniforme para el texto resaltado */
            }

            .segundo_parrafo_descripcion {
                margin-top: 25px; /* establece una separacion suave entre ambos parrafos */
            }


    /* SUBTITULO 2 CONTENEDOR IMAGEN ESTUDIO */

        .personas {
            position: relative; /* mantiene la imagen dentro de su columna */
            width: 50%; /* establece el ancho de la columna derecha */
            flex: 0 0 50%; /* mantiene la proporcion de la columna */
            overflow: hidden; /* evita que la imagen sobresalga del contenedor */
            margin: 0; /* elimina los margenes predeterminados */
            padding: 0; /* elimina los espacios internos */
        }


        /* SUB-SUBTITULO 2 IMAGEN ESTUDIO */

            .personas img {
                width: 100%; /* establece el ancho completo de la imagen */
                height: 100%; /* ocupa toda la altura disponible de la columna */
                object-fit: cover; /* cubre el espacio sin deformar la imagen */
                display: block; /* elimina los espacios inferiores de la imagen */
                position: absolute; /* permite ajustar la imagen dentro del contenedor */
                top: 0; /* posiciona la imagen desde el borde superior */
                left: 0; /* posiciona la imagen desde el borde izquierdo */
            }


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

        /* Sin media */

    }


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

        .texto_resaltado{
            font-size: 1.2rem; /* ajusta ligeramente el tamaño del texto descriptivo */
            text-align: justify;
        }

        .texto_descripcion {
            font-size: 1.1rem; /* ajusta ligeramente el tamaño del texto descriptivo */
            line-height: 2.2; /* mantiene una lectura adecuada */
        }

    }


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

        .info_nosotros_izquierda {
            gap: 1.5rem; /* ajusta la separacion vertical entre los elementos */
        }

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

        .texto_descripcion {
            font-size: 1.1rem; /* establece un tamaño estable para el texto descriptivo */
            line-height: 2; /* mantiene una lectura adecuada */
        }

        .texto_resaltado{
           font-size: 1.1rem; /* ajusta ligeramente el tamaño del texto descriptivo */
           text-align: justify;
        }



    }


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

        .contenedor_nosotros {
            min-height: 620px; /* evita que la seccion crezca segun la altura de una tablet vertical */
        }

        .nosotros {
            min-height: 620px; /* conserva una altura proporcionada para las dos columnas */
        }

        .info_nosotros_izquierda {
            width: 50%; /* aumenta el espacio disponible para el texto */
            flex: 0 0 50%; /* mantiene la proporcion de la columna izquierda */
            padding: 3rem 4%; /* ajusta los espacios internos del contenido */
            gap: 1.25rem; /* reduce la separacion vertical entre elementos */
        }


        .titulo_sobre_nosotros {
            font-size: 2.25rem; /* mantiene el titulo estable en tablets altas */
        }

        .texto_descripcion {
            font-size: 1rem; /* evita que el texto aumente con la altura de la pantalla */
            line-height: 2; /* reduce la separacion entre las lineas */
        }

        .texto_resaltado {
            font-size: 1rem; /* evita que el texto aumente con la altura de la pantalla */
            line-height: 1.55; /* reduce la separacion entre las lineas */
            text-align: justify;
        }

        .personas {
            width: 50%; /* establece el espacio destinado a la imagen */
            flex: 0 0 50%; /* mantiene la proporcion de la columna derecha */
        }

    }


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

        .contenedor_nosotros {
            min-height: 0; /* elimina la altura minima utilizada en las dos columnas */
        }

        .nosotros {
            min-height: 0; /* permite adaptar la altura al contenido */
            flex-direction: column; /* organiza el texto y la imagen verticalmente */
        }

        .info_nosotros_izquierda {
            width: 100%; /* ocupa todo el ancho disponible */
            flex: 0 0 auto; /* permite que la altura dependa del contenido */
            padding: 3rem 8vw; /* establece los espacios internos para tablets */
            gap: 1.25rem; /* mantiene una separacion uniforme */
        }

        .titulo_sobre_nosotros {
            font-size: 2rem; /* adapta el tamaño del titulo para tablets verticales */
        }

        .texto_descripcion {
            font-size: 1.1rem; /* mantiene un tamaño legible */
            line-height: 2; /* establece una separacion adecuada entre lineas */
        }

        .personas {
            position: relative; /* mantiene la imagen dentro del flujo de la seccion */
            width: 100%; /* ocupa el ancho completo */
            flex: 0 0 auto; /* permite que el contenedor se ajuste a la imagen */
            height: auto; /* adapta la altura a las proporciones de la imagen */
        }

        .personas img {
            position: relative; /* mantiene la imagen dentro del flujo normal */
            width: 100%; /* adapta la imagen al ancho del contenedor */
            height: auto; /* conserva las proporciones originales */
            object-fit: contain; /* muestra la imagen completa sin recortarla */
        }

        .texto_resaltado {
            font-size: 1.2rem; /* evita que el texto aumente con la altura de la pantalla */
            line-height: 1.55; /* reduce la separacion entre las lineas */
            text-align: justify;
        }

    }


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

        .info_nosotros_izquierda {
            padding: 2.5rem 6vw; /* ajusta los espacios internos para dispositivos moviles */
            gap: 1rem; /* reduce la separacion vertical entre elementos */
        }

        .linea_titulo_sobre_nosotros {
            display: block; /* vuelve a mostrar la linea decorativa */
            width: 30vw; /* establece el ancho proporcional de la linea */
            height: 2px; /* mantiene un grosor uniforme */
            background-color: #c59341; /* establece el color dorado corporativo */
        }

        .titulo_sobre_nosotros {
            font-size: 1.85rem; /* adapta el titulo al espacio disponible */
        }

        .texto_descripcion {
            font-size: 0.98rem; /* mantiene un tamaño legible en dispositivos moviles */
            line-height: 2; /* ajusta la separacion entre lineas */
        }

        .texto_resaltado {
            font-size: 1.1rem; /* evita que el texto aumente con la altura de la pantalla */
            line-height: 1.55; /* reduce la separacion entre las lineas */
            text-align: justify;
        }

    }


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

        .info_nosotros_izquierda {
            padding: 2rem 5vw; /* ajusta los espacios internos para pantallas medianas */
        }

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

        .texto_descripcion {
            font-size: 0.95rem; /* ajusta el tamaño del texto descriptivo */
        }

    }


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

        .info_nosotros_izquierda {
            padding: 1.75rem 5vw; /* aprovecha mejor el espacio disponible */
        }

        .titulo_sobre_nosotros {
            font-size: 1.7rem; /* adapta el titulo para pantallas pequeñas */
        }

        .texto_descripcion {
            font-size: 0.93rem; /* mantiene un tamaño compacto y legible */
            line-height: 2; /* ajusta la separacion vertical del texto */
        }

    }

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