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

/* TITULO 1 MENU PIE CONTACTANOS */

    .menu_pie_contactanos {
        width: 80%; /* establece el ancho del menu */
        height: 100%; /* establece la altura total del menu */
        display: flex; /* establece la distribucion flexible */
        flex-direction: column; /* organiza el contenido verticalmente */
        justify-content: center; /* centra verticalmente el contenido */
        gap: 3vh; /* establece el espacio entre los elementos */
    }


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

        /* Sin media */

    }


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

        /* Sin media */

    }


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

        /* Sin media */

    }


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

        .menu_pie_contactanos {
            width: 100%; /* utiliza todo el ancho disponible */
            display: grid; /* organiza las secciones mediante una grilla */
            grid-template-columns: 1fr; /* establece una sola columna */
            justify-items: center; /* centra horizontalmente todos los elementos */
            align-content: center; /* centra verticalmente el contenido */
            gap: 1vh; /* establece la separacion entre los elementos */
        }

    }


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

        .menu_pie_contactanos {
            width: 100%;
            align-items: center;
            gap: 2.4vh;
        }
    }

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

      /* Sin media */

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

        .menu_pie_contactanos {
            width: 100%;
            align-items: center;
            gap: 2.2vh;
        }

    }


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

        .menu_pie_contactanos {
            width: 100%;
            align-items: center;
            gap: 2.1vh;
        }

    }


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

        .menu_pie_contactanos {
            width: 100%;
            align-items: center;
            gap: 2vh;
        }

    }


/* TITULO 2 TITULO CONTACTANOS */

    .titulo_menu_pie_contactanos {
        margin-bottom: 0.5vh; /* establece el espacio inferior del titulo */
        color: #c49021; /* establece el color del titulo */
        font-family: 'Raleway', sans-serif; /* establece la fuente del titulo */
        font-size: 3vh; /* establece el tamaño del titulo */
        font-weight: 700; /* establece el grosor del titulo */
        letter-spacing: 0.18em; /* establece el espacio entre las letras */
    }


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

        /* Sin media */

    }


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

        /* Sin media */

    }


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

        /* Sin media */

    }


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

        .titulo_menu_pie_contactanos {
            text-align: center; /* centra el titulo */
            font-size: 3vh; /* mantiene el tamaño original del titulo */
            letter-spacing: 0.18em; /* mantiene la separacion original entre letras */
        }

    }


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

        .titulo_menu_pie_contactanos {
            text-align: center; /* mantiene el titulo centrado */
            font-size: 2.9vh; /* adapta ligeramente el tamaño */
            letter-spacing: 0.17em; /* ajusta la separacion entre letras */
        }

    }

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

      /* Sin media */

   }

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

        .titulo_menu_pie_contactanos {
            text-align: center; /* mantiene el titulo centrado */
            font-size: 2.8vh; /* adapta el tamaño al movil */
            letter-spacing: 0.16em; /* reduce ligeramente la separacion */
        }

    }


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

        .titulo_menu_pie_contactanos {
            text-align: center; /* mantiene el titulo centrado */
            font-size: 2.7vh; /* reduce ligeramente el tamaño */
            letter-spacing: 0.15em; /* ajusta la separacion entre letras */
        }

    }


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

        .titulo_menu_pie_contactanos {
            text-align: center; /* mantiene el titulo centrado */
            font-size: 2.6vh; /* adapta el titulo al espacio disponible */
            letter-spacing: 0.14em; /* reduce la separacion entre letras */
        }

    }


/* TITULO 3 TELEFONO */

    .fila_telefono_pie {
        display: flex; /* establece la distribucion flexible */
        align-items: center; /* centra verticalmente los elementos */
        gap: 1.5vw; /* establece el espacio entre el icono y el contenido */
    }


    /* SUBTITULO 1 IMAGEN TELEFONO */

        .imagen_telefono_pie {
            width: 4.5vw; /* establece el ancho del icono */
            height: 7.5vh; /* establece la altura del icono */
            object-fit: contain; /* mantiene las proporciones del icono */
            flex-shrink: 0; /* evita que el icono reduzca su tamaño */
        }


    /* SUBTITULO 2 CONTENIDO TELEFONO */

        .contenido_telefono_pie {
            display: flex; /* establece la distribucion flexible del contenido */
            flex-direction: column; /* organiza la informacion verticalmente */
            gap: 0.5vh; /* establece el espacio entre titulo y texto */
        }


        .titulo_telefono_pie {
            color: #7e6340; /* establece el color del titulo */
            font-family: 'Raleway', sans-serif; /* establece la fuente del titulo */
            font-size: 1.9vh; /* establece el tamaño del titulo */
            font-weight: 700; /* establece el grosor del titulo */
        }


        .texto_telefono_pie {
            color: #7e6340; /* establece el color del texto */
            font-family: 'Raleway', sans-serif; /* establece la fuente del texto */
            font-size: 1.9vh; /* establece el tamaño del texto */
            font-weight: 500; /* establece el grosor del texto */
        }


        .texto_telefono_pie:hover {
            color: #cb9e3e; /* establece el color al pasar el cursor */
            cursor: pointer; /* establece el cursor de seleccion */
        }


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

        /* Sin media */

    }


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

        /* Sin media */

    }


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

        /* Sin media */

    }


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

        .fila_telefono_pie {
            width: 300px; /* establece un ancho comun para organizar el contenido */
            max-width: 90vw; /* evita superar el ancho disponible */
            display: grid; /* organiza los elementos mediante una grilla */
            grid-template-columns: 1fr 55px 90px 1fr; /* establece columnas iguales para telefono y correo */
            grid-template-rows: auto auto; /* establece una fila superior y una inferior */
            column-gap: 5px; /* establece la separacion entre las columnas */
            row-gap: 1vh; /* establece la separacion entre titulo y numero */
            align-items: center; /* centra verticalmente los elementos */
        }


        .imagen_telefono_pie {
            width: 3vw; /* mantiene un tamaño proporcional del icono */
            height: 3.5vh; /* adapta la altura del icono */
            grid-column: 2; /* ubica el icono en la segunda columna */
            grid-row: 1; /* ubica el icono en la primera fila */
            justify-self: center; /* centra el icono dentro de su columna */
        }


        .contenido_telefono_pie {
            display: contents; /* permite integrar titulo y numero directamente en la grilla */
        }


        .titulo_telefono_pie {
            grid-column: 3; /* ubica el titulo en la tercera columna */
            grid-row: 1; /* ubica el titulo junto al icono */
            justify-self: start; /* alinea el titulo al inicio de su columna */
        }


        .texto_telefono_pie {
            grid-column: 1 / 5; /* hace que el numero utilice todo el ancho de la grilla */
            grid-row: 2; /* ubica el numero debajo del icono y titulo */
            justify-self: center; /* centra horizontalmente el numero */
            text-align: center; /* centra el contenido del texto */
        }

    }


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

        .fila_telefono_pie {
            width: 300px; /* mantiene el ancho comun de la fila */
            max-width: 90vw; /* evita superar el ancho disponible */
            grid-template-columns: 1fr 55px 90px 1fr; /* mantiene las mismas columnas utilizadas en 992px */
            column-gap: 5px; /* mantiene una separacion uniforme entre las columnas */
            row-gap: 1vh; /* mantiene la separacion entre titulo y numero */
        }


        .imagen_telefono_pie {
            width: 4vw; /* adapta el ancho del icono */
            min-width: 24px; /* evita que el icono se reduzca demasiado */
            height: auto; /* mantiene las proporciones originales del icono */
        }


        .titulo_telefono_pie,
        .texto_telefono_pie {
            font-size: 1.9vh; /* mantiene la legibilidad del texto */
        }

    }


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

        .fila_telefono_pie {
            width: 300px; /* mantiene el ancho comun de la fila */
            max-width: 90vw; /* adapta la fila al ancho disponible */
            grid-template-columns: 1fr 50px 85px 1fr; /* adapta ligeramente las columnas al movil */
            column-gap: 5px; /* mantiene una separacion uniforme */
            row-gap: 0.8vh; /* reduce ligeramente la separacion vertical */
        }


        .imagen_telefono_pie {
            width: 6vw; /* adapta el tamaño del icono */
            height: 4vh; /* mantiene una altura adecuada */
        }


        .titulo_telefono_pie,
        .texto_telefono_pie {
            font-size: 1.9vh; /* mantiene el texto legible */
        }

    }


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

        .fila_telefono_pie {
            width: 290px; /* adapta ligeramente el ancho de la fila */
            max-width: 90vw; /* evita superar el ancho disponible */
            grid-template-columns: 1fr 48px 82px 1fr; /* adapta las columnas al ancho disponible */
            column-gap: 5px; /* mantiene una separacion uniforme */
            row-gap: 0.8vh; /* mantiene una separacion compacta */
        }


        .imagen_telefono_pie {
            width: 6.5vw; /* adapta el tamaño del icono */
            height: 4vh; /* mantiene una altura adecuada */
        }


        .titulo_telefono_pie,
        .texto_telefono_pie {
            font-size: 1.8vh; /* adapta el texto al tamaño de pantalla */
        }

    }


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

        .fila_telefono_pie {
            width: 280px; /* adapta el ancho a pantallas pequeñas */
            max-width: 90vw; /* evita superar el ancho disponible */
            grid-template-columns: 1fr 45px 80px 1fr; /* adapta las columnas a pantallas pequeñas */
            column-gap: 4px; /* reduce ligeramente la separacion */
            row-gap: 0.8vh; /* mantiene una separacion compacta */
        }


        .imagen_telefono_pie {
            width: 7vw; /* adapta el icono a pantallas pequeñas */
            height: 4vh; /* mantiene una altura adecuada */
        }


        .titulo_telefono_pie,
        .texto_telefono_pie {
            font-size: 1.8vh; /* mantiene la legibilidad del texto */
        }

    }


/* TITULO 4 CORREO */

    .fila_correo_pie {
        display: flex; /* establece la distribucion flexible */
        align-items: center; /* centra verticalmente los elementos */
        gap: 1.5vw; /* establece el espacio entre el icono y el contenido */
    }


    /* SUBTITULO 1 IMAGEN CORREO */

        .imagen_correo_pie {
            width: 4.5vw; /* establece el ancho del icono */
            height: 7.5vh; /* establece la altura del icono */
            object-fit: contain; /* mantiene las proporciones del icono */
            flex-shrink: 0; /* evita que el icono reduzca su tamaño */
        }


    /* SUBTITULO 2 CONTENIDO CORREO */

        .contenido_correo_pie {
            display: flex; /* establece la distribucion flexible del contenido */
            flex-direction: column; /* organiza la informacion verticalmente */
            gap: 0.5vh; /* establece el espacio entre titulo y texto */
        }


        .titulo_correo_pie {
            color: #7e6340; /* establece el color del titulo */
            font-family: 'Raleway', sans-serif; /* establece la fuente del titulo */
            font-size: 1.9vh; /* establece el tamaño del titulo */
            font-weight: 700; /* establece el grosor del titulo */
        }


        .texto_correo_pie {
            color: #7e6340; /* establece el color del texto */
            font-family: 'Raleway', sans-serif; /* establece la fuente del texto */
            font-size: 1.9vh; /* establece el tamaño del texto */
            font-weight: 500; /* establece el grosor del texto */
        }


        .texto_correo_pie:hover {
            color: #cb9e3e; /* establece el color del texto al pasar el cursor */
            cursor: pointer; /* establece el cursor de seleccion */
        }


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

        /* Sin media */

    }


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

        /* Sin media */

    }


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

        /* Sin media */

    }


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

        .fila_correo_pie {
            width: 300px; /* establece el mismo ancho utilizado por telefono */
            max-width: 90vw; /* evita superar el ancho disponible */
            display: grid; /* organiza los elementos mediante una grilla */
            grid-template-columns: 1fr 55px 90px 1fr; /* establece las mismas columnas utilizadas por telefono */
            grid-template-rows: auto auto; /* establece una fila superior y una inferior */
            column-gap: 5px; /* establece la separacion entre las columnas */
            row-gap: 1vh; /* establece la separacion entre titulo y correo */
            align-items: center; /* centra verticalmente los elementos */
        }


        .imagen_correo_pie {
            width: 3vw; /* mantiene un tamaño proporcional del icono */
            height: 3.5vh; /* adapta la altura del icono */
            grid-column: 2; /* ubica el icono en la segunda columna */
            grid-row: 1; /* ubica el icono en la primera fila */
            justify-self: center; /* centra el icono dentro de su columna */
        }


        .contenido_correo_pie {
            display: contents; /* permite integrar titulo y correo directamente en la grilla */
        }


        .titulo_correo_pie {
            grid-column: 3; /* ubica el titulo en la tercera columna */
            grid-row: 1; /* ubica el titulo junto al icono */
            justify-self: start; /* alinea el titulo al inicio de su columna */
        }


        .texto_correo_pie {
            grid-column: 1 / 5; /* hace que el correo utilice todo el ancho de la grilla */
            grid-row: 2; /* ubica el correo debajo del icono y titulo */
            justify-self: center; /* centra horizontalmente el correo */
            text-align: center; /* centra el contenido del texto */
        }

    }


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

        .fila_correo_pie {
            width: 300px; /* mantiene el mismo ancho utilizado por telefono */
            max-width: 90vw; /* evita superar el ancho disponible */
            grid-template-columns: 1fr 55px 90px 1fr; /* mantiene las mismas columnas utilizadas por telefono */
            column-gap: 5px; /* mantiene una separacion uniforme entre las columnas */
            row-gap: 1vh; /* mantiene la separacion entre titulo y correo */
        }


        .imagen_correo_pie {
            width: 4vw; /* adapta el ancho del icono */
            min-width: 24px; /* evita que el icono se reduzca demasiado */
            height: auto; /* mantiene las proporciones originales del icono */
        }


        .titulo_correo_pie,
        .texto_correo_pie {
            font-size: 1.9vh; /* mantiene la legibilidad del texto */
        }

    }

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

      /* Sin media */

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

        .fila_correo_pie {
            width: 300px; /* mantiene el mismo ancho utilizado por telefono */
            max-width: 90vw; /* adapta la fila al ancho disponible */
            grid-template-columns: 1fr 50px 85px 1fr; /* utiliza las mismas columnas que telefono */
            column-gap: 5px; /* mantiene una separacion uniforme */
            row-gap: 0.8vh; /* reduce ligeramente la separacion vertical */
        }


        .imagen_correo_pie {
            width: 7vw; /* adapta el tamaño del icono */
            height: 5vh; /* mantiene una altura adecuada */
        }


        .titulo_correo_pie,
        .texto_correo_pie {
            font-size: 1.9vh; /* mantiene el texto legible */
        }

    }


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

        .fila_correo_pie {
            width: 290px; /* mantiene el mismo ancho utilizado por telefono */
            max-width: 90vw; /* evita superar el ancho disponible */
            grid-template-columns: 1fr 48px 82px 1fr; /* utiliza las mismas columnas que telefono */
            column-gap: 5px; /* mantiene una separacion uniforme */
            row-gap: 0.8vh; /* mantiene una separacion compacta */
        }


        .imagen_correo_pie {
            width: 6.5vw; /* adapta el tamaño del icono */
            height: 4vh; /* mantiene una altura adecuada */
        }


        .titulo_correo_pie,
        .texto_correo_pie {
            font-size: 1.8vh; /* adapta el texto al tamaño de pantalla */
        }

    }


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

        .fila_correo_pie {
            width: 280px; /* mantiene el mismo ancho utilizado por telefono */
            max-width: 90vw; /* evita superar el ancho disponible */
            grid-template-columns: 1fr 45px 80px 1fr; /* utiliza las mismas columnas que telefono */
            column-gap: 4px; /* reduce ligeramente la separacion */
            row-gap: 0.8vh; /* mantiene una separacion compacta */
        }


        .imagen_correo_pie {
            width: 7vw; /* adapta el icono a pantallas pequeñas */
            height: 4vh; /* mantiene una altura adecuada */
        }


        .titulo_correo_pie,
        .texto_correo_pie {
            font-size: 1.8vh; /* mantiene la legibilidad del texto */
        }

    }

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