/* ETIQUETA SEMÁNTICA 'header' */
#cabecera{ /* CABECERA DE LA PÁGINA WEB 'header'. */
    background-color: var(--color-header); /* COLOR DEL FONDO DEL PIE DE LA CABECERA. */
    width: 100%;  /* ANCHURA DE LA CABECERA AL 100%. */
    height: 3.5vh; /* ALTURA DE LA CABECERA AL 3.5vh. */

}

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

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

#telefonoContacto{ /* TELÉFONO DE CONTACTO DE LA CABECERA */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: white;
    margin-right: 0.6rem;
}

#contEnlaceCorreo{ /* ESPACIO PARA LA SEPARACIÓN DEL CORREO ELECTRÓNICO QUE ESTA EN LA CABECERA. */
    width: 95%;
    margin: auto;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#marcoCorreo{ /* MARCO DE LA FOTOGRAFÍA DEL CONTACTO ELECTRÓNICO, ES EL 'contEnlaceCorreo' DE LA IMAGEN QUE ESTA SITUADA EN LA CABECERA. */
    width: 9%;
    height: 78%; 
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 0.25rem;
}

#fotoCorreo{ /* IMAGEN ADAPTADA A SU CONTENEDOR QUE ESTA DENTRO DEL 'figure' DE LA CABECERA. */
    max-height: 90%; 
    background-image: url('/img/clientes1.png');
}

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

/* CONTENIDO DEL 'header' FÍN */ /* BREAKPOINT PARA MÓVILES <374px */

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

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

@media screen and (min-width: 375px) and (max-width: 575px){
    #telefonoContacto{ /* TELÉFONO DE CONTACTO DE LA CABECERA */
        font-size: 1.5rem;
        margin-right: 0.6rem;
    }
    
    #fotoCorreo{ /* IMAGEN ADAPTADA A SU CONTENEDOR QUE ESTA DENTRO DEL 'figure' DE LA CABECERA. */
        max-height: 90%; 
        
    }

    #contEnlaceCorreo{ /* ESPACIO PARA LA SEPARACIÓN DEL CORREO ELECTRÓNICO QUE ESTA EN LA CABECERA. */
    width: 95%;
    }
}

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

/* CONTENIDO DEL 'header' FÍN */ /* BREAKPOINT PARA MÓVILES >375px */

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

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

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

@media screen and (min-width: 576px) and (max-width: 767px){
    #cabecera{ /* CABECERA DE LA PÁGINA WEB 'header'. */
        width: 100%;  /* ANCHURA DE LA CABECERA AL 100%. */
    }

    #telefonoContacto{ /* TELÉFONO DE CONTACTO DE LA CABECERA */
        font-size: 1.5rem;
        margin-right: -0.5rem;
    }

    #fotoCorreo{ /* IMAGEN ADAPTADA A SU CONTENEDOR QUE ESTA DENTRO DEL 'figure' DE LA CABECERA. */
        max-height: 92.5%; 
    }
    
    #contEnlaceCorreo{ /* ESPACIO PARA LA SEPARACIÓN DEL CORREO ELECTRÓNICO QUE ESTA EN LA CABECERA. */
    width: 97%;
    }
}

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

/* CONTENIDO DEL 'header' FÍN */ /* BREAKPOINT PARA MÓVILES >576px */

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

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

@media screen and (min-width: 768px) and (max-width: 1199px){
    #cabecera{ /* CABECERA DE LA PÁGINA WEB 'header'. */
        width: 100%;  /* ANCHURA DE LA CABECERA AL 100%. */
    }

     #telefonoContacto{ /* TELÉFONO DE CONTACTO DE LA CABECERA */
        font-size: 1.6rem;
        margin-right: -1.5rem;
    }

    #fotoCorreo{ /* IMAGEN ADAPTADA A SU CONTENEDOR QUE ESTA DENTRO DEL 'figure' DE LA CABECERA. */
        max-height: 94%; 
    }
    
    #contEnlaceCorreo{ /* ESPACIO PARA LA SEPARACIÓN DEL CORREO ELECTRÓNICO QUE ESTA EN LA CABECERA. */
        width: 98%;
    }
}

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

/* CONTENIDO DEL 'header' FÍN */ /* BREAKPOINT PANTALLAS/TABLETS DE >768px */

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

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

@media screen and (min-width: 1200px) and (max-width: 1439px){
    #telefonoContacto{ /* TELÉFONO DE CONTACTO DE LA CABECERA */
        font-size: 1.25rem;
        margin-right: -3.1rem;
    }

    #contEnlaceCorreo{ /* ESPACIO PARA LA SEPARACIÓN DEL CORREO ELECTRÓNICO QUE ESTA EN LA CABECERA. */
        width: 90%;
    }

    #fotoCorreo{ /* IMAGEN ADAPTADA A SU CONTENEDOR QUE ESTA DENTRO DEL 'figure' DE LA CABECERA. */
        max-height: 95%; 
    }
    
    #contEnlaceCorreo{ /* ESPACIO PARA LA SEPARACIÓN DEL CORREO ELECTRÓNICO QUE ESTA EN LA CABECERA. */
        width: 97.1%;
    }
}

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

/* CONTENIDO DEL 'header' FÍN */ /* BREAKPOINT PANTALLAS GRANDES >1200px */

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

/* BREAKPPOINT PARA PANTALLAS EXTRA GRANDES DESDE >1440 */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 1440px) and (max-width: 1920px){
    #telefonoContacto{ /* TELÉFONO DE CONTACTO DE LA CABECERA */
        font-size: 1.75rem;
        margin-right: -4.25rem;
    }

    #contEnlaceCorreo{ /* ESPACIO PARA LA SEPARACIÓN DEL CORREO ELECTRÓNICO QUE ESTA EN LA CABECERA. */
        width: 95.2%;
    }

    #fotoCorreo{ /* IMAGEN ADAPTADA A SU CONTENEDOR QUE ESTA DENTRO DEL 'figure' DE LA CABECERA. */
        max-height: 96%; 
    }
    
    #contEnlaceCorreo{ /* ESPACIO PARA LA SEPARACIÓN DEL CORREO ELECTRÓNICO QUE ESTA EN LA CABECERA. */
        width: 96.85%;
    }
}

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

/* CONTENIDO DEL 'header' FÍN */ /* BREAKPOINT PARA PANTALLAS EXTRA GRANDES >1440px */

/* 

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


/* CONTENIDO DEL 'header' FÍN */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */