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


/* TITULO 1 LOGO PIE PAGINA */

    .logo_pie_pagina {
        width: 100%; /* ocupa todo el ancho del contenedor */
        height: 100%; /* mantiene la altura disponible */
        display: flex; /* organiza los elementos mediante flexbox */
        flex-direction: column; /* coloca las redes sociales debajo del logo */
        justify-content: center; /* centra el conjunto verticalmente */
        align-items: center; /* centra los elementos horizontalmente */
        gap: 30px; /* separa el logo de los botones */
    }


    /* SUBTITULO 1 IMAGEN LOGO PIE PAGINA */

        .imagen_logo_pie_pagina {
            width: min(28vw, 460px); /* limita el ancho del logo */
            max-width: 90%; /* evita que sobresalga del contenedor */
            height: auto; /* mantiene las proporciones originales */
            max-height: 110px; /* limita la altura */
            object-fit: contain; /* muestra el logo completo */
            display: block; /* establece la visualizacion como bloque */
        }


    /* SUBTITULO 2 BOTONES REDES LOGO PIE PAGINA */

        .contenedor_redes_logo_pie_pagina {
            width: 100%; /* ocupa el ancho disponible */
            display: flex; /* organiza los botones horizontalmente */
            justify-content: center; /* centra los botones */
            align-items: center; /* alinea verticalmente los botones */
            gap: 30px; /* separa los botones entre si */
        }

        .boton_facebook_logo_pie_pagina,
        .boton_instagram_logo_pie_pagina,
        .boton_tiktok_logo_pie_pagina {
            width: 52px; /* establece el ancho del boton */
            height: 52px; /* establece la altura del boton */
            flex-shrink: 0; /* evita que el boton se reduzca */
            display: flex; /* permite centrar el icono */
            justify-content: center; /* centra el icono horizontalmente */
            align-items: center; /* centra el icono verticalmente */
            padding: 0; /* elimina el espacio interno predeterminado */
            background-color: #182B3A; /* establece el dorado envejecido */
            border: none; /* elimina los bordes predeterminados */
            border-radius: 50%; /* convierte el boton en un circulo */
            cursor: pointer; /* muestra el cursor de seleccion */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20); /* agrega profundidad */
            transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* suaviza las transiciones */
        }

        .boton_facebook_logo_pie_pagina:hover,
        .boton_instagram_logo_pie_pagina:hover,
        .boton_tiktok_logo_pie_pagina:hover {
            background-color: #99813D; /* oscurece el dorado durante el hover */
            transform: translateY(-3px); /* eleva ligeramente el boton */
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25); /* aumenta la sombra */
        }

        .icono_red_logo_pie_pagina {
            width: 27px; /* establece el ancho del icono */
            height: 27px; /* establece la altura del icono */
            object-fit: contain; /* mantiene las proporciones */
            display: block; /* muestra el icono como bloque */
        }


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

        .logo_pie_pagina {
            height: auto; /* adapta la altura al logo y los botones */
            gap: 15px; /* separa el logo de las redes */
        }

        .imagen_logo_pie_pagina {
            width: min(52vw, 320px); /* mantiene proporcionado el logo */
            min-width: 0; /* elimina restricciones de ancho */
            max-width: 90%; /* evita que sobresalga */
            height: auto; /* conserva la proporcion del logo */
            max-height: 90px; /* limita la altura */
        }

        .contenedor_redes_logo_pie_pagina {
            gap: 20px; /* separa uniformemente los botones */
        }

        .boton_facebook_logo_pie_pagina,
        .boton_instagram_logo_pie_pagina,
        .boton_tiktok_logo_pie_pagina {
            width: 46px; /* mantiene botones visibles y equilibrados */
            height: 46px; /* mantiene su forma circular */
        }

        .icono_red_logo_pie_pagina {
            width: 25px; /* mantiene los iconos proporcionados */
            height: 25px; /* conserva el alto */
        }

    }



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

        .logo_pie_pagina {
            gap: 13px; /* mantiene el espacio entre logo y redes */
        }

        .imagen_logo_pie_pagina {
            width: min(52vw, 300px); /* adapta el logo a tablets verticales */
            min-width: 0; /* evita conflicto con las resoluciones posteriores */
            max-width: 90%; /* conserva margenes laterales */
            height: auto; /* impide deformaciones */
            max-height: 85px; /* evita que ocupe demasiado alto */
        }

        .contenedor_redes_logo_pie_pagina {
            gap: 19px; /* separa los botones */
        }

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

        .logo_pie_pagina {
            height: auto; /* evita que el logo quede cortado */
            gap: 12px; /* espacio proporcionado en moviles */
        }

        .imagen_logo_pie_pagina {
            width: min(70vw, 260px); /* adapta el ancho al movil */
            min-width: 0; /* quita el minimo de tablets */
            max-width: 90%; /* mantiene el logo dentro del contenedor */
            height: auto; /* conserva las proporciones originales */
            max-height: none; /* permite su altura natural */
        }

        .contenedor_redes_logo_pie_pagina {
            gap: 18px; /* separa los botones */
        }

        .boton_facebook_logo_pie_pagina,
        .boton_instagram_logo_pie_pagina,
        .boton_tiktok_logo_pie_pagina {
            width: 42px; /* adapta el diametro al movil */
            height: 42px; /* conserva la proporcion circular */
        }

        .icono_red_logo_pie_pagina {
            width: 23px; /* adapta el icono al boton */
            height: 23px; /* mantiene el alto */
        }

    }

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

        .imagen_logo_pie_pagina {
            width: min(70vw, 250px); /* mantiene el logo equilibrado */
            min-width: 0; /* evita restricciones del responsive anterior */
            height: auto; /* mantiene su proporcion */
        }

        .contenedor_redes_logo_pie_pagina {
            gap: 17px; /* conserva una separacion comoda */
        }

    }


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

        .imagen_logo_pie_pagina {
            width: min(70vw, 244px); /* ajusta sin deformar el logo */
            min-width: 0; /* evita un minimo innecesario */
            height: auto; /* mantiene la proporcion original */
        }

        .contenedor_redes_logo_pie_pagina {
            gap: 17px; /* mantiene agrupadas las redes */
        }

    }


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

        .imagen_logo_pie_pagina {
            width: min(72vw, 235px); /* evita que el logo ocupe toda la fila */
            height: auto; /* elimina el alto fijo en vh */
        }

        .contenedor_redes_logo_pie_pagina {
            gap: 16px; /* deja una separacion uniforme */
        }

        .boton_facebook_logo_pie_pagina,
        .boton_instagram_logo_pie_pagina,
        .boton_tiktok_logo_pie_pagina {
            width: 40px; /* adapta los botones a pantalla pequeña */
            height: 40px; /* mantiene su forma circular */
        }

        .icono_red_logo_pie_pagina {
            width: 22px; /* adapta los iconos */
            height: 22px; /* conserva las proporciones */
        }

    }

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