/* ETIQUETA SEMÁNTICA 'footer' */
footer{
    background-color: var(--color-footer); /* COLOR DEL FONDO DEL PIE DE LA PÁGINA WEB. */
    width: 100%; /* ANCHURA DEL PIE DE LA PÁGINA WEB. */
    height: 12vh; /* ALTURA DEL PIE DE LA PÁGINA WEB. */
    margin: auto; /* CENTRADO DEL CONTENDOR DEL PIE DE LA PÁGINA. */
    font-family: Verdana, Geneva, Tahoma, sans-serif; /* TIPO DE LETRA DEL PIE DE LA PÁGINA WEB. */
    font-size: 0.6rem; /* TAMAÑO DEL TIPO DE LETRA DE LA PÁGINA WEB. */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

span{
    color: whitesmoke; /* COLOR DE LETRA DEL COPYRIGHT. */

}

#contFlexPiePagina{
    width: 85%;
    height: 40%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

#marcoLogoInferior{ /* LOGO CORPORATIVO EN LA PARTE DE AVAJP*/
    width: 30%;  /* DIMENSION DE LA ANCHURA DEL LOGO CORPORATIVO. */
    max-height: 50%; /* DIMENSION DE LA ALTURA DEL LOGO CORPORATIVO. */

}

#fotoLogoInferior{
    max-height: calc(4vw + 4vh); /* IMAGEN AJUSTABLE A SU CONTENIDO DEL FIGURE. */
        /* LE ESTAS DICIENDO QUE APAREZCA CON SU TAMAÑO ORIGINAL SIEMPRE */

}

#logoCorpotativo{ /* www.code48k.com */
    color: white;
    font-size: 0.45rem;
    font-weight: 900;
    text-align: left;
}

@font-face{ /* FUENTE TIPOGRÁFICA PARA EL PIE DE PÁGINA*/
    font-family: "fontPiePagina";
    src: url(/fonts/Montserrat-Italic-VariableFont_wght.ttf);
}

#slogan{ /* SLOGAN DEL PIE DE PÁGINA WEB EN LA PARTE INFERIOR. */
    font-size: 0.5rem;
    line-height: 0.75rem;
    font-family: "fontPiePagina", sans-serif;
    color: beige;
    width: 100%;
}

#copyright{ /* DATOS DEL COPYRIGHT DEL PIE DE PÁGINA WEB EN LA PARTE INFERIOR. */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black; /* FONDO. */
    height: 3.5vh; /* ALTURA DEL CONTENIDO. */
    color: white; /* COLOR DEL TIPO DE LETRA COPYRIGHT. */
    font-family: Arial, Helvetica, sans-serif; /* TIPO DE LETRA. */
    font-size: 0.65rem; /* TAMAÑO DE LA LETRA. */
}

/* CONTENIDO DEL 'footer' INICIO */ /* BREAKPOINT PARA MÓVILES <374px */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* DISEÑO PARA DISPOSITIVOS >374px */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 374px){
    footer{
        height: fit-content; /* ALTURA DEL PIE DE LA PÁGINA WEB. */
    }

    #contFlexPiePagina{ /* CONTENEDOR PADRE FLEX PARA LOS ELEMENTOS DE LA PIE DE PÁGINA. */
        height: 11%;
        width: 97%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    #fotoLogoInferior{
        max-height: calc(2.6vw + 2.6vh); /* LE ESTAS DICIENDO QUE APAREZCA CON SU TAMAÑO ORIGINAL SIEMPRE */
    }

    #logoCorpotativo{ /* www.code48k.com */
        font-size: 0.45rem;
        text-align: left;
    }

    #slogan{ /* SLOGAN DEL PIE DE PÁGINA WEB EN LA PARTE INFERIOR. */
        font-size: 0.41rem;
        line-height: 0.5rem;
        width: 65%;
    }

    #copyright{ /* DATOS DEL COPYRIGHT DEL PIE DE PÁGINA WEB EN LA PARTE INFERIOR. */
        font-size: 0.65rem; /* TAMAÑO DE LA LETRA DE LA PIE DE PÁGINA. */
    }
}
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* DISEÑO PARA DISPOSITIVOS >375px */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 375px) and (max-width: 575px){
    footer{
        height: fit-content; /* ALTURA DEL PIE DE LA PÁGINA WEB. */
    }
    
    #contFlexPiePagina{ /* CONTENEDOR PADRE FLEX PARA LOS ELEMENTOS DE LA PIE DE PÁGINA. */
        height: 11%;
        width: 97%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    #fotoLogoInferior{
        max-height: calc(2.65vw + 2.65vh); /* LE ESTAS DICIENDO QUE APAREZCA CON SU TAMAÑO ORIGINAL SIEMPRE */
    }

    #logoCorpotativo{ /* www.code48k.com */
        font-size: 0.46rem;
    }

    #slogan{ /* SLOGAN DEL PIE DE PÁGINA WEB EN LA PARTE INFERIOR. */
        font-size: 0.43rem;
        line-height: 0.51rem;
        width: 55%;
    }

    #copyright{ /* DATOS DEL COPYRIGHT DEL PIE DE PÁGINA WEB EN LA PARTE INFERIOR. */
        font-size: 0.67rem; /* TAMAÑO DE LA LETRA DE LA PIE DE PÁGINA. */
    }
}

/* DISEÑO PARA DISPOSITIVOS >576px */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 576px) and (max-width: 767px){
    footer{
        height: fit-content; /* ALTURA DEL PIE DE LA PÁGINA WEB. */
    }
    
    #contFlexPiePagina{ /* CONTENEDOR PADRE FLEX PARA LOS ELEMENTOS DE LA PIE DE PÁGINA. */
        height: 11%;
        width: 97%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #fotoLogoInferior{
        max-height: calc(2.65vw + 2.65vh); /* LE ESTAS DICIENDO QUE APAREZCA CON SU TAMAÑO ORIGINAL SIEMPRE */
    }

    #logoCorpotativo{ /* www.code48k.com */
        font-size: 0.47rem;
    }

    #slogan{ /* SLOGAN DEL PIE DE PÁGINA WEB EN LA PARTE INFERIOR. */
        font-size: 0.5rem;
        line-height: 0.6rem;
        width: 40%;
    }

    #copyright{ /* DATOS DEL COPYRIGHT DEL PIE DE PÁGINA WEB EN LA PARTE INFERIOR. */
        font-size: 0.72rem; /* TAMAÑO DE LA LETRA DE LA PIE DE PÁGINA. */
    }
}

/* DISEÑO PARA DISPOSITIVOS CON PANTALLAS/TABLETS DE MÁS DE >768px  */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 991px){ 
    footer{
        height: fit-content; /* ALTURA DEL PIE DE LA PÁGINA WEB. */
    }
    
    #contFlexPiePagina{ /* CONTENEDOR PADRE FLEX PARA LOS ELEMENTOS DE LA PIE DE PÁGINA. */
        height: 11%;
        width: 97%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    #fotoLogoInferior{
        max-height: calc(2.65vw + 2.65vh); /* LE ESTAS DICIENDO QUE APAREZCA CON SU TAMAÑO ORIGINAL SIEMPRE */
    }

    #logoCorpotativo{ /* www.code48k.com */
        font-size: 0.48rem;
    }

    #slogan{ /* SLOGAN DEL PIE DE PÁGINA WEB EN LA PARTE INFERIOR. */
        font-size: 0.58rem;
        line-height: 0.61rem;
        width: 30%;
    }

    #copyright{ /* DATOS DEL COPYRIGHT DEL PIE DE PÁGINA WEB EN LA PARTE INFERIOR. */
        font-size: 0.78rem; /* TAMAÑO DE LA LETRA DE LA PIE DE PÁGINA. */
    }
}

/* BREAKPPOINT PARA PANTALLAS GRANDES DESDE >992px */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 992px) and (max-width: 1199px){
    footer{
        height: fit-content; /* ALTURA DEL PIE DE LA PÁGINA WEB. */
    }
    
    #contFlexPiePagina{ /* CONTENEDOR PADRE FLEX PARA LOS ELEMENTOS DE LA PIE DE PÁGINA. */
        height: 11%;
        width: 97%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    #fotoLogoInferior{
        max-height: calc(2.65vw + 2.65vh); /* LE ESTAS DICIENDO QUE APAREZCA CON SU TAMAÑO ORIGINAL SIEMPRE */
    }

    #logoCorpotativo{ /* www.code48k.com */
        font-size: 0.52rem;
    }

    #slogan{ /* SLOGAN DEL PIE DE PÁGINA WEB EN LA PARTE INFERIOR. */
        font-size: 0.58rem;
        line-height: 0.65rem;
        width: 25%;
    }

    #copyright{ /* DATOS DEL COPYRIGHT DEL PIE DE PÁGINA WEB EN LA PARTE INFERIOR. */
        font-size: 0.8rem; /* TAMAÑO DE LA LETRA DE LA PIE DE PÁGINA. */
    }
}
/* BREAKPPOINT PARA PANTALLAS EXTRA GRANDES DESDE >1200px */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 1200px) and (max-width: 1680px){
    footer{
        height: fit-content; /* ALTURA DEL PIE DE LA PÁGINA WEB. */
    }
    
    #contFlexPiePagina{ /* CONTENEDOR PADRE FLEX PARA LOS ELEMENTOS DE LA PIE DE PÁGINA. */
        height: 11%;
        width: 97%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #marcoLogoInferior{
        width: 50%;
        height: 50%;;
    }

    #fotoLogoInferior{
        max-height: calc(2.65vw + 2.65vh); /* LE ESTAS DICIENDO QUE APAREZCA CON SU TAMAÑO ORIGINAL SIEMPRE */
    }

    #logoCorpotativo{ /* www.code48k.com */
        font-size: 0.55rem;
    }

   #slogan{ /* SLOGAN DEL PIE DE PÁGINA WEB EN LA PARTE INFERIOR. */
        font-size: 0.58rem;
        line-height: 0.61rem;
        width: 17.5%;
    }

    #copyright{ /* DATOS DEL COPYRIGHT DEL PIE DE PÁGINA WEB EN LA PARTE INFERIOR. */
        font-size: 0.80rem; /* TAMAÑO DE LA LETRA DE LA PIE DE PÁGINA. */
    }
}

/* BREAKPPOINT PARA PANTALLAS EXTRA GRANDES DESDE >1681px */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 1681px) and (max-width: 2168px){
    footer{
        height: fit-content; /* ALTURA DEL PIE DE LA PÁGINA WEB. */
    }
    
    #contFlexPiePagina{ /* CONTENEDOR PADRE FLEX PARA LOS ELEMENTOS DE LA PIE DE PÁGINA. */
        height: 11%;
        width: 97%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    #fotoLogoInferior{
        max-height: calc(2.65vw + 2.65vh); /* LE ESTAS DICIENDO QUE APAREZCA CON SU TAMAÑO ORIGINAL SIEMPRE */
    }

    #logoCorpotativo{ /* www.code48k.com */
        font-size: 0.55rem;
    }

   #slogan{ /* SLOGAN DEL PIE DE PÁGINA WEB EN LA PARTE INFERIOR. */
        font-size: 0.55rem;
        line-height: 0.61rem;
        width: 25%;
    }

    #copyright{ /* DATOS DEL COPYRIGHT DEL PIE DE PÁGINA WEB EN LA PARTE INFERIOR. */
        font-size: 0.82rem; /* TAMAÑO DE LA LETRA DE LA PIE DE PÁGINA. */
    }
}

/* BREAKPPOINT PARA PANTALLAS EXTRA GRANDES DESDE >2169px */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 2169px) and (max-width: 2560px){
    footer{
        height: fit-content; /* ALTURA DEL PIE DE LA PÁGINA WEB. */
    }
    
    #contFlexPiePagina{ /* CONTENEDOR PADRE FLEX PARA LOS ELEMENTOS DE LA PIE DE PÁGINA. */
        height: 11%;
        width: 97%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    #fotoLogoInferior{
        max-height: calc(2.65vw + 2.65vh); /* LE ESTAS DICIENDO QUE APAREZCA CON SU TAMAÑO ORIGINAL SIEMPRE */
    }

    #logoCorpotativo{ /* www.code48k.com */
        font-size: 0.75rem;
    }

    #slogan{ /* SLOGAN DEL PIE DE PÁGINA WEB EN LA PARTE INFERIOR. */
        font-size: 0.55rem;
        line-height: 0.5rem;
        width: 17.5%;
    }

    #copyright{ /* DATOS DEL COPYRIGHT DEL PIE DE PÁGINA WEB EN LA PARTE INFERIOR. */
        font-size: 0.85rem; /* TAMAÑO DE LA LETRA DE LA PIE DE PÁGINA. */
    }
}

/* BREAKPPOINT PARA DISPOSITIVOS/TABLETS/PANTALLAS FÍN */

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */