/* 
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: min(100%, 360px); /* limita el ancho y centra el bloque de contacto */
            height: auto; /* permite crecer segun el contenido */
            display: flex; /* conserva los tres elementos en columna */
            flex-direction: column; /* titulo, telefono y correo uno debajo del otro */
            align-items: stretch; /* alinea las filas con un ancho comun */
            justify-content: center; /* centra el bloque */
            gap: 18px; /* separa telefono y correo */
        }

    }


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

        .menu_pie_contactanos {
            width: min(100%, 345px); /* ajusta el ancho a tablets */
            gap: 18px; /* mantiene la distancia entre filas */
        }

    }

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

        .menu_pie_contactanos {
            width: min(100%, 320px); /* ocupa un bloque centrado */
            gap: 17px; /* separa las filas */
        }

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

        .menu_pie_contactanos {
            width: min(100%, 300px); /* evita interferencias con botones flotantes */
            gap: 16px; /* compacta ligeramente */
        }

    }


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

        .menu_pie_contactanos {
            width: min(100%, 290px); /* deja aire en los margenes */
            gap: 16px; /* mantiene la lectura */
        }

    }


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

        .menu_pie_contactanos {
            width: min(100%, 280px); /* limita el bloque al ancho disponible */
            gap: 15px; /* adapta la separacion */
        }

    }


/* TITULO 2 TITULO CONTACTANOS */

    .titulo_menu_pie_contactanos {
        margin-bottom: 0.5vh; /* establece el espacio inferior del titulo */
        color: #182B3A; /* 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 {
            align-self: center; /* centra el titulo respecto al bloque */
            margin-bottom: 8px; /* separa del telefono */
            font-size: 24px; /* mantiene el tamaño estable */
            letter-spacing: 0.16em; /* conserva el estilo corporativo */
            text-align: center; /* centra el texto */
        }

    }


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

        .titulo_menu_pie_contactanos {
            font-size: 23px; /* adapta a tablets */
            letter-spacing: 0.16em; /* conserva su estilo */
        }

    }

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

        .titulo_menu_pie_contactanos {
            font-size: 22px; /* adapta el titulo a movil */
            letter-spacing: 0.15em; /* conserva la separacion */
        }

    }

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

        .titulo_menu_pie_contactanos {
            font-size: 22px; /* mantiene una lectura comoda */
            letter-spacing: 0.15em; /* conserva su estilo */
        }

    }


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

        .titulo_menu_pie_contactanos {
            font-size: 21px; /* ajusta el titulo al ancho menor */
            letter-spacing: 0.14em; /* mantiene el estilo corporativo */
        }

    }


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

        .titulo_menu_pie_contactanos {
            font-size: 20px; /* mantiene el titulo completo */
            letter-spacing: 0.13em; /* limita el ancho del encabezado */
        }

    }


/* 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: #182B3A; /* 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: #45494D; /* 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: #99813D; /* 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: 100%; /* utiliza el ancho comun con correo */
            max-width: 100%; /* evita desbordar el pie */
            display: grid; /* icono a la izquierda y datos a la derecha */
            grid-template-columns: 40px minmax(0, 1fr); /* icono y columna de texto */
            grid-template-rows: auto; /* mantiene el contenido en una fila */
            column-gap: 13px; /* distancia entre icono y texto */
            row-gap: 0; /* no necesita segunda fila */
            align-items: center; /* centra icono respecto a los datos */
        }

        .imagen_telefono_pie {
            width: 40px; /* icono legible en tablets */
            min-width: 0; /* evita forzar el ancho */
            height: 40px; /* conserva tamano estable */
            grid-column: 1; /* coloca icono a la izquierda */
            grid-row: 1; /* comparte fila con el texto */
            justify-self: center; /* centra el icono en su columna */
        }

        .contenido_telefono_pie {
            display: flex; /* conserva titulo y dato juntos */
            flex-direction: column; /* numero debajo del titulo */
            grid-column: 2; /* ubica los datos a la derecha del icono */
            grid-row: 1; /* mantiene la misma fila */
            gap: 4px; /* separa titulo y numero */
            min-width: 0; /* permite ajustar la columna */
        }

        .titulo_telefono_pie,
        .texto_telefono_pie {
            font-size: 15px; /* legible sin depender de vh */
            text-align: left; /* mantiene una alineacion comun */
        }
 
        .menu_pie_contactanos .fila_telefono_pie {
            width: min(100%, 290px); /* establece un ancho compacto para el telefono */
            margin: 0 auto; /* centra horizontalmente el bloque */
        }


    }


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

        .fila_telefono_pie {
            grid-template-columns: 38px minmax(0, 1fr); /* adapta el espacio del icono */
            column-gap: 12px; /* mantiene su separacion */
        }

        .imagen_telefono_pie {
            width: 30px; /* tamano estable */
            height: 30px; /* conserva la proporcion */
            min-width: 0; /* evita crecer */
        }

        .titulo_telefono_pie,
        .texto_telefono_pie {
            font-size: 15px; /* mantiene textos legibles */
        }

    }


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

        .fila_telefono_pie {
            width: 100%; /* aprovecha el bloque centrado */
            grid-template-columns: 34px minmax(0, 1fr); /* evita desperdiciar espacio */
            column-gap: 11px; /* separa icono y datos */
            row-gap: 0; /* deja titulo y numero en la misma columna */
        }

        .imagen_telefono_pie {
            width: 28px; /* icono proporcional a movil */
            height: 28px; /* conserva su forma */
        }

        .titulo_telefono_pie,
        .texto_telefono_pie {
            font-size: 14.5px; /* legible en 414 px */
        }

    }


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

        .fila_telefono_pie {
            width: 100%; /* mantiene el ancho disponible */
            grid-template-columns: 34px minmax(0, 1fr); /* conserva espacio para el texto */
            column-gap: 10px; /* ajusta la separacion */
        }

        .imagen_telefono_pie {
            width: 27px; /* adapta el icono */
            height: 27px; /* conserva sus proporciones */
        }

        .titulo_telefono_pie,
        .texto_telefono_pie {
            font-size: 14px; /* adapta el texto sin depender de vh */
        }

    }


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

        .fila_telefono_pie {
            width: 100%; /* evita desbordamientos */
            grid-template-columns: 32px minmax(0, 1fr); /* aprovecha el ancho */
            column-gap: 10px; /* mantiene distancia del icono */
        }

        .imagen_telefono_pie {
            width: 26px; /* tamano proporcionado */
            height: 26px; /* conserva su aspecto */
        }

        .titulo_telefono_pie,
        .texto_telefono_pie {
            font-size: 14px; /* mantiene buena legibilidad */
        }

    }


/* 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: #182B3A; /* 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: #45494D; /* 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: #99813D; /* 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) {

    .menu_pie_contactanos {
        display: flex; /* organiza los elementos verticalmente */
        flex-direction: column; /* coloca el titulo, telefono y correo uno debajo de otro */
        align-items: center; /* centra horizontalmente todos los elementos */
        min-width: 0; /* permite adaptar el contenido */
        text-align: center; /* mantiene centrado el titulo general */
    }

    .menu_pie_contactanos .fila_telefono_pie,
    .menu_pie_contactanos .fila_correo_pie {
        display: flex; /* mantiene el icono y el texto en una misma fila */
        align-items: center; /* centra verticalmente los elementos */
        justify-content: flex-start; /* mantiene el icono a la izquierda */
        gap: 12px; /* separa el icono del contenido */
        width: fit-content; /* utiliza solamente el espacio necesario */
        max-width: 100%; /* impide superar el ancho disponible */
        min-width: 0; /* permite reducir el contenido */
        margin: 0 auto 14px auto; /* centra cada fila horizontalmente */
        box-sizing: border-box; /* evita aumentar el ancho del bloque */
        text-align: left; /* mantiene los datos alineados a la izquierda */
    }

    .menu_pie_contactanos .fila_correo_pie {
        margin-bottom: 0; /* elimina la separacion inferior del correo */
    }


    /* SUBTITULO 1 IMAGEN CORREO */

        .imagen_correo_pie {
            width: 32px; /* mantiene el icono proporcionado */
            height: 32px; /* conserva las dimensiones del icono */
            flex-shrink: 0; /* evita que el icono se comprima */
        }


    /* SUBTITULO 2 CONTENIDO CORREO */

        .contenido_correo_pie {
            display: flex; /* organiza el titulo y correo verticalmente */
            flex-direction: column; /* coloca el correo debajo del titulo */
            align-items: flex-start; /* mantiene el texto a la izquierda */
            min-width: 0; /* permite adaptar la direccion de correo */
            gap: 4px; /* separa el titulo del correo */
        }

        .titulo_correo_pie,
        .texto_correo_pie {
            font-size: 15px; /* iguala el tamaño del texto del telefono */
            line-height: 1.4; /* mantiene una separacion adecuada */
            text-align: left; /* alinea ambos textos a la izquierda */
        }

        .texto_correo_pie {
            overflow-wrap: anywhere; /* permite dividir el correo solamente si no cabe */
        }

}




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

        .fila_correo_pie {
            grid-template-columns: 38px minmax(0, 1fr); /* mantiene proporciones de telefono */
            column-gap: 12px; /* separa icono y correo */
        }

        .imagen_correo_pie {
            width: 30px; /* tamano legible */
            height: 30px; /* conserva su proporcion */
            min-width: 0; /* elimina minimos heredados */
        }

        .titulo_correo_pie,
        .texto_correo_pie {
            font-size: 15px; /* conserva legibilidad */
        }

    }

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

        .fila_correo_pie {
            grid-template-columns: 38px minmax(0, 1fr); /* conserva icono a la izquierda */
            column-gap: 12px; /* mantiene separacion uniforme */
        }

        .texto_correo_pie {
            overflow-wrap: anywhere; /* permite ajustar correos largos */
        }

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

        .fila_correo_pie {
            width: 100%; /* conserva el ancho comun */
            grid-template-columns: 34px minmax(0, 1fr); /* adapta el bloque al movil */
            column-gap: 11px; /* separacion entre icono y texto */
            row-gap: 0; /* evita segunda fila */
        }

        .imagen_correo_pie {
            width: 28px; /* icono proporcional */
            height: 28px; /* conserva su forma */
        }

        .titulo_correo_pie,
        .texto_correo_pie {
            font-size: 14.5px; /* conserva legibilidad */
        }

    }


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

        .fila_correo_pie {
            width: 100%; /* aprovecha el bloque centrado */
            grid-template-columns: 34px minmax(0, 1fr); /* coincide con el telefono */
            column-gap: 10px; /* ajusta la separacion */
        }

        .imagen_correo_pie {
            width: 27px; /* icono proporcionado */
            height: 27px; /* conserva su proporcion */
        }

        .titulo_correo_pie,
        .texto_correo_pie {
            font-size: 14px; /* mantiene legibilidad */
        }

    }


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

        .fila_correo_pie {
            width: 100%; /* evita desbordamiento */
            grid-template-columns: 32px minmax(0, 1fr); /* coincide con telefono */
            column-gap: 10px; /* separacion constante */
        }

        .imagen_correo_pie {
            width: 26px; /* tamano adaptado a moviles pequenos */
            height: 26px; /* conserva proporciones */
        }

        .titulo_correo_pie,
        .texto_correo_pie {
            font-size: 14px; /* evita letras demasiado pequenas */
        }

    }

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